@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.

   Source: Figma mobile frames (393 × 852). Only values used by real app
   screens are extracted. The user-flow canvas (#444 board, yellow/blue
   flow boxes, connector arrows, #7f8894 flow labels, #646f7c annotation
   panels, Gmarket Sans annotation titles) and the iOS status bar mock are
   documentation, not UI, and are deliberately left out.

   The root is 62.5% (1rem = 10px). Fluid sizes interpolate from 250px to
   393px - the width of the Figma frame - and pin at the design value from
   there up. A phone therefore renders the design at its drawn size instead
   of a scaled-down version of it; only narrower screens shrink. (The ramp
   used to end at 760px, which left a 393px phone at about 79% of the
   design. Cli_DesignTokens still writes 760, so a regenerated block has to
   be re-ramped the same way.) --inner-max-width stays 760px: that is how
   wide the content column may grow, not where type stops growing. The smallest font goes from
   10px to its design size; all other font minima use the 10/14 ratio.
   Spacing minima use 250/760. Padding tokens alone have a 10px positive
   floor; explicit zero stays zero. Values pin outside the viewport range.
   ========================================================================= */

/* Pretendard: Copyright (c) 2021 Kil Hyung-jin, SIL Open Font License 1.1.
 * License: https://github.com/orioncactus/pretendard/blob/v1.3.9/LICENSE */
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2') format('woff2');
}
@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 Neo: NAVER, SIL Open Font License 1.1.
 * License: https://help.naver.com/service/30016/contents/18088
 * Served as static weights from NAVER's own host; the jsDelivr mirror of the
 * variable build is rejected by Chrome's font sanitiser (OTS parsing error),
 * so it is not used here. The family name must stay spelled exactly as
 * --font-display below spells it, or nothing picks these faces up.
 * Used for the 땅땅 wordmark and the splash tagline. */
@font-face {
    font-family: 'NanumSquare Neo';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2') format('woff2');
}
@font-face {
    font-family: 'NanumSquare Neo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2') format('woff2');
}
@font-face {
    font-family: 'NanumSquare Neo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2') format('woff2');
}
@font-face {
    font-family: 'NanumSquare Neo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2') format('woff2');
}
@font-face {
    font-family: 'NanumSquare Neo';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2') format('woff2');
}

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)).

       The Figma frames draw a 44px iOS status bar; that height is NOT a
       token. It is what --safe-top supplies on a real device.

       The 0px fallback matters: without a cutout or env() support every
       calc() collapses to the design's original value. These read as 0px
       unless the page 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 -------------------------------------------------------
       Design is phone-only (393px). Content stops growing at 760px, the
       same point where fluid values reach their design maximum. */
    --inner-max-width: 96rem;
    /* Figma side gutter 16px, padding interpolation (10px floor). */
    --inner-padding-x: clamp(10px, calc(-0.4895px + 4.1958vw), 16px);
    /* Minimum heights, not fixed heights — content may grow them. */
    --header-height: 4.6rem;        /* sub-page nav bar: back · title */
    --header-home-height: 5.4rem;   /* home bar: logo mark + wordmark */
    /* The bottom navigation is native Android code, not markup here, so the
       web side only reserves room for it. Keep this if the native bar is drawn
       over the WebView; set it to 0 if the WebView already ends above the bar,
       which is the usual layout. Add --safe-bottom in rules. */
    --footer-height: 10.4rem;
    --icon-size: 2.4rem;
    --map-control-size: 4rem;       /* gps / map-type buttons */

    /* ---- font family -------------------------------------------------- */
    --font-base: 'Pretendard', 'Noto Sans KR', system-ui, -apple-system,
        BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    /* Brand wordmark only. Figma uses 700 (tagline) and 900 (logo). */
    --font-display: 'NanumSquare Neo', var(--font-base);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
        'Liberation Mono', monospace;

    /* ---- font size -----------------------------------------------------
       Figma text styles → tokens (design max in brackets):
       Caption_12   tab labels, pagination, data-source notes   [12]
       Body2_14     result counts, tags, table cells, notices   [14]
       Body_16      addresses, definitions, input text          [16]
       Title2_18    list titles, buttons, nav title             [18]
       splash tagline "내 손안의 쉬운 지적도"                    [20]
       term detail heading                                      [22]
       header wordmark 땅땅 (Figma 23.181)                       [23]
       splash wordmark 땅땅 (Figma 56.8675)                      [56] */
    --fs-caption: clamp(10px, calc(6.5035px + 1.3986vw), 12px);
    --fs-label: clamp(10px, calc(3.007px + 2.7972vw), 14px);
    --fs-body: clamp(11.4286px, calc(3.4366px + 3.1968vw), 16px);
    --fs-title: clamp(12.8571px, calc(3.866px + 3.5964vw), 18px);
    --fs-lead: clamp(14.2857px, calc(4.2957px + 3.996vw), 20px);
    --fs-page-title: clamp(15.7143px, calc(4.7253px + 4.3956vw), 22px);
    --fs-logo: clamp(16.4286px, calc(4.9401px + 4.5954vw), 23px);
    --fs-hero: clamp(40px, calc(12.028px + 11.1888vw), 56px);

    /* ---- font weight --------------------------------------------------- */
    --fw-light: 300;      /* data-source captions */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;      /* wordmark */

    /* ---- line height --------------------------------------------------- */
    --lh-none: 1.1;       /* wordmark, splash tagline */
    --lh-tight: 1.2;      /* tab labels (14/12), dialog text */
    --lh-snug: 1.3;       /* notice heading "확인해 주세요" */
    --lh-heading: 1.4;    /* Title2_18_SB: buttons, nav title */
    --lh-body: 1.5;       /* every Body / Caption style */
    --lh-relaxed: 1.7;    /* not in the design; kept for the framework */

    /* ---- letter spacing ------------------------------------------------ */
    --ls-normal: 0;
    --ls-tight: -0.02em;  /* sheet table, saved list, dialogs */
    --ls-wide: 0.02em;    /* not in the design; kept for the framework */

    /* ---- spacing -------------------------------------------------------
       Design ladder: 2 · 4 · 6 · 8 · 12 · 16 · 20 · 24 · 32. Figma's
       default 10px auto-layout gaps on single-child frames carry no
       meaning and are not tokenised. */
    --space-2: clamp(0.6579px, calc(-1.6884px + 0.9385vw), 2px);
    --space-4: clamp(1.3158px, calc(-3.3769px + 1.8771vw), 4px);
    --space-6: clamp(1.9737px, calc(-5.0653px + 2.8156vw), 6px);
    --space-10: clamp(3.2895px, calc(-8.4423px + 4.6927vw), 10px);
    --space-xs: clamp(2.6316px, calc(-6.7537px + 3.7541vw), 8px);
    --space-sm: clamp(3.9474px, calc(-10.1306px + 5.6312vw), 12px);
    --space-md: clamp(5.2632px, calc(-13.5074px + 7.5083vw), 16px);
    --space-20: clamp(6.5789px, calc(-16.8846px + 9.3854vw), 20px);
    --space-lg: clamp(7.8947px, calc(-20.2614px + 11.2624vw), 24px);
    --space-xl: clamp(10.5263px, calc(-27.0151px + 15.0166vw), 32px);
    --space-2xl: clamp(15.7895px, calc(-40.5226px + 22.5248vw), 48px);
    --space-3xl: clamp(21.0526px, calc(-54.0303px + 30.0331vw), 64px);

    /* Padding is separate: a small gap/margin must not inherit this floor. */
    --padding-2: 10px;
    --padding-4: 10px;
    --padding-6: 10px;
    --padding-xs: 10px;
    --padding-sm: clamp(10px, calc(6.5035px + 1.3986vw), 12px);
    --padding-md: clamp(10px, calc(-0.4895px + 4.1958vw), 16px);
    --padding-20: clamp(10px, calc(-7.4825px + 6.993vw), 20px);
    --padding-lg: clamp(10px, calc(-14.4755px + 9.7902vw), 24px);
    --padding-xl: clamp(10.5263px, calc(-27.0151px + 15.0166vw), 32px);
    --padding-2xl: clamp(15.7895px, calc(-40.5226px + 22.5248vw), 48px);
    --padding-3xl: clamp(21.0526px, calc(-54.0303px + 30.0331vw), 64px);

    /* ---- radius --------------------------------------------------------
       Near-duplicates folded: 5px (notice box, delete popover) → sm,
       10px (map-type modal) → lg. */
    --radius-xs: 0.2rem;    /* type badge 장소/도로명주소 */
    --radius-sm: 0.4rem;    /* dialogs, notice box */
    --radius-md: 0.8rem;    /* search field, map controls, cards, toasts */
    --radius-lg: 1.2rem;    /* primary button, modal */
    --radius-sheet: 2rem;   /* bottom sheet top corners */
    --radius-pill: 999rem;  /* tab bar, active tab, related-term chips */

    /* ---- border and shadow --------------------------------------------- */
    --size-hairline: 1px;
    --size-stroke: 2px;     /* outlined icons */
    --shadow-card: 0 4px 5px rgba(0, 0, 0, 0.15), 0 0 2px rgba(0, 0, 0, 0.15);   /* search field */
    --shadow-raised: 0 0 10px rgba(0, 0, 0, 0.5);                               /* map controls, toasts, modal */
    --shadow-dialog: 0 4px 4px rgba(0, 0, 0, 0.15), 0 0 2px rgba(0, 0, 0, 0.05);
    --shadow-popover: 0 0 4px rgba(0, 0, 0, 0.15);                              /* delete menu */
    --shadow-nav: 4px 4px 16px rgba(0, 0, 0, 0.1);                              /* floating tab bar */
    --shadow-sheet: 0 -6px 10px rgba(0, 0, 0, 0.25);                            /* use with filter: drop-shadow() */
    --shadow-pin: 0 0 8px rgba(0, 46, 178, 0.6);                                /* location pin glow */
    --blur-glass: 5px;                                                          /* tab bar backdrop */

    /* ---- 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-float: 50;      /* map controls over the map */
    --z-sticky: 100;
    --z-nav: 150;       /* floating tab bar */
    --z-header: 200;
    --z-sheet: 250;     /* land-info bottom sheet covers the tab bar */
    --z-toast: 280;
    --z-overlay: 300;   /* scrim + dialog */

    /* ---- colour -------------------------------------------------------- */
    /* <figma> Figma palette, kept behind the framework's semantic names. */
    --figma-main-100: #f8f9ff;
    --figma-main-200: #e6ebff;
    --figma-main-300: #c1cdf0;
    --figma-main-500: #2d448b;
    --figma-main-600: #011243;
    --figma-gray-300: #e1e1e1;
    --figma-gray-500: #9e9e9e;
    --figma-gray-600: #5e5e5e;
    --figma-basic: #222222;
    --figma-white: #ffffff;
    --figma-trans-gray-a1: #0d1c2d;
    --figma-trans-gray-a2: rgba(13, 28, 45, 0.8);
    --figma-trans-gray-a4: rgba(13, 28, 45, 0.16);
    --figma-trans-gray-a5: rgba(13, 28, 45, 0.08);
    --figma-success: #2d67ff;
    --figma-bg-success: #eef4ff;
    --figma-error: #ff5757;
    --figma-warning: #ffb924;
    --figma-icon: #1f1f1f;
    --figma-glass: rgba(242, 244, 247, 0.7);
    /* </figma> */

    --color-bg: var(--figma-white);
    --color-bg-soft: var(--figma-main-100);        /* result-count strip, chips, splash */
    --color-bg-card: var(--figma-white);
    --color-bg-disabled: var(--figma-trans-gray-a5); /* sheet handle, placeholders */
    --color-bg-brand: var(--figma-main-600);       /* header, active tab, button */
    --color-bg-accent: var(--figma-main-200);      /* notice box, easy-word tag, current page */
    --color-bg-table-head: var(--figma-main-300);  /* land-info table header cells */
    --color-bg-glass: var(--figma-glass);          /* floating tab bar */

    --color-text: var(--figma-basic);
    --color-text-sub: var(--figma-gray-600);
    --color-text-mute: var(--figma-trans-gray-a2); /* inactive tab label, close icon */
    --color-text-placeholder: var(--figma-gray-500);
    --color-text-disabled: var(--figma-gray-500);
    --color-text-brand: var(--figma-main-600);     /* titles, labels, values */
    --color-text-invert: var(--figma-white);

    --color-primary: var(--figma-main-600);
    /* The design has no darker brand step; strong aliases primary. */
    --color-primary-strong: var(--figma-main-600);
    --color-primary-soft: var(--figma-main-200);
    --color-danger: var(--figma-error);            /* 삭제 */
    /* Not in the design; placeholder tint kept for framework rules. */
    --color-danger-soft: #ffeded;
    --color-success: var(--figma-success);         /* toast text/icon */
    --color-success-soft: var(--figma-bg-success); /* toast background */
    --color-warning: var(--figma-warning);         /* dialog alert icon */

    --color-line: var(--figma-gray-300);           /* list dividers, bars */
    --color-line-strong: var(--figma-main-300);    /* card / chip / option borders */
    --color-line-brand: var(--figma-main-500);     /* section heading rule */
    --color-icon: var(--figma-icon);
    --color-scrollbar: var(--figma-gray-500);
    --color-focus: var(--figma-main-500);          /* not in the design */
    --color-scrim: rgba(0, 0, 0, 0.5);

    /* Map overlay — parcel polygon (선 / 면) */
    --color-parcel-line: var(--figma-main-600);
    --color-parcel-fill: rgba(1, 18, 67, 0.1);
}