/* Soft neobrutalism: paper surfaces, pastel category colors, ink edges.
   Layout and scene interactions remain in their existing stylesheets. */
:root {
  --ui-paper: #fffefb;
  --ui-white: #ffffff;
  --ui-ink: #29364b;
  --ui-muted: #46566c;
  --ui-red: #ffc1bd;
  --ui-green: #bcebd1;
  --ui-mint: var(--ui-green);
  --ui-yellow: #ffe58c;
  --ui-blue: #bedcff;
  --ui-peach: var(--ui-red);
  --ui-edge: 2px solid var(--ui-ink);
  --ui-shadow: 4px 4px 0 var(--ui-ink);
  --ui-small-shadow: 2px 2px 0 var(--ui-ink);
  --ui-panel-radius: 12px;
  --ui-control-radius: 8px;
  --guide-paper: var(--ui-paper);
  --guide-page: #f7faff;
  --guide-ink: var(--ui-ink);
  --guide-muted: var(--ui-muted);
  --guide-sea: #285c91;
  --guide-flower: var(--ui-yellow);
  --guide-line: #c0d5ed;
  --paper: var(--ui-paper);
  --page: #f7faff;
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --sea: #285c91;
  --flower: var(--ui-yellow);
  --line: #c0d5ed;
  --soft: #edf5ff;
  font-family: Paperlogy, 'Malgun Gothic', sans-serif;
  color: var(--ui-ink);
  background: var(--ui-paper);
}
body { color: var(--ui-ink); }
#loading { background: var(--ui-paper); color: var(--ui-ink); }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, .brand strong, .brand-mark { font-weight: 800; letter-spacing: -.035em; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--ui-yellow); color: var(--ui-ink); }
:is(a, button, input, select, summary):focus-visible {
  outline: 3px solid #1d5ca5;
  outline-offset: 4px;
}
:is(button, input, select, summary):disabled { cursor: default; }

/* Classroom chrome: compact paper labels over the live scene. */
header .brand, .mode-switch, .view-tools button, header .round,
.location, .controls, #entrance-status {
  border: var(--ui-edge);
  border-radius: var(--ui-panel-radius);
  background: var(--ui-paper);
  color: var(--ui-ink);
  box-shadow: var(--ui-small-shadow);
  backdrop-filter: none;
}
header .brand { box-shadow: var(--ui-shadow); }
header .brand .brand-word { display: inline-flex; align-items: center; gap: 2px; letter-spacing: 0; }
.brand-letter {
  display: inline-grid; place-items: center; width: 1.1em; height: 1.25em;
  border-radius: 4px; font-size: .86em; font-weight: 800; line-height: 1;
  color: var(--ui-ink); background: var(--ui-red);
}
.brand-letter[data-school-color=green] { background: var(--ui-green); }
.brand-letter[data-school-color=blue] { background: var(--ui-blue); }
.brand-letter[data-school-color=yellow] { background: var(--ui-yellow); }
.brand-icon {
  background: var(--ui-blue);
  color: var(--ui-ink);
  border: var(--ui-edge);
  border-radius: var(--ui-control-radius);
}
.brand-icon > span { color: var(--ui-ink); }
.brand small, .location small, .controls { color: var(--ui-muted); }
header .round { border-radius: var(--ui-control-radius); }
.view-tools #overview { background: var(--ui-paper); color: var(--ui-ink); border: var(--ui-edge); box-shadow: var(--ui-small-shadow); }
.mode-switch { gap: 5px; box-shadow: var(--ui-shadow); }
.mode-switch button, .mode-switch .map-entry {
  border: 2px solid transparent;
  border-radius: var(--ui-control-radius);
  color: var(--ui-ink);
  font-weight: 700;
}
.mode-switch button[aria-pressed=true] {
  background: var(--ui-mint);
  color: var(--ui-ink);
  border-color: var(--ui-ink);
}
.mode-switch .map-entry { background: var(--ui-yellow); border-color: var(--ui-ink); }
.mode-switch button:not([aria-pressed=true]):hover { background: var(--ui-blue); }
.mode-switch .map-entry:hover { background: #ffe68d; }
.mode-switch .map-entry:focus-visible { outline: 3px solid #1d5ca5; outline-offset: 4px; }
.mode-switch #mode-library { background: #fff0f3; }
.mode-switch #mode-library[aria-pressed=true] { background: var(--ui-red); }
.mode-switch #mode-classroom:not([aria-pressed=true]) { background: #edfbf3; }
.music-toggle.playing, .overview-mode .view-tools #overview {
  background: var(--ui-mint);
  color: var(--ui-ink);
  border-color: var(--ui-ink);
}
.music-toggle.playing { background: var(--ui-yellow); }
.view-tools #reset { background: var(--ui-blue); }
.intro { text-shadow: none; }
.intro .sample-tag { background: var(--ui-paper); border: 1px solid var(--ui-ink); color: var(--ui-ink); }
.location > span { color: var(--ui-ink); background: var(--ui-yellow); border-radius: 6px; }
#entrance-status { box-shadow: var(--ui-shadow); }
#entrance-status span { color: var(--ui-ink); }
#entrance-status button {
  border: var(--ui-edge); border-radius: var(--ui-control-radius);
  background: var(--ui-yellow); color: var(--ui-ink); font-weight: 700;
}
#entrance-status button:hover { background: #ffe68d; }
#landscape-gate { background: #f1f7ff; color: var(--ui-ink); }
#landscape-gate p, #landscape-gate small { color: var(--ui-muted); }
#landscape-gate .rotate-phone { color: #3979ba; }
#landscape-gate button { background: var(--ui-yellow); border: var(--ui-edge); color: var(--ui-ink); box-shadow: var(--ui-small-shadow); }
#joystick { background: #fffefbd9; border: var(--ui-edge); box-shadow: var(--ui-small-shadow); }
#stick { background: var(--ui-mint); border: var(--ui-edge); box-shadow: none; }
.game-actions #jump { background: var(--ui-yellow); border: var(--ui-edge); color: var(--ui-ink); box-shadow: var(--ui-small-shadow); }

/* Nearby actions retain their screen positions and translation transforms. */
#archive-prompt, #map-prompt, #classroom-prompt, .brand-wall-prompt {
  background: var(--ui-paper); color: var(--ui-ink); border: var(--ui-edge);
  border-radius: var(--ui-panel-radius); box-shadow: var(--ui-shadow); backdrop-filter: none;
}
#archive-zone, #archive-description, #map-prompt small, #map-prompt p,
#classroom-prompt small, #classroom-prompt p { color: var(--ui-muted); }
#archive-prompt #use, #map-prompt a, #classroom-prompt button, .brand-home-link {
  border: var(--ui-edge); border-radius: var(--ui-control-radius);
  background: var(--ui-yellow); color: var(--ui-ink); box-shadow: var(--ui-small-shadow);
  font-weight: 700;
}
.brand-wall-prompt a { color: #285c91; }

/* Resource library: each color belongs to one of the six real categories. */
body.download-mode { background: var(--guide-page); color: var(--ui-ink); }
.download-mode header {
  background: var(--ui-paper); border-bottom: var(--ui-edge); backdrop-filter: none;
}
.download-mode header .brand { border: 0; background: transparent; box-shadow: none; }
.download-mode .mode-switch { background: var(--ui-paper); border-color: var(--ui-ink); box-shadow: var(--ui-small-shadow); }
.download-mode .round { border-color: var(--ui-ink); }
.library-kicker { color: var(--ui-ink); font-weight: 700; }
.library-heading .research-title { letter-spacing: -.035em; }
.library-mark {
  padding: 10px 14px; border: var(--ui-edge); border-radius: var(--ui-control-radius);
  background: var(--ui-yellow); color: var(--ui-ink); font-weight: 600; white-space: normal;
}
.download-grid { gap: 24px; }
.download-card {
  --category-paper: var(--ui-red);
  background: var(--ui-paper); background: color-mix(in srgb, var(--category-paper) 18%, white); border: var(--ui-edge);
  border-radius: var(--ui-panel-radius); box-shadow: var(--ui-shadow);
}
.download-card:nth-child(2) { --category-paper: var(--ui-green); }
.download-card:nth-child(3) { --category-paper: var(--ui-blue); }
.download-card:nth-child(4) { --category-paper: var(--ui-yellow); }
.download-card:nth-child(5) { --category-paper: var(--ui-red); }
.download-card:nth-child(6) { --category-paper: var(--ui-green); }
.card-number {
  border: var(--ui-edge); border-radius: var(--ui-control-radius);
  background: var(--category-paper); color: var(--ui-ink); box-shadow: var(--ui-small-shadow);
  font-weight: 800;
}
.card-label { color: var(--ui-muted); font-weight: 600; }
.download-card h2 { color: var(--ui-ink); letter-spacing: -.025em; }
.card-description { color: var(--ui-muted); }
.material-tags span { background: #eef5ff; color: var(--ui-muted); border-radius: 5px; }
.card-actions { border-color: #c0d5ed; padding-bottom: 3px; }
.download-action {
  border: var(--ui-edge); border-radius: var(--ui-control-radius);
  background: var(--category-paper, var(--ui-yellow)); color: var(--ui-ink);
  box-shadow: var(--ui-small-shadow); font-weight: 700;
}
a.download-action:hover { background: var(--ui-yellow); border-color: var(--ui-ink); color: var(--ui-ink); }
.download-action:disabled { background: #edf2f8; border-color: #a9bdd4; color: #4c5c72; box-shadow: none; opacity: 1; }
.detail-action { color: var(--ui-ink); font-weight: 600; }
.category-cover, .download-card .category-cover {
  border: var(--ui-edge); border-radius: var(--ui-control-radius);
  background: var(--ui-white);
}
.category-cover span { background: var(--ui-paper); color: var(--ui-ink); border-top: 1px solid var(--ui-ink); }
.download-guide, .feedback-process, .folder-panel, .document-import, .imported-material {
  border: var(--ui-edge); border-radius: var(--ui-panel-radius);
  background: var(--ui-paper); color: var(--ui-ink);
}
.download-guide { background: var(--ui-mint); box-shadow: var(--ui-shadow); }
.feedback-process { box-shadow: var(--ui-small-shadow); }
.feedback-process summary { font-weight: 700; }
.classroom-links { gap: 14px; }
.classroom-link { border: var(--ui-edge); background: var(--ui-blue); color: var(--ui-ink); border-radius: var(--ui-control-radius); box-shadow: var(--ui-small-shadow); }

/* Dialogs and galleries share the same paper edge, including dynamic dialogs. */
dialog, #school-thanks, .brand-wall-dialog {
  color: var(--ui-ink); background: var(--ui-paper); border: var(--ui-edge);
  border-radius: var(--ui-panel-radius); box-shadow: 7px 7px 0 var(--ui-ink);
}
dialog::backdrop, #school-thanks::backdrop, .brand-wall-dialog::backdrop { background: #29364b80; backdrop-filter: none; }
dialog .close, .thanks-close {
  min-width: 44px; min-height: 44px; border: var(--ui-edge);
  border-radius: var(--ui-control-radius); background: var(--ui-peach); color: var(--ui-ink);
}
.dialog-tabs button { border: 1px solid var(--ui-ink); color: var(--ui-ink); background: var(--ui-paper); border-radius: 7px; }
.dialog-tabs button.active { background: var(--ui-mint); border-color: var(--ui-ink); color: var(--ui-ink); font-weight: 700; }
.gallery-preview { background: #eaf3ff; border: 1px solid var(--ui-ink); border-radius: var(--ui-control-radius); }
.gallery-controls button, .gallery-controls a, #retry-library {
  border: var(--ui-edge); border-radius: var(--ui-control-radius);
  background: var(--ui-paper); color: var(--ui-ink); box-shadow: var(--ui-small-shadow);
}
.gallery-controls button:disabled { box-shadow: none; }
.gallery-thumbnails button { background: #eaf3ff; border-radius: 6px; }
.gallery-thumbnails button[aria-pressed=true] { background: var(--ui-yellow); border-color: var(--ui-ink); }
.document-import input, .import-link-form input { border: var(--ui-edge); border-radius: 6px; color: var(--ui-ink); }
.thanks-teams section { background: var(--ui-mint); border: 1px solid var(--ui-ink); border-radius: 8px; }
#school-thanks p, #school-thanks .thanks-kicker, .thanks-people dt { color: var(--ui-muted); }
.neon-preview { background: var(--ui-blue); border-color: var(--ui-ink); box-shadow: none; }
.neon-preview h2, .neon-preview p, .neon-preview > span { color: var(--ui-ink); text-shadow: none; }
.classroom-credit { background: var(--ui-paper); border-top: 1px solid var(--ui-ink); }
[data-site-credit] { color: var(--ui-muted); }
#instructions .instructions-credit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--ui-ink);
}
#instructions .instructions-credit [data-site-credit] { justify-content: flex-start; gap: 4px 8px; }
#instructions .instructions-credit button { min-height: 44px; padding: 8px 4px; }
/* Keep the mobile play surface clear. The existing help control exposes the
   same credits and thanks dialog without a fixed bar above the home indicator. */
@media (max-width: 780px), (pointer: coarse) {
  .classroom-credit { display: none; }
}

/* Exploration: floating paper tools; a quiet list leaves room for terrain. */
.site-header { background: var(--ui-paper); border-bottom: var(--ui-edge); }
.site-header .round { width: 44px; height: 44px; min-width: 44px; display: grid; place-items: center; padding: 0; font-size: 20px; }
.site-header .brand { border: 0; border-radius: 0; background: none; box-shadow: none; }
.site-header .brand-mark { color: var(--ui-ink); }
.back-link { color: var(--ui-ink); }
.map-stage { background: #d7edfa; border: var(--ui-edge); border-radius: var(--ui-panel-radius); }
.map-topline {
  background: var(--ui-paper); border: var(--ui-edge);
  border-radius: var(--ui-panel-radius); box-shadow: var(--ui-shadow);
}
.map-topline h1 { letter-spacing: -.035em; }
.map-guide > span { background: #285c91; }
.map-controls button, .map-navigation button, .map-pan summary {
  background: var(--ui-paper); border: var(--ui-edge);
  border-radius: var(--ui-control-radius); box-shadow: var(--ui-small-shadow);
  color: var(--ui-ink); font-weight: 700;
}
.map-mode-controls { padding: 3px; border: var(--ui-edge); border-radius: 10px; background: var(--ui-paper); gap: 4px; }
.map-mode-controls button { border: 0; box-shadow: none; }
.map-controls button[aria-pressed=true], #ambient-toggle[aria-pressed=true] {
  background: var(--ui-mint); color: var(--ui-ink); border-color: var(--ui-ink);
}
.map-controls button:hover, .map-navigation button:hover, .map-pan summary:hover { background: var(--ui-yellow); color: var(--ui-ink); border-color: var(--ui-ink); }
.map-zoom { border: var(--ui-edge); border-radius: var(--ui-control-radius); box-shadow: var(--ui-small-shadow); background: var(--ui-paper); }
.map-zoom button { border: 0; border-radius: 0; box-shadow: none; }
.map-zoom button + button { border-top: 1px solid var(--ui-ink); }
.map-pan[open] summary { background: var(--ui-mint); color: var(--ui-ink); }
.pan-buttons { background: var(--ui-paper); border: var(--ui-edge); border-radius: 10px; box-shadow: var(--ui-shadow); }
.map-status { background: var(--ui-paper); color: var(--ui-ink); border: var(--ui-edge); border-radius: 7px; box-shadow: var(--ui-small-shadow); }
.map-instructions, .model-note { background: var(--ui-paper); color: var(--ui-muted); border: 1px solid var(--ui-ink); }
.explore-panel { background: var(--ui-paper); border: var(--ui-edge); border-right: 0; border-radius: 12px 0 0 12px; }
.explore-tools { border-color: #c0d5ed; }
.panel-intro h2 { letter-spacing: -.035em; }
.search-field { border: var(--ui-edge); border-radius: var(--ui-control-radius); background: var(--ui-white); box-shadow: var(--ui-small-shadow); }
.search-field:focus-within { border-color: #1d5ca5; outline: 2px solid #1d5ca5; outline-offset: 2px; box-shadow: none; }
.filter-row select { background: var(--ui-paper); border: var(--ui-edge); border-radius: 7px; }
.filter-row button, .empty-state button { border: var(--ui-edge); background: var(--ui-yellow); color: var(--ui-ink); border-radius: 7px; }
.explore-switch { gap: 8px; border-bottom: 0; padding-bottom: 3px; }
.explore-switch button { background: var(--ui-paper); border: var(--ui-edge); border-radius: 7px; color: var(--ui-ink); }
.explore-switch button[aria-pressed=true] { background: var(--ui-mint); border-color: var(--ui-ink); color: var(--ui-ink); box-shadow: var(--ui-small-shadow); }
.explore-switch button > span { background: var(--ui-paper); color: var(--ui-ink); }
.place-item { border-bottom-color: #c0d5ed; }
.place-item:hover { background: #edf5ff; }
.place-item.is-active { background: var(--ui-mint); box-shadow: inset 3px 0 0 var(--ui-ink); }
.place-icon { border: 1px solid var(--ui-ink); border-radius: 7px; color: var(--ui-ink); font-weight: 800; }
.place-icon[data-category="갯벌·생태"], .place-icon[data-category="마을·교육"] { background: var(--ui-green); }
.place-icon[data-category="섬·지형"], .place-icon[data-category="평화·시민"] { background: var(--ui-blue); }
.place-icon[data-category="역사·문화"] { background: var(--ui-yellow); }
.place-icon[data-category="음식"] { background: var(--ui-red); }
.resource-card { border: var(--ui-edge); border-radius: var(--ui-panel-radius); background: var(--ui-white); }
.resource-question { background: var(--ui-blue); color: var(--ui-ink); border-radius: 6px; }
.resource-card a { color: #285c91; font-weight: 700; }
.place-panel { background: var(--ui-paper); border: var(--ui-edge); border-radius: var(--ui-panel-radius); box-shadow: var(--ui-shadow); }
.place-panel h2 { letter-spacing: -.035em; }
.place-dialog-close { border: var(--ui-edge); border-radius: var(--ui-control-radius); background: var(--ui-peach); color: var(--ui-ink); box-shadow: var(--ui-small-shadow); }
.schematic-note { background: #eaf3ff; color: var(--ui-muted); border-radius: 7px; }
.dialog-question { border: 1px solid var(--ui-ink); border-left: 4px solid var(--ui-ink); background: var(--ui-yellow); color: var(--ui-ink); border-radius: 7px; }
.dialog-action, .dialog-resources a {
  background: var(--ui-white); border: var(--ui-edge); border-radius: 7px;
  color: var(--ui-ink); box-shadow: var(--ui-small-shadow); font-weight: 600;
}
.dialog-action-primary { background: var(--ui-mint); color: var(--ui-ink); }
.dialog-action:hover, .dialog-action-primary:hover, .dialog-resources a:hover { background: var(--ui-yellow); color: var(--ui-ink); border-color: var(--ui-ink); }
.travel-badge { background: var(--ui-yellow); color: var(--ui-ink); border: 1px solid var(--ui-ink); border-radius: 6px; }
.travel-badge[data-state=arrived] { background: var(--ui-mint); color: var(--ui-ink); }
.journey-progress progress { height: 7px; accent-color: #285c91; }
.map-navigation #follow-explorer { background: var(--ui-yellow); color: var(--ui-ink); border-color: var(--ui-ink); }
.map-navigation #follow-explorer:hover { background: var(--ui-mint); }
.world-label { background: var(--ui-paper); border: var(--ui-edge); border-radius: 10px; color: var(--ui-ink); box-shadow: var(--ui-small-shadow); }
.world-label[data-schematic=true] { background: var(--ui-blue); color: var(--ui-ink); }
.world-label.is-active { background: var(--ui-yellow); color: var(--ui-ink); border-color: var(--ui-ink); }
.world-label-name { background: var(--ui-paper); color: var(--ui-ink); border: 1px solid var(--ui-ink); border-radius: 6px; box-shadow: var(--ui-small-shadow); }
.world-label:hover { background: var(--ui-mint); color: var(--ui-ink); }
.world-label.is-active:hover { background: var(--ui-yellow); }
.world-label::after { border: 0; border-radius: inherit; box-shadow: none; }
.world-label.is-active::after { box-shadow: none; }
.marker-leaders line { stroke: var(--ui-ink); stroke-opacity: .65; }
.map-fallback { background: var(--ui-paper); color: var(--ui-ink); }
.map-fallback a { background: var(--ui-yellow); color: var(--ui-ink); border: var(--ui-edge); border-radius: var(--ui-control-radius); }

/* Tactile feedback stays on standalone controls; markers and positioned sheets
   retain the transforms used by the scene, and disabled actions stay still. */
.download-action, .view-tools button, header .round, .gallery-controls button,
.gallery-controls a, .dialog-action, .dialog-resources a, .place-dialog-close {
  transition: background-color 120ms ease, box-shadow 120ms ease, translate 120ms ease;
}
@media (hover: hover) {
  :is(.download-action, .view-tools button, header .round, .gallery-controls button,
  .gallery-controls a, .dialog-action, .dialog-resources a, .place-dialog-close):not(:disabled):hover {
    translate: -1px -1px;
    box-shadow: 3px 3px 0 var(--ui-ink);
  }
}
:is(.download-action, .view-tools button, header .round, .gallery-controls button,
.gallery-controls a, .dialog-action, .dialog-resources a, .place-dialog-close):not(:disabled):active {
  translate: 2px 2px; box-shadow: none;
}
@media (max-width: 780px) {
  .mode-switch { gap: 3px; box-shadow: var(--ui-small-shadow); }
  .mode-switch button, .mode-switch .map-entry { padding-inline: 8px; }
  .download-card { padding: 21px; }
  .library-mark { display: none; }
}
@media (max-width: 700px) {
  .map-stage { border-radius: 10px; }
  .map-topline { border-radius: 8px; box-shadow: var(--ui-small-shadow); }
  .map-controls { gap: 5px; }
  .map-mode-controls { gap: 2px; padding: 2px; flex: 1.15; }
  .map-controls button { padding-inline: 3px; }
  .map-mode-controls button { padding-inline: 2px; }
  .explore-panel { border-right: var(--ui-edge); border-radius: 12px 12px 0 0; }
  .has-place-panel .place-panel { border-radius: 12px 12px 0 0; box-shadow: 0 -3px 0 var(--ui-ink); }
}
@media (max-width: 650px) {
  header .brand { box-shadow: var(--ui-small-shadow); }
  .download-grid { gap: 20px; }
  .download-card { padding: 19px; }
  .download-mode header { border-bottom-width: 2px; }
  .classroom-credit { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .download-action, .view-tools button, header .round, .gallery-controls button,
  .gallery-controls a, .dialog-action, .dialog-resources a, .place-dialog-close { transition: none; translate: none; }
  :is(.download-action, .view-tools button, header .round, .gallery-controls button,
  .gallery-controls a, .dialog-action, .dialog-resources a, .place-dialog-close):not(:disabled):is(:hover, :active) { translate: none; }
}