@font-face { font-family: 'Pretendard Variable'; src: url('../assets/brand/pretendard-variable.woff2') format('woff2'); font-weight: 45 920; font-style: normal; font-display: block; }

:root {
  --stone-200: #E3DFD8;  
  --zinc-500: #6E7A85;   
  --page: 1200px;
  --bar-h: 88px;
}

html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { background: var(--surface-canvas); word-break: keep-all; overflow-wrap: anywhere; }
img, svg { display: block; max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }
.wrap { width: min(var(--page), calc(100% - 2 * var(--gutter))); margin-inline: auto; }


.bar { height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.bar.lined { border-bottom: 1px solid var(--line-hair); }
.bar-line { border-bottom: 1px solid var(--line-hair); }
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--text-title); }
.mark .sym { width: 17px; height: auto; }
.mark .word { width: 148px; height: auto; }
.mark .site { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--line-strong); font: 500 19px/22px var(--font); letter-spacing: .02em; color: var(--text-title); }
.menu { display: flex; align-items: center; gap: 40px; }
.menu a { position: relative; padding: 10px 0; font: 500 17px/24px var(--font); letter-spacing: .01em; color: var(--text-body); }
.menu a[aria-current]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--brand-mark); }
.bar .cta { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; background: var(--action-primary); color: var(--text-on-stage); font: 500 15px/1 var(--font); letter-spacing: var(--tracking-button); }
.bar .right { display: flex; align-items: center; gap: 48px; }


.stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; min-height: calc(900px - var(--bar-h)); }
.lead { align-self: end; padding: 0 0 104px; }
.lead .micro { margin-bottom: 28px; }
.lead h1 { font: 200 72px/84px var(--font); letter-spacing: -0.04em; color: var(--text-title); }
.lead .sub { margin-top: 28px; font: 400 18px/31px var(--font); color: var(--text-body); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 44px; border-top: 1px solid var(--line-hair); max-width: 540px; }
.facts div { padding: 16px 0 0; }
.facts div + div { padding-left: 18px; border-left: 1px solid var(--line-hair); margin-top: 16px; padding-top: 0; }
.facts div:first-child { padding-top: 16px; }
.facts dt { font: 400 12px/18px var(--font); letter-spacing: .06em; color: var(--text-muted); }
.facts dd { margin-top: 4px; font: 300 26px/32px var(--font); letter-spacing: -0.02em; color: var(--text-title); font-variant-numeric: tabular-nums; }
.facts dd small { font: 400 14px/20px var(--font); letter-spacing: 0; color: var(--text-body); margin-left: 2px; }
.facts-note { margin-top: 14px; font: var(--caption); color: var(--text-muted); }

.drawing { position: relative; align-self: end; justify-self: center; width: 560px; }
.drawing .elev { width: 100%; height: auto; }
.drawing figcaption { position: absolute; right: 0; bottom: 18px; display: flex; gap: 14px; font: var(--caption); color: var(--text-muted); }

.ground { position: absolute; left: 0; right: calc((var(--page) - 100vw) / 2); height: 1px; background: var(--brand-mark); transform-origin: left center; animation: draw 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ground { animation: none; } }


.band-wide { background: var(--surface-stage); color: var(--text-on-stage); }
.band-wide .wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px; padding: 64px 0 60px; }
.band-wide .figure { font: 200 96px/96px var(--font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.band-wide .figure small { font: 300 32px/1 var(--font); letter-spacing: -0.01em; margin-left: 6px; }
.band-wide .what { font: 300 22px/34px var(--font); color: var(--text-on-stage); }
.band-wide .note { margin-top: 12px; font: var(--caption); color: var(--text-on-stage-muted); }


.routes { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-hair); border-left: 1px solid var(--line-hair); margin: 72px auto 120px; }
.routes a { position: relative; display: block; min-height: 220px; padding: 28px 28px 32px; border-right: 1px solid var(--line-hair); border-bottom: 1px solid var(--line-hair); }
.routes .no { font: 400 12px/18px var(--font); letter-spacing: .12em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.routes .name { margin-top: 56px; font: 300 30px/38px var(--font); letter-spacing: -0.02em; color: var(--text-title); }
.routes .desc { margin-top: 10px; font: 400 15px/24px var(--font); color: var(--text-body); }
.routes .arrow { position: absolute; right: 28px; top: 28px; width: 22px; height: 1px; background: var(--text-title); }
.routes .arrow::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--text-title); border-right: 1px solid var(--text-title); transform: rotate(45deg); transform-origin: center; }


.head { padding: 72px 0 40px; }
.head h1 { margin-top: 22px; font: 200 56px/64px var(--font); letter-spacing: -0.035em; color: var(--text-title); }
.head .line { margin-top: 18px; font: 400 17px/28px var(--font); color: var(--text-body); }


.pick { display: grid; border-top: 1px solid var(--line-hair); border-left: 1px solid var(--line-hair); }
.pick a { height: var(--choice-height); display: flex; align-items: center; justify-content: center; gap: 10px; border-right: 1px solid var(--line-hair); border-bottom: 1px solid var(--line-hair); font: 400 15px/1 var(--font); letter-spacing: .02em; color: var(--text-body); }
.pick a small { font: 400 13px/1 var(--font); color: var(--text-muted); }
.pick a.on { background: var(--action-primary); color: var(--text-on-stage); font-weight: 500; }
.pick a.on small { color: var(--text-on-stage-muted); }
.units { display: grid; grid-template-columns: 1fr 380px; gap: 64px; padding: 36px 0 120px; }
.plan-box { position: relative; padding-top: 28px; border-top: 1px solid var(--line-hair); }
.plan-box .plan { width: 100%; height: auto; }
.plan-box .north { position: absolute; right: 0; top: 30px; font: 400 11px/14px var(--font); letter-spacing: .2em; color: var(--text-muted); }
.pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; background: var(--surface-canvas); border: 1px solid var(--text-title); font: 500 12px/1 var(--font); letter-spacing: .04em; color: var(--text-title); font-variant-numeric: tabular-nums; }
.pin.on { background: var(--action-primary); border-color: var(--action-primary); color: var(--text-on-stage); }
.plan-cap { display: flex; justify-content: space-between; margin-top: 14px; font: var(--caption); color: var(--text-muted); }
.spec .unitname { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0 18px; border-bottom: 1px solid var(--text-title); }
.spec .unitname b { font: 300 30px/36px var(--font); letter-spacing: -0.02em; color: var(--text-title); }
.spec .unitname span { font: 400 14px/20px var(--font); color: var(--text-muted); }
.spec .big { padding: 26px 0 22px; border-bottom: 1px solid var(--line-hair); }
.spec .big .v { font: 200 54px/58px var(--font); letter-spacing: -0.04em; color: var(--text-title); font-variant-numeric: tabular-nums; }
.spec .big .v small { font: 300 22px/1 var(--font); margin-left: 4px; }
.spec .big .k { margin-top: 8px; font: 400 14px/20px var(--font); color: var(--text-body); }
.spec dl .r { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line-hair); }
.spec dt { font: 400 13px/24px var(--font); letter-spacing: .04em; color: var(--text-muted); }
.spec dd { font: 400 16px/24px var(--font); color: var(--text-title); font-variant-numeric: tabular-nums; }
.spec dd .sub { color: var(--text-muted); font-size: 14px; }
.spec dd .wait { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/24px var(--font); color: var(--status-warn); }
.spec dd .wait::before { content: ''; width: 6px; height: 6px; background: currentColor; }
.spec .fine { margin-top: 18px; font: var(--caption); color: var(--text-muted); }
.spec .more { display: inline-flex; gap: 10px; margin-top: 26px; padding-bottom: 6px; border-bottom: 1px solid var(--text-link); font: 500 15px/22px var(--font); color: var(--text-link); }


.m { width: 390px; position: relative; overflow: hidden; background: var(--surface-canvas); }
.m.first { height: 664px; }            
.m .mbar { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); }
.m .mbar.lined { border-bottom: 1px solid var(--line-hair); }
.m .mark { gap: 8px; }
.m .mark .sym { width: 11px; }
.m .mark .word { width: 98px; }
.m .mark .site { font-size: 16px; line-height: 20px; padding-left: 10px; margin-left: 2px; }
.m .menu-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; font: 500 15px/1 var(--font); color: var(--text-title); }
.m .menu-btn i { width: 18px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.m .tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line-hair); }
.m .tabs a { height: 46px; display: grid; place-items: center; font: 500 15px/1 var(--font); color: var(--text-muted); }
.m .tabs a[aria-current] { color: var(--text-title); box-shadow: inset 0 -1px 0 var(--brand-mark); }
.m .mlead { padding: 30px var(--gutter) 0; }
.m .mlead .micro { margin-bottom: 16px; }
.m .mlead h1 { font: 500 38px/46px var(--font); letter-spacing: -0.04em; color: var(--text-title); }
.m .mlead .sub { margin-top: 14px; font: 400 15px/25px var(--font); color: var(--text-body); }
.m .mstage { position: absolute; left: 0; right: 0; bottom: 56px; height: 320px; display: grid; grid-template-columns: 1fr 204px; gap: 16px; padding: 0 var(--gutter) 0; align-items: end; }
.m .mstage .elev { width: 204px; height: auto; margin-bottom: 18px; }
.m .mstage .ground { left: 0; right: 0; bottom: 18px; }
.m .mlist { margin-bottom: 30px; border-top: 1px solid var(--line-hair); }
.m .mlist div { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0 8px; border-bottom: 1px solid var(--line-hair); }
.m .mlist dt { font: 400 13px/20px var(--font); color: var(--text-muted); }
.m .mlist dd { font: 500 18px/22px var(--font); letter-spacing: -0.01em; color: var(--text-title); font-variant-numeric: tabular-nums; }
.m .mlist dd small { font: 400 12px/1 var(--font); color: var(--text-body); margin-left: 2px; }
.m .mbottom { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--action-primary); color: var(--text-on-stage); font: var(--button); letter-spacing: var(--tracking-button); }
.m .mbottom.static { position: static; }
.m .mcap { padding: 10px var(--gutter) 0; font: var(--caption); color: var(--text-muted); }
.m .mband { background: var(--surface-stage); color: var(--text-on-stage); padding: 30px var(--gutter) 32px; }
.m .mband .figure { font: 300 64px/64px var(--font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.m .mband .figure small { font: 400 22px/1 var(--font); margin-left: 4px; }
.m .mband .what { margin-top: 16px; font: 400 16px/26px var(--font); }
.m .mband .note { margin-top: 10px; font: var(--caption); color: var(--text-on-stage-muted); }
.m .mroutes { margin: 32px var(--gutter) 40px; border-top: 1px solid var(--line-hair); }
.m .mroutes a { position: relative; display: block; padding: 20px 40px 19px 0; border-bottom: 1px solid var(--line-hair); }
.m .mroutes .no { font: 400 11px/16px var(--font); letter-spacing: .12em; color: var(--text-muted); }
.m .mroutes .name { margin-top: 4px; font: 500 21px/28px var(--font); letter-spacing: -0.02em; color: var(--text-title); }
.m .mroutes .desc { margin-top: 4px; font: 400 14px/22px var(--font); color: var(--text-body); }
.m .mroutes .arrow { position: absolute; right: 2px; top: 50%; width: 18px; height: 1px; background: var(--text-title); }
.m .mroutes .arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--text-title); border-right: 1px solid var(--text-title); transform: rotate(45deg); }
.m .mfoot { padding: 22px var(--gutter) 26px; border-top: 1px solid var(--line-hair); font: var(--caption); color: var(--text-muted); }
.m .mfoot p + p { margin-top: 6px; }
.m .mhead { padding: 26px var(--gutter) 22px; }
.m .mhead h1 { margin-top: 14px; font: 500 32px/40px var(--font); letter-spacing: -0.035em; color: var(--text-title); }
.m .mhead .line { margin-top: 10px; font: 400 15px/24px var(--font); color: var(--text-body); }
.m .mpad { padding: 0 var(--gutter); }
.m .pick a { height: 52px; font-size: 14px; }
.m .plan-box { margin-top: 18px; padding-top: 16px; }
.m .pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 11px; }
.m .plan-cap { flex-direction: column; gap: 2px; }
.m .spec { margin-top: 24px; padding-bottom: 32px; }
.m .spec .unitname b { font: 500 24px/30px var(--font); }
.m .spec .big .v { font: 400 44px/48px var(--font); letter-spacing: -0.03em; }
.m .spec .big .v small { font-size: 18px; }
.m .spec dl .r { grid-template-columns: 88px 1fr; padding: 13px 0; }
.m .spec dd { font-size: 15px; }