/* hk-set — 설정형(T6) 화면 부품 (공통틀방 · 19_ui_tailux.md §6 T6 · 기준 화면 /admin · 쓰는 법 docs/specs/onhi-benchmark/hk-set.md)
   구성: 화면 맨 위 «하위 메뉴» 밑줄 탭(hk-set-nav · 폭 무관) + 본문(다른 화면과 같은 폭 · 긴 입력 칸만 720 상한) 안에
         절(제목 · 설명 · 구분선) → 2열 입력 · 줄 목록(오른쪽에 버튼·스위치) → 아래 버튼 줄(오른쪽 정렬).
   값은 전부 var(--hk-…). 기본꼴(hk-btn · hk-input · hk-tabs · hk-badge …)은 다시 정의하지 않는다 — 자기 접두어(.hk-set-)만 쓴다. */
.hk-set{box-sizing:border-box;width:100%}   /* 바깥 틀(카드 · 머리 · 여백)은 다른 화면과 같은 폭(대표 10-14 「모든 페이지 좌우 폭 다 똑같이」 · 리더 19:4x — 종전 가운데 720) */
/* 긴 입력 칸만 안에서 상한 — 줄 전체(is-wide · 한 칸짜리 줄)의 입력이 PC 폭으로 늘어나 읽기 어렵지 않게 */
.hk-set-field>.hk-input,.hk-set-field>.hk-set-ro{max-width:720px}
/* 화면 머리 — 제목(공용 규칙 24/500) + 한 줄 설명 */
.hk-set-top{margin:0 0 24px}
/* 하위 메뉴(화면 안) — 밑줄 탭과 같이 쓴다: <nav class="hk-tabs hk-set-nav">. 창 폭과 무관하게 늘 보인다(대표 10-11 13:3x 「1번 서브 = 트리 · 2번 서브 = 화면 안 탭」 —
   종전엔 트리 사이드바(≥1024)에 같은 구역이 펼쳐져 있으면 이 줄을 숨겨, 창을 키우면 트리 · 줄이면 탭으로 바뀌었다). */
.hk-set-nav{margin:0 0 28px}
/* 절 — 제목 + 설명 + 구분선, 그 아래 내용. 절 하나 = 카드 한 장(공용 결 v1 — 회색 바탕 위 흰 면 · 값은 hk-card 와 같은 토큰) */
.hk-set-sec{margin:0 0 20px;padding:24px;border:1px solid var(--hk-card-border);border-radius:var(--hk-radius-lg);background:var(--hk-surface);box-shadow:var(--hk-shadow-card)}
.hk-set-sec>:last-child{margin-bottom:0}
.hk-set-sec>.hk-set-row:last-child{padding-bottom:0;border-bottom:0}
.hk-set-head{margin:0 0 20px;padding:0 0 16px;border-bottom:1px solid var(--hk-border)}
.hk-set-h{margin:0;font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.02em;color:var(--hk-heading)}
.hk-set-d{margin:4px 0 0;font-size:var(--fs-small);font-weight:400;line-height:1.5;color:var(--hk-muted)}
/* 절 안의 풀이 글(읽는 글 — 13px · hk-hint(12px)는 입력칸 아래 한 줄에만) */
.hk-set-p{margin:0 0 12px;font-size:var(--fs-small);line-height:1.6;color:var(--hk-muted);overflow-wrap:anywhere}
.hk-set-p b{font-weight:500;color:var(--hk-text)}
.hk-set-p a{color:var(--hk-link)}
/* 절 안의 작은 제목(묶음 이름) — 옆에 붙는 설명은 <span class="hk-set-d"> */
.hk-set-sub{margin:28px 0 12px;font-size:var(--fs-body);font-weight:500;line-height:1.4;color:var(--hk-heading)}
.hk-set-sub .hk-set-d{display:inline;margin:0 0 0 6px}
.hk-set-head+.hk-set-sub{margin-top:0}
/* 2열 입력(폰 1열) — 칸 하나짜리 줄 · is-wide 는 줄 전체 · is-3 은 3열 */
.hk-set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin:0 0 16px}
.hk-set-grid.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hk-set-grid>.is-wide,.hk-set-grid>:only-child{grid-column:1/-1}
.hk-set-field{display:flex;flex-direction:column;min-width:0}
.hk-set-field>.hk-hint{margin-top:6px}
/* 고칠 수 없는 값(읽기만) — 입력칸과 같은 높이의 옅은 상자 */
.hk-set-ro{display:flex;align-items:center;box-sizing:border-box;min-height:38px;padding:8px 12px;border-radius:var(--hk-radius);background:var(--hk-surface-2);color:var(--hk-muted);font-size:var(--fs-body);line-height:1.4;overflow-wrap:anywhere}
/* 줄 목록 — 왼쪽: 이름 + 설명 · 오른쪽: 버튼·스위치·값 */
.hk-set-row{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 0;border-bottom:1px solid var(--hk-border)}
.hk-set-row>:first-child{flex:1 1 0;min-width:0}
.hk-set-row-t{font-size:var(--fs-body);font-weight:500;line-height:1.4;color:var(--hk-heading);overflow-wrap:anywhere}
.hk-set-row-d{margin:2px 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--hk-muted);overflow-wrap:anywhere}
.hk-set-row-a{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
/* 스위치를 감싸는 label — 누르는 자리 44 를 든다(스위치 자체는 40×20): <label class="hk-set-sw"><input class="hk-switch" role="switch"></label> */
.hk-set-sw{display:inline-flex;align-items:center;cursor:pointer}
@media(pointer:coarse),(max-width:880px){.hk-set-sw{min-height:var(--touch)}}
/* 아래 버튼 줄 — 버튼은 오른쪽, 상태 문장(hk-set-msg)은 왼쪽 */
.hk-set-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin:20px 0 0}
.hk-set-msg{flex:1 1 0;min-width:0;margin-right:auto;font-size:var(--fs-small);line-height:1.5;color:var(--hk-muted);overflow-wrap:anywhere}
.hk-set-msg:empty{min-width:0}
.hk-set-msg.is-ok{color:var(--hk-on-success-soft)}
.hk-set-msg.is-bad{color:var(--hk-on-danger-soft)}
/* 알림 한 줄(본사 관리 중 · 미납 안내처럼 절 맨 위에 붙는 문장) — 상자·색은 기본꼴로: class="hk-box is-soft is-warn hk-set-note" */
.hk-set-note{margin:0 0 16px;font-size:var(--fs-small);font-weight:500;line-height:1.5}
/* 폰 — 한 열 · 줄 목록은 버튼이 아래 줄로 · 버튼 줄은 폭을 나눠 쓴다. 폴드 접힘(≤359)은 절 사이를 좁힌다 */
@media(max-width:599px){
.hk-set-grid,.hk-set-grid.is-3{grid-template-columns:minmax(0,1fr)}
.hk-set-sec{margin-bottom:16px;padding:20px 16px}
.hk-set-row{flex-wrap:wrap}
.hk-set-row>:first-child{flex-basis:100%}
.hk-set-row-a{justify-content:flex-start}
/* 켜고 끄는 줄(is-inline) — 스위치·배지는 이름 옆(오른쪽 위)에 남기고 버튼만 글 아래로 내린다.
   기본(조작이 통째로 아래 줄로)은 버튼용이라, 스위치 줄에서는 이름과 스위치가 떨어져 보인다. -12 = 누르는 자리(44)의 가운데를 이름 줄에 맞춘 값 */
.hk-set-row.is-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px 16px}
.hk-set-row.is-inline>.hk-set-row-a{display:contents}
.hk-set-row.is-inline>.hk-set-row-a>.hk-set-sw,.hk-set-row.is-inline>.hk-set-row-a>.hk-badge{grid-column:2;grid-row:1}
.hk-set-row.is-inline>.hk-set-row-a>.hk-set-sw{margin-top:-12px}
.hk-set-row.is-inline>.hk-set-row-a>.hk-btn{grid-column:1/-1;grid-row:2;justify-self:start}
.hk-set-acts .hk-btn{flex:1 1 auto}
/* 상태 문장은 버튼 위 한 줄 — 비어 있어도 한 줄 자리를 잡는다(글이 생기는 순간 아래 줄이 밀려 다음 누름이 엉뚱한 곳에 닿지 않게 · 청구방 리허설 B1) */
.hk-set-msg{flex-basis:100%;min-height:1.5em}
}