/* 시안(북한산 시험): 서울둘레길 느낌 - 밝은 지도 + 번호·색 코스 카드 */
body{background:#fff}
header{background:#fff;border-bottom:1px solid #eef0ea}
.sat-panel.sat-primary{background:#fff;border:0;border-radius:0;margin:0 0 24px;padding:8px clamp(16px,4vw,48px) 0}
.hk-guide .sat-bookmark-row{padding:28px 0 6px}
.hk-guide .sat-bookmark-row .sat-title{font-size:clamp(30px,3.4vw,44px);font-weight:900;letter-spacing:-1.5px;color:#1d2b24}
.hk-guide .sat-bookmark-row .sat-title::after{content:"등산 코스";margin-left:10px;font-size:.55em;font-weight:700;color:#21644d;letter-spacing:-.5px}
.hk-crumb{font-size:13px;color:#7a857e;margin:0 0 18px}.hk-crumb b{color:#21644d}
.sat-course-finder{margin:0 0 12px}
.sat-tools{padding:0 0 12px}
.sat-tools button,.sat-tools select,.sat-settings>summary{border-color:#dfe5dc;border-radius:999px;padding-inline:16px}
.sat-tools button[aria-pressed=true]{background:#21644d;border-color:#21644d}
.sat-summary,.sat-density-note,.sat-legend{display:none}
.sat-quality{margin:0 0 12px;background:#fafaf6;border-color:#ecebdc;color:#6b6a55;font-size:12px}
.sat-quality strong{font-size:12px}
.sat-status,.sat-route-note{padding-inline:0;margin-inline:0}

.hk-board{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.hk-board .sat-map{height:min(72vh,760px);max-height:none;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px #e6ebe3}
.hk-list{height:min(72vh,760px);overflow:auto;overscroll-behavior:contain;padding-right:4px;display:grid;gap:10px;align-content:start;scrollbar-width:thin}
.hk-list-head{position:sticky;top:0;z-index:1;background:#fff;padding:2px 0 8px;display:flex;justify-content:space-between;align-items:baseline}
.hk-list-head strong{font-size:17px;color:#1d2b24}.hk-list-head span{font-size:12px;color:#7a857e}
.hk-card{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;text-align:left;width:100%;padding:16px 16px 16px 14px;background:#fff;border:1px solid #e8ece6;border-left:5px solid var(--c);border-radius:14px;cursor:pointer;font:inherit;color:#1d2b24;transition:transform .15s,box-shadow .15s,border-color .15s}
.hk-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(29,43,36,.08)}
.hk-card[aria-pressed=true]{background:#f6faf3;border-color:var(--c);box-shadow:0 0 0 2px var(--c)}
.hk-no{grid-row:1/3;width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px}
.hk-name{font-size:16px;font-weight:800;letter-spacing:-.4px;line-height:1.4}
.hk-meta{font-size:12px;color:#6c776f;display:flex;gap:8px;align-items:center}
.hk-meta b{background:#f1f4ee;color:#21644d;border-radius:999px;padding:2px 9px;font-size:12px}
.hk-card.hk-all{--c:#1d2b24}.hk-card.hk-all .hk-no{font-size:12px}
@media(max-width:900px){.hk-board{grid-template-columns:1fr}.hk-board .sat-map{height:56vh}.hk-list{height:auto;max-height:60vh}}
@media(prefers-reduced-motion:reduce){.hk-card{transition:none}.hk-card:hover{transform:none}}

/* 지역 산 페이지(가벼운 버전): 폭을 넓히고 제목·여백 정리, 아래 기존 코스 버튼도 같은 색 번호 모양 */
.hk-san header,.hk-san main,.hk-san footer{max-width:1180px}
.hk-san .crumb{margin-top:28px}
.hk-san h1{font-size:clamp(30px,3.4vw,42px);font-weight:900;letter-spacing:-1.5px;color:#1d2b24;margin:6px 0 4px}
.hk-san h1 small{font-size:14px;margin-top:6px}
.hk-san .sat-panel.sat-primary{padding:8px 0 0}
.hk-san .sat-bookmark-row{padding:14px 0 8px}.hk-san .sat-bookmark-row .sat-title{font-size:18px}
.hk-san .card,.hk-san .facts div{border-color:#eceee8;border-radius:16px}
.hk-san .course-tabs button{border-radius:999px;border-color:#dfe5dc}
.hk-san .course-tabs button[aria-pressed=true]{background:#21644d;border-color:#21644d;color:#fff}
/* 지도 불러오는 동안 검은 바탕 대신 밝은 바탕 */
.hk-board .sat-map{background:#eef1ec!important}

/* 지역 산 아래 지형도: 코스 버튼에 색 번호, '전체 코스' 버튼 */
.hk-san .course-tabs button{display:inline-flex;align-items:center;gap:7px}
.hk-san .course-tabs .hk-dot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;font-size:11px;font-weight:900}
.hk-san .course-tabs button[aria-pressed=true]{background:#fff;color:#1d2b24;border-color:var(--c,#21644d);box-shadow:0 0 0 2px var(--c,#21644d)}
.hk-san .course-tabs .hk-all-tab{--c:#1d2b24;border:1px solid #dfe5dc;background:#fff;border-radius:999px;padding:8px 16px;min-height:40px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
/* 고도 그래프 ↔ 지도 연동 */
.hk-san .hk-prof-title{margin:22px 0 8px}
.hk-prof svg.profile{user-select:none}
.hk-cursor line{stroke:#1d2b24;stroke-width:1;stroke-dasharray:3 3}
.hk-cursor circle{fill:#fff;stroke:#1d2b24;stroke-width:2.5}
.hk-cursor rect{fill:#1d2b24}.hk-cursor text{fill:#fff;font-size:12px;font-weight:700}
.hk-prof-note{font-size:12px;color:#6c776f;margin:6px 6px 2px}
.hk-pin{position:relative;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.hk-pin b{background:#1d2b24;color:#fff;font:700 12px/1 'Malgun Gothic',sans-serif;padding:6px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hk-pin i{width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid #e0457b;margin-top:4px;box-shadow:0 1px 4px rgba(0,0,0,.35)}
/* 100대 명산 고도 그래프 */
.hk-guide .hk-prof-title{font-size:18px;font-weight:900;color:#1d2b24;margin:22px 0 8px}
.hk-guide .hk-prof{background:#fff;border:1px solid #eceee8;border-radius:16px;padding:10px 12px}
.hk-guide .hk-prof svg.profile{width:100%;height:auto;display:block}
.hk-guide .hk-prof .profile text{font-size:11px;fill:#5b6b60}
.hk-prof-empty{margin:14px 6px;font-size:14px;color:#6c776f}
.hk-prof .hk-cursor text{fill:#fff!important;font-size:12px!important;font-weight:700}