/* ===== 뽕할머니 Live 주문 시스템 - Mobile First ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary: #e8392e;
  --primary-dark: #c92c22;
  --accent: #ff8a00;
  --dark: #222;
  --gray: #666;
  --light: #f7f7f7;
  --border: #e5e5e5;
  --green: #1a9e4b;
  --blue: #2563eb;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;
  background: #fff;
  color: var(--dark);
  line-height: 1.5;
  padding-bottom: 60px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 640px; margin: 0 auto; padding: 0 16px; }

/* 홈 배너: 가로 100% 여백 없이 */
.home-banner { width: 100%; overflow: hidden; background: #fff; }
.home-banner .home-banner-img { width: 100%; height: auto; display: block; }

/* 타이틀 */
.page-title { text-align: center; font-size: 18px; font-weight: 700; padding: 18px 16px 6px; }
.page-sub { text-align: center; font-size: 13px; color: var(--gray); padding: 0 16px 14px; }

/* 상품 카드 그리드 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 8px 0 20px;
}
@media (min-width: 720px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .container { max-width: 900px; }
}
.product-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .15s ease;
}
.product-card:active { transform: scale(.98); }
.product-card .thumb { aspect-ratio: 1/1; background: var(--light); }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .info { padding: 10px 12px 12px; }
.product-card .p-name {
  font-size: 13px; font-weight: 600; line-height: 1.4; height: 36px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.product-card .p-price { margin-top: 6px; font-size: 16px; font-weight: 800; color: var(--primary); }
.product-card .p-ship { font-size: 11px; color: var(--gray); margin-top: 2px; }
/* 장바구니: 카드 전체 링크(블록화) + 하단 담기 버튼 영역 */
.product-card .card-link { display: block; }
.product-card .card-add { padding: 0 12px 12px; }

/* 상품 상세 */
.detail { padding: 8px 0 20px; }
.detail .d-img { border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.detail h1 { font-size: 20px; line-height: 1.35; margin-bottom: 8px; }
.detail .price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.detail .price { font-size: 26px; font-weight: 800; color: var(--primary); }
.detail .price-unit { font-size: 15px; color: var(--primary); font-weight: 700; }
.detail .ship { font-size: 13px; color: var(--gray); }
.detail .desc { margin-top: 14px; font-size: 14px; color: #444; white-space: pre-wrap; }

/* ===== 썸네일 캐러셀 (공용) ===== */
.carousel { position: relative; overflow: hidden; }
.carousel-track {
  display: flex;
  will-change: transform;
  transform: translateX(0);
}
.carousel-slide {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.carousel-dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 6px;
  z-index: 5;
}
.carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.7);
  padding: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.carousel-dot.active { background: var(--primary, #e8392e); }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.85); color: #333;
  font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center;
}
.carousel-arrow.prev { left: 8px; }
.carousel-arrow.next { right: 8px; }
.carousel-arrow:hover { background: #fff; }

/* 상품 카드 썸네일 캐러셀 (메인 그리드) */
.product-card .thumb .carousel { border-radius: inherit; }
.product-card .thumb .carousel .carousel-slide { aspect-ratio: 1 / 1; object-fit: cover; }
.product-card .thumb .carousel .carousel-dot { width: 6px; height: 6px; }
.product-card .thumb .carousel .carousel-dots { bottom: 4px; }
.product-card .thumb .carousel .carousel-arrow { display: none; }


/* 상세 페이지 캐러셀: 세로로 긴 이미지도 1:1 썸네일 비율로 고정 (레이아웃 균일화) */
.d-img .carousel { border-radius: 12px; }
.d-img .carousel .carousel-slide { aspect-ratio: 1 / 1; object-fit: cover; }
.d-img .carousel .carousel-dot { width: 7px; height: 7px; }
/* 단일 이미지(캐러셀 아님)도 동일한 1:1 썸네일 비율 적용 */
.d-img > img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* 수량 선택 */
.qty-row { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.qty-row label { font-weight: 700; font-size: 15px; }
.qty-control { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.qty-control button { width: 40px; height: 40px; border: none; background: var(--light); font-size: 20px; cursor: pointer; }
.qty-control input { width: 52px; height: 40px; border: none; text-align: center; font-size: 16px; font-weight: 700; }

/* 하단바: 수량 + 총금액 통합 한 줄 */
.sum-row {
  background: var(--light); border-radius: 10px; padding: 10px 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.sum-row .qty-wrap { display: flex; align-items: center; gap: 10px; }
.sum-row .qty-wrap .label { font-size: 13px; }
.sum-row .qty-wrap .qty-control button { width: 32px; height: 34px; font-size: 18px; }
.sum-row .qty-wrap .qty-control input { width: 44px; height: 34px; font-size: 15px; }
.sum-row .total-wrap { text-align: right; }
.sum-row .total-wrap .label { display: block; font-size: 12px; color: var(--gray); margin-bottom: 2px; }
.sum-row .total-wrap .amount { font-size: 20px; font-weight: 800; color: var(--primary); white-space: nowrap; }
.sum-row .label { font-weight: 700; }
.sum-row .amount { font-size: 22px; font-weight: 800; color: var(--primary); }

/* 버튼 */
.btn {
  display: block; width: 100%; padding: 15px; border: none; border-radius: 10px;
  font-size: 17px; font-weight: 700; cursor: pointer; text-align: center; transition: opacity .15s;
}
.btn:active { opacity: .85; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-outline { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.btn-green { background: var(--green); color: #fff; }
.btn-block { display: block; width: 100%; }

/* 주문조회 액션 버튼: 2개일 때 한 줄 50%씩, 1개일 때는 전체 폭 */
.lookup-actions { display: flex; gap: 10px; }
.lookup-actions .btn { flex: 1; padding: 13px 10px; font-size: 15px; }
.lookup-hint { margin-top: 14px; text-align: center; }


/* 폼 */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 15px; background: #fff;
}
/* 체크박스는 가로 100% 확장 없이 원본 크기 유지 */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: auto; padding: 0; vertical-align: middle;
}
.form-group input:focus { border-color: var(--primary); outline: none; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; }
.small-btn {
  flex: 0 0 auto; padding: 13px 14px; border: 1px solid var(--blue);
  border-radius: 8px; background: #fff; color: var(--blue); font-weight: 700; cursor: pointer;
}

/* 카드 섹션 */
.card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.card h2 { font-size: 15px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }

/* 계좌 안내 */
.bank-box {
  position: relative;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px;
}
.bank-box .bank-info { padding-right: 88px; } /* 복사 버튼 우상단 자리 확보 */
.bank-box .bank-name { font-weight: 800; font-size: 15px; }
.bank-box .account { font-size: 20px; font-weight: 800; letter-spacing: 1px; margin: 6px 0 4px; color: var(--primary); word-break: break-all; }
.bank-box .holder { font-size: 13px; color: var(--gray); }
.bank-copy-btn {
  position: absolute; top: 10px; right: 10px;
  display: inline-block;
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  background: var(--primary, #e8392e);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, transform .1s;
}
.bank-copy-btn:hover { background: #c62a20; }
.bank-copy-btn:active { transform: scale(.97); }
.bank-copy-btn.is-copied { background: #16a34a; }


/* 주문 완료 */
.complete-icon {
  width: 72px; height: 72px; margin: 10px auto 16px; border-radius: 50%;
  background: #e6f6ec; color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 36px;
}
.order-no {
  background: var(--dark); color: #fff; text-align: center; padding: 14px;
  border-radius: 10px; font-size: 20px; font-weight: 800; letter-spacing: 1px; margin: 14px 0;
}
.complete-info { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 18px; }
.complete-info th, .complete-info td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.complete-info th { color: var(--gray); font-weight: 600; width: 34%; white-space: nowrap; }

/* 상태 배지 */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-waiting { background: #fff3cd; color: #8a6d1a; }
.badge-paid { background: #d1fae5; color: var(--green); }
.badge-preparing { background: #e0e7ff; color: #3730a3; }
.badge-shipped { background: #dbeafe; color: var(--blue); }
.badge-completed { background: #e5e7eb; color: #374151; }
.badge-completed { background: #e5e7eb; color: #374151; }
.badge-canceled { background: #f3f4f6; color: #6b7280; text-decoration: line-through; }


/* 테이블 */
.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th, table.data-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
table.data-table th { background: var(--light); font-weight: 700; }
.ellip { display: inline-block; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }

/* 알림 */
.alert { padding: 12px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }
.alert-error { background: #fee2e2; color: #b91c1c; }
.alert-success { background: #d1fae5; color: var(--green); }

/* 검색폼 */
.search-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 16px; }
.search-form .form-group { margin-bottom: 0; flex: 1; min-width: 120px; }
.search-form .form-group input { padding: 11px 12px; }

/* 품목명 치환 관리 — 매핑 추가 폼 (셀렉트 + 치환값 + 추가 버튼 한 줄 정렬) */
.mapping-add-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 4px; }
.mapping-add-form .form-group { flex: 1 1 220px; margin-bottom: 0; min-width: 200px; }
.mapping-add-form .form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.mapping-add-form .form-group select,
.mapping-add-form .form-group input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 14px; background: #fff;
}
.mapping-add-form .btn { flex: 0 0 auto; white-space: nowrap; }
.mapping-add-form .line-hint { width: 100%; margin: 0; }

/* 매핑 목록 — 기적수산 품목명 입력 + 저장 버튼을 한 줄로 */
.mapping-inline { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.mapping-inline input {
  width: 170px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px;
}
.mapping-inline .btn { white-space: nowrap; }

/* SEO 관리 — 대시보드 상단 액션(동기화 / sitemap / robots) 한 줄 */
.seo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seo-actions form { margin: 0; }
.seo-actions .btn { width: auto; display: inline-block; padding: 10px 16px; font-size: 14px; white-space: nowrap; }

/* SEO 관리 — 상품 SEO 입력 필드 + 저장 버튼 */
.seo-title-input { width: 220px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.seo-desc-input { width: 260px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.seo-save-btn { white-space: nowrap; display: inline-block; width: auto; padding: 9px 16px; font-size: 13px; }

/* SEO 관리 — 미리보기/검증 테이블 여백과 JSON 출력 */
.seo-table-gap { margin-top: 14px; }
.seo-json-pre { max-height: 240px; overflow: auto; font-size: 11px; margin: 0; }
.seo-search-form select {
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #fff;
}

/* 통계 카드 */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.stat-card { background: var(--light); border-radius: 10px; padding: 14px; text-align: center; }
.stat-card .num { font-size: 22px; font-weight: 800; }
.stat-card .lbl { font-size: 12px; color: var(--gray); margin-top: 2px; }

/* 푸터 */
.footer { text-align: center; color: #999; font-size: 12px; padding: 0; margin-top: 40px; background: #f7f7f8; border-top: 1px solid var(--border); }
.footer-inner { max-width: 960px; margin: 0 auto; padding: 28px 16px 20px; }
.footer-cols { display: flex; gap: 32px; flex-wrap: wrap; text-align: left; }
.footer-col { min-width: 160px; }
.footer-col-wide { flex: 1 1 380px; }
.footer-col-title { font-weight: 700; color: #444; font-size: 13px; margin-bottom: 10px; }
.footer-links, .footer-info { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--blue, #2563eb); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-info li { margin-bottom: 5px; color: #777; line-height: 1.6; word-break: keep-all; }
.footer-info a { color: var(--blue, #2563eb); text-decoration: none; }
.footer-info a:hover { text-decoration: underline; }
.footer-copy { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); color: #aaa; font-size: 11px; }

/* 정책 페이지 (개인정보처리방침 / 이용약관) */
.policy-box { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 26px 24px; margin-top: 8px; line-height: 1.8; }
.policy-h2 { font-size: 16px; color: #222; margin: 26px 0 10px; }
.policy-h2:first-child { margin-top: 0; }
.policy-p { margin: 0 0 10px; color: #444; font-size: 14px; word-break: keep-all; }

/* 하단 고정 버튼 (모바일) - 스크롤 방향에 따라 접히는 드로워 */
.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid var(--border);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); z-index: 200;
  transition: transform .3s ease;
}
/* 스크롤 다운 시 아래로 접힘 (쿠팡식) */
.bottom-bar.is-hidden { transform: translateY(105%); }
.bottom-bar .container { padding: 0; }
.bottom-bar .bank-wrap {
  /* 은행 드로워: max-height로 접히고 펼침 */
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.bottom-bar .bank-wrap.open { max-height: 200px; }
.bottom-bar .bank-box { margin-top: 10px; margin-bottom: 0; }

/* ===== 주문 완료 - 입금 안내 강조 박스 ===== */
.deposit-banner {
  background: linear-gradient(135deg, #fff7ed, #ffe8cc);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 20px;
  text-align: center;
}
.deposit-banner .deposit-label {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 999px; margin-bottom: 10px;
}
.deposit-banner .deposit-amount { font-size: 34px; font-weight: 900; color: var(--primary); letter-spacing: -1px; }
.deposit-banner .deposit-amount span { font-size: 16px; font-weight: 700; color: var(--gray); }
.deposit-banner .deposit-name { font-size: 18px; font-weight: 800; color: var(--dark); margin-top: 4px; }
.deposit-banner .deposit-name b { color: var(--primary); font-size: 22px; }
.deposit-banner .deposit-cta { font-size: 13px; color: var(--gray); margin-top: 10px; }

/* ===== 모달 팝업 ===== */
.modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.55);
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  position: relative; width: 100%; max-width: 360px;
  background: #fff; border-radius: 18px; padding: 26px 22px 22px;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: modalPop .25s ease;
}
@keyframes modalPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal .modal-close {
  position: absolute; top: 10px; right: 14px; border: none; background: none;
  font-size: 26px; color: #999; cursor: pointer; line-height: 1;
}
.modal .modal-icon { font-size: 46px; margin-bottom: 6px; }
.modal .modal-title { font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.modal .modal-amount { font-size: 40px; font-weight: 900; color: var(--primary); margin-bottom: 8px; }
.modal .modal-desc { font-size: 14px; color: var(--gray); line-height: 1.6; margin-bottom: 14px; }
.modal .modal-bank {
  background: var(--light); border-radius: 10px; padding: 12px; font-size: 14px;
  font-weight: 700; color: var(--dark); margin-bottom: 12px; line-height: 1.5;
}
.modal .modal-depositor { font-size: 15px; color: var(--gray); margin-bottom: 16px; }
.modal .modal-depositor b { color: var(--primary); font-size: 19px; }
.modal .modal-ok { width: 100%; font-size: 16px; padding: 14px; }

/* ===== 홈화면 설치 유도 배너 (PWA) ===== */
.install-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(0,0,0,.08);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.install-banner-inner { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; }
.install-banner .install-icon { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; }
.install-banner .install-text { flex: 1; min-width: 0; }
.install-banner .install-text strong { display: block; font-size: 14px; }
.install-banner .install-text span { display: block; font-size: 12px; color: var(--gray); }
.install-banner .install-btn {
  flex: 0 0 auto; border: none; background: var(--primary); color: #fff;
  padding: 10px 18px; border-radius: 8px; font-weight: 800; font-size: 14px; cursor: pointer;
}
.install-banner .install-close {
  flex: 0 0 auto; border: none; background: none; font-size: 24px; color: #999; cursor: pointer; line-height: 1;
}


/* ===== 라이브 이벤트 (타임세일/선착순) ===== */
.ev-blink { animation: evBlink 1s infinite; font-weight: 800; }
@keyframes evBlink { 0%,100%{opacity:1} 50%{opacity:.35} }

.ev-glow { color: var(--primary); text-shadow: 0 0 10px rgba(232,57,46,.45); animation: evPulse 1.2s ease-in-out infinite; }
@keyframes evPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

/* 가격: 취소선(원가) + 할인가 */
.price-line { color: #999; font-size: .9em; font-weight: 500; }
.sale-price { color: var(--primary); font-weight: 900; }

/* 이벤트 배너 (배너/상세/주문 공통) */
.ev-banner { background: linear-gradient(135deg, #fff1f0, #ffe8e6); border: 2px solid var(--primary); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.ev-banner-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.ev-banner-sub { color: var(--primary-dark); font-size: 12px; font-weight: 600; }
.ev-banner-prices { margin-top: 6px; font-size: 15px; display: flex; align-items: baseline; gap: 6px; }
.ev-banner-prices .sale-price { font-size: 24px; }
.ev-arrow { color: var(--primary); font-weight: 800; }

/* 메인 티커(마퀴) */
.ev-marquee-wrap { background: linear-gradient(90deg, #ff4d40, #ff9a3d, #ff4d40); background-size: 200% 100%; animation: evMarqueeBg 6s linear infinite; color: #fff; padding: 8px 12px; overflow: hidden; font-size: 13px; }
@keyframes evMarqueeBg { 0%{background-position:0% 0} 100%{background-position:200% 0} }
.ev-marquee { display: flex; align-items: center; gap: 10px; }
.ev-marquee .ev-t-badge { background: #fff; color: var(--primary); font-weight: 900; font-size: 11px; padding: 2px 8px; border-radius: 999px; animation: evBlink 1s infinite; }
.ev-marquee .ev-ticker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ev-t-name { font-weight: 700; }
.ev-t-sale { color: #ffe; font-weight: 900; }
.ev-t-left { font-weight: 800; color: #fff; }
.ev-marquee-wrap marquee { display: block; }

/* ===== 총 재고 / 품절 ===== */
.stock-line { font-size: 13px; color: var(--gray); margin: 6px 0 4px; }
.stock-low-line { font-size: 13px; font-weight: 700; color: #b91c1c; margin: 6px 0 4px; animation: evBlink 1.2s infinite; }
.stock-low-line b { color: var(--primary); }
.soldout-line { font-size: 15px; font-weight: 800; color: #b91c1c; margin: 8px 0 4px; }

/* 메인 카드 품절 */
.product-card { position: relative; }
.product-card.is-soldout { opacity: .55; filter: grayscale(.4); cursor: not-allowed; }
.soldout-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(0,0,0,.72); color: #fff; font-weight: 900; font-size: 12px;
  padding: 4px 10px; border-radius: 999px; letter-spacing: .5px;
}

/* ===== 실시간 접속/주문 인원 (하트비트) ===== */
.hb-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px;
  background: linear-gradient(135deg, #fff1f0, #ffe8e6);
  border: 1px solid #ffd5d1; border-radius: 12px;
  padding: 9px 12px; margin: 12px auto; max-width: 640px;
  font-size: 13px; font-weight: 600; color: var(--primary-dark);
}
.hb-bar .hb-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hb-bar .hb-num { font-weight: 900; color: var(--primary); font-size: 15px; }
.hb-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  display: inline-block; animation: evBlink 1.2s infinite;
}
.hb-bar.hb-product { margin-top: 0; margin-bottom: 12px; }
.hb-bar.hb-hot { border-color: var(--primary); background: linear-gradient(135deg, #ffece8, #ffd9d2); }


/* 상품 카드 이벤트 강조 */
.product-card.has-event { border: 2px solid var(--primary); box-shadow: 0 0 0 2px rgba(232,57,46,.2); position: relative; }
.ev-badge { position: absolute; top: 6px; left: 6px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 900; padding: 3px 7px; border-radius: 6px; animation: evBlink 1s infinite; z-index: 2; }
.p-price.sale { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.p-event { font-size: 11px; margin-top: 3px; color: var(--primary); font-weight: 700; }
.ev-left { animation: evBlink 1.2s infinite; font-weight: 800; }
.ev-time { color: #b45309; }

/* 카운트다운 */
.ev-countdown { margin-top: 8px; display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.ev-cd-label { font-size: 12px; font-weight: 700; color: #b91c1c; }
.ev-cd-time { font-size: 20px; font-weight: 900; color: #b91c1c; }
.ev-cd-ms { font-size: 13px; font-weight: 800; color: #b91c1c; }
.ev-countdown.urgent600 .ev-cd-time { animation: evPulse .6s ease-in-out infinite; }
.ev-countdown.urgent60 { background: #fee2e2; border-radius: 10px; padding: 6px 8px; }
.ev-countdown.urgent60 .ev-cd-time, .ev-countdown.urgent60 .ev-cd-ms { animation: evBlink .4s infinite; }
.ev-countdown.ev-ended .ev-cd-label { color: #666; }
.ev-countdown.ev-ended .ev-cd-time, .ev-countdown.ev-ended .ev-cd-ms { color: #666; animation: none; }

/* 상세/주문 잔여 표시 */
.ev-remaining { margin-top: 8px; font-size: 14px; font-weight: 700; color: #b45309; }
.ev-remaining-live { background: var(--primary); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 4px; animation: evBlink 1s infinite; }

/* 플로팅 잔여수 위젯 (우하단) */
.ev-float { position: fixed; right: 12px; bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 300; }
.ev-float-inner { background: linear-gradient(135deg, #232323, #3a0d0d); color: #fff; border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: evFloatPulse 1.6s ease-in-out infinite; }
@keyframes evFloatPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.ev-float-icon { font-size: 20px; animation: evBlink .8s infinite; }
.ev-float-text { font-size: 13px; font-weight: 800; line-height: 1.25; }
.ev-float-label { display: block; font-size: 10px; color: #ffb1ab; font-weight: 700; }
.ev-float.ev-flash .ev-float-inner { animation: evFlashShake .4s; background: #b91c1c; }
@keyframes evFlashShake { 0%,100%{transform:scale(1)} 25%{transform:scale(1.1) rotate(-2deg)} 75%{transform:scale(1.1) rotate(2deg)} }
.ev-float.ev-low .ev-float-inner { background: #b91c1c; animation: evFlashShake .5s infinite; }
.ev-float.ev-sold-out { display: none; }

/* ===== 카카오상담 플로팅 버튼 (메인에서만) =====
   우하단 고정. 안드로이드/아이폰은 카카오톡 앱 딥링크, PC는 웹 채팅으로 분기한다. */
.kakao-chat-float {
  position: fixed;
  right: 12px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 305;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
}
.kakao-chat-float .kakao-chat-bubble {
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  animation: kakaoChatPop .6s ease-out both;
  white-space: nowrap;
}
.kakao-chat-float .kakao-chat-ico {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #FEE500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(254,229,0,.5), 0 4px 12px rgba(0,0,0,.22);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.kakao-chat-float:active .kakao-chat-ico { transform: scale(.92); }
.kakao-chat-float .kakao-chat-ico svg { display: block; }
@keyframes kakaoChatPop { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* 홈화면 설치 유도 배너(#installBanner)가 하단에 뜨면 카카오 아이콘이 배너와 겹치지
   않도록 배너 위로 올린다. (배너 표시 시 JS가 has-install-banner 클래스 부여) */
.kakao-chat-float.has-install-banner { bottom: calc(92px + env(safe-area-inset-bottom)); }



/* ===== 상단 고정 배너 (이벤트 + 하트비트) =====
   이벤트 배너(.ev-sticky)는 항상 화면 최상단 고정,
   하트비트(.hb-sticky)는 그 아래에서 스크롤 방향에 따라 숨김/나타남.
   (고정/위치 계산은 assets/js/sticky-banners.js 가 담당) */

/* 이벤트 고정 배너: 항상 화면 최상단 */
.ev-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 70;
  margin: 0;
  padding: 0;
}
.ev-sticky .ev-marquee-wrap { border-radius: 0; }

/* 하트비트 배너: 이벤트 배너 아래, 스크롤 방향에 따라 숨김/나타남 */
.hb-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 60;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid #ffe0de;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
/* 가로 100% 한 줄 흐르는 배너 */
.hb-sticky .hb-bar {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, #fff1f0, #ffe8e6);
  font-size: 13px; font-weight: 600; color: var(--primary-dark);
}
/* <marquee> 폐기 → 정적 배너 (모바일 리페인트 버그 방지, 중복 표시 제거) */
.hb-static {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 24px;
  width: 100%;
}
.hb-sticky .hb-bar .hb-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.hb-bar .hb-num { font-weight: 900; color: var(--primary); font-size: 15px; }
.hb-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  display: inline-block; animation: evBlink 1.2s infinite;
}
.hb-sticky .hb-bar.hb-hot { background: linear-gradient(90deg, #ffece8, #ffd9d2); }
/* 상세 페이지 재고 줄도 sticky 바 안에 함께 보임 (한 줄) */
.hb-sticky .stock-line { text-align: center; padding: 2px 0 6px; margin: 0; white-space: nowrap; }
/* 재고 줄도 흐르게 하고 싶으면 아래 주석 해제
.hb-sticky .stock-line { white-space: nowrap; overflow: hidden; }
.hb-sticky .stock-line marquee { display: block; }
*/
/* 하트비트 배너가 스크롤다운으로 숨겨질 때 위로 밀려나고, 이벤트 배너 아래에 정렬 */
#stickyPad { display: block; width: 100%; }

/* ===== 관리자: 실시간 인원 ON/OFF 토글 스위치 ===== */
.hb-toggle { position: relative; display: inline-block; width: 52px; height: 28px; cursor: pointer; }
.hb-toggle input { opacity: 0; width: 0; height: 0; }
.hb-toggle .hb-toggle-slider {
  position: absolute; inset: 0; background: #ccc; border-radius: 28px;
  transition: background .2s ease;
}
.hb-toggle .hb-toggle-slider::before {
  content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.hb-toggle input:checked + .hb-toggle-slider { background: var(--green); }
.hb-toggle input:checked + .hb-toggle-slider::before { transform: translateX(24px); }

/* ===== 관리자: 메인가기 버튼 ===== */
.admin-home-link {
  display: inline-block; margin-left: auto; white-space: nowrap;
  padding: 8px 14px; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 999px; text-decoration: none;
}
.admin-home-link:hover { filter: brightness(1.08); }
.admin-logout-link {
  display: inline-block; white-space: nowrap;
  padding: 8px 14px; font-size: 13px; font-weight: 700; color: #ddd;
  border: 1px solid #555; border-radius: 999px; text-decoration: none;
}
.admin-logout-link:hover { color: #fff; border-color: #888; }
.admin-topbar {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  background: linear-gradient(135deg, #1b1b1b, #333); padding: 8px 10px;
}
.admin-topbar .admin-brand { color: #fff; font-weight: 800; font-size: 14px; padding: 0 6px; }

/* ===== 공통 유틸리티 (인라인 style="" 제거용) ===== */
/* 마진/정렬 */
.mt-2 { margin-top: 2px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-30 { margin-bottom: 30px; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.muted { color: var(--gray); }
.text-primary { color: var(--primary); }
.text-warn { color: #b45309; }
.text-bold { font-weight: 800; }
.text-strong { font-weight: 800; color: var(--primary); }
.text-13 { font-size: 13px; }
.text-12 { font-size: 12px; }
.text-11 { font-size: 11px; }
.text-14 { font-size: 14px; }
.line-hint { font-size: 12px; color: var(--gray); margin-top: 4px; }
.line-hint-lg { font-size: 13px; color: var(--gray); margin-top: 4px; }
.block-hint { font-size: 13px; color: var(--gray); }
.block-hint-14 { font-size: 12px; color: var(--gray); margin-bottom: 14px; }

/* 빈 상태 / 안내 문구 */
.empty {
  text-align: center; color: var(--gray); padding: 30px;
}
.empty-sm { text-align: center; color: var(--gray); }

/* 버튼 크기/표시 유틸 */
.btn-block { width: 100%; }
/* 발주서 통합 UI: 라디오 pill + 발주사 구분 뱃지 */
.radio-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.radio-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; background: #fff; }
.radio-pill input { accent-color: var(--primary); }
.bulk-kind { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.bulk-kind-shop { background: #dbeafe; color: #1d4ed8; }
.bulk-kind-pkg { background: #fef3c7; color: #b45309; }
.login-container { max-width: 420px; margin-top: 60px; }
.login-title { padding: 0 0 16px; }
.btn-auto { width: auto; padding: 11px 20px; }
.btn-auto-inline { width: auto; padding: 11px 20px; display: inline-block; }
.btn-auto-sm { width: auto; padding: 9px 14px; font-size: 13px; }
.btn-sm-inline { width: auto; padding: 7px 14px; font-size: 13px; display: inline-block; }
.btn-danger-outline {
  width: auto; padding: 7px 14px; font-size: 13px;
  border-color: #e5e5e5; color: #b91c1c;
}
.btn-danger-outline-sm {
  width: auto; padding: 6px 12px; font-size: 12px;
  border-color: #e5e5e5; color: #b91c1c;
}

/* ===== 작은 버튼 (테이블 관리 컬럼용) — .btn의 block/전체폭을 해제 ===== */
.btn-sm {
  display: inline-block; width: auto;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600;
  border-radius: 7px; white-space: nowrap;
}
/* 테이블 행 관리 버튼: 가로 나란히 배치 */
.row-actions {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.row-actions a,
.row-actions form {
  display: inline-block; vertical-align: middle; margin: 0;
}
.row-actions .btn-sm { white-space: nowrap; }

/* 카드 헤더 (테이블 상단 액션 바) */
.table-toolbar { text-align: left; padding: 0 0 14px; }
.table-toolbar-bot { margin-bottom: 16px; }

/* 경고 강조 박스 */
.alert-note {
  background: #fff3e0; color: #8a5a00;
  padding: 12px 14px; border-radius: 8px; margin-bottom: 16px;
  font-size: 13px; line-height: 1.6;
}
.alert-warn-soft {
  background: #fef3c7; color: #b45309;
  padding: 8px 10px; border-radius: 6px;
  font-size: 12px; margin-top: 4px;
}

/* ===== 주문서 (order.php) 인라인 스타일 제거용 ===== */
.order-item-row { display: flex; gap: 12px; align-items: center; }
.order-item-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.order-item-name { font-weight: 700; }
.order-item-spec { font-size: 13px; color: var(--gray); }
.order-item-amount { font-weight: 800; color: var(--primary); }
.order-note { background: #fff3e0; color: #8a5a00; margin-bottom: 16px; padding: 12px 14px; border-radius: 8px; font-size: 13px; }

/* ===== 주문완료 (order_complete.php) ===== */
.complete-card { text-align: center; margin-top: 20px; }
.complete-title { font-size: 20px; margin-bottom: 4px; }
.complete-sub { font-size: 13px; color: var(--gray); margin-bottom: 10px; }
.complete-ev { margin-bottom: 16px; text-align: center; }
.complete-amount { font-weight: 800; color: var(--primary); }
.complete-account { font-weight: 800; }
.copy-static { position: static; display: inline-block; }
.copy-static-block { position: static; width: auto; margin: 0 auto 12px; display: block; }
.complete-actions .btn-primary { margin-bottom: 10px; }

/* ===== 상품 상세 (product.php) 추가 ===== */
.detail-gallery { margin-top: 16px; display: grid; grid-gap: 0; gap: 0; }
.detail-gallery img { width: 100%; border-radius: 0; }
.btn-disabled { opacity: .55; pointer-events: none; }
.bank-box-flat { margin: 0; }

/* ===== 주문조회 (order_lookup.php) ===== */
.lookup-card { margin-top: 8px; }
.lookup-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mb-0 { margin-bottom: 0; }
.lookup-btn-hidden { display: none; }
.lookup-cancel-row { margin-top: 12px; text-align: right; }
.btn-cancel-mini { display: inline-block; width: auto; padding: 9px 16px; font-size: 13px; }

/* ===== 관리자 (admin) 인라인 스타일 제거용 ===== */
.admin-toolbar { display: flex; align-items: center; gap: 8px; }
.admin-nav { background: var(--dark); white-space: nowrap; }
.admin-nav-inner { max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; padding: 0 8px; }
.admin-nav-link {
  display: inline-block; padding: 12px 14px; font-size: 13px; font-weight: 600; color: #ddd;
}
.admin-nav-link.active { color: #ff8a00; }

/* 서브메뉴 (호버 드롭다운) — 통계/발주관리/개발자 */
.admin-nav-item { position: relative; display: inline-block; }
.admin-submenu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 100;
  min-width: 150px; background: #fff; border: 1px solid var(--border, #ddd);
  border-radius: 0 0 8px 8px; box-shadow: 0 6px 16px rgba(0,0,0,.15); padding: 4px;
}
.admin-nav-item:hover .admin-submenu, .admin-nav-item:focus-within .admin-submenu, .admin-nav-item.nav-open .admin-submenu { display: block; }
.admin-submenu-link {
  display: block; padding: 9px 12px; font-size: 13px; color: #333;
  border-radius: 6px; white-space: nowrap;
}
.admin-submenu-link:hover { background: #fff3e0; }
.admin-submenu-link.active { color: #ff8a00; font-weight: 700; }

/* 개발자 섹션 상단 진입 탭 (드롭다운 외 항상 접근 가능한 링크) */
.dev-chips { margin: 14px 0 6px; }
.dev-chips a { font-size: 13px; padding: 7px 12px; }

/* 대시보드/통계 공용 */
.dash-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.dash-kpi { background: #fff; border: 1px solid var(--border, #e5e5e5); border-radius: 10px; padding: 16px 14px; text-align: center; }
.dash-kpi .num { font-size: 24px; font-weight: 800; }
.dash-kpi .lbl { font-size: 12px; color: var(--gray, #777); margin-top: 4px; }
.dash-kpi .sub { font-size: 11px; color: #999; margin-top: 2px; }
.dash-kpi-link { color: inherit; text-decoration: none; display: block; }
.dash-kpi-link:hover { border-color: #ff8a00; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-card h2 { display: flex; justify-content: space-between; align-items: center; }
.dash-more { font-size: 12px; font-weight: 400; color: #ff8a00; }
.echart { width: 100%; height: 280px; }
@media (max-width: 720px) {
  .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  /* 대시보드/통계: 모바일에서 2열 카드 그리드는 고정 폭 테이블이 컨테이너(640px)를
     넘겨 가로 스크롤을 유발하므로 1열로 세로 스택 (카드 내부 테이블은 카드 폭에 맞춤) */
  .dash-cols { grid-template-columns: 1fr; }
  /* 고정 폭(nowrap) 테이블 셀을 카드 폭에 맞게: 이름만 줄임표로 축소, 숫자/배지 열은 유지 */
  .dash-cols .data-table td:first-child { white-space: normal; word-break: break-word; max-width: 0; }
  .dash-cols .data-table th:first-child { white-space: normal; }
  .dash-cols .data-table th:last-child, .dash-cols .data-table td:last-child { text-align: right; }
  .echart { height: 240px; }

  /* 품목명 치환 추가 폼: 모바일에서 한 줄(세로) 정렬 */
  .mapping-add-form .form-group { flex: 1 1 100%; min-width: 0; }

  /* SEO 액션 버튼: 모바일에서 전체 폭으로 세로 정렬 */
  .seo-actions .btn, .seo-actions form { flex: 1 1 100%; }
  .seo-actions form .btn { flex: 1 1 100%; }

  /* 상품 SEO 입력 필드: 모바일에서 가로 폭 제한 해제 */
  .seo-title-input, .seo-desc-input { width: 100%; box-sizing: border-box; }

  /* 협력사 목록 관리 컬럼 버튼: 모바일에서 가로 고정(가로 스크롤 테이블 내) */
  .row-actions { flex-shrink: 0; }
}

.text-muted { color: var(--gray); }

/* SMS 로그 탭 */
.sms-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.btn-auto-sm { width: auto; padding: 9px 16px; }

/* SMS 로그 서브 탭 (트래픽/배송문자 필터 버튼) */
.sms-subtabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.sms-subtabs .btn { padding: 6px 14px; font-size: 13px; }

/* 일자별 통계 chip */
.date-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.date-chip {
  padding: 6px 12px; border: 1px solid var(--border, #ddd); border-radius: 8px; font-size: 13px;
}
.date-chip.active { background: #fff3e0; font-weight: 700; }

/* 이벤트 동작 규칙 안내 + 기간 셀 */
.alert-rule { background: #eef2ff; color: #3730a3; }
.cell-break-date { white-space: normal; font-size: 12px; }

/* SMS/메시지 셀 한 줄 말줄임표 */
.cell-break { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-break-wide { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-break.cell-clip, .cell-break-wide.cell-clip { cursor: help; }

/* 부트스트랩 스타일 툴팁 */
.tt-tip {
  position: fixed; z-index: 1080; display: none; max-width: 320px; padding: 0 0 6px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.tt-tip .tt-inner {
  background: #000; color: #fff; border-radius: 4px; padding: 6px 12px;
  font-size: 12px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; text-align: left;
}
.tt-tip .tt-arrow {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 6px solid #000;
}
.tt-tip.tt-below { padding: 6px 0 0; }
.tt-tip.tt-below .tt-arrow { top: 2px; bottom: auto; border-top: none; border-bottom: 6px solid #000; }


/* 트래픽 원본 로그 */
.traffic-wrap { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; }
.traffic-list {
  flex: 1; min-width: 240px; max-width: 380px; border-right: 1px solid var(--border); padding-right: 12px;
}
.traffic-file {
  display: block; padding: 8px 10px; border-radius: 6px; font-size: 12px;
}
.traffic-file.active { background: #fff3e0; font-weight: 700; }
.traffic-detail { flex: 2; min-width: 280px; }
.traffic-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.traffic-head b { font-size: 14px; }
.traffic-pre {
  background: #2b2b2b; color: #eee; padding: 14px; border-radius: 8px; font-size: 12px;
  overflow-x: auto; max-height: 520px; word-break: break-all; white-space: pre-wrap;
}
.traffic-empty { padding: 20px; text-align: center; color: var(--gray); }

/* 비밀번호 변경 폼 안내 */
.setting-hint-mb { font-size: 12px; color: var(--gray); margin-bottom: 12px; }

/* 테이블 내 썸네일/작은 버튼 */
.table-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.btn-mini { width: auto; padding: 7px 14px; font-size: 13px; }
.btn-mini-inline { width: auto; padding: 7px 14px; font-size: 13px; display: inline-block; }
.btn-danger-mini { width: auto; padding: 7px 14px; font-size: 13px; border-color: #e5e5e5; color: #b91c1c; }
.table-toolbar-right { margin-bottom: 14px; font-size: 13px; color: var(--gray); }

/* 송장일괄 입력 */
.col-130 { width: 130px; padding: 8px; }
.col-150 { width: 150px; padding: 8px; }
.col-200 { width: 200px; padding: 8px; }

/* 송장일괄: 엑셀 업로드 도구 */
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 30px; }
.bulk-actions .btn { width: auto; flex: 1; min-width: 160px; }
.bulk-hint { font-size: 12px; color: var(--gray, #666); line-height: 1.7; margin: 8px 0 0; }
.bulk-result { font-size: 13px; line-height: 1.7; }
.bulk-result .ok { color: var(--green, #1a9e4b); font-weight: 700; }
.bulk-result .warn { color: #b45309; font-weight: 700; }
.bulk-result .err { color: #b91c1c; font-weight: 700; }
tr.bulk-filled td { background: #fff7ed; }
.bulk-file-label { cursor: pointer; }
input.bulk-file-hidden { display: none; }
/* 개발자 > 송장로그 */
.tl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.tl-kpi { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 10px 12px; text-align: center; background: #fff; }
.tl-kpi .num { font-size: 20px; font-weight: 700; }
.tl-kpi .lbl { font-size: 12px; color: var(--gray, #666); margin-top: 2px; }
.tl-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.tl-filters select, .tl-filters input[type="text"] { padding: 9px 10px; border: 1px solid var(--border, #ddd); border-radius: 8px; font-size: 14px; background: #fff; }
.tl-filters select { max-width: 300px; }
.tl-filters input[type="text"] { width: 220px; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tl-chips a { font-size: 12px; padding: 5px 10px; border: 1px solid var(--border, #ddd); border-radius: 999px; color: #374151; text-decoration: none; background: #fff; }
.tl-chips a.active { background: #1f2937; color: #fff; border-color: #1f2937; }
/* 상단 진입 탭(발주관리/통계/개발자) 활성화 버튼: 주황색으로 통일 */
.tl-chips.dev-chips a.active { background: #ff8a00; color: #fff; border-color: #ff8a00; }
.tl-row-active td { background: #fff7ed; }
.tl-actions { white-space: nowrap; }
.tl-actions form { display: inline-block; margin: 0; }
.tl-addr { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.badge-error { background: #fde8e8; color: #d64545; }
.badge-mismatch { background: #ffedd5; color: #c2410c; }




/* 상품 등록/수정 */
.warn-soft { font-size: 12px; color: #b45309; margin-top: 4px; background: #fef3c7; padding: 8px 10px; border-radius: 6px; }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin-bottom: 12px; }
.thumb-item { position: relative; }
.thumb-img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; }
.thumb-meta { margin-top: 4px; }
.remove-btn { width: 100%; padding: 6px; font-size: 12px; border-color: #e5e5e5; color: #b91c1c; }
.thumb-add-row { margin-top: 8px; }

/* 설정 페이지 */
.setting-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.setting-state-on { font-weight: 700; color: var(--green); }
.setting-state-off { font-weight: 700; color: var(--gray); }
.setting-state-warn { color: #b45309; }
.setting-hint { font-size: 12px; color: var(--gray); margin-top: 8px; line-height: 1.6; }
.setting-note { font-size: 12px; color: var(--gray); margin: -4px 0 12px; }
.setting-select {
  padding: 10px 12px; border: 1px solid var(--border, #ddd);
  border-radius: 8px; font-size: 15px; background: #fff;
}
.setting-textarea { font-family: inherit; line-height: 1.7; }
.setting-hint-bot { font-size: 12px; color: var(--gray); margin-bottom: 12px; }
.btn-auto-inline2 { width: auto; padding: 11px 20px; display: inline-block; }

/* SMS 로그 */
.sms-toolbar { display: flex; gap: 8px; margin-bottom: 16px; }
.sms-btn-sm { width: auto; padding: 9px 16px; }
.sms-btn-auto { width: auto; padding: 11px 20px; }
.sms-hint { margin-bottom: 14px; font-size: 13px; color: var(--gray); }
.sms-datebar { margin-bottom: 16px; }
.sms-dates { display: flex; flex-wrap: wrap; gap: 8px; }
.sms-date-btn {
  padding: 6px 12px; border: 1px solid var(--border, #ddd);
  border-radius: 8px; font-size: 13px;
}
.sms-date-btn.active { background: #fff3e0; font-weight: 700; }
.sms-break { max-width: 260px; white-space: normal; word-break: break-all; }
.sms-break-lg { max-width: 320px; white-space: normal; word-break: break-all; }
.sms-split { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; }
.sms-file-col {
  flex: 1; min-width: 240px; max-width: 380px;
  border-right: 1px solid var(--border); padding-right: 12px;
}
.sms-file-item { display: block; padding: 8px 10px; border-radius: 6px; font-size: 12px; }
.sms-file-item.active { background: #fff3e0; font-weight: 700; }
.sms-panel { flex: 2; min-width: 280px; }
.sms-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sms-panel-title { font-size: 14px; }
.sms-panel-sub { font-size: 12px; color: var(--gray); }
.sms-code {
  background: #2b2b2b; color: #eee; padding: 14px; border-radius: 8px; font-size: 12px;
  overflow-x: auto; max-height: 520px; word-break: break-all; white-space: pre-wrap;
}
.sms-empty { padding: 20px; text-align: center; color: var(--gray); }

/* SMS 로그 삭제 바 */
.sms-clear-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sms-clear-all {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 4px 2px;
}
.traffic-file-row { display: flex; gap: 6px; align-items: stretch; margin-bottom: 4px; }
.traffic-file-row .traffic-file { flex: 1; }
.traffic-file-row.active { background: #fff3e0; border-radius: 6px; }
.btn-traffic-del { margin: 4px 4px 4px 0; white-space: nowrap; }

/* 주문번호 링크 (심플 테두리 버튼형 — 대시보드/주문관리 공용) */
.order-id-link {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  color: #444;
  font-size: 12px;
  font-family: Consolas, Menlo, monospace;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.order-id-link:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #fff5f4;
}

/* 배송문자 발송상태 박스 (주문 상세) */
.sms-status-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fafafa;
}
.sms-status-box.is-waiting { background: #fffbeb; border-color: #fcd34d; }
.sms-status-box.is-sent { background: #ecfdf5; border-color: #6ee7b7; }
.sms-status-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sms-status-title { font-weight: 700; font-size: 14px; }
.sms-status-detail { font-size: 12px; color: var(--gray); margin-top: 6px; line-height: 1.6; }
.sms-status-detail b { color: #333; }
.sms-resend-preview {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px dashed #fdba74;
  color: #9a3412;
  font-size: 12px;
  line-height: 1.6;
}
.sms-resend-preview.on { display: block; }
.sms-note-ok {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: var(--green);
  font-size: 12px;
  line-height: 1.55;
}

/* 이벤트 폼 */
.required-star { color: var(--primary); }
.ev-form-spacer { margin-top: 12px; }





.setting-value { font-size: 14px; padding: 8px 12px; background: #f8f9fa; border: 1px solid var(--border); border-radius: 8px; word-break: break-all; }
.mono { font-family: Consolas, Menlo, monospace; }


/* ---------- 주문서: 현금영수증 발급 ---------- */
.cr-toggle-row { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.cr-toggle-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.cr-fields { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #f8f9fa; border: 1px solid var(--border); }
.cr-radio-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; margin-bottom: 6px; }
.cr-radio-row:last-child { margin-bottom: 0; }
.cr-radio-row input[type="radio"] { margin-top: 2px; flex-shrink: 0; }

/* ---------- 주문서: 주문 동의 ---------- */
.agree-card h2 { margin-bottom: 10px; }
.agree-all-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-radius: 10px;
  background: #eef2ff; border: 1px solid #c7d2fe;
  cursor: pointer; margin-bottom: 12px; user-select: none;
}
.agree-all-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.agree-all-label { font-size: 15px; font-weight: 800; color: #3730a3; }
.agree-box { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.agree-item { padding: 8px 0; border-bottom: 1px dashed #e5e7eb; }
.agree-item:last-of-type { border-bottom: none; }
.agree-item label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.agree-item input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.agree-required { font-style: normal; color: var(--primary); font-weight: 700; }
.agree-details { margin-top: 10px; }
.agree-details summary { cursor: pointer; font-size: 12px; color: var(--primary); font-weight: 600; }
.agree-terms {
  margin-top: 10px; padding: 12px 14px; height: 150px; overflow-y: auto;
  background: #f8f9fa; border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; color: #4b5563; line-height: 1.7;
}
.agree-terms h3 { font-size: 14px; margin: 0 0 8px; color: #111827; }
.agree-terms h4 { font-size: 13px; margin: 12px 0 4px; color: #111827; }
.agree-terms p { margin: 4px 0; }
.agree-terms ul { margin: 4px 0 4px 18px; padding: 0; }
.agree-terms li { margin: 2px 0; }