/* PLAYORA 지뢰찾기 */
:root {
  --bg: #1b1813; --bg-2: #24201a; --bg-3: #2f2a22; --line: #433c31; --ink: #f3efe6; --ink-2: #bdb4a3; --ink-3: #8f8676;
  --key: #e4dccb; --key-hi: #f3eee3; --key-lo: #b3a891; --key-ink: #2a241c;
  --acc: #ffb02e; --acc-ink: #2a1a02; --flag: #ff5a36; --ok: #7ed67a; --bad: #ff6b5e;
  --page: #f4f1ea; --page-ink: #1d2027; --page-2: #5b6170; --page-line: #ddd6c8;
  --f-body: "IBM Plex Sans KR", "Pretendard", system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --f-disp: "Black Han Sans", "IBM Plex Sans KR", sans-serif;
  --f-num: "Chakra Petch", "IBM Plex Sans KR", sans-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.012 75); --bg-2: oklch(0.235 0.014 75); --bg-3: oklch(0.285 0.016 75); --line: oklch(0.37 0.02 75);
    --ink: oklch(0.955 0.012 85); --ink-2: oklch(0.77 0.022 80); --ink-3: oklch(0.62 0.022 80);
    --key: oklch(0.89 0.025 85); --key-hi: oklch(0.95 0.015 85); --key-lo: oklch(0.73 0.035 82); --key-ink: oklch(0.26 0.02 75);
    --acc: oklch(0.81 0.16 72); --flag: oklch(0.67 0.2 35);
    --page: oklch(0.96 0.01 85); --page-ink: oklch(0.24 0.015 260); --page-2: oklch(0.48 0.02 260); --page-line: oklch(0.88 0.015 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; }

/* ---------------------------------------------------------------- 페이지 머리 */
.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-family: var(--f-num); 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: 400 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)); }

/* ---------------------------------------------------------------- 게임 무대 */
.ms { position: relative; width: 100%; height: clamp(440px, 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); }
.ms canvas.board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
@media (max-width: 640px) { .ms { border-radius: 0; height: calc(100svh - 104px); min-height: 480px; } .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 .ms { position: fixed; inset: 0; width: auto; height: auto; min-height: 0; border-radius: 0; }
[hidden] { display: none !important; }
.ms button:focus-visible, .ms input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* 위 막대 */
.bar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--bg-2); border-bottom: 1px solid rgba(0, 0, 0, 0.35); }
.bar-l, .bar-r { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar-l { order: 1; }
.bar-r { order: 3; margin-left: auto; }
.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; gap: 6px; }
.tb:hover { border-color: var(--ink-3); background: rgba(255, 255, 255, 0.03); }
.tb svg { width: 16px; height: 16px; flex: none; }
.tb.icon { width: 34px; padding: 0; justify-content: center; }
.tb[aria-pressed="false"].snd { color: var(--ink-3); }

/* 난이도 */
.lv { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r2); background: var(--bg); border: 1px solid var(--line); }
.lv button { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: 600 13px/1 var(--f-body); }
.lv button:hover { color: var(--ink); }
.lv button.on { background: var(--key); color: var(--key-ink); box-shadow: inset 0 -2px 0 var(--key-lo); }
.lv-pick { min-width: 64px; justify-content: space-between; }
.lv-pick i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink-2); }

/* 운 없이 스위치 */
.ng { height: 32px; padding: 0 var(--s3) 0 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font: 600 13px/1 var(--f-body); display: inline-flex; align-items: center; gap: var(--s2); }
.ng .sw { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); flex: none; transition: background .2s; }
.ng .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); transition: transform .25s var(--ease), background .2s; }
.ng[aria-pressed="true"] { color: var(--ink); border-color: rgba(255, 176, 46, 0.55); }
.ng[aria-pressed="true"] .sw { background: rgba(255, 176, 46, 0.25); border-color: rgba(255, 176, 46, 0.6); }
.ng[aria-pressed="true"] .sw::after { transform: translateX(12px); background: var(--acc); }
.ng:hover { border-color: var(--ink-3); }
.daily { color: var(--ink); }
.daily b { font: 700 12px/1 var(--f-num); color: var(--acc); }

/* 지뢰 수 · 새 게임 · 시간 */
.status { display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.lcd { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--s2) 0 7px; border-radius: var(--r1); background: #100d09; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.05); }
.lcd svg { width: 15px; height: 15px; flex: none; opacity: 0.85; }
.lcd canvas { display: block; height: 22px; }
.go { height: 34px; padding: 0 var(--s4); border-radius: var(--r2); border: 0; background: linear-gradient(var(--key-hi), var(--key)); color: var(--key-ink); font: 700 14px/1 var(--f-body); box-shadow: inset 0 -3px 0 var(--key-lo), 0 1px 0 rgba(0, 0, 0, 0.4); display: inline-flex; align-items: center; gap: 6px; transition: transform .08s; }
.go svg { width: 15px; height: 15px; }
.go:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--key-lo); }
.go.lost { box-shadow: inset 0 -3px 0 var(--key-lo), 0 0 0 2px rgba(255, 90, 54, 0.55); }
.go.won { box-shadow: inset 0 -3px 0 var(--key-lo), 0 0 0 2px rgba(255, 176, 46, 0.7); }
.go.icon { width: 40px; padding: 0; justify-content: center; }
.side-l, .side-r { flex: 1 1 0; min-width: 0; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-r { text-align: right; }
.tag-ng { color: var(--acc); }

/* 배치: 넓은 화면 = 위 막대 + 상태 줄 / 중간 = 한 줄 / 좁은 화면 = 한 줄 + 아래 도구 */
.ms .status { order: 2; }
.ms.L-wide .status { order: 10; flex-basis: 100%; padding-top: 2px; }
.ms.L-mid .bar-r, .ms.L-narrow .bar-r { margin-left: 0; }
.ms.cmp .b-full .lbl { display: none; }
.ms.cmp .b-full { width: 34px; padding: 0; justify-content: center; }
.ms.L-wide .lv-pick, .ms.L-wide .b-menu, .ms.L-wide .side-x { display: none; }
.ms.L-mid .lv, .ms.L-mid .daily, .ms.L-mid .wide-only, .ms.L-mid .side-l, .ms.L-mid .side-r { display: none; }
.ms.L-narrow .lv, .ms.L-narrow .daily, .ms.L-narrow .wide-only, .ms.L-narrow .side-l, .ms.L-narrow .side-r, .ms.L-narrow .bar .ng { display: none; }
.ms.L-mid .bar, .ms.L-narrow .bar { flex-wrap: nowrap; }
.ms.L-mid .status, .ms.L-narrow .status { flex: 1 1 auto; }
.ms.L-narrow .bar { padding: 6px; gap: 4px; }
.ms.L-narrow .status { gap: 4px; }
.ms.L-narrow .go .lbl, .ms.L-narrow .b-full .lbl { display: none; }
.ms.L-narrow .go { width: 40px; padding: 0; justify-content: center; }
.ms.L-narrow .b-full { width: 34px; padding: 0; justify-content: center; }
.ms.L-narrow .lcd { padding: 0 6px 0 5px; gap: 4px; }
.ms.L-narrow .lcd svg { width: 13px; height: 13px; }
.ms.tiny .lcd svg { display: none; }
.ms.tiny .lv-pick { min-width: 0; padding: 0 8px; }

/* 아래 도구 (휴대폰, 좁은 화면) */
.tools { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: none; align-items: center; justify-content: center; gap: var(--s2); padding: 6px var(--s2) max(6px, env(safe-area-inset-bottom)); background: var(--bg-2); border-top: 1px solid rgba(0, 0, 0, 0.35); }
.ms.touch .tools, .ms.L-narrow .tools { display: flex; }
.ms.L-wide .tools .ng, .ms.L-mid .tools .ng { display: none; }
.mode { display: inline-flex; padding: 3px; border-radius: var(--r2); background: var(--bg); border: 1px solid var(--line); }
.mode button { height: 36px; min-width: 58px; padding: 0 var(--s3); border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: 700 14px/1 var(--f-body); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mode button svg { width: 16px; height: 16px; }
.mode button.on { background: var(--key); color: var(--key-ink); box-shadow: inset 0 -2px 0 var(--key-lo); }
.mode button.on.flagm { background: var(--flag); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
.tools .tb { height: 42px; padding: 0 var(--s3); font-size: 14px; }
.tools .ng { height: 42px; }
.ms.tiny .tools { gap: 6px; padding-left: 6px; padding-right: 6px; }
.ms.tiny .mode button { min-width: 0; padding: 0 10px; }
.ms.tiny .mode button svg { display: none; }
.ms.tiny .tools .tb { padding: 0 10px; }
.ms.tiny .tools .ng { padding-right: 10px; gap: 6px; }

/* 판 위 알림 */
.toast { position: absolute; left: 50%; top: 56px; z-index: 8; transform: translate(-50%, -8px); max-width: calc(100% - 24px); padding: 8px 14px; border-radius: var(--r2); background: rgba(16, 13, 9, 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: 7; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: var(--r2); background: rgba(16, 13, 9, 0.9); font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.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: 190px; 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.45); display: grid; gap: 2px; }
.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 { color: var(--acc); }
.pop small { color: var(--ink-3); font: 600 12px/1 var(--f-num); }
.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(400px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; padding: var(--s4) var(--s5) var(--s5); border-radius: var(--r3); background: rgba(30, 26, 21, 0.97); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); animation: resIn .45s var(--ease) both; scrollbar-width: thin; }
@keyframes resIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) 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: 400 34px/1.15 var(--f-disp); }
.res-t.win { color: var(--acc); }
.res-t.lose { color: var(--bad); }
.res-big { margin: 0 0 var(--s3); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--s2); font: 700 44px/1 var(--f-num); }
.res-big small { font: 600 18px/1 var(--f-body); color: var(--ink-2); }
.nb { align-self: center; font: 700 12px/1 var(--f-body); padding: 6px 10px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); }
.res-sub { margin: 0 0 var(--s3); color: var(--ink-2); font-size: 14px; }
.res-stats { display: grid; grid-template-columns: repeat(4, 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-num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-line { margin: 0 0 var(--s3); font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.res-line b { color: var(--ink); font-family: var(--f-num); }
.res-btns { display: grid; grid-template-columns: 1.4fr 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 15px/1 var(--f-body); }
.res-btns button:hover { border-color: var(--ink-3); }
.res-btns .big { background: var(--key); border-color: var(--key); color: var(--key-ink); box-shadow: inset 0 -3px 0 var(--key-lo); }
.res-btns .big small { font-weight: 500; opacity: 0.6; margin-left: 6px; font-size: 12px; }
.res-btns .wide { grid-column: 1 / -1; }
.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; }
.ms.L-narrow .res, .ms.short .res { padding: var(--s3) var(--s4) var(--s4); }
.ms.L-narrow .res-big, .ms.short .res-big { font-size: 36px; margin-bottom: var(--s2); }
.ms.L-narrow .res-t, .ms.short .res-t { font-size: 28px; }
.ms.short .res-stats dd { font-size: 15px; }
.ms.short .res-line { margin-bottom: var(--s2); }

/* 모달 */
.modal { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: var(--s3); background: rgba(8, 6, 4, 0.6); }
.mbox { width: min(520px, 100%); max-height: 100%; overflow-y: auto; padding: var(--s4) var(--s5) var(--s5); border-radius: var(--r3); background: var(--bg-2); border: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.mhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.mtitle { margin: 0; font: 400 24px/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 { display: grid; gap: var(--s3); font-size: 14px; }
.mbody h3 { margin: var(--s2) 0 0; font: 400 18px/1.3 var(--f-disp); }
.mbody p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.mbody b { color: var(--ink); }
.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) 4.4em; align-items: center; gap: var(--s3); font-size: 14px; }
.sl input { width: 100%; accent-color: var(--acc); }
.sl output { font: 600 13px/1 var(--f-num); text-align: right; color: var(--ink-2); }
.kt { width: 100%; border-collapse: collapse; font-size: 14px; }
.kt th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 6px var(--s2) 6px 0; width: 46%; vertical-align: top; }
.kt td { padding: 6px 0; font-weight: 600; }
.kt tr + tr th, .kt tr + tr td { border-top: 1px solid var(--line); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { padding: var(--s2) var(--s3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.tabs button.on { color: var(--ink); border-bottom-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); display: grid; gap: 4px; align-content: start; }
.st-card h4 { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.st-card h4.ngc { color: var(--acc); }
.st-row { display: flex; justify-content: space-between; gap: var(--s2); font-size: 13px; color: var(--ink-2); }
.st-row b { font: 700 14px/1.3 var(--f-num); color: var(--ink); }
.st-best { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 12px; color: var(--ink-3); }
.st-best li { display: flex; justify-content: space-between; gap: var(--s2); }
.st-best b { font: 600 13px/1.4 var(--f-num); color: var(--ink); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal span { aspect-ratio: 1; border-radius: 5px; background: var(--bg-3); display: grid; place-items: center; font: 600 12px/1 var(--f-num); color: var(--ink-3); }
.cal span.done { background: rgba(255, 176, 46, 0.3); color: var(--ink); }
.cal span.today { outline: 1.5px solid var(--acc); }
.drow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--bg-3); }
.drow b { font: 400 20px/1.2 var(--f-disp); display: block; }
.drow span { font-size: 13px; color: var(--ink-2); }
.drow span.clear { color: var(--acc); }
.btn { height: 40px; 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); }
.btn:hover { border-color: var(--ink-3); }
.btn.big { background: var(--key); border-color: var(--key); color: var(--key-ink); box-shadow: inset 0 -3px 0 var(--key-lo); }
.btn.warn { color: var(--bad); }
.btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.cu label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.cu input { width: 100%; height: 42px; padding: 0 var(--s3); border-radius: var(--r1); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 700 18px/1 var(--f-num); -webkit-user-select: text; user-select: text; }
.cu-sum { font-size: 13px; color: var(--ink-2); }
.cu-sum.warn { color: var(--bad); }
.share-in { width: 100%; height: 40px; padding: 0 var(--s3); border-radius: var(--r1); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 500 13px/1 var(--f-body); -webkit-user-select: text; user-select: text; }

/* 화면 읽기 프로그램 전용 */
.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.7fr) 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: 400 28px/1.25 var(--f-disp); }
.about h2:first-child { margin-top: 0; }
.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 22px/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); }
.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; }
}