/* ============================================================
   설정 폼 컴포넌트 — 접이식 섹션(.fold) + 숫자 스테퍼(.step)
   ------------------------------------------------------------
   style.css가 800줄 한계에 닿아 "설정 패널 안에서 쓰는 폼 부품"만 분리했다.
   progressive disclosure를 나머지 패널로 넓힐 때 여기만 커지면 된다.
   ============================================================ */

/* ── 접이식 섹션 ─────────────────────────────────────────
   네이티브 <details>/<summary> — 키보드·스크린리더 동작이 공짜다.
   접혀 있어도 input이 DOM에 남아 저장·dirty diff에 그대로 잡힌다. */
.fold{border-bottom:1px solid var(--line)}
.fold:last-of-type{border-bottom:0}
.fold-h{
  display:flex; align-items:baseline; gap:10px; cursor:pointer; list-style:none;
  padding:14px 0; user-select:none;
}
.fold-h::-webkit-details-marker{display:none}   /* 기본 삼각형 마커 제거(자체 셰브론 사용) */
.fold-h:hover .fold-t{color:var(--a2)}
.fold-t{font-size:14px; font-weight:600; color:var(--ink); flex:none}
.fold-d{font-size:12.5px; color:var(--ink-dim); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fold-c{flex:none; font-size:13px; color:var(--ink-faint); transition:transform .16s}
.fold[open] .fold-c{transform:rotate(180deg)}
.fold-b{padding:0 0 6px}
.fold-h:focus-visible{outline:2px solid var(--a1); outline-offset:2px; border-radius:8px}
@media (max-width:520px){
  /* 좁은 화면에선 설명이 제목을 밀어내므로 감춘다(제목만으로도 식별 가능) */
  .fold-d{display:none}
}

/* ── 상세 헤더 저장바 (app-headbar.js) ───────────────────
   제목줄을 스크롤에 고정하고 저장/되돌리기를 그 자리에 둔다.
   긴 패널에서 저장 버튼을 찾으러 끝까지 내려가지 않아도 된다. */
.sec-h-sticky{
  position:sticky; top:0; z-index:25;
  /* .settings-main의 상단 패딩(26px)만큼 위로 늘려, 고정됐을 때 콘텐츠가 뒤로 비치지 않게 */
  margin-top:0; padding:14px 0; margin-bottom:10px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.sec-act{display:flex; align-items:center; gap:8px; flex:none}

/* 플러그인 한 줄 설명 — 고정 헤더 아래(스크롤과 함께 사라짐).
   "이게 무엇을 하는 기능인지"를 열어보기 전에 알 수 있게 한다. */
.sec-desc{margin:-4px 0 14px; font-size:13px; line-height:1.6; color:var(--ink-dim); max-width:66ch}
.sec-desc:empty{display:none}
/* 미저장 변경이 없으면 흐리게 — 누를 일이 없다는 걸 보여준다 */
.sec-act{opacity:.45; transition:opacity .15s}
.sec-act.on{opacity:1}
.btn.sm{font-size:13px; padding:7px 13px; border-radius:9px}
@media (max-width:520px){
  /* 좁은 화면에선 제목 옆 부가정보를 접고 버튼만 남긴다 */
  .sec-h-sticky .count{display:none}
}

/* ── 필수 표시 · 안내 배너 ───────────────────────────────
   필수 항목은 저장을 눌러 에러를 보고 나서가 아니라 **미리** 알 수 있어야 한다.
   (지금까지는 sb.needch·emb.needch 같은 검증이 저장 시점에만 토스트로 떴다.) */
.req{color:var(--crit); font-weight:700; margin-left:3px}

/* 라벨 붙은 입력 한 칸 — 빌더는 placeholder만 있어 무엇을 넣는 칸인지, 무엇이 필수인지
   알 수 없었다. select/number처럼 placeholder를 못 쓰는 컨트롤엔 특히 필요하다. */
.fld{display:flex; flex-direction:column; gap:5px; min-width:0}
.fld-l{font-size:12.5px; color:var(--ink-dim)}
.fld-l b{color:var(--ink); font-weight:600}
/* 스크린리더에는 별표 대신 의미를 읽힌다 — .req[title] + aria-label을 함께 쓴다 */

.note{
  display:flex; align-items:flex-start; gap:9px; margin:10px 0 2px;
  padding:10px 13px; border-radius:11px; font-size:12.5px; line-height:1.55;
  color:var(--ink-dim); background:var(--a1-soft); border:1px solid color-mix(in srgb,var(--a1) 30%,transparent);
}
.note-ic{flex:none; font-size:13px; line-height:1.35; color:var(--a1)}
.note b{color:var(--ink)}
.note.warn{background:color-mix(in srgb,var(--warn) 13%,transparent); border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.note.warn .note-ic{color:var(--warn)}

/* ── 토글 카드 ───────────────────────────────────────────
   기능 하나 = 카드 하나. 토글이 머리에 있고 그 기능의 설정은 카드 **안**에 들어가며,
   켜야 드러난다(progressive disclosure). 기존엔 토글과 관련 설정이 형제로 나열돼
   "이 설정이 어느 토글에 딸린 건지" 알 수 없었다.

   꺼져도 display:none일 뿐 DOM에는 남는다 → 저장·dirty diff(serializeForm)에 그대로 잡힌다.
   (설정을 지우지 않고 감추기만 하므로, 껐다 켜도 값이 보존된다.) */
.tcard{border:1px solid var(--line); border-radius:13px; margin:10px 0; background:var(--surface-2); transition:.15s}
.tcard.on{border-color:color-mix(in srgb,var(--a1) 45%,var(--line))}
.tcard-h{display:flex; align-items:center; gap:16px; padding:13px 15px}
.tcard-h .lab{flex:1; min-width:0}
.tcard-b{display:none; padding:2px 15px 13px; border-top:1px solid var(--line)}
.tcard.on>.tcard-b{display:block}
/* 카드 안의 행은 카드가 이미 배경을 갖고 있으므로 구분선을 약하게 */
.tcard-b .row{padding:11px 0}
.tcard-b .row:last-child{border-bottom:0}
.tcard-b .lv-msg{border-top:0; padding-top:10px}

/* ── 숫자 스테퍼 ─────────────────────────────────────────
   맨손 number input보다 조작이 쉽다. input의 step·min·max를 그대로 존중(핸들러는 app-wiring.js). */
.step{display:flex; align-items:stretch; gap:0}
.step .lr-in{
  flex:1; min-width:0; width:auto; text-align:center;
  border-radius:0; border-left-width:0; border-right-width:0;
  /* 스테퍼 버튼이 있으니 브라우저 기본 스피너는 중복 — 제거 */
  -moz-appearance:textfield; appearance:textfield;
}
.step .lr-in::-webkit-outer-spin-button,
.step .lr-in::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.step-b{
  flex:none; width:32px; font-family:var(--sans); font-size:15px; font-weight:600; line-height:1;
  color:var(--ink-dim); background:var(--surface-2); border:1px solid var(--line-strong);
  cursor:pointer; transition:.13s;
}
.step-b:first-child{border-radius:10px 0 0 10px}
.step-b:last-child{border-radius:0 10px 10px 0}
.step-b:hover{color:var(--ink); border-color:var(--a1); background:var(--a1-soft)}
.step-b:active{transform:translateY(1px)}
/* 입력에 포커스가 가면 스테퍼 전체가 하나의 컨트롤로 보이게 테두리를 맞춘다 */
.step:focus-within .step-b{border-color:var(--a1)}