/* 키라 무료 진단 — 시각 사양은 docs/mockup/무료진단-시연.html 이 정본이다.
   목업에서 그대로 가져왔다. 색·타이포·간격을 임의로 바꾸지 않는다. */
:root{
  --paper:#F4F6F9; --surface:#FFFFFF; --surface-2:#EDF0F5;
  --ink:#12161D; --ink-2:#59636F; --ink-3:#8A939F;
  --rule:#DDE2E9; --rule-2:#C9D0DA;
  --absent:#C0332A; --absent-bg:#FBEDEC;
  --present:#1B6E52; --present-bg:#E8F3EE;
  --warn:#9E6A12; --warn-bg:#FAF1E0;
  --shadow:0 1px 2px rgba(18,22,29,.05),0 8px 24px -12px rgba(18,22,29,.18);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#101319; --surface:#181C24; --surface-2:#1F242E;
  --ink:#EDF0F5; --ink-2:#98A2B0; --ink-3:#6B7484;
  --rule:#282E39; --rule-2:#343C49;
  --absent:#FF7266; --absent-bg:#2B1917;
  --present:#4CBF93; --present-bg:#132420;
  --warn:#DFA645; --warn-bg:#251E10;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --paper:#101319; --surface:#181C24; --surface-2:#1F242E;
  --ink:#EDF0F5; --ink-2:#98A2B0; --ink-3:#6B7484;
  --rule:#282E39; --rule-2:#343C49;
  --absent:#FF7266; --absent-bg:#2B1917;
  --present:#4CBF93; --present-bg:#132420;
  --warn:#DFA645; --warn-bg:#251E10;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:16px;line-height:1.72;-webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
.wrap{max-width:640px;margin:0 auto;padding:0 20px 88px}
h1,h2,h3{text-wrap:balance;margin:0}

/* ─ 헤더 ─ */
.top{display:flex;align-items:baseline;gap:10px;padding:26px 0 22px;border-bottom:1px solid var(--rule)}
.mark{font-family:"Black Han Sans",sans-serif;font-size:25px;letter-spacing:.04em;color:var(--ink)}
.mark span{color:var(--absent)}
.tag{font-size:12.5px;color:var(--ink-3);letter-spacing:.02em}

/* ─ 공통 ─ */
.stage{display:none;animation:rise .45s cubic-bezier(.2,.7,.3,1) both}
.stage.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.lede{font-size:15px;color:var(--ink-2);line-height:1.75}
.sheet{background:var(--surface);border:1px solid var(--rule);border-radius:3px;box-shadow:var(--shadow)}

/* ─ P0 입력 ─ */
.hero{padding:52px 0 12px}
.hero h1{font-size:clamp(28px,7.2vw,38px);font-weight:700;line-height:1.32;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--absent)}
.hero p{margin:18px 0 0;font-size:15.5px;color:var(--ink-2);max-width:34em}
form{margin-top:34px;display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
label{font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-2)}
input{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-2);border-radius:2px;padding:13px 14px;width:100%}
input:focus-visible{outline:2px solid var(--absent);outline-offset:1px;border-color:transparent}
.go{font:inherit;font-size:16.5px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  margin-top:8px;padding:16px;border:0;border-radius:2px;background:var(--ink);color:var(--paper)}
.go:hover{opacity:.88}
.go:focus-visible{outline:2px solid var(--absent);outline-offset:2px}
.fine{margin-top:16px;font-size:12.5px;color:var(--ink-3);line-height:1.65}

/* ─ P1 진행 ─ */
.run{padding:48px 0}
.run h2{font-size:20px;font-weight:600;letter-spacing:-.01em}
.log{margin:28px 0 0;padding:0;list-style:none;
  font-family:"IBM Plex Mono","IBM Plex Sans KR",monospace;font-size:13.5px;line-height:1.5}
.log li{display:flex;gap:11px;padding:11px 0;border-bottom:1px dashed var(--rule);
  color:var(--ink-3);opacity:.35;transition:opacity .3s,color .3s}
.log li.on{opacity:1;color:var(--ink-2)}
.log li.done .dot{background:var(--present);border-color:var(--present)}
.dot{flex:none;width:9px;height:9px;margin-top:7px;border-radius:50%;
  border:1.5px solid var(--rule-2);transition:background .3s,border-color .3s}
.log li.on:not(.done) .dot{border-color:var(--ink-2);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}
.asking{margin-top:26px;padding:16px 18px;background:var(--surface-2);border-radius:2px;
  font-size:14px;color:var(--ink-2)}
.asking b{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-family:"IBM Plex Mono",monospace;margin-bottom:8px;font-weight:500}
.asking q{display:block;color:var(--ink);font-size:15.5px;quotes:"「" "」"}

/* ─ P2 판정 ─ */
.verdict{padding:46px 0 40px;border-bottom:2px solid var(--ink)}
.verdict .who{font-size:14px;color:var(--ink-2);margin-bottom:2px}
.verdict .num{font-family:"Black Han Sans",sans-serif;color:var(--absent);
  font-size:clamp(86px,25vw,148px);line-height:.86;letter-spacing:-.01em;margin:14px 0 4px}
.verdict .say{font-size:clamp(19px,4.6vw,24px);font-weight:600;line-height:1.45;letter-spacing:-.015em}
.verdict .sub{margin-top:14px;font-size:14.5px;color:var(--ink-2);line-height:1.7}

/* ─ 섹션 ─ */
section{padding:38px 0;border-bottom:1px solid var(--rule)}
.shead{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.snum{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.1em;
  color:var(--absent);flex:none}
.shead h2{font-size:20.5px;font-weight:700;letter-spacing:-.018em}
.sdek{font-size:14.5px;color:var(--ink-2);margin:0 0 22px}

/* 표 */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:340px}
th,td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace;padding-bottom:8px}
td.m{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-2)}
td:last-child,th:last-child{padding-right:0;text-align:right;white-space:nowrap}
.pill{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;
  padding:3px 8px;border-radius:2px;letter-spacing:.03em}
.pill.no{background:var(--absent-bg);color:var(--absent)}
.pill.yes{background:var(--present-bg);color:var(--present)}
.pill.mid{background:var(--warn-bg);color:var(--warn)}

/* 원인 목록 */
.why{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.why li{padding:16px 0;border-bottom:1px solid var(--rule)}
.why li:last-child{border-bottom:0;padding-bottom:0}
.why h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.why p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.7}

/* 할 일 */
.todo{list-style:none;margin:0;padding:0}
.todo li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--rule)}
.todo li:last-child{border-bottom:0}
.box{flex:none;width:15px;height:15px;margin-top:5px;border:1.5px solid var(--rule-2);border-radius:1px}
.todo .t{flex:1;min-width:0}
.todo .t b{display:block;font-weight:600;font-size:15.5px;letter-spacing:-.005em}
.todo .t span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.6}
.size{flex:none;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  border:1px solid var(--rule);padding:2px 7px;border-radius:2px;margin-top:4px}

/* 갖춘 것 */
.have{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.have span{font-size:13.5px;padding:6px 11px;background:var(--present-bg);color:var(--present);border-radius:2px}
.callout{margin-top:20px;padding:17px 19px;background:var(--surface-2);border-left:3px solid var(--present);
  font-size:15px;line-height:1.7}
.callout b{color:var(--ink)}

/* 직접 확인 */
.ask{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.q{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:15px 16px}
.q .lv{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.q .txt{font-size:16px;font-weight:500;margin:6px 0 12px;line-height:1.5}
.q .btns{display:flex;gap:8px;flex-wrap:wrap}
.q a,.q button{font:inherit;font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;
  padding:8px 13px;border-radius:2px;border:1px solid var(--rule-2);background:transparent;color:var(--ink-2)}
.q a:hover,.q button:hover{border-color:var(--ink-2);color:var(--ink)}
.q a:focus-visible,.q button:focus-visible{outline:2px solid var(--absent);outline-offset:1px}

/* 푸터 */
footer{padding:30px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.7}
footer .rule{height:1px;background:var(--rule);margin-bottom:22px}
.reset{font:inherit;font-size:12.5px;color:var(--ink-3);background:none;border:0;cursor:pointer;
  padding:0;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ─ 목업에 없던 실제 동작용 ─ */
.log li.failed .dot{background:var(--absent);border-color:var(--absent)}
.log li.skipped .dot{border-style:dashed}
.log li .detail{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.err{margin-top:18px;padding:15px 17px;background:var(--absent-bg);color:var(--absent);
  border-radius:2px;font-size:14.5px;line-height:1.65}
.note{margin-top:18px;padding:15px 17px;background:var(--warn-bg);color:var(--warn);
  border-radius:2px;font-size:14px;line-height:1.65}
.disclaimer{margin-top:22px;padding:16px 18px;border:1px solid var(--rule);border-radius:2px;
  font-size:13px;color:var(--ink-2);line-height:1.7}
.q .btns .copy{border-style:dashed}
.q .btns .noauto{border-color:var(--warn);color:var(--warn)}
.go[disabled]{opacity:.5;cursor:progress}
.lead{margin-top:26px;display:flex;gap:8px;flex-wrap:wrap}
.lead input{flex:1;min-width:200px}
.lead button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:12px 18px;
  border:0;border-radius:2px;background:var(--ink);color:var(--paper)}

/* ══ 랜딩 · 신청 · 인쇄 (2026-09-01 공개 퍼널) ══════════════════════ */

.top .nav { display:flex; gap:16px; align-items:center }
.top .nav a { color:var(--ink-3); text-decoration:none; font-size:13px; font-weight:500 }
.top .nav a:hover { color:var(--ink-1) }
a.mark { text-decoration:none }

.cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px }
.cta .go, .cta .ghost { width:auto; margin:0; padding:14px 26px }
.ghost {
  background:transparent; color:var(--ink-2); border:1px solid var(--line);
  border-radius:2px; font:inherit; font-weight:600; font-size:15px; cursor:pointer;
}
.ghost:hover { border-color:var(--ink-3); color:var(--ink-1) }

.lpsec { border-bottom:1px solid var(--line); padding:34px 0 30px }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin-top:18px }
.card { border:1px solid var(--line); padding:18px 16px }
.card b { display:block; font-size:15px; color:var(--accent); margin-bottom:8px }
.card p { margin:0; font-size:14px; line-height:1.75; color:var(--ink-2) }
.card strong { color:var(--ink-1); font-weight:600 }

.facts { list-style:none; padding:0; margin:18px 0 0 }
.facts li { position:relative; padding:9px 0 9px 20px; font-size:14px; color:var(--ink-2); line-height:1.7 }
.facts li::before { content:''; position:absolute; left:2px; top:17px; width:6px; height:6px; background:var(--accent) }
.facts b { color:var(--ink-1); font-weight:600 }

/* 대표 확정 A — 보장하지 않는다는 말을 감추지 않는다. 오히려 절을 만들어 올린다. */
.honest { border-left:3px solid var(--accent); padding:4px 0 4px 16px; margin-top:16px }
.honest p { font-size:14px; line-height:1.85; color:var(--ink-2); margin:0 0 12px }
.honest p:last-child { margin-bottom:0 }
.honest b { color:var(--ink-1) }
.honest strong { color:var(--ink-1); font-weight:600 }

.cta2 { text-align:center; padding:38px 0 10px }
.cta2 h3 { font-size:20px; margin:0 0 6px }
.cta2 p { font-size:14px; color:var(--ink-3); margin:0 0 20px }
.cta2 .go { width:auto; padding:15px 34px; margin:0 }

/* 진단 → 계약 전환 */
.next { border:1px solid var(--line); padding:24px 22px; margin-top:30px; background:var(--bg-2,transparent) }
.next h3 { font-size:18px; margin:0 0 8px }
.next p { font-size:14px; line-height:1.75; color:var(--ink-2); margin:0 }
.next b { color:var(--ink-1) }

/* 영업맨 줄 */
.bar { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px }
.bar button {
  background:transparent; border:1px solid var(--line); color:var(--ink-2);
  padding:9px 15px; border-radius:2px; font:inherit; font-size:13px; font-weight:500; cursor:pointer;
}
.bar button:hover { border-color:var(--ink-3); color:var(--ink-1) }

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

textarea {
  width:100%; box-sizing:border-box; background:transparent; border:1px solid var(--line);
  color:var(--ink-1); padding:12px 13px; border-radius:2px; font:inherit; font-size:15px; resize:vertical;
}
textarea:focus { outline:none; border-color:var(--accent) }

.ok { border-left:3px solid var(--accent); padding:12px 0 12px 14px; font-size:14px; color:var(--ink-1); margin-top:16px }

.legal { margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-3) }
.legal a { color:var(--ink-3) }

/* ── 인쇄 = PDF 저장. 별도 서버 렌더링 없이 사장님께 드릴 종이가 나온다 ── */
@media print {
  @page { margin:14mm }
  body { background:#fff; color:#000 }
  .wrap { max-width:none; padding:0 }
  .noprint, .top .nav, .stage:not(.on) { display:none !important }
  /* 진단서만 인쇄한다 — 랜딩·입력·진행로그는 종이에 필요 없다 */
  #lp, #s0, #s1, #s3 { display:none !important }
  #s2 { display:block !important }
  a { text-decoration:none }
  /* 링크 주소를 종이에 남긴다. 사장님이 나중에 직접 확인할 수 있어야 한다 */
  .q .btns a::after { content:' (' attr(href) ')'; font-size:9px; color:#666 }
  section { break-inside:avoid }
  .disclaimer { border:1px solid #000; padding:10px; margin-top:14px }
}