/* 청약집 웹 본편 — 값은 Figma "웹사이트 · 초안" v2(데스크톱 1440 · 모바일 402) 그대로.
   1080px부터 데스크톱 배치(본문 폭 1024 고정, 좌우 여백이 줄어듦), 그 아래는 모바일 배치(좌우 24).
   글자: 청약집 Site/* · Site M/* (Pretendard). 인라인 스타일은 쓰지 않는다(CSP style-src 'self'). */
@font-face{font-family:"Pretendard";src:url("PretendardKS.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--text:#1a1a1a;--body:#4d4d4d;--muted:#727272;--dim:#8e8e8e;--line:rgba(60,60,67,.3);--blue:#0088ff;--page:#f0f3f5;--ease:cubic-bezier(.2,.8,.2,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font:400 17px/27px "Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;letter-spacing:-.005em;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block}
svg{fill:currentColor}
button{font:inherit;color:inherit;letter-spacing:inherit;border:0;background:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
section{scroll-margin-top:51px}
br.m{display:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:8px 14px;border-radius:10px;background:var(--text);color:#fff;font-size:12px;line-height:18px}
.skip:focus{top:8px}
.c-pink{--c:#e1799c}.c-blue{--c:#0088ff}.c-sky{--c:#3dadff}.c-amber{--c:#c4861d}.c-gray{--c:#8e8e8e}

/* 글자 */
h1,h2{font-size:72px;line-height:80px;letter-spacing:-.035em;font-weight:700}
.lead{font-size:24px;line-height:36px;letter-spacing:-.01em;font-weight:500;color:var(--muted)}
.link{color:var(--blue)}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:980px;background:var(--blue);color:#fff;white-space:nowrap;transition:background-color .2s}
.btn:hover{background:#0079e6}
.btn-s{padding:4px 12px;font-size:12px;line-height:18px;letter-spacing:0}
.round{width:44px;height:44px;border-radius:22px;background:#f0f0f0;color:var(--text);display:grid;place-items:center;transition:transform .15s ease-out,background-color .15s,opacity .2s}
.round:hover{background:#e8e8e8}.round:active{transform:scale(.94)}
.round:disabled{opacity:.35;cursor:default}

/* 내비게이션 */
.hd{position:sticky;top:0;z-index:50;height:51px;padding:12px max(28px,calc(50% - 512px));display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.logo{font-weight:700}
.hd-nav{display:flex;gap:36px;font-size:12px;line-height:18px;letter-spacing:0;color:#333}
.hd-nav a:hover{color:#000}
.hd-right{display:flex;align-items:center;gap:20px}
.hd-menu{display:none;width:24px;height:24px}
.menu{position:fixed;inset:51px 0 0;z-index:49;padding:28px 24px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:20px;font-size:26px;line-height:32px;letter-spacing:-.015em;font-weight:700}
.menu[hidden]{display:none}

/* 히어로 */
.hero{padding-top:88px;overflow:hidden}
.hero-copy{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding:0 24px}
.hero h1 span{display:block}
.hero h1 .q{color:var(--blue)}
.hero h1 .def{font-size:52px;line-height:72px;letter-spacing:-.025em}
.hero-fact{display:flex;flex-direction:column;gap:8px;padding-top:28px}
.hero-fact .fact{font-size:40px;line-height:48px;letter-spacing:-.02em;font-weight:700}
.hero-fact .fact b{font-weight:inherit;color:var(--blue)}
.hero-fact .foot{color:var(--muted)}
.actions{display:flex;align-items:center;gap:32px;padding-top:28px}
.note{color:var(--muted)}
.hero-visual{height:640px;position:relative;overflow:hidden}
.hero-stage{position:absolute;left:50%;top:0;width:1440px;height:640px;margin-left:-720px}
.art{position:relative;flex:none}
.art picture,.art img{position:absolute;display:block}
.art img{inset:0;width:100%;height:100%}
.art-hero{position:absolute;left:170px;top:40px;width:1180px;height:585px;opacity:.9}
.art-hero .art-house{left:305px;top:-40px;width:965px;height:640px}
.art-hero .art-star{left:-65.26px;top:-40px;width:483.8px;height:464.48px}
.hero .phone{position:absolute;left:537.48px;top:96px;width:365.03px;height:auto;transform-origin:50% 0;filter:drop-shadow(0 19.9px 49.8px rgba(13,38,77,.14));will-change:transform}

/* 스크롤 문장 */
.intro{padding:200px max(28px,calc(50% - 512px));display:flex;flex-direction:column;gap:48px}
.intro-icons{display:flex;align-items:center;gap:36px;height:64px}
.intro-icons .ic{width:64px;height:64px;color:var(--c)}
.intro-icons .ic-star{width:63.11px;display:grid;place-items:center}
.intro-icons .ic-star svg{width:50.47px;height:53.53px}
.statement{font-size:52px;line-height:72px;letter-spacing:-.025em;font-weight:700}
.js .statement .w{color:#d9d9d9;transition:color .35s ease-out}
.js .statement .w.on{color:var(--text)}
.js .intro-icons .ic{color:#d9d9d9;transform:scale(.9);transition:color .35s ease-out,transform .45s var(--ease)}
.js .intro-icons .ic.on{color:var(--c);transform:none}

/* 판정 세 가지 */
.result{background:#000;color:#fff}
.result-pin{padding:180px max(28px,calc(50% - 512px)) 200px;display:flex;flex-direction:column;gap:64px}
.result h2{font-size:24px;line-height:36px;letter-spacing:-.01em;font-weight:500;color:var(--dim)}
.result li{display:flex;align-items:center;gap:28px;padding:36px 0;border-top:1px solid rgba(255,255,255,.16);transition:opacity .5s ease-out}
.result .ic{width:76px;height:76px;flex:none;color:var(--c)}
.result h3{font-size:72px;line-height:80px;letter-spacing:-.035em;font-weight:700;color:var(--c);white-space:nowrap}
.result li p{width:340px;flex:none;margin-left:auto;color:rgba(255,255,255,.7)}
.js .result li{opacity:.28}
.js .result li.on{opacity:1}
.js .result li.on .ic{animation:pop .45s var(--ease) both}
.js .result li.on h3,.js .result li.on p{animation:rise .55s var(--ease) .1s both}
@keyframes pop{from{transform:scale(.72);opacity:.3}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}

/* 라이프 스타일 */
.lifestyle{padding:180px max(28px,calc(50% - 512px));overflow:hidden}
.lifestyle .lead{margin-top:28px}
.ls-track{margin-top:108px}
.ls-stage{display:flex;align-items:center;gap:64px}
.lifestyle figure{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px}
.ls-canvas{position:relative;width:480px;height:480px}
.ls-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ls-rings circle{fill:none;stroke:rgba(217,217,217,.7);stroke-width:1.5;stroke-dasharray:2 10;stroke-linecap:round}
.ls-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-origin:0 0;will-change:transform}
.ls-b{position:absolute;left:0;top:0;will-change:transform}
.ls-f{display:flex;align-items:center;white-space:nowrap;border-radius:999px;user-select:none;-webkit-user-select:none}
.ls-main .ls-f{height:48px;padding:0 20px 0 18px;gap:6px;font-size:17px;line-height:26px;font-weight:700;letter-spacing:-.43px;cursor:grab;touch-action:none;transition:transform .18s ease-out,box-shadow .18s ease-out}
.ls-main .ls-f svg{width:20px;height:20px;flex:none}
.ls-main.held{z-index:2}
.ls-main.held .ls-f{cursor:grabbing;transform:scale(1.06);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.ls-sub .ls-f{padding:3.2px 8.5px;font-size:14px;line-height:17px;letter-spacing:-.03em;color:#8e8e8e;background:#f0f0f0}
.ls-out{opacity:0;transition:opacity .22s ease-out}
.t-sky .ls-f{color:#3dadff;background:#e6f4ff}.t-green .ls-f{color:#46c459;background:#cdf4d3}
.t-violet .ls-f{color:rgba(140,99,244,.7);background:rgba(222,210,255,.5)}
.t-pink .ls-f{color:#e1799c;background:#ffe6ec}.t-coral .ls-f{color:#ef957e;background:rgba(239,149,126,.2)}
#ls-add .reset{display:none}#ls-add.done .plus{display:none}#ls-add.done .reset{display:block}
.lifestyle figcaption{font-size:12px;line-height:18px;letter-spacing:0;color:var(--dim)}
.ls-say{flex:1;min-width:0;--li-h:72px;--li-gap:20px}
.ls-say ul{position:relative;height:calc(var(--li-h)*3 + var(--li-gap)*2)}
.ls-say li{position:absolute;left:0;top:0;font-size:24px;line-height:36px;letter-spacing:-.01em;font-weight:500;transition:transform .55s var(--ease),opacity .35s ease-out}
.ls-say li b{font-weight:inherit}
.ls-say .s0{transform:none}.ls-say .s1{transform:translateY(calc(var(--li-h) + var(--li-gap)))}
.ls-say .s2{transform:translateY(calc((var(--li-h) + var(--li-gap))*2))}.ls-say .s3{transform:translateY(calc((var(--li-h) + var(--li-gap))*3));opacity:0}
.ls-say .s-1{transform:translateY(calc((var(--li-h) + var(--li-gap))*-1));opacity:0}
.k-sky{color:#3dadff}.k-green{color:#46c459}.k-violet{color:#8c63f4}.k-pink{color:#e1799c}.k-coral{color:#ef957e}
.ls-note{margin-top:32px;color:var(--muted)}

/* 기능 */
.features{background:var(--page);padding:180px max(28px,calc(50% - 512px));display:flex;flex-direction:column;gap:96px}
.feat-sticky{display:flex;justify-content:space-between;align-items:center;height:874px}
.feat-tabs{display:none}
.feat-list{width:400px;display:flex;flex-direction:column;gap:28px}
.feat-list h3{display:flex;align-items:center;gap:16px;font-size:40px;line-height:48px;letter-spacing:-.02em;font-weight:700;color:#bfbfbf;transition:color .4s ease-out;width:max-content}
.feat-list .ic{width:44px;height:44px;flex:none}
.feat-list .ic-star{width:41.26px;height:48px;display:grid;place-items:center;flex:none}
.feat-list .ic-star svg{width:33px;height:35px}
.feat-list li.on h3{color:var(--text)}
.feat-list li.on h3 .ic,.feat-list li.on h3 .ic-star{color:var(--blue)}
.feat-list h3 .ic,.feat-list h3 .ic-star{transition:color .4s ease-out}
.feat-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.feat-body>div{overflow:hidden}
.feat-body p{padding-top:14px;color:var(--body);opacity:0;transition:opacity .35s ease-out}
.feat-list li.on .feat-body{grid-template-rows:1fr}
.feat-list li.on .feat-body p{opacity:1;transition-delay:.12s}
.feat-phone{position:relative;width:424.46px;height:874px;flex:none;filter:drop-shadow(0 23.2px 57.9px rgba(13,38,77,.14))}
.feat-phone img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s ease-out}
.feat-phone img.on{opacity:1}

/* 공급 유형 */
.types{padding:180px 0 160px max(28px,calc(50% - 512px));display:flex;flex-direction:column;gap:64px;overflow:hidden}
.gallery{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding-right:max(28px,calc(50vw - 512px));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gallery::-webkit-scrollbar{display:none}
.card{flex:none;width:372px;height:480px;padding:48px 32px 36px;border-radius:28px;background:var(--page);display:flex;flex-direction:column;scroll-snap-align:start}
.card img{width:210px;height:210px;margin:0 auto;transition:transform .7s var(--ease)}
.card:hover img{transform:translateY(-8px) rotate(-4deg)}
.card dt{margin-top:auto;font-weight:700}
.card dd{margin-top:6px;color:var(--muted)}
.gallery-ctl{display:flex;justify-content:flex-end;gap:12px;padding-right:max(28px,calc(50vw - 512px))}

/* 개인정보 */
.privacy{background:var(--page);padding:180px max(28px,calc(50% - 512px));display:flex;flex-direction:column;align-items:center;text-align:center}
.art-priv{width:283.2px;height:140.4px}
.art-priv .art-house{left:73.2px;top:-24px;width:234px;height:188.4px}
.art-priv .art-star{left:-15.66px;top:-16.98px;width:116.11px;height:118.85px}
.privacy h2,.privacy .lead{margin-top:28px}
.privacy ul{align-self:stretch;margin-top:108px;display:flex;gap:40px;text-align:left}
.privacy li{flex:1;position:relative;padding-top:25px}
.privacy li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left}
.privacy li h3{font-size:17px;line-height:27px;font-weight:700}
.privacy li p{margin-top:8px;color:var(--muted)}
.privacy .link{margin-top:60px}
.js .privacy li::before{transform:scaleX(0);transition:transform .9s var(--ease)}
.js .privacy ul.in li::before{transform:none}
.js .privacy ul.in li:nth-child(2)::before{transition-delay:.12s}.js .privacy ul.in li:nth-child(3)::before{transition-delay:.24s}

/* 질문 */
.faq{padding:160px max(28px,calc(50% - 512px));display:flex;gap:64px}
.faq h2{width:320px;flex:none;font-size:40px;line-height:48px;letter-spacing:-.02em}
.faq-list{flex:1;min-width:0;border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line);padding:28px 0}
.faq summary{display:flex;align-items:center;gap:24px;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1}
.faq summary i{width:24px;height:24px;flex:none}
.faq summary svg{width:100%;height:100%}
.faq .minus,.faq details[open] .plus{display:none}
.faq details[open] .minus{display:block}
.faq details p{margin-top:14px;color:var(--muted)}

/* 시작 */
.start{background:#000;color:#fff;padding:160px 24px 180px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;overflow:hidden}
.art-start{width:519.2px;height:257.4px}
.art-start .art-house{left:134.2px;top:-44px;width:429px;height:345.4px}
.art-start .art-star{left:-28.71px;top:-31.13px;width:212.87px;height:217.9px}
.art canvas.grains{position:absolute;pointer-events:none}
.js .art.wait picture{opacity:0}
.start .sub,.start .note{color:var(--dim)}
.start .actions{padding-top:12px}
.start .more{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px}

/* 푸터 */
.ft{background:#f5f5f5;padding:24px max(28px,calc(50% - 512px)) 40px;display:flex;flex-direction:column;gap:16px;font-size:12px;line-height:18px;letter-spacing:0;color:var(--muted)}
.ft hr{width:100%;height:1px;margin:0;border:0;background:var(--line)}
.ft-bottom{display:flex;justify-content:space-between}
.ft nav{display:flex;gap:20px;color:#595959}
.ft nav a:hover{color:var(--text)}

/* ---- 베타 페이지(Web/site/beta.html) — Figma "청약집 베타" 시안 ---- */
/* 큐레이션: 앱 카드 값 그대로(흰 카드 r20 · 안쪽 20 · 간격 16, 결론 17/26 Bold 보라, 본문 16/32 Medium). 움직임은 home.js */
.curation{--cur:#7753ee;--cur-soft:#efeaff;background:var(--page);padding:180px max(28px,calc(50% - 512px));display:flex;align-items:center;justify-content:space-between;gap:64px}
.cur-copy{flex:1;min-width:0}
.curation .lead{margin-top:28px}
.cur-fig{flex:none;width:402px;display:flex;flex-direction:column;align-items:center;gap:12px}
.cur-stage{width:100%;display:flex;flex-direction:column;gap:14px}
.cur-card{position:relative;background:#fff;border-radius:20px;padding:20px;display:grid;gap:16px;align-content:start;overflow:hidden;text-align:left;user-select:none;-webkit-user-select:none}
.js .cur-card{cursor:pointer}
.cur-card.grow{transition:height .25s var(--ease)}
.cur-pill{justify-self:start;font-size:13px;line-height:20px;font-weight:700;letter-spacing:-.01em;color:var(--cur);background:var(--cur-soft);border-radius:999px;padding:3px 10px}
.cur-head{font-size:17px;line-height:26px;font-weight:700;color:var(--cur);letter-spacing:-.02em}
.cur-para{font-size:16px;line-height:32px;font-weight:500;color:var(--body);letter-spacing:-.01em}
.cur-para b{font-weight:700}
.cur-w{display:inline-block;white-space:nowrap}
.js .cur-ch{opacity:0;transition:opacity .1s ease-out}
.js .cur-ch.on{opacity:1}
.cur-chip{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 6px;border-radius:11px;border:1px solid #d9d9d9;background:#fff;color:var(--body);font-size:15px;font-weight:700;line-height:1;vertical-align:middle}
.cur-chip svg{width:13px;height:13px;opacity:.75}
.js .cur-chip{opacity:0;transform:scale(.8);transition:opacity .15s ease-out,transform .15s cubic-bezier(.3,1.3,.5,1)}
.js .cur-chip.on{opacity:1;transform:none}
.cur-mark{display:inline-block;width:12.9px;height:12.4px;position:relative;top:-3.8px;color:var(--cur)}
.js .cur-mark{opacity:0}.js .cur-mark.on{opacity:1}
.cur-pen{position:absolute;left:0;top:0;width:14px;height:14px;color:var(--cur);opacity:0;pointer-events:none;will-change:transform}
.cur-card.fast .cur-ch,.cur-card.fast .cur-chip{transition-duration:.15s}
.cur-ghost{height:64px;border-radius:20px;background:#fff;padding:20px;display:grid;gap:8px;align-content:center}
.cur-ghost i{display:block;height:10px;border-radius:5px;background:#f0f0f0}
.cur-ghost i:first-child{width:36%}.cur-ghost i:last-child{width:70%}
.curation .round{background:#fff}
.curation figcaption{font-size:12px;line-height:18px;letter-spacing:0;color:var(--dim)}
html:not(.js) #cur-replay{display:none}
.faq-head{width:320px;flex:none;display:flex;flex-direction:column;gap:28px}

/* 판정 · 기능: 데스크톱에서 화면에 붙들어 두기 */
@media (min-width:1080px){
  .js .result{height:calc(100vh + 150vh)}
  .js .result-pin{position:sticky;top:calc(50vh - 487px)}
  .js .feat-track{height:calc(874px + 260vh)}
  .js .feat-sticky{position:sticky;top:max(63px,calc(50vh - 437px + 25px))}
  .feat-list h3{cursor:pointer}
}

/* ---- 모바일 배치(402 기준) ---- */
@media (max-width:1079px){
  br.d{display:none}br.m{display:inline}
  h1{font-size:44px;line-height:50px;letter-spacing:-.035em}
  h2{font-size:34px;line-height:40px;letter-spacing:-.03em}
  .lead{font-size:19px;line-height:28px}
  body{line-height:26px}
  .btn,.link,.note,.start .sub{line-height:27px}
  .btn-s{line-height:18px}
  .hd{padding:12px 24px}
  .hd-nav{display:none}.hd-menu{display:block}
  .hero{padding-top:56px}
  .hero-copy{gap:16px}
  .hero h1 .def{font-size:26px;line-height:32px;letter-spacing:-.015em;margin-top:8px}
  .hero-fact{padding-top:20px}
  .hero-fact .fact{font-size:26px;line-height:32px;letter-spacing:-.015em}
  .actions{flex-direction:column;gap:18px;padding-top:20px}
  .hero-visual{height:560px;margin-top:16px}
  .hero-stage{width:402px;height:560px;margin-left:-201px}
  .art-hero{left:-66.2px;width:566.4px;height:280.8px}
  .art-hero .art-house{left:146.4px;width:321.8px;height:368.8px}
  .art-hero .art-star{left:66.2px;top:-33.96px;width:134.7px;height:237.7px}
  .hero .phone{left:55.8px;top:64px;width:290.4px;filter:drop-shadow(0 15.8px 39.6px rgba(13,38,77,.14))}
  .intro{padding:120px 24px;gap:32px}
  .intro-icons{gap:22.32px;height:39.68px}
  .intro-icons .ic{width:39.68px;height:39.68px}
  .intro-icons .ic-star{width:39.13px}
  .intro-icons .ic-star svg{width:31.29px;height:33.19px}
  .statement{font-size:30px;line-height:40px}
  .result-pin{padding:100px 24px 120px;gap:40px}
  .result h2{font-size:19px;line-height:28px}
  .result li{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:12px;padding:28px 0}
  .result .ic{width:40px;height:40px}
  .result h3{font-size:34px;line-height:40px;letter-spacing:-.03em}
  .result li p{grid-column:1/-1;width:auto;margin:0}
  .lifestyle{padding:100px 24px}
  .lifestyle .lead{margin-top:20px}
  .ls-track{margin-top:60px}
  .ls-stage{flex-direction:column;align-items:stretch;gap:40px}
  .lifestyle figure{align-self:center}
  .ls-canvas{width:min(354px,calc(100vw - 48px));height:min(354px,calc(100vw - 48px))}
  .ls-say{--li-h:56px;--li-gap:16px}
  .ls-say li{font-size:19px;line-height:28px}
  .ls-note{margin-top:24px}
  .features{padding:100px 0 100px 24px;gap:32px}
  .feat-sticky{flex-direction:column;align-items:stretch;height:auto;gap:32px}
  .feat-tabs{display:flex;gap:8px;overflow-x:auto;padding-right:24px;scrollbar-width:none}
  .feat-tabs::-webkit-scrollbar{display:none}
  .feat-tabs button{flex:none;display:flex;align-items:center;gap:8px;padding:10px 18px 10px 16px;border-radius:980px;background:#fff;color:var(--text);white-space:nowrap;transition:background-color .25s,color .25s}
  .feat-tabs button[aria-selected=true]{background:var(--text);color:#fff}
  .feat-tabs .ic{width:20px;height:20px}
  .feat-tabs .ic-star{width:24.27px;height:26px;display:grid;place-items:center}
  .feat-tabs .ic-star svg{width:19.41px;height:20.59px}
  .feat-phone{order:2;align-self:center;width:290.4px;height:597.96px;margin:8px 24px 0 0;filter:drop-shadow(0 15.8px 39.6px rgba(13,38,77,.14));touch-action:pan-y}
  .feat-list{order:3;width:auto;padding-right:24px;display:grid}
  .feat-list li{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .35s ease-out,visibility 0s .35s}
  .feat-list li.on{opacity:1;visibility:visible;transition-delay:0s}
  .feat-list h3{display:none}
  .feat-body{display:block}
  .feat-body p{padding:0;opacity:1}
  .types{padding:100px 0 100px 24px;gap:32px}
  .gallery{gap:12px;padding-right:24px;scroll-snap-type:x mandatory}
  .card{width:300px;height:400px;padding:36px 24px 28px;border-radius:24px}
  .card img{width:170px;height:170px}
  .gallery-ctl{display:none}
  .privacy{padding:100px 24px}
  .art-priv{width:212.4px;height:105.3px}
  .art-priv .art-house{left:54.9px;top:-18px;width:175.5px;height:141.3px}
  .art-priv .art-star{left:-11.75px;top:-12.73px;width:87.08px;height:89.14px}
  .privacy h2,.privacy .lead{margin-top:20px}
  .privacy ul{flex-direction:column;gap:20px;margin-top:20px;padding-top:28px}
  .privacy li{padding-top:21px}
  .privacy li h3{line-height:26px}
  .privacy li p{margin-top:6px}
  .privacy .link{margin-top:36px}
  .faq{padding:100px 24px;flex-direction:column;gap:28px}
  .faq h2{width:auto;font-size:26px;line-height:32px;letter-spacing:-.015em}
  .faq details{padding:22px 0}
  .faq summary{gap:16px}
  .faq summary i{width:22px;height:22px}
  .faq details p{margin-top:10px}
  .start{padding:100px 24px 120px;gap:20px}
  .art-start{width:283.2px;height:140.4px}
  .art-start .art-house{left:73.2px;top:-24px;width:234px;height:188.4px}
  .art-start .art-star{left:-15.66px;top:-16.98px;width:116.11px;height:118.85px}
  .curation{padding:100px 24px;flex-direction:column;align-items:stretch;gap:40px}
  .curation .lead{margin-top:20px}
  .cur-fig{width:100%;max-width:402px;align-self:center}
  .faq-head{display:contents}
  .ft{padding:24px 24px 40px}
  .ft-bottom{flex-direction:column-reverse;gap:16px}
  .ft nav{gap:16px}
}
/* 다리 페이지(/open): 앱의 공유 링크가 닿는 한 화면. 값은 모바일 402 기준 — 넓은 화면에서도 가운데 한 줄 */
.open{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.open main{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 24px 72px}
.open .hd{padding-left:24px;padding-right:24px}
.open .app-icon{width:88px;height:88px;border-radius:20px;box-shadow:0 10px 28px rgba(13,38,77,.14)}
.open h1{margin-top:28px;font-size:34px;line-height:40px;letter-spacing:-.03em;font-weight:700}
.open h1.q{color:var(--blue)}
.open .sub{margin-top:8px;font-size:26px;line-height:32px;letter-spacing:-.015em;font-weight:700}
.open .lead{margin-top:12px;font-size:19px;line-height:28px;letter-spacing:-.01em;font-weight:500;color:var(--muted)}
.open .go{margin-top:32px}
.open .noapp{margin-top:56px;display:flex;flex-direction:column;align-items:center;gap:8px}
.open .noapp strong{font-weight:700}
.open .noapp small{font-size:12px;line-height:18px;letter-spacing:0;color:var(--muted);margin-top:2px}
.open .home{margin-top:32px}
.open .noapp+.home{margin-top:40px}
.open [hidden]{display:none}
.open .ft{padding-left:24px;padding-right:24px}
/* 라이프 스타일 장면(사용자 지시 2026-10-08): 무대가 화면에 붙고, 스크롤할수록 범주가 하나씩 생긴다(+ 버튼 없음).
   overflow:clip을 모르는 옛 브라우저와 움직임 줄이기를 켠 사람은 위의 + 버튼 방식 그대로 */
@supports (overflow:clip){
  @media (prefers-reduced-motion:no-preference){
    .js .lifestyle{overflow:clip}
    .js .ls-track{height:calc(510px + 220vh)}
    .js .ls-stage{position:sticky;top:max(63px,calc(50vh - 255px))}
    .js #ls-add{display:none}
  }
  @media (max-width:1079px) and (prefers-reduced-motion:no-preference){
    .js .ls-track{height:calc(720px + 220vh)}
    .js .ls-stage{top:63px}
    .js .ls-canvas{width:min(354px,calc(100vw - 48px),calc(100svh - 440px));height:min(354px,calc(100vw - 48px),calc(100svh - 440px));min-width:220px;min-height:220px}
  }
}
/* 모바일 기능 장면(사용자 지시 2026-10-07): 칩 없이, 스크롤하면 제목이 기능 이름으로 바뀌고 휴대폰 화면이 따라 바뀐다.
   움직임 줄이기를 켠 사람과 스크립트가 없는 화면은 위의 칩 방식 그대로 */
@media (max-width:1079px) and (prefers-reduced-motion:no-preference){
  .js .features{display:grid;gap:0}
  .js .features h2{grid-area:1/1;align-self:start;position:sticky;top:75px;z-index:1;transition:opacity .3s ease-out .18s}
  .js .features.pinned h2{opacity:0;pointer-events:none;transition:opacity .18s ease-out}
  .js .feat-track{grid-area:1/1;height:calc(800px + 240vh)}
  .js .feat-sticky{position:sticky;top:75px;gap:0}
  .js .feat-tabs{display:none}
  .js .feat-list{order:1;min-height:132px}
  .js .feat-list li{transition:opacity .18s ease-out,visibility 0s .18s}
  .js .feat-list li.on{transition:opacity .3s ease-out .18s,visibility 0s .18s}
  .js .features:not(.pinned) .feat-list li.on{opacity:0;visibility:hidden;transition:opacity .18s ease-out,visibility 0s .18s}
  .js .feat-list h3{display:block;width:auto;font-size:34px;line-height:40px;letter-spacing:-.03em;color:var(--text)}
  .js .feat-list h3 .ic,.js .feat-list h3 .ic-star{display:none}
  .js .feat-body p{padding-top:12px}
  .js .feat-phone{order:3;width:auto;height:clamp(420px,calc(100vh - 250px),597.96px);height:clamp(420px,calc(100svh - 250px),597.96px);aspect-ratio:290.4/597.96;margin:24px 24px 0 0;touch-action:auto}
}
/* 모바일 배치인데 화면이 402보다 넓을 때(큰 휴대폰 · 태블릿 · 좁힌 창): 히어로 그림은 402 폭에서 양옆이 화면 끝에 걸리게 잘린 그림이다
   → 별은 화면 왼쪽 끝, 집은 오른쪽 끝에 붙이고 화면이 넓어지는 만큼 키운다. 다만 너무 커지지 않게 늘어난 폭의 60%만 따라간다
   (--u = 402에서의 1px이 지금 몇 px인지: 402에서 1px, 685에서 1.42px). 휴대폰은 가운데 그대로 */
@media (min-width:403px) and (max-width:1079px){
  .hero-stage{left:0;margin-left:0;width:100%;--u:calc(.4px + 100vw * .6 / 402)}
  .art-hero{left:calc(var(--u) * -66.2);width:calc(var(--u) * 566.4);height:calc(var(--u) * 280.8)}
  .art-hero .art-house{left:calc(100vw - var(--u) * 255.6);width:calc(var(--u) * 321.8);height:calc(var(--u) * 368.8)}
  .art-hero .art-star{left:calc(var(--u) * 66.2);top:calc(var(--u) * -33.96);width:calc(var(--u) * 134.7);height:calc(var(--u) * 237.7)}
  .hero .phone{left:calc(50% - 145.2px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}