/* Presentation-only layer over the unchanged 19526e2 application. */
:root {
  --review-ink: #183447;
  --review-muted: #536875;
  --review-teal: #087c78;
  --review-ivory: #f6f2e9;
  --review-paper: #fffdf7;
  --review-line: #d7ded8;
  --review-night: #071d2f;
  --review-mint: #7de4d5;
  --line: var(--review-line);
  --card: var(--review-paper);
  color: var(--review-ink);
  background: var(--review-night);
  line-height: 1.65;
}
body {
  background: radial-gradient(ellipse at 90% 0, #153854 0, transparent 48%), #071d2f;
  min-height: 100vh;
}
button, input, select, textarea { font-family: inherit; }
button { transition: background-color .16s, border-color .16s, box-shadow .16s; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #21bcb1;
  outline-offset: 3px;
}
button:disabled { opacity: .55; cursor: not-allowed; }
input, select, textarea { accent-color: var(--review-teal); }
input::placeholder, textarea::placeholder { color: #667985; opacity: 1; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border-color: #b8c8ca;
  color: var(--review-ink);
  background: var(--review-paper);
  border-radius: 10px;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
  border-color: var(--review-teal);
}
a { color: #096d72; }
.masthead {
  max-width: none;
  padding: 16px max(28px, calc((100vw - 1680px) / 2));
  min-height: 82px;
  gap: 18px;
  background: rgba(5, 22, 36, .85);
  border-bottom: 1px solid #274557;
}
.brand {
  color: #f4f6ef;
  font-size: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -.8px;
}
.brand::before {
  content: '';
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  background: url('/assets/manager-brand.png') center / contain no-repeat;
  filter: drop-shadow(0 0 10px #44d6cc22);
}
.brand span { color: #a9c1cc; margin-left: 12px; font-size: 13px; }
.admin {
  padding: 9px 16px;
  min-height: 42px;
  color: #f4edda;
  border: 1px solid #687975;
  border-radius: 10px;
  background: #153043;
  font-weight: 600;
  white-space: nowrap;
}
.admin:hover { background: #244352; border-color: #d3d2ba; }
main { max-width: 1736px; padding: 0 28px; margin: auto; }
.intro {
  position: relative;
  isolation: isolate;
  margin: 20px 0 18px;
  padding: 24px 28px;
  border: 1px solid #365164;
  border-radius: 18px;
  background: linear-gradient(90deg, #092233 0%, #092233f7 42%, #09223366 76%, #09223322),
    url('/assets/manager-night-panorama.png') right 18% / 74% auto no-repeat, #102d45;
  box-shadow: 0 10px 34px #00000013;
}
.intro .eyebrow { margin: 0 0 8px; color: #82e0d5; font-size: 12px; letter-spacing: 1.2px; }
.intro h1 {
  color: #f7fbf6;
  font-size: clamp(25px, 2.15vw, 36px);
  letter-spacing: -1.2px;
  line-height: 1.35;
  margin: 0 0 12px;
}
.intro > p:last-child { color: #ccdade; max-width: 920px; font-size: 13px; line-height: 1.8; }
.workspace-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
}
.workspace-nav button {
  min-height: 70px;
  padding: 16px 13px;
  border: 2px solid #d4dfd5;
  border-top-width: 4px;
  border-radius: 12px;
  color: #183447;
  background: #fffdf2;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.25px;
  text-align: center;
  line-height: 1.45;
  word-break: keep-all;
  box-shadow: 0 5px 14px #00000024, inset 0 1px 0 #ffffff;
}
.workspace-nav button:not([aria-current]):hover {
  color: #075957;
  background: #ffffff;
  border-color: #5fc6b7;
  box-shadow: 0 0 0 3px #bdf3db26, 0 7px 18px #00000029;
}
.workspace-nav button[aria-current] {
  color: #fffdf2;
  background: linear-gradient(125deg, #076c68, #075650);
  border-color: #87f0d4;
  font-weight: 800;
  box-shadow: 0 0 0 2px #88efd330, 0 6px 20px #20cdb02b, inset 0 1px 0 #b4fff333;
}
.workspace-nav button[aria-current]:hover { background: #075d58; border-color: #b2f9df; }
.workspace-nav button[data-workspace=explore]:not([aria-current]) { background: #f1f5e8; border-top-color: #91bca1; }
.workspace-nav button[data-workspace=ask]:not([aria-current]) { background: #edf5fa; border-top-color: #80aeca; }
.workspace-nav button[data-workspace=review]:not([aria-current]) { background: #fff5df; border-top-color: #c9ad6e; }
.workspace-nav button[data-workspace=saved]:not([aria-current]) { background: #f3edf8; border-top-color: #b19bcb; }
.workspace-nav button[data-workspace=stats]:not([aria-current]) { background: #eaf4ed; border-top-color: #82b8a3; }
.workspace-nav button:focus-visible { outline: 3px solid #fff8db; outline-offset: 4px; }
.workspace-context {
  color: #c1d3d8;
  padding: 13px 4px 15px;
  font-size: 12px;
  min-height: 45px;
}
#workspace-explore {
  display: grid;
  grid-template-columns: 228px minmax(320px, 1fr) minmax(355px, .82fr);
  gap: 16px;
  align-items: start;
  padding-bottom: 24px;
}
/* Keep the original DOM and every event target. Only grid placement changes. */
#workspace-explore .map-workspace { display: contents; }
.map-workspace .selector {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--review-ink);
  background: #f0f3ec;
  border: 1px solid #d4e0d8;
  border-radius: 15px;
  padding: 18px 14px;
  max-height: min(920px, calc(100vh - 52px));
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #b1c3bc transparent;
}
.map-filter-heading { gap: 6px; margin-bottom: 5px; }
.map-filter-heading h2 { color: #163d49; font-size: 18px; font-weight: 800; }
.map-filter-heading .text-button { min-height: 34px; padding: 5px 8px; font-size: 11px; }
.map-workspace .selector > .muted { color: #5e736f; font-size: 11px; margin: 7px 0 14px; }
.text-button {
  border: 1px solid #c2d2cd;
  border-radius: 8px;
  background: #fffdf7;
  color: #1b5c65;
  padding: 8px 11px;
  min-height: 38px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.text-button:hover:not(:disabled) { background: #e6f4ee; border-color: #649c96; }
.school-levels { gap: 7px; }
.school-levels span {
  padding: 11px 8px;
  min-height: 44px;
  border-radius: 9px;
  color: #475e64;
  border-color: #c5d2cd;
  background: #fffdf7;
  gap: 6px;
}
.school-levels input:checked + span {
  background: #d6eee1;
  border-color: #4d9277;
  color: #164d3c;
  box-shadow: inset 0 0 0 1px #4d9277;
}
.school-levels label:has([data-map-level='유치원']:checked) span { background: #f6e8c7; border-color: #b7863a; color: #6b4919; box-shadow: inset 0 0 0 1px #b7863a; }
.school-levels label:has([data-map-level='중학교']:checked) span { background: #dfeafb; border-color: #5882b4; color: #284d7b; box-shadow: inset 0 0 0 1px #5882b4; }
.school-levels label:has([data-map-level='고등학교']:checked) span { background: #eae3f5; border-color: #8a6caf; color: #62407b; box-shadow: inset 0 0 0 1px #8a6caf; }
.map-workspace .search-row { margin-top: 16px; }
.map-workspace .search-row label { font-size: 12px; font-weight: 650; color: #35545c; margin: 12px 0; }
.map-workspace .search-row input, .map-workspace .search-row select { min-height: 43px; font-size: 13px; padding: 10px; }
.map-workspace #school { border-color: #4e9691; background-color: #fffef8; box-shadow: 0 0 0 3px #83beb71f; font-weight: 650; }
.map-workspace #search-status { font-size: 11px; color: #536975; line-height: 1.65; }
.map-workspace .resource-row { border-color: #cfdbd1; padding-top: 12px; }
.resource-row label { color: #35545c; font-weight: 650; }
.map-workspace .resource-row select { min-height: 41px; }
#map-clear-school { margin-top: 10px; width: 100%; }
.map-layer-panel { margin-top: 18px; padding-top: 15px; border-color: #cbd8cf; }
.map-layer-heading { flex-wrap: wrap; gap: 8px; }
.map-layer-heading h3 { font-size: 14px; color: #264e59; }
.map-layer-heading .text-button { font-size: 10px; min-height: 31px; padding: 6px; }
.map-layer-group { background: #fffdf7; border-color: #ced9d0; border-radius: 10px; margin: 9px 0; }
.map-layer-group > summary { min-height: 51px; padding: 10px; color: #426474; }
.map-layer-group strong { color: #254c58; font-size: 13px; }
.map-layer-group summary small { color: #62726d; font-size: 10px; }
.map-layer-group[open] { border-color: #8ab2a6; box-shadow: 0 3px 10px #16344709; }
.map-layer-group[open] > summary { background: #e4f0e7; border-radius: 9px 9px 0 0; }
.layer-group-count { background: #d8e9df; color: #29574a; }
.map-layer-option { min-height: 48px; color: #294b57; }
.map-layer-option small { color: #5c716b; }
.map-layer-option:has(input:checked) { background: #eaf4ec; }
.map-boundary-controls label { line-height: 1.6; color: #294b57; }
.map-layer-panel .fine { font-size: 11px; color: #536975; }
.map-canvas {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #8eaeb8;
  border-radius: 15px;
  background: #eff4ef;
  box-shadow: 0 8px 22px #00000012;
  overflow: hidden;
}
.map-toolbar { min-height: 58px; padding: 12px 14px; background: #e5eee8; color: #224752; border-bottom: 1px solid #ccd9d1; }
#map-count { font-weight: 700; }
.map-toolbar .text-button { font-size: 11px; min-height: 34px; padding: 7px 9px; }
.map-layer-selected { gap: 7px; padding: 10px 12px 0; }
.map-layer-selected:empty { padding: 0; }
.map-layer-chip { min-height: 32px; padding: 5px 10px; border-color: #a7c5ba; border-left-color: var(--layer-color); background: #fffdf7; color: #264e59; font-size: 11px; }
.map-layer-status { color: #536b72; font-size: 11px; margin: 0; padding: 9px 14px; border-bottom: 1px solid #d9e3dc; }
#school-map { height: clamp(440px, 55vh, 640px); background: #e6efec; }
.map-notes { padding: 12px 14px; }
.map-notes p { color: #526774; font-size: 11px; }
.map-source { padding: 0 14px 15px; color: #526774; }
.map-source > summary { color: #1a626c; font-weight: 600; min-height: 30px; }
.map-layer-list { color: #294b57; }
#workspace-explore > .observation-section {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  min-width: 0;
  border: 1px solid #d2ded6;
  border-top: 4px solid #74ccbb;
  border-radius: 15px;
  background: var(--review-ivory);
  padding: 19px;
  box-shadow: 0 8px 25px #00000018;
  max-height: min(1180px, calc(100vh - 52px));
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #b2c4bd transparent;
}
.observation-section > .section-heading { gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #d4ded5; margin-bottom: 18px; align-items: flex-start; }
.observation-section > .section-heading .step { font-size: 14px; font-weight: 800; color: #155965; }
.observation-section > .section-heading .step span { display: block; font-size: 11px; font-weight: 500; color: #586e77; margin: 4px 0 0; letter-spacing: 0; }
.observation-section #download-school { flex: 0 0 auto; font-size: 11px; min-height: 35px; padding: 7px 10px; border-color: #8eb8ad; }
.observation-section #download-school:not(:disabled) { color: #f9fffb; background: #0d736d; border-color: #0d736d; }
#workspace-explore > .next-actions { grid-column: 2 / 4; grid-row: 2; margin: 0; gap: 10px; }
.next-actions button { min-height: 47px; border-radius: 10px; background: #efeadb; border-color: #efeadb; color: #284a57; font-size: 14px; font-weight: 700; }
.next-actions button:first-child { color: #073b3d; background: #88e2ce; border-color: #88e2ce; }
.next-actions button:hover { box-shadow: 0 0 0 3px #b8eee422; }
#workspace-explore > #error { grid-column: 1 / -1; color: #ffd2be; background: #6b292966; border-radius: 9px; padding: 10px 15px; margin: 0; }
.capability-details { color: #c4d3d8; border-color: #355367; padding: 20px 4px; margin: 25px 0; }
.capability-details > summary { color: #dfe9df; }
.capability-grid h3 { color: #98dacf; }
.capability-grid p { color: #b9cbd2; }
footer { border-color: #294b5e; color: #b7c8cf; padding: 24px; background: #061827; }
/* Preserve the application's hidden-state contract, including inactive tabs. */
[hidden] { display: none !important; }
@media (min-width: 1750px) {
  #workspace-explore { grid-template-columns: 250px minmax(450px, 1fr) 470px; gap: 20px; }
  .map-workspace .selector { padding: 20px 18px; }
}
@media (min-width: 1180px) {
  .map-workspace .selector, #workspace-explore > .observation-section { position: sticky; top: 18px; }
}
@media (max-width: 1179px) and (min-width: 781px) {
  #workspace-explore { grid-template-columns: minmax(0, 1fr) minmax(325px, .85fr); }
  .map-workspace .selector { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 0 18px; max-height: 310px; }
  .map-filter-heading, .map-workspace .selector > .muted, .school-levels { grid-column: 1; }
  .map-options { grid-column: 2; grid-row: 1 / 5; }
  .map-options > summary { display: block; font-size: 12px; color: #315b63; font-weight: 700; }
  .map-layer-panel { grid-column: 3; grid-row: 1 / 5; margin: 0; padding: 0; border: 0; }
  #map-layer-groups { display: block; }
  .school-levels { grid-template-columns: 1fr 1fr; align-self: start; }
  .map-workspace .search-row { margin-top: 0; display: block; }
  .map-workspace .resource-row { display: block; }
  .map-workspace .resource-row select { width: 100%; margin-top: 6px; }
  .map-canvas { grid-column: 1; grid-row: 2; }
  #workspace-explore > .observation-section { grid-column: 2; grid-row: 2; }
  #workspace-explore > .next-actions { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 780px) {
  main { padding: 0 16px; }
  .masthead { padding: 12px 16px; min-height: 70px; }
  .brand { font-size: 21px; gap: 9px; }
  .brand::before { width: 40px; height: 40px; flex-basis: 40px; }
  .brand span { display: none; }
  .admin { padding: 8px 11px; font-size: 11px; min-height: 38px; }
  .intro { padding: 20px; margin: 16px 0; background-size: auto, auto 100%; background-position: center, right center; }
  .intro .eyebrow { font-size: 10px; letter-spacing: .5px; }
  .intro h1 { font-size: 26px; line-height: 1.4; }
  .intro > p:last-child { font-size: 12px; line-height: 1.85; }
  .workspace-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .workspace-nav button { min-height: 64px; padding: 13px 9px; font-size: 15px; border-radius: 10px; }
  .workspace-nav button:last-child { grid-column: 1 / -1; }
  .workspace-context { line-height: 1.75; font-size: 11px; padding: 12px 2px; }
  #workspace-explore { display: flex; flex-direction: column; gap: 14px; }
  .map-workspace .selector { width: 100%; order: 0; padding: 17px; max-height: none; overflow: visible; }
  .school-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .school-levels span { font-size: 11px; padding: 10px 3px; gap: 4px; justify-content: center; }
  .school-levels input:checked + span:after { display: none; }
  .map-options > summary { min-height: 41px; margin-top: 10px; font-size: 13px; color: #175e68; font-weight: 700; }
  .map-workspace .search-row { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; gap: 0; }
  .map-workspace .search-row label { width: 100%; margin: 7px 0; }
  .map-workspace .resource-row { display: flex; gap: 12px; padding-top: 8px; }
  .map-workspace .resource-row select { flex: 1; margin: 0; width: auto; }
  .map-layer-heading { flex-wrap: nowrap; }
  #map-layer-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  #map-layer-groups .map-layer-group { margin: 0; }
  .map-layer-panel .map-boundary-controls { display: block; }
  #workspace-explore > .observation-section { order: 1; width: 100%; max-height: none; overflow: visible; padding: 17px; }
  .map-canvas { order: 2; width: 100%; }
  #school-map { height: 420px; }
  .map-toolbar { padding: 10px; font-size: 11px; flex-wrap: wrap; }
  #workspace-explore > .next-actions { order: 3; width: 100%; flex-wrap: wrap; }
  .next-actions button { flex: 1 1 150px; font-size: 12px; padding: 11px; }
  #workspace-explore > #error { order: 1; width: 100%; }
  .capability-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }
@media print {
  :root, body { background: white; color: #183447; }
  main { max-width: none; padding: 0; }
  .intro { background: #fff; border-color: #aaa; }
  .intro h1, .intro p, .intro .eyebrow { color: #183447; }
  #workspace-explore { display: block; }
  .map-workspace .selector, #workspace-explore > .observation-section { max-height: none; overflow: visible; }
  .workspace-context { color: #183447; }
}