/* 20261023-alalshow-sf5-ui-kit — 공용 부품 CSS (K1~K18) + 공용 틀(위쪽 바·위쪽 메뉴·작업 줄·서랍).
   20261026-alalshow-sf5-viewfinder-tone — 뷰트랩 영상 분석기(viewfinder) 톤: 기본 부품(버튼·입력칸·칸·표·꼬리표·알림)과 공용 틀을 이 파일이 맡는다
   (옛 app.css 맨 위 .btn·.card·위쪽 바·사이드바 규칙을 여기로 옮겼다). 값은 모두 tokens.css의 디자인 값.
   이 파일 뒤에 app.css(화면 구역)를 읽으므로 화면 CSS가 같은 선택자로 덮을 수 있다. 폭 기준은 640px · 1024px 두 가지만
   (데스크톱 1024px 이상이 기본 규칙, 1024px 아래 서랍·휴대폰은 @media (max-width: 1023.98px) · (max-width: 640px)). */

/* ---------- 바탕 · 글꼴 (분석기: Noto Sans KR 400 14px · 글자 #404040 · 바탕 #F8F8F8) ---------- */
body { font-family: var(--font-body); font-size: var(--text-md); color: var(--text); background: var(--ground); }
button, input, select, textarea { font-family: inherit; }

/* ---------- 색조 (data-tone 하나로 배경·글자·테두리) ---------- */
:is(.msg, .remaining, .kit-badge, .kit-job, .empty) { --t-bg: var(--muted-bg); --t-ink: var(--muted-ink); --t-line: var(--muted-line); --t-text: var(--text-muted); }
:is(.msg, .remaining, .kit-badge, .kit-job)[data-tone="info"] { --t-bg: var(--info-bg); --t-ink: var(--info-ink); --t-line: var(--info-line); --t-text: var(--info-ink); }
:is(.msg, .remaining, .kit-badge, .kit-job)[data-tone="good"] { --t-bg: var(--good-bg); --t-ink: var(--good-ink); --t-line: var(--good-line); --t-text: var(--text); }
:is(.msg, .remaining, .kit-badge, .kit-job)[data-tone="warn"] { --t-bg: var(--warn-bg); --t-ink: var(--warn-ink); --t-line: var(--warn-line); --t-text: var(--text); }
:is(.msg, .remaining, .kit-badge, .kit-job)[data-tone="danger"] { --t-bg: var(--danger-bg); --t-ink: var(--danger-ink); --t-line: var(--danger-line); --t-text: var(--danger-ink); }

/* ---------- 한글 줄바꿈 (20261024-alalshow-sf5-final-check, 재점검 BE-30) ----------
   제목(h1~h4 — 카드 제목·대화창 제목 포함)·갤러리 제목·사이드바 이름은 낱말 사이에서만 줄을 바꾼다 ("솔직 후/기"처럼 낱말 가운데서 끊지 않음).
   낱말 하나가 칸보다 길 때만 그 안에서 끊는다 (overflow-wrap: anywhere — 가로 넘침 없이, 칸의 최소 너비도 예전과 같다).
   :where()라 화면 CSS가 정한 줄바꿈(코드·주소 칸 등)이 늘 이긴다. */
:where(h1, h2, h3, h4, .gal-title, .gal-panel-title, .gal-sns-post-title, .gal-script-title, .side-link) { word-break: keep-all; overflow-wrap: anywhere; }

/* =====================================================================
   공용 틀 (데스크톱 1024px 이상 — 분석기 1440 측정값)
   위쪽 바 60px(흰 바탕 · 아래 1px 파랑) · 로고 x16 · 위쪽 메뉴 x146(홈 + 묶음 다섯, 16px/500, 사이 20px) · 오른쪽 도구 끝 x(폭-16)
   지금 묶음의 메뉴 = y90 작업 줄(35px 버튼, 사이 4px) · 다른 묶음 = 마우스·키보드 초점에 펼친 목록 · 본문 왼쪽 x16.
   메뉴 구조(#side-nav · .side-group · .side-link · aria-current · data-code · 한도 힌트 자리)는 그대로 두고 위치·모양만 바꾼다.
   ===================================================================== */
.topbar { display: flex; align-items: center; gap: var(--space-3); height: var(--topbar-h); padding: 0 var(--space-4); background: var(--paper); border-bottom: 1px solid var(--brand); }
.brand { display: inline-flex; align-items: center; margin-right: auto; color: var(--brand); font-size: var(--text-xl); font-weight: 700; line-height: 27px; letter-spacing: -0.5px; text-decoration: none; white-space: nowrap; }
.brand span { color: inherit; }
/* 오른쪽 도구: 참고 대본 · 남은 횟수 · 닉네임 메뉴 (분석기 오른쪽 글 링크 14px) */
.topbar-ref, .topbar-quota { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-1); border: 0; border-radius: var(--radius-btn); background: none; color: var(--text); font-size: var(--text-md); font-weight: 400; text-decoration: none; white-space: nowrap; cursor: pointer; }
.topbar-ref:hover, .topbar-quota:hover { color: var(--brand); }
.topnav { display: flex; align-items: center; gap: var(--space-3); }
.topnav-user { font-weight: 500; text-decoration: none; }
.link-btn { padding: 0; border: 0; background: none; color: var(--text-muted); font-size: var(--text-md); cursor: pointer; }
.inline { display: inline; margin: 0; }
.ref-panel { z-index: var(--z-panel); }
/* 닉네임 메뉴 */
.usermenu { position: relative; }
.usermenu-toggle { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-1); border-radius: var(--radius-btn); color: var(--text); font-size: var(--text-md); list-style: none; cursor: pointer; }
.usermenu-toggle::-webkit-details-marker { display: none; }
.usermenu-toggle:hover, .usermenu[open] .usermenu-toggle { color: var(--brand); }
.usermenu-caret { color: var(--text-muted); font-size: var(--text-xs); }
.usermenu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--z-topbar); display: flex; flex-direction: column; min-width: 200px; padding: var(--space-2); background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.usermenu-link { display: block; width: 100%; padding: 7px 12px; border: 0; border-radius: var(--radius-btn); background: none; color: var(--text); font-size: var(--text-md); line-height: 21px; text-align: left; text-decoration: none; }
.usermenu-link:hover { background: var(--ground); }
.usermenu-link[aria-current="page"] { background: var(--brand-bg); color: var(--brand-ink); font-weight: 500; }
.usermenu-logout { margin: var(--space-1) 0 0; padding-top: var(--space-1); border-top: 1px solid var(--rule); }
.usermenu-logout .usermenu-link { color: var(--text-muted); }
/* 메뉴 버튼 · 서랍 막 (넓은 화면에서는 없음) */
.nav-toggle { display: none; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-btn); background: var(--paper); box-shadow: var(--shadow-1); color: var(--text); font-size: var(--text-md); font-weight: 500; cursor: pointer; }
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle-icon::before { top: -5px; }
.nav-toggle-icon::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }
.nav-backdrop { display: none; }

/* 본문: 사이드바 칸 없이 왼쪽 x16. 지금 묶음이 있으면(data-task-row) 작업 줄(y90 · 35px) 아래 16px부터 */
.shell { display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-h)); }
.page { order: 0; flex: 1 0 auto; width: 100%; min-width: 0; padding: calc(var(--taskrow-y) - var(--topbar-h)) var(--space-4) var(--space-6); }
.shell[data-task-row] > .page { padding-top: calc(var(--taskrow-y) + var(--btn-h) + var(--space-4) - var(--topbar-h)); }
.page-head h1, .coming-soon h1 { margin: 0 0 var(--space-1); color: var(--text); font-size: var(--text-2xl); font-weight: 700; line-height: 30px; letter-spacing: 0; }
.page-head .kit-head-sub, .page-head > p { color: var(--text-muted); font-size: var(--text-md); }

/* 위쪽 메뉴: 서랍의 메뉴(#side-nav)를 데스크톱에서는 위쪽 바 줄에 겹쳐 놓는다 (바 안 다른 도구는 그대로 눌린다 — pointer-events) */
.sidebar { order: 1; padding: 0 var(--space-4) var(--space-5); }
.side-nav { position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-topnav); display: flex; align-items: center; gap: 20px; height: var(--topbar-h); padding-left: var(--topnav-x); pointer-events: none; }
.side-nav > .topnav-home, .side-nav > .side-group { pointer-events: auto; }
.side-nav > .topnav-home { order: -1; }
.side-home, .side-group-title { display: none; }
.topnav-item { position: relative; display: flex; align-items: center; gap: var(--space-1); padding-top: 1px; border-bottom: 1px solid transparent; color: var(--text); font-size: var(--text-lg); font-weight: 500; line-height: 24px; text-decoration: none; white-space: nowrap; }
.topnav-item:hover { color: var(--brand); }
/* 20261027-alalshow-sf5-topnav-icons: 글자 앞 아이콘 20px · 글자와 4px (분석기 위쪽 메뉴) — 선 색은 글자색 */
.topnav-item > .icon { flex: none; width: 20px; height: 20px; }
.topnav-home[aria-current="page"], .side-group[data-current-group] > .side-group-head { color: var(--brand); border-bottom-color: var(--brand); }
/* 메뉴 이름에서 펼친 목록으로 마우스를 내리는 사이(위쪽 바 아래 끝까지)도 같은 묶음 위로 친다 */
.side-group-head::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px; }
.side-list { margin: 0; padding: 0; list-style: none; }
.side-item { display: flex; align-items: center; gap: var(--space-2); }
.side-item .side-action { flex: 1; margin: 0; }
.side-link { display: block; flex: 1 1 auto; padding: 7px 12px; border: 0; border-radius: var(--radius-btn); background: none; color: var(--text); font: inherit; font-size: var(--text-md); font-weight: 400; line-height: 21px; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.side-link:hover { background: var(--ground); color: var(--brand); }
.side-link:focus-visible { outline-offset: -2px; }
.side-button { width: 100%; }
/* 다른 묶음: 펼친 목록 (마우스를 올리거나 키보드 초점이 들어오면 보인다 — 숨긴 동안에도 읽기 프로그램·Tab으로는 닿는다) */
.side-group > .side-list { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; min-width: 220px; margin-top: 18px; padding: var(--space-2); background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; }
.side-group:not([data-current-group]):hover > .side-list, .side-group:not([data-current-group]):focus-within > .side-list { opacity: 1; pointer-events: auto; }
.side-group > .side-list .side-quota-slot, .side-group > .side-list .key-badge { margin-left: auto; margin-right: var(--space-1); }
/* 지금 묶음: y90 작업 줄 — 35px 버튼, 사이 4px, 지금 화면 = 파란 주 버튼, 다른 메뉴 = 흰 바탕 + 그림자 (넘치면 줄 안에서만 가로로 민다) */
.side-group[data-current-group] > .side-list { top: calc(var(--taskrow-y) - var(--space-2)); left: 0; right: 0; z-index: 1; flex-direction: row; flex-wrap: nowrap; gap: var(--space-1); min-width: 0; margin: 0; padding: var(--space-2) var(--space-4); overflow-x: auto; scrollbar-width: thin; background: none; border-radius: 0; box-shadow: none; opacity: 1; pointer-events: auto; }
.side-group[data-current-group] .side-item { position: relative; flex: none; gap: 0; }
/* 작업 줄이 넘치면(1440보다 좁은 데스크톱) 밀 곳이 남은 끝을 흐리게 — kit.js가 data-more-before/after를 단다 */
.side-group[data-current-group] > .side-list[data-more-after] { -webkit-mask-image: linear-gradient(to right, var(--paper) calc(100% - 48px), transparent); mask-image: linear-gradient(to right, var(--paper) calc(100% - 48px), transparent); }
.side-group[data-current-group] > .side-list[data-more-before] { -webkit-mask-image: linear-gradient(to left, var(--paper) calc(100% - 48px), transparent); mask-image: linear-gradient(to left, var(--paper) calc(100% - 48px), transparent); }
.side-group[data-current-group] > .side-list[data-more-before][data-more-after] { -webkit-mask-image: linear-gradient(to right, transparent, var(--paper) 48px, var(--paper) calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, var(--paper) 48px, var(--paper) calc(100% - 48px), transparent); }
.side-group[data-current-group] .side-link { height: var(--btn-h); background: var(--paper); box-shadow: var(--shadow-1); }
.side-group[data-current-group] .side-link:hover { background: var(--brand-bg-soft); }
.side-group[data-current-group] .side-link[aria-current="page"] { background: var(--brand); color: var(--paper); }
/* 한도 힌트(오늘 n/m)·키 배지는 버튼 안 오른쪽 작은 글 (버튼 사이 4px는 그대로). 자리 폭은 1440에서 만들기 8개가 한 줄(1408px)에 들도록 */
.side-group[data-current-group] .side-item:has(> .side-quota-slot > .side-quota) > .side-link { padding-right: calc(12px + 58px); }
.side-group[data-current-group] .side-item:has(> .key-badge) > .side-link { padding-right: calc(12px + 50px); }
.side-group[data-current-group] .side-item:has(> .key-badge[data-tone="warn"]) > .side-link { padding-right: calc(12px + 92px); }
.side-group[data-current-group] .side-item > .side-quota-slot, .side-group[data-current-group] .side-item > .key-badge { position: absolute; top: 0; right: 10px; bottom: 0; display: flex; align-items: center; margin: 0; padding: 0; border: 0; background: none; pointer-events: none; }
.side-group[data-current-group] .side-item:has(> .side-link[aria-current="page"]) :is(.side-quota, .key-badge) { color: var(--paper); }
/* 한도 힌트 · 키 배지 */
.side-quota-slot { display: inline-flex; align-items: center; }
.side-quota-slot:empty { display: none; }
.side-quota { font-size: 11px; font-weight: 500; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.side-quota[data-tone="warn"] { color: var(--danger-ink); }
.key-badge { --t-bg: var(--ground); --t-ink: var(--text-muted); --t-line: var(--rule); display: inline-block; flex-shrink: 0; padding: 2px 6px; border: 1px solid var(--t-line); border-radius: var(--radius-lg); background: var(--t-bg); color: var(--t-ink); font-size: 11px; font-weight: 500; white-space: nowrap; }
.key-badge[data-tone="good"] { --t-bg: var(--good-bg); --t-ink: var(--good-ink); --t-line: var(--good-line); }
.key-badge[data-tone="warn"] { --t-bg: var(--warn-bg); --t-ink: var(--warn-ink); --t-line: var(--warn-line); }
.key-badge[data-tone="danger"] { --t-bg: var(--danger-bg); --t-ink: var(--danger-ink); --t-line: var(--danger-line); }
.key-badge[data-tone="info"] { --t-bg: var(--info-bg); --t-ink: var(--info-ink); --t-line: var(--info-line); }
/* 체험·남은 횟수 카드: 데스크톱은 쪽 맨 아래(분석기 알림 칸 모양), 서랍에서는 메뉴 아래 */
.quota-slot:empty { display: none; }
.quota-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: 12px 18px; border: 1px solid var(--info-line); border-radius: var(--radius-md); background: var(--info-bg); color: var(--info-ink); }
.quota-banner p { margin: 0; }
.quota-status { font-size: var(--text-md); font-weight: 700; }
.quota-counts { flex: 1 1 320px; font-size: var(--text-sm); line-height: 1.5; }
.quota-link { color: var(--brand-ink); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.quota-link:hover { text-decoration: underline; }
.quota-banner.tone-good { border-color: var(--good-line); }
.quota-banner.tone-warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--text); }
.quota-banner.tone-danger { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger-ink); }

@media (max-width: 1023.98px) {
  /* 위쪽 바는 화면 위에 붙어 있고(60px · 아래 1px 파랑), 메뉴 버튼이 늘 보인다 */
  .topbar { position: sticky; top: 0; z-index: var(--z-topbar); flex-wrap: nowrap; gap: var(--space-2); }
  .nav-toggle { display: inline-flex; order: -1; min-height: var(--tap); flex-shrink: 0; }
  .brand { flex-shrink: 0; }
  .topnav { min-width: 0; }
  .topbar-ref, .topbar-quota, .usermenu-toggle { min-height: var(--tap); flex-shrink: 0; }
  .usermenu-toggle { max-width: 44vw; }
  .topnav-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page, .shell[data-task-row] > .page { padding: 20px var(--space-4) var(--space-6); overflow-wrap: break-word; }
  /* 위쪽 메뉴·작업 줄을 풀고 옛 메뉴 모양 (홈 한 줄 + 묶음 제목 + 목록) */
  .sidebar { padding: var(--space-4); background: var(--paper); }
  .side-nav { position: static; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); height: auto; padding: 0; pointer-events: auto; }
  .topnav-item { display: none; }
  .side-home { display: flex; flex-direction: column; }
  .side-group-title { display: block; margin: 0 0 var(--space-1) 10px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
  .side-group > .side-list, .side-group[data-current-group] > .side-list { position: static; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1px; min-width: 0; margin: 0; padding: 0; overflow: visible; background: none; border-radius: 0; box-shadow: none; opacity: 1; pointer-events: auto; }
  .side-group[data-current-group] .side-item { position: static; flex: initial; gap: var(--space-2); flex-wrap: wrap; row-gap: 2px; }
  .side-group[data-current-group] .side-item > .side-quota-slot, .side-group[data-current-group] .side-item > .key-badge { position: static; margin-left: auto; }
  .side-group[data-current-group] .side-item > .key-badge { padding: 2px 6px; border: 1px solid var(--t-line); background: var(--t-bg); }
  .side-group[data-current-group] .side-item:has(> .side-quota-slot > .side-quota) > .side-link,
  .side-group[data-current-group] .side-item:has(> .key-badge) > .side-link { padding-right: 10px; }
  .side-group[data-current-group] .side-item:has(> .side-link[aria-current="page"]) :is(.side-quota, .key-badge) { color: inherit; }
  .side-link, .side-group[data-current-group] .side-link { display: flex; align-items: center; height: auto; min-height: 40px; padding: 9px 10px; background: none; box-shadow: none; white-space: normal; }
  .side-link[aria-current="page"], .side-group[data-current-group] .side-link[aria-current="page"] { background: var(--brand-bg); color: var(--brand-ink); font-weight: 700; }
  /* 메뉴 이름은 낱말 중간에서 끊지 않고, 배지(키·한도)는 자리가 모자라면 아래 줄로 */
  .side-nav .side-item { flex-wrap: wrap; row-gap: 2px; }
  .side-nav .side-link { flex: 1 0 auto; max-width: 100%; }
  .side-nav .side-item > .key-badge, .side-quota-slot { margin-left: auto; }
  /* 사이드바 = 본문 위에 겹쳐 뜨는 서랍 (본문을 밀지 않는다) */
  html[data-nav] .sidebar { position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: min(86vw, 320px); z-index: var(--z-drawer); overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--rule); box-shadow: var(--shadow-2); }
  html[data-nav="closed"] .sidebar { visibility: hidden; transform: translateX(-105%); }
  html[data-nav] .side-nav .side-link { min-height: var(--tap); }
  html[data-nav="open"] .nav-backdrop { display: block; position: fixed; top: var(--topbar-h); right: 0; bottom: 0; left: 0; z-index: var(--z-backdrop); background: rgba(20, 20, 30, 0.38); }
  html[data-nav="open"] body { overflow: hidden; }
}

/* 누름 칸 44px (휴대폰) */
@media (max-width: 640px) {
  .page .btn, .page .btn-small, .page .link-btn, .page select, .page .field input, .page .inline-form input, .usermenu-link, .kit-tab { min-height: var(--tap); }
  .page .link-btn, .page a.btn { display: inline-flex; align-items: center; }
  .brand { font-size: var(--text-lg); }
  .usermenu-toggle { max-width: 34vw; }
  /* 휴대폰 위쪽 바: 남은 횟수는 서랍의 설정 묶음·카드로 (바가 넘치지 않게) */
  .topbar-quota { display: none; }
}

/* =====================================================================
   기본 부품 (분석기 값) — 버튼 · 입력칸 · 칸 · 꼬리표 · 알림
   ===================================================================== */
/* 버튼: 35px · 안쪽 7px 12px · 400 14px/21px · 둥글기 6 · 주 = 파랑, 보조 = 흰 바탕 + 그림자(테두리 없음), 위험 = 빨강 */
.btn { display: inline-block; min-height: var(--btn-h); padding: 7px 12px; border: 0; border-radius: var(--radius-btn); background: var(--paper); box-shadow: var(--shadow-1); color: var(--text); font-size: var(--text-md); font-weight: 400; line-height: 21px; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--brand-bg-soft); }
.btn-primary, .btn-primary:hover { background: var(--brand); color: var(--paper); }
.btn-primary:hover { background: var(--brand-ink); }
.btn-secondary { background: var(--paper); }
.btn-danger, .btn-danger:hover { background: var(--danger-ink); color: var(--paper); }
.btn-ghost, .btn-ghost:hover { background: transparent; box-shadow: none; color: var(--text-muted); }
.btn-ghost:hover { color: var(--brand); }
.btn-small { min-height: 30px; padding: 4px 10px; font-size: var(--text-sm); line-height: 20px; border-radius: var(--radius-btn); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* (묶음 A) 눌린 단추(aria-pressed) = 분석기 고른 칩 (파랑 바탕 · 흰 글) — 버튼에 테두리가 없어 예전 테두리 색만으로는 안 보인다 */
.btn[aria-pressed="true"], .btn[aria-pressed="true"]:hover { background: var(--brand); color: var(--paper); }
/* 입력칸 · 고르기칸 · 글칸: 35px · 둥글기 5 · 1px 선 · 초점이면 선이 파랑 (화면 CSS보다 우선 — 모양만) */
:root .page :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"]), textarea, select) { border-radius: var(--radius-sm); color: var(--text); font-size: var(--text-md); font-weight: 400; }
:root .page :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"]), select) { min-height: var(--btn-h); }
:root .page :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"]), textarea, select):focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 2px var(--brand-line); }
/* (묶음 C) 휴대폰(≤640px)은 입력칸·고르기칸도 누름 칸 44px — 바로 위 35px 규칙이 휴대폰 규칙(.page .field input · .page select)보다 강해 35px로 남던 것 */
@media (max-width: 640px) { :root .page :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"]), select) { min-height: var(--tap); } }
.field input, .inline-form input { padding: 6px 12px; border: 1px solid var(--input-line); background: var(--paper); color: var(--text); }
/* 칸 (card): 흰 바탕 · 둥글기 8 · 그림자 · 테두리 없음 */
.card { margin-bottom: var(--space-4); padding: 20px; border: 0; border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-1); }
.card h2 { margin: 0; font-size: var(--text-lg); font-weight: 700; }
/* 꼬리표 (옛 알약 → 둥글기 6) */
.badge { display: inline-block; padding: 3px 8px; border-radius: var(--radius-lg); background: var(--info-bg); color: var(--info-ink); font-size: var(--text-sm); font-weight: 500; }
/* 알림 칸 (분석기 .paid-panel: #EFF6FF · 1px #BFDBFE · 둥글기 8 · 안쪽 12px 18px · 글 #1E40AF) */
.notice { margin: 0; padding: 12px 18px; border: 1px solid var(--info-line); border-radius: var(--radius-md); background: var(--info-bg); color: var(--info-ink); font-size: var(--text-md); }

/* ---------- 공용 페이지 틀 자리 (#page-msg #job #result #recent) ---------- */
/* 틀 안 한 줄(안내 등)과 다음 카드 사이 간격 */
.kit-row { margin-bottom: var(--space-4); }
.kit-slot:empty { display: none; }
.kit-slot { margin-bottom: var(--space-4); }
.kit-slot > :last-child { margin-bottom: 0; }

/* ---------- K1 페이지 머리 ---------- */
.kit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3) var(--space-4); flex-wrap: wrap; }
.kit-head-text { min-width: 0; flex: 1 1 280px; }
.kit-head-side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.kit-head-sub { margin: 0; }

/* ---------- K2 카드 ---------- */
/* .card h2 { margin: 0 } 보다 앞서도록 두 클래스 */
.card.kit-card:not(.stack) > h2 { margin: 0 0 var(--space-3); }
.kit-card p { margin-top: 0; }
.kit-card .field-note { margin: 0; }

/* ---------- K3 칸 오류·설명 ---------- */
.page [aria-invalid="true"] { border-color: var(--danger-ink); outline-color: var(--danger-ink); }
.field-error[data-kit-error] { margin: 0; }

/* ---------- K5 남은 횟수 · 배지 ---------- */
.remaining, .kit-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 8px; border-radius: var(--radius-lg); border: 1px solid var(--t-line); background: var(--t-bg); color: var(--t-ink); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }

/* ---------- K6 안내 ---------- */
.msg { margin: 0; padding: 12px 18px; border-radius: var(--radius-md); border: 1px solid var(--t-line); background: var(--t-bg); color: var(--t-text); font-size: var(--text-md); line-height: 1.5; }
.msg + .msg { margin-top: var(--space-2); }
.msg-link { color: inherit; font-weight: 700; }

/* ---------- K7 빈 화면 ---------- */
.empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; color: var(--text-muted); }
.empty-text { margin: 0; }

/* ---------- K8 진행 ---------- */
.kit-job { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--t-line); background: var(--paper); }
.kit-job-text { margin: 0; font-weight: 500; color: var(--t-ink); }
.kit-job[data-state="running"] .kit-job-text { color: var(--text); }

/* ---------- K9 탭 ---------- */
.kit-tab-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); border-bottom: 1px solid var(--rule); overflow-x: auto; }
.kit-tab { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); white-space: nowrap; text-decoration: none; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.kit-tab:hover { color: var(--brand); }
.kit-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
/* 20261024-alalshow-sf5-final-check(재점검 BE-24): 탭 줄이 화면보다 넓으면(휴대폰) 한 줄 가로 밀기 + 밀 곳이 남은 끝에 흐림·화살표.
   표시는 kit.js 규칙 12가 data-more-before/after로 단다 (고른 탭은 보이게 밀어 둔다). 표시는 누르기를 막지 않는다. */
.kit-tabs { position: relative; }
.kit-tab-list { scrollbar-width: thin; overscroll-behavior-x: contain; }
.kit-tabs[data-more-before]::before, .kit-tabs[data-more-after]::after { position: absolute; top: 0; bottom: 1px; width: 40px; display: flex; align-items: center; pointer-events: none; color: var(--text-muted); font-size: var(--text-lg); font-weight: 700; }
.kit-tabs[data-more-before]::before { content: "‹"; left: 0; justify-content: flex-start; background: linear-gradient(to left, transparent, var(--ground) 65%); }
.kit-tabs[data-more-after]::after { content: "›"; right: 0; justify-content: flex-end; background: linear-gradient(to right, transparent, var(--ground) 65%); }

/* ---------- K10 표 (분석기: 머리 50px #EFEFEF 500 14px · 줄 아래 1px #EDEDED · 안쪽 12px — 휴대폰에서는 줄마다 카드) ---------- */
.kit-table-wrap { max-width: 100%; overflow-x: auto; }
.kit-table { width: 100%; border-collapse: collapse; background: var(--paper); }
.kit-table th { height: 50px; padding: 0 var(--space-3); background: var(--table-head); color: var(--text); font-size: var(--text-md); font-weight: 500; line-height: 21px; text-align: left; }
.kit-table th:first-child { border-top-left-radius: var(--radius-md); }
.kit-table th:last-child { border-top-right-radius: var(--radius-md); }
.kit-table td { padding: var(--space-3); border-bottom: 1px solid var(--rule); font-size: var(--text-md); line-height: 21px; text-align: left; }
@media (max-width: 640px) {
  .page .table-stack, .page .table-stack tbody, .page .table-stack tr { display: block; width: 100%; }
  .page .table-stack { border: 0; background: none; overflow: visible; }
  .page .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .page .table-stack tr { border: 0; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); background: var(--paper); box-shadow: var(--shadow-1); }
  .page .table-stack td { display: flex; justify-content: space-between; gap: var(--space-3); min-width: 0; border: 0; padding: var(--space-1) 0; text-align: right; }
  .page .table-stack td::before { content: attr(data-label); color: var(--text-muted); font-weight: 500; text-align: left; }
  /* 첫 칸은 카드 제목 (열 이름 없이 굵게) */
  .page .table-stack td:first-child { font-weight: 700; text-align: left; padding-bottom: var(--space-2); }
  .page .table-stack td:first-child::before { content: none; }
}

/* ---------- K11 다음 단계 ---------- */
.next-steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-2); }
.next-steps-title { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); }
.next-steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- K12 권리 확인 ---------- */
.kit-consent { align-items: flex-start; padding: var(--space-3); border: 1px solid var(--warn-line); border-radius: var(--radius-md); background: var(--warn-bg); color: var(--text); }

/* ---------- K13 PC 앱 열기 ---------- */
.kit-bridge { display: inline-flex; }

/* ---------- K14 단계 줄 ---------- */
.kit-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.kit-step { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); border: 1px solid transparent; background: var(--paper); box-shadow: var(--shadow-1); font-size: var(--text-sm); word-break: keep-all; }
.kit-step-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--muted-bg); font-weight: 700; flex-shrink: 0; }
.kit-step[aria-current="step"] { border-color: var(--brand); color: var(--brand-ink); font-weight: 700; }
.kit-step[aria-current="step"] .kit-step-no { background: var(--brand); color: var(--paper); }
.kit-step[data-done="true"] .kit-step-no { background: var(--good-bg); color: var(--good-ink); }
@media (max-width: 640px) { .kit-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- K15 대화창 ---------- */
.kit-dialog { padding: 0; border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-2); width: min(560px, calc(100% - 32px)); max-height: calc(100% - 64px); color: var(--text); }
.kit-dialog::backdrop { background: rgba(20, 20, 30, 0.45); }
.kit-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--rule); }
.kit-dialog-head h2 { margin: 0; font-size: var(--text-xl); }
.kit-dialog-body { padding: var(--space-4) var(--space-5) var(--space-5); }

/* ---------- K17 오류 요약 (20261023-alalshow-sf5-ui-migrate-rest) — 긴 양식의 [저장] 버튼 바로 위 ---------- */
.kit-error-summary:empty { display: none; }
.kit-error-summary { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--danger-line); border-radius: var(--radius-md); background: var(--danger-bg); color: var(--danger-ink); }
.kit-error-summary:focus { outline: 2px solid var(--danger-ink); outline-offset: 2px; }
.kit-error-summary-title { margin: 0 0 var(--space-1); font-weight: 700; }
.kit-error-summary-list { margin: 0; padding-left: var(--space-5); }
.kit-error-summary-list a { color: inherit; }
.field-error:empty { display: none; }
/* 대화창 안 버튼 줄 (확인 · 취소) */
.kit-dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ---------- K18 다시 시도 (20261024-alalshow-sf5-retry-on-failure) — 실패 카드 안: 버튼 줄 · 횟수 안내 · 오류 자리 ---------- */
.kit-retry { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.kit-retry-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kit-retry-form { margin: 0; }
.kit-retry-hint { margin: 0; color: var(--text); }
.kit-retry-note { margin: 0; }
.kit-retry-msg:empty { display: none; }
.kit-job-note { margin: 0; }