/* 자동 생성: build_tokens_css.py. 직접 고치지 말고 tokens*.json을 고친다. */
:root {
  color-scheme: light dark;
  --color-bg: #FFFFFF;
  --color-surface: #F6F7F9;
  --color-border: #E3E5EA;
  --color-border-input: #868B97;
  --color-text: #16181D;
  --color-text-muted: #5A606D;
  --color-neutral-subtle: #EDEEF2;
  --color-accent: #4F46E5;
  --color-accent-hover: #4338CA;
  --color-accent-subtle: #EEF0FF;
  --color-on-accent: #FFFFFF;
  --color-focus-ring: #4F46E5;
  --color-danger: #B42318;
  --color-danger-subtle: #FDEDEC;
  --color-on-danger: #FFFFFF;
  --color-success: #127045;
  --color-success-subtle: #E6F5EC;
  --color-warning: #8A5300;
  --color-warning-subtle: #FFF3DC;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  --text-xs: 12px;
  --leading-xs: 18px;
  --weight-xs: 500;
  --text-sm: 14px;
  --leading-sm: 22px;
  --weight-sm: 400;
  --text-base: 16px;
  --leading-base: 26px;
  --weight-base: 400;
  --text-lg: 18px;
  --leading-lg: 28px;
  --weight-lg: 600;
  --text-xl: 22px;
  --leading-xl: 30px;
  --weight-xl: 700;
  --text-display: 28px;
  --leading-display: 36px;
  --weight-display: 700;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
  --shadow-pop: 0 12px 32px rgba(16,24,40,.14);
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --content-max: 560px;
  --wide-max: 720px;
  --header-h: 56px;
  --tap-min: 44px;
  --breakpoint-md: 720px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0F1116;
    --color-surface: #171A21;
    --color-border: #2A2E38;
    --color-border-input: #767D8C;
    --color-text: #ECEDF1;
    --color-text-muted: #A3A8B4;
    --color-neutral-subtle: #232731;
    --color-accent: #8B93F8;
    --color-accent-hover: #A5ACFA;
    --color-accent-subtle: #1F2147;
    --color-on-accent: #0F1116;
    --color-focus-ring: #A5ACFA;
    --color-danger: #F4877D;
    --color-danger-subtle: #3A1B1A;
    --color-on-danger: #0F1116;
    --color-success: #5BD28F;
    --color-success-subtle: #12301F;
    --color-warning: #F2B84B;
    --color-warning-subtle: #352811;
    --shadow-card: 0 0 0 1px rgba(255,255,255,.04);
    --shadow-pop: 0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0F1116;
  --color-surface: #171A21;
  --color-border: #2A2E38;
  --color-border-input: #767D8C;
  --color-text: #ECEDF1;
  --color-text-muted: #A3A8B4;
  --color-neutral-subtle: #232731;
  --color-accent: #8B93F8;
  --color-accent-hover: #A5ACFA;
  --color-accent-subtle: #1F2147;
  --color-on-accent: #0F1116;
  --color-focus-ring: #A5ACFA;
  --color-danger: #F4877D;
  --color-danger-subtle: #3A1B1A;
  --color-on-danger: #0F1116;
  --color-success: #5BD28F;
  --color-success-subtle: #12301F;
  --color-warning: #F2B84B;
  --color-warning-subtle: #352811;
  --shadow-card: 0 0 0 1px rgba(255,255,255,.04);
  --shadow-pop: 0 12px 32px rgba(0,0,0,.5);
}
:root[data-theme="light"] {
  color-scheme: light;
}

/* kakao-assistant 웹 화면 CSS 한 파일 (서버 렌더링 HTML용).
   tokens.css 다음에 불러온다. 색·크기는 var(--*) 토큰으로만 쓴다(raw hex 금지, 카카오 로그인 버튼만 예외).
   구현 때 src/web/static/app.css로 옮기고 tokens.css 내용을 맨 위에 합쳐 파일 하나로 만든다. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* .stack 같은 display 규칙이 hidden을 덮지 않게 */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  word-break: keep-all;          /* 한글을 어절 단위로 줄바꿈 */
  overflow-wrap: anywhere;       /* 긴 URL·키 모양 문자열이 넘치지 않게 */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1 { font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-display); letter-spacing: -0.01em; }
h2 { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-xl); }
h3 { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-lg); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-sm); }
.text-xs { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-xs); }
.muted { color: var(--color-text-muted); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-hover); }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; background: var(--color-accent); color: var(--color-on-accent); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); z-index: 10; }
.skip-link:focus { top: var(--space-2); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- layout ---------- */
.site-header {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--color-text); text-decoration: none; }
.brand-mark { width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-on-accent); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.nav { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.nav a { color: var(--color-text-muted); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); }
.nav a:hover { background: var(--color-neutral-subtle); color: var(--color-text); }
.nav a[aria-current="page"] { color: var(--color-accent); background: var(--color-accent-subtle); font-weight: 600; }
.page { max-width: var(--content-max); margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-9); }
.page.wide { max-width: var(--wide-max); }
.page-head { margin-bottom: var(--space-6); display: grid; gap: var(--space-2); }
.page-head > .badge { justify-self: start; }
.stack > .page-head, .stack-lg > .page-head { margin-bottom: 0; }
.stack { display: grid; gap: var(--space-4); }
.stack-lg { display: grid; gap: var(--space-6); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.site-footer { border-top: 1px solid var(--color-border); padding: var(--space-6) var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }
.site-footer a { color: var(--color-text-muted); }

/* ---------- card ---------- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.card.flat { background: var(--color-surface); box-shadow: none; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.card-title { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-lg); }
.card-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); display: grid; place-items: center; color: var(--color-text-muted); flex: none; }
.card-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* ---------- button ---------- */
.btn {
  --_bg: var(--color-accent); --_fg: var(--color-on-accent); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min); padding: 0 var(--space-5);
  border-radius: var(--radius-md); border: 1px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  font: inherit; font-size: var(--text-base); font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
.btn:hover { --_bg: var(--color-accent-hover); color: var(--_fg); }
.btn:active { transform: translateY(1px); }
.btn.secondary { --_bg: var(--color-bg); --_fg: var(--color-text); --_bd: var(--color-border-input); }
.btn.secondary:hover { --_bg: var(--color-neutral-subtle); }
.btn.ghost { --_bg: transparent; --_fg: var(--color-accent); }
.btn.ghost:hover { --_bg: var(--color-accent-subtle); }
.btn.danger { --_bg: var(--color-danger); --_fg: var(--color-on-danger); }
.btn.danger:hover { --_bg: var(--color-danger); filter: brightness(0.92); }
.btn.danger-ghost { --_bg: transparent; --_fg: var(--color-danger); }
.btn.danger-ghost:hover { --_bg: var(--color-danger-subtle); }
.btn.sm { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn.lg { min-height: 52px; padding: 0 var(--space-6); font-size: var(--text-lg); }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* 카카오 로그인: 카카오 로그인 디자인 가이드의 공식 버튼(색·심볼·문구)을 따른다. 토큰을 쓰지 않는 유일한 예외. */
.btn.kakao { --_bg: #FEE500; --_fg: rgba(0, 0, 0, .85); --_bd: transparent; border-radius: 12px; }
.btn.kakao:hover { --_bg: #FEE500; filter: brightness(.96); }

/* ---------- form ---------- */
.field { display: grid; gap: var(--space-2); }
.label { font-weight: 600; font-size: var(--text-sm); line-height: var(--leading-sm); }
.help { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.input, .select, .textarea {
  width: 100%; min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-input); border-radius: var(--radius-md);
  background: var(--color-bg); color: var(--color-text);
  font: inherit; font-size: var(--text-base);  /* 16px 미만이면 iOS가 확대한다 */
}
.textarea { min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 0; border-color: var(--color-focus-ring); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.input:disabled { background: var(--color-surface); color: var(--color-text-muted); }
.field-error { color: var(--color-danger); font-size: var(--text-sm); line-height: var(--leading-sm); }
.check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--tap-min); padding-top: var(--space-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--color-accent); flex: none; }

/* ---------- badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 600; white-space: nowrap;
  background: var(--color-neutral-subtle); color: var(--color-text-muted);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge.accent { background: var(--color-accent-subtle); color: var(--color-accent); }
.badge.success { background: var(--color-success-subtle); color: var(--color-success); }
.badge.warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.badge.danger { background: var(--color-danger-subtle); color: var(--color-danger); }

/* ---------- alert / banner ---------- */
.alert {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-neutral-subtle); color: var(--color-text);
  font-size: var(--text-sm); line-height: var(--leading-sm);
  border-left: 3px solid var(--color-text-muted);
}
.alert svg { margin-top: 1px; color: var(--color-text-muted); }
.alert strong { display: block; font-weight: 600; }
.alert.info { background: var(--color-accent-subtle); border-left-color: var(--color-accent); }
.alert.info svg { color: var(--color-accent); }
.alert.success { background: var(--color-success-subtle); border-left-color: var(--color-success); }
.alert.success svg { color: var(--color-success); }
.alert.warning { background: var(--color-warning-subtle); border-left-color: var(--color-warning); }
.alert.warning svg { color: var(--color-warning); }
.alert.danger { background: var(--color-danger-subtle); border-left-color: var(--color-danger); }
.alert.danger svg { color: var(--color-danger); }

/* ---------- list ---------- */
.list { list-style: none; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.list > li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-bg); }
.list > li:first-child { border-top: 0; }
.list .num { font-variant-numeric: tabular-nums; color: var(--color-text-muted); min-width: 1.5em; font-weight: 600; }
.list .body { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.list .meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.list .actions { display: flex; gap: var(--space-1); flex: none; }

/* ---------- key-value ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); line-height: var(--leading-sm); }
.kv dt { color: var(--color-text-muted); }
.kv dd { font-weight: 500; }

/* ---------- empty state ---------- */
.empty { text-align: center; padding: var(--space-8) var(--space-5); border: 1px dashed var(--color-border-input); border-radius: var(--radius-lg); color: var(--color-text-muted); display: grid; gap: var(--space-3); justify-items: center; }
.empty strong { color: var(--color-text); font-size: var(--text-lg); }

/* ---------- section ---------- */
.section-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-3); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

/* ---------- prose (약관·처리방침·/t/:id 긴 답) ---------- */
.prose { display: grid; gap: var(--space-4); }
.prose h2 { margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: 1.25em; display: grid; gap: var(--space-1); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.prose th, .prose td { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.prose th { background: var(--color-surface); }