/* crowny-theme.css — 크라우니플레이 ↔ 티옴타 디자인 표준 v1.0 통일
   정본: tiomta.com 「티옴타 디자인 표준」(/crowny-tiomta/design/티옴타디자인표준-spec.md)
   정체성: 따뜻한 크라프트 + 브래스 — Chocolate · Cream · Gold · Ink, 종이질감.
   적용법 #2(표준 권장): 서비스 :root 토큰 '값만' 표준으로 리맵(변수명 유지) → 골격 무수정.
   라이트(낮)/다크(밤) 스위칭: html[data-theme] (crowny-theme.js 가 시간 자동 + 토글 + 영속). */

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

/* ═══════════ 라이트 (크림/잉크/브래스) — 기본 ═══════════ */
:root {
  /* 배경 surface (app/ticket/kbingo 계열 --bg~--bg4) */
  --bg:#F4EFE2; --bg2:#FBF7EE; --bg3:#ECE5D5; --bg4:#E2D8C4;
  /* 텍스트 (app 계열 --fg / walk·matching 계열 --text) */
  --fg:#2B2018; --fg2:#5C4C3C; --fg3:#978872;
  --text:#2B2018; --text2:#5C4C3C; --text3:#978872;
  /* 브래스 골드 액센트 (흰 텍스트와 맞는 중간 브래스) */
  --accent:#B58A4A; --accent2:#C99F5A; --accent-dim:#8F6E3A;
  --accent-soft:rgba(181,138,74,0.12); --accent-wash:#EFE4CD;
  --on-accent:#FBF7EE;
  /* 4상 (Ti초록 Om골드 Ta코랄 Um보라) */
  --green:#4E8C5A; --green-dim:#3E7049; --yellow:#B58A4A; --orange:#B5734A; --red:#B5524A; --gray:#978872;
  --t-color:#4E8C5A; --o-color:#B58A4A; --a-color:#B5524A; --u-color:#6E6A8C;
  /* 브래스 그라데이션 */
  --grad:linear-gradient(135deg,#8F6E3A,#B58A4A);
  --grad2:linear-gradient(135deg,#B58A4A,#D8C29A);
  /* 보더 (잉크 저채도) */
  --border:rgba(43,32,24,0.12); --border2:rgba(43,32,24,0.20);
  /* 프레임(상단바/탭바) — 크림 반투명 */
  --chrome-bg:rgba(244,239,226,0.86);
  /* 라운드(티옴타 — 조금 더 부드럽게) */
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  /* 웜 섀도우 */
  --shadow:0 6px 16px -6px rgba(59,42,29,0.14),0 2px 6px rgba(59,42,29,0.06);
  --shadow-sm:0 1px 2px rgba(59,42,29,0.06),0 2px 6px rgba(59,42,29,0.05);
  /* 타이포 — sans + serif(헤딩) + mono(코드) */
  --serif:'Noto Serif KR','Nanum Myeongjo','AppleMyungjo',serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  /* 랜딩(index.html landing.css) 고유 변수명 — 라이트 */
  --bg-card:#FBF7EE; --bg-card-hover:#ECE5D5;
  --accent-2:#C99F5A; --text-dim:#5C4C3C; --text-bright:#2B2018;
  --gradient:linear-gradient(135deg,#8F6E3A,#B58A4A,#D8C29A);
  --gradient-bg:linear-gradient(180deg,#F4EFE2 0%,#ECE5D5 100%);
  color-scheme: light;
}

/* ═══════════ 다크 (초콜릿/크림/브래스) — 밤 ═══════════ */
html[data-theme="dark"] {
  --bg:#211711; --bg2:#2A1E16; --bg3:#34251A; --bg4:#3F2D20;
  --fg:#F4EFE2; --fg2:#D8C7A8; --fg3:#978872;
  --text:#F4EFE2; --text2:#D8C7A8; --text3:#978872;
  --accent:#C9A05E; --accent2:#D8C29A; --accent-dim:#B58A4A;
  --accent-soft:rgba(216,194,154,0.12); --accent-wash:#3A2A1C;
  --on-accent:#211711;
  --green:#5FA06B; --green-dim:#4E8C5A; --yellow:#C9A05E; --orange:#C58A5A; --red:#C56A60; --gray:#978872;
  --t-color:#5FA06B; --o-color:#C9A05E; --a-color:#C56A60; --u-color:#8E8AAC;
  --grad:linear-gradient(135deg,#8F6E3A,#C9A05E);
  --grad2:linear-gradient(135deg,#C9A05E,#D8C29A);
  --border:rgba(216,194,154,0.12); --border2:rgba(216,194,154,0.22);
  --chrome-bg:rgba(33,23,17,0.90);
  --shadow:0 6px 18px -6px rgba(0,0,0,0.55),0 2px 6px rgba(0,0,0,0.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.4);
  /* 랜딩 고유 변수명 — 다크(초콜릿) */
  --bg-card:#2A1E16; --bg-card-hover:#34251A;
  --accent-2:#D8C29A; --text-dim:#D8C7A8; --text-bright:#F4EFE2;
  --gradient:linear-gradient(135deg,#8F6E3A,#C9A05E,#D8C29A);
  --gradient-bg:linear-gradient(180deg,#211711 0%,#2A1E16 100%);
  color-scheme: dark;
}

/* 폰트 — Pretendard(본문) 유지, 헤딩=serif, 코드=mono */
html, body, button, input, select, textarea {
  font-family: 'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Noto Sans KR',system-ui,sans-serif;
}
h1, h2, h3, .serif, [class*="hub-title"], [class*="hero-title"] { font-family: var(--serif); letter-spacing:-0.01em; }
code, pre, kbd, .mono, [class*="formula"] code { font-family: var(--mono); }

/* 부드러운 테마 전환 */
html, body { transition: background-color .35s ease, color .35s ease; }

/* 스크롤바 브래스 */
::-webkit-scrollbar-thumb { background: var(--border2) !important; }

/* 모노톤 아이콘 (crowny-icons.js) */
.cy-ic { display:inline-flex; align-items:center; justify-content:center; vertical-align:-0.15em; }
.cy-ic svg { width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ── 티옴타 플로팅 테마 토글 ── */
.tds-theme-toggle {
  position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom,0px) + 78px);
  width: 42px; height: 42px; border-radius: var(--radius-pill,999px); z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2); color: var(--accent);
  border: 1px solid var(--border2); box-shadow: var(--shadow);
  cursor: pointer; transition: transform .2s ease, background .2s ease;
}
.tds-theme-toggle:hover { transform: translateY(-2px); }
.tds-theme-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }