/* 키라 — 시각 사양은 design_handoff_kira_landing (hifi 확정본)이 정본이다.
 *
 * 색·타이포·간격·라운드·그림자는 핸드오프의 확정값이다. 임의로 바꾸지 않는다.
 * 랜딩(lp)은 핸드오프를 픽셀 단위로 옮긴 것이다. 진단 실행·진행 로그·진단서는
 * 2026-09-03 부터 어드민 안에 있다(report.css) — 같은 토큰으로 칠했고, 어드민이
 * 이 파일을 먼저 읽어 토큰·버튼·입력칸을 그대로 쓴다.
 *
 * ⚠ 다크 모드를 쓰지 않는다. 핸드오프가 단일 팔레트로 확정된 브랜드 디자인이고,
 *   진단서는 인쇄(PDF)로 나가므로 두 벌을 유지할 이유가 없다.
 */
:root{
  /* ── 브랜드 ── */
  --brand:#4B2BE8;
  --brand-hover:#3F21D0;
  --brand-tint:#ECEAFF;
  --brand-tint-hover:#E0DCFF;
  --brand-on-dark:#8F86FF;

  /* ── 글자 ── */
  --ink:#12123D;          /* 본문·제목 */
  --ink-2:#5B6479;        /* 보조 */
  --ink-3:#8B93A7;        /* 3차 */
  --ink-on-dark:#A8ADC4;
  --placeholder:#9AA3B8;

  /* ── 면 ── */
  --paper:#F4F6FA;        /* 페이지 바탕 */
  --surface:#FFFFFF;      /* 카드 */
  --surface-2:#F4F6FA;    /* 카드 안의 요약 박스 */
  --dark:#12123D;         /* 고지 카드 */
  --hairline:#EEF0F5;

  /* ── 판정색 ── */
  --absent:#E0264A;       --absent-bg:#FFE9EC;
  --present:#12123D;      --present-bg:#ECEAFF;
  --warn:#9A6A00;         --warn-bg:#FFF3D6;

  /* ── 라운드 ── */
  --r-card:22px; --r-ctl:16px; --r-chip:10px; --r-mark:11px;

  /* ── 그림자 ── */
  --sh-card:0 10px 30px rgba(18,18,61,.07);
  --sh-hero:0 18px 50px rgba(18,18,61,.10);

  --mono:ui-monospace,SFMono-Regular,Menlo,"IBM Plex Mono",monospace;

  /* ⚠ 구 스타일시트가 쓰던 이름. 정의가 없어 색이 죽어 있었다(2026-09-02 발견).
     지우지 않고 새 토큰으로 잇는다 — app.js가 만드는 마크업이 아직 참조한다. */
  --ink-1:var(--ink); --line:var(--hairline); --accent:var(--brand);
  --rule:var(--hairline); --rule-2:#DCE1EB;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:16px;line-height:1.65;letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;          /* 한글 줄바꿈은 어절 단위 */
}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
p{margin:0}
.num{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.045em}

/* ══ 레이아웃 ═══════════════════════════════════════════════════════════
   핸드오프는 모바일 390 / 데스크톱 1180 두 벌이다. 그 사이는 데스크톱
   그리드를 접어서 처리한다(§Interactions 반응형). */
.wrap{max-width:1180px;margin:0 auto}
.sec{padding:0 16px}                 /* 카드가 놓이는 섹션 */
.sec-t{padding:0 20px}               /* 텍스트만 있는 섹션 */
.stage{display:none}
.stage.on{display:block}

/* ══ 헤더 ═══════════════════════════════════════════════════════════════ */
.top{display:flex;align-items:center;gap:10px;padding:16px 20px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.mark i{
  width:32px;height:32px;border-radius:var(--r-mark);background:var(--brand);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:16px;font-style:normal;flex:none;
}
.mark b{font-size:19px;font-weight:800;letter-spacing:-.03em}
.top .nav{display:none}              /* 모바일은 내비 없음 — 핸드오프 7a */
.top .act{margin-left:auto;display:flex;gap:10px}

/* ══ 버튼 ═══════════════════════════════════════════════════════════════
   primary = .go / secondary = .ghost. 이름은 구 코드가 쓰던 것을 유지한다. */
.go,.ghost{
  font:inherit;font-weight:700;letter-spacing:-.02em;cursor:pointer;
  border:0;border-radius:var(--r-ctl);transition:background 120ms ease,color 120ms ease;
}
.go{background:var(--brand);color:#fff}
.go:hover{background:var(--brand-hover)}
.ghost{background:var(--brand-tint);color:var(--brand)}
.ghost:hover{background:var(--brand-tint-hover)}
.go:focus-visible,.ghost:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.go[disabled],.ghost[disabled]{opacity:.45;cursor:not-allowed}
.btn-sm{padding:10px 16px;font-size:15px}
.btn-lg{width:100%;padding:19px;font-size:18px}   /* 모바일 주요 버튼 = 높이 56px 이상 */

/* ══ 카드 ═══════════════════════════════════════════════════════════════ */
.cd{background:var(--surface);border-radius:var(--r-card)}
.cd.sh{box-shadow:var(--sh-card)}

/* ══ 히어로 ═════════════════════════════════════════════════════════════ */
.badge{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--brand-tint);color:var(--brand);
  font-size:14px;font-weight:700;padding:8px 13px;border-radius:999px;
}
/* 2026-09-28 대표: 메인 이미지(hero.jpg). 모바일은 카피 아래 사진, 데스크톱은 히어로 배경.
   object-position 은 원본의 인물(가로 40~65%)과 AI 답변 카드(70~92%)가 남도록 오른쪽으로 둔다. */
.hero{padding:22px 0 26px}
.hero-copy{padding:0 20px}
.hero .badge{margin-bottom:18px}
.hero h1{font-size:36px;line-height:1.28}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p{margin-top:16px;font-size:17px;line-height:1.65;color:var(--ink-2)}
.hero-cta{display:none}
.hero-img{
  display:block;width:calc(100% - 32px);height:auto;margin:22px 16px 0;
  aspect-ratio:4/3;object-fit:cover;object-position:70% 40%;
  border-radius:var(--r-card);box-shadow:var(--sh-card);background:#E8EEFB;
}

/* ══ 진단 입력 카드 ═════════════════════════════════════════════════════ */
.form-card{margin:0 16px;padding:22px 20px 24px}
.form-card h2{display:none}   /* 모바일 시안에는 이 제목이 없다 — 데스크톱에서만 뜬다 */

form{display:flex;flex-direction:column;gap:12px;margin:0}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:14px;font-weight:600;color:var(--ink-2)}
.field.bare label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
input,textarea{
  width:100%;font:inherit;font-size:17px;color:var(--ink);
  background:var(--surface-2);border:1.5px solid var(--surface-2);
  border-radius:var(--r-ctl);padding:16px 18px;outline:none;
  transition:border-color 120ms ease,background 120ms ease;
}
textarea{font-size:16px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input:focus,textarea:focus{border-color:var(--brand);background:var(--surface)}
.form-note{display:flex;gap:16px;margin-top:16px;font-size:14.5px;color:var(--ink-3)}
.fine{margin-top:14px;font-size:14.5px;color:var(--ink-3);line-height:1.6}

/* ══ 지표 ═══════════════════════════════════════════════════════════════ */
/* 확정 시안은 모바일 3칸이었는데 항목이 4개다(0원 추가). 390px 에서 4칸을
   가로로 늘어놓으면 「검색로봇 접근 검사」가 뭉개진다 — 2×2 로 접는다. */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:26px 16px 0}
.stats .cd{padding:18px 16px;text-align:center}
.stats .num{font-size:38px;color:var(--brand);line-height:1.1}
.stats span{display:block;font-size:14px;color:var(--ink-2);margin-top:4px;font-weight:600}

/* ══ 섹션 제목 ══════════════════════════════════════════════════════════ */
.h2{padding:44px 20px 0}
.h2 h2{font-size:27px;line-height:1.35}
.h2 .tagline{margin-top:8px;font-size:15px;color:var(--ink-3)}

/* ══ 예시 진단서 (랜딩) ═════════════════════════════════════════════════ */
.demo{margin:20px 16px 0;padding:24px 20px}
.demo-hd{display:flex;align-items:center;gap:10px}
.ico{display:flex;align-items:center;justify-content:center;border-radius:var(--r-ctl);flex:none}
.ico.bad{width:34px;height:34px;background:var(--absent-bg);border-radius:var(--r-ctl)}
.demo-hd .t{font-size:16px;font-weight:700;color:var(--absent)}
.demo-hd .ex{
  margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ink-3);
  background:var(--surface-2);padding:4px 9px;border-radius:8px;letter-spacing:0;
}
.demo-big{display:flex;align-items:baseline;gap:10px;margin-top:18px}
.demo-big .num{font-size:62px;line-height:1;color:var(--ink)}
.demo-big span{font-size:17px;color:var(--ink-2);font-weight:600;padding-bottom:6px}
.demo-rows{margin-top:18px}
.row{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--hairline)}
.row .ch{font-size:16px;font-weight:600;flex:1}
.row .qq{display:none}
.chip{
  font-size:14.5px;font-weight:700;color:var(--absent);background:var(--absent-bg);
  padding:5px 11px;border-radius:9px;flex:none;
}
.summary{
  margin-top:18px;background:var(--surface-2);border-radius:var(--r-ctl);padding:16px;
  font-size:15.5px;line-height:1.65;color:var(--ink-2);
}
.summary b{color:var(--ink)}

/* ══ 키라가 하는 일 ═════════════════════════════════════════════════════ */
.work{display:flex;flex-direction:column;gap:12px;padding:20px 16px 0}
.work .cd{padding:20px;display:flex;gap:16px;align-items:flex-start}
.work .ico{width:48px;height:48px;background:var(--brand-tint)}
.work b{display:block;font-size:18px;font-weight:700;margin-bottom:5px}
.work p{font-size:15.5px;line-height:1.65;color:var(--ink-2)}

/* ══ 고지 카드 — 보장하지 않는다는 말을 감추지 않는다(절대 규칙 10) ═════ */
.notice{margin:36px 16px 0;padding:24px 20px;background:var(--dark)}
.notice .lb{font-size:14px;font-weight:700;color:var(--brand-on-dark);margin-bottom:12px}
.notice .p1{font-size:16.5px;line-height:1.7;color:#fff;font-weight:600}
.notice .p2{font-size:15.5px;line-height:1.7;color:var(--ink-on-dark);margin-top:12px}

/* ══ 마무리 CTA ═════════════════════════════════════════════════════════ */

/* ══ 자주 묻는 질문 ══════════════════════════════════════════════════════
   <details> 를 쓴 이유가 있다. 접혀 있어도 답 본문이 DOM 에 그대로 남는다 —
   AI 크롤러와 검색엔진이 접힌 답까지 읽어간다. 스크립트로 접었다면 못 읽는다.
   ⚠ 이 섹션의 문답은 index.html 의 FAQPage JSON-LD 와 글자가 같아야 한다. */
.faqs{margin:16px 16px 0;padding:2px 20px}
.faqs details{border-top:1px solid var(--hairline)}
.faqs details:first-of-type{border-top:0}
.faqs summary{
  list-style:none;cursor:pointer;position:relative;padding:18px 30px 18px 0;
  font-size:16px;font-weight:700;letter-spacing:-.025em;color:var(--ink);
}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{
  content:"";position:absolute;right:7px;top:50%;width:8px;height:8px;
  border-right:2.2px solid var(--ink-3);border-bottom:2.2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform 140ms ease;
}
.faqs details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faqs summary:hover{color:var(--brand)}
.faqs summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.faqs p{margin:0;padding:0 4px 20px 0;font-size:15px;line-height:1.75;color:var(--ink-2)}

.cta2{padding:40px 20px 44px;text-align:center}
.cta2 h2{font-size:26px;line-height:1.4}
.cta2 p{margin-top:10px;font-size:16px;color:var(--ink-2)}
.cta2 .go{margin-top:20px}

/* ══ 푸터 ═══════════════════════════════════════════════════════════════ */
.legal{display:flex;flex-wrap:wrap;gap:18px;padding:0 20px 88px;font-size:14.5px;color:var(--ink-3)}
.legal a{color:var(--ink-3);text-decoration:none}
.legal a:hover{color:var(--ink-2)}

/* ══ 상태 표시 ══════════════════════════════════════════════════════════ */
.err{margin-top:14px;font-size:15px;line-height:1.6;color:var(--absent);font-weight:600}
.note{margin-top:14px;padding:14px 16px;background:var(--warn-bg);color:var(--warn);
  border-radius:var(--r-ctl);font-size:14.5px;line-height:1.6}
.ok{margin-top:16px;padding:16px 18px;background:var(--brand-tint);color:var(--brand);
  border-radius:var(--r-ctl);font-size:15.5px;font-weight:600;line-height:1.6}
.lead{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.lead input{flex:1;min-width:200px}
.lead button{
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;padding:14px 20px;
  border:0;border-radius:var(--r-ctl);background:var(--brand);color:#fff;
}

/* 동의 체크박스 — 필수와 선택을 묶지 않는다 */
.check{display:flex;gap:10px;align-items:flex-start;margin:4px 0;cursor:pointer}
.check input{width:auto;margin-top:3px;flex:none;accent-color:var(--brand);padding:0}
.check span{font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.check b{color:var(--brand);font-weight:700}
.check a{color:var(--ink-2)}

/* 「맨 위로」 버튼 — 지시서 #21(대표 10/23). totop.js 가 body 끝에 만든다.
   한 화면 이상 내려가면 .on. 랜딩·report-share·diagnosis-share 공용. */
.totop{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;
  width:48px;height:48px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(75,43,232,.88);color:#fff;box-shadow:0 4px 14px rgba(18,18,61,.18);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--brand-hover)}
.totop:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.totop svg{width:22px;height:22px}
@media print{.totop{display:none!important}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ══════════════════════════════════════════════════════════════════════
   ≥ 900px — 핸드오프 7b(1180px). 그 사이 구간은 그리드를 접는다.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  .sec,.sec-t{padding:0 40px}
  .top{padding:18px 40px;gap:12px}
  .mark b{margin-right:20px}
  .top .nav{display:flex;gap:22px;font-size:16px;font-weight:600}
  .top .nav a{color:var(--ink-2);text-decoration:none;transition:color 120ms ease}
  .top .nav a:hover{color:var(--brand)}
  .top .act .btn-sm{padding:11px 18px;font-size:15.5px}

  /* 히어로 — 이미지 카드 위에 카피(왼쪽), 그 아래 진단 입력 카드 (2026-09-28 대표: 메인 이미지)
     이전 2단(좌 카피 / 우 입력 카드)은 이미지의 인물·AI 답변 자리를 카드가 가려서 접었다.
     높이는 이미지 비율(1672×941 ≈ 1.78)을 따라가게 뷰포트에 맞춘다 — 그래야 잘리는 폭이 작다. */
  .lead-in{padding:24px 40px 0}
  .hero{
    position:relative;overflow:hidden;border-radius:var(--r-card);background:#E8EEFB;
    min-height:clamp(460px,52vw,620px);display:flex;align-items:center;
    padding:56px 56px;box-shadow:var(--sh-hero);
  }
  .hero-img{
    position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;
    object-fit:cover;object-position:right center;border-radius:0;box-shadow:none;
  }
  /* 글자 뒤 안전막 — 원본 왼쪽 그라데이션이 잘려도 카피는 읽힌다 */
  .hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(232,238,251,.96) 0%,rgba(232,238,251,.82) 34%,rgba(232,238,251,0) 62%);
  }
  .hero-copy{position:relative;z-index:1;padding:0;max-width:min(540px,52%)}
  .hero .badge{font-size:15px;padding:9px 15px;margin-bottom:22px}
  .hero h1{font-size:clamp(40px,4.4vw,52px);line-height:1.22}
  .hero p{margin-top:20px;font-size:19px;max-width:32ch}
  .hero-cta{display:flex;gap:12px;margin-top:32px}
  .hero-cta .go{padding:18px 30px;font-size:18px}
  .form-card{margin:36px auto 0;max-width:680px;padding:28px 28px 30px;box-shadow:var(--sh-hero)}
  .form-card h2{display:block;font-size:16px;font-weight:700;margin-bottom:16px;letter-spacing:-.02em}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:44px 40px 0}
  .stats .cd{padding:24px;text-align:left}
  .stats .num{font-size:42px}
  .stats span{font-size:15.5px;margin-top:6px}

  .h2{padding:64px 40px 0}
  .h2 h2{font-size:36px}

  /* 예시 진단서 — 좌 수치 / 우 채널표 */
  .demo-wrap{display:grid;grid-template-columns:400px 1fr;gap:14px;padding:24px 40px 0}
  .demo{margin:0;padding:28px 26px}
  .demo-big{margin-top:22px}
  .demo-big .num{font-size:88px}
  .demo-big span{font-size:18px;padding-bottom:10px}
  .row{gap:14px;padding:14px 0;border-top:0;border-bottom:1px solid var(--hairline)}
  .row:last-child{border-bottom:0}
  .row .ch{font-size:17px;font-weight:700;flex:none;width:110px}
  .row .qq{display:block;flex:1;font-size:16px;color:var(--ink-2)}
  .chip{font-size:15px;padding:6px 12px;border-radius:var(--r-chip)}
  .summary{padding:18px;font-size:16px}
  .demo-rows{margin-top:0}

  .work{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:24px 40px 0}
  .work .cd{padding:26px 24px;display:block}
  .work .ico{width:52px;height:52px;margin-bottom:16px}
  .work b{font-size:19px;margin-bottom:7px}
  .work p{font-size:16px}

  .faqs{margin:22px 40px 0;padding:6px 34px}
  .faqs summary{padding:22px 34px 22px 0;font-size:18px}
  .faqs p{padding:0 60px 24px 0;font-size:16.5px;line-height:1.8}
  .notice{
    margin:56px 40px 0;padding:36px 40px;
    display:flex;gap:48px;align-items:center;
  }
  .notice .col{flex:1}
  .notice .lb{font-size:15px}
  .notice .p1{font-size:22px;line-height:1.55;font-weight:700}
  .notice .p2{flex:1;margin-top:0;font-size:16.5px;line-height:1.75}

  .cta2{padding:56px 40px 56px}
  .cta2 h2{font-size:34px}
  .cta2 p{margin-top:12px;font-size:18px}
  .cta2 .go{width:auto;padding:20px 42px;font-size:19px;margin-top:24px}

  .legal{padding:0 40px 34px}
}

/* 그 사이 구간(600~899) — 4열은 2열로, 세로 스택은 2열로 */
@media (min-width:600px) and (max-width:899px){
  .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .work{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
}

/* ── 인쇄 = PDF 저장. 별도 서버 렌더링 없이 사장님께 드릴 종이가 나온다 ── */

.admin-link:hover{opacity:1;text-decoration:underline}
.lead-copy{margin:0 0 14px;font-size:15.5px;line-height:1.7;color:var(--ink-2)}