/* 홈만 이 폰트를 불러오고 있어서 장바구니·가입이 시스템 폰트로 떨어졌다. 여기서 같이 부른다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

/* ★색은 밝은 톤 하나로 간다(2026-08-23). 전에는 홈·상세만 흰색 고정이고
   장바구니·결제만 다크로 갈려서, 같은 몰인데 화면마다 배경이 달랐다.

   몰 공용 껍데기. 홈·장바구니·가입·결제가 같은 머리와 같은 색을 쓴다.
   전에는 화면마다 머리가 달라서 장바구니를 누르면 메뉴가 통째로 사라졌다.
   ★색은 어느 안에서 들어왔는지에 따라 갈린다 — data-skin="a"(브랜드형) / "b"(판매형) */

:root[data-skin="a"]{
  --sh-bg:#f7f5ee; --sh-head:#f7f5ee; --sh-ink:#1b1a18; --sh-muted:#77726a;
  --sh-rule:#e3ded3; --sh-pt:#ac6152; --sh-hot:#ac6152; --sh-band:0;
}
:root[data-skin="b"]{
  --sh-bg:#fff; --sh-head:#fff; --sh-ink:#191919; --sh-muted:#7a7a7a;
  --sh-rule:#eee; --sh-pt:#1b4ed8; --sh-hot:#e02b20; --sh-band:1;
}
.sh-band{background:var(--sh-hot);color:#fff;text-align:center;font-size:12.5px;font-weight:700;padding:10px}
.sh-head{border-bottom:1px solid var(--sh-rule);position:sticky;top:0;background:var(--sh-head);z-index:20}
.sh-in{max-width:1140px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:18px}
.sh-logo{font-weight:800;letter-spacing:-.03em;font-size:17px;color:var(--sh-ink);text-decoration:none;flex:none}
.sh-nav{display:flex;gap:17px;font-size:14px;font-weight:700}
.sh-nav a{color:var(--sh-ink);text-decoration:none}
.sh-nav a:hover{color:var(--sh-hot)}
.sh-nav a.hot{color:var(--sh-hot)}
.sh-util{margin-left:auto;display:flex;gap:12px;font-size:12.5px;color:var(--sh-muted);white-space:nowrap}
.sh-util a{color:inherit;text-decoration:none}
.sh-util a:hover{color:var(--sh-ink)}
.sh-util b{font-variant-numeric:tabular-nums}
.sh-head a:focus-visible{outline:2px solid var(--sh-pt);outline-offset:2px}
/* 좁은 화면에서는 로고와 겹치니 메뉴를 접는다 */
/* ★좁은 화면에서 메뉴를 통째로 숨기면 하위 화면에서 분류로 갈 길이 없어진다.
   숨기지 말고 가로로 밀어 보게 한다. */
@media(max-width:820px){
  .sh-in{gap:10px;padding:12px 16px;flex-wrap:wrap}
  .sh-nav{order:3;width:100%;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;scrollbar-width:none}
  .sh-nav::-webkit-scrollbar{display:none}
  .sh-nav a{white-space:nowrap;font-size:13.5px}
}

/* ── 하위 화면이 쓰던 옛 이름들을 여기에 잇는다 ─────────────────────
   전에는 화면마다 :root 색을 따로 들고 있어서 장바구니·가입이 다른 사이트로 보였다.
   ★특히 --accent 가 ODEAL 주황(#E8380D)이었다. 색은 이제 여기서만 정한다. */
:root[data-skin]{
  --page:var(--sh-bg); --paper:var(--sh-bg);
  --ink:var(--sh-ink); --ink-2:var(--sh-muted); --ink-3:var(--sh-muted); --muted:var(--sh-muted);
  --line:var(--sh-rule); --line-2:var(--sh-rule); --rule:var(--sh-rule);
  --accent:var(--sh-hot); --pt:var(--sh-pt);
  --kakao:#FEE500; --bad:#C4271A; --ok:#0E7C4A;
}
:root[data-skin="a"]{ --surface:#fff; --accent-soft:#f1e6e2 }
:root[data-skin="b"]{ --surface:#fff; --accent-soft:#FDECE7 }
/* ── 글자체는 홈과 같은 것 하나로 ────────────────────────────────
   전에는 홈이 Pretendard, 장바구니가 시스템 폰트라 글씨가 달라 보였다. */
html[data-skin] body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
    'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  line-height:1.6;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  background:var(--sh-bg);
  color:var(--sh-ink);
}

/* 손가락으로 누를 자리를 넓힌다. 글씨는 그대로 두고 눌리는 범위만 키운다.
   실측: 헤더 로그인·장바구니가 20px, 푸터 법정링크가 13px 높이였다(권장 최소 44px). */
.sh-util a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
@media(max-width:820px){ .sh-in{padding:6px 16px} }