/* 상담 신청 (/contact) — 피그마 'v7.2 · 문의하기 (다듬기)' 298:616 + 완료 모달 298:789, 모바일 완료 모달 311:1511
   데스크톱: 피그마 1920 기준 값을 사이트 공통과 같은 90% 비율로 옮김 (본문 폭 1440 → 1296).
   모바일(≤860): 피그마 값을 그대로(1배) 쓰고, 12px 아래 글자는 두지 않는다. */

main { padding-top: var(--header-h); }

/* ---------------------------------------------------------------- 머리 띠 (298:619) */
.ct-hero { padding: 86.4px 0; background: #141311; }
.ct-eb { font-size: 12.6px; font-weight: 500; line-height: 1.55; letter-spacing: 0.04em; color: #c8a97e; }
.ct-h1 { margin-top: 18px; font-size: 50.4px; line-height: 1.35; font-weight: 300; letter-spacing: 0; color: #efede6; }
.ct-h1 b { font-weight: 700; }
.ct-sub { margin-top: 18px; font-size: 17.1px; line-height: 1.55; color: #b0aca3; }

/* ---------------------------------------------------------------- 본문 (298:623) */
.ct-body { padding: 64.8px 0 0; background: #fafaf8; color: #1f1d1a; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 34vw, 464.4px); gap: 57.6px; align-items: start; }

/* 신청서 카드 (298:624) */
.ct-form { display: grid; gap: 43.2px; padding: 50.4px; border: 1px solid #e0ded9; border-radius: 12px; background: #fafaf8; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-set { display: grid; gap: 21.6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ct-set__h { display: flex; align-items: center; gap: 10.8px; margin: 0; padding: 0; float: left; width: 100%; font-size: 18px; line-height: 1.55; font-weight: 700; color: #1f1d1a; }
.ct-set__h + * { clear: both; }
.ct-set__h .n { font-family: var(--f-num); font-size: 13.5px; font-weight: 400; line-height: 1.55; color: #99784a; }
.ct-f { display: grid; gap: 9px; margin: 0; min-width: 0; }
.ct-f[hidden] { display: none; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14.4px; }
.ct-l { display: flex; align-items: center; gap: 5.4px; font-size: 12.6px; line-height: 1.55; font-weight: 700; color: #1f1d1a; }
.ct-l em { font-style: normal; font-size: 9.9px; font-weight: 500; line-height: 1.55; color: #99784a; }

/* 입력 칸 (298:633): 흰 바탕, 선 #ddd8cd, 모서리 6 */
.ct-form input[type='text'], .ct-form input[type='tel'], .ct-form select, .ct-form textarea {
  width: 100%; height: 49.5px; padding: 0 14.4px; border: 1px solid #ddd8cd; border-radius: 6px; background: #fafaf8;
  font: inherit; font-size: 13.5px; line-height: 1.55; letter-spacing: 0; color: #1f1d1a;
  transition: border-color var(--dur-xs) var(--ease-soft), box-shadow var(--dur-xs) var(--ease-soft), background var(--dur-xs);
}
.ct-form textarea { display: block; height: 115.2px; min-height: 115.2px; padding: 13.5px 14.4px; resize: vertical; }
.ct-form select { appearance: none; }
.ct-form ::placeholder { color: #9e9e9e; opacity: 1; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: none; border-color: #99784a; box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.18); }
.ct-form .is-bad { border-color: #c0634f !important; background: #fff8f6; }

/* 진료과 · 주력 시술 드롭다운 (dropdown.js) */
.ct-form .dd { --dd-bg: #fafaf8; --dd-line: #ddd8cd; --dd-fg: #404040; --dd-strong: #1f1d1a; --dd-hover: #fafaf8; --dd-empty: #9e9e9e; --dd-mark: #99784a; }
.ct-form .dd__btn { height: 49.5px; padding: 0 14.4px; border: 1px solid #ddd8cd; border-radius: 6px; background: #fafaf8; font-size: 13.5px; line-height: 1.55; color: #1f1d1a; transition: border-color var(--dur-xs), box-shadow var(--dur-xs); }
.ct-form .dd__btn:hover { border-color: #cbc4b5; }
.ct-form .dd__chev { color: #737373; }
.ct-form .dd.is-open .dd__btn, .ct-form .dd__btn:focus-visible { border-color: #99784a; box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.18); }
.ct-form .dd__btn.is-bad { border-color: #c0634f; background: #fff8f6; }
.ct-form .dd__list { left: 0; right: 0; top: calc(100% + 6px); border-radius: 8px; box-shadow: 0 18px 40px rgba(26, 26, 26, 0.12); }
.ct-form .dd__list li { font-size: 13.5px; }

/* 지역 검색 목록 */
.ct-combo { position: relative; }
.ct-combo .combo { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: 288px; overflow: auto; margin: 0; padding: 5px; list-style: none; border: 1px solid #ddd8cd; border-radius: 8px; background: #fafaf8; box-shadow: 0 18px 40px rgba(26, 26, 26, 0.12); }
.ct-combo .combo li { padding: 9px 11px; border-radius: 5px; font-size: 13.5px; color: #404040; cursor: pointer; }
.ct-combo .combo li b { color: #99784a; font-weight: 700; }
.ct-combo .combo li[aria-selected='true'], .ct-combo .combo li[role='option']:hover { background: #fafaf8; }
.ct-combo .combo__none { cursor: default !important; color: #737373 !important; font-size: 12.6px !important; }

/* 선택 칩 (298:682): 선택 = 검정, 나머지 = 흰 바탕 + 선 */
.ct-chips { display: flex; flex-wrap: wrap; gap: 7.2px; }
.ct-chips label { position: relative; cursor: pointer; }
.ct-chips input { position: absolute; opacity: 0; pointer-events: none; }
.ct-chips span { display: inline-flex; align-items: center; height: 41.4px; padding: 0 18px; border: 1px solid #ddd8cd; border-radius: 6px; background: #fafaf8; font-size: 12.6px; line-height: 1.55; font-weight: 500; color: #404040; transition: background var(--dur-xs), color var(--dur-xs), border-color var(--dur-xs); }
.ct-chips label:hover span { border-color: #99784a; }
.ct-chips input:checked + span { border-color: #211f1c; background: #211f1c; color: #efede6; }
.ct-chips input:focus-visible + span { outline: 2px solid #c8a97e; outline-offset: 2px; }

.ct-help { margin-top: 0; font-size: 11.7px; line-height: 1.65; color: #73706b; }

/* 동의와 신청 (298:2172) */
.ct-agree { display: grid; gap: 10.8px; }
.ct-check { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 12.6px; line-height: 1.55; color: #404040; cursor: pointer; }
.ct-check input { flex: none; appearance: none; width: 16.2px; height: 16.2px; margin: 0; border: 1.5px solid #e0ded9; border-radius: 4px; background: #fafaf8; cursor: pointer; transition: background var(--dur-xs), border-color var(--dur-xs); }
.ct-check input:checked { border-color: #1f1d1a; background: #1f1d1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23efede6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.ct-check input:focus-visible { outline: 2px solid #c8a97e; outline-offset: 2px; }
.ct-more { border: 0; background: none; padding: 0; font: inherit; font-size: 11.7px; line-height: 1.55; color: #9e9e9e; cursor: pointer; }
.ct-more:hover { color: #737373; }
.ct-terms { display: grid; grid-template-columns: 80px 1fr; gap: 6px 12px; margin: 0; padding: 14px 16px; border-radius: 6px; background: #fafaf8; font-size: 12.6px; color: #5c5a55; }
.ct-terms[hidden] { display: none; }
.ct-terms dt { font-weight: 700; color: #1f1d1a; }
.ct-terms dd { margin: 0; }
.ct-terms__note { grid-column: 1 / -1; color: #737373; }

.ct-send { display: grid; gap: 21.6px; }
.ct-form .ct-submit { width: 100%; min-height: 52.2px; height: 52.2px; margin: 0; padding: 0 20px; border: 0; border-radius: 6px; background: #211f1c; font-size: 15.3px; font-weight: 700; line-height: 1.55; color: #efede6; }
.ct-form .ct-submit:hover { background: #1d1b18; }
.ct-submit[disabled] { opacity: 0.6; }
.ct-note { font-size: 12.6px; line-height: 1.65; color: #737373; }
.ct-note.is-err { color: #b5453c; font-weight: 700; }

/* ---------------------------------------------------------------- 오른쪽 (298:735) */
.ct-side { display: grid; position: sticky; top: calc(var(--header-h) + 24px); }
.ct-steps { padding: 39.6px 36px; border-radius: 12px; background: #141311; color: #efede6; }
.ct-steps h2 { font-size: 18px; line-height: 1.55; font-weight: 700; color: #efede6; }
.ct-steps ol { display: grid; gap: 25.2px; margin: 25.2px 0 0; padding: 0; list-style: none; }
.ct-steps li { display: flex; gap: 16.2px; }
.ct-steps .n { flex: none; font-family: var(--f-num); font-size: 16.2px; font-weight: 400; line-height: 1.55; color: #c8a97e; }
.ct-steps li > div { display: grid; gap: 5.4px; min-width: 0; }
.ct-steps b { font-size: 14.4px; line-height: 1.55; font-weight: 700; color: #efede6; }
.ct-steps p { margin: 0; font-size: 12.6px; line-height: 1.65; color: #b0aca3; }

/* 링크 줄 (298:758): 카드가 아니라 윗선만 있는 줄 */
.ct-link { display: grid; justify-items: start; gap: 7.2px; margin-top: 28.8px; padding: 25.2px 0; border-top: 1px solid #ddd8cd; color: #1f1d1a; }
.ct-link + .ct-link { margin-top: 0; }
.ct-link h3 { font-size: 15.3px; line-height: 1.55; font-weight: 700; color: #1f1d1a; text-wrap: initial; }
.ct-link p { font-size: 12.6px; line-height: 1.65; color: #5c5a55; }
.ct-link span { font-size: 12.6px; line-height: 1.55; font-weight: 700; color: #99784a; text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-xs); }
.ct-link:hover span { color: #6f5530; }
.ct-other { display: grid; gap: 9px; padding-top: 25.2px; border-top: 1px solid #ddd8cd; }
.ct-other h3 { font-size: 12.6px; line-height: 1.55; font-weight: 700; color: #1f1d1a; }
.ct-other div, .ct-other p { font-size: 12.6px; line-height: 1.8; color: #737373; }
.ct-other a { color: inherit; }
.ct-other a:hover { color: #1f1d1a; }

/* ---------------------------------------------------------------- 자주 묻는 질문 (298:769) */
.ct-faq { display: grid; gap: 28.8px; padding-top: 122.4px; padding-bottom: 108px; }
.ct-faq h2 { font-size: 25.2px; line-height: 1.55; font-weight: 700; letter-spacing: 0; color: #1f1d1a; }
.ct-q { border-top: 1px solid #ddd8cd; }
.ct-q:last-child { border-bottom: 1px solid #ddd8cd; }
.ct-q button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 25.2px 0; border: 0; background: none; font: inherit; font-size: 16.2px; line-height: 1.55; font-weight: 700; color: #1f1d1a; text-align: left; cursor: pointer; }
.ct-q i { flex: none; font-style: normal; font-size: 18px; font-weight: 400; line-height: 1.55; color: #99784a; }
.ct-q i::before { content: '+'; }
.ct-q.is-open i::before { content: '\2212'; }
.ct-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-s) var(--ease-lux); }
.ct-a > p { overflow: hidden; font-size: 14.4px; line-height: 1.7; color: #404040; }
.ct-q.is-open .ct-a { grid-template-rows: 1fr; }
.ct-q.is-open .ct-a > p { margin-top: -12.6px; padding-bottom: 25.2px; }

/* ---------------------------------------------------------------- 신청 완료 모달 (298:790) */
.ct-done { background: rgba(28, 25, 22, 0.6); }
.ct-done .modal { display: flex; flex-direction: column; align-items: center; width: min(468px, 100%); padding: 43.2px 36px 36px; border: 0; border-radius: 12px; background: #141412; text-align: center; }
.ct-done__ok { display: grid; place-items: center; flex: none; width: 57.6px; height: 57.6px; margin: 0 auto; border: 1.5px solid #3a3833; border-radius: 50%; }
.ct-done__ok svg { width: 23.4px; height: 23.4px; fill: none; stroke: #c8a97e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.ct-done.is-open .ct-done__ok svg { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ease-lux) 250ms; }
.ct-done__t { width: 100%; margin-top: 21.6px; font-size: 21.6px; line-height: 1.55; font-weight: 700; color: #efede6; text-align: center; }
.ct-done__p { width: 100%; margin-top: 10.8px; font-size: 13.5px; line-height: 1.7; color: #b0aca3; text-align: center; text-wrap: initial; }
.ct-done .ct-done__cta { width: 100%; min-height: 50.4px; height: 50.4px; margin-top: 28.8px; padding: 0 16px; border-radius: 6px; background: #efede6; font-size: 14.4px; line-height: 1.55; font-weight: 700; color: #211f1c; }
.ct-done .ct-done__cta:hover { background: #fafaf8; }
.ct-done__home { display: flex; align-items: center; justify-content: center; width: 100%; height: 46.8px; margin-top: 9px; border: 1px solid #3a3833; border-radius: 6px; font-size: 13.5px; line-height: 1.55; font-weight: 500; color: #b0aca3; transition: border-color var(--dur-xs), color var(--dur-xs); }
.ct-done__home:hover { border-color: #6b6860; color: #efede6; }

/* ---------------------------------------------------------------- 좁은 화면 */
@media (max-width: 1100px) {
  .ct-grid { grid-template-columns: 1fr; gap: 40px; }
  .ct-side { position: static; }
}

/* 휴대폰 (피그마 모바일 390 기준: 좌우 20, 한 줄, 오른쪽 칸은 신청서 아래) */
@media (max-width: 860px) {
  main .wrap { padding-left: 20px; padding-right: 20px; }

  .ct-hero { padding: 56px 0 52px; }
  .ct-eb { font-size: 13px; }
  .ct-h1 { margin-top: 14px; font-size: 32px; }
  .ct-sub { margin-top: 16px; font-size: 15px; }

  .ct-body { padding-top: 32px; }
  .ct-grid { gap: 40px; }
  .ct-form { gap: 40px; padding: 28px 20px; }
  .ct-set { gap: 20px; }
  .ct-set__h { gap: 10px; font-size: 18px; }
  .ct-set__h .n { font-size: 14px; }
  .ct-row { grid-template-columns: 1fr; gap: 20px; }
  .ct-f { gap: 10px; }
  .ct-l { gap: 6px; font-size: 14px; }
  .ct-l em { font-size: 12px; }
  .ct-form input[type='text'], .ct-form input[type='tel'], .ct-form select, .ct-form textarea, .ct-form .dd__btn { height: 52px; padding-left: 16px; padding-right: 16px; font-size: 16px; }
  .ct-form textarea { height: 128px; min-height: 128px; padding-top: 14px; padding-bottom: 14px; }
  .ct-form .dd__list li, .ct-combo .combo li { font-size: 15px; }
  .ct-combo .combo__none { font-size: 13px !important; }
  .ct-chips { gap: 8px; }
  .ct-chips span { height: 44px; padding: 0 18px; font-size: 14px; }
  .ct-help { font-size: 13px; }
  .ct-agree { gap: 12px; }
  .ct-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 2px 10px; font-size: 14px; }
  .ct-check input { margin-top: 2px; }
  .ct-check .ct-more { grid-column: 2; justify-self: start; }
  .ct-check input { width: 18px; height: 18px; }
  .ct-check .ct-more { font-size: 13px; }
  .ct-terms { grid-template-columns: 72px 1fr; font-size: 13px; }
  .ct-send { gap: 20px; }
  .ct-form .ct-submit { height: 56px; min-height: 56px; font-size: 16px; }
  .ct-note { font-size: 14px; }

  .ct-steps { padding: 32px 22px; }
  .ct-steps h2 { font-size: 18px; }
  .ct-steps ol { gap: 24px; margin-top: 24px; }
  .ct-steps li { gap: 14px; }
  .ct-steps .n { font-size: 16px; }
  .ct-steps b { font-size: 16px; }
  .ct-steps p { font-size: 14px; }
  .ct-link { gap: 8px; margin-top: 28px; padding: 24px 0; }
  .ct-link h3 { font-size: 17px; }
  .ct-link p, .ct-link span { font-size: 14px; }
  .ct-other { gap: 10px; padding-top: 24px; }
  .ct-other h3, .ct-other p { font-size: 14px; }

  .ct-faq { gap: 20px; padding-top: 72px; padding-bottom: 72px; }
  .ct-faq h2 { font-size: 22px; }
  .ct-q button { gap: 12px; padding: 22px 0; font-size: 16px; }
  .ct-q i { font-size: 20px; }
  .ct-a > p { font-size: 15px; }
  .ct-q.is-open .ct-a > p { margin-top: -10px; padding-bottom: 22px; }

  .toast i { font-size: 12px; }

  /* 완료 모달 (311:1511): 폭 358, 안쪽 36 / 22 / 24, 선 #3a3833. 모든 내용 가운데 정렬 */
  .ct-done { padding: 16px; }
  .ct-done .modal { width: min(358px, 100%); padding: 36px 22px 24px; border: 1px solid #3a3833; }
  .ct-done__ok { width: 64px; height: 64px; }
  .ct-done__ok svg { width: 26px; height: 26px; }
  .ct-done__t { margin-top: 24px; font-size: 22px; }
  .ct-done__p { margin-top: 12px; font-size: 15px; }
  .ct-done .ct-done__cta { height: 56px; min-height: 56px; margin-top: 32px; font-size: 16px; }
  .ct-done__home { height: 52px; margin-top: 10px; font-size: 15px; }
}

/* 신청 안내 배지 (diag.css .dg-note, 메인·진단 페이지와 같은 모양) */
.ct-msg:not(:empty) { margin-bottom: 12px; }
/* 신청 안내 배지 글자색: 밝은 신청서 위에서 페이지 글자색(밝은색)을 물려받아 안 보이던 문제 (11/4) */
.ct-form .dg-note { color: #1f1d1a; }