@charset "utf-8";

/* ════════════════════════════════════════════════════════════
   일선모바일 — 컬러 모드 10종 (디자인 토큰)

   · style.css / chatbot.css 보다 나중에 불러와 토큰만 덮어씁니다.
   · 색상은 이 파일에서만 정의합니다. 컴포넌트에 직접 쓰지 않습니다.
   · 순백(#FFFFFF)은 배경으로 쓰지 않고 아주 옅은 색조를 넣었습니다.
     예외 : QR 코드 카드 (스캔 인식률 때문에 반드시 순백 유지)
   ════════════════════════════════════════════════════════════ */

/* ─────────── 01 공공 블루 (기본값) ─────────── */
:root,
[data-theme="civic-blue"]{
  color-scheme:light;
  --bg-page:#EEF5FC;      --bg-hero:#DCEDFC;
  --bg-section:#F8FDFF;   --bg-section-alt:#E1F0FA;  --bg-elevated:#FAFDFF;
  --bg-inverse:#0B233C;
  --text-primary:#122237; --text-secondary:#495A6E; --text-muted:#5E6A79;
  --text-inverse:#FFFFFF;
  --brand-primary:#185D91; --brand-strong:#0F4671;
  --brand-soft:#CFE7F8;    --brand-subtle:#E9F4FB;
  --accent-primary:#1378C3; --accent-hover:#1169AC; --accent-soft:#FAE3D5;
  --border-default:rgba(20,34,53,.15); --border-strong:rgba(20,34,53,.26);
  --focus-ring:#1B70B1;
}

/* ─────────── 02 딥 오션 ─────────── */
[data-theme="deep-ocean"]{
  --bg-page:#EDF7F9;      --bg-hero:#D8F1F6;
  --bg-section:#F7FEFE;   --bg-section-alt:#E0F2F4;  --bg-elevated:#F9FFFF;
  --bg-inverse:#023546;
  --text-primary:#0E2C36; --text-secondary:#43616A; --text-muted:#5C6F75;
  --text-inverse:#FFFFFF;
  --brand-primary:#0A7181; --brand-strong:#045260;
  --brand-soft:#C4EBEE;    --brand-subtle:#E5F7F7;
  --accent-primary:#017E91; --accent-hover:#016878; --accent-soft:#FBE4D6;
  --border-default:rgba(16,43,52,.15); --border-strong:rgba(16,43,52,.26);
  --focus-ring:#0D889C;
}

/* ─────────── 03 미네랄 틸 ─────────── */
[data-theme="mineral-teal"]{
  --bg-page:#F0F7F5;      --bg-hero:#DEF1EC;
  --bg-section:#F9FDFB;   --bg-section-alt:#E4F2EE;  --bg-elevated:#FAFEFC;
  --bg-inverse:#123A3A;
  --text-primary:#193130; --text-secondary:#4D6360; --text-muted:#616F6D;
  --text-inverse:#FFFFFF;
  --brand-primary:#2B736E; --brand-strong:#24615C;
  --brand-soft:#CFE9E3;    --brand-subtle:#EBF7F3;
  --accent-primary:#287F79; --accent-hover:#226C67; --accent-soft:#F9E3D5;
  --border-default:rgba(26,48,47,.15); --border-strong:rgba(26,48,47,.26);
  --focus-ring:#378D86;
}

/* ─────────── 04 라이트 스톤 ─────────── */
[data-theme="light-stone"]{
  --bg-page:#F5F3ED;      --bg-hero:#ECE7DC;
  --bg-section:#FCFCF8;   --bg-section-alt:#EEE9DE;  --bg-elevated:#FDFDF9;
  --bg-inverse:#242A2E;
  --text-primary:#262C32; --text-secondary:#555D64; --text-muted:#656A6E;
  --text-inverse:#FFFFFF;
  --brand-primary:#43616A; --brand-strong:#324D57;
  --brand-soft:#D9E4E6;    --brand-subtle:#EEF2F2;
  --accent-primary:#457C8D; --accent-hover:#3D6D7C; --accent-soft:#F4E0D5;
  --border-default:rgba(39,44,49,.15); --border-strong:rgba(39,44,49,.26);
  --focus-ring:#507986;
}

/* ─────────── 05 세이지 트러스트 ─────────── */
[data-theme="sage-trust"]{
  --bg-page:#F4F8ED;      --bg-hero:#E5F1DA;
  --bg-section:#F9FEF7;   --bg-section-alt:#E8F3DF;  --bg-elevated:#FBFFF9;
  --bg-inverse:#2A3E35;
  --text-primary:#25342D; --text-secondary:#516058; --text-muted:#646F68;
  --text-inverse:#FFFFFF;
  --brand-primary:#4D6E5C; --brand-strong:#3B5245;
  --brand-soft:#D7E9DA;    --brand-subtle:#EDF5EF;
  --accent-primary:#3F805D; --accent-hover:#376F50; --accent-soft:#F9E3D5;
  --border-default:rgba(38,51,45,.15); --border-strong:rgba(38,51,45,.26);
  --focus-ring:#5F816E;
}

/* ─────────── 06 클라우드 블루 ─────────── */
[data-theme="cloud-blue"]{
  --bg-page:#F1F6FD;      --bg-hero:#DFEEFF;
  --bg-section:#F8FAFF;   --bg-section-alt:#E3F0FE;  --bg-elevated:#FAFCFF;
  --bg-inverse:#132F50;
  --text-primary:#192B42; --text-secondary:#4C5D72; --text-muted:#5F6B79;
  --text-inverse:#FFFFFF;
  --brand-primary:#356AA1; --brand-strong:#295279;
  --brand-soft:#D3E6FA;    --brand-subtle:#EBF3FC;
  --accent-primary:#3275BB; --accent-hover:#2C69A7; --accent-soft:#FDE3D5;
  --border-default:rgba(27,43,64,.14); --border-strong:rgba(27,43,64,.25);
  --focus-ring:#447FBA;
}

/* ─────────── 07 샌드 네이비 ─────────── */
[data-theme="sand-navy"]{
  --bg-page:#FBF3E1;      --bg-hero:#F7E8C9;
  --bg-section:#FFFCF6;   --bg-section-alt:#F7EAD0;  --bg-elevated:#FFFEF8;
  --bg-inverse:#122539;
  --text-primary:#1F2B37; --text-secondary:#565E67; --text-muted:#65696D;
  --text-inverse:#FFFFFF;
  --brand-primary:#254C6C; --brand-strong:#1A374F;
  --brand-soft:#D6E3E9;    --brand-subtle:#EBF1F3;
  --accent-primary:#3278B2; --accent-hover:#2C6B9E; --accent-soft:#F5DECE;
  --border-default:rgba(32,43,54,.15); --border-strong:rgba(32,43,54,.26);
  --focus-ring:#2C5D83;
}

/* ─────────── 08 웜 그레이 ─────────── */
[data-theme="warm-gray"]{
  --bg-page:#F5F2EE;      --bg-hero:#E9E7E0;
  --bg-section:#FCFCF9;   --bg-section-alt:#EDEBE4;  --bg-elevated:#FDFDFB;
  --bg-inverse:#2C3035;
  --text-primary:#292C31; --text-secondary:#575B60; --text-muted:#676A6F;
  --text-inverse:#FFFFFF;
  --brand-primary:#4D5F6D; --brand-strong:#3F4F5B;
  --brand-soft:#DBE3E8;    --brand-subtle:#EFF2F3;
  --accent-primary:#4C799B; --accent-hover:#446B8A; --accent-soft:#F7E1D4;
  --border-default:rgba(41,44,49,.15); --border-strong:rgba(41,44,49,.26);
  --focus-ring:#587183;
}

/* ─────────── 09 딥 버건디 ─────────── */
[data-theme="burgundy"]{
  --bg-page:#F8F2F0;      --bg-hero:#F2E0DE;
  --bg-section:#FDF9F9;   --bg-section-alt:#F5E4E2;  --bg-elevated:#FEFAFA;
  --bg-inverse:#391F25;
  --text-primary:#312328; --text-secondary:#604F54; --text-muted:#6F6367;
  --text-inverse:#FFFFFF;
  --brand-primary:#7E3F51; --brand-strong:#653140;
  --brand-soft:#EFD2DA;    --brand-subtle:#F9ECEF;
  --accent-primary:#A94B66; --accent-hover:#97435B; --accent-soft:#F9E0D2;
  --border-default:rgba(48,36,40,.15); --border-strong:rgba(48,36,40,.26);
  --focus-ring:#924C5F;
}

/* ─────────── 10 모노 프리미엄 ─────────── */
[data-theme="mono-premium"]{
  --bg-page:#F5F5F1;      --bg-hero:#E7EAE5;
  --bg-section:#FAFAF8;   --bg-section-alt:#EBEEE9;  --bg-elevated:#FCFCFA;
  --bg-inverse:#15191B;
  --text-primary:#181C1E; --text-secondary:#53585B; --text-muted:#676B6E;
  --text-inverse:#FFFFFF;
  --brand-primary:#2B6469; --brand-strong:#245256;
  --brand-soft:#D6E9E9;    --brand-subtle:#EDF5F5;
  --accent-primary:#2F8087; --accent-hover:#296E74; --accent-soft:#F4DFD2;
  --border-default:rgba(24,28,30,.15); --border-strong:rgba(24,28,30,.28);
  --focus-ring:#316E74;
}

/* ════════════════════════════════════════════════════════════
   기존 컴포넌트 토큰 연결
   style.css / chatbot.css 가 쓰던 이름을 위 토큰으로 이어 줍니다.
   덕분에 컴포넌트 CSS를 고치지 않고도 10개 테마가 전부 적용됩니다.
   ════════════════════════════════════════════════════════════ */
:root{
  --paper:var(--bg-page);
  --paper-2:var(--bg-section-alt);
  --white:var(--bg-section);
  --ink:var(--text-primary);
  --ink-2:var(--text-secondary);
  --ink-3:var(--text-muted);
  --line:var(--border-default);
  --line-2:color-mix(in srgb, var(--border-default) 55%, transparent);

  --navy:var(--bg-inverse);
  --navy-2:color-mix(in srgb, var(--bg-inverse) 88%, #FFFFFF);
  --navy-3:color-mix(in srgb, var(--bg-inverse) 78%, #FFFFFF);

  --cobalt:var(--brand-primary);
  --cobalt-ink:var(--brand-strong);
  --cobalt-lite:color-mix(in srgb, var(--brand-primary) 45%, #FFFFFF);
  --brand-navy:var(--brand-strong);

  --cta:var(--accent-primary);
  --cta-2:var(--accent-hover);
  --cta-bright:var(--accent-primary);

  --shadow-soft:0 12px 36px color-mix(in srgb, var(--text-primary) 10%, transparent);

  /* 히어로 배경빛 — 테마 브랜드색에 반응 */
  --season-bg:var(--bg-hero);
  --season-soft:var(--bg-section-alt);
  --season-glow:color-mix(in srgb, var(--brand-primary) 26%, transparent);
  --season-accent:var(--brand-primary);
}

/* color-mix 미지원 브라우저 대비 — 먼저 선언된 값이 유지됩니다 */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  :root{
    --line-2:var(--border-default);
    --navy-2:var(--bg-inverse);
    --navy-3:var(--bg-inverse);
    --cobalt-lite:var(--brand-soft);
    --shadow-soft:0 12px 36px rgba(20,32,51,.08);
    --season-glow:transparent;
  }
}

/* 계절 테마는 컬러 모드로 대체되었습니다 */
[data-season]{--season-bg:var(--bg-hero);--season-soft:var(--bg-section-alt)}

/* ════════ 테마 전환 애니메이션 (레이아웃 속성은 제외) ════════ */
body,
.hd, .hero, .sec, .fm, .dv, .cb__panel, .cb__hd, .cb__bub, .cb__opt,
.ft, .bar, .util, .btn, .tab, .chip, .tier, .law, .st, .fq__item{
  transition:color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
@media (prefers-reduced-motion:reduce){
  body,
  .hd, .hero, .sec, .fm, .dv, .cb__panel, .cb__hd, .cb__bub, .cb__opt,
  .ft, .bar, .util, .btn, .tab, .chip, .tier, .law, .st, .fq__item{transition:none}
}

/* ════════ QR — 테마와 무관하게 순백 유지 (스캔 인식률) ════════ */
.cb__qrcard, .qrm__img, .qrbox__img{background:#FFFFFF !important}

/* ════════════════════════════════════════════════════════════
   컬러 모드 선택기
   ════════════════════════════════════════════════════════════ */
.tsel{
  position:relative;z-index:81;
  background:color-mix(in srgb, var(--bg-page) 88%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border-default);
}
.tsel[hidden]{display:none}
.tsel__in{
  max-width:var(--wrap);margin-inline:auto;padding:10px var(--gutter);
  display:flex;align-items:center;gap:14px;
}
.tsel__head{display:flex;align-items:baseline;gap:10px;flex:none}
.tsel__ttl{font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}
.tsel__now{font-size:12px;color:var(--text-muted);white-space:nowrap}
.tsel__hint{font-size:11.5px;color:var(--text-muted);flex:none}

.tsel__list{
  display:flex;gap:6px;flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:thin;padding-bottom:2px;
}
.tsel__list::-webkit-scrollbar{height:4px}
.tsel__list::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}

.tsel__btn{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  height:40px;padding:0 12px;border-radius:9px;
  border:1px solid var(--border-default);
  background:var(--bg-elevated);color:var(--text-secondary);
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  transition:border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.tsel__btn:hover{border-color:var(--border-strong);color:var(--text-primary)}
.tsel__btn.is-selected{
  border-color:var(--brand-primary);color:var(--text-primary);font-weight:700;
  box-shadow:inset 0 0 0 1px var(--brand-primary);
}
.tsel__no{font-variant-numeric:tabular-nums;color:var(--text-muted);font-weight:600}
.tsel__btn.is-selected .tsel__no{color:var(--brand-primary)}
.tsel__dots{display:inline-flex;gap:3px;flex:none}
.tsel__dot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.tsel__check{width:13px;height:13px;flex:none;color:var(--brand-primary);display:none}
.tsel__btn.is-selected .tsel__check{display:block}
.tsel__check svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

.tsel__fold{
  flex:none;height:40px;min-width:44px;padding:0 12px;border-radius:9px;
  border:1px solid var(--border-default);background:var(--bg-elevated);
  color:var(--text-secondary);font-size:12.5px;font-weight:500;
}
.tsel__fold:hover{border-color:var(--border-strong);color:var(--text-primary)}

/* 접힌 상태 — 작은 버튼만 */
.tsel.is-folded .tsel__in{padding-block:7px}
.tsel.is-folded .tsel__list,
.tsel.is-folded .tsel__hint,
.tsel.is-folded .tsel__ttl{display:none}
.tsel.is-folded .tsel__head{margin-right:auto}

/* 모바일 — 현재 테마 버튼 하나 + 펼침 패널 */
.tsel__toggle{
  display:none;align-items:center;gap:8px;flex:1;min-width:0;
  height:44px;padding:0 14px;border-radius:9px;
  border:1px solid var(--border-default);background:var(--bg-elevated);
  color:var(--text-primary);font-size:13.5px;font-weight:600;letter-spacing:-.01em;
}
.tsel__toggle::after{
  content:'';margin-left:auto;flex:none;width:8px;height:8px;
  border-right:1.6px solid var(--text-muted);border-bottom:1.6px solid var(--text-muted);
  transform:rotate(45deg) translate(-2px,-2px);
}
.tsel__sheet{position:fixed;inset:0;z-index:170;display:none}
.tsel__sheet[hidden]{display:none}
.tsel__sheet.is-open{display:block}
.tsel__dim{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.tsel__panel{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--bg-section);border-radius:16px 16px 0 0;
  padding:18px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  max-height:82dvh;overflow-y:auto;
}
.tsel__panelTtl{font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--text-primary)}
.tsel__panelHint{margin-top:6px;font-size:13px;line-height:1.6;color:var(--text-muted)}
.tsel__sheet .tsel__list{display:grid;grid-template-columns:1fr;gap:8px;overflow:visible;margin-top:16px}
.tsel__sheet .tsel__btn{height:52px;width:100%;justify-content:flex-start;font-size:14.5px;padding:0 14px}
.tsel__sheet .tsel__dot{width:13px;height:13px}
.tsel__close{
  width:100%;height:48px;margin-top:14px;border-radius:9px;
  border:1px solid var(--border-default);background:var(--bg-elevated);
  color:var(--text-primary);font-size:14.5px;font-weight:600;
}
.tsel__reset{
  width:100%;height:44px;margin-top:8px;border-radius:9px;
  background:transparent;color:var(--text-muted);font-size:13px;
  text-decoration:underline;text-underline-offset:3px;
}

@media (max-width:899px){
  .tsel__list,.tsel__hint,.tsel__ttl{display:none}
  .tsel__toggle{display:flex}
  .tsel__in{gap:8px;padding-block:8px}
  .tsel__now{display:none}
  .tsel.is-folded .tsel__toggle{display:none}
}
@media (min-width:900px){
  .tsel__sheet{display:none !important}
}
@media (min-width:1440px){
  .tsel__list{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;overflow:visible}
  .tsel__btn{width:100%;justify-content:flex-start}
}

/* ════════ 선택기 배치 — 고정 헤더 바로 아래에 붙는다 ════════ */
body.has-tsel{--tsel-offset:64px}
@media (min-width:900px){ body.has-tsel{--tsel-offset:76px} }
body.has-tsel .tsel{
  position:sticky;top:var(--tsel-offset);margin-top:var(--tsel-offset);
}
/* 선택기가 헤더 아래 공간을 차지하므로 히어로 상단 여백을 줄인다 */
body.has-tsel .hero{padding-top:clamp(40px, 5vw, 68px)}
@media (min-width:900px){
  body.has-tsel .hero{padding-top:clamp(48px, 5vw, 76px);min-height:clamp(560px, 78vh, 860px)}
}