/* 이기대 도장 걷기
   위: 화면 끝까지 꽉 찬 하늘→바다 풍경(수평선 광안대교, 바다에서 고개 내민 기대할매, 말풍선으로 상태)
   가운데: 코스 지도 한 장 위에 도장 자리가 흩어진 '도장 지도' (놀이공원 스탬프 지도처럼)
   완주: 지도 위에 '완주' 큰 도장, 기념품 받으면 '기념품 받음' 도장
   글꼴: 제목 Black Han Sans(간판), 본문 Gothic A1, 할매 말 Nanum Pen Script(손글씨) */
:root {
  --sky-1: #e3f6fd; --sky-2: #b9e7f9; --sky-3: #8fd6f3;
  --sea: #1f9fd6; --sea-deep: #0b5c8a; --navy: #0f2a3a;
  --foam: #eef8fc; --white: #fff;
  --ink: #0f2a3a; --ink-2: #3f5a6b; --ink-3: #7b909e; --line: #cfe4ef;
  --paper: #fffaf0; --paper-line: #eadbb8; --trail: #9fd3ea;
  --stamp: #d23a4f; --stamp-soft: #fbe3e6;          /* 동백 */
  --tewak: #ff8a3d; --tewak-soft: #ffe8d6;
  --ok: #1f8a5b; --ok-soft: #dff4ea; --warn: #b8741c; --warn-soft: #fbeedb;
  --title: "Black Han Sans", "Gothic A1", sans-serif;
  --body: "Gothic A1", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --hand: "Nanum Pen Script", "Gothic A1", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body { background: var(--foam); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.6; word-break: keep-all; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; cursor: pointer; color: inherit; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.app { min-height: 100dvh; }

/* ---- 위: 하늘과 바다 ---- */
.band { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 48%, var(--sky-3) 100%); padding-top: env(safe-area-inset-top, 0px); transition: background .6s; }
.band.done { background: linear-gradient(180deg, #fff1d6 0%, #ffd2a1 45%, #ffad7d 100%); }
.band-inner { position: relative; z-index: 4; max-width: 30rem; margin: 0 auto; padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) 7.6rem max(1rem, env(safe-area-inset-left, 0px)); }
.band-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.eyebrow { font-size: .78rem; font-weight: 800; color: var(--sea-deep); letter-spacing: .02em; }
.count { font-family: var(--title); font-size: .95rem; background: var(--sea-deep); color: #fff; border-radius: 999px; padding: .15rem .7rem; font-variant-numeric: tabular-nums; }
.wordmark { font-family: var(--title); font-size: clamp(1.45rem, 8.2vw, 2rem); line-height: 1.12; word-break: keep-all; color: var(--sea-deep); margin-top: .5rem; letter-spacing: -.01em; }
.band.done .wordmark, .band.done .eyebrow { color: #8a3a16; }
/* 언어 바꾸기: 제목 오른쪽 */
/* 영어 제목은 길어서 조금 작게 (언어 버튼 옆에서 두 줄로) */
html[lang="en"] .wordmark { font-size: clamp(1rem, 5.3vw, 1.3rem); line-height: 1.16; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.lang { flex: none; display: inline-flex; margin-top: .75rem; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1.5px rgba(11, 92, 138, .22); }
.lang button { border: 0; background: none; border-radius: 999px; padding: .3rem .62rem; font-size: .76rem; font-weight: 800; line-height: 1.1; color: var(--sea-deep); min-height: 2rem; }
.lang button[aria-pressed="true"] { background: var(--sea-deep); color: #fff; }
.band.done .lang { box-shadow: inset 0 0 0 1.5px rgba(138, 58, 22, .25); }
.band.done .lang button { color: #8a3a16; }
.band.done .lang button[aria-pressed="true"] { background: #8a3a16; color: #fff; }
.band.done .count { background: #8a3a16; }
.band.done .halmae { width: 10.4rem; bottom: .3rem; animation: bob 1.6s ease-in-out infinite; }
.talk { margin-top: .9rem; max-width: calc(100% - 10.2rem); background: #fff; border-radius: 18px 18px 4px 18px; padding: .55rem .85rem .6rem; box-shadow: 0 6px 18px rgba(11, 92, 138, .12); position: relative; }
.talk::after { content: ""; position: absolute; right: -9px; bottom: 0; width: 14px; height: 14px; background: #fff; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.talk-main { font-family: var(--hand); font-size: 1.9rem; line-height: 1.02; color: var(--navy); }
.talk-sub { font-size: .82rem; color: var(--ink-2); margin-top: .2rem; }
.talk-sub:empty { display: none; }

.band-sea { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 7.5rem; z-index: 1; }
.band-sea .bridge path { stroke: rgba(11, 92, 138, .38); }
.band.done .band-sea .bridge path { stroke: rgba(120, 50, 20, .35); }
.band-sea .sea { fill: var(--sea); }
.band-sea .crest { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.gulls { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 6.4rem); right: max(1.4rem, calc(50% - 15rem + 1.4rem)); width: 3.4rem; }
.gulls path { stroke: var(--sea-deep); opacity: .55; }
.halmae { position: absolute; z-index: 3; width: 11.6rem; height: auto; right: max(-.3rem, calc(50% - 15rem - .3rem)); bottom: -.6rem; transform-origin: 50% 90%; animation: bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.front-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 2.6rem; z-index: 5; }
.front-wave .fw1 { fill: #43b6e3; }
.front-wave .fw2 { fill: var(--foam); }

.inapp { max-width: 30rem; margin: .6rem auto 0; padding: .55rem .8rem; background: var(--warn-soft); color: var(--warn); font-size: .8rem; border-radius: 10px; margin-inline: max(1rem, env(safe-area-inset-left, 0px)); }
@media (min-width: 32rem) { .inapp { margin-inline: auto; } }

.page { max-width: 30rem; margin: 0 auto; padding: .4rem max(1rem, env(safe-area-inset-right, 0px)) calc(6rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: .9rem; }

.live { border-radius: 10px; padding: .6rem .8rem; font-size: .88rem; line-height: 1.45; background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.live.warn { background: var(--warn-soft); color: var(--warn); }
.live.sky { background: #d6eefa; color: var(--sea-deep); }
.live.err { background: var(--stamp-soft); color: var(--stamp); }

/* ---- 도장 지도: 코스 한 장 위에 도장 쾅쾅 ---- */
.board { background: var(--paper); border: 1px solid var(--paper-line); border-radius: 12px; padding: .8rem .7rem .9rem; position: relative; box-shadow: 0 3px 0 var(--paper-line), 0 10px 24px rgba(11, 92, 138, .1); }
.board::before { content: ""; position: absolute; inset: 5px; border: 1.5px dashed var(--paper-line); border-radius: 9px; pointer-events: none; }
.board.shake { animation: thud .45s .2s ease-out both; }
@keyframes thud { 0%, 100% { transform: none; } 30% { transform: translateY(3px) scale(.995); } 60% { transform: translateY(-1px); } }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .1rem .35rem .45rem; position: relative; }
.board-head h2 { font-family: var(--title); font-size: 1.3rem; color: var(--navy); }
.done-mark { font-family: var(--title); font-size: 1rem; color: var(--stamp); border: 2.5px solid var(--stamp); border-radius: 8px; padding: .02rem .5rem .08rem; transform: rotate(-8deg); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3.5px var(--stamp); animation: popmark .45s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes popmark { 0% { transform: rotate(-30deg) scale(2.2); opacity: 0; } 100% { transform: rotate(-8deg) scale(1); opacity: 1; } }

.map { position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: 8px; overflow: hidden; background: #fbf3df;
  background-image: radial-gradient(rgba(160, 130, 70, .12) 1px, transparent 1.2px); background-size: 14px 14px; }
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m-sea { fill: #bfe6f6; }
.m-shore { fill: none; stroke: #8fd0ec; stroke-width: 3; }
.m-waves path, .m-bridge path, .m-gull path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-waves path { stroke: #fff; stroke-width: 1.6; opacity: .9; }
.m-bridge path { stroke: var(--sea-deep); stroke-width: 1.3; opacity: .55; }
.m-gull path { stroke: var(--ink-3); stroke-width: 1.4; opacity: .7; }
.m-hill { fill: #d7ebc4; }
.m-hill-mark path { fill: #a9cf8f; }
.m-pine path { fill: #9cc98a; }
.m-label { font-family: var(--body); font-weight: 800; font-size: 9px; fill: #6f9a5c; letter-spacing: .04em; }
.m-label.sea { fill: var(--sea-deep); opacity: .6; }
.m-trail-bed { fill: none; stroke: #fff; stroke-width: 11; stroke-linecap: round; }
.m-trail { fill: none; stroke: #f0b84a; stroke-width: 3.2; stroke-dasharray: 1 7; stroke-linecap: round; }

.pins { position: absolute; inset: 0; }
.spot, .flag { position: absolute; transform: translate(-50%, -50%); }
.spot { width: 28%; aspect-ratio: 1; display: grid; place-items: center; border: 0; padding: 0; background: none; font: inherit; color: inherit; }
.spot .blank { position: absolute; inset: 0; border-radius: 50%; border: 2.5px dashed #d8c49a; background: rgba(255, 252, 244, .9); display: grid; place-items: center; align-content: center; font-family: var(--title); font-size: 1.9rem; line-height: 1; color: #c9b38a; }
.spot .blank small { font-family: var(--body); font-weight: 800; font-size: .62rem; letter-spacing: .08em; margin-top: .15rem; }
.spot.isq .blank { border-radius: 22%; border-color: #ffc29a; background: rgba(255, 240, 228, .92); color: var(--tewak); }
.spot.next .blank { border: 3px solid var(--sea-deep); color: var(--sea-deep); animation: ring 1.8s ease-out infinite; }
.spot.next.isq .blank { border-color: var(--tewak); color: var(--tewak); }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(11, 92, 138, .35); } 100% { box-shadow: 0 0 0 14px rgba(11, 92, 138, 0); } }

/* 찍힌 도장: 고무도장 잉크 느낌. 칸보다 살짝 크고 삐뚤게 */
.spot .ink { position: absolute; inset: -6%; border-radius: 50%; border: 3.5px solid var(--stamp); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px var(--stamp); color: var(--stamp); display: grid; place-items: center; align-content: center; gap: 0; transform: rotate(var(--r, -10deg)); mix-blend-mode: multiply; opacity: .92;
  -webkit-mask-image: radial-gradient(circle at 26% 70%, transparent 0 2px, #000 3px), radial-gradient(circle at 74% 22%, transparent 0 1.5px, #000 2.5px), radial-gradient(circle at 60% 84%, transparent 0 1.2px, #000 2px);
  -webkit-mask-composite: source-in; mask-image: radial-gradient(circle at 26% 70%, transparent 0 2px, #000 3px), radial-gradient(circle at 74% 22%, transparent 0 1.5px, #000 2.5px), radial-gradient(circle at 60% 84%, transparent 0 1.2px, #000 2px); mask-composite: intersect; }
.spot .ink .motif { width: 2.2rem; height: 2.2rem; display: block; }
.spot .ink b { font-family: var(--title); font-weight: 400; font-size: .92rem; line-height: 1.05; }
.spot .ink small { font-family: var(--mono); font-size: .56rem; line-height: 1.1; }
.spot .ink.q { border-radius: 24%; border-color: var(--tewak); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px var(--tewak); color: #e46d1f; }
.spot .ink.q small:first-child { font-family: var(--body); font-weight: 800; font-size: .6rem; }
.spot .ink.q b { font-size: 1.35rem; }
.spot .ink.new { animation: slam .5s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes slam { 0% { transform: scale(2.6) rotate(calc(var(--r, -10deg) - 20deg)); opacity: 0; } 55% { transform: scale(.9) rotate(var(--r, -10deg)); opacity: 1; } 100% { transform: scale(1) rotate(var(--r, -10deg)); opacity: .92; } }
button.spot { cursor: pointer; }
button.spot:active .ink { transform: rotate(var(--r)) scale(.96); }

.spot .lbl { position: absolute; top: 100%; left: 50%; transform: translate(-50%, .35rem); white-space: nowrap; max-width: 150%; overflow: hidden; text-overflow: ellipsis; font-size: .7rem; font-weight: 800; line-height: 1.3; color: var(--ink-2); background: rgba(255, 250, 240, .92); padding: .05rem .4rem; border-radius: 6px; }
.spot.got .lbl { color: var(--stamp); }
.spot.got.isq .lbl { color: #c95a14; }
.spot.next .lbl { background: var(--sea-deep); color: #fff; }
.spot.pend .lbl { background: var(--warn-soft); color: var(--warn); }
.spot.pend::after { content: ""; position: absolute; right: 4%; top: 4%; width: 12px; height: 12px; border-radius: 50%; background: var(--warn); border: 2px solid #fff; }

.flag { display: grid; justify-items: center; font-family: var(--title); font-size: .82rem; line-height: 1.1; color: #fff; background: var(--sea-deep); padding: .2rem .55rem .25rem; border-radius: 7px; white-space: nowrap; box-shadow: 0 2px 0 rgba(11, 42, 58, .2); }
.flag b { font-family: var(--body); font-weight: 800; font-size: .58rem; opacity: .8; letter-spacing: .08em; }
.flag.end { background: var(--stamp); }

.board-foot { text-align: center; padding: .7rem .4rem 0; display: grid; gap: .3rem; justify-items: center; position: relative; font-size: .86rem; color: var(--ink-2); }
.board-foot b { color: var(--navy); }
.board-foot .sub { font-size: .74rem; color: var(--ink-3); }
.board-foot .btn { border: 0; border-radius: 10px; padding: .7rem 1.2rem; background: var(--sea-deep); color: #fff; font-weight: 800; }
.board-foot .btn.save { width: 100%; max-width: 20rem; }
.board-foot .btn.ghost { background: transparent; color: var(--sea-deep); border: 1.5px solid var(--line); }
.board-foot .gift { font-family: var(--title); font-size: 1.2rem; color: var(--sea-deep); border: 3px solid var(--sea-deep); border-radius: 8px; padding: .1rem .7rem .15rem; transform: rotate(-4deg); }
.board-foot .gift small { font-family: var(--mono); font-size: .75rem; }
.staff { width: 100%; margin-top: .5rem; padding-top: .7rem; border-top: 1.5px dashed var(--paper-line); display: grid; gap: .35rem; justify-items: center; }
.staff span { font-size: .7rem; font-weight: 800; color: var(--ink-3); letter-spacing: .08em; }
.hold { position: relative; overflow: hidden; border: 1.5px solid var(--paper-line); background: #fff; border-radius: 999px; padding: .55rem 1.2rem; color: var(--ink-2); font-weight: 800; font-size: .82rem; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hold i { position: absolute; inset: 0; background: var(--ok-soft); transform-origin: left; transform: scaleX(0); }
.hold.on i { transform: scaleX(1); transition: transform 1.5s linear; }
.hold b { position: relative; }

.hint { font-size: .78rem; color: var(--ink-3); text-align: center; }
.hint b { color: var(--ink-2); }
.foot { text-align: center; font-size: .74rem; color: var(--ink-3); display: grid; gap: .15rem; }

/* ---- 화면 안 QR 찍기 ---- */
.scan-fab { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 999px; padding: .85rem 1.5rem .85rem 1.25rem; background: var(--sea-deep); color: #fff; font-family: var(--title); font-size: 1.15rem; box-shadow: 0 8px 20px rgba(11, 42, 58, .32), 0 0 0 4px rgba(255, 255, 255, .85); }
.scan-fab svg { width: 1.5rem; height: 1.5rem; }
.scan-fab:active { transform: translateX(-50%) scale(.97); }
.sr { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.cam { position: fixed; inset: 0; z-index: 60; background: #0b1820; color: #fff; overflow: hidden; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam.nocam video { display: none; }
.cam-frame { position: absolute; left: 50%; top: 46%; width: min(68vw, 46vh, 20rem); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(5, 20, 30, .5); }
.cam.nocam .cam-frame { box-shadow: none; border: 2px dashed rgba(255, 255, 255, .25); }
.cam-frame i { position: absolute; width: 2.4rem; height: 2.4rem; border: 5px solid #fff; }
.cam-frame i:nth-child(1) { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.cam-frame i:nth-child(2) { right: -3px; top: -3px; border-left: 0; border-bottom: 0; border-top-right-radius: 18px; }
.cam-frame i:nth-child(3) { left: -3px; bottom: -3px; border-right: 0; border-top: 0; border-bottom-left-radius: 18px; }
.cam-frame i:nth-child(4) { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }
.cam-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(1.2rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) 1rem max(1rem, env(safe-area-inset-left, 0px)); text-align: center; display: grid; gap: .3rem; }
.cam-top b { font-family: var(--title); font-weight: 400; font-size: 1.45rem; }
.cam-top span { font-size: .9rem; line-height: 1.45; opacity: .92; max-width: 22rem; justify-self: center; }
.cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) calc(1.2rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.cam-btn { position: relative; border: 0; border-radius: 999px; padding: .8rem 1.3rem; font-weight: 800; font-size: .95rem; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.cam-btn.alt { background: #fff; color: var(--sea-deep); }
.cam-close { position: absolute; z-index: 2; top: calc(.7rem + env(safe-area-inset-top, 0px)); right: max(.7rem, env(safe-area-inset-right, 0px)); border: 0; border-radius: 999px; padding: .4rem .8rem; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 800; font-size: .85rem; }
.cam-top { padding-top: calc(3.2rem + env(safe-area-inset-top, 0px)) !important; }

/* ---- 사진 / 퀴즈 시트 ---- */
.dim { position: fixed; inset: 0; background: rgba(15, 42, 58, .5); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--white); width: 100%; max-width: 30rem; border-radius: 18px 18px 0 0; padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) calc(1.1rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); display: grid; gap: .7rem; animation: up .35s cubic-bezier(.2, 1.2, .4, 1) both; max-height: 92dvh; overflow: auto; }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
.photo { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sky-2); }
.photo > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .big-stamp { position: absolute; right: .7rem; bottom: .7rem; width: 5.6rem; height: 5.6rem; border-radius: 50%; border: 4px solid var(--stamp); background: rgba(255, 255, 255, .88); color: var(--stamp); display: grid; place-items: center; align-content: center; gap: 1px; transform: rotate(-12deg); animation: pop .55s .25s cubic-bezier(.2, 1.6, .4, 1) both;
  -webkit-mask-image: radial-gradient(circle at 28% 72%, transparent 0 2.5px, #000 3.5px), radial-gradient(circle at 70% 26%, transparent 0 2px, #000 3px);
  mask-image: radial-gradient(circle at 28% 72%, transparent 0 2.5px, #000 3.5px), radial-gradient(circle at 70% 26%, transparent 0 2px, #000 3px); }
@keyframes pop { 0% { transform: scale(2.4) rotate(-25deg); opacity: 0; } 60% { transform: scale(.92) rotate(-12deg); opacity: 1; } 100% { transform: scale(1) rotate(-12deg); } }
/* 도장 쾅 할매: 사진 왼쪽 아래에서 튀어나와 도장을 찍는다 */
.photo .ph-halmae { position: absolute; left: .2rem; bottom: -.4rem; width: 40%; height: auto; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(15, 42, 58, .25)); animation: hop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes hop { 0% { transform: translateY(70%) rotate(-8deg); opacity: 0; } 70% { transform: translateY(-4%) rotate(2deg); opacity: 1; } 100% { transform: none; } }
.photo .big-stamp .motif { width: 2.4rem; height: 2.4rem; }
.photo .big-stamp b { font-family: var(--title); font-weight: 400; font-size: .85rem; line-height: 1; }
.photo .big-stamp small { font-family: var(--mono); font-size: .6rem; }
.ptitle { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ptitle b { font-family: var(--title); font-weight: 400; font-size: 1.4rem; }
.ptitle span { font-size: .8rem; color: var(--ok); font-weight: 800; white-space: nowrap; }
.ptitle span.again { color: var(--warn); }
.pdesc { font-size: .92rem; color: var(--ink-2); }
.pnote { font-size: .8rem; color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: .45rem .65rem; }
.who { display: flex; gap: .7rem; align-items: center; }
.who svg, .who img { width: 5.8rem; height: auto; flex: none; }
.bubble { background: var(--sky-1); color: var(--navy); border-radius: 16px 16px 16px 4px; padding: .5rem .8rem; line-height: 1.2; }
.bubble b { font-family: var(--title); font-weight: 400; font-size: 1rem; color: var(--tewak); display: block; }
.bubble span { font-family: var(--hand); font-size: 1.55rem; line-height: 1.1; }
.qtext { font-family: var(--title); font-size: 1.3rem; line-height: 1.35; }
.opts { display: grid; gap: .45rem; }
.opt { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: .75rem .9rem; text-align: left; font-size: 1rem; font-weight: 700; }
.opt:disabled { cursor: default; }
.opt.right { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.opt.wrong { background: var(--stamp-soft); border-color: var(--stamp); color: var(--stamp); }
.explain { font-size: .88rem; color: var(--ink-2); background: var(--foam); border-radius: 8px; padding: .55rem .75rem; }
.go { border: 0; border-radius: 10px; padding: .85rem; background: var(--sea-deep); color: #fff; font-family: var(--title); font-size: 1.1rem; width: 100%; display: block; text-align: center; text-decoration: none; }
.go.ghost { background: #e9f4f9; color: var(--sea-deep); }
.save-prev { border-radius: 10px; overflow: hidden; background: var(--paper); max-height: 60dvh; display: grid; place-items: center; }
.save-prev img { width: 100%; height: auto; max-height: 60dvh; object-fit: contain; display: block; -webkit-touch-callout: default; }
.save-hint { font-size: .8rem; color: var(--ink-3); text-align: center; }
.save-row { display: grid; grid-template-columns: 2fr 1fr; gap: .5rem; }

button:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
@media (hover: hover) { .opt:hover:not(:disabled) { border-color: var(--sea); } }
@media (prefers-reduced-motion: reduce) { .spot .ink.new, .photo .ph-halmae, .done-mark, .hold.on i, .board.shake, .sheet, .photo .big-stamp, .halmae, .spot.next .blank { animation: none !important; } }