/* ===== 팀플로우 스타일 — 깔끔한 라이트 톤 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --line: #e6e8ef;
  --text: #23272f;
  --text-sub: #6b7280;
  --accent: #6366f1;
  --accent-soft: #eef0fe;
  --design: #ec4899;
  --design-soft: #fdeaf4;
  --web: #3b82f6;
  --web-soft: #e8f1fe;
  --danger: #ef4444;
  --ok: #10b981;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(30, 34, 60, .07), 0 4px 14px rgba(30, 34, 60, .05);
}

body {
  font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
}

.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ===== 공통 버튼 ===== */
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 9px 18px; border-radius: 9px; font-size: 14px; font-weight: 600;
  transition: background .15s;
}
.btn-primary:hover { background: #5054e0; }
.btn-block { width: 100%; padding: 12px; font-size: 15px; }
.btn-ghost {
  background: transparent; border: 1px solid var(--line); color: var(--text-sub);
  padding: 7px 14px; border-radius: 9px; font-size: 13px; white-space: nowrap;
}
.btn-ghost:hover { background: #fff; color: var(--text); }
.btn-danger {
  background: #fee2e2; color: var(--danger); border: none;
  padding: 9px 16px; border-radius: 9px; font-weight: 600;
}
.btn-danger:hover { background: #fecaca; }

/* ===== 로그인 화면 ===== */
.auth-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #eef0fe 0%, #f6f7fb 45%, #fdeaf4 100%);
  padding: 20px;
}
.auth-card {
  width: 400px; max-width: 100%;
  background: var(--card); border-radius: 20px; box-shadow: var(--shadow);
  padding: 38px 34px;
}
.auth-logo { text-align: center; margin-bottom: 26px; }
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 15px;
  background: linear-gradient(135deg, var(--accent), var(--design));
  color: #fff; font-weight: 800; font-size: 19px; letter-spacing: .5px;
  margin-bottom: 12px;
}
.logo-mark.small { width: 34px; height: 34px; font-size: 13px; border-radius: 10px; margin: 0; }
.auth-org { color: var(--text-sub); font-size: 12.5px; font-weight: 700; letter-spacing: .3px; margin-bottom: 3px; }
.auth-logo h1 { font-size: 24px; }
.auth-sub { color: var(--text-sub); font-size: 13.5px; }

.auth-tabs {
  display: flex; background: var(--bg); border-radius: 10px; padding: 4px; margin-bottom: 20px;
}
.auth-tab {
  flex: 1; border: none; background: transparent; padding: 9px;
  border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-sub);
}
.auth-tab.active { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

.auth-form label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--text-sub); }
.auth-form input[type="text"], .auth-form input[type="password"] {
  width: 100%; margin-top: 6px; padding: 11px 13px;
  border: 1.5px solid var(--line); border-radius: 10px; font-size: 14.5px;
  transition: border-color .15s;
}
.auth-form input:focus { outline: none; border-color: var(--accent); }

.field-label { font-size: 13px; font-weight: 600; color: var(--text-sub); }
.team-field { margin-bottom: 16px; }
.team-choose { display: flex; gap: 10px; margin-top: 8px; }
.team-option {
  flex: 1; text-align: center; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 11px 6px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-sub);
  transition: all .15s;
}
.team-option input { display: none; }
.team-option.design:has(input:checked) { border-color: var(--design); background: var(--design-soft); color: var(--design); }
.team-option.web:has(input:checked) { border-color: var(--web); background: var(--web-soft); color: var(--web); }

.auth-error {
  background: #fee2e2; color: #b91c1c; font-size: 13px;
  padding: 9px 12px; border-radius: 8px; margin-bottom: 14px;
}

/* ===== 상단 바 ===== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 10px 22px; gap: 16px;
}
/* 좌우 영역에 같은 너비를 줘서 가운데 메뉴가 화면 정중앙에 오도록 */
.topbar-left { display: flex; align-items: center; gap: 9px; flex: 1 1 0; min-width: 0; }
.logo-text { font-weight: 800; font-size: 16.5px; white-space: nowrap; }
.label-hint { font-weight: 500; color: #a8aebc; font-size: 11.5px; }
/* 메뉴가 많아 화면이 좁으면, 페이지를 밀지 말고 메뉴만 좌우로 넘겨 본다 */
.topnav {
  display: flex; gap: 4px; flex: 0 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }
.nav-btn {
  border: none; background: transparent; padding: 8px 13px; flex: 0 0 auto;
  border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-sub);
  transition: all .15s; white-space: nowrap;
}
.nav-btn:hover { background: var(--bg); color: var(--text); }
.nav-btn.active { background: var(--accent-soft); color: var(--accent); }
.topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1 1 0; min-width: 0; }
.me-badge {
  font-size: 13px; font-weight: 600; color: var(--text-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 0 auto; max-width: 170px;
}
.me-badge b { color: var(--text); }

.main { max-width: 1240px; margin: 0 auto; padding: 24px 22px 60px; }

/* ===== 뷰 공통 헤더 ===== */
.view-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.view-title { font-size: 20px; font-weight: 800; }
.view-title small { display: block; font-size: 13px; font-weight: 500; color: var(--text-sub); margin-top: 2px; }

.filter-tabs { display: flex; gap: 6px; }
.filter-tab {
  border: 1px solid var(--line); background: #fff; padding: 7px 14px;
  border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--text-sub);
  transition: all .15s;
}
.filter-tab.active-mine { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-tab.active-all { background: var(--text); border-color: var(--text); color: #fff; }
.filter-tab.active-design { background: var(--design); border-color: var(--design); color: #fff; }
.filter-tab.active-web { background: var(--web); border-color: var(--web); color: #fff; }

/* ===== 칸반 보드 ===== */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.board-col {
  background: #eef0f5; border-radius: var(--radius); padding: 10px;
  min-height: 180px; transition: background .15s, outline .15s;
}
.board-col.drag-over { background: var(--accent-soft); outline: 2px dashed var(--accent); }
.col-head {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px 10px; font-size: 13.5px; font-weight: 700;
}
.col-count {
  margin-left: auto; background: #fff; color: var(--text-sub);
  font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px;
}
.col-cards { display: flex; flex-direction: column; gap: 8px; }

.task-card {
  background: var(--card); border-radius: 10px; box-shadow: var(--shadow);
  padding: 12px 13px; cursor: grab; border-left: 3.5px solid transparent;
  transition: transform .12s, box-shadow .12s;
}
.task-card:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(30,34,60,.12); }
.task-card.team-design { border-left-color: var(--design); }
.task-card.team-web { border-left-color: var(--web); }
.task-card.dragging { opacity: .45; }
/* 긴급 업무는 카드 자체를 붉게 */
.task-card.urgent {
  background: #fff5f5;
  box-shadow: 0 0 0 1.5px #fecaca, var(--shadow);
}
.task-card.urgent:hover { box-shadow: 0 0 0 1.5px #fca5a5, 0 3px 10px rgba(30, 34, 60, .12); }
.task-card.urgent .card-title { color: #b91c1c; }
.card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.team-chip {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
}
.team-chip.design { background: var(--design-soft); color: var(--design); }
.team-chip.web { background: var(--web-soft); color: var(--web); }
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; word-break: keep-all; }
.card-bottom { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: #fff;
}
.avatar.design { background: var(--design); }
.avatar.web { background: var(--web); }
.avatar.none { background: #cbd0da; }
.card-due { font-size: 12px; color: var(--text-sub); }
.card-due.overdue { color: var(--danger); font-weight: 700; }
.card-due.today { color: #d97706; font-weight: 700; }
.empty-col { text-align: center; color: #a8aebc; font-size: 12.5px; padding: 18px 0; }

/* ===== 캘린더 ===== */
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-nav button {
  border: 1px solid var(--line); background: #fff; width: 32px; height: 32px;
  border-radius: 9px; font-size: 14px; color: var(--text-sub);
}
.cal-nav button:hover { background: var(--bg); }
.cal-month { font-size: 17px; font-weight: 800; min-width: 120px; text-align: center; }

.calendar { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cal-weekdays div { padding: 10px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--text-sub); }
.cal-weekdays div:first-child { color: var(--danger); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell {
  min-height: 104px; min-width: 0; overflow: hidden;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 7px; font-size: 12px;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.other { background: #fafbfd; color: #c3c8d4; }
.cal-date { font-weight: 700; margin-bottom: 5px; }
.cal-cell.today .cal-date {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: var(--accent); color: #fff; border-radius: 50%;
}
.cal-cell .sun { color: var(--danger); }
.cal-task {
  display: block; width: 100%; text-align: left; border: none;
  font-size: 11.5px; font-weight: 600; padding: 2.5px 7px; border-radius: 6px;
  margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-task.design { background: var(--design-soft); color: #be1a70; }
.cal-task.web { background: var(--web-soft); color: #1d64d8; }
.cal-task.done { text-decoration: line-through; opacity: .55; }

/* ===== 피드 ===== */
/* 대시보드 2단 배치: 왼쪽에 현황 카드들, 오른쪽에 피드 */
.dash-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.feed-card { display: flex; flex-direction: column; min-width: 0; }
.feed-list {
  overflow-y: auto; max-height: 62vh; min-height: 120px;
  margin: 0 -4px; padding: 2px 4px;
}
.composer {
  background: var(--bg); border-radius: 10px;
  padding: 12px; margin-bottom: 14px; display: flex; gap: 10px;
}
.composer textarea {
  flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 9px;
  resize: none; outline: none; font-size: 14px; padding: 8px 11px; background: #fff;
}
.composer textarea:focus { border-color: var(--accent); }
.composer .btn-primary { align-self: flex-end; padding: 9px 14px; }

.post {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; margin-bottom: 10px;
}
.post-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.post-author { font-weight: 700; font-size: 14px; }
.post-team { font-size: 11.5px; }
.post-time { margin-left: auto; font-size: 12px; color: var(--text-sub); }
.post-del { border: none; background: none; color: #c3c8d4; font-size: 12px; }
.post-del:hover { color: var(--danger); }
.post-text { white-space: pre-wrap; word-break: break-word; margin-bottom: 4px; }

.activity {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-sub);
  padding: 8px 14px; margin-bottom: 10px;
  background: #f0f2f8; border-radius: 10px;
}
.activity .act-time { margin-left: auto; font-size: 11.5px; flex: none; }

.comments { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.comment { display: flex; gap: 8px; margin-bottom: 8px; font-size: 13.5px; }
.comment .avatar { width: 22px; height: 22px; font-size: 10.5px; }
.comment-body b { font-size: 13px; margin-right: 6px; }
.comment-time { color: #a8aebc; font-size: 11.5px; margin-left: 6px; }
.comment-form { display: flex; gap: 8px; margin-top: 8px; }
.comment-form input {
  flex: 1; border: 1.5px solid var(--line); border-radius: 99px; padding: 7px 14px; font-size: 13px;
}
.comment-form input:focus { outline: none; border-color: var(--accent); }
.comment-form button {
  border: none; background: var(--accent-soft); color: var(--accent);
  border-radius: 99px; padding: 0 16px; font-weight: 700; font-size: 13px;
}

/* ===== 대시보드 ===== */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.dash-card h3 { font-size: 15.5px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.dash-card h3 .team-chip { font-size: 12px; }

.team-summary { display: flex; align-items: center; gap: 22px; }
.donut { width: 110px; height: 110px; border-radius: 50%; position: relative; flex: none; }
.donut::after {
  content: ""; position: absolute; inset: 13px; background: var(--card); border-radius: 50%;
}
.donut-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 1;
}
.donut-label b { font-size: 21px; }
.donut-label span { font-size: 11px; color: var(--text-sub); }

.status-rows { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.status-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.status-name { width: 52px; color: var(--text-sub); font-weight: 600; flex: none; }
.bar-track { flex: 1; height: 8px; background: #eef0f5; border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; }
.status-num { width: 20px; text-align: right; font-weight: 700; font-size: 12.5px; }

.member-row {
  display: flex; align-items: center; gap: 12px; font-size: 13.5px;
  padding: 9px 0; border-bottom: 1px solid #f1f2f6;
}
.member-row:last-child { border-bottom: none; }
.member-name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-nums { display: flex; gap: 6px; flex: none; }
.mnum {
  font-size: 12px; color: var(--text-sub); background: var(--bg);
  padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
.mnum b { color: var(--accent); font-size: 13px; }
.mnum.done b { color: var(--ok); }

.due-list { display: flex; flex-direction: column; gap: 8px; }
.due-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--bg); border-radius: 9px; font-size: 13.5px; cursor: pointer;
}
.due-item:hover { background: var(--accent-soft); }
.due-date-chip {
  flex: none; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 7px;
  background: #fff; color: var(--text-sub); border: 1px solid var(--line);
}
.due-date-chip.overdue { background: #fee2e2; color: var(--danger); border-color: #fecaca; }
.due-date-chip.soon { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.due-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty-note { color: #a8aebc; font-size: 13px; text-align: center; padding: 14px 0; }

/* ===== 모달 ===== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(25, 28, 45, .45);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  width: 520px; max-width: 100%; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h2 { font-size: 18px; }
.modal-close { border: none; background: var(--bg); width: 30px; height: 30px; border-radius: 8px; color: var(--text-sub); }
.task-form label { display: block; font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 13px; }
.task-form input, .task-form select, .task-form textarea {
  width: 100%; margin-top: 5px; padding: 9px 11px;
  border: 1.5px solid var(--line); border-radius: 9px; background: #fff;
}
.task-form textarea { resize: vertical; }
.task-form input:focus, .task-form select:focus, .task-form textarea:focus { outline: none; border-color: var(--accent); }
.form-row { display: flex; gap: 10px; }
.form-row label { flex: 1; }
.modal-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.spacer { flex: 1; }

/* ===== 검색 ===== */
.search-box { position: relative; }
/* 자리가 모자라면 검색창이 먼저 줄어들고, 이름 배지는 온전히 남게 */
.search-box { flex: 1 1 auto; min-width: 108px; }
.search-box input {
  width: 170px; max-width: 100%; padding: 8px 12px; border: 1.5px solid var(--line);
  border-radius: 99px; font-size: 13px; background: var(--bg);
  transition: border-color .15s, background .15s;
}
.search-box input:focus { outline: none; border-color: var(--accent); background: #fff; }
.search-results {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px;
  max-height: 420px; overflow-y: auto;
  background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.16);
  border: 1px solid var(--line); padding: 8px; z-index: 90;
}
.sr-section { font-size: 11.5px; font-weight: 700; color: #a8aebc; padding: 8px 10px 4px; }
.sr-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: none; text-align: left;
  padding: 9px 10px; border-radius: 9px; font-size: 13.5px;
}
.sr-item:hover { background: var(--accent-soft); }
.sr-item .sr-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-item .sr-sub { flex: none; font-size: 12px; color: var(--text-sub); }
.sr-empty { text-align: center; color: #a8aebc; font-size: 13px; padding: 16px 0; }

/* ===== 알림 ===== */
.notif-wrap { position: relative; }
.notif-btn {
  position: relative; border: none; background: var(--bg);
  width: 36px; height: 36px; border-radius: 50%; font-size: 16px;
}
.notif-btn:hover { background: var(--accent-soft); }
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  border: 2px solid #fff;
}
.notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; width: 330px;
  max-height: 400px; overflow-y: auto;
  background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.16);
  border: 1px solid var(--line); padding: 8px; z-index: 95;
}
.notif-head-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.notif-head-row b { font-size: 14px; }
.notif-item {
  display: flex; gap: 9px; padding: 10px; border-radius: 9px; font-size: 13px; line-height: 1.45;
}
.notif-item.unread { background: var(--accent-soft); }
.notif-item + .notif-item { margin-top: 4px; }
.notif-text { flex: 1; }
.notif-time { display: block; color: #a8aebc; font-size: 11.5px; margin-top: 2px; }
.notif-empty { text-align: center; color: #a8aebc; font-size: 13px; padding: 22px 0; }

/* ===== 업체 리스트 ===== */
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.client-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 17px 18px; cursor: pointer; transition: transform .12s, box-shadow .12s;
  border-top: 3px solid var(--line);
}
.client-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(30,34,60,.13); }
.client-card.st-lead { border-top-color: #f59e0b; }
.client-card.st-active { border-top-color: var(--ok); }
.client-card.st-paused { border-top-color: #94a3b8; }
.client-card.st-closed { border-top-color: #cbd0da; opacity: .75; }
.client-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.client-name { font-size: 15.5px; font-weight: 800; flex: 1; }
.client-status {
  flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px;
}
.client-status.ad { background: #d1fae5; color: #047857; }
.client-status.maintain { background: #e8f1fe; color: #1d64d8; }
.client-status.out { background: #f1f2f6; color: #a8aebc; }
.client-cat { font-size: 12.5px; color: var(--text-sub); margin-bottom: 10px; }
.client-info { font-size: 13px; color: var(--text-sub); display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.client-progress { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-sub); }
.client-progress .bar-track { height: 7px; }
.client-count-chip {
  background: var(--bg); font-size: 11.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px; color: var(--text-sub);
}
.card-client { font-size: 11.5px; color: var(--text-sub); background: var(--bg); padding: 2px 8px; border-radius: 99px; }
.client-home { color: var(--web); text-decoration: none; }
.client-home:hover { text-decoration: underline; }

/* ===== 업체 리스트(표) ===== */
.client-quick {
  padding: 8px 13px; border: 1.5px solid var(--line); border-radius: 99px;
  font-size: 13px; width: 170px; background: #fff;
}
.client-quick:focus { outline: none; border-color: var(--accent); }
.table-wrap {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow-x: auto;
}
.client-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 440px; }
.client-table th {
  text-align: left; padding: 11px 13px; font-size: 12px; font-weight: 700;
  color: var(--text-sub); border-bottom: 1px solid var(--line);
  white-space: nowrap; background: #fafbfd;
}
.client-table th[data-sort] { cursor: pointer; user-select: none; }
.client-table th[data-sort]:hover { color: var(--accent); }
.client-table td {
  padding: 10px 13px; border-bottom: 1px solid var(--line);
  vertical-align: middle; white-space: nowrap;
}
.client-table tbody tr[data-id] { cursor: pointer; }
.client-table tbody tr[data-id]:hover { background: var(--accent-soft); }
.client-table tbody tr:last-child td { border-bottom: none; }
.ct-name { font-weight: 700; }
.ct-sub { color: var(--text-sub); }
.ct-num { font-weight: 700; text-align: center; }
.ct-progress .bar-track { display: inline-block; width: 80px; vertical-align: middle; margin-right: 7px; }
.ct-progress span { font-size: 12px; color: var(--text-sub); }
.client-table .avatar { width: 21px; height: 21px; font-size: 10px; vertical-align: middle; margin-right: 3px; }

/* ===== 전체 업무(스프레드시트형 표) ===== */
.task-table { min-width: 1180px; }
.task-table td { padding: 5px 8px; }
.task-table th { padding: 10px 8px; }
.task-table tbody tr[data-id] { cursor: default; }
.task-table tbody tr[data-id]:hover { background: #f8f9fc; }
.task-table tbody tr.saving { opacity: .55; }
/* 긴급 업무는 줄 자체를 붉게 */
.task-table tbody tr.urgent td { background: #fff5f5; }
.task-table tbody tr.urgent:hover td { background: #ffecec; }
.task-table tbody tr.urgent .tt-title { color: #b91c1c; }
.task-table tbody tr.saved td { background: #ecfdf5; transition: background .5s; }
.tt-nowrap { white-space: nowrap; }

/* 표 안의 입력칸 — 평소엔 칸처럼 보이다가 누르면 테두리가 생긴다 */
.tt-in {
  width: 100%; border: 1.5px solid transparent; background: transparent;
  border-radius: 7px; padding: 5px 7px; font-size: 13.5px; font-family: inherit;
  color: var(--text);
}
.tt-in:hover { border-color: var(--line); background: #fff; }
.tt-in:focus { outline: none; border-color: var(--accent); background: #fff; }
.tt-title { font-weight: 600; }
.tt-titlecell { min-width: 260px; }
.tt-memocell { min-width: 150px; }
.tt-due { width: 132px; color: var(--text-sub); }
.tt-due.overdue { color: var(--danger); font-weight: 700; }
.tt-due.today { color: #d97706; font-weight: 700; }

/* 표 안의 드롭다운 — 시트처럼 색으로 구분 */
.tt-sel {
  border: 1.5px solid transparent; border-radius: 99px;
  padding: 4px 6px 4px 10px; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; max-width: 148px;
  background: #eef0f5; color: var(--text-sub);
}
.tt-sel:hover { border-color: rgba(0, 0, 0, .12); }
.tt-sel:focus { outline: none; border-color: var(--accent); }
.tt-sel.as-design { background: var(--design-soft); color: var(--design); }
.tt-sel.as-web { background: var(--web-soft); color: var(--web); }
.tt-sel.tm-design { background: var(--design-soft); color: var(--design); }
.tt-sel.tm-web { background: var(--web-soft); color: var(--web); }
.tt-sel.tt-client { background: #fff; color: var(--text); border-color: var(--line); font-weight: 600; }
.tt-sel.pr-high { background: #fee2e2; color: #dc2626; }
.tt-sel.pr-mid { background: #fef3c7; color: #b45309; }
.tt-sel.pr-low { background: #dcfce7; color: #15803d; }
.tt-sel.st-todo { background: #eef0f5; color: #64748b; }
.tt-sel.st-doing { background: #e0e7ff; color: #4f46e5; }
.tt-sel.st-review { background: #fef3c7; color: #b45309; }
.tt-sel.st-done { background: #d1fae5; color: #047857; }
.tt-sel option { background: #fff; color: var(--text); font-weight: 600; }

/* 완료 목록 구분줄 */
.task-table tr.tt-group td { padding: 0; background: #f4f6fa; border-top: 2px solid var(--line); }
.task-table tr.tt-group:hover td { background: #eef1f7; }
.tt-group-btn {
  width: 100%; text-align: left; border: none; background: transparent;
  padding: 9px 13px; font-size: 12.5px; font-weight: 700; color: var(--text-sub);
}
.tt-chev { display: inline-block; margin-left: 3px; transition: transform .15s; }
.tt-group-btn.open .tt-chev { transform: rotate(-90deg); }

.tt-open {
  border: none; background: transparent; color: var(--text-sub);
  font-size: 16px; line-height: 1; padding: 4px 8px; border-radius: 7px;
}
.tt-open:hover { background: var(--accent-soft); color: var(--accent); }
.btn-ghost.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ===== 공지 ===== */
.notice-list { display: flex; flex-direction: column; gap: 12px; }
.notice-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
}
.notice-card.pinned { border-color: #fbbf24; background: #fffbeb; }
.notice-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.notice-pin {
  flex: none; font-size: 11.5px; font-weight: 700; color: #b45309;
  background: #fef3c7; padding: 2px 9px; border-radius: 99px;
}
.notice-title { flex: 1; font-size: 16px; font-weight: 700; word-break: keep-all; }
.notice-edit {
  flex: none; border: none; background: transparent; font-size: 13px;
  padding: 4px 6px; border-radius: 7px; opacity: .45;
}
.notice-card:hover .notice-edit { opacity: 1; }
.notice-edit:hover { background: var(--accent-soft); }
.notice-body {
  font-size: 14px; color: var(--text); line-height: 1.65;
  white-space: pre-wrap; word-break: break-word; margin-bottom: 12px;
}
.notice-by {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-sub);
}
.notice-by .avatar { width: 21px; height: 21px; font-size: 10px; }

.perm-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.perm-row { border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; }
.perm-row.off { background: #fafbfd; opacity: .75; }
.perm-row.editing { border-color: var(--accent); background: var(--accent-soft); }
.perm-main { display: flex; align-items: center; gap: 9px; }
.perm-who { flex: 1; min-width: 0; }
.perm-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.perm-mail { font-size: 12px; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perm-me { font-size: 11.5px; color: var(--text-sub); background: #eef0f5; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.perm-off { font-size: 11.5px; color: #b91c1c; background: #fee2e2; padding: 2px 8px; border-radius: 99px; font-weight: 700; }
.perm-check {
  display: flex; align-items: center; gap: 5px; flex: none;
  font-size: 12.5px; font-weight: 700; color: var(--text-sub); cursor: pointer;
}
.perm-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.perm-actions { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.perm-actions .btn-ghost { font-size: 12.5px; padding: 5px 10px; }
.perm-edit label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-sub); margin-bottom: 9px; }
.perm-edit input, .perm-edit select {
  width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1.5px solid var(--line); border-radius: 9px; background: #fff; font-size: 13.5px;
}
.perm-edit input:focus, .perm-edit select:focus { outline: none; border-color: var(--accent); }

/* 임시 비밀번호 안내 */
.temp-pw {
  background: #ecfdf5; border: 1.5px solid #6ee7b7; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px; text-align: center;
}
.temp-pw-head { font-size: 13px; font-weight: 700; color: #047857; margin-bottom: 8px; }
.temp-pw-code {
  font-family: Consolas, "D2Coding", monospace; font-size: 26px; font-weight: 800;
  letter-spacing: 3px; color: #065f46; margin-bottom: 8px; user-select: all;
}
.temp-pw-note { font-size: 12.5px; color: var(--text-sub); line-height: 1.6; margin-bottom: 10px; }

/* 로그인 화면 도움말 */
.auth-help { text-align: center; margin-top: 14px; }
.link-btn {
  border: none; background: transparent; color: var(--text-sub);
  font-size: 12.5px; font-weight: 600; text-decoration: underline; font-family: inherit;
}
.link-btn:hover { color: var(--accent); }
.auth-note {
  margin-top: 10px; background: var(--accent-soft); border-radius: 10px;
  padding: 11px 13px; font-size: 12.5px; color: var(--text-sub); line-height: 1.65;
}
.pw-warn {
  background: #fef3c7; color: #92400e; border-radius: 9px;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.55; margin-bottom: 11px;
}

/* ===== 업무 댓글 ===== */
.tc-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 12px; }
.tc-item { display: flex; gap: 9px; }
.tc-body { flex: 1; min-width: 0; }
.tc-meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.tc-meta b { font-weight: 700; }
.tc-del {
  border: none; background: transparent; color: var(--text-sub);
  font-size: 11px; padding: 2px 5px; border-radius: 6px; margin-left: auto; opacity: .4;
}
.tc-item:hover .tc-del { opacity: 1; }
.tc-del:hover { background: #fee2e2; color: var(--danger); }
.tc-text { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.tc-add { display: flex; gap: 8px; align-items: flex-end; }
.tc-add textarea {
  flex: 1; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 13.5px; resize: vertical;
}
.tc-add textarea:focus { outline: none; border-color: var(--accent); }
.tc-add .btn-primary { flex: none; padding: 9px 14px; }
.card-comments { font-size: 11.5px; color: var(--text-sub); font-weight: 600; }

/* ===== 마이페이지 내 메모 ===== */
.my-memo {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-size: 14px; font-family: inherit; line-height: 1.6;
  color: var(--text); resize: vertical; min-height: 140px;
}
.my-memo:focus { outline: none; border-color: var(--accent); }
.memo-private {
  font-size: 11.5px; font-weight: 700; color: var(--text-sub);
  background: #eef0f5; padding: 2px 9px; border-radius: 99px; vertical-align: 2px;
}
.memo-saved { font-size: 12px; font-weight: 700; color: var(--ok); opacity: 0; transition: opacity .2s; }
.memo-saved.on { opacity: 1; }

/* ===== 진료일정 ===== */
.month-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  border-bottom: 2px solid var(--line); margin-bottom: 12px;
}
.month-tab {
  border: none; background: transparent; padding: 9px 16px;
  font-size: 14px; font-weight: 700; color: var(--text-sub);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.month-tab:hover { color: var(--accent); }
.month-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.month-tab.add { font-size: 12.5px; font-weight: 600; color: #a8aebc; margin-left: 4px; }
.month-tab.add:hover { color: var(--accent); }
.sched-types { margin-bottom: 12px; }

/* 지난 달 — 표 아래에 접어 둔다 */
.past-months { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.past-toggle {
  border: none; background: transparent; padding: 5px 2px;
  font-size: 12.5px; font-weight: 600; color: #a8aebc;
}
.past-toggle:hover { color: var(--accent); }
.past-caret { display: inline-block; transition: transform .15s; }
.past-months.open .past-caret { transform: rotate(90deg); }
.past-list { display: none; gap: 4px; flex-wrap: wrap; padding: 4px 0 2px; }
.past-months.open .past-list { display: flex; }
.past-list .month-tab { font-size: 13px; font-weight: 600; padding: 6px 12px; }

.sched-table { min-width: 860px; }
.sched-table td { padding: 5px 8px; }
.sched-table th { padding: 10px 8px; }
.sched-table tbody tr[data-id] { cursor: default; }
.sched-table tbody tr[data-id]:hover { background: #f8f9fc; }
.sched-table tbody tr.saving { opacity: .55; }
.sched-table tbody tr.saved td { background: #ecfdf5; transition: background .5s; }
.sc-client { min-width: 170px; }
.sc-client .tt-in { font-weight: 600; }
.sc-content { min-width: 260px; }
.sc-request { min-width: 220px; }
.tt-sel.sc-calendar { background: #e0e7ff; color: #4f46e5; }
.tt-sel.sc-simple { background: #d1fae5; color: #047857; }
.tt-sel.sc-special { background: #f3e8ff; color: #7e22ce; }
.tt-sel.sc-none { background: #eef0f5; color: #94a3b8; }
.sc-del {
  border: none; background: transparent; font-size: 13px;
  padding: 4px 7px; border-radius: 7px; opacity: .4;
}
.sched-table tr:hover .sc-del { opacity: 1; }
.sc-del:hover { background: #fee2e2; }

/* ===== 홈페이지 제작 진도 ===== */
.pl-none { font-size: 13px; color: var(--text-sub); padding: 9px 4px; }
.pl-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pl-name, .pl-note {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; font-family: inherit;
}
.pl-name { font-weight: 700; font-size: 15px; min-width: 220px; }
.pl-note { min-width: 150px; color: var(--text-sub); }
.pl-name:focus, .pl-note:focus { outline: none; border-color: var(--accent); }
.pl-gauge { flex: 1; min-width: 120px; height: 8px; background: #eef0f5; border-radius: 99px; overflow: hidden; }
.pl-gauge-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }
.pl-pct { font-size: 13px; font-weight: 700; color: var(--accent); min-width: 38px; }
.pl-mini {
  border: 1px solid var(--line); background: var(--card); border-radius: 8px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--text-sub);
}
.pl-mini:hover { border-color: var(--accent); color: var(--accent); }
.pl-mini.danger:hover { border-color: var(--danger); color: var(--danger); background: #fef2f2; }

.pl-links {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 10px;
}
.pl-links-head {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  font-size: 12.5px; font-weight: 700; color: var(--text-sub); margin-bottom: 6px;
}
.pl-links-empty { font-size: 12.5px; color: #a8aebc; }
.pl-link { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.pl-link input { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12.5px; font-family: inherit; }
.pl-link input:focus { outline: none; border-color: var(--accent); }
.pl-link-label { width: 130px; flex: none; font-weight: 600; }
.pl-link-url { flex: 1; min-width: 0; }
.pl-link-go { flex: none; text-decoration: none; font-size: 13px; padding: 4px 6px; border-radius: 6px; color: var(--accent); }
.pl-link-go:hover { background: #eef2ff; }
.pl-link-go.off { color: #cbd2df; }
.pl-link-del, .pl-col-del { border: none; background: transparent; font-size: 12px; padding: 4px 6px; border-radius: 6px; opacity: .45; }
.pl-link-del:hover, .pl-col-del:hover { opacity: 1; background: #fee2e2; }

.pl-legend { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pl-key { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.pl-legend-help { font-size: 12px; color: #a8aebc; margin-left: 2px; }

/* 시트처럼 대메뉴를 가로로 늘어놓는다 */
.pl-board {
  display: flex; gap: 8px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 8px;
}
.pl-col {
  flex: none; width: 210px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.pl-col-head { display: flex; align-items: center; background: #2c3ba6; padding: 2px 4px 2px 2px; }
.pl-col-head b { color: #fff; font-size: 13px; padding: 6px 8px; }
.pl-title {
  flex: 1; min-width: 0; border: none; background: transparent; color: #fff;
  font-size: 13px; font-weight: 700; font-family: inherit; padding: 7px 8px;
}
.pl-title::placeholder { color: #a9b3e8; }
.pl-title:focus { outline: none; background: rgba(255,255,255,.15); border-radius: 6px; }
.pl-col-del { color: #fff; }
.pl-col-del:hover { background: rgba(255,255,255,.2); }
.pl-items { list-style: none; margin: 0; padding: 0; }
.pl-item {
  display: flex; align-items: center; gap: 1px;
  border-bottom: 1px solid var(--line); padding-left: 2px;
}
.pl-item:last-child { border-bottom: none; }
.pl-sub-mark { flex: none; font-size: 11px; color: #94a3b8; padding-left: 3px; }
.pl-dot {
  flex: none; border: none; background: transparent; color: inherit;
  font-size: 12px; line-height: 1; padding: 7px 3px 7px 5px; border-radius: 5px; opacity: .75;
}
.pl-dot:hover { opacity: 1; background: rgba(0,0,0,.08); }
.pl-text {
  flex: 1; min-width: 0; border: none; background: transparent;
  font-size: 12.5px; font-family: inherit; padding: 7px 4px; color: inherit;
}
.pl-text:focus { outline: none; background: rgba(255,255,255,.6); border-radius: 5px; }
.pl-sub, .pl-del {
  flex: none; border: none; background: transparent; font-size: 11px;
  padding: 3px 4px; border-radius: 5px; opacity: 0; color: inherit;
}
.pl-item:hover .pl-sub, .pl-item:hover .pl-del { opacity: .5; }
.pl-sub:hover, .pl-del:hover { opacity: 1 !important; background: rgba(0,0,0,.08); }
.pl-add-item {
  width: 100%; border: none; background: transparent; border-top: 1px solid var(--line);
  padding: 8px; font-size: 12px; font-weight: 600; color: #a8aebc;
}
.pl-add-item:hover { color: var(--accent); background: #f8f9fc; }
.pl-add-col {
  flex: none; width: 120px; align-self: stretch; min-height: 90px;
  border: 2px dashed var(--line); border-radius: var(--radius); background: transparent;
  font-size: 12.5px; font-weight: 600; color: #a8aebc;
}
.pl-add-col:hover { border-color: var(--accent); color: var(--accent); }

/* 상태 색 — 범례와 칸에 같이 쓴다 */
/* 이 색은 제작 진도 안에서만 쓴다 (하위 업무의 .st-done 과 겹치지 않게 범위를 좁힘) */
.pl-key.st-wait { background: #f1f3f7; color: #64748b; }
.pl-item.st-wait { background: #fff; }
.pl-item.st-doing, .pl-key.st-doing { background: #b7e1cd; color: #1f6b46; }
.pl-item.st-first, .pl-key.st-first { background: #f4c7c3; color: #8c2f28; }
.pl-item.st-done, .pl-key.st-done { background: #cfe2f3; color: #1d4e89; }

.pl-board.preview { pointer-events: none; margin-top: 8px; }
.pl-board.preview .pl-col { width: 160px; }
.pl-board.preview .pl-item { padding: 6px 8px; font-size: 12px; display: block; }
.pl-board.preview .pl-item.sub { padding-left: 18px; }
.pl-more { padding: 6px 8px; font-size: 11.5px; color: #a8aebc; }

/* ===== 이용하는 사이트 ===== */
.site-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px;
}
.site-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 15px; cursor: pointer; transition: all .15s;
}
.site-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.site-card.nolink { cursor: default; }
.site-card.nolink:hover { transform: none; border-color: var(--line); }
.site-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.site-name { flex: 1; font-weight: 700; font-size: 14.5px; word-break: break-all; }
.site-edit {
  flex: none; border: none; background: transparent; font-size: 13px;
  padding: 3px 5px; border-radius: 7px; opacity: .45;
}
.site-card:hover .site-edit { opacity: 1; }
.site-edit:hover { background: var(--accent-soft); }
.site-url { font-size: 12.5px; color: var(--web); word-break: break-all; }
.site-card.nolink .site-url { color: #a8aebc; }
.site-memo {
  font-size: 13px; color: var(--text-sub); margin-top: 8px;
  white-space: pre-wrap; word-break: break-word;
}
.site-by { font-size: 11.5px; color: #a8aebc; margin-top: 9px; }

/* ===== 업체 상세 화면 ===== */
.info-row {
  display: flex; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid #f1f2f6; font-size: 13.5px; align-items: center;
}
.info-row:last-child { border-bottom: none; }
.info-label { flex: none; width: 92px; color: var(--text-sub); font-weight: 600; font-size: 12.5px; }
.info-row .avatar { width: 21px; height: 21px; font-size: 10px; vertical-align: middle; margin-right: 3px; }

.status-pill {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}

.log-list { display: flex; flex-direction: column; gap: 12px; }
.log-item { display: flex; gap: 10px; }
.log-item .avatar { flex: none; }
.log-body { flex: 1; background: var(--bg); border-radius: 10px; padding: 9px 13px; }
.log-meta { font-size: 12.5px; margin-bottom: 3px; }
.log-text { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }

/* ===== 하위 업무(체크리스트) ===== */
.subtask-list { margin: 7px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.subtask-item {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg); border-radius: 8px; padding: 8px 11px;
}
.subtask-item input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent); margin: 0; flex: none; cursor: pointer;
}
.st-text { flex: 1; font-size: 13.5px; cursor: pointer; word-break: break-word; }
.st-text.st-done { text-decoration: line-through; color: #a8aebc; }
.st-del { border: none; background: none; color: #c3c8d4; cursor: pointer; font-size: 12px; flex: none; }
.st-del:hover { color: var(--danger); }
.st-empty { color: #a8aebc; font-size: 12.5px; padding: 4px 2px; }
.subtask-add { display: flex; gap: 8px; margin-bottom: 14px; margin-top: 2px; }
.subtask-add input {
  flex: 1; padding: 8px 11px; border: 1.5px solid var(--line); border-radius: 9px; font-size: 13.5px;
}
.subtask-add input:focus { outline: none; border-color: var(--accent); }
.subtask-add button {
  border: none; background: var(--accent-soft); color: var(--accent);
  border-radius: 9px; padding: 0 15px; font-weight: 700; font-size: 13px;
}
.subtask-add button:hover { background: #dfe2fd; }

.card-subtasks {
  display: flex; align-items: center; gap: 7px; margin: 2px 0 8px;
  font-size: 11.5px; color: var(--text-sub); font-weight: 700;
}
.card-subtasks .bar-track { flex: 1; height: 6px; background: #eef0f5; border-radius: 99px; overflow: hidden; }

/* ===== 업무 보기 모달 ===== */
.tv-title { font-size: 19px; font-weight: 800; margin-bottom: 10px; word-break: keep-all; line-height: 1.4; }
.tv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tv-chip {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px;
  background: var(--bg); color: var(--text-sub);
}
.tv-chip.tv-overdue { background: #fee2e2; color: var(--danger); }
.tv-chip.tv-today { background: #fef3c7; color: #b45309; }
.tv-section-title { font-size: 13px; font-weight: 700; color: var(--text-sub); margin: 15px 0 7px; }
.tv-desc {
  background: var(--bg); border-radius: 10px; padding: 12px 14px;
  font-size: 13.5px; white-space: pre-wrap; word-break: break-word;
}
.tv-foot { margin-top: 15px; font-size: 12px; color: #a8aebc; }

/* ===== 카드/보기 모달 공용 체크리스트 ===== */
.card-checklist { margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; }
.cc-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; background: var(--bg); border-radius: 7px;
  font-size: 12.5px; cursor: pointer;
}
.cc-item:hover { background: var(--accent-soft); }
.cc-item input {
  accent-color: var(--accent); width: 15px; height: 15px; flex: none; margin: 0; cursor: pointer;
}
.cc-item span { word-break: break-word; }
.cc-item .st-done { text-decoration: line-through; color: #a8aebc; }
.st-toggle {
  border: none; background: none; color: var(--accent);
  font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; flex: none;
}
.st-toggle:hover { text-decoration: underline; }

/* ===== 컨펌 수정사항 — 업무 카드 아래 들여쓴 하위 카드 ===== */
.confirm-card {
  margin: 9px 0 0 14px;                 /* 왼쪽으로 들여써서 하위 카드처럼 보이게 */
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px;
  padding: 7px 9px 5px;
}
.confirm-card.clear { background: #f0fdf4; border-color: #bbf7d0; }
.confirm-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.confirm-label { font-size: 11.5px; font-weight: 800; color: #92400e; }
.confirm-card.clear .confirm-label { color: #15803d; }
.confirm-count {
  font-size: 10.5px; font-weight: 800; color: #92400e;
  background: #fef3c7; border-radius: 99px; padding: 1px 7px;
}
.confirm-card.clear .confirm-count { color: #15803d; background: #dcfce7; }
.confirm-ok { font-size: 10.5px; font-weight: 700; color: #15803d; }
.confirm-list { display: flex; flex-direction: column; gap: 3px; }
.cf-item {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 4px 6px; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.cf-item:hover { background: rgba(0, 0, 0, .04); }
.cf-item input { accent-color: #d97706; width: 14px; height: 14px; flex: none; margin: 1px 0 0; cursor: pointer; }
.cf-item span { flex: 1; word-break: break-word; color: #78350f; }
.confirm-card.clear .cf-item span { color: #166534; }
.cf-item .st-done { text-decoration: line-through; color: #b6a58a; }
.cf-del {
  flex: none; border: none; background: transparent; font-size: 10px;
  padding: 2px 4px; border-radius: 4px; opacity: 0; color: inherit;
}
.cf-item:hover .cf-del { opacity: .5; }
.cf-del:hover { opacity: 1 !important; background: #fee2e2; }
.confirm-start {
  border: none; background: transparent; padding: 4px 6px; margin-top: 6px;
  font-size: 11px; font-weight: 700; color: #c4b59a; border-radius: 6px;
}
.task-card:hover .confirm-start { color: #a16207; }
.confirm-start:hover { background: #fef3c7; color: #92400e; }
.confirm-start.inline { display: block; width: 100%; text-align: left; margin-top: 3px; color: #b45309; opacity: .8; }
.confirm-start.inline:hover { opacity: 1; }
.cf-new { margin-top: 4px; }
.cf-new input {
  width: 100%; border: 1px solid #fcd34d; border-radius: 6px;
  padding: 5px 7px; font-size: 12px; font-family: inherit; background: #fff;
}
.cf-new input:focus { outline: none; border-color: #d97706; }
.ct-confirm {
  font-size: 11px; font-weight: 700; color: #92400e;
  background: #fef3c7; border-radius: 99px; padding: 1px 7px; white-space: nowrap;
}
/* 상세 모달 안에서는 카드가 아니라 목록으로 나오니 여백만 준다 */
#taskViewBody .confirm-list { gap: 4px; }
#taskViewBody .cf-item { background: #fffbeb; }

/* ===== 마이페이지 ===== */
.my-date { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-sub); }
.my-date input {
  padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 9px;
  font-size: 13px; font-family: inherit; background: #fff;
}
.my-date input:focus { outline: none; border-color: var(--accent); }

.my-summary { display: flex; gap: 12px; margin-bottom: 16px; }
.my-stat {
  flex: 1; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 20px; display: flex; align-items: baseline; gap: 10px;
}
.my-stat b { font-size: 26px; }
.my-stat span { font-size: 13px; color: var(--text-sub); font-weight: 600; }

/* 업무 | 메모 2단 배치 */
.my-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.my-col-tasks { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.my-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: 16px; }
.my-memo-card { display: flex; flex-direction: column; }
.my-memo-card .my-memo { flex: 1; min-height: 220px; }

/* 내 정보 */
.profile-form { display: flex; flex-direction: column; gap: 11px; }
.profile-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text-sub); }
.profile-form input, .profile-form select {
  padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 9px;
  font-size: 14px; font-family: inherit; color: var(--text); background: #fff; font-weight: 500;
}
.profile-form input:focus, .profile-form select:focus { outline: none; border-color: var(--accent); }
.pw-change summary {
  font-size: 12.5px; font-weight: 700; color: var(--accent);
  cursor: pointer; padding: 3px 0; list-style: none;
}
.pw-change summary::before { content: '🔒 '; }
.pw-change[open] summary { margin-bottom: 9px; }
.pw-change { display: flex; flex-direction: column; gap: 9px; }

.my-task {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 9px; cursor: pointer; transition: background .12s, border-color .12s;
}
.my-task:hover { background: var(--accent-soft); border-color: var(--accent); }
.my-task:last-child { margin-bottom: 0; }
.my-task-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.my-task-title { flex: 1; font-weight: 700; font-size: 14.5px; word-break: keep-all; }
.my-task-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-sub); }
.my-subs { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 3px; }
.my-sub { font-size: 12.5px; color: var(--text-sub); }
.my-sub.done { color: #a8aebc; text-decoration: line-through; }

/* ===== 스프레드시트 붙여넣기 ===== */
.import-help {
  font-size: 13px; color: var(--text-sub); line-height: 1.6;
  background: var(--accent-soft); border-radius: 10px; padding: 11px 14px; margin-bottom: 12px;
}
#importText {
  width: 100%; padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 10px;
  font-size: 13px; resize: vertical; font-family: inherit;
}
#importText:focus { outline: none; border-color: var(--accent); border-style: solid; }
.import-opts {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 12px;
}
.import-check {
  display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-sub);
  cursor: pointer;
}
.import-status {
  display: flex; align-items: center; gap: 7px; margin-left: auto;
  font-size: 13px; font-weight: 700; color: var(--text-sub); white-space: nowrap;
}
.import-status select {
  padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 9px;
  background: #fff; font-size: 13px; font-weight: 700; font-family: inherit;
}
.import-status select:focus { outline: none; border-color: var(--accent); }
.import-check input { accent-color: var(--accent); width: 15px; height: 15px; }
.import-preview { margin-bottom: 14px; }
.import-table th { padding: 6px 8px; }
.import-table td {
  padding: 6px 10px; font-size: 12.5px; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis;
}
.import-map {
  width: 100%; min-width: 86px; padding: 5px 6px; font-size: 12px;
  border: 1.5px solid var(--line); border-radius: 7px; background: #fff; font-weight: 700;
}

/* ===== 카드 링크 칩 (파일 위치 / 홈페이지 주소) ===== */
.card-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.link-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 600; text-decoration: none;
  padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text-sub); cursor: pointer;
  font-family: inherit;
}
.link-chip:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ===== 반응형 ===== */
@media (max-width: 900px) {
  .board { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-layout { grid-template-columns: 1fr; }
  .my-cols { grid-template-columns: 1fr; }
  .my-side { position: static; }
  .feed-list { max-height: none; }
  .topnav { order: 3; width: 100%; justify-content: center; }
  .topbar { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .board { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; gap: 0; }
}

/* ===== 폰 화면 ===== */
@media (max-width: 720px) {
  .main { padding: 16px 12px 48px; }

  /* 상단바: 로고 + 알림/로그아웃 한 줄, 메뉴는 아래에서 좌우로 넘겨 본다 */
  .topbar { padding: 9px 12px; gap: 8px; }
  .topbar-left { flex: 0 0 auto; }
  .topbar-right { flex: 1 1 auto; min-width: 0; gap: 7px; }
  .topnav {
    order: 3; width: 100%; justify-content: flex-start;
    overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .nav-btn { padding: 7px 11px; font-size: 13.5px; flex: 0 0 auto; }
  .search-box { flex: 1 1 60px; min-width: 60px; }
  .search-box input { width: 100%; min-width: 0; }
  .search-results { width: min(340px, calc(100vw - 24px)); }
  .me-badge { max-width: 70px; font-size: 12px; }
  .topbar-right .btn-ghost { padding: 6px 9px; font-size: 12px; }
  .logo-text { font-size: 15px; }

  /* 화면 제목·버튼 줄 */
  .view-head { gap: 9px; }
  .view-title { font-size: 17px; }
  .view-title small { font-size: 12px; }

  /* 표는 좌우로 밀어서 본다 */
  .table-wrap { -webkit-overflow-scrolling: touch; }

  /* 모달은 화면을 꽉 채우게 */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%; max-width: 100%; max-height: 94vh;
    border-radius: 16px 16px 0 0; padding: 18px 16px 22px;
  }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn-primary, .modal-actions .btn-ghost, .modal-actions .btn-danger { flex: 1 1 auto; }

  /* 보드는 한 줄씩 — 빈 칸이 화면을 잡아먹지 않게 */
  .board { gap: 10px; }
  .board-col { min-height: 0; }
  .empty-col { padding: 14px 0; }
  .task-card { padding: 13px 14px; }
  .my-summary { flex-direction: column; gap: 9px; }
  .my-stat { padding: 13px 16px; }
  .dash-card { padding: 16px 14px; }
  .auth-card { padding: 30px 22px; }
  .tc-add { flex-direction: column; align-items: stretch; }
  .tc-add .btn-primary { width: 100%; }
  .perm-actions .btn-ghost { flex: 1 1 auto; }
  .filter-tabs { flex-wrap: wrap; }
}