/* 공용 사이트 셸 — 트레킹·일본·하늘길·실제크기 4개 서비스 공통 헤더.
   정본: shared_data/site-shell/. 각 저장소 사본은 sync-site-shell.ps1로 갱신한다. */

:root {
  /* 4개 서비스 공통 타이포 — 각 앱 CSS는 이 변수를 참조한다 */
  --ss-font-sans: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ss-font-serif: Georgia, "Noto Serif KR", serif;
  --ss-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --ss-text-xs: 12px;
  --ss-text-sm: 13px;
  --ss-text-base: 15px;
  --ss-text-lg: 17px;
  --ss-text-xl: 20px;
  --ss-text-title: 24px;
  --ss-line-height: 1.5;
  --ss-radius: 12px;
  --ss-tap: 44px;

  /* 공통 표면색 — 각 앱은 자기 변수를 여기에 연결한다 */
  --ss-canvas: #f2efe4;
  --ss-panel: #f7f4ea;
  --ss-surface: #ffffff;
  --ss-border: #ddd6c2;
  --ss-border-strong: #d5cdb6;
  --ss-ink: #1c2620;
  --ss-muted: #6a6559;
  --ss-brand: #17382a;
  --ss-rust: #b93e1b;

  --ss-bar-h: 56px;
  --ss-bg: #173a2a;
  --ss-bg-deep: #10281d;
  --ss-fg: #f3f7f2;
  --ss-dim: #a9c0ae;
  --ss-accent: #b84e2b;
  --ss-line: rgba(255, 255, 255, 0.14);
}

body {
  font-family: var(--ss-font-sans);
  font-size: var(--ss-text-base);
  line-height: var(--ss-line-height);
  -webkit-text-size-adjust: 100%;
}

/* 모바일 확대 방지 — iOS는 16px 미만 입력에서 화면을 확대한다 */
@media (max-width: 999px) {
  input,
  select,
  textarea,
  button {
    font-family: inherit;
    font-size: max(16px, 1em);
  }

  a,
  button,
  select,
  summary,
  [role="button"] {
    min-height: var(--ss-tap);
  }

  /* 앱마다 제각각인 칩·작은 버튼도 손가락으로 누를 수 있게 올린다(지도 컨트롤은 제외).
     지도 위 점 기호처럼 모양이 크기인 요소는 data-tap-free로 빠진다 —
     이 규칙의 명시도(0,3,2)가 높아 페이지 CSS의 min-height: 0이 지고,
     국립공원 3D 지점 점(11px)이 모바일에서 11×40px 알약으로 늘어났었다. */
  body :is(a, button, select)[class]:not([class*="leaflet"]):not([class*="ss-"]):not([data-tap-free]) {
    min-height: 40px;
  }
}

/* sticky는 호스트에 건다 — .ss-bar에 걸면 부모(site-nav)와 높이가 같아 움직일 여유가 0이라 무효였다 */
site-nav {
  display: block;
  position: sticky;
  top: 0;
  z-index: 1000;
  flex: none;
}

.ss-bar,
.ss-drawer {
  font-family: var(--ss-font-sans);
  font-size: var(--ss-text-base);
  line-height: 1.25;
  box-sizing: border-box;
}

/* 페이지 CSS의 nav·a 여백이 헤더 높이를 밀어 올리지 않게 셸 안쪽은 초기화한다 */
.ss-bar *,
.ss-drawer * {
  box-sizing: border-box;
  margin: 0;
}

/* 지도 출처 표기도 글자가 테두리에 붙지 않게 */
.leaflet-container .leaflet-control-attribution {
  padding: 2px 8px;
}

/* ── 상단 바 ─────────────────────────────────────────── */
.ss-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  width: 100%;
  min-height: calc(var(--ss-bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 10px 0 12px;
  background: var(--ss-bg);
  color: var(--ss-fg);
}

.ss-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.ss-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ss-accent);
  color: #fff3e9;
  font-family: Georgia, "Noto Serif KR", serif;
  font-size: 15px;
  font-weight: 800;
}

.ss-name {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.ss-name strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-name small {
  color: var(--ss-dim);
  font-size: var(--ss-text-xs);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 데스크톱 탭 — 좁은 화면에서는 감춘다(전체 목록은 메뉴에서) */
.ss-tabs {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.09);
}

.ss-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 6px;
  color: #cfdccb;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.ss-tabs a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ss-tabs a[aria-current="page"] {
  background: var(--ss-fg);
  color: var(--ss-bg);
}

.ss-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  min-height: var(--ss-tap);
  padding: 0 13px;
  border: 1px solid var(--ss-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ss-fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.ss-tabs + .ss-menu-btn {
  margin-left: 8px;
}

.ss-menu-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.ss-menu-btn i {
  display: grid;
  gap: 3px;
  width: 15px;
}

.ss-menu-btn i::before,
.ss-menu-btn i::after,
.ss-menu-btn i span {
  content: "";
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ── 서랍 ────────────────────────────────────────────── */
.ss-drawer[hidden] {
  display: none;
}

.ss-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
}

.ss-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 13, 0.55);
  backdrop-filter: blur(2px);
}

.ss-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(340px, 88vw);
  background: var(--ss-bg-deep);
  color: var(--ss-fg);
  box-shadow: -18px 0 44px rgba(6, 14, 10, 0.45);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  animation: ss-slide 180ms ease;
}

@keyframes ss-slide {
  from {
    transform: translateX(14px);
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-panel {
    animation: none;
  }
}

.ss-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: sticky;
  top: 0;
  background: var(--ss-bg-deep);
  padding: 12px 14px;
  border-bottom: 1px solid var(--ss-line);
}

.ss-panel-head strong {
  font-size: 14px;
  font-weight: 800;
}

.ss-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ss-line);
  border-radius: 10px;
  background: transparent;
  color: var(--ss-fg);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ss-group {
  padding: 14px 14px 4px;
}

.ss-group h3 {
  margin: 0 0 8px;
  color: var(--ss-dim);
  font-size: var(--ss-text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.ss-group a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 12px;
  border-radius: 11px;
  color: var(--ss-fg);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.ss-group a + a {
  margin-top: 2px;
}

.ss-group a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ss-group a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.ss-group a b {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ss-dim);
  font-size: var(--ss-text-xs);
  font-weight: 800;
}

.ss-group a span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.ss-group a small {
  color: var(--ss-dim);
  font-size: var(--ss-text-xs);
  font-weight: 600;
}

.ss-group--meta {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--ss-line);
}

.ss-group--meta a {
  min-height: var(--ss-tap);
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-dim);
}

/* ── 푸터 ────────────────────────────────────────────── */
site-footer {
  display: block;
  flex: none;
}

.ss-foot {
  box-sizing: border-box;
  border-top: 1px solid var(--ss-border);
  background: var(--ss-panel);
  color: var(--ss-muted);
  font-family: var(--ss-font-sans);
  font-size: var(--ss-text-xs);
  line-height: 1.6;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}

.ss-foot * {
  box-sizing: border-box;
  margin: 0;
}

.ss-foot-in {
  display: grid;
  gap: 6px;
  max-width: 900px;
  margin: 0 auto;
}

.ss-foot a {
  color: var(--ss-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ss-foot-made {
  color: var(--ss-ink);
  font-size: var(--ss-text-sm);
}

/* 문장 밖에 홀로 선 링크는 손가락으로 누를 수 있어야 한다 — inline이면 min-height가 무시된다 */
.ss-foot-legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ss-tap);
}

@media (min-width: 1000px) {
  :root {
    --ss-bar-h: 58px;
  }

  .ss-foot {
    padding: 22px 24px;
  }

  .ss-bar {
    padding-right: 14px;
  }

  .ss-tabs {
    display: flex;
  }

  .ss-mark {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .ss-name strong {
    font-size: 17px;
  }
}