/* ── 가게 장부 UI — Life OS 톤 (2026-08-03) ────────────────
   테두리 대신 그림자 · 넓은 여백 · 파스텔 그라데이션 포인트.
   ⚠ 클래스 이름·구조는 그대로. 디자인만 바뀜(내용 변경 없음). */
:root{
  --bg:#f6f6f4; --card:#ffffff; --ink:#17171a; --sub:#75736e; --line:#ececE8;
  --acc:#b02a5f; --accbg:#fbeaf1; --warn:#9a5a17; --warnbg:#fdf3e4;
  --ok:#2e7d32; --okbg:#eaf5ec; --danger:#b3372e;
  --field:#f3f3f0; --sh:0 1px 2px rgba(20,20,25,.04), 0 8px 24px rgba(20,20,25,.05);
  --sh-sm:0 1px 2px rgba(20,20,25,.05), 0 2px 8px rgba(20,20,25,.04);
  --g1:linear-gradient(135deg,#fff5ec 0%,#ffffff 62%);
  --g2:linear-gradient(135deg,#eef4ff 0%,#ffffff 62%);
  --g3:linear-gradient(135deg,#eafaf3 0%,#ffffff 62%);
}
[data-theme="dark"]{
  --bg:#121214; --card:#1c1c1f; --ink:#eceaE6; --sub:#a3a09a; --line:#2b2b30;
  --acc:#f19bb9; --accbg:#3a2430; --warn:#e0a35c; --warnbg:#332a1c;
  --ok:#8fc78f; --okbg:#22301f; --danger:#e08279;
  --field:#26262a; --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sh-sm:0 1px 3px rgba(0,0,0,.4);
  --g1:linear-gradient(135deg,#2b2320 0%,#1c1c1f 62%);
  --g2:linear-gradient(135deg,#1e2430 0%,#1c1c1f 62%);
  --g3:linear-gradient(135deg,#1d2a26 0%,#1c1c1f 62%);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{font-size:16px;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif; line-height:1.55; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;}
.wrap{max-width:780px; margin:0 auto; padding:18px 14px 96px;}

/* 헤더 */
.topbar{display:flex; align-items:center; gap:9px; padding:4px 2px 14px; margin-bottom:8px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.topbar h1{font-size:23px; margin:0; font-weight:800; letter-spacing:-.6px;}
.topbar .sp{flex:1;}
.tag{font-size:11.5px; color:var(--acc); background:var(--accbg); border-radius:20px; padding:3px 10px; font-weight:700;}

/* 탭 */
.tabs{display:flex; gap:7px; margin:10px 0 16px; overflow-x:auto; padding-bottom:2px;}
.tabs button{flex:0 0 auto; border:none; background:var(--card); color:var(--sub); border-radius:22px; padding:8px 15px; font-size:13.5px; font-weight:600; cursor:pointer; box-shadow:var(--sh-sm); transition:transform .12s, box-shadow .12s;}
.tabs button:hover{transform:translateY(-1px);}
.tabs button.on{background:var(--ink); color:var(--bg); box-shadow:0 4px 14px rgba(20,20,25,.18);}

/* 카드 */
.card{background:var(--card); border:none; border-radius:16px; padding:16px 18px; margin-bottom:13px; box-shadow:var(--sh);}
.card h3{margin:0 0 12px; font-size:16px; font-weight:800; letter-spacing:-.3px;}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:7px 0;}
.hr{border-top:1px solid var(--line); margin:12px 0;}
.right{text-align:right;}
.mut{color:var(--sub); font-size:12.5px;}
.big{font-size:29px; font-weight:800; letter-spacing:-.8px;}

/* 입력 */
label.f{font-size:12.5px; color:var(--sub); display:block; margin-bottom:4px; font-weight:600;}
input,select,textarea{font:inherit; color:var(--ink); background:var(--field); border:none; border-radius:11px; padding:9px 12px; font-size:14.5px;}
input:focus,select:focus,textarea:focus{outline:none; box-shadow:0 0 0 2.5px color-mix(in srgb, var(--acc) 28%, transparent);}
input[type=number]{width:84px;}
input[type=date]{width:auto; min-width:162px; flex-shrink:0;}
input[type=time]{width:auto; min-width:138px; flex-shrink:0;}
input[type=checkbox]{width:16px; height:16px; accent-color:var(--acc);}

/* 버튼 */
.btn{font:inherit; border:none; border-radius:12px; padding:10px 17px; font-size:14px; font-weight:700; cursor:pointer; background:var(--ink); color:var(--bg); box-shadow:0 2px 8px rgba(20,20,25,.14); transition:transform .12s, box-shadow .12s;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn.acc{background:var(--acc); color:#fff; box-shadow:0 3px 12px color-mix(in srgb, var(--acc) 35%, transparent);}
.btn.ghost{background:var(--card); color:var(--ink); box-shadow:var(--sh-sm);}
.btn.sm{padding:6px 12px; font-size:12.5px; border-radius:9px;}
.btn.dngr{background:var(--card); color:var(--danger); box-shadow:var(--sh-sm);}
.chips{display:flex; gap:7px; flex-wrap:wrap;}
.chips button{border:none; background:var(--field); color:var(--sub); border-radius:11px; padding:8px 13px; font-size:13px; font-weight:600; cursor:pointer; transition:transform .12s;}
.chips button:hover{transform:translateY(-1px);}
.chips button.on{color:var(--acc); background:var(--accbg); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 45%, transparent);}

/* 목록 줄 */
.li{display:flex; align-items:center; gap:9px; padding:10px 2px; border-top:1px solid var(--line); font-size:14px; flex-wrap:wrap;}
.li:first-child{border-top:none;}
.li .g{color:var(--sub); font-size:12.5px;}
.li .sp{flex:1;}
.badge{font-size:11px; padding:3px 10px; border-radius:20px; background:var(--accbg); color:var(--acc); font-weight:700;}
.badge.gray{background:var(--field); color:var(--sub);}
.amt{font:inherit; font-weight:700; color:var(--acc); background:none; border:none; border-bottom:1.5px dotted var(--acc); padding:0 1px; cursor:pointer; font-variant-numeric:tabular-nums;}

/* 알림 박스 */
.warnbox{background:var(--warnbg); color:var(--warn); border-radius:12px; padding:10px 13px; font-size:13px; margin-top:9px;}
.okbox{background:var(--okbg); color:var(--ok); border-radius:12px; padding:10px 13px; font-size:13px;}

/* 숫자 카드 — 파스텔 그라데이션 */
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px;}
.metric{background:var(--g2); border:none; border-radius:14px; padding:14px 15px; box-shadow:var(--sh-sm);}
.metric:nth-child(1){background:var(--g1);}
.metric:nth-child(3){background:var(--g3);}
.metric .k{font-size:12px; color:var(--sub); font-weight:600;}
.metric .v{font-size:22px; font-weight:800; margin-top:3px; letter-spacing:-.5px;}

/* 표 */
table.t{border-collapse:separate; border-spacing:0; width:100%; font-size:13px; overflow:hidden; border-radius:12px; box-shadow:var(--sh-sm);}
table.t th,table.t td{border-bottom:1px solid var(--line); padding:7px 8px; text-align:center; background:var(--card);}
table.t th{background:var(--field); font-weight:700;}
table.t tr:last-child td{border-bottom:none;}
table.t input{width:58px; padding:5px 6px; font-size:13px; text-align:right; background:var(--field);}
.tblwrap{overflow-x:auto;}

/* 설명 시트 */
.sheet-bg{position:fixed; inset:0; background:rgba(15,15,20,.42); backdrop-filter:blur(2px); display:none; z-index:50;}
.sheet{position:fixed; left:12px; right:12px; top:50%; transform:translateY(-50%); max-height:82vh; overflow:auto; background:var(--card); border:none; border-radius:20px; padding:20px 18px 22px; z-index:51; display:none; max-width:560px; margin:0 auto; box-shadow:0 18px 50px rgba(15,15,20,.28);}
.sheet h4{margin:0 0 4px; font-size:16px; font-weight:800; padding-right:64px;}
.sheet .amtbig{font-size:28px; font-weight:800; color:var(--acc); margin-bottom:12px; letter-spacing:-.8px;}
.sheet li{font-size:14px; margin-bottom:9px; color:var(--ink); line-height:1.65;}
.sheet .close{position:absolute; right:14px; top:14px;}
.fab{position:fixed; right:18px; bottom:22px; z-index:30; border-radius:30px; padding:14px 22px; font-size:15px; box-shadow:0 8px 24px rgba(20,20,25,.24);}

/* 선수 화면(사장 열람): 왼쪽 선수 명단 */
.pwrap{display:grid; grid-template-columns:1fr; gap:13px; align-items:start;}
@media (min-width:820px){ .pwrap{grid-template-columns:158px minmax(0,1fr);} }
.psidebar .li{border-top:none; font-size:14px; border-radius:10px;}
.psidebar .li.on{background:var(--accbg); color:var(--acc); font-weight:700;}
@media (max-width:819px){ .psidebar .card{display:flex; gap:7px; overflow-x:auto; padding:10px;} .psidebar .mut{display:none;} .psidebar .li{flex:none; white-space:nowrap; padding:7px 13px !important; background:var(--field); border-radius:20px;} }

/* 방 카드 격자: 모바일 2개 · 웹 3개 · 9개 이상이면 4개 */
.roomgrid{display:grid; gap:11px; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; margin-bottom:13px;}
@media (min-width:820px){ .roomgrid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:13px;} .roomgrid.many{grid-template-columns:repeat(4, minmax(0,1fr));} }
@media (min-width:900px){ .wrap{max-width:1180px;} }
.roomgrid .ilbo{margin-bottom:0;}
.roomgrid .ib-body{flex-direction:column;}
.roomgrid .ib-l{border-right:none; border-bottom:1px solid var(--line); padding:8px 11px;}
.roomgrid .ib-r{padding:8px 11px;}
.roomgrid .ib-main{padding:6px 9px; font-size:13.5px;}
.roomgrid .ib-t5{width:46px; font-size:13.5px;}
.roomgrid .ib-p{font-size:12.5px; gap:6px; margin-bottom:5px;}
.roomgrid .ib-num{min-width:23px; height:23px; font-size:11.5px;}
.roomgrid .ib-row{font-size:12.5px;}
.roomgrid .ib-wari, .roomgrid .ib-total{font-size:12.5px; padding:7px 11px;}

/* 일보지 양식 방 카드 (구조 유지 · 테두리만 부드럽게) */
.ilbo{border:none; border-radius:16px; overflow:hidden; margin-bottom:13px; background:var(--card); box-shadow:var(--sh);}
.ib-head{display:flex; align-items:center; border-bottom:1px solid var(--line); font-size:14.5px; cursor:pointer; min-height:42px; background:var(--field);}
.ib-t5{width:58px; flex:none; border-right:1px solid var(--line); text-align:center; font-weight:800; align-self:stretch; display:flex; align-items:center; justify-content:center;}
.ib-main{padding:7px 12px; font-weight:800;}
.ib-body{display:flex; min-height:68px;}
.ib-l{flex:1; padding:10px 12px; border-right:1px solid var(--line);}
.ib-r{flex:1.15; padding:10px 12px;}
.ib-row{display:flex; gap:8px; font-size:13px; margin-bottom:4px; align-items:baseline;}
.ib-n{word-break:keep-all;}
.ib-t{font-weight:700; letter-spacing:1px; font-size:14px; white-space:nowrap;}
.ib-price{font-size:9.5px; font-weight:600; color:var(--sub); vertical-align:super; letter-spacing:0; margin-left:1px;}
.ib-p{font-size:13px; margin-bottom:6px; display:flex; gap:7px; align-items:center;}
.ib-num{display:inline-flex; align-items:center; justify-content:center; min-width:27px; height:27px; padding:0 4px; border:1.8px solid var(--acc); border-radius:50%; font-weight:700; font-size:12.5px; color:var(--acc); flex:none;}
.ib-pull{background:var(--field); border-radius:20px; padding:1px 9px; font-size:10.5px; font-weight:700; color:var(--sub); flex:none;}
.ib-mu{background:#e6f4e9; border-radius:8px; padding:2px 8px; color:#256b2a;}
[data-theme="dark"] .ib-mu{background:#20301f; color:#8fc78f;}
.wa-box{background:#fdf0e2; border-radius:9px; padding:2px 9px; color:#a9541b; font-weight:700;}
.wa-box .amt{border-bottom:none; color:inherit; font-weight:700;}
.wa-mark{color:#B85A1E; font-weight:800;}
[data-theme="dark"] .wa-box{background:#33291c; color:#e0a35c;}
[data-theme="dark"] .wa-mark{color:#e0a35c;}
.ib-p.ib-paid, .ib-p.ib-paid b, .ib-p.ib-paid .mut{color:#a9a49c; text-decoration:line-through; text-decoration-color:#d6d2cb;}
.ib-p.ib-paid .ib-num{color:#a9a49c; border-color:#dcd8d1; text-decoration:none;}
.ib-p.ib-paid .ib-mu{background:var(--field); color:#a9a49c;}
.ib-wari{background:linear-gradient(135deg,#fff2e4 0%,#fffaf5 70%); color:#a9541b; font-size:13px; font-weight:700; padding:8px 12px; border-top:1px solid var(--line);}
[data-theme="dark"] .ib-wari{background:linear-gradient(135deg,#33291c 0%,#22201c 70%); color:#e0a35c;}
.ib-total{border-top:1px solid var(--line); padding:9px 12px; font-size:14px; cursor:pointer; background:var(--field);}
.ib-detail{border-top:1px solid var(--line); padding:6px 12px 10px;}

@media (max-width:480px){ .wrap{padding:12px 10px 96px;} .topbar h1{font-size:20px;} .card{padding:14px 15px;} }