.tpl-preview-body{
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #141414;
  background: #f6f7f8;
  line-height: 1.55;
}

.tpl-yogosa{
  display:block;
}

.tpl-yogosa{
--bg: #ffffff;
  --text: #141414;
  --muted: #6c6c6c;
  --line: #e8e8e8;
  --soft: #f5f5f5;
  --shadow: 0 14px 40px rgba(0,0,0,.08);

  --accent: #111111;
  --accent-contrast: #ffffff;
  --page-bg: #ffffff;

  --radius: 18px;
  --radius-sm: 12px;

  --container: 1120px;

  --serif: "Playfair Display", serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.tpl-yogosa *{
box-sizing: border-box;
}

.tpl-preview-body, .tpl-preview-body{
height: 100%;
}

.tpl-preview-body{
margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #141414;
  background: #f6f7f8;
  line-height: 1.55;
}

.tpl-yogosa img{
max-width: 100%; display:block;
}

.tpl-yogosa a{
color: inherit; text-decoration: none;
}

.tpl-yogosa button, .tpl-yogosa input{
font: inherit;
}

.tpl-yogosa .container{
width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.tpl-yogosa .small{
font-size: 12px;
}

.tpl-yogosa .muted{
color: var(--muted);
}

.tpl-yogosa .sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* Topbar */

.tpl-yogosa .topbar{
position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.tpl-yogosa .topbar__inner{
height: 68px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
}

.tpl-yogosa .topbar__actions{
display:flex;
  align-items:center;
  gap: 6px;
}

.tpl-yogosa .brand{
display:flex;
  flex-direction: column;
  gap: 2px;
  justify-self: start;
}

.tpl-yogosa .brand__mark{
font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.02em;
}

.tpl-yogosa .brand__tag{
font-size: 12px;
  color: var(--muted);
}

.tpl-yogosa .nav{
display:none;
  gap: 18px;
  justify-self: center;
  color: #2a2a2a;
  font-size: 13px;
}

.tpl-yogosa .nav a{
padding: 10px 6px;
  border-radius: 10px;
}

.tpl-yogosa .nav a:hover{
background: var(--soft);
}

.tpl-yogosa .icon-btn{
height: 40px;
  width: 40px;
  display:grid;
  place-items:center;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
  cursor:pointer;
}

.tpl-yogosa .icon-btn:hover{
background: var(--soft); border-color: var(--line);
}

/*
 * 메뉴 버튼 — 줄 <b>세 개</b>여야 메뉴인 줄 안다 (사용자 지시 2026-09-18).
 *
 * 여태 줄 하나로 보였다. 이 선택자가 <b>두 번 적혀 있었고</b> 뒤의 것이
 * height 를 2px 로 덮어써서, 위아래 줄이 들어갈 자리가 사라지고 셋이 한 줄로
 * 겹쳤다. 앞의 규칙은 멀쩡했는데 뒤에서 무너뜨리고 있었다.
 *
 * 가운데 줄은 요소 자신, 위아래는 ::before / ::after 가 그린다.
 */
.tpl-yogosa .icon-burger{
display: block;
  width: 18px; height: 2px;
  margin: 5px 0;            /* 위아래 줄이 들어앉을 자리 */
  background: #222;
  border-radius: 999px;
  position: relative;
}

.tpl-yogosa .icon-burger::before, .tpl-yogosa .icon-burger::after{
content:"";
  position:absolute; left:0; right:0;
  height: 2px; background: #222;
  border-radius: 999px;
}

.tpl-yogosa .icon-burger::before{
top:-5px;
}

.tpl-yogosa .icon-burger::after{
bottom:-5px;
}

.tpl-yogosa .icon{
width: 18px; height: 18px; display:block;
  position: relative;
}

/*
 * 헤더 아이콘 세 개는 <b>밑단을 맞춘다</b> (사용자 지시 2026-09-18 — "삐뚤빼뚤해 보인다").
 *
 * 저마다 제 크기대로 그려져 끝나는 높이가 달랐다 — 사람 아이콘은 18px 칸을 3px 넘겨
 * y=20 까지 내려갔고, 장바구니는 17, 돋보기는 그 사이였다. 윗부분이 다른 건 눈에
 * 거슬리지 않지만 <b>아랫줄이 어긋나면 줄이 안 맞아 보인다.</b>
 *
 * 셋 다 y=17 에서 끝나게 맞춘다. 고칠 때도 이 값을 지킬 것.
 *
 * <b>장바구니만 한 칸 올린다(y=16).</b> 돋보기·사람은 곡선이 한 점으로 닿아 끝나는데
 * 장바구니는 아랫변이 평평한 막대로 끝난다. 같은 높이에 두면 평평한 쪽이 <b>아래로
 * 내려와 보인다</b> — 글자를 짤 때 동그란 글자를 기준선보다 살짝 내리는 것과 같은 이치를
 * 거꾸로 적용한 것이다. 자로 잰 값이 아니라 눈으로 맞춘 값이다
 * (사용자 보고 2026-09-18 "장바구니만 조금 밑으로 내려간 것처럼 보인다").
 */

.tpl-yogosa .icon-search::before{      /* 렌즈 */
content:"";
  position:absolute;
  left: 0; top: 3px;
  width: 11px; height: 11px;           /* y 3..14 */
  border: 2px solid #222;
  border-radius: 50%;
}

.tpl-yogosa .icon-search::after{       /* 손잡이 */
content:"";
  position:absolute;
  /* 렌즈를 따라 함께 내린다. 회전 전 중심(12.5, 15). */
  left: 8px; top: 14px;
  width: 9px; height: 2px;
  background:#222;
  border-radius:999px;
  transform: rotate(45deg);
}

.tpl-yogosa .icon-user::before{        /* 머리 */
content:"";
  position:absolute;
  left: 5px; top: 1px;
  width: 8px; height: 8px;             /* y 1..9 */
  border: 2px solid #222;
  border-radius: 50%;
}

.tpl-yogosa .icon-user::after{         /* 어깨 */
content:"";
  position:absolute;
  left: 1px; top: 9px;
  width: 16px; height: 8px;            /* y 9..17 */
  border: 2px solid #222;
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

/*
 * 장바구니 아이콘 (사용자 보고 2026-09-18 — "손잡이가 이상하게 겹쳐 있다").
 *
 * 몸통이 컨테이너 맨 위(y 0)부터 그려지는데 손잡이를 top:-2px 에 얹어 두어서,
 * 손잡이 양옆 선이 몸통 윗변 테두리를 <b>가로질러</b> 겹쳐 보였다.
 *
 * 몸통을 아래로 내리고 그 위에 손잡이를 얹는다. 손잡이 아랫변은 그리지 않고,
 * 다리 끝을 몸통 윗선에 딱 맞춘다.
 *
 *      ╭──╮      ← 손잡이  y 0..4
 *    ┌────────┐  ← 몸통    y 4..15
 *    └────────┘
 */
.tpl-yogosa .icon-bag::before{      /* 몸통 */
content:"";
  position:absolute;
  left: 1px; top: 4px;
  width: 16px; height: 11px;     /* y 4..15 — 눈으로 맞춘 값 */
  border: 2px solid #222;
  border-radius: 3px;
}

.tpl-yogosa .icon-bag::after{       /* 손잡이 */
content:"";
  position:absolute;
  /* 다리 끝이 몸통 윗선에 <b>딱 맞닿게</b> 한다(0+4=4 = 몸통 top).
     1px 이라도 파고들면 몸통 안쪽에 자국이 남는다. */
  left: 5px; top: 0;
  width: 8px; height: 4px;
  border: 2px solid #222;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
}

/* Drawer */

/*
 * 서랍은 화면을 덮는 창이다 — 하단 탭바(z-index 90) 위에 와야 한다.
 *
 * 60 이던 시절엔 탭바가 서랍을 덮어, 맨 아래 항목(로그인)이 탭바에 가려 <b>보이지도
 * 눌리지도 않았다</b> (사용자 발견 2026-09-18). 서랍을 열면 탭바는 가려지는 것이 맞다 —
 * 열어 둔 채로 탭을 누르게 두면 두 화면이 겹쳐 움직인다.
 */
.tpl-yogosa .drawer{
position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}

.tpl-yogosa .drawer.is-open{
display:block;
}

.tpl-yogosa .drawer__backdrop{
position:absolute; inset:0;
  background: rgba(0,0,0,.35);
}

/*
 * 서랍은 <b>끝까지 닿을 수 있어야 한다</b> (사용자 보고 2026-09-18).
 *
 * 항목이 화면보다 길면 맨 아래(로그인)에 손이 닿지 않았다 — 안드로이드에서는 간신히
 * 걸치고 아이폰에서는 아예 안 보였다. 폰마다 아래쪽 브라우저 막대와 홈 인디케이터가
 * 차지하는 높이가 달라서, 항목 간격을 줄여 맞추는 것으로는 어느 기기에선가 또 잘린다.
 * 카테고리가 늘면 그때 또 잘린다.
 *
 * 그래서 두 가지를 한다.
 *   1) 높이를 100dvh 로 — vh 와 달리 브라우저 막대가 차지한 만큼을 빼고 준다
 *   2) 목록을 스크롤되게 — 아무리 길어도 손가락으로 내려가 닿는다
 */
.tpl-yogosa .drawer__panel{
position:absolute;
  /* 여는 버튼이 왼쪽에 있으니 서랍도 왼쪽에서 나온다 (사용자 지시 2026-09-18).
     오른쪽에서 나오면 누른 손가락과 반대편에서 열려 눈이 한 번 건너뛴다. */
  left: 0; top: 0;
  height: 100dvh;
  max-height: 100dvh;
  /* 글자 길이에 견줘 폭이 넓어 빈 자리가 휑했다. 가장 긴 항목(뷰티·퍼스널케어)이
     한 줄에 들어가는 만큼만 준다. 남는 폭은 바깥을 눌러 닫을 자리가 된다. */
  width: min(272px, 76vw);
  background: #fff;
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  flex-direction: column;
  overflow: hidden;   /* 스크롤은 안쪽 목록이 맡는다 */
}

.tpl-yogosa .drawer__head{
display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 8px 4px 12px;
  border-bottom: 1px solid var(--line);
}

.tpl-yogosa .drawer__title{
font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
}

.tpl-yogosa .drawer__content{
padding: 14px 4px;
  display:flex;
  flex-direction: column;
  gap: 12px;
  /* 목록이 길면 여기서 스크롤한다. 맨 아래 항목까지 손이 닿는다. */
  flex: 1 1 auto;
  min-height: 0;          /* 이게 없으면 flex 항목이 안 줄어들어 스크롤이 안 생긴다 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 아이폰 홈 인디케이터에 마지막 줄이 가리지 않게 */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

.tpl-yogosa .drawer__content a{
padding: 10px 10px;
  border-radius: 12px;
}

.tpl-yogosa .drawer__content a:hover{
background: var(--soft);
}

.tpl-yogosa .drawer__content hr{
border:0; border-top:1px solid var(--line);
  margin: 6px 0;
}

/* Hero */

.tpl-yogosa .hero{
border-bottom: 1px solid var(--line);
  padding: 34px 0 22px;
}

.tpl-yogosa .hero__grid{
display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

.tpl-yogosa .eyebrow{
margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tpl-yogosa .hero__title{
font-family: var(--serif);
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.03;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
}

.tpl-yogosa .hero__desc{
margin: 0 0 18px;
  color: #333;
  max-width: 52ch;
}

.tpl-yogosa .hero__cta{
display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.tpl-yogosa .btn{
display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
}

.tpl-yogosa .btn:hover{
transform: translateY(-1px);
}

.tpl-yogosa .btn--ghost{
background: transparent;
  color: var(--accent);
}

.tpl-yogosa .btn--small{
padding: 10px 14px;
  font-size: 13px;
}

.tpl-yogosa .hero__badges{
display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.tpl-yogosa .badge{
border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: #fff;
}

.tpl-yogosa .badge strong{
display:block; font-size: 13px;
}

.tpl-yogosa .badge span{
display:block; color: var(--muted); font-size: 12px; margin-top: 2px;
}

.tpl-yogosa .hero__visual{
position: relative;
  display:grid;
  gap: 12px;
}

.tpl-yogosa .product-shot{
border-radius: var(--radius);
  overflow:hidden;
  background: var(--soft);
  border: 1px solid var(--line);
}

.tpl-yogosa .product-shot img{
width: 100%;
  height: min(520px, 58vh);
  object-fit: cover;
}

.tpl-yogosa .float-card{
border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}

.tpl-yogosa .float-card__title{
margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tpl-yogosa .float-card__name{
margin: 0; font-weight: 600;
}

.tpl-yogosa .float-card__meta{
margin: 2px 0 10px; color: var(--muted); font-size: 13px;
}

.tpl-yogosa .mini-link{
font-weight: 600; font-size: 13px; color:var(--accent);
}

.tpl-yogosa .br-md{
display:none;
}

/* Sections */

.tpl-yogosa .section{
padding: 46px 0;
}

.tpl-yogosa .section__head{
display:flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.tpl-yogosa .section__head h2{
font-family: var(--serif);
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.tpl-yogosa .section__head p{
margin: 0;
  color: var(--muted);
}

/* Product grid */

.tpl-yogosa .grid{
display:grid; gap: 14px;
}

.tpl-yogosa .products{
grid-template-columns: 1fr;
}

.tpl-yogosa .card{
border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction: column;
}

.tpl-yogosa .card__media{
background: var(--soft);
  aspect-ratio: 4 / 3;
  overflow:hidden;
}

.tpl-yogosa .card__media img{
width:100%;
  height:100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.tpl-yogosa .card:hover .card__media img{
transform: scale(1.03);
}

.tpl-yogosa .card__body{
padding: 14px 14px 16px; display:grid; gap: 10px;
}

.tpl-yogosa .card__top{
display:flex; align-items:center; justify-content: space-between; gap: 10px;
}

.tpl-yogosa .card__title{
margin:0; font-size: 15px;
}

.tpl-yogosa .card__desc{
margin:0; color: var(--muted); font-size: 13px;
}

.tpl-yogosa .card__bottom{
display:flex; align-items:center; justify-content: space-between; gap: 10px;
}

.tpl-yogosa .price{
font-weight: 700;
}

.tpl-yogosa .chip{
border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  cursor:pointer;
}

.tpl-yogosa .chip:hover{
background: var(--soft);
}

/* Two-up */

.tpl-yogosa .two-up{
display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.tpl-yogosa .panel{
border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: #fff;
}

.tpl-yogosa .panel h2{
font-family: var(--serif);
  margin: 0 0 6px;
}

.tpl-yogosa .panel p{
margin: 0 0 14px; color: var(--muted);
}

.tpl-yogosa .panel--image{
padding: 0;
  overflow:hidden;
  background: var(--soft);
}

.tpl-yogosa .panel--image img{
width:100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

/* Newsletter */

.tpl-yogosa .newsletter{
border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: #fff;
}

.tpl-yogosa .newsletter h2{
font-family: var(--serif);
  margin: 0 0 6px;
}

.tpl-yogosa .newsletter p{
margin: 0 0 14px;
}

.tpl-yogosa .newsletter__form{
display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.tpl-yogosa .newsletter__form input{
flex: 1 1 220px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  outline: none;
}

.tpl-yogosa .newsletter__form input:focus{
border-color: var(--accent);
}

/* Footer */

.tpl-yogosa .footer{
border-top: 1px solid var(--line);
  padding: 34px 0 22px;
  background: #fff;
}

.tpl-yogosa .footer__grid{
display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.tpl-yogosa .footer__brand{
font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 6px;
}

.tpl-yogosa .footer__col h4{
margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:#222;
}

.tpl-yogosa .footer__col a{
display:block;
  padding: 6px 0;
  color: var(--muted);
}

.tpl-yogosa .footer__col a:hover{
color:var(--accent);
}

.tpl-yogosa .footer__bottom{
margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Split layout */

.tpl-yogosa .split{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.tpl-yogosa .split__media{
  min-width: 0;
}

.tpl-yogosa .split__copy{
  min-width: 0;
}

/* Responsive */

@media (min-width: 720px){

.tpl-yogosa .split{
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.tpl-yogosa .topbar__inner{
grid-template-columns: 160px 1fr 140px;
}

.tpl-yogosa .topbar__menu{
display:none;
}

.tpl-yogosa .nav{
display:flex;
}

.tpl-yogosa .brand{
justify-self: start;
}

.tpl-yogosa .br-md{
display:inline;
}

.tpl-yogosa .hero{
padding: 46px 0 30px;
}

.tpl-yogosa .hero__grid{
grid-template-columns: 1.05fr .95fr;
    gap: 26px;
    align-items: center;
}

.tpl-yogosa .hero__badges{
grid-template-columns: repeat(3, 1fr);
}

.tpl-yogosa .float-card{
position: absolute;
    right: 14px;
    bottom: 14px;
    max-width: 280px;
}

.tpl-yogosa .products{
grid-template-columns: repeat(2, 1fr);
}

.tpl-yogosa .two-up{
grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.tpl-yogosa .footer__grid{
grid-template-columns: 1.5fr 1fr 1fr 1fr;
    align-items: start;
}

}

@media (min-width: 1024px){

.tpl-yogosa .products{
grid-template-columns: repeat(3, 1fr);
}

}


/* ─────────────────────────────────────────────────────────────
   테마 프리셋 (data-theme) — 상점관리자가 선택. 색/배경/라운드/폰트 override.
   외부 웹폰트 의존 없이 시스템 스택으로 안전 동작.
   ───────────────────────────────────────────────────────────── */
.tpl-yogosa{ background: var(--page-bg); }

/* 지마켓 스타일 — 그린 포인트, 조밀한 각진 그리드, 회색 배경 */
.tpl-yogosa[data-theme="gmarket"]{
  --accent: #2f9e44;
  --page-bg: #f4f5f7;
  --radius: 6px;
  --radius-sm: 4px;
  --container: 1180px;
  --serif: "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --sans: "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* 쿠팡 스타일 — 블루 포인트, 둥근 모서리, 화이트 배경 */
.tpl-yogosa[data-theme="coupang"]{
  --accent: #346aff;
  --page-bg: #ffffff;
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1200px;
  --serif: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}

/* SSG/프리미엄 — 모노톤, 세리프 헤딩, 넉넉한 여백 */
.tpl-yogosa[data-theme="ssg"]{
  --accent: #1a1a1a;
  --page-bg: #ffffff;
  --radius: 2px;
  --radius-sm: 2px;
  --container: 1100px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}

/* 리씽크/미니멀 감성 — 퍼플 포인트, 크림 배경, 부드러운 라운드 */
.tpl-yogosa[data-theme="rethink"]{
  --accent: #6b4eff;
  --page-bg: #faf8f5;
  --bg: #fffdfa;
  --radius: 22px;
  --radius-sm: 16px;
  --container: 1080px;
  --serif: "Playfair Display", Georgia, serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}

/* 11번가 — 레드 포인트, 조밀·활기찬 그리드 */
.tpl-yogosa[data-theme="11st"]{
  --accent: #ff0038;
  --page-bg: #f7f7f9;
  --radius: 6px;
  --radius-sm: 4px;
  --container: 1180px;
  --serif: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}

/* GS샵 — 틸/그린 포인트, 깔끔한 화이트, 중간 라운드 */
.tpl-yogosa[data-theme="gsshop"]{
  --accent: #00b2a9;
  --page-bg: #ffffff;
  --radius: 10px;
  --radius-sm: 8px;
  --container: 1160px;
  --serif: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}

/* 바이모노 — 블랙&화이트 미니멀, 각진 모서리, 전부 산세리프 */
.tpl-yogosa[data-theme="bymono"]{
  --accent: #000000;
  --page-bg: #ffffff;
  --bg: #ffffff;
  --text: #0a0a0a;
  --radius: 0px;
  --radius-sm: 0px;
  --container: 1080px;
  --serif: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}

/* 롯데홈쇼핑 — 롯데 레드, 따뜻한 배경, 둥근 모서리 */
.tpl-yogosa[data-theme="lotte"]{
  --accent: #e60012;
  --page-bg: #fdf6f4;
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1160px;
  --serif: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}

/* 선라이즈 — hello-sunrise 감성. 크림 배경 + 선라이즈 오렌지 포인트 + 세리프 헤딩 */
/* 선라이즈 = PACE CLUB 스포츠 (2026-09-16). paper/ink/orange */
.tpl-yogosa[data-theme="sunrise"]{
  --accent: #c64d20;
  --accent-contrast: #fbfaf7;
  --page-bg: #fbfaf7;
  --bg: #fbfaf7;
  --soft: #f1f2ef;
  --line: #deded6;
  --text: #242821;
  --muted: #6b6c66;
  --radius: 8px;
  --radius-sm: 6px;
  --container: 1220px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   테마별 레이아웃 구조 심화 (data-theme) — 그리드 밀도/카드/이미지비율/섹션/가격.
   그리드 열 수는 데스크톱(≥1024) 기준으로 override(모바일은 기본 1~2열 유지).
   ═══════════════════════════════════════════════════════════════ */

/* ── 오픈마켓 조밀형: 지마켓 · 11번가 (작은 카드, 정사각 이미지, 가격 강조, 설명 숨김) ── */
.tpl-yogosa[data-theme="gmarket"] .card,
.tpl-yogosa[data-theme="11st"] .card{ border:1px solid var(--line); box-shadow:none; }
.tpl-yogosa[data-theme="gmarket"] .card__media,
.tpl-yogosa[data-theme="11st"] .card__media{ aspect-ratio:1/1; }
.tpl-yogosa[data-theme="gmarket"] .card__body,
.tpl-yogosa[data-theme="11st"] .card__body{ padding:8px 10px 12px; gap:6px; }
.tpl-yogosa[data-theme="gmarket"] .card__title,
.tpl-yogosa[data-theme="11st"] .card__title{ font-size:13px; line-height:1.35; }
.tpl-yogosa[data-theme="gmarket"] .card__desc,
.tpl-yogosa[data-theme="11st"] .card__desc{ display:none; }
.tpl-yogosa[data-theme="gmarket"] .price,
.tpl-yogosa[data-theme="11st"] .price{ color:var(--accent); font-size:16px; font-weight:800; }
.tpl-yogosa[data-theme="gmarket"] .section,
.tpl-yogosa[data-theme="11st"] .section{ padding:26px 0; }
.tpl-yogosa[data-theme="gmarket"] .section__head h2,
.tpl-yogosa[data-theme="11st"] .section__head h2{ font-family:var(--sans); font-size:20px; font-weight:800; }
.tpl-yogosa[data-theme="gmarket"] .hero,
.tpl-yogosa[data-theme="11st"] .hero{ padding:18px 0 14px; }

/* ── 대형배너 라운드형: 쿠팡 · 롯데홈쇼핑 (테두리 없는 그림자 카드) ── */
.tpl-yogosa[data-theme="coupang"] .card,
.tpl-yogosa[data-theme="lotte"] .card{ border:0; box-shadow:0 6px 20px rgba(0,0,0,.08); }
.tpl-yogosa[data-theme="coupang"] .card__media{ aspect-ratio:1/1; }
.tpl-yogosa[data-theme="lotte"] .card__media{ aspect-ratio:3/4; }
.tpl-yogosa[data-theme="coupang"] .price,
.tpl-yogosa[data-theme="lotte"] .price{ color:var(--accent); font-size:18px; font-weight:800; }
.tpl-yogosa[data-theme="coupang"] .section,
.tpl-yogosa[data-theme="lotte"] .section{ padding:40px 0; }
.tpl-yogosa[data-theme="coupang"] .section__head h2,
.tpl-yogosa[data-theme="lotte"] .section__head h2{ font-family:var(--sans); font-weight:800; }
.tpl-yogosa[data-theme="coupang"] .btn,
.tpl-yogosa[data-theme="lotte"] .btn{ padding:14px 22px; font-size:15px; }

/* ── 클린 4열: GS샵 ── */
.tpl-yogosa[data-theme="gsshop"] .card{ border:1px solid var(--line); box-shadow:none; }
.tpl-yogosa[data-theme="gsshop"] .card__media{ aspect-ratio:1/1; }
.tpl-yogosa[data-theme="gsshop"] .price{ color:var(--accent); font-weight:800; }
.tpl-yogosa[data-theme="gsshop"] .section__head h2{ font-family:var(--sans); font-weight:700; }

/* ── 프리미엄 세리프: SSG (넉넉한 여백, 세로 이미지) ── */
.tpl-yogosa[data-theme="ssg"] .card{ border:0; box-shadow:none; }
.tpl-yogosa[data-theme="ssg"] .card__media{ aspect-ratio:3/4; background:var(--soft); }
.tpl-yogosa[data-theme="ssg"] .card__body{ padding:14px 2px 6px; }
.tpl-yogosa[data-theme="ssg"] .section{ padding:64px 0; }
.tpl-yogosa[data-theme="ssg"] .section__head h2{ font-size:34px; }
.tpl-yogosa[data-theme="ssg"] .grid{ gap:28px; }

/* ── 블랙&화이트 갤러리: 바이모노 (각진, 무테, 타이트 갤러리) ── */
.tpl-yogosa[data-theme="bymono"] .card{ border:0; border-radius:0; box-shadow:none; }
.tpl-yogosa[data-theme="bymono"] .card__media{ aspect-ratio:1/1; border-radius:0; }
.tpl-yogosa[data-theme="bymono"] .card__body{ padding:10px 2px 4px; gap:6px; }
.tpl-yogosa[data-theme="bymono"] .card__desc{ display:none; }
.tpl-yogosa[data-theme="bymono"] .card__title{ font-size:13px; letter-spacing:.02em; }
.tpl-yogosa[data-theme="bymono"] .price{ font-weight:700; }
.tpl-yogosa[data-theme="bymono"] .grid{ gap:6px; }
.tpl-yogosa[data-theme="bymono"] .section{ padding:56px 0; }
.tpl-yogosa[data-theme="bymono"] .section__head h2{ font-family:var(--sans); font-size:16px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }

/* ── 소프트 감성: 리씽크 (큰 라운드, 세로 이미지, 그림자) ── */
.tpl-yogosa[data-theme="rethink"] .card{ border:0; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.tpl-yogosa[data-theme="rethink"] .card__media{ aspect-ratio:4/5; }
.tpl-yogosa[data-theme="rethink"] .price{ color:var(--accent); font-weight:800; }
.tpl-yogosa[data-theme="rethink"] .grid{ gap:22px; }

/* ── 데스크톱(≥1024) 그리드 열 수: 테마별 밀도 ── */
@media (min-width:1024px){
  .tpl-yogosa[data-theme="gmarket"] .products,
  .tpl-yogosa[data-theme="11st"] .products{ grid-template-columns:repeat(5,1fr); gap:10px; }
  .tpl-yogosa[data-theme="coupang"] .products,
  .tpl-yogosa[data-theme="lotte"] .products,
  .tpl-yogosa[data-theme="gsshop"] .products,
  .tpl-yogosa[data-theme="bymono"] .products{ grid-template-columns:repeat(4,1fr); }
  .tpl-yogosa[data-theme="ssg"] .products,
  .tpl-yogosa[data-theme="rethink"] .products{ grid-template-columns:repeat(3,1fr); }
}
/* 태블릿(≥720) — 조밀형은 3열 */
@media (min-width:720px) and (max-width:1023px){
  .tpl-yogosa[data-theme="gmarket"] .products,
  .tpl-yogosa[data-theme="11st"] .products,
  .tpl-yogosa[data-theme="bymono"] .products{ grid-template-columns:repeat(3,1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   테마 시그니처 컴포넌트 — 프로모 스트립 / 타임특가 밴드 / 오픈마켓 사이드바 / 카드 뱃지
   ═══════════════════════════════════════════════════════════════ */

/* 상단 프로모 스트립 */
.tpl-yogosa .theme-promo{
  background:var(--accent); color:var(--accent-contrast);
  text-align:center; font-size:13px; font-weight:600;
  padding:9px 16px; letter-spacing:.01em;
}

/* 카드 뱃지 (로켓배송/방송특가/무료배송 등) */
.tpl-yogosa .card__media{ position:relative; }
.tpl-yogosa .card__badge{
  position:absolute; top:8px; left:8px; z-index:2;
  background:var(--accent); color:var(--accent-contrast);
  font-size:11px; font-weight:800; padding:3px 7px; border-radius:4px; letter-spacing:.02em;
}

/* 히어로 카테고리 dot */
.tpl-yogosa .hero__dot{ border:1px solid var(--line); background:#fff; color:var(--text); }
.tpl-yogosa .hero__dot[data-active="true"]{ background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); }
.tpl-yogosa .product-shot__ph{
  width:100%; aspect-ratio:1/1; background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
  border-radius:12px; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:13px;
}

/* 타임특가/방송특가 밴드 */
.tpl-yogosa .theme-timedeal{ padding:14px 0 4px; }
.tpl-yogosa .theme-timedeal__head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.tpl-yogosa .theme-timedeal__flag{ background:var(--accent); color:var(--accent-contrast); font-weight:800; padding:6px 12px; border-radius:6px; font-size:15px; }
.tpl-yogosa .theme-timedeal__sub{ color:var(--muted); font-size:13px; }
.tpl-yogosa .theme-timedeal__row{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(130px,1fr); gap:10px; overflow-x:auto; padding-bottom:6px; }
.tpl-yogosa .theme-timedeal__thumb{ aspect-ratio:1/1; background:var(--soft); border-radius:8px; overflow:hidden; }
.tpl-yogosa .theme-timedeal__thumb img{ width:100%; height:100%; object-fit:cover; }
.tpl-yogosa .theme-timedeal__name{ font-size:12px; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tpl-yogosa .theme-timedeal__price{ font-weight:800; color:var(--accent); font-size:14px; }

/* 오픈마켓 좌측 사이드바 레이아웃 */
.tpl-yogosa .home-shell--sidebar{
  max-width:var(--container); margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1fr; gap:20px; align-items:start;
}
.tpl-yogosa .home-cats{ display:none; }
.tpl-yogosa .home-shell--sidebar .home-main .container{ width:100%; padding:0; margin:0; }
@media (min-width:1024px){
  .tpl-yogosa .home-shell--sidebar{ grid-template-columns:200px 1fr; }
  .tpl-yogosa .home-cats{ display:block; position:sticky; top:84px; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:#fff; }
  .tpl-yogosa .home-cats__title{ background:var(--accent); color:var(--accent-contrast); font-weight:700; padding:10px 14px; font-size:14px; }
  .tpl-yogosa .home-cats ul{ list-style:none; margin:0; padding:6px 0; }
  .tpl-yogosa .home-cats li a{ display:block; padding:9px 14px; font-size:13px; border-bottom:1px solid var(--soft); }
  .tpl-yogosa .home-cats li a:hover{ background:var(--soft); color:var(--accent); }
}

/* ── 엠케이쇼핑 프리미엄 10종 팔레트 (2026-09-14) — 공통 MkShopHome 골격 위 색/서체 ── */
.tpl-yogosa[data-theme="maison"]{  /* 모던 백화점 */
  --accent: #262a27; --accent-contrast: #ffffff;
  --page-bg: #f7f5ef; --bg: #fffefa; --soft: #eae7dd; --line: #dcded3;
  --text: #262a27; --muted: #6f736a;
  --radius: 4px; --radius-sm: 4px; --container: 1320px;
  --serif: "Nanum Myeongjo", Georgia, "Apple SD Gothic Neo", serif; --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}
.tpl-yogosa[data-theme="onyx"]{  /* 럭셔리 다크 */
  --accent: #d2b579; --accent-contrast: #191b17;
  --page-bg: #111415; --bg: #1b1f20; --soft: #272b29; --line: #3b403c;
  --text: #efece3; --muted: #aaa99f;
  --radius: 2px; --radius-sm: 2px; --container: 1320px;
  --serif: "Nanum Myeongjo", Georgia, "Apple SD Gothic Neo", serif; --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}
.tpl-yogosa[data-theme="folio"]{  /* 에디토리얼 */
  --accent: #82352e; --accent-contrast: #fffaf0;
  --page-bg: #fffaf0; --bg: #fffaf0; --soft: #eee3d1; --line: #d1c4b0;
  --text: #352b25; --muted: #796c5e;
  --radius: 0px; --radius-sm: 0px; --container: 1320px;
  --serif: "Nanum Myeongjo", Georgia, "Apple SD Gothic Neo", serif; --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}
.tpl-yogosa[data-theme="forma"]{  /* 디자인 갤러리 */
  --accent: #e64e25; --accent-contrast: #ffffff;
  --page-bg: #f9f9f7; --bg: #ffffff; --soft: #e9eae4; --line: #d7d9d1;
  --text: #292a29; --muted: #74766e;
  --radius: 0px; --radius-sm: 0px; --container: 1320px;
  --serif: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif; --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}
.tpl-yogosa[data-theme="bloom"]{  /* 뷰티 부티크 */
  --accent: #842f4e; --accent-contrast: #ffffff;
  --page-bg: #fcf1f3; --bg: #fffafb; --soft: #efdbe1; --line: #e5cdd5;
  --text: #4b2837; --muted: #926f7e;
  --radius: 15px; --radius-sm: 6px; --container: 1320px;
  --serif: "Nanum Myeongjo", Georgia, "Apple SD Gothic Neo", serif; --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}
.tpl-yogosa[data-theme="azure"]{  /* 프리미엄 커머스 */
  --accent: #2456b9; --accent-contrast: #ffffff;
  --page-bg: #f0f5ff; --bg: #ffffff; --soft: #e1eafa; --line: #cedaf0;
  --text: #152b50; --muted: #637898;
  --radius: 10px; --radius-sm: 6px; --container: 1320px;
  --serif: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif; --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}
.tpl-yogosa[data-theme="grove"]{  /* 내추럴 라이프 */
  --accent: #294f3d; --accent-contrast: #ffffff;
  --page-bg: #f5f2e8; --bg: #fcfbf5; --soft: #dfe5d5; --line: #ccd1be;
  --text: #2d3e31; --muted: #798170;
  --radius: 6px; --radius-sm: 6px; --container: 1320px;
  --serif: "Nanum Myeongjo", Georgia, "Apple SD Gothic Neo", serif; --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}
.tpl-yogosa[data-theme="orbit"]{  /* 디지털 셀렉트 */
  --accent: #142535; --accent-contrast: #b9fff1;
  --page-bg: #e9f2f4; --bg: #f9fcfc; --soft: #d5e6e9; --line: #bdcfd5;
  --text: #142535; --muted: #5d7784;
  --radius: 4px; --radius-sm: 4px; --container: 1320px;
  --serif: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif; --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}
.tpl-yogosa[data-theme="muse"]{  /* 패션 콘셉트 */
  --accent: #1c1c1c; --accent-contrast: #edf55d;
  --page-bg: #f4f4f0; --bg: #ffffff; --soft: #edf55d; --line: #cfd0c6;
  --text: #1c1c1c; --muted: #77796f;
  --radius: 0px; --radius-sm: 0px; --container: 1320px;
  --serif: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif; --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}
.tpl-yogosa[data-theme="dune"]{  /* 리빙 스튜디오 */
  --accent: #92523a; --accent-contrast: #fff9f0;
  --page-bg: #f5ebdf; --bg: #fcf7f0; --soft: #e2cbbb; --line: #d6bdab;
  --text: #513d32; --muted: #8c7667;
  --radius: 20px; --radius-sm: 6px; --container: 1320px;
  --serif: "Nanum Myeongjo", Georgia, "Apple SD Gothic Neo", serif; --sans: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", sans-serif;
}

/* 상품 후기 · Q&A 문의 (카페24 벤치마킹 흡수 2026-09-15) */
.tpl-yogosa .pdp-rq { max-width: var(--container, 1200px); margin: 40px auto 0; padding: 0 16px; }
.tpl-yogosa .pdp-rq__tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.tpl-yogosa .pdp-rq__tabs button { background: none; border: 0; padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; }
.tpl-yogosa .pdp-rq__tabs button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tpl-yogosa .pdp-rq__body { padding: 22px 0 8px; }
.tpl-yogosa .pdp-rq__summary { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tpl-yogosa .pdp-rq__summary strong { font-size: 30px; }
.tpl-yogosa .pdp-rq__summary span { color: var(--accent); font-size: 18px; letter-spacing: 2px; }
.tpl-yogosa .pdp-rq__summary em { color: var(--muted); font-style: normal; font-size: 13px; }
.tpl-yogosa .pdp-rq__form { display: grid; gap: 8px; background: var(--soft, #f7f7f7); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.tpl-yogosa .pdp-rq__form input, .tpl-yogosa .pdp-rq__form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: inherit; }
.tpl-yogosa .pdp-rq__form .btn { justify-self: start; }
.tpl-yogosa .pdp-rq__stars { display: flex; gap: 2px; }
.tpl-yogosa .pdp-rq__stars button { background: none; border: 0; font-size: 24px; line-height: 1; color: #d4d4d4; cursor: pointer; padding: 0 2px; }
.tpl-yogosa .pdp-rq__stars button.on { color: var(--accent); }
.tpl-yogosa .pdp-rq__login { color: var(--muted); background: var(--soft, #f7f7f7); border-radius: 12px; padding: 16px; margin-bottom: 20px; font-size: 14px; }
.tpl-yogosa .pdp-rq__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tpl-yogosa .pdp-rq__list li { padding: 16px 0; border-top: 1px solid var(--line); }
.tpl-yogosa .pdp-rq__list li:first-child { border-top: 0; }
.tpl-yogosa .pdp-rq__empty { color: var(--muted); text-align: center; padding: 32px 0 !important; }
.tpl-yogosa .pdp-rq__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.tpl-yogosa .pdp-rq__rate { color: var(--accent); letter-spacing: 1px; }
.tpl-yogosa .pdp-rq__meta { color: var(--muted); font-size: 12px; }
.tpl-yogosa .pdp-rq__list p { margin: 4px 0 0; line-height: 1.6; white-space: pre-wrap; }
.tpl-yogosa .pdp-rq__answer { margin-top: 10px; background: var(--soft, #f7f7f7); border-radius: 10px; padding: 12px 14px; }
.tpl-yogosa .pdp-rq__answer strong { color: var(--accent); font-size: 13px; }

/* 진열 배지 (카페24 벤치마킹 흡수 2탄, 2026-09-15) */
.tpl-yogosa .card__badges { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 4px; z-index: 2; }
.tpl-yogosa .card__media, .tpl-yogosa .card-image, .tpl-yogosa .hl-sun__media { position: relative; }
.tpl-yogosa .card__badges .card__badge { position: static; display: inline-block; padding: 3px 7px; border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 1; color: #fff; background: var(--accent); }
.tpl-yogosa .card__badge--recommend { background: var(--accent); }
.tpl-yogosa .card__badge--new { background: #16a34a; }
.tpl-yogosa .card__badge--best { background: #e11d48; }
.tpl-yogosa .card__badge--hot { background: #ea580c; }
.tpl-yogosa .card__badge--sale { background: #7c3aed; }

/* 타임세일 정가 취소선 (2026-09-16) */
.tpl-yogosa .price__was { color: var(--muted); text-decoration: line-through; font-weight: 400; font-size: 0.82em; margin-right: 6px; }
.tpl-yogosa .card__bottom .price { display: inline-flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }