/* 에어로소프트 코리아 제품 페이지 (style.css 의 토큰·헤더·버튼·카드·푸터를 그대로 쓰고, 이 페이지에만 필요한 것만) */
.pp .back-m { display: none; }
.p-hero { padding: 56px 0 var(--sec); }
.p-photo { grid-column: 1 / span 6; aspect-ratio: 6 / 7; }
.p-photo img { height: 100%; object-fit: cover; }
.p-intro { grid-column: 8 / span 5; align-self: center; }
.crumb { font-size: 14px; color: var(--graphite); margin-bottom: 20px; }
.crumb a { border-bottom: 1px solid var(--stone); }
.p-title { font: 300 var(--t-sec)/1.25 var(--f-head); letter-spacing: -0.02em; text-wrap: balance; }
.p-code { font-family: var(--f-en); letter-spacing: 0.08em; }
.crumb { text-wrap: balance; }
.p-code { margin-top: 8px; font-size: 14px; color: var(--graphite); letter-spacing: .06em; }
.p-lead { margin-top: 32px; max-width: 24em; }
.p-intro .btns { margin-top: 40px; }

.p-sec .p-h { grid-column: 1 / span 4; margin-bottom: 0; align-self: start; }
.p-sec .p-body { grid-column: 5 / -1; }
.p-sticky { position: sticky; top: 96px; }
.p-sticky .cap { margin-top: 16px; max-width: 14em; }
.p-dl { margin: 0; }
.p-row { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--stone); }
.p-row:last-child { border-bottom: 1px solid var(--stone); }
.p-row dt { font-size: 15px; color: var(--graphite); }
.p-row dd { margin: 0; }
.p-feat li { padding: 1px 0; }
.p-ins { margin-top: 32px; }
.p-ins a { border-bottom: 1px solid var(--black); padding-bottom: 2px; }
.p-note { margin-top: 16px; }
.p-poster { margin: 0; }
.p-poster .media { display: block; max-width: 520px; aspect-ratio: 640 / 905; }
.p-poster .media img { height: 100%; }
.p-poster figcaption { margin-top: 12px; }
.p-detail { max-width: 860px; }
.p-detail img { aspect-ratio: 860 / 1100; background: var(--stone); height: auto; }
.p-tel { margin: 24px 0 0; }
.p-tel + .btns { margin-top: 28px; }
.p-grid { --n: 4; }
.p-grid .card { display: block; }
.p-back { margin-top: 64px; }

@media (max-width: 760px) {
  .pp .back-m { display: block; font: 500 14px/1 var(--f-body); margin-right: auto; padding: 8px 0; }
  .pp .logo { margin-right: 0; }
  .p-hero { padding: 0 0 var(--sec); }
  .p-hero .wrap { padding: 0; }
  .p-photo { grid-column: 1 / -1; }
  .p-intro { grid-column: 1 / -1; padding: 28px 20px 0; }
  .p-lead { margin-top: 20px; max-width: none; }
  .p-intro .btns { margin-top: 28px; }
  .p-intro .btn { flex: 1 1 140px; padding: 0 16px; }
  .p-sec .p-h, .p-sec .p-body { grid-column: 1 / -1; }
  .p-sec .p-h { margin-bottom: var(--inner); }
  .p-sticky { position: static; }
  .p-sticky .cap { max-width: none; }
  .p-row { grid-template-columns: 6.5em 1fr; gap: 12px; }
  .p-poster .media { max-width: none; }
  .p-detail { max-width: none; }
  .p-back { margin-top: 40px; }
}

.p-lead, .p-feat li, .p-ins, .p-note, .crumb { text-wrap: balance; }
.p-intro .btns { gap: 12px; }
@media (max-width: 760px) { .p-grid { --n: 2; } }   /* 휴대폰: 다른 신발 카드 4열(폭 80px, 이름이 한 낱말씩 끊김) -> 2열 */

/* ---- 상세 사이 영상 칸 (시안 2026-11-04): 상세 이미지와 같은 폭·모서리 없음·같은 돌색 바탕, 영상 칸만 튀지 않게 ---- */
.p-clip { margin: 0; position: relative; }
.p-detail .p-clip img { aspect-ratio: auto; height: 100%; object-fit: cover; }
.p-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.p-clip video.on { opacity: 1; }
.p-clip-btn { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(243, 243, 241, .88); color: var(--black); border: 1px solid var(--black); cursor: pointer; transition: background .2s, color .2s; }
.p-clip-btn:hover { background: var(--black); color: #fff; }
.p-clip-btn svg { width: 16px; height: 16px; fill: currentColor; }
.p-clip-btn[data-state="playing"] .i-play, .p-clip-btn[data-state="paused"] .i-pause { display: none; }
@media (max-width: 760px) { .p-clip-btn { right: 0; bottom: 0; } }