/* Pop — 컬러블록·라이프스타일형 */
:root {
  --font-display: "Rubik", system-ui, sans-serif;
  --font-body: "Rubik", system-ui, sans-serif;
  --ink: #1e1e24;
  --ink-2: #5c5c66;
  --mist: #f4f4f7;
  --line: #e3e3ea;
  --r: 24px;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; }
.btn { border-radius: 999px; font-weight: 700; }
.btn-ghost { border-width: 2.5px; }
.card-img { border-radius: 24px; background: color-mix(in srgb, var(--pc, #2F6FB5) 12%, #fff); }
.gallery-main { background: color-mix(in srgb, var(--pc, #2F6FB5) 12%, #fff); border-radius: 28px; }
.thumbs button { border-radius: 14px; background: color-mix(in srgb, var(--pc, #2F6FB5) 10%, #fff); }
.pdp-size { border-radius: 24px; background: color-mix(in srgb, var(--pc, #2F6FB5) 10%, #fff); }
.family-tag a { color: var(--pc, var(--brand)); }
.bullets li::marker { color: var(--pc, var(--brand)); }

.p-sticker { display: inline-block; background: #ffe14d; color: var(--ink); font-weight: 800; font-size: .8rem; padding: 6px 12px; border-radius: 999px; transform: rotate(var(--rot, -6deg)); box-shadow: 0 2px 0 rgba(0,0,0,.15); letter-spacing: .01em; }

/* hero */
.p-hero { padding: clamp(40px, 7vw, 88px) 0 clamp(32px, 5vw, 64px); overflow: hidden; }
.p-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.p-copy h1 { font-size: clamp(3rem, 8vw, 6.4rem); font-weight: 900; line-height: .95; }
.p-stickers { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.p-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1; }
.p-tile { display: grid; place-items: center; padding: 10%; border-radius: 32px; background: color-mix(in srgb, var(--pc) 18%, #fff); transition: transform .2s; }
.p-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.p-tile:hover { transform: scale(1.03) rotate(-1deg); }
.p-tile-1 { border-top-left-radius: 90px; }
.p-tile-4 { border-bottom-right-radius: 90px; }
@media (max-width: 860px) { .p-hero-grid { grid-template-columns: 1fr; } .p-mosaic { max-width: 480px; } }

/* moments */
.p-moments { padding: clamp(40px, 6vw, 72px) 0; background: var(--mist); }
.p-moments h2 { font-size: clamp(2rem, 4vw, 3rem); }
.p-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 28px; }
.p-tabs button { font: 700 .95rem var(--font-body); padding: 11px 18px; border-radius: 999px; border: 2.5px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.p-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
@media (max-width: 600px) { .p-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .p-card-img .p-sticker { font-size: .7rem; padding: 4px 9px; top: 8px; right: 8px; } .p-card h3 { font-size: .95rem; } }
.p-card { display: block; }
.p-card[hidden] { display: none; }
.p-card-img { position: relative; aspect-ratio: 1; border-radius: 28px; background: color-mix(in srgb, var(--pc) 16%, #fff); display: grid; place-items: center; padding: 10%; overflow: visible; }
.p-card-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.p-card-img .p-sticker { position: absolute; top: 12px; right: 12px; }
.p-card h3 { font-size: 1.05rem; margin: 12px 4px 2px; }
.p-card p { margin: 0 4px; color: var(--ink-2); font-size: .9rem; }
.p-card:hover .p-card-img { background: color-mix(in srgb, var(--pc) 28%, #fff); }

/* why tiles */
.p-why { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 4vw, 48px); }
.p-why h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 24px; }
.p-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.p-why-tile { padding: 28px 26px 30px; border-radius: 28px; background: color-mix(in srgb, var(--pc) 10%, #fff); display: grid; align-content: start; gap: 10px; }
.p-why-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--pc); color: var(--pc); display: grid; place-items: center; }
.p-why-icon svg { width: 34px; height: 34px; color: #fff; }
.p-why-tile h3 { font-size: 1.25rem; margin: 6px 0 0; }
.p-why-tile p { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .p-why-grid { grid-template-columns: 1fr; } }

/* actual size */
.p-size { padding: clamp(40px, 6vw, 72px) 0; }
.p-size-head { display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; margin-bottom: 20px; }
.p-size-head h2 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.p-size-head p { margin: 0; color: var(--ink-2); max-width: 36em; }
.p-size-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.p-size-row li a { display: grid; justify-items: center; gap: 6px; padding: 18px 22px 14px; border-radius: 24px; background: color-mix(in srgb, var(--pc) 12%, #fff); font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.p-size-row li a:hover { background: color-mix(in srgb, var(--pc) 24%, #fff); color: var(--ink); }
@media (max-width: 600px) { .p-size-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; } .p-size-row li { flex: 0 0 auto; } }

/* family bands */
.p-band { padding: clamp(36px, 6vw, 64px) 0; background: color-mix(in srgb, var(--pc) 12%, #fff); }
.p-band + .p-band { border-top: 0; }
.p-band-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.p-band-copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: color-mix(in srgb, var(--pc) 80%, #000); }
.p-band-copy p { color: var(--ink-2); max-width: 30em; }
.p-band .link { color: color-mix(in srgb, var(--pc) 80%, #000); }
.p-band-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.p-mini { display: grid; gap: 8px; justify-items: center; text-align: center; font-weight: 600; font-size: .9rem; }
.p-mini img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 24px; padding: 8%; }
.p-mini:hover img { outline: 3px solid var(--pc); }
@media (max-width: 760px) { .p-band-grid { grid-template-columns: 1fr; } }

.cta-band { background: var(--ink); }
.site-foot { margin-top: 0; }
/* 상품 목록: 패밀리 제목에 대표색 */
.family-head h2, .family-head h3 { color: color-mix(in srgb, var(--pc, var(--ink)) 80%, #000); }
.page-head h1 { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 900; }
.jump a { border-width: 2px; font-weight: 600; }
.cta-band .btn-amazon { background: #ffe14d; color: var(--ink); }
.cta-band .btn-amazon:hover { background: #fff; }
.site-foot { background: var(--ink); }