/* Wanted Sans Design System — Tokens */
/* Source: Figma "Wanted Design System (Community)" — CC BY 4.0
   Default font is Pretendard JP (also Wanted Sans Variable for display).  */

@font-face {
  font-family: "Pretendard JP Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard-jp/dist/web/variable/PretendardJPVariable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Pretendard JP";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard-jp/dist/web/variable/PretendardJPVariable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Wanted Sans Variable";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/woff2/WantedSansVariable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Wanted Sans";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/woff2/WantedSansVariable.woff2") format("woff2-variations");
}

:root {
  /* ───────────── ATOMIC / GLOBAL PALETTE ─────────────────────── */
  /* Common */
  --color-common-0:    #FFFFFF;
  --color-common-100:  #000000;

  /* Cool-neutral (the brand's primary neutral) */
  --color-coolNeutral-99: #F7F7F8;
  --color-coolNeutral-98: #F4F4F5;
  --color-coolNeutral-96: #EAEBEC;
  --color-coolNeutral-94: #E1E2E4;
  --color-coolNeutral-92: #DBDCDF;
  --color-coolNeutral-85: #C2C4C8;
  --color-coolNeutral-75: #AEB0B6;
  --color-coolNeutral-65: #989BA2;
  --color-coolNeutral-55: #878A93;
  --color-coolNeutral-50: #70737C;
  --color-coolNeutral-40: #5A5C63;
  --color-coolNeutral-30: #46474C;
  --color-coolNeutral-25: #37383C;
  --color-coolNeutral-22: #333438;
  --color-coolNeutral-20: #2E2F33;
  --color-coolNeutral-18: #292A2D;
  --color-coolNeutral-15: #212225;
  --color-coolNeutral-12: #1B1C1E;
  --color-coolNeutral-10: #171719;
  --color-coolNeutral-8:  #141415;
  --color-coolNeutral-5:  #0F0F10;

  /* Blue — primary brand accent */
  --color-blue-99: #F7FBFF;
  --color-blue-95: #EAF2FE;
  --color-blue-90: #C9DEFE;
  --color-blue-80: #9EC5FF;
  --color-blue-70: #69A5FF;
  --color-blue-65: #4F95FF;
  --color-blue-60: #3385FF;
  --color-blue-55: #1A75FF;
  --color-blue-50: #0066FF;     /* primary */
  --color-blue-45: #005EEB;
  --color-blue-40: #0054D1;
  --color-blue-30: #003E9C;
  --color-blue-20: #002966;
  --color-blue-10: #001536;

  /* Red */
  --color-red-99: #FFFAFA;  --color-red-95: #FEECEC;  --color-red-90: #FED5D5;
  --color-red-80: #FFB5B5;  --color-red-70: #FF8C8C;  --color-red-60: #FF6363;
  --color-red-50: #FF4242;  --color-red-40: #E52222;  --color-red-30: #B20C0C;
  --color-red-20: #750404;  --color-red-10: #3B0101;

  /* Green */
  --color-green-99: #F2FFF6;  --color-green-95: #D9FFE6;  --color-green-90: #ACFCC7;
  --color-green-80: #7DF5A5;  --color-green-70: #49E57D;  --color-green-60: #1ED45A;
  --color-green-50: #00BF40;  --color-green-40: #009632;  --color-green-30: #006E25;
  --color-green-20: #004517;  --color-green-10: #00240C;

  /* Orange */
  --color-orange-99: #FFFCF7;  --color-orange-95: #FEF4E6;  --color-orange-90: #FEE6C6;
  --color-orange-80: #FFD49C;  --color-orange-70: #FFC06E;  --color-orange-60: #FFA938;
  --color-orange-50: #FF9200;  --color-orange-40: #D47800;  --color-orange-30: #9C5800;
  --color-orange-20: #663A00;  --color-orange-10: #361E00;

  /* Red-orange */
  --color-redOrange-99: #FFFAF7; --color-redOrange-95: #FEEEE5; --color-redOrange-90: #FEDBC6;
  --color-redOrange-80: #FFC09C; --color-redOrange-70: #FF9C63; --color-redOrange-60: #FF7B2E;
  --color-redOrange-50: #FF5E00; --color-redOrange-48: #F55A00; --color-redOrange-40: #CC4B00;
  --color-redOrange-30: #943600; --color-redOrange-20: #5C2200; --color-redOrange-10: #2E1100;

  /* Lime */
  --color-lime-99: #F8FFF2;  --color-lime-95: #E6FFD4;  --color-lime-90: #CCFCA9;
  --color-lime-80: #AEF779;  --color-lime-70: #88F03E;  --color-lime-60: #6BE016;
  --color-lime-50: #58CF04;  --color-lime-40: #48AD00;  --color-lime-37: #429E00;
  --color-lime-30: #347D00;  --color-lime-20: #225200;  --color-lime-10: #112900;

  /* Cyan */
  --color-cyan-99: #F7FEFF;  --color-cyan-95: #DEFAFF;  --color-cyan-90: #B5F4FF;
  --color-cyan-80: #8AEDFF;  --color-cyan-70: #57DFF7;  --color-cyan-60: #28D0ED;
  --color-cyan-50: #00BDDE;  --color-cyan-40: #0098B2;  --color-cyan-30: #006F82;
  --color-cyan-20: #004854;  --color-cyan-10: #00252B;

  /* Light blue */
  --color-lightBlue-99: #F7FDFF;  --color-lightBlue-95: #E5F6FE;  --color-lightBlue-90: #C4ECFE;
  --color-lightBlue-80: #A1E1FF;  --color-lightBlue-70: #70D2FF;  --color-lightBlue-60: #3DC2FF;
  --color-lightBlue-50: #00AEFF;  --color-lightBlue-40: #008DCF;  --color-lightBlue-30: #006796;
  --color-lightBlue-20: #004261;  --color-lightBlue-10: #002130;

  /* Violet */
  --color-violet-99: #FBFAFF;  --color-violet-95: #F0ECFE;  --color-violet-90: #DBD3FE;
  --color-violet-80: #C0B0FF;  --color-violet-70: #9E86FC;  --color-violet-60: #7D5EF7;
  --color-violet-50: #6541F2;  --color-violet-45: #5B37ED;  --color-violet-40: #4F29E5;
  --color-violet-30: #3A16C9;  --color-violet-20: #23098F;  --color-violet-10: #11024D;

  /* Purple */
  --color-purple-99: #FEFBFF;  --color-purple-95: #F9EDFF;  --color-purple-90: #F2D6FF;
  --color-purple-80: #E9BAFF;  --color-purple-70: #DE96FF;  --color-purple-60: #D478FF;
  --color-purple-50: #CB59FF;  --color-purple-40: #AD36E3;  --color-purple-30: #861CB8;
  --color-purple-20: #580A7D;  --color-purple-10: #290247;

  /* Pink */
  --color-pink-99: #FFFAFE;  --color-pink-95: #FEECFB;  --color-pink-90: #FED3F7;
  --color-pink-80: #FFB8F3;  --color-pink-70: #FF94ED;  --color-pink-60: #FA73E3;
  --color-pink-50: #F553DA;  --color-pink-46: #E846CD;  --color-pink-40: #D331B8;
  --color-pink-30: #A81690;  --color-pink-20: #730560;  --color-pink-10: #3D0133;

  /* Opacity scale (used for label/line/fill semantic tokens) */
  --opacity-5:  0.05;  --opacity-8:  0.08;  --opacity-12: 0.12;
  --opacity-16: 0.16;  --opacity-22: 0.22;  --opacity-28: 0.28;
  --opacity-35: 0.35;  --opacity-43: 0.43;  --opacity-52: 0.52;
  --opacity-61: 0.61;  --opacity-74: 0.74;  --opacity-88: 0.88;
  --opacity-97: 0.97;

  /* ───────────── SEMANTIC TOKENS — LIGHT ──────────────────────── */
  /* Primary (brand action) */
  --color-primary-normal:   #0066FF;        /* blue-50 */
  --color-primary-strong:   #005EEB;        /* blue-45 */
  --color-primary-heavy:    #0054D1;        /* blue-40 */

  /* Label — text on backgrounds. Built from coolNeutral + opacity. */
  --color-label-normal:     #171719;                     /* coolNeutral-10 */
  --color-label-strong:     #000000;                     /* common-0 (black) */
  --color-label-neutral:    rgba(51,52,56,0.88);          /* coolNeutral-22 @ 0.88 */
  --color-label-alternative:rgba(55,56,60,0.61);          /* coolNeutral-25 @ 0.61 */
  --color-label-assistive:  rgba(55,56,60,0.28);          /* coolNeutral-25 @ 0.28 */
  --color-label-disable:    rgba(55,56,60,0.16);          /* coolNeutral-25 @ 0.16 */

  /* Background */
  --color-background-normal-normal:   #FFFFFF;
  --color-background-normal-alternative: #F7F7F8;          /* coolNeutral-99 */
  --color-background-elevated-normal:  #FFFFFF;
  --color-background-elevated-alternative: #F7F7F8;
  --color-background-overlay:         rgba(0,0,0,0.08);
  --color-background-scrim:           rgba(0,0,0,0.28);

  /* Line / border */
  --color-line-normal-normal:      rgba(112,115,124,0.22);
  --color-line-normal-neutral:     rgba(112,115,124,0.16);
  --color-line-normal-alternative: rgba(112,115,124,0.08);
  --color-line-solid-normal:       #C2C4C8;
  --color-line-solid-neutral:      #DBDCDF;
  --color-line-solid-alternative:  #EAEBEC;

  /* Status */
  --color-status-positive: #00BF40;     /* green-50 */
  --color-status-cautionary: #FF9200;   /* orange-50 */
  --color-status-negative:  #FF4242;    /* red-50 */

  /* Interaction */
  --color-interaction-inactive: #989BA2;       /* coolNeutral-65 */
  --color-interaction-disable:  #F4F4F5;       /* coolNeutral-98 */

  /* Inverse (for dark surfaces / chips) */
  --color-inverse-background: #171719;
  --color-inverse-label:      #FFFFFF;
  --color-inverse-primary:    #3385FF;          /* blue-60 */

  /* Static (never inverts) */
  --color-static-white: #FFFFFF;
  --color-static-black: #000000;

  /* Component fill (light surfaces over content) */
  --color-fill-normal:        rgba(112,115,124,0.08);
  --color-fill-strong:        rgba(112,115,124,0.16);
  --color-fill-alternative:   rgba(112,115,124,0.05);

  /* Accent backgrounds (tinted color washes) */
  --color-accent-bg-blue:        #0066FF;
  --color-accent-bg-redOrange:   #FF5E00;
  --color-accent-bg-orange:      #FF9200;
  --color-accent-bg-lime:        #58CF04;
  --color-accent-bg-cyan:        #00BDDE;
  --color-accent-bg-violet:      #6541F2;
  --color-accent-bg-purple:      #CB59FF;
  --color-accent-bg-pink:        #F553DA;

  /* ───────────── RADIUS ───────────────────────────────────────── */
  --radius-2:  2px;
  --radius-4:  4px;
  --radius-6:  6px;
  --radius-8:  8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-pill: 9999px;

  /* ───────────── SPACING (4-pt) ───────────────────────────────── */
  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* ───────────── ELEVATION / SHADOWS (Normal — drop only) ─────── */
  --shadow-normal-xsmall:
    0 1px 2px -1px rgba(23,23,23,0.10);
  --shadow-normal-small:
    0 4px 6px -1px rgba(23,23,23,0.06),
    0 2px 4px -2px rgba(23,23,23,0.06);
  --shadow-normal-medium:
    0 10px 15px -3px rgba(23,23,23,0.07),
    0 4px 6px -2px rgba(0,0,0,0.07);
  --shadow-normal-large:
    0 16px 24px -6px rgba(23,23,23,0.08),
    0 6px 10px -4px rgba(23,23,23,0.08);
  --shadow-normal-xlarge:
    0 24px 38px -10px rgba(23,23,23,0.12),
    0 10px 15px -5px rgba(23,23,23,0.10);

  /* Emphasize elevation (paired layers, longer cast) */
  --shadow-emphasize-small:
    0 2px 1px rgba(23,23,23,0.03),
    0 4px 2.5px rgba(23,23,23,0.03);
  --shadow-emphasize-large:
    0 10px 5px rgba(23,23,23,0.05),
    0 24px 14px rgba(23,23,23,0.06);

  /* ───────────── TYPOGRAPHY ──────────────────────────────────── */
  --font-sans:    "Pretendard JP", "Pretendard JP Variable", "Wanted Sans", "Wanted Sans Variable", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Wanted Sans Variable", "Wanted Sans", "Pretendard JP", system-ui, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", ui-monospace, "Menlo", monospace;

  /* The Wanted scale — 7 levels, 18 sub-levels. All in px / unitless line-height / em letter-spacing. */
  /* Display */
  --type-display-1-size: 56px; --type-display-1-line: 1.25;   --type-display-1-tracking: -0.017em; --type-display-1-weight: 700;
  --type-display-2-size: 40px; --type-display-2-line: 1.3;    --type-display-2-tracking: -0.0282em; --type-display-2-weight: 700;
  --type-display-3-size: 36px; --type-display-3-line: 1.334;  --type-display-3-tracking: -0.027em;  --type-display-3-weight: 700;

  /* Title */
  --type-title-1-size: 32px;   --type-title-1-line: 1.375;  --type-title-1-tracking: -0.0253em; --type-title-1-weight: 700;
  --type-title-2-size: 28px;   --type-title-2-line: 1.358;  --type-title-2-tracking: -0.0236em; --type-title-2-weight: 700;
  --type-title-3-size: 24px;   --type-title-3-line: 1.334;  --type-title-3-tracking: -0.023em;  --type-title-3-weight: 700;

  /* Heading */
  --type-heading-1-size: 22px; --type-heading-1-line: 1.364; --type-heading-1-tracking: -0.0194em; --type-heading-1-weight: 600;
  --type-heading-2-size: 20px; --type-heading-2-line: 1.4;   --type-heading-2-tracking: -0.012em;  --type-heading-2-weight: 600;

  /* Headline */
  --type-headline-1-size: 18px; --type-headline-1-line: 1.445; --type-headline-1-tracking: -0.002em; --type-headline-1-weight: 600;
  --type-headline-2-size: 17px; --type-headline-2-line: 1.412; --type-headline-2-tracking: 0em;      --type-headline-2-weight: 600;

  /* Body */
  --type-body-1-normal-size:  16px; --type-body-1-normal-line: 1.5;   --type-body-1-normal-tracking: 0.0057em; --type-body-1-normal-weight: 500;
  --type-body-1-reading-size: 16px; --type-body-1-reading-line: 1.625; --type-body-1-reading-tracking: 0.0057em; --type-body-1-reading-weight: 500;
  --type-body-2-normal-size:  15px; --type-body-2-normal-line: 1.467; --type-body-2-normal-tracking: 0.0096em; --type-body-2-normal-weight: 500;
  --type-body-2-reading-size: 15px; --type-body-2-reading-line: 1.6;   --type-body-2-reading-tracking: 0.0096em; --type-body-2-reading-weight: 500;

  /* Label / Caption */
  --type-label-1-normal-size:  14px; --type-label-1-normal-line: 1.429; --type-label-1-normal-tracking: 0.0145em; --type-label-1-normal-weight: 500;
  --type-label-1-reading-size: 14px; --type-label-1-reading-line: 1.571; --type-label-1-reading-tracking: 0.0145em; --type-label-1-reading-weight: 500;
  --type-label-2-size: 13px; --type-label-2-line: 1.385; --type-label-2-tracking: 0.0194em; --type-label-2-weight: 500;
  --type-caption-1-size: 12px; --type-caption-1-line: 1.334; --type-caption-1-tracking: 0.0252em; --type-caption-1-weight: 500;
  --type-caption-2-size: 11px; --type-caption-2-line: 1.273; --type-caption-2-tracking: 0.0311em; --type-caption-2-weight: 500;
}

/* Reusable type-style classes — use in HTML directly */
.t-display-1 { font-family: var(--font-display); font-size: var(--type-display-1-size); line-height: var(--type-display-1-line); letter-spacing: var(--type-display-1-tracking); font-weight: var(--type-display-1-weight); }
.t-display-2 { font-family: var(--font-sans);    font-size: var(--type-display-2-size); line-height: var(--type-display-2-line); letter-spacing: var(--type-display-2-tracking); font-weight: var(--type-display-2-weight); }
.t-display-3 { font-family: var(--font-sans);    font-size: var(--type-display-3-size); line-height: var(--type-display-3-line); letter-spacing: var(--type-display-3-tracking); font-weight: var(--type-display-3-weight); }

.t-title-1   { font-family: var(--font-sans); font-size: var(--type-title-1-size); line-height: var(--type-title-1-line); letter-spacing: var(--type-title-1-tracking); font-weight: var(--type-title-1-weight); }
.t-title-2   { font-family: var(--font-sans); font-size: var(--type-title-2-size); line-height: var(--type-title-2-line); letter-spacing: var(--type-title-2-tracking); font-weight: var(--type-title-2-weight); }
.t-title-3   { font-family: var(--font-sans); font-size: var(--type-title-3-size); line-height: var(--type-title-3-line); letter-spacing: var(--type-title-3-tracking); font-weight: var(--type-title-3-weight); }

.t-heading-1 { font-family: var(--font-sans); font-size: var(--type-heading-1-size); line-height: var(--type-heading-1-line); letter-spacing: var(--type-heading-1-tracking); font-weight: var(--type-heading-1-weight); }
.t-heading-2 { font-family: var(--font-sans); font-size: var(--type-heading-2-size); line-height: var(--type-heading-2-line); letter-spacing: var(--type-heading-2-tracking); font-weight: var(--type-heading-2-weight); }

.t-headline-1 { font-family: var(--font-sans); font-size: var(--type-headline-1-size); line-height: var(--type-headline-1-line); letter-spacing: var(--type-headline-1-tracking); font-weight: var(--type-headline-1-weight); }
.t-headline-2 { font-family: var(--font-sans); font-size: var(--type-headline-2-size); line-height: var(--type-headline-2-line); letter-spacing: var(--type-headline-2-tracking); font-weight: var(--type-headline-2-weight); }

.t-body-1     { font-family: var(--font-sans); font-size: var(--type-body-1-normal-size);  line-height: var(--type-body-1-normal-line);  letter-spacing: var(--type-body-1-normal-tracking);  font-weight: var(--type-body-1-normal-weight); }
.t-body-1-reading { font-family: var(--font-sans); font-size: var(--type-body-1-reading-size); line-height: var(--type-body-1-reading-line); letter-spacing: var(--type-body-1-reading-tracking); font-weight: var(--type-body-1-reading-weight); }
.t-body-2     { font-family: var(--font-sans); font-size: var(--type-body-2-normal-size);  line-height: var(--type-body-2-normal-line);  letter-spacing: var(--type-body-2-normal-tracking);  font-weight: var(--type-body-2-normal-weight); }
.t-body-2-reading { font-family: var(--font-sans); font-size: var(--type-body-2-reading-size); line-height: var(--type-body-2-reading-line); letter-spacing: var(--type-body-2-reading-tracking); font-weight: var(--type-body-2-reading-weight); }

.t-label-1   { font-family: var(--font-sans); font-size: var(--type-label-1-normal-size);  line-height: var(--type-label-1-normal-line);  letter-spacing: var(--type-label-1-normal-tracking);  font-weight: var(--type-label-1-normal-weight); }
.t-label-2   { font-family: var(--font-sans); font-size: var(--type-label-2-size);  line-height: var(--type-label-2-line);  letter-spacing: var(--type-label-2-tracking);  font-weight: var(--type-label-2-weight); }
.t-caption-1 { font-family: var(--font-sans); font-size: var(--type-caption-1-size); line-height: var(--type-caption-1-line); letter-spacing: var(--type-caption-1-tracking); font-weight: var(--type-caption-1-weight); }
.t-caption-2 { font-family: var(--font-sans); font-size: var(--type-caption-2-size); line-height: var(--type-caption-2-line); letter-spacing: var(--type-caption-2-tracking); font-weight: var(--type-caption-2-weight); }

/* Semantic HTML defaults — opinionated */
html, body { font-family: var(--font-sans); color: var(--color-label-normal); background: var(--color-background-normal-normal); }
h1 { font-family: var(--font-sans); font-size: var(--type-display-3-size); line-height: var(--type-display-3-line); letter-spacing: var(--type-display-3-tracking); font-weight: 700; }
h2 { font-family: var(--font-sans); font-size: var(--type-title-2-size);   line-height: var(--type-title-2-line);   letter-spacing: var(--type-title-2-tracking);   font-weight: 700; }
h3 { font-family: var(--font-sans); font-size: var(--type-title-3-size);   line-height: var(--type-title-3-line);   letter-spacing: var(--type-title-3-tracking);   font-weight: 700; }
h4 { font-family: var(--font-sans); font-size: var(--type-heading-1-size); line-height: var(--type-heading-1-line); letter-spacing: var(--type-heading-1-tracking); font-weight: 600; }
h5 { font-family: var(--font-sans); font-size: var(--type-heading-2-size); line-height: var(--type-heading-2-line); letter-spacing: var(--type-heading-2-tracking); font-weight: 600; }
h6 { font-family: var(--font-sans); font-size: var(--type-headline-2-size); line-height: var(--type-headline-2-line); letter-spacing: var(--type-headline-2-tracking); font-weight: 600; }
p  { font-family: var(--font-sans); font-size: var(--type-body-1-normal-size); line-height: var(--type-body-1-reading-line); letter-spacing: var(--type-body-1-normal-tracking); font-weight: 500; }
small { font-size: var(--type-caption-1-size); line-height: var(--type-caption-1-line); letter-spacing: var(--type-caption-1-tracking); }
code, pre, kbd { font-family: var(--font-mono); font-size: 14px; }

:root {
  /* SEORYU brand — 청효(靑曉) deep teal + dawn blue + warm sand */
  --seo-navy-900: #06192E;
  --seo-navy-800: #0B2540;
  --seo-navy-700: #14365A;
  --seo-navy-600: #1E4974;
  --seo-teal-700: #145E5E;
  --seo-teal-600: #1E8A8A;
  --seo-teal-500: #2BA8A8;
  --seo-teal-400: #5DC2BE;
  --seo-teal-100: #D6EEEC;
  --seo-teal-50:  #EFF8F7;
  --seo-dawn-600: #2C6FB8;     /* dawn blue */
  --seo-dawn-500: #3F8AD6;
  --seo-dawn-100: #DDEAF7;
  --seo-sand-500: #E6D2A8;     /* warm sand accent */
  --seo-sand-300: #F0E2C2;
  --seo-sand-100: #F5EDE0;
  --seo-sand-50:  #FAF6EE;
  --seo-ink:      #0E1A24;
  --seo-ink-2:    #2A3742;
  --seo-mute:     #5C6A75;
  --seo-line:     rgba(11,37,64,0.10);
  --seo-line-2:   rgba(11,37,64,0.06);
  --seo-bg:       #FBFAF6;     /* faintly warm page bg */
  --seo-card:     #FFFFFF;
}

html, body {
  background: var(--seo-bg);
  color: var(--seo-ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

/* Tabular figures for prices/credits */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Layout container */
.container-x { max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
@media (min-width: 768px) { .container-x { padding-inline: 40px; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em;
  border-radius: 10px; transition: transform .06s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  cursor: pointer; white-space: nowrap; user-select: none; border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn--xs { height: 32px; padding: 0 12px; font-size: 13px; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn--md { height: 44px; padding: 0 18px; font-size: 15px; }
.btn--lg { height: 52px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.btn--primary { background: var(--seo-navy-800); color: #fff; }
.btn--primary:hover { background: var(--seo-navy-700); }
.btn--accent  { background: var(--seo-teal-600); color: #fff; }
.btn--accent:hover { background: var(--seo-teal-700); }
.btn--secondary { background: var(--seo-card); color: var(--seo-navy-800); border-color: var(--seo-line); }
.btn--secondary:hover { background: #F4F1EA; }
.btn--ghost { background: transparent; color: var(--seo-ink-2); }
.btn--ghost:hover { background: rgba(11,37,64,0.04); }

/* Card surface */
.card { background: var(--seo-card); border: 1px solid var(--seo-line); border-radius: 16px; }

/* Subtle dotted divider */
.dot-rule { border-top: 1px dashed var(--seo-line); }

/* Hairline */
.hr { height: 1px; background: var(--seo-line); }

/* Hero — dawn-to-dusk subtle wash, no aggressive gradient on UI cards */
.hero-bg {
  background:
    radial-gradient(60% 60% at 18% 0%, rgba(30,138,138,0.10), transparent 60%),
    radial-gradient(50% 50% at 95% 10%, rgba(44,111,184,0.08), transparent 70%),
    linear-gradient(180deg, #FCFAF4 0%, #FBFAF6 60%, #FBFAF6 100%);
}

/* Funnel arrows */
.arrow {
  width: 100%; height: 1px; background: var(--seo-navy-800); position: relative; opacity: .4;
}
.arrow::after {
  content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px;
  border-top: 1px solid var(--seo-navy-800); border-right: 1px solid var(--seo-navy-800);
  transform: rotate(45deg); opacity: 1;
}

/* Tonal badge */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 9999px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  font-feature-settings: "tnum";
}
.badge--teal { background: var(--seo-teal-50); color: var(--seo-teal-700); border: 1px solid rgba(30,138,138,0.18); }
.badge--sand { background: var(--seo-sand-100); color: #6B5318; border: 1px solid rgba(180,140,40,0.20); }
.badge--navy { background: rgba(11,37,64,0.06); color: var(--seo-navy-800); border: 1px solid var(--seo-line); }
.badge--dawn { background: var(--seo-dawn-100); color: var(--seo-dawn-600); border: 1px solid rgba(44,111,184,0.18); }
.badge--soft { background: #F2EEE5; color: #6E6450; border: 1px solid rgba(120,100,60,0.16); }

/* Section spacing */
.section { padding-block: 96px; }
@media (max-width: 768px) { .section { padding-block: 64px; } }

/* Eyebrow label (small all-caps) */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--seo-teal-700);
}

/* Subtle inner card stroke */
.svc-card {
  background: var(--seo-card); border: 1px solid var(--seo-line); border-radius: 16px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.svc-card:hover { border-color: rgba(11,37,64,0.22); transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(11,37,64,0.18);
}

/* Tier card */
.tier {
  background: var(--seo-card); border: 1px solid var(--seo-line); border-radius: 20px;
  padding: 28px;
}
.tier--featured { background: var(--seo-navy-900); color: #fff; border-color: var(--seo-navy-900); }
.tier--featured .tier-mute { color: rgba(255,255,255,0.62); }
.tier--featured .hr { background: rgba(255,255,255,0.14); }

/* Forms — placeholder mock */
.input {
  height: 48px; border-radius: 10px; border: 1px solid var(--seo-line);
  background: #fff; padding: 0 16px; width: 100%; font-size: 16px;
  font-family: var(--font-sans); color: var(--seo-ink);
}
.input:focus { outline: none; border-color: var(--seo-teal-600);
  box-shadow: 0 0 0 4px rgba(30,138,138,0.16); }
.field-label { font-size: 13px; font-weight: 600; color: var(--seo-ink-2); display: block; margin-bottom: 8px; letter-spacing: -0.005em; }

/* FAQ */
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq details { border-top: 1px solid var(--seo-line); }
.faq details:last-child { border-bottom: 1px solid var(--seo-line); }
.faq summary { padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .chev { transition: transform .2s ease; color: var(--seo-mute); }
.faq .answer { padding: 0 0 24px; color: var(--seo-ink-2); max-width: 64ch; line-height: 1.7; }

/* Compare table */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; vertical-align: top; }
.cmp thead th { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--seo-mute); border-bottom: 1px solid var(--seo-line); font-weight: 700; }
.cmp tbody tr td { border-bottom: 1px solid var(--seo-line-2); }
.cmp tbody tr td:first-child { font-weight: 600; color: var(--seo-navy-800); width: 22%; }
.cmp .col-us { background: rgba(30,138,138,0.05); }
.cmp .col-us-head { background: rgba(30,138,138,0.10); color: var(--seo-teal-700); border-bottom-color: rgba(30,138,138,0.30); }
.cmp .ok { color: var(--seo-teal-700); font-weight: 600; }
.cmp .ng { color: var(--seo-mute); }

/* Logo lockup */
.logo {
  display: inline-flex; align-items: center; gap: 10px; color: var(--seo-navy-900);
  font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em;
}
.logo .mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--seo-navy-800) 0%, var(--seo-teal-600) 100%);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px;
  letter-spacing: 0.02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

/* Form preview window inside hero */
.window {
  background: #fff; border-radius: 18px; border: 1px solid var(--seo-line);
  box-shadow: 0 30px 60px -30px rgba(11,37,64,0.30), 0 12px 24px -16px rgba(11,37,64,0.16);
  overflow: hidden;
}
.window-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--seo-line); background: #FAF8F2; }
.dot { width: 10px; height: 10px; border-radius: 999px; background: #DDD7C4; }

/* Stripe of legal logos */
.legal-strip { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; color: var(--seo-mute); font-size: 13px; }

/* Sticky-feel nav */
.nav-shell {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,250,246,0.84);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--seo-line-2);
}

/* Tiny utilities */
.t-mono { font-family: var(--font-mono); }
.k-num { font-family: var(--font-mono); font-feature-settings: "tnum"; letter-spacing: 0; }

/* For long-Korean text wrapping */
.k-pretty { word-break: keep-all; text-wrap: pretty; }

/* Visual helpers for placeholder document */
.doc-line { height: 8px; border-radius: 4px; background: #ECE5D2; }
.doc-line.short { width: 40%; }
.doc-line.mid { width: 70%; }
.doc-line.long { width: 100%; }

/* Remove default focus rings on interactive non-input things */
.btn:focus-visible { outline: 2px solid var(--seo-teal-600); outline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--seo-teal-600); outline-offset: 2px; border-radius: 4px; }

/* Hide scrollbar in horizontal scrollers */
.no-bar::-webkit-scrollbar { display: none; }

/* Headline display tweaks */
.headline-xl {
  font-family: var(--font-sans);
  font-weight: 800; letter-spacing: -0.028em;
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.12;
  color: var(--seo-navy-900);
}
.headline-md {
  font-weight: 800; letter-spacing: -0.022em;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.18;
  color: var(--seo-navy-900);
}
.eyemark::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: var(--seo-teal-600); margin-right: 8px; vertical-align: middle;
}