/* 천문 관측 시뮬레이션 - 스타일
   어두운 관측실 분위기에 맞춰 낮은 밝기의 단순한 UI만 사용합니다. */

:root {
  --bg: #04060c;
  --text: #d5dcea;
  --dim: #7f8aa0;
  --line: rgba(190, 205, 235, 0.22);
  --accent: #e0775c;
  --font: "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: "D2Coding", "Consolas", "Menlo", "Malgun Gothic", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.12em 0.45em;
  margin-right: 0.2em;
  font: 600 0.85em var(--mono);
  text-align: center;
  color: var(--text);
  border: 1px solid rgba(220, 230, 250, 0.45);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

/* ───────── HUD ───────── */

#hud { position: fixed; inset: 0; pointer-events: none; }

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgba(235, 240, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

#prompt {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.9em;
  font-size: 17px;
  background: rgba(3, 6, 12, 0.72);
  border: 1px solid var(--line);
  border-radius: 6px;
  white-space: nowrap;
}
#prompt[hidden] { display: none; }
#prompt kbd { margin: 0; }

#hint {
  position: absolute;
  left: 16px;
  bottom: 12px;
  font-size: 12px;
  color: rgba(213, 220, 234, 0.55);
  text-shadow: 0 1px 2px #000;
}

/* ───────── 시작/일시정지 안내 ───────── */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;          /* 내용이 화면보다 길어도 위가 잘리지 않고 스크롤되도록 */
  overflow-y: auto;
  background: rgba(2, 4, 10, 0.9);
  cursor: pointer;
  z-index: 30;
}
.overlay[hidden] { display: none; }
.overlay-light { background: rgba(2, 4, 10, 0.62); }

.overlay-inner { width: min(560px, 90vw); margin: auto; padding: 16px 0; text-align: left; }

.overlay h1 {
  margin: 0 0 0.35em;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.lead { margin: 0 0 1.4em; color: var(--text); font-size: 16px; line-height: 1.6; }
.overlay-light .lead { font-size: 20px; margin-bottom: 1em; }

.controls {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 0.7em 1em;
  margin: 0 0 1.8em;
  padding: 1.1em 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.controls dt { color: var(--dim); }
.controls dd { margin: 0; }
.controls.compact { font-size: 14px; gap: 0.5em 1em; padding: 0.9em 0; margin: 0; }

#start-btn {
  font: 600 16px var(--font);
  color: var(--text);
  padding: 0.7em 1.8em;
  background: transparent;
  border: 1px solid rgba(220, 230, 250, 0.6);
  border-radius: 4px;
  cursor: pointer;
}
#start-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
#start-btn:disabled { opacity: 0.5; cursor: default; }
.quality-line { margin: 1.4em 0 0; font-size: 13px; color: var(--dim); }
.link-btn { font: inherit; color: #9fc0ee; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: #cfe1ff; }

.fatal { margin-top: 1.2em; color: #ff9b86; line-height: 1.6; }
.fatal[hidden] { display: none; }

/* ───────── 상호작용 화면 공통 ───────── */

.screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(2, 4, 10, 0.78);
}
.screen[hidden] { display: none; }

.close-btn {
  position: absolute;
  top: 18px;
  right: 22px;
  font: 14px var(--font);
  color: var(--text);
  padding: 0.5em 0.9em;
  background: rgba(3, 6, 12, 0.6);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.close-btn:hover { background: rgba(255, 255, 255, 0.1); }
.close-btn kbd { margin: 0 0 0 0.3em; font-size: 0.8em; }

/* ───────── 관측 컴퓨터 화면 ───────── */

.monitor {
  width: min(900px, 92vw);
  height: min(620px, 90vh);
  display: flex;
  flex-direction: column;
  background: #07101f;
  border: 1px solid #243a5e;
  border-radius: 6px;
  box-shadow: 0 0 60px rgba(40, 90, 170, 0.18);
  font-family: var(--mono);
  color: #b9d0f2;
}
.monitor header {
  display: flex;
  justify-content: space-between;
  padding: 0.8em 1.2em;
  background: #0e2040;
  border-bottom: 1px solid #243a5e;
  font-size: 15px;
}
.monitor .title { font-weight: 700; color: #cfe1ff; }
.monitor .clock { color: #7fa6d8; }
.monitor .body { flex: 1; padding: 1.6em 1.6em; overflow: auto; }
.monitor .status {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 0.9em 1em;
  margin: 0 0 2em;
  font-size: 16px;
}
.monitor .status dt { color: #6f8fbf; }
.monitor .status dd { margin: 0; }
.monitor .dim { color: #5d7194; }
.monitor .console { margin: 0; font-size: 15px; color: #7fd0a4; }
.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-left: 0.2em;
  vertical-align: text-bottom;
  background: #7fd0a4;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.monitor footer {
  padding: 0.7em 1.2em;
  border-top: 1px solid #1a2d4d;
  font-size: 13px;
  color: #5d7194;
}

/* 관측 미션 (컴퓨터 화면 안) */
.monitor .mission-title { font-size: 18px; font-weight: 700; color: #cfe1ff; margin-bottom: 0.3em; }
.monitor .mstatus { margin: 0 0 1em; font-size: 14px; }
.monitor .mstatus.go { color: #7fd0a4; }
.monitor .mstatus.ok { color: #7fd0a4; font-weight: 700; }
.monitor .mstatus.bad { color: #ffb38a; }
.monitor h3 { margin: 1.1em 0 0.4em; font-size: 13px; font-weight: 600; color: #6f8fbf; letter-spacing: 0.04em; }
.monitor p { margin: 0 0 0.6em; line-height: 1.65; font-size: 15px; }
.monitor ul { margin: 0 0 0.6em; padding-left: 1.2em; line-height: 1.7; font-size: 15px; }
.monitor .note { color: #8aa3c9; font-size: 14px; }
.monitor .checks { list-style: none; padding: 0; display: grid; gap: 0.7em; }
.monitor .checks li { display: grid; grid-template-columns: 3.2em 1fr; gap: 0.8em; align-items: start; padding: 0.6em 0.8em; border: 1px solid #1a2d4d; border-radius: 4px; line-height: 1.55; }
.monitor .checks.compact { gap: 0.3em; }
.monitor .checks.compact li { padding: 0.3em 0.8em; }
.monitor .status { margin-bottom: 1em; gap: 0.5em 1em; }
.monitor .checks .mark { font-weight: 700; font-size: 13px; }
.monitor .checks .pass .mark { color: #7fd0a4; }
.monitor .checks .fail { border-color: #6b3b2c; }
.monitor .checks .fail .mark { color: #ffb38a; }
.mbtn {
  margin: 0.8em 0.6em 0 0; padding: 0.6em 1.3em; font: 15px var(--mono); color: #cfe1ff;
  background: #123565; border: 1px solid #2f5a9c; border-radius: 4px; cursor: pointer;
}
.mbtn:hover { background: #1a477f; }
.mbtn.sub { background: transparent; border-color: #243a5e; color: #8aa3c9; padding: 0.35em 0.9em; font-size: 13px; margin-top: 0.2em; }

/* 망원경 화면의 제출 버튼 */
/* 성도 버튼과 제출 버튼은 창이 낮아도 항상 보이도록 왼쪽 위 모서리에 고정 */
.tele-tools { position: fixed; top: 18px; left: 22px; width: 230px; display: grid; gap: 8px; z-index: 3; }
.chart-btn { padding: 0.55em 0; font: 14px var(--font); color: var(--text); background: rgba(3, 6, 12, 0.78); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.chart-btn:hover { background: rgba(255, 255, 255, 0.1); }
.chart-btn kbd { margin-left: 0.3em; font-size: 0.8em; }
.mission-box { padding: 0.8em; background: rgba(3, 6, 12, 0.78); border: 1px solid var(--line); border-radius: 4px; }
.chart-pop { position: fixed; z-index: 2; left: 22px; top: 200px; width: min(340px, calc(100vh - 270px)); padding: 10px 10px 4px; background: rgba(4, 9, 20, 0.96); border: 1px solid var(--line); border-radius: 6px; }
.chart-pop[hidden] { display: none; }
.chart-pop canvas { width: 100%; height: auto; display: block; }
.chart-pop p { margin: 6px 0; font-size: 12px; color: var(--dim); text-align: center; }
.mission-text p, .mission-text ul { font-size: 14px; line-height: 1.55; }
.mission-text h3 { margin: 0.9em 0 0.3em; }
.mission-text .actions { margin: 0.5em 0 0.2em; }
.mission-text .actions .mbtn { margin-top: 0.2em; }
.mission-text .console { display: inline-block; margin: 0.4em 0.8em 0 0; font-size: 14px; }
.monitor header { align-items: center; gap: 1em; }
.tabs { display: flex; gap: 6px; margin-right: auto; margin-left: 1.2em; }
.tabs button { font: 13px var(--mono); color: #8aa3c9; background: transparent; border: 1px solid #243a5e; border-radius: 3px; padding: 0.25em 0.8em; cursor: pointer; }
.tabs button:hover { background: #123565; }
.tabs button.on { color: #cfe1ff; background: #123565; border-color: #2f5a9c; }
.shot-cols { display: grid; grid-template-columns: 300px 1fr; gap: 1.4em; align-items: start; margin-top: 0.4em; }
.shot-fig { margin: 0; text-align: center; }
.shot { width: 300px; height: 300px; border-radius: 50%; border: 2px solid #243a5e; background: #02040a; display: block; }
.shot-fig figcaption { font-size: 12px; color: #6f8fbf; margin-top: 4px; }
.shot-info .status { margin-bottom: 0; font-size: 14px; gap: 0.5em 1em; }
.shot-info .status .ok { color: #7fd0a4; font-weight: 700; }
.shot-info .status .bad { color: #ffb38a; font-weight: 700; }
.facts li { margin-bottom: 0.2em; }
.monitor .rec-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.mission-text .actions.top, .actions.top { margin: 0 0 0.4em; }
.rec { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; font: 14px var(--mono); color: #b9d0f2; background: #0a1730; border: 1px solid #1a2d4d; border-radius: 4px; padding: 8px; cursor: pointer; line-height: 1.5; }
.rec:hover { background: #12264a; }
.rec.bad { border-left: 3px solid #b86a4a; }
.rec.ok { border-left: 3px solid #4aa57b; }
.rec img { border-radius: 50%; background: #02040a; flex: none; }
@media (max-width: 760px) { .shot-cols { grid-template-columns: 1fr; } }
.mission-cols { display: grid; grid-template-columns: 1fr 300px; gap: 1.6em; align-items: start; }
.chart-fig { margin: 0; text-align: center; }
.chart-fig canvas { width: 100%; height: auto; display: block; }
.chart-fig figcaption { font-size: 12px; color: #6f8fbf; margin-top: 4px; }
@media (max-width: 760px) { .mission-cols { grid-template-columns: 1fr; } }
.submit-btn {
  width: 100%; padding: 0.75em 0; font: 600 16px var(--font); color: #07101f;
  background: #7fd0a4; border: 0; border-radius: 4px; cursor: pointer;
}
.submit-btn:hover { background: #98e0b8; }
.submit-note { margin: 0.5em 0 0; font-size: 12px; color: var(--dim); }

/* ───────── 망원경 화면 ───────── */

.screen-telescope {
  background: rgba(1, 2, 6, 0.9);
  grid-template-columns: auto 320px;
  gap: 5vw;
  justify-content: center;
  align-items: center;
  align-content: safe center;   /* 화면이 낮으면 위가 잘리지 않고 스크롤됨 */
  overflow-y: auto;
  padding-bottom: var(--dock);  /* 안내 카드가 아래에 붙으면 그만큼 위로 줄임 (15단계) */
  scroll-padding-bottom: var(--dock);
}
.eyepiece { display: grid; place-items: center; }
.fov {
  width: min(62vh, 52vw, calc(100vh - var(--dock) - 120px));
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #02040a 0%, #000 100%);
  border: 2px solid rgba(190, 205, 235, 0.3);
  box-shadow: 0 0 0 10px #0a0c12, 0 0 0 11px rgba(190, 205, 235, 0.15);
  overflow: hidden;
}
.fov canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.telescope-info .title { font-size: var(--fs-title, 18px); font-weight: 700; margin-bottom: 1em; }
.telescope-info dl {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 0.7em 0.8em;
  margin: 0 0 1.4em;
  padding: 1em 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.telescope-info dt { color: var(--dim); }
.telescope-info dd { margin: 0; }
.telescope-info .dim { color: var(--dim); font-size: 14px; line-height: 1.6; }
.telescope-info dl { margin-bottom: 1.1em; }
.telescope-info dd.warn { color: #ff9b86; }
.telescope-info dd[data-state="sharp"] { color: #9fe0b4; }
.telescope-info dd[data-state="near"] { color: #d5dcea; }
.telescope-info dd[data-state="soft"],
.telescope-info dd[data-state="far"] { color: #e0a070; }

.ctl { margin: 0 0 1em; }
.ctl-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4em; font-size: 14px; color: var(--dim); }
.ctl-label .keys { font-size: 12px; color: rgba(127, 138, 160, 0.75); }

.telescope-info button {
  font: 14px var(--font);
  color: var(--text);
  background: rgba(190, 205, 235, 0.06);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.telescope-info button:hover { background: rgba(190, 205, 235, 0.14); }
.telescope-info button.on { background: rgba(224, 119, 92, 0.22); border-color: rgba(224, 119, 92, 0.7); }
.telescope-info button.held { background: rgba(190, 205, 235, 0.28); }

.pad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-areas: ". up ." "left . right" ". down .";
  gap: 4px;
  justify-content: start;
}
.pad button { height: 34px; padding: 0; }
.pad [data-dir="up"] { grid-area: up; }
.pad [data-dir="left"] { grid-area: left; }
.pad [data-dir="right"] { grid-area: right; }
.pad [data-dir="down"] { grid-area: down; }

.seg { display: flex; gap: 6px; }
.seg button { flex: 1; padding: 0.5em 0.4em; display: grid; gap: 1px; }
.seg button small { font-size: 12px; color: var(--dim); }

.telescope-info input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }

@media (max-width: 820px) {
  .screen-telescope { grid-template-columns: 1fr; gap: 1.5em; }
  .fov { width: min(50vh, 80vw, calc(100vh - var(--dock) - 120px)); }
  .screen-telescope { overflow-y: auto; align-content: start; }
}

/* ── Stage 6: 임무 목록 ── */
.monitor .mlist { list-style: none; padding: 0; margin: 0.6em 0 0; display: grid; gap: 10px; }
.monitor .mcard { border: 1px solid #243a5e; border-radius: 4px; padding: 10px 14px; background: rgba(8, 22, 46, 0.7); }
.monitor .mcard.available { border-color: #2f5a9c; }
.monitor .mcard.completed { border-color: #3b7a5a; }
.monitor .mcard.locked { opacity: 0.7; }
.monitor .mcard p { margin: 0.3em 0; }
.monitor .mc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.monitor .mc-head b { font-size: 16px; color: #cfe1ff; }
.monitor .mc-level { font-size: 12px; color: #8aa3c9; }
.monitor .mc-state { margin-left: auto; font-size: 12px; padding: 1px 8px; border: 1px solid #243a5e; border-radius: 10px; }
.monitor .mc-state.ok { color: #7fd0a4; border-color: #3b7a5a; }
.monitor .mc-state.go { color: #9fc0ee; border-color: #2f5a9c; }
.monitor .mc-state.dim { color: #8aa3c9; }
.monitor .mc-meta { font-size: 12px; color: #8aa3c9; }
.monitor .mc-target { margin-left: 1em; color: #7fd0a4; }
.monitor .lock-note { color: #ffb38a; }
.monitor .actions.nav { margin: 0 0 0.5em; }
.monitor .mbtn.small { font-size: 12px; padding: 0.25em 0.8em; }

/* ── Stage 7: 성도에서 방향 정하기, 조준선, 속도 표시 ── */
canvas.aimable { cursor: crosshair; }
.chart-fig .aim-line { margin: 0.5em 0 0.1em; font-size: 13px; color: #cfe1ff; text-align: center; }
.chart-fig .aim-hover, .chart-pop .aim-hover { margin: 0.2em 0; font-size: 12px; color: #8aa3c9; text-align: center; min-height: 1.3em; }
.chart-fig .aim-note { margin: 0.2em 0; font-size: 12px; color: #7fd0a4; text-align: center; }
.chart-fig .aim-note[data-ok="0"] { color: #ffb38a; }
.fov { position: relative; }
.reticle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.reticle .r-edge { fill: none; stroke: rgba(160, 200, 255, 0.55); stroke-width: 0.8; }
.reticle .r-zone { fill: none; stroke: rgba(127, 208, 164, 0.85); stroke-width: 0.7; stroke-dasharray: 3 2.5; }
.reticle .r-cross, .reticle .r-ticks { fill: none; stroke: rgba(255, 154, 107, 0.7); stroke-width: 0.6; }
.reticle .r-dot { fill: rgba(255, 154, 107, 0.9); }
.aim-state { margin-top: 12px; display: flex; gap: 12px; align-items: center; justify-content: center; font-size: 13px; }
.aim-state .badge { padding: 2px 10px; border: 1px solid #2f5a9c; border-radius: 10px; color: #9fc0ee; }
.aim-state .badge.fine { border-color: #3b7a5a; color: #7fd0a4; }
.aim-state .badge.moving { background: rgba(255, 154, 107, 0.18); border-color: #ff9a6b; color: #ffd9a8; }
.aim-state .dim { color: var(--dim); }
.eyepiece { grid-auto-flow: row; }
.aim-state .mini { font: 12px var(--mono, inherit); color: #9fc0ee; background: transparent; border: 1px solid #243a5e; border-radius: 10px; padding: 2px 10px; cursor: pointer; }
.aim-state .mini.on { border-color: #2f5a9c; }
.aim-state .mini kbd { font-size: 11px; }
.aim-state { flex-wrap: wrap; }

/* ── Stage 8: 장비 상인·상점, 잔액 ── */
.monitor .wallet { margin-left: auto; padding: 1px 10px; border: 1px solid #3b7a5a; border-radius: 10px; color: #7fd0a4; font-size: 14px; }
.monitor .wallet:empty { display: none; }
.monitor .shop-msg { position: sticky; top: -1.6em; z-index: 1; background: #0b1b33; margin: -0.2em 0 0.6em; padding: 0.5em 0.8em; border: 1px solid #243a5e; border-radius: 4px; font-size: 14px; color: #cfe1ff; }
.monitor .shop-msg.ok { border-color: #3b7a5a; color: #7fd0a4; }
.monitor .shop-msg.bad { border-color: #6b3b2c; color: #ffb38a; }
.monitor .shop-slot { margin-top: 1em; font-size: 16px; }
.monitor .shop-item.owned { border-color: #3b7a5a; }
.monitor .shop-item.funds, .monitor .shop-item.locked { opacity: 0.85; }
.monitor .shop-item .mbtn { margin-top: 0.3em; }

/* ── Stage 10: 촬영 연출, 결과 화면 ── */
.fov { position: relative; }
.shot-overlay { position: absolute; left: 8%; right: 8%; bottom: 7%; z-index: 2; padding: 8px 10px; background: rgba(3, 6, 12, 0.82); border: 1px solid var(--line); border-radius: 6px; pointer-events: none; }
.shot-overlay[hidden] { display: none; }
.shot-rec { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #ffd7c4; margin-bottom: 6px; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff6a4a; animation: rec-blink 0.9s steps(1) infinite; }
@keyframes rec-blink { 50% { opacity: 0.2; } }
.shot-bar { height: 6px; background: #14213a; border-radius: 3px; overflow: hidden; }
.shot-bar i { display: block; height: 100%; width: 0; background: #7fd0a4; }
.shot-flash { position: absolute; inset: 0; border-radius: 50%; background: #fff; opacity: 0; pointer-events: none; z-index: 3; }
.shot-flash.go { animation: shot-flash 0.26s ease-out; }
@keyframes shot-flash { 0% { opacity: 0.55; } 100% { opacity: 0; } }
.result-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 0.6em 0.9em; margin: 0.2em 0 0.8em; border: 1px solid #243a5e; border-radius: 4px; font-size: 14px; }
.result-banner b { font-size: 17px; }
.result-banner span { color: #b9d0f2; }
.result-banner.ok { border-color: #3b7a5a; background: rgba(74, 165, 123, 0.12); }
.result-banner.ok b { color: #7fd0a4; }
.result-banner.bad { border-color: #6b3b2c; background: rgba(184, 106, 74, 0.12); }
.result-banner.bad b { color: #ffb38a; }
.shot-frame { position: relative; width: 300px; height: 300px; margin: 0 auto; }
.eye-fig { position: absolute; left: -6px; bottom: -6px; margin: 0; text-align: center; }
.eye-fig img { width: 96px; height: 96px; border-radius: 50%; border: 2px solid #3b5f94; background: #02040a; display: block; }
.eye-fig figcaption { font-size: 11px; color: #9fc0ee; margin-top: 2px; text-shadow: 0 0 3px #000; }
.shot.fresh { animation: shot-develop 0.9s ease-out; }
@keyframes shot-develop { 0% { opacity: 0; filter: blur(10px) brightness(2.2); transform: scale(0.96); } 100% { opacity: 1; filter: none; transform: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.3em; }
.chip { font-size: 12px; padding: 2px 9px; border: 1px solid #243a5e; border-radius: 10px; color: #b9d0f2; }
.chip.ok { border-color: #3b7a5a; color: #7fd0a4; }
.chip.warn { border-color: #6b3b2c; color: #ffb38a; }
.chip.cam { border-color: #8a5a78; color: #f0b4cf; }
.shot-info h3 { margin: 0.6em 0 0.3em; }
.shot-info .status { margin-top: 1em; }
@media (prefers-reduced-motion: reduce) { .shot.fresh, .shot-flash.go, .rec-dot { animation: none; } }


/* ── 12단계: 튜토리얼 안내 카드, 도움말 ── */
.coach { position: fixed; left: 16px; bottom: 58px; z-index: 40; width: min(330px, calc(100vw - 32px)); padding: 10px 12px 10px; background: rgba(6, 12, 26, 0.95); border: 1px solid #2d4672; border-left: 3px solid #ffd27a; border-radius: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5); font-size: 13.5px; line-height: 1.55; }
.coach[hidden] { display: none; }
.coach[data-kind="tip"] { border-left-color: #7fc7ff; }
.coach[data-kind="notice"] { border-left-color: #8fe0a5; }
.coach-head { font-size: 11.5px; color: #ffd27a; letter-spacing: 0.02em; }
.coach[data-kind="tip"] .coach-head { color: #7fc7ff; }
.coach[data-kind="notice"] .coach-head { color: #8fe0a5; }
.coach-bar { height: 3px; margin: 4px 0 6px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; }
.coach-bar i { display: block; height: 100%; background: #ffd27a; transition: width 0.4s ease; }
.coach-title { display: block; margin: 2px 0 2px; font-size: 14.5px; color: #eaf1ff; }
.coach-text { margin: 0.2em 0 0.4em; color: #cdd7ea; }
.coach-text kbd, .help-body kbd { margin: 0 1px; }
.coach-lock { margin: 0 0 0.4em; font-size: 11.5px; color: var(--dim); }
.coach-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.coach-actions .link-btn { font-size: 12px; color: #8aa3c9; }
.coach .mbtn.small { font-size: 12.5px; padding: 0.25em 0.9em; margin: 0; }
.help-btn { position: fixed; left: 16px; bottom: 14px; z-index: 41; padding: 6px 11px; font: inherit; font-size: 13px; color: #cfe1ff; background: rgba(6, 12, 26, 0.88); border: 1px solid #2d4672; border-radius: 6px; cursor: pointer; }
.help-btn:hover { background: #12274a; }
.help-btn[hidden] { display: none; }
.help-btn kbd { margin: 0 0 0 4px; font-size: 0.8em; }
.help-panel { z-index: 50; }
.help .help-cols { display: grid; grid-template-columns: 190px 1fr; gap: 14px; min-height: 0; flex: 1; }
.help-tabs { display: grid; align-content: start; gap: 5px; }
.help-tabs button { font: inherit; font-size: 13.5px; text-align: left; padding: 7px 10px; color: #9db4d9; background: transparent; border: 1px solid #243a5e; border-radius: 4px; cursor: pointer; }
.help-tabs button.on { color: #eaf1ff; background: #12274a; border-color: #3b5f99; }
.help-body { overflow-y: auto; padding-right: 6px; }
.help-body h3 { margin: 0 0 8px; font-size: 16px; color: #eaf1ff; }
.help-body ul { margin: 0; padding-left: 1.2em; }
.help-body li { margin: 0 0 8px; line-height: 1.65; }
.help-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--line); }
.help-foot .mbtn { margin: 0; }
.help-check { font-size: 12.5px; color: #9db4d9; margin-left: auto; cursor: pointer; }
.tut-target { outline: 2px solid #ffd27a !important; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 210, 122, 0.22) !important; animation: tutPulse 1.4s ease-in-out infinite; }
@keyframes tutPulse { 50% { box-shadow: 0 0 0 9px rgba(255, 210, 122, 0.08); } }
@media (prefers-reduced-motion: reduce) { .tut-target { animation: none; } .coach-bar i { transition: none; } }
@media (max-width: 720px) { .help .help-cols { grid-template-columns: 1fr; } .help-tabs { grid-auto-flow: column; overflow-x: auto; } }
.help .help-cols { padding: 1.1em 1.4em 0.4em; overflow: hidden; }
.help .help-foot { padding: 10px 1.4em 12px; margin: 0; }

/* (15단계) 컴퓨터·상점·망원경 화면의 안내 카드 위치는 아래 「15단계」 절에 있음 */

/* 14단계: 게임 완료 안내와 요약 */
.finale-banner { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 8px 0 12px; padding: 10px 12px; background: rgba(40, 80, 60, 0.35); border: 1px solid #4c9a74; border-left: 4px solid #8fe0a5; border-radius: 6px; }
.finale-banner b { color: #8fe0a5; }
.finale-banner span { flex: 1 1 240px; color: #cdd7ea; font-size: 13px; }
.finale-list { margin: 6px 0 10px; padding-left: 18px; line-height: 1.6; }
.finale-list li { margin-bottom: 2px; }

/* ───────── 15단계: 화면 공통 기준과 다듬기 ─────────
   · 글자 위계: 화면 제목 18px(굵게) / 본문 15px / 보조·메타 12~13px — 컴퓨터·상점·망원경 화면이 같은 기준을 씀
   · 버튼: 주요 행동 = 채운 파랑(.mbtn), 보조 = 윤곽선(.mbtn.sub), 촬영 = 초록(.submit-btn), 비활성은 흐리게
   · 상태색: 초록 = 완료·성공, 파랑 = 도전 가능, 주황 = 부족·실패, 회색 점선 = 잠김
   · 컴퓨터·상점·망원경 화면에서 안내 카드는 화면 아래에 붙고, 화면이 카드 높이(--dock)만큼 줄어들어 버튼을 가리지 않음 */
:root {
  --dock: 0px;
  --fs-title: 18px; --fs-body: 15px; --fs-small: 13px;
  --m-title: #cfe1ff; --m-text: #b9d0f2; --m-dim: #8aa3c9;
  --m-line: #243a5e; --m-line-soft: #1a2d4d;
  --ok: #7fd0a4; --ok-line: #3b7a5a; --go: #9fc0ee; --go-line: #2f5a9c; --bad: #ffb38a; --bad-line: #6b3b2c;
  --gold: #d8c58a;
}
button:focus-visible, input:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
.mbtn:disabled, .submit-btn:disabled { opacity: 0.5; cursor: default; }
.submit-btn:disabled:hover { background: #7fd0a4; }
.coach[hidden], .coach.suppressed, .help-btn.suppressed { display: none !important; }

/* 컴퓨터·상점·도움말 화면 틀: 닫기 버튼은 머리줄 안에 있고, 화면은 안내 카드 높이만큼 줄어듦 */
.screen-computer { padding: 12px; padding-bottom: calc(12px + var(--dock)); }
.screen-computer .monitor { width: min(900px, 100%); height: min(640px, calc(100vh - 24px - var(--dock))); }
.monitor .body { padding: 1.1em 1.4em 1.4em; }
.monitor header { flex-wrap: wrap; gap: 6px 10px; }
.monitor .clock { font-size: 13px; white-space: nowrap; }
.monitor header .close-btn { position: static; margin-left: 4px; padding: 0.25em 0.7em; font: 13px var(--mono); color: var(--m-dim); background: transparent; border: 1px solid var(--m-line); border-radius: 3px; }
.monitor header .close-btn:hover { background: #123565; color: var(--m-title); }
.monitor .mission-title { font-size: var(--fs-title); font-weight: 700; color: var(--m-title); margin-bottom: 0.3em; }
.monitor .mhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 0.6em; }
.monitor .mhead .mission-title, .monitor .mhead .mstatus { margin: 0; }
.monitor .mhead .mbtn { margin: 0; }

/* 안내 카드: 컴퓨터·상점·망원경 화면에서는 화면 아래 가운데에 붙임 */
.coach[data-state="computer"], .coach[data-state="shop"], .coach[data-state="telescope"] {
  left: 50%; top: auto; bottom: 50px; transform: translateX(-50%);
  width: min(900px, calc(100vw - 24px));
  display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: end;
  padding: 8px 14px; font-size: 13.5px; line-height: 1.5;
}
.coach[data-state="computer"] > .coach-head, .coach[data-state="shop"] > .coach-head, .coach[data-state="telescope"] > .coach-head,
.coach[data-state="computer"] > .coach-bar, .coach[data-state="shop"] > .coach-bar, .coach[data-state="telescope"] > .coach-bar { grid-column: 1 / -1; }
.coach[data-state="computer"] > .coach-title, .coach[data-state="shop"] > .coach-title, .coach[data-state="telescope"] > .coach-title,
.coach[data-state="computer"] > .coach-text, .coach[data-state="shop"] > .coach-text, .coach[data-state="telescope"] > .coach-text,
.coach[data-state="computer"] > .coach-lock, .coach[data-state="shop"] > .coach-lock, .coach[data-state="telescope"] > .coach-lock { grid-column: 1; }
.coach[data-state="computer"] > .coach-actions, .coach[data-state="shop"] > .coach-actions, .coach[data-state="telescope"] > .coach-actions {
  grid-column: 2; grid-row: 3 / 6; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 6px;
}
.coach[data-state="telescope"] .coach-lock { display: none; }

/* 임무 목록 카드: 상태가 한눈에 구별됨 (도전 가능 = 파랑, 완료 = 초록, 잠김 = 회색 점선) */
.monitor .mcard { padding: 10px 14px 10px 16px; border-left-width: 4px; }
.monitor .mcard.available { border-color: var(--go-line); border-left-color: #5b9bf0; background: rgba(18, 53, 101, 0.35); }
.monitor .mcard.completed { border-color: #2d5c47; border-left-color: var(--ok); }
.monitor .mcard.locked { opacity: 1; border-style: dashed; border-color: #2a3550; border-left-color: #55637f; background: rgba(8, 16, 32, 0.5); }
.monitor .mcard.locked .mc-head b, .monitor .mcard.locked > p:not(.lock-note) { color: #7d8ba6; }
.monitor .mc-state { font-weight: 700; }
.monitor .mc-state.go { background: rgba(47, 90, 156, 0.4); color: var(--m-title); }
.monitor .mc-state.ok::before { content: "✓ "; }
.monitor .mc-meta { display: inline-block; margin: 0.2em 1.2em 0.2em 0; }
.monitor .mc-meta[data-mission-reward] { color: var(--gold); }
.monitor .lock-note { margin-top: 0.5em; padding: 0.35em 0.7em; border: 1px solid var(--bad-line); border-radius: 4px; background: rgba(107, 59, 44, 0.18); }
.monitor .mcard .mbtn { margin-top: 0.4em; }

/* 결과·기록: 촬영 이미지를 크게, 눈 비교 그림은 이미지 아래에 따로 */
.actions.top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 0.6em; }
.actions.top .mbtn { margin: 0; }
.result-banner { padding: 0.45em 0.8em; margin: 0 0 0.6em; }
.shot-cols { grid-template-columns: 340px 1fr; }
.shot-frame { width: 340px; height: 340px; }
.shot { width: 340px; height: 340px; max-width: 100%; }
.shot-fig figcaption { margin-top: 6px; font-size: 12px; }
.eye-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; text-align: left; }
.eye-row img { width: 72px; height: 72px; flex: none; border-radius: 50%; border: 2px solid #3b5f94; background: #02040a; display: block; }
.eye-row span { font-size: 12px; line-height: 1.45; color: var(--go); }
@media (max-width: 760px) { .shot-cols { grid-template-columns: 1fr; } .shot-frame { width: min(340px, 100%); height: auto; aspect-ratio: 1; } .shot { height: auto; aspect-ratio: 1; } }

/* 게임 완료 요약 */
.finale-head { margin: 0.2em 0 0.4em; padding-left: 12px; border-left: 4px solid var(--ok); }
.finale-head .mission-title { margin: 0; }
.finale-head .mstatus { margin: 0.2em 0 0; }
.finale-shots { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.3em 0 0.6em; }
.finale-shot { width: 92px; display: grid; justify-items: center; gap: 3px; padding: 6px 4px; font: 12px var(--mono); color: var(--m-dim); background: #0a1730; border: 1px solid var(--m-line-soft); border-radius: 4px; cursor: pointer; }
.finale-shot:hover { background: #12264a; }
.finale-shot img { width: 64px; height: 64px; border-radius: 50%; background: #02040a; }

/* 상점: 구매 전/후 차이와 부족한 이유 */
.monitor .shop-msg { top: 0; box-shadow: 0 6px 10px -6px #000; }
.monitor .mc-diff { font-size: 13px; color: var(--m-title); margin: 0.3em 0; }
.monitor .mc-diff b { color: var(--ok); }
.monitor .mc-need { font-size: 13px; color: var(--bad); margin: 0.3em 0; }

/* 접안렌즈: 시야 가장자리가 은은하게 어두워짐 (화면 덮개일 뿐이며 촬영 이미지에는 들어가지 않음) */
.fov::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 26px 4px rgba(0, 0, 0, 0.5); }

/* 결과 화면의 게임 완료 안내는 이미지를 밀어내지 않도록 한 줄로 줄임 */
.monitor .actions.top + .mstatus + .finale-banner, .monitor .finale-banner[data-finale-new] { margin: 0 0 0.6em; padding: 6px 10px; }
.monitor .finale-banner[data-finale-new] span { font-size: 12px; }
.monitor .finale-banner[data-finale-new] .mbtn { margin: 0; padding: 0.3em 0.9em; font-size: 13px; }

/* 망원경 화면: 조작 패널은 안내 카드 위쪽 공간 안에서 자체 스크롤 (창이 낮아도 카드 밑에 숨지 않음). 한 줄 배치(≤820px)에서는 화면 전체가 스크롤 */
.screen-telescope .telescope-info { max-height: calc(100vh - var(--dock) - 24px); overflow-y: auto; padding-right: 4px; }
@media (max-width: 820px) { .screen-telescope .telescope-info { max-height: none; overflow: visible; padding-right: 0; } }
/* 접안렌즈가 왼쪽 위 도구 상자(성도 보기·촬영하기)에 가려지지 않도록, 중간 너비 창에서는 접안렌즈 줄을 오른쪽으로 밂 */
@media (min-width: 960px) and (max-width: 1320px) { .screen-telescope { padding-left: 250px; } }

/* 촬영 중: 조작 패널을 흐리게 하고 눌리지 않게 함 (중복 입력 방지는 코드의 busy 검사가 따로 담당) */
.screen-telescope.exposing .telescope-info, .screen-telescope.exposing .tele-tools .chart-btn { opacity: 0.55; pointer-events: none; }
.screen-telescope.exposing .aim-state { opacity: 0.55; pointer-events: none; }
/* 조준선은 시야를 가리지 않도록 조금 옅게 */
.reticle .r-cross, .reticle .r-ticks { stroke: rgba(255, 154, 107, 0.55); stroke-width: 0.5; }

/* ───────── 17단계: 파인더, 배율 전환, 촬영 노출, 소리 ───────── */
.finder-reticle .f-edge { fill: none; stroke: rgba(160, 200, 255, 0.45); stroke-width: 0.8; }
.finder-reticle .f-cross { fill: none; stroke: rgba(255, 210, 122, 0.7); stroke-width: 0.6; }
.finder-reticle .f-main { fill: none; stroke: rgba(127, 208, 164, 0.9); stroke-width: 0.9; stroke-dasharray: 2.5 2; }
.finder-tag { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); padding: 3px 10px; font-size: 12px; line-height: 1.35; text-align: center; color: #ffd27a; background: rgba(3, 6, 12, 0.7); border: 1px solid rgba(255, 210, 122, 0.35); border-radius: 10px; pointer-events: none; }
.finder-tag small { color: #9fe0b4; font-size: 11px; }
.finder-tag[hidden] { display: none; }
.chart-btn.on { border-color: rgba(255, 210, 122, 0.7); background: rgba(255, 210, 122, 0.12); color: #ffe2a8; }
.submit-note.warn { color: #ffb38a; }
.screen-telescope.finder-on .fov { border-color: rgba(255, 210, 122, 0.35); }
.fov canvas { transform-origin: 50% 50%; }
.fov canvas.expose { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; opacity: 0; pointer-events: none; display: none; }
.fov canvas.expose.on { display: block; }
.submit-btn { transition: transform 0.08s ease, background 0.15s ease; }
.submit-btn:active:not(:disabled) { transform: scale(0.97); }
.screen-telescope.exposing .fov { box-shadow: 0 0 0 10px #0a0c12, 0 0 0 11px rgba(255, 106, 74, 0.55); }
.sound-btn { left: 120px; }
.sound-btn.off { color: #7f8aa0; }
.sound-btn.suppressed { display: none !important; }
@media (prefers-reduced-motion: reduce) { .submit-btn { transition: none; } }
.fit-fig { display: flex; gap: 12px; align-items: center; margin: 0.8em 0 0.2em; padding: 8px 10px; border: 1px solid var(--m-line-soft); border-radius: 4px; background: rgba(8, 22, 46, 0.5); }
.fit-fig svg { flex: none; }
.fit-fig figcaption { font-size: 13px; line-height: 1.55; color: var(--m-text); }
.fit-fig .fit-field { fill: #02040a; stroke: #3b5f94; stroke-width: 1.2; }
.fit-fig .fit-cross { stroke: rgba(255, 154, 107, 0.45); stroke-width: 0.5; fill: none; }
.fit-fig .fit-target { fill: rgba(127, 208, 164, 0.25); stroke: #7fd0a4; stroke-width: 1; }
.fit-fig .fit-target.dot { fill: #e6efff; stroke: none; }

/* 이동 안내 문구가 도움말·소리 버튼에 가리지 않도록 오른쪽으로 */
#hint { left: 214px; }

/* ───────── 18단계: 탐색 계획, 방향 표시, 포착 상태, 카메라 모드, 사진첩·도감 ───────── */
.monitor dl.plan { display: grid; grid-template-columns: 6.2em 1fr; gap: 0.35em 0.9em; margin: 0.2em 0 0.6em; font-size: 14px; line-height: 1.55; }
.monitor dl.plan dt { color: #6f8fbf; }
.monitor dl.plan dd { margin: 0; }
.monitor dl.plan .dim { font-size: 12px; }
.monitor .plan-steps { margin: 0 0 0.6em; padding-left: 1.4em; font-size: 13.5px; line-height: 1.6; color: var(--m-text); }
.monitor .hint-route { display: grid; gap: 2px; margin: 0.3em 0 0.2em; padding: 6px 9px; font-size: 13px; border-left: 3px solid #ffd27a; background: rgba(255, 210, 122, 0.06); }
.monitor .hint-route b { color: #ffd27a; font-size: 12px; }
.reticle.orient .o-tri { fill: rgba(255, 210, 122, 0.85); }
.reticle.orient .o-txt { fill: rgba(255, 210, 122, 0.9); font: 7px var(--font); text-anchor: middle; }
.route-note { margin: 0.5em 0 0; font-size: 12px; line-height: 1.45; color: #ffd9a8; }
.route-note:empty { display: none; }
.acq { margin-top: 0.6em; padding-top: 0.5em; border-top: 1px solid var(--line); }
.acq-line { font-size: 12.5px; line-height: 1.45; color: #cfd8ea; }
.acq-line[data-state="in"] { color: #9fc0ee; }
.acq-line[data-state="near"] { color: #ffd27a; }
.acq-line[data-state="center"] { color: #9fe0b4; }
.acq-line[data-state="ready"] { color: #7fd0a4; font-weight: 700; }
.acq-checks { list-style: none; margin: 0.35em 0 0; padding: 0; display: grid; gap: 1px; font-size: 12px; }
.acq-checks li.ok { color: #7fd0a4; }
.acq-checks li.no { color: #8a96ad; }
.reticle .r-zone.near { stroke: rgba(255, 210, 122, 0.95); }
.reticle .r-zone.hit { stroke: rgba(127, 230, 160, 1); stroke-width: 1.1; stroke-dasharray: none; }
.aim-state .badge.final { border-color: #ffd27a; color: #ffe2a8; }

/* 「망원경 모습」 작은 창 (18단계): 이 상자 자리는 투명하고, 그 아래 3D 캔버스의 같은 영역에 망원경 옆모습을 그림 */
.tele-pip { position: relative; height: 120px; border: 1px solid var(--line); border-radius: 4px; background: transparent; pointer-events: none; }
.screen-telescope { background: transparent; }
.tele-bg { position: fixed; inset: 0; background: rgba(1, 2, 6, 0.9); pointer-events: none; z-index: 0; }
.screen-telescope > .eyepiece, .screen-telescope > .telescope-info { position: relative; z-index: 1; }
.tele-pip span { position: absolute; left: 6px; top: 4px; font-size: 11px; color: #cfd8ea; text-shadow: 0 1px 2px #000; }
.tele-pip.off { visibility: hidden; }
.exp-sel { display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: rgba(3, 6, 12, 0.78); border: 1px solid rgba(240, 180, 207, 0.4); border-radius: 4px; }
.exp-sel[hidden] { display: none; }
.exp-sel span { font-size: 12px; color: #f0b4cf; margin-right: 2px; }
.exp-sel button { flex: 1; display: grid; gap: 0; padding: 3px 0; font: 12px var(--font); color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.exp-sel button small { font-size: 10.5px; color: var(--dim); }
.exp-sel button.on { border-color: #f0b4cf; background: rgba(240, 180, 207, 0.15); }
.camera-btn.on { border-color: rgba(240, 180, 207, 0.8); background: rgba(240, 180, 207, 0.12); color: #ffd6e8; }
.cam-hud { position: absolute; inset: 9%; pointer-events: none; z-index: 1; }
.cam-hud[hidden] { display: none; }
.cam-hud .cb { position: absolute; width: 22px; height: 22px; border-color: rgba(240, 180, 207, 0.85); border-style: solid; }
.cam-hud .tl { left: 0; top: 0; border-width: 2px 0 0 2px; } .cam-hud .tr { right: 0; top: 0; border-width: 2px 2px 0 0; }
.cam-hud .bl { left: 0; bottom: 0; border-width: 0 0 2px 2px; } .cam-hud .br { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.cam-hud .cam-info { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; color: #ffd6e8; background: rgba(3, 6, 12, 0.65); padding: 1px 8px; border-radius: 8px; }
.cam-hud .cam-center { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1px solid rgba(240, 180, 207, 0.7); border-radius: 2px; }
.screen-telescope.camera-on .fov { border-color: rgba(240, 180, 207, 0.55); }
.screen-telescope.camera-on .reticle:not(.orient):not(.finder-reticle) .r-cross { stroke: rgba(240, 180, 207, 0.35); }

/* 사진첩·도감 (18단계) */
.monitor .album-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.4em 0 0.8em; }
.chipbtn { font: 12.5px var(--mono); color: var(--m-dim); background: transparent; border: 1px solid var(--m-line); border-radius: 12px; padding: 3px 11px; cursor: pointer; }
.chipbtn.on { color: var(--m-title); background: #123565; border-color: var(--go-line); }
.monitor .photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.photo-card { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; font: 12.5px var(--mono); color: var(--m-text); background: #050a16; border: 1px solid var(--m-line-soft); border-radius: 6px; cursor: pointer; }
.photo-card:hover { border-color: var(--go-line); background: #0a1730; }
.photo-card.fav { border-color: #c9a24a; }
.photo-card img { width: 132px; height: 132px; border-radius: 50%; background: #02040a; box-shadow: 0 0 0 3px #0b1222, 0 0 0 4px #2a3c5e; }
.photo-card .pc-name { font-weight: 700; color: var(--m-title); }
.photo-card .pc-meta { font-size: 11.5px; color: var(--m-dim); text-align: center; }
.shot.big { box-shadow: 0 0 0 4px #0b1222, 0 0 0 5px #3b5f94; }
.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-strip .thumb { display: grid; justify-items: center; gap: 2px; padding: 4px; font: 11px var(--mono); color: var(--m-dim); background: #0a1730; border: 1px solid var(--m-line-soft); border-radius: 4px; cursor: pointer; }
.photo-strip .thumb img { border-radius: 50%; background: #02040a; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare .cmp-col { margin: 0; text-align: center; }
.compare .cmp-col .shot { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; }
.compare .photo-meta { text-align: left; font-size: 12.5px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.monitor .note.warn { color: var(--bad); }
.codex-progress { position: relative; height: 22px; margin: 0.3em 0 0.6em; border: 1px solid var(--m-line); border-radius: 11px; overflow: hidden; background: #050a16; }
.codex-progress i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #2c6e55, #4fb487); }
.codex-progress span { position: relative; z-index: 1; display: block; text-align: center; font-size: 12.5px; line-height: 20px; color: #eaf1ff; }
.monitor .codex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.codex-card { width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 6px 10px; font: 12.5px var(--mono); color: var(--m-text); background: linear-gradient(180deg, #0c1a33, #060c18); border: 1px solid #2c4a72; border-radius: 8px; cursor: pointer; }
.codex-card:hover { border-color: #5b9bf0; }
.codex-card .cc-img { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; background: #02040a; box-shadow: 0 0 0 3px #0b1222, 0 0 0 4px #c9a24a; overflow: hidden; }
.codex-card .cc-img img { width: 110px; height: 110px; }
.codex-card .cc-img span { font-size: 30px; color: #c9a24a; }
.codex-card b { color: var(--m-title); }
.codex-card .cc-kind { font-size: 11.5px; color: var(--gold); }
.codex-card .cc-hint { font-size: 11.5px; color: var(--m-dim); text-align: center; }
.codex-card.unknown { cursor: default; border-style: dashed; border-color: #2a3550; background: #070b14; }
.codex-card.unknown .cc-img { box-shadow: 0 0 0 3px #0b1222, 0 0 0 4px #2a3550; }
.codex-card.unknown .cc-img span { color: #33415c; font-size: 40px; }
.codex-card.unknown b { color: #6d7a94; }
.discovery { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 0.6em; padding: 9px 12px; border: 1px solid #c9a24a; border-radius: 6px; background: linear-gradient(90deg, rgba(201, 162, 74, 0.22), rgba(201, 162, 74, 0.05)); animation: disc-in 0.6s ease-out; }
.discovery .disc-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #1b1405; background: #e8c66a; border-radius: 3px; padding: 1px 6px; }
.discovery b { font-size: 17px; color: #ffe2a8; }
.discovery span:not(.disc-tag) { color: #e9dcc0; font-size: 13px; flex: 1 1 200px; }
.discovery .mbtn { margin: 0; }
@keyframes disc-in { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .discovery { animation: none; } }
.shot.fresh { animation-duration: 1.6s; }
.monitor .mc-unlock { font-size: 13px; line-height: 1.55; color: #cfe6d8; margin: 0.3em 0; padding-left: 8px; border-left: 2px solid var(--ok-line); }

.tabs button { padding: 0.25em 0.6em; }
.monitor .clock::before { content: "◷ "; color: #5d7194; }
/* 좁은 창(교실 저해상도·확대 150% 등): 왼쪽 도구 열을 줄여 접안렌즈 아래 속도 표시와 겹치지 않게 */
@media (max-width: 860px) {
  .tele-tools { width: 196px; left: 14px; }
  .tele-tools .mission-box { padding: 0.6em; font-size: 12.5px; }
  .tele-tools .route-note { display: none; }
  .aim-state { padding-left: 200px; justify-content: flex-start; gap: 8px; } /* 도구 열 오른쪽으로 비켜 줄 바꿈 */
  .aim-state [data-reticle-note] { display: none; } /* 같은 안내가 왼쪽 상태 칸에 있음 */
}
@media (max-height: 520px) { .tele-tools .acq-checks { display: none; } }
/* 18단계: 왼쪽 상태 칸이 길어져 성도 팝업(M)을 가리던 문제 — 열려 있는 동안은 성도가 위 */
.chart-pop { z-index: 4; }
.chip.exp { border-color: #6a5a8a; color: #d6c4f0; } /* 18단계: 카메라 노출 칩 (긴 노출 칩 .cam 과 구분) */

/* ───────── 19단계: 관측 지령(미션 브리핑) ─────────
   위계: 미션 헤더 → 임무 목표 → [필수 조건 · 권장 · 보상] [탐색 순서 · 위치 단서 · 힌트] [성도]
   구역마다 이름 라벨(필수·권장·경로·단서·힌트)과 기호를 함께 써서 색만으로 구분하지 않음. 애니메이션·필터 없음 */
.screen-computer .monitor { width: min(1040px, 100%); }
.monitor .brief-top { margin: 0 0 0.4em; }
.brief-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 16px; padding: 10px 14px; margin: 0 0 10px;
  border: 1px solid var(--m-line); border-left: 3px solid var(--gold); border-radius: 6px;
  background: linear-gradient(100deg, rgba(216, 197, 138, 0.10), rgba(12, 26, 50, 0.6) 45%, rgba(7, 16, 31, 0.2)); }
.brief-head .bh-no { display: grid; justify-items: center; line-height: 1; font-family: var(--mono); color: var(--gold); }
.brief-head .bh-no small { font-size: 10px; letter-spacing: 0.18em; color: #a89a6c; }
.brief-head .bh-no b { font-size: 30px; font-weight: 700; }
.brief-head .bh-kicker { font-size: 12px; color: var(--m-dim); letter-spacing: 0.06em; }
.brief-head .mission-title { margin: 1px 0 4px; font-size: 20px; }
.brief-head .bh-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.brief-head .bh-tag { font-size: 12px; color: var(--m-text); padding: 1px 8px; border: 1px solid var(--m-line); border-radius: 10px; background: rgba(7, 16, 31, 0.6); }
.brief-head .mstatus { margin: 0; padding: 3px 10px; border: 1px solid var(--m-line); border-radius: 12px; font-size: 13px; white-space: nowrap; }
.brief-objective { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: 4px; background: rgba(159, 192, 238, 0.07); }
.brief-objective .lbl, .brief-reward .lbl { flex: none; font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: 0.05em; }
.brief-objective .txt { font-size: 16px; line-height: 1.55; color: #e6eefc; font-weight: 600; }
.brief-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 272px; gap: 14px 18px; align-items: start; }
.brief-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.brief-sec { min-width: 0; }
.monitor .brief-sec .sec-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 6px; font-size: 14px; color: var(--m-title); letter-spacing: 0; }
.monitor .brief-sec .sec-h small { font-size: 12px; font-weight: 400; color: var(--m-dim); }
.monitor .brief-sec .sec-h .link-btn { margin-left: auto; font-size: 12px; }
.brief-sec .tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 3px; letter-spacing: 0.04em; }
.tag.must { color: #07101f; background: var(--go); }
.tag.tag-rec { color: var(--m-dim); border: 1px dashed var(--m-dim); }
.tag.nav { color: #07101f; background: var(--gold); }
.tag.hint { color: var(--m-text); border: 1px solid var(--m-line); }
.monitor .must-list, .monitor .rec-list, .monitor .route-steps { list-style: none; margin: 0; padding: 0; line-height: 1.5; }
.must-list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--m-line-soft); }
.must-list li:last-child { border-bottom: 0; }
.must-list i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--go-line); border-radius: 50%; font-size: 12px; color: var(--go); }
.must-list b { display: block; font-size: 14px; color: var(--m-title); }
.must-list span { display: block; font-size: 12.5px; color: var(--m-dim); line-height: 1.45; }
.must-list .now { font-style: normal; font-size: 12px; white-space: nowrap; color: var(--m-dim); }
.must-list .now.ok { color: var(--ok); }
.brief-sec.recommend { padding: 8px 10px; border: 1px dashed var(--m-line); border-radius: 6px; }
.rec-list li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.5; color: var(--m-text); }
.rec-list li::before { content: "◇"; position: absolute; left: 0; color: var(--m-dim); font-size: 10px; top: 3px; }
.brief-reward { display: flex; gap: 8px; align-items: baseline; margin: 0; font-size: 12.5px; color: var(--m-dim); }
.brief-col .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.brief-col .actions .mbtn { margin: 0; }
.monitor .small { font-size: 12px; }
.route-steps li { position: relative; display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; padding: 6px 8px 6px 0; }
.route-steps li::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: -6px; border-left: 1px dashed var(--m-line); }
.route-steps li:last-child::before { display: none; }
.route-steps .n { display: grid; place-items: center; width: 28px; height: 24px; font: 700 12px var(--mono); color: var(--m-dim); border: 1px solid var(--m-line); border-radius: 4px; background: #07101f; position: relative; }
.route-steps b { display: block; font-size: 14px; color: var(--m-text); }
.route-steps .d { display: block; font-size: 12.5px; line-height: 1.45; color: var(--m-dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.route-steps em { font-style: normal; font-size: 11px; white-space: nowrap; color: var(--m-dim); align-self: start; padding-top: 4px; }
.route-steps li[data-state="current"] { background: rgba(216, 197, 138, 0.09); border-radius: 4px; }
.route-steps li[data-state="current"] .n { color: #07101f; background: var(--gold); border-color: var(--gold); }
.route-steps li[data-state="current"] b { color: #fff3cf; }
.route-steps li[data-state="current"] .d { -webkit-line-clamp: 4; color: var(--m-text); }
.route-steps li[data-state="current"] em { color: var(--gold); }
.route-steps li[data-state="done"] .n { color: var(--ok); border-color: var(--ok-line); }
.route-steps li[data-state="done"] .n::after { content: "✓"; position: absolute; right: -5px; top: -6px; font-size: 11px; color: var(--ok); }
.route-steps li[data-state="done"] b { color: var(--m-dim); }
.route-steps li[data-state="done"] em { color: var(--ok); }
.clue-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.clue-fig { margin: 0; }
.clue-fig svg { width: 100%; height: auto; display: block; }
.clue-fig .bg { fill: #050b17; stroke: var(--m-line); }
.clue-fig .axis { fill: #5d7194; font-size: 9px; }
.clue-fig .st { fill: #dfe8ff; }
.clue-fig .st.context { fill: #7f8aa0; }
.clue-fig .ring { fill: none; stroke: var(--gold); stroke-width: 1; }
.clue-fig .leg { stroke: #9fc0ee; stroke-width: 1; stroke-dasharray: 3 3; }
.clue-fig .tail { stroke: var(--gold); stroke-width: 1.4; }
.clue-fig .ah { fill: var(--gold); }
.clue-fig .tl { fill: var(--gold); font-size: 11px; font-weight: 700; }
.clue-fig text.anchor { fill: var(--gold); font-size: 10.5px; }
.clue-fig text.waypoint { fill: #cfe1ff; font-size: 10.5px; }
.clue-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12.5px; line-height: 1.45; }
.clue-dl dt { color: #6f8fbf; white-space: nowrap; }
.clue-dl dd { margin: 0; color: var(--m-text); }
.hintbox { padding: 8px 10px; border: 1px solid var(--m-line-soft); border-radius: 6px; background: rgba(7, 16, 31, 0.5); }
.monitor .hintbox .hints { margin: 0; padding-left: 0; list-style: none; }
.hintbox .hints li { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; }
.hintbox .hints .hl { display: block; font-size: 11.5px; font-weight: 700; color: var(--m-dim); }
.hintbox.collapsed .hints li:not(:first-child) { display: none; }
.hint-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hint-next .mbtn { margin: 0; }
.brief-grid .chart-fig figcaption { text-align: left; }
@media (max-width: 1000px) {
  .brief-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .brief-grid .chart-fig { grid-column: 1 / -1; width: min(320px, 100%); justify-self: center; }
}
@media (max-width: 700px) {
  .brief-grid { grid-template-columns: minmax(0, 1fr); }
  .brief-head { grid-template-columns: auto 1fr; }
  .brief-head .mstatus { grid-column: 1 / -1; justify-self: start; }
  .brief-objective { flex-direction: column; gap: 2px; }
  .brief-objective .txt { font-size: 15px; }
}
/* 망원경 화면: 지금 탐색 단계 */
.mission-box .route-step { margin: 6px 0 0; font-size: 12.5px; color: var(--gold); }
/* 19단계: 새로운 발견 연출 (차례로 나타남) · 사진첩 백업·되돌리기 · 도감 구역 */
.disc-seq { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; width: 100%; }
.disc-seq li { font-size: 12px; color: var(--m-text); padding: 1px 8px; border: 1px solid rgba(201, 162, 74, 0.5); border-radius: 10px; opacity: 0; animation: disc-step 0.35s ease-out forwards; }
.disc-seq li + li::before { content: "→ "; color: #a89a6c; }
.disc-seq li:nth-child(1) { animation-delay: 0.1s; }
.disc-seq li:nth-child(2) { animation-delay: 0.5s; }
.disc-seq li:nth-child(3) { animation-delay: 0.9s; }
.disc-seq li:nth-child(4) { animation-delay: 1.3s; }
.disc-seq li.hot { color: #fff3cf; background: rgba(201, 162, 74, 0.25); font-weight: 700; }
.disc-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.disc-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; width: min(320px, 100%); font-size: 12px; color: var(--m-text); }
.disc-progress i { position: relative; height: 6px; border-radius: 3px; background: #1a2d4d; overflow: hidden; }
.disc-progress i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--to); background: var(--gold); animation: disc-fill 0.8s 1.6s ease-out backwards; }
@keyframes disc-step { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes disc-fill { from { width: var(--from); } to { width: var(--to); } }
@media (prefers-reduced-motion: reduce) { .disc-seq li { animation: none; opacity: 1; } .disc-progress i::after { animation: none; } }
.undo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0.4em 0; padding: 6px 10px; border: 1px solid var(--m-line); border-radius: 4px; font-size: 13px; color: var(--m-text); background: rgba(159, 192, 238, 0.07); }
.undo-bar .mbtn { margin: 0; }
.backup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 1em 0 0; padding-top: 0.8em; border-top: 1px solid var(--m-line-soft); }
.backup-row .mbtn { margin: 0; }
.backup-msg { font-size: 12.5px; color: var(--ok); width: 100%; }
.cx-sec { padding: 8px 12px 10px; margin: 0 0 10px; border-radius: 6px; }
.cx-sec h3 { margin-top: 0.2em !important; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cx-sec.sci { border: 1px solid var(--m-line-soft); }
.cx-sec.mine { border: 1px solid rgba(159, 192, 238, 0.35); background: rgba(159, 192, 238, 0.06); }
.learn { font-size: 13px; line-height: 1.55; color: var(--m-text); margin: 0.4em 0 0; }
.learn b { color: var(--gold); margin-right: 4px; }
.memo { display: grid; gap: 4px; margin-top: 8px; font-size: 13px; color: var(--m-text); }
.memo textarea { font: 14px var(--font); color: var(--text); background: #050b17; border: 1px solid var(--m-line); border-radius: 4px; padding: 6px 8px; resize: vertical; user-select: text; -webkit-user-select: text; }
.ok-text { color: var(--ok); }
/* 19단계: 음량 */
.volume-box { position: fixed; left: 212px; bottom: 14px; z-index: 41; display: flex; align-items: center; gap: 6px; padding: 5px 9px; font-size: 12px; color: #8aa3c9; background: rgba(6, 12, 26, 0.88); border: 1px solid #2d4672; border-radius: 6px; }
.volume-box[hidden], .volume-box.suppressed { display: none !important; }
.volume-box input { width: 84px; accent-color: #9fc0ee; }
/* 19단계 촬영 연출: 셔터 막(위·아래) · 작은 사진 미리보기 · 버튼 눌림 */
.shutter { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 4; }
.shutter .sb { position: absolute; left: 0; right: 0; height: 50%; background: #05070c; transform: translateY(-101%); }
.shutter .sb.bottom { top: 50%; transform: translateY(101%); }
.shutter.snap .sb.top { animation: shut-top 0.24s ease-in-out; }
.shutter.snap .sb.bottom { animation: shut-bottom 0.24s ease-in-out; }
@keyframes shut-top { 0% { transform: translateY(-101%); } 45%, 55% { transform: translateY(0); } 100% { transform: translateY(-101%); } }
@keyframes shut-bottom { 0% { transform: translateY(101%); } 45%, 55% { transform: translateY(0); } 100% { transform: translateY(101%); } }
.shot-thumb { position: absolute; left: 50%; margin-left: -52px; top: 22%; z-index: 5; display: grid; justify-items: center; gap: 2px; padding: 4px; background: #e8e2d0; border-radius: 3px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); animation: thumb-in 0.45s ease-out; }
.shot-thumb[hidden] { display: none; }
.shot-thumb img { display: block; width: 96px; height: 96px; border-radius: 2px; }
.shot-thumb span { font-size: 11px; color: #2a2a2a; }
.shot-thumb.still { animation: none; }
@keyframes thumb-in { from { opacity: 0; transform: translate(-60px, -40px) scale(1.6) rotate(-6deg); } to { opacity: 1; transform: rotate(-3deg); } }
.submit-btn.pressed { animation: press 0.18s ease-out; }
@keyframes press { 0% { transform: scale(0.95); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .shutter.snap .sb.top, .shutter.snap .sb.bottom, .shot-thumb, .submit-btn.pressed { animation: none; } }
/* 19단계: 망원경 화면이 접안렌즈 자리에서 커져 나옴 (뒤에서는 시점이 접안렌즈로 다가감) */
.screen-telescope.approach { transform-origin: var(--ox, 50%) var(--oy, 50%); animation: tele-approach 0.45s ease-out; }
@keyframes tele-approach { from { opacity: 0; transform: scale(0.18); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen-telescope.approach { animation: none; } }
.brief-head .bh-side { display: grid; justify-items: end; gap: 8px; }
.brief-head .bh-side .mbtn { margin: 0; padding: 0.5em 1.6em; font-size: 15px; }
@media (max-width: 700px) { .brief-head .bh-side { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; align-items: center; } }
.hint-next .dim { font-size: 12.5px; }
#hint { left: 362px; } /* 19단계: 음량 막대 오른쪽으로 */
@media (max-width: 860px) { #hint { display: none; } } /* 좁은 창: 같은 안내가 도움말(H)에 있음 */

/* ───────── 20단계: 신규 플레이어 경험·UI 정리 ───────── */
/* 마우스 잠금이 풀렸을 때: 화면을 어둡게 덮거나 조작 키 목록을 띄우지 않고, 아래쪽에 작은 안내만 (어디를 눌러도 다시 잠금) */
.overlay-resume { background: transparent; align-items: flex-end; justify-content: center; cursor: pointer; }
.resume-pill { margin: 0 auto 64px; padding: 8px 16px; font-size: 14px; color: #cfe1ff; background: rgba(6, 12, 26, 0.82); border: 1px solid #2d4672; border-radius: 18px; pointer-events: none; }
.resume-pill b { color: #fff3cf; font-weight: 600; }
/* 20단계: 관측 컴퓨터 메뉴 — 아이콘·이름·보조 정보가 있는 큰 버튼. 같은 크기·같은 선 굵기, 선택된 메뉴는 아래 금색 막대와 밝은 배경 */
.screen-computer .monitor { height: min(700px, calc(100vh - 24px - var(--dock))); }
.comp-nav { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 8px; padding: 10px 14px 0; border-bottom: 1px solid var(--m-line); background: linear-gradient(180deg, rgba(18, 38, 72, 0.55), rgba(7, 16, 31, 0)); }
.comp-nav button { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; min-height: 52px; padding: 7px 12px 9px; text-align: left; font: inherit; color: var(--m-dim); background: rgba(7, 16, 31, 0.55); border: 1px solid var(--m-line); border-bottom: 0; border-radius: 8px 8px 0 0; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.comp-nav .cn-icon { grid-row: 1 / 3; width: 26px; height: 26px; }
.comp-nav .cn-label { font-size: 15px; font-weight: 700; color: var(--m-text); }
.comp-nav .cn-sub { font-size: 11.5px; color: var(--m-dim); min-height: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-nav button:hover { background: #10264a; color: var(--m-title); }
.comp-nav button:active { transform: translateY(1px); }
.comp-nav button.on { color: var(--gold); background: #0f2342; border-color: #3a5a8c; }
.comp-nav button.on .cn-label { color: #fff3cf; }
.comp-nav button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--gold); }
.comp-nav .cn-main .cn-label { font-size: 16px; }
.comp-nav .cn-collect .cn-icon { color: #c9b27a; }
@media (max-width: 760px) {
  .comp-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px 8px 0; }
  .comp-nav button { grid-template-columns: 1fr; justify-items: center; min-height: 48px; padding: 5px 4px 7px; text-align: center; row-gap: 2px; }
  .comp-nav .cn-icon { grid-row: auto; width: 22px; height: 22px; }
  .comp-nav .cn-label, .comp-nav .cn-main .cn-label { font-size: 12.5px; }
  .comp-nav .cn-sub { display: none; }
}
@media (max-height: 520px) { .comp-nav button { min-height: 40px; padding-top: 4px; padding-bottom: 5px; } .comp-nav .cn-sub { display: none; } .comp-nav .cn-icon { width: 20px; height: 20px; } }
@media (prefers-reduced-motion: reduce) { .comp-nav button { transition: none; } }
/* 20단계 지령: 큰 임무 목표 + 대상의 특징 → [필수 조건 · 탐색 순서 · 더 보기] [성도]. 펼쳐 보는 칸은 한 번에 하나 */
.brief-hero { margin: 0 0 14px; padding: 12px 16px; border-radius: 6px; background: linear-gradient(100deg, rgba(159, 192, 238, 0.10), rgba(159, 192, 238, 0.02)); border: 1px solid var(--m-line-soft); }
.brief-hero .brief-objective { display: block; margin: 0; padding: 0; background: none; }
.brief-hero .brief-objective .lbl, .brief-trait .lbl { display: block; margin-bottom: 2px; }
.brief-hero .brief-objective .txt { font-size: 19px; line-height: 1.5; }
.brief-trait { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--m-text); }
.brief-trait .lbl { font-size: 11.5px; font-weight: 700; color: var(--m-dim); letter-spacing: 0.04em; }
.brief-grid.b20 { grid-template-columns: minmax(0, 1fr) 320px; gap: 16px 22px; }
.brief-col.main { gap: 14px; }
/* 필수 조건: 아이콘 + 짧은 이름의 칩 (설명은 마우스를 올리면) */
.b20 .must-list { display: flex; flex-wrap: wrap; gap: 6px; }
.b20 .must-list li { display: inline-flex; grid-template-columns: none; gap: 7px; align-items: center; padding: 6px 10px 6px 7px; border: 1px solid var(--go-line); border-radius: 18px; background: rgba(47, 90, 156, 0.12); }
.b20 .must-list li:last-child { border-bottom: 1px solid var(--go-line); }
.b20 .must-list li > div > span { display: none; }
.b20 .must-list b { font-size: 14px; }
.b20 .must-list i { width: 20px; height: 20px; font-size: 11px; }
.b20 .must-list li[data-now="ok"] { border-color: var(--ok-line); background: rgba(59, 122, 90, 0.18); }
.b20 .must-list li[data-now="ok"] i { color: var(--ok); border-color: var(--ok-line); }
.b20 .must-list .now { font-size: 11.5px; }
/* 탐색 순서: 한 줄 띠 + 고른 단계 설명 */
.monitor .route-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.route-strip li { position: relative; min-width: 0; }
.route-strip li > .d { display: none; }
.route-strip button { width: 100%; display: grid; justify-items: start; gap: 2px; padding: 6px 8px 7px; text-align: left; font: inherit; color: var(--m-dim); background: rgba(7, 16, 31, 0.6); border: 1px solid var(--m-line); border-radius: 4px; cursor: pointer; }
.route-strip button:hover { background: #10264a; }
.route-strip .n { font: 700 12px var(--mono); color: var(--m-dim); }
.route-strip b { font-size: 12.5px; line-height: 1.3; color: var(--m-text); }
.route-strip em { position: absolute; right: 6px; top: 5px; font-style: normal; font-size: 10.5px; color: var(--m-dim); }
.route-strip li[data-state="current"] button { border-color: var(--gold); background: rgba(216, 197, 138, 0.12); }
.route-strip li[data-state="current"] .n, .route-strip li[data-state="current"] em { color: var(--gold); }
.route-strip li[data-state="current"] b { color: #fff3cf; }
.route-strip li[data-state="done"] .n, .route-strip li[data-state="done"] em { color: var(--ok); }
.route-strip li[data-state="done"] b { color: var(--m-dim); }
.route-strip li[data-selected="1"] button { box-shadow: inset 0 -3px 0 var(--gold); }
.step-detail { margin-top: 6px; padding: 8px 12px; border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; background: rgba(216, 197, 138, 0.06); font-size: 13.5px; line-height: 1.55; color: var(--m-text); }
.step-detail b { display: block; font-size: 12px; color: var(--gold); margin-bottom: 2px; }
/* 더 보기 줄 */
.disc-row { display: flex; flex-wrap: wrap; gap: 6px; }
.disc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--m-text); background: transparent; border: 1px solid var(--m-line); border-radius: 16px; cursor: pointer; }
.disc-btn i { font-style: normal; font-size: 10px; color: var(--m-dim); }
.disc-btn:hover { background: #10264a; }
.disc-btn.on { border-color: #3a5a8c; background: #0f2342; color: #fff; }
.disc-btn.hint-next-btn { border-style: dashed; color: var(--m-dim); }
.disc-panel { padding: 10px 12px; border: 1px solid var(--m-line-soft); border-radius: 6px; background: rgba(5, 11, 23, 0.6); }
.disc-panel .brief-sec.recommend, .disc-panel .hintbox { padding: 0; border: 0; background: none; }
.disc-panel .clue-row { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: start; gap: 12px; }
.b20 .chart-fig .mbtn { margin-top: 4px; }
.bh-tag.reward { color: var(--gold); border-color: rgba(216, 197, 138, 0.45); }
/* 큰 성도 */
.chart-big { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(2, 4, 10, 0.78); }
.chart-big .cb-inner { width: min(660px, 94vw, calc(100vh - 40px)); padding: 12px 14px 8px; border: 1px solid var(--m-line); border-radius: 8px; background: #07101f; }
.chart-big .cb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.chart-big .cb-head .mbtn { margin: 0 0 0 auto; }
.chart-big canvas { width: 100%; height: auto; display: block; }
.chart-big .aim-line { text-align: center; font-size: 13px; color: #cfe1ff; margin: 6px 0 0; }
@media (max-width: 1000px) { .brief-grid.b20 { grid-template-columns: minmax(0, 1fr); } .brief-grid.b20 .chart-fig { grid-column: auto; width: min(320px, 100%); justify-self: center; } .monitor .route-strip { grid-template-columns: repeat(5, minmax(96px, 1fr)); overflow-x: auto; } }
@media (max-width: 700px) { .disc-panel .clue-row { grid-template-columns: 1fr; } .brief-hero .brief-objective .txt { font-size: 16px; } }
/* 20단계 망원경 화면: 접안렌즈가 화면의 중심이자 가장 큰 영역. 왼쪽 도구 칸 · 가운데 시야 · 오른쪽 좁은 조작 칸 */
.screen-telescope { grid-template-columns: auto 250px; gap: 24px; }
.fov { width: min(calc(100vh - var(--dock) - 110px), calc(100vw - 560px)); min-width: 300px; }
@media (min-width: 960px) and (max-width: 1320px) { .screen-telescope { padding-left: 252px; padding-right: 12px; } }
.screen-telescope .telescope-info { font-size: 14px; }
.screen-telescope .telescope-info .title { margin-bottom: 0.6em; }
.screen-telescope .telescope-info dl { grid-template-columns: 4.2em 1fr; gap: 0.35em 0.6em; padding: 0.6em 0; margin-bottom: 0.8em; font-size: 14px; }
.screen-telescope .ctl { margin-bottom: 0.7em; }
.screen-telescope .seg button { padding: 0.35em 0.3em; }
@media (max-width: 820px) { .fov { width: min(calc(100vh - var(--dock) - 120px), calc(100vw - 32px)); min-width: 0; } }
/* 시야 크게 보기 (V): 양쪽 칸을 접고 시야를 화면 대부분으로 */
.screen-telescope.zoom { grid-template-columns: auto; padding-left: 0 !important; padding-right: 0; }
.screen-telescope.zoom .telescope-info, .screen-telescope.zoom .tele-tools { display: none; }
.screen-telescope.zoom .fov { width: min(calc(100vh - var(--dock) - 70px), calc(100vw - 40px)); }
.zoom-hud { position: fixed; z-index: 3; left: 14px; top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 10px; font-size: 13px; color: var(--text); background: rgba(3, 6, 12, 0.8); border: 1px solid var(--line); border-radius: 6px; }
.zoom-hud[hidden] { display: none; }
/* 관측 중 간단한 지령 (왼쪽 칸) */
.mission-box .mb-objective { margin: 0.2em 0 0.4em; font-size: 13px; line-height: 1.5; color: #e6eefc; }
.mission-box .mb-next { margin: 0 0 0.5em; padding: 5px 8px; font-size: 12.5px; line-height: 1.5; color: var(--text); border-left: 2px solid var(--gold); background: rgba(216, 197, 138, 0.07); }
.mission-box .mb-next b { display: block; font-size: 11px; color: var(--gold); }
.mission-box .submit-note { display: none; }
.brief-btn { border-color: rgba(216, 197, 138, 0.55) !important; color: #fff3cf !important; }
/* 관측 중 전체 지령 (B): 망원경 화면 위에 겹침. 닫으면 그대로 돌아옴 */
.tele-brief { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(2, 4, 10, 0.72); }
.tele-brief[hidden] { display: none; }
.tele-brief .tb-inner { width: min(960px, 100%); max-height: calc(100vh - 32px - var(--dock)); overflow-y: auto; padding: 14px 18px; background: #07101f; border: 1px solid #2f4a74; border-radius: 8px; color: var(--m-text, #b9d0f2); }
.tele-brief .tb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 10px; }
.tele-brief .tb-head b { font-size: 17px; color: #cfe1ff; }
.tele-brief .tb-head .mini { margin-left: auto; }
.tele-brief .tb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; }
.tele-brief .tb-cols > div { display: grid; gap: 12px; align-content: start; }
.tele-brief .brief-sec .sec-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; font-size: 14px; color: #cfe1ff; }
.tele-brief .brief-sec .sec-h small { font-size: 12px; color: var(--m-dim); font-weight: 400; }
.tele-brief .must-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tele-brief .must-list li { display: inline-flex; gap: 7px; align-items: center; padding: 6px 10px 6px 7px; border: 1px solid var(--go-line); border-radius: 18px; }
.tele-brief .must-list li > div > span { display: none; }
.tele-brief .must-list li[data-now="ok"] { border-color: var(--ok-line); background: rgba(59, 122, 90, 0.18); }
.tele-brief .must-list i { font-style: normal; color: var(--go); }
.tele-brief .must-list .now { font-style: normal; font-size: 11.5px; color: var(--m-dim); }
.tele-brief .must-list .now.ok { color: var(--ok); }
.tele-brief .route-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.tele-brief .route-strip button { cursor: default; }
.tele-brief .hints { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.55; }
.tele-brief .hints .hl { display: block; font-size: 11.5px; font-weight: 700; color: var(--m-dim); }
.tele-brief .brief-hero { margin-bottom: 12px; }
@media (max-width: 760px) { .tele-brief .tb-cols { grid-template-columns: 1fr; } }
/* 20단계 튜토리얼: 진행 표시(첫 관측 · n / 9)와 막힌 행동 안내 */
.coach-head .coach-count { font-family: var(--mono); color: #ffd27a; margin-right: 8px; }
.tut-toast { position: fixed; z-index: 60; left: 50%; top: 18px; transform: translateX(-50%); max-width: min(520px, calc(100vw - 32px)); padding: 8px 14px; font-size: 14px; line-height: 1.5; color: #fff3cf; background: rgba(20, 16, 6, 0.92); border: 1px solid rgba(255, 210, 122, 0.6); border-radius: 6px; pointer-events: none; }
.tut-toast[hidden] { display: none; }
/* 20단계 지령 높이 줄이기: 목록 버튼은 헤더 안, 목표·특징은 왼쪽 칸 맨 위(성도 옆) */
.brief-head { padding: 8px 14px; margin-bottom: 12px; }
.brief-head .bh-no b { font-size: 26px; }
.brief-head .bh-kicker { display: flex; align-items: center; gap: 10px; }
.brief-head .bh-back { margin: 0 !important; padding: 0.1em 0.6em !important; }
.brief-head .mission-title { font-size: 19px; margin: 2px 0 4px; }
.b20 .brief-hero { margin: 0; padding: 10px 14px; }
.b20 .brief-hero .brief-objective .txt { font-size: 18px; }
.brief-trait { margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brief-trait .lbl { display: inline; margin-right: 6px; }
.b20 .brief-hero .brief-objective .lbl { display: inline; margin-right: 6px; }
/* 20단계: 넓은 창(1320px 초과)에서도 왼쪽 도구 칸 자리를 비워 시야와 겹치지 않게 */
@media (min-width: 960px) { .screen-telescope:not(.zoom) { padding-left: 252px; padding-right: 12px; } }
.fov { width: min(calc(100vh - var(--dock) - 110px), calc(100vw - 540px)); }
@media (max-width: 1100px) and (min-width: 821px) { .screen-telescope { grid-template-columns: auto 230px; gap: 20px; } }
@media (max-width: 820px) { .fov { width: min(calc(100vh - var(--dock) - 120px), calc(100vw - 32px)); } }
.screen-telescope.zoom .fov { width: min(calc(100vh - var(--dock) - 70px), calc(100vw - 40px)); }
.mission-box .submit-btn + .mb-objective { margin-top: 0.6em; }
/* 목표 문장은 두 줄까지만 (전체는 「지령 보기 B」에서) · 창이 낮으면 숨겨 「망원경 모습」 창이 화면 안에 남게 함 */
.mission-box .mb-objective { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-height: 780px) {
  .mission-box .mb-objective { display: none; }
  .mission-box .route-note { display: none; } /* 탐색 경로 전체는 「지령 보기 B」 안에 있음 */
  .tele-pip { height: 100px; }
}
@media (max-height: 520px) { .tele-tools .brief-btn, .tele-tools .chart-btn { padding-top: 0.35em; padding-bottom: 0.35em; } }
/* 20단계(사용자 요청 반영): 4:3·좁은 창(960~1100px)에서 양쪽 칸을 196px 로 좁혀 접안렌즈를 창 높이의 75% 안팎으로.
   1024×768: 시야 484 → 584px, 1100×700: 540 → 590px. 「시야 크게 V」는 보조 기능으로 그대로 */
@media (min-width: 960px) and (max-width: 1100px) {
  .tele-tools { width: 196px; left: 12px; }
  .screen-telescope:not(.zoom) { padding-left: 216px; padding-right: 8px; }
  .screen-telescope:not(.zoom) { grid-template-columns: auto 196px; gap: 14px; }
  .fov { width: min(calc(100vh - var(--dock) - 110px), calc(100vw - 440px)); }
  .screen-telescope .telescope-info { font-size: 13px; }
  .screen-telescope .telescope-info dl { font-size: 13px; grid-template-columns: 3.6em 1fr; }
  .screen-telescope .telescope-info .ctl-label { flex-wrap: wrap; column-gap: 6px; }
  .tele-tools .mission-box { padding: 0.6em; font-size: 12.5px; } /* 좁아진 칸에서 「망원경 모습」 창이 화면 아래 칸에 가려지지 않게 */
  .tele-tools { gap: 6px; }
}
/* 시야 크게(V): 아래 상태 줄만 남기고 창 높이를 최대한 (넓은 창에서는 높이, 좁은 창에서는 너비가 한계) */
.screen-telescope.zoom .fov { width: min(calc(100vh - var(--dock) - 50px), calc(100vw - 40px)); }
@media (max-width: 1320px) { .screen-telescope.zoom .aim-state { padding-left: 340px; justify-content: flex-start; } } /* 아래 왼쪽 도움말·음량 칸과 겹치지 않게 */
/* 20단계: 안내 카드가 화면 아래에 붙어 있는 동안(튜토리얼) 망원경 오른쪽 칸을 줄임 — 제목을 숨기고 간격을 좁혀 초점 손잡이까지 스크롤 없이 */
.docked .screen-telescope .telescope-info .title { display: none; }
.docked .screen-telescope .telescope-info dl { padding: 0.3em 0; margin-bottom: 0.5em; gap: 0.2em 0.6em; }
.docked .screen-telescope .ctl { margin-bottom: 0.45em; }

/* ═════════════ 21단계: 아늑한 천문대 + 관측 일지 (공통 색) ═════════════
   밤하늘 남색 · 청록 · 크림 종이 · 은은한 금색 네 가지를 중심으로, 둥근 모서리와 손으로 그린 듯한 테두리.
   (특정 게임의 UI·글꼴·아이콘을 따라 하지 않은 이 게임만의 디자인) */
:root {
  --night: #101d3f; --night-2: #18295a; --night-3: #22386f;
  --teal: #5fd3bd; --teal-deep: #2a9d8b;
  --cream: #fbf3e1; --paper: #f4e8cf; --paper-2: #ead9b5; --ink: #2c2a3a; --ink-soft: #5d5670;
  --gold: #f4c463; --gold-deep: #c98f2e; --rose: #ee8f7d; --leaf: #8bcf7a;
  --r-lg: 18px; --r-md: 12px; --r-sm: 8px;
  --shadow-soft: 0 6px 0 rgba(0, 0, 0, 0.18), 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* ── 망원경 화면: 큰 성도 (M) — 화면 전체 ── */
.screen-telescope .chart-pop { position: fixed; inset: 10px; left: 10px; top: 10px; width: auto; z-index: 40; padding: 0; background: none; border: 0; }
.screen-telescope .chart-pop[hidden] { display: none; }
.starmap { height: 100%; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); /* 22단계: 머리줄이 길어도 성도가 창 밖으로 넓어지지 않게 */ background: var(--night); border: 3px solid var(--paper-2); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); overflow: hidden; color: var(--cream); }
.sm-head { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: linear-gradient(180deg, #24386d, #1a2b57); border-bottom: 2px dashed rgba(244, 196, 99, 0.35); }
.sm-title b { font-size: 20px; letter-spacing: 0.04em; color: var(--gold); margin-right: 8px; }
.sm-title .sm-sub { font-size: 12.5px; color: #c9d4ef; }
.sm-step { flex: 1; min-width: 0; font-size: 14px; color: var(--cream); background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 6px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-step:empty { visibility: hidden; }
.sm-step .st-no { color: var(--night); background: var(--gold); border-radius: 999px; padding: 1px 9px; margin-right: 6px; font-size: 12.5px; }
.sm-step small { color: #c9d4ef; margin-left: 6px; }
.sm-tabs { flex: none; display: flex; gap: 4px; background: rgba(0, 0, 0, 0.25); padding: 4px; border-radius: 999px; }
.sm-tabs button, .sm-tools button, .sm-close, .sm-assign { font: inherit; cursor: pointer; border: 0; }
.sm-tabs button { padding: 6px 14px; border-radius: 999px; background: none; color: #c9d4ef; font-size: 13.5px; }
.sm-tabs button.on { background: var(--cream); color: var(--ink); font-weight: 700; }
.sm-close { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: 0 3px 0 var(--paper-2); }
.sm-close kbd { background: var(--ink); color: var(--cream); }
.sm-body { display: grid; grid-template-columns: 1fr 290px; min-height: 0; }
.sm-canvas-wrap { position: relative; min-height: 0; }
.sm-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.sm-canvas-wrap canvas:active { cursor: grabbing; }
.sm-tools { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.sm-tools button { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 12px; background: rgba(251, 243, 225, 0.92); color: var(--ink); font-size: 14px; font-weight: 700; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.sm-tools button:hover { background: #fff; }
.sm-tools button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.sm-axes { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.sm-axes span { font-size: 12px; color: var(--cream); background: rgba(16, 29, 63, 0.75); padding: 2px 8px; border-radius: 999px; }
.starmap.dome .sm-tools, .starmap.dome .sm-axes { display: none; }
.sm-info { padding: 14px; background: var(--paper); color: var(--ink); overflow: auto; border-left: 3px solid var(--paper-2); }
.sm-scope { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.sm-scope .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px dashed var(--teal-deep); margin-right: 6px; vertical-align: -1px; }
.sm-hint { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 6px 0; }
.sm-legend { list-style: none; padding: 0; margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); display: grid; gap: 6px; }
.sm-legend i { display: inline-block; width: 18px; height: 10px; margin-right: 6px; vertical-align: 0; }
.lg-scope { border: 2px dashed var(--teal-deep); border-radius: 50%; }
.lg-line { border-top: 2px solid var(--gold-deep); height: 0 !important; vertical-align: 3px !important; }
.lg-axis { background: linear-gradient(90deg, transparent 45%, var(--ink-soft) 45% 55%, transparent 55%); }
.sm-card { background: var(--cream); border: 2px solid var(--paper-2); border-radius: var(--r-md); padding: 12px; box-shadow: 0 4px 0 var(--paper-2); }
.sm-card h4 { margin: 0 0 2px; font-size: 19px; color: var(--ink); }
.sm-mag { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); }
.sm-dir { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 10px; font-size: 14px; }
.sm-dir dt { color: var(--ink-soft); }
.sm-dir dd { margin: 0; font-weight: 700; }
.sm-assign { width: 100%; padding: 11px 12px; border-radius: 12px; background: var(--gold); color: var(--ink); font-weight: 800; font-size: 15px; box-shadow: 0 4px 0 var(--gold-deep); }
.sm-assign:hover { background: #f8cf78; }
.sm-assign:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep); }
.sm-assign.on { background: var(--leaf); box-shadow: 0 4px 0 #5b9d4c; }
.sm-note { font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 0; }
@media (max-width: 900px) { .sm-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .sm-info { max-height: 34vh; border-left: 0; border-top: 3px solid var(--paper-2); } .sm-title .sm-sub { display: none; } }
@media (max-width: 760px) { .sm-step { display: none; } }

/* ── 망원경 화면: 방향 계기판 (나침반 · 방위각 · 고도 · 시야) ── */
.dir-card { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; margin: 4px 0 8px; padding: 8px; background: rgba(251, 243, 225, 0.06); border: 1px solid rgba(244, 196, 99, 0.28); border-radius: var(--r-md); }
.compass { width: 92px; height: 92px; }
.compass .c-ring { fill: #13224a; stroke: var(--gold); stroke-width: 2.5; }
.compass .c-in { fill: none; stroke: rgba(244, 196, 99, 0.25); stroke-width: 1; stroke-dasharray: 3 4; }
.compass .c-tick { stroke: rgba(244, 196, 99, 0.6); stroke-width: 1.5; }
.compass .c-tick.major { stroke: var(--gold); stroke-width: 2.5; }
.compass .c-lbl { fill: var(--cream); font-size: 13px; font-weight: 700; text-anchor: middle; }
.compass .c-lbl.n { fill: var(--rose); }
.compass .c-needle { transition: transform 0.15s linear; }
.compass .nd-front { fill: var(--teal); }
.compass .nd-back { fill: rgba(251, 243, 225, 0.5); }
.compass .nd-hub { fill: var(--cream); }
@media (prefers-reduced-motion: reduce) { .compass .c-needle { transition: none; } }
.dir-read { display: grid; gap: 4px; font-size: 13px; }
.dir-read small { display: block; font-size: 11px; color: #a9b6d6; }
.dir-read b { font-size: 16px; color: var(--cream); }
.dr-az b { color: var(--teal); font-size: 17px; }
.alt-bar { display: block; height: 5px; margin-top: 3px; background: rgba(255, 255, 255, 0.12); border-radius: 3px; overflow: hidden; }
.alt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-deep), var(--teal)); border-radius: 3px; }
.readout-mini { grid-template-columns: 3.4em 1fr !important; font-size: 12.5px !important; padding: 0.3em 0 !important; margin-bottom: 0.5em !important; }
.pad-hint { display: flex; justify-content: space-between; font-size: 11.5px; color: #a9b6d6; margin: -2px 0 4px; }

/* ── 망원경 화면: 탐색 단계 카드 (STEP n / N) ── */
.mission-box .route-step { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; margin: 0.4em 0; padding: 8px 10px; background: linear-gradient(180deg, rgba(244, 196, 99, 0.16), rgba(244, 196, 99, 0.06)); border: 1px solid rgba(244, 196, 99, 0.45); border-radius: var(--r-sm); color: var(--cream); font-size: 13px; }
.route-step .st-no { font-weight: 800; color: var(--night); background: var(--gold); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.route-step .st-t { font-weight: 700; }
.route-step .st-dots { grid-column: 1 / -1; display: flex; gap: 5px; margin-top: 4px; }
.route-step .st-dots i { width: 14px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.route-step .st-dots i.d-done { background: var(--leaf); }
.route-step .st-dots i.d-current { background: var(--gold); box-shadow: 0 0 0 2px rgba(244, 196, 99, 0.35); }
.route-step .st-dots i.d-next { background: rgba(244, 196, 99, 0.45); }
.route-step .st-dots i.d-skipped { background: rgba(255, 255, 255, 0.35); }
.route-step.just-done { animation: stepPop 0.6s ease-out; }
@keyframes stepPop { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139, 207, 122, 0.8); } 40% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(139, 207, 122, 0.25); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139, 207, 122, 0); } }
.mission-box .mb-look { display: block; margin-top: 4px; font-size: 12px; color: #c9d4ef; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.step-toast { position: fixed; z-index: 45; left: 50%; top: 16px; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: var(--leaf); color: #17331a; font-weight: 800; font-size: 15px; box-shadow: 0 5px 0 #5b9d4c, 0 10px 24px rgba(0, 0, 0, 0.4); }
.step-toast[hidden] { display: none; }
.step-toast.pop { animation: toastPop 0.45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes toastPop { 0% { transform: translate(-50%, -14px) scale(0.85); opacity: 0; } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .route-step.just-done, .step-toast.pop { animation: none; } }
.mission-box .mb-look { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mission-box .route-note { font-size: 11.5px; color: #a9b6d6; margin: 0 0 0.4em; }

/* ── 21단계 지령: 첫 번째 기준점(별자리 그림) · 단계 설명 ── */
.chart-big .cb-host { position: fixed; inset: 14px; z-index: 60; }
.first-point .fp-row { display: grid; grid-template-columns: 260px 1fr; gap: 12px; align-items: center; }
.fp-fig { margin: 0; }
.fp-fig svg { display: block; width: 100%; height: auto; }
.fp-fig .bg { fill: #13224a; stroke: rgba(244, 196, 99, 0.45); stroke-width: 1.5; }
.fp-fig .ax { fill: #a9b6d6; font-size: 10px; }
.fp-fig .cl { stroke: rgba(244, 196, 99, 0.6); stroke-width: 1.4; }
.fp-fig .hop { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-dasharray: 4 4; }
.fp-fig .tail { stroke: var(--teal); stroke-width: 1.6; }
.fp-fig .ah { fill: var(--teal); }
.fp-fig .q { fill: var(--teal); font-size: 12px; font-weight: 800; }
.fp-fig .st { fill: #e8eefc; }
.fp-fig .st.anchor { fill: #fff6dc; }
.fp-fig .ring { fill: none; stroke: var(--gold); stroke-width: 1.6; }
.fp-fig .num circle { fill: var(--gold); }
.fp-fig .num text { fill: var(--night); font-size: 9px; font-weight: 800; }
.fp-fig .lb { fill: #dfe6f8; font-size: 10px; }
.fp-text p { margin: 0 0 6px; }
.fp-con b { font-size: 16px; color: var(--gold); }
.fp-look { font-size: 13px; line-height: 1.55; color: #cfd8ee; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fp-anchor { font-size: 13.5px; padding: 6px 10px; background: rgba(244, 196, 99, 0.12); border-radius: 999px; display: inline-block; }
.fp-anchor .fp-star { color: var(--gold); margin-right: 4px; }
.step-detail .sd-goal { margin: 0 0 6px; font-weight: 700; font-size: 14.5px; color: var(--cream); }
.step-detail .sd-no { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: var(--gold); color: var(--night); font-size: 11.5px; font-weight: 800; }
.step-detail .sd-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; line-height: 1.5; }
.step-detail .sd-dl dt { color: var(--gold); font-weight: 700; }
.step-detail .sd-dl dd { margin: 0; color: #d9e1f5; }
.route-strip li[data-state="next"] .n { outline: 2px dashed rgba(244, 196, 99, 0.6); }
.route-strip li[data-state="skipped"] { opacity: 0.6; }
@media (max-width: 900px) { .first-point .fp-row { grid-template-columns: 1fr; } }
.chart-big .cb-host .sm-canvas-wrap canvas { height: 100%; }
.real-credit { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); font-size: 11px; color: rgba(251, 243, 225, 0.85); background: rgba(16, 29, 63, 0.7); padding: 2px 8px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.real-credit[hidden] { display: none; }

/* ═════════════ 21단계: 전체 아트 디렉션 「아늑한 천문대 + 관측 일지 + 수집」 ═════════════
   - 글꼴: 단말기 느낌의 고정폭 글꼴 대신 둥근 산세리프 (숫자도 같은 글꼴, tabular-nums)
   - 창: 두꺼운 크림색 테두리 · 큰 둥근 모서리 · 아래로 떨어지는 그림자 (손으로 만든 물건 같은 느낌)
   - 버튼: 금색/청록 알약 모양, 누르면 쑥 들어감 (아래 그림자 → 0)
   - 수집: 사진첩 = 테이프로 붙인 사진, 도감 = 하나씩 채우는 책 페이지 */
:root {
  --mono: "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --m-title: #fbf3e1; --m-text: #e6e3f0; --m-dim: #b9bfd8;
  --m-line: rgba(244, 196, 99, 0.3); --m-line-soft: rgba(255, 255, 255, 0.09);
}
body { font-variant-numeric: tabular-nums; }

/* 컴퓨터·상인 창 */
.monitor { background: radial-gradient(120% 90% at 50% 0%, #1d3470 0%, #142553 45%, #0f1d3f 100%); border: 4px solid var(--paper-2); border-radius: 22px; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25), 0 18px 50px rgba(0, 0, 0, 0.55); }
.monitor > header { background: var(--paper); color: var(--ink); border-bottom: 3px solid var(--paper-2); border-radius: 17px 17px 0 0; }
.monitor > header .title { color: var(--ink); font-weight: 800; letter-spacing: 0.02em; }
.monitor > header .title::before { content: "✦ "; color: var(--gold-deep); }
.monitor > header .wallet { color: #3b5d2b; background: #e3f2cf; border: 2px solid #a8cf8f; font-weight: 800; }
.monitor > header .clock { color: var(--ink-soft); }
.monitor > header .close-btn { color: var(--ink); background: var(--cream); border: 2px solid var(--paper-2); border-radius: 999px; font-weight: 700; box-shadow: 0 3px 0 var(--paper-2); }
.monitor > header .close-btn:hover { background: #fff; }
.monitor > footer { color: var(--m-dim); border-top: 1px dashed var(--m-line); }

/* 메뉴: 큰 그림 버튼 (사진첩·도감은 수집 메뉴라 따뜻한 색) */
.comp-nav { gap: 10px; padding: 12px 14px 0; background: none; border-bottom: 3px solid var(--paper-2); }
.comp-nav button { grid-template-columns: 56px 1fr; column-gap: 12px; min-height: 74px; padding: 8px 14px 10px; color: var(--m-dim); background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(244, 196, 99, 0.22); border-bottom: 0; border-radius: 16px 16px 0 0; transition: transform 0.12s ease, background 0.12s ease; }
.comp-nav .cn-art { grid-row: 1 / 3; width: 56px; height: 56px; transition: transform 0.18s ease; }
.comp-nav button:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.comp-nav button:hover .cn-art { transform: rotate(-6deg) scale(1.06); }
.comp-nav button:active { transform: translateY(1px); }
.comp-nav button.on, .comp-nav button[aria-current="page"] { background: var(--paper); border-color: var(--paper-2); }
.comp-nav button.on .cn-label, .comp-nav button[aria-current="page"] .cn-label { color: var(--ink); }
.comp-nav button.on .cn-sub, .comp-nav button[aria-current="page"] .cn-sub { color: var(--ink-soft); }
.comp-nav button.on::after, .comp-nav button[aria-current="page"]::after { display: none; }
.comp-nav .cn-label { font-size: 16px; font-weight: 800; }
.comp-nav .cn-sub { font-size: 12px; }
.comp-nav button.cn-collect:not(.on) { background: rgba(238, 143, 125, 0.08); }
.comp-nav button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .comp-nav button, .comp-nav .cn-art { transition: none; } }
@media (max-width: 760px) { .comp-nav button { grid-template-columns: 40px 1fr; min-height: 60px; } .comp-nav .cn-art { width: 40px; height: 40px; } .comp-nav .cn-sub { display: none; } }

/* 버튼 */
.mbtn { background: var(--gold); color: var(--ink); border: 0; border-radius: 999px; font-weight: 800; box-shadow: 0 4px 0 var(--gold-deep); transition: transform 0.08s ease; }
.mbtn:hover { background: #f8cf78; }
.mbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep); }
.mbtn.go { background: var(--teal); color: #0d2b27; box-shadow: 0 4px 0 var(--teal-deep); }
.mbtn.go:hover { background: #7ee3cf; }
.mbtn.sub { background: transparent; color: var(--cream); border: 2px solid rgba(251, 243, 225, 0.4); box-shadow: none; font-weight: 700; }
.mbtn.sub:hover { background: rgba(251, 243, 225, 0.1); }
.mbtn:focus-visible, .chipbtn:focus-visible, .link-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mbtn { transition: none; } }

/* 임무 카드: 종이 쪽지 */
.monitor .mcard { background: rgba(251, 243, 225, 0.06); border: 2px solid rgba(244, 196, 99, 0.25); border-left: 6px solid var(--gold); border-radius: 14px; }
.monitor .mcard.completed, .monitor .mcard[data-state="completed"] { border-left-color: var(--leaf); }
.monitor .mcard.locked, .monitor .mcard[data-state="locked"] { border-left-color: #7c829a; border-style: dashed; }

/* 지령: 큰 목표 쪽지·섹션 */
.b20 .brief-hero, .brief-hero { background: var(--paper); color: var(--ink); border: 0; border-radius: 16px; box-shadow: 0 4px 0 var(--paper-2); }
.brief-hero .brief-objective .lbl, .brief-hero .brief-trait .lbl { color: var(--gold-deep); }
.brief-hero .brief-objective .txt { color: var(--ink); }
.brief-hero .brief-trait { color: var(--ink-soft); }
.brief-head { border-radius: 16px; }
.brief-sec .sec-h .tag { border-radius: 999px; }
.must-list li, .cond-chip { border-radius: 999px; }

/* 사진첩: 테이프로 붙인 사진 */
.photo-card { background: var(--cream); color: var(--ink); border: 0; border-radius: 6px; padding: 12px 10px 10px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22); transform: rotate(-1.2deg); transition: transform 0.15s ease; position: relative; }
.photo-grid li:nth-child(2n) .photo-card, .album-grid li:nth-child(2n) .photo-card { transform: rotate(1.4deg); }
.photo-card::before { content: ""; position: absolute; top: -8px; left: 50%; width: 46px; height: 16px; transform: translateX(-50%) rotate(-4deg); background: rgba(238, 143, 125, 0.75); border-radius: 2px; }
.photo-card:hover { transform: rotate(0) translateY(-3px); background: #fff; border: 0; }
.photo-card.fav { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22), 0 0 0 3px var(--gold); }
.photo-card img { width: 140px; height: 140px; border-radius: 4px; box-shadow: none; background: #0a1230; }
.photo-card .pc-name { color: var(--ink); }
.photo-card .pc-meta { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .photo-card { transition: none; } }

/* 도감: 하나씩 채우는 책 */
.codex-card { background: linear-gradient(180deg, #fbf3e1, #f1e3c4); color: var(--ink); border: 2px solid var(--paper-2); border-radius: 14px; box-shadow: 0 5px 0 #c9b892; }
.codex-card:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.codex-card b { color: var(--ink); }
.codex-card .cc-kind { color: #2f7d5e; font-weight: 700; }
.codex-card .cc-hint { color: var(--ink-soft); }
.codex-card .cc-img { box-shadow: 0 0 0 4px #2f7d5e, 0 0 0 7px var(--gold); background: #0a1230; }
.codex-card.unknown { background: repeating-linear-gradient(135deg, rgba(251, 243, 225, 0.06) 0 8px, rgba(251, 243, 225, 0.02) 8px 16px); border: 2px dashed rgba(244, 196, 99, 0.35); box-shadow: none; color: var(--m-dim); }
.codex-card.unknown b, .codex-card.unknown .cc-hint { color: var(--m-dim); }
.codex-card.unknown .cc-img { box-shadow: 0 0 0 3px rgba(244, 196, 99, 0.25); color: rgba(244, 196, 99, 0.6); }

/* 상점: 장비 상인의 수레 */
.monitor.shop .body { background: none; }
.shop-hero { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.shop-hero .merchant { flex: none; }
.shop-hero .shop-msg { position: relative; margin: 0; padding: 12px 16px; background: var(--cream); color: var(--ink); border-radius: 16px; font-size: 15px; box-shadow: 0 4px 0 var(--paper-2); }
.shop-hero .shop-msg::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); border: 10px solid transparent; border-right-color: var(--cream); border-left: 0; }
.shop-hero .shop-msg.ok { background: #e3f2cf; } .shop-hero .shop-msg.ok::before { border-right-color: #e3f2cf; }
.shop-hero .shop-msg.bad { background: #fde3dc; } .shop-hero .shop-msg.bad::before { border-right-color: #fde3dc; }
.shop-now .note { background: rgba(95, 211, 189, 0.1); border: 1px solid rgba(95, 211, 189, 0.35); border-radius: 12px; padding: 8px 12px; }
.shop-sec { margin-top: 14px; }
.shop-slot { display: flex; align-items: baseline; gap: 8px; color: var(--gold) !important; font-size: 18px !important; }
.shop-slot .slot-ico { color: var(--teal); }
.shop-slot small { font-size: 12.5px; color: var(--m-dim); font-weight: 500; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.shop-item.mcard { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 16px 14px 14px; border-left-width: 2px; background: rgba(251, 243, 225, 0.07); }
.shop-item .item-art { width: 84px; height: 84px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2a4485, #172a5a); border-radius: 18px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25); }
.shop-item .item-desc { font-size: 13.5px; line-height: 1.55; margin: 4px 0 8px; color: var(--m-text); }
.shop-item .mc-level { color: var(--gold); letter-spacing: 1px; }
.shop-item .ribbon { position: absolute; top: -9px; right: 14px; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--ink); background: var(--gold); box-shadow: 0 3px 0 var(--gold-deep); }
.shop-item .ribbon.owned { background: var(--leaf); box-shadow: 0 3px 0 #5b9d4c; }
.shop-item .ribbon.locked { background: #c7c9d6; box-shadow: 0 3px 0 #8d90a3; }
.shop-item .ribbon.funds { background: var(--rose); box-shadow: 0 3px 0 #b8604f; }
.shop-item.owned { border-color: rgba(139, 207, 122, 0.6); }
.shop-item.locked { opacity: 0.8; border-style: dashed; }
.cmp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px 8px; margin: 6px 0; padding: 8px 10px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; font-size: 13px; }
.cmp .cmp-l { grid-column: 1 / -1; color: var(--m-dim); font-size: 12px; }
.cmp .cmp-now b { color: var(--m-text); font-size: 15px; }
.cmp .cmp-then b { color: var(--teal); font-size: 17px; }
.cmp .cmp-arrow { color: var(--gold); font-weight: 800; font-size: 18px; }
.buy-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.buy-row .price { margin: 0; font-size: 14px; color: var(--m-dim); }
.buy-row .price b { font-size: 20px; color: var(--gold); }
.buy-row .price .coin { color: var(--gold); margin-right: 4px; }
.buy-btn.mbtn { min-width: 110px; min-height: 42px; font-size: 16px; margin: 0; }
.shop-item .mc-unlock { font-size: 12.5px; }
@media (max-width: 860px) { .shop-grid { grid-template-columns: 1fr; } }

/* 망원경 왼쪽 도구 버튼 */
.tele-tools .chart-btn { border-radius: 14px; background: rgba(251, 243, 225, 0.08); border: 2px solid rgba(244, 196, 99, 0.3); color: var(--cream); font-weight: 700; }
.tele-tools .chart-btn:hover { background: rgba(251, 243, 225, 0.16); }
.tele-tools .chart-btn.on { background: var(--cream); color: var(--ink); }
.tele-tools .mission-box { border-radius: 16px; border: 2px solid rgba(244, 196, 99, 0.3); background: rgba(16, 29, 63, 0.92); }
.submit-btn { border-radius: 999px !important; box-shadow: 0 4px 0 #2c8a62; }
/* 21단계: 연습 모드 띠 */
#practice-banner { position: fixed; z-index: 70; left: 50%; top: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 7px 8px 7px 16px; background: var(--leaf); color: #17331a; border-radius: 999px; box-shadow: 0 4px 0 #5b9d4c, 0 8px 20px rgba(0, 0, 0, 0.35); font-size: 13.5px; }
#practice-banner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#practice-banner button { font: inherit; font-weight: 800; padding: 6px 14px; border: 0; border-radius: 999px; background: #17331a; color: var(--cream); cursor: pointer; }
@media (max-width: 900px) { #practice-banner span { display: none; } }
.practice-btn { background: var(--leaf) !important; box-shadow: 0 4px 0 #5b9d4c !important; }
.monitor > header .close-btn kbd { background: var(--ink); color: var(--cream); }
/* 21단계: 도감 실제 사진 칸 */
.cx-sec.real .rp-fig { margin: 6px 0; }
.cx-sec.real .rp-fig img { max-width: 100%; height: auto; border-radius: 6px; border: 3px solid var(--cream, #f4ead5); }
.cx-sec.real .rp-missing { margin: 6px 0; padding: 8px 10px; border: 2px dashed rgba(200,170,120,.6); border-radius: 8px; line-height: 1.5; word-break: break-all; }
/* 21단계: 경로가 6단계인 임무는 탐색 순서 띠를 한 줄 6칸으로 (줄바꿈으로 지령이 길어지지 않게) */
.monitor .route-strip.n6, .tele-brief .route-strip.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.monitor .route-strip.n6 b { font-size: 12px; }
/* 21단계: 낮은 창(≤780px)에서는 「다음 행동」 아래의 별자리 설명(mb-look)을 숨기고 — 지령(B)·성도에 그대로 있음 —
   대신 지금 단계의 「완료 조건」 한 줄은 보이게 (단계마다 무엇을 하면 끝나는지 항상 보이도록) */
@media (max-height: 780px) {
  .mission-box .mb-look { display: none; }
  .mission-box .route-note[data-route-note] { display: block; font-size: 12px; line-height: 1.35; margin: 0; }
}
@media (max-height: 780px) {
  .mission-box .route-step { grid-template-areas: "no dots" "t t"; padding: 6px 9px; }
  .mission-box .route-step .st-no { grid-area: no; }
  .mission-box .route-step .st-dots { grid-area: dots; margin-top: 0; align-self: center; }
  .mission-box .route-step .st-t { grid-area: t; font-size: 12.5px; line-height: 1.3; }
  .mission-box .mb-next { padding: 4px 8px; line-height: 1.4; }
}
/* 21단계: 낮은 창에서 방향 카드를 작게 — 오른쪽 조작 칸(초점 손잡이까지)이 창 안에 들어오도록 */
.dr-az b { white-space: nowrap; }
.route-step .st-no { white-space: nowrap; }
@media (max-height: 780px) {
  .dir-card { grid-template-columns: 62px 1fr; gap: 8px; padding: 5px 7px; margin: 2px 0 5px; }
  .compass { width: 62px; height: 62px; }
  .dir-read { gap: 1px 8px; grid-template-columns: auto auto; }
  .dir-read small { font-size: 10.5px; }
  .dir-read b, .dr-az b { font-size: 14px; }
  .dir-read .dr-az { grid-column: 1 / -1; }
  .readout-mini { padding: 0.15em 0 !important; margin-bottom: 0.3em !important; font-size: 12px !important; }
  .readout-mini dt:nth-of-type(n+3), .readout-mini dd:nth-of-type(n+3) { display: none; } /* 적경·적위는 낮은 창에서 숨김 (방위각·고도가 주 표시) */
  .tele-pip { height: 92px; }
}
/* 21단계: 「처음 찾을 곳」은 지령 오른쪽 칸(성도 아래)에 — 왼쪽 칸(목표·조건·탐색 순서)이 길어지지 않게 */
.brief-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.brief-side .first-point { margin: 0; }
.brief-side .first-point .fp-row { grid-template-columns: 1fr; gap: 8px; }
.brief-side .fp-fig { max-width: 300px; justify-self: center; width: 100%; }
@media (max-width: 1000px) { .brief-side { justify-items: center; } .brief-side .first-point { width: 100%; } }
/* 21단계: 탐색 순서 띠 바로 아래에 「기준 별과 위치 · 관측 요령 · 힌트」 버튼 줄, 그 아래에 고른 단계의 설명 */
.brief-sec.route .disc-row, .brief-sec.route [data-disclosure] { margin-top: 8px; }
.brief-sec.route .step-detail { margin-top: 8px; }
/* 21단계: 지령 첫 화면 압축 — 탐색 순서 띠·지금 단계 설명·버튼 줄을 「기준 별과 위치」 아래까지 한 화면에 (1100×700 기준)
   · 성공 조건: 제목과 조건 칩을 한 줄에   · 탐색 순서 띠: 번호와 단계 이름을 한 줄(길면 …, 고른 단계의 전체 설명은 바로 아래) */
.monitor .brief-sec.must { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.monitor .brief-sec.must .sec-h { margin: 0; }
.monitor .brief-sec.must .sec-h small { display: none; }
.monitor .route-strip button { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 6px; padding: 6px 8px; min-height: 0; }
.monitor .route-strip b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monitor .route-strip em { position: static; grid-column: 1 / -1; display: none; }
.monitor .route-strip li[data-state="current"] em, .monitor .route-strip li[data-state="next"] em { display: none; }
.monitor .brief-sec.must .must-list { flex: 1 1 0; min-width: 0; }
.monitor .route-strip button { overflow: hidden; justify-items: stretch; }
.monitor .route-strip b { min-width: 0; display: block; }
/* 21단계: 메뉴에 마우스를 올리면 바탕이 밝아짐 (모음 메뉴의 분홍 바탕보다 뒤에 두어 함께 적용) */
.comp-nav button:not(.on):hover { background: rgba(251, 243, 225, 0.16); border-color: rgba(244, 196, 99, 0.7); }

/* ═══ 22단계: 상시 퀘스트 창 · 시야 위 기준 별 표시 · 단서 강조 ═══ */
.mission-box .quest { margin: 6px 0 4px; padding: 8px 9px 7px; border-radius: 12px; background: rgba(251, 243, 225, 0.07); border: 1px solid rgba(244, 196, 99, 0.35); }
.quest .q-head { display: flex; align-items: flex-start; gap: 6px; }
.quest .q-head .route-step { flex: 1 1 auto; margin: 0 !important; }
.quest .q-fold { flex: none; font: inherit; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(244, 196, 99, 0.45); background: transparent; color: var(--cream); cursor: pointer; }
.quest .q-fold:hover { background: rgba(244, 196, 99, 0.15); }
.quest .q-list { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.quest .q-list li { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 6px; color: #b9c4dc; }
.quest .q-list li i { font-style: normal; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11.5px; font-weight: 800; background: rgba(255, 255, 255, 0.08); color: #cdd6ea; }
.quest .q-list li[data-state="done"] { color: #9fd9a8; }
.quest .q-list li[data-state="done"] i { background: var(--leaf); color: #17331a; }
.quest .q-list li[data-state="done"] span { text-decoration: line-through; text-decoration-color: rgba(159, 217, 168, 0.5); }
.quest .q-list li[data-state="current"] { background: rgba(244, 196, 99, 0.18); color: #fff3cf; font-weight: 800; box-shadow: inset 3px 0 0 var(--gold); }
.quest .q-list li[data-state="current"] i { background: var(--gold); color: var(--night); }
.quest .q-list li[data-state="skipped"] { opacity: 0.6; }
.quest .mb-next { margin: 4px 0 0 !important; font-size: 13px !important; }
.quest .q-anchor, .quest .q-dist { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: #d9e0f0; }
.quest .q-anchor b { color: var(--gold); }
.quest .q-dist b { color: var(--cream); }
.quest .q-dist b.ok { color: #8fe3b0; }
.quest .q-anchor small, .quest .q-dist small { color: #a9b6d6; }
.quest.folded .q-list, .quest.folded .mb-objective, .quest.folded .mb-look, .quest.folded .q-anchor, .quest.folded .route-note { display: none !important; }
.mission-box .quest .route-step { border: 0; background: none; padding: 0; }
mark.kw { background: none; color: inherit; padding: 0 1px; border-radius: 3px; font-weight: 700; }
mark.kw-dir { color: #7ee8c8; box-shadow: inset 0 -2px 0 rgba(126, 232, 200, 0.45); }
mark.kw-star { color: #ffd88a; }
mark.kw-num { color: #ffb4a6; box-shadow: inset 0 -2px 0 rgba(255, 180, 166, 0.4); }
.brief-hero mark.kw-dir, .paper mark.kw-dir { color: #1f7a63; }
.brief-hero mark.kw-star, .paper mark.kw-star { color: #9a5b00; }
.brief-hero mark.kw-num, .paper mark.kw-num { color: #b0452f; }
/* 시야 위 표시 */
.reticle.marks { pointer-events: none; overflow: visible; }
.marks .mk circle { fill: none; stroke-width: 1.3; }
.marks .mk-anchor circle { stroke: #ffcf6b; stroke-width: 1.6; }
.marks .mk-step circle { stroke: #7ee8c8; stroke-dasharray: 2.4 2; }
.marks .mk text, .marks .mk-edge-t { font: 700 6.5px "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(4, 8, 20, 0.85); stroke-width: 2px; }
.marks .mk-anchor text, .marks .mk-edge-t { fill: #ffd88a; }
.marks .mk-step text { fill: #b9f3e0; }
.marks .mk-edge path { fill: #ffcf6b; }
@media (max-height: 780px) {
  .mission-box .quest { padding: 6px 7px; }
  .quest .q-list { font-size: 12px; margin: 4px 0 2px; }
  .quest .q-list li { padding: 1px 4px; }
  .quest .q-anchor { display: none; }
}
@media (max-height: 780px) {
  .mission-box .acq-checks { display: none; } /* 낮은 창: 판정 항목 목록은 지령(B)·촬영 결과에 있음 — 퀘스트 창과 「촬영 가능」 상태 줄을 우선 */
  .quest .q-head .route-step .st-t { display: none; } /* 지금 단계 이름은 바로 아래 목록에 강조되어 있어 머리줄에서는 생략 */
}
/* 22단계: 아주 낮은 창(≤720px)에서는 「지령 B」「성도 M」 버튼을 한 줄에 — 퀘스트 창이 들어갈 자리를 만듦 */
@media (max-height: 720px) {
  .tele-tools { grid-template-columns: 1fr 1fr; gap: 6px; }
  .tele-tools > * { grid-column: 1 / -1; }
  .tele-tools > .brief-btn:not([hidden]), .tele-tools > [data-chart-btn] { grid-column: auto; font-size: 13px; padding-top: 0.4em; padding-bottom: 0.4em; }
  .tele-tools > .finder-btn, .tele-tools > .camera-btn { padding-top: 0.4em; padding-bottom: 0.4em; }
}
.quest .q-head .st-dots { display: none; } /* 퀘스트 목록이 단계 상태를 보여 주므로 머리줄의 점 막대는 생략 */
@media (max-height: 720px) {
  .mission-box > .ctl-label { display: none; }
  .mission-box .acq-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .quest .q-list li { padding: 0 4px; }
  .quest .q-list li i { width: 17px; height: 17px; font-size: 11px; }
  .quest .route-note { font-size: 11.5px !important; }
}

/* ═══ 22단계: 튜토리얼 안내 카드(더 크게) · 스포트라이트 ═══ */
.coach { width: min(440px, calc(100vw - 32px)); padding: 14px 16px 12px; font-size: 15px; line-height: 1.55; border-radius: 16px; border-left-width: 5px; background: rgba(10, 18, 40, 0.96); border-color: rgba(244, 196, 99, 0.55); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); }
.coach-head { font-size: 13px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.coach-head .coach-count { padding: 1px 9px; border-radius: 999px; background: var(--gold); color: var(--night); font-family: inherit; }
.coach-bar { height: 5px; margin: 6px 0 8px; border-radius: 3px; }
.coach-title { font-size: 18px; color: #fff3cf; margin: 2px 0 4px; }
.coach-text { font-size: 15px; color: #e6ecfa; }
.coach-why { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 6px 0 4px; font-size: 13px; color: #b9c4dc; }
.coach-why dt { font-weight: 800; color: #9fd9ff; white-space: nowrap; }
.coach-why dd { margin: 0; }
.coach-progress { margin: 4px 0; font-weight: 800; color: var(--gold); font-size: 14px; }
.coach-done { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: rgba(143, 224, 165, 0.16); color: #c9f5d4; font-weight: 700; animation: coachDone 0.5s ease-out; }
.coach[data-done="1"] { border-left-color: #8fe0a5; }
.coach .coach-next { font-size: 15px; padding: 0.45em 1.2em; border-radius: 999px; background: var(--gold); color: var(--night); font-weight: 800; border: 0; box-shadow: 0 3px 0 #b8892f; }
.coach .coach-next[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }
.coach[data-done="1"] .coach-next:not([disabled]) { animation: tutPulse 1.4s ease-in-out infinite; }
@keyframes coachDone { from { transform: scale(0.96); opacity: 0.4; } to { transform: none; opacity: 1; } }
.coach[data-state="computer"], .coach[data-state="shop"], .coach[data-state="telescope"] { padding: 10px 16px; font-size: 14px; }
.coach[data-state="computer"] > .coach-why, .coach[data-state="shop"] > .coach-why, .coach[data-state="telescope"] > .coach-why,
.coach[data-state="computer"] > .coach-progress, .coach[data-state="shop"] > .coach-progress, .coach[data-state="telescope"] > .coach-progress,
.coach[data-state="computer"] > .coach-done, .coach[data-state="shop"] > .coach-done, .coach[data-state="telescope"] > .coach-done { grid-column: 1; }
.coach[data-state="telescope"] .coach-title { font-size: 16.5px; }
.coach[data-state="telescope"] .coach-why { grid-template-columns: auto 1fr auto 1fr; margin: 2px 0; }
@media (max-height: 780px) { .coach[data-state="telescope"] .coach-why dt:nth-of-type(2), .coach[data-state="telescope"] .coach-why dd:nth-of-type(2) { display: none; } }
.tut-spot { position: fixed; z-index: 35; pointer-events: none; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(3, 6, 16, 0.42), 0 0 0 3px #ffd27a, 0 0 22px 6px rgba(255, 210, 122, 0.55); transition: left 0.18s, top 0.18s, width 0.18s, height 0.18s; }
.tut-spot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tut-spot { transition: none; } .coach-done { animation: none; } .coach[data-done="1"] .coach-next:not([disabled]) { animation: none; } }
.coach { z-index: 50; }
.tut-spot { z-index: 45; }

/* ═══ 22단계: 상인의 「셋 중 하나」 · 성장 경로 ═══ */
.shop .pick { margin: 14px 0 18px; padding: 14px 16px; border-radius: 18px; background: var(--paper, #f6ead2); color: var(--ink, #2b2238); border: 3px solid var(--gold); box-shadow: 0 6px 0 rgba(0,0,0,0.25); }
.shop .pick.none { background: rgba(251, 243, 225, 0.08); color: var(--cream); border-color: rgba(244, 196, 99, 0.35); box-shadow: none; }
.shop .pick-h { margin: 0 0 4px; font-size: 19px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.shop .pick-h small { font-size: 13px; font-weight: 500; opacity: 0.8; }
.shop .pk-count { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--rose, #ee8f7d); color: #fff; }
.shop .pick-why { margin: 0 0 10px; font-size: 14px; }
.shop .pick-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.shop .pick-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 12px 12px 14px; border-radius: 16px; background: #fffaf0; border: 2px solid #e7d3a8; }
.shop .pick-card.teal { border-color: #7ccdbb; } .shop .pick-card.gold { border-color: #e9b85a; } .shop .pick-card.rose { border-color: #ef9f8e; }
.shop .pick-card .pk-path { justify-self: start; font-size: 12px; font-weight: 800; padding: 1px 9px; border-radius: 999px; color: #fff; background: #8a7aa3; }
.shop .pick-card.teal .pk-path { background: #2f9e86; } .shop .pick-card.gold .pk-path { background: #c98f2e; } .shop .pick-card.rose .pk-path { background: #d4685a; }
.shop .pick-card .item-art { justify-self: center; }
.shop .pick-card .pk-name { font-size: 17px; }
.shop .pick-card .pk-what { margin: 0; font-size: 13px; color: #6b5c48; }
.shop .pick-card .pk-unlock { margin: 0; font-size: 13px; line-height: 1.5; }
.shop .pick-card .cmp { color: var(--ink, #2b2238); background: rgba(244, 196, 99, 0.18); }
.shop .pick-card .pick-btn { justify-self: stretch; font-size: 16px; padding: 0.55em 0; border-radius: 999px; margin: 4px 0 0; }
.shop .g-tree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.shop .g-path { padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.05); font-size: 13px; }
.shop .pick.none .g-path { background: rgba(255, 255, 255, 0.05); }
.shop .g-path b { display: block; font-size: 14px; }
.shop .g-path small { opacity: 0.75; }
.shop .g-path ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.shop .g-path li { opacity: 0.65; }
.shop .g-path li.have { opacity: 1; font-weight: 800; color: #2f9e86; }
.shop .pick.none .g-path li.have { color: #8fe3b0; }
.shop .store-h { margin: 6px 0 8px; font-size: 16px; color: var(--cream); }
.shop .store-h small { font-size: 12.5px; font-weight: 500; color: #b9c4dc; margin-left: 6px; }
@media (max-width: 760px) { .shop .g-tree { grid-template-columns: 1fr; } }
.monitor .bonus-list { margin: 16px 0 6px; padding: 10px 12px; border-radius: 14px; border: 2px dashed rgba(244, 196, 99, 0.35); }
.monitor .bonus-list summary { cursor: pointer; font-weight: 800; color: var(--cream); }
.monitor .bonus-list summary small { font-weight: 500; color: #b9c4dc; margin-left: 6px; }
.monitor .bonus-list .mlist { margin-top: 10px; }
.merchant-call { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 10px 0; padding: 10px 14px; border-radius: 16px; background: var(--paper, #f6ead2); color: var(--ink, #2b2238); border: 2px solid var(--gold); }
.merchant-call .mc-gift { font-size: 28px; }
.merchant-call b { display: block; font-size: 16px; }
.merchant-call span { font-size: 13.5px; }
.merchant-call .mbtn { margin: 0; }
/* 22단계: 튜토리얼 카드가 아래에 붙어 있을 때(.docked) — 왼쪽 도구·퀘스트 칸이 카드 뒤로 들어가지 않게 높이를 줄이고(넘치면 스크롤),
   오른쪽 칸 제목을 숨긴 만큼 「닫기 ESC」 버튼 자리를 비워 둠 (나침반과 겹치던 문제) */
.docked .tele-tools { max-height: calc(100vh - var(--dock) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.docked .tele-tools .tele-pip { display: none; }
.docked .screen-telescope .telescope-info { padding-top: 40px; }
/* 22단계: 성도 오른쪽 칸의 기준 별 안내·「기준 해제」 버튼 (따뜻한 종이 톤에 맞춤) */
.sm-guide { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--cream); border: 2px dashed var(--gold-deep); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.sm-guide.ok { border-style: solid; border-color: var(--leaf); }
.sm-guide > b { display: block; margin-bottom: 4px; font-size: 14.5px; }
.sm-guide ol { margin: 4px 0 6px; padding-left: 1.3em; }
.sm-guide small { display: block; color: var(--ink-soft); font-size: 12.5px; }
.sm-guide kbd { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.sm-unassign { margin-top: 8px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--paper-2); background: var(--paper); color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sm-unassign:hover { background: #fff; color: var(--ink); }

.quest kbd { font-size: 11px; } /* 22단계: 퀘스트 창 글자는 11px 이상 (교실 화면에서 읽히게) */
.mc-slot { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: rgba(43, 36, 64, 0.08); color: var(--ink-soft); white-space: nowrap; } /* 22단계: 카드가 성장 경로별로 묶여도 장비 부문(마운트·광학계 …)을 보여 줌 */

.dock-step .screen-telescope .chart-pop { bottom: calc(10px + var(--dock, 0px)); } /* 22단계: 튜토리얼 단계 카드가 아래에 붙으면 성도도 그만큼 위로 줄임 (지정 버튼이 가려지지 않게) */
/* 22단계: 아주 낮은 창(≤560px, 예: 800×480)에서는 튜토리얼 카드를 작게 — 「왜?/성공하면」 줄을 숨기고 글자·여백을 줄여 화면 버튼을 가리지 않게 */
@media (max-height: 560px) {
  .coach { padding: 8px 12px; font-size: 13px; line-height: 1.45; }
  .coach .coach-why, .coach .coach-bar { display: none !important; }
  .coach-title, .coach[data-state="telescope"] .coach-title { font-size: 14.5px; margin: 0 0 2px; }
  .coach-text { font-size: 13px; margin: 0.1em 0 0.3em; }
  .coach .coach-next { font-size: 13.5px; padding: 0.3em 0.9em; }
  .coach-done { padding: 4px 8px; margin: 4px 0; }
}

/* ═══ 23단계: 퀘스트 창(왼쪽 칸) 너비 약 1.5배 · 미션 이름 · 목표 고도·방위각 · 안내선 ═══ */
:root { --qw: clamp(230px, 24vw, 345px); } /* 예전 230px(좁은 창 196px) → 창 너비에 따라 약 1.5배까지 */
@media (min-width: 960px) {
  .tele-tools { width: var(--qw); }
  .screen-telescope:not(.zoom) { padding-left: calc(var(--qw) + 22px); padding-right: 12px; }
  .fov { width: min(calc(100vh - var(--dock) - 110px), calc(100vw - var(--qw) - 300px)); }
}
@media (min-width: 960px) and (max-width: 1100px) {
  :root { --qw: clamp(196px, 24vw, 294px); }
  .tele-tools { left: 12px; }
  .screen-telescope:not(.zoom) { padding-left: calc(var(--qw) + 20px); padding-right: 8px; }
  .fov { width: min(calc(100vh - var(--dock) - 110px), calc(100vw - var(--qw) - 250px)); }
}
@media (max-width: 959px) { .tele-tools { width: min(300px, 60vw); } } /* 작은 창: 예전처럼 좁게(접기 그대로) */
.quest .q-head { align-items: center; }
.quest .q-mission { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; color: #fff3cf; }
.quest .q-mission small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--gold); }
.quest .q-mission em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #b9c4dc; margin-left: 6px; }
.quest .route-step { margin: 6px 0 2px !important; }
.quest .q-target { margin: 6px 0 0; padding: 6px 8px; border-radius: 10px; background: rgba(126, 232, 200, 0.08); border: 1px solid rgba(126, 232, 200, 0.28); font-size: 12.5px; }
.quest .q-target[hidden] { display: none; }
.quest .qt-main { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; align-items: baseline; }
.quest .qt-main .qt-l { color: #a9b6d6; font-size: 12px; }
.quest .qt-main b { color: #b9f3e0; font-size: 14px; }
.quest .qt-sub { display: block; margin-top: 3px; color: #a9b6d6; font-size: 11.5px; line-height: 1.4; }
.quest.folded .q-target, .quest.folded .q-dist, .quest.folded .mb-next { display: none !important; }
.marks .mk-guide { fill: none; stroke: #b9f36a; stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0.85; }
.marks .mk-guide.pattern { stroke-dasharray: none; opacity: 0.7; }
.marks .mk-step-edge path { fill: #b9f36a; }
.marks .mk-step-edge-t { fill: #d8f8a8; }
.marks .mk-step circle { stroke: #b9f36a; }
.marks .mk-step text { fill: #d8f8a8; }
/* 23단계: 스포트라이트 여러 곳 동시 (SVG 마스크 + 금색 테두리) */
.tut-spot { inset: 0; left: 0; top: 0; width: auto; height: auto; border-radius: 0; box-shadow: none; transition: none; }
.tut-spot svg { position: absolute; inset: 0; display: block; }
.tut-ring { position: absolute; box-shadow: 0 0 0 3px #ffd27a, 0 0 22px 6px rgba(255, 210, 122, 0.55); }
/* 23단계: 지령의 간결한 탐색 순서 */
.route-mini .rm-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.route-mini .rm-list li { display: grid; grid-template-columns: 26px auto 1fr; align-items: baseline; gap: 4px 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 14.5px; }
.route-mini .rm-list li i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--night); font-weight: 800; font-size: 13px; align-self: center; }
.route-mini .rm-list li b { color: var(--cream); white-space: nowrap; }
.route-mini .rm-list li span { color: #cdd6ea; font-size: 13.5px; }
.route-mini .rm-list li[data-state="done"] { opacity: 0.7; }
.route-mini .rm-list li[data-state="done"] i { background: var(--leaf); }
.route-mini .rm-list li[data-state="current"] { background: rgba(244, 196, 99, 0.16); box-shadow: inset 3px 0 0 var(--gold); }
@media (max-width: 900px) { .route-mini .rm-list li { grid-template-columns: 26px 1fr; } .route-mini .rm-list li span { grid-column: 2; } }
/* 24단계: 바로우 렌즈 버튼 */
.barlow-btn { margin-top: 6px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0.4em 0.5em; }
.barlow-btn small { color: var(--dim); font-size: 12px; }
.barlow-btn.on { background: rgba(244, 196, 99, 0.22); border-color: var(--gold); }
.barlow-btn.on small { color: var(--gold); font-weight: 700; }
/* 24단계: 목표를 지나쳤을 때 다시 찾기 안내 */
.quest.lost { box-shadow: 0 0 0 2px rgba(255, 150, 120, 0.75); }
.quest .lost, .quest .warn { color: #ffb19a; font-weight: 700; }
.marks .mk-target-edge path { fill: #ff9f86; stroke: #2a1410; stroke-width: 1; }
.marks .mk-target-edge-t { fill: #ffb19a; font-weight: 700; font-size: 7.5px; text-anchor: middle; paint-order: stroke; stroke: rgba(8, 12, 30, 0.9); stroke-width: 2px; }
/* 24단계: 전문가 장비 칸 */
.shop-sec.premium .shop-slot { color: var(--gold); }
.shop-sec.premium .mcard { border-color: rgba(244, 196, 99, 0.45); }
/* 25단계: 상점 탭 · 천문대 꾸미기 */
.shop-tabs { display: flex; gap: 8px; margin: 10px 0 6px; }
.shop-tab { flex: 1; padding: 0.6em 0.8em; border-radius: 12px; font-weight: 700; font-size: 15px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--cream); cursor: pointer; }
.shop-tab.on { background: rgba(244, 196, 99, 0.22); border-color: var(--gold); color: #fff3cf; }
.shop-sec.decor .shop-slot { color: #ffb7d8; }
.decor-item .item-art { display: grid; place-items: center; }
.decor-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.decor-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 0.35em 0.7em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); color: var(--cream); font-size: 13px; cursor: pointer; }
.decor-chips .chip i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); display: inline-block; }
.decor-chips .chip.on { border-color: var(--gold); background: rgba(244, 196, 99, 0.2); font-weight: 700; }
.decor-item.stored { opacity: 0.85; }