/* ------------------------------------------------------------------
   기본 리셋 & 전체 레이아웃
------------------------------------------------------------------ */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  background: #f2f4f7;
  color: #1f2430;
  line-height: 1.6;
}

.page-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ------------------------------------------------------------------
   헤더 / 서버 상태
------------------------------------------------------------------ */
.app-header {
  text-align: center;
  margin-bottom: 20px;
}

.app-header h1 {
  font-size: 1.4rem;
  margin: 0 0 12px;
}

.server-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #555;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.status-unknown { background: #bbb; }
.status-ok { background: #2ecc71; }
.status-error { background: #e74c3c; }

/* ------------------------------------------------------------------
   진행 단계 표시
------------------------------------------------------------------ */
.step-indicator {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #999;
  flex-wrap: wrap;
  gap: 4px;
}

.step-indicator li {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-bottom: 3px solid #d9dce1;
  transition: all 0.2s ease;
}

.step-indicator li.active {
  color: #2b6cf6;
  border-bottom-color: #2b6cf6;
  font-weight: 700;
}

.step-indicator li.done {
  color: #2ecc71;
  border-bottom-color: #2ecc71;
}

/* ------------------------------------------------------------------
   배너 (안내/에러/성공 메시지)
------------------------------------------------------------------ */
.banner {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.banner-info { background: #eaf1ff; color: #2b57b3; }
.banner-success { background: #e6f9ee; color: #1c8a4b; }
.banner-error { background: #fdecea; color: #c62828; }
.banner-warning { background: #fff6e0; color: #916400; }

.hidden {
  display: none !important;
}

/* ------------------------------------------------------------------
   카드형 UI
------------------------------------------------------------------ */
.card {
  background: #fff;
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.step-panel h2 {
  font-size: 1.15rem;
  margin-top: 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group h3 {
  font-size: 0.95rem;
  margin: 0 0 8px;
  color: #333;
}

/* ------------------------------------------------------------------
   직업군 선택 (라디오 카드)
------------------------------------------------------------------ */
.radio-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d9dce1;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.radio-card:hover {
  border-color: #2b6cf6;
}

.radio-card input {
  accent-color: #2b6cf6;
}

.radio-card input:checked + span {
  color: #2b6cf6;
  font-weight: 700;
}

/* ------------------------------------------------------------------
   성향 5점 척도
------------------------------------------------------------------ */
.scale-guide {
  font-size: 0.78rem;
  color: #777;
  margin-bottom: 12px;
}

.scale-row {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.scale-label {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: #333;
}

.scale-options {
  display: flex;
  gap: 14px;
}

.scale-options label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}

/* ------------------------------------------------------------------
   모델 진행 표시 / 시나리오 상황
------------------------------------------------------------------ */
.model-progress {
  display: inline-block;
  background: #eaf1ff;
  color: #2b57b3;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.question-lead {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 4px 0 14px;
}

.situation-box {
  background: #fffbe6;
  border: 1px solid #f1e2a0;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
}

/* ------------------------------------------------------------------
   설문 안내 / 완료 인사 (인트로 박스)
------------------------------------------------------------------ */
.intro-box {
  background: #f8f9fb;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 12px 0 4px;
  font-size: 0.92rem;
  color: #333;
}

.intro-box p {
  margin: 0 0 12px;
}

.intro-box p:last-child {
  margin-bottom: 0;
}

.intro-duration {
  font-weight: 700;
  color: #2b6cf6;
}

#jobDetailSection {
  margin-top: 4px;
}

/* ------------------------------------------------------------------
   주간 시간표
------------------------------------------------------------------ */
.timetable-wrap {
  margin: 16px 0 20px;
}

.timetable-scroll {
  overflow-x: auto;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  background: #fff;
}

.timetable-grid {
  display: grid;
  min-width: 560px;
  position: relative;
  font-size: 0.72rem;
}

/* 좁은 화면(모바일)에서는 가로 스크롤 대신 7일이 한 화면에 다 보이도록 줄인다 */
.timetable-grid.timetable-grid-narrow {
  min-width: 0;
  font-size: 0.56rem;
}

.timetable-grid-narrow .tt-day-header,
.timetable-grid-narrow .tt-time-label {
  font-size: 0.56rem;
  padding: 0;
}

.timetable-grid-narrow .schedule-block,
.timetable-grid-narrow .candidate-block-label,
.timetable-grid-narrow .legend-item {
  font-size: 0.56rem;
}

.tt-corner,
.tt-day-header {
  background: #f4f6fa;
  border-bottom: 1px solid #e2e5ea;
  border-left: 1px solid #eef0f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #333;
  position: sticky;
  top: 0;
  z-index: 3;
}

.tt-corner {
  left: 0;
  z-index: 4;
}

.tt-time-label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  color: #777;
  border-top: 1px solid #eef0f4;
  background: #f8f9fb;
  position: sticky;
  left: 0;
  z-index: 2;
}

.tt-slot {
  border-left: 1px solid #eef0f4;
  border-top: 1px dashed #f0f1f4;
}

.tt-slot-hour {
  border-top: 1px solid #e2e5ea;
}

.schedule-block {
  margin: 1px 2px;
  padding: 2px 4px;
  border-radius: 4px;
  background: #e4e7ee;
  color: #555;
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
  display: flex;
  align-items: center;
}

.candidate-block {
  position: relative;
  margin: 1px 2px;
  border-radius: 4px;
  border: 2px solid;
  background: transparent;
  z-index: 5;
  cursor: pointer;
}

.candidate-block:hover {
  background: rgba(0, 0, 0, 0.05);
}

.candidate-block.ranked {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.candidate-block-label {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--candidate-color, #555);
  color: #fff;
  font-weight: 800;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px #fff;
}

.candidate-block-rank {
  position: absolute;
  top: -7px;
  right: -7px;
  background: #1f2430;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 1px #fff;
}

/* 후보 6개 색상 (표 오버레이 / 범례 / 카드에서 공통으로 사용) */
.candidate-color-0 { --candidate-color: #e05a5a; border-color: #e05a5a; color: #b23b3b; }
.candidate-color-1 { --candidate-color: #2b8fd6; border-color: #2b8fd6; color: #1c5f8f; }
.candidate-color-2 { --candidate-color: #2fa864; border-color: #2fa864; color: #1f7a48; }
.candidate-color-3 { --candidate-color: #d68c1f; border-color: #d68c1f; color: #a56712; }
.candidate-color-4 { --candidate-color: #8a5fd6; border-color: #8a5fd6; color: #5f3ea8; }
.candidate-color-5 { --candidate-color: #d63a8c; border-color: #d63a8c; color: #a1256a; }

.timetable-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 4px 2px;
  font-size: 0.78rem;
  color: #444;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 2px solid;
  background: #fff;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------
   후보 6개 카드 (클릭해서 1·2·3순위 선택)
------------------------------------------------------------------ */
.rank-guide {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 10px;
}

.candidate-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}

.candidate-card {
  text-align: left;
  background: #fff;
  border: 2px solid #e2e5ea;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.candidate-card:hover {
  border-color: #b9c3d6;
}

.candidate-card.selected {
  border-color: currentColor;
  background: #f8faff;
}

.candidate-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.candidate-card-id {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid currentColor;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
}

.candidate-rank-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2b6cf6;
  min-height: 1em;
}

.candidate-card-text {
  font-size: 0.85rem;
  color: #1f2430;
  font-weight: 700;
  margin-bottom: 2px;
}

.candidate-card-subtitle {
  font-size: 0.76rem;
  color: #777;
  margin-bottom: 6px;
}

.candidate-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  background: #eef0f4;
  color: #555;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.tag-flag {
  background: #e3f3ff;
  color: #1b6aa8;
}

.tag-meter {
  gap: 6px;
}

.tag-meter-label {
  font-weight: 700;
}

.tag-meter-dots {
  display: inline-flex;
  gap: 2px;
}

.meter-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d7dae2;
  display: inline-block;
}

.meter-dot.filled {
  background: #f2ac2e;
}

.price-coin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  line-height: 1;
  font-weight: 700;
  border: 1.2px solid #c7cbd3;
  color: #b0b5bd;
  background: transparent;
}

.price-coin.filled {
  background: #2fa864;
  border-color: #2fa864;
  color: #fff;
}

.candidate-card-desc {
  font-size: 0.78rem;
  color: #666;
}

/* ------------------------------------------------------------------
   1순위 선택 이유
------------------------------------------------------------------ */
.reason-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #eee;
}

.reason-section h3 {
  font-size: 0.95rem;
  margin: 0 0 8px;
}

.question-options label {
  display: block;
  padding: 6px 0;
  font-size: 0.9rem;
  cursor: pointer;
}

#optionalComment {
  width: 100%;
  min-height: 70px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #d9dce1;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}

/* ------------------------------------------------------------------
   버튼
------------------------------------------------------------------ */
.btn {
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: #2b6cf6;
  color: #fff;
}

.btn-secondary {
  background: #e9ecf3;
  color: #333;
}

.btn-small {
  padding: 4px 10px;
  font-size: 0.75rem;
  background: #e9ecf3;
  color: #333;
}

.step-nav {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------
   에러 텍스트
------------------------------------------------------------------ */
.field-error {
  color: #c62828;
  font-size: 0.8rem;
  margin: 4px 0 0;
  min-height: 1em;
}

.saved-file-name {
  font-size: 0.85rem;
  color: #555;
  background: #f4f6fa;
  padding: 8px 12px;
  border-radius: 6px;
  word-break: break-all;
}

/* ------------------------------------------------------------------
   반응형 (모바일)
------------------------------------------------------------------ */
@media (max-width: 480px) {
  .app-header h1 {
    font-size: 1.15rem;
  }

  .card {
    padding: 18px 14px;
  }

  .step-indicator {
    font-size: 0.65rem;
  }

  .candidate-list {
    grid-template-columns: 1fr;
  }

  .scale-options {
    gap: 8px;
  }
}