/* PLAYORA 미로찾기 - 공책과 연필 느낌 (종이색 바탕, 흑연 잉크, 빨간 색연필 강조) */
:root {
  --paper: #fbf7ee; --paper-2: #f3ecdc; --paper-3: #e7dec7; --rule: #cfdcee; --margin-red: #efb3a8;
  --ink: #2a2d36; --ink-2: #545966; --ink-3: #838894; --line: #d9d0bb;
  --red: #d24130; --red-2: #b2321f; --red-soft: #fbe4de; --blue: #2f6fcf; --gold: #e3a91f; --green: #3a9a5c;
  --page: #f2ede2; --page-ink: #22252d; --page-2: #565b67; --page-line: #dcd4c3;
  --f-body: "IBM Plex Sans KR", "Pretendard", system-ui, -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --f-disp: "Bagel Fat One", "IBM Plex Sans KR", "Malgun Gothic", sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r1: 8px; --r2: 12px; --r3: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@supports (color: oklch(0 0 0)) {
  :root {
    --paper: oklch(0.977 0.013 88); --paper-2: oklch(0.945 0.02 88); --paper-3: oklch(0.9 0.03 88); --rule: oklch(0.88 0.03 255);
    --ink: oklch(0.29 0.017 270); --ink-2: oklch(0.45 0.018 270); --ink-3: oklch(0.62 0.014 270); --line: oklch(0.86 0.028 88);
    --red: oklch(0.58 0.18 32); --red-2: oklch(0.5 0.17 32); --red-soft: oklch(0.94 0.035 35);
    --page: oklch(0.948 0.014 88); --page-line: oklch(0.87 0.02 88);
  }
}
* { 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; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
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.1em; 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: 400 clamp(32px, 4.4vw, 48px)/1.05 var(--f-disp); letter-spacing: 0.01em; color: var(--ink); }
.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)); }

/* ---------------------------------------------------------------- 게임 무대 */
.mz { position: relative; width: 100%; height: clamp(520px, calc(100svh - 132px), 860px); background: var(--paper); color: var(--ink); overflow: hidden; border-radius: var(--r2); border: 1px solid var(--line);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; font: 400 14px/1.45 var(--f-body); }
@media (max-width: 640px) { .mz { border-radius: 0; border-left: 0; border-right: 0; height: calc(100svh - 96px); min-height: 560px; } .head { padding-top: var(--s3); } .head p { display: none; } }
html.embed, html.embed body { height: 100%; overflow: hidden; background: var(--paper); }
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 .mz { position: fixed; inset: 0; width: auto; height: auto; min-height: 0; border-radius: 0; border: 0; }
.mz:fullscreen { border-radius: 0; border: 0; }
.mz button:focus-visible, .mz input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mz svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nojs { padding: var(--s6); text-align: center; }

/* 위 막대 */
.bar { position: absolute; top: 0; left: 0; right: 0; height: var(--bar-h, 48px); z-index: 8; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2) 0 var(--s2); background: var(--paper); border-bottom: 1.5px dashed var(--line); }
.bar-l { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1 1 auto; overflow: hidden; }
.bar-brand { padding-left: var(--s2); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.bar-brand b { font-weight: 700; letter-spacing: 0.1em; color: var(--ink); margin-right: 6px; }
.mz:not(.at-home) .bar-brand { display: none; }
.bar-t { font: 600 15px/1.2 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bar-m { display: flex; align-items: center; gap: var(--s3); flex: none; font-variant-numeric: tabular-nums; }
.st { white-space: nowrap; font-size: 14px; color: var(--ink-2); }
.st-time { font: 600 17px/1 var(--f-body); color: var(--ink); min-width: 2.6em; text-align: right; }
.st-keys { display: inline-flex; gap: 4px; }
.kd { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--kc); display: inline-block; }
.kd.on { background: var(--kc); }
.bar-r { display: flex; align-items: center; gap: 6px; flex: none; }
.tb { flex: none; height: 34px; min-width: 34px; padding: 0 12px; gap: 5px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--f-body); }
.tb.icon { width: 34px; padding: 0; border-color: transparent; }
.tb:hover { background: var(--paper-2); }
.tb.icon:hover { border-color: var(--line); }
.tb.back { padding: 0 12px 0 6px; }
.tb.hint { border-color: var(--red); color: var(--red-2); }
.tb svg { width: 18px; height: 18px; }
.mz.narrow .tb.back span, .mz.narrow .opt { display: none; }
.mz.narrow .tb.back { width: 34px; padding: 0; }
.mz.narrow .bar-t { display: none; }
.mz.tiny .tb.hint span, .mz.tiny .opt2 { display: none; }
.mz.tiny .tb.hint { width: 34px; padding: 0; }
.mz.tiny .bar-m { gap: var(--s2); }
.mz.tiny .bar-r { gap: 2px; }
.mz.short .tb { height: 30px; }
.view { position: absolute; top: var(--bar-h, 48px); left: 0; right: 0; bottom: 0; }

/* ---------------------------------------------------------------- 첫 화면: 공책 목차 */
.vh { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s5); padding: var(--s5) var(--s6) var(--s4) var(--s6); overflow: auto;
  background-image: linear-gradient(90deg, transparent 0, transparent calc(var(--s6) - 14px), var(--margin-red) calc(var(--s6) - 14px), var(--margin-red) calc(var(--s6) - 12px), transparent calc(var(--s6) - 12px)); }
.h-left { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.h-kick { margin: 0; font: 600 13px/1.2 var(--f-body); letter-spacing: 0.06em; color: var(--red-2); }
.h-title { margin: var(--s2) 0 var(--s2); font: 400 clamp(44px, 7.4vw, 76px)/1 var(--f-disp); color: var(--ink); letter-spacing: 0.01em; }
.h-sub { margin: 0 0 var(--s3); font-size: 15px; color: var(--ink-2); max-width: 30em; }
.h-art { position: relative; flex: 1 1 auto; min-height: 120px; }
.h-art canvas { position: absolute; inset: 0; display: block; }
.h-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { border-bottom: 1.5px dotted var(--line); }
.toc li:first-child { border-top: 2px solid var(--ink); }
.toc-b { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: 9px var(--s2) 9px 0; border: 0; background: none; text-align: left; border-radius: var(--r1); }
.toc-b:hover { background: var(--paper-2); }
.toc-b:hover .toc-t { color: var(--red-2); }
.toc-n { font: 400 18px/1 var(--f-disp); color: var(--ink-3); text-align: right; }
.toc-m { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; overflow: hidden; }
.toc-t { font: 400 20px/1.25 var(--f-disp); color: var(--ink); white-space: nowrap; }
.toc-d { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.toc-v { font: 600 13px/1 var(--f-body); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-foot { display: flex; gap: var(--s4); margin: var(--s3) 0 0; }
.linkish { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--ink-2); font-size: 14px; padding: 6px 2px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.linkish:hover { color: var(--ink); }
.linkish svg { width: 18px; height: 18px; }
.mz.port .vh { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: var(--s4) var(--s4) var(--s4) var(--s6); gap: var(--s3); }
.mz.port .h-left { display: grid; grid-template-columns: minmax(0, 1fr) 120px; grid-template-areas: "k a" "t a" "s a"; column-gap: var(--s3); }
.mz.port .h-kick { grid-area: k; } .mz.port .h-title { grid-area: t; margin: 4px 0; } .mz.port .h-sub { grid-area: s; font-size: 14px; margin: 0; }
.mz.port .h-art { grid-area: a; min-height: 110px; }
.mz.port .toc-m { flex-direction: column; align-items: flex-start; gap: 0; }
.mz.port .toc-b { padding: 7px var(--s2) 7px 0; }
.mz.short .vh { padding-top: var(--s3); padding-bottom: var(--s2); gap: var(--s4); }
.mz.short .h-title { font-size: 46px; }
.mz.short .h-sub { font-size: 14px; }
.mz.short .toc-b { padding: 5px var(--s2) 5px 0; }
.mz.short .toc-t { font-size: 17px; }
.mz.short .h-foot { margin-top: var(--s1); }
.mz.tiny .toc-v { display: none; }
.mz.tiny .vh { padding-left: var(--s5); background-image: none; }

/* ---------------------------------------------------------------- 단계 목록 */
.vs { overflow: auto; padding: var(--s4) var(--s5) var(--s5); }
.tabs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.wt { display: inline-flex; align-items: baseline; gap: var(--s2); padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); }
.wt.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.wt-n { font: 400 16px/1.2 var(--f-disp); }
.wt-s { font-size: 12px; opacity: 0.8; font-variant-numeric: tabular-nums; }
.sgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); }
.mz.narrow .sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.mz.tiny .sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 1.5px solid var(--ink); border-radius: var(--r2); background: var(--paper); min-width: 0; }
.sc:hover { background: var(--paper-2); }
.sc.done { background: oklch(0.96 0.04 90); }
.sc.locked { border-style: dashed; border-color: var(--line); color: var(--ink-3); }
.sc-n { font: 400 24px/1 var(--f-disp); }
.sc-i { display: inline-flex; gap: 2px; align-items: center; color: var(--ink-2); }
.sc-i svg { width: 22px; height: 22px; }
.sc-x svg { width: 14px; height: 14px; }
.sc-x { display: inline-flex; color: var(--red-2); }
.sc-z { font-size: 12px; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sc.locked .sc-z { opacity: 0.7; }
.mz.short .sc-z { display: none; }
.sc-s { display: inline-flex; gap: 1px; }
.sc-s i { display: inline-flex; color: var(--line); }
.sc-s i svg { width: 14px; height: 14px; }
.sc-s i.on { color: var(--gold); }
.mz svg .fillp { fill: currentColor; stroke: none; }
.sc-l svg { width: 16px; height: 16px; }
.s-note { margin: var(--s4) 0 0; color: var(--ink-2); font-size: 14px; }
.mz.short .sc { padding: 6px 4px 5px; gap: 2px; }
.mz.short .sc-n { font-size: 20px; }

/* ---------------------------------------------------------------- 고르기 화면 */
.vu { display: flex; flex-direction: column; }
.su { flex: 1 1 auto; overflow: auto; padding: var(--s4) var(--s5) var(--s3); }
.su-r { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: 8px 0; border-bottom: 1.5px dotted var(--line); }
.su-l { margin: 7px 0 0; font-weight: 600; color: var(--ink-2); font-size: 14px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); font-size: 13px; font-weight: 500; }
.seg button svg { width: 16px; height: 16px; }
.seg button:hover { border-color: var(--ink-3); }
.seg button.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.su-note { margin: var(--s3) 0 0; font-size: 13px; color: var(--ink-2); }
.su-go { flex: none; padding: var(--s3) var(--s5); border-top: 1.5px dashed var(--line); background: var(--paper); display: flex; justify-content: flex-end; }
.big { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--red); color: #fff; font: 700 15px/1 var(--f-body); box-shadow: 0 2px 0 var(--red-2); }
.big:hover { background: var(--red-2); }
.big svg { width: 18px; height: 18px; }
.ghost { height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; font-weight: 600; }
.mz.narrow .su-r { grid-template-columns: 1fr; gap: 4px; }
.mz.narrow .su-l { margin: 0; }
.mz.narrow .su, .mz.narrow .vs { padding-left: var(--s3); padding-right: var(--s3); }
.mz.narrow .su-go { padding: var(--s2) var(--s3); }
.mz.short .su-r { padding: 4px 0; }
.mz.short .seg button { height: 30px; }

/* ---------------------------------------------------------------- 미로 대결: 상대 소개 */
.vm { display: grid; place-items: center; padding: var(--s4); overflow: auto; }
.mt { width: min(560px, 100%); text-align: center; }
.mt-msg { margin: 0 0 var(--s4); font: 400 22px/1.3 var(--f-disp); }
.mt-cards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); }
.mt-vs { font: 400 20px/1 var(--f-disp); color: var(--red); }
.pc { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center; padding: var(--s4) var(--s3); border: 1.5px solid var(--ink); border-radius: var(--r2); background: var(--paper); min-width: 0; animation: pop 0.4s var(--ease); }
.pc-badge { width: 14px; height: 14px; border-radius: 50%; background: var(--rk); }
.pc-n { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pc-r, .pc-w { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.pc-say { position: absolute; top: -14px; right: 6px; background: var(--ink); color: var(--paper); font-size: 12px; padding: 3px 8px; border-radius: 10px; opacity: 0; transform: translateY(4px); transition: 0.3s var(--ease); white-space: nowrap; }
.pc-say.on { opacity: 1; transform: none; }
.ai { font-style: normal; font: 700 12px/1 var(--f-body); background: var(--ink); color: var(--paper); padding: 2px 5px; border-radius: 5px; margin-left: 2px; vertical-align: 2px; letter-spacing: 0.04em; }
.mt-note { margin: var(--s4) 0 var(--s3); font-size: 13px; color: var(--ink-2); }
@keyframes pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- 놀이 화면 */
.vp canvas { position: absolute; inset: 0; display: block; touch-action: none; }
.race { position: absolute; top: 6px; left: 8px; right: 8px; display: flex; gap: var(--s3); z-index: 3; pointer-events: none; }
.rp { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); border: 1px solid var(--line); font-size: 13px; }
.rp b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.rp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.rp-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; min-width: 20px; }
.rp-bar i { display: block; height: 100%; width: 0; background: var(--c); transition: width 0.25s var(--ease); }
.rp-v { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; font-size: 12px; min-width: 2.6em; text-align: right; }
.mz.tiny .race { flex-direction: column; gap: 4px; }
.count { position: absolute; inset: 0; display: grid; place-items: center; z-index: 6; pointer-events: none; }
.count b { font: 400 96px/1 var(--f-disp); color: var(--ink); text-shadow: 0 3px 0 var(--paper), 0 0 24px var(--paper); animation: cnt 0.7s var(--ease); }
.count b.go { color: var(--red); font-size: 64px; }
@keyframes cnt { from { transform: scale(1.5); opacity: 0; } to { transform: none; opacity: 1; } }
.toast { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 7; max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.toast.on { animation: toastIn 0.35s var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mz.pads-side .toast, .pads:not([hidden]) ~ .toast { bottom: 170px; }
.mz.pads-side .pads:not([hidden]) ~ .toast { bottom: 16px; }
.chip-back { position: absolute; right: 12px; bottom: 12px; z-index: 6; height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--paper); font-weight: 600; }
.pz { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); background: rgba(251, 247, 238, 0.9); text-align: center; padding: var(--s4); }
.pz-t { margin: 0; font: 400 28px/1.2 var(--f-disp); }
.pz-s { margin: 0 0 var(--s3); color: var(--ink-2); }

/* 방향 단추 */
.pads { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: flex-end; padding: 0 12px; z-index: 4; pointer-events: none; }
.pads.two { justify-content: space-between; }
.mz.pads-side .pads { top: 0; bottom: 0; align-items: flex-end; padding-bottom: 12px; }
.pad { position: relative; width: 146px; height: 146px; pointer-events: auto; }
.pk { position: absolute; width: 48px; height: 48px; border-radius: 14px; border: 2px solid var(--c, var(--ink)); background: rgba(255, 255, 255, 0.9); color: var(--c, var(--ink)); display: grid; place-items: center; touch-action: none; }
.pk:active { background: var(--c, var(--ink)); color: #fff; }
.pk svg { width: 24px; height: 24px; stroke-width: 2.6; }
.pk-up { left: 49px; top: 0; } .pk-down { left: 49px; bottom: 0; } .pk-left { left: 0; top: 49px; } .pk-right { right: 0; top: 49px; }

/* 결과 */
.res { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: var(--s3); background: rgba(42, 45, 54, 0.32); overflow: auto; }
.rc { width: min(420px, 100%); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r3); padding: var(--s5) var(--s5) var(--s4); box-shadow: 6px 6px 0 rgba(42, 45, 54, 0.85); animation: pop 0.45s var(--ease); }
.rc-k { margin: 0; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-t { margin: 2px 0 var(--s2); font: 400 40px/1.1 var(--f-disp); color: var(--red); }
.rc-stars { display: flex; gap: 6px; margin-bottom: var(--s3); }
.rc-stars i { display: inline-flex; color: var(--paper-3); }
.rc-stars i svg { width: 34px; height: 34px; }
.rc-stars i.on { color: var(--gold); animation: starIn 0.5s var(--ease) both; animation-delay: var(--d); }
@keyframes starIn { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.rc-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--s4); margin: 0 0 var(--s3); }
.rc-dl div { border-bottom: 1.5px dotted var(--line); padding-bottom: 4px; }
.rc-dl dt { font-size: 12px; color: var(--ink-2); }
.rc-dl dd { margin: 0; font: 600 18px/1.3 var(--f-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-dl small { font-size: 13px; margin-left: 4px; }
.rc-dl .up { color: var(--green); } .rc-dl .dn { color: var(--red); }
.rc-s { margin: 0 0 var(--s3); font-size: 14px; color: var(--ink-2); }
.rc-say { display: inline-block; margin-left: 4px; color: var(--ink); }
.rc-b { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rc-b button:not(.big) { height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; font-weight: 600; font-size: 14px; }
.rc-b button:not(.big):hover { background: var(--paper-2); }
.rc-b .big { flex: 1 0 100%; }
.mz.short .rc { padding: var(--s3) var(--s4); }
.mz.short .rc-t { font-size: 30px; margin-bottom: 4px; }
.mz.short .rc-stars i svg { width: 26px; height: 26px; }
.mz.short .rc-dl dd { font-size: 16px; }
.mz.short .rc-b .big { height: 38px; }
.mz.short .rc-b button:not(.big) { height: 34px; }

/* ---------------------------------------------------------------- 창 */
.modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: var(--s3); background: rgba(42, 45, 54, 0.4); }
.mbox { width: min(540px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r3); box-shadow: 6px 6px 0 rgba(42, 45, 54, 0.85); overflow: hidden; }
.mhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-bottom: 1.5px dashed var(--line); }
.mtitle { margin: 0; font: 400 22px/1.2 var(--f-disp); }
.x { height: 34px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; font-weight: 600; }
.mbody { overflow: auto; padding: var(--s3) var(--s5) var(--s5); font-size: 14px; }
.set-r { padding: 8px 0; border-bottom: 1.5px dotted var(--line); }
.set-r.dim { opacity: 0.4; pointer-events: none; }
.set-l { margin: 0 0 6px; font-weight: 600; color: var(--ink-2); font-size: 13px; }
.hint { color: var(--ink-2); font-size: 13px; margin: var(--s3) 0 0; }
.help p { margin: 0 0 var(--s3); }
.kt { width: 100%; border-collapse: collapse; margin: 0 0 var(--s3); }
.kt th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 6px var(--s2) 6px 0; width: 44%; }
.kt td { font-weight: 600; padding: 6px 0; }
.kt tr + tr th, .kt tr + tr td { border-top: 1px dotted var(--line); }
.ck { display: flex; align-items: center; gap: var(--s3); padding: 10px 0; border-bottom: 1.5px dotted var(--line); cursor: pointer; }
.ck input { width: 20px; height: 20px; accent-color: var(--red); flex: none; }
.ck span { display: flex; flex-direction: column; }
.ck small { color: var(--ink-2); font-size: 12px; }
.big.wide { width: 100%; margin-top: var(--s4); }
/* 창 아래 고정 단추 줄 (인쇄하기): 내용이 길어 내려야 해도 늘 보임 */
.mfoot { flex: none; padding: var(--s3) var(--s5) var(--s4); border-top: 1.5px dashed var(--line); background: var(--paper); }
.mfoot .big.wide { margin-top: 0; }
.mz.short .mfoot { padding: var(--s2) var(--s4) var(--s3); }
.mz.short .mfoot .big { height: 40px; }
.dly-d { margin: 0 0 var(--s3); font-weight: 600; }
.dly-s { margin: var(--s2) 0 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.dly-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.dlb { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: var(--s3) 6px; border: 1.5px solid var(--ink); border-radius: var(--r2); background: var(--paper); min-width: 0; }
.dlb:hover { background: var(--paper-2); }
.dlb.done { background: oklch(0.96 0.04 90); }
.dlb b { font: 400 18px/1.2 var(--f-disp); }
.dlb span, .dlb em { font-size: 12px; color: var(--ink-2); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dlb-i svg { width: 26px; height: 26px; }
.focus-hint { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); border: 0; background: rgba(251, 247, 238, 0.78); }
.focus-hint b { font: 400 30px/1.2 var(--f-disp); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 10px 26px; box-shadow: 4px 4px 0 var(--ink); }
.focus-hint span { font-size: 13px; color: var(--ink-2); text-align: center; padding: 0 var(--s3); }

/* ---------------------------------------------------------------- 소개 글 */
.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(--s7); }
.about-main { min-width: 0; }
.about h2 { margin: var(--s6) 0 var(--s2); font: 400 27px/1.3 var(--f-disp); letter-spacing: 0.01em; color: var(--ink); }
.about h2:first-child { margin-top: 0; }
.about h3 { margin: var(--s4) 0 var(--s1); font-size: 17px; font-weight: 700; }
.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: 400 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: 46%; }
.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); }
.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); gap: var(--s5); } }
.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(--s5); 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; }

/* ---------------------------------------------------------------- 인쇄 */
.mz-print { display: none; }
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  html.mz-printing, html.mz-printing body { background: #fff !important; height: auto !important; overflow: visible !important; }
  html.mz-printing body > *:not(.mz-print) { display: none !important; }
  html.mz-printing .mz-print { display: block !important; color: #111; font-family: "IBM Plex Sans KR", "Malgun Gothic", sans-serif; }
  .pp { height: 276mm; display: flex; flex-direction: column; break-after: page; page-break-after: always; overflow: hidden; }
  .pp:last-child { break-after: auto; page-break-after: auto; }
  .pp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 5mm; border-bottom: 0.4mm solid #111; padding-bottom: 2mm; margin-bottom: 4mm; font-size: 10pt; }
  .pp-head b { font-size: 13pt; letter-spacing: 0.02em; white-space: nowrap; }
  .pp-t { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-name { white-space: nowrap; }
  .pp-name i { display: inline-block; width: 26mm; border-bottom: 0.3mm solid #111; margin: 0 3mm 0 1mm; }
  .pp-name i:last-child { margin-right: 0; }
  .pp-grid { flex: 1 1 auto; display: grid; gap: 4mm; }
  .pp-1 .pp-grid { grid-template-columns: 186mm; grid-template-rows: 244mm; }
  .pp-2 .pp-grid { grid-template-columns: 186mm; grid-template-rows: 120mm 120mm; }
  .pp-4 .pp-grid { grid-template-columns: 91mm 91mm; grid-template-rows: 120mm 120mm; }
  .pp-item { margin: 0; display: flex; flex-direction: column; break-inside: avoid; min-height: 0; }
  .pp-item figcaption { font-size: 10pt; font-weight: 600; margin-bottom: 1.5mm; }
  .pp-item figcaption small { font-size: 8.5pt; font-weight: 400; color: #444; }
  .pp-box { flex: 1 1 auto; min-height: 0; }
  .pp-box svg { width: 100%; height: 100%; display: block; }
  .pp-foot { margin: 3mm 0 0; font-size: 8.5pt; color: #555; text-align: center; }
}

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