/* 패널 아키타입 (모바일 재구성) — SC-M07 · SC-M11 · SC-D02 …
 *
 * 캔버스: "캘린더를 벗어나지 않고 확인·조치가 끝나야 한다."
 * 데스크톱은 캘린더 옆에 패널로 뜨지만 모바일에는 옆이 없다 — 전체 화면이 된다.
 * 그래서 카드를 쌓는 대신 순서를 다시 짠다: 조심할 것 → 무엇을 하는가 → 누구인가 → 돈.
 * 조치는 하단 고정. 확인하고 바로 누르는 화면이지 읽는 화면이 아니다.
 *
 * 클래스는 .risk / .box / .two / .mini-box 로 (.blk .grid .open .card 는 이미 쓰인다).
 */

.m--panel .head { background: #fff; }
.m--panel .hd-row { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem .45rem .5rem; }
.m--panel .back { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
                  font-size: 1.4rem; color: var(--ink-3); text-decoration: none; }
.m--panel .ttl { flex: 1; font-size: .95rem; font-weight: 500; letter-spacing: -.02em; color: var(--ink-2); }
.m--panel .ttl b { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.m--panel .badge { font-size: .68rem; font-weight: 700; padding: .15rem .45rem;
                   background: var(--set-f); color: var(--set); }
.m--panel .stat { display: flex; flex-wrap: wrap; gap: .1rem .8rem; padding: 0 .9rem .55rem;
                  font-size: .72rem; color: var(--ink-3); }
.m--panel .stat b { font-weight: 700; color: var(--ink); }
.m--panel .stat .ok { color: var(--live); }

.m--panel .plan { background: var(--sheet); }

/* 조심할 것 — 맨 위, 색은 심각도에 */
.m--panel .risk { margin: .7rem .9rem .5rem; padding: .55rem .75rem; background: #fdfaf2;
                  border-left: 3px solid var(--wait-pay); }
.m--panel .risk.bad { background: #fdf1ee; border-left-color: var(--alert); }
.m--panel .risk .hd { display: block; font-size: .88rem; font-weight: 700; letter-spacing: -.02em;
                      color: #8a5a06; }
.m--panel .risk.bad .hd { color: var(--alert); }
.m--panel .risk .s { display: block; font-size: .72rem; color: var(--ink-2); line-height: 1.55;
                     margin-top: .15rem; }
.m--panel .risk .s b { font-weight: 700; color: var(--ink); }
.m--panel .risk .s.dim { color: var(--ink-3); }

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

.m--panel .box { display: block; margin: 0 .9rem; padding: .6rem .75rem .65rem; background: #fff;
                 border: 1px solid var(--grid); text-decoration: none; color: inherit; }
.m--panel .box.link { position: relative; }
.m--panel .box.link::after { content: "›"; position: absolute; right: .6rem; top: .55rem;
                             color: var(--ink-3); font-size: 1rem; }
.m--panel .big { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.035em; }
.m--panel .big2 { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.025em;
                  padding-right: 1rem; }
.m--panel .big2 em { font-style: normal; font-size: .72rem; font-weight: 400; color: var(--ink-3); }
.m--panel .box .sub { display: block; font-size: .74rem; color: var(--ink-2); margin-top: .15rem;
                      line-height: 1.5; }
.m--panel .box .sub.dim { color: var(--ink-3); font-size: .68rem; }

/* 방치 — 색이 아니라 질감. 전 화면과 같은 관용구 */
.m--panel .rest { margin-top: .5rem; padding: .45rem .6rem; border: 1px dashed #c9d3d1;
                  background: repeating-linear-gradient(-45deg, #edf0ef 0 5px, transparent 5px 11px); }
.m--panel .rest .t { display: block; font-size: .78rem; font-weight: 700; color: #4f6260; }
.m--panel .rest .s { display: block; font-size: .7rem; color: #7d8d8b; margin-top: .1rem; }
.m--panel .rest .s b { color: #3f5250; }

.m--panel .two { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .4rem .9rem 0; }
.m--panel .mini-box { display: block; padding: .5rem .6rem; background: #fff;
                      border: 1px solid var(--grid); text-decoration: none; color: inherit; }
.m--panel .mini-box em { display: block; font-style: normal; font-size: .64rem; color: var(--ink-3); }
.m--panel .mini-box b { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.03em;
                        margin: .05rem 0 .1rem; }
.m--panel .mini-box > span { display: block; font-size: .64rem; color: var(--ink-3); line-height: 1.45; }

.m--panel .note { margin: 0 .9rem .3rem; padding: .5rem .7rem; background: #fff;
                  border-left: 3px solid var(--grid-2); font-size: .72rem; color: var(--ink-2);
                  line-height: 1.55; }
.m--panel .note b { color: var(--ink); font-weight: 700; }
.m--panel .note.warn { border-left-color: var(--wait-pay); background: #fdfaf2; }

.m--panel .fbar { position: sticky; bottom: 0; display: flex; gap: .4rem; padding: .5rem .9rem;
                  background: #fff; border-top: 1px solid var(--grid); }
.m--panel .s-act { flex: 1; min-height: 44px; display: inline-flex; align-items: center;
                   justify-content: center; border: 1px solid var(--grid); font-size: .8rem;
                   color: var(--ink-2); text-decoration: none; }
.m--panel .pay { flex: 1.2; min-height: 44px; display: inline-flex; align-items: center;
                 justify-content: center; background: var(--live); color: #fff; font-size: .86rem;
                 font-weight: 700; text-decoration: none; }
.m--panel .kx { opacity: .72; }

/* ── SC-M11 고객 카드가 더 쓰는 것 (.m--card) ──────
 * 데스크톱은 탭 여덟 + 카드 여덟. 414px 에서 탭 여덟을 가로로 흘리면 뒤쪽 넷은 없는 것과 같다.
 * 탭을 앵커 칩으로 바꾸고 섹션을 세로로 잇는다 — 스크롤이 탭보다 낫다.
 */
.m--card .ttl b { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.m--card .ttl em { font-style: normal; font-size: .72rem; color: var(--ink-3); }
.m--card .badge-link { min-height: 32px; display: inline-flex; align-items: center; padding: 0 .7rem;
                       background: var(--live); color: #fff; font-size: .78rem; font-weight: 600;
                       text-decoration: none; }

.m--card .anchors { display: flex; align-items: center; gap: .25rem; padding: 0 .9rem .55rem;
                    overflow-x: auto; }
.m--card .anchors a { flex: none; height: 30px; display: inline-flex; align-items: center;
                      padding: 0 .65rem; border-radius: 999px; border: 1px solid var(--grid);
                      font-size: .74rem; color: var(--ink-2); text-decoration: none; }
.m--card .anchors a.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.m--card .anchors .rest { flex: none; font-size: .62rem; color: var(--ink-3); margin-left: .2rem; }

.m--card .risk .do { display: block; margin-top: .45rem; min-height: 38px; line-height: 38px;
                     text-align: center; background: #fff; border: 1px solid var(--wait-pay);
                     color: #8a5a06; font-size: .78rem; font-weight: 700; text-decoration: none; }

.m--card .line { display: grid; grid-template-columns: 3.2rem minmax(0,1fr) auto; align-items: center;
                 gap: .5rem; padding: .55rem .9rem; background: #fff;
                 border-bottom: 1px solid var(--grid-2); text-decoration: none; color: inherit; }
.m--card .line .dt { font-size: .7rem; font-weight: 700; color: var(--ink-3); }
.m--card .line .what { font-size: .82rem; font-weight: 600; }
.m--card .line .what em { display: block; font-style: normal; font-size: .68rem; font-weight: 400;
                          color: var(--ink-2); margin-top: .1rem; }
.m--card .line .go { font-size: .66rem; color: var(--live); font-weight: 600; white-space: nowrap; }
.m--card .line.warn { background: #fdfaf2; }

.m--card .agrees { display: flex; flex-wrap: wrap; gap: .3rem; }
.m--card .agrees b { font-size: .74rem; font-weight: 600; padding: .2rem .5rem;
                     background: #f2f8f6; color: var(--live); }
.m--card .agrees b.no { background: #fdf1ee; color: var(--alert); }

/* 권한으로 가려진 블록 — 없는 것이 아니라 못 보는 것임이 보여야 한다 (SC-D03 · J-08) */
.m--panel .box.locked { background: repeating-linear-gradient(-45deg,
                          #f4f2ee 0 6px, #fff 6px 13px); border-style: dashed; }
.m--panel .box.locked .big2 { color: var(--ink-2); }