/* ================================================================ form.css — 이용후기 두 화면(face-attendance-review · login)의 **폼 부품 전부**. 담는 기준은 하나다: **선택자의 뿌리가 부품 이름이면 여기.** .rw-lb 라벨 줄 .f-in 칸 (상태·입력글씨·드롭다운 화살표·여러 줄 칸까지) .rw-withbtn 칸 + 옆 버튼 .f-msg 칸 아래 한 줄 과 그 안의 글자(.note · .danger · .ok) .ask-fields 본인 확인 모달의 칸 격자 한 화면에서만 쓰는 변형도 넣는다 — 안 쓰는 화면에서는 잠잘 뿐이다. 왜 이 기준인가: 전에는 「두 화면에 글자까지 똑같이 있으면 공통」이라 갈랐는데, 그러면 같은 부품이 두 파일에 걸쳐 놓인다. 실제로 .rw-lb label 을 후기 화면에만 고쳤다가 로그인 모달의 라벨 줄만 3px 높은 채로 남았다. 화면이 정하는 것은 화면 파일에 남겨 두었다 — 예를 들어 .ask-fields 의 위 여백은 후기 25px · 로그인 20px 로 다르다(격자 자체는 여기에 있다). ⚠ 견적 두 화면은 이 파일을 쓰지 않는다 — 그쪽은 quote-common.css 다. 다만 .f-msg > .note 구조는 같아졌으니, 다음에 두 제품을 합치면 이 파일이 네 화면 공통이 된다. ================================================================ */ /* 라벨 (피그마 '회사명' 프레임) */ .rw-lb{display:flex;align-items:center;gap:5px;min-height:19px;margin-bottom:5px} .rw-lb span{color:var(--ds-text-label);font-family:var(--font-pretendard);font-size:14px;font-weight:400;line-height:18px;letter-spacing:-.08px} .rw-lb em{font-style:normal;color:var(--main-blue);font-family:var(--font-pretendard);font-size:14px;font-weight:400} /* ========================================================= 입력 아톰 — 피그마 Text input_atomic / select-atomic padding 16/12 · radius 4 · 테두리 #CDD1D5 · Pretendard 17/22/-0.43 ========================================================= */ .f-in{display:flex;align-items:center;gap:var(--pad-4);padding:var(--pad-6) var(--pad-5); background:var(--main-white);border:1px solid var(--ds-border-subtle);border-radius:var(--rad-sm);transition:border-color .15s} .f-in:focus-within{border-color:var(--ds-border-selected)} .f-in.is-err{border-color:var(--danger);box-shadow:0 0 0 3px rgba(var(--danger-rgb),.09)} .f-in[data-disabled]{background:var(--ds-bg-disabled)} /* 칸 옆에 붙는 버튼 — 칸 안에 넣으면 버튼이 있는 칸만 높이가 달라져 줄이 어긋난다. align-items:stretch 라 버튼 높이가 칸(56)에 저절로 맞는다 */ .rw-withbtn{display:flex;align-items:stretch;gap:8px} .rw-withbtn .f-in{flex:1 0 0;min-width:0} .rw-withbtn .btn{flex:none;padding:0 16px;border-radius:var(--rad-sm);border:1px solid var(--main-blue); background:var(--main-blue);color:var(--main-white); font-family:var(--font-pretendard);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap} .rw-withbtn .btn:hover{background:#0E4CAA;border-color:#0E4CAA} /* 두 줄로 접힐 때 낱말 한가운데가 아니라 낱말 사이에서 끊기게 한다 — '…없습니 / 다.' 로 갈라지면 읽다 말고 다시 붙여 읽어야 한다 */ .f-msg .note{color:var(--ds-text-subtle);font-family:var(--font-pretendard);font-size:13px;font-weight:400;line-height:18px;letter-spacing:-.08px;word-break:keep-all} .f-msg .note.danger{color:var(--danger-text);font-size:12px;font-weight:600;line-height:1.5} .f-msg .note.ok{color:var(--main-blue)} .ask-fields>*,.ask-fields .f-in{min-width:0} .ask-fields .timer{flex:none;color:var(--main-blue);font-family:var(--font-body);font-size:14px;font-variant-numeric:tabular-nums} /* 칸 아래 한 줄 — 작성 폼의 .f-msg 를 그대로 쓴다. 자리를 미리 비워 두면 칸 사이가 늘 떠 보이므로, 말이 있을 때만 자리를 차지한다 */ .ask-fields .f-msg{margin-top:0} .ask-fields .f-msg .note{margin-top:8px;word-break:keep-all} .ask-fields .f-msg .note:empty{display:none} /* ── 한 화면에서만 쓰는 변형도 여기 둔다 ──────────────────── 이전에는 「두 화면에 글자까지 똑같이 있으면 공통」을 기준으로 갈랐다. 그러자 같은 부품이 두 파일에 걸쳐 놓였고, 한쪽만 고치면 다른 쪽이 조용히 뒤처졌다 — 실제로 .rw-lb label 을 후기 화면에만 고쳐 로그인 모달의 라벨 줄만 3px 높은 채로 남아 있었다. 이제 기준은 하나다: **선택자의 뿌리가 부품 이름이면 여기**. 한 화면에서만 쓰는 변형이어도 그렇다 — 안 쓰는 화면에서는 그냥 잠잘 뿐이고, 나중에 그 변형이 필요해지면 마크업만 써 주면 된다. */ /* ── 10. 입력 칸 ────────────────────────────────────────── */ /* 라벨을