/* SynapMall 쇼핑몰 — 마켓 스킨.
   흰 바탕 + 검정 잉크 + 강조색 하나(할인율·주요 버튼·순위), 글꼴 Pretendard.
   종합몰처럼 상품이 먼저 보이게: 촘촘한 목록, 가격 앞 할인율, 카드 하트, 순위 번호, 모바일 아래 탭 막대.
   강조색(--sm-accent / --sm-on-accent)은 관리자 설정(디자인 탭)에서 base.html 이 덮어쓴다.
   sm-* 클래스는 모든 스킨이 같이 쓰는 약속이다(services/skins.py 참고). */
:root {
  --sm-bg: #FFFFFF;
  --sm-surface: #FFFFFF;
  --sm-ink: #111111;
  --sm-text: #222222;
  --sm-text-2: #505050;
  --sm-muted: #707070;
  --sm-faint: #8C8C8C;
  --sm-line: #EBEBEB;
  --sm-line-2: #D6D6D6;
  --sm-soft: #F4F4F4;
  --sm-soft-2: #FAFAFA;
  --sm-free: #1F6FEB;        /* '무료배송' 태그 */
  --sm-ok: #0E7A4E;
  /* 결제수단 아이콘(인라인 SVG 마스크) — 색은 쓰는 쪽 글자색을 따른다 */
  --sm-ico-card: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='2'%20y='5'%20width='20'%20height='14'%20rx='2.5'/><path%20d='M2%2010h20'/></svg>");
  --sm-ico-easy: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='6'%20y='2'%20width='12'%20height='20'%20rx='2.5'/><path%20d='M13%207l-3%204.5h4L11%2017'/></svg>");
  --sm-ico-transfer: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%208h14M15%205l3%203-3%203'/><path%20d='M20%2016H6m3-3l-3%203%203%203'/></svg>");
  --sm-ico-vbank: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x='4'%20y='3'%20width='16'%20height='18'%20rx='2'/><path%20d='M8%208h8M8%2012h8M8%2016h5'/></svg>");
  --sm-ico-bank: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%209l9-5%209%205'/><path%20d='M5%209v9M10%209v9M14%209v9M19%209v9'/><path%20d='M3%2021h18'/></svg>");
  --sm-accent: #E0301E;
  --sm-on-accent: #FFFFFF;
  --sm-accent-soft: #FFF3F1;
  /* 소셜 로그인 버튼 — 각 포털이 정한 브랜드 색(임의로 바꾸면 심사에서 지적받는다) */
  --sm-naver: #03C75A;
  --sm-kakao: #FEE500;
  --sm-kakao-ink: #191600;
  --sm-radius: 8px;
  --sm-radius-sm: 4px;
  --sm-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  --bs-body-font-family: var(--sm-font);
  --bs-body-color: var(--sm-text);
  --bs-body-bg: var(--sm-bg);
  --bs-border-color: var(--sm-line);
  --bs-border-radius: var(--sm-radius-sm);
  --bs-border-radius-lg: var(--sm-radius);
  --bs-link-color: var(--sm-ink);
  --bs-link-hover-color: var(--sm-ink);
  --bs-link-color-rgb: 17, 17, 17;
  --bs-secondary-color: var(--sm-muted);
  --bs-emphasis-color: var(--sm-ink);
}
body { font-family: var(--sm-font); color: var(--sm-text); background: var(--sm-bg); -webkit-font-smoothing: antialiased; letter-spacing: -0.02em; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--sm-ink); }
img { max-width: 100%; }
.text-muted { color: var(--sm-muted) !important; }
::selection { background: var(--sm-ink); color: #fff; }
:focus-visible { outline: 2px solid var(--sm-ink); outline-offset: 2px; }
.container { max-width: 1328px; padding-left: 24px; padding-right: 24px; }

/* 스킨 미리보기 막대(관리자만) */
.sm-previewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 8px 16px; background: #FFE9A8; color: #3A2A00; font-size: .84rem; }
.sm-previewbar button { border: 1px solid #3A2A00; background: transparent; color: #3A2A00; border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 700; }
.sm-previewbar button[name=apply] { background: #3A2A00; color: #FFE9A8; }

/* ── 버튼·입력 ─────────────────────────────────────────── */
.btn { --bs-btn-font-weight: 700; --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.1rem; --bs-btn-border-radius: var(--sm-radius-sm); }
.btn-lg { --bs-btn-padding-y: .9rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: var(--sm-radius-sm); }
.btn-sm { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8rem; --bs-btn-font-weight: 600; }
.btn-dark { --bs-btn-bg: var(--sm-ink); --bs-btn-border-color: var(--sm-ink); --bs-btn-hover-bg: #333; --bs-btn-hover-border-color: #333; --bs-btn-active-bg: #000; }
.btn-outline-dark { --bs-btn-color: var(--sm-ink); --bs-btn-bg: #fff; --bs-btn-border-color: var(--sm-line-2); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--sm-ink); --bs-btn-hover-border-color: var(--sm-ink); --bs-btn-active-bg: var(--sm-soft); --bs-btn-active-color: var(--sm-ink); }
.btn-outline-secondary { --bs-btn-color: var(--sm-text); --bs-btn-bg: #fff; --bs-btn-border-color: var(--sm-line-2); --bs-btn-hover-bg: var(--sm-soft-2); --bs-btn-hover-color: var(--sm-ink); --bs-btn-hover-border-color: var(--sm-ink); --bs-btn-active-bg: var(--sm-soft); --bs-btn-active-color: var(--sm-ink); }
.btn-accent { background: var(--sm-accent); border-color: var(--sm-accent); color: var(--sm-on-accent); }
.btn-accent:hover, .btn-accent:focus { background: var(--sm-accent); border-color: var(--sm-accent); color: var(--sm-on-accent); filter: brightness(.92); }
.btn-link { color: var(--sm-text-2); }
.form-control, .form-select { border-color: var(--sm-line-2); border-radius: var(--sm-radius-sm); padding: .68rem .85rem; color: var(--sm-ink); }
.form-control::placeholder { color: #9A9A9A; }
.form-control[readonly] { background-color: var(--sm-soft-2); }
.form-control-sm, .form-select-sm { padding: .32rem .6rem; }
.form-control:focus, .form-select:focus { border-color: var(--sm-ink); box-shadow: none; }
.form-label { font-weight: 600; font-size: .86rem; color: var(--sm-ink); }
.form-check-input:checked { background-color: var(--sm-ink); border-color: var(--sm-ink); }
input[type=checkbox], input[type=radio] { accent-color: var(--sm-ink); width: 1.05rem; height: 1.05rem; vertical-align: -3px; margin-right: 4px; }
.alert { border-radius: var(--sm-radius-sm); border: 0; font-size: .9rem; }
.alert-secondary { background: var(--sm-soft); color: var(--sm-text); }
.badge { font-weight: 600; }
.pagination { --bs-pagination-color: var(--sm-text-2); --bs-pagination-border-color: transparent; --bs-pagination-hover-bg: var(--sm-soft); --bs-pagination-hover-color: var(--sm-ink); --bs-pagination-hover-border-color: transparent; --bs-pagination-active-bg: var(--sm-ink); --bs-pagination-active-border-color: var(--sm-ink); --bs-pagination-focus-box-shadow: none; gap: 4px; margin-top: 56px; }
.pagination .page-link { border-radius: var(--sm-radius-sm) !important; min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }

/* ── 상단 ─────────────────────────────────────────────── */
.sm-notice { background: var(--sm-ink); color: #fff; font-size: .84rem; font-weight: 500; text-align: center; padding: 10px 16px; }
.sm-notice a { color: #fff; }
.sm-notice a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sm-header { background: #fff; position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--sm-line); }
.sm-topbar .container { display: flex; justify-content: flex-end; }
.sm-toplinks { display: flex; align-items: center; gap: 16px; font-size: .78rem; color: var(--sm-muted); min-height: 32px; }
.sm-toplinks form { margin: 0; }
.sm-toplinks a, .sm-toplinks button { color: var(--sm-muted); background: none; border: 0; padding: 0; font-size: inherit; }
.sm-toplinks a:hover, .sm-toplinks button:hover { color: var(--sm-ink); }
.sm-toplinks .strong { color: var(--sm-accent); font-weight: 700; }
.sm-toplinks .who { color: var(--sm-ink); font-weight: 600; }
.sm-header-row { display: flex; align-items: center; gap: 32px; height: 76px; }
.sm-logo { font-weight: 800; font-size: 1.75rem; letter-spacing: -0.05em; color: var(--sm-ink); white-space: nowrap; }
.sm-logo:hover { color: var(--sm-ink); }
.sm-search { position: relative; flex: 0 1 480px; margin: 0 auto; }
.sm-search input { height: 48px; border-radius: 999px; border: 2px solid var(--sm-ink); padding: 0 56px 0 22px; font-size: .95rem; }
.sm-search input:focus { border-color: var(--sm-ink); }
.sm-search button { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--sm-ink); font-size: 1.15rem; }
.sm-util { display: flex; align-items: center; gap: 6px; }
.sm-util a { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 56px; height: 56px; color: var(--sm-ink); font-size: .72rem; font-weight: 500; }
.sm-util a:hover { color: var(--sm-accent); }
.sm-util i { font-size: 1.45rem; line-height: 1; }
.sm-cart-count { position: absolute; top: 2px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sm-accent); color: var(--sm-on-accent); font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center; }
.sm-cart-count[data-zero] { display: none; }
.sm-navrow .container { display: flex; align-items: center; gap: 28px; height: 52px; }
.sm-allcat { position: relative; flex-shrink: 0; }
.sm-allcat summary { list-style: none; display: flex; align-items: center; gap: 8px; height: 52px; font-weight: 700; font-size: .98rem; cursor: pointer; color: var(--sm-ink); }
.sm-allcat summary::-webkit-details-marker { display: none; }
.sm-allcat summary i { font-size: 1.35rem; }
.sm-allcat-panel { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 240px; padding: 10px 0; background: #fff; border: 1px solid var(--sm-line-2); border-radius: var(--sm-radius); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.sm-allcat-panel a { display: block; padding: 10px 20px; font-size: .92rem; color: var(--sm-text); }
.sm-allcat-panel a:hover { background: var(--sm-soft); color: var(--sm-ink); font-weight: 600; }
.sm-catbar { display: flex; align-items: center; gap: 26px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sm-catbar::-webkit-scrollbar { display: none; }
.sm-catbar a { position: relative; display: flex; align-items: center; height: 52px; font-size: 1rem; font-weight: 700; color: var(--sm-ink); white-space: nowrap; }
.sm-catbar a.sub { font-weight: 500; color: var(--sm-text-2); }
.sm-catbar a:hover { color: var(--sm-accent); }
.sm-catbar a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sm-ink); }
.sm-catbar .sep { width: 1px; height: 14px; background: var(--sm-line-2); flex-shrink: 0; }
.sm-main { padding: 24px 0 96px; min-height: 55vh; }
.sm-flash { margin-bottom: 16px; }

/* ── 타이포 ───────────────────────────────────────────── */
.sm-h1 { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.04em; color: var(--sm-ink); margin-bottom: 0; }
.sm-h2 { font-size: 1.15rem; font-weight: 700; color: var(--sm-ink); margin-bottom: 16px; }
.sm-h3 { font-size: 1rem; font-weight: 700; color: var(--sm-ink); }
.sm-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 28px; }
.sm-page-head .sm-sub { color: var(--sm-muted); font-size: .9rem; margin-top: 6px; }
.sm-crumb { font-size: .8rem; color: var(--sm-muted); margin-bottom: 10px; display: flex; gap: 6px; align-items: center; }
.sm-crumb a:hover { color: var(--sm-ink); }
.sm-section { margin-top: 72px; }
.sm-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sm-section-head h2 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.04em; color: var(--sm-ink); margin: 0; }
.sm-section-head h2 span { font-weight: 400; color: var(--sm-ink); }
.sm-section-head > a { font-size: .86rem; color: var(--sm-muted); white-space: nowrap; }
.sm-section-head > a:hover { color: var(--sm-ink); }
.sm-eyebrow { display: none; }
.sm-empty { text-align: center; padding: 80px 16px; color: var(--sm-muted); }
.sm-empty i { font-size: 2.4rem; color: #C8C8C8; display: block; margin-bottom: 12px; }

/* ── 메인 배너 ────────────────────────────────────────── */
.sm-hero { position: relative; overflow: hidden; border-radius: var(--sm-radius); background: var(--sm-soft); color: var(--sm-ink); padding: 72px 64px; min-height: 420px; display: flex; flex-direction: column; justify-content: center; }
.sm-hero > * { position: relative; z-index: 1; max-width: 620px; }
/* 오른쪽 장식 — 상품 카드 세 장을 부채꼴로 겹친다 */
.sm-hero > .sm-hero-stack { position: absolute; z-index: 0; right: 72px; top: 50%; width: 400px; height: 330px; max-width: none; transform: translateY(-50%); }
.sm-hero-stack .c { position: absolute; top: 30px; width: 190px; height: 250px; border-radius: var(--sm-radius); overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; color: #C4C4C4; font-size: 2.6rem; }
.sm-hero-stack .c img { width: 100%; height: 100%; object-fit: cover; }
.sm-hero-stack .c1 { left: 0; transform: rotate(-8deg); background: #EDEDED; }
.sm-hero-stack .c3 { right: 0; transform: rotate(8deg); background: #E4E4E4; }
.sm-hero-stack .c2 { left: 105px; top: 0; z-index: 1; }
.sm-hero-stack .tag { position: absolute; z-index: 2; left: 250px; top: -12px; padding: 6px 14px; border-radius: 999px; background: var(--sm-accent); color: var(--sm-on-accent); font-size: .85rem; font-weight: 800; letter-spacing: .04em; transform: rotate(6deg); }
.sm-hero-eyebrow { font-size: .9rem; font-weight: 700; color: var(--sm-accent); margin-bottom: 14px; }
.sm-hero h1 { font-size: 3rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1.2; margin: 0 0 16px; white-space: pre-line; }
.sm-hero p { font-size: 1.05rem; line-height: 1.65; color: var(--sm-text-2); margin: 0 0 28px; white-space: pre-line; }
.sm-hero .btn { align-self: flex-start; }
.sm-slider { position: relative; border-radius: var(--sm-radius); overflow: hidden; background: var(--sm-soft); }
.sm-slides { position: relative; aspect-ratio: 1280 / 480; }
.sm-slide { position: absolute; inset: 0; display: flex; opacity: 0; transition: opacity .45s; pointer-events: none; }
.sm-slide.on { opacity: 1; pointer-events: auto; }
.sm-slide img { width: 100%; height: 100%; object-fit: cover; }
.sm-slide-text { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 56px 64px; background: var(--sm-ink); color: #fff; width: 100%; height: 100%; }
.sm-slide-text b { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1.2; max-width: 680px; }
.sm-slide-text span { color: rgba(255,255,255,.78); font-size: 1.05rem; }
.sm-slide-ctrl { position: absolute; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 4px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: .8rem; font-weight: 600; }
.sm-slide-ctrl span { min-width: 44px; text-align: center; }
.sm-slide-ctrl button { width: 32px; height: 32px; border: 0; background: none; color: #fff; }
.sm-slide-dots { display: none; }

/* 바로가기 아이콘 */
.sm-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 8px; margin-top: 36px; }
.sm-quick a { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .84rem; font-weight: 500; color: var(--sm-ink); text-align: center; }
.sm-quick i { width: 64px; height: 64px; border-radius: 22px; background: var(--sm-soft); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--sm-ink); transition: background-color .15s, transform .15s; }
.sm-quick .sm-quick-txt { font-style: normal; font-size: .95rem; font-weight: 800; letter-spacing: -0.04em; }
.sm-quick a:hover i { background: var(--sm-ink); color: #fff; transform: translateY(-2px); }
/* 혜택 칩 */
.sm-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 32px 0 0; }
.sm-perks li { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--sm-radius-sm); background: var(--sm-soft-2); border: 1px solid var(--sm-line); font-size: .86rem; color: var(--sm-text-2); }
.sm-perks i { color: var(--sm-accent); font-size: 1.05rem; }
.sm-perks b { color: var(--sm-ink); }

/* 카테고리 칩(목록 화면 하위 분류) */
.sm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--sm-line-2); border-radius: 999px; font-size: .86rem; font-weight: 500; color: var(--sm-text); background: #fff; }
.sm-chip:hover { border-color: var(--sm-ink); color: var(--sm-ink); }
.sm-chip.active { background: var(--sm-ink); border-color: var(--sm-ink); color: #fff; }

/* ── 기획전 ───────────────────────────────────────────── */
.sm-event-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.sm-event { display: flex; flex-direction: column; gap: 14px; color: var(--sm-text); }
.sm-event:hover { color: var(--sm-text); }
.sm-event-img { aspect-ratio: 16 / 10; background: var(--sm-soft); border-radius: var(--sm-radius); overflow: hidden; }
.sm-event-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.sm-event:hover .sm-event-img img { transform: scale(1.03); }
.sm-event-img .sm-noimg { font-size: 1.8rem; }
.sm-event-body { display: flex; flex-direction: column; gap: 4px; }
.sm-event-body b { font-size: 1.1rem; font-weight: 700; color: var(--sm-ink); }
.sm-event-body p { margin: 0; font-size: .9rem; color: var(--sm-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sm-event-date { font-size: .8rem; color: var(--sm-accent); font-weight: 600; }
.sm-event-head { margin: 16px 0 32px; }
.sm-event-head .lead-sm { color: var(--sm-muted); margin-top: 8px; }
.sm-event-banner { width: 100%; border-radius: var(--sm-radius); margin-top: 20px; }

/* ── 상품 목록·카드 ───────────────────────────────────── */
/* 옆으로 넘기는 진열(메인) — 한 화면에 5개, 나머지는 스크롤·화살표 */
.sm-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.sm-rail::-webkit-scrollbar { display: none; }
.sm-rail > .sm-card { scroll-snap-align: start; }
.sm-rail-nav { display: flex; align-items: center; gap: 4px; }
.sm-rail-nav a { font-size: .86rem; color: var(--sm-muted); white-space: nowrap; margin-right: 8px; }
.sm-rail-nav a:hover { color: var(--sm-ink); }
.sm-rail-nav button { width: 32px; height: 32px; border: 1px solid var(--sm-line-2); border-radius: 50%; background: #fff; color: var(--sm-ink); display: inline-flex; align-items: center; justify-content: center; }
.sm-rail-nav button:hover { border-color: var(--sm-ink); }
.sm-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 40px 16px; }
.sm-main .sm-listbar + .sm-grid, .sm-mylayout .sm-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
.sm-card { position: relative; min-width: 0; color: var(--sm-text); }
.sm-thumb { position: relative; display: block; aspect-ratio: 5 / 6; border-radius: var(--sm-radius-sm); overflow: hidden; background: var(--sm-soft); }
.sm-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.sm-card:hover .sm-thumb img { transform: scale(1.04); }
.sm-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #C4C4C4; font-size: 2rem; background: var(--sm-soft); }
.sm-noimg.big { aspect-ratio: 1 / 1; border-radius: var(--sm-radius); font-size: 3rem; }
.sm-rank { position: absolute; left: 0; top: 0; min-width: 30px; height: 30px; padding: 0 8px; display: flex; align-items: center; justify-content: center; background: rgba(17,17,17,.72); color: #fff; font-size: .85rem; font-weight: 800; }
.sm-rank.top { background: var(--sm-accent); color: var(--sm-on-accent); }
.sm-soldout { position: absolute; inset: 0; background: rgba(255,255,255,.62); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--sm-ink); letter-spacing: .08em; }
.sm-card-wish { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 1.3rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.sm-card-wish.on { color: var(--sm-accent); filter: none; }
.sm-card-body { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
.sm-card-body:hover .sm-name { text-decoration: underline; text-underline-offset: 3px; }
.sm-name { font-size: .9rem; line-height: 1.4; color: var(--sm-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sm-summary { color: var(--sm-muted); font-size: .8rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; color: var(--sm-ink); }
.sm-price em { color: var(--sm-accent); font-style: normal; font-weight: 800; font-size: 1.05rem; }
.sm-price b { font-size: 1.05rem; font-weight: 800; }
.sm-price b small { font-size: .8em; font-weight: 700; margin-left: 1px; }
.sm-price del { color: var(--sm-faint); font-size: .8rem; font-weight: 400; order: 3; }
.sm-price.big b { font-size: 1.85rem; }
.sm-price.big em { font-size: 1.85rem; }
.sm-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sm-tags span { font-size: .7rem; font-weight: 600; padding: 2px 6px; border-radius: 3px; background: var(--sm-soft); color: var(--sm-text-2); }
.sm-tags .free { background: #EEF4FF; color: var(--sm-free); }
.sm-badges { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; flex-wrap: wrap; max-width: calc(100% - 16px); }
.sm-badge { font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 3px; background: var(--sm-ink); color: #fff; }
.sm-badge.sale { background: var(--sm-accent); color: var(--sm-on-accent); }
.sm-badge.rec { background: #fff; color: var(--sm-ink); box-shadow: inset 0 0 0 1px var(--sm-line-2); }
.sm-badge.pop { background: #2F4BA8; color: #fff; }
.sm-listbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--sm-line); margin-bottom: 24px; font-size: .86rem; color: var(--sm-muted); }
.sm-listbar b { color: var(--sm-ink); }
.sm-sort { display: flex; gap: 0; flex-wrap: wrap; }
.sm-sort a { padding: 4px 10px; color: var(--sm-muted); position: relative; }
.sm-sort a + a::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: var(--sm-line-2); }
.sm-sort a.on { color: var(--sm-ink); font-weight: 700; }
.sm-sort a:hover { color: var(--sm-ink); }
.sm-wish .sm-card { margin-bottom: 0; }

/* ── 상품 상세 ────────────────────────────────────────── */
.sm-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: start; margin-top: 8px; }
.sm-gallery #mainImg { width: 100%; border-radius: var(--sm-radius); aspect-ratio: 1 / 1; object-fit: cover; background: var(--sm-soft); display: block; }
.sm-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sm-thumb-sm { width: 76px; height: 76px; border-radius: var(--sm-radius-sm); cursor: pointer; border: 2px solid transparent; background: var(--sm-soft); padding: 0; }
.sm-thumb-sm.on, .sm-thumb-sm:hover { border-color: var(--sm-ink); }
.sm-buy { position: sticky; top: calc(var(--sm-header-h, 161px) + 20px); }
.sm-buy .sm-badges { position: static; margin-bottom: 10px; }
.sm-buy h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.35; color: var(--sm-ink); margin: 6px 0 8px; }
.sm-buy .sm-lead { color: var(--sm-muted); margin-bottom: 16px; }
.sm-buy > .sm-price { padding-bottom: 20px; }
.sm-rating { display: inline-flex; align-items: center; gap: 4px; font-size: .86rem; color: var(--sm-text-2); }
.sm-rating .stars { color: #FFB400; letter-spacing: 1px; }
.sm-dl { display: grid; grid-template-columns: 76px 1fr; gap: 10px 16px; font-size: .88rem; border-top: 1px solid var(--sm-ink); border-bottom: 1px solid var(--sm-line); padding: 18px 0; margin: 0 0 20px; }
.sm-dl dt { color: var(--sm-muted); font-weight: 400; }
.sm-dl dd { margin: 0; color: var(--sm-text); }
.sm-selrow { display: flex; align-items: center; gap: 12px; background: var(--sm-soft-2); border: 1px solid var(--sm-line); border-radius: var(--sm-radius-sm); padding: 12px 14px; margin-bottom: 8px; font-size: .9rem; }
.sm-selrow button.btn-close { width: .7em; height: .7em; }
.sm-qty { display: flex; align-items: center; border: 1px solid var(--sm-line-2); border-radius: var(--sm-radius-sm); background: #fff; overflow: hidden; }
.sm-qty button { border: 0; background: none; width: 34px; height: 34px; font-size: 1rem; color: var(--sm-ink); }
.sm-qty button:hover { background: var(--sm-soft); }
.sm-qty input { width: 40px; border: 0; text-align: center; -moz-appearance: textfield; font-weight: 700; }
.sm-qty input::-webkit-inner-spin-button, .sm-qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.sm-total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; margin-top: 8px; border-top: 1px solid var(--sm-line); }
.sm-total span:first-child { font-weight: 700; color: var(--sm-ink); }
.sm-total .sm-price b { color: var(--sm-accent); }
.sm-actions { display: flex; gap: 8px; }
.sm-actions .btn { flex: 1; height: 56px; }
.sm-actions .sm-wish-btn { flex: 0 0 56px; }
.sm-wish-btn.on { color: var(--sm-accent); border-color: var(--sm-accent); }
.sm-wish-btn i { font-size: 1.2rem; }
.sm-tabs { position: sticky; top: var(--sm-header-h, 161px); z-index: 5; background: #fff; display: flex; border-bottom: 1px solid var(--sm-line); margin-top: 72px; }
.sm-tabs button { flex: 1; border: 0; border-top: 1px solid var(--sm-line); background: var(--sm-soft-2); height: 56px; font-size: .95rem; font-weight: 600; color: var(--sm-muted); }
.sm-tabs button + button { border-left: 1px solid var(--sm-line); }
.sm-tabs button.active { background: #fff; color: var(--sm-ink); font-weight: 800; border-top: 2px solid var(--sm-ink); }
.sm-tabs button span { color: var(--sm-accent); margin-left: 4px; }
.sm-tabpane { padding: 40px 0 0; }
.sm-desc { max-width: 900px; margin: 0 auto; line-height: 1.8; }
.sm-desc img { max-width: 100%; height: auto; }
.sm-review { border-bottom: 1px solid var(--sm-line); padding: 20px 0; }
.sm-review-meta { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; color: var(--sm-muted); }
.sm-reply { background: var(--sm-soft); border-radius: var(--sm-radius-sm); padding: 14px 16px; font-size: .9rem; margin-top: 10px; }
.sm-reply b { color: var(--sm-ink); }
.sm-state { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 3px; margin-left: 6px; background: var(--sm-soft); color: var(--sm-muted); }
.sm-state.done { background: var(--sm-ink); color: #fff; }
.sm-policy h3 { font-size: 1rem; font-weight: 700; color: var(--sm-ink); margin: 0 0 8px; }
.sm-policy p { color: var(--sm-text-2); line-height: 1.8; margin-bottom: 28px; }

/* ── 박스·요약 ────────────────────────────────────────── */
.sm-box { border: 1px solid var(--sm-line); border-radius: var(--sm-radius); padding: 24px; background: #fff; }
.sm-box > .sm-h2:first-child { margin-top: 0; }
.sm-narrow { max-width: 440px; margin: 16px auto 0; }
.sm-narrow-md { max-width: 560px; margin: 16px auto 0; }
.sm-sum { border: 2px solid var(--sm-ink); border-radius: var(--sm-radius); padding: 24px; background: #fff; position: sticky; top: calc(var(--sm-header-h, 161px) + 20px); }
.sm-sum-title { font-weight: 800; font-size: 1.05rem; color: var(--sm-ink); margin-bottom: 16px; }
.sm-sum .row-line { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: .92rem; color: var(--sm-text-2); }
.sm-sum .row-line > span:last-child { color: var(--sm-ink); font-weight: 600; }
.sm-sum .total { border-top: 1px solid var(--sm-line); padding-top: 16px; margin-top: 8px; margin-bottom: 0; align-items: baseline; }
.sm-sum .total > span:first-child { color: var(--sm-ink); font-weight: 700; }
.sm-sum .total > span:last-child { font-weight: 800; font-size: 1.6rem; letter-spacing: -0.04em; color: var(--sm-accent); }
.sm-sum .row-line .sm-minus, .sm-minus { color: var(--sm-accent); }
.sm-sum .btn-lg { height: 56px; }
.sm-table { margin: 0; }
.sm-table > :not(caption) > * > * { padding: 16px 8px; border-color: var(--sm-line); }
.sm-table thead th { font-size: .8rem; font-weight: 600; color: var(--sm-muted); background: var(--sm-soft-2); border-top: 1px solid var(--sm-ink); }
.sm-table td, .sm-table th { vertical-align: middle; }
.sm-table tr:last-child td { border-bottom: 0; }
.sm-itemthumb { width: 88px; height: 88px; object-fit: cover; border-radius: var(--sm-radius-sm); background: var(--sm-soft); display: block; }
.sm-steps { display: flex; gap: 8px; align-items: center; font-size: .86rem; color: #A0A0A0; flex-wrap: wrap; margin: 0; padding: 0; }
.sm-steps li { display: flex; align-items: center; gap: 6px; list-style: none; }
.sm-steps .n { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; font-size: .74rem; font-weight: 700; background: var(--sm-soft); color: #A0A0A0; }
.sm-steps .done { color: var(--sm-text-2); }
.sm-steps .done .n { background: #D6D6D6; color: #fff; }
.sm-steps .on { color: var(--sm-ink); font-weight: 800; }
.sm-steps .on .n { background: var(--sm-ink); color: #fff; }
.sm-steps .sep { width: 10px; height: 10px; background: none; border-top: 1.5px solid #C8C8C8; border-right: 1.5px solid #C8C8C8; transform: rotate(45deg); margin: 0 4px; }
.sm-agree { display: block; font-size: .86rem; color: var(--sm-text-2); margin-bottom: 12px; line-height: 1.55; }
.sm-cart-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 2px solid var(--sm-ink); font-size: .9rem; font-weight: 600; }
.sm-cart-line { display: grid; grid-template-columns: 24px 88px minmax(0,1fr) auto auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--sm-line); }
.sm-cart-line .nm { font-weight: 600; color: var(--sm-ink); }
.sm-cart-line .opt { font-size: .84rem; color: var(--sm-muted); margin-top: 2px; }
.sm-cart-line .up { font-size: .84rem; color: var(--sm-text-2); margin-top: 4px; }
.sm-cart-line .lt { font-size: 1.05rem; font-weight: 800; color: var(--sm-ink); white-space: nowrap; min-width: 100px; text-align: right; }
.sm-qtyform { display: flex; gap: 6px; }
.sm-qtyform input { width: 64px; }
.sm-complete { text-align: center; padding: 48px 0 32px; }
.sm-complete .ic { width: 72px; height: 72px; border-radius: 50%; background: var(--sm-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 18px; }
.sm-complete .no { display: inline-block; margin-top: 14px; padding: 8px 16px; border: 1px solid var(--sm-line-2); border-radius: var(--sm-radius-sm); font-weight: 700; color: var(--sm-ink); }
.sm-paytotal { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 24px; border: 2px solid var(--sm-ink); border-radius: var(--sm-radius); margin-bottom: 16px; }
.sm-paytotal b { font-size: 1.6rem; font-weight: 800; color: var(--sm-accent); letter-spacing: -0.04em; }

/* ── 결제 수단·입금 안내 ─────────────────────────────── */
.sm-pay { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--sm-line); border-radius: var(--sm-radius-sm); margin-bottom: 8px; cursor: pointer; }
.sm-pay:has(input:checked) { border-color: var(--sm-ink); background: var(--sm-soft-2); }
.sm-pay input { margin-top: 3px; }
.sm-pay b { display: block; font-size: .95rem; color: var(--sm-ink); }
.sm-pay em { font-style: normal; font-size: .82rem; color: var(--sm-muted); }
.sm-banklist { list-style: none; margin: 0 0 10px; padding: 12px 14px; background: var(--sm-soft); border-radius: var(--sm-radius-sm); font-size: .88rem; }
.sm-banklist li + li { margin-top: 4px; }
/* 결제수단 버튼 — 영카트 주문서의 결제수단 선택(od_settle_case)에 해당하는 격자 */
.sm-paygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.sm-paybtn { margin: 0; cursor: pointer; }
.sm-paybtn input { position: absolute; opacity: 0; width: 0; height: 0; }
.sm-paybtn-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 84px; padding: 10px 6px; border: 1px solid var(--sm-line-2); border-radius: var(--sm-radius-sm);
  font-size: .86rem; font-weight: 600; color: var(--sm-text-2); text-align: center; line-height: 1.3;
  transition: border-color .12s, background-color .12s, color .12s; }
.sm-paybtn:hover .sm-paybtn-face { border-color: var(--sm-ink); }
.sm-paybtn input:checked + .sm-paybtn-face { border-color: var(--sm-ink); background: var(--sm-ink); color: #fff; }
.sm-paybtn input:focus-visible + .sm-paybtn-face { outline: 2px solid var(--sm-accent); outline-offset: 2px; }
/* 아이콘은 글꼴·이미지 없이 현재 글자색을 쓰는 인라인 SVG 마스크 — 강조색이 바뀌어도 같이 따라간다. */
.sm-payicon { width: 26px; height: 26px; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.sm-payicon-card { -webkit-mask-image: var(--sm-ico-card); mask-image: var(--sm-ico-card); }
.sm-payicon-easy { -webkit-mask-image: var(--sm-ico-easy); mask-image: var(--sm-ico-easy); }
.sm-payicon-transfer { -webkit-mask-image: var(--sm-ico-transfer); mask-image: var(--sm-ico-transfer); }
.sm-payicon-vbank { -webkit-mask-image: var(--sm-ico-vbank); mask-image: var(--sm-ico-vbank); }
.sm-payicon-bank { -webkit-mask-image: var(--sm-ico-bank); mask-image: var(--sm-ico-bank); }
/* 현금영수증 — 신청 안 함 / 소득공제용 / 지출증빙용 */
.sm-cashopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sm-cashopt { margin: 0; cursor: pointer; }
.sm-cashopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.sm-cashopt span { display: block; padding: 10px 4px; border: 1px solid var(--sm-line-2); border-radius: var(--sm-radius-sm);
  font-size: .84rem; font-weight: 600; color: var(--sm-text-2); text-align: center; }
.sm-cashopt input:checked + span { border-color: var(--sm-ink); background: var(--sm-ink); color: #fff; }
.sm-cashopt input:focus-visible + span { outline: 2px solid var(--sm-accent); outline-offset: 2px; }
.sm-deposit { border: 2px solid var(--sm-ink); border-radius: var(--sm-radius); padding: 22px 24px; margin-bottom: 20px; text-align: left; }
.sm-deposit .acct, .sm-deposit .acct-list { margin: 10px 0 0; font-size: 1.1rem; font-weight: 700; color: var(--sm-ink); list-style: none; padding: 0; }
.sm-deposit .acct-list li + li { margin-top: 4px; }
.sm-deposit .amt { margin-top: 8px; font-size: 1.5rem; font-weight: 800; color: var(--sm-accent); letter-spacing: -0.04em; }
.sm-deposit .small { color: var(--sm-muted); margin-top: 6px; }

/* ── 마이페이지·회원 ──────────────────────────────────── */
.sm-mylayout { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 48px; align-items: start; margin-top: 16px; }
.sm-mynav { position: sticky; top: calc(var(--sm-header-h, 161px) + 24px); }
.sm-mynav .ttl { font-size: 1.4rem; font-weight: 800; color: var(--sm-ink); letter-spacing: -0.04em; margin-bottom: 14px; }
.sm-mynav a { display: block; padding: 9px 0; color: var(--sm-muted); font-weight: 500; }
.sm-mynav a.active { color: var(--sm-ink); font-weight: 800; }
.sm-mynav a:hover { color: var(--sm-ink); }
.sm-profile { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); background: var(--sm-ink); color: #fff; border-radius: var(--sm-radius); overflow: hidden; margin-bottom: 32px; }
.sm-profile > * { padding: 26px 24px; }
.sm-profile > * + * { border-left: 1px solid rgba(255,255,255,.12); }
.sm-profile .lbl { font-size: .8rem; color: rgba(255,255,255,.66); margin-bottom: 6px; }
.sm-profile .val { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; }
.sm-profile .val small { font-size: .9rem; font-weight: 600; margin-left: 2px; }
.sm-profile a { color: #fff; }
.sm-profile a:hover { color: #fff; background: #222; }
.sm-profile .grade { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 3px; background: var(--sm-accent); color: var(--sm-on-accent); margin-left: 6px; vertical-align: 3px; }
.sm-profile .note { font-size: .8rem; color: rgba(255,255,255,.66); margin-top: 6px; }
.sm-flow { list-style: none; margin: 0 0 40px; padding: 24px 0; border: 1px solid var(--sm-line); border-radius: var(--sm-radius); display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); }
.sm-flow li + li { border-left: 1px solid var(--sm-line); }
.sm-flow a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .86rem; color: var(--sm-muted); }
.sm-flow b { font-size: 1.9rem; line-height: 1.1; font-weight: 800; color: #C8C8C8; }
.sm-flow .has b { color: var(--sm-accent); }
.sm-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sm-subhead h2 { font-size: 1.15rem; font-weight: 800; color: var(--sm-ink); margin: 0; }
.sm-subhead a, .sm-subhead span { font-size: .84rem; color: var(--sm-muted); }
.sm-auth { max-width: 420px; margin: 40px auto 0; }
.sm-auth h1 { text-align: center; margin-bottom: 24px; }
.sm-auth .form-control { height: 52px; }
.sm-auth .btn-lg { height: 54px; }
.sm-auth-perk { text-align: center; margin: -8px 0 24px; padding: 10px; background: var(--sm-accent-soft); color: var(--sm-accent); border-radius: var(--sm-radius-sm); font-size: .88rem; }
.sm-auth-perk b { color: var(--sm-accent); }
.sm-auth-links { display: flex; justify-content: center; gap: 16px; font-size: .86rem; color: var(--sm-muted); margin-top: 18px; }
.sm-auth-links a + a::before { content: ''; display: inline-block; width: 1px; height: 10px; background: var(--sm-line-2); margin-right: 16px; }
/* 매거진 스킨의 좌우 분할 로그인을 이 스킨에서 쓰면 한 칸으로 */
.sm-authsplit { display: block; }
.sm-authside { display: none; }
.sm-agreebox { border: 1px solid var(--sm-line); border-radius: var(--sm-radius-sm); padding: 16px; font-size: .88rem; }
.sm-agreebox label { display: block; padding: 4px 0; }
/* 약관·개인정보 동의(member/_agree.html, 주문서 비회원 동의) — 전문은 접었다 펴는 상자 안에서 스크롤 */
.sm-agree-all { font-weight: 700; color: var(--sm-ink); padding: 0 0 6px !important; }
.sm-agree-note { font-size: .8rem; color: var(--sm-muted); margin: 0 0 4px; }
.sm-agree-item { border-top: 1px solid var(--sm-line); padding: 8px 0 4px; }
.sm-agree-item .req, .sm-agree .req { color: var(--sm-accent); font-weight: 600; }
.sm-agree-item .opt { color: var(--sm-muted); font-weight: 600; }
.sm-agree-doc > summary { font-size: .8rem; color: var(--sm-muted); cursor: pointer; margin: 0 0 6px 22px; width: fit-content; }
.sm-agree-doc[open] > summary { color: var(--sm-ink); }
.sm-agree-scroll { max-height: 240px; overflow: auto; background: var(--sm-surface); border: 1px solid var(--sm-line); border-radius: var(--sm-radius-sm);
  padding: 12px 14px; margin-bottom: 6px; font-size: .8rem; line-height: 1.65; color: var(--sm-text-2); }
.sm-agree-scroll .sm-legal h2 { font-size: .92rem; margin-top: 18px; }
.sm-agree-scroll .sm-legal h3 { font-size: .84rem; margin-top: 12px; }
/* 약관·처리방침 본문(pages/_terms_body.html, _privacy_body.html) */
.sm-legal { font-size: .92rem; line-height: 1.75; color: var(--sm-text); word-break: keep-all; overflow-wrap: anywhere; }
.sm-legal h2 { font-size: 1.1rem; font-weight: 700; color: var(--sm-ink); margin: 36px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sm-line); }
.sm-legal h3 { font-size: .98rem; font-weight: 700; color: var(--sm-ink); margin: 22px 0 6px; scroll-margin-top: calc(var(--sm-header-h, 0px) + 16px); }
.sm-legal ol, .sm-legal ul { padding-left: 1.3em; margin-bottom: 10px; }
.sm-legal li { margin-bottom: 4px; }
.sm-legal-toc { background: var(--sm-soft); border-radius: var(--sm-radius-sm); padding: 14px 18px; margin: 16px 0 8px; font-size: .88rem; }
.sm-legal-toc ol { margin: 6px 0 0; columns: 2; column-gap: 24px; }
.sm-legal-toc a { color: var(--sm-text-2); text-decoration: none; }
.sm-legal-toc a:hover { color: var(--sm-ink); text-decoration: underline; }
.sm-legal-table { font-size: .84rem; margin-bottom: 12px; --bs-table-bg: transparent; }
.sm-legal-table th, .sm-legal-table td { border: 1px solid var(--sm-line); padding: 8px 10px; vertical-align: top; }
.sm-legal-table thead th { background: var(--sm-soft); color: var(--sm-ink); white-space: nowrap; }
.sm-legal-table tbody th { font-weight: 600; color: var(--sm-ink); min-width: 110px; }
@media (max-width: 575.98px) { .sm-legal-toc ol { columns: 1; } }

/* ── 소셜 로그인 ──────────────────────────────────────── */
.sm-social { display: grid; gap: 8px; margin-top: 28px; }
.sm-social-ttl { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--sm-muted); margin-bottom: 2px; }
.sm-social-ttl::before, .sm-social-ttl::after { content: ''; flex: 1; height: 1px; background: var(--sm-line); }
.sm-social .sc { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px;
  border-radius: var(--sm-radius-sm); border: 1px solid transparent; font-size: .95rem; font-weight: 700; }
.sm-social .sc:hover { filter: brightness(.96); }
.sm-social .sc i { font-size: 1.05rem; }
.sm-social .sc-naver { background: var(--sm-naver); color: #fff; }
.sm-social .sc-naver:hover { color: #fff; }
.sm-social .sc-kakao { background: var(--sm-kakao); color: var(--sm-kakao-ink); }
.sm-social .sc-kakao:hover { color: var(--sm-kakao-ink); }
.sm-social .sc-google { background: #fff; color: var(--sm-ink); border-color: var(--sm-line-2); }
.sm-social .sc-google:hover { color: var(--sm-ink); background: var(--sm-soft-2); }
.sm-or { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--sm-muted); margin: 22px 0 14px; }
.sm-or::before, .sm-or::after { content: ''; flex: 1; height: 1px; background: var(--sm-line); }
.sm-social-from { font-size: .92rem; color: var(--sm-text-2); text-align: center; margin: -12px 0 20px; }
.sm-linked { list-style: none; padding: 0; margin: 0; }
.sm-linked li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--sm-line); }
.sm-linked li:first-child { border-top: 0; }
.sm-linked .nm { font-weight: 600; min-width: 64px; }
.sm-linked form, .sm-linked a { margin-left: auto; }

/* ── 상태 배지 ────────────────────────────────────────── */
.sm-status { display: inline-block; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 3px; background: var(--sm-soft); color: var(--sm-text-2); white-space: nowrap; }
.sm-status.paid, .sm-status.preparing { background: #EEF2FF; color: #3730A3; }
.sm-status.shipping, .sm-status.delivered { background: #E8F5EE; color: #0F6B44; }
.sm-status.completed { background: var(--sm-soft); color: var(--sm-ink); }
.sm-status.canceled, .sm-status.returned, .sm-status.failed { background: #fff; color: var(--sm-muted); box-shadow: inset 0 0 0 1px var(--sm-line-2); }
.sm-status.awaiting_deposit, .sm-status.pending { background: var(--sm-accent-soft); color: #B3200F; }
.nav-tabs { --bs-nav-tabs-border-color: var(--sm-line); --bs-nav-tabs-link-active-border-color: transparent transparent var(--sm-ink); }
.nav-tabs .nav-link { color: var(--sm-muted); border: 0; border-bottom: 2px solid transparent; font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--sm-ink); border-bottom-color: var(--sm-ink); }

/* ── 하단 ─────────────────────────────────────────────── */
.sm-footer { background: var(--sm-soft-2); border-top: 1px solid var(--sm-line); color: var(--sm-muted); font-size: .8rem; line-height: 1.75; }
.sm-footer-links { display: flex; gap: 24px; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--sm-line); font-size: .86rem; }
.sm-footer-links a { color: var(--sm-text-2); font-weight: 500; }
.sm-footer-links a.strong { color: var(--sm-ink); font-weight: 800; }
.sm-footer-top { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 40px; padding: 32px 0 20px; }
.sm-footer h2 { font-size: .86rem; font-weight: 700; color: var(--sm-ink); margin: 0 0 8px; }
.sm-footer .cs { font-size: 1.6rem; font-weight: 800; color: var(--sm-ink); letter-spacing: -0.03em; line-height: 1.3; margin-bottom: 4px; }
.sm-footer .cs a { color: var(--sm-ink); }
.sm-footer-biz span + span::before { content: '|'; color: var(--sm-line-2); margin: 0 8px; }
.sm-footer-note { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--sm-line); }
.sm-footer-copy { margin: 6px 0 0; padding-bottom: 40px; }
.sm-tabbar { display: none; }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 1199px) {
  .sm-header-row { gap: 20px; }
  .sm-main .sm-listbar + .sm-grid, .sm-mylayout .sm-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 991px) {
  .sm-grid, .sm-main .sm-listbar + .sm-grid, .sm-mylayout .sm-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sm-rail { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
  .sm-event-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm-detail { grid-template-columns: 1fr; gap: 28px; }
  .sm-buy { position: static; }
  .sm-mylayout { grid-template-columns: 1fr; gap: 16px; }
  .sm-mynav { position: static; display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--sm-line); }
  .sm-mynav .ttl { display: none; }
  .sm-mynav a { padding: 10px 12px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .sm-mynav a.active { border-bottom-color: var(--sm-ink); }
  .sm-footer-top { grid-template-columns: 1fr 1fr; }
  .sm-footer-top > :last-child { grid-column: span 2; }
  .sm-sum { position: static; }
  .sm-hero > .sm-hero-stack { right: 24px; transform: translateY(-50%) scale(.75); transform-origin: right center; }
  .sm-hero > * { max-width: 440px; }
}
@media (max-width: 767px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .sm-notice { font-size: .78rem; padding: 8px 12px; }
  .sm-topbar { display: none; }
  .sm-header-row { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .sm-logo { font-size: 1.4rem; }
  .sm-util { margin-left: auto; gap: 0; }
  .sm-util a { min-width: 44px; height: 44px; }
  .sm-util .lbl { display: none; }
  .sm-util a:first-child, .sm-util a:nth-child(2) { display: none; }
  .sm-cart-count { right: 2px; }
  .sm-search { order: 3; flex: 1 1 100%; margin: 0; }
  .sm-search input { height: 44px; border-width: 1.5px; background: var(--sm-soft); border-color: var(--sm-soft); }
  .sm-navrow .container { height: 44px; gap: 18px; }
  .sm-allcat { display: none; }
  .sm-catbar { gap: 20px; }
  .sm-catbar a { height: 44px; font-size: .92rem; }
  .sm-main { padding: 12px 0 64px; }
  .sm-h1 { font-size: 1.45rem; }
  .sm-slider { margin: 0 -16px; border-radius: 0; }
  .sm-slides { aspect-ratio: 1 / 1; }
  .sm-slide-text { padding: 32px 24px; justify-content: flex-end; }
  .sm-slide-text b { font-size: 1.75rem; }
  .sm-slide-ctrl { right: 12px; bottom: 12px; height: 28px; font-size: .74rem; }
  .sm-slide-ctrl button { display: none; }
  .sm-hero { margin: 0 -16px; border-radius: 0; padding: 196px 24px 36px; min-height: 0; justify-content: flex-end; }
  .sm-hero > .sm-hero-stack { top: 20px; right: 12px; transform: scale(.5); transform-origin: top right; }
  .sm-hero h1 { font-size: 1.9rem; }
  .sm-hero p { font-size: .92rem; }
  .sm-quick { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px 4px; margin-top: 24px; }
  .sm-quick a { width: auto; font-size: .74rem; gap: 6px; }
  .sm-quick i { width: 52px; height: 52px; border-radius: 18px; font-size: 1.35rem; }
  .sm-quick .sm-quick-txt { font-size: .82rem; }
  .sm-perks { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 20px -16px 0; padding: 0 16px; }
  .sm-perks li { flex-shrink: 0; height: 36px; font-size: .8rem; }
  .sm-section { margin-top: 48px; }
  .sm-section-head { margin-bottom: 14px; }
  .sm-section-head h2 { font-size: 1.2rem; }
  .sm-steps { gap: 6px; flex-wrap: nowrap; }
  .sm-steps li:not(.on) .t { display: none; }
  .sm-event-grid { grid-template-columns: 1fr; gap: 20px; }
  .sm-grid, .sm-main .sm-listbar + .sm-grid, .sm-mylayout .sm-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 10px; }
  .sm-rail { grid-auto-columns: 42%; gap: 10px; margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; }
  .sm-rail-nav button { display: none; }
  .sm-name { font-size: .84rem; }
  .sm-price em, .sm-price b { font-size: .98rem; }
  .sm-buy h1 { font-size: 1.3rem; }
  .sm-price.big b, .sm-price.big em { font-size: 1.5rem; }
  .sm-gallery { margin: 0 -16px; }
  .sm-gallery #mainImg { border-radius: 0; }
  .sm-thumbs { padding: 0 16px; flex-wrap: nowrap; overflow-x: auto; }
  .sm-tabs { margin-top: 40px; }
  .sm-tabs button { height: 48px; font-size: .86rem; }
  .sm-box, .sm-sum { padding: 18px; }
  .sm-cart-line { grid-template-columns: 24px 72px minmax(0,1fr); gap: 12px; }
  .sm-cart-line .sm-itemthumb { width: 72px; height: 72px; }
  .sm-cart-line .sm-qtyform, .sm-cart-line .lt { grid-column: 3; }
  .sm-cart-line .lt { text-align: left; }
  .sm-paygrid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sm-profile { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sm-profile > :first-child { grid-column: 1 / -1; border-bottom: 1px solid rgba(255,255,255,.12); }
  .sm-profile > :nth-child(2) { border-left: 0; }
  .sm-profile > * { padding: 18px; }
  .sm-profile .val { font-size: 1.25rem; }
  .sm-flow { padding: 16px 0; }
  .sm-flow b { font-size: 1.4rem; }
  .sm-flow a { font-size: .72rem; }
  .sm-footer-top { grid-template-columns: 1fr; gap: 20px; }
  .sm-footer-top > :last-child { grid-column: auto; }
  .sm-footer-copy { padding-bottom: 24px; }
  .sm-order-table thead { display: none; }
  .sm-order-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--sm-line); }
  .sm-order-table td { padding: 0 !important; border: 0 !important; }
  .sm-order-table .c-name { grid-column: 1 / -1; font-weight: 600; color: var(--sm-ink); }
  .sm-order-table .c-date { font-size: .8rem; color: var(--sm-muted); }
  /* 화면 아래 탭 막대 — 상품 상세(구매 버튼이 아래 고정)에서는 숨긴다 */
  .sm-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--sm-line); padding-bottom: env(safe-area-inset-bottom); }
  .sm-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 56px; font-size: .68rem; color: var(--sm-muted); }
  .sm-tabbar a i { font-size: 1.3rem; line-height: 1; }
  .sm-tabbar a.on { color: var(--sm-ink); font-weight: 700; }
  body { padding-bottom: 56px; }
  body.sm-has-mbar .sm-tabbar { display: none; }
  /* 상품 상세: 구매 버튼을 화면 아래에 고정 */
  .sm-has-mbar .sm-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sm-line); box-shadow: 0 -8px 24px rgba(0,0,0,.06); }
  .sm-has-mbar .sm-actions .btn { height: 50px; }
  .sm-has-mbar .sm-actions .sm-wish-btn { flex: 0 0 50px; }
  body.sm-has-mbar { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-thumb img, .sm-event-img img, .sm-quick i { transition: none; }
  .sm-card:hover .sm-thumb img, .sm-event:hover .sm-event-img img { transform: none; }
}

/* 짧은 알림(목록에서 바로 담기 등, shop.js smToast) */
.sm-toast { position: fixed; left: 50%; bottom: 32px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: 999px; background: var(--sm-ink); color: #fff;
  font-size: .9rem; font-weight: 600; box-shadow: 0 12px 32px rgba(0,0,0,.18); transition: opacity .2s, transform .2s; }
.sm-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sm-toast a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
@media (max-width: 767px) { .sm-toast { bottom: 76px; } }
@media (prefers-reduced-motion: reduce) { .sm-toast { transition: none; } }

/* ── 움직임(마켓) — 빠르고 경쾌하게. 공통 움직임은 css/motion.css ───────────── */
:root { --sm-dur: .5s; --sm-rise: 18px; --sm-stagger: 55ms; }
@media (prefers-reduced-motion: no-preference) {
  .sm-notice { animation: sm-fade-in .6s ease both; }
  /* 메인 배너 오른쪽 카드 — 겹쳐 있다가 부채꼴로 펼쳐지고, 가운데 카드는 천천히 떠 있다 */
  @keyframes mk-fan-l { from { rotate: 8deg; translate: 105px 30px; } to { rotate: 0deg; translate: 0 0; } }
  @keyframes mk-fan-r { from { rotate: -8deg; translate: -105px 30px; } to { rotate: 0deg; translate: 0 0; } }
  @keyframes mk-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
  @keyframes mk-drop { 0% { opacity: 0; translate: 0 -36px; } 60% { opacity: 1; translate: 0 5px; } 100% { opacity: 1; translate: 0 0; } }
  .sm-hero-stack .c1 { animation: mk-fan-l .9s var(--sm-ease-spring) .45s both; }
  .sm-hero-stack .c3 { animation: mk-fan-r .9s var(--sm-ease-spring) .45s both; }
  .sm-hero-stack .c2 { animation: mk-float 5s ease-in-out 1.4s infinite; }
  .sm-hero-stack .tag { animation: mk-drop .6s var(--sm-ease) 1.1s both; }
  /* 순위 번호 — 카드가 나타난 뒤 톡 */
  .sm-reveal .sm-rank { opacity: 0; scale: .3; transition: opacity .2s, scale .45s var(--sm-ease-spring); transition-delay: calc(var(--i, 0) * var(--sm-stagger) + .3s); }
  .sm-reveal.is-in .sm-rank { opacity: 1; scale: 1; }
  /* 바로가기 아이콘 — 올리면 살짝 흔들 */
  @keyframes mk-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 75% { rotate: 9deg; } }
  .sm-quick a:hover i { animation: mk-wiggle .45s ease-in-out; }
  /* 카드 하트·혜택 칩 */
  .sm-card-wish { transition: scale .15s var(--sm-ease); }
  .sm-card-wish:hover { scale: 1.12; }
  .sm-perks li { transition: border-color .15s, translate .2s var(--sm-ease); }
  .sm-perks li:hover { border-color: var(--sm-ink); translate: 0 -2px; }
  .sm-tabbar a.on i { animation: sm-pop .4s var(--sm-ease-spring); }
}