*{box-sizing:border-box}body{margin:0;padding:20px;font-family:'Noto Sans KR','Malgun Gothic',sans-serif;background:var(--bg);color:var(--ink)}.wrap{max-width:1100px;margin:0 auto;padding-bottom:48px}.appearance-section{margin:30px 0}.appearance-section h2{font-size:var(--fs-h2);margin:0 0 7px}.appearance-help{color:var(--ink-soft);font-size:var(--fs-small);line-height:1.8;margin:0 0 18px}.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.theme-option{font:inherit;color:var(--ink);border:2px solid var(--line);border-radius:16px;padding:0;text-align:left;background:var(--surface);overflow:hidden;cursor:pointer}.theme-option[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-10)}button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.theme-copy{display:flex;gap:12px;align-items:flex-start;padding:18px}.theme-copy strong{display:block;font-size:1.05rem;margin-bottom:5px}.theme-copy small{display:block;color:var(--ink-soft);line-height:1.6;font-size:.82rem}.theme-check{margin-left:auto;width:24px;height:24px;flex:none;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:transparent}.theme-option[aria-pressed=true] .theme-check{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.theme-preview{--pv-bg:#f3f6f5;--pv-panel:#fff;--pv-line:#dce6e2;--pv-ink:#233a3a;--pv-accent:#14765f;--pv-soft:#e4f3eb;height:210px;display:flex;background:var(--pv-bg);color:var(--pv-ink);padding:14px;gap:12px;pointer-events:none}.theme-preview.classic{--pv-bg:#16213e;--pv-panel:#202941;--pv-line:#425073;--pv-ink:#e8e8e8;--pv-accent:#9daafa;--pv-soft:#36436c}.theme-preview.classic.light{--pv-bg:#f7f8fa;--pv-panel:#fff;--pv-line:#e2e5ea;--pv-ink:#0f172a;--pv-accent:#33459b;--pv-soft:#edf0fa}.theme-preview.calm.dark{--pv-bg:#101a20;--pv-panel:#19272e;--pv-line:#30443f;--pv-ink:#e4efec;--pv-accent:#79dab5;--pv-soft:#253e35}.preview-nav{width:94px;flex:none;border-radius:8px;background:var(--pv-panel);padding:10px;font-size:10px}.preview-brand{font-weight:700;margin-bottom:14px}.preview-link{padding:6px 4px;margin-bottom:2px;white-space:nowrap}.preview-link.selected{background:var(--pv-soft);color:var(--pv-accent);border-radius:4px}.theme-preview.calm .preview-nav{width:49px;text-align:center;padding:10px 3px}.preview-main{flex:1;min-width:0}.preview-heading{font-size:12px;font-weight:700;margin:5px 0 12px}.preview-tools{display:flex;justify-content:flex-end;margin-bottom:10px}.preview-tools span{background:var(--pv-accent);color:var(--pv-bg);border-radius:4px;padding:4px 8px;font-size:9px}.preview-table{background:var(--pv-panel);border:1px solid var(--pv-line);border-radius:6px;overflow:hidden}.preview-row{display:flex;justify-content:space-between;gap:5px;font-size:9px;padding:9px;border-bottom:1px solid var(--pv-line)}.preview-row:last-child{border-bottom:0}.preview-row.head{color:var(--pv-accent);background:var(--pv-soft)}
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mode-option{font:inherit;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:16px 22px;min-width:0;text-align:left;cursor:pointer}.mode-option strong{display:block;margin-bottom:4px}.mode-option small{display:block;color:var(--ink-soft);line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}.mode-option[aria-pressed=true]{border-color:var(--accent);background:var(--accent-10)}.appearance-status{padding:14px 16px;border:1px solid var(--line);background:var(--surface);border-radius:10px;font-size:var(--fs-small);line-height:1.7}.appearance-status strong{color:var(--accent)}.preview-link,.preview-row,.preview-heading,.preview-brand,.preview-tools span{letter-spacing:0}.appearance-links{margin-top:20px;display:flex;gap:14px;flex-wrap:wrap}.appearance-links a{color:var(--accent);font-size:var(--fs-small)}@media(max-width:620px){.theme-grid{grid-template-columns:1fr}.theme-preview{height:200px}.mode-option{min-width:0;padding:14px}.theme-copy{padding:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}


/* 공통 낮 스타일의 버튼 기본값보다 선택 표시가 우선한다. */
:root .theme-option[aria-pressed="true"], :root .mode-option[aria-pressed="true"] { border-color:var(--accent)!important; }
:root .mode-option[aria-pressed="true"] { background:var(--accent-10)!important; }