/* =========================================================================
   도쿄포스트 공통 테마 (디자인 통일안 v1)
   - 모든 화면이 이 파일 하나로 같은 색·글꼴·버튼·표·배지를 쓴다
   - 부트스트랩 기본값을 덮어쓰므로 기존 화면 마크업을 고치지 않아도 적용된다
   ========================================================================= */

:root {
  --tp-ink: #18212F;
  --tp-ink-2: #4A5463;
  --tp-ink-3: #6B7382;
  --tp-paper: #F5F3EE;
  --tp-card: #FFFFFF;
  --tp-line: #E3DED3;
  --tp-line-2: #EFEBE3;
  --tp-head: #FAF8F4;
  --tp-stamp: #C8412B;
  --tp-stamp-dark: #A33320;
  --tp-stamp-soft: #FBEAE5;
  --tp-sea: #1F5C8C;
  --tp-sea-soft: #E4EEF6;
  --tp-amber: #8A5A00;
  --tp-amber-soft: #FBF0D9;
  --tp-pine: #2F6B4F;
  --tp-pine-soft: #E3F0E8;
  --tp-mute-soft: #ECEAE4;
  --tp-sans: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --tp-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 부트스트랩 토큰 덮어쓰기 */
  --bs-primary: var(--tp-stamp);
  --bs-primary-rgb: 200, 65, 43;
  --bs-primary-text-emphasis: var(--tp-stamp-dark);
  --bs-primary-bg-subtle: var(--tp-stamp-soft);
  --bs-primary-border-subtle: #EFC3B8;
  --bs-danger: var(--tp-stamp);
  --bs-danger-rgb: 200, 65, 43;
  --bs-danger-bg-subtle: var(--tp-stamp-soft);
  --bs-danger-text-emphasis: var(--tp-stamp-dark);
  --bs-success: var(--tp-pine);
  --bs-success-rgb: 47, 107, 79;
  --bs-success-bg-subtle: var(--tp-pine-soft);
  --bs-success-text-emphasis: var(--tp-pine);
  --bs-info: var(--tp-sea);
  --bs-info-rgb: 31, 92, 140;
  --bs-info-bg-subtle: var(--tp-sea-soft);
  --bs-info-text-emphasis: var(--tp-sea);
  --bs-warning: #B07A12;
  --bs-warning-rgb: 176, 122, 18;
  --bs-warning-bg-subtle: var(--tp-amber-soft);
  --bs-warning-text-emphasis: var(--tp-amber);
  --bs-secondary: var(--tp-ink-2);
  --bs-secondary-rgb: 74, 84, 99;
  --bs-secondary-color: var(--tp-ink-2);
  --bs-dark: var(--tp-ink);
  --bs-dark-rgb: 24, 33, 47;
  --bs-light: #F7F5F0;
  --bs-light-rgb: 247, 245, 240;
  --bs-body-font-family: var(--tp-sans);
  --bs-body-color: var(--tp-ink);
  --bs-body-color-rgb: 24, 33, 47;
  --bs-body-bg: var(--tp-paper);
  --bs-body-bg-rgb: 245, 243, 238;
  --bs-tertiary-bg: #F7F5F0;
  --bs-secondary-bg: var(--tp-mute-soft);
  --bs-border-color: var(--tp-line);
  --bs-border-color-translucent: rgba(24, 33, 47, .12);
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 14px;
  --bs-border-radius-xxl: 16px;
  --bs-link-color: var(--tp-stamp-dark);
  --bs-link-color-rgb: 163, 51, 32;
  --bs-link-hover-color: var(--tp-ink);
  --bs-link-hover-color-rgb: 24, 33, 47;
  --bs-emphasis-color: var(--tp-ink);
  --bs-heading-color: var(--tp-ink);
  --bs-focus-ring-color: rgba(24, 33, 47, .25);
}

html { scrollbar-gutter: stable; }
body {
  /* 한글이 단어 중간에서 줄바꿈되지 않게 (긴 이메일·URL은 필요할 때만 끊음) */
  word-break: keep-all;
  overflow-wrap: break-word;
  font-family: var(--tp-sans) !important;
  background-color: var(--tp-paper) !important;
  color: var(--tp-ink);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 글자 ---------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--tp-ink); letter-spacing: -0.02em; font-weight: 700; }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { letter-spacing: -0.03em !important; font-weight: 700 !important; }
.fw-bolder { font-weight: 700 !important; }
.text-muted, .text-secondary { color: var(--tp-ink-2) !important; }
.text-dark { color: var(--tp-ink) !important; }
.text-primary { color: var(--tp-stamp-dark) !important; }
.text-success { color: var(--tp-pine) !important; }
.text-info { color: var(--tp-sea) !important; }
.text-warning { color: var(--tp-amber) !important; }
.text-danger { color: var(--tp-stamp-dark) !important; }
.tp-num, .font-monospace { font-family: var(--tp-mono) !important; font-feature-settings: "tnum"; }
.tp-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-stamp-dark); margin: 0; }

/* ---------- 배경 ---------- */
.bg-light { background-color: #F7F5F0 !important; }
.bg-white { background-color: #FFFFFF !important; }
.bg-primary-subtle, .bg-soft-primary { background-color: var(--tp-stamp-soft) !important; }
.bg-success-subtle, .bg-soft-success { background-color: var(--tp-pine-soft) !important; }
.bg-info-subtle, .bg-soft-info { background-color: var(--tp-sea-soft) !important; }
.bg-warning-subtle, .bg-soft-warning { background-color: var(--tp-amber-soft) !important; }
.bg-danger-subtle, .bg-soft-danger { background-color: var(--tp-stamp-soft) !important; }
.bg-secondary-subtle, .bg-soft-secondary { background-color: var(--tp-mute-soft) !important; }
.bg-gradient { background-image: none !important; }
[style*="linear-gradient"] { background: var(--tp-ink) !important; }

/* ---------- 버튼: 모서리 6px, 높이 44px(기본) ---------- */
.btn {
  --bs-btn-font-family: var(--tp-sans);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 6px;
  --bs-btn-padding-y: .6rem;
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-font-size: .9rem;
  --bs-btn-focus-box-shadow: 0 0 0 3px rgba(24,33,47,.2);
  min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  box-shadow: none !important;
  transform: none !important;
}
.btn.rounded-pill, .btn.rounded-3, .btn.rounded-4, .btn.rounded-5 { border-radius: 6px !important; }
.btn-sm { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .82rem; min-height: 34px; }
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1rem; min-height: 52px; }
.btn-link { min-height: 0; }
.btn-close { min-height: 0; }

.btn-primary, .btn-danger, .btn-shopify {
  --bs-btn-color: #fff; --bs-btn-bg: var(--tp-stamp); --bs-btn-border-color: var(--tp-stamp);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tp-stamp-dark); --bs-btn-hover-border-color: var(--tp-stamp-dark);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tp-stamp-dark); --bs-btn-active-border-color: var(--tp-stamp-dark);
  --bs-btn-disabled-bg: var(--tp-stamp); --bs-btn-disabled-border-color: var(--tp-stamp);
  background-color: var(--bs-btn-bg); color: #fff; border: 1px solid var(--bs-btn-border-color);
}
.btn-shopify:hover { background-color: var(--tp-stamp-dark); color: #fff; }
.btn-dark, .btn-success, .btn-info, .btn-secondary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--tp-ink); --bs-btn-border-color: var(--tp-ink);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0E141D; --bs-btn-hover-border-color: #0E141D;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #0E141D; --bs-btn-active-border-color: #0E141D;
  --bs-btn-disabled-bg: var(--tp-ink); --bs-btn-disabled-border-color: var(--tp-ink);
}
.btn-warning {
  --bs-btn-color: var(--tp-ink); --bs-btn-bg: #F3DDA8; --bs-btn-border-color: #F3DDA8;
  --bs-btn-hover-color: var(--tp-ink); --bs-btn-hover-bg: #EBCD86; --bs-btn-hover-border-color: #EBCD86;
}
.btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-primary, .btn-outline-success,
.btn-outline-info, .btn-outline-warning, .btn-outline-danger {
  --bs-btn-color: var(--tp-ink); --bs-btn-bg: #fff; --bs-btn-border-color: var(--tp-line);
  --bs-btn-hover-color: var(--tp-ink); --bs-btn-hover-bg: #F7F5F0; --bs-btn-hover-border-color: #CFC8BA;
  --bs-btn-active-color: var(--tp-ink); --bs-btn-active-bg: var(--tp-mute-soft); --bs-btn-active-border-color: #CFC8BA;
}
.btn-outline-danger { --bs-btn-color: var(--tp-stamp-dark); --bs-btn-hover-color: var(--tp-stamp-dark); }

/* ---------- 배지: 알약형 유지, 차분한 색 ---------- */
.badge { font-family: var(--tp-sans); font-weight: 600; letter-spacing: 0; border-radius: 999px; padding: .42em .8em; }
.badge.bg-primary, .badge.bg-danger { background-color: var(--tp-stamp-soft) !important; color: var(--tp-stamp-dark) !important; }
.badge.bg-success { background-color: var(--tp-pine-soft) !important; color: var(--tp-pine) !important; }
.badge.bg-info { background-color: var(--tp-sea-soft) !important; color: var(--tp-sea) !important; }
.badge.bg-warning { background-color: var(--tp-amber-soft) !important; color: var(--tp-amber) !important; }
.badge.bg-secondary, .badge.bg-light { background-color: var(--tp-mute-soft) !important; color: var(--tp-ink-2) !important; }
.badge.bg-dark { background-color: var(--tp-ink) !important; color: #fff !important; }

/* 진행 상태 5단계 (components/status-badge) */
.tp-status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 600 12px/1 var(--tp-sans); white-space: nowrap; }
.tp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tp-s-wait { background: var(--tp-mute-soft); color: var(--tp-ink-2); }
.tp-s-action { background: var(--tp-stamp-soft); color: var(--tp-stamp-dark); }
.tp-s-progress { background: var(--tp-amber-soft); color: var(--tp-amber); }
.tp-s-ship { background: var(--tp-sea-soft); color: var(--tp-sea); }
.tp-s-done { background: var(--tp-pine-soft); color: var(--tp-pine); }

/* ---------- 카드·그림자·모서리 ---------- */
.card { --bs-card-border-color: var(--tp-line); --bs-card-border-radius: 10px; --bs-card-inner-border-radius: 9px; --bs-card-cap-bg: #FAF8F4; border: 1px solid var(--tp-line) !important; }
.card.border-0 { border: 1px solid var(--tp-line) !important; }
.card:hover, .transition-hover:hover, .review-card:hover { transform: none !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: 0 1px 2px rgba(24,33,47,.05), 0 4px 14px rgba(24,33,47,.05) !important; }
.modal-content.shadow-lg, .dropdown-menu { box-shadow: 0 24px 64px rgba(24,33,47,.28) !important; }
.rounded-4, .rounded-5 { border-radius: 14px !important; }
.rounded-3 { border-radius: 10px !important; }
[style*="border-radius: 24px"], [style*="border-radius:24px"], [style*="border-radius: 20px"] { border-radius: 14px !important; }

/* ---------- 표 ---------- */
.table { --bs-table-bg: #fff; --bs-table-striped-bg: #FAF8F4; --bs-table-hover-bg: #F7F5F0; --bs-table-border-color: var(--tp-line-2); --bs-table-color: var(--tp-ink); font-size: .9rem; }
.table > thead > tr > th, .table > thead th {
  background: var(--tp-head) !important; color: var(--tp-ink-2) !important;
  font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  border-bottom: 1px solid var(--tp-line) !important; padding-top: .8rem; padding-bottom: .8rem; white-space: nowrap;
}
.table-dark, .table > thead.table-dark, thead.table-dark tr, .table-dark th {
  --bs-table-bg: var(--tp-head) !important; --bs-table-color: var(--tp-ink-3) !important;
  --bs-table-border-color: var(--tp-line) !important; color: var(--tp-ink-3) !important;
}
.table td { vertical-align: middle; border-color: var(--tp-line-2); }

/* ---------- 입력 ---------- */
.form-control, .form-select {
  border: 1px solid var(--tp-line) !important; border-radius: 6px !important;
  min-height: 44px; background-color: #fff !important; color: var(--tp-ink); font-family: var(--tp-sans);
}
textarea.form-control { min-height: 96px; }
.form-control-sm, .form-select-sm { min-height: 36px; }
.form-control:focus, .form-select:focus { border-color: var(--tp-ink) !important; box-shadow: 0 0 0 3px rgba(24,33,47,.12) !important; }
.form-control.bg-light, .form-control.border-0 { border: 1px solid var(--tp-line) !important; }
.form-label { font-weight: 600; font-size: .85rem; color: var(--tp-ink); }
.form-check-input:checked { background-color: var(--tp-ink); border-color: var(--tp-ink); }
.input-group-text { background: #F7F5F0; border-color: var(--tp-line); }

/* ---------- 알림·모달·페이지네이션·탭 ---------- */
.alert { border-radius: 10px; border: 0; font-size: .9rem; }
.alert-success { background: var(--tp-pine-soft); color: var(--tp-pine); }
.alert-danger { background: var(--tp-stamp-soft); color: var(--tp-stamp-dark); }
.alert-warning { background: var(--tp-amber-soft); color: var(--tp-amber); }
.alert-info, .alert-primary { background: var(--tp-sea-soft); color: var(--tp-sea); }
.modal-content { border-radius: 16px !important; border: 0; }
.modal-header.bg-dark, .modal-header.bg-primary, .modal-header.bg-danger { background: var(--tp-ink) !important; color: #fff; }
.page-link { color: var(--tp-ink); border-color: var(--tp-line); }
.page-item.active .page-link { background: var(--tp-ink); border-color: var(--tp-ink); color: #fff; }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { background: var(--tp-ink); color: #fff; }
.list-group-item { border-color: var(--tp-line-2); }
.border-primary { border-color: var(--tp-stamp) !important; }
hr { border-color: var(--tp-line); opacity: 1; }

/* 애니메이션 최소화 */
.animate-fade-in, .animate-fade-in-up, .animate-fade-in-down { animation: none !important; opacity: 1 !important; }

/* ===================== 공통 레이아웃 ===================== */
.tp-nav { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--tp-line); }
.tp-nav-inner { max-width: 1328px; margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
.tp-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--tp-ink); text-decoration: none; white-space: nowrap; }
.tp-logo:hover { color: var(--tp-ink); }
.tp-logo-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--tp-stamp); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-logo-tag { font-weight: 500; font-size: 11px; color: var(--tp-ink-2); border: 1px solid var(--tp-line); border-radius: 4px; padding: 2px 6px; }
.tp-menu { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; }
.tp-link { position: relative; height: 36px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; color: var(--tp-ink-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.tp-link:hover { background: #F2F0EA; color: var(--tp-ink); }
.tp-link.is-on { background: var(--tp-mute-soft); color: var(--tp-ink); font-weight: 600; }
.tp-utils { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tp-stamp); display: inline-block; }
.tp-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--tp-stamp); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.tp-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--tp-ink); align-items: center; justify-content: center; margin-left: auto; }

/* 관리자: 어두운 헤더 */
.tp-nav.is-admin { background: var(--tp-ink); border-bottom-color: var(--tp-ink); }
.tp-nav.is-admin .tp-logo { color: #fff; }
.tp-nav.is-admin .tp-logo-tag { color: #C9CED6; border-color: #4A5463; }
.tp-nav.is-admin .tp-link { color: #C9CED6; }
.tp-nav.is-admin .tp-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.tp-nav.is-admin .tp-link.is-on { background: rgba(255,255,255,.14); color: #fff; }
.tp-nav.is-admin .tp-burger { color: #fff; }

@media (max-width: 1100px) {
  .tp-nav-inner { padding: 0 16px; height: 56px; }
  .tp-burger { display: inline-flex; }
  .tp-collapse { display: none; position: absolute; left: 0; right: 0; top: 56px; background: #fff; border-bottom: 1px solid var(--tp-line); padding: 12px 16px 16px; flex-direction: column; align-items: stretch; gap: 8px; box-shadow: 0 16px 32px rgba(24,33,47,.12); }
  .tp-nav.is-admin .tp-collapse { background: var(--tp-ink); }
  .tp-collapse.is-open { display: flex; }
  .tp-menu { flex-direction: column; align-items: stretch; }
  .tp-link { height: 44px; }
  .tp-utils { margin-left: 0; padding-top: 8px; border-top: 1px solid var(--tp-line); }
}
@media (min-width: 1101px) { .tp-collapse { display: flex; align-items: center; gap: 28px; flex: 1; min-width: 0; } }

.tp-flash { max-width: 1328px; margin: 16px auto 0; padding: 0 24px; }
.tp-footer { margin-top: 64px; background: var(--tp-ink); color: #C9CED6; font-size: 13px; }
.tp-footer-inner { max-width: 1328px; margin: 0 auto; padding: 32px 24px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.tp-footer a { color: #C9CED6; text-decoration: none; }
.tp-footer a:hover { color: #fff; }

/* 설정 탭 (관리자 등급·공지·FAQ) */
.tp-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--tp-line); margin-bottom: 24px; }
.tp-tab { height: 44px; display: flex; align-items: center; color: var(--tp-ink-2); text-decoration: none; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tp-tab:hover { color: var(--tp-ink); }
.tp-tab.is-on { color: var(--tp-ink); font-weight: 600; border-bottom-color: var(--tp-ink); }

/* ===================== 메인 페이지 ===================== */
.tp-wrap { max-width: 1328px; margin: 0 auto; padding: 0 24px; }
.tp-hero { padding: 80px 0 64px; }
.tp-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.tp-display { font-size: clamp(38px, 5vw, 60px); line-height: 1.15; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.tp-lead { font-size: 17px; line-height: 1.7; color: var(--tp-ink-2); max-width: 560px; margin: 0; }
.tp-panel { background: #fff; border: 1px solid var(--tp-line); border-radius: 12px; padding: 28px; box-shadow: 0 1px 2px rgba(24,33,47,.06), 0 12px 32px rgba(24,33,47,.08); }
.tp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.tp-small { font-size: 13px; line-height: 1.5; color: var(--tp-ink-2); margin: 0; }
.tp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tp-card { background: #fff; border: 1px solid var(--tp-line); border-radius: 10px; padding: 24px; }
.tp-icon-box { width: 44px; height: 44px; border-radius: 10px; background: var(--tp-stamp-soft); color: var(--tp-stamp-dark); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.tp-band { background: #fff; border-top: 1px solid var(--tp-line); border-bottom: 1px solid var(--tp-line); padding: 72px 0; }
.tp-step { padding-top: 20px; border-top: 2px solid var(--tp-ink); display: flex; flex-direction: column; gap: 8px; }
.tp-section { padding: 72px 0; }
.tp-h2 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.tp-h3 { font-size: 18px; font-weight: 700; margin: 0; }
@media (max-width: 991px) {
  .tp-hero { padding: 40px 0; }
  .tp-hero-grid, .tp-grid-3, .tp-grid-4 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tp-section, .tp-band { padding: 48px 0; }
}

/* ===================== 기존 화면 정리 (1단계) ===================== */
/* 페이지 제목: 과하게 큰 display 제목을 통일된 크기로 */
main h2.display-6, main h1.display-6, main .display-5, main h2.display-5 { font-size: 28px !important; line-height: 1.3; margin-bottom: 4px !important; }
main .display-4 { font-size: 34px !important; }
main .display-3 { font-size: 40px !important; }
/* 화면마다 따로 칠한 회색 바탕 제거 → 공통 종이색 */
[style*="background-color: #f8f9fa"], [style*="background: #f8f9fa"], [style*="background-color:#f8f9fa"],
[style*="background-color: #f6f6f7"], [style*="background: #f4f6f9"], [style*="background-color: #f4f6f9"] { background-color: transparent !important; background: transparent !important; }
/* 선명한 원색 인라인 배경 버튼/배지 정리 */
.badge[style*="background-color"] { color: #fff; }
/* 페이지 본문 폭 통일 */
main > .container, main > .container-fluid { max-width: 1328px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; padding-top: 32px !important; padding-bottom: 48px !important; }
@media (max-width: 767px) { main > .container-fluid, main > .container { padding-left: 16px; padding-right: 16px; } }
/* 카드 헤더 */
.card-header { background: #FAF8F4 !important; border-bottom: 1px solid var(--tp-line) !important; font-weight: 600; }
.card-header.bg-primary, .card-header.bg-dark, .card-header.bg-success, .card-header.bg-info { background: var(--tp-ink) !important; color: #fff !important; }
/* 아이콘 원형 배경 */
.rounded-circle.bg-primary-subtle, .rounded-circle.bg-danger-subtle { color: var(--tp-stamp-dark) !important; }
/* 링크 */
a { text-underline-offset: 3px; }
/* 모달 트리거 버튼 내 btn-link */
.btn-link { --bs-btn-color: var(--tp-stamp-dark); --bs-btn-hover-color: var(--tp-ink); text-decoration: none; }
.stat-banner { background: var(--tp-ink) !important; border-radius: 12px !important; }
.faq-header { background: #fff !important; border: 1px solid var(--tp-line); border-radius: 12px !important; }
.page-title { color: var(--tp-ink) !important; font-weight: 700 !important; letter-spacing: -.02em !important; }
/* 어두운 배경 위 제목은 흰색 */
.bg-dark:not([class*="bg-opacity"]) :is(h1,h2,h3,h4,h5,h6), .bg-primary:not([class*="bg-opacity"]) :is(h1,h2,h3,h4,h5,h6), .card-header.bg-dark :is(h1,h2,h3,h4,h5,h6),
.text-white :is(h1,h2,h3,h4,h5,h6), [style*="linear-gradient"] :is(h1,h2,h3,h4,h5,h6), .stat-banner :is(h1,h2,h3,h4,h5,h6) { color: #fff !important; }

/* ===================== 2차 정리: 폭·가독성 ===================== */
/* 관리자: 표가 넓으므로 메뉴·본문 모두 화면 전체 폭 사용 (메뉴와 본문 좌우선 일치) */
.tp-nav.is-admin .tp-nav-inner { max-width: none; padding: 0 32px; }
.tp-nav.is-admin ~ main > .container, .tp-nav.is-admin ~ main > .container-fluid, .tp-nav.is-admin ~ main .tp-flash { max-width: none; padding-left: 32px; padding-right: 32px; }
.tp-nav.is-admin ~ .tp-footer .tp-footer-inner { max-width: none; padding-left: 32px; padding-right: 32px; }
/* 표: 칸 안 글자는 줄바꿈 허용 → 가로 스크롤 최소화 (머리글·숫자·배지는 한 줄 유지) */
.table td { white-space: nowrap; }
/* 관리자 표: 글자·여백을 줄여 한 화면에 담기 */
.tp-nav.is-admin ~ main .table { font-size: .82rem; }
.tp-nav.is-admin ~ main .table > :not(caption) > * > * { padding: .55rem .5rem; }
.table-responsive { scrollbar-width: thin; }
/* 흐린 글자·아이콘 가독성 */
.text-light { color: #B9B2A4 !important; }
.table-light, .table-light > th, .table-light > td, thead.table-light th { --bs-table-bg: var(--tp-head) !important; color: var(--tp-ink-2) !important; }
.required-dot { color: var(--tp-stamp-dark) !important; }
.extra-small, .x-small { font-size: 12px !important; }
/* 어두운 카드 안 보조 글자·포인트 색은 밝게 */
:is(.bg-dark:not([class*="bg-opacity"]), .stat-banner, [style*="linear-gradient"], .card.text-white) :is(.text-light-emphasis, .text-muted, .text-secondary) { color: #C9CED6 !important; }
:is(.bg-dark:not([class*="bg-opacity"]), .stat-banner, [style*="linear-gradient"], .card.text-white) .text-warning { color: #F3C969 !important; }
:is(.bg-dark:not([class*="bg-opacity"]), .stat-banner, [style*="linear-gradient"], .card.text-white) :is(.text-primary, .text-danger) { color: #F2A38F !important; }
:is(.bg-dark:not([class*="bg-opacity"]), .stat-banner, [style*="linear-gradient"], .card.text-white) .text-success { color: #9FD4B7 !important; }
.card-header.bg-danger { background: var(--tp-stamp) !important; color: #fff !important; }
/* 페이지 번호 */
.tp-pager { margin-top: 24px; }
.pagination { gap: 4px; --bs-pagination-border-radius: 6px; }
.pagination .page-link { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px !important; border: 1px solid var(--tp-line); background: #fff; color: var(--tp-ink); font-family: var(--tp-mono); font-size: 13px; text-decoration: none; padding: 0 10px; }
.pagination .page-link:hover { background: #F7F5F0; color: var(--tp-ink); }
.pagination .page-item.active .page-link { background: var(--tp-ink); border-color: var(--tp-ink); color: #fff; }
.pagination .page-item.disabled .page-link { color: #B9B2A4; background: #fff; }
nav[role="navigation"] svg { width: 16px !important; height: 16px !important; }
:is(.bg-dark:not([class*="bg-opacity"]), .bg-primary:not([class*="bg-opacity"]), .stat-banner, [style*="linear-gradient"], .card.text-white, .text-white) :is(.h1,.h2,.h3,.h4,.h5,.h6) { color: #fff !important; }
/* 필터 칩 */
.tp-chip { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--tp-line); background: #fff; color: var(--tp-ink-2); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; text-decoration: none; }
.tp-chip:hover { border-color: #CFC8BA; color: var(--tp-ink); }
.tp-chip.is-on { background: var(--tp-ink); border-color: var(--tp-ink); color: #fff; }
/* 문의 목록 */
.tp-inq-item { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border-bottom: 1px solid var(--tp-line-2); color: var(--tp-ink); text-decoration: none; }
.tp-inq-item:last-child { border-bottom: 0; }
.tp-inq-item:hover { background: #FAF8F4; color: var(--tp-ink); }
.tp-inq-item.is-on { background: #F7F5F0; box-shadow: inset 3px 0 0 var(--tp-ink); }
.card-header.bg-transparent { background: transparent !important; border-bottom-color: transparent !important; }
[style*="linear-gradient"] .card-header { color: #fff; }
@media (max-width: 1600px) { .tp-nav.is-admin ~ main .container-fluid { padding-left: 20px; padding-right: 20px; } .tp-nav.is-admin ~ main .table > :not(caption) > * > * { padding: .5rem .35rem; } }
/* 모달: 뒤 화면 스크롤바 자리를 항상 확보해 열고 닫을 때 화면이 좌우로 움직이지 않게 */
html { overflow-y: auto !important; scrollbar-gutter: stable; }
html:has(body.modal-open) { overflow: hidden !important; }
body.modal-open, body[style*="padding-right"] { padding-right: 0 !important; }
body.modal-open { overflow: hidden !important; }
/* 모달에서 다른 모달로 넘어갈 때(회원가입→약관 등) 잠깐 modal-open 이 빠져도 뒤 화면이 스크롤·이동하지 않게 */
html:has(.modal.show) { overflow: hidden !important; }
.modal { padding-left: 0 !important; padding-right: 0 !important; }
.modal { scrollbar-width: thin; }
.input-group-text.bg-warning { color: var(--tp-ink) !important; }
.tp-status:has(> i)::before { display: none; }
/* 송장 조회 링크 */
.tp-track { display: inline-flex; align-items: center; gap: 4px; color: var(--tp-sea); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tp-track:hover { color: var(--tp-ink); text-decoration: underline; }
.tp-track i { font-size: 11px; }
/* 입고 사진: 옵션 회원 대기 / 비회원 안내 */
.tp-photo-wait { border: 1px dashed var(--tp-line); border-radius: 12px; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; }
.tp-photo-wait i { font-size: 28px; color: var(--tp-ink-3); }
.tp-photo-wait span { font-size: 13px; color: var(--tp-ink-2); }
.tp-photo-upsell { border: 1px solid var(--tp-stamp-soft); background: #fff; border-radius: 12px; padding: 20px; }
.dispatch-info-box { background: #FAF8F4 !important; border: 1px solid var(--tp-line-2) !important; }

/* 메인 요금 계산 탭 (세그먼트) */
.tp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #F2EEE7; border-radius: 10px; }
.tp-seg-btn { height: 38px; border: 0; border-radius: 7px; background: transparent; color: var(--tp-ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.tp-seg-btn:hover { color: var(--tp-ink); }
.tp-seg-btn.is-on { background: #fff; color: var(--tp-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(24,33,47,.12); }
.tp-seg-btn:focus-visible { outline: 2px solid var(--tp-stamp); outline-offset: 1px; }
/* 두 탭을 같은 칸에 겹쳐 두어 탭을 바꿔도 박스 높이가 변하지 않게 (왼쪽 문구 흔들림 방지) */
.tp-calc-stack { display: grid; }
.tp-calc-stack > [role="tabpanel"] { grid-area: 1 / 1; }
.tp-calc-stack > .is-off { visibility: hidden; }
/* 입력 예시(placeholder)가 실제 입력값처럼 보이지 않게 연하게 */
.form-control::placeholder, textarea::placeholder, input::placeholder { color: #9A958C; opacity: 1; }
/* 사서함: 다음 자동 출고(왼쪽) + 입고된 우편물(오른쪽) 한 카드 */
.tp-mbox { background: #fff; border: 1px solid var(--tp-line); border-radius: 12px; overflow: hidden; }
.tp-mbox.has-next { display: grid; grid-template-columns: minmax(300px, 4fr) minmax(0, 7fr); }
.tp-next { background: #FAF8F4; border-right: 1px solid var(--tp-line); display: flex; flex-direction: column; }
.tp-next-when { padding: 24px 28px 20px; display: flex; flex-direction: column; gap: 14px; }
.tp-next-date { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--tp-ink); line-height: 1.1; }
.tp-next-date small { font-size: 17px; font-weight: 500; color: var(--tp-ink-3); }
.tp-next-dday { font-size: 13px; font-weight: 600; color: #fff; background: var(--tp-stamp); border-radius: 999px; padding: 3px 10px; }
.tp-next-stats { display: flex; gap: 32px; margin: 0; }
.tp-next-stats dt { font-size: 12px; font-weight: 500; color: var(--tp-ink-3); margin-bottom: 2px; }
.tp-next-stats dd { font-size: 20px; font-weight: 600; color: var(--tp-ink); margin: 0; }
.tp-next-bill { margin: 0 20px 4px; padding: 18px 20px; background: #fff; border: 1px solid var(--tp-line); border-radius: 10px; display: flex; flex-direction: column; }
.tp-next-minus { color: var(--tp-pine); }
.tp-next-total { border-top: 1px solid var(--tp-line); padding-top: 12px; margin-top: 4px; align-items: baseline; }
.tp-next-total > span:first-child { font-size: 14px; font-weight: 600; }
.tp-next-total > span:last-child { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.tp-next-save { margin-top: 10px; align-self: flex-end; font-size: 12px; color: var(--tp-pine); background: var(--tp-pine-soft); border-radius: 999px; padding: 3px 10px; }
.tp-mbox-main { min-width: 0; display: flex; flex-direction: column; }
.tp-mbox-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; padding: 24px 28px 8px; }
.tp-mbox-list { list-style: none; margin: 0; padding: 0 28px 8px; }
.tp-mbox-list > li { display: grid; grid-template-columns: 44px 40px minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--tp-line-2); }
.tp-mbox-list > li:first-child { border-top: 0; }
.tp-mbox-list > li.is-unread .tp-mbox-name b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tp-stamp); margin-left: 6px; vertical-align: middle; }
.tp-mbox-date { font-size: 13px; color: var(--tp-ink-3); }
.tp-mbox-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-mbox-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-mbox-list > li.tp-mbox-empty { display: block; text-align: center; color: var(--tp-ink-3); font-size: 14px; padding: 40px 0; }
.tp-mbox-foot { padding: 4px 28px 20px; margin-top: auto; }
@media (max-width: 991.98px) { .tp-mbox.has-next { grid-template-columns: 1fr; } .tp-next { border-right: 0; border-bottom: 1px solid var(--tp-line); } }
@media (max-width: 575.98px) { .tp-next-when { padding: 20px; } .tp-next-bill { margin: 0 16px 16px; } .tp-mbox-list { padding: 0 20px 8px; } .tp-mbox-head { padding: 18px 20px 6px; } .tp-mbox-list > li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; } .tp-mbox-date { display: none; } .tp-mbox-status { grid-column: 1; } }
.tp-mbox-guide { list-style: none; counter-reset: g; margin: auto 28px 24px; padding: 18px 0 0; border-top: 1px dashed var(--tp-line); display: flex; flex-direction: column; gap: 12px; }
.tp-mbox-guide li { counter-increment: g; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 13px; color: var(--tp-ink-3); line-height: 1.5; }
.tp-mbox-guide li b { color: var(--tp-ink); font-size: 14px; }
.tp-mbox-guide li b::before { content: counter(g); display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: #F2EEE7; color: var(--tp-ink); font-size: 12px; align-items: center; justify-content: center; margin-right: 6px; }
@media (max-width: 575.98px) { .tp-mbox-guide { margin: 8px 20px 20px; } }
.tp-mbox-thumb { width: 40px; height: 40px; border-radius: 8px; background: #F2EEE7; color: var(--tp-ink-3); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 17px; }
.tp-mbox-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tp-mbox-keep { min-width: 76px; text-align: right; white-space: nowrap; }
.tp-mbox-last { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 28px 24px; padding: 14px 16px; border-radius: 10px; background: #FAF8F4; font-size: 14px; }
@media (max-width: 575.98px) { .tp-mbox-list > li { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 6px; } .tp-mbox-list .tp-mbox-date, .tp-mbox-list .tp-mbox-keep { display: none; } .tp-mbox-list .tp-mbox-thumb { grid-column: 1; grid-row: 1 / 3; } .tp-mbox-list .tp-mbox-name { grid-column: 2; grid-row: 1; } .tp-mbox-list .tp-mbox-status { grid-column: 2; grid-row: 2; } .tp-mbox-list > li > .btn { grid-column: 3; grid-row: 1 / 3; } .tp-mbox-last { margin: 8px 20px 0; } }
.tp-mbox-list .tp-track, .tp-mbox-last .tp-track { font-size: 13px; }
.tp-mbox-last + .tp-mbox-guide { margin-top: 0; }