/* =====================================================================
   한올 (Hanall) — UI Components  (Buyer/Seller/Admin 공용)
   tokens.css 의 변수에만 의존. 컴포넌트 모양을 바꾸려면 여기서.
   ===================================================================== */

/* ---------- Status Badge / Pill ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 650; line-height: 1.4;
  white-space: nowrap; border: 1px solid transparent;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-ok       { color: var(--ok-fg);      background: var(--ok-bg);      border-color: var(--ok-border); }
.badge-info     { color: var(--info-fg);    background: var(--info-bg);    border-color: var(--info-border); }
.badge-warn     { color: var(--warn-fg);    background: var(--warn-bg);    border-color: var(--warn-border); }
.badge-danger   { color: var(--danger-fg);  background: var(--danger-bg);  border-color: var(--danger-border); }
.badge-neutral  { color: var(--neutral-fg); background: var(--neutral-bg); border-color: var(--neutral-border); }
.badge-verified { color: var(--verified-fg);background: var(--verified-bg);border-color: var(--verified-border); }
.badge-solid    { color:#fff; border:0; background: var(--primary); }

/* Verified 공장 배지 (초록 체크) */
.verified {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--verified-fg); background: var(--verified-bg);
  border: 1px solid var(--verified-border);
  padding: 3px 9px 3px 7px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700;
}
.verified svg { width: 13px; height: 13px; }

/* ---------- Buttons ---------- */
.btn {
  --bh: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--bh); padding: 0 18px; border-radius: var(--r-md);
  font-family: inherit; font-size: var(--fs-body); font-weight: 650;
  border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: filter .14s ease, background .14s ease, border-color .14s ease, transform .06s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--text-on-primary); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--surface); color: var(--primary-700); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--primary-50); border-color: var(--primary-300); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger { background: var(--danger-solid); color:#fff; }
.btn-block { width: 100%; }
.btn-sm { --bh: 34px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-lg { --bh: 52px; font-size: var(--fs-h3); border-radius: var(--r-lg); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Card ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.card-pad { padding: var(--s-4); }
.card-hd { padding: var(--s-4); border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card-title { font-size: var(--fs-h3); font-weight: 700; margin: 0; }

/* ---------- Filter Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: all .14s ease; white-space: nowrap;
}
.chip:hover { border-color: var(--primary-300); color: var(--text); }
.chip[aria-pressed="true"], .chip.active {
  background: var(--primary-700); border-color: var(--primary-700); color: #fff;
}
.chip .x { font-size: 14px; opacity: .8; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: var(--fs-sm); font-weight: 650; color: var(--text-2); }
.input, .select, .textarea {
  width: 100%; height: 46px; padding: 0 13px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); font-family: inherit; font-size: var(--fs-body); color: var(--text);
  transition: border-color .14s, box-shadow .14s;
}
.textarea { height: auto; padding: 11px 13px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: .5; cursor: not-allowed; background: var(--surface-2); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7689' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 12px center; padding-right: 38px; }

/* ---------- shadcn-style Field anatomy (label · description · error) ----------
   FieldLabel(+required *) → control → FieldDescription | FieldError
   에러는 색상에만 의존하지 않고 아이콘+텍스트로도 전달, aria-invalid(data-invalid) 동기화 */
.rfield-label { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.rfield-label .req-star { color: var(--danger-fg); font-weight: 800; line-height: 1; }
.rfield-optional { font-weight: 500; font-size: 11px; color: var(--text-3); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0 7px; }
.rfield-desc { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-3); text-wrap: pretty; }
.rfield-error { margin: 6px 0 0; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--danger-fg); }
.rfield-error svg { flex: none; }
.rfield[data-invalid="true"] .input,
.rfield[data-invalid="true"] .select,
.rfield[data-invalid="true"] .textarea { border-color: var(--danger-solid); }
.rfield[data-invalid="true"] .input:focus,
.rfield[data-invalid="true"] .select:focus,
.rfield[data-invalid="true"] .textarea:focus { border-color: var(--danger-solid); box-shadow: 0 0 0 3px var(--danger-bg); }

/* ---------- Segmented toggle (보기 전환 등) ---------- */
.seg-toggle { display: inline-flex; background: var(--surface-3); border-radius: var(--r-md); padding: 3px; gap: 3px; flex: none; }
.seg-toggle button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: var(--fs-sm); font-weight: 650; color: var(--text-3); padding: 8px 15px; border-radius: calc(var(--r-md) - 3px); white-space: nowrap; transition: color .16s var(--ease-out), background .16s var(--ease-out); }
.seg-toggle button svg { opacity: .85; }
.seg-toggle button:hover { color: var(--text); }
.seg-toggle button.active { background: var(--surface); color: var(--primary-700); box-shadow: var(--shadow-sm); }

/* ---------- Stepper (가로/세로) ---------- */
.stepper { display: flex; align-items: flex-start; }
.stepper .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; }
.stepper .step::before {
  content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0;
}
.stepper .step:first-child::before { display: none; }
.stepper .step .node {
  width: 24px; height: 24px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--border); display: grid; place-items: center; z-index: 1;
  font-size: 11px; font-weight: 700; color: var(--text-3);
}
.stepper .step .cap { font-size: 10.5px; color: var(--text-3); font-weight: 600; line-height: 1.25; max-width: 64px; }
.stepper .step.done .node { background: var(--ok-solid); border-color: var(--ok-solid); color: #fff; }
.stepper .step.done::before { background: var(--ok-solid); }
.stepper .step.current .node { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-100); }
.stepper .step.current::before { background: var(--ok-solid); }
.stepper .step.current .cap { color: var(--primary-700); font-weight: 700; }

/* ---------- Timeline (통관 단계) ---------- */
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); margin-top: 3px; flex: none; }
.tl-line { width: 2px; flex: 1; background: var(--border); min-height: 18px; }
.tl-item:last-child .tl-line { display: none; }
.tl-item.done .tl-dot { background: var(--ok-solid); border-color: var(--ok-solid); }
.tl-item.done .tl-line { background: var(--ok-solid); }
.tl-item.current .tl-dot { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-100); }
.tl-body { padding-bottom: 16px; }
.tl-title { font-size: var(--fs-sm); font-weight: 650; }
.tl-item.pending .tl-title { color: var(--text-3); }
.tl-meta { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

/* ---------- Price Tier Table ---------- */
.tier-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tier-table th { text-align: left; color: var(--text-3); font-weight: 650; font-size: var(--fs-xs); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tier-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); }
.tier-table tr:last-child td { border-bottom: 0; }
.tier-table tr.active { background: var(--primary-50); }
.tier-table tr.active td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.tier-table .price { font-weight: 750; }

/* ---------- Data Table (Admin) ---------- */
.dt { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dt thead th { position: sticky; top: 0; background: var(--surface-2); text-align: left; color: var(--text-3);
  font-weight: 650; font-size: var(--fs-xs); padding: 11px 14px; border-bottom: 1px solid var(--border); }
.dt tbody td { padding: 13px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.dt tbody tr { cursor: pointer; transition: background .12s; }
.dt tbody tr:hover { background: var(--primary-50); }
.dt tbody tr.flag td { background: var(--danger-bg); }
.dt tbody tr.flag:hover td { background: #fbdcd8; }

/* ---------- KC / 안내 배너 ---------- */
.banner { display: flex; gap: 11px; padding: 13px 14px; border-radius: var(--r-md); border: 1px solid; font-size: var(--fs-sm); line-height: 1.5; }
.banner .ic { flex: none; width: 20px; height: 20px; }
.banner-ok    { background: var(--ok-bg);    border-color: var(--ok-border);    color: var(--ok-fg); }
.banner-warn  { background: var(--warn-bg);  border-color: var(--warn-border);  color: var(--warn-fg); }
.banner-info  { background: var(--info-bg);  border-color: var(--info-border);  color: var(--info-fg); }
.banner-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-fg); }
.banner-neutral { background: var(--neutral-bg); border-color: var(--neutral-border); color: var(--neutral-fg); }
.banner strong { font-weight: 750; }

/* ---------- Bottom Nav (mobile) ---------- */
.bottomnav { display: flex; background: var(--surface); border-top: 1px solid var(--border); }
.bottomnav .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0 6px; color: var(--text-3); font-size: 10px; font-weight: 600; cursor: pointer; background: none; border: 0; }
.bottomnav .nav-item svg { width: 23px; height: 23px; }
.bottomnav .nav-item.active { color: var(--primary-700); }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.muted { color: var(--text-3); }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stack { display: flex; flex-direction: column; }
.skel { background: linear-gradient(90deg, var(--n-100) 25%, var(--n-150) 37%, var(--n-100) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; border-radius: var(--r-sm); }
@keyframes skel { 0%{background-position:100% 0} 100%{background-position:-100% 0} }