/* 대시보드 아키타입 (모바일 재구성) — SC-M02 · SC-M20 · SC-H01 …
 *
 * 데스크톱은 카드 여럿을 격자에 편다. 모바일에서 그걸 그대로 쌓으면
 * "카드가 세로로 긴 목록"이 될 뿐 위계가 없다.
 *
 * 모바일 원칙 셋
 *   1. 할 일이 맨 위다 — 조회는 그다음이다
 *   2. 숫자 하나 + 진행 바. 구성 내역은 접는다
 *   3. 막대 여럿은 누적 바 하나로 — 하루가 한 줄이어야 한 눈에 든다
 */

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

.m--home .hd-row { display: flex; align-items: center; justify-content: space-between;
                   padding: .6rem .9rem .3rem; }
.m--home .day { font-size: 1.1rem; font-weight: 700; letter-spacing: -.03em; }
.m--home .day em { font-style: normal; font-weight: 500; color: var(--ink-3); font-size: .9rem; }
.m--home .bell { display: inline-flex; align-items: center; gap: .25rem; min-height: 32px;
                 padding: 0 .65rem; border: 1px solid var(--grid); border-radius: 999px;
                 font-size: .76rem; color: var(--ink-2); text-decoration: none; }
.m--home .bell b { color: var(--alert); font-weight: 700; }

/* 매출 — 큰 숫자 하나와 진행 바. 구성(시술·제품·회원권)은 상세 화면에 있다 */
.m--home .money { display: block; padding: .1rem .9rem .8rem; text-decoration: none; color: inherit; }
.m--home .money .lb { display: flex; align-items: baseline; gap: .3rem;
                      font-size: .7rem; color: var(--ink-3); }
.m--home .money .lb i { font-style: normal; font-size: .62rem; opacity: .7; }
.m--home .money .v { display: block; font-size: 1.85rem; font-weight: 800;
                     letter-spacing: -.05em; line-height: 1.15; }
.m--home .money .goal { display: block; height: 5px; border-radius: 3px;
                        background: var(--grid); margin: .35rem 0 .25rem; overflow: hidden; }
.m--home .money .goal i { display: block; height: 100%; background: var(--live); border-radius: 3px; }
.m--home .money .sub { font-size: .72rem; color: var(--ink-2); }
.m--home .money .sub b { font-weight: 700; color: var(--ink); }
.m--home .money .sub { display: block; }
.m--home .money .sub.dim { color: var(--ink-3); font-size: .68rem; margin-top: .3rem; line-height: 1.5; }
.m--home .money .sub.dim a { color: var(--live); font-weight: 700; }

.m--home .plan { padding-bottom: 2.5rem; }

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

/* 할 일 — 각 행이 다른 화면으로 간다. 44px 이상, 한 손 엄지로 %>*/
.m--home .todo { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                 gap: .05rem .6rem; min-height: 56px; align-content: center;
                 padding: .5rem .75rem; margin-bottom: .35rem; background: #fff;
                 border: 1px solid var(--grid); text-decoration: none; color: inherit;
                 position: relative; }
.m--home .todo::after { content: "›"; position: absolute; right: .55rem; top: 50%;
                        transform: translateY(-50%); color: var(--ink-3); font-size: 1rem; }
.m--home .todo .when { grid-column: 1; font-size: .66rem; font-weight: 600; color: var(--ink-3); }
.m--home .todo .what { grid-column: 1; font-size: .9rem; font-weight: 700; letter-spacing: -.02em;
                       padding-right: 1rem; }
.m--home .todo .who { grid-column: 1; font-size: .72rem; color: var(--ink-2); padding-right: 1rem; }
.m--home .todo.urgent { border-left: 3px solid var(--alert); background: #fdf7f5; }
.m--home .todo.urgent .when { color: var(--alert); }

/* 예약 흐름 — 하루가 한 줄 */
.m--home .track { display: flex; gap: 2px; height: 26px; margin-bottom: .45rem; }
.m--home .track i { display: flex; align-items: center; justify-content: center;
                    font-style: normal; border-radius: 2px; }
.m--home .track i b { font-size: .68rem; font-weight: 700; color: #fff; }
.m--home .track .done { background: #93a8a4; }
.m--home .track .live { background: var(--live); }
.m--home .track .set { background: var(--set); }
.m--home .track .pay { background: var(--wait-pay); }
.m--home .track .ask { background: var(--ask); }

.m--home .legend { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem .7rem;
                   margin: 0 0 .5rem; padding: 0; }
.m--home .legend li { display: flex; align-items: center; gap: .25rem;
                      font-size: .68rem; color: var(--ink-2); }
.m--home .legend i { width: 8px; height: 8px; border-radius: 2px; }
.m--home .legend .done { background: #93a8a4; }
.m--home .legend .live { background: var(--live); }
.m--home .legend .set { background: var(--set); }
.m--home .legend .pay { background: var(--wait-pay); }
.m--home .legend .ask { background: var(--ask); }

.m--home .more { display: block; min-height: 40px; padding: .6rem .75rem; background: #fff;
                 border: 1px solid var(--grid); font-size: .76rem; color: var(--ink-2);
                 text-decoration: none; }
.m--home .more::after { content: " ›"; color: var(--ink-3); }

/* 이상 변동 — 카드가 아니라 경고다 */
.m--home .alarm { display: flex; align-items: center; gap: .7rem; margin: .9rem .9rem 0;
                  padding: .65rem .8rem; background: #fdf1ee; border-left: 3px solid var(--alert);
                  text-decoration: none; color: inherit; }
.m--home .alarm .delta { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em;
                         color: var(--alert); }
.m--home .alarm .txt { font-size: .72rem; line-height: 1.5; color: var(--ink-2); }
.m--home .alarm .txt b { color: var(--ink); font-weight: 700; }

.m--home .sug { display: block; padding: .55rem .75rem; margin-bottom: .35rem; background: #fff;
                border: 1px solid var(--grid); font-size: .78rem; color: var(--ink-2);
                text-decoration: none; line-height: 1.5; }
.m--home .sug b { color: var(--ink); font-weight: 700; margin-right: .2rem; }
.m--home .fine { margin: .3rem 0 0; font-size: .68rem; color: var(--ink-3); line-height: 1.5; }

.m--home .kx { opacity: .7; }
/* 본문 속 링크 — 규칙이 없으면 링크가 안 보인다 (SC-D08 에서 .ex/.kpi 안에 처음 넣음) */
.m--home .excl .ex a, .m--home .kpi .w a { color: var(--live); font-weight: 700; }

/* ── SC-M20 매출 대시보드가 더 쓰는 것 ─────────────
 * 숫자를 믿기 전에 알아야 하는 것(집계 제외·미결 기준)을 접지 않는다.
 * 캔버스 0장: "집계 기준이 흔들리면 전부 흔들린다".
 */
.m--home .mbars { display: grid; gap: .3rem; margin-bottom: .5rem; }
.m--home .mbars > div { display: grid; grid-template-columns: 2.2rem minmax(0,1fr) auto;
                        align-items: center; gap: .45rem; font-size: .72rem; color: var(--ink-2); }
.m--home .mbars em { font-style: normal; }
.m--home .mbars i { display: block; height: 8px; border-radius: 3px; background: #b9d5cf; }
.m--home .mbars i.now { background: var(--live); }
.m--home .mbars b { font-size: .78rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }

.m--home .kpi { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .1rem .5rem;
                padding: .55rem .75rem; margin-bottom: .35rem; background: #fff;
                border: 1px solid var(--grid); }
.m--home .kpi .n { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.m--home .kpi .v { font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; text-align: right; }
.m--home .kpi .v em { font-style: normal; font-size: .78rem; font-weight: 600; }
.m--home .kpi .w { grid-column: 1 / -1; font-size: .68rem; color: var(--wait-pay);
                   line-height: 1.5; margin-top: .15rem; }
.m--home .kpi .w b { font-weight: 700; }

.m--home .excl .ex { padding: .5rem .75rem; margin-bottom: .3rem; background: #fff;
                     border-left: 3px solid var(--grid-2); font-size: .73rem;
                     color: var(--ink-2); line-height: 1.55; }
.m--home .excl .ex b { color: var(--ink); font-weight: 700; }
.m--home .excl .ex.hold { border-left-color: var(--wait-pay); background: #fdfaf2; }