/* ============================================================
   PRIMER STARTUP LAB — Design Tokens
   Foundations for color, type, space, radii, elevation.

   Primary color #2d47a8 is locked by the brand. Everything else
   is tuned to complement it: a cool, trustworthy, quietly-serious
   palette built for dense admin + investor + applicant surfaces.

   Import once at the top of any page:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- Fonts ---------------------------------------------
   Korean-first stack. The Rails app ships "Apple SD Gothic Neo"
   + Noto Sans KR; we mirror that here and add Pretendard as a
   modern, tighter-rendered alternative for web.
   -------------------------------------------------------------- */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/

/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/pretendard/3d4ae07b-30e4-4d95-bb2c-cc995e2b4d11-6cda8d1b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/pretendard/bc7895c5-8d7f-46cc-a1f1-24ab0a81f317-d2321e1a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/pretendard/f953eb34-b87c-48d8-8211-206868ebbade-eba6198f.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/pretendard/d8e9e38a-6f3a-4591-ad13-0b8565379f99-d233173a.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/pretendard/60292579-a199-4f69-921a-2d64e0703820-b0c48b7a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/pretendard/82b2be46-fd5c-4b32-b977-ab756fb6e75f-68dbce1c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/pretendard/3d4ae07b-30e4-4d95-bb2c-cc995e2b4d11-6cda8d1b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/pretendard/bc7895c5-8d7f-46cc-a1f1-24ab0a81f317-d2321e1a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/pretendard/f953eb34-b87c-48d8-8211-206868ebbade-eba6198f.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/pretendard/d8e9e38a-6f3a-4591-ad13-0b8565379f99-d233173a.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/pretendard/60292579-a199-4f69-921a-2d64e0703820-b0c48b7a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/pretendard/82b2be46-fd5c-4b32-b977-ab756fb6e75f-68dbce1c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/pretendard/3d4ae07b-30e4-4d95-bb2c-cc995e2b4d11-6cda8d1b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/pretendard/bc7895c5-8d7f-46cc-a1f1-24ab0a81f317-d2321e1a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/pretendard/f953eb34-b87c-48d8-8211-206868ebbade-eba6198f.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/pretendard/d8e9e38a-6f3a-4591-ad13-0b8565379f99-d233173a.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/pretendard/60292579-a199-4f69-921a-2d64e0703820-b0c48b7a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/pretendard/82b2be46-fd5c-4b32-b977-ab756fb6e75f-68dbce1c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Explicit source for the brand UI font (also imported above via the
   official Pretendard stylesheet). Declared here so the family resolves
   to a concrete file rather than name-only. */
:root {
  /* ========================================================
     COLOR SYSTEM
     Brand blue (#2d47a8) + a calibrated gray ramp.
     We define raw scales first, then map to semantic tokens.
     ======================================================== */

  /* --- Brand scale (Primer blue) -------------------------- */
  --primer-50:  #eef1fa;
  --primer-100: #d6ddf3;
  --primer-200: #a9b6e4;
  --primer-300: #7d8fd3;
  --primer-400: #556bc1;
  --primer-500: #2d47a8;   /* ★ core brand */
  --primer-600: #273d92;
  --primer-700: #1f3179;
  --primer-800: #172560;
  --primer-900: #0f1840;
  --primer-950: #070c23;

  /* --- Neutral scale (cool gray, biased slightly blue) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f8fb;
  --neutral-100: #eef1f6;
  --neutral-200: #dde3ed;
  --neutral-300: #c4cbd9;
  --neutral-400: #9aa3b5;
  --neutral-500: #6b7487;
  --neutral-600: #4a5264;
  --neutral-700: #333a4a;
  --neutral-800: #1e2433;
  --neutral-900: #10141e;
  --neutral-1000: #05070d;

  /* --- Accent: warm amber for "배치(Batch)" / 경고 / "변경" 하이라이트 - */
  --amber-50:  #fff7e6;
  --amber-100: #ffe9ba;
  --amber-300: #fec84b;
  --amber-500: #d98c0a;
  --amber-700: #b5730a;
  --amber-800: #b54708;

  /* --- Accent: emerald for approvals / positive signals --- */
  --emerald-50:  #ecfdf3;
  --emerald-100: #d1fadf;
  --emerald-200: #a7f3d0;
  --emerald-300: #6cc38a;
  --emerald-500: #17a34a;
  --emerald-700: #067647;

  /* --- Accent: red for destructive / ban / error ----------
     Replaces the deprecated rose-* ramp. Anchored at red-700
     #b42318 — the orange-red already shipped across letters_show
     destructive UI. Full 50–900 ramp (button hover, status dots,
     focus borders, alert text). See DESIGN.md §2.1. */
  --red-50:  #fef3f2;
  --red-100: #fee4e2;
  --red-200: #fecdca;
  --red-300: #fda29b;
  --red-400: #f97066;
  --red-500: #f04438;
  --red-600: #d92d20;
  --red-700: #b42318;
  --red-800: #912018;
  --red-900: #7a271a;

  /* ========================================================
     SEMANTIC COLORS — use these in product code.
     ======================================================== */

  /* Backgrounds */
  --bg-app:      var(--neutral-50);    /* page background */
  --bg-surface:  var(--neutral-0);     /* cards, modals */
  --bg-muted:    var(--neutral-100);   /* chips, input hover */
  --bg-sunken:   #f2f3f4;              /* table header, code */
  --bg-inverse:  var(--neutral-900);

  /* Foregrounds */
  --fg-1: var(--neutral-900);   /* primary text */
  --fg-2: var(--neutral-700);   /* body, default label */
  --fg-3: var(--neutral-500);   /* secondary / meta */
  --fg-4: var(--neutral-400);   /* placeholder, disabled */
  --fg-on-brand:   #ffffff;
  --fg-on-inverse: #ffffff;

  /* Borders / dividers */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-brand:  var(--primer-500);

  /* Brand roles */
  --brand:          var(--primer-500);
  --brand-hover:    var(--primer-600);
  --brand-active:   var(--primer-700);
  --brand-tint:     var(--primer-50);   /* selected row, highlighted menu */
  --brand-tint-2:   var(--primer-100);

  /* Feedback — authoritative; mirrors tokens/_colors.scss.
     Foreground/text = -700 (AA on tint); -50 = tint background.
     For solid fills under white text use the raw -500 scale. */
  --success:       var(--emerald-700);
  --success-tint:  var(--emerald-50);
  --warning:       var(--amber-700);
  --warning-tint:  var(--amber-50);
  --danger:        var(--red-700);    /* #b42318 — orange-red, not rose */
  --danger-tint:   var(--red-50);
  --info:          var(--primer-500); /* = --brand; locked rule: no new blue */
  --info-tint:     var(--primer-50);

  /* Focus ring — brand blue at 25% (matches existing form-control) */
  --focus-ring: 0 0 0 0.25rem rgba(45, 71, 168, 0.25);

  /* ========================================================
     RATING HEAT SCALE  (--rate-*)
     데이터 시각화 전용 — DESIGN.md §1 "브랜드 블루 외 보라/틸 금지"
     의 **명시적 예외**. 파트너 평가표 점수 박스(.box.bg-*) 전용.
     chrome(버튼·배지·링크)에는 절대 쓰지 말 것.
     빨강(낮음) → 초록(높음) 히트. green/info 는 브랜드 틴트로
     수렴, teal 은 emerald, red 는 시맨틱 red 스케일 재사용.
     ======================================================== */
  --rate-red-bg:     var(--red-50);      --rate-red-border:     var(--red-200);
  --rate-orange-bg:  #fef5e7;            --rate-orange-border:  #fde0bf;
  --rate-yellow-bg:  #fffaeb;            --rate-yellow-border:  #fdeec0;
  --rate-lime-bg:    #f4fbe6;            --rate-lime-border:    #d9efb0;
  --rate-green-bg:   var(--primer-50);   --rate-green-border:   var(--primer-100);
  --rate-teal-bg:    var(--emerald-50);  --rate-teal-border:    var(--emerald-200);
  --rate-info-bg:    var(--primer-50);   --rate-info-border:    var(--primer-100);
  --rate-purple-bg:  #f4ebff;            --rate-purple-border:  #e9d7fe;

  /* ========================================================
     TYPOGRAPHY
     Korean-first. Pretendard preferred; fallbacks follow the
     existing Rails stack exactly.
     ======================================================== */

  --font-sans:
    "Pretendard Variable", Pretendard,
    "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans",
    "Malgun Gothic", "맑은 고딕", Dotum, 돋움,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-display: var(--font-sans);        /* same family, heavier weights */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, "Courier New", monospace;

  /* Type scale — Korean reads larger, so body sits at 14–15px,
     matching the Rails app's .form-control font-size (13–15px). */
  --fs-xs:   11px;    /* meta, table numerics */
  --fs-sm:   13px;    /* default body in admin tables */
  --fs-base: 14px;    /* default body */
  --fs-md:   15px;    /* comfortable reading */
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  34px;
  --fs-4xl:  44px;
  --fs-5xl:  56px;

  --lh-tight: 1.2;   /* @kind font */
  --lh-snug:  1.35;  /* @kind font */
  --lh-body:  1.6;   /* @kind font */
  --lh-loose: 1.8;   /* @kind font */

  --fw-regular: 400;   /* @kind font */
  --fw-medium:  500;   /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:    700;   /* @kind font */
  --fw-black:   800;   /* @kind font */

  --tracking-tight: -0.015em;  /* @kind font */
  --tracking-normal: 0;        /* @kind font */
  /* table header, uppercase labels */
  --tracking-wide: 0.04em;     /* @kind font */

  /* ========================================================
     SPACING  (4px grid)
     ======================================================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ========================================================
     RADII
     Admin surfaces use modest radii; marketing hero can use lg.
     ======================================================== */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ========================================================
     ELEVATION
     Light, flat shadows — matches existing .content-box which
     uses rgba(0,0,0,0.05) 0 1px 3px.
     ======================================================== */
  --shadow-xs: 0 1px 2px rgba(16, 20, 30, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 20, 30, 0.06), 0 1px 2px rgba(16, 20, 30, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 20, 30, 0.08), 0 2px 4px rgba(16, 20, 30, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 20, 30, 0.12), 0 4px 8px rgba(16, 20, 30, 0.06);
  --shadow-xl: 0 24px 60px rgba(16, 20, 30, 0.18);
  --shadow-focus: var(--focus-ring);
  --shadow-inset: inset 0 1px 2px rgba(16, 20, 30, 0.06);

  /* ========================================================
     LAYOUT
     ======================================================== */
  --header-height: 54px;     /* @kind spacing */
  --footer-height: 42px;     /* @kind spacing */
  --sidebar-width: 280px;    /* @kind spacing */
  --container-max: 1400px;   /* @kind spacing */

  --z-base: 1;          /* @kind other */
  --z-sticky: 1020;     /* @kind other */
  --z-footer: 1030;     /* @kind other */
  --z-header: 1040;     /* @kind other */
  --z-dropdown: 1050;   /* @kind other */
  --z-offcanvas: 1060;  /* @kind other */
  --z-modal: 1070;      /* @kind other */
  --z-toast: 1999;      /* @kind other */

  /* ========================================================
     MOTION
     Subtle, quick. Admin UIs feel sluggish with long durations.
     ======================================================== */
  --dur-instant: 80ms;   /* @kind other */
  --dur-fast:    160ms;  /* @kind other */
  --dur-base:    220ms;  /* @kind other */
  --dur-slow:    360ms;  /* @kind other */
  --ease-std:    cubic-bezier(0.2, 0, 0, 1);     /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);     /* @kind other */
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
}

/* ============================================================
   BASE / RESET (light — do not override Bootstrap aggressively)
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-2);
  background: var(--bg-app);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these directly or bind to h1..h6, p, etc. in product CSS.
   ============================================================ */

.h-display {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

.h2, h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

.h3, h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

.h4, h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

.h5, h5 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

.h6, h6 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-2);
}

.p-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.p-body, p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.p-small {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-3);
}

.p-caption, small {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.text-numeric, .numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
}

.text-muted  { color: var(--fg-3) !important; }
.text-subtle { color: var(--fg-4) !important; }
.text-brand  { color: var(--brand) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-std);
}
a:hover { color: var(--brand-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:active { color: var(--brand-active); }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0;
}

/* Selection uses brand tint */
::selection { background: var(--brand-tint-2); color: var(--fg-1); }
  :root {
    --brand:#34405b; --brand-hover:#2a3449; --brand-active:#212a3c;
    --brand-tint:#e9ebf0; --brand-tint-2:#ccd1de;
  }
  html { scroll-behavior:auto; }
  .nav-a { color:var(--fg-2); font-size:14px; font-weight:500; text-decoration:none; padding:8px 12px; border-radius:8px; white-space:nowrap; }
  .nav-a:hover { color:var(--fg-1); background:var(--neutral-50); text-decoration:none; }
  .cta-p { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--brand); color:#fff; border:none; border-radius:10px; padding:14px 26px; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; text-decoration:none; transition:background var(--dur-fast) var(--ease-std); }
  .cta-p:hover { background:var(--brand-hover); color:#fff; text-decoration:none; }
  .cta-o { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#fff; color:var(--fg-2); border:1px solid var(--border-default); border-radius:10px; padding:14px 26px; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; text-decoration:none; transition:background var(--dur-fast) var(--ease-std); }
  .cta-o:hover { background:var(--neutral-50); text-decoration:none; color:var(--fg-1); }
  .menu-card { display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--border-subtle); border-radius:14px; box-shadow:var(--shadow-sm); padding:24px 26px; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
  .menu-card:hover { text-decoration:none; border-color:var(--brand-tint-2); box-shadow:var(--shadow-lg); }
  .ext-card { display:block; background:#fff; border:1px solid var(--border-subtle); border-radius:14px; padding:24px 26px; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
  .ext-card:hover { text-decoration:none; border-color:var(--brand-tint-2); box-shadow:var(--shadow-lg); }
  /* — redesign polish: 타이포·인터랙션·진입 모션 — */
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }
  .cta-p, .cta-o { line-height:1.3; transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-std); }
  .cta-p:active, .cta-o:active, .nav-a:active { transform: translateY(0) scale(.98); transition-duration: var(--dur-instant); }
  .cta-link { color: rgba(255,255,255,.85); transition: color var(--dur-fast) var(--ease-std); }
  .cta-link:hover { color: #fff; text-decoration: none; }
  .thumb-zoom { cursor: zoom-in; }
  .thumb-zoom img { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-std); }
  @media (hover: hover) and (pointer: fine) {
    .cta-p:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .thumb-zoom:hover img { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .rv {
        animation: rv-in .6s var(--ease-out) both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
      }
      .rv:nth-child(2) { animation-range: entry 5% entry 40%; }
      .rv:nth-child(3) { animation-range: entry 10% entry 45%; }
    }
  }
  @keyframes rv-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  /* — 비전 패널 · 에디토리얼 칼럼 — */
  .panel-col + .panel-col { border-left: 1px solid var(--brand-tint-2); }
  .ed-col { padding-right: 32px; }
  .ed-col + .ed-col { border-left: 1px solid var(--border-subtle); padding-left: 32px; }
  @media (max-width:900px) {
    .panel-cols, .ed-cols { grid-template-columns: 1fr !important; }
    .panel-col + .panel-col { border-left: none; border-top: 1px solid var(--brand-tint-2); }
    .ed-col { padding-right: 0; }
    /* 인라인 padding-top:6px이 이기지 않도록 !important — 구분선 아래 여백 확보 */
    .ed-col + .ed-col { border-left: none; border-top: 1px solid var(--border-subtle); padding: 28px 0 0 !important; margin-top: 28px; }
    /* 모바일 1열에서는 캡션 각주선이 카드 구분선과 겹쳐 보여 제거 */
    .ed-col > div:last-child { border-top: 0 !important; padding-top: 0 !important; }
  #writing-photo { flex: 1 1 100% !important; margin-right: 0 !important; }
  }


  .hamburger{ display:none; background:#fff; border:1px solid var(--border-default); border-radius:8px; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer; color:var(--fg-1); }
  .mobile-panel{ border-top:1px solid var(--border-subtle); padding:12px 24px 20px; display:flex; flex-direction:column; gap:2px; background:#fff; }
  .mobile-panel a.m-link{ color:var(--fg-2); font-size:15px; font-weight:600; text-decoration:none; padding:12px 6px; border-radius:8px; }
  .mobile-panel a.m-link:hover{ background:var(--neutral-50); text-decoration:none; }
  .mobile-panel{ transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), display 180ms allow-discrete; }
  @starting-style { .mobile-panel { opacity: 0; transform: translateY(-4px); } }
  @media (max-width:860px){
    .top-nav{ display:none !important; }
    .hamburger{ display:inline-flex !important; width:36px; height:36px; }
    .hamburger i{ font-size:19px !important; }
  }
  @media (max-width:560px){
    .top-actions{ gap:6px !important; }
    .top-actions .cta-o, .top-actions .cta-p{ padding:8px 12px !important; font-size:12.5px !important; }
  .top-actions .cta-o{ padding:7px 11px !important; }
    .hamburger{ width:32px !important; height:32px !important; border-radius:7px; }
    .hamburger i{ font-size:17px !important; }
  }
  @media (max-width:900px){
    .flex-col{ min-width:0 !important; flex:1 1 100% !important; }
    .grid-4{ grid-template-columns:repeat(2,1fr) !important; }
    .grid-3{ grid-template-columns:repeat(2,1fr) !important; }
    .writing-photo-col{ position:static !important; }
    #writing-photo{ height:220px !important; }
    #hero{ height:260px !important; }
  }
  @media (max-width:640px){
    .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr !important; }
    .hero-h1{ font-size:32px !important; }
    .cta-meta{ flex-direction:column !important; gap:12px !important; align-items:flex-start !important; margin:20px 0 26px !important; }
    .cta-sec{ padding:52px 24px !important; text-align:left !important; }
    .cta-h2{ font-size:23px !important; }
    .sec-h2{ font-size:26px !important; }
  }

/* ============================================================
   x-dc(sc-if) 조건부 렌더를 hidden 속성 토글로 대체하면서 필요해진 규칙.
   - .mobile-panel은 display:flex라 hidden 기본 스타일을 이긴다.
   - #contact-modal은 원본에서 display:flex가 인라인 style에 있어
     CSS로 못 이긴다. 이 한 곳만 인라인 스타일을 여기로 옮겼다.
   ============================================================ */
.mobile-panel[hidden] { display: none; }

#contact-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16, 20, 30, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#contact-modal[hidden] { display: none; }