/* ==========================================================================
   product.css — Product 목록(/product/) + 상세(/product/<slug>/) 전용 스타일
   site.css §13(.product-list) / §14(.product-detail) 의 기본값 위에 원본(Wix) 치수·색을 맞춘다.
   로드: $page['styles'] = ['/assets/css/pages/product.css']
   브레이크포인트: ≤767px 모바일 / ≥768px 데스크톱 (site.css 와 동일)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 목록 (/product/)
   원본 데스크톱: 제목 "Product"(Heavy 30px #77BDF6, margin 33px 0 29px) →
   리피터 항목 754px 중앙, 항목 사이 60px(item-margin 30px×2), 항목 안쪽:
   이미지 222×222 (left 42 / margin 21px 0 22px) · 제목 20px Bold (left 306, margin-top 72)
   · 설명 14px/1.6 (margin-bottom 19) · "Read More" 16px Bold #6AAAE4
   원본 모바일: 이미지(가로 꽉 참 14:9, 그림자) → 제목 18px → 설명 → Read More
   -------------------------------------------------------------------------- */
.product-section { padding: 26px 0 64px; }
.product-section-title { margin: 0 0 26px; line-height: 1.4; letter-spacing: normal; }

.product-list { max-width: 754px; margin: 0 auto; }
.product-item { display: block; padding: 0; }
.product-item + .product-item { border-top: 0; margin-top: 56px; }

.product-item-thumb {
  display: block; width: 100%; height: auto; line-height: 0;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
  background: #F2F2F2;
}
.product-item-thumb img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 14 / 9;            /* 원본 모바일 280×180 */
  object-fit: cover;
}
.product-item-body { padding: 14px 20px 0; }
.product-item-title { margin: 0 0 14px; font-family: var(--ff-body); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--c-black); }
.product-item-title a { color: inherit; }
.product-item-title a:hover, .product-item-title a:focus-visible { color: var(--c-blue); text-decoration: none; }
.product-item-desc { margin: 0 0 22px; font-family: var(--ff-body); font-weight: 700; font-size: 14px; line-height: 1.6; color: var(--c-black); }
.read-more {
  display: inline-block; font-family: var(--ff-body); font-weight: 700; font-size: 16px; line-height: 1.4;
  color: var(--c-accent);          /* #6AAAE4 (원본 --txt:106,170,228) */
  text-decoration: none;
  transition: color .4s ease;
}
.read-more:hover, .read-more:focus-visible { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .product-section { padding: 33px 0 84px; }
  .product-section-title { margin-bottom: 29px; }
  .product-item { display: flex; flex-direction: row; align-items: flex-start; gap: 0; padding: 21px 0 22px 42px; }
  .product-item + .product-item { margin-top: 60px; }
  .product-item-thumb { flex: 0 0 222px; width: 222px; height: 222px; box-shadow: none; }
  .product-item-thumb img { width: 222px; height: 222px; aspect-ratio: auto; }
  .product-item-body { flex: 0 1 442px; max-width: 442px; min-width: 0; padding: 51px 0 0 42px; }  /* 제목 top 72 − 이미지 top 21 = 51 */
  .product-item-title { margin: 0 0 6px; font-size: 20px; }
  .product-item-desc { margin: 0 0 19px; }
}

/* --------------------------------------------------------------------------
   2. 상세 (/product/<slug>/)
   원본: "< Back"(16px Bold, 132×40, left 94) → 제목(ExtraBold 25px/1.4 #3B3B3B, margin-bottom 12)
   → 부제(ExtraBold 20px/1.4 #666, margin-bottom 10) → 밴드 rgba(209,209,209,.29)=#F2F2F2,
   모자이크 815×568 (margin 17px 0 28px; 405+405 / 346+465, 간격 5px) → 밴드 아래 10px
   → Challenge 블록(margin 21px 0 17px, 폭 680 중앙) → Solution 블록 → 푸터
   -------------------------------------------------------------------------- */
.product-detail { padding: 2px 0 0; }

/* Back 링크 + 제목: 모자이크와 같은 폭(815)으로 맞춰 Back 이 모자이크 좌측 변과 정렬되게 */
.product-detail-top { max-width: calc(815px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.back-link {
  display: inline-block; margin: 0; padding: 9px 0;
  font-family: var(--ff-body); font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--c-black);
  transition: color .4s ease;
}
.back-link:hover, .back-link:focus-visible { color: var(--c-blue); text-decoration: none; }
.product-detail-head { text-align: center; padding: 0; margin-top: -4px; }
.product-detail-title {
  margin: 0 0 10px; font-family: var(--ff-body); font-weight: 800; font-size: 22px; line-height: 1.4;
  letter-spacing: normal; color: #3B3B3B;
}
.product-detail-subtitle {
  margin: 0 0 10px; font-family: var(--ff-body); font-weight: 800; font-size: 16px; line-height: 1.4;
  letter-spacing: normal; color: #666666;
}

/* 이미지 밴드 + 모자이크 */
.product-gallery { background: #F2F2F2; padding: 16px 0 20px; margin: 0 0 10px; }
.product-gallery-grid {
  --gallery-w: 815;                /* 모자이크 기준 폭(px). 각 이미지는 --w/--h 로 비율·폭 계산 */
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 8px 0;
  max-width: calc(815px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
}
/* 타일 래퍼(<a> 이미지 / <div> 동영상). --w/--h 는 인라인 스타일로 전달되어 img/video 에 상속된다 */
.product-gallery-item {
  position: relative; display: block; width: 100%; max-width: 100%;
  line-height: 0; background: #E4E4E4; color: inherit; text-decoration: none;
  outline-offset: 3px;
}
a.product-gallery-item { cursor: zoom-in; }
.product-gallery-item:focus-visible { outline: 3px solid var(--c-blue); }
.product-gallery-grid img,
.product-gallery-grid video {
  display: block; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: var(--w, 815) / var(--h, 459);
  object-fit: cover;
  background: #E4E4E4;
}
.product-gallery-item--video video { cursor: pointer; }

/* 재생 삼각형 오버레이 (원본: 60px 원 rgba(209,209,209,.6) + 검정 삼각형, 중앙). 재생 중엔 숨기고 hover/focus 시 일시정지 아이콘으로 */
.product-gallery-play {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; padding: 0;
  border: 0; background: transparent; cursor: pointer; line-height: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.product-gallery-play svg { display: block; width: 60px; height: 60px; }
.product-gallery-play-bg  { fill: rgba(209, 209, 209, .6); transition: fill .25s ease; }
.product-gallery-play-tri { fill: #000; }
.product-gallery-play-pause { fill: #000; display: none; }
.product-gallery-play:hover .product-gallery-play-bg,
.product-gallery-play:focus-visible .product-gallery-play-bg { fill: rgba(255, 255, 255, .85); }
.product-gallery-play:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; border-radius: 50%; }
.product-gallery-item--video.is-playing .product-gallery-play { opacity: 0; }
.product-gallery-item--video.is-playing:hover .product-gallery-play,
.product-gallery-item--video.is-playing .product-gallery-play:focus-visible { opacity: .9; }
.product-gallery-item--video.is-playing .product-gallery-play-tri { display: none; }
.product-gallery-item--video.is-playing .product-gallery-play-pause { display: block; }

/* "크게 보기"(라이트박스) 버튼 — 우상단 작은 원형 */
.product-gallery-expand {
  position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #FFF; cursor: pointer; line-height: 0;
  opacity: .75; transition: opacity .25s ease, background-color .25s ease;
}
.product-gallery-expand svg { display: block; margin: 0 auto; fill: currentColor; }
.product-gallery-expand:hover, .product-gallery-expand:focus-visible { opacity: 1; background: rgba(0, 0, 0, .7); }
.product-gallery-expand:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }
/* JS 없으면 native controls 가 남으므로 오버레이 버튼은 숨김 */
.no-js .product-gallery-play, .no-js .product-gallery-expand { display: none; }

/* Challenge / Solution */
.product-text { max-width: calc(680px + 2 * var(--gutter)); margin: 0 auto; padding: 21px var(--gutter) 0; }
.product-text-block + .product-text-block { margin-top: 17px; }
.product-text-block:last-child { padding-bottom: 24px; }     /* 원본 말미의 빈 줄(<br>) */
.product-text h2 { margin: 0; font-family: var(--ff-body); font-weight: 800; font-size: 16px; line-height: 1.5; color: #3B3B3B; }
.product-text p  { margin: 0; font-family: var(--ff-body); font-weight: 700; font-size: 16px; line-height: 1.5; color: #3B3B3B; }

@media (min-width: 768px) {
  .product-detail { padding: 2px 0 0; }
  .product-detail-head { margin-top: -7px; }              /* 원본 Back 버튼 margin-bottom -7px */
  .product-detail-title { margin-bottom: 12px; font-size: 25px; }
  .product-detail-subtitle { font-size: 20px; }
  .product-gallery { padding: 17px 0 28px; }
  .product-gallery-grid { gap: 5px 0; }
  /* 폭 = w/815 비율 → 405+405 = 99.4%, 346+465 = 99.5% (space-between 으로 5px/4px 간격). 815 이상에서 원본과 동일 치수 */
  .product-gallery-item { width: calc(var(--w, 815) / var(--gallery-w, 815) * 100%); }
  .product-text { padding-top: 21px; }
}

/* 알 수 없는 슬러그 → 템플릿 내부 404: 제품명 링크 4개가 한 줄에 안 들어가면 줄바꿈 */
.page-product .error-links { flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   3. 라이트박스 (모자이크 타일 클릭 → 확대 보기; 마크업은 site.js 가 body 끝에 생성)
   .lightbox[role=dialog] > .lightbox-stage(img|video) + 닫기/이전/다음 버튼 + 카운터/캡션
   -------------------------------------------------------------------------- */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .9); -webkit-tap-highlight-color: transparent;
}
.lightbox[hidden] { display: none; }
.lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; max-width: 90vw; max-height: 90vh; line-height: 0; }
.lightbox-stage img, .lightbox-stage video {
  display: block; width: auto; height: auto; max-width: 90vw; max-height: 90vh;
  object-fit: contain; background: #000; box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.lightbox-stage video { width: min(90vw, calc(90vh * var(--w, 16) / var(--h, 9))); aspect-ratio: var(--w, 16) / var(--h, 9); }
.lightbox-btn {
  position: absolute; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #FFF; cursor: pointer; line-height: 0;
  transition: background-color .2s ease;
}
.lightbox-btn svg { display: block; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-btn:hover, .lightbox-btn:focus-visible { background: rgba(255, 255, 255, .3); }
.lightbox-btn:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }
.lightbox-btn[hidden] { display: none; }
.lightbox-close { top: 14px; right: 14px; }
.lightbox-prev  { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 10px; top: 50%; transform: translateY(-50%); }
.lightbox-meta {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  max-width: 90vw; margin: 0; padding: 0 12px; text-align: center;
  font-family: var(--ff-body); font-weight: 700; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .85);
  pointer-events: none;
}
.lightbox-meta .lightbox-counter { display: inline-block; margin-right: 10px; opacity: .8; }
@media (min-width: 768px) {
  .lightbox-btn { width: 48px; height: 48px; }
  .lightbox-close { top: 20px; right: 20px; }
  .lightbox-prev  { left: 20px; }
  .lightbox-next  { right: 20px; }
  .lightbox-meta  { bottom: 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-gallery-play, .product-gallery-expand, .lightbox-btn { transition: none; }
}