/* toss.css — 업무 화면(현황) 토스식 (09-27, 비서실/디자인_기준.md)
   옛 index.html 안의 규칙과 싸우지 않게 이름을 새로 짓는다: 모든 부품은 t- 로 시작.
   색: 글자 #191F28 · 보조 #4E5968 · 흐림 #8B95A1 · 띠 #F2F4F6 · 누를 곳 파랑 #3182F6 하나. */
:root {
  --t-ink: #191F28; --t-sub: #4E5968; --t-mute: #8B95A1; --t-mute2: #B0B8C1;
  --t-gap: #F2F4F6; --t-line: #E5E8EB; --t-blue: #3182F6; --t-blue-bg: #E8F3FF;
  --t-red: #F04452; --t-red-bg: #FFEBEE; --t-amber: #E08A00; --t-amber-bg: #FFF4E0;
  --t-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
body { font-family: var(--t-font); background: #fff; color: var(--t-ink); }

/* 머리글 — 흰색·작게·붙어 다니지 않음 (옛 먹남색 띠가 새 화면을 덮던 문제) */
header { position: static; background: #fff; color: var(--t-ink); padding: 10px 20px; border-bottom: 1px solid var(--t-gap); }
header h1 { font-family: var(--t-font); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
header button { color: var(--t-sub); }

/* 현황 */
#home.tab { margin: 0 -14px; }
.t-top { padding: 22px 22px 20px; background: #fff; }
.t-date { font-size: 13px; color: var(--t-mute); font-weight: 500; }
.t-say { margin: 8px 0 0; font-size: 24px; line-height: 1.38; font-weight: 700; letter-spacing: -0.02em; }
.t-say em { font-style: normal; color: var(--t-blue); }
.t-sys { margin-top: 8px; font-size: 12.5px; color: var(--t-mute); display: flex; gap: 6px; align-items: center; }
.t-sys i { width: 7px; height: 7px; border-radius: 50%; background: #1FB57E; display: inline-block; }
.t-sys.bad { color: var(--t-red); } .t-sys.bad i { background: var(--t-red); }
.t-cta { display: block; width: 100%; margin-top: 16px; background: var(--t-blue); color: #fff; border: none; border-radius: 14px;
  font: 700 15.5px var(--t-font); padding: 15px; cursor: pointer; }
.t-cta:active { filter: brightness(.95); }
.t-cta.quiet { background: var(--t-gap); color: var(--t-sub); }
.t-gapbar { height: 12px; background: var(--t-gap); }
.t-sec { padding: 20px 22px 8px; background: #fff; }
.t-sh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.t-sh b { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.t-sh span { font-size: 13px; color: var(--t-mute); }
.t-li { display: flex; gap: 14px; align-items: center; padding: 13px 0; }
.t-ic { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; flex: none; background: var(--t-gap); color: var(--t-sub); }
.t-ic.r { background: var(--t-red-bg); color: var(--t-red); } .t-ic.a { background: var(--t-amber-bg); color: var(--t-amber); }
.t-ic.b { background: var(--t-blue-bg); color: var(--t-blue); }
.t-tx { flex: 1; min-width: 0; }
.t-tx b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.t-tx small { display: block; font-size: 13.5px; color: var(--t-mute); margin-top: 2px; line-height: 1.45; }
.t-go { flex: none; font: 600 13.5px var(--t-font); color: var(--t-sub); background: var(--t-gap); border: none; border-radius: 10px;
  padding: 9px 13px; cursor: pointer; white-space: nowrap; }
.t-marks { display: flex; gap: 12px; margin-top: 7px; }
.t-marks button { font: 500 12.5px var(--t-font); color: var(--t-mute); background: none; border: none; padding: 2px 0; cursor: pointer; }
.t-marks button:hover { color: var(--t-ink); }
.t-empty { padding: 18px 0 22px; color: var(--t-mute); font-size: 14.5px; }
.t-more { padding: 4px 0 14px; font-size: 13.5px; color: var(--t-blue); cursor: pointer; background: none; border: none; font-family: var(--t-font); }
.t-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 22px 18px; background: #fff; }
.t-stats div { min-width: 0; } .t-stats span { font-size: 13px; color: var(--t-mute); }
.t-stats b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.t-flow { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }
.t-flow div { flex: 1 0 96px; background: var(--t-gap); border-radius: 14px; padding: 12px 13px; }
.t-flow div.on { background: var(--t-ink); color: #fff; } .t-flow div.on span { color: #B7C0CC; }
.t-flow div.off { opacity: .5; }
.t-flow b { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.t-flow span { font-size: 12.5px; color: var(--t-mute); }
.t-bars { display: flex; align-items: flex-end; gap: 12px; height: 130px; padding: 6px 0 14px; }
.t-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; font-size: 12px; color: var(--t-mute); }
.t-bar i { display: block; width: 100%; max-width: 40px; border-radius: 8px 8px 3px 3px; background: #E5E8EB; min-height: 4px; }
.t-bar.cur i { background: var(--t-blue); } .t-bar em { font-style: normal; font-weight: 700; color: var(--t-ink); font-size: 12.5px; }
.t-pill { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 2px 7px; margin: 3px 4px 0 0; background: var(--t-gap); color: var(--t-sub); }
.t-pill.r { background: var(--t-red-bg); color: var(--t-red); } .t-pill.a { background: var(--t-amber-bg); color: var(--t-amber); }
.t-chev { color: var(--t-mute2); font-size: 22px; flex: none; }
.t-team { padding: 18px 22px 24px; background: #fff; }

/* 하단 탭 — 흰색·가는 선 */
.bottomnav { background: #fff; border-top: 1px solid var(--t-gap); }
.bottomnav button { color: var(--t-mute2); font-family: var(--t-font); }
.bottomnav button.on { color: var(--t-ink); font-weight: 700; }
.bottomnav .nbadge { background: var(--t-red); }

/* PC — 왼쪽 흰 세로 탭 · 회색 바탕 위 흰 상자 두 칸 */
@media (min-width: 1024px) {
  body { background: var(--t-gap); padding-left: 220px; }
  header { display: none; }
  main { max-width: 1160px; padding: 24px 28px 40px; }
  #home.tab { margin: 0; }
  .t-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .t-box { background: #fff; border-radius: 22px; overflow: hidden; margin-bottom: 16px; }
  .t-gapbar { display: none; }
  .t-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 26px 28px; }
  .t-cta { width: auto; margin-top: 0; padding: 14px 22px; white-space: nowrap; }
  .t-sec, .t-stats, .t-team { padding-left: 26px; padding-right: 26px; }
  .bottomnav { top: 0; bottom: 0; left: 0; right: auto; width: 220px; flex-direction: column; justify-content: flex-start;
    gap: 4px; padding: 26px 14px; background: #fff; border: none; border-right: 1px solid var(--t-line); }
  .bottomnav:before { content: "AZ"; color: var(--t-ink); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; padding: 0 12px 20px; }
  .bottomnav button { flex: none; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
    font-size: 15px; color: var(--t-sub); font-weight: 500; }
  .bottomnav button.on { background: var(--t-gap); color: var(--t-ink); font-weight: 700; }
  .bottomnav .nbadge { position: static; margin-left: auto; }
}
@media (max-width: 1023px) { .t-grid { display: block; } .t-box { display: contents; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* 다듬기(09-27 화면 확인) */
.t-flow { flex-wrap: wrap; } .t-flow div { flex: 1 0 88px; }
#approvalCount { font-size: 13px !important; font-weight: 500 !important; color: var(--t-mute) !important; }
.t-team .muted { font-size: 14px; color: var(--t-mute); }

/* 고객 탭 (09-27) — 입력칸·숫자칸·진행 중·완료 목록 */
#customer .tiles { gap: 10px; margin: 14px 0 12px; }
#customer .tile { background: var(--t-gap); border: none; border-radius: 16px; padding: 14px 16px; }
#customer .tile b { font-size: 22px; font-weight: 700; }
#customer .tile span { font-size: 13px; color: var(--t-mute); }
#customer .tile.warn b { color: var(--t-amber); }
#customer .card { border: none; border-radius: 20px; background: #fff; padding: 18px; }
#customer .card h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
#customer input, #customer select { background: var(--t-gap); border: none; border-radius: 12px; min-height: 50px; padding: 12px 14px;
  font: 500 15px var(--t-font); color: var(--t-ink); width: 100%; box-sizing: border-box; }
#customer input::placeholder { color: var(--t-mute2); }
#customer .row { flex-direction: column; gap: 10px; margin-bottom: 10px; }
#customer .btn { background: var(--t-blue); color: #fff; border: none; border-radius: 14px; min-height: 52px; font: 700 15.5px var(--t-font); width: 100%; }
#customer .btn.sec { background: var(--t-gap); color: var(--t-sub); }
#customer .card.pick { background: #fff; }
#customer .pickrow { background: var(--t-gap); border: none; border-radius: 14px; }
#customer .steps { gap: 6px; }
#customer .step, #customer .steps > div { border: none !important; border-radius: 10px; background: var(--t-gap); }
#customer .jobhead span { color: var(--t-mute); }
#customer .muted, #customer .note { color: var(--t-mute); }
.t-name { font: 700 16px var(--t-font); color: var(--t-ink); background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.t-name:hover { color: var(--t-blue); }
.t-cust .t-tx small { margin-top: 3px; }
.t-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.t-acts .t-go { text-decoration: none; font-size: 13px; padding: 8px 12px; }
.t-warn { color: var(--t-amber); font-weight: 600; }
#done { padding: 0 2px; }
#done .t-li { border-bottom: 1px solid var(--t-gap); align-items: flex-start; }
#done .t-li:last-child { border-bottom: none; }
@media (min-width: 1024px) {
  #customer .row { flex-direction: row; } #customer .row > * { flex: 1 1 200px; }
  #customer .btn { width: auto; padding: 0 28px; }
  #customer .tiles { grid-template-columns: repeat(4, 1fr); }
}
/* 입력칸이 세로로 쌓일 때 '기본 폭 180px'이 높이로 먹던 것(09-27 화면에서 발견) */
#customer .row > input, #customer .row > select, #customer .row > * { flex: 0 0 auto; }
@media (min-width: 1024px) { #customer .row > input, #customer .row > select { flex: 1 1 200px; } }
/* 동명이인 후보 — 버튼이 회색 바탕에 묻히던 것 */
#customer .pickrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; }
#customer .pickrow .btn, #customer .pickrow button { background: #fff; color: var(--t-blue); width: auto; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--t-line); border-radius: 10px; font: 700 14px var(--t-font); white-space: nowrap; }

/* 청구·도구 — 제목·버튼·입력칸 맞추기 (09-27) */
.tab > .sec { font: 700 20px var(--t-font); letter-spacing: -0.02em; border: none; padding: 18px 4px 10px; margin: 0; color: var(--t-ink); }
#claim .btn, #tools .btn { background: var(--t-blue); color: #fff; border: none; border-radius: 12px; font: 700 15px var(--t-font); min-height: 48px; }
#claim .btn.sec { background: var(--t-gap); color: var(--t-sub); }
#claim input, #claim select { background: var(--t-gap); border: none; border-radius: 12px; min-height: 48px; padding: 10px 14px; font: 500 15px var(--t-font); }
#claim .card { border: none; border-radius: 20px; }
.toolbtn { border: none; border-radius: 20px; background: #fff; }