/* ── shadcn/ui 스타일 디자인 시스템 ── */
:root {
  /* Dark (기본) */
  --background:    #09090b;
  --foreground:    #fafafa;
  --card:          #0f0f12;
  --card-border:   #27272a;
  --muted:         #18181b;
  --muted-fg:      #b4b4bc;
  --accent:        #f5c842;
  --accent-fg:     #09090b;
  --primary:       #fafafa;
  --primary-fg:    #09090b;
  --destructive:   #ef4444;
  --success:       #22c55e;
  --ring:          #52525b;
  --radius:        0.5rem;
  --expert-clr:    #a78bfa;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-height: 56px;
  --tabbar-height: 88px;

/* Typography */
--font-serif: 'Instrument Serif', Georgia, serif;
--font-sans:  'Noto Sans KR', sans-serif;
}

html[data-theme='light'], html.theme-light-init, body.theme-light {
--background:  #f8f8f8;
--foreground:  #09090b;
--card:        #ffffff;
--card-border: #e4e4e7;
--muted:       #f4f4f5;
--muted-fg:    #52525b;
--accent:      #a05c07;
--accent-fg:   #ffffff;
--primary:     #18181b;
--primary-fg:  #fafafa;
--destructive: #dc2626;
--success:     #16a34a;
--ring:        #d4d4d8;
--expert-clr:  #7c3aed;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
padding: 0 0 calc(var(--tabbar-height) + var(--safe-bottom) + 12px);
overscroll-behavior-y: contain;
}

body.app-overlay-open {
overflow: hidden;
}

.app {
width: 100%; max-width: 480px;
margin: 0 auto;
position: relative;
}

/* ── 로딩 ── */
.loading {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
min-height: 80vh; gap: 16px; text-align: center;
padding: 32px;
}
.spinner {
width: 32px; height: 32px;
border: 2px solid var(--card-border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
.loading-title { font-size: 15px; font-weight: 500; color: var(--foreground); }
.loading-sub   { font-size: 13px; color: var(--muted-fg); }

/* ── 헤더 ── */
.page-header {
position: fixed; top: 0; left: 50%; transform: translateX(-50%);
width: 100%; max-width: 480px;
height: calc(var(--header-height) + var(--safe-top));
padding: var(--safe-top) 16px 10px;
border-bottom: 1px solid var(--card-border);
background: var(--background);
display: flex; align-items: flex-end; justify-content: space-between;
z-index: 90;
box-sizing: border-box;
/* tab-page fadeUp 애니메이션 상속 차단 */
animation: none !important;
}
.page-header--detail {
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
gap: 2px;
height: calc(74px + var(--safe-top));
padding-bottom: 12px;
}
.page-header--detail .page-header-copy {
width: 100%;
justify-content: flex-end;
text-align: right;
}
.page-header--detail .page-kicker,
.page-header--detail .header-title,
.page-header--detail .page-subtitle {
text-align: right;
}
.page-header-copy {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.page-kicker {
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
}
.header-title {
font-size: 16px; font-weight: 800; line-height: 1.2;
color: var(--foreground); letter-spacing: -0.01em;
white-space: nowrap;
/* 탭 전환 시 글씨 크기 변화 방지 */
transform: none !important;
}
.page-header--detail .header-title span { color: inherit; }
.header-title span { color: var(--accent); }
.header-date {
font-size: 14px; color: var(--muted-fg); font-weight: 500;
white-space: nowrap; text-align: right;
}
.header-source-badge {
font-size: 11px;
font-weight: 700;
color: var(--accent);
background: rgba(245,200,66,.12);
border: 1px solid rgba(245,200,66,.28);
border-radius: 999px;
padding: 4px 8px;
white-space: nowrap;
}
.page-subtitle {
font-size: 12px;
color: var(--muted-fg);
line-height: 1.35;
width: 100%;
}

/* ── 도트 ── */
.dots-wrap { display: flex; gap: 5px; padding: 10px 20px 0; }
.dot {
min-width: 20px; height: 20px; border-radius: 9999px;
background: var(--card-border); transition: all .25s;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 8px; font-weight: 700; color: var(--muted-fg);
}
.dot.ok  { background: var(--success); color: #fff; }
.dot.no  { background: var(--destructive); color: #fff; }
.dot.cur { background: var(--accent); color: #000; min-width: 20px; }

/* ── 카드 ── */
.quiz-card {
margin: 14px 16px;
background: var(--card);
border: 1px solid var(--card-border);
border-radius: calc(var(--radius) * 1.5);
overflow: hidden;
transition: border-color .2s;
}
.quiz-card.answered { border-color: var(--ring); }
/* 답변 후 한 줄 해설 아래에 표시되는 복습용 기사 링크 */
.article-link-inline { display: none; margin: 12px 0 0; }
.article-link-inline.show { display: flex; }

.card-header {
padding: 14px 16px 12px;
border-bottom: 1px solid var(--card-border);
display: flex; align-items: center; gap: 8px;
}
.level-badge {
font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; padding: 2px 8px;
border-radius: var(--radius); border: 1px solid;
}
.lv-easy   { color: #86efac; border-color: #166534; background: #052e16; }
.lv-mid    { color: #fde68a; border-color: #92400e; background: #1c0a00; }
.lv-hard   { color: #fdba74; border-color: #9a3412; background: #1c0800; }
.lv-expert { color: #c4b5fd; border-color: #5b21b6; background: #1e0a3c; }
.lv-master { color: #93c5fd; border-color: #1e40af; background: #0c1a3c; }
body.theme-light .lv-easy   { color: #15803d; border-color: #86efac; background: #f0fdf4; }
body.theme-light .lv-mid    { color: #92400e; border-color: #fde68a; background: #fffbeb; }
body.theme-light .lv-hard   { color: #9a3412; border-color: #fdba74; background: #fff7ed; }
body.theme-light .lv-expert { color: #5b21b6; border-color: #c4b5fd; background: #f5f3ff; }
body.theme-light .lv-master { color: #1e40af; border-color: #93c5fd; background: #eff6ff; }

.news-source { font-size: 11px; color: var(--muted-fg); margin-left: auto; }

.card-body { padding: 16px; }

/* context */
.context-text {
font-size: 14px; color: var(--muted-fg); line-height: 1.65;
margin-bottom: 14px; padding-left: 10px;
border-left: 2px solid var(--card-border);
word-break: keep-all;
}

/* question */
.question {
font-size: 18px; font-weight: 700; line-height: 1.5;
color: var(--foreground); margin-bottom: 16px;
word-break: keep-all; letter-spacing: -0.01em;
}

/* 보기 */
.options { display: flex; flex-direction: column; gap: 8px; }
.opt {
display: flex; align-items: center; gap: 12px;
background: transparent;
border: 1px solid var(--card-border);
border-radius: var(--radius);
padding: 11px 14px;
cursor: pointer; text-align: left; width: 100%;
font-family: var(--font-sans); font-size: 15px;
color: var(--foreground);
transition: border-color .15s, background .15s, transform .1s;
-webkit-tap-highlight-color: transparent;
}
.opt:hover:not(:disabled) {
border-color: var(--ring);
background: var(--muted);
transform: translateX(2px);
}
.opt:active:not(:disabled) { transform: scale(0.99); }
.opt-num {
min-width: 24px; height: 24px; border-radius: var(--radius);
background: var(--muted); color: var(--muted-fg);
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: all .15s;
}
.opt-text { word-break: keep-all; line-height: 1.4; flex: 1; }
.opt.correct { border-color: var(--success); background: rgba(34,197,94,.06); }
.opt.correct .opt-num { background: var(--success); color: #fff; }
.opt.wrong   { border-color: var(--destructive); background: rgba(239,68,68,.06); }
.opt.wrong   .opt-num { background: var(--destructive); color: #fff; }
.opt:disabled { cursor: default; transform: none !important; }



/* 결과 배지 */
.result-badge {
display: none; margin-top: 14px;
padding: 9px 14px; border-radius: var(--radius);
font-size: 14px; font-weight: 600; text-align: center;
border: 1px solid;
}
.result-badge.show { display: block; }
.result-badge.ok { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25); color: var(--success); }
.result-badge.no { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: var(--destructive); }

/* 한 줄 해설 */
.explanation {
display: none; margin-top: 12px;
padding: 12px 14px;
background: var(--muted); border: 1px solid var(--card-border);
border-radius: var(--radius);
font-size: 14px; color: var(--muted-fg); line-height: 1.7;
word-break: keep-all;
animation: fadeUp .25s ease;
}
.explanation.show { display: block; }
.explanation strong { color: var(--accent); font-weight: 700; }
.tip-label {
display: block; font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--accent); margin-bottom: 5px;
}

/* 기사 링크 */
.article-link {
display: none; align-items: center; gap: 8px;
margin-top: 8px; margin-bottom: 14px; padding: 10px 14px;
background: var(--muted); border: 1px solid var(--card-border);
border-radius: var(--radius); text-decoration: none;
font-size: 12px; color: var(--muted-fg);
transition: border-color .15s, background .15s, color .15s;
}
.article-link.show { display: flex; }
.article-link:hover { border-color: var(--accent); background: rgba(245,200,66,.06); color: var(--foreground); }
.article-link-label {
font-size: 10px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--accent);
background: rgba(245,200,66,.1); border: 1px solid rgba(245,200,66,.3);
border-radius: 4px; padding: 1px 6px; flex-shrink: 0;
}
.article-link-title {
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--muted-fg);
}
.article-link-arrow { font-size: 14px; flex-shrink: 0; color: var(--muted-fg); }

/* 전문가 해설 */
.expert-wrap { margin-top: 10px; display: none; }
.expert-wrap.show { display: block; }
.expert-toggle {
width: 100%; background: rgba(167,139,250,.08);
border: 1px solid rgba(167,139,250,.35); border-radius: var(--radius);
color: var(--expert-clr); font-size: 13px; font-weight: 600;
font-family: var(--font-sans);
padding: 9px 14px; cursor: pointer;
display: flex; justify-content: space-between; align-items: center;
transition: border-color .15s, background .15s, color .15s;
}
.expert-toggle:hover { border-color: rgba(167,139,250,.7); background: rgba(167,139,250,.15); color: var(--expert-clr); }
.expert-toggle .arr { font-size: 10px; transition: transform .2s; }
.expert-toggle.open .arr { transform: rotate(180deg); }
.expert-body {
display: none; margin-top: 8px;
padding: 14px; border: 1px solid var(--card-border);
border-radius: var(--radius);
background: var(--muted);
font-size: 14px; color: var(--muted-fg); line-height: 1.75;
animation: fadeUp .2s ease;
}
.expert-body.open { display: block; }
.expert-body p { margin-bottom: 10px; word-break: keep-all; }
.expert-body p:last-child { margin-bottom: 0; }
.expert-body strong { color: var(--expert-clr); font-weight: 700; }
.expert-label {
display: block; font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--expert-clr); margin-bottom: 8px;
}
.takeaway {
background: rgba(167,139,250,.07);
border-left: 2px solid var(--expert-clr);
padding: 9px 12px !important;
border-radius: 0 var(--radius) var(--radius) 0;
color: var(--muted-fg) !important;
font-size: 12px !important;
}
body.theme-light .takeaway { background: rgba(124,58,237,.05); }

/* 다음 버튼 */
.next-btn {
display: none; width: calc(100% - 32px); margin: 0 16px 8px;
padding: 13px; border: none; border-radius: var(--radius);
background: var(--foreground); color: var(--background);
font-size: 14px; font-weight: 600; font-family: var(--font-sans);
cursor: pointer; transition: opacity .15s, transform .1s;
letter-spacing: -0.01em;
}
.next-btn:hover { opacity: 0.88; }
.next-btn:active { transform: scale(0.99); }
.next-btn.show { display: block; }

/* ── 결과 화면 ── */
.final {
display: none;
position: fixed;
inset: 0;
z-index: 120;
padding: calc(var(--safe-top) + 28px) 20px calc(var(--safe-bottom) + 36px);
text-align: center;
animation: fadeUp .35s ease;
background: var(--background);
overflow-y: auto;
}
.final.show { display: block; }
.final-emoji { font-size: 52px; margin-bottom: 8px; }
.final-score-wrap { margin-bottom: 6px; }
.final-score {
font-family: var(--font-serif);
font-size: 72px; line-height: 1;
color: var(--foreground); letter-spacing: -0.04em;
}
.final-total { font-size: 24px; color: var(--muted-fg); margin-left: 2px; }
.final-rate {
font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 4px;
}
.final-divider {
width: 40px; height: 1px; background: var(--card-border);
margin: 16px auto;
}
.final-msg { font-size: 18px; font-weight: 700; color: var(--foreground); margin-bottom: 6px; }
.final-sub { font-size: 13px; color: var(--muted-fg); line-height: 1.6; margin-bottom: 20px; word-break: keep-all; }
/* 뱃지 행 */
.final-badges {
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
margin-bottom: 20px;
}
.final-badge {
padding: 6px 14px; border-radius: 9999px; font-size: 12px; font-weight: 700;
border: 1px solid var(--card-border); color: var(--foreground);
background: var(--muted);
}
.final-badge.accent { background: rgba(245,200,66,.15); border-color: rgba(245,200,66,.4); color: var(--accent); }
.final-badge.success { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: var(--success); }
.final-badge.fire { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.35); color: #f97316; }
/* 스트릭 축하 */
.final-streak {
margin: 0 0 20px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(249,115,22,.1), rgba(245,200,66,.08));
border: 1px solid rgba(249,115,22,.25);
border-radius: 12px;
font-size: 14px; font-weight: 600; color: var(--foreground);
}
.final-streak span { color: #f97316; font-size: 18px; font-weight: 800; }
/* 틀린 문제 요약 */
.final-wrong-section {
text-align: left;
margin-bottom: 24px;
}
.final-wrong-title {
font-size: 13px; font-weight: 700; color: var(--muted-fg);
letter-spacing: .04em; text-transform: uppercase;
margin-bottom: 10px; text-align: center;
}
.final-wrong-item {
background: var(--card); border: 1px solid var(--card-border);
border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
}
.final-wrong-q {
font-size: 13px; font-weight: 600; color: var(--foreground);
margin-bottom: 6px; line-height: 1.4;
}
.final-wrong-ans {
font-size: 12px; color: var(--muted-fg); display: flex; gap: 8px; flex-wrap: wrap;
}
.final-wrong-ans .my  { color: var(--destructive); font-weight: 600; }
.final-wrong-ans .cor { color: var(--success); font-weight: 600; }
.final-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.retry-btn {
padding: 12px 28px; background: var(--foreground); color: var(--background);
border: none; border-radius: var(--radius);
font-size: 14px; font-weight: 600; font-family: var(--font-sans);
cursor: pointer; transition: opacity .15s;
}
.retry-btn:hover { opacity: 0.85; }

/* ── 탭바 ── */
.tab-bar {
position: fixed; bottom: 0; left: 50%;
transform: translateX(-50%);
width: 100%; max-width: 480px;
background: var(--card);
border-top: 1px solid var(--card-border);
display: flex;
z-index: 100;
padding: 8px 8px calc(var(--safe-bottom) + 18px);
min-height: calc(var(--tabbar-height) + var(--safe-bottom));
}
.tab-item {
flex: 1;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
background: none; border: none; cursor: pointer;
transition: opacity .2s; padding: 2px 0 6px;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.tab-item.active::before {
content: ''; position: absolute; top: 0; left: 25%; right: 25%;
height: 2px; background: var(--accent); border-radius: 0 0 2px 2px;
}
.tab-icon-img {
width: 42px; height: 42px; object-fit: contain;
opacity: 0.85;
filter: brightness(2.8) drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(0,0,0,.6));
transition: opacity .2s, filter .2s;
}
.tab-item.active .tab-icon-img {
opacity: 1;
filter: brightness(3.5) drop-shadow(0 0 8px rgba(245,200,66,.9)) drop-shadow(0 2px 6px rgba(245,200,66,.7)) drop-shadow(0 0 16px rgba(245,200,66,.5));
}
body.theme-light .tab-icon-img {
filter: brightness(0.05) drop-shadow(0 2px 4px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(0,0,0,.4));
opacity: 0.85;
}
body.theme-light .tab-item.active .tab-icon-img {
filter: brightness(0) drop-shadow(0 0 6px rgba(0,0,0,.6)) drop-shadow(0 2px 5px rgba(0,0,0,.5));
opacity: 1;
}

/* ── 탭 페이지 ── */
.tab-page { display: none; animation: fadeIn .2s ease; min-height: 100vh; }
.tab-page.active { display: block; }
#page-home,
#page-wrong,
#page-stats,
#page-shop,
#page-settings {
padding-top: calc(var(--header-height) + var(--safe-top));
padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 24px);
}
.page-content-intro {
margin: 14px 16px 0;
padding: 16px;
background: linear-gradient(135deg, rgba(245,200,66,.08), rgba(96,165,250,.04));
border: 1px solid rgba(245,200,66,.16);
border-radius: calc(var(--radius) * 1.5);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.page-content-intro--compact {
padding: 14px 16px;
}
.page-content-intro-copy {
min-width: 0;
flex: 1;
}
.page-content-intro-title {
font-size: 14px;
font-weight: 700;
color: var(--foreground);
margin-bottom: 2px;
}
.page-content-intro-sub {
font-size: 12px;
color: var(--muted-fg);
line-height: 1.5;
word-break: keep-all;
}

/* ── 섹션 공통 ── */
.section-header {
padding: 14px 16px 12px;
border-bottom: 1px solid var(--card-border);
display: flex; align-items: center; justify-content: space-between;
}
.section-title {
font-size: 16px; font-weight: 800; color: var(--foreground);
letter-spacing: -0.01em;
}

/* ── 오답노트 ── */
.wrong-empty, .coming-soon {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
min-height: 50vh; gap: 12px; text-align: center; padding: 32px;
}
.empty-icon { font-size: 40px; margin-bottom: 4px; }
.empty-title { font-size: 16px; font-weight: 600; color: var(--foreground); }
.empty-sub { font-size: 13px; color: var(--muted-fg); line-height: 1.6; max-width: 260px; word-break: keep-all; }
.badge-outline {
display: inline-block; padding: 8px 16px;
border: 1px solid var(--card-border); border-radius: 9999px;
font-size: 11px; font-weight: 500; color: var(--muted-fg);
letter-spacing: 0.04em; text-transform: uppercase;
}

.wrong-list { padding: 0 16px; }
.wrong-item {
border-bottom: 1px solid var(--card-border);
cursor: pointer; position: relative; overflow: hidden;
}
/* 스와이프 삭제 배경 */
.swipe-delete-bg {
position: absolute; right: 0; top: 0; bottom: 0;
width: 72px; background: #ef4444;
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 2px;
color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em;
opacity: 0; transition: opacity .15s;
pointer-events: none;
border-radius: 0 var(--radius) var(--radius) 0;
}
.wrong-item.swiping .swipe-delete-bg { opacity: 1; pointer-events: auto; }
.wrong-item-inner {
transition: transform .2s cubic-bezier(.4,0,.2,1);
background: var(--card);
}
.glossary-item { position: relative; overflow: hidden; }
.glossary-item-inner {
transition: transform .2s cubic-bezier(.4,0,.2,1);
background: var(--card);
}
.glossary-swipe-bg {
position: absolute; right: 0; top: 0; bottom: 0;
width: 72px; background: #ef4444;
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 2px;
color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em;
opacity: 0; transition: opacity .15s;
pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0;
}
.glossary-item.swiping .glossary-swipe-bg { opacity: 1; pointer-events: auto; }
.wrong-item:last-child { border-bottom: none; }
.wrong-item-header {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 4px;
-webkit-tap-highlight-color: transparent;
}
.wrong-item-arr {
font-size: 10px; color: var(--muted-fg);
margin-left: auto; flex-shrink: 0; padding-top: 3px;
transition: transform .2s;
}
.wrong-item.open .wrong-item-arr { transform: rotate(180deg); }
.wrong-item-exp {
display: none;
padding: 0 4px 12px 42px;
font-size: 13px; color: var(--muted-fg);
line-height: 1.65; word-break: keep-all;
animation: fadeUp .2s ease;
}
.wrong-item-exp strong { color: var(--accent); font-weight: 700; }
.wrong-item.open .wrong-item-exp { display: block; }
.wrong-num {
min-width: 28px; height: 28px; border-radius: var(--radius);
background: rgba(239,68,68,.1); color: var(--destructive);
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wrong-q { font-size: 13px; color: var(--foreground); line-height: 1.5; }
.wrong-meta { font-size: 11px; color: var(--muted-fg); margin-top: 3px; }
/* 오답노트 / 용어사전 토글 */
.wrong-tab-bar {
display: inline-flex; align-items: center;
background: var(--muted); border: 1px solid var(--card-border);
border-radius: 999px; padding: 3px; gap: 4px;
flex-shrink: 0; width: max-content; max-width: 100%;
align-self: flex-start;
}
.wrong-tab {
flex: 0 0 auto;
width: max-content;
min-width: 0;
min-height: 34px;
padding: 8px 12px;
font-size: 12px; font-weight: 700; font-family: var(--font-sans);
background: transparent; border: none;
border-radius: 999px; cursor: pointer;
white-space: nowrap; line-height: 1.2;
text-align: center;
display: flex; align-items: center; justify-content: center;
color: var(--muted-fg);
opacity: .48;
filter: blur(.2px);
transition: background .18s ease, color .18s ease, opacity .18s ease, filter .18s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
}
.wrong-tab.active {
background: var(--card);
color: var(--foreground);
opacity: 1;
filter: none;
box-shadow: 0 1px 3px rgba(0,0,0,.22);
}

/* 용어사전 */
.glossary-wrap { padding: 12px 16px; }
.glossary-search-wrap {
position: relative; margin-bottom: 12px; width: 70%;
}
.glossary-search {
width: 100%; padding: 9px 14px 9px 36px;
background: var(--muted); border: 1px solid var(--card-border);
border-radius: var(--radius); color: var(--foreground);
font-size: 16px; font-family: var(--font-sans); /* iOS 줌인 방지: 16px 미만이면 자동 확대 */
transition: border-color .15s;
}
.glossary-search:focus { outline: none; border-color: var(--ring); }
.glossary-search-icon {
position: absolute; left: 12px; top: 50%;
transform: translateY(-50%); font-size: 14px;
color: var(--muted-fg); pointer-events: none;
}
.glossary-count {
font-size: 11px; color: var(--muted-fg);
margin-bottom: 10px; font-weight: 500;
}
.glossary-item {
background: var(--card); border: 1px solid var(--card-border);
border-radius: var(--radius); margin-bottom: 8px; overflow: hidden;
cursor: pointer; transition: border-color .15s;
}
.glossary-item:hover { border-color: var(--ring); }
.glossary-item-header {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 14px;
}
.glossary-term {
font-size: 14px; font-weight: 700; color: var(--foreground);
}
.glossary-tag {
font-size: 10px; font-weight: 700; padding: 2px 7px;
border-radius: 99px; letter-spacing: .04em;
background: rgba(245,200,66,.12); color: var(--accent);
border: 1px solid rgba(245,200,66,.3); white-space: nowrap;
}
.glossary-arr { font-size: 10px; color: var(--muted-fg); transition: transform .2s; }
.glossary-item.open .glossary-arr { transform: rotate(180deg); }
.glossary-desc {
display: none; padding: 0 14px 12px;
font-size: 13px; color: var(--muted-fg); line-height: 1.7;
border-top: 1px solid var(--card-border);
padding-top: 10px; word-break: keep-all;
}
.glossary-item.open .glossary-desc { display: block; }
.glossary-desc-section + .glossary-desc-section {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--card-border);
}
.glossary-desc-label {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 4px;
}
.glossary-desc-copy {
font-size: 13px;
color: var(--muted-fg);
line-height: 1.7;
}
.glossary-empty {
text-align: center; padding: 40px 20px;
font-size: 13px; color: var(--muted-fg);
}

.wrong-header {
padding: 0 16px; margin-bottom: 16px;
display: flex; align-items: center; justify-content: space-between;
}
.wrong-count { font-size: 12px; color: var(--muted-fg); }
.btn-ghost {
padding: 10px 14px; background: transparent;
border: 1px solid var(--card-border); border-radius: var(--radius);
color: var(--muted-fg); font-size: 12px; font-family: var(--font-sans);
cursor: pointer; transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: var(--ring); color: var(--foreground); }

/* ── 통계 ── */
.stat-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; padding: 0 16px; margin-bottom: 16px;
}
.stat-card {
background: var(--card); border: 1px solid var(--card-border);
border-radius: calc(var(--radius) * 1.5); padding: 16px;
}
.stat-val {
font-family: var(--font-serif);
font-size: 36px; color: var(--foreground);
letter-spacing: -0.03em; line-height: 1; display: block; margin-bottom: 4px;
}
.stat-label { font-size: 11px; color: var(--muted-fg); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.grade-card {
margin: 0 16px 16px; padding: 20px;
background: var(--card); border: 1px solid var(--card-border);
border-radius: calc(var(--radius) * 1.5); text-align: center;
}
.grade-emoji { font-size: 32px; margin-bottom: 8px; }
.grade-title { font-size: 16px; font-weight: 700; color: var(--foreground); margin-bottom: 4px; }
.grade-sub { font-size: 12px; color: var(--muted-fg); }

/* ── 설정 ── */
.settings-wrap { padding: 0 16px; }
.settings-nav {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 8px 0 16px;
margin-bottom: 4px;
scrollbar-width: none;
}
.settings-nav::-webkit-scrollbar { display: none; }
.settings-nav-chip {
flex: 0 0 auto;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--card-border);
background: var(--muted);
color: var(--muted-fg);
font-size: 12px;
font-weight: 700;
font-family: var(--font-sans);
cursor: pointer;
transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.settings-nav-chip.active {
background: var(--card);
color: var(--foreground);
border-color: rgba(245,200,66,.3);
box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.settings-group {
background: var(--card); border: 1px solid var(--card-border);
border-radius: calc(var(--radius) * 1.5);
margin-bottom: 12px; overflow: hidden;
scroll-margin-top: calc(var(--header-height) + var(--safe-top) + 64px);
}
.settings-group-label {
padding: 10px 14px 6px;
font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted-fg);
}
.settings-row {
display: flex; align-items: center;
padding: 13px 14px; gap: 12px;
border-top: 1px solid var(--card-border);
}
.settings-row:first-of-type { border-top: none; }
.settings-icon {
width: 32px; height: 32px; border-radius: var(--radius);
background: var(--muted); display: flex; align-items: center;
justify-content: center; font-size: 16px; flex-shrink: 0;
}
.settings-info { flex: 1; min-width: 0; }
.settings-label { font-size: 14px; font-weight: 500; color: var(--foreground); }
.settings-sub { font-size: 11px; color: var(--muted-fg); margin-top: 1px; }

/* toggle */
.toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
position: absolute; inset: 0;
background: var(--card-border); border-radius: 9999px;
transition: background .2s;
}
.toggle-thumb {
position: absolute; top: 3px; left: 3px;
width: 16px; height: 16px; border-radius: 9999px;
background: #fff; transition: transform .2s;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.toggle input:checked ~ .toggle-track { background: var(--foreground); }
.toggle input:checked ~ .toggle-thumb { transform: translateX(18px); }

/* select/input */
.settings-select, .settings-time {
background: var(--muted); border: 1px solid var(--card-border);
color: var(--foreground); border-radius: var(--radius);
padding: 10px 12px; font-size: 13px; font-family: var(--font-sans);
cursor: pointer; flex-shrink: 0;
transition: border-color .15s;
}
.settings-select:focus, .settings-time:focus { outline: none; border-color: var(--ring); }
.settings-slider { flex: 1; accent-color: var(--foreground); cursor: pointer; max-width: 100px; }
.settings-slider-val { font-size: 13px; font-weight: 600; color: var(--foreground); min-width: 20px; text-align: right; }

/* 난이도 세그먼트 컨트롤 */
.seg-group { display: flex; width: 100%; }
.seg-btn {
flex: 1; padding: 8px 4px;
font-size: 13px; font-weight: 500; font-family: var(--font-sans);
cursor: pointer; border: 1px solid var(--card-border);
background: transparent; color: var(--muted-fg);
transition: all .15s; text-align: center; white-space: nowrap;
margin: 0;
}
.seg-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.seg-btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.seg-btn:not(:first-child) { border-left: none; }

.level-btn-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

/* 난이도 선택 활성 */
/* 난이도 버튼 — 1줄 칩 스타일 */
.lv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1.5px solid var(--card-border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  min-height: 38px;
  white-space: nowrap;
}
.lv-btn:hover:not(:disabled) { border-color: var(--ring); background: var(--muted); }
.lv-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.lv-btn.is-locked {
  opacity: .96;
  border-style: dashed;
  background: color-mix(in srgb, var(--muted) 88%, transparent);
  border-color: rgba(245,200,66,.38);
}
.lv-btn.is-locked .lv-btn-label { color: #f8fafc; font-weight: 900; }
.lv-btn.is-locked .lv-btn-lock { color: var(--accent); }
.lv-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: .9;
  flex-shrink: 0;
}
.lv-btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 38px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.lv-btn-lock { display: inline; }
/* 선택 활성 상태 */
.lv-btn.sel-beginner { background: #042f14; border-color: #15803d; color: #bbf7d0; border-width: 2px; }
.lv-btn.sel-easy     { background: #052e16; border-color: #166534; color: #86efac; border-width: 2px; }
.lv-btn.sel-mid      { background: #1c0a00; border-color: #92400e; color: #fde68a; border-width: 2px; }
.lv-btn.sel-hard     { background: #1a1033; border-color: #4c1d95; color: #ddd6fe; border-width: 2px; }
.lv-btn.sel-expert   { background: #1e0a3c; border-color: #5b21b6; color: #c4b5fd; border-width: 2px; }
body.theme-light .lv-btn.sel-beginner,
body.theme-light .lv-btn.sel-easy   { background: #f0fdf4; border-color: #86efac; color: #15803d; }
body.theme-light .lv-btn.sel-mid    { background: #fffbeb; border-color: #fde68a; color: #92400e; }
body.theme-light .lv-btn.sel-hard   { background: #f5f3ff; border-color: #c4b5fd; color: #5b21b6; }
body.theme-light .lv-btn.sel-expert { background: #f5f3ff; border-color: #c4b5fd; color: #5b21b6; }
body.theme-light .lv-btn.is-locked {
  border-color: rgba(146,64,14,.28);
  background: #fff7ed;
}
body.theme-light .lv-btn.is-locked .lv-btn-label {
  color: #9a3412;
}
/* 기존 seg-btn sel- (테마/퀴즈수 등 다른 곳에서 사용) */
.seg-btn.sel-easy   { background: #052e16; border-color: #166534; color: #86efac; z-index:1; }
.seg-btn.sel-mid    { background: #1c0a00; border-color: #92400e; color: #fde68a; z-index:1; }
.seg-btn.sel-expert { background: #1e0a3c; border-color: #5b21b6; color: #c4b5fd; z-index:1; }
body.theme-light .seg-btn.sel-easy   { background: #f0fdf4; border-color: #86efac; color: #15803d; }
body.theme-light .seg-btn.sel-mid    { background: #fffbeb; border-color: #fde68a; color: #92400e; }
body.theme-light .seg-btn.sel-expert { background: #f5f3ff; border-color: #c4b5fd; color: #5b21b6; }

/* 테마 선택 활성 */
.seg-btn.sel-theme  { background: var(--muted); border-color: var(--ring); color: var(--foreground); z-index:1; }

/* 로그인 */
.login-card {
margin: 0 0 12px;
background: var(--card); border: 1px solid var(--card-border);
border-radius: calc(var(--radius) * 1.5); padding: 24px 16px;
text-align: center;
scroll-margin-top: calc(var(--header-height) + var(--safe-top) + 64px);
}
.login-avatar { font-size: 40px; margin-bottom: 10px; }
.login-name { font-size: 16px; font-weight: 600; color: var(--foreground); margin-bottom: 2px; }
.login-email { font-size: 12px; color: var(--muted-fg); margin-bottom: 16px; }
.oauth-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 11px 14px; margin-bottom: 8px;
background: var(--muted); border: 1px solid var(--card-border);
border-radius: var(--radius); color: var(--foreground);
font-size: 13px; font-weight: 500; font-family: var(--font-sans);
cursor: pointer; transition: border-color .15s;
}
.oauth-btn:hover { border-color: var(--ring); }
.oauth-btn.google { border-color: rgba(234,67,53,.3); }
.oauth-btn.naver  { border-color: rgba(3,199,90,.3); }
.oauth-btn.kakao  { border-color: rgba(254,229,0,.3); }
.oauth-btn.email  { border-color: rgba(147,197,253,.3); }
.logout-btn {
padding: 7px 14px; background: transparent;
border: 1px solid rgba(239,68,68,.3); border-radius: var(--radius);
color: var(--destructive); font-size: 12px; font-weight: 600;
font-family: var(--font-sans); cursor: pointer; white-space: nowrap;
}

/* 모달 */
.modal-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
z-index: 200; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal {
background: var(--card); border: 1px solid var(--card-border);
border-radius: calc(var(--radius) * 2); padding: 24px;
width: 100%; max-width: 360px;
animation: fadeUp .2s ease;
}
.modal-title { font-size: 16px; font-weight: 700; color: var(--foreground); margin-bottom: 16px; }
.modal-input {
width: 100%; padding: 10px 12px; margin-bottom: 10px;
background: var(--muted); border: 1px solid var(--card-border);
border-radius: var(--radius); color: var(--foreground);
font-size: 14px; font-family: var(--font-sans); display: block;
outline: none; transition: border-color .15s;
}
.modal-input:focus { border-color: var(--ring); }
.modal-submit {
width: 100%; padding: 11px;
background: var(--foreground); color: var(--background);
border: none; border-radius: var(--radius);
font-size: 14px; font-weight: 600; font-family: var(--font-sans);
cursor: pointer; margin-top: 2px;
}
.modal-close {
width: 100%; padding: 10px; margin-top: 8px;
background: transparent; border: 1px solid var(--card-border);
border-radius: var(--radius); color: var(--muted-fg);
font-size: 13px; font-family: var(--font-sans); cursor: pointer;
}
.modal-error { font-size: 12px; color: var(--destructive); margin-bottom: 8px; min-height: 16px; }

/* 버전 정보 */
.app-version { padding: 16px; text-align: center; font-size: 11px; color: var(--muted-fg); }
.app-info-block {
padding: 14px 16px 16px;
border-top: 1px solid var(--card-border);
margin-top: 4px;
text-align: center;
}
.app-info-version {
font-size: 11px;
color: var(--muted-fg);
margin-bottom: 10px;
}
.app-info-text {
font-size: 11px;
color: var(--muted-fg);
line-height: 1.8;
margin-bottom: 8px;
}
.app-info-text:last-of-type { margin-bottom: 10px; }
.app-info-links {
display: flex;
justify-content: center;
gap: 12px;
font-size: 12px;
flex-wrap: wrap;
}

/* ── 위험 액션 접기 ── */
.settings-danger-group { padding: 0 !important; overflow: hidden; }
.settings-danger-toggle {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.settings-danger-arrow {
font-size: 11px; color: var(--muted-fg); transition: transform .2s;
}
.settings-danger-group.open .settings-danger-arrow { transform: rotate(180deg); }
.settings-danger-body {
display: none;
border-top: 1px solid var(--card-border);
}
.settings-danger-group.open .settings-danger-body { display: block; }

/* ── 로그인 유도 배너 (홈/완료화면) ── */
.login-nudge-banner {
margin: 12px 16px 0;
padding: 16px;
background: linear-gradient(135deg, rgba(245,200,66,.1), rgba(167,139,250,.08));
border: 1px solid rgba(245,200,66,.3);
border-radius: 14px;
display: flex; align-items: center; gap: 12px;
}
.login-nudge-icon { font-size: 28px; flex-shrink: 0; }
.login-nudge-text { flex: 1; min-width: 0; }
.login-nudge-title { font-size: 14px; font-weight: 700; color: var(--foreground); margin-bottom: 2px; }
.login-nudge-sub { font-size: 12px; color: var(--muted-fg); line-height: 1.4; }
.login-nudge-btn {
padding: 10px 14px; background: var(--accent); color: #000;
border: none; border-radius: var(--radius);
font-size: 12px; font-weight: 700; cursor: pointer;
font-family: var(--font-sans); flex-shrink: 0; white-space: nowrap;
}

/* ── 설정 푸터 ── */
.settings-footer {
margin: 8px 16px 32px;
padding: 20px 16px;
background: var(--card); border: 1px solid var(--card-border);
border-radius: calc(var(--radius) * 1.5);
text-align: center;
}
.settings-footer-logo {
font-size: 15px; font-weight: 700; color: var(--foreground);
margin-bottom: 4px;
}
.settings-footer-version {
font-size: 11px; color: var(--muted-fg); margin-bottom: 12px;
}
.settings-footer-divider {
height: 1px; background: var(--card-border); margin: 12px 0;
}
.settings-footer-row {
font-size: 11px; color: var(--muted-fg); margin-bottom: 4px; line-height: 1.6;
}
.settings-footer-copy {
font-size: 10px; color: var(--muted-fg); line-height: 1.7;
margin-bottom: 12px; word-break: keep-all;
}
.settings-footer-links {
display: flex; align-items: center; justify-content: center; gap: 6px;
flex-wrap: wrap;
}
.settings-footer-links span {
font-size: 11px; color: var(--muted-fg); cursor: pointer;
text-decoration: underline; text-underline-offset: 2px;
-webkit-tap-highlight-color: transparent;
}
.settings-footer-links span:hover { color: var(--foreground); }
.settings-footer-sep { text-decoration: none !important; cursor: default !important; }

/* ── 애니메이션 ── */

/* ── 스와이프 ── */
#quizArea { touch-action: pan-y; }
#page-wrong { touch-action: pan-y; overscroll-behavior-x: none; }
.quiz-card {
transition: border-color .2s;
will-change: transform, opacity;
}
.quiz-card.swipe-out-left  { animation: swipeOutLeft  .22s cubic-bezier(.4,0,1,1) forwards; }
.quiz-card.swipe-out-right { animation: swipeOutRight .22s cubic-bezier(.4,0,1,1) forwards; }
.quiz-card.swipe-in-left   { animation: swipeInLeft   .26s cubic-bezier(0,0,.2,1) forwards; }
.quiz-card.swipe-in-right  { animation: swipeInRight  .26s cubic-bezier(0,0,.2,1) forwards; }
@keyframes swipeOutLeft  { from{transform:translateX(0);opacity:1} to{transform:translateX(-55px);opacity:0} }
@keyframes swipeOutRight { from{transform:translateX(0);opacity:1} to{transform:translateX(55px);opacity:0} }
@keyframes swipeInLeft   { from{transform:translateX(55px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes swipeInRight  { from{transform:translateX(-55px);opacity:0} to{transform:translateX(0);opacity:1} }

/* 히스토리 탐색 표시 */
.history-nav {
display: none; align-items: center; justify-content: center; gap: 6px;
padding: 2px 0 6px; font-size: 11px; font-weight: 600; color: var(--accent);
}
.history-nav.show { display: flex; }
.history-nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--card-border); }
.history-nav-dot.active { background: var(--accent); }

/* ── 이미 푼 문제 오버레이 ── */
.reviewed-badge {
position: absolute; top: 10px; right: 12px;
font-size: 10px; font-weight: 600; letter-spacing: .04em;
color: var(--muted-fg); background: var(--muted);
border: 1px solid var(--card-border); border-radius: 9999px;
padding: 2px 8px; pointer-events: none;
}

/* ── 통계 페이지 ── */
.stats-top {
padding: 0 16px 16px;
}
.stats-score-row {
display: flex; align-items: flex-end; gap: 6px;
margin-bottom: 4px;
}
.stats-pct {
font-size: 42px; font-weight: 700; line-height: 1;
color: var(--foreground); letter-spacing: -0.03em;
}
.stats-pct-unit { font-size: 18px; color: var(--muted-fg); margin-bottom: 4px; }
.stats-detail { font-size: 12px; color: var(--muted-fg); margin-bottom: 12px; }
.stats-streak-row {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
background: var(--muted); border: 1px solid var(--card-border);
border-radius: var(--radius); margin-bottom: 12px;
}
.stats-streak-num { font-size: 22px; font-weight: 700; color: var(--accent); }
.stats-streak-label { font-size: 12px; color: var(--muted-fg); }
.grade-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--muted); border: 1px solid var(--card-border);
border-radius: var(--radius); margin-bottom: 16px;
}
.grade-icon { font-size: 24px; }
.grade-name { font-size: 14px; font-weight: 600; color: var(--foreground); }
.grade-desc { font-size: 11px; color: var(--muted-fg); }

/* 주간 캘린더 */
.weekly-cal {
background: var(--muted); border: 1px solid var(--card-border);
border-radius: var(--radius); padding: 12px; margin-bottom: 16px;
}
.weekly-title { font-size: 10px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted-fg); margin-bottom: 10px; }
.weekly-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.week-label { font-size: 9px; color: var(--muted-fg); font-weight: 500; }
.week-cell {
width: 100%; aspect-ratio: 1;
border-radius: 6px; border: 1px solid var(--card-border);
background: var(--card);
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 600; color: var(--muted-fg);
}
.week-cell.has-data { background: var(--card); color: var(--foreground); border-color: var(--ring); }
.week-cell.perfect  { background: rgba(34,197,94,.15); border-color: var(--success); color: var(--success); }
.week-cell.today    { border-color: var(--accent); }
.week-cell.empty    { color: var(--card-border); }

/* 랭킹 보드 */
.ranking-section {
padding: 0 16px 16px;
}
.ranking-header { font-size: 10px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted-fg); margin-bottom: 10px; }
.ranking-coming {
background: var(--muted); border: 1px solid var(--card-border);
border-radius: var(--radius); padding: 20px;
text-align: center;
}
.ranking-coming .empty-icon { font-size: 28px; margin-bottom: 6px; }
.ranking-coming .empty-title { font-size: 14px; font-weight: 600; color: var(--foreground); margin-bottom: 4px; }
.ranking-coming .empty-sub { font-size: 12px; color: var(--muted-fg); }

body.theme-light .quiz-card { background: #ffffff; }
body.theme-light .settings-group { background: #ffffff; }
body.theme-light .login-card { background: #ffffff; }
body.theme-light .weekly-cal { background: #f0f0f2; }
body.theme-light .week-cell { background: #ffffff; }
body.theme-light .stats-streak-row { background: #f0f0f2; }
body.theme-light .grade-row { background: #f0f0f2; }
body.theme-light .ranking-coming { background: #f0f0f2; }
body.theme-light .wrong-list .wrong-item { border-color: #e4e4e7; }
body.theme-light .header-title { color: #0f1117; }
body.theme-light .header-title span { color: var(--accent); }
body.theme-light .header-date { color: #52525b; }
body.theme-light .tab-bar { background: #ffffff; }
/* 라이트 추가 보완 */
body.theme-light .section-header { border-color: #e4e4e7; }
body.theme-light .section-title { color: #0f1117; }
body.theme-light .page-header { border-color: #e4e4e7; background: #ffffff; }
body.theme-light .card-header { border-color: #e4e4e7; background: #fafafa; }
body.theme-light .context-text { background: rgba(160,92,7,.06); border-color: rgba(160,92,7,.3); color: #374151; }
body.theme-light .question { color: #0f1117; }
body.theme-light .opt { background: #fafafa; border-color: #e4e4e7; color: #0f1117; }
body.theme-light .opt:hover:not(:disabled) { background: #f0f0f2; border-color: #a05c07; }
body.theme-light .opt-num { background: #e4e4e7; color: #52525b; }
body.theme-light .opt.correct { background: rgba(22,163,74,.07); border-color: #16a34a; }
body.theme-light .opt.wrong   { background: rgba(220,38,38,.07); border-color: #dc2626; }
body.theme-light .explanation { background: #f4f4f5; border-color: #e4e4e7; color: #374151; }
body.theme-light .expert-body { background: #f4f4f5; border-color: #e4e4e7; color: #374151; }
body.theme-light .expert-toggle { color: var(--expert-clr); border-color: rgba(124,58,237,.4); background: rgba(124,58,237,.06); }
body.theme-light .expert-toggle:hover { background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.6); }
body.theme-light .result-badge.ok { background: rgba(22,163,74,.1); color: #16a34a; }
body.theme-light .result-badge.no { background: rgba(220,38,38,.1); color: #dc2626; }
body.theme-light .next-btn { background: #0f1117; color: #ffffff; }
body.theme-light .loading-title { color: #0f1117; }
body.theme-light .loading-sub   { color: #52525b; }
body.theme-light .spinner { border-color: #e4e4e7; border-top-color: var(--accent); }
body.theme-light .settings-row { border-color: #e4e4e7; }
body.theme-light .settings-label { color: #0f1117; }
body.theme-light .settings-sub   { color: #52525b; }
body.theme-light .settings-select, body.theme-light .settings-time { background: #f4f4f5; border-color: #e4e4e7; color: #0f1117; }
body.theme-light .modal { background: #ffffff; border-color: #e4e4e7; }
body.theme-light .modal-title { color: #0f1117; }
body.theme-light .modal-input { background: #f4f4f5; border-color: #e4e4e7; color: #0f1117; }
body.theme-light .article-link { background: #f4f4f5; border-color: #e4e4e7; }
body.theme-light .article-link:hover { border-color: var(--accent); background: rgba(160,92,7,.06); }
body.theme-light .article-link-label { color: var(--accent); background: rgba(160,92,7,.08); border-color: rgba(160,92,7,.25); }
body.theme-light .dot           { background: #e4e4e7; }
body.theme-light .dot.ok        { background: var(--success); }
body.theme-light .dot.no        { background: var(--destructive); }
body.theme-light .dot.cur       { background: var(--accent); }
body.theme-light .progress-track { background: #e4e4e7; }
body.theme-light .stats-hero { background: #ffffff; border-color: #e4e4e7; }
body.theme-light .today-result-card { background: #ffffff; border-color: #e4e4e7; }
body.theme-light .stats-section-label { color: #52525b; }
body.theme-light .week-cell-v2 { background: #f4f4f5; border-color: #e4e4e7; }
body.theme-light .result-overlay { background: #f8f8f8; }
body.theme-light .result-hero { border-color: #e4e4e7; }
body.theme-light .result-q-item { background: #f4f4f5; border-color: #e4e4e7; }
body.theme-light .result-goto-btn { background: #0f1117; color: #ffffff; }
body.theme-light .wrong-item-exp { color: #374151; }
body.theme-light .wrong-date-header { color: #52525b; }
body.theme-light .empty-title { color: #0f1117; }
body.theme-light .empty-sub   { color: #52525b; }
body.theme-light .final-wrong-item { background: #f4f4f5; border-color: #e4e4e7; }
body.theme-light .final-streak { background: linear-gradient(135deg,rgba(249,115,22,.08),rgba(245,200,66,.06)); border-color: rgba(249,115,22,.2); }
body.theme-light .final-badge { background: #f0f0f2; border-color: #e4e4e7; color: #374151; }
body.theme-light .stats-rich-card { background: #f4f4f5; border-color: #e4e4e7; }
body.theme-light .stats-week-summary { background: #f4f4f5; border-color: #e4e4e7; }
body.theme-light .stats-today-analysis { background: #f4f4f5; border-color: #e4e4e7; }
body.theme-light .login-nudge-banner { background: linear-gradient(135deg,rgba(160,92,7,.07),rgba(124,58,237,.05)); border-color: rgba(160,92,7,.25); }
body.theme-light .login-nudge-title { color: #0f1117; }
body.theme-light .login-nudge-sub { color: #52525b; }
body.theme-light .tab-item        { color: #52525b; }
body.theme-light .tab-item.active { color: var(--accent); }
body.theme-light .login-name  { color: #0f1117; }
body.theme-light .oauth-btn   { background: #f4f4f5; border-color: #e4e4e7; color: #0f1117; }
body.theme-light .complete-overlay { background: #f8f8f8; }
body.theme-light .complete-score { color: #0f1117; }
body.theme-light .complete-msg   { color: #0f1117; }
body.theme-light .complete-sub   { color: #52525b; }
body.theme-light .complete-btn-primary   { background: #0f1117; color: #ffffff; }
body.theme-light .complete-btn-secondary { border-color: #e4e4e7; color: #52525b; }

/* ── 완료 오버레이 ── */
.complete-overlay {
display: none; position: fixed; inset: 0; z-index: 50;
background: var(--background);
flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 32px;
animation: fadeIn .4s ease;
}
.complete-overlay.show { display: flex; }
.confetti-wrap {
position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.confetti-piece {
position: absolute; width: 8px; height: 8px; border-radius: 2px;
animation: confettiFall linear forwards;
}
.complete-score {
font-size: 72px; font-weight: 700; line-height: 1;
color: var(--foreground); letter-spacing: -0.04em; margin-bottom: 8px;
}
.complete-label { font-size: 13px; color: var(--muted-fg); margin-bottom: 24px; }
.complete-msg { font-size: 22px; font-weight: 700; color: var(--foreground); margin-bottom: 8px; }
.complete-sub { font-size: 14px; color: var(--muted-fg); line-height: 1.6; margin-bottom: 32px; word-break: keep-all; max-width: 280px; }
.complete-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; }
.complete-btn-primary {
padding: 13px; background: var(--foreground); color: var(--background);
border: none; border-radius: var(--radius);
font-size: 14px; font-weight: 600; font-family: var(--font-sans);
cursor: pointer;
}
.complete-btn-secondary {
padding: 12px; background: transparent; color: var(--muted-fg);
border: 1px solid var(--card-border); border-radius: var(--radius);
font-size: 14px; font-family: var(--font-sans); cursor: pointer;
}
@keyframes confettiFall {
0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.wrong-date-header {
font-size: 10px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted-fg);
padding: 14px 0 6px; margin-top: 4px;
}
.wrong-date-header:first-child { padding-top: 0; }

/* ── 통계 페이지 v3 히어로 ── */
.stats-hero-v3 {
padding: 20px 16px 16px;
background: var(--card); border-bottom: 1px solid var(--card-border);
margin-bottom: 16px; text-align: center;
}
.stats-hero-grade-row {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-bottom: 10px;
}
.stats-hero-score-row {
display: flex; align-items: flex-end; justify-content: center; gap: 4px;
margin-bottom: 4px;
}
.stats-week-score {
font-size: 52px; font-weight: 900; line-height: 1;
color: var(--accent); letter-spacing: -0.03em;
}
.stats-week-score-unit {
font-size: 20px; font-weight: 700; color: var(--accent); margin-bottom: 6px;
}
.stats-hero-today-label {
font-size: 14px; font-weight: 700; color: var(--accent);
margin-right: 4px; align-self: flex-end; margin-bottom: 8px;
}
.stats-hero-detail {
font-size: 14px; color: var(--muted-fg); margin-bottom: 6px;
}
.stats-hero-streak {
font-size: 15px; font-weight: 600; color: var(--foreground);
}

/* 성적표 헤더 (라벨 + 더보기) */
.stats-section-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.stats-more-btn {
font-size: 11px; font-weight: 600; color: var(--muted-fg);
background: none; border: 1px solid var(--card-border);
border-radius: 99px; padding: 2px 10px; cursor: pointer;
font-family: var(--font-sans); transition: color .15s, border-color .15s;
}
.stats-more-btn:hover { color: var(--foreground); border-color: var(--ring); }

/* 날짜 레이블 (주간 셀 아래) */
.week-date-label {
font-size: 8px; color: var(--muted-fg); font-weight: 500;
letter-spacing: .01em;
}

/* 날짜별/월간 팝업 모달 */
.stats-modal-overlay {
display: none; position: fixed; inset: 0; z-index: 500;
background: rgba(0,0,0,.55); align-items: flex-end; justify-content: center;
}
.stats-modal-overlay.show { display: flex; }
.stats-modal-sheet {
background: var(--card); border-radius: 18px 18px 0 0;
width: 100%; max-width: 480px; max-height: 80vh;
display: flex; flex-direction: column;
animation: fadeUp .25s ease;
}
.stats-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 16px 12px; border-bottom: 1px solid var(--card-border);
flex-shrink: 0;
}
.stats-modal-title {
font-size: 15px; font-weight: 700; color: var(--foreground);
}
.stats-modal-close {
background: none; border: none; font-size: 16px; cursor: pointer;
color: var(--muted-fg); padding: 10px 12px; font-family: var(--font-sans);
transition: color .15s;
}
.stats-modal-close:hover { color: var(--foreground); }
.stats-modal-body {
overflow-y: auto; padding: 14px 16px; flex: 1;
}

/* day detail row */
.day-detail-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 8px 4px; border-bottom: 1px solid var(--card-border);
}
.day-detail-row:last-child { border-bottom: none; }

/* 월간 성적표 rows */
.monthly-row {
display: grid; grid-template-columns: 20px 28px 1fr 48px;
align-items: center; gap: 8px;
padding: 8px 4px; border-bottom: 1px solid var(--card-border);
border-radius: 6px; transition: background .12s;
}
.monthly-row:last-child { border-bottom: none; }
.monthly-row:hover { background: var(--muted); }
.monthly-row.today { background: rgba(245,200,66,.06); }
.monthly-day-name { font-size: 11px; color: var(--muted-fg); font-weight: 500; }
.monthly-day-num  { font-size: 13px; font-weight: 700; color: var(--foreground); }
.monthly-day-num.today { color: var(--accent); }
.monthly-result   { font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.monthly-result.done    { color: var(--success); }
.monthly-result.perfect { color: var(--success); }
.monthly-result.empty   { opacity: .4; }
.monthly-score    { font-size: 12px; font-weight: 700; color: var(--accent); text-align: right; }
/* 월간 캘린더 그리드 */
.cal-grid-heads {
display: grid; grid-template-columns: repeat(7, 1fr);
margin-bottom: 4px;
}
.cal-head {
text-align: center; font-size: 11px; font-weight: 700;
color: var(--muted-fg); padding: 4px 0; letter-spacing: .04em;
}
.cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.cal-cell {
aspect-ratio: 1; border-radius: 8px;
border: 1px solid var(--card-border); background: var(--muted);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 1px; cursor: default; transition: background .15s;
}
.cal-cell.done    { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); cursor: pointer; }
.cal-cell.incomplete { background: rgba(245,200,66,.1); border-color: rgba(245,200,66,.3); color: var(--accent); cursor: pointer; }
.cal-cell.perfect { background: rgba(34,197,94,.22); border-color: var(--success); cursor: pointer; }
.cal-cell.missed  { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: #ef4444; }
.cal-cell.today   { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cal-cell.empty   { background: transparent; border-color: transparent; }
.cal-cell.done:hover, .cal-cell.incomplete:hover, .cal-cell.perfect:hover { filter: brightness(1.1); }
.cal-day   { font-size: 11px; font-weight: 700; color: var(--foreground); line-height: 1; }
.cal-cell.today .cal-day { color: var(--accent); }
.cal-cell.empty .cal-day { display: none; }
.cal-score { font-size: 8px; font-weight: 600; color: var(--success); line-height: 1; }

/* ── 통계 페이지 v3 히어로 ── */
.stats-hero {
padding: 20px 16px 16px;
background: var(--card); border-bottom: 1px solid var(--card-border);
margin-bottom: 16px;
}
.stats-hero-row { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.stats-pct-big {
font-size: 38px; font-weight: 700; line-height: 1;
color: var(--foreground); letter-spacing: -0.03em;
}
.stats-pct-sym { font-size: 20px; color: var(--muted-fg); margin-bottom: 3px; }
.stats-pct-detail {
font-size: 12px; color: var(--muted-fg); margin-bottom: 4px; align-self: flex-end;
}
.stats-sub-row {
margin-bottom: 10px;
}
.stats-streak-txt {
font-size: 13px; font-weight: 600; color: var(--foreground);
}
.stats-grade-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--muted); border: 1px solid var(--card-border);
border-radius: var(--radius);
}
.stats-grade-icon { font-size: 22px; }
.stats-grade-name { font-size: 14px; font-weight: 700; color: var(--foreground); }
.stats-grade-desc { font-size: 11px; color: var(--muted-fg); }

.stats-section { padding: 0 16px 16px; }
.stats-section-label {
font-size: 12px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted-fg);
}
.stats-section > .stats-section-label { margin-bottom: 10px; }

/* 주간 캘린더 v2 */
.weekly-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.week-col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.week-day-label { font-size: 9px; color: var(--muted-fg); font-weight: 600; letter-spacing: .03em; }
.week-cell-v2 {
width: 100%; aspect-ratio: 1; border-radius: 8px;
border: 1px solid var(--card-border); background: var(--muted);
display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700; color: var(--muted-fg);
transition: all .2s;
}
.week-cell-v2.done    { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.4); color: var(--success); }
.week-cell-v2.incomplete { background: rgba(245,200,66,.1); border-color: rgba(245,200,66,.4); color: var(--accent); }
.week-cell-v2.perfect { background: rgba(34,197,94,.2); border-color: var(--success); color: var(--success); }
.week-cell-v2.today   { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.week-cell-v2.empty   { opacity: .4; }
.week-cell-v2.selected {
background: rgba(245,200,66,.18) !important;
border-color: var(--accent) !important;
box-shadow: 0 0 0 2px var(--accent) !important;
color: var(--accent) !important;
transform: scale(1.08);
}
body.theme-light .week-cell-v2.selected {
background: rgba(160,92,7,.12) !important;
border-color: var(--accent) !important;
box-shadow: 0 0 0 2px var(--accent) !important;
color: var(--accent) !important;
}

/* ── 풍부한 통계 CSS ── */
.stats-rich-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin-bottom: 4px;
}
.stats-rich-card {
background: var(--muted); border: 1px solid var(--card-border);
border-radius: 12px; padding: 16px 14px; text-align: center;
}
.stats-rich-val {
font-size: 28px; font-weight: 800; color: var(--foreground);
line-height: 1.1; margin-bottom: 4px;
}
.stats-rich-val.accent { color: var(--accent); }
.stats-rich-label { font-size: 12px; color: var(--muted-fg); font-weight: 500; }

.stats-week-summary {
background: var(--muted); border: 1px solid var(--card-border);
border-radius: 12px; padding: 16px 14px;
}
.stats-week-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; margin-bottom: 8px;
}
.stats-week-row-label { color: var(--muted-fg); font-weight: 500; }
.stats-week-row-val { font-weight: 700; color: var(--foreground); }
.stats-week-row-val.accent { color: var(--accent); }
.stats-week-progress-track {
height: 6px; background: var(--card-border); border-radius: 9999px; overflow: hidden;
}
.stats-week-progress-fill {
height: 100%; background: var(--foreground); border-radius: 9999px;
transition: width .5s ease;
}
.stats-week-progress-fill.accent { background: var(--accent); }

.stats-today-analysis {
background: var(--muted); border: 1px solid var(--card-border);
border-radius: 12px; padding: 16px 14px;
}
.stats-analysis-row {
display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.stats-analysis-row:last-of-type { margin-bottom: 0; }
.stats-analysis-icon {
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.stats-analysis-icon.ok { background: var(--success); color: #fff; }
.stats-analysis-icon.no { background: var(--destructive); color: #fff; }
.stats-analysis-label { font-size: 13px; color: var(--muted-fg); width: 30px; flex-shrink: 0; }
.stats-analysis-bar-wrap {
flex: 1; height: 8px; background: var(--card-border); border-radius: 9999px; overflow: hidden;
}
.stats-analysis-bar {
height: 100%; border-radius: 9999px; transition: width .5s ease;
}
.stats-analysis-bar.ok { background: var(--success); }
.stats-analysis-bar.no { background: var(--destructive); }
.stats-analysis-val { font-size: 12px; font-weight: 700; color: var(--foreground); width: 36px; text-align: right; flex-shrink: 0; }
.stats-analysis-streak {
margin-top: 12px; padding-top: 10px;
border-top: 1px solid var(--card-border);
font-size: 13px; color: var(--muted-fg); text-align: center;
}
.stats-analysis-streak strong { color: var(--accent); }

/* 랭킹 */
.ranking-card {
background: var(--muted); border: 1px solid var(--card-border);
border-radius: var(--radius); padding: 24px 16px; text-align: center;
}
.ranking-icon-row { display: flex; justify-content: center; gap: -8px; margin-bottom: 12px; }
.ranking-icon { font-size: 28px; }
.ranking-card-title { font-size: 15px; font-weight: 700; color: var(--foreground); margin-bottom: 6px; }
.ranking-card-sub { font-size: 12px; color: var(--muted-fg); line-height: 1.6; margin-bottom: 14px; word-break: keep-all; }

/* ══ 결과 오버레이 ══ */
.result-overlay {
display: none; position: fixed; top: 0; left: 0; right: 0;
bottom: 0;
z-index: 110;
background: var(--background);
overflow-y: auto;
animation: overlayIn .35s cubic-bezier(.2,.8,.3,1);
padding-bottom: calc(var(--safe-bottom) + 20px);
}
.result-overlay.show { display: block; }
@keyframes overlayIn {
from { opacity: 0; transform: translateY(40px); }
to   { opacity: 1; transform: translateY(0); }
}
.result-overlay-inner {
min-height: 100vh; padding: calc(var(--safe-top) + 4px) 0 40px;
display: flex; flex-direction: column;
position: relative;
}
.result-confetti-wrap {
position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.result-hero {
text-align: center; padding: 52px 24px 28px;
position: relative; z-index: 1;
border-bottom: 1px solid var(--card-border);
}
.result-emoji { font-size: 52px; margin-bottom: 12px; animation: emojiPop .5s .2s both cubic-bezier(.2,.8,.3,1); }
@keyframes emojiPop {
from { transform: scale(0); opacity: 0; }
to   { transform: scale(1); opacity: 1; }
}
.result-score-row { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 8px; }
.result-score-num {
font-size: 64px; font-weight: 700; line-height: 1;
color: var(--foreground); letter-spacing: -0.04em;
}
.result-score-total { font-size: 24px; color: var(--muted-fg); }
.result-msg { font-size: 20px; font-weight: 700; color: var(--foreground); margin-bottom: 6px; }
.result-rate { font-size: 13px; color: var(--muted-fg); }

/* 문제 요약 */
.result-summary {
padding: 16px; position: relative; z-index: 1;
}
.result-summary-title {
font-size: 10px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted-fg); margin-bottom: 10px;
}
.result-q-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px; border-radius: var(--radius);
background: var(--muted); border: 1px solid var(--card-border);
margin-bottom: 8px;
animation: itemIn .3s ease both;
}
@keyframes itemIn {
from { opacity: 0; transform: translateX(-8px); }
to   { opacity: 1; transform: translateX(0); }
}
.result-q-icon {
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.result-q-icon.ok { background: rgba(34,197,94,.15); color: var(--success); }
.result-q-icon.no { background: rgba(239,68,68,.15);  color: var(--destructive); }
.result-q-text { font-size: 13px; color: var(--foreground); line-height: 1.45; flex: 1; word-break: keep-all; }
.result-q-answer { font-size: 11px; color: var(--muted-fg); margin-top: 3px; }
.result-goto-btn {
margin: 8px 16px 32px;
padding: 14px; border-radius: var(--radius);
background: var(--foreground); color: var(--background);
font-size: 15px; font-weight: 600; text-align: center;
cursor: pointer; position: relative; z-index: 1;
transition: opacity .15s;
}
.result-goto-btn:hover { opacity: .85; }
.result-goto-btn:active { opacity: .7; }

/* 오늘 결과 섹션 */
.today-result-section {
padding: 16px 16px 0; margin-bottom: 4px;
}
.today-result-card {
background: var(--card); border: 1px solid var(--card-border);
border-radius: calc(var(--radius)*1.5); overflow: hidden;
}
.today-result-header {
padding: 12px 14px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--card-border);
}
.today-result-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-fg); }
.today-result-score { font-size: 14px; font-weight: 700; color: var(--foreground); }
.today-result-items { padding: 8px 10px; }
.today-q-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 4px; border-bottom: 1px solid var(--card-border);
}
.today-q-row:last-child { border-bottom: none; }
.today-q-dot {
width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700;
}
.today-q-dot.ok { background: rgba(34,197,94,.15); color: var(--success); }
.today-q-dot.no { background: rgba(239,68,68,.15);  color: var(--destructive); }
.today-q-text { font-size: 12px; color: var(--muted-fg); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.no-today { padding: 20px; text-align: center; font-size: 13px; color: var(--muted-fg); }

/* ══════════════════════════════════════
오프닝 스플래시
══════════════════════════════════════ */
#splash {
position: fixed; inset: 0; z-index: 999;
background: var(--background);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 0; padding: 28px 20px 24px;
cursor: pointer;
transition: opacity .7s cubic-bezier(.4,0,.2,1);
}
#splash.fade-out { opacity: 0; pointer-events: none; }

.splash-eyebrow {
font-size: 10px; font-weight: 700; letter-spacing: .2em;
text-transform: uppercase; color: var(--accent);
margin-bottom: 6px;
opacity: 0; transform: translateY(14px);
animation: splashUp .55s .05s cubic-bezier(.2,.8,.3,1) forwards;
}
.splash-title {
font-family: var(--font-serif);
font-size: 38px; font-weight: 700; line-height: 1.1;
color: var(--foreground); text-align: center;
letter-spacing: -0.03em; margin-bottom: 6px;
opacity: 0; transform: translateY(16px);
animation: splashUp .55s .18s cubic-bezier(.2,.8,.3,1) forwards;
}
.splash-title span { color: var(--accent); }
.splash-date-row {
display: flex; align-items: center; gap: 8px;
margin-bottom: 20px;
opacity: 0; transform: translateY(10px);
animation: splashUp .5s .32s cubic-bezier(.2,.8,.3,1) forwards;
}
.splash-date {
font-size: 12px; color: var(--muted-fg); font-weight: 600;
letter-spacing: .04em;
}
.splash-badge {
font-size: 10px; font-weight: 700; padding: 2px 7px;
border-radius: 99px; letter-spacing: .04em;
}
.splash-badge.today {
background: rgba(34,197,94,.15); color: #22c55e;
}
.splash-badge.old {
background: rgba(239,68,68,.12); color: #ef4444;
}
#splashCanvas {
width: 320px; height: 320px;   /* 모바일 360px 화면에서 여백 확보 */
border-radius: 50%;
opacity: 0; transform: scale(.9);
animation: splashCanvasIn .9s .5s cubic-bezier(.2,.8,.3,1) forwards;
display: block; margin: 0 auto;
}
.splash-hint {
font-size: 11px; color: var(--muted-fg); letter-spacing: .06em;
margin-top: 18px;
opacity: 0; animation: splashPulse 2s 1.6s ease-in-out infinite;
}
@keyframes splashUp {
to { opacity: 1; transform: translateY(0); }
}
@keyframes splashCanvasIn {
to { opacity: 1; transform: scale(1); }
}
@keyframes splashPulse {
0%,100% { opacity: .25; } 50% { opacity: .8; }
}

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeUp  { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ══ 온보딩 오버레이 ══ */
.onboarding-overlay {
display: none; position: fixed; inset: 0; z-index: 300;
background: var(--background);
overflow-y: auto;
animation: fadeIn .3s ease;
}
.onboarding-overlay.show { display: block; }
.ob-step {
width: 100%; max-width: 400px;
margin: 0 auto;
padding: 32px 20px 40px;
min-height: 100vh;
display: flex; flex-direction: column;
box-sizing: border-box;
}
.ob-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.ob-title {
font-size: 22px; font-weight: 900; color: var(--foreground);
margin-bottom: 6px; letter-spacing: -.02em; line-height: 1.3;
}
.ob-sub { font-size: 14px; color: var(--muted-fg); margin-bottom: 24px; line-height: 1.6; }
.ob-choices { display: flex; flex-direction: column; gap: 10px; }
.ob-choice {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-radius: var(--radius);
border: 1.5px solid var(--card-border);
background: var(--card); cursor: pointer;
font-size: 14px; font-weight: 500; color: var(--foreground);
transition: border-color .15s, background .15s;
-webkit-tap-highlight-color: transparent;
text-align: left; width: 100%; font-family: var(--font-sans);
}
.ob-choice:hover { border-color: var(--ring); background: var(--muted); }
.ob-choice.selected { border-color: var(--accent); background: rgba(245,200,66,.06); }
.ob-lv-card {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px; border-radius: var(--radius);
border: 1.5px solid var(--card-border);
background: var(--card); cursor: pointer;
text-align: left; width: 100%; font-family: var(--font-sans);
transition: border-color .15s, background .15s;
-webkit-tap-highlight-color: transparent;
}
.ob-lv-card:hover { border-color: var(--ring); background: var(--muted); }
.ob-lv-card.selected { border-color: var(--accent); background: rgba(245,200,66,.06); }
.ob-lv-card-icon { font-size: 28px; flex-shrink: 0; }
.ob-lv-card-body { flex: 1; }
.ob-lv-card-name { font-size: 15px; font-weight: 700; color: var(--foreground); margin-bottom: 2px; }
.ob-lv-card-desc { font-size: 12px; color: var(--muted-fg); line-height: 1.6; }
.ob-lv-card-check { font-size: 16px; color: var(--accent); opacity: 0; transition: opacity .15s; flex-shrink:0; }
.ob-lv-card.selected .ob-lv-card-check { opacity: 1; }
.ob-choice-num {
min-width: 28px; height: 28px; border-radius: var(--radius);
background: var(--muted); color: var(--muted-fg);
font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ob-choice.selected .ob-choice-num { background: var(--accent); color: var(--accent-fg); }
.ob-progress { display: flex; gap: 6px; margin-bottom: 20px; }
.ob-prog-dot {
height: 3px; flex: 1; border-radius: 9999px;
background: var(--card-border); transition: background .3s;
}
.ob-prog-dot.done { background: var(--accent); }
.ob-result-level {
font-size: 32px; font-weight: 900; color: var(--accent);
margin: 12px 0 6px; letter-spacing: -.03em;
}
.ob-result-desc { font-size: 14px; color: var(--muted-fg); line-height: 1.65; margin-bottom: 24px; }
.ob-next-btn {
width: 100%; padding: 14px; border: none; border-radius: var(--radius);
background: var(--foreground); color: var(--background);
font-size: 15px; font-weight: 700; font-family: var(--font-sans);
cursor: pointer; margin-top: 16px; transition: opacity .15s;
}
.ob-next-btn:hover { opacity: .85; }
.ob-next-btn:disabled { opacity: .4; cursor: not-allowed; }
.ob-skip { font-size: 12px; color: var(--muted-fg); text-align: center; margin-top: 14px; cursor: pointer; }
.ob-skip:hover { color: var(--foreground); }

/* 튜토리얼 애니메이션 */
.tut-highlight {
position: relative;
}
.tut-highlight::after {
content: '';
position: absolute;
inset: -3px;
border: 2px solid var(--accent);
border-radius: calc(var(--radius) + 3px);
animation: tutPulse 1.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes tutPulse {
0%,100% { opacity: 1; transform: scale(1); }
50%      { opacity: .5; transform: scale(1.02); }
}
.tut-tooltip {
background: var(--accent);
color: var(--accent-fg);
font-size: 13px; font-weight: 700;
padding: 10px 14px; border-radius: 12px;
text-align: center;
animation: fadeUp .3s ease;
line-height: 1.55;
white-space: pre-line;
position: relative;
margin-top: 0;
}
.tut-tooltip::before {
content: '';
position: absolute;
top: -7px; left: 24px;
border: 7px solid transparent;
border-bottom-color: var(--accent);
border-top: none;
}
.tut-card {
background: var(--card);
border: 1px solid var(--card-border);
border-radius: calc(var(--radius) * 1.5);
padding: 14px;
margin-bottom: 10px;
}
.tut-step-label {
display: inline-block;
background: rgba(245,200,66,.15);
color: var(--accent);
font-size: 10px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
padding: 3px 10px; border-radius: 999px;
margin-bottom: 10px;
}

/* 완료 축하 애니메이션 */
.ob-celebrate {
text-align: center;
}
.ob-celebrate-emoji {
font-size: 64px;
animation: bounceIn .6s cubic-bezier(.2,.8,.3,1) both;
display: block;
margin-bottom: 12px;
}
@keyframes bounceIn {
0%   { transform: scale(0); opacity: 0; }
60%  { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}
.ob-confetti-wrap {
position: absolute; inset: 0;
pointer-events: none; overflow: hidden;
}

/* 알림 유도 카드 */
.ob-notif-card {
background: linear-gradient(135deg, rgba(245,200,66,.12), rgba(245,200,66,.04));
border: 1.5px solid rgba(245,200,66,.3);
border-radius: calc(var(--radius) * 1.5);
padding: 18px 16px;
margin: 16px 0;
text-align: center;
}

/* 로그인 유도 */
.ob-login-benefit {
display: flex; align-items: center; gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--card-border);
font-size: 13px; color: var(--muted-fg);
}
.ob-login-benefit:last-child { border-bottom: none; }
.ob-login-benefit-icon { font-size: 20px; flex-shrink: 0; }

.ob-nickname-input {
width: 100%; padding: 14px 16px;
font-size: 18px; font-weight: 700; text-align: center;
background: var(--card); border: 2px solid var(--card-border);
border-radius: var(--radius); color: var(--foreground);
font-family: var(--font-sans);
transition: border-color .2s;
}
.ob-nickname-input:focus {
outline: none; border-color: var(--accent);
}
.ob-nickname-input::placeholder { color: var(--muted-fg); font-weight: 400; font-size: 15px; }

@media (max-width: 420px) {
  .page-content-intro {
    flex-direction: column;
    align-items: stretch;
  }
  .wrong-tab-bar {
    width: max-content;
    max-width: calc(100vw - 32px);
    justify-content: flex-start;
  }
  .wrong-tab {
    flex: 0 0 auto;
    width: max-content;
    min-width: 0;
  }
  .settings-nav {
    margin-right: -16px;
    padding-right: 16px;
  }
  .result-score-num { font-size: 54px; }
  .final-score { font-size: 60px; }
}