/* =============================================================================
   namok components — 메인·인증·공통 컴포넌트
   ============================================================================= */

/* ── 헤더 인증 상태 확장 (시안에 없는 로그인/아웃 영역) ────────────────────── */
/* .kh-login 의 absolute 위치를 .kh-auth 래퍼로 상속 */
.kh-auth {
  position: absolute;
  /* 단일 로그인 버튼(.kh-login)과 동일하게 콘텐츠 박스 우측 끝에 앵커.
     버튼이 2개 이상이어도 안쪽(중앙 방향)으로 자라 헤더 우측을 벗어나지 않음. */
  right: max(40px, calc(50% - 640px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

.kh-auth .kh-login {
  position: static;
  left: auto;
  top: auto;
  transform: none;
}

.kh-username {
  font-family: var(--font-body);
  font-size: var(--text-body-xs);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.kh-mypage {
  font-family: var(--font-body);
  font-size: var(--text-body-xs);
  font-weight: 500;
  color: var(--color-primary-60);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}

.kh-mypage:hover {
  color: var(--color-primary-80);
  text-decoration: underline;
}

/* 태블릿 반응형 */
@media (min-width: 768px) and (max-width: 1140px) {
  .kh-auth {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  .kh-auth {
    display: none;
  }
}

/* ── 공통 유틸 ──────────────────────────────────────────────────────────────── */
/* 유틸은 어떤 컴포넌트 규칙(.auth-wrap input의 width:100% 등)보다 이겨야 하므로 !important */
.k-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.k-link {
  color: var(--color-primary-60);
  font-weight: 600;
}

.k-link:hover {
  text-decoration: underline;
}

/* ── 버튼 ────────────────────────────────────────────────────────────────────── */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-sm);
  cursor: pointer;
  border: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
}

.k-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.k-btn--primary {
  background: var(--color-primary-60);
  color: var(--white);
}

.k-btn--primary:hover {
  background: var(--color-primary-70);
  color: var(--white);
}

.k-btn--ghost {
  background: transparent;
  color: var(--color-primary-60);
  border: 1.5px solid var(--color-primary-60);
}

.k-btn--ghost:hover {
  background: var(--color-primary-5);
}

.k-btn--ghost-white {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, .5);
}

.k-btn--ghost-white:hover {
  background: rgba(255, 255, 255, .1);
}

.k-btn--full {
  width: 100%;
}

.k-btn--sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-body-xs);
}

.k-btn--lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-body-md);
}

/* ── 배지 ────────────────────────────────────────────────────────────────────── */

.k-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body-xs);
  font-weight: 700;
  line-height: 1.4;
}

.k-badge--success {
  background: var(--color-success-10);
  color: var(--color-success-70);
}

.k-badge--warning {
  background: var(--color-warning-5);
  color: var(--color-warning-70);
}

.k-badge--info {
  background: var(--teal-tint);
  color: var(--color-primary-70);
}

.k-badge--ongoing {
  background: var(--color-primary-60);
  color: var(--white);
}

/* ── 알림 ────────────────────────────────────────────────────────────────────── */
.k-alert {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
}

.k-alert--error {
  background: var(--color-error-5);
  color: var(--color-error-70);
  border: 1px solid var(--color-error-10);
}

.k-alert--info {
  background: var(--teal-tint);
  color: var(--color-primary-70);
  border: 1px solid var(--teal-border);
}

.k-alert--success {
  background: var(--color-success-5);
  color: var(--color-success-70);
  border: 1px solid var(--color-success-20);
}

.k-alert--warning {
  background: var(--color-warning-5);
  color: var(--color-warning-70);
  border: 1px solid var(--color-warning-10);
}

/* Legacy */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-body-sm);
}

.alert--error {
  background: var(--color-error-5);
  color: var(--color-error-70);
  border: 1px solid var(--color-error-10);
}

.alert--info {
  background: var(--teal-tint);
  color: var(--color-primary-70);
  border: 1px solid var(--teal-border);
}

/* ── 폼 공통 ─────────────────────────────────────────────────────────────────── */
.k-form {
  display: grid;
  gap: var(--space-5);
}

.k-form-group {
  display: grid;
  gap: var(--space-2);
}

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

@media (max-width: 480px) {
  .k-form-row {
    grid-template-columns: 1fr;
  }
}

.k-label {
  font-weight: 600;
  font-size: var(--text-body-sm);
  color: var(--ink);
}

.k-form-hint {
  font-size: var(--text-body-xs);
  color: var(--muted);
  margin-top: 2px;
}

.k-input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}

.k-input:focus {
  outline: none;
  border-color: var(--color-primary-40);
  box-shadow: var(--ring-soft);
}

.k-input::placeholder {
  color: var(--color-gray-40);
}

/* 라디오 */
.k-radio-group {
  display: flex;
  gap: var(--space-5);
}

.k-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-body-sm);
}

.k-radio input[type="radio"] {
  accent-color: var(--color-primary-60);
  width: 16px;
  height: 16px;
}

/* ── 인증 페이지 레이아웃 (시안 기준) ──────────────────────────────────────── */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding: 48px 20px;
  background: var(--bg);
}

.auth-wrap {
  background: var(--white);
  border: 1px solid var(--color-gray-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 46px 40px;
  width: 100%;
  max-width: 600px;
}

.auth-wrap.wide {
  max-width: 800px;
}

.auth-logo {
  display: block;
  height: 40px;
  margin: 0 auto 20px;
  object-fit: contain;
}

/* 로고 이미지 없을 때 텍스트 fallback */
.auth-logo-text {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-heading-xs);
  font-weight: 700;
  color: var(--color-primary-60);
  margin: 0 auto 26px;
  line-height: 1;
}

.auth-wrap h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: 500;
  text-align: center;
  margin: 0 0 24px;
  letter-spacing: -.04em;
  line-height: var(--leading-tight);
}

.auth-links {
  display: flex;
  justify-content: flex-end;
  margin: 6px 0 24px;
  font-size: var(--text-body-label);
}

.auth-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: var(--text-body-xs);
  color: var(--color-gray-70);
}

.auth-cta {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-primary-60);
  background: var(--color-primary-60);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 700;
  letter-spacing: -0.18px;
  padding: 14px 26px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.auth-cta:hover {
  background: var(--color-primary-70);
  color: var(--white);
  border-color: var(--color-primary-70);
}

.auth-cta:focus-visible {
  box-shadow: var(--ring);
  outline: none;
}

/* 보조 액션(되돌아가기 등)은 아웃라인 유지 */
.auth-cta--ghost {
  background: var(--white);
  color: var(--color-primary-90);
  border-color: var(--color-primary-50);
}

.auth-cta--ghost:hover {
  background: var(--color-primary-5);
  color: var(--color-primary-90);
  border-color: var(--color-primary-50);
}

/* CTA 내부 아이콘 — 22px 텍스트 대비 표준 크기(인라인 width 속성보다 우선) */
.auth-cta .ic {
  width: 24px;
  height: 24px;
}

/* 비밀번호 토글 */
.pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.pw-wrap input {
  flex: 1;
  margin-top: 0 !important;
  padding-right: 44px;
}

.pw-toggle {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  padding: 8px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  color: var(--color-gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pw-toggle:hover {
  color: var(--ink);
}

.pw-toggle .ic {
  width: 20px;
  height: 20px;
}

/* 아이디 중복확인 행 — 단일 소스(style.css에서 이관). 버튼은 입력 필드 높이 추종.
   ※ input 규칙은 .form-grid input(margin-top:10px)과 동일 우선순위 경쟁이므로
   .auth-wrap 스코프(0,2,1) 유지 필수 */
.auth-wrap .inline-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 10px;
}

.auth-wrap .inline-input-row input {
  flex: 1;
  margin-top: 0;
}

.auth-wrap .inline-input-row .btn-inline {
  width: auto;
  height: auto;
  flex-shrink: 0;
  padding: 0 20px;
  font-size: var(--text-body-xs);
  font-weight: 600;
}

/* 입력 필드 (auth-wrap 내) */
.auth-wrap input,
.auth-wrap textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body-sm);
  letter-spacing: -0.18px;
  line-height: 1.5;
  margin-top: 8px;
  color: var(--ink);
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}

.auth-wrap input:focus,
.auth-wrap textarea:focus {
  outline: none;
  border-color: var(--color-primary-60);
  box-shadow: var(--ring-soft);
}

.auth-wrap input::placeholder {
  color: var(--color-gray-50);
  letter-spacing: -0.18px;
}

/* 레이블 (auth-wrap 내) */
.auth-wrap label {
  display: block;
  font-size: var(--text-body-xs);
  font-weight: 500;
  color: var(--color-gray-95);
  letter-spacing: -0.14px;
  margin: 20px 0 16px 0;
}

/* 2열 폼 그리드 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 14px;
}

.auth-wrap .form-grid {
  gap: 20px;
}

.form-grid.one {
  grid-template-columns: 1fr;
}

.form-grid label {
  display: block;
  font-size: var(--text-body-xs);
  font-weight: 500;
  color: var(--color-gray-95);
  letter-spacing: -0.14px;
  margin: 0;
}

.form-grid input,
.form-grid textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-weight: 400;
  letter-spacing: -0.18px;
  line-height: 1.5;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--ink);
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}

.form-grid input:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--color-primary-60);
  box-shadow: var(--ring-soft);
}

.form-grid input::placeholder,
.form-grid textarea::placeholder {
  color: var(--color-gray-50);
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* 단계 표시 (시안 기준 - pill badge) */
.steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.steps li {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 9px 15px;
  font-weight: 500;
  font-size: var(--text-body-sm);
  color: var(--color-gray-60);
}

.steps li.on {
  background: var(--color-primary-60);
  border-color: var(--color-primary-60);
  color: var(--white);
  font-weight: 700;
}

/* 주의문 박스 */
.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px 14px 16px;
  border-radius: var(--radius-md);
  background: var(--color-primary-5);
  color: var(--color-primary-90);
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: 1.5;
  border: 1px solid var(--color-primary-10);
  margin-bottom: 16px;
}

.notice .ic {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary-60);
}

/* 인증 안내 박스(register-verify 전용) — 세로 히어로 레이아웃, style.css에서 이관.
   min-height로 화면 중심을 잡고 justify-content:center가 아이콘+텍스트를 세로 중앙 정렬 */
.notice-center {
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 16px;
  padding: 40px 24px 46px;
  margin-bottom: 24px;
  min-height: 300px;
}

.notice-center-title {
  display: block;
  font-size: var(--text-heading-md);
  font-family: var(--font-display);
  font-weight: 500;
}

.notice-center-desc {
  font-size: var(--text-body-sm);
  color: var(--muted);
}

/* 히어로 이미지 — /images/verify-phone.png (없으면 onerror로 숨김) */
.notice-center__img {
  width: 240px;
  height: 240px;
  object-fit: contain;
}

/* 체크박스형 약관 동의 notice — 체크박스는 문구 첫 줄 기준 정렬 */
.notice--check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 24px 14px 16px;
  border-radius: var(--radius-md);
  background: var(--color-primary-5);
  color: var(--color-primary-90);
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: 1.5;
  border: 1px solid var(--color-primary-10);
  margin-bottom: 0;
  user-select: none;
}

.notice--check:has(input:checked) {
  background: var(--teal-tint);
  border-color: var(--teal-border);
}

.notice--check .ic {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-primary-60);
}

.notice--check .link {
  color: var(--color-primary-60);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 본인인증 완료 확인 박스 */
.verify-done {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  background: var(--color-primary-5);
  border: 1px solid var(--teal-border);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.verify-done__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--text-body-sm);
}

.verify-done__meta dd {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
}

/* ── 인증 페이지 레이아웃 (레거시 k-* 유지) ─────────────────────────────── */
.k-auth-section {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
  background: var(--bg);
}

.k-auth-box {
  width: 100%;
  max-width: 480px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: var(--space-12) var(--space-10);
}

@media (max-width: 540px) {
  .k-auth-section {
    padding: var(--space-8) var(--space-4);
    align-items: flex-start;
  }

  .k-auth-box {
    padding: var(--space-8) var(--space-6);
  }
}

.k-auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-8);
}

.k-auth-logo__mark {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 700;
  color: var(--color-primary-60);
}

.k-auth-logo__sub {
  font-size: var(--text-body-xs);
  color: var(--muted);
}

.k-auth-title {
  font-family: var(--font-body);
  font-size: var(--text-heading-xs);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--space-6);
  text-align: center;
}

.k-auth-desc {
  font-size: var(--text-body-sm);
  color: var(--muted);
  margin-bottom: var(--space-6);
  text-align: center;
}

.k-auth-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-body-xs);
  color: var(--muted);
}

/* ── 단계 표시 (회원가입) ───────────────────────────────────────────────────── */
.k-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
}

.k-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-body-xs);
  color: var(--color-gray-30);
  font-weight: 500;
  position: relative;
  flex: 1;
  text-align: center;
}

.k-steps__item+.k-steps__item::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 50%;
  left: -50%;
  height: 1px;
  background: var(--line);
  z-index: 0;
}

.k-steps__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-xs);
  font-weight: 700;
  background: var(--line);
  color: var(--color-gray-50);
  position: relative;
  z-index: 1;
}

.k-steps__item--active {
  color: var(--color-primary-60);
}

.k-steps__item--active .k-steps__num {
  background: var(--color-primary-60);
  color: var(--white);
}

.k-steps__item--done {
  color: var(--color-primary-40);
}

.k-steps__item--done .k-steps__num {
  background: var(--color-primary-10);
  color: var(--color-primary-60);
}

/* ── 본인인증 블록 ───────────────────────────────────────────────────────────── */
.k-verify-block {
  margin-top: var(--space-4);
}

.k-verify-notice {
  font-size: var(--text-body-sm);
  color: var(--muted);
  margin-bottom: var(--space-4);
}

.k-verify-confirmed {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-primary-5);
  border: 1px solid var(--teal-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.k-verify-info {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.k-verify-info>div {
  display: flex;
  gap: var(--space-1);
  font-size: var(--text-body-sm);
}

/* ── 헤더 개선 ───────────────────────────────────────────────────────────────── */
.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-heading-xxs);
  color: var(--color-primary-60);
  letter-spacing: var(--tracking);
  line-height: 1.2;
}

.brand-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

/* ── 푸터 ────────────────────────────────────────────────────────────────────── */

/* ── 공모 정보 섹션 ───────────────────────────────────────────────────────────── */
.k-section {
  padding: var(--layout-pad-y) 0;
}

.k-section--gray {
  background: var(--bg);
}

.k-section--white {
  background: var(--white);
}

.k-section--dark {
  background: var(--color-primary-90);
}

.k-section__inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--layout-pad-x);
}

@media (max-width: 767px) {
  .k-section {
    padding: var(--layout-pad-y-mobile) 0;
  }

  .k-section__inner {
    padding: 0 var(--layout-pad-x-mobile);
  }
}

.k-section-label {
  display: inline-block;
  font-size: var(--text-body-xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary-40);
  margin-bottom: var(--space-3);
}

.k-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, var(--text-heading-md));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking);
  color: var(--color-primary-90);
  margin: 0 0 var(--space-3);
}

.k-section-title--white {
  color: var(--white);
}

.k-section-sub {
  font-size: var(--text-body-sm);
  color: var(--muted);
  margin: 0 0 var(--space-10);
}

/* 공모 카드 */
.k-apply-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: start;
  border: 1px solid var(--line);
}

.k-apply-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.k-apply-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.k-apply-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-heading-xxs);
  color: var(--ink);
  margin: 0;
}

.k-apply-card__desc {
  font-size: var(--text-body-sm);
  color: var(--muted);
  margin: 0;
  line-height: var(--leading-body);
}

.k-apply-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.k-apply-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.k-apply-card__meta-label {
  font-size: var(--text-body-xs);
  color: var(--color-gray-40);
}

.k-apply-card__meta-value {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
}

.k-apply-card__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
}

.k-apply-card__dday {
  font-size: var(--text-body-xs);
  color: var(--color-primary-50);
  font-weight: 600;
}

@media (max-width: 640px) {
  .k-apply-card {
    grid-template-columns: 1fr;
  }

  .k-apply-card__side {
    align-items: flex-start;
  }

  .notice-center__img {
    width: 180px;
    height: 180px;
    object-fit: contain;
  }
}

/* ── 섹션 공통 헤드 ──────────────────────────────────────────────────────────── */
.k-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.k-section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, var(--text-heading-md));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking);
  color: var(--color-primary-90);
  margin: 0;
}

.k-section__desc {
  font-size: var(--text-body-sm);
  color: var(--muted);
  margin: 0;
}

/* ── 공모 섹션 레이아웃 ──────────────────────────────────────────────────────── */
.k-apply-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .k-apply-grid {
    grid-template-columns: 1fr;
  }
}

.k-apply-main {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.k-apply-main__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.k-apply-main__dday {
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: var(--color-primary-50);
}

.k-apply-main__title {
  font-size: var(--text-heading-xs);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.k-apply-main__desc {
  font-size: var(--text-body-sm);
  color: var(--muted);
  margin: 0;
  line-height: var(--leading-body);
}

.k-apply-main__dl {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.k-apply-main__dl>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.k-apply-main__dl dt {
  font-size: var(--text-body-xs);
  color: var(--color-gray-40);
}

.k-apply-main__dl dd {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.k-apply-timeline {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.k-apply-timeline__title {
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--space-5);
}

/* ── 수직 타임라인 ───────────────────────────────────────────────────────────── */
.k-vtimeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.k-vtimeline__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  position: relative;
}

.k-vtimeline__item:last-child {
  padding-bottom: 0;
}

.k-vtimeline__item+.k-vtimeline__item::before {
  content: '';
  position: absolute;
  top: -var(--space-4);
  left: 11px;
  width: 2px;
  height: var(--space-4);
  background: var(--line);
}

.k-vtimeline__item--done+.k-vtimeline__item::before,
.k-vtimeline__item--active+.k-vtimeline__item::before {
  background: var(--color-primary-20);
}

.k-vtimeline__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--line);
  border: 2px solid var(--line);
  margin-top: 2px;
}

.k-vtimeline__item--done .k-vtimeline__dot {
  background: var(--color-primary-10);
  border-color: var(--color-primary-30);
}

.k-vtimeline__item--active .k-vtimeline__dot {
  background: var(--color-primary-60);
  border-color: var(--color-primary-60);
  box-shadow: 0 0 0 4px var(--color-primary-5);
}

.k-vtimeline__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.k-vtimeline__label {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-gray-50);
}

.k-vtimeline__item--done .k-vtimeline__label {
  color: var(--color-primary-50);
}

.k-vtimeline__item--active .k-vtimeline__label {
  color: var(--color-primary-60);
}

.k-vtimeline__date {
  font-size: var(--text-body-xs);
  color: var(--muted);
}

/* ── 헤더 모바일 관련 ────────────────────────────────────────────────────────── */

/* ── 히어로 비주얼 코어 ──────────────────────────────────────────────────────── */
.k-hero__visual-core {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 220, 132, .1) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* ── 푸터 개선 ───────────────────────────────────────────────────────────────── */

/* 푸터 그리드 업데이트 */

/* ── 관리자 ──────────────────────────────────────────────────────────────────── */
.admin-login {
  max-width: 420px;
  margin: var(--space-20) auto;
  padding: var(--space-10);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.admin-login__form {
  display: grid;
  gap: var(--space-3);
}

.admin-login__form label {
  font-weight: 600;
  font-size: var(--text-body-sm);
}

.admin-login__form input {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.admin-login__form button {
  margin-top: var(--space-4);
  justify-content: center;
}

.admin-dash {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-10) var(--layout-pad-x);
}

.admin-dash__menu {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 360px;
}

.admin-dash__menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

/* ── 공지/게시글 상세: 본문 이미지 (내용 바로 위, 이미지만 등록 가능) ── */
.post-detail-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 0 0 24px;
}

/* ── 빈 상태 (신청 내역 등 데이터 없음) ─────────────────────────────
   아이콘 뱃지 + 제목 + 설명 + CTA. .u-empty-48 대비 시각적 위계 강화. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px 70px;
}

.empty-state__icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin-bottom: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-5);
  color: var(--color-primary-50);
}

.empty-state__icon svg {
  width: 48px;
  height: 48px;
}

.empty-state__title {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ink);
}

.empty-state__desc {
  margin: 0 0 28px;
  max-width: 380px;
  font-size: var(--text-body-xs);
  line-height: var(--leading-body);
  color: var(--muted);
}

@media (max-width: 767px) {
  .empty-state {
    padding: 56px 20px 48px;
  }

  .empty-state__icon {
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
  }

  .empty-state__icon svg {
    width: 34px;
    height: 34px;
  }

  .empty-state__title {
    font-size: var(--text-body-sm);
  }

  .empty-state__desc {
    font-size: var(--text-body-label);
  }
}

/* ── 리드 문단(.lede) 반응형 ───────────────────────────────────────
   기본값(.content-card .lede 22px)은 style.css보다 늦게 로드되는
   namk-ui.css가 승자다. 그래서 style.css의 767px 반응형 규칙은
   cascade에 가려 죽어 있음(값도 22px로 동일). 실제로 먹이려면
   더 늦게 로드되는 이 파일에서 얹어야 한다. */
@media (max-width: 767px) {
  .content-card .lede {
    font-size: var(--text-body-sm);
  }
}

@media (max-width: 480px) {
  .content-card .lede {
    font-size: var(--text-body-xs);
  }
}

/* ── 마이페이지 하위 탭 (타이틀 아래 · 기존 .tabs 컴포넌트 재사용) ──────
   PC는 좌측 사이드바(.side)로 이동한다. 모바일(≤1000px)에선 사이드바가
   숨겨져 사각지대라, contest/notice 등과 동일하게 h1 아래에 .tabs 를
   노출한다. 컨테이너는 .tabs 를 그대로 써서 보더·여백·반응형 스크롤을
   상속하고, 버튼 전용인 컴포넌트에 링크(a) 스타일만 여기서 보강한다. */
.mypage-tabs {
  display: none;
  /* PC: 사이드바가 담당 → 숨김 (.tabs 의 display:flex 를 늦게 로드되어 이김) */
}

.mypage-tabs a {
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 20px;
  background: transparent;
  color: var(--color-gray-60);
  font-size: var(--text-body-sm);
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}

.mypage-tabs a:hover {
  color: var(--color-primary-80);
}

.mypage-tabs a.on {
  color: var(--color-primary-60);
  border-bottom-color: var(--color-primary-80);
  font-weight: 700;
}

@media (max-width: 1000px) {
  .mypage-tabs {
    display: flex;
  }
}

@media (max-width: 767px) {
  .mypage-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
  }
}

/* ════════════════════════════════════════════════════════════════
   페이지 전용 스타일 — 템플릿 인라인 <style> 이관
   ════════════════════════════════════════════════════════════════ */

/* ── 마이페이지 프로필 (/mypage/profile) ─────────────────────────── */
.mypage-section {
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  background: var(--white);
}

.mypage-section+.mypage-section {
  margin-top: 16px;
}

.mypage-section--required {
  border-color: var(--color-primary-60);
}

.mypage-section__title--required {
  color: var(--color-primary-60);
}

.mypage-section__req {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: var(--color-error);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  border-radius: 99px;
  vertical-align: middle;
}

.force-pw-alert {
  margin-bottom: 16px;
  line-height: 1.7;
}

.mypage-section__desc--warn {
  color: var(--color-error);
}

.req-star {
  color: var(--color-error);
}

.mypage-section__title {
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 12px;
  margin-top: 0;
}

.mypage-section__opt {
  font-size: var(--text-body-xs);
  font-weight: 400;
  color: var(--muted);
}

.mypage-section__desc {
  font-size: var(--text-body-xs);
  color: var(--muted);
  margin: -24px 0 20px;
}

.mypage-info {
  display: grid;
  gap: 0;
  margin: 0;
}

.mypage-info__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-gray-10);
  font-size: var(--text-body-md);
  align-items: center;
}

.mypage-info__row:first-child {
  padding-top: 0;
}

.mypage-info__row:last-child {
  border-bottom: none;
}

.mypage-info__row dt {
  color: var(--muted);
  font-weight: 500;
}

.mypage-info__row dd {
  color: var(--ink);
  margin: 0;
}

.mypage-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* 회원탈퇴 — 카드가 아닌, 폼 아래 절제된 영역. 카드/패딩 없이 바탕에 얹고
   제목은 검정. 위험 신호는 확인 모달과 아웃라인 버튼에만 남긴다. */
.withdraw {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-gray-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.withdraw__text {
  min-width: 0;
}

.withdraw__title {
  margin: 0 0 4px;
  font-size: var(--text-body-md);
  font-weight: 700;
  color: var(--ink);
}

.withdraw__desc {
  margin: 0;
  font-size: var(--text-body-xs);
  color: var(--muted);
}

.withdraw .btn-withdraw {
  flex-shrink: 0;
  margin-top: 0;
}

@media (max-width: 600px) {
  .withdraw {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.btn-withdraw {
  margin-top: 4px;
  padding: 8px 20px;
  border: 1px solid var(--color-error);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-error);
  font-size: var(--text-body-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.btn-withdraw:hover {
  background: var(--color-error);
  color: var(--white);
}

/* 탈퇴 모달 */
.withdraw-modal {
  border: none;
  border-radius: var(--radius-md);
  padding: 28px 30px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
}

.withdraw-modal::backdrop {
  background: rgba(0, 0, 0, .45);
}

.withdraw-modal__title {
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--color-error);
  margin: 0 0 8px;
}

.withdraw-modal__desc {
  font-size: var(--text-body-xs);
  color: var(--muted);
  line-height: 1.4;
  margin: 0 0 28px;
}

.withdraw-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 30px;
}

.withdraw-modal button.danger {
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-error);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  font-size: var(--text-body-sm);
}

.withdraw-modal button.danger:hover {
  opacity: .88;
}

/* 모바일: 가운데 팝업 → 하단 바텀시트 (CSS만, 마크업/JS 변경 없음) */
@media (max-width: 600px) {
  .withdraw-modal {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: none;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 24px 20px max(20px, env(safe-area-inset-bottom));
    animation: withdraw-sheet-up .25s ease-out;
  }

  .withdraw-modal__actions {
    gap: 8px;
  }

  .withdraw-modal__actions>button {
    flex: 1;
    min-height: 44px;
    justify-content: center;
  }
}

@keyframes withdraw-sheet-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.noti-opt {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 0 2px;
}

.noti-opt input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-primary-60);
}

.noti-opt__label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--text-body-xs);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  margin: 0;
}

.noti-opt__desc {
  font-size: var(--text-body-label);
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
}

@media (max-width: 600px) {
  .mypage-section {
    padding: 20px;
  }

  /* 모바일 텍스트 스케일 다운 (데스크톱 대비 한 단계) */
  .mypage-section__title {
    margin-bottom: 16px;
    font-size: var(--text-body-md);
  }

  .mypage-info__row {
    grid-template-columns: 100px 1fr;
    font-size: var(--text-body-sm);
  }

  .mypage-actions {
    justify-content: center;
  }

  .withdraw__title {
    font-size: var(--text-body-sm);
  }

  /* 알림 설명은 라벨 아래 줄로 (모바일에서 옆으로 붙으면 어색) */
  .noti-opt__desc {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}

/* ── 강연 알림 수신 바 (/leader/lecture · /mypage/lecture-applications 공용) ── */
.lecture-noti-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--color-gray-5);
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-md);
}

.noti-sw {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.noti-sw input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.noti-sw__track {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  background: var(--color-gray-20);
  border-radius: 11px;
  transition: background .2s;
  flex-shrink: 0;
}

.noti-sw__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--white);
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.noti-sw input:checked~.noti-sw__track {
  background: var(--color-primary-60);
}

.noti-sw input:checked~.noti-sw__track::after {
  transform: translateX(18px);
}

.noti-sw__text {
  font-size: var(--text-body-md);
  font-weight: 700;
  color: var(--ink);
}

.noti-sw__desc {
  font-size: var(--text-body-xs);
  color: var(--muted);
}

@media (max-width: 600px) {
  .lecture-noti-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── FAQ (/news/faq): 답변 개행 유지 ─────────────────────────────── */
.faq-a .faq-a-text {
  white-space: pre-line;
}

/* ── 비밀번호 찾기 (/auth/find-pw) ───────────────────────────────── */
.findpw-contact {
  margin: 24px 0;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: left;
  display: grid;
  grid-template-columns: 88px 1fr;
  row-gap: 12px;
  column-gap: 12px;
}

.findpw-contact dt {
  font-weight: 700;
  color: var(--color-gray-70);
}

.findpw-contact dd {
  margin: 0;
  color: var(--ink);
}

.findpw-contact dd a {
  color: var(--color-primary-60);
  font-weight: 600;
  text-decoration: none;
}

.findpw-contact dd a:hover {
  text-decoration: underline;
}

.findpw-note {
  color: var(--color-gray-60);
  font-size: 0.875rem;
  /* 14px — 보조 주석, 시스템에 매칭 토큰 없어 유지 */
}

/* ── 회원가입 (/auth/register): 체크박스 선택 상태 표시 ───────────── */
.check-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1.5px solid var(--line);
  background: var(--white);
  transition: background 0.15s, border-color 0.15s;
  margin-top: 4px; /* 첫 줄 라인박스(≈27px) 기준 시각 중앙 */
}

.check-label {
  flex: 1;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 약관/동의서 보기 링크는 박스 우측 끝 고정 */
.check-label .terms-link {
  margin-left: auto;
  flex-shrink: 0;
}

.ic--checked {
  display: block;
  opacity: 0;
  transition: opacity 0.15s;
  color: var(--white);
}

.notice--check:has(input:checked) .check-icon {
  background: var(--color-primary-60);
  border-color: var(--color-primary-60);
}

.notice--check:has(input:checked) .ic--checked {
  opacity: 1;
}

.notice--check:not(:has(input:checked)) {
  background: var(--color-gray-5);
  border-color: var(--line);
  color: var(--color-gray-60);
}

/* terms-link 버튼 → link 스타일 */
.terms-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 링크 화살표는 본문보다 작게 — .notice--check .ic(18px) 오버라이드 복원 */
.terms-link .ic {
  width: 14px;
  height: 14px;
}

/* 약관 모달 */
.terms-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.terms-modal-backdrop[hidden] {
  display: none;
}

.terms-modal {
  background: var(--white);
  border-radius: var(--radius-lg, 12px);
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.terms-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.terms-modal-head h3 {
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.terms-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: -4px -4px -4px 0;
  color: var(--color-gray-60);
  line-height: 1;
  border-radius: var(--radius-sm);
}

.terms-modal-close:hover {
  background: var(--color-gray-5);
}

.terms-modal-body {
  overflow-y: auto;
  padding: 20px 24px;
  flex: 1;
  font-size: var(--text-body-sm);
  color: var(--dark);
  line-height: 1.7;
}

.terms-modal-body section {
  margin-bottom: 20px;
}

.terms-modal-body h4 {
  font-weight: 700;
  font-size: var(--text-body-md);
  color: var(--ink);
  margin: 0 0 6px;
}

.terms-modal-body ul {
  padding-left: 20px;
  margin: 6px 0;
}

.terms-modal-body li {
  margin-bottom: 4px;
}

.terms-note {
  margin-top: 16px;
  font-size: var(--text-body-xs);
  color: var(--color-gray-60);
}

/* 약관 본문 렌더 (TermsRenderer 출력 — 회원가입 모달·동의 버전 팝업 공용) */
.trm-cn h3 {
  font-weight: 700;
  font-size: var(--text-body-md);
  color: var(--ink);
  margin: 18px 0 6px;
}

.trm-cn h3:first-child {
  margin-top: 0;
}

.trm-cn p {
  margin: 6px 0;
}

.trm-cn ul {
  padding-left: 20px;
  margin: 6px 0;
}

.trm-cn li {
  margin-bottom: 4px;
}

.trm-cn hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 16px 0;
}

.trm-cn .trm-point {
  color: var(--color-primary-60);
  font-weight: 600;
}

/* ── 정책 공개 페이지 (/policy/**) 버전 이력 선택 ─────────────────── */
.policy-ver {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
}

.policy-ver label {
  font-size: var(--text-body-sm);
  color: var(--color-gray-60);
}

.policy-ver select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-body-sm);
  color: var(--ink);
  background: var(--white);
}

.policy-ver-note {
  margin: 0 0 20px;
}

.terms-modal-foot {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.terms-modal-foot .auth-cta {
  max-width: 200px;
}

/* ── 본인인증 (/auth/register-verify) ────────────────────────────── */
.inicis-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius-md, 8px);
  background: var(--color-primary-60);
  color: var(--white);
  cursor: pointer;
  transition: background 0.15s;
}

.inicis-btn:hover {
  background: var(--color-primary-70);
}

.inicis-btn__label {
  font-size: var(--text-body-lg);
  font-weight: 700;
}

.inicis-btn__providers {
  font-size: var(--text-body-xs);
  opacity: 0.85;
}

/* ── 준비중 안내 카드 (stories 멘토링 탭 · /error/prepare 공용) ─────
   두 템플릿의 인라인 <style> 통합. navy 값은 prepare.html이 마크업에
   없는 .prepare-menu-page에 선언해 실제로는 풀리지 않던 것을
   .prepare-menu-card 스코프로 옮겼다(stories의 하드코딩 값과 동일). */
.prepare-menu-card {
  --prepare-navy: var(--color-primary-95);
  --prepare-navy-hover: var(--color-primary-90);
  --prepare-navy-on: var(--color-primary-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 0 60px;
}

.prepare-menu-illust {
  width: auto;
  max-width: 100%;
  height: 220px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.prepare-menu-text {
  margin-top: 36px;
}

.prepare-menu-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
  margin: 0;
}

.prepare-menu-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--dark);
  text-align: center;
  margin: 8px 0 0;
}

.prepare-menu-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

.prepare-menu-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body-md);
  line-height: 1.5;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.prepare-menu-btn--ghost {
  background: var(--white);
  border: 1px solid var(--prepare-navy-hover);
  color: var(--prepare-navy);
}

.prepare-menu-btn--ghost:hover {
  background: var(--prepare-navy-on);
}

.prepare-menu-btn--fill {
  background: var(--prepare-navy);
  border: 1px solid var(--prepare-navy);
  color: var(--prepare-navy-on);
}

.prepare-menu-btn--fill:hover {
  background: var(--prepare-navy-hover);
  border-color: var(--prepare-navy-hover);
}

@media (max-width: 767px) {
  .prepare-menu-illust {
    height: 160px;
  }

  .prepare-menu-title {
    font-size: 22px;
  }

  .prepare-menu-actions {
    gap: 12px;
  }
}

/* ── 에러 페이지 (error.html) — navy 토큰 Figma 238-895 ──────────── */
.prepare-main {
  --prepare-navy: var(--color-primary-95);
  --prepare-navy-hover: var(--color-primary-90);
  --prepare-navy-on: var(--color-primary-5);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.prepare-content {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 40px 120px;
  box-sizing: border-box;
}

.prepare-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 48px;
}

.prepare-illust-img {
  width: auto;
  max-width: 100%;
  height: 301px;
  object-fit: contain;
  display: block;
}

.prepare-text {
  margin-top: 40px;
}

.prepare-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 36px;
  color: var(--ink);
  line-height: 1.3;
  text-align: center;
  margin: 0;
}

.prepare-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body-sm);
  color: var(--dark);
  line-height: 1.5;
  text-align: center;
  margin: 8px 0 0;
}

.prepare-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
}

.prepare-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body-md);
  line-height: 1.5;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.prepare-btn--ghost {
  background: var(--white);
  border: 1px solid var(--prepare-navy-hover);
  color: var(--prepare-navy);
}

.prepare-btn--ghost:hover {
  background: var(--prepare-navy-on);
}

.prepare-btn--fill {
  background: var(--prepare-navy);
  border: 1px solid var(--prepare-navy);
  color: var(--prepare-navy-on);
}

.prepare-btn--fill:hover {
  background: var(--prepare-navy-hover);
  border-color: var(--prepare-navy-hover);
}

@media (max-width: 767px) {
  .prepare-content {
    padding: 24px 20px 80px;
  }

  .prepare-error {
    margin-top: 24px;
  }

  .prepare-illust-img {
    height: 220px;
  }

  .prepare-title {
    font-size: 24px;
  }

  .prepare-actions {
    gap: 12px;
  }
}

/* ── 오픈 예정 (/error/open) ─────────────────────────────────────── */
.open-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.open-content {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 80px 40px 120px;
  box-sizing: border-box;
  text-align: center;
}

.open-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-display-xsm, 32px);
  color: var(--color-gray-100);
  line-height: 1.3;
  letter-spacing: -0.42px;
  margin: 0;
}

.open-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  color: var(--dark);
  line-height: 1.5;
  letter-spacing: -0.16px;
  margin: 6px auto 0;
}

.open-illust-img {
  width: 640px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 40px auto 0;
}

@media (max-width: 767px) {
  .open-content {
    padding: 60px 20px 80px;
  }

  .open-title {
    font-size: 24px;
  }
}

/* ── 공모신청 내역 수정 (/mypage/edit) ────────────────────────────
   edit.html 인라인 <style> 이관. style.css의 apply 폼 공용 스타일
   (.div-radio/.btn-dl/.attach-head/.form-required-note)을 이 페이지에서만
   덮어쓰던 규칙이라, 폼의 .aply-edit 클래스로 스코프해 우선순위를 유지.
   (.file-exist/.files .file-label/.file-dl-cell은 style.css와 동일해 제거) */
.aply-edit .div-radio {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.aply-edit .div-radio label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 400;
}

.aply-edit .btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid var(--color-primary-60);
  color: var(--color-primary-60);
  border-radius: 4px;
  font-size: .8rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.aply-edit .btn-dl:hover {
  background: var(--color-primary-60);
  color: var(--white);
}

.aply-edit .attach-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.aply-edit .attach-head-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.aply-edit .attach-head h2 {
  margin: 0;
}

.aply-edit .form-required-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--color-error-5);
  border: 1px solid var(--color-error-10);
  color: var(--color-error);
  font-weight: 800;
  font-size: 1.15rem;
}

.aply-edit .form-required-note::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-error);
  color: var(--white);
  font-size: .9rem;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   인증 페이지 반응형 — 단일 소스
   브레이크포인트: 999(태블릿) / 767(모바일) / 480(소형 폰)
   ※ 동일 특이도의 기본 규칙을 이기려면 이 블록은 항상 파일 끝에 둘 것.
   ──────────────────────────────────────────────────────────────── */

/* 태블릿: 제목 한 단계 축소 */
@media (max-width: 999px) {
  .auth-wrap h2 {
    font-size: var(--text-display-xsm);
    /* 44 → 40 */
  }
}

/* 모바일: 카드 해체 — '떠 있는 흰 박스'는 데스크탑 패턴이라 흰 배경까지
   제거하고 폼을 페이지 배경(--bg) 위에 직접 배치. + 스텝 pill 압축 + 터치 타깃 확보 */
@media (max-width: 767px) {
  .auth-page {
    padding: 28px 0;
  }

  .auth-wrap {
    max-width: 100%;
    padding: 36px 28px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .auth-wrap.wide {
    max-width: 100%;
  }

  .steps {
    gap: 6px;
    margin-bottom: 20px;
  }

  .steps li {
    padding: 7px 12px;
    font-size: var(--text-body-label);
  }

  /* 16px 미만이면 iOS Safari가 입력 포커스 시 화면을 확대함 */
  .auth-wrap input,
  .auth-wrap textarea {
    font-size: var(--text-body-xs);
  }

  .pw-toggle {
    min-width: 44px;
    min-height: 44px;
    right: 4px;
  }

  /* 간편인증 안내 박스·버튼: 한 단계 축소 */
  .notice-center {
    padding: 28px 20px;
  }

  .notice-center-title {
    font-size: var(--text-display-xxsm);
    /* 40 → 32 */
  }

  .notice-center-desc {
    font-size: var(--text-body-xs);
    /* 20 → 18 */
  }

  .inicis-btn {
    padding: 14px 16px;
  }

  .inicis-btn__label {
    font-size: var(--text-body-md);
    /* 26 → 22, 모바일 CTA와 동일 */
  }

  .inicis-btn__providers {
    font-size: var(--text-body-label);
    /* 18 → 14 */
  }

  /* 동의 라벨: 문구가 길면 보기 링크를 아랫줄 우측으로 내림 */
  .check-label {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* 약관/동의서 모달: 바텀시트로 전환 — 하단 고정, 위 모서리만 라운드, 슬라이드업 */
  .terms-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .terms-modal {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
    animation: terms-sheet-up .28s cubic-bezier(.32, .72, 0, 1);
  }

  .terms-modal-foot {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .terms-modal-foot .auth-cta {
    max-width: 100%;
  }

  @keyframes terms-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .terms-modal {
    animation: none;
  }
}

/* 소형 폰: 여백·제목 추가 축소 (풀블리드는 767에서 이미 적용) */
@media (max-width: 480px) {
  .auth-page {
    padding: 24px 0;
  }

  .auth-wrap {
    padding: 28px 20px;
  }

  .auth-wrap h2 {
    font-size: var(--text-display-xxsm);
    /* 40 → 32 */
  }

  /* 스텝 pill: 현재 단계만 레이블, 나머지는 번호 원만(줄바꿈 방지).
     ::before 번호는 자체 font-size라 유지. .auth-wrap 스코프는 apply.html 제외 목적 */
  .auth-wrap .steps li:not([aria-current="step"]) {
    gap: 0;
    padding: 7px;
    font-size: 0;
  }

  .notice-center {
    padding: 32px 16px;
  }
}