/* ============================================================================
 * styles.css — 2026 캐치테이블 조직문화 진단
 * ========================================================================== */

:root {
  --brand: #183d68;
  --brand-600: #1e4d82;
  --brand-050: #eef3f9;
  --accent: #2683cc;

  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-alt: #fafbfc;
  --border: #e4e8ee;
  --border-strong: #cbd3dd;

  --text: #16191d;
  --text-muted: #6b7280;
  --text-faint: #9aa2ad;

  --danger: #d94a3d;
  --danger-bg: #fdf3f2;
  --success: #1f9d61;

  /* 서베이탑 포인트 색 — survey-top-logo.png 의 'TOP' 글자 색과 같은 값이다.
     고객사 사내 평가 시스템과 화면이 비슷하다는 요청에 따라 타인진단 화면에
     라인 포인트로만 쓴다. --danger 와 색이 가까우므로, 경고·오류 표시는
     아이콘과 배경(--danger-bg)으로 계속 구분되게 둘 것. */
  --st-accent: #eb3f3f;
  --st-accent-soft: rgba(235, 63, 63, 0.12);

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 10px 28px rgba(16, 24, 40, 0.07);

  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
    "Malgun Gothic", "맑은 고딕", "Noto Sans KR", system-ui, sans-serif;

  --header-h: 88px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- 버튼 ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.08s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-600);
  box-shadow: 0 4px 14px rgba(24, 61, 104, 0.24);
}

.btn-primary:disabled {
  background: var(--border-strong);
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}

/*
 * 제출 버튼.
 *
 * '다음' 과 같은 네이비였더니 마지막 단계에서 무엇을 누르는지 구분이 안 된다는
 * 요청이 있었다. 서베이탑 포인트 색을 써서 되돌릴 수 없는 행동임을 드러낸다.
 * .btn-primary 와 함께 붙이며, 뒤에 선언해 배경색을 덮는다.
 */
.btn-submit {
  background: var(--st-accent);
}

.btn-submit:hover {
  background: #d63535;
  box-shadow: 0 4px 14px rgba(235, 63, 63, 0.26);
}

.btn-submit:focus-visible {
  outline-color: var(--st-accent);
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.btn-ghost:hover {
  border-color: var(--text-faint);
  color: var(--text);
}

.btn-block {
  width: 100%;
}

/* ============================================================================
 * 로그인 화면
 * ========================================================================== */

.login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: linear-gradient(180deg, #f5f7fa 0%, #eaeff6 100%);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 40px 36px 32px;
}

.login-logo {
  /* 서베이탑 로고는 영문 워드마크 아래 한글 태그라인이 붙은 2줄 구성이라,
     캐치테이블 워드마크(1줄) 기준 높이로는 태그라인이 뭉갠다. */
  display: block;
  height: 42px;
  width: auto;
  margin: 0 auto 28px;
}

.login-eyebrow {
  margin: 0 0 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.login-title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.login-desc {
  margin: 0 0 28px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  /* questions.js INTRO_TEXT 의 \n 을 줄바꿈으로 살린다 (textContent 라 <br> 불가) */
  white-space: pre-line;
  color: var(--text-muted);
}

.field {
  margin-bottom: 16px;
}

.field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.field-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-input::placeholder {
  color: var(--text-faint);
}

.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(38, 131, 204, 0.15);
}

.form-error {
  margin: 0 0 16px;
  padding: 11px 14px;
  background: var(--danger-bg);
  border: 1px solid #f3d3cf;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--danger);
}

/*
 * 로그인 화면 하단 안내.
 *
 * 다섯 문장이 <br> 로만 이어져 한 덩어리로 읽히던 것을, 성격에 따라 셋으로
 * 나눴다: 분량 안내(scope) / 익명성·유의사항 목록(list) / 참여 독려(closing).
 * 문구 자체는 고객 확정본 그대로이고 배치와 강약만 손봤다.
 */
.login-note {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-faint);
}

.login-note-scope {
  margin: 0 0 12px;
  text-align: center;
}

.login-note-scope strong {
  color: var(--text-muted);
  font-weight: 600;
}

.login-note-list {
  margin: 0;
  padding: 14px 16px;
  list-style: none;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* 항목 사이는 띄우고 항목 안은 붙여, 한 항목이 한 덩어리로 보이게 한다 */
.login-note-list li + li {
  margin-top: 10px;
}

.login-note-list li {
  position: relative;
  padding-left: 12px;
}

.login-note-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-strong);
}

.login-note-list b {
  color: var(--text-muted);
  font-weight: 600;
}

.login-note-closing {
  margin: 12px 0 0;
  color: var(--text-muted);
}

/* ============================================================================
 * 설문 화면
 * ========================================================================== */

.survey-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--border);
}

.survey-header-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 16px 24px 14px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.survey-header-logo {
  height: 30px;
  width: auto;
  flex: none;
}

.survey-progress {
  flex: 1;
  min-width: 0;
}

.survey-progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.survey-progress-meta b {
  color: var(--text);
  font-weight: 600;
}

.survey-progress-track {
  height: 5px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.survey-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  border-radius: 99px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.survey-main {
  max-width: 780px;
  margin: 0 auto;
  padding: 36px 24px 140px;
}

.section-head {
  margin-bottom: 24px;
}

.section-eyebrow {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.section-title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.section-lead {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-muted);
}

/* --- 미응답 배너 --------------------------------------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  padding: 13px 16px;
  background: var(--danger-bg);
  border: 1px solid #f3d3cf;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--danger);
}

.alert-icon {
  flex: none;
  font-weight: 700;
}

/* --- 문항 카드 ----------------------------------------------------------- */

.q-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.q-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-h) + 20px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.q-card.is-missing {
  border-color: #eebfb9;
  box-shadow: inset 3px 0 0 var(--danger);
}

.q-head {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.q-no {
  flex: none;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-050);
  color: var(--brand);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.q-text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: var(--text);
}

.q-optional {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
}

/* --- 6점 세그먼트 척도 --------------------------------------------------- */

.scale {
  border: 0;
  margin: 0;
  padding: 0;
}

.scale-anchors {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint);
}

.scale-opts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.scale-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 62px;
  padding: 8px 4px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.scale-opt:hover {
  background: var(--brand-050);
  border-color: var(--accent);
  color: var(--brand);
}

.scale-dot {
  width: 15px;
  height: 15px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  transition: border-color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.scale-opt input:checked ~ .scale-dot {
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--brand);
}

.scale-opt:has(input:checked) {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

.scale-opt:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- 주관식 -------------------------------------------------------------- */

.q-textarea {
  width: 100%;
  min-height: 116px;
  padding: 13px 15px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.q-textarea::placeholder {
  color: var(--text-faint);
}

.q-textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(38, 131, 204, 0.15);
}

/* --- 셀렉트 -------------------------------------------------------------- */

.q-select {
  width: 100%;
  min-height: 50px;
  padding: 12px 42px 12px 15px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background-color: var(--surface-alt);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.q-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(38, 131, 204, 0.15);
}

/* --- 하단 내비게이션 ----------------------------------------------------- */

.survey-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  border-top: 1px solid var(--border);
}

.survey-nav-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 14px 24px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
}

.survey-nav .btn-primary {
  flex: 1;
}

.survey-saved {
  flex: none;
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ============================================================================
 * 완료 화면
 * ========================================================================== */

.done-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.done-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 44px 36px;
  text-align: center;
}

.done-mark {
  width: 60px;
  height: 60px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f6ee;
  color: var(--success);
  border-radius: 50%;
  font-size: 28px;
  font-weight: 700;
}

.done-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.done-desc {
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.done-meta {
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ============================================================================
 * 반응형 — 6점 가로 배치는 좁은 화면에서 한글 라벨이 깨진다
 * ========================================================================== */

@media (max-width: 640px) {
  :root {
    --header-h: 78px;
  }

  .survey-header-inner {
    padding: 12px 16px 11px;
    gap: 12px;
  }

  .survey-header-logo {
    height: 24px;
  }

  .survey-main {
    padding: 26px 16px 130px;
  }

  .survey-nav-inner {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .section-title {
    font-size: 21px;
  }

  .q-card {
    padding: 18px 18px 16px;
  }

  .q-text {
    font-size: 15px;
  }

  /* 세로 리스트로 전환 */
  .scale-anchors {
    display: none;
  }

  .scale-opts {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .scale-opt {
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 14px;
    text-align: left;
  }

  .login-card {
    padding: 32px 24px 26px;
  }

  .done-card {
    padding: 36px 24px;
  }
}

/* :has() 미지원 브라우저용 폴백 — app.js 가 .is-checked 를 함께 토글한다 */
.scale-opt.is-checked {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

.scale-opt.is-checked .scale-dot {
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--brand);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
 * 리더십 진단 (타인) — 좌: 대상자 목록 / 우: 작성란
 *
 * 대상자를 최대 30명까지 오가며 작성하는 화면이라 다른 두 설문의 위저드
 * 레이아웃(.survey-header / .survey-main / .survey-nav)을 쓰지 않는다.
 * ========================================================================== */

/* --- 상단 --------------------------------------------------------------- */

/*
 * 타인진단 화면의 서베이탑 포인트 라인.
 *
 * 고객사에서 "사내 평가 시스템과 너무 비슷하다" 는 피드백이 있어, 로고 색
 * (--st-accent) 라인을 얇게 얹어 서베이탑 화면임을 드러낸다. 요청이 "살짝 넣는
 * 정도" 였으므로 버튼·배경은 기존 네이비 톤 그대로 두고 선만 바꾼다.
 * 적용 범위를 .rev-* 로 한정해 조직진단·본인진단 화면은 건드리지 않는다.
 */
.rev-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-top: 3px solid var(--st-accent);
  border-bottom: 1px solid var(--border);
}

.rev-header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px;
}

.rev-header-logo {
  flex: none;
  height: 32px;
}

.rev-header-who {
  flex: none;
  min-width: 0;
}

.rev-header-eyebrow {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

.rev-header-name {
  margin: 1px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.rev-header-deadline {
  flex: none;
  margin: 0;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-050);
  border-radius: 999px;
  white-space: nowrap;
}

.rev-header-progress {
  flex: 1;
  min-width: 160px;
}

/* 진행바는 세 설문이 공유하는 .survey-progress-bar 라, 타인진단 화면 안에서만
   accent 로 덮어쓴다. 조직진단·본인진단은 기존 네이비 그라데이션 그대로다. */
.rev-header-progress .survey-progress-bar {
  background: var(--st-accent);
}

.rev-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.rev-progress-meta b {
  color: var(--text);
  font-weight: 700;
}

/* --- 본문 2단 ----------------------------------------------------------- */

.rev-body {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 26px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 24px 60px;
  align-items: start;
}

/* --- 좌측: 대상자 목록 --------------------------------------------------- */

.rev-side {
  position: sticky;
  top: calc(var(--header-h) + 10px);
  max-height: calc(100vh - var(--header-h) - 30px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.rev-side-head {
  flex: none;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.rev-side-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* 제목 앞 짧은 accent 마커 */
.rev-side-title::before {
  content: "";
  flex: none;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--st-accent);
}

.rev-side-desc {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* 모바일 전용 토글 — 데스크톱에서는 목록이 늘 보인다 */
.rev-side-toggle {
  display: none;
}

.rev-target-list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 8px;
  list-style: none;
  overflow-y: auto;
}

.rev-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 2px;
  background: transparent;
  border: 1px solid transparent;
  /* 선택된 대상자의 좌측 accent 바가 들어갈 자리. 늘 비워 두어야 선택할 때
     글자가 밀리지 않는다. */
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  color: var(--text);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rev-target:hover {
  background: var(--brand-050);
}

.rev-target.is-current {
  background: var(--st-accent-soft);
  border-color: transparent;
  border-left-color: var(--st-accent);
}

.rev-target.is-current .rev-target-label {
  color: var(--st-accent);
}

.rev-target-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rev-target-label {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.rev-badge {
  flex: none;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}

.rev-badge.is-todo {
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

.rev-badge.is-draft {
  color: #9a6b00;
  background: #fff7e6;
  border: 1px solid #f3dfb0;
}

.rev-badge.is-submitted {
  color: var(--success);
  background: #eefaf3;
  border: 1px solid #c2e9d5;
}

/* --- 우측: 작성란 ------------------------------------------------------- */

.rev-main {
  min-width: 0;
}

.rev-section {
  margin-bottom: 26px;
}

.rev-section-title {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand);
}

.rev-section-lead {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.rev-submit-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px 0;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(
    to bottom,
    rgba(245, 247, 250, 0) 0%,
    var(--bg) 38%
  );
}

.rev-submit-bar .btn-primary {
  min-width: 190px;
}

.survey-saved.is-error {
  color: var(--danger);
  font-weight: 600;
}

/* 제출 완료된 대상자를 열었을 때 */
/* 이전에 제출한 기록이 있을 때 첫 섹션에 뜨는 안내 */
.resubmit-note {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #fff7e6;
  border-left: 3px solid #e0a02a;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.6;
  color: #7a5400;
}

/* 제출했지만 아직 고칠 수 있는 대상자를 열었을 때의 안내 */
.rev-editing-note {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--st-accent-soft);
  border-left: 3px solid var(--st-accent);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}

.rev-locked {
  padding: 44px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.rev-locked-title {
  margin: 14px 0 4px;
  font-size: 17px;
  font-weight: 700;
}

.rev-locked-desc {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* --- 단일 선택 문항 (0번) ------------------------------------------------ */

.choice-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choice {
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.choice-opt:hover {
  background: var(--brand-050);
  border-color: var(--accent);
}

.choice-dot {
  flex: none;
  width: 17px;
  height: 17px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  transition: border-color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.choice-opt:has(input:checked) {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

.choice-opt:has(input:checked) .choice-dot,
.choice-opt.is-checked .choice-dot {
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--brand);
}

.choice-opt:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* :has() 미지원 폴백 — app.js 의 recordAnswer 가 .is-checked 를 토글한다 */
.choice-opt.is-checked {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* --- 좁은 화면 ---------------------------------------------------------- */

@media (max-width: 900px) {
  .rev-header-inner {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 16px;
  }

  .rev-header-progress {
    flex-basis: 100%;
  }

  .rev-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px 16px 48px;
  }

  .rev-side {
    position: static;
    max-height: none;
  }

  /* 목록은 기본으로 접어 두고 버튼으로 편다 — 문항이 먼저 보이도록 */
  .rev-side-toggle {
    display: block;
    width: 100%;
    padding: 12px 18px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand);
    text-align: left;
  }

  .rev-target-list {
    display: none;
    max-height: 60vh;
  }

  .rev-side-open .rev-target-list {
    display: block;
  }

  .rev-submit-bar .btn-primary {
    flex: 1;
    min-width: 0;
  }
}

/* ============================================================================
 * 진단 운영자 화면 (/admin/)
 * ========================================================================== */

.form-ok {
  margin: 0 0 16px;
  padding: 10px 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--success);
  background: #eefaf3;
  border: 1px solid #c2e9d5;
  border-radius: var(--radius-sm);
}

.admin-header-actions {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.admin-main {
  max-width: 780px;
  margin: 0 auto;
  padding: 30px 24px 60px;
}

/* --- 진행 현황 ----------------------------------------------------------- */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

.admin-stat {
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.admin-stat-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
}

.admin-stat-value {
  margin: 4px 0 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--brand);
}

/* --- 내려받기 카드 -------------------------------------------------------- */

.admin-card {
  padding: 22px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.admin-card-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}

.admin-card-desc {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-muted);
}

/* 파일이 응답자를 식별한다는 사실을 내려받기 직전에 한 번 더 알린다 */
.admin-warning {
  margin-bottom: 18px;
  padding: 13px 15px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #8a3c31;
  background: var(--danger-bg);
  border: 1px solid #f0cdc8;
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
}

.admin-warning strong {
  display: block;
  margin-bottom: 2px;
  color: var(--danger);
}

.admin-card .survey-saved {
  margin-left: 12px;
}

@media (max-width: 700px) {
  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-header-actions {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .admin-main {
    padding: 20px 16px 48px;
  }
}

/* ============================================================================
 * 2026-09 AWS 저장 전환 — 조직진단·리더십 본인진단 완료 화면의 수정 안내
 * ========================================================================== */

.done-edit-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

#btn-reopen {
  margin-top: 14px;
}

.survey-saved.is-error {
  color: var(--danger, #d64545);
}