@charset "utf-8";

/* ============================================================================
   Tier 1 of 4 — design tokens  (자격줍줍)

   Every value the other three tiers use is declared here and nowhere else.
   A project that wants a different look changes tokens, not rules: nothing
   below this file hard-codes a colour, a size or a duration.

   Ownership: user-owned. The generator writes this file only when it is
   absent, so a project's own token values survive regeneration; the
   design-tokens command updates only its marked Figma block. Project
   overrides can also go in site.css, which loads last.

   The root is 62.5% (1rem = 10px). Fluid sizes interpolate from 250px to
   760px, where they reach the design maximum. The smallest font goes from
   10px to 12px; all other font minima use the same 10/12 ratio. Spacing
   minima use 250/760. Padding tokens alone have a 10px positive floor;
   explicit zero stays zero. Values pin outside the viewport range.

   폰트 관련 토큰(family / size / weight / line-height / letter-spacing)은
   상속에 기대지 말고 글자가 들어가는 요소에 직접 지정한다.
   ========================================================================= */

/* Pretendard: Copyright (c) 2021 Kil Hyung-jin, SIL Open Font License 1.1.
 * License: https://github.com/orioncactus/pretendard/blob/v1.3.9/LICENSE
 * 프로젝트에서 쓰는 굵기(600, 700)만 선언한다. */
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2');
}
/* NanumSquare: Copyright (c) NAVER Corp., SIL Open Font License 1.1.
 * 프로젝트에서 쓰는 굵기(400, 700, 800)만 선언한다. */
@font-face {
    font-family: 'NanumSquare';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/NanumSquareR.woff2') format('woff2');
}
@font-face {
    font-family: 'NanumSquare';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/NanumSquareB.woff2') format('woff2');
}
@font-face {
    font-family: 'NanumSquare';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/NanumSquareEB.woff2') format('woff2');
}
/* Cafe24 Ssurround: https://fonts.cafe24.com/
 * 굵기가 하나뿐인 폰트다. Figma가 700으로 내보내므로 700으로 등록해
 * 브라우저가 가짜 볼드를 덧씌우지 않게 한다. */
@font-face {
    font-family: 'Cafe24 Ssurround';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
}

html {
    font-size: 62.5%;
}

:root {
    /* ---- safe area -----------------------------------------------------
       The four insets a notch, a Dynamic Island, a display cutout or a home
       indicator carves out of the viewport. Declared once here so no rule
       below ever writes a raw env() call, and so a rule can compose an inset
       with its own spacing: calc(2rem + var(--safe-bottom)).

       These read as 0px unless the page also carries viewport-fit=cover in
       its viewport meta. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* ---- layout -------------------------------------------------------
       Figma 화면은 393 x 852. 그 값은 고정 폭으로 쓰지 않고 참고만 한다. */
    --inner-max-width: 96rem;    /* 콘텐츠 최대 폭 768px */
    /* 좌우 여백 20px. 760px에서 그 값에 닿고 좁은 화면에서도 14px 밑으로는
       내려가지 않는다(393px에서 약 15.7px). */
    --inner-padding-x: clamp(14px, calc(11.0588px + 1.1765vw), 20px);
    --header-height: 4.6rem;    /* 상단바 46px */
    --footer-height: 8.5rem;    /* 하단네비 61px + 상하 패딩 12px */

    /* ---- font family --------------------------------------------------
       Webfonts above load from version-pinned CDN sources with swap.
       Offline, the system fallbacks still work. */
    --font-base: 'NanumSquare', 'Noto Sans KR', system-ui, -apple-system,
        BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-display: 'Cafe24 Ssurround', var(--font-base);
    --font-ui: 'Pretendard', var(--font-base);    /* 하단네비 라벨, 순위 변동 숫자, 페이지 버튼 */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
        'Liberation Mono', monospace;

    /* ---- font size -----------------------------------------------------
       Figma 값: 12 / 14 / 16 / 18 / 27 / 86.8235 */
    --fs-caption: clamp(10px, calc(9.0196px + 0.3922vw), 12px);
    --fs-body: clamp(11.6667px, calc(10.5229px + 0.4575vw), 14px);
    --fs-label: clamp(13.3333px, calc(12.0261px + 0.5229vw), 16px);
    --fs-title: clamp(15px, calc(13.5294px + 0.5882vw), 18px);
    --fs-logo: clamp(22.5px, calc(20.2941px + 0.8824vw), 27px);
    /* 섹션 제목. 시안은 18px이지만 Cafe24 Ssurround는 힌팅 프로그램이
       껍데기고(fpgm 371B) gasp 테이블이 없어, 1배 해상도 20px 미만에서
       획 굵기가 제각각으로 뭉개진다. 그래서 다른 폰트 토큰과 달리 최소값을
       10/12 비율로 내리지 않고 20px에서 막는다. 이건 디자인 램프가 아니라
       래스터라이저 하한이라 줄여서 얻는 게 없다. */
    --fs-section-title: clamp(20px, calc(19.0196px + 0.3922vw), 22px);
    --fs-splash: clamp(72.3529px, calc(65.2595px + 2.8374vw), 86.8235px);
    /* 프레임워크 기본 이름. 다른 tier가 참조해도 깨지지 않도록 연결만 해 둔다. */
    --fs-page-title: var(--fs-title);
    --fs-hero: var(--fs-logo);

    /* ---- font weight --------------------------------------------------- */
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* ---- line height ---------------------------------------------------
       프로젝트의 모든 글자는 150%. 나머지는 프레임워크 기본값. */
    --lh-none: 1.1;
    --lh-tight: 1.25;
    --lh-snug: 1.4;
    --lh-body: 1.5;
    --lh-relaxed: 1.7;

    /* ---- letter spacing ------------------------------------------------ */
    --ls-normal: 0;
    --ls-tight: -0.02em;    /* 제목(Cafe24 Ssurround), 순위 변동 숫자 */
    --ls-wide: 0.02em;

    /* ---- spacing -------------------------------------------------------
       프로젝트 사용값: 2 / 4 / 8 / 12 / 16 / 24 / 48 */
    --space-2: clamp(0.6579px, calc(0px + 0.2632vw), 2px);
    --space-4: clamp(1.3158px, calc(0px + 0.5263vw), 4px);
    --space-xs: clamp(2.6316px, calc(0px + 1.0526vw), 8px);
    --space-sm: clamp(3.9474px, calc(0px + 1.5789vw), 12px);
    --space-md: clamp(5.2632px, calc(0px + 2.1053vw), 16px);
    --space-lg: clamp(7.8947px, calc(0px + 3.1579vw), 24px);
    --space-xl: clamp(10.5263px, calc(0px + 4.2105vw), 32px);
    --space-2xl: clamp(15.7895px, calc(0px + 6.3158vw), 48px);
    --space-3xl: clamp(21.0526px, calc(0px + 8.4211vw), 64px);

    /* Padding is separate: a small gap/margin must not inherit this floor. */
    --padding-2: 10px;
    --padding-4: 10px;
    --padding-xs: 10px;
    --padding-sm: clamp(10px, calc(9.0196px + 0.3922vw), 12px);
    --padding-md: clamp(10px, calc(7.0588px + 1.1765vw), 16px);
    --padding-lg: clamp(10px, calc(3.1373px + 2.7451vw), 24px);
    --padding-xl: clamp(10.5263px, calc(0px + 4.2105vw), 32px);
    --padding-2xl: clamp(15.7895px, calc(0px + 6.3158vw), 48px);
    --padding-3xl: clamp(21.0526px, calc(0px + 8.4211vw), 64px);

    /* ---- radius --------------------------------------------------------
       프로젝트 사용값: 2 / 4 / 8 / pill. 토스트의 5px는 --radius-sm로 흡수. */
    --radius-xs: 0.2rem;
    --radius-sm: 0.4rem;
    --radius-md: 0.8rem;
    --radius-lg: 1.2rem;
    --radius-pill: 999rem;

    /* ---- icon size ----------------------------------------------------- */
    --size-icon-sm: 1.7rem;
    --size-icon-md: 2.4rem;
    /* 손가락이 닿을 최소 크기 44px. 아이콘만 있는 버튼이 이보다 작으면
       보이는 크기는 그대로 두고 누를 자리만 이만큼 넓힌다. */
    --size-tap-min: 4.4rem;
    --size-icon-lg: 3.7rem;

    /* ---- border and shadow --------------------------------------------- */
    --size-hairline: 1px;
    --shadow-card: 1px 1px 5px rgba(0, 0, 0, 0.15);
    --shadow-nav: 0 -5px 10px rgba(0, 0, 0, 0.12);
    --shadow-toast: 0 0 10px rgba(10, 63, 238, 0.6);
    --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);    /* 프레임워크 기본값 */

    /* ---- motion --------------------------------------------------------
       common.css turns these to 0s under prefers-reduced-motion, so a rule
       that uses the token never has to ask the question itself. */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);

    /* ---- layering ------------------------------------------------------ */
    --z-base: 0;
    --z-sticky: 100;
    --z-header: 200;
    --z-overlay: 300;
    --z-toast: 400;

    /* ---- colour -------------------------------------------------------- */
    /* Figma brand palette, kept behind the framework's semantic names. */
    --figma-main-100: #fff3eb;
    --figma-main-200: #fedec9;
    --figma-main-300: #faba90;
    --figma-main-400: #f7883d;
    --figma-main-500: #f56a0d;
    --figma-main-600: #672d05;
    --figma-gray-100: #f8f8f8;
    --figma-gray-300: #e1e1e1;
    --figma-gray-400: #d9d9d9;
    --figma-gray-500: #9e9e9e;
    --figma-gray-600: #5e5e5e;

    --color-bg: #ffffff;
    --color-bg-soft: var(--figma-main-100);
    --color-bg-mute: var(--figma-gray-100);
    --color-bg-card: #ffffff;
    --color-bg-disabled: var(--figma-gray-300);

    --color-text: #222222;
    --color-text-sub: var(--figma-gray-600);
    --color-text-mute: var(--figma-gray-500);
    --color-text-disabled: var(--figma-gray-500);
    --color-text-invert: #ffffff;

    --color-primary: var(--figma-main-500);
    --color-primary-strong: var(--figma-main-600);
    --color-primary-accent: var(--figma-main-400);
    --color-primary-light: var(--figma-main-300);
    --color-primary-muted: var(--figma-main-200);
    --color-primary-soft: var(--figma-main-100);

    --color-danger: #ff5757;
    --color-danger-soft: #ffe0d4;    /* Figma에 없음, 프레임워크 기본값 */
    --color-success: #2d67ff;
    --color-success-soft: #eef4ff;

    --color-line: var(--figma-gray-300);
    --color-line-strong: var(--figma-gray-400);
    --color-focus: var(--figma-main-500);
    --color-scrim: rgba(0, 0, 0, 0.45);    /* Figma에 없음, 프레임워크 기본값 */

    /* 컴포넌트 전용 색. 원본 CSS에 하드코딩돼 있던 값이다. */
    --color-tag-orange: #f78b3d;
    --color-tag-orange-soft: #fff7eb;
    --color-tag-green: #07bc0d;
    --color-tag-green-soft: #efffeb;
    --color-tag-blue: #2e6bee;
    --color-tag-blue-soft: #ebf7ff;

    --color-period-4w: #f9c9aa;
    --color-period-5w: #f8ac78;
    --color-period-6w: #fb924c;

    --color-banner-psychology: #c9e9db;
    --color-indicator-active: #ff6d00;
    --color-icon-strong: #1f1f1f;
    --color-overlay-dark: rgba(37, 37, 37, 0.2);
    --color-overlay-light: rgba(255, 255, 255, 0.7);
    --color-logo-shadow: rgba(103, 45, 5, 0.9);
}