/* Figma 디자인시스템(LpuVM0M1QioXgytnCU9ulA) "Style Guide" 프레임(node 2:27211,
   프리랜서 경력증명시스템 — Design Style Guide, 본 프로젝트 전용) 토큰 반영:
   brand-primary #066bfd, text-heading #111111, border-subtle #d7dce5, radius/md 12px, font Inter */
:root {
  --navy-900: #0d162f; /* Figma navy/900 (bg-footer) */
  --navy-800: #1a2e5c; /* Figma navy/700 */
  --navy-700: #284586; /* Figma navy/500 (bg-hero) */
  --blue-600: #066bfd; /* Figma color-brand-primary */
  --blue-500: #2d67ff; /* Figma color-brand-primary-focus / border / text / accent */
  --blue-50: #eaf2ff; /* Figma blue/100 */
  --bg: #f6f8fb; /* Figma color-bg-surface-soft */
  --surface: #ffffff; /* Figma color-bg-page */
  --line: #d7dce5; /* Figma color-border-subtle */
  --text-900: #111111; /* Figma color-text-heading */
  --text-700: #333333; /* Figma color-text-body */
  --text-500: #666666; /* Figma color-text-secondary */
  --text-400: #767676; /* Figma color-text-muted */
  --green: #00bf5f; /* Figma color-status-success */
  --green-bg: #eaf9f0; /* Figma color-status-success-bg */
  --red: #d92d20; /* Figma color-status-danger */
  --red-bg: #fdebec; /* Figma color-status-danger-bg */
  --amber: #ff9632; /* Figma color-status-warning */
  --amber-bg: #fff4ed; /* Figma color-status-warning-bg */
  --purple: #6250f0; /* Figma color-status-reviewing */
  --purple-bg: #edeafd; /* Figma color-status-reviewing-bg */
  --info: #3e6fdf; /* Figma color-status-info */
  --info-bg: #e8eefc; /* Figma color-status-info-bg */
  --gray-bg: #f5f5f9; /* Figma color-bg-surface-alt */
  --radius: 12px; /* Figma radius/md */
  --radius-xs: 4px; /* Figma radius/xs */
  --radius-sm: 8px; /* Figma radius/sm */
  --radius-lg: 16px; /* Figma radius/lg */
  --radius-xl: 28px; /* Figma radius/xl */
  --radius-pill: 100px; /* Figma radius/pill */
  --radius-full: 9999px; /* Figma radius/full */
  --shadow:
    0 1px 2px rgba(13, 22, 47, 0.05), 0 0 5px rgba(21, 29, 54, 0.12); /* Figma shadow/floating-btn 기반 */
  /* 파일 전역에서 참조만 되고 정의가 없던 토큰 보강 (Figma border/default, primary/default, text/heading 등과 일치) */
  --color-border: #d8dce4;
  --color-border-divider: #e9eef8;
  --color-gray-900: #111111;
  --color-primary: #2d65f2;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-22: 22px;
  --color-mentor-card-bg: #eaf0fe;
  --color-mentor-card-border: #abc3fb;
  --color-gray-700: #333333;
  /* Figma color-footer-* (layout.css와 동일 값, mockup.css 단독 로드 페이지용 보강) */
  --color-footer-bg: #0d162f;
  --color-footer-border: #31394e;
  --color-footer-text: #b9babe;
  --color-footer-value: #787b84;
  --color-footer-border-mobile: #293045;
  --color-footer-title-mobile: #e4e4e4;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
}
img {
  max-width: 100%;
}
#wrapper {
  width: 100%;
  position: relative;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Header / Topbar — Figma "Header / Type=White, Device=PC" 스펙 (node 2293:3977) 반영 ---------- */
header.topbar {
  background: var(--color-white, #fff);
  color: var(--color-gray-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.2px;
}
.brand .mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.brand small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-gray-500, #666);
  letter-spacing: 0;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--font-size-14);
  color: var(--color-gray-700);
}
.icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-50, #f6f8fb);
  color: var(--color-gray-900);
  cursor: pointer;
}
.icon-btn .dot {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6b5c;
  border: 1.5px solid var(--color-white, #fff);
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 20px;
  background: var(--color-gray-50, #f6f8fb);
  color: var(--color-gray-700);
  cursor: pointer;
}
.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.admin-tag {
  background: var(--blue-600);
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 5px;
  margin-left: 8px;
}

/* ---------- Page head ---------- */
.page-head {
  display: block;
  padding: 24px 32px 0;
}
.crumb {
  display: none;
}
.crumb b {
  color: var(--text-500);
  font-weight: 500;
}
.crumb--nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
.crumb-current {
  font-weight: 500;
}
.title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.title-row h1 {
  font-size: 26px;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0;
} /* Figma Heading/H1 · 26 Bold */
.screen-tag {
  display: none;
}
.page-desc {
  color: #666;
  font-size: 16px;
  margin: 4px 0 0;
  line-height: 1.5;
}
/* 모바일 - page-head(제목/설명) 공통: 웹 26px 타이틀이 좁은 화면에서 과도하게 크고,
   상단 여백도 불필요하게 넓어서 축소 (page-head를 쓰는 모든 페이지 공통 적용) */
@media (max-width: 744px) {
  .content-area .page-head {
    padding: 0 0 12px;
  }
  .content-area .page-head + main {
    padding-top: var(--spacing-md);
  }
  .title-row h1 {
    font-size: 20px;
  }
  .page-desc {
    font-size: 14px;
  }
}
/* Figma Section Header(2293:4497, Type=TitleOnly) - #tabset1-0 카드 내부 타이틀 (FR-MY-002 나의 정보, node 2620:15444) */
.form-card__head {
  border-bottom: 1px solid var(--color-border-strong);
  padding: var(--spacing-lg) 0 var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}
.form-card__head h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-heading);
  line-height: 1.4;
  margin: 0;
}
.scope-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.scope-tag.phase2 {
  background: var(--purple-bg);
  color: var(--purple);
}
.scope-tag.pending {
  background: var(--gray-bg);
  color: var(--text-500);
}
.scope-tag.proposal {
  background: var(--amber-bg);
  color: var(--amber);
}

main {
  padding: 0 32px 48px;
}

/* ---------- Cards / layout grid ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}
.card + .card {
  margin-top: 16px;
}
.card h3 {
  margin: 0 0 4px;
  font-size: 15px;
}
.card .hint {
  font-size: 12px;
  color: var(--text-400);
  margin: 0 0 16px;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.link-more {
  font-size: 12.5px;
  color: var(--blue-600);
  font-weight: 600;
}

/* Figma form-card(node 2472:12009) 레이아웃 - 증명서 발급 신청 STEP 헤더/본문 영역
   FR-CT-001 1~3단계 공통. `.timeline` 바로 뒤에 오는 STEP 헤더만 대상으로 잡아서
   다른 페이지의 일반 .card-head 에는 영향을 주지 않는다.
   요소 간 간격은 HTML 유틸 클래스(mt-22 / mt-16 / mt-12)나 인라인 style 대신
   표준 spacing 토큰(--spacing-xl 24px 등)으로만 지정한다. */
/* Title/Section: 하단 구분선 + 26px Bold */
.timeline + .card-head {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
  margin-top: var(--spacing-xl);
  margin-bottom: 0;
  padding: var(--spacing-lg) 0 var(--spacing-md);
  border-bottom: 1px solid var(--color-border-strong);
}
.timeline + .card-head h3 {
  margin: 0;
  font-size: var(--font-size-26);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}
/* Figma "Frame416"(2522:8429) 타이틀 스펙(구분선 없음, 20px) - 증명서 발급 신청 1~3단계(FR-CT-001)
   card-head에 공통 적용. 다른 화면(FR-VR-004 등)은 기존 .timeline + .card-head(26px+구분선)를 그대로 쓰므로
   전역 규칙은 안 건드리고 이 모디파이어를 쓰는 곳에만 재정의 */
.timeline + .card-head.card-head--preview {
  padding: var(--spacing-md) 0 0;
  border-bottom: none;
}
.timeline + .card-head.card-head--preview h3 {
  font-size: var(--font-size-heading-h3);
}
/* STEP 본문(카드/표) 공통 상단 간격 */
.timeline + .card-head + .card,
.timeline + .card-head + .table-wrap {
  margin-top: var(--spacing-xl);
}
/* 입력 폼 본문(2단계): 카드 박스 제거 후 24px 세로 스택
   3단계 미리보기 카드는 .form-grid 가 없으므로 카드 박스를 그대로 유지한다 */
.timeline + .card-head + .card:has(.form-grid) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.timeline + .card-head + .card .form-grid {
  gap: var(--spacing-xl);
}
/* Form Field: 라벨-입력 8px, 필드 사이 간격은 form-grid gap 이 담당 */
.timeline + .card-head + .card .form-row {
  gap: var(--spacing-xs);
  margin-bottom: 0;
}
.timeline + .card-head + .card .form-row label {
  padding: 0 var(--spacing-3xs);
  font-size: var(--font-size-15);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}
.timeline + .card-head + .card .form-row label .req {
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: var(--line-height-snug);
}
.timeline + .card-head + .card .form-row .radio-row label,
.timeline + .card-head + .card .form-row .checkbox-row label {
  padding: 0;
  font-size: var(--font-size-16);
  color: var(--color-text-body);
}
.timeline
  + .card-head
  + .card
  .form-row
  input:not([type="radio"]):not([type="checkbox"]),
.timeline + .card-head + .card .form-row select,
.timeline + .card-head + .card .form-row textarea {
  border-color: var(--color-border-default);
}
/* STEP 본문 뒤에 오는 안내 박스: mt-12 / inline margin-top 대체 */
.timeline ~ .alert-box {
  margin-top: var(--spacing-xl);
  margin-bottom: 0;
}

/* 모바일: STEP 타이틀 26px 는 과하다. 서브 헤더(.sub-visual__title)와 같은 18px 로 낮춘다 */
@media (max-width: 744px) {
  .timeline + .card-head {
    padding: var(--spacing-md) 0 var(--spacing-sm);
  }
  .timeline + .card-head h3 {
    font-size: var(--font-size-18);
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.stat-card .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.stat-card .label {
  font-size: 13px;
  color: var(--text-500);
  font-weight: 600;
}
.stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: none;
}
.stat-icon.blue {
  background: var(--blue-50);
  color: var(--blue-600);
}
.stat-icon.amber {
  background: var(--amber-bg);
  color: var(--amber);
}
.stat-icon.green {
  background: var(--green-bg);
  color: var(--green);
}
.stat-icon.red {
  background: var(--red-bg);
  color: var(--red);
}
/* .badge-purple(심의회부)와 짝이 되는 값이 빠져 있어 이 아이콘만 배경 없이 나왔다 */
.stat-icon.purple {
  background: var(--purple-bg);
  color: var(--purple);
}
.stat-card .num {
  font-size: 28px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.5px;
}
.stat-card .sub {
  font-size: 12px;
  color: var(--text-400);
  margin-top: 4px;
}

/* ---------- Welcome / banner ---------- */
.welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 20px;
}
.welcome h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}
.welcome p {
  margin: 0;
  font-size: 13px;
  color: #c7d3ea;
}

/* ---------- Empty state ---------- */
.empty-state {
  border: 1px dashed var(--line);
  background: #fafbfd;
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  color: var(--text-500);
}
.empty-state b {
  display: block;
  color: var(--text-700);
  margin-bottom: 10px;
  font-size: 14px;
}

/* ---------- Filter / search bar (Figma Filter Bar / Search, node 2144:1661 스펙으로 완전 교체) ---------- */
.filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--color-bg-filterbar, #ecedf2);
  border: 1px solid var(--color-border-divider);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.filterbar .form-row {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
  gap: var(--spacing-xs);
  margin-bottom: 0;
  max-width: none;
  align-self: flex-end;
}
/* 검색어 입력처럼 셀렉트보다 넓게 잡히는 칸 (Figma: 356.67px vs 215.11px = 약 1.66배) */
.filterbar .form-row.wide {
  flex-grow: 1.66;
  max-width: none;
}
.filterbar .form-row label {
  padding: 0 2px;
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--color-text-body);
  line-height: var(--line-height-base);
}

/* ---------- Search box (Figma Table 컴포넌트: Search + Primary Button > Input) ---------- */
.search-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 216px;
  max-width: 100%;
}
.search-box input {
  width: 100%;
  height: 32px;
  background: #fff;
  border: 1px solid #d8dae5;
  border-radius: 4px;
  padding: 0 12px 0 31px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-700);
}
.search-box input::placeholder {
  color: #8f95b2;
}
.search-box::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.0065 22.0065' fill='none'%3E%3Cpath d='M17.3669 15.8349L22.0065 20.4745L20.4745 22.0065L15.8349 17.3669C14.1666 18.7016 12.051 19.5 9.75 19.5C4.368 19.5 0 15.132 0 9.75C0 4.368 4.368 0 9.75 0C15.132 0 19.5 4.368 19.5 9.75C19.5 12.051 18.7016 14.1666 17.3669 15.8349ZM15.1934 15.031C16.5181 13.6658 17.3333 11.8036 17.3333 9.75C17.3333 5.56021 13.9398 2.16667 9.75 2.16667C5.56021 2.16667 2.16667 5.56021 2.16667 9.75C2.16667 13.9398 5.56021 17.3333 9.75 17.3333C11.8036 17.3333 13.6658 16.5181 15.031 15.1934L15.1934 15.031Z' fill='%238F95B2'/%3E%3C/svg%3E")
    no-repeat center / 12px 12px;
  pointer-events: none;
}
.filterbar .search-box {
  align-self: flex-end;
  margin-bottom: 0;
}

/* Figma Combo Select 컴포넌트(node 2:15904) 스펙: search-box에 caret-down 드롭다운 어포던스 추가 */
.search-box--combo input {
  padding-right: 34px;
}
.search-box--combo::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #f4f6fa
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 3.75' fill='none'%3E%3Cpath d='M6 0.375C6 0.165 5.835 0 5.625 0H0.375C0.165 0 0 0.165 0 0.375C0 0.4725 0.0375 0.555 0.0975 0.6225L2.7225 3.6225C2.79 3.6975 2.8875 3.75 3 3.75C3.1125 3.75 3.21 3.6975 3.2775 3.6225L5.9025 0.6225C5.9625 0.555 6 0.4725 6 0.375Z' fill='%238F95B2'/%3E%3C/svg%3E")
    no-repeat center / 6px 3.75px;
  pointer-events: none;
}

/* Figma Filter Bar Button 스펙(node 2144:1667 / 2623:18416)으로 완전 교체 (기존 .btn/.btn-sm/.btn-ghost 사이즈값 전부 무시) */
.filterbar .btn {
  align-self: flex-end;
  flex: none;
}
.filterbar .btn.btn-sm {
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-6);
  font-size: var(--font-size-15);
}
.filterbar .btn-primary {
  background: var(--color-primary);
  border: none;
  color: var(--color-white);
  font-weight: 600;
}
.filterbar .btn-primary:hover {
  background: var(--color-primary-hover);
}
.filterbar .btn-ghost,
.filterbar .btn-outline {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text-body);
  font-weight: 500;
}
/* btn-ghost(무채색 라인 버튼)는 Figma Neutral 스펙대로 hover에서 배경만 살짝 변하고 테두리·텍스트는 그대로 */
.filterbar .btn-ghost:hover {
  background: var(--color-bg-subtle);
}
.filterbar .btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
/* 리스트 행 액션 버튼용 .btn-outline 통일(Figma Button/Basic) 적용 대상 아님 - 기존 필터바 버튼 모양 그대로 고정 */
.filterbar .btn-outline {
  display: inline-block;
  height: auto;
  padding: 8px 14px;
  font-size: 12.5px;
  border-radius: var(--radius);
}
.filterbar .btn-outline:hover {
  background: var(--blue-50);
}

/* Figma Filter Bar Dropdown(field) 스펙(node 2144:1687)으로 완전 교체 (기존 .form-row select 사이즈/스타일 전부 무시) */
.filterbar .form-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 44px 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 16px center / 20px 20px;
  font-family: "Pretendard", sans-serif;
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-tertiary);
  cursor: pointer;
}
.filterbar .form-row select:hover {
  border-color: var(--color-primary);
}
.filterbar .form-row select:focus {
  outline: none;
  border-color: var(--color-primary);
  color: var(--color-text-heading);
}

/* filterbar 안 검색용 input[type=text] - select와 클래스 없이 섞여 쓰이면서 색상/높이가 어긋나던 부분을 select와 동일 스펙으로 통일 (모든 페이지 공통 적용) */
.filterbar .form-row input[type="text"] {
  height: 44px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-family: "Pretendard", sans-serif;
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-heading);
}
.filterbar .form-row input[type="text"]::placeholder {
  color: var(--color-text-tertiary);
}
.filterbar .form-row input[type="text"]:hover {
  border-color: var(--color-primary);
}
.filterbar .form-row input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* 모바일(744px 이하) - 전용 피그마 프레임 없음, 좁은 폭에서 안 깨지도록 세로 스택 처리 */
@media (max-width: 744px) {
  .filterbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }
  .filterbar .form-row {
    width: 100%;
    max-width: none;
  }
  .filterbar .btn.btn-sm {
    width: 100%;
    justify-content: center;
  }
  /* 검색어 칸(.form-row.wide)이 있는 필터바(일자리공고 목록 등)는
     Figma 모바일 프레임(node 2663:18736) 기준으로 셀렉트를 2개씩 한 줄에 배치한다 */
  .filterbar:has(.form-row.wide) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: var(--spacing-xs);
    row-gap: var(--spacing-sm);
  }
  .filterbar:has(.form-row.wide) .form-row {
    flex: 1 1 calc(50% - var(--spacing-2xs));
    width: auto;
  }
  .filterbar:has(.form-row.wide) .form-row.wide {
    flex-basis: 100%;
  }
}

/* Figma Title 컴포넌트(node 2:16331) 스펙: 페이지/섹션 헤더(제목+설명+CTA) */
.section-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 32px 0;
  font-family: "Pretendard", sans-serif;
}
.section-title__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
}
.section-title__heading {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #101840;
}
.section-title__desc {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #474d66;
}
.section-title__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.section-title .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  font-family: "Pretendard", sans-serif;
  box-sizing: border-box;
  cursor: pointer;
}
/* 이전엔 토큰 대신 임의 색상(#3366ff/#254edb)이 하드코딩돼 있어 다른 Primary 버튼과 색이 달랐음 —
   Figma Button/Basic Type=Primary 스펙(default #2d65f2 / hover #1f4fd1)에 맞춰 공통 토큰으로 통일 */
.section-title .btn-primary {
  background: var(--color-primary);
  border: none;
  color: #fff;
  font-weight: 600;
}
.section-title .btn-primary:hover {
  background: var(--color-primary-hover);
}
.section-title .btn-ghost,
.section-title .btn-outline {
  background: #fff;
  border: 1px solid #d8dae5;
  color: #696f8c;
  font-weight: 500;
}
/* btn-ghost(무채색 라인 버튼)는 Figma Neutral 스펙대로 hover에서 배경만 살짝 변하고 테두리·텍스트는 그대로 */
.section-title .btn-ghost:hover {
  background: var(--color-bg-subtle);
}
.section-title .btn-outline:hover {
  border-color: #3366ff;
  color: #3366ff;
}
.section-title .btn-ghost svg,
.section-title .btn-outline svg {
  width: 6px;
  height: 3.75px;
  display: block;
}
/* 리스트 행 액션 버튼용 .btn-outline 통일(Figma Button/Basic) 적용 대상 아님 - 기존 섹션 타이틀 버튼 모양 그대로 고정 */
.section-title .btn-outline {
  display: inline-block;
  height: auto;
  padding: 8px 14px;
  font-size: 12.5px;
  border-radius: var(--radius);
}

/* ---------- Buttons (Figma Button 컴포넌트, node 2633:21137 / 2633:21136 스펙 - 사이트 전체 공통 기준) ---------- */
.btn {
  height: 44px;
  border: none;
  border-radius: 6px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: "Pretendard", sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
} /* Style=Filled */
/* FR-JOB-004 지원하기/외부링크 이동 버튼 - Figma node 2716:20141 Actions 스펙:
   Button/Basic Primary + Line/external 아이콘(20x20) */
.job-detail__apply-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* Figma Button/Basic Type=Primary hover(node 2290:2940) = primary/hover #1f4fd1.
   --color-primary-alt(#3081fe)는 다른 토큰이라 잘못 쓰이고 있었음 */
.btn-primary:hover {
  background: var(--color-primary-hover);
}
/* Figma Button/Basic Type=Neutral(node 2290:2988~) 스펙: hover/pressed에서도 테두리·텍스트색은
   그대로 두고 배경만 변한다 — 파란색으로 바뀌면 안 됨(Neutral과 Secondary 타입을 혼동하면 안 됨) */
.btn-ghost {
  background: var(--color-white);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-heading);
}
.btn-ghost:hover {
  background: var(--color-bg-subtle);
}
.btn-ghost:active {
  background: var(--color-bg-muted);
}
.btn-danger {
  background: var(--red);
  color: #fff;
}
/* Figma Button/Text Type=Primary·Size=md(node 2290:3049, Hover=2290:3065) - 배경/테두리 없는
   텍스트 버튼. 기존 .btn 베이스(height:44px 등)와 안 맞아 독립 클래스로 분리 */
.btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs) var(--spacing-2xs);
  border: none;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--color-primary);
  font-family: "Pretendard", sans-serif;
  font-size: var(--font-size-body-m);
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}
.btn-text:hover {
  background: var(--color-primary-bg);
}
.btn-text:active {
  background: var(--color-primary-bg);
  color: var(--color-primary-pressed);
}
.btn-outline {
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--radius-xs, 4px);
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs, 8px);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Pretendard", sans-serif;
  cursor: pointer;
  white-space: nowrap;
} /* Figma Button/Basic 스펙(node 2346:17736)으로 교체 - 리스트 행 액션 버튼(사유보기/재발급/상세보기 등) 공통 */
.btn-outline:hover {
  background: var(--color-primary-bg);
}
.btn-sm {
  height: auto;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
}
.btn-row {
  display: flex;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: var(--spacing-2xl);
}
.btn-row:has(.btn-row__back) {
  justify-content: space-between;
}
/* 버튼이 하나도 없는 오른쪽 그룹은 자리를 차지하지 않게 접는다.
   게시판 상세는 권한·설정에 따라 .btn-row__group 이 통째로 비는데(공지 상세에는 추천·삭제가 없다),
   그래도 요소는 남아 아래 744px 규칙의 flex:1 을 그대로 먹는다 - 그 결과 [목록으로]가 카드 절반
   폭으로 줄고 오른쪽이 비어 시안(전폭)과 어긋났다. 공백 텍스트 노드가 남아 :empty 는 걸리지 않는다. */
.btn-row > .btn-row__group:not(:has(*)) {
  display: none;
}
/* 모바일에서 하단 버튼 행은 항상 한 줄 유지 + 각 버튼이 flex:1로 폭을 균등하게 꽉 채움
   (세로로 쌓지 않음). .btn-row__group으로 한 번 더 묶인 버튼들(취소/등록 등)도 그룹 자체가
   .btn-row 안에서 flex:1 아이템이 되고, 그룹 내부 버튼들도 서로 flex:1로 나눠 갖는다 */
@media (max-width: 744px) {
  .btn-row {
    flex-wrap: nowrap;
    align-items: stretch;
    margin-top: var(--spacing-md);
  }
  .btn-row > .btn-row__group {
    flex: 1 1 0%;
    min-width: 0;
  }
  .btn-row .btn,
  .btn-row button,
  .btn-row a.btn {
    width: auto;
    flex: 1 1 0%;
    min-width: 0;
    text-align: center;
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
  }
}
/* FR-COM-001 상담신청: "나의 상담이력 보기" 버튼(.btn-row.mt-0, main 첫 요소)과
   아래 폼(.form-grid) 사이 간격 - 모바일에서만 40px */
@media (max-width: 744px) {
  .btn-row.mt-0 {
    margin-bottom: 40px;
  }
  /* "상담유형"(4개 옵션) radio-row가 좁은 화면에서 2줄로 줄바꿈되면서 1줄인
     "희망 상담방법"(전화/온라인)과 행 높이가 안 맞았음 - gap을 줄여 1줄에
     맞춰서 두 radio-row 높이를 통일한다. main:has()로 이 페이지에만 스코프 */
  main:has(.btn-row.mt-0) .radio-row {
    gap: 0 16px;
  }
}
/* FR-COM-001 상담유형/희망 상담방법/상담내용 라벨이 기본 .form-row label(1124행,
   font-weight:600·color:--color-gray-900 #111)을 써서 로그인 등 auth 화면의
   .form-row label(font-weight:400·color:#333)과 굵기/색이 달랐음 - 로그인과 통일 */
main:has(.btn-row.mt-0) .form-row label {
  font-weight: 400;
  color: #333;
}
.qa-btn {
  flex: 1;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: 0.15s;
}
.qa-btn:hover {
  border-color: var(--blue-500);
  box-shadow: 0 2px 10px rgba(6, 107, 253, 0.15);
}
.qa-btn .txt b {
  display: block;
  font-size: 14px;
  color: var(--navy-900);
}
.qa-btn .txt span {
  font-size: 11.5px;
  color: var(--text-500);
}
.qa-btn .arrow {
  color: var(--blue-500);
  font-size: 18px;
}
.quick-actions {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* ---------- Forms ---------- */
/* Figma 문의 등록(node 2384-8013) 폼 필드 스펙으로 전체 교체 (공용 클래스 사용 페이지 전체 반영) */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 22px;
}
/* FR-CR-006/FR-CR-007: FR-MY-002(나의 정보)처럼 form-row 2개씩 한 줄 배치, 증빙파일만 .form-row.full로
   전체 폭 단독 행 처리 (공용 .form-grid 기본값 그대로 사용, 별도 오버라이드 불필요) */
main.extra-career-form #tabset1-0 > .form-grid,
main.extra-career-form #tabset1-1 > .form-grid,
main.extra-career-form #tabset1-2 > .form-grid {
  display: grid;
}
@media (max-width: 744px) {
  /* grid는 컬럼(1fr)이 자식의 min-content에 맞춰 트랙 자체를 밀어 넓히는 문제가 있어
     카드/화면 밖으로 넘쳐 보였다(FR-AUTH-002와 동일한 원인) - 모바일에서만 grid 해제 */
  /* AI-MODIFIED: 2026-08-27 extCareerForm 에는 #tabset1-* 이 없다(main.extra-career-form >
     form#wf > .form-grid 한 겹뿐) - 위 세 셀렉터는 여태 아무것도 안 잡았고, 그래서 375px 에서도
     공용 .form-grid 2열이 그대로 남아 careerForm 과 같은 넘침이 났다. 후손 셀렉터를 덧대 실제
     DOM 을 잡는다. tabset 셀렉터는 다른 화면이 쓸 수 있어 남겨 둔다. */
  main.extra-career-form #tabset1-0 > .form-grid,
  main.extra-career-form #tabset1-1 > .form-grid,
  main.extra-career-form #tabset1-2 > .form-grid,
  main.extra-career-form .form-grid {
    display: flex;
    flex-direction: column;
  }
  /* FR-CR-006도 동일하게: 공용 .form-grid 2열이 480px 이하에서만 풀려 태블릿~모바일 폭에서
     form-row가 2개씩 붙어 있었다 - FR-CR-007과 같은 폭에서 한 줄에 하나씩 쌓이도록.
     AI-MODIFIED: 2026-08-27 자식 결합자(>)를 후손으로 푼다. 실제 DOM 은
     main.career-form > form#wf > .form-grid 라 > 가 끊겨 이 규칙이 아예 안 먹었고,
     375px 에서도 2열 grid 가 유지돼 1fr 트랙이 min-content 로 밀리면서 화면 밖으로
     넘쳤다(2026-08-27 실측: .form-row w=635, 뷰포트 375). */
  main.career-form .form-grid {
    display: flex;
    flex-direction: column;
  }
}
/* FR-MY-002 "인재풀 등록 여부" 전용 파란 카드 스타일(#tabset1-0 > .form-grid > .form-row.full, 4120줄대)이
   같은 id 때문에 FR-CR-007 자격증 탭의 증빙파일(.form-row.full)에도 그대로 적용돼 있었음 - 제거 */
main.extra-career-form #tabset1-0 > .form-grid > .form-row.full {
  background: none;
  border-radius: 0;
  padding: 0;
  gap: 8px;
  grid-row: auto;
}
/* 삭제/취소 순서를 바꿔 삭제가 먼저 오도록. 저장은 #tabset1-0 > .btn-row > .btn-primary { order:1 }
   규칙이 tabset1-0(자격증 탭)에만 걸려있어 학력·교육이수 탭엔 안 먹었음 - 3개 탭 전부 동일하게 지정 */
main.extra-career-form .btn-row > .btn-ghost[onclick*="삭제하시겠습니까"] {
  order: -1;
}
main.extra-career-form #tabset1-1 > .btn-row > .btn-primary,
main.extra-career-form #tabset1-2 > .btn-row > .btn-primary {
  order: 1;
}
/* `.content-area:has(.file-upload) .btn-row { justify-content:center }`(1176줄대, FR-COM-007처럼
   버튼 1개짜리 화면 전제)가 여기도 증빙파일이 있어 그대로 적용돼 삭제/취소/저장 3개 버튼이 페이지
   가운데로 몰려 있었음 - 오른쪽 정렬로 되돌림. 특이도를 확실히 이기도록 그 규칙과 동일한
   .content-area:has(.file-upload) 접두사를 그대로 포함해서 재정의 */
.content-area:has(.file-upload) main.career-form .btn-row,
.content-area:has(.file-upload) main.extra-career-form .btn-row {
  justify-content: flex-end;
}
/* FR-CR-006도 동일하게: 삭제, 취소, 저장 순서 (여긴 tabset1-0이 없어 저장에도 order 직접 지정) */
main.career-form .btn-row > .btn-primary {
  order: 1;
}
main.career-form .btn-row > .btn-ghost[onclick*="삭제하시겠습니까"] {
  order: -1;
}
/* FR-MY-002 전용 nth-child 배치(#tabset1-0 > .form-grid > .form-row:nth-child(1/2/3), 3953줄대,
   전부 1열 고정 순차 배치)가 같은 id 때문에 여기도 적용돼 자격증명/취득일/발급기관이 세로로만
   쌓이고 있었음 - 자격증명은 전체 폭, 취득일·발급기관은 그 아래 반반으로 재배치 */
main.extra-career-form #tabset1-0 > .form-grid > .form-row:nth-child(1) {
  grid-column: 1 / -1;
  grid-row: auto;
}
main.extra-career-form #tabset1-0 > .form-grid > .form-row:nth-child(2) {
  grid-column: 1;
  grid-row: auto;
}
main.extra-career-form #tabset1-0 > .form-grid > .form-row:nth-child(3) {
  grid-column: 2;
  grid-row: auto;
}
/* Figma Field Label(node 2056:566) 스펙: Pretendard Regular 400 + text/body(#333) - 공용
   .form-row label(1036줄대)의 font-weight:600·color:var(--color-gray-900)는 이 스펙과 다름.
   FR-COM-007(멘토 Q&A)는 #mentor-qna-form 스코프로 이미 정확히 맞춰져 있는데, 경력정보 폼 2개는
   공용 규칙 그대로라 어긋나 있었음 - 같은 값으로 맞춤 */
main.career-form .form-row label,
main.extra-career-form .form-row label {
  font-weight: 400;
  color: var(--color-text-body);
}
/* FR-CR-007은 탭 패널이 FR-MY-002와 같은 id(tabset1-0/1/2)를 써서 그 전용 2열 그리드
   (#tabset1-0.tab-panel.active 등, display:grid + .form-grid를 display:contents로 풀어 그리드에 직접
   배치)가 그대로 적용되고 있었다 - .form-grid에 grid-template-columns만 바꿔선 소용없고(그 조상이
   이미 grid-template-columns:1fr을 무시하고 자신의 grid로 배치하므로), 탭 패널 자체를 block으로
   되돌려야 한다 */
main.extra-career-form #tabset1-0.tab-panel.active,
main.extra-career-form #tabset1-1.tab-panel.active,
main.extra-career-form #tabset1-2.tab-panel.active {
  display: block;
  padding: 0;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.form-row.full {
  grid-column: 1 / -1;
}
/* 입력 컨트롤 래퍼 - 인풋/버튼/토글 등을 한 줄에 세로 가운데 정렬 */
.form-row__control {
  display: flex;
  align-items: center;
}
/* 계약(근무) 종료일: 진행 중(종료일 미정) 체크박스를 인풋 옆이 아니라 아래 줄에 배치 */
.form-row__control:has(.checkbox-row) {
  flex-wrap: wrap;
}
.form-row__control:has(.checkbox-row) .checkbox-row {
  flex-basis: 100%;
  margin-top: 8px;
}
.form-row label {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--color-gray-900);
}
.form-row label .req {
  color: var(--color-required);
}
.form-row input:not([type="radio"]):not([type="checkbox"]):not(.datepicker__input),
.form-row select,
.form-row textarea {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0 16px;
  height: 44px;
  font-size: var(--font-size-16);
  background: #fff;
  font-family: inherit;
  color: var(--color-gray-900);
}
/* Figma Date Picker(node 386:45415) 스펙 - 필드(.datepicker)와 캘린더 패널(.datepicker__panel).
   design.js가 input[type="date"]를 커스텀 위젯(.datepicker/.datepicker__input/.datepicker__toggle/
   .datepicker__panel)으로 변환하므로, 페이지에는 input[type="date"]가 실제로 남아있지 않다. */
.datepicker {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  height: 44px;
  padding: 0 var(--spacing-md);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}
.datepicker__input {
  flex: 1 0 0;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}
.datepicker__input::placeholder {
  color: var(--color-text-tertiary);
}
.datepicker__input:disabled {
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
.datepicker:has(.datepicker__input:disabled) {
  background: var(--color-bg-subtle);
}
/* 이 프로토타입에는 실제 검증 로직이 없어 자동으로 붙지 않는다 - 필요해지면 필드에 수동으로 추가 */
.datepicker--error {
  border-color: var(--color-status-error);
}
.datepicker.is-open {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px 0 var(--color-primary-glow);
}
.datepicker__toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.datepicker__toggle:disabled {
  cursor: not-allowed;
}
.datepicker__toggle:disabled svg path {
  stroke: var(--color-text-disabled);
}
.datepicker.is-open .datepicker__toggle svg path {
  stroke: var(--color-primary);
}

/* 캘린더 패널 (Figma node 386:45452, calendar) */
.datepicker__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6);
  width: 100%;
  min-width: 280px;
  padding: var(--spacing-md);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.datepicker__panel[hidden] {
  display: none;
}
.datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.datepicker__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.datepicker__title {
  font-weight: 600;
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-base);
  color: var(--color-text-heading);
}
/* 연도·월 선택 목록(design.js). 제목 글자와 같은 크기·굵기로 두어 '2019년 3월' 한 덩어리로 읽히게 한다.
   ⚠ 선택자를 이만큼 길게 쓰는 이유가 있다 - 이 select 는 .form-row 안에 들어 있어 공용 폼 규칙
   (`.form-row select` 높이 44px·테두리·우측여백 40px, `main.extra-career-form .form-row select` 폭 100%)에
   그대로 걸린다. 클래스 하나(0,1,0)로는 그 규칙들(0,1,1)/(0,2,1)을 못 이겨 헤더가 입력칸 두 줄로 밀린다. */
.datepicker .datepicker__panel select.datepicker__sel {
  width: auto;
  height: 32px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-white, #fff)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23626D80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 8px center / 12px 12px;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
}
.datepicker .datepicker__panel select.datepicker__sel:hover,
.datepicker .datepicker__panel select.datepicker__sel:focus {
  outline: none;
  border-color: var(--color-primary);
}
/* 연도 다음에 월이 바로 붙는다 - 두 칸이 한 제목으로 읽혀야 한다 */
.datepicker__title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.datepicker__week {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.datepicker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
}
.datepicker__weekday {
  font-size: var(--font-size-caption-s);
  line-height: var(--line-height-tight);
  color: var(--color-text-body);
}
.datepicker__weekday--sun {
  color: var(--color-point-red);
}
.datepicker__date {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-weight: 500;
  font-size: var(--font-size-caption-m);
  line-height: var(--line-height-snug);
  color: var(--color-text-body);
  cursor: pointer;
}
.datepicker__date--muted {
  color: var(--color-text-disabled);
}
.datepicker__date--selected {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
/* FR-CR-006/FR-CR-007: 인풋이 칸 폭을 꽉 채우도록 - CR-006은 .form-row__control(flex, 폭 지정 없음)에
   담겨 있고 CR-007은 클래스 없이 인라인 style="display:flex" div에 담겨 있어 각각의 실제 구조에 맞춤 */
main.career-form .form-row__control input:not([type="radio"]):not([type="checkbox"]):not(.datepicker__input),
main.career-form .form-row__control select,
main.extra-career-form .form-row input:not([type="radio"]):not([type="checkbox"]):not(.datepicker__input),
main.extra-career-form .form-row select {
  width: 100%;
}
.form-row textarea {
  height: auto;
  padding: 13px 16px;
  line-height: 1.5;
  resize: vertical;
}
.form-row input:not(.datepicker__input)::placeholder,
.form-row textarea::placeholder {
  color: #767676;
}
.form-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23626D80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
  cursor: pointer;
}
.form-row input:not([type="radio"]):not([type="checkbox"]):not(.datepicker__input):focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  border-width: 1.5px;
  box-shadow: 0 0 4px var(--color-primary-glow);
}
.form-row input:not([type="radio"]):not([type="checkbox"]):not(.datepicker__input):disabled,
.form-row select:disabled,
.form-row textarea:disabled {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
.content-area:has(.file-upload) .page-head .crumb,
.content-area:has(.file-upload) .page-head .screen-tag {
  display: none;
}
.content-area:has(.file-upload) .form-grid {
  gap: 24px;
}
.content-area:has(.file-upload) .form-row {
  margin-bottom: 0;
}
/* justify-content:center를 여기서 강제하면 목록으로(.btn-row__back)가 있는 페이지에서 왼쪽/오른쪽
   분리 규칙(.btn-row:has(.btn-row__back){justify-content:space-between}, 아래 참조)보다 특이도가
   높아 항상 이겨버려 모든 파일업로드 페이지 버튼이 가운데로 몰림 - 정렬은 공통 .btn-row 기본값
   (flex-end, 목록으로 있으면 space-between)에 맡기고 여기선 간격만 지정 */
.content-area:has(.file-upload) .btn-row {
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding-top: 24px;
}
/* 증명서 발급신청 1·2단계: 취소는 왼쪽, 이전·다음은 오른쪽에 묶어서 배치.
   취소가 항상 DOM상 마지막 .btn-ghost라 order:-1로 맨 앞으로 옮기고, margin-right:auto로
   남은 공간을 흡수시켜 이전·다음을 오른쪽 끝에 붙임(둘 사이 gap은 유지) */
main.cert-apply-step .btn-row > .btn-ghost:last-child {
  order: -1;
  margin-right: auto;
}
.btn-row__group {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Figma 멘토 Q&A(node 2472:12008) 폼 필드 스펙 - 이 페이지에서만 오버라이드 */
#mentor-qna-form .form-row label {
  font-weight: 400;
}
/* :not(:focus) 필수 - ID 선택자라 전역 focus 규칙(.form-row input:focus, 1041줄)보다 특이도가
   높아서 이게 없으면 focus 시에도 border-color가 계속 회색으로 남아 다른 페이지와 달라 보인다 */
#mentor-qna-form .form-row input:not([type="radio"]):not([type="checkbox"]):not(:focus),
#mentor-qna-form .form-row select:not(:focus),
#mentor-qna-form .form-row textarea:not(:focus) {
  border-color: var(--color-border-default);
}
#mentor-qna-form .form-row textarea {
  height: 120px;
}
#mentor-qna-form .btn-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding-top: 24px;
}
@media (max-width: 744px) {
  /* 목록으로:취소:등록 1:1:1 — .qna-detail__actions와 같은 "좌1:우2유닛" 구조로
     시도했으나(flex:2 0 0 + width:100% + min-width:0 + overflow:hidden 전부 시도)
     "목록으로" <button>의 내재적 최소폭이 중첩된 .btn-row__group 컨테이너 자체의
     자동 최소폭에 영향을 줘서 계속 160:139:137로 깨졌다(min-width:0을 줘도 안 풀림 —
     중첩 flex 컨테이너 + button 내재 최소폭 조합의 브라우저 특성으로 보임).
     display:contents로 .btn-row__group 래퍼를 박스 트리에서 제거해 목록으로·취소·등록을
     .btn-row의 진짜 형제로 승격시키면(중첩 없음) 셋 다 완전히 균등해진다(146:146:144) */
  #mentor-qna-form .btn-row > .btn-row__group {
    display: contents;
  }
}
.form-hint {
  font-size: var(--font-size-13);
  color: #767676;
}
.form-error {
  font-size: var(--font-size-13);
  color: #e4022d;
}
/* Figma File Upload 컴포넌트(node 2610:8511) 스펙 */
.file-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.file-upload__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 170px;
  background: #fff;
  border: 1px dashed #aab4c1;
  border-radius: 10px;
}
.file-upload__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-primary);
  cursor: pointer;
}
.file-upload__btn-icon {
  flex-shrink: 0;
}
.file-upload__desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.file-upload__desc-title {
  margin: 0;
  font-size: var(--font-size-16);
  font-weight: 500;
  line-height: 1.5;
  color: #333;
}
.file-upload__desc-hint {
  margin: 0;
  font-size: var(--font-size-13);
  line-height: 1.4;
  color: #767676;
}
@media (max-width: 744px) {
  /* 모바일에서는 설명 텍스트 없이 업로드 버튼만 노출 */
  .file-upload__desc {
    display: none;
  }
  .file-upload__zone {
    height: auto;
    padding: 20px 0;
  }
}
.file-upload__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: #fff;
  border: 1px solid #626d80;
  border-radius: 8px;
}
@media (max-width: 744px) {
  /* 기본 .file-upload__item(16px) 규칙 뒤에 둬야 같은 specificity에서 이 규칙이 이긴다 -
     이전엔 media query가 기본 규칙보다 앞에 있어서 항상 16px로 덮여씌워졌음 */
  .file-upload__item {
    padding: 8px 12px;
  }
}
.file-upload__item-icon {
  flex-shrink: 0;
}
.file-upload__item-info {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.file-upload__item-name {
  margin: 0;
  font-size: var(--font-size-15);
  font-weight: 600;
  line-height: 1.5;
  color: #333;
}
.file-upload__item-meta {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--font-size-13);
  line-height: 1.4;
  color: #767676;
}
.file-upload__item-success {
  color: #00bf5f;
}
.file-upload__item-success-icon {
  flex-shrink: 0;
}
.file-upload__item-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
/* Stepper 컴포넌트(node 121:238) - 회원가입/경력 등록/심사/증명서 발급 플로우 진행 표시 */
.stepper-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 0 40px;
}
.stepper {
  display: flex;
  align-items: flex-start;
}
.stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 50px;
  flex-shrink: 0;
}
.stepper__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
}
.stepper__indicator--done {
  background: var(--color-primary);
}
.stepper__check {
  display: block;
  width: 14px;
  height: 14px;
}
.stepper__indicator--current {
  background: var(--color-white);
  border: 2px solid var(--color-primary);
}
.stepper__indicator--upcoming {
  background: var(--color-white);
  border: 2px solid var(--color-border);
}
.stepper__num {
  font-size: var(--font-size-17);
  line-height: 1.55;
  text-align: center;
  white-space: nowrap;
}
.stepper__num--current {
  font-weight: 700;
  color: var(--color-primary);
}
.stepper__num--upcoming {
  font-weight: 400;
  color: var(--color-gray-550);
}
.stepper__label {
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
}
.stepper__label--active {
  color: var(--color-text-body);
}
.stepper__label--upcoming {
  color: var(--color-text-disabled);
}
.stepper__connector {
  position: relative;
  width: 56px;
  height: 50px;
  overflow: hidden;
  flex-shrink: 0;
}
.stepper__connector-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 56px;
  height: 2px;
  transform: translateY(-50%);
}
.stepper__connector-line--done {
  background: var(--color-primary);
}
.stepper__connector-line--upcoming {
  background: var(--color-border);
}
@media (max-width: 1295px) {
  .stepper-wrap {
    justify-content: center;
    padding: 0 16px;
  }
}
@media (max-width: 744px) {
  .stepper__step {
    width: 40px;
  }
  .stepper__indicator {
    width: 40px;
    height: 40px;
  }
  .stepper__check {
    width: 12px;
    height: 12px;
  }
  .stepper__num {
    font-size: var(--font-size-14);
  }
  .stepper__label {
    font-size: var(--font-size-11);
  }
  .stepper__connector {
    width: 24px;
    height: 40px;
  }
  .stepper__connector-line {
    width: 24px;
  }
}
@media (max-width: 360px) {
  .stepper__step {
    width: 32px;
  }
  .stepper__indicator {
    width: 32px;
    height: 32px;
  }
  .stepper__connector {
    width: 14px;
    height: 32px;
  }
  .stepper__connector-line {
    width: 14px;
  }
}
.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
@media (max-width: 744px) {
  .form-actions {
    width: 100%;
  }
  .form-actions .btn {
    flex: 1;
  }
}
.radio-row,
.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 44px;
  gap: 24px;
}
.radio-row label,
.checkbox-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-gray-700);
  cursor: pointer;
}
.radio-row label:has(input:disabled),
.checkbox-row label:has(input:disabled) {
  color: var(--color-text-disabled);
}

/* 네이티브 radio/checkbox 인풋 – Figma Radio(2293:7081)/Checkbox(2293:7066) 컴포넌트 스펙 반영 */
input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1.5px solid var(--color-border-strong);
  background: #fff;
  position: relative;
  cursor: pointer;
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="radio"]:checked {
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232D65F2'/%3E%3Ccircle cx='10' cy='10' r='5' fill='white'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}
input[type="checkbox"] {
  border-width: 1px;
  border-radius: 6px;
  border: 1px solid #aab4c1;
}
input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15 6.5C14.72 6.5 14.47 6.61 14.29 6.79L8.5 12.59L5.71 9.79C5.53 9.61 5.28 9.5 5 9.5C4.45 9.5 4 9.95 4 10.5C4 10.78 4.11 11.03 4.29 11.21L7.79 14.71C7.97 14.89 8.22 15 8.5 15C8.78 15 9.03 14.89 9.21 14.71L15.71 8.21C15.89 8.03 16 7.78 16 7.5C16 6.95 15.55 6.5 15 6.5Z' fill='white'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  border-color: var(--color-border);
  background: var(--color-bg-muted);
  cursor: not-allowed;
}
input[type="checkbox"]:disabled:checked {
  background-color: var(--color-bg-muted);
  border-color: var(--color-border);
}
.upload-box {
  border: 1px dashed #c7d0de;
  background: #fafbfd;
  border-radius: 8px;
  padding: 22px;
  text-align: center;
  color: var(--text-500);
  font-size: 13px;
}
.upload-box .browse {
  color: var(--blue-600);
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Table / Grid (Figma Table 컴포넌트 node 2451:8373 스펙으로 완전 교체: 대문자 헤더 라벨 폐기, 16px 본문 텍스트 적용) ---------- */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
}
table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
table.grid caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
/* Figma Table/Notice(node 2451:8512) 헤더 스펙: 전체 table.grid에 공통 적용 (bg subtle #f5f6f9 + text/heading #111) */
table.grid th {
  text-align: left;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-heading, #111);
  font-weight: 600;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border-divider, #e9eef8);
  background: var(--color-bg-subtle, #f5f6f9);
  white-space: nowrap;
}
/* 테이블 상단(필터바/툴바)에 전체선택 체크박스가 있는 선택형 테이블은 헤더 배경을
   var(--color-primary-bg)로 구분 - career-list__grid(FR-CR-001), consent-pool__*-grid(FR-CR-004 인재POOL) */
table.grid.career-list__grid th,
table.grid.consent-pool__career-grid th,
table.grid.consent-pool__cert-grid th,
table.grid.consent-pool__edu-grid th,
table.grid.consent-pool__award-grid th {
  background: var(--color-primary-bg);
}
/* 같은 선택형 테이블(Figma node 2293:10530)은 table-wrap 자체가 둥근 카드로 감싸져 있음 -
   border 1px + radius/sm 8px + overflow로 모서리 클립 (기존 overflow-x:auto가 스크롤은 그대로 유지) */
.table-wrap:has(table.grid.career-list__grid),
.table-wrap:has(table.grid.consent-pool__career-grid),
.table-wrap:has(table.grid.consent-pool__cert-grid),
.table-wrap:has(table.grid.consent-pool__edu-grid),
.table-wrap:has(table.grid.consent-pool__award-grid) {
  border: 1px solid var(--color-border-table, #e3e8f0);
  border-radius: var(--radius-sm);
}
/* table-wrap 자체 테두리(위 규칙) + 마지막 행 td의 자기 border-bottom이 같은 위치에
   겹쳐서 2px 굵기로 보였다 - 마지막 행은 셀 라인 제거 (table-wrap 테두리만 남김) */
table.grid.career-list__grid tbody tr:last-child td,
table.grid.consent-pool__career-grid tbody tr:last-child td,
table.grid.consent-pool__cert-grid tbody tr:last-child td,
table.grid.consent-pool__edu-grid tbody tr:last-child td,
table.grid.consent-pool__award-grid tbody tr:last-child td {
  border-bottom: none;
}
/* 모바일 카드뷰(900px 이하)에선 카드(tr)마다 이미 자체 테두리가 있어서, table-wrap 자체 테두리는
   제거 - 안 지우면 카드 목록 전체를 한 번 더 감싸는 이중 테두리로 보인다 */
@media (max-width: 900px) {
  .table-wrap:has(table.grid.career-list__grid),
  .table-wrap:has(table.grid.consent-pool__career-grid),
  .table-wrap:has(table.grid.consent-pool__cert-grid),
  .table-wrap:has(table.grid.consent-pool__edu-grid),
  .table-wrap:has(table.grid.consent-pool__award-grid) {
    border: 0;
    border-radius: 0;
  }
}
table.grid td {
  height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border-divider, #e9eef8);
  color: var(--color-gray-700, #333);
  font-weight: 400;
  vertical-align: middle;
}
table.grid tr {
  -webkit-tap-highlight-color: transparent;
}
table.grid tr:hover td {
  background: var(--bg);
}
table.grid td:has(> input[type="checkbox"]) {
  text-align: center;
}

/* ---------- FR-CR-001 경력정보 목록 전용 스코프 ---------- */
/* "사유보기" 팝업(#rejectReasonPopup) 콘텐츠 — FR-COM-002 상담 상세 모달과 동일한
   라벨:값 리스트 스타일(고정폭 80px 라벨 #767676 + 가변폭 값 #333) */
.career-list-modal__contents {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-xl);
}
.career-list-modal__row {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}
.modal-box .career-list-modal__label {
  padding: 0;
  flex: 0 0 80px;
  color: var(--color-text-tertiary);
}
.modal-box .career-list-modal__value {
  padding: 0;
  flex: 1 1 0%;
  min-width: 0;
  color: var(--color-text-body);
}
/* 보수액(6번째)·처리일(9번째) td에 white-space: nowrap 없어 "2,400만원", "보완요청: 2026.06.30"처럼 폭 좁은 셀의 텍스트가 두 줄로 꺾이던 문제 수정
   전체 td에 일괄 적용하면 계약처명/업무내용처럼 긴 텍스트 열까지 넓어져 table-wrap에 가로 스크롤이 생기므로 해당 열에만 한정 */
.career-list__grid td:nth-child(6),
.career-list__grid td:nth-child(9) {
  white-space: nowrap;
}
/* Table/Toolbar 스펙(node 2522:7842)으로 완전 교체 (기존 .btn-row 사이즈값 무시) */
.career-list__btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 0;
  min-height: 56px;
  padding: 8px 8px;
  margin-top: 16px;
}
@media (max-width: 744px) {
  .career-list__btn-row {
    min-height: unset;
  }
}
.career-list__toolbar-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
/* FR-VR-004: .career-list__btn-row 없이 단독으로 쓰인 전체선택 영역을
   FR-CR-001 툴바(.career-list__btn-row padding/min-height)와 같은 높이로 맞춤 */
.card-head + .career-list__toolbar-info {
  min-height: 56px;
  padding: 8px 8px;
}
.career-list__toolbar-count {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}
.career-list__toolbar-count strong {
  font-weight: 600;
  color: var(--color-text-heading);
}
/* FR-VR-004: 전체선택 체크박스가 부분선택된(선택 N건) 상태 - Figma node 2293:10695 */
.career-list__toolbar-count .career-list__toolbar-count--primary {
  color: var(--color-primary);
}
#vr004CheckAll:checked {
  border: none;
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2' viewBox='0 0 10 2' fill='none'%3E%3Cpath d='M1 1H9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px 2px;
  background-position: center;
  background-repeat: no-repeat;
}
.career-list__toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 0;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
@media (max-width: 900px) {
  /* 삭제 버튼(.btn-text) - 모바일에서도 컨테이너 폭을 꽉 채우지 않고 콘텐츠 크기만큼만
     (Figma hug) 유지 */
  .career-list__toolbar-actions .btn-text {
    flex: none;
    width: auto;
  }
}
.career-list__btn-row .btn {
  height: 36px;
  padding: 0 var(--spacing-sm);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  justify-content: center;
}
.career-list__btn-row .btn-outline {
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.career-list__btn-row .btn-outline:hover {
  background: var(--color-primary-bg);
}
.career-list__btn-row .btn-primary {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-white);
}
.career-list__btn-row .btn-primary:hover {
  background: var(--color-primary-hover);
}
.career-list__grid th:nth-child(2),
.career-list__grid td:nth-child(2) {
  text-align: center;
  color: var(--text-500);
}
@media (min-width: 901px) {
  .career-list__grid th:nth-child(2),
  .career-list__grid td:nth-child(2) {
    width: 56px;
  }
}
.career-list__grid td a {
  color: var(--blue-600);
  font-weight: 400;
}
.career-list__grid .btn-outline {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
}
/* Figma Table/Data(node 2157:1949) 스펙: 블록체인상태·처리일은 pill이 아닌 일반 텍스트 - 뒤에 나오는 공용 .badge/.badge-green/.badge-blue/.badge-red보다 항상 우선하도록 .career-list__grid로 스코프해 명시도 확보 */
.career-list__grid .badge--plain {
  display: inline;
  background: none;
  padding: 0;
  border-radius: 0;
  font-weight: 400;
  color: var(--text-700);
}
.career-list__grid .badge--plain.badge-red {
  color: var(--red);
}
.career-list__grid .badge--plain-lg {
  font-size: 16px;
}
/* FR-COM-005/002/006과 같은 리스트 테이블 스타일. 체크박스(1열)·진행상태 배지(8열, 실제 컬러 pill)가
   추가로 있는 변형 - 체크박스는 No.(2열)와 달리 선택 기능이라 모바일에서도 숨기지 않음 */
table.grid.career-list__grid tr:hover td {
  background: var(--color-gray-75);
}
@media (max-width: 900px) {
  table.grid.career-list__grid tr:hover,
  table.grid.career-list__grid tr:hover td {
    background: transparent;
  }
  table.grid.career-list__grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  table.grid.career-list__grid td {
    height: auto;
  }
  /* No.는 모바일 카드에서 생략 */
  table.grid.career-list__grid td:nth-child(2) {
    display: none;
  }
  /* Figma Table-Mobile(node 2439:19328) 스펙: top(체크박스+제목+배지, pb 0) → task(업무내용, 라벨 없이
     단독 행 + 하단 divider) → body(계약기간~처리일 라벨:값, 8px 간격) → actions(사유보기 버튼, 폭 100%) */
  /* top: 선택 체크박스 */
  table.grid.career-list__grid td:nth-child(1) {
    order: -3;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
  }
  table.grid.career-list__grid td:nth-child(1)::before {
    content: none;
  }
  /* top: 계약처명 - Figma Heading/H3(모바일 18px) + text/link 색상 */
  table.grid.career-list__grid td:nth-child(3) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
    font-size: var(--font-size-heading-h3);
    font-weight: 700;
    text-align: left;
  }
  table.grid.career-list__grid td:nth-child(3)::before {
    content: none;
  }
  table.grid.career-list__grid td:nth-child(3) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.career-list__grid td:nth-child(3) a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-link);
    font-weight: 700;
  }
  /* top: 진행상태 배지 */
  table.grid.career-list__grid td:nth-child(8) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) 0 var(--spacing-sm);
  }
  table.grid.career-list__grid td:nth-child(8)::before {
    content: none;
  }
  /* task: 업무내용 - 라벨 없이 단독 행, 하단 divider */
  table.grid.career-list__grid td:nth-child(4) {
    order: 0;
    width: 100% !important;
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-body-m);
    color: var(--color-text-body);
  }
  table.grid.career-list__grid td:nth-child(4)::before {
    content: none;
  }
  table.grid.career-list__grid td:nth-child(4) > .cell-content {
    display: block;
    text-align: left;
  }
  /* body: 계약기간/보수액/블록체인상태/처리일 - 라벨:값 행, 8px 간격 */
  table.grid.career-list__grid td:nth-child(5),
  table.grid.career-list__grid td:nth-child(6),
  table.grid.career-list__grid td:nth-child(7),
  table.grid.career-list__grid td:nth-child(9) {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-body-m);
  }
  table.grid.career-list__grid td:nth-child(5) {
    order: 3;
    padding-top: var(--spacing-sm);
  }
  table.grid.career-list__grid td:nth-child(6) {
    order: 4;
    margin-top: var(--spacing-xs);
  }
  table.grid.career-list__grid td:nth-child(7) {
    order: 5;
    margin-top: var(--spacing-xs);
  }
  table.grid.career-list__grid td:nth-child(9) {
    order: 6;
    margin-top: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
  }
  /* actions: 사유보기 버튼(10열) - 라벨 제거, 폭 100%. 버튼 없는 행은 공통 td:empty 규칙으로 자동 숨김 */
  table.grid.career-list__grid td:nth-child(10) {
    order: 7;
    border-bottom: none;
    padding: 0 var(--spacing-sm) var(--spacing-sm);
  }
  table.grid.career-list__grid td:nth-child(10)::before {
    content: none;
  }
  table.grid.career-list__grid td:nth-child(10) > .cell-content {
    width: 100%;
    justify-content: stretch;
  }
  table.grid.career-list__grid td:nth-child(10) button {
    width: 100%;
  }
}
/* ---------- FR-VR-004 심사신청 대상 경력 선택 전용 스코프 ----------
   HTML 클래스를 추가하지 않고, 이 페이지에만 있는 인라인 스타일
   `.card-head[style*="margin-top: 22px"]` 바로 다음 `.table-wrap`으로 스코프.
   FR-CR-001(career-list__grid)과 같은 리스트 테이블 카드 패턴. 배지·액션 버튼 열은 없고
   체크박스(1)+계약처명(3)이 상단, 구분(2)/업무내용(4)/계약기간(5)/보수액(6)이 라벨:값 행 */
.card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid tr:hover td {
  background: var(--color-gray-75);
}
@media (max-width: 900px) {
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid tr:hover,
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid tr:hover td {
    background: transparent;
  }
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td {
    height: auto;
  }
  /* top: 선택 체크박스 */
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(1) {
    order: -3;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
  }
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(1)::before {
    content: none;
  }
  /* top: 계약처명 - 굵게 18px 타이틀 */
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(3) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) 0 var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(3)::before {
    content: none;
  }
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(3) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* body: 구분/업무내용/계약기간/보수액 - 라벨:값 행 */
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(2),
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(4),
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(5),
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(6) {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(2) {
    order: 2;
    padding-top: var(--spacing-sm);
  }
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(4) {
    order: 3;
    margin-top: var(--spacing-xs);
  }
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(5) {
    order: 4;
    margin-top: var(--spacing-xs);
  }
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td:nth-child(6) {
    order: 5;
    margin-top: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
  }
  /* 라벨:값 텍스트 스타일 — 다른 카드형 테이블과 동일(16px Regular #767676) */
  .card-head[style*="margin-top: 22px"] ~ .table-wrap table.grid td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
}
.career-list__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 14px;
}
.career-list__count {
  font-size: 12px;
  color: var(--text-500);
}
.career-list__foot .pagination {
  margin: 0;
}
.career-list__modal-desc {
  margin: 0 0 14px;
}
.career-list__note {
  margin-top: 24px;
  background: #fafbfd;
}
.career-list__note-title {
  margin-bottom: 10px;
}
.career-list__note-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--text-700);
}
.career-list__note-num {
  flex: none;
  color: var(--blue-600);
}

/* ---------- FR-CS-003 1:1문의 목록 (node 2384:7978) 전용 스코프 ---------- */
/* 폭/가운데정렬은 데스크톱 표 레이아웃 전용이라 min-width:901px로 스코프 - 모바일 카드뷰(max-width:900px)에서는 table.grid td { width:100% !important; text-align:right } 공통 규칙이 그대로 적용돼야 함 */
@media (min-width: 901px) {
  .qna-list__grid th:nth-child(1),
  .qna-list__grid td:nth-child(1) {
    width: 80px;
    text-align: center;
  }
  .qna-list__grid th:nth-child(2),
  .qna-list__grid td:nth-child(2) {
    width: 120px;
    text-align: center;
  }
  .qna-list__grid th:nth-child(4),
  .qna-list__grid td:nth-child(4) {
    width: 140px;
    text-align: center;
  }
  .qna-list__grid th:nth-child(5),
  .qna-list__grid td:nth-child(5) {
    width: 100px;
    text-align: center;
  }
}
.qna-list__grid th {
  height: 52px;
}
.qna-list__grid td:nth-child(1),
.qna-list__grid td:nth-child(2),
.qna-list__grid td:nth-child(4) {
  color: var(--color-text-tertiary, #767676);
}
.qna-list__title-link {
  color: var(--color-gray-700, #333);
  font-weight: 400;
  text-decoration: none;
}
/* Figma status badge 색상(node 2384:7978, status/warning·status/success 토큰) 이 페이지 전용 스코프 - 공용 --amber/--green 토큰은 다른 화면 영향 있어 건드리지 않음 */
.qna-list__grid .badge-amber {
  background: #fff4ed;
  color: #ff9632;
}
.qna-list__grid .badge-green {
  background: #eaf9f0;
  color: #12af60;
}
/* FR-COM-005/002/006과 같은 리스트 테이블 스타일. 제목=3열·상태 배지=5열, 액션 버튼 열은 없음 */
table.grid.qna-list__grid tr:hover td {
  background: var(--color-gray-75);
}
@media (max-width: 900px) {
  table.grid.qna-list__grid tr:hover,
  table.grid.qna-list__grid tr:hover td {
    background: transparent;
  }
  table.grid.qna-list__grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  table.grid.qna-list__grid td {
    height: auto;
  }
  /* 번호는 모바일 카드에서 생략 */
  table.grid.qna-list__grid td:nth-child(1) {
    display: none;
  }
  /* 제목: 카드 상단 왼쪽, 굵게 18px, 1줄+ellipsis, 상태 배지와 한 줄 */
  table.grid.qna-list__grid td:nth-child(3) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  table.grid.qna-list__grid td:nth-child(3)::before {
    content: none;
  }
  table.grid.qna-list__grid td:nth-child(3) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.qna-list__grid td:nth-child(3) a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 상태 배지: 제목 오른쪽, 두 번째 순서 */
  table.grid.qna-list__grid td:nth-child(5) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  table.grid.qna-list__grid td:nth-child(5)::before {
    content: none;
  }
  /* 문의유형/작성일: 구분선 없이 라벨:값 행 */
  table.grid.qna-list__grid td:nth-child(2),
  table.grid.qna-list__grid td:nth-child(4) {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  table.grid.qna-list__grid td:nth-child(2) {
    order: 2;
    padding-top: var(--spacing-xs);
  }
  table.grid.qna-list__grid td:nth-child(4) {
    order: 3;
    padding-bottom: var(--spacing-sm);
  }
}
/* Figma Section Header(node 2616:12666) 스펙: 타이틀(page-head)과 문의등록 버튼이 한 줄에서 하단 정렬 - page-head/main이 형제라 HTML 구조 변경 없이 CSS Grid로만 교차 정렬 처리 */
.content-area:has(.qna-list__grid) {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
}
.content-area:has(.qna-list__grid) > .page-head {
  display: block;
  grid-column: 1;
  grid-row: 1;
  border-bottom: none;
}
.content-area:has(.qna-list__grid) > main {
  display: contents;
}
/* main이 display:contents라 그 자체엔 박스가 없어 공용 .content-area main
   페이드인(위 5123줄대)이 안 먹으므로, 실제 박스를 가진 자식들에 직접 건다 */
.content-area:has(.qna-list__grid) > main > * {
  opacity: 0;
  transform: translateY(16px);
  animation: content-area-main-fade-in 0.5s ease-out forwards;
}
.qna-list__btn-row {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-content: flex-end;
  margin: 0;
  padding-bottom: 16px;
}
/* page-head와 btn-row가 서로 다른 grid column이라 border-bottom을 각자 나눠 그리면 column-gap 자리에서 선이 끊어짐 - content-area의 가상 요소로 grid-row 1 전체 폭에 걸친 하나의 선을 그린다 */
.content-area:has(.qna-list__grid)::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  height: 0;
  border-bottom: 1px solid var(--color-border-strong, #aab4c1);
}
.qna-list__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 8px;
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 32px;
}
@media (max-width: 744px) {
  .qna-list__toolbar {
    min-height: unset;
  }
}
.content-area:has(.qna-list__grid) .table-wrap {
  grid-column: 1 / -1;
  grid-row: 3;
}
.content-area:has(.qna-list__grid) > main > .pagination {
  grid-column: 1 / -1;
  grid-row: 5;
  margin-top: 12px;
  padding-bottom: 48px;
}
.qna-list__add-btn {
  height: 44px;
  padding: 0 20px;
  justify-content: center;
  background: var(--color-primary, #2d65f2);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  font-family: "Pretendard", sans-serif;
}
/* Figma Table/Notice/Pagination > Actions(node 2665:20547) 스펙: 목록으로/등록 버튼 행 - 공통 .btn-row(좌우 분리는 .btn-row__back) 그대로 재사용, 이 grid 레이아웃 안 배치를 위한 좌표만 스코프 선택자로 별도 지정 */
.content-area:has(.qna-list__grid) > main > .btn-row:has(.btn-row__back) {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: 16px;
}
.qna-list__list-btn,
.qna-list__submit-btn {
  border-radius: 4px;
}
/* 태블릿/모바일 전용 Figma 프레임 없음 - 문의등록 버튼이 타이틀과 한 줄(1fr auto)로 좁아지며 깨지지 않도록 1컬럼으로 폴백 처리 */
@media (max-width: 1295px) {
  .content-area:has(.qna-list__grid) {
    grid-template-columns: 1fr;
  }
  .content-area:has(.qna-list__grid) > .page-head {
    grid-column: 1;
    grid-row: 1;
  }
  .qna-list__btn-row {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-content: flex-start;
    margin-top: -10px;
  }
  .content-area:has(.qna-list__grid)::after {
    grid-row: 2;
  }
  .qna-list__toolbar {
    grid-row: 3;
  }
  .content-area:has(.qna-list__grid) .table-wrap {
    grid-row: 4;
  }
  .content-area:has(.qna-list__grid) > main > .btn-row:has(.btn-row__back) {
    grid-row: 5;
  }
  .content-area:has(.qna-list__grid) > main > .pagination {
    grid-row: 6;
  }
}
/* ---------- FR-CS-001 공지사항 목록 전용 스코프 (node 2440:7016) ---------- */
/* Table Toolbar(node 2384:7866) - qna-list__toolbar와 동일 컴포넌트, 테이블 위 총 건수 표시 */
.notice-list__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 8px;
}
@media (max-width: 744px) {
  .notice-list__toolbar {
    min-height: unset;
  }
}
/* Table/Data 고정행(node 2293:10663) 핀 아이콘 - 20x20 고정 */
.notice-list__pin-icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
}
/* Figma Table/Notice(node 2451:8641) 첨부파일 열 스펙: 아이콘만 중앙 정렬(카운트 텍스트 없음) */
.attach-cell {
  text-align: center;
}
.attach-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: var(--color-gray-700, #444);
}
.notice-list__title-link {
  color: #333;
  font-weight: 400;
}
/* Figma Table/Notice + TableNoticePagination(node 2440:8056) 자료실 목록 전용 스코프 */
.archive-list__grid th:nth-child(4) {
  text-align: center;
}
/* FR-COM-006 자료실: FR-COM-005/FR-COM-002와 같은 리스트 테이블 스타일 적용.
   단 이 테이블은 상태 배지·별도 액션 버튼이 없음(제목 자체가 링크, 첨부파일은 아이콘) —
   첨부파일 아이콘을 배지 자리에 배치 */
table.grid.archive-list__grid tr:hover td {
  background: var(--color-gray-75);
}
@media (max-width: 900px) {
  table.grid.archive-list__grid tr:hover,
  table.grid.archive-list__grid tr:hover td {
    background: transparent;
  }
  table.grid.archive-list__grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  table.grid.archive-list__grid td {
    height: auto;
  }
  /* No.는 모바일 카드에서 생략 */
  table.grid.archive-list__grid td:nth-child(1) {
    display: none;
  }
  /* 제목: 카드 상단 왼쪽, 굵게 18px, 1줄+ellipsis, 첨부파일 아이콘과 한 줄 */
  table.grid.archive-list__grid td:nth-child(2) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  table.grid.archive-list__grid td:nth-child(2)::before {
    content: none;
  }
  /* 공통 시스템의 .cell-content 기본값(text-align:right)이 남아있으면 짧은 제목이 오른쪽/가운데로
     쏠려 보인다 — FR-COM-005와 동일하게 명시적으로 왼쪽 정렬 */
  table.grid.archive-list__grid td:nth-child(2) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
  }
  table.grid.archive-list__grid td:nth-child(2) a {
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-body);
  }
  /* 첨부파일 아이콘: 제목 오른쪽, 배지 자리(두 번째 순서) */
  table.grid.archive-list__grid td:nth-child(4) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  table.grid.archive-list__grid td:nth-child(4)::before {
    content: none;
  }
  /* 등록일: 제목·첨부파일 다음, 구분선 없이 상하 패딩만 */
  table.grid.archive-list__grid td:nth-child(3) {
    order: 2;
    border-bottom: none;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
  }
  /* 라벨:값 텍스트 — Figma(node 2870:11337) 스펙, FR-COM-005와 동일 (16px Regular
     라벨 #767676 / 값 #333). 공통 시스템 기본(font-weight:600·색 #333)보다 이걸 우선 */
  table.grid.archive-list__grid td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
}
/* ---------- 모바일 카드뷰 라벨:값 텍스트 일괄 통일 ----------
   Figma(node 2870:11337) 스펙: 라벨 16px Regular #767676 / 값 16px Regular #333.
   FR-COM-005(#FR-COM-005-1-tabs-0/1), FR-COM-006(.archive-list__grid),
   FR-COM-011(.mentor-detail__qna-grid)는 이미 개별 처리돼 있어 여기서 제외.
   나머지 리스트형 카드뷰 테이블 전부에 한 번에 적용 */
@media (max-width: 900px) {
  table.grid.career-list__grid td::before,
  table.grid.consent-pool__award-grid td::before,
  table.grid.consent-pool__career-grid td::before,
  table.grid.consent-pool__cert-grid td::before,
  table.grid.consent-pool__edu-grid td::before,
  table.grid.counsel-history__grid td::before,
  table.grid.extra-career__award-grid td::before,
  table.grid.extra-career__cert-grid td::before,
  table.grid.extra-career__edu-grid td::before,
  table.grid.integration-status__grid td::before,
  table.grid.mentee-qna__grid td::before,
  table.grid.notice-list__grid td::before,
  table.grid.qna-list__grid td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
}
/* ---------- FR-COM-011 멘토 상세 Q&A 목록 전용 스코프 ---------- */
/* FR-COM-005/002/006과 같은 리스트 테이블 스타일. 이 테이블엔 상태 배지·액션 버튼이 없음(제목이 링크,
   공개여부는 일반 텍스트) — 공개여부를 배지 자리(제목 오른쪽)에 배치 */
table.grid.mentor-detail__qna-grid tr:hover td {
  background: var(--color-gray-75);
}
@media (max-width: 900px) {
  table.grid.mentor-detail__qna-grid tr:hover,
  table.grid.mentor-detail__qna-grid tr:hover td {
    background: transparent;
  }
  table.grid.mentor-detail__qna-grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  table.grid.mentor-detail__qna-grid td {
    height: auto;
  }
  /* No.는 모바일 카드에서 생략 */
  table.grid.mentor-detail__qna-grid td:nth-child(1) {
    display: none;
  }
  /* 제목: 카드 상단 왼쪽, 굵게 18px, 1줄+ellipsis, 공개여부와 한 줄 */
  table.grid.mentor-detail__qna-grid td:nth-child(2) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  table.grid.mentor-detail__qna-grid td:nth-child(2)::before {
    content: none;
  }
  table.grid.mentor-detail__qna-grid td:nth-child(2) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.mentor-detail__qna-grid td:nth-child(2) a {
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-body);
  }
  /* 공개여부: 제목 오른쪽, 배지 자리(두 번째 순서) */
  table.grid.mentor-detail__qna-grid td:nth-child(4) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
    color: var(--color-text-tertiary, #767676);
    font-size: var(--font-size-14);
  }
  table.grid.mentor-detail__qna-grid td:nth-child(4)::before {
    content: none;
  }
  /* 작성자/등록일/조회수: 구분선 없이 라벨:값 행 */
  table.grid.mentor-detail__qna-grid td:nth-child(3),
  table.grid.mentor-detail__qna-grid td:nth-child(5),
  table.grid.mentor-detail__qna-grid td:nth-child(6) {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  table.grid.mentor-detail__qna-grid td:nth-child(3) {
    order: 2;
    padding-top: var(--spacing-xs);
  }
  table.grid.mentor-detail__qna-grid td:nth-child(5) {
    order: 3;
  }
  table.grid.mentor-detail__qna-grid td:nth-child(6) {
    order: 4;
    padding-bottom: var(--spacing-sm);
  }
  /* 라벨:값 텍스트 — Figma(node 2870:11337) 스펙, FR-COM-005/006과 동일 (16px Regular
     라벨 #767676 / 값 #333). 공통 시스템 기본(font-weight:600·색 #333)보다 이걸 우선 */
  table.grid.mentor-detail__qna-grid td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
}

/* Table/Notice(node 2451:8512) 스펙: 헤더 배경/컬러는 table.grid 공통 규칙으로 이동, 여기서는 이 페이지 고유의 열 정렬(번호/작성일 폭+가운데정렬)만 재정의
   폭/가운데정렬은 데스크톱 표 레이아웃 전용이라 min-width:901px로 스코프 - 모바일 카드뷰(max-width:900px)에서는 table.grid td { width:100% !important } 공통 규칙이 그대로 적용돼야 함 */
table.grid.notice-list__grid td:last-child {
  color: var(--color-text-tertiary, #767676);
}
@media (min-width: 901px) {
  table.grid.notice-list__grid th:first-child,
  table.grid.notice-list__grid td:first-child {
    width: 80px;
    text-align: center;
  }
  table.grid.notice-list__grid th:last-child,
  table.grid.notice-list__grid td:last-child {
    width: 140px;
    text-align: center;
  }
}
/* FR-COM-005/002/006과 같은 리스트 테이블 스타일. 배지·액션 버튼 열이 따로 없고, 제목(2열) 안에
   중요 배지가 같이 들어있을 때도 있는 변형. No.(1열)는 일반 행에선 숫자, 상단고정 행에선 압핀 아이콘
   (svg)이 들어있어 - 압핀 아이콘이 있는 행만 모바일에서도 남기고 숫자만 있는 행은 숨김 */
table.grid.notice-list__grid tr:hover td {
  background: var(--color-gray-75);
}
@media (max-width: 900px) {
  table.grid.notice-list__grid tr:hover,
  table.grid.notice-list__grid tr:hover td {
    background: transparent;
  }
  table.grid.notice-list__grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  table.grid.notice-list__grid td {
    height: auto;
  }
  /* No. 열: 숫자만 있는 행은 숨기고, 압핀 아이콘이 있는 행은 제목 앞에 노출 */
  table.grid.notice-list__grid td:nth-child(1) {
    display: none;
  }
  table.grid.notice-list__grid td:nth-child(1):has(.notice-list__pin-icon) {
    display: flex;
    align-items: center;
    order: -3;
    width: auto !important;
    flex: none;
    border-bottom: none;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
  }
  table.grid.notice-list__grid td:nth-child(1):has(.notice-list__pin-icon)::before {
    content: none;
  }
  table.grid.notice-list__grid td:nth-child(1) > .cell-content {
    justify-content: flex-start;
  }
  table.grid.notice-list__grid
    td:nth-child(1):has(.notice-list__pin-icon)
    + td:nth-child(2) {
    padding-left: var(--spacing-xs);
  }
  /* 제목(+중요 배지): 카드 상단, 굵게 18px */
  table.grid.notice-list__grid td:nth-child(2) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  table.grid.notice-list__grid td:nth-child(2)::before {
    content: none;
  }
  table.grid.notice-list__grid td:nth-child(2) > .cell-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-xs);
    justify-content: flex-start;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
  }
  table.grid.notice-list__grid td:nth-child(2) .badge {
    flex: none;
  }
  table.grid.notice-list__grid td:nth-child(2) a {
    display: block;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-body);
  }
  /* 등록일: 구분선 없이 값만(라벨 텍스트는 숨김) */
  table.grid.notice-list__grid td:nth-child(3) {
    order: 2;
    border-bottom: none;
    padding: 0 var(--spacing-sm) var(--spacing-sm);
  }
  table.grid.notice-list__grid td:nth-child(3)::before {
    content: none;
  }
}

/* Figma Pagination 컴포넌트(node 2420:15336) 스펙으로 완전 교체 (기존 node 2:15795 기준 32x32/솔리드 active 스펙 전부 무시) */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  font-family: "Pretendard", sans-serif;
}
.pagination button {
  border: none;
  background: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-700, #333);
  font-family: "Pretendard", sans-serif;
}
.pagination button.active {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-primary, #2d65f2);
  color: var(--color-primary, #2d65f2);
  font-weight: 600;
}
.pagination button:first-child,
.pagination button:last-child {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #d8dce4);
  color: #767676;
}
.pagination button:first-child svg,
.pagination button:last-child svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ---------- 리스트 총 건수 공통 컴포넌트(list-toolbar/list-count/list-foot) ----------
   페이지마다 각자 이름으로 중복 정의돼 있던 "총 N건" 툴바를 공통 클래스로 통합.
   레이아웃이 다른 페이지(등록 버튼이 같이 있는 qna-list/notice-list, 체크박스 선택
   툴바인 career-list, 그리드 pagination-row인 mentor-detail 등)는 자체 wrapper 클래스를
   유지하되, 텍스트 스타일(list-count/-label/-value)만 공통 클래스로 통일한다. */
.list-toolbar {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px;
}
@media (max-width: 744px) {
  .list-toolbar {
    min-height: unset;
  }
}
.list-toolbar--split {
  justify-content: space-between;
}
.list-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-15, 15px);
  font-family: "Pretendard", sans-serif;
}
.list-count-label {
  color: var(--color-gray-500, #666);
  font-weight: 400;
}
.list-count-value {
  color: var(--color-gray-900, #111);
  font-weight: 600;
}
.list-foot {
  margin-top: 16px;
}

/* ---------- FR-COM-002 나의 상담이력 전용 스코프 ---------- */
/* table-wrap 안 인라인 style 제거분을 CSS로 이전 */
.counsel-history__grid th:first-child,
.counsel-history__grid td:first-child {
  text-align: center;
}
@media (min-width: 901px) {
  .counsel-history__grid th:first-child,
  .counsel-history__grid td:first-child {
    width: 56px;
  }
}
.counsel-history__grid td:first-child {
  color: var(--text-500);
}
.counsel-history__grid th:last-child {
  width: 100px;
}
/* 관리 열 '상세보기' 링크 → FR-COM-005와 동일한 Figma Button/Basic Type=Secondary·Size=sm(node 2290:2908) 처리 */
.counsel-history__grid td a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  height: 36px;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--color-primary);
  font-family: "Pretendard", sans-serif;
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  white-space: nowrap;
}
.counsel-history__grid td a:hover {
  background: var(--color-primary-bg);
}
.counsel-history__grid td a:active {
  background: var(--color-primary-bg);
  border-color: var(--color-primary-pressed);
  color: var(--color-primary-pressed);
}
/* 행 hover 배경: FR-COM-005와 동일하게 #fafafa (데스크톱만, 모바일은 터치라 제외) */
table.grid.counsel-history__grid tr:hover td {
  background: var(--color-gray-75);
}
@media (max-width: 900px) {
  /* tr:hover td만 지워선 부족 — 공통 시스템이 tr:hover 자체에도 var(--bg) 틴트를 주기 때문에
     카드(tr) 배경도 같이 원상복귀해야 진짜로 hover 틴트가 사라진다 */
  table.grid.counsel-history__grid tr:hover {
    background: var(--white, #fff);
  }
  table.grid.counsel-history__grid tr:hover td {
    background: transparent;
  }
  /* 카드 배경/테두리/radius: Figma 스펙(#dadfe6, 12px, 흰 배경).
     공통 시스템 `table.grid tr`(table+grid class+tr = 특이도 (0,1,2))보다 반드시 높아야 display:flex가
     실제로 먹는다 — `.counsel-history__grid tr`만 쓰면 (0,1,1)로 특이도가 더 낮아 통째로 무시되고,
     그 결과 order도 아무 효과가 없어 신청일이 DOM 순서(2번째) 그대로 맨 위에 나왔었다 */
  table.grid.counsel-history__grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  table.grid.counsel-history__grid td {
    height: auto;
  }
  /* No.는 모바일 카드에서 생략 */
  .counsel-history__grid td:nth-child(1) {
    display: none;
  }
  /* 상담유형: 카드 상단 왼쪽, 굵게 18px, 1줄+ellipsis, 상태 배지와 한 줄 */
  .counsel-history__grid td:nth-child(3) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-text-body);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .counsel-history__grid td:nth-child(3)::before {
    content: none;
  }
  .counsel-history__grid td:nth-child(3) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 상태 배지: 상담유형 오른쪽, 두 번째 순서 */
  .counsel-history__grid td:nth-child(5) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  .counsel-history__grid td:nth-child(5)::before {
    content: none;
  }
  /* 신청일/상담방법/관리: 하나의 body 그룹, 구분선 없이 행간만 */
  .counsel-history__grid td:nth-child(2),
  .counsel-history__grid td:nth-child(4),
  .counsel-history__grid td:nth-child(6) {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  .counsel-history__grid td:nth-child(2) {
    order: 2;
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
  .counsel-history__grid td:nth-child(4) {
    order: 3;
    padding-bottom: var(--spacing-xs);
  }
  .counsel-history__grid td:nth-child(6) {
    order: 4;
    padding-bottom: var(--spacing-sm);
  }
  /* 관리(상세보기 버튼): '관리' 라벨 제거하고 버튼만 카드 폭 100%로 */
  .counsel-history__grid td:nth-child(6)::before {
    content: none;
  }
  .counsel-history__grid td:nth-child(6) > .cell-content {
    width: 100%;
    justify-content: stretch;
  }
  .counsel-history__grid td:nth-child(6) a {
    width: 100%;
  }
}

/* ---------- FR-CR-004 외부연동 현황 조회 전용 스코프 ---------- */
/* FR-COM-005/002/006과 같은 리스트 테이블 스타일. 구분(2열)에 제목 텍스트+배지(2차 사업)가
   같이 들어있고, 상태(3열) 배지·상세보기(5열) 버튼(<a> 아닌 <button onclick>)이 별도로 있는 변형 */
table.grid.integration-status__grid tr:hover td {
  background: var(--color-gray-75);
}
/* 상세보기 버튼 - 하단 "마이데이터 재동의"(.btn.btn-ghost)와 같은 색으로 통일 */
table.grid.integration-status__grid .btn-outline {
  background: var(--color-white);
  border-color: var(--color-border-strong);
  color: var(--color-text-heading);
}
table.grid.integration-status__grid .btn-outline:hover {
  background: var(--color-bg-subtle);
}
@media (max-width: 900px) {
  table.grid.integration-status__grid tr:hover,
  table.grid.integration-status__grid tr:hover td {
    background: transparent;
  }
  table.grid.integration-status__grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  table.grid.integration-status__grid td {
    height: auto;
  }
  /* No.는 모바일 카드에서 생략 */
  table.grid.integration-status__grid td:nth-child(1) {
    display: none;
  }
  /* 구분: 카드 상단 왼쪽, 굵게 18px, 1줄+ellipsis (2차 사업 뱃지 삭제로 순수 텍스트만 남음) */
  table.grid.integration-status__grid td:nth-child(2) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.integration-status__grid td:nth-child(2)::before {
    content: none;
  }
  table.grid.integration-status__grid td:nth-child(2) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 상태 배지: 구분 오른쪽, 두 번째 순서 */
  table.grid.integration-status__grid td:nth-child(3) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  table.grid.integration-status__grid td:nth-child(3)::before {
    content: none;
  }
  /* 상태변경일: 구분선 없이 라벨:값 행 */
  table.grid.integration-status__grid td:nth-child(4) {
    order: 2;
    border-bottom: none;
    padding: 0 var(--spacing-sm) var(--spacing-xs);
  }
  /* 상세보기(관리): '상세보기' 라벨 제거하고 버튼만 카드 폭 100%로 */
  table.grid.integration-status__grid td:nth-child(5) {
    order: 3;
    border-bottom: none;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
  }
  table.grid.integration-status__grid td:nth-child(5)::before {
    content: none;
  }
  table.grid.integration-status__grid td:nth-child(5) > .cell-content {
    width: 100%;
    justify-content: stretch;
  }
  table.grid.integration-status__grid td:nth-child(5) button {
    width: 100%;
  }
}

/* ---------- FR-CR-005 확장경력 목록 전용 스코프 ---------- */
/* FR-MY-002(나의 정보)의 첫 번째 탭도 id="tabset1-0"을 써서, FR-MY-002 전용 2열 그리드 레이아웃
   (#tabset1-0.tab-panel.active { display:grid; ... }, 위쪽 3890줄대)이 이 페이지의 자격증 탭에도
   그대로 적용돼 표·등록버튼·페이지네이션이 그리드 셀로 흩어져 반으로 갈라져 보이던 문제 - 이 페이지의
   자격증 탭(고유 클래스 extra-career__cert-grid로 식별)만 원래 블록 레이아웃으로 되돌림 */
#tabset1-0.tab-panel.active:has(.extra-career__cert-grid) {
  display: block;
  padding: 0;
}
/* FR-CR-001과 같은 구조(No./체크박스/제목/…/진행상태 배지/처리일). 탭 3개(자격증·학력·교육이수·상훈)가
   테이블마다 열 구성이 달라 공용 클래스 하나로 묶지 않고 각 테이블 실제 컬럼 위치에 맞춰 개별 스코프.
   처리일 열은 반려 상태일 때만 "날짜 + 반려사유 보기 버튼"이 같은 셀 안에 같이 들어있는 변형 —
   FR-CR-001처럼 버튼이 별도 열이 아니라서 라벨:값 행에 줄바꿈 허용만 추가 */
table.grid.extra-career__cert-grid tr:hover td,
table.grid.extra-career__edu-grid tr:hover td,
table.grid.extra-career__award-grid tr:hover td {
  background: var(--color-gray-75);
}
@media (max-width: 900px) {
  table.grid.extra-career__cert-grid tr:hover,
  table.grid.extra-career__cert-grid tr:hover td,
  table.grid.extra-career__edu-grid tr:hover,
  table.grid.extra-career__edu-grid tr:hover td,
  table.grid.extra-career__award-grid tr:hover,
  table.grid.extra-career__award-grid tr:hover td {
    background: transparent;
  }
  table.grid.extra-career__cert-grid tr,
  table.grid.extra-career__edu-grid tr,
  table.grid.extra-career__award-grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  table.grid.extra-career__cert-grid td,
  table.grid.extra-career__edu-grid td,
  table.grid.extra-career__award-grid td {
    height: auto;
  }
  /* No.는 모바일 카드에서 생략, 체크박스는 선택 기능이라 유지 */
  table.grid.extra-career__cert-grid td:nth-child(1),
  table.grid.extra-career__edu-grid td:nth-child(1),
  table.grid.extra-career__award-grid td:nth-child(1) {
    display: none;
  }
  table.grid.extra-career__cert-grid td:nth-child(2),
  table.grid.extra-career__edu-grid td:nth-child(2),
  table.grid.extra-career__award-grid td:nth-child(2) {
    order: -3;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-2xs) var(--spacing-sm) var(--spacing-sm);
  }
  /* 체크박스가 없는 행은 공용 `table.grid td:empty { display:none }`(5030행대)에 숨겨져
     제목이 카드 왼쪽 끝에 붙어 있었다 - 셀을 되살리되 체크박스 폭까지 비우지는 않고
     좌측 패딩(체크박스가 시작하는 위치)만큼만 확보해, 제목이 아래 라벨(취득일 등)과
     같은 x에서 시작하게 한다 */
  table.grid.extra-career__cert-grid td:nth-child(2):empty,
  table.grid.extra-career__edu-grid td:nth-child(2):empty,
  table.grid.extra-career__award-grid td:nth-child(2):empty {
    display: block;
    min-width: var(--spacing-sm);
    padding: 0;
  }
  table.grid.extra-career__cert-grid td:nth-child(2)::before,
  table.grid.extra-career__edu-grid td:nth-child(2)::before,
  table.grid.extra-career__award-grid td:nth-child(2)::before {
    content: none;
  }
  /* 제목(자격증명/학교명/명칭): 체크박스 오른쪽, 굵게 18px, 진행상태 배지와 한 줄
     자격증/학력=3열, 교육이수·상훈=4열(구분이 3열을 먼저 차지) */
  table.grid.extra-career__cert-grid td:nth-child(3),
  table.grid.extra-career__edu-grid td:nth-child(3),
  table.grid.extra-career__award-grid td:nth-child(4) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  table.grid.extra-career__cert-grid td:nth-child(3)::before,
  table.grid.extra-career__edu-grid td:nth-child(3)::before,
  table.grid.extra-career__award-grid td:nth-child(4)::before {
    content: none;
  }
  table.grid.extra-career__cert-grid td:nth-child(3) > .cell-content,
  table.grid.extra-career__edu-grid td:nth-child(3) > .cell-content,
  table.grid.extra-career__award-grid td:nth-child(4) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.extra-career__cert-grid td:nth-child(3) a,
  table.grid.extra-career__edu-grid td:nth-child(3) a,
  table.grid.extra-career__award-grid td:nth-child(4) a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 진행상태 배지: 제목 오른쪽. 자격증/학력=6열, 교육이수·상훈=7열 */
  table.grid.extra-career__cert-grid td:nth-child(6),
  table.grid.extra-career__edu-grid td:nth-child(7),
  table.grid.extra-career__award-grid td:nth-child(7) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  table.grid.extra-career__cert-grid td:nth-child(6)::before,
  table.grid.extra-career__edu-grid td:nth-child(7)::before,
  table.grid.extra-career__award-grid td:nth-child(7)::before {
    content: none;
  }
  /* 나머지 열: 구분선 없이 라벨:값 행 (자격증: 취득일4·발급기관5·처리일7 / 학력: 전공4·학위5·졸업년도6·처리일8 / 교육이수·상훈: 구분3·이수일5·기관6·처리일8) */
  table.grid.extra-career__cert-grid td:nth-child(4),
  table.grid.extra-career__cert-grid td:nth-child(5),
  table.grid.extra-career__cert-grid td:nth-child(7),
  table.grid.extra-career__edu-grid td:nth-child(4),
  table.grid.extra-career__edu-grid td:nth-child(5),
  table.grid.extra-career__edu-grid td:nth-child(6),
  table.grid.extra-career__edu-grid td:nth-child(8),
  table.grid.extra-career__award-grid td:nth-child(3),
  table.grid.extra-career__award-grid td:nth-child(5),
  table.grid.extra-career__award-grid td:nth-child(6),
  table.grid.extra-career__award-grid td:nth-child(8) {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  table.grid.extra-career__cert-grid td:nth-child(4) {
    order: 2;
    padding-top: var(--spacing-xs);
  }
  table.grid.extra-career__cert-grid td:nth-child(5) {
    order: 3;
  }
  table.grid.extra-career__cert-grid td:nth-child(7) {
    order: 4;
  }
  table.grid.extra-career__edu-grid td:nth-child(4) {
    order: 2;
    padding-top: var(--spacing-xs);
  }
  table.grid.extra-career__edu-grid td:nth-child(5) {
    order: 3;
  }
  table.grid.extra-career__edu-grid td:nth-child(6) {
    order: 4;
  }
  table.grid.extra-career__edu-grid td:nth-child(8) {
    order: 5;
  }
  table.grid.extra-career__award-grid td:nth-child(3) {
    order: 2;
    padding-top: var(--spacing-xs);
  }
  table.grid.extra-career__award-grid td:nth-child(5) {
    order: 3;
  }
  table.grid.extra-career__award-grid td:nth-child(6) {
    order: 4;
  }
  table.grid.extra-career__award-grid td:nth-child(8) {
    order: 5;
  }
  /* 반려사유 보기 버튼(자격증=8열, 학력=9열, 교육이수·상훈=9열): 라벨 제거, 폭 100%.
     버튼 없는 행은 공통 td:empty 규칙으로 자동 숨김 */
  table.grid.extra-career__cert-grid td:nth-child(8),
  table.grid.extra-career__edu-grid td:nth-child(9),
  table.grid.extra-career__award-grid td:nth-child(9) {
    order: 6;
    border-bottom: none;
    padding: 0 var(--spacing-sm) var(--spacing-sm);
  }
  table.grid.extra-career__cert-grid td:nth-child(8)::before,
  table.grid.extra-career__edu-grid td:nth-child(9)::before,
  table.grid.extra-career__award-grid td:nth-child(9)::before {
    content: none;
  }
  table.grid.extra-career__cert-grid td:nth-child(8) > .cell-content,
  table.grid.extra-career__edu-grid td:nth-child(9) > .cell-content,
  table.grid.extra-career__award-grid td:nth-child(9) > .cell-content {
    width: 100%;
    justify-content: stretch;
  }
  table.grid.extra-career__cert-grid td:nth-child(8) button,
  table.grid.extra-career__edu-grid td:nth-child(9) button,
  table.grid.extra-career__award-grid td:nth-child(9) button {
    width: 100%;
  }
}

/* ---------- FR-COM-013 나의 멘토링 문의내역 전용 스코프 ---------- */
/* FR-COM-005/002/006과 같은 리스트 테이블 스타일. 제목=3열·배지(답변상태)=6열
   (FR-COM-005/002와 열 위치가 달라 그대로 복붙하지 않고 이 테이블 실제 구성에 맞춤) */
table.grid.mentee-qna__grid tr:hover td {
  background: var(--color-gray-75);
}
@media (max-width: 900px) {
  table.grid.mentee-qna__grid tr:hover,
  table.grid.mentee-qna__grid tr:hover td {
    background: transparent;
  }
  table.grid.mentee-qna__grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  table.grid.mentee-qna__grid td {
    height: auto;
  }
  /* No.는 모바일 카드에서 생략 */
  table.grid.mentee-qna__grid td:nth-child(1) {
    display: none;
  }
  /* 제목: 카드 상단 왼쪽, 굵게 18px, 1줄+ellipsis, 답변상태 배지와 한 줄 */
  table.grid.mentee-qna__grid td:nth-child(3) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-text-body);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.mentee-qna__grid td:nth-child(3)::before {
    content: none;
  }
  table.grid.mentee-qna__grid td:nth-child(3) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.mentee-qna__grid td:nth-child(3) a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
  }
  /* 답변상태 배지: 제목 오른쪽, 두 번째 순서 */
  table.grid.mentee-qna__grid td:nth-child(6) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  table.grid.mentee-qna__grid td:nth-child(6)::before {
    content: none;
  }
  /* 멘토명/공개여부/등록일: 구분선 없이 라벨:값 행 */
  table.grid.mentee-qna__grid td:nth-child(2),
  table.grid.mentee-qna__grid td:nth-child(4),
  table.grid.mentee-qna__grid td:nth-child(5) {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  table.grid.mentee-qna__grid td:nth-child(2) {
    order: 2;
    padding-top: var(--spacing-xs);
  }
  table.grid.mentee-qna__grid td:nth-child(4) {
    order: 3;
  }
  table.grid.mentee-qna__grid td:nth-child(5) {
    order: 4;
    padding-bottom: var(--spacing-sm);
  }
}
/* Figma Section Header, node 2616:12666 */
.mentee-qna__section-head {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) 0 var(--spacing-md);
  border-bottom: 1px solid var(--color-border-strong);
}
.mentee-qna__section-head-text {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-2xs);
}
.mentee-qna__section-head-title {
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
}
.mentee-qna__section-head-desc {
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.mentee-qna__register-btn {
  flex: none;
}
@media (max-width: 744px) {
  .mentee-qna__section-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .mentee-qna__section-head-title {
    font-size: 20px;
  }
  .mentee-qna__section-head-desc {
    font-size: 14px;
  }
}
/* Figma Notice/Toolbar, node 2658:18303 */
.mentee-qna__toolbar {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px;
  margin-bottom: 0;
}
@media (max-width: 744px) {
  .mentee-qna__toolbar {
    min-height: unset;
  }
}

/* ---------- FR-COM-005 설문 목록·응답·참여내역 전용 스코프 ---------- */
/* PC(데스크톱) 열 너비: 셀마다 nth-child로 반복 지정하지 않고 colgroup의 col에 클래스로 한 번만 지정.
   table-layout:fixed + 설문 제목 col만 폭 미지정(=나머지 열 폭을 다 뺀 공간을 혼자 차지)이어야
   지정한 폭들이 실제로 반영된다 — auto 레이아웃에선 title=100%가 다른 열 폭 지정을 계속 무시했다 */
#FR-COM-005-1-tabs-0 table.grid,
#FR-COM-005-1-tabs-1 table.grid {
  table-layout: fixed;
}
.fr-com-005-list__col-date {
  width: 195px;
}
.fr-com-005-list__col-no {
  width: 100px;
}
.fr-com-005-list__col-target {
  width: 160px;
}
.fr-com-005-list__col-status {
  width: 240px;
}
.fr-com-005-list__col-manage {
  width: 160px;
}
#FR-COM-005-1-tabs-0 table.grid td,
#FR-COM-005-1-tabs-1 table.grid td {
  white-space: nowrap;
}
#FR-COM-005-1-tabs-0 table.grid td:nth-child(3),
#FR-COM-005-1-tabs-1 table.grid td:nth-child(3) {
  white-space: normal;
}
/* 관리 열 '응답하기' 링크 → Figma Button/Basic Type=Secondary·Size=sm(node 2290:2908) 모양으로.
   HTML(<a>)은 그대로 두고 CSS로만. Default: 흰 배경 + 파란 테두리·텍스트 #2d65f2 / Hover: bg #eaf0fe / Pressed: bg #eaf0fe + 테두리·텍스트 #163da8 */
#FR-COM-005-1-tabs-0 table.grid td:nth-child(6) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  height: 36px;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--color-primary);
  font-family: "Pretendard", sans-serif;
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  white-space: nowrap;
}
#FR-COM-005-1-tabs-0 table.grid td:nth-child(6) a:hover {
  background: var(--color-primary-bg);
}
#FR-COM-005-1-tabs-0 table.grid td:nth-child(6) a:active {
  background: var(--color-primary-bg);
  border-color: var(--color-primary-pressed);
  color: var(--color-primary-pressed);
}
/* 바디 행 hover 배경: 공통 var(--bg) #f6f8fb → #fafafa로 변경 */
#FR-COM-005-1-tabs-0 table.grid tr:hover td,
#FR-COM-005-1-tabs-1 table.grid tr:hover td {
  background: var(--color-gray-75);
}

/* 모바일 카드뷰(공통 table.grid 카드 시스템, max-width:900px, 3273번째 줄 부근 + design.js의
   data-label/.cell-content 자동 처리)는 그대로 재사용한다. 이 스코프는 그 위에 "설문 제목"(3번째 열)과
   "응답상태" 배지(5번째 열)만 예외적으로 한 줄에 나란히 붙이는 오버라이드다.
   Figma Notice/Table-Mobile(node 2620:14640) 스펙: 제목(18px Bold)+배지가 상단 헤더 행.
   공통 시스템의 `table.grid td{width:100% !important}`를 이겨야 해서 !important 사용 — 내용/데이터는 변경 없음 */
@media (max-width: 900px) {
  /* 모바일(터치)은 hover 개념이 없으므로 행 hover 배경(#fafafa) 제거 — 카드 흰 배경 유지.
     tr:hover td만으로는 부족 — 공통 시스템이 tr:hover 자체에도 var(--bg) 틴트를 주므로 같이 리셋 */
  #FR-COM-005-1-tabs-0 table.grid tr:hover,
  #FR-COM-005-1-tabs-1 table.grid tr:hover {
    background: var(--white, #fff);
  }
  #FR-COM-005-1-tabs-0 table.grid tr:hover td,
  #FR-COM-005-1-tabs-1 table.grid tr:hover td {
    background: transparent;
  }
  /* 카드 배경/테두리/radius: Figma 스펙(#dadfe6, 12px, 흰 배경)에 맞춰 공통 시스템(--line #d7dce5, radius 8px) 오버라이드 */
  #FR-COM-005-1-tabs-0 table.grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  /* 데스크톱 table.grid td{height:52px}가 모바일 카드 시스템에서도 리셋 안 되고 남아있어서
     패딩을 줄여도 각 행이 52px로 고정돼 있었다 — 콘텐츠+패딩만큼만 차지하도록 해제 */
  #FR-COM-005-1-tabs-0 table.grid td {
    height: auto;
  }
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(1),
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(2),
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(4),
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(6) {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  /* 마감일/대상여부/관리를 하나의 body 그룹으로 묶어 행간 8px만 주고, 구분선은 넣지 않는다 (Figma: body 래퍼, 라인 없음) */
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(2),
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(4) {
    padding-bottom: var(--spacing-xs);
  }
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(6) {
    padding-bottom: var(--spacing-sm);
  }
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(3),
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(5) {
    width: auto !important;
    border-bottom: none;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
  }
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(3) {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(5) {
    padding-left: 0;
    padding-right: var(--spacing-sm);
  }
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(3)::before,
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(5)::before {
    content: none;
  }
  /* 제목: 남는 공간 전부 차지, 굵게 18px, 항상 첫 순서, 1줄로만 노출(넘치면 ...) */
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(3) {
    order: -2;
    flex: 1 1 0%;
    min-width: 0;
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-text-body);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* .cell-content(design.js가 자동으로 감싸는 wrapper)는 기본이 justify-content:flex-end라
     제목이 오른쪽으로 붙는다 — Figma대로 왼쪽 정렬로 오버라이드. min-width:0 없으면 flex 아이템이
     콘텐츠 폭 이하로 안 줄어들어 ellipsis가 동작하지 않는다 */
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(3) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 응답상태 배지: 제목 오른쪽에 고정폭, 두 번째 순서 */
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(5) {
    order: -1;
    flex: 0 0 auto;
  }
  /* No.는 모바일 카드에서 생략 */
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(1) {
    display: none;
  }
  /* 나머지(마감일/대상여부/관리)는 공통 시스템 그대로 두되, 항상 제목·배지 다음 순서로 나오게만 지정 */
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(2) {
    order: 2;
  }
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(4) {
    order: 3;
  }
  /* 관리(응답하기 버튼): 모바일에선 '관리' 라벨 제거하고 버튼만 카드 폭 100%로 꽉차게 */
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(6) {
    order: 4;
  }
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(6)::before {
    content: none;
  }
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(6) > .cell-content {
    width: 100%;
    justify-content: stretch;
  }
  #FR-COM-005-1-tabs-0 table.grid td:nth-child(6) a {
    width: 100%;
  }
  /* 마감일/대상여부 등 라벨:값 행 — Figma(node 2870:11337) 스펙: 라벨 16px Regular
     --text/tertiary(#767676) · 값 16px Regular --text/body(#333, 공통 시스템 기본값과 이미 동일).
     공통 카드 시스템의 라벨(4803행 부근)은 font-weight:600·color:#333라 굵기·색이 달랐음 - 이 페이지만 교정 */
  #FR-COM-005-1-tabs-0 table.grid td::before,
  #FR-COM-005-1-tabs-1 table.grid td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }

  /* 나의 참여내역(tabs-1): No./참여일/설문 제목/상태 — tabs-0와 동일한 패턴, 컬럼 수만 다름 */
  #FR-COM-005-1-tabs-1 table.grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  #FR-COM-005-1-tabs-1 table.grid td {
    height: auto;
  }
  /* No.는 모바일 카드에서 생략 */
  #FR-COM-005-1-tabs-1 table.grid td:nth-child(1) {
    display: none;
  }
  /* 참여일: 제목·배지 다음, 구분선 없이 상하 12px 패딩만 */
  #FR-COM-005-1-tabs-1 table.grid td:nth-child(2) {
    order: 2;
    border-bottom: none;
    padding: var(--spacing-sm);
  }
  /* 설문 제목: 남는 공간 전부 차지, 굵게 18px, 첫 순서, 1줄로만 노출(넘치면 ...) */
  #FR-COM-005-1-tabs-1 table.grid td:nth-child(3) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-text-body);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  #FR-COM-005-1-tabs-1 table.grid td:nth-child(3)::before {
    content: none;
  }
  #FR-COM-005-1-tabs-1 table.grid td:nth-child(3) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 상태 배지: 제목 오른쪽, 두 번째 순서 */
  #FR-COM-005-1-tabs-1 table.grid td:nth-child(4) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  #FR-COM-005-1-tabs-1 table.grid td:nth-child(4)::before {
    content: none;
  }
}

/* ---------- FR-MY-001 홈(대시보드) 최근 알림 전용 스코프 ---------- */

/* ---------- Badge / status pill ---------- */
.badge {
  display: inline-block;
  min-width: 42px;
  font-size: var(--font-size-14);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-align: center;
}
.badge-green {
  background: var(--green-bg);
  color: var(--green);
} /* approved, active, connected, issued */
.badge-blue {
  background: var(--blue-50);
  color: var(--blue-600);
} /* in-review, assigned, waiting */
.badge-amber {
  background: var(--amber-bg);
  color: var(--amber);
} /* pending */
.badge-red {
  background: var(--red-bg);
  color: var(--red);
} /* rejected, suspended, error, revoked */
.badge-error {
  background: var(--color-status-error-bg);
  color: var(--color-status-error);
} /* 중요/긴급 표시 (Figma status/error) */
.badge-gray {
  background: var(--gray-bg);
  color: var(--text-500);
} /* withdrawn, expired, not-ready, prep */
.badge-purple {
  background: var(--purple-bg);
  color: var(--purple);
} /* escalated */
.req-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--blue-50);
  color: var(--blue-600);
  margin-left: 6px;
}
.opt-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--gray-bg);
  color: var(--text-500);
  margin-left: 6px;
}

/* ---------- Tabs (Figma Tab Group/Round 2793:11322 - 영역 공통) ----------
   알약(pill) 형태의 공통 탭. .tabs / .tab-btn 을 쓰는 모든 화면에 함께 적용된다. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3xs);
  height: 44px;
  padding: 0 var(--spacing-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: var(--font-size-body-m);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  cursor: pointer;
}
.tab-btn.active {
  border-color: var(--color-primary);
  font-weight: 600;
  color: var(--color-primary);
}
@media (max-width: 744px) {
  .tabs {
    gap: 4px;
  }
  .tab-btn {
    height: 36px;
  }
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

/* ---------- Timeline / progress steps ----------
   회원가입 스테퍼(.signup-wrap .timeline, Figma node 121:163)와 동일한 형태 - 50px 서클 + 커넥터 라인.
   라벨이 긴 화면(증명서 발급 신청 등)도 겹치지 않도록 스텝을 균등 분할하고 커넥터가 서클 사이를 잇는다. */
.timeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: var(--spacing-xl) 0 0;
  flex-wrap: nowrap;
  border: none;
  background: none;
}
.timeline .step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  min-width: 0;
  max-width: 200px;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: var(--line-height-base);
  color: var(--color-text-disabled);
  text-align: center;
  white-space: nowrap;
}
/* 커넥터 라인 - 앞 서클 오른쪽 끝에서 뒤 서클 왼쪽 끝까지 */
.timeline .step + .step::before {
  content: "";
  position: absolute;
  left: calc(-50% + 25px);
  top: 25px;
  width: calc(100% - 50px);
  height: 2px;
  background: var(--color-border-default);
  transform: translateY(-50%);
  z-index: 0;
}
.timeline .step.done + .step::before {
  background: var(--color-primary);
}
/* 서클 인디케이터 - 커넥터 라인 위로 보이게 z-index로 쌓임 순서 지정 */
.timeline .step .n {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin: 0;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-size: var(--font-size-17);
  font-weight: 400;
  color: var(--color-gray-550);
  opacity: 1;
}
/* 완료 */
.timeline .step.done {
  color: var(--color-text-body);
}
.timeline .step.done .n {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0;
}
.timeline .step.done .n::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7.5L5.8 10L11 4.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 14px 14px;
}
/* 현재 활성 */
.timeline .step.current {
  color: var(--color-text-body);
  animation: timeline-step-current-text-pulse 1.3s ease-out infinite;
}
/* 라벨 텍스트도 서클과 같은 박자로 강조색을 오가며 지금 단계임을 알린다 */
@keyframes timeline-step-current-text-pulse {
  0%,
  100% {
    color: var(--color-text-body);
  }
  50% {
    color: var(--color-primary);
  }
}
.timeline .step.current .n {
  border-color: var(--color-primary);
  background: var(--color-white);
  font-size: var(--font-size-17);
  font-weight: 700;
  color: var(--color-primary);
  animation: timeline-step-current-pulse 1.3s ease-out infinite;
}
/* 지금 이 단계에 있다는 느낌을 주는 펄스 링 + 크기 변화 */
@keyframes timeline-step-current-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(45, 101, 242, 0.35);
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(45, 101, 242, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(45, 101, 242, 0);
    transform: scale(1);
  }
}

.level-bar {
  height: 10px;
  border-radius: 6px;
  background: #eef1f6;
  overflow: hidden;
  margin: 14px 0 8px;
}
.level-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-600));
  border-radius: 6px;
}
.level-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-500);
}
.level-row b {
  color: var(--navy-900);
}

/* ---------- Notification / list ---------- */
.noti-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.noti-item:last-child {
  border-bottom: none;
}
.noti-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-500);
  margin-top: 6px;
  flex: none;
}
.noti-item.read .noti-dot {
  background: var(--text-400);
}
.noti-text {
  font-size: 13.5px;
  color: var(--text-700);
}
.noti-date {
  font-size: 11.5px;
  color: var(--text-400);
  margin-top: 2px;
}

/* ---------- Modal ---------- */
/* 모달 - Figma Modal(node 114:150) 기준.
   컨테이너 padding 20/0/24, 섹션 좌우 24, 블록 간 gap 16, actions padding-top 12,
   타이포(Heading/H2 22 Bold, Body/M 16 Regular), 닫기 아이콘 32px, 버튼 h40 r4까지 전부 피그마 값. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-dim);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-overlay.open {
  display: flex;
}
.modal-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-md);
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg) 0 var(--spacing-xl);
  width: 400px;
  max-width: 90vw;
  box-shadow: var(--shadow-lg);
}
/* 모바일: 화면 좌우로 정확히 12px씩만 남도록 (90vw 대신 고정폭 기준) */
@media (max-width: 744px) {
  .modal-box {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
}
/* 타이틀 - Figma Heading/H2 22 Bold (text/heading #111, line-height 1.4)
   header 영역: padding-left 24 / padding-right 16 + 닫기 버튼(32px) 자리 확보 */
.modal-box h4 {
  margin: 0;
  padding: 0 60px 0 var(--spacing-xl);
  font-size: var(--font-size-22);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}
/* 본문 - Figma Body/M 16 Regular (text/body #333, line-height 1.5) */
.modal-box p {
  margin: 0;
  padding: 0 var(--spacing-xl);
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}
/* 본문 영역에 폼 등 p 이외의 블록이 오는 경우도 contents 좌우 padding 24 동일 적용 */
.modal-box > .form-grid {
  padding: 0 var(--spacing-xl);
}
/* 닫기 버튼 - Figma close(node 114:153) 32x32, header 우측 padding 16 / 상단 padding 20 */
.modal-close {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-text-tertiary);
}
.modal-close svg {
  width: 32px;
  height: 32px;
}
.modal-close:hover {
  color: var(--color-text-heading);
}
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-xl) 0;
}
/* 모달 버튼 - Figma Button/Basic (h40, radius 4, padding 0 20, Body/S 15 SemiBold) */
.modal-actions .btn {
  height: 40px;
  border-radius: var(--radius-xs);
  padding: 0 var(--spacing-lg);
  font-size: var(--font-size-15);
  font-weight: 600;
}

/* ============================================================
   FR-COM-002 상담 상세 모달 본문 (Figma Modal node 2716:20559)
   공통 .modal-box p 대신, "라벨(고정폭, tertiary) + 값(flex:1, body)" row 패턴으로 표시.
   공통 .modal-box p의 좌우 padding 24는 row 컨테이너 하나에만 주고 개별 p에서는 제거.
   ============================================================ */
.counsel-detail-modal__contents {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-xl);
}
.counsel-detail-modal__row {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}
/* .modal-box p(패딩24/색#333)보다 특이도가 낮으면 무시되므로 반드시 .modal-box를 같이 붙인다 */
.modal-box .counsel-detail-modal__label {
  padding: 0;
  flex: 0 0 80px;
  color: var(--color-text-tertiary);
}
.modal-box .counsel-detail-modal__value {
  padding: 0;
  flex: 1 1 0%;
  min-width: 0;
  color: var(--color-text-body);
}
/* '재상담 신청' 버튼만 파란 라인 버튼(Figma Secondary)으로 — '닫기'는 그대로 Neutral(회색 라인) 유지.
   두 버튼이 같은 class(btn btn-ghost)를 쓰므로 HTML을 건드리지 않고 :first-child로 구분 */
#counselDetail .modal-actions .btn:first-child {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
#counselDetail .modal-actions .btn:first-child:hover {
  background: var(--color-primary-bg);
}
#counselDetail .modal-actions .btn:first-child:active {
  background: var(--color-primary-bg);
  border-color: var(--color-primary-pressed);
  color: var(--color-primary-pressed);
}

/* ============================================================
   FR-MY-002 회원탈퇴 확인 모달 (Figma node 2652:10197, Modal 538x389)
   공통 .modal-* 스펙(node 114:206)은 그대로 두고,
   이 인스턴스에서 달라지는 값(폭 538 / 콘텐츠 490 / 경고 문구 색 / 버튼 순서)만 덮어쓴다.
   ============================================================ */
/* 내정보 탭(#tabset1-0)의 '회원탈퇴' 링크가 #tabset1-1 안의 모달을 열기 때문에,
   부모 탭 패널이 display:none 이면 모달이 열려도 화면에 안 나온다.
   마크업을 옮길 수 없으므로 모달이 열린 동안에만 패널을 띄우고,
   패널 안의 다른 콘텐츠(안내문/버튼)는 감춰서 모달만 보이게 한다. */
#tabset1-1:not(.active):has(#withdrawConfirm.open) {
  display: block;
}
#tabset1-1:not(.active):has(#withdrawConfirm.open) > :not(#withdrawConfirm) {
  display: none;
}

/* Modal 538 = 좌우 padding 24 + 콘텐츠 490 */
#withdrawConfirm .modal-box {
  width: 538px;
}
/* '정말 탈퇴하시겠습니까?' - Figma Body/M 16 SemiBold, status/error */
#withdrawConfirm .page-desc {
  margin: 0;
  font-size: var(--font-size-16);
  font-weight: 600;
  line-height: var(--line-height-base);
  color: var(--color-status-error);
}
/* Form Field 490 - 모달 안에서는 1열 전체 폭 */
#withdrawConfirm .modal-box > .form-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-md);
}
#withdrawConfirm .modal-box .form-row {
  margin-bottom: 0;
  gap: var(--spacing-xs);
}
/* 라벨 - Figma Body/S 15 Regular (text/body #333), 좌우 padding 2 */
#withdrawConfirm .modal-box .form-row > label {
  padding: 0 2px;
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--color-text-body);
}
#withdrawConfirm .modal-box .form-row__control {
  min-height: 44px;
}
/* Field Message - Figma Caption/S 13 Regular, 좌우 padding 2 */
#withdrawConfirm .modal-box .form-hint {
  padding: 0 2px;
  line-height: var(--line-height-tight);
}
/* Callout Box - 모달 좌우 padding 24 안쪽 490, 바깥 여백은 modal-box gap 16 이 담당 */
#withdrawConfirm .alert-box {
  margin: 0 var(--spacing-xl);
}
#withdrawConfirm
  .modal-box
  .form-row__control
  > input:not([type="radio"]):not([type="checkbox"]) {
  flex: 1 0 0;
  min-width: 40px;
}

/* 태블릿/모바일: 모달 폭 고정 해제 — 다른 팝업과 동일하게 화면 좌우 12px씩만 남도록 */
@media (max-width: 1295px) {
  #withdrawConfirm .modal-box {
    width: min(538px, calc(100vw - 24px));
  }
}

/* ---------- Alert box ---------- */
.alert-box {
  display: flex;
  gap: 12px;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
  font-size: 13px;
}
.alert-box.warn {
  background: var(--red-bg);
  border: 1px solid #f3c6c9;
  color: #8c2c33;
}
/* Figma CalloutBox / Property 1=Info (node 2620:16627) - 테두리 없음, blue/50 배경 + blue/500 텍스트 */
.alert-box.info {
  align-items: flex-start;
  gap: var(--spacing-10);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-blue-50);
  color: var(--color-blue-500);
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
}
/* Figma CalloutBox / 경고(node 2652:10195) - 테두리 없음, status/error-bg 배경 + status/error 텍스트 */
.alert-box.error {
  align-items: flex-start;
  gap: var(--spacing-10);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-status-error-bg);
  color: var(--color-status-error);
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
}
.alert-box.error .ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
}
.alert-box__error-icon {
  width: 23px;
  height: 23px;
}
.alert-box .ico {
  font-size: 18px;
}
/* 텍스트 글리프(ℹ)는 감추고 피그마 아이콘 에셋(23px)을 배경으로 표시 */
.alert-box.info .ico {
  flex: none;
  width: 23px;
  height: 23px;
  font-size: 0;
  color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath d='M11.5 20.7C16.581 20.7 20.7 16.581 20.7 11.5C20.7 6.41898 16.581 2.3 11.5 2.3C6.41898 2.3 2.3 6.41898 2.3 11.5C2.3 16.581 6.41898 20.7 11.5 20.7Z' stroke='%233C66F6' stroke-width='1.6'/%3E%3Cpath d='M11.5 7.0725V12.8225' stroke='%233C66F6' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M11.5 15.6975V15.9275' stroke='%233C66F6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / 23px 23px;
}
.alert-box b {
  display: block;
  margin-bottom: 4px;
  font-size: 13.5px;
}

/* ---------- Card list (사용처/카드형 목록) ---------- */
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.item-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px;
  box-shadow: var(--shadow);
}
.item-card h4 {
  margin: 0 0 6px;
  font-size: 14px;
}
.item-card p {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-500);
}

/* CO-TAL-001(인재 검색) 분할형 목록 - .card-list/.item-card 그리드형 대신 세로로 쌓고,
   카드 안을 아바타(좌) + 내용(우)로 나눈다. 이 변형은 talentSearch.jsp에서 처음 쓰여 새로 추가한다. */
.card-list--split {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.item-card--split {
  display: flex;
  align-items: center;
  gap: 20px;
}
.item-card__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: none;
  width: 88px;
  text-align: center;
}
.thumb-initial {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue-500);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-card__name {
  font-size: 13px;
  color: var(--navy-900);
}
.item-card__main {
  flex: 1 1 auto;
  min-width: 0;
}
.item-card__main h4 {
  margin: 0 0 4px;
}
.item-card__main p {
  margin: 0 0 10px;
}
@media (max-width: 640px) {
  .item-card--split {
    flex-direction: column;
    align-items: flex-start;
  }
  .item-card__side {
    flex-direction: row;
    width: auto;
  }
}
/* 스크랩 등록 상태(talentSearch.jsp) - .btn-outline 눌린 상태를 나타내는 범용 토글 modifier가
   없어서 새로 추가한다. career-list__toolbar-count 등에서 쓰는 blue 톤과 맞춘다. */
.btn-outline.btn-active {
  border-color: var(--blue-600);
  color: var(--blue-600);
  background: var(--blue-50);
}

/* ============================================================
   FR-MY-002 내정보관리 · 프로필 수정 (Figma node 2652:10122)
   content 1100 / form-card 좌우 padding 40 → 콘텐츠 폭 1020
   좌측 컬럼 490 + column-gap 40 + 우측 컬럼 490
   마크업(태그/클래스) 변경 없이 CSS만으로 피그마 배치를 재현하기 위해
   #tabset1-0 을 그리드로 잡고 .form-grid 는 display:contents 로 풀어
   각 .form-row 를 섹션 그리드에 직접 배치한다.
   ============================================================ */
#tabset1-0.tab-panel.active {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: var(--spacing-xl);
  align-content: start;
  padding: 0 40px;
}
/* 페이지 진입 시 내용이 살짝 아래에서 올라오며 나타나는 연출.
   .form-grid는 display:contents라 그 자체엔 박스가 없어 애니메이션이 안 먹으므로
   실제 박스를 가진 자식(.form-row 등)에 직접 건다. form-card__head(제목)는 제외. */
body:has(.my-info__withdraw-link) #tabset1-0.tab-panel.active > .profile-photo-row,
body:has(.my-info__withdraw-link) #tabset1-0.tab-panel.active > .my-info__withdraw-link,
body:has(.my-info__withdraw-link) #tabset1-0.tab-panel.active > .btn-row,
body:has(.my-info__withdraw-link) #tabset1-0.tab-panel.active .form-grid > .form-row {
  opacity: 0;
  transform: translateY(16px);
  animation: my-info-tab-fade-in 0.5s ease-out forwards;
}
@keyframes my-info-tab-fade-in {
  to {
    opacity: 1;
    transform: none;
  }
}
#tabset1-0 > .form-card__head {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 0;
}
#tabset1-0 > .form-grid {
  display: contents;
}
/* 좌측 컬럼(아이디/비밀번호) 2~3행, 우측 상단은 프로필 영역이 차지 */
#tabset1-0 > .form-grid > .form-row:nth-child(1) {
  grid-column: 1;
  grid-row: 2;
}
#tabset1-0 > .form-grid > .form-row:nth-child(2) {
  grid-column: 1;
  grid-row: 3;
}
#tabset1-0 > .form-grid > .form-row:nth-child(3) {
  grid-column: 1;
  grid-row: 4;
}
#tabset1-0 > .form-grid > .form-row:nth-child(4) {
  grid-column: 2;
  grid-row: 4;
}
#tabset1-0 > .form-grid > .form-row:nth-child(5) {
  grid-column: 1;
  grid-row: 5;
}
#tabset1-0 > .form-grid > .form-row:nth-child(6) {
  grid-column: 2;
  grid-row: 5;
}
#tabset1-0 > .form-grid > .form-row.full {
  grid-column: 1 / -1;
  grid-row: 6;
}
#tabset1-0 > .my-info__withdraw-link {
  grid-column: 1 / -1;
  grid-row: 7;
}
#tabset1-0 > .btn-row {
  grid-column: 1 / -1;
  grid-row: 8;
}

/* Form Field (Figma Form Field: column, gap 8) */
#tabset1-0 .form-row {
  margin-bottom: 0;
  gap: var(--spacing-xs);
}
#tabset1-0 .form-row > label {
  padding: 0 2px;
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--color-gray-700);
}
#tabset1-0 .form-row > label .req {
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-required);
}
#tabset1-0 .form-row__control {
  width: 100%;
  min-height: 44px;
}
#tabset1-0
  .form-row__control
  > input:not([type="radio"]):not([type="checkbox"]) {
  flex: 1 0 0;
  min-width: 40px;
}
/* 비밀번호 변경 - Button/Basic secondary (h44 / px20 / radius 4) */
#tabset1-0 .form-row__control > .btn.btn-sm {
  height: 44px;
  padding: 0 20px;
  font-size: var(--font-size-15);
  font-weight: 600;
  border-radius: var(--radius-xs);
  flex: none;
}

/* 프로필 사진 영역 (Figma Profile Edit: 140 x 196, 우측 상단) */
#tabset1-0 > .profile-photo-row {
  grid-column: 2;
  grid-row: 2 / span 2;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 140px;
}
.profile-photo-row__thumb {
  flex: none;
  width: 140px;
}
.profile-photo-row__field {
  flex: none;
  width: 100%;
  min-width: 0;
}
/* 피그마에는 '프로필 사진' 라벨과 '선택된 파일 없음' 텍스트가 없다 */
#tabset1-0 .profile-photo-row__field .form-grid {
  display: block;
}
#tabset1-0 .profile-photo-row__field .form-row > label {
  display: none;
}
#tabset1-0 .profile-photo-row__field .form-row__control {
  justify-content: center;
  min-height: 0;
}
#tabset1-0 .upload-box > .browse + span {
  display: none;
}
.item-card.profile-photo-row__placeholder {
  width: 140px;
  height: 160px;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  background: var(--color-bg-subtle);
  box-shadow: none;
  overflow: hidden;
  position: relative;
}
.profile-photo-row__placeholder-icon {
  position: absolute;
  top: 19.25px;
  right: -6.07px;
  bottom: -38.45px;
  left: -6.07px;
  width: auto;
  height: auto;
  max-width: none;
}

/* 사진변경 (Figma Button/Text) */
.upload-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: inherit;
  font-size: var(--font-size-14);
}
.upload-box .browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs) var(--spacing-2xs);
  border-radius: var(--radius-xs);
  color: var(--color-primary);
  font-weight: 500;
  font-size: var(--font-size-14);
  cursor: pointer;
}
.upload-box__camera-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

/* 직종 체크박스 그룹 (Figma: gap 24 / h44 / 체크박스 20x20 radius 4) */
#tabset1-0 .checkbox-row {
  gap: 0 var(--spacing-xl);
  min-height: 44px;
}
#tabset1-0 .checkbox-row label {
  gap: var(--spacing-xs);
  font-size: var(--font-size-16);
  color: var(--color-gray-700);
}
#tabset1-0 input[type="checkbox"] {
  border-radius: var(--radius-xs);
}

/* 인재풀 등록 여부 카드 (Figma: bg #eaf0fe / padding 24 32 / radius 8) */
#tabset1-0 > .form-grid > .form-row.full {
  background: var(--color-primary-bg);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl) var(--spacing-2xl);
  gap: var(--spacing-lg);
}
#tabset1-0 > .form-grid > .form-row.full > .form-row__control {
  min-height: 0;
  gap: var(--spacing-xs);
}
/* 마크업의 인라인 margin-top:6px 무력화 (HTML 수정 금지 조건이라 !important 사용) */
#tabset1-0 > .form-grid > .form-row.full > .form-hint {
  margin-top: 0 !important;
  font-size: var(--font-size-13);
}

/* 인재풀 토글 스위치 (Figma: 36x20, thumb 16, on = --color-primary) */
.toggle-switch {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.toggle-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.toggle-switch__track {
  position: absolute;
  inset: 0;
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
  transition: background 0.15s;
}
.toggle-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--color-white);
  border-radius: 50%;
  transition: left 0.15s;
}
.toggle-switch input:checked ~ .toggle-switch__track {
  background: var(--color-primary);
}
.toggle-switch input:checked ~ .toggle-switch__track .toggle-switch__thumb {
  left: 18px;
}
/* 인재풀 등록 토글 ON일 때만 보이는 레이블 텍스트 - HTML 수정 없이 CSS 생성 콘텐츠(::after)로만 처리 */
.form-row__control:has(> .toggle-switch input:checked)::after {
  content: "인재풀 등록";
  font-size: var(--font-size-14);
  color: var(--color-primary);
}

/* 회원탈퇴 (Figma Frame 409: 우측 정렬 Button/Text) */
.my-info__withdraw-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.my-info__withdraw-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs) var(--spacing-2xs);
  border-radius: var(--radius-xs);
  color: var(--color-text-heading);
  font-size: var(--font-size-13);
  cursor: pointer;
}
.my-info__withdraw-icon {
  width: 5.3px;
  height: 9.3px;
  flex: none;
}

/* Actions (Figma: 우측 정렬 / gap 8 / padding-top 24 + 그리드 row-gap 24 = 56) */
#tabset1-0 > .btn-row {
  margin-top: 0;
  padding-top: var(--spacing-2xl);
  gap: var(--spacing-xs);
  justify-content: flex-end;
  flex-wrap: nowrap;
}
#tabset1-0 > .btn-row > .btn {
  border-radius: var(--radius-xs);
}
/* 피그마 버튼 순서(... 취소 → 저장)에 맞춰 저장을 마지막으로 */
#tabset1-0 > .btn-row > .btn-primary {
  order: 1;
}

/* 태블릿/모바일: 그리드를 세로 flex로 전환한다.
   grid로 두면 데스크톱의 `... > .form-row:nth-child(n)` 선택자가
   미디어쿼리 규칙보다 우선순위가 높아서 연락처/직종이 계속 2열에 남는다.
   flex 컨테이너에서는 grid-column/grid-row가 무시되므로 한 번에 1열로 정리된다. */
@media (max-width: 1295px) {
  #tabset1-0.tab-panel.active {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xl);
    padding: 0;
  }
  /* 타이틀 → 프로필 사진 → 나머지 입력 항목(각 1줄) → 회원탈퇴 → 버튼 */
  #tabset1-0 > .form-card__head {
    order: -2;
  }
  #tabset1-0 > .profile-photo-row {
    order: -1;
    align-self: flex-start;
  }
  #tabset1-0 > .my-info__withdraw-link {
    order: 1;
  }
  #tabset1-0 > .btn-row {
    order: 2;
  }
}
@media (max-width: 744px) {
  #tabset1-0 > .form-grid > .form-row.full {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  #tabset1-0 .checkbox-row {
    gap: 0 var(--spacing-md);
  }
}
/* ---------- QR / placeholder box ---------- */
.qr-box {
  width: 150px;
  height: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: repeating-linear-gradient(
    45deg,
    #eef1f6,
    #eef1f6 6px,
    #fff 6px,
    #fff 12px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-400);
  font-size: 12px;
  margin: 0 auto;
}
.chart-placeholder {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfd;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-400);
  font-size: 12.5px;
}

/* ---------- Footer ---------- */
footer.foot {
  padding: 20px 32px 36px;
  font-size: 11.5px;
  color: var(--text-400);
  text-align: center;
}

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

/* =========================================================
   Sidebar layout (wireframe_v.2 IA: 상단 4대분류 GNB + 좌측 2·3단 사이드바)
   화면 대분류가 "layout: sidebar"인 화면(마이페이지 하위 전체)에서 사용.
   ========================================================= */
.body-with-sidebar {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 100px;
  flex: 1 0 auto;
}
.sub-visual + .body-with-sidebar {
  margin-top: 56px;
}
.content-area:has(.cs-detail-section) > .page-head,
.content-area:has(.cs-detail-section) > main {
  display: none;
}
/* 상세 섹션 존재 시 body-with-sidebar 하단 패딩 제거 (cs-detail-section이 직접 100px 패딩 보유) */
.body-with-sidebar:has(.cs-detail-section) {
  padding-bottom: 0;
}
@media (max-width: 1295px) {
  /* 서브페이지 GNB는 design.css :has(.body-with-sidebar) 규칙으로 처리 */
  .sidebar {
    display: none;
  }
  .content-area {
    flex: 1 0 auto;
    width: 100%;
  }
}
@media (max-width: 744px) {
  .body-with-sidebar {
    padding: 0 20px;
  }
  .sub-visual + .body-with-sidebar {
    margin: 0 0 30px;
  }
}
.sidebar {
  flex: none;
  width: 220px;
  background: var(--surface);
  padding: 0;
}
.sidebar-title {
  display: flex;
  align-items: center;
  padding: 32px 0;
  border-bottom: 2px solid var(--color-gray-700);
  width: 220px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-gray-900);
  white-space: nowrap;
}
.sidebar .side-group {
  margin-bottom: 0;
  border-bottom: 1px solid #e4e4e4;
  padding: 8px 0 8px;
}
.sidebar .side-group:last-child {
  border-bottom: none;
}
.sidebar a.side-l2,
.sidebar .side-l2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 12px 8px;
  font-size: var(--font-size-18);
  font-weight: 700;
  color: var(--color-gray-900);
  border-left: none;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1.45;
}
.sidebar a.side-l2.active,
.sidebar .side-l2.active {
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-radius: 8px;
}
.sidebar .side-group:has(.side-l3-wrap).open .side-l2::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0 6H12' stroke='%23CCCFDD' stroke-width='1.5'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
.sidebar a.side-l2:hover {
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-radius: 8px;
}
.sidebar .side-group:has(.side-l3-wrap):not(.open) .side-l2::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6 0V12M0 6H12' stroke='%23CCCFDD' stroke-width='1.5'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
.sidebar .side-l3-wrap {
  display: none;
  flex-direction: column;
}
.sidebar .side-group.open .side-l3-wrap {
  display: flex;
  border-top: 1px solid #e4e4e4;
  margin-top: 8px;
  padding-top: 16px;
}
.sidebar a.side-l3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: var(--font-size-16);
  color: var(--color-gray-900);
  font-weight: 400;
}
.sidebar a.side-l3::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--color-gray-900);
}
.sidebar a.side-l3.active {
  color: var(--color-primary);
  font-weight: 600;
}
.sidebar a.side-l3.active::before {
  background: var(--color-primary);
}
.sidebar a.side-l3:hover {
  color: var(--color-primary);
}
.content-area {
  flex: 1;
  min-width: 0;
}
.content-area .page-head {
  padding: 20px 0 16px;
  border-bottom: 1px solid #aab4c1;
  opacity: 0;
  transform: translateY(16px);
  animation: content-area-main-fade-in 0.5s ease-out forwards;
}
.content-area main {
  padding: 0 0 48px;
  opacity: 0;
  transform: translateY(16px);
  animation: content-area-main-fade-in 0.5s ease-out forwards;
}
/* main/page-head 구조가 아예 없는 페이지(예: FR-JOB-001)는 그 자리에 있는
   content-area 직계 자식들에 직접 페이드인을 건다 */
.content-area:not(:has(> main)) > * {
  opacity: 0;
  transform: translateY(16px);
  animation: content-area-main-fade-in 0.5s ease-out forwards;
}
/* 페이지 진입 시 본문 콘텐츠가 살짝 아래에서 올라오며 나타나는 연출 */
@keyframes content-area-main-fade-in {
  to {
    opacity: 1;
    transform: none;
  }
}
.content-area .page-head + main {
  padding-top: var(--spacing-2xl);
}
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-bottom: 40px;
  background: var(--color-footer-bg);
}
.footer__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-footer-border);
}
.footer__link-list {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 1280px;
}
.footer__link {
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-footer-text);
  white-space: nowrap;
  position: relative;
  padding-left: 18px;
}
.footer__link:first-child {
  padding-left: 0;
}
.footer__link:first-child::before {
  content: none;
}
.footer__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--color-footer-border);
}
.footer__link--accent {
  font-weight: 600;
  color: var(--color-footer-link);
}
.footer__body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 1280px;
}
.footer__left {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.footer__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 735px;
}
.footer__row {
  display: flex;
  gap: 60px;
}
.footer__field {
  display: flex;
  gap: 10px;
}
.footer__label {
  font-size: var(--font-size-15);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-footer-text);
  white-space: nowrap;
}
.footer__value {
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: var(--line-height-tight);
  color: var(--color-footer-value);
  white-space: nowrap;
}
.footer__copyright {
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--color-footer-text);
}
.footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
}
.footer__sns {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer__sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}
.footer__partners {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 236px;
  height: 44px;
}
.footer__partner-logo {
  height: 40px;
}
.footer__partner-logo--nts {
  width: 102px;
}
.footer__partner-logo--hometax {
  width: 92px;
  opacity: 0.7;
  object-fit: cover;
}
.footer__mob-accordion {
  display: none;
}
.footer__copyright--mob {
  display: none;
}
@media (max-width: 900px) {
  table.grid thead {
    display: none;
  }
  table.grid,
  table.grid tbody,
  table.grid tr,
  table.grid td {
    display: block;
    width: 100%;
  }
  table.grid {
    border: none;
  }
  table.grid tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 4px 12px;
    background: var(--surface);
  }
  table.grid tr:hover,
  table.grid tr:has(input[type="checkbox"]:checked) {
    background: var(--bg);
  }
  table.grid tr:hover td,
  table.grid tr:has(input[type="checkbox"]:checked) td {
    background: transparent;
  }
  table.grid td {
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
  }
  /* 페이지별 table.grid.xxx__grid th/td:first-child·last-child·nth-child에 걸린 데스크톱 고정폭(px) 규칙이
     특이도가 더 높아 모바일 카드뷰에서도 이겨버려 셀이 100% 폭을 못 채우는 문제 방지 (신규 열/페이지 추가돼도 항상 100% 유지) */
  table.grid th,
  table.grid td {
    width: 100% !important;
  }
  table.grid td:last-child {
    border-bottom: none;
  }
  table.grid tr:has(td:last-child:empty) td:nth-last-child(2) {
    border-bottom: none;
  }
  table.grid td:empty {
    display: none;
  }
  table.grid td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-700);
    text-align: left;
    flex: none;
  }
  table.grid td:not([data-label])::before {
    content: none;
  }
  /* design.js가 라벨(::before)을 제외한 td의 실제 내용을 span.cell-content로
     감싸준다. 자식이 아이콘 하나든, 숫자 하나든, 뱃지+링크 두 개든 상관없이
     이 wrapper 하나를 셀 오른쪽 끝에 붙이기만 하면 되므로, 자식 조합별로
     justify-content를 따로 예외처리할 필요가 없다 (라벨은 항상 왼쪽 고정). */
  table.grid td > .cell-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    text-align: right;
  }
  table.grid td .cell-content > .notice-list__pin-icon {
    margin: 0;
  }
  .grid-cols-1fr-auto-1fr {
    grid-template-columns: 1fr !important;
    row-gap: 8px;
  }
}
@media (max-width: 1295px) {
  .footer {
    gap: 0;
  }
  .footer__links {
    border-bottom:none;
  }
  .footer__link-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    padding: 0;
  }
  .footer__link {
    padding-left: 0;
    font-size: var(--font-size-13);
  }
  .footer__link::before {
    content: none;
  }
  .footer__link--accent {
    font-weight: 500;
  }
  .footer__link:last-child {
    grid-column: 1 / -1;
  }
  .footer__body {
    display: none;
  }
  .footer__mob-accordion {
    display: block;
    width: 100%;
    padding: 0;
  }
  .footer__mob-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    border-top: 1px solid var(--color-footer-border-mobile);
    border-bottom: 1px solid var(--color-footer-border-mobile);
  }
  .footer__mob-toggle-label {
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-footer-title-mobile);
  }
  .footer__mob-chevron {
    color: var(--color-footer-text);
    transition: transform 0.2s ease;
  }
  .footer__mob-toggle[aria-expanded="true"] .footer__mob-chevron {
    transform: rotate(180deg);
  }
  .footer__mob-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 0;
  }
  .footer__mob-panel[hidden] {
    display: none;
  }
  .footer__mob-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer__mob-info .footer__field {
    align-items: flex-start;
  }
  .footer__mob-info .footer__label,
  .footer__mob-info .footer__value {
    font-size: var(--font-size-13);
    line-height: 1.5;
    letter-spacing: -0.325px;
  }
  .footer__mob-info .footer__label {
    flex-shrink: 0;
  }
  .footer__mob-info .footer__value {
    white-space: normal;
  }
  .footer__mob-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .footer__mob-group-title {
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-footer-title-mobile);
  }
  .footer__mob-sns {
    gap: 16px;
  }
  .footer__mob-sns .footer__sns-link {
    opacity: 0.4;
  }
  .footer__mob-sns .footer__sns-link img {
    width: 100%;
    height: 100%;
  }
  .footer__mob-partners {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 36px;
  }
  .footer__partner-logo--mob {
    height: 36px;
    opacity: 0.4;
  }
  .footer__partner-logo--nts.footer__partner-logo--mob {
    width: 92px;
  }
  .footer__partner-logo--hometax.footer__partner-logo--mob {
    width: 83px;
    opacity: 0.28;
  }
  .footer__copyright--mob {
    display: block;
    width: 100%;
    padding: 20px 16px 0;
    font-size: var(--font-size-11);
    font-weight: 400;
    color: var(--color-footer-value);
  }
}
@media (max-width: 744px) {
  .footer__copyright--mob {
    padding: 20px 0 0 0;
  }
}
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--color-gray-900);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
@media (max-width: 480px) {
  header.topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 64px;
    row-gap: 8px;
    padding: 10px 16px;
  }
  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
  .topbar {
    padding: 0 16px;
  }
  .brand small {
    display: none;
  }
  .top-actions {
    gap: 10px;
  }
  .top-actions .user-chip span {
    display: none;
  }
  .hamburger-btn {
    display: block;
  }
  .pagination {
    flex-wrap: wrap;
  }
  .card {
    padding: 16px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  table.grid thead {
    display: none;
  }
  table.grid,
  table.grid tbody,
  table.grid tr,
  table.grid td {
    display: block;
    width: 100%;
  }
  table.grid {
    border: none;
  }
  table.grid tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 4px 12px;
    background: var(--surface);
  }
  table.grid tr:hover,
  table.grid tr:has(input[type="checkbox"]:checked) {
    background: var(--bg);
  }
  table.grid tr:hover td,
  table.grid tr:has(input[type="checkbox"]:checked) td {
    background: transparent;
  }
  table.grid td {
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
  }
  /* 페이지별 table.grid.xxx__grid th/td:first-child·last-child·nth-child에 걸린 데스크톱 고정폭(px) 규칙이
     특이도가 더 높아 모바일 카드뷰에서도 이겨버려 셀이 100% 폭을 못 채우는 문제 방지 (신규 열/페이지 추가돼도 항상 100% 유지) */
  table.grid th,
  table.grid td {
    width: 100% !important;
  }
  table.grid td:last-child {
    border-bottom: none;
  }
  table.grid tr:has(td:last-child:empty) td:nth-last-child(2) {
    border-bottom: none;
  }
  table.grid td:empty {
    display: none;
  }
  table.grid td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-700);
    text-align: left;
    flex: none;
  }
  table.grid td:not([data-label])::before {
    content: none;
  }
  /* design.js가 라벨(::before)을 제외한 td의 실제 내용을 span.cell-content로
     감싸준다. 자식이 아이콘 하나든, 숫자 하나든, 뱃지+링크 두 개든 상관없이
     이 wrapper 하나를 셀 오른쪽 끝에 붙이기만 하면 되므로, 자식 조합별로
     justify-content를 따로 예외처리할 필요가 없다 (라벨은 항상 왼쪽 고정). */
  table.grid td > .cell-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    text-align: right;
  }
  table.grid td .cell-content > .notice-list__pin-icon {
    margin: 0;
  }
  .grid-cols-1fr-auto-1fr {
    grid-template-columns: 1fr !important;
    row-gap: 8px;
  }
}
@media (max-width: 744px) {
  table.grid {
    font-size: 14px;
  }
  table.grid td {
    padding: 6px 0;
  }
  table.grid td::before {
    font-size: 14px;
  }
  .pagination {
    gap: 4px;
  }
  .pagination button {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }
  .pagination button:first-child svg,
  .pagination button:last-child svg {
    width: 16px;
    height: 16px;
  }
  .qna-list__toolbar .list-count {
    font-size: 13px;
  }
  .qna-list__add-btn {
    width: auto;
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* -----------------------------
   Shared component classes (여러 화면에서 재사용되는 컴포넌트 스타일)
------------------------------ */

/* ==========================================================================
   FR-AUTH 공통 — auth-shell, 회원가입(FR-AUTH-002), 비밀번호찾기(FR-AUTH-003)
   Figma 2374:1757, 2374:1798, 2374:1829, 2374:1891, 2374:1918, 2374:1949, 2374:1976
   ========================================================================== */

/* ── 페이지 껍데기 ── */
.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f9f9f9;
  padding-bottom: 100px;
}

/* 프로토타입 전용 헤더 (Figma에는 실제 GNB 위치) */
.auth-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0 8px;
  width: 100%;
  max-width: 1100px;
}
.auth-header .mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.auth-header .brandtext {
  text-align: left;
}
.auth-header .brandtext b {
  display: block;
  font-size: 17px;
  color: var(--navy-900);
}
.auth-header .brandtext small {
  display: block;
  font-size: 11.5px;
  color: var(--text-500);
}
.auth-linkbar {
  width: 100%;
  max-width: 1100px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  font-size: 12.5px;
  color: var(--text-500);
  margin-bottom: 4px;
}
.auth-linkbar a.current {
  color: #2d65f2;
  font-weight: 700;
}
.auth-crumb {
  width: 100%;
  max-width: 1100px;
  font-size: 12px;
  color: var(--text-400);
  margin-bottom: 8px;
}
.auth-title-row {
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 56px;
}
.auth-title-row h1 {
  font-size: 20px;
  margin: 0;
  color: var(--navy-900);
  font-weight: 700;
}

/* ── 회원가입 콘텐츠 래퍼 (FR-AUTH-002) ── */
.signup-wrap {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
/* 전체를 한 덩어리로 페이드인하면 튀어 보여서, 스테퍼 → 카드 순서로 나눠서
   나타나게 한다 */
.signup-wrap > .timeline,
.signup-wrap > .card.step-card {
  opacity: 0;
  transform: translateY(16px);
  animation: content-area-main-fade-in 0.5s ease-out forwards;
}
.signup-wrap > .card.step-card {
  animation-delay: 0.15s;
}

/* ── 스테퍼 — Figma node 121:163 (PC) 50px 서클 + 56px 커넥터, 사용자가 준 링크 ── */
.signup-wrap .timeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin: 0 auto;
  padding: 24px 0 0;
  flex-wrap: nowrap;
  border: none;
  background: none;
}
.signup-wrap .timeline .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  width: 50px;
  padding: 0;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: #999;
  white-space: nowrap;
  flex: none;
}
.signup-wrap .timeline .step + .step {
  margin-left: 56px;
}
.signup-wrap .timeline .step + .step::before {
  content: "";
  position: absolute;
  left: -56px;
  top: 25px;
  width: 56px;
  height: 2px;
  background: #dadfe6;
  transform: translateY(-50%);
}
.signup-wrap .timeline .step.done + .step::before {
  background: #2d65f2;
}

/* 서클 인디케이터 */
.signup-wrap .timeline .step .n {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 2px solid #dadfe6;
  background: #fff;
  color: #555;
  font-size: 17px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 1;
  margin: 0;
}
/* 완료 */
.signup-wrap .timeline .step.done {
  color: #333;
}
.signup-wrap .timeline .step.done .n {
  background: #2d65f2;
  border-color: #2d65f2;
  color: #fff;
  font-size: 0;
}
.signup-wrap .timeline .step.done .n::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7.5L5.8 10L11 4.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 14px 14px;
}
/* 현재 활성 */
.signup-wrap .timeline .step.current {
  color: #333;
}
.signup-wrap .timeline .step.current .n {
  background: #fff;
  border-color: #2d65f2;
  color: #2d65f2;
  font-size: 17px;
  font-weight: 700;
}

/* ── 스텝 카드 ── */
.step-card {
  width: 768px;
  background: #fff;
  border: 1px solid #d8dce4;
  border-radius: 12px;
  box-shadow: 0px 1px 2px 0px rgba(15, 31, 61, 0.06);
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 0;
}
.step-card .form-grid {
  margin-top: 0;
}

/* ── 스텝 헤드 (공용) ── */
.step-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eaf0fe;
  color: #1f4fd1;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-card .step-head h3 {
  font-size: 20px;
  font-weight: 600;
  color: #111;
  margin: 0;
}
.auth-card .step-head h2 {
  font-size: 20px;
  font-weight: 600;
  color: #111;
  margin: 0;
}

/* ── 동의 블록 (1단계) ── */
.consent-block {
  background: #fff;
  border: 1px solid #d8dce4;
  border-radius: 8px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.consent-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.consent-head b {
  font-size: 17px;
  font-weight: 700;
  color: #111;
}
.consent-doc {
  background: #f5f6f9;
  border-radius: 4px;
  padding: 12px;
  height: 100px;
  overflow: hidden;
  font-size: 15px;
  color: #666;
  line-height: 1.5;
}
.consent-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #333;
  cursor: pointer;
}
.consent-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: #2d65f2;
}
.req-badge {
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.opt-badge {
  background: #f3f7fb;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* ── 본인인증 배너 (2단계) ── */
.verify-banners {
  display: flex;
  gap: 30px;
}
.verify-banner {
  flex: 1 0 0;
  position: relative;
  border: 1px solid #d8dce4;
  border-radius: 12px;
  padding: 50px 30px 30px;
  cursor: pointer;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.verify-banner:hover {
  border-color: #b9cef2;
  background: #fafbff;
}
.verify-banner.selected {
  background: #eaf0fe;
  border: 1.5px solid #1f4fd1;
}
.verify-banner .vb-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #d8dce4;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
}
.verify-banner.selected .vb-check {
  border-color: #1f4fd1;
  background: #1f4fd1;
  color: #fff;
}
.vb-icon {
  position: relative;
  width: 90px;
  height: 100px;
  overflow: hidden;
  flex-shrink: 0;
}
/* 공동인증서처럼 단일 SVG가 직접 들어오는 경우 */
.vb-icon > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.verify-banner .vb-title {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 6px;
}
.verify-banner .vb-desc {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  text-align: center;
}
.vb-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: #1f4fd1;
  background: #fff;
  border: 1px solid #1f4fd1;
  border-radius: 8px;
  padding: 1px 8px;
}
/* ── 본인인증 2단계 전용 ── */
/* 회원가입 페이지 타이틀 */
.signup-page-head {
  padding: 48px 0 32px;
  text-align: center;
  width: 100%;
}
.signup-page-title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  color: #111;
}
/* 배너 내부: 아이콘+라디오 묶음 */
.vb-check-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
/* 배너 내부: 타이틀+설명 묶음 */
.vb-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
/* 배너 내 라디오 인풋 */
.vb-banner-radio {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #2d65f2;
  cursor: pointer;
  flex-shrink: 0;
}
/* 휴대폰 아이콘 조각 공통 */
.vb-phone-piece {
  position: absolute;
}
.vb-phone-piece > svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* 조각별 절대 좌표 (90×100 컨테이너 기준 %) */
.vb-phone-v3 {
  top: 0;
  right: 79.91%;
  bottom: 88.85%;
  left: 7.77%;
}
.vb-phone-v1 {
  top: 26.81%;
  right: 0;
  bottom: 65.8%;
  left: 91.83%;
}
.vb-phone-g1 {
  top: 61.59%;
  right: 92.74%;
  bottom: 31.84%;
  left: 0;
}
.vb-phone-main {
  top: 14.74%;
  right: 28.72%;
  bottom: 14.92%;
  left: 20.21%;
}
.vb-phone-g2 {
  top: 48.76%;
  right: 3.2%;
  bottom: 8.03%;
  left: 57.85%;
}
.vb-phone-g3 {
  top: 48.73%;
  right: 3.2%;
  bottom: 27.5%;
  left: 76.11%;
}
.vb-phone-g4 {
  top: 70.31%;
  right: 21.47%;
  bottom: 8.03%;
  left: 58.75%;
}
.vb-phone-g5 {
  top: 62.87%;
  right: 11.12%;
  bottom: 21%;
  left: 65.76%;
}
.vb-phone-v2 {
  top: 96.28%;
  right: 36.46%;
  bottom: 0;
  left: 59.42%;
}

.verify-done {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--green);
  font-weight: 700;
}

/* ── 폼 (step-card / auth-card 내부 오버라이드) ── */
.step-card .form-row,
.auth-card .form-row {
  margin-bottom: 0;
  gap: 8px;
}
.step-card .form-row label,
.auth-card .form-row label {
  font-size: 15px;
  font-weight: 400;
  color: #333;
}
.step-card .form-row input:not([type="radio"]):not([type="checkbox"]),
.step-card .form-row select,
.step-card .form-row textarea,
.auth-card .form-row input:not([type="radio"]):not([type="checkbox"]),
.auth-card .form-row select {
  height: 44px;
  border: 1px solid #d8dce4;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 16px;
  color: #111;
  background: #fff;
}
.step-card .form-row input:not([type="radio"]):not([type="checkbox"]):focus,
.auth-card .form-row input:not([type="radio"]):not([type="checkbox"]):focus {
  outline: none;
  border-color: #2d65f2;
  border-width: 1.5px;
}
.step-card .form-row input:disabled,
.step-card .form-row select:disabled {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-gray-500);
  -webkit-text-fill-color: var(--color-gray-500);
  opacity: 1;
}
.step-card .form-hint,
.auth-card .form-hint {
  font-size: 14px;
  color: #767676;
}
.step-card .form-hint.c-green {
  color: #12a554;
}

/* 직종 칩 (3단계) */
.job-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}
.job-chip {
  border: 1px solid #d8dce4;
  background: #fff;
  color: #666;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.job-chip.selected {
  background: #2d65f2;
  border-color: #2d65f2;
  color: #fff;
}

/* 라디오 (3단계) */
.step-card .radio-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.step-card .radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  cursor: pointer;
}
.step-card .radio-row input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #2d65f2;
  flex-shrink: 0;
}

/* 인라인 버튼 행 */
.inline-btn-row {
  display: flex;
  gap: 8px;
}
.inline-btn-row input {
  flex: 1;
}
.step-card .inline-btn-row .btn,
.auth-card .inline-btn-row .btn {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #2d65f2;
  color: #2d65f2;
}

/* 버튼 — auth 내부 오버라이드 (full-size)
   .auth-form-actions는 FR-AUTH-001(로그인)에선 .auth-card 안이지만
   FR-AUTH-003(비밀번호 찾기) STEP1/2는 .auth-card 밖 형제라 .auth-card .btn만으론
   안 잡힘 - .auth-form-actions .btn도 같이 잡아서 회원가입과 동일하게 통일 */
.signup-wrap .btn:not(.btn-sm),
.auth-card .btn:not(.btn-sm),
.auth-form-actions .btn:not(.btn-sm) {
  height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}
.signup-wrap .btn-primary,
.auth-card .btn-primary,
.auth-form-actions .btn-primary {
  background: #2d65f2;
  color: #fff;
  border: none;
}
.signup-wrap .btn-primary:hover,
.auth-card .btn-primary:hover,
.auth-form-actions .btn-primary:hover {
  background: var(--color-primary-hover);
}
.signup-wrap .btn-ghost,
.auth-card .btn-ghost,
.auth-form-actions .btn-ghost {
  background: #fff;
  border: 1px solid #2d65f2;
  color: #2d65f2;
}
.signup-wrap .btn-ghost:hover,
.auth-card .btn-ghost:hover,
.auth-form-actions .btn-ghost:hover {
  background: #f0f4ff;
}

/* 폼 액션 */
.signup-wrap .form-actions {
  border-top: none;
  margin-top: 0;
  justify-content: center;
}

/* ── 3단계 전용: 2열 그리드 행 ── */
.form-grid-row {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  width: 100%;
}
.form-col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.step-card .form-col label {
  font-size: 15px;
  font-weight: 400;
  color: #333;
}
.step-card .form-col input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
  height: 44px;
  border: 1px solid #d8dce4;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 16px;
  color: #111;
  background: #fff;
}
.step-card .form-col input:disabled {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-gray-500);
  -webkit-text-fill-color: var(--color-gray-500);
  opacity: 1;
}
.step-card .form-col input:not([type="radio"]):not([type="checkbox"]):focus {
  outline: none;
  border-color: #2d65f2;
  border-width: 1.5px;
}
/* hint 없는 form-col (비밀번호 등): Figma Form Field gap=8px */
.form-col--gap8 {
  gap: 8px;
}
/* 이메일 고정폭 */
.step-card .email-input {
  width: 320px;
}
/* 작은 힌트 텍스트 (13px) */
.form-hint-sm {
  font-size: 13px;
  color: #767676;
  line-height: 1.4;
}

/* 스텝 노트 */
.step-note {
  background: #eaf0fe;
  border: 1px solid #c9dcf9;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #173d80;
}

/* ── 비밀번호 찾기 카드 (FR-AUTH-003) ── */
.auth-card {
  width: 480px;
  background: #fff;
  border: 1px solid #d8dce4;
  border-radius: 16px;
  box-shadow: 0px 1px 2px 0px rgba(15, 31, 61, 0.06);
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* auth-card > * + *: gap:14px 대신 margin-top 사용
   JS가 step2/3에 style.display='block' 인라인 설정 시에도 간격이 유지되도록 */
.auth-card > * + * {
  margin-top: 16px;
}

.auth-form-actions {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.auth-form-actions .btn.flex-1 {
  flex: none;
}
@media (max-width: 744px) {
  /* auth-form-actions가 이제(FR-AUTH-003) stepN 래퍼의 align-items:center 밑
     자식이라 폭 없이 콘텐츠만큼만 잡혀 flex:1 버튼이 꽉 안 찼음 - 모바일에서
     행 자체를 100%로 채워야 버튼도 같이 꽉 찬다 */
  .auth-form-actions {
    width: 100%;
  }
  .auth-form-actions .btn,
  .auth-form-actions .btn.flex-1 {
    flex: 1;
  }
}

/* 완료 카드 */
.done-card {
  padding: 70px 50px 50px;
  gap: 34px;
  align-items: center;
  text-align: center;
}
.done-card .icon {
  width: 131px;
  height: 120px;
  display: block;
  margin: 0 auto;
  background: url("../../../files/web1/images/common/reg-complete-icon.png")
    no-repeat center / contain;
  border-radius: 0;
  font-size: 0;
  color: transparent;
}
.done-card h2 {
  font-size: 26px;
  font-weight: 700;
  color: #111;
  margin: 0;
}
.done-card p {
  font-size: 15px;
  color: #666;
  margin: 0;
  line-height: 1.6;
}
.done-card .btn {
  width: 100%;
}
.done-card .btn.w-full {
  width: auto;
}

/* 프로토 footer */
footer.foot {
  margin-top: 24px;
  font-size: 11.5px;
  color: var(--text-400);
  text-align: center;
  max-width: 800px;
}

/* ---------- Alert 컴포넌트 (node 2:16117) ---------- */
.anno-alert {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 4px;
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: #2952cc;
}
.anno-alert::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7' fill='%233366FF'/%3E%3Crect x='7.25' y='6.5' width='1.5' height='5.5' rx='0.75' fill='white'/%3E%3Ccircle cx='8' cy='4.25' r='1' fill='white'/%3E%3C/svg%3E")
    no-repeat center / 16px 16px;
}
/* Figma FAQ Accordion 컴포넌트(node 2440:5238 하위) 스펙으로 완전 교체 */
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-bottom: 1px solid var(--color-bg-muted);
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 32px 8px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::before {
  content: "Q";
  flex: none;
  font-family: "Pretendard", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-heading);
}
.faq-item summary .faq-item__q {
  flex: 1 0 0;
  font-family: "Pretendard", sans-serif;
  font-size: var(--font-size-16);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-heading);
}
.faq-item summary .faq-item__chevron {
  flex: none;
  transition: transform 0.2s ease;
}
.faq-item[open] summary .faq-item__chevron {
  transform: rotate(180deg);
}
.faq-item .faq-a {
  margin: 0;
  padding: 40px;
  background: var(--color-bg-subtle);
  font-size: var(--font-size-16);
  color: var(--color-text-body);
  line-height: 1.5;
}
main > .filterbar + .faq-list {
  margin-top: var(--spacing-2xl);
}
.faq-list + .info-banner {
  margin-top: var(--spacing-2xl);
}
/* 모바일(744px 이하) - 전용 피그마 프레임 없음, 웹 비율 기준으로 여백/텍스트 크기만 축소 */
@media (max-width: 744px) {
  .faq-item summary {
    padding: var(--spacing-lg) var(--spacing-2xs);
    gap: var(--spacing-sm);
  }
  .faq-item summary::before {
    font-size: var(--font-size-18);
  }
  .faq-item summary .faq-item__q {
    font-size: var(--font-size-15);
  }
  .faq-item .faq-a {
    padding: var(--spacing-xl) var(--spacing-md);
    font-size: var(--font-size-15);
  }
}
/* ---------- Info banner (FR-CS-002 FAQ 하단 안내 배너, node 2440:5238 하위 InfoBanner 스펙) ---------- */
.info-banner {
  position: relative;
  width: 1100px;
  height: 152px;
  overflow: hidden;
  background: var(--color-bg-info-banner);
  border-radius: var(--radius-md);
}
.info-banner__character {
  position: absolute;
  left: 638px;
  top: -35px;
  width: 364px;
  height: 195px;
  object-fit: cover;
}
.info-banner__body {
  position: absolute;
  left: 80px;
  top: 40px;
  width: 354px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.info-banner__text {
  margin: 0;
  font-size: var(--font-size-16);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-primary);
}
.info-banner .btn-outline {
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-primary);
}
/* 태블릿(1295px 이하)도 모바일 레이아웃(node 2654:13376 - 사용자가 준 링크)과 동일하게 처리 - 별도 태블릿 전용 디자인 없음 */
@media (max-width: 1295px) {
  .info-banner {
    width: 100%;
    max-width: none;
    height: 82px;
    aspect-ratio: unset;
  }
  .info-banner__character {
    display: none;
  }
  .info-banner__body {
    position: absolute;
    left: 0;
    top: calc(50% + 1px);
    transform: translateY(-50%);
    width: 100%;
    padding: 0 var(--spacing-lg);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
  }
  .info-banner__text {
    font-size: var(--font-size-14);
    font-weight: 400;
  }
  .info-banner .btn-outline {
    font-size: var(--font-size-12);
    line-height: 1.45;
  }
}
.flow-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
  color: var(--text-700);
}
.flow-step:last-of-type {
  border-bottom: none;
}
.flow-num {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Figma "Frame416"(node 2522:8429) - 회색 카드(--color-bg-card) 안에 흰 증명서 카드가 한 겹 더 들어간 구조 */
.preview-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--spacing-2xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
}
/* Frame416 루트의 gap:12 - 타이틀과 카드 사이 간격 */
.card-head--preview + .preview-doc {
  margin-top: var(--spacing-sm);
}
.preview-doc__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 440px;
  padding: var(--spacing-2xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.preview-doc__head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
  border-bottom: 2px solid #000;
}
.preview-doc__head h4 {
  margin: 0;
  font-size: var(--font-size-heading-h2);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
  white-space: nowrap;
}
.preview-doc__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
  padding: var(--spacing-xl) 0;
}
.preview-doc__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}
.preview-doc__row--name {
  justify-content: space-between;
}
.preview-doc__name {
  font-size: var(--font-size-20);
  font-weight: 500;
  color: var(--color-text-body);
}
.preview-doc__grade {
  padding: 6px 14px;
  font-size: var(--font-size-15);
  font-weight: 600;
  background: var(--color-purple-50);
  color: var(--color-purple-500);
}
.preview-doc__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
}
.preview-doc__label {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-16);
  white-space: nowrap;
}
.preview-doc__value {
  flex: 1 0 0;
  font-size: var(--font-size-16);
  font-weight: 600;
  color: var(--color-text-body);
  text-align: right;
}
.preview-doc__value--success {
  color: var(--color-status-success);
}
.preview-doc__line {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--color-border-default);
}
.preview-doc__line--dashed {
  border-top-style: dashed;
}

/* -----------------------------
   Utility classes (각 화면의 inline style을 대체)
------------------------------ */
.c-text-500 {
  color: var(--text-500);
}
.c-green {
  color: var(--green);
}
.c-navy-900 {
  color: var(--navy-900);
}
.c-text-700 {
  color: var(--text-700);
}
.c-text-900 {
  color: var(--text-900);
}
.c-inherit {
  color: inherit;
}
.c-hexc0392b {
  color: #c0392b;
}
.c-blue-600 {
  color: var(--blue-600);
}
.c-text-400 {
  color: var(--text-400);
}
.c-red {
  color: var(--red);
}
.c-red-600 {
  color: var(--red-600, #c0392b);
}
.mb-16 {
  margin-bottom: 16px;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-12 {
  margin-bottom: 12px;
}
.mb-14 {
  margin-bottom: 14px;
}
.mb-4 {
  margin-bottom: 4px;
}
.mb-6 {
  margin-bottom: 6px;
}
.d-flex {
  display: flex;
}
.d-none {
  display: none;
}
.d-grid {
  display: grid;
}
.d-inline-flex {
  display: inline-flex;
}
.gap-10 {
  gap: 10px;
}
.gap-8 {
  gap: 8px;
}
.gap-16 {
  gap: 16px;
}
.gap-24 {
  gap: 24px;
}
.gap-4 {
  gap: 4px;
}
.gap-6 {
  gap: 6px;
}
.flex-1 {
  flex: 1;
}
.flex-none {
  flex: none;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.border-t-none {
  border-top: none;
}
.pt-4 {
  padding-top: 4px;
}
.mt-14 {
  margin-top: 14px;
}
.mt-24 {
  margin-top: 24px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-0 {
  margin-top: 0;
}
.mt-16 {
  margin-top: 16px;
}
.mt-12 {
  margin-top: 12px;
}
.mt-8 {
  margin-top: 8px;
}
.mt-22 {
  margin-top: 22px;
}
.mt-18 {
  margin-top: 18px;
}
.mt-6 {
  margin-top: 6px;
}
.border-1-solid-line {
  border: 1px solid var(--line);
}
.rounded-8 {
  border-radius: 8px;
}
.rounded-50p {
  border-radius: 50%;
}
.p-14-16 {
  padding: 14px 16px;
}
.p-4-8-4-0 {
  padding: 4px 8px 4px 0;
}
.p-4-0 {
  padding: 4px 0;
}
.p-0 {
  padding: 0;
}
.p-22-26 {
  padding: 22px 26px;
}
.p-9-16 {
  padding: 9px 16px;
}
.p-10-14 {
  padding: 10px 14px;
}
.p-6-20 {
  padding: 6px 20px;
}
.bg-hexfafbfd {
  background: #fafbfd;
}
.bg-hexeef1f6 {
  background: #eef1f6;
}
.bg-hexf5f8ff {
  background: #f5f8ff;
}
.bg-hexfff7f5 {
  background: #fff7f5;
}
.fs-12-5 {
  font-size: 12.5px;
}
.fs-12 {
  font-size: 12px;
}
.fs-11-5 {
  font-size: 11.5px;
}
.fs-13 {
  font-size: 13px;
}
.fs-13-5 {
  font-size: 13.5px;
}
.fs-17 {
  font-size: 17px;
}
.fs-14 {
  font-size: 14px;
}
.fs-15 {
  font-size: 15px;
}
.fs-16 {
  font-size: 16px;
}
.fs-30 {
  font-size: 30px;
}
.fw-700 {
  font-weight: 700;
}
.fw-600 {
  font-weight: 600;
}
.fw-400 {
  font-weight: 400;
}
.fw-800 {
  font-weight: 800;
}
.w-full {
  width: 100%;
}
.w-120 {
  width: 120px;
}
.w-56 {
  width: 56px;
}
.w-100 {
  width: 100px;
}
.w-320 {
  width: 320px;
}
.w-110 {
  width: 110px;
}
.w-44 {
  width: 44px;
}
.w-280 {
  width: 280px;
}
.w-240 {
  width: 240px;
}
.w-60p {
  width: 60%;
}
.border-collapse-collapse {
  border-collapse: collapse;
}
.valign-top {
  vertical-align: top;
}
.valign-middle {
  vertical-align: middle;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.cursor-pointer {
  cursor: pointer;
}
.decoration-none {
  text-decoration: none;
}
.m-0-0-12 {
  margin: 0 0 12px;
}
.m-0 {
  margin: 0;
}
.m-0-0-10 {
  margin: 0 0 10px;
}
.m-0-0-14 {
  margin: 0 0 14px;
}
.m-neg8-0-16 {
  margin: -8px 0 16px;
}
.m-22-0-10 {
  margin: 22px 0 10px;
}
.m-0-auto {
  margin: 0 auto;
}
.m-0-0-18 {
  margin: 0 0 18px;
}
.m-0-0-4 {
  margin: 0 0 4px;
}
.m-0-0-0 {
  margin: 0 0 0px;
}
.m-0-0-16 {
  margin: 0 0 16px;
}
.lh-1-7 {
  line-height: 1.7;
}
.lh-1-4 {
  line-height: 1.4;
}
.lh-1-85 {
  line-height: 1.85;
}
.lh-1-8 {
  line-height: 1.8;
}
.lh-1-9 {
  line-height: 1.9;
}
.self-end {
  align-self: flex-end;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.grid-cols-1fr-auto-1fr {
  grid-template-columns: 1fr auto 1fr;
}
.min-w-0 {
  min-width: 0;
}
.max-w-220 {
  max-width: 220px;
}
.overflow-hidden {
  overflow: hidden;
}
.border-b-1-solid-line {
  border-bottom: 1px solid var(--line);
}
.border-b-none {
  border-bottom: none;
}
.flex-wrap-wrap {
  flex-wrap: wrap;
}
.h-120 {
  height: 120px;
}
.h-100 {
  height: 100px;
}
.border-c-hexc9dcf9 {
  border-color: #c9dcf9;
}
.border-c-hexf3c9c0 {
  border-color: #f3c9c0;
}
.ml-6 {
  margin-left: 6px;
}
.ml-auto {
  margin-left: auto;
}
.ml-8 {
  margin-left: 8px;
}
.flex-dir-column {
  flex-direction: column;
}
.pl-20 {
  padding-left: 20px;
}

/* =========================================================
   Figma 컴포넌트 라이브러리 (file: LpuVM0M1QioXgytnCU9ulA)
   "피그마화면을 우선으로 확인해서 적용" 지침에 따라, 기존 --blue-600(#066bfd) 등
   Style Guide 토큰과는 별개로 이 컴포넌트 세트의 실제 Figma 값(Primary/500 #4E61F6 등)을
   그대로 사용합니다. (Pop-Up / Navbar / Avatar / Progress Bar / Breadcrumbs / Loader /
   Tooltip / Action Sheet / Context Menu / Dropdown / Tab / Pagination / Page Control / Card)
   ========================================================= */

/* ---- Pop-Up (2:14137) ---- */
.fg-popup {
  width: 350px;
  max-width: 100%;
  background: #f9fafb;
  border: 1.5px solid #f3f4f6;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}
.fg-popup__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.fg-popup__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #131927;
}
.fg-popup__message {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #6d717f;
}
.fg-popup__buttons {
  display: flex;
  gap: 16px;
}
.fg-popup__btn {
  flex: 1;
  height: 48px;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}
.fg-popup__btn--filled {
  background: #4e61f6;
  color: #fff;
  border: none;
}
.fg-popup__btn--outline {
  background: transparent;
  color: #4e61f6;
  border: 1.5px solid #4e61f6;
}

/* ---- Navbar: Bottom (2:5816) ---- */
.fg-navbar-bottom {
  display: flex;
  background: #f9fafb;
}
.fg-navbar-bottom__item {
  flex: 1;
  height: 44px;
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  color: #9ea2ae;
  text-decoration: none;
}
.fg-navbar-bottom__item .icon {
  width: 24px;
  height: 24px;
}
.fg-navbar-bottom__item .label {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
}
.fg-navbar-bottom__item--selected {
  color: #4e61f6;
}
.fg-navbar-bottom__item--line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
}
.fg-navbar-bottom__item--line.fg-navbar-bottom__item--selected::before {
  background: #4e61f6;
}

/* ---- Navbar: Top (2:5886) ---- */
.fg-navbar-top {
  display: flex;
  align-items: center;
  background: #f9fafb;
  width: 100%;
}
.fg-navbar-top__left,
.fg-navbar-top__right {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  padding: 10px 16px;
}
.fg-navbar-top__left {
  gap: 4px;
  padding: 10px 10px 10px 16px;
}
.fg-navbar-top__right {
  justify-content: flex-end;
  padding: 10px 16px 10px 10px;
}
.fg-navbar-top__left .icon,
.fg-navbar-top__right .icon {
  width: 24px;
  height: 24px;
}
.fg-navbar-top__left .label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #131927;
}
.fg-navbar-top__middle {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #131927;
}

/* ---- Avatar (2:5725) ---- */
.fg-avatar {
  position: relative;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #4e61f6;
  color: #fff;
  font-weight: 600;
  overflow: hidden;
}
.fg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fg-avatar__dot {
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: #43b75d;
  border: 2px solid #fff;
}
.fg-avatar--giant {
  width: 56px;
  height: 56px;
  font-size: 28px;
  line-height: 34px;
}
.fg-avatar--giant .fg-avatar__dot {
  width: 16px;
  height: 16px;
}
.fg-avatar--large {
  width: 48px;
  height: 48px;
  font-size: 20px;
}
.fg-avatar--medium {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.fg-avatar--small {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
.fg-avatar--tiny {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

/* ---- Progress Bar (2:5949) ---- */
.fg-progressbar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.fg-progressbar__track {
  flex: 1;
  display: flex;
  gap: 4px;
  height: 8px;
}
.fg-progressbar__seg {
  flex: 1;
  height: 8px;
  border-radius: 8px;
  background: #edeffe;
}
.fg-progressbar__seg--filled {
  background: #4e61f6;
}
.fg-progressbar--disabled .fg-progressbar__seg {
  background: #f3f4f6;
}
.fg-progressbar__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #131927;
}
.fg-progressbar--disabled .fg-progressbar__label {
  color: #9ea2ae;
}

/* ---- Breadcrumbs (2:5632) ---- */
.fg-breadcrumbs {
  display: flex;
  align-items: center;
}
.fg-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 12px 8px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  color: #9ea2ae;
  text-decoration: none;
  cursor: pointer;
}
.fg-breadcrumbs__item svg,
.fg-breadcrumbs__item .icon {
  width: 24px;
  height: 24px;
}
.fg-breadcrumbs__item:hover {
  background: #f3f4f6;
  color: #6d717f;
}
.fg-breadcrumbs__item:focus-visible {
  background: #edeffe;
  color: #4e61f6;
}
.fg-breadcrumbs__item--selected {
  color: #131927;
}
.fg-breadcrumbs__item--disabled {
  color: #9ea2ae;
  pointer-events: none;
  opacity: 0.6;
}

/* ---- Loader (2:5613) ---- */
.fg-loader {
  display: inline-block;
  border-radius: 50%;
  border: 3px solid #edeffe;
  border-top-color: #4e61f6;
  animation: fg-loader-spin 0.8s linear infinite;
}
@keyframes fg-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
.fg-loader--tiny {
  width: 24px;
  height: 24px;
  border-width: 2.5px;
}
.fg-loader--small {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
.fg-loader--medium {
  width: 40px;
  height: 40px;
  border-width: 3.5px;
}
.fg-loader--large {
  width: 48px;
  height: 48px;
  border-width: 4px;
}
.fg-loader--giant {
  width: 56px;
  height: 56px;
  border-width: 4.5px;
}

/* ---- Tooltip (2:5599) ---- */
.fg-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4e61f6;
  border-radius: 8px;
  padding: 6px 8px;
  width: 120px;
  box-sizing: border-box;
}
.fg-tooltip__text {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}
.fg-tooltip__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.fg-tooltip--bottom .fg-tooltip__arrow {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 8px solid #4e61f6;
}
.fg-tooltip--top .fg-tooltip__arrow {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 8px solid #4e61f6;
}
.fg-tooltip--left .fg-tooltip__arrow {
  left: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  border-top: 8px solid #4e61f6;
}
.fg-tooltip--right .fg-tooltip__arrow {
  right: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  border-top: 8px solid #4e61f6;
}

/* ---- Action Sheet (2:14169) ---- */
.fg-action-sheet {
  width: 350px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fg-action-sheet__actions {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}
.fg-action-sheet__action {
  height: 48px;
  background: #f9fafb;
  border: none;
  border-bottom: 1.5px solid #f3f4f6;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: #4e61f6;
  cursor: pointer;
}
.fg-action-sheet__action:last-child {
  border-bottom: none;
}
.fg-action-sheet__cancel {
  height: 48px;
  border-radius: 12px;
  background: #4e61f6;
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}

/* ---- Context Menu (2:14248) ---- */
.fg-context-menu {
  width: 240px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 6px 14px -6px rgba(19, 25, 39, 0.12),
    0 10px 32px -4px rgba(19, 25, 39, 0.1);
}
.fg-context-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #131927;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.fg-context-menu__item .icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.fg-context-menu__item--press {
  background: #edeffe;
  color: #4e61f6;
}

/* ---- Dropdown (2:14425) ---- */
.fg-dropdown {
  width: 350px;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid #e5e7ea;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.fg-dropdown__left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.fg-dropdown__left .icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.fg-dropdown__label {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #131927;
}
.fg-dropdown__chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.fg-dropdown:hover {
  border-color: #4e61f6;
}
.fg-dropdown--expanded {
  border-color: #4e61f6;
  box-shadow: 0 0 0 3px #aeb6fb;
}
.fg-dropdown--expanded .fg-dropdown__chevron {
  transform: rotate(180deg);
}
.fg-dropdown--disabled {
  border-color: #e5e7ea;
  cursor: not-allowed;
}
.fg-dropdown--disabled .fg-dropdown__label {
  color: #9ea2ae;
}
.fg-dropdown-menu {
  width: 350px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 6px 14px -6px rgba(19, 25, 39, 0.12),
    0 10px 32px -4px rgba(19, 25, 39, 0.1);
}
.fg-dropdown-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #131927;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.fg-dropdown-menu__item:hover {
  background: #f3f4f6;
}
.fg-dropdown-menu__item--selected {
  background: #edeffe;
  color: #4e61f6;
}
.fg-dropdown-menu__item--disabled {
  color: #9ea2ae;
  pointer-events: none;
}

/* ---- Tab (2:14382) ---- */
.fg-tabs {
  display: flex;
  gap: 8px;
}
.fg-tab {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 20px;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  color: #4e61f6;
  cursor: pointer;
}
.fg-tab .icon {
  width: 24px;
  height: 24px;
}
.fg-tab:hover {
  background: #edeffe;
}
.fg-tab:focus-visible {
  background: #fff;
  box-shadow: 0 0 0 3px #aeb6fb;
}
.fg-tab--selected {
  background: #4e61f6;
  color: #fff;
}
.fg-tab--disabled {
  color: #9ea2ae;
  pointer-events: none;
}

/* ---- Pagination (2:14262) ---- */
.fg-pagination {
  display: flex;
  align-items: center;
}
.fg-pagination__item {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4e61f6;
  cursor: pointer;
}
.fg-pagination__item .icon {
  width: 24px;
  height: 24px;
}
.fg-pagination__item:hover {
  background: #edeffe;
}
.fg-pagination__item:focus-visible {
  background: #fff;
  box-shadow: 0 0 0 3px #aeb6fb;
}
.fg-pagination__item--selected {
  background: #4e61f6;
  color: #fff;
}
.fg-pagination__item--disabled {
  color: #9ea2ae;
  pointer-events: none;
}

/* ---- Page Control (2:14324) ---- */
.fg-page-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fg-page-control__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8cefc;
}
.fg-page-control__dot--active {
  background: #4e61f6;
}
.fg-page-control__dot--reduced-1 {
  width: 6px;
  height: 6px;
}
.fg-page-control__dot--reduced-2 {
  width: 4px;
  height: 4px;
}

/* ---- Card (2:14344 / 2:14353) ---- */
.fg-card-vertical {
  width: 350px;
  max-width: 100%;
  height: 452px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 6px 14px -6px rgba(19, 25, 39, 0.12),
    0 10px 32px -4px rgba(19, 25, 39, 0.1);
}
.fg-card-vertical__image {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
}
.fg-card-vertical__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}
.fg-card-vertical__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #131927;
}
.fg-card-vertical__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #6d717f;
}
.fg-card-vertical__buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fg-card-vertical__buttons .fg-popup__btn {
  width: 100%;
}
.fg-card-horizontal {
  width: 350px;
  max-width: 100%;
  display: flex;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 6px 14px -6px rgba(19, 25, 39, 0.12),
    0 10px 32px -4px rgba(19, 25, 39, 0.1);
}
.fg-card-horizontal__image {
  width: 120px;
  align-self: stretch;
  object-fit: cover;
  flex-shrink: 0;
}
.fg-card-horizontal__content {
  flex: 1;
  min-width: 0;
  padding: 16px;
}
.fg-card-horizontal__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #131927;
}
.fg-card-horizontal__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #6d717f;
}

/* ============================================================
   CS 공지사항 상세 — Article 콘텐츠 스타일 (Figma 2440:7727)
   HTML: .cs-article-header, .cs-article-body, .cs-attachment, .cs-actions
   ============================================================ */

/* ---- Article Header (배지 + 제목 + 메타) ---- */
.cs-article-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid #ecf0f5;
  padding-bottom: 24px;
  width: 100%;
}
.cs-article-title-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  overflow: hidden;
  align-items: flex-start;
}

/* 필독 뱃지 (primary/bg + primary text, pill) */
.cs-badge-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: var(--font-size-13);
  font-weight: 400;
  line-height: 1.4;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}

.cs-article-title {
  font-size: var(--font-size-26);
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.4;
  margin: 0;
}

/* 작성일 · 조회 메타 */
.cs-article-meta {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-gray-400);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}
.cs-article-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- Article Body (본문) ---- */
.cs-article-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: var(--font-size-16);
  font-weight: 400;
  color: var(--color-gray-700);
  line-height: 1.5;
  padding-top: 8px;
  padding-bottom: 24px;
  width: 100%;
  overflow: hidden;
}
.cs-article-body p {
  margin: 0;
  line-height: 1.5;
}
/* 번호 목록 래퍼 내부 p는 gap 없이 밀착 */
.cs-article-body > div > p {
  margin: 0;
  line-height: 1.5;
}

/* ---- 첨부파일 (File Upload — Uploaded state) ---- */
.cs-attachment {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-white);
  border: 1px solid #626d80;
  border-radius: 8px;
  width: 480px;
}
.cs-attachment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.cs-attachment-name {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--color-gray-700);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 목록으로 버튼 영역 ---- */
.cs-actions {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 24px;
  width: 100%;
  overflow: hidden;
}
.cs-btn-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  color: var(--color-primary);
  font-size: var(--font-size-15);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}
.cs-btn-list:hover {
  background: var(--color-primary-bg);
}

/* ============================================================
   Sub Visual — 서브페이지 히어로 배너 (Figma 2440:7730)
   ============================================================ */
.sub-visual {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 상단 다크 스크림 — Figma: top-0, h-240px, -scale-y-100 gradient.
   배경 사진(sub-visual-*.png)은 스크림이 합쳐지지 않은 원본 사진이라,
   흰색 제목/브레드크럼 가독성을 위해 이 스크림이 반드시 필요하다.
   높이를 240px로 고정하면 배너가 낮아지는 태블릿(200px)에서 스크림이
   배너보다 커져 그라데이션이 끝까지 흐려지지 못하고 잘린 경계선이 보인다.
   Figma 비율(240/320 = 75%)로 잡아서 어느 해상도에서든 끝이 투명하게 끝나게 한다. */
.sub-visual::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 75%;
  z-index: 5;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.16) 55.83%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}
/* 배경 사진은 마크업이 아니라 카테고리 변형 클래스가 결정한다.
   기본값은 고객지원(--customer) 이미지다. */
.sub-visual__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url(../../../files/web1/images/common/sub-visual-3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.sub-visual__inner {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}
.sub-visual__title {
  font-size: var(--font-size-46);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
  margin: 0;
  text-align: center;
}
.sub-visual__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.sub-visual__bc-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.sub-visual__bc-div {
  width: 1px;
  height: 14px;
  background: var(--color-white);
  opacity: 0.15;
  flex-shrink: 0;
}
.sub-visual__bc-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border-radius: 100px;
  color: var(--color-white);
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}
/* 브레드크럼 드롭다운 - 카테고리 항목 클릭 시 하위 메뉴 표시 (Figma 2815:2009) */
.sub-visual__bc-dropdown {
  position: relative;
  display: inline-flex;
}
.sub-visual__bc-trigger {
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.sub-visual__bc-trigger svg {
  transition: transform 0.15s ease;
}
.sub-visual__bc-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.sub-visual__bc-menu {
  position: fixed;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 140px;
  margin: 0;
  padding: var(--spacing-xs) 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border-divider);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.sub-visual__bc-menu-link {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
  white-space: nowrap;
  text-decoration: none;
}
.sub-visual__bc-menu-link--selected {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
/* 모바일 전용 뒤로가기 버튼 — design.js가 주입, 데스크톱/태블릿에서는 숨김 (Figma 2623:19660) */
.sub-visual__back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Sub Visual 카테고리별 변형 (Figma 2336:15522/15521/15519/15520)
   사용법: 페이지가 속한 gnb 카테고리에 맞춰 .sub-visual에 아래 중 하나를 추가
   - .sub-visual--mypage    : 마이페이지 카테고리
   - .sub-visual--job       : 취업지원 카테고리 (전용 장식 블롭 .sub-visual__ellipse--job 포함)
   - .sub-visual--community : 커뮤니티 카테고리
   - .sub-visual--customer  : 고객지원 카테고리 (예: guide.html) */
.sub-visual--mypage .sub-visual__bg {
  background-image: url(../../../files/web1/images/common/sub-visual-mypage.png);
}
.sub-visual--job .sub-visual__bg {
  background-image: url(../../../files/web1/images/common/sub-visual-job-2.png);
}
.sub-visual--community .sub-visual__bg {
  background-image: url(../../../files/web1/images/common/sub-visual-community.png);
}
.sub-visual--customer .sub-visual__bg {
  background-image: url(../../../files/web1/images/common/sub-visual-3.png);
}
/* 취업지원은 스크림 색상이 다른 다크네이비(#25272b) 계열이다 (Figma 2336:15521) */
.sub-visual--job::before {
  background: linear-gradient(
    to bottom,
    rgba(37, 39, 43, 0.2) 0%,
    rgba(37, 39, 43, 0) 100%
  );
}
/* 취업지원 전용 장식 블롭 — Figma Ellipse 23 (2336:15521) */
.sub-visual__ellipse--job {
  position: absolute;
  left: 645px;
  top: -13px;
  width: 486px;
  height: 370px;
  z-index: 2;
  pointer-events: none;
}
.sub-visual__ellipse--job svg {
  position: absolute;
  inset: -28.08% -21.38%;
}

/* ============================================================
   CS 상세 섹션 래퍼 (card 오버라이드 포함)
   ============================================================ */
.cs-detail-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  padding-bottom: 100px;
}
/* card 클래스와 조합 시 border/shadow 제거 */
.cs-detail-section.card {
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
/* 다운로드 버튼 */
.cs-attachment-download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  color: var(--color-gray-500);
}
.cs-attachment-download:hover {
  background: var(--color-gray-50);
}

/* 반응형 — Sub Visual */
@media (max-width: 1295px) {
  .sub-visual {
    height: 200px;
  }
  .sub-visual__title {
    font-size: 32px;
  }
  .cs-attachment {
    width: 100%;
  }
  .sub-visual__ellipse--job {
    display: none;
  }
}
@media (max-width: 744px) {
  /* 모바일: 히어로 배너 대신 컴팩트 화이트 헤더바로 대체 (Figma 2623:19660, 모든 서브페이지 공통) */
  .sub-visual {
    height: 56px;
    background: var(--color-white);
    justify-content: flex-start;
  }
  .sub-visual::before {
    display: none;
  }
  .sub-visual__bg {
    display: none;
  }
  .sub-visual__ellipse--job {
    display: none;
  }
  .sub-visual__inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 8px;
    padding: 0 16px 0 4px;
  }
  .sub-visual__title {
    font-size: 18px;
    font-weight: 700;
    color: #101010;
    line-height: 1.45;
    text-align: left;
  }
  .sub-visual__breadcrumb {
    display: none;
  }
  .sub-visual__back {
    display: flex;
  }
}

/* 반응형 — 회원가입/로그인 auth 페이지 */
@media (max-width: 1295px) {
  .step-card {
    width: 100%;
  }
  .auth-card {
    width: 100%;
  }
  .signup-wrap {
    padding: 0 16px;
  }
}
@media (max-width: 744px) {
  /* auth 페이지(로그인/회원가입/비밀번호찾기) 공통 좌우 여백.
     .auth-shell 자체엔 좌우 패딩이 없어 h1·footer 등 래퍼 직속 요소가
     화면 끝에 붙는다. login-wrap(20px)은 아래에서 따로 덮는다. */
  .auth-shell {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
  /* 회원가입 1~4단계 공통: Figma 루트 padding 40/16/48.
     min-height:100vh(공통 .auth-shell)를 유지하면 헤더 높이만큼 내용이 없어도
     항상 세로 스크롤이 생기므로 모바일에서는 해제한다. */
  .reg-wrap {
    min-height: 0;
    padding-bottom: 48px;
  }
  .signup-page-head {
    padding: 32px 16px 20px;
  }
  .signup-page-title {
    font-size: 26px;
  }

  /* 좌우 16px은 .reg-wrap이 담당 — 여기서 또 주면 32px이 된다 */
  .signup-wrap {
    padding: 0;
    gap: 16px;
  }
  /* Timeline / progress steps - 모바일 (Figma node 2667:21558, 전체 280px / 서클 36px) */
  .timeline {
    /* 모바일에서는 폭 제한 없이 화면 전체를 쓴다 (웹 400px 제한이 넘어오지 않게 none으로 해제) */
    max-width: none;
    padding: var(--spacing-md) 0 0;
  }
  .timeline .step {
    max-width: none;
    /* 좁은 폭에서 옆 단계 라벨과 서로 붙지 않도록 좌우 여백 확보 (라벨 사이 최소 8px) */
    padding: 0 var(--spacing-2xs);
    font-size: var(--font-size-14);
    line-height: var(--line-height-snug);
    /* 라벨이 긴 화면(증명서 발급 신청 등)은 280px 안에서 줄바꿈 - 한글은 단어 단위로 끊음 */
    white-space: normal;
    word-break: keep-all;
  }
  .timeline .step + .step::before {
    left: calc(-50% + 18px);
    top: 18px;
    width: calc(100% - 36px);
    height: 1.5px;
  }
  .timeline .step .n {
    width: 36px;
    height: 36px;
    border-width: 1.7px;
    font-size: var(--font-size-17);
  }

  .signup-wrap .timeline {
    padding: var(--spacing-md) 0 0;
  }
  .signup-wrap .timeline .step {
    flex: 1 1 0;
    width: auto;
    padding: 0 var(--spacing-2xs);
    font-size: var(--font-size-14);
    line-height: var(--line-height-snug);
    white-space: normal;
    word-break: keep-all;
  }
  .signup-wrap .timeline .step + .step {
    margin-left: 0;
  }
  .signup-wrap .timeline .step + .step::before {
    left: calc(-50% + 18px);
    width: calc(100% - 36px);
    height: 1.5px;
    top: 18px;
  }
  .signup-wrap .timeline .step .n {
    width: 36px;
    height: 36px;
    border-width: 1.7px;
    font-size: 17px;
  }
  .signup-wrap .timeline .step.current .n {
    font-size: 17px;
  }
  .signup-wrap .timeline .step.done .n::after {
    width: 14px;
    height: 14px;
    background-size: 14px 14px;
  }

  .step-card {
    width: 100%;
    padding: 24px 20px;
  }
  .auth-card {
    width: 100%;
    padding: 32px 20px;
  }

  .verify-banners {
    flex-direction: row;
    gap: 16px;
  }
  .verify-banner {
    padding: 24px 20px;
    gap: 20px;
  }
  .verify-banner .vb-title {
    flex-direction: column;
  }
  .verify-banner .vb-desc {
    display: none;
  }

  .form-grid-row {
    flex-direction: column;
    gap: 12px;
  }
  .form-col {
    width: 100%;
  }
  .step-card .email-input {
    width: 100%;
  }
  /* AI-MODIFIED: 2026-08-28 socialJoinForm1(본인인증 이름/성별/생년월일/연락처) 실측 - 공용 .form-grid
     기본값(grid-template-columns:1fr 1fr)이 480px 이하에서만 1fr로 풀리는데(5477행), grid 트랙은
     1fr이어도 자식의 min-content(연락처 select+input 두 칸)에 맞춰 트랙 자체를 밀어 넓히는 문제가 있어
     744px 이하 전 구간에서 카드/화면 밖으로 넘쳤다(extra-career-form/career-form의 .form-grid와 동일
     원인, 1080행 주석 참고). step-card 안에서만 grid를 아예 풀어 flex 세로 쌓기로 바꾼다. */
  .step-card .form-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .signup-wrap .btn:not(.btn-sm),
  .auth-card .btn:not(.btn-sm),
  .auth-form-actions .btn:not(.btn-sm) {
    height: 44px;
    font-size: 15px;
  }

  /* ── FR-AUTH-002 4단계 가입완료 모바일 — Figma 2667:21448 (signup-complete-mobile) ── */
  /* 스테퍼 라벨: Caption/M 12px, 인디케이터 36px(위 공통 규칙), 라벨 gap 6px */
  .signup-wrap .timeline .step {
    font-size: var(--font-size-caption-m);
    line-height: var(--line-height-snug);
    gap: var(--spacing-6);
  }
  /* 현재 단계 숫자: Body/L 15px Bold */
  .signup-wrap .timeline .step.current .n {
    font-size: var(--font-size-body-l);
    line-height: var(--line-height-relaxed);
  }

  /* 완료 카드: padding 48/20/40, 내부 gap 32, radius-md, border+shadow-sm */
  .signup-wrap .done-card {
    padding: 48px var(--spacing-lg) 40px;
    gap: var(--spacing-2xl);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .signup-wrap .done-card h2 {
    font-size: var(--font-size-heading-h1);
    line-height: var(--line-height-tight);
    color: var(--color-text-heading);
  }
  /* Figma: 제목+본문은 gap 12px 그룹. HTML은 형제라 32px - 20px = 12px로 보정 */
  .signup-wrap .done-card p {
    margin-top: -20px;
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-base);
    color: var(--color-text-secondary);
  }
  /* 버튼: 전체 폭 52px, radius-sm, Body/M SemiBold */
  .signup-wrap .done-card .btn:not(.btn-sm) {
    width: 100%;
    height: 52px;
    padding: 0 var(--spacing-xl);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-body-m);
    font-weight: 600;
  }
}

/* ==========================================================================
   FR-AUTH-001 로그인 페이지 — Figma 2374:1697
   ========================================================================== */

/* 페이지 타이틀 - 로그인(.login-wrap)/회원가입(.reg-wrap) 전용. 스코프 없이 bare
   .auth-title-row h1로 써놓으면 비밀번호찾기(스코프 클래스 없음, 20px 의도)까지
   이 38px가 덮어써서 페이지마다 크기가 다르게 충돌했다 */
.login-wrap .auth-title-row,
.reg-wrap .auth-title-row {
  padding-top: 48px;
}
.login-wrap .auth-title-row h1,
.reg-wrap .auth-title-row h1 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  color: #111;
}

/* auth-card: 로그인 카드 (소셜 버튼 있는 카드만) */
.auth-card:has(.social-btn) {
  padding: 32px 34px 24px;
  gap: 20px;
}

/* SNS 버튼 사이 간격: 20px → 10px */
.auth-card:has(.social-btn) .social-btn + .social-btn {
  margin-top: -10px;
}

/* 폼 필드 사이 간격: 20px → 10px */
.auth-card:has(.social-btn) .form-row + .form-row {
  margin-top: -10px;
}

/* 비밀번호 폼행 → 에러 메시지: 20px → 8px */
.auth-card:has(.social-btn) .form-row + .alert-box.warn {
  margin-top: -12px;
}

/* auth-form-actions 기본 margin-top 초기화 */
.auth-card:has(.social-btn) .auth-form-actions {
  margin-top: 0;
}

/* 로그인 버튼 → 하단 링크: 20px → 10px */
.auth-card:has(.social-btn) .auth-links {
  margin-top: -10px;
}

/* auth-card 내 부제목 */
.auth-card > h2 {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* SNS 로그인 버튼 */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 8px;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 30px;
}
.social-btn.naver {
  background: #03c75a;
  color: #fff;
}
.social-btn.kakao {
  background: #fee500;
  color: #3c1e1e;
}
.social-btn.google {
  background: #fff;
  border: 1px solid #d4e0f0;
  color: #334658;
}

/* SNS 아이콘 */
.social-ico {
  display: block;
  width: 18px;
  height: 18px;
  font-size: 0;
  flex-shrink: 0;
  position: relative;
}
.social-btn.naver .social-ico::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../../files/web1/images/common/login-naver-ico.svg")
    no-repeat center / contain;
  transform: rotate(-180deg) scaleX(-1);
}
.social-btn.kakao .social-ico::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../../files/web1/images/common/login-kakao-ico.svg")
    no-repeat center / contain;
}
.social-btn.google .social-ico {
  font-size: 0;
}
.social-btn.google .social-ico::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../../files/web1/images/common/login-google-ico.svg")
    no-repeat center / contain;
}

/* 구분선 */
.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  color: #767676;
  white-space: nowrap;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d8dce4;
}

/* 오류 메시지: 인라인 레드 텍스트 (기존 박스 스타일 오버라이드) */
.auth-card .alert-box.warn {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0 !important;
  gap: 4px;
  align-items: flex-start;
  font-size: 13px;
  color: #e4022d;
  line-height: 1.4;
}
.auth-card .alert-box.warn .ico {
  display: none;
}
.auth-card .alert-box.warn b {
  font-weight: 400;
  color: #e4022d;
  margin-bottom: 0;
  display: inline;
}
.auth-card .alert-box.warn > div {
  color: #e4022d;
}

/* 취소 버튼: 피그마에 없음 */
.auth-form-actions .btn-ghost {
  display: none;
}

/* 로그인 버튼 */
.auth-form-actions .btn-primary {
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  background: #2d65f2;
  color: #fff;
  border: none;
}

/* 하단 링크 */
.auth-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  background: transparent;
  overflow: visible;
}
.auth-links a {
  font-size: 14px;
  font-weight: 500;
  color: #2d65f2;
  text-decoration: none;
  padding: 10px 4px;
  line-height: 1.45;
}
.auth-links .sep {
  font-size: 12.5px;
  color: #d8dce4;
}

/* 계정 잠금 안내 카드 */
.lock-toast {
  width: 480px;
  background: #fff;
  border: 1px solid #ecf0f5;
  border-radius: 8px;
  box-shadow: 0px 1px 1px rgba(17, 24, 39, 0.06);
  padding: 14px 20px 14px 16px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  position: relative;
  margin-top: 20px;
  margin-bottom: 54px;
}
.lock-toast .ico {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  font-size: 0;
  position: relative;
}
.lock-toast .ico::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../../files/web1/images/common/login-alert-ico.svg")
    no-repeat center / contain;
}
.lock-toast b {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: #ee4b47;
  line-height: 1.5;
  margin-bottom: 8px;
}
.lock-toast > div {
  flex: 1;
  font-size: 15px;
  color: #767676;
  line-height: 1.5;
}
/* 잠금 해제 버튼: 카드 아래 별도 컴포넌트처럼 표시 (Figma 2472:14735) */
.lock-toast a {
  position: absolute;
  bottom: -54px;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #2d65f2;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #2d65f2;
  text-decoration: none;
}

@media (max-width: 1295px) {
  .lock-toast {
    width: 100%;
  }
}

/* 모바일 좌우 여백 */
@media (max-width: 744px) {
  .auth-shell.login-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 페이지 타이틀: 모바일 간격/텍스트 축소 */
@media (max-width: 744px) {
  .auth-card:has(.social-btn) {
    padding: 20px;
  }
  
  .login-wrap .auth-title-row,
  .reg-wrap .auth-title-row {
    padding-top: 32px;
    margin-bottom: 20px;
  }
  .login-wrap .auth-title-row h1,
  .reg-wrap .auth-title-row h1 {
    font-size: 26px;
  }
}

/* 코멘트 위젯 토글 버튼 숨김 */
.kwmf-cmt-toggle {
  display: none !important;
}

/* ==========================================================================
   FR-AUTH-002 회원가입 공통 — Figma 2374:1770
   ========================================================================== */

/* 스텝 카드 gap: 32px → 16px */
.step-card {
  gap: 16px;
}

/* 스텝 번호 서클: 12px Bold */
.step-num {
  font-size: 12px;
  font-weight: 700;
}

/* 스텝 헤드 제목: 20px → 18px */
.step-card .step-head h3 {
  font-size: 18px;
  line-height: 1.45;
}

/* 동의 블록 패딩: px-[18px] py-[16px] */
.consent-block {
  padding: 16px 18px;
}

/* 안내 노트 숨김 (Figma에 없음) */
.step-note {
  display: none;
}

/* 버튼 영역: 중앙 정렬 (HTML inline style 오버라이드) */
.signup-wrap .form-actions {
  justify-content: center !important;
}

/* ==========================================================================
   FR-AUTH-002 2단계 본인인증 — Figma 2374:1811
   ========================================================================== */

/* step-head h3: 2단계는 20px SemiBold (1단계 18px 오버라이드 복원) */
.step-card:has(.verify-banners) .step-head h3 {
  font-size: 20px;
  font-weight: 600;
}

/* step-num: 공통 12px Bold 오버라이드 → 13px Medium 복원 */
.step-card:has(.verify-banners) .step-num {
  font-size: 13px;
  font-weight: 500;
}

/* 인증 배너 아이콘: 이모지 숨기고 Figma SVG로 교체 */
.verify-banner .vb-icon {
  font-size: 0;
}
.verify-banner[data-verify="phone"] .vb-icon {
  background: url("../../../files/web1/images/common/verify-phone-ico.svg")
    no-repeat center / contain;
}
.verify-banner[data-verify="cert"] .vb-icon {
  background: url("../../../files/web1/images/common/verify-cert-ico.svg")
    no-repeat center / contain;
}

/* vb-check: 절대 위치(우상단) → 플렉스 인라인 + 아이콘 아래 배치
   Figma: check-row 내 아이콘(90×100) → 20px gap → 라디오 20px */
.step-card:has(.verify-banners) .verify-banner {
  gap: 0;
}
.step-card:has(.verify-banners) .verify-banner .vb-icon {
  order: 1;
}
.step-card:has(.verify-banners) .verify-banner .vb-check {
  position: static;
  order: 2;
  margin-top: 20px;
  border: 1px solid #aab4c1;
  background: #fff;
  font-size: 0;
  color: transparent;
}
.step-card:has(.verify-banners) .verify-banner.selected .vb-check {
  background: url("../../../files/web1/images/common/verify-radio-checked.svg")
    no-repeat center / contain;
  border: none;
}
.step-card:has(.verify-banners) .verify-banner .vb-title {
  order: 3;
  margin-top: 32px;
  width: 100%;
  justify-content: center;
}
@media (max-width: 744px) {
  .step-card:has(.verify-banners) .verify-banner .vb-title {
    margin-top: 16px;
  }
}
.step-card:has(.verify-banners) .verify-banner .vb-desc {
  order: 4;
  margin-top: 8px;
  width: 100%;
}

/* 본인인증 버튼: Figma 미포함, 숨김 */
#verifyBtn {
  display: none;
}

/* ==========================================================================
   FR-AUTH-002 3단계 기본정보입력 — Figma 2374:1844
   ========================================================================== */

/* step-card gap: 16px → 32px (Figma: gap-[32px]) */
/* step-num, step-head h3: 공통 오버라이드(3948~3954) 복원 */
.step-card:has(.job-select) {
  gap: 32px;
  --green: #12a554; /* Figma: --color-status-success / 아이디 성공 hint */
}
.step-card:has(.job-select) .step-num {
  font-size: 13px;
  font-weight: 500;
}
.step-card:has(.job-select) .step-head h3 {
  font-size: 20px;
  font-weight: 600;
}

/* form-grid 섹션 간격: 18px → 32px (Figma: 각 폼 섹션 gap-[32px]) */
.step-card:has(.job-select) .form-grid {
  gap: 32px 24px;
}

/* placeholder 색상: Figma --text/tertiary #767676 */
.step-card .form-row input::placeholder,
.step-card .form-row textarea::placeholder {
  color: #767676;
}

/* 코멘트 핀 숨김 */
.kwmf-cmt-pin {
  display: none !important;
}

/* ==========================================================================
   FR-AUTH-002 3단계 세부 폼 섹션 — Figma 2374:1860 / 1869 / 1870 / 1879
   ========================================================================== */

/* 이름/연락처(disabled input): Figma gap-[6px] — 현재 공통 8px에서 오버라이드 */
.step-card:has(.job-select) .form-row:has(input:disabled) {
  gap: 6px;
}

/* 아이디(inline-btn-row): Figma gap-[6px] — label + inline-btn-row + hint */
.step-card:has(.job-select) .form-row:has(.inline-btn-row) {
  gap: 6px;
}

/* hint 공통 line-height: 1.45 (Figma Caption/M-Regular leading-[1.45]) */
/* 이름(2374:1864) / 연락처(2374:1868) hint 적용 */
.step-card .form-hint {
  line-height: 1.45;
}

/* ==========================================================================
   FR-AUTH-002 3단계 인재풀 라디오 — Figma 2374:1879
   ========================================================================== */

/* 미체크: 20px / 1px #aab4c1 border (전역 1.5px #3366ff 오버라이드) */
.step-card:has(.job-select) .radio-row input[type="radio"] {
  border: 1px solid #aab4c1;
  background-image: none;
}

/* 체크: #2d65f2 fill + white 중앙 dot / 20px SVG */
.step-card:has(.job-select) .radio-row input[type="radio"]:checked {
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232d65f2'/%3E%3Ccircle cx='10' cy='10' r='5' fill='white'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}

/* ==========================================================================
   구체도 버그 수정 — disabled input bg #f5f6f9 (Figma: --bg/subtle)
   ========================================================================== */
/* :not 규칙(0,4,1)이 :disabled 규칙(0,3,1)보다 강해서 #fff가 남는 문제 수정.
   :not + :disabled 조합(0,5,1)으로 올바른 bg 확보. */
.step-card .form-row input:not([type="radio"]):not([type="checkbox"]):disabled {
  background: #f5f6f9;
}

/* ==========================================================================
   FR-AUTH-002 4단계 가입완료 — Figma 2374:1903
   ========================================================================== */
/* done-card가 FR-AUTH-002(.signup-wrap > .card.done-card)와
   FR-AUTH-003(.auth-card.done-card) 양쪽에서 사용됨.
   width:768px은 FR-AUTH-002 컨텍스트에만 제한 — auth-card(480px)를 덮어쓰지 않도록. */
.signup-wrap .done-card {
  display: flex;
  flex-direction: column;
  /* 고정 768px이 아니라 상한선으로 둔다 — 고정폭이면 이 규칙이 파일 뒤쪽에 있어
     앞선 미디어쿼리의 width:100% 를 이겨서 태블릿/모바일에 가로 스크롤이 생긴다 */
  width: 100%;
  max-width: 768px;
  box-shadow: 0px 1px 2px rgba(15, 31, 61, 0.06);
}
.done-card h2 {
  line-height: 1.4;
}
/* 가입/처리 완료 메시지를 한 글자씩 위아래로 출렁이며 나타나게 하는 연출.
   .done-card__char span은 JS(design.js)가 텍스트를 글자 단위로 쪼개 붙여준다. */
.done-card h2 .done-card__char {
  display: inline-block;
  opacity: 0;
  animation: done-card-char-wave 0.7s ease-out forwards;
}
@keyframes done-card-char-wave {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
/* Figma: h2+p는 gap 10px 그룹 안에 있으나 HTML은 done-card(gap:34px)의 직접 자식.
   34px - 24px = 10px 시각 간격으로 맞춤. */
.done-card p {
  line-height: 1.5;
  margin-top: -24px;
}
.done-card .btn {
  width: auto;
}

/* ==========================================================================
   FR-AUTH-003 비밀번호찾기 — Figma 2374:1962
   ========================================================================== */
/* 인증번호 form-row: 레이블↔inline-btn-row 간격 Figma 6px (공통 8px 오버라이드) */
.auth-card .form-row:has(.inline-btn-row) {
  gap: 6px;
}

/* Figma 2374:1962: content gap-[32px] 구현
   피그마에서 auth-card와 auth-form-actions는 형제 요소(gap 32px) - 회원가입
   step-card/.form-actions와 동일하게 실제 DOM에서도 형제로 뺐다(id="stepN"
   래퍼 안에 .auth-card + .auth-form-actions). */
.auth-card:has(.step-head) + .auth-form-actions {
  margin-top: var(--spacing-2xl);
}
/* stepN 래퍼(auth-card + auth-form-actions)가 auth-shell의 폭 없는 flex item이라
   .auth-card의 width:100%(모바일)가 기준으로 삼을 폭이 없어 카드가 좁게 찌그러졌음 -
   래퍼 스스로 auth-shell과 같은 중앙정렬 flex 컨텍스트를 갖게 해서 폭을 채운다.
   :where()로 감싸 특이도를 0으로 낮춤 - 안 그러면 id 선택자가 .d-none(display:none)을
   이겨버려서 STEP2가 숨김 상태에서도 그대로 보여버림 */
:where(#step1, #step2) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 취소 버튼 복원: 전역 display:none(FR-AUTH-001용) 오버라이드
   + Figma 배치 순서 보정 (HTML: primary→ghost / Figma: ghost←left, primary→right) */
.auth-card:has(.step-head) + .auth-form-actions .btn-ghost {
  display: flex;
  order: -1;
}

/* ==========================================================================
   FR-AUTH-003 step3 완료 — Figma 2374:1989
   ========================================================================== */
/* done-card 자식 간격: JS display:block 대비 margin-top으로 gap 대체
   icon→h2: 34px, p→button: 34px, h2→p: 10px (Figma 내부 그룹 gap) */
.auth-card.done-card > * + * {
  margin-top: 34px;
}
.auth-card.done-card h2 + p {
  margin-top: 10px;
}

/* 아이콘: 잠금 일러스트 126×120px (auth-card done-card 전용; 가입완료 131px와 구분) */
.auth-card.done-card .icon {
  width: 126px;
  background-image: url("../../../files/web1/images/common/pw-reset-icon.png");
}

/* 버튼 full-width 복원: .done-card .btn { width: auto } 오버라이드 대상에서 제외.
   FR-AUTH-002 done-card 버튼은 w-full 클래스 없음 → auto 유지.
   FR-AUTH-003 step3 버튼은 w-full 클래스 있음 → 100% 복원. */
.done-card .btn.w-full {
  width: 100%;
}

/* ── FR-AUTH-003 step3 완료 모바일 — Figma 2667:21800 (password-reset-mobile) ── */
@media (max-width: 744px) {
  /* 카드: padding 40/16, border 1px border/default, radius 없음(피그마에 라운드 미지정),
     shadow 0 4px 6px rgba(15,31,61,0.06) — 데스크톱(radius 16, shadow 0 1px 2px)과 다름 */
  .auth-card.done-card {
    padding: 40px var(--spacing-md);
    border: 1px solid var(--color-border-default);
    border-radius: 0;
    box-shadow: 0px 4px 6px rgba(15, 31, 61, 0.06);
  }
  /* 내부 gap 32px. JS가 인라인 display:block을 넣어 flex가 풀리므로 margin-top으로 구현 */
  .auth-card.done-card > * + * {
    margin-top: var(--spacing-2xl);
  }
  /* 제목+본문은 gap 12px 그룹 */
  .auth-card.done-card h2 + p {
    margin-top: var(--spacing-sm);
  }
  .auth-card.done-card h2 {
    font-size: var(--font-size-heading-h1);
    line-height: var(--line-height-tight);
    color: var(--color-text-heading);
  }
  .auth-card.done-card p {
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-base);
    color: var(--color-text-secondary);
  }
  /* 버튼: 전체 폭 52px, radius-sm, Body/M SemiBold */
  .auth-card.done-card .btn.w-full {
    width: 100%;
    height: 52px;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-xl);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-body-m);
    font-weight: 600;
  }
}

/* ==========================================================================
   FR-COM-003 멘토 목록 — Figma 2472:11684
   ========================================================================== */
/* 멘토 카드 그리드: 2열 고정, gap-[20px]
   .mentor-list-toolbar + .card-list : 나의 문의내역/정렬 툴바 바로 뒤의 카드 목록(멘토 목록 고유 패턴) */
.mentor-list-toolbar + .card-list {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* 멘토 카드: bg --color-primary-bg, border 1px --color-primary-border-light, radius 16px, h 220px, pt-30 pb-36 px-30 */
.mentor-card {
  display: flex;
  align-items: stretch;
  height: 220px;
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary-border-light);
  border-radius: 16px;
  padding: 30px 30px 36px;
  box-shadow: none;
  cursor: pointer;
}

/* 카드 아바타 일러스트 <use> 공유용 숨김 defs 컨테이너 */
.mentor-avatar-illust-defs {
  position: absolute;
}

/* 프로필 영역: 아바타 + 이름/회사, 세로 정렬(좌측 정렬), 고정폭 230px */
.mentor-card__profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 230px;
  flex-shrink: 0;
}

/* 아바타: 70x70 원형, bg --color-avatar-bg, border 2px --color-primary, 내부 인물 일러스트 clip */
.mentor-card__avatar {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--color-avatar-bg);
  border: 2px solid var(--color-primary);
  overflow: hidden;
  flex-shrink: 0;
}

.mentor-card__avatar-img {
  position: absolute;
  left: -9px;
  top: 6px;
  width: 86.318px;
  height: 138.018px;
}

/* 이름/회사 텍스트: 좌측 정렬, 폭 100% */
.mentor-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  text-align: left;
}

.mentor-card__info h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-gray-900);
}

.mentor-card__info p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-900);
}

/* 상세 목록: 좌측 divider, flex:1 0 0, 세로 정렬 */
.mentor-card__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 0 0;
  height: 100%;
  border-left: 1px solid var(--color-divider-primary-light);
  padding-left: 16px;
  padding-top: 10px;
  list-style: none;
}

.mentor-card__detail li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-700);
}

.mentor-card__detail li::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #999;
}

/* 검색 바 컨테이너 (Figma node 2472:12243): bg #ececf2, border 1px #e9eef8, radius 10px, padding 16px 20px, gap 8px */
.mentor-search-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: #ececf2;
  border: 1px solid #e9eef8;
  border-radius: 10px;
}
.mentor-search-bar__field {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mentor-search-bar__label {
  padding: 0 2px;
  font-family: "Pretendard", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
}
.mentor-search-bar__input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #dadfe6;
  border-radius: 8px;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
}
.mentor-search-bar__input::placeholder {
  color: #767676;
}
.mentor-search-bar__submit.btn-primary {
  flex: none;
  gap: 4px;
  border-radius: 4px;
}
.mentor-search-bar__inquiry {
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
  width: auto;
  flex: none;
  margin: 0;
  margin-top: auto;
  gap: 0;
}
.mentor-search-bar__inquiry .btn-ghost {
  gap: 4px;
  border-radius: 4px;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.mentor-search-bar__inquiry .btn-ghost:hover {
  background: var(--color-primary-bg);
  color: #2d65f2;
}
.mentor-search-bar__plus-icon {
  /* Figma 검색 바(2472:12243)에는 이 아이콘이 없음 — 마크업은 유지하고 숨김 처리만 */
  display: none;
}

/* 나의 문의내역 + 정렬: filterbar 아래 별도 줄, 양쪽 끝 정렬 */
.mentor-list-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
}
.mentor-list-toolbar .form-row.mentor-sort {
  margin-bottom: 0;
}

/* 정렬 컨트롤: width 276px, select h44 border #dadfe6 radius8 padding16, chevron 아이콘 */
.form-row.mentor-sort {
  max-width: 100%;
  gap: 8px;
  margin-bottom: 16px;
}
.form-row.mentor-sort label {
  font-family: "Pretendard", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #333333;
}
.form-row.mentor-sort select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  align-self: flex-start;
  width: auto;
  height: 44px;
  box-sizing: border-box;
  padding: 0 40px 0 16px;
  background: #ffffff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 16px center / 20px 20px;
  border: 1px solid #dadfe6;
  border-radius: 8px;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #767676;
  cursor: pointer;
}

/* 반응형 — FR-COM-003 멘토 목록 (태블릿 전용 프레임 없음 → 웹 기준 유동 처리) */
@media (max-width: 1295px) {
  .mentor-search-bar {
    flex-wrap: wrap;
  }
  .mentor-search-bar__field {
    flex: 1 1 100%;
  }

  /* 2열 그리드 + 고정폭 230px 프로필이 태블릿 폭에서 detail(flex:1 0 0)을 밀어내며
     넘치는 걸 막기 위해 1열로 전환 (카드 내부 구조/수치는 그대로 유지) */
  .mentor-list-toolbar + .card-list {
    grid-template-columns: 1fr;
  }
}

/* 반응형 — FR-COM-003 멘토 목록 모바일 (Figma 2523:9390 링크가 더 이상 조회되지 않아,
   검색어 입력은 한 줄 전체너비, "멘토 검색"/"나의 문의내역" 두 버튼은 그 아래 한 줄에
   나란히 절반씩 배치되도록 처리 — 버튼이 각각 한 줄씩 크게 나오던 문제 수정) */
@media (max-width: 744px) {
  .mentor-list-toolbar + .card-list {
    gap: 16px;
  }

  .filterbar:has(.mentor-search-bar__submit) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }
  .filterbar:has(.mentor-search-bar__submit) .form-row {
    grid-column: 1 / -1;
  }
  .mentor-search-bar__submit,
  .mentor-search-bar__inquiry {
    align-self: stretch;
    width: auto;
    margin: 0;
  }
  .mentor-search-bar__submit {
    grid-column: 1 / -1;
  }
  .mentor-search-bar__inquiry .btn {
    width: 100%;
  }

  /* 모바일: 아바타 원형 40px(웹 70px), border-color 유지, 내부 illust는 비율 유지한 채 축소 */
  .mentor-card {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 20px;
  }

  .mentor-card__profile {
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 16px;
  }

  .mentor-card__info {
    align-items: flex-start;
    text-align: left;
    flex: 1 0 0;
    gap: 2px;
  }

  .mentor-card__info h4,
  .mentor-card__info p {
    width: 100%;
  }

  .mentor-card__avatar {
    width: 40px;
    height: 40px;
    border-width: 1.143px;
  }

  .mentor-card__avatar-img {
    left: -5.14px;
    top: 3.43px;
    width: 49.325px;
    height: 78.868px;
  }

  .mentor-card__detail {
    flex: none;
    height: auto;
    width: 100%;
    gap: 2px;
    border-left: none;
    padding-left: 0;
    padding-top: 0;
  }

  .mentor-card__detail li {
    font-size: 14px;
  }
}

/* ---------- FR-COM-011 멘토 상세: 섹션 제목 / 정보 카드 / 페이지네이션 행 ---------- */
/* Figma Title/Section WithDesc(node 2293:4497) 스펙: 26px Bold 제목 + 설명 + 하단 구분선 */
.mentor-detail__section-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs, 4px);
  padding: var(--spacing-lg, 20px) 0 var(--spacing-md, 16px);
  border-bottom: 1px solid var(--color-border-strong);
  margin: var(--spacing-2xl, 32px) 0;
}
.mentor-detail__section-title {
  margin: 0;
  font-size: var(--font-size-26);
  font-weight: 700;
  color: var(--color-text-heading);
}
.mentor-detail__section-desc {
  margin: 0;
  font-size: var(--font-size-16);
  font-weight: 400;
  color: var(--color-text-secondary);
}
.mentor-detail-card {
  width: 100%;
  border: 1px solid var(--color-mentor-card-border);
  background: var(--color-mentor-card-bg);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-lg);
}
.mentor-detail-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}
.mentor-detail-card__profile {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  min-width: 0;
}
.mentor-detail-card__avatar {
  flex: none;
  width: 70px;
  height: 70px;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: center;
}
.mentor-detail-card__profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xs);
  min-width: 0;
}
.mentor-detail-card__name {
  font-weight: 700;
  font-size: var(--font-size-22);
  color: var(--color-gray-900);
}
.mentor-detail-card__name-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}
.mentor-detail-card__badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.mentor-detail-card__badge-icon {
  flex: none;
  width: 20px;
  height: 20px;
}
.mentor-detail-card__badge-text {
  font-weight: 600;
  font-size: var(--font-size-16);
  color: var(--color-gray-900);
}
.mentor-detail-card__contact {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  font-size: var(--font-size-16);
  color: var(--text-700);
}
.mentor-detail-card__apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: var(--font-size-15);
  text-align: center;
  cursor: pointer;
}
.mentor-detail-card__sub-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-md);
}
.mentor-detail-card__sub-row {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-md);
}
.mentor-detail-card__sub-card {
  flex: 1 0 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0px 1px 1px rgba(17, 24, 39, 0.06);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-xs);
}
.mentor-detail-card__sub-card--wide {
  flex: none;
  width: 100%;
}
.mentor-detail-card__sub-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mentor-detail-card__sub-icon {
  flex: none;
  width: 24px;
  height: 24px;
}
.mentor-detail-card__sub-title {
  font-weight: 700;
  font-size: var(--font-size-18);
  color: var(--color-gray-900);
}
.mentor-detail-card__sub-body {
  font-size: var(--font-size-16);
  color: var(--text-700);
  line-height: 1.6;
}
.mentor-detail-card__career-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md) var(--spacing-xl);
}
.mentor-detail-card__career-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.mentor-detail-card__career-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  font-size: var(--font-size-15);
  color: var(--text-500);
  flex: none;
}
.mentor-detail-card__career-dot {
  flex: none;
  width: 4px;
  height: 4px;
}
.mentor-detail-card__career-value {
  font-weight: 600;
  font-size: var(--font-size-16);
  color: var(--color-gray-900);
}

/* 반응형 — FR-COM-011 멘토 상세: 멘토 정보 카드 태블릿/모바일 (Figma 2612:10227, 사용자가 준 링크 / 태블릿은 모바일과 동일 레이아웃 적용 요청) */
@media (max-width: 1295px) {
  .mentor-detail-card {
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
  }

  .mentor-detail-card__top {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
  }

  .mentor-detail-card__profile {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .mentor-detail-card__profile-info {
    align-items: center;
    gap: 6px;
  }

  .mentor-detail-card__name {
    font-size: 19px;
    text-align: center;
  }

  .mentor-detail-card__name-row {
    flex-direction: column;
    gap: 6px;
  }

  .mentor-detail-card__badge-text {
    font-size: var(--font-size-14);
  }

  .mentor-detail-card__contact {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    font-size: var(--font-size-14);
  }

  .mentor-detail-card__apply-btn {
    width: 100%;
  }

  .mentor-detail-card__sub-list {
    gap: var(--spacing-sm);
  }

  .mentor-detail-card__sub-row {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .mentor-detail-card__sub-card {
    gap: 16px;
  }

  .mentor-detail-card__sub-title {
    font-size: var(--font-size-16);
  }

  .mentor-detail-card__sub-body {
    font-size: var(--font-size-14);
  }

  .mentor-detail-card__career-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mentor-detail-card__career-item {
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  .mentor-detail-card__career-label {
    gap: 6px;
    font-size: var(--font-size-14);
  }

  .mentor-detail-card__career-value {
    font-size: var(--font-size-14);
  }
}
.mentor-detail__pagination-row {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-sm, 12px);
}
/* Figma Notice/Toolbar(node 2658:18322) 스펙: pt-2 pb-16 px-4, "총 N건" 카운트 전용 */
.mentor-detail__qna-toolbar {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px;
}
@media (max-width: 744px) {
  .mentor-detail__qna-toolbar {
    min-height: unset;
  }
}
.mentor-detail__pagination-row .pagination {
  margin: 0;
}
.top-actions__cert-link {
  color: inherit;
  text-decoration: none;
}

/* ---------- FR-COM-011 멘토 상세: Q&A 상세(질문/답변) ---------- */
.qna-detail {
  width: 100%;
  margin-top: var(--spacing-xl);
}
.qna-detail__section-header {
  padding: var(--spacing-lg) 0 var(--spacing-md);
  border-bottom: 1px solid var(--color-border-strong);
}
.qna-detail__section-title {
  font-size: var(--font-size-26);
  font-weight: 700;
  color: var(--color-text-heading);
}
.qna-detail__article-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-bg-muted);
}
.qna-detail__title-row {
  padding-top: var(--spacing-lg);
}
.qna-detail__title {
  font-size: var(--font-size-26);
  font-weight: 700;
  color: var(--color-text-heading);
}
.qna-detail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--spacing-md);
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.qna-detail__body {
  padding: var(--spacing-xs) 0 var(--spacing-xl);
  font-size: var(--font-size-16);
  color: var(--color-text-body);
  line-height: 1.6;
}
.qna-detail__attachment {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  background: var(--color-white);
  border: 1px solid var(--color-coolgray-700);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
.qna-detail__attachment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}
.qna-detail__attachment-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3xs);
  flex: 1 0 0;
  min-width: 0;
}
.qna-detail__attachment-name {
  font-size: var(--font-size-15);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-body);
  word-break: break-word;
}
.qna-detail__answer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.qna-detail__answer-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.qna-detail__answer-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-text-heading);
}
.qna-detail__answer-label {
  flex: 1 0 0;
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--color-text-heading);
}
.qna-detail__answer-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--font-size-14);
  font-weight: 600;
  color: var(--color-status-success);
  background: var(--color-status-success-bg);
  border-radius: var(--radius-full);
}
.qna-detail__answer-text {
  padding: var(--spacing-md);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  font-size: var(--font-size-16);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.qna-detail__actions {
  display: flex;
  width: 100%;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-xl);
}
.qna-detail__actions-left {
  flex: 1 0 0;
}
.qna-detail__actions-right {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-xs);
}
.qna-detail__actions .btn {
  border-radius: 4px;
}
/* 모바일에서만: 목록으로(좌, 버튼 1개) : 삭제·수정(우, 버튼 2개)이 정확히 1:1:1 폭이 되도록
   좌측 컨테이너는 1 unit(버튼 1개가 꽉 채움), 우측 컨테이너는 2 unit(버튼 2개가 각 1 unit씩 채움).
   PC는 원래대로 좌측 버튼은 자기 폭만큼, 우측 버튼 2개는 우측 정렬 유지 */
@media (max-width: 744px) {
  .qna-detail__actions-right {
    flex: 2 0 0;
    justify-content: flex-start;
  }
  .qna-detail__actions-left .btn {
    width: 100%;
  }
  .qna-detail__actions-right .btn {
    flex: 1 0 0;
  }
}
.qna-detail__btn-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

/* FR-CT-002 증명서 진위확인(QR) 인증완료 - node 2638:10894 */
.cert-verify {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xl);
  width: 100%;
}

.cert-verify__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border: 1px solid var(--color-status-success);
  background: var(--color-white);
}

.cert-verify__banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-2xl);
  background: var(--color-status-success-bg);
}

.cert-verify__banner-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.cert-verify__banner-icon {
  flex-shrink: 0;
}

.cert-verify__banner-title {
  font-weight: 700;
  font-size: var(--font-size-18);
  line-height: 1.45;
  color: var(--color-status-success);
}

.cert-verify__banner-desc {
  font-weight: 400;
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--color-status-success);
}

.cert-verify__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3xl);
  width: 100%;
  padding: var(--spacing-5xl);
}

.cert-verify__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  width: 200px;
}

.cert-verify__qr-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 4px solid var(--color-border-default);
  background: var(--color-white);
}

.cert-verify__qr-image {
  width: 192px;
  height: 192px;
  object-fit: cover;
  object-position: center;
}

.cert-verify__code-field {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 200px;
}

.cert-verify__code-input {
  flex: 1 0 0;
  min-width: 0;
  height: 44px;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  font-weight: 400;
  font-size: var(--font-size-16);
  color: var(--color-text-secondary);
  text-align: center;
}

.cert-verify__info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3xl);
  width: 100%;
  padding-top: var(--spacing-3xl);
}

.cert-verify__info-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1 0 0;
}

.cert-verify__divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-border-default);
}

.cert-verify__info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xl);
  width: 100%;
}

.cert-verify__info-label {
  width: 120px;
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}

.cert-verify__info-value {
  font-weight: 400;
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}

.cert-verify__info-value--success {
  color: var(--color-status-success);
}

.cert-verify__refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  height: 44px;
  padding: 0 var(--spacing-lg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--spacing-2xs);
  background: var(--color-white);
  font-weight: 600;
  font-size: var(--font-size-15);
  line-height: var(--line-height-base);
  color: var(--color-text-heading);
}

.cert-verify__refresh-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.cert-verify__panel--error {
  border-color: var(--color-status-error);
}

.cert-verify__banner--error {
  background: var(--color-status-error-bg);
}

.cert-verify__banner-title--error {
  color: var(--color-status-error);
}

.cert-verify__banner-desc--error {
  color: var(--color-status-error);
}

.cert-verify__info-value--error {
  color: var(--color-status-error);
}

.cert-verify__qr-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 400;
  font-size: var(--font-size-16);
  color: var(--color-text-disabled);
  text-align: center;
}

/* 태블릿 전용 프레임 없음 - 웹 레이아웃 기준 안 깨지게 유동 처리 */
@media (max-width: 1295px) {
  .cert-verify__body {
    padding: var(--spacing-2xl);
  }

  .cert-verify__info {
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .cert-verify__divider {
    display: none;
  }
}

@media (max-width: 744px) {
  .cert-verify__banner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-2xl);
  }

  .cert-verify__banner-title {
    font-size: var(--font-size-16);
    white-space: nowrap;
  }

  .cert-verify__banner-desc {
    font-size: var(--font-size-14);
  }

  .cert-verify__body {
    padding: var(--spacing-3xl);
  }

  .cert-verify__info {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-top: 0;
  }

  .cert-verify__info-col {
    flex: none;
  }

  .cert-verify__info-row {
    gap: var(--spacing-sm);
  }

  .cert-verify__info-label {
    width: auto;
    min-width: 100px;
  }
}
/* ============================================================
   FR-MY-001 홈(대시보드) - Figma node 2617:9098
   1) WelcomeBanner(인사말 + 바로가기 버튼 + KPI 카드 3개)
   2) 나의 경력 요약(누적 근무기간 + 경력수준 비교)
   3) 하단 - 연도별 근무일수/기간 확인
   ============================================================ */
body:has(.my-home__banner) #container {
  margin-bottom: 0;
}
body:has(.my-home__banner) main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
  padding-bottom: 0;
}

/* ----- 1) WelcomeBanner ----- */
body:has(.my-home__banner) .my-home__banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
  padding: var(--spacing-2xl);
  background: var(--color-primary-bg);
  border-radius: var(--radius-xl);
  opacity: 0;
  transform: translateY(16px);
  animation: my-home-section-fade-in 0.5s ease-out forwards;
}
/* 배너 → 요약 → 하단 순서로 순차 등장 */
body:has(.my-home__banner) .my-home__summary {
  opacity: 0;
  transform: translateY(16px);
  animation: my-home-section-fade-in 0.5s ease-out 0.12s forwards;
}
body:has(.my-home__banner) .my-home__bottom {
  opacity: 0;
  transform: translateY(16px);
  animation: my-home-section-fade-in 0.5s ease-out 0.24s forwards;
}
@keyframes my-home-section-fade-in {
  to {
    opacity: 1;
    transform: none;
  }
}
body:has(.my-home__banner) .my-home__banner-head {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
  width: 100%;
}
body:has(.my-home__banner) .my-home__banner-title {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-2xs);
  min-width: 0;
  white-space: nowrap;
}
body:has(.my-home__banner) .my-home__banner-name {
  font-size: var(--font-size-heading-h1);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
}
body:has(.my-home__banner) .my-home__banner-desc {
  margin: 0;
  font-size: var(--font-size-body-m);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
body:has(.my-home__banner) .my-home__banner-head .btn-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
  border: 0;
}
body:has(.my-home__banner) .my-home__banner-head .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  height: 44px;
  padding: 0 var(--spacing-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-6);
  font-size: var(--font-size-body-s);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
}
body:has(.my-home__banner) .my-home__banner-head .btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
body:has(.my-home__banner) .my-home__banner-head .btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
body:has(.my-home__banner) .my-home__banner-head .btn-ghost {
  background: var(--color-bg-page);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
body:has(.my-home__banner) .my-home__banner-head .btn-ghost:hover {
  background: var(--color-bg-subtle);
}

/* KPI 카드 6개 — 진행상태 5단계 + 증명서. 한 줄에 6장이고, 좁아지면 3열 -> 2열로 접힌다 */
body:has(.my-home__banner) .my-home__banner .my-home__stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* 부제(.sub) 유무로 카드 높이가 달라지지 않도록 같은 행을 같은 높이로 늘린다 */
  align-items: stretch;
  gap: var(--spacing-md);
  width: 100%;
  margin: 0;
}
@media (max-width: 1280px) {
  body:has(.my-home__banner) .my-home__banner .my-home__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  body:has(.my-home__banner) .my-home__banner .my-home__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
body:has(.my-home__banner) .stat-card {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  /* 6장을 한 줄에 놓으면 카드 폭이 160px 안팎이라 32px 패딩으로는 라벨이 두 줄로 접힌다 */
  padding: var(--spacing-md);
  background: var(--color-white);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body:has(.my-home__banner) .stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
body:has(.my-home__banner) .stat-card .top {
  display: flex;
  /* 좁은 카드라 아이콘 옆에 라벨을 두면 글자가 세로로 쪼개진다 - 아이콘 아래로 내린다 */
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-xs);
  width: 100%;
  margin: 0 0 var(--spacing-sm);
}
body:has(.my-home__banner) .stat-card__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  transition: transform 0.2s ease;
}
body:has(.my-home__banner) .stat-card:hover .stat-card__icon {
  transform: scale(1.1);
}
body:has(.my-home__banner) .stat-card__icon--before {
  background: var(--color-slate-50);
}
body:has(.my-home__banner) .stat-card__icon--hold {
  background: var(--color-status-warning-bg);
}
body:has(.my-home__banner) .stat-card__icon--apply {
  background: var(--color-primary-bg);
}
body:has(.my-home__banner) .stat-card__icon--judging {
  background: var(--color-point-purple-bg);
}
body:has(.my-home__banner) .stat-card__icon--approve {
  background: var(--color-status-success-bg);
}
body:has(.my-home__banner) .stat-card__icon--cert {
  background: var(--color-status-success-bg);
}
body:has(.my-home__banner) .stat-card__icon-svg {
  width: 24px;
  height: 24px;
}
body:has(.my-home__banner) .stat-card__icon-svg--hold {
  width: 24px;
  height: 24px;
}
body:has(.my-home__banner) .stat-card__icon-svg--cert {
  width: 24px;
  height: 24px;
}
body:has(.my-home__banner) .stat-card .label {
  flex: 0 0 auto;
  min-width: 0;
  /* 좁은 카드라 라벨이 두 줄이 될 수 있다 - 어절 단위로 끊어 '신청 / 전' 처럼 쪼개지지 않게 한다 */
  word-break: keep-all;
  font-size: var(--font-size-body-s);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}
body:has(.my-home__banner) .stat-card:hover .label {
  color: var(--color-text-body);
}
body:has(.my-home__banner) .stat-card .badge {
  flex: 0 0 auto;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-full);
  font-size: var(--font-size-caption-m);
  font-weight: 500;
  line-height: 1.45;
}
body:has(.my-home__banner) .stat-card .badge-blue {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
body:has(.my-home__banner) .stat-card .badge-amber {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning);
}
body:has(.my-home__banner) .stat-card .badge-green {
  background: var(--color-status-success-bg);
  color: var(--color-status-success);
}
body:has(.my-home__banner) .stat-card .num {
  display: flex;
  align-items: baseline;
  font-size: var(--font-size-32);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  color: var(--color-text-heading);
  white-space: nowrap;
}
body:has(.my-home__banner) .stat-card .num .unit {
  font-size: var(--font-size-body-l);
  font-weight: 400;
  line-height: 1.55;
}
body:has(.my-home__banner) .stat-card .sub {
  margin: var(--spacing-2xs) 0 0;
  font-size: var(--font-size-caption-s);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-tertiary);
}

/* ----- 2) 나의 경력 요약 ----- */
body:has(.my-home__banner) .my-home__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
  padding: var(--spacing-2xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
}
body:has(.my-home__banner) .my-home__summary-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-2xs);
  width: 100%;
  overflow: hidden;
}
body:has(.my-home__banner) .my-home__summary-name {
  font-size: var(--font-size-heading-h1);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
}
body:has(.my-home__banner) .my-home__summary-desc {
  margin: 0;
  font-size: var(--font-size-body-m);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
/* AI-MODIFIED: 2026-08-31 (FR-MY-001) 비교 그래프가 안내문구 바로 아래에 오고 누적 박스·직종별 표가
   그 아래로 내려가면서, 좌우 2단이 아니라 세로 스택이 됐다 */
body:has(.my-home__banner) .my-home__summary-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
}

/* AI-GENERATED: 2026-08-31 (FR-MY-001) 경력 요약 비교 그래프 2장.
   전체 비교는 막대 2개뿐이라 좁아도 되고, 직종별은 항목이 늘어나므로 1:3 으로 나눈다 */
body:has(.my-home__banner) .my-home__chart-row {
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: stretch;
  gap: var(--spacing-2xl);
  width: 100%;
}
body:has(.my-home__banner) .my-home__chart-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-width: 0;
  padding: var(--spacing-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}
/* 직종이 많으면 차트가 이 영역보다 넓어진다 - 그때만 가로 스크롤이 생긴다 */
body:has(.my-home__banner) .my-home__chart-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
body:has(.my-home__banner) .my-home__chart-title {
  font-size: var(--font-size-body-l);
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text-heading);
}
/* 차트는 스크립트가 컨테이너 폭을 재서 그린다 - 폭이 0 이면 렌더가 깨져 min-width 를 풀어 둔다 */
body:has(.my-home__banner) .my-home__chart {
  width: 100%;
  min-width: 0;
}

/* 2-1) 누적 근무기간 */
body:has(.my-home__banner) .my-home__period {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--spacing-lg);
  min-width: 0;
  background: var(--color-white);
  border-radius: var(--radius-xl);
}
body:has(.my-home__banner) .my-home__period-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-26);
  background: var(--color-brand-50);
  border-radius: var(--radius-lg);
}
body:has(.my-home__banner) .my-home__period-box .sub {
  font-size: var(--font-size-body-s);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
body:has(.my-home__banner) .my-home__period-box .period-figure {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--font-size-heading-h1);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
}
body:has(.my-home__banner) .my-home__period-box .period-figure span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
body:has(.my-home__banner) .my-home__period .table-wrap {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
body:has(.my-home__banner) .my-home__period table.grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
body:has(.my-home__banner) .my-home__period table.grid th {
  height: 48px;
  padding: 0 var(--spacing-md);
  background: var(--color-bg-subtle);
  border: 0;
  font-size: var(--font-size-body-m);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-heading);
  text-align: center;
}
/* AI-GENERATED: 2026-08-31 (FR-MY-001) 직종이 대>중>소>세 경로가 되면서 길어졌다. 누적 근무기간은
   "1년 1개월" 정도라 좁아도 되므로 남는 폭을 직종에 몰아 준다 */
body:has(.my-home__banner) .my-home__period table.grid th:last-child,
body:has(.my-home__banner) .my-home__period table.grid td:last-child {
  width: 160px;
}
body:has(.my-home__banner) .my-home__period table.grid td.jobtype-cell {
  padding-left: var(--spacing-26);
  text-align: left;
  word-break: keep-all;
}
/* 실제로 읽어야 하는 건 맨 끝 세분류다 - 상위 경로는 맥락이라 한 톤 죽인다 */
body:has(.my-home__banner) .my-home__period table.grid td .jobtype-upper {
  color: var(--color-text-tertiary);
}
body:has(.my-home__banner) .my-home__period table.grid td .jobtype-leaf {
  font-weight: 700;
  color: var(--color-text-heading);
}
body:has(.my-home__banner) .my-home__period table.grid th:first-child {
  padding-left: var(--spacing-26);
  text-align: left;
}
body:has(.my-home__banner) .my-home__period table.grid td {
  height: 52px;
  padding: 0 var(--spacing-md);
  background: var(--color-white);
  border: 0;
  border-bottom: 1px solid var(--color-border-divider);
  font-size: var(--font-size-body-m);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  text-align: center;
}

/* 2-2) 경력수준 비교 */
body:has(.my-home__banner) .my-home__level {
  display: flex;
  flex: 0 0 380px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xl);
  width: 380px;
  margin: 0;
  padding: var(--spacing-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
body:has(.my-home__banner) .my-home__level-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6);
  width: 100%;
}
body:has(.my-home__banner) .my-home__level-name {
  font-size: var(--font-size-body-l);
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text-heading);
  white-space: nowrap;
}
body:has(.my-home__banner) .my-home__level-desc {
  margin: 0;
  font-size: var(--font-size-caption-m);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
body:has(.my-home__banner) .my-home__progress {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}
body:has(.my-home__banner) .my-home__progress .level-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  white-space: nowrap;
}
body:has(.my-home__banner) .my-home__progress .level-row span {
  font-size: var(--font-size-caption-s);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-secondary);
}
body:has(.my-home__banner) .my-home__progress .level-row b {
  font-size: var(--font-size-caption-m);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-primary);
}
body:has(.my-home__banner) .my-home__progress .level-bar {
  width: 100%;
  height: 16px;
  margin: 0;
  background: var(--color-bg-subtle);
  border-radius: 100px;
  overflow: hidden;
}
body:has(.my-home__banner) .my-home__progress .level-bar .fill {
  width: 72.3%;
  height: 100%;
  background: var(--color-primary);
  border-radius: 0;
  animation: my-home-level-bar-fill-in 1s ease-out;
}
/* 페이지 진입 시 0에서 현재 값까지 채워지는 연출 */
@keyframes my-home-level-bar-fill-in {
  0% {
    width: 0;
  }
}
body:has(.my-home__banner) .my-home__insight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-lg);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}
body:has(.my-home__banner) .my-home__insight-label {
  font-size: var(--font-size-caption-m);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
body:has(.my-home__banner) .my-home__insight-text {
  margin: 0;
  font-size: var(--font-size-body-m);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
}

/* ----- 3) 하단 - 연도별 근무일수/기간 확인 ----- */
body:has(.my-home__banner) .my-home__bottom {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
}
body:has(.my-home__banner) .my-home__panel {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  min-width: 0;
  padding: var(--spacing-2xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
}
body:has(.my-home__banner) .my-home__panel .card-head {
  display: block;
  width: 100%;
  margin: 0;
}
body:has(.my-home__banner) .my-home__panel .card-head h3 {
  margin: 0;
  font-size: var(--font-size-heading-h1);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
}
body:has(.my-home__banner) .my-home__panel .filterbar {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
body:has(.my-home__banner) .my-home__panel .filterbar .form-row {
  flex: 1 0 0;
  min-width: 40px;
  margin: 0;
}
body:has(.my-home__banner) .my-home__panel .filterbar .form-row label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body:has(.my-home__banner) .my-home__panel .filterbar select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 44px 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 16px center / 20px 20px;
  font-family: "Pretendard", sans-serif;
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-tertiary);
  cursor: pointer;
}
body:has(.my-home__banner) .my-home__panel .filterbar select:hover {
  border-color: var(--color-primary);
}
body:has(.my-home__banner) .my-home__panel .filterbar select:focus {
  outline: none;
  border-color: var(--color-primary);
  color: var(--color-text-heading);
}
body:has(.my-home__banner) .my-home__panel .filterbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  height: 44px;
  padding: 0 var(--spacing-lg);
  background: var(--color-primary);
  border: 0;
  border-radius: 4px;
  font-size: var(--font-size-body-s);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-inverse);
  white-space: nowrap;
}
body:has(.my-home__banner) .my-home__panel .table-wrap {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
body:has(.my-home__banner) .my-home__panel table.grid {
  width: 100%;
  border-collapse: collapse;
}
body:has(.my-home__banner) .my-home__panel table.grid th {
  height: 48px;
  padding: 0 var(--spacing-md);
  background: var(--color-bg-subtle);
  border: 0;
  font-size: var(--font-size-body-m);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-heading);
  text-align: center;
}
body:has(.my-home__banner) .my-home__panel table.grid td {
  height: 52px;
  padding: 0 var(--spacing-md);
  background: var(--color-white);
  border: 0;
  border-bottom: 1px solid var(--color-border-divider);
  font-size: var(--font-size-body-m);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  text-align: center;
}
body:has(.my-home__banner) .my-home__panel table.grid th:first-child,
body:has(.my-home__banner) .my-home__panel table.grid td:first-child {
  width: 120px;
}

/* ----- 태블릿(max-width: 1295px) ----- */
@media (max-width: 1295px) {
  body:has(.my-home__banner) .my-home__banner-head {
    flex-direction: column;
    align-items: flex-start;
  }
  body:has(.my-home__banner) .my-home__banner .grid-3 {
    flex-direction: column;
  }
  body:has(.my-home__banner) .my-home__summary-body {
    flex-direction: column;
  }
  /* AI-GENERATED: 2026-08-31 (FR-MY-001) 좁은 폭에서는 그래프 2장을 위아래로 쌓는다 */
  body:has(.my-home__banner) .my-home__chart-row {
    grid-template-columns: 1fr;
  }
  body:has(.my-home__banner) .my-home__level {
    flex: 1 1 auto;
    width: 100%;
  }
  body:has(.my-home__banner) .my-home__bottom {
    flex-direction: column;
  }
}

/* ----- 모바일 표 뷰 해제(max-width: 900px) -----
   mockup.css 상단의 공통 규칙이 900px 이하에서 table.grid 를 카드형으로 바꾸지만,
   이 화면(Figma 2639:11941)은 모바일에서도 실제 표 형태를 그대로 유지한다. */
@media (max-width: 900px) {
  body:has(.my-home__banner) .my-home__period table.grid,
  body:has(.my-home__banner) .my-home__panel table.grid {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  body:has(.my-home__banner) .my-home__period table.grid thead,
  body:has(.my-home__banner) .my-home__panel table.grid thead {
    display: table-header-group;
  }
  body:has(.my-home__banner) .my-home__period table.grid tbody,
  body:has(.my-home__banner) .my-home__panel table.grid tbody {
    display: table-row-group;
  }
  body:has(.my-home__banner) .my-home__period table.grid tr,
  body:has(.my-home__banner) .my-home__panel table.grid tr {
    display: table-row;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  body:has(.my-home__banner) .my-home__period table.grid th,
  body:has(.my-home__banner) .my-home__panel table.grid th,
  body:has(.my-home__banner) .my-home__period table.grid td,
  body:has(.my-home__banner) .my-home__panel table.grid td {
    display: table-cell;
    width: auto !important;
    text-align: center;
  }
  body:has(.my-home__banner) .my-home__period table.grid td::before,
  body:has(.my-home__banner) .my-home__panel table.grid td::before {
    content: none;
  }
  body:has(.my-home__banner) .my-home__period table.grid td > .cell-content,
  body:has(.my-home__banner) .my-home__panel table.grid td > .cell-content {
    display: inline;
    text-align: center;
  }
}

/* ----- 모바일(max-width: 744px) · Figma 2639:11941 ----- */
@media (max-width: 744px) {
  body:has(.my-home__banner) main {
    gap: var(--spacing-md);
  }

  /* 1) 상단 배너 */
  body:has(.my-home__banner) .my-home__banner {
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
  }
  body:has(.my-home__banner) .my-home__banner-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  body:has(.my-home__banner) .my-home__banner-title {
    flex: 0 0 auto;
    gap: var(--spacing-6);
    width: 100%;
    white-space: normal;
  }
  body:has(.my-home__banner) .my-home__banner-name {
    font-size: var(--font-size-heading-h3);
  }
  body:has(.my-home__banner) .my-home__banner-desc {
    font-size: var(--font-size-caption-m);
    line-height: 1.45;
  }
  body:has(.my-home__banner) .my-home__banner-head .btn-row {
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    width: 100%;
  }
  body:has(.my-home__banner) .my-home__banner-head .btn {
    flex: 1 0 0;
    min-width: 0;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-body-m);
  }
  body:has(.my-home__banner) .my-home__banner-head .btn-primary {
    flex: 1 0 100%;
  }

  /* KPI 카드 3개 - 세로 스택 + 카드 안은 1행 배치 */
  body:has(.my-home__banner) .my-home__banner .grid-3 {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  body:has(.my-home__banner) .stat-card {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    column-gap: var(--spacing-sm);
    row-gap: var(--spacing-3xs);
    align-items: center;
    width: 100%;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
  }
  body:has(.my-home__banner) .stat-card .top {
    display: contents;
  }
  body:has(.my-home__banner) .stat-card__icon {
    grid-area: 1 / 1 / 3 / 2;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
  }
  body:has(.my-home__banner) .stat-card__icon-svg--career {
    width: 18px;
    height: 19.81px;
  }
  body:has(.my-home__banner) .stat-card__icon-svg--hold {
    width: 20px;
    height: 20px;
  }
  body:has(.my-home__banner) .stat-card__icon-svg--cert {
    width: 20px;
    height: 20px;
  }
  body:has(.my-home__banner) .stat-card .label {
    grid-area: 1 / 2 / 2 / 3;
    font-size: var(--font-size-caption-m);
    line-height: 1.45;
  }
  body:has(.my-home__banner) .stat-card .badge {
    grid-area: 1 / 3 / 3 / 4;
    align-self: center;
    padding: var(--spacing-3xs) var(--spacing-6);
    font-size: var(--font-size-caption-m);
  }
  body:has(.my-home__banner) .stat-card .num {
    grid-area: 2 / 2 / 3 / 3;
    font-size: var(--font-size-22);
    line-height: 1.4;
  }
  body:has(.my-home__banner) .stat-card .num .unit {
    font-size: var(--font-size-body-m);
    line-height: 1.5;
  }
  body:has(.my-home__banner) .stat-card .sub {
    display: none;
  }

  /* 2) 나의 경력 요약 */
  body:has(.my-home__banner) .my-home__summary {
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
  }
  body:has(.my-home__banner) .my-home__summary-title {
    gap: var(--spacing-3xs);
  }
  body:has(.my-home__banner) .my-home__summary-name {
    font-size: var(--font-size-heading-h2);
  }
  body:has(.my-home__banner) .my-home__summary-desc {
    font-size: var(--font-size-caption-m);
    line-height: 1.45;
  }
  body:has(.my-home__banner) .my-home__summary-body {
    gap: var(--spacing-sm);
  }
  body:has(.my-home__banner) .my-home__period {
    gap: var(--spacing-sm);
  }
  body:has(.my-home__banner) .my-home__period-box {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
  }
  body:has(.my-home__banner) .my-home__period-box .sub {
    flex: 1 0 0;
    min-width: 0;
    font-size: var(--font-size-caption-m);
    line-height: 1.45;
  }
  body:has(.my-home__banner) .my-home__period-box .period-figure {
    font-size: var(--font-size-body-l);
    line-height: 1.55;
  }

  /* 2-2) 경력수준 비교 */
  body:has(.my-home__banner) .my-home__level {
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
  }
  body:has(.my-home__banner) .my-home__level-head {
    gap: var(--spacing-3xs);
  }
  body:has(.my-home__banner) .my-home__level-name {
    font-size: var(--font-size-body-s);
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;
  }
  body:has(.my-home__banner) .my-home__level-desc {
    font-size: var(--font-size-caption-s);
    font-weight: 400;
    line-height: 1.4;
  }
  body:has(.my-home__banner) .my-home__progress {
    gap: var(--spacing-6);
  }
  body:has(.my-home__banner) .my-home__progress .level-bar {
    height: 12px;
  }
  body:has(.my-home__banner) .my-home__insight {
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
  }
  body:has(.my-home__banner) .my-home__insight-text {
    font-size: var(--font-size-caption-m);
    font-weight: 500;
    line-height: 1.45;
  }

  /* 3) 하단 - 연도별 근무일수/기간 확인 */
  body:has(.my-home__banner) .my-home__panel {
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
  }
  body:has(.my-home__banner) .my-home__panel .card-head h3 {
    font-size: var(--font-size-heading-h2);
  }
  body:has(.my-home__banner) .my-home__panel .filterbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-xs);
  }
  body:has(.my-home__banner) .my-home__panel .filterbar .form-row {
    width: auto;
    max-width: none;
  }
  body:has(.my-home__banner) .my-home__panel .filterbar select {
    border-radius: var(--radius-sm);
  }
  body:has(.my-home__banner) .my-home__panel .filterbar .btn {
    flex: 0 0 auto;
    width: auto;
    border-radius: var(--radius-xs);
  }

  /* 표 - 모바일 높이/글자 크기 */
  body:has(.my-home__banner) .my-home__period table.grid th,
  body:has(.my-home__banner) .my-home__panel table.grid th {
    height: 38px;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-caption-m);
    font-weight: 500;
    line-height: 1.45;
  }
  body:has(.my-home__banner) .my-home__period table.grid td,
  body:has(.my-home__banner) .my-home__panel table.grid td {
    height: 44px;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-body-m);
    line-height: 1.5;
  }
}

/* ===== FR-CR-004 외부연동 동의 상세 (마이데이터/건강보험/국세청) ===== */
.content-area:has(.consent-detail, .consent-pool) .page-head {
  padding: var(--spacing-lg) 0 var(--spacing-xl);
  border-bottom: 1px solid var(--color-border-default);
}
.content-area:has(.consent-detail, .consent-pool) .title-row {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: var(--spacing-sm);
}
.content-area:has(.consent-detail, .consent-pool) .title-row h1 {
  font-size: var(--font-size-22);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
}
.content-area:has(.consent-detail, .consent-pool) .title-row .badge {
  padding: var(--spacing-2xs) var(--spacing-xs);
  font-size: var(--font-size-13);
  font-weight: 400;
  line-height: 1.4;
}
.content-area:has(.consent-detail, .consent-pool) .page-head .page-desc {
  margin: var(--spacing-md) 0 0;
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-tertiary);
}
.consent-detail .card {
  background: var(--color-bg-subtle);
  border: 0;
  box-shadow: none;
  border-radius: var(--radius-xl);
  padding: var(--spacing-sm) var(--spacing-2xl) var(--spacing-2xl);
}
.consent-detail .card h3 {
  margin: 0;
  padding: var(--spacing-lg) 0 var(--spacing-md);
  font-size: var(--font-size-20);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-heading);
}
.consent-detail .card table {
  width: 100%;
  margin: var(--spacing-md) 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: 1.5;
}
.consent-detail .card table td {
  padding: 0 0 var(--spacing-xs);
  vertical-align: top;
  color: var(--color-text-body);
}
.consent-detail .card table tr:last-child td {
  padding-bottom: 0;
}
.consent-detail .card table td:first-child {
  width: 120px;
  padding-right: var(--spacing-md);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.consent-detail .card .radio-row {
  margin: 0;
  gap: var(--spacing-xl);
  min-height: 44px;
}
.consent-detail .btn-row {
  margin-top: 0;
  padding-top: var(--spacing-xl);
  gap: var(--spacing-xs);
}
.consent-detail .btn-row .btn {
  border-radius: var(--radius-xs);
}
@media (max-width: 744px) {
  .consent-detail .card {
    padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-lg);
  }
  .consent-detail .card table {
    font-size: var(--font-size-14);
  }
  .consent-detail .card table td:first-child {
    width: 90px;
    padding-right: var(--spacing-sm);
  }
}

/* ===== FR-CR-004 외부연동 동의 상세 (인재POOL) =====
   상세 카드 안에 목록형 표(table.grid)와 탭이 들어가므로
   .consent-detail 의 정의형 표 규칙과 분리해서 별도 클래스로 둔다. */
.consent-pool > .page-desc {
  margin: var(--spacing-lg) 0 var(--spacing-lg);
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}
.consent-pool .card h3 {
  margin: 0;
  padding: 0 0 var(--spacing-xs);
  font-size: var(--font-size-20);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-heading);
}
.consent-pool__note {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-13);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-tertiary);
}
.consent-pool .tab-panel .filterbar {
  margin-bottom: 0;
}
.consent-pool .btn-row {
  margin-top: 0;
  padding-top: var(--spacing-xl);
  gap: var(--spacing-xs);
}
.consent-pool .btn-row .btn {
  border-radius: var(--radius-xs);
}

/* ----- FR-CR-004 인재POOL · Figma 2793:11299 ----- */
/* Table-Mobile(node 2439:19328) 스펙, career-list__grid와 같은 선택형 테이블 계열.
   consent-pool__career-grid만 career-list__grid처럼 업무내용 단독 행(divider)이 있고,
   cert/edu/award 3개는 업무내용류 필드가 없어 라벨:값 행만. 제목은 전부 링크가 아닌 일반 텍스트라
   text/link 대신 text/heading 색상 사용 */
table.grid.consent-pool__career-grid tr:hover td,
table.grid.consent-pool__cert-grid tr:hover td,
table.grid.consent-pool__edu-grid tr:hover td,
table.grid.consent-pool__award-grid tr:hover td {
  background: var(--color-gray-75);
}
@media (max-width: 900px) {
  table.grid.consent-pool__career-grid tr:hover,
  table.grid.consent-pool__career-grid tr:hover td,
  table.grid.consent-pool__cert-grid tr:hover,
  table.grid.consent-pool__cert-grid tr:hover td,
  table.grid.consent-pool__edu-grid tr:hover,
  table.grid.consent-pool__edu-grid tr:hover td,
  table.grid.consent-pool__award-grid tr:hover,
  table.grid.consent-pool__award-grid tr:hover td {
    background: transparent;
  }
  table.grid.consent-pool__career-grid tr,
  table.grid.consent-pool__cert-grid tr,
  table.grid.consent-pool__edu-grid tr,
  table.grid.consent-pool__award-grid tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  /* .consent-pool table.grid td{height:52px}(desktop, 라인 10512)가 특이도가 같아
     선언 순서상 뒤에 있으면 이 auto를 이겨버림 - .consent-pool을 앞에 붙여 특이도를 높임 */
  .consent-pool table.grid.consent-pool__career-grid td,
  .consent-pool table.grid.consent-pool__cert-grid td,
  .consent-pool table.grid.consent-pool__edu-grid td,
  .consent-pool table.grid.consent-pool__award-grid td {
    height: auto;
  }
  /* 기존 레거시 규칙 `.consent-pool table.grid tbody tr:last-child td { border-bottom: 1px solid ... }`
     (구 목록형 모바일 스타일 전제)가 특이도가 더 높아서, 마지막 카드에서만 체크박스/제목/배지/라벨:값 행에
     불필요한 구분선이 다시 생겨 카드가 깨져 보였다 - 마지막 카드도 다른 카드와 동일하게 border-bottom 없앰 */
  .consent-pool table.grid.consent-pool__career-grid tbody tr:last-child td,
  .consent-pool table.grid.consent-pool__cert-grid tbody tr:last-child td,
  .consent-pool table.grid.consent-pool__edu-grid tbody tr:last-child td,
  .consent-pool table.grid.consent-pool__award-grid tbody tr:last-child td {
    border-bottom: none;
  }
  /* 단, consent-pool__career-grid의 업무내용 divider는 마지막 카드에서도 그대로 유지 */
  .consent-pool table.grid.consent-pool__career-grid tbody tr:last-child td:nth-child(4) {
    border-bottom: 1px solid var(--color-border-light);
  }
  /* No.는 모바일 카드에서 생략, 체크박스는 유지 */
  table.grid.consent-pool__career-grid td:nth-child(2),
  table.grid.consent-pool__cert-grid td:nth-child(2),
  table.grid.consent-pool__edu-grid td:nth-child(2),
  table.grid.consent-pool__award-grid td:nth-child(2) {
    display: none;
  }
  table.grid.consent-pool__career-grid td:nth-child(1),
  table.grid.consent-pool__cert-grid td:nth-child(1),
  table.grid.consent-pool__edu-grid td:nth-child(1),
  table.grid.consent-pool__award-grid td:nth-child(1) {
    order: -3;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
  }
  table.grid.consent-pool__career-grid td:nth-child(1)::before,
  table.grid.consent-pool__cert-grid td:nth-child(1)::before,
  table.grid.consent-pool__edu-grid td:nth-child(1)::before,
  table.grid.consent-pool__award-grid td:nth-child(1)::before {
    content: none;
  }
  /* 제목(계약처명/자격증명/학교명/명칭) - 링크가 아니라 text/heading 색상 */
  table.grid.consent-pool__career-grid td:nth-child(3),
  table.grid.consent-pool__cert-grid td:nth-child(3),
  table.grid.consent-pool__edu-grid td:nth-child(3),
  table.grid.consent-pool__award-grid td:nth-child(4) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
    font-size: var(--font-size-heading-h3);
    font-weight: 700;
    color: var(--color-text-heading);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.consent-pool__career-grid td:nth-child(3)::before,
  table.grid.consent-pool__cert-grid td:nth-child(3)::before,
  table.grid.consent-pool__edu-grid td:nth-child(3)::before,
  table.grid.consent-pool__award-grid td:nth-child(4)::before {
    content: none;
  }
  table.grid.consent-pool__career-grid td:nth-child(3) > .cell-content,
  table.grid.consent-pool__cert-grid td:nth-child(3) > .cell-content,
  table.grid.consent-pool__edu-grid td:nth-child(3) > .cell-content,
  table.grid.consent-pool__award-grid td:nth-child(4) > .cell-content {
    display: block;
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 공개여부 배지: 제목 오른쪽 */
  table.grid.consent-pool__career-grid td:nth-child(7),
  table.grid.consent-pool__cert-grid td:nth-child(6),
  table.grid.consent-pool__edu-grid td:nth-child(7),
  table.grid.consent-pool__award-grid td:nth-child(7) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) 0 var(--spacing-sm);
  }
  table.grid.consent-pool__career-grid td:nth-child(7)::before,
  table.grid.consent-pool__cert-grid td:nth-child(6)::before,
  table.grid.consent-pool__edu-grid td:nth-child(7)::before,
  table.grid.consent-pool__award-grid td:nth-child(7)::before {
    content: none;
  }
  /* consent-pool__career-grid만: 업무내용 - 라벨 없이 단독 행 + 하단 divider (career-list__grid와 동일) */
  table.grid.consent-pool__career-grid td:nth-child(4) {
    order: 0;
    width: 100% !important;
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-body-m);
    color: var(--color-text-body);
  }
  table.grid.consent-pool__career-grid td:nth-child(4)::before {
    content: none;
  }
  table.grid.consent-pool__career-grid td:nth-child(4) > .cell-content {
    display: block;
    text-align: left;
  }
  /* 나머지 라벨:값 행 (구분선 없이, 8px 간격) */
  table.grid.consent-pool__career-grid td:nth-child(5),
  table.grid.consent-pool__career-grid td:nth-child(6),
  table.grid.consent-pool__cert-grid td:nth-child(4),
  table.grid.consent-pool__cert-grid td:nth-child(5),
  table.grid.consent-pool__edu-grid td:nth-child(4),
  table.grid.consent-pool__edu-grid td:nth-child(5),
  table.grid.consent-pool__edu-grid td:nth-child(6),
  table.grid.consent-pool__award-grid td:nth-child(3),
  table.grid.consent-pool__award-grid td:nth-child(5),
  table.grid.consent-pool__award-grid td:nth-child(6) {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-body-m);
  }
  table.grid.consent-pool__career-grid td:nth-child(5) {
    order: 3;
    padding-top: var(--spacing-sm);
  }
  table.grid.consent-pool__career-grid td:nth-child(6) {
    order: 4;
    margin-top: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
  }
  table.grid.consent-pool__cert-grid td:nth-child(4) {
    order: 1;
    padding-top: var(--spacing-sm);
  }
  table.grid.consent-pool__cert-grid td:nth-child(5) {
    order: 2;
    margin-top: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
  }
  table.grid.consent-pool__edu-grid td:nth-child(4) {
    order: 1;
    padding-top: var(--spacing-sm);
  }
  table.grid.consent-pool__edu-grid td:nth-child(5) {
    order: 2;
    margin-top: var(--spacing-xs);
  }
  table.grid.consent-pool__edu-grid td:nth-child(6) {
    order: 3;
    margin-top: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
  }
  table.grid.consent-pool__award-grid td:nth-child(3) {
    order: 1;
    padding-top: var(--spacing-sm);
  }
  table.grid.consent-pool__award-grid td:nth-child(5) {
    order: 2;
    margin-top: var(--spacing-xs);
  }
  table.grid.consent-pool__award-grid td:nth-child(6) {
    order: 3;
    margin-top: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
  }
}
/* 상태변경일 라벨 + 값 */
.content-area:has(.consent-pool) .page-head .page-desc {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
/* 카드 - 회색 배경 + 20px 라운드 */
.consent-pool .card {
  padding: var(--spacing-sm) var(--spacing-2xl) var(--spacing-2xl);
  background: var(--color-bg-card);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: none;
}
.consent-pool .card h3 {
  padding: var(--spacing-lg) 0 var(--spacing-md);
}
/* 툴바(선택 건수 + 공개여부 셀렉트 + 적용) */
.consent-pool .filterbar {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: 0;
  padding: var(--spacing-md) var(--spacing-xs);
  background: none;
  border: 0;
  border-radius: 0;
}
.consent-pool .filterbar__select-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
/* 공개여부 셀렉트(.form-row)와 적용 버튼 사이만 4px로 - filterbar의 공용 gap(--spacing-sm, 12px)이
   모든 자식 사이에 균일 적용되므로, 적용 버튼에 음수 margin-left로 그 사이만 좁힘 */
.consent-pool .filterbar > .btn {
  margin-left: calc(var(--spacing-2xs) - var(--spacing-sm));
}
.consent-pool .filterbar__select-info label {
  font-size: var(--font-size-15);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.consent-pool .filterbar__count {
  font-weight: 600;
  color: var(--color-primary);
}
.consent-pool .filterbar .form-row {
  flex: 0 0 auto;
  margin-left: auto;
}
.consent-pool .filterbar .form-row select {
  width: fit-content;
  min-width: 40px;
  height: 36px;
  padding: 0 40px 0 var(--spacing-sm);
  border-color: var(--color-border);
  border-radius: var(--radius-xs);
  background-position: right var(--spacing-sm) center;
  font-size: var(--font-size-15);
  line-height: 1.5;
}
.consent-pool .filterbar .btn.btn-sm {
  align-self: center;
  height: 36px;
  padding: 0 var(--spacing-sm);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: 1.45;
}
/* 표 - 흰 배경 + 8px 라운드 테두리 */
.consent-pool .table-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-border-table);
  border-radius: var(--radius-sm);
}
.consent-pool table.grid th {
  height: 48px;
  padding: 0 var(--spacing-sm);
  background: var(--color-primary-bg);
  border-bottom: 0;
  color: var(--color-coolgray-800);
  font-size: var(--font-size-16);
  font-weight: 600;
  line-height: 1.5;
}
.consent-pool table.grid td {
  height: 52px;
  padding: 0 var(--spacing-sm);
  border-bottom: 1px solid var(--color-border-table);
  color: var(--color-text-body);
  font-size: var(--font-size-16);
  line-height: 1.5;
}
.consent-pool table.grid tbody tr:last-child td {
  border-bottom: 0;
}
.consent-pool table.grid tbody tr:hover td {
  background: var(--bg);
  border-bottom-color: var(--color-border);
}
/* 체크된 행에는 배경색을 넣지 않는다 (공통 규칙 해제) */
.consent-pool table.grid tbody tr:has(input[type="checkbox"]:checked) td {
  background: none;
}
.consent-pool table.grid tbody tr:has(input[type="checkbox"]:checked):hover td {
  background: var(--bg);
}
.consent-pool .grid__sort-icon {
  width: 8px;
  height: 5px;
  margin-left: var(--spacing-2xs);
  vertical-align: middle;
  color: var(--color-coolgray-800);
}
/* 보수액 컬럼 우측 정렬 */
.consent-pool__career-grid th:nth-child(6),
.consent-pool__career-grid td:nth-child(6) {
  text-align: right;
}
.consent-pool__career-grid td:nth-child(6) {
  color: var(--color-text-heading);
}
/* 공개여부 배지 */
.consent-pool .badge {
  font-weight: 500;
}
.consent-pool .badge-gray {
  background: var(--color-slate-50);
  color: var(--color-slate-500);
}
.consent-pool .badge-green {
  background: var(--color-status-success-bg);
  color: var(--color-status-success);
}
@media (max-width: 744px) {
  .consent-pool > .page-desc {
    margin: var(--spacing-md) 0 var(--spacing-md);
    font-size: var(--font-size-14);
  }
  .consent-pool .card {
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md);
    border-radius: var(--radius-lg);
  }
  .consent-pool .card h3 {
    padding: var(--spacing-md) 0 var(--spacing-sm);
    font-size: var(--font-size-16);
  }
  /* .filterbar 공통 모바일 규칙(flex-direction:column)을 되돌려서 체크박스(선택)부터
     공개여부 셀렉트, 적용 버튼까지 한 줄에 나란히 배치되게 한다 */
  .consent-pool .filterbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-xs);
  }
  .consent-pool .filterbar__select-info {
    flex: none;
    white-space: nowrap;
  }
  .consent-pool .filterbar .form-row {
    width: auto;
    max-width: none;
    min-width: 0;
    margin-left: auto;
  }
  /* 공통 모바일 규칙 `.filterbar .btn.btn-sm{width:100%}`를 되돌려 적용 버튼도 hug */
  .consent-pool .filterbar .btn.btn-sm {
    width: auto;
  }
  /* 셀렉트-적용 버튼 사이 음수 마진(10853행, 데스크톱 gap 12px 기준 -8px로 4px를 만들던 값)이
     이 모바일 gap(8px)과 만나면 0px가 돼 버튼이 셀렉트에 딱 붙었다 - 여기 gap(8px) 기준으로
     같은 4px가 나오도록 마진을 다시 계산 */
  .consent-pool .filterbar > .btn {
    margin-left: calc(var(--spacing-2xs) - var(--spacing-xs));
  }
}
/* 모바일 카드뷰(max-width:900px) - 표 테두리/구분선 정리 */
@media (max-width: 900px) {
  .consent-pool .table-wrap {
    background: none;
    border: 0;
    border-radius: 0;
  }
  .consent-pool table.grid td:last-child,
  .consent-pool table.grid tr:has(td:last-child:empty) td:nth-last-child(2) {
    border-bottom: 0;
  }
  .consent-pool table.grid tbody tr:last-child {
    margin-bottom: 0;
  }
  .consent-pool table.grid tbody tr:has(input[type="checkbox"]:checked) {
    background: var(--color-white);
  }
  .consent-pool table.grid tbody tr:hover,
  .consent-pool table.grid tbody tr:has(input[type="checkbox"]:checked):hover {
    background: var(--bg);
  }
  .consent-pool table.grid tbody tr:last-child td {
    border-bottom: 1px solid var(--color-border-table);
  }
  .consent-pool table.grid tbody tr:last-child td:last-child,
  .consent-pool
    table.grid
    tbody
    tr:last-child:has(td:last-child:empty)
    td:nth-last-child(2) {
    border-bottom: 0;
  }
}

/* ==========================================================================
   FR-AUTH-002 3단계 기본정보입력 — Figma 2374:1846 (step-card) 정밀 반영
   ========================================================================== */

/* 성공 hint 색상: Figma --color/status/success = #12af60 (기존 #12a554 교체).
   HTML의 인라인 style="color: var(--green)" 이 참조하는 커스텀 속성을 갱신한다. */
.step-card:has(.job-select) {
  --green: var(--color-status-success);
}

/* Field Message — Figma: Caption/S Regular 1.4 / --text/tertiary */
.step-card:has(.job-select) .form-hint {
  color: var(--color-text-tertiary);
}


/* 직종 선택 칩 — Figma Chip: h34 / px16 / radius full / Caption/M Medium 1.45 */
.step-card:has(.job-select) .job-select {
  gap: var(--spacing-xs);
}
.step-card:has(.job-select) .job-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption-m);
  font-weight: 500;
  line-height: var(--line-height-snug);
}
.step-card:has(.job-select) .job-chip.selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

/* 인재풀 라디오 그룹 — Figma: Radio Group gap 24 / 행 높이 44 / 라벨 Body/M #333 */
.step-card:has(.job-select) .radio-row {
  gap: var(--spacing-xl);
  min-height: 44px;
  align-items: center;
}

/* ── 모바일(max-width: 744px) 깨짐 수정 ──────────────────────────────────
   .form-grid 의 2열 해제는 기존에 max-width:480px 에만 걸려 있어(3417행),
   481~744px 구간에서 비밀번호/비밀번호 확인이 좁은 2열로 남아 깨졌다. */
@media (max-width: 744px) {
  /* grid는 컬럼(1fr)이 자식의 min-content(내부 inline-btn-row 등 안 줄어드는
     콘텐츠)에 맞춰 트랙 자체를 밀어 넓히는 문제가 있어 카드 밖으로 넘쳤다.
     .form-grid는 다른 여러 페이지(FR-CR-006/007, FR-MY-002, 모달 등)가 공유하는
     클래스라 공용 규칙은 그대로 두고, 이 페이지(.step-card:has(.job-select))
     안에서만 모바일 1열을 grid 대신 flex-column으로 바꿔 그 블로우아웃을 없앤다 */
  .step-card:has(.job-select) .form-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
  }
  .step-card:has(.job-select) .form-row {
    min-width: 0;
  }

  /* 칩이 줄바꿈될 때 세로 간격이 0이라 위아래로 붙던 문제 (기존 gap: 0 8px) */
  .step-card:has(.job-select) .job-select {
    gap: var(--spacing-xs);
  }

  /* 라디오 2개가 한 줄에 안 들어가면 줄바꿈 + 행 간격 확보 */
  .step-card:has(.job-select) .radio-row {
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-lg);
  }

  /* 인재풀 동의 표: 좌측 라벨 셀 고정폭(120px)이 좁은 화면에서 값 셀을 밀어내
     줄바꿈이 과하게 생기던 문제 — 라벨 셀 폭을 줄인다.
     (HTML 인라인 style 을 이기기 위해 !important 필요) */
  #talentpool-consent table td:first-child {
    width: 88px !important;
    padding-right: var(--spacing-xs) !important;
  }
}

/* ==========================================================================
   Form Field 공통 — Figma "Form Field"(2293:8209) / "Button/Basic"(2290:2867)
   FR-AUTH-002 아이디 중복확인, FR-AUTH-003 인증번호 발송 등
   inline-btn-row 를 쓰는 모든 곳에 동일하게 적용한다.
   (기존에는 페이지별로 따로 잡혀 있어 같은 형태인데 버튼 글자 크기가 달랐음)
   ========================================================================== */

/* 라벨 필수표시(*) — Figma: Caption/M Medium 1.45 / --status/error */
.step-card .form-row label .req,
.auth-card .form-row label .req {
  font-size: var(--font-size-caption-m);
  font-weight: 500;
  line-height: var(--line-height-snug);
}

/* field 행 — gap 8 / items-center / min-h 44 / w-full */
.inline-btn-row {
  gap: var(--spacing-xs);
  align-items: center;
  min-height: 44px;
  width: 100%;
}

/* 입력 — flex:1 0 0 / min-w 40 / --border/default */
.inline-btn-row input {
  flex: 1 0 0;
  min-width: 40px;
  border-color: var(--color-border-default);
}

/* 우측 버튼 — Figma Button/Basic
   h44 / gap8 / px20 / radius 4 / Body-S(15) SemiBold 1.5 / border+text primary
   → 전역 .btn-sm(12px · padding 6/12 · radius 8)을 이 컨텍스트에서 교체 */
.inline-btn-row .btn.btn-sm {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  height: 44px;
  padding: 0 var(--spacing-lg);
  border-radius: var(--radius-xs);
  background: #fff;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: var(--font-size-body-s);
  font-weight: 600;
  line-height: var(--line-height-base);
}

/* 모바일: 좁은 폭에서 좌우 패딩만 축소해 입력창 폭 확보 */
@media (max-width: 744px) {
  .inline-btn-row .btn.btn-sm {
    padding: 0 var(--spacing-md);
  }
  /* 아이디 입력창이 flex: 1 0 0(10969행, basis:0)이라 shrink 계수가 0을 곱해
     좁은 화면에서도 줄어들지 못하고 중복확인 버튼을 밀어내며 카드 전체가
     뷰포트 밖으로 튀어나갔음 - basis를 auto로 바꿔 모바일에서만 축소 허용 */
  .inline-btn-row input {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   ===== 퍼블 최종본(2026-08-26) 머지 — 구 마크업 호환분 =====
   inc/web1/css/mockup.css 를 NAS 최종 납품본으로 통째 교체했다. 최종본은 최종 HTML
   (html/web1/*.html)의 새 마크업을 전제로 하는데, 운영 JSP(WEB-INF/view/**)는 아직
   옛 마크업이라 그대로 얹으면 인증·목록 화면이 깨진다. 아래는 "옛 마크업일 때만"
   걸리도록 조건을 붙인 호환 규칙이라 최종 HTML 쪽에는 영향이 없다.
   ========================================================================== */

/* --- page-head 아래 여백 -----------------------------------------------
   최종본은 `.content-area .page-head + main { padding-top }` 으로 간격을 낸다.
   JSP 29개 중에는 page-head 다음이 <main> 이 아닌 화면이 있어(form > main / 래퍼 없이
   컴포넌트 바로) 그 경우 간격이 통째로 사라진다. 다음 형제가 main 이 아닐 때만
   예전처럼 page-head 자신이 아래 여백을 낸다. */
.content-area .page-head:not(:has(+ main)) {
  margin-bottom: var(--spacing-2xl);
}
/* qna 목록은 구분선을 content-area::after 가 그리므로 page-head 에 여백이 붙으면
   선이 제목에서 떨어진다 - 위 규칙을 이 화면에서만 되돌린다 */
.content-area:has(.qna-list__grid) .page-head:not(:has(+ main)) {
  margin-bottom: 0;
}
@media (max-width: 744px) {
  .content-area .page-head:not(:has(+ main)) {
    margin-bottom: var(--spacing-md);
  }
}

/* --- FR-AUTH-003 비밀번호 찾기: .auth-form-actions 가 .auth-card 안인 구 마크업 ---
   최종 HTML 은 `<div id="stepN"><div class="auth-card">…</div><div class="auth-form-actions">`
   형제 구조지만, findPassword.jsp 는 id 가 .auth-card 자신에 붙고 .auth-form-actions 가
   카드 안에 들어 있다. 최종본의 형제 선택자(`+ .auth-form-actions`)는 그 구조를 못 잡으므로
   예전 음수 마진 방식을 되살린다. 후손 선택자라 새 마크업에는 애초에 매칭되지 않는다. */
.auth-card:has(.step-head):has(.auth-form-actions) {
  padding-bottom: 0;
}
.auth-card:has(.step-head) .auth-form-actions {
  margin-top: 0;
  margin-left: -50px;
  margin-right: -50px;
  padding: 32px 50px 40px;
  border-radius: 0 0 16px 16px;
}
/* 취소 버튼 복원: 전역 display:none(FR-AUTH-001용) 오버라이드
   + Figma 배치 순서 보정 (HTML: primary→ghost / Figma: ghost←left, primary→right) */
.auth-card:has(.step-head) .auth-form-actions .btn-ghost {
  display: flex;
  order: -1;
}
/* 모바일: 위 음수 마진(-50px)은 데스크톱 auth-card 좌우 패딩 50px 기준이라
   모바일 패딩 20px 그대로면 카드 밖으로 30px씩 삐져나와 가로 스크롤이 생긴다 */
@media (max-width: 744px) {
  .auth-card:has(.step-head) .auth-form-actions {
    margin-left: calc(var(--spacing-lg) * -1);
    margin-right: calc(var(--spacing-lg) * -1);
    padding: var(--spacing-2xl) var(--spacing-lg) 40px;
  }
}
/* 최종본의 `:where(#step1, #step2){display:flex;flex-direction:column;align-items:center}`
   는 stepN 이 카드를 감싸는 래퍼라는 전제인데, 구 마크업은 그 id 가 .auth-card 자신에
   붙어 있어 카드가 통째로 가운데 정렬 flex 가 돼 폼이 찌그러진다. 카드에 붙은 경우만 되돌린다. */
.auth-card:where(#step1, #step2) {
  display: block;
}

/* --- FR-COM-011 멘토 상세: 구 제목 클래스 ------------------------------
   최종본은 .mentor-detail__section-header/__section-title 로 갈아탔지만
   mentoringList.jsp 는 아직 .mentor-detail__title 을 쓴다. 새 HTML 에는 없는
   클래스라 남겨 둬도 충돌하지 않는다. */
/* ---------- FR-COM-011 멘토 상세: 섹션 제목 / 정보 카드 / 페이지네이션 행 ---------- */
.mentor-detail__title {
  margin: 22px 0 10px;
  font-size: var(--font-size-15);
  color: var(--navy-900);
}

/* --- 서브페이지 하단 안내 문구 ------------------------------------------
   footer.foot 은 JSP 9개에서만 쓰고 최종 HTML 에는 없다(마케팅 사이트용 .footer(BEM)
   와는 별개 요소). 앞선 공통 정의의 좌우/아래 패딩을 JSP 레이아웃에 맞춰 되돌린다. */
footer.foot {
  padding: 20px 0 0;
  font-size: 11.5px;
  color: var(--text-400);
  text-align: center;
}

/* AI-GENERATED: 2026-08-25 (cert v1.6 Phase 28) 진위확인 '확인중' 상태 변형.
   퍼블 시안이 success(무접미)/error 두 벌만 내서 PENDING 자리가 없었다. 이 리포 관례대로
   없는 컴포넌트는 퍼블 CSS 에 직접 더한다 - JSP 인라인 style 로 베끼면 디자인 소유권이 갈린다.
   색은 기존 상태 토큰(--color-status-warning)을 그대로 쓴다: 확인중은 오류가 아니라 보류다. */
.cert-verify__panel--pending {
  border-color: var(--color-status-warning);
}
.cert-verify__banner--pending {
  background: var(--color-status-warning-bg);
}
.cert-verify__banner-title--pending,
.cert-verify__banner-desc--pending,
.cert-verify__info-value--pending {
  color: var(--color-status-warning);
}

/* ===== 머지 복원분 (2026-08-25) =====
   퍼블(ineastui)이 메인 개편 커밋에서 mockup.css 를 로컬 원본으로 통째 교체하면서
   개발 쪽이 이 파일에 직접 더해 온 컴포넌트들이 통째로 빠졌다. 아래는 머지 직전
   커밋(f5563962)에서 그대로 되살린 것 - 새 시안에 대응 규칙이 없고 JSP 가 실제로 쓰는 것만 골랐다.
   .footer__* 계열은 design.css 로 이관된 것이 확인되어 복원 대상에서 제외했다. */

/* kwmf-mockup.css의 .app{max-width:1320px;margin:0 auto}를 무력화한다 — 운영 데코레이터는
   toast/popup 때문에 kwmf-mockup.css를 계속 같이 로드하는데, mockup.css엔 .app 자체를
   재정의하는 규칙이 없어서 그 1320px 제약이 그대로 남아있었다(2026-08-20). topbar/gnb는
   화면 폭과 무관하게 로고가 항상 좌측 고정 위치(padding 40px)에 있어야 해서 .app 자체엔
   폭 제약을 두지 않는다 — .app을 1440px로 가운데 정렬해봤지만 그러면 화면이 넓을수록
   로고가 화면 폭에 따라 오른쪽으로 같이 밀려서 요구사항과 어긋났다(같은 날 재수정).
   .body-with-sidebar는 이미 자체적으로 max-width:1440px/margin:0 auto를 갖고 있어서
   본문·사이드바만 가운데 정렬되고, topbar/gnb는 그 위에서 풀블리드로 펼쳐진다 — 이건
   상단바가 화면 끝까지 펼쳐지고 본문만 가운데 정렬되는 흔한 앱 셸 패턴과 같다.
   background도 명시해야 한다 — kwmf의 .app{background:var(--bg)}(연회색)가 같은 선택자라
   속성 단위로 계속 새어 들어와 PRD 원본(흰 배경)과 다르게 회색으로 보였다(2026-08-20). */
.app {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--color-white, #fff);
  min-height: 100vh;
}
/* 2026-08-27 추가: sticky footer. 퍼블 시안엔 .app 이 없어 #wrapper(flex column)가 푸터를
   직접 자식으로 두지만, 운영 데코레이터는 그 사이에 .app 을 끼워 넣어 체인이 끊겨 있었다 -
   .body-with-sidebar{flex:1 0 auto}가 block 부모 밑에서 무효가 되어, 본문이 짧은 화면
   (진위확인 등)에서 푸터가 화면 중간에 붙고 그 아래가 빈 채로 남았다(1600x1000 실측:
   푸터 하단 736px, 264px 공백 → 751~1000px, 공백 0).
   서브 화면(.body-with-sidebar 보유)에만 건다. 랜딩까지 flex 로 만들면 <main> 의 auto
   좌우 마진이 flex item 의 stretch 를 깨서 폭이 자식(1280px)으로 줄고, 히어로 배경이
   화면 끝까지 닿지 않는 2026-08-25 의 그 증상이 되살아난다(같은 날 실측: 1585 → 1280). */
#wrapper:has(.body-with-sidebar) > .app {
  display: flex;
  flex-direction: column;
}
#wrapper:has(.body-with-sidebar) > .app > header,
#wrapper:has(.body-with-sidebar) > .app > .footer {
  flex-shrink: 0;
}
/* 프로젝트 추가분(2026-08-24) — 날짜 두 개를 '~'로 묶어 한 줄에 두는 기간 입력.
   배포본에는 없다(시안이 시작일/종료일을 각각 다른 행으로 나눠 놓아 묶는 컴포넌트가 없었다).
   경력정보 등록과 게시판 등록·수정에서 함께 쓴다. */
.form-row__range {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.form-row__range-date {
  flex: 1;
  min-width: 120px;
}
/* 프로젝트 추가분(2026-08-24) — 라벨 오른쪽에 보조 체크박스를 붙이는 줄.
   확장경력 학력의 '전공 [해당없음]' 처럼 항목 라벨과 그 항목을 끄는 체크박스를 나란히 둔다.
   라벨은 굵은데 체크박스 쪽은 값이 아니라 조작이라 일반 텍스트로 눌러 둔다. */
.form-row__label-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-row__label-row .form-row__inline-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  color: var(--color-text-secondary);
  cursor: pointer;
}
/* 프로젝트 추가분(2026-08-24) — 라벨과 선택지 사이에 들어가는 안내문.
   .form-hint 는 입력칸 아래용이라 위쪽 여백이 필요 없지만, 선택지 위에 올 때는 아래로만 띄운다.
   확장경력 등록의 '고용보험지원여부'가 이 형태다. */
.form-hint--lead {
  margin-top: 0;
  margin-bottom: 2px;
}
/* 프로젝트 추가분(2026-08-24) — 선택지 이름 뒤에 붙는 부연 설명.
   확장경력 '구분'의 괄호 예시처럼 같은 줄에 오지만 선택지 이름이 아니라 설명이라 톤을 낮춘다. */
.radio-row__desc {
  margin-left: 4px;
  font-size: var(--font-size-13);
  font-weight: 400;
  color: var(--color-text-tertiary);
}
/* 프로젝트 추가분(2026-08-24) — 항목마다 괄호 설명이 붙는 다중 체크박스를 2단으로 접는다.
   .checkbox-row 는 가로 한 줄 나열(gap 24 / min-height 44)이라 설명 붙은 항목이 여러 개면 담기지 않는다. */
.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 22px;
}
.checkbox-grid__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--color-gray-700);
  cursor: pointer;
}
.checkbox-grid__item input {
  margin-top: 3px;
  flex: none;
}
.checkbox-grid__item em {
  font-style: normal;
  margin-left: 4px;
  font-size: var(--font-size-13);
  color: var(--color-text-tertiary);
}
@media (max-width: 900px) {
  .checkbox-grid {
      grid-template-columns: 1fr;
    }
}
/* 프로젝트 추가분(2026-08-31) — 증빙자료 첨부.
   종류 선택(.checkbox-grid)은 그대로 두고, 체크한 종류만 이 목록에 행으로 나타난다.
   행 = 항목명 + 파일 1개이며, 첨부 컨트롤은 시안 .file-upload__btn / .file-upload__item 을
   그대로 쓴다(다른 화면과 같은 모양이 나온다). 여기서는 배치만 정의한다. */
.proof-file-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.proof-file-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.proof-file-row__label {
  flex: none;
  width: 210px;
  padding-top: 2px;
  font-size: var(--font-size-15);
  font-weight: 500;
  color: var(--color-text-body);
}
.proof-file-row__ctrl {
  flex: 1 1 auto;
  min-width: 0;
}
/* 파일 선택은 [업로드] 버튼이 연다. click() 이 먹어야 하므로 display:none 이 아니라 투명 1px 이다
   (종전 fileUpload_include.jsp 의 같은 규칙을 옮겨 왔다) */
.proof-file-row__ctrl .file-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.proof-file-empty {
  margin: 0;
  padding: 20px;
  background: var(--color-white);
  border: 1px dashed #aab4c1;
  border-radius: 10px;
  text-align: center;
  font-size: var(--font-size-14);
  color: var(--color-text-tertiary);
}
@media (max-width: 744px) {
  .proof-file-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .proof-file-row__label {
    width: auto;
  }
  .proof-file-row__ctrl {
    width: 100%;
  }
}
.proof-etc {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--color-bg-subtle);
  border-radius: 8px;
}
.proof-etc__hint {
  font-size: var(--font-size-13);
  color: var(--color-text-tertiary);
}
.proof-etc__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.notice-list__count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-15);
  font-family: "Pretendard", sans-serif;
}
.notice-list__count-label {
  color: var(--color-gray-500, #666);
  font-weight: 400;
}
.notice-list__count-value {
  color: var(--color-gray-900, #111);
  font-weight: 600;
}
/* ---------- FR-CR-005 확장경력 목록 전용 스코프 (V1 유지 - extCareerList.jsp에서 실사용 중, V2가 대체 없이 삭제해 보존) ---------- */
.career-ext-list__toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.career-ext-list__count {
  font-size: var(--font-size-15, 15px);
  font-family: "Pretendard", sans-serif;
}
.career-ext-list__count-label {
  color: var(--color-gray-500, #666);
  font-weight: 400;
}
.career-ext-list__count-value {
  color: var(--color-gray-900, #111);
  font-weight: 600;
}
.career-ext-list__foot {
  margin-top: 16px;
}
.popup-modal {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 9999;
  width: 80%;
  height: fit-content;
  max-height: 80%;
  background: var(--surface, #fff);
  padding: 56px 0 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  transform: scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
  border-radius: var(--radius, 12px);
  overflow: hidden;
  outline: none;
}
.popup-modal.on {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.popup-modal h2 {
  margin: 0 0 16px 4px;
  font-size: 25px;
  font-weight: 500;
}
.popup-modal button {
  background: transparent;
}
.popup-modal .content {
  padding: 0 4px 0 0;
  width: 100%;
  height: fit-content;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.popup-modal .content::-webkit-scrollbar {
  display: block;
  width: 5px;
  height: 5px;
  background-color: #fafafa;
}
.popup-modal .content::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #c1c1c1;
}
.popup-modal .close {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 16px;
  right: 24px;
  filter: invert(1);
  z-index: 100;
}
.popup-modal .close img {
  width: 24px;
  height: 24px;
}
/* ==========================================================================
   Toast (#toast-container / .toast) — login.jsp, joinForm1~4.jsp 등 panel
   데코레이터(user_001_freelancer_panel.jsp가 로드하는 web1/main.css) 밖에서
   쓰이는 인증 화면들은 이 CSS가 없어 showToast()가 스타일 없는 맨 텍스트로
   찍혔다(2026-08-20 실측: "개인정보 수집·이용에 동의해주세요." 토스트가
   위치/배경/z-index 없이 이상하게 보임). main.css(inc/web1/css/main.css
   625~698행)의 정의를 그대로 옮긴다 - 상대경로 depth가 같은 inc/web1/css/
   폴더라 이미지 경로 수정 불필요. ========================================== */
#toast-container {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.toast {
  padding: 16px 20px 16px 50px;
  min-width: 400px;
  max-width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #333;
  border-radius: 12px;
  backdrop-filter: blur(1px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  box-sizing: border-box;
  position: relative;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast span {
  font-size: 14px;
  color: #fff;
  font-weight: 200;
}
.toast-close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  background: url('../../../files/bcnimda/images/common/tst_close.png') no-repeat center center;
  border: none;
  border-radius: 100%;
  cursor: pointer;
  transition: background-color 0.2s;
}
.toast-close:hover {
  background-color: rgba(255, 255, 255, .1);
}
.toast.fade-out {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 1s, transform 1s;
}
.toast.success {
  background: linear-gradient(90deg, rgba(11, 185, 104, 0.10) 0%, rgba(19, 21, 43, 0.00) 100%), rgba(19, 21, 43, 0.80) url('../../../files/bcnimda/images/common/tst_success.png') no-repeat left 20px center;
}
.toast.warning {
  background: linear-gradient(90deg, rgba(246, 149, 38, 0.10) 0%, rgba(19, 21, 43, 0.00) 100%), rgba(19, 21, 43, 0.80) url('../../../files/bcnimda/images/common/tst_warning.png') no-repeat left 20px center;
}
.toast.error {
  background: linear-gradient(90deg, rgba(227, 53, 53, 0.10) 0%, rgba(19, 21, 43, 0.00) 100%), rgba(19, 21, 43, 0.80) url('../../../files/bcnimda/images/common/tst_error.png') no-repeat left 20px center;
}
.toast.info {
  background: linear-gradient(90deg, rgba(0, 92, 255, 0.10) 0%, rgba(19, 21, 43, 0.00) 100%), rgba(19, 21, 43, 0.80) url('../../../files/bcnimda/images/common/tst_info.png') no-repeat left 20px center;
}
/* ==========================================================================
   Confirm dialog (.confirm-container / .dimmed-blur) — showDialog()/customDialog()가
   그리는 확인·취소 팝업. 토스트와 같은 이유(main.css만 있고 panel 밖 화면엔 없음)로
   joinForm1~4.jsp의 "취소" 버튼(fncCancel → showDialog)이 스타일 없이 깨졌다
   (2026-08-20). main.css(inc/web1/css/main.css 701~772행) 정의를 그대로 옮긴다.
   단, .btn-confirm의 var(--darkgray)는 web1 쪽 :root에 선언이 없는 미정의 변수라
   main.css를 로드하는 화면에서도 실제로는 브라우저가 초기값으로 처리하고 있었다 -
   지금까지 항상 렌더된 실제 색(bcnimda design.css의 --darkgray:#424148)을 폴백으로
   명시해 두 경로가 같은 결과를 보이게 한다. ========================================== */
.confirm-container {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  border-radius: 12px;
  background: #FFF;
  box-shadow: 0px 0px 60px -30px rgba(0, 0, 0, .3);
  z-index: 999;
}
.confirm-message {
  padding: 32px 24px;
}
.confirm-message .txt {
  font-size: 18px;
  color: #222;
  font-weight: 500;
}
.confirm-message .desc {
  font-size: 13px;
  color: #656565;
  font-weight: 300;
  line-height: 140%;
}
.confirm-message .txt + .desc {
  margin-top: 8px;
}
.confirm-actions {
  padding: 0 24px 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
.confirm-actions a {
  padding: 7px 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 13px;
  position: relative;
}
.confirm-actions a.btn-cancel {
  border: 1px solid #dcdcdc;
  background: #fff;
}
.confirm-actions a.btn-cancel:hover {
  background: #f6f6f6;
  color: #333;
}
.confirm-actions a.btn-confirm {
  border: 1px solid var(--darkgray, #424148);
  background: var(--darkgray, #424148);
  color: #fff;
}
.confirm-actions a.btn-confirm:hover {
  background: #2b2a33;
}
.dimmed-blur {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .1);
  backdrop-filter: blur(2px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
}
/* kwmf-mockup.css의 구 GNB용 규칙 nav.gnb a{padding:13px 18px}(75~78행)이 새 BEM
   .gnb__icon-btn(<a> 태그, nav.gnb 하위)에도 그대로 걸려 design.css의 width:24px가 밀려나고
   아이콘이 찌그러지는 문제 확인(2026-08-20) - width/height/padding을 여기서 강제 재지정한다.
   알림 배지 점은 guide.html(V2) 기준 .gnb__icon-btn.is-badge::after(design.css)로 통일했다
   (2026-08-21, 예전 .dot span 방식 제거). */
.gnb__icon-btn {
  position: relative;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
}
.gnb__icon-btn img {
  width: 22px !important;
  height: 22px !important;
}

/* 프로젝트 추가분(2026-08-25) — 메인 랜딩(body.main-landing) 보정 3건.
   랜딩은 퍼블 main.html 이 layout.css + design.css 만 싣는 것을 전제로 그려졌는데, 운영
   데코레이터는 toast/popup 등 아직 옮기지 못한 컴포넌트 때문에 kwmf-mockup.css 를 계속
   싣는다. 그래서 랜딩에서만 어긋나는 것들을 여기서 되돌린다. 배포본에는 없다. */

/* ① GNB — kwmf 의 nav.gnb(남색 바)가 design.css 의 .gnb(히어로 위 투명 오버레이)보다
      특이도가 높아(0-1-1 vs 0-1-0) 이긴다. 링크 색도 같은 이유로 kwmf 값(#B7C4DE)이
      나중 로드라 이기므로 함께 되돌린다. 서브 화면의 남색 GNB 는 그대로 둔다. */
body.main-landing nav.gnb {
  background: none;
  padding: 0 40px;
  overflow-x: visible;
}
body.main-landing nav.gnb a {
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  border-bottom: 0;
}
/* 색·크기는 inherit 로 되돌릴 수 없다 - nav.gnb a(0-1-1)가 .gnb__auth-link(0-1-0)를 이겨서
   inherit 이 그대로 적용되고, 부모(.gnb)에 색이 없어 본문 값(16px/400/본문색)을 물려받는다.
   메뉴 링크는 부모 .gnb__menu 가 20px/500 을 주므로 inherit 이 맞지만, 우측 유틸은 부모에
   기준값이 없어 어긋난다. 게다가 로그인 상태의 회원명은 <a> 가 아니라 <span> 이라 kwmf 규칙을
   타지 않고 혼자 design.css 값(14px/500)으로 남는다 - 그래서 한 줄 안에서 크기가 들쭉날쭉했다.
   design.css 의 .gnb__auth-link 값을 특이도 0-2-0 으로 직접 지정해 <a>·<span> 을 함께 맞춘다. */
body.main-landing .gnb__menu-link a,
body.main-landing .gnb__auth-link {
  color: var(--color-white);
}
body.main-landing .gnb__util .gnb__auth-link {
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: var(--line-height-tight);
}

/* ①-2 <main id="container"> — kwmf-mockup.css / mockup.css 의 main { padding:0 32px 48px } 가
      히어로를 좌우 32px 씩 안으로 밀어 배경이 화면 끝까지 닿지 않는다(2026-08-25 실측:
      뷰포트 1585 / 히어로 1521). 퍼블 main.html 에는 그 규칙이 없다. 랜딩의 좌우 여백은
      .main-hero__inner / .main-content 가 각자 1280px 로 잡으므로 래퍼는 폭 제약을 두지 않는다. */
body.main-landing main#container {
  padding: 0;
}

/* ② 자주찾는 서비스 — 목록은 space-between 이라 항목이 줄면 양끝으로 벌어진다.
      시안은 5개뿐이라 그 경우가 없었는데, 비회원·사용처는 2개만 남는다(경력신청·
      확장경력신청·증명서발급이 프리랜서 전용). 3번째 항목이 없을 때만 가운데로 모은다 -
      마크업이 아니라 항목 수로 판정하므로 노출 규칙이 바뀌어도 따라온다. */
.main-quick__list:not(:has(> .main-quick__item:nth-child(3))) {
  justify-content: center;
  gap: var(--spacing-90);
}

/* ③ 공지사항·일자리공고 — .main-board 가 align-items:center 라 두 목록의 행 수가 다르면
      짧은 쪽이 세로 가운데로 내려가 제목줄과 구분선이 어긋난다. 시안은 양쪽 5행이라
      드러나지 않았다. 행 수는 데이터가 정하는 값이므로 높이를 고정하지 않고 위로 맞춘다. */
.main-board {
  align-items: flex-start;
}

/* =========================================================
   web2(사용처 포털) PRD 시안 전용
   - html/web2/*.html 의 인라인 style / <style> 블록을 걷어내면서
     web1 공용 CSS에 없던 선언만 클래스로 옮긴 것.
   ========================================================= */

/* PRD 주석 마커 */
.anno-mark { font-size: 10px; color: var(--blue-600); font-weight: 700; margin-left: 2px; cursor: help; }

/* 참고사항 노트 카드 */
.w2-note { margin-top: 24px; background: #FAFBFD; }
.w2-note__title { margin-bottom: 10px; }
.w2-note__row { display: flex; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--text-700); }
.w2-note__row--warn { color: #C0392B; }
.w2-note__num { flex: none; color: var(--blue-600); }
.w2-note__num--warn { color: #C0392B; }

/* 링크 */
.w2-link { color: var(--blue-600); font-weight: 600; }
.w2-link--bold { font-weight: 700; }
.w2-link-plain { color: inherit; text-decoration: none; }
.w2-link-muted { color: var(--text-500); }

/* 텍스트 */
.w2-h2 { margin: 0 0 10px; font-size: 17px; color: var(--navy-900); line-height: 1.4; }
.w2-h3 { margin: 22px 0 10px; font-size: 15px; color: var(--navy-900); }
.w2-h3-sm { margin-bottom: 8px; font-size: 13.5px; }
.w2-desc { font-size: 13.5px; color: var(--text-700); margin: 0 0 12px; line-height: 1.7; }
.w2-body-text { font-size: 14px; line-height: 1.85; color: var(--text-900); margin: 0; }
.w2-p-strong { font-weight: 600; color: var(--text-700); }
.w2-hint { font-size: 12px; color: var(--text-500); }
.w2-meta { color: var(--text-400); font-size: 12px; margin-left: 8px; white-space: nowrap; }
.w2-fw-400 { font-weight: 400; }

/* 카드/패널 */
.w2-panel { margin-top: 16px; width: 100%; background: #FAFBFD; }
.w2-panel--440 { max-width: 440px; }
.w2-panel--520 { max-width: 520px; }
.w2-card-flush { padding: 0; overflow: hidden; margin-bottom: 16px; }
.w2-card-tight { padding: 6px 20px; }
.w2-pad { padding: 22px 26px; }
.w2-pad--sep { border-bottom: 1px solid var(--line); }

/* 목록/썸네일 */
.w2-thumb {
  height: 70px;
  background: var(--blue-50);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-600);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 10px;
}
.w2-clickable { cursor: pointer; }
.w2-list-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 14px; }
.w2-td-empty { text-align: center; color: var(--text-500); }
.w2-th-56 { text-align: center; width: 56px; }
.w2-w100 { width: 100px; }

/* 행/정렬 */
.w2-row-center { display: flex; align-items: center; }
.w2-row-top { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.w2-meta-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-500); }
.w2-gap-10 { display: flex; gap: 10px; }
.w2-col-start { flex-direction: column; gap: 8px; align-items: flex-start; }
.w2-btn-row-center { justify-content: center; margin-top: 12px; }
.w2-self-end { align-self: flex-end; }
.w2-float-right { float: right; }
.w2-flex-none { flex: none; }
.w2-flex-1 { flex: 1; }
.w2-flex-1-min0 { flex: 1; min-width: 0; }
.w2-flex-1-center { flex: 1; justify-content: center; }

/* 여백/폭 */
.w2-m0 { margin: 0; }
.w2-mt-16 { margin-top: 16px; }
.w2-mb-14 { margin-bottom: 14px; }
.w2-mb-16 { margin-bottom: 16px; }
.w2-ml-8 { margin-left: 8px; }
.w2-mw-520 { max-width: 520px; }
.w2-form-row-220 { max-width: 220px; margin-bottom: 16px; }
.w2-w-full { width: 100%; }
.w2-w240 { width: 240px; }
.w2-w280 { width: 280px; }
.w2-w320 { width: 320px; }

@media (max-width: 744px) {
  .w2-list-foot { grid-template-columns: 1fr; row-gap: 8px; }
  .w2-w240,
  .w2-w280,
  .w2-w320 { width: 100%; }
}

/* ==========================================================================
   알림 팝업(#alarmLP / .model-inform) — kwmf-alarm.css 에서 이관(2026-08-26).
   구 design_guide.css 알림 규칙을 신규 셸(topbar 64px)에 맞춰 옮긴 것.
   .model-inform/__inner/.inform-popuplayer 는 메인·마이메인에서 design_guide.css 가
   같은 선택자로 먼저 실리므로, 비워둔 속성이 새어 들어오지 않도록 전부 명시한다.
   ========================================================================== */
.model-inform {
  position: fixed;
  top: 64px;
  right: 40px;
  bottom: auto;
  left: auto;
  width: auto;
  height: auto;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  box-sizing: border-box;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .4s cubic-bezier(.36,0,0,1) 0s, transform .4s cubic-bezier(.36,0,0,1) 0s;
}
.model-inform.visible {opacity: 1; visibility: visible; transform: translateY(0);}
.model-inform__inner {position: relative; width: 400px; max-width: calc(100vw - 32px); margin: 0;}
.inform-popuplayer {position: static; top: auto; right: auto; width: 100%; height: auto; background: #fff; border-radius: 15px; border: 1px solid #dcdee0; box-shadow: 1px 6px 8px rgba(69,72,86,0.2); overflow: hidden;}
.inform-popuplayer__top {display: flex; align-items: center; height: 47px; padding: 0 20px;}
.inform-popuplayer__left {margin-right: auto;}
.inform-popuplayer__left a {font-size: 13px;}
.inform-popuplayer__top .inform-title {font-size: 17px; font-weight: 600;}
.inform-popuplayer__top .inform_close {margin-left: auto; background: url(../../../files/web1/images/common/inform_close.png) no-repeat left bottom; background-size: 15px 14px; width: 15px; height: 14px;}
.inform-content__search {display: flex; align-items: center; background: #f5f5f5; padding: 0 20px; height: 46px;}
.inform-content__search::before {content: ''; width: 17px; height: 17px; background: url(../../../files/web1/images/common/inform_search.png) no-repeat left top; background-size: 17px 17px; margin-right: 8px;}
.inform-content__search input[type="text"] {flex: 1; border: none; font-size: 13px; background: none; height: 46px; padding: 0; margin-right: 10px;}
.inform-content__search input::placeholder {font-size: 13px; color: #888;}
.inform-content__search .btn {font-size: 12px; padding: 0 10px; height: 28px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: var(--blue-600, #066bfd); color: #fff;}
.inform-edit__top {display: flex; align-items: center; padding: 0 30px 0 18px; height: 47px; background: #f5f5f5;}
.inform-edit__left {display: flex; align-items: center;}
.inform-edit__left a {display: inline-flex; font-size: 13px; margin-right: 20px; font-weight: 600;}
.inform-edit__right {margin-left: auto;}
.inform-content__scroll {position: relative; overflow-y: auto; height: auto; max-height: 410px;}
.inform-list {display: flex; flex-wrap: wrap; gap: 9px; padding: 12px 10px;}
.inform-list li {display: flex; align-items: center; border: 1px solid #eaeaea; background: #f8f8f8; border-radius: 20px; padding: 15px 15px 15px 12px; box-sizing: border-box; width: 100%;}
.inform-list li.check {border: 1px solid #3b66f5;}
.inform-item__left {display: flex;}
.inform-item__left::before {content: ''; width: 18px; height: 18px; background: url(../../../files/web1/images/common/bell_off.png) no-repeat left top; background-size: 18px 18px; margin-right: 12px; flex: none;}
.inform-item__right {margin-left: auto;}
.inform-item_content {margin-top: -3px; max-width: 290px;}
.inform-item_content .text1 {font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #b1b1b1;}
.inform-item_content .text2 {font-size: 14px; color: #b1b1b1; line-height: 18px;}
.inform-item_content .time {font-size: 12px; color: #b1b1b1; margin-top: 6px;}
.inform-list li.active .inform-item__left::before {background: url(../../../files/web1/images/common/bell_on.png) no-repeat left top; background-size: 18px 18px;}
.inform-list li.active .text1 {color: var(--blue-600, #066bfd);}
.inform-list li.active .text2 {color: #444;}
.side_highlight {color: var(--blue-600, #066bfd); font-weight: 600;}

/* 모바일 - 구 스킨의 전체화면 시트를 신규 셸 높이(topbar 64px)로 옮긴 것 */
@media screen and (max-width: 744px) {
  .model-inform {top: 64px; right: 0; left: 0; width: auto;}
  .model-inform__inner {width: auto; max-width: none;}
  .inform-popuplayer {border-radius: 0; border: none; box-shadow: 1px 8px 8px rgba(69,72,86,0.2); height: calc(100vh - 64px);}
  .inform-content__scroll {height: calc(100vh - 157px); max-height: none;}
  .inform-item_content {max-width: none;}
}

/* ==========================================================================
   [이관] kwmf-pub-ext.css → mockup.css (2026-08-26)
   퍼블(web1)이 안 다루던 화면별 보강분. mockup.css 뒤에 실려 순서로 이기던 것을
   그 맥락(파일 최하단) 그대로 옮긴다. var(--navy/--line/--bg/--surface/--text-*)
   등 kwmf-mockup.css 토큰 참조가 남아 있다 - kwmf-mockup.css 제거(C단계) 때 함께
   토큰을 web1 :root 로 이관/치환하고, 아래 timeline 중화기 등 kwmf 잔재 대응 규칙은 정리한다.
   ========================================================================== */

/* [AI-GENERATED] 작성일: 2026-08-20 13:10 | 수정일: 2026-08-24 */

/* =========================================================
   kwmf-pub-ext.css
   퍼블(/inc/web1/css/layout.css, mockup.css)이 다루지 않는 보강분 — 전 화면 통합

   퍼블 원본을 직접 고치면 다음 배포 때 덮어써지므로 여기 모은다.
   원본과 같은 특이도라 로드 순서로 이긴다 — 각 화면에서 mockup.css 뒤에 싣는다.

   퍼블이 이 항목들까지 커버하게 되면 해당 섹션을 지우면 된다.

   [공용]      직종 4단 셀렉트 / 필터바 두 줄 배치 / 페이지 번호
   [FR-CR-001] 경력정보 목록
   [FR-CR-002] 경력정보 등록·수정
   [FR-JOB-001] 일자리공고 목록 (구직자·사용처)
   [FR-CR-005] 확장경력 목록
   [FR-COM-011] 멘토 상세 · Q&A (질문·답변 상세 포함)
   [FR-JOB-002] 일자리공고 등록·수정 (사용처)
   [FR-CR-003] 경력·확장경력 상세 (읽기 전용)
   [FR-COM-005] 설문 목록 · 나의 참여내역 · 상세 · 응답(문항 표 포함)
   [CH-01]     증명서 발급이력
   [FR-CR-004] 외부연동 현황 (동의 목록)
   [FR-CT-001] 증명서 발급 신청 (3단계 마법사)
   [FR-MY-002] 내정보관리
   [FR-CS-005 / FR-COM-010] 공지사항 상세 · 자료실 상세
   [FR-JOB-004] 일자리공고 상세
   ========================================================= */

/* =========================================================
   공용
   ========================================================= */
/* ---------- 직종 4단 연동 셀렉트 ---------- */
/* 시안은 직종이 단일 select 하나였다. KECO 2025 세분류 495종으로 바뀌면서 대/중/소/세 4단이 됐다.
   careerList(필터)·careerForm(입력)이 같은 마크업을 쓴다. */
.jobtype-cascade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
/* 퍼블 select 는 폭이 max-width 기반이라 4등분 칸에서 어긋난다 */
.jobtype-cascade select {
  width: 100%;
  min-width: 0;
}
@media (max-width: 900px) {
  .jobtype-cascade {
    grid-template-columns: repeat(2, 1fr);
  }

}
/* ---------- 필터바: 직종 4단이 들어간 검색조건 ---------- */
/* 직종 4칸 + 나머지 조건 + 버튼을 퍼블의 한 줄(.filterbar > .form-row{flex:1 0 0})에 그대로 늘어놓으면
   셀렉트 하나가 130px 남짓이 되어 코드명이 잘린다. 직종만 한 줄을 통째로 쓰게 해 두 줄로 접는다.
   필터바 박스(회색 배경·테두리)는 하나 그대로다. */
.filterbar--wrap {
  flex-wrap: wrap;
}
.filterbar--wrap .form-row.jobtype-row {
  flex: 1 0 100%;
}
/* talentSearch.jsp(CO-TAL-001)처럼 form-row.wide(검색어)가 같은 filterbar--wrap 안에 있으면,
   모바일(744px 이하)에서 .filterbar:has(.form-row.wide) .form-row 규칙(특이도 0,4,0 - line 761 부근)이
   위 .filterbar--wrap .form-row.jobtype-row(특이도 0,3,0)를 이겨 직종 4단 셀렉트가 반칸 폭으로 찌그러진다.
   더 높은 특이도로 데스크톱과 같은 한 줄 전체 폭을 되돌린다. */
@media (max-width: 744px) {
  .filterbar:has(.form-row.wide) .form-row.jobtype-row {
    flex: 1 0 100%;
  }
}

/* ---------- 페이지 번호 ---------- */
/* 공통 함수가 만드는 a.first/.prev/.paging-num/.next/.last 를 퍼블 .pagination button 모양으로 맞춘다.
   목록마다 함수를 새로 짜지 않기 위한 매핑이다.
   a[class] 로 쓰는 이유: 스킨 design.css 의 .list-paging .first/.prev/.next/.last(0,2,0)가
   이미지 배경·회전을 걸어 두어 .list-paging a(0,1,1)로는 특이도에서 진다. */
.list-paging {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.list-paging a[class] {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-700, #333);
  /* 스킨이 .next/.last 에 rotate(180deg) 를 걸어 화살표 문자가 뒤집힌다 */
  transform: none;
  background-image: none;
}
.list-paging a[class].paging-num--active {
  background: var(--color-primary, #2d65f2);
  color: #fff;
  font-weight: 600;
}
.list-paging a[class].first,
.list-paging a[class].prev,
.list-paging a[class].next,
.list-paging a[class].last {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #d8dce4);
  color: #767676;
}
/* 시안 화살표는 인라인 svg다. a 태그에는 내용이 없어 문자로 대신 그린다 */
.list-paging a.first::before {
  content: "\00AB";
}
.list-paging a.prev::before {
  content: "\2039";
}
.list-paging a.next::before {
  content: "\203A";
}
.list-paging a.last::before {
  content: "\00BB";
}

/* =========================================================
   FR-CR-001 경력정보 목록
   ========================================================= */

/* ---------- 1) 보완요청 사유 모달 ---------- */
/* 퍼블 .modal-box 는 400px 고정. 사유 본문이 길고 회차가 쌓일 수 있어 넓히고 넘치면 스크롤한다 */
.career-list__reason-modal .modal-box {
  width: 460px;
  max-height: 80vh;
  overflow-y: auto;
}
.career-list__reason-item {
  border-top: 1px solid var(--color-border-divider, #e9eef8);
  padding: 12px var(--spacing-xl);
}
.career-list__reason-item:first-child {
  border-top: none;
  padding-top: 0;
}
.career-list__reason-date {
  font-size: var(--font-size-13);
  font-weight: 600;
  color: var(--red);
  margin-bottom: 4px;
}
.career-list__reason-body {
  font-size: var(--font-size-14);
  color: var(--color-text-body);
  line-height: var(--line-height-base);
  white-space: pre-wrap;
}
.career-list__reason-judger {
  margin-top: 6px;
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
}

/* ---------- 2) 업무내용·계약기간·빈 목록 ---------- */
/* 업무내용은 자유입력이라 길면 칸을 넓혀 표 전체를 밀어낸다. 한 줄로 자르고 넘치면 ...으로 끝낸다.
   td에 max-width를 걸면 표가 auto 레이아웃이라 무시되므로 안쪽 span에 건다 */
.career-list__grid .career-list__ellipsis {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 계약기간 날짜는 숫자 중간에서 꺾이지 않게 묶어둔다 */
.career-list__grid .career-list__ym {
  white-space: nowrap;
}
/* 퍼블 .empty-state 를 그대로 쓰되, 표 안(td)에 들어가므로 셀 여백을 걷어낸다 */
.career-list__grid td.career-list__empty-cell {
  height: auto;
  padding: 16px 0;
}
/* 900px 이하 카드뷰에서는 td가 세로 스택이라 폭 제한이 오히려 방해가 된다 */
@media (max-width: 900px) {
  .career-list__grid .career-list__ellipsis {
    max-width: none;
    white-space: normal;
  }
}
/* 데스크톱 표에서는 헤더 칸이 전체선택을 맡는다. 툴바 체크박스는 thead가 숨는 900px 이하 전용으로 남긴다.
   AI-MODIFIED: 2026-08-27 .career-list__btn-row 는 퍼블 리팩토링으로 .list-toolbar 로 바뀌어 이 셀렉터가
   더 이상 아무것도 가리키지 못했다(체크박스가 데스크톱에서도 계속 보이던 원인) - 새 클래스로 맞춘다.
   #ecChkAll(확장경력 목록)도 같은 이유로 같이 묶는다 - extCareerList.jsp가 오늘 .list-toolbar로
   갈아타면서 툴바 체크박스 자체가 아예 빠져 모바일에서 전체선택이 안 됐다(2026-08-27 재발견). */
@media (min-width: 901px) {
  .list-toolbar #crChkAll,
  .list-toolbar #ecChkAll {
    display: none;
  }
  .career-list__grid th:first-child {
    text-align: center;
    padding: 0;
  }
}

/* =========================================================
   FR-CR-002 경력정보 등록·수정
   ========================================================= */

/* 2026-08-24 이 화면의 보강 규칙을 전부 퍼블 CSS(mockup.css)로 옮겼다 - 남은 규칙 없음.
   제목 -> .page-head/.title-row h1 / 기간 -> .form-row__range / 증빙자료 종류 -> .checkbox-grid
   / 저장버튼 비활성 -> .btn.is-disabled */

/* =========================================================
   FR-JOB-001 일자리공고 목록
   ========================================================= */
/* ---------- 공고 항목(카드형) ---------- */
/* AI-MODIFIED: 2026-08-24 카드가 시안 .job-card 로 바뀌면서 .jobnotice__item h4 · __org · __meta ·
   __jobtype · __head · __foot 이 아무 데서도 안 쓰이게 되어 걷어냈다(구직자·사용처 목록 둘 다).
   .jobnotice__item 은 e2e 훅으로만 남아 스타일이 없다 - 커서·테두리는 아래 li.job-card 가 맡는다.
   ⚠ .jobnotice__item{cursor:pointer} 를 남겨 두면 준비중 카드에도 손가락 커서가 붙는다(클릭은 안 된다). */
.jobnotice__none {
  color: var(--color-text-tertiary);
}
/* 상시채용. 퍼블 배지는 배경 채움이라 테두리형이 없다 */
.jobnotice__badge-open {
  background: var(--color-white);
  border: 1px solid var(--amber);
  color: var(--amber);
}

/* ---------- 공고 카드 - 시안 .job-card 적용분 (2026-08-24) ---------- */
/* 구직자·사용처 목록 카드를 시안이 쓰는 퍼블 컴포넌트 .job-card(design.css)로 바꿨다.
   여기 있는 건 시안이 다루지 않은 사정뿐이다 - 시안은 div+a 격자에 짧은 표본 데이터를 담지만
   이 화면은 ul+li 에 위임 클릭이고, 배지+기업명 줄이 하나 더 붙고, 실제 값이 훨씬 길다. */

/* ① 시안 격자는 div 인데 이 화면은 ul 이다. 목록 기본 스타일을 지운다 */
ul.job-list__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ② 시안 카드는 a 라 카드 전체가 링크다. 이 화면은 li + 위임 클릭이라 손가락 커서를 직접 준다
   (준비중 카드는 클릭이 걸리지 않으므로 제외한다 - D-17) */
li.job-card:not(.job-card--delay) {
  cursor: pointer;
  transition: border-color 0.15s;
}
li.job-card:not(.job-card--delay):hover {
  border-color: var(--color-primary);
}
/* ③ 시안 카드는 제목·근무장소 / 직종 / 마감일 세 덩어리라 높이가 170px 고정이다.
   이 화면은 그 위에 배지+기업명 줄이 하나 더 붙어 내용이 상자 밖으로 넘친다(2026-08-24 실측).
   고정 높이를 최소 높이로 바꾸고, 본문과 맨아랫줄 사이 간격(24px)을 줄여 4열 카드 높이를 맞춘다 */
li.job-card {
  height: auto;
  min-height: 170px;
  gap: var(--spacing-sm);
}
/* ④ 시안 카드 첫 줄은 제목이다. 여기는 그 위에 모집상태 배지 + 기업명 한 줄이 더 붙는다
   (2026-08-24 사용자 지시). 배지와 글자의 세로 중심을 맞춘다 */
.job-card__org {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  width: 100%;
  min-width: 0;
  margin: 0;
}
/* ⑤ 가로 넘침 방지(2026-08-24 실측).
   퍼블 카드의 직종 박스·마감일은 white-space:nowrap 이라 글자 길이가 곧 칸의 최소폭이 된다.
   시안 데이터는 "IT·개발" 처럼 짧지만 실제 값은 "기타 문리 · 기술 및 예능 강사",
   "채용기간 2026-08-01~2026-09-25" 처럼 길어서 두 군데가 터졌다:
     - 1296px 이상: 격자가 repeat(4, 1fr) 인데 1fr 의 하한이 min-content 라 칸이 안 줄고
       격자 전체가 컨테이너를 452px 넘어갔다. 하한을 0 으로 풀어 준다.
     - 900px 근방: 채용기간 한 줄이 카드 안쪽 폭을 2~6px 넘었다.
   날짜는 …로 자르지 않는다 - 잘리면 마감이 언제인지가 사라진다. 좁으면 두 줄로 접는다. */
@media (min-width: 1296px) {
  ul.job-list__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
li.job-card .job-card__cat {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
li.job-card .job-card__foot {
  min-width: 0;
}
li.job-card .job-card__date {
  white-space: normal;
  text-align: right;
}
/* 날짜값 자체는 끊지 않는다. 하이픈이 줄바꿈 지점이라 이게 없으면 "2026-10-" / "15" 로 갈린다 */
li.job-card .jobnotice__period {
  white-space: nowrap;
}
.job-card__org .jobnotice__orgnm {
  min-width: 0;
  font-size: var(--font-size-13);
  font-weight: 600;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 리스트형 ---------- */
/* 표가 아니라 카드와 같은 항목을 한 줄에 하나씩 전체 폭으로 그린다.
   카드는 테두리로 구분되지만 여기는 아래 실선 하나로 나눈다 */
.jobnotice__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border-divider);
}
.jobnotice__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 4px;
  border-bottom: 1px solid var(--color-border-divider);
  cursor: pointer;
}
.jobnotice__row:hover {
  background: var(--bg);
}
.jobnotice__row-body {
  flex: 1;
  min-width: 0;
}

/* ---------- 툴바 / 선택 줄 ---------- */
.jobnotice__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
/* 카드/리스트 전환 버튼의 <li class="card"> 가 퍼블 .card 카드박스를 물어 버튼이 상자로 부푼다.
   아이콘 자체는 스킨 design.css 의 .list-view 정의를 그대로 쓴다 */
.jobnotice__toolbar .list-view li {
  display: inline-block;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
}
.jobnotice__toolbar-actions {
  display: inline-flex;
  gap: 8px;
}
.jobnotice__selbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.jobnotice__selall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-14);
  color: var(--color-gray-700);
  white-space: nowrap;
  cursor: pointer;
}
.jobnotice__selcnt {
  font-size: var(--font-size-14);
  font-weight: 600;
  color: var(--color-primary);
}

/* 상단 툴바용 "총 N건" - 하단 .jobnotice__total과 같은 표기지만 margin-top이 없다(2026-08-27) */
.jobnotice__toolbar-count {
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
}
.jobnotice__toolbar-count strong {
  color: var(--color-text-heading);
  font-weight: 600;
}

/* ---------- 건수 / 빈 목록 ---------- */
.jobnotice__total {
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
  margin-top: 14px;
}
.jobnotice__total strong {
  color: var(--color-text-heading);
  font-weight: 600;
}
.jobnotice__empty {
  padding: 48px 0;
  text-align: center;
  color: var(--color-text-secondary);
  grid-column: 1 / -1;
}

/* =========================================================
   FR-CR-005 확장경력 목록
   ========================================================= */

/* 퍼블 .career-ext-list__toolbar 는 건수만 두는 줄이다. 시안에 없는 [+ 등록]을 같은 줄 오른쪽에 붙인다 */
.career-ext-list__toolbar {
  justify-content: space-between;
  gap: 10px;
}
/* 툴바 버튼도 .btn-row 와 같은 이유로 outline 이 primary 와 치수가 어긋난다 */
.career-ext-list__toolbar-actions .btn.btn-outline {
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  border-width: 1px;
  border-radius: 6px;
}
.career-ext-list__toolbar-actions {
  display: inline-flex;
  gap: 8px;
}
/* 체크박스·[사유보기] 열만 폭을 고정한다. 탭마다 헤더가 달라 colgroup 을 쓸 수 없다 */
.career-ext-list__grid th:first-child,
.career-ext-list__grid td:first-child {
  width: 44px;
}
.career-ext-list__grid th:last-child,
.career-ext-list__grid td:last-child {
  width: 96px;
}
/* 구분·발급일·처리일이 좁아지면 줄바꿈으로 잘린다(2026-08-20 사용자 요청).
   세 칸에 최소폭을 주고 표에 min-width 를 건다 - table.grid 는 width:100% 라
   min-width 가 없으면 칸 안에서 계속 눌리기만 하고 .table-wrap 의 overflow-x 가 일하지 않는다.
   탭마다 헤더 구성이 달라 nth-child 를 쓸 수 없어 td 는 data-label 로 고른다(헤더는 EC_COLUMNS 가 그린다).
   모바일 카드뷰(≤900px)는 td { width:100% } 공통 규칙이 그대로 살아야 하므로 데스크톱 폭에만 건다. */
@media (min-width: 901px) {
  .career-ext-list__grid {
    min-width: 900px;
  }
  .career-ext-list__grid th {
    white-space: nowrap;
  }
  .career-ext-list__grid td[data-label='구분'] {
    width: 132px;
    white-space: nowrap;
  }
  /* 자격명은 나머지 폭을 흡수하는 칸이라 표가 좁아지면 가장 먼저 눌린다. 최소폭만 주고 늘어나게 둔다 */
  .career-ext-list__grid td[data-label='자격명'] {
    min-width: 200px;
  }
  .career-ext-list__grid td[data-label='발급일'],
  .career-ext-list__grid td[data-label='처리일'] {
    width: 120px;
    white-space: nowrap;
  }
}
/* 900px 이하 카드뷰 — 시안 FR-CR-005(extra-career__cert-grid 등)와 같은 카드 구성이다.
   시안은 탭마다 표 클래스가 따로라 nth-child 로 잡지만, 이 화면은 세 탭을 표 하나로 그리므로
   탭마다 열 위치가 달라진다. 그래서 td 의 data-label 로 고른다(헤더는 EC_COLUMNS 가 그린다).
   라벨:값 행들은 order 를 주지 않아 DOM 순서 그대로 쌓인다 - 카드 머리(체크박스·제목·배지)만
   음수 order 로 앞에, [사유보기]만 양수 order 로 맨 뒤에 둔다. */
@media (max-width: 900px) {
  .career-ext-list__grid tr:hover,
  .career-ext-list__grid tr:hover td {
    background: transparent;
  }
  .career-ext-list__grid tbody tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  .career-ext-list__grid tbody td {
    height: auto;
  }
  /* No.는 시안 카드에 없다 */
  .career-ext-list__grid td[data-label='No'] {
    display: none;
  }
  /* 라벨:값 행 - 구분선 없이 쌓는다. 카드 머리(제목·배지)는 아래에서 다시 잡는다 */
  .career-ext-list__grid td[data-label] {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  /* 카드 머리 바로 아래 첫 행(자격증·교육이수=구분, 학력=졸업년도)만 위 여백을 준다 */
  .career-ext-list__grid td[data-label='구분'],
  .career-ext-list__grid td[data-label='졸업년도'] {
    padding-top: var(--spacing-xs);
  }
  /* 체크박스 - 제목 왼쪽 */
  .career-ext-list__grid tbody td:first-child {
    order: -3;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-2xs) var(--spacing-sm) var(--spacing-sm);
  }
  .career-ext-list__grid tbody td:first-child::before {
    content: none;
  }
  /* 제목(자격명/학교명/교육·훈련명) - 굵게 18px, 진행상태 배지와 한 줄 */
  .career-ext-list__grid td[data-label='자격명'],
  .career-ext-list__grid td[data-label='학교명'],
  .career-ext-list__grid td[data-label='교육·훈련명'] {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  .career-ext-list__grid td[data-label='자격명']::before,
  .career-ext-list__grid td[data-label='학교명']::before,
  .career-ext-list__grid td[data-label='교육·훈련명']::before {
    content: none;
  }
  .career-ext-list__grid td[data-label='자격명'] > .cell-content,
  .career-ext-list__grid td[data-label='학교명'] > .cell-content,
  .career-ext-list__grid td[data-label='교육·훈련명'] > .cell-content,
  .career-ext-list__grid td[data-label='자격명'] a,
  .career-ext-list__grid td[data-label='학교명'] a,
  .career-ext-list__grid td[data-label='교육·훈련명'] a {
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 진행상태 배지 - 제목 오른쪽 */
  .career-ext-list__grid td[data-label='진행상태'] {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  .career-ext-list__grid td[data-label='진행상태']::before {
    content: none;
  }
  /* [사유보기] - 라벨 없이 전폭. 버튼 없는 행은 공통 td:empty 규칙이 숨긴다 */
  .career-ext-list__grid tbody td:last-child {
    order: 6;
    border-bottom: none;
    padding: 0 var(--spacing-sm) var(--spacing-sm);
  }
  .career-ext-list__grid tbody td:last-child::before {
    content: none;
  }
  .career-ext-list__grid tbody td:last-child > .cell-content {
    width: 100%;
    justify-content: stretch;
  }
  .career-ext-list__grid tbody td:last-child .btn {
    width: 100%;
  }
}
.career-ext-list__reason-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-14);
  font-weight: 500;
  white-space: nowrap;
}
/* 반려 사유 모달 — 퍼블 .modal-box 는 400px 고정. 사유가 길고 회차가 쌓일 수 있어 넓힌다 */
.career-ext-list__reason-modal .modal-box {
  width: 460px;
  max-height: 80vh;
  overflow-y: auto;
}
.career-ext-list__reason-item {
  border-top: 1px solid var(--color-border-divider, #e9eef8);
  padding: 12px var(--spacing-xl);
}
.career-ext-list__reason-item:first-child {
  border-top: none;
  padding-top: 0;
}
.career-ext-list__reason-date {
  font-size: var(--font-size-13);
  font-weight: 600;
  color: var(--red);
  margin-bottom: 4px;
}
.career-ext-list__reason-body {
  font-size: var(--font-size-14);
  color: var(--color-text-body);
  line-height: var(--line-height-base);
  white-space: pre-wrap;
}

/* 리스트형 표(구직자·사용처). 카드형과 같은 데이터를 열로 편다.
   공고명에 링크를 걸지 않는다 - 행 전체가 클릭 대상이라 파란 링크색이 표에서 튄다 */
.jobnotice__grid tbody tr {
  cursor: pointer;
}
.jobnotice__grid td[data-label="No."],
.jobnotice__grid th:first-child {
  text-align: center;
  color: var(--text-500);
}
@media (min-width: 901px) {
  .jobnotice__grid th:first-child,
  .jobnotice__grid td[data-label="No."] {
    width: 56px;
  }
}
/* 급여는 값이 짧아 꺾이면 읽기 나쁘다 */
.jobnotice__grid td[data-label="급여"] {
  white-space: nowrap;
}
/* 채용기간도 한 줄로 둔다. 접었더니 900px 이하 카드뷰에서 값이 두 줄로 갈려 읽기 나빴다 */
.jobnotice__grid td[data-label="채용기간"] {
  white-space: nowrap;
}
.jobnotice__grid td.jobnotice__empty-cell {
  height: auto;
  padding: 16px 0;
}

/* 표가 컨테이너에 맞춰 눌리면 기업명·공고명·직종이 잘게 꺾인다. 최소 폭을 주어 좁을 때는
   .table-wrap 의 가로 스크롤로 넘긴다.
   [!] 901px 이상에서만 건다. 900px 이하는 퍼블이 표를 카드로 접는데(td::before 가 data-label 을
   항목명으로 쓴다), min-width 가 남아 있으면 접히지 않고 가로 스크롤만 남아 경력정보 목록과 달라진다. */
@media (min-width: 901px) {
  .jobnotice__grid {
    min-width: 1120px;
  }
  .jobnotice__grid td[data-label="기업명"],
  .jobnotice__grid th:nth-last-child(5) {
    min-width: 150px;
  }
  .jobnotice__grid td[data-label="공고명"],
  .jobnotice__grid th:nth-last-child(4) {
    min-width: 300px;
  }
  .jobnotice__grid td[data-label="채용기간"],
  .jobnotice__grid th:last-child {
    min-width: 175px;
  }
  .jobnotice__grid td[data-label="직종"],
  .jobnotice__grid th:nth-last-child(3) {
    min-width: 170px;
  }
}

/* =========================================================
   공용 — 버튼 줄
   ========================================================= */

/* 퍼블 .btn-outline 은 .btn 의 치수를 자체 값으로 덮어쓴다(padding 8px 14px / 12.5px / radius 12px /
   border 1.5px). 그래서 같은 줄의 .btn-primary(44px / 15px / radius 6px)와 높이·글자·모서리가 어긋난다.
   버튼이 나란히 서는 .btn-row 안에서는 .btn 치수로 되돌린다 - 색만 outline 을 유지한다.
   (표 위 툴바는 .career-list__btn-row / .career-ext-list__toolbar 가 따로 36px 로 맞춘다) */
.btn-row .btn.btn-outline {
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  border-width: 1px;
  border-radius: 6px;
}
/* 경력정보 목록 툴바는 시안(Table/Toolbar node 2522:7842)이 36px 이다. 그런데 위 규칙(0,3,0)이
   퍼블의 .career-list__btn-row .btn(0,2,0)을 이겨 [엑셀다운로드]·[선택삭제]만 44px 로 튀고
   [+ 신규등록]만 36px 로 남았다. 같은 특이도로 뒤에 두어 되돌린다 */
.career-list__btn-row .btn.btn-outline {
  height: 36px;
  padding: 0 var(--spacing-sm);
  font-size: var(--font-size-14);
  font-weight: 500;
  border-radius: var(--radius-xs);
}

/* 툴바 버튼도 .btn-row 와 같은 이유로 outline 이 primary 와 치수가 어긋난다 */
.jobnotice__toolbar-actions .btn.btn-outline {
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  border-width: 1px;
  border-radius: 6px;
}

/* =========================================================
   [FR-COM-011/012] 멘토 상세 · Q&A
   퍼블 mockup.css 에 .mentor-detail-card 세트(반응형 포함)가 이미 있어
   여기 남는 것은 원본에 없는 상태(사진 없는 멘토·경력 목록·잠긴 제목)뿐이다.
   ========================================================= */

/* 퍼블 아바타는 <img> 전제라 사진이 없는 멘토를 그릴 수단이 없다 */
.mentor-detail-card__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-avatar-bg, #f2f3f8);
  color: var(--text-500);
  font-size: 28px;
  font-weight: 700;
}

/* 자유입력(멘토 소개)의 줄바꿈을 <br/> 주입 없이 살린다 */
.mentor-qna-detail__pre {
  white-space: pre-wrap;
  word-break: break-all;
}

/* 경력사항 - 퍼블의 career-grid 는 "라벨 · 값" 한 줄짜리라 여러 줄 항목에 맞지 않는다 */
.mentor-qna-detail__career-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface);
}
.mentor-qna-detail__career-item + .mentor-qna-detail__career-item {
  margin-top: 8px;
}
.mentor-qna-detail__career-corp {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--font-size-16);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 4px;
}
.mentor-qna-detail__career-meta {
  display: block;
  font-size: var(--font-size-14);
  color: var(--text-500);
  line-height: 1.6;
}

/* Q&A 목록 - 데스크톱 열 폭만 잡는다. 900px 이하는 퍼블이 카드로 접으므로 건드리지 않는다 */
@media (min-width: 901px) {
  .mentor-qna__grid th:nth-child(1), .mentor-qna__grid td:nth-child(1) { width: 70px; text-align: center; }
  .mentor-qna__grid th:nth-child(3), .mentor-qna__grid td:nth-child(3) { width: 120px; }
  .mentor-qna__grid th:nth-child(4), .mentor-qna__grid td:nth-child(4) { width: 100px; text-align: center; }
  .mentor-qna__grid th:nth-child(5), .mentor-qna__grid td:nth-child(5) { width: 120px; text-align: center; }
  .mentor-qna__grid th:nth-child(6), .mentor-qna__grid td:nth-child(6) { width: 80px; text-align: center; }
}
.mentor-qna__title-cell { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mentor-qna__title-link { color: var(--text-700); cursor: pointer; }
.mentor-qna__title-link:hover { text-decoration: underline; }
.mentor-qna__lock { color: var(--text-400); cursor: not-allowed; }

/* 빈 상태 행은 카드로 접히면 테두리가 이중이 된다 */
@media (max-width: 900px) {
  .mentor-qna__grid tr.mentor-qna__empty-row { border: none; padding: 0; background: none; }
  .mentor-qna__grid tr.mentor-qna__empty-row td { border-bottom: none; padding: 0; display: block; }
}

/* 질문/답변 상세(FR-COM-012) */
.mentor-qna-view__head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mentor-qna-view__title {
  margin: 0 0 8px;
  font-size: var(--font-size-22);
  font-weight: 600;
  color: var(--color-text-heading);
  word-break: break-all;
}
.mentor-qna-view__meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: var(--font-size-14);
  color: var(--text-500);
}
.mentor-qna-view__meta strong { color: var(--text-700); font-weight: 600; }
.mentor-qna-view__body {
  padding: 20px 0;
  font-size: var(--font-size-16);
  color: var(--text-700);
  line-height: 1.8;
  word-break: break-all;
}

/* 첨부 목록 - 퍼블 .file-upload__item 은 업로드 진행 UI 전용이라 조회 화면에는 무겁다 */
.mentor-qna-view__files {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  padding: 10px 12px;
}
.mentor-qna-view__files ul { margin: 0; padding: 0; list-style: none; }
.mentor-qna-view__files li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--font-size-14);
  color: var(--text-700);
  padding: 4px 0;
}
.mentor-qna-view__files li + li { border-top: 1px solid var(--line); }
.mentor-qna-view__file-nm { flex: 1; min-width: 0; word-break: break-all; }

.mentor-qna-view__answer {
  margin-top: 8px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-bg, #f5f8ff);
  border-radius: 0 8px 8px 0;
  padding: 16px 18px;
}
.mentor-qna-view__answer-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.mentor-qna-view__answer-date { font-size: var(--font-size-13); color: var(--text-500); }
.mentor-qna-view__answer-title {
  margin: 0 0 8px;
  font-size: var(--font-size-18);
  font-weight: 600;
  color: var(--color-gray-900);
  word-break: break-all;
}
.mentor-qna-view__answer-body {
  font-size: var(--font-size-16);
  color: var(--text-700);
  line-height: 1.8;
  word-break: break-all;
}

/* =========================================================
   [FR-JOB-002] 일자리공고 등록·수정 (사용처)
   [FR-CR-003] 경력·확장경력 상세 (읽기 전용)
   [FR-COM-005] 설문 목록 · 나의 참여내역 · 상세 · 응답(문항 표 포함) (PO0201만 퍼블로 옮겼다)
   ========================================================= */

/* 퍼블 .tab-btn 은 <button> 전제다. 이 화면의 탭은 서로 다른 URL이라 <a> 로 둔다.
   display 는 덮지 않는다 - 알약형 .tab-btn 의 inline-flex 를 inline-block 으로 되돌리면
   글자가 44px 알약 안에서 위쪽에 붙는다(justify-content/align-items 가 죽는다) */
a.tab-btn { text-decoration: none; }
a.tab-btn:hover { color: var(--blue-600); }

.poll-list .list-toolbar { margin-bottom: 12px; }
.poll-list .list-foot { margin-top: 16px; }
.poll-list .list-foot .list-paging { margin-top: 0; }

/* 화면 제목. 퍼블 h3 는 본문 소제목용이라 작다 */
.poll-list h3.poll-list__heading {
  margin: 0 0 18px;
  font-size: var(--font-size-22);
  font-weight: 600;
  color: var(--color-text-heading);
}

.poll-list__link { color: var(--blue-600); cursor: pointer; }
.poll-list__link:hover { text-decoration: underline; }
.poll-list__link + .poll-list__link { margin-left: 10px; }
.poll-list__muted { color: var(--text-400); }
.poll-list__actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.poll-list__actions .poll-list__link + .poll-list__link { margin-left: 0; }

/* 데스크톱 열 폭만 잡는다. 900px 이하는 퍼블이 카드로 접으므로 건드리지 않는다 */
@media (min-width: 901px) {
  .poll-list__grid th:nth-child(1), .poll-list__grid td:nth-child(1) { width: 56px; text-align: center; }
  .poll-list__grid th:nth-child(2), .poll-list__grid td:nth-child(2) { width: 130px; text-align: center; white-space: nowrap; }
  .poll-list__grid th:nth-child(4), .poll-list__grid td:nth-child(4) { width: 100px; text-align: center; }
  .poll-list__grid th:nth-child(5), .poll-list__grid td:nth-child(5) { width: 130px; text-align: center; }
  .poll-list__grid th:nth-child(6), .poll-list__grid td:nth-child(6) { width: 100px; text-align: center; }
  .poll-list__grid--my th:nth-child(5), .poll-list__grid--my td:nth-child(5) { width: 200px; text-align: left; }
}

@media (max-width: 900px) {
  .poll-list__grid tr.poll-list__empty-row { border: none; padding: 0; background: none; height: auto; }
  /* table.grid td{height:52px}(고정값)를 못 이겨 빈 상태 안내문(.empty-state, 실측 139px)이 아래
     페이지네이션(.list-foot)과 겹쳐 보였다 - 이 행만 height:auto로 되돌린다 */
  .poll-list__grid tr.poll-list__empty-row td { border-bottom: none; padding: 0; display: block; height: auto; }
}

/* ---------- 모바일 카드뷰 (시안 FR-COM-005 와 같은 형태) ---------- */
/* 시안 쪽 규칙(3497행 부근)은 시안 파일의 탭 패널 id(#FR-COM-005-1-tabs-0/1)에 걸려 있어 실화면에는
   하나도 적용되지 않는다 - 그래서 공통 카드 시스템만 받아 No.부터 관리까지 전부 라벨:값으로 쌓였다.
   같은 구성(제목+상태 배지 한 줄 → 라벨:값 → 관리)을 실화면 클래스로 다시 잡는다.
   두 표는 열 수가 달라(목록 6열 / 참여내역 5열) 배지·관리 위치가 어긋나므로 목록 규칙은
   :not(--my) 로 좁힌다 - 참여내역 표도 .poll-list__grid 를 함께 달고 있다.
   공통 시스템의 `table.grid td{width:100% !important}` 를 이겨야 해 제목·배지에 !important 가 필요하다. */
@media (max-width: 900px) {
  .poll-list__grid tbody tr:not(.poll-list__empty-row) {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  .poll-list__grid tbody tr:not(.poll-list__empty-row) td {
    height: auto;
  }
  /* No.는 시안 카드에 없다 */
  .poll-list__grid td[data-label='No.'] {
    display: none;
  }
  /* 라벨:값 본문 - 구분선 없이 쌓는다.
     [!] tbody 를 붙이지 않는다 - 붙이면 아래 열별 규칙(.poll-list__grid td[data-label='...'])보다
     특이도가 높아져 그쪽 padding 이 통째로 무시된다(order 만 먹고 여백이 0 이 된다) */
  .poll-list__grid td[data-label] {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  .poll-list__grid td[data-label='마감일'],
  .poll-list__grid td[data-label='참여일'] {
    order: 2;
    padding-bottom: var(--spacing-xs);
  }
  .poll-list__grid td[data-label='대상여부'] {
    order: 3;
    padding-bottom: var(--spacing-xs);
  }
  /* 제목 - 굵게 18px, 상태 배지와 한 줄 */
  .poll-list__grid td[data-label='설문 제목'] {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    padding: var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-text-body);
    text-align: left;
  }
  .poll-list__grid td[data-label='설문 제목']::before {
    content: none;
  }
  .poll-list__grid td[data-label='설문 제목'] > .cell-content,
  .poll-list__grid td[data-label='설문 제목'] a {
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 제목은 링크지만 카드에서는 시안대로 본문색이다(파란 링크색은 표에서만 쓴다) */
  .poll-list__grid td[data-label='설문 제목'] a.poll-list__link {
    color: var(--color-text-body);
  }
  /* 상태 배지 - 제목 오른쪽. 목록은 '응답상태', 참여내역은 '상태' 열이다 */
  .poll-list__grid td[data-label='응답상태'],
  .poll-list__grid td[data-label='상태'] {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  .poll-list__grid td[data-label='응답상태']::before,
  .poll-list__grid td[data-label='상태']::before {
    content: none;
  }
  /* 관리 - 라벨 없이 카드 아래 전폭. 링크는 시안 목록 탭대로 테두리 버튼 모양으로 낸다.
     참여내역의 [제출내용조회]·[설문결과조회]도 같은 모양이며, 둘 다 붙는 경우 폭을 반씩 나눈다
     (.poll-list__actions 가 이미 gap 을 가진 flex 라 flex:1 만 주면 된다).
     데스크톱은 종전 링크 그대로다 - 이 블록은 모바일 카드뷰다. */
  .poll-list__grid td[data-label='관리'] {
    order: 4;
    padding-bottom: var(--spacing-sm);
  }
  .poll-list__grid td[data-label='관리']::before {
    content: none;
  }
  .poll-list__grid td[data-label='관리'] > .cell-content {
    width: 100%;
    justify-content: stretch;
  }
  .poll-list__grid td[data-label='관리'] a.poll-list__link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0%;
    min-width: 0;
    height: 36px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-xs);
    color: var(--color-primary);
    font-size: var(--font-size-14);
    font-weight: 500;
    text-decoration: none;
  }
  /* 라벨:값 텍스트 - 다른 카드뷰 목록과 동일(16px Regular 라벨 #767676) */
  .poll-list__grid tbody td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
}

/* 설문 상세(pollView) · 응답(pollPartiForm) - 퍼블에 없는 조회용 요소 */
.poll-view__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.poll-view__title-row h3.poll-list__heading { margin: 0; }
.poll-view__desc {
  margin: 16px 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-16);
  color: var(--text-700);
  line-height: 1.7;
  white-space: pre-wrap;
}
/* 읽기 전용 값은 입력칸 모양에 넣지 않는다. 라벨을 값 위에 얹은 2단 배치 */
.poll-view__info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin-top: 16px; }
.poll-view__info-item { display: flex; flex-direction: column; gap: 5px; }
.poll-view__info-label { font-size: var(--font-size-14); font-weight: 600; color: var(--text-700); }
.poll-view__info-value { margin: 0; font-size: var(--font-size-16); color: var(--color-gray-900); }
@media (max-width: 744px) {
  .poll-view__info-grid { grid-template-columns: 1fr; }
}

.poll-parti__agree {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.poll-parti__agree .form-error { margin: 6px 0 0; }

/* 임시저장 안내는 버튼줄 바로 위에 우측 정렬로 붙인다(시안의 최종저장일시 표기와 같은 자리) */
.poll-parti__lastsave {
  margin: 16px 0 0;
  text-align: right;
  font-size: var(--font-size-14);
  color: var(--color-gray-600);
}
/* 카드 래퍼를 걷어낸 뒤(2026-08-20)로는 위 블록과 이 소제목을 갈라 주는 여백이 없다 */
h3.poll-parti__subheading { font-size: var(--font-size-18); margin: 28px 0 14px; }

/* 퍼블 FR-COM-007 은 이 규칙들을 id(#mentor-qna-form)로 건다. 그런데 <form:form> 의 id 는
   Spring 이 modelAttribute 이름(wf)으로 쓰고 화면 JS가 $("#wf") 로 폼을 집으므로 id 를 뺏을 수 없다.
   같은 선언을 클래스로 옮겨 둔다 - id(1,0,0) → class(0,1,0)라 특이도는 낮아지지만 경쟁 규칙이 없다. */
.mentor-qna-form .form-row label { font-weight: 400; }
.mentor-qna-form .form-row input:not([type="radio"]):not([type="checkbox"]),
.mentor-qna-form .form-row select,
.mentor-qna-form .form-row textarea { border-color: var(--color-border-default); }
.mentor-qna-form .form-row textarea { height: 120px; }
.mentor-qna-form + .btn-row,
.mentor-qna-form .btn-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding-top: 24px;
}

/* ---------- 설문 문항·응답 표 (PollBean 이 Java 에서 찍는 마크업) ----------
   PollBean.getUsrPartiFormTmplt / getUsrRstViewTmplt 는 문항 하나당
   <div class="table-basic"><table><caption>상세내용</caption><colgroup 20%/auto>…</table></div>
   를 찍는다. JSP 가 아니라 Java 문자열이라 마크업은 건드리지 않고 여기서 표시만 바로잡는다.

   [!] 스코프를 .poll-list 로 좁힌 이유: .table-basic 은 사용자 화면 전역 관례라
   토큰을 :root 에 선언하면 262곳이 한꺼번에 바뀐다. 전역 정리는 별건으로 다룬다. */

/* caption 은 스크린리더용인데 숨기는 규칙이 없어 문항마다 "상세내용"이 가운데 떠 있었다 */
.poll-list .table-basic table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* .table-basic 본체 규칙(width·padding·line-height·테두리)은 web1/css/popup.css 에만 있고
   이 화면은 popup.css 를 싣지 않는다. 그래서 표가 UA 기본값(width:auto / padding:1px)으로
   내용폭만큼만 쭈그러들고, 위 2px 선만 카드 폭으로 뻗어 어긋나 보였다.
   popup.css 를 통째로 싣지 않고(무관한 규칙 250여 줄) 표에 필요한 만큼만 여기서 채운다. */
.poll-list .table-basic {
  border-top: 2px solid var(--color-gray-900, #111);
  margin-bottom: 20px;
}
.poll-list .table-basic table {
  width: 100%;
  line-height: 21px;
}
.poll-list .table-basic table thead th,
.poll-list .table-basic table tbody th {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 12px 10px;
  font-size: var(--font-size-16) !important;
  font-weight: 600;
}
.poll-list .table-basic table tbody td {
  border: 1px solid var(--line);
  padding: 12px 15px;
  font-size: var(--font-size-16) !important;
}

/* 보기 목록 - 스킨의 .input-align3 도 같은 토큰에 기대고 있어 간격만 여기서 잡는다 */
.poll-list .ques-list ul { margin: 0; padding: 0; list-style: none; }
.poll-list .ques-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.poll-list .ques-list li .input-radio,
.poll-list .ques-list li .input-checkbox { display: flex; align-items: center; gap: 6px; }
.poll-list .ques-list li label { cursor: pointer; }

/* 모바일 - colgroup 의 20% 가 인라인 style 이라 셀을 블록으로 풀어 세로로 쌓는다 */
@media (max-width: 744px) {
  .poll-list .table-basic table,
  .poll-list .table-basic table thead,
  .poll-list .table-basic table tbody,
  .poll-list .table-basic table tr,
  .poll-list .table-basic table th,
  .poll-list .table-basic table td {
    display: block;
    width: 100%;
  }
  .poll-list .table-basic table thead th { border-bottom: none; }
  .poll-list .table-basic table thead th:last-child { border-bottom: 1px solid var(--line); }
}

/* ---------- FR-COM-014 설문 응답 - 문항 표를 시안의 "라벨 + 보기 한 줄" 배치로 푼다 ----------
   문항 마크업은 PollBean(Java)이 찍는 <div class="table-basic"><table>… 이라 바꿀 수 없다.
   .survey-response__questions 안에서만 표를 블록으로 풀어 시안의 .survey-response__question 처럼 보이게 한다.
   같은 표를 쓰는 PO04(진단검사)와 이 래퍼 밖의 화면은 위 표 규칙 그대로다.
   선택자에 .poll-list 를 한 번 더 붙인 이유: 위 표 규칙과 클래스 수가 같으면 순서로만 이겨서
   나중에 규칙이 옮겨지면 조용히 뒤집힌다. 클래스 하나를 더 얹어 특이도로 이기게 둔다. */
.poll-list .survey-response__questions .table-basic {
  border-top: none;
  margin-bottom: 0;
}
.poll-list .survey-response__questions .table-basic + .table-basic { margin-top: var(--spacing-2xl); }
.poll-list .survey-response__questions .table-basic table,
.poll-list .survey-response__questions .table-basic thead,
.poll-list .survey-response__questions .table-basic tbody,
.poll-list .survey-response__questions .table-basic tr,
.poll-list .survey-response__questions .table-basic th,
.poll-list .survey-response__questions .table-basic td {
  display: block;
  width: 100%;
}
.poll-list .survey-response__questions .table-basic colgroup { display: none; }

/* 문항번호 th 와 문항명 th 를 시안의 한 줄 라벨(Q1. …)로 붙인다 */
.poll-list .survey-response__questions .table-basic thead tr {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-3xs);
}
.poll-list .survey-response__questions .table-basic table thead th,
.poll-list .survey-response__questions .table-basic table tbody th {
  display: inline-block;
  width: auto;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--font-size-18) !important;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-body);
}
/* 필수 표시는 시안의 .survey-response__required 와 같은 크기·색으로 */
.poll-list .survey-response__questions .table-basic thead th .red {
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-required);
}
.poll-list .survey-response__questions .table-basic table tbody td {
  padding: var(--spacing-xs) 0 0;
  border: none;
}

/* 설명문항(H) - 응답이 아닌 안내문이라 문항 표와 구분되게 박스로 뺀다.
   PollBean 이 H 에만 .table-basic--notice 를 붙인다. 문항명은 Q번호·필수표시 없이 안내문 본문으로 쓴다. */
.poll-list .survey-response__questions .table-basic--notice {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-bg-info-banner, #dfeaff);
  border: 1px solid var(--color-primary-border-light, #abc3fb);
  border-left: 3px solid var(--color-primary, #2d65f2);
  border-radius: var(--radius-sm, 8px);
  padding: var(--spacing-md) var(--spacing-lg);
}
.poll-list .survey-response__questions .table-basic--notice thead th {
  font-size: var(--font-size-15) !important;
  font-weight: 500;
  color: var(--color-text-body);
}

/* 보기 목록 - 시안 .survey-response__options (가로 배치, 최소 높이 44px) */
.poll-list .survey-response__questions .ques-list ul.input-align3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xl);
  min-height: 44px;
}
.poll-list .survey-response__questions .ques-list li { padding: 0; }

/* 서술형 - 시안 .survey-response__textarea */
.poll-list .survey-response__questions .textarea-box textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
  resize: vertical;
}
.poll-list .survey-response__questions .textarea-box__bottom {
  margin-top: var(--spacing-3xs);
  font-size: var(--font-size-13);
  color: var(--color-text-tertiary);
}

/* 시안에 없는 블록(응답자 정보·개인정보 동의·소제목)도 카드 폭을 채우게 한다.
   .survey-response 는 align-items:flex-start 라 그냥 두면 내용 폭만큼만 줄어든다. */
.poll-list .survey-response > * { width: 100%; }
.poll-list .survey-response > .poll-parti__agree { margin-top: 0; }
.poll-list .survey-response > h3.poll-parti__subheading { margin: 0; }

/* 헤더 카드 - 시안은 한 줄 고정(nowrap)이지만 실제 설문명·기간은 길이가 제각각이라 접히게 둔다 */
.poll-list .survey-response__title { white-space: normal; }
.poll-list .survey-response__meta { flex-wrap: wrap; }
.poll-list .survey-response__meta-item,
.poll-list .survey-response__meta-note { white-space: normal; }
/* 설문 소개는 시안에 없다. 헤더 카드 안에 들어가므로 바깥에서 쓰던 구분선을 뗀다 */
.poll-list .survey-response__header .poll-view__desc {
  margin: 0;
  padding: 0;
  border: none;
}

@media (max-width: 744px) {
  .poll-list .survey-response__questions .ques-list ul.input-align3 {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
}

/* =========================================================
   [FR-JOB-002] 일자리공고 등록·수정 (사용처)
   [FR-CR-003] 경력·확장경력 상세 (읽기 전용)
   폼 본문은 insite/jobnotice/jobnoticeForm_include.jsp - 관리자와 같은 파일이라
   마크업(4열 write-basic 표)을 바꿀 수 없다. 스코프를 .jobnotice-form 으로 좁혀
   퍼블 FR-COM-007 폼(라벨 위 / 입력칸 아래 / 한 열)처럼 보이게만 한다.
   관리자 화면은 이 클래스가 없어 종전 표 그대로다.
   ========================================================= */

.jobnotice-form h3.jobnotice-form__heading {
  margin: 0 0 18px;
  font-size: var(--font-size-22);
  font-weight: 600;
  color: var(--color-text-heading);
}

/* 표를 블록으로 풀어 th 는 라벨, td 는 입력칸 줄이 된다.
   colgroup 의 140px 은 <col> 인라인 style 이라 CSS 로 못 이기는데, display:block 이면 무시된다. */
.jobnotice-form .write-basic,
.jobnotice-form .write-basic table,
.jobnotice-form .write-basic tbody,
.jobnotice-form .write-basic tr,
.jobnotice-form .write-basic th,
.jobnotice-form .write-basic td {
  display: block;
  width: 100%;
  border: none;
}
.jobnotice-form .write-basic tr { margin-bottom: 18px; }
.jobnotice-form .write-basic tr:last-child { margin-bottom: 0; }
.jobnotice-form .write-basic th {
  padding: 0 0 6px;
  background: none;
  text-align: left;
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--text-700);
}
.jobnotice-form .write-basic td { padding: 0 0 4px; }

/* 필수 표시 - include 의 <span class="txt-important"> 는 내용이 비어 있어 그대로면 보이지 않는다 */
.jobnotice-form .txt-important { color: var(--red); }
.jobnotice-form .txt-important:empty::before { content: "*"; }

/* 입력칸 - 퍼블 .form-row input 과 같은 치수 */
.jobnotice-form .write-basic input[type="text"],
.jobnotice-form .write-basic select,
.jobnotice-form .write-basic textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-border-default, #d5d9e0);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--font-size-15);
  color: var(--color-gray-900);
  background: var(--surface);
}
.jobnotice-form .write-basic input[type="text"]:focus,
.jobnotice-form .write-basic select:focus,
.jobnotice-form .write-basic textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

/* 체크박스 줄 - 공통 스킨의 li 마커 때문에 들여쓰기된다 */
.jobnotice-form .write-basic .form-list { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.jobnotice-form .write-basic .form-list li { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }

.jobnotice-form .warning-text { margin-top: 8px; font-size: var(--font-size-13); color: var(--text-500); line-height: 1.6; }
.jobnotice-form .warning-text .red { color: var(--red); }

/* 달력 두 칸은 include 가 jn-cal 로 폭을 잡아 둔다. 여기서는 한 줄 유지만 거든다 */
.jobnotice-form .write-basic .search-input-calendar { display: inline-flex; align-items: center; }
.jobnotice-form .write-basic .search-space { margin: 0 6px; }

.jobnotice-form__delete { color: var(--red); border-color: var(--red); }

/* 달력 두 칸 - include 가 .jn-cal 에 width:150px !important 를 걸어 두었다(관리자 스킨의 겹침 배치 때문).
   사용자 화면에서는 다른 입력칸이 100% 라 150px 이 유독 좁아 보인다. 이 화면에서만 넓힌다.
   !important 끼리는 특이도로 갈리므로 이쪽도 !important 가 필요하다. */
.jobnotice-form .write-basic td:has(.search-input-calendar) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.jobnotice-form .write-basic .search-input-calendar.jn-cal {
  width: 220px !important;
  flex: 0 1 220px;
}
.jobnotice-form .write-basic .search-space { margin: 0; }

/* 체크박스 라벨은 퍼블 폼과 같이 보통 굵기로 둔다(스킨은 굵게 그린다) */
.jobnotice-form .write-basic .form-list label { font-weight: 400; }

@media (max-width: 744px) {
  .jobnotice-form .write-basic .search-input-calendar.jn-cal {
    width: 100% !important;
    flex: 1 1 100%;
  }
  /* 두 칸이 세로로 쌓이면 물결표가 줄 사이에 홀로 남는다. 가운데로 보낸다 */
  .jobnotice-form .write-basic .search-space { flex: 1 1 100%; text-align: center; }
}

/* 달력칸 치수 - 스킨 main.css(.search-input-calendar {height:42px; border; 달력 아이콘})가
   퍼블 시트에 밀려 적용되지 않아, 컨테이너는 높이 20px 에 테두리가 없고 아이콘은 0x0 이 된다.
   거기에 include 가 인풋에 padding:0 4px !important 를 걸어 세로 여백까지 0 이라 유독 얇게 보인다.
   이 화면에서 다른 입력칸(높이 40px)과 같아지도록 직접 세운다. */
.jobnotice-form .write-basic .search-input-calendar.jn-cal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px !important;
  box-sizing: border-box;
  border: 1px solid var(--color-border-default, #dadfe6);
  border-radius: 6px;
  background: var(--surface);
}
.jobnotice-form .write-basic .search-input-calendar.jn-cal input[type="text"] {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  height: 100%;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-size: var(--font-size-15) !important;
  outline: none;
}
.jobnotice-form .write-basic .search-input-calendar.jn-cal button {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: none;
  background: url("/files/web1/images/common/ico_calendar.png") no-repeat center / 20px 20px;
  cursor: pointer;
}

/* =========================================================
   [FR-CR-003 / FR-CR-006] 경력·확장경력 상세 (읽기 전용)
   퍼블에는 조회 전용 폼이 없다. 등록 화면(form-grid/form-row)의 배치를 그대로 쓰되
   값 칸만 입력칸과 구분되게 둔다 - 입력칸 모양이면 고칠 수 있는 것처럼 읽힌다.
   ========================================================= */

.detail-view h3.detail-view__heading {
  margin: 0;
  font-size: var(--font-size-22);
  font-weight: 600;
  color: var(--color-text-heading);
}
.detail-view__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.detail-view__value {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: var(--font-size-15);
  background: var(--bg);
  color: var(--color-gray-900);
  min-height: 40px;
  box-sizing: border-box;
}
.detail-view__value--multiline { white-space: pre-wrap; word-break: break-all; }

.detail-view__files { margin: 0; padding: 0; list-style: none; }
.detail-view__files li {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  font-size: var(--font-size-15);
}
.detail-view__files li + li { margin-top: 6px; }
.detail-view__files a { color: var(--blue-600); }
.detail-view__files a:hover { text-decoration: underline; }
.detail-view__files-empty { color: var(--text-500); }

/* =========================================================
   CH-01 증명서 발급이력
   ========================================================= */

/* 퍼블 .filterbar .form-row 는 flex:1 0 0 이라 조건이 하나뿐인 이 화면에서는 셀렉트가 바 전체로 늘어난다.
   조건이 둘 이상인 careerList 와 같은 칸 폭으로 묶는다.
   ⚠ 745px 이상에서만 건다 - 퍼블은 744px 이하에서 .filterbar 를 flex-direction:column 으로 세우고,
   그 순간 flex-basis 는 가로폭이 아니라 세로높이가 된다. 미디어쿼리 없이 걸면 필터바가 260px 높이로 부푼다. */
@media (min-width: 745px) {
  .cert-hist-list__filterbar .form-row {
    flex: 0 1 260px;
  }
}

/* 이 화면의 버튼은 전부 <a> 다(마크업을 그대로 두고 클래스만 퍼블로 바꿨다).
   퍼블 .btn 은 <button> 을 전제해 링크 색·밑줄을 끊지 않으므로 여기서 끊는다 */
.cert-hist-list__filterbar .btn,
.cert-hist-list__grid .btn {
  text-decoration: none;
}
/* 표 안 버튼 치수는 .career-list__grid .btn-outline 와 같게 맞춘다 */
.cert-hist-list__grid .btn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-14);
  font-weight: 500;
  vertical-align: middle;
}
.cert-hist-list__grid .btn-outline {
  border-width: 1px;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.cert-hist-list__grid .btn-primary {
  color: var(--color-white);
}
/* inCertPdf.js 가 캡처 중 중복클릭을 막으려 이 클래스를 붙였다 뗀다.
   certIssueForm 은 자체 .cr-btn-primary.cr-disabled 규칙을 갖지만 이 화면은 퍼블 .btn 을 쓰므로
   여기서 세운다. 이 규칙이 없으면 클래스만 붙고 클릭은 계속 먹혀 캡처 중 재요청이 들어간다 */
.cert-hist-list__grid .btn.cr-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* 퍼블 .empty-state 를 그대로 쓰되, 표 안(td)에 들어가므로 셀 여백을 걷어낸다 */
.cert-hist-list__grid td.cert-hist-list__empty-cell {
  height: auto;
  padding: 16px 0;
}
.cert-hist-list__empty-actions {
  margin-top: 14px;
}

/* 액션 열 폭이 행마다 흔들리지 않게 한다.
   900px 이하는 퍼블이 표를 카드로 접어 td 가 세로로 쌓이므로 걸지 않는다 */
@media (min-width: 901px) {
  /* 액션 4개([미리보기]/[PDF 재다운로드]/[재발급]/[진위확인])를 2개씩 두 줄로 접는다.
     한 줄로 세우면 액션 열이 390px 를 가져가 발급일·유효기간이 "2026-08- / 25" 로 꺾였다.
     .cell-content 는 퍼블 design.js 가 라벨을 뺀 나머지를 감쌀 때 생긴다 - 이 화면은 목록을
     ajax 로 나중에 그려 데스크톱에서는 대개 없지만, 생기는 경우까지 같이 잡는다 */
  .cert-hist-list__grid td.ch-actions,
  .cert-hist-list__grid td.ch-actions > .cell-content {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    column-gap: 6px;
    row-gap: 6px;
  }
  /* 퍼블 table.grid td{height:52px} 는 한 줄 기준이라 두 줄(32+6+32=70px)이 위아래로 삐져나온다 */
  .cert-hist-list__grid td.ch-actions {
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* 두 줄 기준 폭이다 - 첫 줄([미리보기]+[PDF 재다운로드]) 이 들어가고 넷이 다 서지는 못하는 값이라야
     2+2 로 접힌다. 버튼을 늘리거나 줄이면 이 값도 함께 본다 */
  .cert-hist-list__grid th:last-child,
  .cert-hist-list__grid td:last-child {
    width: 250px;
  }
  /* 액션 열에서 돌려받은 폭을 날짜 두 열이 한 줄로 쓰게 한다 */
  .cert-hist-list__grid th:nth-child(2),
  .cert-hist-list__grid td:nth-child(2),
  .cert-hist-list__grid th:nth-child(4),
  .cert-hist-list__grid td:nth-child(4) {
    width: 120px;
    white-space: nowrap;
  }
}

/* 900px 이하 카드뷰 - 확장경력 목록(career-ext-list__grid)과 같은 카드 구성이다.
   시안 FR-CT-003 은 이 화면의 모바일 시안을 따로 두지 않아(표 클래스도 없는 table.grid),
   같은 사이트 안의 다른 목록 카드에 맞춘다: 머리줄에 증명서유형 + 상태 배지, 그 아래 라벨:값.
   탭이 없어 열 위치는 고정이지만, 여기도 td 의 data-label 로 골라 열 순서 변경에 덜 민감하게 둔다.
   미리보기 행(.ch-preview-row)은 카드가 아니라 카드 아래 펼쳐지는 칸이라 제외한다. */
@media (max-width: 900px) {
  .cert-hist-list__grid tbody tr:not(.ch-preview-row) {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  .cert-hist-list__grid tbody tr:not(.ch-preview-row) td {
    height: auto;
  }
  /* No.는 카드에 두지 않는다 */
  .cert-hist-list__grid td[data-label='No'] {
    display: none;
  }
  /* 라벨:값 행 - 구분선 없이 쌓는다. 머리줄은 아래에서 다시 잡는다 */
  .cert-hist-list__grid td[data-label] {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  .cert-hist-list__grid td[data-label='발급일'] {
    padding-top: var(--spacing-xs);
  }
  /* 제목(증명서유형) - 굵게 18px, 상태 배지와 한 줄 */
  .cert-hist-list__grid td[data-label='증명서유형'] {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    padding: var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  .cert-hist-list__grid td[data-label='증명서유형']::before {
    content: none;
  }
  .cert-hist-list__grid td[data-label='증명서유형'] > .cell-content {
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 상태 배지 - 제목 오른쪽 */
  .cert-hist-list__grid td[data-label='상태'] {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  .cert-hist-list__grid td[data-label='상태']::before {
    content: none;
  }
  /* 액션 - 라벨 없이 전폭 칸. 버튼이 넷이라 한 줄에 서지 못하므로 접히게 두고 왼쪽에 붙인다.
     [!] 퍼블 table.grid td{height:52px} 를 그대로 두면 두 줄(32+6+32=70px)이 칸 밖으로 삐져나온다.
     .cell-content 는 퍼블 design.js 가 라벨을 뺀 나머지를 감쌀 때 생긴다(없으면 이 규칙은 무시된다) */
  .cert-hist-list__grid td.ch-actions,
  .cert-hist-list__grid td.ch-actions > .cell-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 6px;
    row-gap: 6px;
  }
  .cert-hist-list__grid td.ch-actions {
    order: 6;
    width: 100%;
    height: auto;
    border-bottom: none;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
  }
  .cert-hist-list__grid td.ch-actions::before {
    content: none;
  }
  .cert-hist-list__grid td.ch-actions > .cell-content {
    width: 100%;
  }
}

/* CH-03 행별 미리보기 - 그 행의 임시 PDF(blob)를 펼치는 칸.
   렌더는 브라우저 내장 PDF 뷰어가 한다(careerJudgeForm 의 증빙 뷰어와 같은 구조).
   .ch-preview-stage 는 slideDown/Up 대상이라 overflow 를 감춰 둔다 */
.cert-hist-list__grid td.ch-preview-cell:last-child {
  width: auto;
  height: auto;
  padding: 0;
  background: var(--color-bg-subtle, #f5f6f9);
}
.ch-preview-stage {
  display: none;
  overflow: hidden;
  padding: 16px;
}
/* A4 세로 비율에 맞춘 높이다. 뷰어 자체가 축소·스크롤을 갖고 있어 문서가 잘려 보이지는 않는다.
   .ct-preview-frame 을 재사용하지 않는다 - 그쪽은 min-width:740px 이라 카드뷰에서 표를 밀어낸다 */
.ch-preview-frame {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
  background: var(--color-white, #fff);
}
@media (max-width: 900px) {
  .ch-preview-frame {
    height: 70vh;
  }
}

/* 900px 이하 카드뷰: 퍼블이 td 를 '라벨 | 값' 2단 flex 로 세우고 design.js 가 내용을 .cell-content 로
   감싸 오른쪽에 붙인다. 이 칸은 라벨 없는 전폭 칸이라 그 두 가지를 모두 푼다 */
@media (max-width: 900px) {
  .cert-hist-list__grid td.ch-preview-cell {
    display: block;
    padding: 0;
  }
  .cert-hist-list__grid td.ch-preview-cell > .cell-content {
    display: block;
    text-align: left;
  }
}

/* =========================================================
   FR-CR-004 외부연동 현황 (동의 목록)
   ========================================================= */

/* 퍼블 .page-desc 는 아래 여백이 없다(제목 바로 밑에 붙는 용도). 여기서는 표 위 안내문이라 띄운다 */
.consent-list__desc {
  margin: 0 0 16px;
}
/* No. 칸은 careerList 의 번호 칸과 같은 처리 */
.consent-list__grid th:first-child,
.consent-list__grid td:first-child {
  text-align: center;
  color: var(--text-500);
}
/* [상세보기]는 표 안 버튼이라 .cert-hist-list__grid .btn 과 같은 치수로 맞춘다 */
.consent-list__grid .btn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  border-width: 1px;
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-size: var(--font-size-14);
  font-weight: 500;
}
/* colgroup 을 걷어낸 자리. 900px 이하는 퍼블이 카드로 접으며 th/td 를 100% 로 되돌리므로 걸지 않는다 */
@media (min-width: 901px) {
  .consent-list__grid th:first-child,
  .consent-list__grid td:first-child {
    width: 72px;
  }
  .consent-list__grid th:nth-child(3),
  .consent-list__grid td:nth-child(3),
  .consent-list__grid th:nth-child(4),
  .consent-list__grid td:nth-child(4) {
    width: 160px;
    white-space: nowrap;
  }
  .consent-list__grid th:last-child,
  .consent-list__grid td:last-child {
    width: 120px;
  }
}


/* =========================================================
   [FR-CT-001] 증명서 발급 신청
   퍼블은 1·2·3단계가 각각 별도 페이지(HTML 3장)다. 구현은 한 화면 안에서 패널을 갈아끼우므로
   그 전환과, 퍼블에 없는 요소(발급 요약 카드 · 인라인 양식 미리보기)만 여기서 보강한다.
   표·버튼·배지·안내박스·단계표시는 전부 퍼블 원본 규칙을 그대로 쓴다.
   ========================================================= */
/* ---------- 단계 전환 ---------- */
/* 전환은 오직 이 클래스 토글이다(CI-03). 노드 detach/append 를 쓰지 않으므로 감춰진 패널의
   체크·라디오 값이 DOM 에 그대로 남아 [이전]/[다음] 왕복에서 브라우저 기본 동작만으로 복원된다. */
.ct-step-panel {
  display: none;
}
.ct-step-panel.ct-on {
  display: block;
}

/* ---------- 1단계 표 ---------- */
/* 안내박스가 STEP 헤더와 표 사이에 끼는 경우(재발급 프리필 제외 안내)에도 표의 상단 간격을 유지한다.
   퍼블 원본에는 `.timeline + .card-head + .table-wrap` 만 있어 이 배치에서 간격이 사라진다. */
.timeline + .card-head + .alert-box + .table-wrap {
  margin-top: var(--spacing-xl);
}
/* 선택 불가 행. opacity 를 쓰지 않는다 - 배지 색까지 흐려져 상태 판독이 어려워진다. */
.cert-issue__row-disabled td {
  color: var(--color-text-disabled);
  background: var(--color-bg-subtle, #f5f6f9);
}
.cert-issue__grid tbody tr.cert-issue__row-disabled:hover td {
  background: var(--color-bg-subtle, #f5f6f9);
}
/* 행 아무 데나 눌러도 선택된다(certIssueForm.jsp 행 클릭 핸들러). 손가락 커서로 그 사실을 알린다 -
   선택 불가 행은 토글되지 않으므로 제외한다. */
.cert-issue__grid tbody tr:not(.cert-issue__row-disabled) {
  cursor: pointer;
}
/* 표 바로 뒤에 오는 안내(선택 가능한 항목 0건 등) */
.table-wrap + .empty-state {
  margin-top: var(--spacing-lg);
}

/* ---------- 1단계 표 모바일 카드뷰 (FR-COM-002 나의 상담이력과 동일한 형태) ---------- */
/* 이 표는 페이지 스코프 클래스가 없어 공통 카드 시스템만 적용됐다 — 그 결과 셀마다 52px 높이가
   그대로 남고, 모든 셀이 '라벨 ...... 값' 구분선 행으로 쌓여 상담이력 카드와 형태가 달랐다.
   HTML(태그/클래스)은 그대로 두고 `main.cert-apply-step` 스코프로만 잡아
   counsel-history__grid와 같은 카드(제목+배지 한 줄 → 라벨:값 본문)로 맞춘다. */
@media (max-width: 900px) {
  main.cert-apply-step table.grid:not(.cert-issue__grid) tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td {
    height: auto;
  }
  /* 체크박스: 카드 좌측 상단, 라벨(빈 th에서 온 빈 data-label) 제거 */
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(1) {
    order: -3;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(1)::before {
    content: none;
  }
  /* 경력명: 카드 제목 — 굵게 18px, 1줄+말줄임, 배지와 한 줄 */
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(2) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-text-body);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(2)::before {
    content: none;
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(2) > .cell-content {
    display: block;
    flex: 1 1 0%;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 승인여부 배지: 제목 오른쪽 */
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(4) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(4)::before {
    content: none;
  }
  /* 근무기간·등급: 구분선 없는 라벨:값 본문 그룹 */
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(3),
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(5) {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(3) {
    order: 2;
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(5) {
    order: 3;
    padding-bottom: var(--spacing-sm);
  }
  /* 라벨:값 텍스트 — 다른 카드뷰 목록과 동일(16px Regular 라벨 #767676) */
  main.cert-apply-step table.grid:not(.cert-issue__grid) td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
}

/* ---------- 2·3단계 선택 표 모바일 카드뷰 ---------- */
/* 위 1단계 규칙은 시안 파일(클래스 없는 table.grid)만 잡는다 - 실화면 표는 .cert-issue__grid 라
   `:not()` 에 걸려 카드가 되지 않고 체크박스만 덩그러니 놓인 라벨:값 목록으로 남아 있었다.
   시안 1단계 카드와 같은 형태(체크박스+제목+배지 한 줄 → 라벨:값 본문)로 맞춘다.
   열 위치는 시안(5열)과 달라 규칙을 합치지 않는다 - 실화면은 2번째가 제목, 배지는 2단계에만 있다.
   .cell-content 는 퍼블 design.js 가 라벨을 뺀 나머지를 감싸며 만든다(data-label 도 같이 붙인다). */
@media (max-width: 900px) {
  main.cert-apply-step table.cert-issue__grid tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 카드 전체가 선택 대상이다(certIssueForm.jsp 의 행 클릭 토글) */
    cursor: pointer;
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0 0 var(--spacing-sm);
  }
  main.cert-apply-step table.cert-issue__grid tbody td {
    height: auto;
  }
  /* 라벨:값 본문 - 구분선 없이 쌓는다. 카드 머리(체크박스·제목·배지)는 아래에서 다시 잡는다 */
  main.cert-apply-step table.cert-issue__grid tbody td[data-label] {
    border-bottom: none;
    padding: var(--spacing-2xs) var(--spacing-sm);
  }
  /* 체크박스 - 제목 왼쪽. 빈 th 에서 온 라벨이 없어 ::before 도 없다 */
  main.cert-apply-step table.cert-issue__grid tbody td:first-child {
    order: -3;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
  }
  /* 제목(근무처·종목 및 등급·교육ᆞ훈련명·학교명) - 네 표 모두 2번째 열이다 */
  main.cert-apply-step table.cert-issue__grid tbody td:nth-child(2) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-text-body);
    text-align: left;
  }
  main.cert-apply-step table.cert-issue__grid tbody td:nth-child(2)::before {
    content: none;
  }
  main.cert-apply-step table.cert-issue__grid tbody td:nth-child(2) > .cell-content {
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 인증여부 배지 - 제목 오른쪽. 2단계 표에만 있다(3단계 세 표는 마지막 열도 일반 값이다) */
  #ctStep2 table.cert-issue__grid tbody td:nth-child(6) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  #ctStep2 table.cert-issue__grid tbody td:nth-child(6)::before {
    content: none;
  }
  /* 라벨:값 텍스트 - 다른 카드뷰 목록과 동일(16px Regular 라벨 #767676) */
  main.cert-apply-step table.cert-issue__grid tbody td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
}

/* ---------- 3단계 발급 요약 카드 ---------- */
/* 퍼블 3단계는 미리보기 문서(.preview-doc) 한 장뿐이라 이 카드가 없다. 맞춤형 사용처 N곳이면
   발급 건수만큼 카드가 생기고, 발급 성공 후 카드마다 [PDF 다운로드]와 '발급 완료' 배지가 꽂힌다. */
.cert-issue__summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm, 10px);
  margin-top: var(--spacing-xl);
}
.cert-issue__summary-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm, 10px);
  padding: 14px 18px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md, 12px);
  background: var(--color-white, #fff);
}
.cert-issue__summary-card p {
  margin: 0;
  font-size: var(--font-size-15);
  color: var(--color-text-body);
}
.cert-issue__summary-card p strong {
  font-weight: 600;
}
/* 발급 완료 후 잠기는 [발급하기]·[이전]의 .btn.is-disabled 는
   2026-08-24 퍼블 CSS(mockup.css Buttons 섹션)로 옮겼다. */

/* ---------- 3단계 인라인 양식 미리보기 ---------- */
/* .ct-preview-scroll 의 overflow-x 는 필수다. 조각이 A4 폭 194mm(약 733px) 고정이라
   화면/카드 폭이 그보다 좁으면 iframe 내부가 잘린다 - 스크롤 컨테이너가 그 잘림을 대신 받는다.
   iframe 높이는 로드 후 ctFitTmplFrame() 이 내용 높이로 맞춘다(여기 값은 로드 전 임시 높이다). */
.ct-preview-box {
  margin-top: var(--spacing-xl);
}
/* AI-GENERATED: 2026-08-24 [PDF로 미리보기] 버튼을 제목 옆에 두는 헤더 행 */
.cert-issue__preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm, 10px);
  margin-bottom: var(--spacing-sm, 10px);
}
.cert-issue__preview-head .cert-issue__preview-title {
  margin-bottom: 0;
}
.cert-issue__preview-title {
  margin: 0 0 var(--spacing-sm, 10px);
  font-size: var(--font-size-17);
  font-weight: 600;
  color: var(--color-text-heading);
}
.ct-preview-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 8px);
  margin-bottom: var(--spacing-sm, 10px);
}
.ct-preview-tab {
  padding: 7px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-white, #fff);
  font-size: var(--font-size-14);
  font-weight: 400;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.ct-preview-tab.ct-on {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  font-weight: 600;
  color: var(--color-primary);
}
.ct-preview-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md, 12px);
  background: var(--color-white, #fff);
}
.ct-preview-frame {
  display: block;
  width: 100%;
  min-width: 740px;
  height: 600px;
  border: 0;
  background: var(--color-white, #fff);
}

/* ---------- 단계 표시(timeline) 레거시 제거 ---------- */
/* 데코레이터가 kwmf-mockup.css 를 계속 싣는데(toast/popup 때문), 거기 남은 옛 timeline 은
   단계를 '박스 3칸'으로 그린다. 퍼블은 원 3개 + 커넥터 선이라 mockup.css 가 .timeline .step 을
   전부 다시 선언했지만, .done/.current 는 color 만 다시 선언해서 옛 background·font-weight 가
   속성 단위로 살아남는다(2026-08-21 실측: 현재 단계 뒤에 파란 네모가 그대로 남았다).
   같은 특이도라 이 파일이 뒤에 실려 이긴다 - 옛 파일을 고치지 않는다. */
.timeline .step.done,
.timeline .step.current {
  background: none;
  border: none;
  font-weight: 500;
}
/* 옛 규칙이 칸 사이에 그리던 세로 구분선. 퍼블 커넥터는 ::before 라 이건 잔재다. */
.timeline .step:not(:last-child)::after {
  content: none;
}

/* ---------- 1단계 담당업무 열 ---------- */
/* 담당업무(계약내용)는 주관식이라 길면 칸을 넓혀 표 전체를 밀어낸다. 한 줄로 자르고 넘치면 ...으로 끝낸다.
   td 에 max-width 를 걸면 표가 auto 레이아웃이라 무시되므로 셀 자체에 걸고 block 으로 만든다
   (careerList 는 안쪽 span 에 걸었는데, 여기는 값이 텍스트 노드라 감쌀 span 이 없다). */
.cert-issue__grid td.cert-issue__ellipsis {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .cert-issue__grid td.cert-issue__ellipsis {
    max-width: none;
    white-space: normal;
  }
}
/* ---------- 2단계 확장경력 카드 ---------- */
/* 카드 안에 표가 들어간다. 퍼블 .card 는 본문 여백이 없어 hint 와 표가 붙는다. */
.ct-step-panel .card .hint + .table-wrap {
  margin-top: 12px;
}
.ct-step-panel .card .empty-state {
  margin-top: 12px;
}

/* =========================================================
   [FR-MY-002] 내정보관리
   ========================================================= */
/* 퍼블 원본(mockup.css)은 이 화면의 배치를 #tabset1-0(시안 탭 패널 id)에 걸고,
   `.form-grid > .form-row`를 :nth-child(1)~(6)으로 짚어 grid-row 를 하나씩 고정한다.
   이 화면에는 시안에 없는 항목(생년월일·성별·NCS·세부업무·주소·지역)이 더 있어
   그 :nth-child 고정을 그대로 쓸 수 없다 - 7번째부터는 자리가 없고 .form-row.full 이 전부
   같은 행에 겹친다. 그래서 #tabset1-0 은 쓰지 않는다.

   대신 원본의 **구조**는 그대로 따른다: 섹션을 2열 그리드로 잡고 .form-grid 를 display:contents 로
   풀어 각 .form-row 를 섹션 그리드에 직접 배치한다. 다른 점은 자리를 :nth-child 로 못 박지 않고
   프로필 사진(우측 상단)만 명시 배치한 뒤 나머지는 자동배치에 맡기는 것뿐이다 -
   그래야 항목이 늘거나 줄어도 배치가 깨지지 않는다.
   컴포넌트 자체(.form-grid/.form-row/.upload-box/.toggle-switch/.modal-*)는 원본 그대로 쓴다. */
.my-info > form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: var(--spacing-xl);
  align-content: start;
}
.my-info .form-grid {
  display: contents;
}
/* 행 간격은 그리드 row-gap 이 준다. 퍼블 .form-row 의 margin-bottom 이 남으면 두 번 벌어진다. */
.my-info .form-row {
  margin-bottom: 0;
}
/* 폼 폭 전체를 쓰는 것들 - 자동배치가 남은 칸에 끼워 넣지 않도록 한 줄을 통째로 차지시킨다.
   .section-title 은 사용처 나의 정보(CO-MBR-001)가 기업정보/담당자 정보를 나누는 데 쓴다 -
   빼놓으면 좌측 칸 하나만 차지해 바로 뒤 입력 항목이 우측 칸으로 밀린다(2026-08-27 실측, 1296px 이상). */
.my-info > form > .section-title,
.my-info > form > .my-info__withdraw-link,
.my-info > form > .btn-row {
  grid-column: 1 / -1;
}

/* 입력줄: 인풋 + 옆 버튼 */
.my-info .form-row__control {
  width: 100%;
  min-height: 44px;
  gap: var(--spacing-xs, 8px);
}
.my-info .form-row__control > input:not([type="radio"]):not([type="checkbox"]) {
  flex: 1 0 0;
  min-width: 40px;
}
.my-info .form-row__control > .btn.btn-sm {
  height: 44px;
  padding: 0 20px;
  font-size: var(--font-size-15);
  font-weight: 600;
  border-radius: var(--radius-xs);
  flex: none;
}
/* 퍼블은 :disabled 만 회색으로 눌러 준다. 이름·생년월일·성별·연락처는 본인인증으로만 갱신되는
   readonly 항목이라 "여기는 못 고친다"가 눈으로 구분돼야 한다. */
.my-info .form-row input[readonly] {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  cursor: default;
}

/* 프로필 사진 - 시안과 같이 우측 컬럼 상단에 140px 폭으로 두 줄을 차지한다.
   이 화면에서 자리를 명시하는 유일한 항목이다. 나머지 입력 항목은 이 블록을 피해 자동배치된다. */
.my-info > form > .profile-photo-row {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
}
.my-info .profile-photo-row__field .form-row {
  margin-bottom: 0;
}
.my-info .profile-photo-row__field .form-row__control {
  justify-content: center;
  min-height: 0;
}
/* 용량·확장자 안내는 시안에 없는 항목이다. 140px 컬럼 안에서 두 줄로 접히므로 가운데로 맞춘다. */
.my-info .profile-photo-row__field .form-hint {
  text-align: center;
}
/* 원본 .profile-photo-row__placeholder-icon 은 시안의 실루엣 SVG 를 상자 밖으로 흘려보내는
   절대배치다. 여기 들어가는 건 회원이 올린 실제 사진이라 상자에 맞춰 채운다. */
.my-info .profile-photo-row__placeholder-icon {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 선택한 파일명이 들어가는 자리(inUtilFile.js checkProfileImg 가 채운다) */
.my-info .profile-photo-row__field .file_list {
  margin: var(--spacing-2xs, 6px) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
  text-align: center;
  word-break: break-all;
}

/* 인재풀 등록 여부 카드 (시안: bg #eaf0fe / padding 24 32 / radius 8) */
.my-info .my-info__talentpool {
  background: var(--color-primary-bg);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl) var(--spacing-2xl);
  gap: var(--spacing-md, 12px);
}
/* 인재풀 동의 원문 박스 - 토글을 Y로 올렸을 때만 펼친다 */
.my-info__consent {
  display: none;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--color-white, #fff);
}
.my-info__consent-title {
  margin-bottom: 8px;
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--color-text-heading);
}
.my-info__consent table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: var(--font-size-13);
  color: var(--color-text-body);
}
.my-info__consent td {
  padding: 4px 8px 4px 0;
  vertical-align: top;
}
.my-info__consent td.my-info__consent-key {
  width: 120px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.my-info__consent-desc {
  margin-bottom: 10px;
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
}
.my-info__consent label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--color-text-heading);
  cursor: pointer;
}

/* 직종 4단 연동 + 선택칩 - 퍼블에 대응 컴포넌트가 없다(joinForm3 의 jf-jobtype-* 와 같은 구성).
   .jobtype-cascade(공용 섹션)는 4칸 그리드라 [추가] 버튼과 한 줄로 세우려면 감싸는 줄이 필요하다. */
.my-info__jobtype-picker {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* 셀렉트가 1fr 로 늘어나면 4칸이 줄을 다 먹어 [추가] 가 다음 줄로 밀린다.
   칸 폭을 세분류명이 들어가는 선(180px)에서 끊어 버튼 자리를 남긴다. */
.my-info__jobtype-picker .jobtype-cascade {
  flex: 0 1 auto;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 180px));
  gap: 6px;
}
.my-info__jobtype-picker .jobtype-cascade select {
  padding-left: 8px;
  padding-right: 8px;
}
/* 2단으로 접히는 폭에서는 버튼을 다음 줄로 내려보낸다 */
@media (max-width: 900px) {
  .my-info__jobtype-picker .jobtype-cascade {
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.my-info__jobtype-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.my-info__jobtype-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-primary-bg);
  font-size: var(--font-size-13);
  color: var(--color-primary);
}
/* 스킨 전역 button{line-height:0} 이 &times; 를 아래로 민다. flex 정렬로 의존을 끊는다. */
.my-info__jobtype-chips button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white, #fff);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

/* 회원탈퇴 링크 - 시안은 모달이지만 이 프로젝트는 LNB 에 별도 메뉴가 있어 withdraw 화면으로 보낸다 */
.my-info .my-info__withdraw-link {
  margin-top: var(--spacing-md, 12px);
}

/* 태블릿/모바일: 2열 그리드를 세로 한 줄로 편다. 퍼블 원본과 같은 1295px 기준이다.
   grid 로 둔 채 미디어쿼리를 쓰면 프로필 사진의 grid-column/grid-row 가 그대로 남아 우측에 붙는다 -
   flex 컨테이너에서는 그 값들이 무시되므로 한 번에 정리된다(원본이 같은 이유로 flex 로 바꾼다). */
@media (max-width: 1295px) {
  .my-info > form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xl);
  }
  /* 사진 → 입력 항목 → 회원탈퇴 → 버튼. DOM 순서가 이미 그대로라 order 는 필요 없다. */
  .my-info > form > .profile-photo-row {
    align-self: flex-start;
  }
}

/* =========================================================
   [FR-CS-005 / FR-COM-010] 공지사항 상세 · 자료실 상세
   ========================================================= */
/* 두 화면은 시안이 같은 .notice-detail 컴포넌트를 쓴다(design.css). 여기 있는 건
   시안이 다루지 않은 실제 데이터 사정 세 가지뿐이다. */

/* ① 첨부는 시안이 한 건만 그린다. 두 게시판 모두 여러 건이 올라온다. */
.notice-detail__attachments {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 8px);
}
/* ② 시안 첨부 상자는 표시만 한다. 실제로는 눌러서 받아야 하므로 a 로 만든다. */
a.notice-detail__attachment {
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
a.notice-detail__attachment:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}
a.notice-detail__attachment:hover .notice-detail__attachment-name {
  color: var(--color-primary);
}
/* 퍼블은 파일명에 white-space:nowrap 만 걸어 둬서 긴 이름이 상자 밖으로 흘러나간다 */
.notice-detail__attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ③ 본문은 CKEditor 산출물이라 자체 font-size 를 달고 온다. 퍼블 __body 값(16px/1.5)으로 맞춘다
   (board-skin.css 가 `.card .ck-content *` 로 하던 일을 새 컨테이너 기준으로 다시 건다). */
.notice-detail__body .ck-content,
.notice-detail__body .ck-content * {
  font-size: inherit;
}
.notice-detail__body .ck-content img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   [FR-JOB-004] 일자리공고 상세
   ========================================================= */
/* 시안이 공지사항 상세와 같은 .notice-detail 컴포넌트를 쓴다(design.css).
   여기 있는 건 시안이 다루지 않은 이 화면만의 사정 두 가지다.
   첨부(다건·다운로드 상자)는 위 [FR-CS-005 / FR-COM-010] 보강분을 그대로 공유한다. */

/* ① 배지가 세 상태다. 퍼블 .notice-detail__badge 는 마감(빨강) 한 벌뿐이라
   나머지 둘만 색을 덮는다 - 치수·라운드는 원본 값을 그대로 쓴다.
   값은 목록(.jobnotice__badge-open / .badge-blue)과 같은 뜻으로 맞춘다. */
.notice-detail__badge--open {
  background: var(--color-white);
  border: 1px solid var(--color-status-warning);
  color: var(--color-status-warning);
}
.notice-detail__badge--ing {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
/* AI-GENERATED: 2026-08-27 마감임박. 배지가 넷이 됐다 - 목록의 .badge-amber 와 같은 값을 쓴다. */
.notice-detail__badge--imminent {
  background: var(--amber-bg);
  color: var(--amber);
}

/* ② 모집 상세 정보(근무형태·급여·근무기간 …). 관리자·사용처가 직접 등록한 공고에만 값이 있다.
   시안에는 이 블록이 없어 퍼블에 대응 컴포넌트가 없다 - 퍼블 토큰으로만 짠다.
   .notice-detail 이 gap:2xl 로 자식을 벌리므로 여기서 바깥 여백을 따로 주지 않는다. */
.notice-detail__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-sm) var(--spacing-xl);
  width: 100%;
  margin: 0;
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}
.notice-detail__info-item {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  min-width: 0;
}
.notice-detail__info-item dt {
  flex: 0 0 88px;
  margin: 0;
  font-size: var(--font-size-14);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}
.notice-detail__info-item dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-15);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
  word-break: break-all;
}

@media (max-width: 744px) {
  .notice-detail__info {
    grid-template-columns: 1fr;
    padding: var(--spacing-md);
  }
}

/* 본문이 비어 있을 때의 안내 문구. 퍼블 __body 는 본문 글자색만 가지고 있어 안내와 본문이 구분되지 않는다 */
.notice-detail__empty {
  color: var(--color-text-tertiary);
}

/* 설문 응답 화면의 [임시저장]을 [제출] 바로 옆에 붙인다.
   퍼블의 .btn-row:has(.btn-row__back) 은 space-between 이라 버튼이 셋이면 가운데 버튼이
   [목록]과 [제출] 사이로 밀려난다 - [목록]만 왼쪽에 고정하고 나머지는 오른쪽에 모은다.
   같은 main.poll-list 를 쓰는 설문 상세는 배치를 건드리지 않도록 :has() 로 응답 화면만 고른다. */
main.poll-list:has(.survey-response) .btn-row {
  justify-content: flex-end;
}
main.poll-list:has(.survey-response) .btn-row .btn-row__back {
  margin-right: auto;
}

/* ==========================================================================
   [이관] 통합검색 오버레이(.total-search / .popul-search / .lately-search /
   .search-auto) — kwmf-mockup.css 에서 옮김(2026-08-26). kwmf-mockup 의 유일한
   고유 컴포넌트라 이것만 살리고 나머지(퍼블 중복분)는 버린다. 사용 토큰
   (--blue-*, --surface, --line, --text-*, --gray-bg, --red)은 web1 :root 에 이미 있다.
   ========================================================================== */
/* =========================================================
   통합검색 오버레이 (user_globalsearch.jsp)
   design_guide.css에만 있던 .total-search-position 계열 숨김/레이아웃
   규칙을 이식. 신규 패널이 design_guide.css를 로드하지 않아 기본 숨김
   (top:-210px) 처리가 안 되어 항상 노출되던 문제 수정.
   원본 -210px는 옛 디자인 콘텐츠 높이에 맞춘 값이라 지금 마크업 높이보다
   부족해서 "최근 검색어" 부분이 화면 밖으로 안 밀리고 걸쳐 보였음 —
   콘텐츠 높이와 무관하게 확실히 가려지도록 -2000px로 확대.
   ※ 현재 topbar에는 이 오버레이를 여는 버튼(.btn-total-search)이 없어
   기능 자체는 아직 접근 불가 — 추후 버튼 추가 대비 스타일만 복구.
   ========================================================= */
.total-search-position{position:fixed;left:0;top:-2000px;width:100%;z-index:20;transition:all .5s ease-out;}
.total-search-position.active2{top:-310px;}
.total-search-position::before{content:'';display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);}
.total-search-position.active{top:129px;}
.total-search-position.active.ban{top:238px !important;}
.total-search-position.active::before{display:block;}
.total-search-div{background:var(--blue-50);padding:50px 0 45px;width:100%;position:relative;}
.total-search__inner{width:860px;margin:0 auto;position:relative;}
.total-search__section{display:flex;}
.total-search__top{height:62px;border:1px solid var(--blue-600);border-radius:15px;box-shadow:1px 1px 20px rgba(29,95,214,.1);background:var(--surface);box-sizing:border-box;padding:0 20px 0 10px;display:flex;align-items:center;flex:1;}
.total-search__top.active{border:0;box-shadow:1px 8px 24px rgba(29,95,214,.2);border-radius:15px 15px 0 0;}
.total-search__input{flex:1;display:flex;align-items:center;margin-right:25px;}
.total-search__input__left{flex:1;display:flex;align-items:center;}
.total-search__input__right{display:flex;align-items:center;}
.total-search__input input[type="text"]{border:none;flex:1;font-size:18px;font-weight:600;color:var(--blue-600);background:none;}
.total-search__input input[type="text"]::placeholder{color:var(--text-400);font-weight:400;}
.total-search__input input[type="text"]:focus{outline:none;}
.total-search__delete{width:12px;height:12px;background:url(../../../files/web1/images/common/total-search_bg2.png) no-repeat left top;background-size:12px 12px;display:none;}
.total-search__btn{width:26px;height:26px;background:url(../../../files/web1/images/common/total-search_bg1.png) no-repeat left top;background-size:26px 26px;}
.total-search-div .btn-align__right{margin:0 auto !important;display:flex;flex-direction:row-reverse;gap:4px;}
.popul-search{display:flex;margin:20px 0 0;align-items:flex-start;padding:0 20px;}
.popul-search__left{display:flex;margin:5px 30px 0 0;align-items:center;}
.popul-search__left::before{content:'';width:17px;height:16px;background:url(../../../files/web1/images/common/total-search_bg3.png) no-repeat left top;background-size:17px 16px;margin-right:10px;}
.popul-search__left strong{color:var(--text-900);font-weight:600;}
.popul-search__list{display:flex;flex-wrap:wrap;gap:10px 32px;flex:1;}
.popul-search .popul-search__list{gap:10px 8px;}
.popul-search .popul-search__list li a{background:var(--blue-500);padding:4px 8px;border-radius:100px;color:#fff;}
.popul-search__list li{display:flex;align-items:center;}
.popul-search__list li a{color:var(--text-500);font-size:15px;}
.popul-search__list li .delete{padding:8px;display:block;border-radius:4px;background:var(--gray-bg) url(../../../files/web1/images/common/bookmark-close2.png) no-repeat center center / 6px auto;margin-left:5px;}
.lately-search{display:flex;margin:20px 0 0;align-items:flex-start;border-top:1px solid var(--line);padding:20px 20px 0;}
.lately-search__left{display:flex;margin:5px 30px 0 26px;align-items:center;}
.total-search__detail{padding:30px 40px;background:var(--surface);border-radius:15px;box-shadow:5px 10px 10px rgba(29,95,214,.1);margin-top:10px;box-sizing:border-box;position:relative;display:none;}
.total-search__detail .btn-align{margin:20px 0 0;border-top:1px solid var(--line);padding:20px 0 0;}
.total-search__detail .btn-reset{font-size:16px;}
.total-search__dl{display:flex;align-items:center;padding:10px 0;}
.total-search__dt{width:105px;margin:1px 0 0;font-size:16px;font-weight:600;color:var(--text-900);}
.total-search__dd{flex:1;display:flex;gap:10px;align-items:center;}
.total-search__dd .input-align{display:flex;gap:30px;margin-top:0;}
.total-search__dd .input-align li{margin:0 !important;}
.total-search__year{display:flex;}
.total-search__year li{margin-right:-1px;position:relative;z-index:0;}
.total-search__year li a{min-width:70px;height:42px;padding:0 5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);box-sizing:border-box;font-size:16px;}
.total-search__year li:first-child a{border-radius:5px 0 0 5px;}
.total-search__year li:last-child a{border-radius:0 5px 5px 0;}
.total-search__year li.on{z-index:1;}
.total-search__year li.on a{border:1px solid var(--blue-600);background:var(--blue-50);color:var(--blue-600);}
.total-search__detail__close{position:absolute;right:30px;top:20px;background:url(../../../files/web1/images/common/total_search_detail_close.png) no-repeat left top;width:15px;height:15px;background-size:15px 15px;display:block;}
.search-auto{border:1px solid var(--blue-600);position:absolute;left:0;top:62px;width:60%;background:var(--surface);border-radius:15px;z-index:2;}
.search-auto.active{border:0;box-shadow:1px 16px 16px rgba(29,95,214,.2);border-radius:0 0 15px 15px;top:62px;width:calc(100% - 134px);}
.search-auto .search-auto__content{padding:12px 0;}
.search-auto ul li a{display:block;padding:5px 20px;font-size:15px;}
.search-auto ul li a strong{font-weight:600;font-size:15px;color:var(--red);}
.search-auto ul li a:hover{background:var(--blue-50);}
.search-auto .search-auto__btn{border-top:1px solid var(--line);padding:10px 20px;display:flex;align-items:center;gap:10px;}
.search-auto .search-auto__btn a{font-size:14px;display:inline-flex;align-items:center;}
.search-auto .search-auto__btn a:last-child::before{content:'';display:block;width:1px;height:10px;background:var(--line);margin:0 10px 0 0;}
.search-auto .search-auto__btn a:hover{text-decoration:underline;}
.search-auto .search-auto__btn a.active{color:var(--blue-600);font-weight:600;}
@media (max-width:900px){
  .total-search-position{top:-2000px;}
  .total-search-position.active2{top:-594px;}
  .total-search-position.active{top:52px;}
  .total-search-position.active.ban{top:52px !important;}
  .total-search-div{padding:30px 16px;box-sizing:border-box;}
  .total-search__inner{width:100%;margin:0 auto;}
  .total-search__section{flex-wrap:wrap;}
  .total-search__top{height:42px;border-radius:10px;padding:0 15px 0 20px;width:100%;}
  .total-search__input{margin-right:0;}
  .total-search__input__left{margin-right:20px;}
  .total-search__input__right{display:none;}
  .total-search__input input[type="text"]{flex:unset;font-size:15px;width:95%;}
  .total-search__btn{width:19px;height:19px;background-size:19px 19px;}
  .popul-search{margin:15px 0 0;}
  .popul-search__left{margin:1px 15px 0 0;}
  .popul-search__list{gap:6px 10px;}
  .popul-search__list li a{font-size:14px;}
  .total-search__detail{padding:30px 20px;border-radius:10px;}
  .total-search__dl{padding:15px 0;flex-wrap:wrap;}
  .total-search__dt{width:100%;margin:0;font-size:15px;}
  .total-search__dd{flex:unset;flex-wrap:wrap;margin-top:15px;}
  .total-search__dd .input-align{gap:20px;flex-wrap:unset;width:100%;}
  .total-search__year li a{min-width:70px;height:38px;font-size:15px;}
  .total-search__detail__close{right:20px;top:20px;}
  .search-auto{left:0;top:45px;width:100%;border-radius:15px;}
  .search-auto.active{top:42px;width:100%;}
}

/* ---------- 신청절차안내 (Figma node 386:23616, FR-CS-007_절차안내_prd.html) ---------- */
.apply-guide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
}
.apply-guide__title {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
  width: 100%;
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-strong);
}
.apply-guide__title-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  flex: 1 0 0;
  min-width: 0;
}
.apply-guide__title-heading {
  font-weight: 700;
  font-size: var(--font-size-heading-h1);
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}
.apply-guide__title-desc {
  font-weight: 400;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}

/* 탭 자체는 공용 .tabs/.tab-btn/.tab-panel(Figma Tab Group/Round 2793:11322) 그대로 재사용.
   .tab-panel은 다른 화면에서도 쓰는 공용 클래스라 여기서는 .apply-guide 자식으로 스코프해서,
   .tabs와의 간격만 0으로 상쇄(음수 margin) - .apply-guide 자체 gap은 그대로 둔다 */
.apply-guide > .tab-panel {
  margin-top: calc(var(--spacing-2xl) * -1);
}
@media (max-width: 744px) {
  .apply-guide > .tab-panel {
    margin-top: calc(var(--spacing-lg) * -1);
  }
}

.apply-guide__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
  padding: 50px;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
}
.apply-guide__callout {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-blue-50);
  border-radius: var(--radius-sm);
}
.apply-guide__callout-icon {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
}
.apply-guide__callout-text {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-blue-500);
}
.apply-guide__callout-text p {
  margin: 0;
}
.apply-guide__step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
  padding: var(--spacing-2xl) var(--spacing-3xl);
  background: var(--color-bg-page);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(24px);
  animation: apply-guide-step-slide-in 0.5s ease forwards;
}
.apply-guide__panel > .apply-guide__step:nth-child(2) {
  animation-delay: 0s;
}
.apply-guide__panel > .apply-guide__step:nth-child(3) {
  animation-delay: 0.15s;
}
.apply-guide__panel > .apply-guide__step:nth-child(4) {
  animation-delay: 0.3s;
}
.apply-guide__panel > .apply-guide__step:nth-child(5) {
  animation-delay: 0.45s;
}
@keyframes apply-guide-step-slide-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes docs-guide-item-slide-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.apply-guide__step-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 90px;
  height: 80px;
}
.apply-guide__step-icon img {
  height: 60px;
}
.apply-guide__step-icon--1 img {
  width: 68px;
}
.apply-guide__step-icon--2 img {
  width: 66px;
}
.apply-guide__step-icon--3 img {
  width: 63px;
}
.apply-guide__step-icon--4 img {
  width: 57px;
}
.apply-guide__step-icon--cert1 img {
  width: 68px;
}
.apply-guide__step-icon--cert2 img {
  width: 68px;
}
.apply-guide__step-icon--cert3 img {
  width: 57px;
}
.apply-guide__step-icon--cert4 img {
  width: 60px;
  height: 76px;
}
.apply-guide__status-single {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xs);
  flex: 1 0 0;
  min-width: 0;
}
.apply-guide__status-desc-group p {
  margin: 0;
}
.apply-guide__step-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
  min-width: 0;
}
.apply-guide__step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.apply-guide__step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-relaxed);
  color: var(--color-bg-page);
  text-align: center;
}
.apply-guide__step-title {
  font-weight: 700;
  font-size: var(--font-size-heading-h3);
  line-height: var(--line-height-snug);
  color: var(--color-text-heading);
}
.apply-guide__step-desc {
  width: 100%;
  font-weight: 400;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}
.apply-guide__status {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4xl);
  width: 100%;
  padding: var(--spacing-2xl);
  background: var(--color-bg-page);
  border: 1px solid var(--color-primary-border-light);
  border-radius: var(--radius-lg);
}
.apply-guide__status-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  flex-shrink: 0;
  width: 260px;
}
.apply-guide__status-title {
  font-weight: 700;
  font-size: var(--font-size-heading-h3);
  line-height: var(--line-height-snug);
  color: var(--color-text-body);
}
.apply-guide__status-desc {
  font-weight: 400;
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-base);
  color: var(--color-text-tertiary);
}
.apply-guide__status-divider {
  align-self: stretch;
  flex-shrink: 0;
  width: 0;
  border-left: 1px dashed var(--color-primary-border-light);
}
.apply-guide__status-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex: 1 0 0;
  min-width: 0;
}
.apply-guide__status-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
}
.apply-guide__status-arrow {
  font-size: 13px;
  color: var(--color-text-tertiary);
}
.apply-guide__status-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apply-guide__status-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}
.apply-guide .badge--error {
  background: var(--color-status-error-bg);
  color: var(--color-status-error);
}
.apply-guide .badge--warning {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning);
}
.apply-guide .badge--primary {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.apply-guide .badge--purple {
  background: var(--color-point-purple-bg);
  color: var(--color-point-purple);
}
.apply-guide .badge--success {
  background: var(--color-status-success-bg);
  color: var(--color-status-success);
}
.apply-guide .badge--slate {
  background: var(--color-slate-50);
  color: var(--color-slate-500);
}
.apply-guide__links {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
}
.apply-guide__link {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-lg);
  text-decoration: none;
}
.apply-guide__link--primary {
  background: var(--color-primary-bg);
}
.apply-guide__link--success {
  background: var(--color-status-success-bg);
}
.apply-guide__link--warning {
  background: var(--color-status-warning-bg);
}
.apply-guide__link-icon {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.apply-guide__link:hover .apply-guide__link-icon {
  animation: apply-guide-icon-bounce 0.6s ease;
}
@keyframes apply-guide-icon-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
  55% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-3px);
  }
}
.apply-guide__link-icon--business {
  width: 36px;
  height: 40px;
  overflow: visible;
}
.apply-guide__link-icon--business path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.apply-guide__link:hover .apply-guide__link-icon--business path:nth-child(1) {
  transition-delay: 0s;
  transform: scale(1.15);
}
.apply-guide__link:hover .apply-guide__link-icon--business path:nth-child(2) {
  transition-delay: 0.05s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--business path:nth-child(3) {
  transition-delay: 0.1s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--business path:nth-child(4) {
  transition-delay: 0.15s;
  transform: scale(1.2);
}
.apply-guide__link-icon--note {
  width: 40px;
  height: 40px;
  overflow: visible;
}
.apply-guide__link-icon--note path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.apply-guide__link:hover .apply-guide__link-icon--note path:nth-child(1) {
  transition-delay: 0s;
  transform: scale(1.15);
}
.apply-guide__link:hover .apply-guide__link-icon--note path:nth-child(2) {
  transition-delay: 0.05s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--note path:nth-child(3) {
  transition-delay: 0.1s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--note path:nth-child(4) {
  transition-delay: 0.15s;
  transform: scale(1.2);
}
.apply-guide__link-icon--faq {
  width: 42px;
  height: 40px;
  overflow: visible;
}
.apply-guide__link-icon--faq path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.apply-guide__link:hover .apply-guide__link-icon--faq path:nth-child(1) {
  transition-delay: 0s;
  transform: scale(1.15);
}
.apply-guide__link:hover .apply-guide__link-icon--faq path:nth-child(2) {
  transition-delay: 0.05s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--faq path:nth-child(3) {
  transition-delay: 0.1s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--faq path:nth-child(4) {
  transition-delay: 0.15s;
  transform: scale(1.2);
}
.apply-guide__link-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  flex: 1 0 0;
  min-width: 0;
  transition: transform 0.25s ease;
}
.apply-guide__link:hover .apply-guide__link-body {
  transform: translateX(4px);
}
.apply-guide__link-title {
  font-weight: 700;
  font-size: var(--font-size-heading-h4);
  line-height: var(--line-height-snug);
  color: var(--color-text-body);
}
.apply-guide__link-desc {
  font-weight: 400;
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-base);
  color: var(--color-text-tertiary);
}
.apply-guide__link-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease;
}
.apply-guide__link:hover .apply-guide__link-arrow {
  transform: translateX(4px);
}
/* 모바일 전용 문구(Figma mobile-경력신청절차 386:24047) - 데스크톱/태블릿에서는 숨김 */
.apply-guide__status-note--mobile {
  display: none;
}
.apply-guide__callout-text--mobile {
  display: none;
}

/* ---------- 태블릿(1295px 이하): 전용 프레임 없음 - 웹 레이아웃이 안 깨지지 않게 유동 처리만 ---------- */
@media (max-width: 1295px) {
  .apply-guide__status {
    flex-direction: column;
    align-items: stretch;
  }
  .apply-guide__status-head {
    width: 100%;
  }
  .apply-guide__status-divider {
    display: none;
  }
  .apply-guide__links {
    flex-direction: column;
  }
  .apply-guide__link {
    flex: none;
    width: 100%;
  }
}

/* ---------- 모바일(744px 이하, Figma node 386:24047 "mobile-경력신청절차", 사용자가 준 링크) ---------- */
@media (max-width: 744px) {
  .apply-guide {
    gap: var(--spacing-lg);
    padding-top: 24px;
  }
  .apply-guide__callout-text {
    font-size: 13px;
  }
  .apply-guide__callout-text p {
    display: inline;
    margin: 0;
  }
  .apply-guide__callout-text--desktop {
    display: none;
  }
  .apply-guide__callout-text--mobile {
    display: block;
  }
  .apply-guide__panel {
    padding: 0;
    background: none;
    border-radius: 0;
    gap: var(--spacing-md);
  }
  .apply-guide__step {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 1px rgba(17, 24, 39, 0.06);
  }
  .apply-guide__step-icon {
    display: none;
  }
  .apply-guide__step-head {
    gap: 8px;
  }
  .apply-guide__step-indicator {
    width: 24px;
    height: 24px;
  }
  .apply-guide__step-title {
    font-weight: 600;
    font-size: var(--font-size-body-m);
    line-height: var(--line-height-base);
  }
  .apply-guide__step-desc {
    font-size: var(--font-size-caption-s);
    line-height: var(--line-height-tight);
  }
  .apply-guide__status {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-color: var(--color-border-default);
  }
  .apply-guide__status-head {
    width: 100%;
  }
  .apply-guide__status-desc,
  .apply-guide__status-divider,
  .apply-guide__status-note--desktop,
  .apply-guide__status-notes--desktop {
    display: none;
  }
  .apply-guide__status-title {
    font-weight: 600;
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-base);
  }
  .apply-guide__status-chips {
    gap: 8px 4px;
  }
  .apply-guide__status-arrow {
    font-size: 12px;
  }
  .apply-guide__status-note--mobile {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xs);
    font-size: var(--font-size-caption-s);
    line-height: var(--line-height-tight);
    color: var(--color-text-secondary);
  }
  .apply-guide__links {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .apply-guide__link {
    flex: none;
    width: 100%;
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
  }
  .apply-guide__link-icon--business,
  .apply-guide__link-icon--note,
  .apply-guide__link-icon--faq {
    width: 24px;
    height: 24px;
  }
  .apply-guide__link-title {
    font-weight: 600;
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-base);
  }
  .apply-guide__link-desc {
    font-size: var(--font-size-caption-s);
    line-height: var(--line-height-tight);
  }
}

/* ---------- 제출서류 (Figma node 386:24267, 제출서류.html) ---------- */
.docs-guide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
}
.docs-guide__columns {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-2xl);
  width: 100%;
}
.docs-guide__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xl);
  flex: 1 0 0;
  min-width: 0;
  padding: var(--spacing-2xl);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.docs-guide__card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-3xl);
  border-bottom: 2px solid var(--color-black);
}
.docs-guide__card-title {
  font-weight: 700;
  font-size: var(--font-size-heading-h2);
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}
.docs-guide__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
}
.docs-guide__callout {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-blue-50);
  border-radius: var(--radius-sm);
}
.docs-guide__callout-icon {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
}
.docs-guide__callout-text {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-blue-500);
}
.docs-guide__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
}
.docs-guide__group-label {
  font-weight: 700;
  font-size: var(--font-size-heading-h4);
  line-height: var(--line-height-snug);
  color: var(--color-text-body);
}
.docs-guide__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
  padding: var(--spacing-lg);
  background: var(--color-bg-card);
  border-radius: var(--radius-sm);
}
.docs-guide__list--loose {
  padding: var(--spacing-lg) var(--spacing-md);
}
.docs-guide__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2xs);
  width: 100%;
  opacity: 0;
  transform: translateX(-16px);
  animation: docs-guide-item-slide-in 0.7s ease forwards;
}
.docs-guide__list > .docs-guide__item:nth-child(1) {
  animation-delay: 0s;
}
.docs-guide__list > .docs-guide__item:nth-child(2) {
  animation-delay: 0.06s;
}
.docs-guide__list > .docs-guide__item:nth-child(3) {
  animation-delay: 0.12s;
}
.docs-guide__list > .docs-guide__item:nth-child(4) {
  animation-delay: 0.18s;
}
.docs-guide__list > .docs-guide__item:nth-child(5) {
  animation-delay: 0.24s;
}
.docs-guide__list > .docs-guide__item:nth-child(6) {
  animation-delay: 0.3s;
}
.docs-guide__list > .docs-guide__item:nth-child(7) {
  animation-delay: 0.36s;
}
.docs-guide__list > .docs-guide__item:nth-child(8) {
  animation-delay: 0.42s;
}
.docs-guide__item p {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}
.docs-guide__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.docs-guide__divider {
  width: 100%;
  border-top: 1px dashed var(--color-border-strong);
}

/* ---------- 태블릿(1295px 이하): 전용 프레임 없음 - 2컬럼 flex(min-width:0)라 그대로도 안 깨져서 오버라이드 없음 ---------- */

/* ---------- 모바일(744px 이하, Figma node 386:24329 "신청절차 > 제출서류", 사용자가 준 링크) ---------- */
@media (max-width: 744px) {
  .docs-guide {
    padding-top: 24px;
  }
  .docs-guide__columns {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  .docs-guide__card {
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }
  .docs-guide__card-head {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-lg);
  }
  .docs-guide__card-body {
    gap: var(--spacing-md);
  }
  .docs-guide__card:has(.docs-guide__callout) .docs-guide__card-body {
    gap: var(--spacing-xs);
  }
  .docs-guide__callout {
    padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
  }
  .docs-guide__group {
    gap: var(--spacing-xs);
  }
  .docs-guide__list {
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-sm);
  }
  .docs-guide__list--loose {
    padding: var(--spacing-lg) var(--spacing-sm);
  }
}

/* ==========================================================================
   AD-AUTH-001 관리자 로그인 — 입력폼 ↔ 버튼 간격
   .auth-form-actions{margin-top:4px}가 .auth-card > *+*{margin-top:16px}를
   덮어써서 버튼이 폼에 4px로 붙는다. FR-AUTH-001(로그인)은 카드 gap 20px가
   따로 있어 20px로 벌어지므로, 소셜 버튼이 없는 로그인 카드도 같은 20px로 맞춘다.
   ========================================================================== */
.login-wrap .auth-card:not(:has(.social-btn)) .auth-form-actions {
  margin-top: 20px;
}

/* 관리자(bcnimda) 페이지(footer.foot 보유)는 본문 진입 페이드인 모션을 쓰지 않는다 */
.app:has(footer.foot) .content-area,
.app:has(footer.foot) .content-area .page-head,
.app:has(footer.foot) .content-area main,
.app:has(footer.foot) .content-area > *,
.app:has(footer.foot) .content-area > main > * {
  opacity: 1;
  transform: none;
  animation: none;
}

/* 차트 자리표시자 다음에 표가 바로 붙어 있어서, .filterbar 의 아래 여백(16px)과
   같은 간격을 준다 */
.chart-placeholder + .table-wrap {
  margin-top: 16px;
}

/* .card + .card 의 margin-top(16px) 이 grid-2 안 두 번째 카드에도 걸려서
   오른쪽 카드만 아래로 밀려 상단이 안 맞았다. 간격은 grid gap 이 담당한다 */
.grid-2 > .card + .card {
  margin-top: 0;
}

/* 관리자 화면의 경고 안내문 — Figma CalloutBox / Danger (node 2599:328).
   web1/web2 의 .alert-box.warn 은 그대로 두어야 해서 관리자 화면으로만 한정한다 */
.app:has(footer.foot) .alert-box.warn {
  align-items: center;
  gap: var(--spacing-xs);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-status-error-bg);
  color: var(--color-status-error);
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
}

.app:has(footer.foot) .alert-box.warn .ico {
  flex: none;
  width: 23px;
  height: 23px;
  font-size: 0;
  color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath d='M11.5 20.7C16.581 20.7 20.7 16.581 20.7 11.5C20.7 6.41898 16.581 2.3 11.5 2.3C6.41898 2.3 2.3 6.41898 2.3 11.5C2.3 16.581 6.41898 20.7 11.5 20.7Z' stroke='%23ee4b47' stroke-width='1.6'/%3E%3Cpath d='M11.5 7.0725V12.8225' stroke='%23ee4b47' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M11.5 15.6975V15.9275' stroke='%23ee4b47' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / 23px 23px;
}

/* 진위확인 결과 패널과 그 아래 안내문 사이 간격 */
.cert-verify + .alert-box {
  margin-top: var(--spacing-lg);
}

/* 목록(pagination) 아래 미리보기 안내와 카드가 위 여백 없이 붙어 있었다.
   pagination 이 위에 두는 간격(32px)과 같게 띄우고, 안내와 카드 사이는
   .card + .card(16px) 와 같은 간격으로 맞춘다 */
.pagination + .empty-state {
  margin-top: 32px;
}

.empty-state + .card {
  margin-top: 16px;
}

/* 버튼 줄 다음에 오는 안내도 위 여백이 없어 버튼에 붙어 있었다.
   .btn-row 가 위에 두는 간격(--spacing-2xl)과 같게 맞춘다 */
.btn-row + .empty-state {
  margin-top: var(--spacing-2xl);
}

/* 관리자 폼은 모바일에서도 .form-grid 2열이 그대로 남아 라벨/입력이 좁게 눌렸다.
   모바일에서는 form-row 를 한 줄에 하나씩 쌓는다 (.form-row.full 은 그대로 한 줄) */
@media (max-width: 744px) {
  .app:has(footer.foot) .form-grid {
    grid-template-columns: 1fr;
  }
}

/* 열이 4개 이상인 표가 들어간 카드는 grid-2 의 좁은 칸에서 셀이 눌려 읽기 어렵다.
   이런 grid-2 는 두 카드를 한 줄에 하나씩 쌓는다 (간격은 grid gap 이 그대로 담당) */
.grid-2:has(table.grid th:nth-child(4)) {
  grid-template-columns: 1fr;
}

/* 상태 변경 버튼 줄 끝의 안내 문구 — Figma Form Field 의 Field Message (node 2665:21435).
   버튼과 같은 줄에 끼어 있어서, 한 줄을 차지하게 하고 캡션 스타일을 준다
   (버튼과의 간격 8px 은 .btn-row 의 gap 이 그대로 담당) */
#vr002-locked-notice {
  width: 100%;
  padding: 0 var(--spacing-3xs);
  text-align: right;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption-s);
  font-weight: 400;
  line-height: var(--line-height-tight);
}

/* OCR 검토 카드의 액션 버튼 두 개는 글자 수가 달라 폭이 서로 달랐다.
   같은 최소 폭을 줘서 크기를 맞춘다 */
.btn-row:has(> .btn-sm) .btn-sm {
  min-width: 110px;
}

/* 이모지 대신 배지와 같은 컬러만으로 표현한다. 내용을 비워둔 아이콘에만 적용되므로
   의미가 있는 이모지/아이콘을 쓰는 다른 화면은 그대로 유지된다.
   박스 안에 점을 넣으면 어색해서, 컬러 원 하나로만 표현한다 */
.stat-icon:empty:not([class*="ico-"]) {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: currentColor;
}

/* 통계 카드 아이콘 — 이모지 대신 선 아이콘. mask 로 그려서 색은 배지와 같은 currentColor 를 따른다 */
.stat-icon[class*="ico-"]::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain;
  mask: var(--ico) no-repeat center / contain;
}
.stat-icon.ico-doc {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E");
}
.stat-icon.ico-time {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
}
.stat-icon.ico-trend-down {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6 6 4-4 8 8'/%3E%3Cpath d='M21 12v6h-6'/%3E%3C/svg%3E");
}
.stat-icon.ico-committee {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20v-1.2c0-2.3 2.7-3.6 6-3.6s6 1.3 6 3.6V20'/%3E%3Ccircle cx='17.6' cy='9.2' r='2.4'/%3E%3Cpath d='M17.4 14.4c2.2.3 3.6 1.5 3.6 3.4V20'/%3E%3C/svg%3E");
}
.stat-icon.ico-user {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20v-1.4c0-2.7 3.4-4.2 7.5-4.2s7.5 1.5 7.5 4.2V20'/%3E%3C/svg%3E");
}
.stat-icon.ico-check {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.8 2.8L16 9.6'/%3E%3C/svg%3E");
}
.stat-icon.ico-target {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E");
}
.stat-icon.ico-qr {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='6.5' height='6.5' rx='1.2'/%3E%3Crect x='14' y='3.5' width='6.5' height='6.5' rx='1.2'/%3E%3Crect x='3.5' y='14' width='6.5' height='6.5' rx='1.2'/%3E%3Cpath d='M14 14h3v3'/%3E%3Cpath d='M20.5 17.5v3h-3'/%3E%3C/svg%3E");
}
.stat-icon.ico-search {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.6'/%3E%3Cpath d='M15.6 15.6L20.5 20.5'/%3E%3C/svg%3E");
}
.stat-icon.ico-chain {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 14.4l4.8-4.8'/%3E%3Cpath d='M13 6.2l1.6-1.6a3.9 3.9 0 0 1 5.5 5.5L18.5 11.7'/%3E%3Cpath d='M11 17.8l-1.6 1.6a3.9 3.9 0 0 1-5.5-5.5l1.6-1.6'/%3E%3C/svg%3E");
}
.stat-icon.ico-alert {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6L21.2 19.4H2.8z'/%3E%3Cpath d='M12 9.4v4.2'/%3E%3Cpath d='M12 16.6v.2'/%3E%3C/svg%3E");
}
.stat-icon.ico-chart {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4'/%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M8.4 20v-5.6'/%3E%3Cpath d='M13 20V8.6'/%3E%3Cpath d='M17.6 20v-8.2'/%3E%3C/svg%3E");
}
.stat-icon.ico-building {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 20.5V4.6a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v15.9'/%3E%3Cpath d='M14.5 9.4h4a1 1 0 0 1 1 1v10.1'/%3E%3Cpath d='M3 20.5h18'/%3E%3Cpath d='M7.8 7.6h3'/%3E%3Cpath d='M7.8 11.4h3'/%3E%3Cpath d='M7.8 15.2h3'/%3E%3C/svg%3E");
}
.stat-icon.ico-briefcase {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.4' width='18' height='12.6' rx='1.6'/%3E%3Cpath d='M8.8 7.4V5.6a1.6 1.6 0 0 1 1.6-1.6h3.2a1.6 1.6 0 0 1 1.6 1.6v1.8'/%3E%3Cpath d='M3 12.4h18'/%3E%3C/svg%3E");
}

/* 파일 다운로드 링크 — 문자 ⬇ 대신 아이콘. 색은 링크 색(currentColor)을 따른다 */
.file-link::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v12'/%3E%3Cpath d='M7.2 10.8L12 15.6l4.8-4.8'/%3E%3Cpath d='M4.5 20h15'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v12'/%3E%3Cpath d='M7.2 10.8L12 15.6l4.8-4.8'/%3E%3Cpath d='M4.5 20h15'/%3E%3C/svg%3E")
    no-repeat center / contain;
}