/* /test/contact 전용 (2026-09-23). 클래스 접두 contact- — 공용 ark2026.css 토큰만 쓴다. */

/* ① 히어로 */
.contact-hero h1{font-size:clamp(30px,4.6vw,50px)}
.contact-hero .trust{margin-top:22px}
.contact-tel{position:relative;display:inline-grid;gap:2px;margin-top:26px;text-decoration:none;color:#fff;padding:14px 20px 16px 18px;border-radius:18px;border:1px solid rgba(195,211,236,.18);background:linear-gradient(135deg,rgba(52,123,247,.18),rgba(52,123,247,0) 70%);max-width:100%}
.contact-tel-k{font-size:13px;color:var(--frost);letter-spacing:.04em}
.contact-tel-n{font-size:clamp(46px,11vw,84px);line-height:1;letter-spacing:-.03em;font-weight:500;white-space:nowrap}
.contact-tel-n i{font-style:normal;color:var(--signal);margin:0 .02em}
.contact-tel:hover{border-color:rgba(52,123,247,.6)}

.contact-routes{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:620px){.contact-routes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.contact-routes li{display:grid;gap:6px;align-content:start;min-width:0}
.contact-route{display:grid;gap:4px;text-align:left;width:100%;min-height:52px;padding:14px 16px;border-radius:14px;border:1px solid rgba(195,211,236,.2);background:rgba(15,30,51,.6);color:var(--on-ink);text-decoration:none;font:inherit;cursor:pointer;transition:border-color .2s ease,transform .2s ease}
.contact-route:hover{border-color:var(--signal);transform:translateY(-2px)}
.contact-route b{font-size:16px;color:#fff;font-weight:700}
.contact-route small{font-size:13px;color:var(--on-ink-mute);line-height:1.45;word-break:keep-all}
.contact-route-n{font-size:12px;color:var(--signal);letter-spacing:.08em}
.contact-kko{justify-self:start;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;background:#FEE500;color:#191600;font-size:13px;font-weight:700;text-decoration:none}

/* 시그니처: 공개 해결 후기 고리 */
.contact-ring{margin:0;display:grid;gap:14px}
.contact-ring-stage{position:relative;width:100%;max-width:480px;margin:0 auto;aspect-ratio:1/1}
#contactRing{display:block;width:100%;height:100%}
.contact-ring-core{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.contact-ring-k{font-size:clamp(34px,7vw,52px);line-height:1;color:#fff}
.contact-ring-l{font-size:15px;font-weight:600;color:var(--on-ink);text-align:center;word-break:keep-all}   /* 가운데 총수를 뺀 뒤(2026-10-14) 라벨만 — 한 단계 키움 */
.contact-ring figcaption{display:grid;gap:6px;font-size:13.5px;color:var(--on-ink-mute);max-width:480px;margin:0 auto;width:100%}
.contact-ring figcaption b{color:var(--frost);font-weight:500}
.contact-ring figcaption a{color:var(--frost)}
.contact-tick{display:flex;gap:10px;align-items:flex-start;min-height:44px;border-top:1px dashed rgba(195,211,236,.18);padding-top:10px;margin-top:4px}
.contact-tick .mono{color:var(--frost);white-space:nowrap}
.contact-tick a{color:var(--on-ink)!important;text-decoration:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.contact-tick a:hover{text-decoration:underline}

/* ② 폼 */
.contact-formbox{display:grid;gap:10px;min-width:0}
.contact-lock{display:flex;gap:10px;align-items:center;margin-top:18px!important;font-size:14px}
.contact-lock-ic{flex:0 0 auto;width:14px;height:12px;border:2px solid var(--frost);border-radius:3px;position:relative;margin-top:4px}
.contact-lock-ic::before{content:"";position:absolute;left:1px;top:-9px;width:8px;height:8px;border:2px solid var(--frost);border-bottom:0;border-radius:6px 6px 0 0}
.contact-privacy{border:1px solid rgba(195,211,236,.18);border-radius:14px;padding:12px 16px;background:rgba(15,30,51,.5)}
.contact-privacy summary{font-size:14px;color:var(--on-ink);min-height:24px}   /* 눌리는 높이 23→24px(2026-10-07 전수 점검) */
.contact-privacy div{display:grid;gap:8px;margin-top:10px;max-height:260px;overflow:auto;padding-right:6px}
.contact-privacy h3{font-size:13.5px;color:#fff;margin-top:6px}
.contact-privacy p{font-size:13px!important;color:var(--on-ink-mute)!important;margin:0!important;word-break:keep-all;overflow-wrap:anywhere}

/* ③ 진행 흐름 — 보일 때 선이 01→04 로 차오른다 */
.contact-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative}
@media (min-width:860px){.contact-steps{grid-template-columns:repeat(4,1fr)}}
.contact-steps::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line)}
.contact-steps::after{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--signal);transform-origin:top;transform:scaleY(var(--contact-p,1));transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
@media (min-width:860px){
  .contact-steps::before,.contact-steps::after{left:24px;right:calc((100% - 42px) / 4 - 24px);top:23px;bottom:auto;width:auto;height:2px}
  .contact-steps::after{transform-origin:left;transform:scaleX(var(--contact-p,1))}
}
.contact-step{position:relative;z-index:1;display:grid;grid-template-columns:48px 1fr;gap:4px 14px;align-items:start}
@media (min-width:860px){.contact-step{grid-template-columns:1fr;gap:12px}}
.contact-step-n{grid-row:span 2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);color:var(--navy);font-size:14px;transition:background .4s ease,border-color .4s ease,color .4s ease}
.contact-step.on .contact-step-n{background:var(--signal);border-color:var(--signal);color:#fff}
.contact-step h3{font-size:20px;padding-top:10px}
@media (min-width:860px){.contact-step h3{padding-top:0}}
.contact-step p{color:var(--mute);font-size:15px}

/* ④ 비밀 보장 */
.contact-secret-grid{display:grid;gap:1px;background:rgba(195,211,236,.12);border:1px solid rgba(195,211,236,.12);border-radius:18px;overflow:hidden}
@media (min-width:860px){.contact-secret-grid{grid-template-columns:repeat(3,1fr)}}
.contact-secret-cell{background:var(--ink);padding:24px 22px;display:grid;gap:8px;align-content:start}
.contact-secret-k{font-size:12px;color:var(--signal);letter-spacing:.08em}
.contact-secret-cell h3{font-size:22px;color:#fff}
.contact-secret-cell p{color:var(--on-ink-mute);font-size:15px}
.contact-certs{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.contact-certs li{font-size:13px;color:var(--frost);padding:6px 10px;border:1px solid rgba(195,211,236,.18);border-radius:8px;word-break:keep-all}
.contact-secret-foot{margin-top:20px;font-size:14px}
.contact-secret-foot a{color:var(--frost)}

/* ⑤ 오시는 길 */
.contact-loc-grid{display:grid;gap:28px}
@media (min-width:900px){.contact-loc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.contact-loc .sec-head{margin-bottom:20px}
.contact-dl{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.contact-dl div{display:grid;grid-template-columns:5.5em 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.contact-dl dt{font-size:13px;color:var(--mute);padding-top:2px}
.contact-dl dd{margin:0;font-size:16px;word-break:keep-all;min-width:0;overflow-wrap:anywhere}
.contact-dl a{color:var(--navy);text-decoration:none}
.contact-dl a:hover{color:var(--signal)}
.contact-loc .btn-line{color:var(--navy)}
.contact-transit{background:#fff}
.contact-transit h3{font-size:18px}
.contact-transit-row{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 0;border-top:1px dashed var(--line)}
.contact-transit-ic{width:36px;height:36px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:13px}
.contact-transit-row b{font-size:15px}
.contact-transit-row p{color:var(--mute);font-size:14.5px;margin-top:2px}

/* ⑥ FAQ */
.contact-faq{min-width:0}

@media (prefers-reduced-motion:reduce){.contact-steps::after{transition:none}}

/* 연락처 표의 전화·메일 링크 누름 영역(높이 19px → 31px, 2026-10-01 전면 평가) — 보이는 모양은 그대로 */
@media (max-width:899px){.contact-tick a{padding:1px 0}   /* 2줄 말줄임 상자(overflow:hidden)는 가상 요소 확장이 잘려 효력 0(GPT 심사 F02, hit-test 실측) — 22.3→24.3px */
.contact dd a,dd a.mono,.contact-ring figcaption a,.faq-grid .sec-head p>a{position:relative}.contact dd a::after,dd a.mono::after,.contact-ring figcaption a::after,.faq-grid .sec-head p>a::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}}   /* 2026-10-07 전수 점검: 후기 띠 두 링크(22px)·FAQ 머리 링크(17px)도 같은 확장(위아래 이웃 컨트롤 0 실측) */
/* 진행 4단계: 모바일 2×2(홈 진행 과정과 같은 형태, 2026-10-07 전수 감사). 세로 연결선은 2열에선 뜻이 없어 숨긴다 */
@media (max-width:859px){.contact-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}.contact-steps::before,.contact-steps::after{display:none}.contact-step{grid-template-columns:1fr;gap:6px}.contact-step-n{grid-row:auto;width:36px;height:36px;font-size:12px}.contact-step h3{font-size:17px;padding-top:0}.contact-step p{font-size:13.5px}}