/* 보안 자가진단 — 화면 스타일. seo-check/web/css/app.css를 그대로 가져와 아래에 보안 전용 블록만 덧붙임. */

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.narrow{ max-width:var(--maxw-narrow); }

/* ── Header ── */
header.top{ border-bottom:1px solid var(--line); }
header.top .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:var(--s-3); font-weight:800; letter-spacing:var(--tracking-snug); }
.brand .dot{ width:10px; height:10px; border-radius:var(--r-pill); background:var(--accent); }
.brand small{ color:var(--ink-3); font-weight:600; font-size:13px; }

/* ── Hero / 입력 ── */
.hero{ padding:var(--s-11) 0 var(--s-9); text-align:center; }
.eyebrow{ color:var(--accent); font-size:12px; font-weight:700; letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.hero h1{ font-size:clamp(28px,5vw,46px); line-height:1.12; letter-spacing:var(--tracking-tight); margin:var(--s-4) 0 var(--s-3); font-weight:800; }
.hero p.sub{ color:var(--ink-2); font-size:17px; max-width:520px; margin:0 auto var(--s-7); }

.form{ display:flex; gap:var(--s-3); max-width:560px; margin:0 auto; }
.form input{
  flex:1; height:56px; padding:0 var(--s-5); border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink);
  font-family:inherit; font-size:16px; letter-spacing:var(--tracking-body); outline:none; transition:border-color var(--ease);
}
.form input::placeholder{ color:var(--ink-4); }
.form input:focus{ border-color:var(--accent-line); }
.btn{
  height:56px; padding:0 var(--s-7); border:none; border-radius:var(--r-md); cursor:pointer;
  background:var(--accent); color:var(--on-accent); font-family:inherit; font-size:16px; font-weight:700;
  letter-spacing:var(--tracking-body); transition:background var(--ease), transform var(--ease); white-space:nowrap;
}
.btn:hover{ background:var(--accent-press); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:default; }
.hint{ color:var(--ink-4); font-size:13px; margin-top:var(--s-4); }

/* ── 상태 ── */
.status{ text-align:center; color:var(--ink-3); padding:var(--s-8) 0; font-size:15px; }
.status.err{ color:var(--bad); }
.spinner{ width:22px; height:22px; border-radius:var(--r-pill); border:2px solid var(--line-2); border-top-color:var(--accent); display:inline-block; vertical-align:-5px; margin-right:var(--s-3); animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── 결과 ── */
.result{ padding-bottom:var(--s-11); }
.scorecard{
  display:flex; align-items:center; gap:var(--s-8); padding:var(--s-8);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);
  margin-bottom:var(--s-7);
}
.ring{ position:relative; width:128px; height:128px; flex:none; }
.ring svg{ transform:rotate(-90deg); }
.ring .num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring .num b{ font-size:36px; font-weight:800; letter-spacing:var(--tracking-tight); line-height:1; }
.ring .num span{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.scoremeta h2{ font-size:22px; font-weight:800; letter-spacing:var(--tracking-snug); margin-bottom:var(--s-2); }
.scoremeta .urlrow{ color:var(--ink-3); font-size:14px; word-break:break-all; }
.scoremeta .grade{ display:inline-block; margin-top:var(--s-3); padding:4px 12px; border-radius:var(--r-pill); font-size:13px; font-weight:700; border:1px solid var(--line-2); }

/* 카테고리 카드 */
.cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:var(--s-5); }
.cat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6); }
.cat .chead{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--s-2); }
.cat .chead h3{ font-size:16px; font-weight:700; letter-spacing:var(--tracking-snug); }
.cat .chead .cs{ font-size:18px; font-weight:800; }
.cat .cdesc{ color:var(--ink-4); font-size:13px; margin-bottom:var(--s-5); }
.bar{ height:6px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; margin-bottom:var(--s-5); }
.bar i{ display:block; height:100%; border-radius:var(--r-pill); }

.item{ display:flex; gap:var(--s-3); padding:var(--s-3) 0; border-top:1px solid var(--line); }
.item:first-of-type{ border-top:none; }
.item .ico{ width:18px; height:18px; border-radius:var(--r-pill); flex:none; margin-top:3px; }
.item .ibody{ flex:1; min-width:0; }
.item .ilabel{ font-size:14px; font-weight:600; display:flex; justify-content:space-between; gap:var(--s-3); }
.item .ival{ color:var(--ink-3); font-weight:500; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%; }
.item .ifix{ color:var(--ink-3); font-size:13px; margin-top:3px; line-height:1.5; }

/* 우선 개선과제 */
.actions{ margin-top:var(--s-7); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-7); }
.actions h3{ font-size:17px; font-weight:800; letter-spacing:var(--tracking-snug); margin-bottom:var(--s-5); }
.action{ display:flex; gap:var(--s-4); padding:var(--s-4) 0; border-top:1px solid var(--line); }
.action:first-of-type{ border-top:none; }
.action .rank{ width:24px; height:24px; flex:none; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.action .atext b{ font-weight:700; }
.action .atext p{ color:var(--ink-2); font-size:14px; margin-top:2px; line-height:1.5; }


.status-good{ background:var(--good); } .status-warn{ background:var(--warn); } .status-bad{ background:var(--bad); }
.tx-good{ color:var(--good); } .tx-warn{ color:var(--warn); } .tx-bad{ color:var(--bad); }

footer{ border-top:1px solid var(--line); color:var(--ink-4); font-size:13px; text-align:center; padding:var(--s-7) 0; }

@media (max-width:640px){
  .form{ flex-direction:column; }
  .form input{ flex:none; }            /* 세로로 쌓일 때 flex:1 이 높이를 0 기준으로 눌러 버린다 */
  .scorecard{ flex-direction:column; text-align:center; gap:var(--s-5); }
  .item .ival{ max-width:38%; }
}

/* ════════ 보안 전용 ════════ */
.status-na{ background:var(--surface-3); border:1px solid var(--line-2); } .tx-na{ color:var(--ink-4); }
.item .crit{ color:var(--danger); font-size:11px; font-weight:700; margin-left:var(--s-2); letter-spacing:0; }

/* PHP 지원 종료 D-day — 결과 맨 위, 이 서비스의 첫 문장 */
.deadline, .deep, .hero{ word-break:keep-all; }
.deadline{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6);
  padding:var(--s-7); margin-bottom:var(--s-5); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
}
.deadline .dl-label{ color:var(--ink-3); font-size:13px; font-weight:600; }
.deadline .dl-main{ font-size:clamp(22px,3.4vw,30px); font-weight:800; letter-spacing:var(--tracking-tight); line-height:1.25; margin-top:var(--s-1); }
.deadline .dl-sub{ color:var(--ink-2); font-size:14px; margin-top:var(--s-2); }
.deadline .dl-num{ font-size:clamp(34px,6vw,52px); font-weight:800; letter-spacing:var(--tracking-tight); line-height:1; white-space:nowrap; }
.deadline.is-dead{ border-color:var(--accent-line); background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)),var(--surface); }
.deadline.is-dead .dl-num{ color:var(--danger); }
.deadline.is-soon .dl-num{ color:var(--warn); }
.deadline.is-ok .dl-num{ color:var(--good); }
.deadline.is-unknown .dl-num{ color:var(--ink-3); }

.scoremeta .counts{ display:flex; gap:var(--s-4); margin-top:var(--s-3); font-size:13px; color:var(--ink-3); }
.scoremeta .counts b{ font-weight:800; margin-right:2px; }
.scoremeta .critnote{ margin-top:var(--s-3); font-size:13px; color:var(--danger); }

/* 정밀 점검에서만 보이는 항목(잠금) */
.deep{ margin-top:var(--s-7); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-7); }
.deep h3{ font-size:17px; font-weight:800; letter-spacing:var(--tracking-snug); }
.deep .dsub{ color:var(--ink-3); font-size:14px; margin-top:var(--s-2); margin-bottom:var(--s-5); }
.deep-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--s-3); }
.lock{ display:flex; gap:var(--s-3); padding:var(--s-4); border:1px dashed var(--line-2); border-radius:var(--r-md); }
.lock svg{ flex:none; margin-top:2px; color:var(--ink-4); }
.lock b{ font-size:14px; font-weight:700; }
.lock p{ color:var(--ink-3); font-size:13px; line-height:1.5; margin-top:2px; }

/* 보안 1건 신청으로 보내는 버튼 — 잠금 목록 바로 아래, 결과 화면의 결론 */
.cta{ margin-top:var(--s-6); display:grid; gap:var(--s-3); justify-items:start; }
.cta .btn{ display:inline-flex; align-items:center; text-decoration:none; }
.cta p{ color:var(--ink-3); font-size:14px; margin:0; }

/* 전화 상담 신청 */
.lead{ margin-top:var(--s-5); padding-top:var(--s-6); border-top:1px solid var(--line); }
.lead .row{ display:grid; grid-template-columns:1fr 1fr auto; gap:var(--s-3); }
.lead input[type=text], .lead input[type=tel]{
  height:52px; padding:0 var(--s-4); border-radius:var(--r-md); background:var(--bg); border:1px solid var(--line-2);
  color:var(--ink); font-family:inherit; font-size:15px; outline:none; transition:border-color var(--ease);
}
.lead input:focus{ border-color:var(--accent-line); }
.lead .btn{ height:52px; }
.lead .btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2); }
.lead .btn.ghost:hover{ background:var(--surface-2); }
.lead .lead-title{ font-size:14px; font-weight:700; margin-bottom:var(--s-3); }
.lead label.agree{ display:flex; align-items:center; gap:var(--s-2); margin-top:var(--s-3); color:var(--ink-3); font-size:13px; cursor:pointer; }
.lead .msg{ margin-top:var(--s-3); font-size:14px; }
.lead .terms{ margin-top:var(--s-2); color:var(--ink-3); font-size:13px; }
.lead .terms summary{ cursor:pointer; color:var(--ink-4); width:max-content; }
.lead .terms dl{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-1) var(--s-4); margin-top:var(--s-2); padding:var(--s-4); border:1px solid var(--line); border-radius:var(--r-md); line-height:1.5; }
.lead .terms dt{ font-weight:700; color:var(--ink-2); }

@media (max-width:640px){
  .deadline{ flex-direction:column; align-items:flex-start; gap:var(--s-3); padding:var(--s-6); }
  .deep{ padding:var(--s-6); }
  .deep-grid{ grid-template-columns:1fr; }
  .lead .row{ grid-template-columns:1fr; }
  .cta{ justify-items:stretch; }
  .cta .btn{ justify-content:center; }
}

/* ════════ 첫 화면 — 글자 뒤 점 격자 배경(hero.js) ════════ */
.hero{ position:relative; overflow:hidden; min-height:calc(100vh - 64px); min-height:calc(100svh - 64px); display:flex; align-items:center;
  padding:var(--s-10) 0; text-align:left; }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* 글이 있는 왼쪽만 어둡게 — 배경이 움직여도 글·입력칸이 또렷하게 */
.hero-shade{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(11,11,11,.88) 0%, rgba(11,11,11,.55) 42%, rgba(11,11,11,0) 72%),
             linear-gradient(0deg, var(--bg) 0%, rgba(11,11,11,0) 18%); }
.hero-grid{ position:relative; z-index:1; width:100%; }
.hero-copy{ max-width:560px; }
.hero-copy p.sub{ margin:0 0 var(--s-7); }
.hero-copy .form{ margin:0; }
.hero h1{ font-size:clamp(32px,5.2vw,56px); line-height:1.1; }

@media (max-width:900px){
  .hero{ align-items:flex-end; padding:var(--s-11) 0 var(--s-8); }
  .hero-shade{ background:linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,0) 34%, rgba(11,11,11,.8) 52%, var(--bg) 78%); }
}

/* ════════ 진단 진행 화면 — 0~100% 막대 + 지금 보는 것 + 끝난 단계 ════════ */
.status:has(.prog){ padding:var(--s-6) 0; text-align:left; }
.prog{ max-width:var(--maxw-narrow); margin:0 auto; padding:var(--s-6); border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--surface); }
.prog-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); }
.prog-url{ color:var(--ink-3); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prog-pct{ font-size:28px; font-weight:800; letter-spacing:var(--tracking-tight); color:var(--ink); font-variant-numeric:tabular-nums; }
.prog-bar{ height:8px; margin:var(--s-3) 0 var(--s-4); border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.prog-bar i{ display:block; height:100%; width:0; border-radius:inherit; background:var(--accent); box-shadow:0 0 12px var(--accent-line); }
.prog-now{ margin:0 0 var(--s-4); color:var(--ink); font-size:15px; font-weight:700; min-height:1.6em; }
.prog-now::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:var(--s-2); border-radius:50%; background:var(--accent); vertical-align:2px; animation:progblink 1s ease-in-out infinite; }
@keyframes progblink{ 50%{ opacity:.25; } }
.prog-log{ margin:0; padding:0; list-style:none; max-height:220px; overflow:auto; border-top:1px solid var(--line); }
.prog-log li{ display:flex; gap:var(--s-2); padding:var(--s-2) 0; border-bottom:1px solid var(--line); color:var(--ink-2); font-size:13px; line-height:1.5; }
.prog-log li::before{ content:"✓"; flex:none; color:var(--good); font-weight:800; }
@media (prefers-reduced-motion: reduce){ .prog-now::before{ animation:none; } }

/* 자동 진단이 막힌 사이트 */
.blockcard{ border-color:var(--line-2); }
.blockcard .bnote{ color:var(--ink-2); font-size:14px; line-height:1.65; margin:var(--s-3) 0 0; }
.scope{ margin:var(--s-2) 0 var(--s-3); color:var(--ink-3); font-size:13px; }
.scope b{ color:var(--ink-2); }

/* ════════ 위험도 배지 (심각·높음·중간·낮음·양호·확인 불가) ════════ */
.sev{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r-pill); font-size:11px; font-weight:800; letter-spacing:0; white-space:nowrap; flex:none; }
.sev-critical{ background:var(--danger); color:#fff; }
.sev-high{ background:rgba(248,113,113,.18); color:var(--bad); }
.sev-medium{ background:rgba(251,191,36,.16); color:var(--warn); }
.sev-low{ background:var(--surface-3); color:var(--ink-2); }
.sev-pass{ background:rgba(52,211,153,.14); color:var(--good); }
.sev-na{ background:transparent; color:var(--ink-4); border:1px solid var(--line-2); }
.sev-counts{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); }
.sev-counts span{ display:inline-flex; align-items:center; gap:6px; }
.sev-counts b{ font-size:15px; font-variant-numeric:tabular-nums; }
.na-ring{ width:128px; height:128px; flex:none; display:flex; align-items:center; justify-content:center; text-align:center; border-radius:50%; border:10px solid var(--surface-3); color:var(--ink-3); font-weight:800; line-height:1.3; }

/* ════════ 진단 완료 팝업 ════════ */
.done-dlg{ width:min(520px, calc(100% - 32px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--surface); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.done-dlg::backdrop{ background:rgba(0,0,0,.7); backdrop-filter:blur(2px); }
.dlg-in{ padding:var(--s-7) var(--s-6) var(--s-6); }
.dlg-eyebrow{ margin:0; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:var(--tracking-wide); }
.done-dlg h2{ margin:var(--s-1) 0 var(--s-5); font-size:22px; letter-spacing:var(--tracking-snug); word-break:break-all; }
.dlg-score{ display:flex; align-items:center; gap:var(--s-5); margin-bottom:var(--s-5); }
.dlg-verdict{ margin:var(--s-3) 0 0; color:var(--ink-2); font-size:15px; line-height:1.6; }
.dlg-sub{ margin:var(--s-5) 0 var(--s-2); color:var(--ink-3); font-size:12px; font-weight:700; }
.dlg-top{ margin:0; padding:0; list-style:none; display:grid; gap:var(--s-2); }
.dlg-top li{ display:flex; align-items:center; gap:var(--s-3); font-size:14px; font-weight:700; }
.dlg-scope{ margin:var(--s-5) 0 0; color:var(--ink-3); font-size:12px; }
.dlg-btns{ display:flex; gap:var(--s-3); margin-top:var(--s-6); }
.dlg-btns .btn{ flex:1; }
@media (max-width:480px){ .dlg-score{ flex-direction:column; text-align:center; } .dlg-score .ring, .dlg-score .na-ring{ margin:0 auto; } }

/* ════════ 상세 보고서 ════════ */
.report{ margin:var(--s-8) 0; }
.rp-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); padding-bottom:var(--s-5); border-bottom:2px solid var(--line-2); }
.rp-eyebrow{ margin:0; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:var(--tracking-wide); }
.rp-head h2{ margin:var(--s-1) 0 var(--s-2); font-size:clamp(22px,3.4vw,30px); letter-spacing:var(--tracking-tight); word-break:break-all; }
.rp-meta{ margin:0; color:var(--ink-3); font-size:13px; line-height:1.6; word-break:break-all; }
.rp-sec{ padding:var(--s-7) 0; border-bottom:1px solid var(--line); }
.rp-sec > h3{ display:flex; align-items:center; gap:var(--s-3); margin:0 0 var(--s-4); font-size:19px; letter-spacing:var(--tracking-snug); }
.rp-no{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:13px; font-weight:800; }
.rp-lead{ margin:0 0 var(--s-4); color:var(--ink-2); font-size:14px; line-height:1.7; }
.rp-summary{ display:flex; align-items:center; gap:var(--s-6); margin-bottom:var(--s-5); }
.rp-sumtext{ flex:1; min-width:0; }
.rp-verdict{ margin:var(--s-3) 0 var(--s-4); font-size:17px; font-weight:700; line-height:1.5; }
.rp-sevbar{ display:flex; height:10px; gap:2px; margin-bottom:var(--s-3); border-radius:var(--r-pill); overflow:hidden; }
.rp-sevbar i{ display:block; min-width:6px; }
.rp-sevbar .sev-na{ background:var(--surface-3); border:0; }
.rp-sevbar .sev-low{ background:var(--ink-4); }
.rp-sevbar .sev-high{ background:var(--bad); }
.rp-sevbar .sev-medium{ background:var(--warn); }
.rp-sevbar .sev-pass{ background:var(--good); }
.rp-note{ padding:var(--s-4); border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface); color:var(--ink-2); font-size:14px; line-height:1.7; }
.rp-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); }
.rp-table{ width:100%; border-collapse:collapse; font-size:14px; }
.rp-table th{ padding:var(--s-3); text-align:left; color:var(--ink-3); font-size:12px; font-weight:700; background:var(--surface); border-bottom:1px solid var(--line); white-space:nowrap; }
.rp-table td{ padding:var(--s-3); border-bottom:1px solid var(--line); vertical-align:top; }
.rp-table tr:last-child td{ border-bottom:0; }
.rp-table td:first-child{ color:var(--ink-3); width:28px; }
.rp-table td a{ color:var(--ink); font-weight:700; text-decoration:none; }
.rp-table td a:hover{ text-decoration:underline; }
.rp-table td small{ display:block; margin-top:4px; color:var(--ink-3); font-size:12px; line-height:1.5; }
.rp-table td:nth-child(4), .rp-table td:nth-child(5){ color:var(--ink-2); white-space:nowrap; font-size:13px; }
.rp-cats{ display:grid; gap:var(--s-3); }
.rp-cat{ display:grid; grid-template-columns:120px 1fr 36px; align-items:center; gap:var(--s-3); font-size:14px; }
.rp-cat .bar{ margin:0; }
.rp-cat b{ text-align:right; font-variant-numeric:tabular-nums; }
.rp-group{ margin-top:var(--s-6); }
.rp-group h4{ margin:0 0 var(--s-3); font-size:16px; }
.rp-group h4 small{ margin-left:var(--s-2); color:var(--ink-3); font-size:12px; font-weight:500; }
.rp-item{ margin-bottom:var(--s-2); border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-sm); background:var(--surface); color:inherit; }
.rp-item.sev-critical{ border-left-color:var(--danger); background:var(--surface); }
.rp-item.sev-high{ border-left-color:var(--bad); background:var(--surface); }
.rp-item.sev-medium{ border-left-color:var(--warn); background:var(--surface); }
.rp-item.sev-low{ border-left-color:var(--ink-4); background:var(--surface); }
.rp-item.sev-pass{ border-left-color:var(--good); background:var(--surface); }
.rp-item.sev-na{ border-color:var(--line); border-left-color:var(--line-2); }
.rp-item summary{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); cursor:pointer; list-style:none; }
.rp-item summary::-webkit-details-marker{ display:none; }
.rp-item summary b{ font-size:14px; }
.rp-val{ margin-left:auto; color:var(--ink-3); font-size:13px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:45%; }
.rp-body{ padding:0 var(--s-4) var(--s-4); }
.rp-body dl{ display:grid; grid-template-columns:96px 1fr; gap:var(--s-2) var(--s-4); margin:0; font-size:14px; line-height:1.65; }
.rp-body dt{ color:var(--ink-3); font-size:12px; font-weight:700; padding-top:3px; }
.rp-body dd{ margin:0; color:var(--ink-2); min-width:0; }
.rp-ev, .rp-code pre{ margin:0; padding:var(--s-3); border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--line); color:var(--ink); font:12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:pre-wrap; word-break:break-all; }
.rp-steps{ margin:0 0 var(--s-3); padding-left:1.2em; }
.rp-steps li{ margin-bottom:4px; }
.rp-code{ margin-top:var(--s-2); }
.rp-code span{ display:block; margin-bottom:4px; color:var(--ink-3); font-size:12px; font-weight:700; }
.rp-meta2{ margin:var(--s-3) 0 0; color:var(--ink-3); font-size:12px; }
.rp-refs{ margin:var(--s-1) 0 0; color:var(--ink-3); font-size:12px; }
.rp-refs a{ color:var(--accent); }
.rp-ref{ margin:var(--s-5) 0 0; color:var(--ink-4); font-size:12px; }
@media (max-width:640px){
  .rp-head{ flex-direction:column; }
  .rp-summary{ flex-direction:column; align-items:flex-start; }
  .rp-body dl{ grid-template-columns:1fr; gap:2px; }
  .rp-body dd{ margin-bottom:var(--s-2); }
  .rp-cat{ grid-template-columns:96px 1fr 32px; font-size:13px; }
  .rp-val{ display:none; }
  .rp-table td:nth-child(5), .rp-table th:nth-child(5){ display:none; }
}

/* 인쇄·PDF — 흰 종이에 검은 글씨, 보고서만 */
@media print{
  :root{ --bg:#fff; --surface:#fff; --surface-2:#f6f6f6; --surface-3:#e8e8e8; --line:#ddd; --line-2:#bbb; --ink:#111; --ink-2:#333; --ink-3:#555; --ink-4:#888; }
  body{ background:#fff; color:#111; }
  .top, .hero, footer, .noprint, #status, .done-dlg{ display:none !important; }
  .report{ margin:0; }
  .rp-item{ break-inside:avoid; }
  a{ color:#111 !important; }
}

/* 테두리 버튼·작은 버튼 — 첫 화면(팝업·보고서)에서도 쓴다 */
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2); }
.btn.ghost:hover{ background:var(--surface-2); }
.btn.sm{ height:36px; padding:0 var(--s-4); font-size:13px; }

/* ════════ 가운데 상자(진행 상자·완료 팝업) ════════
   tokens.css 의 *{margin:0} 때문에 <dialog> 기본 가운데 정렬이 풀려서 직접 가운데로 둔다. */
dialog.done-dlg{ position:fixed; inset:0; margin:auto; height:fit-content; max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; }
html.scroll-lock, html.scroll-lock body{ overflow:hidden; }

/* 진행 상자 — 상자 크기는 고정, 끝난 단계 목록만 상자 안에서 스크롤 */
dialog.prog-dlg{ height:min(560px, calc(100dvh - 32px)); overflow:hidden; }
dialog.prog-dlg .prog{ height:100%; display:flex; flex-direction:column; max-width:none; margin:0; border:0; border-radius:0; padding:var(--s-6); background:transparent; }
dialog.prog-dlg .prog-head{ margin-top:var(--s-2); }
dialog.prog-dlg .prog-log{ flex:1; min-height:0; max-height:none; overflow:auto; overscroll-behavior:contain; }

/* 보고서 페이지 */
#report .report{ margin-top:var(--s-6); }
.top .brand{ text-decoration:none; color:inherit; }
.dl-guess{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:var(--r-pill); border:1px solid currentColor; font-size:11px; font-weight:800; vertical-align:3px; opacity:.85; }
.rp-std{ display:flex; flex-wrap:wrap; gap:6px; }
.std{ display:inline-block; padding:3px 9px; border-radius:var(--r-pill); border:1px solid var(--line-2); color:var(--ink-2); font-size:12px; line-height:1.5; }
.std-kisa{ border-color:rgba(255,110,46,.4); }
.std-owasp{ border-color:rgba(96,165,250,.45); }
.std-pipc{ border-color:rgba(52,211,153,.45); }
.rp-stdg{ margin:var(--s-5) 0 var(--s-2); font-size:14px; color:var(--ink-2); }
.rp-stdtable td:first-child{ width:38%; min-width:120px; color:var(--ink); }
.rp-stdtable td:nth-child(2) a{ font-weight:500; color:var(--ink-2); }
.rp-stdtable td:last-child{ width:72px; }

/* ════════ 자주 묻는 질문 · PHP2Shell 대응 가이드 ════════ */
.faq{ margin:var(--s-10) auto var(--s-8); max-width:820px; }
.faq > h2{ font-size:22px; letter-spacing:var(--tracking-snug); margin:0 0 var(--s-4); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-4) 0; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; flex:none; color:var(--accent); font-size:20px; font-weight:700; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item h3{ margin:0; font-size:16px; font-weight:700; line-height:1.5; }
.faq-item p{ margin:0 0 var(--s-4); color:var(--ink-2); font-size:15px; line-height:1.75; }
.faq-more{ margin:var(--s-5) 0 0; font-size:14px; }
.faq-more a, .guide a:not(.btn){ color:var(--accent); }
.foot-nav{ margin-bottom:var(--s-2); }
.foot-nav a{ color:var(--ink-2); text-decoration:none; }
.foot-nav a:hover{ text-decoration:underline; }

.guide{ max-width:820px; padding-top:var(--s-6); padding-bottom:var(--s-10); }
.crumb{ color:var(--ink-3); font-size:13px; margin-bottom:var(--s-5); }
.crumb a{ color:var(--ink-2); text-decoration:none; }
.guide h1{ margin:var(--s-2) 0 var(--s-2); font-size:clamp(28px,4.4vw,40px); letter-spacing:var(--tracking-tight); line-height:1.2; }
.guide h2{ margin:var(--s-9) 0 var(--s-4); font-size:21px; letter-spacing:var(--tracking-snug); }
.guide-meta{ color:var(--ink-3); font-size:13px; margin:0; }
.guide p, .guide li{ color:var(--ink-2); font-size:15px; line-height:1.8; }
.summary-box{ margin:var(--s-6) 0; padding:var(--s-5); border:1px solid var(--accent-line); border-left:4px solid var(--accent); border-radius:var(--r-md); background:var(--accent-soft); }
.summary-box p{ margin:0; color:var(--ink); }
.guide-table td:first-child{ width:auto; color:var(--ink); font-weight:700; white-space:nowrap; }
.guide .table-scroll-hint{ display:none; color:var(--ink-3); font-size:13px; margin:0 0 var(--s-2); }
.guide .rp-table-wrap:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.guide-steps{ padding-left:1.3em; display:grid; gap:var(--s-3); }
.guide-check{ padding-left:1.2em; display:grid; gap:var(--s-2); }
.guide code{ padding:1px 6px; border-radius:6px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-size:13px; }
.guide-cta{ margin:var(--s-8) 0; padding:var(--s-6); border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--surface); text-align:center; }
.guide-cta p{ margin:0 0 var(--s-4); }
.guide-cta .btn{ display:inline-flex; align-items:center; text-decoration:none; }
.guide-src{ padding-left:1.2em; }
@media (max-width:480px){ .top .brand small{ display:none; } }

/* ════════ 첫 화면 한 화면 고정 — 스크롤 없이 머리말·첫 화면·한 줄 바닥글이 화면에 딱 맞게 ════════ */
body.one-screen{ height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
body.one-screen > header, body.one-screen > footer{ flex:none; }
body.one-screen main{ flex:1; min-height:0; display:flex; flex-direction:column; }
body.one-screen .hero{ flex:1; min-height:0; padding:var(--s-6) 0; }
body.one-screen .hero-copy .status{ padding:var(--s-4) 0 0; text-align:left; }
body.one-screen .hero-copy .status .btn{ display:inline-flex; }
.foot-line{ padding:10px var(--gutter); font-size:12px; line-height:1.5; }
/* 브라우저가 저장을 막아 보고서를 이 페이지에 그릴 때만 스크롤을 푼다(app.js) */
body.one-screen.has-result{ height:auto; overflow:visible; }

/* 위쪽 메뉴 */
.top-nav{ display:flex; align-items:center; gap:var(--s-5); }
.top-nav a{ color:var(--ink-2); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.top-nav a:hover, .top-nav a[aria-current="page"]{ color:var(--ink); }
.top-nav a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--accent); }

@media (max-width:900px){
  body.one-screen .hero{ padding:var(--s-4) 0 var(--s-5); }
  body.one-screen .hero-copy .status{ text-align:center; }
}
@media (max-width:640px){
  .top-nav{ gap:var(--s-3); }
  .top-nav a{ font-size:13px; }
  .guide .table-scroll-hint{ display:block; }
  body.one-screen .hero h1{ font-size:clamp(26px,7.4vw,32px); margin:var(--s-2) 0; }
  body.one-screen .hero p.sub{ font-size:14px; margin-bottom:var(--s-4); }
  body.one-screen .hero .hint{ font-size:13px; margin-top:var(--s-2); }
  body.one-screen .form input, body.one-screen .btn#go{ height:48px; }
  .foot-line{ font-size:12px; padding:8px var(--gutter); }
}
/* 아주 낮은 화면(가로로 돌린 휴대폰 등)은 설명 문구를 줄인다 */
@media (max-height:640px){
  body.one-screen .hero p.sub{ display:none; }
  body.one-screen .hero .hint{ display:none; }
}