/* CattyGlam landing. 매대 POP 스티커(2026-11-02 채택, 시안 C): 노랑 바탕과 점무늬, 굵은 먹색 테두리와 각진 그림자,
   진한 파스텔, 굵은 POP 글씨와 손글씨, 말풍선, 별 폭발, 형광펜, 마스킹 테이프 */
:root{
  color-scheme: light;
  --ink:#171412; --ink-2:#3d3631; --ink-3:#6b625b;
  --cream:#fff5d6; --paper:#ffffff; --line:#171412;
  --pink:#ff5c93; --pink-d:#d0185a; --pink-s:#ffd2e1;
  --mint:#2fcf95; --mint-d:#0a7d53; --mint-s:#c6f3e1;
  --lav:#9a7bff; --lav-d:#5530d0; --lav-s:#e1d8ff;
  --peach:#ff9d45; --peach-d:#b4560b; --peach-s:#ffe0c2;
  --yel:#ffe03d; --gold:#ffe03d;
  --r-l:18px; --r-m:14px; --r-s:10px;
  --bd:2.5px solid var(--ink);
  --hard:5px 5px 0 var(--ink);
  --shadow:var(--hard);
  --wrap:1160px;
  --f-latin:"Outfit",system-ui,sans-serif;
  --f-head:"Dela Gothic One","Hiragino Sans",sans-serif;
  --f-hand:"Yusei Magic","Zen Maru Gothic",sans-serif;
}
html:lang(ja){--f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",system-ui,sans-serif}
html:lang(ko){--f-body:"Gowun Dodum","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}
html:lang(en){--f-body:"Outfit",system-ui,sans-serif}
html:lang(ko){--f-head:"Black Han Sans","Apple SD Gothic Neo",sans-serif;--f-hand:"Gaegu","Gowun Dodum",sans-serif}

*{box-sizing:border-box}
html:lang(ja) body{line-break:strict;word-break:auto-phrase}
html:lang(ko) body{word-break:keep-all;overflow-wrap:anywhere}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
/* 기울인 띠 장식이 옆으로 삐져 가로 스크롤이 생기지 않게 */
main{overflow-x:clip}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 32px}}
.latin{font-family:var(--f-latin)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:8px}

/* ---------- 로고 ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-mark{width:30px;height:26px;flex:none}
.wm{font-family:var(--f-latin);font-size:24px;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.wm b{font-weight:800}.wm span{font-weight:400}
.wm-c{position:relative;display:inline-block}
.wm-c svg{position:absolute;left:6%;top:-.2em;width:76%;height:.34em;overflow:visible}

/* ---------- 머리 ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,250,244,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:16px;height:64px}
.nav{display:none;gap:4px;margin-left:auto}
.nav a{font-family:var(--f-latin);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:8px 12px;border-radius:999px;color:var(--ink-2)}
.nav a:hover{background:var(--pink-s);color:var(--pink-d)}
.langs{display:flex;gap:2px;margin-left:auto;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px}
.langs a{font-family:var(--f-latin);font-size:12px;font-weight:600;text-decoration:none;padding:6px 10px;border-radius:999px;color:var(--ink-3);letter-spacing:.04em}
.langs a[aria-current="true"]{background:var(--ink);color:#fff}
.subnav{display:flex;gap:6px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;font-size:13px;text-decoration:none;padding:6px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink-2)}
.nav a[aria-current="page"]{background:var(--ink);color:#fff}
.subnav a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
@media (min-width:980px){.nav{display:flex}.langs{margin-left:8px}.subnav{display:none}}

/* ---------- 페이지 전환: 메뉴를 누르면 페이지가 바뀌고, 머리는 그대로 둔 채 본문만 부드럽게 바뀐다 ---------- */
@view-transition{navigation:auto}
.hdr{view-transition-name:hdr}
::view-transition-old(root){animation:vt-out .2s ease both}
::view-transition-new(root){animation:vt-in .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
@supports not (view-transition-name:none){main{animation:vt-in .45s cubic-bezier(.2,.7,.2,1) both}}
/* 하위 페이지 첫 구역은 머리 바로 아래에서 시작 */
body:not(.pg-home) main>.sec:first-child{padding-top:36px}
@media (min-width:860px){body:not(.pg-home) main>.sec:first-child{padding-top:72px}}

/* ---------- 히어로 ---------- */
.hero{position:relative;overflow:hidden;padding:8px 0 48px}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 50% at 85% 30%,var(--pink-s),transparent 70%),
  radial-gradient(40% 40% at 70% 85%,var(--lav-s),transparent 70%),
  radial-gradient(35% 35% at 10% 90%,var(--mint-s),transparent 70%);z-index:-1}
.hero-grid{display:grid;gap:8px;align-items:center}
.hero-art{position:relative;max-width:min(200px,52vw);margin:0 auto;order:-1}
.hero-art img{width:100%;mix-blend-mode:multiply;animation:beckon 4.8s ease-in-out infinite;transform-origin:50% 90%}
.badge-soon{position:absolute;right:2%;top:6%;font-family:var(--f-latin);font-weight:800;font-size:12px;letter-spacing:.14em;background:var(--ink);color:#fff;padding:8px 12px;border-radius:999px;transform:rotate(8deg)}
.eyebrow{font-family:var(--f-latin);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.h1{margin:.42em 0 0;font-family:var(--f-latin);font-size:clamp(52px,14vw,116px);line-height:.95;letter-spacing:-.04em;color:var(--ink);white-space:nowrap}
.h1 b{font-weight:800}.h1 span{font-weight:400}
.h1 .wm-c svg{top:-.17em;height:.3em;left:8%;width:74%}
.kana{margin:10px 0 16px;font-size:15px;letter-spacing:.3em;color:var(--ink-2)}
.slogan{display:inline-block;margin:0;background:var(--pink-s);color:var(--pink-d);font-weight:700;font-size:clamp(17px,4.6vw,22px);padding:12px 22px;border-radius:999px;letter-spacing:.06em}
.h1sub{margin:12px 0 0;font-size:clamp(17px,4.4vw,21px);font-weight:700}
.hero-lead{color:var(--ink-2);margin:10px 0 20px;max-width:34em}
@media (min-width:860px){.kana{margin:14px 0 22px}.hero-lead{margin:14px 0 26px}}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;font-weight:700;text-decoration:none;border:0;font-size:16px;transition:transform .15s,box-shadow .15s}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 10px 24px -12px rgba(43,36,33,.7)}
.btn-ink:hover{box-shadow:0 14px 28px -12px rgba(43,36,33,.8);transform:translateY(-1px)}
.btn-line{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink)}
.btn svg{width:18px;height:18px}
@media (min-width:860px){
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:40px}
  .hero-art{order:0;max-width:460px}
  .hero{padding:56px 0 88px}
}

/* 반짝이 */
.spark{position:absolute;width:22px;height:22px;animation:twinkle 2.6s ease-in-out infinite}
.spark.s1{left:4%;top:30%;color:var(--lav)}.spark.s2{right:6%;bottom:22%;color:var(--mint);animation-delay:.8s;width:16px;height:16px}.spark.s3{left:18%;bottom:6%;color:var(--pink);animation-delay:1.4s;width:14px;height:14px}
@keyframes twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.4}50%{transform:scale(1.1) rotate(20deg);opacity:1}}
@keyframes beckon{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.6deg) translateY(-4px)}}

/* ---------- 흐르는 띠 ---------- */
.marquee{background:var(--ink);color:#fff;overflow:hidden;padding:14px 0;transform:rotate(-1.2deg);margin:-12px -8px 0;position:relative;z-index:2}
.marquee-in{display:flex;gap:36px;width:max-content;animation:mq 32s linear infinite;font-family:var(--f-latin);font-weight:600;letter-spacing:.14em;font-size:14px;white-space:nowrap}
.marquee-in span{display:inline-flex;align-items:center;gap:36px}
.marquee-in i{font-style:normal;color:var(--gold)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- 섹션 공통 ---------- */
.sec{padding:72px 0}
@media (min-width:860px){.sec{padding:112px 0}}
.tag{display:inline-block;font-family:var(--f-latin);font-size:12px;font-weight:800;letter-spacing:.2em;padding:6px 12px;border-radius:6px;margin:0 0 14px;transform:rotate(-2deg)}
.tag.pink{background:var(--pink-s);color:var(--pink-d)}.tag.mint{background:var(--mint-s);color:var(--mint-d)}.tag.lav{background:var(--lav-s);color:var(--lav-d)}.tag.peach{background:var(--peach-s);color:var(--peach-d)}.tag.gold{background:rgba(232,184,74,.16);color:var(--gold)}
.h2{margin:0;font-size:clamp(26px,6.4vw,42px);line-height:1.3;letter-spacing:-.01em;font-weight:700;text-wrap:balance}
.lead{color:var(--ink-2);margin:14px 0 0;max-width:40em;text-wrap:pretty}
.sec-head{margin-bottom:36px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}

/* ---------- 이야기 ---------- */
.story-grid{display:grid;gap:28px;align-items:center}
.story-art{background:var(--paper);border-radius:var(--r-l);padding:12px;box-shadow:var(--shadow);max-width:360px;margin:0 auto;rotate:-2deg}
.story-art img{border-radius:20px}
.story-q{font-size:clamp(20px,5vw,26px);font-weight:700;margin:0 0 12px}
.story-body{font-size:17px;line-height:1.95;color:var(--ink-2);margin:0}
.formula{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px}
.formula span{padding:8px 14px;border-radius:999px;font-size:14px;font-weight:700}
.formula .x{padding:0;font-family:var(--f-latin);color:var(--ink-3);font-weight:400}
.formula .eq{background:var(--ink);color:#fff;font-family:var(--f-latin);letter-spacing:.02em}
@media (min-width:860px){.story-grid{grid-template-columns:.8fr 1.2fr;gap:64px}}

/* ---------- 고양이의 하루 ---------- */
.day{background:var(--paper)}
.day-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:860px){.day-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.moment{border-radius:var(--r-m);padding:14px 14px 18px;text-align:center;position:relative}
.moment img{width:100%;max-width:200px;margin:0 auto;mix-blend-mode:multiply;aspect-ratio:55/65;object-fit:cover}
.moment .en{font-family:var(--f-latin);font-weight:800;letter-spacing:.18em;font-size:13px;margin:4px 0 0}
.moment h3{margin:2px 0 4px;font-size:20px}
.moment p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6}
.moment .goes{display:inline-block;margin-top:10px;font-family:var(--f-latin);font-size:11px;font-weight:600;letter-spacing:.06em;background:var(--paper);border-radius:999px;padding:4px 10px}
.m-wash{background:var(--pink-s)}.m-wash .en,.m-wash h3{color:var(--pink-d)}
.m-stretch{background:var(--mint-s)}.m-stretch .en,.m-stretch h3{color:var(--mint-d)}
.m-nap{background:var(--peach-s)}.m-nap .en,.m-nap h3{color:var(--peach-d)}
.m-dream{background:var(--lav-s)}.m-dream .en,.m-dream h3{color:var(--lav-d)}

/* ---------- 럭키 3종 ---------- */
.pop{display:inline-block;margin:18px 0 0;font-family:var(--f-latin);font-weight:800;font-size:clamp(20px,5vw,28px);color:var(--pink-d);transform:rotate(-2deg);background:#fff;border:2px dashed var(--pink);padding:6px 18px;border-radius:14px}
.nyans{display:grid;gap:16px}
@media (min-width:860px){.nyans{grid-template-columns:repeat(3,1fr);gap:20px}}
.nyan{--c:var(--mint);--cd:var(--mint-d);--cs:var(--mint-s);background:var(--cs);border-radius:var(--r-l);padding:26px 22px 22px;text-align:center;position:relative;transition:transform .25s,box-shadow .25s;border:2px solid transparent}
.nyan.pink{--c:var(--pink);--cd:var(--pink-d);--cs:var(--pink-s)}
.nyan.lav{--c:var(--lav);--cd:var(--lav-d);--cs:var(--lav-s)}
.nyan.picked{border-color:var(--cd);box-shadow:0 20px 40px -20px var(--c);transform:translateY(-4px)}
.nyan .face{width:92px;height:78px;margin:0 auto 8px;color:var(--c)}
.nyan:hover .face{animation:wiggle .6s ease}
@keyframes wiggle{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.nyan h3{margin:0;font-size:24px}
.nyan .en{font-family:var(--f-latin);font-size:12px;letter-spacing:.24em;color:var(--cd);font-weight:600;margin:0}
.nyan .q{color:var(--cd);font-weight:700;margin:10px 0 14px}
.spec{background:#fff;border-radius:var(--r-s);padding:12px 16px;margin:0;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.spec dt{color:var(--cd);font-weight:700}
.spec dd{margin:0;color:var(--ink-2)}
.nyan .line{margin:16px 0 0;font-size:14px;font-weight:700;font-family:"Zen Maru Gothic",var(--f-body)}
.nyan .line::before{content:"“";color:var(--c);font-size:20px;line-height:0;margin-right:2px}
.nyan .line::after{content:"”";color:var(--c);font-size:20px;line-height:0;margin-left:2px}
/* 휴대폰: 옆으로 넘기는 줄과 점 */
@media (max-width:859px){
  div.swipe{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:8px 16px 6px;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{flex:0 0 min(84%,340px);scroll-snap-align:center}
  .dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
  .dots i{width:7px;height:7px;border-radius:4px;background:#e2d6cb;transition:width .25s,background .25s}
  .dots i.on{width:20px;background:var(--ink)}
}
@media (min-width:860px){.dots{display:none}}
.lucky-note{margin:28px auto 0;text-align:center;color:var(--ink-2);font-size:15px;max-width:36em}

/* ---------- 냥미쿠지 ---------- */
.omi{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.omi::before{content:"";position:absolute;inset:0;background-image:var(--paws);background-size:120px;opacity:.06}
.omi .h2{color:#fff}
.omi .lead{color:rgba(255,255,255,.72)}
.omi-grid{display:grid;gap:32px;align-items:center;position:relative}
@media (min-width:860px){.omi-grid{grid-template-columns:1fr 1fr;gap:56px}}
.omi-stage{display:grid;place-items:center;min-height:380px}
.omi-box{width:180px;height:240px;position:relative;border:0;background:none;padding:0}
.omi-box .box{position:absolute;inset:40px 20px 0;background:linear-gradient(160deg,#f7a6bd,var(--pink));border-radius:22px 22px 26px 26px;box-shadow:inset 0 -10px 0 rgba(0,0,0,.08),0 30px 40px -20px rgba(242,124,155,.6)}
.omi-box .box::before{content:"";position:absolute;left:-6px;right:-6px;top:-10px;height:22px;background:#fff;border-radius:12px}
.omi-box .ears{position:absolute;left:20px;right:20px;top:4px;height:40px}
.omi-box .label{position:absolute;left:50%;top:80px;transform:translateX(-50%);background:#fff;color:var(--pink-d);border-radius:10px;padding:10px 8px;writing-mode:vertical-rl;white-space:nowrap;font-weight:700;font-size:20px;letter-spacing:.12em;font-family:"Zen Maru Gothic",var(--f-body);line-height:1}
.omi-box .stick{position:absolute;left:50%;top:22px;width:14px;height:60px;margin-left:-7px;background:#f5e6c8;border-radius:4px;transition:transform .5s cubic-bezier(.2,1.6,.4,1);z-index:-1}
.omi-box.shake{animation:shake .7s ease-in-out 2}
.omi-stage.done .omi-box{scale:.6;margin:-48px 0 -52px}
.omi-box{transition:scale .3s,margin .3s}
.omi-box.out .stick{transform:translateY(-46px)}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
.omi-hint{margin-top:14px;font-size:14px;color:rgba(255,255,255,.65);text-align:center}
.slip{display:none;background:#fffdf7;color:var(--ink);border-radius:18px;padding:24px 22px;max-width:360px;width:100%;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);position:relative;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.slip.on{display:block}
.slip::before{content:"";position:absolute;inset:8px;border:1.5px solid var(--c,var(--pink));border-radius:12px;pointer-events:none;opacity:.5}
@keyframes pop{from{transform:scale(.7) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.slip .rank{font-size:56px;font-weight:700;line-height:1;margin:6px 0 2px;color:var(--cd,var(--pink-d));font-family:"Zen Maru Gothic",var(--f-body);text-align:center}
.slip .rank-en{font-family:var(--f-latin);text-align:center;letter-spacing:.2em;font-size:12px;color:var(--ink-3);margin:0 0 14px}
.slip .face{width:64px;height:54px;margin:0 auto;color:var(--c)}
.slip .who{text-align:center;font-weight:700;font-size:18px;margin:6px 0 4px}
.slip .msg{text-align:center;color:var(--ink-2);margin:0 0 14px;font-size:15px}
.slip dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;margin:0 0 16px;background:var(--cs,var(--pink-s));border-radius:10px;padding:10px 14px}
.slip dt{font-weight:700;color:var(--cd,var(--pink-d))}.slip dd{margin:0}
.slip .acts{display:flex;gap:8px}
.slip .acts .btn{flex:1;min-height:44px;font-size:14px;padding:0 12px}
.slip .see{display:block;margin:14px 0 0;text-align:center;font-size:14px;font-weight:700;color:var(--cd,var(--pink-d));text-underline-offset:3px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:80}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ---------- 라인업 ---------- */
.shot{position:relative;background:#fff;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow)}
@media (max-width:639px){
  .shot-x{margin:0 -16px;padding:4px 16px 22px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .shot-x::-webkit-scrollbar{display:none}
  .shot-x.end{-webkit-mask-image:none;mask-image:none}
  .shot{width:580px}
}
.shot img{width:100%}
.hot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--ink);color:#fff;border:3px solid #fff;font-family:var(--f-latin);font-weight:800;font-size:13px;display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(0,0,0,.5);transition:transform .2s,opacity .2s}
.hot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--ink);opacity:.35;animation:ping 2.4s ease-out infinite}
.hot:hover,.hot.on{transform:scale(1.18);background:var(--pink-d)}
.hot.dim{opacity:.25}
@keyframes ping{from{transform:scale(.8);opacity:.5}to{transform:scale(1.5);opacity:0}}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 18px}
@media (max-width:639px){.tabs{flex-wrap:nowrap;overflow-x:auto;margin:6px -16px 16px;padding:0 16px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs button{flex:none}}
.tabs button{white-space:nowrap;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;color:var(--ink-2)}
.tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.prods{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.prods{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.prods{grid-template-columns:repeat(4,1fr)}}
.prod{background:#fff;border-radius:var(--r-m);padding:18px 18px 16px;border:1.5px solid var(--line);position:relative;transition:border-color .2s,transform .2s,opacity .2s}
.prod[hidden]{display:none}
.prod.on{border-color:var(--ink);transform:translateY(-3px)}
.prod .no{position:absolute;right:14px;top:14px;font-family:var(--f-latin);font-weight:800;font-size:13px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff}
.prod .sw{width:34px;height:34px;border-radius:12px 12px 14px 14px;position:relative;margin-bottom:12px}
.prod .sw::before,.prod .sw::after{content:"";position:absolute;top:-6px;width:12px;height:12px;background:inherit;clip-path:polygon(50% 0,100% 100%,0 100%)}
.prod .sw::before{left:3px}.prod .sw::after{right:3px}
.prod .nm{font-family:var(--f-latin);font-weight:800;letter-spacing:.04em;font-size:17px;margin:0}
.prod .cat{font-size:13px;color:var(--ink-3);margin:0 0 8px}
.prod p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.65}
.prod .when{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.w-am{background:var(--pink-s);color:var(--pink-d)}.w-noon{background:var(--peach-s);color:var(--peach-d)}.w-pm{background:var(--lav-s);color:var(--lav-d)}
@media (max-width:639px){
  .prod{padding:16px 46px 14px 68px}
  .prod .sw{position:absolute;left:18px;top:24px;margin:0}
  .prod .when{position:absolute;right:10px;top:48px;margin:0;padding:3px 8px}
}
.fine{font-size:12px;color:var(--ink-3);margin:16px 0 0}

/* ---------- 패키지 ---------- */
.pkg{background:var(--paper)}
.pkgs{display:grid;gap:16px}
@media (min-width:860px){.pkgs{grid-template-columns:repeat(3,1fr);gap:20px}}
.card{border-radius:var(--r-l);overflow:hidden;background:#fff;border:2px solid var(--bd,var(--line))}
.card .pic{aspect-ratio:4/3;display:grid;place-items:center;background:#fff;overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:contain}
.card .tx{padding:18px 22px 22px;text-align:center}
.card h3{margin:0;font-size:21px}
.card .tx p{margin:4px 0 0;color:var(--cd,var(--ink-2));font-weight:700;font-size:15px}
.card.lav{--bd:var(--lav-s);--cd:var(--lav-d)}.card.pink{--bd:var(--pink-s);--cd:var(--pink-d)}.card.mint{--bd:var(--mint-s);--cd:var(--mint-d)}
.pkg-note{margin:24px auto 0;max-width:44em;text-align:center;background:var(--mint-s);border-radius:999px;padding:14px 24px;font-size:15px}
@media (max-width:560px){.pkg-note{border-radius:var(--r-m)}}

/* ---------- 참 & 오미야게 ---------- */
.charm-grid{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.charm-grid{grid-template-columns:.85fr 1.15fr;gap:56px}}
.charm-pic{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow);max-width:420px;margin:0 auto;rotate:2deg}
.points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.points li{display:grid;grid-template-columns:40px 1fr;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-m);padding:16px 18px}
.points .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--f-latin);font-weight:800}
.points h3{margin:0;font-size:18px}
.points p{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.for2{display:grid;gap:12px;margin-top:20px}
@media (min-width:560px){.for2{grid-template-columns:1fr 1fr}}
.for2 div{border-radius:var(--r-m);padding:16px 18px}
.for2 b{display:block;font-size:13px;letter-spacing:.04em}
.for2 span{font-weight:700;font-size:17px}

/* ---------- SNS ---------- */
.sns{background:linear-gradient(180deg,var(--cream),var(--pink-s))}
.sns-box{background:#fff;border-radius:36px;padding:44px 22px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hash{font-family:var(--f-latin);font-weight:800;font-size:clamp(40px,11vw,88px);letter-spacing:-.03em;line-height:1;margin:0 0 6px;background:linear-gradient(90deg,var(--pink),var(--lav),var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0 26px}
.chips span{font-size:14px;padding:6px 14px;border-radius:999px;background:var(--cream);border:1px solid var(--line)}
.social{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;padding:10px 18px;border-radius:999px;background:var(--ink);color:#fff}
.soon{display:inline-block;font-size:14px;color:var(--ink-3);border:1.5px dashed var(--line);border-radius:999px;padding:10px 18px}
.shop{margin-top:22px;display:grid;gap:4px;justify-items:center}
.shop b{font-family:var(--f-latin);letter-spacing:.2em;font-size:12px;color:var(--ink-3)}

/* ---------- 바닥 ---------- */
.ftr{background:var(--ink);color:rgba(255,255,255,.75);padding:48px 0 110px;font-size:14px}
@media (min-width:860px){.ftr{padding-bottom:48px}}
.ftr .logo{color:#fff}
.ftr .slg{margin:14px 0 18px;color:#fff;font-weight:700}
.ftr .langs{margin:0;background:transparent;border-color:rgba(255,255,255,.2);display:inline-flex}
.ftr .langs a{color:rgba(255,255,255,.6)}.ftr .langs a[aria-current="true"]{background:#fff;color:var(--ink)}
.ftr small{display:block;margin-top:18px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.5)}

/* ---------- 홈: 페이지 바로가기 ---------- */
.tiles-sec{padding-bottom:8px!important}
.tiles{display:grid;gap:12px}
.tile{position:relative;display:grid;grid-template-columns:92px 1fr 20px;gap:14px;align-items:center;padding:10px 14px 10px 10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.tile:hover{transform:translateY(-3px)}
.tile .pic{width:92px;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--pink-s)}
.tile .pic.mint{background:var(--mint-s)}.tile .pic.lav{background:var(--lav-s)}.tile .pic.peach{background:var(--peach-s)}
.tile .pic img{width:100%;height:100%;object-fit:cover}
.t-lineup .pic img{object-position:30% 50%}
.t-lucky .pic span{width:30%;margin:0 -1px}.t-lucky .pic svg{display:block;width:100%}
.tile.t-omikuji .pic{background:var(--lav-d)}
.kichi{writing-mode:vertical-rl;color:#fff;font-size:30px;font-weight:800;letter-spacing:.1em;line-height:1}
.tile .en{font-family:var(--f-latin);font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--ink-3);margin:0}
.tile h3{margin:2px 0;font-size:19px;line-height:1.35}
.tile .tx p:last-child{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.tile>svg{width:20px;height:20px;color:var(--ink-3)}
@media (min-width:860px){
  .tiles{grid-template-columns:repeat(3,1fr);gap:22px}
  .tile{grid-template-columns:1fr;align-content:start;padding:12px 12px 22px}
  .tile .pic{width:100%;aspect-ratio:4/3}
  .t-lucky .pic span{width:24%}.kichi{font-size:46px}
  .tile .tx{padding:4px 36px 0 8px}
  .tile>svg{position:absolute;right:20px;bottom:24px}
}

/* ---------- 하위 페이지 끝: 다음 페이지 ---------- */
.nextpg-sec{padding:8px 0 96px}
@media (min-width:860px){.nextpg-sec{padding:16px 0 112px}}
.nextpg{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:560px;margin:0 auto;padding:18px 24px;border-radius:var(--r-l);background:var(--ink);color:#fff;text-decoration:none;transition:transform .2s}
.nextpg:hover{transform:translateY(-2px)}
.nextpg .k{display:block;font-family:var(--f-latin);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.nextpg b{font-size:20px}
.nextpg svg{width:24px;height:24px;flex:none}

/* 휴대폰 아래 고정 버튼 */
.fab{position:fixed;left:16px;right:16px;bottom:14px;z-index:60;display:flex;justify-content:center;transition:transform .3s,opacity .3s}
.fab .btn{width:100%;max-width:420px;background:var(--pink-d);color:#fff;box-shadow:0 14px 30px -10px rgba(201,70,111,.7)}
.fab.hide{transform:translateY(120%);opacity:0;pointer-events:none}
@media (min-width:860px){.fab{display:none}}

/* 언어 권유 */
.langtip{position:fixed;top:72px;right:12px;left:12px;z-index:70;max-width:340px;margin-left:auto;background:#fff;border:1.5px solid var(--ink);border-radius:16px;padding:12px 14px;display:none;align-items:center;gap:10px;font-size:14px;box-shadow:var(--shadow)}
.langtip.on{display:flex}
.langtip a{font-weight:700;color:var(--pink-d)}
.langtip button{margin-left:auto;border:0;background:none;font-size:20px;line-height:1;padding:4px;color:var(--ink-3)}

/* ================= 매대 POP 스티커 결: 위 뼈대 위에 덧입힌다 ================= */
body{background:var(--cream) radial-gradient(rgba(23,20,18,.13) 1.2px,transparent 1.6px) 0 0/18px 18px}
.h2,.story-q,.h1sub,.nyan h3,.moment h3,.card h3,.points h3,.slip .rank,.slip .who,.pop,
html:lang(ko) .h2,html:lang(ko) .h1sub,html:lang(ko) .card h3,html:lang(ko) .nyan h3{font-family:var(--f-head);font-weight:400}
.h2{line-height:1.35;letter-spacing:0}
.h1 b{font-weight:800}

/* 머리 */
.hdr{background:var(--yel);border-bottom:var(--bd)}
.hdr.scrolled{border-bottom-color:var(--ink)}
.langs{border:2px solid var(--ink)}
.langs a{color:var(--ink)}
.nav a{color:var(--ink)}
.nav a:hover{background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.subnav a{border:2px solid var(--ink);color:var(--ink);font-weight:700}

/* 히어로: 분홍 별 폭발 위의 고양이 */
.hero::before{background:none}
/* 히어로: 고양이에 시선이 모이게. 크기, 대비, 말풍선, 움직임으로 끈다.
   가운데에서 뻗는 햇살 줄무늬나 둥근 것 뒤의 뾰족한 폭발 모양은 쓰지 않는다(욱일기 연상 금지, 2026-11-02) */
.hero-art{isolation:isolate}
.hero-art::before,.hero-art::after{content:"";position:absolute;border:var(--bd);animation:blob 9s ease-in-out infinite}
/* 분홍 물방울무늬 덩어리와 그 뒤 민트 덩어리. 비대칭으로 천천히 모양이 바뀐다 */
.hero-art::before{inset:-8% -11% -9% -9%;background:radial-gradient(#fff 17%,transparent 19%) 0 0/30px 30px,var(--pink);box-shadow:var(--hard);z-index:-1}
.hero-art::after{inset:-2% -17% -15% -3%;background:var(--mint);z-index:-2;animation-duration:12s;animation-direction:reverse}
@keyframes blob{0%,100%{border-radius:46% 54% 42% 58%/55% 45% 55% 45%}50%{border-radius:57% 43% 58% 42%/44% 56% 43% 57%}}
/* 고양이: 흰 테두리를 남기고 오려 낸 스티커, 가끔 통 튀어 오른다 */
.hero-art img{mix-blend-mode:normal;aspect-ratio:1;object-fit:cover;object-position:50% 62%;background:#fff;border-radius:47% 53% 50% 50%/52% 48% 52% 48%;
  box-shadow:0 0 0 7px #fff,0 0 0 10px var(--ink),8px 8px 0 10px var(--ink);animation:boing 3.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes boing{0%,62%,100%{transform:none}70%{transform:translateY(-12px) rotate(-3deg)}78%{transform:scale(1.05,.95)}86%{transform:translateY(-4px) rotate(1deg)}}
/* 고양이 말풍선: 꼬리가 고양이를 가리킨다 */
.hero-say{position:absolute;left:-16%;top:4%;z-index:3;background:#fff;border:var(--bd);border-radius:20px;box-shadow:4px 4px 0 var(--ink);padding:8px 16px;font-family:var(--f-hand);font-size:clamp(15px,2vw,22px);line-height:1.3;white-space:nowrap;rotate:-7deg;animation:say 2.6s ease-in-out infinite}
.hero-say::after{content:"";position:absolute;right:26px;bottom:-9px;width:15px;height:15px;background:#fff;border-right:var(--bd);border-bottom:var(--bd);transform:rotate(45deg)}
@keyframes say{0%,100%{scale:1}50%{scale:1.07}}
/* 하트가 고양이 옆에서 둥실 떠오른다 */
.heart{position:absolute;width:30px;height:30px;color:var(--pink);z-index:3;animation:floaty 3.8s ease-in-out infinite}
.heart.hr1{right:-6%;top:40%}.heart.hr2{right:4%;top:62%;width:22px;height:22px;color:var(--lav);animation-delay:1.3s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-8deg);opacity:1}50%{transform:translateY(-16px) rotate(8deg);opacity:.85}}
.eyebrow{color:var(--ink);font-weight:800}
.kana{color:var(--ink-2);font-weight:700}
.slogan{background:#fff;color:var(--pink-d);border:var(--bd);box-shadow:4px 4px 0 var(--ink);transform:rotate(-1.5deg)}
.btn{border:var(--bd);box-shadow:4px 4px 0 var(--ink);font-weight:800}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-ink{background:var(--yel);color:var(--ink)}
.btn-ink:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-1px,-1px)}
.btn-line{background:#fff;border:var(--bd)}
.badge-soon{background:var(--mint);color:var(--ink);border:var(--bd);box-shadow:3px 3px 0 var(--ink);transform:rotate(12deg);font-size:13px}
.spark{color:var(--ink)!important}

/* 흐르는 띠 */
.marquee{background:var(--pink);border-top:var(--bd);border-bottom:var(--bd);transform:rotate(-2deg);margin:-10px -12px 0}
.marquee-in{font-weight:800;font-size:16px}
.marquee-in i{color:var(--yel)}

/* 꼬리표: 스티커 */
.tag{color:var(--ink)!important;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:999px;transform:rotate(-3deg);padding:6px 14px}
.tag.pink{background:var(--pink-s)}.tag.mint{background:var(--mint-s)}.tag.lav{background:var(--lav-s)}.tag.peach{background:var(--peach-s)}.tag.gold{background:var(--yel)}
.lead{color:var(--ink-2)}

/* 이야기 */
.story-art{border:var(--bd);box-shadow:8px 8px 0 var(--ink);rotate:-3deg;border-radius:var(--r-l)}
.story-art img{border-radius:10px}
.formula span{border:2px solid var(--ink)}
.formula .x{border:0}
.formula .eq{background:var(--ink);color:var(--yel)}

/* 고양이의 하루 */
.day{background:#fff;border-top:var(--bd);border-bottom:var(--bd)}
.moment{border:var(--bd);box-shadow:var(--hard)}
.moment:nth-child(odd){rotate:-1.2deg}.moment:nth-child(even){rotate:1.2deg}
.moment .goes{border:2px solid var(--ink)}

/* 럭키 3종 */
.pop{background:var(--yel);border:var(--bd);box-shadow:4px 4px 0 var(--ink);color:var(--ink);font-size:clamp(18px,4.6vw,24px)}
.nyan{border:var(--bd);box-shadow:var(--hard)}
.nyan.picked{border-color:var(--ink);box-shadow:9px 9px 0 var(--cd);transform:translate(-3px,-3px)}
.nyan h3{font-size:26px}
.spec{border:2px solid var(--ink)}
.dots i{background:#fff;border:1.5px solid var(--ink);height:9px}
.dots i.on{background:var(--ink)}

/* 냥미쿠지 */
.omi{background:var(--lav-d);border-top:var(--bd);border-bottom:var(--bd)}
.omi::before{opacity:.12}
.omi .tag.gold{color:var(--ink)!important}
.omi-box .box{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.omi-box .box::before{border:3px solid var(--ink)}
.omi-box .label{border:2.5px solid var(--ink)}
.slip{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.slip::before{display:none}
.slip dl{border:2px solid var(--ink)}

/* 라인업 */
.shot{border:var(--bd);box-shadow:var(--hard)}
.hot{background:var(--yel);color:var(--ink);border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.hot::after{border-color:var(--ink)}
.hot:hover,.hot.on{background:var(--pink);color:#fff}
.tabs button{border:2px solid var(--ink);color:var(--ink)}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--yel)}
.prod{border:var(--bd)}
.prod.on{border-color:var(--ink);box-shadow:5px 5px 0 var(--pink);transform:translate(-2px,-2px)}
.prod .no{background:var(--yel);color:var(--ink);border:2px solid var(--ink)}
.prod .sw{outline:2px solid var(--ink)}
.prod .when{border:1.5px solid var(--ink)}

/* 패키지, 참 */
.pkg{background:#fff;border-top:var(--bd)}
.card{border:var(--bd);box-shadow:var(--hard)}
.card .pic{border-bottom:var(--bd)}
.pkg-note{background:var(--yel);border:var(--bd);box-shadow:4px 4px 0 var(--ink)}
.charm-pic{border:var(--bd);box-shadow:8px 8px 0 var(--ink)}
.points li{border:var(--bd);box-shadow:4px 4px 0 var(--ink)}
.points .n{border:2px solid var(--ink)}
.for2 div{border:var(--bd)}

/* SNS, 바닥 */
.sns{background:var(--pink-s);border-top:var(--bd)}
.sns-box{border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.hash{background:none;color:var(--pink);-webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--ink)}
.chips span{border:2px solid var(--ink);background:#fff;font-weight:700}
.social a{border:var(--bd);box-shadow:3px 3px 0 var(--ink)}
.soon{border:2px dashed var(--ink);color:var(--ink-2)}
.ftr .langs{border-color:rgba(255,255,255,.4)}
.ftr .langs a[aria-current="true"]{background:var(--yel)}
.fab .btn{background:var(--pink-d);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.langtip{border:var(--bd);box-shadow:var(--hard)}
@media (max-width:859px){
  .hero-art{margin:34px auto 36px}
  .hero-say{left:-34%;top:-8%;font-size:13px;padding:5px 11px;border-radius:14px}.hero-say::after{right:18px;width:11px;height:11px;bottom:-7px}
  .heart.hr1{right:-20%}.heart.hr2{right:-10%}
  .story-art{rotate:-1.5deg;max-width:300px}
}
/* 지금 페이지 메뉴, 홈 바로가기, 다음 페이지 */
.nav a[aria-current="page"]{background:var(--ink);color:var(--yel);box-shadow:none}
.subnav a[aria-current="page"]{background:var(--ink);color:var(--yel)}
.tile{border:var(--bd);box-shadow:var(--hard)}.tile .pic{border:2px solid var(--ink)}
.tile h3,.kichi{font-family:var(--f-head);font-weight:400}
.nextpg{background:var(--yel);color:var(--ink);border:var(--bd);box-shadow:var(--hard)}

/* ---------- POP 강화(2026-11-02): 형광펜 제목, 말풍선, 별 폭발 딱지, 마스킹 테이프, 손글씨 ---------- */
/* 형광펜: build.py가 제목(.h2) 안을 .mk로 감싼다 */
.mk{background:linear-gradient(transparent 58%,var(--yel) 58%,var(--yel) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
.omi .mk{background:linear-gradient(transparent 60%,var(--pink-d) 60%,var(--pink-d) 92%,transparent 92%)}
/* 꼬리표: 오려 낸 스티커처럼 흰 테두리 */
.tag{box-shadow:0 0 0 3px #fff,4px 4px 0 3px var(--ink)}
.hero .h1{text-shadow:4px 4px 0 var(--pink)}

/* COMING SOON: 구멍 뚫린 노란 가격표 스티커 */
.badge-soon{right:-8%;top:2%;background:var(--yel);color:var(--ink);border:var(--bd);border-radius:8px;box-shadow:3px 3px 0 var(--ink);padding:7px 12px 7px 26px;font-size:12px;letter-spacing:.1em;white-space:nowrap;animation:bob 3.2s ease-in-out infinite}
.badge-soon::before{content:"";position:absolute;left:9px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--cream);border:2px solid var(--ink)}
@keyframes bob{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(6deg) translateY(-4px)}}
@media (max-width:859px){.badge-soon{right:-34%;top:-2%;font-size:10px;padding:5px 9px 5px 21px}.badge-soon::before{left:7px;width:7px;height:7px;margin-top:-3.5px}}
/* 뽑기 버튼은 가끔 흔들어 눈길을 끈다 */
.hero .btn-ink,.fab .btn{animation:nudge 3.6s ease-in-out infinite}
@keyframes nudge{0%,80%,100%{rotate:0deg}84%{rotate:-3deg}88%{rotate:3deg}92%{rotate:-2deg}96%{rotate:1deg}}

/* 말풍선: 슬로건, 이야기 첫 물음, 럭키 3종의 한마디 */
.slogan,.story-q,.nyan .line{position:relative;font-family:var(--f-hand);font-weight:400}
.slogan{letter-spacing:.04em}
.story-q{display:inline-block;background:#fff;border:var(--bd);border-radius:22px;padding:10px 18px;box-shadow:4px 4px 0 var(--ink);margin:0 0 24px;rotate:-1.5deg;font-size:clamp(18px,4.6vw,23px);line-height:1.5}
.slogan::after,.story-q::after,.nyan .line::after{content:"";position:absolute;left:34px;bottom:-9px;width:15px;height:15px;margin:0;background:#fff;border-right:var(--bd);border-bottom:var(--bd);transform:rotate(45deg);font-size:0;line-height:0}
.nyan{display:flex;flex-direction:column}
.nyan .line{order:-1;align-self:center;background:#fff;border:var(--bd);border-radius:18px;padding:8px 16px;margin:0 0 18px;font-size:16px;line-height:1.45;box-shadow:3px 3px 0 var(--ink);rotate:-2deg}
.nyan .line::before{content:none}
.nyan .line::after{left:50%;margin-left:-8px}
.nyan .line .tr{display:block;font-family:var(--f-body);font-size:12px;color:var(--ink-3);margin-top:2px}
.pop{font-family:var(--f-hand);font-size:clamp(20px,5.4vw,28px)}
.nyan .q{font-family:var(--f-hand);font-size:17px}
@media (min-width:860px){.nyan:nth-child(1){rotate:-1.5deg}.nyan:nth-child(3){rotate:1.5deg}}

/* 마스킹 테이프: 사진과 메모 */
.story-art,.charm-pic,.lucky-note{position:relative;overflow:visible}
.charm-pic img{border-radius:calc(var(--r-l) - 3px)}
.story-art::after,.charm-pic::after,.lucky-note::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:26px;margin-left:-48px;background:repeating-linear-gradient(-45deg,rgba(255,92,147,.85) 0 7px,rgba(255,255,255,.85) 7px 14px);rotate:-5deg;z-index:2}
.lucky-note{background:#fff;border:var(--bd);box-shadow:var(--hard);border-radius:6px;padding:18px 20px 16px;margin-top:40px;rotate:-1deg;font-family:var(--f-hand);font-size:16px;color:var(--ink);max-width:32em}

/* 냥미쿠지: 상자 뒤 노란 물방울무늬 덩어리로 시선을 모은다(방사형 무늬 금지) */
.omi-stage{position:relative}
.omi-stage::before{content:"";position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-160px 0 0 -150px;border:var(--bd);box-shadow:var(--hard);
  background:radial-gradient(rgba(85,48,208,.22) 17%,transparent 19%) 0 0/28px 28px,var(--yel);animation:blob 9s ease-in-out infinite}
.omi-stage>*{position:relative;z-index:1}
.omi-hint{font-family:var(--f-hand);font-size:16px;color:#fff;background:var(--ink);border-radius:999px;padding:4px 16px}
.slip .rank{font-family:var(--f-head);font-weight:400}
/* 한국어 페이지 안의 일본어(大吉, 냥 한마디)는 한국어 POP 글꼴에 없는 글자라 일본어 POP 글꼴로 */
.slip .rank:lang(ja){font-family:"Dela Gothic One","Zen Maru Gothic",sans-serif}
.nyan .line [lang="ja"]{font-family:"Yusei Magic","Zen Maru Gothic",sans-serif}
.slip .who{font-family:var(--f-hand);font-weight:400;font-size:19px}

/* 스티커처럼 살짝씩 기울이기 */
.tile:nth-child(odd){rotate:-.8deg}.tile:nth-child(even){rotate:.8deg}
.tile:hover{rotate:0deg;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.tile .en{display:inline-block;background:var(--yel);border:1.5px solid var(--ink);border-radius:999px;padding:1px 8px;color:var(--ink);font-size:10px;letter-spacing:.14em}
.chips span:nth-child(odd){rotate:-2deg}.chips span:nth-child(even){rotate:2deg}
.prod .when{border:1.5px solid var(--ink);rotate:-4deg;font-family:var(--f-hand);font-weight:400;font-size:13px}
.marquee-in{font-family:var(--f-head);font-weight:400;font-size:17px;letter-spacing:.06em}

/* 다음 페이지 */
.nextpg .k{font-family:var(--f-hand);font-size:15px;letter-spacing:.04em;text-transform:none;opacity:1}
.nextpg b{font-family:var(--f-head);font-weight:400;font-size:22px}
.nextpg svg{animation:poke 1.4s ease-in-out infinite}
@keyframes poke{50%{translate:5px 0}}

/* ---------- 라인업 행운의 쪽지(2026-11-02): 번호를 누르면 고양이 스티커로 봉한 쪽지가 튀어나와 위아래로 펼쳐진다 ---------- */
.hot{cursor:pointer}
html:has(.lnote[open]){overflow:hidden}
.lnote{--c:var(--pink);--cd:var(--pink-d);--cs:var(--pink-s);border:0;padding:0;background:none;overflow:visible;max-width:none;max-height:none;color:var(--ink)}
.lnote::backdrop{background:rgba(23,20,18,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ln-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 0}
.ln-wrap.ln-popin{animation:ln-pop .55s cubic-bezier(.3,1.5,.5,1) both}
@keyframes ln-pop{from{transform:translateY(60px) scale(.3) rotate(-24deg);opacity:0}}
/* 종이: 접힌 동안은 작고 납작하게 기울어 있다가 펼치면 제자리 */
.ln-paper{position:relative;width:min(340px,86vw);background:#fff radial-gradient(rgba(23,20,18,.07) 1px,transparent 1.4px) 0 0/14px 14px;border:var(--bd);border-radius:18px;box-shadow:6px 6px 0 var(--ink);
  perspective:900px;transform:scale(.62,.46) rotate(-5deg);transition:transform .6s cubic-bezier(.3,1.35,.5,1) .12s;cursor:pointer}
.lnote.is-open .ln-paper{transform:none;cursor:default}
.lnote:not(.is-open) .ln-paper{animation:ln-jiggle 1.6s ease-in-out .6s infinite}
@keyframes ln-jiggle{0%,70%,100%{rotate:0deg}78%{rotate:-4deg}86%{rotate:4deg}94%{rotate:-2deg}}
/* 위아래 날개: 물방울 대신 발바닥 무늬, 펼치면 뒤로 젖혀져 사라진다 */
.ln-flap{position:absolute;left:-2.5px;right:-2.5px;height:calc(50% + 2.5px);z-index:2;border:var(--bd);background:var(--paws) 0 0/58px 58px,var(--c);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .55s cubic-bezier(.5,0,.3,1) .18s,opacity .2s .55s}
.ln-top{top:-2.5px;border-radius:18px 18px 6px 6px;transform-origin:50% 0}
.ln-bot{bottom:-2.5px;border-radius:6px 6px 18px 18px;transform-origin:50% 100%;background-position:29px 29px,0 0}
.lnote.is-open .ln-top{transform:rotateX(180deg);opacity:0}
.lnote.is-open .ln-bot{transform:rotateX(-180deg);opacity:0}
/* 고양이 봉인 스티커: 먼저 톡 떨어진다 */
.ln-seal{position:absolute;left:50%;top:50%;width:84px;height:72px;margin:-38px 0 0 -42px;z-index:3;border:0;background:none;padding:0;color:var(--cd);filter:drop-shadow(3px 3px 0 var(--ink));transition:transform .3s ease,opacity .3s ease}
.ln-seal svg{width:100%;height:100%;display:block}
.lnote.is-open .ln-seal{transform:translateY(-30px) rotate(30deg) scale(.4);opacity:0;pointer-events:none}
.ln-tap{margin:0;font-family:var(--f-hand);color:#fff;font-size:16px;background:var(--ink);border-radius:999px;padding:4px 16px;transition:opacity .2s}
.lnote.is-open .ln-tap{opacity:0}
/* 안쪽 내용: 날개가 열릴 때 나타난다 */
.ln-in{position:relative;z-index:1;padding:22px 22px 20px;opacity:0;transition:opacity .3s .45s}
.lnote.is-open .ln-in{opacity:1}
.ln-paper::before{content:"";position:absolute;top:-15px;left:50%;width:96px;height:26px;margin-left:-48px;z-index:4;rotate:-4deg;opacity:0;transition:opacity .3s .7s;
  background:repeating-linear-gradient(-45deg,rgba(255,92,147,.85) 0 7px,rgba(255,255,255,.85) 7px 14px)}
.lnote.is-open .ln-paper::before{opacity:1}
.ln-k{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;font-family:var(--f-latin);font-weight:800;font-size:11px;letter-spacing:.2em;color:var(--cd)}
.ln-no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--yel);border:2px solid var(--ink);color:var(--ink);letter-spacing:0;font-size:13px}
.ln-pic{aspect-ratio:5/3;border:2px solid var(--ink);border-radius:12px;background:#fff url(img/lineup.jpg) no-repeat;margin:0 0 14px}
.ln-nm{margin:0;font-family:var(--f-latin);font-weight:800;font-size:24px;letter-spacing:.02em;line-height:1.2}
.ln-cat{margin:2px 0 10px;font-size:13px;color:var(--ink-3)}
.ln-desc{margin:0 0 14px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.ln-msg{background:var(--cs);border:2px dashed var(--cd);border-radius:12px;padding:10px 14px;rotate:-1deg;margin-bottom:12px}
.ln-msg b{display:block;font-size:12px;color:var(--cd);letter-spacing:.04em}
.ln-msg p{margin:2px 0 0;font-family:var(--f-hand);font-size:17px;line-height:1.45}
.ln-in .when{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;border:1.5px solid var(--ink);font-family:var(--f-hand)}
.ln-nav{display:flex;gap:10px;opacity:0;transition:opacity .25s .6s}
.lnote.is-open .ln-nav{opacity:1}
.ln-nav button{min-width:46px;height:44px;padding:0 16px;border-radius:999px;background:#fff;border:var(--bd);box-shadow:3px 3px 0 var(--ink);font-weight:800;font-size:15px}
.ln-nav .ln-close{background:var(--yel)}
.ln-nav button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@media (prefers-reduced-motion:reduce){.ln-paper,.ln-flap,.ln-in,.ln-nav,.ln-seal{transition:none}}

/* 나타나기 */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}