/* ==========================================================
   citybear.css  v0.1  (2026-10-05)
   City Bear 공통 디자인 — PHOTO · HISTORY · ECONOMY 공용
   이 파일은 세 사이트에 똑같이 복사해서 쓴다.
   고칠 때는 버전 번호를 올리고 세 곳 모두 바꾼다.
   사이트 고유 스타일은 이 파일이 아니라 각 사이트 CSS에 둔다.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500&family=Noto+Serif+KR:wght@500;600&display=swap');

/* ---------- 1. 토큰 ---------- */
:root {
  /* 바탕과 면 */
  --cb-bg:         #0F0F0D;  /* 페이지 바탕, 따뜻한 검정 */
  --cb-surface:    #191815;  /* 카드·패널 */
  --cb-surface-2:  #22201C;  /* 팝업, 패널 안 한 단계 위 */
  --cb-line:       #2E2C28;  /* 테두리, 구분선, 격자 */

  /* 글자 */
  --cb-text:       #ECE8E0;
  --cb-text-2:     #A9A499;  /* 보조, 캡션, 축 눈금 */

  /* 금빛 강조 — 강조·선택·제목 포인트에만 */
  --cb-accent:     #D9B377;
  --cb-on-accent:  #14130F;  /* 금색 바탕 위 글자 (흰 글자 금지) */
  --cb-tint:       #2B2619;  /* 선택된 탭·칩 바탕 */

  /* 데이터 팔레트 — 지도 레이어·차트 계열용. 금색은 일부러 뺐다 */
  --cb-data-1: #7FA7C9;  /* 흐린 파랑 */
  --cb-data-2: #C98A7F;  /* 흐린 장밋빛 */
  --cb-data-3: #8FB58A;  /* 세이지 */
  --cb-data-4: #B79AD0;  /* 라벤더 */
  --cb-data-5: #6FB3AE;  /* 청록 */
  --cb-data-6: #C77A9E;  /* 모브 */
  --cb-data-7: #A9A06A;  /* 올리브 */
  --cb-data-8: #8C93A8;  /* 슬레이트 */

  /* 글꼴 */
  --cb-font-display: 'Cormorant Garamond', 'Noto Serif KR', Georgia, serif;  /* 영문 제목·브랜드 */
  --cb-font-title:   'Noto Serif KR', 'Cormorant Garamond', serif;            /* 한글 제목 */
  --cb-font-body:    'Noto Sans KR', system-ui, -apple-system, sans-serif;    /* 본문 */
  --cb-font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;         /* 라벨·연도·숫자 */

  /* 크기·간격 */
  --cb-radius:   10px;
  --cb-radius-s: 6px;
  --cb-header-h: 52px;
  --cb-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. 바탕 ---------- */
html { background: var(--cb-bg); color-scheme: dark; }
body {
  margin: 0;
  background: var(--cb-bg);
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 2px; }
::selection { background: var(--cb-tint); color: var(--cb-accent); }

.cb-num  { font-family: var(--cb-font-mono); font-variant-numeric: tabular-nums; }
.cb-h1   { font-family: var(--cb-font-title); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.25; margin: 0; }
.cb-h2   { font-family: var(--cb-font-title); font-weight: 500; font-size: 1.25rem; line-height: 1.35; margin: 0; }

/* ---------- 3. 공통 머리 ---------- */
.cb-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: var(--cb-header-h);
  padding: env(safe-area-inset-top, 0px) 20px 0;
  background: var(--cb-bg);
  border-bottom: 1px solid var(--cb-line);
}
/* 지구본처럼 화면 전체가 그림인 곳: 반투명으로 위에 띄움 */
.cb-header--overlay {
  position: fixed; left: 0; right: 0;
  background: rgba(15, 15, 13, .72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: transparent;
}
.cb-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; }
.cb-brand__logo { width: 24px; height: 24px; align-self: center; }
.cb-brand__name { font-family: var(--cb-font-display); font-weight: 600; font-size: 1.35rem; color: var(--cb-text); }
.cb-brand__room { font-family: var(--cb-font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--cb-accent); }

.cb-nav { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.cb-nav a, .cb-nav button {
  font-family: var(--cb-font-mono); font-size: .75rem; letter-spacing: .1em;
  color: var(--cb-text-2); text-decoration: none; background: none; border: 0;
  padding: 6px 0; border-bottom: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
}
.cb-nav a:hover, .cb-nav button:hover { color: var(--cb-text); }
.cb-nav [aria-current="page"], .cb-nav [aria-pressed="true"] { color: var(--cb-accent); border-bottom-color: var(--cb-accent); }

/* 방 이동 메뉴 — <details class="cb-rooms"><summary>…</summary><a>…</a></details> */
.cb-rooms { margin-left: auto; position: relative; }
.cb-rooms > summary {
  list-style: none; cursor: pointer;
  font-family: var(--cb-font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--cb-text-2);
  padding: 6px 10px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-s);
}
.cb-rooms > summary::-webkit-details-marker { display: none; }
.cb-rooms[open] > summary { color: var(--cb-accent); border-color: var(--cb-accent); }
.cb-rooms__list {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px;
  background: var(--cb-surface-2); border: 1px solid var(--cb-line); border-radius: var(--cb-radius);
  padding: 6px; display: grid;
}
.cb-rooms__list a { padding: 8px 10px; border-radius: var(--cb-radius-s); text-decoration: none; font-size: .9rem; }
.cb-rooms__list a:hover { background: var(--cb-tint); color: var(--cb-accent); }
.cb-rooms__list a[aria-current="page"] { color: var(--cb-accent); }

/* ---------- 4. 버튼·탭·칩 ---------- */
.cb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 .875rem/1 var(--cb-font-body);
  padding: 10px 16px; border-radius: var(--cb-radius-s); border: 1px solid var(--cb-accent);
  background: var(--cb-accent); color: var(--cb-on-accent); cursor: pointer;
}
.cb-btn--ghost { background: transparent; color: var(--cb-text); border-color: var(--cb-line); }
.cb-btn--ghost:hover, .cb-btn--ghost[aria-pressed="true"] { background: var(--cb-tint); color: var(--cb-accent); border-color: var(--cb-accent); }
.cb-btn:disabled { opacity: .4; cursor: default; }

.cb-chip {
  font: 400 .8rem/1 var(--cb-font-body);
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--cb-line);
  background: transparent; color: var(--cb-text-2); cursor: pointer;
}
.cb-chip[aria-pressed="true"], .cb-chip.is-on { background: var(--cb-tint); color: var(--cb-accent); border-color: transparent; }

/* ---------- 5. 패널·팝업 ---------- */
.cb-panel { background: var(--cb-surface); border: 1px solid var(--cb-line); border-radius: var(--cb-radius); padding: 16px; }
.cb-pop {
  background: var(--cb-surface-2); border: 1px solid var(--cb-line); border-radius: var(--cb-radius);
  padding: 14px 16px; max-width: 340px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.cb-pop__year  { font-family: var(--cb-font-mono); font-size: .75rem; color: var(--cb-accent); font-variant-numeric: tabular-nums; }
.cb-pop__title { font-family: var(--cb-font-title); font-weight: 600; font-size: 1.05rem; margin: 2px 0 6px; }
.cb-pop__body  { font-size: .875rem; color: var(--cb-text-2); }

/* ---------- 6. 시간 막대 ---------- */
.cb-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
.cb-range::-webkit-slider-runnable-track { height: 2px; background: var(--cb-line); }
.cb-range::-moz-range-track { height: 2px; background: var(--cb-line); }
.cb-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px;
  border-radius: 50%; background: var(--cb-accent); border: 2px solid var(--cb-bg);
}
.cb-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--cb-accent); border: 2px solid var(--cb-bg); }
.cb-year { font-family: var(--cb-font-mono); font-variant-numeric: tabular-nums; color: var(--cb-accent); }

/* ---------- 7. 범례·각주·로딩 ---------- */
.cb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--cb-font-mono); font-size: .72rem; color: var(--cb-text-2); }
.cb-legend__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cb-note { font-size: .75rem; color: var(--cb-text-2); line-height: 1.5; }
.cb-note a { color: var(--cb-text-2); text-decoration-color: var(--cb-line); }
.cb-note a:hover { color: var(--cb-accent); }

.cb-loading { font-family: var(--cb-font-mono); font-size: .75rem; letter-spacing: .1em; color: var(--cb-text-2); }
.cb-loading__bar { height: 2px; width: 160px; margin-top: 10px; background: var(--cb-line); overflow: hidden; }
.cb-loading__bar::after { content: ''; display: block; height: 100%; width: 40%; background: var(--cb-accent); animation: cb-load 1.2s var(--cb-ease) infinite; }
@keyframes cb-load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------- 8. 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 9. 작은 화면 ---------- */
@media (max-width: 640px) {
  .cb-header { gap: 14px; padding-left: 14px; padding-right: 14px; }
  .cb-brand__name { font-size: 1.15rem; }
  .cb-nav { gap: 14px; }
}