/* site.css — 공개 첫인상(R12c-2): 소개 화면(익명 `/`, templates/landing.html)과
   로그인 배치(templates/login.html). 시각 정본은 docs/design/stage2-direction.html
   화면 G·A 다.

   platform.css 는 건드리지 않는다 — 이 파일은 **배치만** 더한다(inquiry.css ·
   answer.css 와 같은 규율). 색은 :root 토큰만 쓴다. 토큰 밖의 값은 로그인 왼쪽
   파란 면 위의 반투명 흰색 하나(아이콘 상자 바탕)뿐이고, 글자가 아니다.
   44px 는 `--touch` 하나에서 온다. 넓은 화면(≥900)과 좁은 화면의 경계는 앱과
   같다(platform.css 의 max-width:899.98px). */

/* ═══ 공통 — 공개 화면의 포커스 고리(F-4) ═══════════════════════════════ */
.site a:focus-visible,.site .btn:focus-visible,
.lg a:focus-visible,.lg .btn:focus-visible{outline:none;box-shadow:var(--focus)}
.site .btn,.lg .btn{justify-content:center;font-size:var(--fs-body);min-height:40px;
  padding:0 var(--sp-4)}
.site .btn-lg,.lg .btn-lg{min-height:48px;font-size:var(--fs-lead);padding:0 var(--sp-5)}
.site .btn-ghost{color:var(--text)}
.site .btn-ghost:hover{color:var(--text)}
.site .btn:not(.btn-ghost),.site .btn:not(.btn-ghost):hover,
.lg .btn,.lg .btn:hover{color:var(--on-primary)}

/* 공개 화면에는 탭바가 없다 — 좁은 화면의 body 바닥 패딩(탭바 자리, platform.css)
   을 걷는다. 걷지 않으면 바닥 링크 밑에 바탕색 띠가 탭바 높이만큼 남는다. */
@media(max-width:899.98px){body.site,body.lg-page{padding-bottom:0}}
body.lg-page{background:var(--surface)}

/* ═══ G. 소개 화면 ═══════════════════════════════════════════════════════ */
body.site{background:var(--surface);color:var(--text)}
.site h1,.site h2,.site h3,.site p{word-break:keep-all}

/* 머리 — [로그인] + (열렸을 때) [도입 문의]. 히어로에는 버튼을 두지 않는다
   (원칙 5 · 입구 하나). 좁은 화면에서는 머리에 [로그인] 하나.
   넓은 화면(1920 등)에서도 머리의 양 끝이 본문 폭(1152)에 맞춰 선다 — 1280 에서는
   목업 그대로 40px, 그보다 넓으면 본문 가장자리보다 24px 바깥. */
.site-head{display:flex;align-items:center;gap:var(--sp-2);height:64px;
  padding:0 max(40px, calc((100% - 1200px) / 2));border-bottom:1px solid var(--line);
  background:var(--surface)}
.site-sp{flex:1}
.site-brand{display:inline-flex;align-items:center;gap:9px;min-height:var(--touch);
  color:var(--text)}
.site-brand:hover{color:var(--text)}
.site-brand .brand-mark{width:28px;height:28px}
.site-brand .wordmark{font-size:20px}

.site-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;
  align-items:center;max-width:1280px;margin:0 auto;padding:72px 64px 88px}
.site-kick{font-size:var(--fs-body);font-weight:600;color:var(--primary)}
.site-hero h1{margin-top:var(--sp-4);font-size:44px;font-weight:700;
  letter-spacing:-1.4px;line-height:1.3;text-wrap:balance}
.site-sub{margin-top:18px;font-size:19px;line-height:1.6;color:var(--sub)}
.site-note{margin-top:18px;font-size:var(--fs-sub);line-height:1.6;color:var(--muted)}
.site-hero-cta{margin-top:var(--sp-6)}

/* 답변 화면 예시(목업 G-1 의 한 컷) — 그림이다. 누를 것이 없다: 버튼 모양의
   글자는 <span> 이고 초점을 받지 않는다. 떠 있는 창이라 그림자 한 벌(F-2). */
.site-shot{margin:0;min-width:0}
.site-win{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);overflow:hidden}
.site-win-bar{display:flex;align-items:center;gap:var(--sp-2);height:44px;
  padding:0 var(--sp-4);border-bottom:1px solid var(--line);font-size:var(--fs-sub);
  font-weight:600;color:var(--sub)}
.site-win-bar .ic{color:var(--primary)}
.site-win-tag{margin-left:auto;font-size:var(--fs-cap);font-weight:600;
  color:var(--muted)}
.site-win-body{padding:18px 22px 20px}
.site-q{display:inline-block;max-width:100%;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-sm);background:var(--surface-2);font-size:var(--fs-body);
  line-height:1.55;color:var(--text)}
.site-meta{display:flex;align-items:center;gap:6px;margin:14px 0 6px;
  font-size:var(--fs-cap);font-weight:600;color:var(--sub)}
.site-meta .ic{color:var(--primary)}
.site-ans{font-size:var(--fs-lead);line-height:1.75;color:var(--text)}
.site-fn{display:inline-flex;align-items:center;justify-content:center;min-width:16px;
  height:16px;margin:0 1px 0 2px;padding:0 3px;border-radius:4px;
  background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:700;
  line-height:1;vertical-align:super;font-variant-numeric:tabular-nums}
.site-cites{margin-top:14px;border-top:1px solid var(--divider)}
.site-cites-h{display:flex;align-items:center;gap:6px;height:36px;font-size:var(--fs-cap);
  font-weight:600;color:var(--sub)}
.site-cites-h .ic{color:var(--primary)}
.site-cite{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 0;
  border-top:1px solid var(--divider)}
.site-no{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:20px;height:20px;border-radius:5px;background:var(--primary-soft);
  color:var(--primary);font-size:var(--fs-cap);font-weight:700;
  font-variant-numeric:tabular-nums}
.site-cite-t{flex:1;min-width:0;font-size:var(--fs-body);font-weight:600;
  color:var(--text)}
.site-go{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:var(--fs-cap);
  font-weight:600;color:var(--primary)}
.site-acts{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--divider)}
.site-act{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--sp-3);
  border:1px solid var(--primary);border-radius:var(--radius-sm);font-size:var(--fs-sub);
  font-weight:600;color:var(--primary)}
.site-act-plain{margin-left:auto;border-color:transparent;color:var(--sub)}

/* 띠 — 흰 면과 바탕 면이 번갈아 선다. 안쪽 폭은 1152(1280 − 64×2). */
.site-band{padding:80px 64px}
.site-band-alt{background:var(--bg);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.site-in{max-width:1152px;margin:0 auto}
.site-band-h{max-width:720px}
.site-band-h h2{font-size:30px;font-weight:700;letter-spacing:-.8px;line-height:1.35}
.site-band-h p{margin-top:10px;font-size:17px;line-height:1.65;color:var(--sub);
  text-wrap:pretty}

/* 두 기둥 — **같은 카드·같은 활자**(§9.1 원칙). 어느 쪽도 곁가지가 아니다. */
.site-pillars{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.site-pillar{display:flex;flex-direction:column;min-width:0;padding:32px 32px 28px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.site-pi{display:inline-flex;align-items:center;justify-content:center;width:48px;
  height:48px;border-radius:10px;background:var(--primary-soft);color:var(--primary)}
.site-pillar h3{margin-top:18px;font-size:24px;font-weight:700;letter-spacing:-.5px;
  line-height:1.35}
.site-pillar h3 small{display:block;margin-top:4px;font-size:17px;font-weight:600;
  letter-spacing:-.2px;color:var(--sub)}
.site-pillar-p{margin-top:12px;font-size:var(--fs-lead);line-height:1.7;color:var(--sub)}
.site-checks{margin-top:18px;list-style:none;display:flex;flex-direction:column;gap:10px}
.site-checks li{display:flex;gap:10px;font-size:var(--fs-lead);line-height:1.55;
  color:var(--text)}
.site-checks .ic{margin-top:2px;color:var(--primary)}
.site-mini{margin-top:26px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface)}
.site-mini-li{display:flex;align-items:center;gap:var(--sp-3);padding:10px 14px}
.site-mini-li + .site-mini-li{border-top:1px solid var(--divider)}
.site-mini-li > div{flex:1;min-width:0}
.site-mini-li b{display:block;font-size:var(--fs-body);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-mini-li span{display:flex;align-items:center;gap:6px;margin-top:2px;
  font-size:var(--fs-cap);color:var(--muted);font-variant-numeric:tabular-nums}
.site-mini-li .ic{color:var(--muted)}
.site-tag{font-style:normal;font-weight:700;padding:1px 6px;border-radius:var(--radius-badge);
  background:var(--st-must-bg);color:var(--st-must-fg)}
.site-cap{margin-top:14px;font-size:var(--fs-cap);line-height:1.6;color:var(--muted)}

/* 다리 — 두 기둥의 가운데에서 내려온 선이 한 알약에서 만난다(목업 G-1). */
.site-bridge{position:relative;height:112px;color:var(--primary)}
.site-bridge-lines{position:absolute;inset:0;width:100%;height:100%}
.site-bridge-pill{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px 0 10px;
  border-radius:28px;background:var(--surface);border:1px solid var(--primary);
  font-size:17px;white-space:nowrap;color:var(--text)}
.site-bridge-pill b{font-weight:600}
.site-bridge-pill em{font-style:normal;color:var(--sub)}
.site-bi{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:50%;background:var(--primary);color:var(--on-primary)}

/* 보안 — 경보색 없음(빨강은 진짜 경보에만). 문장은 코드로 참인 것만. */
.site-secure{margin-top:32px;list-style:none;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.site-secure li{padding:24px 24px 4px 0;min-width:0}
.site-secure li + li{padding-left:24px;border-left:1px solid var(--divider)}
.site-secure .ic{color:var(--primary)}
.site-secure b{display:block;margin-top:14px;font-size:16px;font-weight:600;line-height:1.5}
.site-secure span{display:block;margin-top:6px;font-size:var(--fs-body);line-height:1.65;
  color:var(--sub)}

/* 도입 세 단계 + 끝의 [도입 문의] */
.site-steps{margin-top:36px;list-style:none;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.site-step{position:relative;min-width:0;padding:24px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius)}
.site-step + .site-step::before{content:"";position:absolute;left:-24px;top:40px;
  width:24px;border-top:1.5px solid var(--line-strong)}
.site-step-no{display:inline-flex;align-items:center;justify-content:center;width:32px;
  height:32px;border-radius:50%;border:1.5px solid var(--primary);color:var(--primary);
  font-size:var(--fs-lead);font-weight:700;font-variant-numeric:tabular-nums}
.site-step h3{margin-top:14px;font-size:18px;font-weight:700;letter-spacing:-.3px}
.site-step p{margin-top:8px;font-size:var(--fs-body);line-height:1.7;color:var(--sub)}
.site-step .site-who{margin-top:12px;font-size:var(--fs-cap);font-weight:600;
  color:var(--muted)}
.site-closing{display:flex;align-items:center;gap:var(--sp-4);margin-top:40px;
  padding:24px 28px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius)}
.site-closing-t{flex:1;min-width:0}
.site-closing-t b{display:block;font-size:17px;font-weight:600}
.site-closing-t span{display:block;margin-top:2px;font-size:var(--fs-body);
  line-height:1.6;color:var(--sub)}
.site-soon{flex:none;font-size:var(--fs-lead);font-weight:600;color:var(--text)}

/* 바닥 — 법정 게시(약관법 제3조 · 처리방침은 굵게 구분) */
.site-foot{display:flex;align-items:center;gap:var(--sp-4);max-width:1280px;
  margin:0 auto;padding:28px 64px 32px;font-size:var(--fs-sub);color:var(--sub)}
.site-brand-foot .brand-mark{width:22px;height:22px}
.site-brand-foot .wordmark{font-size:16px}
.site-legal{display:flex;flex-wrap:wrap;gap:4px}
.site-legal a{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 8px;
  color:var(--sub)}
.site-legal a:hover{color:var(--text)}
.site-legal b{font-weight:700;color:var(--text)}
.site-cp{margin-left:auto;color:var(--muted)}

.site-only-m{display:none}

@media(min-width:900px) and (max-width:1199.98px){
  /* 900~1199: 히어로 첫 줄이 세 줄로 꺾이지 않게(1024 실측 3줄 → 2줄) */
  .site-hero{gap:40px;padding:56px 40px 72px}
  .site-hero h1{font-size:32px}
  .site-secure{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-secure li:nth-child(3){padding-left:0;border-left:0}
  .site-secure li:nth-child(n+3){border-top:1px solid var(--divider)}
}
@media(min-width:1024px) and (max-width:1199.98px){
  .site-hero h1{font-size:38px}
}

@media(max-width:899.98px){
  .site-only-d{display:none}
  .site-only-m{display:block}
  .site .btn{min-height:var(--touch)}            /* 손가락 타깃(원칙 8) */
  .site-head{height:56px;padding:0 8px 0 16px}
  .site-hero{display:block;padding:36px 20px 40px}
  .site-hero h1{font-size:29px;letter-spacing:-.8px;line-height:1.38}
  .site-sub{font-size:16px}
  .site-hero-cta .btn{display:flex;width:100%}
  .site-shot{margin-top:32px}
  .site-win-body{padding:14px 14px 16px}
  .site-act,.site-go{height:auto}
  .site-band{padding:48px 20px}
  .site-band-h h2{font-size:23px;letter-spacing:-.5px}
  .site-band-h p{font-size:var(--fs-lead)}
  .site-pillars{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:24px}
  .site-pillar{padding:24px 20px 20px}
  .site-pillar h3{font-size:21px}
  .site-pillar h3 small{font-size:var(--fs-lead)}
  /* 다리 — 좁은 화면에서는 선 대신 두 카드 바로 밑의 한 장(목업 G-2) */
  .site-bridge{height:auto;margin-top:16px}
  .site-bridge-lines{display:none}
  .site-bridge-pill{position:static;transform:none;display:flex;align-items:flex-start;
    height:auto;padding:16px;border-radius:var(--radius);white-space:normal;
    font-size:16px;line-height:1.5}
  .site-bridge-pill em{display:block;font-size:var(--fs-body);line-height:1.6}
  .site-secure{grid-template-columns:minmax(0,1fr);margin-top:20px}
  .site-secure li,.site-secure li + li{display:flex;gap:14px;align-items:flex-start;
    padding:18px 0;border-left:0;border-top:1px solid var(--divider)}
  .site-secure li:first-child{border-top:0}
  .site-secure b{margin-top:0;font-size:var(--fs-lead)}
  .site-secure span{font-size:var(--fs-sub)}
  .site-steps{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:20px}
  .site-step + .site-step::before{display:none}
  .site-closing{display:block;margin-top:24px;padding:20px}
  .site-closing .btn{display:flex;width:100%;margin-top:14px}
  .site-soon{margin-top:12px}
  .site-foot{display:block;padding:16px 12px 24px}
  .site-brand-foot{display:none}
  .site-cp{display:block;margin:4px 8px 0}
}

/* ═══ A. 로그인 — 왼쪽이 제품을 말하고, 오른쪽은 로그인만 한다 ═════════════
   DOM 순서 = 좁은 화면의 읽는 순서(머리 → 폼 → 두 기둥·보안 → 법정 링크).
   넓은 화면에서는 격자 영역으로 왼쪽 파란 면(머리·기둥·바닥글)과 오른쪽 흰 면
   (폼·법정 링크)에 나눠 앉힌다 — 같은 내용을 두 벌 두지 않는다. */
.lg{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;
  background:var(--surface)}
.lg-top{padding:24px 20px 0}
.lg-brand{display:inline-flex;align-items:center;gap:10px;min-height:var(--touch);
  color:var(--text)}
.lg-brand:hover{color:var(--text)}
.lg-brand .brand-mark{width:30px;height:30px}
.lg-brand .wordmark{font-size:21px}
.lg-top h1{margin-top:28px;font-size:23px;font-weight:700;letter-spacing:-.5px;
  line-height:1.42;word-break:keep-all;text-wrap:balance}
.lg-sub{margin-top:8px;font-size:var(--fs-lead);line-height:1.6;color:var(--sub);
  word-break:keep-all}
.lg-main{display:flex;flex-direction:column;padding:28px 20px 0}
.lg-form{width:100%}
.lg-form h2{font-size:20px;font-weight:700;letter-spacing:-.5px;line-height:1.3}
.lg-form .msg-err,.lg-form .msg-ok{margin:16px 0 0;font-size:var(--fs-sub)}
.lg-field{margin-top:20px}
.lg-form h2 + .lg-field,.lg-form .msg-err + .lg-field,.lg-form .msg-ok + .lg-field{
  margin-top:24px}
.lg-field label{display:block;margin-bottom:6px;font-size:var(--fs-sub);font-weight:600;
  color:var(--sub)}
/* 16px — iOS 는 16px 보다 작은 입력칸에 초점이 가면 화면을 확대한다. */
.lg-field .input{display:block;width:100%;min-height:48px;font-size:16px}
.lg-submit{display:flex;width:100%;margin-top:24px}
.lg-links{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:10px}
.lg-links a,.lg-alt a{display:inline-flex;align-items:center;min-height:var(--touch);
  font-size:var(--fs-sub);font-weight:600;color:var(--primary)}
.lg-alt{margin-top:18px;padding-top:14px;border-top:1px solid var(--divider);
  font-size:var(--fs-sub);line-height:1.7;color:var(--sub);word-break:keep-all}
.lg-alt p + p{margin-top:2px}
.lg-points{list-style:none;margin:24px 20px 0;padding-top:4px;
  border-top:1px solid var(--divider)}
.lg-points li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;
  font-size:var(--fs-sub);line-height:1.55;color:var(--sub);word-break:keep-all}
.lg-pbox{display:inline-flex;flex:none;color:var(--primary)}
.lg-points b{color:var(--text);font-weight:600}
.lg-points span span{display:block}
.lg-sfoot{display:none}
.lg-legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;padding:16px 12px 16px;
  font-size:var(--fs-cap);color:var(--muted)}
.lg-legal a,.lg-legal span{display:inline-flex;align-items:center;min-height:var(--touch);
  padding:0 8px}
.lg-legal a{color:var(--sub)}
.lg-legal b{font-weight:700;color:var(--text)}

@media(min-width:900px){
  .lg{grid-template-columns:min(560px,44vw) minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"top main" "points main" "sfoot legal"}
  .lg-top,.lg-points,.lg-sfoot{background:var(--primary);color:var(--on-primary)}
  .lg-top{grid-area:top;padding:44px 56px 0}
  .lg-brand .brand-mark{width:34px;height:34px}
  .lg-brand .wordmark{font-size:24px}
  /* 마크의 파란 네모는 같은 파란 면에 녹는다 — 흰 문서·말풍선만 남는 녹아웃. */
  .lg-top .wordmark .fc,.lg-top .wordmark .brief{color:var(--on-primary)}
  .lg-top h1{margin-top:88px;font-size:32px;letter-spacing:-.8px;line-height:1.38}
  .lg-sub{margin-top:14px;font-size:16px;color:var(--on-primary-2)}
  .lg-main{grid-area:main;align-items:center;justify-content:center;padding:48px}
  .lg-form{max-width:360px}
  .lg-form h2{font-size:26px}
  .lg-field .input{min-height:44px;font-size:var(--fs-lead)}
  .lg-points{grid-area:points;margin:0;padding:44px 56px 0;border-top:0;
    display:flex;flex-direction:column;gap:22px}
  .lg-points li{gap:14px;padding:0;font-size:var(--fs-body);line-height:1.6;
    color:var(--on-primary-2)}
  .lg-points b{display:block;font-size:var(--fs-lead);line-height:1.4;
    color:var(--on-primary)}
  .lg-points span span{margin-top:3px}
  .lg-pbox{align-items:center;justify-content:center;width:40px;height:40px;
    border-radius:8px;background:rgba(255,255,255,.12);color:var(--on-primary)}
  .lg-sfoot{display:block;grid-area:sfoot;padding:24px 56px 40px;font-size:var(--fs-cap);
    color:var(--on-primary-2)}
  .lg-legal{grid-area:legal;justify-content:center;padding:0 0 12px}
}