.cancel-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  padding: 48px 0;
  background: var(--bg-soft);
}

.cancel-container {
  display: flex;
  justify-content: center;
}

.cancel-card {
  width: 100%;
  max-width: 460px;
  padding: 40px 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  text-align: center;
}

.cancel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(20, 59, 92, 0.08);
  color: var(--navy);
}

.cancel-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cancel-card h1 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  color: var(--navy);
}

.cancel-desc {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

#cancelRequestForm {
  text-align: left;
}

.cancel-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
}

.cancel-field input,
.cancel-field textarea {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--text);
  background: #fbfdff;
  resize: vertical;
}

.cancel-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -8px 0 18px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
}

/* 2026-09-26: 개인정보 수집·이용 고지 + 동의 체크박스 (consult-apply.css의
   .privacy-box와 같은 역할이지만, 그쪽은 .pamphlet-page 전용 CSS 변수
   (--form-*)를 쓰기 때문에 .cancel-page에서는 값이 비어 보인다.
   그래서 이 페이지가 이미 쓰는 사이트 공통 변수로 따로 만들었다. */
.cancel-privacy-box {
  padding: 0 16px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
}

/* 2026-09-26: <details>로 접어둔다 (consult-apply.css의 .privacy-box와 같은 방식) */
.cancel-privacy-box summary {
  padding: 12px 0;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

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

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

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

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

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

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

.cancel-privacy-box p:last-child {
  margin-bottom: 0;
}

.cancel-privacy-box b {
  color: var(--navy);
}

.cancel-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
}

#cancelRequestForm .primary-btn {
  width: 100%;
  margin-top: 4px;
}

.cancel-message {
  margin: 16px 0 0;
  min-height: 1.2em;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
}

@media (max-width: 560px) {
  .cancel-card {
    padding: 32px 22px;
    border-radius: 18px;
  }

  /* 2026-09-26 — 상담 신청서와 같은 이유로, 휴대폰에서는 체크박스
     ("날짜가 기억나지 않아요" · 개인정보 동의)를 더 크게 키운다.
     컴퓨터는 마우스로 누르기 쉬우니 그대로 둔다. */
  .cancel-checkbox {
    gap: 10px;
    font-size: 0.96rem;
  }

  .cancel-checkbox input {
    width: 22px;
    height: 22px;
  }
}

/* 덜 채운 칸 아래에 뜨는 빨간 안내 (2026-09-22)
   상담 신청서(consult-apply.css)와 같은 모양으로 맞췄다. */
.field-error {
  margin: 6px 0 0;
  color: #d64545;
  font-size: 0.82rem;
  font-weight: 700;
}