/* ===================================================================
   Insight 행정사사무소 — Colors & Type
   -------------------------------------------------------------------
   • Point color: jade green from the business card (minimal usage).
   • Everything else lives in warm-neutral greys for readability.
   • Korean primary: Pretendard. Latin picks up the same family.
   • Script display: Caveat Brush (substitute for the original brush
     script on the business card — FLAG TO USER for confirmation).
   =================================================================== */

/* ---------- Webfont imports ------------------------------------- */
/* Pretendard (Korean + Latin) — the ONE typeface for the entire system.
   Sizes and weights vary; family does not. The "insight" wordmark is used
   as an IMAGE (assets/logo_*.png), never typeset. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root {
  /* ---------- Brand color (the one accent) -------------------- */
  --insight-green-ink:   #1F8A5E;  /* deepest — for logo / display text on white */
  --insight-green:       #2F9E6B;  /* primary brand green — buttons, links, accents */
  --insight-green-600:   #3FAD77;
  --insight-green-500:   #6FC098;  /* hover / mid arc */
  --insight-green-300:   #A8DCC5;  /* soft arc, tag backgrounds */
  --insight-green-100:   #D4EDE0;  /* surface tint, subtle highlight */
  --insight-green-50:    #F1F9F5;  /* page accent surface */

  /* ---------- Neutrals (warm, readable) ----------------------- */
  --ink-900: #111714;  /* body headings */
  --ink-800: #1D2420;  /* body text */
  --ink-700: #353D38;  /* secondary text */
  --ink-500: #5E6762;  /* tertiary / meta */
  --ink-400: #8A918D;  /* captions / placeholders */
  --ink-300: #C4C9C6;  /* dividers */
  --ink-200: #E3E6E4;  /* soft borders */
  --ink-100: #EFF1F0;  /* hairline / row hover */
  --ink-50:  #F7F8F7;  /* page background tint */
  --white:   #FFFFFF;
  --black:   #000000;

  /* ---------- Semantic ---------------------------------------- */
  --bg-page:       var(--white);
  --bg-surface:    var(--white);
  --bg-subtle:     var(--ink-50);
  --bg-accent:     var(--insight-green-50);
  --bg-inverse:    var(--ink-900);

  --fg-primary:    var(--ink-900);
  --fg-body:       var(--ink-800);
  --fg-secondary:  var(--ink-700);
  --fg-muted:      var(--ink-500);
  --fg-placeholder:var(--ink-400);
  --fg-accent:     var(--insight-green-ink);
  --fg-on-accent:  var(--white);
  --fg-link:       var(--insight-green-ink);
  --fg-link-hover: var(--insight-green);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-accent: var(--insight-green);

  /* No destructive / warning / info tokens by default — intentional.
     If the product needs them later, derive from neutrals + a single
     restrained red (#B4453A) to keep color use minimal.          */

  /* ---------- Type families ----------------------------------- */
  --font-sans:    'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                  'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR',
                  'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (modular, 1.200 ratio, 16px base) ---- */
  --fs-12: 0.75rem;    /* 12 — fine print, legal */
  --fs-14: 0.875rem;   /* 14 — caption, meta */
  --fs-16: 1rem;       /* 16 — body */
  --fs-18: 1.125rem;   /* 18 — lead paragraph */
  --fs-20: 1.25rem;    /* 20 — h5 */
  --fs-24: 1.5rem;     /* 24 — h4 */
  --fs-30: 1.875rem;   /* 30 — h3 */
  --fs-36: 2.25rem;    /* 36 — h2 */
  --fs-48: 3rem;       /* 48 — h1 */
  --fs-64: 4rem;       /* 64 — display */
  --fs-80: 5rem;       /* 80 — hero display */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;  /* CJK body — more air than Latin default */
  --lh-relaxed: 1.75;  /* long-form columns / articles */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Spacing (4px base) ------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Radii ------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---------- Shadow (restrained, warm) ----------------------- */
  --shadow-xs:  0 1px 2px rgba(17, 23, 20, 0.04);
  --shadow-sm:  0 2px 6px rgba(17, 23, 20, 0.06);
  --shadow-md:  0 8px 20px rgba(17, 23, 20, 0.06), 0 2px 4px rgba(17, 23, 20, 0.04);
  --shadow-lg:  0 20px 40px rgba(17, 23, 20, 0.08), 0 4px 8px rgba(17, 23, 20, 0.04);
  --shadow-accent: 0 14px 30px rgba(47, 158, 107, 0.20);

  /* ---------- Motion ------------------------------------------ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ---------- Container widths -------------------------------- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 960px;    /* default column width */
  --container-xl: 1120px;
  --container-2xl: 1280px;
}

/* ===================================================================
   Semantic element styles — use these in UIs directly
   =================================================================== */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-body);
  background: var(--bg-page);
  font-feature-settings: "ss06", "ss07"; /* Pretendard optical tweaks */
  word-break: keep-all;  /* CJK — don't break mid-word */
}

/* The brand wordmark is an IMAGE asset, not typeset.
   Use <img src=".../logo_horizontal.png" alt="insight 行정사사무소"> at the
   needed size. Do not try to render "insight" in a script font. */
.brand-wordmark {
  display: inline-block;
  height: 1em;   /* caller sets font-size to scale */
}
.brand-wordmark img { height: 100%; width: auto; display: block; }

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  color: var(--fg-primary);
  word-break: keep-all;
}
h2, .h2 {
  font-size: var(--fs-36);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  color: var(--fg-primary);
  word-break: keep-all;
}
h3, .h3 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
  word-break: keep-all;
}
h4, .h4 {
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
}
h5, .h5 {
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
}

.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}
p, .p {
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-body);
}
.column-body p {
  /* long-form article paragraphs */
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  margin-block: 0 var(--space-5);
}
small, .caption {
  font-size: var(--fs-14);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}
.meta {
  font-size: var(--fs-14);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-wide);
}
.eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

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

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

::selection { background: var(--insight-green-100); color: var(--insight-green-ink); }