/* ───────── 디자인 토큰 (목업 docs/mockups/worker-task-web 이식) ───────── */
:root{
  --c-primary:#1f6feb; --c-primary-dark:#1b5fce;
  --c-wait:#8a94a6; --c-progress:#f59e0b; --c-done:#16a34a; --c-hold:#8b5cf6;
  --c-danger:#dc2626; --c-bg:#eef1f5; --c-card:#ffffff;
  --c-text:#1f2733; --c-text-sub:#6b7480; --c-line:#e2e6ec;
  --radius:14px; --tap:52px;
  --shadow:0 1px 3px rgba(20,30,50,.08), 0 4px 14px rgba(20,30,50,.06);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:"맑은 고딕","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  background:var(--c-bg); color:var(--c-text); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.app{max-width:480px; margin:0 auto; min-height:100vh; background:var(--c-bg);
  position:relative; display:flex; flex-direction:column;}

/* ───────── 공통 헤더 ───────── */
.topbar{background:var(--c-primary); color:#fff; padding:14px 16px; display:flex;
  align-items:center; gap:10px; min-height:56px; box-shadow:0 2px 8px rgba(31,111,235,.25);
  position:sticky; top:0; z-index:5;}
.topbar .title{font-size:17px; font-weight:700;}
.topbar .sub{font-size:12px; opacity:.85; font-weight:400;}
.topbar .brand-ico{width:30px; height:30px; border-radius:7px; background:#fff; padding:3px;
  object-fit:contain; flex:none;}
.icon-btn{width:40px; height:40px; border:none; background:rgba(255,255,255,.15); color:#fff;
  border-radius:10px; font-size:18px; cursor:pointer; display:flex; align-items:center;
  justify-content:center;}
.icon-btn:active{background:rgba(255,255,255,.3);}

/* 전구(전달사항) 배지 */
.alert-btn{position:relative;}
.alert-badge{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  background:var(--c-danger); color:#fff; font-size:11px; font-weight:800; line-height:18px;
  border-radius:9px; text-align:center; box-shadow:0 0 0 2px var(--c-primary);
}

/* 전달사항 모달 */
.modal-wrap{
  position:fixed; inset:0; background:rgba(20,30,50,.45); display:none;
  align-items:center; justify-content:center; z-index:20; padding:18px;
}
.modal-wrap.open{display:flex;}
.modal{
  background:#fff; width:100%; max-width:440px; max-height:85vh; border-radius:18px;
  box-shadow:0 12px 40px rgba(20,30,50,.3); display:flex; flex-direction:column; overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid var(--c-line);
}
.modal-head .m-title{font-size:17px; font-weight:800; flex:1;}
.modal-head .m-close{
  width:34px; height:34px; border:none; background:var(--c-bg); border-radius:9px;
  font-size:15px; cursor:pointer; color:var(--c-text-sub);
}
.modal-body{padding:14px 16px; overflow-y:auto;}
.alert-empty{text-align:center; color:var(--c-text-sub); padding:30px 10px;}

.alert-card{
  border:1px solid var(--c-line); border-radius:12px; padding:12px 14px; margin-bottom:12px;
  background:var(--c-card);
}
.alert-card.done{background:#f6f8fb;}
.alert-date{font-size:12px; color:var(--c-text-sub); font-weight:700; margin-bottom:6px;}
.alert-msg{
  font-size:15px; color:var(--c-text); white-space:pre-wrap; line-height:1.5;
  background:var(--c-bg); border-radius:10px; padding:10px 12px; margin-bottom:10px;
}
.alert-confirmed{
  font-size:13px; color:#137a37; background:#e8f5ec; border-radius:10px; padding:9px 12px; line-height:1.5;
}
.alert-confirmed b{color:var(--c-text);}

.alert-resp .quick{display:flex; gap:8px; margin-bottom:8px;}
.alert-resp .qbtn{
  flex:1; min-height:42px; border:1px solid #b9d4ff; background:#f3f8ff; color:var(--c-primary);
  border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
}
.alert-resp .qbtn:active{background:#e3ecfb;}
.alert-resp .resp-text{
  width:100%; border:1px solid var(--c-line); border-radius:10px; padding:10px 12px;
  font-size:15px; font-family:inherit; resize:vertical; outline:none; margin-bottom:8px;
}
.alert-resp .resp-text:focus{border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(31,111,235,.12);}
.alert-resp .send-btn{
  width:100%; min-height:46px; border:none; border-radius:10px; background:var(--c-primary);
  color:#fff; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit;
}
.alert-resp .send-btn:active{background:var(--c-primary-dark);}

/* 토스트(서버 메시지) */
.flash{margin:10px 12px 0; background:#1f2733; color:#fff; padding:11px 16px;
  border-radius:12px; font-size:14px; font-weight:600;}

/* ───────── 로그인 ───────── */
.login{display:flex; flex-direction:column; min-height:100vh;
  background:linear-gradient(160deg,#1f6feb 0%,#1b5fce 42%,#eef1f5 42%);}
.login-brand{padding:48px 24px 28px; color:#fff;}
.login-brand .logo{width:64px; height:64px; border-radius:18px; background:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  box-shadow:var(--shadow); overflow:hidden;}
.login-brand .logo img{width:46px; height:46px; object-fit:contain;}
.login-brand h1{margin:0; font-size:24px; font-weight:800; letter-spacing:-.5px;}
.login-brand p{margin:4px 0 0; font-size:14px; opacity:.9;}
.login-card{margin:0 16px 16px; background:var(--c-card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; flex:1;}
.login-card h2{margin:2px 0 16px; font-size:18px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:13px; font-weight:700; color:var(--c-text-sub); margin-bottom:6px;}
.input-wrap{display:flex; align-items:center; gap:8px; background:var(--c-bg);
  border:1px solid var(--c-line); border-radius:12px; padding:0 12px; height:52px; transition:.12s;}
.input-wrap:focus-within{border-color:var(--c-primary); background:#fff;
  box-shadow:0 0 0 3px rgba(31,111,235,.12);}
.input-wrap input{border:none; background:transparent; flex:1; font-size:16px; outline:none; color:var(--c-text);}
.login-err{color:var(--c-danger); font-size:13px; font-weight:600; min-height:18px; margin:-2px 2px 8px;}
.keep-row{display:flex; align-items:center; gap:9px; margin:2px 2px 18px; font-size:15px; cursor:pointer; user-select:none;}
.keep-row input{width:20px; height:20px; accent-color:var(--c-primary);}
.btn-login{width:100%; min-height:54px; border:none; border-radius:12px; background:var(--c-primary);
  color:#fff; font-size:17px; font-weight:800; cursor:pointer; font-family:inherit;}
.btn-login:active{background:var(--c-primary-dark); transform:translateY(1px);}

/* ───────── 탭 ───────── */
.tabs{display:flex; background:var(--c-card); border-bottom:1px solid var(--c-line);
  position:sticky; top:56px; z-index:4;}
.tab{flex:1; text-align:center; padding:12px 4px; font-size:14px; font-weight:600;
  color:var(--c-text-sub); cursor:pointer; border-bottom:3px solid transparent;
  display:flex; flex-direction:column; align-items:center; gap:3px;}
.tab.active{color:var(--c-primary); border-bottom-color:var(--c-primary);}
.tab .cnt{font-size:11px; min-width:20px; padding:1px 7px; border-radius:10px;
  background:var(--c-bg); color:var(--c-text-sub); font-weight:700;}
.tab.active .cnt{background:var(--c-primary); color:#fff;}

/* ───────── 조회일자 필터 바 ───────── */
.datebar{
  display:flex; align-items:center; gap:8px; background:var(--c-card);
  border-bottom:1px solid var(--c-line); padding:8px 10px;
  position:sticky; top:56px; z-index:4;
}
.datebar .db-nav{
  width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--c-line); border-radius:12px; background:var(--c-bg);
  font-size:22px; font-weight:800; color:var(--c-primary);
}
.datebar .db-nav:active{background:#e3ecfb;}
.datebar .db-date{
  flex:1; text-align:center; font-size:14px; color:var(--c-text-sub); font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.datebar .db-date b{color:var(--c-text); font-weight:800; font-size:15px;}
.datebar .db-today{
  font-size:11px; font-weight:700; color:#fff; background:var(--c-primary);
  padding:2px 8px; border-radius:20px;
}
.datebar .db-reset{
  font-size:12px; font-weight:700; color:var(--c-primary);
  border:1px solid var(--c-line); border-radius:20px; padding:3px 10px; background:var(--c-bg);
}

/* ───────── 목록 ───────── */
.list{padding:12px 12px 40px; flex:1;}
.card{display:block; background:var(--c-card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px; margin-bottom:10px; border-left:4px solid var(--c-wait); position:relative;}
.card.s-progress{border-left-color:var(--c-progress);}
.card.s-done{border-left-color:var(--c-done);}
.card.s-hold{border-left-color:var(--c-hold);}
.card-head{display:flex; align-items:flex-start; gap:8px; margin-bottom:8px;}
.card-head .place{font-size:16px; font-weight:800; flex:1; letter-spacing:-.3px;}
.badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; color:#fff;
  white-space:nowrap; flex:none;}
.b-wait{background:var(--c-wait);}
.b-progress{background:var(--c-progress);}
.b-done{background:var(--c-done);}
.b-hold{background:var(--c-hold);}
.card .product{font-size:14px; color:var(--c-text); margin-bottom:8px;}
.card .product.fabric{display:flex; align-items:center; gap:10px;}
.fabric-img{
  width:104px; height:62px; flex:none; object-fit:contain; border-radius:8px;
  border:1px solid var(--c-line); background:#fff; padding:2px;
}
.fabric-no{font-size:13px; color:var(--c-text); font-weight:700;}
/* 목록 카드: 원단이미지 + 정보 + 어닝모양 한 줄 */
.product-row{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.product-row .prod-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.product-row .size-text{font-size:12px; color:var(--c-text-sub); white-space:pre-line; line-height:1.35;}
.awning-img{
  width:56px; height:56px; flex:none; object-fit:contain; border-radius:10px;
  border:1px solid var(--c-line); background:#fff;
}
/* 상세: 큰 원단/어닝 이미지 */
.fabric-block{display:flex; gap:10px; margin:10px 0 4px; flex-wrap:wrap;}
.fabric-img-lg{
  flex:1 1 160px; max-width:100%; max-height:240px; object-fit:contain;
  border-radius:12px; border:1px solid var(--c-line); background:var(--c-bg);
}
.awning-img-lg{
  flex:0 0 110px; width:110px; max-height:140px; object-fit:contain;
  border-radius:12px; border:1px solid var(--c-line); background:#fff;
}
.detail-card .sub-memo{color:var(--c-text-sub); font-size:13px; margin-bottom:2px;}
/* 다중행 값 / 메모 */
.row .v.pre{white-space:pre-line; line-height:1.45;}
.memo-text{white-space:pre-line; font-size:15px; line-height:1.55; color:var(--c-text);}
.meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--c-text-sub);}
.meta b{color:var(--c-text); font-weight:600;}
.due{color:var(--c-danger); font-weight:700;}
.floor-mini{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.fm{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700;
  padding:4px 9px; border-radius:8px; background:var(--c-bg); color:var(--c-text-sub);}
.fm .dot{width:8px; height:8px; border-radius:50%; background:var(--c-wait);}
.fm.s-progress{color:#b46708; background:#fff5e6;} .fm.s-progress .dot{background:var(--c-progress);}
.fm.s-done{color:#137a37; background:#e8f5ec;} .fm.s-done .dot{background:var(--c-done);}
.fm.s-hold{color:#6d28d9; background:#f3effe;} .fm.s-hold .dot{background:var(--c-hold);}
.chev{position:absolute; right:14px; bottom:14px; color:var(--c-line); font-size:18px;}

.empty{text-align:center; color:var(--c-text-sub); padding:60px 20px; font-size:14px;}
.empty .e-ico{font-size:42px; opacity:.4; margin-bottom:10px;}

/* 페이저 */
.pager{display:flex; align-items:center; gap:10px; justify-content:center; padding:8px 0 16px;}
.pager .pg{min-width:84px; min-height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--c-card); border:1px solid var(--c-line); border-radius:12px; box-shadow:var(--shadow);
  font-size:15px; font-weight:700; color:var(--c-primary);}
.pager .pg.disabled{color:var(--c-text-sub); opacity:.5; box-shadow:none; cursor:default;}
.pager .pg-info{text-align:center; font-size:13px; color:var(--c-text-sub); font-weight:700; line-height:1.4;}
.pager .pg-total{font-size:11px; font-weight:600; opacity:.8;}

/* ───────── 상세 ───────── */
.detail-body{flex:1; padding:14px 14px 40px;}
.detail-card{background:var(--c-card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; margin-bottom:12px;}
.detail-card h3{margin:0 0 12px; font-size:13px; color:var(--c-text-sub); font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;}
.big-place{font-size:22px; font-weight:800; letter-spacing:-.5px; margin-bottom:4px;}
.row{display:flex; padding:9px 0; border-bottom:1px solid var(--c-line); font-size:15px;}
.row:last-child{border-bottom:none;}
.row .k{width:110px; color:var(--c-text-sub); flex:none;}
.row .v{flex:1; font-weight:600;}
.opt-tags{display:flex; flex-wrap:wrap; gap:6px;}
.opt{font-size:13px; background:var(--c-bg); border:1px solid var(--c-line); border-radius:8px;
  padding:5px 10px; font-weight:600;}

.floors-title{font-size:13px; color:var(--c-text-sub); font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; margin:4px 4px 8px;}
.floor-card{background:var(--c-card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 16px 16px; margin-bottom:12px; border-top:4px solid var(--c-wait);}
.floor-card.s-progress{border-top-color:var(--c-progress);}
.floor-card.s-done{border-top-color:var(--c-done);}
.floor-card.s-hold{border-top-color:var(--c-hold);}
.floor-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.floor-tag{font-size:15px; font-weight:800; padding:4px 12px; border-radius:10px;
  background:var(--c-bg); color:var(--c-text);}
.floor-head .badge{margin-left:auto;}
.floor-time{font-size:13px; color:var(--c-text-sub); margin:6px 0 12px; display:flex; gap:16px;}
.floor-time b{color:var(--c-text); font-weight:600;}
.floor-time .done-t{color:var(--c-done);}

/* 층별 4상태 버튼 그룹 */
.state-btns{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.sbtn{min-height:var(--tap); border:1px solid var(--c-line); border-radius:12px;
  background:var(--c-bg); color:var(--c-text-sub); font-size:14px; font-weight:700;
  cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center;}
.sbtn:active{transform:translateY(1px);}
.sbtn.cur{cursor:default;}
.sbtn.cur.c-wait{background:var(--c-wait); color:#fff; border-color:var(--c-wait);}
.sbtn.cur.c-progress{background:var(--c-progress); color:#fff; border-color:var(--c-progress);}
.sbtn.cur.c-done{background:var(--c-done); color:#fff; border-color:var(--c-done);}
.sbtn.cur.c-hold{background:var(--c-hold); color:#fff; border-color:var(--c-hold);}