:root{
  color-scheme: light;
  --page:#f9f9f7;
  --surface:#fcfcfb;
  --surface-2:#f2f0ea;
  --ink:#0b0b0b;
  --ink-2:#52514e;
  --ink-muted:#898781;
  --line:#e1e0d9;
  --border:rgba(11,11,11,0.10);
  --brand:#b5651d;
  --brand-dark:#8f4f16;
  --brand-soft:#f6e9da;
  --good:#0ca30c;
  --good-soft:#e6f6e3;
  --critical:#d03b3b;
  --critical-soft:#fbeceb;
  --warning:#c98500;
  --warning-soft:#fbf0da;
  --radius:14px;
  --shadow:0 1px 2px rgba(11,11,11,.05), 0 6px 20px rgba(11,11,11,.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  background:var(--page);
  color:var(--ink);
  line-height:1.5;
  padding-bottom:60px;
}
header.top{
  background:linear-gradient(135deg,#7a4514,#b5651d 60%,#c97a2e);
  color:#fff;
  padding:22px 24px 60px;
  position:relative;
}
header.top h1{margin:0 0 4px;font-size:22px;letter-spacing:.2px;}
header.top p{margin:0;font-size:13px;opacity:.85;}
.nav{
  max-width:1080px;margin:-38px auto 0;padding:0 20px;
  display:flex;gap:8px;position:relative;z-index:5;
}
.nav button{
  flex:1;padding:12px 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:600;
  cursor:pointer;box-shadow:var(--shadow);transition:.15s;
}
.nav button.active{background:var(--brand);color:#fff;border-color:var(--brand);}
.wrap{max-width:1080px;margin:24px auto 0;padding:0 20px;}
.view{display:none;}
.view.active{display:block;}
section.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:20px;box-shadow:var(--shadow);
}
section.panel h2{margin:0 0 4px;font-size:16px;}
section.panel .sub{margin:0 0 14px;color:var(--ink-muted);font-size:12.5px;}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.row-between h2{margin:0;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--ink);font-size:13.5px;font-weight:600;
  cursor:pointer;transition:.15s;
}
.btn:hover{filter:brightness(0.97);}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand-dark);}
.btn.primary:hover{background:var(--brand-dark);}
.btn.ghost{background:transparent;}
.btn.danger{background:var(--critical-soft);color:var(--critical);border-color:transparent;}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:8px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* Massage type menu (customer) */
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.type-card{
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-2);
}
.type-card .name{font-weight:700;font-size:14px;margin-bottom:4px;}
.type-card .price{color:var(--brand-dark);font-weight:700;font-size:14px;}
.type-card .unit{color:var(--ink-muted);font-size:11.5px;font-weight:400;}

/* Masseuse grid */
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
.m-card{
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.15s;position:relative;
}
.m-card:hover{transform:translateY(-2px);}
.m-card .info{padding:10px 12px 12px;}
.m-card .name{font-weight:700;font-size:14.5px;}
.m-card .age{color:var(--ink-muted);font-size:12.5px;margin-top:1px;}
.m-card .badge{
  position:absolute;top:8px;left:8px;background:rgba(11,11,11,.55);color:#fff;
  font-size:11px;padding:3px 8px;border-radius:999px;
}
.m-card .hint{font-size:11.5px;color:var(--brand-dark);margin-top:6px;font-weight:600;}

/* Photo box - 명함판 (5.3cm x 3.6cm ratio) */
.photo-box{
  width:100%;aspect-ratio:5.3/3.6;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.photo-box img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-box .placeholder{color:var(--ink-muted);}
.photo-box.editable{cursor:pointer;}
.photo-box.editable .overlay{
  position:absolute;inset:0;background:rgba(11,11,11,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
  opacity:0;transition:.15s;text-align:center;padding:6px;
}
.photo-box.editable:hover .overlay{opacity:1;}

/* Admin masseuse card extras */
.m-card.admin .info{padding-bottom:10px;}
.m-card.admin .actions{display:flex;gap:6px;padding:0 12px 12px;}
.add-card{
  border:2px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;min-height:200px;cursor:pointer;
  color:var(--ink-muted);background:var(--surface-2);
}
.add-card:hover{color:var(--brand-dark);border-color:var(--brand);}
.add-card .plus{font-size:30px;line-height:1;}

/* Admin type table */
table.types-table{width:100%;border-collapse:collapse;font-size:13.5px;}
table.types-table th,table.types-table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;}
table.types-table th{color:var(--ink-muted);font-weight:600;font-size:12px;}
table.types-table td.price{font-weight:700;color:var(--brand-dark);}
table.types-table td.actions{white-space:nowrap;}

/* Revenue */
.rev-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px;
}
.stat-tile{
  background:var(--brand-soft);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
}
.stat-tile .label{font-size:12px;color:var(--ink-2);margin-bottom:4px;}
.stat-tile .value{font-size:22px;font-weight:800;color:var(--brand-dark);}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.rev-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface-2);}
.rev-card .head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.rev-card .head img.thumb, .rev-card .head .thumb-ph{
  width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink-muted);flex-shrink:0;border:1px solid var(--border);
}
.rev-card .head .name{font-weight:700;font-size:14px;}
.rev-card .head .count{font-size:12px;color:var(--ink-muted);}
.rev-card ul{list-style:none;margin:0;padding:0;font-size:12.5px;}
.rev-card li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line);color:var(--ink-2);}
.rev-card .total{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-weight:700;font-size:13.5px;}
.rev-card .total .v{color:var(--brand-dark);}
.empty{color:var(--ink-muted);font-size:13px;padding:20px 0;text-align:center;}

/* Sub nav (admin tabs) */
.subnav{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.subnav button{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;
}
.subnav button.active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* Modal */
.modal-backdrop{
  display:none;position:fixed;inset:0;background:rgba(11,11,11,.5);
  align-items:center;justify-content:center;z-index:100;padding:16px;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--surface);border-radius:16px;max-width:480px;width:100%;
  max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.modal .m-head{
  display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2;
}
.modal .m-head h3{margin:0;font-size:15.5px;}
.modal .m-body{padding:16px 18px;}
.modal .m-foot{padding:12px 18px 18px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--line);}
.close-x{background:none;border:none;font-size:18px;color:var(--ink-muted);cursor:pointer;line-height:1;padding:4px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.field input[type=text],.field input[type=number],.field input[type=date],.field input[type=tel],.field input[type=password]{
  width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line);font-size:14px;background:var(--surface);color:var(--ink);
}
.field input:focus{outline:2px solid var(--brand);outline-offset:1px;}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);
  font-size:13px;cursor:pointer;font-weight:600;color:var(--ink-2);
}
.chip.selected{background:var(--brand);color:#fff;border-color:var(--brand-dark);}
.chip small{display:block;font-weight:400;font-size:10.5px;opacity:.85;}

.time-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
.time-slot{
  padding:8px 2px;text-align:center;border-radius:8px;border:1px solid var(--line);
  background:var(--surface-2);font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;
}
.time-slot.selected{background:var(--good);color:#fff;border-color:var(--good);}
.time-slot.disabled{background:var(--surface);color:var(--ink-muted);text-decoration:line-through;cursor:not-allowed;border-color:var(--line);opacity:.55;}

.summary-box{
  background:var(--brand-soft);border-radius:10px;padding:12px 14px;font-size:13.5px;margin-top:14px;
}
.summary-box .line{display:flex;justify-content:space-between;padding:2px 0;color:var(--ink-2);}
.summary-box .line.total{font-weight:800;font-size:15px;color:var(--brand-dark);border-top:1px dashed var(--border);margin-top:6px;padding-top:8px;}

.photo-upload-row{display:flex;align-items:center;gap:12px;}
.photo-upload-row .photo-box{width:120px;flex-shrink:0;}

/* Toast */
#toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;font-size:13.5px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.2s;z-index:200;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.lock-note{font-size:11.5px;color:var(--ink-muted);margin-top:2px;}
input[type=file].hidden-input{display:none;}
@media (max-width:480px){
  .time-grid{grid-template-columns:repeat(4,1fr);}
}