/* 로이클럽 디자인 토큰 — 핸드오프(docs/design/2026-07-23-royclub-redesign-handoff) 기준.
   Tabler(BS5) CSS 변수 오버라이드 포함. 프라이머 블루(#2d47a8) 사용 금지. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --brand: #34405b;
  --brand-hover: #2a3449;
  --brand-active: #212a3c;
  --brand-tint: #e9ebf0;
  --brand-tint-2: #ccd1de;

  --bg-app: #f6f8fb;
  --bg-surface: #ffffff;
  --neutral-50: #f6f8fb;  --neutral-100: #eef1f6; --neutral-200: #dde3ed;
  --neutral-300: #c4cbd9; --neutral-400: #9aa3b5; --neutral-500: #6b7487;
  --fg-1: #10141e; --fg-2: #333a4a; --fg-3: #6b7487; --fg-4: #9aa3b5;
  --border-subtle: #dde3ed;
  --border-default: #c4cbd9;

  --success: #067647; --success-tint: #ecfdf3;
  --warning: #b5730a; --warning-tint: #fff7e6;
  --danger:  #b42318; --danger-tint:  #fef3f2;

  --font-sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --shadow-sm: 0 1px 3px rgba(16,20,30,.06), 0 1px 2px rgba(16,20,30,.04);
  --shadow-lg: 0 12px 32px rgba(16,20,30,.12), 0 4px 8px rgba(16,20,30,.06);
  --focus-ring: 0 0 0 0.25rem rgba(52,64,91,.20);

  /* ---- Tabler/BS5 변수 매핑 ---- */
  --tblr-primary: #34405b;
  --tblr-primary-rgb: 52, 64, 91;
  --tblr-link-color: #34405b;
  --tblr-link-hover-color: #2a3449;
  --tblr-body-bg: #f6f8fb;
  --tblr-body-color: #333a4a;
  --tblr-body-font-family: var(--font-sans);
  --tblr-font-sans-serif: var(--font-sans);
  --tblr-border-color: #dde3ed;
  --tblr-success: #067647;
  --tblr-warning: #b5730a;
  --tblr-danger: #b42318;
}

body { font-family: var(--font-sans); font-size: 14px; background: var(--bg-app); color: var(--fg-2); }

/* Tabler 기본 링크 hover 밑줄 제거 */
a:hover { text-decoration: none; }

/* 플래시 — 두 레이아웃에서 공통 사용하며 본문이 비치지 않는 완전 불투명 배경을 쓴다. */
.flash-message {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1080;
  min-width: 280px;
  max-width: min(400px, calc(100vw - 32px));
  margin: 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 11px;
  background-image: none;
  box-shadow: var(--shadow-lg);
  opacity: 1;
}
.flash-message.alert-success {
  color: var(--success);
  background-color: var(--success-tint);
  border-color: #a6f4c5;
}
.flash-message.alert-danger {
  color: var(--danger);
  background-color: var(--danger-tint);
  border-color: #fecdca;
}
.flash-message.alert-warning {
  color: #934f00;
  background-color: var(--warning-tint);
  border-color: #fedf89;
}
.flash-message.alert-info {
  color: var(--brand);
  background-color: var(--neutral-100);
  border-color: var(--brand-tint-2);
}
.flash-message .btn-close { opacity: .65; }
.flash-message .btn-close:hover, .flash-message .btn-close:focus { opacity: 1; }

/* 카드 — radius 13px + shadow-sm (핸드오프 컴포넌트 스펙) */
.card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 13px; box-shadow: var(--shadow-sm); }
.card-header { padding: 15px 20px; border-bottom: 1px solid var(--border-subtle); }

/* 표 — 대문자 라벨 헤더, hover 하이라이트 */
.table thead th { padding: 11px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--fg-3); }
.table tbody td { padding: 11px 16px; border-top: 1px solid var(--border-subtle); color: var(--fg-2); font-size: 13.5px; }
.table tbody tr:hover { background: var(--neutral-50); }

/* 뱃지(pill) */
.badge { font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.badge-brand   { background: var(--brand-tint);   color: var(--brand); }
.badge-success { background: var(--success-tint); color: var(--success); }
.badge-warning { background: var(--warning-tint); color: var(--warning); }
.badge-danger  { background: var(--danger-tint);  color: var(--danger); }

/* 버튼 */
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-primary:active { background: var(--brand-active); border-color: var(--brand-active); }

/* 폼 필드 */
.form-control, .form-select { border: 1px solid var(--border-default); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(52,64,91,.14); }
.form-control[readonly] { background: var(--neutral-50); }

/* 숫자·연락처·금액 */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media (max-width: 575px) {
  .flash-message {
    top: 12px;
    right: 12px;
    left: 12px;
    min-width: 0;
    max-width: none;
  }
}