/* ============================================================
   components.css · Stage 1 산출물 (ADR-0005, 0013)
   모든 스타일은 Semantic 토큰만 참조한다. hex 직접 사용 금지.
   ============================================================ */

/* ---------- 버튼 ---------- */
.btn{
  appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:14.5px;
  display:inline-flex;align-items:center;gap:8px;
  padding:calc(12px * var(--density)) 22px;border-radius:var(--radius-btn);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-primary{background:var(--primary);color:var(--primary-fg)}
.btn-primary:hover{background:var(--primary-strong)}
.btn-secondary{background:var(--secondary);color:var(--secondary-fg)}
.btn-ghost{background:transparent;color:var(--link);border:1.5px solid var(--line-strong)}
.btn-ghost:hover{background:var(--primary-weak)}
.btn-danger{background:var(--danger);color:#FFFFFF}
.btn[disabled]{background:var(--line);color:var(--text-3);cursor:not-allowed;transform:none}
.btn-sm{font-size:13px;padding:calc(8px * var(--density)) 14px}
.btn-lg{font-size:16px;padding:calc(15px * var(--density)) 28px}
.btn-block{width:100%;justify-content:center}

/* ---------- 뱃지 · 칩 ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:var(--radius-pill);padding:3px 12px;font-size:12.5px;font-weight:700}
.badge .ic{width:13px;height:13px}
.badge.ok{background:var(--success-bg);color:var(--success)}
.badge.bad{background:var(--danger-bg);color:var(--danger)}
.badge.warn{background:var(--warning-bg);color:var(--warning)}
.badge.info{background:var(--primary-weak);color:var(--link)}
.badge.neutral{background:var(--line);color:var(--text-2)}
.chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  border:1.5px solid var(--line-strong);background:var(--surface);color:var(--text-2);
  border-radius:var(--radius-pill);padding:7px 16px;font-size:13.5px;font-weight:600;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- 폼 요소 ---------- */
.field{margin-bottom:var(--sp-4)}
.field > label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.field .req{color:var(--danger);margin-left:2px}
.input, .select{
  width:100%;font:inherit;font-size:15px;color:var(--text);
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-md);
  padding:calc(12px * var(--density)) 14px;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.input:focus-visible, .select:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--primary)}
.input::placeholder{color:var(--text-3)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.input[disabled], .select[disabled]{background:var(--line);color:var(--text-3);cursor:not-allowed}
.help{font-size:12.5px;color:var(--text-3);margin-top:6px}
.err{font-size:12.5px;color:var(--danger);margin-top:6px;font-weight:600}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 49%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 51%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}

.checks{display:flex;gap:18px;flex-wrap:wrap}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;cursor:pointer}
.check input{width:19px;height:19px;accent-color:var(--primary);cursor:pointer}
.check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- 카드 ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:calc(20px * var(--density));box-shadow:var(--shadow-1)}
.card h3{margin:0 0 6px;font-size:15px;font-weight:700}
.card p{margin:0 0 12px;font-size:13.5px;color:var(--text-2)}

/* ============================================================
   테이블 스위트 (Stage 1 확장 · 사용 규정은 01 페이지 C5 참조)
   ============================================================ */
.tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
/* 스크롤 섀도: 잘린 방향에만 그림자를 띄워 "밀 수 있음"을 알린다 (CSS-only, background-attachment 트릭) */
.tbl{
  background:
    linear-gradient(90deg, var(--surface) 32%, transparent) 0 0,
    linear-gradient(270deg, var(--surface) 32%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(10,20,40,.18), transparent) 0 0,
    radial-gradient(farthest-side at 100% 50%, rgba(10,20,40,.18), transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
}
/* 관리형 테이블: 첫 열 고정(S에서도 테이블 유지하는 유형 · 체크 열 또는 키 열) */
.tbl-sticky-first table.data th:first-child,
.tbl-sticky-first table.data td:first-child{position:sticky;left:0;z-index:2;background:var(--surface)}
.tbl-sticky-first table.data thead th:first-child{background:var(--primary-weak);z-index:3}
.tbl-sticky-first table.data tbody tr:hover td:first-child{background:var(--primary-weak)}
.tbl-sticky-first table.data tr[aria-selected="true"] td:first-child{background:var(--primary-weak)}
.tbl-sticky-first table.data tfoot td:first-child{background:var(--bg)}
table.data{border-collapse:collapse;width:100%;font-size:14px;min-width:640px}
table.data caption{text-align:left;padding:14px 16px 0;font-weight:700;font-size:14.5px}
table.data thead th{
  background:var(--primary-weak);color:var(--text);text-align:left;
  font-size:12.5px;letter-spacing:.03em;font-weight:700;
  padding:calc(11px * var(--density)) 14px;border-bottom:1.5px solid var(--line-strong);
  white-space:nowrap;
}
table.data td{padding:calc(12px * var(--density)) 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tbody tr:hover{background:var(--primary-weak)}
table.data tbody tr:last-child td{border-bottom:none}
table.data .num{text-align:right;font-variant-numeric:tabular-nums}
table.data thead th.num{text-align:right}
table.data .plate{font-variant-numeric:tabular-nums;letter-spacing:.05em;font-weight:600}
/* 정렬 헤더: th 안에 button, aria-sort는 th에 */
th.sortable{padding:0}
th.sortable > button{
  appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;font-size:12.5px;letter-spacing:.03em;
  width:100%;text-align:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  padding:calc(11px * var(--density)) 14px;
}
th.sortable > button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
th[aria-sort] > button::after{content:"↓";font-size:11px}
th[aria-sort="ascending"] > button::after{content:"↑"}
th[aria-sort="none"] > button::after{content:"↕";opacity:.4}
/* 선택형(체크박스) */
table.data .col-check{width:44px;text-align:center}
table.data tr[aria-selected="true"]{background:var(--primary-weak)}
table.data tr[aria-selected="true"] td:first-child{box-shadow:inset 3px 0 0 var(--primary)}
/* 합계(tfoot) */
table.data tfoot td{background:var(--bg);font-weight:800;border-top:2px solid var(--line-strong);border-bottom:none;padding:calc(13px * var(--density)) 14px}
/* 선택 툴바 */
.tbl-toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tbl-toolbar .count{font-size:13.5px;color:var(--text-2)}
.tbl-toolbar .count b{color:var(--link)}
.tbl-toolbar .sp{margin-left:auto;display:flex;gap:8px}
/* 마스킹 표기 */
.maskable{position:relative}
/* 모바일 카드 전환: 760px 미만에서 테이블 숨기고 카드 리스트 표시 */
.tbl-cards{display:none}
@media (max-width:599px){
  .tbl-resp table.data{display:none}
  .tbl-resp .tbl-cards{display:grid;gap:10px;padding:14px}
}
.tcard{border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;background:var(--surface)}
.tcard .tc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:700}
.tcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px}
.tcard dt{color:var(--text-3)}
.tcard dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 페이지네이션 ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:4px;padding:14px}
.pager button{
  appearance:none;border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer;
  font:inherit;font-size:13.5px;font-variant-numeric:tabular-nums;min-width:34px;height:34px;border-radius:var(--radius-md);
}
.pager button:hover{background:var(--primary-weak)}
.pager button[aria-current="page"]{background:var(--primary);color:var(--primary-fg);font-weight:700}
.pager button[disabled]{opacity:.35;cursor:not-allowed}
.pager button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* ---------- 상태: 스켈레톤 · 빈 상태 · 오류 ---------- */
.skel{position:relative;overflow:hidden;background:var(--line);border-radius:4px;min-height:14px}
@media (prefers-reduced-motion: no-preference){
  .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    animation:skel 1.4s var(--ease-out) infinite}
  @keyframes skel{100%{transform:translateX(100%)}}
}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px;text-align:center}
.empty .tt{font-weight:700;font-size:15.5px}
.empty .st{font-size:13.5px;color:var(--text-2);max-width:40ch}
.alert{display:flex;gap:10px;align-items:flex-start;border-radius:var(--radius-md);padding:13px 16px;font-size:13.5px}
.alert.err{background:var(--danger-bg);color:var(--danger);font-weight:600}
.alert.warn{background:var(--warning-bg);color:var(--warning);font-weight:600}
.alert.ok{background:var(--success-bg);color:var(--success);font-weight:600}

/* ---------- 캐릭터 슬롯 (시안 B 전용 편성 · A에서는 비노출) ---------- */
.char-slot{width:56px;height:56px;border-radius:50%;background:var(--secondary);color:var(--secondary-fg);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none;overflow:hidden}
.char-slot.lg{width:88px;height:88px;font-size:16px}
/* 공식 캐릭터 이미지(JPG·백색 배경) 플레이트: 다크모드에서도 백색 원형 프레이밍 유지 (ADR-0007) */
.char-slot.photo{background:#FFFFFF;border:1px solid var(--line)}
.char-slot.photo img{width:84%;height:84%;object-fit:contain;display:block}
:root[data-theme="A"] .page-char{display:none}
.sc-AL .page-char, .sc-AD .page-char{display:none}
/* 상태 표지는 1개만: 캐릭터가 노출되는 시안 B에서는 체크 링을 겸직 처리(비노출) */
:root[data-theme="B"] .done .ok-ring{display:none}
.sc-BL .done .ok-ring, .sc-BD .done .ok-ring{display:none}

/* ---------- 아이콘 (24px 그리드 · currentColor) ---------- */
.ic{width:24px;height:24px;flex:none;vertical-align:middle}
.ic-16{width:16px;height:16px}
.svc-slot{
  width:64px;height:64px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-md);
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:10px;color:var(--text-3);text-align:center;padding:4px;
}

/* ==== 크래프트 승격 (ADR-0018 픽 확정) ==================================== */

/* 아이콘 IC-B '열린 루프' · 스프라이트는 sg.js가 전 페이지 주입(#o-*), 규칙: 개구부 1(북동)·1.9px 라운드 */
.icO{width:26px;height:26px;--ol:var(--link)}
.icO.sm{width:20px;height:20px}
.icO.lg{width:40px;height:40px}
.icO.xl{width:56px;height:56px}
.icO.on-dark{--ol:var(--header-fg)}

/* 리스트 크래프트 (CB2 승격 · Linear 행 구조 + Stripe 2단 정보) */
.list-a{list-style:none;margin:0;padding:0}
.list-a li{display:flex;gap:12px;align-items:center;padding:14px 12px;border-radius:8px;cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
.list-a li:hover{background:var(--primary-weak)}
.list-a li + li{border-top:1px solid var(--line)}
.list-a .cat{flex:none;font-size:12px;font-weight:800;border-radius:6px;padding:4px 9px;background:var(--primary-weak);color:var(--link)}
.list-a .tt{font-size:16px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-a .meta{margin-left:auto;flex:none;font-size:13.5px;color:var(--text-3);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}
.list-a .new{font-size:10px;font-weight:800;color:var(--danger)}
.list-b{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.list-b li{display:flex;gap:12px;padding:11px 10px;border-radius:8px;transition:background var(--dur-fast) var(--ease-out)}
.list-b li:hover{background:var(--primary-weak)}
.list-b .tt{font-size:16px;font-weight:700}
.list-b .st{font-size:14px;color:var(--text-3);margin-top:1px}

/* 리치 테이블 (CB3 승격 · Mercury 금액 위계 + Attio 서브라인·그룹 디바이더) */
.rich .tbl{border-radius:14px}
.rich table.data thead th{font-size:11px;letter-spacing:.07em;color:var(--text-3);background:var(--surface);border-bottom:1px solid var(--line-strong);padding-top:14px}
.rich table.data td{padding-top:13px;padding-bottom:13px}
.rich .grp td{background:var(--bg);font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--text-3);padding:7px 14px;border-bottom:1px solid var(--line)}
.rich .rt{font-size:14.5px;font-weight:700}
.rich .rs{font-size:12px;color:var(--text-3);margin-top:2px}
.rich .amt{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.rich .amt small{font-size:11.5px;font-weight:600;color:var(--text-3);margin-left:1px}
.rich tbody tr{transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.rich tbody tr:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-1)}

/* hover lift (CB5 승격 · 카드/타일 공용, 모션 3) */
.lift{transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
@media (prefers-reduced-motion: reduce){.lift, .lift:hover{transform:none;transition:none}}

/* 내비 실측 스케일 규정 (현행 hipass 실측: GNB 20px · 패널 타이틀 30px · 2뎁스 18px) */
.nav-scale{font-size:17px}
.nav-scale-item{font-size:16px}
.nav-scale-desc{font-size:13.5px}

/* ==== GDWEB 픽 승격 (ADR-0020) ==================================== */
/* 키-밸류 미니 표 (한국투자 계보) — 조회 결과·영수증 확인 등 소형 데이터 */
.kv{display:grid;gap:9px}
.kv .row{display:flex;justify-content:space-between;gap:16px;font-size:14.5px}
.kv .k{color:var(--text-3)}
.kv .v{font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
/* 원형 틴트 컨테이너 (9.I 예외: 창구 표지 의미 · 서비스 스트립/전체메뉴 한정) */
.ico-c{flex:none;width:56px;height:56px;border-radius:50%;background:var(--primary-weak);display:flex;align-items:center;justify-content:center}
.ico-c svg{width:26px;height:26px}