으로 한 쌍을 감싸는 것이 ★필수다(HTML5 는 dl 안의 div 를 허용한다).
감싸지 않고 dt·dd 를 늘어놓으면 grid 가 행 우선으로 채워서
★라벨과 값이 서로 다른 칸에 흩어진다(첫 판에서 실제로 그렇게 났다).
★auto-fit 이라 칸이 몇 개든 폭에 맞춰 자동 줄바꿈된다. 칸마다 CSS 를 쓰지 않는다. */
.rec-write-kv { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2px 18px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
padding:8px 14px 14px; margin:0; }
.rec-write-kv > div { min-width:0; padding:5px 0; }
.rec-write-kv dt { font-size:12px; color:var(--ink-soft); margin:0 0 4px; }
.rec-write-kv dt[data-required]::after { content:" *"; color:var(--recs); font-weight:bold; }
.rec-write-kv dd { font-size:13.5px; color:var(--ink); margin:0; word-break:break-word; }
.rec-write-kv dd > input, .rec-write-kv dd > select, .rec-write-kv dd > textarea {
width:100%; padding:8px 10px; border:1.5px solid var(--field); border-radius:7px;
font-size:13.5px; font-family:inherit; color:var(--ink); background:var(--surface); }
.rec-write-kv dd > input:focus, .rec-write-kv dd > select:focus,
.rec-write-kv dd > textarea:focus { border-color:var(--recs); outline:none; }
.rec-write-kv dd > input[readonly], .rec-write-kv dd > input:disabled {
background:var(--bg-soft); color:var(--ink-soft); }
.rec-write-kv dd > textarea { min-height:64px; resize:vertical; }
/* 긴 항목 1칸을 전 폭으로 */
.rec-write-kv > div[data-wide] { grid-column:1 / -1; }
/* ── (3) .rec-write-tbl — 반복행 표 (동적 행 추가형) ─────────────────────
★구조 계약 — 클래스는 ★감싸는
에 붙이고 그 안에
을 둔다.
★기존 .rec-xscroll 로 감싸지 마십시오. 그것은 폭 스크롤 컨테이너가 아니라
★높이 14px 의 「가로 스크롤바 막대」(.rec-xscroll-inner 와 짝)입니다.
첫 판에서 그것으로 감쌌다가 ★표가 14px 로 잘려 안 보였습니다(common.css 531행 실측).
표는 스스로 스크롤하지 못하므로 감싸는 div 가 필요합니다. 이름은 7종 안에서 씁니다. */
.rec-write-tbl { overflow-x:auto; overflow-y:visible; background:var(--surface);
border:1px solid var(--line); border-radius:10px; }
.rec-write-tbl > table { width:100%; border-collapse:collapse; font-size:13px; }
.rec-write-tbl thead th { background:var(--recs); color:var(--surface); font-weight:bold; text-align:left;
padding:9px 10px; white-space:nowrap; position:sticky; top:0; z-index:2; }
.rec-write-tbl tbody td { border-bottom:1px solid var(--line-2); padding:7px 10px;
color:var(--ink); vertical-align:top; }
.rec-write-tbl tbody tr:last-child td { border-bottom:none; }
.rec-write-tbl tbody td > input, .rec-write-tbl tbody td > select {
width:100%; min-width:90px; padding:6px 8px; border:1.5px solid var(--field); border-radius:6px;
font-size:13px; font-family:inherit; color:var(--ink); }
.rec-write-tbl tbody td > input:focus, .rec-write-tbl tbody td > select:focus {
border-color:var(--recs); outline:none; }
.rec-write-tbl tfoot td { padding:9px 10px; background:var(--recs-tint); font-size:12px;
color:var(--recs); font-weight:bold; }
.rec-write-tbl caption { caption-side:top; text-align:left; font-size:12px;
color:var(--ink-soft); padding:8px 10px 6px; }
/* 표 아래 조작 버튼(행 추가 등) — ★지시 20260816_10 §4-3.
클래스 신설이 아니라 기존 .rec-write-tbl 의 하위 태그로 잡는다(7종 유지). */
.rec-write-tbl tfoot button { font:inherit; font-size:12px; padding:5px 12px; border-radius:7px;
cursor:pointer; background:var(--surface); color:var(--recs); border:1px solid var(--recs-line); }
.rec-write-tbl tfoot button:hover { background:var(--recs-tint); }
/* ── (4) .rec-write-note — 비고·안내문 ──────────────────────────────────
★글자를 먹색으로 둔다(13.6841). 연한 바탕에 색 글자를 얹지 않는다 */
.rec-write-note { background:var(--recs-tint); border:1px solid var(--recs-line); border-left:4px solid var(--recs);
border-radius:8px; padding:10px 13px; font-size:12.5px; line-height:1.6;
color:var(--ink); margin:10px 0; }
.rec-write-note > b { color:var(--recs); }
.rec-write-note > ul { margin:5px 0 0 18px; }
/* ── (5) .rec-write-apv — 결재선 표시 ───────────────────────────────────
결재선 표준(설정 기반 · 기본 2종)을 ★읽어서 렌더하는 자리. 그림을 고정하지 않는다.
*/
.rec-write-apv { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:10px; margin:12px 0; }
.rec-write-apv > div { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--recs);
border-radius:9px; padding:9px 11px 11px; text-align:center; }
.rec-write-apv > div > b { display:block; font-size:11px; color:var(--ink-soft);
font-weight:normal; margin-bottom:3px; }
.rec-write-apv > div > span { display:block; font-size:13px; font-weight:bold; color:var(--recs); }
/* 서명·일자 자리 — 비어 있어도 높이를 지켜 배치가 흔들리지 않게 */
.rec-write-apv > div > i { display:block; height:34px; margin-top:5px; border-top:1px dashed var(--dash);
font-style:normal; font-size:11px; color:var(--ink-soft); line-height:34px; }
.rec-write-apv > div > i > img { max-height:30px; max-width:100%; vertical-align:middle; }
/* ── (6) .rec-write-store — 저장·제출 영역 ──────────────────────────────
★146칸 화면은 길다. 저장 줄이 화면 아래에 붙어 있어야 스크롤을 되돌리지 않는다 */
.rec-write-store { position:sticky; bottom:0; z-index:5;
display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-wrap:wrap;
background:var(--surface); border-top:2px solid var(--recs); border-radius:10px 10px 0 0;
padding:11px 14px; margin-top:18px; box-shadow:0 -4px 14px rgba(28,92,79,.10); }
.rec-write-store > p { margin:0 auto 0 0; font-size:12px; color:var(--ink-soft); }
.rec-write-store > p > b { color:var(--recs); }
.rec-write-store button { font:inherit; font-size:13px; padding:9px 18px; border-radius:8px;
cursor:pointer; background:var(--surface); color:var(--recs); border:1.5px solid var(--recs); }
.rec-write-store button[type="submit"] { background:var(--recs); color:var(--surface);
border-color:var(--recs); font-weight:bold; }
.rec-write-store button[type="submit"]:hover { background:var(--recs-d); border-color:var(--recs-d); }
.rec-write-store button:disabled { opacity:.5; cursor:not-allowed; }
/* ── (7) .rec-write-foot — 화면 꼬리(버튼 줄·부기) ───────────────────────*/
.rec-write-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
flex-wrap:wrap; border-top:1px solid var(--line-2); margin-top:16px; padding:12px 2px 26px;
font-size:11.5px; color:var(--ink-soft); }
.rec-write-foot > nav { display:flex; gap:8px; flex-wrap:wrap; }
.rec-write-foot > nav > a, .rec-write-foot > nav > button {
font:inherit; font-size:12px; padding:5px 12px; border-radius:7px; cursor:pointer;
text-decoration:none; background:var(--surface); color:var(--recs); border:1px solid var(--recs-line); }
/* ── 좁은 폭(모바일 390) ────────────────────────────────────────────────
★이전 회차에서 모바일 390 검수를 빠뜨린 적이 있어 처음부터 넣는다 */
@media (max-width:480px) {
.rec-write-kv { grid-template-columns:1fr; }
.rec-write-apv { grid-template-columns:1fr 1fr; }
.rec-write-store { position:static; border-radius:10px; box-shadow:none; }
/* 버튼 4개를 flex:1 로 한 줄에 두면 390px 에서 각 폭이 70px 대로 좁아진다.
★가로 넘침은 없다(실측 scrollWidth 390 · 넘침 0) — 넘침이 아니라 ★누르기 편하도록
42% 기준 2개씩 줄바꿈시킨다. 판단 근거는 사용성이고 결함 시정이 아니다. */
.rec-write-store > p { flex:1 1 100%; margin:0 0 4px; }
.rec-write-store button { flex:1 1 42%; min-width:0; padding:9px 10px; }
.rec-write-foot { flex-direction:column; align-items:flex-start; }
}
/* ★그리드·플렉스 칸이 내용 때문에 안 줄어드는 것을 막는다(넘침 방지 공통) */
.rec-write-apv > div, .rec-write-tbl, .rec-write-note { min-width:0; }