/* ==========================================================================
   CSprint — 페이지 컴포넌트

   brand.css 위에 얹는다. 브랜드 토큰·버튼·폼·헤더·푸터·화살촉 모티프는
   전부 brand.css 것을 그대로 쓰고, 여기에는 CSprint 에만 있는 것만 둔다.

   brand.css 의 테두리 정책을 그대로 따른다.
     · 테두리는 '누를 수 있다 / 입력할 수 있다' 신호일 때만
     · 콘텐츠를 박스로 감싸지 않는다. 구분이 필요하면 헤어라인 1개
     · 위계는 여백과 타이포로 만든다
   ========================================================================== */

/* 모집 페이지는 정보량이 많아 커넥터(880px)보다 넓은 컬럼을 쓴다.
   읽기 영역은 항상 65~68ch 로 따로 제한한다 — 폭이 넓어도 본문 줄이 길어지지 않게. */
.wrap--cs { max-width: calc(1080px + 48px); }
.measure { max-width: 66ch; }

/* --------------------------------------------------------------------------
   보조 텍스트 대비 — WCAG AA(4.5:1)는 '최소 통과선'이지 최적이 아니다.
   Vision Research 의 휘도대비 연구는 8:1 부터 시각 수행이 개선되고
   18:1 에서 가독성이 가장 좋다고 보고한다. brand.css 의 --sp-muted(5.14:1)는
   AA 는 넘지만 그 문턱 아래라, 13~15px 작은 글씨에는 아래 값을 쓴다.
     --sp-muted   #6b6862  5.14:1   (기존, 큰 보조 텍스트용)
     --sp-read    #4d4a45  8.16:1   (작은 보조 텍스트용)
     --sp-read-dk #b5b1ab  8.85:1   (검은 배경 위)
   -------------------------------------------------------------------------- */
:root {
  --sp-read: #4d4a45;
  --sp-read-dk: #b5b1ab;
}
/* 실제 적용은 파일 맨 끝 — 같은 특이도라 나중에 선언해야 이긴다 */

/* ==========================================================================
   폼·플로우 키트

   커넥터의 app.css 에도 비슷한 컴포넌트가 있지만 그 파일은 가져오지 않는다.
   app.css 는 커넥터 전용(.person · .listbar · .pager · .band …)이 대부분이라
   함께 실으면 죽은 CSS 가 따라오고, 무엇보다 커넥터 화면을 고치다 CSprint 가
   깨지는 결합이 생긴다. 두 사이트가 공유하는 층은 brand.css(브랜드 토큰) 하나로
   끝내고, 페이지 컴포넌트는 각자 갖는다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   헤더 로고 락업 — CSprint by [bluepoint]

   'BY BLUEPOINT' 글자를 블루포인트 공식 BI(Bluepoint+BI_RGB.ai)로 바꿨다.
   .ai 는 PDF 호환이라 pdftocairo 로 벡터를 그대로 뽑아 SVG 로 만들었다(3.6KB).
   래스터가 아니라서 어느 배율에서도 또렷하고, 정적 자산이라 비용도 0 이다.

   'by' 는 남겨 둔다. 로고만 나란히 두면 공동 브랜드처럼 읽혀서
   '블루포인트가 운영한다'는 관계가 흐려진다.

   세로 정렬 — 워드마크의 베이스라인은 SVG 높이의 88.4% 지점에 있다
   (viewBox y 212.44~339.72 중 베이스라인 325.0). flex 의 baseline 정렬은
   이미지의 아래 여백 끝을 기준으로 삼으므로, 그만큼 음수 margin 을 줘서
   'CSprint' 의 베이스라인과 'bluepoint' 의 베이스라인을 맞춘다.
   -------------------------------------------------------------------------- */
.brand { gap: 9px; }
.brand__by {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  /* 두 글자뿐이라 라벨용 0.18em 트래킹을 그대로 쓰면 'b y' 로 벌어져 보인다 */
  letter-spacing: 0.05em; text-transform: lowercase;
  color: var(--sp-muted);
  white-space: nowrap;
}
.brand__logo {
  height: 24px; width: auto;
  margin-left: -3px;                 /* 'by' 와 로고 사이는 조금 더 붙인다 */
  margin-bottom: -2.8px;             /* = 24px × (1 − 0.884) */
  flex: none;
}

@media (max-width: 640px) {
  /* brand.css 는 모바일에서 로고를 세로로 쌓지만, 여기서는 한 줄이 더 깔끔하다 */
  .brand { flex-direction: row; align-items: baseline; gap: 7px; }
  .brand__by { font-size: 9.5px; }
  .brand__logo { height: 19px; margin-bottom: -2.2px; margin-left: -2px; }
}

.hero__eyebrow { display: flex; align-items: center; gap: 18px; margin-bottom: var(--gap-lg); }

/* 헤더 안의 버튼은 링크 색 규칙에 먹힌다.
   brand.css 의 `.site-header__nav a { color: var(--sp-muted) }` 가 선택자 2개라
   `.btn--primary { color: #fff }` 를 이긴다. 그대로 두면 주황 버튼 위에 회색 글자가
   얹혀 대비가 1.5:1 로 떨어진다. 커넥터 헤더에는 버튼이 없어 드러나지 않던 충돌이다. */
.site-header__nav a.btn--primary { color: var(--sp-white); }
.site-header__nav a.btn--ghost { color: var(--sp-black); }
.site-header__nav a.btn--ghost:hover { color: var(--sp-paper); }

.field-note { margin: var(--gap-lg) 0 0; font-size: 14px; line-height: 1.7; color: var(--sp-muted); }
.field-note b { color: var(--sp-charcoal); font-weight: 700; }

.backlink { font-size: 14px; font-weight: 600; color: var(--sp-muted); display: inline-flex; align-items: center; gap: 8px; }
.backlink:hover { color: var(--sp-black); }
.backlink::before {
  content: ''; width: 7px; height: 7px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.rule { border: 0; border-top: 1px solid var(--sp-rule); margin: var(--gap-xl) 0; }

/* 진행 인디케이터.
   ⚠️ 여기 원래 "Baymard: 진행 표시가 폼 이탈을 20~30% 낮춘다" 고 적어 뒀었는데
   출처를 추적해 보니 Baymard 가 한 말이 아니고 1차 출처가 아예 없다.
   폼 SaaS 블로그들이 서로를 인용하는 순환 구조였다. 실재하는 학술 근거는
   Myers(1985, CHI)의 진행 바 연구인데 그건 로딩 대기 화면 이야기지 폼 단계
   표시기가 아니다. 표시기 자체는 '시스템 상태 가시성'이라는 원칙으로 정당하니
   그대로 두되, 이탈률 개선 수치를 근거로 삼지 않는다. */
.steps { display: flex; align-items: center; gap: 0; margin: 0 0 var(--gap-2xl); padding: 0; list-style: none; }
.step { display: flex; align-items: center; gap: 10px; flex: none; }
.step:not(:last-child) { flex: 1; }
.step:not(:last-child)::after {
  content: ''; flex: 1; min-width: 20px; height: 2px;
  background: var(--sp-gray); margin: 0 14px;
}
.step.is-done:not(:last-child)::after { background: var(--sp-green); }
.step__no {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 2px solid var(--sp-gray);
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  color: var(--sp-muted); background: var(--sp-paper);
}
.step__txt { font-size: 14px; font-weight: 700; color: var(--sp-muted); white-space: nowrap; }
.step.is-active .step__no { border-color: var(--sp-orange); color: var(--sp-orange-deep); }
.step.is-active .step__txt { color: var(--sp-black); }
.step.is-done .step__no { border-color: var(--sp-green); background: var(--sp-green); color: var(--sp-white); }
.step.is-done .step__txt { color: var(--sp-charcoal); }

/* 폼 영역 — 흰 박스를 걷어내고 여백으로만 구분한다 */
.panel { padding: 0; }
.panel__head { margin-bottom: var(--gap-xl); }
.panel__head h2 { font-size: clamp(23px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.03em; margin: 0; line-height: 1.3; }
.panel__head p { margin: 10px 0 0; font-size: 16px; color: var(--sp-muted); line-height: 1.7; max-width: 52ch; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }

/* 선택지 — 누를 수 있으므로 테두리를 남긴다 */
.opts { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.opt {
  position: relative; border: 1px solid var(--sp-line); background: transparent;
  padding: 11px 18px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:hover { border-color: var(--sp-black); }
.opt:has(input:checked) { background: var(--sp-black); color: var(--sp-paper); border-color: var(--sp-black); }
.opt:has(input:focus-visible) { outline: 2px solid var(--sp-orange); outline-offset: 2px; }

.actions { display: flex; gap: 10px; margin-top: var(--gap-2xl); }
.actions .btn--primary { flex: 1; }

/* 최종 확인 요약 — 바깥 박스 없이 행 구분선만 */
.summary { border-top: 1px solid var(--sp-rule); }
.summary__row {
  display: grid; grid-template-columns: 170px 1fr; gap: var(--gap-md);
  padding: 14px 0; border-bottom: 1px solid var(--sp-rule); font-size: 15px;
}
.summary__row dt { color: var(--sp-muted); font-weight: 600; margin: 0; font-size: 14px; }
.summary__row dd { margin: 0; font-weight: 600; white-space: pre-wrap; }

/* 안내·오류 — 배경 없이 왼쪽 선 하나로만 */
.notice {
  border-left: 2px solid var(--sp-green); padding: 2px 0 2px var(--gap-md);
  margin-top: var(--gap-xl); font-size: 15px; line-height: 1.75;
  color: var(--sp-charcoal); max-width: 56ch;
}
.form-error {
  border-left: 2px solid var(--sp-orange); padding: 2px 0 2px var(--gap-md);
  margin: var(--gap-lg) 0 0; font-size: 14px; font-weight: 600; line-height: 1.7;
  color: var(--sp-orange-deep);
}

/* 이력서 첨부 — 이 폼에서 유일하게 테두리를 쓰는 콘텐츠 요소다.
   "여기에 파일을 놓으세요"를 테두리 없이 전달할 방법이 마땅치 않다. */
.cvzone {
  display: block; border: 1px dashed var(--sp-line);
  padding: var(--gap-xl) var(--gap-lg); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cvzone:hover, .cvzone.is-over { border-color: var(--sp-orange); background: #fff9f5; }
.cvzone.is-done { border-style: solid; border-color: var(--sp-orange-deep); background: #fff9f5; }
.cvzone.is-busy { cursor: progress; }
.cvzone__title { display: block; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.cvzone__hint { display: block; font-size: 14px; color: var(--sp-muted); text-wrap: pretty; }

.consent { margin-top: var(--gap-xl); }
.consent__body {
  font-size: 13px; line-height: 1.75; color: var(--sp-muted);
  margin: 0 0 var(--gap-md); text-wrap: pretty;
}

/* 완료 화면 */
.done { text-align: center; padding: var(--gap-3xl) 0; }
.done__arrow { display: flex; justify-content: center; margin-bottom: var(--gap-lg); }
.done h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.035em; margin: 0 0 var(--gap-md); line-height: 1.2; }
.done p { font-size: 17px; color: var(--sp-charcoal); margin: 0 auto var(--gap-lg); max-width: 44ch; line-height: 1.75; }
.done__ref {
  display: inline-block; border: 1px solid var(--sp-line); padding: 10px 18px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   목업 배너 — ENVIRONMENT=mockup 인 동안에만 보인다
   -------------------------------------------------------------------------- */
.mockbar {
  background: var(--sp-black);
  color: var(--sp-paper);
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 0;
}
.mockbar__in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mockbar b { color: var(--sp-orange); font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-label); }
.mockbar span { color: var(--sp-muted-dk); }

/* --------------------------------------------------------------------------
   섹션 — 박스 없이 큰 여백과 결론형 제목으로만 나눈다
   -------------------------------------------------------------------------- */
.sec { padding: var(--gap-3xl) 0 0; }
.sec--tight { padding-top: var(--gap-2xl); }
.sec__mark { margin-bottom: var(--gap-lg); }
.sec__h { max-width: 20ch; text-wrap: balance; }
.sec__dek {
  margin: var(--gap-md) 0 0;
  max-width: 58ch;
  font-size: 17px; line-height: 1.75; color: var(--sp-charcoal);
}
.sec__body { margin-top: var(--gap-xl); }

/* --------------------------------------------------------------------------
   히어로 — 왼쪽 메시지 7 : 오른쪽 핵심정보 5
   -------------------------------------------------------------------------- */
/* 아래 여백은 다음 .sec 의 상단 패딩이 만든다. 여기서 또 주면 히어로가 붕 뜬다. */
.chero { padding: var(--gap-2xl) 0 0; }
.chero__in {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--gap-2xl);
  align-items: start;
}
.chero__title {
  font-size: clamp(36px, 5.4vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: var(--gap-lg) 0 0;
  max-width: 12ch;
  text-wrap: balance;
}
.chero__lead {
  margin: var(--gap-lg) 0 0;
  max-width: 44ch;
  font-size: 19px; line-height: 1.7; color: var(--sp-charcoal);
}

/* 정보 칩 — 누르는 것이 아니므로 테두리 대신 구분점(·)으로 잇는다 */
.hchips {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px;
  margin: var(--gap-lg) 0 0;
  padding: 0; list-style: none;
  font-size: 14px; font-weight: 700; color: var(--sp-charcoal);
}
.hchips li { display: flex; align-items: center; gap: 14px; }
.hchips li:not(:last-child)::after {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: var(--sp-line); display: block;
}

.chero__cta { display: flex; align-items: center; gap: var(--gap-lg); margin: var(--gap-xl) 0 0; flex-wrap: wrap; }
.chero__note { margin: var(--gap-md) 0 0; font-size: 14px; line-height: 1.7; color: var(--sp-muted); }
.chero__note b { color: var(--sp-black); }

/* 링크형 보조 CTA — 채워진 버튼은 지원하기 하나뿐이다 */
.link-cta {
  display: inline-flex; align-items: center;
  font-size: 16px; font-weight: 700; color: var(--sp-black);
  border-bottom: 2px solid var(--sp-orange);
  padding-bottom: 2px;
}
.link-cta:hover { color: var(--sp-orange-deep); }
.link-cta:hover .sp-chev { transform: rotate(45deg) translate(2px, -2px); }

/* 핵심 일정 카드 — 박스가 아니라 행 헤어라인만 */
.quick { border-top: 2px solid var(--sp-black); padding-top: var(--gap-md); }
.quick__t {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--sp-muted); margin: 0 0 var(--gap-sm);
}
.quick dl { margin: 0; }
.quick__row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--gap-md);
  padding: 11px 0; border-bottom: 1px solid var(--sp-rule);
}
.quick__row dt { font-size: 13px; color: var(--sp-muted); font-weight: 600; margin: 0; }
.quick__row dd { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.quick__warn {
  margin: var(--gap-md) 0 0;
  font-size: 13px; line-height: 1.65; color: var(--sp-muted);
  border-left: 2px solid var(--sp-line); padding-left: 12px;
}

/* --------------------------------------------------------------------------
   Must Have — 화살촉 마커 리스트 (가이드의 유일한 모티프)
   -------------------------------------------------------------------------- */
.must { list-style: none; margin: var(--gap-lg) 0 0; padding: 0; }
.must li {
  position: relative; padding-left: 30px; margin-bottom: 13px;
  font-size: 17px; font-weight: 600; line-height: 1.6; text-wrap: pretty;
}
.must li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 8px; height: 8px;
  border-top: 2px solid var(--sp-orange); border-right: 2px solid var(--sp-orange);
  transform: rotate(45deg);
}
.must--muted li { font-weight: 400; color: var(--sp-charcoal); font-size: 16px; }
.must--muted li::before { border-color: var(--sp-line); }

/* 2열 배치 (모바일 1열) */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2xl); align-items: start; }
.two--wide { gap: var(--gap-3xl); }

/* --------------------------------------------------------------------------
   강조 패널 — 배경 없이 왼쪽 선 하나
   -------------------------------------------------------------------------- */
.pnl {
  border-left: 3px solid var(--sp-orange);
  padding: 2px 0 2px var(--gap-lg);
  margin: var(--gap-xl) 0 0;
  max-width: 60ch;
}
.pnl--v { border-left-color: var(--sp-green); }
.pnl--q { border-left-color: var(--sp-line); }
.pnl h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.pnl p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--sp-charcoal); }
.pnl p + p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   차별점 스트립 — 아닌 것을 선언한다
   -------------------------------------------------------------------------- */
.strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-lg);
  margin: var(--gap-xl) 0 0;
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--sp-rule);
}
.strip li { list-style: none; font-size: 15px; font-weight: 700; line-height: 1.5; text-wrap: pretty; }
.strip li span { display: block; font-size: 13px; font-weight: 400; color: var(--sp-muted); margin-top: 6px; }

/* --------------------------------------------------------------------------
   기술카드 — 위 헤어라인만. 박스로 감싸지 않는다.
   -------------------------------------------------------------------------- */
.techs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl) var(--gap-2xl); margin-top: var(--gap-xl); }
.tech { border-top: 1px solid var(--sp-rule); padding-top: var(--gap-md); }
.tech__code {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: var(--ls-label); color: var(--sp-orange-deep);
}
.tech__name { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 0; line-height: 1.35; }
.tech__sum { margin: 8px 0 0; font-size: 15px; line-height: 1.7; color: var(--sp-charcoal); }
.tech__meta { margin: var(--gap-md) 0 0; }
.tech__meta div { display: grid; grid-template-columns: 78px 1fr; gap: 10px; font-size: 13.5px; padding: 4px 0; }
.tech__meta dt { color: var(--sp-muted); margin: 0; }
.tech__meta dd { margin: 0; color: var(--sp-charcoal); font-weight: 600; }
.tech--tbd { opacity: .55; }

/* --------------------------------------------------------------------------
   제공하는 것 — 2×2, 번호는 순서가 아니라 항목이라 쓰지 않는다
   -------------------------------------------------------------------------- */
.gives { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2xl) var(--gap-3xl); margin-top: var(--gap-xl); }
.give__h { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.give__h h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.give p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--sp-charcoal); }

/* --------------------------------------------------------------------------
   역할 분리 — 연구자 | 사업가. 모바일에서는 카드 2개로 쌓인다.
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: var(--gap-xl); border-top: 1px solid var(--sp-line); }
.split__col { padding: var(--gap-lg) var(--gap-xl) var(--gap-lg) 0; }
.split__col + .split__col { border-left: 1px solid var(--sp-rule); padding-left: var(--gap-xl); padding-right: 0; }
.split__t { font-size: 16px; font-weight: 800; margin: 0 0 var(--gap-md); letter-spacing: -0.02em; }
.split__col--me .split__t { color: var(--sp-orange-deep); }
.split ul { list-style: none; margin: 0; padding: 0; }
.split li { font-size: 15px; line-height: 1.6; color: var(--sp-charcoal); padding: 7px 0; border-bottom: 1px solid var(--sp-rule); }
.split li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   프로그램 타임라인 — 날짜 25% / 설명 75%
   -------------------------------------------------------------------------- */
.phases { margin-top: var(--gap-xl); border-top: 1px solid var(--sp-line); }
.phase {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--gap-xl);
  padding: var(--gap-lg) 0;
  border-bottom: 1px solid var(--sp-rule);
}
.phase__when { }
.phase__date { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.phase__dur { display: block; font-size: 13px; color: var(--sp-muted); margin-top: 4px; }
.phase__load {
  display: inline-block; margin-top: 8px;
  font-size: 12px; font-weight: 700; color: var(--sp-orange-deep);
  border: 1px solid var(--sp-orange-deep); padding: 2px 8px;
}
.phase__name { font-size: 19px; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 8px; }
.phase__body { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--sp-charcoal); max-width: 60ch; }
.phase__body + .phase__body { margin-top: 10px; }
.phase__list { margin: var(--gap-md) 0 0; padding-left: 1.1em; font-size: 14.5px; color: var(--sp-muted); }
.phase__list li { margin-bottom: 5px; }

/* --------------------------------------------------------------------------
   Hero 우측 — 표가 아니라 숫자 4개
   NN/g 아이트래킹: 시선의 57%가 폴드 위, 74%가 첫 두 스크린(2160px) 안에 머문다.
   그 자리를 읽을거리가 아니라 '한눈에 잡히는 값'으로 쓴다.
   -------------------------------------------------------------------------- */
/* 1행 4열. Hero 오른쪽에 세워 두었을 때는 왼쪽 본문보다 244px 짧아서 아래가
   비었는데, 가로로 펴면 그 문제 자체가 없어지고 네 값이 같은 위계로 읽힌다. */
.hfacts { margin-top: var(--gap-2xl); }
.hnums {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 2px solid var(--sp-black);
  border-bottom: 1px solid var(--sp-rule);
}
.hnum { padding: var(--gap-lg) var(--gap-lg) var(--gap-lg) var(--gap-lg); border-left: 1px solid var(--sp-rule); }
.hnum:first-child { border-left: 0; padding-left: 0; }
.hnum:last-child { padding-right: 0; }
.hnum b {
  display: block; font-family: var(--font-display);
  font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
}
.hnum b small { font-size: 15px; font-weight: 700; margin-left: 3px; font-family: var(--font-body); }
.hnum span { display: block; font-size: 13px; color: var(--sp-read); margin-top: 5px; line-height: 1.45; }
/* 목표 문장과 비보장 고지를 숫자 줄 아래 두 칸으로. 목표가 넓은 쪽이다. */
.hfacts__foot {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap-xl); align-items: start;
  margin-top: var(--gap-lg);
}
.hgoal {
  margin: 0; padding-left: 12px;
  border-left: 2px solid var(--sp-orange);
  font-size: 15px; line-height: 1.7;
}
.hgoal b { font-weight: 700; }
.hfacts__foot .field-note { margin: 0; }

@media (max-width: 780px) {
  .hnums { grid-template-columns: 1fr 1fr; }
  /* 2×2 로 접히면 3·4번 칸 위에 가로선이 필요하고, 3번 칸의 왼쪽 세로선은 빠져야 한다 */
  .hnum { padding: var(--gap-md) var(--gap-md); }
  .hnum:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hnum:nth-child(even) { padding-right: 0; }
  .hnum:nth-child(n+3) { border-top: 1px solid var(--sp-rule); }
  .hfacts__foot { grid-template-columns: 1fr; gap: var(--gap-md); }
}

/* --------------------------------------------------------------------------
   4단계 진행 — 실제로 순서가 있는 내용이라 번호와 화살촉을 쓴다
   Mayer spatial contiguity: 설명 텍스트는 해당 단계 바로 아래 붙인다
   -------------------------------------------------------------------------- */
.steps4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg);
  margin: var(--gap-xl) 0 0; padding: 0; list-style: none; counter-reset: s4;
}
.steps4 > li { counter-increment: s4; padding-top: var(--gap-md); border-top: 1px solid var(--sp-line); position: relative; }
.steps4 > li::before {
  content: counter(s4, decimal-leading-zero);
  font-family: var(--font-display); font-size: 11px; font-weight: 800;
  letter-spacing: var(--ls-label); color: var(--sp-orange-deep); display: block; margin-bottom: 9px;
}
.steps4 > li:not(:last-child)::after {
  content: ''; position: absolute; right: calc(var(--gap-lg) / -2 - 4px); top: 52%;
  width: 8px; height: 8px;
  border-top: 2px solid var(--sp-line); border-right: 2px solid var(--sp-line);
  transform: rotate(45deg);
}
.steps4 h3 { font-size: 17px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.02em; line-height: 1.4; }
.steps4 p { margin: 0; font-size: 14.5px; line-height: 1.65; }

/* 핵심 6주 — 2주 + 4주를 큰 숫자로 */
.core6 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2xl); margin-top: var(--gap-2xl); }
.core6__cell { border-top: 3px solid var(--sp-orange); padding-top: var(--gap-md); }
.core6__wk {
  font-family: var(--font-display); font-size: 44px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--sp-orange-deep);
}
.core6__wk small { font-size: 16px; font-weight: 700; margin-left: 5px; color: var(--sp-black); font-family: var(--font-body); }
.core6__cell h3 { font-size: 19px; font-weight: 800; margin: 12px 0 8px; letter-spacing: -0.02em; }
.core6__cell p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--sp-charcoal); }
.core6__seq { margin: 10px 0 0; font-size: 13.5px; font-family: var(--font-display); color: var(--sp-read); }

/* 아닌 것 — 한 줄로 압축한다. 부정문은 처리 비용이 크므로 길게 늘어놓지 않는다 */
.notlist {
  margin: var(--gap-xl) 0 0; padding: var(--gap-md) 0 0;
  border-top: 1px solid var(--sp-rule);
  font-size: 14.5px; line-height: 1.8; color: var(--sp-read);
}
.notlist b { color: var(--sp-black); font-weight: 700; }

/* --------------------------------------------------------------------------
   고객 신호 — A·B 를 크게, C·D 를 작게
   -------------------------------------------------------------------------- */
.sigs2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2xl); margin-top: var(--gap-xl); }
.sigbig { border-top: 3px solid var(--sp-green); padding-top: var(--gap-md); }
.sigbig__g {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-display); font-size: 46px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--sp-green);
}
.sigbig__tag {
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--sp-green); border: 1px solid var(--sp-green); padding: 2px 7px;
}
.sigbig h3 { font-size: 20px; font-weight: 800; margin: 14px 0 7px; letter-spacing: -0.02em; }
.sigbig p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--sp-charcoal); }

.sigsmall { margin: var(--gap-xl) 0 0; padding-top: var(--gap-md); border-top: 1px solid var(--sp-rule); }
.sigsmall div { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 7px 0; font-size: 14.5px; line-height: 1.6; color: var(--sp-read); }
.sigsmall dt { font-family: var(--font-display); font-weight: 800; margin: 0; color: var(--sp-muted); }
.sigsmall dd { margin: 0; }

/* --------------------------------------------------------------------------
   제공하는 것 — 4개
   -------------------------------------------------------------------------- */
.gives4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-xl); margin-top: var(--gap-xl); }
.gives4 > div { border-top: 1px solid var(--sp-line); padding-top: var(--gap-md); }
.gives4 .k {
  font-family: var(--font-display); font-size: 11px; font-weight: 800;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--sp-orange-deep);
  display: block; margin-bottom: 9px;
}
.gives4 h3 { font-size: 17px; font-weight: 800; margin: 0 0 7px; letter-spacing: -0.02em; line-height: 1.4; }
.gives4 p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--sp-read); }

/* 사진 — 대표님이 주시면 여기에 들어간다. 없으면 자리 자체가 사라진다 */
.shot { margin: var(--gap-2xl) 0 0; }
.shot img { width: 100%; height: auto; filter: grayscale(100%) contrast(1.04); display: block; }
.shot figcaption { margin-top: 10px; font-size: 13px; color: var(--sp-read); }

@media (max-width: 900px) {
  .steps4 { grid-template-columns: 1fr 1fr; }
  .steps4 > li:nth-child(2n)::after { display: none; }
  .core6, .sigs2, .gives4 { grid-template-columns: 1fr 1fr; gap: var(--gap-xl); }
}
@media (max-width: 640px) {
  .hnums { grid-template-columns: 1fr 1fr; }
  .hnum b { font-size: 26px; }
  .steps4 { grid-template-columns: 1fr; gap: var(--gap-md); }
  .steps4 > li::after { display: none; }
  .core6, .sigs2, .gives4 { grid-template-columns: 1fr; gap: var(--gap-lg); }
}

/* --------------------------------------------------------------------------
   압축 타임라인 — 랜딩용. 단계당 한 줄만 보여주고 상세는 /program 으로 넘긴다.
   -------------------------------------------------------------------------- */
.mini { list-style: none; margin: var(--gap-xl) 0 0; padding: 0; border-top: 1px solid var(--sp-line); }
.mini > li {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--gap-xl);
  padding: var(--gap-md) 0; border-bottom: 1px solid var(--sp-rule); align-items: baseline;
}
.mini__when { font-family: var(--font-display); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini__when small { display: block; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--sp-muted); margin-top: 3px; }
.mini__what { font-size: 15.5px; line-height: 1.7; color: var(--sp-muted); }
.mini__what b { display: block; color: var(--sp-black); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 3px; }

/* 제공 내용 — 랜딩에서는 제목 + 한 줄만 */
.gives-lite { list-style: none; margin: var(--gap-xl) 0 0; padding: 0; border-top: 1px solid var(--sp-line); }
.gives-lite li {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--gap-xl);
  padding: var(--gap-md) 0; border-bottom: 1px solid var(--sp-rule);
  font-size: 15.5px; line-height: 1.7; color: var(--sp-muted);
}
.gives-lite b { color: var(--sp-black); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   고객 구매 신호 A~D
   색만으로 구분하지 않는다 — 등급 문자와 '목표' 라벨을 함께 쓴다.
   -------------------------------------------------------------------------- */
.sigs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg); margin-top: var(--gap-xl); }
.sig { border-top: 3px solid var(--sp-line); padding-top: var(--gap-md); }
.sig--target { border-top-color: var(--sp-green); }
.sig__g {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1;
}
.sig--target .sig__g { color: var(--sp-green); }
.sig__tag {
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--sp-green); border: 1px solid var(--sp-green); padding: 2px 6px;
}
.sig__t { font-size: 15px; font-weight: 800; margin: 12px 0 6px; line-height: 1.45; }
.sig p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--sp-muted); }

/* --------------------------------------------------------------------------
   매칭 4단계 — 가로 스테퍼(PC) / 번호형 세로 목록(모바일)
   -------------------------------------------------------------------------- */
.flow4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg); margin-top: var(--gap-xl); counter-reset: f; }
.flow4 > li { list-style: none; counter-increment: f; padding-top: var(--gap-md); border-top: 1px solid var(--sp-rule); }
.flow4 > li::before {
  content: counter(f, decimal-leading-zero);
  display: block;
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  letter-spacing: var(--ls-label); color: var(--sp-orange-deep);
  margin-bottom: 10px;
}
.flow4 h3 { font-size: 16px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.02em; line-height: 1.4; }
.flow4 p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--sp-muted); }

/* --------------------------------------------------------------------------
   선발 절차 — 실제로 순서가 있는 내용이라 화살표로 잇는다
   -------------------------------------------------------------------------- */
.pipe {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  margin: var(--gap-xl) 0 0; padding: 0; list-style: none;
}
.pipe li { font-size: 15px; font-weight: 700; white-space: nowrap; }
.pipe li:not(:last-child)::after {
  content: ''; display: inline-block;
  width: 7px; height: 7px; margin: 0 16px; vertical-align: 1px;
  border-top: 2px solid var(--sp-orange); border-right: 2px solid var(--sp-orange);
  transform: rotate(45deg);
}

/* 평가 항목 — 번호가 우선순위를 뜻하지 않으므로 마커를 쓰지 않는다 */
.crit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap-2xl); margin: var(--gap-xl) 0 0; padding: 0; list-style: none; }
.crit li {
  font-size: 15.5px; font-weight: 600; padding: 12px 0;
  border-bottom: 1px solid var(--sp-rule);
}

/* --------------------------------------------------------------------------
   지원 일정 — PC 표 / 모바일 세로 리스트 (같은 마크업)
   -------------------------------------------------------------------------- */
/* <dl> 이다. 브라우저 기본 스타일이 dl 에 위아래 1em 여백을 주는데, margin-top 은
   여기서 덮지만 margin-bottom 은 덮는 규칙이 없어서 16px 이 그대로 남는다.
   div 였을 때와 간격이 달라지지 않도록 0 으로 눌러 둔다. */
.sched { margin-top: var(--gap-xl); margin-bottom: 0; border-top: 1px solid var(--sp-line); }
.sched__row {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--gap-lg);
  padding: 13px 0; border-bottom: 1px solid var(--sp-rule);
  align-items: baseline;
}
.sched__row dt { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.sched__row dd { margin: 0; font-size: 15.5px; font-weight: 600; }
.sched__row--now dt, .sched__row--now dd { color: var(--sp-orange-deep); }

/* --------------------------------------------------------------------------
   지원 전 확인 조건 — 순서 없는 6개 항목
   -------------------------------------------------------------------------- */
.conds { margin-top: var(--gap-xl); border-top: 1px solid var(--sp-line); }
.cond { padding: var(--gap-lg) 0; border-bottom: 1px solid var(--sp-rule); display: grid; grid-template-columns: 200px minmax(0,1fr); gap: var(--gap-xl); }
.cond h3 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -0.02em; line-height: 1.4; }
.cond p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--sp-charcoal); max-width: 58ch; }
.cond p + p { margin-top: 10px; }
/* ⚠️ .cond 는 `200px 1fr` 2열 그리드다. h3 + p 두 개면 딱 맞지만, 설명이 두 문단이면
   세 번째 요소가 다음 줄의 '첫 칸'(200px)으로 떨어져 글이 세로로 길게 눌린다.
   제목 다음 요소는 전부 오른쪽 칸에 두어, 문단이 몇 개든 깨지지 않게 한다. */
.cond > *:nth-child(n+3) { grid-column: 2; }
@media (max-width: 780px) { .cond > *:nth-child(n+3) { grid-column: 1; } }

/* --------------------------------------------------------------------------
   FAQ — 아코디언은 여기에만 쓴다 (핵심 조건은 본문에 이미 노출돼 있다)
   -------------------------------------------------------------------------- */
.faq { margin-top: var(--gap-xl); border-top: 1px solid var(--sp-line); max-width: 76ch; }
.faq details { border-bottom: 1px solid var(--sp-rule); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: var(--gap-md) 40px var(--gap-md) 0;
  font-size: 17px; font-weight: 700; line-height: 1.55;
  position: relative; text-wrap: pretty;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 26px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--sp-muted); border-bottom: 2px solid var(--sp-muted);
  transform: rotate(45deg);
  transition: transform .18s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq summary:hover { color: var(--sp-orange-deep); }
.faq summary:hover::after { border-color: var(--sp-orange-deep); }
.faq__a { padding: 0 40px var(--gap-lg) 0; margin: 0; font-size: 16px; line-height: 1.8; color: var(--sp-charcoal); max-width: 62ch; }
.faq__a + .faq__a { padding-top: 0; margin-top: -8px; }

/* --------------------------------------------------------------------------
   최종 CTA — 유일하게 남긴 '면'
   -------------------------------------------------------------------------- */
.final {
  margin-top: var(--gap-3xl);
  background: var(--sp-black); color: var(--sp-paper);
  padding: var(--gap-2xl) var(--gap-xl);
  text-align: center;
}
.final h2 {
  font-size: clamp(25px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.03em;
  margin: var(--gap-lg) 0 var(--gap-md); line-height: 1.25; text-wrap: balance;
}
.final p { margin: 0 auto var(--gap-xl); max-width: 48ch; font-size: 17px; line-height: 1.75; color: var(--sp-muted-dk); }
.final__arrow { display: flex; justify-content: center; }
.final__cta { display: flex; align-items: center; justify-content: center; gap: var(--gap-lg); flex-wrap: wrap; }
.final .link-cta { color: var(--sp-paper); }
.final .link-cta:hover { color: var(--sp-orange); }
/* 버튼 묶음과 마감 안내 사이. 24px 은 두 덩어리가 한 줄처럼 붙어 보였다.
   여기서 마감 안내는 CTA 의 부연이 아니라 별개의 정보다. */
.final__note { margin: var(--gap-2xl) 0 0; font-size: 14px; color: var(--sp-muted-dk); }
.final__note a { color: var(--sp-paper); border-bottom: 1px solid var(--sp-muted-dk); }

/* --------------------------------------------------------------------------
   조건부 하위 입력 — 위 선택지에 딸린 추가 질문
   들여쓰기와 왼쪽 선으로 '앞 질문에 딸린 것'임을 보인다. 박스로 감싸지 않는다.
   NN/g: progressive disclosure 는 조건부 항목에만 쓴다 — 필수 필드에는 쓰지 않는다.
   -------------------------------------------------------------------------- */
.subfield {
  margin: calc(var(--gap-md) * -1) 0 var(--gap-lg);
  padding-left: var(--gap-lg);
  border-left: 2px solid var(--sp-orange);
}
.subfield > .field:last-child,
.subfield > .form-row:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .subfield { padding-left: var(--gap-md); } }

/* --------------------------------------------------------------------------
   '드리는 것' 전체 폭 판 — 연구자 히어로 전용
   히어로 오른쪽을 그림에 내주었으므로 5칸으로 아래에 편다.
   숫자 줄(.hnums)과 같은 규칙: 위는 굵은 선, 칸 사이는 헤어라인, 양끝은 여백 없음.
   -------------------------------------------------------------------------- */
.quick--wide { border-top: 0; padding-top: 0; }
.quick--wide .quick__t { margin-bottom: var(--gap-sm); }
.quick__grid {
  margin: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  border-top: 2px solid var(--sp-black);
  border-bottom: 1px solid var(--sp-rule);
}
.quick__cell { padding: var(--gap-lg); border-left: 1px solid var(--sp-rule); }
.quick__cell:first-child { border-left: 0; padding-left: 0; }
.quick__cell:last-child { padding-right: 0; }
.quick__cell dt {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--sp-muted); margin: 0 0 8px;
}
.quick__cell dd { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.55; }

@media (max-width: 980px) {
  .quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick__cell { padding: var(--gap-md); }
  .quick__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .quick__cell:nth-child(even) { padding-right: 0; }
  .quick__cell:nth-child(n+3) { border-top: 1px solid var(--sp-rule); }
}
@media (max-width: 560px) {
  .quick__grid { grid-template-columns: 1fr; }
  .quick__cell { padding: var(--gap-md) 0; border-left: 0; }
  .quick__cell:nth-child(n+2) { border-top: 1px solid var(--sp-rule); }
}

/* --------------------------------------------------------------------------
   상장 사례 — 어두운 면
   .final 과 같은 처리를 쓴다. 브랜드에서 '면'은 아껴 쓰는 장치라 두 곳뿐이다.
   여기에 어두운 면을 쓰는 이유는 장식이 아니라 제약이다 — 세 회사 로고가 모두
   밝은 색으로 배포돼서, 밝은 종이 위에 올리려면 남의 상표를 반전해야 한다.
   -------------------------------------------------------------------------- */
.exits {
  background: var(--sp-black); color: var(--sp-paper);
  padding: var(--gap-2xl) var(--gap-xl);
}
.exits__h {
  font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.28; margin: var(--gap-md) 0 var(--gap-md); text-wrap: balance;
}
.exits__dek { margin: 0 0 var(--gap-2xl); font-size: 16px; line-height: 1.75; color: var(--sp-muted-dk); }

.exits__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-xl);
}
/* 회사 사이를 가르는 건 헤어라인 하나. 카드로 감싸지 않는다. */
.exit + .exit { border-left: 1px solid var(--sp-line-dark); padding-left: var(--gap-xl); }

/* 로고는 세로 높이를 맞춘다. 가로폭은 상표마다 달라서 맞추면 왜곡된다. */
.exit__logo { display: block; height: 32px; width: auto; max-width: 100%; }
.exit__when {
  margin: var(--gap-md) 0 var(--gap-lg);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--sp-orange); font-variant-numeric: tabular-nums;
}
.exit__facts { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.exit__facts > div { display: grid; grid-template-columns: 40px 1fr; gap: 10px; }
.exit__facts dt {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--sp-muted-dk); padding-top: 3px;
}
.exit__facts dd { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--sp-paper); }

@media (max-width: 900px) {
  .exits__list { grid-template-columns: 1fr; gap: var(--gap-2xl); }
  /* 한 열로 접히면 세로선이 의미를 잃는다 — 가로선으로 바꾼다 */
  .exit + .exit {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--sp-line-dark); padding-top: var(--gap-2xl);
  }
}
@media (max-width: 640px) {
  .exits { padding: var(--gap-xl) var(--gap-lg); }
}

/* --------------------------------------------------------------------------
   모바일 하단 고정 CTA — Hero 를 지나면 나타나고 최종 CTA 에서 사라진다
   -------------------------------------------------------------------------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--sp-paper);
  border-top: 1px solid var(--sp-line);
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  display: none;
  transform: translateY(100%);
  transition: transform .22s var(--ease);
}
.sticky.is-on { transform: translateY(0); }
.sticky__note { display: block; text-align: center; font-size: 12px; color: var(--sp-muted); margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }

/* --------------------------------------------------------------------------
   지원 전 자기선별 체크
   -------------------------------------------------------------------------- */
.gate { margin-top: var(--gap-xl); }
.gate__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sp-line); }
.gate__item { border-bottom: 1px solid var(--sp-rule); }
.gate__item label {
  display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 14px;
  align-items: start;
  padding: var(--gap-md) 0; cursor: pointer;
  font-size: 16.5px; font-weight: 600; line-height: 1.6;
}
.gate__item input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--sp-orange); cursor: pointer; }
.gate__item label:hover { color: var(--sp-orange-deep); }
.gate__warn {
  border-left: 2px solid var(--sp-orange); padding: 2px 0 2px var(--gap-md);
  margin: var(--gap-lg) 0 0; font-size: 15px; line-height: 1.75; color: var(--sp-charcoal); max-width: 54ch;
}

/* 동의 체크 — 필수와 선택을 한 줄 안에서 구분해 보여준다.
   하나의 체크박스로 여러 동의를 묶지 않는다. */
.cchk { display: block; border-bottom: 1px solid var(--sp-rule); }
.cchk:first-of-type { border-top: 1px solid var(--sp-line); }
.cchk > span {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px;
  align-items: start; padding: 13px 0; cursor: pointer;
  font-size: 15.5px; font-weight: 600; line-height: 1.6;
}
.cchk > span:hover { color: var(--sp-orange-deep); }
.cchk input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sp-orange); cursor: pointer; }
.cchk .req { color: var(--sp-orange-deep); }
.cchk .sel { color: var(--sp-muted); font-weight: 600; }

/* --------------------------------------------------------------------------
   시작 방법 — 구글 로그인 / 로그인 없이
   -------------------------------------------------------------------------- */
.startbox { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); margin: var(--gap-lg) 0 0; align-items: start; }
.startbox__why { margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--sp-muted); }
.startbox__why b { color: var(--sp-charcoal); font-weight: 700; }

/* 구글 마크 — 외부 이미지를 부르지 않고 브랜드 4색을 data URI 로 인라인한다 */
.gicon {
  width: 18px; height: 18px; margin-right: 10px; flex: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C39.9 35.6 44 30.4 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E");
}

/* 작성자 상태 바 — 어디에 저장되는지가 늘 보여야 한다 */
.whoami {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md);
  flex-wrap: wrap;
  border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-rule);
  padding: 12px 0; margin: var(--gap-lg) 0 var(--gap-2xl);
  font-size: 13.5px; color: var(--sp-muted);
}
.whoami__who b { color: var(--sp-black); font-weight: 700; }
.whoami__act button, .whoami__act a {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--sp-orange-deep);
  text-decoration: underline; text-underline-offset: 3px; font-family: inherit;
}

@media (max-width: 640px) {
  .startbox { grid-template-columns: 1fr; gap: var(--gap-lg); }
}

/* --------------------------------------------------------------------------
   지원서 — 글자수 카운터 · 자동저장 표시
   -------------------------------------------------------------------------- */
.qa { margin-bottom: var(--gap-2xl); }
.qa__q { font-size: 17px; font-weight: 800; line-height: 1.6; margin: 0 0 10px; letter-spacing: -0.015em; text-wrap: pretty; }
.qa__q .qa__n { color: var(--sp-orange-deep); font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-label); display: block; margin-bottom: 8px; }
.qa__hint { font-size: 14.5px; line-height: 1.7; color: var(--sp-muted); margin: 0 0 var(--gap-md); max-width: 62ch; }
.qa .textarea { min-height: 200px; }

.count { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 7px; font-size: 13px; color: var(--sp-muted); }
.count b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sp-charcoal); }
.count.is-short b { color: var(--sp-orange-deep); }
.count.is-ok b { color: var(--sp-green); }

.saved { font-size: 13px; color: var(--sp-muted); display: inline-flex; align-items: center; gap: 7px; }
.saved::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-green); }
.saved[hidden] { display: none; }

/* 자격 확인 예/아니오 행 */
.yn { border-top: 1px solid var(--sp-rule); }
.yn__row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--gap-lg);
  align-items: center; padding: 13px 0; border-bottom: 1px solid var(--sp-rule);
}
.yn__q { font-size: 15.5px; line-height: 1.6; font-weight: 600; }
.yn__opts { display: flex; gap: 6px; flex: none; }
.yn__opts .opt { padding: 7px 16px; font-size: 14px; }

/* --------------------------------------------------------------------------
   관리자
   -------------------------------------------------------------------------- */
/* .wrap 의 좌우 24px 을 덮어쓰지 않도록 세로 여백만 지정한다.
   `padding: X 0 Y` 로 쓰면 같은 요소에 걸린 .wrap 의 좌우 패딩이 0 이 되어
   본문이 화면 가장자리에 붙는다. */
.admin { padding-top: var(--gap-lg); padding-bottom: var(--gap-3xl); }
.admin-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-lg); flex-wrap: wrap; margin-bottom: var(--gap-lg); }
.admin-user { font-size: 13px; color: var(--sp-muted); }
.admin-user b { color: var(--sp-black); }

.adm-sum { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-lg); margin-bottom: var(--gap-xl); border-top: 1px solid var(--sp-line); padding-top: var(--gap-md); }
.adm-sum dt { font-size: 12px; color: var(--sp-muted); font-weight: 600; margin: 0 0 4px; }
.adm-sum dd { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.adm-sum dd small { font-size: 13px; font-weight: 600; color: var(--sp-muted); margin-left: 4px; font-family: var(--font-body); }

/* 탭 — 아래 헤어라인 하나. 누를 수 있으므로 활성 탭에만 오렌지 밑줄. */
.tabs { display: flex; gap: var(--gap-lg); border-bottom: 1px solid var(--sp-line); margin-bottom: var(--gap-xl); overflow-x: auto; }
.tab {
  border: 0; background: none; padding: 11px 0 12px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--sp-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--sp-black); }
.tab[aria-selected="true"] { color: var(--sp-black); border-bottom-color: var(--sp-orange); }
.tab span {
  display: inline-block; margin-left: 7px; font-family: var(--font-display);
  font-size: 12px; font-weight: 700; color: var(--sp-muted); font-variant-numeric: tabular-nums;
}

/* 공개 페이지용 탭 — 관리자보다 크게, 스크롤해도 따라오게 */
.tabs--page {
  position: sticky; top: 68px; z-index: 30;
  background: var(--sp-paper);
  gap: var(--gap-xl); margin-bottom: var(--gap-2xl);
}
.tabs--page .tab { font-size: 16px; padding: 15px 0 16px; }
.tabs--page + section { padding-top: 0; }
@media (max-width: 640px) {
  .tabs--page { top: 58px; gap: var(--gap-lg); }
  .tabs--page .tab { font-size: 14.5px; }
}

.statusbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--gap-lg); }
.sfilter {
  border: 1px solid var(--sp-line); background: transparent; padding: 6px 13px;
  font-size: 13px; font-weight: 600; color: var(--sp-charcoal); cursor: pointer;
}
.sfilter:hover { border-color: var(--sp-black); }
.sfilter[aria-pressed="true"] { background: var(--sp-black); border-color: var(--sp-black); color: var(--sp-paper); }

.table-wrap { overflow-x: auto; }
.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.data th, .data td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--sp-rule); vertical-align: middle; }
.data th {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted);
  font-weight: 700; border-bottom: 1px solid var(--sp-line); white-space: nowrap;
}
.data tbody tr { cursor: pointer; }
.data tbody tr:hover { background: rgba(225, 78, 0, .04); }
.data .id { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data .nm { font-weight: 700; }
.data .dim { color: var(--sp-muted); }

.badge {
  display: inline-block; border: 1px solid var(--sp-line); padding: 2px 9px;
  font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--sp-charcoal);
}
.badge--new { border-color: var(--sp-orange); color: var(--sp-orange-deep); }
.badge--pass { border-color: var(--sp-green); color: var(--sp-green); }
.badge--drop { color: var(--sp-muted); }

/* 상세 서랍 */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(17,17,17,.55); z-index: 90; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%);
  background: var(--sp-paper); z-index: 91; overflow-y: auto; padding: var(--gap-xl);
  border-left: 1px solid var(--sp-line);
}
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap-md); margin-bottom: var(--gap-lg); }
.drawer__close { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--sp-muted); padding: 0 4px; }
.drawer__close:hover { color: var(--sp-black); }
.drawer__sec { margin-top: var(--gap-xl); }
.drawer__sec h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted); font-weight: 700; margin: 0 0 var(--gap-sm); }
.drawer__essay { font-size: 14.5px; line-height: 1.8; color: var(--sp-charcoal); white-space: pre-wrap; margin: 0; }

/* 평가 입력 */
.score { border-top: 1px solid var(--sp-rule); }
.score__row { display: grid; grid-template-columns: minmax(0,1fr) 96px; gap: var(--gap-md); align-items: center; padding: 9px 0; border-bottom: 1px solid var(--sp-rule); }
.score__row span { font-size: 14px; }
.score__row small { display: block; color: var(--sp-muted); font-size: 12px; }
.score__row .input { padding: 7px 10px; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.score__total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--gap-md) 0 0; font-weight: 700; }
.score__total b { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .chero__in { grid-template-columns: 1fr; gap: var(--gap-2xl); }
  .chero__title { max-width: 14ch; }
  .strip { grid-template-columns: 1fr 1fr; }
  .sigs { grid-template-columns: 1fr 1fr; }
  .flow4 { grid-template-columns: 1fr 1fr; }
  .techs { gap: var(--gap-lg) var(--gap-xl); }
}

@media (max-width: 780px) {
  .sec { padding-top: var(--gap-2xl); }
  .two, .two--wide { grid-template-columns: 1fr; gap: var(--gap-xl); }
  .techs { grid-template-columns: 1fr; }
  .gives { grid-template-columns: 1fr; gap: var(--gap-xl); }
  .crit { grid-template-columns: 1fr; }

  /* 2열 비교표 → 카드 2개로 */
  .split { grid-template-columns: 1fr; }
  .split__col { padding: var(--gap-md) 0; border-bottom: 1px solid var(--sp-rule); }
  .split__col + .split__col { border-left: 0; padding-left: 0; }

  .phase { grid-template-columns: 1fr; gap: var(--gap-sm); }
  .phase__load { margin-top: 6px; }
  .cond { grid-template-columns: 1fr; gap: var(--gap-sm); }
  .sched__row { grid-template-columns: 1fr; gap: 2px; }
  .sched__row dt { font-size: 13px; color: var(--sp-muted); }
  .mini > li { grid-template-columns: 1fr; gap: 4px; }
  .gives-lite li { grid-template-columns: 1fr; gap: 2px; }

  .adm-sum { grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-md); }
  .yn__row { grid-template-columns: 1fr; gap: 10px; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .chero { padding: var(--gap-xl) 0 var(--gap-xl); }
  .chero__lead { font-size: 17px; }
  .sec__dek { font-size: 16px; }
  .strip { grid-template-columns: 1fr; gap: var(--gap-md); }
  .sigs { grid-template-columns: 1fr; }
  .flow4 { grid-template-columns: 1fr; }
  .pipe li:not(:last-child)::after { margin: 0 10px; }
  .final { padding: var(--gap-xl) var(--gap-lg); }
  .adm-sum { grid-template-columns: 1fr 1fr; }

  /* 폼 — 좁은 화면에서 단계 라벨을 접고 주 버튼을 아래로 */
  .step__txt { display: none; }
  .step:not(:last-child)::after { margin: 0 8px; }
  .summary__row { grid-template-columns: 1fr; gap: 2px; }
  .actions { flex-direction: column-reverse; }

  /* 하단 고정 CTA 는 모바일에서만 */
  .sticky { display: block; }
  body.has-sticky { padding-bottom: 92px; }
}

/* ==========================================================================
   보조 텍스트 대비 상향 — 반드시 파일 맨 끝에 둔다.
   위쪽 컴포넌트 규칙들이 --sp-muted 를 직접 지정하므로, 같은 특이도에서
   나중에 선언해야 이긴다. 13~15px 작은 글씨를 5.14:1 → 8.16:1 로 올린다.
   ========================================================================== */
.field-note,
.field__hint,
.sp-small,
.quick__row dt,
.quick__warn,
.strip li span,
.startbox__why,
.count,
.whoami,
.steps4 p,
.gives-lite li,
.sig p,
.flow4 p,
.qa__hint,
.consent__body,
.tech__sum { color: var(--sp-read); }

/* 검은 배경 위 보조 텍스트도 같은 기준으로 */
.final p,
.final__note,
.flowband .merge__who p,
.flowband .core__cell p,
.flowband .verdict__a { color: var(--sp-read-dk); }

/* ==========================================================================
   핵심 장면 두 개만 제목을 키운다.
   제목 크기가 전부 같으면 스캔할 때 위계가 생기지 않는다.
   '작동 방식'과 '고객 신호' 두 장면이 이 페이지의 중심이다.
   ========================================================================== */
.sec__h--lead { font-size: clamp(29px, 4vw, 42px); line-height: 1.2; }

/* ==========================================================================
   사진과 일러스트
   브랜드가 흑백 + 오렌지 한 점이라, 사진은 굽는 단계에서 흑백으로 변환했다.
   컬러를 그대로 두면 초록 기둥·컬러 포스터가 오렌지 신호와 싸운다.
   ========================================================================== */

/* Hero 오른쪽 컬럼의 일러스트 — 배경이 투명한 선화라 페이퍼 바탕에 그대로 얹힌다.
   전에는 Hero 아래 전폭으로 깔았는데, 오른쪽 컬럼으로 옮기면서
   원본 파노라마(1916×821)에서 밀도가 높은 오른쪽 구역만 잘라 썼다 (1016×821). */
.chero__art { margin: 0; }
.chero__art img { width: 100%; height: auto; display: block; }

/* 본문 사진 */
.shot { margin: var(--gap-2xl) 0 0; }
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption { margin-top: 10px; font-size: 13px; color: var(--sp-read); }
.shot--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); align-items: center; }
@media (max-width: 780px) { .shot--split { grid-template-columns: 1fr; gap: var(--gap-lg); } }

/* ==========================================================================
   STEP 2.5 — 논문·실증 조사 기반 수정 (2026-08)

   파일 맨 끝에 모아 둔 이유: 위쪽 선언과 특이도가 같아서, 나중에 선언해야
   이긴다. 항목마다 근거와 그 근거의 신뢰 수준을 함께 적었다.
   근거가 약한 것은 적용하지 않았고, 무엇을 왜 뺐는지는 파일 끝에 남겼다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 건너뛰기 링크 — WCAG 2.4.1 Bypass Blocks (Level A)
   화면 밖에 두되 display:none 은 쓰지 않는다. 그러면 포커스를 못 받는다.
   -------------------------------------------------------------------------- */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--sp-black); color: var(--sp-paper);
  padding: 12px 18px; font-size: 15px; font-weight: 700;
  text-decoration: none;
  transition: top .12s var(--ease);
}
.skip:focus { top: 8px; outline: 2px solid var(--sp-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }

/* --------------------------------------------------------------------------
   2. 본문 자간 −0.01em
   이혜원 외 (2019), 「글자 간 간격이 한글 문장의 읽기 속도에 미치는 영향」.
   자간을 인터넷 표준의 0.5/0.75/1/1.5/2배로 조작해 읽기 속도를 측정했더니
   임계 간격이 표준의 0.75배 — 표준보다 좁히는 쪽이 읽기 효율에 유리했다.
   ※ WCAG 1.4.12 가 사용자의 자간 확대(글자크기의 0.12배)를 허용하도록 요구하므로
     px 가 아니라 em 으로 둔다. 사용자 스타일시트가 덮어쓸 수 있어야 한다.
   ※ −0.05em 이상 조이는 것은 근거가 없다. 제목은 이미 개별 지정이 있어 영향 없음.
   -------------------------------------------------------------------------- */
body { letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   3. 줄 길이 — .notlist 만 데스크톱에서 86자였다
   신종현·박민용 (2003), 「읽기 형태, 줄 길이, 줄 간격이 한글 웹 문서의
   가독성에 미치는 영향」, 대한산업공학회지. 정독/속독 × 줄 길이 × 행간을
   교차 측정해 한 줄 50자에서 읽기 속도가 가장 좋았다.
   ※ 흔히 인용되는 "45~75자"는 Bringhurst 의 조판 관행이지 실험 근거가 아니다.
     한국어 실증치인 50자를 기준으로 삼는다. 나머지 본문은 이미 30~43자다.
   -------------------------------------------------------------------------- */
.notlist { max-width: 50ch; }

/* --------------------------------------------------------------------------
   4. 강조색 경쟁 정리
   페이지에서 오렌지가 쓰인 지점을 전수 계측하니 27곳이었다. 브랜드 모티프
   (점 9 + 화살촉 5)를 빼도 13곳이고, 그중 .link-cta 의 오렌지 밑줄 7개가
   1차 CTA 2개와 같은 색을 쓰고 있었다.

   근거 둘.
     · von Restorff 효과는 강조가 '고립'으로 작동한다고 말한다. 강조 지점이
       늘면 효과가 약해지는 게 아니라 사라진다.
     · 색 이상치 탐지 실험(arXiv 2103.06084)에서 색 값이 7개가 되는 순간
       오류율 3%→29%, 반응시간 4초→11초로 급변했다.
     · Itti & Koch 돌출성 모형: 시각 위계는 절대 밝기가 아니라 국소 대비로
       정해진다. STEP 2 에서 보조 텍스트 대비를 5.14:1→8.16:1 로 올린 만큼
       CTA 의 상대적 돌출도가 희석됐다.

   그래서 보조 링크의 밑줄은 평상시 차콜, hover 에서만 오렌지로 바꾼다.
   점·화살촉 모티프는 반복 패턴이라 '탐색 타깃'으로 작동하지 않으므로 둔다.
   -------------------------------------------------------------------------- */
.link-cta { border-bottom-color: var(--sp-charcoal); }
.link-cta:hover { border-bottom-color: var(--sp-orange); }
/* 검은 배경 위에서는 차콜이 보이지 않는다 */
.final .link-cta { border-bottom-color: var(--sp-muted-dk); }
.final .link-cta:hover { border-bottom-color: var(--sp-orange); }

/* --------------------------------------------------------------------------
   5. 터치 타깃 44px
   계측 결과 모바일에서 21개 중 11개가 기준 미달이었다.
   (푸터 링크 16px, 이메일 21px, 내비 24px, 인라인 링크 28~31px)

   근거를 정확히 적어 둔다. Apple 44pt / Google 48dp 는 근거 논문이 공개되지
   않은 플랫폼 관행이고, WCAG 2.2 의 24px 도 왜 24인지 문서가 정당화하지 않는다.
   실제 학술 근거는 Parhi, Karlson & Bederson (2006, MobileHCI) 하나다.
   타깃 3.0~26.4mm 를 한 손 엄지로 조작시켜 9.2~9.6mm 에서 오류율이 수렴하고
   그 이상 키워도 이득이 없었다. 9.2mm ≈ 35 CSS px, 여유를 두어 44px.

   시각적 크기는 그대로 두고 클릭 영역만 키운다.
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 780px) {
  .site-header__nav a,
  .site-footer a,
  .final__note a,
  .brand,
  .link-cta,
  .qa summary,
  .tabs--page a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* 푸터는 링크가 촘촘히 붙어 있어 세로 간격도 함께 벌린다 */
  .site-footer__in { gap: var(--gap-md) var(--gap-lg); }
}

/* --------------------------------------------------------------------------
   6. Hero 오른쪽 컬럼의 244px 공백
   어느 화면 폭에서든 왼쪽 527px / 오른쪽 284px 로, 오른쪽 아래가 244px 비었다.
   여백 자체가 나쁜 게 아니라 '의도한 여백'이 아니라 '남은 공간'으로 보이는 게
   문제다. 숫자 네 칸이 남는 높이를 나눠 갖게 해서 두 컬럼의 바닥을 맞춘다.
   -------------------------------------------------------------------------- */
@media (min-width: 781px) {
  /* 본문과 그림의 높이가 정확히 같을 이유는 없다. 가운데로 맞추면 남는 높이가
     위아래로 갈려서 '남은 공간'이 아니라 '띄운 공간'으로 읽힌다. */
  .chero__in { align-items: center; }
}

/* --------------------------------------------------------------------------
   7. Hero 일러스트 캡션
   -------------------------------------------------------------------------- */
.chero__art figcaption {
  margin-top: 12px; font-size: 14px; line-height: 1.6;
  color: var(--sp-read);
}

/* --------------------------------------------------------------------------
   8. 마감 D-N 정적 표기
   Ariely & Wertenbroch (2002): 외부에서 명확히 부과된 마감이 자기부과 마감보다
   성과가 좋았다. 카운트다운 타이머는 쓰지 않는다 — 상승 효과는 마케팅 통념이고,
   좌절·스트레스 상승과 선의 지각 저하 쪽에만 동료심사 근거가 있다.
   -------------------------------------------------------------------------- */
.dcount {
  display: inline-block; margin-left: 7px;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--sp-orange-deep);
  border: 1px solid currentColor; padding: 1px 6px;
  vertical-align: 2px;
}
.dcount--soon { color: var(--sp-white); background: var(--sp-orange-deep); border-color: var(--sp-orange-deep); }

/* ==========================================================================
   적용하지 않은 것 — 조사했으나 근거가 약해서 뺐다. 다음에 다시 꺼내지 않도록 기록.

   · 행간 조정 (현재 1.65~1.75 유지)
       한글 행간의 동료심사 실증이 사실상 없다. 널리 도는 "모바일 155%"는
       2차 인용이고, "200%"는 전문가 설문이지 읽기 속도 측정이 아니다.
       WCAG 1.5 는 최소 요구치다. 1.5~1.8 사이면 어디든 방어 가능하고
       그 안에서의 선택은 취향이다.

   · 여백 확대
       이해도 효과 근거가 소표본·비심사(Chaparro 2004)이고 읽기 속도는 오히려
       느려진다. 게다가 NN/g "illusion of completeness" 에 따르면 섹션 간
       과도한 여백은 '가짜 바닥'을 만들어 스크롤을 끊는다.
       ⚠️ "여백이 이해도를 20% 높인다 (Lin 2004)" 는 완전한 오인용이다.
         Lin 교수 본인이 부인했다. 이 수치를 다시 인용하지 말 것.

   · 8pt 그리드 정비
       사용자 성능 근거가 전무하다. 팀 일관성·구현 효율의 문제이지
       가독성 항목이 아니다.

   · word-break: keep-all
       이미 brand.css 에 적용되어 있다. 제목 9개를 전수 검사한 결과
       어절 중간에서 끊기는 곳이 0건이었다.

   · 전폭 배경 밴드 정리 / 스크롤 연동 애니메이션 제거
       확인해 보니 해당 사항이 없었다. 배경 밴드는 .final 하나뿐이고,
       IntersectionObserver 는 모바일 고정 CTA 토글 용도뿐이다.
   ========================================================================== */

/* ==========================================================================
   STEP 2.5 — 지원서 검증 UI

   WCAG 3.3.1 (Error Identification, A) 은 오류를 '텍스트로' 식별할 것을,
   3.3.3 (Error Suggestion, AA) 은 '수정 방법'을 제시할 것을 요구한다.
   색만으로 표시하면 3.3.1 위반이므로 여기서는 색 + 굵은 선 + 문장을 함께 쓴다.
   ========================================================================== */

/* 필수 표기 범례 */
.reqlegend {
  margin: 0 0 var(--gap-lg);
  font-size: 13px; color: var(--sp-read);
}
.reqlegend span { color: var(--sp-orange-deep); font-weight: 700; }

/* 필드별 오류 문구 */
.field__err {
  margin: 8px 0 0;
  font-size: 14px; line-height: 1.6; font-weight: 600;
  color: #a33000;                    /* paper 위 7.1:1 — 오렌지 계열이되 AA 를 넘긴다 */
  padding-left: 11px;
  border-left: 3px solid var(--sp-orange);
}
.field__err[hidden] { display: none; }

/* 오류가 난 입력 자체도 표시한다. 테두리만으로는 색맹 사용자에게 전달되지 않아
   문구(.field__err)가 항상 함께 나온다는 점이 중요하다. */
.field.has-err .input,
.field.has-err .textarea { border-color: var(--sp-orange); border-width: 2px; }
.field.has-err .cvzone { border-color: var(--sp-orange); }

/* 제출 시 요약 — 어느 항목이 왜 걸렸는지 전부 나열한다 */
.form-error__list {
  margin: 10px 0 0; padding-left: 18px;
  font-weight: 500; line-height: 1.65;
}
.form-error__list li { margin-top: 5px; }

/* ── 이력서 링크 대체 ─────────────────────────────────────────────────── */
.cvalt { margin-top: var(--gap-md); }
.cvalt > summary {
  cursor: pointer; font-size: 14px; font-weight: 700;
  color: var(--sp-black);
  border-bottom: 2px solid var(--sp-charcoal);
  display: inline-block; padding-bottom: 2px;
}
/* 터치 타깃 확장은 터치 기기에서만. 데스크톱에서 line-height 로 44px 을 만들면
   border-bottom 이 글자에서 한참 떨어진 곳에 그려져 밑줄로 안 보인다. */
@media (pointer: coarse), (max-width: 780px) {
  .cvalt > summary { min-height: 44px; display: inline-flex; align-items: center; }
}
.cvalt > summary:hover { border-bottom-color: var(--sp-orange); }
.cvalt > summary::marker { content: ''; }
.cvalt > summary::-webkit-details-marker { display: none; }
.cvalt__body { margin-top: var(--gap-md); }

/* ── 지원서 미리보기 ──────────────────────────────────────────────────── */
.preview { margin: 0 0 var(--gap-xl); border-top: 2px solid var(--sp-black); }
.preview > summary {
  cursor: pointer; list-style: none;
  padding: var(--gap-md) 0;
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
  /* space-between 을 쓰면 제목 끝의 오렌지 점(.sp-dot)이 별도 flex 아이템이 되어
     한가운데로 밀려난다. 왼쪽 정렬로 두고 화살표만 margin-left:auto 로 민다. */
  display: flex; align-items: center; justify-content: flex-start; gap: 0;
  min-height: 44px;
}
.preview > summary::marker { content: ''; }
.preview > summary::-webkit-details-marker { display: none; }
.preview > summary::after {
  content: ''; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--sp-black); border-bottom: 2px solid var(--sp-black);
  transform: rotate(45deg); margin-left: auto; margin-right: 4px;
  transition: transform .15s var(--ease);
}
.preview[open] > summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .preview > summary::after { transition: none; } }

.preview__body { padding: 0 0 var(--gap-lg); }
.preview__lead { margin: 0 0 var(--gap-lg); font-size: 15px; color: var(--sp-read); }
.preview__h {
  margin: var(--gap-lg) 0 var(--gap-sm);
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--sp-orange-deep);
}
.preview__list { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.75; color: var(--sp-read); }
.preview__list li { margin-top: 6px; }
.preview__list b { color: var(--sp-black); }
.preview__qs { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.75; color: var(--sp-read); }
.preview__qs li { margin-top: var(--gap-md); }
.preview__qs b { display: block; color: var(--sp-black); font-weight: 800; margin-bottom: 3px; }
.preview__note {
  margin: var(--gap-lg) 0 0; padding: var(--gap-md) 0 0;
  border-top: 1px solid var(--sp-rule);
  font-size: 14px; line-height: 1.7; color: var(--sp-read);
}
.preview__note b { color: var(--sp-black); }

/* ==========================================================================
   Plan B — 정보 순서 재구성 시안 전용 (planb.html)
   현재 안(index.html)에는 영향이 없는 새 클래스만 둔다.
   ========================================================================== */

/* Plan B 임을 알리는 상단 바 — mockbar 를 재사용하되 색만 바꾼다 */
.mockbar--plan { background: var(--sp-charcoal); }
.mockbar--plan b { color: var(--sp-white); }
.mockbar--plan a { color: var(--sp-white); border-bottom: 1px solid var(--sp-muted-dk); }

/* Hero 에서 '뭔지'를 한 문장으로 닫는 줄.
   정보 채집 이론(Pirolli & Card): 정보 냄새가 더 강해지지 않으면 사용자는 떠난다.
   Hero 에서 정의가 닫혀야 다음 블록으로 넘어갈 이유가 생긴다. */
.whatis {
  margin: var(--gap-lg) 0 0; padding: var(--gap-md) 0 0;
  border-top: 1px solid var(--sp-rule);
  font-size: 16px; line-height: 1.7; color: var(--sp-read);
  max-width: 46ch;
}
.whatis b { color: var(--sp-black); font-weight: 700; }

/* 섹션 안의 하위 제목 — 블록이 길어졌으므로 스캔 지점을 만든다.
   Lorch(1995/1996): 소제목은 토픽 회상 개수를 늘리고 회상을 본문 구조대로 정렬시킨다.
   단 효과가 유의한 건 '낯선 토픽'과 '짧게 다뤄진 토픽'일 때다. 그래서 남발하지 않는다. */
.sub-h {
  margin: var(--gap-2xl) 0 var(--gap-md);
  padding-top: var(--gap-md);
  border-top: 2px solid var(--sp-black);
}
.sec__dek--tight { margin-top: 0; }

/* 보조 혜택 4칸 — 희소한 둘(.sigs2)보다 명확히 작게.
   ⚠️ .gives-lite 를 재사용하면 안 된다. 그쪽 li 는
   `grid-template-columns: 230px minmax(0,1fr)` 로 첫 칸이 고정 230px 라서,
   4열 안에 넣으면 칸 폭(약 250px)을 b 가 다 먹고 설명 텍스트가 0px 로 눌려
   한 글자씩 세로로 흐르고 페이지가 가로로 넘친다. 독립 클래스로 둔다. */
.addons {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-lg); margin: 0; padding: 0; list-style: none;
}
.addons li {
  display: block;
  font-size: 14.5px; line-height: 1.65; color: var(--sp-read);
  padding-top: var(--gap-sm); border-top: 1px solid var(--sp-rule);
}
.addons li b {
  display: block; color: var(--sp-black); font-size: 15.5px;
  font-weight: 800; letter-spacing: -0.02em; margin-bottom: 5px;
}
@media (max-width: 900px) { .addons { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .addons { grid-template-columns: 1fr; gap: var(--gap-md); } }

/* 안 주는 것 고지 — 받는 것 바로 아래.
   원래 위에 굵은 검은 선을 그어 두었는데 뺐다. 위 블록(.addons)이 이미 각 칸마다
   윗선을 갖고 있어서, 바로 아래에 또 굵은 선이 오면 경계가 두 번 그어진다.
   여백만으로 충분히 나뉜다. */
/* 위 .addons 블록과의 간격. 굵은 구분선을 뺐으니 여백까지 넓게 두면
   '별개의 문단'으로 떠 보인다. 같은 묶음의 꼬리말처럼 붙여 둔다.
   40+16=56px → 24px. */
.field-note--warn {
  margin-top: var(--gap-lg); padding: 0;
}

/* 필수 조건 4개를 가로 한 줄로 — 세로 리스트보다 '체크리스트'로 읽힌다.
   선은 묶음 위에 하나만 긋는다. 칸마다 굵은 선을 그으면 네 조각으로 흩어져 보이고,
   선이 실제로 나누는 것(= 이 묶음과 윗 문단)보다 많은 경계를 그리게 된다.
   칸 사이 구분은 화살촉 마커와 여백이 이미 하고 있다. */
.must--row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--gap-xl);
  margin: var(--gap-xl) 0 0;
  padding: var(--gap-md) 0 0;
  border-top: 2px solid var(--sp-black);
}
.must--row li {
  list-style: none; margin-bottom: 0;
  padding-left: 26px;                  /* 기본 .must li 의 30px 보다 조금 좁게 */
  font-size: 15px; font-weight: 700; line-height: 1.55; text-wrap: pretty;
}
.must--row li::before { top: 6px; }    /* 15px 본문의 첫 줄 중앙에 맞춘다 */
@media (max-width: 900px) {
  .must--row { grid-template-columns: 1fr 1fr; gap: var(--gap-lg) var(--gap-xl); }
}
@media (max-width: 560px) {
  .must--row { grid-template-columns: 1fr; gap: var(--gap-md); }
}

/* 내놓아야 하는 것 — 굵은 제목 + 부연 한 줄.
   ⚠️ 여기서 `padding: var(--gap-md) 0` 축약형을 쓰면 기본 .must li 의
   `padding-left: 30px` 이 죽는다. 그러면 절대배치된 ::before 화살촉이
   본문 왼쪽이 아니라 위쪽 패딩 안에 홀로 뜬다 (제목 위에 > 만 떠 있던 증상).
   세로 여백과 왼쪽 여백을 따로 지정한다. */
.must--cost { margin: 0; padding: 0; }
.must--cost li {
  list-style: none;
  padding-top: var(--gap-md); padding-bottom: var(--gap-md);
  padding-left: 26px; padding-right: 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--sp-rule);
  font-size: 15px; line-height: 1.6; color: var(--sp-read);
}
.must--cost li:first-child { padding-top: 0; }
.must--cost li:first-child::before { top: 7px; }
.must--cost li::before { top: calc(var(--gap-md) + 7px); }   /* 제목 첫 줄에 맞춘다 */
.must--cost li b {
  display: block; color: var(--sp-black); font-size: 16px;
  font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px;
}

/* 9주 5단계 — 기존 steps4 를 5칸으로 */
.steps4--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 5단계에서는 기존 카운터(::before 의 01·02…)를 끄고, 순번과 기간을 한 줄로 합친다.
   작은 오렌지 라벨이 두 줄로 쌓이면 어느 쪽을 읽어야 할지 모르게 된다. */
.steps4--5 > li::before { content: none; }
.steps4__wk {
  display: flex; align-items: baseline; gap: 7px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: var(--ls-label);
  color: var(--sp-black); margin-bottom: 7px;
}
.steps4__wk i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--sp-orange-deep); }
@media (max-width: 900px) { .steps4--5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps4--5 { grid-template-columns: 1fr; } }

/* 혜택 카드는 .sigbig 의 뼈대만 빌려 쓰고 색은 검정으로 되돌린다.
   브랜드에서 초록은 '신호·검증'을 뜻한다 (가이드 p.5). 고객증거 A·B 등급에만 써야
   하고, '기술/사람' 같은 혜택 라벨에 쓰면 등급으로 오독된다.
   한글 두 글자를 46px 로 세우면 알파벳 한 글자보다 훨씬 커 보이므로 크기도 줄인다. */
.sigbig--get { border-top-color: var(--sp-black); }
.sigbig--get .sigbig__g { font-size: 30px; color: var(--sp-black); }
.sigbig--get .sigbig__tag { color: var(--sp-orange-deep); border-color: var(--sp-orange-deep); }

/* ==========================================================================
   목업 문구 편집기 (assets/js/copyedit.js)
   .mockbar 가 있을 때만 뜬다. 정식 오픈 때 mockbar 를 지우면 함께 사라진다.
   ========================================================================== */

.ce-panel {
  position: fixed; left: 16px; bottom: 16px; z-index: 300;
  font-family: var(--font-body);
}
.ce-fab {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 16px;
  background: var(--sp-black); color: var(--sp-paper);
  border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
}
.ce-fab:hover { background: var(--sp-charcoal); }
.ce-fab em {
  font-style: normal; font-family: var(--font-display);
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  background: var(--sp-orange); color: var(--sp-white); padding: 2px 6px; margin-left: 3px;
}

.ce-panel__row { display: flex; align-items: center; gap: 8px; }
.ce-panel__row:first-child {
  background: var(--sp-black); color: var(--sp-paper);
  padding: 9px 14px; font-size: 13px;
}
.ce-panel__row:first-child b { font-weight: 700; }
.ce-count { color: var(--sp-muted-dk); margin-left: auto; }
.ce-panel__row:nth-child(2) {
  background: var(--sp-charcoal); padding: 8px 10px;
}
/* ⚠️ 셀렉터를 .ce-panel button 으로 두면 (0,1,1) 이라 .ce-fab (0,1,0) 을 이겨서
   편집 시작 버튼의 검은 배경이 투명해진다. 조작 버튼은 .ce-panel__row 안에만
   있으므로 거기로 한정한다. */
.ce-panel__row button {
  min-height: 36px; padding: 0 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  background: transparent; color: var(--sp-paper);
  border: 1px solid var(--sp-muted-dk);
}
.ce-panel__row button:hover:not(:disabled) { border-color: var(--sp-paper); }
.ce-panel__row button:disabled { opacity: .4; cursor: default; }
.ce-primary { background: var(--sp-orange) !important; border-color: var(--sp-orange) !important; color: var(--sp-white) !important; }
.ce-hint {
  margin: 0; background: var(--sp-charcoal); color: var(--sp-muted-dk);
  padding: 0 10px 9px; font-size: 12px; line-height: 1.5;
}

/* 편집 중인 요소를 눈으로 구분한다. 브랜드가 각진 톤이라 점선도 각지게 둔다 */
body.is-editing [contenteditable] { outline: 1px dashed var(--sp-line); outline-offset: 3px; cursor: text; }
body.is-editing [contenteditable]:hover { outline-color: var(--sp-charcoal); }
body.is-editing [contenteditable]:focus { outline: 2px solid var(--sp-orange); outline-offset: 3px; }
body.is-editing [data-ce-changed] { background: rgba(225, 78, 0, .07); }
body.is-editing a { cursor: text; }

/* 내보내기 모달 */
.ce-modal {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(17, 17, 17, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ce-modal__box {
  background: var(--sp-paper); max-width: 680px; width: 100%;
  padding: var(--gap-xl); border-top: 3px solid var(--sp-orange);
}
.ce-modal__box h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.ce-modal__box p { margin: 0 0 var(--gap-md); font-size: 14px; color: var(--sp-read); }
.ce-modal textarea {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.6; padding: 12px;
  border: 1px solid var(--sp-line); background: var(--sp-white); resize: vertical;
}
.ce-modal__act { display: flex; gap: 8px; margin-top: var(--gap-md); }
.ce-modal__act button {
  min-height: 44px; padding: 0 18px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700;
  background: transparent; border: 1px solid var(--sp-line); color: var(--sp-black);
}

@media (max-width: 560px) {
  .ce-panel { left: 10px; right: 10px; bottom: 10px; }
  .ce-panel__row:nth-child(2) { flex-wrap: wrap; }
}

/* contenteditable 이 붙으면 브라우저가 공백 처리를 바꿔 문단이 들여쓰기된 것처럼
   보일 수 있다. JS 에서 소스 공백을 접어 두지만, 여기서도 한 번 더 못박는다. */
body.is-editing [contenteditable] { white-space: normal; }

/* 단일 목표 블록 — 등급 체계(A·B·C·D)를 걷어내고 목표 하나만 세운다.
   .sigbig 을 재활용하지 않은 이유: 그쪽은 '등급 라벨 + 제목 + 설명' 구조라
   라벨을 빼면 위쪽에 빈 자리가 남는다. */
.goal1 {
  margin-top: var(--gap-md);
  max-width: 62ch;
}
/* 제목("고객이 비용을 지불해요")을 뺐다. 바로 위 목표 문장이 이미 같은 말을 하고
   있어서 두 번 읽히던 것을 정리한 것. 이제 예시 한 줄만 남으므로, 캡션처럼
   작아 보이지 않게 본문 크기로 올린다.

   색은 --sp-orange 가 아니라 --sp-orange-deep 을 쓴다. #e14e00 은 밝은 배경에서
   3.97:1 이라 17px 본문에 쓰면 WCAG AA(4.5:1) 에 미달한다. deep 은 5.6:1 로 통과한다.
   브랜드 가이드가 정한 오렌지 2단계 운용 그대로다. */
.goal1 p { margin: 0; font-size: 17px; line-height: 1.7; font-weight: 700; color: var(--sp-orange-deep); }

/* ==========================================================================
   관리자 화면
   ========================================================================== */

.afilter { display: flex; gap: var(--gap-md); margin: var(--gap-lg) 0; flex-wrap: wrap; }
.afilter .input { max-width: 320px; }
.afilter select.input { max-width: 180px; }

.atable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.atable thead th {
  text-align: left; padding: 0 12px 10px 0;
  font-size: 12px; font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--sp-read);
  border-bottom: 2px solid var(--sp-black);
}
.atable tbody th { text-align: left; font-weight: 700; }
.atable td, .atable tbody th {
  padding: 12px 12px 12px 0; border-bottom: 1px solid var(--sp-rule);
  vertical-align: top; line-height: 1.5;
}
.atable tbody tr[data-ref] { cursor: pointer; }
.atable tbody tr[data-ref]:hover td { background: rgba(17,17,17,.035); }
.atable tbody tr[data-ref]:focus { outline: 2px solid var(--sp-orange); outline-offset: -2px; }
.amono { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.amuted { color: var(--sp-read); font-size: 13px; }
.awarn { color: var(--sp-orange-deep); font-weight: 700; }
.anum { font-family: var(--font-display); font-weight: 800; }
.apct { color: var(--sp-read); white-space: nowrap; }
.abarcell { width: 45%; }

/* 퍼널 막대 — 숫자만으로는 어디서 빠지는지 안 보인다 */
.abar { display: block; height: 8px; background: var(--sp-gray); }
.abar i { display: block; height: 100%; background: var(--sp-black); }

/* 단계 표시. 색이 아니라 글자로 구분한다 — 색만으로는 색맹 사용자에게 전달되지 않고,
   선발/불선발은 잘못 읽으면 되돌리기 어려운 판단이다. */
.apill {
  display: inline-block; padding: 3px 9px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--sp-line); white-space: nowrap;
}
.apill--selected  { border-color: var(--sp-green); color: var(--sp-green); }
.apill--rejected  { border-color: var(--sp-line); color: var(--sp-read); }
.apill--interview { border-color: var(--sp-orange-deep); color: var(--sp-orange-deep); }
.apill--withdrawn { border-color: var(--sp-line); color: var(--sp-read); text-decoration: line-through; }

/* ── 상세 서랍 ─────────────────────────────────────────────────────────── */
.adrawer { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; }
.adrawer__bg { position: absolute; inset: 0; background: rgba(17,17,17,.45); }
.adrawer__box {
  position: relative; width: min(720px, 100%); height: 100%;
  background: var(--sp-paper); display: flex; flex-direction: column;
  border-left: 3px solid var(--sp-black);
}
.adrawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md);
  padding: var(--gap-lg) var(--gap-xl); border-bottom: 1px solid var(--sp-rule);
}
.adrawer__x {
  border: 0; background: transparent; cursor: pointer;
  font-size: 18px; min-width: 44px; min-height: 44px;
}
.adrawer__body { flex: 1; overflow-y: auto; padding: var(--gap-lg) var(--gap-xl); }
.adrawer__foot {
  display: flex; align-items: center; gap: var(--gap-md);
  padding: var(--gap-md) var(--gap-xl); border-top: 1px solid var(--sp-rule);
  background: var(--sp-white);
}
.adrawer__foot .input { max-width: 180px; }
.asaved { font-size: 13px; color: var(--sp-read); }

.adlist { margin: 0 0 var(--gap-lg); }
.adrow { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: var(--gap-md);
  padding: 7px 0; border-bottom: 1px solid var(--sp-rule); }
.adrow dt { font-size: 13px; color: var(--sp-read); }
.adrow dd { margin: 0; font-size: 14.5px; word-break: break-all; }
.adh {
  margin: var(--gap-lg) 0 8px; padding-top: var(--gap-sm);
  border-top: 2px solid var(--sp-black);
  font-size: 13px; font-weight: 800; letter-spacing: var(--ls-label); text-transform: uppercase;
}
.adp { font-size: 14.5px; line-height: 1.8; color: var(--sp-charcoal); white-space: pre-wrap; }

/* 자격 확인 — '아니오'만 눈에 띄게. 심사에서 실제로 보는 건 걸리는 항목이다 */
.aqs { display: flex; flex-wrap: wrap; gap: 6px; }
.aq {
  font-size: 12px; padding: 3px 8px; border: 1px solid var(--sp-rule); color: var(--sp-read);
}
.aq--no { border-color: var(--sp-orange); color: var(--sp-orange-deep); font-weight: 700; }

@media (max-width: 780px) {
  .atable { font-size: 13px; }
  .atable thead { display: none; }
  .atable tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap-md);
    padding: var(--gap-md) 0; border-bottom: 1px solid var(--sp-rule); }
  .atable td { border: 0; padding: 2px 0; }
  .adrawer__box { width: 100%; border-left: 0; }
  .adrow { grid-template-columns: 1fr; gap: 2px; }
}

/* 헤더 '운영자 로그인' — 지원자의 주 행동(지원하기)과 경쟁하지 않도록 눌러 둔다.
   권한이 없는 사람에게는 눌러도 소용없는 문이라 눈에 띌 이유가 없다.
   로그인한 뒤에 뜨는 .nav-admin 은 반대로 또렷하다 (brand.css).

   ⚠️ 셀렉터를 .nav-signin 으로만 쓰면 (0,1,0) 이라 brand.css 의
   .site-header__nav a (0,2,0) 에 진다. 이 프로젝트에서 같은 충돌을 네 번째 겪는다
   (.btn--primary, .link-cta, .ce-fab, 그리고 여기).
   헤더 안의 링크를 건드릴 때는 반드시 .site-header__nav 를 앞에 붙인다. */
.site-header__nav a.nav-signin,
.site-header__nav a.nav-signout {
  font-size: 13px; color: var(--sp-read); white-space: nowrap;
}
.site-header__nav a.nav-signin:hover,
.site-header__nav a.nav-signout:hover { color: var(--sp-black); }

/* '선택' 배지 — 필수(*)의 반대. 이력서처럼 안 내도 되는 항목에 붙인다.
   필수만 표시하면 나머지를 역추론해야 한다는 NN/g 권고에 따라 필수는 계속
   별표로 두고, 오해가 잦은 항목에만 '선택'을 덧붙인다. */
.field__opt {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--sp-read); border: 1px solid var(--sp-line);
  vertical-align: 1px;
}

/* 자동으로 채워진 항목 — 사용자가 '내가 안 쓴 값'임을 알아보고 검토하게 한다.
   색만으로 알리지 않는다. 확인해 달라는 안내 문구가 첨부 영역에 함께 나온다. */
.input.is-autofilled,
.textarea.is-autofilled { border-color: var(--sp-orange-deep); background: rgba(225, 78, 0, .04); }

/* 관리자 운영 설정 토글 */
.aset { margin-top: var(--gap-md); border-top: 1px solid var(--sp-rule); }
.aset__row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--gap-md);
  align-items: start; padding: var(--gap-md) 0;
  border-bottom: 1px solid var(--sp-rule); cursor: pointer;
}
.aset__row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--sp-orange); }
.aset__row b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.aset__row span { font-size: 13.5px; line-height: 1.65; color: var(--sp-read); }
.aset__row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: rgba(17,17,17,.05); padding: 1px 5px;
}