/* ============================================================
   K-TECH PIONEERS 국내유입지원금 — 디자인 토큰 (Mode 1.tokens.json)
   ============================================================ */
:root {
  /* grey */
  --grey-50: #f9fafb;
  --grey-100: #f3f4f6;
  --grey-200: #e5e8eb;
  --grey-300: #d1d6db;
  --grey-400: #b0b8c1;
  --grey-500: #8b95a1;
  --grey-600: #6b7684;
  --grey-700: #4e5968;
  --grey-800: #333d4b;
  --grey-900: #191f28;
  /* blue */
  --blue-50: #e8f3ff;
  --blue-100: #c9e2ff;
  --blue-200: #90c2ff;
  --blue-300: #64a8ff;
  --blue-400: #4593fc;
  --blue-500: #3182f6;
  --blue-600: #2272eb;
  --blue-700: #1b64da;
  --blue-800: #1957c2;
  --blue-900: #194aa6;
  /* red */
  --red-50: #ffeeee;
  --red-100: #ffd4d6;
  --red-200: #feafb4;
  --red-300: #fb8890;
  --red-400: #f66570;
  --red-500: #f04452;
  --red-600: #e42939;
  --red-700: #d22030;
  --red-800: #bc1b2a;
  --red-900: #a51926;

  /* semantic */
  --bg: var(--grey-50);
  --surface: #ffffff;
  --surface-2: var(--grey-50);
  --surface-hover: var(--grey-100);
  --border: var(--grey-200);
  --border-strong: var(--grey-300);
  --text: var(--grey-900);
  --text-weak: var(--grey-600);
  --text-weaker: var(--grey-500);
  --primary: var(--blue-500);
  --primary-hover: var(--blue-600);
  --primary-weak: var(--blue-50);
  --danger: var(--red-500);
  --danger-weak: var(--red-50);

  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --shadow-sm:
    0 1px 2px rgba(25, 31, 40, 0.04), 0 1px 3px rgba(25, 31, 40, 0.06);
  --shadow: 0 4px 20px rgba(25, 31, 40, 0.06);
  --shadow-lg: 0 10px 40px rgba(25, 31, 40, 0.12);
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
/* 탭마다 세로 스크롤바 유무가 달라도 가로 폭이 흔들리지 않도록 스크롤바 공간 항상 예약 */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* ===== Topbar ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar .brand {
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: opacity 0.15s;
}
.topbar .brand:hover {
  opacity: 0.7;
}
.logo {
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(120deg, var(--blue-400), var(--blue-600));
  padding: 8px 12px;
  border-radius: 10px;
}
.logo-img {
  height: 26px;
  width: auto;
  display: block;
}
.topbar .logo-img {
  height: 22px;
}
.login-card .logo-img,
.team-head .logo-img,
.center-box .logo-img {
  height: 30px;
  margin: 0 auto 14px;
}
.login-card .logo-img {
  margin-left: 0;
}
/* 로고 옆 BETA 태그 (아주 작은 회색) */
.team-head .logo-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  margin: 0 auto 14px;
}
.team-head .logo-wrap .logo-img {
  margin: 0;
}
.beta-tag {
  top: 0;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-weaker);
  line-height: 1;
}
.brand h1 {
  font-size: 16px;
  margin: 0;
  font-weight: 700;
}
.sub {
  margin: 3px 0 0;
  color: var(--text-weaker);
  font-size: 12.5px;
}

/* 전역 공지 — 팀 화면 우측 레일의 "운영 공지" 카드로 나간다 (예전 흐르는 배너는 폐기) */
.ann-preview-wrap {
  margin-top: 2px;
}
.ann-preview-label {
  display: block;
  font-size: 12px;
  color: var(--text-weak);
  font-weight: 600;
  margin-bottom: 4px;
}
.ann-preview-wrap .rail-card {
  margin: 0;
  max-width: 360px;
} /* 실제 레일 폭에 맞춰 보여준다 */

/* 마감 D-day 배지 */
.dday {
  display: inline-block;
  margin-left: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  background: var(--grey-100);
  color: var(--text-weak);
  vertical-align: middle;
}
.dday.urgent {
  background: var(--red-50);
  color: var(--red-600);
}

/* 제출 진행률 바 */
.pg-track {
  height: 8px;
  background: var(--grey-100);
  border-radius: 999px;
  overflow: hidden;
}
.pg-fill {
  height: 100%;
  background: var(--blue-500);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* 임시저장 배너 */
.draft-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -2px;
  padding: 9px 13px;
  border-radius: var(--radius-xs);
  background: var(--grey-100);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-weak);
  font-weight: 600;
}
.draft-bar svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--blue-500);
}
.draft-bar em {
  font-style: normal;
  color: var(--text-weaker);
  font-weight: 500;
}
.draft-bar .draft-clear {
  margin-left: auto;
  flex: none;
  background: none;
  border: none;
  color: var(--text-weak);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
}

/* 보완 요청 사유 (관리자 아카이브 · 팀 현황 공통) */
.fix-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 7px;
  padding: 8px 11px;
  background: var(--red-50);
  border: 1px solid var(--red-100);
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--red-700);
  line-height: 1.45;
}
.fix-note svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
}
.fix-note .fix-edit {
  margin-left: auto;
  flex: none;
  background: none;
  border: none;
  color: var(--red-700);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
  white-space: nowrap;
}

.tabs {
  display: flex;
  gap: 4px;
}
.tab {
  background: transparent;
  color: var(--text-weak);
  border: none;
  padding: 9px 15px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: 0.15s;
  font-family: inherit;
}
.tab:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.tab.active {
  color: var(--blue-600);
  background: var(--blue-50);
}

.userbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-badge {
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--grey-100);
  border: 1px solid var(--border);
  color: var(--text-weak);
}
.user-badge.admin {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-700);
}

/* ===== Layout ===== */
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}
.panel {
  display: none;
  animation: fade 0.25s ease;
}
.panel.active {
  display: block;
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.card-head h2 {
  font-size: 16px;
  margin: 0;
  font-weight: 700;
}
.hint {
  color: var(--text-weaker);
  font-size: 12px;
  font-weight: 500;
  /* 한글은 낱말 안에서도 줄이 끊긴다 — "보입니 / 다." 처럼.
     낱말 단위로만 끊기게 한다. */
  word-break: keep-all;
  line-height: 1.6;
}

/* 안내 문구가 세 가지 이상을 말해야 할 때 — 한 문단에 몰면 아무도 안 읽는다 */
.hint-list {
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}
.hint-list li {
  padding-left: 11px;
  position: relative;
}
.hint-list li::before {
  content: "·";
  position: absolute;
  left: 2px;
}
.hint-list b {
  color: var(--text-weak);
}

/* ===== Stat row ===== */
.stat-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.stat .l {
  color: var(--text-weak);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.stat .n {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.05;
}
.stat .n .u {
  font-size: 0.48em;
  font-weight: 700;
  color: var(--text-weaker);
  margin-left: 4px;
  letter-spacing: 0;
}
.stat.hero {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--surface) 60%);
  border-color: var(--blue-100);
}
.stat.hero .n {
  font-size: 36px;
  color: var(--blue-700);
}
.stat.hero .n .u {
  color: var(--blue-400);
}
.stat .meter {
  height: 8px;
  background: var(--grey-100);
  border-radius: 6px;
  margin-top: 16px;
  overflow: hidden;
}
.stat .meter > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  border-radius: 6px;
}

/* ===== Category grid ===== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cat-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.cat-tile .top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}
.cat-tile .ico {
  font-size: 18px;
}
.cat-tile .lim {
  color: var(--text-weaker);
  font-size: 11.5px;
  margin: 8px 0 12px;
  min-height: 30px;
  line-height: 1.4;
}
.cat-tile .cov {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cat-tile .cov small {
  font-size: 12px;
  color: var(--text-weaker);
  font-weight: 600;
}
.cat-tile .meta {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-weaker);
  margin-top: 8px;
}
.cat-tile .bar {
  height: 6px;
  background: var(--grey-200);
  border-radius: 6px;
  margin-top: 10px;
  overflow: hidden;
}
.cat-tile .bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  border-radius: 6px;
}
.tagm {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 6px;
  background: var(--blue-50);
  color: var(--blue-600);
}

/* 항목 노출/기간 배지 */
.vis-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
.vis-badge.admin {
  background: var(--grey-100);
  color: var(--grey-700);
}
.vis-badge.open {
  background: var(--blue-50);
  color: var(--blue-600);
}
.vis-badge.soon {
  background: var(--grey-100);
  color: var(--grey-700);
}
.vis-badge.closed {
  background: var(--red-50);
  color: var(--red-500);
}
.cat-card.cat-hidden {
  opacity: 0.72;
}

/* ===== Monthly ===== */
#monthlyWrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.mon-block h4 {
  font-size: 13.5px;
  margin: 0 0 8px;
  font-weight: 700;
}
.mon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.mon-table th,
.mon-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.mon-table th {
  color: var(--text-weaker);
  font-weight: 600;
}
.mon-table .r {
  text-align: right;
  font-weight: 600;
}
.empty.sm {
  padding: 16px;
  font-size: 12.5px;
}

/* ===== Matrix ===== */
.matrix-wrap {
  overflow-x: auto;
}
.matrix {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
  min-width: 680px;
}
.matrix th,
.matrix td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.matrix th {
  color: var(--text-weaker);
  font-weight: 600;
  font-size: 12.5px;
}
.matrix tr:last-child td {
  border-bottom: none;
}
.matrix td.team {
  text-align: left;
  font-weight: 700;
}
.matrix td.team small {
  display: block;
  color: var(--text-weaker);
  font-weight: 500;
  font-size: 11px;
  margin-top: 2px;
}
.cell {
  cursor: pointer;
  border-radius: 8px;
  transition: 0.12s;
}
.cell .mk {
  font-size: 16px;
}
.cell .amt {
  font-size: 10.5px;
  color: var(--text-weaker);
  display: block;
  margin-top: 2px;
}
.cell:hover {
  background: var(--blue-50);
}
.progress-pill {
  display: inline-block;
  min-width: 44px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-weak);
  background: var(--grey-100);
}

/* ===== Steps ===== */
.steps {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-weaker);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  background: var(--surface-2);
}
.step b {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grey-200);
  color: var(--text-weak);
  font-size: 12px;
  flex-shrink: 0;
}
.step.active {
  color: var(--blue-700);
  border-color: var(--blue-300);
  background: var(--blue-50);
}
.step.active b {
  background: var(--blue-500);
  color: #fff;
}
.step.done b {
  background: var(--blue-500);
  color: #fff;
}

/* ===== Forms ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.opt {
  color: var(--text-weaker);
  font-weight: 500;
}
select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="month"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="tel"],
input:not([type]),
textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 0.14s,
    box-shadow 0.14s;
}
input:hover,
textarea:hover {
  border-color: var(--border-strong);
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100);
}
::placeholder {
  color: var(--grey-400);
  font-weight: 400;
}
/* 숫자 입력 스피너 제거 */
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.limit-note {
  margin: 14px 0;
  padding: 11px 14px;
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-500);
  display: none;
  font-weight: 500;
}
.limit-note b {
  color: var(--blue-500);
}
.limit-note.show {
  display: block;
}
.limit-note.over {
  background: var(--danger-weak);
  border-color: var(--red-100);
  color: var(--red-700);
}
/* 안내문구 강조 — **텍스트** 로 감싼 부분 (굵은 빨강 + 옅은 하이라이트) */
.limit-note .hl {
  color: var(--red-600);
  font-weight: 800;
  background: var(--red-50);
  padding: 0 3px;
  border-radius: 4px;
}
/* 안내문구 링크 — [라벨](url) 또는 맨 URL 자동 링크 */
.note-link {
  color: var(--blue-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.note-link:hover {
  color: var(--blue-800);
}

/* 안내 문구의 계층 목록 — "- " 로 시작하는 줄, 들여쓸수록 한 단계 안으로.
   (항공비 지급 절차처럼 절차 > 단계 > 예외 로 나뉘는 안내가 많다) */
.note-list {
  margin: 5px 0 3px;
  padding-left: 17px;
  list-style: disc;
}
.note-list li {
  margin: 3px 0;
  line-height: 1.65;
  word-break: keep-all;
}
/* 단계마다 점 모양을 바꿔 눈으로도 깊이가 구분되게 */
.note-list .note-list {
  margin: 4px 0 2px;
  padding-left: 16px;
  list-style: circle;
}
.note-list .note-list .note-list {
  list-style: square;
}
/* 첫 단계는 한 톤 진하게 — 절차의 제목 노릇을 하는 줄이 많다 */
.note-list > li {
  font-weight: 600;
}
.note-list .note-list li {
  font-weight: 500;
}

.filedrop {
  margin-top: 18px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: 0.15s;
  background: var(--surface-2);
}
.filedrop:hover,
.filedrop.drag {
  border-color: var(--blue-400);
  background: var(--blue-50);
}
.filedrop-inner b {
  font-size: 15px;
}
.filedrop-inner em {
  display: block;
  color: var(--text-weaker);
  font-size: 12px;
  margin-top: 6px;
  font-style: normal;
}
.filedrop.has-file {
  border-color: var(--blue-400);
  background: var(--blue-50);
  border-style: solid;
}
.note-field {
  margin-top: 18px;
}

/* 초과 사유처럼 여러 줄로 설명하는 오류가 있어 줄바꿈을 살린다 */
.err {
  color: var(--danger);
  font-size: 12.5px;
  margin-top: 12px;
  min-height: 16px;
  font-weight: 500;
  white-space: pre-line;
  line-height: 1.6;
}

/* ===== Review ===== */
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.review-info h3,
.review-preview h3 {
  font-size: 14px;
  margin: 0 0 14px;
  font-weight: 700;
}
.kv {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 9px 12px;
  font-size: 13px;
  margin: 0 0 16px;
}
.kv dt {
  color: var(--text-weaker);
  font-weight: 600;
}
.kv dd {
  margin: 0;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-all;
}
.name-check {
  font-size: 12px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.name-check .ok {
  color: var(--blue-600);
}
.name-check .no {
  color: var(--grey-500);
}
.checklist {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 8px;
}
.checklist label {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
}
.checklist input {
  margin-top: 2px;
  width: 17px;
  height: 17px;
  accent-color: var(--blue-500);
  flex-shrink: 0;
}
.checklist b {
  color: var(--text);
}
.review-preview iframe {
  width: 100%;
  height: 470px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* ===== Buttons ===== */
.btn {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  padding: 11px 18px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: 0.12s;
}
.btn:hover {
  background: var(--surface-hover);
}
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.btn.ghost {
  background: transparent;
  border-color: var(--border-strong);
}
.btn.ghost:hover {
  background: var(--surface-hover);
}
.btn.sm {
  padding: 8px 13px;
  font-size: 12.5px;
}
.btn.block {
  width: 100%;
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
a.btn {
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.row-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.row-btns.center {
  justify-content: center;
}

/* ===== Done ===== */
.done-box {
  text-align: center;
  padding: 34px 10px;
}
.done-ico {
  font-size: 46px;
}
.done-box h3 {
  margin: 14px 0 6px;
  font-weight: 700;
}
.muted {
  color: var(--text-weaker);
  font-size: 13px;
}

/* ===== Archive ===== */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.archive-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.arc-item {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}
.arc-main .name {
  font-weight: 700;
  font-size: 14px;
  word-break: break-all;
  line-height: 1.35;
}
.arc-main .meta {
  color: var(--text-weaker);
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  line-height: 1.4;
}
.meta-sep {
  color: var(--grey-300);
}
.meta-team {
  color: var(--text-weak);
  font-weight: 600;
}
.meta-person {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.meta-person .ic {
  width: 13px;
  height: 13px;
  color: var(--text-weaker);
}
.meta-amt {
  color: var(--text-weak);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.meta-size {
  color: var(--text-weaker);
  font-variant-numeric: tabular-nums;
}
.meta-date {
  color: var(--text-weaker);
  font-variant-numeric: tabular-nums;
}
.arc-actions {
  display: flex;
  gap: 8px;
}
.mon-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  margin-left: 6px;
  color: var(--blue-600);
}
.empty {
  color: var(--text-weaker);
  text-align: center;
  padding: 44px;
  font-size: 14px;
}

/* ===== Teams ===== */
.team-add {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  margin-bottom: 18px;
}
.team-add input {
  width: 100%;
}
.team-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.team-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 13px 15px;
  font-size: 13.5px;
}
.team-row .tid {
  font-weight: 700;
  color: var(--blue-600);
}
.team-actions {
  display: flex;
  gap: 6px;
}
.req .opt {
  color: var(--danger);
  font-weight: 700;
}

/* ===== Login ===== */
.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(
      720px 380px at 50% -8%,
      var(--blue-100) 0%,
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 85% 110%,
      var(--blue-50) 0%,
      transparent 55%
    ),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 34px 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-brand {
  margin-bottom: 2px;
}
.login-brand .logo-img {
  height: 24px;
  margin: 0;
}
.login-head h1 {
  font-size: 21px;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.login-head .sub {
  color: var(--text-weak);
  font-size: 13px;
  margin: 5px 0 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrap input {
  width: 100%;
  padding-left: 40px;
}
.input-wrap:has(.input-toggle) input {
  padding-right: 42px;
}
.input-ic {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-weaker);
  pointer-events: none;
  display: inline-flex;
}
.input-ic .ic {
  width: 18px;
  height: 18px;
}
.input-wrap input:focus ~ .input-ic {
  color: var(--blue-500);
}
.input-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--text-weaker);
  cursor: pointer;
  border-radius: 8px;
  transition: 0.12s;
}
.input-toggle:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.input-toggle .ic {
  width: 18px;
  height: 18px;
}

.login-btn {
  margin-top: 4px;
  padding: 13px;
  font-size: 15px;
}
.login-foot {
  text-align: center;
  color: var(--text-weaker);
  font-size: 12px;
  margin: 4px 0 0;
  line-height: 1.5;
}
.login-view .err {
  margin: 0;
}
.login-view .err:empty {
  display: none;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--grey-900);
  color: #fff;
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  border-radius: var(--radius-xs);
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(92vw, 460px);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast-ic {
  display: inline-flex;
  flex-shrink: 0;
}
.toast-ic svg {
  width: 19px;
  height: 19px;
}
.toast-msg {
  line-height: 1.35;
}
/* 확인·복사 등 성공: blue50 배경 / blue500 글씨·아이콘 */
.toast.good {
  background: var(--blue-50);
  color: var(--blue-500);
}
/* 취소·되돌림: grey400 배경 / grey800 글씨 */
.toast.undo {
  background: var(--grey-400);
  color: var(--grey-800);
}
.toast.bad {
  background: var(--red-500);
  color: #fff;
}
.toast.warn {
  background: var(--grey-800);
  color: #fff;
}
/* 되돌리기 버튼 */
.toast-undo {
  flex-shrink: 0;
  margin-left: 2px;
  border: none;
  cursor: pointer;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  background: var(--grey-800);
  color: #fff;
  transition: filter 0.12s;
}
.toast-undo:hover {
  filter: brightness(1.15);
}
.toast.good .toast-undo {
  background: var(--blue-500);
  color: #fff;
}

.hidden {
  display: none !important;
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(25, 31, 40, 0.5);
  backdrop-filter: blur(2px);
  display: none;
  place-items: center;
  z-index: 60;
  padding: 24px;
}
.modal-overlay.show {
  display: grid;
}
.modal {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 22px;
  animation: pop 0.18s ease;
  max-height: 92vh;
  overflow-y: auto;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 입력 모달(UI.prompt)의 한 줄 입력칸 */
.modal-field {
  display: block;
  margin: 16px 0 4px;
  text-align: left;
}
.modal-field span {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-weak);
}
.modal-field input {
  width: 100%;
}
/* 빈 값으로 저장하려 하면 칸을 흔들어 알린다 */
.modal-field input.shake {
  border-color: var(--danger);
  animation: shake 0.35s;
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}
.modal h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
}
.modal p {
  margin: 0 0 16px;
  color: var(--text-weak);
  font-size: 13.5px;
  line-height: 1.6;
}
.modal .big-team {
  font-size: 20px;
  font-weight: 800;
  color: var(--blue-600);
}
/* 입력형(type-to-confirm) 확인 모달 */
.type-hint {
  font-size: 13px;
  color: var(--text-weak);
  margin: 0 0 8px;
  line-height: 1.5;
}
.type-hint b {
  color: var(--red-600);
  font-weight: 800;
}
.type-input {
  width: 100%;
  margin-bottom: 2px;
}

/* ===== 팀 제출 앱 ===== */
.team-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}
.team-head {
  text-align: center;
  margin-bottom: 24px;
}
.team-head .logo {
  display: inline-block;
  margin-bottom: 14px;
}
.team-head h1 {
  font-size: 20px;
  margin: 0;
  font-weight: 800;
}
.team-head .sub {
  margin-top: 6px;
}
.form-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.req-mark {
  color: var(--danger);
  font-weight: 700;
}
/* 필드 라벨 + 필수/선택 뱃지를 같은 선상에 (label 이 flex-column 이라 한 덩어리로 묶음) */
.fld-head {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
}
.center-box {
  max-width: 460px;
  margin: 80px auto;
  text-align: center;
}
.center-box .logo {
  display: inline-block;
  margin-bottom: 16px;
}
.center-box h2 {
  font-weight: 800;
  margin: 0 0 8px;
}
.block {
  width: 100%;
}

/* ===== 사람별 카드 ===== */
#persons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.person-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--surface);
}
.pc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pc-head b {
  font-size: 14px;
}
.pc-status {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--grey-100);
  color: var(--grey-500);
}
.pc-status.done {
  background: var(--blue-50);
  color: var(--blue-600);
}
.pc-status.done::before {
  content: "✓ ";
}
.pc-status.over {
  background: var(--red-50);
  color: var(--red-600);
}
.pc-status.over::before {
  content: "⚠ ";
}
/* 첨부 거부 사유 — 파일칸 바로 아래 (토스트와 달리 사라지지 않는다) */
.file-err {
  display: none;
}
.file-err.on {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--red-600);
  word-break: keep-all;
}
/* 제출 전 확인 — 주의 줄 */
.precheck li.pk-warn {
  color: var(--red-600);
  font-weight: 600;
}
.precheck li.pk-warn b {
  color: var(--red-600);
}
.pc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pc-grid label {
  font-size: 12.5px;
}
.pc-file-label {
  grid-column: 1 / -1;
}
.file-btn {
  display: inline-block;
  padding: 10px 14px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text-weak);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: 0.12s;
}
.file-btn:hover {
  border-color: var(--blue-400);
  color: var(--blue-600);
}
.file-btn.has {
  border-style: solid;
  border-color: var(--blue-400);
  color: var(--blue-700);
  background: var(--blue-50);
}
.pc-over {
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}
/* 저장될 파일명 미리보기 — 입력하는 대로 실시간 갱신 */
.pc-fname {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text-weak);
  font-size: 11.5px;
  font-weight: 600;
}
.pc-fname b {
  color: var(--text);
  font-weight: 700;
  word-break: break-all;
}

/* 저장될 파일명 — 조각마다 어느 칸에서 온 값인지 라벨을 붙인다 */
.fn-cap {
  display: block;
  margin-bottom: 6px;
}
.fn-parts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 2px;
}
.fn-seg {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0 3px;
}
.fn-seg b {
  color: var(--text);
  font-weight: 700;
  word-break: break-all;
  line-height: 1.4;
}
.fn-seg i {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--blue-500);
  white-space: nowrap;
}
.fn-sep,
.fn-ext {
  /* 라벨 줄이 아니라 파일명 줄에 맞춰 붙는다 */
  align-self: flex-start;
  color: var(--text-weaker);
  font-weight: 700;
  line-height: 1.4;
}
.fn-ext {
  padding-left: 1px;
}

/* 고른 파일의 용량 */
.file-btn .fb-size {
  margin-left: 8px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-weaker);
  flex: none;
}

/* ===== 제출 전 확인 상자 ===== */
.precheck {
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--grey-50);
}
.precheck:empty {
  display: none;
}
.pk-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  margin-bottom: 9px;
}
.pk-head b {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pk-head .ic {
  width: 16px;
  height: 16px;
  flex: none;
}
.precheck ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.precheck li {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-weak);
  word-break: keep-all;
}
.precheck li b {
  color: var(--text);
  font-weight: 700;
}
.precheck p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-weak);
}
/* 제출 전 확인 — 대상자별 묶음 */
.pk-group {
  margin-top: 10px;
}
.pk-group:first-of-type {
  margin-top: 0;
}
.pk-group > b {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
}
.pk-group > b .ic {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
}
.pk-over {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--red-200);
}
.pk-over > b {
  color: var(--red-600);
}

.pk-foot {
  margin-top: 10px !important;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
  font-size: 12px !important;
}
.pk-foot b {
  color: var(--text);
  font-weight: 700;
}
/* ============================================================
   필수 제출 증빙자료 체크리스트 (제출 버튼 바로 위)
   한 항목에 여러 장을 한 번에 내야 하는데 빠뜨린 채 올리는 일이 잦아,
   무엇이 들어가야 하는지를 세워두고 전부 확인해야 제출되게 한다.
   ============================================================ */
.doccheck {
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  transition:
    border-color 0.18s,
    background 0.18s;
}
/* 다 확인하면 상자 전체가 파랗게 — 남았는지 한눈에 보이게 */
.doccheck.done {
  border-color: var(--blue-100);
  background: var(--blue-50);
}
.dc-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 12px;
}
.dc-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-weight: 600;
}
.dc-title > b {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.dc-title > span {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-weak);
  word-break: keep-all;
}
.dc-title > span b {
  color: var(--text);
  font-weight: 700;
}
/* 남은 개수 — 0/6 처럼 진행을 숫자로 */
.dc-count {
  flex: none;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--text-weak);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dc-count b {
  color: var(--text);
  font-weight: 800;
}
.doccheck.done .dc-count {
  background: var(--blue-100);
  color: var(--blue-700);
}
.doccheck.done .dc-count b {
  color: var(--blue-700);
}
/* 진행 막대 — 얼마나 남았는지 눈으로 */
.dc-bar {
  height: 3px;
  background: var(--grey-100);
}
.dc-bar > i {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
  transition: width 0.25s ease;
}
.dc-body {
  padding: 6px 10px 4px;
}
.dc-group + .dc-group {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.dc-gtitle {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 6px 6px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-weak);
  word-break: keep-all;
}
.dc-no {
  flex: none;
  color: var(--primary);
  font-weight: 800;
}
/* 체크 한 줄 — 줄 전체가 누르는 자리다 (작은 네모만 노리지 않게) */
.dc-item {
  display: flex;
  /* label 은 전역에서 세로 정렬이라(폼 칸용) 여기서 가로로 되돌린다 */
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.14s;
  -webkit-tap-highlight-color: transparent;
}
.dc-item:hover {
  background: var(--grey-50);
}
.doccheck.done .dc-item:hover {
  background: rgba(255, 255, 255, 0.6);
}
.dc-item > input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  pointer-events: none;
}
.dc-box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--grey-300);
  border-radius: 7px;
  background: var(--surface);
  color: transparent;
  transition:
    background 0.14s,
    border-color 0.14s,
    color 0.14s;
}
.dc-box .ic,
.dc-box svg {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}
.dc-item.on .dc-box {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.dc-item > input:focus-visible + .dc-box {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.dc-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.dc-txt > b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  word-break: keep-all;
  transition: color 0.14s;
}
.dc-hint {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-weaker);
  word-break: keep-all;
}
/* 확인한 줄은 한 톤 내려 앉힌다 — 남은 줄이 도드라지게 */
.dc-item.on .dc-txt > b {
  color: var(--text-weak);
}
.dc-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 11px 16px 13px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-weak);
  word-break: keep-all;
}
.dc-foot .ic,
.dc-foot svg {
  flex: none;
  width: 15px;
  height: 15px;
}
.doccheck.done .dc-foot {
  border-top-color: var(--blue-100);
  color: var(--blue-700);
}

/* 제출 전 확인 — 체크리스트가 남았을 때 */
.pk-doc {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.pk-doc > b {
  color: var(--text);
}

/* 아직 못 냄 — 붉게 / 다 채움 — 파랗게 */
.precheck.todo {
  background: var(--red-50);
  border-color: var(--red-100);
}
.precheck.todo .pk-head {
  color: var(--red-600);
}
.precheck.todo li,
.precheck.todo p {
  color: var(--grey-700);
}
.precheck.ready {
  background: var(--blue-50);
  border-color: var(--blue-100);
}
.precheck.ready .pk-head {
  color: var(--blue-600);
}

/* 라디오 · 여러 개 선택 — 알약 버튼 */
.fld-optgroup {
  display: flex;
  flex-direction: column;
  gap: 7px;
  grid-column: 1 / -1;
}
/* <label> 이 아니라 <div> 라서 label 기본 타이포(13px/600)를 못 받는다.
   다른 필드 제목과 글씨가 달라 보이므로 똑같이 맞춰준다. */
.fld-optgroup > .fld-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.pc-grid .fld-optgroup > .fld-head {
  font-size: 12.5px;
}
.fld-optgroup .opt-hint {
  margin-left: 6px;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-weaker);
}
.optbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.optbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.optbtn input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.optbtn span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-weak);
  transition: 0.12s;
}
.optbtn span::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
}
/* 여러 개 선택은 네모 표시로 구분 */
.optbtn input[type="checkbox"] + span::before {
  border-radius: 4px;
}
/* 알약 안의 부연 — "인건비 (기술사업화지원금)" 처럼 정식 명칭을 함께 보여줄 때 */
.optbtn .opt-sub {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.72;
}
.optbtn .opt-sub::before {
  content: "(";
}
.optbtn .opt-sub::after {
  content: ")";
}
.optbtn:hover span {
  border-color: var(--blue-300);
}
.optbtn input:checked + span {
  border-color: var(--blue-500);
  background: var(--blue-50);
  color: var(--blue-700);
}
.optbtn input:checked + span::before {
  border-color: var(--blue-500);
  background: var(--blue-500);
  box-shadow: inset 0 0 0 2.5px #fff;
}
.optbtn input[type="checkbox"]:checked + span::before {
  box-shadow: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6.5 9.5 17 4 11.5'/></svg>")
      center / 10px no-repeat,
    var(--blue-500);
}
.optbtn input:focus-visible + span {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
}
.optbtn input:disabled + span {
  cursor: default;
}

/* 폼 빌더 — 조건 값 직접 입력 */
.fb-rvwrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.fb-rvwrap .fb-rvalue {
  min-width: 120px;
}
.fb-raddopt {
  flex: none;
  border: 1px dashed var(--blue-300);
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.fb-raddopt:hover {
  background: var(--blue-100);
}

/* 폼 빌더 — 월 필드의 여러 달 선택 설정 */
.fb-month {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fb-monthmax {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-weak);
  font-weight: 600;
}
.fb-monthmax input {
  width: 90px;
}
.fb-monthmax.hidden {
  display: none;
}
.fb-month .hint {
  flex: 1 1 240px;
}

/* 팀 폼 — 여러 달 모드에서 카드 제목의 달 표시 */
.pc-title .pc-month {
  color: var(--blue-600);
}
.empty.pick-month {
  line-height: 1.7;
  word-break: keep-all;
}

/* 달력 — 여러 달 선택 안내 줄 */
.xmonth-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-weaker);
  font-weight: 600;
}
.xmonth-done {
  border: 0;
  background: var(--blue-500);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.xmonth-done:hover {
  background: var(--blue-600);
}

/* 레일 — 제출 절차 안내 (조용한 회색 카드) */
.rail-card.rail-quiet {
  background: var(--grey-50);
}
.rail-quiet > h3 {
  color: var(--text-weak);
}
.rail-quiet > h3 .ic {
  color: var(--grey-400);
}
.how-list {
  margin: 0;
  padding-left: 17px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.how-list li {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-weak);
  word-break: keep-all;
}
.how-list li b {
  color: var(--text);
  font-weight: 700;
}
.how-why {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--border);
}
.how-why > b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.how-why p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-weaker);
  word-break: keep-all;
}
.how-why p b {
  color: var(--danger);
  font-weight: 800;
}
/* 절차 목록 끝에 붙는 꼬리말. 마이페이지 레일처럼 .how-why 없이
   카드 바닥에 홀로 놓여도 같은 모습이 되게 여기서 다 정한다 */
.how-why-foot {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-weaker);
  word-break: keep-all;
}
/* .how-why 안에서는 이미 점선으로 한 번 나뉜 뒤라 앞 문단에 그대로 잇는다 */
.how-why .how-why-foot {
  margin-top: 7px;
  padding-top: 0;
  border-top: 0;
}
.how-why .how-why-foot b {
  color: var(--text-weak);
  font-weight: 700;
}

/* 확인 모달 — 같은 파일 중복 첨부 경고 */
.dup-warn {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius-xs);
  background: var(--red-50);
  border: 1px solid var(--red-100);
  text-align: left;
}
.dw-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--red-600);
}
.dw-head b {
  font-weight: 800;
}
.dw-head .ic {
  width: 15px;
  height: 15px;
  flex: none;
}
.dup-warn ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dup-warn li {
  font-size: 12px;
  line-height: 1.55;
  color: var(--grey-700);
  word-break: break-all;
}
.dup-warn p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-weak);
}

/* 확인창 다시 보지 않기 체크 */
.mute-chk {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-weak);
}

/* 업로드 중 안내 (확인 모달) */
.upload-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-xs);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  text-align: left;
}
.upload-note b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--blue-600);
}
.upload-note span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-weak);
  word-break: keep-all;
}

/* ===== 업로드 스피너 ===== */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== 팀 제출 내역 ===== */
.hist-card {
  margin-top: 16px;
}
.hist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hist-head b {
  font-size: 14px;
}
.hist-head .muted {
  font-size: 12px;
}
.hist-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  padding: 10px 12px;
}
.hist-item .arc-badge {
  flex: none;
  width: auto;
}
.hist-body {
  flex: 1;
  min-width: 0;
}
.hist-main {
  font-size: 13px;
  font-weight: 600;
}
.hist-sub {
  font-size: 11.5px;
  color: var(--text-weaker);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hist-item .tag {
  flex: none;
  margin-left: 0;
}

/* ===== 상태 태그 ===== */
.tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.tag-submitted {
  background: var(--grey-100);
  color: var(--grey-600);
}
.tag-needs_fix {
  background: var(--red-50);
  color: var(--red-600);
}
.tag-approved {
  background: var(--blue-50);
  color: var(--blue-700);
}
.mini {
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

/* ===== 팀 링크 목록 ===== */
.team-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.team-link-row {
  display: grid;
  grid-template-columns: 200px 1fr auto auto;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
}
.team-link-row b {
  font-size: 14px;
}
.link-input {
  width: 100%;
  font-size: 12px;
  font-family: ui-monospace, Menlo, monospace;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text-weak);
}

@media (max-width: 760px) {
  .stat-row {
    grid-template-columns: 1fr;
  }
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-grid,
  .review-grid,
  #monthlyWrap {
    grid-template-columns: 1fr;
  }
  .team-add,
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
  .team-link-row {
    grid-template-columns: 1fr;
  }
  .topbar {
    padding: 12px 16px;
  }
  main {
    padding: 20px 14px 50px;
  }
}

/* ============================================================
   아이콘 시스템 (이모지 대체) — 2026 개편
   ============================================================ */
.ic {
  width: 18px;
  height: 18px;
  flex: none;
  display: inline-block;
  vertical-align: -0.22em;
}

/* 아이콘 + 라벨 버튼 */
.btn.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn.icon-btn .ic {
  width: 17px;
  height: 17px;
  vertical-align: middle;
}
.btn.sm.icon-btn {
  padding: 8px 12px;
}
.btn.sm.icon-btn .ic {
  width: 16px;
  height: 16px;
}
.btn.icon-btn.danger:hover {
  background: var(--danger-weak);
  border-color: var(--red-200);
  color: var(--danger);
}

/* ===== Matrix 개편 ===== */
.matrix th.th-team {
  text-align: left;
}
.matrix th.th-prog {
  width: 84px;
}
.matrix th.th-cat-h {
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}
.matrix td.team {
  vertical-align: middle;
}
.matrix td.team .team-name {
  font-weight: 700;
}
/* 모든 셀을 동일한 2줄 구조(체크 + 텍스트 영역)로 고정 → 체크 높낮이 정렬 */
.matrix td.cell {
  vertical-align: middle;
}
.cell {
  cursor: pointer;
  transition: 0.12s;
}
.cell .mk {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  margin: 0 auto;
  color: var(--grey-300);
}
.cell .mk .ic {
  width: 20px;
  height: 20px;
  vertical-align: 0;
}
.cell.done .mk {
  color: #fff;
  background: var(--blue-500);
}
.cell.fix .mk {
  color: #fff;
  background: var(--red-500);
}
.cell.none .mk {
  color: var(--grey-300);
  background: var(--grey-50);
}
.cell:hover {
  background: var(--surface-hover);
}
.cell .amt {
  font-size: 10.5px;
  color: var(--text-weaker);
  display: block;
  margin-top: 5px;
  min-height: 14px;
  line-height: 14px;
  font-variant-numeric: tabular-nums;
}
.progress-pill.full {
  background: var(--blue-50);
  color: var(--blue-700);
}
.progress-pill.zero {
  color: var(--grey-400);
  background: var(--grey-50);
}

/* ===== Matrix 범례 ===== */
.card-head .filters {
  gap: 12px;
}
.mx-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-right: 14px;
}
.mx-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-weak);
}
.mx-legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}
.mx-legend .dot.done {
  background: var(--blue-500);
}
.mx-legend .dot.fix {
  background: var(--red-500);
}
.mx-legend .dot.none {
  background: var(--grey-300);
}

/* ===== Archive 배지 (카테고리 색상 · 고정폭) ===== */
.arc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  background: var(--grey-100);
  color: var(--grey-700);
}
.arc-badge > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.arc-badge .ic {
  width: 15px;
  height: 15px;
  flex: none;
}
/* 카테고리별 색상 (상태색 파랑·빨강과 구분) */
.arc-badge.cat-airfare {
  background: #edf0fe;
  color: #3b4fc4;
} /* 인디고 */
.arc-badge.cat-stay {
  background: #e4f8f0;
  color: #0b7c5b;
} /* 틸 */
.arc-badge.cat-office {
  background: #fff1e2;
  color: #c4610a;
} /* 앰버 */
.arc-badge.cat-aitool {
  background: #f7edfb;
  color: #9333a8;
} /* 그레이프 */

/* ===== 완료 배지 (팀 제출) ===== */
.done-ico {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin: 0 auto 4px;
  background: var(--blue-50);
  color: var(--blue-600);
  display: grid;
  place-items: center;
}
.done-ico .ic {
  width: 38px;
  height: 38px;
}
.pc-status.done::before {
  content: none;
}

/* ===== 한도 안내 아이콘 정렬 ===== */
.limit-note {
  display: flex;
  align-items: center;
  gap: 8px;
}
.limit-note .ic {
  width: 16px;
  height: 16px;
  flex: none;
}
.limit-note b {
  font-weight: 700;
}

/* ===== 파일 선택 버튼 아이콘 ===== */
.file-btn.has {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.file-btn .ic {
  width: 16px;
  height: 16px;
  flex: none;
}
.file-btn.has span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ============================================================
   커스텀 셀렉트 / 월 선택기 (네이티브 대체)
   ============================================================ */
.xsel-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: -1px;
}
/* 필터의 커스텀 셀렉트: 간헐적으로 네이티브 원본이 흐름에 남아 높이가 커지는 현상 방지(세로 정렬 고정) */
.filters .xsel > select.xsel-native {
  position: absolute !important;
  width: 1px;
  height: 1px;
}
.xsel {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
label > .xsel {
  display: block;
}

.xsel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 132px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition:
    border-color 0.14s,
    box-shadow 0.14s;
}
label > .xsel .xsel-btn {
  width: 100%;
}
.filters .xsel .xsel-btn {
  min-width: 108px;
}
.xsel-btn:hover {
  border-color: var(--border-strong);
}
.xsel.open .xsel-btn {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100);
  background: var(--surface);
}
.xsel-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xsel-label.placeholder {
  color: var(--grey-400);
  font-weight: 500;
}
.xsel-chev {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--text-weaker);
  transition: transform 0.18s;
}
.xsel.open .xsel-chev {
  transform: rotate(180deg);
}

.xsel-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 45;
  max-height: 280px;
  overflow-y: auto;
  animation: xpop 0.14s ease;
}
.xsel.open .xsel-pop {
  display: block;
}
@keyframes xpop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.xsel-opt {
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: 0.1s;
  display: flex;
  align-items: center;
}
.xsel-opt:hover {
  background: var(--surface-hover);
}
.xsel-opt.active {
  color: var(--blue-700);
  background: var(--blue-50);
}
.xsel-opt.active::after {
  content: "";
  margin-left: auto;
  padding-left: 12px;
}

/* mini (아카이브 상태 셀렉트) */
.xsel-mini .xsel-btn {
  min-width: 92px;
  padding: 7px 10px;
  font-size: 12.5px;
}
.xsel-mini .xsel-pop {
  left: auto;
  right: 0;
}

/* 월 선택기 */
.xmonth-pop {
  min-width: 244px;
  padding: 12px;
}
.xmonth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.xmonth-year {
  font-size: 14px;
  font-weight: 800;
}
.xmonth-nav {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-weak);
  cursor: pointer;
  transition: 0.12s;
}
.xmonth-nav:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.xmonth-nav .ic {
  width: 16px;
  height: 16px;
}
.xmonth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.xmonth-cell {
  padding: 10px 0;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: 0.12s;
}
.xmonth-cell:hover {
  background: var(--blue-50);
  color: var(--blue-700);
}
.xmonth-cell.on {
  background: var(--blue-500);
  color: #fff;
}

/* ===== 확인 다이얼로그 ===== */
.modal-ic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue-50);
  color: var(--blue-600);
  margin-bottom: 14px;
}
.modal-ic.danger {
  background: var(--danger-weak);
  color: var(--red-600);
}
.modal-ic .ic {
  width: 24px;
  height: 24px;
}
.btn.danger-solid {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn.danger-solid:hover {
  background: var(--red-600);
  border-color: var(--red-600);
}

/* ===== 팀 탭 / 제출 현황 (v0.5) ===== */
.team-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--grey-100);
  padding: 4px;
  border-radius: var(--radius-xs);
}
.ttab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 11px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-weak);
  cursor: pointer;
  font-family: inherit;
}
.ttab.active {
  background: var(--surface);
  color: var(--blue-600);
  box-shadow: var(--shadow-sm);
}

.chk {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-weak);
}
.chk input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue-500);
}

/* ===== 항목별 제출 현황 — 가로 카드 캐러셀 ===== */
.status-carousel {
  position: relative;
}
.status-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 2px 2px 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.status-track::-webkit-scrollbar {
  display: none;
}
/* 트랙 밖으로 살짝 걸친 원형 화살표 (넘칠 때만 표시) */
.sc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--grey-500);
  padding: 0;
}
.sc-arrow:hover {
  color: var(--blue-500);
  border-color: var(--blue-200, var(--blue-100));
}
.sc-arrow[hidden] {
  display: none;
}
.sc-arrow.prev {
  left: -19px;
}
.sc-arrow.next {
  right: -19px;
}
.sc-arrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.sc-arrow.prev::before {
  transform: rotate(-135deg) translate(-1px, -1px);
}
.sc-arrow.next::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.status-cell {
  flex: 0 0 clamp(150px, 13vw, 200px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-sm);
  padding: 14px 14px 0;
  background: var(--blue-50);
  overflow: hidden;
}
.status-cell.none {
  background: var(--grey-50);
  border-color: var(--border);
}
.sc-head {
  min-width: 0;
}
.sc-label {
  font-weight: 800;
  font-size: 15px;
  color: var(--blue-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-cell.none .sc-label {
  color: var(--text);
}
.sc-meta {
  color: var(--blue-500);
  font-size: 11.5px;
  margin-top: 3px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-cell.none .sc-meta {
  color: var(--text-weaker);
}
/* 항목 아이콘을 카드 하단에 크게 깔아 카드끼리 구분되게 */
.sc-art {
  display: grid;
  place-items: center;
  height: 66px;
  color: var(--blue-200, #a8c7fa);
  opacity: 0.55;
}
.sc-art .ic,
.sc-art svg {
  width: 42px;
  height: 42px;
}
.status-cell.none .sc-art {
  color: var(--grey-300, #cfd4da);
}
.sc-go {
  margin: 0 -14px;
  padding: 11px 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-600);
  border-top: 1px solid var(--blue-100);
  background: rgba(255, 255, 255, 0.55);
}
.sc-go b {
  font-weight: 800;
}
.status-cell.none .sc-go {
  color: var(--text-weak);
  border-top-color: var(--border);
}
.sc-go.off {
  color: var(--text-weaker);
  font-weight: 600;
}
.status-cell.clickable {
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.status-cell.clickable:hover {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-sm);
}
.status-cell.clickable:hover .sc-go {
  background: #fff;
}

/* 팀 관리 행 — 버튼 확장 대응 */
.team-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.team-link-row .tl-name {
  min-width: 180px;
}
.team-link-row .link-input {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 760px) {
  .sc-arrow {
    display: none;
  }
}

/* ===== 팀 제출 — 모바일(폰) 반응형 ===== */
@media (max-width: 480px) {
  .team-wrap {
    padding: 24px 14px 44px;
  }
  .team-head h1 {
    font-size: 18px;
  }
  .team-head .sub {
    font-size: 12px;
  }
  .card {
    padding: 16px 14px;
  }
  /* 대상자 카드 입력 필드: 2열 → 1열 (좁은 화면 잘림 방지) */
  .pc-grid {
    grid-template-columns: 1fr;
  }
  .two-col {
    grid-template-columns: 1fr;
  }
  /* 확인 모달: 여백 축소 + 버튼 세로 풀폭 */
  .modal-overlay {
    padding: 12px;
  }
  .modal {
    padding: 22px 18px 18px;
  }
  .kv {
    grid-template-columns: 80px 1fr;
  }
  .row-btns {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .row-btns .btn {
    width: 100%;
  }
  /* 현황 카드: 좁은 화면에선 조금 더 작게 */
  .status-cell {
    flex-basis: 142px;
    padding: 12px 12px 0;
  }
  .status-cell .sc-go {
    margin: 0 -12px;
    font-size: 11.5px;
  }
}

/* ===== 카드 헤더 2분할 (팀 관리) ===== */
.card-head.split {
  align-items: flex-start;
}
/* 안내문이 길어도 오른쪽 버튼을 아래로 밀어내지 않게 — 설명이 먼저 접힌다.
   ('＋ 팀원 추가 권한 요청' 처럼 버튼 글자가 길어지는 자리가 있다) */
.card-head.split .ch-left {
  flex: 1 1 260px;
  min-width: 0;
}
.card-head.split .ch-left h2 {
  margin: 0 0 5px;
}
.card-head.split .ch-left .hint {
  margin: 0;
  max-width: 640px;
}
.card-head.split .ch-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* 서류명 입력칸 전체폭 (v0.5) */
.pc-grid .pc-doc-label {
  grid-column: 1 / -1;
}

/* ===== 연도 pill / 월 필터 (v0.5) ===== */
.year-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.year-pill {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-weak);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: 0.12s;
}
.year-pill:hover {
  background: var(--surface-hover);
}
.year-pill.active {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #fff;
}
.year-pill.add {
  color: var(--blue-600);
  border-style: dashed;
  border-color: var(--blue-200);
}
.year-pill.add:hover {
  background: var(--blue-50);
}
.month-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mx-hint {
  margin: -4px 0 16px;
}

/* ===== 대시보드 개편 (v0.6) ===== */
.stat-row {
  grid-template-columns: 1.7fr 1fr;
}
.stat.alert .n {
  color: var(--red-500);
}
.matrix .th-total,
.matrix .cell-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.matrix .th-total {
  color: var(--text-weak);
}
.matrix .cell-total {
  font-weight: 700;
  font-size: 12.5px;
}
.matrix .mx-foot td {
  border-top: 2px solid var(--border-strong);
  font-weight: 800;
  background: var(--surface-2);
  padding-top: 13px;
  padding-bottom: 13px;
}
.matrix .mx-foot .team {
  color: var(--text-weak);
  font-weight: 700;
}
.matrix .cell-total.grand {
  color: var(--blue-600);
  font-size: 13.5px;
}
@media (max-width: 760px) {
  .stat-row {
    grid-template-columns: 1fr;
  }
}

/* ===== 호버 툴팁 (v0.6) ===== */
[data-tip] {
  position: relative;
}
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--grey-900);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 40;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}
[data-tip]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--grey-900);
  z-index: 40;
  pointer-events: none;
}
.year-pill {
  position: relative;
}

/* ===== 효율 기능 (v0.6) ===== */
.stat.clickable {
  cursor: pointer;
  transition: 0.12s;
}
.stat.clickable:hover {
  border-color: var(--red-300);
  box-shadow: 0 4px 18px rgba(240, 68, 82, 0.13);
}
.stat-go {
  color: var(--red-500);
  font-size: 13px;
  font-weight: 800;
}
.ar-search {
  min-width: 160px;
}

/* 아카이브 제목 + 드라이브 버튼 같은 선상 (v0.7) */
.ch-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ch-title h2 {
  margin: 0;
}

/* ===== 폼 빌더 (v0.7) ===== */
.cat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.cat-ic {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--blue-50);
  color: var(--blue-600);
  flex-shrink: 0;
}
.cat-ic .ic {
  width: 22px;
  height: 22px;
}
.cat-name {
  font-weight: 700;
  font-size: 14.5px;
}
.cat-fieldsum {
  color: var(--text-weak);
  font-size: 12.5px;
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.fb-type {
  font-size: 10px;
  color: var(--blue-600);
  background: var(--blue-50);
  padding: 1px 5px;
  border-radius: 6px;
  margin-left: 4px;
}
.cat-actions {
  display: flex;
  gap: 6px;
}

/* 보안 조치 카드 */
.sec-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.sec-actions .sec-btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.sec-actions #forceLogoutBtn {
  color: var(--red-500);
  border-color: var(--red-200, var(--border));
}

/* 페이지네이션 */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pager:empty {
  margin-top: 0;
}
.pg-info {
  font-size: 12.5px;
  color: var(--text-weak);
  font-variant-numeric: tabular-nums;
}
.pager .btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/* 보안 로그 테이블 */
.audit-wrap {
  overflow-x: auto;
}
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.audit-table th,
.audit-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.audit-table th {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-weak);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.audit-table td.au-target {
  white-space: normal;
  max-width: 360px;
}
.au-when,
.au-ip {
  color: var(--text-weak);
  font-variant-numeric: tabular-nums;
}
.au-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--blue-50);
  color: var(--blue-600);
}
.au-badge.warn {
  background: var(--grey-100);
  color: var(--grey-700);
}
.au-badge.bad {
  background: var(--red-50);
  color: var(--red-500);
}

.modal.modal-lg {
  max-width: 620px;
}
.modal.modal-xl {
  max-width: 940px;
}

/* 폼 빌더: 좌(빌더) · 우(미리보기) 2단 */
.cm-split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}
.cm-split .cm-build {
  min-width: 0;
}
.cm-preview-col {
  position: sticky;
  top: 0;
}
.cm-preview-head {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-weak);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cm-preview-head span {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-500);
  text-transform: none;
}
.fb-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fb-preview .person-card {
  pointer-events: none;
}
.fb-preview label {
  pointer-events: none;
}
.fb-preview .file-btn {
  pointer-events: none;
}
.pv-control {
  margin-top: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  padding: 9px 11px;
  font-size: 13px;
  color: var(--text-weak);
}
.pv-count-label {
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 760px) {
  .cm-split {
    grid-template-columns: 1fr;
  }
  .cm-preview-col {
    position: static;
  }
}

.fb-fields-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.fb-fields-head b {
  font-size: 13.5px;
}
.fb-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
}
.fb-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 10px;
  background: var(--surface-2);
}
.fb-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fb-line .fb-label {
  flex: 1 1 130px;
  min-width: 110px;
}
.fb-line .chk {
  white-space: nowrap;
}
.fb-extra {
  margin-top: 8px;
}
.fb-extra input {
  width: 100%;
}

/* ---- 필수 제출 증빙자료 체크리스트 편집기 (항목 편집 모달) ----
   팀 제출 폼의 마지막 관문을 만드는 자리. 사무국이 자주 고치므로
   문법을 외우게 하지 않고 입력 필드 빌더처럼 눌러서 만든다. */
.dcb {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
}
.dcb-empty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-weak);
  word-break: keep-all;
}
.dcb-empty b {
  color: var(--text);
}
.dcb-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  padding: 10px;
}
.dcb-ghead {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dcb-no {
  flex: none;
  width: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
}
.dcb-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
}
.dcb-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
.dcb-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* 자료 한 줄임을 알리는 점 — 팀 화면의 체크박스 자리와 눈높이를 맞춘다 */
.dcb-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grey-300);
}
.dcb-label {
  flex: 1 1 40%;
  min-width: 0;
}
.dcb-hint {
  flex: 1 1 45%;
  min-width: 0;
}
.dcb-item input {
  padding: 8px 10px;
  font-size: 12.5px;
}
.dcb-add {
  display: block;
  width: 100%;
  margin-top: 8px;
  appearance: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xs);
  background: none;
  padding: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}
.dcb-add:hover {
  background: var(--blue-50);
  border-color: var(--blue-100);
}
/* 미리보기 안의 체크리스트는 보는 용도다 — 눌리는 것처럼 보이지 않게 */
.fb-preview .doccheck,
#pvBody .doccheck {
  pointer-events: none;
  margin-top: 12px;
}

/* ============================================================
   워크스페이스 셸 — 팀 페이지(사이드바 + 본문 [+ Q&A 우측 레일])
   ============================================================ */
.ws {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.ws-side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.ws-brand {
  padding: 0 6px;
}
.ws-brand .logo-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  appearance: none;
  border: 0;
  background: none;
  padding: 2px;
  margin: -2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ws-brand .logo-wrap:hover {
  background: var(--surface-2);
}
.ws-brand .logo-img {
  height: 24px;
  margin: 0;
}
/* 접었을 때만 쓰는 표식 — 가로로 긴 워드마크는 66px 짜리 메뉴바에 들어가지 않는다 */
.ws-fold-mark {
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--grey-900);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---- 로고를 눌러 접은 메뉴바 ----
   사이드바가 서랍으로 바뀌는 좁은 폭(≤1000px)에서는 접기가 의미가 없으므로,
   접힌 모습은 전부 넓은 화면에서만 걸린다. */
@media (min-width: 1001px) {
  .ws.folded {
    grid-template-columns: 66px minmax(0, 1fr);
  }
  .ws.folded .ws-side {
    padding: 22px 10px;
    align-items: center;
    gap: 14px;
    overflow: visible; /* 아이콘 옆 말풍선이 잘리지 않게 */
  }
  .ws.folded .ws-brand {
    padding: 0;
  }
  .ws.folded .ws-brand .logo-img {
    display: none;
  }
  .ws.folded .ws-fold-mark {
    display: grid;
  }
  .ws.folded .beta-tag,
  .ws.folded .ws-team-main,
  .ws.folded .ws-team-go,
  .ws.folded .ws-navitem > span:not(.ws-navic):not(.ws-badge):not(.ws-dot),
  .ws.folded .ws-notilist {
    display: none;
  }
  .ws.folded .ws-team {
    justify-content: center;
    padding: 10px 0;
  }
  .ws.folded .ws-team-ini {
    display: grid;
  }
  .ws.folded .ws-navitem {
    justify-content: center;
    padding: 10px 0;
  }
  .ws.folded .ws-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    min-width: 0;
    padding: 0 5px;
  }
  .ws.folded .ws-navitem {
    position: relative;
  }
  .ws.folded .ws-main {
    max-width: none;
    --content-w: none;
  }
  /* 접힌 상태에서는 아이콘만 보이므로 이름을 말풍선으로 알려준다 (JS 가 data-tip 을 넣는다).
     메뉴바가 좁아 위로 띄우면 잘리므로 오른쪽으로 편다. */
  .ws.folded .ws-navitem[data-tip]:hover::after,
  .ws.folded .ws-team[data-tip]:hover::after {
    bottom: auto;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
  }
  .ws.folded .ws-navitem[data-tip]:hover::before,
  .ws.folded .ws-team[data-tip]:hover::before {
    bottom: auto;
    top: 50%;
    left: calc(100% + 1px);
    transform: translateY(-50%);
    border-top-color: transparent;
    border-right-color: var(--grey-900);
  }
}

/* 펼쳤을 때는 팀 이름 첫 글자를 숨긴다 (이름이 그대로 보인다) */
.ws-team-ini {
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

/* 팀 이름 자리가 곧 마이페이지 입구 — 버튼이지만 카드처럼 보여야 한다 */
.ws-team {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 12px 13px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.ws-team-main {
  display: block;
  min-width: 0;
  flex: 1;
}
.ws-team:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.ws-team.active {
  background: var(--blue-50);
  border-color: var(--blue-100);
}
.ws-team.active .ws-team-name {
  color: var(--blue-700);
}
.ws-team-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-weaker);
}
.ws-team.active .ws-team-go {
  color: var(--blue-600);
}
/* 넘어가는 방향이라 back 아이콘을 뒤집어 쓴다 */
.ws-team-go-ic {
  display: inline-flex;
  transform: rotate(180deg);
}
.ws-team-go-ic .ic {
  width: 14px;
  height: 14px;
}
/* 좁은 사이드바에서는 안내 글자를 접고 화살표만 남긴다 */
@media (max-width: 1100px) {
  .ws-team-go-t {
    display: none;
  }
}
.ws-team-name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.35;
  word-break: keep-all;
}
.ws-team-nick {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-600);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  padding: 3px 9px;
  border-radius: 999px;
}
.ws-team-nick .ic {
  width: 12px;
  height: 12px;
}
/* display 를 지정했으므로 UA 의 [hidden] 규칙을 다시 살려준다 */
.ws-team-nick[hidden] {
  display: none;
}

.ws-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ws-navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-weak);
  cursor: pointer;
  transition: 0.12s;
}
.ws-navitem:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.ws-navitem.active {
  background: var(--blue-50);
  color: var(--blue-600);
}
.ws-navic {
  display: inline-flex;
  flex: none;
}
.ws-navic .ic {
  width: 18px;
  height: 18px;
}
.ws-dot {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-500);
  flex: none;
}
/* 아직 열지 않은 메뉴 표시 */
.ws-soon,
.tab-soon {
  margin-left: auto;
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--grey-100);
  color: var(--text-weaker);
  border: 1px solid var(--border);
}
.ws-navitem.active .ws-soon {
  background: var(--surface);
}
.tab-soon {
  margin-left: 6px;
}

/* "준비중" 안내 카드 (질의응답 등) */
.soon-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 52px 28px;
}
.soon-card .soon-ic {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--blue-50);
  color: var(--blue-400);
}
.soon-card .soon-ic .ic {
  width: 26px;
  height: 26px;
}
.soon-card h2 {
  margin: 0 0 9px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.soon-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-weak);
  word-break: keep-all;
}
.soon-card code {
  font-size: 12.5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--grey-100);
}

/* 넓은 화면에서도 여백이 한쪽으로 쏠리지 않게 가운데 정렬 + 폭을 함께 넓힌다 */
.ws-main {
  /* 세 화면이 같은 본문 폭을 쓴다 (피그마 1144 → 1280으로 넓힘) */
  --content-w: 1280px;
  min-width: 0;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 26px clamp(20px, 3vw, 48px) 70px;
}
/* 제목·부제도 본문과 같은 축에 (왼쪽 끝에 붙으면 어긋나 보인다) */
.ws-top,
.ws-panel > .ws-split,
.ws-panel > .qna-grid,
.ws-panel > .soon-card {
  max-width: var(--content-w);
  margin-left: auto;
  margin-right: auto;
}
.ws-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.ws-top-title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.ws-top-title .sub {
  margin-top: 5px;
  font-size: 13px;
  white-space: pre-line; /* 설명이 두 줄인 화면이 있다 */
  line-height: 1.6;
}
.ws-top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  align-self: center; /* 제목·설명 줄과 눈높이를 맞춘다 */
}
.ws-burger {
  display: none;
}

.ws-panel {
  display: none;
  animation: fade 0.25s ease;
}
.ws-panel.active {
  display: block;
}

/* ---- 본문 + 우측 레일 2단 (증빙 제출 · 내 제출 현황 공통) ---- */
/* 아주 넓은 화면에서 입력칸이 무한정 늘어나지 않도록 본문 폭에 상한을 두고 가운데로 모은다 */
.ws-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 348px);
  gap: 20px;
  align-items: start;
}
.ws-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.ws-rail {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 1180px) {
  .ws-split {
    grid-template-columns: 1fr;
  }
  .ws-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ws-rail > * {
    flex: 1 1 280px;
  }
}

/* 레일 — 비용 정산 일정(파란 카드) */
.rail-card.rail-blue {
  background: var(--blue-50);
  border-color: var(--blue-100);
}
.sched-cols {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.sched-cols > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.sched-cols span {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-500);
}
.sched-cols b {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
}
.sched-notes {
  margin-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sched-notes p {
  position: relative;
  margin: 0;
  padding-left: 11px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-weak);
  word-break: keep-all;
}
.sched-notes p::before {
  content: "※";
  position: absolute;
  left: 0;
}

/* 레일 — 우리 팀 제출 현황 체크리스트 */
.tp-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tp-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.tp-list li i {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--grey-300, #d8dce1);
  display: grid;
  place-items: center;
  color: #fff;
}
.tp-list li.on i {
  background: var(--blue-500);
  border-color: var(--blue-500);
}
.tp-list li.on i svg {
  width: 12px;
  height: 12px;
}
.tp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.tp-foot span {
  color: var(--text-weak);
  font-weight: 700;
}
.tp-foot b {
  color: var(--blue-600);
  font-weight: 800;
}
.tp-foot + .pg-track {
  margin-top: 8px;
}
.tp-guide {
  margin-top: 13px;
  justify-content: center;
  color: var(--blue-600);
  font-weight: 700;
}

/* ---- 반응형: 좁아지면 사이드바를 서랍으로 ---- */
@media (max-width: 1000px) {
  .ws {
    grid-template-columns: 1fr;
  }
  .ws-side {
    position: fixed;
    z-index: 40;
    left: 0;
    top: 0;
    width: 264px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow-lg);
  }
  .ws-side.open {
    transform: none;
  }
  .ws-main {
    padding: 18px 18px 60px;
  }
  .ws-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    margin-top: 2px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    cursor: pointer;
  }
  .ws-burger::before {
    content: "";
    width: 16px;
    height: 11px;
    border-top: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    box-shadow: inset 0 4.5px 0 -0.5px var(--text);
  }
}

/* ============================================================
   질의응답(Q&A)
   ============================================================ */
/* 후속 질문 — @운영사무국 이 고정으로 붙는다 */
.qc-mention {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
}
.qc-mention > b {
  flex: none;
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.qc-mention textarea {
  flex: 1;
  min-width: 0;
  min-height: 66px;
  border: 0;
  padding: 0;
  background: none;
  resize: vertical;
}
.qc-mention textarea:focus {
  outline: none;
  box-shadow: none;
}
.qc-mention:focus-within {
  border-color: var(--blue-400);
}
/* 다른 팀 글 — 글쓰기 대신 안내 */
.qc-locked {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--grey-50);
  color: var(--text-weaker);
}
.qc-locked .ic {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}
.qc-locked p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
}
.qc-locked b {
  color: var(--text-weak);
}

/* ===== 질의응답 목록 (피그마 03) =====
   피드 537 + 상세 587, 사이 20px. 색·반경·그림자는 :root 토큰과 1:1로 맞다. */
.qna-tool {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
}
.qt-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.qt-search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-hover);
}
.qt-search .ic {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--text-weaker);
}
.qt-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
}
.qt-search input:focus {
  outline: none;
  box-shadow: none;
}
.qt-new {
  flex: none;
  border-radius: var(--radius-xs);
}
.qt-selects {
  display: flex;
  gap: 8px;
  margin-top: 17px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--grey-100);
}
.qt-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
}
.qt-cnt {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
}
.qt-cnt b {
  color: var(--blue-500);
  font-weight: 700;
  margin-left: 3px;
}
.qt-reset {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0.7px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-weaker);
  cursor: pointer;
}
.qt-reset .ic {
  width: 12px;
  height: 12px;
}
.qt-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 23px;
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--text-weaker);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.qt-chip i {
  display: inline-flex;
}
.qt-chip .ic {
  width: 9px;
  height: 9px;
}
.qt-chip:hover {
  background: var(--grey-200);
  color: var(--text-weak);
}

/* 게시판 공지 — 질의응답 상단 (접을 수 있음) */
.qna-notice {
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  background: var(--blue-50);
  overflow: hidden;
}
.qn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--blue-700);
}
.qn-head .ic {
  width: 16px;
  height: 16px;
  flex: none;
}
.qn-head b {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qn-more {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-500);
}
.qn-chev {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  color: var(--blue-500);
  transform: rotate(-90deg);
  transition: transform 0.16s;
}
.qn-chev .ic {
  width: 13px;
  height: 13px;
}
.qna-notice.folded .qn-chev {
  transform: rotate(90deg);
}
.qn-body {
  padding: 0 18px 14px 42px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.qna-notice.folded .qn-body {
  display: none;
}
/* 한 건 = 한 문단. 제목·본문·링크가 같은 줄에 흐른다 */
.qn-item {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--grey-800);
  word-break: keep-all;
}
.qn-t {
  font-weight: 800;
  color: var(--blue-700);
}
.qn-t::after {
  content: "·";
  margin: 0 6px;
  font-weight: 700;
  color: var(--blue-200);
}
/* **강조** 는 줄을 끊지 않는다 — 예전엔 .qn-item b 가 block 이라 문장이 잘렸다 */
.qn-item .hl {
  font-weight: 800;
  color: var(--blue-800);
}
.qn-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-600);
  white-space: nowrap;
}
.qn-link .ic {
  width: 11px;
  height: 11px;
  margin-left: 2px;
  vertical-align: -1px;
}

/* 섹션 머리 — 고정 N건 / 전체 N건 */
.qna-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
.qs-t {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-weak);
}
.qs-t b {
  color: var(--text);
  font-weight: 800;
}
.qs-t .ic {
  width: 15px;
  height: 15px;
  color: var(--grey-400);
}
.qs-nav {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
}
.qna-arrow {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--grey-500);
  cursor: pointer;
}
.qna-arrow:hover {
  color: var(--blue-500);
  border-color: var(--blue-200);
}
.qna-arrow .ic {
  width: 13px;
  height: 13px;
}
.qna-arrow[data-pin="1"] .ic {
  transform: rotate(180deg);
}

/* 고정 질문 — 가로로 넘긴다 */
.pin-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px;
}
.pin-track::-webkit-scrollbar {
  display: none;
}
.pin-track > .pin-card {
  flex: 0 0 260px;
}

/* 상태 배지 · 해시태그 */
.q-done,
.q-wait {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.q-done {
  background: var(--blue-50);
  color: var(--blue-300);
}
.q-wait {
  background: var(--grey-100);
  color: var(--text-weaker);
}
.q-hash {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-weaker);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

/* ===== 진행 상태 배지 =====
   단계 이름은 서버가 정해 내려준다 (운영사무국이 관리자 화면에서 만든다).
   여기서는 톤 세 가지만 알면 된다: 파랑=진행/완료 · 회색=세워둠 · 빨강=문제.
   완료(.is-done)만 채운 파랑이라, 진행중과 한눈에 갈린다. */
.q-st {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--grey-100);
  color: var(--text-weak);
}
.q-st .ic {
  width: 12px;
  height: 12px;
}
.q-st-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.q-st.tone-blue {
  background: var(--blue-50);
  color: var(--blue-600);
}
.q-st.tone-grey {
  background: var(--grey-100);
  color: var(--text-weak);
}
.q-st.tone-red {
  background: var(--red-50);
  color: var(--red-600);
}
.q-st.is-done {
  background: var(--primary);
  color: #fff;
}

/* ===== 진행 트래커 (문의 상세 최상단) =====
   배달 추적과 같은 뜻이다 — "지금 어디까지 왔는지" 한 줄로 보여준다.
   점 개수는 운영사무국이 정한 단계 수(--qtk-n)에 따라 늘고 준다. */
.qtk {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px 18px;
  margin-bottom: 14px;
}
.qtk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--qtk-n, 4), 1fr);
}
.qtk-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding-top: 3px;
}
/* 앞 단계와 잇는 선 — 이 칸의 점 중심에서 왼쪽 칸의 점 중심까지.
   지나온 칸이면 파랗게 채워진다. */
.qtk-step::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -50%;
  right: 50%;
  height: 4px;
  border-radius: 2px;
  background: var(--grey-200);
}
.qtk-step:first-child::before {
  display: none;
}
.qtk-step.is-past::before,
.qtk-step.is-now::before {
  background: var(--primary);
}
.qtk-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--grey-300);
  flex: none;
}
.qtk-step.is-past .qtk-dot {
  background: var(--primary);
}
/* 지금 단계만 크게 + 흰 테두리 링 — 눈이 여기 멈춘다 */
.qtk-step.is-now .qtk-dot {
  width: 15px;
  height: 15px;
  margin-top: -2px;
  background: var(--primary);
  box-shadow:
    0 0 0 4px var(--surface),
    0 0 0 7px var(--blue-100);
}
.qtk-step.is-now.tone-grey .qtk-dot {
  background: var(--grey-500);
  box-shadow:
    0 0 0 4px var(--surface),
    0 0 0 7px var(--grey-200);
}
.qtk-step.is-now.tone-red .qtk-dot {
  background: var(--danger);
  box-shadow:
    0 0 0 4px var(--surface),
    0 0 0 7px var(--red-100);
}
.qtk-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-weaker);
  text-align: center;
  line-height: 1.35;
  word-break: keep-all;
}
.qtk-step.is-past .qtk-name {
  color: var(--text-weak);
}
.qtk-step.is-now .qtk-name {
  color: var(--primary);
}
.qtk-at {
  font-size: 11px;
  font-style: normal;
  color: var(--text-weaker);
  min-height: 1em;
}
/* 운영사무국이 단계마다 적어둔 말 — 카드로 쌓으면 트래커보다 덩치가 커진다.
   한 줄짜리 로그로 눕히고, 지금 단계만 파랗게 세운다. */
.qtk-log {
  list-style: none;
  margin: 16px 0 0;
  padding: 13px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 7px;
}
.qtk-log li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-weaker);
}
.qtk-log b {
  font-weight: 700;
  color: var(--text-weak);
}
.qtk-log i {
  font-style: normal;
  font-size: 11.5px;
}
/* 이름·시각과 본문을 세로선으로 가른다 — 로그처럼 눈이 훑고 지나가게 */
.qtk-log span {
  flex: 1 1 260px;
  min-width: 0;
  padding-left: 9px;
  border-left: 1px solid var(--border);
  color: var(--text-weak);
  white-space: pre-wrap;
}
.qtk-log li.is-now b {
  color: var(--primary);
}
.qtk-log li.is-now span {
  color: var(--text);
}

/* 보류·답변불가 — 진행선을 그리면 "곧 다음 단계"로 읽혀서 배너로 낸다 */
.qtk-stop {
  padding: 16px 18px;
}
.qtk-stop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.qtk-stop-head .ic {
  width: 18px;
  height: 18px;
  flex: none;
}
.qtk-stop-head i {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: var(--text-weaker);
}
.qtk-stop-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-weak);
  white-space: pre-wrap;
}
.qtk-stop.tone-grey {
  background: var(--grey-50);
}
.qtk-stop.tone-grey .qtk-stop-head {
  color: var(--text-weak);
}
.qtk-stop.tone-red {
  background: var(--red-50);
  border-color: var(--red-100);
}
.qtk-stop.tone-red .qtk-stop-head {
  color: var(--red-700);
}

@media (max-width: 560px) {
  .qtk {
    padding: 18px 14px 14px;
  }
  .qtk-name {
    font-size: 11.5px;
  }
  .qtk-at {
    display: none;
  }
}

/* 고정 질문 2열 */
.pin-card {
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s;
}
.pin-card.on,
.pin-card:hover {
  border-color: var(--blue-400);
}
.pin-cover {
  position: relative;
  height: 111px;
  background: var(--grey-100);
}
.pin-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pin-cover .q-done,
.pin-cover .q-wait,
.pin-cover .q-st {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.pin-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px 0;
}
.pin-pin {
  color: var(--blue-500);
  display: inline-flex;
}
.pin-pin .ic {
  width: 14px;
  height: 14px;
}
.pin-cover .pin-pin {
  position: absolute;
  left: 12px;
  top: 12px;
  color: var(--blue-500);
}
.pin-body {
  flex: 1;
  padding: 14px 18px 0;
}
.pin-who {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pin-nick {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-700);
}
.pin-when {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-400);
}
.pin-title {
  margin-top: 7px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--grey-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pin-card.has-img .pin-title {
  -webkit-line-clamp: 1;
}
.pin-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 18px;
  padding: 20px 0 18px;
  border-top: 1px solid var(--grey-100);
}

/* 게시글 카드 */
.qna-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.qna-row {
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  text-align: left;
  padding: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.15s;
}
.qna-row.on,
.qna-row:hover {
  border-color: var(--blue-400);
}
.qna-row:focus-visible,
.pin-card:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
}
.qr-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.qr-who {
  display: flex;
  align-items: center;
  gap: 5px;
}
.qr-nick {
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-700);
}
.qr-when {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--grey-400);
}
.qr-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--grey-900);
  word-break: keep-all;
}
.qr-body {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--grey-700);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qr-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding-top: 20px;
  border-top: 1px solid var(--grey-100);
}
.qr-vote {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--grey-900);
  cursor: pointer;
}
.qr-vote:hover {
  border-color: var(--blue-400);
  color: var(--blue-600);
}
.qr-vote b {
  font-weight: 800;
  color: var(--blue-600);
}
.qr-vote .ic {
  width: 16px;
  height: 16px;
}
.qr-vote.voted {
  border-color: var(--blue-400);
  background: var(--blue-50);
  color: var(--blue-600);
}

/* 사진 줄 — 3장까지 보이고 넘치면 ‹ › */
.shots {
  position: relative;
  /* 카드 폭을 따라가면 타일이 커져 카드가 세로로 늘어난다 → 내용 폭만 차지 */
  width: fit-content;
  max-width: 100%;
}
.shot-track {
  display: flex;
  gap: 8px;
  /* 자리가 되면 다 보이고, 모자랄 때만 넘긴다 */
  max-width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.shot-track::-webkit-scrollbar {
  display: none;
}
.shot {
  /* 피그마 썸네일 109px 고정 — 3장이 한눈에 들어오는 크기 */
  flex: 0 0 109px;
  height: 109px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--grey-100);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 상세는 조금 크게 */
.shots.big .shot {
  flex: 0 0 136px;
  height: 136px;
}

.shot-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  color: var(--grey-600);
  cursor: pointer;
  z-index: 1;
}
.shot-arrow:hover {
  color: var(--blue-500);
}
/* display 를 지정했으므로 UA 의 [hidden] 규칙을 다시 살려준다 */
.shot-arrow[hidden] {
  display: none;
}
.shot-arrow .ic {
  width: 13px;
  height: 13px;
}
.shot-arrow.prev {
  left: -10px;
}
.shot-arrow.next {
  right: -10px;
}
.shot-arrow.next .ic {
  transform: rotate(180deg);
}
.shot-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(25, 31, 40, 0.62);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ===== 관리자 질의응답 — 리스트 / 상태 보드 ===== */
.aq-views {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}
.aq-view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-weaker);
  cursor: pointer;
}
.aq-view .ic {
  width: 14px;
  height: 14px;
}
.aq-view.on {
  background: var(--surface);
  color: var(--blue-600);
  box-shadow: var(--shadow-sm);
}

/* 밀린 일수 */
.age {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--text-weaker);
  font-size: 10.5px;
  font-weight: 700;
}
.age.warn {
  background: #fff4e5;
  color: #b56a00;
}
.age.bad {
  background: var(--red-50);
  color: var(--red-600);
}

/* 표 */
.aq-table-wrap {
  overflow-x: auto;
  margin-top: 4px;
}
.aq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.aq-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-weaker);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.aq-table th.num,
.aq-table td.num {
  text-align: right;
  width: 56px;
  font-variant-numeric: tabular-nums;
}
.aq-table td {
  padding: 12px;
  border-bottom: 1px solid var(--grey-100);
  vertical-align: middle;
}
/* 태그가 여러 줄이어도 제목·상태가 위로 정렬되게 */
.aq-table tr:has(.t-tagwrap > :nth-child(4)) td {
  vertical-align: top;
}
.aq-table tbody tr {
  cursor: pointer;
}
.aq-table tbody tr:hover {
  background: var(--surface-hover);
}
.t-title b {
  font-weight: 700;
  color: var(--text);
}
.t-title {
  min-width: 260px;
}
.t-team {
  white-space: nowrap;
  color: var(--text-weak);
  font-weight: 600;
}
.t-tags {
  max-width: 260px;
}
/* td 자체를 flex 로 만들면 그 칸이 표 구조에서 빠져 행 구분선이 끊긴다 */
.t-tagwrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.t-none {
  color: var(--text-weaker);
}
.t-when {
  white-space: nowrap;
  color: var(--text-weaker);
  font-size: 12px;
}
.t-act {
  width: 44px;
}

/* 상태 보드 */
/* ===== 관리자: 진행 상태 바꾸기 ===== */
.aq-status .qtk {
  border: 0;
  box-shadow: none;
  background: var(--surface-2);
  padding: 20px 20px 16px;
  margin: 0 0 16px;
}
.aq-stfield {
  margin-top: 16px;
}
.aq-stlabel {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-weak);
}
.aq-stlabel .hint {
  display: block;
  margin-top: 3px;
  font-weight: 500;
  font-style: normal;
}
.aq-stpick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}
/* 이 문의가 거칠 단계 — 시작·완료·현재 단계는 못 끄게 잠겨 있다 */
.aq-stchecks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.aq-stcheck {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text-weak);
  cursor: pointer;
  transition: 0.12s;
}
.aq-stcheck:hover {
  border-color: var(--border-strong);
}
.aq-stcheck:has(input:checked) {
  border-color: var(--blue-200);
  background: var(--blue-50);
  color: var(--blue-700);
  font-weight: 700;
}
.aq-stcheck input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--primary);
}
/* 잠긴 칸도 '켜짐'이다 — 흐리게 하면 꺼진 것처럼 읽힌다.
   못 끄는 건 회색 체크박스(native disabled)와 커서로 알린다. */
.aq-stcheck.locked {
  cursor: default;
}
.aq-stcheck.locked:hover {
  border-color: var(--blue-200);
}
.aq-stbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* 종결 상태는 진행 단계와 한 줄에 섞이면 잘못 눌린다 — 선으로 갈라둔다 */
.aq-stbtns.stop {
  padding-left: 18px;
  border-left: 1px solid var(--border);
}
.aq-stbtn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-weak);
  cursor: pointer;
  transition: 0.12s;
}
.aq-stbtn:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.aq-stbtn.on {
  border-color: transparent;
  background: var(--primary);
  color: #fff;
}
.aq-stbtn.tone-grey.on {
  background: var(--grey-600);
}
.aq-stbtn.tone-red.on {
  background: var(--danger);
}
.aq-stnote {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-weak);
}
.aq-stnote textarea {
  margin-top: 7px;
}
.aq-stnote .hint {
  font-weight: 500;
}
.aq-sthist {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.aq-sthist summary {
  font-size: 13px;
  color: var(--text-weak);
  cursor: pointer;
}
.aq-sthist ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.aq-sthist li {
  font-size: 13px;
  color: var(--text-weak);
}
.aq-sthist li i {
  font-style: normal;
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-weaker);
}
.aq-sthist li p {
  margin: 3px 0 0;
  white-space: pre-wrap;
}

/* ===== 관리자: 진행 단계 편집 ===== */
.aq-steppreview {
  margin-bottom: 16px;
}
.aq-steppreview .qtk {
  margin-top: 6px;
  background: var(--surface-2);
  border: 0;
  box-shadow: none;
}
/* 이름·버튼은 한 줄, 기본 문구는 그 아래 한 줄을 다 쓴다 —
   옆에 끼우면 칸이 좁아져 두 문장도 안 보인다 */
.aq-items .aq-stitem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  row-gap: 10px;
}
/* 끌기 손잡이 — 여기를 잡으라고 손 모양 커서로 알린다 */
.aq-grip {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: -4px 4px -4px -4px;
  padding: 0 2px;
  color: var(--grey-400);
  cursor: grab;
}
.aq-grip:active {
  cursor: grabbing;
}
.aq-stitem:hover .aq-grip {
  color: var(--text-weaker);
}
.aq-grip .ic {
  width: 18px;
  height: 18px;
}
.aq-stitem.dragging {
  opacity: 0.45;
  border-color: var(--primary);
}
/* 끄는 동안 글자가 선택되면 드래그가 끊긴다 */
.aq-steps:has(.dragging) {
  user-select: none;
}
.aq-items .aq-stitem .tr-main > b {
  margin-right: 7px;
}
.aq-items .aq-stitem .tr-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.aq-stdesc {
  grid-column: 2 / -1;
  display: block;
  width: 100%;
  font-size: 13px;
  resize: vertical;
}

/* 열은 '진행 단계' 에서 정한 수만큼 늘어난다 — 좁아지면 가로로 민다 */
.aq-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 14px;
  margin-top: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.aq-col.stopped .aq-col-head b {
  color: var(--text-weaker);
}
/* 카드를 끌어 단계 옮기기 */
.aq-card[draggable="true"] {
  cursor: grab;
}
.aq-card.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
/* 놓을 수 있는 열임을 알린다 — 어디에 떨어질지 모르면 손을 못 뗀다 */
.aq-col.drop-on {
  border-color: var(--primary);
  background: var(--primary-weak);
}
.aq-col.drop-on .aq-col-body {
  outline: 2px dashed var(--blue-200);
  outline-offset: -6px;
  border-radius: var(--radius-xs);
}
/* 끄는 동안 글자가 선택되면 드래그가 끊긴다 */
.aq-board:has(.dragging) {
  user-select: none;
}
/* 카드가 없는 열에도 놓을 수 있어야 한다 — 빈 칸에 높이를 준다 */
.aq-col-body {
  min-height: 76px;
}
.aq-col {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.aq-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
}
.aq-col-head b {
  font-weight: 800;
}
.aq-col-head span {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--text-weak);
  font-size: 11.5px;
  font-weight: 700;
}
/* 진행 단계는 여러 열이라 전부 빨강이면 다 급해 보인다.
   진행중은 옅은 파랑, 완료는 진한 파랑, 세워둔 건은 회색. */
.aq-col.pending .aq-col-head {
  border-top: 3px solid var(--blue-200);
}
.aq-col.answered .aq-col-head {
  border-top: 3px solid var(--blue-400);
}
.aq-col.stopped .aq-col-head {
  border-top: 3px solid var(--grey-300);
}
.aq-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  max-height: 620px;
  overflow-y: auto;
}
.aq-col-empty {
  padding: 22px;
  text-align: center;
  font-size: 12px;
  color: var(--text-weaker);
}
.aq-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.aq-card:hover {
  border-color: var(--blue-400);
}
.aq-card-top {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
}
.aq-card-title {
  display: block;
  margin: 4px 0 6px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
}
.aq-card-team {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-weak);
}
.aq-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
.aq-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--grey-100);
  font-size: 11.5px;
  color: var(--text-weaker);
  font-weight: 600;
}
.aq-card-foot .ic {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 3px;
}
.aq-card-when {
  margin-left: auto;
}
@media (max-width: 860px) {
  .aq-board {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
  }
}

/* 드래그 & 붙여넣기 */
.drop-tip {
  font-size: 11px;
  color: var(--text-weaker);
}
.qna-attach {
  border: 1px dashed transparent;
  border-radius: var(--radius-xs);
  transition: 0.12s;
}
.qna-attach.drop-on,
.qna-form.drop-on,
textarea.drop-on {
  border-color: var(--blue-400);
  background: var(--blue-50);
}
.qna-form.drop-on {
  border: 1px dashed var(--blue-400);
  border-radius: var(--radius-xs);
}

/* 태그 입력 — 칩 + 입력칸이 한 상자 안에 */
.tagbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
}
.tagbox:focus-within {
  border-color: var(--blue-400);
}
.tagbox-chips {
  display: contents;
}
.tagbox input {
  flex: 1;
  min-width: 140px;
  border: 0;
  padding: 4px 2px;
  background: none;
}
.tagbox input:focus {
  outline: none;
  box-shadow: none;
}
.tagchip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 700;
}
.tagchip button {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-400);
  cursor: pointer;
}
.tagchip .ic {
  width: 10px;
  height: 10px;
}
.tagchip button:hover {
  color: var(--blue-700);
}

/* 첨부 한도 안내 — 버튼 옆에 늘 보인다 */
.att-hint {
  font-size: 11.5px;
  color: var(--text-weaker);
  font-weight: 600;
}
.att-hint.full {
  color: var(--danger);
}
.qna-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qna-attach .qna-preview {
  flex: 1 1 100%;
}
/* 카테고리 콤보 */
#wCat {
  width: 100%;
}

/* 질문 작성 — 모달이 아니라 오른쪽 패널 */
.qna-writer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
}
.qw-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qw-head h3 {
  margin: 0;
  flex: 1;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.qw-sub {
  margin: 6px 0 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-weak);
  word-break: keep-all;
}
.qw-sub b {
  color: var(--blue-600);
}
.qna-writer .row-btns {
  margin-top: 18px;
}

/* 사이드바 알림 */
.ws-noti .ws-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--red-500);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
.ws-noti.open {
  background: var(--surface-2);
}
.ws-notilist {
  margin: 4px 0 2px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  max-height: 320px;
  overflow-y: auto;
}
.noti-item {
  display: flex;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.noti-item:hover {
  background: var(--surface-hover);
}
.noti-ic {
  flex: none;
  margin-top: 1px;
  color: var(--grey-300);
}
.noti-item.new .noti-ic {
  color: var(--blue-500);
}
.noti-ic .ic {
  width: 15px;
  height: 15px;
}
.noti-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.noti-main b {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-weak);
}
.noti-item.new .noti-main b {
  color: var(--blue-600);
}
.noti-main em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.noti-main i {
  font-style: normal;
  font-size: 11px;
  color: var(--text-weaker);
}
/* 상태 변경 알림에 딸린 설명 — 길면 두 줄까지만 (알림칸이 본문이 되면 안 된다) */
.noti-main u {
  text-decoration: none;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-weak);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 바뀐 단계 이름만 강조 — "무엇으로" 바뀌었는지가 이 알림의 알맹이다 */
.noti-st {
  color: var(--primary);
}
.noti-item .noti-ic.st {
  color: var(--grey-400);
}
.noti-item.new .noti-ic.st {
  color: var(--blue-400);
}
.noti-none {
  padding: 16px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-weaker);
}

/* ===== 상세 (피그마 03/04) ===== */
.qna-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px 26px;
}
.qd-tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 12px 8px;
}
.qd-tagl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.qd-pin {
  display: inline-flex;
  color: var(--blue-500);
}
.qd-pin .ic {
  width: 15px;
  height: 15px;
}
.qd-tagr {
  display: inline-flex;
  gap: 4px;
  flex: none;
}
.qd-ico {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--grey-500);
  cursor: pointer;
}
.qd-ico:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.qd-ico .ic {
  width: 16px;
  height: 16px;
}
.qd-who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
}
.qd-nick {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}
.qd-when {
  font-size: 12px;
  color: var(--text-weaker);
}
.qd-menu {
  position: relative;
  margin-left: auto;
}
.qd-dots {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--grey-500);
  cursor: pointer;
}
.qd-dots .ic {
  width: 18px;
  height: 18px;
}
.qd-pop {
  position: absolute;
  right: 0;
  top: 28px;
  z-index: 5;
  min-width: 118px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.qd-pop button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.qd-pop button:hover {
  background: var(--surface-hover);
}
.qd-pop button.danger {
  color: var(--danger);
}
.qd-pop .ic {
  width: 14px;
  height: 14px;
}
.qd-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--text);
  word-break: keep-all;
}
.qna-detail .shots {
  margin: 12px 0 4px;
}
.qd-body {
  padding: 18px 0 22px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--grey-800);
  word-break: keep-all;
}
.qd-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  flex-wrap: wrap;
}

/* 답변 — 대화창 말풍선 */
.qc-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qc-head {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-weak);
  padding: 0 4px;
}
.qc-none {
  padding: 26px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-weaker);
}
.qc-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.qc-item.mine {
  justify-content: flex-end;
}
.qc-main {
  max-width: 82%;
  min-width: 0;
}
.qc-item.mine .qc-main {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.qc-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 11.5px;
  color: var(--text-weaker);
}
.qc-top b {
  font-size: 13px;
  font-weight: 800;
  color: var(--blue-500);
}
.q-official {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-500);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}
.qc-del {
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 11.5px;
  color: var(--text-weaker);
  cursor: pointer;
  text-decoration: underline;
}
.qc-bubble {
  position: relative;
  padding: 12px 15px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--grey-800);
  word-break: keep-all;
}
/* 실제 말풍선 꼬리 — 모서리에 삼각형을 붙인다 */
.qc-bubble::before {
  content: "";
  position: absolute;
  top: 12px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.qc-item.official .qc-bubble {
  background: var(--blue-50);
  border-top-left-radius: 4px;
}
.qc-item.official .qc-bubble::before {
  left: -7px;
  border-right: 8px solid var(--blue-50);
}
.qc-item.mine .qc-bubble {
  background: var(--grey-100);
  border-top-right-radius: 4px;
}
.qc-item.mine .qc-bubble::before {
  right: -7px;
  border-left: 8px solid var(--grey-100);
}
.qc-at {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-600);
}

/* 오른쪽 상세가 비었을 때 */
.empty-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
  color: var(--text-weaker);
}
.empty-detail .ic {
  width: 30px;
  height: 30px;
  color: var(--grey-300);
}
.empty-detail p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.qna-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
/* 글을 고르면 목록 537 + 상세 587 로 갈라진다 */
.qna-grid.split {
  grid-template-columns: minmax(0, 537fr) minmax(0, 587fr);
}
/* ⛶ 넓게 보기 — 목록을 접고 상세만 */
.qna-grid.split.wide {
  grid-template-columns: minmax(0, 900px);
}
.qna-grid.split.wide .qna-feed {
  display: none;
}
.qna-grid:not(.split) .qna-rail {
  display: none;
}
.qna-feed {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.qna-rail {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ---- 상단 검색 (ws-top-right 슬롯) ---- */

/* ---- 필터 바 ---- */
.qna-bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.qna-bar-right .xsel {
  min-width: 116px;
}

/* ---- 섹션 헤더 ---- */

/* ---- 작성자 아바타 (닉네임 첫 글자) ---- */
.qav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.qav.sm {
  width: 24px;
  height: 24px;
  font-size: 11px;
}
/* 운영사무국 = 파란 인증 배지. 배경 원 없이 배지 모양 그대로 보인다 */
.qav.admin {
  background: none;
  color: var(--blue-500);
}
.qav.admin .ic {
  width: 100%;
  height: 100%;
}

/* ---- 고정 질문 카드피드 ---- */

/* ---- 배지 / 태그 ---- */
.q-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--text-weak);
  white-space: nowrap;
}
.q-tag.cat {
  background: var(--blue-50);
  color: var(--blue-600);
}
.q-tag.answered {
  background: var(--blue-500);
  color: #fff;
}
.q-tag.pending {
  background: var(--grey-100);
  color: var(--text-weaker);
}
.q-tag.pin {
  background: var(--red-50);
  color: var(--red-600);
}
.q-tag.mine {
  background: var(--grey-800);
  color: #fff;
}
.q-tag.official {
  background: var(--blue-600);
  color: #fff;
}
.q-tag .ic {
  width: 11px;
  height: 11px;
}

/* ---- 상세 ---- */
.qna-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px 26px;
}
.qd-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.4;
  flex: 1 1 100%;
  order: 2;
}
.qd-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.qd-who b {
  font-size: 13.5px;
  font-weight: 800;
}
.qd-who .qd-when {
  font-size: 12px;
  color: var(--text-weaker);
}
.qd-body {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--grey-800);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.qd-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* "나도 궁금해요" */
.btn.curious {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn.curious .ic {
  width: 15px;
  height: 15px;
}
.btn.curious.on {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-600);
}

/* ---- 첨부 이미지 ---- */
.qna-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.qna-thumb {
  width: 116px;
  height: 116px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: zoom-in;
  padding: 0;
}
.qna-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qna-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(25, 31, 40, 0.82);
  display: grid;
  place-items: center;
  padding: 32px;
  cursor: zoom-out;
}
.qna-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
}

/* ---- 댓글 ---- */
.qc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.qc-write {
  margin-top: 16px;
}
.qc-write textarea {
  min-height: 88px;
  resize: vertical;
}
.qc-write-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.qc-write-foot .hint {
  margin-right: auto;
}

/* ---- 우측 레일 ---- */
.rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 17px;
}
.rail-card > h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.rail-card > h3 .ic {
  width: 15px;
  height: 15px;
  color: var(--blue-500);
}
.rail-notice {
  padding: 11px 0;
  border-top: 1px dashed var(--border);
}
.rail-notice:first-of-type {
  border-top: none;
  padding-top: 0;
}
.rail-notice:last-child {
  padding-bottom: 0;
}
.rail-notice b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.rail-notice p {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--text-weak);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rail-card .hint {
  word-break: keep-all;
}
.rail-notice a {
  display: inline-block;
  margin-top: 7px;
  font-size: 12px;
}
.rail-hero {
  background: linear-gradient(140deg, var(--blue-500), var(--blue-700));
  border-color: transparent;
  color: #fff;
}
.rail-hero > h3 {
  color: #fff;
}
.rail-hero > h3 .ic {
  color: rgba(255, 255, 255, 0.85);
}
.rail-hero p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}
.rail-hero .btn {
  margin-top: 13px;
  width: 100%;
  background: #fff;
  border-color: #fff;
  color: var(--blue-700);
}
.rail-hero .btn:hover {
  background: var(--blue-50);
}
.rail-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- 글쓰기 폼 ---- */
.qna-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.qna-form textarea {
  min-height: 190px;
  resize: vertical;
  line-height: 1.7;
}
.qna-form .two {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}
.qna-newcat {
  display: flex;
  gap: 8px;
  align-items: center;
}
.qna-newcat input {
  flex: 1;
}

/* 첨부 선택 */
.qna-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* label 전역 스타일이 flex-direction: column 이라 가로 정렬을 명시한다 */
.qna-attach .file-btn {
  padding: 9px 14px;
  font-size: 12.5px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: auto;
}
.qna-attach .file-btn .ic {
  width: 15px;
  height: 15px;
}
.qna-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qna-preview figure {
  position: relative;
  margin: 0;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--border);
}
.qna-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qna-preview button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 21px;
  height: 21px;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(25, 31, 40, 0.72);
  color: #fff;
  cursor: pointer;
}
.qna-preview button .ic {
  width: 12px;
  height: 12px;
}

/* 중복 질문 미리보기 */
.sim-box {
  border: 1px solid var(--blue-100);
  background: var(--blue-50);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
}
.sim-box > b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--blue-700);
}
.sim-box > b .ic {
  width: 14px;
  height: 14px;
}
.sim-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 9px;
}
.sim-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grey-800);
  text-align: left;
}
.sim-item:hover {
  background: rgba(255, 255, 255, 0.75);
}
.sim-item > span:first-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 로딩 스켈레톤 ---- */
.qna-skel {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.qna-skel i {
  display: block;
  height: 68px;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--grey-100) 25%,
    var(--grey-50) 37%,
    var(--grey-100) 63%
  );
  background-size: 400% 100%;
  animation: skel 1.3s ease infinite;
}
@keyframes skel {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}


@media (max-width: 720px) {
  .pin-grid {
    grid-template-columns: 1fr;
  }
  .qna-search {
    width: 100%;
    max-width: none;
  }
  .ws-top {
    flex-wrap: wrap;
  }
  .ws-top-right {
    margin-left: 0;
    width: 100%;
  }
  .qna-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .qna-row .qr-stats {
    grid-column: 2;
  }
  .qna-detail {
    padding: 20px 18px;
  }
}

/* ============================================================
   관리자 — 질의응답 운영
   ============================================================ */
.tab-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--red-500);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
  vertical-align: 1px;
}

.aq-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
}
.aq-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-weak);
  padding: 9px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.12s;
}
.aq-tab:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.aq-tab.active {
  background: var(--grey-900);
  border-color: var(--grey-900);
  color: #fff;
}

.aq-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.aq-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.aq-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  text-align: left;
  font-family: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: 0.12s;
}
.aq-row-main:hover {
  border-color: var(--blue-200);
  background: var(--blue-50);
}
.aq-row-main .qr-main {
  min-width: 0;
}
.aq-row-main .qr-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.aq-row-main .qr-title > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.aq-row-main .qr-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-weaker);
}
.aq-row-main .qr-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  color: var(--text-weaker);
  font-size: 12px;
  font-weight: 700;
}
.aq-row-main .qr-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.aq-row-main .qr-stats .ic {
  width: 14px;
  height: 14px;
}
.aq-team {
  font-weight: 700;
  color: var(--text-weak);
}
.aq-pin {
  flex: none;
  padding: 0 12px;
}
.aq-pin.on {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-600);
}

.aq-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 13px 15px;
  font-size: 13.5px;
}
.aq-item .tr-main {
  min-width: 0;
}
.aq-item .tr-main b {
  font-weight: 700;
}
.aq-item .tr-main .hint {
  display: block;
  margin-top: 4px;
}
.aq-item .tr-actions {
  display: flex;
  gap: 6px;
  flex: none;
}
.btn.ghost.danger {
  color: var(--danger);
  border-color: var(--red-100);
}
.btn.ghost.danger:hover {
  background: var(--danger-weak);
  border-color: var(--red-200);
}

/* 관리자 화면에서는 상세를 카드 안에 담아 쓰므로 여백만 맞춘다 */
#panel-qna .qd-head {
  margin-bottom: 4px;
}
#panel-qna .qd-title {
  font-size: 19px;
}
#panel-qna .qna-thumb {
  text-decoration: none;
  display: block;
}

@media (max-width: 760px) {
  .aq-row-main {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .aq-row-main .qr-stats {
    grid-column: 2;
  }
  .aq-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 체크박스 필드 — 대상자 카드 그리드에서 한 줄 전체를 쓴다 (예: 항공비 왕복 여부) */
.pc-chk {
  grid-column: 1 / -1;
  gap: 8px;
  padding: 2px 0;
}
.pc-chk input {
  flex: none;
}
.pc-chk span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.pc-chk .req-mark {
  margin-left: 4px;
}

/* 폼 빌더 — 숫자 필드의 금액 한도 설정 묶음 */
.fb-limits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1px solid var(--border);
}
.fb-limits-head {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-weak);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fb-limits label {
  font-size: 12.5px;
}
.fb-limits label .hint {
  margin-top: 2px;
  font-weight: 500;
}
/* 조건별 한도 규칙 목록 */
.fb-rules-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.fb-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fb-rule {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-xs);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
}
.fb-rule-when {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fb-rule-when .xsel {
  flex: 1 1 120px;
  min-width: 110px;
}
.fb-rule-sep {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-weak);
  flex: none;
}
.fb-rule-when .fb-rdel {
  margin-left: auto;
  flex: none;
}
.fb-rule-amt {
  font-size: 12.5px;
}
.fb-nochk {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  line-height: 1.6;
}

/* 숫자 입력칸 아래 한글 금액 — 0 개수를 세지 않아도 되도록 */
.num-ko {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-600);
}
.num-ko:empty {
  display: none;
}

/* 확인 모달 — 값만 나열하지 않고 항목 이름을 함께 보여준다 */
.kv-item {
  /* 항목명이 길면(예: 서류명(파일내용)) 값과 겹쳐 보였다 → 두 칸 그리드로 */
  display: grid;
  grid-template-columns: minmax(74px, max-content) 1fr;
  gap: 0 8px;
  line-height: 1.7;
}
.kv-item em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-weaker);
  font-size: 12px;
  word-break: keep-all;
}
.kv-file {
  font-size: 12px;
  color: var(--text-weak);
  word-break: break-all;
}

/* 아카이브 — 드라이브에서 파일이 사라진 기록 */
.arc-item.arc-missing {
  border-color: var(--red-100);
  background: var(--red-50);
}
.tag.tag-missing {
  background: var(--red-500);
  color: #fff;
}
.btn.disabled {
  opacity: 0.45;
  pointer-events: none;
}
.arc-missing-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--red-50);
  border: 1px solid var(--red-100);
}
.arc-missing-bar .ic {
  width: 18px;
  height: 18px;
  color: var(--red-600);
  flex: none;
}
.arc-missing-bar > div {
  flex: 1;
  min-width: 0;
}
.arc-missing-bar b {
  display: block;
  font-size: 13.5px;
  color: var(--red-700);
}
.arc-missing-bar .hint {
  display: block;
  margin-top: 3px;
}

/* ===== 반응형 ===== */
/* 상세를 연 상태에서 좁아지면 목록을 감추고 상세만 (✕ 로 목록 복귀) */
@media (max-width: 1160px) {
  .qna-grid,
  .qna-grid.split {
    grid-template-columns: minmax(0, 1fr);
    /* center 로 두면 1fr 트랙이 내용 폭까지 줄어 왼쪽으로 쏠린다 */
    justify-content: stretch;
  }
  .qna-grid.split .qna-feed {
    display: none;
  }
  .qna-rail {
    position: static;
  }
}
@media (max-width: 620px) {
  .qt-top {
    flex-wrap: wrap;
  }
  .qt-search {
    flex: 1 1 100%;
  }
  .qt-new {
    width: 100%;
    justify-content: center;
  }
  .qt-selects {
    flex-wrap: wrap;
  }
  .qna-row {
    padding: 20px;
  }
  .qr-title {
    font-size: 20px;
  }
  .qna-detail,
  .qna-writer {
    padding: 20px 18px;
  }
  .qd-title {
    font-size: 20px;
  }
  /* 좁은 화면에선 타일을 조금 줄인다 */
  .shot,
  .shots.big .shot {
    flex-basis: 96px;
    height: 96px;
  }
  .qc-main {
    max-width: 92%;
  }
}

/* ============================================================
   안내 투어 — 스포트라이트 + 말풍선
   화면을 어둡게 덮되 짚어주는 부분만 밝게 남긴다.
   덮개는 별도 엘리먼트가 아니라 강조 상자의 box-shadow 다.
   ============================================================ */
/* 스크롤을 막지 않는다 — 아래쪽에 있는 칸을 짚으려면 페이지가 움직여야 하고,
   강조 상자는 scroll 이벤트로 따라온다 */
.tour-spot {
  position: fixed;
  z-index: 900;
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(15, 20, 30, 0.62),
    0 0 0 2px var(--blue-400);
  transition:
    left 0.22s ease,
    top 0.22s ease,
    width 0.22s ease,
    height 0.22s ease;
  pointer-events: auto;
  cursor: pointer;
}
.tour-tip {
  position: fixed;
  z-index: 901;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 18px 18px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 20, 30, 0.28);
}
.tour-tip::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
}
.tour-tip[data-place="bottom"]::after {
  top: -6px;
  left: 50%;
  margin-left: -6px;
}
.tour-tip[data-place="top"]::after {
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
}
.tour-tip[data-place="right"]::after {
  left: -6px;
  top: 50%;
  margin-top: -6px;
}
.tour-tip[data-place="left"]::after {
  right: -6px;
  top: 50%;
  margin-top: -6px;
}
.tour-tip[data-place="center"]::after {
  display: none;
}
.tt-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.tt-head b {
  flex: 1;
  font-size: 16px;
  color: var(--grey-900);
}
.tt-skip {
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  color: var(--grey-500);
  cursor: pointer;
}
.tt-skip:hover {
  color: var(--grey-700);
  text-decoration: underline;
}
.tt-body {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--grey-700);
  white-space: pre-line;
}
.tt-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.tt-count {
  flex: 1;
  font-size: 13px;
  color: var(--grey-500);
  font-variant-numeric: tabular-nums;
}
.tt-prev,
.tt-next {
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tt-prev {
  border: 1px solid var(--grey-300);
  background: #fff;
  color: var(--grey-700);
}
.tt-next {
  border: 0;
  background: var(--blue-500);
  color: #fff;
}
.tt-next:hover {
  background: var(--blue-600);
}

/* 사이드바 "사용가이드" — 탭이 아니라 도움말이라 위쪽 메뉴와 떼어 둔다 */
.ws-help {
  margin-top: auto;
  color: var(--grey-600);
}
.ws-help:hover {
  color: var(--grey-800);
}

/* 관리자 — 공지·공지형 글 미리보기 무대.
   팀 화면과 같은 클래스를 쓰므로 서식이 실제로 어떻게 보이는지 그대로 나온다. */
.nv-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nv-cap {
  font-size: 12px;
  font-weight: 700;
  color: var(--grey-500);
}
.nv-stage {
  padding: 14px;
  border: 1px dashed var(--grey-300);
  border-radius: var(--radius);
  background: var(--grey-50);
}
.nv-stage .qn-head {
  cursor: default;
}
.nv-stage .qd-title {
  margin: 0 0 8px;
}

/* 질문 작성칸 — 개인정보 주의. 사진을 고르는 자리 바로 아래에 둔다 */
.qw-warn {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--red-600);
  word-break: keep-all;
}
.qw-warn .ic {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
}

/* 검색·필터로 다시 받아오는 중 — 결과만 흐리게 한다.
   검색칸은 그대로 두어야 계속 타이핑할 수 있다 */
.is-busy .qna-list,
.is-busy .pin-track,
.is-busy .aq-table,
.is-busy .aq-board {
  opacity: 0.45;
  transition: opacity 0.12s;
}


/* 관리자 상세 — "나도 궁금해요" 를 누른 팀.
   팀 화면에는 숫자만 나간다. 누가 눌렀는지는 운영사무국만 본다. */
.qd-voters {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.qv-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--grey-700);
}
.qv-head .ic {
  width: 15px;
  height: 15px;
  color: var(--blue-500);
}
.qv-head .hint {
  margin-left: 4px;
}
.qv-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.qv-team {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  background: var(--blue-50);
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-700);
}
.qv-team i {
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  color: var(--blue-400);
}

/* 관리자 → 질의응답 → "팀 화면" 뷰.
   레이아웃·카드·말풍선은 팀 화면 CSS(.qna-grid/.pin-card/.qna-row/.qc-*)를 그대로 쓴다.
   여기 있는 건 관리자에만 필요한 차이뿐이다. */
#aqTeamGrid {
  margin-top: 4px;
}
/* 관리자는 「나도 궁금해요」를 누르지 않는다 — 숫자만 읽는다 */
.qr-vote.as-count {
  cursor: default;
  background: var(--grey-50);
  border-color: var(--border);
  color: var(--grey-600);
}
/* 상세 아래 관리자 조작 줄 */
.ab-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ab-acts select {
  min-width: 130px;
}
#aqRail .qc-write {
  margin-top: 12px;
}

/* ============================================================
   마이페이지 — 팀 프로필 · 팀원 명단 (팀 화면)
   ============================================================ */
.profile-kv {
  grid-template-columns: 108px 1fr;
  margin: 0;
}
.member-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-weak);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.member-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.member-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 16px 18px 14px;
}
.mc-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.mc-no {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-weak);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.mc-head .mc-title,
.ti-m-head b {
  font-size: 14.5px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.mc-badge.on {
  background: var(--blue-50);
  border-color: var(--blue-100);
  color: var(--blue-700);
}
.mc-badge.off {
  background: var(--grey-100);
  border-color: var(--grey-200);
  color: var(--grey-700);
}
.mc-badge.none {
  background: var(--red-50);
  border-color: var(--red-100);
  color: var(--red-700);
}
.mc-del {
  margin-left: auto;
}
.mc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  padding: 16px 0 4px;
}
.mc-grid > label {
  display: block;
  min-width: 0;
}
/* 4대보험 라디오는 제출 폼에서 한 줄을 다 쓰지만(.fld-optgroup),
   여기서는 직책 옆 한 칸에 들어가야 카드가 짧아진다 */
.mc-grid .fld-optgroup {
  grid-column: auto;
}
/* 수혜 항목은 알약이 셋이라 반 칸에 넣으면 "인건비" 가 혼자 다음 줄로 떨어진다.
   4대보험 바로 아래 한 줄을 다 쓰게 둔다 — 위아래 순서가 곧 두 칸의 의존 순서다. */
.mc-grid .fld-optgroup.mc-ben {
  grid-column: 1 / -1;
}
.mc-wide {
  grid-column: 1 / -1;
}
.mc-grid textarea {
  min-height: 78px;
  resize: vertical;
}
.mc-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.mc-state {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-weaker);
  margin-right: auto;
}
.mc-state.ok {
  color: var(--blue-600);
}
.mc-state.warn {
  color: var(--red-600);
}
/* 마이페이지 레일 — 체크 아이콘 없이 항목만 나열 (기본 tp-list 는 양끝 정렬) */
.tp-list.plain li {
  justify-content: flex-start;
  gap: 7px;
  padding: 5px 0;
}
.tp-list.plain li::before {
  content: "·";
  color: var(--text-weaker);
}
.rail-note {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-weak);
  margin: 12px 0 0;
}
@media (max-width: 720px) {
  .mc-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   관리자 — 팀 정보 보기 · 팀 명단 변경 알림
   ============================================================ */
.tl-members {
  display: inline-block;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-weak);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
/* 탭 빨간불 — 팀이 팀원 명단을 바꿨다는 신호 */
.tab-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--red-500);
  vertical-align: 5px;
}
.team-changes {
  border: 1px solid var(--red-100);
  background: var(--red-50);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.tc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--red-800);
}
.tc-ic {
  display: inline-flex;
  color: var(--red-600);
}
.tc-ic .ic {
  width: 17px;
  height: 17px;
}
.tc-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--red-600);
}
#tcDismiss {
  margin-left: auto;
}
.tc-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tc-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 13px;
  color: var(--grey-800);
  padding: 7px 11px;
  background: var(--surface);
  border: 1px solid var(--red-100);
  border-radius: var(--radius-xs);
}
.tc-sum {
  font-weight: 700;
  color: var(--red-700);
}
.tc-who {
  font-size: 12px;
  color: var(--text-weak);
}
.tc-list li .btn {
  margin-left: auto;
}
/* 명단처럼 폭이 필요한 모달 */
.modal.wide {
  max-width: 620px;
}
.ti-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.ti-head h3 {
  margin: 0 0 4px;
}
.ti-head .hint {
  margin: 0;
}
#tiClose {
  margin-left: auto;
  flex: none;
}
.ti-kv {
  grid-template-columns: 84px 1fr;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 0 0 16px;
}
.ti-members {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ti-member {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.ti-m-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ti-role {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-weak);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ti-m-head .mc-badge {
  margin-left: auto;
}
.ti-m-kv {
  grid-template-columns: 74px 1fr;
  margin: 11px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
}

/* ============================================================
   팀원 명단 v2 — 연락처 분리 · 4대보험 미가입 사유 · 변경 승인 절차
   ============================================================ */

/* ---- 입력칸 아래 안내/경고 한 줄 ---- */
.fld-note,
.fld-warn {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.55;
}
.fld-note {
  color: var(--text-weaker);
}
.fld-warn {
  color: var(--red-600);
  font-weight: 600;
}
.fld-head .req {
  margin-left: 5px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  color: var(--red-600);
}

/* ---- 전화번호: 국가코드 / 지역번호 / 번호 ---- */
.fld-phone {
  min-width: 0;
}
.phone-row {
  display: grid;
  grid-template-columns: 84px 96px minmax(0, 1fr);
  gap: 8px;
}
.phone-row label {
  display: block;
  min-width: 0;
}
.ph-cap {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-weaker);
}
.phone-row input {
  width: 100%;
}
/* 국가 칸은 국기·번호가 함께 들어가 조금 더 넓다 */
.phone-row {
  grid-template-columns: 132px 96px minmax(0, 1fr);
}
.phone-row .ph-cc .xsel {
  width: 100%;
}
.phone-row .ph-cc .xsel-btn {
  width: 100%;
  min-width: 0;
}
/* 고른 나라 목록은 길어 팝업이 칸보다 넓어야 국가명이 안 잘린다 */
.phone-row .ph-cc .xsel-pop {
  min-width: 268px;
}
@media (max-width: 560px) {
  .phone-row {
    grid-template-columns: 1fr 1fr;
  }
  .phone-row .ph-num {
    grid-column: 1 / -1;
  }
}

/* 긴 목록 셀렉트의 찾기 칸 (data-search="1") */
.xsel-findbar {
  position: sticky;
  top: -6px;
  z-index: 1;
  margin: -6px -6px 6px;
  padding: 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.xsel-find {
  width: 100%;
  padding: 8px 11px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.xsel-find:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}
.xsel-empty {
  padding: 14px 11px;
  font-size: 12.5px;
  color: var(--text-weaker);
  text-align: center;
}

/* 4대보험 미가입 사유 — '미가입'을 고를 때만 펼쳐진다 */
.mc-noins textarea {
  min-height: 58px;
}
.mc-noins.hidden,
.fld-warn.hidden {
  display: none;
}

/* ---- 명단 잠금 상태 줄 ---- */
.roster-state {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  margin: 0 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12.5px;
  line-height: 1.65;
}
.roster-state:empty {
  display: none;
}
.roster-state .ic {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--text-weak);
}
/* 제목 줄만 블록이다. 안내 문장 안에서 낱말을 굵게 짚는 <b> 까지 블록이 되면
   "지금 [추가 권한 요청] 이 승인 대기 중입니다." 가 세 줄로 쪼개진다 */
.roster-state > div > b {
  display: block;
  color: var(--text);
  font-size: 13px;
}
.roster-state span {
  color: var(--text-weak);
}
.roster-state.locked {
  border-color: var(--blue-100);
  background: var(--blue-50);
}
.roster-state.locked .ic {
  color: var(--blue-600);
}
/* 배너 오른쪽 끝의 [수정 권한 요청] · [요청 취소] — 안내 문장과 겹치지 않게 밀어둔다 */
.roster-state .rs-act {
  flex: none;
  margin-left: auto;
  align-self: center;
}

/* 잠긴 카드는 한 톤 내려 "지금 못 고친다"를 눈으로 알린다 */
.member-card.locked {
  background: var(--surface-2);
}
.member-card.locked input,
.member-card.locked textarea {
  background: var(--grey-100);
  color: var(--text-weak);
}
.mc-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-weak);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.mc-lock .ic {
  width: 13px;
  height: 13px;
}
.mc-ask {
  margin-left: auto;
}
/* 요청 버튼이 둘이면 뒤 버튼은 자기 자리에 붙는다 */
.mc-ask + .mc-ask,
.mc-ask + .mc-del {
  margin-left: 0;
}

/* ---- 카드 위 요청 상태 줄 ---- */
.mc-req {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 13px;
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  line-height: 1.6;
}
.mc-req.wait {
  background: var(--grey-100);
  border: 1px solid var(--border);
  color: var(--text-weak);
}
.mc-req.ok {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-800);
}
.mc-req b {
  font-weight: 700;
}
/* 안내 문장 한 덩어리 — 좁아지면 버튼보다 이쪽이 먼저 줄바꿈된다 */
.mc-req-msg {
  flex: 1 1 auto;
  min-width: 0;
}
.mc-req-note {
  width: 100%;
  color: var(--text-weak);
}
.mc-req-hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-weaker);
}
.mc-req .btn {
  margin-left: auto;
}

/* ---- 관리자: 승인 대기 중인 권한 요청 ---- */
.member-requests {
  border: 1px solid var(--blue-100);
  background: var(--blue-50);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.mr-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.mr-ic .ic {
  width: 17px;
  height: 17px;
  color: var(--blue-600);
  display: block;
}
.mr-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-700);
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--blue-100);
}
.mr-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mr-list li {
  background: var(--surface);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
}
.mr-what {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 13px;
}
.mr-kind {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
}
.mr-kind.delete {
  background: var(--red-50);
  border-color: var(--red-100);
  color: var(--red-700);
}
/* 계획서 요청은 팀원 요청과 성격이 달라 한눈에 갈리게 둔다 */
.mr-kind.budget {
  background: var(--grey-100);
  border-color: var(--grey-200);
  color: var(--grey-700);
}
.mr-who {
  font-weight: 700;
  color: var(--text-weak);
}
.mr-at {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-weaker);
}
.mr-why {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-weak);
  white-space: pre-line;
}
.mr-act {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* ---- 관리자: 팀 정보 모달의 잠금 · 요청 ---- */
.ti-lock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  margin: 0 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.ti-lock.on {
  border-color: var(--blue-100);
  background: var(--blue-50);
}
.ti-lock-txt {
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.6;
}
.ti-lock-txt b {
  display: block;
  font-size: 13px;
}
.ti-lock-txt span {
  color: var(--text-weak);
}
.ti-lock .btn {
  flex: none;
  margin-left: auto;
}
/* 팀원이 받는 금전 수혜 — 인건비는 4대보험이 걸린 항목이라 눈에 띄게 둔다 */
.ti-ben {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  margin: 0 2px 2px 0;
  border-radius: 999px;
  background: var(--grey-100);
  border: 1px solid var(--grey-200);
  color: var(--grey-700);
}
.ti-ben.pay {
  background: var(--blue-50);
  border-color: var(--blue-100);
  color: var(--blue-700);
}
.ti-warn {
  padding: 10px 14px;
  margin: 0 0 14px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--red-100);
  background: var(--red-50);
  color: var(--red-700);
  font-size: 12.5px;
}
.warn-txt {
  color: var(--red-600);
  font-weight: 700;
}
.ti-reqs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
}
.ti-req {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radius-xs);
  font-size: 12.5px;
}
.ti-req.wait {
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.ti-req.ok {
  border: 1px solid var(--blue-100);
  background: var(--blue-50);
  color: var(--blue-800);
}
.ti-req-why {
  width: 100%;
  color: var(--text-weak);
  line-height: 1.6;
  white-space: pre-line;
}
.ti-req-act {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.tl-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-700);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
}
.tl-lock .ic {
  width: 12px;
  height: 12px;
}

/* ---- UI.reason 모달 (여러 줄 사유) ---- */
.modal-field textarea {
  width: 100%;
  resize: vertical;
  min-height: 84px;
}
.modal-field textarea.shake {
  animation: shake 0.36s;
  border-color: var(--red-400);
}
.modal-note {
  margin: -4px 0 14px;
  font-size: 11.5px;
  color: var(--text-weaker);
}
.modal-note.warn {
  color: var(--red-600);
  font-weight: 600;
}
/* 반려 — 사유가 본문이라 아래로 한 줄 더 내려간다 */
.mc-req.no {
  background: var(--red-50);
  border: 1px solid var(--red-100);
  color: var(--red-800);
}
.mc-req.no .mc-req-note {
  color: var(--red-700);
}

/* 잠긴 셀렉트 — 원래 select 의 disabled 를 커스텀 버튼이 그대로 물려받는다 */
.xsel-btn:disabled {
  cursor: not-allowed;
  background: var(--grey-100);
  color: var(--text-weak);
}
.xsel-btn:disabled:hover {
  background: var(--grey-100);
}
.xsel.disabled .xsel-chev {
  opacity: 0.45;
}

/* ============================================================
   마이페이지 안쪽 탭 — 팀원 명단 / 사업비 계획서
   ============================================================ */
.me-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.me-tab {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-weaker);
  padding: 10px 14px 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.me-tab:hover {
  color: var(--text-weak);
}
.me-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.me-view {
  display: none;
}
.me-view.active {
  display: block;
}
/* 안쪽 탭이 생기면서 .ws-split 이 .ws-panel 의 직계가 아니게 됐다 —
   다른 화면과 같은 축에 놓이도록 본문 폭 상한을 여기서 다시 준다 */
.me-tabs,
#panel-me .ws-split {
  max-width: var(--content-w);
  margin-left: auto;
  margin-right: auto;
}
/* 사업비 계획서는 표가 아홉 칸이라 옆에 레일을 두면 표가 잘린다.
   본문이 폭을 다 쓰고, 안내는 표 아래로 내린다. */
#me-budget .ws-split {
  display: block;
}
/* 이 탭에서는 제목줄까지 함께 넓어져야 한다 — 표만 넓으면 머리와 몸이 어긋나 보인다 */
body.me-wide .ws-top,
body.me-wide .me-tabs,
body.me-wide #panel-me .ws-split {
  max-width: none;
}
#me-budget #railBudget {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 16px;
}
#me-budget #railBudget > * {
  flex: 1 1 320px;
}

/* ============================================================
   사업비 편성내역 관리 — 엑셀 서식을 그대로 옮긴 표
   팀 화면(입력)과 관리자 화면(.bd-ro, 읽기 전용)이 같은 표를 쓴다.
   ============================================================ */
/* 계획서 잠금 안내 — 표 바로 위. 명단의 .roster-state 를 그대로 쓴다. */
.bd-lock {
  padding-top: 16px;
}
.bd-lock:empty {
  display: none;
}
/* 잠긴 계획서는 한 톤 내려 "지금 못 고친다"를 눈으로 알린다 (잠긴 팀원 카드와 같게) */
.bd-lock ~ .bd-meta input:disabled,
.bd-lock ~ .bd-sec input:disabled,
.bd-lock ~ .bd-sec textarea:disabled {
  background: var(--grey-100);
  color: var(--text-weak);
}

.bd-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  padding: 4px 0 20px;
}
.bd-meta > label {
  display: block;
  min-width: 0;
}
.bd-sec {
  padding-top: 22px;
  border-top: 1px solid var(--border);
  margin-top: 22px;
}
.bd-sec:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.bd-sec > h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 12px;
}
.bd-sec > h3 small {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-weaker);
  margin-left: 4px;
}

/* 가로로 긴 세부 편성내역 표는 카드 안에서만 밀린다 (화면 전체가 밀리지 않게) */
.bd-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.bd-detail {
  /* 산출근거가 항목명 · 직책 · 단가 · 수량 · 산정단위 다섯 칸으로 펼쳐져 열이 열셋이다.
     폭은 <colgroup> 이 못박는다 — 브라우저에 맡기면 직책·수량 같은 좁은 칸이 0으로 눌린다. */
  min-width: 1464px;
  table-layout: fixed;
}
.bd-detail th,
.bd-detail td {
  padding: 8px 6px;
  overflow-wrap: anywhere;
}
/* 입력칸이 든 칸은 칸을 꽉 채운다 (.bd-in 보다 위 규칙이 더 구체적이라 여기서 되돌린다) */
.bd-detail .bd-in {
  padding: 0;
}
.bd-table th,
.bd-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
}
.bd-table thead th {
  background: var(--surface-2);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--text);
}
.bd-table thead th small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-weaker);
}
.bd-table .bd-sub2 {
  font-size: 12px;
}
.bd-rowhead,
.bd-subhead {
  background: var(--surface-2);
  font-weight: 700;
  color: var(--text-weak);
  white-space: nowrap;
}
.bd-rowhead.left {
  text-align: left;
  white-space: normal;
}
.bd-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bd-calc {
  background: var(--grey-50);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-weak);
  white-space: nowrap;
}
.bd-sub .bd-calc,
.bd-sub .bd-subhead {
  background: var(--blue-50);
  color: var(--blue-700);
}
.bd-total th,
.bd-total td {
  background: var(--blue-50);
  color: var(--blue-800);
  font-weight: 800;
}
.bd-basis-cell {
  text-align: left;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-weak);
}

/* 입력칸은 셀을 꽉 채운다 — 표 안에 상자가 또 있는 것처럼 보이지 않게 */
.bd-in {
  padding: 0;
}
.bd-in input,
.bd-in textarea {
  width: 100%;
  border: 0;
  background: none;
  border-radius: 0;
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
}
.bd-in input:focus,
.bd-in textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--primary-weak);
}
.bd-in input.bd-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* 금액 아래 한글 금액 — 제출 폼(.num-ko)과 같은 모양, 표 안이라 한 단계 작게 */
.bd-in .num-ko {
  margin: -4px 10px 6px;
  font-size: 11px;
  text-align: right;
  line-height: 1.35;
  word-break: keep-all;
}
.bd-in textarea {
  resize: vertical;
  min-height: 46px;
  line-height: 1.5;
}

.bd-detail .bd-in input.bd-money {
  padding-left: 6px;
  padding-right: 6px;
}

/* ---- 산출근거(항목별 내역) ----
   세목마다 항목을 한 줄씩 적는다. 한 항목이 표의 한 행이라, 줄을 넣고 빼면
   '목'·'세목' 칸의 세로 병합이 달라진다 (그래서 표 몸통을 통째로 다시 그린다).
   줄 사이 경계에 마우스를 대면 [＋]가 나와 그 자리에 끼워 넣고, [×]로 그 줄을 지운다. */
.bd-detail thead .bd-sub2 {
  white-space: nowrap;
}
/* 인건비가 아닌 세목의 '직책' 칸 — 빈 칸이 아니라 "여기는 적는 자리가 아니다" 로 보이게 */
.bd-na {
  background: var(--grey-50);
  color: var(--text-weaker);
}
/* 세목 이름 칸 — 이름 아래에 [＋ 항목 추가] 를 둔다 */
.bd-itemhead {
  vertical-align: top;
  padding-top: 10px;
}
.bd-itemhead .bd-padd {
  margin-top: 6px;
}
/* 항목명 칸 — 줄 넣기/지우기 버튼이 앉을 자리를 왼쪽에 비워둔다 */
.bd-namecell {
  position: relative;
  padding-left: 14px !important;
}
.bd-namecell input {
  padding-left: 4px;
}
/* 수량·참여율 — 숫자와 단위를 한 칸에 (엑셀의 E·F / G·H / I·J 두 칸을 합친 자리) */
.bd-qtybox {
  display: flex;
  align-items: stretch;
}
.bd-qtycell .bd-qty {
  flex: 1 1 auto;
  /* 숫자 칸이 눌리지 않게 — 단위보다 넓게 잡아 몇 회 · 몇 식인지 바로 적을 수 있어야 한다 */
  min-width: 52px;
  padding-left: 6px;
  padding-right: 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* 단위 칸 — 인건비는 고정(개월 · %), 나머지는 골라 쓴다.
   고르는 칸은 앱 공용 커스텀 셀렉트를 끄고(data-noenh) 네이티브를 쓴다:
   이 표는 가로로 밀리는 상자(.bd-scroll) 안이라, 겹쳐 뜨는 목록은 상자 밖으로 못 나가
   아래쪽 줄에서 잘려버린다. 네이티브 목록은 브라우저가 창 위에 띄우므로 잘리지 않는다.
   모양만 앱과 맞춘다 — 화살표는 배경 그림으로 직접 그린다. */
.bd-unit {
  flex: none;
  width: 50px;
  min-width: 0;
  height: auto;
  padding: 0 2px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: var(--grey-50);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-weak);
  text-align: center;
}
/* 인건비처럼 단위가 고정된 자리 (개월 · %) */
span.bd-unit {
  display: grid;
  place-items: center;
}
select.bd-unit {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-align-last: center;
  padding-right: 11px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 8px 5px;
}
select.bd-unit:hover {
  background-color: var(--blue-50);
  color: var(--primary);
}
select.bd-unit:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  box-shadow: none;
  border-color: var(--border);
}
select.bd-unit:disabled {
  color: var(--text-weaker);
  cursor: default;
}
/* 정부출연금이 음수가 된 칸 — 소계보다 부담금이 크다는 뜻이라 그 자리에서 보여준다 */
.bd-calc.bad,
.bd-detail .num.bad {
  background: var(--red-50);
  color: var(--red-700);
}
/* 줄 경계의 [＋] — 평소엔 감춰두고 그 줄에 마우스를 대거나 커서가 들어왔을 때만 나온다 */
.bd-ins {
  position: absolute;
  left: -1px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  appearance: none;
  padding: 0;
  border: 1px solid var(--blue-100);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  z-index: 3;
}
.bd-ins.up {
  top: 0;
  transform: translateY(-50%);
}
.bd-ins.down {
  bottom: 0;
  transform: translateY(50%);
}
.bd-pdel {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  background: none;
  padding: 0 2px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: var(--text-weaker);
  cursor: pointer;
  opacity: 0;
  z-index: 3;
}
.bd-detail tbody tr:hover .bd-ins,
.bd-detail tbody tr:focus-within .bd-ins,
.bd-detail tbody tr:hover .bd-pdel,
.bd-detail tbody tr:focus-within .bd-pdel {
  opacity: 1;
}
/* [＋] 를 누르면 어느 자리에 들어가는지 그 경계를 짚어준다 */
.bd-namecell:has(.bd-ins.up:hover) {
  box-shadow: inset 0 2px 0 var(--primary);
}
.bd-namecell:has(.bd-ins.down:hover) {
  box-shadow: inset 0 -2px 0 var(--primary);
}
.bd-ins:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.bd-pdel:hover {
  color: var(--red-600);
}
.bd-ins:disabled,
.bd-pdel:disabled,
.bd-padd:disabled {
  display: none;
}
.bd-padd {
  display: block;
  width: 100%;
  appearance: none;
  border: 0;
  border-top: 1px dashed var(--border);
  background: none;
  padding: 6px 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  cursor: pointer;
}
.bd-padd:hover {
  background: var(--blue-50);
}

/* 세목 이름에 붙는 설명.
   한 줄짜리 검은 말풍선(기본 [data-tip])으로는 이만큼 긴 문장을 담을 수 없어,
   안내 투어(.tour-tip)와 같은 흰 카드 모양으로 편다 — 같은 화면에서 두 가지 말풍선이
   서로 다른 언어로 보이지 않게 한다.
   표는 가로로만 밀리는 상자(.bd-scroll) 안이라 위가 아니라 아래로, 왼쪽에 맞춰 편다
   (가운데 정렬이면 표 왼쪽 끝에서 잘린다). */
.bd-tip {
  border-bottom: 1px dotted var(--text-weaker);
  cursor: help;
}
.bd-tip[data-tip]:hover::after,
.bd-tipdown[data-tip]:hover::after {
  bottom: auto;
  top: calc(100% + 8px);
}
.bd-tip[data-tip]:hover::before,
.bd-tipdown[data-tip]:hover::before {
  bottom: auto;
  top: calc(100% + 3px);
  border-top-color: transparent;
  border-bottom-color: var(--grey-900);
}
.bd-tip[data-tip]:hover::after {
  left: 0;
  transform: none;
  width: 250px;
  white-space: normal;
  text-align: left;
  background: var(--surface);
  color: var(--grey-700);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.65;
  word-break: keep-all;
  box-shadow: var(--shadow-lg);
}
/* 말풍선 꼬리도 같은 흰 카드로 (모서리 두 면만 테두리를 남겨 카드에 붙어 보이게) */
.bd-tip[data-tip]:hover::before {
  left: 16px;
  transform: rotate(45deg);
  width: 9px;
  height: 9px;
  border: 1px solid var(--border);
  border-right: 0;
  border-bottom: 0;
  border-radius: 2px 0 0 0;
  background: var(--surface);
  top: calc(100% + 4px);
}

/* 3번 자동점검 결과 배지 */
.bd-verdict {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--grey-100);
  border-color: var(--grey-200);
  color: var(--grey-600);
}
.bd-verdict.ok {
  background: var(--blue-50);
  border-color: var(--blue-100);
  color: var(--blue-700);
}
.bd-verdict.over,
.bd-verdict.under {
  background: var(--red-50);
  border-color: var(--red-100);
  color: var(--red-700);
}

.bd-note {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-weak);
  margin: 10px 0 0;
}
.bd-note.top {
  margin: 0 0 10px;
}

/* 총괄표(1번)와 세부내역(2번)이 맞는지 */
.bd-recon-box {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.6;
}
.bd-recon-box svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
.bd-recon-box.ok {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-800);
}
.bd-recon-box.no {
  background: var(--red-50);
  border: 1px solid var(--red-100);
  color: var(--red-800);
}
.bd-recon-box ul {
  margin: 6px 0 0;
  padding-left: 16px;
}
.bd-recon-box li {
  margin: 2px 0;
}
.bd-diff {
  font-weight: 800;
}
.bd-recon-why {
  display: block;
  margin-top: 6px;
  color: var(--red-700);
}

/* 확약문 · 서명줄 (엑셀 39·41행) */
.bd-pledge {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.bd-pledge p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-weak);
}
.bd-sign {
  margin-top: 14px !important;
  text-align: right;
  font-weight: 700;
  color: var(--text) !important;
}
.bd-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  margin-top: 18px;
  border-top: 1px solid var(--border);
}
.bd-saved {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-weaker);
}

/* 관리자 — 읽기 전용 계획서 */
.bd-ro .bd-basis-cell {
  min-width: 160px;
}
.ti-tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 16px;
  border-bottom: 1px solid var(--border);
}
.ti-tab {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-weaker);
  padding: 9px 13px 11px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.ti-tab:hover {
  color: var(--text-weak);
}
.ti-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

@media (max-width: 900px) {
  .bd-meta {
    grid-template-columns: 1fr;
  }
  .me-tabs {
    overflow-x: auto;
  }
}

/* 관리자 계획서 머리 — 요약 + 엑셀 내려받기 */
.bd-ro-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: space-between;
}
.bd-ro-head .ti-kv {
  flex: 1 1 auto;
  min-width: 0;
}
.bd-ro-head > .btn {
  flex: none;
}

/* 계획서 탭에서는 모달을 넓힌다 — 표가 아홉 칸이라 620px 안에서는 계속 옆으로 밀린다 */
#teamInfoModal .modal.wide.bd-open {
  max-width: min(1180px, 94vw);
}

/* ===== 제출한 파일 미리보기 창 =====
   드라이브로 보내지 않고 우리 화면 안에서 원본을 그대로 펼친다. */
.modal.file-modal {
  max-width: min(1040px, 96vw);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow: hidden;
}
.fm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.fm-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fm-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fm-meta {
  font-size: 12.5px;
  color: var(--text-weak);
}
.fm-acts {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.fm-body {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}
.fm-body iframe {
  display: block;
  width: 100%;
  height: min(72vh, 900px);
  border: 0;
}
.fm-note {
  margin: 10px 2px 0;
  font-size: 12.5px;
  color: var(--text-weak);
  line-height: 1.55;
}
@media (max-width: 640px) {
  .fm-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .fm-body iframe {
    height: 62vh;
  }
}


/* ===== 사업계획 변경신청 =====
   원본 워드 서식을 화면으로 옮긴 문서. 팀이 적는 화면과 사무국이 읽는 화면이
   같은 종이를 본다(/assets/plan-change.js 의 docHtml 하나로 그린다).
   1·2번과 확약부는 서식 그대로 표로, 3번 변경 신청 내용만 체크리스트로 둔다 —
   표 안에서는 변경 전·후를 나란히 읽기 어렵다. */

/* 마이페이지 입구·탭의 빨간 점 — 사무국 결정이 와 있는데 아직 못 본 상태 */
.ws-team {
  position: relative;
}
.ws-team .ws-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
}
.me-tab {
  position: relative;
}
.me-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-500);
  vertical-align: super;
  margin-left: 4px;
}
.me-dot.hidden {
  display: none;
}

/* ---- 카드 위쪽 툴바 (문서 바깥) ---- */
.pc-bar .ch-right {
  gap: 8px;
}
.pc-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--grey-100);
  color: var(--text-weak);
  white-space: nowrap;
}
.pc-badge.submitted {
  background: var(--blue-50);
  color: var(--blue-700);
}
.pc-badge.approved {
  background: #e8f7ee;
  color: #17803d;
}
.pc-badge.needs_fix {
  background: var(--red-50);
  color: var(--red-600);
}
.pc-state {
  margin-bottom: 18px;
}
.roster-state.pc-fix {
  background: var(--red-50);
  border-color: var(--red-100);
}

/* ---- 종이 ---- */
.pc-paper {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 44px 40px 40px;
  box-shadow: 0 1px 3px rgba(25, 31, 40, 0.06);
}
.pcd {
  max-width: 780px;
  margin: 0 auto;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}
.pcd-title {
  text-align: center;
  margin: 0 0 26px;
  line-height: 1.4;
}
.pcd-title span {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-weak);
}
.pcd-title b {
  display: block;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.pcd-h {
  font-size: 16px;
  font-weight: 800;
  margin: 30px 0 10px;
}

/* ---- 서식 표 (1·2번) ---- */
.pcd-tb {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.pcd-tb th,
.pcd-tb td {
  border: 1px solid var(--border-strong);
  padding: 0;
  vertical-align: middle;
}
.pcd-tb th {
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-weak);
  text-align: center;
  padding: 12px 10px;
  line-height: 1.45;
  width: 132px;
}
.pcd-tb td {
  padding: 4px 6px;
}
/* 1번 표는 라벨·값이 두 벌 — 값 칸이 라벨보다 넓어야 읽힌다 */
.pcd-org th {
  width: 21%;
}
.pcd-pact th {
  width: 132px;
}

/* 맨 위 유의사항 상자 */
.pcd-notice td {
  padding: 14px 16px;
  background: var(--surface-2);
}
.pcd-notice p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-weak);
  text-indent: -14px;
  padding-left: 14px;
}
.pcd-notice p + p {
  margin-top: 6px;
}

/* 표 안의 입력칸 — 테두리 없이 칸을 그대로 채운다 (종이에 적는 느낌) */
.pcd .pcd-in {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  color: var(--text);
  padding: 8px 10px;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.pcd .pcd-in:hover:not(:disabled) {
  background: var(--surface-2);
}
.pcd .pcd-in:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--blue-50);
}
.pcd .pcd-in:disabled {
  color: var(--text);
  -webkit-text-fill-color: var(--text); /* 사파리에서 흐려지지 않게 */
  opacity: 1;
  cursor: default;
}
.pcd textarea.pcd-in {
  display: block;
  resize: vertical;
  line-height: 1.6;
}
/* 작성 예시는 회색 이탤릭으로 비친다 — 값이 아니라 안내라 저장되지 않는다 */
.pcd .pcd-in::placeholder {
  font-style: italic;
  color: var(--grey-400);
}
/* 읽기 전용(사무국·지난 이력) */
.pcd-val {
  padding: 8px 10px;
  min-height: 20px;
}
.pcd-multi {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.pcd-none {
  color: var(--text-weaker);
}

.pcd-period {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pcd-period > span {
  color: var(--text-weaker);
}
.pcd .pcd-in.pcd-date {
  width: 170px;
  flex: 0 1 auto;
  min-width: 0;
}

/* 협약금액 — "일금 [270,000,000] 원(금이억칠천만원)" 한 줄 */
.pcd-amt {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  font-weight: 700;
  flex-wrap: wrap;
}
.pcd .pcd-amt-num {
  width: 190px;
  flex: none;
  text-align: right;
  font-weight: 700;
  padding: 6px 8px;
  border-color: var(--border);
  background: var(--surface-2);
}
.pcd-amt-ko {
  color: var(--primary);
}
.pcd-cellnote {
  margin: 0;
  padding: 0 10px 8px;
  font-size: 12px;
  color: var(--text-weaker);
}
.pcd-note {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--text-weak);
}
.pcd-note em {
  font-style: normal;
  color: var(--text-weaker);
}

/* ---- 3. 변경 신청 내용 — 체크리스트 ---- */
.pcd-items {
  display: grid;
  gap: 10px;
}
.pcd-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--surface);
}
.pcd-item.on {
  border-color: var(--blue-200);
  background: var(--blue-50);
  box-shadow: inset 3px 0 0 var(--primary);
}
.pcd-check {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
/* 체크박스와 구분 이름을 한 덩어리로 — 이름 글자를 눌러도 체크가 켜진다.
   전역 label 은 "라벨 위 · 입력칸 아래" 라 세로로 쌓이게 돼 있다. 여기서는 가로로 되돌린다. */
.pcd .pcd-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-weight: 400;
}
.pcd-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  cursor: pointer;
  flex: none;
}
.pcd-box {
  font-size: 16px;
  color: var(--text-weaker);
  line-height: 1;
}
.pcd-box.on {
  color: var(--primary);
}
.pcd-kind-name {
  font-size: 14.5px;
  font-weight: 700;
}
.pcd-item.on .pcd-kind-name {
  color: var(--blue-800);
}

/* ---- 승인 전 = 파란색 ----
   팀이 이번에 바꾼 곳을 종이 위에서 바로 가려내기 위한 표시다.
   파란색은 "아직 사무국 승인 전" 이라는 한 가지 뜻만 갖는다 —
   승인되면 파란색을 걷고 초록 [승인] 으로 바꿔 둘이 헷갈리지 않게 한다. */
.pcd-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--blue-100);
  border-radius: 8px;
  background: var(--blue-50);
  font-size: 12px;
  line-height: 1.6;
  color: var(--blue-800);
}
.pcd-legend.ok {
  border-color: #cdeed9;
  background: #e8f7ee;
  color: #17803d;
}
.pcd-flag {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-500);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pcd-flag.ok {
  background: #17803d;
}
/* 바뀐 뒤의 내용(변경 후)만 파랗게 — 무엇이 어떻게 달라지는지가 눈에 먼저 든다.
   검토 중인 신청서는 칸이 disabled 라 -webkit-text-fill-color 까지 같이 덮어야 한다. */
.pcd-pending .pcd-item.on .pcd-f-after .pcd-val,
.pcd-pending .pcd-item.on .pcd-f-after .pcd-in {
  color: var(--blue-800);
  -webkit-text-fill-color: var(--blue-800);
  font-weight: 600;
  border-color: var(--blue-200);
  background: var(--blue-50);
}
.pcd-pending .pcd-item.on .pcd-f-after .pcd-lb {
  color: var(--blue-700);
}
/* 승인된 신청서 — 강조를 초록으로 넘긴다 */
.pcd-approved .pcd-item.on {
  border-color: #cdeed9;
  background: #f4fbf7;
  box-shadow: inset 3px 0 0 #17803d;
}
.pcd-approved .pcd-item.on .pcd-kind-name {
  color: #17803d;
}
.pcd-kind-note {
  flex-basis: 100%;
  padding-left: 26px;
  font-size: 11.5px;
  color: var(--text-weaker);
  line-height: 1.5;
}
.pcd .pcd-free {
  width: 220px;
  flex: none;
  border-color: var(--border);
  background: var(--surface);
  padding: 5px 9px;
  font-size: 13px;
}
.pcd-item-body {
  margin-top: 12px;
  padding-left: 26px;
  display: grid;
  gap: 10px;
}
.pcd-item-body[hidden] {
  display: none;
}
/* 변경 전 → 변경 후 — 화살표를 사이에 두어 무엇이 어떻게 바뀌는지 한눈에 */
.pcd-ba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: start;
}
.pcd-ba .pcd-arrow {
  align-self: center;
}
.pcd-arrow {
  color: var(--text-weaker);
  font-size: 16px;
  padding-bottom: 2px;
}
.pcd-fld {
  min-width: 0;
}
.pcd-lb {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-weak);
  margin-bottom: 4px;
}
.pcd .pcd-fld .pcd-in,
.pcd .pcd-fld .pcd-val {
  border-color: var(--border);
  background: var(--surface);
  border-radius: 6px;
}
.pcd-fld .pcd-val {
  border: 1px solid var(--border);
}

/* ---- 확약 · 신청일 · 신청인 ---- */
.pcd-foot {
  margin-top: 34px;
  text-align: center;
}
.pcd-pledge {
  margin: 0;
  font-size: 14px;
}
.pcd-date {
  margin: 18px 0 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.pcd-sign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  font-weight: 700;
}
.pcd .pcd-signin {
  width: 190px;
  flex: none;
  border-color: var(--border);
  text-align: center;
  font-weight: 700;
}
.pcd-sign > span {
  font-weight: 500;
  color: var(--text-weak);
}
.pcd-to {
  margin: 18px 0 0;
  font-weight: 700;
  font-size: 15px;
}

/* ---- 지난 신청 이력 ---- */
.pc-hist {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.pc-hist > h3 {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 10px;
}
.pc-hist > h3 small {
  font-weight: 600;
  color: var(--text-weaker);
  margin-left: 4px;
}
.pc-hist-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.pc-hist-item > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 13px;
}
.pc-hist-item[open] > summary {
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.pc-hist-item .pcd {
  padding: 20px 16px;
}
.pc-hs {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--grey-100);
  color: var(--text-weak);
  flex: none;
}
.pc-hs.approved {
  background: #e8f7ee;
  color: #17803d;
}
.pc-hs.needs_fix {
  background: var(--red-50);
  color: var(--red-600);
}
.pc-hw {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pc-hd {
  margin-left: auto;
  color: var(--text-weaker);
  font-size: 12px;
  white-space: nowrap;
}
.pc-hn {
  margin: 0;
  padding: 10px 14px 0;
  font-size: 12.5px;
  color: var(--text-weak);
}

/* ---- 사무국 화면 (팀 정보 보기 → 사업계획 변경신청) ---- */
.modal.pl-open {
  max-width: min(940px, 94vw);
}
#tiPlan .pc-paper {
  padding: 32px 28px;
}
#tiPlan .pcd-item {
  background: var(--surface);
}
.pl-note {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-weak);
}
.pl-hist {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.pl-hist h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-weak);
}
.pl-hist-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  overflow: hidden;
}
.pl-hist-item > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}
.pl-hist-item[open] > summary {
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.pl-hist-item > summary i {
  margin-left: auto;
  font-style: normal;
  color: var(--text-weaker);
  font-size: 12px;
}
.pl-hist-item .pcd {
  padding: 18px 14px;
}

/* 좁은 화면에서만 표를 편다 — 인쇄는 A4 폭이 좁게 잡혀도 서식 그대로 나와야 한다 */
@media screen and (max-width: 760px) {
  .pc-paper {
    padding: 24px 16px;
  }
  .pcd-tb,
  .pcd-tb tbody,
  .pcd-tb tr,
  .pcd-tb th,
  .pcd-tb td {
    display: block;
    width: auto;
  }
  /* 좁은 화면에서는 표를 라벨 위 · 값 아래로 편다 (가로 스크롤을 만들지 않는다) */
  .pcd-tb tr {
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
  }
  .pcd-tb th,
  .pcd-tb td {
    border: 0;
  }
  .pcd-tb th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
  }
  .pcd-notice tr {
    border-color: var(--border);
  }
  .pcd-ba {
    grid-template-columns: 1fr;
  }
  .pcd-arrow {
    text-align: center;
    transform: rotate(90deg);
  }
  .pcd-item-body {
    padding-left: 0;
  }
  .pcd .pcd-amt-num {
    width: 150px;
  }
}

/* 인쇄 — 서식만 남긴다 (팀이 결재용으로 그대로 출력할 수 있게) */
@page {
  size: A4;
  margin: 15mm;
}
@media print {
  /* 종이 폭은 px 가 아니라 mm 로 못박는다 — 인쇄 레이아웃은 창 폭을 그대로 물려받아
     px 로 준 상한(780px)이 A4 를 넘어가면 오른쪽이 잘린 채 출력된다.
     A4 210mm 에서 좌우 여백 15mm 씩을 뺀 180mm 가 실제 인쇄 폭이다. */
  .pcd {
    max-width: 180mm !important;
    width: 180mm !important;
    margin-left: 0 !important;
  }
  /* 워크스페이스 셸은 사이드바와 본문 두 칸짜리 그리드다.
     사이드바를 감추기만 하면 빈 칸이 남아 문서가 종이 밖으로 밀린다 — 격자 자체를 푼다 */
  .ws,
  .ws-split {
    display: block !important;
  }
  .ws-side,
  .ws-top,
  .ws-rail,
  .me-tabs,
  .pc-bar,
  .pc-state,
  .pc-hist,
  .bd-foot,
  .toast {
    display: none !important;
  }
  .ws-main,
  #panel-me .ws-split,
  .ws-col {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  .card,
  .pc-paper {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  /* 화면의 회색 바탕이 종이에 그대로 칠해지지 않게 (마지막 장의 빈 여백까지 회색이 된다) */
  html,
  body,
  .ws,
  .ws-main,
  .ws-panel,
  .card,
  .pc-paper {
    background: #fff !important;
  }
  .pcd .pcd-in {
    border-color: transparent !important;
    background: transparent !important;
  }
  .pcd .pcd-in::placeholder {
    color: transparent !important; /* 안 적은 예시가 인쇄물에 찍히지 않게 */
  }
  .pcd-item {
    break-inside: avoid;
  }
}