/* =============================================================================
   UXC_Flarumix — Shop CSS  (shop.css)
   테마 CSS 변수(--color-prime, --layout-* 등)를 그대로 계승
   작성 목적: theme/UXC_Flarumix/shop/ 전용 레이아웃 및 컴포넌트
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. 쇼핑몰 서브 네비게이션 바 (.shopBar)
   head.php 의 <main class="contentsWrap"> 최상단에 위치
   ----------------------------------------------------------------------------- */
.shopBar {
    width: 100%;
    background: var(--layout-header, #ffffff);
    border-bottom: 1px solid var(--layout-header-border, #eeeeee);
    margin-bottom: 1.25rem;
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.shopBarInner {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    max-width: 100%;
    flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   2. 카테고리 버튼 + 패널 토글 래퍼
   ----------------------------------------------------------------------------- */
.shopCategoryWrap {
    position: relative;
    flex-shrink: 0;
}

.shopCategoryBtn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    background: var(--color-prime, #6f48ff);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s;
    white-space: nowrap;
}
.shopCategoryBtn:hover { background: color-mix(in srgb, var(--color-prime) 80%, #000 20%); }
.shopCategoryBtn i { font-size: 1rem; }
.shopCatArrow { transition: transform .2s; }
.shopCategoryPanel.open ~ .shopCategoryBtn .shopCatArrow,
.shopCategoryBtn.open .shopCatArrow { transform: rotate(180deg); }

/* -----------------------------------------------------------------------------
   3. 카테고리 패널 (드롭다운)
   ----------------------------------------------------------------------------- */
.shopCategoryPanel {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    min-width: 260px;
    max-width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--layout-dropdown-bg, #ffffff);
    border: 1px solid var(--layout-dropdown-border, #eeeeee);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 1100;
}
.shopCategoryPanel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.shopCategoryPanelInner { padding: .5rem 0; }

.shopCategoryHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--layout-dropdown-border, #eeeeee);
    font-size: .82rem;
    font-weight: 700;
    color: var(--layout-snb-active-bg, #212121);
}
.shopCategoryHeader i { margin-right: .3rem; color: var(--color-prime); }

.shopCategoryClose {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    transition: color .15s;
}
.shopCategoryClose:hover { color: #e53935; }

/* L1 분류 */
.shopCateL1 { list-style: none; margin: 0; padding: .3rem 0; }
.shopCateL1Item { border-bottom: 1px solid var(--layout-dropdown-border, #f0f0f0); }
.shopCateL1Item:last-child { border-bottom: none; }
.shopCateL1Link {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .6rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.shopCateL1Link:hover {
    background: var(--layout-dropdown-hover-bg, #f5f5f5);
    color: var(--color-prime);
}
.shopCateL1Link i { color: var(--color-prime); font-size: .9rem; }

/* L2 서브 분류 */
.shopCateL2 { list-style: none; margin: 0; padding: 0 0 .3rem 0; background: var(--layout-snb-hover-bg, #f5f5f5); }
.shopCateL2Item { }
.shopCateL2Link {
    display: block;
    padding: .45rem 1rem .45rem 2.2rem;
    font-size: .82rem;
    color: #666;
    text-decoration: none;
    transition: color .15s, background .15s;
}
.shopCateL2Link:hover { color: var(--color-prime); background: #ede9ff; }

/* 분류 없음 */
.shopNoCategory {
    padding: 1.2rem 1rem;
    font-size: .82rem;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* 카테고리 딤 배경 */
.shopCategoryDim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: transparent;
}
.shopCategoryDim.show { display: block; }

/* -----------------------------------------------------------------------------
   4. 상품 유형 빠른 링크 (.shopTypeNav)
   ----------------------------------------------------------------------------- */
.shopTypeNav {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex: 1;
    flex-wrap: wrap;
}
.shopTypeLink {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .4rem .7rem;
    font-size: .82rem;
    color: inherit;
    text-decoration: none;
    border-radius: 5px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.shopTypeLink i { font-size: .95rem; color: var(--color-prime); }
.shopTypeLink:hover {
    background: var(--layout-dropdown-hover-bg, #f5f5f5);
    color: var(--color-prime);
}

/* -----------------------------------------------------------------------------
   5. 우측 툴바 (장바구니, 마이페이지, 검색)
   ----------------------------------------------------------------------------- */
.shopBarTools {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* 장바구니 버튼 */
.shopCartBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--layout-dropdown-hover-bg, #f5f5f5);
    color: inherit;
    text-decoration: none;
    font-size: 1.2rem;
    transition: background .2s, color .2s;
}
.shopCartBtn:hover { background: var(--color-prime); color: #fff; }

.shopCartBadge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e53935;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    border: 2px solid var(--layout-header, #fff);
}

/* 마이페이지 버튼 */
.shopMypageBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--layout-dropdown-hover-bg, #f5f5f5);
    color: inherit;
    text-decoration: none;
    font-size: 1.2rem;
    transition: background .2s, color .2s;
}
.shopMypageBtn:hover { background: var(--color-prime); color: #fff; }

/* 로그인 버튼 */
.shopLoginBtn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .38rem .8rem;
    border: 1px solid var(--color-prime);
    color: var(--color-prime);
    text-decoration: none;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    transition: background .2s, color .2s;
}
.shopLoginBtn:hover { background: var(--color-prime); color: #fff; }

/* 검색 폼 */
.shopSearchForm {
    display: flex;
    align-items: center;
    border: 1px solid var(--layout-header-border, #eeeeee);
    border-radius: 20px;
    overflow: hidden;
    background: var(--layout-dropdown-hover-bg, #f5f5f5);
    transition: border-color .2s, box-shadow .2s;
}
.shopSearchForm:focus-within {
    border-color: var(--color-prime);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-prime) 20%, transparent);
}
.shopSearchForm input[type="text"] {
    border: none;
    outline: none;
    background: transparent;
    padding: .4rem .75rem;
    font-size: .83rem;
    width: 180px;
    color: inherit;
}
.shopSearchForm input[type="text"]::placeholder { color: #bbb; }
.shopSearchForm button[type="submit"] {
    background: none;
    border: none;
    padding: .4rem .65rem;
    cursor: pointer;
    color: #888;
    font-size: 1rem;
    transition: color .15s;
    display: flex;
    align-items: center;
}
.shopSearchForm button[type="submit"]:hover { color: var(--color-prime); }

/* -----------------------------------------------------------------------------
   5-G. 쇼핑몰 gnbWrap 내 툴바 (.shopGnbTools)
   gnbWrap 의 height:46px 에 맞춰 아이콘/검색폼 크기 조정
   ----------------------------------------------------------------------------- */
.gnbWrap .shopGnbTools {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    padding-right: .5rem;
}
/* gnb 내 검색폼: 너비 축소, 높이 맞춤 */
.gnbWrap .shopGnbSearch {
    background: var(--layout-bg, #fff);
}
.gnbWrap .shopGnbSearch input[type="text"] {
    width: 160px;
    padding: .32rem .7rem;
    font-size: .82rem;
}
.gnbWrap .shopGnbSearch:focus-within input[type="text"] {
    width: 200px;
    transition: width .25s;
}
/* gnb 내 아이콘 버튼: 크기 맞춤 */
.gnbWrap .shopGnbBtn {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
}

/* -----------------------------------------------------------------------------
   6. 쇼핑몰 상품 목록 / 상세 페이지 기본 스타일 보정
   ----------------------------------------------------------------------------- */

/* 스킨 래퍼가 contentsWrap 안에서 적절히 표시되도록 */
.contentsWrap .shop-wrap,
.contentsWrap .item_list,
.contentsWrap #item_view {
    width: 100%;
}

/* 기본 그누보드 shop 버튼 스타일 UXC 보정 */
.contentsWrap .btn_shop,
.contentsWrap .btn_cart,
.contentsWrap .btn_buy {
    border-radius: 6px;
    font-weight: 600;
    transition: filter .15s;
}
.contentsWrap .btn_shop:hover,
.contentsWrap .btn_cart:hover,
.contentsWrap .btn_buy:hover { filter: brightness(0.92); }

/* 상품 카드 이미지 비율 보정 */
.contentsWrap .item_img img {
    border-radius: 8px;
    object-fit: cover;
}

/* 가격 텍스트 — 브랜드 컬러 활용 */
.contentsWrap .item_price,
.contentsWrap .it_price {
    color: var(--color-prime);
    font-weight: 700;
}

/* 할인율 배지 */
.contentsWrap .it_dc,
.contentsWrap .discount_rate {
    background: #e53935;
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .78rem;
    font-weight: 700;
}

/* 주문 폼 입력 필드 통일 */
.contentsWrap .frm_input,
.contentsWrap input[type="text"],
.contentsWrap input[type="email"],
.contentsWrap select {
    border: 1px solid var(--layout-header-border, #ddd);
    border-radius: 6px;
    padding: .45rem .7rem;
    font-size: .88rem;
    transition: border-color .2s;
}
.contentsWrap .frm_input:focus,
.contentsWrap input[type="text"]:focus,
.contentsWrap input[type="email"]:focus,
.contentsWrap select:focus {
    outline: none;
    border-color: var(--color-prime);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-prime) 15%, transparent);
}

/* -----------------------------------------------------------------------------
   7. 다크모드 대응
   ----------------------------------------------------------------------------- */
:root.darkMode .shopBar {
    background: var(--layout-header, #000);
    border-color: var(--layout-header-border, #333);
}
:root.darkMode .shopCategoryPanel {
    background: var(--layout-dropdown-bg, #1a1a1a);
    border-color: var(--layout-dropdown-border, #333);
}
:root.darkMode .shopCateL2 {
    background: var(--layout-snb-hover-bg, #2a2a2a);
}
:root.darkMode .shopCateL2Link:hover {
    background: rgba(111,72,255,.25);
}
:root.darkMode .shopSearchForm {
    background: #1a1a1a;
    border-color: #333;
}
:root.darkMode .shopCartBtn,
:root.darkMode .shopMypageBtn {
    background: #1a1a1a;
}

/* -----------------------------------------------------------------------------
   8. 반응형: 좁은 화면 대응 (PC 테마이지만 브라우저 창 축소 시 보정)
   ----------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .shopTypeNav { display: none; }
    .shopSearchForm input[type="text"] { width: 120px; }
}
@media (max-width: 600px) {
    .shopBarInner { gap: .3rem; padding: .4rem .6rem; }
    .shopSearchForm input[type="text"] { width: 90px; }
    .shopBarTools { gap: .3rem; }
}

/* -----------------------------------------------------------------------------
   9. 쇼핑몰 메인 페이지 섹션 (.shopSection, .shopSectionHeader)
   ----------------------------------------------------------------------------- */
.shopMainBanner { margin-bottom: 1.5rem; }
.shopMainBanner img { border-radius: 10px; }

.shopSection {
    margin-bottom: 2.5rem;
}

.shopSectionHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--color-prime, #6f48ff);
    margin-bottom: 1rem;
}

.shopSectionTitle {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}
.shopSectionTitle i { color: var(--color-prime); font-size: 1.2rem; }
.shopSectionTitle a { color: inherit; text-decoration: none; }
.shopSectionTitle a:hover { color: var(--color-prime); }

.shopSectionMore {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .82rem;
    color: #888;
    text-decoration: none;
    transition: color .15s;
}
.shopSectionMore:hover { color: var(--color-prime); }
.shopSectionMore i { font-size: .95rem; }

/* =============================================================================
   10. 쇼핑몰 사이드바 — .sideWrap .shopSideGnb
       커뮤니티 사이드바(layout.css .sideGnb)와 동일 구조를 사용하며,
       쇼핑몰 전용 요소(배지·최근 본 상품 행)만 추가합니다.
   ============================================================================= */

/* nav 섹션 사이 구분선 */
.sideWrap .shopSideGnb .nav {
    border-bottom: 1px solid var(--layout-sidebar-border, #eee);
}
.sideWrap .shopSideGnb .nav:last-child { border-bottom: none; }

/* 최근 본 상품 nav — stv_row 가 nav 패딩 안에 배치되도록 */
.sideWrap .shopSideGnb .nav.shopSideTvWrap { padding-bottom: 8px; }

/* ── 섹션 헤더 (groupTitle) — layout.css 값 완전 계승 ───────── */
.sideWrap .shopSideGnb .nav h2.groupTitle {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 12px 20px 8px;
    color: var(--color-prime);
    font-size: 16px;
    font-weight: 600;
    gap: 4px;
    cursor: default;
}
.sideWrap .shopSideGnb .nav h2.groupTitle.shopSideTitleToggle {
    cursor: pointer;
    justify-content: space-between;
}
.sideWrap .shopSideGnb .nav h2.groupTitle.shopSideTitleToggle span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sideWrap .shopSideGnb .nav h2.groupTitle > i,
.sideWrap .shopSideGnb .nav h2.groupTitle span > i {
    font-size: 22px;
}

/* ── 접기 화살표 ────────────────────────────────────────────── */
.shopSideChevron {
    font-size: 18px;
    transition: transform .2s;
    margin-left: auto;
    color: var(--layout-sidebar-border, #aaa);
}

/* collapsed 상태 */
#shopSideCateBody.collapsed,
#shopSideTvBody.collapsed,
#shopSideWishBody.collapsed { display: none; }

/* ── 빠른 메뉴 링크 — layout.css 의 .sideGnb .nav ul li a 와 동일 */
.sideWrap .shopSideGnb .shopSideNav {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
}
.sideWrap .shopSideGnb .shopSideNav > li > a {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sideWrap .shopSideGnb .shopSideNav > li > a > i {
    font-size: 22px;
    margin-right: 4px;
}
.sideWrap .shopSideGnb .shopSideNav > li > a:hover,
.sideWrap .shopSideGnb .shopSideNav > li.active > a {
    background: var(--layout-sidebar-bg, rgba(111,72,255,.08));
    color: var(--color-prime);
}

/* 배지 (장바구니 수량) */
.shopSideBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-prime, #6f48ff);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 10px;
    margin-left: auto;
}

/* ── 분류 트리 ───────────────────────────────────────────────── */
.shopSideCate {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
}
.shopSideCateL1 { margin: 0; }
.shopSideCateL1Link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 20px;
    font-size: 16px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    transition: background .15s, color .15s;
    border-radius: 6px;
}
.shopSideCateL1Link > i { font-size: 18px; }
.shopSideCateL1Link:hover {
    background: var(--layout-sidebar-bg, rgba(111,72,255,.08));
    color: var(--color-prime);
}
.shopSideCateArrow { margin-left: auto; font-size: 16px; transition: transform .2s; }
.shopSideCateL1.open > .shopSideCateL1Link .shopSideCateArrow { transform: rotate(180deg); }

/* L2 서브메뉴 */
.shopSideCateL2 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
}
.shopSideCateL1.open > .shopSideCateL2 { display: block; }
.shopSideCateL2Item { display: flex; align-items: center; gap: 10px; }
.shopSideCateL2Item::before {
    content: "";
    display: block;
    width: 1px;
    height: 28px;
    margin: 0 0 0 28px;
    background: var(--layout-sidebar-border, #ddd);
    flex-shrink: 0;
}
.shopSideCateL2Link {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 4px 20px 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.shopSideCateL2Link > i { font-size: 14px; opacity: .6; }
.shopSideCateL2Link:hover { color: var(--color-prime); }

/* 빈 메시지 */
.shopSideEmpty { padding: 6px 20px 12px; font-size: 14px; color: #aaa; }

/* ── 다크모드 ───────────────────────────────────────────────── */
:root.darkMode .shopSideGnb .nav { border-color: var(--layout-sidebar-border, #2a2a2a); }
:root.darkMode .shopSideCateL2Item::before { background: var(--layout-sidebar-border, #333); }

/* 이제 사용하지 않는 .shopLayout / .shopSide — 남겨두되 무력화 */
.shopLayout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    align-items: start;
    min-height: 60vh;
}

/* ── 사이드바 ────────────────────────────────────────────────── */
.shopSide {
    width: 240px;
    min-height: 100%;
    background: var(--layout-header, #fff);
    border-right: 1px solid var(--layout-header-border, #eee);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    z-index: 800;
    flex-shrink: 0;
}
.shopSide::-webkit-scrollbar { width: 4px; }
.shopSide::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* ── 메인 콘텐츠 ─────────────────────────────────────────────── */
.shopMain {
    min-width: 0;       /* grid 자식 overflow 방지 */
    padding: 0 1.25rem 1.5rem;
}

/* ── 사이드바 섹션 ───────────────────────────────────────────── */
.shopSideSection {
    border-bottom: 1px solid var(--layout-header-border, #eee);
    padding: .6rem 0;
}
.shopSideSection:last-child { border-bottom: none; }

.shopSideTitle {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .4rem .9rem;
    margin: 0;
}
.shopSideTitle i { font-size: 1rem; color: var(--color-prime, #6f48ff); }

/* 접기/펼치기 가능한 제목 */
.shopSideTitleToggle {
    cursor: pointer;
    user-select: none;
    justify-content: space-between;
}
.shopSideTitleToggle:hover { color: var(--color-prime, #6f48ff); }

.shopSideChevron {
    font-size: .9rem;
    transition: transform .2s;
    margin-left: auto;
}

/* collapsed 상태 */
.shopSideCateBody.collapsed,
.shopSideTvBody.collapsed,
.shopSideWishBody.collapsed { display: none; }

/* ── 빠른 메뉴 내비 ──────────────────────────────────────────── */
.shopSideNav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.shopSideNav li { margin: 0; }
.shopSideNav li a {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    font-size: .88rem;
    color: #444;
    text-decoration: none;
    transition: background .15s, color .15s;
    border-radius: 0;
}
.shopSideNav li a:hover,
.shopSideNav li.active a,
.shopSideNav li a.active {
    background: color-mix(in srgb, var(--color-prime, #6f48ff) 10%, transparent);
    color: var(--color-prime, #6f48ff);
}
.shopSideNav li a i { font-size: 1.05rem; flex-shrink: 0; }

/* 배지 (장바구니 수량) */
.shopSideBadge {
    display: inline-block;
    background: var(--color-prime, #6f48ff);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 10px;
    margin-left: auto;
}

/* ── 분류 트리 ───────────────────────────────────────────────── */
.shopSideCate {
    list-style: none;
    margin: 0;
    padding: 0 0 .4rem;
}

/* L1 */
.shopSideCateL1 { margin: 0; }
.shopSideCateL1Link {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    font-size: .86rem;
    color: #333;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.shopSideCateL1Link:hover {
    background: color-mix(in srgb, var(--color-prime, #6f48ff) 8%, transparent);
    color: var(--color-prime, #6f48ff);
}
.shopSideCateL1Link i { font-size: .95rem; flex-shrink: 0; }

/* L1 토글 화살표 */
.shopSideCateArrow {
    margin-left: auto;
    font-size: .9rem;
    transition: transform .2s;
}
.shopSideCateL1.open > .shopSideCateL1Link .shopSideCateArrow {
    transform: rotate(180deg);
}

/* L2 서브메뉴 — 기본 숨김 */
.shopSideCateL2 {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    display: none;
}
.shopSideCateL1.open > .shopSideCateL2 { display: block; }

.shopSideCateL2Item { margin: 0; }
.shopSideCateL2Link {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .9rem;
    font-size: .83rem;
    color: #555;
    text-decoration: none;
    transition: color .15s, background .15s;
}
.shopSideCateL2Link:hover {
    color: var(--color-prime, #6f48ff);
    background: color-mix(in srgb, var(--color-prime, #6f48ff) 6%, transparent);
}
.shopSideCateL2Link i { font-size: .88rem; flex-shrink: 0; opacity: .6; }

/* 빈 메시지 */
.shopSideEmpty {
    padding: .5rem .9rem;
    font-size: .82rem;
    color: #aaa;
}

/* ── 모바일 사이드바 토글 버튼 ───────────────────────────────── */
.shopSideToggleBtn {
    display: none;   /* PC에서는 숨김 */
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    margin: .5rem 0 .75rem;
    background: var(--color-prime, #6f48ff);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.shopSideToggleBtn i { font-size: 1.1rem; }

/* ── 모바일 사이드바 닫기 버튼 ───────────────────────────────── */
.shopSideClose {
    display: none;
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.shopSideClose:hover { color: var(--color-prime, #6f48ff); }

/* ── 모바일 딤 배경 ───────────────────────────────────────────── */
.shopSideDim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 799;
}
.shopSideDim.show { display: block; }

/* =============================================================================
   11. 다크모드 — 사이드바
   ============================================================================= */
:root.darkMode .shopSide {
    background: var(--layout-header, #111);
    border-color: var(--layout-header-border, #2a2a2a);
}
:root.darkMode .shopSideSection { border-color: var(--layout-header-border, #2a2a2a); }
:root.darkMode .shopSideTitle { color: #aaa; }
:root.darkMode .shopSideNav li a { color: #ccc; }
:root.darkMode .shopSideNav li a:hover,
:root.darkMode .shopSideNav li.active a {
    background: rgba(111,72,255,.18);
    color: var(--color-prime, #9c7bff);
}
:root.darkMode .shopSideCateL1Link { color: #ccc; }
:root.darkMode .shopSideCateL1Link:hover { color: var(--color-prime, #9c7bff); background: rgba(111,72,255,.15); }
:root.darkMode .shopSideCateL2Link { color: #999; }
:root.darkMode .shopSideCateL2Link:hover { color: var(--color-prime, #9c7bff); }
:root.darkMode .shopSideEmpty { color: #666; }
:root.darkMode .shopSideClose { color: #aaa; }
:root.darkMode .shopMain { background: transparent; }

/* =============================================================================
   12. 반응형 — 사이드바 (브라우저 축소 또는 태블릿 모드)
   ============================================================================= */
@media (max-width: 1024px) {
    .shopLayout {
        grid-template-columns: 200px 1fr;
    }
    .shopSide { width: 200px; }
}

@media (max-width: 768px) {
    /* 1열로 전환, 사이드바는 슬라이드 오버레이 */
    .shopLayout {
        display: block;
    }

    .shopSide {
        position: fixed;
        top: 0;
        left: -260px;
        width: 260px;
        height: 100%;
        max-height: 100%;
        z-index: 900;
        box-shadow: 4px 0 16px rgba(0,0,0,.15);
        transition: left .25s ease;
        overflow-y: auto;
    }
    .shopSide.open { left: 0; }

    .shopSideToggleBtn { display: inline-flex; }
    .shopSideClose { display: block; }

    .shopMain { padding: 0 .75rem 1.5rem; }
}

@media (max-width: 480px) {
    .shopSide { width: 240px; left: -250px; }
}

/* =============================================================================
   13. 주문 페이지 — #sod_frm 전체 스타일
   orderform.sub.php 는 gnuboard 코어이므로 CSS 오버라이드만 사용
   ============================================================================= */

/* ── 13-A. 라디오 & 체크박스 공통 accent ─────────────────────────────────────── */
#sod_frm input[type="radio"],
#sod_frm input[type="checkbox"] {
    accent-color: var(--color-prime, #6f48ff);
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── 13-B. 배송지선택 라디오 그룹 ────────────────────────────────────────────── */
.order_choice_place {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .25rem 0;
}

/* 각 radio + label 쌍을 묶는 방법 — gnuboard는 input/label 인라인 출력이므로
   인접 label 을 같은 행으로 정렬 */
.order_choice_place input[type="radio"] + label,
.order_choice_place input[type="checkbox"] + label {
    vertical-align: middle;
    cursor: pointer;
    font-size: .875rem;
    margin-right: .25rem;
}

/* ── 13-C. 배송지명 행 — 체크박스 inline ────────────────────────────────────── */
#sod_frm #ad_default {
    margin-left: .75rem;
}
#sod_frm label[for="ad_default"] {
    vertical-align: middle;
    cursor: pointer;
    font-size: .875rem;
}

/* ── 13-D. 주문 합계 위젯 (#sod_bsk_tot) ────────────────────────────────────── */
#sod_bsk_tot {
    background: var(--layout-aside, #f8f8fc);
    border: 1px solid var(--layout-header-border, #eee);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

#sod_bsk_tot ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

#sod_bsk_tot li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .875rem;
    color: var(--layout-text, #333);
    padding: .2rem 0;
}

/* 총계 행 강조 */
#sod_bsk_tot .sod_bsk_cnt {
    border-top: 1px solid var(--layout-header-border, #e0e0e0);
    margin-top: .4rem;
    padding-top: .6rem;
    font-weight: 700;
    font-size: 1rem;
}

#sod_bsk_tot li span {
    color: #777;
    font-size: .82rem;
}

#sod_bsk_tot li strong {
    font-weight: 600;
}

/* ── 13-E. 결제정보 섹션 (#sod_frm_pay) ─────────────────────────────────────── */
#sod_frm_pay {
    background: var(--layout-aside, #f8f8fc);
    border: 1px solid var(--layout-header-border, #eee);
    border-radius: 10px;
    padding: 1.25rem 1.25rem .75rem;
    margin-top: .75rem;
}

#sod_frm_pay > h2 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--layout-text, #222);
    margin: 0 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--layout-header-border, #e8e8e8);
}

/* ── 13-F. 결제 상세 테이블 (.pay_tbl) ──────────────────────────────────────── */
.pay_tbl table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin-bottom: .5rem;
}

.pay_tbl th {
    text-align: left;
    font-weight: 500;
    color: #777;
    padding: .35rem .5rem .35rem 0;
    white-space: nowrap;
    width: 6em;
}

.pay_tbl td {
    padding: .35rem 0;
    color: var(--layout-text, #333);
}

/* ── 13-G. 총 주문금액 (#od_tot_price) ──────────────────────────────────────── */
#od_tot_price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-prime, #6f48ff);
    color: #fff;
    border-radius: 8px;
    padding: .85rem 1.1rem;
    margin: .75rem 0;
    font-size: .9rem;
    font-weight: 600;
}

#od_tot_price .print_price {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

#od_tot_price::after {
    content: "원";
    font-size: .85rem;
    font-weight: 400;
    margin-left: .15rem;
    opacity: .9;
}

/* ── 13-H. 결제수단 선택 (.od_pay_buttons_el / #sod_frm_paysel) ─────────────── */
.od_pay_buttons_el {
    padding-top: .25rem;
}

.od_pay_buttons_el > h3 {
    font-size: .875rem;
    font-weight: 700;
    color: var(--layout-text, #222);
    margin: 0 0 .6rem;
}

#sod_frm_paysel {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    align-items: center;
}

#sod_frm_paysel legend {
    display: none; /* 접근성용 텍스트 시각적 숨김 */
}

/* 결제수단 라디오 — 숨기고 label 을 버튼처럼 */
#sod_frm_paysel input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#sod_frm_paysel .lb_icon {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .38rem .85rem;
    border: 1.5px solid var(--layout-header-border, #ddd);
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    color: #555;
    transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap;
    user-select: none;
}

#sod_frm_paysel input[type="radio"]:checked + .lb_icon {
    border-color: var(--color-prime, #6f48ff);
    background: var(--color-prime, #6f48ff);
    color: #fff;
}

#sod_frm_paysel .lb_icon:hover {
    border-color: var(--color-prime, #6f48ff);
    color: var(--color-prime, #6f48ff);
}

/* ── 13-I. 포인트 영역 (.sod_frm_point) ─────────────────────────────────────── */
.sod_frm_point {
    background: #fff;
    border: 1px solid var(--layout-header-border, #eee);
    border-radius: 8px;
    padding: .75rem 1rem;
    margin-top: .75rem;
    font-size: .85rem;
}

.sod_frm_point label {
    font-weight: 500;
    margin-right: .5rem;
}

#sod_frm_pt {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: .4rem;
    font-size: .8rem;
    color: #666;
}

/* ── 13-J. 다크모드 ──────────────────────────────────────────────────────────── */
:root.darkMode #sod_bsk_tot,
:root.darkMode #sod_frm_pay {
    background: #1a1a2e;
    border-color: #2a2a3a;
}

:root.darkMode #od_tot_price {
    background: #5a38df;
}

:root.darkMode #sod_frm_paysel .lb_icon {
    background: #1e1e30;
    border-color: #3a3a4a;
    color: #ccc;
}

:root.darkMode #sod_frm_paysel input[type="radio"]:checked + .lb_icon {
    background: var(--color-prime, #6f48ff);
    border-color: var(--color-prime, #6f48ff);
    color: #fff;
}

:root.darkMode .sod_frm_point {
    background: #1a1a2e;
    border-color: #2a2a3a;
}