/* ── 보기 설정(js/view.js, 2026-10-20 「어두워서 안 보인다」는 문의): 밝기 셋 · 글자 크기 셋 ──
   style.css 뒤에 읽힌다. html[data-theme] · html[data-size] 가 없으면(기본 · 어둡게 · 보통) 아무것도 바꾸지 않는다. */
.view-pop { flex-direction: column; align-items: stretch; gap: 8px; width: min(calc(100vw - 16px), 340px); overflow-y: auto; overscroll-behavior: contain; }
.view-pop > * { flex: none; } /* 창이 낮아져도 줄이 찌그러지지 않고 굴러가게 */
.vp-title { font-family: var(--title-font); font-size: 14px; color: var(--text); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.vp-vol input { flex: 1; min-width: 110px; accent-color: var(--accent); }
.vp-vol b { min-width: 30px; text-align: right; color: var(--text); font-weight: 400; }
.vp-row > span { min-width: 66px; white-space: nowrap; }
.vol-pop .pill { padding: 3px 10px; }
.vp-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 글자 크기: 화면 전체를 한 배율로(칩·단추·상단 줄까지 같이 커진다) */
html[data-size="1"] #app, html[data-size="1"] .overlay-inner, html[data-size="1"] .tip, html[data-size="1"] .vol-pop { zoom: 1.12; }
html[data-size="2"] #app, html[data-size="2"] .overlay-inner, html[data-size="2"] .tip, html[data-size="2"] .vol-pop { zoom: 1.25; }
/* 크게 보면 폰 폭에서 이름 칸 줄이 좁아진다: 이름 칸을 한 줄로 따로 두고, 성별·태어나기는 아랫줄에 */
@media (max-width: 560px) {
  html[data-size] .field { flex-wrap: wrap; }
  html[data-size] .field input { flex-basis: 100%; }
  html[data-size] .field .btn { flex: 1; }
}
html[data-size] .gender button { white-space: nowrap; }

/* 또렷하게(어둡게 + 또렷하게): 어두운 바탕은 그대로, 흐린 글자·선을 밝게 */
html[data-contrast]:not([data-theme="light"]) { --text: #f8f2e6; --dim: #d4cbbb; --faint: #a89f90; --line: #4c463e; --panel: #1e1c19; }
html[data-contrast]:not([data-theme="light"]) .card.quiet p { color: #ddd5c6; }

/* 밝게: 한지 바탕에 먹 글자 */
html[data-theme="light"] {
  --bg: #f4efe4; --panel: #fffaf0; --line: #d6ccb8; --text: #2a241c; --dim: #5a5143; --faint: #6e6352;
  --accent: #9a6b14; --jade: #3b6a55; --blood: #b03a28;
  --g-hp: #3f9a42; --g-mind: #2f7cc0; --g-power: #c55a26; --g-fame: #7a5fc8; --g-money: #a87a1e;
  color-scheme: light;
}
html[data-theme="light"] .btn { color: #fffaf0; }
html[data-theme="light"] .btn.ghost { color: var(--text); }
html[data-theme="light"] .btn.resume { background: rgba(59, 106, 85, .1); color: var(--jade); }
html[data-theme="light"] .carry { border-color: #b7cbbd; background: #eef4ef; }
html[data-theme="light"] .book-big { background: linear-gradient(90deg, rgba(154, 107, 20, .12), rgba(154, 107, 20, .03)); border-color: rgba(154, 107, 20, .5); }
html[data-theme="light"] .hud { background: rgba(244, 239, 228, .95); }
html[data-theme="light"] .realm.r4 { color: #a87a1e; }
html[data-theme="light"] .realm.r5 { color: #b07a0a; text-shadow: none; }
/* 밝은 바탕: 빛 무리 대신 짙은 청은 · 자청으로(금빛 r4·r5 위로 읽히게) */
html[data-theme="light"] .realm.r6 { color: #2f4f9a; text-shadow: 0 0 1px rgba(184, 134, 11, .6); }
html[data-theme="light"] .realm.r7 { color: #5a2f9a; text-shadow: 0 0 1px rgba(184, 134, 11, .6); }

/* 능력치 막대 */
html[data-theme="light"] .stat.s-power { --c: #c55a26; }
html[data-theme="light"] .stat.s-hp { --c: #3f9a42; }
html[data-theme="light"] .stat.s-mind { --c: #2f7cc0; }
html[data-theme="light"] .stat.s-money { --c: #a87a1e; }
html[data-theme="light"] .stat.s-fame { --c: #7a5fc8; }
html[data-theme="light"] .stat::before { background: rgba(0, 0, 0, .08); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
html[data-theme="light"] .stat i { box-shadow: none; }
html[data-theme="light"] .stat.low b { color: #b03a28; }
html[data-theme="light"] .stat small.max em.why { color: #a3301c; background: rgba(196, 83, 63, .14); }
html[data-theme="light"] .stat small.tier { color: #8a6512; }
/* 띠(대형 사건 · 기억 갈래 · 인연 · 명성)와 이름 색: 어두운 바탕용 옅은 빛깔이 한지 바탕에서 거의 안 보이던 일(2026-10-21 점검) — 바탕 대비 4.5 넘게 */
html[data-theme="light"] .arc-tag { color: #5e3f99; border-color: rgba(94, 63, 153, .45); background: rgba(94, 63, 153, .06); }
html[data-theme="light"] .arc-tag.fresh { color: #4a2a85; border-color: rgba(94, 63, 153, .8); background: rgba(94, 63, 153, .14); }
html[data-theme="light"] .arc-tag.mem-road { color: #34489a; border-color: rgba(52, 72, 154, .45); background: rgba(52, 72, 154, .06); }
html[data-theme="light"] .arc-tag.mem-luck { color: #2a6a4e; border-color: rgba(42, 106, 78, .45); background: rgba(42, 106, 78, .06); }
html[data-theme="light"] .bond-tag { color: #a13f1f; border-color: rgba(161, 63, 31, .45); background: rgba(161, 63, 31, .06); }
html[data-theme="light"] .bond-tag.fresh { color: #8a3212; border-color: rgba(161, 63, 31, .8); background: rgba(161, 63, 31, .14); }
html[data-theme="light"] .fame-tag { color: #7a5a10; border-color: rgba(138, 101, 18, .55); background: rgba(138, 101, 18, .08); }
html[data-theme="light"] .nm { color: #8a4f12; }
html[data-theme="light"] .pl { color: #2f6b52; }
html[data-theme="light"] .sc { color: #3c4f9a; }

/* 칩 */
html[data-theme="light"] .chip.t-good { color: #4a4234; }
html[data-theme="light"] .chip.t-bad { color: #a0442f; border-color: #e3b8ab; }
html[data-theme="light"] .chip.t-odd { color: #3b6a55; border-color: #b7cbbd; }
html[data-theme="light"] .chip.close { border-color: #d9c27f; }
html[data-theme="light"] .chip.foe { border-color: #e3a99a; color: #a83a26; }
html[data-theme="light"] .chip.rare { border-color: #c9a24a; color: #8a6512; }

/* 삽화 아래 그늘과 선택지 */
html[data-theme="light"] .frame::after { background: linear-gradient(transparent, rgba(244, 239, 228, .85)); }
html[data-theme="light"] .choice:hover:not(:disabled):not(.spent) { border-color: #b9ab90; background: #f6eedc; }
html[data-theme="light"] .choice .needs { border-color: #b7cbbd; }
html[data-theme="light"] .choice .needs.recall { color: #8a6512; border-color: #d9c27f; }
html[data-theme="light"] .choice .needs.evil { color: #a8382a; border-color: #e0a89c; }
html[data-theme="light"] .delta.inf { background: #f6e1dc; color: #a8382a; box-shadow: inset 0 0 0 1px #e0a89c; }
html[data-theme="light"] .delta-note { color: #a8382a; }
html[data-theme="light"] .choice .needs.odds-good { color: #2f7a2f; border-color: #a8cfa8; }
html[data-theme="light"] .choice .needs.odds-bad { color: #a3301c; border-color: #e3a99a; }
html[data-theme="light"] .choice .seen { border-color: rgba(154, 107, 20, .5); }
html[data-theme="light"] .memories .choice.on, html[data-theme="light"] .carry-pick .choice.on { background: color-mix(in srgb, var(--accent) 14%, #fff); }

/* 결과 칩 */
html[data-theme="light"] .delta { background: #ebe3d3; }
html[data-theme="light"] .delta.up { background: #e2efe0; color: #2f6b2c; }
html[data-theme="light"] .delta.down { background: #f4e1db; color: #9a3e2a; }
html[data-theme="light"] .delta.big { background: #f6e9c6; color: #7a5a10; border-color: #d9c27f; }
html[data-theme="light"] .delta.art { background: #e1ebf0; color: #2e5f78; }
html[data-theme="light"] .delta.hurt { background: #f6dcd5; color: #a3301c; }
html[data-theme="light"] .delta.cap { background: #e6e3dd; color: #77736b; }
html[data-theme="light"] .delta.memory { background: #f6ecd0; color: #7a5a10; border-color: #d9c27f; }
html[data-theme="light"] .delta.person, html[data-theme="light"] .delta.ps-ok { background: #e9e7f0; color: #4b4870; }
html[data-theme="light"] .delta.ps-new { background: #e0e9f6; color: #2c5590; }
html[data-theme="light"] .delta.ps-close { background: #e0efe6; color: #2f6b4c; }
html[data-theme="light"] .delta.ps-cold { background: #ebebeb; color: #666; }
html[data-theme="light"] .delta.ps-foe { background: #f6dcd5; color: #a3301c; }
html[data-theme="light"] .delta.ps-gone { background: #eeeae2; color: #6f6656; }
html[data-theme="light"] .delta.ps-dead { background: #e6e2da; color: #857a68; }
html[data-theme="light"] .delta.feat { background: #fbefc9; color: #6b4a05; border-color: #c9a24a; box-shadow: 0 0 6px rgba(201, 162, 74, .35); }
html[data-theme="light"] .chip.feat.fresh { border-color: #c9a24a; box-shadow: 0 0 6px rgba(201, 162, 74, .35); }
html[data-theme="light"] .feat-new { background: #c9a24a; color: #fff; }

html[data-theme="light"] .delta.gear { background: #f3eddd; color: #4f4430; border-color: #d6ccb8; } /* 병기 칩 — 등급 색이 뒤에서 덮는다 */
/* 품계 색(흰 · 파랑 · 보라 · 금 · 저주): 밝은 바탕에서 읽히게 짙게 */
html[data-theme="light"] .tier-common, html[data-theme="light"] .chip.tier-common, html[data-theme="light"] .arts-table tr.tier-common b, html[data-theme="light"] .choice .needs.tier-common { color: #3a342b; }
html[data-theme="light"] .chip.tier-common, html[data-theme="light"] .choice .needs.tier-common { border-color: #d6ccb8; }
html[data-theme="light"] .tier-rare, html[data-theme="light"] .chip.tier-rare, html[data-theme="light"] .delta.tier-rare, html[data-theme="light"] .arts-table tr.tier-rare b, html[data-theme="light"] .choice .needs.tier-rare { color: #2f63b8; }
html[data-theme="light"] .chip.tier-rare, html[data-theme="light"] .choice .needs.tier-rare { border-color: #9db7e0; }
html[data-theme="light"] .delta.tier-rare { background: #e3ebf8; }
html[data-theme="light"] .tier-fine, html[data-theme="light"] .chip.tier-fine, html[data-theme="light"] .delta.tier-fine, html[data-theme="light"] .choice .needs.tier-fine { color: #2f7a2c; }
html[data-theme="light"] .chip.tier-fine, html[data-theme="light"] .choice .needs.tier-fine { border-color: #a6d2a2; }
html[data-theme="light"] .delta.tier-fine { background: #e4f3e2; }html[data-theme="light"] .tier-epic, html[data-theme="light"] .chip.tier-epic, html[data-theme="light"] .delta.tier-epic, html[data-theme="light"] .arts-table tr.tier-epic b, html[data-theme="light"] .choice .needs.tier-epic { color: #6b3fb0; }
html[data-theme="light"] .chip.tier-epic, html[data-theme="light"] .choice .needs.tier-epic { border-color: #c3a8e8; background: rgba(120, 80, 200, .07); box-shadow: none; }
html[data-theme="light"] .delta.tier-epic { background: #efe6fb; border-color: #c3a8e8; }
html[data-theme="light"] .tier-curse, html[data-theme="light"] .chip.tier-curse, html[data-theme="light"] .delta.tier-curse { color: #b33422; }
html[data-theme="light"] .chip.tier-curse { border-color: #e3a99a; background: rgba(200, 60, 40, .06); }
html[data-theme="light"] .delta.tier-curse { background: #f9e0da; border-color: #e3a99a; }
html[data-theme="light"] .tier-legend, html[data-theme="light"] .chip.tier-legend, html[data-theme="light"] .delta.tier-legend, html[data-theme="light"] .arts-table tr.tier-legend b, html[data-theme="light"] .choice .needs.tier-legend { color: #a86a0a; }
html[data-theme="light"] .chip.tier-legend, html[data-theme="light"] .delta.tier-legend, html[data-theme="light"] .choice .needs.tier-legend { border-color: #e0b46a; background: rgba(240, 176, 74, .14); box-shadow: none; }

/* 겹창 · 끝 화면 · 그 밖 */
html[data-theme="light"] .overlay { background: rgba(70, 58, 40, .5); }
html[data-theme="light"] .verdict { border-color: #d9c27f; background: #fbf1d8; }
html[data-theme="light"] .verdict .score { color: #9a6b14; }
html[data-theme="light"] .ending { background: rgba(0, 0, 0, .03); }
html[data-theme="light"] .tip { background: #fffaf0; border-color: #d9c27f; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
html[data-theme="light"] .vol-pop { background: #fffaf0; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
html[data-theme="light"] .person .face { background: #ece4d4; }
html[data-theme="light"] .person.foe b { color: #a83a26; }
html[data-theme="light"] .term { text-decoration-color: rgba(154, 107, 20, .6); }
html[data-theme="light"] .luck.bad { color: #a0442f; }
html[data-theme="light"] .gender button.on { background: rgba(154, 107, 20, .08); }
html[data-theme="light"] .realm-bar { background: rgba(0, 0, 0, .1); }
html[data-theme="light"] .realm-bar u { background: rgba(154, 107, 20, .3); }
html[data-theme="light"] .realm-bar.wall i { background: #b8860b; box-shadow: none; }
html[data-theme="light"] .arts-table td { border-bottom-color: rgba(0, 0, 0, .07); }
html[data-theme="light"] .life-graph svg { background: rgba(0, 0, 0, .02); }
html[data-theme="light"] .life-graph .gm { stroke: rgba(0, 0, 0, .2); }
html[data-theme="light"] .mem-state.on { border-color: #b7cbbd; }
html[data-theme="light"] .log-tools input, html[data-theme="light"] .report textarea { background: #fffaf0; color: var(--text); }
html[data-theme="light"] .bond { color: #b0522f; }
html[data-theme="light"] .bond.mate { color: #fffaf0; background: #c2643f; border-color: #c2643f; }
html[data-theme="light"] .cloud-row .warn { color: #a3301c; }
html[data-theme="light"] .tip-link { border-color: #d9c27f; background: rgba(154, 107, 20, .06); }
html[data-theme="light"] .log-mini:hover, html[data-theme="light"] .log-mini:active { border-color: #d9c27f; }
html[data-theme="light"] .fame-tag { color: #8a6512; border-color: rgba(154, 107, 20, .5); background: rgba(154, 107, 20, .08); }
html[data-theme="light"] .year-turn::before, html[data-theme="light"] .year-turn::after { background: linear-gradient(90deg, transparent, #c9bda5, transparent); }

/* 밝고 또렷하게(밝게 + 또렷하게): 바탕은 더 희게, 글자·선은 더 진하게 */
html[data-theme="light"][data-contrast] { --bg: #fbf8f1; --panel: #ffffff; --line: #b3a68c; --text: #120e08; --dim: #3b3428; --faint: #5a5040; --accent: #865a08; --jade: #2c5a45; }
html[data-theme="light"][data-contrast] .card.quiet p { color: #2e281f; }
html[data-theme="light"][data-contrast] .hud { background: rgba(251, 248, 241, .97); }
html[data-theme="light"][data-contrast] .chip, html[data-theme="light"][data-contrast] .choice, html[data-theme="light"][data-contrast] .pill { border-color: #a79a80; }
html[data-theme="light"][data-contrast] .frame::after { background: linear-gradient(transparent, rgba(251, 248, 241, .85)); }
html[data-theme="light"] .lg2 .lg-band { background: rgba(0, 0, 0, .025); }
html[data-theme="light"] .lg2 .lg-band.alt { background: rgba(0, 0, 0, .055); }
html[data-theme="light"] .lg2 .lg-lab.hurt, html[data-theme="light"] .lg2 .lg-tips b.hurt { color: #a3301c; }
html[data-theme="light"] .lg2 .lg-tips b.feat { color: #8a6512; }

/* ── 밝게 + 그린 장식(style.css UI 1~3차의 먹빛 옻칠 판): 판 · 선택지 · 보조 단추가 어두운 판 그대로 남아 짙은 글자가 묻히던 일(2026-10-24 출시 전 점검).
   같은 질감을 한지 빛으로 덮어 결만 살짝 비치게, 금 모서리 · 번호 원패는 그대로 */
html[data-theme="light"] .dlg, html[data-theme="light"] .book, html[data-theme="light"] .sync-box {
  background: linear-gradient(180deg, rgba(255, 251, 242, .93), rgba(248, 241, 226, .9)), url('../img/ui/ui_panel.jpg?v=2') center / 256px repeat, #fbf5e8;
  border-color: #cdb98d; box-shadow: 0 0 0 1px rgba(154, 107, 20, .12), 0 14px 40px rgba(60, 45, 20, .25); }
html[data-theme="light"] .choice { background: linear-gradient(90deg, rgba(255, 251, 242, .94), rgba(250, 244, 230, .9)), url('../img/ui/ui_panel.jpg?v=2') center / 256px repeat; border-color: #d3c4a4; box-shadow: none; }
html[data-theme="light"] .choice:hover:not(:disabled):not(.spent) { border-color: rgba(154, 107, 20, .6); background: linear-gradient(90deg, rgba(250, 238, 210, .95), rgba(248, 240, 222, .9)), url('../img/ui/ui_panel.jpg?v=2') center / 256px repeat; box-shadow: none; }
html[data-theme="light"] .choice.picked { box-shadow: inset 0 0 0 1px rgba(154, 107, 20, .35); }
html[data-theme="light"] .btn.ghost { background: linear-gradient(180deg, #fffaf0, #f1e7d3); border-color: #c2a86f; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(60, 45, 20, .15); }
html[data-theme="light"] .btn.ghost:hover, html[data-theme="light"] .btn.ghost:focus-visible { border-color: var(--accent); color: #5a3d08; }
html[data-theme="light"] .dlg-btns .btn.ghost, html[data-theme="light"] .cloud-row .btn.ghost, html[data-theme="light"] .login-guest .btn.ghost { color: var(--text); }
html[data-theme="light"] .hud-btns button { background: linear-gradient(180deg, #fffaf0, #f1e7d3); border-color: #d3c4a4; color: var(--dim); }
html[data-theme="light"] .hud-btns button:hover, html[data-theme="light"] .hud-btns button:focus-visible { color: var(--accent); border-color: rgba(154, 107, 20, .6); }
html[data-theme="light"] .vol-pop { border-color: #cdb98d; box-shadow: 0 0 0 1px rgba(154, 107, 20, .12), 0 10px 28px rgba(60, 45, 20, .2); }
html[data-theme="light"] .vol-pop .pill { background: rgba(255, 255, 255, .6); border-color: #d3c4a4; }
html[data-theme="light"] .vol-pop .pill.on { background: rgba(154, 107, 20, .14); border-color: rgba(154, 107, 20, .7); color: #6b4a08; }
html[data-theme="light"] .shot-toast { background: #fffaf0; border-color: #d9c27f; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
html[data-theme="light"] .book-head { background: linear-gradient(180deg, rgba(255, 251, 242, .97), rgba(248, 241, 226, .97)), url('../img/ui/ui_panel.jpg?v=2') center / 256px repeat, #fbf5e8; border-bottom-color: #d3c4a4; box-shadow: 0 8px 14px -10px rgba(60, 45, 20, .3); }
html[data-theme="light"] .book-find { background: #fffaf0; border-color: #d3c4a4; }
html[data-theme="light"] .book-jump .pill { background: rgba(255, 255, 255, .6); border-color: #d3c4a4; }
html[data-theme="light"] .book-top { background: linear-gradient(180deg, #fffaf0, #f1e7d3); border-color: rgba(154, 107, 20, .6); box-shadow: 0 6px 16px rgba(60, 45, 20, .25); }

/* 설정 창 탭(소리 · 화면 · 기타)과 「?」 풀이(2026-10-25 — 늘 펼친 풀이 · 묶음 머리로 창이 모바일 화면을 다 덮던 것을 줄임) */
.vp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -2px 0 2px; }
.vp-tab { flex: 1; font: inherit; font-size: 13px; padding: 6px 4px 7px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--dim); cursor: pointer; }
.vp-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.vp-q { flex: none; width: 19px; height: 19px; margin-left: auto; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--dim); font: inherit; font-size: 10.5px; line-height: 15px; cursor: pointer; vertical-align: 1px; }
.vp-q[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.vp-help { font-size: 12px; line-height: 1.5; color: var(--dim); margin: -4px 0 2px; padding-left: 2px; }
.vp-vol > span { width: 92px; flex: none; }
.vp-row > span { max-width: 140px; white-space: normal; }