/* 임차인 모바일 웹 공통 스타일 — 신규 디자인 (Pretendard · Material Symbols · Toss 블루)
   모바일 우선, 390~520px 컨테이너, 하단 5탭 내비. 기존 유틸 클래스명 유지 + 신규 컴포넌트 추가 */
:root {
    /* brand */
    --primary: #3182F6;
    --primary-dark: #1f6fe5;
    --primary-grad: linear-gradient(135deg, #3182F6, #5b9bff);
    --purple: #7C5CFC;
    --green: #15B886;
    --green-text: #0e8f68;
    --orange: #FF8A3D;
    --orange-text: #E8890C;
    --danger: #F04452;
    /* surfaces */
    --bg: #F4F6F8;
    --card: #ffffff;
    --hero-grad: linear-gradient(135deg, #EAF2FE, #F3F1FF);
    /* soft accent backgrounds */
    --soft-blue: #EAF2FE;
    --soft-purple: #F1ECFE;
    --soft-green: #E6F7F1;
    --soft-orange: #FFF1E8;
    --soft-red: #FEECEE;
    --soft-amber: #FFF6E6;
    /* text */
    --text: #111827;
    --text-2: #3a4350;
    --text-3: #5b6472;
    --muted: #8a93a0;
    --muted-2: #9aa3af;
    /* lines */
    --border: #EAEDF0;
    --border-2: #E3E7EC;
    --line: #F1F3F6;
    /* shape */
    --radius: 20px;
    --radius-sm: 14px;
    --shadow: 0 3px 14px rgba(17, 24, 39, .05);
    --shadow-soft: 0 2px 8px rgba(17, 24, 39, .04);
    --tabbar-h: 72px;
    --maxw: 480px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.01em;
}
body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

/* Material Symbols 아이콘 */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal; font-style: normal;
    font-size: 22px; line-height: 1; letter-spacing: normal;
    text-transform: none; display: inline-block; white-space: nowrap;
    word-wrap: normal; direction: ltr; vertical-align: middle;
    -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.ms { font-family: 'Material Symbols Rounded'; display: inline-block; line-height: 1; vertical-align: middle;
    -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0; }
.ms.fill { font-variation-settings: 'FILL' 1; }

.app { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; }

/* ── 헤더 ───────────────────────────────────────── */
.app-header {
    position: sticky; top: 0; z-index: 30;
    background: rgba(244, 246, 248, .92);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; gap: 8px;
    min-height: 56px; padding: 8px 12px;
}
.app-header h1 { flex: 1; text-align: center; font-size: 16px; font-weight: 700; color: var(--text); }
.app-header.left h1 { text-align: left; font-size: 20px; font-weight: 800; padding-left: 4px; letter-spacing: -.02em; }
.app-header .header-actions { display: flex; align-items: center; gap: 8px; }
/* 원형 아이콘 버튼 (헤더 액션 / 뒤로가기) */
.icon-btn {
    width: 42px; height: 42px; flex-shrink: 0;
    border: 1px solid var(--border); background: var(--card); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2); text-decoration: none; cursor: pointer; position: relative;
    box-shadow: var(--shadow-soft);
}
.icon-btn .ms, .icon-btn .material-symbols-rounded { font-size: 22px; color: var(--text-2); }
.icon-btn.sm { width: 40px; height: 40px; }
.icon-btn.accent { background: var(--soft-blue); border-color: transparent; box-shadow: none; }
.icon-btn.accent .ms { color: var(--primary); }
.app-header .badge-dot {
    position: absolute; top: 8px; right: 10px;
    min-width: 7px; height: 7px; padding: 0;
    background: var(--danger); border: 1.5px solid #fff; border-radius: 50%;
}
.app-header .badge-dot.count {
    min-width: 16px; height: 16px; top: -2px; right: -2px; padding: 0 4px;
    color: #fff; font-size: 10px; line-height: 13px; font-weight: 700; text-align: center;
}
.header-spacer { width: 40px; flex-shrink: 0; }

/* ── 본문 ───────────────────────────────────────── */
.content { padding: 6px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.section-title { font-size: 13px; font-weight: 700; color: var(--text-2); margin: 4px 2px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-head .t { font-size: 14px; font-weight: 700; color: var(--text); }
.link-more { border: none; background: transparent; font-size: 12px; color: var(--primary); font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 2px; text-decoration: none; }
.link-more .ms { font-size: 15px; }

/* ── 카드 ───────────────────────────────────────── */
.card { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card.pad-sm { padding: 16px; }
.card.flat { box-shadow: none; border: 1px solid var(--border); }
.card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.card-row + .card-row { margin-top: 7px; }
.card-row .label { color: var(--muted); }
.card-row .value { font-weight: 700; color: var(--text); text-align: right; }
.divider { height: 1px; background: var(--line); margin: 13px 0; }

/* 히어로 (그라데이션) */
.hero { background: var(--hero-grad); border-radius: 22px; padding: 20px; position: relative; overflow: hidden; }
.hero .hero-icon { position: absolute; right: -12px; bottom: -18px; font-size: 120px;
    color: rgba(124, 92, 252, .12); font-variation-settings: 'FILL' 1; pointer-events: none; }
.hero-label { font-size: 12px; color: var(--text-3); font-weight: 600; margin-bottom: 6px; }
.hero-title { font-size: 21px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.hero-amount { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -.025em; }
.hero-sub { font-size: 13px; color: var(--text-3); margin-top: 4px; }

/* 아이콘 칩 (정사각 라운드) */
.ic { width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center;
    justify-content: center; flex-shrink: 0; }
.ic .ms { font-size: 22px; font-variation-settings: 'FILL' 1; }
.ic.sm { width: 38px; height: 38px; border-radius: 11px; }
.ic.sm .ms { font-size: 20px; }
.ic.lg { width: 44px; height: 44px; }
.ic.blue { background: var(--soft-blue); } .ic.blue .ms { color: var(--primary); }
.ic.purple { background: var(--soft-purple); } .ic.purple .ms { color: var(--purple); }
.ic.green { background: var(--soft-green); } .ic.green .ms { color: var(--green); }
.ic.orange { background: var(--soft-orange); } .ic.orange .ms { color: var(--orange); }
.ic.red { background: var(--soft-red); } .ic.red .ms { color: var(--danger); }
.ic.amber { background: var(--soft-amber); } .ic.amber .ms { color: var(--orange-text); }

/* ── KPI / 통계 ─────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kpi-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid.c4 { grid-template-columns: repeat(2, 1fr); }
.kpi { background: var(--card); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kpi .num { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.kpi .cap { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.kpi.center { text-align: center; padding: 16px 12px; }
.kpi.center .num { font-size: 26px; }
.kpi.center .cap { font-size: 11.5px; margin-top: 3px; }
.kpi.blue .num { color: var(--primary); } .kpi.red .num { color: var(--danger); }
.kpi.green .num { color: var(--green); } .kpi.purple .num { color: var(--purple); }
.kpi.amber .num { color: var(--orange-text); }

/* ── 배지 / 칩 ─────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1; }
.badge .ms { font-size: 14px; font-variation-settings: 'FILL' 1; }
.badge.gray { background: #EEF1F4; color: #6b7280; }
.badge.blue { background: var(--soft-blue); color: var(--primary); }
.badge.green { background: var(--soft-green); color: var(--green-text); }
.badge.red { background: var(--soft-red); color: var(--danger); }
.badge.amber { background: var(--soft-amber); color: var(--orange-text); }
.badge.orange { background: var(--soft-orange); color: var(--orange); }
.badge.purple { background: var(--soft-purple); color: var(--purple); }

.chan { font-size: 11px; padding: 2px 8px; border-radius: 6px; font-weight: 700; }
.chan.kakao { background: #fee500; color: #3c1e1e; }
.chan.sms { background: #e0f2fe; color: #0369a1; }
.chan.push { background: #ede9fe; color: #6d28d9; }

/* 상태 점 */
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.green { background: var(--green); } .dot.red { background: var(--danger); }
.dot.blue { background: var(--primary); } .dot.amber { background: var(--orange-text); }

/* ── 리스트 행 ─────────────────────────────────── */
.list-item { display: flex; justify-content: space-between; align-items: center; gap: 11px;
    padding: 12px; background: var(--bg); border-radius: var(--radius-sm); text-decoration: none; color: inherit; }
.list-item + .list-item { margin-top: 10px; }
.list-item.plain { background: transparent; border-radius: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-item.plain:last-child { border-bottom: 0; }
.list-item .li-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.list-item .li-title { font-weight: 600; font-size: 13.5px; color: var(--text); }
.list-item .li-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.list-item .li-right { text-align: right; flex-shrink: 0; }
.list-item .li-right .li-title { font-weight: 800; font-size: 14px; }

/* ── 빠른 진입 ─────────────────────────────────── */
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quick-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.quick {
    display: flex; align-items: center; gap: 11px; background: var(--card);
    border: 1px solid #EFF1F4; border-radius: 18px; padding: 15px;
    text-decoration: none; color: var(--text); box-shadow: var(--shadow); cursor: pointer; text-align: left;
}
.quick span { font-size: 14px; font-weight: 700; }
.quick.col { flex-direction: column; align-items: center; gap: 7px; text-align: center; background: var(--bg);
    border: none; box-shadow: none; border-radius: 14px; }
.quick.col span { font-size: 12px; font-weight: 600; }

/* ── 폼 ─────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; }
.form-group + .form-group { margin-top: 16px; }
.form-group > label { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 9px; }
.form-group .req { color: var(--danger); }
.form-group .opt { color: var(--muted-2); font-weight: 500; }
.form-control, .form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 14px; background: var(--card); border: 1px solid var(--border-2);
    border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text); outline: none;
}
.form-group input.filled, .form-group select.filled, .form-group textarea.filled,
.field-filled .form-control { background: var(--bg); border-color: var(--border); }
.form-group textarea { resize: none; min-height: 110px; }
.form-control:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); }
.field-hint { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted-2); }

/* 선택 타일 그리드 (민원 유형/방문 유형) */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { padding: 15px 12px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--card);
    cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tile .tile-name { font-size: 13px; font-weight: 700; color: var(--text); }
.tile .tile-desc { font-size: 11px; color: var(--muted); }
.tile.selected { border-color: var(--primary); background: var(--primary); }
.tile.selected .tile-name, .tile.selected .tile-desc { color: #fff; }
.tile.selected .ic { background: rgba(255, 255, 255, .22); }
.tile.selected .ic .ms { color: #fff; }

/* 토글 스위치 */
.switch { width: 44px; height: 26px; border-radius: 99px; background: #d4dae0; position: relative;
    flex-shrink: 0; border: none; cursor: pointer; transition: background .15s; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .15s; }
.switch.on { background: var(--primary); } .switch.on .knob { left: 20px; }
.switch.on.purple { background: var(--purple); }
/* 네이티브 체크박스를 스위치로 표시 */
input.sw { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 99px;
    background: #d4dae0; position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; margin: 0; }
input.sw:checked { background: var(--primary); }
input.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .15s; }
input.sw:checked::after { left: 20px; }

/* 진행 바 */
.progress { height: 7px; border-radius: 99px; background: var(--soft-blue); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--primary); }

/* ── 버튼 ───────────────────────────────────────── */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 15px; border: none; border-radius: var(--radius-sm); background: var(--primary); color: #fff;
    font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; text-align: center;
    text-decoration: none; }
.btn:active { background: var(--primary-dark); }
.btn .ms { font-size: 20px; }
.btn.grad { background: var(--primary-grad); box-shadow: 0 8px 20px rgba(49, 130, 246, .28); }
.btn.purple { background: var(--purple); }
.btn.orange { background: var(--orange); }
.btn.danger { background: var(--danger); }
.btn.secondary { background: var(--card); color: var(--text-2); border: 1px solid var(--border-2); box-shadow: var(--shadow); font-weight: 700; }
.btn.ghost { background: #F2F4F6; color: var(--text-3); font-weight: 700; }
.btn.soft-red { background: var(--soft-red); color: var(--danger); font-weight: 700; }
.btn.sm { width: auto; padding: 9px 14px; font-size: 13px; font-weight: 700; border-radius: 11px; }
.btn.block-sm { padding: 11px; font-size: 13px; font-weight: 700; border-radius: 12px; }
.btn-pill { border: none; background: var(--soft-blue); color: var(--primary); font-size: 12px; font-weight: 700;
    border-radius: 999px; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.btn-pill .ms { font-size: 15px; }
.btn-pill.purple { background: var(--purple); color: #fff; }
.btn-group { display: flex; flex-direction: column; gap: 10px; }
.btn-row { display: flex; gap: 9px; } .btn-row > .btn { flex: 1; }

/* 하단 고정 액션바 */
.bottom-cta { position: sticky; bottom: 0; left: 0; right: 0; background: var(--card);
    border-top: 1px solid #EEF1F4; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px;
    margin-top: 4px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

/* ── 안내 박스 ─────────────────────────────────── */
.note { border-radius: 16px; padding: 15px; display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; }
.note .ms { font-size: 20px; flex-shrink: 0; font-variation-settings: 'FILL' 1; }
.note.blue { background: var(--soft-blue); color: #1d4e9c; } .note.blue .ms { color: var(--primary); }
.note.blue b, .note.blue .note-title { color: #1d4e9c; font-weight: 700; }
.note.orange { background: #FFF6EE; border: 1px solid #FCE3CC; color: #9a5a1e; } .note.orange .ms { color: var(--orange); }
.note.purple { background: #F3F1FF; color: #6a52b8; } .note.purple .ms { color: var(--purple); }
.note-list { background: #F2F4F6; border-radius: var(--radius-sm); padding: 14px; font-size: 11.5px;
    color: var(--text-3); line-height: 1.7; }
.note-list.blue { background: var(--soft-blue); color: #3a6cb8; }
.note-list .nh { font-size: 13px; font-weight: 800; color: #1d4e9c; margin-bottom: 8px; }

/* ── 메시지 / 빈 상태 / 토스트 ─────────────────── */
.error-msg { background: var(--soft-red); border: 1px solid #fecdd3; color: var(--danger);
    padding: 12px 14px; border-radius: 12px; font-size: 13px; }
.info-msg { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
    padding: 12px 14px; border-radius: 12px; font-size: 13px; }

/* 다중 선택 칩 (작업유형 등) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: #EEF1F4; color: #374151;
    border-radius: 999px; padding: 6px 10px 6px 12px; font-size: 13px; font-weight: 600; }
.chip .x { cursor: pointer; font-size: 16px; line-height: 1; color: #9aa3af; }
.chip .x:hover { color: var(--danger); }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 13px; }
.empty .ms { font-size: 30px; color: #aab2bd; display: block; margin: 0 auto 12px;
    width: 60px; height: 60px; line-height: 60px; border-radius: 50%; background: #F2F4F6; }
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: #1a1a2e; color: #fff;
    padding: 10px 18px; border-radius: 999px; font-size: 13px; z-index: 60; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.toast.show { opacity: 1; }

@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pop { animation: pop .5s ease-out; }

/* ── 하단 탭바 ─────────────────────────────────── */
.tabbar {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: var(--maxw); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-top: 9px; padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #EEF1F4; display: flex; align-items: flex-start; z-index: 40;
}
.tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; color: var(--muted-2); font-size: 10.5px; font-weight: 500;
}
.tabbar a .ms, .tabbar a .material-symbols-rounded { font-size: 25px; font-variation-settings: 'FILL' 0; }
.tabbar a.active { color: var(--primary); font-weight: 700; }
.tabbar a.active .ms, .tabbar a.active .material-symbols-rounded { font-variation-settings: 'FILL' 1; }

/* ── 온보딩 / 로그인 ───────────────────────────── */
.onb { min-height: 100vh; display: flex; flex-direction: column; }
.onb-body { flex: 1; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 18px; }
.onb-lead { text-align: center; font-size: 13px; color: var(--text-3); line-height: 1.6; }
.onb-h { font-size: 23px; font-weight: 800; color: var(--text); letter-spacing: -.02em; text-align: center; }
.onb-cta { background: var(--card); border-top: 1px solid #EEF1F4; padding: 14px 20px;
    display: flex; flex-direction: column; gap: 9px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.success-circle { width: 90px; height: 90px; border-radius: 50%; background: var(--primary-grad);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(49, 130, 246, .32); }
.success-circle .ms { font-size: 52px; color: #fff; font-variation-settings: 'FILL' 1; }
.success-circle.green { background: var(--soft-green); box-shadow: none; }
.success-circle.green .ms { color: var(--green); }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { background: #fff; width: 100%; max-width: 400px; padding: 40px 28px; border-radius: 24px; box-shadow: 0 12px 40px rgba(17, 24, 39, .1); }
.login-card .brand { width: 56px; height: 56px; border-radius: 16px; background: var(--primary-grad);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.login-card .brand .ms { font-size: 30px; color: #fff; font-variation-settings: 'FILL' 1; }
.login-card h1 { font-size: 24px; text-align: center; margin-bottom: 4px; font-weight: 800; letter-spacing: -.02em; }
.login-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.remember-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 20px; }
.remember-row input { width: 17px; height: 17px; accent-color: var(--primary); }
.remember-row label { font-size: 13px; color: var(--text-3); margin: 0; font-weight: 500; }
.login-links { text-align: center; margin-top: 18px; font-size: 13px; }
.login-links a { color: var(--primary); text-decoration: none; font-weight: 600; }

/* 유틸 */
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap11 { gap: 11px; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; }
.txt-muted { color: var(--muted); } .txt-strong { color: var(--text); font-weight: 700; }
.scr::-webkit-scrollbar { width: 0; height: 0; } .scr { scrollbar-width: none; }

/* ════════════════════════════════════════════════════
   협력업체(VENDOR) 전용 보조 컴포넌트
   ════════════════════════════════════════════════════ */

/* 작업오더 상태 탭 (배정대기/수락/진행중/완료) — 가로 세그먼트 */
.seg-tabs { display: flex; gap: 6px; background: var(--bg); padding: 5px; border-radius: 14px; overflow-x: auto; }
.seg-tabs::-webkit-scrollbar { display: none; }
.seg-tabs a { flex: 1; white-space: nowrap; text-align: center; padding: 9px 10px; border-radius: 10px;
    font-size: 13px; font-weight: 700; color: var(--text-3); text-decoration: none; }
.seg-tabs a.active { background: var(--card); color: var(--primary); box-shadow: var(--shadow-soft); }

/* 작업오더 카드 */
.wo-card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
    text-decoration: none; color: inherit; display: block; }
.wo-card + .wo-card { margin-top: 12px; }
.wo-card.closed { opacity: .62; }
.wo-card .wo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.wo-card .wo-title { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.wo-card .wo-no { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.wo-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); margin-top: 5px; }
.wo-meta .ms { font-size: 16px; color: var(--muted-2); }
.wo-card .wo-cost { font-size: 16px; font-weight: 800; color: var(--text); }
.wo-card .wo-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* 작업유형 배지(매퍼 typeClass 값과 매칭) */
.badge-danger { background: var(--soft-red); color: var(--danger); }
.badge-blue   { background: var(--soft-blue); color: var(--primary); }
.badge-gray   { background: #EEF1F4; color: #6b7280; }
.badge-amber  { background: var(--soft-amber); color: var(--orange-text); }

/* 검수 결과 표시 */
.inspect.pass { color: var(--green-text); } .inspect.fail { color: var(--danger); } .inspect.pending { color: var(--orange-text); }

/* 완료 사진 그리드 */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-grid .ph { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg); }
.photo-grid .ph img { width: 100%; height: 100%; object-fit: cover; }
.photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed var(--border-2); color: var(--muted);
    background: var(--bg); cursor: pointer; font-size: 11px; }
.photo-add .ms { font-size: 24px; }

/* 정산 행 */
.settle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0;
    border-bottom: 1px solid var(--line); }
.settle-row:last-child { border-bottom: 0; }
.settle-row .sm-month { font-size: 14px; font-weight: 700; color: var(--text); }
.settle-row .sm-amount { font-size: 15px; font-weight: 800; color: var(--text); }

/* 모달(시트) — 수락/거절/추가비용/완료보고 입력 */
.sheet-bg { position: fixed; inset: 0; background: rgba(17,24,39,.45); z-index: 70; display: none; }
.sheet-bg.show { display: block; }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: var(--maxw);
    background: var(--card); border-radius: 22px 22px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    z-index: 71; display: none; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet.show { display: block; }
.sheet h3 { font-size: 17px; font-weight: 800; margin-bottom: 14px; }

/* 데이터 라벨 행 */
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); } .kv .v { font-weight: 700; color: var(--text); text-align: right; }

/* 별점 표시 */
.stars { color: var(--orange); letter-spacing: 1px; font-size: 15px; }