/* SOUND FRAME — proof / switcher components (HOME approved; reused by WORK + GUIDE)
   Every product scene = visual cluster → 1px rule → 3-column technical spec. Sizes of the scenes stay individual. */
/* ---------------- what you receive ---------------- */
.recv { padding: 0 var(--gutter) var(--sec); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4.4vw, 56px); }
.recv > * { min-width: 0; }
.recv__side .label { padding: 0; }
.recv__side h2 { margin-top: 22px; font-size: clamp(24px, 2.3vw, 36px); font-weight: 400; line-height: 1.4; letter-spacing: -.02em; }
.recv__tabs { margin-top: clamp(24px, 4vw, 56px); display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 0; }
.recv__tabs::-webkit-scrollbar { display: none; }
.recv__tabs button { white-space: nowrap; font-size: 15px; color: var(--muted); padding: 12px 0 10px; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; text-align: left; }
.recv__tabs button:hover, .recv__tabs button:focus-visible { color: var(--ivory); border-bottom-color: rgba(244, 239, 231, .5); }
.recv__tabs button[aria-selected="true"] { color: var(--ivory); border-bottom-color: var(--ivory); }
.recv__hint { margin-top: 12px; color: var(--muted); }
.recv__stage { min-width: 0; }
.panel { display: none; }
.panel.is-on { display: block; animation: panel-in .36s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.panel > .lnk { margin-top: 18px; }
.pf { position: relative; overflow: hidden; }
.pf img { width: 100%; height: auto; background: var(--graphite); }
.pf__o { display: block; width: 100%; padding: 0; cursor: pointer; }
@media (hover: hover) {
.pf img { transition: transform .5s var(--ease); }
.pf:hover img { transform: scale(1.03); }
}
/* shared spec caption: label / value in three columns (one line each on desktop), stacked rows on phones */
.spec { grid-column: 1 / -1; margin: clamp(20px, 2.4vw, 32px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.spec dt { font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.spec dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ivory); }
@media (max-width: 600px) {
.spec { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
.spec > div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.spec dd { margin: 0; }
}
/* release kit — lead moodboard + cover / text-free, kept to one comfortable viewport */
.proof--kit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(10px, 1.4vw, 20px); align-items: start; max-width: 720px; }
.kit__covers { display: grid; gap: clamp(10px, 1.4vw, 20px); grid-template-columns: minmax(0, 1fr); }
.kit__covers .pf--tf { width: 52%; justify-self: end; }
/* sns kit — same hierarchy: lead moodboard + five feeds (original order, 4:5) + optional add-on row.
   Desktop: moodboard | 3 × 2 feeds (wrappers dissolve into one grid). Phones: moodboard + two feeds side by side, remaining three feeds in a row below. */
.proof--sns { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.333fr)); gap: clamp(6px, .9vw, 12px) clamp(10px, 1.4vw, 20px); align-items: start; max-width: 780px; }
.proof--sns > .sk__lead, .proof--sns > .sk__rest, .proof--sns .sk__pair { display: contents; }
.pf--snsmood { grid-column: 1; grid-row: 1 / span 2; }
.pf--snsmood img { width: 100%; }
.pf--feed img { aspect-ratio: 4 / 5; object-fit: cover; }
.addon { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 28px); padding: clamp(10px, 1.2vw, 16px) 0 0; border-top: 1px solid var(--line); margin-top: clamp(8px, 1vw, 14px); }
.addon .meta { flex: 1 1 auto; line-height: 1.8; color: var(--ivory); }
.addon .meta span { letter-spacing: .06em; text-transform: none; color: var(--muted); font-size: 12px; }
.addon__row { flex: none; display: flex; gap: 6px; align-items: flex-end; }
.addon__row img { width: clamp(52px, 6vw, 84px); height: auto; background: var(--graphite); }
/* device frames: approved master WebP with a transparent screen hole; the real capture is clipped to that hole (see tools/make_device_frames.py) */
.proofw { max-width: 880px; }
.proof--web { position: relative; }
.dev { position: relative; aspect-ratio: var(--fr); }
.dev__scr { position: absolute; z-index: 1; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); overflow: hidden; background: #0d0d0e; border-radius: var(--rx) / var(--ry); }
.dev__scr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; background: #0d0d0e; }
.dev__fr { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.dev--desk { width: 78%; }
.dev--mob { position: absolute; right: 0; bottom: 0; width: 25%; }
.proof__note { margin-top: 18px; font-size: 15px; line-height: 1.7; color: rgba(244, 239, 231, .82); max-width: 52ch; }
@media (min-width: 900px) {
.recv { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.recv__side { position: sticky; top: calc(var(--hdr) + 24px); }
.recv__hint { display: none; }
.recv__tabs { flex-direction: column; gap: 0; overflow: visible; border-top: 1px solid var(--line); }
.recv__tabs button { display: flex; justify-content: space-between; align-items: center; padding: 15px 0 13px; border-bottom: 1px solid var(--line); font-size: 16px; }
.recv__tabs button[aria-selected="true"]::after { content: "CURRENT"; font-size: 10px; letter-spacing: .22em; color: var(--muted); }
}
@media (max-width: 899px) {
.proof--kit { max-width: 560px; }
}
@media (max-width: 640px) {
.proof--sns { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.proof--sns > .sk__lead { display: grid; grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); gap: 8px; align-items: stretch; }
.proof--sns .sk__pair { display: grid; gap: 8px; align-content: start; }
.proof--sns > .sk__rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf--snsmood { grid-column: auto; grid-row: auto; }
.pf--snsmood img { height: 100%; object-fit: cover; object-position: top; }
}

.proof__lk { margin: 18px 0 0; }

/* HOME Visual System — Release kit: concept previews live in the gallery (row 2), SNS kit: story examples live in the gallery (row 3) */
.spec--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 600px) { .spec--4 { grid-template-columns: 1fr; } }
.proof--kit2 { grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: 780px; row-gap: clamp(14px, 1.8vw, 24px); }
.proof--kit2 .pf--mood { grid-column: 1 / 6; }
.proof--kit2 .pf--cover { grid-column: 6 / 13; }
.kit2__tf { grid-column: 1 / 4; }
.kit2__cp { grid-column: 4 / 13; }
.kit2__cp ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.kit2__l { margin: 0 0 8px; font-size: 10px; letter-spacing: .2em; color: var(--muted); }
.kit2__cp .pf--cp img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 600px) {
.kit2__tf { grid-column: 1 / 7; }
.kit2__cp { grid-column: 1 / -1; }
.proof--kit2 .pf--mood { grid-column: 1 / 6; }
.proof--kit2 .pf--cover { grid-column: 6 / 13; }
}
.proof--sns2 .sk__story { display: contents; }
.proof--sns2 .sk__sl { grid-column: 1; grid-row: 3; align-self: end; margin: 0; font-size: 10px; letter-spacing: .2em; line-height: 1.8; color: var(--muted); }
.proof--sns2 .sk__sl span { color: var(--ivory); }
.proof--sns2 .pf--story { grid-row: 3; }
.proof--sns2 .pf--story:nth-child(2) { grid-column: 2; }
.proof--sns2 .pf--story:nth-child(3) { grid-column: 3; }
.proof--sns2 .pf--story:nth-child(4) { grid-column: 4; }
.proof--sns2 .pf--story img { aspect-ratio: 1080 / 1920; }
@media (max-width: 640px) {
.proof--sns2 .sk__story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.proof--sns2 .sk__sl { grid-column: 1 / -1; grid-row: auto; margin-top: 8px; }
.proof--sns2 .pf--story, .proof--sns2 .pf--story:nth-child(n) { grid-column: auto; grid-row: auto; }
}
.kit2__tf, .kit2__cp, .kit2__cp li, .proof--kit2 > * { min-width: 0; }
.kit2__cp .pf { width: 100%; }
.proof--sns2 .pf--cp4 img { aspect-ratio: 4 / 5; object-fit: cover; }
.proof--sns2 .pf--cp4 .cp__b { display: block; width: 100%; padding: 0; cursor: pointer; }
.proof--sns2 .sk__story--r4 .sk__sl, .proof--sns2 .sk__story--r4 .pf--story { grid-row: 4; }
.kit2__cp .cp__b { display: block; width: 100%; padding: 0; cursor: pointer; }