/* ==========================================================================
   문의하기 (miracle/contact.php · assets/js/sx/contact.js) — "한눈에 읽히고 바로 쓰는 문의서"
   밝은 종이 톤 · 글자 크기와 대비를 넉넉하게 · 노랑은 고른 항목과 진행 막대에만
   ========================================================================== */
.ct { padding: calc(var(--hd-h) + round(clamp(24px, 3vw, 48px), 4px)) 0 round(clamp(100px, 10vw, 160px), 4px); background: var(--paper); }

.ct__head { margin-bottom: round(clamp(40px, 5vw, 72px), 4px); }
.ct__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-top: round(clamp(28px, 4vw, 56px), 4px); font-family: var(--f-display); font-size: max(var(--fs-6xl), min(var(--fs-8xl), (100vw - 960px) * 999), min(var(--fs-9xl), (100vw - 1440px) * 999)); font-weight: 800; line-height: .9; letter-spacing: -.055em; }
.ct__title small { font-family: var(--f-sans); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; color: var(--fg-2); }
.ct__lead { margin-top: 20px; font-size: var(--fs-md); line-height: 1.75; color: var(--fg-2); }
.ct__lead b { color: var(--fg); font-weight: 700; }

.ct__in { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: round(clamp(32px, 4vw, 72px), 4px); align-items: start; }

/* 왼쪽: 바로 연락하기 + 진행 순서 */
.ct__side { position: sticky; top: calc(var(--hd-h) + 24px); display: grid; gap: 40px; }
.ct-card { padding: 32px 28px; background: var(--k); color: var(--on-dark); border-radius: 16px; }
.ct-card__k { margin-bottom: 14px; font-size: var(--fs-sm); font-weight: 700; color: var(--y); }
.ct-card__tel { display: block; font-family: var(--f-display); font-size: var(--fs-4xl); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.ct-card__mail { display: inline-block; margin-top: 6px; font-size: var(--fs-md); font-weight: 600; color: var(--on-dark-2); }
.ct-card a:hover { color: var(--y); }
.ct-card__dl { display: grid; gap: 16px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--w-line); }
.ct-card__dl div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; }
.ct-card__dl dt { font-size: var(--fs-sm); color: var(--on-dark-3); }
.ct-card__dl dd { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--on-dark-2); }
.ct-steps { display: grid; gap: 0; }
.ct-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.ct-steps li:last-child { border-bottom: 1px solid var(--line); }
.ct-steps b { font-family: var(--f-display); font-size: var(--fs-md); color: var(--fg-2); }
.ct-steps strong { display: block; font-size: var(--fs-md); font-weight: 700; }
.ct-steps p { margin-top: 4px; font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-2); }

/* 오른쪽: 문의서 */
.ct-form { position: relative; gap: 0; padding: 0 round(clamp(24px, 3.4vw, 56px), 4px); background: var(--white); border-radius: 16px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 60px -30px rgba(0, 0, 0, .18); overflow: hidden; }
.ct-form__bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--line); }
.ct-form__bar i { display: block; height: 100%; width: calc(var(--fill, 0) * 100%); background: var(--y); transition: width .6s var(--ease); }
.ct-sec { padding: round(clamp(32px, 3.4vw, 48px), 4px) 0 !important; }
.ct-sec + .ct-sec { border-top: 1px solid var(--line); }
.ct-sec legend { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; }
.ct-sec legend + * { clear: both; }
.ct-sec legend b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--k); color: var(--white); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0; transition: background .3s, color .3s; }
.ct-sec.is-done legend b { background: var(--y); color: var(--k); }
.ct-sec legend small { font-size: var(--fs-sm); font-weight: 500; color: var(--fg-2); }
.ct-sub { margin: 4px 0 12px; font-size: var(--fs-sm); font-weight: 700; color: var(--fg); }
.ct-sub ~ .ct-sub { margin-top: 28px; }

/* 고르는 항목: 크고 또렷한 버튼 */
.ct-form .sx-chips { gap: 10px; }
.ct-form .sx-chips span { height: 48px; padding: 0 20px; border-radius: 999px; border-color: rgba(0, 0, 0, .16); font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
.ct-form .sx-chips label:hover span { border-color: var(--fg); }
.ct-form .sx-chips input:checked + span { background: var(--y); border-color: var(--y); color: var(--k); font-weight: 700; }
.ct-form .sx-chips input:checked + span::before { content: ""; width: 14px; height: 14px; margin-right: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 3.8L16 6' fill='none' stroke='%23050505' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 입력칸: 이름은 늘 칸 위에, 칸은 테두리 상자 */
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; }
.ct-f { display: grid; gap: 8px; }
.ct-f.is-full { grid-column: 1 / -1; }
.ct-f .ct-f__l { position: static; transform: none !important; font-size: var(--fs-sm); font-weight: 700; color: var(--fg); pointer-events: auto; }
.ct-f .ct-f__l em { margin-left: 4px; }
.ct-f :is(input, textarea) { padding: 14px 16px; border: 1px solid rgba(0, 0, 0, .16); border-radius: 10px; background: var(--paper); font-size: var(--fs-md); line-height: 1.5; transition: border-color .2s, background .2s, box-shadow .2s; }
.ct-f textarea { min-height: 160px; resize: vertical; }
.ct-f :is(input, textarea)::placeholder { color: rgba(0, 0, 0, .36); }
.ct-f :is(input, textarea):hover { border-color: rgba(0, 0, 0, .32); }
.ct-f :is(input, textarea):focus { border-color: var(--k); background: var(--white); box-shadow: 0 0 0 3px var(--y-a2, rgba(255, 225, 77, .45)); }
.ct-f.is-invalid :is(input, textarea) { border-color: var(--danger); background: var(--white); }
.ct-f.is-invalid::after { content: attr(data-err); font-size: var(--fs-xs); font-weight: 600; color: var(--danger); }
.ct-file { margin-top: 20px; }
.ct-file .sx-file__btn { border-radius: 999px; }

/* 끝: 동의 + 보내기 */
.ct-form__end { display: grid; gap: 20px; margin: 0 calc(-1 * round(clamp(24px, 3.4vw, 56px), 4px)); padding: 28px round(clamp(24px, 3.4vw, 56px), 4px) 36px; background: var(--paper2, #f1efe9); border-top: 1px solid var(--line); }
.ct-form__end .sx-check { font-size: var(--fs-md); }
.ct-form__end .sx-form__foot { justify-content: space-between; }
.ct-req { font-size: var(--fs-sm); color: var(--fg-2); }
.ct-req b { color: var(--fg); font-size: var(--fs-md); }
.ct-form.is-ready .ct-req b { color: var(--k); box-shadow: inset 0 -.4em 0 var(--y); }
.ct-form__end .btn { border-radius: 999px; }
.ct-form__end .sx-form__msg:empty { display: none; }
.ct-form__end .sx-form__msg { font-size: var(--fs-md); font-weight: 600; }

@media (max-width: 1180px) {
  .ct__in { grid-template-columns: 1fr; }
  .ct__side { position: static; order: 2; grid-template-columns: 1fr 1fr; align-items: start; }  /* 좁은 화면은 문의서부터 */
}
@media (max-width: 760px) {
  .ct__side { grid-template-columns: 1fr; }
  .ct-grid { grid-template-columns: 1fr; }
  .ct-form__end .sx-form__foot { flex-direction: column; align-items: stretch; }
  .ct-form__end .btn { justify-content: center; }
}