/* 강호행(솔로) — 먹빛 강호 팔레트 · 한지 두루마리 · 픽셀 스프라이트 */
body.dojo{--ink:#1b1b22;--ink2:#34313d;--hanji:#f4f1e8;--hanji2:#e9d8a6;--wood:#8c6e45;--seal:#b8322e;--gold:#e8b53a;--jade:#4fa38a;--blue:#3e6fd8;
  background:#1b1b22 radial-gradient(1200px 600px at 50% -10%, #3a3340 0%, #1b1b22 60%);color:var(--hanji);min-height:100dvh}
body.dojo .card{background:var(--hanji);color:var(--ink);border-color:var(--ink)}
.dj-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;padding:8px 12px;overflow:hidden;padding-top:calc(8px + env(safe-area-inset-top,0px));background:linear-gradient(#1b1b22,#1b1b22ee);border-bottom:2px solid #000}
.dj-brand{display:flex;align-items:center;flex:none;white-space:nowrap;gap:8px;color:var(--hanji);text-decoration:none;font-weight:900;font-size:18px;font-family:"Batang","AppleMyungjo","Noto Serif KR",serif;letter-spacing:1px}
.seal{display:inline-grid;place-items:center;width:28px;height:28px;background:var(--seal);color:#fff;border-radius:5px;font-size:17px;transform:rotate(-6deg);box-shadow:0 0 0 2px #0006 inset}
.dj-link{background:none;border:0;flex:none;color:var(--hanji);font-size:18px;text-decoration:none;cursor:pointer;padding:4px}
.dj-link.inn{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--gold);border-radius:9px;padding:3px 9px;background:#2a2733}
.dj-link.inn b{font-size:13px;font-weight:900;letter-spacing:-.3px}
@media (max-width:380px){.dj-link.inn b{display:none}.dj-link.inn{padding:3px 6px}}
.dj-cur{font-weight:800;font-size:13px;color:var(--hanji2);white-space:nowrap;flex:none}
.dj-view{max-width:760px;margin:0 auto;padding:10px 12px 40px}
.myeong{font-family:"Batang","AppleMyungjo","Noto Serif KR",serif}
.scroll{position:relative;background:var(--hanji) linear-gradient(90deg,#0000 0,#0000 97%,#c9b27c33 100%);color:var(--ink);border-radius:6px;padding:14px;margin:12px 0;
  box-shadow:0 6px 0 #0008;border-top:10px solid var(--wood);border-bottom:10px solid var(--wood)}
.scroll h2,.scroll h3{margin:0 0 8px;font-family:"Batang","AppleMyungjo","Noto Serif KR",serif}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
.dj-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:900;font-size:16px;border:3px solid var(--ink);border-radius:10px;padding:10px 14px;background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;text-decoration:none}
.dj-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.dj-btn.red{background:var(--seal);color:#fff}.dj-btn.gold{background:var(--gold)}.dj-btn.jade{background:var(--jade);color:#fff}.dj-btn.ink{background:var(--ink2);color:var(--hanji)}
.dj-btn.big{font-size:21px;padding:14px 18px;width:100%}
.dj-btn[disabled]{opacity:.45;pointer-events:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* 홈 */
.hero-card{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.hero-card canvas{background:radial-gradient(circle at 50% 70%,#fff8,#0000 70%);border-radius:10px}
.lv{font-size:30px;font-weight:900;font-family:"Batang","AppleMyungjo","Noto Serif KR",serif}
.expbar{height:12px;border:2px solid var(--ink);border-radius:9px;background:#fff;overflow:hidden;margin:4px 0}
.expbar i{display:block;height:100%;background:linear-gradient(90deg,#e8b53a,#ffe08a)}
.badge{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:12px;border:2px solid var(--ink);border-radius:999px;padding:1px 8px;background:#fff}
.quests li{display:flex;gap:6px;align-items:center;margin:4px 0;font-weight:700}
.quests li.done{opacity:.6;text-decoration:line-through}
.qbar{flex:1;height:8px;border-radius:9px;background:#ddd;overflow:hidden}.qbar i{display:block;height:100%;background:var(--jade)}
.skills{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.skill{flex:none;border:2px solid var(--ink);border-radius:9px;padding:4px 7px;background:#fff;font-size:12px;font-weight:800;min-width:92px}
.skill.off{opacity:.45;filter:grayscale(1)}
/* 지도 */
.unit-head{margin:18px 2px 6px;font-size:20px;font-family:"Batang","AppleMyungjo","Noto Serif KR",serif;color:var(--hanji)}
.unit-head small{font-size:12px;color:#c9b27c;margin-left:6px}
.lesson{position:relative}
.lesson .realm{position:absolute;right:12px;top:6px;font-weight:900;font-size:13px;color:#fff;border-radius:6px;padding:2px 8px;border:2px solid var(--ink)}
.gates{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0}
.gate{display:flex;align-items:center;gap:6px;border:2.5px solid var(--ink);border-radius:10px;padding:5px;background:#fff;cursor:pointer;text-align:left;color:var(--ink)}
.gate canvas{flex:none}
.gate b{display:block;font-size:14px}.gate small{display:block;font-size:11px;color:#555}
.gate.cleared{background:#f4ecd8}
.gate .stamp-mini{margin-left:auto;color:var(--seal);font-weight:900;font-size:13px;transform:rotate(-8deg)}
.lesson.locked{opacity:.5;filter:grayscale(.8)}
.need{font-size:12px;color:#5a5566;margin-top:4px}
/* 전투 */
body.dojo.in-run{height:100dvh;overflow:hidden}
body.dojo.in-run .dj-top{display:none}
/* 전투는 화면 높이(100dvh)를 다 쓴다 — 감싼 .dj-view 의 위아래 여백만큼 밀려 폰 세로에서 맨 아래 선택지가 잘렸다(2026-09-22) */
body.dojo.in-run .dj-view{padding:0}
.run{height:100dvh;display:flex;flex-direction:column;gap:6px;padding:6px;max-width:760px;margin:0 auto}
.run-bar{display:flex;align-items:center;gap:8px;color:var(--hanji);font-weight:900}
.run-bar .hearts canvas{margin-right:1px}
.qi{width:70px;height:10px;border:2px solid #000;border-radius:6px;background:#2a2733;overflow:hidden}.qi i{display:block;height:100%;background:linear-gradient(90deg,#3e6fd8,#9fe3ff)}
.combo{color:var(--gold);font-family:"Batang","AppleMyungjo","Noto Serif KR",serif;font-size:18px}
.strip{position:relative;flex:none;height:92px;border:3px solid #000;border-radius:10px;background:linear-gradient(#3b4a5e,#6e8b3d 70%,#4d5f2a);overflow:hidden}
.strip canvas{position:absolute;inset:0;width:100%;height:100%}
.mon-name{position:absolute;right:8px;top:4px;font-weight:900;font-size:12px;color:#fff;background:#000a;border-radius:6px;padding:1px 6px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-name.nem{background:#b8322e}
.boss-hp{position:absolute;left:8px;right:8px;bottom:6px;height:10px;border:2px solid #000;border-radius:6px;background:#0008;overflow:hidden}
.boss-hp i{display:block;height:100%;background:linear-gradient(90deg,#b8322e,#e0584a)}
.timer{position:absolute;left:8px;top:4px;font-weight:900;color:#ffe08a;font-size:18px;text-shadow:1px 1px 0 #000}
.q-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:var(--hanji);color:var(--ink);border:3px solid #000;border-radius:10px;overflow:hidden;position:relative}
.q-card .scene-wrap{position:relative;flex:1 1 0;min-height:60px;margin:6px 8px 0;border:2px solid #c9b27c;border-radius:8px;background:#fff}
.q-card .scene{position:absolute;inset:0}
.q-stem{font-weight:900;font-size:clamp(21px,5.7vw,28px);line-height:1.3;padding:6px 10px 8px;margin:0;letter-spacing:-.4px}
.q-meta{display:flex;gap:6px;align-items:center;padding:6px 10px 0;font-size:12px;font-weight:800;flex-wrap:wrap}
.opts{flex:none;display:grid;gap:7px;grid-template-columns:1fr 1fr}
.opts.one{grid-template-columns:1fr}
.opt{font-weight:900;font-size:17px;min-height:54px;border:3px solid #000;border-radius:11px;background:#fff;color:var(--ink);box-shadow:3px 3px 0 #000;cursor:pointer;padding:6px}
.opt.ox-o{background:#dff3e6}.opt.ox-x{background:#ffe0e0}
.opt.storm{min-height:88px}  /* 음양폭풍: 버튼만 크게 — 글씨는 발문보다 작게 유지(정본 I1) */
.opt.gone{opacity:.25;text-decoration:line-through;pointer-events:none}
.opt.right{background:#c9f2d5;border-color:#1f8a4c}.opt.wrong{background:#ffc9d2;border-color:#b8322e}
/* 참눈·천리안: 정답이 빛난다 — 읽지 않고도 고를 수 있다(경험치는 줄고 상자는 안 오른다) */
.opt.shine{position:relative;background:#fff6d8;border-color:var(--gold);box-shadow:3px 3px 0 #000,0 0 0 3px var(--gold),0 0 22px 6px #e8b53a99;animation:shinePulse .8s ease-in-out infinite}
.opt.shine .here{position:absolute;right:-6px;top:-12px;font-style:normal;font-size:12px;font-weight:900;color:#1b1b22;background:var(--gold);border:2px solid #000;border-radius:999px;padding:0 7px;box-shadow:2px 2px 0 #000}
@keyframes shinePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
.aid.gold{background:#fff6d8;border-color:var(--gold)}
/* 객잔 장터 — 무엇에 쓰는 물건인지가 값보다 먼저 보이게 */
.shop-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shop-coin{margin-left:auto;font-weight:900;font-size:18px;color:var(--gold)}
.shop-item{margin-top:10px}
.shop-item.full{opacity:.7}
.shop-h{display:flex;align-items:flex-start;gap:10px}
.shop-em{flex:none;display:grid;place-items:center;width:46px;height:46px;border:2.5px solid var(--ink);border-radius:11px;background:#fff;font-size:24px;box-shadow:2px 2px 0 var(--ink)}
.shop-t{flex:1 1 auto;min-width:0}
.shop-t b{display:block;font-size:17px;line-height:1.25}
.shop-t small{display:block;font-size:13px;font-weight:700;color:#5a5566;line-height:1.4;margin-top:2px}
.shop-use{margin:8px 0 0;font-size:13.5px;font-weight:700;line-height:1.45;color:var(--ink2)}
.shop-warn{margin:6px 0 0;font-size:12.5px;font-weight:700;line-height:1.45;color:var(--seal);background:#fff3f1;border:2px solid var(--seal);border-radius:9px;padding:6px 9px}
.shop-buys{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.shop-buys .dj-btn{flex:1 1 90px;font-size:15px;padding:8px 10px}
.shop-buys .dj-btn small{display:block;font-size:12px;font-weight:800;opacity:.8}
.shop-auto-note{margin:9px 0 0;padding:7px 10px;border:2px dashed var(--line,#c9b27c);border-radius:10px;font-size:13px;font-weight:700;line-height:1.45;color:#5a5566}
.shop-auto-note.on{border-style:solid;border-color:var(--gold);background:#fff6d8;color:var(--ink)}
.shop-auto-note small{display:block;font-size:12.5px;margin-top:3px}
/* 전투 도움 줄의 자동 체크 */
.aid.autotog{min-width:66px;gap:1px;font-size:11.5px}
.aid.autotog.on{background:#fff6d8;border-color:var(--gold);box-shadow:2px 2px 0 #0006}
.arena-wrap{flex:none;height:38%;position:relative;border:3px solid #000;border-radius:10px;overflow:hidden;background:#fff}
/* 문제와 아이템을 나란히 — 하단 가로줄은 눈에 안 들어온다(2026-09-16 교수 피드백) */
.play{flex:1 1 auto;min-height:0;display:flex;gap:6px}
.play .q-card{flex:1 1 auto;min-width:0}
.aids{flex:0 0 112px;display:flex;flex-direction:column;gap:5px;overflow-y:auto;overflow-x:hidden;padding-right:2px}
.aid-row{display:flex;align-items:stretch;gap:4px;flex:none}
.aid-row .aid{flex:1 1 auto;min-width:0}
.aid-chk{flex:none;display:grid;place-items:center;width:30px;border:2.5px solid #000;border-radius:9px;background:var(--hanji);cursor:pointer}
.aid-chk.on{background:#fff6d8;border-color:var(--gold);box-shadow:0 0 0 2px #e8b53a66}
.aid-chk input{width:19px;height:19px;margin:0;accent-color:var(--seal);cursor:pointer}
.aid{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;border:2.5px solid #000;border-radius:10px;background:var(--hanji);color:var(--ink);font-weight:900;font-size:11px;line-height:1.15;cursor:pointer;padding:3px 4px;text-align:center;word-break:keep-all}
.aid span{font-size:17px;line-height:1}
.aid.gold{background:#fff6d8;border-color:var(--gold)}
.aid[disabled]{opacity:.35;pointer-events:none}
.aid.lock{opacity:.3}
.help{position:absolute;left:8px;right:8px;top:6px;z-index:5;background:#fff8e1;border:3px solid var(--gold);border-radius:10px;padding:8px 11px;font-weight:900;font-size:19px;line-height:1.35;color:var(--ink);box-shadow:3px 3px 0 #0006}
.help .aidbtn{font-size:14px;padding:2px 8px}
.explain{position:absolute;inset:6px;z-index:8;display:flex;flex-direction:column;gap:6px;background:var(--hanji);border:3px solid #000;border-radius:10px;padding:10px;color:var(--ink);overflow:auto;animation:chipIn .3s both}
.explain .ans{font-size:22px;font-weight:900;color:#1f8a4c}
.explain .taunt{font-style:italic;color:var(--seal);font-weight:800}
.float-exp{position:absolute;right:16px;top:30px;z-index:9;font-weight:900;font-size:22px;color:var(--gold);text-shadow:2px 2px 0 #000;animation:floatUp 1s forwards}
@keyframes floatUp{to{transform:translateY(-40px);opacity:0}}
.video-modal{position:fixed;inset:0;z-index:80;background:#000d;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px}
.video-modal video{width:100%;max-width:720px;max-height:60dvh;background:#000;border-radius:8px}
.video-modal .vbar{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.levelup{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:#000c}
.levelup .box{background:var(--hanji);color:var(--ink);border:4px solid #000;border-radius:12px;padding:18px;text-align:center;max-width:340px;animation:chipIn .5s both}
.levelup .big{font-size:44px;font-weight:900;color:var(--seal);font-family:"Batang","AppleMyungjo","Noto Serif KR",serif}
.result .medal{font-size:54px}
.wrong-list li{margin:6px 0;border-bottom:1px dashed #c9b27c;padding-bottom:6px}
.best-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.bcard{border:2.5px solid var(--ink);border-radius:10px;background:#fff;padding:6px;text-align:center;color:var(--ink)}
.bcard.unknown canvas{filter:brightness(0)}
.bcard b{display:block;font-size:13px}
.bcard .st{font-size:11px;font-weight:800}
@media (max-width:520px){
  .opt{font-size:16.5px;min-height:48px}
  .aids{flex-basis:96px}
  .aid{font-size:10.5px;min-height:42px}
  .aid span{font-size:15px}
  .aid-chk{width:26px}
  .aid-chk input{width:17px;height:17px}
  .help{font-size:17px;padding:6px 9px}
  .strip{height:80px}
}
/* 걷는 그림 지도(mapview.js) — 강호도·지역도·거점도 */
body.dojo.in-map{height:100dvh;overflow:hidden}
body.dojo.in-map .dj-view{max-width:none;padding:0}
.mv{position:relative;height:calc(100dvh - var(--mv-top,52px));overflow:hidden;display:flex;flex-direction:column;background:#141219}
.mv-bar{flex:none;display:flex;align-items:center;gap:8px;padding:6px 10px;background:#23202b;border-bottom:2px solid #000;min-width:0}
.mv-back{flex:none;width:44px;height:40px;border:2.5px solid #000;border-radius:9px;background:var(--hanji);color:var(--ink);font-weight:900;font-size:17px;box-shadow:2px 2px 0 #000;cursor:pointer}
.mv-back:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
.mv-title{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.mv-title b{font-family:"Batang","AppleMyungjo","Noto Serif KR",serif;font-size:17px;color:#ffe08a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-title small{font-size:11px;color:#c9b27c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-realm{flex:none;display:inline-block;font-weight:900;font-size:12px;color:#fff;border:2px solid #000;border-radius:6px;padding:1px 7px;vertical-align:middle}
.mv-silver{flex:none;font-weight:800;font-size:12px;color:var(--hanji2)}
.mv-list{flex:none;font-weight:800;font-size:12px;color:var(--hanji);text-decoration:none;border:2px solid #5a5566;border-radius:8px;padding:5px 7px;white-space:nowrap}
.mv-scroll{position:relative;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:#141219 repeating-linear-gradient(45deg,#18161e 0 12px,#141219 12px 24px)}
.mv-scroll.dragging{cursor:grabbing;user-select:none}
.mv-stage{position:relative;z-index:0;isolation:isolate;margin:0 auto;overflow:hidden;background:#2a2733;box-shadow:0 0 0 2px #000,0 0 40px #000a}
.mv-img,.mv-bg,.mv-fx{position:absolute;left:0;top:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}
.mv-fx{pointer-events:none;image-rendering:pixelated}
.mv-nodes{position:absolute;inset:0}
.mv-pad{height:0}
.mv-node{position:absolute;background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:transparent;color:inherit;font:inherit}
.mv-node:focus-visible{outline:3px solid #ffe08a;outline-offset:2px}
.mv-node:active .mv-lbl{transform:translateX(-50%) scale(.96)}
.mv-lbl{position:absolute;left:50%;top:calc(100% - 2px);transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:11.5px;line-height:1.15;color:#fff;
  background:#15131aeb;border:1.5px solid #000;border-radius:6px;padding:2px 6px;box-shadow:0 0 0 1px #e9d8a633 inset,0 2px 0 #000a;text-shadow:0 1px 0 #000;pointer-events:none}
.mv-lbl small{font-size:10px;color:#c9b27c;font-weight:800}
.mv-lbl.town{font-family:"Batang","AppleMyungjo","Noto Serif KR",serif;font-size:13px;border-left:5px solid var(--rc,#8c6e45)}
.mv-lbl.sign{background:#6b4f2a;color:#fff8e1;border-color:#2a1c0c;box-shadow:0 0 0 1px #c9a36a66 inset,0 2px 0 #000a}
.mv-lbl.gold{background:#3b2f12eb;color:#ffe08a}
.mv-lbl.red{background:#5a1614eb;color:#ffd7d2}
.mv-lbl.dim{color:#cfc9d8;background:#2a2733d9}
.mv-lbl.fog{background:#3a3643b3;color:#e9e4f0;font-size:10.5px;border-color:#0008}
.mv-lbl.fog.far{opacity:.6;font-size:9.5px;padding:1px 5px}
.mv-bdgs{position:absolute;left:50%;bottom:calc(100% - 6px);transform:translateX(-50%);display:flex;gap:2px;white-space:nowrap;pointer-events:none}
.mv-bdg{font-weight:900;font-size:10px;line-height:1.2;border:1.5px solid #000;border-radius:999px;padding:0 5px;background:#fff;color:var(--ink);box-shadow:0 1px 0 #000a}
.mv-bdg.due{background:#b8322e;color:#fff}
.mv-bdg.new{background:#ffe08a}
.mv-bdg.now{background:#e8b53a;animation:mvPulse 1.6s ease-in-out infinite}
.mv-seal{position:absolute;right:-2px;bottom:2px;display:grid;place-items:center;width:19px;height:19px;background:#b8322e;color:#fff;border:1.5px solid #000;border-radius:3px;
  font:900 11px/1 Pretendard,system-ui,sans-serif;transform:rotate(-10deg);pointer-events:none;box-shadow:1px 1px 0 #000a}
.mv-stars{position:absolute;left:-2px;bottom:2px;font-size:11px;color:#ffe08a;text-shadow:0 0 2px #000,1px 1px 0 #000;letter-spacing:-1px;pointer-events:none}
.mv-stars.town{left:50%;transform:translateX(-50%);bottom:0;font-size:12px}
.mv-stats .badge.star{background:#15131a;color:#ffe08a;letter-spacing:-.5px}
.lesson .stars{font-size:13px;color:#b8860b;letter-spacing:-.5px;font-weight:900}
.lesson .stars small{color:#5a5566;font-size:11px;font-weight:700;letter-spacing:0;margin-left:4px}
.mv-sheet{position:absolute;left:0;right:0;bottom:0;z-index:40;max-width:600px;margin:0 auto;max-height:66%;overflow-y:auto;overscroll-behavior:contain;
  background:var(--hanji);color:var(--ink);border:3px solid #000;border-bottom:0;border-top:9px solid var(--wood);border-radius:14px 14px 0 0;box-shadow:0 -5px 0 #0007;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));animation:mvUp .22s ease-out both}
.mv-x{position:absolute;right:6px;top:4px;width:40px;height:40px;border:0;background:none;font-size:18px;font-weight:900;color:var(--ink);cursor:pointer}
.mv-sh-head{display:flex;gap:10px;align-items:center;padding-right:34px}
.mv-sh-spr{flex:none;width:96px;height:96px;border:2.5px solid var(--ink);border-radius:10px;background:radial-gradient(circle at 50% 70%,#fff,#e9d8a6 75%);display:grid;place-items:center;overflow:hidden}
.mv-sh-txt{min-width:0}
.mv-sh-txt h3{margin:0;font-family:"Batang","AppleMyungjo","Noto Serif KR",serif;font-size:20px;line-height:1.2}
.mv-sh-txt h3 small{font-size:12px;color:#5a5566}
.mv-kicker{font-size:12px;font-weight:700;color:#5a5566;margin-top:2px}
.mv-stats{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 2px}
.mv-stats .badge.new{background:#ffe08a}.mv-stats .badge.due{background:#b8322e;color:#fff}.mv-stats .badge.seal{background:#f4d6d2;color:#b8322e}.mv-stats .badge.now{background:#e8b53a}
.mv-note{margin:8px 0 2px;font-weight:700;font-size:14px}
.mv-line{margin:6px 0 0;font-size:12px;color:#5a5566;line-height:1.35}
.mv-roads{margin:6px 0 0;padding:0;list-style:none;font-size:12.5px;line-height:1.45}
.mv-roads li{margin:3px 0;color:var(--ink)}
.mv-roads li.done{color:#2f7d4f}
.mv-roads small{color:#5a5566;font-weight:700}
.need .roads{margin:4px 0 0;padding:0;list-style:none}
.need .roads li{margin:2px 0}
.need .roads li.done{color:#2f7d4f;font-weight:800}
.mv-act{margin-top:10px}
.mv-iris{position:absolute;left:0;right:0;top:0;z-index:60;width:100%;height:100%;image-rendering:pixelated;pointer-events:auto}
.dj-maptoggle{display:flex;justify-content:flex-end;margin:4px 0}
@keyframes mvUp{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
@keyframes mvPulse{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.mv-sheet,.mv-bdg.now{animation:none}}
@media (max-width:380px){.mv-silver{display:none}.mv-title b{font-size:15px}}
/* 검풍동: 화면 전체 */
body.dojo.in-action{height:100dvh;overflow:hidden}
body.dojo.in-action .dj-top{display:none}
body.dojo.in-action .dj-view{max-width:none;height:100dvh;padding:0;margin:0}

/* 발문 앞에 Q. — 문장 한가운데 물음이 섞여 있어 어디가 문제인지 헷갈린다는 지적(2026-09-17) */
.q-stem::before{content:"Q.";display:inline-block;margin-right:.4em;padding:0 .38em;
  font-size:.72em;font-weight:900;letter-spacing:0;vertical-align:.12em;
  color:#fff;background:#14232f;border-radius:6px;box-shadow:1px 1px 0 #0003}

/* 오답 해설 — 폰 세로에서 글이 길면 '계속' 이 스크롤 아래로 밀려 안 보였다(2026-09-17).
   버튼 줄을 바닥에 붙박고 글만 스크롤한다. */
.explain{scroll-padding-bottom:64px}
.explain .ex-act{position:sticky;bottom:-10px;z-index:2;display:flex;gap:8px;flex-wrap:wrap;
  margin-top:auto;padding:8px 0 2px;background:var(--hanji);
  box-shadow:0 -10px 12px -6px var(--hanji),0 -1px 0 #0001}
.explain .ex-act .dj-btn{flex:1 1 auto;min-width:120px}
/* 좁고 낮은 화면(폰 세로)에서는 글을 줄여 스크롤 자체를 줄인다 */
@media (max-width:480px){
  .explain{padding:8px;gap:4px}
  .explain .myeong{font-size:12px !important;line-height:1.3}
  .explain .ans{font-size:19px}
  .explain p{font-size:14px;line-height:1.4}
  .explain .ex-act .dj-btn{min-width:0;padding:9px 10px;font-size:14px}
}
@media (max-height:700px){
  .explain .ans{font-size:18px}
  .explain p{font-size:13.5px}
}

/* 상단 큰 이동 버튼 — 학생들이 어디로 돌아가는지 몰라 자꾸 물었다(2026-09-17) */
.dj-big{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:12px;
  border:2.5px solid #000;background:var(--hanji,#f6f1e3);color:var(--ink,#14232f);
  font-weight:900;font-size:15px;text-decoration:none;box-shadow:2px 2px 0 #0006;white-space:nowrap}
.dj-big b{font-weight:900}
.dj-big:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #0006}
@media (max-width:560px){
  .dj-big{padding:6px 9px;font-size:13px;gap:3px}
  .dj-link.inn b{display:none}
}
@media (max-width:380px){ .dj-big b{display:none} .dj-big{padding:6px 8px;font-size:17px} }
/* 판 화면의 경지 칩 — 목숨·내공 옆에 작게, 경험치가 아래 띠로 찬다 */
.lvchip{position:relative;display:inline-flex;align-items:center;padding:2px 8px 4px;border-radius:9px;
  border:2px solid #000;background:#14232f;color:#ffd84d;font-weight:900;font-size:13px;line-height:1;
  overflow:hidden;flex:none}
.lvchip i{position:absolute;left:0;bottom:0;height:3px;background:#ffd84d;transition:width .4s}
@media (max-width:420px){ .lvchip{font-size:12px;padding:2px 6px 4px} }
/* 판 화면의 사부 음성 토글 — 켜면 노란 배경으로 한눈에 */
.dj-link.snd{font-size:16px;line-height:1}
.dj-link.snd.on{background:var(--gold,#ffd84d);border-color:#000}

/* 머리띠 접기 순서 — 좁을수록 글자부터 버린다(아이콘은 끝까지 남긴다) */
@media (max-width:640px){ .dj-top{gap:6px;padding-left:9px;padding-right:9px} }
@media (max-width:430px){
  .dj-big b{display:none}                 /* 큰 버튼은 아이콘만 */
  .dj-big{padding:6px 9px;font-size:18px}
  .dj-link.inn b{display:none}
  .dj-link.inn{padding:3px 7px}
  .dj-top{gap:5px;padding-left:7px;padding-right:7px}
}
@media (max-width:360px){
  .dj-cur{font-size:12px}
  .dj-big{padding:5px 7px}
  .dj-link{padding:3px}
  .dj-top{gap:4px}
}

/* '강호행' 글자는 없애지 말고 줄인다 — 「행」만 남으면 무엇인지 알 수 없다(2026-09-17) */
@media (max-width:560px){ .dj-brand{font-size:16px;gap:6px} }
@media (max-width:430px){ .dj-brand{font-size:15px;gap:5px;letter-spacing:0} }
@media (max-width:360px){ .dj-brand{font-size:14px} }
@media (max-width:340px){ .dj-brand span:not(.seal){display:none} }   /* 정말 좁을 때만 접는다 */

/* 좁은 폰에서 머리띠가 실제로 넘쳤다(실측 360·390px) — 조각마다 조금씩 더 조인다 */
@media (max-width:480px){
  .dj-big b{display:none}
  .dj-big{padding:6px 8px;font-size:18px}
  .dj-link.inn b{display:none}
  .dj-link.inn{padding:3px 6px}
}
@media (max-width:400px){
  .dj-top{gap:4px;padding-left:6px;padding-right:6px}
  .dj-big{padding:5px 6px;font-size:17px}
  .dj-link{padding:2px;font-size:17px}
  .dj-link.inn{padding:2px 5px}
  .dj-cur{font-size:11.5px}
}

/* 아주 좁은 폰(≤400px): 머리띠의 객잔을 접는다 — 홈 화면에 「🏮 객잔 방 · 옷장」 큰 버튼이 따로 있고
   판 중에도 🏮 가 있다. 브랜드 글자와 소지금을 살리는 쪽이 낫다(2026-09-17 실측). */
@media (max-width:400px){ .dj-link.inn{display:none} }

/* ── 불러오는 중 (2026-09-21)
   교수 지적: "강호행으로 들어갈 때 딜레이가 꽤 있는 듯한데 「로딩중…」 같은 걸 만들어 달라."
   곁방 화면 아홉 개를 받는 동안 빈 화면이 보였다. 이제 나란히 받지만(app.js) 그래도
   느린 망에서는 기다림이 있으므로, 처음부터 띄워 두고 다 받으면 걷는다. */
.dj-boot{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:#1b1b22;color:#e9d8a6;text-align:center;padding:24px;
  transition:opacity .28s ease,visibility .28s}
.dj-boot b{font-size:17px;font-weight:900;letter-spacing:-.02em}
.dj-boot small{font-size:12.5px;color:#a79a86}
.dj-boot-seal{width:58px;height:58px;display:grid;place-items:center;border-radius:14px;border:3px solid #000;
  background:#c8102e;color:#fff;font-weight:900;font-size:27px;box-shadow:4px 4px 0 #000;
  animation:dj-boot-pulse 1.25s ease-in-out infinite}
.dj-boot-bar{width:min(220px,58vw);height:7px;border:2px solid #000;border-radius:99px;background:#2b2533;overflow:hidden}
.dj-boot-bar i{display:block;height:100%;width:38%;border-radius:99px;background:linear-gradient(90deg,#e9d8a6,#ffd84d);
  animation:dj-boot-slide 1.15s ease-in-out infinite}
@keyframes dj-boot-pulse{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes dj-boot-slide{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
/* 다 받으면 걷는다 */
body[data-booted="1"] .dj-boot{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .dj-boot-seal,.dj-boot-bar i{animation:none}
  .dj-boot-bar i{width:100%}
}

/* ── 🎁 보물 상자 여는 연출 (2026-09-21)
   교수 지적: "보물상자를 열기 눌러도 아무 이펙트가 없다. 두두둥 긴장감에 뭔가 오픈되는 듯한
   이펙트와 그 후 아이템을 둥둥 띄워 보여 주고 확인을 누르게 하는 게 온라인 게임 같을 듯." */
.chest-fx{position:fixed;inset:0;z-index:90;display:grid;place-items:center;animation:cf-in .18s ease-out both}
.chest-fx.out{animation:cf-out .24s ease-in both}
.chest-fx .cf-back{position:absolute;inset:0;background:#0b0910e0}
.chest-fx .cf-mid{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px;text-align:center;max-width:min(92vw,420px)}
.chest-fx .cf-box{font-size:clamp(74px,22vw,110px);line-height:1;filter:drop-shadow(0 8px 0 #0008)}
.chest-fx .cf-box.shake{animation:cf-shake .16s linear infinite}
.chest-fx .cf-box.pop{animation:cf-pop .42s cubic-bezier(.2,1.7,.4,1) both}
.chest-fx .cf-tense{font-size:clamp(17px,5vw,23px);font-weight:900;color:#ffe08a;letter-spacing:.06em;
  text-shadow:0 3px 0 #000}
/* 빛줄기 — 열리는 순간에만 */
.chest-fx .cf-rays{position:absolute;width:min(150vw,760px);height:min(150vw,760px);opacity:0;
  background:conic-gradient(from 0deg,#ffd84d00 0deg,#ffd84d55 8deg,#ffd84d00 16deg);border-radius:50%}
.chest-fx.cf-open .cf-rays{opacity:1;animation:cf-spin 7s linear infinite}
.chest-fx .cf-item{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;
  animation:cf-rise .5s cubic-bezier(.2,1.5,.4,1) both}
.chest-fx .cf-emoji{font-size:clamp(52px,16vw,78px);line-height:1;animation:cf-float 2.4s ease-in-out infinite}
.chest-fx .cf-glow{position:absolute;top:-12px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,#ffe08a66,#ffe08a00 68%);animation:cf-pulse 1.9s ease-in-out infinite}
.chest-fx .cf-name{font-size:clamp(18px,5.2vw,24px);font-weight:900;color:#fff5cf;text-shadow:0 3px 0 #000}
.chest-fx .cf-desc{font-size:12.5px;color:#cfc9d8;max-width:280px;line-height:1.5}
.chest-fx .cf-item.rare .cf-name{color:#b9f2ff;text-shadow:0 3px 0 #000,0 0 18px #6ad9ff}
.chest-fx .cf-ok{margin-top:10px;min-width:140px}
@keyframes cf-in{from{opacity:0}}
@keyframes cf-out{to{opacity:0}}
@keyframes cf-shake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-4px,1px) rotate(-3deg)}
  50%{transform:translate(3px,-2px) rotate(2deg)}75%{transform:translate(-2px,2px) rotate(-1deg)}}
@keyframes cf-pop{0%{transform:scale(1)}45%{transform:scale(1.35) rotate(6deg)}100%{transform:scale(1.1)}}
@keyframes cf-spin{to{transform:rotate(360deg)}}
@keyframes cf-rise{from{opacity:0;transform:translateY(22px) scale(.82)}}
@keyframes cf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes cf-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){
  .chest-fx .cf-box.shake,.chest-fx .cf-box.pop,.chest-fx .cf-rays,
  .chest-fx .cf-emoji,.chest-fx .cf-glow,.chest-fx .cf-item{animation:none}
}