/* 리얼맛집 사이트 — 앱 토큰 바탕. 밖에서 불러오는 글꼴 · 스크립트 없음 */
@font-face{font-family:'Pretendard RM';font-weight:800;font-display:swap;src:url(../fonts/pretendard-800.woff2) format('woff2')}
@font-face{font-family:'Num RM';font-weight:700;font-display:swap;src:url(../fonts/numserif-700.woff2) format('woff2')}
:root{
  --bg:#FBFAF7;--tx:#111;--mu:#6F6B66;--bd:#E7DED1;--tile:#F2EEE7;--line:#EFEAE2;
  --pt:#F0671A;--ptt:#B84A0D;--pts:#FEF0E8;--night:#1D2747;--night2:#343D59;
  --sans:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Noto Sans CJK KR','Malgun Gothic',sans-serif;
  --head:'Pretendard RM','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  --num:'Num RM','Noto Serif KR','Apple SD Gothic Neo',serif;
  --w:70rem;--pad:clamp(1.25rem,5vw,2.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:1.0625rem;line-height:1.7;font-weight:500;word-break:keep-all;overflow-wrap:anywhere}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:800;letter-spacing:-.03em;line-height:1.18;margin:0}
p{margin:0}
.num{font-family:var(--num);font-weight:700;letter-spacing:0}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:0;background:var(--tx);color:var(--bg);padding:.6rem 1rem;z-index:50;border-radius:0 0 .5rem 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--tx);outline-offset:3px;border-radius:.25rem}
.on-dark :focus-visible{outline-color:var(--bg)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 머리 */
.top{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.94);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.75rem;flex-wrap:wrap}
.logo{font-family:var(--head);font-weight:800;font-size:1.3rem;letter-spacing:-.04em;text-decoration:none}
.logo i{font-style:normal;color:var(--pt)}
.top nav{display:flex;gap:clamp(.9rem,3vw,1.75rem);font-size:.95rem;font-weight:500}
.top nav a{text-decoration:none;padding:.5rem 0}
.top nav a:hover{text-decoration:underline;text-underline-offset:.3em}

/* 출시 표시 · 단추 자리 */
.soon{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;font-weight:500;color:var(--tx)}
.soon::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--pt);flex:none}
.soon .num{font-size:1rem}
.stores{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.stores li{display:flex;flex-direction:column;justify-content:center;min-width:9.5rem;padding:.7rem 1.1rem;border-radius:.9rem;background:var(--tx);color:var(--bg);line-height:1.3}
.stores li small{font-size:.74rem;opacity:.72}
.stores li b{font-family:var(--head);font-weight:800;font-size:1.02rem}
.on-dark .stores li{background:var(--bg);color:var(--tx)}

/* 첫 화면 — 안 (가) 폰 모형 중심 */
.hero-a{padding:clamp(2rem,6vw,4.5rem) 0 0;overflow:hidden}
.hero-a .wrap{display:grid;gap:2.5rem;align-items:center}
.hero-a h1{font-size:clamp(2.4rem,9.2vw,4.1rem)}
.hero-a h1 em{font-style:normal;display:block}
.hero-a .lead{margin:1.4rem 0 1.6rem;max-width:30rem;color:#33302C;font-size:1.1rem}
.hero-a .soon{margin-bottom:1rem}
@media(min-width:56rem){.hero-a .wrap{grid-template-columns:1.15fr .85fr}}

/* 폰 모형 */
.phone{--pw:min(17.5rem,72vw);width:var(--pw);margin:0 auto;position:relative}
.phone .frame{position:relative;aspect-ratio:600/1299;border-radius:calc(var(--pw)*.15);background:#111;padding:calc(var(--pw)*.03);box-shadow:0 1.5rem 3rem -1.2rem rgba(58,50,43,.35)}
.phone .scr{position:relative;width:100%;height:100%;border-radius:calc(var(--pw)*.122);overflow:hidden;background:var(--bg)}
.phone .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.car .scr img{opacity:0;transform:translateX(6%);transition:opacity .45s ease,transform .45s ease}
.car .scr img.on{opacity:1;transform:none}
.car .scr img.out{transform:translateX(-6%)}
.carctl{display:flex;align-items:center;justify-content:center;gap:.35rem;margin-top:1rem;flex-wrap:wrap}
.carctl button{font:inherit;font-size:.82rem;font-weight:500;color:var(--mu);background:none;border:1px solid transparent;border-radius:999px;padding:.3rem .7rem;cursor:pointer;min-height:2.25rem}
.carctl button[aria-pressed="true"]{color:var(--tx);border-color:var(--tx)}
.carctl .pp{border-color:var(--bd);color:var(--tx)}

/* 스카이라인 띠 */
.pano{--ph:15rem;position:relative;height:var(--ph);overflow:hidden;background:linear-gradient(#FBFAF7,#FBFAF7 87.6%,var(--bg) 87.6%)}
.pano[data-time="morning"]{background:linear-gradient(#FBFAF7,#FEF0E8 87.6%,var(--bg) 87.6%)}
.pano[data-time="sunset"]{background:linear-gradient(#FBFAF7,#FEF0E8 48%,#FAC4A6 87.6%,var(--bg) 87.6%)}
.pano[data-time="night"]{background:linear-gradient(var(--night),var(--night2) 87.6%,var(--bg) 87.6%)}
.pano img{position:absolute;bottom:0;height:var(--ph);width:auto;max-width:none}
.pano .sky{right:max(6%,calc(50% - 30rem));display:none}
.pano[data-time="morning"] .sky.morning,.pano[data-time="day"] .sky.day,.pano[data-time="sunset"] .sky.sunset,.pano[data-time="night"] .sky.night,.pano:not([data-time]) .sky.day{display:block}
.pano .cloud{left:8%;opacity:.9}
.pano[data-time="night"] .cloud{opacity:.28}
.pano .track{position:absolute;left:0;bottom:0;display:flex;height:var(--ph);width:max-content;animation:drift 150s linear infinite}
.pano .track img{position:static;flex:none}
.pano .track .n{display:none}
.pano[data-time="night"] .track .d{display:none}
.pano[data-time="night"] .track .n{display:block}
.pano .front{position:absolute;left:0;right:0;bottom:0;height:var(--ph);background:url(../art/front_shops.svg) 0 100%/auto 100% repeat-x}
.pano.still .track,.paused .pano .track{animation-play-state:paused}
@keyframes drift{to{transform:translateX(-50%)}}
.pano .pp{position:absolute;right:.75rem;top:.75rem;z-index:2}
.ppbtn{font:inherit;font-size:.78rem;font-weight:500;background:rgba(251,250,247,.9);color:var(--tx);border:1px solid var(--bd);border-radius:999px;padding:.3rem .75rem;min-height:2.25rem;cursor:pointer}
.pano.low{height:calc(var(--ph)*.42);background:var(--bg);margin-top:clamp(1.5rem,5vw,3rem)}
.pano.low .sky,.pano.low .cloud{display:none!important}
@media(min-width:56rem){.pano{--ph:18.75rem}}

/* 첫 화면 — 안 (나) 큰 글 + 그림 중심 */
.hero-b{position:relative;overflow:hidden}
.hero-b .pano{--ph:18.75rem;height:auto;min-height:min(46rem,92vh);display:flex;flex-direction:column}
.hero-b .pano .copy{position:relative;z-index:3;padding:clamp(2.5rem,7vw,5rem) 0 calc(var(--ph)*.72)}
.hero-b h1{font-size:clamp(3.1rem,13.5vw,8.75rem);line-height:1.04;letter-spacing:-.045em}
.hero-b h1 span{display:block}
.hero-b .lead{margin:1.5rem 0 1.6rem;max-width:31rem;font-size:1.1rem}
.hero-b .soon{margin-bottom:1.1rem}
.hero-b .pano[data-time="night"] .copy{color:var(--bg)}
.hero-b .pano[data-time="night"] .soon{color:var(--bg)}
.hero-b .pano[data-time="night"] .stores li{background:var(--bg);color:var(--tx)}
@media(min-width:56rem){.hero-b .pano{--ph:22rem}}
.peek{background:var(--bg);padding:clamp(2.5rem,6vw,4rem) 0 0}
.peek .wrap{display:grid;gap:2rem;align-items:center}
.peek h2{font-size:clamp(1.7rem,5vw,2.6rem)}
.peek p{margin-top:1rem;color:#33302C;max-width:28rem}
@media(min-width:56rem){.peek .wrap{grid-template-columns:.9fr 1.1fr}.peek .phone{order:-1}}

/* 구역 공통 */
.sec{padding:clamp(4rem,10vw,7.5rem) 0}
.sec>.wrap>h2{font-size:clamp(2rem,6.4vw,3.6rem);max-width:18em}
.sec>.wrap>.sub{margin-top:1rem;max-width:34rem;color:#33302C}

/* 왜 다른가 */
.why{background:#fff;border-block:1px solid var(--line)}
.vs{display:grid;gap:1rem;margin-top:2.5rem}
.vs>div{border-radius:1.25rem;padding:1.5rem;border:1px solid var(--bd);background:var(--bg)}
.vs .lab{font-size:.85rem;font-weight:500;color:var(--mu)}
.vs .them{color:var(--mu);background:var(--tile);border-color:transparent}
.vs .them .big{font-family:var(--num);font-size:4.2rem;line-height:1;color:#A6A19A;margin:.6rem 0 .4rem;text-decoration:line-through;text-decoration-thickness:.18rem;text-decoration-color:var(--tx)}
.vs .them p{max-width:22rem}
.vs .us .row{display:flex;align-items:center;gap:.9rem;margin:.9rem 0 .8rem}
.vs .us .rk{font-family:var(--num);font-size:2.6rem;line-height:1;color:var(--pt)}
.vs .us .nm{flex:1;min-width:0}
.vs .us .nm b{display:block;font-family:var(--head);font-size:1.3rem;letter-spacing:-.03em}
.vs .us .nm span{font-size:.88rem;color:var(--mu)}
.vs .us .sc{font-family:var(--num);font-size:2rem;color:var(--pt)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.chips li{font-size:.85rem;padding:.25rem .7rem;border-radius:999px;background:#fff;border:1px solid var(--bd)}
.vs .us .cnt{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bd);font-size:.95rem}
.vs .us .cnt .num{font-size:1.15rem}
.why .note{margin-top:1.5rem;max-width:40rem;color:#33302C}
@media(min-width:48rem){.vs{grid-template-columns:.8fr 1.2fr}}

/* 기능 */
.feat{display:grid;gap:1.75rem;align-items:center;padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid var(--line)}
.feat:first-of-type{border-top:0}
.feat h3{font-size:clamp(1.6rem,4.6vw,2.4rem)}
.feat p{margin-top:.9rem;max-width:26rem;color:#33302C}
.feat .phone{--pw:min(15.5rem,64vw)}
.moodbtn{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.moodbtn button{font:inherit;font-size:.9rem;font-weight:500;background:#fff;color:var(--tx);border:1px solid var(--bd);border-radius:999px;padding:.35rem .9rem;min-height:2.5rem;cursor:pointer}
.moodbtn button[aria-pressed="true"]{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.cardpic{width:min(15.5rem,64vw);margin:0 auto;border-radius:1rem;overflow:hidden;box-shadow:0 1.5rem 3rem -1.2rem rgba(58,50,43,.35);transform:rotate(-3deg);border:1px solid var(--bd)}
@media(min-width:48rem){
  .feat{grid-template-columns:1fr 1fr;gap:3rem}
  .feat:nth-of-type(even) .pic{order:-1}
}
.js .feat .pic{opacity:0;transform:translateY(1.5rem);transition:opacity .6s ease,transform .6s ease}
.js .feat.in .pic{opacity:1;transform:none}

/* 재미 */
.fun{background:#fff;border-block:1px solid var(--line)}
.fun .blk{margin-top:3rem}
.fun h3{font-size:clamp(1.45rem,4.2vw,2rem)}
.fun .blk>p{margin-top:.8rem;max-width:34rem;color:#33302C}
.bdgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem .75rem;margin:1.75rem 0 1rem;padding:0;list-style:none;max-width:34rem}
.bdgs li{text-align:center;font-size:.82rem;line-height:1.35}
.bdg{position:relative;aspect-ratio:1;margin-bottom:.45rem}
.bdg img{width:100%;height:100%}
.bdg .cv{position:absolute;inset:0;display:none}
.js .bdg .cv{display:block}
.bdg .cv i{position:absolute;inset:0;background:center/100% 100% no-repeat}
.bdg .cv i:nth-child(1){clip-path:polygon(48% 46%,0 0,52% 0);--dx:-14%;--r:-22deg}
.bdg .cv i:nth-child(2){clip-path:polygon(48% 46%,52% 0,100% 0,100% 30%);--dx:16%;--r:18deg}
.bdg .cv i:nth-child(3){clip-path:polygon(48% 46%,100% 30%,100% 100%,74% 100%);--dx:20%;--r:26deg}
.bdg .cv i:nth-child(4){clip-path:polygon(48% 46%,74% 100%,30% 100%);--dx:4%;--r:-12deg}
.bdg .cv i:nth-child(5){clip-path:polygon(48% 46%,30% 100%,0 100%,0 62%);--dx:-18%;--r:-28deg}
.bdg .cv i:nth-child(6){clip-path:polygon(48% 46%,0 62%,0 0);--dx:-22%;--r:14deg}
.bdg .cv svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bdg .cv path{fill:none;stroke:#8C8780;stroke-width:2;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:160}
.bdg.open .cv path{animation:crack .26s ease-out forwards,gone .1s linear .5s forwards;animation-delay:var(--d),calc(var(--d) + .5s)}
.bdg.open .cv i{animation:fall .56s cubic-bezier(.5,0,.9,.5) forwards;animation-delay:calc(var(--d) + .3s)}
.bdg.open>img{animation:tok .34s ease-out both;animation-delay:calc(var(--d) + .62s)}
.bdgs span{display:block;opacity:.45;transition:opacity .3s ease}
.no-js .bdgs span,.bdgs li.got span{opacity:1}
@keyframes crack{to{stroke-dashoffset:0}}
@keyframes gone{to{opacity:0}}
@keyframes fall{to{transform:translate(var(--dx),70%) rotate(var(--r));opacity:0}}
@keyframes tok{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
.again{font:inherit;font-size:.9rem;font-weight:500;background:none;border:1px solid var(--tx);border-radius:999px;padding:.4rem 1rem;min-height:2.5rem;cursor:pointer;color:var(--tx)}
.skybox{margin-top:1.75rem;border-radius:1.25rem;overflow:hidden;border:1px solid var(--bd)}
.timebtn{display:flex;flex-wrap:wrap;gap:.4rem;padding:.8rem;background:var(--bg);border-top:1px solid var(--bd);align-items:center}
.timebtn button{font:inherit;font-size:.9rem;font-weight:500;background:#fff;color:var(--tx);border:1px solid var(--bd);border-radius:999px;padding:.35rem .9rem;min-height:2.5rem;cursor:pointer}
.timebtn button[aria-pressed="true"]{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.timebtn .later{margin-left:auto;font-size:.85rem;color:var(--mu)}

/* 한 줄 */
.words{text-align:left}
.words blockquote{margin:0;font-family:var(--head);font-weight:800;font-size:clamp(2rem,7.4vw,4.4rem);line-height:1.2;letter-spacing:-.035em;max-width:14em}
.words p{margin-top:1.5rem;color:var(--mu)}

/* 출시 다시 */
.launch{background:var(--tx);color:var(--bg)}
.launch h2{font-size:clamp(2rem,7vw,4rem)}
.launch h2 .num{color:var(--pt)}
.launch p{margin:1rem 0 1.75rem;color:#D9D4CC;max-width:30rem}

/* 회사 · 문의 */
.co{display:grid;gap:2.5rem}
.co h2{font-size:1.5rem;margin-bottom:1rem}
.co dl{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.25rem;margin:0}
.co dt{color:var(--mu)}
.co dd{margin:0}
.co .mail{font-family:var(--head);font-weight:800;font-size:1.25rem;text-underline-offset:.25em}
@media(min-width:48rem){.co{grid-template-columns:1fr 1fr}}
.blank{background:var(--pts);color:var(--ptt);outline:1.5px dashed var(--ptt);outline-offset:1px;border-radius:.2rem;padding:0 .2rem;font-weight:500;font-style:normal}

/* 꼬리 */
.foot{border-top:1px solid var(--line);padding:2rem 0 3rem;font-size:.92rem;color:var(--mu)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.foot a{color:var(--tx);padding:.5rem 0;display:inline-block}

/* 긴 글(약관 · 처리방침) */
.doc{padding:clamp(2rem,6vw,4rem) 0 5rem}
.doc .wrap{display:grid;gap:2rem}
.doc h1{font-size:clamp(2.2rem,7vw,3.5rem)}
.doc .date{color:var(--mu);margin-top:.6rem}
.doc .date::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--pt);margin-right:.5rem;vertical-align:.1em}
.doc article{max-width:44rem;min-width:0}
.doc article h2{font-size:1.3rem;margin:2.6rem 0 .7rem;padding-top:1.1rem;border-top:1px solid var(--bd)}
.doc article p,.doc article ul{margin:.7rem 0}
.doc article ul{padding-left:1.2rem}
.doc article li{margin:.35rem 0}
.doc article i{font-style:normal;background:var(--pts);color:var(--ptt);border-bottom:1.5px dashed var(--ptt);padding:0 .15rem}
.draft{border:2px dashed var(--pt);background:var(--pts);border-radius:.9rem;padding:1rem 1.2rem;font-size:.95rem;max-width:44rem;margin:0 0 2rem}
.draft b{font-family:var(--head)}
.tw{overflow-x:auto;margin:1rem 0;border:1px solid var(--bd);border-radius:.9rem;background:#fff}
.tw table{border-collapse:collapse;width:100%;min-width:30rem;font-size:.95rem;line-height:1.6}
.tw th,.tw td{text-align:left;vertical-align:top;padding:.75rem .9rem;border-bottom:1px solid var(--line)}
.tw tr:last-child td{border-bottom:0}
.tw th{background:var(--tile);font-weight:500;color:#33302C;white-space:nowrap}
.tw td:first-child{font-weight:500}
.toc{font-size:.95rem}
.toc summary{cursor:pointer;font-family:var(--head);font-weight:800;padding:.6rem 0}
.toc ol{list-style:none;margin:.3rem 0 0;padding:0}
.toc a{display:block;padding:.4rem 0;text-decoration:none;color:#33302C}
.toc a:hover{color:var(--tx);text-decoration:underline;text-underline-offset:.3em}
.other{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--bd)}
@media(min-width:60rem){
  .doc .wrap{grid-template-columns:15rem minmax(0,1fr);gap:4rem}
  .toc{position:sticky;top:5.5rem;align-self:start;max-height:calc(100vh - 7rem);overflow:auto}
  .toc summary{list-style:none;cursor:default}
  .toc summary::-webkit-details-marker{display:none}
}

/* 없는 주소 */
.nf{min-height:calc(100vh - 3.75rem);display:flex;flex-direction:column;background:var(--night);color:var(--bg)}
.nf .copy{padding:clamp(3rem,10vw,6rem) 0 2rem;flex:1}
.nf .code{font-family:var(--num);font-size:clamp(5rem,26vw,13rem);line-height:.9;color:var(--pt)}
.nf h1{font-size:clamp(1.8rem,6.4vw,3.2rem);margin-top:1.25rem}
.nf p{margin:1rem 0 1.75rem;color:#D9D4CC;max-width:30rem}
.btn{display:inline-block;font-family:var(--head);font-weight:800;text-decoration:none;background:var(--bg);color:var(--tx);border-radius:999px;padding:.8rem 1.5rem}
.nf .pano{flex:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pano .track{animation:none}
  .car .scr img,.js .feat .pic{transition:none;transform:none}
  .js .feat .pic{opacity:1}
  .bdg.open .cv{display:none}
  .bdg.open>img{animation:none}
}

/* ===== r2 ===== */
/* 앱 화면 + 사진 자리 */
.shot{position:absolute;left:0;top:0;width:100%}
.shot>img:first-child{position:static!important;width:100%;height:auto!important;display:block}
.shot .pslot{position:absolute!important;object-fit:cover;inset:auto;opacity:1!important;transform:none!important}
.car .scr .shot{opacity:0;transform:translateX(6%);transition:opacity .45s ease,transform .45s ease}
.car .scr .shot.on{opacity:1;transform:none}
.car .scr .shot.out{transform:translateX(-6%)}
.cardpic{position:relative}
.cardpic .shot{position:relative}
/* 이야기 */
.step{font-family:var(--num);font-weight:700;color:var(--pt);font-size:1.05rem;display:block;margin-bottom:.5rem}
.after{background:#fff;border-block:1px solid var(--line)}
.born{border:1px solid var(--bd);border-radius:1.25rem;background:var(--bg);padding:1.5rem;max-width:24rem;margin:0 auto}
.born .row{display:flex;align-items:center;gap:.8rem}
.born .rk{font-family:var(--num);font-size:2.2rem;line-height:1;color:var(--pt)}
.born .nm b{display:block;font-family:var(--head);font-size:1.15rem;letter-spacing:-.03em}
.born .nm span{font-size:.85rem;color:var(--mu)}
.born .arrow{display:block;width:2px;height:1.75rem;background:var(--tx);margin:.9rem 0 .9rem 1.1rem;position:relative}
.born .arrow::after{content:"";position:absolute;left:-4px;bottom:0;width:10px;height:10px;border-right:2px solid var(--tx);border-bottom:2px solid var(--tx);transform:rotate(45deg)}
.born .real{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.rchip{display:inline-flex;align-items:center;font-size:.95rem;border-radius:.45rem;overflow:hidden;border:1.5px solid var(--tx);line-height:1.5}
.rchip b{background:var(--pt);color:#111;padding:.05rem .45rem;font-family:var(--head)}
.rchip span{background:var(--tx);color:var(--bg);padding:.05rem .55rem}
.rchip .num{font-size:1.02rem}
.born .real p{margin:0;font-size:.92rem;color:var(--mu);flex:1;min-width:10rem}
.feat blockquote{margin:1.25rem 0 0;padding-left:1rem;border-left:3px solid var(--pt);font-family:var(--head);font-weight:800;font-size:1.2rem;line-height:1.4;letter-spacing:-.02em;max-width:22rem}
.feat .bdgs{max-width:22rem;margin:0 auto .8rem}
.feat .again{display:block;margin:0 auto}
/* 끌어내리기 */
.pull .scr{background:var(--bg)}
.pano.art{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:375/300;--ph:100%}
.pano.art img{left:0;right:auto;width:100%;height:100%}
.pano.art .sl.n{display:none}
.pano.art[data-time="night"] .sl.d{display:none}
.pano.art[data-time="night"] .sl.n{display:block}
.pull .shot{transition:none;background:var(--bg);box-shadow:0 -1px 0 var(--bd)}
.pull.play .shot{animation:pulldown 4.4s cubic-bezier(.3,.7,.3,1) both}
.pull.held .shot{transform:translateY(31%)}
@keyframes pulldown{0%{transform:translateY(0)}26%{transform:translateY(31%)}74%{transform:translateY(31%)}100%{transform:translateY(0)}}
.pullctl{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:1rem}
.pullctl button{font:inherit;font-size:.9rem;font-weight:500;background:#fff;color:var(--tx);border:1px solid var(--bd);border-radius:999px;padding:.35rem .9rem;min-height:2.5rem;cursor:pointer}
.pullctl button[aria-pressed="true"]{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.pullctl .go{border-color:var(--tx)}
.later{font-size:.88rem;color:var(--mu);margin-top:.9rem!important}
.launch .slogan{font-family:var(--head);font-weight:800;color:var(--bg);margin:0 0 .6rem;font-size:1.05rem}
@media (prefers-reduced-motion:reduce){.car .scr .shot{transition:none;transform:none}.pull.play .shot{animation:none;transform:translateY(31%)}}
[hidden]{display:none!important}
.car .scr .shot>img:first-child{opacity:1;transform:none}
.feat .carctl{margin-inline:-2.5rem}

/* ===== r3 — 맨 위 폰 둘 ===== */
.duo{position:relative;width:fit-content;margin:0 auto;padding-right:clamp(5.25rem,21vw,10.5rem)}
.duo .car{position:relative;z-index:1;--pw:min(17.5rem,62vw)}
.duo .back{position:absolute;right:0;top:6%;z-index:0;margin:0;--pw:min(13.5rem,52vw);transform:rotate(5deg);transform-origin:60% 40%}
.duo .back .frame{box-shadow:0 1.2rem 2.4rem -1.2rem rgba(58,50,43,.3)}
.duocap{margin-top:.9rem;text-align:center;font-size:.88rem;color:var(--mu)}

/* 뱃지 덮개 그림 */
.b-hansik .cv i{background-image:url(../badges/hansik_off.svg)}
.b-coffee .cv i{background-image:url(../badges/coffee_off.svg)}
.b-gogi .cv i{background-image:url(../badges/gogi_off.svg)}
.b-bingsu .cv i{background-image:url(../badges/bingsu_off.svg)}
.b-bunsik .cv i{background-image:url(../badges/bunsik_off.svg)}
.b-ilsik .cv i{background-image:url(../badges/ilsik_off.svg)}
.b-pizza .cv i{background-image:url(../badges/pizza_off.svg)}
.b-bakery .cv i{background-image:url(../badges/bakery_off.svg)}

/* ===== 임시판 검수(11-14) ===== */
.after{overflow:hidden}                      /* 뱃지 조각이 폰 폭에서 옆으로 넘치던 것 */
.doc.short{min-height:calc(100vh - 11.5rem)} /* 짧은 쪽에서 꼬리가 화면 가운데 뜨던 것 */
.doc .narrow{max-width:44rem}                /* "함께 보기" 줄을 본문 폭에 맞춤 */