/* ════════════════════════════════════════
   skin-layouts.css — 스킨별 "레이아웃 성격" 변형
   같은 마크업이지만 [data-skin] 으로 구조 무드를 다르게
   ── 4가지 패밀리로 묶음 ──
   • SOFT(가운데 정렬·여백): bloom·coral·lavender·azure
   • EDITORIAL(세로 긴 미디어·여유 그리드): mono·slate·noir·mocha
   • POP(촘촘·굵은 밑줄 헤더): citrus·berry·crimson
   • TECH(촘촘·테두리 글로우): grape·midnight
════════════════════════════════════════ */

/* ── SOFT : 히어로/헤더/카드 모두 가운데 정렬, 더 부드럽게 ── */
[data-skin="bloom"] .st-hero,[data-skin="coral"] .st-hero,
[data-skin="lavender"] .st-hero,[data-skin="azure"] .st-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
[data-skin="bloom"] .sth-sub,[data-skin="coral"] .sth-sub,
[data-skin="lavender"] .sth-sub,[data-skin="azure"] .sth-sub{margin-left:auto;margin-right:auto}
[data-skin="bloom"] .sth-title,[data-skin="coral"] .sth-title,
[data-skin="lavender"] .sth-title,[data-skin="azure"] .sth-title{max-width:13em}
[data-skin="bloom"] .sth-art,[data-skin="coral"] .sth-art,
[data-skin="lavender"] .sth-art,[data-skin="azure"] .sth-art{opacity:.09}
[data-skin="bloom"] .sh-head,[data-skin="coral"] .sh-head,
[data-skin="lavender"] .sh-head,[data-skin="azure"] .sh-head{justify-content:center;text-align:center}
[data-skin="bloom"] .sh-head a,[data-skin="coral"] .sh-head a,
[data-skin="lavender"] .sh-head a,[data-skin="azure"] .sh-head a{display:none}
[data-skin="bloom"] .pcard,[data-skin="coral"] .pcard,
[data-skin="lavender"] .pcard,[data-skin="azure"] .pcard{text-align:center}
[data-skin="bloom"] .pc-bottom,[data-skin="coral"] .pc-bottom,
[data-skin="lavender"] .pc-bottom,[data-skin="azure"] .pc-bottom{justify-content:center;gap:10px}
[data-skin="bloom"] .pc-add,[data-skin="coral"] .pc-add,
[data-skin="lavender"] .pc-add,[data-skin="azure"] .pc-add{margin-left:0}

/* ── EDITORIAL : 세로로 긴 상품 컷 + 여유로운 그리드 ── */
[data-skin="mono"] .sh-grid,[data-skin="slate"] .sh-grid,
[data-skin="noir"] .sh-grid,[data-skin="mocha"] .sh-grid{
  grid-template-columns:repeat(auto-fill,minmax(198px,1fr));
}
[data-skin="mono"] .pc-media,[data-skin="slate"] .pc-media,
[data-skin="noir"] .pc-media,[data-skin="mocha"] .pc-media{aspect-ratio:4/5}
[data-skin="mono"] .pc-name,[data-skin="slate"] .pc-name,
[data-skin="noir"] .pc-name,[data-skin="mocha"] .pc-name{min-height:0}

/* ── POP : 촘촘한 그리드 + 굵은 밑줄 섹션 헤더 ── */
[data-skin="citrus"] .sh-grid,[data-skin="berry"] .sh-grid,[data-skin="crimson"] .sh-grid{
  grid-template-columns:repeat(auto-fill,minmax(146px,1fr));
}
[data-skin="citrus"] .sh-head,[data-skin="berry"] .sh-head,[data-skin="crimson"] .sh-head{
  border-bottom:3px solid var(--s-brand);padding-bottom:12px;align-items:center;
}
[data-skin="citrus"] .pc-media,[data-skin="berry"] .pc-media,[data-skin="crimson"] .pc-media{font-size:46px}

/* ── TECH : 촘촘한 그리드 + 호버 시 브랜드 컬러 테두리 글로우 ── */
[data-skin="grape"] .sh-grid,[data-skin="midnight"] .sh-grid{
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
[data-skin="grape"] .pcard:hover,[data-skin="midnight"] .pcard:hover{
  border-color:var(--s-brand);
}

/* ════ 식품·농수산 스킨 레이아웃 배정 ════ */
/* SOFT(가운데·부드럽게): ocean·bakery·sprout·dairy */
[data-skin="ocean"] .st-hero,[data-skin="bakery"] .st-hero,
[data-skin="sprout"] .st-hero,[data-skin="dairy"] .st-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
[data-skin="ocean"] .sth-sub,[data-skin="bakery"] .sth-sub,
[data-skin="sprout"] .sth-sub,[data-skin="dairy"] .sth-sub{margin-left:auto;margin-right:auto}
[data-skin="ocean"] .sh-head,[data-skin="bakery"] .sh-head,
[data-skin="sprout"] .sh-head,[data-skin="dairy"] .sh-head{justify-content:center;text-align:center}
[data-skin="ocean"] .pcard,[data-skin="bakery"] .pcard,
[data-skin="sprout"] .pcard,[data-skin="dairy"] .pcard{text-align:center}
[data-skin="ocean"] .pc-bottom,[data-skin="bakery"] .pc-bottom,
[data-skin="sprout"] .pc-bottom,[data-skin="dairy"] .pc-bottom{justify-content:center;gap:10px}

/* EDITORIAL(세로 긴 컷·여유 그리드): harvest·butcher·hanok·gourmet (세리프 무드) */
[data-skin="harvest"] .sh-grid,[data-skin="butcher"] .sh-grid,
[data-skin="hanok"] .sh-grid,[data-skin="gourmet"] .sh-grid{
  grid-template-columns:repeat(auto-fill,minmax(198px,1fr));
}
[data-skin="harvest"] .pc-media,[data-skin="butcher"] .pc-media,
[data-skin="hanok"] .pc-media,[data-skin="gourmet"] .pc-media{aspect-ratio:4/5}

/* POP(촘촘·굵은 밑줄 헤더): orchard·market */
[data-skin="orchard"] .sh-grid,[data-skin="market"] .sh-grid{
  grid-template-columns:repeat(auto-fill,minmax(146px,1fr));
}
[data-skin="orchard"] .sh-head,[data-skin="market"] .sh-head{
  border-bottom:3px solid var(--s-brand);padding-bottom:12px;align-items:center;
}

/* ════════ 신규 무드 4종 레이아웃 (2026-06-18) ════════ */
/* MAGAZINE(세로 긴 컷·여유 그리드·가운데 큰 타이포): luxe·forest */
[data-skin="luxe"] .sh-grid,[data-skin="forest"] .sh-grid{
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:26px;
}
[data-skin="luxe"] .pc-media,[data-skin="forest"] .pc-media{aspect-ratio:3/4}
[data-skin="luxe"] .st-hero,[data-skin="forest"] .st-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:62px 36px;
}
[data-skin="luxe"] .sth-sub,[data-skin="forest"] .sth-sub{margin-left:auto;margin-right:auto;max-width:30em}
[data-skin="luxe"] .sth-title,[data-skin="forest"] .sth-title{font-size:2.3em;line-height:1.1}
[data-skin="luxe"] .sh-head,[data-skin="forest"] .sh-head{justify-content:center;text-align:center}
[data-skin="luxe"] .sh-head a,[data-skin="forest"] .sh-head a{display:none}
[data-skin="luxe"] .pcard,[data-skin="forest"] .pcard{border:none;background:transparent}

/* EARTHY SOFT(가운데 정렬·부드러운 큰 카드): sand·retro */
[data-skin="sand"] .sh-grid,[data-skin="retro"] .sh-grid{
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:20px;
}
[data-skin="sand"] .st-hero,[data-skin="retro"] .st-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
[data-skin="sand"] .sth-sub,[data-skin="retro"] .sth-sub{margin-left:auto;margin-right:auto}
[data-skin="sand"] .sh-head,[data-skin="retro"] .sh-head{justify-content:center;text-align:center}
[data-skin="sand"] .pcard,[data-skin="retro"] .pcard{text-align:center}
[data-skin="sand"] .pc-bottom,[data-skin="retro"] .pc-bottom{justify-content:center;gap:10px}
[data-skin="sand"] .pc-add,[data-skin="retro"] .pc-add{margin-left:0}