:root {
  --bg: #0f0d09;
  --bg-soft: #151209;
  --card: #171410;
  --line: #3a3120;
  --line-strong: #52452a;
  --text: #e6dcc6;
  --muted: #93855f;
  --accent: #d8ab5f;
  --accent-bright: #e8c07a;
  --good: #a9c47f;
  --warn: #e8c07a;
  --bad: #e08a6f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(1200px 700px at 70% -10%, #1c1710 0%, var(--bg) 60%);
  color: var(--text);
  font-family: "IBM Plex Sans KR", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  min-height: 100vh;
}

/* ---------------------------------------------------------------- 상단바 */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 13, 9, .8);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  margin: 0;
  font-family: "Gowun Batang", serif;
  font-size: 23px;
  letter-spacing: .04em;
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

/* 제목은 처음 화면으로 가는 링크다. 배치는 .brand 의 것을 그대로 물려받는다 —
   좁은 화면에서 .brand 가 세로로 바뀌면 링크도 같이 바뀐다. */
.brand-link {
  display: inherit;
  flex-direction: inherit;
  align-items: inherit;
  gap: inherit;
  color: inherit;
  text-decoration: none;
}
.brand-link:hover { color: var(--accent-bright); }

/* 부제는 두 줄이다. 첫 줄은 '천문박명' 이라는 말의 뜻, 둘째 줄은 이 사이트가 무엇인지.
   처음 온 사람에게 급한 건 둘째 줄이라 그쪽을 더 밝게 둔다. */
.brand-sub {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  font-family: "IBM Plex Sans KR", sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.4;
  color: var(--muted);
  /* 폰에서 둘째 줄이 접힌다. 안 묶으면 '별 보러 나/갈 만한' 처럼 낱말이 쪼개진다. */
  word-break: keep-all;
}
.brand-sub-what {
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--text);
  opacity: .82;
}

.query {
  display: flex;
  gap: 8px;
  flex: 1 1 420px;
  min-width: 0;
}

.query input, .query button {
  font: inherit;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  color: var(--text);
  padding: 10px 12px;
}

#address { flex: 1 1 auto; min-width: 0; }
#when { flex: 0 0 auto; color-scheme: dark; }

.query button {
  background: var(--accent);
  color: #1c1710;
  font-weight: 700;
  letter-spacing: .1em;
  border: none;
  padding-inline: 20px;
  cursor: pointer;
}
.query button:hover { background: var(--accent-bright); }
.query button:disabled { opacity: .5; cursor: progress; }

/* 통째로 줄바꿈할 짧은 덩어리. 한글은 아무 글자 사이에서나 꺾인다('달 지는 시 / 각'). */
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- 레이아웃 */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  padding: 20px 24px 32px;
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
}

@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}
/* 아주 넓은 화면에서는 지도 패널(900px)과 사이드 사이를 조금 더 띄운다. */
@media (min-width: 1500px) {
  .layout { gap: 36px; }
}

/* 천문대 지도 탭 — 하늘 지도를 접고 한 칸으로 쓴다.
   천문대 지도 자체가 지도라, 하늘 지도를 옆에 둔 채 380px 사이드바에 밀어 넣으면
   둘 다 작아진다. 이 탭에서만 전체 폭을 준다. */
.layout--wide { grid-template-columns: minmax(0, 1fr); }
.layout--wide .sky-panel { display: none; }
/* 개발용 카드까지 화면 끝까지 늘어나면 글줄이 너무 길어져 읽기 나쁘다. */
.layout--wide .side > .card.sources { max-width: 720px; }

/* ---------------------------------------------------------------- 하늘 */

/* 지도·확대 안내·시간대·범례는 저마다 900px 로 가운데 서는데 '하늘에 비춰보기' 줄만
   폭 제한이 없어, 넓은 모니터에서 혼자 왼쪽 끝에 붙어 줄마다 시작점이 달랐다.
   패널 자체를 900px 로 묶어 한 덩어리로 가운데 둔다 (안쪽의 900px 들은 그대로 둬도 무해). */
.sky-panel {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  min-width: 0;
}

.canvas-wrap {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

#skymap {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  cursor: crosshair;
  /* 확대 전에는 세로 스크롤을 브라우저에 넘긴다 — 휴대폰에서는 지도가 화면을 거의 채우므로
     여기서 스크롤을 막으면 아래 판정 카드로 내려갈 방법이 없어진다.
     두 손가락(핀치)은 pan-y 가 허용하는 동작이 아니라서 그대로 우리 쪽으로 온다.
     확대한 뒤에는(.zoomed) 한 손가락 끌기가 지도 이동이어야 하므로 none 으로 바꾼다. */
  touch-action: pan-y;
}
/* 확대하면 하늘이 네 귀퉁이까지 찬다. 원형 클립을 두면 보이는 만큼을 도로 잘라낸다. */
.canvas-wrap.zoomed #skymap { touch-action: none; border-radius: 2px; cursor: grab; }
.canvas-wrap.dragging #skymap { cursor: grabbing; }
/* 확대 전 좌우 끌기로 시간을 흘리는 동안 — 가고 있는 시각을 지도 위쪽 가운데에 크게. */
.scrub-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  font-family: "Gowun Batang", serif;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-bright);
  background: rgba(15, 13, 9, .78);
  border: 1px solid var(--line-strong);
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}

.zoom-ctl {
  position: absolute;
  right: 4px;
  bottom: 8px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zoom-ctl button {
  width: 38px;
  height: 38px;
  font: 600 15px/1 "IBM Plex Sans KR", sans-serif;
  color: var(--accent);
  background: rgba(17, 14, 8, .92);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.zoom-ctl button:hover:not(:disabled) { color: var(--accent-bright); border-color: var(--accent); }
.zoom-ctl button:disabled { opacity: .38; cursor: default; }
#zoom-reset { width: 48px; font-size: 12px; }

.zoom-hint {
  max-width: 900px;
  margin: 8px auto 0;
  font-size: 12px;
  color: var(--muted);
}
.zoom-hint b { color: var(--accent); }

.loading, .verdict-loading {
  color: var(--muted);
  font-size: 14px;
}

.loading {
  position: absolute;
  inset: auto 0 46% 0;
  text-align: center;
  pointer-events: none;
}

.tooltip {
  position: absolute;
  z-index: 10;
  transform: translate(-50%, -140%);
  background: rgba(17, 14, 8, .96);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 8px 11px;
  font-size: 13px;
  line-height: 1.45;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.tooltip b { color: var(--accent-bright); }
.tooltip small { color: var(--muted); display: block; }

.time-scrub {
  max-width: 900px;
  margin: 12px auto 0;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.time-scrub label { font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.time-scrub b { color: var(--accent-bright); font-variant-numeric: tabular-nums; }
#hour-slider { width: 100%; margin: 10px 0 4px; accent-color: var(--accent); }
.scrub-hint { font-size: 12px; color: var(--muted); }

.legend {
  max-width: 900px;
  margin: 10px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  color: var(--muted);
  align-items: center;
}
.legend input[type=checkbox] { accent-color: var(--accent); }
.legend .mag { display: flex; align-items: center; gap: 8px; }
.legend .mag input { width: 110px; accent-color: var(--accent); }
.legend b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 사이드 */

.side { display: flex; flex-direction: column; gap: 16px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 18px 20px;
}
.card h2 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.count { color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.verdict .score-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.verdict .score {
  font-family: "Gowun Batang", serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.verdict .grade {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2em;
  padding: 5px 12px 5px 14px;
  border-radius: 0;
  border: 1.5px solid currentColor;
}
.grade-good { color: var(--accent-bright); background: rgba(232, 192, 122, .07); }
.grade-mid  { color: var(--warn); background: rgba(232, 192, 122, .05); }
.grade-bad  { color: var(--bad); background: rgba(224, 138, 111, .07); }

/* 큰 숫자 위 이름표. '100' 이 무엇의 숫자인지 안 적혀 있었다.
   즐기는 글자가 아니라 짚어주는 말이라 '관측 추천 시간대'(.rec-label)과 같은 크기로 맞춘다. */
.verdict .score-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 6px;
}
/* 예보가 없는 날은 이 자리에 이름표 대신 문장이 들어온다.
   자간 벌린 11px 로는 문장이 안 읽힌다. */
.verdict .score-label.sentence {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
}

.verdict .place { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.verdict .recommend {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--accent-bright);
  margin: 12px 0 8px;
}
.reasons { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.65; color: #c9bc9a; }
.reasons li { margin-bottom: 3px; }

.hourbar {
  display: flex;
  gap: 3px;
  margin: 14px 0 6px;
  height: 56px;
  align-items: flex-end;
}
.hourbar .h {
  flex: 1;
  border-radius: 0;
  position: relative;
  min-height: 4px;
  background: var(--line);
}
.hourbar .h.dark { outline: 1px solid rgba(216, 171, 95, .4); outline-offset: -1px; }
/* 예보 없음 — 점수가 낮은 게 아니라 모르는 것이므로 색이 아니라 빗금으로 구분한다. */
.hourbar .h.unknown {
  background: repeating-linear-gradient(45deg,
    rgba(147, 133, 95, .3) 0 3px, transparent 3px 6px);
}
.score.unknown { color: var(--muted); }
.grade-unknown { color: var(--muted); background: rgba(147, 133, 95, .1); }
.hourticks {
  display: flex;
  gap: 3px;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hourticks span { flex: 1; text-align: center; }
/* 관측 추천 시간대 — 막대와 칸을 똑같이 나눠 추천 구간 밑에만 금색 띠를 깐다. */
.hourbest { display: flex; gap: 3px; margin: -2px 0 4px; height: 3px; }
.hourbest span { flex: 1; }
.hourbest span.on { background: var(--accent-bright); }
/* 칸 사이 틈(3px)을 메워 끊긴 점선이 아니라 한 구간으로 읽히게 한다. */
.hourbest span.on + span.on { box-shadow: -3px 0 0 var(--accent-bright); }
.verdict .recommend { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.verdict .rec-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
}
.verdict .recommend.none { font-size: 13.5px; color: var(--muted); font-weight: 500; }

.con-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.con-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px dotted var(--line);
  font-size: 14px;
  cursor: pointer;
  border-radius: 0;
}
.con-list li:hover { background: rgba(216, 171, 95, .07); color: var(--accent-bright); }
.con-list li.active { background: rgba(216, 171, 95, .13); }
.con-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.con-list .dir { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
/* 목록 머리 — 오른쪽 숫자 칸이 무엇인지. '?' 는 사전의 고도 풀이를 띄운다. */
.con-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  margin: -4px 0 4px;
  padding: 0 4px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
}
.con-list .alt { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 12.5px; min-width: 46px; text-align: right; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.v-excellent { background: var(--good); }
.v-good { background: var(--accent); }
.v-fair { background: var(--warn); }
.v-poor { background: #6f6345; }

.sources { font-size: 11px; letter-spacing: .04em; color: #6f6345; line-height: 1.8; }
.sources p { margin: 0; }
.sources a { color: var(--accent); text-decoration: none; }
.sources a:hover { text-decoration: underline; }

/* 페이지 맨 아래 데이터 출처. 항목은 한 줄에 이어 쓰고 '·'로 가른다 —
   한 항목 안에서는 꺾이지 않게 해서 '(CC BY-SA / 4.0)' 같은 조각이 안 생긴다. */
.site-footer {
  max-width: 1600px;
  margin: 0 auto;
  padding: 18px 24px calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.site-footer h2 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
}
.src-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* 모든 항목 앞에 '·'를 붙이고 목록을 그 폭만큼 왼쪽으로 밀어 잘라낸다.
     그래야 줄이 꺾여 새 줄 맨 앞에 온 '·'도 가려진다 (li + li 로는 못 가린다). */
  margin-left: -1.6em;
  clip-path: inset(0 0 0 1.6em);
}
.src-list li { white-space: nowrap; }
.src-list li::before {
  content: "·";
  display: inline-block;
  width: 1.6em;
  text-align: center;
  color: var(--line-strong);
}
.site-footer .sources-more { margin-top: 6px; }
/* 휴대폰에선 한 항목이 화면보다 길 수 있다. 줄바꿈을 풀고 한 줄에 하나씩 둔다. */
@media (max-width: 640px) {
  .src-list { display: block; margin-left: 0; }
  .src-list li { white-space: normal; }
  .src-list li::before { content: none; }
}

.note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--warn);
  background: rgba(232, 192, 122, .07);
  border-radius: 0;
  border-left: 2px solid var(--warn);
  padding: 8px 10px;
}

/* ---------------------------------------------------------------- 별자리 상세 */



.detail-head h3 {
  margin: 0;
  padding-right: 36px;   /* 닫기 버튼 자리 */
  font-family: "Gowun Batang", serif;
  font-size: 23px;
  letter-spacing: .02em;
}
.detail-sub {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
  margin-top: 3px;
}

/* 미니 성도. 전천 지도와 달리 이 별자리 하나만 꽉 차게 담는다. */
.detail-chart {
  width: 100%;
  display: block;
  margin: 14px 0 12px;
  border-radius: 0;
  border: 1px solid var(--line-strong);
  background: #0c0a06;
}
/* 위에서 display 를 정한 순간 브라우저 기본 [hidden]{display:none} 을 이겨 버린다.
   canvas.hidden = true 를 걸어도 안 숨어, 사진을 켜면 옛 성도가 사진 위에 남아 있었다
   (2026-09-20). 사진 자리(.sky-photo)에는 있던 짝이 여기만 빠져 있었다. */
.detail-chart[hidden] { display: none; }

.detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.detail-stats > div {
  background: rgba(216, 171, 95, .06);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 9px 8px;
  text-align: center;
  min-width: 0;
}
.detail-stats b {
  display: block;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-stats span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

/* 찾는 법 — 이 화면에서 사용자가 실제로 쓰는 문장이라 가장 눈에 띄어야 한다. */
.detail-tip {
  margin: 0 0 12px;
  padding: 11px 13px;
  background: rgba(216, 171, 95, .09);
  border-left: 2px solid var(--accent);
  border-radius: 0;
  font-size: 13.5px;
  line-height: 1.65;
}

.detail-note {
  margin: 0 0 9px;
  font-size: 13px;
  line-height: 1.7;
  color: #c9bc9a;
}
.detail-note.story { color: var(--muted); font-size: 12.5px; }
.detail-note.muted { color: var(--muted); font-style: italic; }

/* 신화 본문. 한 줄 요약(story)이 있던 자리를 대신한다 — 둘 다 두면 첫 문장이 겹친다.
   찾는 법(위)과 성격이 다른 읽을거리라 가는 선으로 한 번 끊는다. */
.detail-myth {
  margin: 14px 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.detail-myth h4 {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--muted);
}
.detail-myth p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text);
  word-break: keep-all;
}

/* 좁은 화면에서는 모달을 아래에서 올라오는 시트로 — 손이 닿는 곳에 둔다. */
@media (max-width: 560px) {
  /* 한 줄에 [주소][날짜][조회] 를 욱여넣으면 #address 가 0 에 가깝게 찌그러진다.
     #when 은 flex: 0 0 auto 라 안 줄고, 단추는 글자가 '조/회' 로 쪼개진다.
     이 앱의 정체가 '주소를 넣으면 그 자리 하늘' 인데 그 칸이 안 보이면 무슨 사이트인지 알 수 없다.
     주소에 한 줄을 통째로 주고 날짜·조회를 아랫줄로 내린다. */
  .query { flex-wrap: wrap; }
  #address { flex: 1 1 100%; }
  #when { flex: 1 1 auto; min-width: 0; }
  .query button { flex: 0 0 auto; }

  /* 제목이 길어져(오늘밤 → 천문박명) 부제까지 한 줄에 안 들어간다.
     .brand 가 nowrap 이라 그대로 두면 헤더가 가로로 넘친다. 줄을 바꾼다. */
  .brand { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
  /* 두 줄짜리 부제는 폰에서 넉 줄까지 접힌다. 자간을 줄이고 줄을 붙여 머리를 덜 먹게 한다. */
  .brand-sub { letter-spacing: .04em; line-height: 1.4; gap: 2px; }
  .brand-sub-what { font-size: 12px; letter-spacing: .01em; }

  /* 휴대폰에서는 지도가 클수록 별자리 이름이 읽힌다. .layout 의 좌우 여백(24px)을
     지도에만 되돌려준다 — 확대를 붙였어도 처음 보이는 크기가 클수록 낫다. */
  .canvas-wrap { width: calc(100% + 48px); margin-inline: -24px; }
  .zoom-ctl { right: 26px; }
  .zoom-ctl button { width: 42px; height: 42px; }   /* 손가락으로 누르는 크기 */
  #zoom-reset { width: 52px; }
  @keyframes sheet-in {
    from { transform: translateY(24px); opacity: .6; }
    to   { transform: none; opacity: 1; }
  }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%;
    max-height: 88vh;
    border-radius: 0;
    outline: none;
    animation: sheet-in .18s ease-out;
  }
  @keyframes sheet-in {
    from { transform: translateY(24px); opacity: .6; }
    to   { transform: none; opacity: 1; }
  }
  .detail-stats { grid-template-columns: 1fr; }
  .detail-stats > div { display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
  .detail-stats span { margin-top: 0; }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 6, 3, .74);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }
/* 모달이 떠 있는 동안 뒤 페이지가 같이 스크롤되면 위치를 잃는다. */
body.modal-open { overflow: hidden; }
.modal {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line-strong);
  outline: 1px solid rgba(107, 88, 54, .4);
  outline-offset: 3px;
  border-radius: 2px;
  padding: 22px 24px 24px;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
  animation: modal-in .16s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  font: inherit;
  font-size: 26px;
  line-height: 1;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 0;
}
.modal-close:hover { color: var(--accent-bright); background: rgba(216, 171, 95, .1); }

/* ---------------------------------------------------------------- 성도 표시 방식 */

.chart-box { position: relative; margin: 0 0 12px; }

.chart-box .detail-chart { margin: 0; }

/* 확대 단추는 하늘 지도의 것을 그대로 쓰되(.zoom-ctl) 성도 안쪽 오른쪽 아래에 둔다.
   판화가 판을 가득 채우므로 살짝 띄우고, 위에 뜨도록 z-index 를 준다. */
.chart-zoom { right: 6px; bottom: 6px; }
.chart-zoom button { width: 32px; height: 32px; font-size: 14px; }
.chart-zoom #chart-zoom-reset { width: 42px; font-size: 11px; }

/* 확대 전에는 세로 끌기를 브라우저에 넘긴다 — 모달 본문이 스크롤돼야 아래 글을 읽는다.
   확대한 뒤에만 한 손가락 끌기를 우리가 가져온다. 하늘 지도와 같은 규칙이다. */
.detail-chart, .photo-view { touch-action: pan-y; }
.chart-box.zoomed .detail-chart,
.chart-box.zoomed .photo-view { touch-action: none; cursor: grab; }
.chart-box.dragging .detail-chart,
.chart-box.dragging .photo-view { cursor: grabbing; }

/* 사진을 확대하면 전체 틀 밖으로 나가는 부분이 생긴다. 여기서 잘라 담는다.
   (보이는 창을 좁히는 것이지 사진을 자르는 게 아니다 — ×1.0 이면 원본 전체다.) */
.photo-view {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #070c18;
}

/* 성도 **위쪽 바깥**에 둔다.
   예전에는 캔버스 오른쪽 위에 얹었다. 그때는 검은 배경에 점과 선뿐이라 구석이
   비어 있었지만, 지금은 판화가 판을 가득 채우고 사진에는 원저작자가 넣은
   별자리 이름이 바로 그 자리에 있다. 단추도 둘에서 셋으로 늘었다. 얹으면 가린다. */
.chart-modes {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 14px 0 6px;
  padding: 0;
  background: none;
  border: none;
}
/* 얹혀 있을 때는 배경 패널이 테두리 노릇을 했다. 밖으로 나오니 단추 하나하나가
   테두리를 가져야 컨트롤로 읽힌다 — 페이지 상단 탭(.tab)과 같은 결로 맞춘다.
   .seg 는 다른 화면의 전환 단추가 같은 모양을 쓰는 이름이다. .chart-modes 를 빌려 쓰지 않는다 —
   상세 코드·테스트가 .chart-modes 를 '성도 표시 단추'로 찾는다. */
.seg { display: flex; gap: 6px; }
.chart-modes button, .seg button {
  font: inherit;
  font-size: 11.5px;
  letter-spacing: .04em;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.chart-modes button:hover, .seg button:hover { color: var(--accent-bright); border-color: var(--accent); }
.chart-modes button.on, .seg button.on {
  background: rgba(232, 192, 122, .16);
  border-color: var(--accent);
  color: var(--accent-bright);
  font-weight: 600;
}

/* 선·그림은 붙은 두 칸, 사진은 그 옆의 켜고 끄는 스위치. 성격이 달라 모양도 다르게 한다. */
.chart-modes { align-items: center; }
/* 모달에서 상세 페이지로 가는 '크게 보기'. 맨 왼쪽에 붙이고 나머지는 오른쪽에 둔다. */
.chart-modes .chart-expand { margin-right: auto; display: inline-flex; align-items: center; gap: 5px; }
.chart-modes .chart-expand span { font-size: 13px; line-height: 1; }
/* 페이지에서는 이미 크게 보고 있다. 단추만 있던 줄은 통째로 접는다. */
#detail-host-page .chart-expand { display: none; }
#detail-host-page .chart-modes.only-expand { display: none; }
.chart-modes .mode-seg { display: flex; gap: 6px; }
.chart-modes .mode-seg + .photo-switch { margin-left: 8px; }
/* 사진을 켠 동안 선/그림은 가려져 있다. 누르면 사진은 켠 채 '끄면 돌아갈 쪽'만 바꾼다.
   고른 쪽까지 흐려 놓으면 눌러도 아무 일도 안 일어난 것처럼 보인다(2026-09-20 신고).
   그래서 고르지 않은 쪽만 흐리게 두고, 고른 쪽은 선명하게 남긴다. */
.chart-modes.photo-on .mode-seg button:not(.on) { opacity: .5; }
.chart-modes.photo-on .mode-seg button:hover { opacity: 1; }
.chart-modes .photo-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: transparent;
}
.chart-modes .photo-switch.on { background: transparent; border-color: transparent; }
.photo-switch .knob {
  position: relative;
  width: 26px;
  height: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  transition: background .15s, border-color .15s;
}
.photo-switch .knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s, background .15s;
}
.photo-switch.on .knob { border-color: var(--accent); background: rgba(232, 192, 122, .22); }
.photo-switch.on .knob::after { transform: translateX(12px); background: var(--accent-bright); }

.chart-note {
  margin: -4px 0 12px;
  font-size: 12px;
  color: var(--warn);
}
.chart-note[hidden] { display: none; }
/* 사진을 보는 중이라 선/그림을 눌러도 화면이 안 바뀐다는 걸 말로 알려 준다.
   경고가 아니라 안내라 노란색(--warn) 대신 흐린 글자로. */
.chart-note.photo-hint { color: var(--muted); }

.plate-credit {
  margin: -6px 0 12px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.plate-credit i { font-style: italic; }
.plate-credit[hidden] { display: none; }

/* 실사 사진 — 원본 그대로 건다. 잘라내면 CC BY-SA 동일조건 조항이 걸린다.
   그래서 object-fit: cover 로 채우지 않고 contain 으로 전체를 보여준다. */
.sky-photo {
  margin: 0 0 12px;
}
.sky-photo[hidden] { display: none; }
.sky-photo img {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  background: #070c18;
  transform-origin: 0 0;
}
.sky-photo figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}
.sky-photo figcaption a { color: inherit; }

/* ---------------------------------------------------------------- 탭 / 내 별자리 */

.tabs {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.tab {
  padding: 9px 18px;
  border-radius: 0;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
}

.tab:hover { color: var(--accent-bright); border-color: var(--accent); }

.tab.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #1c1710;
}

.bd-lead {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.bd-form {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.bd-form input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 14px;
}

.bd-form button {
  padding: 10px 18px;
  border-radius: 2px;
  border: 0;
  background: var(--accent);
  color: #1c1710;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
}

.bd-form button:hover { background: var(--accent-bright); }
.bd-form button:disabled { opacity: .5; cursor: progress; }

/* 달력이 말하는 별자리 → 실제 별자리. 어긋남 자체가 이 기능의 내용이라 나란히 놓는다. */
.bd-signs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 0;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.bd-sign { flex: 1; min-width: 0; }
.bd-sign span { display: block; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.bd-sign b { display: block; font-family: "Gowun Batang", serif; font-size: 20px; margin: 3px 0; }
.bd-sign small { display: block; font-size: 11px; color: var(--muted); }
.bd-sign.muted b { color: var(--muted); font-weight: 600; }
.bd-arrow { color: var(--accent); font-size: 18px; }

.bd-shift, .bd-note, .bd-faint {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
}

.bd-note { color: var(--text); }

.bd-faint {
  padding: 10px 12px;
  border-left: 2px solid var(--warn);
  background: rgba(232, 192, 122, .06);
  border-radius: 0;
}

.bd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.bd-row > div { flex: 1; min-width: 0; }
.bd-row b { display: block; font-size: 13px; }
.bd-row small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

.bd-jump, .bd-detail {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 0;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
}

.bd-jump:hover, .bd-detail:hover { background: rgba(216, 171, 95, .12); color: var(--accent-bright); }

.bd-detail {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  font-size: 13px;
}

/* 내 별자리 탭 안의 내 별자리 | 별자리 궁합 전환. */
.mine-seg { margin: 0 0 12px; }
.mine-seg button { flex: 1; padding: 8px 11px; font-size: 12.5px; }

/* ---------------------------------------------------------------- 별자리 목록 (88개) */

.cat-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 14px;
}
.cat-tools input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.cat-tools input[type="search"]:focus { outline: none; border-color: var(--accent); }

.cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 18px;
}
/* 칸을 고정한 격자 — 점 · 아이콘 · 이름 · 방향고도. 예전엔 flex 라 '그림 사진' 표시가 있는 행과
   없는 행에서 오른쪽 칸이 제각각 시작했고, 긴 이름은 두 줄로 꺾여 그 행만 높았다(2026-09-11 지적).
   칸마다 자리를 못 박아 둔다 — 아이콘 파일이 안 와도 이름이 아이콘 칸으로 밀려 들어오지 않는다. */
.cat-item {
  display: grid;
  grid-template-columns: 8px 38px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  width: 100%;
  padding: 10px 6px;
  border: 0;
  border-bottom: 1px dotted var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cat-item:hover, .cat-item:focus-visible {
  background: rgba(216, 171, 95, .07);
  outline: none;
}
.cat-item:hover .cat-nm b { color: var(--accent-bright); }
/* 별자리 아이콘(icons88.js). 지평선 아래 별자리는 이름처럼 흐리게. */
.cat-item > .dot { grid-column: 1; }
.cat-ico { grid-column: 2; width: 38px; height: 38px; }
.cat-ico svg { display: block; width: 100%; height: 100%; }
.cat-item.is-down .cat-ico { opacity: .45; filter: grayscale(.5); }
.cat-nm { grid-column: 3; min-width: 0; }
.cat-nm b {
  display: block; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   /* 두 줄로 꺾여 행 높이가 틀어지지 않게 */
}
.cat-nm small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* '그림 · 사진' 은 이름 아래 작은 줄 맨 앞에 — 오른쪽 칸 위치를 흔들지 않는다. */
.cat-tags { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: 1px; }
.cat-tags i {
  font-style: normal;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .04em;
  padding: 0 4px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}
.cat-where {
  grid-column: 4;
  text-align: right;
  font-size: 12.5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 지평선 아래 — 못 고르는 게 아니라 지금 안 떠 있을 뿐이라 흐리게만 한다. */
.cat-item.is-down .cat-nm b { color: var(--muted); font-weight: 500; }
.cat-item.is-down .cat-where { color: #6f6345; }
.cat-empty {
  grid-column: 1 / -1;
  padding: 18px 4px;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 720px) {
  /* 한 줄에 다 넣으면 글자가 한 자씩 세로로 쌓인다. 두 개씩 두 줄로 편다(탭 4개). */
  .tabs { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .tab { flex: 1 1 40%; padding: 9px 6px; white-space: nowrap; letter-spacing: .02em; }
  .bd-signs { flex-direction: column; align-items: stretch; gap: 6px; }
  .bd-arrow { transform: rotate(90deg); text-align: center; }
}

/* ── AR 하늘 보기 ──────────────────────────────────────────────
   전체화면 오버레이. 본공사 중인 기능이라 한 덩이로 모아 뒀다. */
body.ar-open { overflow: hidden; }

.ar-root {
  position: fixed; inset: 0; z-index: 200;
  background: #000; overflow: hidden;
}
.ar-root video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* 카메라를 못 켰을 때는 검은 하늘 위에 그린다. 밤에는 어차피 카메라가 까맣다. */
.ar-root.ar-nocam { background: #05070f; }
.ar-canvas { position: absolute; inset: 0; }

.ar-hud {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px;
  /* 윗줄 오른쪽 단추 두 개(닫기 44 + '설정 옵션 가리기' 약 135 + 사이 여백)를 비운다.
     안 묶으면 '북북동 123도 · 고도 45도 · 달 보정' 같은 긴 줄이 단추 밑으로 기어든다. */
  max-width: calc(100% - 245px);
  padding: 6px 10px; border-radius: 8px;
  background: rgba(5, 9, 18, .66); color: #ffd76e;
  font: 600 14px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  word-break: keep-all;
}
.ar-close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 6px); right: 10px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(5, 9, 18, .6);
  color: #fff; font-size: 26px; line-height: 1;
}
/* 설정 옵션 가리기/보이기. 닫기 옆에 둔다 — 화면 조절은 윗줄에 모인다.
   가려도 이 단추만은 남긴다(흐릿해질 뿐). 사라지면 다시 꺼낼 길이 없다. */
.ar-toggle {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 6px); right: 62px;
  height: 44px; padding: 0 15px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(5, 9, 18, .6);
  color: #dce7ff; font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.ar-toggle.off { color: #8e9bb6; border-color: rgba(255, 255, 255, .16); }
/* 휴대폰: 글씨가 길어 윗줄을 단추가 거의 다 먹는다. 방위 표시를 단추 아래 줄로
   내리고 폭을 돌려준다 — 옆에 끼우면 '북북동 123도'가 석 줄로 접힌다. */
@media (max-width: 560px) {
  .ar-toggle { padding: 0 12px; font-size: 13px; }
  .ar-hud {
    top: calc(env(safe-area-inset-top, 0px) + 58px);
    max-width: calc(100% - 24px);
  }
}
/* 접었을 때: 카메라 영상과 그 위에 그린 하늘만 남는다.
   십자선도 같이 감춘다 — 보정할 때 쓰는 기준이라 혼자 남으면 할 일이 없다. */
.ar-root.ar-bare .ar-hud,
.ar-root.ar-bare .ar-panel,
.ar-root.ar-bare .ar-cross { display: none; }
/* 십자선 — 보정할 때 천체를 가운데 두는 기준 */
.ar-cross { position: absolute; inset: 0; pointer-events: none; }
.ar-cross::before, .ar-cross::after {
  content: ''; position: absolute; background: rgba(255, 215, 110, .8);
}
.ar-cross::before { left: 50%; top: 42%; bottom: 42%; width: 1px; }
.ar-cross::after { top: 50%; left: 42%; right: 42%; height: 1px; }

.ar-panel {
  position: absolute; left: 10px; right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  padding: 10px 12px; border-radius: 12px;
  background: rgba(5, 9, 18, .74); border: 1px solid rgba(120, 150, 210, .3);
}
.ar-panel-title { color: #b9c6e2; font-size: 12px; margin-bottom: 8px; }
.ar-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.ar-btns button {
  padding: 9px 14px; border-radius: 9px; font-size: 14px; font-weight: 600;
  border: 1px solid #3a63c0; background: #1d356b; color: #dce7ff;
}
.ar-btns button.ar-fine { border-color: #4a5a80; background: #1a2338; font-weight: 500; }
.ar-lab { color: #93a0bb; font-size: 12px; }

.ar-entry { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.ar-entry button {
  padding: 11px 18px; border-radius: 10px; font-size: 15px; font-weight: 700;
  border: 1px solid #6b5a2a; background: linear-gradient(180deg, #2a2416, #1c1810);
  color: #ffd76e; cursor: pointer;
}
.ar-entry button:disabled { opacity: .45; cursor: default; }
.ar-entry-hint { color: #8a94ab; font-size: 12px; }

/* ── 별자리 궁합 ───────────────────────────────────────────────
   사실 칸과 재미 칸을 **눈에 보이게** 가른다. 점성술 문장이 계산 결과처럼
   읽히면 이 서비스가 파는 게 통째로 값이 떨어진다. 그래서 색·테두리·꼬리표를 다르게 준다. */
.cp-form label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #93a0bb; }
.cp-form { flex-wrap: wrap; gap: 10px; }

.cp-pair { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 12px; }
.cp-person { text-align: center; }
.cp-actual { font-size: 19px; font-weight: 700; color: #ffd76e; }
.cp-sign { font-size: 12px; color: #8a94ab; margin-top: 2px; }
.cp-x { color: #5d6883; font-size: 18px; }

.cp-box { border-radius: 12px; padding: 14px 16px; margin-top: 12px; }
.cp-tag {
  font-size: 11px; letter-spacing: .05em; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; display: inline-block; margin-bottom: 10px;
}
/* 사실 칸 — 이 앱의 기본 색(금빛 관측 일지) */
.cp-sky { background: rgba(35, 30, 16, .55); border: 1px solid rgba(180, 150, 70, .4); }
.cp-sky .cp-tag { background: rgba(180, 150, 70, .22); color: #ffd76e; }
.cp-sep { font-size: 28px; font-weight: 800; color: #ffd76e; }
.cp-sep span { font-size: 13px; font-weight: 400; color: #b9a878; margin-left: 6px; }
.cp-when { margin-top: 10px; font-size: 13px; color: #cbb98a; }

/* 재미 칸 — 회색으로 확실히 죽여 둔다. 옆 칸과 같은 무게로 보이면 안 된다. */
.cp-fun { background: rgba(20, 24, 36, .6); border: 1px dashed rgba(120, 135, 170, .45); }
.cp-fun .cp-tag { background: rgba(120, 135, 170, .18); color: #9fb0d0; }
.cp-score { font-size: 26px; font-weight: 800; color: #9fb0d0; }
.cp-score span { font-size: 14px; font-weight: 400; margin-left: 2px; }
.cp-sentence { margin: 8px 0 0; line-height: 1.6; }
.cp-fun .cp-sentence { color: #aab6cc; }
.cp-disclaimer { margin: 10px 0 0; font-size: 11px; color: #737f99; }
.cp-share-note { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.cp-share-note.ok { color: var(--accent-bright); }
.cp-share-url { width: 100%; margin-bottom: 4px; font: inherit; padding: 6px 8px;
  background: transparent; color: var(--text, inherit); border: 1px solid var(--line-strong); }


/* ---------------------------------------------------------------- 천문 사전 */

.wiki-list { margin-top: 14px; }

/* 목록에서는 한 줄 뜻만 보이고, 눌러야 본문이 열린다.
   16개를 다 펼쳐 두면 훑어보기가 안 된다 — 찾으러 오는 화면이지 읽으러 오는 화면이 아니다. */
.wiki-item {
  border-top: 1px solid var(--line);
  padding: 11px 0;
}
.wiki-item:last-child { border-bottom: 1px solid var(--line); }

.wiki-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.wiki-item summary::-webkit-details-marker { display: none; }
.wiki-item summary::before {
  content: "＋";
  color: var(--muted);
  font-size: 12px;
  width: 14px;
  flex: none;
}
.wiki-item[open] summary::before { content: "－"; }

.wiki-term {
  font-family: "Gowun Batang", serif;
  font-size: 16px;
  color: var(--accent-bright);
  letter-spacing: .03em;
  flex: none;
}
.wiki-short {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  flex: 1 1 320px;
}
.wiki-body {
  margin: 10px 0 0 26px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text);
}
.wiki-also {
  margin: 8px 0 0 26px;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .03em;
}

@media (max-width: 560px) {
  .wiki-short { flex-basis: 100%; }
  .wiki-body, .wiki-also { margin-left: 0; }
}

/* 사전에 있는 말. 본문 흐름을 끊지 않게 밑줄만 점선으로 두고 색은 거의 그대로 둔다. */
.term-link {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-bottom: 1px dotted var(--accent);
  line-height: inherit;
}
.term-link:hover,
.term-link:focus-visible { color: var(--accent-bright); border-bottom-style: solid; }

/* 사전에 있는 말 옆의 '?'. 누르면(마우스는 올리면) 그 자리에서 뜻이 뜬다.
   글자는 ::before 로 그린다 — 본문 글자에 '?' 가 섞이면 복사·낭독에 딸려 나온다. */
.term-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin: 0 1px 0 2px;
  padding: 0;
  vertical-align: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: 700 9.5px/1 "IBM Plex Sans KR", sans-serif;
  cursor: help;
}
.term-help::before { content: "?"; }
.term-help:hover, .term-help:focus-visible, .term-help.on {
  color: #1c1710;
  background: var(--accent);
  border-color: var(--accent);
  outline: none;
}
/* 손가락 기기 — 14px 은 누르기엔 작다. 보이는 원은 그대로 두고 눌리는 자리만 넓힌다. */
@media (hover: none) {
  .term-help { position: relative; }
  .term-help::after { content: ""; position: absolute; inset: -10px; }
}

/* 떠 있는 풀이. 상세 모달(100) 안의 말에서도 떠야 하므로 그보다 위, AR(200)보다는 아래. */
.term-pop {
  position: fixed;
  z-index: 150;
  width: min(320px, calc(100vw - 16px));
  padding: 14px 16px 12px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  color: var(--text);
}
.term-pop[hidden] { display: none; }
.term-pop-title {
  display: block;
  padding-right: 22px;
  font-family: "Gowun Batang", serif;
  font-size: 16px;
  color: var(--accent-bright);
}
.term-pop-short { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.term-pop-body { margin: 8px 0 0; font-size: 13px; line-height: 1.75; }
.term-pop-body:empty, .term-pop-short:empty { display: none; }
.term-pop-close {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.term-pop-close:hover { color: var(--accent-bright); }
.term-pop-more {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  letter-spacing: .03em;
  cursor: pointer;
}
.term-pop-more:hover { color: var(--accent-bright); text-decoration: underline; }
/* 마우스로 띄운 풀이는 올렸다 떼면 사라지니 닫기 단추가 필요 없다. */
.term-pop:not(.term-pop--sheet) .term-pop-close { display: none; }
.term-pop:not(.term-pop--sheet) .term-pop-title { padding-right: 0; }

/* 손가락 기기 — 아래에서 올라오는 시트. 상세 모달이 폰에서 시트인 것과 같은 결. */
.term-pop--sheet {
  left: 0 !important;
  right: 0;
  bottom: 0;
  top: auto !important;
  width: auto;
  max-height: 60vh;
  overflow-y: auto;
  padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
  border-width: 1px 0 0;
}
.term-pop-dim {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(0, 0, 0, .45);
}
.term-pop-dim[hidden] { display: none; }

/* 사전으로 건너뛰었을 때 어느 항목인지 잠깐 짚어 준다. */
.wiki-item.just-opened {
  animation: term-flash 1.6s ease-out;
}
@keyframes term-flash {
  from { background: rgba(232, 192, 122, .22); }
  to   { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .wiki-item.just-opened { animation: none; outline: 1px solid var(--accent); }
}

/* 별 이름의 뜻. 이름 아래 한 줄로 붙어 목록의 리듬을 흐트러뜨리지 않게 한다. */
.star-row .nm { display: block; }
.star-mean {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
}
.star-origin {
  opacity: .72;
  font-size: 10.5px;
  margin-left: 4px;
}


/* ---------------------------------------------------------------- 천문대 지도 */

/* 넓은 화면에서는 지도 옆에 목록, 좁은 화면에서는 지도 아래 목록.
   휴대폰에서 지도와 목록을 나란히 두면 둘 다 못 읽는 폭이 된다. */
.obs-wrap {
  display: grid;
  /* 한반도는 세로로 길어서 지도 칸을 마냥 넓히면 세로가 화면을 넘긴다(높이 = 폭 × 1.32).
     지도는 560px 에서 멈추고 남는 폭은 목록에 준다 — 목록이 길어서 그쪽이 이득이다. */
  grid-template-columns: minmax(280px, 560px) minmax(300px, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 760px) {
  .obs-wrap { grid-template-columns: 1fr; }
}

.obs-map-box { position: relative; }
#obs-map {
  width: 100%;
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  /* 확대 전에는 세로 스크롤을 브라우저에 넘긴다. 지도가 화면을 거의 채우므로
     여기서 스크롤을 막으면 아래 목록으로 내려갈 방법이 없어진다. */
  touch-action: pan-y;
  cursor: pointer;
}
.obs-map-box.zoomed #obs-map { touch-action: none; cursor: grab; }
.obs-map-box.dragging #obs-map { cursor: grabbing; }
.obs-zoom { right: 6px; bottom: 10px; }
.obs-zoom button { width: 32px; height: 32px; font-size: 14px; }
.obs-zoom #obs-zoom-reset { width: 42px; font-size: 11px; }

.obs-legend {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px;
  font-size: 10.5px;
  color: var(--muted);
  background: rgba(11, 9, 6, .78);
  border: 1px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
}
.obs-legend span { display: flex; align-items: center; gap: 5px; }
.obs-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* koreamap.js 의 colorFor 와 같은 색이어야 한다. 한쪽만 고치면 범례가 거짓말을 한다. */
.obs-legend i[data-g="best"] { background: #e8c07a; }
.obs-legend i[data-g="good"] { background: #c9a86a; }
.obs-legend i[data-g="mid"]  { background: #9d8f6b; }
.obs-legend i[data-g="bad"]  { background: #b0705c; }
.obs-legend i[data-g="none"] { background: #6b6350; }

.obs-status {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}

.obs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 지도와 키를 맞춘다. 지도만 길고 목록이 짧으면 오른쪽이 휑하다. */
  max-height: 62vh;
  overflow-y: auto;
}
.layout--wide .obs-list { max-height: 72vh; }
.obs-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.obs-row:hover { background: rgba(232, 192, 122, .05); }
.obs-row.on { background: rgba(232, 192, 122, .11); }
.obs-rank {
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  background: none !important;
  font-variant-numeric: tabular-nums;
}
.obs-name { font-size: 13px; line-height: 1.35; }
.obs-name em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.obs-grade { font-size: 11px; padding: 2px 6px; border-radius: 2px; white-space: nowrap; }
/* 카카오맵 길찾기. 손가락으로 누르기 좋게 글자보다 넉넉히 잡는다. */
.obs-route {
  font-size: 11px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.obs-route:hover { border-color: var(--accent); color: var(--accent-bright); }

/* 출처 표시는 ODbL 의 조건이다. 눈에 안 띄게 줄이더라도 지우지 말 것. */
.obs-credit {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.obs-credit a { color: inherit; }

.obs-note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}


/* ---------------------------------------------------------------- 라이선스 페이지 */

.sources-more { margin-top: 10px; }
.sources-more a { color: var(--accent); }

.lic-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}
.lic-back { margin: 0 0 18px; }
.lic-back a { color: var(--accent); font-size: 13px; }
.lic-page h2 { margin: 0 0 10px; font-size: 20px; }
.lic-lead { margin: 0 0 26px; font-size: 13px; line-height: 1.75; color: var(--muted); }

.lic-block {
  padding: 16px 0 18px;
  border-top: 1px solid var(--line);
}
.lic-block h3 {
  margin: 0 0 8px;
  font-size: 15px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.lic-tag {
  font-size: 11px;
  font-weight: 400;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 1px 6px;
}
.lic-use { margin: 0 0 8px; font-size: 13px; line-height: 1.7; }
.lic-duties { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.lic-links { margin: 0; font-size: 12px; }
.lic-links a { color: var(--accent); }

.lic-text { margin-top: 10px; }
.lic-text summary { font-size: 12px; color: var(--muted); cursor: pointer; }
/* 원문은 줄바꿈을 그대로 살리되 좁은 화면에서 가로로 새지 않게 감싼다. */
.lic-text pre {
  margin: 8px 0 0;
  padding: 12px 14px;
  font-size: 11.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--muted);
}


/* ---------------------------------------------------------------- 별자리 상세 페이지 */

/* 예전에는 모달이었다. 성도를 크게 보라고 확대·판화·사진을 붙여 놓고 정작
   사이드바 폭의 상자 안에서 보게 하고 있었다. 지금은 화면 하나를 다 쓴다. */
.det-card { padding: 20px 22px 24px; }

.det-back {
  margin: 0 0 14px;
  padding: 5px 12px;
  font: 400 12px/1 "IBM Plex Sans KR", sans-serif;
  color: var(--accent);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
}
.det-back:hover { color: var(--accent-bright); border-color: var(--accent); }

/* 모달에서는 한 줄로 흐른다(좁으니 나눌 폭이 없다). 2단은 전체 페이지에서만. */
.det-wrap { margin-top: 12px; }
#panel-constellation .det-wrap {
  display: grid;
  /* 성도가 주인공이라 왼쪽을 넓게 잡는다. 오른쪽 글은 읽기 좋은 폭에서 멈춘다. */
  grid-template-columns: minmax(320px, 1.35fr) minmax(300px, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 14px;
}
@media (max-width: 860px) {
  #panel-constellation .det-wrap { grid-template-columns: 1fr; gap: 18px; }
}

/* '연관 콘텐츠' — 신화 글 바로 뒤, 주요 항성 위.
   맨 끝에 뒀더니 별 목록에 밀려 화면 밖으로 나가 안 보였다. 이야기를 읽은 참에
   "이 이야기를 더" 로 이어지는 자리이기도 하다. */
.detail-more {
  display: block;
  width: 100%;
  margin: 18px 0 0;
  padding: 12px 14px;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
  font-family: "IBM Plex Sans KR", sans-serif;
}
.detail-more b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.detail-more b::after { content: " →"; }
.detail-more span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
}
.detail-more:hover { border-color: var(--accent); }
.detail-more:hover b { color: var(--accent-bright); }
/* 이미 그 페이지면 갈 곳이 없다. */
#detail-host-page .detail-more { display: none; }

.det-left { min-width: 0; }
.det-right { min-width: 0; }
.det-right .con-list { max-height: none; }

.detail-head h3 { margin: 0; font-size: 22px; }


/* ------------------------------------------------------------ 연관 콘텐츠 목록 */

/* 모달에서는 단추만, 전체 페이지에서는 목록만. 같은 자리에 둘 다 두면
   모달이 길어져서 정작 성도가 밀려난다. */
.myth-works { display: none; margin-top: 18px; }
#detail-host-page .myth-works { display: block; }
#detail-host-page .detail-more { display: none; }

.myth-works h2 { margin: 0 0 4px; }
.myth-lead { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.myth-works ul { list-style: none; margin: 0; padding: 0; }
.myth-works li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.mw-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.mw-head b { font-size: 14px; }
.mw-kind {
  font-size: 10.5px;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 1px 5px;
  white-space: nowrap;
}
.mw-meta { font-size: 11.5px; color: var(--muted); }
.mw-note {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft, inherit);
}