/* =============================================================================
   테마별 메인 레이아웃 (2026-08-17)

   default_template_index.css 는 색·카드 밀도 같은 "표면"을 다룬다. 이 파일은 그 위에서
   메인의 "구조"를 담당한다 — 어디에 무엇이 놓이는가. 두 파일을 나눈 이유는, 표면만
   바꾸면 어느 테마를 골라도 기본 몰을 물들인 것처럼 보이기 때문이다.

   클래스는 모두 hl- (home layout) 로 시작한다. 기존 .card/.grid/.container 규칙과
   섞이지 않게 하려는 것이고, 실제로 카드 자체는 기존 클래스를 그대로 쓴다.
   ========================================================================== */

.hl { display: block; }
.hl-empty { color: var(--muted); padding: 28px 0; }

/* 상단 마케팅 띠 — 오픈마켓·리스트형·홈쇼핑이 공유한다. */
.hl-promo {
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 9px 12px;
  letter-spacing: -0.01em;
}

.hl-dots { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* -----------------------------------------------------------------------------
   1) 오픈마켓 — gmarket
   -------------------------------------------------------------------------- */
.hl-catrail { border-bottom: 1px solid var(--line); background: var(--bg); }
.hl-catrail__inner {
  display: flex; gap: 22px; overflow-x: auto; padding: 16px 0;
  scrollbar-width: none;
}
.hl-catrail__inner::-webkit-scrollbar { display: none; }
.hl-catrail__item {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 7px; text-decoration: none; color: var(--text); width: 68px;
}
.hl-catrail__dot {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--soft); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: var(--accent);
}
.hl-catrail__label { font-size: 12px; text-align: center; line-height: 1.25; }

.hl-om { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 26px; padding: 22px 0 60px; }
.hl-om__side {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 0; align-self: start; position: sticky; top: 12px;
}
.hl-om__side-title { font-weight: 800; font-size: 14px; padding: 0 14px 10px; }
.hl-om__side ul { list-style: none; margin: 0; padding: 0; }
.hl-om__side li a {
  display: block; padding: 9px 14px; font-size: 13px;
  color: var(--text); text-decoration: none;
}
.hl-om__side li a:hover { background: var(--soft); color: var(--accent); }
.hl-om__side-note {
  margin: 12px 14px 0; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--muted); line-height: 1.6;
}

.hl-banner { position: relative; border-radius: var(--radius-sm); overflow: hidden; height: 320px; }
/* 슬라이드는 겹쳐 두고 투명도로만 오간다 — 사진과 문구가 어긋나지 않게. */
.hl-banner__link { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.hl-banner__link[data-active="true"] { opacity: 1; pointer-events: auto; }
.hl-banner__link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-banner__copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 24px; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%);
}
.hl-banner__tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  background: var(--accent); color: var(--accent-contrast);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 8px;
}
.hl-banner__copy strong { display: block; font-size: 24px; font-weight: 800; }
.hl-banner__copy em { font-style: normal; font-size: 18px; font-weight: 700; }
.hl-banner__dots { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; }
.hl-banner__dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.5);
}
.hl-banner__dots button[data-active="true"] { background: #fff; width: 20px; border-radius: 4px; }

.hl-rank { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px 6px; }
.hl-rank__head { display: flex; align-items: baseline; gap: 10px; }
.hl-rank__head h2 { font-size: 18px; font-weight: 800; margin: 0; }
.hl-rank__head a { margin-left: auto; font-size: 13px; color: var(--muted); text-decoration: none; }
.hl-rank__list {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px;
}
.hl-rank__list li { border-top: 1px solid var(--line); }
.hl-rank__list li:first-child, .hl-rank__list li:nth-child(2) { border-top: 0; }
.hl-rank__list a {
  display: flex; align-items: center; gap: 12px; padding: 10px 2px;
  text-decoration: none; color: var(--text);
}
.hl-rank__no { width: 20px; font-weight: 800; font-size: 15px; color: var(--muted); }
.hl-rank__no[data-top="true"] { color: var(--accent); }
.hl-rank__thumb { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: var(--soft); flex: 0 0 auto; }
.hl-rank__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hl-rank__name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-rank__price { font-weight: 800; font-size: 14px; color: var(--accent); }

.hl-om__catalog { margin-top: 30px; }
.hl-om__block { margin-bottom: 30px; }
.hl-om__block h3 { display: flex; align-items: baseline; font-size: 16px; font-weight: 800; margin: 0 0 12px; }
.hl-om__block h3 a { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none; }
.grid.products.hl-grid--dense { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

/* -----------------------------------------------------------------------------
   2) 딜 — 11st
   -------------------------------------------------------------------------- */
.hl-timer { background: var(--accent); color: var(--accent-contrast); }
.hl-timer__inner { display: flex; align-items: center; gap: 14px; padding: 14px 0; flex-wrap: wrap; }
.hl-timer__flag { font-size: 17px; font-weight: 800; }
.hl-timer__clock {
  font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800;
  background: rgba(0,0,0,.22); padding: 4px 12px; border-radius: 8px; letter-spacing: .04em;
}
.hl-timer__clock i { font-style: normal; opacity: .6; padding: 0 2px; }
.hl-timer__note { font-size: 13px; opacity: .85; }

.hl-rail { padding: 22px 0 6px; }
.hl-rail__track {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}
.hl-rail__card {
  flex: 0 0 200px; scroll-snap-align: start; text-decoration: none; color: var(--text);
}
.hl-rail__thumb { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--soft); }
.hl-rail__thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.hl-rail__rank {
  position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 800;
  background: var(--accent); color: var(--accent-contrast); padding: 3px 8px; border-radius: 4px;
}
.hl-rail__name { font-size: 13px; margin-top: 8px; line-height: 1.35; height: 2.7em; overflow: hidden; }
.hl-rail__price { font-size: 16px; font-weight: 800; color: var(--accent); margin-top: 4px; }

.hl-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 18px 0; border-bottom: 1px solid var(--line); }
.hl-tabs button {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--bg);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--text);
}
.hl-tabs button[data-active="true"] {
  background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); font-weight: 700;
}
.hl-deal__block { padding: 26px 0; }
.hl-deal__block h3 { font-size: 17px; font-weight: 800; margin: 0 0 14px; }
/*
   딜·방송특가 격자의 열 수.

   처음에 2열로 뒀다가 데스크톱에서 상품 한 장이 화면 절반을 먹었다. 딜은 여러 개를
   훑는 자리라 카드가 크면 오히려 고르기 어렵다. 기본 격자(.products)보다 한 단계만
   여유를 두는 정도로 잡는다.
*/
.grid.products.hl-grid--deal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

/* -----------------------------------------------------------------------------
   3) 리스트 커머스 — coupang
   -------------------------------------------------------------------------- */
.hl-rocket__search { padding: 18px 0 6px; }
.hl-rocket__search input {
  width: 100%; padding: 13px 16px; font-size: 15px;
  border: 2px solid var(--accent); border-radius: 8px; background: var(--bg); color: var(--text);
}
.hl-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.hl-chips button {
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.hl-chips button[data-active="true"] { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

.hl-rocket { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 26px; padding: 18px 0 60px; }
.hl-rocket__count {
  display: flex; align-items: center; font-size: 13px; color: var(--muted);
  padding: 10px 0; border-bottom: 2px solid var(--text);
}
.hl-rocket__count b { color: var(--text); }
.hl-rocket__count select { margin-left: auto; }

.hl-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 150px; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.hl-row__thumb { display: block; border-radius: 8px; overflow: hidden; background: var(--soft); }
.hl-row__thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.hl-row__body { min-width: 0; }
.hl-row__name { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; display: block; line-height: 1.4; }
.hl-row__desc { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.hl-row__tags { display: flex; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.hl-row__rocket { color: var(--accent); font-weight: 800; }
.hl-row__buy { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; }
.hl-row__buy strong { font-size: 19px; font-weight: 800; }

.hl-rocket__side { align-self: start; position: sticky; top: 12px; display: grid; gap: 16px; }
.hl-side-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.hl-side-box__title { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.hl-side-box ul { list-style: none; margin: 0; padding: 0; }
.hl-side-box li a { display: block; padding: 7px 0; font-size: 13px; color: var(--text); text-decoration: none; }
.hl-side-box li a:hover { color: var(--accent); }
.hl-side-pick { display: flex; gap: 10px; align-items: center; padding: 8px 0; text-decoration: none; color: var(--text); border-top: 1px solid var(--line); }
.hl-side-pick__thumb { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--soft); flex: 0 0 auto; }
.hl-side-pick__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hl-side-pick b { display: block; font-size: 12px; font-weight: 500; line-height: 1.35; }
.hl-side-pick em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--accent); }

/* -----------------------------------------------------------------------------
   4) 홈쇼핑 — lotte
   -------------------------------------------------------------------------- */
.hl-onair { background: var(--soft); padding: 26px 0; }
.hl-onair__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.hl-onair__visual { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: #000; }
.hl-onair__visual img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.hl-onair__live {
  position: absolute; top: 14px; left: 14px; background: #e11d48; color: #fff;
  font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; letter-spacing: .04em;
}
.hl-onair__eyebrow { font-size: 13px; font-weight: 800; color: var(--accent); margin: 0 0 8px; }
.hl-onair__info h1 { font-size: 30px; line-height: 1.25; margin: 0 0 12px; }
.hl-onair__desc { color: var(--muted); margin: 0 0 14px; }
.hl-onair__price { font-size: 30px; font-weight: 800; color: var(--accent); margin: 0 0 14px; }
.hl-onair__perks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.hl-onair__perks li::before { content: "· "; }
.hl-onair__cta { display: flex; gap: 10px; flex-wrap: wrap; }

.hl-sched { padding: 34px 0; }
.hl-sched__title { font-size: 20px; font-weight: 800; margin: 0 0 14px; }
.hl-sched__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text); }
.hl-sched__list li { border-bottom: 1px solid var(--line); }
.hl-sched__list a { display: flex; align-items: center; gap: 14px; padding: 12px 4px; text-decoration: none; color: var(--text); }
.hl-sched__time { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; width: 54px; color: var(--accent); }
.hl-sched__thumb { width: 54px; height: 54px; border-radius: 8px; overflow: hidden; background: var(--soft); flex: 0 0 auto; }
.hl-sched__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hl-sched__name { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-sched__price { font-weight: 800; }
.grid.products.hl-grid--tv { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* -----------------------------------------------------------------------------
   5) 매거진 — gsshop
   -------------------------------------------------------------------------- */
.hl-mag__lead { padding: 54px 0 34px; text-align: center; }
.hl-mag__kicker { font-size: 12px; letter-spacing: .1em; color: var(--muted); margin: 0 0 10px; }
.hl-mag__lead h1 { font-size: 38px; margin: 0 0 10px; }
.hl-mag__sub { color: var(--muted); margin: 0; }
.hl-mag__block { padding: 30px 0; }
.hl-mag__block[data-alt="true"] { background: var(--soft); }
.hl-mag__head { display: flex; align-items: baseline; margin-bottom: 16px; }
.hl-mag__head h2 { font-size: 22px; font-weight: 700; margin: 0; }
.hl-mag__head a { margin-left: auto; font-size: 13px; color: var(--muted); text-decoration: none; }

.hl-mosaic {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 168px; gap: 10px;
}
.hl-tile {
  position: relative; overflow: hidden; border-radius: var(--radius-sm);
  background: var(--soft); text-decoration: none; display: block;
}
.hl-tile[data-big="true"] { grid-column: span 2; grid-row: span 2; }
.hl-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.hl-tile:hover img { transform: scale(1.05); }
.hl-tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
}
.hl-tile__cap strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.hl-tile[data-big="true"] .hl-tile__cap strong { font-size: 18px; font-weight: 700; }
.hl-tile__cap em { font-style: normal; font-size: 13px; font-weight: 800; }

/* -----------------------------------------------------------------------------
   6) 에디토리얼 — ssg
   -------------------------------------------------------------------------- */
.hl-cover { position: relative; height: 22vh; min-height: 260px; overflow: hidden; background: #000; }
.hl-cover__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-cover__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%); }
.hl-cover__copy { position: absolute; inset: auto 0 0 0; padding: 0 24px 4vh; text-align: center; color: #fff; }
.hl-cover__kicker { font-size: 12px; letter-spacing: .12em; margin: 0 0 8px; opacity: .85; }
.hl-cover__copy h1 { font-family: var(--serif); font-size: clamp(22px, 3.2vw, 34px); margin: 0 0 8px; font-weight: 500; }
.hl-cover__price { font-size: 16px; margin: 0 0 14px; }
.hl-cover__cta {
  display: inline-block; border: 1px solid #fff; color: #fff; text-decoration: none;
  padding: 13px 34px; font-size: 14px; letter-spacing: .06em;
}
.hl-cover__cta:hover { background: #fff; color: #111; }

.hl-ed__picks { padding: 76px 0; }
.hl-ed__title { font-family: var(--serif); font-size: 32px; text-align: center; margin: 0 0 40px; font-weight: 500; }
.hl-ed__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; }
.hl-ed__item { text-decoration: none; color: var(--text); }
.hl-ed__media { background: var(--soft); overflow: hidden; }
.hl-ed__media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform .5s ease; }
.hl-ed__item:hover .hl-ed__media img { transform: scale(1.04); }
.hl-ed__item h3 { font-size: 16px; font-weight: 500; margin: 18px 0 6px; }
.hl-ed__item p { font-size: 15px; font-weight: 600; margin: 0; }
.hl-ed__all { padding: 0 0 90px; }
.hl-ed__allhead { display: flex; align-items: center; margin-bottom: 34px; }
.hl-ed__allhead h2 { font-family: var(--serif); font-size: 28px; margin: 0; font-weight: 500; }
.hl-ed__allhead select { margin-left: auto; }
.hl-ed__cat { margin-bottom: 66px; }
.hl-ed__cat > h3 { display: flex; align-items: baseline; font-size: 15px; letter-spacing: .04em; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.hl-ed__cat > h3 a { margin-left: auto; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); text-decoration: none; }

/* -----------------------------------------------------------------------------
   7) 갤러리 — bymono
   -------------------------------------------------------------------------- */
.hl-gal__lead { padding: 90px 24px 50px; text-align: center; }
.hl-gal__lead h1 { font-size: 17px; letter-spacing: .2em; font-weight: 700; margin: 0 0 12px; }
.hl-gal__lead p { color: var(--muted); font-size: 13px; margin: 0; }
.hl-gal__block { margin-bottom: 46px; }
.hl-gal__label {
  display: flex; align-items: baseline; padding: 0 16px 12px;
  font-size: 12px; letter-spacing: .06em;
}
.hl-gal__label a { margin-left: auto; color: var(--muted); text-decoration: none; }
.hl-gal__wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.hl-gal__cell { position: relative; display: block; overflow: hidden; background: var(--soft); }
.hl-gal__cell img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; filter: grayscale(.12); transition: filter .35s ease, transform .5s ease; }
.hl-gal__cell:hover img { filter: none; transform: scale(1.03); }
.hl-gal__over {
  position: absolute; inset: auto 0 0 0; padding: 14px 12px; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 100%);
  opacity: 0; transition: opacity .25s ease;
}
.hl-gal__cell:hover .hl-gal__over, .hl-gal__cell:focus-visible .hl-gal__over { opacity: 1; }
.hl-gal__over b { display: block; font-size: 12px; font-weight: 500; line-height: 1.4; }
.hl-gal__over em { font-style: normal; font-size: 12px; font-weight: 700; }

/* -----------------------------------------------------------------------------
   8) 미니멀 — rethink
   -------------------------------------------------------------------------- */
.hl--minimal { max-width: 760px; margin: 0 auto; padding: 0 20px 90px; }
.hl-min__lead { padding: 72px 0 30px; }
.hl-min__kicker { font-size: 12px; letter-spacing: .12em; color: var(--accent); margin: 0 0 14px; font-weight: 700; }
.hl-min__lead h1 { font-size: 30px; margin: 0 0 10px; }
.hl-min__sub { color: var(--muted); margin: 0; }
.hl-min__nav { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hl-min__nav a { font-size: 13px; color: var(--muted); text-decoration: none; }
.hl-min__nav a:hover { color: var(--accent); }
.hl-min__sort { display: flex; justify-content: flex-end; padding: 16px 0 0; }
.hl-min__block { padding: 34px 0 8px; }
.hl-min__block h2 { font-size: 14px; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
.hl-min__list { list-style: none; margin: 0; padding: 0; }
.hl-min__list li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.hl-min__thumb { display: block; border-radius: 10px; overflow: hidden; background: var(--soft); }
.hl-min__thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.hl-min__body { min-width: 0; }
.hl-min__body a { font-size: 15px; color: var(--text); text-decoration: none; font-weight: 500; }
.hl-min__body p { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.hl-min__buy { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hl-min__buy span { font-weight: 700; font-size: 15px; }
.hl-min__buy button {
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: pointer;
}
.hl-min__buy button:hover { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

@media (min-width: 1280px) {
  .grid.products.hl-grid--deal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid.products.hl-grid--tv { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid.products.hl-grid--dense { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* -----------------------------------------------------------------------------
   좁은 화면 — 다단은 모두 한 단으로 접는다.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid.products.hl-grid--dense { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hl-mosaic { grid-auto-rows: 140px; }
  .hl-gal__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hl-om, .hl-rocket { grid-template-columns: minmax(0, 1fr); }
  .hl-om__side, .hl-rocket__side { position: static; }
  .hl-onair__grid { grid-template-columns: minmax(0, 1fr); }
  .hl-rank__list { grid-template-columns: minmax(0, 1fr); }
  .hl-rank__list li:nth-child(2) { border-top: 1px solid var(--line); }
  .hl-ed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .grid.products.hl-grid--deal,
  .grid.products.hl-grid--tv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid.products.hl-grid--dense, .grid.products.hl-grid--deal, .grid.products.hl-grid--tv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hl-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; }
  .hl-tile[data-big="true"] { grid-column: span 2; grid-row: span 2; }
  .hl-gal__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-gal__over { opacity: 1; }
  .hl-row { grid-template-columns: 110px minmax(0, 1fr); }
  .hl-row__buy { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; }
  .hl-banner { height: 200px; }
  .hl-banner__copy strong { font-size: 18px; }
  .hl-onair__info h1 { font-size: 22px; }
  .hl-onair__price { font-size: 24px; }
}

/* -----------------------------------------------------------------------------
   상단 메뉴 — 넘치면 ⋯ 안으로 접는다 (사용자 지시 2026-08-18)

   카테고리가 10개인데 이름이 길어("뷰티·퍼스널케어") 항목마다 두 줄로 접혔다. 헤더가
   두 배로 높아지고 글자가 세로로 쪼개졌다.

   이름을 …으로 줄이는 방법도 써 봤지만 "식…", "패…" 가 되어 무엇인지 알 수 없었다.
   그래서 **이름은 그대로 두고, 들어가지 않는 항목만 ⋯ 안으로 접는다.** 몇 개가 들어가는지는
   StorefrontShell 이 재서 정한다.
   -------------------------------------------------------------------------- */
.tpl-yogosa .nav {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: visible;        /* ⋯ 패널이 헤더 밖으로 내려와야 한다 */
  /*
    justify-self: center 는 항목 폭만큼 커진 뒤 가운데로 놓는다 — 즉 칸 밖으로 자란다.
    실제로 645px 칸에서 851px 로 자라 검색·장바구니 아이콘 위를 덮었다.
  */
  justify-self: stretch;
  justify-content: center;
}
.tpl-yogosa .nav a {
  white-space: nowrap;      /* 한 항목이 두 줄로 접히지 않게 */
  flex: 0 0 auto;           /* 줄이지 않는다 — 안 들어가면 접는다 */
}

.tpl-yogosa .nav__more { position: relative; flex: 0 0 auto; }
.tpl-yogosa .nav__more-btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 8px; border-radius: 10px;
  font-size: 16px; line-height: 1; color: inherit;
}
.tpl-yogosa .nav__more-btn:hover { background: var(--soft); }
.tpl-yogosa .nav__more-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 168px; padding: 6px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.tpl-yogosa .nav__more-panel a {
  padding: 9px 12px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 13px;
}
.tpl-yogosa .nav__more-panel a:hover { background: var(--soft); }

/* -----------------------------------------------------------------------------
   선라이즈 — hello-sunrise 계열 (2026-09-14)
   흐르는 문구 띠 → 풀블리드 히어로 → 큰 세리프 오렌지 문구 → 4열 격자
   -------------------------------------------------------------------------- */
.hl--sunrise { background: var(--page-bg); }

/* 상단 흐르는 문구 띠 */
.hl-sun__ticker { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg); }
.hl-sun__ticker-track {
  display: inline-flex; gap: 48px; white-space: nowrap;
  padding: 8px 0; will-change: transform;
  animation: hl-sun-ticker 28s linear infinite;
}
.hl-sun__ticker-track span {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
@keyframes hl-sun-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 풀블리드 히어로 */
.hl-sun__cover { position: relative; height: 78vh; min-height: 460px; overflow: hidden; background: #000; }
.hl-sun__cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-sun__cover-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55) 100%); }
.hl-sun__cover-cap {
  position: absolute; left: 0; bottom: 0; padding: 0 40px 40px;
  color: #fff; text-decoration: none; display: flex; flex-direction: column; gap: 6px;
}
.hl-sun__cover-kicker { font-size: 12px; letter-spacing: .16em; opacity: .85; }
.hl-sun__cover-cap strong { font-family: var(--serif); font-size: clamp(26px, 4vw, 44px); font-weight: 500; }
.hl-sun__cover-cap em { font-style: normal; font-size: 16px; font-weight: 600; }

/* 큰 세리프 오렌지 문구 띠 */
.hl-sun__marquee { overflow: hidden; padding: 30px 0; border-bottom: 1px solid var(--line); }
.hl-sun__marquee-track {
  display: inline-flex; gap: 56px; white-space: nowrap; will-change: transform;
  animation: hl-sun-marq 32s linear infinite;
}
.hl-sun__marquee-track span {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(28px, 4.5vw, 52px); color: var(--accent);
}
@keyframes hl-sun-marq { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }

/* 상품 격자 */
.hl-sun__shop { padding: 46px 0 72px; }
.hl-sun__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 26px; }
.hl-sun__head h2 { font-family: var(--serif); font-size: 26px; font-weight: 500; margin: 0; }
/* hello-sunrise 시그니처 — 얇은 실선으로 나뉜 격자, 흰 배경에 상품, 오렌지 세리프 문구 */
.hl-sun__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.hl-sun__item {
  text-decoration: none; color: var(--text);
  padding: 24px 22px 26px; background: #fff;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hl-sun__media { background: #fff; overflow: hidden; }
.hl-sun__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; transition: transform .5s ease; }
.hl-sun__item:hover .hl-sun__media img { transform: scale(1.04); }
.hl-sun__item h3 {
  font-family: var(--serif); color: var(--accent); font-size: 15px; font-weight: 500;
  margin: 18px 0 6px; line-height: 1.3; letter-spacing: .01em;
}
.hl-sun__price { font-family: var(--serif); font-size: 14px; font-weight: 500; color: var(--accent); margin: 0; }

@media (max-width: 1024px) {
  .hl-sun__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hl-sun__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-sun__item { padding: 16px 14px 20px; }
  .hl-sun__cover { height: 60vh; min-height: 360px; }
  .hl-sun__cover-cap { padding: 0 20px 24px; }
}

/* -----------------------------------------------------------------------------
   엠케이쇼핑 프리미엄 10종 — 공통 골격(.hl--mk) + 테마별 시그니처 오버라이드 (2026-09-14)
   maison·onyx·folio·forma·bloom·azure·grove·orbit·muse·dune 이 이 골격을 공유하고,
   색·서체·모서리는 default_template_index.css 의 [data-theme] 팔레트가 담당한다.
   -------------------------------------------------------------------------- */
.hl--mk { background: var(--page-bg); }
.hl--mk .container { padding-top: 24px; padding-bottom: 60px; }

/* 분할형 히어로 */
.hl-mk__hero { display: grid; grid-template-columns: 1fr 42%; gap: 0; background: var(--soft); border-radius: var(--radius); overflow: hidden; min-height: 300px; margin: 8px 0 34px; }
.hl-mk__hero-copy { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hl-mk__overline { font-size: 11px; letter-spacing: .2em; font-weight: 600; color: var(--muted); }
.hl-mk__hero-copy h1 { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; margin: 14px 0 12px; }
.hl-mk__hero-copy p { font-size: 14px; color: var(--muted); line-height: 1.85; margin: 0; max-width: 42ch; }
.hl-mk__hero-cta { margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--accent); padding-bottom: 6px; }
.hl-mk__hero-cta span { margin-left: 30px; color: var(--accent); }
.hl-mk__hero-art { position: relative; overflow: hidden; min-height: 300px; }
.hl-mk__hero-art img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hl-mk__hero-chip { position: absolute; left: 20px; bottom: 18px; background: var(--bg); color: var(--text); padding: 8px 14px; font-size: 13px; font-weight: 700; border-radius: var(--radius-sm); }

/* 섹션 헤더 */
.hl-mk__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 20px; }
.hl-mk__head h2 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 0; letter-spacing: -.02em; }
.hl-mk__head > span { font-size: 11px; letter-spacing: .16em; color: var(--muted); }

/* 가로 딜 */
.hl-mk__deals { margin-bottom: 40px; }
.hl-mk__deal-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 18px; overflow-x: auto; padding-bottom: 12px; }
.hl-mk__deal { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius); }
.hl-mk__deal-thumb { width: 78px; height: 86px; border-radius: var(--radius-sm); overflow: hidden; background: var(--soft); }
.hl-mk__deal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hl-mk__deal-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hl-mk__deal-body b { font-size: 12px; font-weight: 500; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hl-mk__deal-body strong { font-size: 14px; color: var(--accent); }

/* 상품 격자 */
.hl-mk__browse { padding-top: 26px; border-top: 1px solid var(--line); }
.hl-mk__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 24px; }
.hl-mk__card { min-width: 0; }
.hl-mk__card-open { display: block; }
.hl-mk__card-image { display: block; aspect-ratio: 1.05; overflow: hidden; background: var(--soft); border-radius: var(--radius); position: relative; }
.hl-mk__card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.hl-mk__card:hover .hl-mk__card-image img { transform: scale(1.035); }
.hl-mk__card-open h3 { font-size: 14px; font-weight: 500; line-height: 1.55; margin: 14px 0 8px; letter-spacing: -.01em; }
.hl-mk__price { font-size: 16px; font-weight: 700; color: var(--accent); margin: 0; }
.hl-mk__add { margin-top: 12px; width: 100%; height: 38px; font-size: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: var(--radius-sm); cursor: pointer; }
.hl-mk__add:hover { border-color: var(--accent); color: var(--accent); }

/* ── 테마별 시그니처 ── */
/* folio — 에디토리얼: 세리프 크게, 3열, 카드 구획선 */
.tpl-yogosa[data-theme="folio"] .hl-mk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 30px; }
.tpl-yogosa[data-theme="folio"] .hl-mk__card { border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.tpl-yogosa[data-theme="folio"] .hl-mk__card-open h3 { font-family: var(--serif); font-size: 18px; }
.tpl-yogosa[data-theme="folio"] .hl-mk__hero { background: none; border-bottom: 1px solid var(--text); border-radius: 0; }
/* dune — 리빙: 곡선, 3열 */
.tpl-yogosa[data-theme="dune"] .hl-mk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 30px; }
.tpl-yogosa[data-theme="dune"] .hl-mk__card-image { border-radius: 50px 10px 50px 10px; }
.tpl-yogosa[data-theme="dune"] .hl-mk__hero { border-radius: 90px 14px 90px 14px; }
.tpl-yogosa[data-theme="dune"] .hl-mk__add, .tpl-yogosa[data-theme="dune"] .hl-mk__hero-chip { border-radius: 25px; }
/* bloom — 뷰티: 아치형 이미지 */
.tpl-yogosa[data-theme="bloom"] .hl-mk__card-image { border-radius: 140px 140px var(--radius) var(--radius); }
.tpl-yogosa[data-theme="bloom"] .hl-mk__hero-art { border-radius: 200px 200px 0 0; }
/* muse — 패션: 밀착 5열 그리드 */
.tpl-yogosa[data-theme="muse"] .hl-mk__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 12px; }
.tpl-yogosa[data-theme="muse"] .hl-mk__add { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
/* orbit — 디지털: 가로형 상품 카드 */
.tpl-yogosa[data-theme="orbit"] .hl-mk__grid { grid-template-columns: 1fr; gap: 16px; }
.tpl-yogosa[data-theme="orbit"] .hl-mk__card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--bg); }
.tpl-yogosa[data-theme="orbit"] .hl-mk__card-open { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; }
.tpl-yogosa[data-theme="orbit"] .hl-mk__card-image { aspect-ratio: 1; }
.tpl-yogosa[data-theme="orbit"] .hl-mk__card-open h3 { margin-top: 0; }
.tpl-yogosa[data-theme="orbit"] .hl-mk__add { width: 200px; }
/* onyx — 다크 럭셔리: 큰 이미지, 넉넉한 여백 */
.tpl-yogosa[data-theme="onyx"] .hl-mk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.tpl-yogosa[data-theme="onyx"] .hl-mk__card-image { aspect-ratio: .85; }

@media (max-width: 1050px) {
  .hl-mk__grid,
  .tpl-yogosa[data-theme="folio"] .hl-mk__grid,
  .tpl-yogosa[data-theme="dune"] .hl-mk__grid,
  .tpl-yogosa[data-theme="onyx"] .hl-mk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tpl-yogosa[data-theme="muse"] .hl-mk__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .hl-mk__hero { grid-template-columns: 1fr; }
  .hl-mk__hero-art { min-height: 240px; position: relative; }
  .hl-mk__grid,
  .tpl-yogosa[data-theme="folio"] .hl-mk__grid,
  .tpl-yogosa[data-theme="dune"] .hl-mk__grid,
  .tpl-yogosa[data-theme="onyx"] .hl-mk__grid,
  .tpl-yogosa[data-theme="muse"] .hl-mk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .tpl-yogosa[data-theme="orbit"] .hl-mk__card-open { grid-template-columns: 110px 1fr; gap: 14px; }
  .tpl-yogosa[data-theme="orbit"] .hl-mk__add { width: 100%; }
}

/* 선라이즈 — 좌우 2장 분할 히어로 (hello-sunrise 시그니처, 2026-09-14) */
.hl-sun__cover--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 82vh; min-height: 480px; background: #000; overflow: hidden; }
.hl-sun__panel { position: relative; display: block; overflow: hidden; }
.hl-sun__panel img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .6s ease; }
.hl-sun__panel:hover img { transform: scale(1.03); }
.hl-sun__panel-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%); }
.hl-sun__panel-cap { position: absolute; left: 30px; bottom: 42px; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .01em; z-index: 1; max-width: 70%; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
@media (max-width: 720px) {
  .hl-sun__cover--split { grid-template-columns: 1fr; height: auto; }
  .hl-sun__panel { height: 54vh; min-height: 300px; }
  .hl-sun__panel-cap { left: 20px; bottom: 24px; }
}

/* 선라이즈 — 미니멀 헤더. 인라인 카테고리 바는 감추되, 메뉴 버튼(햄버거)은 데스크탑에서도
   유지해 카테고리 드로어로 진입한다(hello-sunrise 의 'Shop' 버튼→메뉴 패널과 같은 동선).
   원본처럼 카테고리 바가 상시 펼쳐지지 않고, 버튼을 눌러야 메뉴가 열린다. */
.tpl-yogosa[data-theme="sunrise"] .nav { display: none !important; }
/* 모바일에서만 햄버거(카테고리 드로어)를 둔다. 데스크톱은 아래에서 감춘다 — Pace 'Shop ▾'
   메뉴가 그 역할을 대신하고, 원본 hello-sunrise 도 PC 에 햄버거가 없다. */
.tpl-yogosa[data-theme="sunrise"] .topbar__menu { display: grid !important; }
.tpl-yogosa[data-theme="sunrise"] .brand__mark { color: var(--accent); letter-spacing: .04em; }
/* 데스크톱: 원본 hello-sunrise 헤더 — 브랜드는 왼쪽 끝, 액션(검색·로그인·장바구니)은 오른쪽 끝,
   햄버거 없음. (버그였던 점: 햄버거가 그리드 첫 칸(160px)을 차지해 브랜드가 가운데 1fr 칸으로
   밀려 '어정쩡한 가운데'로 보였다. nav 를 감춘 sunrise 에서는 2칸 그리드로 바로잡는다.) */
@media (min-width: 720px) {
  .tpl-yogosa[data-theme="sunrise"] .topbar__menu { display: none !important; }
  /* 헤더를 전체폭으로 — 기본 .container(가운데 정렬 max-width) 때문에 넓은 화면에서 헤더만
     가운데로 좁아져 브랜드/아이콘이 가장자리에 못 붙었다. 브랜드는 왼쪽 끝, 액션은 오른쪽 끝
     (좌우 24px 패딩 = Pace 캠페인/Shop 바 가장자리와 정렬). */
  .tpl-yogosa[data-theme="sunrise"] .topbar__inner { grid-template-columns: 1fr auto; width: 100%; max-width: none; margin: 0; padding-left: 24px; padding-right: 24px; }
  .tpl-yogosa[data-theme="sunrise"] .brand { justify-self: start; }
  .tpl-yogosa[data-theme="sunrise"] .topbar__actions { justify-self: end; }
}

/* ────────────────────────────────────────────────────────────
   점주 커스터마이즈 (2026-09-15) — 로고·히어로 배너·커스텀 홈 슬롯
   포인트 색상은 CSS 가 아니라 .tpl-yogosa 인라인 --accent 로 주입된다.
   ──────────────────────────────────────────────────────────── */
.tpl-yogosa .brand__logo { height: 34px; width: auto; max-width: 200px; display: block; object-fit: contain; }
@media (max-width: 720px) { .tpl-yogosa .brand__logo { height: 28px; } }

/* 히어로 배너 — 정상 테마 레이아웃 위에 얹음 */
.yg-hero { position: relative; width: 100%; max-height: 460px; overflow: hidden; background: var(--soft, #f3f4f6); }
.yg-hero__img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; display: block; }
.yg-hero__copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 24px; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); color: #fff; }
.yg-hero__title { margin: 0 0 6px; font-size: clamp(20px, 3vw, 34px); font-weight: 700; line-height: 1.2; }
.yg-hero__sub { margin: 0 0 14px; font-size: 15px; opacity: .92; }
.yg-hero__cta { display: inline-block; padding: 10px 18px; background: var(--accent); color: var(--accent-contrast, #fff); border-radius: var(--radius-sm, 8px); text-decoration: none; font-weight: 600; }

/* 커스텀 홈 — 상품 슬롯 그리드(디자이너가 <div data-yg-slot> 를 둔 자리에 우리가 채움) */
.yg-slot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
@media (max-width: 1024px) { .yg-slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .yg-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }

/* ════════════════════════════════════════════════════════════
   선라이즈 = PACE CLUB 스포츠 (mk-shopping-sports-pace-club-v3 이식, 2026-09-16)
   상단 2장 캠페인은 상품 영역 아님(고정). Shop hover 메뉴 보존.
   ════════════════════════════════════════════════════════════ */
.tpl-yogosa[data-theme="sunrise"] .hl--pace { background: var(--page-bg); color: var(--text); font-family: Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; padding: 0 8px; }

/* Shop 카테고리 바 (hover 펼침) */
.tpl-yogosa[data-theme="sunrise"] .pc-shopbar { display: flex; justify-content: flex-end; padding: 10px 16px 4px; }
.tpl-yogosa[data-theme="sunrise"] .pc-shopmenu { position: relative; }
.tpl-yogosa[data-theme="sunrise"] .pc-shopbtn { border: 0; background: none; color: var(--accent); font-family: Georgia, serif; font-size: 18px; cursor: pointer; padding: 6px 2px; }
.tpl-yogosa[data-theme="sunrise"] .pc-dropdown { position: absolute; top: 100%; right: 0; width: 240px; padding: 10px 0; background: var(--page-bg); border: 1px solid var(--line); box-shadow: 0 12px 20px #24282110; z-index: 6; display: grid; }
.tpl-yogosa[data-theme="sunrise"] .pc-dropdown button { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 13px 20px; border: 0; background: none; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.tpl-yogosa[data-theme="sunrise"] .pc-dropdown button span { font-family: Georgia, serif; font-size: 12px; color: var(--muted); }
.tpl-yogosa[data-theme="sunrise"] .pc-dropdown button:hover { background: #f1eee7; color: var(--accent); }

/* 캠페인 2장 (고정 이미지) */
.tpl-yogosa[data-theme="sunrise"] .pc-campaigns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl-yogosa[data-theme="sunrise"] .pc-campaign { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #494d45; color: #fff; }
.tpl-yogosa[data-theme="sunrise"] .pc-campaign img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.tpl-yogosa[data-theme="sunrise"] .pc-campaign:hover img { transform: scale(1.035); }
.tpl-yogosa[data-theme="sunrise"] .pc-campaign::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,#0003,transparent 35%,#0008); }
.tpl-yogosa[data-theme="sunrise"] .pc-camp-top { position: absolute; inset: 28px 28px auto; display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 1.2px; z-index: 1; }
.tpl-yogosa[data-theme="sunrise"] .pc-camp-copy { position: absolute; bottom: 64px; left: 6%; z-index: 1; }
.tpl-yogosa[data-theme="sunrise"] .pc-camp-copy p { font-size: 12px; font-weight: 600; letter-spacing: 1.8px; margin: 0 0 18px; }
.tpl-yogosa[data-theme="sunrise"] .pc-campaign h1, .tpl-yogosa[data-theme="sunrise"] .pc-campaign h2 { font-size: clamp(42px,5.6vw,100px); font-family: Georgia, serif; letter-spacing: -3px; font-weight: 400; line-height: .97; margin: 0 0 28px; }
.tpl-yogosa[data-theme="sunrise"] .pc-campaign i { font-weight: 400; }
.tpl-yogosa[data-theme="sunrise"] .pc-camp-cta { font-size: 14px; display: inline-flex; gap: 35px; border-bottom: 1px solid #ffffff80; padding-bottom: 10px; }
.tpl-yogosa[data-theme="sunrise"] .pc-camp-platform { position: absolute; right: 28px; bottom: 24px; font-size: 12px; letter-spacing: 1.6px; z-index: 1; }
.tpl-yogosa[data-theme="sunrise"] .pc-dance { color: #242821; }
.tpl-yogosa[data-theme="sunrise"] .pc-dance::after { background: none; }
.tpl-yogosa[data-theme="sunrise"] .pc-dance .pc-camp-cta { border-color: #24282180; }
.tpl-yogosa[data-theme="sunrise"] .pc-dance .pc-camp-copy { bottom: 8%; }
.tpl-yogosa[data-theme="sunrise"] .pc-dance h2 { font-size: clamp(36px,4.5vw,80px); margin-bottom: 18px; }

/* 마퀴 */
.tpl-yogosa[data-theme="sunrise"] .pc-marquee { overflow: hidden; padding: 29px 0 35px; color: var(--accent); border-bottom: 1px solid var(--line); }
.tpl-yogosa[data-theme="sunrise"] .pc-marquee > div { font: clamp(40px,5.2vw,80px)/1.1 Georgia, serif; white-space: nowrap; animation: pc-marquee 32s linear infinite; width: max-content; }
@keyframes pc-marquee { to { transform: translateX(-35%); } }

/* 상품 */
.tpl-yogosa[data-theme="sunrise"] .pc-products { padding: 30px 0 60px; }
.tpl-yogosa[data-theme="sunrise"] .pc-cat-heading { display: flex; justify-content: space-between; align-items: baseline; padding: 0 14px; }
.tpl-yogosa[data-theme="sunrise"] .pc-cat-heading h2 { font: 32px Georgia, serif; margin: 0; }
.tpl-yogosa[data-theme="sunrise"] .pc-cat-heading h2 span { font: 12px Arial; color: var(--accent); vertical-align: super; margin-left: 12px; }
.tpl-yogosa[data-theme="sunrise"] .pc-season { font-size: 12px; letter-spacing: 1.4px; }
.tpl-yogosa[data-theme="sunrise"] .pc-tools { display: flex; justify-content: space-between; align-items: center; padding: 25px 14px 23px; flex-wrap: wrap; gap: 12px; }
.tpl-yogosa[data-theme="sunrise"] .pc-filters { display: flex; gap: 24px; flex-wrap: wrap; }
.tpl-yogosa[data-theme="sunrise"] .pc-filters button { border: 0; background: transparent; color: #6b6c66; font-size: 14px; padding: 6px 0; cursor: pointer; }
.tpl-yogosa[data-theme="sunrise"] .pc-filters button.active { color: var(--accent); border-bottom: 1px solid var(--accent); }
.tpl-yogosa[data-theme="sunrise"] .pc-sort { font-size: 14px; }
.tpl-yogosa[data-theme="sunrise"] .pc-sort select { background: none; border: 0; color: var(--text); margin-left: 8px; font-size: 14px; }
.tpl-yogosa[data-theme="sunrise"] .pc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px 8px; padding: 0 6px; }
.tpl-yogosa[data-theme="sunrise"] .pc-card { min-width: 0; }
.tpl-yogosa[data-theme="sunrise"] .pc-open { display: block; text-decoration: none; color: inherit; }
.tpl-yogosa[data-theme="sunrise"] .pc-image { position: relative; aspect-ratio: 1; background: #f1f2ef; overflow: hidden; }
.tpl-yogosa[data-theme="sunrise"] .pc-image img { width: 100%; height: 100%; object-fit: cover; transition: filter .2s; }
.tpl-yogosa[data-theme="sunrise"] .pc-open:hover .pc-image img { filter: brightness(.97); }
.tpl-yogosa[data-theme="sunrise"] .pc-quick { position: absolute; bottom: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--page-bg); display: grid; place-items: center; font-size: 22px; font-weight: 300; }
.tpl-yogosa[data-theme="sunrise"] .pc-text { padding: 15px 10px 0; }
.tpl-yogosa[data-theme="sunrise"] .pc-text h3 { font-size: 14px; font-weight: 400; margin: 0 0 8px; line-height: 1.4; }
.tpl-yogosa[data-theme="sunrise"] .pc-price { font-size: 14px; margin: 0; }
.tpl-yogosa[data-theme="sunrise"] .pc-price del { color: #82827b; margin-right: 8px; font-size: 12px; }
/* 배지는 캠페인 톤(오렌지)로 좌상단 */
.tpl-yogosa[data-theme="sunrise"] .pc-image .card__badges { top: 14px; left: 14px; }

@media (max-width: 800px) {
  .tpl-yogosa[data-theme="sunrise"] .pc-grid { grid-template-columns: repeat(2,1fr); }
  .tpl-yogosa[data-theme="sunrise"] .pc-camp-top span:last-child { display: none; }
  .tpl-yogosa[data-theme="sunrise"] .pc-cat-heading h2 { font-size: 27px; }
}
@media (max-width: 520px) {
  .tpl-yogosa[data-theme="sunrise"] .pc-campaigns { grid-template-columns: 1fr; gap: 6px; }
}