/* ════════════════════════════════════════════════════════════
   티옴타 디자인 표준 (Tiomta Design Standard) v1.0
   출처: 티옴타 디자인 시스템 (standalone, 클로드디자인) — 2026-06-21 등록
   팔레트: Chocolate · Cream · Gold · Ink (따뜻한 크라프트 + 브래스)
   타이포: Pretendard(sans) · Noto Serif KR(serif) · JetBrains Mono
   사용: <link rel="stylesheet" href="/css/티옴타디자인표준.css">
        또는 중앙 https://tiomta.com/css/티옴타디자인표준.css
   서비스는 토큰을 var()로 참조 — 표준 갱신 시 전체 자동 반영.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── 원시 팔레트 (Raw) ── */
  --choco:       #3B2A1D;
  --choco-hover: #4C3829;
  --choco-press: #2C1E13;

  --cream-50:  #FBF7EE;
  --cream-100: #F4EFE2;
  --cream-200: #ECE5D5;
  --cream-300: #E2D8C4;

  --gold:      #B58A4A;
  --gold-dim:  #8F6E3A;
  --gold-soft: #D8C29A;
  --gold-wash: #EFE4CD;

  --ink:      #2B2018;
  --ink-soft: #5C4C3C;
  --muted:    #978872;

  --line:        rgba(43,32,24,0.12);
  --line-strong: rgba(43,32,24,0.20);

  /* ── 시맨틱 별칭 (Semantic — 서비스가 이걸 참조) ── */
  --bg:          var(--cream-100);
  --bg-soft:     var(--cream-200);
  --bg-hover:    var(--cream-300);
  --surface:     var(--cream-50);
  --surface-2:   var(--cream-200);
  --text:        var(--ink);
  --text-soft:   var(--ink-soft);
  --text-muted:  var(--muted);
  --accent:      var(--gold);
  --accent-dim:  var(--gold-dim);
  --accent-soft: rgba(181,138,74,0.12);
  --accent-wash: var(--gold-wash);
  --border:      var(--line);
  --border-strong: var(--line-strong);
  --on-accent:   #FBF7EE;

  /* ── 상태색 (기능 — 크라우니월드 공통, 따뜻하게 조정) ── */
  --success: #4E8C5A;
  --warning: #C08842;
  --danger:  #B5524A;
  --info:    #6E6A8C;

  /* ── 타이포 ── */
  --sans:  'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  --serif: 'Noto Serif KR', 'Nanum Myeongjo', 'Cormorant Garamond', serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── 스페이싱 스케일 (8px 리듬) ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ── 라디우스 ── */
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;

  /* ── 그림자 ── */
  --shadow-sm: 0 1px 2px rgba(59,42,29,0.06), 0 2px 6px rgba(59,42,29,0.05);
  --shadow-md: 0 6px 16px -6px rgba(59,42,29,0.14), 0 2px 6px rgba(59,42,29,0.06);
  --shadow-lg: 0 30px 70px -28px rgba(59,42,29,0.30), 0 8px 20px -12px rgba(59,42,29,0.14);
  --shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.55);
  --glow-brass: 0 0 24px rgba(181,138,74,0.20), 0 0 1px rgba(181,138,74,0.40);

  /* ── 모션 ── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-quick: 160ms; --dur-base: 240ms; --dur-slow: 360ms;

  /* ── 레이아웃 ── */
  --maxw: 1160px;
}

/* 다크 (선택) — 초콜릿 베이스 */
[data-theme="dark"] {
  --bg:         #211711;
  --bg-soft:    #2A1F17;
  --bg-hover:   #34271D;
  --surface:    #2A1F17;
  --surface-2:  #34271D;
  --text:       #F4EFE2;
  --text-soft:  #D8C9B6;
  --text-muted: #A89A82;
  --accent:     #D8C29A;
  --accent-dim: #B58A4A;
  --accent-soft: rgba(216,194,154,0.14);
  --border:        rgba(244,239,226,0.12);
  --border-strong: rgba(244,239,226,0.22);
  --on-accent:  #2C1E13;
}

/* ── 기본 요소 ── */
.tds, .tds * { box-sizing: border-box; }
.tds {
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.tds h1, .tds h2, .tds h3 { font-family: var(--serif); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.tds h1 { font-size: clamp(28px, 4vw, 44px); }
.tds h2 { font-size: clamp(22px, 3vw, 30px); }
.tds h3 { font-size: 20px; }
.tds a { color: var(--accent-dim); text-decoration: none; }
.tds a:hover { color: var(--accent); }
.tds .mono { font-family: var(--mono); }

/* ── 코어 컴포넌트 ── */
.tds-card {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.tds-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }

.tds-btn {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: var(--r-pill); cursor: pointer;
  border: 0.5px solid var(--border); background: var(--surface); color: var(--text-soft);
  transition: all var(--dur-quick) var(--ease);
}
.tds-btn:hover { border-color: var(--accent); color: var(--accent); }
.tds-btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-inset-hi); }
.tds-btn--primary:hover { background: var(--gold-dim); color: var(--on-accent); }

.tds-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-dim);
}
.tds-pill { border-radius: var(--r-pill); }
.tds-divider { height: 0.5px; background: var(--border); border: 0; margin: var(--s-5) 0; }
.tds-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }