/* POS 셸 (손그림 전용) — 1280 × 764 가로 고정 단말 · SC-M14 ~ M17
 *
 * 계산대에 서서 고객을 앞에 두고 쓴다. 그래서:
 *   터치 56px — 서서 빠르게 누른다. 작은 링크를 두지 않는다
 *   왼쪽은 사실(내역), 오른쪽은 행동(결제 수단·확정) — 시선이 왼→오로 끝난다
 *   돈이 걸린 확정 버튼은 하나뿐이고 가장 크다
 *
 * 폰 셸(.m)·태블릿(.mir)과 이름이 겹치지 않게 루트를 .pos 로 둔다.
 * 캔버스의 .poscols 와는 다른 것이다 — 그쪽은 캔버스 스킨, 이쪽은 손그림.
 */

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

/* ── 머리 ──────────────────────────────────── */

.pos .net { display: flex; gap: .4rem; align-items: center; padding: .5rem 1.2rem;
            background: #212a2b; color: #cfdad9; font-size: .8rem; }
.pos .net b { color: #fff; font-weight: 600; }
.pos .net span { margin-left: auto; color: #7c8b8a; font-size: .7rem; }

.pos .head { flex: none; display: flex; align-items: center; gap: 1rem;
             padding: .7rem 1.2rem; background: #fff; border-bottom: 1px solid var(--grid); }
.pos .ttl { font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; }
.pos .ttl em { font-style: normal; font-weight: 500; font-size: .9rem; color: var(--ink-3);
               margin-left: .4rem; }
.pos .meta { font-size: .8rem; color: var(--ink-3); }
.pos .meta b { color: var(--ink-2); font-weight: 600; }
.pos .actions { margin-left: auto; display: flex; gap: .5rem; }
.pos .btn { min-height: 48px; display: inline-flex; align-items: center; gap: .35rem;
            padding: 0 1.1rem; border: 1px solid var(--grid); background: #fff;
            border-radius: 4px; font: inherit; font-size: .88rem; font-weight: 600;
            color: var(--ink-2); cursor: pointer; text-decoration: none; }

/* 탭 — 성격이 다른 일은 섞지 않고 탭으로 가른다 (M16 환불/취소/재시술 · M17 마감/교대) */
.pos .tabs2 { flex: none; display: flex; background: #fff; border-bottom: 1px solid var(--grid); }
.pos .tabs2 button { min-height: 54px; padding: 0 1.4rem; border: 0;
                     border-bottom: 3px solid transparent; background: none; font: inherit;
                     font-size: .95rem; font-weight: 600; color: var(--ink-3); cursor: pointer;
                     display: inline-flex; align-items: center; gap: .4rem; }
.pos .tabs2 button[aria-selected="true"] { color: var(--ink); font-weight: 800;
                                           border-bottom-color: var(--live); }

/* ── 본문 — 왼쪽 사실, 오른쪽 행동 ─────────────── */

.pos .cols { flex: 1; overflow-y: auto; display: grid;
             grid-template-columns: minmax(0, 1fr) 460px; gap: 1rem;
             padding: 1rem 1.2rem 1.2rem; align-content: start; }
.pos .cols > div { min-width: 0; }

.pos .lines { background: #fff; border: 1px solid var(--grid); }
.pos .lh { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
           padding: .55rem .9rem; background: var(--sheet);
           border-bottom: 1px solid var(--grid); font-size: .74rem; font-weight: 700;
           letter-spacing: .05em; color: var(--ink-3); }
.pos .lh + .lh { border-top: 1px solid var(--grid); }
.pos .line { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center;
             gap: 1rem; min-height: 52px; padding: .5rem .9rem;
             border-bottom: 1px solid var(--grid-2); }
.pos .line:last-child { border-bottom: 0; }
.pos .line .nm { font-size: .95rem; font-weight: 700; letter-spacing: -.02em; }
.pos .line .nm em { display: block; font-style: normal; font-size: .74rem; font-weight: 400;
                    color: var(--ink-2); margin-top: .1rem; line-height: 1.45; }
.pos .line .nm em b { font-weight: 700; color: var(--ink); }
.pos .line .amt { font-size: 1.05rem; font-weight: 800; letter-spacing: -.03em;
                  white-space: nowrap; }
.pos .line.zero { background: #fdf9f8; border-left: 3px solid var(--alert); }
.pos .line.zero .amt { color: var(--alert); }
.pos .line.sel { background: #f2f8f6; border-left: 3px solid var(--live); }
.pos .line.dim .nm, .pos .line.dim .amt { color: var(--ink-3); font-weight: 600; }

.pos .tot { display: flex; justify-content: space-between; align-items: center;
            padding: .8rem 1rem; margin-top: .6rem; background: var(--ink); color: #fff; }
.pos .tot span { font-size: .9rem; font-weight: 600; }
.pos .tot b { font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; }
.pos .tot.ok { background: var(--live); }
.pos .tot.warn { background: var(--alert); }

/* 결제 수단 · 큰 키 — 56px 아래로 내려가지 않는다 */
.pos .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .6rem; }
.pos .keys button { min-height: 60px; border: 1px solid var(--grid); background: #fff;
                    font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
                    line-height: 1.3; }
.pos .keys button.on { background: var(--live); border-color: var(--live); color: #fff; }
.pos .keys button em { display: block; font-style: normal; font-size: .68rem; font-weight: 500;
                       opacity: .75; }
.pos .keys a { display: flex; align-items: center; justify-content: center; min-height: 60px;
               border: 1px dashed var(--grid); background: none; font-size: .85rem;
               font-weight: 600; color: var(--ink-2); text-decoration: none; text-align: center;
               line-height: 1.3; }

/* 폼 줄 — 오른쪽 판에서 쓰는 얇은 입력 관용구 */
.pos .f { display: block; padding: .55rem .9rem .6rem; background: #fff;
          border: 1px solid var(--grid); border-top: 0; }
.pos .f:first-of-type { border-top: 1px solid var(--grid); }
.pos .f .k { display: block; font-size: .74rem; font-weight: 700; color: var(--ink-2);
             margin-bottom: .25rem; }
.pos .f .k i { font-style: normal; color: var(--alert); }
.pos .f .v { display: flex; align-items: center; gap: .5rem; min-height: 44px;
             padding: 0 .7rem; border: 1px solid var(--grid); background: var(--sheet);
             font-size: .92rem; font-weight: 600; }
.pos .f .v.filled { border-color: var(--live); box-shadow: inset 0 0 0 1px rgba(15,95,86,.25); }
.pos .f .v em { font-style: normal; font-size: .72rem; font-weight: 400; color: var(--ink-3);
                margin-left: auto; }
.pos .f .seg { display: flex; flex-wrap: wrap; gap: .35rem; }
.pos .f .seg b { min-height: 48px; display: inline-flex; align-items: center; padding: 0 1rem;
                 border: 1px solid var(--grid); background: #fff; font-size: .9rem;
                 font-weight: 600; cursor: pointer; }
.pos .f .seg b.on { background: var(--live); border-color: var(--live); color: #fff;
                    font-weight: 700; }
.pos .f .h { display: block; font-size: .72rem; color: var(--ink-3); line-height: 1.55;
             margin-top: .3rem; }
.pos .f .h b { font-weight: 700; color: var(--ink-2); }
.pos .f .h a { color: var(--live); font-weight: 700; }

/* 규칙 상자 — 돈이 걸린 원칙은 화면에 적는다 */
.pos .rulebox { margin-top: .6rem; padding: .7rem .9rem; background: #fdfaf2;
                border-left: 3px solid var(--wait-pay); font-size: .8rem; line-height: 1.6;
                color: var(--ink-2); }
.pos .rulebox b { color: var(--ink); font-weight: 700; }
.pos .rulebox a { color: var(--live); font-weight: 700; }
.pos .rulebox.bad { background: #fdf1ee; border-left-color: var(--alert); }
.pos .rulebox.bad b { color: var(--alert); }
.pos .rulebox.soft { background: none; border: 1px dashed var(--grid);
                     color: var(--ink-3); }

/* 막힌 것은 버튼을 주지 않는다 */
.pos button.undecided { min-height: 56px; width: 100%; margin-top: .6rem;
                        border: 1px dashed var(--ink-3); background: none; font: inherit;
                        font-size: .88rem; font-weight: 600; color: var(--ink-3); cursor: default; }
.pos button.undecided i { font-style: normal; font-size: .7rem; opacity: .8; margin-left: .3rem; }

/* ── 발 — 확정은 하나, 가장 크다 ─────────────── */

.pos .fbar { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; }
.pos .fbar .why { flex: 1; font-size: .78rem; color: var(--ink-3); line-height: 1.5; }
.pos .fbar .why b { color: var(--alert); font-weight: 700; }
.pos .go2 { min-height: 64px; padding: 0 2.4rem; border: 0; background: var(--live); color: #fff;
            font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer;
            text-align: center; text-decoration: none; line-height: 64px; }
.pos .alt { min-height: 56px; padding: 0 1.4rem; border: 1px solid var(--grid); background: #fff;
            font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink-2);
            cursor: pointer; text-align: center; text-decoration: none; line-height: 54px; }

.pos .kx { opacity: .72; font-size: .8em; }