/* Reuse SAN's existing GNB. The explorer keeps its original navy palette. */
:root { --world-top:44px; }
body { overflow:hidden; min-height:0; font-family:var(--font-system); background:var(--paper); color:var(--ink); }
.world-page > .header { height:44px; line-height:normal; }
.world-page .workspace { position:relative; height:calc(100dvh - var(--world-top)); }
.workspace #mountain-title { font-family:var(--font-display); font-weight:900; font-size:25px; }
.workspace #mountain-title button { font-family:inherit; font-weight:inherit; font-size:inherit; }
.world-page .ph-bold { font-style:normal; line-height:1; }
.world-back { display:none; }
@media(max-width:959px) {
 :root { --world-top:0px; }
 .world-page > .header { display:none; }
 .world-back { position:absolute; top:17px; left:14px; z-index:5; display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#091525ed; color:var(--ink); text-decoration:none; }
 .world-page .map-home { left:64px; }
}
@media(max-width:760px) {
 .world-page .mobile-info-toggle { bottom:calc(20px + env(safe-area-inset-bottom)); }
 .world-page .map-bottom-panels { bottom:calc(76px + env(safe-area-inset-bottom)); }
}

/* Match the domestic map's floating panel and compact control rail. */
@media(min-width:761px) {
 .world-page .sidebar { position:absolute; left:26px; top:22px; bottom:32px; width:var(--sidebar); border:0; border-radius:16px; overflow:hidden; box-shadow:0 6px 30px #030b1840; }
 .world-page .map-panel { width:100%; height:100%; }
 .world-page .map-home { left:calc(var(--sidebar) + 38px); top:22px; }
 .world-page .map-status { left:calc(var(--sidebar) + 38px); }
}
.world-page .map-navigation { top:50%; right:26px; transform:translateY(-50%); gap:8px; max-height:calc(100% - 64px); overflow-y:auto; scrollbar-width:none; }
.world-page .map-control-group { border:0; border-radius:8px; flex-shrink:0; box-shadow:0 6px 30px #030b1840; }
.world-page .map-navigation button,.world-page .map-navigation #north { width:30px; height:30px; padding:0; }
.world-page .map-navigation button + button { border-top:0; }
.world-page .map-navigation button .ph-bold { font-size:18px; }
.world-page .map-navigation .view-control > span:not([data-icon]),.world-page .map-navigation #north small { display:none; }
.world-page .map-navigation #view-3d { font-size:11px; font-weight:600; letter-spacing:0; }
@media(min-width:761px) and (max-width:959px) {
 .world-page .sidebar { top:74px; left:14px; }
 .world-page .map-home { left:64px; top:17px; }
}
@media(max-width:760px) {
 .world-page .map-navigation { right:15px; gap:8px; }
 .world-page .map-control-group { border-radius:10px; }
 .world-page .map-navigation button,.world-page .map-navigation #north { width:37px; height:37px; }
 .world-page .map-navigation button .ph-bold { font-size:17px; }
}

@media(max-width:760px) {
 .world-page .rotation-controls,.world-page .zoom-controls { display:none; }
}

/* Preserve border-free panels while using the original MountainMap colors. */
.world-page .map-control-group,
.world-page .map-navigation button,
.world-page .sidebar,
.world-page .home-explore,
.world-page .mountain-info-dialog,
.world-page .mountain-info-body,
.world-page .mountain-info-head,
.world-page .elevation-card,.world-page .point-card,.world-page .catalog-dialog,
.world-page .map-home,.world-page .world-back,.world-page .mobile-info-toggle { border:0; }
/* SAN's global margin reset also affects native dialogs; restore centering. */
.world-page .mountain-info-dialog,
.world-page .catalog-dialog { position:fixed; inset:0; margin:auto; }

.world-page #mountain-info-title { font-family:var(--font-display); font-weight:900; }
.world-page .mountain-info-body { padding-top:0; }

.world-page .home-explore { position:static; top:auto; }

/* Use the mobile list title size at every viewport width. */
.world-page .home-name strong { font-size:13px; }

.world-page .local-name { letter-spacing:1px; }

/* Use the original sea blue for UI surfaces, above the darker ocean. */
.world-page { --world-panel:#051322; }
.world-page .sidebar,
.world-page .home-explore,
.world-page .mountain-photo,
.world-page .map-control-group,
.world-page .mountain-info-dialog,
.world-page .mountain-info-head,
.world-page .mountain-info-body,
.world-page .map-home,
.world-page .world-back,
.world-page .mobile-info-toggle { background:var(--world-panel); }
.world-page .mountain-photo::after {
 background:linear-gradient(180deg,#05132200 26%,#05132222 45%,#051322e0 83%,var(--world-panel) 100%);
}
.world-page .map-navigation button { background:transparent; }
.world-page .map-navigation button:hover { background:#122a40; }
.world-page .map-navigation button.active { background:#24435f; }

/* Reuse the sidebar inside a native bottom modal on mobile. */
.world-page .mobile-info-dialog {
 position:fixed; inset:auto 0 0; margin:0; padding:0; width:100%; max-width:none;
 height:62dvh; max-height:calc(100dvh - 64px); overflow:hidden;
 border:0; border-radius:16px 16px 0 0; background:var(--world-panel);
 box-shadow:0 -10px 40px #020a1340;
}
.world-page .mobile-info-dialog::backdrop { background:#020a1366; backdrop-filter:none; }
.world-page .mobile-info-dialog[open] { animation:world-sheet-in .28s ease-out; }
.world-page .mobile-info-dialog > .sidebar {
 position:relative; inset:auto; width:100%; height:100%; max-height:none;
 border-radius:0; box-shadow:none; transform:none; transition:none; visibility:visible;
}
.world-page #mobile-info-close {
 position:absolute; top:12px; right:12px; z-index:12; width:40px; height:40px;
 display:grid; place-items:center; padding:0; border:0; border-radius:10px;
 background:var(--world-panel); color:var(--ink);
}
.world-page #mobile-info-close .ph-bold { font-size:20px; }
.world-page .mobile-info-dialog .home-intro { padding-right:40px; }
.world-page .mobile-info-dialog .mountain-detail { padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
.workspace:has(#mobile-info[open]) .mobile-info-toggle { visibility:hidden; }
@keyframes world-sheet-in { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) {
 .world-page .mobile-info-dialog[open] { animation:none; }
}

/* 국내/세계 전환 */
.world-page .scope-switch { position:absolute; z-index:5; top:22px; left:26px; height:46px; background:var(--world-panel); box-shadow:0 6px 30px #030b1840; }
@media(min-width:761px) { .world-page .sidebar { top:80px; } }
@media(max-width:959px) { .world-page .scope-switch { top:17px; left:62px; height:40px; } }
.world-page .scope-switch a[aria-current="page"] { background:color-mix(in srgb, #fff 12%, var(--world-panel)); }

/* ===== 리디자인 v3 "산중 일지" — 세계의 명산 웹 =====
   색은 world/v3.css(생성)가 style.css 남색을 먹색/종이색으로 바꾸고, 여기서는 떠 있는 면·글꼴·하단 탭을 국내 지도와 맞춘다.
   앱은 World를 따로 번들하므로(ios/World, scripts/prepare-native-world.py) 이 파일을 받지 않는다. */
body.world-page { font-family: var(--font-app); font-variant-numeric: tabular-nums; background: var(--paper); }
.world-page { --world-panel: var(--bg-surface); --world-ring: 0 0 0 1px var(--border-default), 0 2px 10px var(--shadow-color, #0000001a); }
.world-page .workspace #mountain-title,
.world-page #mountain-info-title,
.world-page .hero-heading h1,
.world-page .summit-height strong,
.world-page .route-summary h2,
.world-page .home-intro h1,
.world-page .home-intro h2 { font-family: var(--font-serif, var(--font-app)); font-weight: 700; letter-spacing: -0.02em; }
.world-page .mountain-photo::after {
 background: linear-gradient(180deg, transparent 26%, color-mix(in srgb, var(--world-panel) 14%, transparent) 45%, color-mix(in srgb, var(--world-panel) 88%, transparent) 83%, var(--world-panel) 100%);
}
@media (prefers-color-scheme: light) {
 :where(:root:not([data-theme="dark"])) .world-page .hero-heading { text-shadow: none; }
}
:where(:root[data-theme="light"]) .world-page .hero-heading { text-shadow: none; }
/* 떠 있는 면: 국내 지도와 같은 흰 면 + 가는 선 + 옅은 그림자 */
.world-page :is(.scope-switch, .map-control-group, .map-home, .world-back, .elevation-card, .point-card) { box-shadow: var(--world-ring); }
@media (min-width: 761px) { .world-page .sidebar { box-shadow: var(--world-ring); } }
.world-page .scope-switch a { color: var(--text-secondary); }
.world-page .scope-switch a[aria-current="page"] { background: var(--text-primary); color: var(--bg-canvas); font-weight: 600; }
.world-page .map-control-group { background: var(--world-panel); }
.world-page .map-navigation button { color: var(--text-primary); }
.world-page .map-navigation button + button { box-shadow: inset 0 1px 0 var(--border-subtle); }
.world-page .map-navigation button:hover { background: var(--bg-hover); }
.world-page .map-navigation button.active,
.world-page .map-navigation button[aria-pressed="true"] { background: var(--text-primary); color: var(--bg-canvas); }
.world-page .mobile-info-toggle { background: var(--world-panel); color: var(--text-primary); box-shadow: 0 0 0 1px var(--text-primary), 0 2px 10px var(--shadow-color, #0000001a); font-weight: 600; }
.world-page .mobile-info-dialog { box-shadow: 0 -4px 18px var(--shadow-color, #0000001a); }
.world-page .mobile-info-dialog::backdrop { background: var(--scrim, #0006); }
.world-page #mobile-info-close { background: var(--world-panel); box-shadow: var(--world-ring); }
.world-page .catalog-filters button.active,
.world-page .scope-chips button.active { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-canvas); }
/* 모바일: 다른 메뉴처럼 하단 탭을 두고 뒤로 버튼은 뺀다(국내 지도와 같음). */
@media (max-width: 959px) {
 .world-page .workspace { height: calc(100dvh - 58px - env(safe-area-inset-bottom, 0px)); }
 html.san-pwa-indicator .world-page .workspace { height: calc(100dvh - 58px - var(--pwa-bottom)); }
 .world-page .world-back { display: none; }
 .world-page .scope-switch { left: 12px; top: 12px; }
 .world-page .map-home { left: auto; right: 15px; top: 12px; }
}
@media (max-width: 760px) {
 .world-page .mobile-info-toggle { bottom: 16px; }
 .world-page .map-bottom-panels { bottom: 72px; }
}
/* 고도 그래프: app.js가 그리는 SVG 속성 색을 CSS로 덮는다(속성보다 CSS가 이김). 선·면은 국내 코스 고도 그래프처럼 먹, 점은 구간 색. */
.world-page #elevation-chart circle { stroke: var(--world-panel); }
.world-page #profile-fill stop { stop-color: var(--text-primary); }
.world-page #elevation-chart path[stroke] { stroke: var(--chart-line); }
.world-page #elevation-chart circle[fill="#ffad72"] { fill: var(--world-climb); }
.world-page #elevation-chart circle[fill="#59d7c3"] { fill: var(--world-approach); }

/* ===== v3 2차: 국내 지도와 같은 틀 =====
   넓은 화면: 60px 헤더 + 왼쪽 400px 고정 열(국내/세계 전환 → 목록·상세) + 지도. 떠 있는 패널 대신 국내 지도처럼 붙인다.
   style.css 원래 구조(사이드바 + 지도 가로 배치)를 grid로 되살리므로 지도 오버레이(고도·범례·축척)는 지도 영역 기준으로 남는다. */
.world-page .home-intro .eyebrow,
.world-page .sidebar .eyebrow { color: var(--text-tertiary); }
@media (min-width: 960px) {
 :root { --world-top: 60px; --sidebar: 400px; }
 .world-page > .header { height: 60px; }
 .world-page .workspace { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: var(--bg-canvas); }
 .world-page .scope-switch { position: static; grid-column: 1; grid-row: 1; width: auto; height: 40px; margin: 16px 20px 12px; padding: 2px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-surface); box-shadow: 0 2px 10px var(--shadow-color, #0000001a); }
 .world-page .scope-switch a { border-radius: 8px; font-size: 15px; }
 .world-page .sidebar { position: relative; grid-column: 1; grid-row: 2; inset: auto; width: auto; min-height: 0; border-radius: 0; box-shadow: none; --world-panel: var(--bg-canvas); background: var(--bg-canvas); }
 .world-page .sidebar .home-explore { background: var(--bg-canvas); }
 /* 사이드바와 지도 사이 구분선: 사이드바가 그림자를 덮어 위쪽만 보이던 것을 지도 안쪽 테두리로 */
 .world-page .map-panel { grid-column: 2; grid-row: 1 / -1; width: auto; height: auto; box-shadow: none; border-left: 1px solid var(--border-default); }
 .world-page .map-home { left: 16px; top: 16px; }
 .world-page .map-status { left: 16px; }
 /* 지도 버튼: 국내 지도와 같은 44px 흰 면 */
 .world-page .map-navigation { right: 26px; gap: 8px; }
 .world-page .map-control-group { border-radius: 10px; overflow: hidden; }
 .world-page .map-navigation button,
 .world-page .map-navigation #north { width: 44px; height: 44px; }
 .world-page .map-navigation button .ph-bold { font-size: 20px; }
 .world-page .map-navigation #view-3d { font-size: 12px; }
}
/* 패널 글자: 원래 8~12px이던 것을 국내 지도 목록(이름 16 · 보조 13)에 맞춰 키운다. 모바일 시트는 따로 크기가 있다. */
@media (min-width: 761px) {
 .world-page .sidebar .eyebrow { font-size: 11px; letter-spacing: 0.14em; }
 .world-page .home-intro p { font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
 /* 좌우 여백은 국내 지도 목록처럼 화면 폭과 상관없이 20px(원래 16/20/25px로 바뀌고 소개 글은 4px 더 들어가 있었다) */
 .world-page .sidebar .mountain-detail { padding-left: 20px; padding-right: 20px; }
 /* 맨 위 사진은 좌우 여백만큼 밖으로 빼 사이드바 끝까지 채운다. 여백을 20px로 줄이며 원래 -22~-32px가 남아 사진이 삐져나가 가로 스크롤이 생겼다 */
 .world-page .sidebar .mountain-hero { margin-left: -20px; margin-right: -20px; }
 .world-page .sidebar .hero-heading { left: 20px; right: 20px; }
 /* 검색창 위치도 국내 지도처럼 국내·세계 바로 아래(12px)에 두고 목록만 스크롤. 소개 글은 화면에서만 숨기고 제목(h1)은 남긴다 */
 .world-page.is-home .sidebar .mountain-detail { padding-top: 0; }
 .world-page .sidebar .home-intro { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 /* 국내 지도처럼 검색창까지만 위에 고정하고, 지역 칩부터 목록까지 함께 스크롤 */
 .world-page .sidebar-fixed { display: block; flex: none; height: auto; padding: 0 20px 12px; border: 0; background: var(--bg-canvas); }
 .world-page .sidebar .home-search-bar { position: static; margin: 0; padding: 0; background: none; }
 .world-page .sidebar .home-search-bar .home-search { margin-bottom: 0; }
 .world-page .sidebar .home-explore { position: static; top: auto; margin-top: 0; padding: 0 0 14px; background: none; border-bottom: 1px solid var(--border-default); }
 /* 검색창: 국내 지도 검색창과 같은 아이콘 크기·간격·글자색 */
 .world-page .home-search { height: 48px; gap: 12px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-raised); font-size: 16px; }
 .world-page .home-search input { font-size: 16px; font-family: inherit; }
 .world-page .home-search input::placeholder { color: var(--text-secondary); }
 .world-page .home-search .ph-bold { font-size: 16px; color: var(--text-primary); }
 .world-page .scope-chips { gap: 6px; }
 .world-page .scope-chips button { padding: 6px 10px; border-radius: 8px; font-size: 13px; }
 .world-page .results-heading,
 .world-page .results-heading span:first-child { font-size: 13px; }
 .world-page .home-mountain { gap: 12px; padding: 10px 0; }
 .world-page .list-photo { width: 56px; height: 48px; border-radius: 8px; }
 .world-page .home-name { gap: 3px; }
 .world-page .home-name strong { font-size: 16px; font-weight: 600; }
 .world-page .home-name small { font-size: 13px; color: var(--text-tertiary); }
 .world-page .home-alt { font-size: 15px; }
 .world-page .home-alt small { font-size: 12px; }
 /* 산 상세 */
 .world-page .hero-heading h1 { font-size: 30px; }
 .world-page .local-name,
 .world-page .english-name { font-size: 13px; }
 .world-page .summit-height strong { font-size: 36px; }
 .world-page .summit-height span { font-size: 18px; }
 .world-page .mountain-region { font-size: 14px; }
 .world-page .mountain-heritage .eyebrow { font-size: 11px; }
 .world-page .live-cam-credit { font-size: 12px; }
 .world-page .route-summary h2 { font-size: 22px; }
 .world-page .mountain-description { font-size: 14px; line-height: 1.75; }
 .world-page .section-heading h3 { font-size: 17px; }
 .world-page .section-heading span { font-size: 12px; }
 .world-page .stage-caption { font-size: 12px; }
 .world-page .point-name { font-size: 15px; }
 .world-page .point-alt { font-size: 13px; }
 .world-page .source-note p,
 .world-page .source-links a,
 .world-page .photo-source :is(a, p) { font-size: 12px; }
 .world-page .sidebar summary span { font-size: 13px; }
 /* 파노라마 라이브캠은 넓어진 패널을 채운다 */
 .world-page .live-cam-panorama img { min-width: 100%; object-fit: cover; }
 /* 고도 그래프 카드 */
 .world-page .elevation-label { font-size: 13px; }
 .world-page .elevation-distance > span { font-size: 12px; }
 .world-page .elevation-distance strong { font-size: 18px; }
 .world-page .elevation-distance small { font-size: 11px; }
 .world-page #elevation-chart text { font-size: 10px; }
}
/* 모바일: 국내 지도처럼 출처는 위로(아래 '산 둘러보기'·축척과 겹치지 않게), 전환 버튼 크기도 같게 */
@media (max-width: 760px) {
 .world-page .scope-switch { --scope-switch-width: 96px; border: 1px solid var(--border-default); box-shadow: 0 2px 10px var(--shadow-color, #0000001a); }
 .world-page .maplibregl-ctrl-bottom-right { top: 60px; bottom: auto; }
 .world-page .maplibregl-ctrl-attrib { background: transparent !important; }
 .world-page .mobile-info-toggle { height: 40px; padding: 0 18px; border-radius: 20px; font-size: 14px; }
}

/* 산 상세 버튼(스토리·Google Maps 등)·구역 제목: 본문 산 상세·국내 지도 상세와 같은 v3 톤(테두리 버튼, 고운바탕 제목) */
.world-page .mountain-links { gap: 8px; }
.world-page .mountain-links :is(a, button) { min-height: 36px; padding: 0 12px; border: 1px solid var(--text-primary); border-radius: 8px; background: none; color: var(--text-primary); font-size: 13px; font-weight: 600; }
.world-page .mountain-links :is(a, button):hover { background: var(--bg-hover); color: var(--text-primary); }
.world-page .section-heading h3 { font-family: var(--font-serif, var(--font-app)); font-weight: 700; letter-spacing: -0.02em; }
/* 목록은 앱처럼 묶음 없이 한 줄씩(구역 사이 간격용 gap 제거) */
.world-page .home-collection { gap: 0; }
/* 소개 글도 검색창·목록과 같은 왼쪽 선(원래 4px 더 들어가 있었다) */
.world-page .home-intro { margin-left: 0; margin-right: 0; }
@media (max-width: 760px) {
  /* 모바일 시트 좌우 여백: 국내 지도 시트와 같은 16px(원래 23~26px) */
  .world-page .mountain-detail { padding-left: 16px; padding-right: 16px; }
  .world-page .mountain-hero { margin-left: -16px; margin-right: -16px; }
  .world-page .hero-heading { left: 16px; right: 16px; }
  .world-page .sidebar-fixed { display: block; flex: none; height: auto; padding: 20px 16px 10px; border: 0; }
  .world-page .sidebar-fixed .home-intro { padding-right: 40px; }
  .world-page .sidebar-fixed .home-search { margin-bottom: 0; }
}

/* ===== 세계 지도 3차: 마커·이름표·루트 색을 국내 지도·사이트 토큰으로 =====
   원래 세계 지도 색(빛나는 주황 네모 정상·청록 접근·보라 베이스캠프)을 사이트 색으로 옮긴다. 정보 구조(접근 = 찬색, 정상 등반 = 따뜻한 색)는 그대로.
   접근 구간·출발 = 산청(--accent-brand), 정상 등반 구간·정상·다른 산 = 황토(--accent-event), 베이스캠프 = 숲(--accent-success).
   모양은 원래대로 산(정상)은 네모, 중간 지점은 동그라미. 빛나는 그림자만 뺀다.
   이름표는 국내 지도 글자처럼 바탕색 테두리(halo)만 두른 글자로 두고, 눌렀을 때 뜨는 설명(point-card)만 말풍선.
   map-panel이 v3.css에서 --orange·--green을 다시 정하므로 거기서도 덮는다. v3-map.js가 루트 선 색을 --world-approach·--world-climb에서 읽는다.
   앱 World 번들은 이 파일을 받지 않는다. */
.world-page,
.world-page .map-panel { --world-approach: var(--accent-brand); --world-climb: var(--accent-event); --world-base: var(--accent-success); --world-halo: var(--bg-canvas); --orange: var(--world-climb); --green: var(--world-approach); }
.world-page .map-marker .marker-symbol { box-sizing: border-box; width: 9px; height: 9px; border: 1.5px solid var(--world-halo); border-radius: 50%; background: var(--world-approach); color: var(--world-approach); box-shadow: 0 1px 3px rgba(0, 0, 0, .22); transform: none; }
.world-page .map-marker[data-stage="climb"] .marker-symbol { background: var(--world-climb); color: var(--world-climb); }
.world-page .map-marker.important .marker-symbol { width: 14px; height: 14px; border-width: 2px; border-radius: 4px; background: var(--world-approach); color: var(--world-approach); }
.world-page .map-marker[data-kind="base"] .marker-symbol { background: var(--world-base); color: var(--world-base); }
.world-page .map-marker.other-summit .marker-symbol { width: 11px; height: 11px; border-width: 1.5px; border-radius: 3px; background: var(--world-climb); color: var(--world-climb); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .12s ease; }
.world-page .map-marker.other-summit:hover .marker-symbol,
.world-page .map-marker.other-summit:focus-visible .marker-symbol { background: var(--world-climb); border-color: var(--world-halo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--world-climb) 22%, transparent); transform: scale(1.25); }
.world-page .map-marker[data-kind="summit"] .marker-symbol { width: 17px; height: 17px; border-width: 2px; border-radius: 5px; background: var(--world-climb); color: var(--world-climb); box-shadow: 0 0 0 5px color-mix(in srgb, var(--world-climb) 20%, transparent), 0 1px 4px rgba(0, 0, 0, .28); transform: none; }
.world-page .map-marker[data-kind="summit"] .marker-symbol::before,
.world-page .map-marker[data-kind="summit"] .marker-symbol::after { display: none; animation: none; }
.world-page .map-marker.selected .marker-symbol { outline: 2px solid color-mix(in srgb, var(--text-primary) 45%, transparent); outline-offset: 3px; }
/* 이름표: 국내 지도 산 이름과 같은 12px 600 먹 글자 + 바탕색 테두리. 위치는 작아진 점에 맞춘다(style.css의 --label-left/top). */
body.world-page .map-marker .marker-label { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text-primary); font-family: var(--font-app); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
 text-shadow: 1px 0 0 var(--world-halo), -1px 0 0 var(--world-halo), 0 1px 0 var(--world-halo), 0 -1px 0 var(--world-halo), 1px 1px 0 var(--world-halo), -1px -1px 0 var(--world-halo), 1px -1px 0 var(--world-halo), -1px 1px 0 var(--world-halo), 0 0 2px var(--world-halo), 0 0 2px var(--world-halo), 0 0 3px var(--world-halo); }
body.world-page .map-marker[data-kind="summit"] .marker-label { font-size: 13px; font-weight: 700; }
body.world-page .map-marker.selected .marker-label { background: none; color: var(--text-primary); font-weight: 700; }
body.world-page .map-marker .marker-label { --label-left: 14px; --label-top: calc(4.5px - 50%); }
body.world-page .map-marker.important .marker-label { --label-left: 19px; --label-top: calc(7px - 50%); }
body.world-page .map-marker[data-kind="summit"] .marker-label { --label-left: 22px; --label-top: calc(8.5px - 50%); }
body.world-page .map-marker.other-summit .marker-label { --label-left: 15px; --label-top: calc(5.5px - 50%); }
.world-page .peak-leader,
.world-page .map-marker[data-kind="summit"] .peak-leader { background: color-mix(in srgb, var(--text-tertiary) 70%, transparent); }
.world-page .point-card { padding: 12px 34px 12px 14px; border: 0; border-radius: 10px; background: var(--text-primary); color: var(--bg-canvas); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); font-family: var(--font-app); }
.world-page .point-card strong { font-size: 14px; font-weight: 600; line-height: 1.4; }
.world-page .point-card .point-height { margin: 3px 0 0; font-size: 12px; color: color-mix(in srgb, var(--bg-canvas) 68%, transparent); }
.world-page .point-card p { margin-top: 6px; font-size: 12px; line-height: 1.55; color: color-mix(in srgb, var(--bg-canvas) 68%, transparent); }
.world-page .point-card > button { right: 6px; top: 6px; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 7px; color: color-mix(in srgb, var(--bg-canvas) 68%, transparent); }
.world-page .point-card > button:hover { background: color-mix(in srgb, var(--bg-canvas) 13%, transparent); color: var(--bg-canvas); }

/* 로딩 덮개: 국내 지도(map/map.css .map-loading)와 같은 종이 바탕·회전 고리·완료 체크, 450ms 페이드. 앱 World 번들은 이 파일을 받지 않는다. */
.world-page .world-map-loading { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-canvas); color: var(--text-secondary); font-family: var(--font-app); }
.world-page .world-map-loading[hidden] { display: none; }
.world-page .world-map-loading .loading-indicator { display: grid; place-items: center; width: 36px; height: 36px; }
.world-page .world-loading-spinner { width: 32px; height: 32px; border: 2px solid var(--border-default); border-top-color: var(--text-primary); border-radius: 50%; animation: world-loading-spin .8s linear infinite; }
@keyframes world-loading-spin { to { transform: rotate(360deg); } }
.world-page .world-loading-check { width: 36px; height: 36px; fill: none; stroke: var(--text-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.world-page .world-loading-check path { stroke-dasharray: 1; animation: world-loading-check .22s ease-out both; }
@keyframes world-loading-check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.world-page #map-loading-status { margin-top: 16px; font-size: 13px; line-height: 1.5; text-align: center; }
.world-page .world-map-loading strong { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.world-page .world-map-loading > span { margin-top: 8px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .world-page .world-loading-spinner, .world-page .world-loading-check path { animation: none; } }

/* 산 스토리: 더보기 산중서신 리더와 같은 틀. 종이색·글자색·여백(680px 글 기둥, 55px 28px 38px)·글꼴 크기를 서신 문서(worker/letters/style.js)와 맞춘다.
   제목 띠 없이 떠 있는 닫기 버튼, 내용(사진·소개·요약표·단락·이름 메모·출처)은 그대로. 모바일은 전체 화면. */
.world-page { --story-paper: #fafaf8; --story-ink: #292b29; --story-muted: #72756f; --story-line: #e1e3dd; --story-panel: #f0f1ed; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .world-page { --story-paper: #161617; --story-ink: #e7e7e8; --story-muted: #a8aaa6; --story-line: #363838; --story-panel: #242625; } }
:where(:root[data-theme="dark"]) .world-page { --story-paper: #161617; --story-ink: #e7e7e8; --story-muted: #a8aaa6; --story-line: #363838; --story-panel: #242625; }
.world-page .mountain-info-dialog { display: flex; flex-direction: column; width: min(760px, calc(100vw - 48px)); max-width: none; height: min(92dvh, 1100px); max-height: none; padding: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: 16px; background: var(--story-paper); color: var(--story-ink); box-shadow: 0 12px 40px var(--shadow-color-strong, rgba(0, 0, 0, .25)); }
.world-page .mountain-info-dialog:not([open]) { display: none; }
.world-page .mountain-info-dialog::backdrop { background: var(--scrim, rgba(27, 31, 29, .38)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.world-page .mountain-info-close { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-secondary); }
.world-page .mountain-info-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.world-page .mountain-info-close svg { width: 20px; height: 20px; }
.world-page .mountain-info-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.world-page .mountain-info-head,
.world-page .mountain-info-body { box-sizing: border-box; width: 100%; max-width: 680px; margin: 0 auto; }
.world-page .mountain-info-head { position: static; display: block; padding: 55px 28px 0; border: 0; background: none; }
.world-page .mountain-info-head > div { display: flex; flex-direction: column; }
.world-page #mountain-info-english { order: 0; margin: 0 0 4px; font-family: var(--font-app); font-size: 13px; line-height: 1.5; letter-spacing: .2px; color: var(--story-muted); }
.world-page #mountain-info-title { order: 1; margin: 0; font-size: 34px; font-weight: 400; line-height: 1.55; letter-spacing: -.8px; color: var(--story-ink); text-wrap: balance; }
.world-page .mountain-info-body { padding: 28px 28px 38px; background: none; font-size: 18px; line-height: 1.95; letter-spacing: -.2px; color: var(--story-ink); }
.world-page .mountain-info-photo { margin: 0 0 34px; }
.world-page .mountain-info-photo img { aspect-ratio: 3 / 2; border-radius: var(--radius-sm, 8px); }
.world-page .mountain-info-photo figcaption { margin-top: 10px; font-size: 11px; line-height: 1.7; letter-spacing: 0; color: var(--story-muted); }
.world-page .mountain-info-intro { font-size: 18px; color: var(--story-ink); }
.world-page .mountain-info-facts { gap: 14px 24px; padding: 20px 0; margin: 30px 0 6px; border-color: var(--story-line); }
.world-page .mountain-info-facts dt { font-size: 12px; color: var(--story-muted); }
.world-page .mountain-info-facts dd { font-size: 15px; color: var(--story-ink); }
.world-page .first-ascent-names { font-size: 13px; color: var(--story-muted); }
.world-page .mountain-info-body h3 { margin: 40px 0 14px; font-family: var(--font-serif, var(--font-app)); font-size: 23px; font-weight: 700; letter-spacing: -.4px; line-height: 1.55; color: var(--story-ink); }
.world-page .mountain-info-body section p + p { margin-top: 25px; }
.world-page .mountain-info-note { margin-top: 34px; padding: 16px 18px; border: 1px solid var(--story-line); border-radius: 10px; background: var(--story-panel); font-size: 14px; line-height: 1.75; color: var(--story-ink); }
.world-page .mountain-info-note strong { color: var(--story-ink); font-weight: 600; }
.world-page .mountain-info-context { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--story-line); font-size: 16px; color: var(--story-ink); }
.world-page .mountain-info-sources { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--story-line); font-size: 12px; color: var(--story-muted); }
.world-page .mountain-info-sources a { color: var(--story-muted); }
@media (max-width: 760px) {
  .world-page .mountain-info-dialog { inset: 0; width: 100vw; height: 100dvh; max-width: 100vw; border: 0; border-radius: 0; }
  .world-page .mountain-info-head, .world-page .mountain-info-body { max-width: 590px; }
  .world-page .mountain-info-head { padding: calc(28px + env(safe-area-inset-top, 0px)) 24px 0; }
  .world-page .mountain-info-close { top: calc(8px + env(safe-area-inset-top, 0px)); }
  .world-page #mountain-info-english { margin-bottom: 3px; font-size: 12px; }
  .world-page #mountain-info-title { font-size: 28px; letter-spacing: -.6px; }
  .world-page .mountain-info-body { padding: 24px 24px max(32px, env(safe-area-inset-bottom)); font-size: 17px; }
  .world-page .mountain-info-intro { font-size: 17px; }
}
.world-page #mountain-info-title:focus { outline: none; }

/* 사이드바 경유지 점도 지도 점과 같은 색(접근 산청 · 등반 황토 · 베이스캠프 숲) */
.world-page .waypoint .point-dot { border-color: var(--world-approach); background: var(--world-panel); }
.world-page .waypoint .point-dot::after { background: var(--world-approach); }
.world-page .waypoint[data-stage="climb"] .point-dot { border-color: var(--world-climb); }
.world-page .waypoint[data-stage="climb"] .point-dot::after { background: var(--world-climb); }
.world-page .waypoint:is([data-kind="start"], [data-kind="base"], [data-kind="summit"]) .point-dot { border-color: var(--world-approach); background: var(--world-approach); box-shadow: none; }
.world-page .waypoint[data-kind="base"] .point-dot { border-color: var(--world-base); background: var(--world-base); }
.world-page .waypoint[data-kind="summit"] .point-dot { border-color: var(--world-climb); background: var(--world-climb); }

/* 산 목록으로 돌아가기: 지도 왼쪽 위 떠 있는 ☰ 아이콘 대신, 국내 지도 상세처럼 사이드바 맨 위 '← 산 목록'.
   넓은 화면(사이드바가 보이는 761px 이상)은 사이드바 버튼만 쓰고, 모바일은 지도 위 국내·세계 전환 옆에 같은 글자 버튼. */
/* 검색창과 같은 상자(테두리·바탕·모서리)로 늘 보이게, 왼쪽 끝은 본문·검색창과 맞춘다. */
.world-page .world-detail-back { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 14px 0 12px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-raised); color: var(--text-primary); font-family: var(--font-app); font-size: 14px; font-weight: 500; cursor: pointer; }
.world-page .world-detail-back:hover { background: var(--bg-hover); color: var(--text-primary); }
.world-page .world-detail-back .ph-bold { font-size: 18px; color: var(--text-primary); }
.world-page.is-home .world-detail-back { display: none; }
@media (min-width: 761px) {
 .world-page .map-home { display: none; }
 .world-page:not(.is-home) .sidebar-fixed { padding: 0 20px 8px; }
}
@media (max-width: 760px) {
 .world-page .map-home:not([hidden]) { position: absolute; z-index: 5; top: 12px; left: calc(12px + var(--scope-switch-width, 96px) + 8px); right: auto; display: inline-flex; align-items: center; gap: 6px; width: auto; height: 40px; padding: 0 14px 0 11px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--world-panel); color: var(--text-primary); box-shadow: 0 2px 10px var(--shadow-color, #0000001a); font-family: var(--font-app); font-size: 14px; font-weight: 600; }
 .world-page .map-home .ph-bold { font-size: 17px; }
 /* 시트 안: 닫기(×)와 같은 줄에 '← 산 목록' */
 body.world-page:not(.is-home) .mobile-info-dialog .sidebar-fixed { padding: 12px 64px 4px 16px; }
}
/* 상세에서도 국내 지도처럼 검색창을 위에 둔다(넓은 화면): '← 산 목록'과 짧아진 검색창을 한 줄에. 모바일 시트에서는 '← 산 목록'만. */
.world-page .detail-top-row { display: flex; align-items: center; gap: 8px; }
.world-page .detail-top-row .world-detail-back { flex: none; height: 48px; white-space: nowrap; }
.world-page .detail-top-row .detail-search-bar { flex: 1; min-width: 0; }
@media (max-width: 760px) { .world-page .detail-search-bar { display: none; } .world-page .detail-top-row .world-detail-back { height: 40px; } }
/* 모바일 지도 위 검색창: 국내 지도와 같은 자리·모양(국내·세계 옆, 산을 고르면 '← 산 목록' 옆). 치면 아래에 산 목록이 뜬다.
   넓은 화면은 사이드바 검색창을 쓰므로 숨기고, 모바일 시트 안 검색창은 이것과 겹치므로 숨긴다(국내 지도 시트처럼 목록만). */
.world-page .world-top-search { display: none; }
@media (max-width: 760px) {
 .world-page { --world-top: 14px; --world-side: 15px; --world-home-width: 88px; }
 .world-page .scope-switch { top: var(--world-top); left: var(--world-side); }
 .world-page .map-home:not([hidden]) { top: var(--world-top); left: calc(var(--world-side) + var(--scope-switch-width, 96px) + 8px); justify-content: center; width: var(--world-home-width); padding: 0; font-weight: 500; }
 .world-page .world-top-search { position: absolute; z-index: 6; top: var(--world-top); left: calc(var(--world-side) + var(--scope-switch-width, 96px) + 8px); right: var(--world-side); display: flex; align-items: center; gap: 7px; box-sizing: border-box; height: 40px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-surface); box-shadow: 0 2px 10px var(--shadow-color, #0000001a); color: var(--text-primary); }
 .world-page:not(.is-home) .world-top-search { left: calc(var(--world-side) + var(--scope-switch-width, 96px) + 8px + var(--world-home-width) + 8px); }
 .world-page .world-top-search-icon { display: grid; flex: none; place-items: center; width: 15px; height: 15px; }
 .world-page .world-top-search-icon .ph-bold { font-size: 15px; line-height: 1; color: var(--text-primary); }
 .world-page .world-top-search input { flex: 1; min-width: 0; padding: 1px 2px; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-family: var(--font-app); font-size: 13px; }
 .world-page .world-top-search input::placeholder { color: var(--text-secondary); }
 .world-page .world-top-results { position: absolute; top: 50px; left: 0; right: 0; max-height: calc(100dvh - 95px); overflow: auto; box-sizing: border-box; padding: 8px; border-radius: 10px; background: var(--bg-surface); box-shadow: 0 6px 30px color-mix(in srgb, var(--bg-sunken) 15%, transparent); }
 .world-page:not(.is-home) .world-top-results { top: 47px; left: calc(-1 * (var(--scope-switch-width, 96px) + 8px + var(--world-home-width) + 8px) - 1px); right: -1px; }
 .world-page .world-top-results[hidden] { display: none; }
 .world-page .world-top-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); font-family: var(--font-app); font-size: 13px; line-height: 1.5; text-align: left; cursor: pointer; }
 .world-page .world-top-result:is(:hover, :focus-visible) { background: var(--bg-hover); outline: none; }
 .world-page .world-top-result b { font-weight: 500; }
 .world-page .world-top-result small { flex: none; font-size: 11px; color: var(--text-secondary); }
 .world-page .world-top-empty { margin: 0; padding: 12px; font-size: 13px; color: var(--text-secondary); }
 .world-page .sidebar .home-search-bar { display: none; }
}

/* 산 목록 줄: 배경 그라데이션 대신 국내 지도 사이드바처럼 산 이름에 밑줄(마우스가 있는 화면만, 터치 뒤 밑줄이 남지 않게) */
.world-page .home-mountain:hover { background: none; }
@media (hover: hover) {
 .world-page .home-mountain:hover .home-name strong { text-decoration: underline; text-underline-offset: 3px; }
}
/* 모바일 목록 시트: 눈썹·제목 머리와 분류 칩, 칩과 목록 사이를 좁히고 산 줄 좌우 여백은 빼 시트 여백(16px)에 맞춘다 */
@media (max-width: 760px) {
 .world-page.is-home .sidebar-fixed { padding: 18px 16px 0; }
 .world-page.is-home .sidebar-fixed .home-intro { margin-bottom: 0; }
 .world-page.is-home .sidebar-fixed .home-intro h1 { margin: 4px 0 0; }
 .world-page.is-home .mountain-detail { padding-top: 16px; }
 .world-page.is-home .home-explore { margin-top: 0; padding: 0; }
 .world-page.is-home .results-heading { padding: 14px 0 2px; }
 .world-page .home-mountain { padding: 11px 0; }
}

/* 산 상세(앱과 같은 순서): 위치 줄 끝에 작은 Google Maps 글자 링크, 그 아래 스토리 첫 문단 + '자세히 보기',
   루트 소개 아래 주요 지점 고도(지도 위 떠 있던 고도 카드를 상세 안으로 옮김) */
.world-page .mountain-location { flex-wrap: wrap; column-gap: 6px; }
.world-page .world-maps-link { margin-left: auto; padding: 2px 0; color: var(--text-secondary); font-family: var(--font-app); font-size: 13px; font-weight: 500; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.world-page .world-maps-link:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.world-page .mountain-story-preview { margin: 22px 0 24px; padding-top: 20px; border-top: 1px solid var(--border-default); }
.world-page .mountain-story-preview h3 { margin: 0 0 10px; font-family: var(--font-serif, var(--font-app)); font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; color: var(--text-primary); }
.world-page .mountain-story-preview p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--text-primary); word-break: keep-all; }
.world-page .mountain-story-preview .story-more { display: inline-flex; margin-top: 8px; padding: 4px 0; border: 0; background: none; color: var(--text-primary); font-family: var(--font-app); font-size: 14px; font-weight: 600; cursor: pointer; }
.world-page .mountain-story-preview .story-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.world-page .route-profile { margin: 18px 0 28px; }
.world-page .route-profile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.world-page .route-profile-head h3 { margin: 0; font-family: var(--font-app); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--text-secondary); }
.world-page #route-distance { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.world-page .route-profile #elevation-chart { height: 84px; padding: 0; overflow: visible; }
.world-page .route-profile-note { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-tertiary); }
@media (max-width: 760px) {
 /* 모바일 시트는 글자 단계가 한 칸 작다(지역 11px · 지점 12px) */
 .world-page .world-maps-link { font-size: 12px; }
 .world-page .mountain-story-preview { margin: 18px 0 20px; padding-top: 18px; }
 .world-page .mountain-story-preview h3 { font-size: 16px; }
 .world-page .mountain-story-preview p { font-size: 14px; line-height: 1.7; }
 .world-page .mountain-story-preview .story-more { font-size: 13px; }
 .world-page .route-profile-head h3,
 .world-page #route-distance { font-size: 12px; }
}

/* 국내 CCTV를 틀 수 없을 때: 영상 자리(16:9)에 산 카드·앱과 같은 두 줄 안내와 [다시 시도] */
.live-cam-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 16 / 9; font-size: 12px; line-height: 1.6; }
.live-cam-unavailable p { margin: 0; }
.live-cam-retry { height: 30px; padding: 0 12px; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 700; line-height: 28px; cursor: pointer; }
.live-cam-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }