/* ── 스켈레톤 UI (공통) ────────────────────────────────────────────────
   데이터가 오기 전, 실제 콘텐츠와 같은 크기의 회색 자리표시자를 먼저 그려
   '빈 화면 → 갑자기 콘텐츠' 로 튀는 느낌(레이아웃 점프)을 없앤다.

   쓰는 법 (skeleton.js):
     Skeleton.show(el, 'product', 8);   // el 안에 스켈레톤 카드 8장
     Skeleton.done(el);                 // 데이터 도착/실패 시 걷어냄
   show() 는 el 에 .sk-loading 을 붙여 기존(폴백) 자식을 감추므로,
   하드코딩 폴백이 있는 영역(카테고리·상품)에도 그대로 쓸 수 있다.
   ------------------------------------------------------------------ */

:root {
  --sk-base: #EFEAE7;   /* 자리표시자 기본색 (페이지 톤에 맞춘 웜 그레이) */
  --sk-shine: #F9F6F4;  /* 훑고 지나가는 하이라이트 */
}

@keyframes skShimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* 자리표시자 한 조각 — 이 클래스가 붙은 요소가 반짝인다 */
.sk {
  display: block;
  background-color: var(--sk-base);
  background-image: linear-gradient(90deg, transparent 0%, var(--sk-shine) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: skShimmer 1.5s linear infinite;
  border-radius: 8px;
}
/* 애니메이션을 줄이도록 설정한 사용자에게는 정적인 회색 블록으로 */
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* 로딩 중인 컨테이너: 스켈레톤(.sk-block)만 남기고 기존 자식은 감춘다 */
.sk-loading > *:not(.sk-block) { display: none !important; }

/* ── 히어로 배너 ── */
/* .hb-viewport 는 준비 전 opacity:0 이라(레이아웃만 잡힘) 그 위를 덮는다.
   padding:inherit 로 .hero-banner 의 반응형 패딩을 그대로 따라간다. */
.hero-banner { position: relative; }
.sk-hero {
  position: absolute; inset: 0; padding: inherit;
  display: flex; justify-content: center; align-items: flex-start;
  pointer-events: none; transition: opacity .28s ease;
}
.sk-hero.is-done { opacity: 0; }
.sk-hero-slide { width: min(1152px, calc(100% - 48px)); aspect-ratio: 1200 / 500; border-radius: 10px; }
@media (max-width: 768px) { .sk-hero-slide { width: 100%; aspect-ratio: auto; height: 300px; border-radius: 8px; } }
@media (max-width: 480px) { .sk-hero-slide { height: 220px; } }

/* ── 카테고리 아이콘 그리드 ── */
/* 래퍼는 실제와 같은 .cat-page(PC=display:contents / 모바일=4×3 그리드)를 쓰고,
   칸도 .cat-grid-item 을 그대로 써서 크기·간격이 실제 목록과 어긋나지 않게 한다. */
.sk-cat-icon { width: 56px; height: 56px; border-radius: 8px; }
.sk-cat-label { width: 46px; height: 13px; border-radius: 999px; }
@media (max-width: 768px) {
  .sk-cat-icon { width: 50px; height: 50px; }
  .sk-cat-label { width: 70%; max-width: 46px; height: 12px; }
}

/* ── 해시태그 필터 칩 (3행) ──
   자리표시자도 실제와 똑같은 마크업(.filter-scroll > .filter-stack > .filter-row > .filter-group)을 쓴다.
   → 좌우 정렬(.filter-wrap 패딩)과 행 간격(PC 14px / 모바일 6px)이 페이지 CSS 그대로라 어긋나지 않는다.
   칩 높이도 px 로 박지 않고 실제 칩과 같은 방식(글자 + padding 6/12 + 테두리 1)으로 만든다
   — 그래야 PC 32px / 모바일 30px 이 자동으로 맞아 교체 순간 영역이 커졌다 작아지지 않는다. */
.sk-chip { display: inline-block; box-sizing: border-box; flex: none;
  padding: 6px 12px; border: 1px solid transparent; border-radius: 999px;
  font-size: 15px; line-height: 18px; }
/* line-height 는 실제 칩(<button>)의 글자 높이(PC 18px / 모바일 16px)를 그대로 박는다.
   <span> 은 본문 line-height(1.6)를 물려받아 그냥 두면 칩이 6px 더 커진다 → 교체 때 영역이 튄다.
   높이 = 18(또는 16) + 패딩 12 + 테두리 2 = 실제 칩 32px(모바일 30px). */
@media (max-width: 768px) { .sk-chip { font-size: 14px; line-height: 16px; } }

/* ── 상품 카드 (.product-grid 안에 들어가는 한 칸) ── */
.sk-card-img { aspect-ratio: 1 / 1; border-radius: 8px; }
.sk-card-bar { height: 26px; margin-top: 8px; border-radius: 6px; }
.sk-card-name { height: 15px; margin-top: 10px; border-radius: 999px; }
.sk-card-name.short { width: 62%; margin-top: 6px; }

/* ── '지금 가장 많이 찾는 선물' 카드 (.season-grid 안 가로형 카드) ── */
.sk-hcard { display: flex; gap: 16px; }
.sk-hcard-thumb { flex: 0 0 116px; height: 116px; border-radius: 10px; }
.sk-hcard-info { flex: 1; min-width: 0; padding-top: 4px; }
.sk-hcard-info > .sk { height: 14px; border-radius: 999px; margin-bottom: 9px; }
.sk-hcard-info > .sk:nth-child(1) { width: 38%; }
.sk-hcard-info > .sk:nth-child(2) { width: 88%; }
.sk-hcard-info > .sk:nth-child(3) { width: 66%; }
.sk-hcard-info > .sk:nth-child(4) { width: 44%; margin-bottom: 0; }
@media (max-width: 768px) { .sk-hcard-thumb { flex-basis: 96px; height: 96px; } }

/* ── 메인 그룹(추천 꽃 등) 섹션 통째 ── */
.sk-group { max-width: 1200px; margin: 0 auto; padding: 44px 24px 48px; }
.sk-group-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; }
.sk-group-eyebrow { width: 92px; height: 24px; border-radius: 999px; }
.sk-group-title { width: min(320px, 70%); height: 26px; border-radius: 999px; }
.sk-group-desc { width: min(420px, 84%); height: 14px; border-radius: 999px; }
.sk-group-grid { display: flex; gap: 16px; justify-content: center; overflow: hidden; }
.sk-group-card { flex: 0 0 176px; height: 214px; border-radius: 14px; }
@media (max-width: 768px) {
  .sk-group { padding: 32px 20px 36px; }
  .sk-group-card { flex-basis: 132px; height: 168px; }
}

/* ── 이미지 로딩 자리표시자 ──
   동적으로 그린 카드의 <img> 가 도착할 때까지 그 칸만 반짝이게 한다.
   (이미지는 외부(moeum.kr)로 리다이렉트돼 늦게 오는 경우가 많다) */
.sk-img { position: relative; }
.sk-img::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  /* ⚠ 반드시 있어야 한다 — 이 겹침은 '보여주기'용이지 '눌리기'용이 아니다.
     빼면 히트 테스트가 이 가짜 요소에 걸려 e.target 이 <img> 가 아니라 감싼 상자가 된다.
     상품 상세의 사진 탭 넘김(e.target.closest('img') 로 이미지 위 탭만 받는 곳 3군데)이
     그대로 죽는다 — 자리표시자가 걷히기 전(또는 lazy 이미지라 load 가 늦는 동안) 계속. */
  pointer-events: none;
  background-color: var(--sk-base);
  background-image: linear-gradient(90deg, transparent 0%, var(--sk-shine) 50%, transparent 100%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: skShimmer 1.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .sk-img::after { animation: none; } }

/* ── 상품 목록(/product-list) 카드 ──
   이 페이지 카드는 메인과 골격이 다르다(이미지에 추천 띠가 맞물리고, 이름 아래 가격대 줄이 온다).
   그래서 .sk-card-* 대신 전용 클래스로 실제 카드와 같은 높이를 만든다 — 목록이 들어올 때 그리드가 튀지 않게. */
.sk-lcard-img { aspect-ratio: 1 / 1; border-radius: 8px 8px 0 0; }   /* 아래 모서리는 추천 띠와 맞물림 */
.sk-lcard-img.round { border-radius: 8px; }                          /* 띠가 없는 '제품 바로보기' 뷰 */
/* 추천 띠 높이 = 글자 13 × 1.3 + 상하 패딩 12 ≒ 29px (모바일은 글자 12 → 28px) */
.sk-lcard-band { height: 29px; border-radius: 0 0 8px 8px; }
.sk-lcard-body { padding: 12px 0 16px; }
/* 이름 한 줄이 차지하는 높이(16 × 1.4 = 22.4px)에 맞춰 상하 4px 여백 — 두 줄이면 실제 이름 영역과 같아진다 */
.sk-lcard-name { height: 15px; margin: 4px 0; border-radius: 999px; }
.sk-lcard-name.short { width: 62%; }
/* '제품 바로보기' 가격 줄 — 실제 .card-price-row(margin-top 6 · 글자 17px) 자리 */
.sk-lcard-price { width: 46%; height: 22px; margin-top: 6px; border-radius: 999px; }
/* 가격대 줄 — 실제 .card-halfbar 와 같은 배치(PC 가로 / 모바일 세로) */
.sk-lcard-range { display: flex; gap: 6px; margin-top: 12px; }
/* 한 칸(.cb-half)은 각진 회색 블록이라 자리표시자도 라운드 없이 */
.sk-half { width: 104px; max-width: 100%; height: 28px; border-radius: 0; }
@media (max-width: 768px) { .sk-lcard-band { height: 28px; } .sk-lcard-body { padding-bottom: 0; } }
@media (max-width: 600px) {
  .sk-lcard-range { flex-direction: column; gap: 4px; margin-top: 10px; }
  .sk-half { width: 96px; height: 24px; }
}
/* 카테고리 이름·개수처럼 글자 자리에 잠깐 들어가는 조각 (inline) */
.sk-text { display: inline-block; vertical-align: middle; border-radius: 999px; }

/* ── 상품 상세(product-detail) 상단 영역 ────────────────────────────────
   #detailTop 통째에 깐다. 실제 화면과 마크업이 다른 이유:
   이 페이지는 PC 와 모바일에서 '자식의 순서 자체'가 다르다(JS place() 가 DOM 을 옮긴다).
     PC   : [추천이유 이미지 520px] | [액션줄 · 상품명 · 설명 · 적정가]
     모바일: [액션줄] [이미지(풀블리드) + 탭버튼 + 회색띠] [상품명 줄] [적정가]
   그래서 두 배치에 각각 대응하는 조각을 모두 넣어 두고 미디어쿼리로 한쪽만 보여준다
   (.sk-pd-pcact ↔ .sk-pd-mobact / .sk-pd-title ↔ .sk-pd-mname).
   ------------------------------------------------------------------ */
.sk-pd-top { width: 100%; }
.sk-pd-media { width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; }   /* .reason-aside-media 와 동일 비율 */
.sk-pd-btns { display: flex; gap: 8px; margin-top: 20px; }                /* .ra-btns */
.sk-pd-btn { flex: 1; height: 43px; border-radius: 10px; }                /* .ra-btn (16px·padding 11) */
.sk-pd-act { width: 96px; height: 30px; border-radius: 8px; }             /* 액션줄 버튼 한 개 */
.sk-pd-act.sq { width: 30px; }                                           /* 톱니 등 아이콘 버튼 */
.sk-pd-title { height: 30px; margin: 7px 0; border-radius: 999px; }       /* .info-name 34px/1.28 = 한 줄 44px */
.sk-pd-title.short { width: 58%; margin-bottom: 12px; }
.sk-pd-sub { width: 76%; height: 15px; margin: 12px 0 30px; border-radius: 999px; }   /* .info-sub */
.sk-pd-price-row { display: flex; align-items: center; gap: 8px; }        /* .info-price-row */
.sk-pd-price { width: 168px; height: 30px; border-radius: 999px; }
.sk-pd-share { width: 38px; height: 38px; margin-left: auto; border-radius: 50%; }    /* .share-btn */

/* PC(≥900px) — .detail-top 이 이미 flex + padding(32/40/36) 이므로 여기서는 2단만 만든다 */
@media (min-width: 900px) {
  .sk-pd-top { display: flex; gap: 36px; align-items: flex-start; }
  .sk-pd-aside { flex: 0 0 520px; }
  .sk-pd-info { flex: 1; min-width: 0; padding-top: 8px; }
  .sk-pd-pcact { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
  .sk-pd-mobact, .sk-pd-namebar, .sk-pd-band { display: none; }
}
/* 모바일(≤899px) — 이미지는 화면 폭 전체(풀블리드), 나머지는 좌우 20px */
@media (max-width: 899px) {
  .sk-pd-pcact { display: none; }
  .sk-pd-mobact { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 12px 20px 10px; }
  .sk-pd-media { border-radius: 0; }                        /* 화면 끝에 닿으면 라운드가 잘려 보인다 */
  .sk-pd-btns { margin: 10px 20px 0; }
  .sk-pd-btn { height: 41px; }
  .sk-pd-band { display: block; height: 10px; margin-top: 20px; background: #f6f7f9; }  /* .reason-aside::after */
  .sk-pd-namebar { display: flex; align-items: center; gap: 6px;
    padding: 14px 20px; border-bottom: 10px solid #f6f7f9; }               /* .pd-backbar */
  .sk-pd-mname { flex: 1; height: 22px; border-radius: 999px; }
  .sk-pd-info { padding: 12px 20px 1px; }
  /* 실제 화면에서 모바일은 상품명(.info-name)·설명(.info-sub)을 숨긴다 — 자리표시자도 똑같이 */
  .sk-pd-title, .sk-pd-sub { display: none; }
  .sk-pd-price { width: 132px; height: 24px; }
}

/* ── 상품 상세: 추천 상품 카드 (.rec-grid 안 한 칸) ── */
.sk-pd-rec-thumb { width: 100%; aspect-ratio: 1 / 1; margin-bottom: 8px; border-radius: 12px; }
.sk-pd-rec-name { height: 16px; margin-bottom: 6px; border-radius: 999px; }
.sk-pd-rec-name.short { width: 64%; }
.sk-pd-rec-price { width: 84px; height: 20px; margin-top: 8px; border-radius: 999px; }

/* '상품 정보 접기'(PC · detailTop.summaryClosed 저장값)로 들어오면 오른쪽 정보 열은 실제로도 없다 —
   자리표시자만 두 열로 그리면 로드가 끝나는 순간 오른쪽 한 열이 통째로 사라진다. */
@media (min-width: 900px) {
  .detail-top.summary-closed .sk-pd-info { display: none; }
  .detail-top.summary-closed .sk-pd-aside { margin-left: auto; margin-right: auto; }
}