/* PLAYORA 직소퍼즐 */
:root {
  --bg: #171511; --bar: #1e1b16; --bg-2: #24211b; --bg-3: #2f2b23; --line: #433d32; --ink: #f2eee5; --ink-2: #c3baa8; --ink-3: #958c7b;
  --acc: #e0bd6a; --acc-ink: #2a1f06; --acc-soft: rgba(224, 189, 106, 0.16); --ok: #9fd39a; --bad: #ff8a72;
  --page: #f6f2e9; --page-2: #5d574c; --page-ink: #1f1c17; --page-line: #ddd4c2; --page-card: #fffdf8;
  --f-body: "IBM Plex Sans KR", "Pretendard", system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --f-disp: "Gowun Batang", "IBM Plex Sans KR", serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r1: 6px; --r2: 10px; --r3: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@supports (color: oklch(0 0 0)) {
  :root {
    --bg: oklch(0.2 0.01 75); --bar: oklch(0.225 0.012 75); --bg-2: oklch(0.245 0.013 75); --bg-3: oklch(0.295 0.015 75); --line: oklch(0.38 0.02 75);
    --ink: oklch(0.955 0.012 85); --ink-2: oklch(0.8 0.025 80); --ink-3: oklch(0.65 0.025 80);
    --acc: oklch(0.81 0.11 85); --page: oklch(0.965 0.012 85); --page-2: oklch(0.45 0.02 75); --page-ink: oklch(0.23 0.012 75); --page-line: oklch(0.88 0.02 85);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--page); color: var(--page-ink); font: 400 16px/1.7 var(--f-body); word-break: keep-all; overflow-wrap: anywhere; }
button { font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- 페이지 머리 */
.mast { display: flex; align-items: baseline; gap: var(--s4); padding: var(--s3) clamp(var(--s4), 3vw, var(--s6)); border-bottom: 1px solid var(--page-line); }
.mast-brand { text-decoration: none; font-size: 14px; color: var(--page-2); white-space: nowrap; }
.mast-brand b { font-weight: 700; letter-spacing: 0.08em; color: var(--page-ink); margin-right: 6px; }
.mast-more { margin-left: auto; font-size: 14px; color: var(--page-2); white-space: nowrap; }
.head { max-width: 1240px; margin: 0 auto; padding: var(--s4) clamp(var(--s3), 3vw, var(--s6)) var(--s3); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.head h1 { margin: 0; font: 700 clamp(30px, 4vw, 40px)/1.1 var(--f-disp); letter-spacing: -0.01em; }
.head p { margin: 0; color: var(--page-2); font-size: 15px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, var(--s5)); }

/* ---------------------------------------------------------------- 게임 무대 */
.jg { position: relative; width: 100%; height: clamp(460px, calc(100svh - 132px), 860px); background: var(--bg); color: var(--ink); overflow: hidden; border-radius: var(--r2);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; font-family: var(--f-body); isolation: isolate; }
.jg .cv { position: absolute; inset: 0; display: block; touch-action: none; outline: none; }
@media (max-width: 640px) { .jg { border-radius: 0; height: calc(100svh - 104px); min-height: 500px; } .head { padding-top: var(--s3); } .head p { display: none; } }
html.embed, html.embed body { height: 100%; overflow: hidden; background: var(--bg); }
html.embed .mast, html.embed .head, html.embed .about, html.embed .foot { display: none !important; }
html.embed .wrap { padding: 0; max-width: none; }
html.embed .jg { position: fixed; inset: 0; width: auto; height: auto; min-height: 0; border-radius: 0; }
.jg button:focus-visible, .jg input:focus-visible, .jg summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ic { display: inline-flex; }
.ic svg, .tb svg { width: 16px; height: 16px; flex: none; }

/* 위 막대 */
.bar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s3) 6px var(--s2); background: var(--bar); border-bottom: 1px solid rgba(0, 0, 0, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03); }
.bar-l { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1 1 0; }
.bar-r { display: flex; align-items: center; gap: 6px; flex: 1 1 0; justify-content: flex-end; }
.tb { height: 32px; padding: 0 var(--s3); border-radius: var(--r1); border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 13px/1 var(--f-body); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, border-color .15s; }
.tb:hover { border-color: var(--ink-3); background: rgba(255, 255, 255, 0.04); }
.tb:active { transform: translateY(1px); }
.tb.icon { width: 34px; padding: 0; }
.tb[aria-pressed="true"] { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); }
.tb.pick { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.tb.pick:hover { background: var(--acc); filter: brightness(1.05); }
.art { min-width: 0; max-width: 300px; height: 34px; padding: 0 var(--s2); border: 0; border-radius: var(--r1); background: none; color: var(--ink); text-align: left; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.art:hover { background: rgba(255, 255, 255, 0.05); }
.art b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.art span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.art span:empty { display: none; }
.stats { flex: none; display: flex; align-items: center; gap: 14px; font: 500 13px/1 var(--f-body); color: var(--ink-2); white-space: nowrap; }
.sv { display: inline-flex; align-items: center; gap: 6px; }
.sv b { color: var(--ink); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.sv .ic { color: var(--acc); }
.pbar { position: relative; display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.pbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--acc); border-radius: 3px; transition: width .35s var(--ease); }
.pg b { min-width: 3.2em; }

/* 화면 폭에 따라 */
.jg.L-mid .art span, .jg.L-mid .full .lbl { display: none; }
.jg.L-mid .full { width: 34px; padding: 0; }
.jg.L-mid .art { max-width: 170px; }
.jg.L-mid .stats { gap: 10px; }
.jg.L-mid .pbar { width: 48px; }
.jg.L-narrow .bar { padding: 6px; gap: 6px; }
.jg.L-narrow .art, .jg.L-narrow .mv, .jg.L-narrow #bEdge, .jg.L-narrow #bPeek, .jg.L-narrow .lbl { display: none; }
.jg.L-narrow .tb.pick, .jg.L-narrow .full { width: 38px; padding: 0; }
.jg.L-narrow .bar-l { flex: none; }
.jg.L-narrow .stats { flex: 1 1 auto; justify-content: center; gap: 10px; }
.jg.L-narrow .pbar { width: 44px; }
.jg.tiny .pbar { display: none; }
.jg.cramped .art, .jg.cramped .mv { display: none; }

/* 아래 도구 (좁은 화면) */
.tools { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: none; align-items: center; justify-content: space-around; gap: 4px; padding: 5px 6px; background: var(--bar); border-top: 1px solid rgba(0, 0, 0, 0.4); }
.jg.L-narrow .tools { display: flex; }
.tools .tb { flex: 1 1 0; max-width: 120px; height: 38px; padding: 0 8px; font-size: 13px; border-color: transparent; }
.tools .tb[aria-pressed="true"] { border-color: var(--acc); }

/* 원본 미리보기 */
.peek { position: absolute; right: 10px; z-index: 4; width: clamp(110px, 20%, 230px); padding: 5px 5px 4px; border-radius: var(--r1); background: #f3eee2; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); cursor: zoom-in; transform-origin: top right; animation: peekIn .3s var(--ease); }
.peek img { display: block; width: 100%; height: auto; border-radius: 3px; }
.peek span { display: block; margin-top: 3px; text-align: center; font: 500 12px/1.3 var(--f-body); color: #6b6455; }
@keyframes peekIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.jg.L-narrow .peek { width: clamp(96px, 30%, 160px); }

/* 알림 · 기다림 */
.toast { position: absolute; left: 50%; top: 58px; z-index: 8; transform: translate(-50%, -8px); max-width: calc(100% - 24px); padding: 8px 14px; border-radius: var(--r2); background: rgba(16, 14, 10, 0.94); border: 1px solid var(--line); color: var(--ink); font-size: 14px; line-height: 1.45; text-align: center; white-space: normal; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.busy { position: absolute; left: 50%; top: 50%; z-index: 9; transform: translate(-50%, -50%); padding: 12px 18px; border-radius: var(--r2); background: rgba(16, 14, 10, 0.92); font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--acc); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 메뉴 */
.pop { position: absolute; z-index: 9; min-width: 210px; padding: 6px; border-radius: var(--r2); background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); display: grid; gap: 2px; overflow-y: auto; }
.pop button { height: 38px; padding: 0 var(--s3); border: 0; border-radius: var(--r1); background: transparent; color: var(--ink); text-align: left; font: 500 14px/1 var(--f-body); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.pop button:hover, .pop button:focus-visible { background: var(--bg-3); }
.pop button.on small { color: var(--acc); }
.pop small { color: var(--ink-3); font: 600 12px/1 var(--f-body); }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }

/* 완성 카드 */
.res { position: absolute; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(430px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; padding: var(--s4) var(--s5) var(--s5); border-radius: var(--r3); background: rgba(28, 25, 20, 0.97); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); animation: resIn .5s var(--ease) both; scrollbar-width: thin; }
@keyframes resIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
.res-k { margin: 0; font-size: 13px; color: var(--ink-3); }
.res-t { margin: 2px 0 var(--s1); font: 700 34px/1.15 var(--f-disp); color: var(--acc); }
.res-big { margin: 0 0 var(--s3); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--s2); font: 700 40px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.res-big small { font: 500 15px/1 var(--f-body); color: var(--ink-2); }
.nb { align-self: center; display: inline-flex; align-items: center; gap: 4px; font: 700 12px/1 var(--f-body); padding: 6px 10px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); }
.nb svg { width: 12px; height: 12px; }
.res-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 var(--s3); }
.res-stats div { padding: 6px var(--s2); border-radius: var(--r1); background: var(--bg-3); }
.res-stats dt { font-size: 12px; color: var(--ink-2); }
.res-stats dd { margin: 0; font: 700 17px/1.3 var(--f-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-art { display: flex; gap: var(--s3); align-items: flex-start; margin: 0 0 var(--s4); padding: var(--s3); border-radius: var(--r2); background: rgba(255, 255, 255, 0.04); }
.res-art img { width: 84px; height: 64px; object-fit: cover; border-radius: 4px; flex: none; }
.res-art b { display: block; font-size: 15px; }
.res-art span { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.res-art p { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.res-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.res-btns button { height: 44px; border-radius: var(--r1); border: 1px solid var(--line); background: var(--bg-3); color: var(--ink); font: 600 14px/1 var(--f-body); padding: 0 var(--s2); }
.res-btns button:hover { border-color: var(--ink-3); }
.res-btns .big { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.res-btns .wide { grid-column: 1 / -1; background: transparent; }
.res-x { position: absolute; top: 10px; right: 10px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink-2); font-size: 13px; }
.jg.short .res { padding: var(--s3) var(--s4) var(--s4); }
.jg.short .res-big { font-size: 32px; margin-bottom: var(--s2); }
.jg.short .res-t { font-size: 26px; }
.jg.short .res-art p { display: none; }

/* 모달 */
.modal { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: var(--s3); background: rgba(8, 7, 5, 0.62); }
.mbox { position: relative; width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: var(--r3); background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: mIn .35s var(--ease); }
.mbox.wide { width: min(1060px, 100%); max-height: min(100%, 760px); }
.mbox.tall { height: 100%; }
.mbox.small { width: min(420px, 100%); }
@keyframes mIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4) var(--s2) var(--s5); flex: none; }
.mtitle { margin: 0; font: 700 22px/1.2 var(--f-disp); }
.x { height: 32px; padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink-2); font-size: 13px; }
.x:hover { color: var(--ink); border-color: var(--ink-3); }
.mbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--s5) var(--s5); display: grid; grid-auto-rows: max-content; gap: var(--s3); align-content: start; font-size: 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; -webkit-user-select: text; user-select: text; }
.mbody h3 { margin: var(--s2) 0 0; font: 700 17px/1.3 var(--f-disp); }
.mbody p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.muted { color: var(--ink-3) !important; }
.btn { height: 42px; padding: 0 var(--s4); border-radius: var(--r1); border: 1px solid var(--line); background: var(--bg-3); color: var(--ink); font: 600 14px/1 var(--f-body); display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); cursor: pointer; }
.btn:hover { border-color: var(--ink-3); }
.btn.big { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn svg { width: 16px; height: 16px; }
.btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 2px; min-height: 42px; background: var(--bg-2); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 calc(var(--s5) * -1); padding: 0 var(--s5); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; padding: 10px var(--s3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--acc); }
.gal { display: grid; gap: var(--s4); padding-top: var(--s3); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--s3); }
.card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 0 0 var(--s2); border: 1px solid transparent; border-radius: var(--r2); background: var(--bg-3); color: var(--ink); text-align: left; white-space: normal; overflow: hidden; transition: transform .2s var(--ease), border-color .15s; }
.card:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.cimg { display: block; aspect-ratio: 4 / 3; background: #0d0c0a; overflow: hidden; }
.cimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct { padding: 6px var(--s2) 0; font-size: 14px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca { padding: 0 var(--s2); font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; font: 700 12px/1.3 var(--f-body); background: rgba(14, 12, 9, 0.82); color: var(--ink); }
.badge.go { background: var(--acc); color: var(--acc-ink); }
.badge svg { width: 11px; height: 11px; color: var(--acc); }
.gh { margin: var(--s2) 0 0; font: 700 17px/1.3 var(--f-disp); }
.empty { color: var(--ink-3) !important; grid-column: 1 / -1; }
.daily-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; padding: var(--s4); border-radius: var(--r3); background: var(--bg-3); }
.daily-card .cimg { aspect-ratio: auto; max-height: 360px; border-radius: var(--r1); background: none; display: flex; justify-content: center; }
.daily-card .cimg img { width: auto; max-width: 100%; height: auto; max-height: 360px; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.dc-txt { display: grid; gap: var(--s2); }
.dc-k { display: flex; align-items: center; gap: 6px; color: var(--acc) !important; font-weight: 600; }
.dc-k svg { width: 16px; height: 16px; }
.dc-txt h3 { margin: 0; font: 700 26px/1.25 var(--f-disp); }
.dc-a { font-size: 14px; }
.dc-n { font-size: 14px; }
.dc-s { font-weight: 600; color: var(--ink) !important; }
.dc-h { font-size: 13px; color: var(--ink-3) !important; }
.mine { display: grid; gap: var(--s4); }
.mine-top { display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r2); background: var(--bg-3); }
.mine-top .btn { justify-self: start; }
.mine-card { padding: 0; }
.mc-open { display: flex; flex-direction: column; gap: 2px; padding: 0 0 var(--s2); border: 0; background: none; color: inherit; text-align: left; white-space: normal; }
.mc-del { margin: 0 var(--s2) var(--s2); height: 30px; border-radius: var(--r1); border: 1px solid var(--line); background: none; color: var(--ink-2); font-size: 12px; }
.setup { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: var(--s5); align-items: start; padding-top: var(--s2); }
.su-img { position: relative; width: 100%; max-height: 62vh; border-radius: var(--r1); overflow: hidden; background: #0d0c0a; }
.su-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.su-img img.big { animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.su-opt { display: grid; gap: var(--s3); }
.su-opt h3 { margin: 0; font: 700 24px/1.25 var(--f-disp); }
.su-a { font-size: 13px; color: var(--ink-3) !important; }
.su-n { font-size: 14px; }
.su-l { font-weight: 600; color: var(--ink) !important; margin-top: var(--s2) !important; }
.su-d { display: flex; align-items: center; gap: 6px; color: var(--acc) !important; font-weight: 600; }
.su-d svg { width: 16px; height: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips button { height: 38px; min-width: 46px; padding: 0 10px; border-radius: var(--r1); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 700 14px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.chips button:hover { border-color: var(--ink-3); }
.chips button.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.sw-row { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: none; color: var(--ink); text-align: left; white-space: normal; }
.sw-row b { display: block; font-size: 14px; }
.sw-row small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.sw { position: relative; width: 34px; height: 20px; margin-top: 1px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); transition: transform .25s var(--ease), background .2s; }
.sw-row[aria-pressed="true"] { border-color: rgba(224, 189, 106, 0.6); }
.sw-row[aria-pressed="true"] .sw { background: var(--acc-soft); border-color: var(--acc); }
.sw-row[aria-pressed="true"] .sw::after { transform: translateX(14px); background: var(--acc); }
.su-best summary { cursor: pointer; color: var(--ink-2); font-size: 13px; }
.su-best .kt { margin-top: var(--s2); }
.info { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: var(--s5); align-items: start; padding-top: var(--s2); }
.info-img img { display: block; width: 100%; height: auto; max-height: 64vh; object-fit: contain; border-radius: 4px; background: #0d0c0a; }
.info-n { font-size: 15px; color: var(--ink) !important; margin-bottom: var(--s3) !important; }
.kt { width: 100%; border-collapse: collapse; font-size: 14px; }
.kt th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 7px var(--s2) 7px 0; width: 34%; vertical-align: top; }
.kt td { padding: 7px 0; font-weight: 600; }
.kt td small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.kt tr + tr th, .kt tr + tr td { border-top: 1px solid var(--line); }
.kt a { color: var(--acc); }
.ck { display: flex; align-items: flex-start; gap: var(--s2); font-size: 14px; line-height: 1.5; cursor: pointer; }
.ck input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acc); flex: none; }
.ck small { display: block; color: var(--ink-3); font-size: 12px; }
.sl { display: grid; grid-template-columns: 9em minmax(0, 1fr) 3em; align-items: center; gap: var(--s3); font-size: 14px; color: var(--ink-2); }
.sl input { width: 100%; accent-color: var(--acc); }
.sl output { font-weight: 600; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--s2); }
.swatch { height: 36px; padding: 0 var(--s3) 0 6px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); font-size: 13px; display: inline-flex; align-items: center; gap: var(--s2); }
.swatch i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.swatch.on { border-color: var(--acc); color: var(--acc); }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.st-card { padding: var(--s3); border-radius: var(--r2); background: var(--bg-3); }
.st-card h4 { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.big-n { font: 700 28px/1.2 var(--f-body); font-variant-numeric: tabular-nums; }
.rec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.rec-list li { display: flex; gap: var(--s3); align-items: center; padding: var(--s2); border-radius: var(--r1); background: var(--bg-3); }
.rec-list img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; flex: none; }
.rec-list b { display: block; font-size: 14px; }
.rec-list span { display: block; font-size: 12px; color: var(--ink-3); }
.rec-list em { font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .setup, .info, .daily-card { grid-template-columns: 1fr; gap: var(--s3); }
  .su-img { max-height: 34vh; aspect-ratio: auto !important; height: 34vh; }
  .daily-card .cimg, .daily-card .cimg img { max-height: 30vh; }
  .info-img img { max-height: 40vh; }
  .mbody { padding: 0 var(--s4) var(--s4); }
  .tabs { margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); }
  .mhead { padding-left: var(--s4); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s2); }
  .mbox.wide { max-height: 100%; }
}
.jg.short .mbox.wide { max-height: 100%; }
.jg.short .su-img { max-height: 46vh; }
.jg.short .daily-card .cimg, .jg.short .daily-card .cimg img { max-height: 40vh; }

/* 화면 읽기 프로그램 전용 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- 소개 글 */
.about { max-width: 1240px; margin: 0 auto; padding: var(--s7) clamp(var(--s4), 4vw, var(--s7)) var(--s6); display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(220px, 0.8fr); gap: var(--s6) clamp(var(--s5), 5vw, var(--s8)); }
.about-main { min-width: 0; }
.about h2 { margin: var(--s6) 0 var(--s2); font: 700 27px/1.3 var(--f-disp); }
.about h2:first-child { margin-top: 0; }
.about h3 { margin: var(--s4) 0 var(--s1); font: 700 19px/1.35 var(--f-disp); }
.about p, .about li { font-size: 16px; color: var(--page-ink); }
.about p { margin: 0 0 var(--s3); }
.about ul, .about ol { margin: 0 0 var(--s3); padding-left: 1.3em; }
.about li { margin-bottom: 6px; }
.about strong { font-weight: 600; }
.about dl { margin: 0; }
.about dt { margin-top: var(--s4); font-weight: 600; }
.about dd { margin: 4px 0 0; color: var(--page-2); }
.about-side { min-width: 0; font-size: 14px; color: var(--page-2); }
.about-side h3 { margin: 0 0 var(--s2); font: 700 21px/1.3 var(--f-disp); color: var(--page-ink); }
.keytab { width: 100%; border-collapse: collapse; margin-bottom: var(--s5); font-size: 14px; }
.keytab th { text-align: left; font-weight: 500; padding: 6px var(--s2) 6px 0; color: var(--page-2); width: 50%; }
.keytab td { padding: 6px 0; font-weight: 600; color: var(--page-ink); }
.keytab tr + tr th, .keytab tr + tr td { border-top: 1px solid var(--page-line); }
.credits { margin: 0 0 var(--s3); }
.credits h3 { margin-top: var(--s4); }
.credits ol { list-style: none; padding: 0; margin: 0; columns: 2 320px; column-gap: var(--s5); }
.credits li { break-inside: avoid; margin: 0 0 var(--s2); font-size: 14px; line-height: 1.55; color: var(--page-2); }
.credits li b { color: var(--page-ink); font-weight: 600; }
.credits li a { color: var(--page-2); }
.src-note { font-size: 14px !important; color: var(--page-2) !important; }
.more { margin-top: var(--s5); font-size: 14px; color: var(--page-2); line-height: 1.9; }
.more a { white-space: nowrap; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; padding-top: var(--s6); } }
.foot { border-top: 1px solid var(--page-line); padding: var(--s5) clamp(var(--s4), 4vw, var(--s7)) var(--s6); font-size: 13px; color: var(--page-2); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); max-width: 1240px; margin: 0 auto; }
.foot a { color: var(--page-2); white-space: nowrap; }
.foot p { flex-basis: 100%; margin: var(--s2) 0 0; }
.nojs { padding: var(--s5); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}