@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  --bg: #f6f7fb;
  --card: rgba(255,255,255,.88);
  --solid: #fff;
  --text: #101828;
  --muted: #8a94a6;        /* 보조 글자 회색은 하나 (= --brand-ink-muted, 2026-09-15) */
  --line: rgba(16,24,40,.08);
  --primary: #2563eb;
  --primary-soft: #e8efff;
  --success: #12b76a;
  --warning: #f79009;
  --danger: #f04438;
  --purple: #7c3aed;
  --shadow: 0 24px 80px rgba(15,23,42,.08);
  --radius-xl: 28px;
  --header-h: 60px;

  /* ── 브랜드 토큰 (브랜드_가이드_20260911.md) — 새 CSS 는 hex 를 직접 쓰지 말고 이 이름을 쓴다 ── */
  --brand-primary: #fc5a59;        /* 온다정 빨강(로고). 선택·강조·오늘 테두리 */
  --brand-primary-soft: #ffb7b6;   /* 연분홍. 구간(근무일)·저장된 휴무일 띠 */
  --brand-primary-tint: #fff0f0;   /* 아주 연한 분홍. 배경·hover */
  --brand-primary-deep: #b42318;   /* 분홍 위 글자 */
  --brand-secondary: #101828;      /* 먹색. 주요 단추·활성 탭·제목 */
  --brand-ink: #101828;            /* 본문 글자 */
  --brand-ink-muted: #8a94a6;      /* 요일·보조 글자 */
  --brand-surface: #f4f5f7;        /* 달력 판·회색 바탕 */
  --brand-card: #ffffff;           /* 카드·칸 */
  --brand-line: #eef0f3;           /* 옅은 테두리 */
  --brand-info: #2563eb;           /* 파랑은 링크·상태(정보)에만 */
  --brand-success: #12b76a; --brand-warning: #f79009; --brand-danger: #f04438;
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
}

.phone-icon { width:1em; height:1em; display:inline-block; vertical-align:-.14em; }

* { box-sizing: border-box; }
html {
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.14), transparent 36%),
    radial-gradient(circle at top right, rgba(124,58,237,.10), transparent 34%),
    var(--bg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:100% 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Noto Sans KR', sans-serif;
  background:transparent;
  color: var(--text);
  letter-spacing: normal;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
body.auth-boot #loginScreen, body.auth-boot #appScreen { visibility:hidden; }
.global-loading-overlay {
  position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.58); backdrop-filter:blur(2px);
}
.global-loading-overlay.active { display:flex; }
.global-loading-dots { display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 20px; border-radius:999px; background:rgba(17,24,39,.82); box-shadow:0 14px 40px rgba(15,23,42,.18); }
.global-loading-dots span { width:10px; height:10px; border-radius:999px; background:#fff; animation:global-loading-bounce .82s ease-in-out infinite; }
.global-loading-dots span:nth-child(2) { animation-delay:.12s; }
.global-loading-dots span:nth-child(3) { animation-delay:.24s; }
@keyframes global-loading-bounce {
  0%, 80%, 100% { transform:translateY(0); opacity:.58; }
  40% { transform:translateY(-8px); opacity:1; }
}
.screen { display: none; }
.screen.active { display: block; min-height:100vh; }
.page { display: none; }
.page.active { display: block; }

/* 버튼 */
.btn { border:0; border-radius:999px; padding:8px 16px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  /* 갈래(btn-soft·btn-primary)를 안 붙인 단추는 브라우저 기본 검정이 나온다.
     그래서 A4 미리보기 단추 둘이 순수 검정이었다 (2026-09-02) */
  color:var(--text);
  transition:.2s ease; font-size:13px; white-space:nowrap; }
.btn-primary { background:var(--text); color:#fff; }
.btn-primary:hover { transform:translateY(-1px); }
.btn-soft { background:#fff; color:var(--text); border:1px solid var(--line); }
.btn-danger { background:#fef2f2; color:var(--brand-danger); border:1px solid #fecaca; }
.btn-danger:hover { background:#fee2e2; }
/* 테스트 발신 모달 */
.cs-test-phone-input { width:100%; padding:8px 12px; border:1px solid var(--line); border-radius:12px; font-size:20px; font-family:inherit; letter-spacing:.08em; box-sizing:border-box; margin-top:4px; }
.cs-test-phone-input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.cs-test-voice-info { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px; font-size:13px; color:#0369a1; }
.cs-test-msg-preview { margin-top:4px; padding:12px 12px; background:#f6f7fb; border:1px solid var(--line); border-radius:12px; font-size:13px; line-height:1.65; white-space:pre-wrap; max-height:120px; overflow-y:auto; color:var(--text); }
.cs-test-result-ok  { background:#dcfce7; border:1px solid #bbf7d0; color:#15803d; }
.cs-test-result-err { background:#fef2f2; border:1px solid #fecaca; color:var(--brand-danger); }
.btn-blue { background:var(--primary); color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.18); }

/* 상태 뱃지 */
.status { display:inline-flex; align-items:center; gap:4px; padding:4px 8px;
  border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.status.blue   { color:var(--primary); background:var(--primary-soft); }
.status.green  { color:var(--success); background:#f0fdf4; }
.status.orange { color:var(--warning); background:#fffbeb; }
.status.red    { color:var(--danger);  background:#fef2f2; }
.status.purple { color:var(--purple);  background:#f6f7fb; }
.muted { color:var(--muted); }

/* ══ 로그인 전 랜딩 페이지 ══ */
.lp-wrap { min-height:100vh; background:#ffffff; color:#101828; overflow:hidden; }
.lp-nav { position:relative; z-index:10; width:min(1180px,calc(100% - 48px)); height:76px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eff6ff; }
.lp-logo { display:flex; align-items:center; gap:9px; color:#101828; text-decoration:none; }
.lp-logo img { width:38px; height:38px; border-radius:11px; }
.lp-logo strong { font-size:20px; letter-spacing:-.05em; }
.lp-nav-links { display:flex; align-items:center; gap:34px; }
.lp-nav-links a { color:var(--brand-ink-muted); font-size:14px; font-weight:700; text-decoration:none; }
.lp-nav-links a:hover { color:#101828; }
.lp-nav-login { height:40px; padding:0 18px; border:1px solid #dbeafe; border-radius:10px; background:#fff; color:#101828; font-size:13px; font-weight:700; }
.lp-section { width:min(1180px,calc(100% - 48px)); margin:0 auto; scroll-margin-top:24px; }
.lp-hero { min-height:660px; padding:88px 0 96px; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.88fr); gap:70px; align-items:center; }
.lp-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:25px; color:#4b5563; font-size:13px; font-weight:700; letter-spacing:.01em; }
.lp-eyebrow i { width:7px; height:7px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 5px rgba(255,77,85,.10); }
.lp-hero h1 { margin:0; color:#101828; font-size:clamp(48px,5.4vw,72px); font-weight:850; line-height:1.08; letter-spacing:-.075em; }
.lp-hero h1 em { color:#ef4444; font-style:normal; }
.lp-hero-copy > p { max-width:620px; margin:26px 0 0; color:var(--brand-ink-muted); font-size:17px; line-height:1.75; word-break:keep-all; }
.lp-hero-actions { display:flex; align-items:center; gap:12px; margin-top:36px; }
.lp-primary-action, .lp-start-cta button { display:inline-flex; align-items:center; justify-content:center; gap:20px; height:52px; padding:0 22px; border:0; border-radius:12px; background:#111827; color:#fff; font-weight:700; }
.lp-primary-action span, .lp-start-cta button span { font-size:18px; }
.lp-secondary-action { display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 21px; border:1px solid #dbeafe; border-radius:12px; background:#fff; color:#374151; font-size:14px; font-weight:700; text-decoration:none; }
.lp-hero-trust { display:flex; gap:18px; margin-top:26px; color:var(--brand-ink-muted); font-size:12px; font-weight:700; }
.lp-hero-visual { position:relative; padding:22px; border:1px solid #e5e7eb; border-radius:26px; background:rgba(255,255,255,.95); box-shadow:0 28px 80px rgba(25,38,63,.12); transform:rotate(1deg); }
.lp-hero-visual::before { content:""; position:absolute; z-index:-1; inset:-45px -55px; border-radius:50%; background:radial-gradient(circle,rgba(255,77,85,.13),transparent 68%); }
.lp-visual-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:17px; border-bottom:1px solid #eff6ff; }
.lp-visual-top span { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:850; }
.lp-visual-top span i { width:8px; height:8px; border-radius:50%; background:#22c55e; }
.lp-visual-top small { color:#ef4444; font-weight:700; }
.lp-visual-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.lp-visual-summary > div { padding:15px; border-radius:15px; background:#f6f7fb; }
.lp-visual-summary small, .lp-visual-summary span { display:block; color:#7c8798; font-size:11px; font-weight:700; }
.lp-visual-summary strong { display:block; margin:7px 0 5px; font-size:27px; line-height:1; }
.lp-visual-summary strong em { margin-left:2px; color:var(--brand-ink-muted); font-size:12px; font-style:normal; }
.lp-visual-summary span.green { color:#16a34a; }.lp-visual-summary span.blue { color:#3672d6; }
.lp-visual-list { display:grid; gap:2px; }
.lp-visual-list > div { display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; padding:10px 7px; border-bottom:1px solid #f3f4f6; }
.lp-visual-list b { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; font-size:12px; }.lp-visual-list b.pink { background:#fef2f2;color:#ef4444; }.lp-visual-list b.orange { background:#fff7ed;color:#f97316; }.lp-visual-list b.blue { background:#eff6ff;color:#3b6fc4; }
.lp-visual-list span strong,.lp-visual-list span small { display:block; }.lp-visual-list span strong { font-size:12px; }.lp-visual-list span small { margin-top:3px;color:var(--brand-ink-muted);font-size:10px; }.lp-visual-list > div > em { color:var(--brand-ink-muted);font-size:10px;font-style:normal;font-weight:700; }
.lp-visual-bubble { position:absolute; right:-34px; bottom:-39px; display:flex; align-items:center; gap:10px; width:260px; padding:12px 15px; border:1px solid #fee2e2; border-radius:17px; background:#fff; box-shadow:0 18px 40px rgba(74,32,35,.14); transform:rotate(-1deg); }
.lp-visual-bubble img { width:42px; height:42px; border-radius:12px; }.lp-visual-bubble strong,.lp-visual-bubble small { display:block; }.lp-visual-bubble strong { font-size:12px; }.lp-visual-bubble small { margin-top:4px;color:#7c8798;font-size:10px; }
.lp-section-head { max-width:680px; margin:0 auto 52px; text-align:center; }.lp-section-head.left { margin-left:0; text-align:left; }
.lp-section-head > span,.lp-start-copy > span { display:block; margin-bottom:14px; color:#ef4444; font-size:11px; font-weight:900; letter-spacing:.13em; }
.lp-section-head h2,.lp-start-copy h2 { margin:0; color:#101828; font-size:clamp(34px,4vw,50px); line-height:1.18; letter-spacing:-.065em; }
.lp-section-head p,.lp-start-copy p { margin:18px 0 0; color:var(--brand-ink-muted); font-size:15px; line-height:1.7; }
.lp-value { padding:120px 0; border-top:1px solid #f3f4f6; }
.lp-value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.lp-value-grid article { position:relative; min-height:300px; padding:30px; border:1px solid #eff6ff; border-radius:22px; background:#fff; transition:.2s ease; }.lp-value-grid article:hover { transform:translateY(-4px); box-shadow:0 18px 50px rgba(23,36,60,.08); }
.lp-number { position:absolute; right:25px; top:25px; color:#d1d5db; font-size:11px; font-weight:900; }
.lp-value-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:48px; border-radius:15px; font-size:19px; font-weight:900; }.lp-value-icon.blue{background:#eff6ff;color:#3b6fc4}.lp-value-icon.coral{background:#fef2f2;color:#ef4444}.lp-value-icon.green{background:#f0fdf4;color:#16a34a}
.lp-value-grid h3 { margin:0 0 12px; font-size:21px; letter-spacing:-.045em; }.lp-value-grid p { margin:0; color:var(--brand-ink-muted); font-size:14px; line-height:1.7; word-break:keep-all; }
.lp-features { padding:120px 0; }
.lp-feature-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; }
.lp-feature-main { min-height:450px; padding:48px; border-radius:25px; background:#111827; color:#fff; }.lp-feature-label { display:inline-block; padding:7px 11px; border:1px solid rgba(255,255,255,.15); border-radius:999px; color:#dbeafe; font-size:11px; font-weight:700; }.lp-feature-main h3 { margin:55px 0 18px; font-size:34px; line-height:1.2; letter-spacing:-.055em; }.lp-feature-main > p { max-width:470px; margin:0; color:#aeb9c8; font-size:14px; line-height:1.75; }.lp-feature-main ul { display:grid; gap:13px; margin:34px 0 0; padding:0; list-style:none; }.lp-feature-main li { display:flex; gap:10px; color:#eff6ff; font-size:13px; }.lp-feature-main li i { color:#f87171;font-style:normal; }
.lp-feature-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.lp-feature-cards article { min-height:219px; padding:25px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid #e5e7eb; border-radius:22px; background:#fff; }.lp-feature-cards article > span { color:#f87171;font-size:11px;font-weight:900; }.lp-feature-cards h3 { margin:0 0 8px;font-size:18px; }.lp-feature-cards p { margin:0;color:#7c8798;font-size:13px;line-height:1.55; }
.lp-demos { padding:120px 0; }
.lp-demo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.lp-demo-card { position:relative; min-height:275px; display:flex; flex-direction:column; padding:24px; border:1px solid #e5e7eb; border-radius:22px; background:#fff; transition:.18s ease; }.lp-demo-card:hover { transform:translateY(-4px); border-color:#fecaca; box-shadow:0 18px 45px rgba(52,36,38,.08); }
.lp-demo-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#fef2f2; color:#ef4444; font-size:18px; font-weight:900; }
.lp-demo-tag { position:absolute; right:20px; top:25px; color:var(--brand-ink-muted); font-size:10px; font-weight:700; }
.lp-demo-info { flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:35px 0 18px; }.lp-demo-info strong { display:block; color:#111827; font-size:17px; line-height:1.35; }.lp-demo-info span { display:block; margin-top:8px; color:#7c8798; font-size:12px; line-height:1.55; word-break:keep-all; }
.lp-player-bar { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:11px; background:#f6f7fb; }.lp-play-btn { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:50%; background:#111827; color:#fff; font-size:10px; transition:.15s ease; }.lp-play-btn:hover { transform:scale(1.06); }.lp-play-btn.playing { background:#ef4444; }.lp-progress-track { flex:1; height:3px; overflow:hidden; border-radius:4px; background:#dbeafe; }.lp-progress-fill { width:0; height:100%; border-radius:4px; background:#ef4444; transition:width .1s linear; }
.lp-start { margin-top:110px; padding:80px; border-radius:30px; background:#f3f4f6; }.lp-start-copy { max-width:690px; }.lp-steps { display:grid; grid-template-columns:1fr 34px 1fr 34px 1fr; align-items:center; gap:13px; margin:55px 0; }.lp-steps > div { display:flex; align-items:flex-start; gap:14px; }.lp-steps b { flex:0 0 32px; width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#ef4444;font-size:12px;box-shadow:0 4px 14px rgba(20,31,49,.08); }.lp-steps strong,.lp-steps small { display:block; }.lp-steps strong { font-size:14px; }.lp-steps small { margin-top:6px;color:#7c8798;font-size:12px;line-height:1.5; }.lp-steps > i { height:1px;background:#d1d5db; }
.lp-start-cta { display:grid; grid-template-columns:52px 1fr auto; gap:16px; align-items:center; padding:20px 22px; border:1px solid #e5e7eb; border-radius:18px; background:#fff; }.lp-start-cta img { width:52px;height:52px;border-radius:16px; }.lp-start-cta strong,.lp-start-cta > div span { display:block; }.lp-start-cta strong { font-size:15px; }.lp-start-cta > div span { margin-top:5px;color:#7c8798;font-size:12px; }.lp-start-cta button { height:46px;box-shadow:none; }
.lp-footer { width:min(1180px,calc(100% - 48px)); margin:100px auto 0; padding:35px 0 42px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:25px; border-top:1px solid #e5e7eb; }.lp-footer-brand { display:flex;align-items:center;gap:10px; }.lp-footer-brand img { width:38px;height:38px;border-radius:11px; }.lp-footer-brand strong,.lp-footer-brand span { display:block; }.lp-footer-brand strong { font-size:16px; }.lp-footer-brand span { margin-top:3px;color:var(--brand-ink-muted);font-size:11px; }.lp-footer-links { display:flex;align-items:center;gap:24px; }.lp-footer-links a,.lp-footer-links button { padding:0;border:0;background:transparent;color:var(--brand-ink-muted);font-size:12px;font-weight:700;text-decoration:none; }.lp-footer p { grid-column:1/-1;margin:4px 0 0;color:var(--brand-ink-muted);font-size:11px; }

/* 로그인 모달 */
.modal-sm { max-width:400px !important; }
.login-error {
  background:#fef2f2; border:1px solid rgba(240,68,56,.2);
  border-radius:8px; padding:8px 12px;
  font-size:13px; color:var(--danger); margin-bottom:12px;
}
.login-remember {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--muted); cursor:pointer;
  margin-bottom:4px;
}

/* 기존 로그인 스타일 (하위 호환) */
.login-hero { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.landing { width:min(1160px,100%); display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:stretch; }
.landing-main, .login-card, .floating-demo, .panel, .stat-card {
  border:1px solid var(--line); background:var(--card); backdrop-filter:blur(24px); box-shadow:var(--shadow); }
.landing-main, .login-card, .floating-demo { border-radius:36px; padding:32px; }
.badge { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line); font-weight:700; font-size:13px; color:var(--primary); }
.landing-main h1 { margin:24px 0 16px; font-size:clamp(42px,7vw,78px); line-height:.94; letter-spacing:-.09em; }
.landing-main p { color:var(--muted); font-size:16px; line-height:1.65; margin:0; max-width:670px; }
.landing-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:28px; }
.features { margin-top:32px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.feature { background:rgba(255,255,255,.72); border:1px solid var(--line); border-radius:20px; padding:16px; }
.feature strong { display:block; margin-bottom:4px; }
.feature span { color:var(--muted); font-size:13px; line-height:1.4; }
.login-side { display:grid; gap:20px; }
.login-card { display:flex; flex-direction:column; justify-content:center; }
.login-card h2 { margin:0 0 8px; font-size:32px; letter-spacing:-.06em; }
.login-card p { margin:0 0 24px; color:var(--muted); }
.mini-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line); }
.mini-row:last-child { border-bottom:0; }
.mini-row strong { display:block; font-size:14px; }
.mini-row span { color:var(--muted); font-size:12px; }


/* ──── 스티키 헤더 ──── */
.sticky-header {
  position:sticky; top:0; z-index:40;
  height:var(--header-h);
  background:#ffffff;
  backdrop-filter:none;
  border-bottom:1px solid rgba(15,23,42,.08);
  display:flex; align-items:center;
  padding:0;
  box-shadow:0 2px 12px rgba(15,23,42,.04);
}
:root { --page-gutter: 20px; }   /* 머리띠와 본문의 좌우 여백은 하나다 (대표님 2026-09-14 01:20: 좌우 여백이 똑같아야 안정감이 든다) */
.header-inner { position:relative; width:100%; max-width:1440px; height:100%; margin:0 auto; padding:0 var(--page-gutter); display:flex; align-items:center; gap:16px; min-width:0; }
.header-brand-text { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:4px; flex-shrink:0; color:var(--text); line-height:1.05; }
.header-brand-main { display:inline-flex; align-items:center; height:21px; padding:0 4px; border:1px solid rgba(71,84,103,.45); border-radius:4px; font-weight:700; font-size:16px; letter-spacing:0; line-height:1; transform:translateY(-1px); }
.header-brand-sub { display:block; height:auto; padding:0; border:0; border-radius:0; font-size:14px; color:var(--text); font-weight:600; letter-spacing:0; line-height:1.05; background:transparent; }
.header-brand { display:flex; align-items:center; gap:8px; text-decoration:none; flex-shrink:0; cursor:pointer; }
.header-brand-mark {
  width:34px; height:34px; border-radius:11px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px;
  box-shadow:0 6px 16px rgba(37,99,235,.25);
}
.header-brand-name { font-weight:700; font-size:16px; letter-spacing:-.04em; }
.header-org { font-size:14px; color:var(--text); font-weight:700; letter-spacing:-.01em; white-space:nowrap; }   /* 기관명은 보여야 한다 (대표님 2026-09-14) */
.header-brand-word { font-size:17px; font-weight:700; letter-spacing:-.022em; line-height:1; }
.header-brand-row { display:inline-flex; align-items:center; }

/* ──── 헤더 메뉴 드롭다운 ──── */
.header-nav-group { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:4px; width:auto; flex:0 0 auto; padding:4px; border:1px solid rgba(15,23,42,.08); border-radius:12px; background:rgba(248,250,252,.8); }
.header-primary-nav-btn {
  height:30px; padding:0 12px; border:0; border-radius:8px;
  background:transparent; color:var(--muted); font:inherit; font-size:14px;
  font-weight:700; cursor:pointer; white-space:nowrap; transition:.15s ease;
}
.header-primary-nav-btn:hover { background:rgba(37,99,235,.07); color:var(--text); }
.header-primary-nav-btn.active { background:var(--text); color:#fff; }
.header-menu-select {
  position:relative; display:flex; align-items:center; justify-content:center; gap:4px; min-width:0;
  height:30px; cursor:pointer; padding:0 8px; border-radius:8px;
  transition:.15s ease; user-select:none; flex-shrink:0;
  background:transparent; color:var(--muted);
}
.header-menu-select:hover { background:transparent; color:var(--text); }
.header-menu-select.open,
.header-menu-select.active { background:var(--text); color:#fff; }
.header-menu-label { font-weight:700; font-size:14px; letter-spacing:0; white-space:nowrap; }
.header-chevron { color:var(--muted); font-size:12px; transition:transform .2s ease; }
.header-menu-select .header-chevron { font-size:16px; font-weight:700; color:currentColor; }
.header-menu-select.open .header-chevron,
.header-user-btn.open .header-chevron { transform:rotate(180deg); }
.header-nav-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  min-width:150px; background:rgba(255,255,255,.98);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 16px 48px rgba(15,23,42,.14); padding:4px; z-index:200;
}
.header-menu-select.open .header-nav-dropdown { display:block; }
.nav-drop-item {
  display:grid; grid-template-columns:26px 1fr; align-items:center; column-gap:8px; width:100%;
  padding:8px 8px; border-radius:10px; color:var(--text);
  font-weight:700; font-size:13px; background:transparent;
  border:0; cursor:pointer; text-align:left; transition:.12s ease; white-space:nowrap;
}
.nav-drop-item:hover { background:rgba(37,99,235,.07); color:var(--primary); }
.nav-drop-item.active { background:var(--text); color:#fff; }
.nav-icon {
  width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; flex-shrink:0;
  background:rgba(37,99,235,.08); color:var(--primary);
  font-size:14px; line-height:1; font-weight:700;
}
.nav-drop-item.active .nav-icon { background:rgba(255,255,255,.16); color:#fff; }
.nav-label { min-width:0; line-height:1.2; }

/* 유저 드롭다운 */
.header-user-btn {
  position:relative; display:flex; align-items:center; gap:6px;
  width:auto; min-width:36px; height:36px; padding:0 10px 0 8px; border-radius:10px; cursor:pointer; transition:.15s ease;
  border:1px solid rgba(15,23,42,.10); background:rgba(37,99,235,.04); user-select:none; flex-shrink:0;
  justify-content:center;
}
.header-user-btn:hover { background:rgba(37,99,235,.08); }
.header-online-dot {
  position:absolute; right:5px; bottom:5px; width:7px; height:7px; border-radius:50%;
  background:#d1d5db; flex-shrink:0;
  transition: background .3s, box-shadow .3s;
}
.header-online-dot.sip-online {
  background:#12b76a;
  box-shadow:0 0 0 2px rgba(18,183,106,.25);
}
.header-user-btn.absence-inactive .header-online-dot {
  background:#12b76a;
  box-shadow:0 0 0 2px rgba(18,183,106,.22);
}
.header-user-btn.absence-active .header-online-dot {
  background:#ef4444;
  box-shadow:0 0 0 2px rgba(239,68,68,.22);
}
.header-user-icon { width:18px; height:18px; display:grid; place-items:center; color:var(--text); }
.header-user-icon svg { width:18px; height:18px; }
.header-user-name { font-size:13px; font-weight:700; white-space:nowrap; }
.header-user-name:empty { display:none; }
.header-person-icon { width:18px; height:18px; }
#headerUserBtn { width:36px; min-width:36px; padding:0; justify-content:center; }
.header-user-btn#headerUserBtn .header-online-dot { position:absolute; top:5px; right:5px; margin:0; }
.user-drop-name { padding:6px 8px 4px; font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; }
.user-drop-name:empty { display:none; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:0px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.user-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  min-width:138px; background:rgba(255,255,255,.98);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 16px 48px rgba(15,23,42,.14); padding:4px; z-index:200;
}
.header-user-btn.open .user-dropdown { display:block; }
.user-drop-item {
  display:block; width:100%; padding:8px 8px; border-radius:9px;
  background:transparent; border:0; font-size:13px; font-weight:700;
  color:var(--text); cursor:pointer; text-align:left; transition:.12s ease;
}
.user-drop-item:hover { background:rgba(37,99,235,.07); color:var(--primary); }
.user-drop-divider { height:1px; margin:4px 4px; background:var(--line); }

.header-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.pill { display:none; }

@media (max-width:520px) {
  .header-inner { padding:0 var(--page-gutter); gap:8px; }
  .header-brand-text { min-width:48px; }
  .header-nav-group { position:absolute; left:50%; transform:translateX(-50%); gap:4px; width:auto; padding:4px; }
  .header-primary-nav-btn { height:32px; padding:0 8px; font-size:13px; border-radius:8px; }
  .header-menu-select { height:30px; padding:0 8px; border-radius:8px; }
  .header-menu-label { font-size:13px; }
  .header-user-btn { height:34px; border-radius:9px; padding:0 8px 0 7px; }
  .header-user-name { font-size:12px; }
}
@media (max-width:640px) {
  /* 알림함·메뉴 판은 본문과 같은 폭·같은 좌우 여백 (대표님 2026-09-14: 판이 아래 내용보다 가로로 넓어지면 안 된다) */
  .notify-panel, #headerUserBtn .user-dropdown { position:fixed; top:calc(var(--header-h) + 8px); left:var(--page-gutter); right:var(--page-gutter); width:auto; min-width:0; }
  .header-user-btn#headerUserBtn .header-online-dot { top:4px; right:4px; }
}
@media (max-width:480px) {
  /* 좁은 폰: 기관명이 바닥글로 내려가 자리가 생겼다. 이름은 작게 그대로 보인다 */
  .header-user-name { font-size:11px; }
  .header-user-btn { padding:0 8px; }
}

.home-install-guide { border:1px solid var(--line); background:#f6f7fb; border-radius:16px; padding:12px; color:var(--text); font-size:14px; line-height:1.65; }
.home-install-guide strong { display:block; color:var(--text); font-size:14px; margin-bottom:4px; }
.home-install-guide ol { margin:8px 0 0; padding-left:20px; }
.home-install-guide li { margin:4px 0; }

/* 본문 */
.main { padding:24px var(--page-gutter); min-width:0; max-width:1440px; margin:0 auto; }
.topbar { display:flex; justify-content:space-between; align-items:center;
  gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.title-block h2 { margin:0; font-size:clamp(18px,2.6vw,28px); letter-spacing:-.06em; line-height:1.05; }
.title-block p { margin:8px 0 0; color:var(--muted); font-size:13px; }
.top-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* 참여자 메인 탭 */
.pt-main-tabs { display:flex; gap:4px; background:rgba(16,24,40,.05); border-radius:16px; padding:4px; }
.pt-main-tab {
  padding:8px 20px; border:0; border-radius:10px; background:transparent;
  font-size:14px; font-weight:700; color:var(--muted); cursor:pointer;
  transition:.15s ease; white-space:nowrap;
}
.pt-main-tab.active { background:#fff; color:var(--text); box-shadow:0 2px 8px rgba(16,24,40,.1); }
.pt-main-tab:not(.active):hover { color:var(--text); }

/* 그리드 */
.grid { display:grid; gap:16px; }
.stats { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:16px; }
.stat-card { border-radius:var(--radius-xl); padding:20px; min-height:130px; position:relative; overflow:hidden; }
.stat-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; }
.stat-name { color:var(--text); font-weight:700; font-size:14px; }
.stat-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary); }
/* '4,274' 처럼 네 자리가 되면 32px 로는 칸을 넘었다 (2026-09-17 통계).
   좁으면 줄어들게 두고 숫자 폭을 고르게 한다. */
.stat-value { font-size:clamp(22px, 7.5vw, 32px); font-weight:700; letter-spacing:-.07em;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.stat-desc { margin-top:4px; color:var(--muted); font-size:12px; font-weight:700; }
.layout { grid-template-columns:1.2fr .8fr; align-items:start; }
.two-col { grid-template-columns:.95fr 1.05fr; align-items:start; }
.panel { border-radius:var(--radius-xl); overflow:hidden; }
.panel-head { padding:16px 20px; display:flex; align-items:center;
  justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
/* 글자에 층을 준다 (2026-09-17). 네이버 증권은 일곱 층인데 우리는 13px 하나에 356개가
   몰려 있었다. 154곳의 13px 을 한꺼번에 건드리지 않고, 제목을 올리고 라벨을 내려
   층만 벌린다. */
.panel-head h3 { margin:0; font-size:18px; font-weight:700; letter-spacing:-.05em; }
.panel-head p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.org-info-head,
.org-balanced-head { height:62px; }
.panel-body { padding:12px; }
.segment { display:inline-flex; padding:4px; background:#f3f4f6; border-radius:999px; gap:4px; flex-shrink:0; }
.segment button { border:0; background:transparent; border-radius:999px;
  padding:4px 8px; color:var(--muted); font-weight:700; font-size:12px; }
.segment button.active { background:#fff; color:var(--text); box-shadow:0 5px 12px rgba(16,24,40,.08); }

/* 콜 아이템 */
.call-list, .task-list { padding:8px; }
.call-item, .task-item { display:grid; grid-template-columns:36px 1fr auto;
  align-items:center; gap:12px; padding:12px; border-radius:16px; transition:.15s ease; cursor:pointer; }
.call-item:hover, .task-item:hover { background:rgba(37,99,235,.05); }
.stt-btn {
  width:36px; height:36px; border-radius:10px; border:1.5px solid #cbd5e1;
  background:#f6f7fb; color:var(--muted); font-size:11px; font-weight:700;
  display:grid; place-items:center; cursor:pointer; flex-shrink:0;
  transition:.15s ease;
}
.stt-btn.has-stt { border-color:#2563eb; background:#eff6ff; color:#2563eb; }
.stt-btn.has-stt:hover { background:#2563eb; color:#fff; }
.stt-btn:disabled { opacity:.35; cursor:default; }
.item-title { font-weight:700; font-size:15px; }
.item-sub { margin-top:4px; color:var(--muted); font-size:12px; }
.call-mgr {
  display:inline-flex; align-items:center;
  font-size:13px; font-weight:700; color:#1d4ed8;
  background:#eff6ff; border:1px solid #bfdbfe;
  border-radius:999px; padding:4px 12px;
  white-space:nowrap;
}
.call-mgr.muted { color:var(--muted); background:#f3f4f6; border-color:#e5e7eb; font-weight:600; }

.quick-grid { padding:12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.quick-card { min-height:110px; padding:16px; border-radius:18px;
  background:linear-gradient(180deg,#fff,#f6f7fb); border:1px solid var(--line); transition:.2s ease; cursor:pointer; }
.quick-card:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(15,23,42,.08); }
.quick-card .emoji { font-size:20px; margin-bottom:12px; }
.quick-card strong { display:block; font-size:14px; letter-spacing:-.04em; }
.quick-card span { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.35; }
.campaign-list { padding:8px; }
.campaign-item { padding:8px 12px; border-radius:16px; }
.campaign-item:not(:last-child) { margin-bottom:0px; }
.campaign-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.campaign-type-icon { font-size:12px; color:var(--muted); }
.campaign-name { font-size:14px; font-weight:700; flex:1; }
.campaign-foot { display:flex; align-items:center; gap:8px; }
.campaign-bar { flex:1; height:7px; background:#f3f4f6; border-radius:999px; overflow:hidden; }
.campaign-bar span { display:block; height:100%; background:linear-gradient(90deg,#2563eb,#7c3aed); border-radius:999px; }
.campaign-count { font-size:11px; color:var(--muted); white-space:nowrap; }
.progress-box { padding:16px 20px 20px; }
.progress-row { margin-bottom:16px; }
.progress-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; font-weight:700; margin-bottom:8px; }
.bar { height:9px; background:#f3f4f6; border-radius:999px; overflow:hidden; }
.bar span { display:block; height:100%; background:linear-gradient(90deg,#2563eb,#7c3aed); border-radius:999px; }

/* ──── 전화함 탭 ──── */
#page-calls .topbar { display:block; }
.call-log-actions { display:flex; align-items:center; gap:8px; flex:1 1 100%; width:100%; min-width:0; justify-content:flex-start; flex-wrap:nowrap; }
.call-log-subbar { display:flex; align-items:flex-end; gap:12px; margin:-4px 0 4px; }
.call-list-count { color:var(--text); font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:8px; min-height:39px; padding-bottom:0; transform:translateX(10px); }
.call-list-count strong { font-size:16px; font-weight:600; letter-spacing:0; }
.call-count-label { color:var(--muted); font-size:14px; font-weight:700; }
.call-count-people { display:inline-flex; align-items:center; color:var(--muted); font-size:13px; font-weight:600; line-height:21px; padding:0 8px; border:1px solid var(--line); border-radius:8px; background:transparent; }
.call-count-person-icon { position:relative; width:14px; height:14px; display:inline-block; color:currentColor; flex:0 0 auto; }
.call-count-person-icon::before { content:""; position:absolute; left:4px; top:1px; width:6px; height:6px; border:1.6px solid currentColor; border-radius:50%; box-sizing:border-box; }
.call-count-person-icon::after { content:""; position:absolute; left:2px; bottom:1px; width:10px; height:6px; border:1.6px solid currentColor; border-radius:8px 8px 3px 3px; box-sizing:border-box; }
.call-period-menu { position:relative; flex:0 0 auto; width:auto; margin-left:auto; }
.call-period-select { min-width:78px; height:39px; border:0; border-radius:0; background:transparent; color:var(--text); font-size:16px; font-weight:600; padding:0 16px 0 0; display:flex; align-items:center; justify-content:flex-end; cursor:pointer; position:relative; white-space:nowrap; text-align:right; }
.call-period-arrow { position:absolute; right:2px; top:50%; width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-65%) rotate(45deg); opacity:.65; }
.call-period-options { display:none; position:absolute; top:calc(100% + 5px); right:0; width:112px; z-index:30; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.14); overflow:hidden; }
.call-period-menu.open .call-period-options { display:grid; }
.call-period-options button { border:0; background:#fff; color:var(--text); font-size:16px; font-weight:600; padding:8px 8px; cursor:pointer; text-align:right; white-space:nowrap; }
.call-period-options button:hover,
.call-period-options button.active { background:#f3f4f6; }
/* 선을 긋지 말고 바탕으로 가른다 (대표님 2026-09-16).
   테두리를 끄고 회색 판 위에 올린다. 고른 것만 흰 바탕으로 떠오른다. */
.call-mode-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:4px; padding:4px; border:0; border-radius:12px; background:var(--brand-surface); flex:1 1 auto; min-width:0; }
.call-mode-btn { border:0; border-radius:8px; padding:8px; background:transparent; color:var(--muted); font-size:13px; font-weight:700; cursor:pointer; min-width:0; white-space:nowrap; display:flex; align-items:center; justify-content:center; }
.call-mode-btn.active { background:var(--brand-card); color:var(--brand-primary);
  box-shadow:0 1px 3px rgba(16,24,40,.10); }
.call-direction-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; gap:4px; padding:4px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.call-direction-tabs { flex:1 1 auto; min-width:0; }
.call-direction-tabs .call-direction-btn { flex:1 1 0; }
.call-direction-btn { border:0; border-radius:9px; padding:8px 4px; background:transparent; color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; min-width:0; white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:4px; }
.call-direction-btn.active { background:var(--text); color:#fff; }
.call-dir-count { flex:0 0 auto; min-width:24px; padding:0px 4px; border-radius:999px; background:rgba(15,23,42,.08); color:inherit; font-size:11px; line-height:16px; text-align:center; font-variant-numeric:tabular-nums; }
.call-direction-btn.active .call-dir-count { background:rgba(255,255,255,.22); }
.call-missed-toggle { border:1px solid #fecaca; border-radius:12px; padding:8px 12px; background:#fff; color:#b91c1c; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.call-log-subbar .call-missed-toggle { margin-left:auto; }
.call-missed-toggle.active { background:#ef4444; border-color:#ef4444; color:#fff; }
.call-missed-check { width:14px; height:14px; border:1.6px solid currentColor; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.call-missed-toggle.active .call-missed-check::after { content:""; width:7px; height:4px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg) translate(1px,-1px); }
.calltab-wrap { display:none; gap:8px; margin-bottom:12px; }
.calltab { display:inline-flex; align-items:center; gap:4px; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; transition:.15s ease; }
.calltab.active { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }
.calltab:not(.active):hover { color:var(--text); border-color:#d1d5db; }
.calltab-count { font-size:11px; font-weight:700; background:rgba(0,0,0,.08); border-radius:999px; padding:0px 4px; }
.calltab.active .calltab-count { background:rgba(255,255,255,.25); }
.call-card-list { display:flex; flex-direction:column; gap:8px; }
.call-card { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:12px; padding:12px 12px 12px 16px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 4px rgba(16,24,40,.05); cursor:pointer; transition:.15s ease; }
/* 올려놓으면 살짝 떠오른다 — 누를 수 있다는 신호 (2026-09-16).
   테두리 색을 바꾸면 줄이 굵어 보여 목록이 시끄러워진다. 그림자만 준다. */
.call-card:hover { box-shadow:0 4px 14px rgba(16,24,40,.10); transform:translateY(-1px); }
.call-card-simple { grid-template-columns:1fr auto 34px; column-gap:12px; cursor:default; }
.call-card-simple .call-card-left { grid-column:auto; min-width:0; }
.call-card-simple.call-card-inbound .call-card-left { padding-left:0; }
.call-card-status { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.call-card-status svg { width:15px; height:15px; }
.call-card-status.is-inbound { background:#ef4444; }
.call-card-status.is-outbound { background:#2563eb; }
.call-card-time { color:var(--muted); font-size:14px; font-weight:600; white-space:nowrap; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:4px; }
.call-card-time.is-missed { color:var(--muted); }
.call-card-result { color:var(--text); font-weight:700; }
.call-card-result.is-missed { color:var(--brand-danger); }
.call-card-timestamp { color:var(--muted); font-size:14px; font-weight:600; }
.call-card-date { color:var(--muted); font-size:12px; font-weight:600; line-height:1.2; }
.call-card-duration { color:var(--muted); font-size:12px; font-weight:600; line-height:1.2; display:inline-flex; align-items:center; gap:4px; }
.call-duration-icon {
  position:relative; width:10px; height:10px; border:1.4px solid currentColor;
  border-radius:50%; opacity:.75; flex:0 0 auto;
}
.call-duration-icon::before,
.call-duration-icon::after {
  content:""; position:absolute; left:50%; top:50%; width:1.2px;
  background:currentColor; border-radius:999px; transform-origin:50% 0;
}
.call-duration-icon::before { height:3px; transform:translate(-50%,-50%) rotate(0deg); }
.call-duration-icon::after { height:2.8px; transform:translate(-50%,-50%) rotate(120deg); }
.call-card-sub { color:var(--text); font-size:14px; font-weight:600; display:flex; align-items:center; min-width:0; max-width:100%; white-space:nowrap; }
.call-card-biz-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.call-card-direction-icon {
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; width:16px; margin-right:4px; color:var(--muted); font-size:14px; line-height:1;
  vertical-align:1px;
}
.call-card-direction-icon.is-outbound { top:1px; }
.call-direction-badge { display:inline-flex; align-items:center; height:18px; padding:0 4px; margin-right:4px; border:1px solid #ef4444; border-radius:999px; color:var(--brand-danger); background:#fff; font-size:11px; font-weight:700; line-height:1; vertical-align:1px; }
.call-card-outbound .call-direction-badge { border-color:#93c5fd; color:#2563eb; }
.call-memo-badge { display:inline-flex; align-items:center; margin-right:4px; padding:0px 8px; border-radius:999px; border:1px solid #fbbf24; color:#854d0e; background:#fef3c7; font-size:11px; font-weight:700; }
.call-card-date { color:var(--muted); font-size:12px; font-weight:600; line-height:1.2; }
.call-card-missed-count {
  display:inline-flex; align-items:center; margin-left:8px; padding:0px 8px;
  border-radius:999px; background:#fee2e2; color:var(--brand-danger);
  font-size:12px; font-weight:700; line-height:1.2; vertical-align:2px;
}
.call-card-dial { width:34px; height:34px; border:0; border-radius:50%; background:#f3f4f6; color:#007aff; font-size:16px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:none; justify-self:end; }
.call-card-dial svg { width:17px; height:17px; }
.call-card-dial:hover { background:#e5e7eb; color:#006ee6; }
.call-dir-count { margin-left:4px; font-size:11px; font-weight:700; color:inherit; opacity:.75; }
.call-card-expandable { grid-template-rows:auto; }
.call-detail-panel { grid-column:1 / -1; display:none; border-top:1px solid var(--line); margin-top:4px; padding-top:12px; cursor:default; }
.call-card.open .call-detail-panel { display:block; }
.call-detail-grid { display:grid; grid-template-columns:1fr; gap:8px; align-items:start; }
.call-detail-grid .field { margin:0; }
.call-detail-grid .field.full { grid-column:1 / -1; }
.call-transfer-note { width:100%; min-height:82px; resize:vertical; }
.call-transfer-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.call-transfer-manager-picker {
  min-width:0; width:100%; height:38px; padding:0 12px; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--text); font:inherit; font-size:13px;
  font-weight:700; text-align:left; cursor:pointer; display:flex; align-items:center;
}
.call-transfer-manager-picker:hover { border-color:#bfdbfe; background:#f6f7fb; }
.call-transfer-manager-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.call-transfer-manager-value.muted { color:var(--muted); }
.call-transfer-submit {
  height:38px; min-width:68px; padding:0 12px; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--text); font:inherit; font-size:13px;
  font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.call-transfer-submit:hover { border-color:#bfdbfe; background:#f6f7fb; }
.call-transfer-status { display:block; min-height:18px; margin-top:8px; color:var(--brand-danger); font-size:12px; font-weight:700; }
.call-transfer-status.ok { color:#047857; }
.call-transfer-meta { color:var(--muted); font-size:11px; font-weight:700; }
.call-detail-divider { height:1px; background:var(--line); margin:4px 0 12px; }
.call-missed-complete-btn {
  width:100%; height:42px; border:0; border-radius:10px; background:#ef4444; color:#fff;
  font:inherit; font-size:14px; font-weight:700; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
}
.call-missed-complete-btn:hover { background:var(--brand-danger); }
.call-manager-modal { width:min(640px,100%); }
.call-manager-search { width:100%; height:40px; border:1px solid var(--line); border-radius:10px; padding:0 12px; font:inherit; font-size:14px; margin-bottom:12px; }
.call-manager-list { display:grid; align-content:start; gap:8px; min-height:360px; max-height:58vh; overflow:auto; }
.call-manager-row { border:1px solid var(--line); border-radius:10px; background:#fff; padding:8px 12px; text-align:left; display:grid; gap:4px; cursor:pointer; }
.call-manager-row:hover { border-color:#bfdbfe; background:#eff6ff; }
.call-manager-clear-row { background:#f6f7fb; }
.call-manager-row strong { font-size:14px; font-weight:700; color:var(--text); }
.call-manager-row span { font-size:12px; font-weight:700; color:var(--muted); }
.call-route { display:flex; align-items:center; gap:0; min-width:0; }
.call-route-caller { color:var(--text); font-weight:700; }
.call-route-manager { color:var(--muted); font-weight:700; }
.call-route-arrow { color:var(--muted); font-weight:700; margin:0 12px; }
.call-done-icon { width:36px; height:36px; border-radius:50%; background:#f0fdf4; border:1px solid #bbf7d0; display:flex; align-items:center; justify-content:center; font-size:14px; color:#16a34a; flex-shrink:0; }

/* ──── 캠페인 폼 공통 ──── */
.campaign-form-wrap { display:flex; flex-direction:column; gap:8px; max-width:780px; }
.cs-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); padding:12px 16px; }
.cs-label { font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; display:flex; align-items:center; gap:8px; }

/* 캠페인명 인라인 카드 */
.cs-card-inline { display:flex; align-items:center; gap:12px; }
.cs-card-inline .cs-label { flex-shrink:0; margin-bottom:0; font-size:12px; }
.cs-name-input { width:100%; box-sizing:border-box; padding:8px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-weight:700; font-family:inherit; }
.cs-name-input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }

/* ──── 발송대상 드롭다운 2-col ──── */
.cs-tgt-selrow { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cs-tgt-sel { flex:1; min-width:0; padding:8px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-family:inherit; background:#fff; cursor:pointer; }
.cs-tgt-sel:focus { outline:none; border-color:#2563eb; }
.cs-tgt-sel:disabled { background:#f6f7fb; color:var(--muted); cursor:default; }
.cs-tgt-rows { display:flex; flex-direction:column; gap:4px; }
.cs-tgt-row { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#f6f7fb; border:1px solid var(--line); border-radius:10px; font-size:13px; }
.cs-tgt-row-label { flex:1; font-weight:700; color:var(--text); }
.cs-tgt-row-count { color:#1d4ed8; font-weight:700; font-size:12px; white-space:nowrap; }
.cs-tgt-row-del { border:0; background:none; color:var(--muted); font-size:16px; cursor:pointer; padding:0 0px; line-height:1; flex-shrink:0; }
.cs-tgt-row-del:hover { color:#ef4444; }
.cs-count-badge { background:#eff6ff; color:#1d4ed8; font-size:11px; font-weight:700; border-radius:999px; padding:0px 8px; border:1px solid #bfdbfe; }
.cs-target-tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px; }
.cs-target-tab { padding:4px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; transition:.15s; }
.cs-target-tab.active { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }
.cs-target-sub { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cs-all-note { font-size:13px; color:var(--text); }
.cs-tag-wrap { display:flex; flex-wrap:wrap; gap:4px; min-height:24px; }
.cs-tag { display:inline-flex; align-items:center; gap:4px; background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8; font-size:12px; font-weight:700; border-radius:999px; padding:4px 8px; }
.cs-tag button { border:0; background:none; color:#93c5fd; cursor:pointer; font-size:14px; line-height:1; padding:0 0 0 0px; }
.cs-person-search { position:relative; flex:1; }
.cs-person-search input { width:100%; box-sizing:border-box; padding:8px 12px; border:1px solid var(--line); border-radius:10px; font-size:13px; font-family:inherit; }
.cs-search-drop { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.1); z-index:300; max-height:200px; overflow-y:auto; display:none; }
.cs-search-drop.open { display:block; }
.cs-drop-item { padding:8px 12px; font-size:13px; cursor:pointer; }
.cs-drop-item:hover { background:#f6f7fb; }
.cs-drop-item:not(:last-child) { border-bottom:1px solid var(--line); }
.cs-inner-tabs { display:flex; gap:4px; background:rgba(16,24,40,.05); border-radius:12px; padding:4px; margin-bottom:12px; }
.cs-inner-tab { flex:1; padding:8px 8px; border-radius:10px; border:0; background:none; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; transition:.15s; white-space:nowrap; }
.cs-inner-tab.active { background:#fff; color:var(--text); box-shadow:0 2px 8px rgba(16,24,40,.1); }
.cs-voice-head { justify-content:space-between; align-items:center; gap:12px; }
.cs-voice-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.cs-voice-search { width:152px; height:32px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:0 8px; font-size:12px; font-family:inherit; color:var(--text); outline:none; }
.cs-voice-search:focus { border-color:rgba(37,99,235,.45); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.cs-saved-list { display:flex; flex-direction:column; gap:0; max-height:172px; overflow-y:auto; border:1px solid var(--line); border-radius:16px; }
.cs-selected-voice-summary { margin-bottom:12px; padding:12px; border:1px solid #fde68a; background:#fffbeb; color:#9a3412; border-radius:12px; font-size:13px; font-weight:700; }
.cs-selected-voice-summary.has-selection { border-color:#93c5fd; background:#eff6ff; color:#1d4ed8; }
.cs-selected-voice-summary strong { color:inherit; font-size:14px; }
.cs-selected-chip { display:inline-flex; align-items:center; height:20px; padding:0 8px; margin-right:8px; border-radius:999px; background:#2563eb; color:#fff; font-size:11px; font-weight:700; vertical-align:1px; }
.cs-saved-item { min-height:57px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; background:#fff; cursor:pointer; transition:.1s; }
.cs-saved-item:not(:last-child) { border-bottom:1px solid var(--line); }
.cs-saved-item:hover { background:#f6f7fb; }
.cs-saved-item.selected { background:#eff6ff; }
.cs-saved-item-radio { position:absolute; opacity:0; pointer-events:none; }
.cs-saved-name { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.cs-selected-badge { display:none; flex-shrink:0; border:1px solid #93c5fd; background:#dbeafe; color:#1d4ed8; border-radius:999px; padding:4px 8px; font-size:11px; font-weight:700; white-space:nowrap; }
.cs-saved-item.selected .cs-selected-badge { display:inline-flex; }
.cs-voice-row-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.cs-voice-play-btn { flex-shrink:0; padding:0; width:56px; height:32px; border:1px solid var(--line); background:#fff; color:var(--text); border-radius:8px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.cs-voice-play-btn:hover { border-color:#bfdbfe; background:#f6f7fb; color:#1d4ed8; }
.cs-voice-play-btn.is-playing { border-color:#2563eb; background:#2563eb; color:#fff; }
.cs-voice-delete-btn { flex-shrink:0; padding:0; width:44px; height:32px; border:1px solid #fecaca; background:#fff; color:var(--brand-danger); border-radius:8px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.cs-voice-delete-btn:hover { background:#fef2f2; border-color:#fca5a5; }
.cs-mini-wave { display:none; align-items:center; gap:4px; height:18px; }
.cs-mini-wave i { display:block; width:3px; height:8px; border-radius:999px; background:currentColor; animation:voiceWave .72s ease-in-out infinite; }
.cs-mini-wave i:nth-child(2) { animation-delay:.1s; }
.cs-mini-wave i:nth-child(3) { animation-delay:.2s; }
.cs-mini-wave i:nth-child(4) { animation-delay:.3s; }
.cs-voice-play-btn.is-playing .cs-play-label { display:none; }
.cs-voice-play-btn.is-playing .cs-mini-wave { display:flex; }
.cs-saved-empty { padding:16px 12px; color:var(--muted); font-size:13px; text-align:center; }
@keyframes voiceWave { 0%,100% { transform:scaleY(.45); } 50% { transform:scaleY(1.45); } }
/* ── 모달 ── */
.cs-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9000; display:flex; align-items:center; justify-content:center; padding:20px; }
.cs-modal { background:#fff; border-radius:20px; width:100%; max-width:520px; box-shadow:0 20px 60px rgba(0,0,0,.18); overflow:hidden; }
.cs-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 0; }
.cs-modal-head strong { font-size:16px; font-weight:700; }
.cs-modal-close { border:0; background:none; font-size:20px; color:var(--muted); cursor:pointer; line-height:1; }
.cs-modal-body { padding:16px 20px; }
.cs-modal-tab-panels { min-height:240px; }
.cs-modal-panel { display:flex; flex-direction:column; }
.cs-modal-save { display:flex; gap:8px; padding:12px 20px 20px; align-items:center; border-top:1px solid var(--line); }
.cs-modal-save input { flex:1; min-width:0; padding:8px 12px; border:1px solid var(--line); border-radius:10px; font-size:13px; font-family:inherit; }
.bc-test-send-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:92px; text-align:center; }
.bc-test-send-btn .phone-icon { flex-shrink:0; }
/* ── 예약 캠페인 카드 ── */
.cs-reserve-card { background:#fff; border:1px solid #bfdbfe; border-left:4px solid #2563eb; border-radius:16px; padding:16px 16px; }
.cs-reserve-card-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cs-reserve-badge { background:#dbeafe; color:#1d4ed8; font-size:11px; font-weight:700; padding:4px 8px; border-radius:8px; white-space:nowrap; }
.cs-reserve-card-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.cs-tts-area { width:100%; box-sizing:border-box; padding:12px; border:1px solid var(--line); border-radius:12px; font-size:13px; resize:none; font-family:inherit; line-height:1.6; }
.cs-tts-opts { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; align-items:center; }
.cs-save-row { display:flex; gap:8px; margin-top:12px; align-items:center; }
.cs-save-row input { flex:1; padding:8px 12px; border:1px solid var(--line); border-radius:10px; font-size:13px; font-family:inherit; }
.cs-file-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:28px; border:2px dashed var(--line); border-radius:16px; cursor:pointer; transition:.15s; text-align:center; font-size:13px; }
.cs-file-drop:hover { border-color:#2563eb; background:#f6f7fb; }
.cs-file-name { font-size:13px; color:#1d4ed8; font-weight:700; margin-top:8px; }
.cs-record-area { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 20px 20px; }
.cs-record-btn { width:72px; height:72px; border-radius:50%; border:3px solid #ef4444; background:#fff; font-size:24px; cursor:pointer; transition:background .15s, box-shadow .15s; flex-shrink:0; }
@keyframes bc-pulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)} 70%{box-shadow:0 0 0 14px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }
.cs-record-btn.recording { background:#fef2f2; animation:bc-pulse 1.2s ease-out infinite; }
.cs-mic-status { font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; margin:8px 0 0; text-align:center; align-self:stretch; }
.cs-mic-checking { background:#f3f4f6; color:var(--muted); }
.cs-mic-granted  { background:#dcfce7; color:#16a34a; }
.cs-mic-denied   { background:#fef2f2; color:var(--brand-danger); }
#bcWaveCanvas { width:100%; border-radius:10px; background:#eff6ff; }
.cs-msg-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cs-var-btn { font-size:12px; padding:4px 8px; border-radius:8px; border:1px solid #bfdbfe; background:#eff6ff; color:#1d4ed8; cursor:pointer; font-weight:700; font-family:inherit; }
.cs-char-count { margin-left:auto; font-size:11px; color:var(--muted); }
.cs-msg-area { width:100%; box-sizing:border-box; padding:12px; border:1px solid var(--line); border-radius:12px; font-size:14px; resize:none; font-family:inherit; line-height:1.65; }
.cs-msg-area-large { min-height:220px; resize:vertical; }
.cs-msg-under-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; flex-wrap:wrap; }
.cs-msg-image-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-left:auto; }
.cs-mms-img { width:100%; border-radius:12px; margin-bottom:8px; max-height:300px; object-fit:contain; border:1px solid var(--line); }
.cs-preview-wrap { background:#e5e7eb; border-radius:16px; padding:16px; max-width:300px; }
.cs-preview-sender { font-size:11px; color:var(--muted); margin-bottom:8px; font-weight:700; }
.cs-preview-bubble { background:#fff; border-radius:12px 12px 12px 4px; padding:12px 12px; font-size:13px; line-height:1.65; box-shadow:0 1px 4px rgba(0,0,0,.1); word-break:keep-all; }
.cs-schedule-toggle { display:flex; gap:24px; margin-bottom:12px; }
.cs-radio { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; cursor:pointer; }
.cs-radio input[type=radio] { width:16px; height:16px; cursor:pointer; accent-color:#2563eb; }
.cs-sched-fields { margin-bottom:12px; }
.cs-action-row { display:flex; justify-content:flex-end; gap:8px; }
.cs-submit-btn { min-width:130px; }
.cs-hist-list { display:flex; flex-direction:column; gap:8px; }
.cs-hist-item { display:flex; align-items:center; gap:12px; padding:12px 12px; border:1px solid var(--line); border-radius:12px; }
.cs-hist-main { flex:1; }

/* ──── 캠페인 페이지 탭 ──── */
.cs-page-tabs { display:flex; gap:4px; margin-bottom:16px; background:rgba(16,24,40,.05); border-radius:16px; padding:4px; max-width:780px; }
.cs-page-tab { flex:1; padding:8px 12px; border:0; border-radius:12px; background:none; font-size:14px; font-weight:700; color:var(--muted); cursor:pointer; transition:.15s; }
.cs-page-tab.active { background:#fff; color:var(--text); box-shadow:0 2px 8px rgba(16,24,40,.1); }

/* ──── 히스토리 카드 ──── */
.cs-hist-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 20px; }
.cs-hist-card-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cs-hist-card-name { font-size:14px; font-weight:700; flex:1; }
.cs-hist-date { font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap; flex-shrink:0; }
.cs-type-badge { font-size:11px; font-weight:700; border-radius:999px; padding:4px 8px; flex-shrink:0; }
.cs-type-badge.bc  { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.cs-type-badge.sms { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }
.cs-type-badge.lms { background:#fffbeb; color:#a16207; border:1px solid #fde68a; }
.cs-type-badge.mms { background:#f5f3ff; color:#7c3aed; border:1px solid #ddd6fe; }
.cs-hist-card-meta { display:flex; flex-wrap:wrap; gap:4px 20px; margin-bottom:12px; }
.cs-hist-meta-item { font-size:13px; color:var(--muted); }
.cs-hist-meta-item strong { color:var(--text); font-weight:700; }
.cs-hist-card-foot { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }

/* ──── 예약발신 날짜/시각 균등 그리드 ──── */
.cs-sched-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cs-sched-input {
  width:100%; box-sizing:border-box;
  height:40px; padding:0 12px;
  border:1px solid var(--line); border-radius:10px;
  font-size:14px; font-family:inherit; background:#fff;
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center;
}
.cs-sched-input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
input[type="date"].cs-sched-input {
  -webkit-appearance:none; appearance:none;
  background-image:none;
  line-height:1;
}


.progress-row { margin-bottom:16px; }
.progress-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; font-weight:700; margin-bottom:8px; }
.bar { height:9px; background:#f3f4f6; border-radius:999px; overflow:hidden; }
.bar span { display:block; height:100%; background:linear-gradient(90deg,#2563eb,#7c3aed); border-radius:999px; }

/* ──── 참여자 툴바 ──── */
.pt-search-row {
  display:flex; align-items:center; gap:8px;
  margin-bottom:4px;
}
.pt-toolbar-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0;
  margin-top:8px;
  margin-bottom:8px;
}
.pt-total-count { font-size:13px; font-weight:700; color:var(--text); margin-left:8px; }
.pt-search-row .search { flex:1; max-width:none; }
.search { position:relative; }
.pt-filter-btn {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  border:1px solid var(--line); background:#fff; color:var(--muted);
  cursor:pointer; transition:.15s ease;
}
.pt-filter-btn:hover { border-color:var(--primary); color:var(--primary); }
.pt-filter-btn.has-filter { border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }
.pt-filter-badge {
  position:absolute; top:-5px; right:-5px;
  min-width:16px; height:16px; border-radius:999px;
  background:var(--primary); color:#fff;
  font-size:11px; font-weight:700; line-height:16px; text-align:center; padding:0 4px;
}
.pt-filter-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; min-height:0; }
.pt-filter-tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 8px 4px 8px; border-radius:999px;
  background:var(--primary-soft); color:var(--primary);
  font-size:12px; font-weight:700; border:1px solid rgba(37,99,235,.2);
}
.pt-filter-tag button {
  background:none; border:0; color:var(--primary); font-size:13px;
  line-height:1; padding:0; cursor:pointer; font-weight:700;
}
/* 필터 모달 */
.filter-section { margin-bottom:16px; }
.filter-section:last-child { margin-bottom:0; }
.filter-section-label { font-size:12px; font-weight:700; color:var(--muted); margin-bottom:8px; }
.select-soft.w-full { width:100%; border-radius:10px; padding:8px 12px; }
.search input { width:100%; border:1px solid var(--line); background:rgba(255,255,255,.9);
  border-radius:999px; padding:8px 12px 8px 36px; outline:none; font-size:13px; }
.search input:focus { border-color:rgba(37,99,235,.4); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.search::before { content:''; position:absolute; left:12px; top:50%;
  transform:translateY(-50%); width:16px; height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain; }
.select-soft { border:1px solid var(--line); background:#fff; border-radius:999px;
  height:var(--h-md); padding:0 12px; color:var(--text); font-weight:700; font-size:13px; cursor:pointer; }
.select-soft:focus { outline:none; border-color:rgba(37,99,235,.4); }

/* 출근 필터 토글 */
.att-group { display:inline-flex; background:#f3f4f6; border-radius:999px; padding:4px; gap:0px; }
.att-btn { border:0; background:transparent; border-radius:999px;
  padding:4px 12px; font-weight:700; font-size:12px; color:var(--muted); white-space:nowrap; transition:.15s ease; }
.att-btn.active { background:#fff; color:var(--text); box-shadow:0 4px 10px rgba(16,24,40,.08); }
.att-btn.active.green  { color:var(--success); }
.att-btn.active.orange { color:var(--warning); }

/* 뷰 모드 토글 (요약/상세) */
.view-group { display:inline-flex; background:#f3f4f6; border-radius:999px; padding:4px; gap:0px; }
.view-btn { border:0; background:transparent; border-radius:999px;
  padding:4px 12px; font-weight:700; font-size:12px; color:var(--muted); white-space:nowrap; transition:.15s ease; }
.view-btn.active { background:#fff; color:var(--text); box-shadow:0 4px 10px rgba(16,24,40,.08); }

/* 검색결과 카운트 */
.result-count { font-size:12px; color:var(--muted); font-weight:700; white-space:nowrap; margin-left:auto; }

/* ──── 참여자 카드 뷰 (요약) ──── */
.pt-cards { display:flex; flex-direction:column; gap:4px; }
.pt-card {
  display:grid; grid-template-columns:28px 1fr auto;
  align-items:center; gap:8px;
  background:rgba(255,255,255,.78); border:1px solid var(--line);
  border-radius:16px; padding:8px 12px; min-height:54px;
}
.pt-card-info { min-width:0; }
.pt-card-name { font-size:14px; font-weight:700; letter-spacing:-.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.name-phone { color:var(--brand-ink-muted); font-weight:700; }
.name-phone-plain { color:var(--text); font-weight:600; font-size:13px; }
.field-muted { color:var(--brand-ink-muted); font-weight:600; font-size:12px; }
.pt-card-biz  {
  display:inline-block; font-size:11px; color:var(--muted); font-weight:700;
  border:1px solid var(--line); border-radius:5px;
  padding:0px 4px; margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.pt-loading { text-align:center; color:var(--muted); font-size:13px; padding:36px 0; }

/* ──── 참여자 상세 카드 뷰 ──── */
.pt-detail-cards { display:flex; flex-direction:column; gap:8px; }
.pt-detail-card { background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:16px; overflow:hidden; position:relative; }
.pt-detail-header {
  display:flex; align-items:center; gap:8px;
  padding:12px 12px 8px; border-bottom:1px solid rgba(234,179,8,.18);
  background:rgba(254,252,232,.72); border-radius:16px 14px 0 0;
  user-select:none;
}
.pt-detail-header:active { background:rgba(254,240,138,.6); }
.pt-detail-fields { display:grid; grid-template-columns:1fr; cursor:pointer; }
.pt-detail-fields:hover { background:rgba(37,99,235,.025); border-radius:0 0 14px 14px; }
.pt-detail-name {
  flex:1; font-size:14px; font-weight:700; letter-spacing:-.03em;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pt-staff-stats {
  flex-shrink:0; font-size:12px; font-weight:600; color:var(--text);
  white-space:nowrap; padding:0 4px;
}
.staff-title-mini {
  display:inline; margin-left:4px; padding:0; border:0; border-radius:0;
  color:var(--text); background:transparent; font-size:inherit; font-weight:600;
}
.staff-ext-inline {
  color:var(--text); font-size:inherit; font-weight:600; margin-left:4px;
}
.pt-detail-seq {
  flex-shrink:0; font-size:12px; font-weight:700; color:var(--muted);
  background:rgba(156,163,175,.12); border-radius:8px;
  padding:0px 8px; line-height:1.6;
}
.pt-call-btn { display:none; } /* deprecated - 모달로 대체 */
.pt-phone-click { cursor:pointer; transition:color .15s, background .15s; }
.pt-phone-click:hover { color:#006ee6; }
.pt-phone-call-icon {
  margin-left:8px; width:24px; height:24px; border:0; border-radius:50%;
  background:#f3f4f6; color:#007aff; display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle; padding:0; cursor:pointer;
}
.pt-phone-call-icon:hover { background:#e5e7eb; color:#006ee6; }
.pt-phone-call-icon svg { width:14px; height:14px; }
.call-modal { max-width:360px; border-radius:24px; }
.call-modal-head { padding:16px 20px 0; }
.call-modal-body { text-align:center; padding:28px 24px 16px; }
.call-modal-name {
  min-height:31px; font-size:24px; line-height:1.3; font-weight:700;
  color:var(--text); overflow-wrap:anywhere;
}
.call-modal-phone {
  margin-top:4px; min-height:22px; font-size:16px; line-height:1.4;
  color:var(--muted); overflow-wrap:anywhere;
}
.call-modal-caller-id {
  min-height:22px; margin-top:12px; font-size:16px; line-height:1.4;
  color:var(--text); font-weight:700;
}
.call-device-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0 12px; }
.call-device-option { border:1px solid #dbeafe; border-radius:12px; background:#fff; color:var(--text); padding:12px 8px; font-weight:700; cursor:pointer; }
.call-device-option.active { border-color:#f97316; background:#fffbeb; color:#c2410c; box-shadow:0 0 0 1px #f97316 inset; }
.call-mic-status {
  width:100%; margin-top:12px; border:1px solid var(--line); border-radius:16px;
  background:#f6f7fb; color:var(--text); padding:8px 12px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; font-weight:700; cursor:pointer;
}
.call-mic-status.is-ready { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.call-mic-status.is-needed { background:#fffbeb; border-color:#fed7aa; color:#c2410c; }
.call-mic-status.is-denied,
.call-mic-status.is-error { background:#fef2f2; border-color:#fecaca; color:var(--brand-danger); }
.call-mic-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(100,116,139,.12); }
.sip-call-status {
  position:absolute; width:1px; height:1px; padding:0; margin:0px;
  overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;
}
.sip-call-idle,
.sip-call-ended { color:var(--muted); }
.sip-call-ringing { color:#2563eb; animation:sip-pulse 1s ease-in-out infinite; }
.sip-call-active { color:#166534; }
.sip-call-failed { color:var(--brand-danger); }
.call-modal-timer {
  min-height:40px; margin-top:20px; font-size:32px; line-height:1.25;
  font-weight:700; color:var(--text); font-variant-numeric:tabular-nums;
}
.call-modal-actions {
  justify-content:center; gap:16px; padding:16px 20px 28px;
  border-top:0;
}
.call-round-btn {
  width:72px; height:72px; border:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:32px; line-height:1; cursor:pointer;
  box-shadow:0 10px 22px rgba(15,23,42,.16);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.call-round-btn:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(15,23,42,.18); }
.call-round-btn:active { transform:translateY(0) scale(.97); box-shadow:0 7px 18px rgba(15,23,42,.16); }
.call-round-call { background:#22c55e; }
.call-round-call:hover { background:#16a34a; }
.call-round-end { background:#ef4444; }
.call-round-end:hover { background:var(--brand-danger); }
@keyframes sip-pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.btn-danger {
  background:#ef4444; color:#fff; border:none;
  border-radius:10px; padding:8px 16px; font-size:14px;
  font-weight:700; cursor:pointer; transition:background .15s;
}
.btn-danger:hover { background:var(--brand-danger); }
.tel-btn {
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  color:var(--primary); background:var(--primary-soft);
  text-decoration:none; transition:.15s ease;
}
.tel-btn:hover { background:var(--primary); color:#fff; }
.pt-detail-field {
  display:flex; flex-direction:row; align-items:baseline;
  justify-content:space-between; gap:12px;
  padding:8px 12px; border-bottom:1px solid var(--line);
}
.pt-detail-field:last-child { border-bottom:0; }
.pt-field-label { font-size:12px; color:var(--muted); font-weight:700; flex-shrink:0; }
.pt-field-value { font-size:13px; font-weight:700; text-align:right; word-break:break-all; }
.pt-detail-field--ext { background:rgba(99,102,241,.04); }
.pt-detail-field--ext .pt-field-label,
.pt-detail-field--ext .pt-field-value { color:var(--primary); }
.pt-detail-field--direct { background:transparent; }

/* ──── 플로팅 액션 버튼 ──── */
.pt-fab-wrap {
  position:fixed; right:24px; bottom:28px;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; z-index:50;
}
.fab-main {
  display:flex; align-items:center; justify-content:center; gap:4px;
  padding:8px 20px; border-radius:999px;
  background:var(--text); color:#fff; border:0;
  font-size:16px; font-weight:700;
  box-shadow:0 8px 24px rgba(16,24,40,.22);
  cursor:pointer; transition:.2s ease; white-space:nowrap;
}
.fab-main:hover { transform:translateY(-2px); }
.fab-main.selection { background:var(--primary); }
.fab-action {
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--text);
  box-shadow:0 4px 16px rgba(16,24,40,.1); cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .18s ease, transform .18s ease; white-space:nowrap;
}
.pt-fab-wrap.expanded .fab-action { opacity:1; pointer-events:auto; transform:translateY(0); }

/* ──── 참여자 테이블 ──── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:separate; border-spacing:0 7px; min-width:680px; }
th { text-align:left; color:var(--muted); font-size:11px; padding:0 12px; font-weight:700; white-space:nowrap; }
td { background:rgba(255,255,255,.78); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:0 12px;
  font-size:13px; height:50px; vertical-align:middle;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
td:first-child { border-left:1px solid var(--line); border-radius:16px 0 0 14px; max-width:none; width:40px; }
td:last-child  { border-right:1px solid var(--line); border-radius:0 14px 14px 0; max-width:none; }
.check { width:15px; height:15px; accent-color:var(--primary); }

/* 이름 셀 (아바타 제거) */
.namecell { display:flex; flex-direction:column; gap:0px; }
.namecell strong { font-size:13px; font-weight:700; }
.namecell .muted { font-size:11px; line-height:1.2; }

/* 페이지네이션 */
.pagination { display:flex; align-items:center; justify-content:center; gap:4px; padding:12px 0; }
.page-btn { border:1px solid var(--line); background:#fff; border-radius:9px;
  padding:4px 12px; font-size:12px; font-weight:700; color:var(--text); min-width:34px; text-align:center; }
.page-btn.active { background:var(--text); color:#fff; border-color:var(--text); }
.page-btn:disabled { opacity:.35; cursor:default; }
.page-info { font-size:12px; color:var(--muted); padding:0 4px; }

/* 폼 */
.field { margin-bottom:12px; }
/* 칸 이름은 값보다 작아야 값이 읽힌다 (2026-09-17) */
.field label { display:block; color:var(--muted); font-size:12px; font-weight:700; margin-bottom:5px; }
.field input, .field select, .field textarea { width:100%; border:1px solid var(--line); background:#fff;
  border-radius:12px; padding:12px; outline:none; transition:.2s ease;
  font-size:14px; font-family:inherit; color:var(--text); }
.field textarea { min-height:108px; resize:vertical; line-height:1.5; }
/* `form-select` 는 걷어냈다 — 그 한 곳이 이제 `select-drawn` 을 쓴다 (2026-09-16).
   우리 드롭다운 부품이 select 의 class 를 단추에 옮기므로,
   모양 없는 class 를 달면 브라우저 기본 단추가 그대로 보인다. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:rgba(37,99,235,.42); box-shadow:0 0 0 4px rgba(37,99,235,.1); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.full { grid-column:1/-1; }
.target-box { border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.68); padding:12px; display:grid; gap:8px; }
.target-row { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:8px; border-radius:13px; background:#fff; border:1px solid var(--line); }

/* 출근 관리 */
.attendance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.attendance-card { border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.76); padding:16px; text-align:center; }
.attendance-card strong { display:block; font-size:14px; margin-top:4px; color:var(--muted); }
.attendance-number { font-size:24px; font-weight:700; letter-spacing:-.03em; }
.attendance-filter-row { display:flex; justify-content:flex-end; margin-top:12px; }
.attendance-filter-row .btn.active { background:#101828; border-color:#101828; color:#fff; }
.attendance-business-list { margin-top:12px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px; }
.attendance-business-item { border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.76); padding:12px; display:grid; gap:8px; }
.attendance-business-title { font-size:16px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attendance-business-counts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.attendance-business-count { border:1px solid var(--line); border-radius:10px; background:#fff; padding:8px 8px; display:grid; gap:4px; text-align:center; min-width:0; cursor:pointer; transition:.16s ease; }
.attendance-business-count:hover { border-color:#86efac; box-shadow:0 8px 20px rgba(16,185,129,.12); transform:translateY(-1px); }
.attendance-business-count strong { font-size:20px; line-height:1.1; color:var(--text); }
.attendance-business-count span { font-size:12px; color:var(--muted); font-weight:700; }
.attendance-people-modal { width:min(760px,100%); }
.attendance-people-list { display:grid; gap:8px; }
.attendance-people-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:16px; background:#fff; padding:12px 12px; }
.attendance-people-name { font-size:14px; font-weight:700; color:var(--text); }
.attendance-people-meta { margin-top:4px; font-size:12px; color:var(--muted); }
.attendance-call-btn { width:38px; height:38px; border:0; border-radius:50%; background:#16a34a; color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 18px rgba(22,163,74,.22); }
.attendance-call-btn svg { width:15px; height:15px; }
.attendance-call-btn:hover { background:#15803d; }
.activity-toolbar { display:grid; grid-template-columns:158px minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:end; margin-bottom:12px; }
.activity-toolbar .field { min-width:0; }
.activity-toolbar input, .activity-toolbar select { box-sizing:border-box; }
.activity-toolbar-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.activity-month-field { min-width:0; padding-top:0; }
.activity-month-field input {
  /* '2026년 08월' + 달력 아이콘이 잘리지 않는 폭 */
  display:flex; align-items:center; width:158px; min-width:0; max-width:158px; height:40px;
  padding:0 4px; font-size:13px; font-weight:700; line-height:40px; text-align:center; box-sizing:border-box;
}
.activity-current-path { align-self:center; min-height:42px; display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; background:#fff; padding:0 12px; color:var(--muted); font-weight:700; }
.activity-editor-panel { border:1px solid var(--line); border-radius:16px; background:#fff; padding:12px; margin-bottom:12px; }
/* 출근부 미리보기는 이제 모달 안에 있다. 제목·단추를 걷어내서
   닫혀 있을 때는 **빈 흰 상자**만 남는다. 그래서 껍데기를 없앤다.
   종이 모양은 안쪽 .activity-preview-wrap 이 갖는다 (2026-09-02) */
.activity-preview-panel { border:0; background:transparent; padding:0; margin:0; }
.activity-preview-wrap:not([hidden]) { border:1px solid var(--line); border-radius:16px;
  background:#fff; padding:12px; margin-bottom:12px; }
.activity-panel-head { display:flex; align-items:center; gap:8px; justify-content:space-between; margin-bottom:12px; }
.activity-panel-head strong { flex:1; color:var(--text); font-size:14px; }
.activity-biz-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; }
.activity-biz-card, .activity-person-row { border:1px solid var(--line); background:#fff; text-align:left; cursor:pointer; transition:.16s ease; }
.activity-biz-card { border-radius:16px; padding:12px; display:grid; gap:4px; }
.activity-biz-card:hover, .activity-person-row:hover { border-color:#86efac; box-shadow:0 8px 20px rgba(16,185,129,.12); transform:translateY(-1px); }
.activity-biz-card strong { color:var(--text); font-size:16px; }
.activity-biz-card span, .activity-person-row span { color:var(--muted); font-size:12px; font-weight:700; }
.activity-people-list { display:grid; gap:8px; }
.activity-person-row { border-radius:12px; padding:12px 12px; display:grid; gap:4px; }
.activity-person-row strong { color:var(--text); font-size:14px; }
.activity-summary-list { display:grid; gap:8px; max-height:62vh; overflow:auto; padding-right:0px; }
.activity-more-loading { padding:8px 0; }
.activity-summary-row { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 58px 74px minmax(82px,auto) 88px; align-items:center; gap:8px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:left; cursor:pointer; }
.activity-summary-row.is-selected { border-color:#10b981; background:#f0fdf4; }
.activity-summary-row.has-issue { border-color:#fcd34d; }
.activity-summary-row.has-issue:hover { border-color:#f59e0b; }
.activity-summary-row .activity-issue { margin-top:4px; color:#c2410c; font-weight:700; }
.activity-detail-btn { height:32px; padding:0 8px; border:1px solid var(--line); border-radius:8px; background:#f6f7fb; color:var(--text); font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.activity-detail-btn:hover { border-color:#10b981; background:#f0fdf4; }
.activity-summary-row:hover { border-color:#86efac; box-shadow:0 8px 20px rgba(16,185,129,.12); transform:translateY(-1px); }
.activity-summary-row strong { display:block; color:var(--text); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-summary-row .name-phone-plain { white-space:nowrap; }
.activity-phone-tail { color:var(--muted); font-size:12px; font-weight:700; }
.activity-summary-row small { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:700; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35; word-break:keep-all; }
.activity-summary-row em { color:var(--text); font-style:normal; font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.activity-record-modal { width:min(760px,100%); }
.activity-month-field input[type="month"]::-webkit-date-and-time-value { text-align:center; font-weight:700; }
.activity-table-wrap { overflow:hidden; }
.activity-edit-table { width:100%; min-width:0; max-width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; }
.activity-edit-table th, .activity-edit-table td { border-bottom:1px solid var(--line); padding:8px 4px; text-align:left; vertical-align:middle; white-space:nowrap; }
/* 6칸 기준: 일자 / 출근 / 중간 / 퇴근 / 위치확인 / 작업 */
.activity-edit-table th:nth-child(1), .activity-edit-table td:nth-child(1) { width:64px; }
/* 금액은 오른쪽 끝에 붙여 저울을 맞춘다 (대표님 2026-09-02) */
.activity-edit-table th:nth-child(3), .activity-edit-table td:nth-child(3) { width:76px; text-align:right; }
.ac-pay-th { text-align:right; }
.ac-pay { white-space:nowrap; vertical-align:top; padding-top:12px; }
.ac-pay b { font-size:13px; font-weight:700; color:var(--text); }
.ac-pay i { margin-left:2px; font-size:11px; font-style:normal; color:var(--muted); }
/* 담당자 하루 확인 (2026-09-28) — 금액 밑, 오른쪽 끝. 색은 기존 단추 것을 그대로 쓴다 */
.ac-ok { margin-top:6px; text-align:right; }
.ac-ok .ac-ok-sealed { display:inline-flex; align-items:center; cursor:default; }
.activity-edit-table th:nth-child(2), .activity-edit-table td:nth-child(2),
.activity-edit-table th:nth-child(3), .activity-edit-table td:nth-child(3),
.activity-edit-table th:nth-child(4), .activity-edit-table td:nth-child(4) { width:auto; text-align:center; }
.activity-edit-table th:nth-child(5), .activity-edit-table td:nth-child(5) { width:72px; text-align:center; }
.activity-edit-table th:nth-child(6), .activity-edit-table td:nth-child(6) { width:96px; text-align:center; }

/* 편집 중에만 입력칸을 보인다 */
.activity-edit-table tr .edit-only { display:none; }
.activity-edit-table tr.editing .view-only { display:none; }
.activity-edit-table tr.editing .edit-only { display:inline-block; }
.activity-edit-table tr.editing { background:#f0fdf4; }
.activity-edit-table .edit-only[type="time"] { width:88px; padding:0px 4px; font-size:12px; border:1px solid var(--line); border-radius:8px; }
.activity-edit-table .edit-only[type="checkbox"] { width:16px; height:16px; }
.activity-row-btn { height:26px; padding:0 8px; margin:0 0px; border:1px solid var(--line); border-radius:8px; background:#f6f7fb; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }
.activity-row-btn:hover { border-color:#10b981; background:#f0fdf4; }
.activity-row-btn.is-primary { background:#10b981; border-color:#10b981; color:#fff; }
.activity-row-btn.is-primary:hover { background:#059669; }
.activity-edit-table th { color:var(--muted); font-size:12px; background:#f6f7fb; }
.activity-edit-table td:first-child strong { display:block; font-size:13px; color:var(--text); }
.activity-edit-table td:first-child span { display:block; margin-top:0px; font-size:11px; color:var(--muted); }
/* A4 출근부와 같은 기준: 토요일 파랑, 일요일 빨강 */
.activity-edit-table td.activity-sat,
.activity-edit-table td.activity-sat strong,
.activity-edit-table td.activity-sat span { color:#075985 !important; }
.activity-edit-table td.activity-sun,
.activity-edit-table td.activity-sun strong,
.activity-edit-table td.activity-sun span { color:#991b1b !important; }
.activity-time-cell { overflow:hidden; text-overflow:ellipsis; }
.activity-edit-table td.activity-time-cell .activity-time-range { display:block; overflow:hidden; color:var(--text); font-size:13px; font-weight:700; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.activity-edit-table td.activity-time-cell .activity-work-duration { display:block; margin-top:0px; color:var(--muted); font-size:11px; font-weight:700; line-height:1.3; white-space:nowrap; }
.activity-pay-cell { font-variant-numeric:tabular-nums; }
.activity-time-pair { display:flex; align-items:center; justify-content:flex-start; gap:4px; white-space:nowrap; min-width:0; }
.activity-time-pair input { min-width:0; }
.activity-time-sep { color:var(--muted); font-size:11px; }
.activity-work-hours { display:block; margin-top:4px; color:var(--muted); font-size:11px; font-weight:700; }
.activity-edit-table input { width:100%; min-width:0; border:1px solid var(--line); border-radius:8px; padding:8px 4px; font:inherit; }
.activity-edit-table input[type="time"] { flex:1 1 0; width:0; max-width:72px; padding:4px 0px; font-size:12px; }
.activity-row-actions { display:flex; gap:4px; justify-content:flex-start; margin-top:4px; }
.activity-row-actions .btn { min-height:28px; padding:0 8px; }
.activity-edit { display:none; }
.activity-edit-table tr.editing .activity-edit { display:inline-flex; }
.activity-edit-table tr.editing input.activity-edit { display:block; }
.activity-edit-table tr.editing .activity-read,
.activity-edit-table tr.editing [data-action="edit-activity-row"] { display:none; }
.activity-location-check { align-items:center; gap:4px; color:var(--text); font-weight:700; }
.activity-location-check input { width:auto; min-width:0; }
.activity-preview-head { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:12px; margin-bottom:8px; }
.activity-preview-head strong { color:var(--text); font-size:14px; }
/* 용지 폭은 **794px 로 고정**한다. 좁혀야 하면 통째로 축소한다(--a4-scale).
   폭만 줄이면 안의 표가 안 줄어 오른쪽이 잘린다 (2026-09-03). */
.activity-a4-sheet { width:794px; min-height:auto; /* aspect-ratio 를 빼서 내용만큼만 차지하게 한다. 내용이 짧으면
    밑에 빈 자리가 남았다. 인쇄는 @media print 에서 A4 로 잡는다 (2026-09-03). */ margin:0 auto; background:#fff; border:1px solid #d1d5db; box-shadow:0 10px 28px rgba(15,23,42,.12); padding:28px; overflow:hidden; transform-origin:top left; transform:scale(var(--a4-scale, 1)); }
.activity-doc { height:100%; display:flex; flex-direction:column; color:var(--text); font-family:Arial, sans-serif; }
.activity-doc-title { text-align:center; font-size:24px; font-weight:700; margin-bottom:10px; }
/* A4 한 표 세로: 1~31일을 한 표에 세로로 놓는다. 가로로 넘칠 일이 없다. */
.activity-doc-split { display:block; }
.activity-doc-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:11px; }
.activity-doc-table th, .activity-doc-table td { border:1px solid #101828; padding:3px 4px; text-align:center; height:26px; word-break:keep-all; }
.activity-doc-table th { background:#f3f4f6; font-weight:700; }
.activity-doc-table .sat .day, .activity-doc-table .sat td:nth-child(2) { color:#075985; font-weight:700; }
.activity-doc-table .sun .day, .activity-doc-table .sun td:nth-child(2) { color:#991b1b; font-weight:700; }
.activity-pay-list { display:grid; gap:8px; }
.activity-pay-tabs { display:flex; flex-wrap:wrap; gap:8px; }
/* 옆 단추(40px)와 키를 맞춘다. 테두리를 빼고, 고른 것만 바탕으로 알린다
   (네이버 증권 실측: 보이는 485개 중 테두리를 쓴 것은 8개뿐) */
.activity-pay-tab { border:0; border-radius:var(--radius-md); background:var(--brand-surface);
  height:var(--h-md); min-height:var(--h-md); padding:0 16px;
  color:var(--muted); font-weight:700; cursor:pointer; }
.activity-pay-tab.active { background:var(--brand-card); color:var(--brand-primary);
  box-shadow:0 1px 3px rgba(16,24,40,.10); }
.activity-pay-panel { border:1px solid var(--line); border-radius:16px; padding:16px; background:#fff; }
.activity-pay-panel-head { display:grid; gap:4px; margin-bottom:12px; }
.activity-pay-panel-head strong { color:var(--text); font-size:16px; }
.activity-pay-panel-head span { color:var(--muted); font-size:13px; }
.activity-pay-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.activity-pay-grid input { border:1px solid var(--line); border-radius:10px; padding:8px 8px; font:inherit; }
/* 글자가 두 줄로 접혀 **혼자 두 배가 됐다** (2026-09-17: 71px, 옆 단추는 40px).
   키를 맞추고 글자는 한 줄로 둔다. 테두리 대신 연한 바탕으로 가른다. */
.activity-pay-check { display:flex; align-items:center; gap:8px; border:0;
  border-radius:var(--radius-md); padding:0 12px; color:var(--text); font-weight:700;
  height:var(--h-md); min-height:var(--h-md); background:var(--brand-surface);
  white-space:nowrap; cursor:pointer; }
.activity-pay-check input { width:auto; }
.activity-pay-rule { margin-top:12px; border:1px solid #fde68a; background:#fffbeb; color:#9a3412; border-radius:10px; padding:8px 12px; font-size:13px; font-weight:700; }
@media print {
  body * { visibility:hidden !important; }
  #activityPdfPreview, #activityPdfPreview * { visibility:visible !important; }
  /* 종이에는 A4 그대로 나가야 한다. 화면용 축소를 푼다 (2026-09-03). */
  #activityPdfPreview { position:fixed; inset:0; width:210mm; height:297mm; box-shadow:none; border:0; padding:10mm; transform:none !important; }
}
@media (max-width:760px) {
  .activity-toolbar { grid-template-columns:1fr 1fr; }
  .activity-month-field { grid-column:1 / -1; }
  .activity-month-field { width:100%; max-width:100%; overflow:hidden; padding-top:0; }
  .activity-month-field input[type="month"] {
    -webkit-appearance:none; appearance:none; display:flex; align-items:center;
    width:100%; max-width:100%; min-width:0; inline-size:100%; max-inline-size:100%;
    height:40px; line-height:40px; box-sizing:border-box;
  }
  .activity-month-field input[type="month"]::-webkit-date-and-time-value { text-align:center; line-height:40px; font-weight:700; }
  .activity-toolbar-actions { grid-column:1 / -1; justify-content:flex-start; }
  .activity-a4-sheet { padding:14px; }
  .activity-summary-row { grid-template-columns:minmax(0,1fr) 44px 58px minmax(76px,auto) 72px; gap:4px; padding:12px 8px; }
  .activity-detail-btn { height:30px; padding:0 4px; font-size:11px; }
  .activity-summary-row em { font-size:12px; }
  .activity-record-modal { width:100%; }
  .activity-record-modal .modal-body { padding-left:8px; padding-right:8px; }
  .activity-edit-table { width:100%; font-size:11px; }
  .activity-edit-table th, .activity-edit-table td { min-width:0; padding:8px 4px; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; }
  .activity-edit-table th:nth-child(1), .activity-edit-table td:nth-child(1) { width:52px; }
  .activity-edit-table th:nth-child(3), .activity-edit-table td:nth-child(3) { width:58px; text-align:center; }
  .activity-edit-table td:first-child strong { font-size:12px; }
  .activity-edit-table td:first-child span { font-size:11px; }
  .activity-time-range { font-size:12px; }
  .activity-work-duration { font-size:11px; }
}

.fax-topbar { justify-content:flex-end; }
.fax-topbar .top-actions { margin-left:auto; }

/* 설정 */
.settings-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.settings-tab { border:1px solid var(--line); background:rgba(255,255,255,.78);
  border-radius:16px; padding:12px 16px; font-weight:700; color:var(--text); text-align:left; }
.settings-tab.active { background:var(--text); color:#fff; }
.stab-panel { }
.settings-panel-actions { display:flex; justify-content:flex-end; margin-top:12px; }
.settings-stats-content { display:block; }
.call-stats-toolbar { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-bottom:12px; }
.call-stats-toolbar .select-soft { height:40px; padding:8px 12px; }
.call-stats-tabs { display:inline-flex; align-self:center; justify-content:center; padding:4px; background:#f3f4f6; border-radius:999px; gap:4px; }
.call-stats-tab { border:0; background:transparent; color:var(--muted); border-radius:999px; padding:8px 16px; min-width:78px; font-size:13px; font-weight:700; text-align:center; cursor:pointer; }
.call-stats-tab.active { background:#fff; color:var(--text); box-shadow:0 5px 12px rgba(16,24,40,.08); }
.call-stats-filter-row { display:flex; align-items:center; gap:8px; width:100%; }
.call-stats-filter-row #callStatsDays { flex:0 0 112px; }
.call-stats-select { flex:1; min-width:0; max-width:none; }
.call-stats-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.call-stats-summary div { border:1px solid var(--line); border-radius:12px; padding:12px 12px; background:#f6f7fb; text-align:center; }
.call-stats-summary strong { display:block; font-size:24px; color:var(--text); font-weight:700; line-height:1.1; }
.call-stats-summary span { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:700; }
.call-stats-chart-section,
.call-stats-list-section { border:1px solid var(--line); border-radius:16px; padding:12px; background:#fff; margin-top:12px; }
.call-stats-section-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:12px; }
.call-stats-chart { display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:4px; align-items:end; overflow:hidden; padding:0px 0 4px; }
.call-stats-chart-weekday { grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.call-stats-xbar { min-width:0; display:grid; grid-template-rows:96px 16px; align-items:end; gap:4px; text-align:center; }
.call-stats-xbar-value { display:none; }
.call-stats-xbar-track { height:96px; min-width:0; display:flex; align-items:flex-end; justify-content:center; background:transparent; overflow:hidden; }
.call-stats-xbar-track span { display:block; width:6px; min-height:3px; border-radius:8px 8px 0 0; background:#2563eb; }
.call-stats-xbar-label { color:var(--muted); font-size:11px; font-weight:700; white-space:nowrap; line-height:1; min-height:10px; overflow:hidden; text-overflow:clip; }
.call-stats-chart-weekday .call-stats-xbar-track span { width:100%; max-width:26px; }
.call-stats-chart-weekday .call-stats-xbar-label { font-size:11px; }
.call-stats-list { display:flex; flex-direction:column; gap:8px; }
.call-stats-row { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:8px; border:1px solid var(--line); background:#fff; border-radius:12px; padding:8px 12px; text-align:left; cursor:pointer; transition:.15s ease; }
.call-stats-row:hover { border-color:#bfdbfe; background:#eff6ff; }
.call-stats-rank { width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#f3f4f6; color:var(--muted); font-size:12px; font-weight:700; }
.call-stats-row-main { min-width:0; }
.call-stats-row-main strong { display:block; color:var(--text); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.call-stats-row-main small { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:700; }
.call-stats-row-count { color:var(--text); font-size:20px; font-weight:700; }
#page-settings input:disabled {
  background:#f6f7fb; color:var(--text); -webkit-text-fill-color:#4b5563;
  cursor:not-allowed;
}
.schedule-days { display:flex; flex-wrap:wrap; gap:8px; }
.day-chip { border:1px solid var(--line); background:#fff; border-radius:999px; padding:4px 12px; font-weight:700; color:var(--muted); cursor:pointer; }
.day-chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* 안부관리 */
.care-topbar { align-items:flex-start; }
.care-actions { width:100%; margin-left:0; justify-content:center; align-items:center; }
.care-mode-tabs { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:4px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.78); }
.care-mode-tab { width:100%; height:40px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); font-weight:700; cursor:pointer; }
.care-mode-tab.active { background:var(--text); color:#fff; }
.care-routine-panel { display:grid; gap:12px; }
.care-mode-panel { display:none; }
.care-mode-panel.active { display:block; }
.care-summary-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.care-target-toggle { height:var(--h); padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted); font-weight:700; cursor:pointer; }
.care-target-toggle.active { background:var(--text); color:#fff; border-color:var(--text); }
.care-selected-count { margin-left:auto; color:var(--muted); font-size:13px; font-weight:700; }
.care-target-list { display:grid; gap:8px; margin:12px 0; max-height:42vh; overflow:auto; }
.care-target-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.care-target-row strong { display:block; color:var(--text); font-size:14px; }
.care-target-row span { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:700; }
.care-target-status { color:#047857; font-size:12px; font-weight:700; }
.care-send-btn { width:100%; height:44px; padding:0; border:0; border-radius:12px; background:#2563eb; color:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.care-send-btn:disabled { background:#cbd5e1; cursor:not-allowed; }
.care-reserve-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.care-reserve-grid .field input[type="date"],
.care-reserve-grid .field input[type="time"] {
  -webkit-appearance:none; appearance:none; width:100%; max-width:100%;
  min-height:40px; height:40px; line-height:40px; padding:0 8px; font-size:14px;
}
.care-reserve-grid .field input[type="date"]::-webkit-date-and-time-value,
.care-reserve-grid .field input[type="time"]::-webkit-date-and-time-value {
  text-align:left;
}

/* 전화설정: 담당자 내선표 */
.staff-ext-list { overflow-x:auto; }
.simple-table { width:100%; border-collapse:collapse; font-size:13px; }
.simple-table th { text-align:left; padding:8px 8px; background:#f6f7fb; border-bottom:1px solid var(--line); color:var(--muted); font-weight:700; }
.simple-table td { padding:8px 8px; border-bottom:1px solid var(--line); }
.td-input { border:1px solid var(--line); border-radius:8px; padding:4px 8px; font-size:13px; width:100%; box-sizing:border-box; }
.td-input:focus { outline:none; border-color:var(--primary); }

.phone-manager-picker { display:flex; align-items:center; gap:8px; }
.phone-manager-picker select { flex:1; min-width:0; }
.phone-manager-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; min-height:28px; }
.phone-manager-tag { display:inline-flex; align-items:center; gap:4px; border:1px solid #bfdbfe; background:#eff6ff; color:#1d4ed8; border-radius:999px; padding:4px 8px; font-size:12px; font-weight:700; }
.phone-manager-order { width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#2563eb; color:#fff; font-size:11px; }
.phone-manager-tag button { border:0; background:transparent; color:#60a5fa; cursor:pointer; padding:0 0 0 0px; font-size:16px; line-height:1; }
.phone-manager-empty { color:var(--muted); font-size:12px; font-weight:700; align-self:center; }

.phone-prompt-list { display:flex; flex-direction:column; gap:8px; }
.phone-prompt-row { display:grid; grid-template-columns:150px minmax(180px,1fr) auto auto; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.phone-prompt-row label { color:var(--text); font-weight:700; font-size:13px; margin:0; }
.phone-prompt-row select { min-width:0; border:1px solid var(--line); border-radius:10px; padding:8px 8px; font-size:13px; color:var(--text); background:#fff; }
.phone-prompt-hidden { display:none; }
.phone-prompt-current { min-width:0; padding:8px 8px; border:1px solid var(--line); border-radius:10px; background:#f6f7fb; color:var(--text); font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone-prompt-play-btn.is-playing { min-width:44px; color:#2563eb; border-color:#bfdbfe; background:#eff6ff; }

/* 근무 스케쥴 */
.bulk-sched-card { background:#f6f7fb; border-radius:16px; border:1px solid var(--line); padding:12px 16px; margin-bottom:16px; }
.bulk-sched-card strong { display:block; margin-bottom:8px; font-size:13px; }
.bulk-sched-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.schedule-list { display:flex; flex-direction:column; gap:8px; }
.schedule-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 12px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.schedule-mgr-name { font-weight:700; min-width:60px; }

/* 휴무일 달력 */
.holiday-cal-wrap { display:flex; flex-direction:column; gap:12px; }
.holiday-cal-head { display:flex; align-items:center; gap:8px; }
.holiday-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.hol-cal-dh { text-align:center; font-size:11px; font-weight:700; color:var(--muted); padding:4px; }
.hol-cal-cell { text-align:center; padding:8px 4px; font-size:13px; border-radius:8px; cursor:pointer; transition:.15s; }
.hol-cal-cell:hover { background:#eff6ff; }
.hol-cal-cell.empty { cursor:default; }
.hol-cal-cell.hol-wknd { color:#ef4444; }
.hol-cal-cell.hol-saved { background:#fef2f2; color:#b91c1c; font-weight:700; }
.hol-cal-cell.hol-sel { background:#1d4ed8; color:#fff !important; font-weight:700; border-radius:8px; }
.holiday-cal-legend { display:flex; gap:12px; font-size:12px; }
.hol-legend-item { display:flex; align-items:center; gap:4px; }
.hol-legend-sel { color:#1d4ed8; }
.hol-legend-wknd { color:#ef4444; }
.hol-legend-saved { color:#b91c1c; }
.holiday-actions { display:flex; align-items:center; gap:8px; }
.holiday-list-panel { margin-top:8px; }
.holiday-list { display:flex; flex-direction:column; gap:4px; }
.holiday-list-row { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#f6f7fb; border-radius:10px; border:1px solid var(--line); }
.holiday-date { font-weight:700; min-width:100px; }
.holiday-desc { flex:1; }

/* 부재중 전환 모달 */
.absence-active-msg { background:#fef2f2; border:1px solid #fecaca; border-radius:10px; padding:8px 12px; color:#b91c1c; font-weight:700; font-size:13px; }
.absence-inactive-msg { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:8px 12px; color:#166534; font-size:13px; }

/* 수신전화 카드 (동적) */
.call-card-left { display:flex; align-items:center; gap:8px; grid-column:1/3; }
.call-card-right { display:flex; align-items:center; }
.call-card-info { display:flex; flex-direction:column; gap:4px; }
.call-card-name { font-weight:700; font-size:16px; }
.call-card-manager-inline {
  display:inline-flex; align-items:center; flex:0 0 auto; margin-left:8px; padding:0px 8px;
  border:1px solid #cbd5e1; border-radius:999px; color:var(--text);
  font-size:13px; font-weight:600; line-height:1.25;
}
.call-card-missed .call-card-name,
.call-card-missed .call-route-caller,
.call-card-missed .call-route-arrow,
.call-card-missed .call-route-manager,
.call-card-missed .name-phone-plain { color:var(--brand-danger); }
.call-card-biz { font-weight:600; color:var(--muted); font-size:13px; margin-left:4px; }
.call-card-meta { font-size:12px; color:var(--muted); }
.call-card-missed { border-left-color:var(--line); }
.call-card-missed:hover,
.call-card-missed.open { border-left-color:#d1d5db; }
.call-empty { padding:24px; text-align:center; color:var(--muted); font-size:13px; }
.pt-loading { padding:24px; text-align:center; color:var(--muted); font-size:13px; }
.message-preview { border:1px solid var(--line); background:#fff; border-radius:20px; padding:12px; min-height:200px; }
.phone-bubble { background:#f3f4f6; border-radius:18px 18px 18px 5px; padding:12px; line-height:1.55; color:var(--text); margin-top:8px; }
.fax-list { display:grid; gap:8px; }
.fax-row { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:12px; border:1px solid var(--line); background:rgba(255,255,255,.78); border-radius:16px; padding:12px; cursor:pointer; transition:.16s ease; }
.fax-row:hover { border-color:#bfdbfe; box-shadow:0 10px 22px rgba(37,99,235,.1); transform:translateY(-1px); }
.fax-thumb { width:58px; height:58px; border-radius:12px; background:#f6f7fb; border:1px solid var(--line); object-fit:cover; display:grid; place-items:center; color:var(--muted); font-size:12px; font-weight:700; overflow:hidden; }
.fax-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fax-title { font-weight:700; color:var(--text); }
.fax-meta { margin-top:4px; font-size:12px; color:var(--muted); }
.fax-status { justify-self:end; }
.fax-view-modal { width:min(900px,100%); }
.fax-view-body { min-height:280px; display:grid; place-items:center; background:#f6f7fb; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.fax-view-body img { max-width:100%; max-height:70vh; display:block; }
.fax-view-body iframe { width:100%; height:70vh; border:0; background:#fff; }
.timeline { display:grid; gap:8px; }
.timeline-item { display:grid; grid-template-columns:34px 1fr auto; gap:8px; align-items:center;
  padding:12px; border:1px solid var(--line); background:rgba(255,255,255,.76); border-radius:16px; }
.dot { width:34px; height:34px; border-radius:11px; background:var(--primary-soft); color:var(--primary);
  display:grid; place-items:center; font-weight:700; }

/* 모달 */
.modal-backdrop { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(15,23,42,.38); backdrop-filter:blur(10px); z-index:100; }
.modal-backdrop.active { display:flex; }
.modal { width:min(720px,100%); max-height:88vh; overflow:auto; background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.7); border-radius:28px; box-shadow:0 26px 72px rgba(15,23,42,.26); }
.modal-head { padding:16px 20px 12px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; border-bottom:1px solid var(--line); }
.modal-head h3 { margin:0; font-size:16px; font-weight:700; letter-spacing:-.04em; }
.modal-head p { margin:4px 0 0; color:var(--muted); }
.close { border:0; width:34px; height:34px; border-radius:50%; background:#f3f4f6; font-size:16px; }
.modal-body { padding:16px 20px 20px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.detail-box { border:1px solid var(--line); background:#fff; border-radius:16px; padding:12px; }
.detail-box span { color:var(--muted); font-size:11px; font-weight:700; display:block; margin-bottom:4px; }
.transcript { border:1px solid var(--line); background:#fff; border-radius:18px; padding:12px; line-height:1.65; color:var(--text); font-size:14px; }
.missed-caller-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0 4px; }
.missed-caller-name { font-size:14px; font-weight:700; color:var(--text); }
.missed-done-btn { width:100%; margin-top:16px; }
.audio-bar { margin:12px 0; border-radius:16px; background:#f3f4f6; padding:12px; display:flex; align-items:center; gap:8px; }
.play { width:38px; height:38px; border-radius:50%; border:0; background:var(--text); color:#fff; }
.wave { flex:1; height:30px; border-radius:999px;
  background:repeating-linear-gradient(90deg,rgba(37,99,235,.42) 0 4px, transparent 4px 10px); opacity:.8; }
.modal-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; justify-content:flex-end; }
.modal-actions .btn { min-width:90px; padding-left:20px; padding-right:20px; }

/* 읽기전용 필드 */
.read-only-field {
  padding:8px 12px; background:#f6f7fb; border:1px solid var(--line);
  border-radius:13px; font-size:14px; color:var(--muted); line-height:1.6;
  min-height:42px;
}
.label-note { font-size:11px; color:var(--muted); font-weight:600; }

.admin-manager-tools { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.admin-manager-tools select { flex:1; min-width:0; }
.admin-manager-list { display:flex; flex-direction:column; gap:8px; }
/* 줄 테두리도 뺀다 (2026-09-17). 줄마다 선을 그으면 목록이 시끄럽다.
   간격을 고르게 두고 옅은 바탕으로만 가른다. */
.admin-manager-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:0; border-radius:var(--radius-md); background:var(--brand-surface);
  padding:10px 14px; min-height:var(--h-md);
}
.admin-manager-row + .admin-manager-row { margin-top:6px; }
.admin-manager-row strong { display:block; font-size:14px; color:var(--text); }
.admin-manager-row span { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:700; }

/* 담당자 목록 (사업 수정 모달) */
.mgr-list { display:flex; flex-direction:column; gap:4px; }
.mgr-row { display:flex; align-items:center; gap:8px; }
.mgr-row input {
  flex:1; border:1px solid var(--line); background:#fff; border-radius:13px;
  padding:8px 12px; font-size:14px; font-family:inherit; color:var(--text); outline:none;
  transition:.15s ease;
}
.mgr-row input:focus { border-color:rgba(37,99,235,.4); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.mgr-delete {
  flex-shrink:0; width:34px; height:34px; border:1px solid var(--line); background:#fff;
  border-radius:9px; color:var(--muted); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s ease;
}
.mgr-delete:hover { border-color:var(--danger); color:var(--danger); background:#fef2f2; }
.btn-sm { padding:8px 12px; font-size:13px; }

/* 로딩 */
.loading-row td { text-align:center; color:var(--muted); font-size:13px; height:80px; }
.empty-state { text-align:center; padding:40px 20px; color:var(--muted); }
.empty-state .emoji { font-size:32px; margin-bottom:8px; }

/* 반응형 */
@media (max-width:900px) {
  .stats { grid-template-columns:repeat(2,1fr); }
  .layout, .two-col { grid-template-columns:1fr; }
  .lp-hero { grid-template-columns:1fr; gap:65px; padding-top:70px; }
  .lp-hero-copy { max-width:720px; }
  .lp-hero-visual { width:min(560px,92%); margin:0 auto; }
  .lp-value-grid { grid-template-columns:1fr; }
  .lp-value-grid article { min-height:240px; }
  .lp-value-icon { margin-bottom:35px; }
  .lp-feature-layout { grid-template-columns:1fr; }
  .lp-demo-grid { grid-template-columns:repeat(2,1fr); }
  .lp-steps { grid-template-columns:1fr; gap:20px; }
  .lp-steps > i { display:none; }
}
@media (max-width:640px) {
  .main { padding:12px var(--page-gutter); }
  .landing { grid-template-columns:1fr; }
  .login-side { display:none; }
  .stats { grid-template-columns:1fr 1fr; }
  /* 모바일: 툴바 축소 */
  .toolbar { gap:4px; flex-wrap:wrap; }
  .select-soft { font-size:12px; padding:0 8px; }
  /* 카드 뷰: 콤팩트 */
  .pt-card { padding:8px 12px; }
  /* 로그인 전 랜딩 */
  .lp-nav,.lp-section,.lp-footer { width:min(100% - 34px,1180px); }
  .lp-nav { height:66px; }
  .lp-nav-links { display:none; }
  .lp-logo img { width:34px;height:34px; }.lp-logo strong { font-size:18px; }
  .lp-nav-login { height:36px;padding:0 13px; }
  .lp-hero { min-height:0; padding:62px 0 85px; gap:55px; }
  .lp-eyebrow { font-size:11px; }
  .lp-hero h1 { font-size:clamp(39px,11vw,52px); }
  .lp-hero-copy > p { font-size:15px; }
  .lp-hero-actions { align-items:stretch; flex-direction:column; }
  .lp-primary-action,.lp-secondary-action { width:100%; }
  .lp-hero-trust { align-items:flex-start; flex-direction:column; gap:8px; }
  .lp-hero-visual { width:100%; padding:17px; border-radius:21px; transform:none; }
  .lp-visual-bubble { position:static; width:100%; margin-top:13px; transform:none; box-shadow:none; }
  .lp-value,.lp-features,.lp-demos { padding:85px 0; }
  .lp-section-head { margin-bottom:36px; text-align:left; }.lp-section-head h2,.lp-start-copy h2 { font-size:35px; }
  .lp-value-grid article { min-height:255px;padding:25px; }
  .lp-feature-main { min-height:0;padding:34px 27px; }.lp-feature-main h3 { margin-top:42px;font-size:28px; }
  .lp-feature-cards { grid-template-columns:1fr; }.lp-feature-cards article { min-height:165px; }
  .lp-demo-grid { grid-template-columns:1fr; }.lp-demo-card { min-height:240px; }
  .lp-start { width:100%; margin-top:70px; padding:75px 17px; border-radius:0; }
  .lp-start-copy,.lp-steps,.lp-start-cta { width:min(100% - 0px,1180px); }
  .lp-start-cta { grid-template-columns:46px 1fr;padding:17px; }.lp-start-cta img { width:46px;height:46px; }.lp-start-cta button { grid-column:1/-1;width:100%; }
  .lp-footer { margin-top:65px; grid-template-columns:1fr; }.lp-footer-links { gap:17px; }.lp-footer p { grid-column:auto; }
  .phone-prompt-row { grid-template-columns:1fr; }
  .holiday-actions { align-items:stretch; flex-direction:column; }
  .admin-manager-tools, .admin-manager-row { align-items:stretch; flex-direction:column; }
}

/* ── A4 참여자 출근부 (기관 표준 기준, 2026-08-27) ───────────── */
.activity-doc-table .won { text-align:right; padding-right:6px; }
.activity-doc-table .note { letter-spacing:2px; }
.activity-doc-table .doc-mark { font-size:12px; }


/* 원본 양식처럼 바깥 테두리를 진한 두 줄로 */
.activity-doc-frame { border:3px double #101828; }
.activity-doc-frame .activity-doc-table { border:0; }


/* 공휴일·대체공휴일은 비고에 빨간색으로 */
.activity-doc-table .doc-holiday { color:#991b1b; font-weight:700; font-size:9px; }


/* 근무결과·특이사항: 본문과 같은 흰 바탕·같은 검정.
   회색 바탕 때문에 글자가 연해 보였다. 회색은 왼쪽 라벨 칸에만 둔다. */


/* 구간 경계선: 조금 연하게.
   일·금액·비고·참여자서명은 머리글 두 줄을 합친 칸이라 따로 지정해야 한다. */
.activity-doc-table thead tr:last-child th,
.activity-doc-table thead th[rowspan] { border-bottom:1.5px solid #4b5563; }


/* 요일·공휴일 색만 예외로 남긴다 */
.activity-doc-table .sat .day, .activity-doc-table .sat td:nth-child(2) { color:#075985 !important; }
.activity-doc-table .sun .day, .activity-doc-table .sun td:nth-child(2) { color:#991b1b !important; }

/* ── A4 재작업 (2026-08-27) ─────────────────────────────────
   비고는 테두리 안 글씨, 금액 칸은 줄이고 비고 칸을 넓혔다.
   폰트는 사이트와 같은 Pretendard 를 쓴다. */
.activity-doc { font-family:inherit; }

/* 칸 폭: 금액은 9,999,999 까지만 들어가면 되므로 줄이고 비고를 넓혔다 */
.activity-doc-table col.c-day  { width:7%; }
.activity-doc-table col.c-t    { width:11%; }
.activity-doc-table col.c-h    { width:14%; }
.activity-doc-table col.c-won  { width:14%; }
.activity-doc-table col.c-note { width:26%; }
.activity-doc-table col.c-sign { width:17%; }

/* 머리글과 본문 글자 크기를 맞춘다 */
.activity-doc-table th, .activity-doc-table td { font-size:11px; }
.activity-doc-table td.day { font-size:11px; font-weight:700; text-align:center; padding:2px; }


/* 비고: 테두리 안 글씨 */
.activity-doc-table .note { padding:2px 3px; }
.activity-doc-table .doc-tag {
  display:inline-block; margin:0 1px; padding:0 4px;
  border:1px solid #101828; border-radius:2px;
  font-size:9px; font-weight:700; line-height:14px; white-space:nowrap;
}
.activity-doc-table .doc-tag.is-holiday { border-color:#991b1b; color:#991b1b; }
.activity-doc-table .doc-tag.is-absent  { border-color:#991b1b; color:#991b1b; }
.activity-doc-table .doc-tag.is-paid    { border-color:#075985; color:#075985; }

.activity-doc-table .doc-bullet { font-weight:700; margin-right:3px; }


/* 글자색: 전역 th 회색 규칙을 덮는다. 요일·표시만 예외 */
.activity-doc, .activity-doc-table,
.activity-doc-table th, .activity-doc-table td { color:var(--text) !important; }
.activity-doc-table .sat td.day { color:#075985 !important; }
.activity-doc-table .sun td.day { color:#991b1b !important; }

/* 전국 공통 공휴일: 기관이 바꿀 수 없다 (2026-08-27) */
.hol-cal-cell.hol-national { background:#eff6ff; color:#3730a3; font-weight:700;
                             cursor:not-allowed; position:relative; }
.hol-cal-cell.hol-national .hol-lock { position:absolute; right:2px; bottom:1px;
                             font-style:normal; font-size:11px; opacity:.7; }
.hol-legend-national { color:#3730a3; }

/* ── A4 하단 재배치 (2026-08-27) ────────────────────────────
   합계·근무결과·특이사항의 정렬과 테두리를 여기 한 곳에서만 정한다.
   전에는 같은 항목이 여러 번 겹쳐 지정돼 서로 덮고 있었다. */

/* 상단 머리글. th 를 함께 쓴 선택자라야 앞의 규칙에 안 덮인다 */
.activity-doc-table .doc-head-info th {
  background:#eff6ff; padding:6px 8px; font-size:12px;
  border-bottom:1.5px solid #4b5563;
}
.activity-doc-table .doc-head-info th.doc-head-left  { text-align:left; }
.activity-doc-table .doc-head-info th.doc-head-right { text-align:right; }

/* 합계·근무결과·특이사항 공통 */
.activity-doc-table .doc-total td,
.activity-doc-table .doc-result td,
.activity-doc-table .doc-note td {
  background:#fff; font-size:11px; font-weight:700; padding:6px 8px;
}
.activity-doc-table .doc-total td  { border-top:1.5px solid #4b5563; text-align:center; }
.activity-doc-table .doc-total .won { text-align:right; }
.activity-doc-table .doc-result td { border-top:1.5px solid #4b5563; }


/* 왼쪽 라벨은 위 '일' 칸과 같은 폭·같은 가운데 정렬, 값은 왼쪽 */
.activity-doc-table .doc-result-h,
.activity-doc-table .doc-note-h {
  text-align:center; padding:4px 2px; line-height:1.35; vertical-align:middle;
}
.activity-doc-table .doc-note-guide { font-weight:400; text-align:left; }
.activity-doc-table .doc-note-visit { text-align:left; }
.activity-doc-table .doc-memo { margin-left:10px; font-weight:700; color:var(--text); }

/* 특이사항 세 줄 사이에는 선을 두지 않는다.
   칸이 맞닿아 있어 위 칸의 아래선과 아래 칸의 윗선을 둘 다 지워야 사라진다. */
.activity-doc-table .doc-note td { border-top:0; border-bottom:0; }
.activity-doc-table .doc-note-first td { border-top:1.5px solid #4b5563; }
.activity-doc-table tbody tr:last-child td { border-bottom:1px solid #101828; }

/* ── 활동내역 표의 비고 칸 (2026-08-27) ──────────────────── */
.activity-note-cell { min-width:150px; }
.activity-note-cell .activity-memo-view { display:block; margin-top:0px;
  font-style:normal; font-size:11px; color:var(--muted); }
.activity-note-cell .activity-memo { width:100%; }
.activity-edit-table .doc-tag { display:inline-block; margin:0 2px 2px 0; padding:0 5px;
  border:1px solid #101828; border-radius:3px; font-size:10px; font-weight:700;
  line-height:16px; white-space:nowrap; }
.activity-edit-table .doc-tag.is-holiday,
.activity-edit-table .doc-tag.is-absent { border-color:#991b1b; color:#991b1b; }
.activity-edit-table .doc-tag.is-paid   { border-color:#075985; color:#075985; }

/* ── 활동내역 모달: 닫기 버튼을 바깥 오른쪽 위로 (2026-08-27)
   머리글까지 함께 스크롤돼서 닫으려면 매번 위로 올려야 했다.
   스크롤을 본문으로 옮기고 버튼을 모달 밖에 붙여 늘 보이게 한다. */
/* 창 전체가 한 덩어리로 내려간다 (2026-09-17).
   예전에는 머리(사업단·계약서·스케줄표)가 고정이고 본문만 내려가서,
   한 달치 목록을 PC 197px · 모바일 32px 창으로 봐야 했다. */
.activity-record-modal { overflow:auto; position:relative;
  display:flex; flex-direction:column; -webkit-overflow-scrolling:touch; }
.activity-record-modal .modal-body { overflow:visible; }
/* 창을 내려가게 했으니 모서리 밖(top:-13px)에 걸린 닫기 단추는 잘린다.
   안쪽으로 들이고, 내려가도 따라오게 붙박이로 둔다 (2026-09-17). */
.activity-record-modal .modal-head .close {
  position:sticky; top:10px; right:10px; z-index:3; float:right; margin-left:auto;
  width:36px; height:36px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(15,23,42,.24);
}

/* ── 확인자·근무결과 정렬 (2026-08-27) ──────────────────────
   확인자는 합계·근무결과 두 줄을 합친 칸이라 세로 가운데에 놓아야 한다.
   방문자와 같은 세로열에 서도록 둘 다 표 오른쪽 끝에서 10px 로 맞춘다. */
.activity-doc-table td.doc-sign {
  text-align:right; padding-right:10px;
  vertical-align:middle;
  /* 확인자 칸 왼쪽 세로줄: 합계줄 금액 오른쪽, 근무결과줄 휴가 오른쪽에 해당한다.
     다른 굵은 테두리와 같은 두께·색으로 맞춘다. 위쪽 날짜 줄들은 그대로 둔다. */
  border-left:1.5px solid #4b5563;
}
.activity-doc-table td.doc-sign span { margin-left:24px; font-weight:400; }
/* 방문자·확인자 세로열 맞춤: 여백을 칸(padding)에서만 주고 margin 은 0 으로 둔다.
   전에는 칸 여백 8px 에 margin 10px 이 더해져 확인자보다 8px 더 들어가 있었다. */
.activity-doc-table .doc-visitor { float:right; margin-right:0; }
.activity-doc-table td.doc-note-visit { padding-right:10px; }
.activity-doc-table .doc-visitor span { margin-left:24px; font-weight:400; }

/* 근무결과 내용도 오른쪽 정렬 */
.activity-doc-table td.doc-result-v { text-align:right; padding-right:10px; }

/* 도장이 덜 찍힌 날 알림. 화면에서만 보이고 인쇄물에는 안 나온다. (2026-08-27) */
.activity-doc-warn {
  margin:0 0 10px; padding:9px 12px; border-radius:8px;
  background:#fffbeb; border:1px solid #fcd34d; color:#9a3412;
  font-size:12px; font-weight:700; line-height:1.5;
}
@media print { .activity-doc-warn { display:none; } }

/* 이미 결근으로 확정된 경우는 붉은 계열로 구분한다 (2026-08-27) */
.activity-doc-warn.is-final {
  background:#fef2f2; border-color:#fca5a5; color:#991b1b;
}

/* ── 미리보기 단추 (2026-08-27) ─────────────────────────────
   알림이 용지 안에 있어 내용을 밀어내고 잘렸다. 알림을 밖으로 빼고
   용지는 [미리보기] 를 눌렀을 때만 펼친다. */
.activity-preview-head { align-items:flex-start; }
.activity-preview-head > div:first-child { display:flex; flex-direction:column; gap:0px; }
.activity-preview-actions { display:flex; gap:8px; flex:0 0 auto; }
.activity-preview-wrap { margin-top:12px; }
.activity-preview-wrap[hidden] { display:none; }

/* 인쇄할 때는 접혀 있어도 용지가 나와야 한다 */
@media print {
  .activity-preview-wrap[hidden] { display:block !important; }
  .activity-preview-head, .activity-preview-actions, #activityPreviewNotice { display:none !important; }
}


/* ── 비고 칸의 연차·경조사 단추 (2026-08-27) ────────────────
   위치·중간은 실제 기록에서 나오는 사실이라 단추로 만들지 않는다.
   담당자가 판단해서 정하는 연차·경조사만 누를 수 있게 한다. */
.activity-leave-pick { display:flex; gap:4px; margin-bottom:4px; }
.activity-leave-btn {
  padding:4px 8px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--muted); font-size:11px; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
.activity-leave-btn:hover:not(:disabled) { border-color:#075985; color:#075985; }
.activity-leave-btn.is-on { background:#075985; border-color:#075985; color:#fff; }
.activity-leave-btn:disabled { opacity:.4; cursor:not-allowed; }
#activityRecordDesc { font-variant-numeric:tabular-nums; }

/* 연차·경조사 잔여 표시 (2026-08-27) */
#activityRecordDesc { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.leave-chip {
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:#eff6ff; color:#1d4ed8; font-size:12px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.leave-chip b { font-weight:700; }
.leave-chip.is-empty { background:#fef2f2; color:#991b1b; }
.leave-edit-btn {
  padding:4px 8px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--text); font-size:12px; font-weight:700; cursor:pointer;
}
.leave-edit-btn:hover { border-color:#075985; color:#075985; }

/* 경조사는 한도가 없어 색을 달리한다 (2026-08-27) */
.leave-chip.is-plain { background:#f3f4f6; color:var(--text); }
.leave-chip em { font-style:normal; font-weight:700; opacity:.75; }
.leave-chip[title] { cursor:help; }

/* 미사용 연차수당(예상) — 근로관계 종료 시 지급 (2026-08-27) */
.leave-chip.is-pay { background:#f0fdf4; color:#166534; }

/* ── 휴가원 · 결근계 / 결재함 (2026-08-27) ──────────────────
   제주시니어클럽 양식(운영안내 7쪽)을 화면으로 옮긴 것. */
.activity-toolbar-actions { display:flex; gap:8px; margin-left:auto; align-items:flex-end; }
.approval-badge {
  display:inline-block; min-width:17px; margin-left:4px; padding:0 4px;
  border-radius:999px; background:var(--brand-danger); color:#fff;
  font-size:11px; font-weight:700; line-height:17px; text-align:center;
}
.approval-badge[hidden] { display:none; }

.leave-request-modal { width:min(620px,100%); }
.leave-form { display:flex; flex-direction:column; gap:8px; }
.leave-form-row { display:grid; grid-template-columns:92px minmax(0,1fr); gap:8px; align-items:start; }
.leave-form-row > label { padding-top:4px; font-size:12px; font-weight:700; color:var(--muted); }
.leave-form-row[hidden] { display:none; }
.leave-form-row input[type=text], .leave-form-row textarea,
.leave-form-row select, .leave-form-row input[type=date] {
  width:100%; padding:8px 8px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--text); font-size:13px; font-family:inherit;
}
.leave-form-static { padding:8px 0; font-size:13px; font-weight:700; }
.leave-kind-picks { display:flex; gap:12px; flex-wrap:wrap; padding-top:4px; }
.leave-kind { font-size:13px; font-weight:700; cursor:pointer; }
.leave-period { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.leave-period input[type=date] { width:auto; flex:0 1 150px; }
.leave-period b { font-variant-numeric:tabular-nums; }
.leave-period b.is-bad { color:var(--brand-danger); }
.leave-form-hint { margin:4px 0 0; font-size:12px; color:var(--muted); line-height:1.6; }
.leave-form-hint.is-bad { color:var(--brand-danger); font-weight:700; }
.leave-form-note { margin:4px 0; padding:8px; border-radius:8px; background:#f6f7fb;
  font-size:12px; text-align:center; color:var(--text); }
.leave-file-lbl { display:inline-block; margin-left:4px; padding:4px 8px;
  border:1px dashed var(--line); border-radius:8px; font-size:12px; font-weight:700;
  color:var(--muted); cursor:pointer; }
.leave-file-lbl:hover { border-color:#075985; color:#075985; }
.leave-file-name { margin-left:4px; font-size:12px; color:var(--muted); }
.leave-file-name.is-ready { color:#166534; font-weight:700; }
.leave-form-line { display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:8px 8px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.leave-line-label { font-size:11px; font-weight:700; color:var(--muted); margin-right:4px; }
.leave-line-step { padding:4px 8px; border:1px solid var(--line); border-radius:8px;
  font-size:12px; font-weight:700; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px;
  padding:12px 20px 16px; border-top:1px solid var(--line); }

/* 결재함 */
.approval-box-modal { width:min(700px,100%); }
.approval-tabs { display:flex; gap:4px; margin-bottom:12px; }
.approval-tab { padding:4px 12px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; }
.approval-tab.is-on { background:var(--text); border-color:var(--text); color:#fff; }
.approval-list { display:flex; flex-direction:column; gap:8px; }
.approval-card { padding:12px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.approval-card-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.approval-card-head strong { font-size:14px; }
.approval-card-head em { font-style:normal; font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.appr-kind { padding:0px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.appr-annual { background:#eff6ff; color:#1d4ed8; }
.appr-bereavement { background:#f0fdf4; color:#166534; }
.appr-absent { background:#fef2f2; color:#991b1b; }
.appr-status { margin-left:auto; padding:0px 8px; border-radius:999px;
  font-size:11px; font-weight:700; }
.appr-pending { background:#fffbeb; color:#9a3412; }
.appr-approved { background:#f0fdf4; color:#166534; }
.appr-rejected { background:#fef2f2; color:#991b1b; }
.approval-card-biz { margin-top:4px; font-size:12px; color:var(--muted); font-weight:700; }
.approval-card-reason { margin-top:4px; font-size:12px; }
.approval-card-reject { margin-top:4px; font-size:12px; color:#991b1b; font-weight:700; }
.approval-steps { display:flex; align-items:center; gap:4px; margin-top:8px; flex-wrap:wrap; }
.approval-steps i { font-style:normal; color:var(--muted); }
.appr-step { padding:4px 8px; border:1px solid var(--line); border-radius:8px;
  font-size:11px; font-weight:700; color:var(--muted); background:#fff; cursor:help; }
.appr-step.is-ok { background:#166534; border-color:#166534; color:#fff; }
.appr-step.is-no { background:#991b1b; border-color:#991b1b; color:#fff; }
.approval-card-actions { display:flex; gap:8px; margin-top:12px; }

/* 활동내역 표의 휴가원 단추 */
.activity-leave-link { display:flex; align-items:center; gap:4px; margin-bottom:4px; }
.activity-leave-cur { font-style:normal; font-size:11px; color:#166534; font-weight:700; }

/* ── 비고 칸 폭 바로잡기 (2026-08-28) ───────────────────────
   비고를 넣으면서 열이 하나씩 밀려, 원래 '작업' 폭 96px 이 비고에 걸렸다.
   그래서 '휴가원 작성' 이 잘렸다. 비고를 넓히고 작업을 제자리로 돌린다. */
.activity-edit-table th:nth-child(6),
.activity-edit-table td:nth-child(6) { width:168px; text-align:left; white-space:normal; }
.activity-edit-table th:nth-child(7),
.activity-edit-table td:nth-child(7) { width:92px; text-align:center; }

/* 비고 안은 위아래로 쌓는다. 한 줄에 억지로 밀어넣으면 또 잘린다. */
.activity-note-cell { min-width:0; }
.activity-edit-table tr.editing .activity-note-cell .activity-leave-link {
  display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:4px;
}
.activity-edit-table tr.editing .activity-note-cell .activity-memo { display:block; width:100%; }
.activity-note-cell .activity-leave-btn { flex:0 0 auto; }
.activity-note-cell .doc-tag { white-space:nowrap; }

/* 좁은 화면에서는 표를 옆으로 밀어 볼 수 있게 한다 */
.activity-table-wrap { overflow-x:auto; }
@media (max-width:720px) {
  .activity-edit-table { min-width:640px; }
  .activity-edit-table th:nth-child(6),
  .activity-edit-table td:nth-child(6) { width:150px; }
}

/* 지각 사유 (2026-08-28) — 본인이 적은 글이라 그대로 보여준다 */
.activity-late-reason { display:block; margin-top:0px; font-style:normal;
  font-size:11px; color:#9a3412; font-weight:700; }
.activity-issue[title] { cursor:help; }

/* 사유 확인 필요 (2026-08-28) — 어르신이 글로 적기 어려워 비워 낸 신청 */
.approval-card-check {
  margin-top:8px; padding:8px 12px; border-radius:9px;
  background:#fffbeb; border:1px solid #fcd34d; color:#9a3412;
  font-size:12px; line-height:1.6;
}
.approval-card-check b { font-weight:700; }
.approval-card-check a { color:#1d4ed8; font-weight:700; text-decoration:none; }
.approval-card-check button { margin-left:4px; padding:4px 8px;
  border:1px solid #9a3412; border-radius:999px; background:#fff;
  color:#9a3412; font-size:11px; font-weight:700; cursor:pointer; }

/* 사유 없는 지각 (2026-08-28) — 담당자가 전화로 확인해야 한다 */
.activity-late-reason.is-none { color:var(--brand-danger); }

/* A4 의 서명 그림 (2026-08-28) — 칸을 넘지 않게 크기를 맞춘다 */
.activity-doc-table td.sign { padding:1px; }
/* 도장이 읽히는 크기 (2026-09-16). 22px 에서는 이름이 뭉개져 안 읽혔다.
   실제 막도장이 6~10mm 이니 그만큼은 되어야 한다. */
.activity-doc-table .doc-sign-img { max-height:28px; max-width:100%; vertical-align:middle; }
.activity-doc-table td.doc-sign .doc-sign-img { max-height:34px; margin-left:6px; }
.activity-doc-table .doc-visitor .doc-sign-img { max-height:30px; margin-left:6px; }
@media print { .activity-doc-table .doc-sign-img { max-height:26px; } }

/* 확인자 서명 창 (2026-08-28) */
.sign-modal { width:min(520px,100%); }
.sign-note { margin:0 0 12px; font-size:12px; color:var(--muted); line-height:1.6; }
.sign-note b { color:var(--text); }
.sign-pad-box { position:relative; }
#mgrSignPad { width:100%; height:170px; border:2px dashed var(--line);
  border-radius:12px; background:#fff; touch-action:none; display:block; cursor:crosshair; }
.sign-pad-ph { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#cbd5e1; font-size:15px; font-weight:700;
  pointer-events:none; }

/* 작업 칸의 휴가원 단추 (2026-08-28)
   휴가원은 '동작' 이라 저장·취소 옆에 둔다. 비고 칸에는 저장되는 값만 둔다. */
.activity-row-btn.is-leave { border-color:#075985; color:#075985; }
.activity-row-btn.is-leave:hover { background:#eff6ff; }
.activity-act-cell { white-space:normal; }
.activity-edit-table tr.editing .activity-act-cell .activity-row-btn {
  display:inline-block; margin:0px 0;
}
.activity-note-cell .activity-leave-cur { display:block; font-style:normal;
  font-size:11px; color:#166534; font-weight:700; margin-bottom:4px; }

/* 휴가·공휴일인 날의 출퇴근 칸 (2026-08-28)
   시각을 지어 넣지 않고 사유를 적는다. 실제 시각과 구분되게 연하게 둔다. */
.activity-doc-table .doc-off { font-size:10px; font-weight:700; color:var(--muted); }
.activity-edit-table .activity-time-range.is-off { color:var(--muted); font-weight:700; }

/* ── 도구줄 단추 줄맞춤 (2026-08-28) ────────────────────────
   사업단·사업명 칸(.field)은 label 위 · select 아래에 아래 여백 12px 이 있다.
   단추에는 그 여백이 없어 아래쪽이 어긋났다. 같은 여백과 높이를 준다. */
.activity-toolbar { align-items:end; }
.activity-toolbar-actions {
  display:flex; gap:8px; align-items:center;
  margin-bottom:12px;          /* .field 의 아래 여백과 같게 */
  flex-wrap:nowrap;
}
.activity-toolbar-actions .btn {
  height:40px;                 /* .field select 와 같은 높이 */
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px; white-space:nowrap;
}
.activity-toolbar-actions .approval-badge { position:static; margin-left:4px; }

@media (max-width:720px) {
  .activity-toolbar-actions { margin-bottom:0; flex-wrap:wrap; }
}

/* ── 휴가원 문서 (결재용) (2026-08-28) ──────────────────────
   기관 양식(운영안내 7쪽) 을 화면으로 옮긴 것. 결재란이 진행에 따라 채워진다. */
.leave-doc-modal { width:min(680px,100%); }
.leave-doc { border:2px solid #101828; padding:0; background:#fff; color:var(--text); }
.ld-head { width:100%; border-collapse:collapse; }
.ld-head td { border:1px solid #101828; text-align:center; vertical-align:middle; }
.ld-title { width:130px; padding:12px 4px; font-size:20px; font-weight:700; letter-spacing:3px; }
.ld-appr-label { width:26px; font-size:12px; font-weight:700; background:#f3f4f6; }
.ld-appr { padding:4px 4px; min-width:74px; height:74px; }
.ld-appr-t { font-size:12px; font-weight:700; padding-bottom:4px; border-bottom:1px solid #d1d5db; }
.ld-appr-b { padding-top:4px; font-size:12px; font-weight:700; min-height:32px; }
.ld-appr-b i { display:block; font-style:normal; font-size:11px; color:var(--muted); }
.ld-appr-b b { display:block; color:#991b1b; font-size:11px; }
.ld-appr-who { font-size:11px; color:var(--muted); }
.ld-appr.is-ok { background:#f0fdf4; }
.ld-appr.is-no { background:#fef2f2; }
.ld-appr.is-turn { background:#fffbeb; box-shadow:inset 0 0 0 2px #f59e0b; }
.ld-turn { display:inline-block; padding:0px 8px; border-radius:999px;
  background:#f59e0b; color:#fff; font-size:11px; font-weight:700; }
.ld-body { width:100%; border-collapse:collapse; }
.ld-body th, .ld-body td { border:1px solid #101828; padding:8px 8px; font-size:13px; }
.ld-body th { width:104px; background:#f6f7fb; font-weight:700; text-align:center; }
.ld-kind { display:inline-block; margin-right:16px; font-weight:700; }
.ld-kind.on { color:#1d4ed8; font-weight:700; }
.ld-sub { margin-top:4px; font-size:12px; color:var(--muted); }
.ld-need { color:#9a3412; font-weight:700; }
.ld-note { margin:12px 8px 4px; text-align:center; font-size:13px; }
.ld-sign { margin:0 8px 12px; text-align:center; font-size:13px; }
.ld-sign span { display:block; margin-top:8px; }
.ld-reject { margin:0 8px 12px; padding:8px 8px; background:#fef2f2;
  color:#991b1b; font-size:12px; font-weight:700; border-radius:8px; }
.ld-blocked { flex:1; font-size:12px; color:#9a3412; line-height:1.5; }
.ld-proxy { flex:1; font-size:12px; color:#9a3412; font-weight:700; }
#leaveDocFoot { align-items:center; }
.approval-card.is-clickable { cursor:pointer; }
.approval-card.is-clickable:hover { border-color:#86efac; }

/* ── 사용 안내서 (2026-08-28) ───────────────────────────────
   실장님 등 현장 담당자가 보는 문서. 글씨를 키우고 여백을 넉넉히 둔다. */
.manual-head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:16px 16px; border:1px solid var(--line); border-radius:16px;
  background:#fff; margin-bottom:12px; }
.manual-head h2 { margin:0 0 4px; font-size:20px; }
.manual-head p { margin:0; font-size:13px; color:var(--muted); }
.manual-body { padding:0; }
.manual-wrap { display:grid; grid-template-columns:236px minmax(0,1fr); gap:16px;
  align-items:start; }
.m-toc { position:sticky; top:14px; padding:12px 12px; border:1px solid var(--line);
  border-radius:16px; background:#fff; max-height:78vh; overflow:auto; }
.m-toc > b { display:block; margin-bottom:8px; font-size:13px; color:var(--muted); }
.m-toc ul { margin:0; padding:0; list-style:none; }
.m-toc li { margin:0px 0; }
.m-toc a { display:block; padding:4px 8px; border-radius:7px; font-size:12px;
  color:var(--text); text-decoration:none; line-height:1.4; }
.m-toc a:hover { background:#eff6ff; }
.m-toc li.lv3 a { padding-left:16px; font-size:12px; color:var(--muted); }
.manual-doc { padding:20px 24px; border:1px solid var(--line); border-radius:16px;
  background:#fff; }
.manual-doc .m-h1 { margin:0 0 8px; font-size:24px; }
.manual-doc .m-h2 { margin:28px 0 8px; padding-top:16px; font-size:20px;
  border-top:2px solid var(--line); }
.manual-doc .m-h2:first-of-type { border-top:0; padding-top:0; margin-top:20px; }
.manual-doc .m-h3 { margin:24px 0 8px; font-size:16px; color:#1d4ed8; }
.manual-doc .m-h4 { margin:16px 0 4px; font-size:14px; }
.manual-doc .m-p { margin:8px 0; font-size:14px; line-height:1.75; }
.manual-doc .m-list { margin:8px 0 12px; padding-left:20px; }
.manual-doc .m-list li { margin:4px 0; font-size:14px; line-height:1.75; }
.manual-doc .m-quote { margin:12px 0; padding:12px 12px; border-radius:10px;
  background:#eff6ff; color:#1d4ed8; font-size:14px; line-height:1.7; border:0; }
.manual-doc .m-pre { margin:8px 0; padding:12px 12px; border-radius:10px;
  background:#f6f7fb; border:1px solid var(--line); font-size:13px; line-height:1.7;
  overflow-x:auto; font-family:inherit; }
.manual-doc .m-hr { margin:20px 0; border:0; border-top:1px solid var(--line); }
.manual-doc .m-tablewrap { overflow-x:auto; margin:8px 0 12px; }
.manual-doc .m-table { width:100%; border-collapse:collapse; font-size:13px; }
.manual-doc .m-table th, .manual-doc .m-table td { border:1px solid var(--line);
  padding:8px 8px; text-align:left; vertical-align:top; line-height:1.6; }
.manual-doc .m-table th { background:#f6f7fb; font-weight:700; white-space:nowrap; }
.manual-doc code { padding:0px 4px; border-radius:4px; background:#f6f7fb;
  font-size:12px; }
.manual-doc .btn-name { padding:0px 4px; border-radius:5px; background:#eff6ff;
  color:#1d4ed8; font-weight:700; font-size:13px; }

@media (max-width:900px) {
  .manual-wrap { grid-template-columns:1fr; }
  .m-toc { position:static; max-height:none; }
}
@media print {
  .m-toc, .manual-head { display:none !important; }
  .manual-wrap { display:block; }
  .manual-doc { border:0; padding:0; }
}

    /* 명단 업로드 (2026-08-28) */
    .rs-step { display:flex; gap:12px; padding:16px 0; border-top:1px solid var(--line,#e5e7eb); }
    .rs-step:first-child { border-top:0; padding-top:4px; }
    .rs-step-no { flex:0 0 26px; height:26px; border-radius:50%; background:#eff6ff;
      color:#4f46e5; font-weight:700; font-size:13px; display:flex;
      align-items:center; justify-content:center; }
    .rs-step-body { flex:1; min-width:0; }
    .rs-step-body strong { display:block; margin-bottom:4px; }
    .rs-hint { color:var(--muted); font-size:13px; margin:0px 0 8px; }
    .rs-fileinfo { margin-top:8px; font-size:13px; color:var(--text); }
    .rs-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
    .rs-row label { flex:0 0 60px; font-size:13px; color:var(--text); }
    .rs-row select { flex:1; max-width:340px; padding:8px 8px;
      border:1px solid var(--line,#d1d5db); border-radius:8px; }
    .rs-summary { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
    .rs-chip { padding:8px 12px; border-radius:999px; font-size:13px;
      background:#f3f4f6; color:var(--text); }
    .rs-chip b { font-weight:700; }
    .rs-chip.new { background:#f0fdf4; color:#047857; }
    .rs-chip.chg { background:#eff6ff; color:#1d4ed8; }
    .rs-chip.gone { background:#fef2f2; color:#b91c1c; }
    .rs-chip.warn { background:#fffbeb; color:#c2410c; }
    .rs-group { margin-bottom:16px; }
    .rs-group > h4 { font-size:14px; margin:0 0 4px; }
    .rs-group .rs-hint { margin:0 0 8px; }
    .rs-list { border:1px solid var(--line,#e5e7eb); border-radius:10px;
      max-height:260px; overflow:auto; }
    .rs-item { display:flex; align-items:center; gap:8px; padding:8px 12px;
      border-bottom:1px solid #f3f4f6; font-size:13px; }
    .rs-item:last-child { border-bottom:0; }
    .rs-item .rs-name { font-weight:700; }
    .rs-item .rs-sub { color:var(--muted); }
    .rs-arrow { color:var(--muted); }
    .rs-apply-row { display:flex; align-items:center; justify-content:space-between;
      gap:12px; margin-top:16px; padding-top:12px;
      border-top:1px solid var(--line,#e5e7eb); flex-wrap:wrap; }
    .rs-check { font-size:13px; color:var(--text); display:flex; align-items:center; gap:8px; }
    .rs-result { margin-top:12px; font-size:14px; }
    .rs-warnbox { background:#fffbeb; border:1px solid #fde68a; color:#9a3412;
      padding:8px 12px; border-radius:10px; font-size:13px; margin-bottom:12px; }

    /* 명단 업로드 — 확인 필요/전체선택 (2026-08-28) */
    .rs-chip.stop { background:#fef2f2; color:#991b1b; }
    .rs-item-stop { background:#f9fafb; }
    .rs-selectall { display:inline-flex; align-items:center; gap:8px;
      font-size:13px; color:var(--text); margin:0 0 8px; cursor:pointer; }
    .rs-item label, label.rs-item { cursor:pointer; }
    .rs-item .rs-sub + .rs-sub { margin-left:0px; }

    /* 명단 업로드 — 겹친 번호 담당자 정리 (2026-08-28) */
    .rs-fix { border:1px solid #fecaca; background:#f9fafb; border-radius:10px;
      padding:12px 16px; margin-bottom:8px; }
    .rs-fix-q { font-weight:700; font-size:14px; margin-bottom:8px; }
    .rs-fix-who { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
    .rs-radio { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
      border:1px solid var(--line,#e5e7eb); background:#fff; border-radius:999px;
      padding:8px 12px; font-size:13px; }
    .rs-radio:has(input:checked) { border-color:#4f46e5; background:#eff6ff; color:#3730a3; }
    .rs-fix-note { font-size:13px; color:#9a3412; background:#fffbeb;
      border-radius:8px; padding:8px 8px; margin-bottom:8px; }
    .rs-fix-other { margin-bottom:8px; }
    .rs-fix-other label { display:block; font-size:13px; color:var(--text); margin-bottom:4px; }
    .rs-fix-other input { width:200px; padding:8px 8px; font-size:14px;
      border:1px solid var(--line,#d1d5db); border-radius:8px; }
    .rs-fix-other .rs-hint { display:block; margin:4px 0 0; }
    .rs-fix-foot { display:flex; align-items:center; justify-content:space-between;
      gap:8px; flex-wrap:wrap; }
    .rs-ask.rs-asked { color:#047857; }

    /* 명단 업로드 — 문의하기 (2026-08-28) */
    .rs-fix-soft { border-color:#e5e7eb; background:#f6f7fb; }
    .rs-askbox { margin-top:8px; padding-top:8px; border-top:1px dashed #e5e7eb; }
    .rs-askbtns { display:flex; gap:8px; flex-wrap:wrap; }
    .rs-msgbox { margin-top:8px; display:flex; gap:8px; align-items:flex-start; }
    .rs-msgbox textarea { flex:1; min-width:0; padding:8px 8px; font-size:14px;
      font-family:inherit; border:1px solid var(--line,#d1d5db); border-radius:8px;
      resize:vertical; }
    .rs-sent { color:#047857; font-size:13px; padding:4px 0; }

    /* 중간 체크를 꺼둔 동안 그 열만 감춘다 (2026-08-28).
       지운 게 아니라 감춘 것이라, script.js 의 SHOW_MID_CHECK 만 켜면 돌아온다. */
    body.hide-midcheck .col-midcheck { display: none; }

    /* 이상 징후 — 자율출근에서 지각·조퇴 신호가 사라진 자리를 메운다 (2026-08-28).
       빨강(지각·결근)과 구분한다. 잘못이 아니라 "확인해보라" 는 표시다. */
    .doc-tag.is-anomaly {
      background: #fffbeb;
      color: #9a3412;
      border: 1px solid #fcd34d;
    }

/* ── '수정됨' 표시 (2026-08-30)
   담당자가 고친 기록임을 관리자가 알아채라고 띄운다.
   문제(빨강)나 주의(주황)와 헷갈리지 않게 보라로 둔다 — 잘못됐다는 뜻이 아니다.
   ※ A4 인쇄물에는 나오지 않는다. 화면 전용이다. */
.activity-edit-table .doc-tag.activity-edited,
.activity-note-cell .doc-tag.activity-edited {
  border-color:#6d28d9; color:#6d28d9; background:#f6f7fb; cursor:help;
}
.activity-summary-row .activity-edited-sum {
  margin-top:4px; color:#6d28d9; font-weight:700; cursor:help;
}

/* 공익활동 구간 일급 입력 (2026-08-30)
   시급이 아니라 하루 단위로 끊어 주는 금액이라 따로 묶어 보여준다. */
.activity-pay-rule > strong { display:block; margin-bottom:0px; }
.activity-pay-rule > .field-muted { display:block; margin-bottom:8px; line-height:1.45; }
.activity-pay-tiers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
@media (max-width:640px) { .activity-pay-tiers { grid-template-columns:1fr; } }

/* 참여자 근무시각 줄 (2026-08-30)
   활동내역 맨 위. 그 사람 기록을 보다가 바로 고치는 자리다. */
/* 설정이 접혀 있을 때 **빈 상자만 남아** 정체 모를 둥근 영역으로 보였다.
   (대표님 2026-08-31: "버튼인데 버튼명이 안보이는 건지")
   상자 모양은 안쪽 패널이 갖게 하고, 이 칸은 자리만 잡는다. */
#personScheduleBar { margin:0; padding:0; border:0; background:none; }
#personScheduleBar:has(#workSettingPanel:not([hidden])) { margin:0 0 12px; }
.worksetting { padding:8px 12px; border:1px solid var(--line);
  border-radius:10px; background:#f6f7fb; }
.person-sched-view { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.person-sched-badge { padding:0px 8px; border-radius:999px; font-size:11px; font-weight:700;
  border:1px solid currentColor; white-space:nowrap; }
.person-sched-badge.is-own  { color:#166534; }
.person-sched-badge.is-biz  { color:var(--text); }
.person-sched-badge.is-flex { color:#6d28d9; }
.person-sched-text { flex:1 1 auto; font-size:13px; font-weight:700; color:var(--text); }
.person-sched-edit { flex:0 0 auto; }
.person-sched-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.person-sched-form .person-sched-actions { grid-column:1/-1; display:flex; gap:8px; }
.person-sched-form > small { grid-column:1/-1; line-height:1.45; }
@media (max-width:640px) { .person-sched-form { grid-template-columns:1fr; } }

/* 확인만 누른 날의 서명 칸 (2026-08-30)
   손서명 대신 이름을 이탤릭체로. 손으로 쓴 것처럼 보이게 한다.
   확인하지 않은 날은 비워 둔다 — 지어 넣으면 허위작성이다. */
.activity-doc-table .doc-sign-name { font-style:italic; font-weight:700;
  font-size:12px; color:var(--text); letter-spacing:.5px; }

/* 번호 변경 판단 근거 (2026-08-30)
   같은 분인지 동명이인인지는 기계가 정할 수 없다. 근거만 붙이고 판단은 담당자가 한다. */
.rs-item-col { display:block; }
.rs-item-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rs-hintline { display:block; margin:4px 0 0 24px; font-size:12px;
  font-weight:700; color:var(--muted); line-height:1.45; }
.rs-hintline.is-same { color:#166534; }
.rs-hintline.is-diff { color:#991b1b; }

/* 파일 자체의 문제 (2026-08-30)
   온다정과 견주기 전에 파일 안에서 이상한 곳을 먼저 짚는다.
   담당자가 기관에 바로 되물을 수 있게 눈에 띄게 둔다. */
.rs-fileissue { border-left: 3px solid #f59e0b; padding-left: 12px; }
.rs-fileissue h4 { color:#9a3412; }

/* ── 활동 목록: 모바일 기준으로 다시 (2026-08-30) ─────────────
   대표님: "이름에 해당하는 텍스트는 전체가 보여지도록 다른 구성요소들과의
   배치를 새로 고려해야 함."
   전에는 5칸 그리드라 360px 폰에서 이름 칸에 10px 도 안 남아 '강..' 이 됐다.
   칸을 좁혀서는 못 고친다 — 세로로 쌓아 이름에 제 줄을 준다. */
.activity-summary-row {
  display:block; width:100%; padding:12px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  text-align:left; cursor:pointer;
}
.actrow-head { display:flex; align-items:baseline; gap:8px; }
/* 이름은 잘리지 않는다. 길면 줄을 바꾼다. */
.actrow-name {
  flex:1 1 auto; min-width:0; display:block;
  color:var(--text); font-size:14px; font-weight:700; line-height:1.35;
  white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all;
}
.actrow-pay {
  flex:0 0 auto; color:var(--text); font-style:normal;
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
}
.actrow-biz {
  margin-top:4px; color:var(--muted); font-size:13px; font-weight:700;
  line-height:1.4; word-break:keep-all;
}
.actrow-stat {
  display:flex; gap:12px; margin-top:4px;
  color:var(--text); font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.activity-summary-row .activity-issue,
.activity-summary-row .activity-edited-sum { margin-top:4px; }

/* ── 활동내역 모달 (2026-08-30, 대표님 설계) ──────────────────
   헤더는 한 줄. 설명은 '?' 안으로. 설정은 눌러야 펴진다.
   저장은 항상 제일 오른쪽, 취소는 그 왼쪽. */
.actm-summary { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.actm-chip {
  display:inline-flex; align-items:baseline; gap:4px;
  padding:4px 8px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--text); font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.actm-chip b { color:var(--muted); font-weight:700; }
.actm-chip.is-warn { border-color:#fcd34d; background:#fffbeb; }
.actm-chip.is-warn b { color:#9a3412; }

.actm-stepper {
  display:inline-flex; align-items:center; gap:0px;
  border:1px solid var(--line); border-radius:999px; background:#fff; padding:0px;
}
.actm-stepper b {
  min-width:26px; text-align:center;
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
}
.actm-step {
  width:28px; height:28px; border:0; border-radius:999px; background:#f3f4f6;
  color:var(--text); font-size:14px; font-weight:700; line-height:1; cursor:pointer;
}
.actm-step:hover { background:#e5e7eb; }

/* 설명은 접혀 있다가 '?' 를 누르면 열린다 (2026-09-17).
   테두리를 빼고 바탕으로 — 화면에 동그라미 선이 늘어나면 시끄럽다. */
.actm-help {
  width:22px; height:22px; border:0; border-radius:999px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-surface); color:var(--muted);
  font-size:12px; font-weight:700; line-height:1; cursor:pointer;
  vertical-align:middle; margin-left:6px; padding:0;
}
.actm-help:hover { background:var(--brand-primary-tint); color:var(--brand-primary-deep); }
.actm-help[aria-expanded="true"] { background:var(--brand-primary-tint); color:var(--brand-primary-deep); }
.actm-setting { margin-left:auto; }        /* 설정은 오른쪽 끝에 */
/* 열었을 때 줄줄이 흐르지 않게 — 낱말 경계에서 끊고 줄 간격을 넉넉히 (2026-09-17) */
.actm-help-box {
  margin:8px 0 0; padding:12px 14px; border:0;
  border-radius:var(--radius-md); background:var(--brand-surface);
  color:var(--muted); font-size:13px; font-weight:600; line-height:1.7;
  word-break:keep-all; white-space:pre-line;
}
.actm-help-box[hidden] { display:none !important; }
.actm-help-box + .actm-help-box { margin-top:6px; }

/* 근무정보설정 — 눌러야 펴진다 */
.worksetting {
  margin:0 0 12px; padding:12px;
  border:1px solid var(--line); border-radius:12px; background:#f6f7fb;
}
.ws-row { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.ws-label { flex:0 0 74px; color:var(--muted); font-size:13px; font-weight:700; }
.ws-body { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; }
.ws-select {
  flex:0 1 110px; border:1px solid var(--line); border-radius:10px;
  height:var(--h-md); padding:0 8px; background:#fff; font:inherit;
  font-variant-numeric:tabular-nums; font-weight:700;
}
.ws-sep { color:var(--muted); font-weight:700; }
/* 셋 중 하나만 고르는 버튼 묶음 */
.ws-seg { display:inline-flex; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; background:#fff; }
.ws-seg-btn {
  border:0; border-right:1px solid var(--line); background:#fff;
  padding:8px 12px; color:var(--muted); font-size:13px; font-weight:700;
  cursor:pointer; white-space:nowrap;
}
.ws-seg-btn:last-child { border-right:0; }
.ws-seg-btn.is-on { background:#101828; color:#fff; }
.ws-now { margin:8px 0 12px; color:var(--muted); font-size:12px; font-weight:700; }
/* 저장이 제일 오른쪽, 취소는 그 왼쪽 (대표님 2026-08-30) */
.ws-actions { display:flex; justify-content:flex-end; gap:8px; }

@media (max-width:520px) {
  .ws-row { align-items:flex-start; flex-direction:column; gap:4px; }
  .ws-label { flex:none; }
  .ws-body { width:100%; }
  .ws-select { flex:1 1 0; }
  .ws-seg { width:100%; }
  .ws-seg-btn { flex:1 1 0; padding:8px 4px; }
  .actm-setting { margin-left:0; width:100%; }
}

/* ── 슬며시 알리기 (2026-08-30) ───────────────────────────────
   대표님: "그걸 슬며시 알려주는 형태가 되어야 함."
   화면을 막지 않고 아래쪽에 잠깐 떴다 사라진다. */
.toast {
  position:fixed; left:50%; bottom:24px; z-index:9999;
  transform:translate(-50%, 16px);
  max-width:min(92vw, 460px); padding:12px 16px;
  border-radius:12px; background:#101828; color:#fff;
  font-size:14px; font-weight:700; line-height:1.45; text-align:center;
  box-shadow:0 12px 32px rgba(15,23,42,.28);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  word-break:keep-all;
}
.toast.is-on { opacity:1; transform:translate(-50%, 0); visibility:visible; }
.toast.is-bad { background:#991b1b; }
@media (prefers-reduced-motion:reduce) { .toast { transition:none; } }

/* ── 결근 종류 고르기 ─────────────────────────────────────────
   결재를 거치지 않고 한 번 눌러 고른다. 정당성은 기관 재량. */
.leavepick { display:inline-flex; flex-wrap:wrap; gap:0;
  border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
.leavepick-btn {
  border:0; border-right:1px solid var(--line); background:#fff;
  padding:4px 8px; color:var(--muted);
  font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.leavepick-btn:last-child { border-right:0; }
.leavepick-btn:hover { background:#f3f4f6; }
.leavepick-btn.is-on { background:#101828; color:#fff; }

/* ── 표 머리 고정 ─────────────────────────────────────────────
   31일을 훑을 때 '일자·출근·퇴근' 이 계속 보여야 어느 칸인지 안 헷갈린다. */
/* 본문에 따로 키를 주지 않는다 — 창이 통째로 내려간다 (2026-09-17) */
.activity-record-modal .modal-body { max-height:none; overflow:visible; }
.activity-edit-table thead th {
  position:sticky; top:0; z-index:2;
  background:#f6f7fb; box-shadow:inset 0 -1px 0 var(--line);
}

/* 연차 칩 안에 −/＋ (2026-08-31)
   따로 떼어 두면 무엇을 조정하는 건지 화면만 보고 알 수 없다. */
.actm-chip.is-annual { padding-right:4px; gap:4px; }
.actm-num { font-variant-numeric:tabular-nums; }
.actm-num b { font-weight:700; color:var(--text); }
.actm-step-pair { display:inline-flex; gap:0px; margin-left:0px; }
.actm-step {
  width:26px; height:26px; border:0; border-radius:999px; background:#f3f4f6;
  color:var(--text); font-size:14px; font-weight:700; line-height:1; cursor:pointer;
}
.actm-step:hover { background:#e5e7eb; }

/* ── 미리보기 줄: 폰에서 글자가 세로로 쌓이던 것 (2026-08-31) ──
   가로 flex 인데 줄바꿈을 안 해서, 390px 폰에서 단추 셋이 짜부라지고
   글자가 한 자씩 세로로 쌓였다. 이름이 잘리던 것과 같은 종류다.
   **칸을 좁히는 게 아니라 줄을 바꿔야 한다.** */
.activity-preview-head { flex-wrap:wrap; }
.activity-preview-actions { flex-wrap:wrap; }
/* 단추는 제 글자만큼은 반드시 차지한다. 이게 없으면 또 세로로 쌓인다. */
.activity-preview-actions .btn { flex:0 0 auto; white-space:nowrap; }

@media (max-width:560px) {
  /* 글과 단추를 위아래로 나눈다 */
  .activity-preview-head > div:first-child { flex:1 1 100%; }
  .activity-preview-actions { width:100%; justify-content:flex-start; }
  .activity-preview-actions .btn { flex:1 1 auto; min-width:0; }
}

/* 근무방식 3택 (2026-08-31)
   폰에서 세 글자짜리 단추 셋이 한 줄에 들어가야 한다. */
#personSchedMode { flex-wrap:wrap; }
#personSchedMode .ws-seg-btn { flex:1 1 auto; white-space:nowrap; padding-left:8px; padding-right:8px; }
#wsTimeRows[hidden] { display:none; }


/* 일수·시간·급여 한 줄 (2026-08-31) */
.actrow-stat { align-items:baseline; }
.actrow-stat .actrow-pay { margin-left:auto; }


/* ── 출근일지 두 줄 구조 (2026-08-31, 대표님 피드백) ──────────
   칸이 여섯이라 표가 640px 이었다. 폰 모달 안쪽은 328px 뿐이라
   가로로 넘치고 모달 밖으로 흘러나왔다. 칸을 둘로 줄인다. */
/* 폰용 규칙에 min-width:640px 가 박혀 있었다 (style.css:1820).
   6칸 표를 가로로 밀어보려고 넣은 것인데, 그래서 표가 모달을 뚫고 나갔다.
   칸이 둘이 된 지금은 없애야 한다. */
.activity-edit-table { table-layout:fixed; width:100%; min-width:0; max-width:100%; }
/* 2026-09-02: 칸이 셋이 됐다 (일자 · 출퇴근 · 금액).
   전에는 "칸이 둘뿐" 이라 3번째부터 숨겼는데, 그 규칙이 금액 칸을 먹었다.
   대표님 2026-09-02: "위치확인, 각 일자의 금액도 같이 보여져야 함" */
.activity-edit-table th:nth-child(n+4), .activity-edit-table td:nth-child(n+4) {
  display:none;
}
.activity-edit-table th:nth-child(1), .activity-edit-table td:nth-child(1) { width:64px; }
.activity-edit-table th:nth-child(2), .activity-edit-table td:nth-child(2) {
  width:auto; text-align:left;
}
/* 금액은 오른쪽 끝 */
.activity-edit-table th:nth-child(3), .activity-edit-table td:nth-child(3) {
  display:table-cell; width:76px; text-align:right;
}
/* 머리 아래 구분선은 **한 줄, 검정** (대표님 2026-08-31) */
.activity-edit-table thead th {
  border-bottom:1px solid #111827; padding-bottom:4px; color:var(--muted);
  font-size:12px; font-weight:700;
}
.activity-edit-table td { border-bottom:1px solid var(--line); padding:8px 4px;
  white-space:normal; vertical-align:top; }

.ac-date strong { display:block; font-size:14px; }
.ac-date span { display:block; font-size:11px; color:var(--muted); }

.ac-main { line-height:1.5; }
.ac-line1 { font-size:14px; }
.ac-line1 b { font-variant-numeric:tabular-nums; font-weight:700; }
.ac-line1 i { margin:0 4px; color:var(--muted); font-style:normal; }
.ac-line1 .ac-mid { margin-left:8px; font-size:11px; color:var(--muted); }
.ac-line1 .ac-off { color:var(--muted); }

.ac-line2 { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:4px; }
.ac-line2 > span { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.ac-dur { font-size:12px; font-weight:700; }
/* 위치확인은 네모 테두리 안에 글로 (대표님 2026-08-31) */
.ac-loc {
  padding:0px 4px; border:1px solid var(--line); border-radius:5px;
  font-size:11px; color:var(--muted); white-space:nowrap;
}
.ac-loc.is-ok { border-color:#86efac; color:#15803d; }

/* 고치는 중일 때만 입력칸이 나온다 */
.activity-edit-table tr .edit-only { display:none; }
.activity-edit-table tr.editing .view-only { display:none; }
.activity-edit-table tr.editing .edit-only { display:flex; }
.activity-edit-table tr.editing { background:#f0fdf4; }
.ac-times { align-items:center; gap:4px; flex-wrap:wrap; }
.ac-times input[type="time"] {
  padding:4px 6px; font-size:13px; border:1px solid var(--line); border-radius:8px;
  /* 시각 칸은 09:10 을 보여줘야 하는 곳이다. **줄어들면 안 된다.**
     min-width:0 + shrink 라 자리가 좁아지면 손톱만 해졌다 (2026-09-03). */
  /* 윈도우 크롬은 '오전 02:38' 처럼 오전/오후가 붙어 더 넓다.
     104px 로는 뒷자리가 잘렸다 (2026-09-03). */
  min-width:132px; flex:0 0 auto;
}
.ac-times { flex-wrap:wrap; }
.ac-editline { flex-wrap:wrap; gap:4px; }
.ac-loc-edit { display:inline-flex; align-items:center; gap:4px; font-size:11px; }
.ac-line3 { flex-wrap:wrap; gap:4px; margin-top:4px; align-items:center; }
.ac-line3 .activity-memo { flex:1 1 120px; min-width:0; padding:4px 8px; font-size:12px;
  border:1px solid var(--line); border-radius:8px; }
/* 저장은 언제나 제일 오른쪽 */
.ac-acts { display:inline-flex; gap:4px; margin-left:auto; }

/* 줄 전체가 누르는 자리 */
.activity-edit-table tbody tr { cursor:pointer; }
.activity-edit-table tbody tr.editing { cursor:default; }


/* ── 모달 머리말 (2026-08-31, 대표님 피드백) ─────────────────
   왼쪽 이름 / 오른쪽 월, 그 아래 사업단 · 출근지 · 근무시각.
   머리말은 연한 바탕으로 아래 내용과 나눈다 (대표님이 든 좋은 예: 연락처 카드). */
.activity-record-modal .modal-head { background:#f6f7fb; align-items:flex-start; }
.actm-headwrap { flex:1 1 auto; min-width:0; }
.actm-idline { display:flex; align-items:baseline; gap:8px; }
.actm-idline h3 { margin:0; flex:1 1 auto; min-width:0; word-break:keep-all; }
.actm-month { font-size:13px; font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

.actm-meta { display:flex; flex-direction:column; gap:0px; margin-top:8px; }
.actm-metarow {
  display:flex; align-items:baseline; gap:8px; width:100%;
  padding:4px 4px; border:0; border-radius:8px; background:none;
  font:inherit; text-align:left; cursor:pointer;
}
.actm-metarow:hover { background:#f3f4f6; }
.actm-metarow.is-plain { cursor:default; }
.actm-metarow.is-plain:hover { background:none; }
.actm-metalabel { flex:0 0 52px; font-size:11px; color:var(--muted); }
.actm-metavalue { flex:1 1 auto; min-width:0; font-size:12px; font-weight:700;
  word-break:keep-all; }
.actm-metavalue.is-empty { font-weight:600; color:var(--muted); }
.actm-nowline { padding:4px 4px; font-size:11px; color:var(--muted); }

.actm-summary { margin-top:8px; }

/* 출근지 고르는 칸은 폭이 넓어야 이름과 주소가 다 보인다 */
.ws-select.is-wide { width:100%; min-width:0; }

/* 모달 바닥이 둥근데 목록은 네모라, 마지막 줄이 모서리를 덮어
   내용이 모달 밖으로 흘러나온 것처럼 보였다 (대표님 캡처 03). */
.activity-record-modal .modal-body {
  border-bottom-left-radius:26px; border-bottom-right-radius:26px;
}


/* ── '?' 설명을 칩으로 (2026-08-31, 대표님 피드백 캡처 05->06) ──
   여섯 문단이 <br> 로만 이어져 글벽이었다. 안내서와 같은 결로 끊는다. */
.actm-help-box { padding:10px; border-radius:12px; background:#f6f7fb;
  border:1px solid var(--line); }
.helprow { display:flex; gap:8px; align-items:flex-start; padding:4px 0; }
.helprow + .helprow { border-top:1px solid #f3f4f6; }
.helptag {
  flex:0 0 auto; min-width:56px; text-align:center;
  padding:0px 8px; border-radius:999px;
  font-size:11px; font-weight:700; white-space:nowrap;
}
.helptag.is-ok   { background:#dcfce7; color:#15803d; }
.helptag.is-warn { background:#fee2e2; color:#b91c1c; }
.helptag.is-info { background:#dbeafe; color:#3730a3; }
.helptext { flex:1 1 auto; min-width:0; font-size:12px; line-height:1.55;
  word-break:keep-all; }
.helpnote { display:block; margin-top:0px; font-size:11px; color:var(--muted);
  font-style:normal; }
/* 안내서의 강조 상자와 같은 자리 */
.helpcall {
  margin-top:8px; padding:8px 8px; border-radius:10px;
  background:#eff6ff; border:1px solid #bfdbfe;
  font-size:12px; line-height:1.6; color:#1e3a8a; word-break:keep-all;
}
.helpcall b { display:inline; font-weight:700; }
.helpcall > b:first-child { display:block; margin-bottom:0px; }


/* ── 고른 것이 확실히 보이게 (2026-08-31, 대표님) ────────────
   "다른 버튼 눌르면 그쪽에 연하게 색깔이 보이면서 눌러진것 같긴한데
    뭔가 너무 티가 안난다는 느낌"
   연한 바탕만으로는 안 보인다. 고른 것은 **진하게 채운다.** */
.leavepick { display:inline-flex; flex-wrap:wrap; gap:4px; }
.leavepick-btn {
  padding:4px 8px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--muted);
  font-size:12px; font-weight:700; line-height:1.2; cursor:pointer;
  white-space:nowrap;
}
.leavepick-btn:hover { border-color:var(--brand-ink-muted); }
.leavepick-btn.is-on {
  background:#101828; border-color:#101828; color:#fff;
}

/* 편집 중 '위치확인' 이 한 글자씩 세로로 쌓였다.
   .edit-only 를 flex 로 켜면서 label 이 좁아진 탓이다. */
.ac-loc-edit {
  display:inline-flex; align-items:center; gap:4px;
  flex:0 0 auto; white-space:nowrap;
  padding:4px 8px; border:1px solid var(--line); border-radius:8px;
  font-size:11px; color:var(--muted);
}
.ac-loc-edit input { width:15px; height:15px; margin:0; flex:0 0 auto; }
.ac-editline { display:flex; align-items:center; }
.ac-editline > * { flex:0 1 auto; min-width:0; }


/* ══════════════════════════════════════════════════════════
   ① 안내서 표를 폰에서 카드로 (2026-08-31, 대표님 캡처 06)

   폰 390px 인데 표가 680px 이라 표 안에서 가로로 밀어야 뒷칸이 보였다.
   대표님 원칙 — 잘려서 못 보는 정보가 없어야 한다.
   그래서 좁은 화면에서는 줄 하나를 카드 하나로 편다.
   ══════════════════════════════════════════════════════════ */
/* 머리글이 안 접혀 표가 680px 아래로 줄지 못했다.
   표가 넘치면 폰 브라우저는 화면을 넓혀버린다 (390 -> 756).
   그러면 폰용 규칙 자체가 안 걸린다. **먼저 줄어들게 만들어야 한다.** */
.manual-doc .m-table th { white-space:normal; word-break:keep-all; }

/* 격자 칸(grid item)은 기본이 min-width:auto 라 **내용보다 작아지지 못한다.**
   그래서 안내서 본문이 734px 이 되고, 그 바람에 화면이 756 으로 벌어졌다.
   0 을 줘야 비로소 줄어든다. */
.manual-wrap > * { min-width:0; }
.manual-doc { min-width:0; overflow-wrap:anywhere; }
/* 코드·주소처럼 안 끊기는 글은 제 칸 안에서만 밀리게 둔다 */
.manual-doc pre, .manual-doc code { overflow-x:auto; max-width:100%; }

/* 화면이 넓어진 뒤에도 걸리도록 기준을 820px 로 둔다.
   (표가 안 줄어 화면이 756 이 된 경우까지 잡는다) */
@media (max-width:820px) {
  .manual-doc .m-tablewrap { overflow-x:visible; }
  .manual-doc .m-table,
  .manual-doc .m-table tbody,
  .manual-doc .m-table tr,
  .manual-doc .m-table td { display:block; width:auto; }
  /* 전역에 table { min-width:680px } 가 있다 (style.css:981).
     그것 때문에 카드로 펴도 표가 680px 을 붙들고 있었다. */
  .manual-doc .m-table { min-width:0; max-width:100%; }
  /* 칸 이름은 각 값 앞에 붙으므로 머리줄은 필요 없다 */
  .manual-doc .m-table thead { display:none; }
  .manual-doc .m-table tr {
    border:1px solid var(--line); border-radius:10px;
    margin:0 0 8px; padding:0px 0; background:#fff;
  }
  .manual-doc .m-table td {
    border:0; border-top:1px solid #f3f4f6; padding:8px 12px;
    white-space:normal; word-break:keep-all;
  }
  .manual-doc .m-table tr > td:first-child { border-top:0; }
  /* 칸 이름 (script.js 의 labelManualTables 가 붙인다) */
  .manual-doc .m-table td[data-label]::before {
    content:attr(data-label);
    display:block; margin-bottom:0px;
    font-size:11px; font-weight:700; color:var(--muted);
  }
  /* 이름이 없는 칸(머리줄이 없는 표)은 그냥 값만 */
  .manual-doc .m-table td:not([data-label])::before { content:none; }
}

/* ══════════════════════════════════════════════════════════
   ② 통일성 — 값의 이름을 세우고, 혼자 튀는 것만 당긴다

   455개를 재보니 글꼴만 통일돼 있고 모서리 10가지·높이 15가지였다.
   **자리를 정하는 값을 통째로 바꾸면 화면이 무너진다.**
   그래서 이번에는 대부분을 차지하는 값을 기준으로 삼고,
   혼자 튀는 것만 가장 가까운 값으로 당긴다.
   ══════════════════════════════════════════════════════════ */
:root {
  /* 글자 — 세 단계 */
  --btn-fs-sm: 11px;   /* 작은 딱지 */
  --btn-fs:    13px;   /* 기본 (45%) */
  --btn-fs-lg: 16px;   /* 큰 단추 (34%) */
  /* 굵기 — 두 단계 */
  --btn-fw:        700;
  --btn-fw-strong: 800;
  /* 모서리 — 세 단계 */
  --r-sm:     8px;     /* 네모난 것 */
  --r-pill:   999px;   /* 알약 */
  --r-circle: 50%;     /* 동그란 아이콘 */
  /* 높이 — 네 단계. 전부 4의 배수 (2026-09-02)
       24  목록 안 작은 칩·아이콘
       32  보통 단추 · 위쪽 메뉴 · 탭
       40  입력칸 · 드롭다운 · 설정 탭
       48  주요 동작 단추 (보내기 등) */
  --h-sm: 24px;
  --h:    32px;
  --h-md: 40px;
  --h-lg: 48px;
  /* 줄높이도 4의 배수로. 여백 8 + 16 + 8 = 32 처럼 높이가 저절로 맞는다 */
  --lh-btn: 16px;

  /* 글자 — 네 층 (대표님 2026-09-02: "제목 스러운 것, 컨텐츠,
     컨텐츠에 대한 설명 등의 폰트 크기/색상/굵기가 규칙이 있어야 함")
       제목  16 / 800 / 검정   사람 이름 · 모달 제목
       내용  14 / 700 / 검정   값
       설명  12 / 400 / 회색   라벨과 보조설명
       표시  11 / 800 / 뜻색   칩과 태그 */
  --fs-title: 16px;  --fw-title: 800;
  --fs-body:  14px;  --fw-body:  700;
  --fs-desc:  12px;  --fw-desc:  400;
  --fs-tag:   11px;  --fw-tag:   800;
}

/* 글자 크기가 혼자 튀던 것 (14 · 15 · 17px) */
.pt-main-tab { font-size:var(--btn-fs); }
.actm-step   { font-size:var(--btn-fs); }
.modal .close, .modal-head .close { font-size:var(--btn-fs-lg); }

/* 모서리가 혼자 튀던 것 (10 · 11 · 12px) */
.pt-main-tab,
.care-send-btn,
.cs-page-tab,
.activity-pay-tab { border-radius:var(--r-sm); }

/* 굵기가 혼자 튀던 것 (500 하나) */
.call-period-select { font-weight:var(--btn-fw); }

/* 높이가 혼자 튀던 것.
   딱 잘라 정하지 않고 최소값으로 준다 — 글이 길어지면 늘어나야 한다. */
.pt-main-tab,
.care-mode-tab,
.call-period-select,
.modal .close, .modal-head .close { min-height:var(--h); }
.cs-var-btn { min-height:var(--h-sm); }
.care-send-btn { min-height:var(--h-lg); }

/* 드롭다운은 42px 이 대부분이다. 32·35·38·41 을 거기에 맞춘다. */
select.ws-select, select.cs-select, select.care-select { min-height:var(--h-md); }

/* ── 수정 기록 ─────────────────────────────────────────
   여백은 4의 배수, 높이는 24/32/40/48 만 쓴다. 글은 자르지 않는다
   (대표님: 말줄임 금지 — 잘리면 무엇을 고쳤는지 알 수가 없다) */
.el-filters { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.el-list { display:flex; flex-direction:column; gap:8px; }
.el-row { padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.el-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.el-when { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.el-who { font-size:12px; font-weight:700; color:var(--text); }
.el-what { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:4px; }
.el-kind { padding:0 8px; min-height:24px; display:inline-flex; align-items:center;
  border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:12px; font-weight:700; }
.el-label { font-size:14px; font-weight:700; color:var(--text); }
.el-field { font-size:13px; color:var(--muted); }
.el-diff { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:13px; line-height:1.5; word-break:break-all; }
.el-old { color:var(--muted); text-decoration:line-through; }
.el-arrow { color:var(--muted); }
.el-new { color:var(--text); font-weight:700; }
.el-empty { padding:24px 12px; color:var(--muted); font-size:13px; text-align:center; }

.site-hint { margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }

/* ── 글자 규칙 적용 (대표님 2026-09-02) ──────────────────
   참여자 모달 하나에 크기 6가지 · 굵기 3가지 · 색 7가지,
   조합이 21가지였다. 네 층으로 모은다. */

/* 설명 — 라벨과 보조설명. 회색, 안 굵게 */
.actm-metalabel,
.actm-metasub,
.activity-edit-table .ac-date span,
.activity-edit-table th {
  font-size: var(--fs-desc); font-weight: var(--fw-desc); color: var(--muted);
}
/* 내용 — 값. 검정, 굵게 */
.actm-metavalue,
.activity-edit-table .ac-date strong,
.ac-line1 b, .ac-dur, .ac-pay b {
  font-size: var(--fs-body); font-weight: var(--fw-body); color: var(--text);
}
/* 값이 비었을 때는 설명처럼 흐리게 — 값이 아니기 때문이다 */
.actm-metavalue.is-empty { font-weight: var(--fw-desc); color: var(--muted); }
/* 표시 — 칩과 태그. 작고 굵게. 색은 뜻이 있는 것만 따로 */
.actm-chip, .actm-chip b, .ac-loc, .ac-tag, .ac-off {
  font-size: var(--fs-tag); font-weight: var(--fw-tag);
}
/* 금액의 '원' 은 값에 딸린 설명이다 */
.ac-pay i { font-size: var(--fs-tag); font-weight: var(--fw-desc); color: var(--muted); }
/* 남은 것들도 같은 층에 맞춘다 */
.doc-tag, .activity-edit-table .doc-tag {
  font-size: var(--fs-tag); font-weight: var(--fw-tag);
}
.activity-memo-view, .actm-month,
.activity-edit-table td.ac-date > span {
  font-size: var(--fs-desc); font-weight: var(--fw-desc); color: var(--muted);
}
/* 누르는 것은 작으면 못 누른다. 값과 같은 크기로 둔다 */
.actm-step, .actm-help {
  font-size: var(--fs-body); font-weight: var(--fw-title);
}
/* 꺾쇠·닫기·줄 안 단추도 정한 색으로. 뜻 없는 색을 남기지 않는다 */
.actm-chev { color:var(--muted); }
.modal .close, .modal-head .close, .activity-row-btn { color:var(--text); }
/* 주말·공휴일은 색으로만 나누고 크기·굵기는 다른 날과 같게 */
.activity-edit-table .activity-sat strong,
.activity-edit-table .activity-sat span { color:#075985; }
.activity-edit-table .activity-sun strong,
.activity-edit-table .activity-sun span { color:#991b1b; }

/* ── 고치기 모달 (출근지 · 근무시각) ────────────────────
   대표님 2026-09-02: "수정은 항상 모달로 처리되어야 함" */
.edit-modal { width:min(360px, calc(100vw - 32px)); }
.edit-modal .modal-body { display:flex; flex-direction:column; gap:8px; }
.edit-label { margin:8px 0 0; font-size:13px; font-weight:700; color:var(--muted); }
.edit-label:first-child { margin-top:0; }
.edit-input { width:100%; box-sizing:border-box; border:1px solid var(--line);
  border-radius:12px; background:#fff; padding:0 12px; font-size:14px; color:var(--text); }
.edit-row { display:flex; gap:8px; align-items:center; }
.edit-row .edit-input { flex:1 1 auto; min-width:0; }
.edit-hint { margin:8px 0 0; font-size:12px; color:var(--muted); line-height:1.6; }
.edit-pane { display:flex; flex-direction:column; gap:8px; }
/* display:flex 가 브라우저의 [hidden] 을 덮는다. 안 적으면 두 갈래가 같이 보인다 */
.edit-pane[hidden], #siteEditNew[hidden] { display:none; }
/* 두 갈래 고르기 */
.seg { display:flex; gap:4px; padding:4px; border-radius:12px; background:var(--brand-surface); }
.seg-btn { flex:1 1 0; min-width:0; border:0; border-radius:8px; background:transparent;
  color:var(--muted); font-size:13px; font-weight:700; cursor:pointer; }
.seg-btn.is-on { background:var(--brand-card); color:var(--brand-primary);
  box-shadow:0 1px 3px rgba(16,24,40,.10); }
/* 주소로 찾은 결과 */
.site-hits { display:flex; flex-direction:column; gap:4px; max-height:180px; overflow-y:auto; }
.site-hit { display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:#fff;
  text-align:left; cursor:pointer; }
.site-hit b { font-size:14px; font-weight:700; color:var(--text); }
.site-hit-addr { margin:0; font-size:12px; color:var(--muted); line-height:1.5; }
.site-hit-none { padding:12px; font-size:13px; color:var(--muted); text-align:center; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px;
  padding:12px 20px 16px; border-top:1px solid var(--line); }

/* 출근부 단추. 목록 아래에 있던 것을 참여자 모달 안으로 옮겼다 (대표님 2026-09-02) */
.actm-docbar { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.actm-docbar .btn { flex:1 1 0; min-width:0; }

/* 제목줄 오른쪽에 단추가 둘일 때 */
.panel-head-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* ── 높이를 네 값으로 모은다 (2026-09-02) ────────────────────
   딱 잘라 박지 않고 최소값으로 준다. 글이 길어지면 늘어나야 한다.

   먼저 테두리를 높이 안에 넣는다. 이게 없으면 min-height 32 에 테두리 2 가
   더해져 34 가 된다 — 34·35·42·44 로 흩어져 있던 것이 전부 이 때문이었다. */
button, .btn, input, select, textarea { box-sizing: border-box; }


/* min-height 는 '최소'라서, 안쪽 여백이 크면 거기에 밀려 커진다.
   여백 12+12 + 글줄 16 + 테두리 2 = 42 처럼. 그래서 위아래 여백을 줄여
   자연 높이를 목표보다 작게 만들고, 높이는 min-height 가 잡게 한다.
   글이 두 줄로 넘어가면 그때는 저절로 늘어난다. */

/* 보통 단추 32 — 31·33·34·35 로 흩어져 있던 것 */
/* 같은 화면 안에서 단추 키가 32·37·40 으로 갈려 정돈돼 보이지 않았다
   (2026-09-17 활동일지 급여). 본문 단추는 하나로 맞춘다. */
.panel .btn, .panel .btn-sm, .modal-body .btn, .modal-body .btn-sm,
.cs-panel .btn, .cs-panel .btn-sm { height: var(--h-md); min-height: var(--h-md); }
.btn, .btn-sm, .call-mode-btn, .cs-page-tab, .pt-main-tab,
.cs-name-input, .cs-tgt-sel, .header-primary-nav-btn {
  min-height: var(--h); line-height: var(--lh-btn);
  padding-top: 4px; padding-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 입력칸·드롭다운·설정 탭 40 — 39·42·44·45 로 흩어져 있던 것 */
.settings-tab, .select-soft, .call-period-select {
  min-height: var(--h-md); line-height: var(--lh-btn);
  padding-top: 8px; padding-bottom: 8px;
}
input:not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--h-md);
  padding-top: 8px; padding-bottom: 8px;
}
/* 드롭다운은 글자를 저절로 가운데 놓는다. 위아래 여백을 주면 오히려 44 로 커진다 */
.field select, select { min-height: var(--h-md); padding-top: 0; padding-bottom: 0; }
/* 찾기 칸 옆 단추는 찾기 칸과 키를 맞춘다 (한 줄이라 40 으로) */
.cs-voice-actions .btn, .cs-voice-actions .btn-sm { min-height: var(--h-md); }
/* 여러 줄 칸도 4의 배수로 (131 -> 132) */
.field textarea, textarea { min-height: 132px; }
/* 목록 안 작은 칩 24 */
.pt-checkin-btn, .pt-phone-call-icon {
  min-height: var(--h-sm); padding-top: 0; padding-bottom: 0;
}
.cs-name-input, .cs-tgt-sel { justify-content: flex-start; text-align: left; }
/* 라디오·체크박스는 브라우저가 그리는 것이라 손대지 않는다 */
input[type="radio"], input[type="checkbox"] { min-height: 0; }
/* 주요 동작 단추 48 */
.care-send-btn { min-height: var(--h-lg); }


/* ══════════════════════════════════════════════════════════
   대표님 통화 반영 (2026-08-31 13:10)

   1) 여백은 4의 배수로.
      "24였다가 23이나 22로 줄이는 게 아니라 20으로."
   2) 콘텐츠 사이 간격은 어디서나 같게.
      재보니 머리말 간격이 8·2·2·2·15 로 제각각이었다.
   3) 설명을 글로 적지 말고 신호로.
      회색 바탕 = 고정값 · 흰 바탕 + 꺾쇠 = 고칠 수 있는 값
   ══════════════════════════════════════════════════════════ */
:root {
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
}

/* 머리말 — 바깥 여백을 네 방향 모두 16px 로 (16 20 13 이었다) */
.activity-record-modal .modal-head {
  padding: var(--sp-4);
  background: #f6f7fb;
  align-items: flex-start;
}
.actm-idline { margin-bottom: var(--sp-4); }

/* 줄 사이 간격은 전부 8px 로 같게 */
.actm-meta { display:flex; flex-direction:column; gap: var(--sp-2); margin:0; }

.actm-metarow {
  display:flex; align-items:center; gap: var(--sp-2);
  width:100%; margin:0;
  /* 위아래·좌우 여백을 같은 값으로 (대표님: "모두 동일한 위치에") */
  padding: var(--sp-2);
  border:1px solid transparent; border-radius: var(--sp-2);
  font:inherit; text-align:left;
}
/* 고정값 — 회색 바탕. 누를 곳이 아니다. */
.actm-metarow.is-fixed { background:#f3f4f6; cursor:default; }
/* 고칠 수 있는 값 — 흰 바탕에 테두리. 사람들이 아는 약속이다. */
.actm-metarow.is-edit {
  background:#fff; border-color:var(--line); cursor:pointer;
}
.actm-metarow.is-edit:hover { border-color:var(--brand-ink-muted); }

.actm-metalabel {
  flex:0 0 56px; font-size:11px; color:var(--muted); line-height:1.4;
}
.actm-metavalue {
  flex:1 1 auto; min-width:0;
  font-size:12px; font-weight:700; color:var(--text);
  line-height:1.4; word-break:keep-all;
}
.actm-metavalue.is-empty { font-weight:600; color:var(--muted); }
/* 보조설명은 회색으로 작게 (대표님: 강조는 검정, 보조설명은 회색) */
.actm-metasub {
  display:block; margin-top:0px;
  font-size:11px; font-weight:600; font-style:normal; color:var(--muted);
}
/* 오른쪽 꺾쇠 — '눌러보세요' 라는 글을 대신한다 */
.actm-chev { flex:0 0 auto; color:var(--muted); font-size:16px; line-height:1; }

/* 칩 묶음과 설정 단추도 같은 간격으로.
   #activityRecordDesc 는 <p> 라 브라우저가 붙이는 여백이 있다.
   그것 때문에 16 을 줘도 21 로 벌어졌다. 0 으로 눕히고 다시 준다. */
#activityRecordDesc { margin:0; padding:0; }
.actm-summary { margin-top: var(--sp-4); gap: var(--sp-2); }
/* 단추 안 글자도 위아래·좌우가 4의 배수여야 한다 (7px 14px 이었다) */
.actm-setting { margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-4); }


/* ══════════════════════════════════════════════════════════
   무엇에 쓰는 색인지 이름을 붙인다 (2026-08-31)

   토스가 한 방식 — 원본 색(Primitive)과 쓰임새(Semantic)를 나눈다.
       "Target(fill, text, border) + Role + Variant" 구조

   대표님이 말한 약속을 여기에 못박는다. 그래야 다음 사람이
   '어느 회색이었더라' 하고 헤매지 않는다.
       "강조하는 건 검정색, 보조설명은 회색"
       "회색 바탕에 글자면 고정값, 하얀색 바탕이면 수정 가능한 값"
   ══════════════════════════════════════════════════════════ */
:root {
  /* 글자 */
  --text-strong: var(--text);      /* 강조 — 검정 */
  --text-sub:    var(--muted);     /* 보조설명 — 회색. 이 회색 하나만 쓴다 */

  /* 바탕이 곧 신호다 */
  --fill-fixed:  #f3f4f6;          /* 고정값 — 못 고친다 */
  --fill-edit:   var(--solid);     /* 고칠 수 있는 값 — 흰 바탕 */
  --border-edit: var(--line);      /* 고칠 수 있는 값의 테두리 */
  --chev:        var(--brand-ink-muted);          /* 더 있다는 꺾쇠 */
}

/* 신호를 쓰는 곳은 값을 직접 적지 않고 이름을 부른다 */
.actm-metarow.is-fixed { background: var(--fill-fixed); }
.actm-metarow.is-edit  { background: var(--fill-edit); border-color: var(--border-edit); }
.actm-metavalue        { color: var(--text-strong); }
.actm-metalabel,
.actm-metasub          { color: var(--text-sub); }
.actm-chev             { color: var(--chev); }


/* 출근 링크 단추 (2026-08-31, 대표님 통화)
   전화 아이콘과 같은 크기·모양으로 맞춘다. 같은 자리의 같은 종류다. */
.pt-link-btn {
  flex:0 0 auto; margin-left:auto; margin-right:8px;
  width:28px; height:28px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:8px;
  background:var(--solid); color:var(--muted); cursor:pointer;
}
.pt-link-btn svg { width:15px; height:15px; }
.pt-link-btn:hover { color:var(--primary); border-color:var(--primary); }
.pt-link-btn:disabled { opacity:.5; cursor:default; }


/* 출근 위치 칸 (2026-08-31, 대표님 통화)
   전화번호 칸의 [번호][전화걸기] 와 같은 결. 새 모양을 만들지 않는다. */
.pt-checkin { display: inline-flex; gap: var(--sp-2); align-items: center; }
.pt-checkin-btn {
  padding: 0 var(--sp-3); min-height: var(--h-sm);
  border: 1px solid var(--primary); border-radius: var(--sp-2);
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pt-checkin-btn.is-ghost {
  background: var(--fill-edit); color: var(--text-sub); border-color: var(--border-edit);
}
.pt-checkin-btn:disabled { opacity: .5; cursor: default; }


/* 출근지 만들기 (2026-08-31)
   허용범위 단추(.ws-seg-btn)와 같은 크기·모양. 새 모양을 만들지 않는다. */
.ws-sitenew {
  flex: 0 0 auto; margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); min-height: var(--h-sm);
  border: 1px solid var(--border-edit); border-radius: var(--sp-2);
  background: var(--fill-edit); color: var(--text-sub);
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ws-sitenew:hover { border-color: var(--primary); color: var(--primary); }
.ws-sitenew:disabled { opacity: .5; cursor: default; }


/* ── 머리띠 겹침 (2026-08-31) ─────────────────────────────
   .header-nav-group 이 가운데 절대배치인데 기관 이름은 안 줄어들어(flex-shrink:0)
   그대로 파고들었다. 이름이 가운데 묶음에 닿지 못하게 **자리를 못 박는다.**
   가운데 묶음의 절반이 약 78px 이므로 84px 을 비워 둔다. */
.header-brand-text {
  flex: 0 1 auto; min-width: 0;
  max-width: calc(50% - 84px);
}
/* 시니어클럽이 아닌 기관 — 네모 없이 한 줄로. 이름을 자르지 않는다. */
.header-brand-text.is-one { justify-content: center; }
.header-brand-one {
  font-size: 14px; font-weight: 700; line-height: 1.2;
  color: var(--text); word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 지역 이름이 길어도 네모가 가운데로 밀고 들어가지 않게 */
.header-brand-main { max-width: 100%; overflow: hidden; }

@media (max-width: 420px) {
  /* 좁을수록 가운데 묶음이 크게 차지한다. 더 비워 둔다. */
  .header-brand-text { max-width: calc(50% - 78px); }
  .header-brand-one { font-size: 13px; }
  .header-brand-main { font-size: 14px; }
  .header-brand-sub { font-size: 12px; }
}


/* ── 줄 맞춤·높이 통일 (2026-08-31, 현우 지적) ─────────────────
   "근무정보설정만 왜 줄이 안 맞아?" — 가운데 정렬한 줄에 위 여백을 줘서였다.
   여백으로 자리를 잡지 않는다. 높이는 토큰 두 개로만 정한다.
       --h    34px  머리말 줄의 칩·작은 단추
       --h-lg 44px  설정 판에서 고르고 입력하는 칸               */

/* 머리말 줄 — 연차·경조사·결근·'?'·근무정보설정이 모두 같은 높이, 같은 가운데선 */
.actm-summary { align-items: center; }
.actm-chip,
.actm-help,
.actm-setting {
  box-sizing: border-box;
  min-height: var(--h);
  margin-top: 0;                 /* 8px 어긋나게 만들던 범인 */
  align-items: center;
}
.actm-chip   { display: inline-flex; padding: 0 var(--sp-3); }
.actm-help   { display: inline-flex; justify-content: center;
               width: var(--h); height: var(--h); padding: 0; }
.actm-setting { display: inline-flex; justify-content: center;
                padding: 0 var(--sp-4); }
.actm-stepper { min-height: var(--h); box-sizing: border-box; }

/* 설정 판 — 고르는 칸과 단추가 같은 높이, 같은 가운데선 */
.worksetting select.ws-select,
.worksetting .ws-sitenew,
.worksetting .ws-seg,
.worksetting .ws-seg-btn,
.worksetting .ws-actions .btn {
  box-sizing: border-box;
  min-height: var(--h-lg);
  margin-top: 0;                 /* 4px 어긋나게 만들던 범인 */
}
/* 묶음은 테두리를 제 몸에 두른다. 안쪽을 2px 줄여야 겉이 44 가 된다. */
.worksetting .ws-seg-btn { display: inline-flex; align-items: center;
                           justify-content: center;
                           min-height: calc(var(--h-lg) - 2px); }
.worksetting .ws-actions .btn { display: inline-flex; align-items: center;
                                justify-content: center; }
.ws-sitenew {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;               /* 12px 혼자 작았다 */
  padding: 0 var(--sp-4);
}

/* 출근지 칸이 줄을 다 쓰게 한다.
   width:100% 를 줘도 같은 규칙의 flex-basis(110px) 가 이겨서 안 늘어났다. */
.ws-select.is-wide { flex: 1 1 auto; width: auto; min-width: 0; }

/* 줄 사이 간격도 4의 배수로 (10px 이었다) */
.ws-row { margin-bottom: var(--sp-3); }
.ws-now { margin: var(--sp-3) 0; }


/* 출근지 찾기 (2026-09-01) */
/* 주소·지명으로 찾아 고른다. 고른 곳의 좌표가 그대로 들어간다. */
.site-search-modal { width: min(520px, 100%); }
.site-search-row { display: flex; gap: var(--sp-2, 8px); align-items: center; }
.site-search-row .btn { flex: 0 0 auto; }

#siteSearchList { margin-top: var(--sp-3, 12px); }
#siteSearchList:empty { margin-top: 0; }

/* 고를 수 있는 값이라 흰 바탕 + 테두리 + 꺾쇠 (대표님이 말한 신호) */
.site-hit {
  display: flex; align-items: center; gap: var(--sp-2, 8px);
  width: 100%; margin: 0 0 var(--sp-2, 8px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; text-align: left; cursor: pointer; font: inherit;
}
.site-hit:hover { border-color: var(--brand-ink-muted); }
.site-hit-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700;
  color: var(--text); word-break: keep-all; }
.site-hit-addr { margin: 0; font-size: 11px; font-weight:600; color: var(--muted);
  word-break: keep-all; }
.site-hit .site-hit-addr { flex: 0 1 auto; }

.site-picked {
  margin-top: var(--sp-3, 12px); padding: var(--sp-3, 12px);
  border: 1px solid var(--line); border-radius: 12px; background: #f6f7fb;
}
.site-picked .ws-label { display: block; margin-bottom: var(--sp-1, 4px); }
.site-picked .site-hit-addr { margin-top: var(--sp-1, 4px); }
/* 저장이 제일 오른쪽 (대표님 기준) */
.site-picked-foot {
  display: flex; justify-content: flex-end; gap: var(--sp-2, 8px);
  margin-top: var(--sp-3, 12px);
}
.ws-hint { margin: 0; font-size: 12px; color: var(--muted); }
#siteSearchHere { margin-top: var(--sp-4, 16px); }

/* 저장된 서명 (2026-09-01) — 한 번 그리면 다음부터 단추 하나로 */
.saved-sign {
  margin: 0 0 var(--sp-4, 16px); padding: var(--sp-3, 12px);
  border: 1px solid var(--line); border-radius: 12px; background: #f6f7fb;
  text-align: center;
}
.saved-sign-head { font-size: 11px; font-weight: 700; color: var(--muted);
  margin-bottom: var(--sp-2, 8px); }
/* 서명은 배경이 비어 있어야 문서 위에 글자만 얹힌다 (대표님) */
#savedSignImg { display: block; margin: 0 auto var(--sp-3, 12px);
  max-width: 100%; max-height: 80px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; }
.saved-sign-use { width: 100%; }
.saved-sign-note { margin: var(--sp-2, 8px) 0 0; font-size: 11px; color: var(--muted); }


/* A4 날짜 칸 — 숫자와 요일을 폭 고정으로 나눠 담는다 (2026-09-01).
   토·일을 색으로만 나누면 흑백 인쇄에서 주말이 사라진다. */
.activity-doc-table td.day { white-space: nowrap; text-align: center; }
.activity-doc-table td.day .d { display: inline-block; min-width: 1.4em; text-align: right; }
.activity-doc-table td.day .w { display: inline-block; min-width: 1.1em; text-align: left;
  font-size: .78em; }

/* 안내서의 단계 설명은 글이지 코드가 아니다 (2026-09-02).
   pre 라서 가로로 스크롤되어 폰에서 읽기 불편했다. 줄바꿈되게 한다.
   줄 나눔은 그대로 살리되(pre-wrap), 낱말 중간에서 끊지 않는다(keep-all). */
.manual-doc .m-pre { white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }

/* 안내서에서 찾기 (2026-09-01 대표님 지시) — 여백은 4의 배수만 쓴다 */
.m-search { margin: 0 0 16px; }
.m-search-row { display: flex; gap: 8px; align-items: center; }
.m-search-input {
  flex: 1 1 auto; min-width: 0; height: 40px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font: inherit; font-size: 14px; color: var(--text);
}
.m-search-input:focus { outline: none; border-color: var(--brand-ink-muted); }
.m-search-clear {
  flex: 0 0 auto; height: 40px; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 8px; background: #f3f4f6;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.m-search-count { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.m-search-count.is-none { color: #b45309; }
/* 찾은 낱말. 흑백으로 뽑아도 보이게 밑줄을 같이 준다 */
mark.m-hit { background: #fef08a; color: inherit; border-radius: 2px;
  padding: 0 0px; text-decoration: underline; text-underline-offset: 2px; }
@media print { .m-search { display: none; } mark.m-hit { background: none; } }

/* 활동내역 모달의 출근 링크 단추 (2026-09-02).
   담당자가 활동을 보다가 "링크 다시 보내주세요" 전화를 받는다.
   그 자리에 있어야 한다 — 연락처로 돌아가 다시 찾게 하면 안 된다. */
.actm-linkrow { display:flex; gap:8px; margin-top:8px; }
.actm-linkrow .pt-checkin-btn[hidden] { display:none; }


/* ── 활동내역 모달 위에 겹쳐 뜨는 창들 (2026-09-02) ─────────────
   모든 창이 z-index:100 으로 같은 층이라, 문서에 나중에 적힌
   활동내역 모달이 서명 창을 덮었다. 눌러도 뒤에서만 열렸다. */
#signModal, #siteEditModal, #timeEditModal,
#leaveDocModal, #leaveRequestModal, #approvalBoxModal { z-index:120; }

/* ── 휴대폰에서 A4 미리보기 (2026-09-02) ────────────────────────
   용지 폭만 줄고 안의 표는 안 줄어 잘렸다. 폭을 건드리지 않고
   용지째 축소한다 (비율이 안 깨진다). 배율은 화면 폭에 맞춰
   script.js 가 --a4-scale 로 넣어준다. */
/* 배율 계산이 실패해도 **잘리지는 않게** 한다. 옆으로 밀어 볼 수 있다.
   overflow:hidden 이면 넘친 부분이 그냥 사라진다 (2026-09-03). */
.activity-preview-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* (위 .activity-a4-sheet 에서 폭·축소를 함께 다룬다) */


/* ── 출근부 전체화면 (휴대폰) 2026-09-03 ─────────────────────────
   A4 는 210mm 종이용이라 휴대폰 폭의 두 배다. 욱여넣지 않고 따로 연다. */
.a4-viewer { position:fixed; inset:0; z-index:400; background:#f1f5f9;
  display:flex; flex-direction:column; }
.a4-viewer[hidden] { display:none !important; }
.a4-viewer-bar { flex:0 0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:10px 14px;
  background:#fff; border-bottom:1px solid var(--line); }
.a4-viewer-title { font-size:16px; font-weight:700; }
.a4-viewer-close { height:36px; padding:0 18px; border:0; border-radius:10px;
  background:#111827; color:#fff; font-size:14px; font-weight:700; }
/* 손가락으로 키워 볼 수 있게 둔다. 글씨가 작으면 확대해서 본다. */
.a4-viewer-body { flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch;
  padding:12px; }
.a4-viewer-body .activity-a4-sheet {
  width:794px; transform-origin:top left; margin:0;
  transform:scale(var(--a4-scale, 1)); }

/* 비우기 단추 — 되돌리기 어려운 일이라 눈에 띄게 (2026-09-03) */
.activity-row-btn.is-danger { background:#fef2f2; border-color:#fca5a5; color:#b91c1c; }


/* 새로 고치는 중 — 내용은 그대로 읽히게 두고 옅게만 알린다 (2026-09-03) */
.is-refreshing { opacity: .55; transition: opacity .15s ease; }


/* 처음 들어올 때 새하얀 화면을 없앤다 (2026-09-03).
   auth-boot 은 로그인 화면이 깜빡이는 것을 막으려고 화면을 감춰 두는데,
   script.js(123KB)가 다 와야 떨어진다. 회선이 느리면 그동안 아무것도 안 보인다.
   감추는 것은 그대로 두고, 그동안 "되고 있다"는 표시만 띄운다. */
body.auth-boot .global-loading-overlay { display:flex; }
body.auth-boot { background:#f6f7fb; }






















/* ── 안내서 찾기·목차 (2026-09-04) ─────────────────────────────
   찾기를 '본문 걸러내기' 에서 '결과 목록' 으로 바꿨다.
   문서 사이트들이 쓰는 방식(Algolia DocSearch)을 따랐다.
   본문을 안 건드리므로 목차가 살아 있고, 그래서 목차가 따라다닐 수 있다. */

/* 안내서는 **원래부터 2단 격자**다 — 왼쪽 236px 이 목차, 오른쪽이 본문.
   목차는 position:sticky 라 이미 따라온다. 내가 fixed 로 띄웠더니
   격자에서 빠져 그 자리를 찾는 칸이 차지해 좌우가 뒤집혔다.
   fixed 는 걷어내고, 찾는 칸을 **목차 위 같은 칸**에 둔다. */
.manual-wrap { grid-template-rows: auto 1fr; }
.manual-wrap > .m-search { grid-column: 1; grid-row: 1; }
.manual-wrap > .m-toc { grid-column: 1; grid-row: 2; }
.manual-wrap > .manual-doc { grid-column: 2; grid-row: 1 / span 2; }

.m-search { position: relative; }

/* 결과 칸은 왼쪽 칸(236px)보다 넓어야 문장이 읽힌다. 본문 위로 겹친다. */
.m-search-panel {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20;
  width: 380px; max-width: 76vw;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  overflow: hidden;
}
.m-search-list { margin: 0; padding: 4px; list-style: none; max-height: 340px; overflow-y: auto; }
.m-search-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.m-search-item.is-sel { background: #eff6ff; }
.m-search-where { font-size: 12px; font-weight: 700; color: #2563eb; }
.m-search-snip { font-size: 13px; color: #374151; line-height: 1.5; }
.m-search-panel .m-search-count {
  margin: 0; padding: 8px 16px; border-top: 1px solid #f3f4f6; background: #fafafa;
}

/* 찾아서 간 자리를 잠깐 표시한다 — 어디로 왔는지 알게 */
.m-sec.is-landed { animation: m-landed 1.6s ease-out; border-radius: 8px; }
@keyframes m-landed {
  0%, 40% { background: #fef9c3; }
  100% { background: transparent; }
}

/* 지금 보고 있는 항목 */
.m-toc a.is-current, .p-toc a.is-current {
  background: #eff6ff; color: #1d4ed8; font-weight: 700;
}

/* 좁은 화면에서는 한 줄로 쌓인다 (원래 규칙이 격자를 1단으로 바꾼다) */
@media (max-width: 900px) {
  .manual-wrap { grid-template-rows: none; }
  .manual-wrap > .m-search,
  .manual-wrap > .m-toc,
  .manual-wrap > .manual-doc { grid-column: 1; grid-row: auto; }
  .m-search-panel { width: auto; right: 0; max-width: none; }
}

/* 활동일지 A4 인쇄 규칙(body * { visibility:hidden })이 style.css 를 함께 쓰는
   설명서 인쇄까지 덮어 백지 17장으로 나오고 있었다 (2026-09-04 확인).
   설명서 쪽만 되살린다. .manual-standalone 은 주소로 직접 연 설명서에만
   있으므로 앱의 활동일지 인쇄는 그대로다. */
@media print {
  .manual-standalone, .manual-standalone * { visibility: visible !important; }
  .m-search, .m-search-panel { display: none !important; }
}

/* 설명서 표에서 글자가 잘리고 있었다 (2026-09-04 확인, 넓은 화면에서 5칸).
   앱 표 스타일(td { text-overflow: ellipsis })이 설명서 표에도 걸린 탓이다.
   화면 기준이 '말줄임 금지' 이므로 설명서 표만 풀어 준다.
   .manual-wrap 안으로 한정해서 앱의 다른 표는 그대로 둔다. */
.manual-wrap td, .manual-wrap th {
  white-space: normal !important;
  word-break: keep-all;            /* 한글이 낱말 가운데서 쪼개지지 않게 */
  /* overflow-wrap:anywhere 가 걸려 있어 칸이 **한 글자 폭**까지 줄어든다.
     그래서 첫 칸이 40px 이 되고 세로로 한 자씩 쪼개졌다.
     break-word 는 필요할 때만 끊고 칸 폭은 낱말 기준으로 잡는다. */
  overflow-wrap: break-word !important;
  text-overflow: clip !important;
  overflow: visible !important;
}
/* 표가 눌리는 뿌리는 담는 칸이 좁아서다.
   820 - 여백 32 - 목차 236 - 사이 16 = 본문 536px.
   넓은 화면에서는 자리가 남으므로 담는 칸을 넓힌다.
   인쇄는 1024px 로 그리므로 이 규칙이 안 걸려 쪽수는 그대로다. */
@media (min-width: 1200px) {
  body > .manual-standalone { max-width: 1180px; }   /* manual.html 안 style 이 뒤에 있어 이겨야 한다 */
}
@media (min-width: 1600px) {
  body > .manual-standalone { max-width: 1360px; }
}

/* 칸이 여전히 낱말 폭(53px)까지 눌려 글이 세로로 쌓인다.
   넓은 화면에서는 자리가 있으니 칸에 최소 폭을 준다.
   휴대폰(900px 이하)에서는 안 걸어 표가 유연하게 접히도록 둔다. */
@media (min-width: 901px) {
  .manual-wrap td, .manual-wrap th { min-width: 6em; }
}

/* 한두 글자가 다음 줄로 넘어가지 않게 (실장님이 늘 말씀하시는 것).
   text-wrap: pretty 는 마지막 줄에 낱말 하나만 덩그러니 남는 것을 막는다.
   제목은 balance 로 줄 길이를 고르게 나눈다.
   keep-all 은 한글이 낱말 가운데서 끊기지 않게 한다. */
.manual-doc p, .manual-doc li, .manual-doc td, .manual-doc th,
.manual-doc blockquote, .manual-doc dd {
  text-wrap: pretty;
  word-break: keep-all;
}
.manual-doc h1, .manual-doc h2, .manual-doc h3, .manual-doc h4 {
  text-wrap: balance;
  word-break: keep-all;
}

/* 표마다 칸 너비가 맞아야 글이 세로로 쌓이지 않는다 (2026-09-04).
   자동 배분에 맡기면 짧은 값이 든 칸이 넓게 벌어지고 정작 긴 글이 눌린다. */

/* 지정한 너비를 지키려면 fixed 여야 한다. auto 는 브라우저가 알아서
   나누느라 지정 값을 무시한다 (그래서 처음엔 안 먹었다). */
.manual-wrap .m-t-menu, .manual-wrap .m-t-days { table-layout: fixed; }
.manual-wrap .m-t-menu td, .manual-wrap .m-t-menu th,
.manual-wrap .m-t-days td, .manual-wrap .m-t-days th { min-width: 0; }

/* 메뉴 표 — '사람 아이콘 → 관리자 설정' 이 3줄로 쌓였다. 2줄로. */
.manual-wrap .m-t-menu th:first-child,
.manual-wrap .m-t-menu td:first-child { width: 152px; }
.manual-wrap .m-t-menu th:nth-child(2),
.manual-wrap .m-t-menu td:nth-child(2) { width: 120px; }

/* 경조사 표 — '7일' 한 칸이 절반을 차지하고 정작 긴 사유가 눌렸다. */
.manual-wrap .m-t-days th:last-child,
.manual-wrap .m-t-days td:last-child {
  width: 84px; white-space: nowrap; text-align: right;
}

/* 인쇄에서 쪽이 헐렁했던 이유 (2026-09-04 확인).
   .m-tablewrap 은 옆으로 넘기려고 overflow-x: auto 인데,
   **넘침 상자는 쪽을 못 넘는다.** 표가 남은 자리에 안 들어가면
   통째로 다음 장으로 밀려 그 자리가 빈다 (2·4·5·6쪽이 그랬다).
   종이에는 넘길 일이 없으니 인쇄할 때만 푼다. */
@media print {
  .manual-doc .m-tablewrap { overflow-x: visible !important; }
  .manual-doc .m-table { break-inside: auto; page-break-inside: auto; }
  .manual-doc tr { break-inside: avoid; page-break-inside: avoid; }
}

/* 인쇄에서 표가 헐렁해 쪽이 늘어난다 (2026-09-04).
   표는 쪼개지고 있는데 칸 여백이 커서 한 쪽에 담기는 글이 적다.
   종이에서는 촘촘하게 — 화면은 그대로 둔다. */
@media print {
  .manual-doc .m-table td, .manual-doc .m-table th { padding: 3px 6px; font-size: 10.5px; line-height: 1.35; }
  .manual-doc .m-tablewrap { margin: 4px 0 8px; }
  .manual-doc .m-quote { margin: 6px 0; padding: 8px; }
  .manual-doc h3, .manual-doc h4 { margin-top: 10px; margin-bottom: 4px; }
  .manual-doc p, .manual-doc li { margin-top: 0; margin-bottom: 4px; }
}

/* 인쇄가 헐렁하고 쪽이 늘어난 진짜 원인 (2026-09-04 확인).
   style.css 의 좁은 화면 규칙이 표를 카드로 쌓는다 —
   `.m-table, tbody, tr, td { display: block }` + 칸 이름을 위에 붙임.
   휴대폰에서는 좋은 방식인데 **A4 인쇄 폭(794px)이 그 규칙에 걸려**
   한 줄이 152px 카드가 됐다. 종이는 넓으니 표 그대로가 낫다. */
@media print {
  .manual-doc .m-table { display: table !important; width: 100% !important; }
  .manual-doc .m-table thead { display: table-header-group !important; }
  .manual-doc .m-table tbody { display: table-row-group !important; }
  .manual-doc .m-table tr { display: table-row !important; }
  .manual-doc .m-table th,
  .manual-doc .m-table td { display: table-cell !important; width: auto; }
  .manual-doc .m-table td[data-label]::before { display: none !important; }
  /* 머리글은 쪽마다 다시 나온다 (표가 여러 쪽에 걸칠 때 무슨 칸인지 알게) */
  .manual-doc .m-table thead th { background: #f3f4f6; }
}

/* 알림전화·알림문자 화면이 왼쪽으로 쏠려 오른쪽이 크게 비었다 (2026-09-05).
   본문 틀(.main)은 1440px 가운데인데, 그 안의 폼(.campaign-form-wrap)과
   탭(.cs-page-tabs)만 780px 로 왼쪽에 붙박여 있었다.
   옆에 미리보기 같은 것이 오는 짜임도 아니라 그냥 빈 자리였다.
   폭은 그대로 두고 가운데로만 옮긴다 — 폼을 늘리면 이름과 입력칸이 멀어진다. */
.campaign-form-wrap, .cs-page-tabs { margin-left: auto; margin-right: auto; }

/* ── 목차는 격자 안에서 따라오게 (2026-09-05) ─────────────────
   고정(fixed)으로 띄웠더니 **본문을 덮었다.** 본문 틀이 1440px 가운데라
   화면이 1600px 쯤이면 옆에 80px 밖에 안 남는데 목차는 244px 이다.
   2000px 이 넘어야 들어간다. 폰 설명서는 본문이 760px 이라 자리가 넉넉했다.

   그래서 격자 안에 두고 sticky 로 따라오게 한다 — 덮지 않는다.
   앞서 '안 따라온다' 던 진짜 이유는 앱이 목차 스크립트를 안 싣고 있어서였다
   (그래서 색 표시도 없었다). 그건 따로 고쳤다. */
@media (min-width: 901px) {
  .manual-wrap { grid-template-columns: 236px minmax(0, 1fr); }
  .manual-wrap > .m-search { grid-column: 1; grid-row: 1; }
  .manual-wrap > .m-toc {
    grid-column: 1; grid-row: 2;
    position: sticky; top: 14px;
    max-height: calc(100vh - 28px); overflow-y: auto;
  }
  .manual-wrap > .manual-doc { grid-column: 2; grid-row: 1 / span 2; }
}

/* 인쇄할 때 쪽마다 위에 뜨는 시각·제목은 **브라우저가** 붙이는 것이다.
   여백을 지정하면 브라우저가 그것을 넣을 자리를 안 만들어 사라진다.
   폰 설명서에는 이미 @page 가 있어서 안 나왔다 (2026-09-05 확인). */
@page { size: A4; margin: 8mm; }

/* 캠페인 **결과·예약** 목록도 가운데로. 생성 화면만 고쳐 두었다. */
.cs-hist-list, .cs-saved-list,
#bcHistoryList, #bcReserveList, #msgHistoryList, #msgReserveList {
  max-width: 780px; margin-left: auto; margin-right: auto;
}

/* ── A4 미리보기 (2026-09-05) ─────────────────────────────────
   종이는 794px(210mm) 고정인데 화면이 그보다 좁으면 안쪽에 가로 스크롤이
   생기고, 바깥 화면 스크롤과 합쳐 **스크롤이 두 개**가 됐다.
   좌우 여백도 스크롤 때문에 어긋나 보였다.

   폭에 맞춰 줄여 통째로 보여준다. 줄이는 값은 자바스크립트가 정한다
   (CSS 는 길이를 길이로 나눌 수 없다). 전체화면 보기(.a4-viewer)가
   이미 쓰던 방식과 같다. */
.activity-preview-wrap { overflow-x: hidden; }
.activity-preview-wrap > .activity-a4-sheet {
  transform-origin: top left;   /* 가운데 기준이면 좁은 화면에서 오른쪽으로 밀린다 */
  transform: scale(var(--a4-fit, 1));
}

/* 캠페인 **결과·예약** 탭이 아직 왼쪽이었다 (2026-09-05).
   탭 껍데기에 style="max-width:780px" 가 직접 박혀 있는데 가운데 정렬이 없다.
   박힌 폭은 못 이기지만 여백은 CSS 로 줄 수 있다. */
#bcTabReserve, #bcTabHistory, #msgTabReserve, #msgTabHistory {
  margin-left: auto; margin-right: auto;
}


/* 알림함 — 종은 프로필과 같은 크기·같은 모서리. 나란히 있어야 한 벌로 보인다 */
.header-bell-btn {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border-radius:10px; cursor:pointer; transition:.15s ease;
  border:1px solid rgba(15,23,42,.10); background:rgba(37,99,235,.04);
  user-select:none; flex-shrink:0;
}
.header-bell-btn:hover { background:rgba(37,99,235,.08); }
.header-bell-badge {
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:#ef4444; color:#fff;
  font-size:11px; font-weight:700; line-height:17px; text-align:center;
  box-shadow:0 0 0 2px #fff;
}
.notify-panel {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  width:min(340px, calc(100vw - 24px));
  background:rgba(255,255,255,.99); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 16px 48px rgba(15,23,42,.14); z-index:200; overflow:hidden;
  cursor:default; text-align:left;
}
.header-bell-btn.open .notify-panel { display:block; }
.notify-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 13px 9px; font-size:13.5px; font-weight:700; color:var(--text);
}
.notify-readall {
  background:transparent; border:0; padding:3px 5px; border-radius:7px;
  font-size:12px; font-weight:700; color:var(--primary); cursor:pointer;
}
.notify-readall:hover { background:rgba(37,99,235,.08); }

/* 머리 줄 — '못 걸어드린 전화 N건'. 눌러서 부재중 목록으로 */
.notify-open {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 13px; margin:0 0 2px; cursor:pointer;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:12.5px; font-weight:700; color:var(--muted); background:#f7f8fa;
}
.notify-open.has { color:var(--brand-danger); background:rgba(239,68,68,.07); }
.notify-open strong { font-weight:700; }
.notify-open:hover { background:rgba(37,99,235,.07); }
.notify-open-go { font-size:16px; line-height:1; opacity:.55; }

/* 알림 한 줄 — 두 줄짜리. 세 줄이면 한 화면에 여섯 개밖에 안 들어간다 */
.notify-list { max-height:min(460px, 62vh); overflow-y:auto; overscroll-behavior:contain; }
.notify-item {
  display:flex; align-items:flex-start; gap:8px;
  width:100%; text-align:left; background:transparent; border:0;
  border-bottom:1px solid var(--line); padding:10px 13px; cursor:pointer;
}
.notify-item:last-child { border-bottom:0; }
.notify-item:hover { background:rgba(37,99,235,.05); }
.notify-dot {
  width:7px; height:7px; margin-top:5px; border-radius:50%;
  background:transparent; flex-shrink:0;
}
.notify-item.unread .notify-dot { background:var(--primary); }
.notify-main { flex:1; min-width:0; }
.notify-top { display:flex; align-items:baseline; gap:8px; }
.notify-title {
  flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--text);
  line-height:1.35; word-break:keep-all;
}
.notify-item.unread .notify-title { font-weight:700; }
.notify-when { font-size:11px; color:var(--muted); flex-shrink:0; }
.notify-body {
  display:block; font-size:12.5px; color:var(--text); opacity:.72;
  margin-top:2px; line-height:1.4; word-break:keep-all;
}
.notify-empty { padding:26px 13px; text-align:center; font-size:13px; color:var(--muted); }

@media (max-width:520px) {
  .header-bell-btn { width:34px; height:34px; border-radius:9px; }
  /* 좁은 화면에서는 종이 아니라 **화면**을 기준으로. 종 기준으로 두면
     패널이 왼쪽으로 삐져나가 글자가 잘린다 (갤럭시 S24 360px 에서 확인). */
  .notify-panel {
    position:fixed; top:58px; left:8px; right:8px; width:auto;
    max-width:none; border-radius:16px;
  }
  .notify-list { max-height:min(70vh, 520px); }
}

/* 홈 — 안 되건 전화 수. 0이면 회색, 있으면 빨강. 눈에 걸려야 챙긴다 */
.home-missed-count { font-size:13px; font-weight:700; color:var(--muted); margin-left:6px; }
.home-missed-count.has { color:#ef4444; }

/* 알림함 머리의 '아직 안 되건 전화 N건'. 눌러서 부재중 목록으로 */
.notify-open {
  padding:8px 12px; border-bottom:1px solid var(--line); cursor:pointer;
  font-size:12.5px; font-weight:700; color:var(--muted); background:#fafbfc;
}
.notify-open.has { color:#ef4444; background:rgba(239,68,68,.06); }
.notify-open strong { font-weight:700; }
.notify-open:hover { background:rgba(37,99,235,.07); }

/* 알림을 눌러서 들어온 그 전화 — 잠깐 짚어 준다 */
.call-card-pointed {
  animation: callPoint 1.1s ease-in-out 3;
  border-color: var(--primary) !important;
}
@keyframes callPoint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
  50%      { box-shadow: 0 0 0 4px rgba(37,99,235,.28); }
}

/* 급여명세서 (서식 4-8) · 임금지급대장 — 2026-09-09 */
.payslip-modal { width:min(980px,100%); }
.payslip-preview-modal { width:min(780px,100%); }
.payslip-meta { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:#444; margin-bottom:10px; }
.payslip-warn { color:#b45309; font-weight:600; }
.payslip-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.payslip-table { width:100%; border-collapse:collapse; font-size:13px; }
.payslip-table th, .payslip-table td { padding:6px 8px; border-bottom:1px solid #e5e7eb; text-align:left; vertical-align:top; white-space:nowrap; }
.payslip-table th { background:#f3f4f6; font-weight:600; }
.payslip-table td.n, .payslip-table th.n { text-align:right; font-variant-numeric:tabular-nums; }
.payslip-note { display:block; color:#b45309; white-space:normal; max-width:240px; }
.payslip-sent { display:block; color:#15803d; }
.payslip-sent.bad { color:#b91c1c; }
.payslip-img { width:100%; height:auto; border:1px solid #ddd; border-radius:8px; display:block; }
.activity-payslip-field { align-self:flex-end; }

/* 급여명세서 공제 요율 상자 (2026-09-09) */
.payroll-rate-box { margin-top:16px; padding:14px 16px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.payroll-rate-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px 14px; margin-top:10px; }
.payroll-rate-grid .field small { display:block; margin-top:3px; }

/* 출퇴근 규칙 교체 (2026-09-09): 찍은 시각 두 줄 · 재량 인정 표시 */
.ac-raw { display:block; font-size:11px; color:var(--brand-ink-muted); font-weight:600; }
.ac-appr { display:inline-block; font-size:11px; padding:1px 6px; border-radius:8px; background:#fef3c7; color:#92400e; margin-left:4px; }
.ac-appr-edit { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#374151; }
.ac-appr-edit input { width:64px; }
.ac-appr.is-disapproved { background: var(--brand-primary-tint); color: var(--brand-primary-deep); }
.ac-disapp-edit input { width: auto; }
.staff-pw-reset { margin-left: auto; margin-right: 8px; }
.org-master-note { margin: 4px 0 0; font-size: 12px; color: var(--brand-ink-muted); }

/* 연차 시간 표기 (2026-09-09) */
.actm-hours { margin-left: 4px; font-size: 11px; color: var(--brand-ink-muted); font-weight:600; }

/* 근무 요일 · 스케줄 변경 (2026-09-09) */
.wd-row { display:flex; flex-wrap:wrap; gap:6px; }
/* 22px 는 손가락으로 누르기엔 작다. 글자와 테두리가 붙어 겹쳐 보이기도 했다 (2026-09-17).
   테두리를 빼고 바탕으로 가르며, 누를 수 있는 키를 준다. */
.wd-row label { display:inline-flex; align-items:center; justify-content:center; gap:4px;
  font-size:13px; font-weight:700; padding:0 12px; min-height:36px; border:0;
  border-radius:var(--radius-md); background:var(--brand-surface);
  color:var(--muted); cursor:pointer; }
.wd-row label:has(input:checked) { background:var(--brand-primary-tint); color:var(--brand-primary-deep); }
.wd-row input { margin:0; }
.sched-box { margin:8px 0 4px; }
.sched-head { display:flex; gap:10px; align-items:baseline; margin-bottom:4px; font-size:13px; }
.sched-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:5px 8px; border:1px dashed #f59e0b; border-radius:8px; background:#fffbeb; font-size:13px; margin-bottom:4px; }
.sched-row.is-seen { border-style:solid; border-color:#e5e7eb; background:#fafafa; }
.sched-row > span { flex:1 1 auto; }

/* ── 그룹 관리 모달 (2026-09-09) ── */
.grp-help { margin-top:0; margin-bottom:10px; }
.grp-help[hidden] { display:none; }
.grp-list { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.grp-list-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); min-height:44px; }
.grp-list-row:last-child { border-bottom:0; }
.grp-list-name { font-weight:600; }
.grp-list-btns { display:flex; gap:6px; flex-shrink:0; }
.grp-rename-input { flex:1; min-width:0; height:36px; border:1px solid var(--primary); border-radius:8px; padding:0 10px; font:inherit; }
.grp-people { max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:4px 8px; }
.grp-person { display:flex; align-items:center; gap:8px; padding:7px 2px; border-bottom:1px solid var(--line); cursor:pointer; min-height:40px; }
.grp-person:last-child { border-bottom:0; }
.grp-person input { width:18px; height:18px; flex-shrink:0; }
.grp-person-name { flex:1; min-width:0; }
.grp-person-group { font-size:var(--fs-desc); flex-shrink:0; }
.grp-row { display:flex; gap:8px; align-items:center; margin-top:8px; }
.grp-row-top { margin-top:0; margin-bottom:8px; }
.grp-row input { flex:1; min-width:0; height:40px; border:1px solid var(--line); border-radius:10px; padding:0 12px; font:inherit; }

/* ── 요일별 근무 모달 (2026-09-09) ── */
.wd-days { display:flex; gap:6px; flex-wrap:wrap; }
.wd-day { min-width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:var(--card); font:inherit; font-weight:700; cursor:pointer; }
.wd-day.sat { color:#1d4ed8; } .wd-day.sun { color:#b3261e; }
.wd-day.is-on { background:var(--primary); border-color:var(--primary); color:#fff; }
.wd-time-row input.wd-time { flex:0 0 auto; width:136px; height:40px; border:1px solid var(--line); border-radius:10px; padding:0 8px; font:inherit; }
.wd-sum { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; font-size:var(--fs-desc); }
.wd-chip { display:inline-block; padding:1px 7px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-weight:600; }
.wd-people { max-height:260px; }

/* ── 근무시각 변경 이력 (2026-09-10) ── */
.sched-hist { margin-top:10px; border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:var(--fs-desc); }
.sched-hist-head { font-weight:700; color:var(--muted); margin:2px 0 4px; }
.sched-hist-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:5px 0; border-top:1px solid var(--line); }
.sched-hist-row:first-of-type { border-top:0; }
.sched-hist-row.is-current b { color:var(--primary); }
.sched-hist-row .btn { margin-left:auto; }
.wd-from-row input.wd-time { width:150px; }

/* ── 대체근로일 모달 (2026-09-10) ── */
.sub-month { display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 0 8px; }
.sub-month b { font-size:15px; }
.sub-legend { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12px; color:var(--muted); margin-bottom:6px; }
.sub-legend .lg { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:4px; border:1px solid var(--line); vertical-align:-2px; }
.sub-legend .lg.work { border-color:#93c5fd; background:#eff6ff; } .sub-legend .lg.hol { border-color:#fca5a5; background:#fef2f2; } .sub-legend .lg.sub { border-color:#86efac; background:#f0fdf4; }
.sub-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.sub-dow { text-align:center; font-size:12px; color:var(--muted); padding:2px 0; } .sub-dow.sun { color:#b3261e; } .sub-dow.sat { color:#1d4ed8; }
.sub-day { min-height:52px; border:1px solid var(--line); border-radius:8px; padding:3px 4px; font-size:12px; position:relative; }
.sub-day.empty { border-color:transparent; } .sub-day.work { border-color:#93c5fd; background:#eff6ff; } .sub-day.hol { border-color:#fca5a5; background:#fef2f2; }
.sub-day.is-sub { border-color:#86efac; background:#f0fdf4; border-style:dashed; } .sub-day.can { cursor:pointer; } .sub-day.can:hover { box-shadow:0 0 0 2px var(--primary-soft) inset; }
.sub-day.today .sub-num { text-decoration:underline; } .sub-day.sun .sub-num, .sub-day.hol .sub-num { color:#b3261e; } .sub-day.sat .sub-num { color:#1d4ed8; }
.sub-day small { display:block; font-size:9.5px; color:#b3261e; line-height:1.1; }
.sub-tag { display:inline-block; margin-top:2px; font-size:9.5px; padding:1px 4px; border-radius:4px; background:#dcfce7; color:#166534; white-space:nowrap; }

/* ── .modal-card (필터·그룹·요일별·대체근로일 모달) — 지금까지 CSS 가 없어 내용 폭대로 늘어났다 (2026-09-10) ── */
.modal-card { width:min(560px, calc(100vw - 24px)); max-height:88vh; overflow:auto; background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.7); border-radius:20px; box-shadow:0 26px 72px rgba(15,23,42,.26); }
.modal-card .modal-close { border:0; width:34px; height:34px; border-radius:50%; background:#f3f4f6; font-size:16px; cursor:pointer; }
.modal-card .actm-help-box { font-weight:600; word-break:keep-all; overflow-wrap:anywhere; white-space:normal; }
.wd-newsite { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.wd-newsite input { height:40px; border:1px solid var(--line); border-radius:10px; padding:0 12px; font:inherit; }
.sub-empty { grid-column:1 / -1; padding:26px 14px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px; line-height:1.6; }

/* ── 사직원 (2026-09-10) ── */
.pt-resign { display:inline-block; margin-left:auto; margin-right:8px; padding:2px 8px; border-radius:999px; background:#fee2e2; color:#991b1b; font-size:12px; font-weight:700; }
.sched-row.is-resign { border-left:3px solid #b3261e; }

/* 연락처의 '출근 위치' 줄에 함께 보이는 출근지 이름 (2026-09-08, 본서버 → 스테이징 2026-09-10).
   활동내역에서 고쳐도, 엑셀로 올려도 여기에 그대로 비친다. */
.pt-site { font-size:13px; font-weight:700; color:var(--text);
           margin-right:var(--sp-2); word-break:keep-all; }
.pt-site.is-empty { color:#9aa3ad; font-weight:600; }

/* 머리띠 왼쪽 — 온다정 글자 로고 + 아래 기관명 (2026-09-11) */
.header-brand-text { gap:2px; }
.header-brand-text { gap:0; }
.header-logo { display:block; height:40px; width:auto; margin-top:-2px; }
.header-org { display:block; font-size:10.5px; font-weight:700; color:var(--text); line-height:1.1; white-space:nowrap; letter-spacing:-.01em; }
@media (max-width:520px) { .header-logo { height:36px; } .header-org { font-size:10px; } }

/* 목록 위 빠른 드롭다운 (2026-09-11) */
.pt-quick-row { display:flex; align-items:center; gap:8px; margin:6px 0 2px; }
.pt-quick-row .select-soft { flex:1 1 auto; min-width:0; max-width:360px; height:36px; padding:0 12px; font-size:13px; font-weight:700; }
.pt-filter-badge { display:inline-block; min-width:16px; height:16px; margin-left:4px; padding:0 4px; border-radius:999px; background:var(--primary); color:#fff; font-size:11px; line-height:16px; text-align:center; }
#ptFilterBtn.has-filter { border-color:rgba(37,99,235,.45); color:var(--primary); }

/* 설정 › 기관 정보·전화 설정 — 담당자는 보기 전용 (2026-09-11) */
.ro-notice { display:none; margin:0 0 12px; padding:10px 14px; border:1px solid #fed7aa; border-radius:10px; background:#fff7ed; color:#9a3412; font-size:13px; font-weight:700; line-height:1.5; }
.stab-panel.is-readonly .ro-notice { display:block; }
.stab-panel.is-readonly :is(input, select, textarea) { pointer-events:none; background:#f3f4f6; color:var(--muted); }
.stab-panel.is-readonly button:not(.lp-play-btn):not(.phone-prompt-play-btn):not(#holidayCalPrev):not(#holidayCalNext):not(.ro-keep) { display:none !important; }
.stab-panel.is-readonly #holidayCalGrid { pointer-events:none; }

/* 2026-09-11 14:30 머리띠·메뉴 재구성 */
.header-tools-btn { width:36px; padding:0; justify-content:center; }
.header-tools-btn .user-dropdown { min-width:120px; }
.header-user-btn#headerUserBtn { padding:0 12px 0 10px; }
.header-user-btn#headerUserBtn .header-online-dot { position:static; margin-right:2px; }
/* 개인 설정 페이지 */
.my-settings-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin-bottom:16px; }
.my-setting-card { text-align:left; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:#fff; cursor:pointer; transition:.12s ease; }
.my-setting-card:hover { border-color:rgba(37,99,235,.4); background:rgba(37,99,235,.03); }
.my-setting-card b { display:block; font-size:15px; margin-bottom:4px; color:var(--text); }
.my-setting-card span { display:block; color:var(--muted); font-size:13px; font-weight:600; line-height:1.4; }
#myStatsHost .stab-panel { display:block; }
/* 관리자 설정 — 패널(테두리) 사이 여백. 두 칸 나열(.grid.two-col)은 gap 으로, 나머지는 아래 여백으로 */
#page-settings .stab-panel > .panel, #page-settings .stab-panel > section.grid, #page-settings .stab-panel > .grid { margin-bottom:22px; }
#page-settings .stab-panel > .grid.two-col { gap:22px; }
#page-settings .stab-panel > .grid.two-col > .panel { margin:0; }
/* 좁은 폰: 가운데 묶음을 절대 위치(가운데 고정)에서 빼서 로고와 오른쪽 단추 셋 사이에 흐르게 한다 — 겹침이 생길 수 없다 */
@media (max-width:520px) {
  .header-inner { gap:6px; padding:0 12px; }
  .header-inner > div[style="flex:1"] { display:none; }
  .header-nav-group { position:static; transform:none; margin:0 auto; gap:2px; padding:3px; }
  .header-primary-nav-btn { height:28px; padding:0 7px; font-size:12px; }
  .header-right { gap:5px; }
  .header-bell-btn, .header-tools-btn { width:32px; height:32px; border-radius:8px; }
  .header-user-btn#headerUserBtn { height:32px; padding:0 7px 0 6px; gap:4px; }
  .header-user-name { font-size:11px; }
  .header-logo { height:32px; }
}
@media (max-width:380px) {
  .header-primary-nav-btn { padding:0 5px; font-size:11px; }
  .header-bell-btn, .header-tools-btn { width:30px; height:30px; }
}

/* 머리띠 브랜드 — 로그인 전 화면(.lp-logo)과 같은 꼴: [아이콘][온다정] 줄, 그 아래 같은 폭으로 기관 이름 (2026-09-11 14:45) */
#headerBrandText { display:inline-flex; flex-direction:column; align-items:stretch; justify-content:center; gap:1px; max-width:none; flex:0 0 auto; }
#headerBrandText .header-brand-row { display:flex; align-items:center; gap:6px; }
#headerBrandText .header-logo { display:block; width:28px; height:28px; border-radius:8px; margin:0; }
#headerBrandText .header-brand-word { font-size:16px; font-weight:700; letter-spacing:-.05em; color:#101828; line-height:1; }
#headerBrandText .header-org { display:block; width:100%; text-align:center; font-size:10.5px; font-weight:700; color:var(--muted); line-height:1.1; white-space:nowrap; letter-spacing:-.02em; }
#headerBrandText .header-org:empty { display:none; }
@media (max-width:520px) {
  #headerBrandText .header-logo { width:24px; height:24px; border-radius:7px; }
  #headerBrandText .header-brand-word { font-size:14px; }
  #headerBrandText .header-org { font-size:9.5px; }
}

/* 검은 단추는 그림자 없이 (남현우 님 2026-09-11 14:50) */
.btn-primary, .btn-primary:hover, .settings-tab.active, .care-mode-tab.active, .header-primary-nav-btn.active, .pt-main-tab.active[style*='#'] { box-shadow:none !important; }

/* 바닥글 기관명 (2026-09-11) */
.app-footer { padding:28px 16px 34px; text-align:center; color:var(--muted); font-size:12.5px; font-weight:700; letter-spacing:-.01em; }

/* 개인 설정 제목 — 설명 줄 없이 제목만, 카드와 간격 */
.my-settings-title { margin-bottom:14px; }

/* 명단 미리보기 — 기관 최대 참여자 수 (2026-09-11) */
.rs-cap-warn { margin:8px 0; padding:10px 12px; border-radius:10px; background:#f6f7fb; border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--muted); }
.rs-cap-warn.is-over { background:#fff1f2; border-color:#fecdd3; color:#b91c1c; }

/* ── 달력 새 꼴 (남현우 님 2026-09-11): 흰 칸 · 선택 var(--brand-primary) · 구간 var(--brand-primary-soft) — 대체근로일·휴무일 달력 ── */
.sub-grid { gap:6px; background:#f5f6f8; border-radius:16px; padding:8px; }
.sub-dow, .sub-dow.sun, .sub-dow.sat { color:var(--brand-ink-muted); font-weight:600; }
.sub-day { border:1.5px solid transparent; background:#fff; border-radius:10px; }
.sub-day.empty { background:transparent; }
.sub-day.sat .sub-num { color:var(--text); }
.sub-day.work { background:var(--brand-primary-soft); border-color:var(--brand-primary-soft); } .sub-day.work .sub-num { color:var(--brand-primary-deep); font-weight:700; }
.sub-day.hol { background:#fff; border-color:#fff; }
.sub-day.is-sub { background:var(--brand-primary); border-color:var(--brand-primary); } .sub-day.is-sub .sub-num, .sub-day.is-sub small { color:#fff; } .sub-day.is-sub .sub-tag { background:rgba(255,255,255,.92); color:var(--brand-primary-deep); }
.sub-day.can:hover { box-shadow:0 0 0 2px var(--brand-primary) inset; }
.sub-day.today { box-shadow:0 0 0 2px var(--brand-primary) inset; } .sub-day.today .sub-num { text-decoration:none; }
.sub-legend .lg.work { border-color:var(--brand-primary-soft); background:var(--brand-primary-soft); } .sub-legend .lg.sub { border-color:var(--brand-primary); background:var(--brand-primary); } .sub-legend .lg.hol { border-color:#e5e7eb; background:#fff; }
.sub-month .btn { width:36px; height:36px; border-radius:50%; padding:0; display:inline-grid; place-items:center; }
.sub-month b { background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px 14px; font-size:15px; }
.holiday-cal-grid { gap:6px; background:#f5f6f8; border-radius:16px; padding:8px; }
.hol-cal-dh { color:var(--brand-ink-muted); }
.hol-cal-cell { background:#fff; border-radius:10px; padding:10px 4px; font-weight:600; }
.hol-cal-cell.empty { background:transparent; }
.hol-cal-cell:hover { background:var(--brand-primary-tint); }
.hol-cal-cell.hol-wknd { color:var(--brand-danger); }
.hol-cal-cell.hol-saved { background:var(--brand-primary-soft); color:var(--brand-primary-deep); }
.hol-cal-cell.hol-sel { background:var(--brand-primary); color:#fff !important; }
.hol-legend-sel { color:var(--brand-primary); } .hol-legend-wknd { color:var(--brand-danger); }
#holidayCalPrev, #holidayCalNext { width:36px; height:36px; border-radius:50%; padding:0; display:inline-grid; place-items:center; }
#holidayCalLabel { background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px 14px; }

/* 휴무일 달력 — 전국 공휴일도 같은 팔레트 (흰 칸, 붉은 글자, 자물쇠 회색) */
.hol-cal-cell.hol-national { background:#fff; color:var(--brand-danger); font-weight:700; box-shadow:0 0 0 1px var(--brand-primary-soft) inset; }
.hol-cal-cell.hol-national .hol-lock { color:var(--brand-ink-muted); }
.hol-legend-national { color:var(--brand-danger); }

/* ── 달력 틀: 피그마 Date picker 꼴 (2026-09-11) ── */
.cal-chip { display:inline-flex; align-items:flex-end; gap:3px; background:#fff; border:1px solid var(--brand-line); border-radius:10px; padding:6px 12px; font-size:16px; font-weight:700; line-height:1.1; color:var(--text); margin:0 3px; }
.cal-chip i { display:inline-block; width:0; height:0; border-left:5px solid transparent; border-bottom:5px solid var(--brand-primary); margin-bottom:1px; }
/* 대체근로일 달력 */
.sub-month { justify-content:space-between; gap:8px; margin:10px 0; }
.sub-month .btn { width:40px; height:40px; border:1px solid var(--brand-line); background:#fff; color:var(--text); box-shadow:none; }
.sub-month b { border:0; background:transparent; padding:0; display:inline-flex; }
.sub-grid { background:var(--brand-surface); border-radius:16px; padding:12px 10px 10px; gap:6px; }
.sub-dow, .sub-dow.sun, .sub-dow.sat { font-size:12px; color:var(--brand-ink-muted); font-weight:600; padding:0 0 4px; }
.sub-day { min-height:42px; border:1.5px solid transparent; border-radius:9px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px 2px; text-align:center; }
.sub-day .sub-num { font-size:14px; font-weight:700; }
.sub-day small { font-size:9px; } .sub-tag { font-size:9px; padding:0 3px; margin-top:1px; }
.sub-day.work:has(+ .sub-day.work:not(:nth-child(7n+1))) { border-top-right-radius:0; border-bottom-right-radius:0; }
.sub-day.work + .sub-day.work:not(:nth-child(7n+1)) { border-top-left-radius:0; border-bottom-left-radius:0; box-shadow:-6px 0 0 var(--brand-primary-soft); }
.sub-day.work.today { box-shadow:0 0 0 2px var(--brand-primary) inset; }
.sub-day.work.today + .sub-day.work:not(:nth-child(7n+1)) { box-shadow:-6px 0 0 var(--brand-primary-soft); }
/* 휴무일 달력 */
.holiday-cal-head { justify-content:space-between; }
#holidayCalPrev, #holidayCalNext { width:40px; height:40px; border:1px solid var(--brand-line); background:#fff; color:var(--text); box-shadow:none; }
#holidayCalLabel { border:0; background:transparent; padding:0; display:inline-flex; min-width:0; }
.holiday-cal-grid { background:var(--brand-surface); border-radius:16px; padding:12px 10px 10px; gap:6px; }
.hol-cal-dh { color:var(--brand-ink-muted); font-weight:600; }
.hol-cal-cell { min-height:42px; display:flex; align-items:center; justify-content:center; border-radius:9px; padding:4px 2px; font-size:14px; font-weight:700; position:relative; }
.hol-cal-cell.hol-saved:has(+ .hol-cal-cell.hol-saved:not(:nth-child(7n+1))) { border-top-right-radius:0; border-bottom-right-radius:0; }
.hol-cal-cell.hol-saved + .hol-cal-cell.hol-saved:not(:nth-child(7n+1)) { border-top-left-radius:0; border-bottom-left-radius:0; box-shadow:-6px 0 0 var(--brand-primary-soft); }
.hol-cal-cell.hol-national { box-shadow:none; }

/* 휴무일 줄은 한 키로 선다 (2026-09-23). 종류·설명·등록·초기화가 40·40·32·32 로
   제각각이었다. 대표님이 되풀이해 말씀하신 "같은 줄은 크기를 맞춰라" 를 여기에도 댄다.
   높이는 DESIGN.md 의 값만 쓴다 — 데스크톱 40, 모바일 48 */
   select 는 화면에 그대로 안 나온다 — `.dd-wrap` 안에 숨고 옆의 `.dd-btn` 이 보인다.
   그래서 #id 가 아니라 감싼 것과 단추에 건다 (2026-09-15 에 정한 방식) */
.holiday-actions > *, .holiday-actions .dd-btn { height:40px; box-sizing:border-box; }
.holiday-actions > .btn { padding-top:0; padding-bottom:0; }
.holiday-actions > .dd-wrap { flex:0 0 150px; }
.holiday-actions .dd-btn { width:100%; }
@media (max-width:640px) {
  .holiday-actions > *, .holiday-actions .dd-btn { height:48px; width:100%; }
  .holiday-actions > .dd-wrap { flex:1 1 auto; }
}

/* 비상인 날 — 쉬는 날이 아니라 **받는 사람이 다른 날**이다 (2026-09-23).
   휴무(파랑)와 한눈에 갈려야 해서 경고색을 쓴다. 새 hex 는 안 쓴다 (DESIGN.md) */
.hol-cal-cell.hol-emg { background:var(--brand-warning); color:#fff !important; font-weight:700; }
.hol-legend-item.hol-legend-emg { color:var(--brand-warning); }
.holiday-list-row .holiday-kind-emg { color:var(--brand-warning); font-weight:700; font-size:12px; }

/* 띠 안의 오늘 칸 — 띠 이음과 오늘 테두리를 같이 (2026-09-11) */
.sub-day.work + .sub-day.work.today:not(:nth-child(7n+1)) { box-shadow:-6px 0 0 var(--brand-primary-soft), 0 0 0 2px var(--brand-primary) inset; }
.hol-cal-cell.hol-saved + .hol-cal-cell.hol-saved.hol-sel:not(:nth-child(7n+1)) { box-shadow:-6px 0 0 var(--brand-primary-soft); }

/* 휴무일 달력은 피그마 컴포넌트 폭으로 (넓은 화면에서 칸이 넓적해지지 않게) */
.holiday-cal-head, .holiday-cal-grid, .holiday-cal-legend { max-width:560px; }
.hol-cal-cell { padding:8px 2px; }

/* ── 머리띠 드롭다운 정렬 (2026-09-11): 단추 가운데 아래로, 화면 밖이면 --dd-shift 로 안쪽으로 ── */
@media (min-width:521px) {
  .header-user-btn .user-dropdown, .header-bell-btn .notify-panel {
    left:50%; right:auto; transform:translateX(calc(-50% + var(--dd-shift, 0px)));
  }
}

/* 달력 색 체계 (2026-09-11 17:10): 숫자 먹색, 휴일·일요일만 붉게 */
.sub-day.work .sub-num { color:var(--brand-ink); }
.sub-day.sun .sub-num, .sub-day.hol .sub-num { color:var(--brand-danger); }
.sub-day small { color:var(--brand-danger); }
.sub-tag { background:#fff; color:#5b6473; border:1px solid var(--brand-line); }
.sub-day.is-sub .sub-tag { background:rgba(255,255,255,.92); color:var(--brand-primary-deep); border:0; }
.hol-cal-cell.hol-saved { color:var(--brand-ink); }
.hol-cal-cell.hol-wknd, .hol-cal-cell.hol-national { color:var(--brand-danger); }

/* ── 활동 화면 위 줄: 년월·드롭다운·찾기·급여명세서 모두 같은 높이(--h-md) (대표님 카톡 2026-09-14) ── */
.select-drawn, .activity-toolbar select.select-drawn {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  height:var(--h-md); min-height:var(--h-md); padding:0 36px 0 12px; line-height:normal;
  border:1px solid var(--line); border-radius:12px; background-color:#fff; color:var(--text); font-size:14px; font-weight:600;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px;
}
.select-drawn:focus { outline:none; border-color:rgba(37,99,235,.4); }
.activity-toolbar .field input[type="search"], .activity-toolbar .activity-month-field input[type="month"] { height:var(--h-md); min-height:var(--h-md); padding-top:0; padding-bottom:0; }
.activity-toolbar .activity-payslip-btn { height:var(--h-md); min-height:var(--h-md); padding:0 16px; display:inline-flex; align-items:center; justify-content:center; width:100%; }
.activity-toolbar .activity-payslip-field label { margin-bottom:4px; }

/* ══ 머리띠 최종 규칙 2026-09-14 (대표님 01:20 통화). 위쪽 옛 규칙보다 뒤에 있어 이것이 이긴다 ══ */
.header-inner { padding:0 var(--page-gutter); }
#headerBrandText { gap:2px; align-items:flex-start; max-width:none; flex:0 1 auto; min-width:0; }
#headerBrandText .header-brand-row { display:flex; align-items:center; gap:0; }
#headerBrandText .header-brand-word { font-size:17px; font-weight:700; letter-spacing:-.03em; color:var(--brand-secondary, #101828); line-height:1; }
#headerBrandText .header-org { display:block; width:auto; text-align:left; font-size:14px; font-weight:700; color:var(--text); line-height:1.15; white-space:nowrap; letter-spacing:-.01em; }
#headerBrandText .header-org:empty { display:none; }
@media (max-width:640px) {
  .header-inner { padding:0 var(--page-gutter); gap:8px; }
  .header-inner > div[style="flex:1"] { display:none; }
  /* 가운데 묶음을 흐름에 둔다 — 오른쪽 단추가 둘로 줄어 남은 자리가 왼콽 기관명에 간다 */
  .header-nav-group { position:static; left:auto; transform:none; margin:0 auto; flex:0 0 auto; }
  #headerBrandText .header-brand-word { font-size:16px; }
  #headerBrandText .header-org { font-size:13px; }
  .header-user-btn .user-dropdown, .header-bell-btn .notify-panel, .notify-panel, #headerUserBtn .user-dropdown {
    position:fixed; top:calc(var(--header-h) + 8px); left:var(--page-gutter); right:var(--page-gutter);
    width:auto; min-width:0; max-width:none; transform:none;
  }
}
@media (max-width:360px) {
  #headerBrandText .header-org { font-size:12px; }
}
/* PC 활동 화면 위 줄: 년월·사업단·사업명·찾기·급여명세서 다섯 칸이 한 줄 (급여명세서가 다음 줄로 내려가던 것) */
@media (min-width:761px) {
  .activity-toolbar { grid-template-columns:158px minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) auto; }
}

/* 프로필 단추 = 종 단추와 같은 36px 정사각형. 초록 점은 오른쫙 위 구석 (남현우 님 2026-09-14: 아이콘이 밀리는 느낌) */
.header-user-btn#headerUserBtn { width:36px; min-width:36px; max-width:36px; height:36px; padding:0; gap:0; justify-content:center; align-items:center; border-radius:10px; }
.header-user-btn#headerUserBtn .header-online-dot { position:absolute; top:-3px; right:-3px; margin:0; width:10px; height:10px; box-shadow:0 0 0 2px #fff; }
.header-user-btn#headerUserBtn .header-user-icon { width:18px; height:18px; display:grid; place-items:center; margin:0; }
.header-user-btn#headerUserBtn .header-user-name { display:none; }
.header-right { gap:8px; }

/* 종 단추도 모든 폭에서 36px — 프로필 단추와 키를 맞춘다 */
.header-bell-btn, .header-bell-btn#headerBellBtn { width:36px; min-width:36px; height:36px; border-radius:10px; }

/* ── 연락처·알림함·수정 모달 다듬기 (대표님 2026-09-14 01:58) ── */
.notify-head { gap:8px; }
.notify-head-title { flex:0 0 auto; }
.notify-filter, select.notify-filter { flex:1 1 auto; min-width:0; max-width:180px; height:32px; min-height:32px; font-size:12px; padding:0 28px 0 10px; border-radius:10px; background-position:right 8px center; margin-left:auto; }
.notify-readall { flex:0 0 auto; }
/* 카드 값은 모두 검정·오른쪽 끝 맞춤. '기본'·'지정 안 됨' 도 예외 없이 */
.pt-detail-field .pt-site { margin-right:0; }
.pt-detail-field .pt-site.is-empty { color:var(--text); font-weight:700; }
/* 문자 아이콘은 전화 아이콘과 같은 크기·같은 회색 바탕 */
.pt-phone-call-icon.pt-sms-click { color:#101828; margin-left:6px; }
.pt-phone-call-icon.pt-sms-click:hover { color:#101828; }
/* 모달 안 드롭다운은 전부 직접 그린 모양 — 입력칸과 같은 높이(40) */
.modal .field select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  height:var(--h-md); min-height:var(--h-md); padding:0 36px 0 12px; line-height:normal;
  border:1px solid var(--line); border-radius:12px; background-color:#fff; color:var(--text); font-size:14px; font-weight:600; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px;
}
.modal .field select:focus { outline:none; border-color:rgba(37,99,235,.4); }
/* 모달 입력칸 높이 40 으로 통일, 날짜 칸은 넘치지 않게 */
.modal .field input:not([type=checkbox]):not([type=radio]) { height:var(--h-md); min-height:var(--h-md); padding-top:0; padding-bottom:0; }
.modal .field input[type="date"] { min-width:0; width:100%; -webkit-appearance:none; appearance:none; }
.modal .field input[type="date"]::-webkit-date-and-time-value { text-align:left; line-height:38px; }
/* 삭제·취소·저장 단추 = 입력칸과 같은 높이·같은 모양 */
.modal-actions .btn { height:var(--h-md); min-height:var(--h-md); padding-top:0; padding-bottom:0; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; }
#smsOneModal textarea { min-height:120px; }

/* 연락처의 그룹 관리·요일별 근무·대체근로일 단추는 정의가 끝날 때까지 숨김 (대표님 2026-09-14 01:58). hidden 속성은 .btn 의 display 가 이겨서 CSS 로 */
#ptBtnGroup, #ptBtnWeekday, #ptBtnSub { display:none !important; }

/* 모바일 확인 뒤 손질 (2026-09-14): hidden 이 display:flex 에 밀리던 알림 줄 · 작은 모달의 취소 단추 높이 · 문자 아이콘 색을 전화 아이콘과 같게 */
.notify-open[hidden] { display:none !important; }
.modal-sm .modal-actions .btn, .modal-actions .btn.btn-soft { height:var(--h-md); min-height:var(--h-md); }
.pt-phone-call-icon.pt-sms-click, .pt-phone-call-icon.pt-sms-click:hover { color:#007aff; }

/* ══ 우리가 그리는 드롭다운 (2026-09-14). 단추는 원래 select 의 class(select-drawn·notify-filter 등)를 물려받아 같은 크기 ══ */
.dd-wrap { position:relative; display:block; width:100%; min-width:0; }
.notify-head .dd-wrap { width:auto; flex:1 1 auto; max-width:180px; margin-left:auto; }
.dd-native { position:absolute !important; opacity:0 !important; pointer-events:none !important; width:1px !important; height:1px !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; }
.dd-btn { display:flex; align-items:center; text-align:left; cursor:pointer; font-family:inherit; width:100%; }
.dd-btn .dd-label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-btn:disabled { color:var(--muted); cursor:default; background-color:#f8fafc; }
.dd-wrap.dd-open .dd-btn { border-color:rgba(37,99,235,.4); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.dd-list {
  position:fixed; z-index:1200; overflow-y:auto; overscroll-behavior:contain; padding:4px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 48px rgba(15,23,42,.14);
}
.dd-opt { padding:9px 12px; border-radius:8px; font-size:14px; font-weight:600; color:var(--text); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-opt:hover { background:rgba(15,23,42,.05); }
.dd-opt.is-selected { background:var(--brand-primary-tint, #fff0f0); color:var(--brand-primary-deep, #b42318); }
.dd-opt.is-disabled { color:var(--muted); cursor:default; }
.dd-group { padding:8px 12px 4px; font-size:11px; font-weight:700; color:var(--muted); }
.dd-empty { padding:12px; color:var(--muted); font-size:13px; text-align:center; }

/* ══ PC 표 보기 (2026-09-14) — 엑셀 느낌으로 촘촘하게. 모바일(<900px)은 언제나 카드 ══ */
.pt-table-wrap { display:none; }
.view-toggle { display:none; margin-left:auto; }
@media (min-width:900px) {
  .view-toggle { display:inline-flex; }
  body:not(.list-view-cards) .pt-detail-cards.has-table { display:none; }
  body:not(.list-view-cards) .pt-table-wrap:not(.is-empty) { display:block; overflow:auto; max-height:calc(100vh - 260px); border:1px solid var(--line); border-radius:12px; background:#fff; }
  body:not(.list-view-cards) .pt-table-wrap.is-empty { display:none; }
  .dense-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
  .dense-table th { position:sticky; top:0; z-index:1; background:#f8fafc; color:var(--muted); font-size:12px; font-weight:700; text-align:left; padding:0 12px; height:36px; border-bottom:1px solid var(--line); border-right:1px solid #eef0f3; white-space:nowrap; }
  .dense-table td { padding:0 12px; height:40px; border-bottom:1px solid #eef0f3; border-right:1px solid #eef0f3; white-space:nowrap; color:var(--text); font-weight:600; vertical-align:middle; max-width:360px; overflow:hidden; text-overflow:ellipsis; }
  .dense-table th:last-child, .dense-table td:last-child { border-right:0; }
  .dense-table tbody tr:last-child td { border-bottom:0; }
  .dense-table tbody tr[data-action] { cursor:pointer; }
  .dense-table tbody tr:hover td { background:#fbfbfd; }
  .dense-table .c-seq { width:44px; text-align:right; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }
  .dense-table .c-name { font-weight:700; }
  .dense-table .c-name .name-phone-plain { color:var(--muted); font-weight:600; }
  .dense-table td .pt-phone-call-icon { margin-left:6px; }
  .dense-table td .pt-site { margin:0; }
  .dense-table td .field-muted { font-weight:600; }
  /* 활동 요약: 둥근 카드 → 줄. 구조는 그대로 */
  body:not(.list-view-cards) .activity-summary-list { gap:0; border:1px solid var(--line); border-radius:12px; background:#fff; overflow:auto; }
  body:not(.list-view-cards) .activity-summary-row { border:0; border-bottom:1px solid #eef0f3; border-radius:0; padding:0 12px; min-height:40px; gap:12px; box-shadow:none; transform:none; }
  body:not(.list-view-cards) .activity-summary-row:last-child { border-bottom:0; }
  body:not(.list-view-cards) .activity-summary-row:hover { background:#fbfbfd; box-shadow:none; transform:none; border-color:#eef0f3; }
  body:not(.list-view-cards) .activity-summary-row.is-selected { background:#f0fdf4; border-left:3px solid #10b981; }
  body:not(.list-view-cards) .activity-summary-row.has-issue { border-left:3px solid #fcd34d; }
  body:not(.list-view-cards) .activity-summary-row small { margin-top:0; }
}

/* ══ 참고 시안 꼴 표 (User Management Dashboard, 2026-09-14) — 세로 칸선 없이 가로 구분선만 ══ */
@media (min-width:900px) {
  body:not(.list-view-cards) .pt-table-wrap:not(.is-empty) { border-radius:12px; border-color:var(--line); }
  .dense-table th {
    height:38px; padding:0 16px; background:#f9fafb; color:var(--brand-ink-muted);
    font-size:11px; font-weight:700; letter-spacing:.04em; border-right:0; border-bottom:1px solid #e5e7eb;
  }
  .dense-table td { height:44px; padding:0 16px; border-right:0; border-bottom:1px solid #f1f3f5; font-weight:600; color:#111827; }
  .dense-table tbody tr:hover td { background:#f9fafb; }
  .dense-table td.is-none { color:var(--brand-ink-muted); font-weight:600; }
  .dense-table .c-name { font-weight:700; }
  /* 동작 칸: 오른쪽 끝, 아이콘만 */
  .dense-table th.c-act, .dense-table td.c-act { width:96px; text-align:right; white-space:nowrap; padding-right:12px; }
  .dense-table td.c-act .pt-phone-call-icon { margin:0 0 0 4px; }
  /* 상태 알약 (사직 등) */
  .dense-table .pt-resign { display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:#fef3c7; color:#92400e; font-size:11px; font-weight:700; }
  /* 목록 판이 화면을 채운다 — 가운데가 비지 않게 */
  body:not(.list-view-cards) .pt-table-wrap:not(.is-empty) { max-height:calc(100vh - 240px); }
  /* 활동 요약도 같은 규칙 */
  body:not(.list-view-cards) .activity-summary-row { border-bottom:1px solid #f1f3f5; min-height:44px; padding:0 16px; }
  body:not(.list-view-cards) .activity-summary-row:hover { background:#f9fafb; }
}

/* ══ 색 규칙 하나로 (남현우 님 2026-09-14) — 초록=정상 · 주황=확인 필요 · 브랜드 빨강=고름·강조 · 파랑=정보 · 회색=없음 ══ */
.chip { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
.chip + .chip { margin-left:4px; }
.chip-ok   { background:#ecfdf3; color:#027a48; }
.chip-warn { background:#fffaeb; color:#b54708; }
.chip-bad  { background:var(--brand-primary-tint); color:var(--brand-primary-deep); }
.chip-info { background:#eff8ff; color:#175cd3; }
.chip-mute { background:var(--brand-surface); color:var(--brand-ink-muted); }

/* ── 이 달 요약 카드 ── */
.astat-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr)); gap:10px; margin-bottom:12px; }
.astat { position:relative; background:#fff; border:1px solid var(--brand-line); border-radius:16px; padding:12px 14px 12px 16px; overflow:hidden; }
.astat::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand-ink-muted); opacity:.35; }
.astat .k { font-size:12px; font-weight:700; color:var(--brand-ink-muted); margin-bottom:2px; }
.astat .v { font-size:22px; font-weight:700; color:var(--brand-ink); line-height:1.2; font-variant-numeric:tabular-nums; }
.astat .v small { font-size:13px; font-weight:700; color:var(--brand-ink-muted); margin-left:2px; }
.astat .s { margin-top:2px; font-size:12px; font-weight:600; color:var(--brand-ink-muted); }
.astat.is-accent::before { background:var(--brand-primary); opacity:1; }
.astat.is-accent .v { color:var(--brand-primary-deep); }
.astat.is-warn::before { background:var(--brand-warning); opacity:1; }
.astat.is-warn .v { color:#b54708; }
.astat.is-ok::before { background:var(--brand-success); opacity:1; }
.astat-more { display:inline-block; padding:0 6px; border-radius:999px; background:var(--brand-surface); color:var(--brand-ink-muted); font-size:11px; }
@media (max-width:640px) { .astat-row { grid-template-columns:repeat(2, minmax(0,1fr)); } .astat .v { font-size:19px; } }

/* ── 활동 줄: 표 아닌 줄. 왼쪽 색 띠로 상태를 읽는다 ── */
.activity-summary-list { gap:6px; }
.activity-summary-row {
  position:relative; padding:10px 12px 10px 16px; border:1px solid var(--brand-line); border-radius:12px;
  background:#fff; box-shadow:none; transition:background .12s ease, border-color .12s ease;
}
.activity-summary-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; border-radius:12px 0 0 12px; }
.activity-summary-row:hover { border-color:var(--brand-primary-soft); background:var(--brand-primary-tint); box-shadow:none; transform:none; }
.activity-summary-row.has-issue { border-color:var(--brand-line); }
.activity-summary-row.has-issue::before { background:var(--brand-warning); }
.activity-summary-row.has-issue:hover { border-color:var(--brand-warning); background:#fffaeb; }
.activity-summary-row.is-selected { border-color:var(--brand-primary); background:var(--brand-primary-tint); }
.activity-summary-row.is-selected::before { background:var(--brand-primary); }
.activity-summary-row .activity-issue { margin-top:4px; color:inherit; font-weight:700; }
.activity-summary-row .actrow-pay { color:var(--brand-primary-deep); font-weight:700; }
.activity-detail-btn:hover { border-color:var(--brand-primary); background:var(--brand-primary-tint); color:var(--brand-primary-deep); }

/* ── 카드 보기도 PC 에서는 여러 칸 (남현우 님 2026-09-14: 카드도 가운데를 비우지 말 것) ── */
@media (min-width:900px) {
  .pt-detail-cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; align-content:start; }
  /* 활동 줄은 표 모양으로 눌리지 않게 — 위 표 규칙을 여기서 되돌린다 */
  body:not(.list-view-cards) .activity-summary-list { gap:6px; border:0; background:transparent; border-radius:0; }
  body:not(.list-view-cards) .activity-summary-row { border:1px solid var(--brand-line); border-radius:12px; min-height:0; padding:10px 12px 10px 16px; }
  body:not(.list-view-cards) .activity-summary-row:last-child { border-bottom:1px solid var(--brand-line); }
  body:not(.list-view-cards) .activity-summary-row:hover { background:var(--brand-primary-tint); }
  body:not(.list-view-cards) .activity-summary-row.is-selected { background:var(--brand-primary-tint); border-left:1px solid var(--brand-primary); }
}
@media (min-width:1280px) { .pt-detail-cards { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1700px) { .pt-detail-cards { grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ══ 색을 하나로 2026-09-14 — 초록은 뜻이 있을 때만. 고름·올림·주요 단추는 브랜드 색 ══ */
/* ① 마우스 올림·고름: 초록 → 브랜드 */
.attendance-business-count:hover,
.activity-biz-card:hover, .activity-person-row:hover,
.approval-card.is-clickable:hover {
  border-color:var(--brand-primary-soft); background:var(--brand-primary-tint);
  box-shadow:none; transform:none;
}
.activity-detail-btn:hover, .activity-row-btn:hover, .actm-help:hover {
  border-color:var(--brand-primary); background:var(--brand-primary-tint); color:var(--brand-primary-deep);
}
/* ② 줄 안의 주요 단추(저장)는 다른 주요 단추와 같은 먹색 */
.activity-row-btn.is-primary { background:var(--brand-secondary); border-color:var(--brand-secondary); color:#fff; }
.activity-row-btn.is-primary:hover { background:#000; border-color:#000; }
/* ③ 고치는 중인 줄: 초록 바탕 → 브랜드 연분홍 */
.activity-edit-table tr.editing { background:var(--brand-primary-tint); }
/* ④ 뜻이 있는 초록은 한 가지로 맞춘다 (정상·승인·유급·준비됨) */
.status.green, .leave-chip.is-pay, .appr-bereavement, .appr-approved, .ld-appr.is-ok,
.call-mic-status.is-ready, .absence-inactive-msg, .cs-type-badge.sms, .rs-chip.new {
  background:#ecfdf3; color:#027a48; border-color:#a6f4c5;
}
.ac-loc.is-ok { border-color:#a6f4c5; color:#027a48; }
/* ⑤ 표 보기에서 고른 줄도 브랜드 (p41 에 남아 있던 초록) */
@media (min-width:900px) {
  body:not(.list-view-cards) .activity-summary-row.is-selected { background:var(--brand-primary-tint); border-left:3px solid var(--brand-primary); }
}
/* ⑥ 대체근로일 달력의 '고른 날' 도 브랜드 (파랑·초록 섞여 있던 것) */
.sub-legend .lg.sub { border-color:var(--brand-primary); background:var(--brand-primary); }

/* ══ 통화 줄도 가운데를 채운다 (남현우 님 2026-09-14). DOM 은 그대로, 자리만 편다 ══ */
.call-card-state { display:none; }
@media (min-width:900px) {
  /* (2026-09-14 p46 에서 되돌림 — 표 꼴 대신 두 칸) */
  /* 감싸개를 지워 안엣것이 바로 칸이 되게 한다 */
  .call-card-simple > .call-card-left, .call-card-simple .call-card-info { display:contents; }
  .call-card-simple .call-card-name { grid-column:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .call-card-simple .call-card-sub { grid-column:2; min-width:0; display:flex; align-items:center; gap:8px; overflow:hidden; }
  .call-card-simple .call-card-sub .call-card-biz-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .call-card-simple .call-card-state { grid-column:3; display:flex; align-items:center; gap:4px; }
  .call-card-simple .call-card-time { grid-column:4; text-align:right; }
  .call-card-simple .call-card-dial { grid-column:5; }
  /* 아래로 붙는 줄(이관 내역·처리 내역·자세히)은 한 줄 통째로 */
  .call-card-simple .call-transfer-meta, .call-card-simple .call-detail-panel { grid-column:1 / -1; }
  /* 시각·날짜·통화시간을 한 줄로 눕혀 높이를 줄인다 */
  .call-card-simple .call-card-time { display:flex; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap; }
  .call-card-simple .call-card-time > div { display:inline-block; }
  .call-card-list { gap:6px; }
  .call-card { border-radius:12px; }
}

/* ══ 통화: 왼쪽 목록 · 오른쪽 자세히 (남현우 님 2026-09-14). 표 꼴은 되돌렸다 ══ */
.call-day { display:flex; align-items:center; gap:8px; padding:14px 4px 6px; }
.call-day-label { font-size:12px; font-weight:700; color:var(--brand-ink-muted); letter-spacing:.02em; }
.call-day-count { font-size:11px; font-weight:700; color:var(--brand-ink-muted); background:var(--brand-surface); border-radius:999px; padding:1px 7px; }
.call-day:first-child { padding-top:2px; }
.call-detail-pane { display:none; }
.call-card.is-picked { border-color:var(--brand-primary); background:var(--brand-primary-tint); }

@media (min-width:1100px) {
  .call-log-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,560px); gap:16px; align-items:start; }
  .call-log-body > .call-card-list { min-width:0; }
  .call-detail-pane {
    display:block; position:sticky; top:calc(var(--header-h) + 12px);
    background:#fff; border:1px solid var(--brand-line); border-radius:16px; padding:16px;
    max-height:calc(100vh - var(--header-h) - 32px); overflow:auto;
  }
  .call-pane-head { display:none; }
  .call-detail-pane.has-one .call-pane-head { display:block; padding-bottom:12px; border-bottom:1px solid var(--brand-line); margin-bottom:12px; }
  .call-pane-name { font-size:16px; font-weight:700; color:var(--brand-ink); }
  .call-pane-sub { margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--brand-ink-muted); }
  .call-pane-when { margin-top:4px; font-size:12px; color:var(--brand-ink-muted); }
  .call-detail-pane .call-detail-panel { display:block !important; border:0; padding:0; margin:0; }
  .call-pane-empty { color:var(--brand-ink-muted); font-size:13px; line-height:1.7; text-align:center; padding:28px 8px; }
  .call-detail-pane.has-one .call-pane-empty { display:none; }
  /* 동작 칸: 머리글 글자와 아이콘의 오른쪽 끝을 맞춘다 (남현우 님 2026-09-14) */
  .dense-table th.c-act, .dense-table td.c-act { padding-right:16px; }
  .dense-table td.c-act { line-height:0; }
  .dense-table td.c-act .pt-phone-call-icon { margin:0 0 0 6px; vertical-align:middle; }
  /* 오른쪽에서 보므로 줄 아래로는 안 펼친다 */
  .call-card.open > .call-detail-panel { display:none; }
}

/* ══ 안내관리 새 꼴 (2026-09-14) — 왼쪽 '무엇을 말할지' · 오른쪽 '어디로 보낼지' ══ */
#careStats { margin-bottom:12px; }
.care-two-pane { display:grid; gap:12px; }
@media (min-width:1000px) {
  .care-two-pane { grid-template-columns:minmax(0,1fr) 380px; align-items:start; }
  .care-targets { position:sticky; top:calc(var(--header-h) + 12px); }
}
.care-compose { min-width:0; }
.care-preset-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.care-preset-label { font-size:12px; font-weight:700; color:var(--brand-ink-muted); margin-right:2px; }
button.care-preset { border:1px solid transparent; cursor:pointer; font-family:inherit; }
button.care-preset:hover { background:var(--brand-primary-tint); color:var(--brand-primary-deep); }
button.care-preset.is-on { background:var(--brand-primary-tint); color:var(--brand-primary-deep); border-color:var(--brand-primary-soft); }
.care-meta { margin-top:6px; font-size:12px; font-weight:700; color:var(--brand-ink-muted); }
.care-meta.is-long { color:#b54708; }
.care-search-box { margin-bottom:10px; }
.care-search-box input { height:var(--h-md); }
/* 보내기 단추: 남의 파랑 → 브랜드 먹색 */
.care-send-btn { background:var(--brand-secondary); border-radius:12px; }
.care-send-btn:hover:not(:disabled) { background:#000; }
.care-send-btn:disabled { background:var(--brand-surface); color:var(--brand-ink-muted); }
.care-locked-note { margin:8px 0 0; font-size:12px; font-weight:600; color:var(--brand-ink-muted); line-height:1.6; }
/* 보낼 곳 줄: 고른 곳은 브랜드 색으로 */
.care-target-row { cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.care-target-row:hover { border-color:var(--brand-primary-soft); background:var(--brand-primary-tint); }
.care-target-row.is-on { border-color:var(--brand-primary-soft); background:var(--brand-primary-tint); }
.care-target-list { max-height:none; }
@media (min-width:1000px) { .care-target-list { max-height:calc(100vh - var(--header-h) - 320px); } }

/* ══ 두 칸의 줄 맞추기 (2026-09-14) — 왼쪽·오른쪽이 같은 판, 같은 첫 줄 높이 ══ */
@media (min-width:1100px) {
  .call-log-body { align-items:stretch; }
  /* 왼쪽 목록도 오른쪽과 같은 흰 판으로 */
  .call-log-body > .call-card-list {
    background:#fff; border:1px solid var(--brand-line); border-radius:16px;
    padding:16px; align-content:start; min-height:220px;
    max-height:calc(100vh - var(--header-h) - 32px); overflow:auto;
  }
  .call-detail-pane { margin:0; }
  /* 판 안 첫 줄 높이를 같게 — 왼쪽 날짜 머리와 오른쪽 이름이 같은 줄에 앉는다 */
  .call-log-body .call-day { height:28px; padding:0 2px; margin:0; }
  .call-log-body .call-day:first-child { padding-top:0; }
  .call-detail-pane .call-pane-name { line-height:28px; }
  .call-detail-pane.has-one .call-pane-head { padding-bottom:12px; margin-bottom:12px; }
  /* 아무것도 안 골랐을 때도 첫 줄 자리는 지킨다 */
  .call-detail-pane:not(.has-one) .call-pane-empty { padding-top:28px; }
  .call-card-list .call-day + .call-card { margin-top:2px; }
}
/* 안내관리 두 칸도 같은 자 — 판끼리 위·아래가 맞는다 */
@media (min-width:1000px) {
  .care-two-pane { align-items:stretch; }
  .care-two-pane > .care-compose, .care-two-pane > .care-targets { min-width:0; }
  .care-two-pane .panel { height:100%; display:flex; flex-direction:column; }
  .care-two-pane .panel-body { flex:1 1 auto; min-height:0; }
}

/* ══ 드롭다운을 화면 전부에 (2026-09-14) ══ */
/* 감싸개는 자리를 안 흔든다 — 단추가 원래 select 자리에 그대로 앉는다 */
.dd-wrap { display:contents; }
/* 드롭다운 단추 바탕: 화살표와 오른쪽 여백은 공통, 크기·테두리는 물려받은 클래스가 정한다 */
.dd-btn {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:34px; text-align:left; cursor:pointer; font-family:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px;
}
.dd-btn.select-drawn { width:100%; }
.dd-wrap.dd-open .dd-btn { border-color:rgba(37,99,235,.4); box-shadow:0 0 0 3px rgba(37,99,235,.09); }

/* ══ 활동 줄: 가운데를 채우고 세로 줄도 맞춘다 (2026-09-14) ══ */
/* PC 에서는 칸으로 편다 — 예전에 세로로 쌓게(display:block) 바꿔 두어 가운데가 비었다 (2026-09-14) */
@media (min-width:900px) {
  .activity-summary-row {
    display:grid !important;
    grid-template-columns: minmax(120px, 1.1fr) minmax(0, 1.5fr) auto minmax(96px, auto) auto;
    column-gap:14px; align-items:center;
  }
}
.activity-summary-row .actrow-head { min-width:0; }
.activity-summary-row .actrow-biz { min-width:0; font-size:13px; font-weight:600; color:var(--brand-ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 일수·시간·활동비를 고정 폭으로 — 줄이 달라도 숫자가 세로로 맞는다 */
.activity-summary-row .actrow-stat { display:grid; grid-template-columns:52px 66px 96px; align-items:center; gap:0; }
.activity-summary-row .actrow-stat > span { text-align:right; font-size:13px; font-weight:700; color:var(--brand-ink-muted); font-variant-numeric:tabular-nums; }
.activity-summary-row .actrow-stat > .actrow-pay { text-align:right; font-variant-numeric:tabular-nums; }
.activity-summary-row .activity-issue { margin:0; display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.activity-summary-row .activity-edited-sum { margin:0; }
@media (max-width:900px) {
  .activity-summary-row { display:block; }
  .activity-summary-row .actrow-head { grid-column:1; }
  .activity-summary-row .actrow-biz { grid-column:1; }
  .activity-summary-row .actrow-stat { grid-column:1 / -1; grid-template-columns:52px 66px 1fr; }
  .activity-summary-row .actrow-stat > .actrow-pay { text-align:left; }
  .activity-summary-row .activity-issue { grid-column:1 / -1; justify-content:flex-start; }
}

/* 동작 칸도 왼쪽 기준 — 다른 칸과 같은 자 (남현우 님 2026-09-14) */
@media (min-width:900px) {
  .dense-table th.c-act, .dense-table td.c-act { text-align:left; width:auto; white-space:nowrap; padding-right:16px; }
  .dense-table td.c-act .pt-phone-call-icon { margin:0 6px 0 0; }
  .dense-table td.c-act .pt-phone-call-icon:last-child { margin-right:0; }
}

/* 동작 칸은 어느 탭에서나 같은 폭 — 빈 칸이 쪼그라들어 칸 사이가 달라 보이던 것 (2026-09-14) */
@media (min-width:900px) {
  .dense-table th.c-act, .dense-table td.c-act { width:104px; min-width:104px; }
  .dense-table td.is-none { color:var(--brand-ink-muted); font-weight:600; }
}

/* 활동 위 줄 여섯 칸 — 년월·사업단·사업명·그룹·찾기·급여명세서 (2026-09-14) */
@media (min-width:761px) {
  .activity-toolbar { grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1.2fr) auto; }
}
@media (max-width:760px) { .activity-toolbar { grid-template-columns:1fr 1fr; } }

/* ══ 값이 있는 것은 검정, 정해지지 않은 것만 회색 (대표님 2026-09-14) ══ */
/* 활동 줄: 사업명·그룹·사업단, 일수·시간 모두 정해져 있는 값이다 */
.activity-summary-row .actrow-biz { color:var(--brand-ink); font-weight:700; }
.activity-summary-row .actrow-biz .field-muted { color:var(--brand-ink); font-weight:600; font-size:13px; }
.activity-summary-row .actrow-stat > span { color:var(--brand-ink); }
/* 통화 줄: 사업명·담당자도 정해져 있는 값 */
.call-card-simple .call-card-biz-name, .call-card-simple .call-card-manager-inline { color:var(--brand-ink); }
/* 표: 값이 없는 칸만 회색 (이미 그렇지만 규칙으로 못 박는다) */
.dense-table td { color:var(--brand-ink); }
.dense-table td.is-none, .dense-table td .pt-site.is-empty { color:var(--brand-ink-muted); font-weight:600; }
/* 참여자 카드의 사업단 괄호도 값이다 — 크기만 작게 두고 색은 검정 */
.pt-detail-field .pt-field-value .field-muted { color:var(--brand-ink); }

/* ══ 근로계약서 · 근무스케줄표 줄 맞추기 (2026-09-14) ══ */
/* 제목은 한 줄로, 설명은 아랫줄로 — 좁아도 제목이 안 꺾인다 */
.sched-head { display:block; margin-bottom:8px; }
.sched-head strong { display:block; white-space:nowrap; font-size:14px; font-weight:700; color:var(--brand-ink); }
.sched-head .field-muted { display:block; margin-top:3px; font-size:12px; line-height:1.6; white-space:normal; }
/* 줄: 이름은 왼쪽에서 늘어나고 단추는 오른쪽 끝에 모인다 */
.sched-row { align-items:center; gap:8px; padding:8px 10px; }
.sched-row > span { flex:1 1 220px; min-width:0; }
.sched-row > span > b { font-weight:700; }
.sched-row > small.field-muted { flex:0 0 auto; white-space:nowrap; }
.sched-row .btn { flex:0 0 auto; white-space:nowrap; }
.sched-row .wd-time { flex:0 0 auto; }
.sched-row .btn:first-of-type { margin-left:auto; }
@media (max-width:640px) {
  .sched-row > span { flex:1 1 100%; }
  .sched-row .btn:first-of-type { margin-left:0; }
}

/* ══ 찾기 줄과 아래 줄 사이 여백·글자 (2026-09-14) — 여백은 4의 배수, 글자는 본문 14 ══ */
.search input {
  height:var(--h-md); padding:0 12px 0 36px;        /* 40 — 다른 칸과 같은 키 */
  font-size:var(--fs-body); font-weight:600;
}
.search::before { left:14px; }
/* 찾기 줄 아래 드롭다운 줄: 6/2 → 12/8 */
.pt-quick-row { margin:12px 0 8px; gap:8px; }
.pt-quick-row .select-soft, .pt-quick-row .dd-btn.select-soft { height:var(--h-md); font-size:var(--fs-body); }
.pt-quick-row .btn, .pt-quick-row .btn-sm { height:var(--h-md); min-height:var(--h-md); font-size:var(--fs-body); }
.pt-filter-btn { width:var(--h-md); height:var(--h-md); }
/* 개수 줄도 한 단계 키우고 위아래 여백 12 */
.pt-toolbar-top { margin-top:12px; margin-bottom:12px; }
.pt-total-count { font-size:var(--fs-body); }
.pt-filter-tags { margin-bottom:12px; gap:6px; }
.pt-filter-tags:empty { margin-bottom:0; }

/* ══ 휴대폰 활동 화면 다시 (남현우 님 2026-09-15) ══════════════════════════════
   캡처 2장: 목록이 좌우로 흔들림 · 가독성 떨어짐 · 요약 다섯 장 옆이 빔.
   디자이너 피드백(디자인참고(온다정만).fig) 온다정 5번:
     "목록의 모든 정보가 비슷한 중요도로 보임 → 이름·사업·상태를 우선 강조" 를 따른다. */

/* ① 가로로는 어느 화면에서도 굴리지 않는다.
      목록 판이 격자라 minmax(0,1fr) 이 없으면 긴 줄 하나가 판을 넓혀 버린다. */
.activity-summary-list { grid-template-columns:minmax(0,1fr); overflow-x:hidden; }
body:not(.list-view-cards) .activity-summary-list { overflow-x:hidden; }
/* 휴대폰에서는 판 안에 또 창을 만들지 않는다 — 페이지째 내린다 */
@media (max-width:900px) {
  .activity-summary-list, body:not(.list-view-cards) .activity-summary-list {
    max-height:none; overflow-y:visible; overflow-x:hidden;
  }
}

/* ② 한 줄을 세 층으로 — 이름·활동비 / 사업 / 일수·시간·상태 */
@media (max-width:900px) {
  .activity-summary-row {
    display:flex !important; flex-wrap:wrap; align-items:baseline;
    column-gap:8px; row-gap:8px; padding:12px 12px 12px 16px;
  }
  .activity-summary-row > * { min-width:0; }
  /* 1층 */
  .activity-summary-row .actrow-head { order:1; flex:1 1 auto; }
  .activity-summary-row .actrow-name,
  .activity-summary-row .actrow-head strong {
    font-size:15px; font-weight:700; line-height:1.4;
    white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all;
  }
  .activity-summary-row .actrow-pay {
    order:2; flex:0 0 auto; margin-left:auto;
    font-size:15px; font-weight:700; text-align:right;
  }
  /* 2층 — 사업명·그룹은 본문 크기, 사업단은 한 단계 작게(색은 검정 그대로). 접혀도 되고 잘리지 않는다 */
  .activity-summary-row .actrow-biz {
    order:3; flex:1 1 100%; font-size:13px; line-height:1.5;
    white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all;
  }
  .activity-summary-row .actrow-biz .actrow-unit { font-size:12px; font-weight:600; }
  /* 3층 */
  .activity-summary-row .actrow-stat {
    order:4; flex:0 0 auto; display:flex; gap:12px; grid-template-columns:none;
  }
  .activity-summary-row .actrow-stat > span { text-align:left; font-size:13px; font-weight:700; }
  .activity-summary-row .activity-issue { order:5; flex:0 1 auto; margin:0; display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-start; }
  .activity-summary-row .activity-edited-sum { order:6; flex:0 1 auto; margin:0; }
  /* 알약이 화면보다 길어지면 접힌다 — 삐져나가지 않는다 */
  .activity-summary-row .chip { max-width:100%; height:auto; min-height:22px; padding:2px 9px; white-space:normal; }
}

/* ③ 요약 카드: 여섯 칸 격자로 3+3 / 2+2+2 — 빈 칸이 안 생긴다 */
@media (max-width:640px) {
  .astat-row { grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; }
  .astat { grid-column:span 3; padding:12px 12px 12px 14px; }
  .astat .v { font-size:20px; }
  /* 활동만 다섯 장이다. 제일 중요한 둘(참여자·활동비)을 위층에 */
  #activityStats .astat:nth-child(1) { order:1; grid-column:span 3; }
  #activityStats .astat:nth-child(4) { order:2; grid-column:span 3; }
  #activityStats .astat:nth-child(2) { order:3; grid-column:span 2; }
  #activityStats .astat:nth-child(3) { order:4; grid-column:span 2; }
  #activityStats .astat:nth-child(5) { order:5; grid-column:span 2; }
  #activityStats .astat:nth-child(2), #activityStats .astat:nth-child(3), #activityStats .astat:nth-child(5) {
    padding:10px 8px 10px 12px;
  }
  #activityStats .astat:nth-child(2) .k, #activityStats .astat:nth-child(3) .k, #activityStats .astat:nth-child(5) .k { font-size:11px; }
  #activityStats .astat:nth-child(2) .v, #activityStats .astat:nth-child(3) .v, #activityStats .astat:nth-child(5) .v { font-size:17px; }
  #activityStats .astat:nth-child(2) .v small, #activityStats .astat:nth-child(3) .v small, #activityStats .astat:nth-child(5) .v small { font-size:11px; }
  #activityStats .astat:nth-child(2) .s, #activityStats .astat:nth-child(3) .s, #activityStats .astat:nth-child(5) .s { font-size:11px; line-height:1.4; }
}

/* ④ 급여명세서 단추가 반 칸만 차지하고 옆이 비었다 — 한 줄을 다 쓴다 */
@media (max-width:760px) {
  .activity-payslip-field { grid-column:1 / -1; }
  .activity-payslip-field label { display:none; }
  .activity-payslip-btn { width:100%; }
}

/* ⑤ PC: 활동비가 제 세로줄을 갖는다 (일수·시간 묶음에서 꺼냈다) */
@media (min-width:900px) {
  .activity-summary-row {
    grid-template-columns: minmax(120px, 1.1fr) minmax(0, 1.5fr) 124px 104px minmax(0, auto) auto;
  }
  .activity-summary-row .actrow-stat { grid-template-columns:56px 68px; }
  .activity-summary-row .actrow-pay { text-align:right; font-variant-numeric:tabular-nums; }
}

/* ══ 나머지 화면에도 같은 자 — 휴대폰 390 으로 훑어 나온 것 (2026-09-15) ══════════ */

/* ① 발송대상 줄: 드롭다운 셋 + 단추가 한 줄에 몰려 글자가 다 잘렸다.
      사업명은 값이 길어 제 줄을 통째로 쓰고, 그룹과 추가 단추가 아랫줄을 반씩 나눈다. */
/*    ※ 우리가 그린 드롭다운은 select 를 display:contents 인 껍데기로 감싸므로,
         줄의 실제 식구는 .dd-btn 과 단추다. 그래서 .dd-btn 을 잡아야 한다. */
@media (max-width:640px) {
  .cs-tgt-selrow { flex-wrap:wrap; gap:8px; }
  .cs-tgt-selrow .dd-btn.cs-tgt-sel, .cs-tgt-selrow > .cs-tgt-sel { flex:1 1 100%; min-width:0; }
  .cs-tgt-selrow [data-dd-for="bcGroupSel"],
  .cs-tgt-selrow [data-dd-for="msgGroupSel"] { flex:1 1 calc(50% - 4px); }
  .cs-tgt-selrow > .btn { flex:1 1 calc(50% - 4px); height:var(--h-md); }
  .cs-tgt-selrow .dd-btn.cs-tgt-sel, .cs-tgt-selrow > .cs-tgt-sel { height:var(--h-md); font-size:var(--fs-body); }
}

/* ② 시간대별 눈금은 칸(9px)보다 글자가 길다. 잘라 놓으면 '00시' 가 '0(' 로 보인다.
      눈금은 네 칸에 하나씩만 적혀 옆이 비어 있으므로 넘쳐 보여도 겹치지 않는다. */
.call-stats-chart { overflow:visible; }
.call-stats-xbar { overflow:visible; }
.call-stats-xbar-label { overflow:visible; text-overflow:clip; }

/* ③ 우리가 그린 드롭다운은 원래 select 자리에 단추를 세운다.
      #id 로 너비를 정해 둔 CSS 는 단추를 못 잡으므로 data-dd-for 로도 잡는다. */
.call-stats-filter-row #callStatsDays,
.call-stats-filter-row [data-dd-for="callStatsDays"] { flex:0 0 112px; width:112px; }
.call-stats-filter-row .dd-btn.call-stats-select { flex:1 1 auto; min-width:0; }

/* 그룹 칸과 추가 단추는 아랫줄을 반씩 나눈다 (2026-09-15).
   앞 규칙이 .dd-btn.cs-tgt-sel 로 촘촘해서 눌렸다 — 같은 무게로 올린다. */
@media (max-width:640px) {
  .cs-tgt-selrow .dd-btn[data-dd-for="bcGroupSel"],
  .cs-tgt-selrow .dd-btn[data-dd-for="msgGroupSel"] { flex:1 1 calc(50% - 4px); }
}

/* ══ 요약 카드에 아이콘 배지 + 한 판에 강조는 한 장만 (디자이너 .fig 참고 시안, 2026-09-15) ══ */
.astat .k { display:flex; align-items:center; gap:6px; }
.astat-ic {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:20px; height:20px; border-radius:8px;
  background:var(--brand-surface); color:var(--brand-ink-muted);
}
.astat-ic svg { width:13px; height:13px; }
.astat.is-accent .astat-ic { background:#fff; color:var(--brand-primary); }
.astat.is-warn   .astat-ic { background:#fffaeb; color:#b54708; }
.astat.is-ok     .astat-ic { background:#ecfdf3; color:#027a48; }
/* 강조 카드 한 장 — 시안은 꽉 채우지만 빨강으로 채우면 '문제' 로 읽힌다. 옅은 분홍 바탕까지만 */
.astat.is-accent { background:var(--brand-primary-tint); border-color:var(--brand-primary-soft); }
/* 휴대폰의 작은 카드 셋은 배지도 한 치수 작게 */
@media (max-width:640px) {
  #activityStats .astat:nth-child(2) .astat-ic,
  #activityStats .astat:nth-child(3) .astat-ic,
  #activityStats .astat:nth-child(5) .astat-ic { width:18px; height:18px; border-radius:5px; }
  #activityStats .astat:nth-child(2) .astat-ic svg,
  #activityStats .astat:nth-child(3) .astat-ic svg,
  #activityStats .astat:nth-child(5) .astat-ic svg { width:12px; height:12px; }
}

/* ══ 활동 상세 모달 다듬기 (남현우 님 2026-09-15) ══════════════════════════ */

/* ① 본문 좌우 여백을 위쪽 판과 같은 16 으로 — 아래 단추 셋만 끝에 붙어 보이던 것 */
@media (max-width:760px) {
  .activity-record-modal .modal-body { padding-left:16px; padding-right:16px; padding-bottom:16px; }
  .actm-docbar { margin:12px 0 4px; }
  .actm-docbar .btn { height:var(--h-md); min-height:var(--h-md); padding:0 6px; font-size:12px; }
}

/* ④ 늘 있는 안내와 도구는 흰 판. 주황 점선은 '확인 필요' 인 줄에만 (색 규칙 2026-09-14) */
.sched-row.is-plain {
  border:1px solid var(--brand-line); border-style:solid; border-radius:var(--radius-md);
  background:var(--brand-card); padding:10px 12px;
}
.sched-row.is-plain > span { color:var(--brand-ink); }

/* ②③ 새 계약서 줄: 설명 한 줄 · 날짜 두 칸 · 단추 둘 */
.ct-date { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 calc(50% - 4px); }
/* '계약 종료 비우면 12월 31일' 이 한 줄로 고정돼 좁은 화면에서 삐져나갔다 (2026-09-17) */
.ct-date > span { font-size:11px; font-weight:700; color:var(--brand-ink-muted);
  white-space:normal; word-break:keep-all; line-height:1.4; }
.ct-date > span small { font-weight:600; }
.ct-date input.wd-time { width:100%; min-width:0; height:var(--h-md); }
.contract-new-row { align-items:flex-end; row-gap:10px; }
.contract-new-row > span { flex:1 1 100%; }
.contract-new-row .btn { flex:1 1 calc(50% - 4px); height:var(--h-md); }
@media (min-width:761px) {
  .contract-new-row > span { flex:1 1 220px; }
  .ct-date { flex:0 0 150px; }
  .contract-new-row .btn { flex:0 0 auto; }
}

/* 날짜 칸도 다른 입력칸과 같은 자로 (2026-09-15) — 혼자 각진 모서리에 진한 테두리였다 */
.ct-date input.wd-time {
  box-sizing:border-box; border:1px solid var(--brand-line); border-radius:var(--radius-md);
  background:var(--brand-card); color:var(--brand-ink);
  padding:0 10px; font-family:inherit; font-size:var(--fs-body, 14px); font-weight:600;
}
.ct-date input.wd-time:focus { outline:none; border-color:var(--brand-primary-soft); box-shadow:0 0 0 3px var(--brand-primary-tint); }

/* PC 폭에서도 세로줄이 서게 (2026-09-15) */
/* ② 본문 좌우 여백을 머리말과 같은 16 으로 — 아래 단추 줄만 21 이라 4 가 어긋나 있었다 */
.activity-record-modal .modal-body { padding-left:16px; padding-right:16px; }
/* ① 새 계약서: 설명은 제 줄, 날짜 둘·단추 둘은 아랫줄에 나란히 (폭이 넓어도 같은 짜임) */
@media (min-width:761px) {
  .contract-new-row > span { flex:1 1 100%; }
}

/* ③ 휴무일 달력 두 칸 (남현우 님 2026-09-15: 달력이 왼쪽에만 몰리고 오른쪽이 비었다).
      달력은 피그마 부품 폭 560 을 지켜야 칸이 넓적해지지 않으므로, 남는 자리에 목록을 옮겨 채운다. */
@media (min-width:1100px) {
  .holiday-cal-wrap {
    display:grid; grid-template-columns:560px minmax(0,1fr);
    grid-template-areas:"head list" "grid list" "legend list" "act list";
    column-gap:20px; row-gap:12px; align-items:start;
  }
  .holiday-cal-wrap > .holiday-cal-head { grid-area:head; }
  .holiday-cal-wrap > .holiday-cal-grid { grid-area:grid; }
  .holiday-cal-wrap > .holiday-cal-legend { grid-area:legend; }
  .holiday-cal-wrap > .holiday-actions { grid-area:act; }
  .holiday-cal-wrap > #holidayList { grid-area:list; align-self:stretch; }
}
/* ① 숨겨 둔 select 자리에는 단추도 없다 — CSS 로도 한 번 더 못 박는다 */
.dd-btn.phone-prompt-hidden { display:none !important; }

/* 안내멘트 단추 둘은 한 줄에 반씩 (휴대폰, 2026-09-15) */
@media (max-width:760px) {
  .phone-prompt-row { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:8px; }
  .phone-prompt-row > label, .phone-prompt-row .phone-prompt-current { grid-column:1 / -1; }
  .phone-prompt-row .btn { height:var(--h-md); min-height:var(--h-md); }
}

/* 급여명세서 — 경고(빨강)와 알림(정보)을 나눈다 (2026-09-15). 선택 항목이 비어도 문제가 아니다 */
.payslip-notice { color:var(--brand-info); font-weight:700; }

/* 명단에서 정하는 자리 — 화면에서는 보여주기만 (대표님 2026-09-13, 적용 2026-09-15) */
.from-roster-note { margin:0 0 8px; font-size:12px; line-height:1.6; color:var(--brand-ink-muted); }
.from-roster-note b { color:var(--brand-ink); font-weight:700; }
.admin-manager-row .chip { flex:0 0 auto; }

/* 드롭다운 찾기 칸 (디자이너 피드백 6번, 2026-09-15) */
.dd-search { position:sticky; top:0; z-index:1; padding:6px 6px 8px; background:#fff; border-bottom:1px solid var(--brand-line); }
.dd-search-input {
  width:100%; box-sizing:border-box; height:32px; padding:0 10px;
  border:1px solid var(--brand-line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:13px; font-weight:600; color:var(--brand-ink); background:var(--brand-surface);
}
.dd-search-input:focus { outline:none; border-color:var(--brand-primary-soft); background:#fff; box-shadow:0 0 0 3px var(--brand-primary-tint); }
.dd-opt[hidden], .dd-group[hidden] { display:none !important; }

/* 프로필 메뉴 묶음 이름 (디자이너 피드백 3번, 2026-09-15) */
.user-drop-group { padding:8px 12px 4px; font-size:11px; font-weight:700; color:var(--brand-ink-muted); letter-spacing:.02em; }

/* 설정 탭은 연락처 탭과 같은 자 (대표님 2026-09-14, 적용 2026-09-15) */
.settings-tab {
  height:var(--h-sm2, 32px); min-height:32px;
  padding:4px 20px; font-size:13px; font-weight:700; border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
}

/* ══ 통화 화면을 규칙대로 (대표님 2026-09-15). 화면규칙_20260915.md 참고 ══ */

/* ⑤ 요약: 왼쪽 굵은 색막대를 뺀다.
      "이 앞에 굵은 색상을 붙이는 걸로 얘의 특성을 규정짓지 말라. 아이콘으로 구분하라." */
.astat::before { display:none; }
.astat { padding-left:14px; }
/* ⑤ 요약은 '이것만 봐도 아래가 파악되는' 자리다 — 이름을 회색으로 죽이지 않는다 */
.astat .k { color:var(--brand-ink); font-weight:700; }
/* 색막대를 뺀 자리를 테두리·바탕으로 대신한다 (아이콘 색과 같은 결) */
.astat.is-warn { border-color:#fec84b; background:#fffcf5; }
.astat.is-ok   { border-color:#a6f4c5; background:#f6fef9; }

/* ① 개수: 단위 대신 이름표 */
.call-count-people { font-weight:600; }

/* ③ 수신·발신 표시는 늘 왼쪽 맨 앞. 좁은 화면 */
.call-card-simple { grid-template-columns:20px minmax(0,1fr) auto 34px; }
.call-card-simple > .call-card-direction-icon { grid-column:1; margin:0; width:16px; }
/* ④ 오른쪽 두 층 — 크기를 맞추고 시각만 살린다. 숫자는 같은 폭으로 */
.call-card-time { gap:2px; }
.call-card-timestamp { font-size:13px; font-weight:700; color:var(--brand-ink); font-variant-numeric:tabular-nums; }
.call-card-when { font-size:13px; font-weight:600; color:var(--brand-ink-muted); font-variant-numeric:tabular-nums; line-height:1.35; white-space:nowrap; }

@media (min-width:900px) {
  /* 감싸개가 display:contents 라 안엣것이 바로 칸이 된다 — 자리를 못 박아 둔다 */
  .call-card-simple { grid-template-columns:20px minmax(0,1fr) minmax(0,auto) auto auto 34px; }
  .call-card-simple > .call-card-direction-icon { grid-column:1; }
  .call-card-simple .call-card-name  { grid-column:2; }
  .call-card-simple .call-card-sub   { grid-column:3; }
  .call-card-simple .call-card-state { grid-column:4; }
  .call-card-simple .call-card-time  { grid-column:5; }
  .call-card-simple .call-card-dial  { grid-column:6; }
  /* 오른쪽은 넓은 화면에서도 두 층 그대로 — 한 줄로 눕히면 날짜와 시각이 섞여 보인다 */
  .call-card-simple .call-card-time { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:2px; }
  .call-card-simple .call-card-time > div { display:block; text-align:right; }
}

/* ② 날짜 머리는 이제 그리지 않는다 — 남은 자국도 지운다 */
.call-day { display:none; }

/* 통화 줄 키를 모두 같게 (대표님 2026-09-15) */
/* 이름줄은 한 줄로 둔다. 뒤에 붙는 '메모' 표시가 줄을 넘기면
   목록 키가 줄마다 달라져 들쭉날쭉해 보인다 (2026-09-17 이관 목록). */
.call-card-name { display:inline-flex; align-items:center; gap:6px; min-width:0;
  flex-wrap:nowrap; white-space:nowrap; overflow:hidden; max-width:100%; }
.call-card-name .call-route-caller { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.call-card-simple .call-memo-badge { margin-right:0; flex:0 0 auto; }
.call-card-simple .call-card-sub { white-space:nowrap; }
/* 자세히 칸으로 옮긴 이관·처리 내역 */
.call-detail-panel > .call-transfer-meta { margin:0 0 10px; }

/* ── 통화 줄을 위와 아래로 쌓는다 (대표님 2026-09-15: "이 칸에 위와 아래로 나와야 돼") ── */
/* 넓은 화면에서 감싸개를 지워 옆으로 펴던 것을 되돌린다 — 가운데가 크게 비었다 */
@media (min-width:900px) {
  .call-card-simple > .call-card-left { display:flex; align-items:center; min-width:0; }
  .call-card-simple .call-card-info { display:grid; }
}
.call-card-simple { grid-template-columns:20px minmax(0,1fr) auto 34px; }
.call-card-simple > .call-card-direction-icon { grid-column:1; }
.call-card-simple > .call-card-left { grid-column:2; width:100%; }
.call-card-simple > .call-card-time { grid-column:3; }
.call-card-simple > .call-card-dial { grid-column:4; }
.call-card-simple .call-card-info {
  display:grid; width:100%; min-width:0;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  grid-template-areas:"name name" "sub state";
  column-gap:8px; row-gap:2px; align-items:center;
}
.call-card-simple .call-card-name  { grid-area:name; }
.call-card-simple .call-card-sub   { grid-area:sub; min-width:0; }
/* 표는 좁은 화면에서도 같은 자리에 — 화면마다 짜임이 달라지지 않게 */
.call-card-simple .call-card-state { grid-area:state; display:inline-flex; align-items:center; gap:4px; justify-self:start; }

/* ④ 정상인 상태에는 색을 쓰지 않는다. 그래야 색이 뜨면 눈이 간다 */
.astat.is-ok { border-color:var(--brand-line); background:#fff; }

/* 표가 있든 없든 줄 키가 같게 (대표님 2026-09-15) — 표 22, 글자 18 이 달라 6px 어긋났다 */
.call-card-simple .call-card-info { grid-template-rows:auto 22px; }
.call-card-simple .call-card-sub { line-height:22px; }
.call-card-simple .call-card-state .chip { height:20px; }

/* 정상인 상태에는 색을 쓰지 않는다 — 아이콘도 중립으로 */
.astat.is-ok .astat-ic { background:var(--brand-surface); color:var(--brand-ink-muted); }

/* ── 연락처 툴바와 곡률 (대표님 2026-09-15) ── */

/* ① 누르는 것은 전부 오른쪽에. 개수만 왼쪽 (space-between 이라 단추가 가운데로 흩어졌다) */
.pt-toolbar-top { justify-content:flex-start; }
.pt-toolbar-top > .pt-total-count { margin-right:auto; }

/* ② 한 줄에 놓인 것은 그 줄을 꽉 채운다 — 위 검색칸이 꽉 쓰기로 했으니 이 줄도 그렇게 */
.pt-quick-row .select-soft,
.pt-quick-row .dd-btn.select-soft { max-width:none; flex:1 1 auto; min-width:0; }
.pt-quick-row .btn, .pt-quick-row .pt-filter-btn { flex:0 0 auto; }

/* ③ 누르는 것과 입력칸은 8px. 알약은 표(칩)·배지·막대에만 */
.btn { border-radius:var(--radius-sm); }
.select-soft, .dd-btn.select-soft { border-radius:var(--radius-sm); }
.search input { border-radius:var(--radius-sm); }
.calltab, .cs-target-tab { border-radius:var(--radius-sm); }
.pt-filter-btn { border-radius:var(--radius-sm); }
.dd-btn { border-radius:var(--radius-sm); }

/* 자리를 미는 것은 개수 하나만 — 단추끼리는 붙어서 오른쪽 끝에 모인다 (대표님 2026-09-15) */
.pt-toolbar-top > .view-toggle { margin-left:0; }

/* ④ 활동 줄에서 색막대를 뺀다 (대표님 2026-09-15: "이 앞에 굵은 색상을 붙이는 걸로 규정짓지 말라") */
body:not(.list-view-cards) .activity-summary-row.is-selected { border-left:0; background:var(--brand-primary-tint); }
body:not(.list-view-cards) .activity-summary-row.has-issue { border-left:0; }
/* ③ 표가 없어도 자리를 지킨다 — 줄 키가 같아야 한다 */
.activity-issue { display:inline-flex; align-items:center; min-height:20px; }

/* ── DESIGN.md 에 맞춘 마무리 (2026-09-15). 우리만의 디자인 md 가 기준이다 ── */
/* 보조 글자는 한 가지 회색·한 가지 굵기 */
.muted, .is-none, .pt-loading { color:var(--brand-ink-muted); }

/* 명단 반영 결과 — 무엇이 들어갔고 무엇이 안 됐는지 (2026-09-15) */
.rs-applied { margin-top:6px; font-size:13px; font-weight:600; color:var(--brand-ink); line-height:1.7; }
.rs-applied-bad {
  margin-top:8px; padding:10px 12px; border:1px solid var(--brand-danger); border-radius:var(--radius-sm);
  background:#fef3f2; color:#b42318; font-size:13px; font-weight:600; line-height:1.7;
}


/* 명단 업로드 — 통합양식일 때 '무엇이 들어가는지' (2026-09-16) */
.rs-sheetlist { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.rs-sheetchip {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--h); padding: 0 12px; border-radius: var(--r-pill);
  background: var(--primary-soft); color: var(--text);
  font-size: var(--btn-fs); font-weight: var(--btn-fw);
}
.rs-sheetchip b { font-weight: 700; }


/* 미리보기 — 시트별 줄 딱지 (2026-09-16) */
.rs-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: var(--h-sm); padding: 0 8px; margin-right: 8px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: var(--btn-fw);
  font-style: normal; vertical-align: middle;
}
.rs-tag.new  { background: var(--primary-soft); color: var(--primary); }
.rs-tag.chg  { background: var(--primary-soft); color: var(--primary); }
.rs-tag.same { background: var(--line); color: var(--muted); }
.rs-was { color: var(--muted); }

/* 단추는 손을 올리면 단추로 보여야 한다 — 통화·연락처·활동만 반응하고 나머지는 없었다 */
.btn { transition: background .12s ease, transform .12s ease, box-shadow .12s ease; }
.btn-soft:hover { background: var(--primary-soft); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[disabled]:hover { background: var(--solid); transform: none; box-shadow: none; }


/* 명단 미리보기 — 자료를 보는 화면답게 (2026-09-16) */
/* 한글은 낱말 경계에서 끊어야 한다. 기본값은 '사회서비스형)' 을 '회서비스형)' 으로 자른다 */
.rs-warnbox { word-break: keep-all; overflow-wrap: anywhere; line-height: 1.6; }
/* 마지막 줄에 하나만 남지 않게 격자로 놓는다. 칸 수는 화면에서 정한다 (2026-09-16) */
/* 칸 수는 개수로 정한다 — 재지 않는다 (2026-09-16). --cols 는 화면에서 넣어 준다 */
.rs-bizchips {
  display: grid; gap: 6px; margin: 8px 0 6px;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
@media (max-width: 1100px) { .rs-bizchips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .rs-bizchips { grid-template-columns: 1fr; } }
.rs-bizchip {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 24px; padding: 4px 12px; border-radius: 999px;
  background: #fff; border: 1px solid #fde68a; color: #9a3412;
  font-size: 12px; font-weight: 600;
  /* 칸이 좁아도 글자를 자르지 않는다. 낱말 경계에서 넘긴다 */
  white-space: normal; word-break: keep-all; text-align: center;
}
.rs-bizchip i { font-style: normal; color: #8a94a6; }
.rs-warnfoot { font-size: 12px; color: #9a3412; }
/* 찾는 칸은 걷어냈다 — 페이지+드롭다운으로 바꿨다 (2026-09-16) */
.rs-group h4 b { font-weight: 700; }


/* 명단 미리보기 — 시트별 반영 표 (2026-09-16) */
.rs-sheets { margin: 4px 0 14px; overflow-x: auto; }
.rs-sheettbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.rs-sheettbl th, .rs-sheettbl td {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line);
  word-break: keep-all;
}
.rs-sheettbl thead th {
  font-size: 12px; font-weight: var(--btn-fw); color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.rs-sheettbl tbody tr:last-child td { border-bottom: 0; }
.rs-sheetname { font-weight: 700; white-space: nowrap; width: 120px; }
.rs-sheettbl b { font-weight: 700; }
.rs-sheettbl b.new { color: var(--success); }
.rs-sheettbl b.chg { color: var(--primary); }
.rs-sheettbl b.gone { color: var(--danger); }
.rs-sheettbl b.stop { color: var(--danger); }
.rs-lock { color: var(--muted); }


/* 명단 미리보기 — 페이지 + 드롭다운 필터 (2026-09-16) */
.rs-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.rs-filters .select-soft { min-width: 140px; }
.rs-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
/* 쪽 넘김 단추도 우리 단추(.btn 알약)를 쓴다. 모양을 따로 만들지 않는다 (2026-09-16) */
.rs-pg[disabled] { color: var(--muted); cursor: default; box-shadow: none; transform: none; }
.rs-pg[disabled]:hover { transform: none; }
.rs-pgno { font-size: var(--btn-fs); font-weight: var(--btn-fw); min-width: 56px; text-align: center; }


/* 파일 고르기 — 브라우저 기본 단추를 숨기고 우리 단추를 씌운다 (2026-09-16) */
.rs-file-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rs-filebtn { display: inline-flex; align-items: center; cursor: pointer; }

.rs-sheets-head { margin: 0 0 6px; font-size: 14px; font-weight: var(--btn-fw); }


/* ── 눌리는 것은 손을 올리면 반응한다 (2026-09-16) ──────────────
   `.btn` 에만 걸어 두었더니 탭·구획단추는 반응이 없었다.
   새 단추를 만들면 **여기 이름만 더한다.** 흩어 놓으면 또 빠진다.
   고른 것(.active)은 이미 자기 색이 있으니 건드리지 않는다. */
.settings-tab,
.cs-page-tab,
.cs-inner-tab,
.approval-tab,
.care-mode-tab,
.call-stats-tab,
.activity-pay-tab,
.seg-btn,
.ws-seg-btn,
.call-mode-btn,
.care-target-toggle,
.page-btn {
  transition: background .12s ease, color .12s ease;
}
.settings-tab:not(.active):not([disabled]):hover,
.cs-page-tab:not(.active):not([disabled]):hover,
.cs-inner-tab:not(.active):not([disabled]):hover,
.approval-tab:not(.active):not([disabled]):hover,
.care-mode-tab:not(.active):not([disabled]):hover,
.call-stats-tab:not(.active):not([disabled]):hover,
.activity-pay-tab:not(.active):not([disabled]):hover,
.seg-btn:not(.active):not([disabled]):hover,
.ws-seg-btn:not(.active):not([disabled]):hover,
.call-mode-btn:not(.active):not([disabled]):hover,
.care-target-toggle:not(.active):not([disabled]):hover,
.page-btn:not(.active):not([disabled]):hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.att-btn,
.cs-submit-btn,
.cs-record-btn,
.cs-var-btn,
.bc-test-send-btn,
.care-send-btn,
.missed-done-btn,
.pt-checkin-btn,
.phone-prompt-play-btn,
.lp-primary-action,
.lp-secondary-action,
.day-chip {
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.att-btn:not([disabled]):hover,
.cs-submit-btn:not([disabled]):hover,
.cs-record-btn:not([disabled]):hover,
.cs-var-btn:not([disabled]):hover,
.bc-test-send-btn:not([disabled]):hover,
.care-send-btn:not([disabled]):hover,
.missed-done-btn:not([disabled]):hover,
.pt-checkin-btn:not([disabled]):hover,
.phone-prompt-play-btn:not([disabled]):hover,
.lp-primary-action:not([disabled]):hover,
.lp-secondary-action:not([disabled]):hover,
.day-chip:not([disabled]):hover {
  background: var(--primary-soft);
}
.settings-tab:not([disabled]):active,
.cs-page-tab:not([disabled]):active,
.cs-inner-tab:not([disabled]):active,
.approval-tab:not([disabled]):active,
.care-mode-tab:not([disabled]):active,
.call-stats-tab:not([disabled]):active,
.activity-pay-tab:not([disabled]):active,
.seg-btn:not([disabled]):active,
.ws-seg-btn:not([disabled]):active,
.call-mode-btn:not([disabled]):active,
.care-target-toggle:not([disabled]):active,
.page-btn:not([disabled]):active,
.att-btn:not([disabled]):active,
.cs-submit-btn:not([disabled]):active,
.cs-record-btn:not([disabled]):active,
.cs-var-btn:not([disabled]):active,
.bc-test-send-btn:not([disabled]):active,
.care-send-btn:not([disabled]):active,
.missed-done-btn:not([disabled]):active,
.pt-checkin-btn:not([disabled]):active,
.phone-prompt-play-btn:not([disabled]):active,
.lp-primary-action:not([disabled]):active,
.lp-secondary-action:not([disabled]):active,
.day-chip:not([disabled]):active {
  transform: translateY(1px);
}
.settings-tab[disabled]:hover,
.cs-page-tab[disabled]:hover,
.cs-inner-tab[disabled]:hover,
.approval-tab[disabled]:hover,
.care-mode-tab[disabled]:hover,
.call-stats-tab[disabled]:hover,
.activity-pay-tab[disabled]:hover,
.seg-btn[disabled]:hover,
.ws-seg-btn[disabled]:hover,
.call-mode-btn[disabled]:hover,
.care-target-toggle[disabled]:hover,
.page-btn[disabled]:hover,
.att-btn[disabled]:hover,
.cs-submit-btn[disabled]:hover,
.cs-record-btn[disabled]:hover,
.cs-var-btn[disabled]:hover,
.bc-test-send-btn[disabled]:hover,
.care-send-btn[disabled]:hover,
.missed-done-btn[disabled]:hover,
.pt-checkin-btn[disabled]:hover,
.phone-prompt-play-btn[disabled]:hover,
.lp-primary-action[disabled]:hover,
.lp-secondary-action[disabled]:hover,
.day-chip[disabled]:hover {
  background: none; transform: none; box-shadow: none; cursor: default;
}


/* 통화 목록 — 받은 담당자 이름 (2026-09-16).
   '처리됨' 칩을 대신한다. 정상인 상태에 색을 붙이지 않는다. */
.call-took {
  display: inline-flex; align-items: center; height: var(--h-sm);
  font-size: 12px; font-weight: var(--btn-fw); color: var(--muted);
  white-space: nowrap;
}


/* ══ 우리 모양을 안 쓴 칸도 우리 모양으로 (2026-09-16) ══════════════
   class 를 빠뜨려도 브라우저 기본 모양이 나오면 안 된다.
   드롭다운 45곳·입력칸 66곳·글상자 9곳이 class 없이 놓여 있었다.
   하나씩 고치면 반드시 빠뜨린다 — 바탕에서 한 번에 맞춘다.
   로그인 전 화면(#loginScreen)은 건드리지 않는다. */

#appScreen select, .modal select, .cs-modal select, .modal-body select,
#appScreen input[type="text"], .modal input[type="text"], .cs-modal input[type="text"],
#appScreen input[type="search"],
#appScreen input[type="tel"],
#appScreen input[type="email"],
#appScreen input[type="password"],
#appScreen input[type="number"],
#appScreen input[type="date"],
#appScreen input[type="time"],
#appScreen input[type="month"],
#appScreen input:not([type]),
#appScreen textarea {
  border: 1px solid var(--line);
  background: var(--solid);
  color: var(--text);
  border-radius: 12px;              /* 입력칸에 알약 모서리를 주지 않는다 */
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
}
#appScreen select, .modal select, .cs-modal select, .modal-body select,
#appScreen input[type="text"], .modal input[type="text"], .cs-modal input[type="text"],
#appScreen input[type="search"],
#appScreen input[type="tel"],
#appScreen input[type="email"],
#appScreen input[type="password"],
#appScreen input[type="number"],
#appScreen input[type="date"],
#appScreen input[type="time"],
#appScreen input[type="month"],
#appScreen input:not([type]) {
  height: var(--h-md);
  min-height: var(--h-md);
  padding: 0 12px;
}
#appScreen textarea { padding: 10px 12px; line-height: 1.5; }

/* 드롭다운 화살표는 우리가 그린다 — 브라우저 것이 운영체제마다 다르다 */
#appScreen select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
#appScreen select::-ms-expand { display: none; }

#appScreen select:focus,
#appScreen input:focus,
#appScreen textarea:focus {
  border-color: rgba(37, 99, 235, .4);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
}
#appScreen input[disabled], #appScreen select[disabled], #appScreen textarea[disabled] {
  background: var(--bg); color: var(--muted); cursor: default;
}

/* 고르는 칸은 그대로 둔다 — 위 규칙에 걸리면 안 된다 */
#appScreen input[type="radio"],
#appScreen input[type="checkbox"],
#appScreen input[type="file"],
#appScreen input[type="range"],
#appScreen input[type="color"] {
  height: auto; min-height: 0; padding: 0; border: 0; background: none;
  border-radius: 0; box-shadow: none;
}

/* 드롭다운 모양이 둘로 갈려 있었다 — `.select-soft`(알약)를 `.select-drawn` 쪽으로 모은다.
   이름은 그대로 두어 화면 코드를 안 고쳐도 되게 한다 (2026-09-16) */
#appScreen .select-soft {
  border-radius: 12px;
  height: var(--h-md);
  padding: 0 36px 0 12px;
  font-size: 14px;
  font-weight: 600;
}

/* `.text-input` 은 쓰이는데 규칙이 없었다. 위 바탕 규칙을 그대로 받는다. */
#appScreen .text-input { width: 100%; }


/* ══ 남현우 님 지적 다섯 가지 (2026-09-16) ══════════════════════════

   ② 모달은 화면 밖에 있다 — `#appScreen` 안이 아니라 `body` 바로 아래에 138개가 놓여 있다.
      그래서 어제 넣은 바탕 규칙이 안 걸리고 드롭다운이 회색 기본 모양으로 보였다. */
.modal select, .cs-modal select, .modal-body select,
.modal input[type="text"], .modal input[type="search"], .modal input[type="tel"],
.modal input[type="email"], .modal input[type="number"], .modal input[type="date"],
.modal input[type="time"], .modal input[type="month"], .modal input:not([type]),
.modal textarea, .cs-modal textarea {
  border: 1px solid var(--line);
  background: var(--solid);
  color: var(--text);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
}
.modal select, .cs-modal select, .modal-body select,
.modal input[type="text"], .modal input[type="search"], .modal input[type="tel"],
.modal input[type="email"], .modal input[type="number"], .modal input[type="date"],
.modal input[type="time"], .modal input[type="month"], .modal input:not([type]) {
  height: var(--h-md); min-height: var(--h-md); padding: 0 12px;
}
.modal textarea, .cs-modal textarea { padding: 10px 12px; line-height: 1.5; }
.modal select, .cs-modal select, .modal-body select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}
.modal select:focus, .modal input:focus, .modal textarea:focus,
.cs-modal select:focus, .cs-modal input:focus, .cs-modal textarea:focus {
  border-color: rgba(37, 99, 235, .4); box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
}
.modal input[type="radio"], .modal input[type="checkbox"], .modal input[type="file"] {
  height: auto; min-height: 0; padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none;
}

/* ③⑦ 돋보기와 글자가 겹치던 것 — 바탕 규칙이 왼쪽 여백 36px 을 덮었다.
      아이콘 자리는 돌려준다. 내가 만든 회귀다. */
#appScreen .search input,
.modal .search input {
  padding: 0 12px 0 36px;
}

/* ① 활동 도구줄 — 칸이 다섯인데 격자가 넷이었다.
      다섯으로 맞추고, 월 칸이 제 칸을 넘치지 않게 한다. */
.activity-toolbar {
  /* 칸이 여섯 개다 — 월 · 사업단 · 사업명 · 그룹 · 찾기 · 급여명세서 (2026-09-16).
     다섯으로 잡았더니 급여명세서가 혼자 다음 줄로 밀렸다. */
  grid-template-columns:
    minmax(150px, 0.8fr)        /* 월 */
    repeat(3, minmax(0, 1fr))   /* 사업단 · 사업명 · 그룹 */
    minmax(150px, 1fr)          /* 찾기 */
    auto;                       /* 급여명세서 */
  column-gap: 12px;
  row-gap: 12px;
}
.activity-payslip-field { justify-self: end; align-self: end; }
@media (max-width: 1280px) {
  .activity-toolbar { grid-template-columns: minmax(140px, 0.8fr) repeat(3, minmax(0, 1fr)) auto; }
  .activity-toolbar .field:nth-child(5) { grid-column: 1 / -2; }   /* 찾기는 넓게 */
}
@media (max-width: 900px) {
  .activity-toolbar { grid-template-columns: 1fr 1fr; }
  .activity-toolbar .field:nth-child(5) { grid-column: 1 / -1; }
  .activity-payslip-field { grid-column: 1 / -1; justify-self: stretch; }
  .activity-payslip-btn { width: 100%; }
}
.activity-toolbar .field,
.activity-toolbar .field input,
.activity-toolbar .field select {
  min-width: 0; max-width: 100%; box-sizing: border-box;
}
.activity-month-field input[type="month"] { width: 100%; }

/* ④⑤ 통화 목록 — 이관은 받는 사람 이름으로. 방향 표시만 남긴다 */
.call-took.is-xfer { color: var(--primary); font-weight: var(--btn-fw); }


/* 활동 요약 — 누를 수 있는 숫자 (2026-09-16).
   숫자가 곧 그 목록으로 가는 문이다. 누를 수 있다는 것이 보여야 한다. */
.astat.is-clickable { cursor: pointer; transition: background .12s ease, box-shadow .12s ease; }
.astat.is-clickable:hover { background: var(--primary-soft); }
.astat.is-clickable.is-on { box-shadow: inset 0 0 0 2px var(--primary); }
.activity-filter-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 8px;
  border-radius: 12px; background: var(--primary-soft);
  font-size: 13px; font-weight: var(--btn-fw); color: var(--text);
}
.activity-filter-note b { font-weight: var(--btn-fw-strong); }


/* 고를 것이 없거나 하나뿐일 때 드롭다운 대신 쓰는 글자 (2026-09-16).
   칸 키는 드롭다운과 같게 둔다 — 줄이 흔들리면 안 된다. */
.dd-static {
  display: inline-flex; align-items: center;
  height: var(--h-md); min-height: var(--h-md);
  padding: 0 2px; max-width: 100%;
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-static.is-none { color: var(--muted); }
/* 고를 것이 하나뿐일 때 글자만 남으면 **칸이 사라져 보였다** (2026-09-17 모바일).
   규칙은 살리고 칸처럼 보이게 한다 — 테두리 대신 연한 바탕으로
   (네이버 증권 실측: 보이는 485개 중 테두리를 쓴 것은 8개뿐이었다). */
.dd-static { padding: 0 12px; border-radius: var(--radius-md);
  background: var(--brand-surface); width: 100%; }
.dd-static.is-none { background: var(--brand-surface); }
/* 켜 놓은 display 는 [hidden] 을 이긴다. 눌러 두지 않으면 감춰도 안 사라진다
   (2026-09-16: 전화 설정 시각 칸 네 개 밑에 '없음' 이 그대로 남아 있었다). */
.dd-static[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   선을 긋지 말고 바탕으로 가른다 (남현우 님 2026-09-17)

   "네이버 증권도 보니까 차라리 윤곽선 부분 없애는쪽으로 해서
    색만 채워서 보여주는 것도 많이하더라"

   실제로 재 봤다 (m.stock.naver.com 시가총액, 아이폰 폭 390).
     · 목록 50줄  — 위 테두리 0, 아래 테두리 0, 바탕 투명, 그림자 없음
     · 줄과 줄은 **높이 58px 와 글자 층**으로만 갈린다
     · 페이지 전체 1,489개 중 선을 쓴 것은 30개 (2%)
     · 페이지 바탕 rgb(243,245,247) — 우리 --brand-surface 와 거의 같다

   우리는 1,314개 중 83개(6.3%)가 선을 그었고, 그중 75개가 통화 카드였다.
   카드마다 네 변을 두르니 한 화면에 선이 300개다.

   그래서 **테두리를 걷고 바탕으로 가른다.** 흰 종이(목록) 위에 줄이 놓이고,
   고르거나 얹으면 그때만 바탕이 든다.
   ────────────────────────────────────────────────────────────── */

/* ── 통화 카드: 네 변을 걷고 바탕으로 ─────────────────────── */
.call-card {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 12px;
  padding: 12px 10px;
}
.call-card:hover { background: var(--brand-surface); }
.call-card.is-picked {
  border: 0;
  background: var(--brand-primary-tint);
}

/* 글자 층을 세운다. 이름만 진하고 나머지는 물러난다 —
   지금은 이름·사업·시각이 모두 진해서 눈이 어디를 봐야 할지 모른다. */
.call-card-sub { color: var(--muted); font-weight: 500; }
.call-card-timestamp { color: var(--muted); font-weight: 500; }

/* ── 목록·자세히 보기 종이: 선 대신 흰 바탕만 ─────────────── */
.call-log-body > .call-card-list,
.call-detail-pane {
  border: 0;
  box-shadow: none;
}

/* ── 활동 숫자 상자 ────────────────────────────────────── */
.astat { border: 0; background: var(--brand-surface); }
.astat.is-accent { border: 0; background: var(--brand-primary-tint); }
.astat.is-warn   { border: 0; background: #fffcf5; }
.astat.is-ok     { border: 0; background: var(--brand-surface); }

/* ── 머리줄 단추 ──────────────────────────────────────── */
.header-nav-group,
.header-bell-btn,
.header-user-btn {
  border: 0;
  background: var(--brand-surface);
}
.header-nav-group:hover,
.header-bell-btn:hover,
.header-user-btn:hover { background: var(--brand-primary-tint); }

/* ── 그 밖의 상자들 ───────────────────────────────────── */
.quick-card { border: 0; }
.call-count-people { border: 0; background: var(--brand-surface); }
.call-period-options,
.call-direction-tabs,
.call-missed-toggle { border: 0; background: var(--brand-surface); }

/* 입력칸과 표 구분선은 **그대로 둔다.**
   입력칸은 '여기를 누르세요' 를 테두리로 말하고,
   표 구분선은 한 변뿐이라 선이 늘지 않는다. 네이버도 그렇게 한다. */

/* ── 사업 이름이 시각을 밟던 것 (2026-09-17, 171줄 중 17줄) ──
   통화 줄 속은 이런 판이었다.
       칸:  minmax(0,auto)  minmax(0,1fr)
       자리: "이름 이름"
             "사업  딱지"
   첫 칸이 **사업 이름 길이만큼** 늘어난다. '아이돌봄(새싹드림)' 처럼 길면
   딱지가 오른쪽으로 밀리고, 그 뒤 시각 칸을 그대로 타고 넘었다.

   칸을 뒤집는다 — 사업 이름은 남는 자리를 쓰고, 딱지는 제 크기만 쓴다.
   자리가 모자라면 **잘라내지 않고 줄을 바꾼다** (말줄임 금지).       */
.call-card-simple .call-card-info {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(22px, auto);
}
.call-card-simple .call-card-sub {
  min-width: 0;
  white-space: normal;
  align-items: flex-start;
}
.call-card-simple .call-card-sub .call-card-biz-name,
.call-card-biz-name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}

/* ── 활동 줄 1,200개 · 연락처 칸 50개 ─────────────────────
   활동 화면 하나에 테두리 두른 줄이 1,200개였다. 한 줄에 네 변이니 선이 4,800개다.
   여기가 제일 크다. 통화와 같은 방식으로 건다 — 흰 종이 위에 줄이 놓이고,
   고르거나 얹었을 때만 바탕이 든다. 상태(고름·확인필요)는 선 대신 색 바탕으로. */
.activity-summary-row {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 12px;
}
.activity-summary-row:hover {
  border: 0;
  box-shadow: none;
  transform: none;
  background: var(--brand-surface);
}
.activity-summary-row.is-selected { border: 0; background: #f0fdf4; }
.activity-summary-row.has-issue { border: 0; background: #fffcf5; }
.activity-summary-row.has-issue:hover { border: 0; background: #fff7e6; }

.pt-detail-card { border: 0; background: var(--brand-card); }
.activity-editor-panel { border: 0; background: var(--brand-surface); }

/* ── 단추: 윤곽선 대신 연한 바탕 ──────────────────────────
   "차라리 윤곽선 부분 없애는쪽으로 해서 색만 채워서" — 대표님 말씀 그대로.
   누르는 곳임은 바탕색으로 알린다. 크기·모서리는 건드리지 않는다. */
.page-btn { border: 0; background: var(--brand-surface); }
.page-btn.active { border: 0; background: var(--brand-secondary); color: #fff; }
.page-btn:not(.active):not([disabled]):hover { background: var(--brand-primary-tint); color: var(--brand-primary); }

/* 입력칸(input·textarea)과 고르는 칸(.dd-btn)은 **테두리를 그대로 둔다.**
   '여기에 적으세요 / 여기서 고르세요' 는 테두리가 말해 준다. 네이버도 같다. */

/* ── 설정·통계 화면 ──────────────────────────────────────── */
.my-setting-card { border: 0; background: var(--brand-card); }
.my-setting-card:hover { border: 0; background: var(--brand-primary-tint); }
.call-stats-row { border: 0; }
.call-stats-row:hover { border: 0; background: var(--brand-surface); }
.call-stats-list-section,
.call-stats-chart-section { border: 0; }
.panel { border: 0; }

/* 숫자 네 칸이 윤곽선을 넘던 것 (남현우 님 피드백 3번째 그림)
   "전체 부분에 숫자가 4자리가 되니까 그 윤곽선을 넘어가"

   390px 짜리 화면에 칸을 넷으로 쪼개니 한 칸이 80px 남짓이다.
   네 자리 숫자는 여기에 안 들어간다. 테두리를 걷고, **폰에서는 두 줄 두 칸**으로
   놓는다. 칸이 175px 이 되니 다섯 자리도 들어간다. */
.call-stats-summary div {
  border: 0;
  background: var(--brand-surface);
  min-width: 0;
  padding: 12px 8px;
}
.call-stats-summary div > * { font-variant-numeric: tabular-nums; }
@media (max-width: 430px) {
  .call-stats-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 단추 높이를 맞춘다 ─────────────────────────────────
   "버튼 크기 동일화시켜. 그 페이지마다는 이런 것도 디자인의 기본이야"

   실측하니 한 화면에 31px 과 32px 이 섞여 있었다. 1px 은 눈에 안 보이지만
   줄이 어긋나 보이는 원인이다. 우리 자는 **32 (작은 것) · 40 (보통)** 둘이다. */
.call-stats-tab { min-height: 32px; }

/* ── 넓은 화면(900px 이상)에서도 같게 ─────────────────────
   폰에서는 선이 사라졌는데 PC 에서는 2,000개가 그대로였다.
   넓은 화면 전용 규칙이 더 세서 이겼기 때문이다 (body:not(...) 가 붙어 있다).
   같은 세기로 맞춰 쓴다. 폰과 PC 가 달라 보이면 안 된다. */
@media (min-width: 900px) {
  body:not(.list-view-cards) .activity-summary-row {
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
  }
  body:not(.list-view-cards) .activity-summary-row:hover {
    border: 0;
    background: var(--brand-surface);
    box-shadow: none;
    transform: none;
  }
  body:not(.list-view-cards) .activity-summary-row.is-selected {
    border: 0;
    border-left: 0;
    background: var(--brand-primary-tint);
  }
  body:not(.list-view-cards) .activity-summary-row.has-issue {
    border: 0;
    border-left: 0;
    background: #fffcf5;
  }
}

/* ═══ 글자 층 세우기 (DESIGN-apple.md, 2026-09-17) ═══

   애플은 15가지 글자 규격을 쓰는데 **한 크기에 굵기는 하나**다.
   우리는 그 반대였다 — 크기는 몇 안 되는데 같은 크기에 굵기가 여럿이었다.

   통화 줄 하나를 재 보니 이랬다.
     이름         16px/700 빨강
     번호 뒷자리    13px/600 빨강
     사업명        14px/500 먹색   ← 보조인데 시각보다 진하다. 층이 거꾸로다
     부재중 딱지    11px/600 주황
     시각          13px/500 회색  ┐ 같은 크기·같은 색인데 굵기만 다르다.
     날짜·통화길이   13px/600 회색  ┘ 눈으로는 구분이 안 되고 지저분하기만 하다

   층을 네 단으로 세운다. 위로 갈수록 크고 진하다.
     ① 이름        16 / 700       누구인지
     ② 시각        13 / 500 회색   언제
     ③ 사업명       13 / 400 회색   무슨 일로
     ④ 날짜·길이·딱지 12~11 회색     곁들이

   색이 층을 만든다. 먹색은 이름에만, 나머지는 회색 하나.        */
.call-card-biz-name,
.call-card-simple .call-card-biz-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
.call-card-timestamp { font-size: 13px; font-weight: 500; color: var(--muted); }
.call-card-when { font-size: 12px; font-weight: 400; color: var(--muted); }
.call-card-direction-icon { font-size: 13px; font-weight: 400; }

/* ── 자간은 큰 글자에만 (애플: "Never used at 12px or below") ──
   body 에 -.03em 을 걸어 두었는데, CSS 의 자간은 em 으로 적어도
   **그 자리에서 px 로 굳은 뒤 물려받는다.** body 가 16px 이라 -0.48px 이 되고,
   그 -0.48px 이 11px 짜리 글자에까지 그대로 내려갔다. 4.4% 다 — 글자가 붙는다.
   그래서 body 는 normal(이 파일 위쪽에서 고침), 큰 글자 역할에만 em 으로 준다.
   애플 비율 -0.374px / 17px = -0.022em. */
h1, h2, h3,
.call-card-name, .pt-card-name, .pt-detail-name,
.stat-value, .attendance-number, .astat-value,
.panel-head h3, .modal-head h3, .title-block h2,
.header-brand-name, .header-brand-word, .call-list-count strong,
.quick-card strong, .login-card h2 {
  letter-spacing: -0.022em;
}
.chip, .badge, .call-card-meta, .astat-label,
.app-footer, .fine-print, small {
  letter-spacing: normal;
}

/* ── 한 크기에 굵기 하나 ──────────────────────────────
   이름·값은 진하게, 설명·보조는 물러난다. 중간은 없앤다. */
.call-card-name, .pt-card-name, .pt-detail-name,
.stat-value, .attendance-number, .astat-value,
.panel-head h3, .modal-head h3, .title-block h2 { font-weight: 700; }

.call-card-sub, .astat-label, .app-footer, .header-org { font-weight: 500; }

/* 애플의 '조용한 자신감' — 딱지까지 진할 필요는 없다 */
.chip, .badge, .call-direction-badge, .call-memo-badge { font-weight: 600; }


/* ═══ 활동내역 모달 — 정렬·글자층 맞추기 (남현우 님 2026-09-18 16:30) ═══

   화면을 실제로 열어 재 보니 (390px · 1280px):
     · 머리(이름·사업단·출근지·근무시각·칩) 폭 280 vs 아래 단추·표 폭 316 — 닫기 단추가
       flex 한 칸을 차지해 머리 블록만 36px 좁았다. 오른쪽 끝이 안 맞아 삐뚤어 보였다.
     · 굵기 400·800 이 섞여 있었다 (라벨 11px/400, 칩 800). 크기마다 굵기 하나 규칙 위반.
     · '출근 링크 열기' 가 파란 채움 단추 — 강조색은 빨강 하나, 누르는 것의 기본은 먹색.
     · 고치는 줄에 테두리 1px 두 개 — 선 걷어내기 전 모양 그대로.
     · 입력칸 모서리 12 — 입력칸은 8.
   설명 문장(근로계약서가 필요합니다…)은 script.js 쪽에서 ? 안으로 넣었다 (p229).          */

/* 머리를 아래 몸통과 같은 폭으로. 닫기 단추는 오른쪽 위에 겹쳐 두고, 이름 줄만 그 자리를 비운다 */
.activity-record-modal .modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: start;
}
.activity-record-modal .modal-head .actm-headwrap { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; }
.activity-record-modal .modal-head .close {
  grid-column: 2; grid-row: 1; justify-self: end;
  float: none; margin: 0; position: sticky; top: 12px;
  border: 0; box-shadow: none; background: var(--brand-surface);
}
.actm-idline { padding-right: 48px; align-items: center; margin-bottom: 12px; }
.actm-idline h3 { font-size: 16px; font-weight: 700; }
.actm-month { font-size: 13px; font-weight: 500; color: var(--muted); }

/* 정보 줄 — 회색 바탕 = 고정값, 흰 바탕 + 꺾쇠 = 고칠 수 있는 값 (대표님 2026-08-31). 선은 없다 */
.actm-meta { gap: 4px; }
.actm-metarow { border: 0; min-height: 40px; align-items: center; padding: 8px 12px; border-radius: var(--radius-sm); }
.actm-metarow.is-fixed { background: var(--brand-line); }
.actm-metarow.is-edit { background: var(--brand-card); }
.actm-metarow.is-edit:hover { background: var(--brand-card); box-shadow: inset 0 0 0 1px var(--brand-line); }
.actm-metalabel { flex: 0 0 56px; font-size: 12px; font-weight: 500; color: var(--muted); }
.actm-metavalue { font-size: 13px; font-weight: 700; color: var(--text); }
.actm-metavalue.is-empty { font-weight: 500; color: var(--muted); }
.actm-metasub { font-size: 12px; font-weight: 500; color: var(--muted); font-style: normal; margin-left: 6px; }

/* 칩 줄 — 폰에서는 연차 한 줄, 그 아래 경조사·결근·? 를 고르게. 굵기는 600 하나 */
.actm-summary { display: grid; grid-template-columns: 1fr 1fr 32px; gap: 8px; align-items: center; margin-top: 12px; }
.actm-summary .actm-chip.is-annual { grid-column: 1 / -1; justify-content: flex-start; }
.actm-summary .actm-chip { justify-content: center; min-height: 32px; border: 0; background: var(--brand-surface); }
.actm-chip, .actm-chip b, .actm-num, .actm-hours { font-size: 12px; font-weight: 600; }
.actm-step { font-weight: 700; }
.actm-summary .actm-help { margin-left: 0; width: 32px; height: 32px; }
@media (min-width: 900px) {
  .actm-summary { grid-template-columns: auto auto auto 32px 1fr; }
  .actm-summary .actm-chip.is-annual { grid-column: auto; }
}

/* 계약·스케줄 — 설명은 ? 안으로 갔고, 남은 것은 이름·입력칸·단추 */
.sched-head { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; }
.sched-head strong { font-size: 14px; font-weight: 700; }
.sched-row.is-plain { border: 0; background: var(--brand-card); border-radius: var(--radius-sm); padding: 12px; }
.sched-row.is-plain > span { font-size: 13px; font-weight: 600; }
.ct-date > span { font-size: 12px; font-weight: 500; color: var(--muted); }
.sched-row input.wd-time, .wd-time-row input.wd-time { border-radius: var(--radius-sm); font-weight: 600; }
/* 근로계약서(만들기)는 먹색 주 단추, 변경계약서는 흰 단추 — 둘이 같은 자리에 같은 굵기로 */
.contract-new-row .btn { border-radius: var(--radius-sm); min-height: 40px; font-size: 13px; font-weight: 600; }
.contract-new-row .btn:not(.btn-soft) { background: var(--brand-secondary); color: var(--brand-card); }

/* 출근 링크 — 파란 채움을 먹색으로. 두 단추 높이 32, 굵기 600 */
.actm-linkrow { margin-top: 12px; gap: 8px; }
.actm-linkrow .pt-checkin-btn {
  min-height: 32px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  background: var(--brand-secondary); color: var(--brand-card); border-color: var(--brand-secondary);
}
.actm-linkrow .pt-checkin-btn.is-ghost { background: var(--brand-card); color: var(--text); border-color: var(--brand-line); }

/* 출근부 단추 셋 — 같은 폭·같은 굵기 */
.actm-docbar .btn { font-size: 13px; font-weight: 600; min-height: 40px; }

/* 표 — 값 굵기 하나(500), 날짜 700. 날짜 칸 모서리 16 은 표에 어울리지 않는다 */
.activity-edit-table td { font-weight: 500; }
.activity-edit-table td.ac-date { border-radius: 0; }
.activity-edit-table td.ac-pay { border-radius: 0; }
.ac-date strong { font-size: 13px; font-weight: 700; }

/* 재 보고 남은 것 셋 (2026-09-18 16:50): 칩 줄이 내용 폭만큼만 벌어져 있었다 · ? 굵기 800 · 스케줄표 단추 700 */
.actm-summary { width: 100%; }
.actm-help { font-weight: 700; }
.sched-row .btn { font-weight: 600; }

/* 굵기 사다리 정리 (2026-09-18 16:55): 화면 글은 700·600·500 셋. 400 은 쓰지 않는다 — 통화 줄 보조글도 500 으로 */
.call-card-biz-name, .call-card-simple .call-card-biz-name, .call-card-when, .call-card-direction-icon { font-weight: 500; }


/* ═══ 디자이너 제안 ONDAJUNG_DESIGN.md v0.1 반영 — 스테이징 제안 (2026-09-18 17:00) ═══

   출처: 온다정새디자인/ONDAJUNG_DESIGN.md (디자인팀 2026-09-17, 상태 '제안 초안').
   이 블록은 그 문서의 13.1 CSS Variable 을 그대로 두고, 우리 옛 토큰을 새 토큰에 **이어 붙여**
   화면 전체가 한 번에 따라오게 한다. 컴포넌트 규칙(4.2 글자 · 4.4 모서리 · 4.5 높이 · 6.x)도 여기서.

   지킨 것 (대표님 확정 · 이 블록보다 위에 있는 '선을 긋지 말고 바탕으로' 규칙)
     · 목록 줄에는 선을 긋지 않는다 — 디자이너 문서 4.6 '카드 구분은 border 우선' 은 판·입력칸에만 적용
     · 강조색은 코랄 하나. 파랑(--primary #2563eb)은 남기지 않는다 (문서 4.1.3 '같은 역할에 다른 파랑 추가 금지')
   디자이너 문서의 열린 결정(17장)은 스테이징에서 **제안값**으로 보여준다
     · 주요 단추 딥 네이비 (#182238)  · 바탕 warm/50 (#faf8f5)  · 상태색을 진하게 (대비 4.5:1)
*/
:root {
  /* 바탕 #FBFBFB — 디자이너 2026-10-01 '모든 페이지 배경' (warm #faf8f5 에서, p274). 어르신 출근 화면과 같다 */
  --bg-canvas: #fbfbfb;
  --bg-surface: #ffffff;
  --text-strong: #18202e;
  --text-default: #18202e;
  --text-sub: #5b6472;
  --border-default: #d7dce4;
  --fill-fixed: #f2f3f5;
  --fill-edit: #ffffff;
  --action-primary: #182238;
  --action-brand: #fc5a59;
  --action-brand-soft: #fff0ee;
  --status-success: #16734b;
  --status-warning: #9a5700;
  --status-danger: #b42318;
  --focus-ring: #ffcd3c;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-control: 8px; --radius-card: 12px; --radius-modal: 16px; --radius-pill: 999px;
  --control-small: 32px; --control-medium: 40px; --control-large: 48px;

  /* ── 옛 토큰을 새 토큰에 잇는다 ── */
  --bg: var(--bg-canvas);
  --brand-surface: var(--bg-canvas);
  --card: var(--bg-surface);
  --solid: var(--bg-surface);
  --brand-card: var(--bg-surface);
  --text: var(--text-default);
  --brand-ink: var(--text-strong);
  --muted: var(--text-sub);
  --brand-ink-muted: var(--text-sub);
  --line: var(--border-default);              /* 입력칸·판 테두리 */
  --brand-secondary: var(--action-primary);   /* 주요 단추 = 딥 네이비 (열린 결정 · 제안값) */
  --brand-primary: var(--action-brand);
  --brand-primary-tint: var(--action-brand-soft);
  --brand-primary-deep: #d94848;              /* coral/600 */
  --primary: var(--action-primary);           /* 옛 파랑 강조를 전부 먹색 계열로 */
  --primary-soft: var(--fill-fixed);
  --brand-info: var(--action-primary);
  --success: var(--status-success); --brand-success: var(--status-success);
  --warning: var(--status-warning); --brand-warning: var(--status-warning);
  --danger: var(--status-danger);   --brand-danger: var(--status-danger);
  --radius-sm: var(--radius-control); --radius-md: var(--radius-card); --radius-lg: var(--radius-modal);
  --radius-xl: var(--radius-modal);           /* 업무 화면 카드에 28px 금지 (4.4) */
  --page-gutter: 16px;                        /* 모바일 16 · PC 24 (4.3) */
  --btn-fs: 14px; --btn-fs-sm: 13px; --btn-fw: 600; --btn-fw-strong: 600;
}
@media (min-width: 1024px) { :root { --page-gutter: 24px; } }

/* ── 글자 (4.2) — 본문 14/500, 보조 13/400, 레이블·단추 14/600, 태그 12/600, 카드 제목 16/700 ── */
body { color: var(--text-default); font-weight: 500; }
body, .app-screen, #appScreen { background: var(--bg-canvas); }
h1, h2, h3, h4 { color: var(--text-strong); font-weight: 700; }
.modal-head h3, .panel-head h3, .call-card-name, .pt-card-name, .pt-detail-name, .actrow-name { font-size: 16px; font-weight: 700; }
.field label, label, .field > label { font-size: 14px; font-weight: 600; color: var(--text-default); }
.field-muted, .call-card-sub, .call-card-when, .call-card-biz-name, .call-card-timestamp,
.actm-metalabel, .ct-date > span, .site-hint, .rs-hintline { color: var(--text-sub); }
/* 11px 은 쓰지 않는다 (4.2.3) — 태그·보조는 12 */
.chip, .badge, .call-direction-badge, .call-memo-badge, .actm-chip, .actm-chip b, .actm-num, .actm-hours,
.ac-date span, .ac-tag, .ac-loc, .ac-off, .doc-tag, .notify-when, .call-dir-count, .header-user-name,
.pt-filter-badge, .person-sched-badge, .leave-line-label, .namecell, .astat-label, .astat-sub,
.activity-edit-table th, .activity-doc-table th, .activity-doc-table td, .quick-card span, small {
  font-size: 12px;
}
.chip, .badge, .call-direction-badge, .call-memo-badge, .actm-chip, .actm-chip b, .doc-tag, .ac-tag { font-weight: 600; }

/* ── 단추 (6.1 · 4.4 · 4.5) — 알약 금지. 모서리 8, 높이 PC 40 / 작은 것 32, 글자 14/600 ── */
.btn {
  border-radius: var(--radius-control);
  min-height: var(--control-medium); padding: 0 16px;
  font-size: 14px; font-weight: 600;
}
.btn-sm, .btn.btn-sm { min-height: var(--control-small); padding: 0 12px; font-size: 13px; }
.btn-primary, .btn.is-primary { background: var(--action-primary); color: var(--bg-surface); }
.btn-primary:hover, .btn.is-primary:hover { background: #0f1526; transform: none; }
.btn-soft { background: var(--bg-surface); color: var(--text-default); border: 1px solid var(--border-default); }
.btn-danger { background: var(--bg-surface); color: var(--status-danger); border: 1px solid var(--status-danger); }
.btn-danger:hover { background: #fdf2f1; }
/* 모바일 주요 행동은 48 (8.1) — 모달 발치·저장·발송 단추 */
@media (max-width: 767px) {
  .modal-foot .btn, .modal-actions .btn, .btn-primary, .btn.is-primary, .care-send-btn { min-height: var(--control-large); }
}

/* ── 입력칸 (6.3) — 선은 여기만 남긴다. 모서리 8, 높이 40(폰 48), 초점은 노란 고리 ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .select-soft, .ws-select, .wd-time {
  border: 1px solid var(--border-default); border-radius: var(--radius-control);
  background: var(--fill-edit); color: var(--text-default); font-size: 14px; font-weight: 500;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, .select-soft, .ws-select, .wd-time { min-height: var(--control-medium); }

/* 카카오 로그인 단추 (2026-09-24).
   노랑(#FEE500)과 검정 글씨는 카카오가 정한 규격이라 우리 토큰으로 바꾸지 않는다 —
   DESIGN.md 의 hex 금지는 우리 브랜드 색 이야기다. 남의 브랜드는 그쪽 규격을 따른다.
   대신 높이·모서리·글자 크기는 우리 자에 맞춘다. */
.kakao-login-btn {
  width: 100%; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
  /* 바로 위 로그인 단추와 **같은 키**로 선다 (2026-09-24). 나란히 놓인 단추가
     하나는 40, 하나는 48 이면 눌러 보기 전에 다른 것으로 읽힌다 */
  height: var(--control-medium); border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: #FEE500; color: #191600; font-size: var(--fs-body); font-weight: 700;
  font-family: inherit;
}
.kakao-login-btn[hidden] { display: none; }
.kakao-login-btn:hover { filter: brightness(.96); }
.kakao-login-btn svg { width: 20px; height: 20px; flex: 0 0 auto; fill: #191600; }
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, .select-soft, .ws-select { min-height: var(--control-large); }
}
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--text-sub); box-shadow: none; }
/* 고정값은 회색 채움으로 (6.3) */
.actm-metarow.is-fixed, [readonly], input[disabled], select[disabled] { background: var(--fill-fixed); }

/* ── 모서리 (4.4) — 카드 12 · 모달 16 · 알약은 태그·칩·세그먼트만 ── */
.modal { border-radius: var(--radius-modal); background: var(--bg-surface); border: 0;
  box-shadow: 0 8px 24px rgba(24, 32, 46, .12); }      /* 유리 효과 금지 (4.6) */
.modal-head { border-bottom: 0; }
.activity-record-modal .modal-body { border-bottom-left-radius: var(--radius-modal); border-bottom-right-radius: var(--radius-modal); }
.stat-card, .quick-card, .astat, .call-card, .pt-card, .panel, .card, .list-panel, .detail-panel, .actm-help-box, .sched-row {
  border-radius: var(--radius-card);
}
.quick-card { background: var(--bg-surface); }            /* 장식 그라데이션 금지 (4.1.3) */
.quick-card:hover { transform: none; box-shadow: 0 1px 3px rgba(24, 32, 46, .08); }
.astat::before { display: none; }                         /* 왼쪽 색막대 금지 — 우리 규칙과 같다 */
.astat { border: 1px solid var(--border-default); }
.stat-card { border: 1px solid var(--border-default); background: var(--bg-surface); }

/* ── 선택 상태는 코랄 연한 바탕으로 (3.3 · 4.1.2 action/brand-soft) ── */
.seg-btn.is-on { background: var(--action-brand-soft); color: var(--action-brand); box-shadow: none; }
.header-primary-nav-btn.is-active, .header-primary-nav-btn.active { background: var(--action-brand); color: var(--bg-surface); border-radius: var(--radius-control); }
.header-primary-nav-btn:hover { background: var(--fill-fixed); color: var(--text-default); }
.call-card.is-selected, .pt-card.is-selected, .activity-summary-row.is-selected { background: var(--action-brand-soft); }

/* ── 상태색은 진한 값 + 연한 바탕 (대비 4.5:1) ── */
.chip-ok   { background: #e8f5ee; color: var(--status-success); }
.chip-warn { background: #fff4e0; color: var(--status-warning); }
.chip-bad  { background: var(--action-brand-soft); color: var(--status-danger); }

/* ── 토스트 (6.11) — 성공 검정 · 오류 빨강. 시간은 화면 코드가 2.2초/4.2초로 이미 맞다 ── */
.toast { background: var(--text-strong); color: var(--bg-surface); border-radius: var(--radius-card); font-weight: 600; }
.toast.is-bad { background: var(--status-danger); }

/* ── 헤더 아이콘 단추 터치 영역 (5.2) — PC 40 · 폰 48 ── */
.header-icon-btn, #headerBellBtn, #headerUserBtn, .header-user-btn { min-width: 40px; min-height: 40px; }
@media (max-width: 767px) { .header-icon-btn, #headerBellBtn, #headerUserBtn, .header-user-btn { min-width: 48px; min-height: 48px; } }

/* 통화 화면에서 눈으로 확인한 것 셋 (2026-09-18 17:10)
   · 위 탭(전체·부재중·이관)은 고른 것을 흰 알약으로 띄웠다 → 코랄 연한 바탕으로 (선택 = action/brand-soft)
   · '부재중처리 완료' 큰 단추가 빨간 채움 — 빨강은 오류·위험에만. 주요 행동은 딥 네이비, 모서리 8, 폰 48
   · 부재중 줄의 이름이 빨강 — 오류가 아니라 '확인 필요' 상태. status/warning(황갈)으로 */
.call-mode-btn.active, .call-mode-btn.is-on { background: var(--action-brand-soft); color: var(--action-brand); box-shadow: none; border: 0; border-radius: var(--radius-control); }
.call-missed-complete-btn { background: var(--action-primary); border-radius: var(--radius-control); height: var(--control-medium); font-weight: 600; }
.call-missed-complete-btn:hover { background: #0f1526; }
@media (max-width: 767px) { .call-missed-complete-btn { height: var(--control-large); } }
.call-card-missed .call-card-name, .call-card-missed .call-route-caller, .call-card-missed .call-route-arrow,
.call-card-missed .call-route-manager, .call-card-missed .name-phone-plain, .call-card-result.is-missed { color: var(--status-warning); }
.missed-done-btn, .btn-blue { background: var(--action-primary); color: var(--bg-surface); }

/* 연락처·통화 화면에서 눈으로 확인한 것 (2026-09-18 17:20)
   · 참여자/직원/외부 · 통화 탭 · 문자 대상 탭의 고른 것이 흰 알약 → 코랄 연한 바탕 (선택 색 하나)
   · 전화·문자 아이콘 단추가 아이폰 파랑(#007aff) — 파랑은 남기지 않는다. 먹색 아이콘 + 회색 채움, 손가락 자리 폰 40
   · 담당자 표(call-mgr)가 파란 알약 — 중립 채움으로
   · 줄 안 작은 단추 11px → 12px */
.pt-main-tab.active, .calltab.active, .cs-target-tab.active { background: var(--action-brand-soft); color: var(--action-brand); box-shadow: none; }
.pt-phone-call-icon, .call-card-dial, .attendance-call-btn { color: var(--action-primary); background: var(--fill-fixed); }
.pt-phone-call-icon:hover, .call-card-dial:hover, .attendance-call-btn:hover { background: var(--action-brand-soft); color: var(--action-brand); }
.pt-phone-call-icon { width: 32px; height: 32px; }
@media (max-width: 767px) { .pt-phone-call-icon { width: 40px; height: 40px; } .call-card-dial { width: 40px; height: 40px; } }
.call-mgr { color: var(--text-default); background: var(--fill-fixed); border: 0; font-weight: 600; }
.activity-row-btn { font-size: 12px; font-weight: 600; height: var(--control-small); }
.activity-row-btn:hover { border-color: var(--border-default); background: var(--fill-fixed); }
.stt-btn.has-stt { color: var(--action-primary); }

/* 나머지 화면(알림전화·알림문자·안부·설정) 눌러 보고 (2026-09-21 13:10)
   · 탭의 고른 것이 화면마다 달랐다 — 캠페인 탭 흰 알약, 안부·설정 탭 먹색 채움 → 전부 코랄 연한 바탕 하나로 (선택 = action/brand-soft)
   · '+ {참여자명}' 칩이 파란 채움 → 중립 채움. SMS 표는 상태(성공)색 유지
   · 라디오·체크박스 브라우저 파랑 → 딥 네이비 (accent-color) */
.cs-page-tab.active, .care-mode-tab.active, .settings-tab.active { background: var(--action-brand-soft); color: var(--action-brand); box-shadow: none; }
.cs-var-btn { background: var(--fill-fixed); color: var(--text-default); border: 0; font-weight: 600; }
.cs-type-badge.sms { background: #e8f5ee; color: var(--status-success); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--action-primary); }
/* 홈 카드 아이콘 SVG 크기 (이모지 20px 자리) */
.quick-card .emoji svg { width: 22px; height: 22px; display: block; color: var(--action-primary); }
.campaign-type-icon svg { width: 16px; height: 16px; vertical-align: -3px; }
/* 발송대상 '0명' 뱃지가 파란 알약이었다 → 중립 채움 (2026-09-21) */
.cs-count-badge, .cs-tgt-row-count { background: var(--fill-fixed); color: var(--text-default); border: 0; }

/* 통화 화면 위 요약 카드 넷 — 전체·부재중·이관 탭을 눌러도 똑같이 따라다녀 중첩이다 (대표님 2026-09-21 15:06).
   "현재로서는 안 보여줘도 될 것 같다" → 일단 숨긴다. 살리려면 탭 위로 올려 고정하고 탭마다 값이 달라져야 한다 */
#page-calls #callStats { display: none !important; }

/* ══ 대표님 2026-09-21 17:23 통화 · 캡처 2장(통화 목록·연락처) 디테일 ══════════════
   "고급지다, 디테일만 잡으면 된다" — 같은 자료는 같은 자리, 단위는 뒤에, 표 대신 색. */

/* ② 통화 줄 — 상태 칸(부재중 표·담당자 알약)을 뺐다. 담당자는 사업명 옆(왼쪽), 부재중은 이름 색으로만 */
.call-card-simple .call-card-state { display: none; }
.call-card-simple .call-card-info {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "name" "sub";
  grid-template-rows: 22px minmax(18px, auto);
  row-gap: 2px;
}
/* ⑥ 왼쪽(이름·사업) 두 층과 오른콽(시각·날짜) 두 층의 줄 높이를 같게 — 날짜와 부재중 표의 높이가 달랐다 */
.call-card-name, .call-card-name .call-route-caller { line-height: 22px; }
.call-card-sub, .call-card-simple .call-card-sub, .call-card-biz-name { line-height: 18px; }
.call-card-time { gap: 2px; }
.call-card-timestamp { line-height: 22px; }
.call-card-when { line-height: 18px; }
/* ⑩ 부재중 색은 애플 전화 규칙을 따른다 — 빨강. 표는 없다 */
.call-card-missed .call-card-name, .call-card-missed .call-route-caller, .call-card-missed .call-route-arrow,
.call-card-missed .call-route-manager, .call-card-missed .name-phone-plain, .call-card-result.is-missed { color: var(--status-danger); }
.call-card-missed-count { color: var(--status-danger); font-weight: 600; font-size: 14px; margin-left: 3px; }

/* ③④⑤ 583건 · 334명 — 최근 7일과 같은 글자, 꺾쇠는 전화 아이콘 오른쪽 끝에 맞춘다 */
.call-log-subbar { padding: 0 10px; align-items: center; }          /* .call-card 좌우 여백(10)과 같은 선 */
.call-list-count { transform: none; font-size: 16px; font-weight: 600; gap: 0; min-height: 40px; color: var(--text-default); }
.call-list-count strong { font-size: 16px; font-weight: 600; }
.call-count-unit { font-size: 16px; font-weight: 600; }
.call-count-people { border: 0; background: transparent; padding: 0; font-size: 16px; font-weight: 600; color: var(--text-sub); line-height: inherit; }
.call-count-people::before { content: "·"; margin: 0 6px; color: var(--text-sub); }
.call-period-select { height: 40px; font-size: 16px; font-weight: 600; padding: 0 14px 0 0; }
.call-period-arrow { right: 0; }

/* ⑦ 연락처 — 참여자/외부/직원 토글 높이 = 추가 단추 높이(48). 추가 단추는 글자 없이 + 만 크게 */
#page-participants .topbar { margin-bottom: 12px; gap: 12px; }
.pt-main-tabs { height: var(--control-large); box-sizing: border-box; padding: 4px; border-radius: var(--radius-card); align-items: stretch; }
.pt-main-tab { padding: 0 18px; border-radius: var(--radius-control); display: inline-flex; align-items: center; }
#ptBtnAddParticipant, #ptBtnAddExternal, #ptBtnAddStaff {
  width: var(--control-large); height: var(--control-large); min-height: var(--control-large);
  padding: 0; font-size: 28px; font-weight: 400; line-height: 1; border-radius: var(--radius-card);
}

/* ⑧ 카드 안 카드 한 겹 빼기 — 검색·필터·목록이 바탕 위에 바로 놓여 화면이 넓어진다 */
#page-participants > .panel { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
#page-participants > .panel > .panel-body { padding: 0; }
/* PC 표: 줄마다 둥근 외곽선(카드 흔적)을 걷고 표처럼 — 줄 사이는 가는 선 하나 */
body:not(.list-view-cards) .pt-table-wrap tr.pt-detail-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body:not(.list-view-cards) .pt-table-wrap tr.pt-detail-card > td { border-radius: 0; border-bottom: 1px solid var(--border-default); }
body:not(.list-view-cards) .pt-table-wrap tr.pt-detail-card:last-child > td { border-bottom: 0; }

/* 부재중 빨강 — 대표님 2026-09-21 17:23 통화(1017행) "약간 좀 죽은 빨간색처럼 보여". 상태색 --status-danger(#b42318)는 경고용 어두운 빨강이라
   애플 전화의 부재중 빨강(systemRed)을 따로 둔다. 통화 목록의 부재중 이름·(횟수)에만 쓴다 */
:root { --call-missed: #ff3b30; }
.call-card-missed .call-card-name, .call-card-missed .call-route-caller, .call-card-missed .call-route-arrow,
.call-card-missed .call-route-manager, .call-card-missed .name-phone-plain, .call-card-result.is-missed,
.call-card-missed-count { color: var(--call-missed); }

/* ══ 대표님 통화 2026-09-22 — 1차 ═══════════════════════════════════
   덮어쓰는 묶음이라 맨 끝에 둔다. 되돌릴 때 이 묶음만 지우면 된다. */

/* 1. 건수는 곁들이는 값이다 — 괄호로 묶고 볼드를 빼고 색을 옅게.
      옆의 주요 숫자에 눈이 가야 한다 (대표님: "이 볼드를 빼가지고 강조를 줄이는 거지") */
.pt-total-count { font-weight:600; color:var(--muted); }   /* 굵기는 800·700·600 셋뿐 */

/* 9. 연락처는 순수하게 연락처다. 통계는 활동 화면에서 보여준다
      (대표님: "연락처는 순수의 연락처거든 · 통계가 나올 필요 없고") */
#ptStats { display:none !important; }

/* 10. 평소에는 아무 표시도 안 한다. 부재중일 때만, 얼굴 그림 오른쪽 아래에.
       켰다 껐다 하는 점은 무슨 뜻인지 알 수 없다 (대표님) */
.header-online-dot { display:none; }
.header-user-btn.absence-active .header-online-dot {
  display:block; background:var(--brand-danger);
  box-shadow:0 0 0 2px #fff;
}
.header-user-btn#headerUserBtn .header-online-dot { top:auto; bottom:4px; right:4px; }
/* 부재중이면 사람 그림 자체가 붉어진다 — 점 하나보다 먼저 눈에 든다 */
.header-user-btn.absence-active .header-user-icon { color:var(--brand-danger); }

/* 26. 번호는 늘 이름 앞. PC 에서 오른쪽에 있으면 다음 줄 숫자로 잘못 읽힌다 (대표님) */
.pt-detail-header .pt-detail-seq { order:-1; }

/* 28. '카드로 보기' 글자 대신 아이콘 */
.view-toggle { width:38px; min-width:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.view-toggle svg { width:18px; height:18px; }

/* ══ 대표님 통화 2026-09-22 — 2차 (크기·굵기·간격) ═════════════════
   폭 390 스테이징에서 직접 재고 고친 것. 잰 값을 괄호에 적어 둔다. */

/* 14. 본문 굵기 500 → 600. 한 화면에 500 이 121곳이었다.
       DESIGN.md: 굵기는 800(제목·요약숫자) · 700(이름·라벨) · 600(본문·값) 셋뿐 */
body { font-weight: 600; }
.call-card-sub, .call-card-timestamp, .call-card-biz-name, .call-card-when,
.call-card-direction-icon, .astat-label, .app-footer, .header-org,
.actm-month, .actm-metalabel, .actm-metavalue.is-empty, .actm-metasub,
.ct-date > span, .activity-edit-table td { font-weight: 600; }

/* 2·4. 머리줄 탭 12px → 14px (본문 크기). 통화 줄 이름 16px 과 층이 맞는다 */
.header-primary-nav-btn { font-size: 14px; }

/* 6. 알림 배지가 화면 맨 위 y=1 에 붙어 있었다 (재본 값).
      머리줄을 68px 로 키우고 배지를 단추 밖으로 내보내지 않는다 */
:root { --header-h: 68px; }
.header-user-btn#headerUserBtn .header-online-dot { bottom: 6px; right: 6px; }
#headerBellBadge.header-bell-badge { top: 0; right: 0; }

/* 5·7. 건수 — 주 건수는 16/700 먹색, 곁들이(명 수)는 13/600 회색.
        왼쪽 시작점을 머리줄과 같은 16px 로 (재보니 26px) */
.call-log-subbar > .call-list-count { margin-left: 0; }
.call-list-count strong,
.call-list-count .call-count-unit { font-size: 16px; font-weight: 700; color: var(--text); }
.call-list-count .call-count-people { font-size: 13px; font-weight: 600; color: var(--muted); }
.pt-total-count { margin-left: 0; }

/* 11. 연락처 칸이 세로 가운데가 아니었다 — 전화번호 줄에 아이콘이 있어 층이 커진다 */
.pt-detail-field { align-items: center; }

/* 19. 입력칸 위 이름표를 칸 안쪽 글자 시작점에 맞춘다 (드롭다운 안쪽 여백 12px) */
.field > label, .form-row > label, .filter-row > label { padding-left: 12px; }

/* 20. 요약 카드는 숫자가 맨 위 (대표님: "숫자 위 숫자 아래를 다 쓰면 이 숫자가 안 읽혀") */
.astat { display: flex; flex-direction: column; }
.astat .v { order: -1; font-size: 22px; font-weight: 700; }
.astat .k { order: 0; }
.astat .s { order: 1; }

/* 22. 카드가 어디서 끊기는지 — 얇은 테두리 하나로 (선을 늘리지 않으려고 한 변이 아니라 카드에만) */
.stat-card, .set-stat-card, .settings-panel .stat-card { border: 1px solid var(--line); }

/* ══ 대표님 통화 2026-09-22 — 3차 (구조에 딸린 모양) ═════════════════ */

/* 2차에서 안 먹은 것 — `.call-card-simple .call-card-biz-name` 이 더 세다 */
.call-card-simple .call-card-biz-name,
.call-card-simple .call-card-when { font-weight: 600; }

/* 건수 왼쪽 시작점 — margin 이 아니라 subbar 의 padding 10px 이었다 */
.call-log-subbar { padding-left: 0; }

/* 24·25·27. 단추는 카드 아래 한 칸에 모은다. 끝내는 단추는 제일 오른쪽 */
.pt-card-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 8px 12px 12px;
}

/* 18. 고를 것이 없어도 드롭다운 모양은 그대로. 눌리지 않는 것은 색으로 알린다 */
.dd-btn--fixed { opacity: 1; color: var(--text); background-color: var(--fill-fixed); cursor: default; }   /* background 단축을 쓰면 화살표 그림까지 지워진다 (2026-09-22) */

/* 수정 기록 — 한 줄에 한 정보. 카드가 아니라 로그다 */
.el-row.el-oneline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; border: 0; border-radius: 0; background: transparent;
  border-bottom: 1px solid var(--line);
}
.el-row.el-oneline .el-label { font-weight: 700; }
.el-row.el-oneline .el-field { color: var(--muted); }
@media (min-width: 900px) {
  .el-row.el-oneline { flex-wrap: nowrap; }
}

/* ══ 대표님 통화 2026-09-22 — 4차 (나머지) ═══════════════════════ */

/* 15·16. 받는 분과 보내는 번호를 두 줄로. 보내는 번호는 곁들이는 값 */
#smsOneTo { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; }
#smsOneTo .sms-to { font-size: 14px; font-weight: 600; color: var(--text); }
#smsOneTo .sms-from { font-size: 13px; font-weight: 600; color: var(--muted); }

/* 17. 활동 목록 머리줄 — 건수는 왼쪽, 칸 이름은 오른쪽 */
.activity-summary-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.activity-summary-head .ash-count { font-size: 13px; font-weight: 600; color: var(--muted); }
.activity-summary-head .ash-count strong { font-size: 16px; font-weight: 700; color: var(--text); }
.activity-summary-head .ash-cols { display: flex; gap: 16px; }
.activity-summary-head .ash-cols span { font-size: 12px; font-weight: 700; color: var(--muted); }

/* 4차 뒤 눈으로 보고 (2026-09-22) — 괄호가 숫자에 붙어 버렸다 */
.call-list-count .call-count-people { margin-left: 6px; }
.activity-summary-head .ash-who { font-size: 12px; font-weight: 700; color: var(--muted); }

/* 건수는 늘 목록 왼쪽 위 같은 자리 (대표님 2026-09-22). 세로로 깨지지 않게 한 덩이로 */
.el-filters { align-items: center; }
.el-filters > #elCount { order: -1; white-space: nowrap; margin-right: 8px; }
.el-filters > #elCount { font-size: 13px; font-weight: 600; color: var(--muted); }

/* 머리줄 브랜드 — 17px·12.5px 은 정해진 단계 밖이었다 (2026-09-22 PC 폭에서 잼) */
.header-brand-word { font-size: 16px; font-weight: 700; }
#headerOrgName.header-org { font-size: 13px; font-weight: 600; }

/* ══ 5차 — 남현우 님 확인 뒤 (2026-09-22) ═══════════════════════════ */

/* 가. 머리줄은 '나' — 기관 이름이 위, 온다정이 아래.
       온다정은 회색 말고 눈에 띄는 색으로 (남현우 님). 로고색(코랄)을 쓴다 */
.header-brand-text { display: flex; flex-direction: column; }
.header-brand-row { order: 1; }
#headerOrgName.header-org { order: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.header-brand-word { font-size: 12px; font-weight: 700; color: var(--brand-primary); }

/* 나. 부재중 '점' 을 없앤다 — 알림함 숫자와 자리가 겹쳐 보인다 (남현우 님 2026-09-22).
       부재중은 사람 그림이 붉어지는 것으로만 알린다 */
.header-online-dot,
.header-user-btn.absence-active .header-online-dot { display: none; }

/* 다. 요약 카드 — 아이콘을 오른쪽 위로. 숫자·이름·부가의 시작점이 한 줄로 맞는다 */
.astat { position: relative; }
.astat .astat-ic {
  position: absolute; top: 12px; right: 12px; margin: 0;
  width: 18px; height: 18px; color: var(--muted);
}
.astat .k { display: block; }

/* 라. `background:` 한 줄이 화살표 그림까지 지웠다 → 색만 바꾼다 */
.dd-btn--fixed {
  background-color: var(--fill-fixed);
  color: var(--text); cursor: default; opacity: 1;
}

/* 마. 보기 바꾸는 단추 — 네모 한 칸 */
.view-toggle { width: 38px; min-width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.view-toggle svg { width: 20px; height: 20px; }

/* 온다정 — id 가 붙은 규칙이 있어 같은 꼴로 적어야 이긴다 (2026-09-22) */
#headerBrandText .header-brand-word { font-size: 12px; font-weight: 700; color: var(--brand-primary); letter-spacing: normal; }
@media (min-width: 900px) { #headerBrandText .header-brand-word { font-size: 12px; } }

/* 괄호로 묶었으니 가운뎃점은 뺀다 — 구분을 두 번 하지 않는다 (2026-09-22) */
.call-list-count .call-count-people::before { content: none; }

/* 고르는 칸에는 화살표가 있어야 한다 — '여기서 고르세요' 를 화살표가 말해 준다 (2026-09-22).
   `.select-soft { background:#fff }` 단축이 화살표 그림을 지워 놓았다 */
.dd-btn.select-soft {
  background-color: var(--bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 36px;
}
/* 같은 자리의 드롭다운은 높이가 같아야 한다 — 참여자 탭 40 · 직원 탭 48 이었다 */
.pt-quick-row .dd-btn.select-soft, .pt-quick-row .select-soft { height: 40px; }

/* 정해진 단계 밖이던 것 (2026-09-22 모바일에서 재어 찾음) */
.btn.btn-primary.pt-add-btn, .pt-toolbar-top .btn.btn-primary,
#ptBtnAddParticipant, #ptBtnAddExternal { font-size: 20px; font-weight: 700; }
.notify-group, .notify-body, .notify-open { font-size: 12px; }
.page-btn { border-radius: 8px; }

/* 활동 줄·요약 숫자·바닥글 — 정해진 단계로 (2026-09-22) */
.actrow-name { font-size: 16px; font-weight: 700; }
.actrow-pay { font-size: 16px; font-weight: 700; }
.astat .v { font-size: 22px; font-weight: 700; }
.app-footer, .app-footer * { font-size: 12px; }

/* 좁은 화면 규칙이 더 세서 안 먹던 것 — 같은 꼴로 적는다 (2026-09-22) */
.activity-summary-row .actrow-name,
.activity-summary-row .actrow-head strong { font-size: 16px; font-weight: 700; }
.activity-summary-row .actrow-pay { font-size: 16px; font-weight: 700; }
#activityStats .astat .v, .astat-row .astat .v { font-size: 22px; font-weight: 700; }
@media (max-width: 640px) {
  .activity-summary-row .actrow-name,
  .activity-summary-row .actrow-head strong,
  .activity-summary-row .actrow-pay { font-size: 16px; }
  #activityStats .astat .v, .astat-row .astat .v { font-size: 22px; }
}

/* 좁은 요약 카드 숫자 — 17px 은 단계 밖이라 20px 로 (2026-09-22) */
@media (max-width: 640px) {
  #activityStats .astat:nth-child(2) .v,
  #activityStats .astat:nth-child(3) .v,
  #activityStats .astat:nth-child(5) .v { font-size: 20px; }
  #activityStats .astat:nth-child(2) .k, #activityStats .astat:nth-child(3) .k, #activityStats .astat:nth-child(5) .k,
  #activityStats .astat:nth-child(2) .s, #activityStats .astat:nth-child(3) .s, #activityStats .astat:nth-child(5) .s { font-size: 11px; }
}

/* ══ 표 머리줄을 값과 한 줄로 (2026-09-22) ═══════════════════════════

   ① 연락처 표 — 머리와 값을 각 칸 가운데로 (대표님: "각 필드에 약간 중앙에").
      머리와 값이 같은 규칙을 쓰므로 저절로 한 줄에 선다 */
.dense-table th, .dense-table td { text-align: center; }
.dense-table td.c-name, .dense-table th:nth-child(2) { text-align: center; }
.dense-table .c-act { text-align: center; }

/* ② 활동 머리줄 — 줄과 같은 격자를 쓰되 글자만 머리답게.
      줄이 아니므로 누르는 표시(손 모양·눌림·바탕)는 없앤다 */
.activity-summary-head.activity-summary-row {
  cursor: default; background: transparent; border-bottom: 1px solid var(--line);
  padding-top: 4px; padding-bottom: 8px; margin-bottom: 2px;
}
.activity-summary-head.activity-summary-row:hover,
.activity-summary-head.activity-summary-row:active { background: transparent; }
.activity-summary-head .actrow-name,
.activity-summary-head .actrow-biz,
.activity-summary-head .actrow-stat,
.activity-summary-head .actrow-stat span,
.activity-summary-head .actrow-pay {
  font-size: 12px; font-weight: 700; color: var(--muted); font-style: normal;
}
/* 휴대폰에서는 줄이 세 층으로 접힌다 — 표가 아니라 카드라서 머리줄을 내지 않는다 */
@media (max-width: 899px) { .activity-summary-head.activity-summary-row { display: none; } }

/* ② 확인 칸을 못 박는다 — 표가 없는 줄에도 자리를 비워 둬야 세로줄이 맞는다 (2026-09-22) */
@media (min-width: 900px) {
  .activity-summary-row {
    grid-template-columns: minmax(120px, 1.1fr) minmax(0, 1.5fr) auto minmax(96px, auto) 96px !important;
  }
  .activity-summary-row .actrow-flags {
    display: flex; align-items: center; justify-content: flex-end; gap: 4px;
    min-width: 0; text-align: right;
  }
  .activity-summary-head .actrow-flags { font-size: 12px; font-weight: 700; color: var(--muted); }
}
/* 휴대폰에서는 한 줄로 쌓이므로 자리를 비워 두지 않는다 */
@media (max-width: 899px) { .activity-summary-row .actrow-flags:empty { display: none; } }

/* '#' 과 '연락' 도 가운데로 — 이 둘만 제 규칙이 더 세서 남아 있었다 (2026-09-22) */
.dense-table th.c-seq, .dense-table td.c-seq,
.dense-table th.c-act, .dense-table td.c-act { text-align: center; }
.dense-table td.c-act { display: table-cell; }
.dense-table td.c-act > * { display: inline-flex; vertical-align: middle; }

/* 휴대폰: 활동 머리줄은 내지 않는다 (표가 아니라 카드다) — flex !important 와 같은 무게로 */
@media (max-width: 899px) {
  .activity-summary-head.activity-summary-row { display: none !important; }
  /* 표 묶음은 3층 맨 뒤 — 원래 .activity-issue 가 있던 자리 (order 5) */
  .activity-summary-row .actrow-flags {
    order: 5; flex: 0 1 auto; margin: 0;
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start;
  }
  .activity-summary-row .actrow-flags:empty { display: none; }
}

/* 활동 목록도 각 칸 가운데 — 연락처 표와 같은 자 (남현우 님 2026-09-22) */
@media (min-width: 900px) {
  .activity-summary-row .actrow-head { justify-content: center; text-align: center; }
  .activity-summary-row .actrow-name { text-align: center; }
  .activity-summary-row .actrow-biz { text-align: center; }
  .activity-summary-row .actrow-stat { justify-items: center; }
  .activity-summary-row .actrow-stat > span { text-align: center; }
  .activity-summary-row .actrow-stat > .actrow-pay { text-align: center; }
  .activity-summary-row .actrow-pay { text-align: center; }
  .activity-summary-row .actrow-flags { justify-content: center; text-align: center; }
}

/* 활동: 통계를 맨 위로 (남현우 님 2026-09-22). 차례만 바꾸고 DOM 은 그대로 둔다 */
#page-attendance.page.active { display: flex; flex-direction: column; }
#page-attendance > #activityStats { order: -1; }

/* 활동 차례: 월 → 통계 → 거르는 칸 → 목록 (남현우 님 2026-09-22) */
#page-attendance > .activity-month-top { order: -2; margin-bottom: 12px; }
#page-attendance > .activity-month-top input { width: auto; min-width: 180px; }

/* 참여자 칸이 400px 이라 이름이 가운데에 뜨고 왼쪽이 153px 비었다 → 200px 로 줄이고
   남는 폭은 사업·그룹에 (2026-09-22). 가운데 정렬은 그대로 둔다 */
@media (min-width: 900px) {
  .activity-summary-row {
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) auto minmax(96px, auto) 96px !important;
  }
}

/* ① 안내전화·알림문자만 가운데 780px 에 갇혀 있었다 → 다른 화면과 왼쪽 선을 맞춘다 (2026-09-22) */
#page-broadcast > *, #page-messages > * {
  max-width: 1000px; margin-left: 0; margin-right: auto;
}

/* ② 발송대상 드롭다운에도 화살표 (또 background 단축이 그림을 지웠다) */
.dd-btn.cs-tgt-sel {
  background-color: var(--bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
  padding-right: 36px;
}
.dd-btn.cs-tgt-sel.dd-btn--fixed { background-color: var(--fill-fixed); }

/* ③ 모서리는 8·12·16·28·999·50% 만 */
.care-target-toggle { border-radius: 8px; }

/* 카드 안에서는 모두 같은 선에서 시작한다 — 목록만 780px 로 갇혀 가운데에 떠 있었다 (2026-09-22) */
#page-broadcast .cs-saved-list, #page-messages .cs-saved-list {
  max-width: none; width: auto; margin-left: 0; margin-right: 0;
}

/* ══ 활동 세로선 맞추기 (2026-09-22) ═══════════════════════════════ */

/* ① 머리줄은 글자가 한 가지다. '참여자' 만 16px 이었다 */
.activity-summary-head.activity-summary-row .actrow-name,
.activity-summary-head.activity-summary-row .actrow-head strong { font-size: 12px; font-weight: 700; }

@media (min-width: 900px) {
  /* ② 거르는 칸을 통계와 같은 5칸 균등 격자로 — 세로선이 겹친다 */
  .activity-toolbar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
  }
  /* ③ 급여명세서는 제 칸을 꽉 채운다 (왼쪽이 크게 비어 있었다) */
  .activity-toolbar > .activity-payslip-field { align-self: end; }
  .activity-toolbar > .activity-payslip-field > button,
  .activity-toolbar > .activity-payslip-field > .btn { width: 100%; }

  /* ④ 목록도 통계·거르는 칸과 같은 선(24px)에서 시작한다 */
  #activitySummaryPanel { padding-left: 0; padding-right: 0; }
  #activitySummaryList { padding-left: 0; padding-right: 0; }
  body:not(.list-view-cards) .activity-summary-row { padding-left: 0; padding-right: 0; }
}

/* ⑤ 단체전화·알림문자가 왼쪽으로 치우쳐 보였다 → 다른 화면처럼 폭을 다 쓴다 */
#page-broadcast > *, #page-messages > * { max-width: none; }
#page-broadcast .cs-name-input, #page-messages .cs-name-input { max-width: 640px; }

/* 급여명세서 — 칸을 꽉 채운다. 칸 267px 에 단추 92px 라 왼쪽이 175px 비었다 (2026-09-22) */
@media (min-width: 900px) {
  .activity-toolbar > .activity-payslip-field { justify-self: stretch; width: 100%; min-width: 0; }
  .activity-toolbar > .activity-payslip-field > .btn { width: 100%; display: block; }
}

/* ══ 단추·탭·카드 한 자로 (2026-09-22) ═══════════════════════════════ */

/* ① 단추는 단추로 보여야 한다 — 회색 바탕에 선이 없어 상태값처럼 보였다 */
.btn {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-default);
  border-radius: 8px;
  min-height: 40px;
}
.btn:hover { background-color: var(--fill-fixed); }
.btn.btn-primary {
  background-color: var(--action-primary); border-color: var(--action-primary); color: #fff;
  min-height: 40px; height: 40px; border-radius: 8px; font-size: 16px;
}
.btn.btn-soft { background-color: var(--bg-surface); border: 1px solid var(--border-default); }
/* 작은 단추는 32 (엑셀 받기·보기 바꾸기) */
.btn.btn-sm { min-height: 32px; height: 32px; padding-top: 0; padding-bottom: 0; }

/* ② 탭은 화면이 달라도 같은 크기 — 손가락이 닿으므로 40 */
.call-mode-btn, .pt-main-tab, .settings-tab, .cs-page-tab, .call-stats-tab {
  min-height: 40px; font-size: 14px; font-weight: 700; border-radius: 8px;
}

/* ③ 단추·입력칸 모서리는 8 (12 가 섞여 있었다). 카드는 12·16 그대로 */
.search input, .pt-search-row input, input[type="text"], input[type="search"],
input[type="number"], input[type="date"], input[type="month"], textarea,
.dd-btn, .select-soft { border-radius: 8px; }

/* ④ 카드가 어디서 끊기는지 보이게 (대표님 2026-09-22) */
.pt-detail-card { border: 1px solid var(--border-default); border-radius: 12px; }
.pt-detail-card + .pt-detail-card { margin-top: 8px; }
/* 표로 볼 때는 줄이라 테두리를 두지 않는다 — 네이버처럼 줄 높이와 글자로만 가른다 */
.dense-table .pt-detail-card { border: 0; border-radius: 0; margin-top: 0; }

/* '+' 단추 — 옆 탭(40)보다 커서(48) 따로 놀았다 (2026-09-22) */
#ptBtnAddParticipant, #ptBtnAddExternal, #ptBtnAddStaff, #ptBtnAddBiz {
  width: 40px; height: 40px; min-height: 40px; padding: 0;
  font-size: 20px; font-weight: 700; line-height: 1; border-radius: 8px;
  align-self: center;
}

/* 기간 고르는 칸은 탭과 같은 크기로 — 혼자 16px 이었다 (2026-09-22) */
.call-period-select, .call-period-menu { font-size: 14px; font-weight: 600; }

/* 아이콘만 있는 보조 단추 — 네모 한 칸, 그림은 20px (2026-09-22).
   :has() 대신 하는 일(data-action)로 콕 집는다 — 브라우저 지원을 따질 필요가 없다 */
.btn > svg { width: 20px; height: 20px; }
[data-action="export-participants"], [data-action="export-staff"],
[data-action="reload-editlog"], #ptFilterBtn, .view-toggle {
  width: 32px; min-width: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
#ptFilterBtn { position: relative; }
#ptFilterBtn .pt-filter-badge { position: absolute; top: -4px; right: -4px; }

/* 아이콘만 있는 단추 — 여백 0, 그림은 줄지 않는다 (2026-09-22) */
.btn.btn-sm[data-action="export-participants"], .btn.btn-sm[data-action="export-staff"],
.btn.btn-sm[data-action="reload-editlog"], .btn.btn-sm.view-toggle, .btn.btn-sm#ptFilterBtn,
#ptFilterBtn.btn.btn-sm {
  padding: 0 !important; width: 32px; min-width: 32px; height: 32px;
}
.btn > svg, .view-toggle > svg, #ptFilterBtn > svg {
  width: 20px; height: 20px; flex: 0 0 auto;
}

/* 같은 줄에 있는 것은 같은 높이 — 필터는 옆 드롭다운(40)에 맞춘다 (2026-09-22) */
#ptFilterBtn.btn.btn-sm, #ptFilterBtn { width: 40px; min-width: 40px; height: 40px; }

/* ══ 줄이 속한 칸에 맞춘다 (2026-09-22) ═══════════════════════════════
   화면 왼쪽 끝이 아니라, 그 줄이 들어 있는 칸의 좌우에 맞춘다 */

/* 통화: 건수·기간을 목록 칸 안으로. 격자는 .call-log-body 것을 그대로 베낀다 */
@media (min-width: 1100px) {
  .call-log-subbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 560px);
    column-gap: 16px;
    padding-right: 0;
  }
  .call-log-subbar > #callListCount {
    grid-column: 1; grid-row: 1; justify-self: start; margin-left: 16px;
  }
  .call-log-subbar > #callPeriodMenu {
    grid-column: 1; grid-row: 1; justify-self: end; margin-right: 16px;
  }
}

/* 연락처: 탭 묶음이 옆 '+' (40) 보다 컸다 (48) */
.pt-main-tabs { height: 40px; padding: 0; }
.pt-main-tab { height: 40px; }

/* 머리 탭도 아래 탭과 같은 높이로 — 글자 크기는 원래 같았다 (14px/700) */
.header-primary-nav-btn { min-height: 40px; height: 40px; }

/* 오른쪽 끝을 줄과 맞춘다 — 15px 차이는 세로 스크롤막대였다 (2026-09-22).
   막대 자리를 늘 예약해(scrollbar-gutter) 막대가 생기고 없어질 때 줄이 흔들리지 않게 한다 */
@media (min-width: 1100px) {
  #callListAll.call-card-list { padding-right: 1px; scrollbar-gutter: stable; }
}
/* 통화 탭 묶음도 40 — 연락처 묶음·서브바와 같은 높이 */
.call-mode-tabs { height: 40px; padding: 0; }
.call-mode-btn { height: 40px; }

/* 탭은 목록을 거르는 것 → 목록 칸 안에 (2026-09-22). 격자는 .call-log-body 것을 그대로 */
@media (min-width: 1100px) {
  .top-actions.call-log-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 560px);
    column-gap: 16px;
  }
  .top-actions.call-log-actions > .call-mode-tabs { grid-column: 1; margin: 0 16px; }
}

/* 건수 줄의 오른쪽 여백 10px 이 휴대폰에 남아 기간이 줄보다 10px 왼쪽이었다 (2026-09-22) */
.call-log-subbar { padding-right: 0; }

/* ══ 고르는 칸·적는 칸 규칙 (2026-09-22) ═══════════════════════════════
   머리 자리의 탭은 40·8·14/700, 고르는 칸·적는 칸은 40·8·14/600.
   글자는 왼쪽, 안쪽 여백 12. 오른쪽에 아이콘이 있으면 그 자리 34.
   어긋난 뿌리는 `.field input { border-radius:12px }` 하나였다 */
.field input, .field select, .field textarea { border-radius: 8px; }
.field input, .field select { height: 40px; padding: 0 12px; font-size: 14px; font-weight: 600; }
.field textarea { padding: 12px; }

/* 월 고르는 칸도 다른 고르는 칸과 같은 모양 — 달력 아이콘 자리를 오른쪽에 둔다 */
input[type="month"], input[type="date"] {
  text-align: left; padding: 0 12px 0 12px; border-radius: 8px; height: 40px;
}
.activity-month-top input[type="month"] { padding-right: 34px; }

/* 적는 칸·고르는 칸 모서리는 8 — 무게를 올려 확실히 (2026-09-22) */
.page .field input, .page .field select, .page .field textarea,
.modal .field input, .modal .field select, .modal .field textarea,
.activity-toolbar .field input, .activity-month-top input[type="month"],
.search input, .pt-search-row input { border-radius: 8px; }

/* 적는 칸·고르는 칸 모서리 8 — 여기만 강제한다 (2026-09-22, 위 두 번의 시도가 안 먹었다) */
.field input, .field select, .field textarea,
input[type="month"], input[type="date"], input[type="text"], input[type="search"],
.search input { border-radius: 8px !important; }


/* ── 휴무일 줄 — 자리값을 올려 이긴다 (2026-09-23) ─────────────────────
   종류·설명·등록·초기화가 한 줄에 40·40·32·32 로 서 있었다.
   대표님이 되풀이하신 "같은 줄은 크기를 맞춰라" 를 여기에도 댄다.
   앞선 시도가 밀린 까닭은 `.btn-sm`·`input{min-height}` 이 이 파일 뒤쪽에 있어서다.
   보이는 것은 select 가 아니라 그 옆의 `.dd-btn` 이므로 둘 다 건다. */
#appScreen .holiday-actions > *,
#appScreen .holiday-actions .dd-btn,
#appScreen .holiday-actions > .btn,
#appScreen .holiday-actions > input {
  height: var(--control-medium); min-height: var(--control-medium);
  padding-top: 0; padding-bottom: 0; box-sizing: border-box;
}
#appScreen .holiday-actions > .dd-wrap { flex: 0 0 150px; padding: 0; }
#appScreen .holiday-actions .dd-btn { width: 100%; }
@media (max-width: 640px) {
  #appScreen .holiday-actions > *,
  #appScreen .holiday-actions .dd-btn,
  #appScreen .holiday-actions > .btn,
  #appScreen .holiday-actions > input {
    height: var(--control-large); min-height: var(--control-large); width: 100%;
  }
  #appScreen .holiday-actions > .dd-wrap { flex: 1 1 auto; }
}


/* ── 자 밖에 있던 것 셋 (2026-09-24, 네 화면을 재서 찾음) ──────────────────
   대표님 2026-09-23: "버튼이나 메뉴들 크기나 폰트가 아직 눌러보면 다른 것들이 있다."
   글자와 굵기는 어긋난 것이 없었고, 높이 셋과 모서리 하나만 자 밖이었다.
   높이는 24·32·40·48, 모서리는 8·12·16·28 만 쓴다 (DESIGN.md).
   파일 뒤쪽 규칙에 밀리지 않게 #appScreen 으로 자리값을 올린다. */

/* 통화 목록의 동그란 전화 단추 — 34 는 단계 밖. 옆 글자가 13px 이라 32 로 */
#appScreen .call-card-dial { width: var(--control-small); height: var(--control-small); }

/* '담당자 변경' 고르는 칸 — 38·모서리 10 은 둘 다 단계 밖.
   같은 줄의 적는 칸·고르는 칸이 40·8~12 라 거기에 맞춘다 */
#appScreen .call-transfer-manager-picker,
#appScreen .call-transfer-submit { height: var(--control-medium); border-radius: var(--radius-md); }

/* 목록 아래 쪽 넘기기 ‹ › — 22 는 단계 밖. 제일 작은 단계인 24 로.
   24 는 토큰이 없어 숫자로 적는다 (--control-small 은 32) */
#appScreen .page-btn { min-height: 24px; height: 24px; }


/* 눌리는 칩은 자에 맞춘다 (2026-09-24). 안부 화면의 '점심 안내' 같은 문구 고르는 단추가
   높이 22 로 단계(24·32·40·48) 밖이었다. 라벨로만 쓰는 칩(활동 요약 줄 등)은 그대로 둔다 —
   대표님이 말씀하신 것은 **눌러 보면 다른 것들**, 곧 단추다. */
#appScreen button.chip { height: 24px; }

/* 커서를 올리면 글자가 사라지던 단추 넷 (2026-09-26, 남현우 님 제보 — 활동내역 출근 링크 열기).
   왜: 공용 hover 규칙(.… :not([disabled]):hover { background: var(--primary-soft) })은 연한 단추용이다.
   디자인 v2 토큰에서 --primary-soft 가 연회색(--fill-fixed)이 되자, 흰 글자로 채운 단추가
   연회색 바탕 + 흰 글자가 되어 글자가 안 보였다. 돌봄 보내기는 제 hover(#000)를 공용 규칙이 뒤에서 덮었다.
   채운 단추는 hover 에 **제 바탕색을 그대로** 두고 조금 밝게만 한다 — 한 색으로 덮으면 단추마다 원래 색이 틀어진다. */
.pt-checkin-btn:not(.is-ghost):not([disabled]):hover { background: var(--primary); filter: brightness(1.25); }
.actm-linkrow .pt-checkin-btn:not(.is-ghost):not([disabled]):hover { background: var(--brand-secondary); }
.day-chip.active:not([disabled]):hover { background: var(--primary); filter: brightness(1.25); }
.care-send-btn:not([disabled]):hover { background: var(--brand-secondary); filter: brightness(1.25); }
.lp-primary-action:not([disabled]):hover,
.lp-start-cta button:not([disabled]):hover { background: var(--brand-secondary); filter: brightness(1.25); }

/* 휴일 유급/무급 표시 (2026-09-26) — 정상(유급)은 색 없이, 무급만 상태색 */
.holiday-list-row .holiday-paid { font-size:12px; font-weight:700; color:var(--text-sub); }
.holiday-list-row .holiday-paid.is-unpaid { color:var(--brand-warning); }

/* ── p253 줄맞춤 (남현우 님 2026-09-27: 직원·사업 관리 첫 카드만 열이 안 맞고, 알림 칸만 세로 열이 안 맞는다) ── */
/* ① 카드 목록은 틀(.pt-detail-cards)이 gap 으로 띄운다. 쌓는 목록용 '.pt-detail-card + .pt-detail-card { margin-top:8px }' 이
      격자에서는 첫 카드만 빼고 모두 8px 내려, 첫 카드가 튀어 올라 보였다 → 격자일 때는 카드 위 여백을 없앤다.
      휴대폰(한 줄로 쌓기)은 그대로 둔다 — 연락처 카드 간격과 같게 */
@media (min-width:900px) {
  .pt-detail-cards > .pt-detail-card { margin-top: 0; }
}
/* ② 휴무일 목록: 휴대폰(위아래로 쌓을 때)의 margin-top 8px 이 PC 두 칸에서도 남아 달력 머리보다 8px 내려가 있었다 */
@media (min-width:1100px) {
  .holiday-cal-wrap > #holidayList { margin-top: 0; }
}
/* ③ 칸 몸통의 맨글자는 제목 줄에. 머리는 좌우 20px, 몸통은 12px(상자 끝을 12 에 두고 상자 안 글자를 제목에 맞추려고)이라
      상자 없는 글자만 8px 왼쪽으로 나와 보였다 — 알림 문구와 그 단추 */
#pushBox { padding: 0 8px; }
/* ④ 입력칸 이름표는 칸 안쪽 글자에 맞춰 12px 들어가 있다(19번). 그 아래 안내·빈 목록 글자도 같은 줄에 */
.field > .from-roster-note,
.field > .phone-manager-tags > .phone-manager-empty { padding-left: 12px; }

/* ── p254 링크 복사 알림 (남현우 님 2026-09-27: 복사됐다는 게 안 보인다) ── */
/* 누른 단추 자리에서 알린다 — 글자·테두리만 초록 */
.pt-checkin-btn.is-copied { color: var(--status-success); border-color: var(--status-success); }
/* 아래 알림 폭을 글자에 맞춘다 — left:50% 만 주면 남은 절반 폭으로 줄어 휴대폰에서 네 줄로 찌그러졌다 */
.toast { width: max-content; }

/* ── p256 안부관리 줄맞춤 (2026-09-27 ui_audit2 로 찾음 — 알림 칸·운영팀 안내와 같은 일) ── */
/* '자주 쓰는 문구' 줄과 글자 수 안내(아직 적지 않았습니다)를 아래 이름표(안내멘트, 19번 규칙으로 12px 들어감)와 같은 줄에 */
.care-preset-row { padding-left: 12px; }
.field > .care-meta,
.care-locked-note { padding-left: 12px; }


/* 직원 창 — 맡은 사업·전화 받기 (2026-09-30 p270). 줄은 선 대신 바탕으로 가르지 않고 목록 한 판 안에서 가는 선 하나 */
.staff-biz-list { border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 288px; overflow-y: auto; background: var(--bg-surface); }
.staff-biz-list .sb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.staff-biz-list .sb-row:last-child { border-bottom: 0; }
.staff-biz-list .sb-admin { background: var(--fill-fixed); cursor: pointer; }
.staff-biz-list .sb-pick, .staff-biz-list .sb-calls { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.staff-biz-list .sb-pick span { font-size: 14px; font-weight: 600; color: var(--text); word-break: keep-all; }
.staff-biz-list .sb-admin .sb-pick span { font-weight: 700; }
.staff-biz-list .sb-calls { flex: 0 0 auto; }
.staff-biz-list .sb-calls span, .staff-biz-list .sb-note { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.staff-biz-list input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }
.staff-biz-list input:disabled, .staff-biz-list input:disabled + span { opacity: .4; cursor: default; }

/* ══ 작은 단추는 색과 상관없이 13px (2026-09-30 p272) ══════════════════
   `.btn.btn-primary { font-size:16px }` 이 `.btn.btn-sm` 뒤에 있어 검은 작은 단추만 32 칸에 16 글자였다.
   명단 업로드의 '참여자만 받기'(13)·'통합양식 받기'(16)가 크기가 달라 보인 까닭. 저장·찾기·직접 녹음도 같았다 */
.btn.btn-primary.btn-sm { font-size: 13px; }
/* 글자가 붙은 작은 단추의 그림은 16 — 그림만 있는 단추(20)는 svg 가 혼자라 :only-child 로 비켜 간다 */
.btn.btn-sm > svg:not(:only-child) { width: 16px; height: 16px; }

/* 명단 업로드 받기 둘 — 한 줄에 놓으면 폭을 같게 (DESIGN.md '각을 맞춘다') */
.rs-head-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); }
/* 폰에선 설명이 한 줄 5~6자로 짓눌렸다 → 단추를 설명 아래 한 줄로 */
@media (max-width: 640px) {
  #stab-roster .panel-head { flex-wrap: wrap; }
  #stab-roster .panel-head > div:first-child { flex: 1 1 100%; }
  #stab-roster .rs-head-actions { flex: 1 1 100%; }
}

/* ══ 출근 현황판 (2026-09-30 p273) ══════════════════════════════════════
   교육장·사무실 큰 화면. 머리 · 요약 카드(활동 화면 astat 그대로) · 사람 칸.
   층: 창(100~120)·A4(400) 위, 드롭다운 목록(1200)·알림(9999) 아래 */
.att-board { position: fixed; inset: 0; z-index: 500; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-canvas); padding: var(--space-4) var(--space-6) var(--space-8); }
.att-board[hidden] { display: none; }
body.att-board-open { overflow: hidden; }
.ab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.ab-titles h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-strong); }
.ab-titles p { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.ab-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ab-tools .dd-btn { width: 200px; flex: 0 0 200px; }      /* 드롭다운 감싸개는 display:contents — 단추가 곧 칸이다. 기본 폭 100% 를 한 줄로 */
.ab-tool { height: var(--control-medium); min-height: var(--control-medium); }
.btn.ab-icon { width: var(--control-medium); min-width: var(--control-medium); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn.ab-icon[hidden] { display: none; }
.ab-stats { margin-bottom: var(--space-2); }
.ab-last { min-height: 20px; margin: 0 0 var(--space-3); font-size: 13px; font-weight: 700; color: var(--text-default); }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.ab-tile { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 60px;
  padding: 10px 36px 10px 12px; border-radius: var(--radius-card); border: 1px solid var(--border-default); background: var(--bg-surface); }
.ab-tile.is-wait { background: var(--fill-fixed); border-color: var(--fill-fixed); }
.ab-name { font-size: 16px; font-weight: 700; color: var(--text-strong); line-height: 1.3; overflow-wrap: anywhere; }
.ab-tile.is-wait .ab-name { color: var(--text-sub); }
.ab-meta { font-size: 13px; font-weight: 600; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.ab-ok { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; color: var(--status-success); }
.ab-ok svg { width: 20px; height: 20px; display: block; }
/* 방금 찍힌 칸 — 한 번 톡 튀고 노란 테가 사라진다 (올려놓기·찍기에 반응한다는 신호) */
.ab-tile.is-new { animation: ab-pop 1.8s ease-out 1; }
@keyframes ab-pop { 0% { transform: scale(.94); box-shadow: 0 0 0 4px var(--focus-ring); }
  40% { transform: scale(1.03); box-shadow: 0 0 0 4px var(--focus-ring); } 100% { transform: none; box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .ab-tile.is-new { animation: none; } }
.ab-empty { grid-column: 1 / -1; padding: var(--space-6); text-align: center; font-size: 14px; font-weight: 600; color: var(--text-sub);
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
/* 교육장 빔(1600 이상)은 멀리서 읽혀야 한다 — 칸과 글자를 키운다 */
@media (min-width: 1600px) {
  .ab-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
  .ab-tile { min-height: 76px; padding: 12px 44px 12px 16px; }
  .ab-name { font-size: 22px; }
  .ab-meta { font-size: 16px; }
  .ab-ok, .ab-ok svg { width: 26px; height: 26px; }
  .ab-stats .astat .v { font-size: 40px; }
  .ab-stats .astat .k { font-size: 16px; }
  .ab-stats .astat .s { font-size: 14px; }
  .ab-titles h2 { font-size: 28px; }
  .ab-last { font-size: 16px; }
}
@media (max-width: 640px) {
  .att-board { padding: var(--space-3) var(--space-4) var(--space-6); }
  .ab-tools { width: 100%; }
  .ab-tools .dd-btn { width: auto; flex: 1 1 calc(50% - 4px); min-width: 0; }   /* 요약 카드 2+2 는 활동 화면 규칙(6칸·3칸씩) 그대로 */
  .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 활동 막대 — [출근 현황판][급여명세서] 한 칸에 둘 (p273) */
.activity-toolbar-pair { display: flex; gap: var(--space-2); width: 100%; }
.activity-toolbar-pair > .btn { flex: 1 1 0; min-width: 0; }

/* ── p300 (2026-10-05 대표님) 담당자 승인 전 회색 · 승인 검정 · 그 날 기록 전부 ──────────────
   돈이 들어가는 일이라 정상인 날도 승인 전까지 회색. 색·크기는 토큰만 (DESIGN.md) */
#activityLogRows tr.ac-pending .ac-main .view-only b,
#activityLogRows tr.ac-pending .ac-pay b { color: var(--text-sub); }
#activityLogRows tr.ac-approved .ac-main .view-only b,
#activityLogRows tr.ac-approved .ac-pay b { color: var(--text-strong); }
.ac-state { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; margin-right: 6px;
            border-radius: var(--radius-pill); border: 1px solid var(--border-default);
            font-size: 12px; font-weight: 700; color: var(--text-sub); background: var(--bg-surface); }
.ac-state.is-ok { color: var(--bg-surface); background: var(--text-strong); border-color: var(--text-strong); }
#activityLogRows tr.ac-ev-row td { background: var(--bg-canvas); padding: 0 12px; cursor: default; }
.ac-ev-list { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 12px; font-size: 13px; font-weight: 600; }
.ac-ev-head { color: var(--text-sub); font-size: 12px; font-weight: 700; }
.ac-ev-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ac-ev-time { min-width: 44px; font-weight: 800; color: var(--text-strong); }
.ac-ev-label { color: var(--text-default); }
.ac-ev-via { color: var(--text-sub); font-size: 12px; }
.ac-ev-addr { color: var(--status-danger); font-size: 12px; font-weight: 700; }
.ac-ev-item.is-out .ac-ev-label { color: var(--status-danger); font-weight: 700; }
.ac-ev-empty { color: var(--text-sub); font-size: 13px; }
.ac-ev-btn { min-height: 32px; }

/* p300d (2026-10-05) 활동 목록 '승인 전 N일' — 수정됨 표와 같은 자리·같은 모양. 색은 chip-mute 그대로 (할 일이지 문제가 아니다) */
.activity-summary-row .activity-pending-sum { margin: 0; cursor: help; }
/* p300d 활동 요약 여섯째 칸 '승인 전' — 휴대폰에서 순서를 안 주면 order 0 이라 맨 앞으로 간다. 맨 아래 한 줄로 */
@media (max-width:640px) {
  #activityStats .astat:nth-child(6) { order: 6; grid-column: span 6; }
}

/* p301c (2026-10-05) 출근기록 칸 맞춤 — 행동 글 길이가 달라 '온다정 링크'·주소가 줄마다 다른 자리에서 시작했다(남현우 님 "디자인도 잘 봐야").
   PC: 시각 | 행동 | 경로 | 주소 네 칸. 휴대폰: 둘째 줄(경로·주소)이 행동 글과 같은 자리에서 시작 — 시각 칸 밑으로 들어가지 않게 */
@media (min-width: 641px) {
  .ac-ev-item { display: grid; grid-template-columns: 64px 220px 76px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
}
@media (max-width: 640px) {
  .ac-ev-item { column-gap: 10px; row-gap: 2px; }
  .ac-ev-time { flex: 0 0 64px; }
  /* 행동 글이 첫 줄의 나머지를 다 차지한다 — basis 0 이면 경로·주소가 같은 줄에 붙어 글이 한 글자 폭으로 줄었다(p301c 휴대폰 캡처) */
  .ac-ev-label { flex: 1 1 calc(100% - 74px); min-width: 0; }
  .ac-ev-via { margin-left: 74px; }
}

/* ══ p302 (2026-10-05 대표님) 요약 칸 두 줄 — "통계들이 3줄로 … 다 2줄로 깔끔하게" ══════════════
   첫 줄 숫자(9/22 그대로 맨 위), 둘째 줄 이름 · 짧은 말. 그림은 오른쪽 위 그대로(absolute).
   곁들이는 말이 비면 '·' 도 안 붙는다. 긴 부연은 글에서 뺐다(script.js) — 칸이 좁아도 두 줄에 선다 */
.astat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "v v" "k s";
  column-gap: 6px; row-gap: 2px; align-items: baseline;
}
.astat .v { grid-area: v; margin: 0; }
.astat .k { grid-area: k; margin: 0; white-space: nowrap; }
.astat .s { grid-area: s; margin: 0; min-width: 0; }
.astat .s:not(:empty)::before { content: "· "; }

/* ══ p302 (2026-10-05 대표님) 토글 단추 — 네이버 증권처럼 '고른 것' 의 윤곽이 또렷하게 ══════════════
   회색 틀 안에서 고른 쪽만 흰 단추로 떠오른다(옅은 테두리 + 옅은 그림자). 고른 글자는 먹색 굵게, 나머지는 회색.
   본보기: 네이버 증권 '국내 | 미국'(틀 #f6f8fa·2px, 고른 쪽 흰 바탕·그림자·700) — 대표님 말씀대로 고른 쪽에 테두리 1px 을 더했다.
   DESIGN.md 4.x '고른 것은 색으로만 알린다' 의 예외로 같은 날 적었다. 빨강(브랜드)은 쓰지 않는다 — 빨강은 아끼는 색.
   옛 규칙 하나가 settings-tab·care-mode-tab 의 그림자를 !important 로 끈다(3809줄) → 여기서만 !important 로 되살린다 */
:root { --shadow-toggle: 0 1px 3px rgba(16, 24, 40, .14); }
.call-mode-tabs, .pt-main-tabs, .care-mode-tabs, .cs-page-tabs, .cs-inner-tabs,
.call-stats-tabs, .seg, .approval-tabs, .settings-tabs {
  background: var(--fill-fixed);
  border: 1px solid var(--fill-fixed);
  border-radius: var(--radius-card);
  padding: 3px; gap: 3px; box-sizing: border-box;
}
.call-mode-btn, .pt-main-tab, .care-mode-tab, .cs-page-tab, .cs-inner-tab,
.call-stats-tab, .seg-btn, .approval-tab, .settings-tab {
  background: transparent; color: var(--text-sub); font-weight: 500;
  border: 1px solid transparent; border-radius: var(--radius-control); box-shadow: none;
}
.call-mode-btn.active, .call-mode-btn.is-on, .pt-main-tab.active, .care-mode-tab.active, .cs-page-tab.active,
.cs-inner-tab.active, .call-stats-tab.active, .seg-btn.is-on, .approval-tab.is-on, .settings-tab.active {
  background: var(--bg-surface); color: var(--text-strong); font-weight: 700;
  border-color: var(--border-default);
  box-shadow: var(--shadow-toggle) !important;
}
/* 높이가 정해진 틀(통화 40·연락처 40)에서 여백 3px 이 생기자 단추가 아래로 넘쳤다 → 단추는 틀 안쪽 높이에 맞춘다 */
.call-mode-tabs, .pt-main-tabs { align-items: stretch; }
.call-mode-tabs > .call-mode-btn, .pt-main-tabs > .pt-main-tab { height: auto; min-height: 0; align-self: stretch; box-sizing: border-box; }

/* ══ p306 (2026-10-06) 활동 화면 날짜 + [그 날 | 그 달] — 토글은 p302 모양(.seg) 그대로, 높이는 업무 칸(--control-medium)에 맞춘다 ══ */
.activity-date-pair { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.activity-date-pair input[type="date"] { min-width: 150px; }
.activity-view-seg { display: inline-flex; flex: 0 0 auto; }
.activity-view-seg .seg-btn { flex: 0 0 auto; height: calc(var(--control-medium) - 8px); padding: 0 var(--space-3); font-size: 14px; }
.activity-day-row.is-wait .actrow-stat, .activity-day-row.is-wait .actrow-pay { color: var(--text-sub); }
.activity-day-row { cursor: default; }

/* ══ p307 (2026-10-06) 중도포기 — 활동 목록 이름 옆 표, 참여자 고치기 창의 [삭제] 고르기 칸 ══ */
.actrow-drop { display: inline-block; margin-left: var(--space-1); padding: 1px var(--space-2); border-radius: var(--radius-pill);
  background: var(--fill-fixed); color: var(--text-sub); font-size: 12px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.edit-drop { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); display: grid; gap: var(--space-3); }
.edit-drop[hidden], .edit-drop .form-grid[hidden], #editMainActions[hidden] { display: none; }
.edit-drop-seg { display: inline-flex; justify-self: start; }
.edit-drop-seg .seg-btn { flex: 0 0 auto; height: calc(var(--control-medium) - 8px); padding: 0 var(--space-4); font-size: 14px; }
.edit-drop-hint { margin: 0; color: var(--text-sub); font-size: 13px; line-height: 1.5; word-break: keep-all; }

/* ══ p308 (2026-10-06 23:30 대표님) 명단 업로드 칸 — '참여자만 받기' 옆 '중도포기자 포함' 체크 ══ */
.rs-incl-drop { display: inline-flex; align-items: center; gap: var(--space-2); min-height: calc(var(--control-medium) - 8px);
  padding: 0 var(--space-2); color: var(--text-sub); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.rs-incl-drop input { width: 18px; height: 18px; margin: 0; accent-color: var(--action-primary); cursor: pointer; }

/* ══ p309 (2026-10-07) 기관 정보 — 온다정 콜 번호 QR 인쇄 줄 ══ */
.org-qr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3);
  color: var(--text-sub); font-size: 13px; line-height: 1.5; word-break: keep-all; }

/* ══ p309b (2026-10-07) 새 단추 디자인 맞춤 ══
   명단 업로드 머리: 받기 단추 둘은 같은 폭 두 칸(p272 그대로), '중도포기자 포함' 은 그 아래 줄 '참여자만 받기' 밑.
   세 번째 칸으로 두었더니 폰(390)에서 '통합양식 받기' 가 오른쪽으로 잘렸다(10/7 본서버 실측) */
.rs-head-actions { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-1); }
.rs-head-actions [data-action="export-roster-list"] { grid-column: 1; grid-row: 1; }
.rs-head-actions [data-action="export-unified"] { grid-column: 2; grid-row: 1; }
.rs-head-actions .rs-incl-drop { grid-column: 1; grid-row: 2; justify-self: start; min-height: 24px; padding: 0; font-size: 13px; }
/* 기관 정보 QR 줄: 설명 왼쪽 · 단추 오른쪽. 좁으면 설명이 위, 단추는 오른쪽 끝 */
.org-qr-row { justify-content: space-between; flex-wrap: nowrap; }
.org-qr-row > span { flex: 1 1 auto; min-width: 0; }
.org-qr-row > .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .org-qr-row { flex-wrap: wrap; }
  .org-qr-row > .btn { margin-left: auto; }
}

/* ══ p316 (2026-10-07) 활동 참여자 창 — 새 계약서 줄·출근부 단추 (남현우 님 아이폰 캡처) ══ */
/* ① 두 칸 격자: 설명 한 줄 · 날짜 둘 · 단추 둘. 칸 사이 8, 단추·칸 높이 40 */
#personScheduleBar .contract-new-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-2); align-items:end; }
#personScheduleBar .contract-new-row > span { grid-column:1 / -1; }
#personScheduleBar .contract-new-row .ct-date { min-width:0; flex:none; }
#personScheduleBar .contract-new-row .btn { width:100%; margin:0; height:var(--control-medium); min-height:var(--control-medium); }
/* 아이폰 사파리 날짜 칸은 제 넓이를 고집해 width:100% 를 무시한다 — 기본 모양을 끄고 줄인다(어르신 화면에서 고친 방법) */
#personScheduleBar .ct-date input.wd-time { -webkit-appearance:none; appearance:none; display:block; width:100%; max-width:100%; min-width:0;
  height:var(--control-medium); text-align:left; }
#personScheduleBar .ct-date input.wd-time::-webkit-date-and-time-value { text-align:left; }
@media (min-width:761px) {
  #personScheduleBar .contract-new-row { grid-template-columns:160px 160px minmax(0, 1fr) auto auto; }
  #personScheduleBar .contract-new-row .btn { width:auto; padding:0 var(--space-4); }
  #personScheduleBar .contract-new-row .btn:first-of-type { grid-column:4; }
}
/* ② 출근부 단추 넷 — 폰은 2×2(한 줄 넷이면 글자가 가장자리에 닿는다) */
@media (max-width:640px) {
  #activityRecordModal .actm-docbar { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-2); }
  #activityRecordModal .actm-docbar .btn { width:100%; height:var(--control-medium); min-height:var(--control-medium); padding:0 var(--space-2); font-size:13px; }
  #activityRecordModal .actm-linkrow { gap:var(--space-2); }
}


/* ══ p321 (2026-10-07) 휴무일 달력 '부재' — 직원이 자리에 없는 날(참여자 근무는 그대로). 휴무(분홍)·비상(주황)과 다른 파랑 ══ */
.hol-cal-cell.hol-absent { background: var(--brand-info); color: var(--solid) !important; font-weight: 700; }
.hol-legend-item.hol-legend-absent { color: var(--brand-info); }
.holiday-list-row .holiday-kind-absent { color: var(--brand-info); font-weight: 700; font-size: 12px; }
.holiday-list-row .holiday-prompt-name { color: var(--muted); font-size: 12px; font-weight: 600; }
.holiday-prompt-new { display: flex; gap: var(--space-2, 8px); align-items: flex-end; margin-top: var(--space-2, 8px); }
.holiday-prompt-new[hidden] { display: none; }
.holiday-prompt-new textarea { flex: 1; min-width: 0; min-height: 72px; resize: vertical; }
@media (max-width: 640px) { .holiday-prompt-new { flex-direction: column; align-items: stretch; } }
/* 문장 칸 자리는 script.js placeHolidayPromptBox 가 화면 폭을 보고 옮긴다 — 폰은 고르기 줄 안 [선택일 등록] 앞, PC 는 줄 아래(한 줄 모양 그대로) */
.holiday-actions > .holiday-prompt-new, #appScreen .holiday-actions > .holiday-prompt-new { height: auto; }   /* #appScreen 규칙(48px)보다 세게 */
/* 범례는 항목째로 줄을 바꾼다 — 폰에서 '선 / 택됨' 처럼 한 글자씩 끊겼다 */
.holiday-cal-legend { flex-wrap: wrap; row-gap: 4px; }
.hol-legend-item { white-space: nowrap; }


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   p319 (2026-10-07) 규칙 지킴이 — 디자인 점검기(디자인/점검기/design_audit.py)로 잰 어긋남을 한 곳에서 바로잡는다.
   남현우 님 "정렬이 틀어지거나 버튼이 이상하거나 폰트가 어떤 거만 다르다거나 — 디자인 규칙으로 만들어, 자꾸 말하게 하지 말고".
   옛 묶음이 겹겹이 남아 더 센 옛 규칙이 이겨 왔다(입력칸 굵기 500 · 창 아래 단추 모서리 12 · 주 단추만 글자 16 …).
   이 묶음은 **파일 맨 끝**에 있어야 한다. 값은 DESIGN.md 와 :root 토큰. 화면을 고친 뒤에는 점검기를 다시 돌린다.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ① 숫자는 어디서나 같은 폭 (DESIGN '숫자에는 tabular-nums').
      칸마다 따로 걸었더니 빠진 곳이 생겼다 — 출근부 일수 1·11·21 이 토·일 표시와 겹쳐 들쭉날쭉해 보였고,
      통화 목록 전화번호·연락처 번호표·설명서 표도 빠져 있었다. 바탕에서 한 번에 건다(클래스를 빠뜨려도 지켜진다) */
body, body input, body select, body textarea, body button { font-variant-numeric: tabular-nums; }
.activity-doc-table td.day .d { font-variant-numeric: tabular-nums; }

/* ② 굵기는 셋(800·700·600). 토글의 안 고른 쪽 500 은 대표님 10/5 규칙(네이버 증권 국내|미국)이라 그대로 */
:root { --fw-desc: 600; }                       /* 활동 창 설명 글자(요일·'원')가 400 이던 토큰 */
b, strong { font-weight: 700; }                 /* 부모가 700 이면 '더 굵게' 가 900 이 되던 것 — 설정·급여·설명서 14곳 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-weight: 600; }   /* 입력칸 500 → 600 */

/* ③ 모서리 — 단추·입력칸·드롭다운은 8 (카드 12/16 · 칩 999 · 원 50% 는 그대로) */
#appScreen .select-soft, #appScreen .dd-btn.select-soft,
.modal-actions .btn, .modal .modal-actions .btn, #editMainActions .btn, .btn.btn-danger,
.call-transfer-manager-picker, .call-transfer-submit, .care-send-btn,
#bcCampaignName, #bcVoiceSearch, #msgCampaignName, #msgBodyText, .mgr-delete {
  border-radius: var(--radius-control);
}

/* ③-2 입력칸 모서리 — '#appScreen 입력칸' 묶음이 12 였고 입력 양식(.field) 안 칸은 8 이라 화면마다 8/12 가 섞였다. 같은 무게로 8 */
#appScreen select, .modal select, .cs-modal select, .modal-body select,
#appScreen input[type="text"], .modal input[type="text"], .cs-modal input[type="text"],
#appScreen input[type="search"], #appScreen input[type="tel"], #appScreen input[type="email"], #appScreen input[type="password"],
#appScreen input[type="number"], #appScreen input[type="date"], #appScreen input[type="time"], #appScreen input[type="month"],
#appScreen input:not([type]), #appScreen textarea,
#appScreen .call-transfer-manager-picker, #appScreen .call-transfer-submit { border-radius: var(--radius-control); }

/* ④ 높이는 넷(24·32·40·48) — 창 닫기 34·36 → 40, 줄 지우기 ✕ 34 → 32, 활동 창 −/+ 26 → 32 */
.modal .close, .modal-head .close, .modal .modal-head .close, .activity-record-modal .modal-head .close {
  width: var(--control-medium); height: var(--control-medium); min-height: var(--control-medium);
}
.mgr-delete, .actm-step { width: var(--control-small); height: var(--control-small); min-height: var(--control-small); }
.panel-head .panel-head-actions .btn { height: var(--control-medium); min-height: var(--control-medium); }   /* 판 머리 단추는 40(PC 와 같게) — 작은 폰에서만 [엑셀 받기 32 | + 40] 이 섞였다. '+' 는 9/22 에 40 으로 정함 */
#a4Viewer .a4-viewer-close { height: var(--control-medium); min-height: var(--control-medium); border-radius: var(--radius-control); }   /* 출근부 전체 화면 [닫기] 36px·모서리 10 */

/* ⑤ 한 줄에 나란한 단추는 같은 글자·같은 높이 — '저장' 같은 주 단추만 16 · 폰에서만 48 이던 것 */
.modal-actions .btn, .modal .modal-actions .btn, #editMainActions .btn,
.cs-action-row .btn, .cs-action-row button { font-size: var(--fs-body); }
.modal-actions .btn, .modal .modal-actions .btn, #editMainActions .btn {
  height: var(--control-medium); min-height: var(--control-medium);
}

/* ⑥ 글자 크기는 일곱(22·20·16·14·13·12·11) — 설정 첫 화면 제목 28 · 통화 통계 큰 숫자 24 · 설정 카드 이름 15 */
.my-settings-title h2 { font-size: 20px; }
#callStatsTotal, #callStatsInbound, #callStatsOutbound, #callStatsMissed { font-size: 22px; }
.my-setting-card b, #homeInstallMenuItem b { font-size: var(--fs-title); }

/* ⑦ 말줄임 금지 — 이름은 다 보인다(DESIGN). 자르지 않고 줄을 바꾼다
      활동 '일' 보기 이름(제주 명단의 메모 꼬리 '(동광초)월말휴무…') · 폰 통화 목록 '(오전)현후순 (3387)' */
.activity-summary-row .actrow-name, .activity-summary-row strong.actrow-name {
  white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; overflow-wrap: anywhere;
}
.call-card-name .call-route-caller { overflow: visible; text-overflow: clip; white-space: normal; word-break: keep-all; }
.cs-saved-item .cs-saved-name { white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; overflow-wrap: anywhere; }   /* 작은 폰 저장된 멘트 이름 */
.pt-detail-name { white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; overflow-wrap: anywhere; }   /* 작은 폰 연락처 이름 '강민정담…' */

/* ⑧ 연락처 번호표(1·10·100)가 폭이 달라 이름 시작점이 줄마다 밀리던 것(폰) — 번호표 폭을 고정 */
.pt-detail-header .pt-detail-seq { min-width: 4ch; text-align: center; box-sizing: border-box; }

/* ══ p326 (2026-10-07 대표님) 통화 필터 — 참여자 필터(#ptFilterBtn · #filterModal)와 같은 단추·창. 토큰만 쓴다 ══════════════
   건수 줄 오른쪽에 [기간][필터] 를 한 묶음으로(누르는 것은 오른쪽 · 필터가 끝). 고른 것은 줄 아래 표(칩)로, 없으면 자리도 없다 */
.call-subbar-tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: 0 0 auto; }
.call-subbar-tools > .call-period-menu { margin-left: 0; }
.call-log-subbar { flex-wrap: wrap; }
.call-log-subbar > .call-filter-tags { flex: 1 0 100%; margin: 0; }
.call-log-subbar > .call-filter-tags:empty { display: none; }
#callFilterBtn { position: relative; width: var(--control-medium); min-width: var(--control-medium); height: var(--control-medium);
  padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
#callFilterBtn > svg { width: 20px; height: 20px; flex: 0 0 auto; }
#callFilterBtn .pt-filter-badge { position: absolute; top: -4px; right: -4px; }
#callFilterBtn.has-filter { color: var(--primary); }
@media (min-width: 1100px) {
  .call-log-subbar > .call-subbar-tools { grid-column: 1; grid-row: 1; justify-self: end; margin-right: 16px; }
  .call-log-subbar > .call-filter-tags { grid-column: 1; grid-row: 2; margin: 0 16px; }
}
/* 방향 고르기는 p302 토글(.seg) — 셋을 같은 폭으로 (DESIGN '단추 셋을 한 줄에 놓을 때는 각을 맞춘다') */
#callFilterDir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; height: var(--control-medium); align-items: stretch; }
#callFilterDir .seg-btn { height: auto; min-height: 0; padding: 0 var(--space-2); font-size: 14px; }
#callFilterDir .seg-btn:disabled { cursor: default; }
/* 창 아래 단추·닫기 — p319 ④⑤ 를 .modal-foot · .modal-close 에도 건다. 점검기에 필터 창 둘(통화·참여자)을 열게 했더니
   [초기화 14 | 적용 16] · 폰 높이 48/40 · ✕ 34 가 잡혔다(p319 는 .modal-actions · .modal .close 만 맞췄다) */
.modal-foot .btn { font-size: var(--fs-body); height: var(--control-medium); min-height: var(--control-medium); }
.modal-close, .modal-head .modal-close { width: var(--control-medium); height: var(--control-medium); min-height: var(--control-medium); }
/* 참여자 필터 창 [전체 | 출근 | 미출근] 도 p302 토글로 — 옛 알약(높이 22 · 모서리 999 · 출근 초록) 이었다. 통화 필터 창 방향 고르기와 같은 꼴 */
#filterModal .att-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; height: var(--control-medium);
  background: var(--fill-fixed); border: 1px solid var(--fill-fixed); border-radius: var(--radius-card); padding: 3px; gap: 3px; box-sizing: border-box; }
#filterModal .att-group .att-btn { height: auto; min-height: 0; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-control);
  background: transparent; color: var(--text-sub); font-size: 14px; font-weight: 500; box-shadow: none; }
#filterModal .att-group .att-btn.active { background: var(--bg-surface); color: var(--text-strong); font-weight: 700;
  border-color: var(--border-default); box-shadow: var(--shadow-toggle); }

/* ══ p327 (2026-10-07 남현우 님 "캠페인 결과가 왼쪽으로 되어 있어, 자꾸") 캠페인 예약·결과 목록 = [캠페인 생성] 과 같은 폭 ══════════════
   9/5 의 '목록 가운데로'(max-width 780 + margin auto, 이 파일 위쪽) 는 바깥 탭 상자가 780 으로 왼쪽에 붙어 있어 소용이 없었다(HTML 에 박힌 폭 — p327 에서 뺌).
   탭을 바꿔도 폭이 같아야 한다 — 생성 탭은 화면 끝까지라 목록도 끝까지. 폰은 원래 꽉 찼다 */
#bcTabReserve, #bcTabHistory, #msgTabReserve, #msgTabHistory { max-width: none; }
#bcHistoryList, #bcReserveList, #msgHistoryList, #msgReserveList { max-width: none; margin-left: 0; margin-right: 0; }

/* ══ p328 (2026-10-07) '기록 전부' 찍은 곳 — 한 줄엔 동네까지(글자 단추), 누르면 아래에 상세 주소·거리. 반경 밖은 빨강 그대로 ══ */
.ac-ev-place { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-sub);
  text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ac-ev-item.is-out .ac-ev-place { color: var(--status-danger); }
.ac-ev-full { flex: 1 1 100%; font-size: 12px; font-weight: 600; color: var(--text-default); word-break: keep-all; overflow-wrap: anywhere; }
.ac-ev-full[hidden] { display: none; }
@media (min-width: 641px) { .ac-ev-full { grid-column: 2 / -1; } }
@media (max-width: 640px) { .ac-ev-place { margin-left: 0; } .ac-ev-full { margin-left: 74px; } }
/* p328b — 출근기록 줄은 옛 표 규칙(.activity-edit-table td:first-child span → block · 11px · 회색)이 더 세서
   접힌 상세 주소가 보였고 단추만 12px 이었다(10/7 실제 화면). 같은 줄 '온다정 링크'(11px)에 맞추고, 펼친 주소는 읽게 12px 먹색 */
#activityLogRows .ac-ev-place { font-size: 11px; }
#activityLogRows .ac-ev-full { display: block; font-size: 12px; color: var(--text-default); }
#activityLogRows .ac-ev-full[hidden] { display: none; }
/* ══ p331 (2026-10-07 남현우 님) 창 머리줄 — ✕ 는 제목 줄 가운데에 ══════════════════════════════════
   "항상 가로열끼리 세로열끼리 정렬이 잘 맞아야 해" — 창 26개 중 15개가 어긋났다. 머리줄이 [제목+설명 묶음 | ✕] 를 가운데로 맞춰서
   설명 줄이 있으면 ✕ 가 그만큼 내려갔다(PC 2~14px · 폰 최대 35px). 폰에선 설명이 길면 ✕ 가 22·36px 로 눌렸다.
   제목 줄 높이를 24 로 정하고 ✕(40)는 위에 붙이되 위아래 -8px 로 제목 줄 가운데에 둔다 — 머리 높이는 그대로 */
.modal-head { align-items: flex-start; }
.modal-head h3 { line-height: 24px; }
.modal-head > .close, .modal-head > .modal-close,
.activity-record-modal .modal-head > .close {
  flex: 0 0 auto; align-self: flex-start;
  margin-top: calc((24px - var(--control-medium)) / 2); margin-bottom: calc((24px - var(--control-medium)) / 2);
}
.actm-idline { min-height: 24px; }
/* 제목 줄에 '?' 단추(32)가 있는 창(팩스·담당자 선택·비밀번호·외부 추가)은 제목 줄이 32 라 ✕ 를 -4 로 */
.modal-head:has(h3 .actm-help) > .close, .modal-head:has(h3 .actm-help) > .modal-close {
  margin-top: calc((32px - var(--control-medium)) / 2); margin-bottom: calc((32px - var(--control-medium)) / 2);
}
/* 활동 창 ✕ 는 내려도 따라오게 sticky 인데 top 12 가 ✕ 를 4px 아래로 붙들었다 — 머리 여백 16 - 8 = 8 */
.activity-record-modal .modal-head > .close { top: calc(16px + (24px - var(--control-medium)) / 2); }

/* ══ p331 머리줄 [통화 | 연락처 | 활동] — 대표님 토글 규칙(p302, 네이버 증권 '국내 | 미국') + 누르면 바로 ══════════════
   ① 누른 뒤에도 손이 단추 위에 있으면 '손 올림 회색' 이 '고름' 을 이겨 안 바뀐 것처럼 보였다 — 고른 쪽은 손을 올려도 그대로
   ② 0.15초 서서히 → 바로(네이버 증권 0초) ③ 고른 쪽 빨강 꽉 채움 → 흰 단추가 떠오름(토글엔 빨강을 안 쓴다 — 대표님 10/5)
   안 고른 쪽에 손을 올리면 바탕이 살짝 든다(남현우 님 "살아 있는 느낌 좋다"). 틀은 p302 와 같이 회색 바탕 + 같은 색 테두리 1 + 여백 3 */
.header-nav-group, .header-nav-group:hover {
  background: var(--fill-fixed); border: 1px solid var(--fill-fixed); border-radius: var(--radius-card); padding: 3px;
}
.header-primary-nav-btn {
  transition: none; background: transparent; color: var(--text-sub); font-weight: 500;
  border: 1px solid transparent; border-radius: var(--radius-control); box-shadow: none;
}
.header-primary-nav-btn:hover { background: color-mix(in srgb, var(--bg-surface) 70%, transparent); color: var(--text-default); }
.header-primary-nav-btn.active, .header-primary-nav-btn.active:hover,
.header-primary-nav-btn.is-active, .header-primary-nav-btn.is-active:hover {
  background: var(--bg-surface); color: var(--text-strong); font-weight: 700;
  border-color: var(--border-default); border-radius: var(--radius-control); box-shadow: var(--shadow-toggle) !important;
}
/* 같은 줄의 종·사람 단추도 틀과 같은 48 — 위아래 끝까지 맞춘다(PC 는 40 이라 틀보다 4px 씩 안쪽이었다) */
#headerBellBtn.header-bell-btn, #headerUserBtn.header-user-btn { height: 48px; min-height: 48px; }   /* 옛 규칙(3971줄)이 id 로 걸려 있어 id 로 */

/* ══ p331 활동 목록 — 화면 밖 줄은 그리지 않는다 ═══════════════════════════════════════════════
   활동으로 바꿀 때마다 4천 명 줄을 한 번에 놓고 그려 2~3초 버벅였다. 화면 밖 줄은 자리(대략 높이)만 잡아 두고 보일 때 그린다.
   'auto' 라 한 번 그린 줄은 실제 높이를 기억한다. 찾기(Ctrl+F)·읽기 도구는 그대로 찾는다 */
#activitySummaryList > .activity-summary-row:not(.activity-summary-head) { content-visibility: auto; contain-intrinsic-size: auto 48px; }