/* ── ipuipu 디자인 토큰 (단일 소스, 2026-08-02 common.css에서 분리) ──
   모든 페이지(프리인증 독립 페이지 포함)가 이 파일만 로드하면 라이트/다크 색이 해결된다.
   색 리터럴(hex) 사용 금지 — 새 색이 필요하면 여기 토큰을 추가하고 세 블록(라이트/다크/오토) 모두 채울 것. */

:root {
  --font-mono: 'Consolas', 'Menlo', 'Malgun Gothic', 'Apple SD Gothic Neo', monospace;

  /* 의미색 — 새 색이 필요하면 여기 변수를 쓰고, hex 하드코딩 금지.
     다크 모드에서 변수 값은 그대로 두고, 필요한 컴포넌트만 아래 다크 오버라이드에서 보정한다. */
  --clr-primary:        #2a6496;
  --clr-primary-hover:  #1d4e7a;
  --clr-success:        #27ae60;
  --clr-success-strong: #1b7440;   /* AA: tint-success-bg 위 4.29→5.28 (2026-08-29) */
  --clr-danger:         #e74c3c;
  --clr-danger-strong:  #c0392b;
  --clr-warn:           #e67e22;

  --bg-body:      #f0f2f5;
  --bg-card:      #ffffff;
  --bg-surface:   #f7f8fa;
  /* 스켈레톤 — 카드(흰색) 위에서도 보여야 한다. bg-surface(#f7f8fa)는 대비가 3%뿐이라
     렌더돼도 눈에 안 띄었다(2026-08-15 실사고). 전용 토큰으로 분리. */
  --sk-bg:        #e6e9ee;
  --sk-shine:     rgba(255,255,255,0.75);
  --bg-input:     #ffffff;
  --bg-hover:     #f9fbff;
  --bg-sidebar:   #1e2a3a;
  --bg-header:    #1e2a3a;

  --text-primary:   #1e2a3a;
  --text-secondary: #555555;
  --text-muted:     #6e6e6e;   /* AA 전역(2026-08-29): 흰5.02·surface4.73·body4.55 — 옛 #888은 3.54 미달 */
  --text-link:      #2a6496;
  --text-sidebar:   #aabbc4;
  /* 글씨/보더용 의미색(테마 적응) — 배경은 --clr-*, 글씨·보더는 이 토큰을 쓴다(다크 대비 자동) */
  --text-danger:    #c0392b;   /* AA: 흰 배경 3.82→5.44 (2026-08-29) */
  --text-success:   #1b7440;   /* AA(2026-08-29): 흰 6.0·surface 5.46 — 옛 #27ae60은 2.9 */
  --text-warn:      #b45309;   /* AA(2026-08-29): 흰 4.9·surface 4.73 — 옛 #e67e22는 2.9 */
  --text-purple:    #7c3aed;

  --border:         #e8e8e8;
  --btn-soft-border:   #c8d6e8;   /* 연한 버튼 테두리 — 라이트는 기존 값 그대로, 다크만 어둡게 */
  --topo-link:      #9aa8bd;   /* 토폴로지 링크 선 — JS와 범례가 같은 값을 쓴다 */
  --topo-band:      rgba(148,163,184,0.10);   /* 토폴로지 층 띠 */
  --topo-node-polled-bg:     #e8f1fa;
  --topo-node-polled-border: #2a6496;
  --topo-node-nbr-bg:        #f2f4f7;
  --topo-node-nbr-border:    #6b7a8c;
  --topo-node-router-bg:     #fff4e5;
  --topo-node-router-border: #b45309;
  --topo-band-drag: rgba(59,130,246,0.12);
  --topo-link-10g:  #0284c7;   /* 10G 링크 */
  --topo-link-40g:  #7c3aed;   /* 40G 이상 링크 */
  --border-table:   #f0f0f0;
  --border-input:   #cccccc;
  --border-modal:   #eeeeee;

  /* 뱃지/배너 틴트 (2026-08-02 토큰화 — 라이트 틴트 표준값을 토큰으로 승격, hex 직접 사용 금지) */
  --tint-success-bg:     #e8f8f0;
  --tint-success-border: rgba(39,174,96,0.35);
  --tint-warn-bg:        #fff4e5;
  --tint-warn-border:    rgba(230,126,34,0.35);
  --tint-danger-bg:      #fde8e8;
  --tint-danger-border:  rgba(231,76,60,0.35);
  --tint-info-bg:        #e8f1fa;
  --tint-info-border:    rgba(42,100,150,0.35);
  --tint-purple-bg:      #f5f0ff;
  --tint-purple-border:  rgba(124,58,237,0.35);
  --text-info:           #2a6496;
  /* 유예/주의 노랑 티어 (상태 주황과 구분 — 라이선스 grace·APIPA·일시정지·warn-box) */
  --tier-grace-bg:     #fff8e1;
  --tier-grace-text:   #856404;
  --tier-grace-border: #ffe082;

  /* 2단계 승격 토큰 (2026-08-02) — 반복 리터럴을 라이트 값 그대로 승격 */
  --text-on-accent: #ffffff;   /* 색 배경 버튼/뱃지 위 흰 글씨 (다크에서도 흰색 유지) */
  --text-mid:       #626262;   /* secondary(#555)와 muted(#6e6e6e) 사이 회색 — AA 전 배경 통과 */
  --text-slate:     #5f6e85;   /* AA(2026-08-29): surface 4.48→4.87 */
  --text-faint:     #bbbbbb;
  --clr-sky:        #5bafd6;   /* 하늘색 액센트 (포트맵·정보 계열) */
  --bg-dark-fixed:  #1a2535;   /* 테마 무관 고정 다크 패널 (코드블록 등) */
  /* 2c 승격 토큰 (2026-08-02) — 고정 다크패널·청록/인디고 계열·강한 액센트 */
  --clr-purple:        #7c3aed;   /* 상태색: 빈IP 보라 (배경용, 테마 공통) */
  --clr-blue:          #3b82f6;   /* 강조 파랑 칩/뱃지 (테마 공통) */
  --clr-amber:         #b45309;   /* 강조 앰버 (테마 공통) */
  --bg-white-fixed:    #ffffff;   /* 테마 무관 고정 흰 배경 (QR박스·토글 손잡이) */
  --text-on-white-fixed: #1f1f1f; /* 고정 흰 배경 위 어두운 글씨 (구글/QR/패스키 버튼) — 테마 무관 */
  --border-dark-fixed: #2a3f55;   /* 고정 다크 패널 보더 */
  --text-on-dark:      #c8d6e8;   /* 고정 다크 패널 위 밝은 글씨 */
  --text-on-dark-soft: #7a9bbf;
  --text-link-on-dark: #77aaff;
  --tint-cyan-bg:      #ecfeff;
  --tint-cyan-border:  #a5f3fc;
  --text-cyan:         #0e7490;
  --tint-indigo-bg:    #eef2ff;
  --tint-indigo-border:#c7d2fe;
  --text-indigo:       #4338ca;
  --code-green:        #56d364;   /* 고정 다크 코드/설치 패널 구문색 */
  --code-yellow:       #e3b341;
  --code-red:          #ff7b72;

  --shadow-card:  0 1px 6px rgba(0,0,0,0.09);
  --shadow-modal: 0 8px 40px rgba(0,0,0,0.35);
}

/* ── 다크 테마 ── */
[data-theme="dark"] {
  --bg-body:      #191d27;
  --bg-card:      #222838;
  --bg-surface:   #2a3044;
  --sk-bg:        #353d55;
  --sk-shine:     rgba(255,255,255,0.10);
  --bg-input:     #1e2333;
  --bg-hover:     #283050;
  --bg-sidebar:   #131720;
  --bg-header:    #131720;

  --text-primary:   #dde3ef;
  --text-secondary: #8e9ab5;
  --text-muted:     #8b98b2;   /* AA(2026-08-29): 다크 surface 3.91→4.51 */
  --text-link:      #6cb4ff;
  --text-sidebar:   #7a8faa;
  --text-danger:    #fca5a5;
  --clr-success-strong: #1e8449;   /* 다크 동결 — 라이트 AA 조정(#1b7440)이 다크에 번지지 않게 */
  --text-success:   #86efac;
  --text-warn:      #fdba74;
  --text-purple:    #c4b5fd;

  --border:         #2e3a52;
  --btn-soft-border:   #33405c;
  --topo-link:      #6b7c9e;   /* 토폴로지 링크 선 — JS와 범례가 같은 값을 쓴다 */
  --topo-band:      rgba(148,163,184,0.07);
  --topo-node-polled-bg:     #2d3d60;
  --topo-node-polled-border: #7dd3fc;
  --topo-node-nbr-bg:        #373e52;
  --topo-node-nbr-border:    #aab6c8;
  --topo-node-router-bg:     #493f43;
  --topo-node-router-border: #fdba74;
  --topo-band-drag: rgba(59,130,246,0.16);
  --topo-link-10g:  #38bdf8;
  --topo-link-40g:  #a78bfa;
  --border-table:   #252d40;
  --border-input:   #2e3a52;
  --border-modal:   #2e3a52;

  --tint-success-bg:     rgba(34,197,94,0.14);
  --tint-success-border: rgba(134,239,172,0.35);
  --tint-warn-bg:        rgba(251,146,60,0.13);
  --tint-warn-border:    rgba(253,186,116,0.35);
  --tint-danger-bg:      rgba(239,68,68,0.15);
  --tint-danger-border:  rgba(252,165,165,0.35);
  --tint-info-bg:        rgba(59,130,246,0.15);
  --tint-info-border:    rgba(147,197,253,0.35);
  --tint-purple-bg:      rgba(196,181,253,0.14);
  --tint-purple-border:  rgba(196,181,253,0.35);
  --text-info:           #93c5fd;
  --tier-grace-bg:     rgba(250,204,21,0.12);
  --tier-grace-text:   #fde68a;
  --tier-grace-border: rgba(253,224,71,0.35);

  --text-on-accent: #ffffff;
  --text-mid:       #8e9ab5;
  --text-slate:     #8e9ab5;
  --text-faint:     #6f7d99;
  --clr-sky:        #5bafd6;
  --bg-dark-fixed:  #1a2535;
  --clr-purple:        #7c3aed;
  --clr-blue:          #3b82f6;
  --clr-amber:         #b45309;
  --bg-white-fixed:    #ffffff;
  --text-on-white-fixed: #1f1f1f;
  --border-dark-fixed: #2a3f55;
  --text-on-dark:      #c8d6e8;
  --text-on-dark-soft: #7a9bbf;
  --text-link-on-dark: #77aaff;
  --tint-cyan-bg:      rgba(34,211,238,0.13);
  --tint-cyan-border:  rgba(103,232,249,0.35);
  --text-cyan:         #67e8f9;
  --tint-indigo-bg:    rgba(99,102,241,0.15);
  --tint-indigo-border:rgba(165,180,252,0.35);
  --text-indigo:       #a5b4fc;
  --code-green:        #56d364;   /* 고정 다크 코드/설치 패널 구문색 */
  --code-yellow:       #e3b341;
  --code-red:          #ff7b72;

  --shadow-card:  0 2px 10px rgba(0,0,0,0.45);
  --shadow-modal: 0 8px 40px rgba(0,0,0,0.65);
}

/* ── 오토 모드 (시스템 다크) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-body:      #191d27;
    --bg-card:      #222838;
    --bg-surface:   #2a3044;
    --sk-bg:        #353d55;
    --sk-shine:     rgba(255,255,255,0.10);
    --bg-input:     #1e2333;
    --bg-hover:     #283050;
    --bg-sidebar:   #131720;
    --bg-header:    #131720;

    --text-primary:   #dde3ef;
    --text-secondary: #8e9ab5;
    --text-muted:     #8b98b2;   /* AA(2026-08-29): 다크 surface 3.91→4.51 */
    --text-link:      #6cb4ff;
    --text-sidebar:   #7a8faa;
    --text-danger:    #fca5a5;
    --clr-success-strong: #1e8449;   /* 다크 동결(오토다크) */
    --text-success:   #86efac;
    --text-warn:      #fdba74;
    --text-purple:    #c4b5fd;

    --border:         #2e3a52;
    --btn-soft-border:   #33405c;
    --topo-link:      #6b7c9e;   /* 토폴로지 링크 선 — JS와 범례가 같은 값을 쓴다 */
    --topo-band:      rgba(148,163,184,0.07);
    --topo-node-polled-bg:     #2d3d60;
    --topo-node-polled-border: #7dd3fc;
    --topo-node-nbr-bg:        #373e52;
    --topo-node-nbr-border:    #aab6c8;
    --topo-node-router-bg:     #493f43;
    --topo-node-router-border: #fdba74;
    --topo-band-drag: rgba(59,130,246,0.16);
    --topo-link-10g:  #38bdf8;
    --topo-link-40g:  #a78bfa;
    --border-table:   #252d40;
    --border-input:   #2e3a52;
    --border-modal:   #2e3a52;

    --tint-success-bg:     rgba(34,197,94,0.14);
    --tint-success-border: rgba(134,239,172,0.35);
    --tint-warn-bg:        rgba(251,146,60,0.13);
    --tint-warn-border:    rgba(253,186,116,0.35);
    --tint-danger-bg:      rgba(239,68,68,0.15);
    --tint-danger-border:  rgba(252,165,165,0.35);
    --tint-info-bg:        rgba(59,130,246,0.15);
    --tint-info-border:    rgba(147,197,253,0.35);
    --tint-purple-bg:      rgba(196,181,253,0.14);
    --tint-purple-border:  rgba(196,181,253,0.35);
    --text-info:           #93c5fd;
    --tier-grace-bg:     rgba(250,204,21,0.12);
    --tier-grace-text:   #fde68a;
    --tier-grace-border: rgba(253,224,71,0.35);

    --text-on-accent: #ffffff;
    --text-mid:       #8e9ab5;
    --text-slate:     #8e9ab5;
    --text-faint:     #6f7d99;
    --clr-sky:        #5bafd6;
    --bg-dark-fixed:  #1a2535;
    --clr-purple:        #7c3aed;
    --clr-blue:          #3b82f6;
    --clr-amber:         #b45309;
    --bg-white-fixed:    #ffffff;
    --text-on-white-fixed: #1f1f1f;
    --border-dark-fixed: #2a3f55;
    --text-on-dark:      #c8d6e8;
    --text-on-dark-soft: #7a9bbf;
    --text-link-on-dark: #77aaff;
    --tint-cyan-bg:      rgba(34,211,238,0.13);
    --tint-cyan-border:  rgba(103,232,249,0.35);
    --text-cyan:         #67e8f9;
    --tint-indigo-bg:    rgba(99,102,241,0.15);
    --tint-indigo-border:rgba(165,180,252,0.35);
    --text-indigo:       #a5b4fc;
    --code-green:        #56d364;   /* 고정 다크 코드/설치 패널 구문색 */
    --code-yellow:       #e3b341;
    --code-red:          #ff7b72;

    --shadow-card:  0 2px 10px rgba(0,0,0,0.45);
    --shadow-modal: 0 8px 40px rgba(0,0,0,0.65);
  }
}