/* ── 테마 · 설정 · 명함 꾸미기 (themes.css) ─────────────────────────────
   테마는 html[data-theme] 하나로 고른다 (public/js/theme.js). 어두운 테마(밤의 서고 · 대장간)는 html[data-tone="dark"] 도 함께 달아
   글씨 · 등급 색 · 그림 손질을 나눈다 (style.css 등의 [data-tone="dark"] 규칙).
   테마마다 바뀌는 것: 색 낱말 · 책상(바탕) · 종이 결(--paper) · 테두리 그림(--frame · --frame-gilt) · 머리 장식(--orn) · 제목 글꼴 ·
   제목 간판 · 책등(메뉴)과 위 띠 · 단추 모양. 화면 곳곳은 이 낱말만 쓰므로 저절로 따라온다.
     ''     양피지      따뜻한 고서 종이 · 세피아 덩굴 테두리 · 호두나무 간판 (style.css 기본)
     night  밤의 서고   어두운 책장 · 금빛 테두리 (style.css)
     sky    등대의 새벽 맑은 바다 파랑 · 별 나침반 테두리 · 둥근 단추 · 본명조 굵은 제목
     mint   숲의 오두막 이끼 초록 · 통나무 틀과 잎 · 도톰한 나무 단추
     rose   장미 정원   분홍 꽃잎 · 크림빛 레이스 · 장미 꽃 테두리 · 둥근 리본 단추
     forge  대장간      숯빛 쇠판 · 리벳 테두리 · 잉걸불 주황 단추 · 굵은 제목 */

/* 머리 장식(낱장 제목 · 설정 묶음 앞): 기본은 덩굴 잎 */
:root { --orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 13 C6 13 9 10 9 6 C9 3 12 2 14 3 C12 3 11 5 11 7 C11 11 7 14 2 13 Z' fill='%23b08a3e'/%3E%3Ccircle cx='5' cy='9' r='1.6' fill='%23b08a3e'/%3E%3C/svg%3E"); --head-ls: .01em; --head-w: 400; }
:root[data-theme="night"] { --orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 13 C6 13 9 10 9 6 C9 3 12 2 14 3 C12 3 11 5 11 7 C11 11 7 14 2 13 Z' fill='%23d6b46a'/%3E%3Ccircle cx='5' cy='9' r='1.6' fill='%23d6b46a'/%3E%3C/svg%3E"); }
.plate > h3::before, .setsec > summary h3::before { content: ''; flex: none; width: .95em; height: .95em; background: var(--orn) center / contain no-repeat; }
h1, h2, h3, h4 { font-weight: var(--head-w); letter-spacing: var(--head-ls); }

/* ═══ 등대의 새벽: 맑은 바다 · 유리 같은 낱장 · 별 나침반 ═══ */
:root[data-theme="sky"] {
  --desk: #1d3448; --desk-2: #26455d; --leather-ink: #e4eff6; --leather-ink-2: #b4cad8; --leather-ink-3: #8aa6b9;
  --bg: #e4edf2; --page: #eaf1f5; --surface: #f7fafc; --surface-2: #eef4f7; --surface-3: #dbe7ee;
  --line: #b8ccd8; --line-2: #7f9fb3; --ink: #172636; --ink-2: #33475a; --ink-3: #50667a;
  --primary: #2a6788; --primary-2: #3a7ea3; --primary-soft: #d5e6ef; --on-primary: #f4fbff;
  --rose: #ad3f3f; --rose-soft: #f3dcdc; --mint: #2c7560; --mint-soft: #d6ebe3; --sky: #2a6a93; --sky-soft: #d7e6f0;
  --butter: #85621a; --butter-soft: #efe4c6; --peach: #a0532a; --peach-soft: #f2dfd2;
  --gilt: #4c8fa8; --gilt-2: #8cc2d2; --hp: #b0413e; --sh: #3e78a8; --exp: #4c8fa8; --pip: #4c8fa8;
  --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 2px 8px rgba(20, 50, 80, .12); --shadow-card: 0 2px 8px rgba(20, 50, 80, .1);
  --frame: url(/assets/ui/frame-sea.svg); --frame-gilt: url(/assets/ui/frame-sea.svg); --paper: url(/assets/ui/paper-sea.svg);
  --font-head: 'Noto Serif KR', 'Gowun Batang', serif; --head-w: 700; --head-ls: .04em;
  --r: 10px; --r-s: 8px; --r-l: 14px;
  --orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 L9.6 6.4 L16 8 L9.6 9.6 L8 16 L6.4 9.6 L0 8 L6.4 6.4 Z' fill='%232a6788'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='%23f7fafc'/%3E%3C/svg%3E");
  --wood: linear-gradient(180deg, #3f7598 0%, #2c5a78 55%, #22495f 100%); --wood-edge: #16344a; --wood-ink: #eef7fc;
  --wood-grain: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 45%);
  --brass-nail: radial-gradient(circle, #ffffff 0 .9px, #b9d8e8 1.6px, #4f7f9d 2.5px, rgba(0, 0, 0, .35) 3.1px, transparent 3.7px);
  --track: #d3e0e8; --st-red: #8a3a3a;
}
:root[data-theme="sky"] body { background: radial-gradient(120% 60% at 50% 0%, rgba(255, 214, 170, .28), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cpath d='M0 30 C20 22 40 22 60 30 S100 38 120 30 S150 22 160 26' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E"), linear-gradient(180deg, #1b3247 0%, #2d5671 45%, #5f8ea8 100%); background-attachment: fixed; }
:root[data-theme="sky"] :is(.side, .topbar) { --surface: #24425a; --surface-2: #1f3a50; --surface-3: #2c4e68; --line: #3d6280; --line-2: #5b829e; }
:root[data-theme="sky"] .side { background: linear-gradient(90deg, #142838, #1d3448 35%, #1b3246 85%, #12253a); border-right-color: #0d1c2a; box-shadow: inset -2px 0 0 rgba(140, 194, 210, .4); }
:root[data-theme="sky"] .topbar { background: linear-gradient(180deg, #213d54, #182f43); border-bottom-color: #0d1c2a; box-shadow: 0 1px 0 rgba(140, 194, 210, .45), 0 4px 10px rgba(5, 20, 35, .3); }
:root[data-theme="sky"] .page { box-shadow: 0 0 0 1px rgba(20, 50, 80, .25), 0 14px 40px rgba(5, 20, 40, .4); }
:root[data-theme="sky"] .page::before { background: linear-gradient(180deg, rgba(255, 220, 180, .18), transparent 120px), radial-gradient(ellipse at 50% 40%, transparent 60%, rgba(40, 90, 130, .1)); }
:root[data-theme="sky"] .page-head h2 { border-radius: 999px; padding: 0 2.6rem; }
:root[data-theme="sky"] .page-head h2::before { border-radius: 999px; border-color: rgba(220, 240, 250, .55); }
:root[data-theme="sky"] .page-head h2::after { background: var(--brass-nail) 8px 50% / 9px 9px no-repeat, var(--brass-nail) calc(100% - 8px) 50% / 9px 9px no-repeat; }
:where(:root[data-theme="sky"]) button, :where(:root[data-theme="sky"]) .btn { border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 60%, #fff), var(--surface-3)); border-color: color-mix(in srgb, var(--line-2) 80%, var(--surface)); box-shadow: 0 1px 2px rgba(20, 60, 90, .12); }
:where(:root[data-theme="sky"]) button.primary { background: linear-gradient(180deg, var(--primary-2), var(--primary)); border-color: color-mix(in srgb, var(--primary) 70%, #000); box-shadow: 0 2px 6px rgba(30, 90, 130, .3), inset 0 1px 0 rgba(255, 255, 255, .25); text-shadow: none; }
:where(:root[data-theme="sky"]) :is(button.sel, button[aria-pressed="true"]) { background: var(--primary); color: var(--on-primary); border-color: color-mix(in srgb, var(--primary) 70%, #000); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); }
:where(:root[data-theme="sky"]) :is(input, select, textarea) { background: color-mix(in srgb, var(--surface) 60%, #fff); border-radius: 8px; }
:root[data-theme="sky"] .plate.tight, :root[data-theme="sky"] .plate.flat { border-radius: 10px; }
:root[data-theme="sky"] .page-head::after { filter: hue-rotate(170deg) saturate(.6); }

/* ═══ 숲의 오두막: 이끼 · 통나무 · 잎 ═══ */
:root[data-theme="mint"] {
  --desk: #2b2216; --desk-2: #362a1b; --leather-ink: #ece6c8; --leather-ink-2: #c9c09a; --leather-ink-3: #9d9572;
  --bg: #d9e0c2; --page: #dce4c4; --surface: #edf1dc; --surface-2: #e3e9cf; --surface-3: #cfd9b4;
  --line: #aab88a; --line-2: #6f7f4f; --plate-bw: 11px; --page-bw: 16px; --ink: #22281a; --ink-2: #3c4729; --ink-3: #576140;
  --primary: #47652c; --primary-2: #5a7c3a; --primary-soft: #d9e2bf; --on-primary: #f4f6e6;
  --rose: #a33f2e; --rose-soft: #efd6c8; --mint: #3c6e3a; --mint-soft: #d5e2c2; --sky: #3a6276; --sky-soft: #d6e0d8;
  --butter: #85641a; --butter-soft: #eadfb6; --peach: #9d552a; --peach-soft: #ecd8bc;
  --gilt: #8a6a32; --gilt-2: #c3a15a; --hp: #a33f2e; --exp: #8a6a32;
  --frame: url(/assets/ui/frame-moss.svg); --frame-gilt: url(/assets/ui/frame-moss.svg); --paper: url(/assets/ui/paper-moss.svg);
  --font-head: 'Gowun Batang', 'Noto Serif KR', serif; --head-ls: .03em;
  --r: 6px; --r-s: 5px;
  --orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15 C8 10 8 6 8 2 M8 2 C3 3 2 8 6 10 M8 5 C13 5 14 10 10 11' fill='none' stroke='%23476a2c' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M8 2 C3 3 2 8 6 10 C7 7 7 4 8 2 Z M8 5 C13 5 14 10 10 11 C9 9 9 7 8 5 Z' fill='%235f8a3a'/%3E%3C/svg%3E");
  --wood: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 8%, transparent 92%, rgba(0, 0, 0, .3)), linear-gradient(180deg, #6a5a32 0%, #4c3f22 50%, #392f18 100%);
  --wood-ink: #f2ecc8; --track: #d0d0ae;
}
:root[data-theme="mint"] body { background: radial-gradient(110% 70% at 50% 0%, rgba(120, 150, 70, .18), transparent 60%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 120px), url(/assets/ui/leather.svg), linear-gradient(180deg, #33281a, #2a2015); background-attachment: fixed; }
:root[data-theme="mint"] :is(.side, .topbar) { --surface: #2f3a22; --surface-2: #29331d; --surface-3: #3a4729; --line: #4d5c35; --line-2: #6b7d48; }
:root[data-theme="mint"] .side { background: linear-gradient(90deg, #171d10, #26301b 30%, #232c18 85%, #141a0e), url(/assets/ui/leather.svg); box-shadow: inset -3px 0 0 rgba(111, 140, 60, .55), inset -5px 0 0 rgba(0, 0, 0, .3); }
:root[data-theme="mint"] .topbar { background: linear-gradient(180deg, #2b3520, #1d2414), url(/assets/ui/leather.svg); box-shadow: 0 2px 0 rgba(111, 140, 60, .6), 0 4px 10px rgba(0, 0, 0, .3); }
:root[data-theme="mint"] .page::before { background: linear-gradient(180deg, rgba(95, 138, 58, .16), transparent 8px), linear-gradient(0deg, rgba(95, 138, 58, .16), transparent 8px), radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(60, 70, 20, .14)); }
:root[data-theme="mint"] .page-head h2 { border-top: 4px solid #5f8a3a; }
:where(:root[data-theme="mint"]) button, :where(:root[data-theme="mint"]) .btn { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 75%, #fff), var(--surface-3)); border: 1px solid #6b5233; box-shadow: 0 2px 0 #6b5233, inset 0 1px 0 rgba(255, 255, 240, .5); }
:where(:root[data-theme="mint"]) button:active:not(:disabled), :where(:root[data-theme="mint"]) .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 3px rgba(40, 30, 10, .3); }
:where(:root[data-theme="mint"]) button.primary { background: linear-gradient(180deg, #67893f, #47652c); border-color: #2f4519; box-shadow: 0 2px 0 #2f4519, inset 0 1px 0 rgba(230, 250, 200, .3); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
:where(:root[data-theme="mint"]) :is(button.sel, button[aria-pressed="true"]) { background: #4c3a22; color: #f2ecc8; border-color: #2e2213; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
:root[data-theme="mint"] .page-head::after { filter: hue-rotate(40deg) saturate(.8); }

/* ═══ 장미 정원: 분홍 꽃잎 · 크림빛 · 리본 ═══ */
:root[data-theme="rose"] {
  --desk: #4f2f3a; --desk-2: #5d3946; --leather-ink: #fbe9ee; --leather-ink-2: #e3bcc7; --leather-ink-3: #c093a1;
  --bg: #f5e6e3; --page: #f8ece9; --surface: #fdf6f3; --surface-2: #f9ece8; --surface-3: #f1dbd6;
  --line: #e2bdb9; --line-2: #b98587; --ink: #3a2228; --ink-2: #5a3840; --ink-3: #7b565e;
  --primary: #a33d5f; --primary-2: #bc5778; --primary-soft: #f6d9e0; --on-primary: #fff6f8;
  --rose: #b23a46; --rose-soft: #f6d8da; --mint: #4a7a5a; --mint-soft: #dcebdf; --sky: #4f6a92; --sky-soft: #e0e4ef;
  --butter: #8a6420; --butter-soft: #f3e4c6; --peach: #a8582c; --peach-soft: #f6dfd0;
  --gilt: #b9806a; --gilt-2: #e0b2a0; --hp: #b23a46; --exp: #c4889a; --pip: #c4889a;
  --frame: url(/assets/ui/frame-rose.svg); --frame-gilt: url(/assets/ui/frame-rose.svg); --paper: url(/assets/ui/paper-rose.svg);
  --font-head: 'Gowun Batang', 'Noto Serif KR', serif; --head-ls: .06em;
  --r: 12px; --r-s: 10px; --r-l: 16px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 2px 8px rgba(120, 50, 70, .12); --shadow-card: 0 2px 8px rgba(120, 50, 70, .1);
  --orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='%23d68aa0'/%3E%3Ccircle cx='6' cy='6.5' r='3.5' fill='%23e8a6b8'/%3E%3Ccircle cx='10.2' cy='7' r='3.3' fill='%23e09aae'/%3E%3Cpath d='M6 8 C6 5.5 10 5.3 10 8 C10 10 7.5 10.3 7 9' fill='none' stroke='%23a24d67' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --wood: linear-gradient(180deg, #c27088 0%, #a24d67 55%, #8a3d55 100%); --wood-edge: #6e2c40; --wood-ink: #fff3f6;
  --wood-grain: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 50%);
  --brass-nail: radial-gradient(circle, #fff 0 1px, #f6d0da 1.8px, rgba(110, 44, 64, .5) 2.6px, transparent 3.2px);
  --track: #f0d8d4;
}
:root[data-theme="rose"] body { background: url(/assets/ui/paper-rose.svg) 0 0 / 120px 120px, radial-gradient(100% 70% at 50% 0%, rgba(255, 200, 215, .25), transparent 60%), linear-gradient(180deg, #5a3442, #432631); background-attachment: fixed; }
:root[data-theme="rose"] :is(.side, .topbar) { --surface: #5d3846; --surface-2: #53313e; --surface-3: #6a4252; --line: #7a4d5d; --line-2: #9a6878; }
:root[data-theme="rose"] .side { background: linear-gradient(90deg, #3a2029, #4f2f3a 35%, #4a2c37 85%, #371e27); border-right-color: #2a1219; box-shadow: inset -3px 0 0 rgba(224, 178, 160, .45); }
:root[data-theme="rose"] .topbar { background: linear-gradient(180deg, #57343f, #432631); border-bottom-color: #2a1219; box-shadow: 0 1px 0 rgba(224, 178, 160, .55), 0 4px 10px rgba(40, 10, 20, .3); }
:root[data-theme="rose"] .page { box-shadow: 0 0 0 1px rgba(80, 30, 45, .3), 0 14px 40px rgba(40, 10, 20, .4); }
:root[data-theme="rose"] .page::before { background: radial-gradient(ellipse at 50% 0%, rgba(240, 170, 190, .18), transparent 40%), radial-gradient(ellipse at 50% 40%, transparent 60%, rgba(160, 80, 100, .1)); }
:root[data-theme="rose"] .page-head h2 { border-radius: 999px; clip-path: none; padding: 0 2.6rem; }
:root[data-theme="rose"] .page-head h2::before { border-radius: 999px; border-style: dashed; border-color: rgba(255, 230, 236, .6); }
:root[data-theme="rose"] .page-head h2::after { background: var(--brass-nail) 9px 50% / 9px 9px no-repeat, var(--brass-nail) calc(100% - 9px) 50% / 9px 9px no-repeat; }
:where(:root[data-theme="rose"]) button, :where(:root[data-theme="rose"]) .btn { border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, #fff), var(--surface-3)); border-color: color-mix(in srgb, var(--line-2) 75%, var(--surface)); box-shadow: 0 1px 3px rgba(150, 60, 90, .14); }
:where(:root[data-theme="rose"]) button.primary { background: linear-gradient(180deg, #c8698a, #a33d5f); border-color: #84304d; box-shadow: 0 2px 6px rgba(160, 60, 95, .3), inset 0 1px 0 rgba(255, 220, 230, .35); text-shadow: none; }
:where(:root[data-theme="rose"]) :is(button.sel, button[aria-pressed="true"]) { background: #8e3d58; color: #fff6f8; border-color: #6e2c40; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); }
:where(:root[data-theme="rose"]) :is(input, select, textarea) { background: color-mix(in srgb, var(--surface) 60%, #fff); border-radius: 10px; }
:root[data-theme="rose"] .plate.tight, :root[data-theme="rose"] .plate.flat { border-radius: 12px; }
:root[data-theme="rose"] .page-head::after { filter: hue-rotate(-40deg) saturate(.9); }

/* ═══ 대장간: 숯빛 쇠판 · 리벳 · 잉걸불 ═══ */
:root[data-theme="forge"] {
  --desk: #120f0d; --desk-2: #1a1613; --leather-ink: #efe2d2; --leather-ink-2: #c9b49c; --leather-ink-3: #9a8670;
  --bg: #1c1816; --page: #221e1b; --surface: #2b2622; --surface-2: #26211e; --surface-3: #37302b;
  --line: #4b433c; --line-2: #6c5f52; --ink: #f0e7dc; --ink-2: #d6c8b8; --ink-3: #ab9c8c;
  --primary: #d4692a; --primary-2: #ea8240; --primary-soft: #48291a; --on-primary: #1c0f06;
  --rose: #e46d5c; --rose-soft: #4a2420; --mint: #8fc08a; --mint-soft: #233220; --sky: #8fb3d2; --sky-soft: #232c36;
  --butter: #e9b95b; --butter-soft: #40321a; --peach: #ea9460; --peach-soft: #45291b;
  --gilt: #e08a3a; --gilt-2: #f2b26b; --hp: #df5a40; --sh: #7fa3c4; --exp: #e08a3a; --pip: #e08a3a;
  --g0: #b5aa96; --g1: #7fc196; --g2: #86aee6; --g3: #d796c9; --g4: #f0a060; --g5: #ecc850;
  --frame: url(/assets/ui/frame-forge.svg); --frame-gilt: url(/assets/ui/frame-forge.svg); --paper: url(/assets/ui/paper-forge.svg);
  --shadow: 0 2px 8px rgba(0, 0, 0, .45); --shadow-card: 0 2px 8px rgba(0, 0, 0, .4); color-scheme: dark;
  --font-head: 'Noto Serif KR', 'Gowun Batang', serif; --head-w: 700; --head-ls: .08em;
  --r: 2px; --r-s: 2px; --r-l: 3px;
  --track: #171310; --dusk: #b9a8e6; --dusk-soft: #2e2838;
  --orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 C10 5 13 6 12 10 C11.5 13 9.5 15 8 15 C6.5 15 4.5 13 4 10 C3.6 7.5 5 6.5 6 4.5 C6.5 6.5 7.5 7 8 7 C8 5 7.5 3 8 1 Z' fill='%23e08a3a'/%3E%3Cpath d='M8 9 C9.5 10.5 9.8 12 9 13.3 C8.4 14 7.6 14 7 13.3 C6.3 12.4 6.8 10.5 8 9 Z' fill='%23f6d08a'/%3E%3C/svg%3E");
  --wood: linear-gradient(180deg, #4a423c 0%, #352f2a 50%, #26211d 100%); --wood-edge: #0d0b0a; --wood-ink: #f2b26b;
  --wood-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.4'/%3E%3C/svg%3E");
  --brass-nail: radial-gradient(circle, #e8dccb 0 .9px, #8a7c6c 1.8px, #2a2420 2.7px, rgba(0, 0, 0, .5) 3.3px, transparent 3.8px);
  --on-dark: #f0e4d0;
}
:root[data-theme="forge"] body { background: radial-gradient(90% 50% at 50% 108%, rgba(230, 110, 40, .34), rgba(150, 60, 20, .12) 45%, transparent 70%), url(/assets/ui/paper-forge.svg), linear-gradient(180deg, #171310, #0f0c0b); background-attachment: fixed; }
:root[data-theme="forge"] :is(.side, .topbar) { --surface: #2a2522; --surface-2: #231f1c; --surface-3: #35302b; --line: #4b433c; --line-2: #6c5f52; }
:root[data-theme="forge"] .side { background: linear-gradient(90deg, #0c0a09, #1b1714 30%, #191512 85%, #0b0908); border-right-color: #050404; box-shadow: inset -2px 0 0 rgba(212, 105, 42, .55), inset -4px 0 0 rgba(0, 0, 0, .4); }
:root[data-theme="forge"] .topbar { background: linear-gradient(180deg, #1f1b18, #141110); border-bottom-color: #050404; box-shadow: 0 1px 0 rgba(212, 105, 42, .6), 0 4px 12px rgba(0, 0, 0, .5); }
:root[data-theme="forge"] .nav[aria-current="page"] { color: var(--gilt-2); background: linear-gradient(180deg, rgba(224, 138, 58, .2), rgba(224, 138, 58, .04)); border-color: rgba(224, 138, 58, .55); }
:root[data-theme="forge"] .nav[aria-current="page"]::before { background: var(--primary); box-shadow: 0 0 8px rgba(234, 130, 64, .7); }
:root[data-theme="forge"] .page { box-shadow: 0 0 0 1px #000, 0 14px 40px rgba(0, 0, 0, .65); }
:root[data-theme="forge"] .page::before { background: linear-gradient(0deg, rgba(212, 105, 42, .1), transparent 140px), radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, .35)); }
:root[data-theme="forge"] .page-head h2 { border-radius: 2px; text-shadow: 0 0 10px rgba(234, 130, 64, .45), 0 -1px 0 #000; }
:root[data-theme="forge"] .page-head h2::before { border-color: rgba(212, 105, 42, .55); border-radius: 0; }
:root[data-theme="forge"] .page-head::after { filter: sepia(1) saturate(3) hue-rotate(-15deg) brightness(.9); }
:where(:root[data-theme="forge"]) button, :where(:root[data-theme="forge"]) .btn { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 80%, #fff 6%), var(--surface-2)); border-color: color-mix(in srgb, var(--line-2) 85%, #000); box-shadow: inset 0 1px 0 rgba(255, 230, 200, .1), 0 1px 0 rgba(0, 0, 0, .6); }
:where(:root[data-theme="forge"]) button:where(:not(.sel, [aria-pressed="true"])):hover:not(:disabled) { background: linear-gradient(180deg, #4a423b, #332c27); border-color: #7a6a5a; }
:where(:root[data-theme="forge"]) button.primary { background: linear-gradient(180deg, #f08a45, #c95e22); color: var(--on-primary); border-color: #7a3410; box-shadow: 0 0 10px rgba(234, 120, 50, .35), inset 0 1px 0 rgba(255, 220, 170, .5); text-shadow: 0 1px 0 rgba(255, 200, 150, .35); }
:where(:root[data-theme="forge"]) button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #f7a062, #d76a2c); color: var(--on-primary); }
:where(:root[data-theme="forge"]) :is(button.sel, button[aria-pressed="true"]) { background: #e8823e; color: #1c0f06; border-color: #7a3410; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
:where(:root[data-theme="forge"]) :is(button.sel, button[aria-pressed="true"]):hover:not(:disabled) { background: #f09450; color: #1c0f06; }
:where(:root[data-theme="forge"]) :is(input, select, textarea) { background: color-mix(in srgb, var(--surface-2) 70%, #000); }
:root[data-theme="forge"] .plate > h3, :root[data-theme="forge"] .setsec > summary h3 { color: var(--gilt-2); }
:root[data-theme="forge"] .modal-back:not(.rd-back) { background: rgba(5, 3, 2, .7); }

/* 어두운 테마 공통: 대장간에도 밤의 서고의 손질 (style.css 의 :root[data-tone="dark"] 규칙이 함께 든다) */
:root[data-theme="forge"] .modal.reading { --gilt: #e08a3a; --gilt-2: #f2b26b; --primary: #c9612a; --primary-2: #e07a3c; }
/* 이야기 창(먹빛)에도 테마의 금빛을 조금 */
:root[data-theme="sky"]:not([data-readbg="light"]) .modal.reading { --frame-gilt: url(/assets/ui/frame-sea.svg); --gilt: #79b4c8; --gilt-2: #b5dde8; --primary: #2f6f92; --primary-2: #4086ad; --page: #111a22; --surface: #18242e; --surface-2: #142029; --surface-3: #1f2e3a; --line: #2f4556; --line-2: #4c6a80; }
:root[data-theme="mint"]:not([data-readbg="light"]) .modal.reading { --frame-gilt: url(/assets/ui/frame-moss.svg); --gilt: #a8b86a; --gilt-2: #d0dc96; --primary: #5a7c3a; --primary-2: #6e9148; --page: #15170e; --surface: #1e2114; --line: #3d422a; --line-2: #5f6640; }
:root[data-theme="rose"]:not([data-readbg="light"]) .modal.reading { --frame-gilt: url(/assets/ui/frame-rose.svg); --gilt: #e0a2b2; --gilt-2: #f4ccd6; --primary: #a64462; --primary-2: #bd5a78; --page: #1d1115; --surface: #29181e; --line: #4d2f39; --line-2: #73495a; }
:root[data-theme="forge"]:not([data-readbg="light"]) .modal.reading { --frame-gilt: url(/assets/ui/frame-forge.svg); --page: #110d0b; --surface: #1c1613; --line: #44372d; --line-2: #6c5440; }

/* ═══ 설정 화면 ═══ */
.setbar { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: -.2rem auto .7rem; max-width: 720px; }
.setfind { flex: 1 1 14rem; max-width: 22rem; min-height: var(--ctl-s); }
.setfold { display: flex; gap: .25rem; flex: none; }
.setcols { columns: 2 460px; column-gap: .9rem; }
.setcols > .setsec { margin: 0 0 .8rem; }
.setadmin { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.setsec > summary { display: flex; align-items: baseline; gap: .1rem .6rem; flex-wrap: wrap; padding: .15rem 1.6rem .15rem 0; min-height: 2rem; }
.setsec > summary h3 { flex: 0 0 auto; }
.setsec > summary h3::after { display: none; }
.setsec > summary > small { flex: 1 1 8rem; min-width: 0; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setsec[open] > summary { margin-bottom: .25rem; padding-bottom: .4rem; border-bottom: 1px solid color-mix(in srgb, var(--line-2) 45%, transparent); }
.setrow { grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr); gap: .3rem .8rem; padding: .48rem 0; }
.setrow .sl { font-weight: 700; font-size: .9rem; }
.setrow .sl > b { font-weight: 700; }
.setrow .sl small { font-weight: 400; font-size: .73rem; line-height: 1.35; }
.setrow .sc { justify-content: flex-end; }
.setrow.wide .sc { justify-content: flex-start; }
.setrow.sw-row { align-items: center; }
.setrow .seg { flex-wrap: nowrap; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; background: color-mix(in srgb, var(--surface-3) 45%, transparent); }
.setrow .seg > button { border: 0; border-radius: 0; box-shadow: none; background: transparent; min-height: var(--ctl-s); padding: .2rem .62rem; font-size: .8rem; }
.setrow .seg > button + button { border-left: 1px solid color-mix(in srgb, var(--line-2) 60%, transparent); }
.setrow .seg > button[aria-pressed="true"] { background: var(--ink-2); color: var(--surface); }
:root[data-theme] .setrow .seg > button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.setrow .seg.wrap { flex-wrap: wrap; gap: .3rem; border: 0; background: none; overflow: visible; }
.setrow .seg.wrap > button { border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface); }
.setrow .seg.wrap > button + button { border-left: 1px solid var(--line-2); }
.setrow .seg.wrap > button[aria-pressed="true"] { background: var(--ink-2); color: var(--surface); }
:root[data-theme] .setrow .seg.wrap > button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.setsel { min-height: var(--ctl-s); padding: .15rem 1.6rem .15rem .55rem; font-size: .84rem; max-width: 100%; }
.setin { width: 100%; min-width: 0; min-height: var(--ctl-s); padding: .25rem .55rem; font-size: .88rem; }
.setmute, .setpw { gap: .35rem; width: 100%; }
.setmute .row.nowrap .setin { flex: 1 1 auto; }
.qhours { gap: .3rem; } .qhours .setsel { width: 4.6rem; }
.btnrow { gap: .3rem; justify-content: flex-end; }
.sc.snd { justify-content: flex-end; }
.sc.snd input[type="range"] { flex: 1 1 110px; max-width: 150px; }
.sc.snd button.small.ghost { padding-inline: .45rem; }
/* 테마 고르기: 작은 견본 책장 */
.thpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; width: 100%; }
.thcard { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem .3rem .4rem; min-height: 0; white-space: normal; text-align: center; line-height: 1.2; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r) !important; box-shadow: none; color: var(--ink); }
.thcard:hover:not(:disabled) { border-color: var(--line-2); }
button.thcard[aria-pressed="true"], button.thcard[aria-pressed="true"]:hover:not(:disabled) { background: var(--surface); color: var(--ink); border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent); }
.thcard b { font-family: var(--font-head); font-size: .84rem; font-weight: 700; white-space: nowrap; }
.thcard small { font-size: .66rem; color: var(--ink-3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.th-mock { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--td); padding: 6px 9px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.th-mock > .th-plate { display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 100%; background: var(--tp); border: 6px solid transparent; border-image: var(--tf) 40 stretch; padding: 0 3px; }
.th-mock .th-line { display: block; height: 3px; width: 80%; background: var(--ti); opacity: .7; border-radius: 1px; }
.th-mock .th-line.s { width: 55%; opacity: .4; }
.th-mock .th-btn { display: block; align-self: flex-end; width: 34%; height: 7px; background: var(--ta); border-radius: 2px; }
button.thcard[aria-pressed="true"] .th-mock::after { content: ''; position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5.2 8.3 9 4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: 0 0 0 1.5px #fff; }
@media (max-width: 600px) {
  .setbar { margin: 0 auto .5rem; }
  .setfind { flex-basis: 100%; max-width: none; }
  .setcols { columns: 1; }
  .setrow:not(.sw-row):not(.wide) { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .setrow:not(.sw-row):not(.wide) .sc { justify-content: flex-start; }
  .setrow .seg:not(.wrap) { width: 100%; }
  .setrow .seg:not(.wrap) > button { flex: 1 1 0; padding-inline: .3rem; }
  .setsel { width: 100%; }
  .sc.snd { justify-content: flex-start; }
  .sc.snd input[type="range"] { max-width: none; }
  .btnrow { justify-content: flex-start; }
  .thpick { gap: .35rem; }
  .thcard small { display: none; }
}

/* ═══ 캐릭터 › 명함 · 꾸미기 (pages/card.js) ═══ */
.cardedit2 { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ce-prev { position: sticky; top: 4.6rem; display: flex; flex-direction: column; gap: .45rem; padding: .6rem; border: 1px solid var(--line-2); border-radius: var(--r); background: color-mix(in srgb, var(--surface-3) 55%, transparent) var(--paper); box-shadow: inset 0 0 0 3px var(--surface-2); }
.ce-prevhd { display: flex; align-items: center; justify-content: center; gap: .3rem; font-family: var(--font-head); font-size: .86rem; color: var(--ink-2); }
.ce-prevhd .si { width: 15px; height: 15px; }
.ce-stage > * { margin-inline: auto; max-width: 100%; }
.ce-note { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; font-size: .78rem; }
.ce-note:empty { display: none; }
.ce-secs { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.ce-secs > .setsec { margin: 0; }
.ce-row { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .3rem .8rem; align-items: start; padding: .5rem 0; border-top: 1px dotted color-mix(in srgb, var(--line-2) 55%, transparent); min-width: 0; }
.setbody > .ce-row:first-child, .setbody > div > .ce-row:first-child, .ce-lore > .ce-row:first-child { border-top: 0; }
.ce-k { font-weight: 700; font-size: .88rem; color: var(--ink-2); padding-top: .3rem; }
.ce-v { min-width: 0; }
.ce-v > input, .ce-v > textarea, .ce-lore textarea, .ce-lore input { width: 100%; min-width: 0; }
.ce-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ce-chips.center { justify-content: center; }
.ce-chips > button { max-width: 100%; }
.ce-inl { display: flex; gap: .35rem; align-items: center; } .ce-inl > input { flex: 1 1 auto; min-width: 0; }
.ce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .35rem; }
.ce-grid .csw { grid-template-rows: 46px auto auto; padding: .25rem .25rem .3rem; gap: .15rem; }
.ce-grid .csw b { font-size: .76rem; }
.ce-grid .csw .sw-p { font-size: .64rem; min-height: .95rem; gap: .2rem; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.ce-grid .csw .sw-p > span { overflow: hidden; text-overflow: ellipsis; }
.ce-grid .csw .sw-p .si { width: 10px; height: 10px; flex: none; }
.ce-grid .csw .sw-p .on { color: var(--primary); font-weight: 700; }
.ce-grid .csw.locked { opacity: .62; }
.ce-grid .csw.locked.sel { opacity: 1; }
.ce-grid .csw .sw-art .n { font-size: .82rem; }
.ce-grid .csw .sw-art .ic { --s: 26px; }
.ce-more { grid-column: 1 / -1; justify-self: center; }
.ce-dots { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ce-dot { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50% !important; background: var(--c) !important; border: 2px solid var(--surface) !important; box-shadow: 0 0 0 1px var(--line-2) !important; display: inline-grid; place-items: center; position: relative; }
.ce-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent) !important; }
.ce-dot.locked { opacity: .45; }
.ce-dot.locked[aria-pressed="true"] { opacity: .9; }
.ce-dot .si { width: 12px; height: 12px; color: #fff; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .8)); }
.ce-dots .ce-more { margin-left: .2rem; }
.ce-media { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ce-por { display: inline-grid; flex: none; }
.ce-btns { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.ce-btns > label.btn { cursor: pointer; }
.tokdot { width: 34px; height: 34px; border-radius: 9px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2); }
.tcpick { justify-content: flex-start; max-width: none; }
.ce-pixel { display: flex; gap: .8rem; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.ce-pixside { gap: .5rem; align-items: center; max-width: 260px; }
.ce-pal { justify-content: center; }
.ce-pal button[aria-pressed="true"] { outline: 2px solid var(--primary); outline-offset: 1px; }
.ce-lore { display: flex; flex-direction: column; }
.ce-foot { margin-top: .2rem; }
.ce-icgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 4px; }
.ce-icgrid > button { padding: 2px; min-height: 0; }
@media (max-width: 860px) {
  .cardedit2 { grid-template-columns: minmax(0, 1fr); }
  .ce-prev { position: static; }
}
@media (max-width: 600px) {
  .ce-row { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .ce-k { padding-top: 0; }
  .ce-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .ce-grid .csw { grid-template-rows: 40px auto auto; }
  .avatar-editor { grid-template-columns: repeat(16, 17px); grid-template-rows: repeat(16, 17px); }
}
/* 파일 고르기 단추(label.btn)도 작은 단추와 같은 크기 */
label.btn.small { font-size: .8rem; padding: .28rem .62rem; min-height: var(--ctl-s); cursor: pointer; }

/* 휴대폰: 아래 책등(메뉴)도 테마 빛깔로 */
@media (max-width: 860px) {
  :root[data-theme="sky"] .side { background: linear-gradient(180deg, #213d54, #142838); border-top-color: #0d1c2a; box-shadow: inset 0 2px 0 rgba(140, 194, 210, .45); }
  :root[data-theme="mint"] .side { background: linear-gradient(180deg, #2b3520, #171d10); border-top-color: #0f140a; box-shadow: inset 0 3px 0 rgba(111, 140, 60, .6); }
  :root[data-theme="rose"] .side { background: linear-gradient(180deg, #57343f, #3a2029); border-top-color: #2a1219; box-shadow: inset 0 2px 0 rgba(224, 178, 160, .55); }
  :root[data-theme="forge"] .side { background: linear-gradient(180deg, #1f1b18, #0c0a09); border-top-color: #050404; box-shadow: inset 0 2px 0 rgba(212, 105, 42, .6); }
  :root[data-theme="mint"] { --plate-bw: 10px; --page-bw: 12px; }
}