/* 청소 구역 배정 — 앱 전용 스타일 (색은 공용 테마 변수) */

.topbar h1{color:var(--ink)}
.eyebrow{color:var(--sage)}
.chip{background:var(--sage-soft); color:var(--ink); border-color:transparent}
.btn.primary{background:linear-gradient(135deg,var(--sage),var(--primary-soft))}

.hint-bar{
  background:var(--sage-soft); border:1px solid var(--line); border-radius:12px;
  padding:12px 16px; font-size:13px; color:var(--ink); margin-bottom:20px; line-height:1.7;
}
.help{font-size:12px; color:var(--ink-soft); margin-top:10px; line-height:1.6}
.help.center{text-align:center}
.actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.row-links{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:6px 0 4px}

.mini{
  background:var(--paper-2); border:1px solid var(--line); color:var(--ink-soft);
  border-radius:9px; padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer; transition:.14s;
}
.mini:hover{border-color:var(--sage); color:var(--ink)}
.mini.danger:hover{border-color:var(--rose); color:var(--rose)}

/* 구역 목록 */
.zone-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.zone-row{
  display:flex; align-items:center; gap:9px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:9px 11px;
}
.zone-row .ico{font-size:1.15rem; flex:0 0 auto}
.zone-row input[type=text]{
  flex:1; min-width:0; background:transparent; border:1px solid transparent; border-radius:8px;
  padding:6px 8px; font:inherit; font-size:14px; color:var(--ink);
}
.zone-row input[type=text]:hover{border-color:var(--line)}
.zone-row input[type=text]:focus{border-color:var(--sage); background:var(--paper); outline:none}
.zone-row .num{display:flex; align-items:center; gap:4px; flex:0 0 auto}
.zone-row .num button{
  width:26px; height:26px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font:inherit; font-size:14px; cursor:pointer; line-height:1;
}
.zone-row .num button:hover{border-color:var(--sage)}
.zone-row .num b{min-width:22px; text-align:center; font-size:14px}
.zone-row .del{background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:13px; padding:4px}
.zone-row .del:hover{color:var(--rose)}

/* 배정 결과 */
.zone-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-top:16px}
.zone-card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 15px 12px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.zone-card::before{content:''; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--sage); opacity:.8}
.zone-card h3{font-family:'Gowun Dodum',sans-serif; font-weight:400; font-size:1.02rem; margin-bottom:2px; color:var(--ink)}
.zone-card .cap{font-size:11.5px; color:var(--ink-soft); margin-bottom:9px}
.members{display:flex; flex-wrap:wrap; gap:6px}
.member{
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; font-size:13px; cursor:pointer; transition:.13s; user-select:none;
}
.member:hover{border-color:var(--sage); transform:translateY(-1px)}
.member.picked{background:var(--sage); border-color:transparent; color:#fff; font-weight:700}
.member.fresh{box-shadow:0 0 0 2px var(--sage-soft)}
.zone-card.empty .members{color:var(--ink-soft); font-size:12.5px}

/* 이력 */
.hist-wrap{overflow-x:auto}
.hist-table{border-collapse:collapse; width:100%; font-size:13px}
.hist-table th,.hist-table td{border-bottom:1px solid var(--line-soft); padding:7px 10px; text-align:left; white-space:nowrap}
.hist-table th{font-size:11px; letter-spacing:.05em; color:var(--ink-soft); font-weight:500}
.hist-table td.name{font-weight:700}
.hist-empty{font-size:13px; color:var(--ink-soft); padding:6px 2px}

/* 토스트 */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); border:1px solid var(--line);
  padding:11px 20px; border-radius:12px; font-size:14px; z-index:99;
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.toast.show{opacity:1}

/* 인쇄 — 배정 결과만 */
@media print{
  .topbar nav, .hint-bar, .cta, .row-links, .actions, .footer, .toast,
  #histPanel, .panel:nth-of-type(1), .panel:nth-of-type(2), .help{display:none !important}
  .panel{box-shadow:none; border:none; padding:0; margin:0}
  .zone-grid{grid-template-columns:repeat(3,1fr); gap:10px}
  .zone-card{break-inside:avoid; box-shadow:none; border:1px solid #bbb}
  .member{border:1px solid #ccc}
}