/* charchat 디자인 시스템(시안 B "무대") — 토큰(밤 기본·낮)·글꼴·기본 요소·버튼·입력·헤더·탭·칩·상태·빈 상태·토스트.
   dev 패밀리룩(family.css)에서 2026-11-14 떼어 냈다. 규칙은 docs/DESIGN.md, 부품 모음은 /static/styleguide.html.
   색·글자 크기·모서리·간격은 여기 토큰만 쓴다(tests/test_design_tokens.js가 검사). */

:root{
  /* 글꼴 — UI는 Pretendard, 소설 본문은 Noto Serif KR. 관리자 글꼴 설정(app.css의 data-font-*)이 --sans를 바꿀 수 있다. */
  --font-ui:'Pretendard Variable', Pretendard, -apple-system, 'Segoe UI', 'Malgun Gothic', sans-serif;
  --serif:'Noto Serif KR', 'Nanum Myeongjo', Batang, AppleMyungjo, serif;
  --sans:var(--font-ui);
  --mono:ui-monospace, Consolas, Menlo, monospace;

  /* 글자 크기 단계 */
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:28px; --fs-3xl:40px; --fs-4xl:56px;

  /* 여백·모서리 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --r-sm:6px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --tabbar-h:56px;

  /* 색 — 밤(기본). 무대처럼 어둡고 그림이 주인공, 강조는 호박색 하나 + 상태용 청록. */
  --bg:#0C0D11; --panel:#15171D; --panel-2:#1C1F27; --panel-3:#252933;
  --border:#262932; --border-strong:#353945;
  --text:#EEEAE3; --text-soft:#D6D1C9; --dim:#8E8A84; --faint:#5F5C58;
  --accent:#EBA43C; --accent-rgb:235,164,60; --accent-ink:#1A1205; --accent-hover:#F2B65C;
  --ok:#62B5A7; --ok-rgb:98,181,167; --danger:#F07167; --danger-rgb:240,113,103;
  --skel-base:#1C1F27; --skel-shine:rgba(255,255,255,.07);
  --scrim:rgba(12,13,17,.88); --on-image:#F4F1EC; --on-image-bg:rgba(12,13,17,.6);
  --shadow:none; --shadow-pop:0 16px 40px rgba(0,0,0,.45);
  /* 예전 패밀리 토큰 이름(화면 코드 호환) */
  --grad-primary:var(--accent); --grad-primary-hover:var(--accent-hover);
  color-scheme:dark;
}
/* 낮 — 같은 무대의 밝은 조명. 흰 바탕 위 대비를 위해 강조색을 진하게 한다. */
:root[data-theme="light"]{
  --bg:#F5F3EF; --panel:#FFFFFF; --panel-2:#EFECE6; --panel-3:#E5E1D9;
  --border:#E4DFD6; --border-strong:#D2CBBF;
  --text:#17181C; --text-soft:#33343A; --dim:#6B6862; --faint:#9C978F;
  --accent:#B8690A; --accent-rgb:184,105,10; --accent-ink:#FFFFFF; --accent-hover:#9E5906;
  --ok:#2F7D70; --ok-rgb:47,125,112; --danger:#C2412F; --danger-rgb:194,65,47;
  --skel-base:#E9E5DE; --skel-shine:rgba(255,255,255,.75);
  --scrim:rgba(245,243,239,.9); --on-image:#F4F1EC; --on-image-bg:rgba(12,13,17,.6);
  --shadow:0 1px 2px rgba(23,24,28,.05); --shadow-pop:0 16px 40px rgba(23,24,28,.16);
  color-scheme:light;
}

*{ box-sizing:border-box; }
html{ overflow-x:hidden; scroll-padding-top:var(--tabbar-h); }
body{ margin:0; background:var(--bg); color:var(--text); font:var(--fs-md)/1.6 var(--sans); letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
[hidden]{ display:none !important; }
.dim{ color:var(--dim); }
.error{ color:var(--danger); min-height:1.2em; margin:0; font-size:var(--fs-sm); }
::selection{ background:rgba(var(--accent-rgb),.28); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.list-loading, .list-error{ display:flex; align-items:center; justify-content:center; gap:var(--sp-2); padding:var(--sp-5) var(--sp-4); color:var(--dim); font-size:var(--fs-sm); }
.list-spinner{ flex:none; animation:list-spin 1s linear infinite; }
@keyframes list-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .list-spinner{ animation:none; } }

/* 입력 */
input, select, textarea{
  font:inherit; font-size:var(--fs-md); color:var(--text); background:var(--panel-2); border:1px solid var(--border);
  border-radius:var(--r-md); padding:9px 12px; transition:border-color .12s, box-shadow .12s, background .12s;
}
input::placeholder, textarea::placeholder{ color:var(--faint); }
input:focus, select:focus, textarea:focus{ outline:none; border-color:rgba(var(--accent-rgb),.7); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }
textarea{ width:100%; min-height:120px; resize:vertical; line-height:1.7; }
input[type=checkbox]{ width:16px; height:16px; padding:0; accent-color:var(--accent); }

/* 버튼 — 기본(조용한 면), 주요(호박색, 화면당 하나), 고스트(글자만), 위험(빨강 글자) */
button, .button{
  font:inherit; font-size:var(--fs-md); font-weight:600; color:var(--text); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); white-space:nowrap;
  min-height:38px; padding:8px 14px; border:1px solid transparent; border-radius:var(--r-md);
  background:var(--panel-2); transition:background .12s, border-color .12s, color .12s, transform .06s;
}
button:hover, .button:hover{ background:var(--panel-3); text-decoration:none; }
button:active{ transform:translateY(1px); }
.primary, button.primary{ background:var(--accent); color:var(--accent-ink); font-weight:700; }
.primary:hover, button.primary:hover{ background:var(--accent-hover); }
.ghost, button.ghost{ background:transparent; color:var(--dim); }
.ghost:hover, button.ghost:hover{ background:var(--panel-2); color:var(--text); }
.danger, button.danger{ color:var(--danger); }
.danger:hover, button.danger:hover{ background:rgba(var(--danger-rgb),.12); }
button:disabled{ opacity:.45; cursor:default; transform:none; }

/* 아이콘 */
.ico{ width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.2em; }
.ico.brand-icon{ fill:currentColor; stroke:none; }

/* 헤더 — 로고 글자(굵은 소문자 + 호박색 점), 투명한 바탕 */
.top{ position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:18px 28px;
  background:var(--bg); border-bottom:1px solid var(--border); }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); }
.brand:hover{ text-decoration:none; }
.brand svg{ width:20px; height:20px; flex:none; color:var(--accent); }
.brand-word{ font-size:var(--fs-xl); font-weight:800; letter-spacing:-0.03em; text-transform:lowercase; }
.brand-word::after{ content:'.'; color:var(--accent); }
.header-right{ display:flex; align-items:center; gap:var(--sp-2); }

/* 탭 — 글자 탭, 선택은 글자색 + 밑줄 */
.tab-bar{ position:sticky; top:0; z-index:15; background:var(--bg); border-bottom:1px solid var(--border); }
.tab-bar-inner{ max-width:1320px; margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:var(--sp-1); overflow-x:auto; scrollbar-width:none; }
.tab-bar-inner::-webkit-scrollbar{ display:none; }
.tab-btn{ display:inline-flex; align-items:center; gap:var(--sp-2); min-height:auto; padding:14px 10px; margin-bottom:-1px; border:0; border-bottom:2px solid transparent; border-radius:0;
  background:transparent; color:var(--dim); font-size:var(--fs-md); font-weight:600; white-space:nowrap; flex-shrink:0; }
.tab-btn:hover{ background:transparent; color:var(--text); }
.tab-btn.active, .tab-btn[aria-pressed="true"]{ color:var(--text); border-bottom-color:var(--accent); }
.tab-btn .ico{ width:17px; height:17px; vertical-align:0; }
.tab-label{ display:inline-block; }
main{ padding:28px; max-width:1320px; margin:0 auto; }

/* 칩·상태 */
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); background:var(--panel-2); color:var(--text-soft);
  font-size:var(--fs-xs); font-weight:600; white-space:nowrap; }
.chip.on, .chip.accent{ background:rgba(var(--accent-rgb),.16); color:var(--accent); }
.chip.ok{ background:rgba(var(--ok-rgb),.16); color:var(--ok); }
.status{ display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:500; white-space:nowrap; color:var(--text); }
.status::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--sc, var(--ok)); box-shadow:0 0 0 4px color-mix(in srgb, var(--sc, var(--ok)) 18%, transparent); }

/* 빈 상태·토스트 */
.empty{ padding:var(--sp-8) var(--sp-4); text-align:center; color:var(--dim); background:var(--panel); border:1px dashed var(--border-strong); border-radius:var(--r-lg); }
.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--panel-3); color:var(--text); padding:12px 18px;
  border-radius:var(--r-md); z-index:40; max-width:90vw; box-shadow:var(--shadow-pop); font-size:var(--fs-md); font-weight:500; }
/* 화면 전환 때 코드로 옮기는 제목 포커스(tabindex=-1)는 테두리를 그리지 않는다. */
[tabindex="-1"]:focus{ outline:none; }