/* 10 THEMES — 색상·그림자·글로우만. 위치/크기/레이아웃 선언 금지. */

:root[data-theme="red"]{
  --tone-1:#FFF1EF;
  --tone-2:#FFF8F7;
  --tone-3:#FBE1DE;
  --tone-4:#EFC0BB;
  --tone-5:#F3A09A;
  --tone-6:#DF6B67;
  --tone-text:#7B4542;
  --practice-p1:#FFF0EE;
  --practice-p2:#FFF8F7;
  --practice-p3:#FBE1DE;
  --practice-p4:#EFC0BB;
  --practice-p5:#E8958F;
  --practice-p6:#DF6B67;
  --practice-text:#7B4542;
}

:root[data-theme="yellow"]{
  --tone-1:#FFF9E8;
  --tone-2:#FFFDF5;
  --tone-3:#FFF1C7;
  --tone-4:#EAD796;
  --tone-5:#F0CF72;
  --tone-6:#D9A72E;
  --tone-text:#725F2E;
  --practice-p1:#FFF8DF;
  --practice-p2:#FFFDF5;
  --practice-p3:#F8EDC5;
  --practice-p4:#EAD796;
  --practice-p5:#E1BE5B;
  --practice-p6:#D9A72E;
  --practice-text:#725F2E;
}

:root[data-theme="blue"]{
  --home-hero-image:url("../assets/title_blue_bg.png");
}

:root[data-theme="pink"]{
  --tone-1:#FFF1F7;
  --tone-2:#FFF7FA;
  --tone-3:#FCE1EC;
  --tone-4:#F3B8CF;
  --tone-5:#EF91B6;
  --tone-6:#E86B9C;
  --tone-text:#81445e;
  --practice-p1:#FFF0F6;
  --practice-p2:#FFF8FB;
  --practice-p3:#FCE3EE;
  --practice-p4:#F2BDD1;
  --practice-p5:#EB94B5;
  --practice-p6:#E86B9C;
  --practice-text:#81445E;
  --home-hero-image:url("../assets/title_pink_bg.png");
}

:root[data-theme="green"]{
  --tone-1:#ECF9F2;
  --tone-2:#F6FCF8;
  --tone-3:#DDF3E7;
  --tone-4:#B8DFC9;
  --tone-5:#8FD3AD;
  --tone-6:#43A874;
  --tone-text:#316B4B;
  --practice-p1:#EAF8F0;
  --practice-p2:#F5FCF8;
  --practice-p3:#DDF3E7;
  --practice-p4:#B8DFC9;
  --practice-p5:#7FC79F;
  --practice-p6:#43A874;
  --practice-text:#316B4B;
  --home-hero-image:url("../assets/title_green_bg.png");
}

:root[data-theme="violet"]{
  --tone-1:#F3EFFC;
  --tone-2:#FAF8FF;
  --tone-3:#E7DFF7;
  --tone-4:#D2C5EE;
  --tone-5:#B7A3E8;
  --tone-6:#8467C9;
  --tone-text:#5B478A;
  --practice-p1:#F2EEFC;
  --practice-p2:#FAF8FF;
  --practice-p3:#E8E0F8;
  --practice-p4:#D2C5EE;
  --practice-p5:#AB94DE;
  --practice-p6:#8467C9;
  --practice-text:#5B478A;
  --home-hero-image:url("../assets/title_violet_bg.png");
}

:root[data-display-mode="dark"] .app-home-button{
  color:var(--night-yellow,#ffd86a);
  background:transparent;
  border:0;
  box-shadow:none;
  filter:drop-shadow(0 0 5px var(--night-yellow-glow,rgba(255,216,106,.55)));
}

:root[data-display-mode="dark"] .app-home-button .app-home-svg{
  filter:drop-shadow(0 0 3px var(--night-yellow-glow,rgba(255,216,106,.45)));
}

:root:not([data-display-mode="dark"]) body,
:root:not([data-display-mode="dark"]) .app{
  background:linear-gradient(180deg,var(--tone-1) 0%,var(--tone-2) 100%);
}

:root:not([data-display-mode="dark"]) #home .hero,
:root:not([data-display-mode="dark"]) #home .review-first,
:root:not([data-display-mode="dark"]) #home .stat,
:root:not([data-display-mode="dark"]) #listenMode .listen-now-card,
:root:not([data-display-mode="dark"]) #listenMode .listen-scope-card,
:root:not([data-display-mode="dark"]) #listenMode .listen-settings-card,
:root:not([data-display-mode="dark"]) #help .settings-card,
:root:not([data-display-mode="dark"]) #help .help-card,
:root:not([data-display-mode="dark"]) #help .settings-menu-card,
:root:not([data-display-mode="dark"]) #help .stat-panel{
  background:var(--tone-2);
  border-color:var(--tone-4);
}

:root:not([data-display-mode="dark"]) #help #themeNameBadge,
:root:not([data-display-mode="dark"]) #help .stats-summary>div,
:root:not([data-display-mode="dark"]) #help .theme-choice.selected{
  background:var(--tone-3);
  border-color:var(--tone-4);
  color:var(--tone-text);
}

:root:not([data-display-mode="dark"]) #help .theme-choice,
:root:not([data-display-mode="dark"]) #help .settings-panel-back,
:root:not([data-display-mode="dark"]) .ghost{
  background:var(--tone-2);
  border-color:var(--tone-4);
}

:root:not([data-display-mode="dark"]) .primary{
  background:linear-gradient(180deg,var(--tone-5),var(--tone-6));
  border-color:var(--tone-6);
  color:#fff;
}

:root:not([data-display-mode="dark"]) #home .home-actions .ghost{
  color:var(--tone-text);
}

:root[data-display-mode="dark"]{
  --tone-1:#091522;
  --tone-2:#12263a;
  --tone-3:#1b344c;
  --tone-4:#355a78;
  --tone-5:#8bd2ff;
  --tone-6:#ffd968;
  --tone-text:#f7fbff;
  --tone-muted:#c5d5e3;
  --night-page:#091522;
  --night-page-2:#0d1b2b;
  --night-surface:#12263a;
  --night-surface-2:#172e44;
  --night-surface-soft:#1b344c;
  --night-border:#355a78;
  --night-border-soft:#29465f;
  --night-text:#f7fbff;
  --night-muted:#c5d5e3;
  --night-blue:#8bd2ff;
  --night-mint:#9ee8c8;
  --night-pink:#f0b1c4;
  --night-yellow:#ffd968;
  --night-yellow-strong:#ffe98f;
  --night-yellow-glow:rgba(255,211,80,.42);
  --night-shadow:rgba(0,0,0,.24);
  --white:var(--night-surface);
  --navy:var(--night-text);
  --muted:var(--night-muted);
}

:root[data-display-mode="dark"] body,
:root[data-display-mode="dark"] .app,
:root[data-display-mode="dark"] #home,
:root[data-display-mode="dark"] #listenMode,
:root[data-display-mode="dark"] #study,
:root[data-display-mode="dark"] #help{
  color:var(--night-text);
  background:linear-gradient(180deg,var(--night-page) 0%,var(--night-page-2) 100%);
}


:root[data-display-mode="dark"] .brand-logo-dark{
  filter:drop-shadow(0 0 7px rgba(127,199,255,.16));
}

:root[data-display-mode="dark"] #home #tourHero{
  background-image:linear-gradient(90deg,rgba(7,18,31,.92) 0%,rgba(7,18,31,.68) 42%,rgba(7,18,31,.10) 72%,rgba(7,18,31,.02) 100%),var(--home-hero-image);
  background-color:#0b1a2a;
  border-color:var(--night-border);
  box-shadow:0 10px 24px var(--night-shadow);
}

:root[data-display-mode="dark"] #home .hero h1,
:root[data-display-mode="dark"] #home .hero strong,
:root[data-display-mode="dark"] #home .hero-copy{
  color:var(--night-text);
}

:root[data-display-mode="dark"] #home .hero em,
:root[data-display-mode="dark"] #home .hero-level{
  color:var(--night-blue);
}

:root[data-display-mode="dark"] #home .hero p,
:root[data-display-mode="dark"] #home .hero-review{
  color:#d4e2ed;
}

:root[data-display-mode="dark"] #home .review-first,
:root[data-display-mode="dark"] #home .curriculum-card,
:root[data-display-mode="dark"] #home .briefing-card,
:root[data-display-mode="dark"] #home .stat{
  background:linear-gradient(180deg,var(--night-surface-2),var(--night-surface));
  border-color:var(--night-border-soft);
  color:var(--night-text);
  box-shadow:0 7px 18px var(--night-shadow);
}

:root[data-display-mode="dark"] #home .home-inline-count,
:root[data-display-mode="dark"] #home .count-label{
  color:var(--night-muted);
}

:root[data-display-mode="dark"] #home .home-inline-count b{
  color:var(--night-text);
}

:root[data-display-mode="dark"] #home .course-tab,
:root[data-display-mode="dark"] #home .stage-chip{
  background:var(--night-surface-soft);
  color:#c9d8e4;
  border-color:var(--night-border-soft);
}

:root[data-display-mode="dark"] #home .course-tab.selected,
:root[data-display-mode="dark"] #home .stage-chip.active{
  background:linear-gradient(180deg,#387fb6,#28638f);
  color:#fff;
  border-color:#579bd0;
}

:root[data-display-mode="dark"] #home .home-main-start,
:root[data-display-mode="dark"] #home .primary{
  background:linear-gradient(180deg,#3e91ce,#2b6f9f);
  color:#fff;
  border-color:#5ca6da;
  box-shadow:0 7px 18px rgba(0,0,0,.22);
}

:root[data-display-mode="dark"] #home .continuous-listen-home-btn{
  background:linear-gradient(180deg,#193d55,#123047);
  color:#e4f3ff;
  border-color:#315d77;
}

:root[data-display-mode="dark"] #home .brief-icon{
  background:transparent;
  border-color:transparent;
}

:root[data-display-mode="dark"] #home .briefing-grid .stat:nth-child(1) .brief-icon{
  color:var(--night-blue);
}

:root[data-display-mode="dark"] #home .briefing-grid .stat:nth-child(2) .brief-icon{
  color:var(--night-mint);
}

:root[data-display-mode="dark"] #home .briefing-grid .stat:nth-child(3) .brief-icon{
  color:#cfc4ff;
}

:root[data-display-mode="dark"] #home .briefing-grid .stat:nth-child(4) .brief-icon{
  color:var(--night-yellow);
}

:root[data-display-mode="dark"] #study .lesson-card{
  background:var(--night-surface);
}

:root[data-display-mode="dark"] #study .line.main{
  background:linear-gradient(135deg,#17344d,#1b3d58);
  border-color:#37698f;
  color:var(--night-text);
}

:root[data-display-mode="dark"] #study .line.pos{
  background:linear-gradient(135deg,#173d31 0%,#1d4b39 100%);
  border-color:#4e9a72;
  color:var(--night-text);
}

:root[data-display-mode="dark"] #study .line.neg{
  background:linear-gradient(135deg,#432832 0%,#512f3d 100%);
  border-color:#9b5d73;
  color:var(--night-text);
}

:root[data-display-mode="dark"] #study .jp,
:root[data-display-mode="dark"] #study .jp-answer{
  color:#f6fbff;
}

:root[data-display-mode="dark"] #study .translation,
:root[data-display-mode="dark"] #study .speech-result{
  color:var(--night-muted);
}

:root[data-display-mode="dark"] #study .line.pos .line-label,
:root[data-display-mode="dark"] #study .line.pos .label{
  color:#b9efca;
}

:root[data-display-mode="dark"] #study .line.neg .line-label,
:root[data-display-mode="dark"] #study .line.neg .label{
  color:#f4bdcd;
}

:root[data-display-mode="dark"] #study .line.pos .translation,
:root[data-display-mode="dark"] #study .line.neg .translation{
  color:#d7e7e2;
}

:root[data-display-mode="dark"] #study #categoryText,
:root[data-display-mode="dark"] #study .line.main .line-label{
  color:#bfeaff;
  text-shadow:0 0 7px rgba(93,210,255,.22);
}

:root[data-display-mode="dark"] #study .nextdue{
  color:#aeeaff;
  background:linear-gradient(180deg,rgba(20,67,87,.86),rgba(13,45,62,.86));
  border:1px solid rgba(83,196,238,.48);
  border-radius:999px;
  text-shadow:0 0 7px rgba(74,209,255,.34);
  box-shadow:0 0 11px rgba(56,194,240,.13);
}

:root[data-display-mode="dark"] #study #positionText,
:root[data-display-mode="dark"] #study .position{
  color:#c5ecff;
  text-shadow:0 0 6px rgba(127,199,255,.20);
}

:root[data-display-mode="dark"] #study .line.active{
  border-color:rgba(255,217,104,.70);
  box-shadow:0 0 0 1px rgba(255,217,104,.13),0 0 15px rgba(255,211,80,.16);
}

:root[data-display-mode="dark"] #study .line.active .jp,
:root[data-display-mode="dark"] #study .line.active .jp-main,
:root[data-display-mode="dark"] #study .line.active .jp-answer,
:root[data-display-mode="dark"] #study .line.active ruby,
:root[data-display-mode="dark"] #study .line.active rt{
  color:var(--night-yellow-strong);
  text-shadow:0 0 7px rgba(255,217,104,.18);
}

:root[data-display-mode="dark"] #study .selected-mic-btn{
  background:linear-gradient(145deg,#7d5121,#b76d29);
  border-color:#f5d79a;
  box-shadow:0 0 0 3px rgba(255,202,105,.55),0 0 17px rgba(255,174,78,.20),0 10px 22px rgba(0,0,0,.30);
}

:root[data-display-mode="dark"] #study .selected-mic-btn.recording{
  background:linear-gradient(145deg,#6f2638,#a93c55);
  border-color:#f4a7b9;
  box-shadow:0 0 0 3px rgba(241,116,145,.50),0 0 18px rgba(241,91,125,.22),0 10px 22px rgba(0,0,0,.32);
}

:root[data-display-mode="dark"] #study .main-mic-wrap .mic-label{
  color:#ffe5a4;
  text-shadow:0 0 6px rgba(255,205,103,.18);
}

:root[data-display-mode="dark"] #study #selfVoiceBtn{
  background:linear-gradient(180deg,#282d48,#20263d);
  color:#e9e5ff;
  border-color:#625f91;
}

:root[data-display-mode="dark"] #study #selfVoiceBtn.self-voice-recording{
  background:linear-gradient(180deg,#4b2834,#38212b);
  color:#ffc4d0;
  border-color:#a85c72;
  box-shadow:0 0 11px rgba(238,99,132,.18);
}

:root[data-display-mode="dark"] #study #selfVoiceBtn.self-voice-ready{
  background:linear-gradient(180deg,#34305d,#272647);
  color:#ddd3ff;
  border-color:#766cc2;
}

:root[data-display-mode="dark"] #study #selfVoiceBtn.self-voice-playing{
  background:linear-gradient(180deg,#6559a8,#433c7c);
  color:#fff;
  border-color:#9b90e3;
  box-shadow:0 0 12px rgba(155,144,227,.20);
}

:root[data-display-mode="dark"] #study #matchCard{
  background:linear-gradient(180deg,#142a3d,#102436);
  border-color:#31536d;
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}

:root[data-display-mode="dark"] #study #matchCard .scorebox,
:root[data-display-mode="dark"] #study #matchAnalysis{
  background:transparent;
  color:var(--night-text);
  border-color:#29485f;
}

:root[data-display-mode="dark"] #study #matchCard .score-title,
:root[data-display-mode="dark"] #study #matchCard .repbox b{
  color:#d7e7f3;
}

:root[data-display-mode="dark"] #study #matchCard .repbox span,
:root[data-display-mode="dark"] #study #speechResult,
:root[data-display-mode="dark"] #study .word-feedback-legend{
  color:#aebfd0;
}

:root[data-display-mode="dark"] #study #matchCard .score-num{
  color:#ffe08a;
}

:root[data-display-mode="dark"] #study .score-track{
  background:#233e54;
}

:root[data-display-mode="dark"] #listenMode .listen-head-title,
:root[data-display-mode="dark"] #listenMode .listen-total,
:root[data-display-mode="dark"] #listenMode .listen-jp{
  color:var(--night-text);
}

:root[data-display-mode="dark"] #listenMode .listen-ko,
:root[data-display-mode="dark"] #listenMode .listen-hint,
:root[data-display-mode="dark"] #listenMode .listen-meta{
  color:var(--night-muted);
}

:root[data-display-mode="dark"] #listenMode .listen-scope-card,
:root[data-display-mode="dark"] #listenMode .listen-now-card,
:root[data-display-mode="dark"] #listenMode .listen-settings-card{
  background:linear-gradient(180deg,var(--night-surface-2),var(--night-surface));
  border-color:var(--night-border);
  color:var(--night-text);
  box-shadow:0 7px 18px var(--night-shadow);
}


:root[data-display-mode="dark"] #help .settings-menu-card,
:root[data-display-mode="dark"] #help .settings-card,
:root[data-display-mode="dark"] #help .help-card,
:root[data-display-mode="dark"] #help .stats-card,
:root[data-display-mode="dark"] #help .stat-panel,
:root[data-display-mode="dark"] #help .app-info-card,
:root[data-display-mode="dark"] #help .manual-hero-card,
:root[data-display-mode="dark"] #help .devlog-day,
:root[data-display-mode="dark"] #help .admin-intro,
:root[data-display-mode="dark"] #help .admin-stage-switch,
:root[data-display-mode="dark"] #help .admin-stage-jump,
:root[data-display-mode="dark"] #help .access-summary{
  background:linear-gradient(180deg,var(--night-surface-2),var(--night-surface));
  border-color:var(--night-border);
  color:var(--night-text);
  box-shadow:0 7px 18px var(--night-shadow);
}

:root[data-display-mode="dark"] #help h2,
:root[data-display-mode="dark"] #help h3,
:root[data-display-mode="dark"] #help b,
:root[data-display-mode="dark"] #help strong,
:root[data-display-mode="dark"] #help p,
:root[data-display-mode="dark"] #help small,
:root[data-display-mode="dark"] #help li,
:root[data-display-mode="dark"] #help .settings-note{
  color:var(--settings-text,var(--tone-6));
}

:root[data-display-mode="dark"] #help .theme-choice,
:root[data-display-mode="dark"] #help .display-mode-choice,
:root[data-display-mode="dark"] #help .learning-profile-choice,
:root[data-display-mode="dark"] #help .weekday-picker button,
:root[data-display-mode="dark"] #help .setting-field input,
:root[data-display-mode="dark"] #help .settings-panel-back{
  background:#1a354c;
  color:#e7f1f9;
  border-color:#315973;
}

:root[data-display-mode="dark"] #help .theme-choice.selected,
:root[data-display-mode="dark"] #help .display-mode-choice.selected,
:root[data-display-mode="dark"] #help .learning-profile-choice.selected{
  background:#234963;
  color:#fff;
  border-color:#4b86ae;
}

:root[data-display-mode="dark"] #help .devlog-entry{
  color:var(--night-muted);
  border-color:var(--night-border-soft);
}

:root[data-display-mode="dark"] #help .app-info-row{
  border-color:var(--night-border-soft);
}

:root[data-display-mode="dark"] .nickname-edit-backdrop,
:root[data-display-mode="dark"] .character-picker-backdrop,
:root[data-display-mode="dark"] .character-crop-backdrop,
:root[data-display-mode="dark"] .frame-gallery-backdrop,
:root[data-display-mode="dark"] .home-review-sheet-backdrop,
:root[data-display-mode="dark"] .tour-backdrop,
:root[data-display-mode="dark"] .guest-login-overlay{
  background:rgba(2,8,15,.68);
}

:root[data-display-mode="dark"] .nickname-edit-dialog,
:root[data-display-mode="dark"] .character-picker-sheet,
:root[data-display-mode="dark"] .character-crop-sheet,
:root[data-display-mode="dark"] .frame-gallery-sheet,
:root[data-display-mode="dark"] .home-review-sheet,
:root[data-display-mode="dark"] .tour-card,
:root[data-display-mode="dark"] .guest-login-card{
  background:linear-gradient(180deg,var(--night-surface-2),var(--night-surface));
  color:var(--night-text);
  border-color:var(--night-border);
  box-shadow:0 14px 38px rgba(0,0,0,.36);
}

:root[data-display-mode="dark"] .nickname-edit-dialog p,
:root[data-display-mode="dark"] .character-picker-sheet p,
:root[data-display-mode="dark"] .character-crop-sheet p,
:root[data-display-mode="dark"] .frame-gallery-sheet p,
:root[data-display-mode="dark"] .home-review-sheet p,
:root[data-display-mode="dark"] .tour-card p,
:root[data-display-mode="dark"] .guest-login-card p,
:root[data-display-mode="dark"] .guest-login-note{
  color:var(--night-muted);
}

:root[data-display-mode="dark"] .nickname-edit-input,
:root[data-display-mode="dark"] .character-crop-stage,
:root[data-display-mode="dark"] .character-choice,
:root[data-display-mode="dark"] .frame-choice,
:root[data-display-mode="dark"] .frame-choice-preview{
  background:#193348;
  color:var(--night-text);
  border-color:#315873;
}

:root[data-display-mode="dark"] .nickname-edit-save,
:root[data-display-mode="dark"] .guest-login-primary,
:root[data-display-mode="dark"] .tour-next{
  background:linear-gradient(180deg,#3c8bc7,#2a6a9a);
  color:#fff;
  border-color:#579fd1;
}

:root[data-display-mode="dark"] .nickname-edit-cancel,
:root[data-display-mode="dark"] .guest-login-later,
:root[data-display-mode="dark"] .tour-skip,
:root[data-display-mode="dark"] .frame-gallery-close{
  background:#1a354c;
  color:#e7f1f9;
  border-color:#315973;
}

:root[data-display-mode="dark"] .toast{
  background:#172c40;
  color:#f4f9fd;
  border-color:#355b78;
  box-shadow:0 8px 22px rgba(0,0,0,.30);
}


/* 공통 헤더의 야간 표현: 구조/위치는 건드리지 않고 색·빛만 변경 */
:root[data-display-mode="dark"] .app-nickname,
:root[data-display-mode="dark"] .app-rank-icon{
  color:#f3f8fc;
  text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 7px rgba(127,199,255,.14);
}
:root[data-display-mode="dark"] .app-settings-button{
  color:var(--night-yellow,#ffd968);
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 0 5px var(--night-yellow-glow,rgba(255,211,80,.42)));
}
:root[data-display-mode="dark"] .app-settings-button::before{
  filter:drop-shadow(0 0 4px var(--night-yellow-glow,rgba(255,211,80,.42)));
}