/* ============================================================
   Dia-hub 디자인 시스템 v2 — 웰빙 신호등 톤 (따뜻한 그린 · 그라디언트 포인트 · 부드러운 글로우)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Sans:wght@400;500;600;700;800&family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  color-scheme: light;
  --paper:#f5f8f4;
  --surface:#ffffff;
  --surface-2:#eaf2e8;
  --ink:#1b2620;
  --ink-2:#535f57;
  --ink-muted:#8a9389;
  --border:#dfe8dc;
  --border-strong:rgba(27,38,32,.13);

  --brand:#26925f;            /* 신호등 초록 = 메인 브랜드 컬러 */
  --brand-2:#57c48c;          /* 그라디언트 밝은 끝 */
  --brand-strong:#1d7a4c;
  --brand-ink:#ffffff;
  --brand-soft:#e0f3e7;
  --brand-gradient: linear-gradient(135deg, var(--brand-2), var(--brand));
  --brand-glow: 0 8px 22px -8px rgba(38,146,95,.55);
  --brand-glow-lg: 0 14px 32px -10px rgba(38,146,95,.55);

  --accent:#3d7ab5;
  --accent-2:#6fa9e0;
  --accent-soft:#e6eef7;

  --go:#26925f;      --go-2:#57c48c;      --go-soft:#e0f3e7;   --go-glow:0 6px 18px -6px rgba(38,146,95,.45);
  --caution:#d99a1f; --caution-2:#f3c161; --caution-soft:#fbf1d8; --caution-glow:0 6px 18px -6px rgba(217,154,31,.42);
  --stop:#c8433a;    --stop-2:#e97b70;    --stop-soft:#fbe8e6; --stop-glow:0 6px 18px -6px rgba(200,67,58,.42);

  --shadow: 0 2px 6px rgba(27,38,32,.05), 0 14px 30px -18px rgba(27,38,32,.24);
  --shadow-lift: 0 16px 34px -14px rgba(27,38,32,.32);
  --r-s:11px; --r-m:16px; --r-l:26px; --r-pill:999px;

  --font-display:'Gowun Sans','IBM Plex Sans KR',system-ui,sans-serif;
  --font-body:'IBM Plex Sans KR','Noto Sans KR',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0e1512; --surface:#151f1a; --surface-2:#1d2820;
    --ink:#eef4f0; --ink-2:#b9c4bc; --ink-muted:#7f8b83;
    --border:#293429; --border-strong:rgba(255,255,255,.14);
    --brand:#5cc78e; --brand-2:#7fdba9; --brand-strong:#82d6a6; --brand-ink:#08150f; --brand-soft:rgba(92,199,142,.16);
    --brand-gradient: linear-gradient(135deg, var(--brand-2), var(--brand));
    --brand-glow: 0 8px 22px -8px rgba(92,199,142,.4);
    --brand-glow-lg: 0 14px 32px -10px rgba(92,199,142,.42);
    --accent:#79b0e6; --accent-2:#9cc7ee; --accent-soft:rgba(121,176,230,.16);
    --go:#5cc78e; --go-2:#7fdba9; --go-soft:rgba(92,199,142,.16); --go-glow:0 6px 18px -6px rgba(92,199,142,.35);
    --caution:#e6bd5f; --caution-2:#f0d08c; --caution-soft:rgba(230,189,95,.16); --caution-glow:0 6px 18px -6px rgba(230,189,95,.35);
    --stop:#e28a80; --stop-2:#eeaba3; --stop-soft:rgba(226,138,128,.16); --stop-glow:0 6px 18px -6px rgba(226,138,128,.35);
    --shadow: 0 2px 6px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.6);
    --shadow-lift: 0 16px 34px -14px rgba(0,0,0,.66);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0e1512; --surface:#151f1a; --surface-2:#1d2820;
  --ink:#eef4f0; --ink-2:#b9c4bc; --ink-muted:#7f8b83;
  --border:#293429; --border-strong:rgba(255,255,255,.14);
  --brand:#5cc78e; --brand-2:#7fdba9; --brand-strong:#82d6a6; --brand-ink:#08150f; --brand-soft:rgba(92,199,142,.16);
  --brand-gradient: linear-gradient(135deg, var(--brand-2), var(--brand));
  --brand-glow: 0 8px 22px -8px rgba(92,199,142,.4);
  --brand-glow-lg: 0 14px 32px -10px rgba(92,199,142,.42);
  --accent:#79b0e6; --accent-2:#9cc7ee; --accent-soft:rgba(121,176,230,.16);
  --go:#5cc78e; --go-2:#7fdba9; --go-soft:rgba(92,199,142,.16); --go-glow:0 6px 18px -6px rgba(92,199,142,.35);
  --caution:#e6bd5f; --caution-2:#f0d08c; --caution-soft:rgba(230,189,95,.16); --caution-glow:0 6px 18px -6px rgba(230,189,95,.35);
  --stop:#e28a80; --stop-2:#eeaba3; --stop-soft:rgba(226,138,128,.16); --stop-glow:0 6px 18px -6px rgba(226,138,128,.35);
  --shadow: 0 2px 6px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.6);
  --shadow-lift: 0 16px 34px -14px rgba(0,0,0,.66);
}

*{box-sizing:border-box;}
html,body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0; letter-spacing:-.01em; }
p{margin:0;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:15px;}
a{color:var(--brand-strong); text-decoration:none;}
.num,.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
[hidden]{display:none!important;}
img{max-width:100%;}

.shell{ max-width:1040px; margin:0 auto; padding:0 20px; }
.muted{ color:var(--ink-muted); }
.lede{ color:var(--ink-2); font-size:14.5px; line-height:1.7; }

/* ---------- Top nav (shared across pages) ---------- */
.site-nav{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.site-nav .row{ display:flex; align-items:center; gap:18px; padding:14px 20px; max-width:1040px; margin:0 auto; }
.site-logo{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--ink); }
.site-logo .mark{ width:34px; height:34px; border-radius:11px; background:var(--brand-gradient); box-shadow:var(--brand-glow); display:flex; align-items:center; justify-content:center; font-size:17px; }
.site-links{ display:flex; gap:4px; margin-left:6px; flex-wrap:wrap; }
.site-links a{ display:flex; align-items:center; gap:6px; padding:8px 13px; border-radius:var(--r-pill); font-size:13.5px; font-weight:600; color:var(--ink-2); transition:background .15s ease, color .15s ease; }
.site-links a:hover, .site-links a.active{ background:var(--brand-soft); color:var(--brand-strong); }
.nav-spacer{ flex:1; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:12px 22px; border-radius:var(--r-pill); font-size:14.5px; font-weight:700; border:1px solid transparent; background:var(--brand-gradient); color:var(--brand-ink); white-space:nowrap; box-shadow:var(--brand-glow); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--brand-glow-lg); filter:brightness(1.04); }
.btn:active{ transform:translateY(0); box-shadow:var(--brand-glow); filter:none; }
.btn.secondary{ background:var(--surface); color:var(--ink); border-color:var(--border-strong); box-shadow:none; }
.btn.secondary:hover{ background:var(--surface-2); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn.ghost{ background:transparent; color:var(--brand-strong); padding:8px 10px; box-shadow:none; }
.btn.ghost:hover{ background:var(--brand-soft); transform:none; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none!important; box-shadow:none!important; filter:none!important; }
.btn.small{ padding:9px 16px; font-size:13px; }
.btn.go{ background:linear-gradient(135deg,var(--go-2),var(--go)); box-shadow:var(--go-glow); color:#fff; }
.btn.caution{ background:linear-gradient(135deg,var(--caution-2),var(--caution)); box-shadow:var(--caution-glow); color:#402c04; }
.btn.stop{ background:linear-gradient(135deg,var(--stop-2),var(--stop)); box-shadow:var(--stop-glow); color:#fff; }

/* ---------- Cards ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-l); padding:22px; box-shadow:var(--shadow); }
.card-flat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-m); padding:16px 18px; }

/* ---------- Chips / badges (traffic-light system) ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink-2); border:1px solid transparent; }
.chip.go{ background:var(--go-soft); color:var(--go); border-color:color-mix(in srgb, var(--go) 22%, transparent); }
.chip.caution{ background:var(--caution-soft); color:var(--caution); border-color:color-mix(in srgb, var(--caution) 22%, transparent); }
.chip.stop{ background:var(--stop-soft); color:var(--stop); border-color:color-mix(in srgb, var(--stop) 22%, transparent); }
.dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:13px; font-weight:700; color:var(--ink-2); }
.field input, .field select, .field textarea{ padding:12px 14px; border:1.5px solid var(--border-strong); border-radius:var(--r-s); background:var(--surface); color:var(--ink); width:100%; transition:border-color .15s ease, box-shadow .15s ease; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.field textarea{ resize:vertical; min-height:70px; }
.field-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.form-grid{ display:flex; flex-direction:column; gap:14px; }

.toast-stack{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{ background:var(--ink); color:var(--paper); font-size:13px; font-weight:600; padding:11px 18px; border-radius:var(--r-pill); box-shadow:var(--shadow-lift); }

.site-footer{ text-align:center; padding:40px 20px 60px; color:var(--ink-muted); font-size:12px; line-height:1.8; }