/* 사이트 기본 모듈: 문의(/contact)와 접수 완료(/contact/sent) 화면 조합. 토큰과 키트 클래스만 써요.
   app/assets/stylesheets/application.css 에 @import url("screens/site_contact.css"); 한 줄 */
/* ══ 문의 ═══════════════════════════════════════════════
   넓은 화면: 왼쪽 어두운 소개(붙어 따라옴) + 오른쪽 밝은 폼. 바깥 여백은 컨테이너 선에 맞춘다. */
.site-contact{display:grid}
.site-contact__intro{position:relative;overflow:hidden;padding:var(--s-48) var(--s-20) var(--s-56)}
.site-contact__intro-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}
.site-contact__title{margin:0;color:var(--ink)}
.site-contact__lede{margin:var(--s-24) 0 0;max-width:30rem;color:var(--ink-body);font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh);word-break:keep-all}
.site-contact__steps{display:grid;gap:var(--s-10);margin:var(--s-40) 0 0;padding:0;list-style:none;color:var(--ink-body)}
/* 바로 연락하기(전화·메일): 진행 순서 아래, 선 하나로 나눈다 */
.site-contact__direct{display:grid;gap:var(--s-8);margin:var(--s-32) 0 0;padding-top:var(--s-24);border-top:1px solid var(--line);max-width:30rem}
.site-contact__direct div{display:flex;align-items:center;gap:var(--s-16)}
.site-contact__direct dt{width:2.5rem;color:var(--ink-muted);font-size:var(--t-body-sm)}
.site-contact__direct dd{margin:0}
.site-contact__direct a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
@media (hover:hover){.site-contact__direct a:hover{text-decoration:underline;text-underline-offset:3px}}
.site-contact__steps li{display:flex;align-items:center;gap:var(--s-12);font-weight:500}
.site-contact__steps span{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line-strong);font-size:var(--t-caption);font-weight:700;color:var(--accent-text)}
.site-contact__card{padding:var(--s-48) var(--s-20) var(--s-80)}
.site-contact__form{max-width:640px}
.site-contact__row{display:grid;gap:inherit}
.site-contact__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.site-contact__consent{display:flex;flex-direction:column;gap:var(--s-8);padding:var(--s-16);border-radius:var(--r-md);background:var(--surface-alt)}
.site-contact__consent-note{margin:0;color:var(--ink-muted);font-size:var(--t-caption);line-height:var(--t-caption-lh)}
.site-contact__consent-note a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
@media (min-width:768px){
  .site-contact__intro{padding-inline:var(--s-32)}.site-contact__card{padding-inline:var(--s-32)}
  .site-contact__row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .site-contact{grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:calc(var(--fx-vh,100svh) - var(--nav-h))}
  .site-contact__intro{padding:var(--s-80) var(--s-56) var(--s-80) max(40px,calc((100vw - var(--w-wide)) / 2))}
  .site-contact__intro-in{position:sticky;top:calc(var(--nav-h) + var(--s-48))}
  .site-contact__card{padding:var(--s-80) max(40px,calc((100vw - var(--w-wide)) / 2)) var(--s-96) var(--s-80)}
}

/* 접수 완료 */
.site-sent{position:relative;overflow:hidden;display:grid;align-items:center;min-height:max(560px,var(--fx-vh,100svh));padding:calc(var(--nav-h) + var(--s-64)) 0 var(--s-80)}
.site-sent__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.site-sent__mark{display:grid;place-items:center;width:72px;height:72px;margin-bottom:var(--s-32);border-radius:var(--r-lg);background:var(--accent);color:var(--accent-ink)}
.site-sent__title{margin:0;color:var(--ink)}
.site-sent__lede{margin:var(--s-20) 0 0;max-width:32rem;color:var(--ink-body);word-break:keep-all}
.site-sent__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-12) var(--s-16);margin-top:var(--s-40)}
@media (min-width:640px){.site-sent__actions{column-gap:var(--s-32)}} /* 주버튼 + 화살표 링크: 히어로·권유 줄과 같은 간격(키트 18) */
.site-contact-errors__list{display:grid;margin:var(--s-4) 0 0;padding:0;list-style:none}
.site-contact-errors__list a{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-8);padding-block:var(--s-10);color:var(--bad-text);text-decoration:none}
.site-contact-errors__list b{font-weight:650;text-decoration:underline;text-underline-offset:3px}
.site-contact-errors__list span{color:var(--ink-body)}
@media (hover:hover){.site-contact-errors__list a:hover b{text-decoration-thickness:2px}}