:root {
      color-scheme: light;
      --page: #f6f7fb;
      --page-2: #eef0f8;
      --surface: #ffffff;
      --ink: #111318;
      --ink-2: #666d7a;
      --ink-muted: #8a93a3;
      --border: #e8eaf0;
      --hairline: #eff1f5;
      --good: #23a36d;
      --warning: #f0a020;
      --critical: #dc3545;
      --good-text: #1c8a5b;
      /* 근거 등급(학술 연구)용. 상태색(빨강·주황·초록)과 절대 섞지 않는다 — 근거가 좋다고 결과가 좋은 게 아니다 */
      --research: #0891b2;
      /* 표면 위계 — 카드는 테두리 대신 그림자로 띄운다. 값은 세 단계뿐이고 그 이상은 안 만든다 */
      --shadow-sm: 0 1px 0.125rem rgba(16, 19, 25, .05);
      --shadow: 0 1.25rem 3.125rem rgba(24, 31, 56, .08);
      --shadow-lg: 0 0.125rem 0.375rem rgba(16, 19, 25, .06), 0 1.5rem 3.5rem -1.25rem rgba(16, 19, 25, .20);
      --r-sm: 0.5rem;
      --r-md: 0.75rem;
      --r-lg: 1rem;
      --r-xl: 1.375rem;
      /* 강조색 — 버튼·포커스·아이콘 타일에만 쓴다. 상태색(good/warning/critical)과 역할이 다르다 */
      --brand: #0d5d9e;
      --brand-2: #2f9bd6;
      /* 주 버튼은 강조색이 아니라 다크다 — 랜딩과 같은 규칙 */
      --btn: #0c0f14;
      --brand-ink: #0a4a80;
      --brand-soft: #e8f1f8;
      --on-brand: #ffffff;
      --font: Pretendard, system-ui, -apple-system, "Segoe UI",
        "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    }

    /* 다크 모드는 지원하지 않는다(2026-09-02) — 라이트 팔레트 하나로 통일. color-scheme: light가
       폼 컨트롤·스크롤바까지 라이트로 고정한다 */

    * {
      box-sizing: border-box;
      margin: 0;
    }

    /* 앵커 이동(#why 등)은 부드럽게 — 목적지가 sticky 헤더에 가리지 않게 여백도 같이.
       interpolate-size: FAQ의 height:auto 전환(details-content)을 허용한다 */
    html {
      scroll-behavior: smooth;
      interpolate-size: allow-keywords;
    }

    .landing section {
      scroll-margin-top: 4.75rem;
    }

    body {
      background: var(--page);
      color: var(--ink);
      font-family: var(--font);
      line-height: 1.6;
      word-break: keep-all;
      padding: 0 1.25rem 4rem;
      /* 상단 여백은 site-header가 담당한다 */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      /* 페이지 자체는 절대 가로 스크롤하지 않는다 — 넓은 표는 각자의 wrapper(overflow-x:auto)가 받는다.
         스크롤 컨테이너를 만들지 않는 clip이라 sticky도 안 죽는다 */
      overflow-x: clip;
    }

    /* 페이지 위쪽에만 아주 옅은 물빠짐. 카드가 흰색이라 이게 없으면 히어로가 배경에 잠긴다 */
    body::before {
      content: "";
      position: fixed;
      inset: 0 0 auto;
      height: 23.75rem;
      background: linear-gradient(180deg, var(--page-2), var(--page));
      z-index: -1;
      pointer-events: none;
    }

    .wrap {
      max-width: 75rem;
      margin: 0 auto;
      position: relative;
    }

    /* ── 히어로 — designhub.kr/geo 랜딩과 같은 무드: 카드 상자 없이 배경 위에 트여 있고,
       우상단에서 빛이 번진다. 결과가 나오면 그 아래로 카드들이 쌓인다 */
    .hero {
      position: relative;
      overflow: hidden;
      padding: 4.5rem 1.25rem 3.5rem;
      margin-bottom: 1.5rem;
      text-align: center;
      /* 리퀴드 글라스 — 카드 안: 움직이는 빛(::before) 위에 프로스트 유리막(::after)을 덮는다.
         빛은 유리 너머로 뿌옇게 번지고, 콘텐츠(z-index 1)는 유리 위에 선명하게 얹힌다 */
      background: linear-gradient(180deg, var(--page-2), var(--page));
      border: 1px solid rgba(255, 255, 255, .75);
      border-radius: 1.75rem;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(255, 255, 255, .35),
        0 1.25rem 3.125rem rgba(24, 31, 56, .12);
    }

    /* 유리 뒤에서 떠다니는 빛 두 개 — 한 요소의 배경 레이어 둘로 그리고 각자 다른 방향으로 움직인다 */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle 20rem at 85% 12%, rgba(13, 93, 158, .50), transparent 70%),
        radial-gradient(circle 17rem at 10% 88%, rgba(13, 93, 158, .55), transparent 70%);
      background-repeat: no-repeat;
      animation: hero-lights 8s ease-in-out infinite alternate;
      pointer-events: none;
    }

    @keyframes hero-lights {
      to {
        background-position: -17rem 8rem, 16rem -7rem;
      }
    }

    /* 프로스트 유리막 — 아래에 그려진 빛을 블러로 뭉개 유리 너머처럼 보이게 한다 */
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      backdrop-filter: blur(26px) saturate(1.4);
      -webkit-backdrop-filter: blur(26px) saturate(1.4);
      background: linear-gradient(115deg,
          rgba(255, 255, 255, .50) 0%,
          rgba(255, 255, 255, .18) 45%,
          rgba(255, 255, 255, .40) 100%);
      pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .hero::before {
        animation: none;
      }
    }

    /* 콘텐츠는 항상 유리 위에 */
    .hero>* {
      position: relative;
      z-index: 1;
    }

    /* 헤드라인 위 알약 — 세 축이 무엇인지 한 줄로 */
    h1 .gradient {
      display: block;
      background: linear-gradient(120deg, var(--brand), var(--brand-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .eyebrow i {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: var(--good);
      flex-shrink: 0;
      /* 라이브 표시등처럼 맥박 — 초록 링이 퍼지며 사라진다 */
      animation: eyebrow-pulse 2s ease-out infinite;
    }

    @keyframes eyebrow-pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(35, 163, 109, .45);
      }

      70% {
        box-shadow: 0 0 0 0.5625rem rgba(35, 163, 109, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(35, 163, 109, 0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .eyebrow i {
        animation: none;
        box-shadow: 0 0 0 0.375rem rgba(35, 163, 109, .1);
      }
    }

    .eyebrow {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.5625rem;
      font-size: 0.8125rem;
      font-weight: 700;
      color: #4b5360;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 62.4375rem;
      padding: 0.5rem 0.875rem;
      margin-bottom: 1.375rem;
      box-shadow: 0 0.5rem 1.25rem rgba(17, 19, 24, .04);
    }

    h1 {
      position: relative;
      font-size: clamp(2.75rem, 6vw, 4.5rem);
      font-weight: 800;
      letter-spacing: -0.065em;
      line-height: 1.05;
    }

    /* 제목을 누르면 처음 화면(쿼리 없는 /)으로. 결과를 지우는 유일한 방법이라 눌러지는 게 보여야 한다 */
    h1 a {
      color: inherit;
      text-decoration: none;
    }

    .sub {
      position: relative;
      color: #5f6672;
      font-size: 0.9375rem;
      letter-spacing: -0.02em;
      text-align: left;
      margin: 0.5rem 0 1rem;
    }

    .hero .sub {
      font-size: 1.1875rem;
      text-align: center;
      max-width: 64ch;
      margin: 1.375rem auto 2.125rem;
    }

    form {
      position: relative;
      max-width: 41.25rem;
      margin: 0 auto;
    }

    /* 입력창과 버튼을 한 덩어리로 보이게 — 바깥 테두리는 .row가 그리고 input은 투명하게 앉는다 */
    .row {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 0.4375rem;
      box-shadow: var(--shadow);
      transition: border-color .15s, box-shadow .15s;
    }

    .row:focus-within {
      border-color: var(--brand);
      box-shadow: 0 0 0 0.25rem rgba(13, 93, 158, .16);
    }

    #vs {
      width: 100%;
      margin-top: 0.625rem;
      font-size: 0.875rem;
      padding: 0.6875rem 1rem;
      border-radius: var(--r-md);
    }

    input {
      flex: 1;
      min-width: 0;
      padding: 0.8125rem 1rem;
      font-size: 1rem;
      font-family: inherit;
      color: var(--ink);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
    }

    /* .row 안의 주소 입력칸은 테두리를 그리지 않는다 — 바깥 .row가 이미 하나 그렸다 */
    .row input {
      border: none;
      background: transparent;
      font-size: 1.0625rem;
    }

    input::placeholder {
      color: var(--ink-muted);
    }

    input:focus {
      outline: 0.125rem solid var(--brand);
      outline-offset: -1px;
    }

    .row input:focus {
      outline: none;
    }

    button {
      padding: 0 1.5rem;
      min-height: 3.25rem;
      font-size: 0.9375rem;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      background: var(--btn);
      color: var(--page);
      border: 1px solid transparent;
      border-radius: 0.875rem;
      white-space: nowrap;
      transition: .3s ease;
    }

    button:hover:not(:disabled) {
      transform: translateY(-0.125rem);
      box-shadow: 0 0.875rem 1.875rem rgba(12, 15, 20, .16);
    }

    button:active:not(:disabled) {
      transform: translateY(0);
    }

    button:disabled {
      opacity: 0.45;
      cursor: wait;
    }

    .error {
      color: var(--critical);
      font-weight: 600;
    }

    .finalurl {
      color: var(--ink-muted);
      font-size: 0.8125rem;
      margin-bottom: 1.125rem;
      word-break: break-all;
    }

    /* ── 점수 카드 ─────────────────────────────────────────────────── */
    .tiles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.875rem;
      margin-bottom: 1.875rem;
    }

    @media (max-width: 760px) {

      /* 폰에서 타일을 세로로 쌓으면 화면을 다 먹는다 — 3개 한 줄 스코어보드로 유지하고 줄인다.
         minmax(0,1fr): 내용(숫자·등급 알약)이 열을 강제로 넓혀 화면 밖으로 미는 것 방지 */
      .tiles {
        gap: 0.5rem;
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }

      .tile {
        min-width: 0;
      }
    }

    .tile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 1.5rem;
      box-shadow: var(--shadow-sm);
      padding: 1.625rem 1.75rem 1.5rem;
    }

    .tile .label {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--ink-2);
      letter-spacing: 0.0375rem;
      text-transform: uppercase;
    }

    .tile .desc {
      font-size: 0.78125rem;
      color: var(--ink-muted);
      margin-top: 0.125rem;
    }

    .scorerow {
      display: flex;
      align-items: baseline;
      gap: 0.25rem;
      margin-top: 0.375rem;
    }

    .tile .num {
      font-size: 3.5rem;
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.125rem;
      font-variant-numeric: tabular-nums;
    }

    .tile .unit {
      font-size: 1.0625rem;
      color: var(--ink-muted);
    }

    /* 등급 글자는 숫자와 크기로 경쟁하면 안 된다 — 알약으로 눌러 오른쪽 끝에 붙인다 */
    .tile .gr {
      font-size: 0.9375rem;
      font-weight: 800;
      letter-spacing: 0.03125rem;
      margin-left: auto;
      align-self: center;
      padding: 0.25rem 0.8125rem;
      border-radius: 62.4375rem;
      background: var(--brand-soft);
      color: var(--brand-ink);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      font-size: 0.78125rem;
      font-weight: 700;
      margin-top: 0.25rem;
    }

    .badge .dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
    }

    section {
      margin-bottom: 1.875rem;
    }

    /* 섹션 제목 앞의 짧은 막대 — 카드가 계속 이어지는 화면에서 단락 시작을 표시한다 */
    section>h2 {
      display: flex;
      align-items: center;
      gap: 0.5625rem;
      font-size: 1.1875rem;
      font-weight: 700;
      letter-spacing: -0.01875rem;
      margin-bottom: 0.75rem;
    }

    section>h2::before {
      content: "";
      width: 0.25rem;
      height: 1.125rem;
      border-radius: 0.125rem;
      background: var(--brand);
      flex-shrink: 0;
    }

    .group {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 1.5rem;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .group+.group {
      margin-top: 0.75rem;
    }

    .group-title {
      font-size: 0.78125rem;
      font-weight: 700;
      color: var(--ink-2);
      letter-spacing: 0.0125rem;
      padding: 0.625rem 1.375rem 0.375rem;
    }

    .item {
      display: flex;
      gap: 0.625rem;
      padding: 0.5625rem 1.375rem;
      border-top: 1px solid var(--hairline);
    }

    .item .mark {
      font-weight: 700;
      flex-shrink: 0;
      width: 1.125rem;
      text-align: center;
    }

    .item .name {
      font-weight: 600;
    }

    .item .msg {
      color: var(--ink-2);
      font-size: 0.875rem;
    }

    .pass .mark {
      color: var(--good-text);
    }

    .fail .mark {
      color: var(--critical);
    }

    .ref .mark {
      color: var(--ink-muted);
    }

    .empty {
      padding: 0.625rem 1.375rem;
      color: var(--ink-muted);
      font-size: 0.875rem;
      border-top: 1px solid var(--hairline);
    }

    /* 체크리스트 표 — ID·항목·상태·내용 4열. 이름과 설명이 열로 정렬돼야 훑어읽기가 된다 */
    .checks {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
      table-layout: fixed;
    }

    .checks th {
      font-size: 0.6875rem;
      font-weight: 700;
      color: var(--ink-muted);
      letter-spacing: 0.03125rem;
      text-transform: uppercase;
      text-align: left;
      padding: 0.5625rem 0.75rem;
      background: var(--page);
      border-bottom: 1px solid var(--border);
    }

    .checks td {
      padding: 0.625rem 0.75rem;
      border-top: 1px solid var(--hairline);
      vertical-align: top;
    }

    /* table-layout:fixed 라 열 폭을 넘는 내용은 그냥 옆 칸으로 삐져나간다.
       열 폭을 아무리 맞춰도 예외는 생기므로(긴 URL·영문 감사 제목) 여기서 한 번에 막는다 */
    .checks th,
    .checks td {
      overflow-wrap: anywhere;
    }

    /* 좁은 화면에서 고정폭 열이 서로 밀지 않게 — 눌러 겹치는 대신 가로로 스크롤시킨다 */
    .tablewrap {
      overflow-x: auto;
    }

    .tablewrap .checks {
      min-width: 35rem;
    }

    .checks tbody tr:first-child td {
      border-top: 0;
    }

    .checks th:first-child,
    .checks td:first-child {
      padding-left: 1.375rem;
    }

    .checks th:last-child,
    .checks td:last-child {
      padding-right: 1.375rem;
    }

    .checks .c-id {
      width: 3.875rem;
      color: var(--ink-muted);
      font-size: 0.75rem;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .checks .c-name {
      width: 30%;
      font-weight: 600;
      word-break: break-all;
    }

    .checks .c-mark {
      width: 4rem;
      text-align: center;
      font-weight: 700;
    }

    .checks .c-body {
      color: var(--ink-2);
    }

    .checks .c-num {
      width: 5.75rem;
      font-weight: 600;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .checks .c-tag {
      width: 15%;
      font-weight: 600;
    }

    .checks .c-url {
      width: 30%;
      font-weight: 600;
      word-break: break-all;
    }

    .checks tr.pass .c-mark {
      color: var(--good-text);
    }

    .checks tr.fail .c-mark {
      color: var(--critical);
    }

    .checks tr.ref .c-mark {
      color: var(--ink-muted);
    }

    /* ── Executive Summary ─────────────────────────────────────────── */
    .exec-row {
      display: grid;
      grid-template-columns: 8.125rem 3.25rem 1fr 2.125rem;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 1.375rem;
    }

    .exec-label {
      font-weight: 600;
      font-size: 0.875rem;
    }

    .exec-num {
      font-size: 1.375rem;
      font-weight: 700;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .exec-gr {
      font-size: 0.8125rem;
      font-weight: 700;
    }

    .bar {
      height: 0.5rem;
      border-radius: 62.4375rem;
      background: var(--hairline);
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      border-radius: 62.4375rem;
      transition: width .5s cubic-bezier(.2, .8, .2, 1);
    }

    /* 종합 판정 — 숫자만 보고 상태를 못 읽는 사람을 위한 한 문단 */
    .verdict p {
      padding: 0.375rem 1.375rem 0.625rem;
      font-size: 0.90625rem;
      line-height: 1.75;
    }

    .verdict .v-warn {
      color: var(--critical);
    }

    .verdict .v-note {
      color: var(--ink-2);
      font-size: 0.8125rem;
      border-top: 1px solid var(--hairline);
      padding-top: 0.625rem;
    }

    /* 사실 수치 4칸 — 검사 페이지 수·Critical·Warning·Information */
    .facts {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      background: var(--hairline);
      border-top: 1px solid var(--hairline);
    }

    .fact {
      background: var(--surface);
      padding: 0.875rem 1.375rem;
    }

    .fact .n {
      font-size: 1.75rem;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.05rem;
      font-variant-numeric: tabular-nums;
    }

    .fact .k {
      font-size: 0.71875rem;
      font-weight: 700;
      color: var(--ink-muted);
      letter-spacing: 0.025rem;
      text-transform: uppercase;
    }

    /* ── 문제 분포 가로 막대 (§4) ───────────────────────────────────── */
    .chart-row {
      display: grid;
      grid-template-columns: minmax(7.5rem, 12.5rem) 1fr 3.875rem;
      align-items: center;
      gap: 0.75rem;
      padding: 0.375rem 1.375rem;
      font-size: 0.8125rem;
    }

    .chart-label {
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chart-track {
      background: var(--hairline);
      border-radius: 62.4375rem;
      height: 0.875rem;
    }

    .chart-fill {
      height: 100%;
      border-radius: 62.4375rem;
      min-width: 0.1875rem;
      transition: width .5s cubic-bezier(.2, .8, .2, 1);
    }

    .chart-val {
      text-align: right;
      font-variant-numeric: tabular-nums;
      color: var(--ink-2);
      white-space: nowrap;
    }

    /* ── 우선순위 배지 (§8) ─────────────────────────────────────────── */
    .pri {
      font-size: 0.65625rem;
      font-weight: 800;
      letter-spacing: 0.025rem;
      border-radius: 62.4375rem;
      padding: 0.125rem 0.5625rem;
      color: #fff;
      white-space: nowrap;
    }

    .pri-1 {
      background: var(--critical);
    }

    .pri-2 {
      background: var(--warning);
      color: #3a2a00;
    }

    .pri-3 {
      background: var(--ink-muted);
    }

    /* ── CWV Threshold Gauge (§5) ──────────────────────────────────── */
    .gauge {
      padding: 0.75rem 1.25rem;
      border-top: 1px solid var(--hairline);
    }

    .gauge-head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }

    .gauge-val {
      margin-left: auto;
      font-weight: 700;
      font-size: 0.9375rem;
      white-space: nowrap;
    }

    .gauge-track {
      position: relative;
      display: flex;
      height: 0.75rem;
      border-radius: 62.4375rem;
      overflow: visible;
    }

    .gauge-seg:first-child {
      border-radius: 0.1875rem 0 0 0.1875rem;
    }

    .gauge-seg:last-of-type {
      border-radius: 0 0.1875rem 0.1875rem 0;
    }

    .gauge-mark {
      position: absolute;
      top: -0.3125rem;
      width: 0.1875rem;
      height: 1.375rem;
      background: var(--ink);
      transform: translateX(-1px);
    }

    .gauge-scale {
      position: relative;
      height: 1.125rem;
      font-size: 0.6875rem;
      color: var(--ink-muted);
      font-variant-numeric: tabular-nums;
    }

    .gauge-scale span {
      position: absolute;
      top: 0.125rem;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    /* ── 페이지 유형 카드 (§9·§10) ─────────────────────────────────── */
    .tstat {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem 1.125rem;
      font-size: 0.8125rem;
      color: var(--ink-2);
      margin: 0.125rem 0 0.375rem;
    }

    .tstat b {
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }

    /* ── 이력 라인차트 (§15) ────────────────────────────────────────── */
    .hchart {
      width: 100%;
      height: auto;
      display: block;
    }

    .refnote {
      padding: 0.5rem 1.25rem 0.25rem;
      color: var(--ink-muted);
      font-size: 0.8125rem;
    }

    .plink {
      color: var(--ink);
      font-weight: 600;
      word-break: break-all;
    }

    .pscore {
      color: var(--ink-2);
      font-size: 0.8125rem;
      margin-left: 0.5rem;
      white-space: nowrap;
    }

    .ptag {
      /* 태그가 여러 개면 태그 단위로 줄바꿈된다 — 태그 안에서는 절대 안 끊긴다 */
      display: inline-block;
      white-space: nowrap;
      margin: 0.125rem 0 0.125rem 0.25rem;
      font-size: 0.6875rem;
      font-weight: 700;
      color: var(--ink-2);
      border: 1px solid var(--border);
      border-radius: 62.4375rem;
      padding: 1px 0.5rem;
      vertical-align: 0.125rem;
    }

    footer,
    .score-note {
      color: var(--ink-muted);
      font-size: 0.75rem;
      line-height: 1.75;
      margin-top: 3rem;
      padding-top: 1.375rem;
      border-top: 1px solid var(--border);
    }

    .cmp {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
      /* 이력표는 7열이다. 좁은 화면에서 눌러 뭉개는 대신 가로 스크롤로 받는다
         (감싼 .group 은 overflow-x:auto — 예전엔 hidden 이라 잘려서 아예 안 보였다) */
      min-width: 35rem;
    }

    .cmp th,
    .cmp td {
      text-align: left;
      padding: 0.6875rem 1.375rem;
      border-top: 1px solid var(--hairline);
    }

    .cmp thead th {
      border-top: none;
      font-size: 0.8125rem;
      color: var(--ink-2);
    }

    .chip {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 600;
      background: var(--page);
      border: 1px solid var(--border);
      border-radius: 62.4375rem;
      padding: 0.1875rem 0.6875rem;
      margin: 0.1875rem 0.25rem 0.1875rem 0;
    }

    .chip-ok {
      color: var(--good-text);
    }

    .chip-bad {
      color: var(--critical);
      border-color: var(--critical);
    }

    .chipbox {
      padding: 0.875rem 1.25rem;
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }

    .toolbar button {
      min-height: 0;
      font-size: 0.8125rem;
      font-weight: 700;
      padding: 0.5625rem 1rem;
      background: var(--surface);
      color: var(--ink);
      border: 1px solid var(--border);
      border-radius: 62.4375rem;
      box-shadow: var(--shadow-sm);
    }

    .axes {
      display: grid;
      gap: 0.5rem;
    }

    .axis {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-sm);
      padding: 0.75rem 1.125rem;
    }

    .axis .lbl {
      display: flex;
      justify-content: space-between;
      font-size: 0.8125rem;
      gap: 0.5rem;
    }

    .axis .bar {
      height: 0.5rem;
      background: var(--hairline);
      border-radius: 0.25rem;
      overflow: hidden;
      margin-top: 0.375rem;
    }

    .axis .bar>div {
      height: 100%;
      background: var(--ink);
      border-radius: 0.25rem;
    }

    .fixbox {
      margin-top: 0.375rem;
      font-size: 0.8125rem;
    }

    .fixbox summary {
      cursor: pointer;
      font-weight: 600;
      color: var(--ink-2);
    }

    /* 페이지별 진단 안에 접혀 들어간 체크리스트 — 바깥 목록과 구분되게 왼쪽에 선을 둔다 */
    .subchecks {
      border-left: 0.125rem solid var(--hairline);
      padding-left: 0.625rem;
      margin-top: 0.375rem;
    }

    .subchecks .item {
      padding: 0.375rem 0;
    }

    .subchecks .checks th,
    .subchecks .checks td {
      padding: 0.375rem 0.5rem;
    }

    .subchecks .checks th:first-child,
    .subchecks .checks td:first-child {
      padding-left: 0;
    }

    .subchecks .checks th:last-child,
    .subchecks .checks td:last-child {
      padding-right: 0;
    }

    .opts {
      display: flex;
      flex-wrap: wrap;
      gap: 0.875rem;
      align-items: center;
      font-size: 0.8125rem;
      color: var(--ink-2);
    }

    .opts label {
      display: flex;
      align-items: center;
      gap: 0.375rem;
    }

    .opts select {
      padding: 0.4375rem 0.6875rem;
      font-size: 0.8125rem;
      font-family: inherit;
      color: var(--ink);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
    }

    .tier {
      font-size: 0.6875rem;
      padding: 1px 0.375rem;
      border-radius: 62.4375rem;
      border: 1px solid var(--hairline);
      color: var(--ink-2);
      white-space: nowrap;
      cursor: help;
    }

    .tier-T1 {
      border-color: var(--good-text);
      color: var(--good-text);
    }

    /* 근거 등급 색은 상태색과 독립이다(§16) — T3 학술 연구는 파랑, T4 근거 없음은 옅은 회색 */
    .tier-T3 {
      border-color: var(--research);
      color: var(--research);
    }

    .tier-T4 {
      color: var(--ink-muted);
      opacity: .75;
    }

    .srclink {
      font-size: 0.6875rem;
      color: var(--ink-muted);
      text-decoration: none;
      border-bottom: 1px dotted var(--hairline);
      white-space: nowrap;
    }

    .srclink:hover {
      color: var(--ink);
    }

    /* 이력 표의 "이번 검사와 비교" 소형 알약 버튼 (근거 등급 필터를 없애며 .tierbtn에서 분리) */
    .cmpbtn {
      min-height: 0;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.25rem 0.6875rem;
      border-radius: 62.4375rem;
      border: 1px solid var(--ink-2);
      background: transparent;
      color: var(--ink);
      cursor: pointer;
    }

    .form-note {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.375rem;
      margin-top: 0.875rem;
      font-size: 0.78125rem;
      color: var(--ink-muted);
    }

    .form-note span {
      color: var(--good);
      font-weight: 800;
    }

    .form-note b {
      color: var(--border);
    }


    /* ── 홈 화면 최근 검사 ───────────────────────────────────────────
       히어로 아래, 검사 전에만 보인다. 리포트가 열리면 숨는다. */
    .recent {
      margin-bottom: 1.875rem;
    }

    body.report-mode .recent {
      display: none;
    }

    .recent-head {
      display: flex;
      align-items: center;
      gap: 0.5625rem;
      margin-block: 0.875rem;
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--ink-2);
    }

    .recent-head i {
      width: 0.4375rem;
      height: 0.4375rem;
      border-radius: 50%;
      background: var(--good);
      box-shadow: 0 0 0 0.3125rem rgba(35, 163, 109, .12);
      flex-shrink: 0;
    }

    .recent-list {
      display: grid;
      /* grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); */
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.625rem;
    }

    .rc {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 1rem;
      box-shadow: var(--shadow-sm);
      padding: 0.9375rem 1.125rem;
    }

    .rc-top {
      display: flex;
      align-items: baseline;
      gap: 0.625rem;
    }

    .rc-url {
      font-weight: 700;
      font-size: 0.90625rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .rc-at {
      margin-left: auto;
      font-size: 0.71875rem;
      color: var(--ink-muted);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .rc-scores {
      display: flex;
      /* flex-wrap: wrap; */
      gap: 0.375rem;
      margin-top: 0.625rem;
    }

    .rc-s {
      flex: 1;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 0.3125rem;
      font-size: 0.75rem;
      font-weight: 700;
      background: var(--page);
      /* border-radius: 62.4375rem; */
      border-radius: 0.625rem;
      padding: 0.25rem 0.625rem;
      white-space: nowrap;
    }

    .rc-s span {
      color: var(--ink-muted);
      font-weight: 600;
    }

    .rc-s b {
      font-variant-numeric: tabular-nums;
    }

    .rc-empty {
      color: var(--ink-muted);
      font-size: 0.875rem;
    }

    /* ── 콘솔형 리포트 셸 ────────────────────────────────────────────
       입력 화면(히어로)은 그대로 두고, 결과가 나오면 그 아래를 리포트 콘솔로 바꾼다.
       왼쪽 목차는 섹션 제목을 훑어서 만든다 — 섹션 템플릿 15곳을 건드리지 않는다. */
    .console {
      display: grid;
      grid-template-columns: 16.25rem 1fr;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 1.5rem;
      box-shadow: var(--shadow);
      /* hidden은 스크롤 컨테이너를 만들어 자식 sticky(목차·헤드)를 죽인다.
         clip은 모서리만 자르고 sticky를 살린다 — 구형 브라우저는 hidden으로 후퇴 */
      overflow: hidden;
      overflow: clip;
    }

    /* 리포트가 떠 있는 동안만 화면을 넓게 쓴다 */
    body.report-mode .wrap {
      max-width: 90rem;
      padding-top: 3.75rem;
    }

    /* 리포트 화면에서는 리포트만 남긴다 — 히어로·푸터를 숨기고(최근 목록은 위에서 이미 숨김),
       좌측 상단 "처음으로" 버튼이 유일한 복귀 경로다 */
    .home-btn {
      display: none;
    }

    /* 처음으로 버튼은 두 개다 — 상단 제자리 버튼(항상)과 좌하단 플로팅 버튼(.home-float,
       스크롤 시에만). 플로팅 쪽은 우하단 "맨 위로"(.top-btn)와 짝 */
    body.report-mode .home-btn {
      display: inline-flex;
      align-items: center;
      padding: 0.5625rem 1rem;
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--ink);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 62.4375rem;
      text-decoration: none;
      box-shadow: var(--shadow-sm);
    }

    body.report-mode .home-btn:not(.home-float) {
      margin-bottom: 1.125rem;
    }

    .home-btn.home-float {
      position: fixed;
      left: 1rem;
      bottom: 1rem;
      z-index: 40;
      margin: 0;
      box-shadow: var(--shadow-lg);
    }

    /* 플로팅 쪽은 스크롤을 내렸을 때만 */
    body.report-mode .home-btn.home-float {
      display: none;
    }

    body.report-mode.scrolled .home-btn.home-float {
      display: inline-flex;
    }

    body.report-mode .home-btn:hover {
      border-color: var(--brand);
    }

    body.report-mode .hero,
    body.report-mode footer,
    body.report-mode .score-note {
      display: none;
    }

    .console-head {
      grid-column: 1 / -1;
      position: sticky;
      top: 0.3125rem;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
      min-height: 4.125rem;
      padding: 0.75rem 1.375rem;
      border-radius: 1.5rem 1.5rem 0 0;
      background: #081327;
      color: #dbe2ef;
    }

    .console-head .ch-brand {
      display: flex;
      align-items: center;
      gap: 0.5625rem;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: .12em;
      color: #fff;
      white-space: nowrap;
    }

    .console-head .ch-brand i {
      width: 0.4375rem;
      height: 0.4375rem;
      border-radius: 50%;
      background: #baff39;
      box-shadow: 0 0 0.625rem #baff39;
      flex-shrink: 0;
    }

    .console-head .ch-url {
      font-size: 0.8125rem;
      color: #cad3e4;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .console-head .ch-meta {
      font-size: 0.6875rem;
      letter-spacing: .1em;
      color: #8795af;
      white-space: nowrap;
    }

    .console-head .toolbar {
      margin: 0 0 0 auto;
      gap: 0.375rem;
    }

    /* 어두운 바 위에서는 툴바 버튼도 어두운 옷을 입는다 */
    .console-head .toolbar button {
      background: transparent;
      border: 1px solid #36435b;
      color: #dbe2ef;
      border-radius: 0.5rem;
      padding: 0.5rem 0.75rem;
      font-size: 0.75rem;
      box-shadow: none;
    }

    .console-head .toolbar button:hover:not(:disabled) {
      background: rgba(255, 255, 255, .07);
      transform: none;
      box-shadow: none;
    }

    /* 점수 띠 — 탭 바깥이라 어느 탭을 눌러도 그대로 남는다 */
    .console-scores {
      grid-column: 1 / -1;
      padding: 1.375rem 1.625rem;
      background: var(--page);
      border-bottom: 1px solid var(--border);
    }

    .console-scores .tiles {
      margin-bottom: 0;
    }

    @media (max-width: 1080px) {
      .console-scores {
        padding: 1rem 0.875rem;
      }
    }

    .console-nav {
      border-right: 1px solid var(--border);
      background: var(--surface);
      padding: 1.375rem 0.875rem 1.625rem;
      position: sticky;
      /* 헤드바 실측 높이(--head-h)는 app.js가 넣어준다 — 값이 없으면 예전 고정값으로 후퇴 */
      top: var(--head-h, 4.125rem);
      align-self: start;
      max-height: calc(100vh - var(--head-h, 4.125rem));
      overflow-y: auto;
    }

    /* 드롭다운 토글 버튼은 67.5rem 이하 전용 — 넓은 화면에선 링크 목록만 보인다 */
    .console-nav .cn-toggle {
      display: none;
    }

    .console-nav .cn-meta {
      padding: 0 0.625rem 1.125rem;
      border-bottom: 1px solid var(--border);
      margin-bottom: 0.875rem;
    }

    .console-nav .cn-meta small {
      display: block;
      font-size: 0.59375rem;
      letter-spacing: .1em;
      color: #97a0af;
      font-weight: 700;
    }

    .console-nav .cn-meta b {
      display: block;
      font-size: 0.78125rem;
      margin-top: 0.25rem;
      font-variant-numeric: tabular-nums;
    }

    .console-nav a {
      display: grid;
      grid-template-columns: 1.625rem 1fr;
      gap: 0.5rem;
      align-items: baseline;
      padding: 0.5625rem 0.625rem;
      border-radius: 0.625rem;
      font-size: 0.84375rem;
      font-weight: 600;
      color: var(--ink-2);
      text-decoration: none;
      line-height: 1.35;
    }

    .console-nav a:hover {
      background: var(--page);
      color: var(--ink);
    }

    .console-nav a.on {
      background: var(--brand-soft);
      color: var(--brand-ink);
    }

    .console-nav a em {
      font-style: normal;
      font-size: 0.65625rem;
      font-weight: 800;
      letter-spacing: .06em;
      color: var(--ink-muted);
      font-variant-numeric: tabular-nums;
    }

    .console-nav a.on em {
      color: var(--brand);
    }

    .console-body {
      padding: 1.625rem 1.625rem 2.125rem;
      min-width: 0;
      box-sizing: border-box;
      /* 탭 전환 스크롤이 sticky 헤드바(4.125rem)에 가리지 않게 */
      scroll-margin-top: calc(var(--head-h, 4.125rem) + 0.5rem);
    }

    /* 셸 안에서는 섹션 카드가 이미 흰 배경 위라 그림자를 뺀다 — 이중으로 뜨면 지저분하다 */
    .console-body .group,
    .console-body .tile {
      box-shadow: none;
    }

    .console-body section:last-child {
      margin-bottom: 0;
    }

    /* 탭 — 고른 섹션 하나만 보인다 */
    .console-body section {
      display: none;
    }

    .console-body section.on {
      display: block;
    }

    @media (max-width: 1080px) {
      .console {
        grid-template-columns: 1fr;
      }

      /* 모바일 헤드바는 2줄 — 1줄: 브랜드·주소, 2줄: 버튼(넘치면 그 줄에서 가로 스크롤).
         모든 치수를 명시해 높이를 5.5rem(10+20+8+40+10)로 고정 — 아래 목차 top(5.5rem)과 짝이다 */
      .console-head {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.625rem 0.875rem;
        min-height: 0;
      }

      .console-head .ch-meta {
        display: none;
      }

      .console-head .ch-brand {
        flex-shrink: 0;
        line-height: 1.25rem;
      }

      .console-head .ch-url {
        line-height: 1.25rem;
      }

      .console-head .toolbar {
        flex-basis: 100%;
        min-width: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        margin: 0;
      }

      .console-head .toolbar button {
        min-height: 2.5rem;
        flex-shrink: 0;
      }

      /* 목차 드롭다운 — 셀렉트박스처럼 생긴 토글 버튼(.cn-toggle, 현재 섹션 표시)이 있고,
         누르면(.open) 그 아래로 전체 목록(nav 링크)이 펼쳐진다 */
      .console-nav {
        position: sticky;
        top: var(--head-h, 5.5rem);
        z-index: 15;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        display: block;
        padding: 0.625rem 0.875rem;
      }

      .console-nav.open {
        max-height: 70vh;
        overflow-y: auto;
      }

      .console-nav .cn-meta {
        display: none;
      }

      .console-nav .cn-toggle {
        display: block;
        width: 100%;
        position: relative;
        min-height: 0;
        padding: 0.625rem 2.375rem 0.625rem 0.75rem;
        text-align: left;
        font-size: 0.84375rem;
        font-weight: 600;
        color: var(--ink);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 0.625rem;
      }

      .console-nav .cn-toggle::after {
        content: "▾";
        position: absolute;
        right: 0.8125rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-muted);
      }

      .console-nav.open .cn-toggle::after {
        content: "▴";
      }

      /* 목록은 열렸을 때만, 토글 버튼 아래로 */
      .console-nav a {
        display: none;
        padding: 0.625rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: 0.625rem;
        background: var(--surface);
      }

      .console-nav.open a {
        display: grid;
        margin-top: 0.375rem;
      }

      /* 좁은 화면은 2줄 헤드바(5.5rem)+접힌 목차(약 3.75rem)가 위에 붙어 있다 */
      .console-body {
        scroll-margin-top: calc(var(--head-h, 5.5rem) + 4.25rem);
      }

      .console-body {
        padding: 1.125rem 0.875rem 1.625rem;
      }
    }


    /* ── 태블릿·작은 노트북 (67.5rem 이하) ──────────────────────────────
       PC 폭(75rem)에 맞춰 잡은 여백·글자 크기가 이 구간에서 서로 밀기 시작한다.
       열 구성은 그대로 두고 밀도만 줄인다 — 여기서 열을 접으면 오히려 읽기 나빠진다 */
    @media (max-width: 1080px) {

      body {
        padding: 0 1rem 3rem;
      }

      .hero {
        padding: 2.875rem 1.5rem 2.5rem;
        border-radius: var(--r-lg);
      }

      h1 {
        font-size: 2.5rem;
      }

      .tile {
        padding: 1.125rem 1.25rem;
      }

      /* 4칸이 한 줄에 들어가면 숫자가 붙어 읽히지 않는다 — 67.5rem부터 2개씩 */
      .facts {
        grid-template-columns: repeat(2, 1fr);
      }

      .tile .num {
        font-size: 2.875rem;
      }

      .cmp th,
      .cmp td {
        padding: 0.5625rem 0.75rem;
      }

      .checks th:first-child,
      .checks td:first-child {
        padding-left: 1rem;
      }

      .checks th:last-child,
      .checks td:last-child {
        padding-right: 1rem;
      }
    }

    /* ── 폰·좁은 창 (47.5rem 이하) ───────────────────────────────────────
       여기서부터는 밀도만으로 안 되고 열 구성을 바꾼다.
       그래도 남는 폭이 모자라면 .tablewrap / .group 이 가로 스크롤로 받아준다 */
    @media (max-width: 760px) {

      body {
        padding: 0 0.75rem 2.5rem;
      }

      .hero {
        padding: 2.25rem 1.125rem 2rem;
      }

      h1 {
        font-size: 1.875rem;
      }

      .hero .sub {
        font-size: 0.875rem;
        margin-bottom: 1.125rem;
      }

      /* 좁은 폭에서 한 줄에 붙이면 주소가 열 글자도 안 보인다 — 버튼을 아래로 내린다 */
      .row {
        flex-wrap: wrap;
      }

      .row input {
        flex: 1 1 100%;
        font-size: 1rem;
      }

      .row button {
        flex: 1 1 100%;
      }

      section>h2 {
        font-size: 1.0625rem;
      }

      .checks .c-id {
        display: none;
      }

      .checks .c-name {
        width: 26%;
      }

      /* 짧은 글자·숫자 열은 PC 폭 그대로 두면 정작 내용 열이 6.25rem대로 눌린다.
         여기 들어가는 건 'Information'·'34 / 34' 수준이라 이만큼이면 줄바꿈 없이 들어간다 */
      .checks .c-tag {
        width: 6rem;
      }

      .checks .c-num {
        width: 4rem;
      }

      .checks .c-url {
        width: 34%;
      }

      .checks th,
      .checks td {
        padding: 0.5rem 0.5rem;
        font-size: 0.8125rem;
      }

      .checks th:first-child,
      .checks td:first-child {
        padding-left: 0.875rem;
      }

      .checks th:last-child,
      .checks td:last-child {
        padding-right: 0.875rem;
      }

      /* 표 셀은 0.875rem로 줄었는데 제목·설명만 1.375rem이면 왼쪽 줄이 어긋나 보인다 */
      .group-title,
      .refnote,
      .empty,
      .verdict p,
      .gauge,
      .chart-row,
      .item {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
      }

      .fact {
        padding: 0.75rem 0.875rem;
      }

      .exec-row {
        grid-template-columns: 5.75rem 2.5rem 1fr 1.75rem;
        gap: 0.5rem;
        padding: 0.5rem 0.875rem;
      }

      .exec-num {
        font-size: 1.1875rem;
      }

      /* 막대가 너무 짧아지면 길이 비교라는 목적 자체가 사라진다 — 라벨을 줄여 막대를 살린다 */
      .chart-row {
        grid-template-columns: minmax(5.25rem, 8.25rem) 1fr 3.25rem;
        gap: 0.5rem;
        font-size: 0.75rem;
      }

      .toolbar button {
        font-size: 0.75rem;
        padding: 0.4375rem 0.625rem;
      }

      /* 점수 타일 축소판 — 설명은 숨기고 숫자·등급만 남긴다 */
      .tile {
        padding: 0.75rem 0.875rem;
        border-radius: 0.875rem;
      }

      .tile .desc {
        display: none;
      }

      .tile .label {
        font-size: 0.65625rem;
        letter-spacing: 0.01875rem;
      }

      .tile .num {
        font-size: 1.75rem;
        letter-spacing: -1px;
      }

      .tile .unit {
        font-size: 0.75rem;
      }

      .tile .gr {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.5rem;
      }

      .scorerow {
        flex-wrap: wrap;
        margin-top: 0.125rem;
      }
    }

    @media print {

      .srclink {
        display: none;
      }
    }

    .disclaimer {
      margin: -0.25rem 0 1.125rem;
      font-size: 0.8125rem;
      line-height: 1.6;
    }

    .fixbox ul {
      margin: 0.375rem 0;
      padding-left: 1.125rem;
      color: var(--ink-2);
      word-break: break-all;
      max-height: 20rem;
      overflow-y: auto;
    }

    .fixbox pre {
      background: var(--page);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 0.75rem 0.875rem;
      overflow-x: auto;
      font-size: 0.75rem;
      margin: 0.5rem 0;
      white-space: pre-wrap;
      word-break: break-all;
      font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    }

    .fixrow {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      margin-top: 0.25rem;
      flex-wrap: wrap;
    }

    .minibtn {
      min-height: 0;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.375rem 0.8125rem;
      background: var(--surface);
      color: var(--ink);
      border: 1px solid var(--border);
      border-radius: 62.4375rem;
    }

    .minibtn.ok {
      color: var(--good-text);
      border-color: var(--good-text);
    }

    @media print {

      .console-nav,
      .console-head,
      form,
      footer,
      .toolbar,
      .minibtn {
        display: none;
      }

      body {
        padding: 0;
      }

      /* 탭으로 숨긴 섹션도 PDF에는 전부 들어가야 한다 — 한 장만 담긴 리포트는 리포트가 아니다.
         무조건 장을 나누면(break-before: page) 짧은 섹션이 한 장을 통째로 차지해 여백이 낭비된다.
         대신 "남은 공간에 통째로 들어가면 이어 붙이고, 안 들어가면 새 장부터"로 잡는다 —
         한 장보다 긴 섹션은 브라우저가 avoid를 무시하고 알아서 나눈다. */
      .console-body section {
        display: block !important;
        break-before: auto;
        break-inside: avoid;
        margin-bottom: 1.25rem;
      }

      /* 첫 섹션(요약)은 통째 이동 금지 — 검사 날짜·점수 띠만 남고 요약이 다음 장으로
         넘어가면 첫 장이 텅 비어 보인다. 같은 장에서 이어 붙인다 */
      .console-body section:first-child {
        break-inside: auto;
      }

      /* 하단 가운데에 페이지 번호(CSS 페이지 카운터).
         브라우저 자체 바닥글(URL·날짜)은 인쇄 대화상자에서 "머리글 및 바닥글"을 끄면 사라진다 */
      @page {
        size: A4 landscape;
        margin: 12mm 14mm 14mm;

        @bottom-center {
          content: counter(page) " / " counter(pages);
          font-size: 9px;
          color: #8a93a3;
        }
      }

      /* 점수 띠는 첫 장 머리에 한 번만 */
      .console-scores {
        break-after: avoid;
        break-inside: avoid;
      }

      .console {
        border: 0;
        box-shadow: none;
        border-radius: 0;
        display: block;
      }

      .console-body {
        padding: 0;
      }

      .fixbox pre {
        page-break-inside: avoid;
      }

      /* PDF엔 스크롤이 없다 — 화면에서 잘라 두던 목록·표를 통째로 편다 */
      .fixbox ul {
        max-height: none;
        overflow: visible;
      }

      .cmp,
      .checks,
      [style*="overflow-x"] {
        overflow: visible !important;
      }

      /* 한 행·한 카드가 페이지 사이에서 쪼개지지 않게 */
      .checks tr,
      .checks td,
      .checks th,
      .item,
      .gauge,
      .chart-row,
      .exec-row,
      .fact,
      .tile {
        break-inside: avoid;
      }

      /* 제목만 남고 내용이 다음 장으로 넘어가는 것 방지 */
      h2,
      .group-title {
        break-after: avoid;
        break-inside: avoid;
      }

      section {
        break-before: auto;
      }

      /* 용지 밖으로 넘치지 않게 — 긴 주소와 코드 (§12·§17) */
      .checks .c-url,
      .plink,
      .c-body {
        word-break: break-all;
        overflow-wrap: anywhere;
      }

      .fixbox pre {
        white-space: pre-wrap;
        word-break: break-all;
        font-size: 0.6875rem;
      }

      /* 흑백 출력 대비 — 막대는 색만으로 구분되므로 테두리를 준다.
         치명도 색 원(sev-dot)도 배경색뿐이라 인쇄 색 보존이 없으면 사라진다 */
      .bar-fill,
      .chart-fill,
      .gauge-seg,
      .sev-dot {
        outline: 1px solid var(--hairline);
        outline-offset: -1px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .hchart,
      .facts,
      .tiles {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      body {
        font-size: 0.75rem;
      }
    }

    /* ── 맨 위로 버튼 — 화면을 좀 내리면 우하단에 뜬다(app.js가 hidden 토글) ── */
    .top-btn {
      position: fixed;
      right: 1rem;
      bottom: 1rem;
      z-index: 40;
      width: 2.75rem;
      height: 2.75rem;
      min-height: 0;
      padding: 0;
      border-radius: 50%;
      font-size: 1.125rem;
      box-shadow: var(--shadow-lg);
    }

    /* 인쇄(PDF 저장)에는 떠 있는 버튼이 나오면 안 된다 */
    @media print {

      .top-btn,
      .home-btn {
        display: none !important;
      }
    }

    /* ── 문의 CTA — 리포트·푸터에서 유일하게 색이 있는 전환 버튼 ───────────
       그라데이션끼리는 transition 보간이 안 된다 — 두 배 폭으로 깔아두고
       background-position을 밀어서 색이 흐르듯 바뀌게 한다 */
    /* 평소엔 정지, hover하면 그라데이션 위치가 밀리며 색이 부드럽게 반전된다.
       그라데이션끼리는 transition 보간이 안 되므로 두 배 폭 배경의 위치 이동으로 처리 */
    .console-head .toolbar button.cta-btn {
      background: linear-gradient(120deg, var(--brand), var(--brand-2), var(--brand));
      background-size: 200% 100%;
      background-position: 0% 50%;
      border: none;
      color: #fff;
      font-weight: 800;
      font-size: 0.8125rem;
      padding: 0 1.125rem;
      transition: background-position .5s ease, transform .3s ease, box-shadow .3s ease;
    }

    /* 툴바 공용 hover(반투명 흰 배경)가 상세도로 이기므로 그라데이션을 다시 세운다.
       hover 동안 그라데이션이 계속 흐른다 — 떼면 transition을 타고 제자리로 */
    .console-head .toolbar button.cta-btn:hover:not(:disabled) {
      background: linear-gradient(120deg, var(--brand), var(--brand-2), var(--brand));
      background-size: 200% 100%;
      animation: cta-flow 2s ease infinite;
    }

    @keyframes cta-flow {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .footer-cta {
      display: inline-flex;
      align-items: center;
      margin-top: 0.875rem;
      padding: 0.75rem 1.5rem;
      border-radius: 62.4375rem;
      background: linear-gradient(120deg, var(--brand), var(--brand-2), var(--brand));
      background-size: 200% 100%;
      background-position: 0% 50%;
      color: #fff;
      font-weight: 800;
      font-size: 0.9375rem;
      text-decoration: none;
      box-shadow: var(--shadow-lg);
      transition: background-position .5s ease, transform .3s ease, box-shadow .3s ease;
    }

    /* ── 공통 전환 — 색·테두리·그림자·이동이 있는 모든 상호작용 요소는 부드럽게 ── */
    a,
    .home-btn,
    .footer-cta,
    .console-nav a,
    .console-nav .cn-toggle,
    .cmpbtn,
    select {
      transition: background-color .3s ease, color .3s ease,
        border-color .3s ease, box-shadow .3s ease, transform .3s ease;
    }

    .footer-cta:hover {
      transform: translateY(-0.125rem);
      box-shadow: 0 0.875rem 1.875rem rgba(13, 93, 158, .35);
      animation: cta-flow 2s ease infinite;
    }

    .cmpbtn:hover {
      border-color: var(--brand);
      color: var(--brand-ink);
    }

    /* ── 사이트 헤더 — designhub.kr/geo 랜딩과 같은 글래스 헤더 ───────── */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(1rem);
      -webkit-backdrop-filter: blur(1rem);
      background: color-mix(in srgb, var(--page) 82%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
      /* body 좌우 패딩과 무관하게 화면 전체 폭을 쓴다 */
      margin: 0 calc(50% - 50vw) 2rem;
      padding: 0 1.25rem;
    }

    .header-inner {
      max-width: 75rem;
      margin: 0 auto;
      height: 4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    /* 로고 아래 서비스명이 붙는 세로 스택 */
    .brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.1875rem;
      color: var(--ink);
      text-decoration: none;
    }

    .brand span {
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--ink-2);
    }

    .brand-logo {
      height: 1.25rem;
      width: auto;
      display: block;
      flex-shrink: 0;
    }

    .site-header .nav {
      display: flex;
      align-items: center;
      gap: 1.375rem;
      font-size: 0.875rem;
      color: var(--ink-2);
    }

    .site-header .nav a {
      color: inherit;
      text-decoration: none;
    }

    .site-header .nav a:hover {
      color: var(--ink);
    }

    .header-cta {
      padding: 0.625rem 1.125rem;
      border-radius: 62.4375rem;
      background: var(--btn);
      color: var(--page);
      font-weight: 700;
      font-size: 0.875rem;
      text-decoration: none;
      white-space: nowrap;
    }

    .header-cta:hover {
      transform: translateY(-0.125rem);
      box-shadow: 0 0.875rem 1.875rem rgba(12, 15, 20, .16);
    }

    /* 리포트 화면에는 콘솔 자체 헤더가 sticky로 있다 — 이중 헤더 방지 */
    body.report-mode .site-header {
      display: none;
    }

    @media (max-width: 760px) {
      .site-header .nav {
        display: none;
      }

    }

    /* ── designhub.kr/geo 랜딩 섹션 이식(2026-09-02) — 전부 .landing 스코프 안에서만 동작한다.
       변수는 검사기 토큰으로 별칭 연결. 리포트 화면에서는 통째로 숨긴다 */
    .landing {
      --bg: var(--page);
      --card: var(--surface);
      --muted: var(--ink-2);
      --line: var(--border);
      --accent: var(--brand);
      --accent-2: var(--brand-2);
      --success: var(--good);
      --dark: var(--btn);
      --radius: 1.75rem;
      --max: 73.75rem;
    }

    body.report-mode .landing {
      display: none;
    }


    .landing .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5625rem;
      min-height: 3.25rem;
      padding: 0 1.375rem;
      border-radius: 0.875rem;
      font-weight: 800;
      transition: .2s ease;
      border: 1px solid transparent
    }

    .landing .btn:hover {
      transform: translateY(-0.125rem)
    }

    .landing .btn-primary {
      background: var(--dark);
      color: #fff;
      box-shadow: 0 0.875rem 1.875rem rgba(12, 15, 20, .16)
    }

    .landing .btn-secondary {
      background: #fff;
      border-color: var(--line)
    }

    .landing .mini-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.625rem;
      margin-top: 0.875rem
    }

    .landing .mini {
      background: #f7f8fb;
      border: 1px solid var(--line);
      border-radius: 1rem;
      padding: 0.875rem
    }

    .landing .mini small {
      display: block;
      color: #8a909a;
      font-size: 0.6875rem
    }

    .landing .mini strong {
      display: block;
      margin-top: 0.3125rem;
      font-size: 0.9375rem
    }

    .landing .mini .ok {
      color: var(--success)
    }

    .landing .trust-strip {
      padding: 1.625rem 0 0
    }

    .landing .trust-card {
      display: grid;
      grid-template-columns: 1.2fr repeat(4, .7fr);
      align-items: center;
      gap: 1.125rem;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 1.25rem;
      padding: 1.25rem 1.5rem;
      color: #777e89;
      font-size: 0.8125rem
    }

    .landing .trust-card strong {
      color: #2c313a
    }

    .landing .trust-item {
      font-weight: 800;
      text-align: center;
      letter-spacing: .01em
    }

    .landing section {
      padding: 3.75rem 0 2.5rem;
    }

    .landing .section-head {
      max-width: 100%;
      margin-bottom: 2.625rem
    }

    .landing .kicker {
      font-size: 0.8125rem;
      font-weight: 900;
      letter-spacing: .08em;
      color: var(--accent);
      text-transform: uppercase
    }

    .landing h2 {
      margin: 0.625rem 0 0.875rem;
      font-size: clamp(2.125rem, 4.5vw, 3.375rem);
      line-height: 1.15;
      letter-spacing: -.055em
    }

    .landing .section-copy {
      font-size: 1.125rem;
      color: var(--muted)
    }

    .landing .problem-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.125rem
    }

    .landing .problem-card {
      min-height: 16.875rem;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1.875rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: var(--shadow)
    }

    .landing .problem-card.dark {
      background: #11151c;
      color: #fff;
      border-color: #11151c
    }

    .landing .problem-card h3 {
      font-size: 1.75rem;
      line-height: 1.28;
      margin: 0 0 0.625rem;
      letter-spacing: -.04em
    }

    .landing .problem-card p {
      margin: 0;
      color: #6c7380
    }

    .landing .problem-card.dark p {
      color: #a7aeba
    }

    .landing .signal {
      font-size: 0.75rem;
      font-weight: 800;
      color: #9197a3
    }

    .landing .signal strong {
      font-size: 2.625rem;
      color: var(--ink);
      display: block;
      line-height: 1;
      margin-top: 0.5rem
    }

    .landing .dark .signal strong {
      color: #fff
    }

    .landing .service-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.875rem
    }

    .landing .service-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 1.375rem;
      padding: 1.5rem;
      min-height: 13.75rem;
      transition: .22s ease
    }

    .landing .service-card:hover {
      transform: translateY(-0.3125rem);
      box-shadow: var(--shadow)
    }

    .landing .service-icon {
      width: 2.625rem;
      height: 2.625rem;
      border-radius: 0.8125rem;
      background: linear-gradient(145deg, #edf0ff, #f3ebff);
      display: grid;
      place-items: center;
      font-weight: 900;
      color: var(--accent);
      margin-bottom: 2.125rem
    }

    .landing .service-card h3 {
      font-size: 1.3125rem;
      margin: 0 0 0.625rem;
      letter-spacing: -.03em
    }

    .landing .service-card p {
      font-size: 0.875rem;
      color: var(--muted);
      margin: 0
    }

    .landing .process-wrap {
      background: #11151c;
      color: #fff;
      border-radius: 2.125rem;
      padding: 2.625rem;
      position: relative;
      overflow: hidden
    }

    .landing .process-wrap::before {
      content: "";
      position: absolute;
      right: -7.5rem;
      bottom: -10rem;
      width: 30rem;
      height: 30rem;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(13, 93, 158, .22), transparent 68%)
    }

    .landing .process-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      margin-top: 2.125rem
    }

    .landing .step {
      position: relative;
      padding: 1.5rem 1.125rem 0.5rem;
      border-top: 1px solid #303640
    }

    .landing .step-no {
      font-size: 0.75rem;
      color: #808997;
      font-weight: 800
    }

    .landing .step h3 {
      font-size: 1.375rem;
      margin: 1.125rem 0 0.5rem
    }

    .landing .step p {
      font-size: 0.875rem;
      color: #a8b0bc;
      margin: 0
    }

    .landing .effects {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 1.75rem;
      align-items: stretch
    }

    .landing .effect-copy {
      background: linear-gradient(145deg, #ffffff, #f5f3ff);
      border: 1px solid var(--line);
      border-radius: 1.875rem;
      padding: 2.125rem
    }

    .landing .effect-copy h3 {
      font-size: 2rem;
      line-height: 1.2;
      letter-spacing: -.04em;
      margin: 0 0 0.875rem
    }

    .landing .effect-copy p {
      color: var(--muted)
    }

    .landing .metric-board {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 1.875rem;
      padding: 1.75rem
    }

    .landing .metric-title {
      display: flex;
      justify-content: space-between;
      gap: 0.9375rem;
      align-items: center;
      margin-bottom: 1.5rem
    }

    .landing .metric-title strong {
      font-size: 1.125rem
    }

    .landing .metric-title small {
      color: #949aa5
    }

    .landing .metric-row {
      padding: 1.125rem 0;
      border-top: 1px solid var(--line)
    }

    .landing .metric-label {
      display: flex;
      justify-content: space-between;
      gap: 0.875rem;
      font-size: 0.875rem;
      font-weight: 700;
      margin-bottom: 0.625rem
    }

    .landing .progress {
      height: 0.625rem;
      background: #eef0f4;
      border-radius: 62.4375rem;
      overflow: hidden
    }

    .landing .progress span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      border-radius: inherit;
      /* 화면에 들어오면(.reveal.on) 왼쪽부터 차오른다 — 폭은 인라인 width 그대로, scaleX만 애니메이션 */
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 1.2s cubic-bezier(.22, .8, .3, 1) .25s;
    }

    .landing .reveal.on .progress span {
      transform: scaleX(1);
    }

    /* 순차 채움 — 위에서부터 한 줄씩 0.25초 간격으로 (1번째 자식은 제목 줄) */
    .landing .metric-board .metric-row:nth-child(2) .progress span {
      transition-delay: .2s;
    }

    .landing .metric-board .metric-row:nth-child(3) .progress span {
      transition-delay: .45s;
    }

    .landing .metric-board .metric-row:nth-child(4) .progress span {
      transition-delay: .7s;
    }

    .landing .metric-board .metric-row:nth-child(5) .progress span {
      transition-delay: .95s;
    }

    .landing .metric-foot {
      font-size: 0.75rem;
      color: #969ca6;
      margin-top: 1rem
    }

    .landing .period-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem
    }

    .landing .period-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 1.5rem;
      padding: 1.75rem
    }

    .landing .period-card .num {
      font-size: 0.75rem;
      color: #9ca2ad;
      font-weight: 900
    }

    .landing .period-card strong {
      display: block;
      font-size: 2.125rem;
      letter-spacing: -.05em;
      margin: 0.5rem 0 0.5rem
    }

    .landing .period-card p {
      color: var(--muted);
      font-size: 0.875rem;
      margin: 0
    }

    .landing .principle {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 2rem;
      align-items: center;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 2rem;
      padding: 2.375rem
    }

    .landing .principle h3 {
      font-size: 2.5rem;
      line-height: 1.18;
      margin: 0 0 1rem;
      letter-spacing: -.05em
    }

    .landing .principle p {
      color: var(--muted);
      margin: 0;
      max-width: 40.625rem
    }

    .landing .principle-flow {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 0.625rem;
      align-items: center
    }

    .landing .flow-box {
      background: #f4f5f8;
      border-radius: 1rem;
      padding: 1.125rem;
      text-align: center;
      font-weight: 800;
      font-size: 0.8125rem
    }

    .landing .flow-box.em {
      background: #11151c;
      color: #fff
    }

    .landing .arrow {
      color: #aab0bb
    }

    .landing .faq-list {
      display: grid;
      gap: 0.75rem
    }

    .landing details {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 1.125rem;
      padding: 1.25rem 1.375rem
    }

    .landing summary {
      cursor: pointer;
      font-weight: 800;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }

    .landing summary::-webkit-details-marker {
      display: none
    }

    /* 화살표 — 열리면 뒤집힌다 */
    .landing summary::after {
      content: "▾";
      color: var(--ink-muted);
      flex-shrink: 0;
      transition: transform .3s ease, color .3s ease;
    }

    .landing details {
      transition: border-color .3s ease;
    }

    .landing details[open] {
      border-color: var(--brand);
    }

    .landing details[open] summary::after {
      transform: rotate(180deg);
      color: var(--brand);
    }

    /* 열고 닫힐 때 높이가 부드럽게(지원 브라우저) — 미지원이면 아래 페이드만 동작 */
    .landing details::details-content {
      opacity: 0;
      block-size: 0;
      overflow: hidden;
      transition: block-size .35s ease, opacity .35s ease, content-visibility .35s allow-discrete;
    }

    .landing details[open]::details-content {
      opacity: 1;
      block-size: auto;
    }

    .landing details[open] p {
      animation: faq-open .35s ease;
    }

    @keyframes faq-open {
      from {
        opacity: 0;
        transform: translateY(-0.25rem);
      }
    }

    .landing details p {
      color: var(--muted);
      margin: 0.75rem 0 0;
      font-size: 0.875rem
    }

    .landing .cta-section {
      padding-top: 2.375rem
    }

    .landing .cta-box {
      border-radius: 2.25rem;
      padding: 3.625rem;
      overflow: hidden;
      position: relative;
      background: linear-gradient(135deg, #0d5d9e, #1f7fbe 55%, #2f9bd6);
      color: #fff
    }

    .landing .cta-box::after {
      content: "";
      position: absolute;
      right: -7.5rem;
      top: -11.25rem;
      width: 32.5rem;
      height: 32.5rem;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 68%)
    }

    .landing .cta-box h2 {
      max-width: 47.5rem;
      margin-top: 0
    }

    .landing .cta-box p {
      max-width: 42.5rem;
      color: rgba(255, 255, 255, .82);
      font-size: 1.0625rem
    }

    .landing .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 1.75rem;
      position: relative;
      z-index: 2
    }

    .landing .cta-box .btn-primary {
      background: #fff;
      color: #11151c
    }

    .landing .cta-box .btn-secondary {
      border-color: rgba(255, 255, 255, .36);
      background: rgba(255, 255, 255, .08);
      color: #fff
    }

    .landing footer {
      padding: 2.625rem 0 3.75rem;
      color: #8e949f;
      font-size: 0.8125rem
    }

    .landing .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 1.25rem;
      border-top: 1px solid var(--line);
      padding-top: 1.625rem
    }

    .landing .reveal {
      opacity: 0;
      transform: translateY(1.5rem);
      transition: .7s ease
    }

    .landing .reveal.on {
      opacity: 1;
      transform: none
    }

    @media (max-width:980px) {
      .landing .nav {
        display: none
      }

      .landing .hero {
        padding-top: 4.5rem
      }

      .landing .hero-grid,
      .landing .effects,
      .landing .principle {
        grid-template-columns: 1fr
      }

      .landing .hero-card {
        max-width: 43.75rem
      }

      .landing .service-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .landing .process-list {
        grid-template-columns: repeat(2, 1fr)
      }

      .landing .period-grid {
        grid-template-columns: 1fr
      }

      .landing .trust-card {
        grid-template-columns: 1fr 1fr
      }

      .landing .trust-card strong {
        grid-column: 1/-1
      }
    }

    @media (max-width:680px) {
      .landing .container {
        width: min(calc(100% - 1.625rem), var(--max))
      }

      .landing .header-inner {
        height: 4.125rem
      }

      .landing .brand span:last-child {
        font-size: 0.9375rem
      }

      .landing .header-cta {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem
      }

      .landing h1 {
        font-size: 3rem
      }

      .landing .hero-copy,
      .landing .section-copy {
        font-size: 1rem
      }

      .landing section {
        padding: 4.5rem 0
      }

      .landing .problem-grid,
      .landing .service-grid,
      .landing .process-list {
        grid-template-columns: 1fr
      }

      .landing .trust-card {
        grid-template-columns: 1fr 1fr;
        padding: 1.125rem
      }

      .landing .problem-card {
        min-height: 13.75rem
      }

      .landing .process-wrap {
        padding: 1.75rem 1.25rem;
        border-radius: 1.625rem
      }

      .landing .mini-grid {
        grid-template-columns: 1fr
      }

      .landing .bar-row {
        grid-template-columns: 4.5rem 1fr 2.125rem
      }

      .landing .principle {
        padding: 1.625rem
      }

      .landing .principle h3 {
        font-size: 2rem
      }

      .landing .principle-flow {
        grid-template-columns: 1fr
      }

      .landing .arrow {
        transform: rotate(90deg);
        text-align: center
      }

      .landing .cta-box {
        padding: 2.25rem 1.5rem;
        border-radius: 1.75rem
      }

      .landing .footer-inner {
        flex-direction: column
      }
    }

    /* ── 사이트 푸터 — 홈페이지·문의 링크와 회사정보 ─────────────────── */
    .site-footer {
      border-top: 1px solid var(--border);
      margin-top: 3rem;
      padding: 1.875rem 0.25rem 0.625rem;
      font-size: 0.8125rem;
      color: var(--ink-muted);
      line-height: 1.8;
    }

    .site-footer .footer-links {
      display: flex;
      gap: 1.125rem;
      margin-bottom: 0.75rem;
    }

    .site-footer .footer-links a {
      color: var(--ink-2);
      font-weight: 700;
      text-decoration: none;
    }

    .site-footer .footer-links a:hover {
      color: var(--brand);
    }

    .site-footer .footer-copy {
      margin-top: 0.75rem;
    }

    /* ── 최근 검사 목록 반응형 — 4칸 → 2칸 → 1칸 ───────────────────── */
    @media (max-width: 1080px) {
      .recent-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .recent-list {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* ── 리포트 본문 하단 이전/다음 페이저 ───────────────────────────── */
    /* 1fr auto 1fr — 양옆이 같은 폭이라 가운데 위치 표시가 항상 정중앙, 버튼은 양 끝 */
    .cbody-pager {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 0.75rem;
      margin-top: 1.75rem;
      padding-top: 1.125rem;
      border-top: 1px solid var(--border);
    }

    .cbody-pager> :first-child {
      justify-self: start;
    }

    .cbody-pager> :last-child {
      justify-self: end;
    }

    .cbody-pager .pager-btn {
      min-height: 0;
      padding: 0.625rem 1rem;
      font-size: 0.8125rem;
      font-weight: 700;
      background: var(--surface);
      color: var(--ink);
      border: 1px solid var(--border);
      border-radius: 0.625rem;
      white-space: nowrap;
    }

    .cbody-pager .pager-btn:hover:not(:disabled) {
      border-color: var(--brand);
      color: var(--brand-ink);
      transform: none;
      box-shadow: none;
    }

    .cbody-pager .pager-pos {
      font-size: 0.75rem;
      color: var(--ink-muted);
      flex-shrink: 0;
    }

    /* 인쇄 때는 전 섹션이 펼쳐지므로 페이저는 숨긴다 */
    @media print {
      .cbody-pager {
        display: none;
      }
    }

    /* 끝까지 스크롤했을 때 하단 페이저가 좌하단 "처음으로"·우하단 "맨 위로" 플로팅 버튼에
       가리지 않도록 리포트 화면은 바닥 여백을 넉넉히 둔다 */
    body.report-mode {
      padding-bottom: 8.5rem;
    }

    /* 헤드바가 화면 상단에 붙어 있는 동안(app.js가 .stuck 토글) 아래 모서리를 둥글린다 */
    .console-head {
      transition: border-radius .3s ease;
    }

    .console-head.stuck {
      border-radius: 1.5rem;
    }

    /* 치명도 색 원 — 텍스트 대신 색으로. 의미는 title/aria-label에 남긴다 */
    .sev-dot {
      display: inline-block;
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 50%;
      vertical-align: middle;
    }


    /* ── 관리자: 주소 검색 · 감사 로그 날짜 아코디언 ─────────────────── */
    /* 검색창답게 — 알약 모양 + 브랜드색 돋보기·테두리로 확실히 눈에 띄게 */
    .url-search {
      width: 100%;
      margin-bottom: 0.875rem;
      padding: 0.875rem 1.25rem 0.875rem 2.875rem;
      font-size: 1rem;
      border: 1px solid var(--brand);
      border-radius: 999px;
      background-color: var(--surface);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d5d9e' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: 1rem center;
      background-size: 1.125rem;
      box-shadow: 0 0 0 4px rgba(13, 93, 158, .06), var(--shadow-sm);
      transition: border-color .3s ease, box-shadow .3s ease;
    }

    .url-search:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 4px rgba(13, 93, 158, .18);
    }

    .audit-day {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 0.75rem;
      padding: 0.75rem 1rem;
      margin-bottom: 0.5rem;
    }

    .audit-day summary {
      cursor: pointer;
      font-weight: 700;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .audit-day summary::-webkit-details-marker {
      display: none;
    }

    .audit-day summary::after {
      content: "▾";
      margin-left: auto;
      color: var(--ink-muted);
      transition: transform .3s ease;
    }

    .audit-day[open] summary::after {
      transform: rotate(180deg);
    }

    .audit-day .group {
      margin-top: 0.75rem;
    }

    .audit-pager {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin-top: 0.75rem;
    }

    .audit-pager button {
      min-height: 0;
      padding: 0.5rem 0.875rem;
      font-size: 0.8125rem;
      background: var(--surface);
      color: var(--ink);
      border: 1px solid var(--border);
      border-radius: 0.625rem;
    }

    .audit-pager button:disabled {
      opacity: .4;
    }

    /* 표 안 긴 텍스트 말줄임(회사명 등) — 전체는 title 툴팁으로 */
    .tcell-ellip {
      max-width: 13rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* 히어로 하단 고지 — 랜딩과 같은 문구 */
    .hero .hero-note {
      margin-top: 1.125rem;
      font-size: 0.8125rem;
      color: var(--ink-muted);
    }

    /* 페이저로 이동할 때 sticky 헤더에 가리지 않게 */
    #out section,
    .audit-day {
      scroll-margin-top: 5rem;
    }
    /* 리포트 하단 상시 고지 — 탭과 무관하게 항상 보이는 작은 텍스트 */
    .cbody-note {
      margin-top: 1.5rem;
      padding-top: 1rem;
      border-top: 1px solid var(--hairline);
      font-size: 0.75rem;
      line-height: 1.7;
      color: var(--ink-muted);
    }

    /* ── 검사 진행 막대 — 멈춰 보이지 않게 ─────────────────────────────
       채움 위로 광이 계속 흐르고, 미결정 구간(100% 이후 집계·저장)은 좌우로 오간다 */
    .bar.prog > div {
      position: relative;
      overflow: hidden;
      transition: width .4s ease;
    }

    .bar.prog > div::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);
      animation: prog-shine 2.6s ease-in-out infinite;
    }

    @keyframes prog-shine {
      from { transform: translateX(-100%); }
      to { transform: translateX(100%); }
    }

    .bar.indet > div {
      animation: prog-indet 2.4s ease-in-out infinite;
    }

    /* 왕복 중에는 광택까지 겹치면 산만하다 — 하나만 돌린다 */
    .bar.indet > div::after {
      animation: none;
      background: none;
    }

    @keyframes prog-indet {
      0% { margin-left: 0%; }
      50% { margin-left: 62%; }
      100% { margin-left: 0%; }
    }

    @media (prefers-reduced-motion: reduce) {
      .bar.prog > div::after,
      .bar.indet > div {
        animation: none;
      }
    }

    /* ── 관리자 로그인 페이지 — 중앙 글래스 카드 + 브랜드 그라데이션 상단선 ────── */
    body.login-mode {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    body.login-mode .wrap {
      width: 100%;
    }

    body.login-mode #out {
      position: relative;
    }

    /* 배경에 은은한 브랜드 빛 */
    body.login-mode #out::before {
      content: "";
      position: fixed;
      inset: 0;
      background:
        radial-gradient(40rem 30rem at 50% -10%, rgba(13, 93, 158, .14), transparent 70%),
        radial-gradient(30rem 24rem at 50% 110%, rgba(47, 155, 214, .12), transparent 70%);
      z-index: -1;
      pointer-events: none;
    }

    .login-card {
      position: relative;
      overflow: hidden;
      max-width: 23rem;
      margin: 2.5rem auto;
      padding: 2.5rem 2rem 2.25rem;
      text-align: center;
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 1.5rem;
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(20px) saturate(1.3);
      -webkit-backdrop-filter: blur(20px) saturate(1.3);
    }

    /* 상단 브랜드 그라데이션 라인 */
    .login-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand));
      background-size: 200% 100%;
      animation: cta-flow 4s ease infinite;
    }

    .login-brand img {
      height: 1.5rem;
      width: auto;
      margin: 0 auto 1.25rem;
    }

    .login-card h2 {
      font-size: 1.375rem;
    }

    .login-sub {
      margin: 0.375rem 0 1.5rem;
      font-size: 0.8125rem;
      color: var(--ink-muted);
    }

    .login-err {
      margin-bottom: 1rem;
      padding: 0.625rem 0.875rem;
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--critical);
      background: color-mix(in srgb, var(--critical) 10%, transparent);
      border-radius: 0.625rem;
    }

    .login-card form {
      display: grid;
      gap: 0.75rem;
      max-width: none;
    }

    /* 아이콘 붙은 입력 필드 */
    .login-field {
      position: relative;
      display: block;
    }

    .login-field .login-ico {
      position: absolute;
      left: 0.9375rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1.125rem;
      height: 1.125rem;
      color: var(--ink-muted);
      pointer-events: none;
    }

    .login-field .login-ico svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .login-card input {
      width: 100%;
      padding: 0.8125rem 1rem 0.8125rem 2.75rem;
      font-size: 0.9375rem;
      background: var(--surface);
      transition: border-color .3s ease, box-shadow .3s ease;
    }

    .login-card input:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 4px rgba(13, 93, 158, .14);
    }

    .login-card button {
      width: 100%;
      margin-top: 0.375rem;
    }

    /* 관리자 화면 상단 바 — 로그아웃 */
    .admin-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.25rem;
      font-weight: 800;
      color: var(--ink-2);
    }

    .logout-btn {
      min-height: 0;
      padding: 0.5rem 1rem;
      font-size: 0.8125rem;
      background: var(--surface);
      color: var(--ink);
      border: 1px solid var(--border);
      border-radius: 0.625rem;
    }

    .logout-btn:hover:not(:disabled) {
      border-color: var(--critical);
      color: var(--critical);
    }

    /* 로그인 화면 — 히어로·랜딩·최근검사·안내·헤더·푸터를 숨기고 로그인 카드만 */
    body.login-mode .site-header,
    body.login-mode .hero,
    body.login-mode .landing,
    body.login-mode .recent,
    body.login-mode .score-note,
    body.login-mode .site-footer,
    body.login-mode .home-btn {
      display: none !important;
    }