/* 웹폰트(Wanted Sans)는 받지 않는다 — 서브셋 92개 파일을 외부 CDN 에서 끌어오는
   구조라 폐쇄망에서 통째로 깨졌다. 아래 글꼴 스택이 Pretendard → Apple SD Gothic
   Neo → 시스템 폰트로 떨어지므로 한글도 정상으로 나온다. 굳이 담으려면 92개를
   벤더링해야 하는데, 내부 관리도구가 치를 값은 아니다. */
:root{
  --topbar-h:64px; --sidebar-w:248px; --sidebar-w-collapsed:72px;
  /* Apple 토큰 (getdesign.md/apple) */
  --accent:#0066cc; --accent-focus:#0071e3;
  /* 모서리 반경 — 알약(999px)만 예외로 두고 나머지는 전부 이 값이다. */
  --radius:8px;
  --ink:#1d1d1f; --muted:#6e6e73; --muted-soft:#86868b;
  --hairline:#e0e0e0; --divider:#f0f0f0;
  --canvas:#ffffff; --parchment:#f5f5f7; --pearl:#fafafc;
  --error:#d70015; --good:#248a3d;
  --shadow: 0 4px 24px rgba(0,0,0,.10);
  --bs-body-font-family:'Wanted Sans Variable','Wanted Sans',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  /* Bootstrap 재매핑 */
  --bs-primary:#0066cc; --bs-primary-rgb:0,102,204;
  --bs-body-color:#1d1d1f; --bs-body-bg:#f5f5f7; --bs-border-color:#e0e0e0;
  --bs-border-radius:8px; --bs-border-radius-sm:6px; --bs-border-radius-lg:8px;
  --bs-link-color:#0066cc; --bs-link-hover-color:#0066cc;
}
body{ background:var(--parchment); color:var(--ink); font-family:var(--bs-body-font-family);
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.font-monospace,.mono{ font-family:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:0; }
.tabular-nums,.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.tabular-nums{ color:var(--ink); }
h1,h2,h3,h4,h5,h6,.h4{ letter-spacing:-.021em; }
.text-primary{ color:var(--accent)!important; } .text-muted{ color:var(--muted)!important; }
a{ color:var(--accent); text-decoration:none; } a:hover{ color:var(--accent); text-decoration:underline; }

/* sidebar (Apple 라이트) */
.sidebar{ width:var(--sidebar-w); min-height:100vh; background:var(--canvas); color:var(--ink);
  position:fixed; top:0; left:0; z-index:1050; border-right:1px solid var(--hairline);
  transition:width .15s ease, transform .2s ease; overflow-x:hidden;
  display:flex; flex-direction:column; }
/* 연동 가이드 — 사이드바 하단 고정 버튼(새창). margin-top:auto 로 바닥에 붙는다. */
.sidebar-foot{ margin-top:auto; padding:.7rem .8rem 1rem; border-top:1px solid var(--divider); }
.docs-btn{ display:flex; align-items:center; gap:.55rem; width:100%; padding:.6rem .75rem;
  border:1px solid #111; border-radius:var(--radius); background:#111; color:#fff;
  font-size:.88rem; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background .12s, border-color .12s, color .12s; }
.docs-btn:hover{ background:#000; border-color:#000; color:#fff; }
.docs-btn,.docs-btn:hover{ color:#fff; }
.docs-btn .lead-ic{ font-size:1.05rem; flex-shrink:0; color:#fff; }
.docs-btn .ext-ic{ margin-left:auto; font-size:.8rem; opacity:.7; flex-shrink:0; color:#fff; }
html.sidebar-collapsed .docs-btn{ justify-content:center; padding:.6rem; }
html.sidebar-collapsed .docs-btn .nav-label,
html.sidebar-collapsed .docs-btn .ext-ic{ display:none; }
.sidebar-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.8rem .8rem .8rem 1.5rem; border-bottom:1px solid var(--divider); }
.sidebar-brand{ font-size:1.05rem; font-weight:600; color:var(--ink); text-decoration:none;
  white-space:nowrap; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.sidebar-brand span{ color:var(--accent); }
.sidebar-brand .brand-short{ display:none; }
.sidebar-toggle{ flex-shrink:0; width:34px; height:34px; display:grid; place-items:center;
  border:none; background:transparent; color:var(--muted); border-radius:var(--radius); font-size:1.2rem; cursor:pointer;
  transition:background .12s, color .12s; }
.sidebar-toggle:hover{ background:var(--parchment); color:var(--ink); }
.sidebar-nav .nav-link{ color:var(--muted); padding:.55rem .8rem; margin:.12rem .7rem; font-size:.9rem; font-weight:500;
  border-radius:var(--radius); white-space:nowrap; display:flex; align-items:center; cursor:pointer; transition:background .12s, color .12s; }
.sidebar-nav .nav-link:hover{ color:var(--ink); background:var(--parchment); }
.sidebar-nav .nav-link.active{ color:var(--accent); background:#eaf3fd; font-weight:600; }
.sidebar-nav .nav-link i{ margin-right:.65rem; width:18px; flex-shrink:0; font-size:1.05rem; }
.sidebar-section{ font-size:.68rem; font-weight:600; letter-spacing:.02em; color:var(--muted-soft);
  padding:.9rem 1.5rem .3rem; text-transform:uppercase; white-space:nowrap; }
.main-content{ margin-left:var(--sidebar-w); transition:margin-left .15s ease; }
html.sidebar-collapsed .sidebar{ width:var(--sidebar-w-collapsed); }
html.sidebar-collapsed .main-content{ margin-left:var(--sidebar-w-collapsed); }
html.sidebar-collapsed .sidebar-section,html.sidebar-collapsed .nav-link .nav-label,html.sidebar-collapsed .sidebar-brand .brand-full{ display:none; }
html.sidebar-collapsed .sidebar-head{ justify-content:center; padding-left:.8rem; padding-right:.8rem; }
html.sidebar-collapsed .sidebar-brand{ display:none; }
html.sidebar-collapsed .sidebar-nav .nav-link i{ margin-right:0; }
html.sidebar-collapsed .sidebar-nav .nav-link{ justify-content:center; padding:.5rem; }
.sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040; }
@media (max-width:991.98px){
  .sidebar{ transform:translateX(-100%); width:var(--sidebar-w); }
  html.sidebar-open .sidebar{ transform:translateX(0); }
  html.sidebar-open .sidebar-backdrop{ display:block; }
  .main-content{ margin-left:0; }
  html.sidebar-collapsed .sidebar{ width:var(--sidebar-w); }
  html.sidebar-collapsed .sidebar-section,html.sidebar-collapsed .nav-link .nav-label,html.sidebar-collapsed .sidebar-brand .brand-full{ display:block; }
  html.sidebar-collapsed .sidebar-brand{ display:block; }
  html.sidebar-collapsed .sidebar-head{ justify-content:space-between; }
  html.sidebar-collapsed .sidebar-nav .nav-link{ justify-content:flex-start; padding:.55rem .8rem; }
  html.sidebar-collapsed .sidebar-nav .nav-link i{ margin-right:.65rem; }
  /* 모바일에선 접힘 상태여도 사이드바를 펼쳐 보여주므로 하단 버튼도 라벨 복원 */
  html.sidebar-collapsed .docs-btn{ justify-content:flex-start; padding:.6rem .75rem; }
  html.sidebar-collapsed .docs-btn .nav-label{ display:block; }
  html.sidebar-collapsed .docs-btn .ext-ic{ display:inline; }
}
/* topbar (Apple 프로스티드) */
.topbar{ position:sticky; top:0; z-index:50; height:var(--topbar-h);
  background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--divider); padding:0 1.25rem; display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
/* 브레드크럼 — 모든 항목 동일 폰트(크기·굵기·자간) 통일, 색으로만 현재/상위 구분 */
.topbar-crumb{ display:flex; align-items:center; gap:.4rem; min-width:0; }
.topbar-crumb #topbarBack{ display:inline-flex; align-items:center; gap:.4rem; flex-shrink:0; }
.crumb-link,.crumb-sep,#pageTitle{ font-size:.875rem; font-weight:600; letter-spacing:-.01em; }
.crumb-link{ color:var(--muted)!important; text-decoration:none; white-space:nowrap; }
.crumb-link:hover{ color:var(--ink)!important; text-decoration:none; }
.crumb-sep{ color:var(--muted-soft); font-weight:400; }
#pageTitle{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.content-body{ padding:2rem; }
@media (max-width:575.98px){ .content-body{ padding:1.1rem; } .topbar{ padding:0 .9rem; } }

/* cards (Apple: 흰 카드, 라운드 18, 헤어라인, 그림자 없음) */
.card{ border:1px solid var(--hairline); box-shadow:none; border-radius:var(--radius); background:var(--canvas); overflow:hidden; }
.card .card-header{ background:var(--canvas)!important; border-bottom:1px solid var(--divider); font-weight:600; color:var(--ink); border-radius:var(--radius) var(--radius) 0 0; padding-top:1rem; padding-bottom:1rem; }
.badge{ border-radius:999px; font-weight:600; font-size:.72rem; padding:.32rem .64rem; letter-spacing:-.01em; }
.badge-live{ background:#e3f6e9; color:var(--good); }
.badge-test{ background:var(--parchment); color:var(--muted); }
.badge-active{ background:#eaf3fd; color:var(--accent); }
.badge-suspended{ background:#fdecec; color:var(--error); }
.badge-typetest{ background:#48484a; color:#fff; }      /* 타입 test(개발) */
.badge-operator{ background:#fde6cf; color:#9a5b00; }   /* 결제모드 operator */
.badge-none{ background:var(--parchment); color:var(--muted); }  /* 결제모드 none */
/* 링크형 텍스트(파트너 등) */
.keylink{ color:var(--accent); cursor:pointer; word-break:break-all; font-family:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.82rem; }
.keylink:hover{ text-decoration:underline; }
/* API 키 목록의 키 값 + 우측 복사 아이콘 */
.keycell{ display:inline-flex; align-items:center; gap:.5rem; max-width:100%; }
.keytext{ color:var(--ink); font-family:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem; word-break:break-all;
  background:var(--parchment); border:1px solid var(--hairline); border-radius:6px; padding:.15rem .45rem; }
.keycopy{ border:0; background:transparent; color:var(--muted-soft); cursor:pointer; padding:0; line-height:1; flex-shrink:0; }
.keycopy:hover{ color:var(--accent); }
/* 선택형 칩(세그먼트) */
.chipset{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{ border:1px solid var(--hairline); background:var(--canvas); color:var(--ink); border-radius:999px;
  padding:.35rem .85rem; font-size:.85rem; line-height:1.2; cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
.chip:hover{ border-color:#c9c9cf; }
.chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.chip:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,102,204,.2); }
.btn-xs{ font-size:.72rem; padding:.3rem .7rem; border-radius:var(--radius); }
tr[data-href],tr[data-id]{ cursor:pointer; }
.stat-icon{ width:48px;height:48px;border-radius:var(--radius);display:grid;place-items:center;font-size:1.35rem; background:var(--parchment); }

/* key rows */
.keyval{ font-size:.8rem; word-break:break-all; background:var(--parchment); border:1px solid var(--hairline); border-radius:var(--radius); padding:.5rem .7rem; }
.tagk{ font-size:.68rem; font-weight:600; padding:.2rem .62rem; border-radius:999px; white-space:nowrap; }
.tagk.dev{ background:var(--parchment); color:var(--muted); } .tagk.prod{ background:#eaf3fd; color:var(--accent); }

/* login */
.login-screen{ min-height:100vh; display:grid; place-items:center; padding:1rem; background:var(--parchment); }
.login-card{ width:100%; max-width:400px; border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow); }

/* toast */
.kc-toast{ position:fixed; top:20px; left:50%; max-width:360px; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:var(--radius); font-size:13.5px; box-shadow:var(--shadow);
  opacity:0; transform:translate(-50%,-8px); transition:.2s; z-index:2000; }
.kc-toast.show{ opacity:1; transform:translate(-50%,0); } .kc-toast.err{ background:var(--error); }

/* Apple 컴포넌트 리스킨 */
.btn{ border-radius:var(--radius); font-weight:500; letter-spacing:-.01em; }
.btn-group-sm>.btn,.btn-sm{ --bs-btn-padding-y:0.5rem; --bs-btn-padding-x:0.90rem; }
.btn-primary{ --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent); --bs-btn-hover-bg:var(--accent-focus);
  --bs-btn-hover-border-color:var(--accent-focus); --bs-btn-active-bg:var(--accent-focus); --bs-btn-active-border-color:var(--accent-focus);
  --bs-btn-disabled-bg:#9ac2e8; --bs-btn-disabled-border-color:#9ac2e8; }
.btn-outline-primary{ --bs-btn-color:var(--accent); --bs-btn-border-color:var(--accent); --bs-btn-hover-bg:var(--accent);
  --bs-btn-hover-border-color:var(--accent); --bs-btn-active-bg:var(--accent); --bs-btn-active-border-color:var(--accent); }
.btn-outline-secondary{ --bs-btn-color:var(--ink); --bs-btn-border-color:var(--hairline); --bs-btn-hover-bg:var(--parchment);
  --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:#c9c9cf; --bs-btn-active-bg:var(--divider); --bs-btn-active-color:var(--ink); }
.btn-outline-danger{ --bs-btn-color:var(--error); --bs-btn-border-color:#e6c9c9; --bs-btn-hover-bg:var(--error); --bs-btn-hover-border-color:var(--error); }
.form-control,.form-select{ border-radius:var(--radius); border-color:var(--hairline); color:var(--ink); background-color:var(--canvas); font-size:.9rem; font-family:var(--bs-body-font-family); }
.form-control:not(.form-control-sm){ padding:.55rem .75rem; }
.form-select:not(.form-select-sm){ padding:.55rem 2.25rem .55rem .75rem; }  /* 우측 여백은 드롭다운 화살표 자리 */
/* 한 줄에 눕히는 컨트롤 묶음 — 셀렉트·인풋·버튼의 높이를 맞춘다.
   ⚠️ 이 콘솔은 `.btn-sm` 의 padding-y 를 0.5rem 으로 키워 뒀는데(위 .btn-sm),
   `.form-*-sm` 은 부트스트랩 기본(0.25rem)이라 **입력칸이 버튼보다 7px 낮았다.**
   전역으로 고치면 표 안의 작은 입력칸(요금 밴드·다국어)까지 두꺼워지므로,
   나란히 놓는 줄에만 `ctl-row` 를 걸어 맞춘다. */
.ctl-row .form-control-sm,.ctl-row .form-select-sm{
  padding-top:.5rem; padding-bottom:.5rem; font-size:.875rem; line-height:1.5; }
.ctl-row .form-control-sm{ padding-left:.75rem; padding-right:.75rem; }
.ctl-row .form-select-sm{ padding-left:.75rem; padding-right:2rem; }

.form-control:focus,.form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,102,204,.15); }
.form-control::placeholder{ color:var(--muted-soft); }
/* 입력폼 하단 안내 문구(상세·모달 공통) — 더 작게 */
.form-text,.form-text.small{ font-size:.72rem; }
/* 입력/수정 불가(비활성·읽기전용) 필드만 회색 — 나머지 편집 가능 필드는 흰색 */
.form-control:disabled,.form-control[readonly],.form-select:disabled{ background-color:var(--parchment); color:var(--muted); }
/* 비활성/읽기전용 필드: 폼 우측 안쪽에 자물쇠 아이콘(편집 불가 표시) */
.form-control:disabled:not([type=file]),.form-control[readonly]:not([type=file]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%236e6e73'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:14px 14px; padding-right:2.1rem; }
.form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }
.form-check-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,102,204,.15); }
/* Apple 스타일 토글 스위치 (iOS: 회색→그린, 흰 노브) */
.form-switch{ display:flex; align-items:center; gap:.55rem; padding-left:0; min-height:auto; margin:0; }
.form-switch .form-check-input{ flex-shrink:0; float:none; margin:0; width:44px; height:26px; border-radius:26px;
  background-color:#e5e5ea; border-color:#e5e5ea; background-size:22px 22px; background-position:left center; box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23fff'/%3E%3C/svg%3E");
  transition:background-color .2s ease, background-position .2s ease; cursor:pointer; }
.form-switch .form-check-input:checked{ background-color:#34c759; border-color:#34c759; background-position:right center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23fff'/%3E%3C/svg%3E"); }
.form-switch .form-check-input:focus{ border-color:#e5e5ea; box-shadow:0 0 0 3px rgba(52,199,89,.25);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23fff'/%3E%3C/svg%3E"); }
.form-switch .form-check-input:checked:focus{ border-color:#34c759; }
.form-switch .form-check-label{ margin:0; user-select:none; cursor:pointer; }
.table{ --bs-table-bg:#ffffff; --bs-table-color:var(--ink); margin-bottom:0; background:#ffffff; }
/* 전역 공통: 셀 내부 패딩(table-sm 포함) */
.table>:not(caption)>*>*{ padding:.7rem 1rem; border-bottom-color:var(--divider); }
thead.table-light th,.table-light th{ background:#ffffff; color:var(--muted); font-weight:600; border-bottom:1px solid var(--hairline); text-transform:none; letter-spacing:-.01em; }
.table-hover>tbody>tr:hover>*{ background:var(--parchment); }
.table>tbody>tr:last-child>*{ border-bottom:0; }
.pg-footer{ border-top:1px solid var(--divider); }
.modal-content{ border:none; border-radius:var(--radius); box-shadow:var(--shadow); background:var(--canvas); }
.modal-header,.modal-footer{ border-color:var(--divider); }
.dropdown-menu{ border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow); }
.alert{ border-radius:var(--radius); border-color:var(--hairline); }
.alert-light{ background:var(--parchment); }
pre.keyval{ white-space:pre-wrap; }

/* ── 공휴일 달력 ─────────────────────────────────────────────
   연휴가 며칠 이어지는지, 대체공휴일이 빠지지 않았는지를 눈으로 잡기 위한 화면.
   금·토·일(hd-we)은 규정상 이미 주말 요율이라 옅게만 표시하고, 등록된 공휴일
   (hd-holi)은 포인트 컬러로 확실히 구분한다. */
.hd-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.hd-head{ margin-bottom:6px; }
.hd-dow{ text-align:center; font-size:.78rem; font-weight:600; color:var(--muted); padding:.2rem 0; }
.hd-cell{ min-height:74px; border:1px solid var(--hairline); border-radius:var(--radius); padding:.4rem .5rem;
  background:#fff; cursor:pointer; transition:border-color .15s ease, background .15s ease; overflow:hidden; }
.hd-cell:hover{ border-color:var(--accent); background:var(--parchment); }
.hd-cell:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,102,204,.15); }
.hd-blank{ border:none; background:transparent; cursor:default; }
.hd-blank:hover{ border:none; background:transparent; }
.hd-num{ font-size:.85rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.hd-name{ margin-top:.2rem; font-size:.72rem; line-height:1.25; color:var(--accent);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.hd-we{ background:var(--parchment); }
.hd-holi{ background:#eaf3fd; border-color:rgba(0,102,204,.35); }
.hd-holi .hd-num{ color:var(--accent); }
/* 자동 등록분 — 관보와 대조하지 않은 값이라 점선으로 구분한다. */
.hd-auto{ border-style:dashed; }
.hd-dot-auto{ background:#eaf3fd; border-color:rgba(0,102,204,.35); border-style:dashed; }
.hd-today{ box-shadow:inset 0 0 0 2px rgba(0,102,204,.35); }
.hd-dot{ display:inline-block; width:.7rem; height:.7rem; border-radius:3px; vertical-align:-1px;
  margin-right:.25rem; border:1px solid var(--hairline); }
.hd-dot-holi{ background:#eaf3fd; border-color:rgba(0,102,204,.35); }
.hd-dot-we{ background:var(--parchment); }
@media (max-width:575.98px){
  .hd-cell{ min-height:56px; padding:.3rem .35rem; }
  .hd-name{ -webkit-line-clamp:1; font-size:.66rem; }
}

/* 전역 공통: 숫자 입력란도 일반 인풋으로 — 스피너(위아래 화살표)를 쓰지 않는다.
   type="text" + inputmode 로 바꿨지만, 남아 있는 type="number" 도 함께 정리한다. */
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ── 남은 세션 시간 (topbar) ────────────────────────────────────────────
   조작하는 동안에는 자동으로 연장되므로 평소에는 조용히 있어야 한다 —
   5분 아래로 떨어질 때만 눈에 띄게 한다(자리를 비웠다가 돌아온 사람용). */
.session-left{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.session-left.is-warn{ color:var(--bs-danger,#dc3545)!important; font-weight:600; }

/* ── 상세 화면의 항목 행 ────────────────────────────────────────────────
   섹션(card-body)의 **마지막 행은 아래 선을 긋지 않는다.** 카드 테두리와
   겹쳐 두 줄로 보이고, 섹션이 끝난 자리에 선이 하나 떠 있게 된다.
   조건부로 빠지는 행이 있어 마지막이 그때그때 달라지므로 :last-child 로 둔다. */
.kv-row:last-child{ border-bottom:0!important; }

/* ── API 키 상세의 설정 그리드 ──────────────────────────────────────────
   칸마다 도움말 길이가 달라 높이가 제각각이다. 위쪽을 기준으로 맞춰야
   입력칸의 윗선이 한 줄로 보인다(아래 정렬이면 라벨이 어긋난다). */
.kd-grid{ align-items:flex-start; }
.kd-grid .form-text{ min-height:0; }

/* ── 키 생성 마법사 단계 표시 ───────────────────────────────────────────
   지금 어디인지, 몇 단계가 남았는지 보이지 않으면 중간에 그만두게 된다.
   ①을 마치면 키가 이미 발급되므로 되돌릴 수 없다는 점도 시각적으로 구분한다. */
.kc-steps{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.kc-step{ display:flex; align-items:center; gap:.45rem; padding:.35rem .75rem;
  border:1px solid var(--divider); border-radius:999px; color:var(--muted);
  font-size:.85rem; white-space:nowrap; }
.kc-step .kc-num{ width:1.35rem; height:1.35rem; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:.75rem; font-weight:700;
  background:var(--canvas); color:var(--muted); }
.kc-step.is-active{ border-color:var(--bs-primary,#0d6efd); color:var(--ink); font-weight:600; }
.kc-step.is-active .kc-num{ background:var(--bs-primary,#0d6efd); color:#fff; }
.kc-step.is-done{ color:var(--ink); }
/* 끝난 단계는 숫자 대신 체크. 숫자는 텍스트 노드라 자식 선택자로는 못 감추므로
   글자 크기를 0 으로 죽이고 ::after 로 다시 그린다. */
.kc-step.is-done .kc-num{ background:#198754; color:#fff; font-size:0; }
.kc-step.is-done .kc-num::after{ content:"✓"; font-size:.8rem; }
@media (max-width:575px){ .kc-step .kc-lbl{ display:none; } }

/* ── 순위 드래그 정렬 (계정·카드) ─────────────────────────────────────
   끌 수 있다는 것이 보여야 끌어 본다 — 손잡이에 커서를 주고, 끄는 동안
   원래 행을 흐리게 해서 어디로 가는지 눈으로 따라갈 수 있게 한다. */
.drag-h{ cursor:grab; user-select:none; letter-spacing:-1px; }
tr[data-row]{ cursor:default; }
tr[data-row].dragging{ opacity:.45; background:var(--parchment); }
@media (prefers-reduced-motion:no-preference){
  tr[data-row]{ transition:background-color .12s ease; }
}