:root{
  --bg:#f3f4f1; --card:#fff; --text:#141414; --muted:#6b6f66; --line:#e4e6e0;
  /* PCHIgh 브랜드: 검정 + 형광연두 */
  --ink:#111111; --accent:#c6ff00; --accent-d:#b2e600;
  --primary:#3d6a00; --primary-d:#2e5000; /* 흰 바탕 위 글자용 진한 연두 */
  --ok:#14945a; --warn:#c77700; --bad:#d23b3b;
  --ok-bg:#e7f6ee; --warn-bg:#fff4e0; --bad-bg:#fdecec; --info-bg:#efffc7;
  --radius:12px; --shadow:0 1px 3px rgba(20,30,50,.08),0 4px 14px rgba(20,30,50,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;-webkit-text-size-adjust:100%}
h1,h2,h3{margin:0 0 .5em;line-height:1.3}
h2{font-size:1.2rem} h3{font-size:1.05rem}
a{color:var(--primary)}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:.85rem}
.right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.stack>*+*{margin-top:12px}

/* 버튼 */
.btn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:9px;padding:8px 14px;font:inherit;cursor:pointer;white-space:nowrap}
.btn:hover{background:#f0f3f8}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:700}
.btn.primary:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.danger{color:var(--bad);border-color:#f1c4c4}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.sm{padding:4px 10px;font-size:.85rem;border-radius:7px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.link{border:none;background:none;color:var(--primary);padding:2px 4px}

/* 입력 */
label.f{display:block;font-size:.85rem;color:var(--muted);margin-bottom:10px}
label.f>input,label.f>select,label.f>textarea{display:block;width:100%;margin-top:4px}
input,select,textarea{font:inherit;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;color:var(--text);max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);border-color:var(--ink)}
input[type=checkbox]{width:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}

/* 카드/표 */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-weight:600;color:var(--muted);font-size:.82rem;background:#fafbfd;white-space:nowrap}
tr.total td{font-weight:700;background:#fafbfd}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.badge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.78rem;font-weight:600;background:#eef1f6;color:var(--muted);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.info{background:var(--info-bg);color:var(--primary)}

.alert{padding:10px 14px;border-radius:10px;background:var(--info-bg);font-size:.9rem}
.alert.warn{background:var(--warn-bg)} .alert.bad{background:var(--bad-bg)}

/* 모달 */
.overlay{position:fixed;inset:0;background:rgba(15,20,30,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 12px;overflow-y:auto;z-index:50}
.modal{background:#fff;border-radius:14px;width:100%;max-width:520px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.modal.wide{max-width:820px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1d2433;color:#fff;padding:10px 18px;border-radius:10px;font-size:.92rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:80;max-width:90vw;text-align:center}
#toast.show{opacity:1}

/* 관리자 레이아웃 */
.sticky-head{position:sticky;top:0;z-index:20}
.topbar{background:var(--ink);color:#fff;border-bottom:3px solid var(--accent);display:flex;align-items:center;gap:12px;padding:10px 16px;flex-wrap:wrap}
.topbar .brand{font-weight:700;gap:10px}
.topbar .muted{color:#a8ab9f}
.topbar select,.topbar .btn{background:#222;color:#fff;border-color:#3a3a3a}
.topbar .btn:hover{background:#333}
.brand-logo{height:34px;width:auto}
.brand-bar{background:#000;text-align:center;padding:8px 0 6px}
.brand-bar img{height:56px;width:auto;display:inline-block}
.tabs{display:flex;gap:4px;overflow-x:auto;padding:8px 16px;background:#fff;border-bottom:1px solid var(--line)}
.tabs button{border:none;background:none;padding:8px 12px;border-radius:8px;font:inherit;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button.on{background:var(--ink);color:var(--accent);font-weight:700}
.page{max-width:1100px;margin:0 auto;padding:16px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.stat .v{font-size:1.5rem;font-weight:700}
.stat .k{font-size:.82rem;color:var(--muted)}

/* 스케줄 */
.sched td,.sched th{min-width:96px;vertical-align:top}
.sched td.cell{cursor:pointer}
.sched td.cell:hover{background:#f5f8ff}
.shift{display:block;background:var(--info-bg);color:var(--primary);border-radius:6px;padding:2px 6px;margin-bottom:3px;font-size:.8rem;white-space:nowrap}

/* 직원 앱 */
.emp-app{max-width:480px;margin:0 auto;padding:16px 16px 90px}
.emp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.big-clock{font-size:2.6rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:1px}
.store-card{margin-top:12px}
.store-card .st{font-size:1.05rem;font-weight:700}
.punch{width:100%;padding:18px;font-size:1.25rem;font-weight:700;border-radius:12px;margin-top:10px}
.punch.in{background:var(--accent);color:var(--ink);border:none}
.punch.out{background:var(--bad);color:#fff;border:none}
.punch:disabled{opacity:.35;cursor:not-allowed}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:var(--ink);border-top:none;display:flex;justify-content:space-around;padding:6px 0 calc(6px + env(safe-area-inset-bottom));z-index:30}
.bottom-nav button{border:none;background:none;font:inherit;font-size:.82rem;color:#9a9d93;padding:6px 10px;cursor:pointer}
.bottom-nav button.on{color:var(--accent);font-weight:700}
.list-item{padding:12px 0;border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:none}

/* 인쇄 */
#printArea{display:none}
@media print{
  body.printing>*:not(#printArea){display:none!important}
  body.printing #printArea{display:block}
  body{background:#fff}
}
.slip{font-size:13px;color:#000;max-width:720px;margin:0 auto}
.slip h1{text-align:center;font-size:22px;margin-bottom:16px}
.slip table{font-size:12.5px;margin-bottom:12px}
.slip th,.slip td{border:1px solid #999;padding:5px 8px}
.slip th{background:#f2f2f2;color:#000}