@charset "utf-8";
/*!
 * 푸헐크샵 — 사이트 현대화 스타일 레이어 (2026-07-22)
 * 테마(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 {
    /* 브랜드 그린 (푸헐크샵 #1FD192 계열) */
    --puhk-primary: #10b981;
    --puhk-primary-strong: #0e9f6e;
    --puhk-primary-soft: rgba(16, 185, 129, .10);
    --puhk-accent: #1FD192;
    --puhk-gradient: linear-gradient(135deg, #1FD192 0%, #0ea472 100%);
    --puhk-sale: #e11d48;
    --puhk-sale-gradient: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
    --puhk-dark: #0f1528;
    --puhk-dark-2: #0b1022;
    --puhk-dark-line: rgba(255, 255, 255, .08);
    --puhk-border: rgba(15, 23, 42, .09);
    --puhk-radius: 16px;
    --puhk-radius-sm: 10px;
    --puhk-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .12);
    --puhk-shadow-hover: 0 6px 12px rgba(16, 24, 40, .08), 0 24px 48px -16px rgba(16, 24, 40, .28);
    --puhk-glow: 0 10px 26px -8px rgba(16, 185, 129, .5);
}

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

/* =========================================================
   2. 헤더 — 상단바 / 로고영역 / 검색 / 내비게이션
   ========================================================= */
.top-header {
    background-color: var(--puhk-dark-2);
    border-bottom: 1px solid var(--puhk-dark-line);
}
.header-title {
    background-color: var(--puhk-dark);
}
.header-nav {
    background-color: var(--puhk-dark);
    border-bottom: 1px solid var(--puhk-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(--puhk-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(--puhk-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(--puhk-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(--puhk-border);
    border-radius: 12px;
    box-shadow: var(--puhk-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(--puhk-primary) !important;
}

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

/* =========================================================
   3. 페이지 타이틀 / 브레드크럼
   ========================================================= */
.page-title-wrap {
    border-bottom: 1px solid var(--puhk-border);
}
.page-title-wrap h2 {
    font-weight: 800;
    letter-spacing: -.02em;
}
.page-title-wrap .sub-breadcrumb a:hover {
    color: var(--puhk-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(--puhk-border);
    transition: all .15s ease;
}
.main-heading .heading-more-btn:hover {
    background: var(--puhk-primary);
    border-color: var(--puhk-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(--puhk-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(16, 185, 129, .30) !important;
    background-color: var(--puhk-primary-soft);
    transform: translateY(-2px);
    box-shadow: var(--puhk-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(--puhk-primary) !important;
}
body.dark-mode .ebc-shop020-mc .ebc-shop020-mc-box-in:hover h3 {
    color: #6ee7b7 !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(--puhk-radius) !important;
    border: 1px solid var(--puhk-border);
    box-shadow: var(--puhk-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(--puhk-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(--puhk-primary) !important;
}
body.dark-mode .product-name a:hover,
body.dark-mode .goods-name a:hover {
    color: #6ee7b7 !important;
}

/* 할인율 리본 (회전형 리본 형태 유지, 색만 현대화) */
.product-img-in .discount-percent,
.discount-percent {
    background: var(--puhk-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(--puhk-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(--puhk-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(--puhk-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(--puhk-border);
}
.pagination .page-item.active .page-link {
    background: var(--puhk-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(--puhk-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(--puhk-primary);
    box-shadow: 0 0 0 3px var(--puhk-primary-soft);
}
.form-control, .form-select {
    border-radius: var(--puhk-radius-sm);
}
.form-control:focus, .form-select:focus {
    border-color: var(--puhk-primary);
    box-shadow: 0 0 0 3px var(--puhk-primary-soft);
}
.modal-content {
    border-radius: var(--puhk-radius);
    box-shadow: var(--puhk-shadow-hover);
}
body:not(.dark-mode) .modal-content {
    border: 1px solid var(--puhk-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(--puhk-primary-soft);
}

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

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

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

/* =========================================================
   12. 과감한 현대화 (BOLD LAYER) — 브랜드 그린 / 2026-07-22
   레이아웃/마크업 변경 없음. 시각 강조만 대폭 상향.
   ========================================================= */

/* 12-0. 전역 부드러운 전환 */
a, button, .btn, .btn-e, .card, img { transition: color .15s ease, background-color .15s ease, box-shadow .2s ease, transform .2s ease, filter .15s ease; }

/* 12-1. 히어로/메인 배너 — 라운딩 + 깊은 그림자 (빌더 컨테이너 대응, 없으면 무시) */
.product-main-wrap, .main-slide, .main-slide-wrap, .main-visual,
.index-main-slider, .ebc-shop020-mb, .ebc-shop020-mb-box,
.ebg-shop020-banner, .product-main-10-img, .product-main-img {
    border-radius: var(--puhk-radius) !important;
    overflow: hidden;
}

/* 12-2. 기본(네이비/검정) 버튼 → 브랜드 그린 그라데이션 CTA */
.btn-e-navy, .btn-e-primary, .btn-e-black, .btn-e-dark {
    background: var(--puhk-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: var(--puhk-glow);
}
.btn-e-navy:hover, .btn-e-primary:hover, .btn-e-black:hover, .btn-e-dark:hover {
    filter: brightness(1.07);
    transform: translateY(-2px);
    color: #fff !important;
}
/* 아웃라인/보더 버튼 hover는 그린으로 */
.btn-e-brd:hover, .btn-e-gray:hover {
    border-color: var(--puhk-primary) !important;
    color: var(--puhk-primary) !important;
}

/* 12-3. 상품 카드 — 과감한 인터랙션 (이미지 줌 + 강한 리프트) */
.product-img-in img, .goods-img img, .ebs-shop020-cd-img img,
.product-img img, .goods-img > a img {
    transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
    will-change: transform;
}
.product-info:hover .product-img-in img,
.item-main-10-in:hover .product-img img,
.item-main-20-in:hover .product-img img,
.item-main-30-in:hover .product-img img,
.item-main-40-in:hover .product-img img,
.item-main-50-in:hover .product-img img,
.ebgoods-item-wrap:hover .goods-img img {
    transform: scale(1.07) !important;
}
.product-img, .goods-img, .ebs-shop020-cd-img { overflow: hidden !important; }

/* 12-4. 섹션 헤딩 — 크고 굵게 + 그린 강조 */
.main-heading h3, .main-heading h4,
.ebg-shop020-b-title, .ebg-shop020-m-title {
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
}
.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: 28px !important;
    height: 4px !important;
}

/* 12-5. 카테고리 타일 — 강한 리프트 + 그린 그라데이션 hover */
.ebc-shop020-mc .ebc-shop020-mc-box-in:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 18px 34px -16px rgba(16,185,129,.5) !important;
    border-color: rgba(16,185,129,.4) !important;
}

/* 12-6. 가격 강조 */
.product-price strong, .goods-price strong, .item-price,
.product-price .price, .goods-price .price { font-weight: 800 !important; }

/* 12-7. 상단 유틸바 링크 hover / 헤더 아이콘 hover */
.top-header a:hover { color: var(--puhk-accent) !important; }
.header-title .header-title-btn a:hover i { color: var(--puhk-accent) !important; }

/* 12-8. TIME SALE 등 사이드 위젯 카드 라운딩 */
.main-side .main-side-box, .time-sale-wrap, .best-item-wrap,
.main-rank-wrap, .product-rank-wrap {
    border-radius: var(--puhk-radius) !important;
}

/* 12-9. 플로팅/사이드 트리거 버튼 hover 다듬기 */
.sidebar-shop-member-btn:hover, .navbar-mobile-toggler:hover,
.eb-backtotop:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* 12-10. 검색 버튼/CATEGORY — 그린 글로우 강화 */
.header-title .header-title-search .eyoom-form .input-button .button { box-shadow: var(--puhk-glow); }
@media (min-width: 992px) {
    .header-nav .navbar-nav > li.nav-category > a { box-shadow: 0 8px 18px -8px rgba(16,185,129,.55); }
}

/* 12-11. 다크모드 카드/타일 톤 정리 */
body.dark-mode .ebc-shop020-mc .ebc-shop020-mc-box-in:hover {
    background-color: rgba(16,185,129,.12);
    border-color: rgba(16,185,129,.35) !important;
}