/* 나뭇잎 마을 — 먹과 종이. 메뉴는 펼친 두루마리, 걷는 동안의 표시는 종이 띠와 붉은 낙관. */
:root {
  --paper: #efe5cf; --paper-2: #e4d6b8; --ink: #1d1a16; --ink-2: #5b5246;
  --red: #b3352a; --leaf: #3c6a30; --wood: #4a2f1f; --line: rgba(29, 26, 22, .18);
  --serif: "Noto Serif KR", "Nanum Myeongjo", "Batang", "Yu Mincho", serif;
  --sans: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0f1410; color: var(--ink); font-family: var(--sans); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
/* 죽음의 숲: 화면 전체에 곱해 덮는 어둡고 푸른 빛과 가장자리의 어둠. 짙기(--g)는 main.js가 정한다 */
#gloom { position: fixed; inset: 0; pointer-events: none; opacity: var(--g, 0); mix-blend-mode: multiply; background: radial-gradient(ellipse at 50% 55%, #5f7fb4 0%, #3c588e 55%, #17264a 100%); }
.hidden { display: none !important; }
/* 만드는 사람만 쓰는 것(하늘에서 둘러보기): 내 컴퓨터에서 연 것이 아니면 숨긴다 */
body:not(.dev) .dev-only { display: none !important; }
kbd { font: 600 11px/1 var(--sans); padding: 3px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: rgba(255, 255, 255, .45); color: var(--ink); }

.leafmark { width: 54px; height: 54px; color: var(--leaf); flex: none; }

/* 짓는 동안 */
#loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; background: #12170f; color: #dfe6cf; z-index: 30; }
#loading .leafmark { width: 84px; height: 84px; color: #8fbf6a; }
#loading p { margin: 0; font: 500 15px var(--serif); letter-spacing: .04em; }
.spin { animation: spin 2.6s linear infinite; }
@keyframes spin { to { transform: rotate(-360deg); } }

/* 두루마리 */
#menu { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; padding-left: clamp(16px, 6vw, 96px);
  background: linear-gradient(90deg, rgba(10, 14, 9, .62), rgba(10, 14, 9, .18) 55%, rgba(10, 14, 9, 0)); }
.scroll { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.rod { height: 16px; margin: 0 -12px; border-radius: 8px; background: linear-gradient(#6b4630, var(--wood) 55%, #2c1b11); position: relative; flex: none; }
.rod::before, .rod::after { content: ""; position: absolute; top: -3px; width: 12px; height: 22px; border-radius: 4px; background: linear-gradient(#b98a3c, #7a5622); }
.rod::before { left: -4px; } .rod::after { right: -4px; }
.sheet { overflow-y: auto; padding: 26px 28px 20px; background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .5), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120, 96, 60, .05) 0 2px, transparent 2px 5px), var(--paper);
  border-left: 5px solid var(--paper-2); border-right: 5px solid var(--paper-2); }
.sheet header { display: flex; align-items: center; gap: 14px; }
.sheet .over { margin: 0 0 2px; font: 500 12px var(--serif); letter-spacing: .32em; color: var(--ink-2); }
.sheet h1 { margin: 0; font: 900 38px/1.1 var(--serif); letter-spacing: -.01em; }
.seal { margin-left: auto; width: 46px; height: 46px; display: grid; place-items: center; font: 900 27px var(--serif); color: var(--paper); background: var(--red);
  border-radius: 7px; transform: rotate(-4deg); box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3.5px rgba(239, 229, 207, .7); }
/* 판 번호 단추(소개글 밑)와, 옆에 펼쳐지는 '바뀐 내용' 두루마리 */
.verline { margin: -8px 0 16px; display: flex; align-items: center; gap: 10px; min-height: 26px; }
#verBtn { padding: 4px 11px 4px 9px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, .4); cursor: pointer; font: 700 12px/1.4 var(--serif); letter-spacing: .04em; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; transition: background .12s, color .12s, border-color .12s; }
#verBtn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
#verBtn::after { content: "바뀐 내용 보기"; font: 500 11.5px var(--sans); letter-spacing: 0; opacity: .8; }
#verBtn:hover, #verBtn[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#verToast { font: 500 12px/1.45 var(--sans); color: var(--red); animation: verToast 8s both; }
@keyframes verToast { 0% { opacity: 0; translate: -6px 0; } 6%, 88% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
/* 메뉴를 뺀 남은 자리의 한가운데에 선다. 펼 때는 말려 있던 두루마리가 위에서 아래로 풀려 내려온다(--h: 종이 높이) */
.scroll.ver { width: min(400px, calc(100vw - 32px)); margin: 0 auto; }
.scroll.ver.unroll .sheet { animation: verSheet .62s cubic-bezier(.33, 0, .18, 1) both; }
.scroll.ver.unroll .rod:last-child { animation: verRod .62s cubic-bezier(.33, 0, .18, 1) both; }
/* 닫을 때는 거꾸로 말려 올라간다 */
.scroll.ver.rollup .sheet { animation: verSheet .46s cubic-bezier(.33, 0, .18, 1) both reverse; }
.scroll.ver.rollup .rod:last-child { animation: verRod .46s cubic-bezier(.33, 0, .18, 1) both reverse; }
@keyframes verSheet { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes verRod { from { translate: 0 calc(-1 * var(--h, 0px)); scale: 1 1.5; } 85% { scale: 1 1.12; } to { translate: 0 0; scale: 1 1; } }
.scroll.ver .sheet { padding: 22px 24px 18px; }
.scroll.ver header { align-items: flex-start; }
.vtitle { margin: 0; font: 900 24px/1.15 var(--serif); }
#verClose { margin-left: auto; padding: 5px 11px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, .4); cursor: pointer; font-size: 12px; font-weight: 600; }
#verClose:hover { background: var(--red); color: var(--paper); border-color: var(--red); }
#verLog article { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
#verLog h3 { margin: 0 0 7px; font: 800 15px var(--serif); display: flex; align-items: baseline; gap: 8px; }
#verLog h3 small { margin-left: auto; font: 400 11.5px var(--sans); color: var(--ink-2); }
#verLog ul { margin: 0; padding-left: 17px; font: 400 12.5px/1.7 var(--sans); color: var(--ink-2); }
/* 좁은 화면: 옆에 세울 자리가 없으니 메뉴 위에 겹쳐 편다 */
@media (max-width: 920px) { .scroll.ver { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; z-index: 2; } }
.lede { margin: 16px 0 18px; font: 400 14px/1.7 var(--sans); color: var(--ink-2); }

.sheet .enter { width: 100%; padding: 15px 18px; border: 0; cursor: pointer; font: 800 18px var(--serif); letter-spacing: .06em; color: var(--paper); background: var(--ink);
  border-radius: 3px; position: relative; transition: transform .12s, background .12s; }
.enter::after { content: "入"; position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; display: grid; place-items: center; font-size: 16px; background: var(--red); border-radius: 4px; }
.enter:hover { background: #2c2720; transform: translateY(-1px); }
.enter:active { transform: translateY(1px); }

.sheet section { margin-top: 20px; }
.sheet section.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.sheet h2 { margin: 0 0 8px; font: 700 12px var(--serif); letter-spacing: .22em; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.sheet h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.sheet button { font-family: var(--sans); color: var(--ink); }
.wxrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wxrow button { position: relative; padding: 12px 4px 9px; display: grid; justify-items: center; gap: 7px; cursor: pointer; background: rgba(255, 255, 255, .35); border: 1px solid var(--line); border-radius: 4px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s; }
.wxrow button:hover { background: rgba(255, 255, 255, .7); }
.wxrow button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wxrow kbd { position: absolute; top: 4px; right: 4px; font-size: 9px; padding: 2px 4px; opacity: .7; }
.wxrow button.on kbd { background: rgba(255, 255, 255, .15); color: var(--paper); border-color: rgba(255, 255, 255, .3); }
/* 날씨 그림: 붓으로 찍은 듯한 작은 표식 */
.wx { width: 30px; height: 30px; position: relative; display: block; }
.wx-clear::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(179, 53, 42, .22); }
.wx-cloudy::before, .wx-rain::before, .wx-snow::before { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 11px; border-radius: 9px; background: currentColor; opacity: .85; box-shadow: 6px -5px 0 -1px currentColor; }
.wx-rain::before, .wx-snow::before { top: 4px; }
.wx-rain::after { content: ""; position: absolute; left: 7px; top: 18px; width: 2px; height: 9px; background: currentColor; transform: skewX(-18deg); box-shadow: 7px 0 0 currentColor, 14px 0 0 currentColor; }
.wx-snow::after { content: ""; position: absolute; left: 7px; top: 20px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 8px 3px 0 currentColor, 15px -1px 0 currentColor; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button { padding: 9px 0; border: 0; background: rgba(255, 255, 255, .35); cursor: pointer; font-size: 13px; font-weight: 600; }
.seg.duo { grid-template-columns: repeat(2, 1fr); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--leaf); color: #f3f6ea; }
.toggle { width: 100%; padding: 9px 0; border: 1px solid var(--line); border-radius: 4px; background: rgba(255, 255, 255, .35); cursor: pointer; font-size: 13px; font-weight: 600; }
.toggle.on { background: var(--leaf); color: #f3f6ea; border-color: var(--leaf); }

.sheet .note { margin: -2px 0 9px; font: 400 12.5px/1.6 var(--sans); color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .4); cursor: pointer; font-size: 12.5px; transition: background .12s, color .12s; }
.tags button:hover { background: var(--red); color: var(--paper); border-color: var(--red); }

.sheet footer { margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--ink-2); }
.sheet footer span { display: inline-flex; align-items: center; gap: 4px; }

/* 걷는 동안 */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
@keyframes unroll { from { clip-path: inset(0 100% 0 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
/* 미니맵: 오른쪽 위의 둥근 지도와, 그 왼쪽의 확대·축소 단추 */
#mini { position: absolute; right: 22px; top: 54px; width: 176px; height: 176px; border-radius: 50%; border: 3px solid var(--paper); box-shadow: 0 0 0 2px rgba(29, 26, 22, .7), 0 8px 20px rgba(0, 0, 0, .35); background: #a9cf82; }
/* 축척 단추: 미니맵의 오른쪽 아래 테두리에 걸쳐 놓는다 */
/* 미니맵 위의 팻말: 지금 선 자리의 이름(미니맵 윗전에 걸친다) */
#miniName { position: absolute; right: 22px; top: 16px; width: 176px; display: flex; justify-content: center; pointer-events: none; }
#miniName b { min-width: 74px; max-width: 200px; flex: none; box-sizing: border-box; padding: 5px 10px 5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 900 11.5px/1.25 var(--serif); letter-spacing: .02em; color: var(--ink); background: linear-gradient(#f3ead6, #e4d6b8); border: 2px solid var(--wood); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 3px 8px rgba(0, 0, 0, .4); }
#miniName b:empty { display: none; }
#miniZoom { position: absolute; right: 22px; top: 54px; width: 176px; height: 176px; pointer-events: none; }
#miniIn { right: -2px; top: 116px; }
#miniOut { right: 19px; top: 143px; }
#miniZoom button { position: absolute; pointer-events: auto; width: 24px; height: 24px; padding: 0; font: 800 15px/1 var(--sans); color: var(--paper); background: rgba(29, 26, 22, .92); border: 1px solid rgba(239, 229, 207, .45); border-radius: 50%; cursor: pointer; }
#miniZoom button:hover { background: var(--red); }
/* 전체 지도를 편 동안: 미니맵과 단추만 지도 위로 올리고 나머지 표시는 감춘다 */
#hud.map { z-index: 23; }
/* 두루마리(메뉴)를 띄운 동안: 미니맵과 축척 단추만 남기고 두루마리 위에 올린다 */
#hud.menu { z-index: 21; }
#hud.menu > *:not(#mini):not(#miniZoom):not(#miniName) { display: none; }
#hud.map .aim, #hud.map #skyBar, #hud.map #charge, #hud.map #touch { display: none; }
.aim { display: none; }   /* 화면 한가운데의 흰 점은 쓰지 않는다 */

/* 모아 뛰기: 조준점 아래에서 차오르는 먹빛 띠, 가득 차면 붉은 낙관색 */
#charge { position: absolute; left: 50%; top: 85%; width: 116px; height: 9px; translate: -50% 0; background: rgba(29, 26, 22, .5); border: 1px solid rgba(239, 229, 207, .7); border-radius: 2px; opacity: 0; transition: opacity .12s; }
#charge.on { opacity: 1; }
#charge i { display: block; height: 100%; width: calc(var(--c, 0) * 100%); background: var(--paper); }
#charge.full i { background: var(--red); }


/* ============================================================
   스마트폰(터치) — 가로로 든 화면 기준. body.touch 일 때만 먹는다.
   ============================================================ */
.touch-only, #touch, #rotate { display: none; }
body.touch { position: fixed; left: 0; top: 0; width: var(--W, 100%); height: var(--H, 100%); overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.touch #view, body.touch #hud, body.touch #loading, body.touch #menu, body.touch #rotate { inset: auto; left: 0; top: 0; width: var(--W, 100%); height: var(--H, 100%); }
body.touch #view { touch-action: none; }
body.touch .pc-only, body.touch .status, body.touch .aim, body.touch .wxrow kbd { display: none; }
body.touch .sheet footer.touch-only { display: flex; }

/* 조작판: 조이스틱은 닿아 있을 때만 붓으로 그린 고리처럼 비친다 */
body.touch #touch { display: block; position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
#stick { position: absolute; width: 116px; height: 116px; margin: -58px; border-radius: 50%; border: 3px solid rgba(239, 229, 207, .55); background: rgba(29, 26, 22, .18); opacity: 0; transition: opacity .15s; pointer-events: none; }
#stick.on { opacity: 1; }
#stick.run { border-color: rgba(179, 53, 42, .9); }
#knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px; border-radius: 50%; background: rgba(239, 229, 207, .6); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
#stick.run #knob { background: rgba(179, 53, 42, .85); }
#touch button { pointer-events: auto; touch-action: none; font: 700 13px var(--serif); color: var(--paper); background: rgba(29, 26, 22, .62); border: 1px solid rgba(239, 229, 207, .35); border-radius: 4px; }
#touch button:active { background: var(--red); }
#btnJump { position: absolute; right: calc(env(safe-area-inset-right) + 26px); bottom: calc(env(safe-area-inset-bottom) + 30px); width: 64px; height: 64px; border-radius: 50% !important; display: grid; place-items: center; }
#btnJump svg { width: 28px; height: 28px; }
.tbar { position: absolute; right: calc(env(safe-area-inset-right) + 12px); top: calc(env(safe-area-inset-top) + 12px); display: flex; gap: 6px; }
.tbar button { height: 38px; padding: 0 12px; display: grid; place-items: center; }
.tbar svg { width: 20px; height: 20px; }

/* 자리 이름: 폰에서는 이름만 작게 */

/* 두루마리: 낮은 가로 화면에 맞춰 넓고 촘촘하게, 안에서 위아래로 민다 */
body.touch #menu { padding-left: calc(env(safe-area-inset-left) + 14px); }
body.touch .scroll { width: min(600px, calc(var(--W, 100vw) - 28px)); max-height: calc(var(--H, 100vh) - 16px); }
body.touch .sheet { padding: 14px 20px 12px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
body.touch .sheet h1 { font-size: 26px; }
body.touch .leafmark { width: 38px; height: 38px; }
body.touch .seal { width: 36px; height: 36px; font-size: 21px; }
body.touch .lede { display: none; }
body.touch .verline { margin: 8px 0 0; }   /* 소개글이 없으니 제목 밑으로 띄운다(안 그러면 제목과 겹친다) */
body.touch .sheet .enter { margin-top: 12px; padding: 11px 16px; font-size: 16px; }
body.touch .sheet section { margin-top: 12px; }
body.touch .wxrow button { padding: 8px 4px 7px; gap: 4px; }
body.touch .wx { transform: scale(.8); margin: -3px; }
body.touch .tags button { padding: 7px 11px; }
body.touch .sheet footer { margin-top: 12px; padding-top: 10px; }

/* 세로로 들었을 때 */
@media (orientation: portrait) {
  body.touch #rotate { display: grid; position: fixed; z-index: 40; place-content: center; justify-items: center; gap: 20px; background: rgba(18, 23, 15, .97); color: #dfe6cf; font: 500 15px var(--serif); }
  #rotate .phone { width: 46px; height: 78px; border: 3px solid #8fbf6a; border-radius: 9px; animation: turn 2.2s ease-in-out infinite; }
  #rotate p { margin: 0; }
}
@keyframes turn { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
.sheet footer.touch-only { display: none; }

/* 하늘에서 보기 */
.sheet .skyenter { width: 100%; margin-top: 8px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, .35); cursor: pointer; font: 700 15px var(--serif); letter-spacing: .04em; color: var(--ink); transition: background .12s; }
.sheet .skyenter:hover { background: rgba(255, 255, 255, .7); }
/* 도움말: 오른쪽 아래. 닫혀 있으면 'H 도움말' 한 줄, 열면 자판 안내 */
#help { position: fixed; right: 22px; bottom: 22px; z-index: 22; color: var(--paper); font-size: 12px; }
#help kbd { background: rgba(255, 255, 255, .14); color: var(--paper); border-color: rgba(255, 255, 255, .32); }
#helpTab { display: flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border: 0; border-radius: 3px; background: rgba(29, 26, 22, .34); color: inherit; font: 600 12px var(--sans); cursor: pointer; opacity: .72; transition: background .12s, opacity .12s; }
#helpTab:hover { background: rgba(29, 26, 22, .86); opacity: 1; }
#help.open #helpTab { display: none; }
#helpBody { padding: 12px 16px 13px; border-radius: 4px; background: rgba(29, 26, 22, .92); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); cursor: pointer; }
#helpBody p { margin: 0 0 9px; padding-bottom: 8px; border-bottom: 1px dashed rgba(239, 229, 207, .28); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#helpBody p b { font: 800 13.5px var(--serif); letter-spacing: .08em; }
#helpBody p span { display: inline-flex; align-items: center; gap: 5px; opacity: .75; font-size: 11.5px; }
#helpBody dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 6px 12px; align-items: center; }
#helpBody dt { display: flex; gap: 3px; align-items: center; justify-content: flex-end; }
#helpBody dd { margin: 0; display: flex; gap: 3px; align-items: center; white-space: nowrap; opacity: .92; }
#skyBar { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: rgba(29, 26, 22, .74); color: var(--paper); border-radius: 3px; font-size: 12px; white-space: nowrap; }
#skyBar b { font: 800 14px var(--serif); }
#skyBar em { font-style: normal; font-variant-numeric: tabular-nums; padding: 2px 8px; background: var(--red); border-radius: 3px; font-weight: 700; }
#skyBar kbd { display: inline-block; margin: 0 2px 0 8px; padding: 1px 6px; border: 1px solid rgba(239, 229, 207, .45); border-radius: 3px; font: 600 11px inherit; }
#skyBar kbd + kbd { margin-left: 0; }
#hud.sky .aim, #hud.sky #charge { display: none; }
body.touch #skyBar { bottom: auto; top: calc(env(safe-area-inset-top) + 58px); left: auto; right: calc(env(safe-area-inset-right) + 12px); translate: none; padding: 6px 10px; }
body.touch #btnSky.on { background: var(--red); color: var(--paper); }

/* 전체 지도 */
#mapView { position: fixed; inset: 0; z-index: 22; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 22px; background: rgba(18, 16, 13, .82); }
#mapCanvas { width: min(calc(100vh - 44px), calc(100vw - 400px)); aspect-ratio: 1; border: 4px solid var(--paper); box-shadow: 0 0 0 2px rgba(29, 26, 22, .8), 0 12px 30px rgba(0, 0, 0, .45); background: #a9cf82; cursor: crosshair; touch-action: none; }
#mapView .side { width: 310px; max-height: calc(100vh - 44px); display: flex; flex-direction: column; gap: 10px; }
#mapHere { margin: 0; padding: 0 2px; font: 600 14px var(--sans); color: var(--paper); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
#mapHere i { width: 11px; height: 11px; border-radius: 50%; background: #4fb548; box-shadow: 0 0 0 2px rgba(79, 181, 72, .3); }
#mapHere b { font: 900 17px var(--serif); }
#mapView aside { min-height: 0; display: flex; flex-direction: column; background: var(--paper); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
#mapView header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px 18px; border-bottom: 1px solid var(--line); }
#mapView h2 { margin: 0; font: 900 19px/1.2 var(--serif); }
#mapClose { font: 700 12px var(--sans); color: var(--paper); background: var(--ink); border: 0; border-radius: 3px; padding: 6px 10px; cursor: pointer; }
#mapPanel { flex: 1; overflow: auto; padding: 12px 16px 14px 18px; }
#mapPanel article { padding: 8px 0; border-top: 1px solid var(--line); }
#mapPanel article:first-of-type { border-top: 0; padding-top: 0; }
#mapPanel b { font: 900 16px/1.3 var(--serif); }
#mapPanel p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
#mapPanel .hint { font-size: 12px; }
#mapView footer { padding: 10px 16px 12px 18px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.9; color: var(--ink-2); }
#mapView kbd { display: inline-block; padding: 1px 6px; border: 1px solid rgba(29, 26, 22, .4); border-radius: 3px; font: 600 11px inherit; }
/* 폰: 미니맵은 단추 줄을 피해 왼쪽 위에 작게, 전체 지도는 설명 종이를 지도 옆에 좁게 */
/* 폰: 미니맵은 오른쪽 위. 누르면 전체 지도가 펴진다. 날씨·바람·지도 단추는 두지 않고(메뉴에서 바꾼다) 메뉴 단추만 미니맵 왼쪽에 둔다 */
body.touch #btnWeather, body.touch #btnWind, body.touch #btnMap { display: none; }
body.touch .tbar { right: calc(env(safe-area-inset-right) + 134px); }
body.touch #hud.map #mini, body.touch #hud.map #miniZoom, body.touch #hud.map #miniName { display: none; }   /* 전체 지도를 편 동안에는 미니맵을 치운다(옆 설명 칸과 붙어 답답하다) */
body.touch #miniZoom { left: auto; right: calc(env(safe-area-inset-right) + 12px); top: calc(env(safe-area-inset-top) + 41px); width: 112px; height: 112px; }
body.touch #miniName { left: auto; right: calc(env(safe-area-inset-right) + 12px); top: calc(env(safe-area-inset-top) + 10px); width: 112px; }
body.touch #miniName b { min-width: 56px; max-width: 150px; padding: 3px 6px 3px; font-size: 10px; }
body.touch #miniZoom button { width: 22px; height: 22px; font-size: 14px; }
body.touch #miniIn { right: -5px; top: 70px; }
body.touch #miniOut { right: 13px; top: 91px; }
body.touch #mini { pointer-events: auto; left: auto; right: calc(env(safe-area-inset-right) + 12px); top: calc(env(safe-area-inset-top) + 41px); width: 112px; height: 112px; border-width: 2px; }
body.touch #mapView { gap: 10px; padding: 8px; width: var(--W, 100%); height: var(--H, 100%); inset: auto; left: 0; top: 0; }
body.touch #mapCanvas { width: min(calc(var(--H, 100vh) - 16px), calc(var(--W, 100vw) - 230px)); }
body.touch #mapView .side { width: 200px; max-height: calc(var(--H, 100vh) - 16px); gap: 6px; }