/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */
/* ===================================================
   헤더 2단 레이아웃: 상단(로고+검색+아이콘) / 하단(메뉴)
   =================================================== */

/* ── 상단 행: 로고 / 검색박스 / 아이콘 ── */
.header-inner {
  flex-wrap: nowrap !important;
  padding: 0;
}

/* 중앙 검색박스 */
.header-search-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 24px;
}
.header-search-center form {
  width: 100%;
  max-width: 520px;
}
.header-search-inner {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border-color, #ddd);
  border-radius: 24px;
  overflow: hidden;
  background: var(--body-color-deep, #f5f5f5);
  padding: 0 8px 0 18px;
  height: 44px;
  transition: border-color .2s;
}
.header-search-inner:focus-within {
  border-color: var(--primary-color, #333);
}
.header-search-inner input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  padding: 0;
  color: var(--text-color, #333);
}
.header-search-inner input[type="text"]::placeholder {
  color: var(--text-color-light, #999);
}
.header-search-inner button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  opacity: .7;
  transition: opacity .2s;
}
.header-search-inner button:hover { opacity: 1; }
.header-search-inner button img {
  width: 20px;
  height: 20px;
}

/* ── 하단 행: 카테고리 메뉴 ── */
.header-nav-row {
  width: 100%;
  background-color: var(--body-color, #fff);
  border-top: 1px solid var(--border-color-light, #eee);
  display: flex;
  justify-content: center;
  padding: 0 2rem;
  box-sizing: border-box;
}
.header-nav-row .gnb-wrap {
  flex: 1;
  max-width: 1400px;
}
.header-nav-row .gnb-wrap .gnb {
  width: 100%;
}
.header-nav-row .gnb-wrap .gnb .gnb-nav {
  justify-content: flex-start;
}

/* PC: 검색 아이콘 숨김 (검색박스가 대신함) */
@media (min-width: 992px) {
  .btn-search { display: none !important; }
  .header-search-center { display: flex; }
}

/* 모바일: 검색박스 숨김, 아이콘만 유지, 하단메뉴행 숨김 */
@media (max-width: 991px) {
  .header-search-center { display: none !important; }
  .header-nav-row { display: none !important; }
  .btn-search { display: block !important; }
  .header-inner { flex-wrap: nowrap !important; }
  .header-logo { flex: 1 1 auto; }
}

/* ===================================================
   추가 수정: 메뉴 좌측정렬 / 서치 테두리 노랑 / 배너 상단 잘림 방지
   =================================================== */

/* 1. 메뉴 좌측 정렬 */
.header-nav-row .gnb-wrap .gnb .gnb-nav {
  justify-content: center !important;
  padding-left: 0 !important;
}

/* 2. 서치 창 진한 노랑 테두리 */
.header-search-inner {
  border: 2px solid #C89A00 !important;
  background: #fff !important;
}
.header-search-inner:focus-within {
  border-color: #A07800 !important;
  box-shadow: 0 0 0 3px rgba(200,154,0,.15);
}

/* 3. 배너 상단 잘림 방지 — 2단 헤더 높이만큼 padding-top 증가 */
@media (min-width: 992px) {
  .wrapper-inner {
    padding-top: 185px !important;
  }
}
/* 헤더 상시 그림자 */
.header { box-shadow: 0 4px 6px 0 rgb(12 0 46 / 10%) !important; }

/* 검색창 흰 배경 + 내부 텍스트박스 느낌 제거 */
.header-search-inner {
  background: #fff !important;
}
.header-search-inner input[type="text"] {
  background: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* 주문서 계좌번호 숨김 */
.bank-accounts-box { display: none !important; }
#settle_bank > p.m-b-5 { display: none !important; }

/* ── Stripe 결제수단 선택 그리드 ───────────────────────────────────── */
#settle_stripe { padding: 12px 0 4px; }
.smi-title { font-weight: bold; font-size: 14px; margin-bottom: 10px; color: #333; }
.smi-grid {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.smi-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px 6px; min-width: 80px; max-width: 90px;
    border: 2px solid #ddd; border-radius: 10px;
    background: #fff; cursor: pointer; font-size: 11px; gap: 4px;
    transition: border-color .15s, background .15s, box-shadow .15s;
    color: #333;
}
.smi-btn:hover { border-color: #C89A00; box-shadow: 0 2px 6px rgba(200,154,0,.15); }
.smi-btn.active { border-color: #C89A00; background: #fffbe6; font-weight: bold; box-shadow: 0 2px 8px rgba(200,154,0,.2); }
.smi-btn img { width: 52px; height: 32px; object-fit: contain; border-radius: 4px; }
.smi-btn.smi-kakao.active { border-color: #FAE300; background: #FFFDE0; }
.smi-btn.smi-naver.active  { border-color: #03C75A; background: #E8FFF1; }
.smi-btn.smi-samsung.active{ border-color: #1428A0; background: #EEF0FF; }
.smi-btn.smi-payco.active  { border-color: #EF2929; background: #FFF0F0; }
#smi-card-wrap { margin-top: 14px; }
#smi-notice {
    display: none; margin-top: 12px; padding: 11px 14px;
    background: #f8f9fa; border: 1px solid #dee2e6;
    border-radius: 8px; font-size: 13px; color: #555; line-height: 1.5;
}

/* 주문서만 작성 버튼 */
.smi-btn.smi-writeonly {
    border-style: dashed; border-color: #aaa; color: #555; background: #f9f9f9;
    font-size: 11px; line-height: 1.4;
}
.smi-btn.smi-writeonly:hover { border-color: #666; background: #eee; box-shadow: none; }
.smi-btn.smi-writeonly .smi-wo-ico { font-size: 20px; }

/* 주문서만 작성 - 결제방식 선택 영역 버튼 */
.shop-order-form .payment-select-wrap .order-only-paybox {
    background: #fff; border: 1px dashed #bbb !important;
    color: #777; text-align: left; cursor: pointer;
    padding: 20px 5px 0 70px !important; line-height: 1.35;
}
.shop-order-form .payment-select-wrap .order-only-paybox:hover {
    background: #f5f5f5; border-color: #888 !important; color: #444;
}
.shop-order-form .payment-select-wrap #sod_frm_paysel .order-only-paybox:before,
.shop-order-form .payment-select-wrap #m_sod_frm_paysel .order-only-paybox:before {
    font-family: "Font Awesome 5 Free"; content: "\f328";
    font-weight: 900; position: absolute; top: 5px; left: 5px;
    width: 48px; height: 48px; line-height: 48px; text-align: center;
    color: #bbb; font-size: 20px;
}

/* 주문서만 작성 - 선택 상태 */
.order-only-paybox.order-only-selected {
    border: 1px solid #cc2300 !important; z-index: 3;
}
.order-only-paybox.order-only-selected:after {
    font-family: "Font Awesome 5 Free"; content: "\f00c";
    font-weight: 900; position: absolute; top: 2px; right: 5px;
    color: #cc2300; font-size: 1rem;
}

/* 1cent web-only button repair: keep product actions compact and aligned. */
.ebgoods-gallery .goods-box .btn-go-item a {
    width: 48px !important;
    height: 48px !important;
    right: 0 !important;
    bottom: 0 !important;
    padding-top: 11px !important;
    border: 1px solid #f0c229 !important;
    border-radius: 8px !important;
    background-color: #f6c928 !important;
    box-sizing: border-box !important;
}
.ebgoods-gallery .goods-box .btn-go-item a i {
    font-size: 18px !important;
    color: #3a2a00 !important;
}
.ebgoods-gallery .goods-box .btn-go-item a:hover {
    background-color: #eab600 !important;
}
.product-main-50 .product-description .btn-go-item a {
    width: 52px !important;
    height: 52px !important;
    right: 10px !important;
    bottom: -20px !important;
    padding-top: 13px !important;
    border: 1px solid #f0c229 !important;
    border-radius: 9px !important;
    background-color: #f6c928 !important;
    box-sizing: border-box !important;
}
.product-main-50 .product-description .btn-go-item a i {
    font-size: 20px !important;
    color: #3a2a00 !important;
}
.btn-more a {
    min-width: 92px !important;
    padding: 0 16px !important;
    line-height: 32px !important;
    font-size: 11px !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
}





/* ══════════════════════════════════════════════════════════════════
   모바일 헤더 3행 레이아웃 (AMEYOKO 스타일)
   Row1: 유틸리티 바  /  Row2: 햄버거+로고+아이콘  /  Row3: 퀵링크
   ══════════════════════════════════════════════════════════════════ */

/* ── PC: 새로 추가한 모바일 전용 요소 숨김 ── */
@media (min-width: 992px) {
    .mobile-util-bar   { display: none !important; }
    .mobile-ham-btn    { display: none !important; }
    .mobile-quick-nav  { display: none !important; }
    /* PC에서 기존 햄버거(top-bar 안)는 shop_style.css 가 이미 숨김 */
}

/* ── 모바일 공통 헤더 ── */
@media (max-width: 991px) {

    /* 헤더 전체 패딩 리셋 */
    .header {
        padding: 0 !important;
    }

    /* ────────────────────────────────────────
       ROW 1 : 유틸리티 바 (로그인·회원가입·마이쇼핑·1:1문의)
    ──────────────────────────────────────── */
    .mobile-util-bar {
        display: flex !important;
        width: 100% !important;
        background: #f8f8f8 !important;
        border-bottom: 1px solid #e8e8e8 !important;
    }
    .mobile-util-list {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .mobile-util-list > li {
        flex: 1 1 auto !important;
        border-right: 1px solid #e0e0e0 !important;
    }
    .mobile-util-list > li:last-child {
        border-right: none !important;
    }
    .mobile-util-list > li > a {
        display: block !important;
        text-align: center !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #666 !important;
        padding: 12px 4px !important;
        line-height: 1.3 !important;
        background: none !important;
        height: auto !important;
        border-radius: 0 !important;
    }
    .mobile-util-list > li > a:hover {
        color: #333 !important;
        background: #f0f0f0 !important;
    }

    /* ────────────────────────────────────────
       ROW 2 : 햄버거(좌) / 로고(중앙) / 아이콘(우)
    ──────────────────────────────────────── */
    .header-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 10px !important;
        min-height: 68px !important;
        gap: 0 !important;
    }

    /* 햄버거 — 왼쪽 */
    .mobile-ham-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: 36px !important;
        height: 52px !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 10 !important;
    }
    .mobile-ham-btn button {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 24px !important;
        color: #333 !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    /* 로고 — 중앙 (absolute centering) */
    .header-logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 0 !important;
        pointer-events: auto !important;
    }
    .header-logo a {
        display: flex !important;
        align-items: center !important;
    }
    .header-logo a img {
        height: 18px !important;
        width: auto !important;
        display: block !important;
    }

    /* PC 검색박스 숨김 */
    .header-search-center {
        display: none !important;
    }

    /* 오른쪽 아이콘 그룹 */
    .top-bar {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    .top-bar .top-bar-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .top-bar .top-bar-list > li {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    /* 로그인·햄버거 숨김 (모바일에선 Row1·mobile-ham-btn으로 대체) */
    .top-bar .top-bar-list > li.top-bar-btn-login,
    .top-bar .top-bar-list > li.top-bar-btn-adm,
    .top-bar .top-bar-list > li.mobile-nav-trigger {
        display: none !important;
    }
    /* 아이콘 버튼 공통 */
    .top-bar .top-bar-list > li > a,
    .top-bar .top-bar-list > li > button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 52px !important;
        padding: 0 !important;
        line-height: 1 !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    .top-bar .top-bar-list > li > a:hover {
        background: none !important;
    }
    .top-bar .top-bar-list > li > a > img,
    .top-bar .top-bar-list > li > button > img {
        width: 20px !important;
        height: 20px !important;
    }
    /* 장바구니 뱃지 */
    .btn-cart > a {
        position: relative !important;
    }
    .btn-cart > a > span {
        position: absolute !important;
        top: 4px !important;
        right: 2px !important;
        min-width: 14px !important;
        height: 14px !important;
        line-height: 14px !important;
        font-size: 9px !important;
        text-align: center !important;
        background: #aab7c4 !important;
        color: #fff !important;
        border-radius: 50% !important;
        padding: 0 2px !important;
    }

    /* ────────────────────────────────────────
       ROW 3 : 카테고리 퀵링크 바
    ──────────────────────────────────────── */
    .mobile-quick-nav {
        display: block !important;
        width: 100% !important;
        background: #fff !important;
        border-top: 1px solid #eee !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .mobile-quick-nav::-webkit-scrollbar {
        display: none !important;
    }
    .mobile-quick-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 8px !important;
        list-style: none !important;
        gap: 0 !important;
    }
    .mobile-quick-list > li {
        flex-shrink: 0 !important;
    }
    .mobile-quick-list > li > a {
        display: block !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #333 !important;
        padding: 19px 10px !important;
        line-height: 1.2 !important;
        background: none !important;
        border-radius: 0 !important;
        height: auto !important;
    }
    .mobile-quick-list > li > a:hover {
        color: var(--primary-color, #C89A00) !important;
        background: none !important;
    }

    /* header-nav-row: 높이 0으로 숨기되, 오프캔버스(position:fixed)는 살아있음 */
    .header-nav-row {
        height: 0 !important;
        overflow: visible !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* wrapper-inner padding 보정 (헤더 3행 높이 약 120px) */
    .wrapper-inner {
        padding-top: 120px !important;
    }
}

/* ── 소형 폰 (360px 이하) ── */
@media (max-width: 360px) {
    .mobile-util-list > li > a {
        font-size: 10px !important;
        padding: 6px 2px !important;
    }
    .mobile-quick-list > li > a {
        font-size: 11px !important;
        padding: 8px 8px !important;
    }
    .header-logo a img {
        height: 18px !important;
    }
    .mobile-ham-btn button img,
    .top-bar .top-bar-list > li > a > img {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (max-width: 991px) and (min-width: 576px) {
    .mobile-util-list > li > a {
        padding: 6px 4px !important;
    }
}



/* 주문서만 작성 버튼 - label과 텍스트 위치 동일하게 */
button.payment-select-box.order-only-paybox {
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 1 !important;
    text-align: left !important;
    font-size: .875rem !important;
    font-weight: 400 !important;
    padding: 20px 5px 0 70px !important;
    height: 60px !important;
    box-sizing: border-box !important;
    display: block !important;
}
button.payment-select-box.order-only-paybox.order-only-selected {
    border: 1px solid #cc2300 !important;
    z-index: 3 !important;
}
button.payment-select-box.order-only-paybox.order-only-selected:after {
    font-family: "Font Awesome 5 Free" !important;
    content: "00c" !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: 2px !important;
    right: 5px !important;
    color: #cc2300 !important;
    font-size: 1rem !important;
}