/* REG 사이트 공통 — 색 · 서체 · 헤더 · 히어로 · 본문 폭.
   기준: 화면 시안 0장(디자인 기준) — 재단 학회 사이트(summit-tctap.com) 실측 토큰이다. 새 팔레트를 만들지 않는다.
   글자 크기는 시안(1000px 틀)의 비율을 유지하되 실제 화면 가독성을 위해 약 1.2배로 옮겼다.
   학회 사이트와 같게 라이트로 고정한다. */
:root {
  color-scheme: light;
  --reg-teal: #008085;          /* 청록 — 주 강조 */
  --reg-indigo: #36318F;        /* 인디고 — 주 색 (페이지 제목 · 주 버튼) */
  --reg-indigo-deep: #34236E;   /* 딥 인디고 */
  --reg-gold: #FFC342;          /* 골드 */
  --reg-text: #333333;
  --reg-text-2: #666666;
  --reg-text-3: #8e8e8e;
  --reg-line: #e4e4e4;
  --reg-line-2: #f0f0f0;
  --reg-font: "Poppins", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", sans-serif;
  /* select 의 펼침 표시 — 브라우저 기본 화살표를 끄고 같은 모양으로 그린다 */
  --reg-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23999999' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  /* 안내 상자 앞의 (i) 아이콘 — 모양(마스크)만 쓰고 색은 상자 글자색을 따른다 */
  --reg-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7.1 6.6h1.8V12H7.1zM8 5.3a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2z'/%3E%3C/svg%3E");
  /* 입력 검증 표시(B안 · 2026-09-27) — 오류 줄 앞 (!) 아이콘(마스크) · 확인 버튼의 체크 · 진행 중 표시 */
  --reg-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7.1 3.6h1.8v5.6H7.1zM8 12.9a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2z'/%3E%3C/svg%3E");
  /* 안내 상자의 성격 아이콘(2026-09-27) — ▲ 주의(삼각형 !) · ✓ 완료(원 안 체크). (i) · (!) 와 같은 마스크 방식이다 */
  --reg-caution-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.13 1.5a1 1 0 0 1 1.74 0l6.9 12.05a1 1 0 0 1-.87 1.5H1.1a1 1 0 0 1-.87-1.5zM7.1 5.6h1.8v4.6H7.1zM8 13.4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
  --reg-ok-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM6.9 11.6 3.7 8.4l1.3-1.3 1.9 1.9 4.2-4.2 1.3 1.3z'/%3E%3C/svg%3E");
  --reg-check-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23008085' d='M1.5 8.6 3.2 6.9 6.2 9.9 12.8 3.3 14.5 5 6.2 13.3z'/%3E%3C/svg%3E");
  --reg-spin-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%23ffffff' stroke-opacity='.4' stroke-width='2.2'/%3E%3Cpath d='M8 1.6A6.4 6.4 0 0 1 14.4 8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
  --reg-spin-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%23c9c9c9' stroke-width='2.2'/%3E%3Cpath d='M8 1.6A6.4 6.4 0 0 1 14.4 8' fill='none' stroke='%2336318F' stroke-width='2.2' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
}
/* 동작 줄이기 설정이면 진행 중 표시를 느리게 돈다 — .spinner 와 같은 기준 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --reg-spin-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%23ffffff' stroke-opacity='.4' stroke-width='2.2'/%3E%3Cpath d='M8 1.6A6.4 6.4 0 0 1 14.4 8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='3s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    --reg-spin-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%23c9c9c9' stroke-width='2.2'/%3E%3Cpath d='M8 1.6A6.4 6.4 0 0 1 14.4 8' fill='none' stroke='%2336318F' stroke-width='2.2' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='3s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #ffffff;
  color: var(--reg-text);
  font: 400 15px/1.6 var(--reg-font);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;       /* 한글은 어절(띄어쓰기) 단위로만 줄을 바꾼다 — "26일" / "(월)에"처럼 끊기지 않게 */
  overflow-wrap: break-word;  /* 띄어쓰기 없는 긴 문자열(주소 등)은 칸을 넘기지 않고 끊는다 */
}

/* ── 헤더 — 로고만 둔다 (GNB · 사이드 내비 · breadcrumb 없음). 로고는 공식 홈페이지로 돌아가는 링크 ── */
.site-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 26px;
  border-bottom: 1px solid var(--reg-line-2);
}
.site-logo {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--reg-indigo-deep);
  text-decoration: none;
  white-space: nowrap;
}
.site-logo em { font-style: normal; font-size: 12px; vertical-align: super; color: var(--reg-teal); }
.site-logo .yr { color: var(--reg-teal); }
.site-logo:focus-visible { outline: 2px solid var(--reg-teal); outline-offset: 3px; border-radius: 2px; }

/* ── 현재 시각 · 버전 — 헤더 오른쪽 끝에 작고 흐리게 (2026-09-29 목업 A안 · 마크업은 WWW.Commons.BuildStamp) ──
   누를 수 없는 표기라 「상단은 로고만」의 내비게이션이 아니다. 모바일은 로고 옆 폭이 모자라 시각 / 버전 두 줄로 접는다. */
.build-stamp {
  margin-left: auto;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .02em;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--reg-text-2);
  opacity: .5;
}
@media (max-width: 767.98px) {
  .build-stamp { font-size: 10px; }
  .build-stamp-time, .build-stamp-ver { display: block; }
  .build-stamp-sep { display: none; }
}

/* ── 히어로 밴드 — 청록 그라데이션 + 광선, 가운데 페이지 제목 ── */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 31px 20px;
  background: linear-gradient(90deg, #5cc9c8 0%, #c9edeb 14%, #ffffff 42%, #ffffff 58%, #e4f4ef 84%, #4fc2cf 100%);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: -40%;
  width: 34%;
  height: 180%;
  pointer-events: none;
  background: repeating-linear-gradient(76deg, rgba(255, 255, 255, .85) 0 2px, rgba(255, 255, 255, 0) 2px 9px);
}
.hero::before { left: -4%; transform: rotate(-8deg); }
.hero::after { right: -4%; transform: rotate(8deg) scaleX(-1); }
/* 글자를 광선 위로 — 좁은 화면에서는 광선이 가운데 글자까지 겹친다 */
.hero > * { position: relative; z-index: 1; }
.hero h1 {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--reg-indigo);
}

/* ── 본문 — 한 단 중앙 정렬, 최대 900px ── */
.page-main {
  max-width: 948px; /* 900 + 좌우 여백 */
  margin: 0 auto;
  padding: 32px 24px 44px;
}

/* ── 모바일 (768px 미만) — 태블릿은 PC 레이아웃을 따른다 ── */
@media (max-width: 767.98px) {
  .site-header { gap: 12px; padding: 11px 16px; }
  .hero { padding: 22px 16px; }
  .hero h1 { font-size: 21px; }
  .page-main { padding: 22px 16px 28px; }
}

/* ══════════════════════════════════════════════════════════════════════
   공통 컴포넌트 — 화면 시안 v0.36의 목업 디자인 시스템을 옮긴 것이다.
   시안은 1000px 틀에 13px 기준으로 그려졌고, 여기서는 본문 15px 기준으로
   같은 비율(약 1.15배)을 유지한다. 새 팔레트 · 새 컴포넌트를 만들지 않는다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 페이지 제목 ── */
.page-title {
  margin: 0 0 21px;
  padding-bottom: 13px;
  font-size: 20px;
  font-weight: 700;
  color: var(--reg-indigo);
  border-bottom: 2px solid var(--reg-indigo-deep);
}
.page-title small { margin-left: 9px; font-size: 14px; font-weight: 500; color: var(--reg-text-2); }

/* ── 위저드 단계 표시 (S-02 ~ S-04) ── */
.wizard {
  display: flex;
  margin: 0 0 21px;
  padding: 0;
  border: 1px solid var(--reg-line);
  border-radius: 5px;
  overflow: hidden;
}
.wizard li {
  flex: 1;
  padding: 10px 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #a0a0a8;
  background: #fafafa;
  border-right: 1px solid var(--reg-line-2);
  list-style: none;
}
.wizard li:last-child { border-right: 0; }
.wizard li.is-on { background: var(--reg-indigo); color: #fff; }
.wizard li small { display: block; font-size: 11.5px; font-weight: 400; opacity: .8; }

/* ── 카드 ── */
.card {
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
}
.card-head {
  margin: 0;
  padding: 13px 19px;
  font-size: 15px;
  font-weight: 600;
  color: var(--reg-teal);
  background: #f5f5f5;
  border-bottom: 1px solid #ececec;
}
.card-head .sub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--reg-text-2);
}
/* 영문 화면의 섹션 제목은 전부 대문자다 — 입력 항목명은 단어 첫 글자만 대문자로 마크업에 적는다 (09-28 재단 요청).
   제목 곁의 설명(.sub) · 배지는 문장이라 그대로 둔다. 국문 화면은 제목이 한글이라 대상이 아니다. */
.card-head:lang(en) { text-transform: uppercase; }
.card-head .sub, .card-head .badge { text-transform: none; }
.card.is-pay > .card-head { color: #fff; background: var(--reg-indigo-deep); border-bottom-color: var(--reg-indigo-deep); }
.card.is-pay > .card-head .sub { color: #c8c3e2; }
.card.is-sub { margin: 16px 0 0; border-color: #e8e8e8; }
.card.is-sub > .card-head { color: #4a4a55; background: #fafafa; }
.card-body { padding: 17px 19px 19px; }

/* ── 폼 ── */
/* 선택에 따라 열고 닫는 칸(Site.js) — .form-row · .note 처럼 display 를 정한 요소에도 hidden 이 이기게 한다 */
[hidden] { display: none !important; }
.form-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 7px 0;
}
.form-label {
  padding-top: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .03em;
  color: #4a4a55;
}
/* 보조 문구(.kr)는 다음 줄로 내려간다 — 필수 표시(.req)는 .kr 앞에 둘 것. 뒤에 두면 「*」가 혼자 한 줄을 차지한다 (2026-09-26) */
.form-label .kr { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--reg-text-2); }
.req { margin-left: 2px; font-weight: 700; color: #e2372f; }
.form-field { min-width: 0; }
.form-help { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--reg-teal); }
.form-help.is-grey { color: var(--reg-text-3); }
.form-help.is-warn { color: #c0392b; font-weight: 500; }
.form-static { padding-top: 9px; font-size: 15px; font-weight: 600; color: var(--reg-indigo); }
.form-static .cur { font-size: 19px; }
.form-static .sub { font-size: 13px; font-weight: 400; color: var(--reg-text-2); }

/* 입력 컨트롤 — 시안의 .m-inp 를 실제 input · select 로 옮긴 것 */
.input, .select {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  font: inherit;
  font-size: 14.5px;
  color: var(--reg-indigo);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.input::placeholder { color: #b0b0b0; }
.input:focus, .select:focus { outline: 2px solid var(--reg-teal); outline-offset: 1px; border-color: var(--reg-teal); }
.input[readonly], .input:disabled, .select:disabled, .input.is-locked {
  color: var(--reg-text-2);
  background: #eef0f4;
  border-color: #dfe2e8;
}
/* 입력 칸이 아닌 잠긴 값(div) — 한 줄 입력 칸과 달리 긴 값(이메일 등)을 잘라 먹지 않고 줄을 바꾼다 (2026-09-26) */
.input.is-locked { overflow-wrap: anywhere; }
.select { appearance: none; padding-right: 30px; background-image: var(--reg-caret); background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 6px; }
.input-inline { display: flex; gap: 9px; align-items: stretch; }
.input-inline .input { flex: 1; }
.is-narrow { max-width: 340px; }
.is-mid { max-width: 480px; }

/* ── 버튼 ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;      /* 한글 4글자 — 「적용」 같은 두 글자 버튼이 좁아 보이지 않게 */
  padding: 10px 21px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.btn-primary { color: #fff; background: var(--reg-indigo); }
.btn-teal { color: #fff; background: var(--reg-teal); }
.btn-secondary { color: #555; background: #fff; border: 1px solid #c9c9c9; }
.btn-warn { color: #b3372f; background: #fff; border: 1px solid #e0a9a4; }
.btn-sm { min-width: 0; padding: 8px 15px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--reg-teal); outline-offset: 2px; }
.btn[disabled], a.btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.form-actions { display: flex; gap: 11px; justify-content: center; margin-top: 23px; }

/* ── 동의 · 체크 ── */
.terms-box {
  height: 120px;
  padding: 13px 15px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.75;
  color: #5a5a6a;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
}
.terms-box b { font-weight: 600; color: var(--reg-indigo); }
/* 문구가 두 줄로 꺾여도 체크박스는 첫 줄에 선다 — .radio-list 와 같은 방식(14px × 1.6 줄의 가운데 = 위 4px) (2026-09-26) */
.check { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--reg-text); cursor: pointer; }
.card-body > .check { margin-top: 11px; }
.check input { width: 15px; height: 15px; margin: 4px 0 0; flex: none; accent-color: var(--reg-indigo); }
.check-list { display: flex; flex-wrap: wrap; gap: 10px 20px; }
/* 동의 전 입력 잠금 — 1단계는 개인정보 동의에 체크하기 전에 그 아래 입력 영역(fieldset)을 통째로 잠근다 (2026-09-27 사용자 지시 · Site.js ②).
   fieldset 은 틀로만 쓰므로 기본 테두리 · 여백을 지운다. 잠긴 동안에는 카드를 흐리게 하고 안내 한 줄을 보인다(풀리면 숨는다). */
.consent-gate { min-width: 0; margin: 0; padding: 0; border: 0; }
.consent-gate[disabled] > .card { opacity: .6; }
.consent-gate[disabled] .btn, .consent-gate[disabled] .check { cursor: default; }
.consent-gate-note { margin-bottom: 10px; }
.consent-gate:not([disabled]) > .consent-gate-note { display: none; }

/* ── 표 ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-align: left;
  white-space: nowrap;
  color: var(--reg-text-2);
  background: #f5f5f5;
  border-bottom: 1px solid #e6e6e6;
}
.data-table td { padding: 9px 12px; color: #4a4a4a; vertical-align: middle; border-bottom: 1px solid #f2f2f2; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--reg-indigo); }
.data-table td.free { text-align: right; font-weight: 700; color: var(--reg-teal); }
.data-table tr.is-hl td { background: #f4fbfb; }

/* ── 정의 목록 (확인 화면) ── */
/* 항목명 칸은 가장 긴 항목명에 맞춰 넓어지고(최소 100px) 줄을 바꾸지 않는다 — 고정 100px 이던 때 「Registration No.」가 두 줄로 꺾였다 (2026-09-30 재단 수정요청) */
.detail-list {
  display: grid;
  grid-template-columns: minmax(100px, max-content) minmax(0, 1fr) minmax(100px, max-content) minmax(0, 1fr);
  gap: 10px 14px;
  margin: 0;
  font-size: 14px;
}
.detail-list dt { font-size: 13px; font-weight: 600; color: var(--reg-text-2); white-space: nowrap; }
.detail-list dd { margin: 0; font-weight: 500; color: var(--reg-indigo); }

/* ── 안내 상자 · 상태 배지 ── */
.note {
  position: relative;
  padding: 13px 15px 13px 39px;   /* 왼쪽은 성격 아이콘 자리 */
  font-size: 13.5px;
  line-height: 1.65;
  color: #2c6d70;
  background: #f2fbfb;
  border: 1px solid #d5e9e9;
  border-radius: 4px;
}
.note-warn { color: #a8433a; background: #fdf5f4; border-color: #f0d9d5; }
.note-gold { color: #8a6d22; background: #fdf9ee; border-color: #f2e2b8; }
.note-dash { border-style: dashed; }
.note + .note { margin-top: 10px; }
.note b { font-weight: 700; }
/* 안내 상자 안의 목록 — 계좌 입금 안내(S-04 · S-05 · 2026-09-30 재단 수정요청). 상자 첫머리면 위 여백 없이 아이콘과 첫 줄을 맞춘다 */
.note-list { margin: 6px 0 0; padding-left: 1.2em; }
.note-list:first-child { margin-top: 0; }
.note-list li + li { margin-top: 4px; }
.note-oneline { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
/* 안내 상자는 모두 글 앞에 성격 아이콘을 둔다 (2026-09-27 사용자 요청 — 처음엔 .note-icon 을 붙인 상자만이었고 같은 날 전 화면으로 넓혔다).
   아이콘은 상자 색이 정한다 — 청록 (i) 안내 · note-warn (!) 경고 · 오류 · note-gold ▲ 주의(챙길 것 · 아직 끝나지 않음).
   색과 성격이 어긋나는 상자는 ico-* 로 아이콘만 바꾼다 — ico-ok ✓ 완료 · ico-info · ico-alert · ico-caution. 색은 상자 글자색(currentColor)을 따른다.
   flex 로 나누지 않고 왼쪽 여백 + 절대 위치로 그린다 — 본문 안의 링크 · 굵은 글씨가 한 줄 흐름 그대로 이어지게. */
.note::before {
  content: "";
  position: absolute;
  left: 15px;
  top: calc(13px + 0.25em);   /* 첫 줄 가운데 — (줄 높이 1.65em − 아이콘 1.15em) / 2 */
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--reg-info-icon) center / contain no-repeat;
  mask: var(--reg-info-icon) center / contain no-repeat;
}
.note-warn::before, .note.ico-alert::before { -webkit-mask-image: var(--reg-alert-icon); mask-image: var(--reg-alert-icon); }
.note-gold::before, .note.ico-caution::before { -webkit-mask-image: var(--reg-caution-icon); mask-image: var(--reg-caution-icon); }
.note.ico-info::before { -webkit-mask-image: var(--reg-info-icon); mask-image: var(--reg-info-icon); }
.note.ico-ok::before { -webkit-mask-image: var(--reg-ok-icon); mask-image: var(--reg-ok-icon); }
/* 개발자 공지 — 개발 · 시연 중에만 두는 눈에 띄는 상자. 오픈 전에 마크업째 걷어낸다. */
/* 자리는 페이지 최상단(로고 헤더 위)의 가로 띠다 — 글은 로고와 같은 왼쪽 여백(26px)에서 시작하고, 오른쪽 끝에 닫기(×)가 있다 (2026-09-28 사용자 요청). */
.dev-notice {
  position: relative;
  padding: 10px 56px 10px 26px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
  color: #b3261e;
  background: #fff4f2;
  border-bottom: 2px solid #d93025;
}
.dev-notice p { margin: 0; }
.dev-notice ul { margin: 2px 0 0; padding-left: 20px; }
.dev-notice-close {
  position: absolute;
  top: 8px;
  right: 14px;
  width: 30px;
  height: 30px;
  padding: 0;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.dev-notice-close:hover { background: rgba(217, 48, 37, .12); }
.dev-notice-close:focus-visible { outline: 2px solid #d93025; outline-offset: 1px; }
@media (max-width: 767.98px) {
  .dev-notice { padding: 9px 48px 9px 16px; }   /* 모바일 헤더와 같은 왼쪽 여백 */
  .dev-notice-close { right: 8px; }
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 3px;
}
.badge-ok { color: #fff; background: var(--reg-teal); }
.badge-wait { color: #fff; background: #f0a828; }
.badge-ng { color: #fff; background: #c0392b; }
.text-link { font-weight: 700; color: var(--reg-indigo); white-space: nowrap; text-underline-offset: 3px; }
/* 짧은 부기 — 요금표의 「결제 단계에서 선택」처럼 본문 옆에 붙는 작은 표기 */
.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  vertical-align: 1px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--reg-teal);
  background: #f2fbfb;
  border: 1px solid #b9dedd;
  border-radius: 2px;
}

/* ── 계좌 안내 ── */
.bank-box {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.85;
  background: #fafafa;
  border: 1px solid var(--reg-line);
  border-radius: 4px;
}
.bank-box b { font-weight: 700; color: var(--reg-indigo-deep); }
.bank-box.is-code { font-family: Consolas, "D2Coding", monospace; font-size: 13px; line-height: 1.9; word-break: break-all; }

/* ── 결제수단 선택 (세그먼트) ── */
/* 폭 제한 없음 — 다른 입력 컨트롤과 같은 오른쪽 끝까지 (2026-09-26 · 종전 max-width 520px) */
.segment { display: flex; border: 1px solid var(--reg-indigo); border-radius: 3px; overflow: hidden; }
.segment label { flex: 1; border-right: 1px solid #d5d3e8; cursor: pointer; }
.segment label:last-child { border-right: 0; }
.segment input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segment label > span {
  display: block;
  padding: 9px 7px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--reg-indigo);
  background: #fff;
}
.segment input:checked + span { color: #fff; background: var(--reg-indigo); }
.segment input:focus-visible + span { outline: 2px solid var(--reg-teal); outline-offset: -2px; }

/* ── 결제 금액 ── */
.amount-box { max-width: 480px; }
.amount-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: 14.5px; color: var(--reg-text-2); }
.amount-row b { font-weight: 600; color: var(--reg-text); }
.amount-row.is-discount span:last-child { font-weight: 600; color: var(--reg-teal); }
.amount-row.is-total { margin-top: 9px; padding-top: 13px; border-top: 1px solid #e2e2e2; }
.amount-row.is-total > span:first-child { font-weight: 600; color: var(--reg-text); }
.amount-row.is-total b { font-size: 22px; font-weight: 700; color: var(--reg-indigo); }

/* ── 등록 방법 선택 카드 (S-01) ── */
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.entry-card { padding: 19px 18px 20px; text-align: center; background: #fff; border: 1px solid var(--reg-line); border-radius: 8px; }
.entry-card.is-soon { background: #fafafa; }
.entry-card h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--reg-indigo); }
.entry-card p { margin: 0 0 15px; min-height: 42px; font-size: 13.5px; line-height: 1.6; color: var(--reg-text-2); }
.entry-card h4 + .btn { margin-top: 9px; }

/* 요금표 위 사전등록 / 현장등록 기간 · 운영 수수료 — 09-22 재단 요청(현행 등록 화면 형식), 시안 v0.44 .m-period */
.fee-period { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 0 0 14px; text-align: center; }
.fee-period > div { padding: 12px 9px; background: #fafafa; border: 1px solid #e6e6ea; border-radius: 6px; }
.fee-period b { display: block; font-size: 15px; font-weight: 700; color: var(--reg-indigo); }
.fee-period span { display: block; margin-top: 2px; font-size: 14px; color: var(--reg-text); }
.fee-period em { display: block; margin-top: 3px; font-size: 12.5px; font-style: normal; color: #d33; }
.page-title .is-early { font-style: normal; }
.page-title small.is-deadline { font-weight: 600; color: var(--reg-indigo-deep); }

/* 국외 휴대전화 국가번호 선택 — 번호 칸 앞 (09-22) */
.input-inline .select.is-dial { flex: 0 0 240px; width: 240px; }

/* S-05 — 등록번호가 최초 비밀번호라는 안내 (09-22 재단 요청 · 09-23 수용) */
.center-block .initial-password { margin-top: 10px; color: var(--reg-indigo); }

/* ── 내국인 / 외국인 선택 (S-01) · 선택 결과 표시 (S-02~S-04) ── */
.audience-cap { margin: 0 0 9px; font-size: 13.5px; color: var(--reg-text-2); }
.audience-cap .en { color: #999; }
.audience { display: flex; gap: 11px; margin: 0 0 25px; }
.audience-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  background: #fff;
  border: 1.5px solid #d8d8e2;
  border-radius: 8px;
  cursor: pointer;
}
/* 선택 표시 — 서버가 그린 초기 상태는 .is-on, 누른 즉시 바뀌는 것은 :has() 가 맡는다 */
.audience-option.is-on,
.audience-option:has(input:checked) { background: #f5f4fb; border-color: var(--reg-indigo); }
.audience-option:has(input:focus-visible) { outline: 2px solid var(--reg-teal); outline-offset: 2px; }
.audience-option input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--reg-indigo); }
.audience-option b { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--reg-indigo-deep); }
.audience-option .en { display: block; font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--reg-text-2); }
.audience-option .lg {
  margin-left: auto;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--reg-teal);
  background: #f2fbfb;
  border: 1px solid #b9dedd;
  border-radius: 3px;
}
.audience-summary { display: flex; align-items: center; gap: 9px; margin: -6px 0 16px; font-size: 13.5px; color: var(--reg-text-2); }
.audience-summary b { font-weight: 700; color: var(--reg-indigo-deep); }
.audience-summary .chg { margin-left: auto; font-weight: 600; white-space: nowrap; color: var(--reg-indigo); text-underline-offset: 3px; }

/* ── 만 65세 이상 무료 체크 (S-02 · 09-11 R-15, 09-16 1단계로 이동) ── */
.senior-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: #faf9fe;
  border: 1px dashed #cfcce6;
  border-radius: 6px;
}
.senior-option .form-help { flex-basis: 100%; margin-top: 0; }

/* ── 입력 검증 표시 — 누른 버튼이 결과가 된다 (S-02 · 2026-09-27 사용자 결정, 개선안 B) ──
   결과는 입력 칸과 그 옆 버튼에 먼저 드러난다 — 「중복 확인」 → 「확인 중」 → 「✓ 확인 완료」, 오류면 칸이 붉어진다.
   아래 한 줄(.field-msg)은 도움말 자리를 결과가 대신한다(쌓지 않는다). 도움말은 회색이고 청록은 성공에만 쓴다.
   색만으로 말하지 않는다 — 오류 · 안내 줄 앞에 아이콘을 둔다. 칸을 고치면 결과를 거두는 것은 Site.js ③ 이 한다. */
.input.is-err { background: #fffafa; border-color: #c0392b; }
.input.is-err:focus { outline-color: #c0392b; border-color: #c0392b; }
.input.is-confirmed { color: var(--reg-indigo-deep); background: #f4fbfb; border-color: #b9dedd; }

.field-msg { position: relative; margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--reg-text-3); }
.field-msg b { font-weight: 600; color: var(--reg-text-2); }
.field-msg.is-err, .field-msg.is-info { padding-left: 20px; }
.field-msg.is-err { font-weight: 500; color: #c0392b; }
.field-msg.is-info { color: var(--reg-indigo); }
.field-msg.is-err b, .field-msg.is-info b { font-weight: 700; color: inherit; }
/* 붉은 도움말(.form-help.is-warn — 1단계 데모 인증번호 줄)도 경고 줄이라 같은 (!) 를 둔다 (2026-09-27) */
.form-help.is-warn { position: relative; padding-left: 20px; }
/* 아이콘은 첫 줄 가운데 — 본문 안의 굵은 글씨가 한 줄 흐름 그대로 이어지게 여백 + 절대 위치로 그린다(.note 와 같은 방식) */
.field-msg.is-err::before, .field-msg.is-info::before, .form-help.is-warn::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1.55em - 14px) / 2);
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--reg-info-icon) center / contain no-repeat;
  mask: var(--reg-info-icon) center / contain no-repeat;
}
.field-msg.is-err::before, .form-help.is-warn::before { -webkit-mask-image: var(--reg-alert-icon); mask-image: var(--reg-alert-icon); }
.field-msg .eg { margin-left: 4px; font-weight: 400; color: var(--reg-text-3); }

/* 입력 검사 — 보내기 전에 검사한다 (S-02~S-04 · 2026-09-27 등록 화면 입력 검사 A안 · Site.js ④). 오류 줄은 위의 .field-msg.is-err 그대로다.
   드롭다운도 글 칸처럼 붉히고(배경 그림 = 펼침 표시를 지우지 않게 background-color 만), 체크박스 · 라디오는 윤곽선을 두른다. */
.select.is-err { background-color: #fffafa; border-color: #c0392b; }
.select.is-err:focus { outline-color: #c0392b; border-color: #c0392b; }
input[type="checkbox"][aria-invalid="true"],
input[type="radio"][aria-invalid="true"] { outline: 2px solid #c0392b; outline-offset: 1px; }

/* 확인 버튼 — 폭을 고정해 문구가 바뀌어도 칸이 흔들리지 않는다.
   is-again  다시 하기(「재전송」) — 흰 버튼
   is-busy   서버에 다녀오는 중 — 문구 앞에 도는 표시, 누를 수 없음(disabled)
   is-done   확인 완료 — 청록 체크. 누를 수 없게 aria-disabled 로 둔다. disabled 로 그리면 스크립트가 없는 화면에서
             칸을 고친 뒤 다시 누를 수 없게 된다(서버가 같은 요청을 다시 받아도 문제없게 되어 있다). */
.btn-state { min-width: 112px; }
.btn-state.is-again { color: #555; background: #fff; border: 1px solid #c9c9c9; }
.btn-state.is-busy,
.btn-state.is-done { padding-left: 33px; background-repeat: no-repeat; background-position: 14px center; background-size: 13px 13px; }
.btn-state.is-busy { background-image: var(--reg-spin-light); cursor: progress; }
.btn-state.is-again.is-busy { background-image: var(--reg-spin-dark); }
.btn-state.is-busy[disabled] { opacity: .85; }
.btn-state.is-done { color: var(--reg-teal); background-color: #f2fbfb; background-image: var(--reg-check-teal); border: 1px solid #b9dedd; cursor: default; }

/* ── 휴대전화 문자 인증 (S-02 · 09-16) — 인증번호 줄은 상자 없이 휴대전화 칸 바로 아래 한 줄, 남은 시간은 칸 안 오른쪽 (2026-09-27 B안) ── */
.auth-row { margin-top: 9px; }
.input-timer { position: relative; flex: 1; min-width: 0; display: flex; }
.input-timer .input { padding-right: 60px; }
.input-timer .timer {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--reg-indigo);
  pointer-events: none;
}
.input-timer .timer.is-over { color: #c0392b; }

/* 화면에는 보이지 않고 화면 낭독기만 읽는 글 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 라디오 목록 (S-02 SummitMD 가입 여부) ── */
.radio-list { display: grid; gap: 9px; font-size: 14px; }
.radio-list label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.radio-list input { width: 15px; height: 15px; margin: 4px 0 0; flex: none; accent-color: var(--reg-indigo); }
/* RadioButtonList(Flow) — input · label · br 가 번갈아 나온다 (S-03 국외 VISA, 09-22).
   라디오 한 칸 + 문구 한 칸의 격자로 세워 문구가 꺾여도 내어쓴다 — .radio-list 와 같은 모양 (2026-09-26, 종전 한 줄 흘려쓰기 · 줄 간격 2) */
.radio-options { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; font-size: 14px; line-height: 1.6; }
.radio-options br { display: none; }
.radio-options input { width: 15px; height: 15px; margin: 4px 0 0; accent-color: var(--reg-indigo); }
.radio-options label { cursor: pointer; }

/* 메일 · 다운로드 링크 */
.mail-link { font-weight: 700; color: var(--reg-indigo); text-underline-offset: 2px; }
.btn-download::before { content: "\2193"; margin-right: 7px; }

/* ── 진행 · 결과 안내 (S-13 · S-05) ── */
.center-block { padding: 38px 20px 34px; text-align: center; }
.center-block h4 { margin: 0 0 9px; font-size: 18px; font-weight: 700; color: var(--reg-indigo); }
/* 문단 폭은 아래 결과 표(S-05 detail-list 640px)와 같다 — 46ch 로 좁혔더니 한 문장이 두 줄로 꺾였다 (2026-09-28 사용자 요청). */
.center-block p { margin: 0 auto; max-width: 640px; font-size: 14px; line-height: 1.7; color: var(--reg-text-2); }
.center-block .en { margin-top: 7px; font-size: 12.5px; color: #999; }
.spinner {
  width: 38px;
  height: 38px;
  margin: 0 auto 16px;
  border: 3px solid #dcdce6;
  border-top-color: var(--reg-indigo);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* ── 여백 유틸리티 — 시안의 인라인 margin 을 대신한다 ── */
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 20px; }

/* ── 모바일 (768px 미만) ── */
@media (max-width: 767.98px) {
  .page-title { font-size: 17px; margin-bottom: 16px; }
  .wizard li { font-size: 12px; padding: 9px 4px; }
  .card-head { padding: 12px 15px; font-size: 14px; }
  .card-body { padding: 15px; }
  .form-row { grid-template-columns: 1fr; gap: 5px; padding: 8px 0; }
  .form-label { padding-top: 0; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
  .detail-list { grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); }
  .entry-grid { grid-template-columns: 1fr; }
  .fee-period { grid-template-columns: 1fr; gap: 8px; margin-bottom: 11px; }
  .input-inline:has(.is-dial) { flex-wrap: wrap; }
  .input-inline .select.is-dial { flex: 1 0 100%; width: 100%; }
  /* 국내 휴대전화 안내(「하이픈(-) 없이 숫자만 입력해 주세요」)는 「번호 인증」 옆 칸에 비해 길다 — 폰 폭에서 잘리지 않게 줄인다 (2026-09-27) */
  .input[data-input="kr-mobile"]::placeholder { font-size: 12px; letter-spacing: -0.03em; }
  .audience { flex-direction: column; gap: 9px; margin-bottom: 18px; }
  .note-oneline { display: block; }
  .note-oneline .text-link { display: inline-block; margin-top: 8px; }
  .segment { flex-wrap: wrap; }
  .segment label { flex: 1 0 50%; }
  .center-block { padding: 26px 10px 24px; }
  .center-block h4 { font-size: 16px; }
}