/* ===================== 기본 설정 ===================== */
/* ── 색에 대하여 ────────────────────────────────────────────
   구인구직 사이트는 거의 전부 밝은 파랑입니다. 파랑을 쓰는 한 아무리 배치를
   바꿔도 "그 사이트들 중 하나"로 보입니다. 그렇다고 노랑·주황을 전면에 쓰면
   세 가지가 한꺼번에 깨집니다. 노랑은 흰 배경에서 글씨가 안 읽히고,
   오픈카톡방의 카카오 노랑이 배경에 묻히며, 공고 목록의 보험사 태그(삼성 파랑,
   메리츠 빨강, 현대해상 주황)와 뒤엉킵니다.

   그래서 색상을 바꾸는 대신 밝기를 내렸습니다. 바탕은 거의 검정에 가까운
   잉크색으로 두어 무게를 싣고, 주황은 누르는 자리에만 씁니다. 화면에서 색이
   튀는 곳이 한 군데뿐이면 눈은 반드시 그리로 갑니다. 그 자리에 "지원하기"와
   "공고 등록하기"를 놓았습니다.

   변수 이름은 --navy 그대로 둡니다. 100군데가 넘게 쓰고 있어 이름을 바꾸면
   그 자체가 위험한 수정이 되고, 얻는 것은 이름의 정확함뿐입니다. */
:root {
  --navy: #1c2532;        /* 잉크. 이 사이트의 바탕색 */
  --navy-dark: #121924;
  --navy-light: #45566b;  /* 흰 배경 위 보조 글자·아이콘용 */
  /* 로고의 "人", 안내 문구의 강조, 입력칸 선택 표시에 쓰입니다.
     파랑으로 두면 잉크 바탕과 따로 놀아 색이 두 갈래로 보입니다. 강조는
     주황 한 갈래로 모읍니다. (이름은 쓰는 곳이 많아 그대로 둡니다) */
  --blue-accent: #c2410c;
  --bg-light: #f5f7fa;
  --bg-white: #ffffff;
  --text-dark: #1f2937;
  --text-mid: #4b5563;
  --text-light: #9ca3af;
  --border-color: #e5e7eb;
  --green: #16a34a;
  --green-bg: #e8f8ee;
  --blue: #2563eb;
  --blue-bg: #e8f0fe;
  --purple: #7c3aed;
  --purple-bg: #f1eafd;
  --teal: #0d9488;
  --teal-bg: #e2f7f5;
  --orange: #ea580c;
  /* 흰 글씨를 얹는 버튼용. --orange 위의 흰 글씨는 대비가 모자라 작은 글씨가
     흐려 보입니다. 누르는 자리는 한 단계 진한 쪽을 씁니다. */
  --orange-strong: #c2410c;
  --orange-dark: #9a3412;
  --orange-bg: #fff1e7;
  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 20px rgba(18,25,36,0.14);
  /* 주황 버튼에만 쓰는 그림자. 같은 색 계열로 깔아야 버튼이 떠 보입니다. */
  --shadow-accent: 0 6px 18px rgba(194,65,12,0.28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  border: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
/* 실제로 눌러주길 바라는 버튼입니다. 화면에서 주황이 나오는 곳은 여기뿐이라
   따로 안내하지 않아도 눈이 먼저 갑니다. */
.btn-primary {
  background: var(--orange-strong);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
.btn-outline {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: #fff; }

/* 테두리 없는 보조 버튼. [계정 바꾸기]처럼 어쩌다 한 번 쓰는 기능에 씁니다.
   테두리를 주면 옆의 [로그아웃]과 같은 무게로 보여서, 매번 둘 중 무엇을
   눌러야 하는지 고르게 만듭니다. */
.btn-ghost {
  background: transparent;
  color: var(--navy-light);
  border: 1.5px solid transparent;
}
.btn-ghost:hover { background: var(--bg-light); color: var(--navy); }

/* ===================== 헤더 ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand-area {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.logo {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.5px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  display: inline-block;
}
.logo span { color: var(--blue-accent); }
.logo:hover { opacity: 0.78; transform: translateY(-1px); }
.logo:active { transform: translateY(0); }

/* 로고 앞의 주먹 아이콘. 마우스를 올리면 '똑똑' 두 번 두드립니다.
   사이트 이름이 무슨 뜻인지를 설명 문구 없이 알아채게 하는 장치입니다.
   회전축을 손목 쪽(70% 70%)에 두어야 문을 두드리는 모양이 됩니다.
   가운데를 축으로 돌리면 손이 제자리에서 흔들리는 것처럼 보입니다. */
.logo-knock {
  font-size: 0.9em;
  color: var(--blue-accent);
  margin-right: 6px;
  display: inline-block;
  transform-origin: 70% 70%;
}
.logo:hover .logo-knock { animation: knock 0.55s ease-in-out; }
@keyframes knock {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-22deg); }
  40%      { transform: rotate(0deg); }
  60%      { transform: rotate(-22deg); }
  80%      { transform: rotate(0deg); }
}
/* 화면 움직임을 불편해하는 분들을 위해 꺼둡니다. 아이콘 자체는 그대로 보입니다. */
@media (prefers-reduced-motion: reduce) {
  .logo:hover .logo-knock { animation: none; }
}
.catchphrase {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--navy-light);
  background: var(--blue-bg);
  padding: 4px 12px;
  border-radius: 20px;
}
.catchphrase i { color: var(--blue-accent); margin-right: 2px; }

/* ===================== 익명 안내 띠 =====================
   헤더 바로 아래, 편의도구 줄 위에 옵니다. 잉크 바탕을 쓴 이유는 이 줄이
   페이지에서 유일하게 어두운 가로 띠가 되어 눈이 먼저 걸리게 하기
   위해서입니다. 아래로 이어지는 편의도구·뉴스 줄은 모두 밝은 회색이라
   여기만 어두우면 자연스럽게 첫 문장으로 읽힙니다. */
.anon-banner {
  background: var(--navy);
  color: #fff;
}
.anon-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  text-align: center;
}
.anon-headline {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}
/* 강조는 --blue-accent(주황)보다 한 단계 밝은 색을 씁니다. 어두운 바탕에서는
   #c2410c가 배경에 가라앉아 강조로 읽히지 않습니다. */
.anon-headline em {
  font-style: normal;
  color: #fb923c;
}
.anon-note {
  margin: 7px 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}
.anon-note i { color: #fb923c; margin-right: 5px; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--navy);
}
.header-actions-mobile {
  display: none;
  padding: 0 24px 14px;
  gap: 10px;
}
.header-actions-mobile .btn { flex: 1; justify-content: center; }

/* 로그인 전/후가 교체되는 영역 (js/auth.js) */
.auth-slot {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-actions-mobile .auth-slot { flex: 1; }

/* 로그인된 사용자의 프로필 칩 */
.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background: var(--bg-light);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 500;
  max-width: 160px;
}
.auth-chip i { font-size: 1.3rem; }
.auth-chip-img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
/* 닉네임이 길어도 헤더 레이아웃이 밀리지 않도록 잘라냅니다 */
.auth-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================== 뉴스 티커 ===================== */
.news-ticker-section {
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.news-ticker-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.news-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.news-badge {
  background: rgba(255,255,255,0.15);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.news-date {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}
.news-ticker-viewport {
  overflow: hidden;
  flex: 1;
  position: relative;
}
.news-ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* 실제 흐르는 시간은 js/news.js가 기사 수에 맞춰 계산해 넣습니다.
     기사가 12건이든 6건이든 글자가 지나가는 속도는 같아야 하기 때문입니다.
     아래 32s는 자바스크립트가 늦게 붙을 때를 대비한 기본값입니다. */
  animation: ticker-scroll 32s linear infinite;
  width: max-content;
}
.news-ticker-viewport:hover .news-ticker-track {
  animation-play-state: paused;
}
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.news-ticker-track li {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
}
.news-ticker-track a {
  color: #fff;
  opacity: 0.92;
}
.news-ticker-track a:hover { text-decoration: underline; opacity: 1; }
/* 어두운 띠 위라 --orange-strong은 너무 가라앉습니다. 여기서만 밝은 쪽을 씁니다.
   (색을 맞추는 기준은 변수 이름이 아니라 그 색이 얹히는 배경입니다) */
.news-source { font-weight: 700; color: #fb923c; margin-right: 2px; }
.news-sep {
  margin: 0 14px;
  color: rgba(255,255,255,0.4);
}

/* ===================== 상단 유틸리티 툴바 ===================== */
.utility-bar {
  background: #f4f7fb;
  border-bottom: 1px solid var(--border-color);
}
.utility-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.utility-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-light);
  white-space: nowrap;
}
.utility-buttons {
  display: flex;
  gap: 8px;
  /* 좁은 화면에서는 버튼이 줄바꿈되지 않고 옆으로 밀려 스크롤됩니다. */
  overflow-x: auto;
  scrollbar-width: none;
}
.utility-buttons::-webkit-scrollbar { display: none; }

/* 오픈카톡방 입구. 줄 맨 오른쪽으로 밀어 편의도구들과 갈라놓습니다.
   같은 줄에 있지만 성격이 다릅니다. 도구는 이 사이트 안에서 처리되고
   이것은 카톡으로 나갑니다. 카카오 노랑을 그대로 쓰는 것도 그 예고입니다. */
.utility-chat {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
  color: #191600;
  background: #fee500;
  border-radius: 16px;
  padding: 6px 14px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.utility-chat:hover { background: #fada0a; }
/* 링크가 아직 없을 때. 눌리지 않는다는 것이 보여야 눌러보고 실망하지 않습니다. */
.utility-chat.disabled {
  background: #f1f5f9;
  color: var(--text-light);
  cursor: default;
  pointer-events: none;
}

.utility-btn {
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-mid);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 6px 12px;
  transition: all 0.15s ease;
}
.utility-btn:hover {
  border-color: var(--navy-light);
  color: var(--navy);
}

/* 도구 모달 */
.tool-box { max-width: 460px; }
.tool-desc {
  font-size: 0.83rem;
  color: var(--text-mid);
  line-height: 1.7;
  background: var(--blue-bg);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 16px;
}
.tool-panel label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 5px;
}
.tool-panel input[type="text"],
.tool-panel input[type="file"],
.tool-panel select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: inherit;
  margin-bottom: 14px;
}
.tool-download {
  width: 100%;
  justify-content: center;
  padding: 12px;
  text-decoration: none;
  margin-top: 4px;
}
.tool-result {
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 4px;
}
.tool-result img,
.tool-result canvas {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}
/* QR 결과.
   QR 라이브러리는 캔버스와 이미지를 같이 넣기 때문에 text-align만으로는
   가운데로 오지 않습니다. 담는 칸을 flex로 두고 직접 가운데에 세웁니다.
   흰 카드 안에 여백을 두는 건 QR을 화면 그대로 찍어도 인식되게 하기 위해서입니다
   (QR은 테두리 여백이 없으면 잘 안 읽힙니다). */
#qr-canvas {
  display: flex;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin: 0 auto 14px;
  width: fit-content;
}
#qr-canvas img,
#qr-canvas canvas {
  display: block;
  margin: 0;
  border-radius: 0;
}
.tool-note {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 0 0 12px;
}
.tool-loading {
  text-align: center;
  font-size: 0.83rem;
  color: var(--text-light);
  margin: 14px 0 0;
}

@media (max-width: 768px) {
  .utility-bar-inner { padding: 8px 16px; gap: 10px; }
  .utility-label { display: none; }
  /* 좁은 화면에서는 도구 버튼이 옆으로 밀리며 스크롤되므로, 카톡방까지 그 안에
     끼면 안 보이게 됩니다. 줄을 바꿔 아래에 온전히 놓습니다. */
  .utility-bar-inner { flex-wrap: wrap; }
  .utility-chat { margin-left: 0; width: 100%; justify-content: center; }
}

/* ===================== 회사후기(블라인드) 게시판 ===================== */
.section-head-reviews i { color: #c8873c; }

/* 회사 이름으로 후기를 찾는 검색칸 */
.review-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 340px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 8px 14px;
  color: var(--text-light);
  background: #fff;
}
.review-search-wrap input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 0.85rem;
  font-family: inherit;
  background: none;
}

.review-card { cursor: default; }

/* 내가 쓴 후기에만 붙는 삭제 버튼입니다.
   눈에 띄지 않게 회색으로 두었다가 마우스를 올렸을 때만 빨갛게 만듭니다.
   후기 목록에서 가장 자주 하는 일은 읽는 것이지 지우는 것이 아니라서,
   평소에는 카드의 다른 글자에 묻혀 있어야 합니다. */
.review-delete {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 0.78rem;
  font-family: inherit;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.review-delete:hover { color: #dc2626; background: #fef2f2; }
.review-delete i { margin-right: 3px; }

/* 관리자가 남의 후기를 지우는 버튼입니다. 평소에도 빨갛게 두어 자기 글을
   지우는 버튼과 한눈에 구분되게 합니다. 남의 글을 내리는 일은 되돌리기
   어려우므로, 누르기 전에 무엇을 하는 버튼인지 알아야 합니다. */
.review-delete-admin { color: #dc2626; font-weight: 500; }
.review-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.review-company {
  font-size: 1rem;
  color: var(--navy);
}
.review-stars {
  color: #f0a63c;
  letter-spacing: 1px;
  font-size: 0.95rem;
}
.review-body { margin: 10px 0 4px; }
.review-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0 0 6px;
}
/* '좋았던 점 / 아쉬웠던 점'을 색으로 구분해 훑어보기 쉽게 만듭니다. */
.review-tag {
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 7px;
  margin-top: 2px;
}
.tag-pros { background: #e8f4ec; color: #2b7a4b; }
.tag-cons { background: #fdeeee; color: #b64a4a; }

@media (max-width: 640px) {
  .review-search-wrap { max-width: none; width: 100%; }
}

/* ===================== 필터 영역 ===================== */
.filter-section {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  z-index: 150;
}
.filter-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
}
.filter-accordion-toggle {
  display: none;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--navy);
}
.filter-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.filter-row.filter-selects { margin-bottom: 14px; }
.select-group, .search-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.select-group label, .search-group label, .filter-tags-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-mid);
}
.select-group select {
  padding: 9px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.88rem;
  background: #fff;
  color: var(--text-dark);
  min-width: 140px;
  font-family: inherit;
}
.select-group select:focus { outline: 2px solid var(--blue-accent); }
.search-group { flex: 1; min-width: 220px; }
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 9px 8px 9px 14px;
  background: #fff;
}
.search-box i { color: var(--text-light); }
.search-box input {
  border: none;
  outline: none;
  font-size: 0.88rem;
  flex: 1;
  font-family: inherit;
}
.search-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 0.85rem;
  transition: background 0.15s ease, transform 0.15s ease;
}
.search-submit-btn i { color: #fff; }
.search-submit-btn:hover { background: var(--navy-dark); transform: translateY(-1px); }
.search-submit-btn:active { transform: translateY(0); }
.filter-row.filter-tags { align-items: center; }
.tag-toggle-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.toggle-tag-btn {
  border: 1.5px solid var(--border-color);
  background: #fff;
  color: var(--text-mid);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.15s ease;
}
.toggle-tag-btn:hover { border-color: var(--navy-light); }
.toggle-tag-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* 관심공고만 보기 버튼 */
.favorite-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--border-color);
  background: #fff;
  color: var(--text-mid);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  margin-left: auto;
  transition: all 0.15s ease;
}
.favorite-filter-btn i { color: #f43f5e; }
.favorite-filter-btn.active {
  background: #fff1f2;
  border-color: #f43f5e;
  color: #be123c;
}
.favorite-count-badge {
  background: #f43f5e;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
}
.favorite-filter-btn:not(.active) .favorite-count-badge {
  background: #e5e7eb;
  color: var(--text-mid);
}

/* ===================== 메인 콘텐츠 ===================== */
.main-content { padding: 28px 0 60px; }
.content-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 프로모 배너 */
.promo-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}
.promo-icon {
  font-size: 1.6rem;
  background: rgba(255,255,255,0.15);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.promo-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.promo-text strong { font-size: 1.05rem; }
.promo-text span { font-size: 0.85rem; color: rgba(255,255,255,0.85); }
.promo-btn {
  background: #fff;
  color: var(--navy);
  flex-shrink: 0;
}
.promo-btn:hover { background: #eef2ff; }

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.list-header h2 { font-size: 1.2rem; margin: 0; }
.list-header h2 span { color: var(--blue-accent); }
.list-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sort-info {
  font-size: 0.8rem;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 5px;
}
.btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid var(--border-color);
  color: var(--navy);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
.btn-refresh:hover { border-color: var(--navy-light); background: var(--blue-bg); }
.btn-refresh:disabled { opacity: 0.6; cursor: default; }
.btn-refresh i { transition: transform 0.2s ease; }
.btn-refresh i.fa-spin { animation: fa-spin 0.8s linear infinite; }
@keyframes fa-spin { 100% { transform: rotate(360deg); } }

/* ===================== 채용공고 카드 ===================== */
.job-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.job-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px 22px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.job-card:hover {
  box-shadow: var(--shadow-md);
  background: #fbfcff;
  transform: translateY(-2px);
}
.job-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.favorite-btn {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1.05rem;
  color: #cbd5e1;
  padding: 4px 6px;
  transition: color 0.15s ease, transform 0.15s ease;
}
.favorite-btn:hover { transform: scale(1.15); }
.favorite-btn.active { color: #f43f5e; }
.job-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 5px;
}
.job-badge.badge-verified {
  background: var(--navy);
  color: #fff;
}
.job-badge.badge-normal {
  background: #e5e7eb;
  color: var(--text-mid);
}
/* 마감된 공고: 목록에서 지우지 않고 흐리게 남겨둡니다.
   이미 지원했거나 링크를 받아둔 사람이 "글이 통째로 사라졌다"고
   당황하지 않도록 하기 위함입니다. */
.job-badge.badge-closed {
  background: #9ca3af;
  color: #fff;
}
.job-card-closed {
  opacity: 0.6;
}
.job-card-closed .job-title {
  text-decoration: line-through;
  text-decoration-color: #9ca3af;
}
.job-company {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}
.job-region {
  font-size: 0.82rem;
  color: var(--text-mid);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.job-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.job-tag {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}
.tag-green { background: var(--green-bg); color: var(--green); }
.tag-blue { background: var(--blue-bg); color: var(--blue); }
.tag-purple { background: var(--purple-bg); color: var(--purple); }
.tag-teal { background: var(--teal-bg); color: var(--teal); }
.tag-orange { background: var(--orange-bg); color: var(--orange); }

.job-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-dark);
}
.job-summary {
  font-size: 0.87rem;
  color: var(--text-mid);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.job-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-light);
  border-top: 1px dashed var(--border-color);
  padding-top: 10px;
}
.job-card-bottom .meta-group {
  display: flex;
  gap: 14px;
}
.job-card-bottom span { display: inline-flex; align-items: center; gap: 4px; }

.notice-text {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 22px 0 0;
}
.load-more-wrap {
  text-align: center;
  margin-top: 20px;
}
.btn-load-more { padding: 12px 28px; }
.no-more-text {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 10px;
}

/* 결과 없음 / 로딩 */
.no-result, .loading-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
}
.no-result i, .loading-state i { font-size: 2.2rem; margin-bottom: 12px; display: block; }

/* 빈 목록에서 나가려는 사람을 붙잡는 버튼.
   안내 문구와 같은 회색으로 두면 글의 일부로 읽혀 아무도 누르지 않습니다.
   여기는 이 화면에서 유일하게 할 수 있는 행동이라 눈에 띄어야 합니다. */
.no-result-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 11px 22px;
  border: 0;
  border-radius: 8px;
  background: var(--blue-accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.no-result-cta:hover { filter: brightness(1.08); }

/* 신규 등록/새로고침 강조 표시 */
.job-card-highlight {
  animation: job-highlight-pulse 1.3s ease 2;
  border-color: var(--blue-accent) !important;
}
@keyframes job-highlight-pulse {
  0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}

/* 토스트 메시지 */
.site-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy-dark);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 0.86rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 900;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.site-toast.toast-error { background: #b91c1c; }

/* ===================== 모달 ===================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: #fff;
  border-radius: 16px;
  max-width: 620px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
  animation: modal-pop 0.2s ease;
}
@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--bg-light);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--text-mid);
}
.modal-close:hover { background: #e5e7eb; }
.modal-header { margin-bottom: 14px; padding-right: 30px; }
.modal-company {
  font-size: 1.3rem;
  color: var(--navy);
  margin: 8px 0 10px;
}
.modal-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.modal-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-mid);
}
.modal-meta span { display: inline-flex; align-items: center; gap: 5px; }
.modal-title {
  font-size: 1.1rem;
  margin: 16px 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
.modal-section { margin-bottom: 16px; }
.modal-section h5 {
  font-size: 0.9rem;
  color: var(--navy);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal-section p {
  font-size: 0.88rem;
  color: var(--text-mid);
  margin: 0;
  line-height: 1.7;
}
.btn-apply {
  width: 100%;
  justify-content: center;
  padding: 14px;
  font-size: 1rem;
  margin-top: 10px;
}

/* 지원하기 입력 모달 */
.apply-box { max-width: 440px; }
.apply-form-title {
  font-size: 1.15rem;
  color: var(--navy);
  margin: 6px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.apply-job-title {
  font-size: 0.85rem;
  color: var(--text-mid);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}
.apply-form .form-group { margin-bottom: 14px; }
.apply-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 5px;
}
/* 동의 항목은 위 입력칸들과 생김새가 달라야 합니다. .apply-form label이
   display: block이라 그대로 두면 체크상자가 글 위에 따로 떨어져, 무엇에
   동의하는 상자인지 안 보입니다. 상자와 글을 한 줄로 붙입니다. */
.apply-form label.apply-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 4px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-mid);
  cursor: pointer;
}
/* 체크상자까지 입력칸 너비(100%)를 물려받아 한 줄을 다 차지하고 있었습니다. */
.apply-form label.apply-agree input[type="checkbox"] {
  width: auto;
  min-width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}

.apply-form input,
.apply-form select,
.apply-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: inherit;
}
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus { outline: 2px solid var(--blue-accent); }

/* 필수 항목 표시(*) */
.apply-form .required { color: #d05050; }
.apply-form textarea { resize: vertical; }
.apply-form button[type="submit"] {
  width: 100%;
  justify-content: center;
  padding: 13px;
  margin-top: 6px;
}

/* ===================== 주 메뉴 =====================
   구인구직 둘과 나머지 셋의 무게를 일부러 다르게 줍니다. 이 사이트에 사람을
   데려오는 것도, 데려온 사람이 결국 하는 일도 구인구직이기 때문입니다.
   다섯을 같은 모양으로 늘어놓으면 그 사실이 화면에서 지워집니다. */
.site-nav {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
}
.site-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 메뉴가 화면보다 길어지면 줄바꿈 대신 옆으로 밀리게 둡니다.
     두 줄이 되면 어디까지가 주 메뉴인지 경계가 무너집니다. */
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav-inner::-webkit-scrollbar { display: none; }

.site-nav-primary,
.site-nav-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nav-item {
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-mid);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
}
.nav-item:hover { background: #f1f5f9; color: var(--navy); }

/* 구인구직 두 개. 평소에도 테두리를 둘러 눈에 먼저 들어오게 합니다. */
.nav-primary {
  font-weight: 700;
  color: var(--navy);
  border: 1.5px solid var(--border-color);
  background: #f8fafc;
}
.nav-primary:hover { border-color: var(--navy-light); background: #f1f5f9; }
.nav-primary.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-md);
}

/* 부가 메뉴가 켜졌을 때는 밑줄로만 표시합니다. 채워진 버튼으로 만들면
   구인구직과 같은 무게가 되어 구분이 사라집니다. */
.site-nav-secondary .nav-item.active {
  color: var(--navy);
  font-weight: 700;
  background: #f1f5f9;
  box-shadow: inset 0 -2px 0 var(--navy);
}

/* 두 덩어리 사이의 세로 선. 여백만으로는 경계가 잘 안 읽힙니다. */
.site-nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  flex-shrink: 0;
}

/* ===================== 게시판 안내 문구 ===================== */
.board-tabs-section {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  padding: 22px 0 26px;
}
.board-tabs-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.board-headline { text-align: center; }
.board-headline h1 {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: -0.5px;
}
.board-headline h1 em {
  font-style: normal;
  color: var(--blue-accent);
}
.board-sub {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--text-light);
}
/* 안내 문구 아래의 "작성하기". 글만 있는 버튼이라 색으로만 눌리는 자리임을
   알립니다. 밑줄은 마우스를 올렸을 때만 나와 평소 화면이 조용합니다. */
.board-cta {
  background: none;
  border: none;
  color: var(--orange-strong);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.board-cta:hover { border-bottom-color: var(--orange-strong); }

/* ===================== 보드 공통 (섹션/툴바/센티넬) ===================== */
.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.expiry-notice {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.board-section { margin-bottom: 34px; }
.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  width: fit-content;
}
.section-head strong { font-weight: 700; }
.section-head .section-count {
  font-weight: 700;
  opacity: 0.75;
  font-size: 0.82rem;
}
.section-head-verified { background: var(--navy); color: #fff; }
.section-head-normal { background: #eef1f5; color: var(--text-mid); }
.section-head-seekers { background: var(--purple-bg); color: var(--purple); }

/* 무한 스크롤 안내 문구 (화면에 들어오면 다음 10건을 불러옵니다) */
.scroll-sentinel {
  text-align: center;
  padding: 18px 10px;
  font-size: 0.8rem;
  color: var(--text-light);
}
.scroll-sentinel .sentinel-text::before {
  content: '\f078'; /* chevron-down */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-right: 6px;
  opacity: 0.6;
}
.scroll-sentinel.done .sentinel-text::before { content: none; }
.scroll-sentinel.done { opacity: 0.6; }

/* 카드 본문 미리보기 (제목 아래로 공고 내용을 여러 줄 노출) */
.job-preview {
  font-size: 0.87rem;
  color: var(--text-mid);
  margin: 0 0 12px;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.verified-mark {
  color: var(--blue-accent);
  font-size: 0.85rem;
}
.job-badge.badge-inline {
  font-size: 0.68rem;
  padding: 2px 8px;
}

/* ===================== 구직 카드 ===================== */
.seeker-card { cursor: pointer; }
.seeker-age {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-mid);
}
.seeker-preview {
  -webkit-line-clamp: 6;
  margin-top: 4px;
}
.seeker-closed .seeker-preview {
  color: var(--text-light);
  font-style: italic;
}
.seeker-message-full { white-space: pre-line; }

/* 개인정보 비공개 안내 */
.privacy-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--purple-bg);
  color: var(--purple);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 18px 0 16px;
}
/* ---------- 채용담당자 인증 ---------- */
.pj-badge-note {
  font-size: 0.85rem;
  color: var(--text-mid);
  background: var(--blue-bg);
  border-radius: 8px;
  padding: 11px 13px;
  margin: 0;
  line-height: 1.6;
}
.cert-ok { color: var(--green); }
.link-inline {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--blue-accent);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.cert-note {
  font-size: 0.8rem;
  color: var(--text-mid);
  margin: 0 0 16px;
  line-height: 1.6;
}
.cert-hint {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0 0 8px;
}
.cert-agree {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.5;
  margin: 14px 0 4px;
  font-weight: 400;
}
.cert-agree input { margin-top: 2px; flex-shrink: 0; }
.cert-preview img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 6px;
}
/* 신청 상태 안내(대기 중 / 인증됨 / 다시 신청). */
.cert-state {
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
}
.cert-state i { font-size: 1.5rem; display: block; margin-bottom: 8px; }
.cert-state strong { display: block; font-size: 0.95rem; margin-bottom: 6px; }
.cert-state p { font-size: 0.82rem; line-height: 1.6; margin: 0; }
.cert-state-done { background: var(--green-bg); color: var(--green); }
.cert-state-wait { background: var(--blue-bg); color: var(--text-mid); }
.cert-state-again { background: var(--orange-bg); color: var(--orange-dark); }

/* 관리자 지원 현황 요약 */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.admin-stat {
  background: var(--bg-light);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
}
.admin-stat strong {
  display: block;
  font-size: 1.5rem;
  color: var(--navy);
  line-height: 1.2;
}
.admin-stat span {
  font-size: 0.76rem;
  color: var(--text-light);
}
.admin-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 18px 0 8px;
}
.admin-byjob-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.84rem;
  color: var(--text-mid);
}
.admin-byjob-row b { color: var(--navy); flex-shrink: 0; }

/* 관리자 화면의 인증 신청 카드 */
.admin-cert-card {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin: 10px 0;
}
.admin-cert-gone {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 10px 0;
}
.admin-cert-actions { display: flex; gap: 8px; margin-top: 4px; }
.admin-cert-actions .btn { flex: 1; justify-content: center; padding: 10px; }
.admin-cert-done { font-size: 0.82rem; color: var(--text-mid); font-weight: 700; }
.admin-cert-badge {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
  flex-shrink: 0;
}
.admin-cert-pending { background: var(--orange-bg); color: var(--orange-dark); }
.admin-cert-approved { background: var(--green-bg); color: var(--green); }
.admin-cert-rejected { background: var(--bg-light); color: var(--text-light); }

.btn-manage-post {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 0.8rem;
  padding: 8px;
  text-decoration: underline;
}
.btn-manage-post:hover { color: var(--navy); }

/* 공고 상세 아래쪽의 "내가 올린 공고예요" 줄.
   지원하기 같은 주요 버튼과 섞이지 않도록 선을 그어 구분합니다. */
.manage-post-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e5e7eb);
}
.manage-post-label {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--text-light);
}
/* 좁은 화면에서는 버튼이 알아서 다음 줄로 넘어갑니다. */
.manage-post-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn-manage-action {
  flex: 1 1 auto;
  min-width: 84px;
  padding: 9px 12px;
  font-size: 0.84rem;
  background: #fff;
  color: var(--text-mid);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
}
.btn-manage-action:hover {
  border-color: var(--navy);
  color: var(--navy);
}
/* 삭제는 되돌릴 수 없으므로 눈에 띄게 구분해 실수로 누르지 않게 합니다. */
.btn-manage-delete { color: #b91c1c; }
.btn-manage-delete:hover { border-color: #b91c1c; color: #b91c1c; }

/* 총괄 관리자 전용 삭제.
   등록자용 관리 버튼과 나란히 놓이므로, 색과 굵기로 "성격이 다른 권한"임을
   분명히 해 평소 쓰는 버튼과 헷갈리지 않게 합니다. */
.admin-delete-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
}
.btn-admin-delete {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
  background: #b91c1c;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.btn-admin-delete:hover { background: #991b1b; }

/* 배지 올리기·내리기. 삭제와 달리 되돌릴 수 있는 작업이라, 빨간 버튼 옆에서
   같은 무게로 보이지 않도록 테두리만 있는 형태로 둡니다. */
.btn-admin-badge {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 8px;
}
.btn-admin-badge:hover { border-color: var(--navy-light); background: var(--bg-light); }

/* PIN 확인 창에서 "지금 무슨 작업을 하려는지" 알려주는 한 줄 */
.manage-action-desc {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-mid);
}
.manage-hint {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0 0 12px;
}
/* 입력칸 아래 붙는 짧은 설명 (예: PIN을 왜 기억해야 하는지) */
.field-help {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.6;
  margin: 6px 0 0;
}
/* 마감/삭제처럼 둘 중 하나를 고르는 선택지 */
.radio-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--text-mid);
  line-height: 1.5;
  margin-top: 8px;
  cursor: pointer;
}
.radio-line input { margin-top: 3px; }

/* ===================== 관리자 화면 ===================== */
.btn-match {
  width: 100%;
  margin-top: 8px;
}
.btn-share {
  width: 100%;
  margin-top: 8px;
}

/* 전화/문자 바로 걸기 — 휴대폰에서 누르기 편하도록 반씩 나눠 나란히 둡니다. */
.contact-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.btn-contact {
  flex: 1;
  justify-content: center;
  text-decoration: none;
  padding: 12px;
}
.admin-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin: 14px 0 4px;
}
.admin-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
}
.admin-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
.admin-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 2px 2px;
}
.admin-empty {
  color: var(--text-light);
  font-size: 0.88rem;
  text-align: center;
  padding: 32px 0;
}
.admin-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 10px;
}
.admin-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.admin-card-top strong {
  font-size: 0.92rem;
  color: var(--navy);
  line-height: 1.4;
}
.admin-status {
  flex-shrink: 0;
  font-size: 0.8rem;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.admin-line {
  display: flex;
  gap: 8px;
  font-size: 0.83rem;
  line-height: 1.6;
  margin-top: 4px;
}
.admin-line span {
  flex-shrink: 0;
  width: 60px;
  color: var(--text-light);
}
.admin-line p {
  margin: 0;
  color: var(--text-mid);
  white-space: pre-wrap;
}
.admin-when {
  font-size: 0.75rem;
  color: var(--text-light);
}
/* 날짜와 삭제 버튼을 한 줄에 두고 양끝으로 붙입니다. 삭제는 오른쪽 끝에 있어야
   실수로 누르기 어렵습니다. */
.admin-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.admin-row-delete {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.75rem;
  color: var(--text-light);
  cursor: pointer;
  flex-shrink: 0;
}
.admin-row-delete:hover { border-color: #b91c1c; color: #b91c1c; }
.admin-row-delete:disabled { opacity: 0.5; cursor: default; }

/* ---- 전체 데이터 백업 ---- */
.admin-backup {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}
.admin-backup-note {
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-light);
}
.admin-backup-note strong { color: var(--orange); }

/* ===================== 공고 본문 서식 =====================
   등록자가 쓴 글이 그대로 살아나는 자리입니다. 여백을 넉넉히 두는 이유는,
   카톡에서 붙여넣은 글이 대체로 짧은 줄이 여러 개 이어지는 형태라
   줄 간격이 좁으면 한 덩어리로 뭉쳐 보이기 때문입니다. */
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child { margin-bottom: 0; }

.rich-text p {
  margin: 0 0 10px;
  line-height: 1.85;
  /* 붙여넣은 글에 아주 긴 단어나 주소가 섞여도 칸을 밀고 나가지 않게 합니다. */
  overflow-wrap: break-word;
}

.rich-text h4,
.rich-text h5 {
  margin: 18px 0 8px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
}
.rich-text h4 { font-size: 1rem; }
.rich-text h5 { font-size: 0.92rem; }

/* 사이트 전체에서 목록 기호를 없애고 있어(reset), 본문 안에서는 되살립니다.
   기호가 없으면 목록인지 그냥 들여쓴 문단인지 구분되지 않습니다. */
.rich-text ul,
.rich-text ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { list-style: inherit; }
.rich-text li {
  margin-bottom: 6px;
  line-height: 1.8;
  overflow-wrap: break-word;
}

.rich-text strong { font-weight: 700; color: var(--text-dark); }
.rich-text em { font-style: italic; }

.rich-text code {
  padding: 2px 6px;
  background: #f1f5f9;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: inherit;
  color: var(--navy);
}

.rich-text hr {
  margin: 16px 0;
  border: none;
  border-top: 1px solid var(--border-color);
}

/* ===================== 작성 미리보기 =====================
   등록 화면에서 쓰는 즉시 결과를 보여줍니다. 올리고 나서 깨진 걸 발견하면
   PIN을 찾아 다시 들어와 고쳐야 하는데, 그 단계에서 대부분 포기합니다. */
.md-preview {
  margin-top: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--text-mid);
  min-height: 48px;
}
.md-preview-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-light);
}
.md-preview-empty { color: var(--text-light); font-size: 0.82rem; }

/* 쓸 수 있는 서식 안내. 접어두면 아무도 안 펴보므로 늘 보이게 둡니다. */
.md-help {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-light);
}
.md-help code {
  padding: 1px 5px;
  background: #f1f5f9;
  border-radius: 3px;
  color: var(--navy);
  font-family: inherit;
}

/* ===================== 공시이율 표 =====================
   숫자를 비교하러 오는 화면이라, 이율 칸이 가장 먼저 읽히게 크기와 굵기를 줍니다.
   상품명은 길어서 왼쪽에 두면 이율이 오른쪽으로 밀려나므로 맨 끝에 둡니다. */
/* 보험사 고르기 · 정렬 줄. 표 바로 위에 붙여둡니다.
   위쪽 board-toolbar(생보/손보 버튼)와 표 사이에 끼우는 이유는, 여기서 고른
   내용이 아래 표에만 영향을 준다는 게 위치만으로 읽히기 때문입니다. */
.rates-controls {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0 16px;
}
/* 건수는 오른쪽 끝으로 밀어둡니다. 고르는 것이 아니라 결과를 알려주는 값이라
   선택 상자들과 같은 줄에 붙어 있으면 그것도 눌러야 하는 것처럼 보입니다. */
.rates-count {
  margin: 0 0 9px auto;
  font-size: 0.8rem;
  color: var(--text-light);
}
@media (max-width: 768px) {
  .rates-controls { gap: 10px; }
  .rates-controls .select-group { flex: 1 1 140px; }
  .rates-controls .select-group select { min-width: 0; width: 100%; }
  .rates-count { flex-basis: 100%; margin: 0; }
}

.rates-wrap {
  /* 좁은 화면에서 표가 페이지를 밀지 않고 표 안에서만 스크롤되게 합니다. */
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}
.rates-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.rates-table th,
.rates-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
}
.rates-table th {
  background: #f8fafc;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-mid);
  position: sticky;
  top: 0;
}
.rates-table tbody tr:last-child td { border-bottom: none; }
.rates-table tbody tr:hover { background: #fafbfc; }

.rates-num { text-align: right; }
.rates-company { font-weight: 700; color: var(--text-dark); }

/* 이 화면을 보러 온 이유. 가장 크고 진하게 둡니다. */
.rates-value {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--navy);
}

/* 상품명은 참고 정보라 한 칸 낮춥니다. 길면 줄여서 표가 무너지지 않게 합니다. */
.rates-product {
  font-size: 0.8rem;
  color: var(--text-light);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rates-sector {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
}
.rates-sector-life { background: #e8f0fe; color: #1d4ed8; }
.rates-sector-nonlife { background: #e2f7f5; color: #0f766e; }
.rates-sector-var { background: #f3e8ff; color: #7c3aed; }

/* ---- 변액 전용 ----
   변액에는 회사별 공시이율이 없습니다. 모두에게 같은 평균공시이율을 적용해
   계산한 예상수익률을 보여주므로, 그 사실을 표 위에 눈에 띄게 붙여둡니다.
   이 안내가 눈에 안 들어오면 수익률을 펀드 성적으로 오해합니다. */
.rates-variable-note {
  margin: 12px 0 4px;
  padding: 14px 16px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-left: 3px solid #7c3aed;
  border-radius: 8px;
}
/* "예상치"라는 사실은 한 번 더, 더 세게 말합니다. 이 숫자를 확정 수익으로
   옮겨 적으면 나중에 고객 항의로 돌아오고, 그건 사이트가 아니라 설계사가
   뒤집어씁니다. 색과 아이콘을 경고로 두는 이유입니다. */
.rates-vn-warn {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e9d5ff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.6;
  color: #b45309;
}
.rates-vn-warn i { margin-right: 4px; }
.rates-vn-warn strong { color: #b45309; text-decoration: underline; }

.rates-vn-head {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--text-dark);
}
.rates-vn-head i { color: #7c3aed; margin-right: 4px; }
.rates-vn-head strong { color: #6b21a8; }
.rates-vn-sub {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-mid);
}

/* 유지기간 버튼. 기간에 따라 순위가 실제로 바뀌므로 바꿔볼 수 있어야 합니다. */
.rates-period {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
}
.rates-period-label {
  margin-right: 4px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-mid);
}
.rates-pbtn {
  padding: 5px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-mid);
  background: #fff;
  border: 1px solid #e9d5ff;
  border-radius: 14px;
  cursor: pointer;
}
.rates-pbtn:hover { border-color: #a855f7; }
.rates-pbtn.active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

/* 묶음 머리줄. 일시납과 월납은 수익률 수준이 통째로 달라 반드시 나눠야 합니다. */
.rates-group td {
  background: #f8fafc;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark);
  padding-top: 10px;
  padding-bottom: 10px;
}
.rates-group-count {
  margin-left: 6px;
  font-weight: 600;
  color: var(--text-light);
}
/* 평균공시이율은 모든 줄이 같은 값이라 눈에 띌 이유가 없습니다. 참고용으로만
   남기고 흐리게 둡니다. 진하게 두면 이게 회사별 이율인 줄 압니다. */
.rates-avg-cell { color: var(--text-light); font-size: 0.8rem; }

/* 오른 것은 빨강, 내린 것은 파랑. 금융에서 굳어진 방향이라 반대로 쓰면
   숫자를 읽기도 전에 잘못 이해합니다. */
.rates-up { color: #dc2626; font-weight: 700; }
.rates-down { color: #2563eb; font-weight: 700; }
.rates-flat { color: var(--text-light); }

.rates-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light);
  font-size: 0.88rem;
}

/* 생보와 손보는 이율 수준 자체가 달라(손보가 대체로 낮습니다) 섞어 놓으면
   비교가 안 됩니다. 나눠 보는 버튼입니다. */
.rates-filter { display: flex; gap: 4px; }
/* display를 지정해두면 hidden 속성만으로는 안 감춰집니다. 변액수익률 화면에서
   생보/손보 버튼을 감추려면 이 줄이 있어야 합니다. */
.rates-filter[hidden] { display: none; }
.rates-tab {
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-mid);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
}
.rates-tab:hover { border-color: var(--navy-light); }
.rates-tab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* 출처 표기. 남의 자료를 쓰고 있으므로 어디 것인지 밝힙니다. */
.rates-source {
  margin: 12px 2px 0;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-light);
}

/* ===================== 보험료 비교 =====================
   공시이율은 숫자 하나짜리라 표가 맞았지만, 여기는 상품 하나에 담보가 대여섯
   개씩 딸려 있습니다. 표로 만들면 가로로 한없이 밀려 휴대폰에서 아무것도 안
   보입니다. 그래서 상품을 카드 한 장으로 두고 담보는 눌렀을 때 폅니다. */

/* 성격을 못박는 안내. 표 아래 각주로 두면 아무도 안 읽고 그대로 상담에 들고
   나갑니다(변액 화면에서 배운 것과 같습니다). 그래서 목록보다 위에 둡니다. */
.prem-note {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 3px solid var(--orange);
  border-radius: 8px;
}
.prem-note-warn {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #fed7aa;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.6;
  color: #b45309;
}
.prem-note-warn i { margin-right: 4px; }
.prem-note-warn strong { color: #b45309; text-decoration: underline; }
.prem-note-sub {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-mid);
}
.prem-note-sub strong { color: var(--text-dark); }

/* 근거는 접어둡니다. 펼침 표시는 브라우저 기본 삼각형이 운영체제마다 달라
   보여서 직접 붙입니다. 접힌 채로도 "눌러서 볼 것이 있다"가 보여야 합니다. */
.prem-note-more summary {
  font-size: 0.8rem;
  font-weight: 700;
  color: #b45309;
  cursor: pointer;
  list-style: none;
}
.prem-note-more summary::-webkit-details-marker { display: none; }
.prem-note-more summary::after {
  content: '\f078';                      /* chevron-down */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.62rem;
  margin-left: 6px;
}
.prem-note-more[open] summary::after { content: '\f077'; }   /* chevron-up */
.prem-note-more[open] summary { margin-bottom: 8px; }

/* 생보/손보 가르기. 종목 탭보다 위에 두어 "먼저 고르는 것"임을 위치로
   알립니다. 종목 탭과 생김새를 다르게 해야 두 줄이 같은 것으로 안 보입니다. */
.prem-sectors {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
}
.prem-sector {
  padding: 9px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-light);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
}
.prem-sector:hover { color: var(--text-mid); }
.prem-sector.active {
  color: var(--blue-accent);
  border-bottom-color: var(--blue-accent);
}

/* 보험가격지수. 생보에만 있고, 협회가 평균을 100에 맞춰 계산한 값이라
   회사끼리 그대로 견줄 수 있습니다. 그래서 이것만 카드 겉면에 둡니다. */
.prem-pidx {
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: help;
}
.prem-pidx-low { color: #15803d; background: var(--green-bg); }
.prem-pidx-mid { color: var(--text-mid); background: var(--bg-light); }
.prem-pidx-high { color: #b45309; background: #fef3c7; }

.prem-kind {
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-light);
}
.prem-cover-note {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-light);
}

/* 종목 탭. 열두 개라 줄바꿈하면 두세 줄을 차지해 화면 위쪽을 다 먹습니다.
   가로로 미는 편이 낫습니다. 스크롤 막대는 감추되 밀리기는 하게 둡니다. */
.prem-types {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 4px;
  scrollbar-width: none;
}
.prem-types::-webkit-scrollbar { display: none; }
.prem-type {
  flex: 0 0 auto;
  padding: 8px 15px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-mid);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  white-space: nowrap;
}
.prem-type:hover { border-color: var(--navy-light); }
.prem-type.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.prem-controls { padding-top: 4px; }

/* 검색창. 종목 하나에 상품이 수백 개라(상해 768개) 눈으로 훑어 찾는 것은
   사실상 불가능합니다. 고르는 상자들보다 위에 두어 먼저 눈에 띄게 합니다. */
.prem-search-wrap {
  position: relative;
  margin: 4px 0 2px;
}
.prem-search-wrap i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  font-size: 0.82rem;
  pointer-events: none;
}
.prem-search-wrap input {
  width: 100%;
  padding: 10px 14px 10px 34px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text-dark);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.prem-search-wrap input:focus {
  outline: none;
  border-color: var(--blue-accent);
}
.prem-search-wrap input::placeholder { color: var(--text-light); }

.prem-list { display: flex; flex-direction: column; gap: 10px; }

.prem-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
}
.prem-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.prem-card-title { min-width: 0; }
.prem-card-title .prem-company {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-accent);
  margin-bottom: 3px;
}
.prem-card-title h3 {
  margin: 0 0 7px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-dark);
}

.prem-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.prem-tag {
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-mid);
  background: var(--bg-light);
  border-radius: 10px;
}
/* 갱신형은 지금 싼 대신 나중에 오릅니다. 보험료 옆에서 눈에 띄지 않으면
   "여기가 제일 싸다"는 잘못된 결론이 그대로 나갑니다. */
.prem-tag-renew { color: #b45309; background: #fef3c7; }
/* 달러 상품. 이 표시가 없으면 '248달러'를 흘려 읽고 원화 상품 사이에서
   유난히 싼 상품으로 오해합니다(실제로는 30만원대입니다). */
.prem-tag-usd { color: #1d4ed8; background: var(--blue-bg); }
.prem-tag-fixed { color: #15803d; background: var(--green-bg); }
/* 보장범위지수. 회사마다 척도가 달라 그대로 견주면 안 되는 값이라, 보험료
   옆이 아니라 상세 안쪽에 단서와 함께 둡니다. */
.prem-idx-note {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-radius: 7px;
}
.prem-idx-note p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--text-mid);
}
.prem-idx-note p > strong { color: #6b21a8; font-size: 0.85rem; }
.prem-idx-warn { color: #b45309; }
.prem-idx-warn strong { color: #b45309; }

/* 보험료는 이 화면에서 가장 먼저 읽혀야 하는 숫자입니다. */
.prem-card-bill {
  flex: 0 0 auto;
  text-align: right;
  line-height: 1.3;
}
.prem-bill-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-light);
}
.prem-bill {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
}
.prem-bill-unit { font-size: 0.7rem; color: var(--text-light); }

/* 가입금액. 보험료 바로 아래에 붙습니다.
   이게 없으면 "KB 1,875원 vs 메리츠 54,971원"이 스물아홉 배 차이로 읽히는데,
   실제로는 보장이 100만원 대 1,000만원입니다. 보험료와 떼어놓으면 안 됩니다. */
.prem-coverage {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--border-color);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-mid);
}
.prem-coverage em {
  font-style: normal;
  font-weight: 800;
  color: var(--blue-accent);
}
.prem-coverage-name {
  display: block;
  color: var(--text-light);
}
.prem-coverage-unknown { color: var(--text-light); }

.prem-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--border-color);
}
.prem-toggle {
  padding: 5px 11px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 13px;
  cursor: pointer;
}
.prem-toggle i { margin-left: 3px; font-size: 0.66rem; transition: transform 0.15s; }
.prem-toggle.open i { transform: rotate(180deg); }
.prem-min, .prem-tel { font-size: 0.74rem; color: var(--text-light); }
.prem-link {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue-accent);
  text-decoration: none;
}
.prem-link:hover { text-decoration: underline; }

.prem-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
}
.prem-detail h4 {
  margin: 0 0 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark);
}
/* 조건이 상품마다 다릅니다. 이걸 안 보고 보험료만 견주면 비교가 성립하지
   않으므로, 담보보다 위에 두고 눈에 띄는 바탕을 줍니다. */
.prem-basis {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-light);
  border-radius: 7px;
}
.prem-basis ul { margin: 0; padding-left: 16px; }
.prem-basis li {
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--text-mid);
}

.prem-covers { overflow-x: auto; }
.prem-cover-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.76rem;
}
.prem-cover-table th {
  padding: 7px 9px;
  text-align: left;
  font-weight: 700;
  color: var(--text-mid);
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.prem-cover-table td {
  padding: 7px 9px;
  line-height: 1.55;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}
.prem-cover-table tr:last-child td { border-bottom: none; }
/* 가입금액이라고 늘 숫자인 것은 아닙니다. '보험가입금액(수술1회당)'처럼
   문장이 들어오는 회사가 많아 오른쪽 정렬하면 들쭉날쭉해 보입니다. */
.prem-amount { color: var(--text-mid); }
/* 지급사유는 한 문장이 길어 가만두면 이 칸이 표를 다 차지합니다. */
.prem-reason { color: var(--text-mid); max-width: 380px; }

@media (max-width: 768px) {
  /* 좁은 화면에서는 보험료를 상품명 아래로 내립니다. 옆에 붙여두면 상품명이
     두세 글자씩 끊겨 무슨 상품인지 못 읽습니다. */
  .prem-card-top { flex-direction: column; gap: 10px; }
  .prem-card-bill { text-align: left; }
  .prem-bill { font-size: 1.25rem; }
  .prem-link { margin-left: 0; }
}

/* ===================== 준비 중 화면 =====================
   메뉴만 있고 안이 비어 있으면 고장난 사이트로 보입니다. 무엇을 준비하는지
   구체적으로 적어야 "다음에 다시 와볼 곳"이 됩니다. */
.coming-soon {
  max-width: 560px;
  margin: 40px auto;
  padding: 40px 28px;
  text-align: center;
  background: #f8fafc;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
}
.coming-soon-icon {
  font-size: 2rem;
  color: var(--navy-light);
  margin-bottom: 14px;
}
.coming-soon h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
}
.coming-soon p {
  margin: 0 0 18px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-mid);
}
.coming-soon-list {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.coming-soon-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 0.86rem;
  color: var(--text-mid);
}
.coming-soon-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--navy-light);
  font-size: 0.75rem;
}

/* ===================== 오픈카톡방 ===================== */
/* 카카오 노란색을 그대로 씁니다. 카톡으로 넘어간다는 사실이 누르기 전에
   전달돼야, 눌렀을 때 앱이 열리는 것이 놀랍지 않습니다. */
.openchat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-radius: 12px;
}
.openchat-text h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #78350f;
}
.openchat-text p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #92400e;
}
.openchat-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 20px;
  background: #fee500;
  color: #191600;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.18s ease;
}
.openchat-btn:hover { background: #fada0a; transform: translateY(-1px); }

/* 링크가 아직 없을 때. 누를 수 없다는 사실이 보여야 눌러보고 실망하지 않습니다. */
.openchat-btn.disabled {
  background: #e5e7eb;
  color: var(--text-light);
  cursor: default;
  pointer-events: none;
}

/* ===================== 교육과정 안내창 ===================== */
.edu-box { text-align: center; max-width: 460px; }
.edu-icon {
  font-size: 2.2rem;
  color: var(--navy-light);
  margin-bottom: 14px;
}
.edu-title {
  margin: 0 0 14px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
}
.edu-desc {
  margin: 0 0 22px;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--text-mid);
  text-align: left;
}

/* 승급 경로. 준비 중이라는 말보다 이 그림이 더 많은 것을 설명합니다. */
.edu-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.edu-path > i { color: var(--text-light); font-size: 0.75rem; }
.edu-step {
  flex: 1;
  padding: 12px 8px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-mid);
}
.edu-step span {
  display: block;
  margin: 0 auto 6px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  background: var(--border-color);
  color: #fff;
  font-size: 0.72rem;
}
/* 지금 계신 자리. 여기서 시작한다는 것이 보여야 다음 칸이 목표로 읽힙니다. */
.edu-step.done {
  background: #eef2ff;
  border-color: var(--navy-light);
  color: var(--navy);
}
.edu-step.done span { background: var(--navy); }

.edu-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-light);
}

/* ---- 자동 백업 기록 ----
   목록이 길어질 수 있어 접히지 않고 스스로 스크롤되게 둡니다. 관리자가
   평소에 볼 것은 맨 위 한 줄(마지막 백업이 언제였나)뿐입니다. */
.admin-snapshots {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  max-height: 180px;
  overflow-y: auto;
}
.admin-snapshot-title {
  margin: 0 0 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-mid);
}
.admin-snapshot-empty {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-light);
}
.admin-snapshot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.76rem;
  color: var(--text-mid);
  border-bottom: 1px solid #f1f5f9;
}
.admin-snapshot-row:last-child { border-bottom: none; }
.admin-snapshot-row a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.admin-snapshot-row a:hover { text-decoration: underline; }

/* ---- 영업 장부 ---- */
/* 목록 맨 위에 "몇 건 남았는지"를 먼저 보여줍니다. 장부를 여는 이유가 그것입니다. */
.admin-summary {
  margin: 0 0 10px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text-mid);
}
.admin-tag-closed {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eee;
  color: var(--text-light);
  font-size: 0.7rem;
  font-weight: 500;
  vertical-align: middle;
}
/* 전화번호는 눌러서 바로 걸 수 있게 링크로 둡니다. */
.admin-line a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}
.admin-line a:hover { text-decoration: underline; }
.sales-memo {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 0.83rem;
  font-family: inherit;
  color: var(--text-mid);
}
.sales-memo:focus {
  outline: none;
  border-color: var(--navy);
}

/* ===================== 푸터 ===================== */
.site-footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,0.75);
  padding: 44px 0 0;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}
.footer-logo {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
}
.footer-logo span { color: #fb923c; }
.footer-about p { font-size: 0.85rem; line-height: 1.7; max-width: 320px; }
.footer-col h6 {
  color: #fff;
  font-size: 0.92rem;
  margin: 0 0 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li { font-size: 0.83rem; }
.footer-col ul li i { margin-right: 6px; width: 14px; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom {
  margin-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 18px 24px;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
}
/* 배포 버전 확인용 표시 - 배포 후 이 값이 바뀌었는지로 최신 코드 반영 여부를 확인합니다 */
.build-info {
  margin-top: 6px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.03em;
}

/* ===================== 반응형 ===================== */
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .header-actions { display: none; }
  .mobile-menu-btn { display: block; }
  .header-actions-mobile.open { display: flex; }
  .brand-area { flex-direction: column; align-items: flex-start; gap: 6px; }
  .catchphrase { font-size: 0.75rem; }

  /* 좁은 화면에서는 안내 띠의 두 줄이 각각 세 줄까지 늘어납니다.
     글자만 줄이면 답답해 보여서 줄간격을 함께 넓힙니다. */
  .anon-banner-inner { padding: 14px 16px; }
  .anon-headline { font-size: 1rem; line-height: 1.45; }
  .anon-note { font-size: 0.78rem; line-height: 1.55; }

  .filter-section { top: 0; }
  .filter-accordion-toggle { display: flex; }
  .filter-body {
    display: none;
    margin-top: 14px;
  }
  .filter-body.open { display: block; }
  .filter-row.filter-selects { flex-direction: column; align-items: stretch; gap: 12px; }
  .select-group select { width: 100%; }

  .promo-banner { flex-direction: column; text-align: center; }
  .promo-text { text-align: center; }

  .board-tabs-section { padding: 16px 0 20px; }
  /* 좁은 화면에서는 메뉴가 옆으로 밀리며 스크롤됩니다(.site-nav-inner).
     글자 크기와 여백만 줄여 손가락으로 누를 수 있는 크기는 지킵니다. */
  .site-nav-inner { padding: 10px 16px; gap: 8px; }
  .nav-item { padding: 9px 11px; font-size: 0.85rem; }

  .openchat-card { flex-direction: column; align-items: stretch; text-align: center; }
  .openchat-btn { justify-content: center; }
  .edu-path { flex-direction: column; gap: 8px; }
  .edu-path > i { transform: rotate(90deg); }
  .board-headline h1 { font-size: 1.25rem; }
  .board-sub { font-size: 0.76rem; }
  .board-toolbar { align-items: flex-start; }

  .job-card-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

  .modal-box { padding: 24px 18px; }

  .footer-inner { grid-template-columns: 1fr; }

  .list-header { align-items: flex-start; }
  .list-header-right { width: 100%; justify-content: space-between; }
  .site-toast { bottom: 20px; padding: 10px 18px; font-size: 0.8rem; white-space: normal; }
}

@media (max-width: 480px) {
  .header-inner { padding: 12px 16px; }
  .content-inner { padding: 0 16px; }
  .job-card { padding: 16px; }
  .search-submit-btn { width: 30px; height: 30px; }
  .btn-refresh span { display: none; }
  .board-tabs-inner { padding: 0 16px; }
  .board-tab { font-size: 0.85rem; padding: 11px 6px; }
}

/* ===================== 회사별 정착률 ===================== */
/* 표는 rates-table을 그대로 씁니다. 다른 점은 회사명 칸이 <th scope="row">라는
   것뿐인데, 그러면 머리글 스타일(회색 배경·sticky)이 몸통 줄까지 따라옵니다.
   그래서 몸통의 th만 되돌려 놓습니다. */
/* 칸이 둘뿐이라 다른 표들만큼 넓힐 이유가 없습니다. 휴대폰에서 가로로
   밀지 않고 그대로 다 보이는 폭입니다. */
.setl-table { min-width: 0; }
.setl-table tbody th {
  background: transparent;
  position: static;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-dark);
}

/* 평균 줄. 회사마다 '평균보다 낮음' 같은 딱지를 붙이는 대신 이 줄 하나를 위에
   놓아 스스로 견주게 합니다(js/settlement.js 첫머리 2번 참고).
   회사 줄과 확실히 구분되어야 자기 회사를 이 줄에 견줄 수 있습니다. */
.setl-avg,
.setl-avg:hover { background: #f4f7fb; }
.setl-avg th,
.setl-avg td {
  border-bottom: 2px solid var(--border-color);
  color: var(--navy);
  font-weight: 800;
}
.setl-avg th { color: var(--navy); }

/* 숫자는 이 화면을 보러 온 이유라 크게 둡니다. */
.setl-table td.rates-num {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
}
/* %는 숫자를 읽는 데 방해가 되지 않게 한 단계 낮춥니다. */
.setl-pct {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-light);
  margin-left: 1px;
}
/* ⚠️ 값이 없는 회사(전속 조직이 없는 곳)입니다. 0%처럼 보이면 안 됩니다.
   그래서 숫자와 다른 색·다른 굵기로 흐리게 둡니다. */
.setl-none {
  color: var(--text-light);
  font-weight: 500;
  cursor: help;
  border-bottom: 1px dotted var(--border-color);
}

@media (max-width: 640px) {
  .setl-table { font-size: 0.82rem; }
  .setl-table th,
  .setl-table td { padding: 10px 8px; }
  .setl-table td.rates-num { font-size: 0.92rem; }
}