/* ==========================================================================
   JETCO /beta : 문의하기 (contact)            prefix: ct-
   팔레트: 쿨 화이트(--paper) · 잉크 · 로고 인디고(--brand / 문맥형 --signal) · 테이프 옐로우(--tape)
   - 밝은 영역의 강조 = 인디고, 어두운 면(선택된 카드, 전송 중 버튼, 다크 섹션) 위의 강조 = 옐로우
   - 오류 표시는 별도의 크림슨(--ct-err) 한 가지만 사용
   ========================================================================== */

.c-page-contact {
    --ct-err: #C42B4B;          /* 오류 문구 (흰 배경 대비 5.5:1, 오류 배경 대비 4.9:1) */
    --ct-err-rgb: 196, 43, 75;
    --ct-err-bg: #FDF0F3;
    --ct-field: #F7F8FC;        /* 입력 칸 바탕 (종이보다 한 톤 밝게) */
    --ct-pad: clamp(22px, 3.2vw, 44px);
}

/* 공용 리빌은 is-in 상태에 clip-path: inset(0) 을 남겨 바깥 그림자/포커스 링/코너 장식을 잘라낸다.
   clip 계열이 아닌 리빌은 등장 후 clip-path 를 해제한다. (이 페이지 한정) */
html.js .c-page-contact [data-reveal]:not([data-reveal="clip"]):not([data-reveal="wipe"]):not([data-reveal="iris"]).is-in { clip-path: none; }

/* 줄바꿈 제어: 구절 단위 묶음 / 히어로 설명 균형 줄바꿈 */
.ct-nb { white-space: nowrap; }
.c-page-contact .c-subhero__desc { text-wrap: balance; }

/* 공통 선 아이콘 (svg[data-draw] : 스크롤 시 선이 그려진다) */
.ct-ico { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 01. Intake section ---------- */
.ct-intake { position: relative; padding-top: clamp(64px, 8vw, 128px); }
.ct-intake > .c-container { position: relative; z-index: 1; }
/* 섹션 뒤의 외곽선 대형 문자 (스크롤에 따라 가로로 흐름) */
.ct-kinetic { position: absolute; left: 0; right: 0; top: clamp(20px, 3.4vw, 56px); z-index: 0; overflow: hidden; white-space: nowrap; pointer-events: none; user-select: none; }
.ct-kinetic span {
    display: inline-block; padding-left: 5vw;
    font-size: clamp(88px, 15vw, 248px); font-weight: 800; line-height: .92; letter-spacing: -0.06em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(var(--signal-rgb), .09); will-change: transform;
}
.ct-split { align-items: stretch; }

/* 좌측 정보 컬럼 */
.ct-info { min-width: 0; }
.ct-info__inner { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 1025px) and (min-height: 840px) {
    .ct-info__inner { position: sticky; top: calc(var(--header-h) + 36px); transition: top .6s var(--ease); }
    body.is-header-hidden .ct-info__inner { top: 36px; }
}
.ct-info__title {
    margin-top: 20px;
    font-size: clamp(28px, 2.55vw, 40px); line-height: 1.24; letter-spacing: -0.042em; font-weight: 720;
}

/* 대표 번호 */
.ct-line {
    position: relative; align-self: stretch;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 20px;
    margin-top: clamp(32px, 3.4vw, 48px); padding: 24px 0 26px;
    border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line-2);
}
.ct-line::before { /* 호버 시 왼쪽부터 칠해지는 상단 라인 */
    content: ""; position: absolute; left: 0; top: -1.5px; height: 1.5px; width: 100%;
    background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease);
}
.ct-line:hover::before, .ct-line:focus-visible::before { transform: scaleX(1); }
.ct-line__label { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 650; color: var(--ink-3); }
.ct-line:hover .ct-line__label .ct-ico { animation: ct-ring .9s var(--ease) both; }
@keyframes ct-ring {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); }
    45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); }
}
.ct-line__num {
    display: block; min-width: 0;
    font-size: clamp(36px, 3.7vw, 58px); font-weight: 500; line-height: 1; letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums; transition: color .4s var(--ease);
}
.ct-line:hover .ct-line__num { color: var(--signal); }

/* 내선 */
.ct-ext { align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line-2); }
.ct-ext__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; row-gap: 4px; padding: 20px 0 22px; }
.ct-ext__item + .ct-ext__item { padding-left: 24px; border-left: 1px solid var(--line); }
.ct-ext__k { font-size: 12.5px; font-weight: 650; color: var(--signal); }
.ct-ext__no { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.ct-ext__label { grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: var(--ink-2); }

/* 이메일 · 주소 */
.ct-meta { align-self: stretch; }
.ct-meta__row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ct-meta__k { display: flex; align-items: center; gap: 9px; align-self: start; padding-top: 2px; color: var(--muted); }
.ct-meta__k .c-mono { font-size: 11px; letter-spacing: .14em; }
.ct-meta__v { min-width: 0; font-size: 15.5px; font-weight: 550; line-height: 1.6; color: var(--ink); }
.ct-meta__v--mail { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ct-mail, .ct-addr__link, .ct-consent__link, .ct-done__tel a { position: relative; }
.ct-mail::after, .ct-addr__link::after, .ct-consent__link::after, .ct-done__tel a::after { content: ""; position: absolute; inset: -9px -6px; }
.ct-mail { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease), color .3s; }
.ct-mail:hover { background-size: 100% 1px; color: var(--signal); }
.ct-addr { display: block; }
.ct-addr__link { margin-top: 8px; font-size: 14px; }

/* 이메일 복사 버튼 (복사 아이콘 -> 체크 아이콘으로 전환) */
.ct-copy {
    position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px var(--line-2);
    font-size: 12.5px; font-weight: 600; color: var(--ink-3);
    transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s;
}
.ct-copy::after { content: ""; position: absolute; inset: -6px -4px; border-radius: inherit; }
.ct-copy__ico { position: relative; flex: none; width: 14px; height: 14px; }
.ct-copy__ico svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-back), opacity .3s var(--ease); }
.ct-copy__ico .ct-copy__b { opacity: 0; transform: scale(.3) rotate(-40deg); stroke-width: 2.6; }
.ct-copy:hover { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.ct-copy.is-done { background: var(--brand); color: #fff; box-shadow: inset 0 0 0 1px var(--brand); }
.ct-copy.is-done .ct-copy__a { opacity: 0; transform: scale(.3) rotate(40deg); }
.ct-copy.is-done .ct-copy__b { opacity: 1; transform: none; }

.ct-note {
    display: flex; gap: 12px; margin-top: 26px; padding: 16px 18px; border-radius: var(--r);
    background: var(--paper-2); font-size: 14px; line-height: 1.7; color: var(--ink-3);
}
.ct-note__mark { flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 1px; background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }

/* ---------- 문의 카드 ---------- */
.ct-stage { position: relative; min-width: 0; }
.ct-card {
    position: relative; background: var(--white); border-radius: var(--r-lg);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
}
/* 코너 브래킷: 등장 시 바깥에서 안으로 모이고, 입력 중에는 인디고 */
.ct-corner {
    position: absolute; width: 22px; height: 22px; pointer-events: none;
    border: 0 solid var(--ink); opacity: .75;
    transition: transform 1.3s var(--ease) .35s, opacity .8s var(--ease) .35s, border-color .5s var(--ease);
}
.ct-corner--tl { left: -11px; top: -11px; border-left-width: 1.5px; border-top-width: 1.5px; }
.ct-corner--tr { right: -11px; top: -11px; border-right-width: 1.5px; border-top-width: 1.5px; }
.ct-corner--bl { left: -11px; bottom: -11px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.ct-corner--br { right: -11px; bottom: -11px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
html.js .ct-card:not(.is-in) .ct-corner { opacity: 0; }
html.js .ct-card:not(.is-in) .ct-corner--tl { transform: translate(-16px, -16px); }
html.js .ct-card:not(.is-in) .ct-corner--tr { transform: translate(16px, -16px); }
html.js .ct-card:not(.is-in) .ct-corner--bl { transform: translate(-16px, 16px); }
html.js .ct-card:not(.is-in) .ct-corner--br { transform: translate(16px, 16px); }
/* site.js 가 실행되지 않으면 카드와 함께 코너도 공용 페일세이프로 노출 */
html.js:not(.c-ready) .ct-card .ct-corner { animation: c-failsafe .6s ease 2.4s forwards; }
.ct-card:focus-within .ct-corner, .ct-card.is-done .ct-corner { border-color: var(--signal); opacity: 1; }

.ct-card__head {
    display: flex; align-items: center; gap: 12px 20px;
    padding: 18px var(--ct-pad); border-bottom: 1px dashed var(--line-2);
}
.ct-card__code { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.ct-card__code::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.ct-progress { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ct-progress__txt { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-progress__k { margin-right: 2px; }
.ct-progress__txt b { color: var(--ink); font-weight: 600; transition: color .4s; }
.ct-progress__bar { position: relative; width: 104px; height: 3px; border-radius: 2px; background: var(--paper-2); overflow: hidden; }
.ct-progress__bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--signal); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .8s var(--ease); }
.ct-progress.is-full .ct-progress__txt b { color: var(--signal); }

.ct-card__body, .ct-done { position: relative; }

/* ---------- 폼 ---------- */
.ct-form { padding: clamp(28px, 3.4vw, 44px) var(--ct-pad) clamp(30px, 3.4vw, 44px); }
.ct-hp { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); visibility: hidden; pointer-events: none; }

.ct-group { min-width: 0; margin: 0; padding: 0; border: 0; transition: opacity .45s var(--ease); }
.ct-group.is-busy { opacity: .45; }
.ct-group + .ct-group { margin-top: clamp(38px, 4.2vw, 54px); }
.ct-group__legend {
    float: left; width: 100%; display: flex; align-items: center; gap: 12px;
    margin: 0 0 22px; padding: 0;
    font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}
/* 그룹 구분선: 그룹의 필수 항목이 모두 채워지면 인디고로 채워진다 */
.ct-group__legend::after {
    content: ""; flex: 1; height: 1px; margin-left: 6px;
    background: linear-gradient(var(--signal), var(--signal)) 0 0 / 0 100% no-repeat, var(--line);
    transition: background-size 1s var(--ease);
}
.ct-group.is-complete .ct-group__legend::after { background-size: 100% 100%, auto; }
.ct-group__t { display: inline-flex; align-items: baseline; }
.ct-group__legend + * { clear: both; }
.ct-group__no {
    display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 6px;
    background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600;
    transition: background .5s var(--ease), color .5s var(--ease), transform .6s var(--ease-back);
}
.ct-group.is-complete .ct-group__no { background: var(--tape); color: var(--ink); transform: rotate(-8deg); }
.ct-req { color: var(--signal); margin-left: 3px; font-weight: 700; }
.ct-opt { margin-left: 8px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--paper-2); font-size: 11.5px; font-weight: 600; color: var(--muted); }

.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.ct-row + .ct-row, .ct-field + .ct-field { margin-top: 22px; }
.ct-row > .ct-field + .ct-field { margin-top: 0; }
.ct-field { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ct-field__label { display: flex; align-items: center; margin-bottom: 10px; font-size: 14px; font-weight: 650; color: var(--ink-2); transition: color .3s; }
.ct-field:focus-within .ct-field__label { color: var(--ink); }

/* 입력 칸 + 포커스 시 인디고 라인이 그어지는 애니메이션 */
.ct-control { position: relative; }
.ct-control::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px;
    background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
    transition: transform .65s var(--ease);
}
.ct-control:focus-within::after { transform: scaleX(1); }
.ct-input {
    display: block; width: 100%; height: 56px; margin: 0; padding: 0 46px 0 16px;
    border: 0; border-radius: 10px; outline: none;
    background: var(--ct-field); box-shadow: inset 0 0 0 1px var(--line-2);
    font-size: 16px; color: var(--ink); letter-spacing: -0.01em;
    -webkit-appearance: none; appearance: none;
    transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
.ct-input::placeholder { color: #8285A3; opacity: 1; }
.ct-input:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.ct-input:focus { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 5px var(--signal-soft); }
.ct-input--mono { font-family: var(--font-mono); letter-spacing: .02em; }
.ct-input--mono::placeholder { font-family: var(--font-mono); }

.ct-textarea { height: auto; min-height: 200px; max-height: 560px; padding: 16px 46px 42px 16px; line-height: 1.75; resize: none; overflow-y: auto; }
.ct-count { position: absolute; right: 16px; bottom: 14px; font-size: 11px; letter-spacing: .04em; color: var(--muted); pointer-events: none; transition: color .3s; }
.ct-count b { font-weight: 600; color: var(--ink-3); }
.ct-count.is-near, .ct-count.is-near b { color: var(--ct-err); }

/* 유효 표시 체크 */
.ct-ok {
    position: absolute; right: 14px; top: 50%; display: grid; place-items: center;
    width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--brand);
    opacity: 0; transform: scale(.4); pointer-events: none;
    transition: opacity .3s var(--ease), transform .55s var(--ease-back);
}
.ct-control--area .ct-ok { top: 16px; margin-top: 0; }
.ct-ok svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s var(--ease) .12s; }
.ct-field.is-valid .ct-ok { opacity: 1; transform: none; }
.ct-field.is-valid .ct-ok svg { stroke-dashoffset: 0; }

/* 오류 상태 + 오류 문구 (높이 애니메이션) */
.ct-field.is-invalid .ct-input { background: var(--ct-err-bg); box-shadow: inset 0 0 0 1.5px var(--ct-err); }
.ct-field.is-invalid .ct-input:focus { box-shadow: inset 0 0 0 1.5px var(--ct-err), 0 0 0 5px rgba(var(--ct-err-rgb), .12); }
.ct-field.is-invalid .ct-control::after { background: var(--ct-err); }
.ct-err { display: grid; grid-template-rows: 0fr; margin: 0; transition: grid-template-rows .45s var(--ease); }
.ct-err__clip { min-height: 0; overflow: hidden; }
.ct-err__msg {
    display: flex; align-items: flex-start; gap: 7px; padding-top: 8px;
    font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--ct-err);
    opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.ct-err__msg::before { /* 원형 경고 배지 (SVG 느낌표 선) */
    content: ""; flex: none; width: 15px; height: 15px; margin-top: .25em; border-radius: 50%;
    background: var(--ct-err) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.2v4.6M8 11.4v.3' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.ct-err__msg:empty::before { display: none; }
.ct-field.is-invalid > .ct-err { grid-template-rows: 1fr; }
.ct-field.is-invalid > .ct-err .ct-err__msg { opacity: 1; transform: none; }

/* 흔들림 (제출 시 오류 항목) */
.is-shake { animation: ct-shake .5s var(--ease) both; }
@keyframes ct-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

/* ---------- 1. 문의 유형 카드 (선택 시 클릭 지점에서 인디고가 번짐) ---------- */
.ct-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ct-type { position: relative; display: block; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ct-type__input { position: absolute; left: 12px; top: 12px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ct-type__box {
    --cx: 88%; --cy: 22%;
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-rows: auto auto 1fr; gap: 14px; height: 100%;
    padding: 18px 20px 22px; border-radius: var(--r);
    background: var(--ct-field); box-shadow: inset 0 0 0 1px var(--line-2);
    transition: color .55s var(--ease), box-shadow .45s var(--ease), transform .6s var(--ease);
}
.ct-type__box::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 0) 0 0 / 14px 14px,
        var(--brand);
    clip-path: circle(0% at var(--cx) var(--cy));
    transition: clip-path .75s var(--ease);
}
.ct-type:hover .ct-type__box { box-shadow: inset 0 0 0 1px var(--brand); transform: translateY(-3px); }
.ct-type__input:checked + .ct-type__box { color: #fff; box-shadow: inset 0 0 0 1px var(--brand); transform: none; }
.ct-type__input:checked + .ct-type__box::before { clip-path: circle(160% at var(--cx) var(--cy)); }
.ct-type__input:focus-visible + .ct-type__box { outline: 2px solid var(--signal); outline-offset: 3px; }
.ct-type__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ct-type__code { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .5s var(--ease); }
.ct-type__input:checked + .ct-type__box .ct-type__code { color: var(--tape); }
.ct-type__tick {
    flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px;
    box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background .4s var(--ease), box-shadow .4s, transform .6s var(--ease-back);
}
.ct-type__tick svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s var(--ease) .18s; }
.ct-type__input:checked + .ct-type__box .ct-type__tick { background: var(--tape); box-shadow: inset 0 0 0 1.5px var(--tape); transform: rotate(-8deg); }
.ct-type__input:checked + .ct-type__box .ct-type__tick svg { stroke-dashoffset: 0; }
.ct-type__icon { display: block; width: 40px; height: 40px; }
.ct-type__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform .8s var(--ease); }
.ct-type:hover .ct-type__icon svg { transform: rotate(-6deg) scale(1.06); }
.ct-type__text { display: flex; flex-direction: column; gap: 4px; align-self: start; min-width: 0; }
.ct-type__title { font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
.ct-type__desc { font-size: 13.5px; line-height: 1.55; text-wrap: balance; color: var(--muted); transition: color .5s var(--ease); }
.ct-type__input:checked + .ct-type__box .ct-type__desc { color: rgba(255, 255, 255, .76); }
.ct-field--choice.is-invalid .ct-type__box { box-shadow: inset 0 0 0 1.5px var(--ct-err); background: var(--ct-err-bg); }

/* 희망 과정 : 교육 문의를 고르면 카드 아래로 펼쳐진다 (JS 없으면 항상 보임)
   overflow 대신 clip-path 로 잘라 select 의 포커스 링(5px)이 잘리지 않게 한다 */
.ct-course { display: grid; grid-template-rows: 1fr; }
html.js .ct-course { grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
html.js .ct-course.is-open { grid-template-rows: 1fr; }
.ct-course__clip { min-height: 0; clip-path: inset(-8px); }
html.js .ct-course:not(.is-open) .ct-course__clip { visibility: hidden; transition: visibility 0s .6s; }
.ct-field--course { padding-top: 22px; }
html.js .ct-field--course { opacity: 0; transform: translateY(-8px); transition: opacity .35s var(--ease), transform .6s var(--ease); }
html.js .ct-course.is-open .ct-field--course { opacity: 1; transform: none; transition-delay: .12s; }
.ct-select { padding-right: 76px; cursor: pointer; text-overflow: ellipsis; }
.ct-select:has(> option[value=""]:checked) { color: #8285A3; }
.ct-select option, .ct-select optgroup { color: var(--ink); }
.ct-select__caret { position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-3); pointer-events: none; }
.ct-select__caret svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.ct-select:focus ~ .ct-select__caret svg { transform: rotate(180deg); }
.ct-field--course .ct-ok { right: 44px; }
.ct-course__note { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.ct-course__note a { color: var(--signal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 방문 경로 칩 ---------- */
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ct-chip input { position: absolute; left: 8px; top: 8px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ct-chip span {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; border-radius: var(--r-pill);
    background: transparent; box-shadow: inset 0 0 0 1px var(--line-2);
    font-size: 14px; font-weight: 550; color: var(--ink-2); white-space: nowrap;
    transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.ct-chip span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--line-2); transition: background .35s, transform .5s var(--ease-back); }
.ct-chip:hover span { box-shadow: inset 0 0 0 1px var(--brand); }
.ct-chip input:checked + span { background: var(--brand); color: #fff; box-shadow: inset 0 0 0 1px var(--brand); }
.ct-chip input:checked + span::before { background: var(--tape); transform: rotate(45deg) scale(1.25); }
.ct-chip input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ---------- 4. 개인정보 동의 ---------- */
.ct-consent__box { border-radius: var(--r); background: var(--ct-field); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ct-consent__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 13px 18px; border-bottom: 1px dashed var(--line-2);
    font-size: 13px; font-weight: 600; color: var(--muted);
}
.ct-consent__link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink);
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease), color .3s;
}
.ct-consent__link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.ct-consent__link:hover { color: var(--signal); background-size: 100% 1px; }
.ct-consent__link:hover svg { transform: translate(2px, -2px); }
.ct-terms { padding: 4px 18px 6px; margin: 0; }
.ct-term { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.ct-term:last-child { border-bottom: 0; }
.ct-term dt { font-weight: 650; color: var(--ink); white-space: nowrap; }
.ct-term dd { margin: 0; color: var(--ink-3); }
.ct-term__tag { color: var(--signal); font-weight: 700; }
.ct-term.is-optional .ct-term__tag { color: var(--muted); }

.ct-checks { display: grid; gap: 2px; margin-top: 12px; }
.ct-checks .ct-field + .ct-field { margin-top: 0; }
.ct-check { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 40px; padding: 8px 0; cursor: pointer; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); -webkit-tap-highlight-color: transparent; }
.ct-check input { position: absolute; left: 0; top: 8px; width: 22px; height: 22px; margin: 0; opacity: 0; }
.ct-check__box {
    flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0; border-radius: 6px;
    background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-2);
    transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .5s var(--ease-back);
}
.ct-check__box svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s var(--ease) .06s; }
.ct-check:hover .ct-check__box { box-shadow: inset 0 0 0 1.5px var(--brand); }
.ct-check input:checked + .ct-check__box { background: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); transform: rotate(-6deg); }
.ct-check input:checked + .ct-check__box svg { stroke-dashoffset: 0; }
.ct-check input:focus-visible + .ct-check__box { outline: 2px solid var(--signal); outline-offset: 3px; }
.ct-check input:checked ~ .ct-check__txt { color: var(--ink); }
.ct-check--req .ct-check__txt { font-weight: 600; color: var(--ink-2); }
.ct-field--check.is-invalid .ct-check__box { box-shadow: inset 0 0 0 1.5px var(--ct-err); background: var(--ct-err-bg); }
.ct-field--check > .ct-err .ct-err__msg { padding-left: 34px; padding-top: 0; padding-bottom: 4px; }

/* ---------- 전송 ---------- */
.ct-submit { display: grid; gap: 14px; margin-top: clamp(34px, 4vw, 48px); }
.ct-submit__btn { height: 68px; justify-content: space-between; padding: 0 28px 0 32px; font-size: 17px; }
.ct-submit__btn .c-btn__icon { width: 20px; height: 20px; }
.ct-submit__sending { display: none; align-items: center; gap: 12px; }
.ct-submit__btn.is-sending { cursor: progress; color: #fff; }
.ct-submit__btn.is-sending::before { transform: translateY(0); border-radius: 0; }
.ct-submit__btn.is-sending .ct-submit__label, .ct-submit__btn.is-sending .c-btn__icon { display: none; }
.ct-submit__btn.is-sending .ct-submit__sending { display: inline-flex; }
.ct-submit__btn.is-sending::after { /* 하단 진행 표시 (indeterminate) : 잉크 면 위라 옐로우 */
    content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 3px; background: var(--tape);
    animation: ct-indet 1.25s var(--ease-io) infinite;
}
@keyframes ct-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(270%); } }
.ct-submit__btn:disabled { pointer-events: none; }
.ct-spinner { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); border-top-color: var(--tape); animation: c-spin .8s linear infinite; }
.ct-submit__note { font-size: 13px; line-height: 1.6; color: var(--muted); }

/* 서버 오류 알림 */
.ct-alert {
    display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 16px 18px; border-radius: var(--r);
    background: var(--ct-err-bg); box-shadow: inset 0 0 0 1px rgba(var(--ct-err-rgb), .35);
    animation: ct-pop .6s var(--ease) both;
}
.ct-alert__icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ct-err); color: #fff; }
.ct-alert__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ct-alert__body { flex: 1; min-width: 0; }
.ct-alert__title { display: block; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.ct-alert__msg { margin-top: 3px; font-size: 14px; line-height: 1.65; color: var(--ink-3); text-wrap: pretty; }
.ct-alert__msg a { color: var(--ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.ct-alert__close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -8px -8px 0; border-radius: 50%; transition: background .3s; }
.ct-alert__close:hover { background: rgba(16, 18, 46, .07); }
.ct-alert__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@keyframes ct-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* 폼 -> 완료 전환 */
.ct-card__body.is-leaving { opacity: 0; transform: translateY(-14px); filter: blur(4px); transition: opacity .45s var(--ease), transform .55s var(--ease), filter .45s; pointer-events: none; }

/* ---------- 접수 완료 패널 ---------- */
.ct-done { padding: clamp(40px, 5vw, 64px) var(--ct-pad) clamp(36px, 4vw, 52px); outline: none; overflow: hidden; }
.ct-done > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 280ms); }
.ct-done.is-shown > * { opacity: 1; transform: none; }
.ct-done > .ct-done__stamp { transform: rotate(-9deg) scale(1.9); transition: none; }
.ct-done.is-shown > .ct-done__stamp { animation: ct-stamp .7s var(--ease) .95s both; }
@keyframes ct-stamp {
    0% { opacity: 0; transform: rotate(-9deg) scale(1.9); }
    55% { opacity: 1; transform: rotate(-9deg) scale(.94); }
    100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}
.ct-done__stamp {
    position: absolute; right: var(--ct-pad); top: clamp(36px, 4.4vw, 56px);
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px 7px;
    border: 1.5px solid var(--signal); border-radius: 6px; color: var(--signal);
    font-size: 14px; font-weight: 750; letter-spacing: .08em; line-height: 1.3;
    box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 4px rgba(var(--signal-rgb), .45);
}
.ct-done__stamp em { font-size: 10.5px; letter-spacing: .06em; font-weight: 500; }
.ct-done__mark { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 14px; background: var(--tape); }
.ct-done.is-shown > .ct-done__mark { animation: ct-mark .9s var(--ease) .2s both; }
@keyframes ct-mark { from { opacity: 0; transform: scale(.4) rotate(-40deg); } to { opacity: 1; transform: rotate(-6deg); } }
.ct-done__mark svg { width: 46px; height: 46px; fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; transition: stroke-dashoffset .8s var(--ease) .7s; }
.ct-done.is-shown .ct-done__mark svg { stroke-dashoffset: 0; }
.ct-done__eyebrow { margin-top: 32px; }
.ct-done__title { margin-top: 14px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.16; letter-spacing: -0.045em; font-weight: 740; }
.ct-done__desc { margin-top: 14px; max-width: 520px; font-size: 16px; line-height: 1.75; color: var(--ink-3); }

.ct-receipt { margin: 30px 0 0; border-top: 1.5px solid var(--ink); }
.ct-receipt > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line-2); }
.ct-receipt dt { font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 1px; }
.ct-receipt dd { margin: 0; min-width: 0; font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

.ct-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; counter-reset: none; }
.ct-next li { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; border-radius: var(--r); background: var(--paper); }
.ct-next__no { font-size: 11px; letter-spacing: .1em; color: var(--signal); }
.ct-next strong { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.ct-next li > span:last-child { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); text-wrap: balance; }

.ct-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 32px; }
.ct-again {
    height: 54px; padding: 0 8px; margin-left: 4px; font-size: 14.5px; font-weight: 600; color: var(--ink-3);
    background: linear-gradient(currentColor, currentColor) 8px calc(100% - 15px) / 0 1px no-repeat; transition: color .3s, background-size .5s var(--ease);
}
.ct-again:hover { color: var(--ink); background-size: calc(100% - 16px) 1px; }
.ct-done__tel { margin-top: 22px; font-size: 14px; color: var(--muted); }
.ct-done__tel a { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }
.ct-done__tel a:hover { color: var(--signal); }

/* ---------- 02. 처리 절차 (dark) ---------- */
.ct-after { overflow: hidden; isolation: isolate; padding-bottom: clamp(72px, 8vw, 120px); border-bottom: 1px solid var(--night-line); }
.ct-after::before { /* 선명한 1px 격자 텍스처 */
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background-image: linear-gradient(var(--night-line) 1px, transparent 1px), linear-gradient(90deg, var(--night-line) 1px, transparent 1px);
    background-size: 88px 88px; background-position: -1px -1px; opacity: .55;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.ct-after__field {
    position: absolute; left: 0; top: 0; width: 100%; height: min(100%, 820px); z-index: -1; opacity: .2; pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 55% 70% at 88% 12%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 55% 70% at 88% 12%, #000 10%, transparent 70%);
}
.ct-flow { position: relative; }

.ct-stepwrap { position: relative; }
.ct-flowbar { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--night-line-2); pointer-events: none; }
.ct-flowbar i { position: absolute; left: 0; top: -.5px; width: 100%; height: 2px; background: var(--signal); transform-origin: 0 50%; transition: transform 2.4s var(--ease) .35s; }
/* 초기 '비어 있는' 상태는 JS 가 있을 때만 (JS 없음/실패 시 채워진 타임라인 그대로) */
html.js .ct-flowbar i { transform: scaleX(0); }
html.js .ct-stepwrap.is-in .ct-flowbar i { transform: scaleX(1); }
html.js:not(.c-ready) .ct-flowbar i, html.js:not(.c-ready) .ct-step__node i { animation: c-failsafe .6s ease 2.4s forwards; }
.ct-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ct-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 48px clamp(20px, 3vw, 48px) 8px 0; min-width: 0; }
.ct-step + .ct-step { padding-left: clamp(20px, 3vw, 48px); border-left: 1px solid var(--night-line); }
.ct-step__node { /* 진행선 위의 마름모 노드 : 선이 도착하면 안쪽이 채워진다 */
    position: absolute; top: -7px; left: -7px; width: 14px; height: 14px; border-radius: 2px;
    background: var(--night); box-shadow: inset 0 0 0 1.5px var(--signal); transform: rotate(45deg);
}
.ct-step:first-child .ct-step__node { left: 0; }
.ct-step__node i { position: absolute; inset: 3.5px; border-radius: 1px; background: var(--signal); transition: transform .6s var(--ease-back) calc(var(--d, 0ms) + 500ms); }
html.js .ct-step__node i { transform: scale(0); }
html.js .ct-step.is-in .ct-step__node i { transform: scale(1); }
.ct-step__ico { width: 52px; height: 52px; margin-bottom: 28px; fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ct-step__no { font-size: 12px; letter-spacing: .14em; color: var(--fog-2); }
.ct-step__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: clamp(26px, 2.4vw, 36px); font-weight: 720; letter-spacing: -0.04em; line-height: 1.2; }
.ct-step__en { font-size: .78em; color: var(--fog-2); letter-spacing: 0; }
.ct-step__desc { margin-top: 14px; max-width: 360px; text-wrap: balance; font-size: 15.5px; line-height: 1.75; color: var(--fog); }

/* 데스크톱 + GSAP: 진행선 · 노드 · 아이콘 · 문구가 스크롤 위치에 직접 연결된다 (CSS 전환은 끄고 스크럽 값만 사용) */
.ct-after.is-scrub .ct-step,
.ct-after.is-scrub .ct-stepwrap,
.ct-after.is-scrub .ct-flowbar i,
.ct-after.is-scrub .ct-step__node i,
.ct-after.is-scrub .ct-step__ico :is(path, line, circle, rect, polyline, polygon, ellipse) { transition: none !important; }
.ct-after.is-scrub .ct-flow { will-change: transform; }

/* ---------- 03. 관련 안내 ---------- */
.ct-links { margin-top: clamp(80px, 10vw, 150px); }
.ct-links__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ct-links__item {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; column-gap: 16px;
    height: 100%; padding: 26px 26px 28px; border-radius: var(--r-lg);
    background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-line);
    transition: box-shadow .5s var(--ease), transform .7s var(--ease);
}
.ct-links__item::before { /* 호버: 아래에서 위로 차오르는 단색 면 */
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--night-3);
    transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--ease);
}
.ct-links__item::after { /* 호버: 상단 옐로우 라인 */
    content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--signal);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease) .05s;
}
.ct-links__item:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--night-line-2); }
.ct-links__item:hover::before { transform: scaleY(1); }
.ct-links__item:hover::after { transform: scaleX(1); }
.ct-links__ico { grid-column: 1; width: 30px; height: 30px; margin-bottom: 24px; fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .7s var(--ease); }
.ct-links__item:hover .ct-links__ico { transform: translateY(-3px) rotate(-6deg); }
.ct-links__meta { grid-column: 1; font-size: 11px; letter-spacing: .12em; color: var(--fog-2); text-transform: uppercase; }
.ct-links__title { grid-column: 1; margin-top: 10px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.ct-links__desc { grid-column: 1; margin-top: 6px; font-size: 14.5px; color: var(--fog); }
.ct-links__item .c-arrow { grid-column: 2; grid-row: 1 / 5; align-self: end; color: #fff; box-shadow: inset 0 0 0 1px var(--night-line-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .ct-next { grid-template-columns: 1fr; }
    .ct-next li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
    .ct-next li > span:last-child { grid-column: 2; }
}
@media (max-width: 1024px) {
    .ct-info { max-width: 680px; }
    .ct-info__title { font-size: clamp(26px, 4.4vw, 36px); }
    /* 처리 절차: 세로 타임라인 */
    .ct-flowbar { left: 6.5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
    .ct-flowbar i { left: -.5px; top: 0; width: 2px; height: 100%; transform-origin: 50% 0; }
    html.js .ct-flowbar i { transform: scaleY(0); }
    html.js .ct-stepwrap.is-in .ct-flowbar i { transform: scaleY(1); }
    .ct-steps { grid-template-columns: 1fr; }
    .ct-step, .ct-step + .ct-step { padding: 0 0 44px 44px; border-left: 0; }
    .ct-step:last-child { padding-bottom: 4px; }
    .ct-step__node, .ct-step:first-child .ct-step__node { top: 0; left: 0; }
    .ct-step__ico { width: 44px; height: 44px; margin-bottom: 18px; }
    .ct-links__list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .c-page-contact { --ct-pad: 20px; }
    .ct-br-d { display: none; }
    .ct-intake { padding-top: 56px; }
    .ct-kinetic { top: 14px; }
    .ct-card { border-radius: var(--r); }
    .ct-corner { width: 16px; height: 16px; }
    .ct-corner--tl, .ct-corner--bl { left: -8px; }
    .ct-corner--tr, .ct-corner--br { right: -8px; }
    .ct-corner--tl, .ct-corner--tr { top: -8px; }
    .ct-corner--bl, .ct-corner--br { bottom: -8px; }
    /* 등장 전 바깥 이동 폭을 거터(20px) 안으로: 16px 이면 우측 코너가 뷰포트를 넘어 가로 스크롤이 생긴다 */
    html.js .ct-card:not(.is-in) .ct-corner--tl { transform: translate(-6px, -6px); }
    html.js .ct-card:not(.is-in) .ct-corner--tr { transform: translate(6px, -6px); }
    html.js .ct-card:not(.is-in) .ct-corner--bl { transform: translate(-6px, 6px); }
    html.js .ct-card:not(.is-in) .ct-corner--br { transform: translate(6px, 6px); }
    /* 세로로 긴 모바일 다크 섹션: 헥스 텍스처를 우상단 모서리로 좁혀 본문 뒤로 지나가지 않게 */
    .ct-after__field { height: 520px; opacity: .2; -webkit-mask-image: radial-gradient(ellipse 70% 45% at 100% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 45% at 100% 0%, #000 10%, transparent 75%); }
    .ct-card__head { padding-top: 15px; padding-bottom: 15px; }
    .ct-progress__k { display: none; }
    .ct-progress__bar { width: 64px; }
    .ct-row { grid-template-columns: 1fr; }
    .ct-row > .ct-field + .ct-field { margin-top: 22px; }
    .ct-line__num { font-size: clamp(32px, 10vw, 44px); }
    .ct-line .c-arrow { width: 42px; height: 42px; }
    .ct-ext__item + .ct-ext__item { padding-left: 18px; }
    .ct-ext__no { font-size: 23px; }
    .ct-meta__row { grid-template-columns: 1fr; gap: 8px; }
    .ct-meta__k { padding-top: 0; }
    .ct-term { grid-template-columns: 1fr; gap: 2px; }
    .ct-terms { padding: 2px 16px 4px; }
    .ct-consent__head { padding: 12px 16px; }
    .ct-submit__btn { height: 62px; padding: 0 22px 0 24px; font-size: 16px; }
    .ct-submit__sending { font-size: 14px; gap: 10px; }
    .ct-done__stamp { position: relative; right: auto; top: auto; align-self: flex-start; float: right; margin: 6px 0 0 12px; }
    .ct-receipt > div { grid-template-columns: 100px minmax(0, 1fr); }
    .ct-done__actions .c-btn { flex: 1 1 auto; }
    .ct-again { margin-left: 0; }
    .ct-links__item { padding: 22px 22px 24px; }
    .ct-links__ico { margin-bottom: 18px; }
}
@media (max-width: 560px) {
    .ct-types { grid-template-columns: 1fr; gap: 10px; }
    .ct-type__box { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 14px; padding: 14px 14px 16px 16px; --cx: 92%; --cy: 30%; }
    .ct-type__top { display: contents; }
    .ct-type__code { grid-column: 2; grid-row: 1; }
    .ct-type__tick { grid-column: 3; grid-row: 1; }
    .ct-type__icon { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 34px; height: 34px; }
    .ct-type__text { grid-column: 2 / 4; grid-row: 2; align-self: start; }
    .ct-type__desc { font-size: 13.5px; }
    .ct-type:hover .ct-type__box { transform: none; }
    .ct-chip span { padding: 0 14px 0 12px; font-size: 14px; }
}

/* 모션 축소 */
@media (prefers-reduced-motion: reduce) {
    .ct-done > *, .ct-done > .ct-done__stamp { opacity: 1 !important; transform: none !important; }
    .ct-done > .ct-done__stamp { transform: rotate(-9deg) !important; }
    .ct-card__body.is-leaving { transition: none; }
    .ct-kinetic span { will-change: auto; }
}