.pamphlet-page {
  --form-accent: #12a4ac;
  --form-accent-deep: #0d8790;
  --form-ink: #222a30;
  --form-muted: #74818b;
  --form-border: #e1e6e8;
  --form-soft: #f3f6f7;
  --form-tint: #eef7f8;

  background: #f4f6f7;
  min-height: calc(100vh - var(--header-h));
  padding: 48px 0 64px;
}

/* =============================================================================
   컴퓨터 화면 글씨 확대 (2026-09-25)

   "예약일정 선택"·달력·"예약자 정보"·개인정보취급방침 안내 글씨가 컴퓨터로
   보면 다 작아서 읽기 힘들다는 지적. main-site.html이 2026-09-24에 같은
   이유로 받았던 처리(home.css)를 이 화면에도 그대로 적용한다 - 기본 글씨를
   키우면 이 화면 전체가 rem 단위라 비례해서 같이 커진다.
   머리글의 "천안 중앙 보청기" 글자만 좁은 자리에 맞춰둔 값이라 따로 고정한다.
   ============================================================================= */
@media (min-width: 981px) {
  html {
    font-size: 143.75%;
  }

  body {
    font-weight: 500;
  }

  .brand-kor {
    font-size: 39.9px;
  }
}

/* 바깥 .container 가 넓어졌으니 여기서 다시 좁히지 않는다 (2026-09-22) */
.pamphlet-container {
  max-width: none;
  display: grid;
  gap: 18px;
}

.pamphlet-intro h1 {
  margin: 12px 0 0;
  color: var(--form-ink);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.pamphlet-intro p {
  margin: 0 0 26px;
  max-width: 620px;
  color: var(--form-muted);
  line-height: 1.7;
}

.pamphlet-form-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: 20px;
  padding: 44px 44px 36px;
  box-shadow: 0 20px 44px rgba(20, 40, 50, 0.07);
}

.pamphlet-form-card h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--form-ink);
}

.required-mark {
  margin-left: 4px;
  color: var(--form-accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.pamphlet-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--form-border);
  margin-bottom: 36px;
}

.pamphlet-col-desc {
  margin: 0 0 24px;
  color: var(--form-muted);
  font-size: 0.86rem;
}

.pamphlet-schedule h2 {
  margin-bottom: 6px;
}

.schedule-panel {
  display: grid;
  grid-template-columns: minmax(340px, 1.15fr) 1fr;
  gap: 32px;
  padding: 28px;
  margin-bottom: 24px;
  background: linear-gradient(180deg, var(--form-tint) 0%, #f6fafa 100%);
  border: 1px solid var(--form-border);
  border-radius: 16px;
}

#pamphletForm label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--form-ink);
}

.pamphlet-full {
  margin-bottom: 14px;
}

.slot-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--form-ink);
}

.slot-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.slot-group-label {
  margin: 0 0 10px;
  color: var(--form-accent-deep);
  font-size: 0.84rem;
  font-weight: 700;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.slot-hint {
  margin: 0 0 4px;
  color: var(--form-muted);
  font-weight: 500;
  font-size: 0.86rem;
}

.slot-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--form-border);
  color: var(--form-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.slot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--form-border);
  background: #fff;
  color: var(--form-ink);
  border-radius: 8px;
  padding: 0.75rem 0.5rem;
  font-weight: 600;
  font-size: 0.86rem;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.slot-btn.is-disabled,
.slot-btn:disabled {
  background: var(--form-soft);
  border-color: var(--form-border);
  color: #b7bfc4;
  cursor: not-allowed;
}

.slot-btn.is-disabled:hover,
.slot-btn:disabled:hover {
  background: var(--form-soft);
  border-color: var(--form-border);
}

.slot-btn:hover {
  border-color: var(--form-accent);
  background: #eafbfb;
}

.slot-btn.is-selected {
  background: var(--form-accent);
  border-color: var(--form-accent);
  color: #fff;
}

#pamphletForm input,
#pamphletForm textarea,
#pamphletForm select {
  border: 1px solid var(--form-border);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  font: inherit;
  color: var(--form-ink);
  background: #fff;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 2026-09-26 — 빈 칸에 미리 적힌 안내 글자("성함", "010-0000-0000")가
   너무 연해서(흰 바탕에 2.22:1 — 기준 4.5에 크게 못 미침) 안 보인다는
   지적으로 진하게 했다. 이미 이 폼에서 "옅은 설명글"로 쓰던 --form-muted를
   재사용해서 다른 안내 문구와 톤을 맞췄다(직접 입력한 글자보다는 여전히
   옅어서 "안내"와 "내가 쓴 값"이 구분된다). */
#pamphletForm input::placeholder,
#pamphletForm textarea::placeholder {
  color: var(--form-muted);
}

#pamphletForm input:focus,
#pamphletForm textarea:focus,
#pamphletForm select:focus {
  outline: none;
  border-color: var(--form-accent);
  box-shadow: 0 0 0 3px rgba(18, 164, 172, 0.14);
}

/* 예약 대상 - 커스텀 드롭다운 (네이티브 select 화살표/옵션 목록 스타일이 어색해서 직접 구현) */

.custom-select {
  position: relative;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  font: inherit;
  color: var(--form-ink);
  background: #fff;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.custom-select-trigger:hover {
  border-color: var(--form-accent);
}

.custom-select.is-open .custom-select-trigger {
  border-color: var(--form-accent);
  box-shadow: 0 0 0 3px rgba(18, 164, 172, 0.14);
}

/* 2026-09-26 — "상담선택"·"선택해주세요" 안내 글자도 위와 같은 이유로 진하게 */
.custom-select-value.is-placeholder {
  color: var(--form-muted);
}

.custom-select-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--form-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease, stroke 0.15s ease;
}

.custom-select.is-open .custom-select-chevron {
  transform: rotate(180deg);
  stroke: var(--form-accent);
}

.custom-select-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(20, 40, 50, 0.12);
}

.custom-select-panel[hidden] {
  display: none;
}

.custom-select-option {
  display: block;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  background: transparent;
  color: var(--form-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.custom-select-option:hover {
  background: var(--form-tint);
}

.custom-select-option.is-selected {
  background: var(--form-accent);
  color: #fff;
  font-weight: 700;
}

#pamphletForm .primary-btn {
  width: 100%;
  margin-top: 8px;
  background: #d5d8db;
  color: #9aa2a9;
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#pamphletForm .primary-btn:hover {
  box-shadow: none;
  transform: none;
}

#pamphletForm .primary-btn.is-ready {
  background: var(--form-accent);
  color: #fff;
}

#pamphletForm .primary-btn.is-ready:hover {
  background: var(--form-accent-deep);
}

.field-error {
  margin: 6px 0 0;
  color: #d64545;
  font-size: 0.8rem;
  font-weight: 600;
}

.pamphlet-message {
  margin: 14px 0 0;
  min-height: 1.2em;
  color: var(--form-accent-deep);
  font-weight: 700;
}

.pamphlet-cancel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  margin-top: 20px;
  border: 1.5px dashed var(--form-border);
  border-radius: 8px;
  color: var(--form-muted);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pamphlet-cancel-link:hover {
  border-style: solid;
  border-color: var(--form-accent);
  color: var(--form-accent-deep);
  background: #eafbfb;
}

/* 2026-09-26: <details>로 접어둔다 — 내용이 길어서 계속 화면을 차지하고
   있었다(원장님 지적: "집중도를 낮춘다"). admin.html의 "문의 내용 고치기"와
   같은 +/− 표시 방식을 그대로 따랐다. */
.privacy-box {
  padding: 0 20px;
  border: 1px solid var(--form-border);
  border-radius: 10px;
  background: var(--form-soft);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--form-muted);
}

.privacy-box summary {
  padding: 14px 0;
  color: var(--form-ink);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.privacy-box summary::-webkit-details-marker {
  display: none;
}

.privacy-box summary::before {
  content: "＋ ";
  color: var(--form-muted);
}

.privacy-box[open] summary::before {
  content: "－ ";
}

.privacy-box[open] summary {
  border-bottom: 1px solid var(--form-border);
}

.privacy-box h4 {
  margin: 16px 0 6px;
  font-size: 0.85rem;
  color: var(--form-ink);
}

.privacy-box summary + h4 {
  margin-top: 14px;
}

.privacy-box[open] {
  padding-bottom: 16px;
}

.privacy-box p {
  margin: 0 0 6px;
}

.privacy-box ul {
  margin: 0 0 6px;
  padding-left: 18px;
}

.privacy-box li {
  margin-bottom: 4px;
}

.privacy-checks {
  margin-top: 16px;
}

#pamphletForm .privacy-check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--form-ink);
  cursor: pointer;
}

#pamphletForm .privacy-check > span::before {
  content: none;
}

#pamphletForm .privacy-check input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  padding: 0;
  border: 1.5px solid var(--form-muted);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#pamphletForm .privacy-check input:checked {
  border-color: var(--form-accent);
  background: var(--form-accent);
}

#pamphletForm .privacy-check input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

#proxyAgreeField[hidden] {
  display: none;
}

/* 예약일정 선택 - 날짜 캘린더를 드롭다운이 아니라 항상 펼쳐진 상태로 보여준다 */

.pamphlet-schedule .date-picker {
  position: static;
}

.pamphlet-schedule .date-picker-trigger {
  display: none;
}

.pamphlet-schedule .date-picker-panel {
  display: block;
  position: static;
  width: 100%;
  padding: 22px 24px;
  border: 1px solid var(--form-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(20, 40, 50, 0.05);
}

.pamphlet-schedule .dp-head {
  margin-bottom: 16px;
  padding-bottom: 16px;
}

.pamphlet-schedule .dp-head span {
  color: var(--form-ink);
  font-size: 1.05rem;
}

.pamphlet-schedule .dp-nav {
  width: 34px;
  height: 34px;
  color: var(--form-accent-deep);
}

.pamphlet-schedule .dp-nav:hover {
  background: var(--form-tint);
}

.pamphlet-schedule .dp-weekdays span {
  font-size: 0.78rem;
}

.pamphlet-schedule .dp-days {
  gap: 4px;
}

.pamphlet-schedule .dp-day {
  font-size: 0.94rem;
}

.pamphlet-schedule .dp-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--form-accent);
}

.pamphlet-schedule .dp-day.is-selected,
.pamphlet-schedule .dp-day.is-selected:hover {
  background: var(--form-accent);
}

@media (max-width: 860px) {
  .pamphlet-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .schedule-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .pamphlet-form-card {
    padding: 22px;
  }

  /* 휴대폰에서 달력 양옆으로 남는 카드 여백을 그대로 써서 더 넓게 보이도록
     한다(2026-09-25, 여러 번 지적) — 카드 패딩 밖으로 번지게(음수 margin)
     해서 카드 테두리까지 꽉 채우고, 달력 자체의 안쪽 여백도 최소로 줄여
     숫자 칸에 더 내준다.
     ⚠️ 이 파일이 date-picker.css보다 나중에 불려서(consult-apply.html의
     <link> 순서) 같은 선택자를 date-picker.css에 적어도 항상 여기 있는
     값이 이긴다 - 이 달력의 폭·여백은 반드시 이 파일에서 고칠 것. */
  .pamphlet-schedule .date-picker-panel {
    margin: 0 -22px;
    width: auto;
    padding: 14px 8px;
  }

  /* 2026-09-26 — 희망 시간 버튼("09:00" 등)도 같은 이유로 휴대폰에서
     손가락으로 누르기 편하게 키운다. */
  .slot-grid {
    gap: 12px;
  }

  .slot-btn {
    min-height: 52px;
    padding: 0.85rem 0.5rem;
    font-size: 0.98rem;
  }

  /* 2026-09-26 — 상담 분야·예약 대상 드롭다운을 휴대폰에서 손가락으로
     누르기 편하게 크게 키운다. 어르신들은 화면을 정확히 짚기 어려운
     경우가 많아서, 버튼 하나하나를 더 크고 여유 있게 만들었다.
     컴퓨터는 마우스로 누르기 때문에 그대로 두었다(마우스 포인터는
     작은 버튼도 정확히 짚기 쉬워서, 여기까지 키우면 오히려 화면만
     길어지고 필요는 없다). */
  .custom-select-trigger {
    min-height: 56px;
    padding: 0.95rem 1.05rem;
    font-size: 1.08rem;
  }

  .custom-select-chevron {
    width: 22px;
    height: 22px;
  }

  .custom-select-panel {
    padding: 8px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
  }

  .custom-select-option {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0.9rem 1rem;
    font-size: 1.06rem;
  }

  .custom-select-option + .custom-select-option {
    margin-top: 4px;
  }

  /* 개인정보 동의 체크박스도 같은 이유로 살짝 키운다.
     체크됐을 때 가운데 찍히는 흰 점(::after)도 원 크기에 맞춰 같이 키운다
     — 안 키우면 큰 원 안에 점만 작게 남아 어색해 보인다. */
  #pamphletForm .privacy-check input {
    width: 24px;
    height: 24px;
  }

  #pamphletForm .privacy-check input:checked::after {
    width: 8px;
    height: 8px;
  }

  #pamphletForm .privacy-check {
    font-size: 1.02rem;
  }
}

/* 지원금 확인 설문을 마치고 넘어온 경우, 그 답변이 신청과 함께 전달된다는 안내 상자 */
.subsidy-notice {
  margin: 0 0 24px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 0 14px 14px 0;
  background: var(--bg-soft);
}

.subsidy-notice strong {
  display: block;
  margin-bottom: 12px;
  color: var(--navy-deep);
  font-size: 1.02rem;
}

.subsidy-notice ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.subsidy-notice li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subsidy-notice li span {
  color: var(--muted);
  font-size: 0.86rem;
}

.subsidy-notice li b {
  color: var(--navy-deep);
  font-size: 0.98rem;
}

/* ── 신청 결과를 알리는 별도 화면 ─────────────────────────────────────────
   버튼 아래 작은 글씨로만 알리면 스크롤 위치에 따라 못 보고 지나치신다.
   화면 전체를 덮어서 "됐다 / 안 됐다"를 분명하게 보여준다. */
.apply-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}

.apply-overlay-card {
  width: 100%;
  max-width: 420px;
  padding: 36px 28px 28px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  text-align: center;
  animation: applyPop 0.18s ease-out;
}

@keyframes applyPop {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.apply-overlay-card h2 {
  margin: 0 0 8px;
  color: var(--navy-deep);
  font-size: 1.35rem;
}

.apply-overlay-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

/* 보내는 중 표시 */
.apply-spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 20px;
  border: 4px solid var(--line);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: applySpin 0.8s linear infinite;
}

@keyframes applySpin {
  to { transform: rotate(360deg); }
}

/* 성공·실패 표시 */
.apply-mark {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 62px;
}

.apply-mark-ok { background: #16a34a; }
.apply-mark-fail { background: #b3261e; }

/* 접수 내용 요약 */
.apply-summary {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--bg-soft);
  list-style: none;
  text-align: left;
}

.apply-summary li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.97rem;
}

.apply-summary li span { color: var(--muted); }
.apply-summary li b { color: var(--navy-deep); }

.apply-overlay-card .apply-note {
  margin: 16px 0 0;
  font-size: 0.89rem;
}

.apply-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.apply-btn-primary,
.apply-btn-ghost {
  flex: 1;
  padding: 15px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.apply-btn-primary {
  background: var(--navy-deep);
  color: #fff;
}

.apply-btn-primary:hover,
.apply-btn-primary:focus-visible {
  background: var(--blue);
}

.apply-btn-ghost {
  border-color: var(--line);
  background: #fff;
  color: var(--navy-deep);
}

.apply-btn-ghost:hover,
.apply-btn-ghost:focus-visible {
  background: var(--bg-soft);
}

@media (max-width: 420px) {
  .apply-actions { flex-direction: column; }
}

/* 오늘 날짜를 고르셨을 때 — 당일은 예약을 받지 않고 전화 확인 후 방문을 안내한다 */
.same-day-notice {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
  text-align: center;
}

.same-day-notice strong {
  display: block;
  margin-bottom: 10px;
  color: var(--navy-deep);
  font-size: 1.08rem;
}

.same-day-notice p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.7;
}

.same-day-notice p b {
  color: var(--navy-deep);
}

.same-day-call {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--navy-deep);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}

.same-day-call:hover,
.same-day-call:focus-visible {
  background: var(--blue);
}

.same-day-notice .same-day-sub {
  margin: 14px 0 0;
  font-size: 0.88rem;
}

/* 첫 화면 "맞춤형 보청기 추천"으로 넘어오셨을 때 보여주는 설명 한 줄 */
.subsidy-notice p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* =============================================================================
   휴대폰에서 좌우로 밀리던 것 수정 (2026-09-22)

   무엇이 문제였나
   --------------
   이 화면은 격자(grid)로 짜여 있는데, 격자 칸은 기본값이 "안쪽 내용이
   요구하는 최소 폭보다는 작아지지 않는다"(min-width: auto) 이다.
   글자를 21px 로 키우자 안쪽 내용의 최소 폭이 화면보다 커졌고,
   그러자 칸이 351px 에서 434px 로 부풀어 사이트가 좌우로 흔들렸다.

   min-width: 0 을 주면 "필요하면 더 줄어들어도 된다"는 뜻이 되어,
   내용이 줄바꿈되거나 자기 칸 안에서 스크롤된다.
   ============================================================================= */
.pamphlet-container,
.pamphlet-container > *,
.pamphlet-columns > *,
.schedule-panel > *,
.field-grid > * {
  min-width: 0;
}

/* 표나 시간표처럼 줄바꿈이 안 되는 것은 자기 칸 안에서만 좌우로 움직이게 한다 */
.schedule-panel {
  overflow-x: auto;
}