/* XO keyring landing (single page, light). Option 2 (dark) was removed 2026-10-31.
   Mirrors Figma page "xo키링": mobile gutter 24 · section 48 / desktop gutter 48 · section 80, 1440 frame. Breakpoint 960px.
   Purple (--shop) is used only on the shop CTA. */
:root{--ink:#111;--paper:#fff;--mute:#707072;--line:#e5e5e5;--tile:#f5f5f5;--shop:#5f0aff;--shop-press:#4a00cc;
--g:24px;--sec:48px;--max:1440px;--dock:89px;
--body:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
--ease:cubic-bezier(.16,.84,.3,1)}
@media (min-width:960px){:root{--g:48px;--sec:80px}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--body);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
ul{list-style:none}
figure{margin:0}
p{text-wrap:pretty}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--shop);outline-offset:3px}
.skip-link{position:fixed;top:8px;left:24px;z-index:200;padding:12px 18px;background:var(--paper);color:var(--ink);transform:translateY(-150%)}
.skip-link:focus{transform:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.ph{width:100%;height:100%;object-fit:cover;background:var(--tile)}
.gal__main .ph,.look__i .ph{position:absolute;inset:0}
@media (max-width:959px){.d-only{display:none!important}.br-d{display:none}}
@media (min-width:960px){.m-only{display:none!important}.br-m{display:none}}

/* type */
.eyebrow{font-size:14px;line-height:20px;font-weight:500;color:var(--mute)}
.h1,.h2{font-weight:700;letter-spacing:-.02em;font-size:24px;line-height:32px}
.lead,.body{font-size:16px;line-height:26px}
.lead{line-height:25px}
.note{font-size:14px;line-height:20px;color:var(--mute);text-align:center}
@media (min-width:960px){
 .eyebrow{font-size:16px;line-height:23px}
 .h2{font-size:36px;line-height:46px}
 .lead,.body{font-size:18px;line-height:30px}
}

/* header — logo only (no CTA; the bottom dock owns it on phones) */
.top{background:var(--paper)}
.top__in{max-width:var(--max);margin:0 auto;height:56px;padding:0 var(--g);display:flex;align-items:center}
.nav__logo{display:block;width:84px;line-height:0}.nav__logo svg{display:block;width:100%;height:auto}
@media (min-width:960px){.top__in{height:72px}.top .nav__logo{width:97px}}

/* shop CTA */
.shop{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 32px;border-radius:999px;background:var(--shop);color:#fff;font:500 17px/24px var(--body);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:background-color .15s,transform .1s}
.shop:hover{background:var(--shop-press)}
.shop:active{transform:scale(.98)}
.shop--block{display:flex;width:100%}

/* sticker: the in-app emoticon on the hero photo */
.sticker{position:absolute;left:20px;top:20px;width:104px;height:104px;border-radius:23px;background:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.14);transition:opacity .25s,transform .25s var(--ease)}
.sticker img{width:92px;height:92px}
.sticker{text-decoration:none}
/* the inline SVG emoticon is the centred box (vector, so it stays sharp on retina screens) */
.sticker .xo-anim{display:block;width:92px;height:92px;transform:translateY(-4px)}
/* keyring-bonus (키링 특전) tag on the sticker's bottom edge (the lettering sits on top), clear of the product (black: purple stays on the shop CTA only) */
.sticker__tag{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);padding:4px 11px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.16)}
@media (min-width:1200px){.sticker{left:32px;top:32px;width:140px;height:140px;border-radius:31px}.sticker .xo-anim{width:125px;height:125px}.sticker__tag{bottom:-16px;font-size:15px;line-height:22px;padding:4px 13px}}
/* 960–1199px: photos are ~300–600px wide, so the sticker keeps its phone size. */
@media (min-width:960px) and (max-width:1199px){.sticker{left:24px;top:24px}}

/* gallery — mobile: one full-bleed photo; desktop: thumbnail rail + main image */
.gal__thumbs{display:none}
.gal__main{position:relative;aspect-ratio:13/12;overflow:hidden;background:var(--tile)}
.gal.is-alt .sticker{opacity:0;transform:scale(.9)}
@media (max-width:959px){.hero .wrap.pdp{padding:0}}
@media (min-width:960px){
 .pdp{display:grid;grid-template-columns:minmax(0,848fr) minmax(320px,432fr);gap:64px;align-items:start}
 .gal{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start}
 .gal__thumbs{display:flex;flex-direction:column;gap:8px}
 .gal__thumb{width:72px;height:66px;border:0;padding:0;border-radius:6px;overflow:hidden;cursor:pointer;background:var(--tile);position:relative}
 .gal__thumb img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .15s}
 .gal__thumb::after{content:"";position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s}
 .gal__thumb:hover img,.gal__thumb[aria-pressed=true] img{opacity:1}
 .gal__thumb[aria-pressed=true]::after{box-shadow:inset 0 0 0 1.5px var(--ink)}
 .gal__main{aspect-ratio:760/702}
}

/* product block */
.buy{display:flex;flex-direction:column;gap:28px}
.buy__name{font-size:22px;line-height:31px;font-weight:500}
.buy__sub{font-size:16px;line-height:24px;color:var(--mute);margin-top:4px}
.buy__cta{display:flex;flex-direction:column;gap:12px}
.acc{border-bottom:1px solid var(--line)}
.acc details{border-top:1px solid var(--line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-size:17px;line-height:26px;font-weight:500;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:8px;height:8px;margin-right:6px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.acc details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.acc details p{padding:0 0 20px;font-size:15px;line-height:24px;color:var(--mute)}
@media (min-width:960px){.acc summary{font-size:18px}}

/* hero · option 1 (light) */
.hero__text{display:flex;flex-direction:column;gap:6px;padding:20px var(--g) 0}
.hero--a .lead{color:var(--ink)}
@media (min-width:960px){
 .hero--a .pdp{padding-top:24px}
 .pdp__info{padding-top:24px;display:flex;flex-direction:column;gap:36px}
 .hero__text{padding:0;gap:14px}
 .hero--a .h1{font-size:clamp(32px,2.8vw,40px);line-height:1.3}
 .hero .buy{gap:24px}
 .hero .acc{margin-top:12px}
 .hero .buy__name{font-size:20px;line-height:28px}
}

/* sections */
.sec{padding-top:var(--sec)}
.sec__text{display:flex;flex-direction:column;gap:8px}
@media (min-width:960px){.sec__text{gap:12px}}

/* 채팅 속 XO */
.emo__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:24px}
.emo__tile{aspect-ratio:1;background:var(--tile);display:grid;place-items:center}
.emo__tile img{width:81%;height:81%;object-fit:contain;transition:transform .35s var(--ease)}
@media (hover:hover){.emo__tile:hover img{transform:scale(1.06) rotate(-3deg)}}
@media (min-width:960px){.emo__grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:40px}.emo__tile img{width:79%;height:79%}}

/* 키링 특전 (two keyring-face emoticons for meeting someone new) */
.lim__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:24px}
.lim__art{aspect-ratio:1;background:var(--tile);display:grid;place-items:center}
.lim__art .xo-anim{display:block;width:84%;height:auto}
.lim__when{margin-top:12px;font-size:14px;line-height:20px;font-weight:500;color:var(--mute)}
.lim__what{margin-top:2px;font-size:15px;line-height:22px;font-weight:600}
.lim__note{margin-top:20px;text-align:left}
@media (min-width:960px){
 /* desktop: copy on the left, the two emoticons side by side on the right */
 .lim .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"t l" "n l";column-gap:64px}
 .lim .sec__text{grid-area:t;align-self:end}
 .lim__list{grid-area:l;gap:16px;margin-top:0}
 .lim__note{grid-area:n;align-self:start}
 .lim__art .xo-anim{width:min(320px,80%)}
 .lim__when{margin-top:16px;font-size:16px;line-height:23px}
 .lim__what{font-size:18px;line-height:27px}
 .lim__note{margin-top:24px}
}

/* product block: what the keyring unlocks, right above the CTA */
.perk{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--tile);font-size:15px;line-height:22px;font-weight:500}
.perk img{flex:none;width:44px;height:44px}
.perk b{font-weight:700;margin-right:4px}
@media (min-width:960px){.perk{font-size:16px;line-height:24px}}

/* 손바닥만 한 XO (mobile swipe) */
.swipe{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:0 var(--g);margin-top:24px;scroll-padding:0 var(--g);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.swipe::-webkit-scrollbar{display:none}
.swipe>*{scroll-margin-left:var(--g)}
.dcard{flex:0 0 min(300px,77vw);scroll-snap-align:start}
.dcard .ph{aspect-ratio:13/12;height:auto}
.dcard__c{margin-top:12px;font-size:15px;line-height:22px;font-weight:500}
.dots{display:flex;justify-content:center;gap:6px;margin-top:24px}
.dots i{width:6px;height:6px;border-radius:3px;background:#ccc;transition:width .2s,background-color .2s}
.dots i.on{background:var(--ink)}

/* 코트까지 같이 가요 */
.look{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
.look__i{position:relative;aspect-ratio:13/12;overflow:hidden;background:var(--tile)}
.look__i:first-child{grid-column:1/-1}
.look__i:not(:first-child){aspect-ratio:191/176}
@media (min-width:960px){
 .look{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:40px auto 0;max-width:var(--max);padding:0 var(--g)}
 .look__i:first-child{grid-column:auto}
 .look__i,.look__i:not(:first-child){aspect-ratio:437/403}
 .look__i .ph{transition:transform .6s var(--ease)}
 .look__i:hover .ph{transform:scale(1.03)}
}

/* product section */
@media (min-width:960px){
 .product--pdp .pdp__info{padding-top:0}
 .product--pdp .buy__name{font-size:28px;line-height:39px}
 .product--pdp .buy__sub{font-size:18px;line-height:27px}
}

/* end */
.end{display:flex;flex-direction:column;align-items:center;gap:20px;padding:80px var(--g) 64px;text-align:center}
.end .nav__logo{width:101px}
.end p{font-size:14px;line-height:20px;color:var(--mute)}
@media (min-width:960px){.end{gap:24px;padding:120px var(--g)}.end .nav__logo{width:126px}}

/* bottom dock (phones only) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:16px var(--g) calc(16px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
@media (max-width:959px){body{padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom))}}
@media (min-width:960px){.dock{display:none}}

/* desktop QR modal */
.qr{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}
.qr[hidden]{display:none}
.qr__dim{position:absolute;inset:0;background:rgba(0,0,0,.55);animation:qrf .2s ease-out}
.qr__box{position:relative;width:520px;max-width:100%;max-height:calc(100dvh - 48px);overflow-y:auto;background:#fff;border-radius:20px;padding:48px 40px 40px;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.18);animation:qrb .28s var(--ease)}
.qr__x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:var(--tile);display:grid;place-items:center;cursor:pointer}
.qr__x:hover{background:var(--line)}
.qr__t{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.02em}
.qr__p{margin-top:10px;font-size:16px;line-height:26px;color:var(--mute)}
.qr__codes{display:flex;justify-content:center;gap:24px;margin-top:28px}
.qr__code{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.qr__code svg{display:block;width:150px;height:150px}
.qr__fig figcaption{margin-top:12px;font-size:14px;line-height:20px;font-weight:500}
@keyframes qrf{from{opacity:0}}@keyframes qrb{from{opacity:0;transform:translateY(12px) scale(.98)}}

/* reveal motion (opt-in via motion.js; hero is never hidden) */
.js-anim [data-r]{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-anim [data-r].in{opacity:1;transform:none}
.js-anim .emo__grid[data-r]{opacity:1;transform:none}
.js-anim .emo__grid[data-r] .emo__tile{opacity:0;transform:translateY(14px) scale(.96);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.js-anim .emo__grid[data-r].in .emo__tile{opacity:1;transform:none}
.js-anim .lim__list[data-r]{opacity:1;transform:none}
.js-anim .lim__list[data-r] .lim__card{opacity:0;transition:opacity .7s var(--ease);transition-delay:calc(var(--i) * 90ms)}
.js-anim .lim__list[data-r].in .lim__card{opacity:1}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important}
 .js-anim [data-r],.js-anim .emo__grid[data-r] .emo__tile,.js-anim .lim__list[data-r] .lim__card{opacity:1;transform:none}
}