/* 베누스토 업무 포털 공용 스타일 — 2026-08 디자인 개편
   홈페이지(public.css)와 같은 규칙: 포인트 색 없음(강조는 다크 #2F2C29 하나),
   모서리 3px 고정, Pretendard, 상단 아이보리 띠(#F4F2EE) + 흰 카드.
   ⚠ 예외: 데이터 상태를 나타내는 색(정산 그리드 남색, 과입금 상태 배지,
   위험 빨강, 근무표 오픈/마감 구분 등)은 기능색이라 그대로 둔다. */
:root {
  /* 공개 홈(public.css)과 같은 값을 쓴다 — 한쪽만 바꾸면 톤이 어긋난다.
     2026-08-23: 아이보리가 진해서 흰색을 더 섞고 채도를 낮춤 */
  --ground: #FBFBFA;        /* 업무 도구 본문 바탕 */
  --surface: #FFFFFF;       /* 카드 */
  --ink: #282828;
  --sub: #6C6C6A;
  --dim: #8E8E8B;
  --line: #E6E6E3;
  --band: #F4F4F2;          /* 상단 띠·구분 배경 */
  --accent: #262626;        /* 유일한 강조색 (다크) */
  --accent-dark: #141414;   /* 강조색 hover용 명도 변화 */
  --accent-soft: #F4F4F2;
  --danger: #B3403A;
  --danger-soft: #F9E8E6;
  --ok-soft: #E7F2EA;
  --r: 3px;                 /* 모서리 — 전부 3px 고정 */
  --navh: 88px;             /* 상단 띠 높이 — 공개 홈(--bn-navh)과 같은 값 */
  --navbg: #FDFDFC;         /* 상단 메뉴바 — 거의 순백 (공개 홈과 같은 값) */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── 상단 내비게이션 — 아이보리 띠 ── */
.topnav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 26px;
  background: var(--navbg);
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(18px, 5vw, 56px); height: var(--navh);
}
.brand-logo { text-decoration: none; line-height: 1.15; flex: 0 0 auto; }
.brand-logo .en {
  display: block;
  font-size: 17px; letter-spacing: .3em; color: var(--ink); font-weight: 600;
}
.brand-logo .ko { display: block; font-size: 10.5px; letter-spacing: .5em; color: var(--sub); }
.nav-pill {
  color: var(--sub); text-decoration: none; font-size: 12.5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 6px 14px; white-space: nowrap;
}
.nav-pill:hover { color: var(--ink); border-color: var(--sub); }
.navlinks { display: flex; gap: 16px; flex: 1; min-width: 0; }
.navlinks a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13.5px;
  padding: 4px 0; border-bottom: 2px solid transparent;
  /* 메뉴 글자가 세로로 쪼개지지 않게 */
  white-space: nowrap; flex: 0 0 auto;
}
.navlinks a:hover { border-bottom-color: var(--accent); }
/* 뒤로가기 — 지금 화면에서 한 단계 위로. 옆의 '업무 도구'보다 눈에 먼저 들어와야 한다 */
.navlinks a.navback { color: var(--accent); }
.navlinks a.navback:hover { border-bottom-color: var(--accent); }
.navuser { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.uname { font-size: 13.5px; color: var(--sub); white-space: nowrap; }
.badge-admin {
  font-style: normal; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: var(--r);
}
.badge-guest {
  font-style: normal; background: var(--surface); color: var(--sub);
  border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: var(--r);
}

/* ── 레이아웃 ── */
.container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 28px 20px 60px; flex: 1; }
.site-footer {
  text-align: center; color: var(--sub); font-size: 12.5px;
  padding: 18px; border-top: 1px solid var(--line); background: var(--surface);
}
.page-title { font-size: 23px; font-weight: 500; letter-spacing: -.01em; margin: 6px 0 4px; }
.page-sub { color: var(--sub); margin: 0 0 22px; }
.sec-title { font-size: 16.5px; font-weight: 500; letter-spacing: -.01em; margin: 30px 0 10px; }
.count-badge {
  background: var(--danger); color: #fff; font-size: 12px;
  padding: 1px 9px; border-radius: var(--r); vertical-align: 2px;
}
.empty { color: var(--sub); }
.hint { color: var(--dim); font-size: 12.5px; font-weight: 400; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: .93em; }

/* ── 버튼 ── */
.btn {
  display: inline-block; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 8px 16px; text-decoration: none; text-align: center;
  /* 좁은 화면에서 글자가 세로로 쪼개지지 않게 — 버튼은 항상 한 줄 */
  white-space: nowrap; flex: 0 0 auto;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-block { width: 100%; padding: 11px; }

/* ── 알림 ── */
.alert {
  background: var(--danger-soft); color: var(--danger);
  border-radius: var(--r); padding: 11px 14px; margin: 0 0 16px; font-size: 14px;
}
.alert.info { background: var(--band); color: var(--ink); }

/* ── 로그인/가입 박스 ── */
.auth-main { display: flex; align-items: center; justify-content: center; }
.authbox {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 36px 34px; width: 100%; max-width: 400px; margin: 40px auto;
}
.authbox h1 { font-size: 21px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 6px; text-align: center; }
.auth-sub { color: var(--sub); font-size: 13.5px; text-align: center; margin: 0 0 22px; }
.authbox label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 14px; }
.authbox input {
  display: block; width: 100%; margin-top: 5px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; font: inherit; background: var(--ground);
}
.authbox input:focus { outline: 2px solid var(--accent); border-color: var(--accent); background: #fff; }
.auth-links { text-align: center; font-size: 13.5px; color: var(--sub); margin-top: 18px; }
.auth-links a { color: var(--ink); }
.msg-body { text-align: center; }

/* ── 메뉴 카드 ── */
.cardgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.appcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 18px; text-decoration: none; color: var(--ink);
  transition: border-color .12s;
}
.appcard:hover { border-color: var(--accent); }
.appcard.not-ready { opacity: .72; }
.appicon { font-size: 26px; margin-bottom: 8px; }
.appname { font-weight: 500; letter-spacing: -.01em; font-size: 16px; margin-bottom: 3px; }
.appdesc { color: var(--sub); font-size: 13px; line-height: 1.5; }
.appstate {
  margin-top: 10px; display: inline-block;
  background: var(--ground); border: 1px solid var(--line);
  color: var(--sub); font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: var(--r);
}

/* ── 표 ── */
.tablewrap { overflow-x: auto; }
table {
  border-collapse: collapse; width: 100%; font-size: 13.5px;
  background: var(--surface); border: 1px solid var(--line);
}
th, td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: middle; }
th { background: var(--band); font-weight: 600; white-space: nowrap; }
.actions { white-space: nowrap; }
.actions form { display: inline; }

/* ── 권한 체크박스 ── */
.permform { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.perm { font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.perm input { vertical-align: -2px; margin-right: 3px; }

/* ── 공개 홈페이지 (예전 겸용 화면) ── */
.topnav.public { position: sticky; top: 0; z-index: 10; }
.public-main { max-width: 900px; }
.hero { text-align: center; padding: 64px 0 46px; }
.hero h1 { font-size: 40px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); }
.tagline { font-size: 18px; color: var(--ink); margin: 0 0 6px; font-weight: 600; }
.hero-sub { color: var(--sub); font-size: 13px; }
.pub-section { padding: 26px 0; border-top: 1px solid var(--line); }
.pub-section h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px; }
.pcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px;
}
.pcard h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; }
.pcard p { margin: 0; color: var(--sub); font-size: 13.5px; }

/* ── 공통: 숫자/합계/2단 배치 ── */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num.pos { color: var(--danger); font-weight: 700; }
.num.neg { color: #B7950B; }
.total-row td { background: var(--band); }
.row-warn td { background: #FBF3DC; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.two-col > * { min-width: 0; }
.two-col-stretch { align-items: stretch; } /* 자동정산: 메모 상자를 정산 요약 높이에 맞춤 */
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ── 업로드 박스 ── */
.upload-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 22px;
}
.filefield { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 14px; }
.filefield input {
  display: block; width: 100%; margin-top: 6px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 11px; font: inherit; background: var(--ground);
}
/* 카톡 추출: 파일 칸 하나 + 할 수 있는 작업만 켜지는 버튼들 */
.kakao-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.kakao-acts button:disabled { opacity: .4; cursor: not-allowed; }
.kakao-opts summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.kakao-opts[open] { padding-bottom: 4px; }
/* 추출 기간 — 기준은 늘 오늘. 실제 몇 월부터인지 같이 보여준다 */
.kakao-period { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.period-chip {
  display: flex; flex-direction: column; gap: 1px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px;
  background: var(--ground); font-weight: 600; font-size: 13px;
}
.period-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.period-chip:hover { border-color: var(--accent); }
.period-chip:has(input:checked) {
  border-color: var(--accent); background: var(--band); color: var(--ink);
}
.period-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.period-range { font-weight: 500; font-size: 11.5px; color: var(--sub); }

/* 결과 화면 — 올린 파일 그대로 다른 작업으로 넘어가는 줄 */
.kakao-jump {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 13px; margin-bottom: 14px;
}
.kakao-jump .chip { text-decoration: none; }

.inline-add { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.inline-add input[type="text"] {
  border: 1px solid var(--line); border-radius: var(--r); padding: 6px 9px; font: inherit;
}
.inline-add input[type="file"] { font-size: 12.5px; max-width: 220px; }

/* ── 필터 바 ── */
.filterbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 14px; margin: 18px 0 6px;
}
.filterbar label { font-size: 13px; font-weight: 600; }
.filterbar select, .filterbar input[type="text"] {
  border: 1px solid var(--line); border-radius: var(--r); padding: 5px 8px;
  font: inherit; font-size: 13.5px; margin-left: 4px; background: var(--ground);
}

/* ── 요약 카드 ── */
.statcards { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.statcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 16px; min-width: 130px;
}
.statcard .k { font-size: 12px; color: var(--sub); font-weight: 600; }
.statcard .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.statcard.bad { border-color: #E8B4B0; }
.statcard.bad .v { color: var(--danger); }
.statcard.warn { border-color: #E0C48A; }
.statcard.warn .v { color: #9A6B00; }

/* ── 상태 칩/배지 (과입금 앱) — 상태 색은 기능색이라 유지 ── */
.chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r);
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 12px; cursor: pointer;
  color: var(--sub);
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.stbadge {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 1px 9px; border-radius: var(--r); white-space: nowrap;
}
.st-과입금      { color: #C0392B; } .stbadge.st-과입금      { background: #FDECEA; }
.st-정상        { color: #1E8449; } .stbadge.st-정상        { background: #EAFAF1; }
.st-수수료대기중 { color: #B05E00; } .stbadge.st-수수료대기중 { background: #FEF5E7; }
.st-과소입금    { color: #B7950B; } .stbadge.st-과소입금    { background: #FEF9E7; }
.st-수수료만있음 { color: #616A6B; } .stbadge.st-수수료만있음 { background: #F4F6F6; }
.chip.on.st-과입금 { background: #C0392B; border-color: #C0392B; color: #fff; }
.chip.on.st-정상 { background: #1E8449; border-color: #1E8449; color: #fff; }
.chip.on.st-수수료대기중 { background: #B05E00; border-color: #B05E00; color: #fff; }
.chip.on.st-과소입금 { background: #B7950B; border-color: #B7950B; color: #fff; }
.chip.on.st-수수료만있음 { background: #616A6B; border-color: #616A6B; color: #fff; }
tr.st-row-과입금 td { background: #FDF1F0; }
tr.st-row-수수료대기중 td { background: #FEF9EF; }
.kst-일치 { color: #1E8449; } .stbadge.kst-일치 { background: #EAFAF1; }
.kst-금액차이 { color: #B05E00; } .stbadge.kst-금액차이 { background: #FEF5E7; }
.kst-카톡에만 { color: #C0392B; } .stbadge.kst-카톡에만 { background: #FDECEA; }
.kst-은행에만 { color: #1C4278; } .stbadge.kst-은행에만 { background: #DDEBF7; }
a.chip { text-decoration: none; display: inline-block; }

/* ── 자동 정산 시트 — 그리드 색은 원본 프로그램과 맞춘 기능색이라 유지 ── */
.settle-main { max-width: 1560px; }
.settle-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.settle-title {
  font-size: 17px; font-weight: 700; border: 1px solid var(--line); border-radius: var(--r);
  padding: 7px 12px; min-width: 260px; flex: 0 1 320px; font-family: inherit;
}
.settle-meta { font-size: 13px; font-weight: 600; }
.settle-brand {
  font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.settle-period { display: inline-flex; align-items: center; gap: 4px; }
.settle-period select {
  padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; font-size: 13.5px; font-weight: 600; background: var(--surface);
}
.settle-meta input {
  border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px;
  font: inherit; font-size: 13px; margin-left: 4px;
}
.settle-files { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.settle-filelist { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; }
.file-chip {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  font-size: 12px; padding: 3px 6px 3px 10px; white-space: nowrap;
}
.file-chip button { border: none; background: none; color: var(--danger); cursor: pointer; font-size: 11px; }
.settle-grid { border-collapse: collapse; }
.settle-grid th {
  background: #1F3A5F; color: #F4F7FB; font-size: 11.5px; padding: 6px 4px;
  border: 1px solid #16304F; white-space: nowrap;
}
.settle-grid td { padding: 0; border: 1px solid #D9DDE3; background: #FFFFFF; }
.settle-grid .hdr-text {
  padding: 2px 3px; font-weight: 700; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 줄무늬 + 행 따라가기 — 열 16개를 가로로 읽기 쉽게 (색만 변경) */
.settle-grid tr:nth-child(even) td { background: #F6F8FA; }
.settle-grid tr:hover td { background: #EDF3FB; }
.settle-grid input {
  border: none; padding: 6px 6px; font: inherit; font-size: 12.5px; width: 100%;
  min-width: 68px; box-sizing: border-box; background: transparent;
  font-variant-numeric: tabular-nums; color: #1F2630;
}
.settle-grid input.name-col { background: #FBF4E4; text-align: center; min-width: 88px; color: #4A3A12; }
.settle-grid input.num-col { text-align: right; }
.settle-grid input.calc-col { background: #E3ECF8; color: #17407E; font-weight: 700; text-align: right; }
.settle-grid .total-tr td { background: #E3EFE6; }
.settle-grid .total-tr input { font-weight: 700; background: transparent; color: #1D5B34; }
.settle-grid input:focus { outline: 2px solid var(--accent); background: #fff; }
.settle-summary { border-collapse: collapse; width: 100%; }
.settle-summary td { border: 1px solid #D9DDE3; padding: 3px 6px; }
.settle-summary .sum-label { font-size: 12.5px; font-weight: 600; background: #EDF3EE; width: 55%; color: #1F3527; }
.settle-summary .sum-label.final { background: #1F3A5F; color: #fff; }
.settle-summary input { border: none; width: 100%; font: inherit; font-size: 13px; text-align: right; }
.pending-box {
  background: #FDF6EC; border: 1px solid #E8D5B0; border-radius: var(--r);
  padding: 12px 16px; margin-bottom: 10px;
}
.pending-item { display: block; font-size: 13px; margin: 4px 0; white-space: pre-line; }
.pending-item .acct-sel { margin-left: 8px; font-size: 12px; }
.cardmap-row { display: flex; gap: 6px; margin-bottom: 5px; }
.cardmap-row input {
  border: 1px solid var(--line); border-radius: var(--r); padding: 5px 8px; font: inherit; font-size: 13px;
}
.modal-back {
  position: fixed; inset: 0; background: rgba(20, 25, 32, .45); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  background: var(--surface); border-radius: var(--r); max-width: 1040px; width: 100%;
  max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #1F3A5F; color: #fff; font-weight: 700; padding: 10px 16px;
}
.modal-body { padding: 14px 16px; overflow-y: auto; }
.modal-foot {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  padding: 10px 16px; border-top: 1px solid var(--line); background: var(--ground);
}
.modal-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.modal-table th {
  background: var(--band); border: 1px solid var(--line);
  padding: 5px 7px; white-space: nowrap;
}
.modal-table td { border: 1px solid var(--line); padding: 4px 7px; }
.modal-table tr.row-off td { background: #FDF1F0; }
.modal-table tr.row-conflict td { background: #FFF3CD; }
.rowmenu-td { background: #F0F4F8; text-align: center; }
.rowmenu-btn {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 700; color: var(--ink); padding: 6px 8px;
  white-space: nowrap;
}
.rowmenu-btn:hover { color: var(--danger); }
.rowmenu-btn.has-pend { color: #b91c1c; }
.pend-badge {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  background: #dc2626; color: #fff; border-radius: var(--r);
  font-size: 10px; font-weight: 800; line-height: 15px; vertical-align: 1px;
}
.pending-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #FDF6EC; border: 1px solid #E8D5B0; border-radius: var(--r);
  padding: 7px 12px; margin-bottom: 8px;
}
.pending-bar-btn { border-color: #D9B36A; color: #8a5a00; font-weight: 700; }
.pending-bar-btn:hover { background: #F7E8CD; }
.pend-nav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; margin-bottom: 8px;
  background: var(--band); border-radius: var(--r);
}
.pending-opts {
  margin-top: 8px; padding: 7px 10px;
  background: #EDF3FB; border: 1px dashed #A9C1E4; border-radius: var(--r);
  font-weight: 600;
}
/* 바 길이는 항상 동일 — 안내문은 아랫줄에 (문구 길이가 바 길이에 영향 없음) */
.progress-wrap { display: block; margin: 4px 0 8px; }
.progress-track {
  position: relative; width: 100%; height: 19px; background: #E8EBEF; border-radius: var(--r);
  border: 1px solid #D3D8DF; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(20, 30, 45, .08);
}
.progress-fill {
  position: relative; height: 100%; width: 0%; border-radius: var(--r);
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  transition: width .2s linear; overflow: hidden;
}
.progress-fill::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, .22) 25%, transparent 25%, transparent 50%,
    rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .22) 75%, transparent 75%, transparent
  );
  background-size: 26px 26px;
  animation: prog-stripe .8s linear infinite;
}
@keyframes prog-stripe {
  from { background-position: 0 0; }
  to { background-position: 26px 0; }
}
.progress-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #1F2A3A;
  text-shadow: 0 0 3px rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .7);
  pointer-events: none;
}
#uploadLabel {
  display: block; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctx-menu {
  position: absolute; z-index: 80; min-width: 172px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(20, 30, 45, .18);
}
.ctx-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  font: inherit; font-size: 13px; padding: 8px 10px; border-radius: var(--r);
  cursor: pointer; white-space: nowrap;
}
.ctx-item:hover { background: var(--band); }
.note-line {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 3px 4px; border-bottom: 1px dashed var(--line);
}
.note-line:last-child { border-bottom: none; }
.note-text {
  flex: 1; font-size: 14.5px; line-height: 1.7; color: var(--ink);
  font-weight: 500; letter-spacing: .01em;
  word-break: break-all; cursor: text; user-select: text;
}
.note-text .note-red { color: #C00000; font-weight: 750; }
.note-num {
  color: var(--sub); font-weight: 700; font-size: 12.5px;
  min-width: 22px; text-align: right; padding-top: 3px; flex-shrink: 0;
}
.note-phys { min-height: 1.2em; }
.settle-summary tr.sum-sep td { border-top: 2px solid #B9C2CE; }
.note-del {
  border: none; background: none; color: var(--danger);
  cursor: pointer; font-size: 11px; padding: 2px 4px; flex-shrink: 0;
}
.rowmenu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rowmenu-list .btn { text-align: left; }
@media (max-width: 640px) { .rowmenu-list { grid-template-columns: 1fr; } }

/* ── 검토 필요 박스 / 합계 바 ── */
.ambig-box {
  background: #FDF6EC; border: 1px solid #E8D5B0; border-radius: var(--r);
  padding: 14px 18px; margin-bottom: 18px;
}
.ambig-box input[type="text"] {
  border: 1px solid var(--line); border-radius: var(--r); padding: 4px 7px; font: inherit; font-size: 13px;
}
.totals-bar {
  background: var(--band); border-radius: var(--r); padding: 10px 16px;
  margin-top: 10px; font-size: 14.5px; text-align: right;
}

/* ── 야구게임 ── */
/* 그리드 칸이 내용 최소폭 때문에 넘치지 않도록 min-width:0 */
.game-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
.game-layout > * { min-width: 0; }
@media (max-width: 800px) { .game-layout { grid-template-columns: 1fr; } }
.game-panel, .game-rank {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 22px;
}
.game-status {
  background: var(--ground); border-radius: var(--r); padding: 12px 14px;
  font-weight: 600; margin-bottom: 12px;
}
.game-status.win { background: var(--ok-soft); color: #1E8449; }
.game-status.lose { background: var(--danger-soft); color: var(--danger); }
.game-form { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.game-form input {
  /* min-width:0 이 없으면 입력칸이 줄어들지 않아 좁은 폰에서 화면이 좌우로 밀림 */
  flex: 1 1 120px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 12px; font: inherit; font-size: 16px; letter-spacing: 2px;
}
.game-history {
  background: var(--ground); border-radius: var(--r); padding: 10px 14px;
  min-height: 200px; max-height: 320px; overflow-y: auto;
  font-family: Consolas, monospace; font-size: 14px; line-height: 1.9;
}
.rank-list { padding-left: 24px; }
.rank-list li { margin-bottom: 7px; font-size: 14px; }
.rank-list li:nth-child(1) { font-size: 16px; }

/* ── 쇼룸 근무표 ── */
.roster-main { max-width: 1280px; }
.roster-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.roster-nav { display: flex; align-items: center; gap: 6px; }
.roster-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form { display: inline-flex; margin: 0; }
.roster-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; min-width: 110px; text-align: center; }
.roster-layout { display: grid; grid-template-columns: 1fr 250px; gap: 16px; align-items: start; }
.roster-layout > * { min-width: 0; }
/* 달력이 칸보다 넓어지면 페이지 전체가 아니라 달력 안에서만 좌우로 움직이게
   (데스크톱에서는 내용이 다 들어가므로 스크롤바가 생기지 않음) */
.roster-cal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 980px) {
  .roster-layout { grid-template-columns: 1fr; }
  /* 터치 기기(태블릿·폰)에서 손가락으로 누를 수 있게 최소 높이 확보 */
  .wtag, .alltag { min-height: 32px; }
  /* 달력 칸 안 보조 버튼도 손가락으로 누를 수 있게 (칸 높이는 그대로 두고 좌우로만 넓힘) */
  .memo-btn { min-height: 34px; padding: 4px 10px; font-size: 11.5px; }
  .rowmenu-btn { min-height: 34px; }
}

.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.cal-dow div {
  background: var(--band); font-weight: 600; text-align: center;
  padding: 6px 0; border-radius: var(--r); font-size: 13.5px;
}
.cal-dow .sun { color: var(--danger); }
.cal-dow .sat { color: #1C4278; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.cal-cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  min-height: 108px; padding: 5px 6px; display: flex; flex-direction: column; gap: 4px;
}
.cal-cell.other { background: var(--ground); opacity: .55; }
.cal-cell.hol { background: #FDF3F1; }
.cal-cell.sat { background: #F3F7FC; }
.cal-cell.today { border: 2px solid #22A55E; }
/* 달력 칸 안의 글자는 절대 세로로 쪼개지지 않게 (좁은 폰 대응) */
.cal-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cal-top > * { white-space: nowrap; flex: 0 0 auto; }
.dnum { font-weight: 700; font-size: 14.5px; }
.dnum.red { color: var(--danger); }
.dnum.blue { color: #1C4278; }
.holname { font-size: 10.5px; color: var(--danger); font-weight: 700; }
.todaytag {
  background: #22A55E; color: #fff; font-size: 10px; font-weight: 700;
  padding: 0 5px; border-radius: var(--r);
}
.memo-btn {
  margin-left: auto; border: 1px dashed var(--line); cursor: pointer; font: inherit;
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--r);
  background: transparent; color: var(--sub); opacity: .75;
}
.memo-btn:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }
/* 오픈/마감은 한눈에 구분되어야 한다 — 파랑/주황 (공유 PNG 그림과 같은 색, 기능색) */
.memo-btn.m-오픈 { background: #24549C; border: none; color: #fff; opacity: 1; font-size: 11.5px; }
.memo-btn.m-마감 { background: #E67E22; border: none; color: #fff; opacity: 1; font-size: 11.5px; }
/* 선택 안 된 이름·전원출근은 흐리게 — 근무자로 오해하지 않도록 */
.alltag {
  border: 1px dashed var(--line); background: transparent; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--sub);
  border-radius: var(--r); padding: 2px 0; opacity: .38;
  white-space: nowrap;
}
/* 근무 표시는 부드러운 아이보리 톤 (2026-08-23 사장님 지시 —
   토요일 칸 바탕이 연파랑이라 파랑 계열은 겹쳐 보인다). PNG 그림도 같은 색(COL tag_*) */
.alltag.on { background: #F5F1E6; border: 1px solid #E3DCC9; color: #3F3A31; opacity: 1; }
/* 전원출근이면 이름은 감춘다 — '전원출근' 하나로 충분하다.
   마우스를 올리면 이름이 나타나 개별 조정도 된다 (터치 화면은 전원출근을 풀고 조정) */
.alltag.on + .wtags { display: none; }
@media (hover: hover) {
  .cal-cell:hover .alltag.on + .wtags { display: grid; }
}
.wtags { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.wtag {
  border: 1px dashed var(--line); background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--sub);
  border-radius: var(--r); padding: 2px 0; opacity: .38;
  white-space: nowrap; overflow: hidden;
}
.wtag.on {
  background: #F7F3EA; border: 1px solid #E6DFCE; color: #3F3A31;
  opacity: 1; font-weight: 700;
}
/* 칸에 마우스를 올리면 흐린 버튼이 살아나 클릭할 수 있음이 보이게 */
.cal-cell:hover .wtag, .cal-cell:hover .alltag { opacity: .8; }
.cal-cell:hover .wtag.on, .cal-cell:hover .alltag.on { opacity: 1; }
/* 아직 안 누른 버튼은 글자와 테두리를 숨긴다 — 흐린 글자가 근무 표시를 가려서.
   자리는 그대로 두고 칸에 마우스를 올릴 때만 되살아난다.
   hover 가 없는 터치 화면에서는 숨기지 않는다 (되살릴 방법이 없다). */
@media (hover: hover) {
  .memo-btn.m-none, .alltag:not(.on), .wtag:not(.on) {
    color: transparent; border-color: transparent;
  }
  .cal-cell:hover .memo-btn.m-none,
  .cal-cell:hover .alltag:not(.on),
  .cal-cell:hover .wtag:not(.on) { color: var(--sub); border-color: var(--line); }
  .memo-btn.m-none:hover { color: var(--accent); border-color: var(--accent); }
}

.roster-side { display: flex; flex-direction: column; gap: 12px; }
.side-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px;
}
.side-box h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.side-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; padding: 3px 0; gap: 6px;
}
.side-row span { flex: 1; }
.xbtn {
  border: none; background: transparent; color: var(--danger); cursor: pointer;
  font: inherit; font-size: 12px; padding: 0 4px;
}
.side-add { display: flex; gap: 6px; margin-top: 8px; }
.side-add input[type="text"] {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r);
  padding: 5px 8px; font: inherit; font-size: 13px; background: var(--ground);
}
.stat-row { display: flex; gap: 8px; font-size: 13px; padding: 3px 0; align-items: baseline; }
.stat-row strong { min-width: 52px; }
.st-total { color: #1E8449; }
.st-weekend { color: #B05E00; }

/* ══════════════════════════════════════════════════════════════
   모바일 대응 (좁은 바(bar) 형태 폰 360~430px 포함)
   원칙: 글자는 세로로 쪼개지지 않게(nowrap) + 넘치는 표/달력은
        자기 컨테이너 안에서만 가로 스크롤 + 몸통은 가로 스크롤 금지
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* ── 상단 내비게이션: 2줄 구성 (1줄=로고+계정, 2줄=메뉴 링크) ── */
  .topnav {
    flex-wrap: wrap; height: auto; min-height: 52px;
    gap: 8px 12px; padding: 7px 14px 0;
  }
  .topnav .brand { font-size: 15.5px; }
  .topnav .brand span { font-size: 12px; }
  .navuser { margin-left: auto; gap: 8px; }
  .navlinks {
    order: 3; flex: 1 0 100%; gap: 16px;
    margin: 0 -14px; padding: 4px 14px 7px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .navlinks::-webkit-scrollbar { display: none; }
  .uname { font-size: 12.5px; }

  /* ── 터치 목표 최소 크기 확보 ── */
  .btn { min-height: 38px; line-height: 20px; }
  .btn-sm { min-height: 34px; padding: 6px 11px; }
  .xbtn { min-width: 32px; min-height: 32px; }

  /* ── 근무표: 좁은 폰에서는 칸이 찌그러지지 않도록 최소 폭 확보 ── */
  .roster-cal { padding-bottom: 6px; }
  .cal-dow, .cal-week { min-width: 620px; }
  .cal-cell { min-height: 96px; }
  .roster-head { gap: 10px; }
  .roster-acts { margin-left: 0; }
  .roster-title { min-width: 92px; font-size: 15.5px; }

  /* ── 자동 정산 상단 바 ── */
  .settle-title { min-width: 0; flex: 1 1 100%; }
  .settle-period, .settle-brand { flex: 0 0 auto; }

  /* ── 표/그리드는 이미 .tablewrap 으로 감싸져 있음: 셀 글자만 보호 ── */
  th, td { padding: 8px 9px; }
  .filterbar { padding: 9px 11px; }
  .filterbar label { white-space: nowrap; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 30px; }
  .authbox { padding: 26px 20px; }
  .container { padding: 20px 14px 48px; }
}

/* ── 아주 좁은 폰(≤480px): 여백·글자 추가 축소 ── */
@media (max-width: 480px) {
  .topnav { gap: 6px 10px; padding: 7px 12px 0; }
  .topnav .brand { font-size: 14.5px; }
  .topnav .brand span { display: none; } /* "업무 포털" 생략 — 로고만 */
  .navlinks { gap: 14px; margin: 0 -12px; padding: 4px 12px 7px; }
  .page-title { font-size: 20px; }
  .cardgrid { grid-template-columns: 1fr; }
  .statcard { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .statcards { gap: 8px; }
  .game-form input { flex: 1 1 100%; }
  .inline-add input[type="file"] { max-width: 100%; }
  .modal-back { padding: 8px; }
  .modal-body, .modal-head, .modal-foot { padding-left: 11px; padding-right: 11px; }
}

/* ── 근무표 사진 자동 인식 ── */
.scan-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 16px; margin: 0 0 16px;
}
.scan-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 9px; }
.scan-controls { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.scan-controls input[type="file"] {
  border: 1px solid var(--line); border-radius: var(--r); padding: 5px 8px;
  font: inherit; font-size: 13px; max-width: 100%;
}
.scan-controls input[type="file"]:disabled { opacity: .5; }
.scan-company { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.scan-company input {
  border: 1px solid var(--line); border-radius: var(--r); padding: 5px 9px;
  font: inherit; font-size: 13px; font-weight: 500; width: 140px;
}

/* 시공 사례 사진 드래그 정렬 */
.fo-photo { cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.fo-photo:active { cursor: grabbing; }
.fo-photo.dragging { opacity: .45; outline: 2px dashed var(--accent); }