/* 상태 목록 아키타입 (모바일 재구성) — SC-M33 · SC-M34 · SC-M36 …
 *
 * 데스크톱은 표로 편다(채널 × 5열). 모바일에서 표를 카드로 접으면 열 이름이 반복돼 시끄럽다.
 * 캔버스가 답을 적어 뒀다 — "모바일은 상태와 조치만 본다".
 *
 * 그래서 한 줄에 셋만 둔다: 신호 · 이름 · 지금 수치.
 * 막힌 것은 목록에서 빼서 맨 위 조치 카드로 올린다. 섞으면 묻힌다.
 *
 * 클래스는 .ch-row / .sig / .down 으로 — .blk .grid .open .row 는 이미 쓰인다.
 */

.m--status .head { background: #fff; }
.m--status .hd-row { display: flex; align-items: center; justify-content: space-between;
                     padding: .55rem .9rem .45rem; }
.m--status .ttl { font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; }
.m--status .mini { min-height: 30px; display: inline-flex; align-items: center; padding: 0 .6rem;
                   border: 1px solid var(--grid); font-size: .72rem; color: var(--ink-2);
                   text-decoration: none; }
.m--status .stat { display: flex; flex-wrap: wrap; gap: .1rem .85rem; padding: 0 .9rem .55rem;
                   font-size: .72rem; color: var(--ink-3); }
.m--status .stat b { font-size: .9rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
/* 수치 뒤에 붙는 작은 단서 — H01 의 "30(실증)" 처럼 숫자만으로는 오해되는 값에 쓴다 */
.m--status .stat em { font-style: normal; font-size: .62rem; color: var(--ink-3); margin-left: .12rem; }
.m--status .stat .ok b { color: var(--live); }
.m--status .stat .warn, .m--status .stat .warn b { color: var(--wait-pay); }
.m--status .stat .bad, .m--status .stat .bad b { color: var(--alert); }

.m--status .plan { background: var(--sheet); }
.m--status section { padding: 0 0 .5rem; }
.m--status h2 { display: flex; align-items: baseline; gap: .35rem; margin: 1rem .9rem .35rem;
                font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.m--status h2 i { font-style: normal; font-weight: 500; letter-spacing: 0; }

/* 막힌 채널 — 조치까지 여기서 끝낸다 */
.m--status .down { margin: .7rem .9rem 0; padding: .65rem .8rem; background: #fdf1ee;
                   border-left: 3px solid var(--alert); }
.m--status .down .hd { display: block; font-size: .92rem; font-weight: 700; color: var(--alert);
                       letter-spacing: -.02em; }
.m--status .down .s { display: block; font-size: .72rem; color: #6d4038; line-height: 1.55;
                      margin-top: .25rem; }
.m--status .down .s b { font-weight: 700; }
.m--status .down .s.miss { color: #8a5a4e; }
.m--status .down .fix { display: block; width: 100%; min-height: 42px; margin-top: .5rem;
                        border: 0; background: var(--alert); color: #fff; font: inherit;
                        font-size: .85rem; font-weight: 700; cursor: pointer;
                        text-align: center; text-decoration: none; line-height: 42px; }

.m--status .down .undecided { display: block; width: 100%; min-height: 42px; margin-top: .5rem;
                              background: none; border: 1px dashed var(--ink-3); color: var(--ink-3);
                              font: inherit; font-size: .78rem; font-weight: 600; }

/* 채널 한 줄 — 신호 · 이름 · 지금 수치 */
.m--status .ch-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
                     align-items: center; gap: .55rem; min-height: 54px; padding: .5rem .9rem;
                     background: #fff; border-bottom: 1px solid var(--grid-2);
                     text-decoration: none; color: inherit; }
.m--status .sig { width: 9px; height: 9px; border-radius: 50%; background: var(--live);
                  justify-self: center; }
.m--status .sig.off { background: var(--alert); }
.m--status .sig.wait { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.m--status .ch-row .n { display: block; font-size: .88rem; font-weight: 700; letter-spacing: -.02em;
                        overflow: hidden; }
.m--status .ch-row .n em { display: block; font-style: normal; font-size: .68rem; font-weight: 400;
                           color: var(--ink-3); margin-top: .1rem; line-height: 1.4; }
.m--status .ch-row .v { text-align: right; font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
.m--status .ch-row .v b { font-size: 1.05rem; font-weight: 800; color: var(--ink);
                          letter-spacing: -.03em; margin-right: .05rem; }
.m--status .ch-row .v em { display: block; font-style: normal; font-size: .66rem; margin-top: .05rem; }
.m--status .ch-row.dead { background: #fdf7f5; }
.m--status .ch-row.dead .v b { color: var(--alert); }
.m--status .ch-row.idle .n, .m--status .ch-row.idle .v { color: var(--ink-3); }
.m--status .ch-row.idle .n { font-weight: 600; }

.m--status .fine { margin: .4rem .9rem 0; font-size: .68rem; color: var(--ink-3); line-height: 1.55; }
.m--status .fine a, .m--status .cutnote a { color: var(--live); font-weight: 700; }
.m--status .cutnote { margin: .9rem .9rem 0; padding: .55rem .7rem; background: #f4f2ee;
                      font-size: .7rem; line-height: 1.6; color: var(--ink-2); }
.m--status .cutnote b { color: var(--ink); font-weight: 700; }
.m--status .cutnote.soft { background: none; border: 1px dashed var(--grid); color: var(--ink-3); }
.m--status .pad { height: 2.5rem; }
.m--status .kx { opacity: .72; }

/* ── 오류 큐 (.m--queue) — SC-M34 · 같은 도메인이라 이 파일에 둔다
 *
 * 표 5열(발생·유형·내용·영향·조치)을 카드로 접지 않는다.
 * 모바일에서 중요한 건 둘이다 — 무엇을 망가뜨리고 있나, 무엇을 누르면 되나.
 * 그래서 영향을 제목처럼 크게 쓰고 조치 버튼을 항목마다 붙인다.
 */

.m--queue .head { background: #fff; }
.m--queue .hd-row { display: flex; align-items: center; justify-content: space-between;
                    padding: .55rem .9rem .45rem; }
.m--queue .ttl { font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; }
/* inline-flex 라 자식 사이 공백이 지워진다 — gap 으로 되살려야 "권한 위임 J-13" 이 붙지 않는다 */
.m--queue .mini { min-height: 30px; display: inline-flex; align-items: center; gap: .3rem;
                  padding: 0 .6rem;
                  border: 1px solid var(--grid); font-size: .72rem; color: var(--ink-2);
                  text-decoration: none; }
.m--queue .stat .ok, .m--queue .stat .ok b { color: var(--live); }
.m--queue .stat { display: flex; flex-wrap: wrap; gap: .1rem .85rem; padding: 0 .9rem .5rem;
                  font-size: .72rem; color: var(--ink-3); }
.m--queue .stat b { font-size: .9rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.m--queue .stat .bad, .m--queue .stat .bad b { color: var(--alert); }
.m--queue .stat .warn, .m--queue .stat .warn b { color: var(--wait-pay); }

.m--queue .filt { display: flex; gap: .25rem; padding: 0 .9rem .55rem; overflow-x: auto; }
.m--queue .filt button { flex: none; height: 30px; padding: 0 .65rem; border-radius: 999px;
                         border: 1px solid var(--grid); background: #fff; font: inherit;
                         font-size: .74rem; color: var(--ink-2); cursor: pointer; }
.m--queue .filt button.on { background: var(--ink); border-color: var(--ink); color: #fff;
                            font-weight: 600; }

.m--queue .plan { background: var(--sheet); padding-top: .7rem; }

.m--queue .err { display: block; margin: 0 .9rem .5rem; padding: .6rem .75rem .65rem;
                 background: #fff; border: 1px solid var(--grid); border-left: 3px solid var(--grid-2); }
.m--queue .err .when { font-size: .7rem; font-weight: 700; color: var(--ink-2); }
.m--queue .err .when em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.m--queue .err .kind { float: right; font-size: .66rem; font-weight: 600; color: var(--ink-3); }
.m--queue .err .hit { display: block; clear: both; font-size: .95rem; font-weight: 700;
                      letter-spacing: -.025em; color: var(--alert); margin-top: .3rem; }
.m--queue .err .hit.soft { color: var(--ink); }
.m--queue .err .what { display: block; font-size: .74rem; color: var(--ink-2); line-height: 1.55;
                       margin-top: .2rem; }
.m--queue .err .what b { font-weight: 700; color: var(--ink); }
.m--queue .err.bad { border-left-color: var(--alert); background: #fdf9f8; }

.m--queue .act { display: block; width: 100%; min-height: 40px; margin-top: .5rem; border: 0;
                 background: var(--ink); color: #fff; font: inherit; font-size: .82rem;
                 font-weight: 700; cursor: pointer; text-align: center; text-decoration: none;
                 line-height: 40px; }
.m--queue .err.bad .act { background: var(--alert); }
/* .go 는 "승인"이 아니라 "다른 화면으로 보낸다"는 표시다.
   .err.bad 안에서도 이 구분이 살아야 하므로 .bad .act 와 같은 특정도로 올린다 —
   안 그러면 배경만 빨갛게 남고 글자가 같은 색이 돼 버튼이 통째로 사라진다. */
.m--queue .err .act.go { background: #fff; color: var(--alert); border: 1px solid var(--alert);
                         line-height: 38px; }

.m--queue .rule { margin: .8rem .9rem 0; padding: .55rem .7rem; background: #f4f2ee;
                  font-size: .7rem; line-height: 1.6; color: var(--ink-2); }
.m--queue .rule b { color: var(--ink); font-weight: 700; }
.m--queue .rule a, .m--queue .miss-row a, .m--queue .sidenote a { color: var(--live); font-weight: 700; }
.m--queue .pad { height: 2.5rem; }
.m--queue .kx { opacity: .72; }

/* ── 근무·결원 (.m--shift) — SC-M27 · SC-D12 …
 *
 * 주간 격자는 캔버스가 이미 .dsk 로 데스크톱 전용 표시를 해 뒀다.
 * 모바일에서 이 화면을 여는 이유는 하나다 — 오늘 결원이 났고 예약이 걸려 있다.
 * 핵심 판단은 A-16: 지명 예약은 고객 동의가 필요해 자동 재배정에서 빼야 한다.
 * 일괄과 개별을 섞지 않는다 — 섞으면 일괄 버튼이 지명까지 삼킨다.
 */
.m--shift .head { background: #fff; }
.m--shift .hd-row { display: flex; align-items: center; justify-content: space-between;
                    padding: .35rem .6rem .35rem .25rem; }
.m--shift .nav { display: flex; align-items: center; }
.m--shift .step { width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
                  color: var(--ink-3); font-size: .8rem; }
.m--shift .wk { font-size: 1rem; font-weight: 700; letter-spacing: -.03em; }
.m--shift .mini { min-height: 30px; display: inline-flex; align-items: center; padding: 0 .6rem;
                  border: 1px solid var(--grid); font-size: .72rem; color: var(--ink-2);
                  text-decoration: none; }
.m--shift .stat { display: flex; flex-wrap: wrap; gap: .1rem .85rem; padding: 0 .9rem .5rem;
                  font-size: .72rem; color: var(--ink-3); }
.m--shift .stat b { font-size: .9rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.m--shift .stat .warn, .m--shift .stat .warn b { color: var(--wait-pay); }
.m--shift .stat .bad, .m--shift .stat .bad b { color: var(--alert); }

.m--shift .plan { background: var(--sheet); }
.m--shift .gap-alert { margin: .7rem .9rem .5rem; padding: .6rem .75rem; background: #fdf1ee;
                       border-left: 3px solid var(--alert); }
.m--shift .gap-alert .hd { display: block; font-size: .9rem; font-weight: 700; color: var(--alert);
                           letter-spacing: -.02em; }
.m--shift .gap-alert .s { display: block; font-size: .72rem; color: #6d4038; line-height: 1.55;
                          margin-top: .2rem; }
.m--shift .gap-alert b { font-weight: 700; }

.m--shift section { padding: .3rem 0 .6rem; }
.m--shift h2 { display: flex; align-items: baseline; gap: .35rem; margin: .8rem .9rem .35rem;
               font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.m--shift h2 i { font-style: normal; font-weight: 500; letter-spacing: 0; }

.m--shift .re { display: grid; grid-template-columns: 3rem minmax(0,1fr) auto; align-items: center;
                gap: .55rem; padding: .5rem .9rem; background: #fff;
                border-bottom: 1px solid var(--grid-2); }
.m--shift .re .tm { font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.m--shift .re .w { font-size: .84rem; font-weight: 600; }
.m--shift .re .w em { display: block; font-style: normal; font-size: .7rem; font-weight: 400;
                      color: var(--live); margin-top: .1rem; }
.m--shift .re .ok { font-size: .64rem; color: var(--ink-3); }
.m--shift .re .no { font-size: .66rem; font-weight: 700; color: var(--alert);
                    background: #fdf1ee; padding: .1rem .35rem; }
.m--shift .re.named { border-left: 3px solid var(--alert); background: #fdf9f8; }
.m--shift .re.dim { color: var(--ink-3); }
.m--shift .re.dim .w { font-weight: 400; color: var(--ink-3); }

.m--shift .act { display: block; width: calc(100% - 1.8rem); margin: .5rem .9rem 0; min-height: 44px;
                 border: 0; background: var(--ink); color: #fff; font: inherit; font-size: .84rem;
                 font-weight: 700; cursor: pointer; text-align: center; text-decoration: none;
                 line-height: 44px; }
.m--shift .act.call { background: #fff; color: var(--alert); border: 1px solid var(--alert); }

.m--shift .why { margin: .45rem .9rem 0; font-size: .7rem; color: var(--ink-2); line-height: 1.6; }
.m--shift .why b { color: var(--ink); font-weight: 700; }

.m--shift .ask { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .5rem .9rem;
                 background: #fff; border-bottom: 1px solid var(--grid-2);
                 text-decoration: none; color: inherit; }
.m--shift .ask .who { font-size: .86rem; font-weight: 700; }
.m--shift .ask .when { flex: 1; font-size: .74rem; color: var(--ink-2); }
.m--shift .ask .go { font-size: .74rem; color: var(--live); font-weight: 600; }

.m--shift .cutnote { margin: .9rem .9rem 0; padding: .55rem .7rem; background: #f4f2ee;
                     font-size: .7rem; line-height: 1.6; color: var(--ink-2); }
.m--shift .cutnote b { color: var(--ink); font-weight: 700; }
.m--shift .cutnote a { color: var(--live); font-weight: 700; }
.m--shift .kx { opacity: .72; }

/* SC-H01 전 매장 KPI 가 .m--queue 에 더하는 것 — 정상 매장은 숫자 한 줄로 접는다.
   490개가 되면 이상만 세우고 나머지를 접는 것이 유일하게 성립하는 방식이다 (16-M 0장). */
.m--queue .fine-list { padding: .5rem 0 0; }
.m--queue .fine-list h2 { display: flex; align-items: baseline; gap: .35rem; margin: .5rem .9rem .3rem;
                          font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.m--queue .fine-list h2 i { font-style: normal; font-weight: 500; letter-spacing: 0; }
.m--queue .ok-row { display: flex; align-items: baseline; gap: .6rem; padding: .5rem .9rem;
                    background: #fff; border-bottom: 1px solid var(--grid-2); }
.m--queue .ok-row .nm { font-size: .84rem; font-weight: 700; min-width: 4.5rem; }
.m--queue .ok-row .v { font-size: .84rem; font-weight: 700; color: var(--live); letter-spacing: -.02em; }
.m--queue .ok-row .r { flex: 1; text-align: right; font-size: .7rem; color: var(--ink-3); }
.m--queue .more { display: block; padding: .55rem .9rem; background: #fff; font-size: .76rem;
                  color: var(--live); font-weight: 600; text-decoration: none; }
.m--queue .rule.soft { background: none; border: 1px dashed var(--grid); color: var(--ink-3); }

/* SC-H05 온보딩 단계·폐점 항목이 .m--queue 에 더하는 것 */
.m--queue .steps { list-style: none; counter-reset: s; margin: .5rem 0 .3rem; padding: 0; }
.m--queue .steps li { counter-increment: s; position: relative; padding: .32rem 0 .32rem 1.7rem;
                      font-size: .74rem; color: var(--ink-3); line-height: 1.5; }
.m--queue .steps li::before { content: counter(s); position: absolute; left: 0; top: .32rem;
                              width: 1.2rem; height: 1.2rem; display: flex; align-items: center;
                              justify-content: center; font-size: .6rem; font-weight: 700;
                              border: 1px solid var(--grid); border-radius: 50%; }
.m--queue .steps li.ok { color: var(--ink-2); }
.m--queue .steps li.ok::before { content: "✓"; background: var(--live); border-color: var(--live);
                                 color: #fff; }
.m--queue .steps li.now { color: var(--ink); font-weight: 600; }
.m--queue .steps li.now::before { border-color: var(--alert); color: var(--alert); border-width: 1.5px; }
.m--queue .steps b { color: var(--alert); font-weight: 700; }

.m--queue .ends { list-style: none; margin: .5rem 0 .3rem; padding: 0; }
.m--queue .ends li { padding: .35rem 0 .35rem .7rem; border-left: 2px solid var(--grid);
                     font-size: .73rem; color: var(--ink-2); line-height: 1.55; margin-bottom: .2rem; }
.m--queue .ends b { color: var(--ink); font-weight: 700; }

.m--queue .sidenote { margin: .5rem 0 0; padding: .45rem .6rem; background: var(--sheet);
                      font-size: .68rem; color: var(--ink-2); line-height: 1.55; }
.m--queue .sidenote b { color: var(--ink); font-weight: 700; }
.m--queue .undecided { display: block; width: 100%; min-height: 42px; margin-top: .5rem;
                       border: 1px dashed var(--grid); background: none; font: inherit;
                       font-size: .8rem; color: var(--ink-3); cursor: default; }
.m--queue .undecided i { font-style: normal; font-size: .64rem; opacity: .8; margin-left: .25rem; }

/* SC-H08 "없는 기능" 목록 — 신규 후보를 화면에 남긴다 (16-J 5-2) */
.m--queue .miss-row { padding: .55rem .9rem; background: #fff; border-bottom: 1px solid var(--grid-2);
                      border-left: 3px solid var(--wait-pay); }
.m--queue .miss-row b { display: block; font-size: .84rem; font-weight: 700; color: #8a5a06; }
/* 후손 span 을 전부 block 으로 만들면 안쪽 .kx 가 제 줄을 차지한다 — 직계만 잡는다 */
.m--queue .miss-row > span { display: block; font-size: .72rem; color: var(--ink-2); line-height: 1.55;
                           margin-top: .15rem; }
.m--queue .miss-row span b { display: inline; font-size: inherit; color: var(--ink); }

/* SC-M09 대기자 — 동시 발송 후보 쌍과 워크인 줄 */
.m--queue .pair-wait { margin: .45rem 0; padding: .45rem .55rem; background: var(--sheet); }
.m--queue .pair-wait > div { padding: .25rem 0; font-size: .78rem; }
.m--queue .pair-wait b { font-weight: 700; margin-right: .3rem; }
.m--queue .pair-wait span { font-size: .7rem; color: var(--ink-2); }
.m--queue .wait-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem;
                      background: #fff; border-bottom: 1px solid var(--grid-2); }
.m--queue .wait-row .no { width: 1.4rem; height: 1.4rem; display: flex; align-items: center;
                          justify-content: center; background: var(--ink); color: #fff;
                          font-size: .68rem; font-weight: 700; border-radius: 50%; }
.m--queue .wait-row .w { flex: 1; font-size: .84rem; font-weight: 600; }
.m--queue .wait-row .w em { font-style: normal; font-size: .7rem; font-weight: 400; color: var(--ink-2); }
.m--queue .wait-row .eta { font-size: .74rem; color: var(--ink-3); }
.m--queue .wait-row .call { min-height: 32px; padding: 0 .7rem; border: 1px solid var(--live);
                            background: #fff; color: var(--live); font: inherit; font-size: .74rem;
                            font-weight: 700; cursor: pointer; }
.m--queue .err .what a { color: var(--live); font-weight: 700; }