/* Layout: 고정 노을 히어로(스크롤하면 해가 진다) → 스크롤로 밝아지는 문장 → 가로 하이라이트 갤러리 → 날짜별 고정 지도+타임라인 → 준비물 → 정산 */
:root{
  --bg:#fbfaf8; --surface:#ffffff; --fg:#1c1b1d; --muted:#6d6a70; --line:#e5e2e0; --glass:rgba(251,250,248,.74);
  --sun:#f2681c; --sea:#0b6f86; --dusk:#5a3e8f; --rose:#d4426c;
  --display:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --nav:52px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0b0b0d; --surface:#161619; --fg:#f3f1ee; --muted:#9c98a0; --line:#2a292e; --glass:rgba(11,11,13,.72);
  --sun:#ff8140; --sea:#3fbfd6; --dusk:#a58be0; --rose:#ff6d96; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0b0b0d; --surface:#161619; --fg:#f3f1ee; --muted:#9c98a0; --line:#2a292e; --glass:rgba(11,11,13,.72);
  --sun:#ff8140; --sea:#3fbfd6; --dusk:#a58be0; --rose:#ff6d96; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav) + 12px)}
body{background:var(--bg); color:var(--fg); font:16px/1.65 var(--body); word-break:keep-all; overflow-wrap:anywhere; -webkit-font-smoothing:antialiased; overflow-x:clip}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:max(16px,4vw)}
h1,h2,h3,h4{font-family:var(--display); text-wrap:balance; margin:0; letter-spacing:-.03em}
.eyebrow{font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
a{color:inherit}
:focus-visible{outline:2px solid var(--sea); outline-offset:3px; border-radius:6px}
/* 글꼴(font): --display/--body 는 trip.js 가 고른 글꼴로 바꿈. 굵기가 하나뿐인 글꼴은 가짜 굵게를 끔 */
:root[data-font="round"]{font-synthesis:style}
/* 둥근·손글씨 글꼴은 글자가 커 보여서 히어로 제목을 조금 줄임 */
:root:is([data-font="round"],[data-font="hand"]) .hero h1{font-size:min(clamp(90px,20vw,230px), calc(68vw / var(--len,2))); line-height:1}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; height:var(--nav); background:var(--glass);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--line)}
.nav .wrap{height:100%; display:flex; align-items:center; gap:28px}
.brand{font:800 17px var(--display); letter-spacing:-.02em; text-decoration:none}
.nav nav{display:flex; gap:22px; margin-left:auto}
.nav nav a{font-size:13px; color:var(--muted); text-decoration:none; transition:color .2s}
.nav nav a:hover,.nav nav a.on{color:var(--fg)}
.dday{font:500 12px var(--mono); padding:6px 11px; border-radius:99px; background:var(--fg); color:var(--bg); white-space:nowrap}
@media (max-width:640px){.nav nav{display:none} .dday{margin-left:auto}}
/* 모바일 하단 탭바 */
.tabbar{display:none}
@media (max-width:640px){
  .tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--glass); border-top:1px solid var(--line);
    backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px))}
  .tabbar a{flex:1; display:grid; place-items:center; gap:2px; padding:7px 0; font-size:11.5px; font-weight:600; color:var(--muted); text-decoration:none; border-radius:12px}
  .tabbar a b{font:700 15px var(--display)}
  .tabbar a.on{color:var(--fg); background:color-mix(in srgb,var(--fg) 7%,transparent)}
}

/* hero: sunset scene (single-look scene, explicit colors) */
.hero{height:200vh; position:relative}
.stage{position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--nav)); height:calc(100vh - var(--nav)); height:calc(100svh - var(--nav)); min-height:560px; overflow:hidden; --p:0;
  background:linear-gradient(#7fb6d6,#f7c58b 62%,#f39a5b); color:#fff}
.photo{position:absolute; inset:0; background:center/cover no-repeat; transform:scale(calc(1 + var(--p)*.12)); will-change:transform}
.photo::after{content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,calc(var(--ov,.35)*.6)),rgba(0,0,0,var(--ov,.35)) 60%,rgba(0,0,0,calc(var(--ov,.35) + .2)))}
.stage.has-photo{background:#222}
.stage.has-photo .sky-dusk,.stage.has-photo .stars,.stage.has-photo .sun,.stage.has-photo .sea{display:none}
[hidden]{display:none!important}
.sky-dusk{position:absolute; inset:0; will-change:opacity; background:linear-gradient(#141633,#4a2f6b 45%,#e0603a 64%); opacity:calc(var(--p)*1.1)}
.stars{position:absolute; inset:0 0 40% 0; will-change:opacity; opacity:calc(var(--p)*1.4 - .4);
  background-image:radial-gradient(1.5px 1.5px at 12% 20%,#fff 50%,transparent),radial-gradient(1px 1px at 28% 8%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 44% 26%,#fff 50%,transparent),radial-gradient(1px 1px at 63% 12%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 78% 30%,#fff 50%,transparent),radial-gradient(1px 1px at 90% 10%,#fff 50%,transparent),radial-gradient(1px 1px at 6% 40%,#fff 50%,transparent),radial-gradient(1.2px 1.2px at 54% 6%,#fff 50%,transparent)}
.sun{position:absolute; left:50%; width:min(46vw,340px); aspect-ratio:1; max-width:100%; border-radius:50%;
  top:30%; transform:translate3d(-50%,calc(var(--p)*36svh),0); will-change:transform;
  background:radial-gradient(circle at 50% 45%,#fff6d8,#ffc35a 45%,#ff7a2c 75%); box-shadow:0 0 120px 40px rgba(255,150,70,.55)}
.sea{position:absolute; left:0; right:0; bottom:0; height:36%; overflow:hidden;
  background:linear-gradient(#e9824f,#7c4f73 40%,#1e2a4d); }
.sea::before{content:""; position:absolute; inset:-10px 0 0 0; will-change:transform; opacity:.35; animation:waves 1.5s linear infinite;
  background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(255,255,255,.35) 9px 10px)}
.glow{position:absolute; left:50%; top:0; will-change:opacity; width:min(30vw,220px); height:100%; transform:translateX(-50%); opacity:calc(1 - var(--p)*1.3);
  background:repeating-linear-gradient(180deg,rgba(255,214,150,.9) 0 3px,transparent 3px 11px); mask:linear-gradient(#000,transparent); -webkit-mask:linear-gradient(#000,transparent); filter:blur(1px)}
.hero-copy{position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding-inline:16px; padding-bottom:14%; gap:18px}
.hero-copy .eyebrow{color:rgba(255,255,255,.88)}
.hero h1{will-change:transform,opacity; font-size:min(clamp(110px,26vw,300px), calc(88vw / var(--len,2))); font-weight:900; line-height:.85; letter-spacing:-.06em; text-shadow:0 10px 60px rgba(120,40,20,.35);
  transform:scale(calc(1 + var(--p)*.25)); opacity:calc(1 - var(--p)*1.6)}
.hero h1 span{display:inline-block; animation:up 1.2s cubic-bezier(.2,.8,.2,1) both}
.hero h1 span:nth-child(2){animation-delay:.1s}
.hero .lead{font-size:clamp(17px,2.4vw,23px); max-width:30ch; margin:0 auto; opacity:calc(1 - var(--p)*1.8); animation:fade 1s .4s both}
.crew{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; animation:fade 1s .55s both; opacity:calc(1 - var(--p)*1.8)}
.crew span{font:700 14px var(--display); padding:7px 14px; border-radius:99px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.second{position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding-inline:16px; padding-bottom:18%; pointer-events:none;
  opacity:calc((var(--p) - .45)*3); transform:translateY(calc((1 - var(--p))*60px))}
.second h2{font-size:clamp(40px,8vw,104px); font-weight:900; line-height:1.02}
.second p{margin:16px 0 0; color:rgba(255,255,255,.8); font-size:clamp(15px,2vw,19px)}
/* 휴대폰: 스크롤에 맞춰 움직이는 효과를 모두 끄고 정적인 화면으로 */
@media (max-width:820px), (pointer:coarse){
  .hero{height:auto}
  .stage{position:relative; top:0}
  .second,.scroll-hint{display:none}
  .sea::before,.map .mk.on .pulse,.scroll-hint::after{animation:none!important}
  .manifesto .w.dim{opacity:1}
  .reveal{animation:none!important}
  .sun,.sky-dusk,.stars,.glow,.hero h1,.sea::before{will-change:auto}
  .map .draw{transition:none}
}
/* 휴대폰은 배경 블러가 스크롤을 무겁게 해서 끔 */
@media (max-width:820px), (pointer:coarse){
  .nav,.tabbar,.crew span,.units div{backdrop-filter:none!important; -webkit-backdrop-filter:none!important}
  .nav,.tabbar{background:var(--bg)}
  .crew span,.units div{background:rgba(255,255,255,.22)}
  .hero h1{text-shadow:none}
}
/* 출발 카운트다운 */
.count{display:grid; justify-items:center; gap:10px; animation:fade 1s .7s both; opacity:calc(1 - var(--p)*1.8)}
.count-label{font:600 13px var(--body); letter-spacing:.04em; color:rgba(255,255,255,.92)}
.units{display:flex; gap:8px} .units[hidden]{display:none}
.units div{min-width:clamp(62px,15vw,84px); padding:10px 6px 8px; border-radius:16px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.units b{display:block; font:800 clamp(24px,5.4vw,40px)/1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.units small{font:500 11px var(--mono); letter-spacing:.06em; opacity:.85}
@media (max-width:640px){.hero-copy{gap:14px; padding-bottom:20%} .hero h1{font-size:min(clamp(96px,30vw,150px), calc(90vw / var(--len,2))); line-height:1} .crew span{font-size:13px; padding:6px 12px}}
.scroll-hint{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font:500 12px var(--mono); letter-spacing:.1em; color:rgba(255,255,255,.75); opacity:calc(1 - var(--p)*4)}
.scroll-hint::after{content:""; display:block; width:1px; height:28px; margin:8px auto 0; background:rgba(255,255,255,.7); animation:hint 1.8s ease-in-out infinite; transform-origin:top}

/* manifesto */
.manifesto{padding-block:clamp(90px,16vh,180px)}
.manifesto p{font:800 clamp(30px,5.4vw,66px)/1.22 var(--display); letter-spacing:-.035em; margin:0; max-width:20ch; text-wrap:balance}
.manifesto .w{transition:opacity .25s, color .25s}
.manifesto .w.dim{opacity:.2}
.manifesto .hl{color:var(--sun)}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:22px; overflow:hidden; margin-top:72px}
.stats div{background:var(--surface); padding:24px 18px}
.stats b{display:block; font:800 clamp(28px,4.4vw,44px)/1.1 var(--display); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stats small{color:var(--muted); font-size:13px}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}

/* horizontal gallery */
.gallery{position:relative}
.g-stage{position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--nav)); height:calc(100vh - var(--nav)); height:calc(100svh - var(--nav)); min-height:540px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:32px}
.g-head h2{font-size:clamp(36px,6vw,72px); font-weight:900; line-height:1.05; margin-top:12px}
.track{display:flex; gap:20px; padding-inline:max(16px,4vw); will-change:transform}
.gcard{flex:none; width:min(78vw,400px); aspect-ratio:4/5; max-height:58vh; border-radius:30px; position:relative; overflow:hidden; color:#fff; padding:28px; display:flex; flex-direction:column; justify-content:flex-end}
.gcard .art{position:absolute; inset:0; transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.gcard:hover .art{transform:scale(1.06)}
.gcard .t{position:relative; font:500 13px var(--mono); opacity:.85}
.gcard h3{position:relative; font-size:clamp(28px,3.4vw,38px); font-weight:900; margin-top:6px}
.gcard p{position:relative; margin:8px 0 0; font-size:15px; opacity:.9}
.gcard .big{position:absolute; top:18px; right:22px; font:900 92px/1 var(--display); opacity:.18; letter-spacing:-.05em}
/* 모바일: 스크롤 가로 이동 대신 손가락으로 넘기기 */
@media (max-width:820px), (pointer:coarse){
  .gallery{height:auto!important}
  .g-stage{position:relative; height:auto!important; min-height:0; padding-block:72px; gap:24px}
  .track{overflow-x:auto; transform:none!important; scroll-snap-type:x mandatory; scroll-padding-inline:16px; scrollbar-width:none; overscroll-behavior-x:contain}
  .track::-webkit-scrollbar{display:none}
  .gcard{width:80vw; max-height:none; scroll-snap-align:start; border-radius:24px; padding:22px}
  .gcard .big{font-size:72px}
}
.gcard .art.img{background:center/cover no-repeat}
.gcard .art.img::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 35%,rgba(0,0,0,.65))}
.a1{background:radial-gradient(120% 70% at 50% 110%,#0b4f6a,transparent),repeating-linear-gradient(170deg,#1b7fa3 0 18px,#1772960a 18px 22px),linear-gradient(#5fb0d4,#0d5f80)}
.a2{background:radial-gradient(40% 50% at 30% 40%,#f6d29a,transparent 70%),radial-gradient(90% 90% at 100% 100%,#2a1d18,transparent),linear-gradient(135deg,#3a2a22,#7b5a43 60%,#c9935c)}
.a3{background:radial-gradient(30% 22% at 50% 66%,#ffd27a,#ff7a2c 60%,transparent 62%),linear-gradient(#2c2353,#9a4a6b 50%,#f08a4b 66%,#4b2e52 67%,#1b1f3d)}
.a4{background:radial-gradient(30% 30% at 50% 78%,rgba(255,170,60,.85),transparent 70%),radial-gradient(2px 2px at 20% 20%,#fff,transparent),radial-gradient(2px 2px at 70% 14%,#fff,transparent),linear-gradient(#0f1226,#2a1e3b 70%,#5a2b25)}
.a5{background:radial-gradient(60% 40% at 50% 30%,#fff3dc,transparent),linear-gradient(160deg,#c48a52,#7a4b2c)}

/* map + day */
.map .grid{fill:var(--line)}
.map .base{fill:none; stroke:var(--line); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2 7}
.map .draw{fill:none; stroke:var(--c); stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}
.map .mk circle.dot{fill:var(--surface); stroke:var(--c); stroke-width:2.5; transition:r .35s, fill .35s}
.map .mk text.n{font:600 11px var(--mono); fill:var(--c); text-anchor:middle; dominant-baseline:central; transition:fill .35s}
.map .mk text.l{font:600 14px var(--body); fill:var(--fg); dominant-baseline:central; paint-order:stroke; stroke:var(--surface); stroke-width:5px; stroke-linejoin:round}
.map .mk .pulse{fill:var(--c); opacity:0}
.map .mk.on circle.dot{fill:var(--c); r:15}
.map .mk.on text.n,.map .mk.done text.n{fill:var(--surface)}
.map .mk.on .pulse{animation:pulse 1.8s ease-out infinite}
.map .mk.done circle.dot{fill:var(--c)}

.day{padding-block:clamp(64px,10vh,120px); border-top:1px solid var(--line)}
.day-head{margin-bottom:40px}
.day-head .num{font:900 clamp(64px,11vw,140px)/1.05 var(--display); margin-top:8px; letter-spacing:-.05em; color:var(--c)}
.day-head h3{font-size:clamp(28px,4.4vw,48px); font-weight:800; margin-top:10px}
.day-head p{color:var(--muted); margin:8px 0 0}
.day-body{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start}
.day.nomap .day-body{grid-template-columns:minmax(0,720px)}
.map-wrap{position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--nav) + 20px); background:var(--surface); border:1px solid var(--line); border-radius:28px; overflow:hidden}
.map-wrap svg{display:block; width:100%; height:auto; max-height:calc(100vh - var(--nav) - 60px)}
.map-cap{position:absolute; left:18px; bottom:14px; font:500 12px var(--mono); color:var(--muted)}
.stops{list-style:none; margin:0; padding:0 0 26vh}
.nomap .stops{padding-bottom:0}
.stop{position:relative; padding:24px 0 24px 30px; border-left:2px solid var(--line)}
.stop::before{content:""; position:absolute; left:-7px; top:32px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--line); transition:.35s}
.stop.on::before,.stop.done::before{background:var(--c); border-color:var(--c)}
.stop.on::before{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 22%,transparent)}
.stop.done{border-left-color:var(--c)}
.stop .t{font:500 13px var(--mono); color:var(--c); font-variant-numeric:tabular-nums}
.stop h4{font-size:clamp(19px,2.3vw,25px); line-height:1.35; font-weight:700; letter-spacing:-.02em; margin:4px 0 6px; transition:transform .4s}
.stop.on h4{transform:translateX(4px)}
.stop p{margin:0; color:var(--muted); font-size:15px}
.stop p strong{color:var(--rose); font-weight:600}
.tag{display:inline-block; font:600 11.5px var(--body); letter-spacing:.04em; padding:3px 9px; border-radius:99px; margin-left:8px; vertical-align:3px;
  background:color-mix(in srgb,var(--c) 14%,transparent); color:var(--c)}
.stop .leg{margin:12px 0 -10px; font:500 12px var(--mono); color:var(--muted); opacity:.8}
.stop .leg::before{content:"↓ "}
.go{font-size:13px; color:var(--c); text-decoration:none; margin-left:6px; white-space:nowrap}
.go:hover{text-decoration:underline}
@media (max-width:820px){
  .day-body{grid-template-columns:minmax(0,1fr)}
  .map-wrap{position:relative; top:auto; border-radius:20px}
  .map-wrap svg{max-height:40vh; max-height:34svh}
  .stops{padding-bottom:10vh}
}
@media (max-width:640px){
  .day-head{margin-bottom:28px}
  .stop{padding:18px 0 18px 24px}
  .stop::before{top:26px}
  .tag{margin-left:6px}
  .go{display:inline-block; margin:6px 0 0 6px; padding:4px 0}
  .map .mk text.l{font-size:21px; stroke-width:7px}
  .map .mk text.n{font-size:15px}
  .map .mk circle.dot{r:15}
  .map .mk.on circle.dot{r:18}
}

/* sections */
.sec{padding-block:clamp(72px,12vh,140px)}
.sec-head{text-align:center; margin-bottom:44px}
.sec-head h2{font-size:clamp(36px,6vw,72px); font-weight:900; line-height:1.05; margin-top:14px}
.sec-head p{color:var(--muted); margin:16px auto 0; max-width:46ch}
.pack{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:16px}
.pack-card,.card{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:clamp(20px,3vw,28px)}
.pack-card h3,.card h3{font-size:19px; font-weight:800; margin-bottom:12px}
.pack-card label{display:flex; gap:12px; align-items:center; padding:9px 0; cursor:pointer; border-top:1px solid var(--line); font-size:15px}
.pack-card label:first-of-type{border-top:0}
.pack-card input{appearance:none; width:22px; height:22px; flex:none; border-radius:7px; border:2px solid var(--line); display:grid; place-items:center; cursor:pointer; transition:.2s; margin:0}
.pack-card input:checked{background:var(--sea); border-color:var(--sea)}
.pack-card input:checked::after{content:""; width:6px; height:11px; border:solid var(--surface); border-width:0 2.5px 2.5px 0; transform:translateY(-1px) rotate(45deg)}
.pack-card input:checked + span{color:var(--muted); text-decoration:line-through}
.pack-bar{max-width:520px; margin:0 auto 36px; text-align:center}
.pack-bar .bar{height:8px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:10px}
.pack-bar .fill{height:100%; width:0; background:linear-gradient(90deg,var(--sea),var(--sun)); transition:width .5s cubic-bezier(.2,.8,.2,1)}
.pack-bar span{font:500 13px var(--mono); color:var(--muted)}
.money{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:16px}
@media (max-width:820px){.money{grid-template-columns:minmax(0,1fr)}}
.row{display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--line); font-size:15px}
.rows .row:first-child{border-top:0}
.row .who{color:var(--muted); font-size:13px}
.row b{font:500 15px var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.total{display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; margin-top:6px; border-top:2px solid var(--fg)}
.total b{font:800 28px var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.settle .row b{color:var(--sun)}
.add{display:grid; gap:16px; align-content:start}
.add h3{margin:0}
.f2{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:12px}
@media (max-width:480px){.f2{grid-template-columns:minmax(0,1fr)}}
.fld{display:grid; gap:7px; min-width:0}
.fld > span{font-size:13px; font-weight:600; color:var(--muted); display:flex; justify-content:space-between}
.fld input,.fld select{font:inherit; font-size:16px; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:11px 13px; width:100%; transition:border-color .2s}
.fld input:focus,.fld select:focus{outline:none; border-color:var(--sea)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips button{font:600 14px var(--body); color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:99px; padding:7px 14px; cursor:pointer; transition:.2s}
.chips button[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.link{font:600 12px var(--body); color:var(--sea); background:none; border:0; padding:0; cursor:pointer}
.btn{font:700 16px var(--display); color:var(--bg); background:var(--fg); border:0; border-radius:14px; padding:14px; cursor:pointer; transition:transform .15s, opacity .2s}
.btn:hover{transform:translateY(-1px)} .btn:active{transform:scale(.98)} .btn:disabled{opacity:.4; cursor:default; transform:none}
.note{margin:0; font-size:12.5px; color:var(--muted); text-align:center}
.note.err{color:var(--rose)}
.catbar{display:flex; height:10px; border-radius:99px; overflow:hidden; background:var(--line); margin-top:18px; gap:2px}
.catbar i{display:block; height:100%; transition:flex-grow .6s cubic-bezier(.2,.8,.2,1)}
.legend2{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:12.5px; color:var(--muted)}
.legend2 span{display:flex; align-items:center; gap:6px}
.legend2 i{width:8px; height:8px; border-radius:2px}
.tbl{margin-top:20px; overflow-x:auto}
.tbl table{width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums}
.tbl th{font-weight:600; font-size:12px; color:var(--muted); text-align:right; padding:6px 0 8px 10px; border-bottom:1px solid var(--line)}
.tbl th:first-child,.tbl td:first-child{text-align:left; padding-left:0}
.tbl td{padding:9px 0 9px 10px; text-align:right; font-family:var(--mono); font-size:13.5px; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl td:first-child{font-family:var(--body); font-weight:600; font-size:14.5px}
.tbl .pos{color:var(--sea)} .tbl .neg{color:var(--rose)}
.sub{margin-top:24px!important}
.ledger{margin-top:16px}
.cnt{font:500 13px var(--mono); color:var(--muted); margin-left:6px}
.ledger .row{align-items:center; animation:fade .4s both}
.ledger .row > span{min-width:0}
.ledger .cat{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:8px}
.ledger .r{display:flex; align-items:center; gap:12px}
.del{font:600 12px var(--body); color:var(--muted); background:none; border:1px solid var(--line); border-radius:99px; padding:4px 10px; cursor:pointer}
.edit{font:600 12px var(--body); color:var(--sea); background:none; border:1px solid var(--line); border-radius:99px; padding:4px 10px; cursor:pointer}
.ledger .row.editing{background:color-mix(in srgb,var(--sea) 8%,transparent); border-radius:12px; padding-inline:10px; margin-inline:-10px}
.btns{display:grid; grid-template-columns:1fr; gap:8px}
.btns.two{grid-template-columns:2fr 1fr}
.btn.ghost{background:none; color:var(--fg); border:1px solid var(--line)}
.del.sure{color:var(--surface); background:var(--rose); border-color:var(--rose)}
.empty{padding:28px 0; text-align:center; color:var(--muted); font-size:15px}
@media (max-width:640px){
  .sec-head{margin-bottom:32px}
  .chips button{padding:9px 16px}
  .del,.edit{padding:7px 12px}
  .fld input,.fld select{padding:12px 13px}
}
@media (max-width:480px){
  .ledger .row{flex-wrap:wrap}
  .ledger .r{width:100%; justify-content:space-between; padding-left:17px}
  .tbl table{font-size:13px} .tbl td{font-size:12.5px} .tbl td:first-child{font-size:14px}
}
/* 송금 버튼 · 송금 정보 */
.pay{display:flex; flex-wrap:wrap; gap:6px; padding:0 0 12px}
.pay a,.pay button{font:700 12.5px var(--body); padding:7px 12px; border-radius:99px; border:1px solid var(--line); background:var(--bg); color:var(--fg); text-decoration:none; cursor:pointer}
.pay .kp{background:#fee500; border-color:#fee500; color:#191919}
.pay .tp{background:#0064ff; border-color:#0064ff; color:#fff}
.pay .none{border:0; padding:4px 0; background:none; color:var(--muted); font-weight:500; cursor:default}
.settle .tr{border-bottom:0}
.share{width:100%; margin-top:14px; font-size:15px}
.acct{margin-top:16px}
.acct .f2 + .f2{margin-top:12px}
.acct form{display:grid; gap:14px; margin-top:6px}
.acct .help{margin:0; font-size:13px; color:var(--muted)}
.reg{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.reg span{font:600 12.5px var(--body); padding:5px 11px; border-radius:99px; background:var(--bg); border:1px solid var(--line); color:var(--muted)}
.reg span.ok{color:var(--sea); border-color:color-mix(in srgb,var(--sea) 40%,transparent)}
footer{padding-block:60px 80px; text-align:center; color:var(--muted); font-size:13px; border-top:1px solid var(--line)}
@media (max-width:640px){footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}}

/* motion */
@keyframes up{from{transform:translateY(40%); opacity:0}}
@keyframes fade{from{opacity:0; transform:translateY(16px)}}
@keyframes waves{to{transform:translateY(10px)}}
@keyframes hint{0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom}}
@keyframes pulse{0%{r:14; opacity:.45} 100%{r:34; opacity:0}}
@keyframes rise{from{opacity:.15; transform:translateY(60px) scale(.96)}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 70%}
  }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
  .hero{height:auto} .stage{position:relative}
  .gallery{height:auto!important} .g-stage{position:relative; height:auto; padding-block:80px} .track{overflow-x:auto; transform:none!important}
}