/* 밀코의 일상 — 참고 디자인(docs/img: HUSH · CRUDDLE · Liona · YUHZ)을 섞은 파스텔 장식형
   글꼴: 한글 제목 Jua · 영문 말랑 굵은 글자 Fredoka · 필기체 장식 Great Vibes · 본문 Pretendard
   메인 구성: 첫 화면 → 01 만드는 것 → 02 상품 → 03 이야기 → 04 주문 제작 → 05 대량 주문 → 06 판매처·인스타 → 문의 */
:root {
  --cream: #fff8f3;
  --ink: #2b2220;
  --sub: #8b7b75;
  --line: #f0dfd8;
  --pink: #f08fb0;
  --pink-deep: #e06492;
  --pink-soft: #ffe1eb;
  --sky: #9fd0f6;
  --sky-deep: #5aa8e6;
  --lilac: #c6aef0;
  --lilac-deep: #a07fdc;
  --lilac-soft: #f1eafc;
  --butter: #ffe7a0;
  --kakao: #fee500;
  --r-xl: 44px;
  --r-lg: 32px;
  --r-md: 22px;
  --wrap: 1240px;
  --display: 'Jua', 'Pretendard Variable', sans-serif;
  --round: 'Fredoka', 'Jua', sans-serif;
  --script: 'Great Vibes', cursive;
  --sans: 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream) var(--grain); color: var(--ink); font: 16px/1.7 var(--sans); letter-spacing: -0.01em; word-break: keep-all; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0; }
em { font-style: normal; color: var(--pink-deep); }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.spark, svg.star { fill: currentColor; stroke: none; }
.script { font-family: var(--script); font-weight: 400; }
::selection { background: var(--pink-soft); }

/* ---------------------------------------------------------------- 버튼 */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16px; border: 2px solid transparent; transition: transform .25s, box-shadow .25s; white-space: nowrap; }
.pill:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(224, 100, 146, .22); }
.pill svg { width: 18px; height: 18px; }
.pill-pink { background: linear-gradient(135deg, #f7a3c0, var(--pink-deep)); color: #fff; }
.pill-ink { background: var(--ink); color: #fff; }
.pill-line { border-color: var(--ink); background: transparent; }
.pill-white { background: #fff; color: var(--sky-deep); box-shadow: 0 8px 0 rgba(90, 168, 230, .25); }
.pill-kakao { background: var(--kakao); color: #3b1e1e; }
.pill-lilac { background: linear-gradient(135deg, #d4bff6, var(--lilac-deep)); color: #fff; }
.pill-arrow { display: inline-flex; align-items: center; gap: 4px; }
.arrow-dot { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--pink-deep); color: var(--pink-deep); transition: transform .25s, background .25s, color .25s; }
.pill-arrow:hover .arrow-dot { transform: rotate(-35deg); background: var(--pink-deep); color: #fff; }
.pill-arrow .pill-lilac + .arrow-dot { border-color: var(--lilac-deep); color: var(--lilac-deep); }
.pill-arrow:hover .pill-lilac + .arrow-dot { background: var(--lilac-deep); color: #fff; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-deep); }
.eyebrow svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- 머리: 정보 줄 + 가로 전체 메뉴 띠 */
.topbar { background: var(--ink); color: #e9dcd6; }
.topbar { display: flex; justify-content: space-between; padding: 9px max(24px, calc((100% - var(--wrap)) / 2 + 24px)); font: 600 12.5px/1 var(--round); letter-spacing: .14em; }
.topbar a:hover { color: var(--pink); }
.hd { position: sticky; top: 0; z-index: 40; width: 100%; background: rgba(255, 252, 249, .92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.hd.is-scrolled { box-shadow: 0 8px 24px rgba(160, 110, 120, .1); }
.hd-in { max-width: var(--wrap); margin: 0 auto; padding: 6px 24px; display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 16px; }
.gnb ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.gnb-l ul { justify-content: flex-end; }
.gnb a { display: block; padding: 8px 13px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: background .2s, color .2s; }
.gnb a:hover { background: var(--pink-soft); color: var(--pink-deep); }
.hd-spark svg { width: 13px; height: 13px; color: var(--lilac-deep); }
.logo img { height: 62px; width: auto; transition: transform .3s; }
.logo:hover img { transform: rotate(-6deg) scale(1.05); }
.hd-act { position: absolute; right: max(24px, calc((100% - var(--wrap)) / 2 + 24px)); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
.hd .pill { height: 40px; padding: 0 16px; font-size: 14px; }
.ic-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%; border: 0; background: transparent; }
.ic-btn:hover { background: var(--pink-soft); }
.menu-btn { display: none; }
.mnav { display: none; }

/* ---------------------------------------------------------------- 공통 섹션 머리 (번호 · 영문 · 제목 · 설명) */
.sec { max-width: var(--wrap); margin: 0 auto; padding: 120px 24px 0; }
.sec-head { text-align: center; margin-bottom: 46px; }
.sec-head.left { text-align: left; margin-bottom: 24px; }
.sec-no { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--round); letter-spacing: .12em; text-transform: uppercase; color: var(--pink-deep); }
.sec-no b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pink-soft); font-weight: 700; letter-spacing: 0; }
.sec-no svg { width: 12px; height: 12px; color: var(--lilac-deep); }
.sec-head h2 { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.3; margin: 16px 0 10px; }
.sec-head h2 .script { color: var(--pink); font-size: 1.1em; margin-left: 4px; }
.sec-sub { color: var(--sub); font-size: 17px; }
.hl { position: relative; display: inline-block; color: var(--pink-deep); z-index: 0; }
.hl::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: 6px; height: 14px; background: var(--pink-soft); border-radius: 8px; z-index: -1; transform: rotate(-1.5deg); }

/* ---------------------------------------------------------------- 첫 화면 (왼쪽 글 · 오른쪽 큰 사진 하나 — Liona 참고) */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(circle at 85% 20%, rgba(198, 174, 240, .45), transparent 40%),
  radial-gradient(circle at 10% 90%, rgba(255, 201, 168, .45), transparent 40%),
  linear-gradient(160deg, #fff1f5 0%, #fff8f3 60%); }
.hero::after { content: ''; position: absolute; inset: 0; background: var(--grain); pointer-events: none; }
.hero-in { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 70px 24px 90px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--round); letter-spacing: .16em; text-transform: uppercase; color: var(--sub); }
.hero-eyebrow svg { width: 12px; height: 12px; color: var(--pink); }
.hero-script { font: 400 clamp(40px, 4.6vw, 64px)/1 var(--script); color: var(--pink); margin: 22px 0 -6px; transform: rotate(-4deg); transform-origin: left; }
.hero h1 { font-size: clamp(44px, 5.6vw, 76px); line-height: 1.2; letter-spacing: -0.02em; }
.hero-desc { margin-top: 22px; color: #6d5e59; font-size: 18px; line-height: 1.75; }
.hero .btns { margin-top: 34px; }
.hero-stores { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 34px; padding-top: 22px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--sub); }
.hero-stores span { display: inline-flex; align-items: center; gap: 6px; }
.hero-stores i { width: 8px; height: 8px; border-radius: 50%; background: var(--b); }
.hero-visual { position: relative; aspect-ratio: 1 / 1.05; }
.hero-blob { position: absolute; inset: 6% 2% 4% 8%; border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%; background: linear-gradient(135deg, #ffd3e2, #e8dcfb); animation: morph 12s ease-in-out infinite; }
@keyframes morph { 50% { border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; } }
.hero-main { position: absolute; left: 14%; right: 8%; top: 0; bottom: 6%; border-radius: 999px 999px 40px 40px; overflow: hidden; border: 10px solid #fff; box-shadow: 0 30px 60px rgba(160, 90, 110, .22); }
.hero-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.hero-main:hover img { transform: scale(1.05); }
.hero-sub { position: absolute; left: 0; bottom: 4%; width: 34%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 8px solid #fff; box-shadow: 0 18px 36px rgba(160, 90, 110, .22); animation: bob 6s ease-in-out infinite; }
.hero-sub img { width: 100%; height: 100%; object-fit: cover; }
@keyframes bob { 50% { translate: 0 -10px; } }
.hero-ring { right: 0; top: 4%; width: 132px; height: 132px; color: var(--lilac-deep); background: #fff; border-radius: 50%; box-shadow: 0 12px 28px rgba(160, 127, 220, .25); }
.hero-tag { position: absolute; right: 2%; bottom: 14%; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: #fff; font: 400 17px var(--display); box-shadow: 0 10px 24px rgba(160, 90, 110, .18); }
.hero-tag svg { width: 14px; height: 14px; color: var(--pink); }

.ring { position: absolute; width: 170px; height: 170px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.ring text { font: 700 15px var(--round); letter-spacing: .12em; fill: currentColor; stroke: none; }
.ring-in { width: 46%; height: 46%; border-radius: 50%; display: grid; place-items: center; background: #fff; overflow: hidden; }
.ring-in img { width: 82%; }
@keyframes spin { to { transform: rotate(360deg); } }
.chrome path { stroke: none; }
.chrome { position: absolute; z-index: 2; height: auto; filter: drop-shadow(0 18px 24px rgba(80, 60, 80, .28)); }
@keyframes drift { 50% { translate: 0 -16px; rotate: 12deg; } }
@keyframes twinkle { 50% { transform: scale(.55) rotate(25deg); opacity: .55; } }
.trail { display: none; }

/* ---------------------------------------------------------------- 01 만드는 것 (원형 사진 + 키링 고리) */
.cat ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cat li { transform-origin: 50% 0; animation: swing 3.2s ease-in-out infinite alternate; }
.cat li:nth-child(even) { animation-delay: -1.6s; }
.cat a { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 24px; }
.cat a::before { content: ''; position: absolute; top: 0; left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; border: 5px solid transparent; background: conic-gradient(from 30deg, #fff, #c9ccd6, #8e8aa8, #fff, #d6d9e2, #fff) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); z-index: 1; }
@keyframes swing { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.dot-img { display: block; width: 100%; max-width: 220px; border-radius: 50%; padding: 10px; background: radial-gradient(circle at 30% 25%, #fff 0 8%, transparent 9%), var(--c); box-shadow: 0 14px 28px color-mix(in srgb, var(--c) 45%, transparent); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.dot-img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .85); }
.cat a:hover .dot-img { transform: translateY(-8px) rotate(-8deg); }
.cat b { margin-top: 18px; font: 400 24px/1.3 var(--display); }
.cat p { color: var(--sub); font-size: 14.5px; margin-top: 4px; }
.go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--pink-deep); font-size: 14px; font-weight: 700; }
.go svg { width: 15px; height: 15px; transition: transform .2s; }
.cat a:hover .go svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- 02 상품 (분홍 띠, 구름 물결 경계) */
.band { position: relative; margin-top: 150px; background: linear-gradient(180deg, #ec8fb0 0%, #e57ea3 100%); color: #fff; padding: 80px 0 70px; }
.band::before { content: ''; position: absolute; inset: 0; background: var(--grain); pointer-events: none; }
.band::after { content: ''; position: absolute; left: 0; right: 0; bottom: -29px; height: 30px; background: radial-gradient(circle at 50% 0, #e57ea3 0 70%, transparent 71%) 0 0 / 60px 30px repeat-x; }
.band-cap { position: absolute; left: 0; right: 0; top: -29px; height: 30px; background: radial-gradient(circle at 50% 100%, #ec8fb0 0 70%, transparent 71%) 0 0 / 60px 30px repeat-x; }
.band > .spark, .band > .star { position: absolute; color: rgba(255, 255, 255, .7); }
.band .bs1 { width: 40px; height: 40px; left: 6%; top: 50px; animation: twinkle 3s infinite; }
.band .bs2 { width: 30px; height: 30px; right: 7%; top: 70px; color: var(--butter); }
.sec-head.on-pink { position: relative; margin-bottom: 26px; }
.on-pink .sec-no { color: #fff; }
.on-pink .sec-no b { background: rgba(255, 255, 255, .25); }
.on-pink .sec-no svg { color: var(--butter); }
.on-pink .sec-sub { color: rgba(255, 255, 255, .85); }
.band .tabs { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; }
.tabs button { border: 1.5px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; height: 40px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: background .2s, color .2s; }
.tabs button.is-on, .tabs button:hover { background: #fff; color: var(--pink-deep); border-color: #fff; }
.slider { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 70px; }
.sl-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 56px) / 3); gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 20px 14px 12px; }
.sl-track::-webkit-scrollbar { display: none; }
.sl-track .card { scroll-snap-align: start; }
.sl-track .card[hidden] { display: none; }
.sl-btn { position: absolute; top: 40%; z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; transition: background .2s, color .2s; }
.sl-btn:hover { background: #fff; color: var(--pink-deep); }
.sl-btn.prev { left: 6px; }
.sl-btn.next { right: 6px; }
.tall { display: flex; flex-direction: column; color: #fff; }
.tall-img { position: relative; display: block; aspect-ratio: 4 / 4.6; border-radius: 120px 120px 36px 36px; padding: 14px; background: rgba(255, 255, 255, .28); border: 1.5px solid rgba(255, 255, 255, .55); box-shadow: inset 0 0 40px rgba(255, 255, 255, .25); transition: transform .35s, background .35s; }
.tall-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 110px 110px 26px 26px; }
.tall:hover .tall-img { transform: translateY(-8px); background: rgba(255, 255, 255, .45); }
.sticker-badge { position: absolute; left: -12px; top: 14px; z-index: 2; width: 86px; height: 86px; display: grid; place-items: center; text-align: center; padding: 10px; font: 400 15px/1.15 var(--display); color: var(--ink); background: var(--butter); transform: rotate(-12deg);
  clip-path: polygon(50% 0%, 59% 9%, 71% 4%, 75% 16%, 88% 15%, 87% 28%, 98% 34%, 92% 45%, 100% 55%, 90% 62%, 94% 75%, 81% 78%, 79% 91%, 66% 89%, 59% 100%, 50% 92%, 41% 100%, 34% 89%, 21% 91%, 19% 78%, 6% 75%, 10% 62%, 0% 55%, 8% 45%, 2% 34%, 13% 28%, 12% 15%, 25% 16%, 29% 4%, 41% 9%);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .12)); transition: transform .3s; }
.sticker-badge.is-custom { background: #ffb27a; color: #fff; }
.tall:hover .sticker-badge { transform: rotate(8deg) scale(1.08); }
.tall-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 10px 0; }
.tall-foot b { display: block; font-size: 18px; line-height: 1.35; }
.tall-foot small { opacity: .75; font-size: 13.5px; }
.more { flex: none; background: #fff; color: var(--pink-deep); font-weight: 800; font-size: 13.5px; padding: 7px 16px; border-radius: 999px; transition: transform .2s; }
.tall:hover .more { transform: scale(1.06); }
.band-all { position: relative; display: flex; width: max-content; margin: 36px auto 0; align-items: center; gap: 8px; color: #fff; font-weight: 700; border-bottom: 2px solid rgba(255, 255, 255, .6); padding-bottom: 2px; }

/* ---------------------------------------------------------------- 03 이야기 (글 + 폴라로이드) */
.story { padding-top: 150px; }
.story .sec-head h2 { font-size: clamp(30px, 3.6vw, 46px); }
.story-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: center; }
.story-txt p { color: #5c4e49; font-size: 17px; margin-bottom: 18px; max-width: 460px; }
.story-txt .pill-arrow { margin-top: 12px; }
.story-pics { position: relative; height: 520px; }
.polaroid { position: absolute; margin: 0; padding: 10px 10px 0; background: #fff; border-radius: 6px; box-shadow: 0 20px 40px rgba(80, 50, 60, .18); transition: transform .4s; }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.polaroid figcaption { font: 400 18px/1 var(--display); color: #6b5a55; text-align: center; padding: 12px 0 14px; }
.polaroid::after { content: ''; position: absolute; left: 50%; top: -12px; width: 96px; height: 28px; margin-left: -48px; background: repeating-linear-gradient(45deg, rgba(255, 231, 160, .85) 0 8px, rgba(255, 214, 120, .85) 8px 16px); transform: rotate(-8deg); }
.polaroid:hover { transform: rotate(0) scale(1.04) !important; z-index: 3; }
.cp1 { left: 0; top: 40px; width: 44%; transform: rotate(-6deg); }
.cp2 { left: 32%; top: 150px; width: 40%; transform: rotate(4deg); z-index: 1; }
.cp2::after { background: repeating-linear-gradient(45deg, rgba(198, 174, 240, .8) 0 8px, rgba(230, 216, 250, .8) 8px 16px); }
.cp3 { right: 0; top: 10px; width: 38%; transform: rotate(7deg); }
.cp3::after { background: repeating-linear-gradient(45deg, rgba(159, 208, 246, .85) 0 8px, rgba(206, 232, 252, .85) 8px 16px); }
.story .cc1 { width: 110px; right: 6%; bottom: 20px; transform: rotate(-24deg); animation: drift 10s ease-in-out infinite; }

/* ---------------------------------------------------------------- 04 주문 제작 */
.custom { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.custom-img { position: relative; }
.custom-img > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 36px; box-shadow: 18px 18px 0 var(--pink-soft); }
.custom-ring { right: -40px; top: -40px; color: var(--pink-deep); background: #fff; border-radius: 50%; box-shadow: 0 10px 24px rgba(224, 100, 146, .2); }
.custom-ring .ring-in { background: var(--pink-soft); color: var(--pink-deep); font-size: 30px; }
.sticker { position: absolute; left: -18px; bottom: 40px; background: var(--lilac); font-family: var(--display); font-size: 20px; padding: 12px 24px; border-radius: 999px; transform: rotate(-7deg); box-shadow: 0 10px 20px rgba(58, 46, 42, .14); }
.custom-txt > p { color: #5c4e49; margin-bottom: 22px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.steps li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 10px 14px; border: 1px solid var(--line); }
.steps li:last-child { grid-column: 1 / -1; }
.steps li > b { font: 700 18px var(--round); color: var(--pink); flex: none; }
.steps strong { display: block; font-size: 15px; }
.steps span { color: var(--sub); font-size: 13.5px; line-height: 1.4; }

/* ---------------------------------------------------------------- 05 대량 주문 (하늘색 포스터) */
.bulk { position: relative; overflow: hidden; max-width: 1400px; margin: 130px auto 0; border-radius: var(--r-xl); background: radial-gradient(circle at 50% 0%, #b8defb 0%, transparent 60%), linear-gradient(180deg, #8fc7f4 0%, #b9dcf8 55%, #eef7fe 100%); text-align: center; padding: 90px 24px 90px; color: #fff; }
.bulk::after { content: ''; position: absolute; inset: 0; background: var(--grain); pointer-events: none; }
.sec-no.on-sky { position: relative; z-index: 1; color: #fff; }
.sec-no.on-sky b { background: rgba(255, 255, 255, .3); }
.sec-no.on-sky svg { color: #fff; }
.bubble { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; font-size: clamp(64px, 10vw, 140px); line-height: .95; margin: 22px 0 26px; }
.bubble span { display: inline-block; }
.bubble span:first-child { transform: translateX(-6%); }
.bubble span:last-child { transform: translateX(5%); }
.bubble i { display: inline-block; font-style: normal; transform: rotate(var(--r)); -webkit-text-stroke: 3px #fff; paint-order: stroke fill; color: #fff; text-shadow: 0 3px 0 #d8ecfc, 0 6px 0 #a9d3f6, 0 9px 0 #7fbcee, 0 18px 26px rgba(60, 130, 200, .35); transition: transform .3s; }
.bubble i:hover { transform: rotate(0) translateY(-10px) scale(1.1); }
.bulk-desc { position: relative; z-index: 1; color: #2f6c9c; font-size: 17px; font-weight: 600; }
.chips { position: relative; z-index: 1; list-style: none; padding: 0; margin: 28px 0 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.chips li { background: rgba(255, 255, 255, .85); color: var(--sky-deep); font-weight: 800; padding: 9px 22px; border-radius: 999px; border: 2px dashed rgba(90, 168, 230, .5); }
.bulk .pill { position: relative; z-index: 1; }
.bulk > .star, .bulk > .spark { position: absolute; color: #fff; }
.bulk .b1 { width: 84px; height: 84px; left: 7%; top: 16%; transform: rotate(-14deg); animation: twinkle 4s infinite; }
.bulk .b2 { width: 54px; height: 54px; right: 9%; top: 12%; transform: rotate(18deg); }
.bulk .b3 { width: 38px; height: 38px; left: 17%; bottom: 20%; animation: twinkle 3s 1s infinite; }
.bulk .b4 { width: 66px; height: 66px; right: 13%; bottom: 22%; opacity: .85; }
.bulk .b5 { width: 28px; height: 28px; right: 27%; top: 38%; animation: twinkle 3s 2s infinite; }
.bulk .b6 { width: 36px; height: 36px; left: 28%; top: 10%; opacity: .7; }
.bulk-arc { position: absolute; border: 6px solid; border-color: rgba(255, 255, 255, .7) transparent transparent transparent; border-radius: 50%; }
.bulk-arc.a1 { width: 180px; height: 180px; left: 4%; top: 46%; transform: rotate(-30deg); }
.bulk-arc.a2 { width: 220px; height: 220px; right: 3%; top: 48%; transform: rotate(40deg); }

/* ---------------------------------------------------------------- 06 판매처 · 인스타 */
.where-r { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.where-r a { display: flex; align-items: center; gap: 12px; padding: 22px; border-radius: var(--r-md); background: #fff; border: 2px solid var(--line); font-weight: 800; font-size: 17px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.where-r a svg { margin-left: auto; color: var(--sub); }
.where-r a:hover { border-color: var(--b); transform: translateY(-4px); box-shadow: 0 10px 20px color-mix(in srgb, var(--b) 18%, transparent); }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--b); box-shadow: 0 0 0 5px color-mix(in srgb, var(--b) 18%, transparent); flex: none; }
.insta-head { margin: 56px 0 18px; text-align: center; }
.insta-head a { display: inline-flex; align-items: center; gap: 10px; font: 700 clamp(26px, 3vw, 38px) var(--round); }
.insta-head a:hover { color: var(--pink-deep); }
.insta-head svg { width: 30px; height: 30px; color: var(--pink-deep); }
.insta-grid { list-style: none; margin: 0; padding: 0 0 24px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.insta-grid li { overflow: hidden; border-radius: 20px; }
.insta-grid li:nth-child(even) { transform: translateY(24px); }
.insta-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s; }
.insta-grid li:hover img { transform: scale(1.08); }

/* ---------------------------------------------------------------- 문의 띠 */
.cta { padding: 110px 16px 100px; }
.cta-in { position: relative; overflow: hidden; max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding: 40px 50px; border-radius: var(--r-lg); background: linear-gradient(120deg, #f6eefe 0%, #ffe6ef 100%); border: 1px solid #eee0f7; }
.cta-in h2 { font-size: clamp(26px, 2.8vw, 36px); }
.cta-in .script { font-size: 34px; color: var(--lilac-deep); line-height: 1.1; }
.cta-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 바닥 (분홍 띠 + 큰 milko) */
.ft { position: relative; background: var(--ink); color: #eadcd6; border-top: 6px solid var(--pink); }
.ft-in { max-width: var(--wrap); margin: 0 auto; padding: 44px 24px 100px; display: flex; gap: 60px; }
.ft-brand img { width: 120px; filter: invert(1) brightness(1.6); opacity: .9; }
.ft-brand p { margin-top: 12px; font-family: var(--display); font-size: 18px; line-height: 1.5; }
.ft-info { display: grid; gap: 8px; font-size: 14.5px; }
.ft-info span, .ft-info b { margin-right: 18px; }
.ft-info a { text-decoration: underline; text-underline-offset: 3px; }
.ft-note { color: #b9aca4; }
.ft-links a { margin-right: 16px; }
.copy { color: #9a8d85; font-size: 13px; }
.m-bar { display: none; }

/* ---------------------------------------------------------------- 상품 카드 (목록·상세 공통) */
.card { display: flex; flex-direction: column; border-radius: var(--r-lg); padding: 10px; color: var(--ink); transition: transform .25s, box-shadow .25s; }
.grid .card { background: #fff; border: 1px solid var(--line); }
.grid .card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(224, 100, 146, .14); }
.card-img { position: relative; display: block; aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: #fff; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-img img { transform: scale(1.05); }
.badge { position: absolute; left: 12px; top: 12px; background: var(--butter); font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.card-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 8px 8px; }
.card-cat { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); }
.tag-custom { font-size: 11.5px; font-weight: 700; color: var(--pink-deep); background: var(--pink-soft); border-radius: 999px; padding: 0 8px; }
.card-body b { font-size: 17px; font-weight: 700; line-height: 1.4; }
.price { font-weight: 800; color: var(--pink-deep); }

/* ---------------------------------------------------------------- 서브 공통 */
.list-wrap { max-width: var(--wrap); margin: 0 auto; padding: 40px 24px 100px; }
.filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.filter button { border: 2px solid var(--line); background: #fff; height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700; }
.filter button small { color: var(--sub); font-weight: 600; margin-left: 2px; }
.filter button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter button.is-on small { color: #d9ccc4; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid .card[hidden] { display: none; }
.empty { text-align: center; color: var(--sub); padding: 60px 0; }

/* ---------------------------------------------------------------- 상품 상세 */
.crumb { max-width: var(--wrap); margin: 0 auto; padding: 24px 24px 0; display: flex; gap: 8px; color: var(--sub); font-size: 14px; }
.crumb a:hover { color: var(--ink); }
.pd { max-width: var(--wrap); margin: 0 auto; padding: 20px 24px 80px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.pd > * { min-width: 0; }
.pd-gallery { position: sticky; top: 100px; }
.pd-main { background: color-mix(in srgb, var(--c) 55%, #fff); border-radius: 36px; overflow: hidden; aspect-ratio: 1; }
.pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pd-thumbs button { flex: none; width: 76px; height: 76px; padding: 0; border: 3px solid transparent; border-radius: 18px; overflow: hidden; background: #fff; opacity: .7; transition: opacity .2s, border-color .2s; }
.pd-thumbs button.is-on, .pd-thumbs button:hover { border-color: var(--pink); opacity: 1; }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd-cat { display: inline-block; background: var(--c); border-radius: 999px; padding: 4px 14px; font-size: 14px; font-weight: 700; }
.pd-info h1 { font-size: clamp(34px, 3.6vw, 46px); margin: 14px 0 10px; }
.pd-sum { color: var(--sub); font-size: 17px; }
.pd-price { margin: 22px 0 0; padding: 18px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); font-size: 28px; }
.pd-price b { font-weight: 800; }
.pd-price s { color: var(--sub); font-size: 18px; margin-right: 10px; }
.pd-price.none { font-size: 15.5px; color: var(--sub); }
.pd-buy { margin-top: 28px; }
.pd-buy h2 { display: flex; align-items: center; gap: 8px; font-size: 22px; margin-bottom: 14px; }
.pd-buy h2 svg { color: var(--pink); width: 16px; height: 16px; }
.buys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buy { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 16px 18px; transition: border-color .2s, transform .2s; }
.buy:hover { border-color: var(--b); transform: translateY(-2px); }
.buy-name { font-weight: 700; flex: 1; }
.buy-go { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--sub); }
.buy-go svg { width: 15px; height: 15px; }
.pd-note { margin-top: 12px; color: var(--sub); font-size: 14px; }
.pd-custom { margin-top: 24px; display: flex; align-items: center; gap: 14px; background: var(--pink-soft); border-radius: 22px; padding: 18px 20px; }
.pd-custom > svg { color: var(--pink-deep); width: 22px; height: 22px; }
.pd-custom div { flex: 1; }
.pd-custom p { color: var(--sub); font-size: 14.5px; }
.pd-custom .pill { height: 44px; padding: 0 18px; font-size: 15px; }
.pd-ask { display: flex; gap: 18px; margin-top: 22px; font-size: 14.5px; color: var(--sub); }
.pd-ask a { display: inline-flex; align-items: center; gap: 6px; }
.pd-ask a:hover { color: var(--ink); }
.pd-ask svg { width: 18px; height: 18px; }
.pd-detail { max-width: 920px; margin: 0 auto; padding: 0 24px 80px; }
.pd-detail-title { text-align: center; font-size: 28px; margin-bottom: 30px; }
.pd-detail-title span { display: inline-block; border-bottom: 4px solid var(--pink); padding: 0 6px 4px; }
.pd-detail-body { max-width: 860px; margin: 0 auto; background: #fff; border-radius: 30px; overflow: hidden; }
.pd-detail-body img { width: 100%; }
.pd-hand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; color: var(--sub); font-size: 14.5px; }
.pd-hand svg { color: var(--pink-deep); width: 18px; height: 18px; }
.related { max-width: var(--wrap); margin: 0 auto; padding: 0 24px 100px; }
.related h2 { font-size: 30px; text-align: center; margin-bottom: 30px; }
.pd-bar { display: none; }

/* ---------------------------------------------------------------- 스크롤 효과 */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-blob, .hero-sub, .chrome, .spark, .star, .ring svg, .cat li { animation: none !important; }
}

/* ---------------------------------------------------------------- 태블릿 */
@media (max-width: 1080px) {
  .hd-in { grid-template-columns: 1fr; justify-items: start; }
  .gnb, .hd-spark { display: none; }
  .hd-act { right: 16px; }
  .menu-btn { display: inline-grid; }
  .mnav { display: none; max-width: var(--wrap); margin: 0 auto; background: #fff; border-top: 1px solid var(--line); padding: 8px 20px 18px; }
  .mnav.is-open { display: block; }
  .mnav ul { list-style: none; margin: 0; padding: 0; }
  .mnav a { display: block; padding: 12px 6px; font-weight: 700; font-size: 18px; border-bottom: 1px dashed var(--line); }
  .mnav-sns { display: flex; gap: 16px; margin-top: 12px; }
  .mnav-sns a { border: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--sub); }
  .cat ul { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .sl-track { grid-auto-columns: calc((100% - 28px) / 2); }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .story-in { grid-template-columns: 1fr; }
  .where-r { grid-template-columns: 1fr 1fr; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------- 휴대폰 */
@media (max-width: 720px) {
  body { font-size: 15.5px; padding-bottom: 64px; }
  .topbar { padding: 8px 16px; font-size: 10.5px; letter-spacing: .08em; }
  .topbar span { display: none; }
  .hd-in { padding: 4px 16px; }
  .logo img { height: 50px; }
  .hd .ic-btn:not(.menu-btn), .hd .pill-kakao { display: none; }
  .sec { padding: 80px 18px 0; }
  .sec-head { margin-bottom: 30px; }
  .sec-head h2 { font-size: 28px; }
  .sec-sub { font-size: 15px; }
  .hero-in { grid-template-columns: 1fr; gap: 40px; padding: 40px 18px 60px; }
  .hero h1 { font-size: 40px; }
  .hero-desc { font-size: 16px; }
  .hero-desc br { display: none; }
  .hero-visual { width: 92%; margin: 0 auto; }
  .hero-ring { width: 96px; height: 96px; }
  .hero-ring text { font-size: 17px; }
  .hero-tag { font-size: 15px; padding: 8px 14px; }
  .cat ul { gap: 30px 14px; }
  .dot-img { max-width: 150px; }
  .cat b { font-size: 20px; }
  .cat p { font-size: 13.5px; }
  .band { margin-top: 100px; padding: 56px 0 50px; }
  .band .tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 0 16px; margin-bottom: 20px; scrollbar-width: none; }
  .band .tabs button { flex: none; }
  .slider { padding: 0 6px; }
  .sl-track { grid-auto-columns: 74%; gap: 14px; }
  .sl-btn { display: none; }
  .sticker-badge { width: 70px; height: 70px; font-size: 13px; left: -6px; }
  .tall-foot b { font-size: 16px; }
  .story { padding-top: 110px; }
  .story-pics { height: 380px; }
  .cp1 { width: 52%; top: 20px; }
  .cp2 { left: 26%; top: 150px; width: 48%; }
  .cp3 { width: 44%; top: 0; }
  .polaroid figcaption { font-size: 14px; padding: 8px 0 10px; }
  .story .cc1 { width: 70px; }
  .custom { grid-template-columns: 1fr; gap: 50px; }
  .custom-img > img { box-shadow: 10px 10px 0 var(--pink-soft); }
  .custom-ring { width: 110px; height: 110px; right: -6px; top: -30px; }
  .custom-ring text { font-size: 17px; }
  .sticker { left: 10px; font-size: 17px; }
  .steps { grid-template-columns: 1fr; }
  .bulk { margin: 90px 10px 0; border-radius: 32px; padding: 64px 18px 60px; }
  .bubble { font-size: 62px; }
  .bulk-desc { font-size: 15px; }
  .bulk .b1 { width: 46px; height: 46px; left: 4%; top: 7%; }
  .bulk .b2 { width: 32px; height: 32px; }
  .bulk .b4 { width: 36px; height: 36px; right: 6%; bottom: 10%; }
  .bulk-arc { display: none; }
  .where-r a { padding: 16px; font-size: 15px; gap: 8px; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .insta-grid li { border-radius: 14px; }
  .insta-grid li:nth-child(even) { transform: none; }
  .cta { padding: 70px 10px 60px; }
  .cta-in { flex-direction: column; text-align: center; padding: 34px 20px; }
  .cta-btns { justify-content: center; }
      .ft-in { flex-direction: column; gap: 26px; padding: 36px 18px 50px; }
  .m-bar { display: grid; grid-template-columns: 1.3fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: 64px; background: #fff; border-top: 1px solid var(--line); }
  .m-bar a { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 14.5px; }
  .m-bar .m-kakao { background: var(--kakao); color: #3b1e1e; }
  .list-wrap, .related { padding-left: 16px; padding-right: 16px; }
  .filter { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 24px; padding: 0 16px; scrollbar-width: none; }
  .filter button { flex: none; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card { border-radius: 24px; padding: 8px; }
  .card-img { border-radius: 18px; }
  .card-body b { font-size: 15.5px; }
  .crumb { padding: 16px 16px 0; }
  .pd { grid-template-columns: 1fr; gap: 26px; padding: 14px 16px 60px; }
  .pd-gallery { position: static; }
  .pd-main { border-radius: 28px; }
  .pd-thumbs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .pd-thumbs button { width: 64px; height: 64px; }
  .buys { grid-template-columns: 1fr; }
  .pd-custom { flex-wrap: wrap; }
  .pd-custom .pill { width: 100%; }
  .pd-detail { padding: 0 0 60px; }
  .pd-detail-body { border-radius: 0; }
  .is-product .m-bar { display: none; }
  .pd-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 8px 16px; background: rgba(255, 248, 243, .95); border-top: 1px solid var(--line); }
  .pd-bar .pill { width: 100%; }
}

/* ================================================================ 서브 페이지 */
.sub-hero { position: relative; text-align: center; margin: 0; padding: 90px 24px 80px; border-radius: 0; overflow: hidden; background:
  radial-gradient(circle at 85% 20%, rgba(198, 174, 240, .45), transparent 40%),
  radial-gradient(circle at 10% 90%, rgba(255, 201, 168, .45), transparent 40%),
  linear-gradient(160deg, #ffe9f0 0%, #fff8f3 70%); }
.sub-hero.tone-sky { background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .6), transparent 40%), linear-gradient(180deg, #a9d4f7 0%, #d6ebfb 60%, #f3f9fe 100%); }
.sub-hero.tone-lilac { background: radial-gradient(circle at 15% 20%, rgba(255, 211, 226, .6), transparent 40%), linear-gradient(160deg, #efe6fc 0%, #fff8f3 75%); }
.sub-hero::after { content: ''; position: absolute; inset: 0; background: var(--grain); pointer-events: none; }
.sub-hero > * { position: relative; z-index: 1; }
.sub-hero .sec-no b { background: #fff; }
.sub-hero h1 { font-size: clamp(42px, 5.4vw, 70px); margin: 18px 0 10px; }
.sub-hero h1 .script { color: var(--pink); font-size: 1.05em; margin-left: 6px; }
.sub-hero-sub { color: #7a6560; font-size: 17px; }
.sub-hero > .spark, .sub-hero > .star { position: absolute; z-index: 0; color: #fff; animation: twinkle 3s infinite; }
.sub-hero .sh1 { width: 40px; height: 40px; left: 12%; top: 30%; }
.sub-hero .sh2 { width: 28px; height: 28px; right: 14%; top: 24%; color: var(--butter); animation-delay: 1s; }
.sub-hero .sh3 { width: 22px; height: 22px; right: 24%; bottom: 22%; animation-delay: 2s; }
.tone-sky h1, .tone-sky .sub-hero-sub { color: #23537c; }
.hl-sky { color: #fff; -webkit-text-stroke: 2px #6fb3e8; paint-order: stroke fill; text-shadow: 0 5px 0 rgba(90, 168, 230, .5); }
.pill-sky { background: linear-gradient(135deg, #8fc7f4, var(--sky-deep)); color: #fff; }
.center-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 44px; }

/* 브랜드 소개 */
.brand-name { color: var(--pink-deep); font-weight: 800; }
.sign { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.sign img { width: 84px; }
.sign .script { font-size: 44px; color: var(--pink); }
.mk-ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--lilac); color: var(--lilac-deep); background: radial-gradient(circle at 30% 30%, #fff, var(--lilac-soft)); margin: 0 auto 16px; transition: transform .3s; }
.mk-ic.sky { border-color: var(--sky); color: var(--sky-deep); background: radial-gradient(circle at 30% 30%, #fff, #e3f1fd); }
.mk-ic svg { width: 32px; height: 32px; stroke-width: 1.5; }
.promise ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.promise ul.three { grid-template-columns: repeat(3, 1fr); }
.promise li { text-align: center; padding: 10px 24px; }
.promise li + li { border-left: 1px solid var(--line); }
.promise li:hover .mk-ic { transform: rotate(-10deg) scale(1.08); }
.promise b { font: 400 22px/1.3 var(--display); }
.promise p { color: var(--sub); font-size: 15px; margin-top: 6px; }
.biz-card { margin-top: 30px; padding: 28px 34px; border-radius: var(--r-lg); background: #fff; border: 1px dashed var(--lilac); }
.biz-card dl { margin: 0; display: grid; grid-template-columns: repeat(5, auto); gap: 10px 30px; justify-content: space-between; }
.biz-card dt { font-size: 13px; color: var(--sub); }
.biz-card dd { margin: 2px 0 0; font-weight: 700; }
.biz-card a:hover { color: var(--pink-deep); }

/* 주문 제작 · 대량 주문 */
.steps-v { list-style: none; margin: 0; padding: 0; position: relative; }
.steps-v::before { content: ''; position: absolute; left: 21px; top: 20px; bottom: 20px; border-left: 2px dashed var(--pink); opacity: .5; }
.steps-v li { position: relative; display: flex; gap: 18px; padding: 12px 0; }
.steps-v li > b { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--pink); color: var(--pink-deep); font: 700 16px var(--round); }
.steps-v strong { display: block; font: 400 21px/1.4 var(--display); }
.steps-v p { color: var(--sub); font-size: 15px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.box { padding: 36px 40px; border-radius: var(--r-lg); }
.box-pink { background: linear-gradient(135deg, #fff, var(--pink-soft)); border: 1px solid #fbd4e2; }
.box-lilac { background: linear-gradient(135deg, #fff, var(--lilac-soft)); border: 1px solid #e6dbf7; }
.box-sky { background: linear-gradient(135deg, #fff, #e3f1fd); border: 1px solid #cfe5f8; }
.box .sec-head h2 { font-size: 28px; }
.checks, .notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li, .notes li { position: relative; padding-left: 30px; color: #5c4e49; }
.checks li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--pink-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.box-sky .checks li::before { background-color: var(--sky-deep); }
.notes li::before { content: '✱'; position: absolute; left: 4px; top: 0; color: var(--lilac-deep); font-weight: 700; }
.box-pink .notes li::before { color: var(--pink-deep); }
.box-note { margin-top: 18px; font-size: 14.5px; color: var(--sub); }
.cat-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat-mini a { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cat-mini .dot-img { max-width: 170px; }
.cat-mini b { margin-top: 14px; font: 400 21px var(--display); }
.cat-mini p { color: var(--sub); font-size: 14px; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: f; }
.flow li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 20px 22px; text-align: center; }
.flow li + li::before { content: ''; position: absolute; left: -12px; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--sky-deep); border-right: 2px solid var(--sky-deep); transform: translateY(-50%) rotate(45deg); }
.flow b { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e3f1fd; color: var(--sky-deep); font: 700 16px var(--round); }
.flow strong { display: block; margin: 12px 0 4px; font: 400 20px var(--display); }
.flow p { color: var(--sub); font-size: 14px; line-height: 1.5; }

/* 고객센터 */
.board { max-width: 980px; }
.sup-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; }
.sup-tabs a { height: 48px; padding: 0 26px; display: inline-flex; align-items: center; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-weight: 700; }
.sup-tabs a.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.n-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.n-list a { display: flex; align-items: center; gap: 16px; padding: 22px 12px; border-bottom: 1px solid var(--line); transition: background .2s; }
.n-list a:hover { background: #fff; }
.n-list b { flex: 1; font-size: 17px; }
.n-list time, .n-view time { color: var(--sub); font-size: 14px; }
.n-list .empty { padding: 50px 0; text-align: center; color: var(--sub); }
.n-tag { flex: none; padding: 3px 12px; border-radius: 999px; background: var(--lilac-soft); color: var(--lilac-deep); font-size: 13px; font-weight: 800; }
.n-tag.is-pin { background: var(--pink-soft); color: var(--pink-deep); }
.n-view { background: #fff; border-radius: var(--r-lg); padding: 44px 50px; border: 1px solid var(--line); }
.n-view header { padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px dashed var(--line); }
.n-view h2 { font-size: clamp(26px, 3vw, 34px); margin: 12px 0 6px; }
.n-body p { margin-bottom: 16px; color: #4d403c; line-height: 1.85; }
.n-body ul { margin: 0 0 16px; padding-left: 20px; color: #4d403c; }
.n-nav { display: grid; gap: 8px; margin-top: 20px; }
.n-nav a { display: flex; gap: 14px; padding: 16px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.n-nav span { color: var(--sub); font-size: 14px; flex: none; }
.qa-list { display: grid; gap: 12px; }
.qa { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: box-shadow .2s; }
.qa[open] { box-shadow: 0 12px 26px rgba(224, 100, 146, .1); border-color: #fbd4e2; }
.qa summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 20px 24px; font-weight: 700; font-size: 17px; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa .q { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink-deep); font: 700 16px var(--round); }
.qa summary i { margin-left: auto; width: 12px; height: 12px; border-right: 2px solid var(--sub); border-bottom: 2px solid var(--sub); transform: rotate(45deg); transition: transform .25s; }
.qa[open] summary i { transform: rotate(-135deg); }
.qa .a { display: flex; gap: 14px; padding: 0 24px 22px; }
.qa .a span { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac-soft); color: var(--lilac-deep); font: 700 16px var(--round); }
.qa .a p { color: #5c4e49; padding-top: 4px; }
.board-more { text-align: center; margin-top: 36px; color: var(--sub); }
.board-more a { color: var(--pink-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 문의하기 */
.contact-in { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }
.c-form { background: #fff; border-radius: var(--r-lg); padding: 40px; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(224, 100, 146, .08); }
.c-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 30px; }
.c-types input { position: absolute; opacity: 0; pointer-events: none; }
.c-types span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 56px; border-radius: 18px; border: 2px solid var(--line); font-weight: 800; cursor: pointer; transition: all .2s; }
.c-types span svg { width: 13px; height: 13px; color: var(--line); }
.c-types input:checked + span { border-color: var(--pink-deep); background: var(--pink-soft); color: var(--pink-deep); }
.c-types input:checked + span svg { color: var(--pink-deep); }
.c-types input:focus-visible + span { outline: 3px solid rgba(224, 100, 146, .35); }
.c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.c-grid label { display: block; font-weight: 700; font-size: 15px; }
.c-grid label > input, .c-grid label > select, .c-grid label > textarea { display: block; width: 100%; margin-top: 7px; }
.c-grid label.full { grid-column: 1 / -1; }
.c-grid label[hidden] { display: none; }
.c-grid em { color: var(--pink-deep); }
.c-grid small { color: var(--sub); font-weight: 500; margin-left: 4px; }
.c-grid input, .c-grid select, .c-grid textarea { font: 15.5px var(--sans); padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #fffdfb; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.c-grid textarea { resize: vertical; line-height: 1.6; }
.c-grid input:focus, .c-grid select:focus, .c-grid textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(240, 143, 176, .15); }
.c-photo { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: #fff9d6; font-size: 14.5px; }
.c-photo a { font-weight: 800; text-decoration: underline; }
.c-agree { display: flex; gap: 10px; margin-top: 18px; font-size: 14.5px; cursor: pointer; }
.c-agree input { width: 20px; height: 20px; accent-color: var(--pink-deep); flex: none; margin-top: 2px; }
.c-agree small { color: var(--sub); }
.c-agree a { color: var(--pink-deep); text-decoration: underline; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.c-submit { width: 100%; height: 58px; margin-top: 24px; font-size: 17px; border: 0; }
.c-msg { margin-top: 14px; padding: 14px 18px; border-radius: 14px; font-weight: 700; }
.c-msg.ok { background: #e8f8ef; color: #1d7a45; }
.c-msg.err { background: #fdecef; color: #b4365b; }
.c-side { display: grid; gap: 14px; position: sticky; top: 100px; }
.c-card { background: #fff; border-radius: var(--r-md); padding: 24px; border: 1px solid var(--line); }
.c-card b { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.c-card p { color: var(--sub); font-size: 14.5px; margin: 6px 0 14px; }
.c-card > a:not(.pill) { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--pink-deep); }
.c-card > a svg { width: 16px; height: 16px; }
.c-card.kakao { background: linear-gradient(135deg, #fffbe0, #fff3a8); border-color: #f5e48a; }
.c-card.kakao .pill { width: 100%; height: 46px; }

/* 개인정보처리방침 · 404 */
.policy { max-width: 900px; }
.policy .draft { padding: 14px 18px; border-radius: 14px; background: #fff3c4; font-weight: 700; margin-bottom: 24px; }
.policy-intro { color: #5c4e49; margin-bottom: 10px; }
.policy h2 { font-family: var(--sans); font-weight: 800; font-size: 19px; margin: 34px 0 10px; padding-left: 14px; border-left: 4px solid var(--pink); }
.policy p, .policy li { color: #5c4e49; }
.policy ul { padding-left: 20px; }
.info-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; }
.info-table th, .info-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.info-table th { width: 140px; background: var(--pink-soft); font-weight: 700; }
.err { text-align: center; padding: 100px 24px 120px; }
.err img { width: 140px; margin: 0 auto; }
.err-code { font: 700 120px/1 var(--round); color: var(--pink); margin-top: 10px; }
.err h1 { font-size: 34px; margin: 10px 0 8px; }
.err > p { color: var(--sub); }

@media (max-width: 1080px) {
  .promise ul { grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .promise li:nth-child(3) { border-left: 0; }
  .promise ul.three { grid-template-columns: 1fr; }
  .promise ul.three li { border-left: 0; }
  .biz-card dl { grid-template-columns: repeat(2, auto); justify-content: start; }
  .two-col, .contact-in { grid-template-columns: 1fr; }
  .c-side { position: static; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li + li::before { display: none; }
  .cat-mini { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .sub-hero { padding: 60px 18px 54px; }
  .sub-hero h1 { font-size: 40px; }
  .sub-hero-sub { font-size: 15px; }
  .promise li { padding: 10px 12px; }
  .promise b { font-size: 19px; }
  .promise p { font-size: 13.5px; }
  .biz-card { padding: 22px; }
  .box { padding: 28px 22px; }
  .flow { grid-template-columns: 1fr; }
  .n-list a { flex-wrap: wrap; gap: 6px 12px; padding: 18px 6px; }
  .n-list b { flex-basis: 100%; order: 2; font-size: 16px; }
  .n-view { padding: 28px 22px; }
  .qa summary { padding: 16px 18px; font-size: 15.5px; }
  .qa .a { padding: 0 18px 18px; }
  .c-form { padding: 26px 18px; }
  .c-types { grid-template-columns: 1fr; }
  .c-types span { height: 50px; }
  .c-grid { grid-template-columns: 1fr; }
  .info-table th { width: 90px; }
}

/* ---------------------------------------------------------------- 커플 · 기념일 (#009-SEO) */
.cp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cp-grid a { display: block; background: #fff; border-radius: 28px; padding: 10px 10px 18px; border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
.cp-grid a:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 18px 34px rgba(224, 100, 146, .16); }
.cp-img { display: block; aspect-ratio: 1; border-radius: 22px; overflow: hidden; position: relative; }
.cp-img::after { content: '♡'; position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--pink-deep); display: grid; place-items: center; font-size: 18px; }
.cp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.cp-grid a:hover .cp-img img { transform: scale(1.06); }
.cp-grid b { display: block; margin: 14px 8px 2px; font: 400 22px var(--display); }
.cp-grid p { margin: 0 8px; color: var(--sub); font-size: 14.5px; }
.cp-tags, .pd-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.cp-tags span, .pd-tags span { padding: 6px 14px; border-radius: 999px; background: var(--pink-soft); color: var(--pink-deep); font-weight: 700; font-size: 14px; }
.pd-tags { justify-content: flex-start; margin: 12px 0 0; }
.pd-tags span { font-size: 13px; padding: 4px 11px; }
@media (max-width: 1080px) { .cp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .cp-grid { gap: 12px; } .cp-grid b { font-size: 18px; } .cp-grid p { font-size: 13px; } }