@charset "utf-8";

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

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

/* ═══════════════ 00 IGNITE — 판매형 블랙 × 아이보리 × 메탈릭 골드 ═══════════════
   면적 비율을 의도적으로 나눕니다.
     딥 웜 블랙·차콜 60~65% / 아이보리·크림 면 20~25% / 강한 골드 15% 내외
   어두운 섹션과 밝은 아이보리 섹션을 번갈아 두어, 스크롤할 때 명암이 확실히
   전환되고 구매 흐름이 끊기지 않게 합니다.
   카카오 노랑과 통신사 로고색은 브랜드 규정색이라 예외로 유지합니다.
   ══════════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="ignite"]{
  color-scheme:dark;
  /* 어두운 면 */
  --bg-page:#15110B;      --bg-hero:#15110B;
  --bg-section:#1E1810;   --bg-section-alt:#272015;  --bg-elevated:#231C12;
  --bg-inverse:#1C1710;
  /* 밝은 면 — 아이보리·크림 (특판·인기기종 강조 구간) */
  --ivory:#F7F0DE;        --cream:#EDE0C2;          --ivory-card:#FFFBF0;
  --ink-ivory:#171108;    --ink2-ivory:#5B4A2D;     --line-ivory:rgba(140,93,8,.26);
  /* 어두운 면 위 글자 */
  --text-primary:#FFFDF7; --text-secondary:#E4DCC9; --text-muted:#BFB49B;
  --text-inverse:#171108;
  /* 골드 — 중심 / 밝은 / 깊은 */
  --brand-primary:#D9A82E; --brand-strong:#FFE28A;
  --gold-deep:#8C5D08;
  --brand-soft:#2E2413;    --brand-subtle:#231C12;
  --accent-primary:#D9A82E; --accent-hover:#FFE28A; --accent-soft:#2E2413;
  --border-default:rgba(217,168,46,.30); --border-strong:rgba(255,226,138,.55);
  --focus-ring:#FFE28A;
}

/* ─────────── 01 공공 블루 (이전 라이트 시안 · ?theme= 로 미리보기) ─────────── */
[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}