/* 앱 셸 — 모든 데모 화면이 쓴다.
 *
 * 디자인 토큰 + 상단 고정 영역 + 스크롤 영역.
 * 화면 고유의 레이아웃은 별도 파일이 갖는다 (예: screen_timeline.css).
 *
 * /m/:id    화면 한 장 — 폰에서 열면 그대로 앱
 * /demo/:id 같은 화면을 폰에 끼우고 설명을 붙인 것 (.m--framed)
 */

.m {
  --wall: #f4f2ee;           /* 살롱 벽 */
  --sheet: #fbfaf7;
  --grid: #e6e2da;
  --grid-2: #efece5;
  --ink: #17191a;
  --ink-2: #5f6567;
  --ink-3: #9aa0a1;

  --live: #0f5f56;           /* 지금 진행 중 */
  --live-f: #d9ebe6;
  --set: #6f8fb5;            /* 확정 */
  --set-f: #e6edf5;
  --wait-pay: #b8860b;       /* 결제 대기 */
  --wait-pay-f: #f7efd9;
  --ask: #a8adae;            /* 요청 — 아직 내 것이 아니다 */
  --alert: #a8382a;

  position: relative;
  max-width: 414px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--sheet);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
  font-feature-settings: "tnum";
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(23,25,26,.08);
}

body:has(.m) { margin: 0; background: var(--wall, #f4f2ee); }
.m *, .m *::before, .m *::after { box-sizing: border-box; }
.m :focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }

/* ── 고정 머리 (168px) ───────────────────────────── */

.m .head { flex: none; background: #fff; border-bottom: 1px solid var(--grid); }

.m .net { display: flex; gap: .4rem; align-items: center; padding: .45rem .9rem;
          background: #212a2b; color: #cfdad9; font-size: .72rem; letter-spacing: -.01em; }
.m .net b { color: #fff; font-weight: 600; }
.m .net span { margin-left: auto; color: #7c8b8a; font-size: .66rem; }

/* 전역 토글 — 홈에서 끄면 배너가 한꺼번에 사라진다.
   화면마다 따로 끄지 않는 이유: 한 화면만 없으면 "이 화면은 오프라인을 안 다룬다"로 읽힌다.

   이름이 둘이다 — 손그림 파샬은 `.net`(62화면), 캔버스는 `.offline`(63장).
   처음에 .net 만 잡아 데스크톱 캔버스(/d · /demo 기본 뷰 · /wireframe)에서 배너가 그대로 남았다.
   .m · .pos · .mir · .m--canvas · .wide 셸 전부를 명시도로 함께 잡는다. */
body.net-off .net,
body.net-off .offline { display: none; }

.m .date { display: flex; align-items: center; justify-content: space-between; padding: .35rem .55rem .35rem .3rem; }
.m .date .step { width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
                 color: var(--ink-3); font-size: .82rem; }
.m .date .step:hover { color: var(--ink); }
.m .date .d { font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; }
.m .date .d em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.m .date .off { height: 34px; display: inline-flex; align-items: center; padding: 0 .75rem;
                border: 1px solid var(--grid); background: none; border-radius: 3px;
                font: inherit; font-size: .78rem; color: var(--ink-2);
                text-decoration: none; cursor: pointer; }
.m .date .off:hover { border-color: var(--ink-3); color: var(--ink); }

/* 갈 데가 아직 없는 것 — 매끈하게 채우면 정해진 것처럼 읽힌다 */
.m button.undecided { border-style: dashed !important; color: var(--ink-3) !important;
                      border-color: var(--grid) !important; cursor: default; }
.m button.undecided i { font-style: normal; font-size: .62rem; opacity: .75; margin-left: .25rem; }
.m button.undecided:hover { background: none !important; color: var(--ink-3) !important; }

/* 요약 — 빈 시간이 가장 큰 숫자다 */
.m .tally { display: flex; align-items: baseline; gap: 1.15rem; padding: .1rem .9rem .6rem; }
.m .tally div { display: flex; align-items: baseline; gap: .25rem; }
.m .tally i { font-style: normal; font-size: .7rem; color: var(--ink-3); }
.m .tally b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.03em; }
.m .tally .free { margin-left: auto; }
.m .tally .free b { color: var(--live); font-size: 1.25rem; }
.m .tally .free i { color: var(--live); }
.m .tally .care b { color: var(--alert); }

.m .tabs { display: flex; border-top: 1px solid var(--grid-2); }
.m .tabs button { flex: 1; height: 38px; border: 0; border-bottom: 2px solid transparent;
                  background: none; font: inherit; font-size: .8rem; color: var(--ink-3); cursor: pointer; }
.m .tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700;
                                        border-bottom-color: var(--live); }

/* 스크롤 영역 — 화면마다 내용이 다르다 */
.m .plan { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

/* 폰 프레임 안에 들어갈 때 (/demo/:id). 화면 자체는 그대로다 */
.m--framed { max-width: none; width: 100%; height: 100%; min-height: 0; box-shadow: none; }

/* 모바일 UX 미구성 표시 — 숨기면 "모바일도 다 됐다"고 읽힌다 */
.rework { flex: none; padding: .45rem .85rem; background: #6b4b12; color: #ffe9bd;
          font-size: .7rem; line-height: 1.45; letter-spacing: -.01em; }
.rework b { color: #fff; font-weight: 700; }