/* HaLab Quest — 쯔꾸르풍 화면. 짙은 녹색 헤더, 베이지 양피지 패널, 나무 테두리, 차분한 붉은 버튼
   다른 kkonoo 앱의 토큰 이름을 그대로 쓰되 색은 게임용 (게임 화면이라 어두운 테마는 따로 두지 않음) */
:root {
  --bg: #2F4A36;            /* 숲 바탕 */
  --bg-2: #253C2C;
  --surface: #F6ECD2;       /* 양피지 */
  --surface-2: #EFE1BF;
  --line: #C9AE7C;
  --wood: #7A5233;          /* 나무 테두리 */
  --wood-2: #5A3B24;
  --gold: #D9B45A;
  --text: #3A2A1A;
  --muted: #7C6A55;
  --faint: #B9A687;
  --accent: #A8433F;        /* 붉은 메인 버튼 */
  --accent-soft: #F3D9D2;
  --on-accent: #FFF8EC;
  --header: #23402E;
  --bad: #C0392B;
  --warn: #C98A1A;
  --good: #3E8E4E;
  --star: #E0A82E;
  --navy: #2C4A7A;
  --radius: 10px;
  --fs: 1;
  --pixel: Galmuri11, "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", system-ui, sans-serif;
  color-scheme: only light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg) radial-gradient(circle at 20% 10%, #3B5A41 0 2px, transparent 3px) 0 0 / 28px 28px;
  color: var(--text);
  font-family: var(--pixel); /* 본문까지 모두 도트 글꼴 (Galmuri11: 보통 · 굵게) */
  font-size: calc(15px * var(--fs));
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--navy); }
h1, h2, h3, .panel-head, .big-btn, .tool b, .title, .region b, .sign b, .who, .place, .stat-card b, .badge b { font-family: var(--pixel); font-weight: normal; }

/* ---------- 상단 헤더 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(var(--header), #1C3324);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 0 var(--wood-2);
}
.title { color: #F6ECD2; text-decoration: none; font-size: calc(22px * var(--fs)); display: flex; gap: 12px; align-items: baseline; min-width: 0; }
.title #titleSub { font-size: .8em; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title .sep { opacity: .6; }
.tools { display: flex; gap: 4px; align-items: center; background: var(--surface); border: 2px solid var(--wood); border-radius: 8px; padding: 3px; }
.tool { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; background: none; color: var(--text); text-decoration: none; cursor: pointer; border-radius: 6px; }
.tool:hover { background: var(--surface-2); }
.tool span { font-size: 1.25em; }
.tool .ti { width: 28px; height: 28px; }
.btn, .avatar { cursor: pointer; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--wood); background: var(--navy); color: #fff; font-weight: 700; }

main { max-width: 1440px; margin: 0 auto; padding: 16px; }

/* ---------- 공통 패널 ---------- */
.panel {
  background: var(--surface);
  border: 3px solid var(--wood);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px var(--gold), 0 3px 0 var(--wood-2);
  padding: 14px 16px;
  min-width: 0;
}
.panel-head { margin: 0 0 10px; font-size: calc(19px * var(--fs)); color: var(--navy); display: flex; align-items: center; gap: 8px; }
.card { background: var(--surface); border: 2px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.hint { color: var(--muted); font-size: .92em; margin: 6px 0; }
.center { text-align: center; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 14px; border: 2px solid var(--wood); border-radius: 8px;
  background: var(--surface-2); color: var(--text); text-decoration: none; font-weight: 600;
}
.btn:hover { background: #E8D6AE; }
.btn.small { padding: 4px 10px; font-size: .9em; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: #7E2E2B; }
.btn.danger { color: var(--bad); }
.icon-btn { border: 1px solid var(--line); background: var(--surface-2); border-radius: 6px; cursor: pointer; }
.icon-btn.small { padding: 0 6px; font-size: .85em; }
.big-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 64px; padding: 12px 20px;
  background: linear-gradient(#B44D48, var(--accent)); color: var(--on-accent);
  border: 3px solid var(--wood-2); border-radius: 10px;
  box-shadow: inset 0 0 0 2px #D98A7E, 0 3px 0 var(--wood-2);
  font-size: calc(21px * var(--fs)); text-decoration: none; text-align: center;
}
.big-btn:hover { filter: brightness(1.06); }
.chip { display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: .8em; color: var(--muted); }
.mk { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border-radius: 0; font-weight: 800; flex: none; }
/* 갈무리체에는 ✓ 글자가 없어서(다른 글꼴로 매끈하게 나옴) 도트 체크를 그림으로 그리고 글자는 숨김 */
.mk.ok { background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges' fill='%23FFF6DC'%3E%3Cpath d='M6 0h1v2H6zM5 1h1v2H5zM0 2h1v2H0zM4 2h1v2H4zM1 3h1v2H1zM3 3h1v2H3zM2 4h1v2H2z'/%3E%3C/svg%3E") center / 14px 12px no-repeat; color: transparent; border: 2px solid #23402E; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.mk.empty { border: 2px solid var(--faint); color: transparent; }
.mk.star { color: var(--star); font-size: 1.2em; }
.mk.big { width: 2em; height: 2em; font-size: 1.1em; }
.mk.big.ok { background-size: 21px 18px; }
/* 글 속의 작은 도트 체크 (✓ 0 / 5 같은 개수 앞) */
.ck { display: inline-block; width: 14px; height: 12px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges' fill='%233E8E4E'%3E%3Cpath d='M6 0h1v2H6zM5 1h1v2H5zM0 2h1v2H0zM4 2h1v2H4zM1 3h1v2H1zM3 3h1v2H3zM2 4h1v2H2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.star-txt { color: var(--star); font-weight: 700; }

/* ---------- 교수님 대화창 ---------- */
.dialog-box {
  display: flex; gap: 14px; align-items: stretch;
  background: var(--surface); border: 3px solid var(--wood); border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px var(--gold), 0 3px 0 var(--wood-2);
  padding: 12px; min-width: 0;
}
.portrait { flex: none; width: 104px; align-self: flex-start; background: #FBF1DC; border-radius: 8px; border: 2px solid var(--line); overflow: hidden; }
.portrait img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.speech { min-width: 0; }
.who { display: inline-block; background: var(--wood); color: #F6ECD2; padding: 3px 14px; border-radius: 6px; margin-bottom: 6px; }
.speech p { margin: 3px 0; line-height: 1.55; word-break: keep-all; }

/* ---------- 장면 (그림이 생기면 background-image로) ---------- */
.scene {
  position: relative; overflow: hidden;
  border: 3px solid var(--wood); border-radius: var(--radius);
  background-size: cover; background-position: center;
  box-shadow: 0 3px 0 var(--wood-2);
}
.c-ch1 .scene { background-color: #3F6B45; background-image: linear-gradient(#7FB27A, #3F6B45 70%); }
.c-ch2 .scene { background-color: #6E8F5A; background-image: linear-gradient(#9CC4E4, #B9D29A 45%, #6E8F5A); }
.c-ch3 .scene { background-color: #8A6B48; background-image: linear-gradient(#A9CBE6, #C8B48A 45%, #8A6B48); }
.c-ch4 .scene { background-color: #6B4E6E; background-image: linear-gradient(#F2B27A, #B9789A 45%, #5E4A6E); }
.walker { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 42px; white-space: nowrap; }
.walker .cat { font-size: .65em; margin-left: 4px; }
.place { position: absolute; top: 10px; left: 10px; background: var(--wood); color: #F6ECD2; padding: 4px 12px; border-radius: 6px; border: 2px solid var(--wood-2); }
.bubble { position: absolute; top: 12px; right: 14px; max-width: 60%; background: #fff; border: 2px solid var(--wood-2); border-radius: 12px; padding: 8px 12px; font-weight: 600; word-break: keep-all; }
.props { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; letter-spacing: 6px; text-shadow: 0 3px 0 rgba(0,0,0,.2); padding-bottom: 30px; }

/* ---------- 월드맵 ---------- */
.screen { display: grid; gap: 14px; }
.map-area { background: linear-gradient(#8CC1E0, #A9CF8E 40%, #5E8C55); border: 3px solid var(--wood); border-radius: var(--radius); padding: 22px; box-shadow: 0 3px 0 var(--wood-2); }
.map-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.region {
  display: grid; gap: 4px; justify-items: start; padding: 16px 18px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 3px solid var(--wood); border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--gold), 0 4px 0 var(--wood-2);
  position: relative;
}
.region:hover { transform: translateY(-2px); }
.region b { font-size: calc(21px * var(--fs)); }
.region small { color: var(--muted); }
.region-prog { font-weight: 700; color: var(--good); }
.region > .medal { position: absolute; top: -27px; right: -27px; width: 34px; height: 34px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); } /* 수료한 장: 이름판 오른쪽 위 모서리에 메달 */
.region b { word-break: keep-all; }
.region .chip { position: absolute; top: 12px; right: 12px; }
.bottom-row { display: grid; grid-template-columns: 1fr minmax(280px, 420px); gap: 14px; align-items: stretch; }
/* 월드맵 아래 오른쪽: My Journey · My CV 두 칸 (아이콘 위, 이름 아래), 로그인은 아래 한 줄 */
.side-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: stretch; }
.side-link { display: grid; justify-items: center; align-content: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 3px solid var(--wood); border-radius: var(--radius); text-decoration: none; color: var(--text); font-family: var(--pixel); font-size: 1.1em; text-align: center; cursor: pointer; }
.sl-icon { width: 44px; height: 44px; }
.side-link.login { grid-column: 1 / -1; background: var(--accent); color: var(--on-accent); }

/* ---------- 챕터 맵 ---------- */
.chapter-scene { min-height: 380px; padding: 18px 18px 80px; }
.signs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; position: relative; z-index: 1; }
.sign { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #8B5E3C; color: #FBF1DA; border: 3px solid var(--wood-2); border-radius: 8px; text-decoration: none; box-shadow: 0 3px 0 rgba(0,0,0,.25); position: relative; }
.sign-text { display: grid; word-break: keep-all; }
.sign small { opacity: .85; }
.sign .mk { width: 22px; height: 22px; }
.way { position: absolute; bottom: 14px; background: #8B5E3C; color: #FBF1DA; padding: 8px 14px; border: 3px solid var(--wood-2); border-radius: 8px; text-decoration: none; font-family: var(--pixel); z-index: 2; }
.way.left { left: 14px; } .way.right { right: 14px; }
.quest-list .qlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.qlist a { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #FBF4E2; text-decoration: none; color: var(--text); }
/* 번호: 지도 이름표처럼 짙은 녹색 판 + 금색 테두리 */
.qlist .num { width: 28px; height: 28px; border-radius: 4px; background: var(--header); color: #F6ECD2; border: 2px solid var(--gold); box-shadow: 0 2px 0 var(--wood-2); display: grid; place-items: center; font-size: .95em; flex: none; }
.qlist .marks { margin-left: auto; display: flex; gap: 2px; }
.quest-list .row .big-btn { flex: 1; }

/* ---------- 퀘스트 화면 ---------- */
.screen.quest {
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(280px, 360px);
  grid-template-areas: "menu stage info";
  align-items: start;
}
.q-menu { grid-area: menu; display: grid; gap: 10px; align-content: start; }
.q-stage { grid-area: stage; min-width: 0; display: grid; gap: 10px; }
.q-info { grid-area: info; display: grid; gap: 12px; }
.q-widget { min-width: 0; }
/* 이전 · 다음: 장 지도 버튼 아래에 한 줄에 하나씩 */
.q-nav { display: grid; gap: 8px; }
.q-nav .big-btn { min-height: 64px; font-size: calc(16px * var(--fs)); word-break: keep-all; }
.q-menu .panel-head, .q-menu nav a { word-break: keep-all; }
.q-menu .panel-head { display: block; font-size: calc(17px * var(--fs)); } /* 이모지가 칸을 따로 차지하지 않고 글자 바로 뒤에, 한 줄에 들어가게 */
.q-menu .panel-head .qi { font-size: .85em; }
.q-menu nav { display: grid; gap: 4px; }
.q-menu nav a { padding: 9px 10px; border-radius: 6px; text-decoration: none; color: var(--text); border: 1px solid transparent; }
.q-menu nav a:hover { background: var(--surface-2); }
.q-menu nav a.on { background: var(--accent); color: var(--on-accent); border-color: #7E2E2B; font-weight: 700; }
.map-btn { display: block; text-align: center; color: #FBF1DA; text-decoration: none; font-family: var(--pixel); }
.quest-scene { min-height: 230px; }
.card.overview p, .card.reading p { line-height: 1.6; }
.card.reading { max-height: 560px; overflow: auto; border: 3px solid var(--wood); box-shadow: inset 0 0 0 2px var(--gold); }
.card h3, .card h4 { color: var(--navy); margin: 14px 0 6px; }
.card table, .info-table { border-collapse: collapse; width: 100%; font-size: .93em; }
.card th, .card td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.card th { background: var(--surface-2); }
.card blockquote { margin: 8px 0; padding: 8px 12px; background: #FBF4E2; border-left: 4px solid var(--gold); color: var(--muted); }
.card code { font-family: GalmuriMono11, var(--pixel); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.card li { margin: 3px 0; line-height: 1.5; }
.card li.check { list-style: none; margin-left: -1.2em; }
.box { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--muted); border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.box.on { background: var(--good); border-color: var(--good); }
.skeleton { background: #FBF4E2; border: 1px dashed var(--line); border-radius: 8px; padding: 10px 10px 10px 30px; }
.info-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 5px 8px 5px 0; white-space: nowrap; vertical-align: top; width: 1%; }
.info-table td { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.info-note { margin: 8px 0 0; font-weight: 600; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-box { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 10px 12px; background: var(--surface); border: 3px solid var(--wood); border-radius: var(--radius); cursor: pointer; box-shadow: 0 3px 0 var(--wood-2); }
.check-box:not(.on) .mk.ok { background: none; border: 2px solid var(--good); }
.check-box.on { background: #E5F1DF; }
.check-box.star.on { background: #FBF0D2; }
.check-box b { font-family: var(--pixel); font-weight: normal; color: var(--good); }
.check-box.star b { color: #A87414; }
.check-box small { color: var(--muted); line-height: 1.4; }
.check-box .when { font-size: .8em; }

/* 흐름 · 카드 */
.flow { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; }
.flow .arrow { align-self: center; color: var(--muted); font-weight: 700; }
.step {
  flex: 1 0 110px; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center;
  padding: 10px 8px; background: #FBF4E2; border: 2px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--text); position: relative;
}
.step.hl { border: 3px solid var(--accent); }
.step b { word-break: keep-all; }
.step-icon { font-size: 28px; }
.step small { color: var(--muted); font-size: .82em; }
.step .tag { background: var(--accent); color: var(--on-accent); font-size: .78em; padding: 1px 8px; border-radius: 4px; text-decoration: none; }
.step.fig { padding: 0; }
.fig-body { display: grid; justify-items: center; gap: 4px; padding: 10px 8px 4px; background: none; border: 0; cursor: pointer; width: 100%; }
.fig-move { display: flex; gap: 4px; padding-bottom: 6px; }
.step.add { flex: 0 0 90px; border-style: dashed; font-size: 32px; color: var(--muted); cursor: pointer; place-content: center; }
.band { margin-top: 6px; padding: 7px 12px; text-align: center; background: var(--accent-soft); color: #8A2F2B; border-radius: 99px; font-weight: 600; }
a.step:hover { border-color: var(--wood); background: #FFF8E6; }
.branch { flex: 1 0 110px; display: grid; gap: 6px; }
.branch .step { flex: none; }

/* AI 신호등 */
.lights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.light { padding: 10px 12px; background: #FBF4E2; border: 2px solid var(--line); border-top-width: 6px; border-radius: 8px; }
.light.green { border-top-color: var(--good); } .light.yellow { border-top-color: var(--star); } .light.red { border-top-color: var(--bad); }
.lamp-head { display: flex; align-items: center; gap: 8px; font-family: var(--pixel); }
.lamp { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--wood-2); flex: none; }
.green .lamp { background: #5DBB6C; box-shadow: 0 0 8px #8FDB99; } .yellow .lamp { background: #F2C14E; box-shadow: 0 0 8px #F7D98A; } .red .lamp { background: #D9483F; box-shadow: 0 0 8px #EE8A82; }
.light ul { margin: 8px 0 0; padding-left: 18px; }
.light li { margin: 3px 0; line-height: 1.45; }

/* 교재 여권: 분야마다 한 쪽, 교재마다 동그라미 스탬프 (--ink = 분야 색) */
.passport { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.pp-page { min-width: 0; display: grid; gap: 8px; align-content: start; padding: 10px 12px; background: #FBF4E2; border: 2px solid var(--line); border-top: 6px solid var(--ink); border-radius: 8px; }
.pp-page h3 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; color: var(--ink); font-size: 1.05em; }
.pp-page h3 small { color: var(--muted); font-family: inherit; }
.pp-stamps { display: flex; align-items: flex-start; gap: 2px; }
.pp-stamps .arrow { margin-top: 20px; color: var(--faint); font-size: .85em; }
.pp-slot { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 4px; text-align: center; }
.pp-stamp { position: relative; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.pp-stamp img { display: block; width: 100%; height: 100%; }
.pp-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; color: #A88A5C; }
.pp-stamp:hover img { filter: brightness(.92); }
.pp-stamp.next { outline: 3px dashed var(--accent); outline-offset: 1px; }
.pp-stamp.next .pp-num { color: var(--accent); }
.pp-stamp.on { transform: rotate(var(--tilt, -8deg)); }
.pp-name { font-size: .82em; line-height: 1.3; color: var(--text); text-decoration: none; word-break: keep-all; }
.pp-name:hover { text-decoration: underline; }
.pp-date { font-size: .75em; color: var(--ink); }
.pp-note { font-size: .72em; line-height: 1.3; color: var(--muted); word-break: keep-all; }
.pp-next { margin: 0; font-size: .85em; color: var(--muted); }
.pp-next b { color: var(--accent); font-weight: normal; }

/* 호기심 나침반: 질문 → 네 방향 중 하나 고르기 → 결과 나침반 */
.cp-q { margin: 2px 0 10px; font-size: 1.12em; color: var(--navy); }
.cp-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-choice { display: flex; gap: 10px; align-items: center; text-align: left; padding: 12px; background: #FBF4E2; border: 2px solid var(--line); border-radius: 8px; cursor: pointer; line-height: 1.45; }
.cp-choice:hover { border-color: var(--accent); background: #FFF8E6; }
.cp-icon { font-size: 24px; flex: none; }
.cp-dots { display: flex; gap: 6px; margin-right: auto; }
.cp-dots span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--faint); }
.cp-dots .on { background: var(--good); border-color: var(--good); }
.cp-dots .cur { border-color: var(--accent); }
.cp-result { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
/* 나침반: 3×3 칸 — 가운데 원판(바늘 · 중심), 위 · 오른쪽 · 아래 · 왼쪽에 방향 이름 */
.cp-rose { display: grid; grid-template-columns: 70px 160px 70px; grid-template-rows: auto 160px auto; place-items: center; gap: 4px 0; }
.cp-rose::before { content: ''; grid-area: 2 / 2; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, #FFFBF0 58%, #EFE1BF 60%); border: 4px solid var(--wood); box-shadow: inset 0 0 0 3px var(--gold); box-sizing: border-box; }
.cp-dir { display: grid; justify-items: center; font-size: .85em; color: var(--muted); line-height: 1.2; text-align: center; word-break: keep-all; }
.cp-dir b { font-size: 20px; font-weight: normal; }
.cp-dir small { font-size: .85em; }
.cp-dir.on { color: var(--accent); font-weight: 700; }
.cp-dir.d0 { grid-area: 1 / 2; }
.cp-dir.d1 { grid-area: 2 / 3; }
.cp-dir.d2 { grid-area: 3 / 2; }
.cp-dir.d3 { grid-area: 2 / 1; }
.cp-needle { grid-area: 2 / 2; width: 18px; height: 120px; background: linear-gradient(var(--accent) 50%, #9C8F7A 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: transform .6s; }
.cp-hub { grid-area: 2 / 2; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 2px solid var(--wood-2); }
.cp-text { display: grid; gap: 8px; }
.cp-dir-card { padding: 10px 12px; background: #FBF4E2; border: 2px solid var(--accent); border-radius: 8px; }
.cp-dir-card p { margin: 4px 0 8px; line-height: 1.5; }
.cp-text .field { margin: 0; }

/* 판단 미션 (상황 카드) */
.missions { display: grid; gap: 8px; margin-top: 8px; }
.mission { padding: 10px 12px; background: #FBF4E2; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 8px; }
.mission p { margin: 4px 0; }

/* 자료 · 기록 */
.links { display: grid; gap: 6px; }
.link { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; background: #FBF4E2; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--text); }
.link.plain { color: var(--muted); }
.link small { font-size: .8em; }
.warn { margin: 10px 0 0; color: var(--bad); font-weight: 600; }
.records { display: grid; gap: 6px; margin-bottom: 8px; }
.record { width: 100%; text-align: left; padding: 9px 12px; background: #FBF4E2; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.record-full small { display: block; color: var(--muted); padding: 2px 12px 0; }
.add-record { width: 100%; background: var(--accent-soft); color: #8A2F2B; border-color: #D9A49B; }
.more { display: block; text-align: right; font-size: .9em; }

/* ---------- 챕터 완료 ---------- */
.banner { text-align: center; background: var(--surface); border: 3px solid var(--wood); border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--gold), 0 3px 0 var(--wood-2); padding: 14px; }
.banner h1 { margin: 0; font-size: calc(30px * var(--fs)); }
.banner p { margin: 6px 0 0; word-break: keep-all; }
.done-grid { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 14px; }
.stat { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--line); }
.stat b { margin-left: auto; font-size: 1.15em; }
.badge { display: grid; justify-items: center; gap: 6px; margin: 12px 0 4px; }
.medal { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; background: radial-gradient(#F7D774, #C99A2E); border: 4px solid #A87414; box-shadow: 0 4px 0 #7A5233; }
.medal.small { width: 34px; height: 34px; font-size: 18px; border-width: 2px; box-shadow: none; }
/* 장 수료 메달 그림 (data/chN.json의 done.badgeImg) */
.medal.pic { background: none; border: 0; box-shadow: none; }
.medal.pic img, .mk.pic img { width: 100%; height: 100%; object-fit: contain; }
.mk.pic { width: 1.8em; height: 1.8em; }
.mk.pic > .medal { width: 100%; height: 100%; flex: none; } /* 기록 줄의 메달: 칸에 맞춰 동그랗게 (늘어나지 않게) */
.medal.todo { filter: grayscale(1); opacity: .4; } /* 아직 받지 않은 수료 배지 */
.badge.todo small { color: var(--muted); text-align: center; word-break: keep-all; }
.btn-col { display: grid; gap: 10px; align-content: stretch; }

/* ---------- My Journey · CV · 교수님 ---------- */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card { display: grid; justify-items: center; gap: 4px; padding: 12px; background: var(--surface); border: 3px solid var(--wood); border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--gold); }
.stat-card b { font-size: 1.5em; }
.stat-card small { color: var(--muted); }
.chapter-rows { display: grid; gap: 10px; }
.chapter-row { display: grid; grid-template-columns: 180px 1fr auto; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.ch-name { font-family: var(--pixel); color: var(--text); text-decoration: none; display: grid; }
.ch-name small { font-family: inherit; color: var(--good); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qchip { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: #FBF4E2; color: var(--muted); text-decoration: none; font-size: .9em; }
.qchip.ok { background: #E5F1DF; color: var(--good); border-color: #A9CFA0; font-weight: 600; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.timeline li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.tl-text { flex: 1; word-break: keep-all; }
.timeline small { color: var(--muted); }
.tl-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; font-family: var(--pixel); }
.tl-pager button:disabled { opacity: .4; cursor: default; }
.cv-list { display: grid; gap: 6px; margin-bottom: 8px; }
.cv-item { display: grid; gap: 2px; text-align: left; padding: 10px 12px; background: #FBF4E2; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.cv-item small { color: var(--muted); }
.table-wrap { overflow-x: auto; }
.admin-table { border-collapse: collapse; width: 100%; }
.admin-table th, .admin-table td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.admin-table td small { display: block; color: var(--muted); }
.admin-table tbody tr { cursor: pointer; }
.admin-table tbody tr:hover, .admin-table tr.on { background: var(--surface-2); }
.admin-ch h3 { margin: 12px 0 4px; }
.admin-q { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.admin-q li { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.admin-q small, .admin-q em { color: var(--muted); }

/* ---------- 창 · 알림 ---------- */
dialog { width: min(520px, 100vw - 32px); padding: 22px; border: 3px solid var(--wood); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 2px var(--gold); }
dialog::backdrop { background: rgba(20, 30, 20, .45); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 12px; color: var(--navy); }
dialog h3 { margin: 16px 0 6px; font-size: 1em; color: var(--muted); }
.menu-list { display: grid; gap: 6px; }
.menu-list a { display: grid; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #FBF4E2; text-decoration: none; color: var(--text); font-weight: 600; }
.menu-list small { font-weight: 400; color: var(--muted); }
.field { display: grid; gap: 4px; margin-bottom: 10px; }
.field span { font-size: .9em; color: var(--muted); }
input, select, textarea { padding: 8px 10px; border: 2px solid var(--line); border-radius: 8px; background: #FFFBF0; width: 100%; }
.row input { flex: 1; width: auto; min-width: 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; transition: .2s; background: var(--header); color: #F6ECD2; padding: 10px 18px; border-radius: 10px; border: 2px solid var(--gold); z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------- 태블릿 · 폰 ---------- */
@media (max-width: 900px) {
  main { padding: 10px; }
  .title { font-size: calc(17px * var(--fs)); }
  .tool b { display: none; }
  /* 폰: 한 줄로. 메뉴 묶음을 풀어서 이전 · 다음은 맨 아래로 */
  .screen.quest { grid-template-columns: 1fr; grid-template-areas: "menu" "map" "stage" "info" "nav"; }
  .q-menu { display: contents; }
  .q-menu > .panel { grid-area: menu; }
  .q-menu > .map-btn { grid-area: map; }
  .q-menu > .q-nav { grid-area: nav; }
  .bottom-row, .done-grid { grid-template-columns: 1fr; }
  .map-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .chapter-row { grid-template-columns: 1fr; }
  .ch-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } /* 폰: 장 이름 왼쪽, ✓ 개수 오른쪽 한 줄 */
  .checks { grid-template-columns: 1fr; }
  .lights { grid-template-columns: 1fr; }
  .cp-choices, .cp-result { grid-template-columns: 1fr; }
  .cp-rose { margin: 0 auto; }
  .pp-stamp { width: 50px; height: 50px; }
  .pp-num { font-size: 17px; }
  .portrait { width: 72px; }
  .bubble { max-width: 75%; font-size: .9em; }
}
@media (max-width: 520px) {
  .title #titleMain { display: none; }
  .title .sep { display: none; }
}

/* ---------- 투고 낚시터 ---------- */
.screen.fish { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: start; }
.screen.fish .q-dialog { grid-column: 1 / -1; }
.fish-side { display: grid; gap: 14px; }
.pond { min-height: 0; aspect-ratio: 1890 / 832; background-image: url(../img/bg/fish-pond.jpg) !important; background-size: cover; background-position: center; }
.water { position: absolute; inset: 36% 12% 26%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px 34px; padding: 30px 20px 0; }
.empty-pond { color: #F6ECD2; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.4); word-break: keep-all; }
.bobber { position: relative; display: grid; justify-items: center; background: none; border: 0; cursor: pointer; padding: 0; color: var(--text); }
.bobber .line { width: 2px; height: 34px; background: rgba(255,255,255,.7); }
.bobber .float { height: 40px; width: auto; animation: float 2.6s ease-in-out infinite; }
.bobber .hook { height: 40px; width: auto; }
.bobber .fish-on { position: absolute; top: 36px; left: calc(50% + 14px); z-index: 1; width: 44px; height: auto; animation: wiggle .5s ease-in-out infinite alternate; }
.bobber.s-editor .float { animation: wobble 1.4s ease-in-out infinite; }
.bobber.s-review .float, .bobber.s-resubmitted .float { animation: bite 1.8s ease-in-out infinite; }
.bobber.s-revision .float { animation: bite .7s ease-in-out infinite; }
.bobber .tagline { margin-top: 8px; display: grid; justify-items: center; gap: 1px; padding: 5px 10px; background: var(--surface); border: 2px solid var(--wood); border-radius: 8px; max-width: 190px; }
.bobber.on .tagline { box-shadow: 0 0 0 3px var(--gold); }
.bobber .tagline small { color: var(--muted); font-size: .8em; text-align: center; word-break: keep-all; }
.bobber .tagline em { font-style: normal; font-family: var(--pixel); color: var(--accent); }
@keyframes float { 50% { transform: translateY(4px); } }
@keyframes wobble { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes bite { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(10px); } 80% { transform: translateY(2px); } }
@keyframes wiggle { to { transform: rotate(18deg) translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .bobber * { animation: none !important; } }
.fish-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.05em; }
.fish-now span:last-child { margin-left: auto; font-family: var(--pixel); color: var(--accent); font-size: 1.2em; }
.status-chip, .ev { padding: 2px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: .85em; white-space: nowrap; }
.s-accepted.status-chip, .ev.s-accepted, .btn.s-accepted { background: #E5F1DF; color: var(--good); border-color: #A9CFA0; }
.s-rejected.status-chip, .ev.s-rejected, .btn.s-rejected { background: #F6E0DC; color: var(--bad); border-color: #DDA79E; }
.s-revision.status-chip, .ev.s-revision { background: #FBF0D2; color: #A87414; border-color: #E5C98A; }
.fish-log { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.log-events { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.net { display: grid; gap: 6px; }
.net-item { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; text-align: left; padding: 8px 12px; background: #FBF4E2; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.net-item small { grid-column: 2; color: var(--muted); }
.big-fish { grid-row: span 2; width: 40px; height: auto; align-self: center; }
.head-fish { height: 1em; width: auto; vertical-align: -2px; }
.link.hl { background: #DCEBF3; border-color: #9EC3D8; font-weight: 600; }
@media (max-width: 900px) { .screen.fish { grid-template-columns: 1fr; } .pond { aspect-ratio: auto; min-height: 380px; } }
/* 폰: 원고가 여러 개면 찌를 한 줄로 두고 옆으로 넘겨 봐요 (줄 바꿈하면 연못 밖으로 잘림) */
@media (max-width: 900px) { .water { inset: 30% 3% auto; flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; gap: 14px; padding: 10px 8px 6px; } .bobber { flex: none; } .bobber .tagline { max-width: 140px; } }

/* ---------- 그림 UI 부품 (img/ui/) — 테두리 그림을 잘라 늘려 씀 (border-image) ---------- */
:root { --panel-img: url(../img/ui/panel.png); }
.panel, .dialog-box, .region, .banner, .stat-card, .side-link:not(.login) {
  border: 20px solid transparent;
  border-image: var(--panel-img) 40 fill / 20px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.panel { padding: 4px 6px; }
.dialog-box { padding: 2px; }
.region { padding: 6px 8px; }
.banner { padding: 4px; }
.stat-card { padding: 2px; }
.side-link:not(.login) { padding: 4px 6px; }
.check-box { border: 14px solid transparent; border-image: var(--panel-img) 40 fill / 14px stretch; border-radius: 0; background: none; box-shadow: none; padding: 2px 4px; }
.check-box.on { background: none; filter: none; }
.check-box.on .mk.ok { box-shadow: 0 0 0 3px #CFE6C6; }
.check-box.star.on .mk.star { text-shadow: 0 0 6px #F3D27A; }
.card.reading, .card.overview { border: 20px solid transparent; border-image: var(--panel-img) 40 fill / 20px stretch; box-shadow: none; background: none; border-radius: 0; padding: 4px 8px; }
:root { --btn-img: url(../img/ui/button.png); }
.big-btn, .btn.primary, .side-link.login {
  border: 16px solid transparent; border-width: 16px 24px;
  border-image: var(--btn-img) 32 48 fill / 16px 24px stretch;
  border-radius: 0; background: none; box-shadow: none;
  color: #FFF4DE; text-shadow: 0 2px 0 #5A1E1C;
}
.big-btn { padding: 4px 6px; min-height: 76px; }
.btn.primary { border-width: 12px 18px; border-image-width: 12px 18px; padding: 2px 8px; font-family: var(--pixel); font-weight: normal; }
.side-link.login { padding: 2px 4px; }
.big-btn:hover, .btn.primary:hover, .side-link.login:hover { filter: brightness(1.08); }
.big-btn:active, .btn.primary:active { transform: translateY(1px); filter: brightness(.95); }
.quest-list .row { flex-direction: column; align-items: stretch; }
:root { --header-img: url(../img/ui/header.png); }
/* 헤더: 녹색 판(제목) + 양피지 판(지도·가방·메뉴)이 숲 바탕 위에 떠 있게 (시안과 같은 배치) */
.topbar { background: rgba(37, 60, 44, .92); border-bottom: 0; box-shadow: 0 2px 8px rgba(0,0,0,.25); padding: 8px 16px; }
.title { border: 14px solid transparent; border-width: 14px 20px; border-image: var(--header-img) 22 40 fill / 14px 20px stretch; padding: 0 8px; text-shadow: 0 2px 0 #0E2018; }
.tools { border: 14px solid transparent; border-image: var(--panel-img) 40 fill / 14px stretch; border-radius: 0; background: none; padding: 0; }
.place { border: 8px solid transparent; border-width: 8px 12px; border-image: var(--header-img) 22 40 fill / 8px 12px stretch; border-radius: 0; background: none; padding: 0 4px; }
.way, .sign, .map-btn { border: 10px solid transparent; border-width: 10px 15px; border-image: var(--header-img) 22 40 fill / 10px 15px stretch; border-radius: 0; background: none; box-shadow: none; padding: 2px 4px; }
.q-menu nav a.on { border: 8px solid transparent; border-width: 8px 12px; border-image: var(--btn-img) 32 48 fill / 8px 12px stretch; background: none; border-radius: 0; padding: 1px 2px; color: #FFF4DE; }
/* 전신 캐릭터 (img/char/) — 장면 바닥에 세움 */
.walker { display: flex; align-items: flex-end; gap: 6px; }
.walker .sprite { height: 120px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,.15)); }
@media (max-width: 900px) { .walker .sprite { height: 90px; } }
.walker .sprite.cat { height: 54px; margin-left: 2px; }
/* 앉은 고양이 대기 동작: 네 칸 띠 그림을 한 칸 크기 창으로 보며 옆으로 넘김. 3초마다 꼬리 · 깜빡 · 귀 */
.cat-idle { display: inline-block; aspect-ratio: 159 / 200; overflow: hidden; }
.cat-idle img { display: block; height: 100%; width: auto; image-rendering: pixelated; animation: cat-idle 3s step-end infinite; }
@keyframes cat-idle { 0% { transform: none; } 20% { transform: translateX(-50%); } 42% { transform: none; } 58% { transform: translateX(-25%); } 65% { transform: none; } 78% { transform: translateX(-75%); } 92%, 100% { transform: none; } }
/* 등불 빛 층: 배경과 같은 크기 · 위치로 겹쳐서(inherit) 밝게 더함. 천천히 불규칙하게 밝았다 어두워졌다 (제자리 효과라 움직임 줄이기 설정에서도 그대로) */
.glow { position: absolute; inset: 0; pointer-events: none; background-size: inherit; background-position: inherit; background-repeat: inherit; mix-blend-mode: screen; opacity: .45; animation: glow 4.5s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .35; } 18% { opacity: .75; } 30% { opacity: .5; } 46% { opacity: .9; } 60% { opacity: .55; } 78% { opacity: .8; } }
/* 장 지도: 등불이 작고 많아서 빛을 훨씬 은은하게 */
.chapter-scene .glow { animation-name: glow-soft; }
.glow.gl-1 { animation-duration: 5.3s; animation-delay: -1.4s; } .glow.gl-2 { animation-duration: 3.8s; animation-delay: -2.3s; } .glow.gl-3 { animation-duration: 4.9s; animation-delay: -0.7s; } .glow.gl-4 { animation-duration: 6s; animation-delay: -3.5s; } /* 층마다 박자 · 시작이 달라 건물끼리 시간차 */
@keyframes glow-soft { 0%, 100% { opacity: .12; } 18% { opacity: .28; } 30% { opacity: .18; } 46% { opacity: .34; } 60% { opacity: .2; } 78% { opacity: .3; } }
/* 교수님 가리키는 자세: 네 칸 띠 (기본 → 까딱 → 기본 → 눈웃음 → 눈웃음+까딱 → 눈웃음 → 기본). 제자리라 움직임 줄이기 설정에서도 그대로 */
.prof-idle { display: inline-block; aspect-ratio: 218 / 300; overflow: hidden; }
.prof-idle img { display: block; height: 100%; width: auto; image-rendering: pixelated; animation: prof-idle 4s step-end infinite; }
@keyframes prof-idle { 0% { transform: none; } 22% { transform: translateX(-25%); } 30% { transform: none; } 38% { transform: translateX(-25%); } 46% { transform: none; } 60% { transform: translateX(-50%); } 72% { transform: translateX(-75%); } 80% { transform: translateX(-50%); } 88%, 100% { transform: none; } }
/* 학생 뒷모습 대기 동작: 네 칸 띠를 한 칸 창으로 넘김. 고개 까딱까딱 (기본 → 갸웃 → 찰랑 → 기본 → 반대로 갸웃 → 찰랑). 제자리라 움직임 줄이기 설정에서도 그대로 */
.stu-idle { display: inline-block; overflow: hidden; }
.stu-idle img { display: block; height: 100%; width: auto; image-rendering: pixelated; animation: stu-idle 3.2s step-end infinite; }
@keyframes stu-idle { 0% { transform: none; } 14% { transform: translateX(-25%); } 31% { transform: translateX(-75%); } 38% { transform: none; } 52% { transform: translateX(-50%); } 69% { transform: translateX(-75%); } 76%, 100% { transform: none; } }
/* 챕터 지도의 걷는 고양이 (12초 한 바퀴, 거리는 고양이 폭 기준 %):
   제자리에 앉아 있다가 → 오른쪽으로 조금 걷고 → 앉아 쉬고 → 돌아서 학생 앞을 지나 왼쪽까지 → 앉아 쉬고 → 돌아서 제자리로.
   걸을 때는 cat-walk-strip.png 네 칸(다리 번갈아)을 넘기고, 쉴 때는 앉은 고양이(cat-idle)를 보여 줌 */
.cat-roam { display: inline-block; position: relative; animation: cat-roam 12s linear infinite; }
.cat-walk { display: inline-block; vertical-align: bottom; aspect-ratio: 215 / 200; overflow: hidden; animation: cat-walk-vis 12s step-end infinite; }
.cat-walk img { display: block; height: 100%; width: auto; image-rendering: pixelated; animation: cat-walk-frames .5s steps(4) infinite; }
.cat-roam .cat-idle { position: absolute; bottom: 0; left: 50%; translate: -50% 0; animation: cat-sit-vis 12s step-end infinite; }
@keyframes cat-walk-frames { to { transform: translateX(-100%); } }
@keyframes cat-roam {
  0%, 12.5% { translate: 0; scale: 1 1; }
  20%, 32.4% { translate: 90% 0; scale: 1 1; }
  32.5% { translate: 90% 0; scale: -1 1; }
  61.67%, 74.1% { translate: -260% 0; scale: -1 1; }
  74.17% { translate: -260% 0; scale: 1 1; }
  95.83%, 100% { translate: 0; scale: 1 1; }
}
@keyframes cat-walk-vis { 0% { opacity: 0; } 12.5% { opacity: 1; } 20% { opacity: 0; } 32.5% { opacity: 1; } 61.67% { opacity: 0; } 74.17% { opacity: 1; } 95.83%, 100% { opacity: 0; } }
@keyframes cat-sit-vis { 0% { opacity: 1; } 12.5% { opacity: 0; } 20% { opacity: 1; } 32.5% { opacity: 0; } 61.67% { opacity: 1; } 74.17% { opacity: 0; } 95.83%, 100% { opacity: 1; } }
/* 움직임 줄이기 설정: 걷는 고양이는 제자리에 앉아 있기만 (앉은 고양이의 깜빡 · 꼬리 · 귀는 제자리라 그대로) */
@media (prefers-reduced-motion: reduce) { .cat-roam, .cat-walk, .cat-walk img, .cat-roam .cat-idle { animation: none; } .cat-walk { opacity: 0; } }
@media (max-width: 900px) { .walker .sprite.cat { height: 42px; } }
.walker .sprite.student { height: 108px; }
@media (max-width: 900px) { .walker .sprite.student { height: 80px; } }
.walker .sprite.rod { height: 92px; }
@media (max-width: 900px) { .walker .sprite.rod { height: 68px; } }
.avatar-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.avatar-opt { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; background: #FBF4E2; border: 2px solid var(--line); border-radius: 8px; cursor: pointer; }
.avatar-opt img { height: 72px; image-rendering: pixelated; }
.avatar-opt small { font-size: .75em; color: var(--muted); }
.avatar-opt.on { border-color: var(--accent); background: var(--accent-soft); }
/* 배경 그림이 있는 장면 (img/bg/) */
.scene.has-bg { background-size: cover; background-position: center 70%; }
.chapter-scene.has-bg { min-height: 0; aspect-ratio: 1672 / 941; background-position: center; }
/* 챕터 맵 이름표를 그림 속 건물 위에 (data/chN.json 퀘스트의 mapPos = [가로%, 세로%], 이름표 가운데 기준) */
.signs.pinned { position: absolute; inset: 0; display: block; }
.signs.pinned .sign { position: absolute; width: max-content; transform: translate(-50%, -50%); }
.signs.pinned .sign { font-size: clamp(12px, 1.05vw, 15px); }
.chapter-scene.has-bg .walker { left: calc(var(--wx, 50) * 1%); top: calc(var(--wy, 87) * 1%); bottom: auto; transform: translate(-50%, -100%); } /* 그림 속 빈 광장 · 길 위 (data의 walkerPos = 발 위치) */
@media (max-width: 900px) {
  /* 폰 · 그림 있는 챕터 맵: 월드맵처럼 그림을 위에 다 보여 주고, 이름표와 길 버튼은 그 아래에 (그림 높이 = 폭 × 941/1672) */
  .chapter-scene.has-bg { --img-h: calc((100vw - 26px) * 941 / 1672); aspect-ratio: auto; min-height: 0; padding: calc(var(--img-h) + 8px) 8px 8px; background-size: 100% auto; background-position: top; background-repeat: no-repeat; background-color: var(--bg-2); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chapter-scene.has-bg .signs { grid-column: 1 / -1; }
  .chapter-scene.has-bg .way { position: static; text-align: center; word-break: keep-all; font-size: .9em; }
  .chapter-scene.has-bg .way.right { grid-column: 2; }
  .chapter-scene.has-bg .walker { top: calc(var(--img-h) * var(--wy, 87) / 100); }
  .chapter-scene.has-bg .walker .sprite.student { height: 56px; }
  .chapter-scene.has-bg .walker .sprite.cat { height: 30px; }
  /* 폰: 이름표를 두 줄로 놓아 그림이 보이게, 캐릭터는 길 버튼 위에 */
  .signs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sign { gap: 6px; font-size: .85em; }
  .chapter-scene .walker { bottom: 62px; }
  /* 폰에서는 그림이 작아서 건물 위에 올리지 않고 위쪽에 두 칸씩 */
  .signs.pinned { position: relative; inset: auto; display: grid; }
  .signs.pinned .sign { position: relative; width: auto; transform: none; left: auto !important; top: auto !important; }
}
.quest-scene.has-bg { min-height: 0; aspect-ratio: 2048 / 900; background-position: center; }
/* 월드맵: 그림 위 네 지역에 이름표를 올림 (data/chN.json의 mapPos = [가로%, 세로%]) */
.map-area.world-map { position: relative; padding: 0; aspect-ratio: 1672 / 941; background: url(../img/bg/world.jpg) center / cover; }
.world-map .map-grid { display: block; position: absolute; inset: 0; }
.world-map .region { position: absolute; transform: translate(-50%, -50%); justify-items: center; text-align: center; min-width: 180px; }
.world-map .region b { font-size: calc(17px * var(--fs)); }
.world-map .region .chip { top: -30px; right: -12px; }
.world-map .pond-sign { position: absolute; left: 52%; top: 51%; transform: translate(-50%, -50%); width: max-content; font-size: clamp(12px, 1.05vw, 15px); }
@media (max-width: 900px) {
  .map-area.world-map { aspect-ratio: auto; padding: 46vw 10px 10px; background-size: 100% auto; background-position: top; background-repeat: no-repeat; background-color: #5E8C55; }
  .world-map .map-grid { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .world-map .region { position: relative; transform: none; left: auto !important; top: auto !important; min-width: 0; }
  .world-map .region b { white-space: nowrap; font-size: clamp(12px, 3.7vw, 17px); } /* 폰: 장 이름을 한 줄로 */
  .world-map .region > .medal { top: -26px; right: -6px; width: 30px; height: 30px; } /* 폰: 이름판 위 테두리 오른쪽에 (지도 칸 밖으로 잘리지 않게, 장 이름을 가리지 않게) */
  .world-map .pond-sign { grid-column: 1 / -1; position: relative; left: auto; top: auto; transform: none; width: auto; justify-content: center; font-size: 14px; }
}
/* 챕터 완료: 탑 꼭대기 배경 위에 배너와 캐릭터 */
.done-scene { aspect-ratio: 1672 / 700; background-position: center 35%; display: grid; align-content: start; justify-items: center; padding-top: 18px; }
.done-scene .banner { max-width: 640px; }
@media (max-width: 900px) { .done-scene { aspect-ratio: auto; min-height: 360px; padding: 10px 10px 0; } .done-scene .banner h1 { font-size: calc(19px * var(--fs)); } .done-scene .banner p { font-size: .85em; } }