/* 폼 - 입력칸·라벨 줄·알약·늘리는 줄(라벨 옆 도움말 [?]는 drawer-popover.css). 동작은 form.js, 규칙은 claude_common/ui/form.md
   칸 검사·오류 흐름은 claude_common/ux/validation.md (여기서는 .field-error / .error-message 모양만 둔다) */
:root {
  --form-field-h: 34px;      /* 한 줄 칸 높이 - 같은 줄의 칸·버튼·알약이 이 높이로 선다 */
  --form-label-w: 7rem;      /* 라벨 칸 폭 - 고정해야 줄마다 입력칸 왼쪽이 세로로 맞는다 */
  --form-gap: .6rem;         /* 라벨과 입력 사이 */
}

/* ── 입력칸 ── 흰 면 + 1px 선, 들어간 그림자 없음. 초점 = 파란 선 + 3px 옅은 파란 테 */
.input,
.textarea,
.select select {
  width: 100%;
  border: 1px solid var(--uk-border);
  border-radius: var(--uk-r-sm);
  background: var(--uk-surface);
  box-shadow: none;
  color: var(--uk-fg);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 0 .65rem;
}
.input,
.select select { height: var(--form-field-h); }
.textarea { padding: .5rem .65rem; line-height: 1.5; min-height: 5.5em; max-height: 300px; overflow-y: auto; resize: vertical; } /* 300px까지만 늘고 넘으면 칸 안에서 민다 */
.input:focus,
.textarea:focus,
.select select:focus { outline: 0; border-color: var(--uk-brand); box-shadow: 0 0 0 3px var(--uk-brand-light); }
.input::placeholder,
.textarea::placeholder { color: var(--uk-muted); opacity: .75; }
.input[readonly],
.textarea[readonly] { background: var(--uk-sunk); color: var(--uk-muted); }
.input:disabled,
.select select:disabled { opacity: .55; cursor: not-allowed; }
/* 날짜·시각 칸은 값이 딱 들어갈 만큼만 - 한 줄을 다 쓰면 빈 칸만 길다 */
.input[type="date"] { width: 9.4rem; flex: 0 0 auto; padding-right: .4rem; }
.input[type="time"] { width: 7.5rem; flex: 0 0 auto; }
/* 짧은 값(수량·개수·몇 초) - 줄을 다 쓰지 않는다 */
.input.is-short { width: 8rem; flex: 0 0 auto; }
/* 색 고르기 - 색 견본 칸만, 값 글자는 옆에 따로 */
.input[type="color"] { width: 3.25rem; flex: 0 0 auto; padding: .2rem; cursor: pointer; }
.input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--uk-r-xs); }
.input[type="color"]::-moz-color-swatch { border: 0; border-radius: var(--uk-r-xs); }
/* 한 개짜리 작은 파일(도장 등) - 폼과 함께 보내는 평범한 파일 칸(file-upload.md). 브라우저 기본 [파일 선택] 단추를 공통 버튼 모양으로,
   칸은 점선 테두리(파일 올리기 상자와 같은 결)로 그린다. 글자(파일 이름·"선택된 파일 없음")는 브라우저가 쓴다 (2026-10-05) */
.input[type="file"] {
  height: auto; min-height: var(--form-field-h); padding: .2rem .35rem;
  border-style: dashed; color: var(--uk-muted); font-size: 13px; line-height: 1.6; cursor: pointer;
}
.input[type="file"]:hover { border-color: var(--uk-brand); }
.input[type="file"]::file-selector-button {
  height: 26px; margin-right: .6rem; padding: 0 .8rem;
  border: 0; border-radius: var(--uk-r-btn, var(--uk-r-sm)); background: var(--uk-surface); box-shadow: var(--uk-up-sm);
  color: var(--uk-fg); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.input[type="file"]::file-selector-button:hover { color: var(--uk-brand-dark); }
/* 드롭다운 - 브라우저 화살표 대신 그린 화살표, 글자를 덮지 않게 오른쪽을 비운다 */
.select { position: relative; display: inline-block; min-width: 8rem; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2rem; cursor: pointer; }
.select::after {
  content: ""; position: absolute; right: .8rem; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border: solid var(--uk-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none;
}

/* ── 검사 표시 (흐름: ux/validation.md) ── */
.field-error,
.input.field-error,
.textarea.field-error,
.select select.field-error { border-color: var(--uk-danger) !important; box-shadow: 0 0 0 3px var(--uk-danger-light) !important; }
.error-message { display: block; font-size: 12.5px; line-height: 1.4; color: var(--uk-danger); margin-top: .25rem; word-break: keep-all; }
.error-message:empty { display: none; }
.req { color: var(--uk-danger); margin-left: .15rem; font-weight: 700; } /* 필수 = 라벨 뒤 빨간 * */
.label-note { margin-left: .3rem; font-size: 12px; font-weight: 400; color: var(--uk-muted); } /* 라벨 옆 한두 낱말 설명(단위·형식) */

/* ── 칸 묶음 · 라벨 줄 ── 한 줄 = 라벨 + 입력. 라벨은 왼쪽(관리 화면 기본) */
.form-panel { border: 1px solid var(--uk-border); border-radius: var(--uk-r-md); padding: .85rem; background: var(--uk-surface); }
.form-panel + .form-panel { margin-top: .9rem; }
.form-panel-title { font-size: 15px; font-weight: 700; margin: 0 0 .7rem; }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--form-gap); margin-bottom: .55rem; }
.form-row:last-child { margin-bottom: 0; }
.form-row[hidden] { display: none !important; } /* display:flex가 hidden을 이기지 않게 */
.form-row > .label {
  flex: 0 0 var(--form-label-w); margin: 0;
  font-size: 13px; font-weight: 600; color: var(--uk-fg);
  line-height: var(--form-field-h); word-break: keep-all;
}
.form-row.is-top { align-items: flex-start; }
.form-row.is-top > .label { line-height: 1.5; padding-top: .45rem; }
/* 입력이 남은 자리를 다 먹는다 - 기본 폭 0이라 줄바꿈이 켜져 있어도 라벨 옆에 남는다 */
.form-row > .input,
.form-row > .textarea,
.form-row > .select,
.form-row > .form-row-input,
.form-row > .form-row-stack,
.form-row > .form-row-text,
.form-row > .form-row-editor,
.form-row > .file-upload,
.form-row > .file-upload-field,
.form-row > .filter-options,
.form-row > .repeat-rows { flex: 1 1 0; min-width: 0; }
.form-row > .input[type="date"],
.form-row > .input[type="time"],
.form-row > .input[type="color"],
.form-row > .input.is-short { flex: 0 0 auto; }
.form-row > .select select { width: 100%; }
.form-row-input { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.form-row-input > .input,
.form-row-input > .select { flex: 1 1 auto; min-width: 0; }
.form-row-input > button { flex: 0 0 auto; }
/* 칸 여럿을 세로로 - 입력 + 그 아래 체크·설명처럼 한 라벨에 딸린 묶음 */
.form-row-stack { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; }
/* 고칠 수 없는 값 - 입력칸 없이 글자만, 줄 높이는 입력칸과 같게 */
.form-row-text { min-height: var(--form-field-h); padding: .45rem 0; font-size: 14px; line-height: 1.4; color: var(--uk-fg); overflow-wrap: anywhere; }
.form-row-text.is-empty { color: var(--uk-muted); }
.form-row-editor { width: 100%; max-width: 100%; }   /* 서식 편집기 - 라벨 옆 남은 폭을 다 쓴다 */
/* 알약이 여러 줄로 감싸지면 라벨을 첫 줄에 맞춘다 */
.form-row:has(> .filter-options),
.form-row:has(> .repeat-rows),
.form-row:has(> .form-row-stack),
.form-row:has(> .form-row-editor),
.form-row:has(> .file-upload),
.form-row:has(> .file-upload-field) { align-items: flex-start; }
/* 파일 칸은 라벨 옆 남은 폭을 다 쓴다 - 위 flex-start 때문에 휴대폰(세로 줄)에서 늘어나지 않던 것(2026-10-05) */
.form-row > :is(.file-upload, .file-upload-field) { flex: 1 1 0; min-width: 0; align-self: stretch; }
/* 칸 오류·칸 설명은 입력 **아래** 한 줄 - 라벨 폭만큼 들여 입력칸 왼쪽에 맞춘다 */
.form-row > .error-message,
.form-row > .form-help { flex: 0 0 calc(100% - var(--form-label-w) - var(--form-gap)); min-width: 0; margin: -.2rem 0 0 calc(var(--form-label-w) + var(--form-gap)); } /* 폭 + 왼쪽 여백 = 줄 폭 - 100%로 두면 여백만큼 넘친다(2026-10-05) */
.form-help { font-size: 12.5px; color: var(--uk-muted); }

/* 라벨 위 - 밖에서 온 사람이 보는 공개 창(문의·신청). 넓으면 두 칸씩 나란히 */
.form-panel.is-label-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.form-panel.is-label-top > .form-panel-title,
.form-panel.is-label-top > .form-row.is-span { grid-column: 1 / -1; }
.form-panel.is-label-top > .form-row { flex-direction: column; align-items: stretch; gap: .3rem; margin: 0; }
.form-panel.is-label-top > .form-row > * { flex: 0 0 auto; }  /* 줄이 세로라 .form-row > .input { flex: 1 1 0 }이 높이를 0으로 만든다 */
.form-panel.is-label-top > .form-row > .label { line-height: 1.4; }
.form-panel.is-label-top > .form-row > .error-message,
.form-panel.is-label-top > .form-row > .form-help { margin: 0; }

/* 아래 버튼 줄 - 왼쪽 [목록으로], 오른쪽 저장류 */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--uk-line); }
.form-actions .is-right { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.form-actions form { display: inline; }   /* 버튼 줄 안 다른 폼(삭제 POST)도 버튼 옆에 선다 */

/* ── 알약 (보기를 펼친 라디오·체크박스) ── 떠 있는 알약, 고르면 들어가며 옅은 파랑 면 + 파란 선·글자 */
.filter-options { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.filter-options.is-stack { display: flex; flex-direction: column; align-items: stretch; }
.filter-check {
  display: inline-flex; align-items: center; gap: .35rem;
  height: var(--form-field-h); padding: 0 .8rem;
  border: 1px solid var(--uk-border); border-radius: var(--uk-r-pill);
  background: var(--uk-surface); box-shadow: var(--uk-up-sm);
  color: var(--uk-fg); font-size: 14px; white-space: nowrap; cursor: pointer; user-select: none;
}
.filter-options.is-stack .filter-check { height: auto; min-height: var(--form-field-h); padding: .4rem .8rem; white-space: normal; }
.filter-check:hover { border-color: var(--uk-muted); }
.filter-check:has(input:checked) { border-color: var(--uk-pick); background: var(--uk-pick-light); color: var(--uk-pick-dark); box-shadow: var(--uk-down); }
.filter-check:has(input:focus-visible) { outline: 2px solid var(--uk-brand); outline-offset: 2px; }
.filter-check.is-apart { margin-left: 1rem; }
/* 설명 달린 보기 - 이름 아래 <small> 한두 줄. <label class="filter-check is-card"><input> <span>이름<small>설명</small></span></label> */
.filter-check.is-card { height: auto; min-height: var(--form-field-h); max-width: 15rem; padding: .55rem .9rem; align-items: flex-start; border-radius: var(--uk-r-sm); white-space: normal; word-break: keep-all; }
.filter-check.is-card input { margin-top: 2px; }
.filter-check.is-card > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 600; }
.filter-check.is-card small { font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--uk-muted); }
.filter-check.is-card:has(input:checked) small { color: var(--uk-pick-dark); opacity: .8; } /* 성격이 다른 보기 하나를 조금 뗀다 - 등록 폼에서만 */
/* 동그라미·네모는 직접 그린다(기기마다 모양이 다르지 않게). 글자보다 작게 16px */
.filter-check input[type="checkbox"],
.filter-check input[type="radio"],
.form-check {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto;
  width: 16px; height: 16px; margin: 0;
  border: 1.5px solid var(--uk-border); background: var(--uk-surface) center / 72% no-repeat;
  cursor: pointer; vertical-align: middle;
}
.filter-check input[type="checkbox"], input[type="checkbox"].form-check { border-radius: var(--uk-r-xs); }
.filter-check input[type="radio"], input[type="radio"].form-check { border-radius: 50%; }
.filter-check input[type="checkbox"]:checked,
input[type="checkbox"].form-check:checked {
  border-color: var(--uk-brand); background-color: var(--uk-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.filter-check input[type="radio"]:checked,
input[type="radio"].form-check:checked { border-color: var(--uk-brand); background: var(--uk-brand) radial-gradient(circle, var(--uk-on-strong) 0 31%, transparent 35%); }

/* ── 늘리는 줄 (전화번호·품목처럼 개수가 정해지지 않은 값) ── 첫 줄엔 [＋]만, 나머지 줄엔 [×]만 */
.repeat-rows { display: flex; flex-direction: column; gap: .35rem; }
.repeat-rows > .repeat-row { display: flex; align-items: center; gap: .35rem; }
.repeat-rows > .repeat-row > .input { flex: 1 1 auto; min-width: 0; }
.repeat-act { display: inline-flex; gap: .2rem; }
.repeat-btn {
  min-width: 1.9rem; height: 26px; padding: 0 .5rem; border: 0; border-radius: var(--uk-r-pill); cursor: pointer;
  background: var(--uk-brand-light); color: var(--uk-brand-dark); font: inherit; font-size: 15px; font-weight: 700;
}
.repeat-btn:is([data-repeat-remove], .is-remove) { background: var(--uk-danger-light); color: var(--uk-danger); } /* .is-add/.is-remove - 줄을 화면 스크립트가 늘리고 뺄 때(data-repeat-* 없이) 같은 모양 (2026-10-05) */
.repeat-row:first-child :is([data-repeat-remove], .repeat-btn.is-remove),
.repeat-row:not(:first-child) :is([data-repeat-add], .repeat-btn.is-add) { display: none; }
.repeat-btn:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: 2px; }

/* ── 반복행 추가 - 표 모양(2026-10-05) ── 첫 줄 = 입력하는 행([＋]), 늘린 줄 = [×]. 칸 머리는 thead, 합계는 tfoot */
.repeat-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.repeat-table th { padding: 8px 6px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--uk-muted); white-space: nowrap; border-bottom: 1px solid var(--uk-line); }
.repeat-table td { padding: 6px; vertical-align: middle; border-bottom: 1px solid var(--uk-line); }
.repeat-table tbody .repeat-row:first-child td { background: var(--uk-brand-light); } /* 입력하는 행은 옅은 강조 - 여기서 적고 [＋] */
.repeat-table td > :is(.input, .select, select, .textarea) { width: 100%; min-width: 4.5rem; }
.repeat-table td > .input[readonly] { background: var(--uk-head); color: var(--uk-fg); box-shadow: none; text-align: right; }
.repeat-table .is-num, .repeat-table td > .input.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.repeat-table .col-check { width: 2rem; text-align: center; }
.repeat-table .col-repeat { width: 3rem; text-align: center; position: sticky; right: 0; z-index: 1; background: var(--uk-surface); } /* 표를 옆으로 밀어도 [＋]·[×]는 오른쪽 끝에 늘 보인다 */
.repeat-table .repeat-btn { width: 30px; height: 30px; min-width: 0; padding: 0; border-radius: 50%; }
.repeat-table .repeat-btn:is([data-repeat-add], .is-add) { background: var(--uk-surface); color: var(--uk-brand-dark); box-shadow: var(--uk-up-sm); } /* 입력하는 행 바탕(옅은 강조)과 겹치지 않게 떠 보이게 */
.repeat-table tfoot td { border-bottom: 0; font-weight: 700; }
.repeat-table tfoot .is-num { color: var(--uk-fg); }
.repeat-table-wrap { overflow-x: auto; }                      /* 휴대폰 - 칸이 많으면 표 상자 안에서 가로로 민다 */
.repeat-table-wrap > .repeat-table { min-width: 34rem; }
/* 옆으로 밀 것이 남았으면 오른쪽 끝 [＋]·[×] 칸 왼쪽에 그림자 - "표가 더 있다"가 보이게. form.js가 .is-scrollable을 달고, 끝까지 밀면 뗀다 (2026-10-05) */
.repeat-table-wrap.is-scrollable .repeat-table .col-repeat { box-shadow: -10px 0 10px -8px rgba(var(--uk-shc), .45); }
.repeat-group-title { margin: 14px 0 6px; font-size: 14px; font-weight: 700; }

/* ── 반응형 ── 휴대폰(767px 이하)은 라벨을 칸 위로, 두 칸 나란히는 한 칸으로 */
@media (max-width: 767px) {
  .input, .textarea, .select select { font-size: 16px; } /* 16px보다 작으면 아이폰이 칸을 누를 때 화면을 확대한다 */
  .form-row { flex-direction: column; align-items: stretch; gap: .2rem; }
  .form-row > * { flex: 0 0 auto !important; } /* 세로로 쌓이면 기본 폭(flex-basis)이 높이가 된다 - 칸이 눌리지 않게 */
  .form-row > .label,
  .form-row.is-top > .label { flex: 0 0 auto; line-height: 1.4; padding-top: 0; }
  .form-row > .error-message,
  .form-row > .form-help { margin: 0; }
  .form-panel.is-label-top { grid-template-columns: minmax(0, 1fr); }
  .filter-check.is-apart { margin-left: 0; }
  .form-actions .is-right { flex: 1 1 100%; }
  .form-actions .is-right > * { flex: 1 1 0; }
}