/* hometown hub. Motion follows the giting.kr motion-menu rules:
   enter = ease-out, move = ease-in-out, leave = ease-in, linear only for constant loops (marquee).
   Font sizes are even and >= 12px; one-line text uses line-height normal, multi-line 1.5. */
:root{
  --bg:#0b1020;--card:#141c35;--line:rgba(255,255,255,.08);--text:#f2f4f8;--muted:#9aa3b5;--accent:#ffc857;--mint:#5eead4;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-in:cubic-bezier(.7,0,.84,0);
  --sky1:#070b1a;--sky2:#141c40;--sky3:#2d2656;--star:1;--far:#1c2550;--mid:#121936;--win:#ffd88a;--moon:#fff3cf;--glow:rgba(255,236,170,.32)
}
/* The server picks data-sky from the KST hour. */
body[data-sky=dawn]{--sky1:#1d2b5a;--sky2:#6a6fa8;--sky3:#f6b694;--star:.35;--far:#424a7e;--mid:#2b3060}
body[data-sky=day]{--sky1:#1f5fae;--sky2:#3f86d4;--sky3:#a8d6f7;--star:0;--far:#7aa6dc;--mid:#4677b8;--win:#fff2c4;--glow:rgba(255,214,102,.55)}
body[data-sky=dusk]{--sky1:#1b1440;--sky2:#6b2f63;--sky3:#f08a5d;--star:.6;--far:#46275f;--mid:#2b1946}

*,*::before,*::after{box-sizing:border-box;letter-spacing:-.03em}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.skip{position:absolute;left:16px;top:-80px;z-index:10;padding:12px 16px;border-radius:8px;background:var(--accent);color:#1a1300;font-weight:700;line-height:normal;text-decoration:none}
.skip:focus{top:16px}

/* Header */
.top{position:absolute;top:0;left:0;right:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:800;line-height:normal;text-decoration:none}
.logo svg{width:28px;height:28px}
.logo-house{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.logo-door{fill:var(--accent)}
.top nav{display:flex;gap:24px}
.top nav a{position:relative;padding:8px 0;font-size:16px;font-weight:600;line-height:normal;text-decoration:none}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}
.top nav a:hover::after,.top nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* Hero: sky layer + bottom-anchored town, both decorative */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:640px;min-height:max(640px,92svh);padding:112px 0 clamp(200px,24vw,320px);background:linear-gradient(var(--sky1),var(--sky2) 60%,var(--sky3))}
.sky{position:absolute;inset:0;pointer-events:none}
.stars{position:absolute;inset:0;width:100%;height:100%;opacity:var(--star)}
.stars circle{fill:#fff;animation:twinkle 3s var(--ease-io) infinite alternate}
.stars circle:nth-child(3n){animation-duration:4.2s;animation-delay:-1.4s}
.stars circle:nth-child(3n+1){animation-duration:2.4s;animation-delay:-.7s}
.stars circle:nth-child(4n){animation-delay:-2.1s}
.shoot{position:absolute;top:10%;left:8%;width:140px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff);opacity:0;animation:shoot 9s var(--ease-in) 2.5s infinite}
body[data-sky=day] .shoot{display:none}
.moon-wrap{position:absolute;top:18%;right:12%}
.moon{width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 64% 36%,rgba(0,0,0,.07) 0 9%,transparent 10%),radial-gradient(circle at 40% 66%,rgba(0,0,0,.06) 0 7%,transparent 8%),radial-gradient(circle at 34% 34%,#fffdf2,var(--moon) 55%,#e6d9a8);box-shadow:0 0 64px 12px var(--glow);animation:float 6s var(--ease-io) infinite alternate}
body[data-sky=day] .moon,body[data-sky=dawn] .moon{background:radial-gradient(circle at 40% 40%,#fff8dc,#ffd166 60%,#ffad4a)}
.town{position:absolute;left:0;bottom:-1px;display:block;width:100%;height:clamp(240px,30vw,380px)}
.far path{fill:var(--far)}
.mid .b{fill:var(--mid)}
.near .b,.lamp rect{fill:var(--bg)}
.draw{fill:none;stroke:var(--accent);stroke-width:2;stroke-opacity:.6;stroke-dasharray:1;animation:draw 1.6s var(--ease-io) .3s backwards}
.win rect{fill:var(--win);animation:lit 4s var(--ease-io) infinite alternate}
.win rect:nth-child(2n){animation-duration:5.6s;animation-delay:-2s}
.win rect:nth-child(3n){animation-duration:3.2s;animation-delay:-1s}
.win rect:nth-child(5n),body[data-sky=day] .win rect{animation:none;opacity:.3}
.bulb{fill:var(--accent)}
.halo{transform-box:fill-box;transform-origin:center;animation:halo 3s var(--ease-io) infinite alternate}

.hero-in{position:relative;z-index:2;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.badge{display:inline-flex;align-items:center;gap:8px;height:36px;margin:0 0 20px;padding:0 16px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(6px);font-size:14px;font-weight:600;line-height:normal;animation:pop .3s var(--ease-out) .9s backwards}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(94,234,212,.6);animation:ping 2s var(--ease-out) infinite}
.hero h1{margin:0;font-size:36px;font-weight:800;line-height:1.5}
.ln{display:block;overflow:hidden}
.ln>span{display:block;animation:mask .9s var(--ease-out) .2s backwards}
.ln+.ln>span{animation-delay:.35s}
.hero em{font-style:normal;color:var(--accent)}
.lead{margin:16px 0 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.86);animation:rise .8s var(--ease-out) .55s backwards}
.cta{display:inline-flex;align-items:center;gap:8px;height:52px;margin-top:32px;padding:0 24px;border-radius:999px;background:var(--accent);color:#1a1300;font-size:16px;font-weight:700;line-height:normal;text-decoration:none;text-shadow:none;box-shadow:0 10px 30px -10px rgba(255,200,87,.7);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);animation:rise .8s var(--ease-out) .7s backwards}
.cta:hover{transform:translateY(-3px);box-shadow:0 16px 36px -12px rgba(255,200,87,.85)}
.cta span{display:inline-block;animation:nudge 1.6s var(--ease-io) 1.6s infinite}

/* Marquee */
.marquee{overflow:hidden;padding:24px 0;border-bottom:1px solid var(--line)}
.track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.grp{display:flex;flex:none;align-items:center;gap:32px;padding-right:32px}
.grp span{font-size:28px;font-weight:800;line-height:normal;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35)}
.grp span:nth-of-type(4n+1){color:var(--text);-webkit-text-stroke:0}
.grp i{font-size:20px;font-style:normal;line-height:normal;color:var(--accent)}

/* Places */
.places{padding:96px 0 120px;background:radial-gradient(640px 320px at 8% 0%,rgba(255,200,87,.07),transparent 70%),radial-gradient(560px 360px at 92% 40%,rgba(77,163,255,.07),transparent 70%)}
.sec-head{max-width:640px;margin-bottom:40px}
.eyebrow{margin:0 0 12px;font-size:14px;font-weight:700;line-height:normal;color:var(--accent)}
.sec-head h2,.foot h2{margin:0;font-size:28px;font-weight:800;line-height:normal}
.sec-head p:last-child,.foot .sub{margin:12px 0 0;color:var(--muted);line-height:1.5}
.grid{display:grid;gap:16px}
.card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--card);text-decoration:none;transition:transform .4s var(--ease-out),border-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.card:hover,.card:focus-visible{transform:translateY(-6px);border-color:rgba(255,200,87,.5);box-shadow:0 24px 48px -24px rgba(0,0,0,.7)}
.thumb{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:#0e1428}
.thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.card:hover .thumb img{transform:scale(1.05)}
/* Light Sweep */
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.card:hover .thumb::after{transform:translateX(120%);transition:transform .6s var(--ease-io)}
.info{display:flex;flex:1;flex-direction:column;gap:8px;padding:20px 24px 24px}
.info strong{font-size:20px;font-weight:700;line-height:normal}
.desc{color:var(--muted);line-height:1.5}
.go{margin-top:auto;padding-top:8px;font-size:14px;font-weight:700;line-height:normal;color:var(--accent)}
.go i{display:inline-block;font-style:normal;transition:transform .4s var(--ease-out)}
.card:hover .go i{transform:translateX(6px)}
.empty{color:var(--muted)}

/* Footer */
.foot{padding:88px 0 32px;border-top:1px solid var(--line);background:radial-gradient(720px 280px at 50% 0%,rgba(255,200,87,.08),transparent 70%)}
.links{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0;padding:0;list-style:none}
.links a{display:inline-flex;align-items:center;height:44px;padding:0 20px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);font-size:16px;font-weight:600;line-height:normal;text-decoration:none;transition:transform .4s var(--ease-out),border-color .4s var(--ease-out),color .4s var(--ease-out)}
.links a:hover{transform:translateY(-3px);border-color:rgba(255,200,87,.55);color:var(--accent)}
.copy{margin:64px 0 0;font-size:12px;line-height:normal;color:var(--muted)}

/* Scroll reveal (app.js adds .js and .in) with 0.08s stagger */
.js .rv:not(.in){opacity:0}
.rv.in{animation:rise .8s var(--ease-out) backwards}
.grid .rv:nth-child(3n+2){animation-delay:.08s}
.grid .rv:nth-child(3n+3){animation-delay:.16s}

@keyframes twinkle{to{opacity:.25}}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(18deg)}3%{opacity:1}14%,100%{opacity:0;transform:translate(60vw,20vw) rotate(18deg)}}
@keyframes float{to{transform:translateY(-12px)}}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes lit{0%,55%{opacity:1}100%{opacity:.15}}
@keyframes halo{to{opacity:.55;transform:scale(.82)}}
@keyframes mask{from{transform:translateY(105%)}}
@keyframes rise{from{opacity:0;transform:translateY(12%)}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes ping{to{box-shadow:0 0 0 10px rgba(94,234,212,0)}}
@keyframes nudge{50%{transform:translateY(4px)}}
@keyframes marquee{to{transform:translateX(-50%)}}

@media (min-width:768px){
  .hero h1{font-size:48px}
  .lead{font-size:18px}
  .sec-head h2,.foot h2{font-size:32px}
  .info strong{font-size:22px}
  .grp span{font-size:32px}
  .grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .card:last-child:nth-child(odd){grid-column:span 2;flex-direction:row}
  .card:last-child:nth-child(odd) .thumb{flex:0 0 50%}
}
@media (min-width:1024px){
  .hero h1{font-size:64px}
  .lead{font-size:20px}
  .sec-head h2,.foot h2{font-size:40px}
  .info strong{font-size:24px}
  .grp span{font-size:40px}
  .moon{width:104px;height:104px}
  /* 3 per row; a short last row stretches to fill it */
  .grid{grid-template-columns:repeat(6,1fr)}
  .card,.card:last-child:nth-child(odd){grid-column:span 2;flex-direction:column}
  .card:last-child:nth-child(odd) .thumb{flex:none}
  .card:last-child:nth-child(3n+1){grid-column:span 6;flex-direction:row}
  .card:last-child:nth-child(3n+1) .thumb{flex:0 0 50%}
  .card:nth-last-child(2):nth-child(3n+1),.card:last-child:nth-child(3n+2){grid-column:span 3}
}
@media (max-width:767px){
  .wrap{width:calc(100% - 32px)}
  .top nav{gap:16px}
  .top nav a{font-size:14px}
  .logo{font-size:18px}
  .moon{width:56px;height:56px}
  .moon-wrap{top:14%;right:8%}
  .places{padding:72px 0 88px}
  .info{padding:16px 20px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .js .rv:not(.in){opacity:1}
}