/* 폼 아키타입 (모바일 재구성) — SC-M06 · SC-M08 · SC-M24 …
 *
 * 데스크톱은 라벨을 왼쪽 열로 두고 2열로 편다.
 * 모바일에서 필드를 평평하게 쌓으면 스크롤만 길고 어디까지 했는지 모른다.
 *
 * 모바일 원칙 셋
 *   1. 필드를 묶는다 — 누가 · 무엇을 · 언제 · 결제. 섹션이 진행감을 준다
 *   2. 막는 것(충돌)은 상단으로 끌어올린다. 스크롤하다 만나면 늦다
 *   3. 저장은 하단 고정. 막힌 이유도 거기서 말한다
 */

.m--form .head { background: #fff; }

.m--form .hd-row { display: flex; align-items: center; justify-content: space-between;
                   padding: .55rem .9rem .5rem; }
.m--form .ttl { font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; }
.m--form .quit { font-size: .8rem; color: var(--ink-3); text-decoration: none; padding: .3rem; }

/* 막는 것은 맨 위에서 만난다 */
.m--form .alarm { display: block; padding: .5rem .9rem; background: #fdf1ee;
                  border-top: 1px solid #f0d9d3; border-bottom: 1px solid #f0d9d3;
                  font-size: .74rem; line-height: 1.5; color: #6d4038; text-decoration: none; }
.m--form .alarm b { color: var(--alert); font-weight: 700; }
.m--form .alarm span { color: var(--alert); font-weight: 600; white-space: nowrap; }

.m--form .stat { display: flex; flex-wrap: wrap; gap: .1rem .8rem; padding: .45rem .9rem;
                 font-size: .74rem; color: var(--ink-2); }
.m--form .stat .lead { font-weight: 700; color: var(--ink); }
.m--form .stat .warn { color: var(--wait-pay); font-weight: 600; }

.m--form .plan { background: var(--sheet); }
.m--form section { padding: .3rem 0 .5rem; }
.m--form h2 { margin: .9rem .9rem .3rem; font-size: .7rem; font-weight: 700;
              letter-spacing: .08em; color: var(--ink-3); }
.m--form h2 i { font-style: normal; font-weight: 500; letter-spacing: 0; }

/* 필드 — 라벨 위, 값 아래. 44px 이상 */
.m--form .f { display: block; padding: .5rem .9rem .6rem; background: #fff;
              border-bottom: 1px solid var(--grid-2); }
.m--form .f .k { display: block; font-size: .72rem; font-weight: 600; color: var(--ink-2);
                 margin-bottom: .25rem; }
.m--form .f .k i { font-style: normal; color: var(--alert); }
.m--form .f .v { display: flex; align-items: center; gap: .4rem; min-height: 42px;
                 padding: 0 .6rem; border: 1px solid var(--line-2, #d8d3c8); background: #fff;
                 font-size: .88rem; }
.m--form .f .v em { font-style: normal; font-size: .68rem; color: var(--ink-3);
                    border: 1px solid var(--grid); padding: .02rem .28rem; }
.m--form .f .v.filled { border-color: var(--live); box-shadow: inset 0 0 0 1px rgba(15,95,86,.25); }
.m--form .f .v.empty { color: var(--ink-3); border-style: dashed; }
.m--form .f .h { display: block; font-size: .68rem; color: var(--ink-3); line-height: 1.5;
                 margin-top: .25rem; }
.m--form .f.bad { background: #fdf7f5; }

.m--form .mini { flex: none; margin-left: auto; min-height: 30px; display: inline-flex;
                 align-items: center; padding: 0 .6rem; border: 1px solid var(--grid);
                 background: var(--sheet); font-size: .72rem; color: var(--ink-2);
                 text-decoration: none; }
.m--form .mini.full { display: flex; justify-content: center; margin: .4rem 0 0;
                      min-height: 38px; border-color: var(--live); color: var(--live);
                      font-weight: 600; background: #fff; }

/* 선택지 — 라디오는 칩으로 */
.m--form .seg { display: flex; flex-wrap: wrap; gap: .25rem; }
.m--form .seg b { min-height: 36px; display: inline-flex; align-items: center; padding: 0 .7rem;
                  border: 1px solid var(--grid); background: #fff; font-size: .78rem;
                  font-weight: 500; color: var(--ink-2); }
.m--form .seg b.on { background: var(--live); border-color: var(--live); color: #fff; font-weight: 600; }
.m--form .seg.multi b.on { background: #fff; border-color: var(--live); color: var(--live); }
.m--form .seg.multi b.on::before { content: "✓ "; }

/* 계산 결과 — 입력이 아니라 결과다. 다르게 보여야 한다 */
.m--form .calcbox { margin: .5rem .9rem; padding: .55rem .7rem; background: #f2f8f6;
                    border-left: 3px solid var(--live); }
.m--form .calcbox .big { font-size: 1.3rem; font-weight: 800; letter-spacing: -.04em;
                         color: var(--live); margin-right: .4rem; }
.m--form .calcbox .rng { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.m--form .calcbox .eq { display: block; font-size: .68rem; color: var(--ink-2); margin-top: .25rem; }
.m--form .calcbox .ok { display: block; font-size: .68rem; color: #3f7a6f; margin-top: .2rem;
                        line-height: 1.5; }

/* 방치 — 색이 아니라 질감. 전 화면과 같은 관용구다 */
.m--form .restbox { margin: 0 .9rem .5rem; padding: .5rem .7rem; border: 1px dashed #c9d3d1;
                    background: repeating-linear-gradient(-45deg, #edf0ef 0 5px, transparent 5px 11px); }
.m--form .restbox .t { display: block; font-size: .8rem; font-weight: 700; color: #4f6260; }
.m--form .restbox .s { display: block; font-size: .68rem; color: #7d8d8b; margin-top: .15rem;
                       line-height: 1.5; }

.m--form .clash { padding: .5rem .6rem; background: #fdf1ee; border-left: 3px solid var(--alert); }
.m--form .clash b { display: block; font-size: .8rem; color: var(--alert); }
.m--form .clash > span { display: block; font-size: .7rem; color: #6d4038; margin-top: .2rem; }
.m--form .clash > span b { display: inline; }

.m--form .pad { height: 4rem; }

/* 저장은 손에 닿는 곳에. 막힌 이유도 여기서 말한다 */
.m--form .fbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: .6rem;
                 padding: .55rem .9rem; background: #fff; border-top: 1px solid var(--grid); }
.m--form .fbar .warnline { flex: 1; font-size: .7rem; color: var(--alert); }
.m--form .fbar .save { min-height: 44px; padding: 0 1.4rem; border: 0; background: var(--live);
                       color: #fff; font: inherit; font-size: .88rem; font-weight: 700;
                       cursor: pointer; }

.m--form .kx { opacity: .72; }

/* ── SC-M08 취소·노쇼가 더 쓰는 것 (.m--cancel) ─────
 * 16-A 5-1: 취소와 노쇼는 트리거가 달라 분리 후보다.
 * 구분 선택이 화면 전체의 의미를 바꾸므로 맨 위에 크게 놓고,
 * 지금 고른 값 때문에 실효가 없어진 부분은 회색으로 눌러 그 사실을 보인다.
 */
.m--cancel .pick { display: grid; gap: .35rem; padding: 0 .9rem; }
.m--cancel .pick button { display: block; width: 100%; min-height: 52px; padding: .5rem .75rem;
                          text-align: left; border: 1px solid var(--grid); background: #fff;
                          font: inherit; cursor: pointer; }
.m--cancel .pick b { display: block; font-size: .92rem; font-weight: 700; letter-spacing: -.02em; }
.m--cancel .pick span { display: block; font-size: .68rem; color: var(--ink-3); margin-top: .1rem; }
.m--cancel .pick button.on { background: var(--ink); border-color: var(--ink); }
.m--cancel .pick button.on b { color: #fff; }
.m--cancel .pick button.on span { color: #b8bfbf; }
.m--cancel .h { margin: .4rem .9rem 0; font-size: .68rem; color: var(--ink-3); line-height: 1.55; }

/* 지금 고른 값 때문에 의미가 흐려진 영역 */
.m--cancel .f.muted { opacity: .55; }
.m--cancel .split { margin: .4rem .9rem 0; padding: .55rem .7rem; background: #fdfaf2;
                    border-left: 3px solid var(--wait-pay); }
.m--cancel .split b { display: block; font-size: .78rem; color: #8a5a06; font-weight: 700; }
.m--cancel .split > span { display: block; font-size: .7rem; color: var(--ink-2); line-height: 1.55;
                         margin-top: .2rem; }
.m--cancel .split > span b { display: inline; font-size: inherit; color: var(--ink); }

/* ── SC-M24 캠페인 발송이 더 쓰는 것 (.m--send) ─────
 * 15번 4장 8번: "발송 버튼이 있는 화면은 결과 경로를 함께 그린다."
 * 발송은 되돌릴 수 없다 — 누구에게 가고 누가 빠졌는지를 맨 위 숫자로 세운다.
 */
.m--send .who-box { margin: .7rem .9rem .5rem; padding: .7rem .8rem; background: #fff;
                    border: 1px solid var(--grid); border-left: 3px solid var(--live); }
.m--send .who-box .lb { font-size: .7rem; color: var(--ink-3); }
.m--send .who-box .big { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.05em;
                         line-height: 1.15; }
.m--send .who-box .big em { font-style: normal; font-size: .9rem; font-weight: 700; margin-left: .1rem; }
.m--send .who-box .from { display: block; font-size: .72rem; color: var(--ink-2); }
.m--send .cut { list-style: none; margin: .5rem 0 .35rem; padding: .45rem .55rem; background: var(--sheet); }
.m--send .cut li { font-size: .7rem; color: var(--ink-2); line-height: 1.7; }
.m--send .cut b { font-weight: 700; color: var(--alert); }
.m--send .who-box .fine { display: block; font-size: .66rem; color: var(--ink-3); line-height: 1.5; }

.m--send .v.msg { min-height: 60px; align-items: flex-start; padding-top: .5rem;
                  font-size: .8rem; line-height: 1.5; }
.m--send .split { margin: .4rem .9rem 0; padding: .55rem .7rem; background: #fdfaf2;
                  border-left: 3px solid var(--wait-pay); }
.m--send .split > b { display: block; font-size: .78rem; color: #8a5a06; font-weight: 700; }
.m--send .split > span { display: block; font-size: .7rem; color: var(--ink-2); line-height: 1.55;
                       margin-top: .2rem; }
.m--send .split > span b { display: inline; font-size: inherit; color: var(--ink); }
.m--send .calcbox .ok.warn2 { color: var(--wait-pay); }
.m--send .fbar .save { display: inline-flex; align-items: center; text-decoration: none; }

/* ── SC-M01 로그인이 더 쓰는 것 (.m--login) ─────
 * 로그인은 폼이지만 머리에 붙는 것이 제목이 아니라 제품 이름이다.
 * 이 화면의 진짜 내용은 아이디·비밀번호가 아니라 **계정 공유를 막지 못하면
 * 감사 로그와 교대 시재가 무의미해진다**는 것이다 (16-N 3-3). 그건 폼 아래 경고로 세운다.
 */
.m--login .brand { padding: 2.2rem .9rem 1.4rem; background: #fff;
                   border-bottom: 1px solid var(--grid-2); }
.m--login .brand b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.05em;
                     line-height: 1; }
.m--login .brand b em { font-style: normal; font-weight: 200; }
.m--login .brand span { display: block; font-size: .68rem; color: var(--ink-3); margin-top: .4rem;
                        letter-spacing: .06em; }
.m--login .fbar .save { width: 100%; }
.m--login .clash .undecided { display: block; width: 100%; min-height: 40px; margin-top: .5rem;
                              background: none; border: 1px dashed var(--alert); color: #8a5a4e;
                              font: inherit; font-size: .76rem; font-weight: 600; }
.m--login .fine { margin: .9rem .9rem 0; padding: .55rem .7rem; background: #f4f2ee;
                  font-size: .7rem; line-height: 1.7; color: var(--ink-2); }
.m--login .fine a { color: var(--live); font-weight: 700; }
.m--form .fine { margin: .4rem .9rem .3rem; font-size: .68rem; color: var(--ink-3); line-height: 1.55; }
.m--form .fine b { color: var(--ink-2); font-weight: 600; }
.m--form .fine a, .m--form .f .h a { color: var(--live); font-weight: 700; }

/* 검토에서 나온 캔버스 결함 노트 — 경고(.clash 빨강)가 아니라 "사람이 정해야 할 것"이라 주황을 쓴다.
   M14·M16(.rulebox soft) · D16(.cutnote soft)과 같은 급 (SC-D07) */
.m--form .findnote { margin: .7rem .9rem 0; padding: .6rem .8rem; background: #fdfaf2;
                     border-left: 3px solid var(--wait-pay); font-size: .72rem;
                     line-height: 1.6; color: var(--ink-2); }
.m--form .findnote > b { display: block; font-size: .8rem; color: #8a5a06; margin-bottom: .2rem; }
.m--form .findnote b { color: var(--ink); font-weight: 700; }
.m--form .findnote a { color: var(--live); font-weight: 700; }