/* ===== 비교 시안: 디자인 보강 (2026.10.28) =====
   레이아웃·문구는 그대로 두고 색·리듬·글씨 대비만 덧입힌다.
   보조색은 브랜드 선화(kids.svg)에 이미 쓰인 연보라·버터 노랑만 사용. */
:root{--lilac:#E4DAE9;--lilac-soft:#F2EDF4;--butter:#FBE8AA;--butter-soft:#FDF5D9}

/* 1. 작은 글씨 또렷하게 */
.eyebrow{opacity:.85}
.section-kicker{font-size:11px}
.section-kicker span:first-child::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--butter);box-shadow:0 0 0 1px var(--brown);margin-right:9px;vertical-align:1px}

/* 2. 첫 화면: 패키지 뒤에 선화 색 빛 번짐, 칩 크게 */
.hero-stage::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;background:radial-gradient(circle at 70% 28%,#FBE8AA 0,transparent 36%),radial-gradient(circle at 26% 76%,#D8CAE3 0,transparent 42%)}
.hero-text{background:linear-gradient(160deg,var(--cream) 55%,var(--lilac-soft))}
.chip-a{width:clamp(125px,16vw,225px)}
.chip-b{width:clamp(135px,15vw,235px)}
.hero h1 .hero-en{background:linear-gradient(transparent 64%,var(--butter) 64%,var(--butter) 92%,transparent 92%);padding:0 .08em}

/* 3. 이야기 제목에 손으로 칠한 듯한 형광 밑줄 */
.story-heading h2 .soft-text,.story-heading h1 .soft-text{background:linear-gradient(transparent 60%,var(--butter) 60%,var(--butter) 90%,transparent 90%);padding:0 .1em}

/* 4. 슬로건 흐르는 띠 */
.slogan-band{background:var(--butter);color:var(--brown);overflow:hidden;border-block:1px solid var(--brown);margin:0 0 10px}
.slogan-track{display:flex;width:max-content;animation:sloganFlow 38s linear infinite}
.slogan-track span{font:500 clamp(22px,2.6vw,38px)/1 var(--title);letter-spacing:-.04em;padding:22px 0;white-space:nowrap}
.slogan-track span::after{content:'✦';font-size:.55em;margin:0 .9em;vertical-align:.25em}
@keyframes sloganFlow{to{transform:translateX(-50%)}}
.paused .slogan-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.slogan-track{animation:none}}

/* 5. 제품 수치: 둥근 배지 */
.nutrition{gap:12px}
.nutrition>div{border:0;padding:20px 18px;border-radius:18px;background:var(--cream)}
.nutrition>div:first-child{padding-left:18px}
.nutrition>div:nth-child(2){background:var(--butter-soft)}
.nutrition>div:nth-child(3){background:var(--lilac-soft)}

/* 6. 재료 탭: 선택된 탭을 버터색 바닥으로 */
.ingredient-tabs button{border-radius:10px 10px 0 0;transition:background .3s}
.ingredient-tabs button[aria-selected=true]{background:var(--butter-soft)}

/* 7. 만드는 과정: 연한 버터 배경 + 번호 동그라미 */
.process{background:linear-gradient(180deg,var(--paper),var(--butter-soft) 22%,var(--butter-soft) 78%,var(--paper))}
.steps article>span{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding:0;background:var(--brown);color:var(--cream);font-size:12px;letter-spacing:.02em}

/* 8. 함께 웃는 순간: 연보라 배경 */
.everyday{background:linear-gradient(180deg,var(--lilac-soft),var(--cream) 70%)}

/* 9. 소식 카드: 카드마다 다른 바탕색 */
.journal-brand{background:var(--lilac-soft)}
.journal-product{background:var(--butter-soft)}

/* 10. 버튼 호버에 버터색 */
.round-link:hover{background:var(--butter);color:var(--brown);border-color:var(--brown)}
.round-link.cream:hover{background:var(--butter);color:var(--brown)}

/* 모바일 */
@media(max-width:760px){
 .section-kicker{font-size:10px}
 .hero .eyebrow,.story-heading .eyebrow,.film-heading .eyebrow,.product-copy .eyebrow{font-size:10px}
 .chip-a{width:128px}
 .chip-b{width:118px;top:6%}
 .slogan-track span{font-size:22px;padding:16px 0}
 .nutrition{gap:8px}
 .nutrition>div,.nutrition>div:first-child{padding:14px 12px;border-radius:14px}
 .steps article>span{width:36px;height:36px;font-size:11px}
}