/* 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;  /* 띄어쓰기 없는 긴 문자열(주소 등)은 칸을 넘기지 않고 끊는다 */
}

/* ── 운영자 머리 — 관리자 창에서 「새 탭에서 열기」로 연 MyPage 맨 위 (2026-10-15 · TCTAP/My/Default.aspx). 팝업 머리와 같은 줄 ── */
.ticket-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 26px;
  background: #f6f7f9;
  border-bottom: 1px solid var(--reg-line);
  font-size: 13px;
}
.ticket-bar-title { margin-right: auto; font-weight: 700; color: #222; }
/* 모드 전환 스위치(2026-10-29 E안 · assets/css/ModeSwitch.css)의 툴팁이 아래 헤더 · 히어로 위에 뜨게 띠를 위로 올린다 */
.ticket-bar { position: relative; z-index: 20; }
.ticket-bar .mode-switch { margin-left: auto; }
@media (max-width: 767.98px) { .ticket-bar { padding: 8px 16px; } }

/* ── 헤더 — 로고만 둔다 (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; }
/* 접는 카드 — <details class="card card-fold"><summary class="card-head">. 머리를 누르면 펼치고 접는다(MyPage 「비밀번호 변경」 · 「등록 취소」 —
   2026-10-01 사용자 요청). 오른쪽 끝 꺾쇠가 펼침 상태를 보인다. 스크립트 없이 브라우저가 여닫는다. */
.card-fold > summary { display: block; position: relative; padding-right: 48px; cursor: pointer; list-style: none; }
.card-fold > summary::-webkit-details-marker { display: none; }
.card-fold > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 21px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s;
}
.card-fold[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.card-fold:not([open]) > summary { border-bottom-color: transparent; }
.card-fold > summary:hover { background: #efefef; }
.card-fold > summary:focus-visible { outline: 2px solid var(--reg-teal); outline-offset: -2px; }

/* ── 폼 ── */
/* 선택에 따라 열고 닫는 칸(Site.js) — .form-row · .note 처럼 display 를 정한 요소에도 hidden 이 이기게 한다 */
[hidden] { display: none !important; }
/* 좌우로 12px 씩 삐져나오고 같은 만큼 안쪽 여백을 둔다 — 안의 글자 · 칸 위치는 그대로이고, 오류가 나면 줄 전체가 물든다(아래 「오류 줄 강조」) */
.form-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 7px 12px;
  margin-left: -12px;
  margin-right: -12px;
  border-radius: 6px;
}
.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; }

/* ── 등록비 축소 시험 띠 (2026-10-03 · TEST IP 「등록비 축소 버튼 표시」 접속에만) — 「결제하기」 아래의 골드 점선 상자 ──
   버튼은 「결제하기」와 같은 .btn.btn-primary 이고 줄도 .form-actions 와 같이 가운데 정렬이다(2026-10-04 사용자 요청). */
.test-bar { margin-top: 18px; padding: 12px 14px; border: 1.5px dashed #d99a00; border-radius: 6px; background: #fffbef; color: #6b4a00; font-size: 13.5px; text-align: center; }
.test-bar-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }
.test-tag { padding: 0 6px; border-radius: 3px; background: var(--reg-gold, #FFC342); color: #34236E; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.test-bar-buttons { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: 12px; }
.test-bar-note { margin-top: 10px; color: #8a6a1a; font-size: 12.5px; }

/* ── 동의 · 체크 ── */
.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); }
/* 투명 테두리 + 안쪽 여백으로 칸 표시를 그릴 틀을 미리 잡아 둔다 — 음수 여백이 같은 만큼 되돌려 글자 · 높이는 그대로이고,
   오류가 나면 이 틀이 붉어진다(아래 「오류 줄 강조」). 숨은 체크박스 묶음에도 칸 표시가 보이게 하려는 것이다 (2026-10-04) */
.check-list { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 6px 11px; margin: -7px 0 -7px -12px; border: 1px solid transparent; border-radius: 3px; }
/* 줄 틀이 없는 동의 체크 · 참석일 묶음도 오류가 나면 .form-row 처럼 줄 전체가 물들게 감싼다 (2026-10-04). is-after-box = 위 상자와 11px 간격 */
.check-row { padding: 7px 12px; margin-left: -12px; margin-right: -12px; border-radius: 6px; }
.check-row .check-list { margin-left: -6px; padding-left: 5px; }   /* 틀이 줄 가장자리(왼쪽 막대)에 붙지 않게 6px 들여 둔다 — 글자 위치는 그대로 */
.check-row.is-after-box { margin-top: 4px; }
.check-row.is-solo { margin-top: -7px; margin-bottom: -7px; }
/* 동의 전 입력 잠금 — 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 th.num { text-align: right; }
.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; }

/* ── 입금 계좌 안내 (TCTAP/DepositGuide.ascx — MyPage · 결과 화면) ──
   목업 B안(2026-10-02 사용자 결정): 상자 하나를 두 단으로 — 왼쪽 계좌(이름 · 값 표), 오른쪽 입금 전 확인(글머리표). 모바일은 위아래로 쌓는다.
   종전의 하위 카드 › 계좌 상자 · 안내 상자 세 겹을 걷었다. .is-bare 는 소제목 · 구분선이 없는 모습(결과 화면 — 카드 머리가 제목). */
.deposit-guide { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--reg-line-2); }
.deposit-guide.is-bare { margin-top: 14px; padding-top: 0; border-top: 0; }
.deposit-title { font-size: 15px; font-weight: 600; color: var(--reg-teal); }
.deposit-sub { margin: 2px 0 10px; font-size: 13px; color: var(--reg-text-2); }
.deposit-sub b { color: var(--reg-text); }
.deposit-box {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: #fafafa;
  border: 1px solid var(--reg-line);
  border-radius: 6px;
}
.deposit-box > div { padding: 14px 16px; }
.deposit-box > div + div { border-left: 1px solid var(--reg-line); }
.deposit-cap { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--reg-teal); }
.deposit-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.deposit-kv dt { font-size: 13px; font-weight: 600; color: var(--reg-text-2); }
.deposit-kv dd { margin: 0; font-weight: 600; color: var(--reg-indigo-deep); word-break: break-word; }
.deposit-kv .ex { display: block; font-size: 12px; font-weight: 400; color: var(--reg-text-3); }
.deposit-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.65; color: var(--reg-text-2); }
.deposit-list li + li { margin-top: 6px; }
.deposit-list b { color: var(--reg-text); }
.deposit-list .is-warn, .deposit-list .is-warn b { color: #c0392b; }
@media (max-width: 767.98px) {
  .deposit-box { grid-template-columns: minmax(0, 1fr); }
  .deposit-box > div + div { border-left: 0; border-top: 1px solid var(--reg-line); }
}

/* ── 결제수단 선택 (세그먼트) ── */
/* 폭 제한 없음 — 다른 입력 컨트롤과 같은 오른쪽 끝까지 (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); }

/* ── 결제 정보 띠 · 내역 (MyPage S-10 — 2026-10-05 사용자 결정 · 목업 4안 중 D안) ──
   띠(.pay-strip)는 결제 금액 · 결제 상태 배지 · 결제 수단, 내역(.pay-lines)은 항목 한 열에 조정분(쿠폰 · 만 65세 · 등록비 축소)이 그 항목 바로 밑의
   하위 줄(.is-sub — 왼쪽 「└」 꺾쇠 · 청록)이다. 치수는 3단계 금액 표(.amount-row)를 따른다. 모바일은 띠가 두 줄로 접힌다(수단이 아래). */
.pay-strip { display: flex; align-items: center; gap: 16px; padding: 13px 17px; background: #f6f5fb; border: 1px solid #e3e0f0; border-radius: 6px; }
.pay-strip-label { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--reg-text-2); }
.pay-strip-amount b { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--reg-indigo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-strip-meta { margin-left: auto; font-size: 13px; line-height: 1.5; text-align: right; color: var(--reg-text-2); }
.pay-strip-meta b { display: block; font-weight: 600; color: var(--reg-indigo-deep); }
.pay-lines { max-width: 480px; margin-top: 14px; }
.pay-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0 4px; font-size: 14.5px; color: var(--reg-text-2); }
.pay-line b { font-weight: 600; color: var(--reg-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-line small { margin-left: 6px; font-size: 12.5px; font-weight: 400; color: var(--reg-text-3); }
.pay-line.is-sub { position: relative; padding: 0 0 6px 20px; font-size: 13px; color: var(--reg-teal); }
.pay-line.is-sub::before { content: ""; position: absolute; left: 6px; top: -3px; width: 8px; height: 12px; border-left: 1px solid #9fcfcf; border-bottom: 1px solid #9fcfcf; border-radius: 0 0 0 2px; }
.pay-line.is-sub b { color: var(--reg-teal); }
.pay-line.is-total { margin-top: 6px; padding-top: 11px; border-top: 1px solid #e2e2e2; font-weight: 600; color: var(--reg-text); }
.pay-line.is-total b { font-size: 17px; font-weight: 700; color: var(--reg-indigo); }
/* 현금영수증 발급 정보(국내 가상계좌) — 결제 금액 아래 점선으로 띄운 한 줄 (2026-10-12) */
.pay-line.is-receipt { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e2e2; }
.pay-line.is-receipt b { color: var(--reg-indigo-deep); }
@media (max-width: 767.98px) {
  .pay-strip { flex-wrap: wrap; gap: 10px 16px; }
  .pay-strip-meta { width: 100%; margin-left: 0; padding-top: 9px; text-align: left; border-top: 1px dashed #d8d4e8; }
  .pay-lines { max-width: none; }
}

/* ── 등록 방법 선택 카드 (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-05 안내 문장 안의 「학회 홈페이지」 · 「TCTAP website」 링크(2026-10-23 재단 최종 수정요청) — 청록 밑줄. */
.center-block p a, .deposit-list a:not(.mail-link) { color: var(--reg-teal); text-decoration: underline; text-underline-offset: 2px; }

/* ── 내국인 / 외국인 선택 (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 .ko { display: block; font-size: 12.5px; font-weight: 500; color: var(--reg-text-2); }   /* 영문이 위에 크게(b) · 국문이 아래 작게 (2026-10-22 재단 요청) */
.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-size: 13.5px; font-weight: 600; color: #b3372f; }   /* 도움말(12.5px)보다 한눈에 크고 굵다 — 2026-10-04 효과 A안 */
.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); }

/* 오류 줄 아이콘 — 배지화 + 팝 (2026-10-04 사용자 결정 · 검증 문구 아이콘 활용 4안 중 A안 ·
   doc/분석/20261004_검증아이콘활용_목업4안.html). 오류 줄(.field-msg.is-err)의 (!) 를 14px → 20px 로 키우고, 나타날 때
   0 → 130% → 100% 로 톡 튀어나온 뒤 파동 링이 한 번 퍼진다(0.4초 + 0.8초). 문구 · 칸은 그대로다.
   오류 줄은 hidden 을 풀거나 새로 만들 때 나타나므로(display 가 none → block) 애니메이션이 그때마다 다시 재생된다.
   링(::after)은 평소 투명이다 — 동작 줄이기에서 애니메이션이 꺼져도 링이 정지 상태로 남지 않게 opacity 0 이 기본값. */
.field-msg.is-err { padding-left: 28px; min-height: 20px; }
.field-msg.is-err::before {
  top: calc((1.55em - 20px) / 2);
  width: 20px;
  height: 20px;
  animation: field-err-pop .4s cubic-bezier(.2, 1.5, .4, 1) both;
}
.field-msg.is-err::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1.55em - 20px) / 2);
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: field-err-ripple .8s .1s ease-out both;
}
@keyframes field-err-pop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes field-err-ripple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.5); opacity: 0; } }
/* 오류 줄 강조 — 줄이 물든다 (2026-10-04 사용자 결정 · 입력 검증 인식성 효과 4안 중 A안 ·
   doc/분석/20261004_입력검증인식성_목업4안.html). 보이는 오류 줄(.field-msg.is-err)이 든 줄(.form-row · .check-row) 전체가
   옅은 붉은 바탕 + 왼쪽 3px 막대로 바뀌고, 나타날 때 한 번 진하게 번쩍였다가 1.4초에 걸쳐 가라앉는다. 라벨도 붉어진다.
   CSS :has() 한 곳이라 오류 줄이 어디서 오든(Site.js ④ · 서버가 처음 그림 · 이메일 · 번호 인증 결과 줄 · MyPage) 같은 모양이다.
   줄이 물드는 것이라 칸 종류와 무관하다 — 숨은 라디오(세그먼트) · 체크 묶음에도 칸 표시가 생긴다.
   글 칸 · 세그먼트 · 체크 묶음은 붉은 테두리를 1px 더해 2px 처럼 보이게 한다(box-shadow 라 자리는 그대로).
   숨겨 둔 오류 줄(hidden)은 세지 않는다 — 이메일 결과 줄처럼 판정마다 미리 그려 두고 하나만 보이는 줄이 있다. */
@keyframes row-err-wash { 0% { background: #f6c9c3; } 100% { background: #fdf1ef; } }
.form-row:has(.field-msg.is-err:not([hidden])),
.check-row:has(.field-msg.is-err:not([hidden])) {
  background: #fdf1ef;
  box-shadow: inset 3px 0 0 #c0392b;
  animation: row-err-wash 1.4s ease-out both;
}
.form-row:has(.field-msg.is-err:not([hidden])) > .form-label { color: #b3372f; }
.form-row:has(.field-msg.is-err:not([hidden])) :is(.input.is-err, .select.is-err, .segment, .check-list),
.check-row:has(.field-msg.is-err:not([hidden])) :is(.input.is-err, .select.is-err, .segment, .check-list) {
  border-color: #c0392b;
  box-shadow: 0 0 0 1px #c0392b;
}
/* 고치는 순간 — 오류가 거둬지며 그 칸이 청록으로 0.9초 한 번 반짝인다. 「고쳐졌다」는 확인 (Site.js ④ flashFixed) */
@keyframes field-fixed-flash {
  0% { box-shadow: 0 0 0 4px rgba(0, 128, 133, .34); border-color: #008085; }
  100% { box-shadow: 0 0 0 0 rgba(0, 128, 133, 0); }
}
.just-fixed { animation: field-fixed-flash .9s ease-out both; }
/* 동작 줄이기 설정이면 움직임을 끈다 — 20px 배지 · 옅은 붉은 줄이 그 자리에 정지 상태로 보이는 것만으로 효과가 유지된다 */
@media (prefers-reduced-motion: reduce) {
  .field-msg.is-err::before, .field-msg.is-err::after,
  .form-row, .check-row, .just-fixed { animation: none !important; }
}

/* 입력 검사 — 보내기 전에 검사한다 (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-10 MyPage · 2026-10-15 사용자 결정 — 목업 C안 doc/분석/20261015_저장안내토스트_목업4안.html) ──
   버튼 옆에 「✓ 저장했습니다 14:32:05」가 톡 튀어나오고(is-pop), 2.5초 뒤 바탕이 빠지며 옅은 「마지막 저장 14:32:05」로 남는다(is-rest · MyPage.js).
   좁은 화면에서는 버튼 아래 줄로 내려간다. 오류는 종전 붉은 상자(.note-warn)다. */
.save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.save-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #0b6e6c;
  background: #e3f4f2;
  transition: background-color .6s, color .6s, padding .6s;
}
.save-stamp::before {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  -webkit-mask: var(--reg-ok-icon) center / contain no-repeat;
  mask: var(--reg-ok-icon) center / contain no-repeat;
}
.save-stamp time { font-weight: 500; font-variant-numeric: tabular-nums; }
.save-stamp-last { display: none; }
.save-stamp.is-rest { padding-left: 0; padding-right: 0; font-weight: 400; color: var(--reg-text-3); background: transparent; }
.save-stamp.is-rest .save-stamp-ok { display: none; }
.save-stamp.is-rest .save-stamp-last { display: inline; }
.save-stamp.is-pop { transform-origin: left center; animation: save-stamp-pop .45s cubic-bezier(.2, .8, .3, 1.4); }
@keyframes save-stamp-pop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .save-stamp { transition: none; }
  .save-stamp.is-pop { animation: none; }
}

/* ── MyPage 버튼 가운데 정렬 (2026-10-20 재단 추가 수정요청 8 · 9장 — 「MyPage 내 모든 버튼을 각 영역의 가로 중앙에」 · 국 · 영문 같음) ──
   버튼 줄에 .my-btn-row 를 붙인다. MyPage(data-my-page) 안에서만 가운데다 — 입금 안내 상자(DepositGuide.ascx)는 결과 화면(S-05)과 함께 쓴다.
   「저장하기」 줄은 세 칸이다 — 버튼은 가운데 칸, 저장 말풍선은 오른쪽 칸이라 말풍선이 나타나도 버튼이 움직이지 않는다. 좁은 화면은 말풍선이 버튼 아래 가운데로 내려간다. */
[data-my-page] .my-btn-row { text-align: center; }
[data-my-page] .save-row.my-btn-row { display: grid; grid-template-columns: 1fr auto 1fr; justify-items: start; }
[data-my-page] .save-row.my-btn-row::before { content: ""; grid-column: 1; }
[data-my-page] .save-row.my-btn-row > .btn { grid-column: 2; }
[data-my-page] .save-row.my-btn-row > span { grid-column: 3; }
@media (max-width: 560px) {
  [data-my-page] .save-row.my-btn-row { display: flex; flex-direction: column; align-items: center; }
  [data-my-page] .save-row.my-btn-row::before { content: none; }
}

/* ── 휴대전화 문자 인증 (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; } }

/* ── 결제창 팝업 대기 상자 (2026-10-02) — 결제 화면을 팝업으로 연 동안 화면을 덮는다 · 마크업은 학회 마스터, 동작은 PayWindow.js ── */
.pay-wait { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(52, 35, 110, .55); }
.pay-wait[hidden] { display: none; }
.pay-wait-box { width: 100%; max-width: 480px; background: #fff; border-radius: 8px; box-shadow: 0 14px 44px rgba(0, 0, 0, .28); }
html.is-pay-wait { overflow: hidden; }

/* ── 여백 유틸리티 — 시안의 인라인 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 12px; }
  .form-label { padding-top: 0; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
  .test-bar-buttons { flex-direction: column; }
  .test-bar-buttons .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; }
  /* S-01 해외 요금표 — 모든 금액을 「USD」 / 「금액」 두 줄로, 열 가운데에 (2026-10-22 재단 수정요청 · Default.aspx FeeCell) */
  .fee-rates.is-usd th.num, .fee-rates.is-usd td.num { text-align: center; }
  .fee-rates.is-usd td.num .cur, .fee-rates.is-usd td.num .amt { display: block; line-height: 1.35; }
  .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; }
}

/* ── MyPage 로그인 유지 레일 — 헤더 오른쪽 두 줄 (2026-10-15 사용자 결정 · 목업 A안 — 관리자 헤더 .adm-head-rail 과 같은 짜임).
   위 줄 현재 시각 · 버전, 아래 줄 원형 게이지 · 남은 시간 ▾ · 이름. 남은 시간을 누르면 「로그인 유지」 창(<details>).
   끝나기 10분 전(.is-ending)이면 게이지 · 시간이 골드로 바뀌고 「1시간 연장」이 켜진다(MyPage.js). ── */
.login-rail { position: relative; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.login-rail .build-stamp { margin-left: 0; }
.login-rail-row { display: flex; align-items: center; gap: 10px; }
.login-who { font-size: 13px; color: var(--reg-text-2); white-space: nowrap; }
.login-sess-wrap { position: static; }
.login-sess { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 5px; border-radius: 3px; list-style: none; cursor: pointer; color: var(--reg-indigo-deep); user-select: none; }
.login-sess::-webkit-details-marker { display: none; }
.login-sess:hover, .login-sess-wrap[open] > .login-sess { background: #eef6f6; }
.login-sess:focus-visible { outline: 2px solid var(--reg-teal); outline-offset: 1px; }
.login-ring { width: 20px; height: 20px; flex: none; }
.login-ring circle { fill: none; stroke-width: 2.4; }
.login-ring-track { stroke: var(--reg-line); }
.login-ring-arc { stroke: var(--reg-teal); stroke-linecap: round; transition: stroke-dasharray .4s linear; }
.login-time { min-width: 3.1em; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.login-caret { width: 6px; height: 6px; margin-left: 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.login-rail.is-ending .login-ring-arc { stroke: #d39b12; }
.login-rail.is-ending .login-time { color: #8a6d22; }
.login-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 300px; padding: 15px 17px; border: 1px solid var(--reg-line); border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); font-size: 13px; text-align: left; }
.login-pop h5 { margin: 0 0 8px; font-size: 14px; color: var(--reg-indigo-deep); }
.login-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0 0 12px; }
.login-pop dt { color: var(--reg-text-3); }
.login-pop dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.login-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.login-acts .btn-state { min-width: 0; }
.login-hint { margin: 8px 0 0; color: var(--reg-text-3); font-size: 12px; }
.login-msg { margin: 8px 0 0; color: var(--reg-teal); font-size: 12px; }
.login-msg.is-err { color: #b3372f; }
@media (max-width: 767.98px) {
  .login-rail .build-stamp-sep, .login-rail .build-stamp-ver { display: none; }
  .login-who { display: none; }
  .login-pop { width: min(300px, calc(100vw - 32px)); }
}