@charset "utf-8";
/*!
 * 투홈샵 — 사이트 현대화 스타일 레이어 (2026-07-22, 2026-08-24 문서 페이지 추가)
 * 테마(eb4_shop_020)의 공식 커스터마이징 파일. 마크업/기능 변경 없음, 시각 요소만 재정의.
 * 롤백: /www/backup/front_style_20260722/custom.css.orig 로 이 파일을 되돌리면 됨.
 *
 * 참고
 * - 이 파일은 common.css / shop_style.css / (light|dark)_mode.css 뒤에 로드됨.
 * - 빌더 컴포넌트(product-main-*, ebg-*, ebs-* 등)는 본문 인라인 <style>이라
 *   그 부분을 이기기 위한 시각 속성에만 !important를 사용.
 * - 색을 바꾸는 규칙 중 라이트 전용은 body:not(.dark-mode)로 스코프.
 */

/* =========================================================
   0. 디자인 토큰
   ========================================================= */
:root {
    --klz-primary: #4f46e5;
    --klz-primary-strong: #4338ca;
    --klz-primary-soft: rgba(79, 70, 229, .10);
    --klz-accent: #7c3aed;
    --klz-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --klz-sale: #e11d48;
    --klz-sale-gradient: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
    --klz-dark: #0f1528;
    --klz-dark-2: #0b1022;
    --klz-dark-line: rgba(255, 255, 255, .08);
    --klz-border: rgba(15, 23, 42, .09);
    --klz-radius: 14px;
    --klz-radius-sm: 8px;
    --klz-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .12);
    --klz-shadow-hover: 0 4px 8px rgba(16, 24, 40, .07), 0 20px 40px -16px rgba(16, 24, 40, .22);
}

/* =========================================================
   1. 공통 베이스
   ========================================================= */
body {
    letter-spacing: -0.01em;
}
::selection {
    background: var(--klz-primary);
    color: #fff;
}
a:hover {
    color: var(--klz-primary);
}
body.dark-mode a:hover {
    color: #a5b4fc;
}

/* =========================================================
   2. 헤더 — 상단바 / 로고영역 / 검색 / 내비게이션
   ========================================================= */
.top-header {
    background-color: var(--klz-dark-2);
    border-bottom: 1px solid var(--klz-dark-line);
}
.header-title {
    background-color: var(--klz-dark);
}
.header-nav {
    background-color: var(--klz-dark);
    border-bottom: 1px solid var(--klz-dark-line);
}
body.dark-mode .top-header,
body.dark-mode .header-title,
body.dark-mode .header-nav {
    background-color: #0d1117;
}

/* 검색창: 알약형 */
.header-title .header-title-search .eyoom-form .input input {
    border-radius: 999px;
    padding-left: 18px;
    background-color: rgba(255, 255, 255, .96);
}
.header-title .header-title-search .eyoom-form .input-button .button {
    width: 55px;
    border-radius: 0 999px 999px 0;
    background: var(--klz-gradient);
    transition: filter .15s ease;
}
.header-title .header-title-search .eyoom-form .input-button .button:hover {
    filter: brightness(1.1);
}

/* 헤더 아이콘 버튼 배지 */
.header-title .header-title-btn .badge {
    border-radius: 999px;
    background: var(--klz-sale-gradient) !important;
    font-weight: 700;
}

/* 메인 내비게이션 */
.navbar-nav > li > .nav-link {
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}
.navbar-nav > li > .nav-link:hover {
    color: #fff;
}
@media (min-width: 992px) {
    .header-nav .navbar-nav > li.nav-category > a {
        background: var(--klz-gradient);
        border-radius: 10px 10px 0 0;
        font-weight: 700;
    }
    .navbar-nav > li.darkmode-menu {
        background-color: transparent;
    }
}

/* 드롭다운 공통: 둥근 모서리 + 부드러운 그림자 */
body:not(.dark-mode) .top-header-nav li.dropdown .dropdown-menu,
body:not(.dark-mode) .navbar-nav .dropdown-menu,
body:not(.dark-mode) .header-nav .navbar-nav > li.nav-category > .dropdown-menu,
body:not(.dark-mode) .header-nav .navbar-nav > li.nav-category > .dropdown-menu > .item-vertical > .dropdown-menu,
body:not(.dark-mode) .header-nav .navbar-nav > li.nav-category > .dropdown-menu > .item-vertical > ul > .dropdown-submenu > .dropdown-menu {
    border: 1px solid var(--klz-border);
    border-radius: 12px;
    box-shadow: var(--klz-shadow-hover);
    overflow: hidden;
}
body.dark-mode .top-header-nav li.dropdown .dropdown-menu,
body.dark-mode .navbar-nav .dropdown-menu {
    border-radius: 12px;
    overflow: hidden;
}
.navbar-nav .dropdown-menu li a.active,
.navbar-nav .dropdown-menu li a:hover,
.navbar-nav .dropdown-menu > ul > li:hover > a,
body:not(.dark-mode) .top-header-nav li.dropdown .dropdown-menu a:hover,
body:not(.dark-mode) .header-nav .navbar-nav > li.nav-category > .dropdown-menu li a:hover {
    color: var(--klz-primary) !important;
}

/* 모바일 하단 플로팅 메뉴 버튼 */
.navbar-mobile-toggler {
    background: var(--klz-gradient);
    box-shadow: var(--klz-shadow-hover);
}

/* =========================================================
   3. 페이지 타이틀 / 브레드크럼
   ========================================================= */
.page-title-wrap {
    border-bottom: 1px solid var(--klz-border);
}
.page-title-wrap h2 {
    font-weight: 800;
    letter-spacing: -.02em;
}
.page-title-wrap .sub-breadcrumb a:hover {
    color: var(--klz-primary);
}

/* =========================================================
   4. 메인 섹션 헤딩 / 더보기 버튼
   ========================================================= */
.main-heading h3,
.main-heading h4 {
    font-weight: 800;
    letter-spacing: -.02em;
}
.main-heading .heading-more-btn {
    border-radius: 999px;
    border-color: var(--klz-border);
    transition: all .15s ease;
}
.main-heading .heading-more-btn:hover {
    background: var(--klz-primary);
    border-color: var(--klz-primary);
    color: #fff;
}
/* 빌더 상품그룹 헤더(인라인 스타일 대응) */
.ebg-shop020-b-header .ebg-shop020-b-title,
.ebg-shop020-m-header .ebg-shop020-m-title {
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
.ebg-shop020-b-tabs a,
.ebg-shop020-m-tabs a {
    border-radius: 999px !important;
}

/* =========================================================
   4-1. 메인 카테고리 타일 (ebc-shop020-mc, 인라인 스타일 대응)
   ========================================================= */
/* 내용 없는 헤딩의 빨간 대시 장식 제거 */
.headline-short h1:empty, .headline-short h2:empty, .headline-short h3:empty,
.headline-short h4:empty, .headline-short h5:empty, .headline-short h6:empty {
    display: none;
}
/* 헤딩 대시 색 현대화 (내용 있는 경우) */
.headline-short h1:after, .headline-short h2:after, .headline-short h3:after,
.headline-short h4:after, .headline-short h5:after, .headline-short h6:after {
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: var(--klz-gradient);
}
/* 카테고리 타일 */
.ebc-shop020-mc .ebc-shop020-mc-box-in {
    border: 1px solid transparent !important;
    border-radius: 12px;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
body:not(.dark-mode) .ebc-shop020-mc .ebc-shop020-mc-box-in {
    background-color: #f6f7fb;
}
body.dark-mode .ebc-shop020-mc .ebc-shop020-mc-box-in {
    background-color: rgba(255, 255, 255, .05);
}
.ebc-shop020-mc .ebc-shop020-mc-box-in:hover {
    border-color: rgba(79, 70, 229, .25) !important;
    background-color: var(--klz-primary-soft);
    transform: translateY(-2px);
    box-shadow: var(--klz-shadow);
}
.ebc-shop020-mc .ebc-shop020-mc-box h3 {
    color: #334155 !important;
    font-weight: 600;
    font-size: .75rem !important;
}
body.dark-mode .ebc-shop020-mc .ebc-shop020-mc-box h3 {
    color: #cbd5e1 !important;
}
.ebc-shop020-mc .ebc-shop020-mc-box-in:hover h3 {
    text-decoration: none !important;
    color: var(--klz-primary) !important;
}
body.dark-mode .ebc-shop020-mc .ebc-shop020-mc-box-in:hover h3 {
    color: #a5b4fc !important;
}
.ebc-shop020-mc .ebc-shop020-mc-box img {
    transition: transform .2s ease;
}
.ebc-shop020-mc .ebc-shop020-mc-box-in:hover img {
    transform: scale(1.1);
}
/* 다크모드에서 검정 라인 아이콘이 보이도록 반전 */
body.dark-mode .ebc-shop020-mc .ebc-shop020-mc-img img {
    filter: invert(1);
}

/* =========================================================
   5. 상품 카드 (빌더 인라인 스타일 대응 — 시각 속성만 !important)
   ========================================================= */
.product-img,
.goods-img,
.ebs-shop020-cd-img {
    border-radius: var(--klz-radius) !important;
    border: 1px solid var(--klz-border);
    box-shadow: var(--klz-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
body.dark-mode .product-img,
body.dark-mode .goods-img,
body.dark-mode .ebs-shop020-cd-img {
    border-color: rgba(255, 255, 255, .08);
}
.item-main-10-in:hover .product-img,
.item-main-20-in:hover .product-img,
.item-main-30-in:hover .product-img,
.item-main-40-in:hover .product-img,
.item-main-50-in:hover .product-img,
.ebgoods-item-wrap:hover .goods-img,
.product-info:hover .product-img {
    box-shadow: var(--klz-shadow-hover);
    transform: translateY(-3px);
}
.product-name a,
.goods-name a {
    transition: color .15s ease;
}
.product-name a:hover,
.goods-name a:hover {
    color: var(--klz-primary) !important;
}
body.dark-mode .product-name a:hover,
body.dark-mode .goods-name a:hover {
    color: #a5b4fc !important;
}

/* 할인율 리본 (회전형 리본 형태 유지, 색만 현대화) */
.product-img-in .discount-percent,
.discount-percent {
    background: var(--klz-sale-gradient) !important;
    font-style: normal !important;
    font-weight: 700;
}

/* 별점 */
.product-ratings .rating-selected,
.rating .rating-selected {
    color: #f59e0b !important;
}

/* 상품 SNS/찜 버튼 */
.product-sns ul li a {
    border-radius: 8px !important;
    transition: background-color .15s ease, color .15s ease;
}
.product-sns ul li:hover .wish-icon {
    background: var(--klz-sale) !important;
}

/* 쇼핑 라벨(NEW/HIT/SALE 등 rgba 배지) */
.shop-rgba-red, .shop-rgba-purple, .shop-rgba-blue, .shop-rgba-green,
.shop-rgba-orange, .shop-rgba-pink, .shop-rgba-black, .shop-rgba-gray,
.shop-rgba-banner {
    border-radius: 999px !important;
    font-weight: 700;
}

/* =========================================================
   6. 슬라이더 (Swiper) 내비게이션
   ========================================================= */
.swiper-button-prev,
.swiper-button-next {
    border-radius: 50% !important;
    background-color: rgba(15, 21, 40, .45) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color .15s ease;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(15, 21, 40, .75) !important;
}
.swiper-pagination-bullet-active {
    background: #fff !important;
}

/* =========================================================
   7. 버튼 / 페이지네이션 / 배지
   ========================================================= */
.btn-e {
    border-radius: var(--klz-radius-sm);
    font-weight: 600;
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-e:hover {
    transform: translateY(-1px);
}
.btn-e-lg {
    border-radius: 10px;
}
.btn, .btn-sm, .btn-group-sm > .btn {
    border-radius: var(--klz-radius-sm);
}
.badge {
    border-radius: 999px;
    font-weight: 600;
}
.pagination .page-link {
    border-radius: 8px;
    margin: 0 2px;
    color: #64748b;
}
body:not(.dark-mode) .pagination .page-link {
    border-color: var(--klz-border);
}
.pagination .page-item.active .page-link {
    background: var(--klz-gradient);
    border-color: transparent;
    color: #fff;
}

/* =========================================================
   8. 폼 (eyoom-form / bootstrap)
   ========================================================= */
.eyoom-form .input input,
.eyoom-form .select select,
.eyoom-form .textarea textarea {
    border-radius: var(--klz-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.eyoom-form .input input:focus,
.eyoom-form .select select:focus,
.eyoom-form .textarea textarea:focus {
    border-color: var(--klz-primary);
    box-shadow: 0 0 0 3px var(--klz-primary-soft);
}
.form-control, .form-select {
    border-radius: var(--klz-radius-sm);
}
.form-control:focus, .form-select:focus {
    border-color: var(--klz-primary);
    box-shadow: 0 0 0 3px var(--klz-primary-soft);
}
.modal-content {
    border-radius: var(--klz-radius);
    box-shadow: var(--klz-shadow-hover);
}
body:not(.dark-mode) .modal-content {
    border: 1px solid var(--klz-border);
}

/* =========================================================
   9. 게시판 / 표
   ========================================================= */
body:not(.dark-mode) .table-list-eb thead {
    border-top: 0;
    background: #f8fafc;
}
body:not(.dark-mode) .table-list-eb thead th {
    font-weight: 700;
    color: #64748b;
    border-top: 1px solid rgba(15, 23, 42, .14);
}
body:not(.dark-mode) .table-list-eb tfoot {
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, .14);
}
body:not(.dark-mode) .table-hover > tbody > tr:hover {
    background-color: var(--klz-primary-soft);
}

/* =========================================================
   10. 카드류 공통
   ========================================================= */
body:not(.dark-mode) .card {
    border-radius: var(--klz-radius);
    border: 1px solid var(--klz-border);
    box-shadow: var(--klz-shadow);
}
body.dark-mode .card {
    border-radius: var(--klz-radius);
}
body:not(.dark-mode) .dropdown-menu {
    border-radius: 12px;
    border: 1px solid var(--klz-border);
    box-shadow: var(--klz-shadow-hover);
}

/* =========================================================
   11. 푸터
   ========================================================= */
.footer {
    border-top: 1px solid var(--klz-border);
}
body.dark-mode .footer {
    border-top-color: rgba(255, 255, 255, .08);
}
.footer-nav a:hover,
.footer-right-nav a:hover {
    color: var(--klz-primary);
    text-decoration: none;
}
.footer-cont-info {
    background-color: var(--klz-dark);
}
.footer-cont-box:nth-child(2) {
    border-left-color: var(--klz-dark-line);
    border-right-color: var(--klz-dark-line);
}
.footer-copyright {
    background-color: var(--klz-dark-2);
}
.footer-cont-box p a:hover,
.footer-cont-box .footer-text-logo {
    color: #cbd5e1;
}

/* 위로가기 버튼 */
.eb-backtotop {
    border-radius: 12px !important;
    background: var(--klz-gradient) !important;
    box-shadow: var(--klz-shadow-hover);
}
.eb-backtotop i {
    color: #fff !important;
}

/* =========================================================
   12. 콘텐츠 문서 페이지 (회사소개 / 이용안내 / 약관 / 개인정보)
   본문은 g5_content 에 저장되며 gnuboard 의 XSS 필터가 <style> 을 제거하므로
   문서 스타일은 반드시 이 파일에 둔다. 본문에는 class 만 남긴다.
   ========================================================= */
.cnt-doc {
    line-height: 1.75;
    font-size: .9375rem;
}
.cnt-doc h3 {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 16px;
}
.cnt-doc h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 32px 0 10px;
    padding-left: 11px;
    border-left: 3px solid var(--klz-primary);
}
.cnt-doc p {
    margin: 0 0 12px;
}
.cnt-doc .cnt-lead {
    font-size: 1rem;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--klz-border);
}
body.dark-mode .cnt-doc .cnt-lead {
    border-bottom-color: #30363d;
}
/* 테마가 ul 의 불릿을 전역으로 없애므로 문서 안에서만 되살린다 */
.cnt-doc ul,
.cnt-doc ol {
    margin: 0 0 14px;
    padding-left: 22px;
}
.cnt-doc ul > li {
    list-style: disc outside;
    margin-bottom: 6px;
}
.cnt-doc ol > li {
    list-style: decimal outside;
    margin-bottom: 6px;
}
.cnt-doc table {
    width: 100%;
    margin: 0 0 18px;
    border-collapse: collapse;
    border-radius: var(--klz-radius-sm);
    overflow: hidden;
}
.cnt-doc table th,
.cnt-doc table td {
    padding: 11px 14px;
    border: 1px solid var(--klz-border);
    font-size: .9063rem;
    text-align: left;
    vertical-align: top;
}
.cnt-doc table th {
    width: 34%;
    font-weight: 600;
    white-space: nowrap;
}
body:not(.dark-mode) .cnt-doc table th {
    background-color: #f8fafc;
}
body.dark-mode .cnt-doc table th,
body.dark-mode .cnt-doc table td {
    /* 테마가 다크 표에 쓰는 선 색과 맞춘다 (dark_mode.css 의 #30363d) */
    border-color: #30363d;
}
body.dark-mode .cnt-doc table th {
    background-color: #161b22;
}
.cnt-doc .cnt-note {
    margin-top: 30px;
    padding: 16px 18px;
    border: 1px solid var(--klz-border);
    border-radius: var(--klz-radius-sm);
    font-size: .875rem;
    line-height: 1.7;
}
body:not(.dark-mode) .cnt-doc .cnt-note {
    background-color: #f8fafc;
}
body.dark-mode .cnt-doc .cnt-note {
    border-color: #30363d;
    background-color: #161b22;
}
/* 좁은 화면에서는 표를 세로로 쌓는다 */
@media (max-width: 576px) {
    .cnt-doc table th,
    .cnt-doc table td {
        display: block;
        width: 100%;
        white-space: normal;
    }
    .cnt-doc table td {
        border-top: 0;
    }
    .cnt-doc h4 {
        margin-top: 26px;
    }
}