/* 거울앞 태블릿 셸 (손그림 전용) — 1024 × 654 가로 · SC-C01 ~ C04
 *
 * 지금까지의 모든 화면과 관객이 다르다 — **고객이 직접 본다** (16-L L-07).
 * 그래서 셸부터 다르다:
 *   글자가 크다 — 의자에 앉아 팔 길이 밖에서 읽는다
 *   조작이 적다 — 큰 버튼 몇 개가 전부다 (터치 56px 이상)
 *   내부 정보가 없다 — 노쇼·메모·정산은 여기 절대 띄우지 않는다 (M07 · A-14 · B-12)
 *
 * .note 는 고객용 문안이 아니라 설계 주석이다 — 데모 관객(관계사)에게만 말한다.
 * 폰 셸(.m)과 이름이 겹치지 않게 루트를 .mir 로 둔다.
 */

.mir {
  --wall: #f4f2ee;
  --sheet: #fbfaf7;
  --grid: #e6e2da;
  --grid-2: #efece5;
  --ink: #17191a;
  --ink-2: #5f6567;
  --ink-3: #9aa0a1;
  --live: #0f5f56;
  --alert: #a8382a;
  --wait-pay: #b8860b;

  position: relative;
  max-width: 1024px;
  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(.mir) { margin: 0; background: var(--wall, #f4f2ee); }
.mir *, .mir *::before, .mir *::after { box-sizing: border-box; }
.mir :focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
.mir--framed { max-width: none; width: 100%; height: 100%; min-height: 0; box-shadow: none; }

/* ── 머리 — 제목과 직원 호출뿐이다 ─────────────── */

.mir .head { flex: none; display: flex; align-items: center; justify-content: space-between;
             gap: 1rem; padding: 1rem 1.6rem; background: #fff;
             border-bottom: 1px solid var(--grid); }
.mir .ttl { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; }
.mir .ttl em { font-style: normal; font-weight: 500; font-size: 1rem; color: var(--ink-3);
               margin-left: .5rem; }
.mir .call { min-height: 56px; display: inline-flex; align-items: center; padding: 0 1.4rem;
             border: 1px solid var(--grid); background: #fff; border-radius: 4px;
             font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink-2);
             cursor: pointer; text-decoration: none; }

/* ── 본문 ──────────────────────────────────── */

.mir .area { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem 1.4rem; }
.mir .cards { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.mir .cards .w2 { grid-column: span 2; }

.mir .card { background: #fff; border: 1px solid var(--grid); padding: 1rem 1.2rem 1.1rem; }
.mir .card h2 { margin: 0 0 .3rem; font-size: .85rem; font-weight: 700; letter-spacing: .04em;
                color: var(--ink-3); }
.mir .card .big { font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.mir .card .big em { font-style: normal; font-size: 1.1rem; font-weight: 600; color: var(--ink-2); }
/* 직계만 block — 후손까지 잡으면 안쪽 .kx 가 제 줄을 차지한다 */
.mir .card > .sub { display: block; font-size: .92rem; color: var(--ink-2); line-height: 1.55;
                    margin-top: .35rem; }
.mir .card > .sub b { font-weight: 700; color: var(--ink); }
.mir .card > .sub a { color: var(--live); font-weight: 700; }
.mir .card.quiet { background: var(--sheet); }

/* 확인 목록 — 고객이 읽고 맞는지 답하는 문장들 */
.mir .ask { list-style: none; margin: .4rem 0 0; padding: 0; }
.mir .ask li { padding: .55rem 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em;
               border-bottom: 1px solid var(--grid-2); line-height: 1.45; }
.mir .ask li:last-child { border-bottom: 0; }

/* 동의 항목 — 항목별로 따로 고른다 (J-01) */
.mir .cs { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center;
           gap: .8rem; min-height: 64px; padding: .6rem .2rem;
           border-bottom: 1px solid var(--grid-2); }
.mir .cs:last-child { border-bottom: 0; }
.mir .cs .tick { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--grid);
                 display: flex; align-items: center; justify-content: center;
                 font-size: 1rem; color: #fff; justify-self: center; }
.mir .cs.on .tick { background: var(--live); border-color: var(--live); }
.mir .cs .nm { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.mir .cs .nm i { font-style: normal; font-size: .85rem; font-weight: 700; color: var(--alert);
                 margin-left: .3rem; }
.mir .cs .nm i.opt { color: var(--ink-3); font-weight: 500; }
.mir .cs .nm em { display: block; font-style: normal; font-size: .85rem; font-weight: 400;
                  color: var(--ink-2); margin-top: .15rem; line-height: 1.45; }
.mir .cs .full { min-height: 48px; display: inline-flex; align-items: center; padding: 0 1rem;
                 border: 1px solid var(--grid); background: #fff; font-size: .88rem;
                 color: var(--ink-2); text-decoration: none; white-space: nowrap; }

/* 서명 */
.mir .sign { height: 120px; border: 1px dashed var(--ink-3); display: flex; align-items: center;
             justify-content: center; font-size: 1.05rem; color: var(--ink-3); margin-top: .5rem; }

/* 큰 선택지 — 별점·예/아니오 */
.mir .pickrow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem;
                margin-top: .5rem; }
.mir .pickrow button { min-height: 72px; border: 1px solid var(--grid); background: #fff;
                       font: inherit; font-size: 1.35rem; font-weight: 700; cursor: pointer; }
.mir .pickrow button.on { background: var(--live); border-color: var(--live); color: #fff; }

/* 칩 선택지 — 좋았던 점 같은 것 */
.mir .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.mir .chips button { min-height: 56px; padding: 0 1.2rem; border: 1px solid var(--grid);
                     background: #fff; font: inherit; font-size: 1rem; font-weight: 600;
                     cursor: pointer; }
.mir .chips button.on { background: var(--live); border-color: var(--live); color: #fff; }

/* 자유 입력 자리 */
.mir .memo { min-height: 80px; border: 1px solid var(--grid); background: #fff;
             padding: .8rem 1rem; font-size: 1rem; color: var(--ink-3); margin-top: .5rem; }

/* 설계 주석 — 고객용 문안이 아니다. 데모 관객에게 말한다 */
.mir .note { margin-top: .8rem; padding: .7rem .9rem; border: 1px dashed var(--grid);
             font-size: .8rem; line-height: 1.6; color: var(--ink-3); }
.mir .note b { color: var(--ink-2); font-weight: 700; }
.mir .note a { color: var(--live); font-weight: 700; }
.mir .note.hot { border-color: var(--wait-pay); color: #8a5a06; background: #fdfaf2; }
.mir .note.hot b { color: #6d4404; }

/* ── 발 — 답은 두 개면 충분하다 ─────────────── */

.mir .fbar { flex: none; display: flex; align-items: center; justify-content: flex-end;
             gap: .8rem; padding: .9rem 1.6rem; background: #fff;
             border-top: 1px solid var(--grid); }
.mir .fbar .why { margin-right: auto; font-size: .85rem; color: var(--ink-3); }
.mir .alt { min-height: 64px; padding: 0 1.8rem; border: 1px solid var(--grid); background: #fff;
            font: inherit; font-size: 1.05rem; font-weight: 600; color: var(--ink-2);
            cursor: pointer; text-align: center; text-decoration: none; line-height: 62px; }
.mir .yes { min-height: 64px; padding: 0 2.6rem; border: 0; background: var(--live); color: #fff;
            font: inherit; font-size: 1.15rem; font-weight: 800; cursor: pointer;
            text-align: center; text-decoration: none; line-height: 64px; }

.mir .kx { opacity: .72; font-size: .78em; }