@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,700;1,800&display=swap');

:root {
    --pink:      #5ABAFF;
    --pink-dk:   #2E9BE8;
    --pink-lt:   #B8DEFF;
    --pink-bg:   #EDF6FF;
    --text:      #1A1A1A;
    --muted:     #888;
    --dim:       #BBB;
    --border:    #E0EEFF;
    --bg:        #FFFFFF;
    --bg2:       #F5FAFF;
    --transition: all 0.25s ease;
    /* legacy aliases used in sub-pages */
    --gold:      var(--pink);
    --gold-dk:   var(--pink-dk);
    --gold-lt:   var(--pink-lt);
    --cream:     var(--text);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--pink-lt); border-radius: 2px; }

body {
    font-family: 'Nunito', sans-serif;
    font-size: .95rem;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.6rem; }
.section-eyebrow { display: block; font-size: .68rem; letter-spacing: .35em; text-transform: uppercase; color: var(--pink); margin-bottom: 1rem; font-weight: 700; }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.active { opacity: 1; transform: none; }
.slide-left  { opacity:0; transform:translateX(-30px); transition:opacity .7s ease, transform .7s ease; }
.slide-right { opacity:0; transform:translateX(30px);  transition:opacity .7s ease, transform .7s ease; }
.slide-up    { opacity:0; transform:translateY(30px);  transition:opacity .7s ease, transform .7s ease; }
.slide-left.active, .slide-right.active, .slide-up.active { opacity:1; transform:none; }

/* ── NOTICE BAR ── */
.notice-bar {
    background: var(--pink); color: #fff;
    text-align: center; padding: .65rem 2.5rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .03em;
    position: relative; z-index: 1002;
}
.notice-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── NAV ── */
nav {
    position: sticky; top: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    z-index: 1000; padding: 0;
}
.nav-content { display: flex; align-items: center; justify-content: space-between; height: 90px; }
.logo { display: flex; align-items: center; }
.logo-svg { height: 42px; width: auto; }
.nav-icons { display: flex; align-items: center; gap: 1rem; }
.nav-icon-btn { font-size: 1.1rem; color: var(--text); padding: .3rem; transition: color .2s; }
.nav-icon-btn:hover { color: var(--pink); }
.nav-links { display: flex; gap: 2.5rem; }
.nav-links a { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--pink); }

/* CATEGORY BAR */
.cat-bar { background: var(--bg); border-bottom: 1px solid var(--border); overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cat-bar::-webkit-scrollbar { display: none; }
.cat-bar-inner { display: inline-flex; }
.cat-tab {
    display: inline-block; padding: .85rem 1.4rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s; white-space: nowrap; cursor: pointer;
}
.cat-tab:hover { color: var(--text); }
.cat-tab.active { color: var(--pink); border-bottom-color: var(--pink); }

/* ── MAIN BANNER ── */
.main-banner { display: block; overflow: hidden; }
.main-banner a { display: block; }
.banner-img { width: 100%; height: auto; display: block; }

/* ── CHARACTER FILTER ── */
.char-section { padding: 2rem 0 1rem; background: var(--bg); border-bottom: 1px solid var(--border); }
.char-scroll { display: flex; gap: 1.2rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
.char-scroll::-webkit-scrollbar { display: none; }
.char-item { flex-shrink: 0; text-align: center; cursor: pointer; }
.char-icon-wrap {
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--pink-bg); border: 2px solid transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; margin: 0 auto .5rem;
    transition: border-color .2s, background .2s;
}
.char-item:hover .char-icon-wrap,
.char-item.active .char-icon-wrap { border-color: var(--pink); background: var(--pink-lt); }
.char-name { font-size: .72rem; font-weight: 700; color: var(--muted); }
.char-item.active .char-name { color: var(--pink); }

/* ── HOME SECTIONS ── */
.home-section { padding: 3.5rem 0; }
.home-section + .home-section { border-top: 1px solid var(--border); }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem; }
.section-head h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: .05em; }
.see-more { font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .05em; transition: color .2s; }
.see-more:hover { color: var(--pink); }

/* ── PRODUCT GRID ── */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* ── PRODUCT CARD ── */
.product-card { cursor: pointer; }
.product-img-wrap {
    position: relative; aspect-ratio: 1/1;
    background: var(--pink-bg); border-radius: 12px;
    overflow: hidden; margin-bottom: 10px;
    transition: box-shadow .25s;
}
.product-card:hover .product-img-wrap { box-shadow: 0 4px 16px rgba(255,123,172,.18); }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.product-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; border-radius: 12px; }
.heart-btn { position: absolute; bottom: 10px; right: 10px; font-size: 1.15rem; color: var(--dim); background: rgba(255,255,255,.85); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: color .2s; }
.heart-btn:hover { color: var(--pink); }
.product-badge { position: absolute; top: 10px; left: 10px; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; }
.badge-new { background: var(--text); color: #fff; }
.badge-coming { background: #fff; color: var(--pink); border: 1px solid var(--pink-lt); }
.badge-best { background: var(--pink); color: #fff; }
.badge-soldout { background: rgba(255,255,255,.9); color: var(--dim); border: 1px solid var(--border); }
.product-brand { display: block; font-size: .68rem; font-weight: 700; color: var(--pink); margin-bottom: 3px; letter-spacing: .05em; }
.product-name { font-size: .88rem; font-weight: 700; color: var(--text); margin-bottom: 5px; line-height: 1.35; }
.product-price-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.price-sale { font-size: .9rem; font-weight: 800; color: var(--text); }
.price-original { font-size: .78rem; color: var(--dim); text-decoration: line-through; }
.price-pct { font-size: .75rem; font-weight: 800; color: var(--pink); }
.price-coming { font-size: .8rem; font-weight: 700; color: var(--muted); }
.price-soldout { font-size: .8rem; font-weight: 700; color: var(--dim); letter-spacing: .05em; }
.product-card.disabled { pointer-events: none; opacity: .7; }

/* ── SCOOP MARKET ── */
.scoop-section {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #d4f5a8 0%, #e8fad0 40%, #c8f098 100%);
    padding: 5rem 1rem 4rem; text-align: center;
}
/* 배경 버블 */
.scoop-bg-bubble {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.25);
}
.scoop-bb1 { width: 220px; height: 220px; left: -60px; bottom: -40px; }
.scoop-bb2 { width: 160px; height: 160px; right: -40px; top: 20px; }
.scoop-bb3 { width: 100px; height: 100px; right: 15%; bottom: 10%; }

/* 젤리빈 */
.jbean {
    position: absolute; border-radius: 50%;
    opacity: .88;
}
.jb1  { width:14px; height:26px; background:#F7A8C4; top:8%;  left:18%; transform:rotate(30deg); }
.jb2  { width:13px; height:24px; background:#A8D8F7; top:14%; left:42%; transform:rotate(-20deg); }
.jb3  { width:12px; height:22px; background:#F7D9A8; top:6%;  left:62%; transform:rotate(50deg); }
.jb4  { width:14px; height:25px; background:#A8F7C8; top:22%; right:12%; transform:rotate(-35deg); }
.jb5  { width:13px; height:23px; background:#D4A8F7; top:32%; left:8%;  transform:rotate(15deg); }
.jb6  { width:12px; height:22px; background:#F7A8A8; top:18%; right:28%; transform:rotate(60deg); }
.jb7  { width:14px; height:26px; background:#A8F7F0; top:28%; left:55%; transform:rotate(-10deg); }

/* 별 장식 */
.sc-star {
    position: absolute; line-height: 1; font-style: normal;
}
.sc-star-lg { font-size: 2.8rem; }
.sc-star-md { font-size: 1.8rem; }
.sc-star-sm { font-size: 1.2rem; }
.sc-star-y  { color: #F7D94A; top: 38%; left: 5%; filter: drop-shadow(0 0 4px #F7D94A88); }
.sc-star-g  { color: #7AE87A; bottom: 30%; left: 12%; filter: drop-shadow(0 0 3px #7AE87A88); }
.sc-star-pk { color: #F766C0; top: 22%; right: 6%; filter: drop-shadow(0 0 4px #F766C088); }
.sc-star-tl { color: #4AD4D4; bottom: 35%; right: 9%; filter: drop-shadow(0 0 3px #4AD4D488); }
.sc-star-y2 { color: #F7C84A; bottom: 20%; left: 5%; }
.sc-star-pk2{ color: #F766C0; top: 55%; right: 4%; }

/* 메인 타원 */
.scoop-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.scoop-oval {
    background: linear-gradient(160deg, #74d7f0 0%, #3ab8dc 50%, #2aa0c8 100%);
    border: 3px solid #1a1a1a;
    border-radius: 50%;
    padding: 2.8rem 4.5rem;
    box-shadow: 4px 6px 0 #1a1a1a;
}
.scoop-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: 800; font-style: italic;
    color: #fff; line-height: 1.05;
    text-shadow: 3px 3px 0 #1a1a1a, -1px -1px 0 #1a1a1a, 2px -1px 0 #1a1a1a, -1px 2px 0 #1a1a1a;
}

/* Coming Soon */
.scoop-coming {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800; color: #3ab8dc;
    letter-spacing: .02em;
    font-family: 'Nunito', sans-serif;
}

/* 칩 */
.scoop-chips { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.scoop-chip {
    background: rgba(255,255,255,.6); border: 1.5px solid rgba(0,0,0,.12);
    border-radius: 100px; padding: .45rem 1.2rem;
    font-size: .78rem; color: #333; font-weight: 600;
    backdrop-filter: blur(4px);
}
.scoop-chip b { color: #2196a0; margin-right: .3rem; }

/* 인스타 버튼 */
.scoop-ig-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    background: #1a1a1a; color: #fff;
    font-size: .82rem; font-weight: 800; padding: .85rem 1.8rem;
    border-radius: 100px; transition: background .2s;
}
.scoop-ig-btn:hover { background: #3ab8dc; }

/* ── FOOTER ── */
footer { padding: 3.5rem 0 2rem; background: var(--text); color: rgba(255,255,255,.55); font-size: .8rem; }
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-logo { margin-bottom: .8rem; }
.footer-main p { line-height: 1.8; max-width: 240px; }
.footer-info h4, .footer-contact h4 { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--pink-lt); font-weight: 700; margin-bottom: 1rem; }
.footer-info p, .footer-contact p { margin-bottom: .45rem; }
.footer-copy { margin-top: 2rem; font-size: .66rem; opacity: .3; }

/* ── HAMBURGER ── */
.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 4.5px; padding: 6px; z-index: 1002; }
.nav-hamburger span { display: block; width: 20px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 999; }
.nav-overlay.open { display: block; }

@media(max-width:900px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .nav-hamburger { display: flex; }
    .nav-links {
        display: flex; flex-direction: column; position: fixed;
        top: 0; right: -100%; width: 72%; max-width: 280px; height: 100vh;
        background: #fff; padding: 5rem 2rem 3rem; gap: 1.8rem;
        transition: right .35s ease; z-index: 1001;
        border-left: 1px solid var(--border); box-shadow: -4px 0 20px rgba(0,0,0,.08);
    }
    .nav-links.open { right: 0; }
    .nav-links a { font-size: .95rem; color: var(--text) !important; }
    .footer-content { grid-template-columns: 1fr; gap: 2rem; }
    .market-info-row { gap: .8rem; }
}
@media(max-width:560px) {
    .container { padding: 0 1rem; }
    .scoop-oval { padding: 2rem 3rem; }
    .banner-sub { font-size: .82rem; }
    .home-section { padding: 2.4rem 0; }
    .section-head { margin-bottom: 1.2rem; }
    .product-grid { gap: 10px; }
    .product-name { font-size: .8rem; }
    .price-sale { font-size: .82rem; }
    .market-banner { padding: 3rem 1rem; }
    .market-sub { font-size: .82rem; }
    footer { padding: 2.5rem 0 1.5rem; }
}