/* ============================================================
   SS Investors — Design Tokens (auth pages)
   Source: claude.ai/design system, 2026-04-27
   See: docs/decisions/DESIGN_DECISIONS_20260427.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Surface / paper */
  --ssi-bg:        #faf8f3;
  --ssi-header:    #f5f2e8;
  --ssi-card:      #ffffff;
  --ssi-card-2:    #f0ebe0;   /* secondary card / chip / checklist bg */

  /* Border */
  --ssi-border:      #d8cfbc;
  --ssi-border-soft: #ebe5d5;

  /* Text */
  --ssi-fg:        #2a2a2a;
  --ssi-fg-strong: #1a1a1a;
  --ssi-fg-muted:  #666666;
  --ssi-fg-subtle: #444444;
  --ssi-fg-dim:    #999999;

  /* Semantic */
  --ssi-accent:        #4f46e5;   /* primary CTA (login, reset) */
  --ssi-accent-hover:  #4338ca;
  --ssi-success:       #16a34a;   /* signup CTA — green = positive action */
  --ssi-success-hover: #15803d;
  --ssi-danger:        #b91c1c;
  --ssi-danger-soft:   #fef2f2;
  --ssi-danger-line:   #fecaca;

  /* Warning (soft) — anti-enumeration notice, expired/used links */
  --ssi-warning:       #f59e0b;
  --ssi-warning-soft:  #fef9e7;
  --ssi-warning-line:  #e8d898;
  --ssi-warning-text:  #8a6d1a;

  /* Pending / amber tone — "waiting" (heading color, used in pending.html) */
  --ssi-amber-bg:   #fef3c7;
  --ssi-amber-fg:   #854d0e;
  --ssi-amber-line: #fde68a;

  /* Typography */
  --ssi-font-sans: 'Noto Sans KR', -apple-system, 'Malgun Gothic', sans-serif;
  --ssi-font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;

  /* Shadow */
  --ssi-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* ──────────────────────────────────────────────
   Shared auth-shell (used by forgot/reset)
   ────────────────────────────────────────────── */
.auth-wrap{
  background:var(--ssi-header);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 16px;box-sizing:border-box;
  font-family:var(--ssi-font-sans);color:var(--ssi-fg);
  word-break:keep-all;  /* 한글 단어 중간 줄바꿈 방지 */
  overflow-wrap:break-word;
}
.auth-mark{
  font-size:16px;font-weight:700;color:var(--ssi-fg-strong);
  margin-bottom:18px;letter-spacing:-0.01em;
}
.auth-card{
  background:var(--ssi-card);border:1px solid var(--ssi-border);
  border-radius:10px;padding:32px;width:440px;max-width:100%;
  box-shadow:var(--ssi-shadow-card);box-sizing:border-box;text-align:center;
}
.auth-card.narrow{width:380px}
.auth-h1{font-size:20px;font-weight:700;color:var(--ssi-fg-strong);margin:0 0 8px}
.auth-body{font-size:13px;color:var(--ssi-fg-subtle);line-height:1.6;margin:0 0 6px}
.auth-muted{font-size:11px;color:var(--ssi-fg-muted);line-height:1.6}
.auth-email-chip{
  display:inline-block;padding:4px 12px;border-radius:5px;
  background:var(--ssi-card-2);color:var(--ssi-fg-strong);
  font-family:var(--ssi-font-mono);font-size:12px;font-weight:600;margin:8px 0;
}

/* Status icon — 64px circle */
.auth-icon{
  width:64px;height:64px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:700;margin-bottom:18px;
}
.auth-icon.info   {background:rgba(79,70,229,0.12); color:var(--ssi-accent)}
.auth-icon.success{background:rgba(22,163,74,0.12); color:#16a34a}
.auth-icon.warn   {background:rgba(245,158,11,0.14);color:#f59e0b}
.auth-icon.danger {background:rgba(220,38,38,0.12); color:#dc2626}

/* Soft notice box (anti-enumeration etc) */
.auth-notice{
  margin-top:14px;padding:10px 12px;border-radius:5px;text-align:left;
  background:var(--ssi-warning-soft);color:var(--ssi-warning-text);
  border:1px solid var(--ssi-warning-line);
  font-size:11px;line-height:1.6;
}

/* Form */
.auth-label{display:block;font-size:12px;color:var(--ssi-fg-subtle);
  margin:14px 0 6px;text-align:left}
.auth-input{
  width:100%;padding:9px 12px;border:1px solid var(--ssi-border);
  border-radius:5px;font-size:14px;box-sizing:border-box;
  font-family:inherit;background:var(--ssi-bg);color:var(--ssi-fg);
}
.auth-input:focus{outline:none;border-color:var(--ssi-accent);
  box-shadow:0 0 0 3px rgba(79,70,229,0.10)}
.auth-input.err{border-color:var(--ssi-danger)}
.auth-inline-err{font-size:11px;color:var(--ssi-danger);
  text-align:left;margin-top:5px}

/* Buttons */
.auth-btn{
  width:100%;padding:11px 16px;border-radius:5px;font-size:14px;font-weight:600;
  cursor:pointer;border:1px solid;margin-top:16px;font-family:inherit;
  box-sizing:border-box;  /* width 100% + padding/border 가 카드 폭 안에 들어가게 */
  transition:background 0.15s,border-color 0.15s;
}
.auth-btn.primary{background:var(--ssi-accent);color:#fff;border-color:var(--ssi-accent)}
.auth-btn.primary:hover{background:var(--ssi-accent-hover);border-color:var(--ssi-accent-hover)}
.auth-btn.primary:disabled,
.auth-btn.disabled{
  background:var(--ssi-card-2);color:var(--ssi-fg-dim);
  border-color:var(--ssi-border-soft);cursor:not-allowed;
}
.auth-btn.secondary{background:var(--ssi-card-2);color:var(--ssi-fg);
  border-color:var(--ssi-border)}

.auth-link{color:var(--ssi-accent);text-decoration:none;font-size:12px;cursor:pointer}
.auth-link.muted{color:var(--ssi-fg-muted)}
.auth-link:hover{text-decoration:underline}
.auth-foot{margin-top:16px;font-size:12px;color:var(--ssi-fg-muted)}

/* Strength meter */
.pw-bar-track{height:4px;background:var(--ssi-border-soft);
  border-radius:99px;margin-top:8px;overflow:hidden}
.pw-bar-fill{height:100%;width:0;background:var(--ssi-danger);transition:width 0.15s,background 0.15s}
.pw-bar-lbl{display:flex;justify-content:space-between;margin-top:5px;font-size:10px}

/* Checklist */
.pw-list{
  list-style:none;padding:12px 14px;margin:14px 0 0;
  background:var(--ssi-card-2);border-radius:5px;
  text-align:left;font-size:11px;line-height:2;
}
.pw-list li{display:flex;align-items:center;gap:6px;color:var(--ssi-fg-dim)}
.pw-list li.ok{color:var(--ssi-success)}
.pw-list li.opt{color:var(--ssi-fg-muted)}
.pw-list .glyph{display:inline-block;width:14px}

/* ============================================================
   Dashboard Tokens v2 — 2026-04-28
   Source: claude.ai/design (sector_palette_v2.css + colors_and_type.css)
   See: docs/DESIGN_HANDOFF_20260428.md, config/sector_v2_map.json
   ------------------------------------------------------------
   기존 auth 토큰 (위 :root) 와 hex 동일한 값은 중복 정의 안 함.
   여기서는 대시보드 페이지에서 추가로 필요한 토큰만 정의.
   ============================================================ */

:root {
  /* ── Surface 추가 ─────────────────────────────────────── */
  --ssi-row-hover: #faf8f3;
  --ssi-row-alt:   #f9f7f1;
  --ssi-border-strong: #3a3a4a;

  /* ── Korean Market Direction (invariant) ─────────────── */
  /* RED=UP / BLUE=DOWN — US 와 반대. 절대 뒤집지 말 것. */
  --ssi-up:        #dc2626;
  --ssi-up-soft:   rgba(220, 38, 38, 0.08);
  --ssi-down:      #2563eb;
  --ssi-down-soft: rgba(37, 99, 235, 0.08);
  --ssi-flat:      #999999;

  /* ── Semantic 추가 ───────────────────────────────────── */
  --ssi-info: #1e40af;

  /* ── Sector Palette v2 (mid-saturation, paper-safe) ─── */
  --ssi-sec-semi:         #c2632e;
  --ssi-sec-display:      #a45a2c;
  --ssi-sec-energy:       #b8732a;
  --ssi-sec-mobility:     #8d6e2c;
  --ssi-sec-defense:      #5e6e2a;
  --ssi-sec-bio:          #3a7a4e;
  --ssi-sec-it:           #2d7a78;
  --ssi-sec-ai:           #2e6a8a;
  --ssi-sec-finance:      #5a4a8c;
  --ssi-sec-consumer:     #7e3d80;
  --ssi-sec-shipping:     #8c3b5e;
  --ssi-sec-steel:        #6b4a3c;
  --ssi-sec-construction: #4a4a4a;
  --ssi-sec-other:        #c4bdac;   /* fallback — "분류 미정" 신호 */
  --ssi-sec-tint-alpha:   0.08;

  /* ── Signal Badge Palette (outline, invariant — 변경 X) ── */
  --ssi-sig-ch1: #dc2626;   /* 채널1 (BB300 돌파) */
  --ssi-sig-ch2: #a78bfa;   /* 채널2 */
  --ssi-sig-j1:  #60a5fa;   /* 자리1 (Aroon) */
  --ssi-sig-j2:  #34d399;   /* 자리2 (3/5MA) */
  --ssi-sig-j4:  #fbbf24;   /* 자리4 (기준봉 중간선) */
  --ssi-sig-j5:  #f472b6;   /* 자리5 (BB300 골짜기) */

  /* ── Spacing scale ───────────────────────────────────── */
  --ssi-space-1:  2px;
  --ssi-space-2:  4px;
  --ssi-space-3:  6px;
  --ssi-space-4:  8px;
  --ssi-space-5:  10px;
  --ssi-space-6:  12px;
  --ssi-space-7:  14px;
  --ssi-space-8:  16px;
  --ssi-space-9:  20px;
  --ssi-space-10: 24px;
  --ssi-space-12: 32px;

  /* ── Radius ──────────────────────────────────────────── */
  --ssi-radius-xs:   4px;
  --ssi-radius-sm:   5px;
  --ssi-radius-md:   6px;
  --ssi-radius-lg:   8px;
  --ssi-radius-xl:   10px;
  --ssi-radius-pill: 9999px;

  /* ── Shadow (modal) ──────────────────────────────────── */
  --ssi-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.18);

  /* ── Type scale ──────────────────────────────────────── */
  --ssi-fs-10: 10px;
  --ssi-fs-11: 11px;
  --ssi-fs-12: 12px;
  --ssi-fs-13: 13px;
  --ssi-fs-14: 14px;
  --ssi-fs-15: 15px;
  --ssi-fs-16: 16px;
  --ssi-fs-18: 18px;
  --ssi-fs-22: 22px;

  --ssi-fw-regular: 400;
  --ssi-fw-medium:  500;
  --ssi-fw-semi:    600;
  --ssi-fw-bold:    700;

  --ssi-lh-tight: 1.3;
  --ssi-lh-base:  1.5;

  /* ── Density (행 높이) — 기본 = comfortable ──────────── */
  /* 페이지에서 [data-density="compact"] 로 토글. 대시보드 본격 적용은 Step 4. */
  --ssi-row-py:    5px;
  --ssi-row-px:    10px;
  --ssi-row-fs:    12px;
  --ssi-row-th-py: 6px;
  --ssi-row-th-fs: 12px;
}

[data-density="compact"] {
  --ssi-row-py:    2px;
  --ssi-row-px:    8px;
  --ssi-row-fs:    11px;
  --ssi-row-th-py: 3px;
  --ssi-row-th-fs: 10px;
}

/* ============================================================
   Dark mode — paper-ink 반전. 한국 색 + 13섹터 + 시그널 유지.
   Activate: <html data-theme="dark"> or <body data-theme="dark">
   ============================================================ */
[data-theme="dark"] {
  /* Surface */
  --ssi-bg:        #14110b;
  --ssi-header:    #1c1812;
  --ssi-card:      #221d15;
  --ssi-card-2:    #2a241a;
  --ssi-row-hover: #2a241a;
  --ssi-row-alt:   #1f1a13;

  /* Border */
  --ssi-border:        #3a3225;
  --ssi-border-soft:   #2c2619;
  --ssi-border-strong: #6b5f48;

  /* Text */
  --ssi-fg:        #e8e0cf;
  --ssi-fg-strong: #ffffff;
  --ssi-fg-muted:  #b3a98e;
  --ssi-fg-dim:    #7a7155;
  --ssi-fg-subtle: #d4caa8;

  /* Direction — 다크 위 contrast 위해 약간 밝게 */
  --ssi-up:        #f87171;
  --ssi-up-soft:   rgba(248, 113, 113, 0.12);
  --ssi-down:      #60a5fa;
  --ssi-down-soft: rgba(96, 165, 250, 0.12);
  --ssi-flat:      #7a7155;

  /* Semantic */
  --ssi-accent:        #818cf8;
  --ssi-accent-hover:  #a5b4fc;
  --ssi-success:       #4ade80;
  --ssi-warning:       #fbbf24;
  --ssi-warning-soft:  #2a220f;
  --ssi-warning-line:  #5a4818;
  --ssi-warning-text:  #fde68a;
  --ssi-danger:        #f87171;
  --ssi-danger-soft:   #2a1414;
  --ssi-danger-line:   #5a2020;
  --ssi-info:          #93c5fd;

  /* Sector v2 (L+12, C-10% — 잉크 위 네온 방지) */
  --ssi-sec-semi:         #d68a5e;
  --ssi-sec-display:      #c47956;
  --ssi-sec-energy:       #d4965a;
  --ssi-sec-mobility:     #b89a5e;
  --ssi-sec-defense:      #8e9c5e;
  --ssi-sec-bio:          #6ea884;
  --ssi-sec-it:           #5fa8a5;
  --ssi-sec-ai:           #6e9fc0;
  --ssi-sec-finance:      #9089c2;
  --ssi-sec-consumer:     #b078b2;
  --ssi-sec-shipping:     #c07590;
  --ssi-sec-steel:        #a08577;
  --ssi-sec-construction: #888888;
  --ssi-sec-other:        #5a5040;
  --ssi-sec-tint-alpha:   0.14;

  /* Shadow */
  --ssi-shadow-card:  0 4px 16px rgba(0, 0, 0, 0.5);
  --ssi-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   Utility classes — 모든 대시보드 페이지에서 사용
   ============================================================ */

/* Direction (한국 컨벤션) */
.ssi-up   { color: var(--ssi-up); }
.ssi-down { color: var(--ssi-down); }
.ssi-flat { color: var(--ssi-flat); }

/* Numeric — tabular-nums + mono */
.ssi-num {
  font-family: var(--ssi-font-mono);
  font-variant-numeric: tabular-nums;
}

/* 5%↑ row highlight (절대값 기준) */
.ssi-row-heat {
  background: var(--ssi-up-soft);
}

/* Sector 좌측 색바 (4px, /calendar /live 등) */
.ssi-sec-bar { width: 4px; align-self: stretch; }
.ssi-sec-bar[data-sec="semi"]         { background: var(--ssi-sec-semi); }
.ssi-sec-bar[data-sec="display"]      { background: var(--ssi-sec-display); }
.ssi-sec-bar[data-sec="energy"]       { background: var(--ssi-sec-energy); }
.ssi-sec-bar[data-sec="mobility"]     { background: var(--ssi-sec-mobility); }
.ssi-sec-bar[data-sec="defense"]      { background: var(--ssi-sec-defense); }
.ssi-sec-bar[data-sec="bio"]          { background: var(--ssi-sec-bio); }
.ssi-sec-bar[data-sec="it"]           { background: var(--ssi-sec-it); }
.ssi-sec-bar[data-sec="ai"]           { background: var(--ssi-sec-ai); }
.ssi-sec-bar[data-sec="finance"]      { background: var(--ssi-sec-finance); }
.ssi-sec-bar[data-sec="consumer"]     { background: var(--ssi-sec-consumer); }
.ssi-sec-bar[data-sec="shipping"]     { background: var(--ssi-sec-shipping); }
.ssi-sec-bar[data-sec="steel"]        { background: var(--ssi-sec-steel); }
.ssi-sec-bar[data-sec="construction"] { background: var(--ssi-sec-construction); }
.ssi-sec-bar[data-sec="other"]        { background: var(--ssi-sec-other); }

/* Sector 카드 borderTop (3px, /calendar /live Sector view) */
.ssi-sec-top[data-sec="semi"]         { border-top: 3px solid var(--ssi-sec-semi); }
.ssi-sec-top[data-sec="display"]      { border-top: 3px solid var(--ssi-sec-display); }
.ssi-sec-top[data-sec="energy"]       { border-top: 3px solid var(--ssi-sec-energy); }
.ssi-sec-top[data-sec="mobility"]     { border-top: 3px solid var(--ssi-sec-mobility); }
.ssi-sec-top[data-sec="defense"]      { border-top: 3px solid var(--ssi-sec-defense); }
.ssi-sec-top[data-sec="bio"]          { border-top: 3px solid var(--ssi-sec-bio); }
.ssi-sec-top[data-sec="it"]           { border-top: 3px solid var(--ssi-sec-it); }
.ssi-sec-top[data-sec="ai"]           { border-top: 3px solid var(--ssi-sec-ai); }
.ssi-sec-top[data-sec="finance"]      { border-top: 3px solid var(--ssi-sec-finance); }
.ssi-sec-top[data-sec="consumer"]     { border-top: 3px solid var(--ssi-sec-consumer); }
.ssi-sec-top[data-sec="shipping"]     { border-top: 3px solid var(--ssi-sec-shipping); }
.ssi-sec-top[data-sec="steel"]        { border-top: 3px solid var(--ssi-sec-steel); }
.ssi-sec-top[data-sec="construction"] { border-top: 3px solid var(--ssi-sec-construction); }
.ssi-sec-top[data-sec="other"]        { border-top: 3px solid var(--ssi-sec-other); }

/* Signal outline 배지 — outline 형태로 텍스트 색만 사용 */
.ssi-sig {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 3px;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--ssi-font-mono);
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  letter-spacing: .02em;
}
.ssi-sig[data-sig="ch1"] { color: var(--ssi-sig-ch1); }
.ssi-sig[data-sig="ch2"] { color: var(--ssi-sig-ch2); }
.ssi-sig[data-sig="j1"]  { color: var(--ssi-sig-j1); }
.ssi-sig[data-sig="j2"]  { color: var(--ssi-sig-j2); }
.ssi-sig[data-sig="j4"]  { color: var(--ssi-sig-j4); }
.ssi-sig[data-sig="j5"]  { color: var(--ssi-sig-j5); }