/* 회원 콘솔 CSS. prototypes/member/build.js 의 CSS 상수를 그대로 옮긴 것.
   내용을 고치지 않는다 — 디자인은 프로토타입이 기준이다. */

*,*::before,*::after{box-sizing:border-box}
:root{
 --background:#fff;--foreground:#09090B;--card:#fff;
 --muted:#F4F4F5;--muted-foreground:#71717A;--border:#E4E4E7;
 --primary:#15803D;--primary-hover:#166534;--primary-foreground:#FAFAFA;
 --primary-subtle:#F0FDF4;--primary-border:#BBF7D0;--primary-text:#14532D;
 --blue:#2563EB;--blue-sub:#EFF6FF;--orange:#EA580C;--orange-sub:#FFF7ED;
 --red:#DC2626;--red-sub:#FEF2F2;
 --radius:.5rem;
 --sans:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif;
 --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
 --shadow-sm:0 1px 2px 0 rgb(0 0 0/.05);
 --gnb:240px;--hd:56px;
}
body{margin:0;font-family:var(--sans);background:var(--muted);color:var(--foreground);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.tnum{font-variant-numeric:tabular-nums;font-family:var(--mono)}

/* 프로토타입 배너 */
.proto{position:fixed;bottom:0;left:0;right:0;background:#09090B;color:#fff;font-size:12px;
 padding:7px 16px;z-index:100;display:flex;gap:14px;align-items:center;justify-content:center}
.proto b{color:#BBF7D0}
.proto a{color:#BBF7D0;text-decoration:underline}

/* 헤더 */
header{position:fixed;top:0;left:0;right:0;height:var(--hd);background:#fff;border-bottom:1px solid var(--border);
 display:flex;align-items:center;gap:16px;padding:0 20px;z-index:50}
.logo{font-weight:800;font-size:15px;letter-spacing:-.01em}
.logo span{color:var(--muted-foreground);font-weight:600;margin-left:6px;font-size:12px}
.hspace{flex:1}
.bal{display:flex;align-items:center;gap:10px;background:var(--primary-subtle);border:1px solid var(--primary-border);
 border-radius:var(--radius);padding:5px 12px;font-size:13px}
.bal .n{font-weight:700;font-family:var(--mono);color:var(--primary-text)}
.bal .d{color:var(--muted-foreground);font-size:12px}
.bal.warn{background:var(--orange-sub);border-color:#FED7AA}
.bal.warn .n{color:#9A3412}
.hbtn{width:32px;height:32px;border-radius:var(--radius);border:1px solid var(--border);background:#fff;
 display:grid;place-items:center;cursor:pointer;position:relative}
.hbtn .dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.av{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}

/* GNB */
nav{position:fixed;top:var(--hd);left:0;bottom:0;width:var(--gnb);background:#fff;border-right:1px solid var(--border);
 overflow-y:auto;padding:14px 10px 60px}
.ng{font-size:11px;font-weight:700;color:var(--muted-foreground);padding:12px 10px 5px;letter-spacing:.04em}
nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius);
 color:#3F3F46;font-size:13.5px;margin-bottom:1px}
nav a:hover{background:var(--muted)}
nav a.on{background:var(--primary-subtle);color:var(--primary-text);font-weight:600}
nav a .ic{width:16px;height:16px;flex:none}

/* 본문 */
main{margin-left:var(--gnb);margin-top:var(--hd);padding:24px 28px 70px;max-width:1320px}
.ph{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
.ph h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em}
.ph p{margin:3px 0 0;color:var(--muted-foreground);font-size:13px}
.ph .sp{flex:1}
.sid{font-family:var(--mono);font-size:11px;background:#09090B;color:#BBF7D0;padding:2px 7px;border-radius:4px;margin-left:8px;vertical-align:2px}

/* 카드 */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.card h3{margin:0 0 12px;font-size:14px;font-weight:700}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g21{grid-template-columns:2fr 1fr}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g21,.g3{grid-template-columns:1fr}}
/* ★★ `.g2` 가 빠져 있었다. 그래서 대시보드의 2단 카드가 **320px 에서도 2단**으로 남아
   가로 스크롤이 생겼다(2026-09-06 사업주 지적 — 「모바일에서 보니까 엉망진창」).
   좁은 화면에서 2단은 어차피 읽을 수 없다. 한 단으로 내린다. */
/* ★ 768px 이 특히 위험한 지점이다 — 여기서부터 왼쪽 메뉴(240px)가 나타나므로
   본문이 갑자기 528px 로 줄어드는데, 2단 그리드는 그 폭에서 못 버틴다.
   그래서 「모바일 폭」이 아니라 **메뉴를 뺀 본문 폭**을 기준으로 접는다.
   1000px 이면 본문이 760px 이고 그때부터 2단이 읽을 만해진다. */
@media(max-width:1000px){.g2,.g4{grid-template-columns:1fr}}

/* 버튼 */
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius);border:1px solid var(--primary);
 background:var(--primary);color:#fff;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--primary-hover)}
.btn.sec{background:#fff;color:var(--foreground);border-color:var(--border)}
.btn.sec:hover{background:var(--muted)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.gh{background:transparent;border-color:transparent;color:var(--muted-foreground)}

/* 뱃지 */
.bg{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;border:1px solid}
.bg::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.bg.ok{background:var(--primary-subtle);border-color:var(--primary-border);color:var(--primary-text)}
.bg.run{background:var(--blue-sub);border-color:#BFDBFE;color:#1D4ED8}
.bg.wa{background:var(--orange-sub);border-color:#FED7AA;color:#9A3412}
.bg.er{background:var(--red-sub);border-color:#FECACA;color:#B91C1C}
.bg.off{background:var(--muted);border-color:var(--border);color:var(--muted-foreground)}

/* 테이블 */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--muted-foreground);font-size:12px;padding:9px 10px;
 border-bottom:1px solid var(--border);background:#FAFAFA;white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFAFA}
td .nm{font-weight:600}
td .nm:hover{color:var(--primary)}

/* 폼 */
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.req{color:var(--red)}
input[type=text],input[type=email],input[type=password],select,textarea{
 width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius);font-size:13.5px;
 font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:-1px;border-color:var(--primary)}
.fld{margin-bottom:16px}
.hint{font-size:12px;color:var(--muted-foreground);margin-top:5px}

/* 선택 카드 */
.pick{display:grid;gap:10px}
.pick.c3{grid-template-columns:repeat(3,1fr)}
.pick.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.pick.c3{grid-template-columns:repeat(2,1fr)}}
.pk{border:1px solid var(--border);border-radius:var(--radius);padding:13px;cursor:pointer;background:#fff;text-align:left;font-family:inherit}
.pk:hover{border-color:#A1A1AA}
.pk.on{border-color:var(--primary);background:var(--primary-subtle);box-shadow:0 0 0 1px var(--primary)}
.pk .t{font-weight:700;font-size:14px;margin-bottom:3px}
.pk .s{font-size:12px;color:var(--muted-foreground);line-height:1.5}
.pk .p{margin-top:8px;font-family:var(--mono);font-weight:700;font-size:14px;color:var(--primary-text)}

/* 배너 */
.ban{border-radius:var(--radius);padding:12px 14px;font-size:13px;display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;border:1px solid}
.ban.i{background:var(--blue-sub);border-color:#BFDBFE;color:#1E3A8A}
.ban.w{background:var(--orange-sub);border-color:#FED7AA;color:#7C2D12}
.ban.e{background:var(--red-sub);border-color:#FECACA;color:#7F1D1D}
.ban.g{background:var(--primary-subtle);border-color:var(--primary-border);color:var(--primary-text)}
.ban b{font-weight:700}

/* 잔액 위젯 */
.balbig{display:flex;gap:30px;align-items:flex-end;flex-wrap:wrap}
.balbig .m{font-size:34px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em;line-height:1}
.balbig .sub{color:var(--muted-foreground);font-size:12px;margin-bottom:3px}
.balbig .v{font-size:17px;font-weight:700;font-family:var(--mono)}

/* 요금 패널 */
.fee{position:sticky;bottom:32px;background:#09090B;color:#fff;border-radius:var(--radius);padding:14px 18px;
 display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:20px;box-shadow:0 8px 24px rgb(0 0 0/.16)}
.fee .k{font-size:11px;color:#A1A1AA}
.fee .v{font-family:var(--mono);font-weight:700;font-size:16px}
.fee .sp{flex:1}
.fee .note{font-size:12px;color:#BBF7D0}

/* 통계 */
.stat{display:flex;flex-direction:column;gap:3px}
.stat .k{font-size:12px;color:var(--muted-foreground)}
.stat .v{font-size:20px;font-weight:700;font-family:var(--mono)}
.stat .d{font-size:12px;color:var(--muted-foreground)}

/* 탭 */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px}
.tabs a{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--muted-foreground);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--primary-text);border-bottom-color:var(--primary)}

/* 인증 레이아웃 */
.auth{min-height:100vh;display:grid;place-items:center;padding:40px 20px 70px;background:var(--muted)}
.authbox{width:100%;max-width:440px}
.authbox .lg{text-align:center;margin-bottom:22px;font-weight:800;font-size:19px}
.steps{display:flex;gap:6px;margin-bottom:20px}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--border)}
.steps i.on{background:var(--primary)}
.chk{display:flex;gap:9px;align-items:flex-start;padding:9px 0;font-size:13.5px}
.chk input{margin-top:3px}

/* 차트 */
.bars{display:flex;align-items:flex-end;gap:3px;height:110px;padding-top:8px}
.bars i{flex:1;background:var(--primary);border-radius:2px 2px 0 0;opacity:.85}
.bars i:hover{opacity:1}
.mono{font-family:var(--mono)}
.dl{display:grid;grid-template-columns:130px 1fr;gap:9px 14px;font-size:13px}
.dl dt{color:var(--muted-foreground)}
.dl dd{margin:0;font-weight:500}
.strike{text-decoration:line-through;color:var(--muted-foreground)}

/* ══ 주문 모달 (M-10~M-13) ══ */
.ov{position:fixed;inset:0;background:rgb(9 9 11/.55);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.ov.on{display:flex}
.md{background:#fff;border-radius:12px;width:100%;max-width:980px;box-shadow:0 24px 60px rgb(0 0 0/.28);overflow:hidden;animation:up .16s ease-out}
@keyframes up{from{transform:translateY(10px);opacity:.6}to{transform:none;opacity:1}}
.mdh{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--border)}
.mdh h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.mdh .sp{flex:1}
.x{width:30px;height:30px;border:1px solid var(--border);background:#fff;border-radius:var(--radius);cursor:pointer;font-size:15px;line-height:1;color:var(--muted-foreground)}
.wz{display:flex;gap:0;padding:0 22px;border-bottom:1px solid var(--border);background:#FAFAFA}
.wz div{display:flex;align-items:center;gap:7px;padding:11px 16px 11px 0;font-size:12.5px;color:var(--muted-foreground);font-weight:600}
.wz div::after{content:'›';margin-left:12px;color:#D4D4D8}
.wz div:last-child::after{content:''}
.wz div i{width:19px;height:19px;border-radius:50%;background:var(--border);color:#fff;display:grid;place-items:center;font-size:11px;font-style:normal;font-weight:700}
.wz div.on{color:var(--primary-text)}
.wz div.on i{background:var(--primary)}
.wz div.dn i{background:var(--primary);}
.mdb{padding:20px 22px;max-height:min(60vh,560px);overflow-y:auto}
.mdf{display:flex;align-items:center;gap:16px;padding:14px 22px;border-top:1px solid var(--border);background:#FAFAFA}
.mdf .sp{flex:1}
.mdf .sum{font-size:12px;color:var(--muted-foreground)}
.mdf .sum b{display:block;font-family:var(--mono);font-size:17px;color:var(--foreground);font-weight:700;margin-top:1px}
.stp{display:none}.stp.on{display:block}
.mtabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px}
.mtabs button{padding:8px 14px;font-size:13px;font-weight:600;color:var(--muted-foreground);border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;font-family:inherit;margin-bottom:-1px}
.mtabs button.on{color:var(--primary-text);border-bottom-color:var(--primary)}
.plist{display:grid;gap:8px}
.pr{display:flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px;cursor:pointer;background:#fff;text-align:left;font-family:inherit;width:100%}
.pr:hover{border-color:#A1A1AA;background:#FAFAFA}
.pr.on{border-color:var(--primary);background:var(--primary-subtle);box-shadow:0 0 0 1px var(--primary)}
.pr .rt{font-weight:700;font-size:14px;min-width:130px}
.pr .rs{flex:1;font-size:12.5px;color:var(--muted-foreground);line-height:1.5;padding-right:10px}
.pr .rp{font-family:var(--mono);font-weight:700;font-size:14.5px;text-align:right;white-space:nowrap}
.pr .rp em{display:block;font-style:normal;font-size:11px;color:var(--muted-foreground);font-weight:500;font-family:var(--sans)}
.tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:1px}
.tag.now{background:var(--primary-subtle);color:var(--primary-text);border:1px solid var(--primary-border)}
.tag.ct{background:var(--orange-sub);color:#9A3412;border:1px solid #FED7AA}
.rec{display:grid;grid-template-columns:1fr auto;gap:7px 16px;font-size:13px;padding:13px 15px;background:var(--muted);border-radius:var(--radius)}
.rec .k{color:var(--muted-foreground)}
.rec .v{text-align:right;font-family:var(--mono);font-weight:600}
.rec .tot{border-top:1px solid var(--border);padding-top:9px;margin-top:2px;font-weight:700}
.rec .tot .v{font-size:16px}
.pm{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pmc{border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px;cursor:pointer;background:#fff;text-align:left;font-family:inherit}
.pmc.on{border-color:var(--primary);background:var(--primary-subtle);box-shadow:0 0 0 1px var(--primary)}
.pmc .t{font-weight:700;font-size:13.5px}
.pmc .s{font-size:12px;color:var(--muted-foreground);margin-top:3px}
.done{text-align:center;padding:14px 0}
.done .ck{width:54px;height:54px;border-radius:50%;background:var(--primary-subtle);color:var(--primary);
 display:grid;place-items:center;margin:0 auto 14px;font-size:27px}

.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* 서버 렌더링에서 추가로 필요한 것만. 프로토타입에 없던 폼 메시지 두 종류다. */
.msg{font-size:13px;border-radius:8px;padding:10px 12px;margin:0 0 14px;line-height:1.5}
.msg.err{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.msg.ok{background:var(--primary-50,#F0FDF4);border:1px solid #BBF7D0;color:#14532D}

/* ─────────────────────────────────────────────────────────────
   2026-08-28 추가. 프로토타입 CSS 에 없던 것만 여기 모은다.
   원본을 손대지 않아야 프로토타입과 대조할 때 차이를 알 수 있다.
   ───────────────────────────────────────────────────────────── */

/* 잔액 위젯의 위험 상태. 프로토타입에는 warn(주황)까지만 있었다.
   docs/07 "잔액 1일분 이하면 주황, 0이면 빨강" 중 빨강이 없었다. */
.bal.crit{background:var(--red-sub);border-color:#FECACA}
.bal.crit .n{color:#991B1B}

/* 대리 접속 중 잠기는 버튼. 색만으로 알리지 않고 title 로 이유를 말한다. */
.btn[disabled][data-imp]{opacity:.45;cursor:not-allowed}

/* 데이터 표 */
.tb{width:100%;border-collapse:collapse;font-size:13px}
.tb th{text-align:left;font-weight:600;color:var(--muted-foreground);font-size:12px;
  padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.tb td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle}
.tb tr:last-child td{border-bottom:0}
.tb tbody tr:hover{background:var(--accent,#FAFAFA)}
.tb .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* 상태 뱃지. 색만으로 구분하지 않으려고 항상 텍스트를 넣는다(docs/11 §3). */
.bdg{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:2px 8px;border-radius:999px;border:1px solid;white-space:nowrap}
.bdg i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.bdg.ok{background:var(--primary-subtle);border-color:var(--primary-border);color:var(--primary-text)}
.bdg.go{background:var(--blue-sub);border-color:#BFDBFE;color:#1E3A8A}
.bdg.wa{background:var(--orange-sub);border-color:#FED7AA;color:#7C2D12}
.bdg.er{background:var(--red-sub);border-color:#FECACA;color:#7F1D1D}
.bdg.of{background:var(--muted);border-color:var(--border);color:var(--muted-foreground)}

/* 빈 상태 */
.emp{text-align:center;padding:44px 20px;color:var(--muted-foreground);font-size:13.5px}
.emp b{display:block;color:var(--foreground);font-size:15px;margin-bottom:6px}

/* 페이지 제목줄 */
.ph{display:flex;align-items:flex-end;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.ph h1{font-size:20px;font-weight:800;margin:0}
.ph p{margin:0;font-size:13px;color:var(--muted-foreground)}

/* 모바일: 표를 가로 스크롤로 두지 않는다(docs/11 §6) */
/* ── 손가락으로 누를 수 있는 크기 ──────────────────────────────
   실측(2026-09-06 · 390px): 체크박스가 13x13 이었다. 손끝은 그보다 훨씬 굵어서
   옆을 누르거나 두 번 시도하게 된다. 헤더의 알림 버튼은 자리가 모자라
   18px 로 찌그러져 있었다 — 눌러야 할 것이 눌리는 크기가 아니면 기능이 없는 것과 같다. */
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--primary);
  flex:0 0 auto;cursor:pointer}
/* 헤더 버튼은 줄어들지 않는다. 자리가 모자라면 접는 쪽(.hide-sm)을 쓴다. */
.hbtn{flex:0 0 auto}

@media(max-width:767px){
  /* 목록의 작은 버튼은 높이를 조금 키운다. 줄당 세 개가 붙어 있어 오조작이 잦다. */
  .btn.sm{padding:8px 12px}
  /* 체크박스는 라벨까지 누를 수 있게 — 실제 누를 면적이 글자만큼 넓어진다 */
  label:has(> input[type=checkbox]),.chk label{cursor:pointer;padding:3px 0}
}

/* ── 넓은 표 ────────────────────────────────────────────────────
   칸이 많은 표는 어떤 폭에서든 결국 넘친다. **페이지 전체가 가로로 밀리는 것**과
   **표만 제자리에서 밀리는 것**은 다르다 — 앞은 화면이 깨진 것으로 보이고
   뒤는 흔한 동작이다. 표를 제 상자 안에서 스크롤시킨다.
   모바일에서는 표가 카드로 바뀌므로(아래 `.tb thead{display:none}`) 해당 없다. */
.tbwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:767px){ .tbwrap{overflow-x:visible} }

/* ── 모바일 메뉴 버튼 ────────────────────────────────────────────
   데스크톱에서는 왼쪽 메뉴가 늘 보이므로 숨긴다. 767px 이하에서만 나온다. */
.navbtn{display:none;flex:0 0 auto}
/* 드로어를 덮는 막. 뒤를 눌러 닫고, 뒤 내용이 잘못 눌리는 것을 막는다. */
.navdim{position:fixed;inset:var(--hd) 0 0 0;background:rgb(0 0 0/.35);z-index:110;
  opacity:0;transition:opacity .18s}
.navdim.on{opacity:1}

@media(max-width:767px){
  .navbtn{display:grid}
  nav{transform:translateX(-100%);transition:transform .18s;z-index:120;
      box-shadow:0 0 0 rgb(0 0 0/0)}
  nav.open{transform:none;box-shadow:4px 0 24px rgb(0 0 0/.18)}
  main{margin-left:0;padding:16px 14px 70px}

  /* ★ 헤더가 390px 를 넘어 가로 스크롤이 생겼다(실측 413px).
     좁은 화면에서 자리를 가장 많이 먹는 것부터 접는다 —
     ① 로고의 부제 ② 잔액 옆의 「약 N일」 ③ 헤더 좌우 여백과 간격.
     잔액 숫자와 버튼은 남긴다. 그건 접으면 안 되는 정보다. */
  header{padding:0 12px;gap:7px}
  /* 좁은 화면에서 자리를 비우려고 감추는 것들. 기능은 왼쪽 메뉴에 그대로 있다. */
  .hide-sm{display:none}
  .logo span{display:none}
  .bal{padding:5px 9px;gap:6px}
  .bal .d{display:none}
  /* 헤더 버튼이 여러 개라 좁은 화면에서는 줄어들 수 있게 둔다 */
  header .btn.sm{padding:7px 10px;white-space:nowrap}
  .tb thead{display:none}
  .tb,.tb tbody,.tb tr,.tb td{display:block;width:100%}
  .tb tr{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;padding:4px 2px}
  .tb td{border-bottom:0;display:flex;justify-content:space-between;gap:12px;padding:7px 12px}
  .tb td::before{content:attr(data-l);color:var(--muted-foreground);font-size:12px;flex:0 0 auto}
  .tb .num{text-align:right}

  /* ★ 줄당 항목이 6~7개라 카드 하나가 화면을 넘어간다(docs/30 4장 ④).
     **먼저 보이는 것은 세 가지** — 이름·상태·요금. 나머지는 접는다.
     `.tb.fold` 를 준 표에만 적용한다. 회원이 한 줄을 누르면 나머지가 펼쳐진다. */
  .tb.fold tr{position:relative;cursor:pointer}
  .tb.fold td[data-fold]{display:none}
  .tb.fold tr.open td[data-fold]{display:flex}
  /* 펼칠 것이 있다는 신호. 이름 칸 오른쪽 끝에 작은 삼각형 하나. */
  .tb.fold tr::after{content:'';position:absolute;right:14px;top:14px;width:0;height:0;
    border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:5px solid var(--muted-foreground);transition:transform .15s}
  .tb.fold tr.open::after{transform:rotate(180deg)}
}

/* 프로토타입 규칙은 input[type=text|email|password] 만 잡는다.
   type 을 생략한 input 과 date·tel·number·search 가 스타일 밖으로 새서 넓힌다. */
.fld input:not([type]),.fld input[type=tel],.fld input[type=number],
.fld input[type=date],.fld input[type=search],.fld input[type=url]{
  width:100%;padding:9px 11px;border:1px solid var(--input);border-radius:var(--radius);
  font-size:14px;font-family:inherit;background:#fff;color:var(--foreground)}
.fld input[type=date]{font-family:var(--mono)}

/* 금액 프리셋. 고른 것을 색만이 아니라 테두리·굵기로도 표시한다. */
.amtpick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.amtpick .btn[aria-pressed="true"]{background:var(--primary-subtle);border-color:var(--primary);
  color:var(--primary-text);font-weight:700}


/* 필수 항목을 비운 채 저장하면 브라우저 말풍선 말고는 표시가 없었다
   (2026-08-31 검증 지적 9번). 관리자도 "막을 때는 이유를 말한다" 를 따른다.
   :invalid 가 아니라 :user-invalid 다 — 화면을 열자마자 빈 칸이 전부 빨개지면 안 된다. */
form :user-invalid { border-color: var(--red); }
form :user-invalid:focus-visible { outline-color: var(--red); }
form .chk :user-invalid, form input[type=checkbox]:user-invalid {
  outline: 2px solid var(--red); outline-offset: 2px; }

/* ── 자세한 설명 ────────────────────────────────────────────────
   처음 쓰는 회원을 위한 안내 상자. 계정 설정에서 끌 수 있다.
   ★ 본문보다 **약하게** 보이게 한다 — 안내가 화면의 주인공이 되면
   정작 봐야 할 표와 버튼이 뒤로 밀린다. */
.helpbox{border:1px solid var(--primary-border);background:var(--primary-subtle);
  border-radius:var(--radius);margin-bottom:14px;font-size:13px;line-height:1.75}
.helpbox summary{cursor:pointer;padding:11px 14px;font-weight:600;color:var(--primary-text);
  display:flex;align-items:center;gap:8px;list-style:none}
.helpbox summary::-webkit-details-marker{display:none}
/* 물음표 표시. 아이콘 세트를 늘리지 않으려고 글자로 만든다. */
.helpbox .hi{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:11px;font-weight:700;flex:0 0 auto}
.helpbox summary::after{content:'접기';margin-left:auto;font-size:11.5px;font-weight:500;
  color:var(--muted-foreground)}
.helpbox:not([open]) summary::after{content:'펼치기'}
.helpbox .hb{padding:0 14px 13px 39px;color:var(--foreground)}
.helpbox .hb b{font-weight:700}
.helpbox .hb .mono{font-family:var(--mono);font-size:12px;background:#fff;
  padding:1px 5px;border-radius:4px;border:1px solid var(--primary-border)}
@media(max-width:767px){ .helpbox .hb{padding-left:14px} }

/* ★★ `hidden` 속성이 실제로 먹게 한다.
   브라우저 기본값은 `[hidden]{display:none}` 인데, 우리가 `.ban`·`.btn` 에
   `display:flex`/`inline-flex` 를 직접 줘서 **그 기본값을 덮어써 버렸다.**
   그래서 `el.hidden = true` 로 감춘 배너와 버튼이 **그대로 보였다** —
   빈 주황색 상자, 다 끝났는데 남아 있는 「처리 중…」 버튼이 그것이다(2026-09-05 발견).
   화면마다 style.display 로 우회하지 않고 여기서 한 번에 바로잡는다. */
[hidden] { display: none !important; }

/* ★★ 기다리는 동안 화면이 말을 한다 (2026-09-06 사업주 지시).
   버튼을 회색으로 만들기만 하면 **죽은 것처럼 보인다.** KT 프록시를 거치는
   호출은 1~2초일 때도 있고 몇 초 걸릴 때도 있어 그 사이가 길다.

   `display` 를 건드리지 않는다 — `.btn{display:inline-flex}` 로 `[hidden]` 을
   덮어써서 「다 끝났는데 남아 있는 처리 중… 버튼」이 나온 적이 있다(위 주석).
   고리는 `::before` 로만 그린다. */
.busy::before{content:'';flex:0 0 auto;width:13px;height:13px;margin-right:2px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  opacity:.75;animation:xdnspin .6s linear infinite}
@keyframes xdnspin{to{transform:rotate(360deg)}}
/* 움직임을 줄여 달라고 한 사람에게는 고리만 세워 둔다. 「…중」 글자가 이미 신호다 */
@media(prefers-reduced-motion:reduce){ .busy::before{animation:none} }

/* 표·패널이 통째로 기다릴 때. 버튼이 아니라 자리 자체가 비어 있는 경우다 */
.waiting{display:flex;align-items:center;gap:8px;padding:18px 2px;
  color:var(--muted-foreground);font-size:13px}
.waiting::before{content:'';flex:0 0 auto;width:14px;height:14px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  opacity:.75;animation:xdnspin .6s linear infinite}
@media(prefers-reduced-motion:reduce){ .waiting::before{animation:none} }

/* 버튼이 아닌 안내 줄이 「기다리라」고 말할 때 (주문 창의 요금 계산 중 등) */
.busywait::before{content:'';display:inline-block;vertical-align:-2px;
  width:11px;height:11px;margin-right:6px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  opacity:.7;animation:xdnspin .6s linear infinite}
@media(prefers-reduced-motion:reduce){ .busywait::before{animation:none} }

/* 상세 화면에서 목록으로 돌아가는 줄. 모바일은 메뉴가 서랍이라 이것이 유일한 길이다 */
.backlink{display:inline-flex;align-items:center;gap:4px;margin-bottom:10px;
  color:var(--muted-foreground);text-decoration:none;font-size:13px;font-weight:500}
.backlink:hover{color:var(--foreground)}
.backlink:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}