and the h1 ends up tucked under the fixed header, so pad the section instead. Last in the file so it beats .apply's own padding shorthand at every breakpoint. */ main > section:first-child:not(.hero){padding-top:calc(44px + var(--hdr))} @media (min-width:1024px){ main > section:first-child:not(.hero){padding-top:calc(76px + var(--hdr))} } /* ── Wide desktop ───────────────────────────────────────────────── 1240–1320px of content stranded in the middle of a 1900px monitor reads as a tablet layout with two dead margins. Widen the column and scale the hero with it so the headline isn't lost in a 660px box on a screen nearly three times that wide. */ @media (min-width:1600px){ :root{--wrap:1480px; --pad:48px} .hero__h1{font-size:72px} .hero__inner{max-width:780px} .hero__note{max-width:640px} .hero{min-height:700px} } @media (min-width:1800px){ :root{--wrap:1580px} .hero__inner{max-width:840px} } /* Optional visit date + time. Stacked on phones — a native date picker in a ~165px column is cramped on a 390px handset — and two-up only once there is real room for it. */ .field--split{display:grid; grid-template-columns:1fr; gap:12px} .field--split > div{min-width:0} .field--split label{display:block} @media (min-width:480px){ .field--split{grid-template-columns:1fr 1fr} } /* ── Submit button: specular sweep ──────────────────────────────── A highlight that travels across the face of the button, not a glow — the button keeps its solid navy and only the light moves. The sweep sits on ::after at z-index -1 under the label, so the text never dims as it passes. Ported from the 헤리움 build at the same 2.4s. */ .apply .btn--submit{ position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(180deg,#1E5B8F 0%,var(--navy) 55%,#0A2740 100%); box-shadow:0 10px 26px rgba(18,60,99,.34), inset 0 1px 0 rgba(255,255,255,.18); } .apply .btn--submit::after{ content:''; position:absolute; inset:-2px; pointer-events:none; z-index:-1; background:linear-gradient(104deg, transparent 38%, rgba(255,255,255,.10) 46%, rgba(255,255,255,.52) 50%, rgba(255,255,255,.10) 54%, transparent 62%); transform:translateX(-130%); animation:sheen 2.4s cubic-bezier(.5,0,.2,1) infinite; } @keyframes sheen{ 0% {transform:translateX(-130%)} 75% {transform:translateX(130%)} 100% {transform:translateX(130%)} } @media (hover:hover){ .apply .btn--submit:hover{background:linear-gradient(180deg,#2A6FA8 0%,#15476F 55%,#0D3152 100%)} } @media (prefers-reduced-motion:reduce){ .apply .btn--submit::after{animation:none; opacity:0} } /* ── Launch popup ───────────────────────────────────────────────── The 분양 convention: the key visual greets you, and "오늘 하루 보지 않기" suppresses it for the rest of the day. Kept out of the page flow entirely so the hero underneath is untouched. */ .pop{ position:fixed; inset:0; z-index:120; display:grid; /* Top-aligned, not centred: the client wants the eye to land on the model's face first, so the artwork sits just under the header instead of floating in the middle of the viewport. */ place-items:start center; padding:calc(var(--hdr) + 12px) 16px 16px; background:rgba(6,24,42,.72); backdrop-filter:blur(2px); animation:popIn .22s var(--ease) both; } .pop[hidden]{display:none} @keyframes popIn{from{opacity:0} to{opacity:1}} .pop__box{ width:min(560px,92vw); border-radius:var(--r); overflow:hidden; background:var(--navy-d); box-shadow:0 24px 60px rgba(0,0,0,.45); animation:popRise .26s var(--ease) both; } @keyframes popRise{from{transform:translateY(12px) scale(.985)} to{transform:none}} .pop__art{display:block; line-height:0} .pop__art img{width:100%; height:auto; display:block} .pop__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--navy-d); border-top:1px solid rgba(255,255,255,.12); } .pop__hide{ display:flex; align-items:center; gap:7px; cursor:pointer; font-size:12.5px; color:rgba(255,255,255,.72); } .pop__hide input{width:15px; height:15px; accent-color:var(--gold); cursor:pointer} .pop__close{ border:0; background:transparent; cursor:pointer; padding:6px 4px; font:inherit; font-size:13px; font-weight:700; color:var(--gold-l); } /* The image is tall; on short screens let the box scroll rather than pushing 닫기 off the bottom where it can't be reached. */ @media (max-height:700px){ /* Top-aligned means the offset eats into the room the box has, so cap against the remaining height rather than the whole viewport. */ .pop__box{max-height:calc(100svh - var(--hdr) - 28px); overflow:auto} } @media (prefers-reduced-motion:reduce){ .pop,.pop__box{animation:none} }