/* 대혜폭포 v6 «28m 수직 낙하» — 짙은 청록 · 물보라 흰색 · 암석 회색, 굵은 고딕 */
:root {
  --teal: #0B3B3C; --teal-d: #072A2B; --teal-l: #12494A;
  --spray: #F2F5F3; --mist: #E6EAE7;
  --rock: #5C5D55; --rock-l: #8E9088; --rock-ll: #C9CCC5;
  --ink: #0E2425; --aqua: #8CC9C3;
  --f: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --fn: 'Oswald', 'Pretendard Variable', Pretendard, 'Arial Narrow', sans-serif;
  --hd: 72px;
}
html[lang="zh-CN"] { --f: 'Pretendard Variable', Pretendard, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
html[lang="ja"] { --f: 'Pretendard Variable', Pretendard, 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hd); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f); color: var(--ink); background: var(--spray); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
html:not([lang="ko"]) body { word-break: normal; }
html[lang="zh-CN"] body, html[lang="ja"] body { line-break: strict; }
body [lang="ko"] { word-break: keep-all; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.025em; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
html[lang="ko"] .only-intl { display: none !important; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--teal); padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.sc { padding: clamp(80px, 11vw, 150px) 0; }

/* ── 머리 ── */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd); color: #fff; transition: background-color .35s, box-shadow .35s; }
.hd.is-solid, body.menu-open .hd { background: var(--teal); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.hd__in { height: 100%; display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); padding: 0 clamp(20px, 3.4vw, 48px); }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; flex: none; min-width: 0; }
.brand__mk { width: 28px; height: 28px; flex: none; }
.brand b { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__ko { font-size: 20px; font-weight: 900; letter-spacing: -.03em; }
.brand__tr { font-size: 12px; font-weight: 500; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gnb { flex: 1; min-width: 0; overflow: hidden; }
.gnb ul { display: flex; gap: clamp(18px, 2.2vw, 34px); list-style: none; margin: 0; padding: 0; width: max-content; }
.gnb a { display: block; padding: 10px 0; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; opacity: .8; position: relative; transition: opacity .2s; }
.gnb a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: var(--aqua); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.gnb a:hover, .gnb a.is-on { opacity: 1; }
.gnb a:hover::after { transform: scaleX(.5); }
.gnb a.is-on { color: var(--aqua); }
.gnb a.is-on::after { transform: none; }
.hd__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.lang { display: flex; padding: 2px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 3px; background: rgba(7, 42, 43, .25); }
.lang button { appearance: none; border: 0; background: none; color: #fff; font: 600 13px/1 var(--f); min-width: 40px; min-height: 40px; padding: 0 9px; border-radius: 2px; cursor: pointer; opacity: .82; }
.lang button:hover { opacity: 1; }
.lang button[aria-pressed="true"] { background: var(--spray); color: var(--teal); opacity: 1; }
.burger { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 3px; background: rgba(7, 42, 43, .25); color: #fff; cursor: pointer; padding: 0; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.hd.is-fold .gnb ul { visibility: hidden; }
.hd.is-fold .burger { display: grid; }

/* ── 행동 단추 ── */
.acts { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 20px 8px 0; border-radius: 2px; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.btn svg { width: 20px; height: 20px; flex: none; margin-left: 14px; }
.btn > span { display: flex; flex-direction: column; line-height: 1.2; padding-left: 12px; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 28%, transparent); }
.btn small { font-size: 12px; font-weight: 500; opacity: .78; }
.btn b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.btn--map { background: var(--spray); color: var(--teal); }
.btn--map:hover { background: #fff; }
.btn--tel { border: 1px solid rgba(242, 245, 243, .55); color: #fff; }
.btn--tel:hover { background: rgba(242, 245, 243, .12); }

/* ── 첫 화면 ── */
.hero { --ph: min(42vw, 688px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--ph); min-height: clamp(620px, 100vh, 1031px); min-height: clamp(620px, 100svh, 1031px); background: var(--teal); color: #fff; overflow: hidden; }
.hero__ph { grid-column: 2; grid-row: 1; margin: 0; position: relative; background: var(--teal-d); }
.hero__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 42, 43, .62) 0, rgba(7, 42, 43, 0) 20%, rgba(7, 42, 43, 0) 78%, rgba(7, 42, 43, .5) 100%); pointer-events: none; }
.hero__txt { grid-column: 1; grid-row: 1; align-self: center; position: relative; z-index: 2; padding: calc(var(--hd) + 32px) clamp(96px, 10vw, 150px) 56px clamp(24px, 5.6vw, 88px); }
.hero__num { position: absolute; z-index: 1; top: 0; bottom: 0; right: var(--ph); transform: translateX(50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.hero__line { order: -1; flex: 1 1 0; width: 2px; margin: var(--hd) 0 14px; background: linear-gradient(rgba(242, 245, 243, 0), rgba(242, 245, 243, .55)); position: relative; overflow: hidden; }
.hero__line::after { content: ''; position: absolute; left: 0; top: -45%; width: 100%; height: 45%; background: linear-gradient(rgba(255, 255, 255, 0), #fff); animation: fall 2.6s cubic-bezier(.5, 0, .85, .4) infinite; }
@keyframes fall { to { top: 100%; } }
.hero__fig { display: flex; flex-direction: column; align-items: center; font: 600 clamp(100px, 24vh, 270px)/.86 var(--fn); color: var(--spray); text-shadow: 0 6px 40px rgba(7, 42, 43, .35); }
.hero__fig span { display: block; }
.hero__fig span:last-child { margin-top: .06em; font-size: .72em; }   /* m 은 숫자보다 넓다 — 기둥 폭을 맞춘다 */
.hero__numk { margin: 18px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--aqua); flex: .32 1 0; }
.badge { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.badge::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); }
.hero__kicker { margin-top: clamp(20px, 3vh, 32px); font-size: 15px; font-weight: 600; color: var(--aqua); letter-spacing: .01em; }
.hero__title { margin: 6px 0 12px; font-size: clamp(60px, 7.6vw, 120px); font-weight: 900; line-height: .98; letter-spacing: -.05em; }
.h-ko { display: block; margin-top: .28em; font-size: .3em; font-weight: 700; letter-spacing: 0; opacity: .66; }
html:not([lang="ko"]) .hero__title { font-size: clamp(48px, 5.8vw, 92px); letter-spacing: -.035em; }
.hero__alias { font-size: clamp(17px, 1.45vw, 21px); font-weight: 700; color: #fff; }
.hero__lead { margin-top: 14px; max-width: 32em; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.75; color: rgba(255, 255, 255, .84); }
.hero__meta { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .66); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.hero__meta .sep { opacity: .5; }
.hero__acts { margin-top: clamp(22px, 3.4vh, 36px); }
.cue { position: absolute; z-index: 2; right: clamp(6px, 1.2vw, 18px); bottom: 16px; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.cue span { writing-mode: vertical-rl; }
html[lang="en"] .cue span { letter-spacing: .12em; }
.cue svg { width: 18px; height: 18px; }

/* ── 외국어 첫 안내 ── */
.first { background: var(--teal-l); color: #fff; padding: 56px 0; }
.first h2 { font-size: 22px; font-weight: 800; }
.first dl { margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 40px; }
.first dt { font-size: 13px; font-weight: 700; color: var(--aqua); letter-spacing: .04em; text-transform: uppercase; }
.first dd { margin: 6px 0 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .88); }

/* ── 구역 머리 ── */
.kk { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; color: var(--rock); letter-spacing: .04em; }
.kk i { width: 2px; height: 26px; background: currentColor; }
.sc h2 { margin-top: 18px; font-size: clamp(32px, 3.6vw, 52px); font-weight: 900; letter-spacing: -.04em; line-height: 1.18; }
.lead { margin-top: 22px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.8; }
.note { margin-top: 18px; font-size: 14px; color: var(--rock); }

/* ── 1. 높이 ── */
.height { background: var(--spray); color: var(--teal); }
.height__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); grid-template-areas: "head head ph" "alt body ph"; gap: 56px clamp(32px, 4.4vw, 64px); align-items: start; }
.height__head { grid-area: head; }
.alt { grid-area: alt; display: grid; gap: 34px; }
.alt__row { position: relative; padding: 4px 0 4px 26px; border-left: 2px solid var(--rock-ll); }
.alt__row::before { content: ''; position: absolute; left: -2px; top: 0; width: 14px; height: 2px; background: var(--teal); }
.alt__row--fall { border-left: 6px solid var(--teal); padding-left: 22px; }
.alt__row--fall::before { display: none; }
.bignum { font-family: var(--fn); font-weight: 600; line-height: .86; color: var(--teal); white-space: nowrap; }
.bignum b { font-size: clamp(88px, 9.6vw, 144px); font-weight: 600; letter-spacing: -.01em; }
.bignum small { font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; margin-left: .06em; }
.bignum small:first-child { margin: 0 .12em 0 0; }
.alt__k { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--rock); max-width: 22em; line-height: 1.55; }
.height__body { grid-area: body; color: var(--ink); }
.height__body p { padding: 22px 0; border-top: 1px solid var(--rock-ll); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.85; }
.height__body p:first-child { border-top: 0; padding: 0 0 4px; }
.height__body p.height__note { border-top: 0; padding-top: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 10px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rock-ll); }
.tags li { font-size: 14px; font-weight: 600; color: var(--rock); padding: 6px 12px; background: var(--mist); border-radius: 2px; }
.height__ph { grid-area: ph; margin: 0; }
.height__ph .ph { aspect-ratio: 1 / 2; overflow: hidden; background: var(--teal-d); }
.height__ph img { width: 100%; height: 100%; object-fit: cover; }
.height__ph figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--rock); }
.seasons figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 60px max(24px, (100% - 1200px) / 2) 22px; font-size: 14px; color: #fff; background: linear-gradient(rgba(7, 42, 43, 0), rgba(7, 42, 43, .72)); }

/* ── 2. 물길 ── */
.water { background: var(--teal); color: #fff; }
.water .kk { color: var(--aqua); }
.water .lead { color: rgba(255, 255, 255, .84); }
.water__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px clamp(40px, 6vw, 96px); align-items: start; }
.water__head { position: sticky; top: calc(var(--hd) + 40px); }
.flow { list-style: none; margin: 8px 0 0; padding: 0; }
.flow__i { position: relative; padding: 0 0 46px 80px; min-height: 64px; }
.flow__i::before { content: ''; position: absolute; left: 22px; top: 30px; bottom: 2px; width: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='22'%3E%3Cpath d='M6 0C1 5.5 11 16.5 6 22' fill='none' stroke='%238CC9C3' stroke-width='2'/%3E%3C/svg%3E") repeat-y center top; }
.flow__i:last-child::before { display: none; }
.flow__node { position: absolute; left: 18px; top: 6px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--aqua); background: var(--teal); }
.flow__n { font-size: clamp(21px, 1.9vw, 27px); font-weight: 800; letter-spacing: -.03em; }
.flow__p { margin-top: 6px; max-width: 34em; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .74); }
.flow__i--1 { padding-bottom: 150px; }
.flow__i--1::before { left: 24px; width: 8px; background: linear-gradient(rgba(242, 245, 243, .95), rgba(242, 245, 243, .35)); border-radius: 0 0 4px 4px; }
.flow__drop { position: absolute; left: 50px; bottom: 54px; font: 600 15px/1 var(--fn); letter-spacing: .06em; color: var(--spray); padding-left: 14px; border-left: 1px solid rgba(242, 245, 243, .4); }
.flow__i--2 .flow__node { left: 12px; top: 0; width: 32px; height: 32px; background: var(--spray); border-color: var(--spray); }
.flow__i--2 .flow__n { font-size: clamp(26px, 2.4vw, 34px); font-weight: 900; }
.flow__ic { display: inline-flex; color: var(--aqua); margin-bottom: 6px; }
.flow__ic svg { width: 28px; height: 28px; }
.flow__i--6 { padding-bottom: 0; }
.flow__i--6 .flow__node { left: 6px; top: 9px; width: 44px; height: 14px; border-radius: 2px; background: var(--aqua); }
.seasons { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); margin-top: clamp(80px, 10vw, 130px); align-items: center; }
.seasons__ph { position: relative; margin: 0; }
.seasons__ph .ph { aspect-ratio: 1 / 1; overflow: hidden; background: var(--teal-d); }
.seasons__ph img { width: 100%; height: 100%; object-fit: cover; }
.seasons figcaption { padding: 50px 18px 16px; font-size: 13px; }
.seasons__h { font-size: clamp(24px, 2.2vw, 30px); font-weight: 900; margin-bottom: 18px; }
.sea { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.sea__ic { color: var(--aqua); } .sea__ic svg { width: 36px; height: 36px; }
.sea h4 { font-size: 18px; font-weight: 800; }
.sea p { margin-top: 6px; font-size: 17px; line-height: 1.8; color: rgba(255, 255, 255, .86); }

/* ── 3. 이름 이야기 ── */
.names { background: var(--mist); }
.names h2 { color: var(--teal); }
.names__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; border-top: 2px solid var(--teal); }
.nm { padding: 34px clamp(20px, 2.6vw, 40px) 8px; border-left: 1px solid var(--rock-ll); }
.nm:first-child { border-left: 0; padding-left: 0; }
.nm:last-child { padding-right: 0; }
.nm__hz { font: 900 clamp(64px, 6.6vw, 100px)/1 'Noto Sans KR', 'Noto Sans CJK KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; color: #C3C7C0; letter-spacing: -.02em; }
.nm__k { margin-top: 26px; font-size: 13px; font-weight: 700; color: var(--rock); letter-spacing: .04em; }
.nm h3 { margin-top: 6px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 900; color: var(--teal); }
.nm p:not(.nm__hz):not(.nm__k) { margin-top: 16px; font-size: 16px; line-height: 1.85; }
.nm p.small { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--rock-l); font-size: 14px; line-height: 1.75; color: var(--rock); }

/* ── 4. 가는 길 ── */
.way { background: var(--spray); }
.way h2 { color: var(--teal); }
.way__routes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 80px); margin-top: 56px; }
.rt { border-top: 4px solid var(--teal); padding-top: 26px; }
.rt-cable { border-top-color: var(--rock-l); }
.rt__h { font-size: clamp(22px, 2vw, 27px); font-weight: 900; color: var(--teal); }
.rt__ol { list-style: none; margin: 26px 0 0; padding: 0; }
.rt__s { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 18px; padding-bottom: 26px; font-size: 17px; font-weight: 600; }
.rt__s::before { content: ''; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: var(--rock-ll); }
.rt__s:last-child { padding-bottom: 0; }
.rt__s:last-child::before { display: none; }
.rt__s.is-hike::before { background: repeating-linear-gradient(var(--teal) 0 6px, transparent 6px 11px); }
.rt__ic { width: 52px; height: 52px; display: grid; place-items: center; border: 1.5px solid var(--teal); border-radius: 2px; background: #fff; color: var(--teal); position: relative; z-index: 1; }
.rt__ic svg { width: 26px; height: 26px; }
.rt__s.is-end .rt__ic { background: var(--teal); color: #fff; }
.rt__s.is-end { font-weight: 800; color: var(--teal); }
.rt-cable .rt__ic { border-color: var(--rock-l); color: var(--rock); }
.rt-cable .rt__s.is-end .rt__ic { background: var(--rock); border-color: var(--rock); color: #fff; }
.rt .note { margin-top: 22px; padding: 14px 16px; background: var(--mist); color: var(--ink); font-size: 15px; border-left: 3px solid var(--rock-l); }
.info { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(40px, 6vw, 96px); margin-top: clamp(72px, 8vw, 110px); }
.info__h { font-size: clamp(22px, 2vw, 27px); font-weight: 900; color: var(--teal); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 18px 0; border-top: 1px solid var(--rock-ll); vertical-align: top; text-align: left; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 1px solid var(--rock-ll); }
.tbl th { width: 8.5em; padding-right: 20px; font-size: 15px; font-weight: 700; color: var(--rock); }
.tbl td { font-size: 17px; line-height: 1.65; }
.tbl address { font-style: normal; }
.tbl a { color: var(--teal); font-weight: 700; }
.tr { display: block; margin-top: 2px; font-size: 14px; color: var(--rock); }

/* ── 5. 리뷰 키워드 — 위 가장자리에서 떨어지는 막대 ── */
.voice { background: var(--teal); color: #fff; }
.voice .kk { color: var(--aqua); }
.voice__base { margin-top: 14px; font-size: 15px; color: rgba(255, 255, 255, .72); }
.kws { list-style: none; margin: 60px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.kw { display: flex; flex-direction: column; align-items: flex-start; padding: 0 6px; }
.kw__t { display: flex; align-items: flex-end; width: calc(100% + 12px); margin: 0 -6px; padding: 0 6px 14px; min-height: 5.4em; border-bottom: 2px solid var(--spray); font-size: 14px; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.kw__bar { width: 18px; height: calc(var(--v) * 260px); background: linear-gradient(var(--spray), rgba(242, 245, 243, .18)); transform-origin: top; transition: transform 1.1s cubic-bezier(.3, 0, .2, 1); }
.js .kws:not(.in) .kw__bar { transform: scaleY(0); }
.kw:nth-child(n+2) .kw__bar { transition-delay: .05s; } .kw:nth-child(n+4) .kw__bar { transition-delay: .12s; } .kw:nth-child(n+7) .kw__bar { transition-delay: .2s; }
.kw__v { margin-top: 10px; font-family: var(--fn); }
.kw__v b { font-size: 30px; font-weight: 600; line-height: 1; }
.kw__v span { font-family: var(--f); font-size: 13px; font-weight: 600; margin-left: 2px; color: var(--aqua); }
.kw:nth-child(-n+2) .kw__t { color: #fff; font-weight: 800; }

/* ── 6. 가까운 곳 ── */
.near { background: var(--spray); }
.near h2 { color: var(--teal); }
.near__base { margin-top: 14px; font-size: 15px; color: var(--rock); }
.nbs { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 2px solid var(--teal); }
.nb { position: relative; padding: 24px 18px 22px; border-left: 1px solid var(--rock-ll); }
.nb:first-child { border-left: 0; padding-left: 0; }
.nb__km { font-family: var(--fn); color: var(--teal); font-size: 20px; font-weight: 500; line-height: 1; white-space: nowrap; }
.nb__km span { display: block; margin-bottom: 8px; font-family: var(--f); font-size: 13px; font-weight: 600; color: var(--rock); }
.nb__km b { font-size: 48px; font-weight: 600; margin-right: 2px; }
.nb__n { margin-top: 14px; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.nb__n span { display: block; font-size: 13px; font-weight: 600; color: var(--rock); margin-top: 2px; }
.nb__bar { display: block; margin-top: 18px; height: 3px; background: var(--rock-ll); position: relative; }
.nb__bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--d) * 100%); background: var(--teal); }

/* ── 끝 · 바닥 ── */
.end { background: var(--teal); color: #fff; padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.end__in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.end h2 { font-size: clamp(30px, 3.4vw, 48px); font-weight: 900; letter-spacing: -.04em; }
.end__p { margin-top: 12px; font-size: 17px; color: rgba(255, 255, 255, .78); }
.end__dl { margin: 26px 0 0; display: grid; gap: 6px; font-size: 15px; }
.end__dl div { display: flex; gap: 14px; }
.end__dl dt { min-width: 6em; color: var(--aqua); font-weight: 700; }
.end__dl dd { margin: 0; color: rgba(255, 255, 255, .88); }
.end__dl .tr { color: rgba(255, 255, 255, .62); }
.end__acts { justify-content: flex-end; }
.ft { background: var(--teal-d); color: rgba(255, 255, 255, .72); padding: 40px 0 46px; font-size: 14px; }
.ft__in { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ft__name { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; }
.ft__name svg { width: 22px; height: 22px; }
.ft__disc { margin-top: 12px; font-weight: 600; color: rgba(255, 255, 255, .86); }
.credit { margin-top: 6px; }
.top { flex: none; color: #fff; font-weight: 700; text-decoration: none; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 2px; }

/* ── 모바일 메뉴 ── */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--teal); color: #fff; padding: 88px 24px 40px; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__x { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 3px; background: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.menu ol { list-style: none; margin: 0 0 34px; padding: 0; counter-reset: m; }
.menu ol a { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; font-size: 24px; font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.menu ol a::before { counter-increment: m; content: counter(m, decimal-leading-zero); font: 500 14px var(--fn); color: var(--aqua); }
.menu .lang { width: max-content; margin: 0 0 26px; }
.menu .lang button { min-width: 44px; min-height: 40px; }
.acts--stack { flex-direction: column; }
.acts--stack .btn { width: 100%; }
.menu__addr { margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.menu__addr .only-intl { display: block; }
body.menu-open { overflow: hidden; }

/* ── 나타남 ── */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .hero__line::after { animation: none; display: none; }
  .kw__bar, .js .kws:not(.in) .kw__bar { transition: none; transform: none; }
}

/* ── 반응형 ── */
@media (max-width: 1180px) {
  .kw__t { font-size: 13px; min-height: 6.4em; }
  .nbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nb:nth-child(4) { border-left: 0; padding-left: 0; }
  .nb:nth-child(n+4) { border-top: 1px solid var(--rock-ll); }
}
@media (max-width: 1023px) {
  .height__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head head" "alt body" "ph body"; }
  .height__ph { max-width: 340px; }
  .height__ph .ph { aspect-ratio: 2 / 3; }
  .kws { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; border-top: 2px solid var(--spray); padding-top: 22px; }
  .kw { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 4.6em; align-items: center; gap: 14px; padding: 0; }
  .kw__t { min-height: 0; width: auto; margin: 0; padding: 0; border: 0; font-size: 15px; }
  .kw__bar { width: calc(var(--v) * 100%); height: 12px; transform-origin: left; background: linear-gradient(90deg, var(--spray), rgba(242, 245, 243, .3)); }
  .js .kws:not(.in) .kw__bar { transform: scaleX(0); }
  .kw__v { margin: 0; text-align: right; }
  .kw__v b { font-size: 22px; }
}
@media (max-width: 899px) {
  :root { --hd: 64px; }
  .gnb { display: none; }
  .burger { display: grid; }
  /* 태블릿 세로(601~899)도 글 | 세로 판 두 칸 — 세로 판을 화면 전체 폭으로 늘리지 않는다 */
  .hero { --ph: 46vw; }
  .hero__txt { padding: calc(var(--hd) + 28px) 60px 44px clamp(22px, 4.6vw, 40px); }
  .hero__fig { font-size: clamp(84px, min(19vh, 19vw), 180px); }
  .hero__title { font-size: clamp(44px, 8vw, 66px); }
  html:not([lang="ko"]) .hero__title { font-size: clamp(34px, 6vw, 50px); }
  .hero__lead { font-size: 16px; }
  .cue { display: none; }
  .first dl { grid-template-columns: minmax(0, 1fr); }
  .height__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); grid-template-areas: "head head" "alt ph" "body ph"; gap: 48px 36px; }
  .height__ph .ph { aspect-ratio: 1 / 2; }
  .water__grid, .seasons, .info { grid-template-columns: minmax(0, 1fr); }
  .water__head { position: static; }
  .seasons__ph { max-width: 480px; }
  .names__grid { grid-template-columns: minmax(0, 1fr); }
  .nm, .nm:first-child, .nm:last-child { padding: 30px 0 26px; border-left: 0; border-top: 1px solid var(--rock-ll); }
  .nm:first-child { border-top: 0; }
  .way__routes { grid-template-columns: minmax(0, 1fr); }
  .end__in { grid-template-columns: 1fr; }
  .end__acts { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 40px); }
  .hd__in { gap: 8px; padding: 0 10px 0 14px; }
  .brand__tr { display: none; }
  html:not([lang="ko"]) .brand__tr { display: block; }
  .brand__ko { font-size: 18px; }
  .hd__tools { gap: 6px; }
  .lang { padding: 2px; }
  .lang button { min-width: 40px; padding: 0 5px; font-size: 12px; min-height: 40px; }
  /* 휴대폰 첫 화면 = 사진(높이 숫자) → 이름 → 길찾기·전화 → 설명 → 신뢰 표시. 단추가 첫 화면 안에 든다 */
  .hero { display: block; min-height: 0; }
  .hero__ph { height: max(280px, 46vh); height: max(280px, 46svh); }
  .hero__ph::after { background: linear-gradient(180deg, rgba(7, 42, 43, .6) 0, rgba(7, 42, 43, 0) 24%, rgba(7, 42, 43, 0) 72%, var(--teal) 100%); }
  .hero__num { right: auto; left: clamp(8px, 3vw, 20px); bottom: auto; height: max(280px, 46vh); height: max(280px, 46svh); transform: none; }
  .hero__line { margin-bottom: 8px; }
  .hero__fig { font-size: clamp(60px, min(10svh, 20vw), 104px); }
  .hero__numk { margin-top: 8px; flex-grow: .1; }
  .hero__txt { display: flex; flex-direction: column; align-items: flex-start; padding: 0 20px 36px; }
  .hero__kicker { order: 1; margin-top: 0; }
  .hero__title { order: 2; margin: 4px 0 8px; font-size: clamp(50px, 15vw, 68px); }
  html:not([lang="ko"]) .hero__title { font-size: clamp(34px, 10vw, 50px); }
  .hero__alias { order: 3; }
  .hero__acts { order: 4; align-self: stretch; margin-top: 18px; }
  .hero__lead { order: 5; margin-top: 22px; }
  .hero__meta { order: 6; }
  .badge { order: 7; margin-top: 18px; }
  .acts .btn { flex: 1 1 calc(50% - 5px); padding-right: 12px; }
  .acts .btn--tel { flex-basis: 100%; }
  .bignum b { font-size: clamp(76px, 24vw, 104px); }
  .height__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "alt" "body" "ph"; }
  .height__ph .ph { aspect-ratio: 3 / 5; }
  .aerial { height: 300px; }
  .aerial img { object-position: 50% 45% !important; }
  .flow__i { padding-left: 64px; }
  .flow__drop { left: 46px; }
  .kw { grid-template-columns: minmax(0, 8.6em) minmax(0, 1fr) 4em; gap: 10px; }
  .kw__t { font-size: 14px; }
  html[lang="en"] .kw { grid-template-columns: minmax(0, 9.6em) minmax(0, 1fr) 4.6em; }
  .nbs { grid-template-columns: 1fr 1fr; }
  .nb, .nb:nth-child(4) { padding: 20px 14px 18px; border-left: 1px solid var(--rock-ll); }
  .nb:nth-child(odd) { border-left: 0; padding-left: 0; }
  .nb:nth-child(n+3) { border-top: 1px solid var(--rock-ll); }
  .nb__km b { font-size: 40px; }
  .tbl th, .tbl td { display: block; width: auto; border: 0; padding: 0; }
  .tbl tr { display: block; padding: 16px 0; border-top: 1px solid var(--rock-ll); }
  .tbl tr:last-child { border-bottom: 1px solid var(--rock-ll); }
  .tbl tr:last-child th, .tbl tr:last-child td { border: 0; }
  .tbl th { margin-bottom: 4px; font-size: 14px; }
  .ft__in { flex-direction: column; }
  .end__dl div { flex-direction: column; gap: 0; }
}