/* ===========================================================================
   사은품몰 공용 스타일 (2026-09-14 · 엔진 통합 1-2)
   한국어 /gifts.html 과 영문 /foreigners/gifts.html 이 **같은 파일**을 쓴다.
   ⛔ 원래 gifts.html <style> 에 있던 규칙을 **그대로** 옮긴 것이다(글자 하나 바꾸지 않음).
      한 언어 화면만 고치고 싶으면 루트의 data-lang 으로 좁힐 것 — 이 파일을 복사하지 말 것.
   =========================================================================== */
.gifts-page { padding-top: 0; min-height: 100vh; background: var(--bg-light); }
.points-bar { background: linear-gradient(135deg, var(--bg-dark), #16213e); padding: 20px; text-align: center; color: #fff; }
.points-bar .pts { font-size: 28px; font-weight: 800; color: #FEE500; }
.category-tabs { display: flex; gap: 8px; justify-content: center; padding: 24px 20px; flex-wrap: wrap; }
.cat-btn { padding: 10px 24px; border-radius: 30px; border: 2px solid var(--border); background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition); }
.cat-btn.active { border-color: var(--primary); background: var(--primary); color: #fff; }
/* [2026-06-23 가격정렬] grid-auto-rows:1fr → 줄바꿈돼도 모든 카드 동일 높이 */
.gifts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 1fr; gap: 20px; padding: 0 20px 40px; max-width: var(--max-width); margin: 0 auto; }
/* [2026-06-23 가격정렬] flex column → 가격/재고를 카드 하단에 정렬(.price margin-top:auto) */
.gift-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); display: flex; flex-direction: column; }
.gift-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* [2026-06-23 재수정] 고정 height 제거 → aspect-ratio 1/1(정사각형 비율). 이미지는 cover로 칸을 꽉 채움 */
.gift-img { aspect-ratio: 1 / 1; flex-shrink: 0; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 48px; position: relative; }
.gift-img img { width: 100%; height: 100%; object-fit: cover; }
.gift-img .sold-out { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 800; }
.gift-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.gift-body h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.gift-body .cat { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
/* [2026-06-23 가격정렬2] 가격+재고를 price-box로 묶어 하단 고정. 가격 자체의 margin-top:auto는 제거 */
.gift-body .price-box { margin-top: auto; }
.gift-body .price { font-size: 20px; font-weight: 800; color: var(--primary); }
/* 재고 줄은 항상 렌더(무제한은 &nbsp; 플레이스홀더) → 가격 줄 높이 일관 */
.gift-body .stock { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.gift-actions { padding: 0 20px 20px; }
.order-summary { background: var(--bg-light); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 20px; }
.order-summary h4 { font-size: 16px; margin-bottom: 8px; }
.order-summary .total { font-size: 18px; font-weight: 800; color: var(--primary); margin-top: 8px; }
.delivery-options { display: flex; gap: 12px; margin-bottom: 16px; }
.delivery-opt { flex: 1; padding: 16px; border: 2px solid var(--border); border-radius: var(--radius-sm); text-align: center; cursor: pointer; transition: var(--transition); }
.delivery-opt.active { border-color: var(--primary); background: rgba(237,28,36,0.05); }
.delivery-opt h4 { font-size: 14px; margin-bottom: 4px; }
.delivery-opt p { font-size: 12px; color: var(--text-sub); }
/* 담기 버튼 (카드 하단) */
.gift-actions { padding: 0 20px 20px; }
.btn-add { width: 100%; padding: 10px; border: 2px solid var(--primary); background: #fff; color: var(--primary); border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; cursor: pointer; transition: var(--transition); }
.btn-add:hover { background: var(--primary); color: #fff; }
.btn-add:disabled { border-color: var(--border); color: var(--text-light); background: #f7f7f7; cursor: default; }
/* [2026-08-09] 상품 상세 내용 — 서버가 sanitize 한 HTML + 상세 이미지 */
.gift-detail { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
.gift-detail-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text-main); }
/* 관리자가 넣은 서식은 살리되, 폭은 화면을 넘지 못하게 묶는다 */
.gift-detail-html { font-size: 14px; line-height: 1.75; color: var(--text-main); word-break: break-word; overflow-wrap: anywhere; }
.gift-detail-html img { max-width: 100%; height: auto; }
.gift-detail-imgs { margin-top: 14px; }
/* 이어 붙인 상세 이미지 — 사이 여백 0 이 쇼핑몰 관행이다(제조사 페이지가 이어지도록) */
.gift-detail-imgs img { display: block; width: 100%; max-width: 100%; height: auto; }

/* 장바구니 하단 고정 바 */
#cartBar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #111827; color: #fff; padding: 12px 16px; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -2px 12px rgba(0,0,0,.25); }
#cartBar .cart-bar-btn { white-space: nowrap; padding: 10px 18px; border: none; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 700; cursor: pointer; }
/* 장바구니 품목 */
.cart-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cart-item .ci-img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: #f0f0f0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.cart-item .ci-body { flex: 1; min-width: 0; }
.cart-item .ci-name { font-weight: 700; font-size: 14px; }
.cart-item .ci-unit { font-size: 12px; color: var(--text-light); }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.qty-stepper button { width: 30px; height: 30px; border: none; background: #f7f7f7; font-size: 16px; cursor: pointer; }
.qty-stepper button:disabled { color: #ccc; cursor: default; }
.qty-stepper span { min-width: 32px; text-align: center; font-weight: 700; font-size: 14px; }
.ci-remove { border: none; background: none; color: var(--text-light); font-size: 12px; cursor: pointer; text-decoration: underline; }
/* [2026-08-07] 포인트 적립 안내 배너 — 카테고리 탭 위. 숫자만 강조하고 배경은 옅게.
   문구는 api/src/utils/points.js 정책과 맞춘 것: 주기당 20,000P, 6개월 주기, cycle 0~3(최대 2년),
   이월 없음(주기 내 사용). 한시 캠페인(폴더블8 첫 주기 10만P)은 일반 안내라 넣지 않는다. */
.point-notice { max-width: var(--max-width); margin: 20px auto 0; padding: 14px 18px; background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: var(--radius-sm); text-align: center; }
.point-notice .pn-main { font-size: 15px; font-weight: 600; color: #1f2937; line-height: 1.5; }
.point-notice .pn-main b { color: #4f46e5; font-weight: 800; }
.point-notice .pn-sub { font-size: 13px; color: var(--text-sub); margin-top: 4px; }
/* [2026-08-07] 정렬 툴바 — 카테고리 탭 아래 오른쪽 정렬 */
.gift-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: var(--max-width); margin: 0 auto; padding: 0 20px 12px; }
.gift-toolbar label { font-size: 13px; color: var(--text-light); }
.gift-sort { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
/* [2026-08-09] 상품 검색 — 정렬 툴바와 같은 줄. 좁으면 검색창이 한 줄을 차지하도록 flex 로 늘린다 */
.gift-search { flex: 1 1 200px; min-width: 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #fff; }
.gift-count { font-size: 13px; color: var(--text-light); white-space: nowrap; }
.gift-empty-search { text-align: center; padding: 40px 20px; grid-column: 1/-1; color: var(--text-light); }
.gift-empty-search .ges-title { font-size: 15px; font-weight: 600; color: var(--text-sub); margin-bottom: 12px; }
/* [2026-08-07] 모바일 2열 — phones.html(.ph-grid) 과 같은 패턴 */
@media (max-width: 768px) {
    .gifts-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 12px 32px; }
    .gift-body { padding: 12px; }
    /* 2열에서는 폭이 좁아 긴 상품명이 카드를 밀어낸다 → 2줄까지만 보이고 말줄임 */
    .gift-body h3 {
        font-size: 14px; line-height: 1.35;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; text-overflow: ellipsis;
    }
    .gift-body p { display: none; }          /* 설명문은 2열에서 생략 (상세에서 확인) */
    .gift-body .price { font-size: 17px; white-space: nowrap; }
    .gift-body .stock { font-size: 11px; }
    .gift-actions { padding: 0 12px 12px; }
    .btn-add { padding: 8px; font-size: 13px; }
    .gift-toolbar { padding: 0 12px 10px; }
    /* 배너는 모바일에서 두 줄로 자연스럽게 접히게 — 문구 중간에서 끊기지 않도록 조각 단위로 줄바꿈 */
    .point-notice { margin: 14px 12px 0; padding: 12px 14px; }
    .point-notice .pn-main { font-size: 14px; }
    .point-notice .pn-main .pn-piece { display: inline-block; }
    .point-notice .pn-sub { font-size: 12px; }

    /* [2026-08-08] 모달 → 전체 폭 바텀시트.
       공용 style.css 의 .modal-overlay{padding:20px} 때문에 390px 화면에서 좌우 20px(폭의 10%)를
       버리고 본문이 350px 로 눌린다. 이 페이지 안에서만 덮어써서 폭을 그대로 쓴다.
       (공용 CSS 를 고치면 고객 사이트 전 페이지 모달이 함께 바뀌고 캐시버스터 일괄 갱신도 필요하다) */
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal { max-width: 100%; border-radius: 12px 12px 0 0; max-height: 92vh; }
    .modal-header { padding: 16px 18px; }
    .modal-body { padding: 16px 18px 20px; }

    /* 수령 방법 2칸은 390px 에서 각 165px 라 배지가 두 줄로 꺾인다 → 한 줄 유지 */
    .delivery-options { gap: 8px; }
    #deliveryFeeBadge { white-space: nowrap; font-size: 10.5px; padding: 2px 6px; }
}

/* 장바구니 모달이 열려 있는 동안에는 하단 고정 바를 숨긴다.
   같은 내용을 두 번 보여줄 이유가 없고("장바구니 보기"인데 이미 열려 있다),
   60px 를 잡아먹어 모달 하단(차감 포인트·주문하기)과 겹쳐 보인다.
   :has() 대신 클래스 토글을 쓰는 이유 — #cartBar 가 #cartModal 보다 앞에 있어 형제 선택자가 안 먹는다. */
body.cart-open #cartBar { display: none !important; }

/* ===== 주문 내역 공용 카드(/js/gifts-orders.js) — 2026-09-14 · 엔진 통합 1-4 =====
   한국어 /mypage.html 은 이 규칙을 **쓰지 않는다**(자기 <style> 그대로 — 동작 불변).
   영문 /foreigners/mypage.html 은 `.foreigners-page` 리셋(button 테두리·배경 제거, a 색 상속) 안에 있어서
   같은 카드가 다르게 보인다 → `.gift-orders` 안에서만 한국어 마이페이지와 같은 값으로 되돌린다. */
.gift-orders .status-badge { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.gift-orders .empty-state { text-align: center; padding: 40px; color: var(--text-light); }
.foreigners-page .gift-orders .btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.foreigners-page .gift-orders .btn-outline:hover { background: var(--primary); color: #fff; }
.foreigners-page .gift-orders .btn-primary { background: var(--primary); color: #fff; }
.foreigners-page .gift-orders a[target="_blank"] { color: var(--primary); }