/* 전문 열람 게이트 — 모달 전용.
   서식은 사이트 폼 표준(src/JAIN/css/form.css)과 같은 페이지의 버튼(.bil_btn)을 따른다:
   radius 6 · 라벨 16px/500/#212121 · 입력 border #e3e3e3, placeholder #a0a0a0 ·
   오류 #b3261e · 버튼 weight 500 + transition .3s ease (2026-08-03 서식 통일). */

.ebook_gate_dimmed {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);   /* 같은 페이지 미리보기 모달과 동일 */
  z-index: 999;
}
.ebook_gate_modal {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 36px 28px 28px;
  background-color: var(--surface-card);
  border-radius: var(--radius-md);                       /* 미리보기 모달과 동일 */
  transform: translate3d(-50%, -50%, 0);
  z-index: 1000;
}
.ebook_gate.open .ebook_gate_dimmed,
.ebook_gate.open .ebook_gate_modal {
  display: block;
}
.ebook_gate_close {
  position: absolute;
  right: 16px;
  top: 12px;
  border: 0;
  background: none;
  color: var(--text-secondary);                           /* 미리보기 모달 컨트롤 톤 */
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.ebook_gate_title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 140%;
  color: var(--text-strong);
}
.ebook_gate_desc {
  margin-bottom: 24px;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  color: var(--text-muted);
}
.ebook_gate_details[hidden] {
  display: none;
}
.ebook_gate_details_intro {
  margin: 4px 0 18px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background-color: var(--accent-weak);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

.ebook_gate_field {
  display: block;
  margin-bottom: 14px;                      /* form.css 필드 gap */
}
/* [hidden] 을 display 규칙보다 세게 — 위 display:block 이 UA 의 [hidden]{display:none} 을
   이겨서, '기타' 선택 전에도 직책(직접 입력) 칸이 보였다 (2026-08-11 라이브 실측).
   stage 전환의 [hidden] 규칙과 같은 이유다. */
.ebook_gate_field[hidden] {
  display: none;
}
.ebook_gate_field span {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;                          /* 사이트 폼 라벨 규격 */
  font-weight: 500;
  line-height: 160%;
  color: var(--text-strong);
}
.ebook_gate_field input {
  width: 100%;
  padding: 12px 14px;                       /* form.css 입력 규격 */
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  font-family: 'Pretendard';
  font-size: 16px; /* iOS 확대 방지 — 16px 미만이면 포커스 시 화면이 줌된다 */
  font-weight: 400;
  line-height: 160%;
  color: var(--text-strong);
}
.ebook_gate_field input::placeholder {
  font-weight: 400;
  color: var(--text-faint);                           /* form.css placeholder */
}
.ebook_gate_field input:focus {
  border-color: var(--border-focus);
  outline: none;
}
.ebook_gate_field input.error {
  border-color: var(--danger);
}

/* ── 직책 드롭다운 — 입력칸과 같은 서식(border #e3e3e3 · radius 6 · 16px) ──── */
.ebook_gate_dd {
  position: relative;
}
.ebook_gate_dd select {
  display: none;
}
.ebook_gate_dd_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  font-family: 'Pretendard';
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  color: var(--text-faint);                           /* placeholder 톤 — 선택 전 */
  text-align: left;
  cursor: pointer;
}
.ebook_gate_dd_btn.selected {
  color: var(--text-strong);
}
.ebook_gate_dd_btn:focus {
  border-color: var(--border-focus);
  outline: none;
}
.ebook_gate_dd_btn.error {
  border-color: var(--danger);
}
.ebook_gate_dd_btn svg {
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform 0.15s;
}
.ebook_gate_dd.open .ebook_gate_dd_btn svg {
  transform: rotate(180deg);
}
.ebook_gate_dd_list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 10;
  margin: 0;
  padding: 4px;
  list-style: none;
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  max-height: 240px;
  overflow-y: auto;
}
.ebook_gate_dd_list[hidden] {
  display: none;
}
.ebook_gate_dd_list li {
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 16px;
  color: var(--text-strong);
  cursor: pointer;
}
.ebook_gate_dd_list li:hover {
  background-color: var(--surface-sunken);
}
.ebook_gate_dd_list li[aria-selected="true"] {
  color: var(--accent);
  font-weight: 700;
  background-color: var(--accent-weak);
}

/* ── 동의 영역 — 레터 구독 모달과 같은 구조, 게이트 서식으로 ─────────────── */
.ebook_gate_check_row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 4px 0 12px;
}
.ebook_gate_check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
}
.ebook_gate_check input {
  margin-top: 2px;
}
.ebook_gate_consent_toggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Pretendard';
  font-size: 13px;
  color: var(--text-faint);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}
.ebook_gate_consent {
  max-height: 220px;
  margin-bottom: 12px;
  padding: 12px 16px;
  overflow-y: auto;
  background-color: var(--surface-sunken);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.ebook_gate_consent[hidden] {
  display: none;
}
.ebook_gate_consent p {
  margin: 0;
}
.ebook_gate_consent ul {
  margin: 8px 0 0;
  padding-left: 16px;
}
.ebook_gate_consent li {
  margin-bottom: 8px;
}

.ebook_gate_error,
.ebook_gate_status_error {
  min-height: 20px;
  margin-bottom: 8px;
  font-size: 14px;                          /* form.css 오류 규격 */
  font-weight: 400;
  color: var(--danger);
}

/* 주 액션 — CTA 규칙(코발트 채움, src/JAIN/CLAUDE.md)·버튼 규격(weight 500, radius 6, transition) */
.ebook_gate_submit,
.ebook_gate_status_submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  margin-top: 8px;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--accent);
  font-family: 'Pretendard';
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  color: var(--on-accent);
  transition: 0.3s ease;
  cursor: pointer;
}
.ebook_gate_submit:hover,
.ebook_gate_status_submit:hover {
  background-color: var(--accent-pressed);
}
.ebook_gate_submit:disabled,
.ebook_gate_status_submit:disabled {
  background-color: #a0a0a0;
  cursor: default;
}
.ebook_gate_status_submit[hidden] {
  display: none;
}

/* ── 성공 화면 ──────────────────────────────────────────────────────────── */
/* [hidden] 을 display 규칙보다 세게 — 단계 전환이 스타일에 지지 않게 */
.ebook_gate_stage_form[hidden],
.ebook_gate_stage_done[hidden] {
  display: none;
}
/* 성공 화면의 리더 링크 — 제출 버튼과 같은 규격의 «진짜 링크» */
.ebook_gate_open,
.ebook_gate_open:link,
.ebook_gate_open:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: var(--radius-md);
  background-color: var(--accent);
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  color: var(--on-accent);
  text-decoration: none;
  transition: 0.3s ease;
}
.ebook_gate_open:hover,
.ebook_gate_open:focus-visible {
  background-color: var(--accent-pressed);
  color: var(--on-accent);
}

/* iOS Safari 동적 툴바 — 100vh 는 툴바 펼침 상태에서 실제 가시 높이보다 크다 (⑦-a P2).
   dvh 를 지원하는 브라우저에서만 덮는다. */
@supports (height: 100dvh) {
  .ebook_gate_modal {
    max-height: calc(100dvh - 32px);
  }
}