/* Brand palette inspired by the supplied World Snack logo. */
:root { --paper:#fffaf3; --ink:#382238; --pink:#d80078; --pink-dark:#ad005f; --yellow:#ffd564; --muted:#796977; --line:#ebdfe4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Segoe UI","Malgun Gothic",sans-serif; line-height:1.75; word-break:keep-all; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:3px solid #8541a9; outline-offset:5px; }
h1,h2,h3,p { margin-top:0; }
.wrap { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:30; padding:12px 20px; background:var(--ink); color:white; }
.skip-link:focus { top:10px; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:#fffaf3f5; backdrop-filter:blur(12px); }
.header-inner { min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; gap:12px; align-items:center; font-size:20px; font-weight:900; line-height:1.25; letter-spacing:-.8px; }
.brand small { display:block; font-size:8px; letter-spacing:2.7px; margin-top:7px; color:var(--pink); }
/* Frame the original image in CSS; the supplied bitmap is preserved unchanged. */
.brand-mark,.logo-disc { display:block; overflow:hidden; border-radius:50%; position:relative; aspect-ratio:1; flex-shrink:0; }
.brand-mark { width:49px; }
.brand-mark img,.logo-disc img { position:absolute; width:198.38%; height:auto; max-width:none; left:-49.07%; top:-15.81%; }
.site-header nav { display:flex; align-items:center; gap:28px; font-size:13px; font-weight:750; }
.site-header nav a:hover,.text-link:hover { color:var(--pink); }
.nav-visit { border:1px solid #d5b8cb; border-radius:30px; padding:9px 18px; }
.nav-visit span { margin-left:15px; }
.hero-shell { background:radial-gradient(ellipse at 85% 40%,#ffedf1 0,transparent 52%),var(--paper); overflow:hidden; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:32px; padding-block:57px 22px; }
.eyebrow { color:var(--pink); font-size:10px; letter-spacing:2px; font-weight:850; margin-bottom:18px; }
.hero .eyebrow { display:inline-flex; gap:8px; align-items:center; font-size:11px; letter-spacing:.8px; padding:5px 12px; border:1px solid #f3cedd; border-radius:30px; background:#fff; margin-bottom:25px; }
.tiny-star { font-size:17px; }
h1 { font-size:clamp(39px,4.3vw,61px); letter-spacing:-3.8px; line-height:1.25; font-weight:950; margin-bottom:24px; }
h1 em { position:relative; font-style:normal; color:var(--pink); z-index:0; white-space:nowrap; }
h1 em:after { content:""; position:absolute; height:12px; background:var(--yellow); bottom:1px; left:0; right:3px; z-index:-1; transform:rotate(-2deg); border-radius:50%; }
.title-dot { color:var(--pink); }
.hero-description { font-size:14px; line-height:1.95; color:var(--muted); margin-bottom:20px; }
.hero-description strong { color:var(--ink); font-weight:700; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:29px; }
.hero-tags span { font-size:11px; color:#865569; border:1px solid #e7d3db; border-radius:5px; padding:3px 10px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:23px; min-height:51px; padding:13px 22px; border-radius:30px; font-size:12px; font-weight:800; transition:transform .18s,background .18s,box-shadow .18s; }
.button:hover { transform:translateY(-2px); }
.primary { color:#fff; background:var(--pink); border:1px solid var(--pink); box-shadow:0 5px 15px #d8007815; }
.primary:hover { background:var(--pink-dark); box-shadow:0 7px 20px #d8007829; }
.secondary { background:#fffaf380; border:1px solid #d9c2cf; }
.secondary:hover { background:#fce6ef; }
.hero-note { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:var(--muted); font-size:10px; margin-top:27px; }
.hours-dot { width:6px; height:6px; background:var(--pink); border-radius:50%; }
.note-divider { margin-inline:4px; color:#c2aab6; }
.brand-scene { position:relative; min-width:0; height:490px; display:flex; align-items:center; justify-content:center; isolation:isolate; }
.logo-disc { width:76%; box-shadow:0 24px 42px #a72a681a; outline:10px solid #ffffffab; z-index:2; }
.scene-ring { position:absolute; width:90%; aspect-ratio:1; border:1px dashed #e4b7ca; border-radius:50%; transform:rotate(-18deg); }
.ring-two { width:100%; border-style:solid; border-color:#f4dce5; }
.scene-kicker { position:absolute; top:9px; left:0; right:0; text-align:center; font-size:9px; letter-spacing:3px; color:#aa627e; font-weight:700; }
.floating-star { position:absolute; z-index:3; line-height:1; }
.star-top { top:47px; right:16px; font-size:68px; color:#edb62e; transform:rotate(15deg); }
.star-bottom { bottom:42px; left:28px; font-size:53px; color:var(--pink); }
.scene-label { position:absolute; z-index:4; background:#fff; box-shadow:0 7px 25px #76294b0d; }
.label-sweet { top:76px; left:-6px; padding:11px 18px; border:1px solid #f0d2e0; border-radius:12px; transform:rotate(-10deg); font-size:11px; font-weight:750; }
.label-sweet span { display:block; font-family:Georgia,serif; font-size:22px; color:var(--pink); font-style:italic; line-height:1.3; }
.label-gift { bottom:57px; right:-4px; display:flex; gap:12px; align-items:center; padding:12px 20px; background:#ffe38c; border:1px solid #f2cb59; border-radius:12px; transform:rotate(8deg); font-size:10px; }
.gift-symbol { font-size:34px; line-height:1; color:var(--pink); }
.label-gift strong { display:block; font-size:18px; }
.scene-caption { position:absolute; bottom:3px; margin:0; font-size:10px; letter-spacing:1px; color:#9a7084; }
.hero-bottom { display:flex; justify-content:space-between; align-items:center; padding-block:23px; border-top:1px solid #ead9e1; color:#967587; font-size:10px; letter-spacing:.5px; }
.hero-bottom a { color:var(--ink); }
.hero-bottom a span { margin-left:16px; }
.ticker { background:var(--pink); color:white; overflow:hidden; padding-block:15px; }
.ticker>div { white-space:nowrap; display:flex; justify-content:center; align-items:center; gap:35px; font-size:14px; font-weight:850; letter-spacing:2.5px; }
.ticker span { color:var(--yellow); font-size:22px; line-height:1; }
h2 { font-size:33px; font-weight:850; letter-spacing:-1.8px; line-height:1.5; margin-bottom:0; }
h2 em { font-style:normal; color:var(--pink); }
.about-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-block:84px; }
.about-copy { padding-top:4px; color:var(--muted); font-size:14px; }
.about-copy p { margin-bottom:18px; }
.about-copy strong { color:var(--ink); }
.text-link { display:inline-flex; gap:23px; align-items:center; border-bottom:1px solid #bd8ca5; padding-bottom:4px; font-size:12px; font-weight:750; color:var(--ink); }
.snacks-section { background:#fff0f4; padding-block:70px; border-block:1px solid #f1dfe6; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:32px; }
.section-heading .eyebrow { margin-bottom:10px; }
.section-heading>p { font-size:12px; color:var(--muted); margin-bottom:8px; }
.snack-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.category-card { background:#fffdfa; border:1px solid #eddce3; border-radius:18px; overflow:hidden; }
.category-art { height:208px; position:relative; overflow:hidden; }
.category-crunch .category-art { background:#ffe5a2; }
.category-sweet .category-art { background:#f6cee1; }
.category-choco .category-art { background:#e7dafa; }
.art-label { position:absolute; top:21px; left:23px; font-size:10px; letter-spacing:2px; font-weight:800; color:#795362; }
.mini-spark { position:absolute; bottom:21px; right:27px; font-size:34px; color:var(--pink); }
.category-copy { padding:23px 27px 27px; }
.category-number { color:#957581; font-size:9px; letter-spacing:1.5px; font-weight:750; }
.category-copy h3 { font-size:23px; letter-spacing:-1px; margin:8px 0 10px; }
.category-copy p { color:var(--muted); font-size:13px; line-height:1.85; margin:0; }
.gift-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:90px; padding-block:88px; }
.gift-visual { position:relative; height:390px; overflow:hidden; border-radius:24px; background:#f9e8ee; }
.gift-visual-caption { position:absolute; top:27px; left:0; right:0; text-align:center; font-size:9px; letter-spacing:2px; color:#985b79; }
.gift-halo { position:absolute; width:270px; height:270px; border-radius:50%; left:calc(50% - 135px); top:67px; background:#fff5e1; }
.gift-box { position:absolute; top:158px; left:calc(50% - 97px); width:194px; height:151px; border-radius:4px 4px 12px 12px; background:repeating-linear-gradient(90deg,#f5c34d 0 18px,#ffd970 18px 36px); transform:rotate(-9deg); box-shadow:12px 17px 0 #af406b12; }
.gift-lid { position:absolute; top:-14px; left:-10px; right:-10px; height:36px; background:#ffdb79; border-radius:5px; box-shadow:0 5px 0 #b8852320; }
.gift-ribbon { position:absolute; width:35px; top:-14px; bottom:0; left:80px; background:#d80078; }
.gift-bow { position:absolute; width:76px; height:51px; top:-58px; border:13px solid #d80078; border-radius:50% 50% 0 50%; }
.bow-left { left:30px; transform:rotate(15deg); }
.bow-right { left:95px; transform:rotate(80deg); }
.gift-tag { position:absolute; right:12px; top:54px; padding:12px; background:#fffaf3; font-size:8px; line-height:1.4; text-align:center; transform:rotate(14deg); color:var(--pink); box-shadow:3px 3px 0 #b76c2c20; }
.gift-tag strong { font-size:13px; }
.gift-spark { position:absolute; color:var(--pink); line-height:1; }
.gift-spark-one { font-size:49px; top:88px; left:48px; }
.gift-spark-two { font-size:29px; bottom:42px; left:41px; }
.gift-sticker { position:absolute; right:23px; bottom:35px; display:flex; justify-content:center; align-items:center; text-align:center; width:100px; height:100px; border-radius:50%; background:var(--pink); color:white; font-size:13px; font-weight:750; transform:rotate(12deg); border:5px solid #f9e8ee; outline:1px dashed var(--pink); }
.gift-copy>p:not(.eyebrow) { font-size:14px; color:var(--muted); margin:20px 0; }
.gift-options { display:flex; gap:8px; }
.gift-options span { font-size:11px; background:#f9e3ed; color:#ae246b; padding:4px 13px; border-radius:30px; }
.gift-copy .gift-help { font-size:12px!important; }
.visit-section { display:grid; grid-template-columns:1fr 1fr; gap:90px; padding-block:80px; border-top:1px solid var(--line); }
.visit-intro { color:var(--muted); font-size:14px; margin:22px 0 27px; }
.store-details { margin:0 0 25px; }
.store-details>div { display:grid; grid-template-columns:91px 1fr; gap:12px; border-top:1px solid var(--line); padding:15px 0; font-size:14px; }
.store-details dt { color:var(--muted); font-size:12px; padding-top:2px; }
.store-details dd { margin:0; }
.store-details dd strong { font-weight:700; }
.store-details a:hover { text-decoration:underline; }
.location-card { background:#fff0cf; border:1px solid #eddfbc; border-radius:22px; overflow:hidden; align-self:center; }
.location-illustration { height:245px; position:relative; overflow:hidden; }
.location-circle { position:absolute; width:230px; height:230px; background:#ffe3a0; border-radius:50%; left:calc(50% - 115px); top:27px; }
.location-spark { position:absolute; right:45px; top:26px; color:var(--pink); font-size:39px; }
.storefront { position:absolute; width:223px; top:62px; left:calc(50% - 111px); background:#fffaf3; border:2px solid #a0667c; border-radius:4px 4px 0 0; z-index:1; }
.store-sign { text-align:center; font-size:20px; font-weight:900; color:var(--pink); padding:5px 0; border-bottom:2px solid #a0667c; }
.store-awning { height:28px; background:repeating-linear-gradient(90deg,#df2586 0 22px,#fffaf3 22px 44px); border-bottom:2px solid #a0667c; margin-inline:-7px; border-radius:0 0 5px 5px; }
.store-windows { padding:13px 15px 0; display:grid; grid-template-columns:1.3fr 1fr; gap:12px; }
.store-windows>div { height:87px; background:#f5dce3; border:2px solid #a0667c; display:flex; align-items:center; justify-content:center; color:var(--pink); }
.store-windows>div:first-child { height:68px; }
.store-windows span { font-size:17px; font-weight:900; line-height:1.1; transform:rotate(-7deg); }
.store-windows .store-door { background:#f4e8d3; border-bottom:none; position:relative; }
.store-door:after { content:""; width:4px; height:14px; background:#a0667c; position:absolute; right:7px; bottom:25px; }
.store-door span { font-size:10px; background:var(--paper); padding:5px; }
.location-ground { position:absolute; bottom:12px; left:15%; right:15%; border-bottom:2px solid #d5b984; }
.location-card-copy { padding:14px 30px 32px; text-align:center; }
.location-label { font-size:9px; letter-spacing:1.7px; color:var(--muted); font-weight:800; }
.location-card h3 { font-size:23px; margin:10px 0 3px; letter-spacing:-1px; }
.location-card p { font-size:13px; color:var(--muted); margin-bottom:21px; }
.location-card .button { width:100%; }
.site-footer { background:#382238; color:#fff4e0; padding-block:36px; }
.footer-inner { display:flex; justify-content:space-between; gap:25px; }
.footer-inner strong { font-size:18px; }
.footer-inner p { font-size:11px; color:#d2bccc; margin:8px 0 0; }
.footer-inner>p { text-align:right; margin:0; }
.footer-inner small { font-size:9px; letter-spacing:1px; }
.cookie{position:absolute;width:110px;height:110px;border-radius:50%;border:7px solid #d59848;box-shadow:5px 8px 0 #6d3a1717;background:radial-gradient(ellipse at 30% 25%,#65402b 0 6px,transparent 7px),radial-gradient(ellipse at 70% 30%,#65402b 0 7px,transparent 8px),radial-gradient(ellipse at 50% 65%,#65402b 0 8px,transparent 9px),radial-gradient(ellipse at 18% 70%,#65402b 0 5px,transparent 6px),radial-gradient(ellipse at 83% 72%,#65402b 0 5px,transparent 6px),#e5b56d}.cookie-one{left:23%;top:51px;transform:rotate(-20deg)}.cookie-two{left:46%;top:82px;transform:rotate(20deg);width:92px;height:92px}.wrapped-candy{position:absolute;width:86px;height:55px;border-radius:45%;background:repeating-linear-gradient(100deg,#d65e7e 0 15px,#ffe7d8 15px 25px);box-shadow:3px 6px 0 #72344412}.wrapped-candy:before,.wrapped-candy:after{content:"";position:absolute;top:3px;width:28px;height:48px;background:#d65e7e;clip-path:polygon(0 0,100% 30%,100% 70%,0 100%)}.wrapped-candy:before{left:-24px}.wrapped-candy:after{right:-24px;transform:rotate(180deg)}.sweet-one{left:24%;top:68px;transform:rotate(-25deg)}.sweet-two{left:49%;top:118px;transform:rotate(22deg);filter:hue-rotate(32deg)}.choco-tablet{position:absolute;left:calc(50% - 60px);top:48px;display:grid;grid-template-columns:repeat(2,50px);gap:5px;padding:7px;background:#543526;transform:rotate(22deg);box-shadow:8px 8px 0 #40382417}.choco-tablet i{height:36px;background:#784b34;border:5px outset #986748}.stock-note{font-size:11px;color:var(--muted);text-align:right;margin:18px 0 0}
@media(min-width:1400px) { .hero { padding-block:70px 34px; } .brand-scene { height:520px; } }
@media(max-width:1050px) {
    .site-header nav { gap:18px; font-size:12px; }
    .hero { gap:22px; } .brand-scene { height:450px; } .logo-disc { width:79%; }
    .hero-description { font-size:12px; } .button { padding-inline:18px; gap:13px; }
    .label-sweet { left:-7px; top:55px; } .label-gift { right:0; bottom:61px; padding:10px 14px; }
    .star-top { top:37px; right:0; font-size:50px; } .star-bottom { bottom:65px; left:12px; }
    .about-section,.gift-section,.visit-section { gap:45px; }
    .category-copy { padding-inline:21px; } .gift-sticker { right:12px; }
}
@media(max-width:760px) {
    html { scroll-padding-top:140px; }
    .wrap { width:calc(100% - 40px); }
    .header-inner { flex-wrap:wrap; justify-content:center; gap:13px; padding-block:13px; }
    .brand { font-size:18px; gap:9px; } .brand-mark { width:40px; } .brand small { font-size:7px; margin-top:5px; }
    .site-header nav { width:100%; justify-content:center; gap:20px; font-size:11px; }
    .nav-visit { padding:0; border:0; } .nav-visit span { margin-left:3px; }
    .hero { grid-template-columns:1fr; padding-block:39px 10px; gap:15px; }
    .hero-copy { text-align:center; } .hero .eyebrow { font-size:10px; margin-bottom:21px; }
    h1 { font-size:45px; letter-spacing:-2.8px; margin-bottom:21px; }
    .hero-description { font-size:12px; } .hero-tags,.actions,.hero-note { justify-content:center; }
    .hero-tags { margin-bottom:23px; } .button { font-size:11px; padding-inline:18px; min-height:48px; }
    .hero-note { font-size:9px; margin-top:23px; gap:6px; }
    .brand-scene { width:min(460px,100%); margin:auto; height:auto; aspect-ratio:1.13; }
    .logo-disc { width:72%; } .scene-ring { width:85%; } .ring-two { width:97%; }
    .scene-kicker { top:0; font-size:7px; letter-spacing:2px; }
    .label-sweet { left:0; top:35px; padding:8px 13px; font-size:9px; } .label-sweet span { font-size:18px; }
    .label-gift { right:0; bottom:38px; padding:8px 12px; gap:8px; font-size:8px; } .label-gift strong { font-size:15px; } .gift-symbol { font-size:27px; }
    .star-top { font-size:44px; top:24px; right:8px; } .star-bottom { font-size:36px; bottom:29px; left:22px; }
    .scene-caption { bottom:0; font-size:8px; }
    .hero-bottom { font-size:9px; margin-top:14px; padding-block:17px; }
    .ticker { padding-block:12px; } .ticker>div { font-size:11px; gap:24px; letter-spacing:1.5px; } .ticker span { font-size:18px; }
    h2 { font-size:27px; letter-spacing:-1.4px; } .eyebrow { font-size:9px; margin-bottom:13px; }
    .about-section { grid-template-columns:1fr; gap:23px; padding-block:48px; }
    .about-copy { font-size:13px; padding:0; }
    .snacks-section { padding-block:46px; } .section-heading { margin-bottom:24px; } .section-heading>p { display:none; }
    .snack-grid { grid-template-columns:1fr; gap:18px; }
    .category-card { display:grid; grid-template-columns:42% 1fr; border-radius:14px; }
    .category-art { height:190px; } .category-copy { align-self:center; padding:22px 16px; }
    .category-copy h3 { font-size:20px; } .category-copy p { font-size:12px; } .category-number { font-size:8px; letter-spacing:.8px; }
    .art-label { left:13px; top:15px; font-size:8px; letter-spacing:1px; }
    .cookie { width:85px; height:85px; } .cookie-one { left:9%; top:49px; } .cookie-two { width:73px; height:73px; left:35%; top:94px; }
    .wrapped-candy { width:64px; height:44px; } .wrapped-candy:before,.wrapped-candy:after { width:20px; height:38px; } .wrapped-candy:before { left:-17px; } .wrapped-candy:after { right:-17px; }
    .sweet-one { left:20%; top:57px; } .sweet-two { left:38%; top:113px; }
    .choco-tablet { grid-template-columns:repeat(2,35px); left:calc(50% - 44px); top:51px; gap:4px; padding:5px; } .choco-tablet i { height:29px; border-width:4px; }
    .mini-spark { font-size:23px; right:12px; bottom:10px; } .stock-note { font-size:10px; text-align:left; }
    .gift-section { grid-template-columns:1fr; gap:29px; padding-block:48px; } .gift-visual { height:350px; } .gift-box { top:140px; } .gift-halo { top:49px; }
    .gift-copy>p:not(.eyebrow) { font-size:13px; } .gift-copy .button { width:100%; }
    .visit-section { grid-template-columns:1fr; gap:32px; padding-block:48px; }
    .store-details>div { font-size:13px; } .location-card { width:100%; }
    .footer-inner { display:block; } .footer-inner>p { text-align:left; margin-top:22px; }
}
@media(max-width:360px) {
    .wrap { width:calc(100% - 28px); } .site-header nav { gap:14px; font-size:10px; }
    h1 { font-size:39px; } .desktop-break { display:none; }
    .actions { gap:8px; } .button { padding-inline:13px; gap:9px; }
    .hero-note { font-size:8px; } .hero-tags span { font-size:10px; }
    .label-sweet { top:24px; } .label-gift { bottom:26px; }
    .category-card { grid-template-columns:39% 1fr; } .category-copy { padding-inline:12px; } .category-copy p { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; } .button { transition:none; } .button:hover { transform:none; }
}
/* Kakao channel contact links: no third-party SDK or tracking script required. */
.kakao-button { background:#fee500; border:1px solid #e7cf00; color:#191919; }
.kakao-button:hover { background:#f1d900; }
.kakao-floating { position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:15; display:flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:13px 21px; border-radius:30px; background:#fee500; color:#191919; border:1px solid #e7cf00; box-shadow:0 5px 20px #38223824; font-size:13px; font-weight:800; }
.kakao-floating:hover { background:#f1d900; }
.kakao-bubble { width:23px; height:23px; flex-shrink:0; }
.site-footer { padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px)); }
@media(max-width:760px) {
    .kakao-floating { right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); min-height:49px; padding:11px 17px; font-size:12px; gap:8px; }
    .gift-actions { flex-direction:column; }
}