@font-face{font-family:"Jua Mobile";src:url(fonts/Jua-complete-v1.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans KR Mobile";src:url(fonts/NotoSansKR-korean-v1.woff) format("woff");font-weight:100 900;font-display:swap}
/* The phone layout has its own reading order; desktop keeps the village map. */
.mobile-village-menu,.bird-dock-label,.mobile-map-help,.emotion-cue,.tomato-buzz,.ginger-bubble{display:none}
@media(max-width:700px){
  :root{--body:'Noto Sans KR Mobile',sans-serif;--display:'Jua Mobile',sans-serif}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:14px}
  .header{height:66px;padding:0 20px;gap:12px}
  .header .brand{font-size:22px}
  .brand span{font-size:10px;letter-spacing:.12em;margin-top:5px}
  .menu-toggle{width:44px;height:44px;align-items:center;justify-content:center;padding:10px}
  .menu-toggle span{width:21px}
  .header nav{top:65px;padding:12px 20px 18px;gap:4px}
  .header nav button{min-height:44px;font-size:14px}
  .village{background:#f7faef}
  .mobile-map-help{display:block;margin:0;padding:17px 20px 13px;text-align:center;color:#52634e}
  .mobile-map-help span:first-child{display:block;font:400 12px/1.55 var(--body);letter-spacing:-.02em}
  .mobile-map-help span:last-child{display:block;margin-top:1px;font:400 11px/1.55 var(--body);letter-spacing:-.01em;opacity:.82}
  .village .intro{position:absolute;left:33%;right:33%;top:27.5%;bottom:auto;transform:none;padding:0}
  .village .intro p{font-size:9px;letter-spacing:.12em;margin-bottom:4px}
  .village .intro h1{font-size:17px;line-height:1.35;white-space:normal}
  .village .intro .intro-sub{font-size:11px;line-height:1.55;margin-top:5px}
  .map-scroll{overflow-x:auto;overflow-y:hidden;padding:0 0 34px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y}
  .map-scroll::-webkit-scrollbar{display:none}
  .map{width:800px;min-width:800px;height:auto;aspect-ratio:3/2}
  .village-art{width:100%;height:auto;max-width:100%}
  /* The illustration stays visually quiet until a visitor touches it. */
  .map .spot{--bubble-turn:0deg;display:block;width:31%;height:35%;max-width:none;min-height:0;padding:0;white-space:nowrap;text-align:center;border:0;border-radius:36%;background:transparent;box-shadow:none;transform:none;z-index:2;overflow:visible;touch-action:pan-x pan-y}
  .map .spot:hover{transform:none}
  .map .spot span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .map .spot b{display:none}
  .map .regular{--bubble-turn:-1deg;left:0;right:auto;top:3%}
  .map .chili{--bubble-turn:1deg;left:69%;right:auto;top:4%}
  .map .duck{--bubble-turn:.7deg;left:0;right:auto;top:52%}
  .map .coriander{--bubble-turn:-.8deg;left:69%;right:auto;top:56%}
  .map .ginger-cloud{left:39%;top:0;width:22%;mix-blend-mode:normal;animation:ginger-float 7s ease-in-out infinite}
  .map .emotion-cue{display:block;position:absolute;left:14%;top:18%;width:22px;height:22px;pointer-events:none;transition:opacity .15s;animation:emotion-breathe 2.2s ease-in-out infinite}
  .map .emotion-cue i{position:absolute;left:10px;bottom:3px;width:2px;height:10px;border-radius:3px;background:#263529;transform-origin:50% 100%}
  .map .emotion-cue i:first-child{transform:translateX(-8px) rotate(-28deg)}
  .map .emotion-cue i:nth-child(2){height:12px;transform:translateY(-3px)}
  .map .emotion-cue i:last-child{transform:translateX(8px) rotate(28deg)}
  .map .tomato-buzz{display:block;position:absolute;left:24%;top:-36%;width:24px;height:22px;pointer-events:auto;transform:rotate(-5deg);animation:tomato-buzz 1.7s steps(2,end) infinite;transition:opacity .15s}
  .map .tomato-buzz i{position:absolute;left:11px;bottom:3px;width:3px;height:12px;border-radius:4px;background:#92a19a;transform-origin:50% 100%}
  .map .tomato-buzz i:first-child{transform:translateX(-9px) rotate(-29deg)}
  .map .tomato-buzz i:nth-child(2){height:14px;transform:translateY(-3px)}
  .map .tomato-buzz i:last-child{transform:translateX(9px) rotate(29deg)}
  @keyframes emotion-breathe{0%,100%{opacity:.45;transform:translateY(1px) rotate(-4deg)}50%{opacity:1;transform:translateY(-2px) rotate(2deg)}}
  @keyframes tomato-buzz{0%,100%{transform:translate(0,0) rotate(-5deg)}50%{transform:translate(2px,-1px) rotate(2deg)}}
  .mobile-village-menu{display:none}
  .mobile-village-menu>button:not(.mobile-tea){display:none}
  .mobile-village-menu .mobile-tea{width:100%;min-height:44px;padding:9px 0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:3px 9px;border:0;border-radius:0;background:transparent;line-height:1.5}
  .mobile-village-menu .mobile-tea strong{font:400 13px/1.6 var(--display)}
  .mobile-village-menu .mobile-tea small{font-size:12px;color:#52634e}
  .mobile-village-menu .mobile-tea b{display:none}
  .destinations{padding:32px 20px 36px}
  .section-head{margin-bottom:18px}
  .section-head h2{font-size:17px;line-height:1.4}
  .section-head p{font-size:12px;margin-top:6px}
  .destination-grid{grid-template-columns:minmax(0,1fr);gap:9px;counter-reset:destination}
  .destination-card{counter-increment:destination;min-width:0;min-height:94px;padding:15px 16px;display:grid;grid-template-columns:24px minmax(0,1fr);gap:3px 11px;align-items:center;border-radius:14px}
  .destination-card::before{content:'0' counter(destination);grid-column:1;grid-row:1/3;font-size:12px;font-weight:600;align-self:start;padding-top:3px;color:#52634e}
  .destination-card::after{content:none}
  .destination-card .kicker{display:none}
  .destination-card strong{grid-column:2;grid-row:1;font-size:15px;line-height:1.4}
  .destination-card>span:last-child{grid-column:2;grid-row:2;font-size:12px;line-height:1.55}
  .destination-card br{display:none}
  .news-strip{display:grid;grid-template-columns:minmax(0,1fr) 60px;gap:8px 12px;padding:20px}
  .news-label{grid-column:1;font-size:10px}
  .post-stories{display:flex;flex-direction:column;align-items:flex-start;grid-column:1;gap:2px;min-width:0}
  .post-stories button{min-height:36px;font-size:13px}
  .news-strip .contact-ginger{grid-column:2;grid-row:1/3;width:60px;align-self:center}
  .contact-ginger img{width:80px;height:54px}
  .contact-ginger span{font-size:9px}
  footer{padding:24px 20px;gap:16px}
  .footer-brand{font-size:20px}
  .footer-links{flex-wrap:wrap;gap:4px 14px;width:100%}
  .footer-links button{min-height:36px;font-size:12px}
  footer small{font-size:10px}
  .site-guide-links{padding-top:18px}
  .site-guide-links p{font-size:12px;line-height:1.8}
  .site-guide-links nav{gap:4px 14px}
  .site-guide-links a{font-size:12px;min-height:36px;display:inline-flex;align-items:center}
  dialog,dialog.wide{width:calc(100% - 28px);max-height:calc(100dvh - 28px);padding:18px;border-radius:20px}
  .dialog-top{font-size:10px}
  .close{display:grid;place-items:center;min-width:44px;min-height:44px}
  dialog h2{font-size:18px;line-height:1.4;margin-bottom:14px}
  dialog h3,.sauce-grid h3{font-size:15px;line-height:1.5}
  dialog p{font-size:13px;line-height:1.75}
  dialog .lead{margin-bottom:18px}
  dialog .story-end{font-size:15px!important}
  .eyebrow{font-size:10px;margin-top:20px}
  .button,.back{min-height:44px;font-size:13px;padding:11px 14px;gap:8px}
  .back{justify-content:center;margin-top:18px;background:transparent;color:var(--green);border-color:#bcc6ae;border-radius:12px;font-size:12px;font-weight:500}
  .back span,.post-arrow{display:none}
  #detail-content>a.button[href*="coupangeats.com"]{width:100%;margin-top:16px;border-radius:12px;font-size:12px}
  #detail-content>a.button[href*="coupangeats.com"]+.muted{margin-top:7px;padding:0 2px;font-size:12px;line-height:1.65}
  .status-note{font-size:13px!important;padding:14px}
  .product-body{padding:12px}
  .product-body h3{font-size:16px}
  .product-body>p{font-size:12px;min-height:0}
  .product-body button{min-height:44px;font-size:12px;margin-top:10px}
  .product-art{height:120px}
  .story-choice strong{font-size:16px}
  .location-card{padding:16px}
  .location-card address{font-size:13px;min-height:0}
  .region-tabs{gap:8px}
  .region-tabs button{font-size:12px;min-height:44px;padding:9px 14px}
  .info-page .info-main{padding:28px 20px 40px}
  .info-page h1{font-size:20px;line-height:1.4}
  .info-page h2{font-size:18px;line-height:1.4}
  .info-page h3{font-size:16px}
  .info-page .info-lead{font-size:15px}
  .info-page .text-section>a.button[href*="coupangeats.com"]{margin-top:24px}
  .info-page .text-section .info-actions>a[href^="mailto:"]{margin-top:22px}
  .info-page .info-main>.text-section:last-of-type .info-actions{gap:16px;margin-bottom:0}
  .info-page .info-main>.info-actions:last-child{margin-top:16px}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .map .ginger-cloud{animation:none}
  .map .emotion-cue,.map .tomato-buzz{animation:none}
}