/*
 * [09SCM 운영 가이드] 상용 테마(sitmt)를 물려받은 우리링크 테마의 본 스타일시트(4,112행)다. 맨 위 :root
 *   의 --wl-* 브랜드 변수와 --sitmt-* 호환 이름, 옛 고정폭 RESET, 헤더·히어로·홈 섹션·상품 카드·상세
 *   본문, CONCEPT 벤치마크 덮어쓰기, 전역 가운데 칸, 전역 브랜드색 오버라이드, 날짜별 요청 조정 묶음, 브랜드
 *   컴포넌트(로고·히어로·영업시간·카테고리·타임세일·공동구매 안내·푸터), 헤더 대비, 매장정보 띠 순으로 쌓여 있다.
 *   2026-10-07 목업 정합 이후 손님 헤더·메인은 mall-mock.css 의 목업 class 로 그려지므로
 *   sitmt-*·wl-hero 계열 상당수는 현재 마크업이 내지 않는다.
 * ■ 주요 함수·구역
 *   · :root — 브랜드 색
 *     --wl-primary·--wl-primary-dark·--wl-primary-ink·--wl-primary-soft·--wl-accent
 *     와 --sitmt-* 호환 이름
 *   · #container — RESET — default.css 의 float:left·930px 고정폭을 풀어 푸터가 옆에
 *     붙지 않게 한다
 *   · #container.sitmt-container — 전역 가운데 칸 최대폭 1280px(메인 is-index
 *     1340px) — mall-live.css 가 메인·목록·상세는 풀폭으로 덮는다
 *   · .btn_submit — 전역 브랜드색 오버라이드 — 그누보드 파랑 버튼·강조를 --wl-primary
 *     로(!important)
 *   · #sit_ov_wrap — 상품 상세 평면·가운데 정렬(CONCEPT 벤치마크)
 *   · .wl-nodel — 배송 불가(픽업 전용) 배지 SHOP-07
 *   · .wl-soldout — 품절 표식·할인율(.wl-price-rate)·장바구니 탭(.wl-cart-tab) 옛 판
 *   · .wl-storeinfo — 옛 매장정보 띠(IA v1.2 S-004) — 현재 메인은 mall-mock.css 의
 *     .store-information 을 쓴다
 * ■ 고쳐도 되는 것
 *   브랜드 색 변수, 본문 최대폭(1280·1340px), 전역 버튼 색, 상세 본문 조판, 배지 색, 반응형
 *     기준(1100·767·520px 등)
 * ■ 고치는 법
 *   ① 브랜드 색은 :root 의
 *     --wl-primary·--wl-primary-dark(·--wl-primary-ink·--wl-primary-soft·--wl-accent)
 *     다섯 줄만 고친다 — 나머지 규칙이 전부 이 변수를 참조한다. 손님 목업 화면의 키 색은 mall-live.css
 *     :root 의 --key-color 도 함께 바꾼다. ② --sitmt-* 이름은 바꾸지 말고 값만 --wl-* 를
 *     가리키게 둔다(상위 테마 규칙이 그 이름을 참조). ③ 고칠 규칙이 어느 구역인지 «대형 파일 구역» 표에서 찾고, 그
 *     class 를 지금 내는 마크업이 있는지 grep 으로 먼저 확인한 뒤 고친다.
 * ■ 주의
 *   실림 순서: default(_shop)·mobile(_shop) → 이 파일 → mall-mock.css →
 *     mall-live.css → checkout-mock.css. 같은 세기면 뒤의 목업 사본·mall-live.css 가
 *     이긴다. 판 번호는 head.sub.php 가 filemtime 으로 붙인다(2026-08-12 이후).
 *     wl-hero·sitmt-hero·wl-catnav·wl-timesale·wl-storeinfo·sitmt-topband·sitmt-parallax
 *     를 그리는 PHP·JS 는 2026-10-07 저장소에 없다 — 그 규칙을 고쳐도 손님 화면은 안 바뀐다. 시험 다수가
 *     이 파일을 글자로
 *     잰다(r6x_responsive_static·pc_mobile_parity_20260914·mobile_viewport_layout_20260930·order_form_aside_20260921·hero_hours_kakao).
 *   · 함께 볼 파일: theme/woorilink/head.sub.php ·
 *     theme/woorilink/css/mall-live.css ·
 *     theme/woorilink/css/mall-mock.css ·
 *     theme/woorilink/css/default_shop.css ·
 *     theme/woorilink/css/mobile_shop.css
 *   · 시험: php tools/selftest/run.php r6x_responsive_static ·
 *     pc_mobile_parity_20260914 · mobile_viewport_layout_20260930 ·
 *     order_form_aside_20260921 · hero_hours_kakao ·
 *     retail_mobile_ux_20260913
 *   · 전체 표: docs/guide/09SCM_운영·수정가이드_20261007.xlsx (python tools/docs/make_ui_edit_guide.py 로 다시 만든다)
 */
/* 웹폰트 CDN @import 는 D21(2026-08-25) 로 걷었다 — 스택의 Noto Sans KR·sans-serif 폴백으로 내려앉는다. */

:root {
    /* ── 우리링크 브랜드 색. 색을 바꿀 일이 생기면 여기 다섯 줄만 고친다. ──
       공동구매몰 관례대로 붉은 주황 계열이다(할인·특가를 밀어야 하는 화면이라
       채도가 높은 경고색이 오히려 맞다). 나머지 CSS 는 전부 이 변수를 참조한다. */
    --wl-primary: #f26b1d;        /* 주 색 — 버튼 바탕·활성 상태 */
    --wl-primary-dark: #d1550f;   /* 보조 — hover/pressed, 색면 위 강조 */
    /* 밝은 바탕 위의 작은 글자용. 주 색은 흰 바탕 3.0451:1, 보조 색은 4.1855:1 이라
       11~16px 글자에 그대로 쓰면 읽기 어렵다(WCAG AA 는 4.5:1). 이 색은 흰 바탕
       5.2892:1, --wl-primary-soft 위 4.5756:1 로, 같은 계열이면서 기준을 넘는다.
       가격처럼 손님이 반드시 읽어야 하는 글자에 쓴다.
       (2026-08-18 재계산: 예전 주석의 3.2 / 6.0 / 5.5 은 실측과 어긋난 값이었다) */
    --wl-primary-ink: #b8480c;
    --wl-primary-soft: #f7ede2;   /* 주 색의 옅은 배경(뱃지 바탕 등) */
    --wl-accent: #f2913d;         /* 그라디언트 끝점 — 로고 마크·히어로 */
    --wl-ink: #1a1a1a;
    --wl-muted: #6b6b6b;
    --wl-line: #e8e2d6;
    /* 페이지 바탕과 섹션 바탕은 다른 색이다. 한때 둘 다 sand(#f7f1e8)로 두었더니
       흰 카드 뒤에 깔린 섹션 띠가 바탕과 같은 색이 되어 구역 구분이 사라졌다.
       원본 테마도 바탕은 한 단계 밝은 #fbf8f3, 섹션만 sand 다. */
    --wl-canvas: #fbf8f3;         /* 페이지 바탕 — html·body */
    --wl-sand: #f7f1e8;           /* 섹션 바탕 — 바탕 위에 얹는 띠·박스 */

    /* ── 상위 테마(48개 CSS, 28만자)가 --sitmt-* 이름을 그대로 참조한다.
       이름을 일괄 치환하면 테마 밖(루트 products.php)까지 깨지므로
       이름은 남기고 값만 우리링크 쪽을 가리키게 한다. 새로 쓰는 규칙은 --wl-* 를 쓸 것.
       ★ 아래 값은 원본 테마(theme/sitmt_theme/css/sitmt.css)와 한 글자도 다르면 안 된다.
         상위 테마의 나머지 규칙이 전부 이 이름을 참조하므로, 여기서 어긋나면
         우리가 손대지 않은 화면까지 원본과 다른 톤으로 렌더된다. */
    --sitmt-ink: var(--wl-ink);
    --sitmt-brown: #3f2a1a;
    --sitmt-orange: var(--wl-primary);
    --sitmt-orange-dark: var(--wl-primary-dark);
    --sitmt-navy: var(--wl-primary);
    --sitmt-sand: var(--wl-sand);
    --sitmt-cream: #ffffff;
    --sitmt-line: var(--wl-line);
    --sitmt-gold: var(--wl-primary);
    --sitmt-mint: var(--wl-primary-soft);
    --sitmt-shadow: 0 22px 55px rgba(26, 20, 14, 0.10);
}

html,
body {
    background: var(--wl-canvas);
    overflow-x: clip;
}

body,
button,
input,
select,
textarea {
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
    color: var(--sitmt-ink);
}

img {
    max-width: 100%;
}

body.sitmt-overlay-open {
    overflow: hidden;
}
[hidden] {
    display: none !important;
}

.sitmt-drawer[hidden],
.sitmt-search-panel[hidden] {
    display: none !important;
}

/* ── RESET: override old theme fixed-width rules ─────────────── */
#hd,
#wrapper,
#ft,
#container,
#container_wr,
#ft_wr,
#hd_wrapper,
#hd_pop,
#gnb .gnb_wrap,
#tnb .inner {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}

#wrapper {
    background: transparent !important;
    z-index: auto !important;
}

#container {
    /* default.css 가 float:left·width:930px 을 건다. 폭만 풀고 float 를 두면
       본문이 내용 폭으로 떠서 푸터가 옆에 붙는다 — auth·수령확인처럼 칸이 좁은
       화면에서 «수직이 아니라 섞여 보이는» 증상(2026-09-10 실측). */
    float: none !important;
    clear: both !important;
    min-height: 0 !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}

#container::after {
    display: none !important;
}
/* ────────────────────────────────────────────────────────────── */

.sitmt-skip {
    position: absolute;
    left: -9999px;
    top: auto;
}

.sitmt-skip:focus {
    left: 16px;
    top: 16px;
    z-index: 2000;
    padding: 12px 16px;
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--sitmt-shadow);
}

.sitmt-topband {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 38px;
    padding: 8px 20px;
    background: #111111;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.sitmt-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: var(--sitmt-orange);
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.sitmt-chrome-gap {
    display: none;
}

/* ── 2026-09-03: 가운데 칸을 `1fr` 이 아니라 `minmax(0, 1fr)` 로 ──────────
   `1fr` 은 최소 크기가 **자동**(내용 크기)이라, 분류가 많아 메뉴가 길어지면 가운데 칸이
   자기 내용만큼 부풀고 오른쪽 칸(로그인·[수령 확인]·장바구니)을 화면 밖으로 밀어낸다.
   html/body 가 `overflow-x: clip` 이라 스크롤바조차 안 생겨 **그냥 사라진다.**

   운영 실측(2026-09-03 · 1440px · 분류 13개): 가운데 칸 1,531.8px · 오른쪽 묶음이
   x=1859 에서 시작해 **419px 화면 밖** — 로그인 버튼과 [수령 확인] 이 통째로 안 보였다.
   («가맹점 진입 링크가 붙으면 1239.5px 미만에서 잘린다» 던 아래 주석의 전제가 낡았다.
   그때는 분류가 적었다. 지금은 넓은 화면에서도 넘친다.)

   `minmax(0, 1fr)` 은 그 최소를 0 으로 풀어 가운데가 **남는 만큼만** 갖게 한다.
   넘치는 분류는 아래 `.sitmt-nav ul` 의 줄바꿈이 받는다 — 잘라 내지 않는 이유는
   드롭다운(`.sitmt-nav__sub`)이 `li` 안에 절대배치라, 여기에 `overflow` 를 걸면
   하위 메뉴가 통째로 잘리기 때문이다.

   ★ 2026-09-30 — 가운데 칸이 «분류» 에서 «로고 + 몰 이름»(`.sitmt-brandbar`)으로 바뀌면서
     칸 구성을 `1fr auto 1fr` 로 돌린다. 이유는 **가운데를 진짜 가운데에 두기 위해서**다:
     `auto … auto` 는 왼쪽 칸(햄버거 44px)과 오른쪽 칸(아이콘 묶음 233px)의 폭이 달라
     가운데 칸의 한가운데가 헤더의 한가운데보다 90px 넘게 왼쪽으로 치우쳤다(실측).
     위 주석이 경고한 «가운데를 1fr 로 되돌리면 오른쪽이 밀린다» 는 **가운데에 분류가
     있을 때의 이야기**다. 지금 가운데에 있는 묶음은 `min-width: 0` + 이름 말줄임이라
     최소 기여가 0 이고, 양옆 `1fr`(최소는 auto)이 아이콘 묶음의 폭을 먼저 확보한다.
     390px 까지 실측으로 확인했다 — 아이콘이 안 밀린다. */
.sitmt-header__inner {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
    min-height: 88px;
}

/* 양옆 칸은 폭이 같아졌으니 내용은 각자 바깥쪽으로 붙인다. */
.sitmt-header__inner > .sitmt-header__left { justify-self: start; }
.sitmt-header__inner > .sitmt-actions { justify-self: end; }

.sitmt-brand {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
}

/* 로고 + 몰 이름 한 묶음. 헤더 그리드의 가운데 칸을 통째로 받아 둘을 붙여 가운데에 세운다
   (2026-09-30 사용자 지시). `min-width: 0` 이 있어야 이름의 말줄임이 산다 — 없으면
   그리드 칸의 min-content 가 이름 길이만큼 벌어져 오른쪽 아이콘이 화면 밖으로 밀린다
   (같은 이유가 `.sitmt-header__inner` 의 `minmax(0, 1fr)` 주석에 이미 적혀 있다). */
.sitmt-brandbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.sitmt-brandbar .sitmt-brand {
    flex: none;
}

/* 이름은 이 묶음에서 `.sitmt-sitename` 한 곳으로만 그린다 — 로고 안의 워드마크까지
   나오면 바로 옆에 같은 상호가 두 번 선다(붙여 놓기 전에는 화면 양끝이라 덜 보였다). */
.sitmt-brandbar .sitmt-brand .wl-logo__word {
    display: none;
}

/* 몰 이름이 곧 홈 링크다. 아래 좁은 폭 규칙이 로고 상자를 접기 때문에, 링크를 여기
   걸어 두지 않으면 **전화기에서 헤더의 홈 가는 길이 사라진다**(서랍을 열어야 나온다).
   넓은 폭에서는 보이는 것이 달라지지 않는다 — 글자색·밑줄을 물려받게 두었다. */
.sitmt-sitename > a {
    color: inherit;
    text-decoration: none;
}

/* ── 좁은 폭에서는 로고 상자를 접는다 ──────────────────────────────────
   접지 않으면 이름이 말줄임으로 **한 글자**가 된다. 2026-09-30 실브라우저 실측
   (tools/selftest/bin/mobile_viewport_browser_20260930.cjs · 375px):
     햄버거 44 + 로고상자 104.5 + 묶음간격 10 + 이름 104 + 아이콘 148
     + 그리드간격 24 + 헤더 좌우여백 32 = 466.5  >  375
   그래서 이름 칸에 25px 만 남아 「온‥」 으로 잘렸다(390px 에서는 40px · 「온마‥」).
   폰 UA·데스크톱 UA 양쪽에서 같았다 — 뷰포트 결함과 무관하게 **이미 나가고 있던**
   모양이다.

   무엇을 접을지는 셋 중 하나였다.
     · 아이콘(44px)을 줄인다 → 손가락 최소 크기(WCAG 2.5.5)를 깬다. 안 한다.
     · 이름을 접는다 → 로고를 안 올린 몰은 `.wl-logo__word` 가 위에서 숨겨져 있어
       **빈 주황 상자만** 남는다. 안 한다.
     · 로고 상자를 접는다 → 이름은 `wl_sf_brand_label()` 이 늘 값을 주므로 안전하고,
       게다가 이 몰의 로고는 70×37 짜리 **워드마크 이미지**라 옆의 이름과 같은 상호를
       두 번 보여 주고 있었다. 바로 위 주석이 막으려던 그 중복이다.
   그래서 로고를 접는다. 상자가 다시 서는 폭은 위 식으로 466.5px 이지만, 몰 이름 길이는
   몰마다 다르므로(식의 `이름 104` 이 변수다) 여유를 두어 520px 로 잡는다. */
@media (max-width: 520px) {
    .sitmt-brandbar .sitmt-brand {
        display: none;
    }
    /* 로고가 빠진 칸을 이름이 통째로 받는다. 그래도 남는 것이 없으면 말줄임이 받는다. */
    .sitmt-brandbar .sitmt-sitename {
        max-width: 100%;
    }
}

.sitmt-brand img {
    display: block;
    width: auto;
    max-height: 64px;
    object-fit: contain;
}

/* `flex-wrap: wrap` 이 넘치는 분류를 받는다(2026-09-03). 감추지 않고 아랫줄로 접는 이유:
   분류는 상점의 상품 입구라 하나가 사라지면 그 분류의 상품이 헤더에서 도달 불가가 된다.
   줄이 늘면 헤더가 높아지는데, 그것이 «분류를 너무 많이 걸었다» 는 정직한 신호다.
   `row-gap` 을 열간격보다 좁게 두어 두 줄이 한 덩어리로 읽히게 한다. */
.sitmt-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    row-gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sitmt-nav li {
    position: relative;
}

.sitmt-nav li:hover .sitmt-nav__sub,
.sitmt-nav li:focus-within .sitmt-nav__sub,
.sitmt-nav li.is-open .sitmt-nav__sub {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sitmt-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.sitmt-nav__sub {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 140px;
    padding: 12px 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--sitmt-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: 0.2s ease;
}

.sitmt-nav__sub a {
    display: block;
    min-height: auto;
    padding: 8px 0;
    font-size: 14px;
}

.sitmt-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sitmt-icon-btn,
.sitmt-icon-link {
    width: 44px;
    height: 44px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.sitmt-icon-btn:hover,
.sitmt-icon-link:hover {
    background: #fff;
    color: var(--sitmt-orange);
}

.sitmt-member-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: #111111;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

.sitmt-cart-link {
    position: relative;
}

.sitmt-cart-badge {
    position: absolute;
    right: -4px;
    top: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    background: #111111;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.sitmt-drawer-toggle {
    display: none;
}

.sitmt-search-panel {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto 18px;
}

.sitmt-search-panel form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 18px;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--sitmt-shadow);
}

.sitmt-search-panel input {
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--sitmt-line);
    border-radius: 14px;
    background: #fffdfa;
}

.sitmt-search-panel button,
.sitmt-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 14px;
    background: var(--sitmt-ink);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.sitmt-button {
    background: var(--sitmt-orange);
    letter-spacing: 0.02em;
    transition: background 0.2s ease;
}

.sitmt-button:hover {
    background: var(--sitmt-orange-dark);
}

.sitmt-nav a:hover {
    color: #111111;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.sitmt-drawer {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

.sitmt-drawer__panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(420px, calc(100% - 36px));
    padding: 22px;
    background: #fff;
    box-shadow: var(--sitmt-shadow);
    overflow-y: auto;
    z-index: 2;
}

.sitmt-drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.sitmt-drawer__head img {
    max-width: 180px;
    max-height: 42px;
    object-fit: contain;
}

.sitmt-drawer__nav ul {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.sitmt-drawer__nav > ul > li {
    padding: 18px 0;
    border-bottom: 1px solid rgba(26, 20, 14, 0.08);
}

.sitmt-drawer__nav a {
    color: var(--sitmt-ink);
    text-decoration: none;
    font-weight: 600;
}

.sitmt-drawer__nav li ul {
    margin: 12px 0 0 0;
}

.sitmt-drawer__nav li ul li {
    padding-top: 10px;
}

.sitmt-drawer__nav li ul a {
    font-size: 14px;
    font-weight: 500;
    color: rgba(26, 20, 14, 0.76);
}

.sitmt-drawer__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(8, 18, 28, 0.48);
    z-index: 1;
}

.sitmt-wrapper {
    padding-bottom: 48px;
}

.sitmt-container {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
}

.sitmt-container.is-index {
    width: min(1340px, calc(100% - 32px));
}

.sitmt-subhero {
    width: min(1280px, calc(100% - 32px));
    margin: 24px auto 0;
    padding: 26px 32px;
    border-radius: 28px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2e2013 100%);
    color: #fff;
}

.sitmt-subhero__eyebrow {
    color: rgba(255, 255, 255, 0.9);
}
.sitmt-subhero__eyebrow,
.sitmt-eyebrow {
    margin: 0 0 12px;
    color: var(--sitmt-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.sitmt-subhero h1,
.sitmt-slide__content h2,
.sitmt-section h3,
.sitmt-story__copy h3 {
    margin: 0;
    letter-spacing: -0.04em;
}

.sitmt-subhero h1 {
    font-size: clamp(28px, 3vw, 40px);
}

.sitmt-subhero p:last-child {
    margin: 10px 0 0;
    max-width: 720px;
    color: rgba(255, 255, 255, 0.82);
}

/* ── Scroll reveal (CONCEPT-style fadeInUp/fadeInDown) ───────── */
@keyframes sitmtFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sitmtFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

body.sitmt-anim [data-sitmt-reveal] {
    opacity: 0;
}

body.sitmt-anim [data-sitmt-reveal].is-revealed {
    opacity: 1;
}

body.sitmt-anim [data-sitmt-reveal="up"].is-revealed {
    animation: sitmtFadeInUp 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

body.sitmt-anim [data-sitmt-reveal="down"].is-revealed {
    animation: sitmtFadeInDown 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    body.sitmt-anim [data-sitmt-reveal] {
        opacity: 1;
        animation: none !important;
    }
}

/* ── Hero: full-bleed slider, image fits viewport width ──────── */
.sitmt-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.sitmt-hero__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 1680 / 780;
    overflow: hidden;
    background: #111111;
}

.sitmt-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.sitmt-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.sitmt-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.sitmt-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        76deg,
        rgba(17, 17, 17, 0.52) 0%,
        rgba(17, 17, 17, 0.22) 42%,
        rgba(17, 17, 17, 0) 70%
    );
}

.sitmt-slide__content {
    position: absolute;
    left: clamp(20px, 6vw, 96px);
    bottom: clamp(46px, 10%, 110px);
    z-index: 1;
    max-width: 560px;
    color: #fff;
}

.sitmt-slide__content .sitmt-eyebrow {
    color: rgba(255, 255, 255, 0.88);
}

.sitmt-slide__content h2 {
    font-size: clamp(32px, 4.6vw, 58px);
    line-height: 1.04;
}

.sitmt-slide__content p:last-of-type {
    margin: 16px 0 22px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
    line-height: 1.7;
}

.sitmt-slide.is-active .sitmt-eyebrow {
    animation: sitmtFadeInDown 0.9s ease both 0.15s;
}

.sitmt-slide.is-active h2 {
    animation: sitmtFadeInUp 0.9s ease both 0.3s;
}

.sitmt-slide.is-active p:last-of-type,
.sitmt-slide.is-active .sitmt-button {
    animation: sitmtFadeInUp 0.9s ease both 0.45s;
}

.sitmt-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 52px;
    height: 52px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.18);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.sitmt-hero__arrow:hover {
    background: #fff;
    color: var(--sitmt-ink);
}

.sitmt-hero__arrow--prev {
    left: clamp(14px, 3vw, 40px);
}

.sitmt-hero__arrow--next {
    right: clamp(14px, 3vw, 40px);
}

.sitmt-hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.sitmt-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}

.sitmt-dot.is-active {
    width: 34px;
    background: #fff;
}

/* ── Centered section titles (CONCEPT index_title_area) ──────── */
.sitmt-title-area {
    padding: clamp(48px, 7vw, 88px) 20px 30px;
    text-align: center;
}

.sitmt-title-area .sitmt-title-eyebrow {
    margin: 0 0 12px;
    color: var(--sitmt-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.sitmt-title-area h3 {
    margin: 0;
    font-size: clamp(26px, 3vw, 40px);
    letter-spacing: -0.03em;
}

.sitmt-title-area .sitmt-title-sub {
    display: block;
    margin-top: 12px;
    color: rgba(26, 20, 14, 0.45);
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

/* ── Home sections: flat + compact ───────────────────────────── */
.sitmt-section {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sitmt-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 22px;
}

.sitmt-section__head a {
    color: var(--sitmt-ink);
    font-weight: 700;
    text-decoration: none;
}

.sitmt-section h3 {
    font-size: clamp(28px, 3vw, 40px);
}

.sitmt-more {
    margin-top: 30px;
    text-align: center;
}

.sitmt-more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 30px;
    border: 1px solid var(--sitmt-ink);
    border-radius: 999px;
    color: var(--sitmt-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.sitmt-more a:hover {
    background: var(--sitmt-ink);
    color: #fff;
}

/* ── Intro highlight cards (3 boxes under hero) ──────────────── */
.sitmt-intro-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: clamp(36px, 5vw, 64px);
}

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

.sitmt-intro-card__image {
    aspect-ratio: 5 / 4;
    overflow: hidden;
}

.sitmt-intro-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.sitmt-intro-card:hover .sitmt-intro-card__image img {
    transform: scale(1.06);
}

.sitmt-intro-card__text {
    flex: 1;
    padding: 20px 22px 24px;
}

.sitmt-intro-card__text h3 {
    margin: 0 0 8px;
    font-size: 20px;
    letter-spacing: -0.02em;
}

.sitmt-intro-card__text p {
    margin: 0 0 14px;
    color: rgba(26, 20, 14, 0.7);
    font-size: 14px;
    line-height: 1.7;
}

.sitmt-intro-card__text a {
    color: var(--sitmt-orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--sitmt-orange);
    padding-bottom: 2px;
}

/* ── Story band (legacy home markup) ─────────────────────────── */
.sitmt-story {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 32px;
    align-items: center;
    margin: clamp(36px, 5vw, 64px) 0;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid var(--sitmt-line);
    border-radius: 10px;
    background: #fff;
}

.sitmt-story__copy .sitmt-eyebrow {
    color: var(--sitmt-orange);
}

.sitmt-story__copy h3 {
    margin: 0 0 12px;
    font-size: clamp(24px, 2.6vw, 34px);
    letter-spacing: -0.02em;
}

.sitmt-story__copy p:last-child {
    margin: 0;
    color: rgba(26, 20, 14, 0.72);
    line-height: 1.8;
}

.sitmt-story__points {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sitmt-story__points li {
    position: relative;
    padding-left: 20px;
    color: rgba(26, 20, 14, 0.75);
    font-size: 14px;
    line-height: 1.7;
}

.sitmt-story__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sitmt-orange);
}

.sitmt-section + .sitmt-section {
    margin-top: clamp(48px, 7vw, 88px);
}

/* ── Category banners (CONCEPT banner_area) ──────────────────── */
.sitmt-banner-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sitmt-banner {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 5 / 6;
    text-decoration: none;
}

.sitmt-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.sitmt-banner:hover img {
    transform: scale(1.06);
}

.sitmt-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0) 46%, rgba(17, 17, 17, 0.62) 100%);
}

.sitmt-banner__label {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    z-index: 1;
    color: #fff;
}

.sitmt-banner__label .sitmt-eyebrow {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.85);
}

.sitmt-banner__label strong {
    display: block;
    font-size: 24px;
    letter-spacing: -0.02em;
}

.sitmt-banner__label span {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    padding-bottom: 3px;
}

/* ── Parallax band (CONCEPT parallax-container) ──────────────── */
.sitmt-parallax {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

.sitmt-parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.5);
}

.sitmt-parallax__inner {
    position: relative;
    z-index: 1;
    max-width: 840px;
    margin: 0 auto;
    padding: clamp(72px, 10vw, 130px) 24px;
    color: #fff;
    text-align: center;
}

.sitmt-parallax__inner .sitmt-eyebrow {
    color: var(--sitmt-orange);
}

.sitmt-parallax__inner h3 {
    margin: 0;
    font-size: clamp(26px, 3.4vw, 44px);
    letter-spacing: -0.02em;
}

.sitmt-parallax__inner p {
    margin: 16px auto 0;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.8;
}

/* ── Brand points strip ──────────────────────────────────────── */
.sitmt-points {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 30px 0;
    border-top: 1px solid var(--sitmt-line);
    border-bottom: 1px solid var(--sitmt-line);
    list-style: none;
}

.sitmt-points li {
    position: relative;
    padding-left: 20px;
    color: rgba(26, 20, 14, 0.75);
    font-size: 14px;
    line-height: 1.7;
}

.sitmt-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sitmt-orange);
}

/* ── Product cards: compact CONCEPT grid ─────────────────────── */
.sct.sct_10 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sct_li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.sct_img {
    position: relative;
    padding: 0;
    border: 1px solid var(--sitmt-orange);
    border-radius: 10px 10px 0 0;
    background: #fff;
    overflow: hidden;
}

.sct_img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 9px 9px 0 0;
    transition: transform 0.6s ease;
}

.sct_li:hover .sct_img img {
    transform: scale(1.05);
}

.sct_ct_wrap {
    padding: 14px 4px 0;
    text-align: center;
}

.sct_txt a,
.sct_txt {
    color: var(--sitmt-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}

.sct_basic {
    display: none;
}

.sct_bottom {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.sct_cost {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    color: var(--sitmt-ink);
    font-size: 16px;
    font-weight: 700;
}

.sct_dict {
    color: rgba(26, 20, 14, 0.36);
    font-size: 13px;
    text-decoration: line-through;
}

.sct_btn,
.sct_op_btn,
.cart-layer,
.sit_icon_li {
    display: none !important;
}

.sct_noitem {
    margin: 0;
    padding: 42px 18px;
    border-radius: 20px;
    background: #fff;
    text-align: center;
    color: rgba(26, 20, 14, 0.6);
}

#sit_ov_wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 28px;
    align-items: start;
}

#sit_pvi,
#sit_ov,
#sit_rel,
#sit_info {
    border-radius: 28px;
}

#sit_pvi_big,
#sit_ov,
#sit_rel,
#sit_info {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--sitmt-shadow);
}

#sit_pvi_big {
    padding: 18px;
    float: none;
    position: relative;
    text-align: center;
}

#sit_pvi {
    float: none;
}

/* spv gallery: show active slide image (override skin's display:none) */
#sit_pvi_big .spv-main {
    position: relative;
}

#sit_pvi_big .spv-slide {
    display: none;
}

#sit_pvi_big .spv-slide.active {
    display: block;
}

#sit_pvi_big a.spv-img-link {
    display: block;
}

#sit_pvi_big a.spv-zoom {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 26px;
    bottom: 26px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--sitmt-ink);
    box-shadow: 0 6px 18px rgba(26, 20, 14, 0.16);
    z-index: 3;
}

#sit_pvi_big .spv-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--sitmt-ink);
    box-shadow: 0 6px 18px rgba(26, 20, 14, 0.16);
    cursor: pointer;
    z-index: 3;
}

#sit_pvi_big .spv-prev {
    left: 26px;
}

#sit_pvi_big .spv-next {
    right: 26px;
}

#sit_pvi_big .spv-counter {
    position: absolute;
    left: 26px;
    bottom: 26px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(26, 20, 14, 0.72);
    color: #fff;
    font-size: 12px;
    z-index: 3;
}

#sit_pvi_big img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.spv-thumbs {
    list-style: none;
}

.spv-thumb-btn {
    width: 100%;
    padding: 0;
    border: 1px solid var(--sitmt-line);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}

.spv-thumb-item.selected .spv-thumb-btn {
    border-color: var(--sitmt-orange);
}

.spv-thumb-btn img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 13px;
}

#sit_pvi_thumb {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 14px;
}

#sit_pvi_thumb li {
    width: auto;
    margin: 0;
}

#sit_pvi_thumb img {
    border-radius: 14px;
}

#sit_ov {
    padding: 26px;
}

#sit_title {
    font-size: clamp(30px, 3vw, 42px);
}

#sit_desc {
    margin-top: 14px;
    color: rgba(26, 20, 14, 0.74);
    line-height: 1.8;
}

.sit_info,
.sit_option,
#sit_sel_option {
    margin-top: 22px;
    padding: 20px;
    border-radius: 22px;
    background: #f9f5ee;
}

.sit_ov_tbl th,
.sit_ov_tbl td {
    padding: 12px 0;
    border-bottom: 1px solid rgba(26, 20, 14, 0.08);
}

.tr_price strong {
    font-size: 28px;
}

#sit_info {
    margin-top: 28px;
    padding: 28px;
}

#sit_tab .tab_tit {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

#sit_tab .tab_tit button {
    width: 100%;
    min-height: 54px;
    border: 1px solid rgba(26, 20, 14, 0.1);
    border-radius: 999px;
    background: #f6f2ea;
    color: var(--sitmt-ink);
    font-weight: 700;
}

#sit_tab .tab_tit button.selected {
    background: var(--sitmt-ink);
    color: #fff;
}

#sit_inf_explan {
    line-height: 1.8;
    text-align: left;
    max-width: 100%;
    overflow-x: auto;
    overflow-wrap: anywhere;
}
#sit_inf_explan img,
#sit_inf_explan video,
#sit_inf_explan iframe,
#sit_inf_explan table {
    max-width: 100%;
}
#sit_info {
    overflow-x: auto;
}

.sit_buy.fix {
    margin-top: 24px;
    position: static;
}

.sum_section {
    padding-top: 16px;
}

.sit_order_btn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sit_btn_cart,
.sit_btn_buy {
    min-height: 54px;
    border: 0;
    border-radius: 16px;
    font-weight: 700;
}

.sit_btn_cart {
    background: #ece7de;
    color: var(--sitmt-ink);
}

.sit_btn_buy {
    background: var(--sitmt-orange);
    color: #fff;
}

.sitmt-footer {
    margin-top: 36px;
    padding: 30px 0 40px;
}

.sitmt-footer__top {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 0.85fr 0.95fr;
    gap: 0;
    padding: 40px 44px;
    border-radius: 24px;
    background: var(--sitmt-orange);
    color: rgba(26, 20, 14, 0.88);
    box-shadow: inset 0 0 0 1px rgba(26, 20, 14, 0.16);
}

.sitmt-footer__brand,
.sitmt-footer__links,
.sitmt-footer__info {
    padding: 0 28px;
}

.sitmt-footer__brand {
    padding-left: 0;
}

.sitmt-footer__info {
    padding-right: 0;
}

.sitmt-footer__links,
.sitmt-footer__info {
    border-left: 1px solid rgba(26, 20, 14, 0.18);
}

.sitmt-footer__brand img {
    max-width: 190px;
    margin-bottom: 16px;
    filter: none;
}

.sitmt-footer__brand p {
    color: rgba(26, 20, 14, 0.78);
    font-size: 13px;
    line-height: 1.75;
}

.sitmt-footer__links,
.sitmt-footer__info {
    display: grid;
    gap: 12px;
    align-content: start;
}

.sitmt-footer__links a {
    color: #1a1a1a;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.sitmt-footer__links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sitmt-footer__info strong {
    color: #1a1a1a;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.sitmt-footer__info span {
    color: rgba(26, 20, 14, 0.72);
    font-size: 13px;
    line-height: 1.5;
}

.sitmt-footer__bottom {
    width: min(1280px, calc(100% - 32px));
    margin: 18px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: rgba(26, 20, 14, 0.6);
    font-size: 13px;
    letter-spacing: 0.02em;
}

.sitmt-top-btn {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--sitmt-ink);
    color: #fff;
}

@media (max-width: 1100px) {
    .sitmt-nav {
        display: none;
    }

    .sitmt-drawer-toggle {
        display: inline-flex;
    }

    /* 기본 규칙과 **같은 값**이다(2026-09-30 부터 `1fr auto 1fr`). 값을 여기서 따로
       적는 이유는 이 폭에서 분류가 사라지며 칸 구성이 흔들리던 이력 때문인데, 두 곳이
       갈리면 1100px 근처에서만 가운데가 어긋난다 — 바꿀 때는 둘을 함께 바꿔라. */
    .sitmt-header__inner {
        grid-template-columns: 1fr auto 1fr;
    }

    .sct.sct_10,
    .sitmt-points,
    .sitmt-footer__top,
    #sit_ov_wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sitmt-parallax {
        background-attachment: scroll;
    }

    .sitmt-footer__top {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 32px 28px;
    }

    .sitmt-footer__brand,
    .sitmt-footer__links,
    .sitmt-footer__info {
        padding: 0;
        border-left: 0;
    }

    .sitmt-footer__links,
    .sitmt-footer__info {
        padding-top: 22px;
        border-top: 1px solid rgba(26, 20, 14, 0.18);
    }
}

@media (max-width: 767px) {
    .sitmt-topband {
        letter-spacing: 0.16em;
        font-size: 11px;
    }

    .sitmt-header__inner,
    .sitmt-container,
    .sitmt-container.is-index,
    .sitmt-subhero,
    .sitmt-search-panel,
    .sitmt-footer__top,
    .sitmt-footer__bottom {
        width: min(100% - 20px, 100%);
    }

    .sitmt-header__inner {
        gap: 12px;
        min-height: 74px;
    }

    .sitmt-brand {
        max-width: 160px;
    }

    .sitmt-member-link {
        display: none;
    }

    .sitmt-search-panel form,
    .sitmt-points,
    .sitmt-footer__top,
    #sit_ov_wrap,
    #sit_tab .tab_tit {
        grid-template-columns: 1fr;
    }

    .sct.sct_10 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 12px;
    }

    .sitmt-banner-grid,
    .sitmt-intro-grid,
    .sitmt-story {
        grid-template-columns: 1fr;
    }

    .sitmt-hero__viewport {
        aspect-ratio: 1680 / 780;
        min-height: 0;
        max-height: none;
    }

    .sitmt-slide__content {
        left: 16px;
        right: 16px;
        bottom: 22px;
    }

    .sitmt-slide__content .sitmt-eyebrow {
        margin-bottom: 4px;
        font-size: 10px;
        letter-spacing: 0.18em;
    }

    .sitmt-slide__content h2 {
        font-size: 20px;
    }

    .sitmt-slide__content p:last-of-type {
        display: none;
    }

    .sitmt-slide__content .sitmt-button {
        margin-top: 10px;
        min-height: 34px;
        padding: 0 14px;
        border-radius: 10px;
        font-size: 12px;
    }

    .sitmt-hero__dots {
        bottom: 8px;
    }

    .sitmt-hero__arrow {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    #sit_ov,
    #sit_info {
        padding: 22px 18px;
    }

    .sitmt-section__head,
    .sitmt-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

.tr_price strong {
    font-size: 22px;
}
}

@media (max-width: 520px) {
    .sitmt-hero__arrow {
        display: none;
    }
}

#sit_inf_explan img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* ── 상품 상세 본문(it_explan) 조판 ─────────────────────────── */
.ha-detail {
    max-width: 860px;
    margin: 0 auto;
    color: var(--sitmt-ink);
}

.ha-detail .ha-eyebrow {
    margin: 0 0 8px;
    color: var(--sitmt-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.ha-detail .ha-title {
    margin: 0 0 14px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

/* 스킨의 #sit_inf h3 {font-size:0} 숨김 규칙보다 우선해 상세 타이틀 노출 */
#sit_inf_explan .ha-title {
    position: static;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.25;
}

.ha-detail .ha-lead {
    margin: 0 0 26px;
    color: rgba(26, 20, 14, 0.72);
    font-size: 16px;
    line-height: 1.8;
}

.ha-detail img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 16px;
    border-radius: 18px;
}

.ha-detail .ha-feats {
    display: grid;
    gap: 12px;
    margin: 28px 0;
    padding: 0;
    list-style: none;
}

.ha-detail .ha-feats li {
    position: relative;
    padding: 0;
    line-height: 1.7;
    text-align: center;
}

.ha-detail .ha-feats li::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--sitmt-orange);
    vertical-align: middle;
}

.ha-detail .ha-spec {
    width: 100%;
    max-width: 640px;
    margin: 24px auto;
    border-top: 2px solid var(--sitmt-ink);
    border-collapse: collapse;
}

.ha-detail .ha-spec th,
.ha-detail .ha-spec td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--sitmt-line);
    font-size: 15px;
    text-align: left;
    vertical-align: top;
}

.ha-detail .ha-spec th {
    width: 130px;
    color: rgba(26, 20, 14, 0.6);
    font-weight: 700;
    white-space: nowrap;
}

.ha-detail .ha-note {
    margin: 20px 0 0;
    padding: 16px 18px;
    border-radius: 14px;
    background: #f7ede2;
    color: var(--sitmt-orange-dark);
    font-size: 14px;
    line-height: 1.6;
}

.sitmt-detail {
    display: grid;
    gap: 24px;
}

.sitmt-detail__hero img {
    border-radius: 28px;
    box-shadow: var(--sitmt-shadow);
}

.sitmt-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 22px;
    /* 2열 박스 높이 맞춤(2026-09-10). start 면 짧은 쪽 하단이 비어 좌·우가 어긋난다. */
    align-items: stretch;
}

.sitmt-detail__copy,
.sitmt-detail__spec {
    padding: 24px;
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--sitmt-shadow);
    height: 100%;
    box-sizing: border-box;
}

.sitmt-detail__copy h4,
.sitmt-detail__spec h5 {
    margin: 0 0 12px;
    font-size: 28px;
    line-height: 1.15;
}

.sitmt-detail__copy p,
.sitmt-detail__spec p {
    margin: 0;
    line-height: 1.7;
}

.sitmt-detail__eyebrow {
    margin-bottom: 12px;
    color: var(--sitmt-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.sitmt-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.sitmt-detail__chips span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(24, 54, 75, 0.08);
    color: var(--sitmt-ink);
    font-size: 13px;
    font-weight: 600;
}

.sitmt-detail__bullets {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.sitmt-detail__bullets li {
    position: relative;
    padding-left: 18px;
    line-height: 1.65;
}

.sitmt-detail__bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sitmt-gold);
}

.sitmt-detail__spec dl {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px 16px;
    margin: 18px 0 0;
}

.sitmt-detail__spec dt {
    color: rgba(26, 20, 14, 0.58);
    font-weight: 700;
}

.sitmt-detail__spec dd {
    margin: 0;
    color: var(--sitmt-ink);
}

@media (max-width: 768px) {
    .sitmt-detail__grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CONCEPT SKIN BENCHMARK OVERRIDES  (ref: cafe24 CONCEPT demo)
   refined typography · reliable menu rollover · flat centered PDP
   ═══════════════════════════════════════════════════════════════ */

/* ── Header nav: spacing + rollover that survives the mouse gap ── */
.sitmt-nav { align-self: stretch; }
/* 2026-09-03: 열간격 34 → 20 · `align-content: center` · `row-gap` 2.
   윗줄의 `minmax(0, 1fr)` 이 가운데 칸을 «남는 만큼» 으로 묶은 뒤부터, 분류가 많은 몰에서는
   메뉴가 두 줄로 접힌다. 그때 34px 간격이면 세 줄이 되어 헤더가 88 → 185px 로 뛴다.
   실측(1440px · 운영의 분류 13개 · 가운데 칸 703px):
     34px + align-content:stretch → 185px(3줄) · 34px + center → 121px · **20px + center → 88px(2줄)**
   20px 는 «분류 13개가 접혀도 헤더 높이가 지금과 같은» 최대값이다. 간격을 좁힌 것은
   메뉴 디자인의 취향 문제가 아니라 **헤더가 첫 화면을 먹지 않게 하는 치수**다.
   `align-content: center` 가 없으면 접힌 줄들이 늘어나(stretch) 간격과 무관하게 높아진다. */
.sitmt-nav > ul {
    height: 100%;
    align-items: stretch;
    align-content: center;
    column-gap: 20px;
    row-gap: 2px;
}
.sitmt-nav > ul > li {
    display: flex;
    align-items: center;
    position: relative;
}
.sitmt-nav > ul > li > a {
    min-height: auto;
    padding: 6px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
}
.sitmt-nav > ul > li > a:hover { color: #fff; opacity: 0.72; }

/* dropdown attaches to header bottom (no dead gap) + short hold on exit */
.sitmt-nav__sub {
    top: 100%;
    left: 50%;
    min-width: 172px;
    padding: 10px 6px;
    border-radius: 0;
    background: #fff;
    border: 1px solid rgba(26, 20, 14, 0.12);
    box-shadow: 0 16px 34px rgba(26, 20, 14, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.25s;
}
.sitmt-nav > ul > li:hover .sitmt-nav__sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}
.sitmt-nav__sub a {
    display: block;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(26, 20, 14, 0.82);
    white-space: nowrap;
    text-align: center;
}
.sitmt-nav__sub a:hover { color: var(--sitmt-orange); }

/* ── PRODUCT DETAIL: flat, centered, benchmarked ──────────────── */
#sit_ov_wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 54px;
    max-width: 1160px;
    margin: 44px auto 0;
    align-items: start;
}
#sit_pvi, #sit_ov, #sit_rel, #sit_info { border-radius: 0; }
#sit_pvi_big, #sit_ov, #sit_rel { background: none; box-shadow: none; }
#sit_pvi_big { padding: 0; background: #f5f2ec; overflow: hidden; }
#sit_pvi_big img { border-radius: 0; }
#sit_pvi_big a.spv-zoom, #sit_pvi_big .spv-btn { border-radius: 0; box-shadow: none; }
#sit_pvi_thumb { grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.spv-thumb-btn, .spv-thumb-btn img { border-radius: 0; }
.spv-thumb-item.selected .spv-thumb-btn { border-color: var(--sitmt-ink); }

#sit_ov { padding: 2px 0 0; }
#sit_title {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.4;
}
#sit_desc {
    margin-top: 12px;
    color: rgba(26, 20, 14, 0.58);
    font-size: 14px;
    line-height: 1.75;
}
#sit_star_sns {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    padding: 14px 0;
    border-top: 1px solid var(--sitmt-line);
    border-bottom: 1px solid var(--sitmt-line);
    font-size: 13px;
    color: rgba(26, 20, 14, 0.55);
}

.sit_price_box { margin: 22px 0 0; }
.sit_cust_price { margin: 0; color: rgba(26, 20, 14, 0.4); font-size: 14px; }
.sit_cust_price s { text-decoration: line-through; }
/* 할인율은 정가 취소선 왼쪽에 붙여 크게 —
   공동구매몰에서 손님이 가장 먼저 읽어야 할 숫자다. */
.sit_price_dc {
    margin-right: 6px;
    color: var(--wl-primary, #f26b1d);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    vertical-align: -1px;
}
.sit_price_label {
    margin: 8px 0 2px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(26, 20, 14, 0.5);
}
.sit_price_val { margin: 0; }
.sit_price_val strong { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.sit_shipping_note { margin: 14px 0 0; font-size: 13px; color: rgba(26, 20, 14, 0.6); }
.sit_price_state { font-size: 20px; font-weight: 700; color: var(--sitmt-orange); }

.sit_option, #sit_sel_option, .sit_info {
    margin-top: 20px;
    padding: 18px;
    border-radius: 0;
    border: 1px solid var(--sitmt-line);
    background: #fff;
}
.sit_option h3, #sit_sel_option h3 {
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(26, 20, 14, 0.5);
}
.sit_opt_list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.opt_name { flex: 1 1 100%; font-size: 14px; }
.opt_count { display: flex; align-items: center; gap: 6px; }
.sit_qty_minus, .sit_qty_plus {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sitmt-line); background: #fff; color: var(--sitmt-ink); cursor: pointer;
}
.num_input { width: 48px; height: 34px; text-align: center; border: 1px solid var(--sitmt-line); }
.sit_opt_prc { margin-left: auto; font-weight: 600; }

#sit_tot_price { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sitmt-ink); }

#sit_ov_btn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}
#sit_ov_btn .sit_btn_buy {
    order: -1; grid-column: 1 / -1;
    min-height: 58px; border: 0; border-radius: 0;
    background: #1a1a1a; color: #fff;
    font-size: 15px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer;
    transition: background 0.2s ease;
}
#sit_ov_btn .sit_btn_buy:hover { background: #000; }
#sit_ov_btn .sit_btn_cart {
    min-height: 54px; border: 1px solid var(--sitmt-ink); border-radius: 0;
    background: #fff; color: var(--sitmt-ink); font-weight: 600; cursor: pointer;
}
#sit_ov_btn .sit_btn_cart:hover { background: var(--sitmt-sand); }
#sit_ov_btn .sit_btn_wish {
    min-height: 54px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sitmt-line); border-radius: 0;
    background: #fff; color: var(--sitmt-ink); text-decoration: none;
}
#sit_ov_btn .sit_btn_wish:hover { border-color: var(--sitmt-ink); }

/* spec table — centered, flat */
#sit_item_spec { max-width: 1160px; margin: 52px auto 0; }
.sit_spec_title {
    margin: 0 0 16px;
    font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(26, 20, 14, 0.5); text-align: center;
}
.sit_spec_tbl { width: 100%; border-collapse: collapse; border-top: 2px solid var(--sitmt-ink); }
.sit_spec_tbl th, .sit_spec_tbl td {
    padding: 15px 14px; border-bottom: 1px solid var(--sitmt-line);
    font-size: 14px; text-align: left; vertical-align: top;
}
.sit_spec_tbl th { width: 160px; color: rgba(26, 20, 14, 0.55); font-weight: 600; }

#sit_siblings { max-width: 1160px; margin: 16px auto 0; }

/* info tabs — flat underline, centered */
#sit_info {
    max-width: 1160px; margin: 60px auto 0; padding: 40px 0 0;
    background: none; box-shadow: none; border-top: 1px solid var(--sitmt-line);
}
#sit_tab .tab_tit {
    display: flex; justify-content: center; gap: 0;
    margin: 0 0 32px; border-bottom: 1px solid var(--sitmt-line);
    grid-template-columns: none;
}
#sit_tab .tab_tit button {
    width: auto; min-height: 54px; padding: 0 28px;
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    background: none; color: rgba(26, 20, 14, 0.45);
    font-size: 15px; font-weight: 600; cursor: pointer;
}
#sit_tab .tab_tit button.selected {
    background: none; color: var(--sitmt-ink); border-bottom-color: var(--sitmt-ink);
}

@media (max-width: 900px) {
    #sit_ov_wrap { grid-template-columns: 1fr; gap: 26px; margin-top: 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL: centered column (all pages) · responsive · heavy reveal
   Fixes "밀려있는": #container reset killed .sitmt-container max-width,
   so default youngcart pages (cart/board/order/mypage…) went edge-to-edge.
   ═══════════════════════════════════════════════════════════════ */
#container.sitmt-container {
    float: none !important;
    width: auto !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}
#container.sitmt-container.is-index { max-width: 1340px !important; }

/* full-bleed sections still break out of the centered column */
.sitmt-hero, .sitmt-parallax { max-width: none !important; }

/* media & tables never cause horizontal overflow */
#container img, #container video, #container table { max-width: 100%; }
#container img { height: auto; }
/* ── 결제 동선의 표 (2026-09-03 실측으로 다시 잡음) ─────────────────────
   합격 기준을 먼저 못박고 쟀다: **금액 칸이 한 줄로 읽혀야 하고, 그 폭을 못 주면
   표를 누르지 말고 가로로 굴려야 한다.** 금액이 접히면 «1,253,0 / 00원» 으로 끊겨
   손님이 값을 잘못 읽는다 — 이 화면에서 가장 비싼 오독이라 이것을 기준으로 삼았다.

   실측(로컬 8763 · /shop/cart.php · 상품 3행):
     · 금액 칸이 접히기 시작하는 폭 = **750px** (이것이 이 표의 최소 가독 폭이다)
     · 뷰포트 1280 → 표 1240px  합격
     · 뷰포트 1024 → 표  969px  합격
     · 뷰포트  820 → 표  765px  겨우 합격
     · 뷰포트  768 → 표  713px  **불합격**
     · 뷰포트  390 → 표  385px  **불합격** (금액 칸 42px 폭 × 411px 높이)

   ■ 브레이크만 올리는 것으로는 안 고쳐진다 — 이것이 이번 실측의 요점이다
     종전 규칙은 래퍼에 `overflow-x:auto` 만 주었다. 그런데 표는 상자보다 좁아질 수
     있으므로(min-content 385px) **눌려 들어가 버려 굴릴 것이 아예 생기지 않는다.**
     실제로 768px 에서 `overflow-x` 는 `auto` 였는데 `scrollWidth == clientWidth` 였다.
     스크롤이 생기려면 표에 **최소 폭**이 있어야 한다. 그래서 둘을 함께 준다.

   ■ 왜 1024px 인가
     820 은 «겨우 합격» 이라 글꼴·언어가 조금만 달라져도 뒤집힌다. 그리고 이 훅이 없는
     821~1024 구간에는 장바구니보다 열이 많은 표(주문서의 주문상품·주문조회 상세)가
     들어온다. 경계를 표의 최소 가독 폭이 아니라 **화면 등급**에 맞춰 1024 로 올린다.

   ■ 최소 폭을 «금액이 있는 표» 에만 주는 이유
     `.tbl_frm01`(주소·연락처 같은 2열 입력 표)에까지 760px 을 주면 손안 화면에서
     쓸데없는 가로 스크롤이 생긴다. 굴릴 상자는 넓게, 최소 폭은 좁게 준다. */
@media (max-width: 1024px) {
    #container .tbl_wrap,
    #container .tbl_head01,
    #container .tbl_head02,
    #container .tbl_head03,
    #container .tbl_frm01,
    #container .cart_wrap,
    #container .sod_list,
    #container .od_prd_list,
    #container .scroll_wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    #container .tbl_head01 > table,
    #container .tbl_head02 > table,
    #container .tbl_head03 > table,
    #container .cart_wrap > table,
    #container .sod_list > table { min-width: 760px; }
}

/* ── site-wide scroll reveal (driven by js/sitmt-anim.js) ─────── */
html.sitmt-js .sitmt-rv {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}
html.sitmt-js .sitmt-rv.sitmt-rv--left { transform: translateX(-40px); }
html.sitmt-js .sitmt-rv.sitmt-rv--right { transform: translateX(40px); }
html.sitmt-js .sitmt-rv.sitmt-rv--zoom { transform: scale(0.9); }
html.sitmt-js .sitmt-rv.is-in { opacity: 1; transform: none; }

/* page-load motion for header band + sub-hero */
html.sitmt-js .sitmt-subhero { animation: sitmtDrop 0.9s cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes sitmtDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
html.sitmt-js .sitmt-topband { animation: sitmtFade 1.1s ease both; }
@keyframes sitmtFade { from { opacity: 0; } to { opacity: 1; } }

/* extra hover micro-motion */
.sct_li, .sitmt-banner, .ha-detail img, #sit_pvi_big img { transition: transform 0.5s ease, box-shadow 0.5s ease; }
.ha-detail img:hover, #sit_pvi_big img:hover { transform: scale(1.015); }

@media (prefers-reduced-motion: reduce) {
    html.sitmt-js .sitmt-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
    html.sitmt-js .sitmt-subhero, html.sitmt-js .sitmt-topband { animation: none !important; }
}

/* ============================================================
   우리링크 — 전역 브랜드색 오버라이드
   그누보드 기본 파랑 버튼·강조 → 우리링크 주황 (모바일+PC)
   ============================================================ */
.btn_submit, button.btn_submit, a.btn_submit, input.btn_submit,
.btn_b01, a.btn_b01, #sit_btn_buy, .btn_cart_op,
#display_pay_button .btn_submit, #sod_bsk_act .btn_submit, #sod_frm .btn_submit{
  background:var(--wl-primary) !important; border-color:var(--wl-primary) !important; color:#fff !important;
}
.btn_submit:hover, .btn_b01:hover, #sit_btn_buy:hover{ background:var(--wl-primary-dark) !important; border-color:var(--wl-primary-dark) !important; }
/* 테두리는 주 색 그대로 두되 글자만 진하게 — 흰 바탕에 주 색 글자는 대비 3.0451:1 이라
   14px 버튼 글자로는 읽기 어렵다(테두리에는 대비 기준이 다르게 적용된다). */
.btn_frmline, a.btn_frmline, button.btn_frmline, .cp_btn, .cp_btn1, .cp_apply{
  border-color:var(--wl-primary) !important; color:var(--wl-primary-ink) !important; background:#fff !important;
}
.pg_current{ background:var(--wl-primary) !important; border-color:var(--wl-primary) !important; }
.new_win .win_ul .selected{ background:var(--wl-primary) !important; border-color:var(--wl-primary) !important; }
.fix_btn{ background:var(--wl-primary) !important; }
/* 가격·포인트·수량 등 파랑 강조 → 오렌지 */
.sod_list .total_price strong, #m_sod_bsk_tot .sod_bsk_cnt strong,
#smb_my_ov .win_point strong, #smb_my_ov .my_name a.smb_info,
#sod_inquiry li .inquiry_price, #scp_list .cou_pri, .new_win .win_total,
.form_01 .frm_info, .sod_list .total_price strong{ color:var(--wl-primary-ink) !important; }
/* 상태 뱃지 */
.status_05{ background:var(--wl-primary) !important; }
.status_04, .sod_opt li:before, .sod_opt .opt_name:before{ background:var(--wl-primary-soft) !important; color:var(--wl-primary-ink) !important; }
/* 배송지 라벨 */
#sod_addr .add_lb{ border-color:var(--wl-primary) !important; color:var(--wl-primary-ink) !important; }
#sod_addr input[type="radio"]:checked + .add_lb{ background:var(--wl-primary) !important; color:#fff !important; }

/* ═══════════════ 상품 카드·목록 세부 조정 ═══════════════ */

/* ── ① 상품 썸네일 번호 배지 (좌측 상단, 주황 70%) ── */
.sct_img,
.sct_10 .sct_img,
.li_wr .sct_img { position: relative; }

.sitmt-num {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* 브랜드 주황(#f26b1d)의 70% 다. 한때 다른 붉은색(#f94a3f)이 남아 있어
       같은 카드 안의 할인 뱃지와 미묘하게 다른 빨강 두 개가 겹쳐 보였다. */
    background: rgba(242, 107, 29, 0.7);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    pointer-events: none;
}

@media (max-width: 640px) {
    .sitmt-num {
        top: 8px;
        left: 8px;
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
}

/* ── ② 드로어 하단 링크(주문조회·1:1문의·FAQ) 제거에 따른 마무리 ── */
.sitmt-drawer__nav > ul > li:last-child { border-bottom: 0; }

/* ═══════════ 상품 상세·주문 화면 조정 ═══════════ */

/* ── ④ 이전/다음 상품 박스: 흰 배경 → 테마 톤 ── */
#sit_siblings {
    background: var(--sitmt-sand);
    border: 1px solid var(--sitmt-line);
    border-radius: 12px;
}
#sit_siblings a { color: var(--sitmt-brown); text-decoration: none; }
#sit_siblings a:hover { color: var(--sitmt-orange-dark); }

/* ── ⑤ 모바일 상품상세: 대표이미지 아래 구매/장바구니 버튼 (위아래 배치) ── */
.wl-quickbuy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 14px 12px 2px;
}
.wl-quickbuy input {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.wl-quickbuy__buy {
    border: 0;
    background: var(--sitmt-orange);
    color: #fff;
}
.wl-quickbuy__buy:active { background: var(--sitmt-orange-dark); }
.wl-quickbuy__cart {
    border: 1px solid var(--sitmt-orange);
    background: #fff;
    color: var(--sitmt-orange);
}
.wl-quickbuy__cart:active { background: var(--sitmt-mint); }

/* ── ⑥ 모바일 옵션 패널: 장바구니·바로구매 위아래 배치 ── */
/* #btn_option 은 모바일 스킨에만 존재하므로 PC에는 영향 없음 */
#btn_option #sit_ov_btn {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
}
#btn_option #sit_ov_btn input {
    width: 100%;
    min-height: 52px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    -webkit-appearance: none;
    appearance: none;
}

/* ── ⑦ 고정 하단 구매바에 본문이 가려지는 문제(안내 문구 겹침) 해소 ── */
body:has(.btn_option_wr) #wrapper { padding-bottom: 96px; }
body:has(.btn_option_wr) .sitmt-footer { margin-bottom: 84px; }
#sit_rel { margin-bottom: 12px; }

/* ═══════════ 모바일 레이아웃 조정 ═══════════ */

/* ① 상품 상세 대표이미지 번호 배지 */
#sit_pvi { position: relative; }
#sit_pvi > .sitmt-num { top: 14px; left: 14px; z-index: 20; }

/* ② 모바일 구매/장바구니 버튼 — 둘 다 주황, 좌우 폭 정렬 */
.wl-quickbuy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 16px 10px 6px;
}
.wl-quickbuy input {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--sitmt-orange);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.wl-quickbuy input:active { background: var(--sitmt-orange-dark); }
.wl-quickbuy__cart { background: var(--sitmt-orange-dark) !important; }

/* ④ 관련상품 박스는 CSS 로 숨기지 않는다.
   관련상품이 하나도 없을 때 제목만 남는 게 문제였는데, 그건 스킨에서
   $item_relation_count 로 막았다(item.info.skin.php · 모바일 item.form.skin.php).
   여기서 display:none 을 걸면 관련상품을 등록해도 영영 안 보인다. */

/* ⑤ 이전/다음 상품 박스 */
#sit_siblings {
    background: var(--sitmt-sand);
    border: 1px solid var(--sitmt-line);
    border-radius: 12px;
    overflow: hidden;
}
#sit_siblings a { color: var(--sitmt-brown); text-decoration: none; }
#sit_siblings a:hover { color: var(--sitmt-orange-dark); }

/* ⑥ 탭이 하나뿐일 때 제목이 줄바꿈되지 않도록 (모바일: 상품정보 1개) */
#sit_tab .tab_tit li:only-child { width: 100%; }
#sit_tab .tab_tit li:only-child button {
    width: 100%;
    white-space: nowrap;
    font-size: 15px;
}

/* ⑦ 모바일 옵션 패널 — 스크롤 없이 수량·버튼이 한눈에 */
#btn_option {
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#btn_option .sl_option {
    max-height: none;
    overflow: visible;
    padding: 14px 12px 16px;
}
#btn_option #sit_sel_option { max-height: 34vh; overflow-y: auto; }
#btn_option #sit_tot_price { margin: 10px 0 0; padding-top: 12px; }
#btn_option #sit_ov_btn {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
}
#btn_option #sit_ov_btn input {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 8px;
    background: var(--sitmt-orange);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    -webkit-appearance: none;
    appearance: none;
}
#btn_option #sit_ov_btn #sit_btn_cart { background: var(--sitmt-orange-dark); }

/* ③ 하단 고정 구매바가 본문(정품 안내 문구)을 덮던 문제의 근본 원인 수정
   ─ 스크롤 리빌의 will-change:transform 이 position:fixed 자식의 기준 박스를
     만들어, 구매바가 뷰포트가 아니라 <form> 기준으로 배치되고 있었음 */
html.sitmt-js .sitmt-rv.is-in { will-change: auto; }
html.sitmt-js form[name="fitem"].sitmt-rv,
html.sitmt-js form[name="fitem"] {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
    transition: none !important;
}

/* ⑥-2 탭 밑줄을 테마 오렌지로 (기본 스킨의 파란색 제거) */
#sit_tab .tab_tit li .selected { color: var(--sitmt-orange-dark); }
#sit_tab .tab_tit li .selected:before { background: var(--sitmt-orange); }

/* 2026-08-07 요청: 모바일 드로어 상단 로고 → 메인으로 이동 */
.sitmt-drawer__logo { display: inline-flex; align-items: center; max-width: 180px; }
.sitmt-drawer__logo img { display: block; max-width: 100%; max-height: 42px; object-fit: contain; }

/* 드로어 닫기 버튼이 흰 패널 위에서 흰색이라 보이지 않던 문제 (헤더용 스타일이 그대로 상속됨) */
.sitmt-drawer__head .sitmt-drawer-close {
    color: var(--sitmt-ink);
    border-color: rgba(26, 20, 14, 0.22);
}
.sitmt-drawer__head .sitmt-drawer-close:hover {
    background: var(--sitmt-orange);
    border-color: var(--sitmt-orange);
    color: #fff;
}

/* 2026-08-07 요청: 상품 목록 제목 칸 높이 통일 + 한글 어절 단위 줄바꿈
   ─ 기존에는 제목이 1줄/2줄로 달라져 카드 높이가 들쭉날쭉했고,
     한글이 글자 단위로 쪼개져 줄바꿈되어 읽기 나빴다. */
.sct_10 .sct_txt {
    word-break: keep-all;         /* 한글은 어절(띄어쓰기) 단위로만 줄바꿈 */
    overflow-wrap: break-word;    /* 한 어절이 칸보다 길면 그때만 분리 */
}
.sct_10 .sct_txt a {
    display: -webkit-box;
    -webkit-line-clamp: 2;        /* 두 줄 초과 시 말줄임 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 글자가 한 줄이든 두 줄이든 항상 두 줄 높이를 차지 → 카드 높이 통일 */
    line-height: 1.5;
    height: 3em;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 모바일에서는 제목 글자를 살짝 줄여 가장 긴 상품명(…바디로션 200ml)까지
   두 줄 안에 말줄임 없이 들어가게 한다. PC 는 폭이 넉넉해 그대로 둔다. */
@media (max-width: 767px) {
    .sct_10 .sct_txt,
    .sct_10 .sct_txt a { font-size: 12.5px; }
}

/* 2026-08-07 요청: 푸터에서 로고·소개문·링크를 제거해 사업자 정보 한 블록만 남음
   ─ 기존 3열 그리드를 1열로 바꿔 남은 블록이 폭을 온전히 쓰도록 한다. */
.sitmt-footer__top { grid-template-columns: 1fr; }
.sitmt-footer__top .sitmt-footer__info { padding: 0; }
@media (max-width: 900px) {
    .sitmt-footer__top { padding: 28px 22px; }
}

/* 2026-08-08: 비활성 슬라이드가 opacity:0 인 채로 클릭·포커스를 가로채던 문제
   ─ 자동 전환 중 커서 아래 슬라이드가 바뀌면 엉뚱한 버튼이 눌렸다. */
.sitmt-slide { pointer-events: none; }
.sitmt-slide.is-active { pointer-events: auto; }

/* 전체 상품 페이지 */
.sitmt-allitems { max-width: 1160px; margin: 0 auto; padding: 0 0 48px; }
@media (max-width: 900px) { .sitmt-allitems { padding: 0 0 32px; } }

/* 2026-08-08 요청: 회원가입 — 초대 회원제(프라이빗 클럽) 안내 + 일반회원 가입 버튼 */
.sitmt-invite {
    max-width: 640px;
    margin: 8px auto 32px;
    padding: 40px 32px 34px;
    border: 1px solid var(--sitmt-line);
    border-radius: 18px;
    background: linear-gradient(180deg, #fffdfa 0%, var(--sitmt-sand) 100%);
    text-align: center;
    box-shadow: 0 10px 30px rgba(26, 20, 14, 0.06);
}
.sitmt-invite__eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sitmt-orange);
}
.sitmt-invite__title {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--sitmt-ink);
    word-break: keep-all;
}
.sitmt-invite__desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(26, 20, 14, 0.66);
    word-break: keep-all;
}
.sitmt-invite__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 20px;
    color: rgba(26, 20, 14, 0.38);
    font-size: 12px;
    letter-spacing: 0.08em;
}
.sitmt-invite__divider::before,
.sitmt-invite__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sitmt-line);
}
.sitmt-invite__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    min-height: 54px;
    padding: 0 24px;
    border: 0;
    border-radius: 8px;
    background: var(--sitmt-orange);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.sitmt-invite__btn:hover { background: var(--sitmt-orange-dark); }
.sitmt-invite__note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(26, 20, 14, 0.5);
    word-break: keep-all;
}
/* 버튼을 누르기 전에는 가입 폼을 감춘다 (JS 미사용 시 noscript 로 해제) */
body.sitmt-join-gate #fregister { display: none; }

@media (max-width: 640px) {
    .sitmt-invite { margin: 4px 12px 24px; padding: 32px 20px 28px; border-radius: 14px; }
    .sitmt-invite__title { font-size: 21px; }
    .sitmt-invite__desc { font-size: 14px; }
    .sitmt-invite__btn { max-width: none; }
}
/* 회원 스킨 기본값(.mbskin p / .register p 의 밑줄·여백)이 안내 박스에 섞이지 않도록 */
.sitmt-invite p,
.sitmt-invite h2 {
    padding: 0;
    border: 0;
}
.sitmt-invite p { padding-bottom: 0; }

/* ═══════════ 헤더·메뉴 조정 ═══════════ */

/* ── ⑨-1 단어 중간에서 줄이 끊기지 않게 (전역) ──
   word-break / overflow-wrap 은 상속되는 속성이라, 큰 컨테이너에 한 번만 걸면
   그 아래 모든 글자에 적용된다. keep-all 만 쓰면 띄어쓰기 없는 긴 영문/URL 이
   칸을 뚫고 나가므로 break-word 를 함께 둔다(그때만 글자 단위로 쪼갠다). */
.sitmt-wrapper,
.sitmt-subhero,
.sitmt-parallax,
.sitmt-footer,
.sitmt-drawer,
.sitmt-header {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ── ③ 모바일 드로어: 메인 메뉴를 하위 메뉴보다 확실히 크고 진하게 ──
   1.15em 은 물려받은 크기의 정확히 115% 다. 기준 폰트가 바뀌어도 "15% 크게"가 유지된다.
   하위 메뉴는 font-size 를 px 로 따로 갖고 있어 영향을 받지 않는다. */
.sitmt-drawer__nav > ul > li > .sitmt-drawer__top {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--sitmt-ink);
    cursor: pointer;
}
/* 하위가 있는 항목은 오른쪽에 펼침 표시(＋/－)를 둔다 */
.sitmt-drawer__nav > ul > li.has-sub > .sitmt-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sitmt-drawer__nav > ul > li.has-sub > .sitmt-drawer__top::after {
    content: "+";
    flex: none;
    font-size: 0.9em;
    font-weight: 600;
    color: rgba(26, 20, 14, 0.45);
    transition: transform 0.2s ease;
}
.sitmt-drawer__nav > ul > li.has-sub > .sitmt-drawer__top[aria-expanded="true"]::after {
    content: "−";
    color: var(--sitmt-orange);
}

/* ── ⑧ 하위가 있는 메인 메뉴는 눌러도 이동하지 않는다 ──
   <a> 를 <button> 으로 바꿨으므로, 기존 <a> 에 걸려 있던 모양을 그대로 입혀
   보기에는 달라진 것이 없게 한다. */
.sitmt-nav > ul > li > .sitmt-nav__top {
    padding: 6px 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #fff;
    cursor: default;          /* 눌러도 아무 일이 없다는 신호 */
}
.sitmt-nav > ul > li > .sitmt-nav__top:hover { color: #fff; opacity: 0.72; }
/* 키보드 사용자를 위해: 포커스가 들어와도 하위 메뉴가 열리게 (hover 와 동일) */
.sitmt-nav > ul > li:focus-within .sitmt-nav__sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}

/* 모바일 드로어: 하위 목록은 접어 두고 메인 메뉴를 눌렀을 때만 편다 */
.sitmt-drawer__nav > ul > li.has-sub > ul { display: none; }
.sitmt-drawer__nav > ul > li.has-sub.is-open > ul { display: block; }

/* ── ⑨-2 메인 패럴랙스 문구: 지정한 자리에서만 줄이 바뀌게 ──
   span 을 블록으로 만들어 줄을 고정하고, 글자 크기를 vw 로 묶어
   화면이 좁아지면 줄 수가 늘지 않고 '비율 그대로' 작아지게 한다. */
.sitmt-line { display: block; }
.sitmt-parallax__inner h3 .sitmt-line + .sitmt-line { margin-top: 0.15em; }
.sitmt-parallax__inner p {
    max-width: 760px;
    font-size: clamp(13px, 2.35vw, 17px);
}
.sitmt-parallax__inner p .sitmt-line + .sitmt-line { margin-top: 0.35em; }

/* ── ⑨-3 브랜드 포인트 4줄 ── */
.sitmt-points li { text-wrap: pretty; }

/* ── ⑨-4 푸터 사업자 정보: 한 항목이 두 줄로 넘어가도 단어가 안 쪼개지게 ── */
.sitmt-footer__info span {
    display: block;
    text-wrap: pretty;
}

/* ── 2026-08-12: 가맹점·관리자 전용 진입 링크 (자격 없으면 렌더 자체가 안 된다) ──
   2026-09-11: 본사·가맹점용 [현장 수령] 이 같은 모양을 쓴다(사용자 지시 —
   일반 회원에게는 숨김). 검은 바탕은 .sitmt-member-link 가, 테두리 상자는
   이 규칙이 준다. 두 버튼이 나란히 서므로 선택자를 나누지 않고 한 규칙에 묶는다 —
   갈라 두면 한쪽만 손질돼 헤더 안에서 모양이 어긋난다. */
.sitmt-reseller-link,
.sitmt-pickup-link {
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
}
.sitmt-reseller-link:hover,
.sitmt-pickup-link:hover { background: rgba(255, 255, 255, 0.14); }
.sitmt-drawer__reseller > .sitmt-drawer__top { color: var(--sitmt-orange); }

/* ── 2026-08-14 요청: 제품번호 배지를 좌측 상단 → 우측 상단으로 ──
   원래 규칙(.sitmt-num)은 위쪽에 그대로 두고 여기서 좌우만 뒤집는다.
   left 를 auto 로 풀지 않으면 left/right 가 동시에 걸려 배지가 늘어난다. */
.sitmt-num {
    left: auto;
    right: 10px;
}
@media (max-width: 767px) {
    .sitmt-num { left: auto; right: 8px; }
}

/* ── 2026-08-16 요청: 상세 이미지 조각을 이어 붙여 한 장처럼 보이게 ──
   긴 상세 이미지(6,000px 이상)는 통째로 올리면 모바일에서 로딩이 멈춘 것처럼 보여
   2,200px 단위로 잘라 올린다. 그런데 기본 .ha-detail img 규칙이 조각마다
   아래 여백 16px 과 모서리 둥글리기 18px 을 주는 데다, 각 이미지를 <p> 로 감싸면
   브라우저 기본 문단 여백까지 더해져 조각 사이가 크게 벌어졌다.
   그래서 조각들만 이 상자로 묶고, 둥근 모서리는 상자 바깥쪽에만 준다. */
.ha-detail .ha-longcut {
    margin: 0 auto 16px;
    border-radius: 18px;
    overflow: hidden;      /* 안쪽 조각의 각진 모서리를 상자가 깎아 준다 */
    font-size: 0;          /* 인라인 요소 사이 공백문자가 만드는 틈 제거 */
    line-height: 0;
}
.ha-detail .ha-longcut img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;             /* ★ 조각 사이 여백 0 — 이어 붙는 핵심 */
    border-radius: 0;
    vertical-align: top;
}

/* ══════════════════════════════════════════════════════════════════════
   우리링크 공동구매 — 브랜드 컴포넌트
   물려받은 테마의 뼈대(.sitmt-*)는 그대로 두고, 공동구매몰에 필요한 것만 여기서 더한다.
   색은 전부 파일 맨 위 --wl-* 변수를 참조한다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 로고 ─────────────────────────────────────────────────────────────
   마크는 인라인 SVG, 워드마크는 HTML 텍스트다. SVG 안의 text 요소는 페이지의
   Pretendard 를 못 받는 경우가 있어 브라우저마다 글꼴이 갈리기 때문이다. */
.wl-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    white-space: nowrap;
}
/* 마크 상자는 viewBox 56 칸 중 도형이 48 칸이다(나머지 8 칸은 둥근사각 테두리가
   잘리지 않게 둔 여백 — wl_brand_mark() 주석 참고). 둥근사각이 화면에서 종전과 같은
   38px 로 보이려면 상자는 38 x 56/48 = 44px 여야 한다. */
.wl-logo .wl-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: block;
}
.wl-logo__img {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}
.wl-logo__word {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.045em;
    color: var(--wl-ink);
}
.wl-logo__tag {
    align-self: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--wl-primary-soft);
    color: var(--wl-primary-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
/* 어두운 바탕용. 마크 자체는 wl_brand_mark('inverse') 가 뒤집어 주고,
   여기서는 그 옆의 글자만 맞춘다.
   ※ 주황 바탕(헤더·푸터)에는 쓰지 않는다 — 흰 글자는 주황 위에서 3.04:1 뿐이다. */
.wl-logo--inverse .wl-logo__word { color: #fff; }
.wl-logo--inverse .wl-logo__tag {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* ── 상단 유틸 띠 ───────────────────────────────────────────────────
   바탕·글자 크기·자간·대문자 변환은 기준 디자인(hermesamenity.co.kr)과 같아야 해서
   여기서 손대지 않는다. 위쪽 기본 규칙이 이미 그 값(#111 · 12px · 0.24em ·
   uppercase · 8px 20px · min-height 38px)이므로, 덮어쓰면 그만큼 어긋난다.
   이 블록은 '띠 안에 링크를 나란히 놓는다'는 우리링크 고유 배치만 담당한다. */
.wl-topband__inner {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* 높이는 띠 자신의 min-height 38px + padding 8px 이 정한다.
       여기에 또 min-height 를 주면 두 값이 더해져 띠가 기준보다 두꺼워진다. */
}
.wl-topband__links { display: flex; gap: 18px; }
.wl-topband__links a {
    color: #fff;
    text-decoration: none;
}
.wl-topband__links a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 767px) {
    .wl-topband__msg { display: none; }
    .wl-topband__inner { justify-content: center; }
    /* 글자 크기는 띠(11px)를 그대로 물려받는다. 여기서 12px 로 키우면
       띠 안에서 링크만 커져 기준 디자인의 균일한 유틸 띠와 어긋난다. */
    .wl-topband__links { gap: 14px; }
}

/* ── 헤더 ───────────────────────────────────────────────────────────
   기준 디자인의 헤더는 주황 바탕이다. 한동안 이 자리에서 흰 바탕으로 덮어
   썼는데, 그 조합이 실제로는 성립하지 않았다 — 메뉴 글자를 검게 만들려던
   `.sitmt-nav__top` 규칙이 위쪽 `.sitmt-nav > ul > li > .sitmt-nav__top`
   (클래스 2·요소 2)보다 명시도가 낮아 지지 못했고, 그래서 흰 바탕 위에 흰
   글자가 남았다(대비 1:1). 아이콘 테두리 rgba(255,255,255,.4) 도 같은 이유로
   보이지 않았다. 주황 바탕으로 되돌리면 그 기본 규칙들이 원래 의도대로 맞는다.

   그러므로 여기서는 아무것도 덮어쓰지 않는다. 헤더 색·높이(88px)·경계선,
   메뉴/아이콘/로그인 버튼 색은 전부 위쪽 기본 규칙이 정한다.
   아래 한 줄만 우리링크 고유 사정이다. */

/* 기준 디자인의 로고는 190px 짜리 이미지 한 장이라 max-width:220px 로 충분하지만,
   우리링크 로고는 마크+워드마크+태그가 한 줄로 이어진 HTML 이라 그 폭에 안 들어간다. */
.sitmt-brand { max-width: none; }

/* 모바일 테마(mobile_shop.css)에는 `a:link, a:visited { color:#000 }` 이 있다.
   명시도가 (0,1,1) 이라 `.sitmt-icon-link`(0,1,0)를 이긴다. 헤더가 흰 바탕이던
   동안에는 그 검정이 우연히 맞아 보였지만, 주황으로 되돌리면 아이콘만 검게 남는다.
   :link/:visited 를 같이 걸어 명시도를 넘겨 PC·모바일 색을 하나로 맞춘다.
   드로어·본문 링크는 흰 바탕이므로 건드리지 않도록 헤더 안으로 한정한다. */
.sitmt-header .sitmt-icon-link:link,
.sitmt-header .sitmt-icon-link:visited,
.sitmt-header .sitmt-member-link:link,
.sitmt-header .sitmt-member-link:visited { color: #fff; }

/* 드로어의 우리링크 전용 동선 — 분류와 성격이 달라 시각적으로 떼어 놓는다 */
.wl-drawer__quick { margin-top: 6px; border-top: 1px solid var(--wl-line); }
.wl-drawer__quick > a { display: block; }
.wl-drawer__quick small {
    display: block;
    margin-top: 3px;
    color: var(--wl-muted);
    font-size: 12px;
    font-weight: 400;
}

/* ── 히어로 ───────────────────────────────────────────────────────
   사진을 쓰지 않는다. 출처가 분명한 이미지는 상품 사진뿐이라, 그 밖은
   브랜드 그라디언트와 도형으로 만든다(빌려온 사진이 남지 않는다). */
.wl-hero {
    position: relative;
    overflow: hidden;
    width: min(1280px, calc(100% - 32px));
    margin: 24px auto 0;
    padding: 64px 48px 68px;
    border-radius: 28px;
    background: linear-gradient(125deg, var(--wl-accent) 0%, var(--wl-primary) 52%, var(--wl-primary-dark) 100%);
    color: #fff;
}
/* 배경 장식: 브랜드 마크의 고리를 크게 키운 원 두 개 */
.wl-hero::before,
.wl-hero::after {
    content: "";
    position: absolute;
    border: 44px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    pointer-events: none;
}
.wl-hero::before { width: 320px; height: 320px; right: -60px; top: -90px; }
.wl-hero::after  { width: 320px; height: 320px; right: 130px; top: 40px; }
.wl-hero__inner { position: relative; z-index: 1; max-width: 640px; }
.wl-hero__eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.9);
}
.wl-hero__title {
    margin: 0;
    font-size: clamp(32px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.045em;
}
.wl-hero__desc {
    margin: 18px 0 0;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}
.wl-hero__cta {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.wl-btn {
    display: inline-flex;
    align-items: center;
    padding: 13px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}
.wl-btn:hover { transform: translateY(-2px); }
.wl-btn--solid { background: #fff; color: var(--wl-primary-ink); }
.wl-btn--ghost {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.wl-btn--ghost:hover { background: rgba(255, 255, 255, 0.24); }
@media (max-width: 767px) {
    .wl-hero { padding: 40px 24px 44px; border-radius: 20px; }
    .wl-hero::before, .wl-hero::after { display: none; }
}

/* ── 히어로 상품 상자 + 실시간 주문 띠 (사용자 지시 2026-09-03 · 재배분 같은 날) ──
   히어로 안에서 왼쪽은 문구, 오른쪽은 상품 4개와 주문이 올라오는 띠다.

   ■ 기본 상태를 «좁은 화면» 으로 뒤집었다 (2026-09-03 2차 지시)
   앞 판은 기본을 display:none 으로 두고 1200px 위에서만 켰다. 지시가 "스마트 버전에서는
   실시간 주문 현황 박스가 보이게" 로 늘어났는데, 그 구조 위에 «좁을 때 켜는» 규칙을 또
   얹으면 두 규칙의 경계에서 어느 쪽에도 안 걸리는 폭이 생긴다(스크롤바를 세느냐 마느냐로
   판정이 1px 오간다) — 그 폭에서는 띠가 통째로 사라진다. 이 파일은 «안 보이는 것» 을
   최악의 사고로 다뤄 왔다(같은 판단이 아래 wlHeroRise 주석에 있다). 그래서 **기본을
   보이는 쪽**에 두고 넓은 화면이 덮는다 — 규칙이 하나도 안 걸리면 최악이 «좁은 화면
   모양으로 보인다» 이지 «안 보인다» 가 아니다.

   ■ 폭 산수 — 기준 컨테이너 하나로만 잰다
   홈은 _INDEX_ 라 #container 에 .is-index 가 붙어 max-width 가 **1340**(1280 아님)이다.
   사슬: 뷰포트 W → #container = min(1340, W - 스크롤바) → 안쪽 = −40(좌우 padding 20)
        → 히어로 = min(1280, 안쪽 − 32) → 히어로 안쪽 G = 히어로 − 96(좌우 padding 48).
   문구 칸의 하한을 정하는 것은 제목이 아니라 **설명문 첫 줄**이다(2026-09-03 브라우저 실측):
        설명문 1행 431.28px @18px · 제목 "도매가가 됩니다" 377.55px @54px.
   설명문은 clamp(15px, 1.4vw, 18px) 라 1286px 아래에서 글자가 작아지고 하한도 같이 내려온다.

     W       #container  히어로  G      패널  간격  문구 칸  문구 하한  여유
     1200    1185        1113   1017   548   36    433     397.50    +35.5
     1300    1285        1213   1117   548   36    533     431.05   +101.9
     1359    1340        1268   1172   548   36    588     431.28   +156.7
     1360    1340        1268   1172   600   36    536     431.28   +104.7
     1440~   1340        1268   1172   600   36    536     431.28   +104.7

   가장 빠듯한 자리는 2단이 켜지는 1200px 바로 그 지점(여유 35.5px)이다. 1360px 위로는
   히어로가 상한(G=1172)에 붙어 더 늘지 않으므로 거기서 패널을 600 으로 한 번 더 넓힌다 —
   지시가 "실시간 주문을 좀더 가로로 넓게" 이기 때문이다. 1360 을 고른 이유는 #container
   가 1340 상한에 붙는 지점이 W=1355 여서, 그 위는 폭이 완전히 고정되어 계산이 흔들리지
   않기 때문이다.

   패널 안쪽(padding 16 · 칸 사이 14):
     패널      내부 폭  썸네일 칸  띠 칸    띠 줄 안쪽
     520(종전) 474      252.45    219.53   175.5
     548       502      252       250      206
     600       554      252       302      258
   썸네일 칸은 **오늘 값(실측 252.45)에 고정**한다. 지시는 "실시간 주문을 넓게" 이지
   "썸네일을 줄여라" 가 아니므로, 늘어난 폭은 전부 띠가 가져간다. */
.wl-hero__grid { position: relative; z-index: 1; }

/* 패널을 그린 히어로에서는 안쪽 장식 고리를 **폭과 무관하게** 끈다.
   1200px 위에서는 유리 패널 너머로 비쳐 어지럽고, 768~1199px 에서는 띠가 그 고리 위에
   반투명으로 앉아 흰 고리가 글자 뒤로 비친다(고리를 끄는 종전 규칙은 767px 아래에만
   있어서 그 구간이 통째로 비어 있었다). 바깥 고리는 모서리 장식이라 그대로 둔다. */
.wl-hero--panel::after { display: none; }

/* 기본(좁은 화면) 표현 — 문구 아래에 띠만 세운다. */
.wl-hero__panel {
    display: block;
    /* ★ 이 값은 «띠 상자 전체가 첫 화면 안에 들어오는가» 하나로 정해진다.
       375×812(모바일 테마) 실측 — 히어로의 문구와 버튼이 접힘선의 **572px** 을 이미 쓴다
       (CTA 버튼 셋이 폭 255px 안에서 각각 한 줄로 접힌다). 띠 상자는 227px 다.

       종전 값 20px 은 주석에 «줄 바닥 808px < 812px» 이라고 적혀 있었지만 **실측은 819px
       였다** — 11px 이 접힘선 밖이었다. 그 숫자는 다른 배치(패널 여백이 다른 판)에서
       나온 값으로 보인다. 다시 재서 고친다:
         572(CTA 바닥) + 10(이 여백) + 223(띠) = **805 < 812** (재측정 여유 7px)
       아래 `.wl-hero__feed` 의 세로 여백도 12/10 → 10/8 로 함께 줄였다.
       ★ 여유가 7px 뿐이라 **문구를 늘리거나 글꼴을 바꾸면 다시 넘친다.** 히어로 문구·버튼을
         고칠 때는 이 세 숫자(572 · 여백 · 223)를 반드시 다시 재라.
       ★ 고지 한 줄(`.wl-hero__panel-note`)은 여전히 접힘선 **아래**다(815~842px).
         상자 안으로 올리면 띠 세 줄 중 하나가 대신 밀려나므로 제로섬이고, 두 줄짜리 띠는
         «실시간 주문 현황» 이라기엔 얇다. 375×667(SE급)에서는 세 줄도 안 들어온다 —
         `docs/KNOWN_LIMITS.md` 참조. */
    margin-top: 10px;
    /* 768~1199px 에서 히어로 안쪽이 585~1016px 이라 그냥 두면 띠가 화면을 가로지르는
       검은 막대가 된다(그 구간은 히어로 padding 이 64/48 그대로다). 카드로 읽히는
       폭에서 끊는다. */
    max-width: 440px;
}

/* `.wl-hero--panel` 은 상자를 실제로 그린 히어로에만 붙는다(wl_home.php 가 붙인다).
   상자가 없는 몰에서 2단 그리드를 켜면 오른쪽 칸이 빈 채로 남아 문구가 왼쪽으로
   쏠린다 — 진열이 하나도 없는 새 가맹점 메인이 정확히 그 상태다. */
@media (min-width: 1200px) {
    .wl-hero--panel .wl-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 548px;
        gap: 36px;
        align-items: center;
    }
    /* 그리드 칸이 폭을 정하므로 640px 제한을 푼다. 남겨 두면 넓은 화면에서 문구가
       왼쪽에 몰리고 가운데가 비어 보인다. */
    .wl-hero--panel .wl-hero__inner { max-width: none; }

    .wl-hero--panel .wl-hero__panel {
        display: grid;
        grid-template-columns: 252px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 14px;
        margin-top: 0;
        max-width: none;
        padding: 16px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.30);
        background: rgba(255, 255, 255, 0.12);
        /* 지원하지 않는 브라우저에서는 위 반투명 흰색만 남는다 — 그래도 읽힌다. */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
    }
    /* 모바일 테마는 썸네일 마크업을 아예 안 내보낸다(wl_home.php 의 $wl_hero_thumbs).
       그 판이 넓은 폭에 걸리면(모바일 UA 태블릿 가로) 띠 혼자 252px 칸에 갇힌다 —
       한 칸으로 되돌린다. 서버가 만든 사실을 클래스로 받는다. */
    .wl-hero--panel .wl-hero__panel--feedonly { grid-template-columns: minmax(0, 1fr); }
    .wl-hero--panel .wl-hero__thumbs { display: grid; }
    /* 유리 패널 위로 올라오면 고지 한 줄의 사정이 뒤집힌다 — 아래 note 주석 참조. */
    .wl-hero--panel .wl-hero__panel-note {
        margin: 0;
        padding: 0;
        background: none;
        color: var(--wl-ink, #1a1a1a);
    }
}
@media (min-width: 1360px) {
    .wl-hero--panel .wl-hero__grid { grid-template-columns: minmax(0, 1fr) 600px; }
}

/* ── 상품 썸네일 2×2 ── */
/* 좁은 화면에서는 그리지 않는다(지시: "썸네일은 안 보여도 되요"). 이 규칙은 PC 테마를
   좁게 연 창을 위한 것이다 — 진짜 휴대폰은 마크업 자체를 안 받는다(wl_home.php). */
.wl-hero__thumbs {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
.wl-hero__thumb {
    display: block;
    padding: 7px 7px 9px;
    border-radius: 14px;
    background: #fff;
    color: var(--wl-ink, #1a1a1a);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wl-hero__thumb:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18); }
.wl-hero__thumb-img {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: #f4f4f4;
    aspect-ratio: 1 / 1;
}
/* 코어 get_it_image() 가 width·height 속성을 박아 내보낸다. 칸 크기가 그 값과 다르므로
   여기서 되잡지 않으면 이미지가 카드 밖으로 삐져나온다. */
.wl-hero__thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-hero__thumb b {
    margin: 7px 0 2px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    /* 이름이 길어도 카드 높이를 흔들지 않게 두 줄에서 자른다 — 네 칸의 높이가 어긋나면
       2×2 격자가 무너져 '미니멀' 이 아니라 '엉성' 이 된다. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 이름이 한 줄인 카드와 두 줄인 카드가 섞이면 가격 줄이 카드마다 다른 높이에 선다 —
       2×2 격자에서 그 어긋남이 바로 눈에 띈다. 두 줄 자리를 늘 비워 가격을 한 선에 맞춘다. */
    min-height: 2.7em;
}
.wl-hero__thumb em {
    display: block;
    font-style: normal;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wl-primary-ink, #0b3b2e);
}

/* ── 실시간 주문 띠 ── */
.wl-hero__feed {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* 세로 여백을 12/10 에서 10/8 로 줄였다 — 좁은 화면에서 띠 상자 바닥이 접힘선을
       11px 넘고 있었고(위 .wl-hero__panel 주석의 실측), 그 4px 이 여유의 일부다.
       가로는 그대로 둔다 — 줄 안쪽이 좁아지면 상품명이 더 일찍 잘린다. */
    padding: 10px 12px 8px;
    border-radius: 14px;
    /* 검정 42% — 색이 아니라 **대비 계산**으로 고른 값이다.
       ★ 종전 주석의 «휘도 0.2948 에 (1-a) 를 곱한다» 는 **틀린 모델이라 걷어냈다**
         (2026-09-03 정정). 반투명 검정은 상대휘도에 곱해지지 않는다 — sRGB **채널값**에
         합성되고(c' = c·(1-a)), 휘도는 그 뒤에 감마를 풀어 다시 구해야 한다. 감마가
         2.4 승이라 두 계산은 눈에 띄게 다른 값을 준다.
       바탕은 단색이 아니라 그라디언트(#f2913d → #f26b1d → #d1550f)이므로 **가장 밝은
       정점 #f2913d 로 잰다**(휘도 0.3947). 여기에 0.42 를 덮으면
         rgb(242,145,61)·0.58 = rgb(140,84,35) → 휘도 0.1202 → 흰 글자 **6.17:1**.
       가장 어두운 정점 #d1550f 쪽은 rgb(121,49,9) → 0.0628 → 9.31:1 이라 더 여유롭다.
       즉 전 구간이 본문 기준 4.5:1 을 넘는다. 흰 글자를 얹으려면 바탕을 어둡게 하는
       수밖에 없다 — 주황 맨바탕 위 흰색은 밝은 정점에서 2.36:1 이라 원리상 못 닿는다. */
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.wl-hero__feed-h {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    /* 띠 바탕 위 흰색이 가장 밝은 정점에서 6.17:1 이다. 여기서 흰색을 옅게(0.9 등) 깎으면
       그 여유를 그대로 까먹으므로 흰색으로 둔다 — 이 줄은 11.5px 라 여유가 필요하다. */
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wl-hero__feed-h i {
    width: 6px; height: 6px; border-radius: 50%;
    background: #6ee7a8;
    box-shadow: 0 0 0 0 rgba(110, 231, 168, 0.7);
    animation: wlHeroPulse 1.8s ease-out infinite;
}
@keyframes wlHeroPulse {
    70%  { box-shadow: 0 0 0 7px rgba(110, 231, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(110, 231, 168, 0); }
}
/* 줄이 아래에서 위로 흐른다. 목록을 아래쪽에 붙여 두고(justify-content:flex-end)
   새 줄을 끝에 붙이면, 넘친 줄이 위에서 잘려 나가며 전체가 밀려 올라간다. */
.wl-hero__feed-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    /* 위 26px 을 비워 둔다. 마스크가 지우는 폭이 정확히 그만큼이라, 목록 높이가 내용에
       딱 맞는 좁은 화면(패널이 그리드가 아니라 블록으로 서는 구간)에서는 이 여백이
       없으면 **맨 윗줄이 반쯤 지워진 채로** 앉는다. 넓은 화면에서는 목록이 썸네일
       높이만큼 늘어나 저절로 여백이 생기던 자리라 그동안 안 드러났다. */
    padding: 26px 0 0;
    list-style: none;
    overflow: hidden;
    /* 위쪽을 흐리게 지워 줄이 잘려 나가는 경계를 감춘다 — 없으면 글자가 반쯤
       잘린 채로 멈춰 있는 순간이 보인다. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
}
/* 첫 줄에 시각·코드·이름·상태 넷을 세운다(시각은 2026-09-03 지시로 늘었다).
   넷째 칸을 붙여도 줄 높이는 47.03px 그대로다 — 상태 글자가 그 줄에서 가장 큰 글자가
   아니기 때문이다(실측). 상품명은 아래 줄에 통째로 눕는다. */
.wl-hero__feed-list li {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    grid-template-areas: "time code who state" "item item item item";
    column-gap: 6px;
    row-gap: 2px;
    padding: 7px 9px;
    border-radius: 9px;
    /* 줄 바탕은 **더 어둡게** 간다. 흰색을 옅게 덮으면 줄이 떠 보이지만 그만큼 바탕이
       밝아져 글자 대비가 떨어진다. 겹친 검정은 1-(1-0.42)(1-0.22)=0.5476 이므로 가장
       밝은 정점에서 rgb(242,145,61)·0.4524 = rgb(110,66,28) → 휘도 0.0775 →
       흰 글자 8.24:1 이다(종전 주석의 «0.2948·0.58·0.78 = 5.7:1» 은 휘도에 알파를
       곱하는 틀린 모델이었다 — 위 feed 주석 참조). */
    background: rgba(0, 0, 0, 0.22);
    font-size: 11.5px;
    line-height: 1.35;
    color: #fff;
}
/* 이 연출은 **transform 만** 건드린다. opacity 를 0 에서 올리면 안 되는 이유가 실측으로
   확인됐다(2026-09-03 · 두 번째 판정).
     · 앞 판은 `fill-mode: both` 를 없애면 된다고 봤다. 그것으로는 안 된다 — fill 은
       애니메이션 **구간 밖**을 정할 뿐이고, 구간 **안**에서는 첫 키프레임이 그대로 적용된다.
     · 그래서 타임라인이 0 에 멈춘 환경(getAnimations() 는 running · currentTime 은 0)에서는
       줄이 계속 '구간 안' 이라 opacity 0 에 얼어붙는다. 다섯 줄 전부 computed opacity 0 인
       것을 브라우저에서 직접 읽었다.
   transform 만 쓰면 최악의 경우가 «16px 내려앉은 채로 보인다» 이지 «안 보인다» 가 아니다.
   연출이 없는 것은 견딜 수 있지만, 안 보이는 것은 기능이 없는 것이다.
   (얼어붙는 줄의 수를 하나로 줄이는 쪽은 wl_home.php 가 맡는다 — 연출이 끝나면 `is-new`
    를 타이머로 뗀다. 둘은 같은 사고에 대한 서로 다른 방벽이라 한쪽만 두지 않는다.) */
.wl-hero__feed-list li.is-new { animation: wlHeroRise 0.45s ease-out; }
@keyframes wlHeroRise {
    from { transform: translateY(16px); }
    to   { transform: translateY(0); }
}
/* 옅은 흰색의 하한도 대비가 정한다 — 줄 바탕(가장 밝은 정점에서 rgb(110,66,28))
   위에서 0.75 는 5.43:1, 0.88 은 6.78:1 이다. 더 옅게 하면 "차분해" 보이는 대신
   작은 글자가 기준 아래로 내려간다. */
/* 시각 칸(2026-09-03 지시 "주문 시간도 시간:분"). tabular-nums 가 없으면 1 과 8 의
   폭이 달라 줄마다 시각 칸 너비가 흔들리고, 그 뒤 코드·이름 칸이 통째로 들썩인다 —
   1.4초마다 한 줄씩 들어오는 화면에서는 그 흔들림이 바로 눈에 띈다. */
.wl-hero__feed-list .t { grid-area: time; font-variant-numeric: tabular-nums;
                         color: rgba(255, 255, 255, 0.75); white-space: nowrap; }
.wl-hero__feed-list .c { grid-area: code; font-variant-numeric: tabular-nums;
                         color: rgba(255, 255, 255, 0.75); white-space: nowrap; }
.wl-hero__feed-list b  { grid-area: who; font-weight: 700; white-space: nowrap; }
.wl-hero__feed-list .p { grid-area: item; color: rgba(255, 255, 255, 0.88);
                         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-hero__feed-list em {
    grid-area: state;
    justify-self: end;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    /* 좁은 화면에서 첫 줄 넷이 빠듯하다(375px 에서 줄 안쪽 196px). 접히면 줄 높이가
       튀어 목록이 들썩이므로 접지 않고 그대로 밀어낸다 — 넘치면 li 가 잘라 준다. */
    white-space: nowrap;
    /* 점(#6ee7a8)보다 밝은 초록이다. 점은 도형이라 3:1 이면 되지만 이 글자는 글자라
       4.5:1 이 필요하다. #b7f5d2 는 줄 바탕 위에서 6.67:1 이다. */
    color: #b7f5d2;
}
.wl-hero__panel-note {
    grid-column: 1 / -1;
    margin: 10px 0 0;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 10.5px;
    line-height: 1.5;
    font-weight: 600;
    /* 이 줄은 화면 폭에 따라 **바탕이 갈린다** — 유리 패널은 1200px 위에서만 그려지므로,
       좁은 화면에서는 이 글자가 히어로 그라디언트 위에 맨몸으로 앉는다(2026-09-03 실측).
       그 바탕은 #f2913d(휘도 0.3947)에서 #d1550f(0.2009)까지 흐르는데
         · 먹색(#1a1a1a, 휘도 0.0111)은 어두운 정점에서 4.11:1 — 미달
         · 흰색은 밝은 정점에서 2.36:1 — 미달
       이라 **어느 한 색으로도 전 구간을 못 넘긴다**. 그래서 이 줄에만 어두운 칩을 깔고
       흰 글자로 뒤집는다: 검정 42% 를 덮으면 밝은 정점이 rgb(140,84,35)(휘도 0.1202)라
       흰 글자가 6.17:1, 어두운 정점은 9.31:1 이다.
       고지가 안 읽히면 그 자리에 없는 것과 같다 — 이 띠가 연출임을 알리는 유일한 문장이다.
       1200px 위에서는 사정이 뒤집혀(유리 패널 바탕 휘도 0.4433 → 흰 글자 2.13:1 ·
       먹색 8.07:1) 칩을 걷고 먹색으로 되돌린다(위 min-width:1200px 블록). */
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
}

/* ── 영업 시간 안내 · 단톡방 문 (2026-09-09 사용자 지시 2) ────────────
   히어로 **왼쪽 칸**(문구 아래)에 선다. 오른쪽 주문 띠 상자는 팔 상품이 0건이면
   통째로 안 그려지는데, 영업 시간과 단톡방 주소는 그 날에도 손님이 알아야 하는
   사실이다(wl_home.php 의 그 자리 주석).
   ★ 바탕 규칙은 `.wl-hero__panel-note` 와 **같은 판단**이다 — 히어로 그라디언트 위에서는
     먹색도 흰색도 전 구간 4.5:1 을 못 넘어서, 검정 42% 칩을 깔고 흰 글자로 뒤집는다
     (계산은 그 규칙 주석에 있다: 밝은 정점 6.17:1 · 어두운 정점 9.31:1).
     여기서는 1200px 위에서도 칩을 그대로 둔다 — 이 줄은 유리 패널 **밖**이라
     넓은 화면에서도 바탕이 여전히 그라디언트다. */
.wl-hero__hours {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    width: fit-content;
    max-width: 100%;
    margin: 18px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.5;
}
.wl-hero__hours b { font-weight: 700; letter-spacing: 0.02em; }
.wl-hero__hours span { font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-hero__hours em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-style: normal;
    font-weight: 600;
}
/* 지금 열려 있는가를 **점 하나로** 먼저 말한다. 글을 읽기 전에 색으로 알아채는 자리라
   도형 기준(3:1)이면 되고, 두 색 모두 칩 바탕 위에서 그보다 여유가 있다.
   글자 쪽은 어느 상태에서나 흰색이다 — 상태에 따라 글자색을 깎으면 «닫혔다» 는 사실이
   가장 안 읽히는 색으로 적히게 된다. */
.wl-hero__hours em::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: #6ee7a8;
}
.wl-hero__hours.is-closed em::before { background: #cfd4d8; }
.wl-hero__hours a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 영업 시간 밖 — 띠를 멈추고 그 자리에 «언제 다시 여는가» 를 세운다.
   목록을 지우지 않고 감추는 이유: 개장 시각이 되면 같은 자리에 다시 붙여야 하는데,
   요소를 지웠다 만들면 그때 붙일 자리를 잃는다(wl_home.php 의 그 자리 주석과 짝). */
.wl-hero__feed-off {
    display: none;
    margin: 0;
    padding: 18px 4px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}
.wl-hero__feed.is-closed .wl-hero__feed-list { display: none; }
.wl-hero__feed.is-closed .wl-hero__feed-off  { display: block; }
/* 닫힌 띠에 초록 점이 뛰면 «지금 주문이 들어오는 중» 으로 읽힌다 — 그 점이 이 상자에서
   유일하게 «살아 있음» 을 말하는 신호다. 멈추고 색을 뺀다. */
.wl-hero__feed.is-closed .wl-hero__feed-h i {
    background: #cfd4d8;
    box-shadow: none;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .wl-hero__feed-h i { animation: none; }
    .wl-hero__feed-list li.is-new { animation: none; }
}

/* ── 카테고리 바로가기 ────────────────────────────────────────────── */

.wl-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-right: auto;
}
.wl-footer__legal a {
    color: rgba(26, 20, 14, 0.72);
    font-size: 13px;
    text-decoration: none;
}
.wl-footer__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wl-footer__legal a.is-emphasis {
    color: #111;
    font-weight: 800;
}

.wl-catnav {
    width: min(1280px, calc(100% - 32px));
    margin: 26px auto 0;
}
.wl-catnav ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.wl-catnav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 8px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(26, 20, 14, 0.05);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wl-catnav a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(242, 107, 29, 0.16);
}
.wl-catnav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--wl-primary-soft);
    color: var(--wl-primary);
    font-size: 20px;
}
.wl-catnav__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--wl-ink);
    text-align: center;
    letter-spacing: -0.03em;
}

/* ── 상품 카드: 할인율 뱃지 · 구매수 ────────────────────────────────
   뱃지는 국내 커머스 관례대로 채도 높은 붉은 주황에 흰 글자다. 이 조합은 대비가
   3.0451:1 이라 작은 글자로 쓰면 읽기 기준(4.5:1)에 못 미친다. 색을 어둡게 낮추면
   '특가'로 읽히지 않으므로, 대신 글자를 19px 굵게 키워 큰 글자 기준(3:1)을 넘긴다. */
.wl-badge-sale {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: baseline;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--wl-primary);
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    box-shadow: 0 4px 12px rgba(242, 107, 29, 0.3);
}
.wl-badge-sale em {
    margin-left: 1px;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
}
.wl-buycnt {
    display: block;
    margin-top: 6px;
    color: var(--wl-muted);
    font-size: 12px;
    font-weight: 600;
}
/* 정가는 취소선으로 — 할인 폭이 안 보이면 공동구매를 하는 이유가 화면에 남지 않는다 */
.sct_cost .sct_dict {
    display: inline-block;
    margin-left: 6px;
    color: #a8a8a8;
    font-size: 13px;
    font-weight: 500;
    text-decoration: line-through;
}

/* ── 타임세일 ─────────────────────────────────────────────────────── */
.wl-timesale {
    width: min(1280px, calc(100% - 32px));
    margin: 40px auto 0;
    padding: 26px 28px 8px;
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--sitmt-shadow);
}
.wl-timesale__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}
.wl-timesale__head h3 {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 800;
    letter-spacing: -0.04em;
}
.wl-timesale__clock {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-weight: 700;
    color: var(--wl-primary-ink);
}
.wl-clock__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 7px 6px;
    border-radius: 10px;
    background: var(--wl-ink);
    color: #fff;
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}
.wl-timesale__clock em {
    margin: 0 6px 0 2px;
    font-style: normal;
    font-size: 13px;
}

/* ── 공동구매 안내 ────────────────────────────────────────────────── */
.wl-howto {
    width: min(1280px, calc(100% - 32px));
    margin: 48px auto 0;
}
.wl-howto__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.wl-howto__list li {
    padding: 28px 26px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(26, 20, 14, 0.05);
}
.wl-howto__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--wl-primary);
    color: #fff;
    font-weight: 800;
}
.wl-howto__list strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.035em;
}
.wl-howto__list p {
    margin: 8px 0 0;
    color: var(--wl-muted);
    font-size: 14px;
    line-height: 1.65;
}
.wl-howto__more {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.wl-howto__more a {
    display: block;
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--wl-primary-soft);
    text-decoration: none;
    transition: transform 0.15s ease;
}
.wl-howto__more a:hover { transform: translateY(-3px); }
.wl-howto__more strong {
    display: block;
    color: var(--wl-primary-ink);
    font-size: 16px;
    font-weight: 800;
}
.wl-howto__more span {
    display: block;
    margin-top: 4px;
    color: var(--wl-muted);
    font-size: 13px;
}

/* ── 푸터 ─────────────────────────────────────────────────────────
   기준 디자인의 푸터 블록은 주황 카드다(둥근 모서리 24px + 안쪽 1px 테두리).
   한동안 여기서 먹색으로 덮어썼는데, 기준으로 되돌린다.

   바탕이 주황이 되면 글자는 흰색이 아니라 먹색이어야 한다 — 실측 대비가
   그렇게 말한다. #f26b1d 상대휘도 0.2949 기준으로
     흰색  #fff    → 3.04:1  (본문 기준 4.5:1 미달)
     먹색  #1a1a1a → 5.72:1
   기준 디자인도 같은 이유로 이 카드 안에서만 글자를 rgba(26,20,14,.88) 로 쓴다.
   그래서 아래는 전부 '흰 계열 → 먹 계열' 로 뒤집은 것이다. 되돌리지 말 것. */
.sitmt-footer__top {
    grid-template-columns: 1.1fr 1.6fr auto;
}
.sitmt-footer__links,
.sitmt-footer__info,
.wl-footer__links {
    border-left: 1px solid rgba(26, 20, 14, 0.18);
}
.wl-footer__brand { padding-right: 28px; }
.wl-footer__slogan {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.7;
    /* 기준 디자인의 .sitmt-footer__brand p 는 .78 이지만 그 값은 주황 위에서
       4.34:1 로 본문 기준(4.5:1)에 못 미친다. 이 문구는 기준 디자인에 없는
       우리링크 고유 문장이라 맞출 대상이 없으므로, 카드 본문과 같은 .88 로 올린다. */
    color: rgba(26, 20, 14, 0.88);
}
.sitmt-footer__info span {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.7;
}
/* 관리자에게만 보이는 경고문. 주황 바탕에서 주황 계열 강조색(--wl-accent)은
   바탕에 묻히므로(1.4:1) 먹색으로 세우고 굵기로 구분한다. */
.wl-footer__todo {
    color: #1a1a1a !important;
    font-weight: 700;
}
.wl-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 0 28px;
    white-space: nowrap;
}
.wl-footer__links a {
    color: #1a1a1a;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.wl-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
    .sitmt-footer__top {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 24px;
    }
    .sitmt-footer__links,
    .sitmt-footer__info,
    .wl-footer__links {
        border-left: 0;
        border-top: 1px solid rgba(26, 20, 14, 0.18);
        padding: 20px 0 0;
    }
    .wl-footer__brand { padding: 0; }
}

/* ── 서브 히어로(메인 외 화면 머리말) ───────────────────────────────
   기준 디자인의 서브 히어로는 짙은 그라디언트(#1a1a1a → #2e2013)에 주황 아이브로다.
   여기서 주황 그라디언트로 덮어쓰던 것을 걷어낸다. 헤더가 흰색이던 동안에는
   그 조합이 성립했지만, 헤더를 주황으로 되돌린 지금은
     · 헤더(주황) 바로 10px 아래에 또 주황 덩어리가 붙고
     · 아이브로를 흰색으로 바꿔도 2.73:1, 제목도 3.05:1 에 그친다.
   기본 규칙으로 돌려놓으면 아이브로 5.72:1 · 제목 17.4:1 로 함께 회복된다. */

/* ── 좁은 화면 헤더: 로고가 액션 버튼을 밀어내지 않게 ──────────────
   헤더는 `auto 1fr auto` 그리드인데, 로고가 흰 여백 없이 한 줄로 붙어 있어
   min-content 가 193px 이나 된다. 그 탓에 390px 화면에서 장바구니·로그인이
   화면 밖(423px)으로 밀려 잘렸다. 좁을 때는 태그라인을 접고 글자를 줄인다. */
@media (max-width: 767px) {
    .sitmt-header__inner { min-width: 0; }
    .sitmt-brand,
    .sitmt-drawer__logo { min-width: 0; }
    .wl-logo { gap: 8px; }
    .wl-logo .wl-mark { width: 37px; height: 37px; }  /* 둥근사각 32px + 테두리 여백 */
    .wl-logo__img { width: 37px; height: 37px; }
    .wl-logo__word { font-size: 20px; }
    .sitmt-header .wl-logo__tag { display: none; }
    .sitmt-actions { gap: 8px; }
    /* [현장 수령] 은 좁은 화면에서 접는다. 390px 헤더에는 로고·검색·장바구니·로그인이
       이미 꽉 차 있어서 버튼을 하나 더 세우면 로그인이 화면 밖으로 밀린다(위 주석의
       실측과 같은 사고다). 기능은 서랍 메뉴에 그대로 있다 — wl_header.php 의
       .wl-drawer__quick 항목이 같은 곳으로 간다. */
    .sitmt-pickup-link { display: none; }
}

/* 360px 미만(구형 소형 단말)에서는 헤더에 워드마크가 들어갈 자리가 없다.
   억지로 두면 검색·장바구니 아이콘 위로 글자가 겹친다. 마크만 남긴다 —
   링크에 aria-label 이 있어 스크린리더에는 '09SCM'이 그대로 읽힌다. */
@media (max-width: 359px) {
    .sitmt-header .wl-logo__word { display: none; }
}

/* ══ 헤더 메뉴 대비 — 기준 디자인의 색을 하나도 바꾸지 않고 기준을 넘긴다 ══
   ── 왜 색이 아니라 글자를 건드렸는가 (전부 실측 계산값이다) ──
   바탕 #f26b1d 의 상대휘도는 0.294813 이다. 그 위의 흰 글자 대비는
     #ffffff (불투명도 100%) → 3.0451:1
   이고, 이 값이 '흰색이 이 주황 위에서 낼 수 있는 최댓값'이다. 즉 바탕색을
   그대로 두는 한 본문 기준 4.5:1 은 원리상 도달할 수 없다 — 흰색을 더 희게
   만들 방법이 없기 때문이다.

   4.5:1 을 만들려면 바탕을 어둡게 해야 한다. 색상·채도를 고정하고 밝기만
   낮춰 훑어 보면 4.5:1 을 처음 넘는 색은 #c9510c(흰 4.5009:1) 인데,
     · 기준 디자인 색과의 색차 ΔE00 = 10.76, RGB 차 (-41, -26, -17)
       (ΔE00 2.3 이 사람이 두 색을 다르다고 느끼기 시작하는 경계다.
        10.76 은 '조금 어두운 주황'이 아니라 그냥 다른 색이다)
     · 게다가 그 색 위에서는 푸터 카드의 먹색 글자가 5.7155 → 3.8669 로
       떨어져, 지금 통과하고 있는 것이 대신 깨진다.
   그래서 색은 한 글자도 바꾸지 않는다 — 기준 디자인 대비 ΔE00 = 0.00 이다.

   대신 WCAG 의 '큰 글자'(18pt=24px 또는 14pt 굵게=18.67px 이상, 기준 3:1)로
   올려 통과시킨다. 19px/700 은 그 경계를 넘으므로 3.0451:1 로 기준을 만족한다.
   이 테마는 이미 같은 해법을 쓰고 있다 — 할인율 뱃지(.wl-badge-sale)가
   같은 이유로 19px/800 이다. 그 선례와 크기를 맞췄다.

   ★ 여유가 1.5%(3.0451 대 3.0) 뿐이다. 헤더 주황을 한 톤이라도 밝히면
     그 즉시 미달이 된다. 색을 만질 일이 생기면 이 블록부터 다시 계산할 것. */
.sitmt-nav > ul > li > a,
.sitmt-nav > ul > li > .sitmt-nav__top {
    font-size: 19px;
    font-weight: 700;
    /* 88px 띠 안에서 라벨이 두 줄로 접히면 큰 글자로 키운 뜻이 없어진다 */
    white-space: nowrap;
}

/* 원래 hover 는 opacity:.72 였다. 그 상태의 실측 대비는 2.2401:1 로 큰 글자
   기준(3:1)에도 못 미친다 — 기준은 hover·focus 같은 상태에도 그대로 적용된다.
   (opacity 0.85→2.5893 · 0.92→2.7948 이라 '조금 덜 흐리게'로는 해결되지 않는다)
   그래서 흰색을 100% 로 붙들고 밑줄로 상태를 알린다. 대비는 3.0451:1 그대로다. */
.sitmt-nav > ul > li > a:hover,
.sitmt-nav > ul > li > a:focus-visible,
.sitmt-nav > ul > li > .sitmt-nav__top:hover,
.sitmt-nav > ul > li > .sitmt-nav__top:focus-visible {
    color: #fff;
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* 드롭다운은 흰 바탕이다. hover 색이 #f26b1d 면 3.0451:1 이라 13.5px 글자
   기준(4.5:1)에 못 미친다. 같은 계열의 --wl-primary-ink 는 5.2892:1 이다. */
.sitmt-nav__sub a:hover,
.sitmt-nav__sub a:focus-visible {
    color: var(--wl-primary-ink);
}

/* 아이콘 버튼의 흰 테두리는 rgba(255,255,255,.4) 라 주황 위 1.5515:1 이다 —
   UI 요소 경계 기준(3:1)에 크게 못 미친다. 흰색은 이 주황 위에서 100% 일 때
   3.0451:1 이 최댓값이므로, 기준을 넘기는 알파는 1.0 하나뿐이다
   (0.55→1.8449 · 0.70→2.1900 · 0.85→2.5893). 색 계열은 그대로 두고 알파만 올린다.
   ※ 아이콘 글리프 자체(흰색)는 3.0451:1 로 이미 3:1 을 넘는다 — 손대지 않는다.
   ※ 드로어 닫기 버튼은 흰 패널 위라 따로 먹색 테두리를 갖고 있으므로,
      그것까지 흰색으로 만들지 않도록 헤더 안으로 한정한다. */
.sitmt-header .sitmt-icon-btn,
.sitmt-header .sitmt-icon-link {
    border-color: #fff;
}

/* 라벨이 14px/500 → 19px/700 이 되면서 메뉴 줄 폭이 494.19px → 611px 로 늘었다.
   헤더 한 줄에 필요한 폭은 로고 193.09 + 메뉴 611 + 우측 230.31 + 그리드 간격 48
   = 1082.4px 다. 헤더 안쪽 폭은 min(1280px, 100% - 32px) 인데 이 100% 는 세로
   스크롤바를 뺀 폭이므로, 뷰포트로는 1082.4 + 32 + 15(스크롤바) = 1129.4px
   이상이어야 한다. Pretendard 를 못 받아 대체 글꼴로 떨어지면 더 넓어지므로
   여유를 두고 1180px 아래에서는 드로어(햄버거)로 넘긴다(1181px 실측 여유 51.6px).
   ※ 기존 max-width:1100px 블록은 푸터·상품 그리드까지 함께 바꾸므로 건드리지
      않는다. 여기서는 메뉴/햄버거 두 줄만 따로 앞당긴다. */
@media (max-width: 1180px) {
    .sitmt-nav { display: none; }
    .sitmt-drawer-toggle { display: inline-flex; }
    /* 햄버거가 보이는 폭에서는 상단띠+헤더를 뷰포트에 고정한다.
       sticky 는 html/body overflow-x:clip 때문에 스크롤과 같이 사라진다. */
    .sitmt-chrome {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1200;
        background: #111111;
    }
    .sitmt-header {
        position: static;
    }
    .sitmt-chrome-gap {
        display: block;
        height: var(--wl-chrome-h, 112px);
        pointer-events: none;
    }
}

/* 스마트폰 손님 서랍 — 칸·글자를 키우고 한글이 한 글자씩 세로로 접히지 않게.
   햄버거가 켜지는 폭(≤1180)에서만 적용한다. nowrap 이 keep-all 보다 강하다. */
@media (max-width: 1180px) {
    .sitmt-drawer__panel {
        width: min(100vw, 100%);
        max-width: none;
        padding: 18px 18px 28px;
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    }
    .sitmt-drawer__nav ul { margin-top: 16px; }
    .sitmt-drawer__nav > ul > li {
        padding: 0;
    }
    .sitmt-drawer__nav > ul > li > .sitmt-drawer__top,
    .sitmt-drawer__nav a.sitmt-drawer__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 12px 2px;
        font-size: clamp(17px, 4.8vw, 20px);
        font-weight: 800;
        line-height: 1.3;
        word-break: keep-all;
        overflow-wrap: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sitmt-drawer__nav li ul { margin: 0 0 8px; padding: 0 0 8px 8px; }
    .sitmt-drawer__nav li ul li { padding: 0; }
    .sitmt-drawer__nav li ul a {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: 8px 10px;
        font-size: clamp(15px, 4.2vw, 17px);
        font-weight: 600;
        word-break: keep-all;
        overflow-wrap: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wl-drawer__quick > a.sitmt-drawer__top {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        white-space: normal;
        min-height: 56px;
        overflow: hidden;
    }
    .wl-drawer__quick small {
        display: block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }
    #category .cate_li_1,
    #gnb_all .gnb_al_li {
        float: none !important;
        width: 100% !important;
        min-height: 0 !important;
    }
    #category .cate_li_1_a,
    #gnb_all .gnb_al_a,
    #gnb .gnb_1da,
    .gnb_2da {
        word-break: keep-all;
        overflow-wrap: normal;
        white-space: nowrap;
    }
}

/* ── 2026-09-03: 여기 있던 «좁은 구간에서만 메뉴 간격 좁히기» 두 규칙을 지웠다 ──
   그 규칙들의 전제는 «메뉴는 한 줄이고, 좁을 때만 우측 묶음에 밀린다» 였다. 전제가 둘 다
   틀렸다. ① 우측 묶음이 밀리는 진짜 원인은 폭이 아니라 그리드 가운데 칸의 `1fr`(최소 크기
   = 내용 크기)이었고 — 1440px 에서도 우측 묶음이 419px 화면 밖이었다(운영 실측) —
   그것은 `minmax(0, 1fr)` 로 이 파일 머리에서 고쳤다. ② 간격 20px 는 이제 **기본값**이라
   (`.sitmt-nav > ul`) 구간별로 다시 줄 것이 없다.
   지우는 편이 나은 이유가 하나 더 있다: 그 규칙들은 단축 속성 `gap: 20px` 를 써서
   기본 규칙의 `row-gap: 2px` 까지 20px 로 되돌린다 — 메뉴가 두 줄로 접히는 몰에서
   그 구간만 헤더가 18px 더 높아진다. 남겨 두면 «왜 이 폭에서만 헤더가 튀나» 가 된다. */

/* 배송 불가(픽업 전용) 배지 — SHOP-07.
   상품명 옆에 붙는 작은 알약. 목록·상세 어디서든 같은 모양이어야 해서 여기 한 벌만 둔다.
   색은 경고(빨강)가 아니라 안내(회청)다 — 못 파는 물건이 아니라 '픽업으로 받는' 물건이다. */
.wl-nodel{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;
  background:#eef2f7;color:#41556f;border:1px solid #d7e0ea;
  font-size:11px;font-weight:700;line-height:1.5;vertical-align:middle;white-space:nowrap}

/* ── 메인 매장정보 띠 (IA v1.2 S-004) ────────────────────────────
   목업 scm09-retail-mall-mockup 상단 5칸과 같은 자리·비율이다.
   히어로 위에 서서 헤더와 본문을 가른다. 흰 바탕 + 연한 세로선. */
.wl-storeinfo {
    background: #fff;
    border-bottom: 1px solid #ebebeb;
}
.wl-storeinfo__inner {
    width: min(100%, 1600px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.5fr);
    padding: 0 24px;
    box-sizing: border-box;
}
.wl-storeinfo__cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 80px;
    padding: 14px 18px;
    border-right: 1px solid #ebebeb;
}
.wl-storeinfo__cell:first-child { border-left: 1px solid #ebebeb; }
.wl-storeinfo__cell > span {
    margin-bottom: 5px;
    color: var(--wl-muted);
    font-size: 12px;
    line-height: 1.5;
}
.wl-storeinfo__cell strong,
.wl-storeinfo__cell a {
    overflow: hidden;
    color: var(--wl-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wl-storeinfo__cell a:hover { color: var(--wl-primary); }
.wl-storeinfo__cell--bank > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.wl-storeinfo__cell--bank strong { flex: 1 1 auto; min-width: 0; }
.wl-storeinfo__copy {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #ffd0b5;
    border-radius: 4px;
    background: #fff0e7;
    color: var(--wl-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.wl-storeinfo__copy:focus-visible {
    outline: 2px solid var(--wl-primary);
    outline-offset: 2px;
}

.wl-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}
.wl-footer__legal a { color: inherit; }
.wl-footer__legal a.is-emphasis {
    color: var(--wl-ink);
    font-weight: 700;
}
.wl-footer__about {
    color: var(--wl-primary) !important;
    font-weight: 700;
}
.wl-footer__sol {
    margin: 0;
    color: var(--wl-ink);
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 1023px) {
    .wl-storeinfo__inner {
        grid-template-columns: repeat(3, 1fr);
        padding: 16px 24px;
        gap: 1px;
    }
    .wl-storeinfo__cell {
        min-height: 76px;
        margin: 0 -1px -1px 0;
        padding: 12px 14px;
        border: 1px solid #ebebeb;
    }
    .wl-storeinfo__cell--bank { grid-column: span 2; }
}
@media (max-width: 720px) {
    .wl-storeinfo__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 0;
    }
    .wl-storeinfo__cell,
    .wl-storeinfo__cell:first-child {
        min-height: 70px;
        margin: 0;
        padding: 12px 14px;
        border-top: 0;
        border-left: 0;
        border-right: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;
    }
    .wl-storeinfo__cell:nth-child(2n) { border-right: 0; }
    .wl-storeinfo__cell--bank {
        grid-column: 1 / -1;
        border-right: 0;
    }
    .wl-storeinfo__cell strong,
    .wl-storeinfo__cell a { white-space: normal; }
    .sitmt-footer__bottom {
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

.wl-recv { margin: 12px 0 16px; }
.wl-recv__label { margin: 0 0 8px; font-weight: 700; }
.wl-recv__btns { display: flex; gap: 8px; }
.wl-recv__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer;
}
.wl-recv__btn.is-on, .wl-recv__btn:has(input:checked) {
    border-color: #111; font-weight: 700; background: #f7f7f7;
}
.wl-soldout {
    display: inline-block; margin-left: 6px; padding: 2px 8px;
    border-radius: 4px; background: #111; color: #fff; font-size: 12px; font-weight: 700;
}
.wl-price-rate { color: #c00; font-weight: 800; margin-right: 4px; }
.wl-cart-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.wl-cart-tab {
    padding: 10px 18px; border: 1px solid #ddd; background: #fff; border-radius: 8px; cursor: pointer;
}
.wl-cart-tab.is-on { border-color: #111; font-weight: 800; }
.wl-cart-tabsum { margin: 0 0 12px; font-weight: 700; }
.wl-axes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 20px; }
.wl-axes div { border: 1px solid #eee; border-radius: 8px; padding: 10px 12px; background: #fff; }
.wl-axes dt { font-size: 12px; color: #888; }
.wl-axes dd { margin: 4px 0 0; font-weight: 800; }
.wl-consent { display: block; margin: 12px 0 20px; font-weight: 700; }
.wl-main-bn { width: min(1280px, calc(100% - 32px)); margin: 16px auto 0; }
.wl-fr-terms { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.wl-term-view { margin-left: 8px; }