/* Layout: lemon-soda bands — a sunny hero with rising bubbles, then alternating white / mint bands, coral CTA */
:root{
  --sky:#eaf7ff;
  --mint:#e3f8ef;
  --paper:#ffffff;
  --lemon:#ffd84a;
  --lemon-soft:#fff4c2;
  --soda:#2b8fd6;
  --coral:#ff6b6b;
  --ink:#24324a;
  --ink-soft:#5a6a84;
  --line:#d6e6f2;
  --display:"Jua","Noto Sans KR",system-ui,sans-serif;
  --body:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}img{max-width:100%}[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7;word-break:keep-all}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.25;text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--soda)}
:focus-visible{outline:3px solid var(--soda);outline-offset:3px;border-radius:6px}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.logo{font-family:var(--display);font-size:1.3rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo i{width:26px;height:26px;border-radius:50%;background:var(--lemon);display:grid;place-items:center;font-style:normal;font-size:.9rem}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top nav a{color:var(--ink-soft);text-decoration:none;font-size:.95rem;font-weight:500}
.top nav a:hover{color:var(--soda)}
.top .call{font-weight:700;color:var(--coral);text-decoration:none;white-space:nowrap}
@media (max-width:720px){.top nav{display:none}}

.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky),var(--lemon-soft))}
.hero .wrap{position:relative;z-index:1;padding-block:72px 64px;display:grid;gap:22px}
.kicker{display:inline-flex;width:max-content;max-width:100%;gap:8px;align-items:center;background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;padding:4px 14px;font-weight:700;font-size:.85rem;letter-spacing:.04em}
.kicker b{color:var(--coral)}
.hero h1{font-size:clamp(2.3rem,7vw,4.4rem);color:var(--ink)}
.hero h1 .hl{background:linear-gradient(transparent 60%,var(--lemon) 60%);padding:0 .1em}
.hero h1 .pop{color:var(--soda)}
.hero p.lead{max-width:34em;font-size:1.08rem;color:var(--ink-soft)}
.from{font-family:var(--display);font-size:1.25rem}
.from strong{font-weight:400;color:var(--coral);font-size:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--paper);border-radius:999px;padding:6px 14px;font-size:.9rem;font-weight:500;box-shadow:0 2px 0 var(--line)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:14px;padding:12px 20px;font:700 1rem var(--body);color:var(--ink);background:var(--paper);text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.main{background:var(--coral);color:#fff}
.btn.tg{background:var(--soda);color:#fff}
.bubbles{position:absolute;inset:0;pointer-events:none}
.bubbles span{position:absolute;bottom:-60px;border-radius:50%;border:2px solid color-mix(in srgb,var(--soda) 35%,transparent);background:color-mix(in srgb,var(--paper) 55%,transparent);animation:rise linear infinite}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-760px)}}
@media (prefers-reduced-motion:reduce){.bubbles span{animation:none;bottom:auto}}

section.band{padding-block:72px}
section.band.mint{background:var(--mint)}
.sec-head{display:grid;gap:10px;margin-bottom:32px;max-width:40em}
.sec-head small{font-weight:700;font-size:.8rem;letter-spacing:.12em;color:var(--soda)}
.sec-head h2{font-size:clamp(1.7rem,4.2vw,2.4rem)}
.sec-head p{color:var(--ink-soft)}

.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why article{display:grid;gap:8px;align-content:start;padding:22px;border-radius:18px;background:var(--lemon-soft)}
.why .ico{font-family:var(--display);font-size:1.8rem;line-height:1}
.why h3{font-size:1.2rem}
.why p{color:var(--ink-soft);font-size:.95rem}
@media (max-width:760px){.why{grid-template-columns:1fr}}

.shops{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.shop{background:var(--paper);border-radius:18px;padding:22px 20px;display:grid;gap:10px;align-content:start;border:1.5px solid var(--line)}
.shop h3{font-size:1.2rem}
.shop .won{font-family:var(--display);font-size:1.7rem;color:var(--soda);font-variant-numeric:tabular-nums;line-height:1.1}
.shop .won small{font-family:var(--body);font-size:.8rem;color:var(--ink-soft);font-weight:500}
.shop .meta{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.8rem;font-weight:700;border-radius:8px;padding:2px 10px}
.tag.time{background:var(--sky);color:var(--ink)}
.tag.in{background:var(--mint);color:#1d7a52;border:1px solid #9fdcc0}
.tag.out{background:#ffe9e9;color:#c24141;border:1px solid #ffc2c2}
.shop.low{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--lemon)}
.shop .best{font-size:.78rem;font-weight:700;color:var(--coral)}

.price-box{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:start;margin-top:36px}
.table-wrap{overflow-x:auto;border:2px solid var(--ink);border-radius:18px;background:var(--paper)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
caption{text-align:left;padding:12px 18px 0;font-size:.85rem;color:var(--ink-soft)}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--lemon);font-weight:700;font-size:.9rem}
td.num{text-align:right;font-weight:700}
th.num{text-align:right}
tr:last-child td{border-bottom:0}
.note{background:var(--paper);border:1.5px dashed var(--soda);border-radius:18px;padding:22px;display:grid;gap:10px}
.note h3{font-size:1.25rem}
.note ul{margin:0;padding-left:1.2em;display:grid;gap:6px;color:var(--ink-soft)}
@media (max-width:760px){.price-box{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:6px;align-content:start}
.steps li::before{content:counter(s);width:42px;height:42px;border-radius:50%;background:var(--soda);color:#fff;display:grid;place-items:center;font-family:var(--display);font-size:1.3rem}
.steps h3{font-size:1.15rem}
.steps p{color:var(--ink-soft);font-size:.95rem}
@media (max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.steps{grid-template-columns:1fr}}

.loc{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.map{border-radius:18px;background:
  linear-gradient(90deg,transparent 48%,var(--paper) 48%,var(--paper) 52%,transparent 52%),
  linear-gradient(0deg,transparent 46%,var(--paper) 46%,var(--paper) 54%,transparent 54%),
  var(--sky);min-height:240px;position:relative;border:2px solid var(--ink)}
.map .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);background:var(--coral);color:#fff;font-weight:700;border-radius:12px;padding:6px 12px;white-space:nowrap;font-size:.9rem}
.map .pin::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:8px solid transparent;border-bottom:0;border-top-color:var(--coral)}
.map .mark{position:absolute;right:12%;bottom:16%;background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;padding:2px 8px;font-size:.8rem;font-weight:700}
.loc .info{display:grid;gap:14px;align-content:start;min-width:0}
.areas{display:flex;flex-wrap:wrap;gap:8px}
.areas a{background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:4px 14px;text-decoration:none;color:var(--ink);font-weight:500;font-size:.9rem}
.areas a.on{border-color:var(--soda);color:var(--soda)}
@media (max-width:760px){.loc{grid-template-columns:1fr}}

.contacts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ct{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:6px;min-width:0}
.ct span{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--ink-soft)}
.ct b{font-family:var(--display);font-weight:400;font-size:1.2rem;overflow-wrap:anywhere;user-select:all}
.ct button{justify-self:start;border:0;background:var(--sky);color:var(--soda);font:700 .85rem var(--body);border-radius:8px;padding:5px 12px;cursor:pointer}
.ct button:hover{background:var(--line)}
@media (max-width:860px){.contacts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.contacts{grid-template-columns:1fr}}

.faq{display:grid;gap:12px;max-width:760px}
details{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:16px 20px}
details[open]{border-color:var(--soda)}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--display);font-size:1.3rem;color:var(--soda);line-height:1}
details[open] summary::after{content:"−"}
details p{margin-top:10px;color:var(--ink-soft)}

.final{background:var(--lemon);text-align:center}
.final .wrap{display:grid;gap:16px;justify-items:center;padding-block:64px}
.final h2{font-size:clamp(1.8rem,5vw,2.8rem)}
footer{background:var(--ink);color:#c9d6e8;font-size:.85rem}
footer .wrap{padding-block:32px;display:grid;gap:8px}
footer a{color:#fff}
footer .warn{color:var(--lemon);font-weight:700}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-weight:500;z-index:20;max-width:calc(100% - 32px);text-align:center}

/* subpages */
.top nav a[aria-current="page"]{color:var(--soda)}
.page-hero{background:linear-gradient(180deg,var(--sky),var(--lemon-soft))}
.page-hero .wrap{padding-block:48px 44px;display:grid;gap:14px}
.page-hero h1{font-size:clamp(2rem,6vw,3.2rem)}
.page-hero p{max-width:36em;color:var(--ink-soft);font-size:1.05rem}
.crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem;color:var(--ink-soft);list-style:none;margin:0;padding:0}
.crumb li+li::before{content:"›";margin-right:6px}
.crumb a{color:var(--ink-soft)}
.more{display:inline-flex;margin-top:20px;font-weight:700;text-decoration:none}
.more:hover{text-decoration:underline}
.prose{max-width:44em;display:grid;gap:14px}
.prose p{color:var(--ink-soft)}
.detail{display:grid;gap:16px}
.venue{display:grid;grid-template-columns:200px 1fr;gap:20px;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:22px}
.venue .won{font-family:var(--display);font-size:1.8rem;color:var(--soda);line-height:1.1;font-variant-numeric:tabular-nums}
.venue .won small{font-family:var(--body);font-size:.8rem;color:var(--ink-soft)}
.venue h2{font-size:1.4rem}
.venue .body{display:grid;gap:8px;min-width:0}
.venue .body p{color:var(--ink-soft)}
.venue dl{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:.92rem}
.venue dl div{display:flex;gap:6px}
.venue dt{font-weight:700}
.venue dd{margin:0;color:var(--ink-soft)}
@media (max-width:640px){.venue{grid-template-columns:1fr}}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.calc form{display:grid;gap:16px;background:var(--paper);border:2px solid var(--ink);border-radius:18px;padding:22px}
.calc label{display:grid;gap:6px;font-weight:700;font-size:.92rem}
.calc select,.calc input{font:500 1rem var(--body);padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.result{background:var(--lemon);border-radius:18px;padding:24px;display:grid;gap:8px}
.result .total{font-family:var(--display);font-size:clamp(2rem,6vw,2.8rem);font-variant-numeric:tabular-nums;line-height:1.1}
.result p{font-size:.95rem}
@media (max-width:760px){.calc{grid-template-columns:1fr}}
.faq-group{display:grid;gap:12px;margin-bottom:36px}
.faq-group h2{font-size:1.4rem;margin-bottom:4px}
.facts{display:grid;gap:0;border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:var(--paper);margin:0}
.facts div{display:grid;grid-template-columns:6.5em 1fr;gap:12px;padding:14px 18px;border-top:1px dashed var(--line)}
.facts div:first-child{border-top:0}
.facts dt{font-weight:700;color:var(--ink-soft);font-size:.9rem}
.facts dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:10px;max-width:44em}
.checklist li{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:14px 18px;display:flex;gap:12px;align-items:flex-start}
.checklist li::before{content:"✓";font-family:var(--display);color:var(--soda);font-size:1.2rem;line-height:1.4}

/* home hero with photo */
.hero.photo{background:
  linear-gradient(90deg,rgba(20,14,10,.86) 0%,rgba(20,14,10,.62) 48%,rgba(20,14,10,.18) 100%),
  url("img/hero.jpg") 70% 30%/cover no-repeat,#1a120c}
.hero.photo .wrap{padding-block:96px 88px}
.hero.photo h1{color:#fff}
.hero.photo h1 .pop{color:var(--lemon)}
.hero.photo h1 .hl{background:linear-gradient(transparent 62%,rgba(255,216,74,.55) 62%)}
.hero.photo p.lead{color:rgba(255,255,255,.88)}
.hero.photo .from{color:#fff}
.hero.photo .from strong{color:var(--lemon)}
.hero.photo .kicker{background:rgba(255,255,255,.95);color:var(--ink)}
.hero.photo .chips span{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.hero.photo .btn{border-color:#fff;box-shadow:4px 4px 0 var(--lemon)}
.hero.photo .btn:hover{box-shadow:6px 6px 0 var(--lemon)}
.hero.photo .bubbles span{border-color:rgba(255,216,74,.35);background:rgba(255,216,74,.06)}
@media (max-width:640px){.hero.photo{background:
  linear-gradient(180deg,rgba(20,14,10,.55) 0%,rgba(20,14,10,.82) 100%),
  url("img/hero.jpg") 50% 20%/cover no-repeat,#1a120c}}
@media (max-width:420px){.logo{font-size:1.05rem}.top .call{font-size:.9rem}}

/* LED ticker */
.ticker{--tk-bg:#ef5b5b;position:relative;overflow:hidden;background:var(--tk-bg);color:#fff;font-family:Dotum,"돋움","Noto Sans KR",sans-serif;font-size:15px;font-weight:700;line-height:36px;height:36px;white-space:nowrap;border-bottom:2px solid #c94444;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.ticker::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.2px);background-size:3px 3px}
.tk-track{display:flex;width:max-content;animation:tk 17.5s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-run{display:flex}
.tk-item{padding-right:72px;text-shadow:0 0 6px rgba(255,255,255,.75),0 0 1px #fff;letter-spacing:.02em}
.tk-item .ev{color:#fff36b;text-shadow:0 0 8px rgba(255,243,107,.9);margin-right:6px}
.tk-item s{opacity:.8;margin-right:4px}
.tk-item .price{color:#fff36b;text-shadow:0 0 8px rgba(255,243,107,.9)}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tk-track{animation-duration:50s}}

/* red heel cursor */
html,body{cursor:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 64 64"%3E%3Cg transform="translate(0 -18)"%3E%3Cg transform="rotate(30 32 32) translate(0 -6)" stroke="%234a0a10" stroke-width="2.2" stroke-linejoin="round"%3E%3Cpath d="M52 25L58 25L56 58L53 58Z" fill="%23b5101f"/%3E%3Cpath d="M6 46C6 41 12 39 20 40C26 41 30 42 34 38C40 32 46 22 52 17C55 15 58 16 58 19L58 26C52 26 46 32 40 40C36 46 30 50 22 50L10 50C7 50 6 48 6 46Z" fill="%23e3142c"/%3E%3Cpath d="M20 40C26 41 30 42 34 38C40 32 46 22 52 17L54.5 20C48 26 42 34 36 40.5C31 44.5 25 44 20 40Z" fill="%237d0814" stroke-width="1.2"/%3E%3Cpath d="M9 45C11 43 15 42 18 42.5" fill="none" stroke="%23ff9aa5" stroke-width="1.6"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A') 3 5,auto}
a,button,summary,select,label,[role="button"]{cursor:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 64 64"%3E%3Cg transform="translate(0 -18)"%3E%3Cg transform="rotate(30 32 32) translate(0 -6)" stroke="%234a0a10" stroke-width="2.2" stroke-linejoin="round"%3E%3Cpath d="M52 25L58 25L56 58L53 58Z" fill="%23b5101f"/%3E%3Cpath d="M6 46C6 41 12 39 20 40C26 41 30 42 34 38C40 32 46 22 52 17C55 15 58 16 58 19L58 26C52 26 46 32 40 40C36 46 30 50 22 50L10 50C7 50 6 48 6 46Z" fill="%23e3142c"/%3E%3Cpath d="M20 40C26 41 30 42 34 38C40 32 46 22 52 17L54.5 20C48 26 42 34 36 40.5C31 44.5 25 44 20 40Z" fill="%237d0814" stroke-width="1.2"/%3E%3Cpath d="M9 45C11 43 15 42 18 42.5" fill="none" stroke="%23ff9aa5" stroke-width="1.6"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A') 3 5,pointer}
input[type="number"],input[type="text"]{cursor:text}