/* 얌얌버스 통합 첫 페이지(2026-10-15) — 위 우주 배너 + 세계 요리 코스 카드 + 내 레시피로 만들기 카드 + 카카오톡 채널 */
:root{--cream:#FFF4E2;--paper:#FFFBF4;--ink:#3A2314;--ink2:#7A5A44;--line:#E9D6BC;--tomato:#E5482E;--tomato-d:#B9331E;--mustard:#F4B63F;--leaf:#3C9E5F;--f-disp:Jua,"Noto Sans KR",system-ui,sans-serif;--f-body:"Noto Sans KR",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
.home{max-width:480px;margin:0 auto;padding-bottom:max(24px,env(safe-area-inset-bottom))}
/* 위 배너(제작 페이지 첫 화면과 같은 우주 그림·로고) */
.cos{position:relative;height:430px;overflow:hidden;background:#170d33}
.cos .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:czoom 16s ease-in-out infinite alternate}
.cos .g{position:absolute;left:18%;width:64%;top:31%;opacity:0;animation:gcycle 16s infinite}
.cos .g2{animation-delay:4s}.cos .g3{animation-delay:8s}.cos .g4{animation-delay:12s}
.ctop{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:10px 16px;z-index:5}
.ctop .sp{flex:1}
.logo{display:flex;align-items:center;gap:6px;color:#fff}
.logo img{width:30px;height:30px;border-radius:8px;border:2px solid #fff}
.brand{font-family:"Black Han Sans",var(--f-disp);font-size:20px;letter-spacing:.3px}
.brand i{font-style:normal;color:var(--mustard)}.brand i:after{content:"✦";font-size:11px;vertical-align:top;margin-left:1px;color:var(--mustard)}
.beta{font-family:var(--f-disp);font-size:11px;color:var(--ink);background:var(--mustard);border-radius:99px;padding:2px 7px;margin-left:2px}
.langBtn{font-family:var(--f-disp);border:2px solid #fff;color:#fff;background:#170d3388;border-radius:99px;padding:4px 12px;font-size:13px}
.head{position:absolute;left:12px;right:12px;top:52px;text-align:center;z-index:4}
.title{font-family:"Black Han Sans",var(--f-disp);font-weight:400;line-height:1.02;letter-spacing:-.5px;font-size:40px;color:#fff;margin:0;text-wrap:balance;text-shadow:0 3px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),0 7px 0 var(--ink)}
.title em{font-style:normal;color:var(--mustard)}
.en .title{font-size:33px}
.head p{display:inline-block;margin:10px 0 0;color:#fff;font-weight:700;font-size:13px;background:#170d33cc;border-radius:999px;padding:3px 12px}
.pick{position:absolute;left:0;right:0;bottom:12px;text-align:center;z-index:4;font-family:var(--f-disp);color:#fff;font-size:16px;text-shadow:0 2px 0 #170d33}
/* 카드 */
.card{display:block;margin:14px 16px 0;border:3px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink);overflow:hidden;position:relative}
.card.first{margin-top:18px}
.card.w{background:linear-gradient(#bfe6ff,#e9f6ff 60%,#fff)}
.card.m{background:var(--paper)}
.tag{display:inline-block;font-family:var(--f-disp);font-size:12px;border-radius:99px;padding:3px 10px;border:2px solid var(--ink)}
.t-free{background:var(--leaf);color:#fff}.t-beta{background:var(--mustard)}
.ch{padding:14px 16px 0;position:relative;z-index:2}
.ch h2{font-family:"Black Han Sans",var(--f-disp);font-weight:400;font-size:27px;margin:8px 0 0}
.ch p{font-family:var(--f-disp);color:var(--ink2);font-size:15px;margin:4px 0 0;line-height:1.4}
.plane{position:absolute;right:-8px;top:8px;width:118px;transform:rotate(-8deg);animation:bob 3.2s ease-in-out infinite}
.strip{overflow:hidden;padding:6px 0 0}
.strip .run{display:flex;gap:2px;width:max-content;animation:slide 36s linear infinite}
.strip img{width:84px;height:84px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 0 #3A231422)}
.rank{display:flex;align-items:center;gap:8px;margin:8px 16px 0;background:#fff;border:2px dashed var(--line);border-radius:14px;padding:8px 10px;min-height:56px;font-family:var(--f-disp);font-size:14px}
.rank>img{width:30px;flex:none}
.rank .rt{flex:1;min-width:0;transition:opacity .35s}
.rank .rt.out{opacity:0}
.rank small{display:block;color:var(--ink2);font-size:12px}
.rank b{font-weight:400;font-size:16px}
.rank .sc{color:var(--tomato)}
.rank .nk{display:inline-block;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.btn{display:block;margin:12px 16px 16px;text-align:center;font-family:var(--f-disp);font-size:20px;color:#fff;background:var(--tomato);border:3px solid var(--ink);border-radius:16px;padding:12px;box-shadow:0 4px 0 var(--tomato-d)}
.btn.g{background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--line)}
.card:active .btn{transform:translateY(2px);box-shadow:0 2px 0 var(--tomato-d)}
.card.m:active .btn{box-shadow:0 2px 0 var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px 0}
.steps div{background:#fff;border:2px solid var(--line);border-radius:14px;text-align:center;padding:8px 4px;font-family:var(--f-disp);font-size:13px}
.steps img{width:58px;height:58px;object-fit:contain;display:block;margin:0 auto 4px}
.steps b{display:block;color:var(--tomato);font-size:12px;font-weight:400}
.kakao{margin:18px 16px 0;background:#FEE500;border:3px solid var(--ink);border-radius:20px;padding:14px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 5px 0 var(--ink)}
.kakao img{width:62px;flex:none}
.kakao h3{font-family:var(--f-disp);font-weight:400;font-size:19px;margin:0}
.kakao p{font-size:13px;color:#5a4a00;margin:2px 0 0}
.kakao .kb{margin-left:auto;font-family:var(--f-disp);background:var(--ink);color:#FEE500;border-radius:12px;padding:9px 11px;font-size:14px;white-space:nowrap}
.foot{text-align:center;color:var(--ink2);font-size:12px;padding:22px 0 8px}
.foot a{text-decoration:underline}
@keyframes czoom{to{transform:scale(1.1)}}
@keyframes gcycle{0%{opacity:0;transform:translateY(24px) scale(.92)}4%{opacity:1;transform:translateY(0) scale(1)}12%{transform:translateY(-8px)}22%{opacity:1;transform:translateY(0)}25%,100%{opacity:0}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes bob{50%{transform:rotate(-8deg) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.cos .bg,.strip .run,.plane{animation:none}.cos .g{animation:none;opacity:0}.cos .g1{opacity:1}}
.w .ch h2{padding-right:96px}