:root{
    --cream:#FFF6EE;
    --cream2:#FFEFE2;
    --pink:#FFD9E2;
    --pink2:#FFB7C9;
    --berry:#E8334A;
    --berry-deep:#C21F35;
    --ice:#A8E3EE;
    --ice2:#D9F4F9;
    --mango:#FFC93C;
    --grape:#5B3A86;
    --choco:#2A1A12;
    --white:#FFFFFF;
    --maxw:min(1880px, 96vw);
    --line:3px solid var(--choco);
    --pop:7px 7px 0 var(--choco);
    --pop-sm:4px 4px 0 var(--choco);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
  body{
    background:var(--cream);
    color:var(--choco);
    font-family:"Pretendard",system-ui,-apple-system,sans-serif;
    line-height:1.6;letter-spacing:-0.01em;
    overflow-x:hidden;word-break:keep-all;overflow-wrap:break-word;
    cursor:default;
  }
  /* 도트 할프톤 배경 */
  .halftone{
    background-image:radial-gradient(rgba(232,51,74,.13) 2.2px, transparent 2.6px);
    background-size:26px 26px;
  }
  .halftone-blue{
    background-image:radial-gradient(rgba(38,150,170,.14) 2.2px, transparent 2.6px);
    background-size:26px 26px;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  section{padding:36px 0;position:relative}
  .disp{font-family:"Jua","Pretendard",sans-serif;font-weight:400}
  h1,h2,h3,.btn,.badge,.chip,.fx-stamp,.ticker span{font-family:"Jua","Pretendard",sans-serif;font-weight:400}
  h2{font-size:clamp(30px,3.4vw,58px);line-height:1.22;letter-spacing:-0.015em}
  h2 .hl{color:var(--berry)}
  h2 .hl-ice{color:#1E93A8}
  p.lead{font-size:clamp(15px,4vw,18px);color:#6B5448;margin-top:12px}
  .rise{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease}
  .rise.in{opacity:1;transform:none}

  /* 만화 스티커 공통 */
  .sticker{
    background:var(--white);border:var(--line);border-radius:20px;
    box-shadow:var(--pop);overflow:hidden;
  }
  .badge{
    display:inline-block;background:var(--mango);border:var(--line);border-radius:999px;
    box-shadow:var(--pop-sm);padding:7px 16px;font-size:14.5px;letter-spacing:.02em;
    transform:rotate(-2deg);
  }
  .chip{
    display:inline-block;background:var(--ice2);border:2.5px solid var(--choco);border-radius:999px;
    padding:2px 10px;font-size:clamp(10.5px,0.75vw,12.5px);
  }

  /* ===== 클릭 효과음 ===== */
  .fx-stamp{
    position:fixed;z-index:9999;pointer-events:none;
    font-size:clamp(28px,6vw,44px);line-height:1;white-space:nowrap;
    -webkit-text-stroke:2px var(--choco);
    text-shadow:3px 3px 0 var(--choco);
    animation:stampPop .48s cubic-bezier(.18,1.7,.35,1) forwards;
    transform-origin:center;
  }
  .fx-burst{
    position:fixed;z-index:9998;pointer-events:none;
    width:86px;height:86px;
    background:var(--mango);border:3px solid var(--choco);
    clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    animation:burstPop .3s ease-out forwards;
  }
  @keyframes stampPop{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(var(--rot))}
    12%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(var(--rot))}
    26%{transform:translate(-50%,-50%) scale(1) rotate(var(--rot))}
    62%{opacity:1}
    100%{opacity:0;transform:translate(-50%,-92%) scale(1.02) rotate(var(--rot))}
  }
  @keyframes burstPop{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(8deg)}
    30%{opacity:.95;transform:translate(-50%,-50%) scale(1.12) rotate(-4deg)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(6deg)}
  }

  /* ===== 사진 필름 띠 ===== */
  .photo-strip{
    overflow:hidden;background:var(--cream2);
    border-bottom:var(--line);padding:14px 0;
  }
  .photo-strip-inner{display:flex;gap:16px;width:max-content;animation:tick 46s linear infinite}
  .photo-strip img{
    height:128px;width:auto;display:block;border-radius:14px;
    border:2.5px solid var(--choco);box-shadow:4px 4px 0 rgba(42,26,18,.18);
  }
  body.fx-off .photo-strip-inner{animation:none}
  @media(max-width:560px){.photo-strip img{height:88px}}
  @media (prefers-reduced-motion: reduce){.photo-strip-inner{animation:none}}

  /* ===== 흐르는 띠 (마퀴) ===== */
  .ticker{
    background:var(--berry);border-top:var(--line);border-bottom:var(--line);
    overflow:hidden;padding:11px 0;transform:rotate(-1deg);width:103%;margin-left:-1.5%;
  }
  .ticker-inner{display:flex;width:max-content;animation:tick 26s linear infinite}
  .ticker span{
    color:var(--cream);font-size:19px;letter-spacing:.06em;padding:0 26px;white-space:nowrap;
  }
  .ticker span b{color:var(--mango);font-weight:400}
  @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ===== HERO ===== */
  .hero{
    min-height:88svh;display:flex;flex-direction:column;justify-content:center;
    padding:96px 0 20px;position:relative;overflow:hidden;
    background:
      radial-gradient(620px 420px at 86% 4%, rgba(168,227,238,.5), transparent 62%),
      radial-gradient(560px 420px at 2% 88%, rgba(255,183,201,.45), transparent 60%),
      var(--cream);
  }
  .hero-grid{display:grid;grid-template-columns:.96fr 1.04fr;gap:24px;align-items:center}
  @media(max-width:840px){.hero-grid{grid-template-columns:1fr}}
  .hero h1{
    font-size:clamp(46px,7.6vw,118px);line-height:1.04;letter-spacing:-0.02em;
  }
  .hero h1 .tang{color:var(--berry);display:inline-block;transform:rotate(-2deg)}
  .hero h1 .huru{color:#1E93A8;display:inline-block;transform:rotate(1.6deg)}
  .hero h1 .small{display:block;font-size:clamp(22px,4.4vw,34px);margin-top:14px;color:var(--choco)}
  .hero .sub{margin-top:18px;font-size:clamp(15.5px,4.2vw,19px);color:#6B5448;max-width:520px}
  .hero .sub b{color:var(--berry);font-weight:700}
  .hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    border:var(--line);border-radius:999px;box-shadow:var(--pop-sm);
    padding:14px 26px;font-size:17.5px;text-decoration:none;color:var(--choco);
    background:var(--mango);transition:transform .12s ease,box-shadow .12s ease;
  }
  .btn.alt{background:var(--ice)}
  .btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--choco)}
  .hero-art{position:relative;min-height:clamp(560px, 58vh, 700px)}
  .hero-main{
    position:absolute;inset:2% 0 auto auto;width:min(88%,720px);
    border:var(--line);border-radius:26px;box-shadow:var(--pop);
    transform:rotate(2deg);overflow:hidden;background:var(--white);
  }
  .hero-main img{width:100%;display:block}
  .hero-float{
    position:absolute;border:var(--line);border-radius:18px;background:var(--white);
    box-shadow:var(--pop-sm);overflow:hidden;width:148px;
    animation:bob 3.6s ease-in-out infinite;
  }
  .hero-float img{width:100%;display:block}
  .hf1{left:-3%;bottom:0;transform:rotate(-5deg);animation-delay:.1s;width:clamp(200px,18vw,280px);border-radius:22px}
  .hf2{left:1%;top:0;transform:rotate(6deg);animation-delay:.8s;width:clamp(110px,9.5vw,150px)}
  .hf3{right:-1%;bottom:-4%;transform:rotate(-4deg);animation-delay:1.5s;width:clamp(112px,9.8vw,155px)}
  @keyframes bob{0%,100%{margin-top:0}50%{margin-top:-12px}}
  .speech{
    position:absolute;left:34%;top:-3%;z-index:3;
    background:var(--white);border:var(--line);border-radius:18px;box-shadow:var(--pop-sm);
    padding:10px 16px;font-family:"Jua";font-size:16px;transform:rotate(-3deg);
    animation:bob 3s ease-in-out infinite;
  }
  .speech::after{
    content:"";position:absolute;left:24px;bottom:-13px;
    border:8px solid transparent;border-top:12px solid var(--choco);
  }
  .click-hint{
    margin-top:22px;display:inline-flex;align-items:center;gap:10px;
    font-size:14px;color:#8A7264;
  }
  .hero .wrap{position:relative;z-index:1}
  .bigword{
    position:absolute;left:-1%;bottom:-2.5%;z-index:0;pointer-events:none;
    font-family:"Jua";font-size:clamp(90px,11vw,210px);line-height:1;white-space:nowrap;
    color:transparent;-webkit-text-stroke:2.5px rgba(232,51,74,.14);
    transform:rotate(-3deg);letter-spacing:.02em;user-select:none;
  }
  .hero-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
  .hero-deco span{
    position:absolute;font-size:clamp(20px,2vw,36px);opacity:.55;
    animation:bob 4s ease-in-out infinite;
  }
  .hd1{left:3%;top:14%;animation-delay:.2s;transform:rotate(-12deg)}
  .hd2{left:46%;top:7%;animation-delay:1.2s;transform:rotate(8deg)}
  .hd3{left:2%;bottom:26%;animation-delay:2s;transform:rotate(10deg);font-size:clamp(16px,1.5vw,26px)}
  .hd4{right:2%;top:42%;animation-delay:.7s;transform:rotate(-8deg)}
  .hd5{left:38%;bottom:9%;animation-delay:1.7s;transform:rotate(-6deg)}
  .hd6{right:30%;bottom:4%;animation-delay:2.5s;transform:rotate(12deg);font-size:clamp(16px,1.5vw,26px)}
  .hero-stats{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
  .hstat{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--white);border:var(--line);border-radius:14px;box-shadow:var(--pop-sm);
    padding:9px 15px;font-family:"Jua";font-size:clamp(13.5px,1vw,16.5px);
  }
  .hstat:nth-child(1){transform:rotate(-1.5deg)}
  .hstat:nth-child(2){transform:rotate(1.2deg)}
  .hstat:nth-child(3){transform:rotate(-1deg)}
  .hstat b{color:var(--berry);font-weight:400}
  /* 과일이 떨어져 꼬치에 꽂히고 → 놀란 표정으로 얼고 → 완성되면 사라지는 무대 (3~5개 랜덤) */
  .skewer-stage{
    position:absolute;top:0;bottom:12px;width:96px;
    z-index:0;pointer-events:none;opacity:.5;filter:blur(.5px);
  }
  .skewer-stick{
    position:absolute;left:50%;bottom:0;transform:translateX(-50%) rotate(1.5deg);
    width:8px;height:172px;background:#D9A050;
    border:2.5px solid var(--choco);border-radius:8px;
  }
  .sk-fruit{
    position:absolute;left:50%;top:-70px;width:44px;height:44px;
    transform:translateX(-50%);
    transition:top 1.5s cubic-bezier(.4,.5,.55,1.12);will-change:top;
  }
  .sk-fruit svg{width:100%;height:100%;display:block;overflow:visible}
  .sk-fruit .face-frozen{display:none}
  .sk-fruit.frozen .face-normal{display:none}
  .sk-fruit.frozen .face-frozen{display:block}
  .sk-fruit.frozen{
    filter:saturate(.62) brightness(1.22) drop-shadow(0 0 6px rgba(140,220,240,.95));
    animation:frostShiver .35s ease-in-out 2;
  }
  @keyframes frostShiver{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-54%) rotate(-4deg)}75%{transform:translateX(-46%) rotate(4deg)}}
  .sk-flake{
    position:absolute;left:50%;font-size:20px;
    transform:translate(-50%,-50%) scale(.4);opacity:0;
    animation:flakePing .65s ease-out forwards;
  }
  @keyframes flakePing{
    30%{opacity:.95;transform:translate(-50%,-50%) scale(1.3)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}
  }
  .skewer-stage.done{animation:skDone .85s ease forwards}
  @keyframes skDone{
    22%{transform:scale(1.07) rotate(-2.5deg)}
    100%{opacity:0;transform:translateY(-34px) scale(.95)}
  }
  @media(max-width:840px){.skewer-stage{display:none}}
  @media (prefers-reduced-motion: reduce){.skewer-stage{display:none}}
  .click-hint .dot{width:9px;height:9px;border-radius:50%;background:var(--berry);animation:pulse 1.5s infinite}
  @keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

  /* ===== 제품 7종 ===== */
  #products, section.halftone-blue, #global{padding:56px 0}
  .prod-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:26px;margin-top:36px;
  }
  @media(max-width:700px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
  .prod{
    position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--choco);
    transition:transform .15s ease;
  }
  .prod:nth-child(odd){transform:rotate(-.8deg)}
  .prod:nth-child(even){transform:rotate(.9deg)}
  .prod:hover{transform:rotate(0) translateY(-7px)}
  .prod .ph{
    background:var(--white);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
    border-bottom:var(--line);
  }
  .prod .ph img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
  .prod:hover .ph img{transform:scale(1.06)}
  .prod .info{padding:16px 16px 18px;background:var(--pink);flex:1;display:flex;flex-direction:column;gap:9px}
  .prod.ice-card .info{background:var(--ice2)}
  .prod h3{font-size:clamp(15px,1.3vw,21px);line-height:1.3}
  .prod .row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .prod .go{
    margin-top:auto;display:flex;justify-content:space-between;align-items:center;
    font-size:clamp(11px,0.8vw,13.5px);color:#6B5448;gap:6px;flex-wrap:wrap;
  }
  .prod .go .arrow{font-family:"Jua";font-size:15px;color:var(--berry)}
  .pack-tag{
    position:absolute;top:10px;right:10px;z-index:2;
    background:var(--berry);color:var(--cream);border:var(--line);border-radius:999px;
    box-shadow:var(--pop-sm);padding:5px 13px;font-family:"Jua";font-size:13.5px;transform:rotate(3deg);
  }
  .pack-tag.blue{background:#1E93A8}
  .pack-tag.grape{background:var(--grape)}

  /* ===== 시즐 갤러리 ===== */
  .sizzle-strip{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:26px;padding:34px 4px 10px;
  }
  .siz{
    position:relative;
    border:var(--line);border-radius:22px;overflow:hidden;background:var(--white);
    box-shadow:var(--pop);
  }
  .siz:nth-child(odd){transform:rotate(-1deg)}
  .siz:nth-child(even){transform:rotate(1.1deg)}
  .siz img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block}
  @media(max-width:700px){.sizzle-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
  .siz .ono{
    position:absolute;left:12px;bottom:12px;
    background:var(--white);border:2.5px solid var(--choco);border-radius:14px;
    box-shadow:var(--pop-sm);padding:5px 13px;font-family:"Jua";font-size:16px;
  }
  .siz .ono b{color:var(--berry);font-weight:400}

  /* ===== 스토리 ===== */
  .story{background:var(--cream2)}
  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;margin-top:22px}
  @media(max-width:840px){.story-grid{grid-template-columns:1fr}}
  .mile{display:flex;flex-direction:column;gap:18px}
  .mile-item{
    display:flex;gap:16px;align-items:flex-start;background:var(--white);
    border:var(--line);border-radius:18px;box-shadow:var(--pop-sm);padding:18px;
  }
  .mile-item:nth-child(1){transform:rotate(-.6deg)}
  .mile-item:nth-child(2){transform:rotate(.7deg)}
  .mile-item:nth-child(3){transform:rotate(-.5deg)}
  .mile-num{
    flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;
    background:var(--berry);color:var(--cream);font-family:"Jua";font-size:21px;
    border:var(--line);
  }
  .mile-item h3{font-size:18.5px;margin-bottom:4px}
  .mile-item p{font-size:14px;color:#6B5448}
  .store-shot{border:var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--pop);transform:rotate(1.4deg);background:var(--white)}
  .store-shot img{width:100%;display:block}

  /* ===== 해외 ===== */
  .globe-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;margin-top:34px}
  .globe{
    border:var(--line);border-radius:20px;overflow:hidden;background:var(--white);box-shadow:var(--pop);
  }
  .globe:nth-child(1){transform:rotate(-.8deg)}
  .globe:nth-child(2){transform:rotate(.8deg)}
  .globe:nth-child(3){transform:rotate(-.5deg)}
  .globe .shot{height:clamp(220px,18vw,320px);overflow:hidden;border-bottom:var(--line)}
  .globe .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
  .globe .txt{padding:20px 22px 24px}
  .globe h3{font-size:clamp(20px,1.5vw,25px);margin-bottom:7px}
  .globe p{font-size:clamp(14px,1.05vw,16.5px);color:#6B5448}
  .next-banner{
    margin-top:36px;border:var(--line);border-radius:22px;box-shadow:var(--pop);
    background:linear-gradient(120deg,var(--pink) 0%,var(--ice2) 100%);
    padding:30px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;
  }
  .next-banner h3{font-size:clamp(20px,4.6vw,27px);line-height:1.35}
  .next-banner h3 b{color:var(--berry);font-weight:400}

  /* ===== CTA / FOOTER ===== */
  .cta{
    text-align:center;
    background:
      radial-gradient(560px 360px at 50% 0%, rgba(255,201,60,.28), transparent 62%),
      var(--cream);
  }
  .cta h2{font-size:clamp(30px,7vw,52px)}
  .cta .lead{margin:14px auto 0;max-width:560px}
  .foot{
    border-top:var(--line);background:var(--choco);color:#D9C8BD;
    padding:34px 0 46px;font-size:13px;text-align:center;
  }
  .foot b{color:var(--cream);font-family:"Jua";font-weight:400;font-size:15px}

  .kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}

  /* ===== 상단 메뉴 (공식 사이트 양식) ===== */
  .topnav{
    position:fixed;top:0;left:0;right:0;z-index:9000;
    background:rgba(255,246,238,.92);backdrop-filter:blur(8px);
    border-bottom:var(--line);
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:10px clamp(16px,3vw,40px);
  }
  .topnav .nav-brand{
    display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--choco);
    font-family:"Jua";font-size:clamp(16px,1.4vw,21px);white-space:nowrap;
  }
  .topnav .nav-brand b{color:var(--berry);font-weight:400}
  .topnav .nav-brand .ice{
    background:var(--ice);border:2.5px solid var(--choco);border-radius:999px;
    padding:1px 9px;font-size:.72em;box-shadow:2px 2px 0 var(--choco);
  }
  .nav-links{display:flex;gap:clamp(6px,1.2vw,18px);overflow-x:auto;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{
    font-family:"Jua";font-size:clamp(13px,1vw,16px);color:var(--choco);text-decoration:none;
    padding:7px 13px;border-radius:999px;border:2.5px solid transparent;white-space:nowrap;
    transition:all .15s ease;
  }
  .nav-links a:hover{
    background:var(--white);border-color:var(--choco);box-shadow:3px 3px 0 var(--choco);
    color:var(--berry);transform:translateY(-1px);
  }
  .nav-links a span{font-size:.78em;color:#9A8071;margin-left:4px}
  @media(max-width:700px){.nav-links a span{display:none}}

  /* ===== 전체 메뉴 (공식 메뉴 그대로) ===== */
  #menu{padding:56px 0}
  .menu-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
  .menu-tab{
    background:var(--white);border:var(--line);border-radius:999px;cursor:pointer;
    box-shadow:var(--pop-sm);padding:9px 18px;font-family:"Jua";font-size:clamp(13.5px,1vw,16px);
    color:var(--choco);transition:transform .12s ease;
  }
  .menu-tab:hover{transform:translateY(-2px)}
  .menu-tab.on{background:var(--berry);color:var(--cream)}
  .menu-tab .cnt{font-size:.8em;opacity:.7;margin-left:4px}
  .menu-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
    gap:18px;margin-top:28px;
  }
  .menu-item{
    margin:0;background:var(--white);border:2.5px solid var(--choco);border-radius:16px;
    overflow:hidden;box-shadow:var(--pop-sm);transition:transform .15s ease;
  }
  .menu-item:nth-child(odd){transform:rotate(-.6deg)}
  .menu-item:nth-child(even){transform:rotate(.6deg)}
  .menu-item:hover{transform:rotate(0) translateY(-5px)}
  .menu-item img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-bottom:2.5px solid var(--choco)}
  .menu-item figcaption{
    font-family:"Jua";font-size:clamp(12.5px,0.95vw,15px);text-align:center;
    padding:9px 6px;background:var(--ice2);line-height:1.3;
  }
  @media(max-width:700px){.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

  /* ===== 걸어다니는 탕후루 캐릭터 ===== */
  .walker{
    position:fixed;left:0;bottom:4px;z-index:9990;width:96px;
    cursor:pointer;user-select:none;-webkit-user-select:none;
    animation:walkAcross 38s linear infinite;
    filter:drop-shadow(4px 6px 0 rgba(42,26,18,.18));
  }
  .walker .waddle{animation:waddle .46s ease-in-out infinite;transform-origin:50% 88%}
  .walker.jump .waddle{animation:jumpUp .55s cubic-bezier(.2,1.5,.4,1) 1}
  .walker svg{width:100%;height:auto;display:block;overflow:visible}
  .walker img{width:100%;height:auto;display:block;-webkit-user-drag:none;user-select:none}
  .walker .leg-l{transform-origin:46px 112px;animation:legL .46s ease-in-out infinite}
  .walker .leg-r{transform-origin:62px 112px;animation:legR .46s ease-in-out infinite}
  .walker .arm-sk{transform-origin:88px 78px;animation:armBob .92s ease-in-out infinite}
  @keyframes walkAcross{
    0%{transform:translateX(-130px) scaleX(1)}
    49.4%{transform:translateX(calc(100vw + 30px)) scaleX(1)}
    50%{transform:translateX(calc(100vw + 30px)) scaleX(-1)}
    99.4%{transform:translateX(-130px) scaleX(-1)}
    100%{transform:translateX(-130px) scaleX(1)}
  }
  @keyframes waddle{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-6px) rotate(2.5deg)}}
  @keyframes jumpUp{0%{transform:translateY(0)}45%{transform:translateY(-46px) rotate(-7deg)}100%{transform:translateY(0)}}
  @keyframes legL{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(26deg)}}
  @keyframes legR{0%,100%{transform:rotate(26deg)}50%{transform:rotate(-26deg)}}
  @keyframes armBob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}
  @media(max-width:560px){.walker{width:74px;bottom:2px}}
  @media (prefers-reduced-motion: reduce){.walker{display:none}}

  /* ===== 두더지 과일 친구들 (패널 뒤에서 빼꼼 → 누르면 탕!! → 다른 데서 빼꼼) ===== */
  .prod,.siz,.globe,.store-shot,.mile-item,.next-banner,.chart-card{position:relative;z-index:2}
  .mole{
    position:absolute;z-index:1;width:94px;display:block;
    background:none;border:none;padding:0;cursor:pointer;
    filter:drop-shadow(3px 4px 0 rgba(42,26,18,.16));
    opacity:0;transform:translateY(70px);
    transition:transform .38s cubic-bezier(.2,1.5,.4,1),opacity .25s ease;
    pointer-events:none;
  }
  .mole.peek{opacity:1;transform:translateY(0);pointer-events:auto;animation:moleBob 1.4s ease-in-out .4s infinite}
  .mole.duck{opacity:0;transform:translateY(86px) !important;transition:transform .22s ease-in,opacity .18s ease-in;animation:none;pointer-events:none}
  .mole svg{width:100%;height:auto;display:block;overflow:visible}
  .mole img{width:100%;height:auto;display:block;-webkit-user-drag:none;user-select:none}
  .mole.peek svg{animation:moleDance 1.05s ease-in-out infinite;transform-origin:50% 88%}
  .mole.peek img{animation:moleDance 1.05s ease-in-out infinite;transform-origin:50% 88%}
  .mole:hover{filter:drop-shadow(3px 4px 0 rgba(42,26,18,.16)) brightness(1.05)}
  @keyframes moleBob{0%,100%{margin-top:0}50%{margin-top:-9px}}
  @keyframes moleDance{
    0%,100%{transform:rotate(-6deg)}
    25%{transform:rotate(0deg) scale(1.03)}
    50%{transform:rotate(6deg)}
    75%{transform:rotate(0deg) scale(1.03)}
  }
  @media(max-width:560px){.mole{width:66px}}
  @media (prefers-reduced-motion: reduce){.mole{display:none}}
  @media(max-width:560px){
    section{padding:56px 0}
    .hero-art{min-height:350px;margin-top:8px}
    .hero-float{width:96px}
    .hf3{width:90px}
  }
  @media (prefers-reduced-motion: reduce){
    .rise{opacity:1;transform:none;transition:none}
    .ticker-inner,.hero-float,.speech,.hero-deco span{animation:none}
    .hero-deco{display:none}
  }

  /* ===== 효과 전체 끄기 토글 ===== */
  body.fx-off .walker,
  body.fx-off .mole,
  body.fx-off .skewer-stage,
  body.fx-off .hero-deco{display:none !important}
  body.fx-off .ticker-inner,
  body.fx-off .hero-float,
  body.fx-off .speech{animation:none !important}
  .fx-toggle{
    position:fixed;right:16px;bottom:16px;z-index:9996;
    background:var(--white);border:var(--line);border-radius:999px;
    box-shadow:var(--pop-sm);padding:9px 16px;cursor:pointer;
    font-family:"Jua";font-size:14px;color:var(--choco);
  }
  .fx-toggle:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--choco)}


/* ===== 하위 페이지 공통 ===== */
.page-hero{
  padding:140px 0 36px;position:relative;overflow:hidden;
  background:
    radial-gradient(620px 420px at 86% 0%, rgba(168,227,238,.45), transparent 62%),
    radial-gradient(560px 420px at 2% 100%, rgba(255,183,201,.4), transparent 60%),
    var(--cream);
  border-bottom:var(--line);
}
.page-hero h1{
  font-family:"Jua";font-weight:400;
  font-size:clamp(34px,4.6vw,64px);line-height:1.15;letter-spacing:-0.02em;
}
.page-hero h1 .hl{color:var(--berry)}
.page-hero .crumb{
  display:inline-block;font-family:"Jua";font-size:13.5px;color:#8A7264;margin-bottom:14px;
  background:var(--white);border:2.5px solid var(--choco);border-radius:999px;
  padding:5px 14px;box-shadow:var(--pop-sm);
}
.page-hero p.lead{margin-top:10px}
.nav-links a.on{
  background:var(--berry);border-color:var(--choco);color:var(--cream);
  box-shadow:3px 3px 0 var(--choco);
}
.nav-links a.on span{color:rgba(255,246,238,.8)}
.news-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:30px}
.news-shots .gcard{
  border:var(--line);border-radius:18px;overflow:hidden;background:var(--white);box-shadow:var(--pop);
}
.news-shots .gcard:nth-child(odd){transform:rotate(-.6deg)}
.news-shots .gcard:nth-child(even){transform:rotate(.6deg)}
.news-shots .gcard img{width:100%;display:block}


/* ===== 상단 로고 중앙 배치 (공식 CI) ===== */
.topnav{flex-direction:column;gap:7px;padding:10px clamp(16px,3vw,40px) 9px}
.nav-logo{display:block;margin:0 auto}
.nav-logo img{height:clamp(40px,4.2vw,60px);width:auto;display:block}
.nav-links{justify-content:center;width:100%}
.hero{padding-top:150px !important}
.page-hero{padding-top:175px !important}


/* ===== 영양성분표 ===== */
.nutri-wrap{
  margin-top:48px;border:var(--line);border-radius:18px;overflow-x:auto;
  background:var(--white);box-shadow:var(--pop);
}
.nutri{width:100%;border-collapse:collapse;font-size:clamp(12.5px,0.95vw,15px);min-width:760px}
.nutri th,.nutri td{padding:11px 12px;text-align:center;border-bottom:2px solid rgba(42,26,18,.12)}
.nutri thead th{
  background:var(--berry);color:var(--cream);font-family:"Jua";font-weight:400;
  font-size:clamp(13px,1vw,16px);white-space:nowrap;
}
.nutri tbody td:first-child{font-family:"Jua";text-align:left;padding-left:18px;white-space:nowrap}
.nutri tbody tr:nth-child(even){background:var(--ice2)}
.nutri tbody tr:last-child td{border-bottom:none}
.nutri-note{font-size:12.5px;color:#8A7264;margin-top:12px}


/* ===== 탕탕! 꼬치 게임 ===== */
.nav-game{
  background:var(--berry);color:var(--cream) !important;border-radius:999px;
  padding:6px 14px !important;transform:rotate(-2deg);
}
.nav-game span{color:#FFD9DE !important}
.nav-game:hover{transform:rotate(2deg) scale(1.06)}
.game-hud{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:16px;
}
.ghud{
  font-family:"Jua";font-size:clamp(14px,1.1vw,18px);background:var(--white);
  border:var(--line);border-radius:999px;padding:8px 18px;box-shadow:4px 4px 0 rgba(42,26,18,.9);
}
.ghud b{color:var(--berry)}
.game-stage{
  position:relative;height:clamp(560px,80vh,940px);
  border:var(--line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#FFFDFB 0%,#FFF1E4 100%);
  box-shadow:var(--pop);touch-action:none;
}
#gameCanvas{display:block;width:100%;height:100%}
.gmodal{
  position:absolute;inset:0;background:rgba(42,26,18,.45);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:5;padding:20px;
}
.gmodal-card{
  background:var(--white);border:var(--line);border-radius:24px;box-shadow:var(--pop);
  padding:34px 40px;text-align:center;max-width:480px;transform:rotate(-1deg);
}
.gmodal-card.clear{background:linear-gradient(180deg,#FFFDF2,#FFF3D6)}
.gmodal-emoji{font-size:46px;margin-bottom:6px}
.gmodal-card h3{font-family:"Jua";font-size:clamp(24px,2.4vw,34px);color:var(--berry);margin-bottom:10px}
.gmodal-card p{font-size:clamp(14px,1.05vw,16.5px);line-height:1.7;color:#5B4438;margin-bottom:18px}
.gmodal-card .btn{cursor:pointer;border:var(--line);font-family:"Jua"}
.player-field{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;
  max-width:320px;margin:0 auto 18px;text-align:left;font-family:"Jua";color:var(--choco);
}
.player-field input{
  min-width:0;border:3px solid var(--choco);border-radius:999px;background:#F0FBFF;
  padding:12px 16px;font:700 15px Pretendard, sans-serif;color:var(--choco);
  outline:none;box-shadow:3px 3px 0 rgba(42,26,18,.85);
}
.player-field input:focus{border-color:#1E93A8;background:#fff}
.score-rank{
  background:#EAFBFF;border:3px dashed #1E93A8;border-radius:16px;
  padding:10px 14px !important;margin:-4px auto 16px !important;
  max-width:380px;color:#1E7184 !important;font-weight:800;
}
.coupon{
  display:flex;flex-direction:column;gap:6px;align-items:center;
  border:3px dashed var(--berry);border-radius:16px;background:#FFF6EE;
  padding:18px 22px;margin:0 auto 20px;max-width:340px;
}
.coupon-tag{
  font-family:"Jua";font-size:12px;background:var(--berry);color:var(--cream);
  border-radius:999px;padding:3px 12px;letter-spacing:2px;
}
.coupon b{font-family:"Jua";font-size:clamp(18px,1.6vw,24px);color:var(--choco)}
.coupon-sub{font-size:12.5px;color:#8A7264;line-height:1.6}
.game-toast{
  position:absolute;top:18px;left:50%;transform:translateX(-50%) rotate(-2deg);
  font-family:"Jua";font-size:clamp(16px,1.4vw,22px);color:var(--cream);
  background:var(--berry);border:var(--line);border-radius:999px;padding:9px 24px;
  box-shadow:5px 5px 0 rgba(42,26,18,.9);z-index:6;animation:toastIn 1.6s ease forwards;
  white-space:nowrap;pointer-events:none;
}
.game-scoreboard{
  background:
    radial-gradient(circle at 12% 16%, rgba(255,221,76,.35), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(30,147,168,.22), transparent 24%),
    linear-gradient(180deg,#F0FBFF 0%,#FFF7EA 100%);
  border-top:var(--line);border-bottom:var(--line);padding:64px 0;
}
.score-wrap{
  display:grid;grid-template-columns:minmax(260px,.85fr) minmax(320px,1.15fr);
  gap:28px;align-items:center;
}
.score-copy h2{
  font-family:"Jua";font-size:clamp(34px,4vw,62px);line-height:1.02;
  margin:18px 0 12px;color:var(--choco);
}
.score-copy p{font-size:clamp(15px,1.25vw,20px);line-height:1.55;color:#5B4438;margin-bottom:22px}
.score-copy b{color:var(--berry);font-family:"Jua";font-weight:400}
.score-panel{
  background:#fff;border:var(--line);border-radius:22px;box-shadow:var(--pop);
  padding:22px;transform:rotate(1deg);
}
.score-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:3px dashed rgba(42,26,18,.25);padding-bottom:14px;margin-bottom:12px;
}
.score-panel-head b{font-family:"Jua";font-size:30px;color:var(--berry)}
.score-panel-head span{
  font-family:"Jua";font-size:15px;background:#FFF3C3;border:3px solid var(--choco);
  border-radius:999px;padding:6px 12px;white-space:nowrap;
}
.score-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.score-list li{
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;
  background:#F8FDFF;border:2px solid rgba(42,26,18,.18);border-radius:14px;
  padding:10px 12px;min-height:48px;
}
.score-list .rank{
  width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:var(--berry);color:#fff;font-family:"Jua";font-size:16px;
}
.score-list .who{min-width:0}
.score-list .who b{display:block;font-family:"Jua";font-size:18px;color:var(--choco);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-list .who span{display:block;font-size:12px;color:#8A7264;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-list .pts{font-family:"Jua";font-size:20px;color:#1E93A8;white-space:nowrap}
.score-list .empty{
  display:block;text-align:center;color:#8A7264;font-weight:800;background:#FFF8EF;
}
@keyframes toastIn{
  0%{opacity:0;transform:translateX(-50%) rotate(-2deg) scale(.6)}
  12%{opacity:1;transform:translateX(-50%) rotate(-2deg) scale(1.05)}
  80%{opacity:1}
  100%{opacity:0;transform:translateX(-50%) rotate(-2deg) scale(.9)}
}


/* ===== 게임 페이지 컴팩트 + 모바일 ===== */
.page-hero.mini{padding:150px 0 16px !important}
.page-hero.mini h1{font-size:clamp(26px,2.6vw,40px);margin:0}
.game-stage .game-hud{
  position:absolute;top:12px;left:0;right:0;z-index:4;
  pointer-events:none;margin:0;
}
.game-stage .ghud{
  font-size:clamp(12px,0.95vw,15px);padding:6px 14px;
  box-shadow:3px 3px 0 rgba(42,26,18,.85);
}
@media (max-width:640px){
  .page-hero.mini{padding:120px 0 10px !important}
  .game-stage{height:72vh;border-radius:16px}
  .game-stage .game-hud{gap:5px;top:8px}
  .game-stage .ghud{font-size:11px;padding:4px 9px;border-width:2px;box-shadow:2px 2px 0 rgba(42,26,18,.85)}
  .gmodal-card{padding:24px 18px}
  .gmodal-card h3{font-size:22px}
  .player-field{grid-template-columns:1fr;max-width:260px;text-align:center}
  .score-wrap{grid-template-columns:1fr;gap:18px}
  .game-scoreboard{padding:42px 0}
  .score-panel{padding:16px;transform:none}
  .score-panel-head{align-items:flex-start;flex-direction:column}
  .score-list li{grid-template-columns:34px minmax(0,1fr);gap:8px}
  .score-list .pts{grid-column:2;font-size:18px}
}


/* 모바일 네비 줄바꿈 — Game 탭까지 다 보이게 */
@media (max-width:760px){
  .nav-links{flex-wrap:wrap;row-gap:4px;column-gap:12px;padding:0 8px}
  .nav-links a{font-size:13px}
  .nav-links a span{display:none}
}


/* ===== 게임 페이지 = 게임만 풀스크린 ===== */
.game-page .foot{display:none}
.game-page .walker,.game-page .mole{display:none !important}
.game-page #game{padding-bottom:18px}
.game-page .page-hero.mini{padding:128px 0 10px !important}
.game-page .game-stage{height:calc(100dvh - 252px);min-height:430px;max-height:none}
@media (max-width:640px){
  .game-page .page-hero.mini{padding:118px 0 6px !important}
  .game-page .game-stage{height:calc(100dvh - 268px);min-height:380px}
}


/* ===== 메인 포토 배너 (코덱스 실사 + 우리 톤 글자) ===== */
.photo-banner{
  position:relative;width:100%;
  height:clamp(380px,40vw,780px);
  overflow:hidden;background:var(--choco);
  border-bottom:var(--line);
}
.pb-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none;
}
.pb-slide.on{opacity:1;pointer-events:auto}
.pb-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.pb-slide img.pb-fallback{object-fit:contain;background:#FFF6EE;padding:24px}
.pb-shade{
  position:absolute;inset:0;
  background:linear-gradient(75deg,rgba(20,8,4,.62) 0%,rgba(20,8,4,.28) 38%,rgba(20,8,4,0) 62%);
}
.pb-txt{
  position:absolute;left:clamp(20px,5vw,90px);bottom:clamp(34px,5.5vw,90px);
  max-width:min(640px,82vw);color:#fff;
}
.pb-tag{
  display:inline-block;font-family:"Jua";font-size:clamp(12px,1vw,15.5px);
  background:var(--berry);color:var(--cream);border:2.5px solid var(--choco);
  border-radius:999px;padding:5px 16px;margin-bottom:14px;
  box-shadow:4px 4px 0 rgba(42,26,18,.85);transform:rotate(-1.5deg);
}
.pb-head{
  font-family:"Jua";font-weight:400;line-height:1.16;
  font-size:clamp(27px,3.4vw,58px);
  text-shadow:0 3px 18px rgba(0,0,0,.45);margin:0 0 10px;
}
.pb-head em{
  font-style:normal;color:var(--mango);
  text-shadow:0 3px 18px rgba(0,0,0,.5);
}
.pb-sub{
  font-size:clamp(13.5px,1.15vw,18px);font-weight:600;color:rgba(255,255,255,.92);
  text-shadow:0 2px 10px rgba(0,0,0,.5);margin:0;
}
.pb-dots{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;gap:9px;z-index:3;
}
.pb-dot{
  width:12px;height:12px;border-radius:999px;border:2px solid #fff;
  background:transparent;cursor:pointer;padding:0;transition:all .25s;
}
.pb-dot.on{background:var(--mango);border-color:var(--mango);width:30px}
.pb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:999px;cursor:pointer;
  font-size:26px;line-height:1;color:var(--choco);
  background:rgba(255,246,238,.92);border:var(--line);
  box-shadow:4px 4px 0 rgba(42,26,18,.5);transition:transform .15s;
}
.pb-arrow:hover{transform:translateY(-50%) scale(1.1)}
.pb-prev{left:clamp(10px,1.6vw,28px)}
.pb-next{right:clamp(10px,1.6vw,28px)}
@media (max-width:640px){
  .photo-banner{height:64vw;min-height:280px}
  .pb-arrow{display:none}
  .pb-txt{left:18px;bottom:34px}
  .pb-tag{margin-bottom:9px}
}


/* ===== 캐릭터 흰 스티커 테두리 (레퍼런스 톤) ===== */
.mole svg,.walker svg,#bi .globe .shot svg{
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
}
/* BI 캐릭터 이미지(공식 PNG) — 부드러운 그림자만, 스티커 테두리는 PNG 자체에 포함 */
#bi .globe .shot.bi-char img{
  filter:drop-shadow(3px 5px 0 rgba(42,26,18,.12));
}

/* ===== 모바일 최적화 390px 기준 (2차) — 미디어쿼리만, PC(1280px+) 불변 ===== */

/* 이미지 가로폭 전역 방어 */
img { max-width: 100%; }
.photo-strip-inner img { max-width: none; }

@media (max-width: 480px) {

  /* ━━━ Fix 1: 헤더 슬림 — 90px 이하 ━━━ */
  .topnav { padding: 5px 12px 4px; gap: 3px; }
  .nav-logo img { height: 36px; }
  .nav-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: 0 2px;
    gap: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  /* 시각 높이 34px, 투명 ::after 로 터치 44px 확보 */
  .nav-links a {
    position: relative;
    min-height: 34px;
    padding: 5px 9px;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  .nav-links a::after { content: ''; position: absolute; inset: -5px -2px; }

  /* ━━━ Fix 2: 제품 카드 1열 (≈88vw) ━━━ */
  .prod-grid { grid-template-columns: 1fr; gap: 16px; }
  .prod { transform: none !important; }
  .prod .info { padding: 12px 12px 14px; }
  .prod h3 { font-size: 15px; }
  .pack-tag { font-size: 12px; padding: 4px 10px; }

  /* ━━━ Fix 3: 이미지 자연스럽게 (aspect-ratio + object-fit cover) ━━━ */
  /* 히어로 아트 — 절대배치 해제 → 자연 흐름, 비율 고정 */
  .hero-art { min-height: auto; overflow: visible; }
  .hero-main { position: relative; inset: auto; width: 88%; margin: 0 auto; transform: none; }
  .hero-main img { width: 100%; height: auto; }
  /* 플로팅 이미지·말풍선 숨김 (작은 화면에서 겹침·잘림 원인) */
  .hero-float, .speech { display: none; }

  /* 해외 카드 shot 이미지 */
  .globe .shot { height: auto; aspect-ratio: 16/9; }
  .globe .shot img { height: 100%; object-fit: cover; object-position: center; }

  /* 브랜드 스토리 매장 사진 */
  .store-shot { transform: none; }
  .store-shot img { aspect-ratio: 4/3; object-fit: cover; }

  /* 섹션 간격 정돈 */
  .hero-grid { gap: 8px; }
  .hero-cta { margin-top: 18px; gap: 10px; }

  /* ━━━ Fix 4: 장식 구간 세로 여백 절반 이하 ━━━ */
  section { padding: 20px 0; }
  #products, section.halftone-blue, #global, #menu { padding: 24px 0; }
  .sizzle-strip { padding: 10px 0 8px; }
  .hero-stats { margin-top: 12px; gap: 8px; }
  .hstat { padding: 6px 10px; font-size: 12.5px; }

  /* ━━━ 가로 스크롤 방지 (1차 유지) ━━━ */
  .ticker { width: 100%; margin-left: 0; transform: none; }
  .globe-cards { grid-template-columns: 1fr; }

  /* ━━━ 터치 영역 44px (1차 유지) ━━━ */
  .menu-tab { min-height: 44px; }
  .fx-toggle { min-height: 44px; }
  .mb-chip, .mb-pick { min-height: 44px; }
  .mb-dots button, .pb-dot { position: relative; }
  .mb-dots button::after, .pb-dot::after { content: ''; position: absolute; inset: -16px; }

  /* ━━━ 배너 슬라이드 — 사진 잘림 0 + 글자 카드 사진 아래 자연 흐름 ━━━ */
  /* 틀: inline style 우선순위 덮어쓰기 위해 !important 사용 */
  .mb-stage { aspect-ratio: auto !important; height: auto !important; overflow: visible !important; border: none; border-radius: 0; box-shadow: none; background: transparent; }
  .mb-stage::after { display: none; }
  /* 슬라이드: .mb-stage .mb-slide 명시도 올려 position:relative 실제 적용 */
  .mb-stage .mb-slide { position: relative !important; inset: auto !important; opacity: 1 !important; pointer-events: auto; display: none; transition: none; }
  .mb-stage .mb-slide.on { display: block; }
  /* 사진: 원본 1920×800 = 12/5 비율 고정 → cover여도 인물 잘림 0 */
  .mb-slide img { width: 100%; aspect-ratio: 12/5; height: auto; object-fit: cover; object-position: center; display: block; border: var(--line); border-radius: 22px; box-shadow: var(--pop); }
  .mb-scrim { display: none; }
  /* 글자 카드: absolute 해제 → 사진 아래 자연 흐름 */
  .mb-copy { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; max-width: none; padding: 12px 14px 14px; margin-top: 10px; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* 도트: 카드 아래 자연 흐름 */
  .mb-dots { position: relative !important; left: auto; right: auto; bottom: auto; top: auto; margin-top: 8px; justify-content: center; }

  /* ━━━ Fix 6: 사진 필름 띠 높이 축소 ━━━ */
  .photo-strip img { height: 68px; }
  .photo-strip { padding: 6px 0; }
}


/* ===== 메뉴 확대 모달 (브랜드톤) ===== */
.menu-item{cursor:zoom-in;transition:transform .15s}
.menu-item:hover{transform:translateY(-3px) rotate(-.5deg)}
.menu-modal{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(42,26,18,.55);backdrop-filter:blur(4px);padding:24px;cursor:zoom-out;
}
.menu-modal.on{display:flex}
.menu-modal-card{
  position:relative;background:var(--white);border:var(--line);border-radius:24px;
  box-shadow:var(--pop);padding:20px 22px 18px;cursor:default;transform:rotate(-.5deg);
  max-width:min(560px,92vw);max-height:88vh;display:flex;flex-direction:column;
}
.menu-modal-card img{
  width:100%;height:auto;max-height:62vh;object-fit:contain;
  border-radius:16px;border:2.5px solid rgba(42,26,18,.12);background:#FFFDFB;
}
.menu-modal-card .mm-name{
  font-family:"Jua";font-size:clamp(20px,1.8vw,27px);text-align:center;
  margin:12px 0 4px;color:var(--choco);
}
.menu-modal-card .mm-desc{
  font-size:clamp(13.5px,1.05vw,15.5px);text-align:center;color:#8A7264;
  margin:0 0 2px;line-height:1.6;
}
.menu-modal-x{
  position:absolute;top:-15px;right:-15px;width:42px;height:42px;border-radius:999px;
  background:var(--berry);color:var(--cream);border:var(--line);font-size:18px;
  cursor:pointer;box-shadow:4px 4px 0 rgba(42,26,18,.85);font-family:"Jua";
  transition:transform .15s;
}
.menu-modal-x:hover{transform:scale(1.1) rotate(6deg)}
@media (max-width:640px){
  .menu-modal{padding:14px}
  .menu-modal-card{padding:14px 14px 12px}
  .menu-modal-x{top:-12px;right:-12px;width:38px;height:38px}
}