:root {
      color-scheme: light;
      --ink: #17202a;
      --muted: #667085;
      --line: #d9e1ea;
      --panel: #ffffff;
      --page: #f4f7fb;
      --soft: #eef4f9;
      --bad: #e5484d;
      --weak: #f97316;
      --mid: #eab308;
      --good: #28a745;
      --great: #109377;
      --nav: #203040;
      --blue: #2868c7;
      --shadow: 0 14px 35px rgba(23, 32, 42, .08);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
      background: var(--page);
      color: var(--ink);
      letter-spacing: 0;
    }

    button, input, textarea, select { font: inherit; }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 264px minmax(0, 1fr);
    }

    .sidebar {
      background: var(--nav);
      color: #fff;
      padding: 28px 22px;
      position: sticky;
      top: 0;
      height: 100vh;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 30px;
    }

    .brand-mark {
      width: 72px;
      height: 72px;
      display: block;
      border-radius: 14px;
      object-fit: cover;
      background: #f7c948;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    }

    .brand strong {
      display: block;
      font-size: 18px;
      line-height: 1.2;
    }

    .brand span {
      display: block;
      color: #aebdcc;
      font-size: 12px;
      margin-top: 3px;
    }

    .brand-url {
      display: inline-block;
      margin-top: 7px;
      color: #f8d66d;
      font-size: 11px;
      font-weight: 800;
      text-decoration: none;
      word-break: break-all;
    }

    .brand-url:hover { text-decoration: underline; }

    .usage-guide {
      padding: 16px;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 8px;
      color: #dce6ee;
      font-size: 13px;
      line-height: 1.65;
      background: rgba(255,255,255,.06);
    }

    .usage-guide summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 0;
      color: #fff;
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
      list-style: none;
    }

    .usage-guide summary::-webkit-details-marker {
      display: none;
    }

    .usage-guide summary::after {
      content: "접기";
      flex: 0 0 auto;
      padding: 3px 8px;
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 999px;
      color: #f8d66d;
      font-size: 11px;
      font-weight: 800;
    }

    .usage-guide:not([open]) summary::after {
      content: "보기";
    }

    .usage-guide[open] summary {
      margin-bottom: 10px;
    }

    .usage-guide ol {
      margin: 0;
      padding-left: 19px;
    }

    .usage-guide li + li { margin-top: 7px; }

    .usage-guide-note {
      margin: 13px 0 0;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.16);
      color: #f8d66d;
      font-size: 12px;
      line-height: 1.55;
    }

    main {
      min-width: 0;
      padding: 28px;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      margin-bottom: 20px;
    }

    h1 {
      margin: 0;
      font-size: clamp(25px, 3vw, 38px);
      line-height: 1.18;
      letter-spacing: 0;
    }

    .subtitle {
      color: var(--muted);
      margin: 9px 0 0;
      font-size: 15px;
      line-height: 1.6;
    }

    .status-pill {
      white-space: nowrap;
      padding: 9px 12px;
      border: 1px solid #b7c6d5;
      border-radius: 8px;
      background: #fff;
      color: #334155;
      font-weight: 700;
      font-size: 13px;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .contact-link {
      display: inline-flex;
      align-items: center;
      min-height: 39px;
      padding: 0 12px;
      border: 1px solid #2868c7;
      border-radius: 8px;
      color: #174ea6;
      background: #eef5ff;
      font-size: 13px;
      font-weight: 900;
      text-decoration: none;
      white-space: nowrap;
    }

    .contact-link:hover,
    .contact-link:focus-visible {
      background: #dcecff;
      outline: 3px solid rgba(40, 104, 199, .18);
      outline-offset: 2px;
    }

    .contact-link-mobile {
      display: none;
    }

    .contact-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(15, 23, 42, .42);
      overflow-y: auto;
    }

    .contact-modal-backdrop.open {
      display: flex;
    }

    .contact-modal {
      position: relative;
      width: min(480px, 100%);
      max-height: calc(100vh - 36px);
      overflow-y: auto;
      border: 1px solid #c9d7e8;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
      padding: 20px;
    }

    .contact-modal h2 {
      margin: 0 0 8px;
      font-size: 19px;
    }

    .contact-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 34px;
      height: 34px;
      border: 1px solid #d4dde8;
      border-radius: 8px;
      background: #fff;
      color: #334155;
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }

    .contact-modal p {
      margin: 0;
      color: #516071;
      font-size: 13px;
      line-height: 1.6;
    }

    .contact-email-box {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin: 14px 0 10px;
      padding: 12px;
      border: 1px solid #bcd3ef;
      border-radius: 8px;
      background: #f4f8ff;
      color: #17365f;
      font-weight: 900;
      word-break: break-all;
    }

    .contact-email-box small {
      color: #516071;
      font-size: 12px;
      font-weight: 800;
    }

    .contact-phone-box {
      margin-top: 8px;
      border-color: #cde8d6;
      background: #f3fbf6;
      color: #087443;
    }

    .contact-guide {
      margin-top: 12px;
      padding-left: 18px;
      color: #516071;
      font-size: 13px;
      line-height: 1.65;
    }

    .contact-modal-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
    }

    .contact-modal-actions button,
    .contact-modal-actions a {
      min-height: 38px;
      border: 1px solid #b7c6d5;
      border-radius: 8px;
      padding: 0 12px;
      background: #fff;
      color: #17212b;
      font-weight: 900;
      text-decoration: none;
      cursor: pointer;
    }

    .contact-modal-actions .primary {
      border-color: #2868c7;
      background: #2868c7;
      color: #fff;
    }

    .contact-copy-status {
      min-height: 18px;
      margin-top: 10px;
      color: #087443;
      font-size: 12px;
      font-weight: 800;
    }

    .legal-notice {
      margin: -6px 0 18px;
      padding: 12px 14px;
      border: 1px solid #c9d7e8;
      border-left: 4px solid var(--blue);
      border-radius: 8px;
      background: #f7fbff;
      color: #344054;
      font-size: 13px;
      line-height: 1.6;
    }

    .legal-notice strong {
      color: #17365f;
    }

    .mode-tabs {
      width: min(420px, 100%);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
      padding: 4px;
      margin-bottom: 20px;
      border: 1px solid #c8d3df;
      border-radius: 8px;
      background: #e8eef4;
    }

    .mode-tab {
      min-height: 42px;
      border: 0;
      border-radius: 6px;
      color: #516071;
      background: transparent;
      cursor: pointer;
      font-weight: 900;
    }

    .mode-tab.active {
      color: #fff;
      background: var(--nav);
      box-shadow: 0 2px 8px rgba(23, 32, 42, .16);
    }

    .mode-view { display: none; }
    .mode-view.active { display: block; }

    .input-band {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 18px;
      margin-bottom: 22px;
    }

    .input-stack {
      display: grid;
      gap: 12px;
    }

    .input-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 172px;
      gap: 12px;
    }

    .url-input {
      width: 100%;
      border: 1px solid #b8c5d2;
      border-radius: 8px;
      padding: 15px 15px;
      outline: none;
      min-height: 52px;
      background: #fff;
    }

    .url-input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(40, 104, 199, .13);
    }

    .primary-btn {
      border: 0;
      border-radius: 8px;
      min-height: 52px;
      cursor: pointer;
      color: #fff;
      background: var(--blue);
      font-weight: 900;
    }

    .quick-fields {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .link-analyzer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: stretch;
      padding: 14px;
      border: 1px solid #bcd3ef;
      border-radius: 8px;
      background: #f4f8ff;
    }

    .link-analyzer input {
      min-width: 0;
      border: 1px solid #b8c5d2;
      border-radius: 8px;
      padding: 13px 14px;
      background: #fff;
      outline: none;
    }

    .link-analyzer input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(40, 104, 199, .13);
    }

    .link-status {
      grid-column: 1 / -1;
      margin: 0;
      color: #536579;
      font-size: 12px;
      line-height: 1.5;
    }

    .link-status.success { color: #087a5b; font-weight: 800; }
    .link-status.error { color: #b42318; font-weight: 800; }

    .input-zone-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      color: #17324d;
      font-size: 15px;
      font-weight: 900;
    }

    .input-zone-title::before {
      content: "입력";
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 6px;
      color: #fff;
      background: #2868c7;
      font-size: 11px;
    }

    .input-guide-card {
      margin-top: 0;
      padding: 14px;
      border: 1px solid #d9e7f7;
      border-radius: 8px;
      background: #f8fbff;
    }

    .capture-box.input-guide-card {
      display: grid;
      gap: 10px;
    }

    .analytics-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin: 0;
      color: #40556f;
      font-size: 12px;
      font-weight: 800;
    }

    .top-actions .analytics-strip {
      justify-content: flex-end;
    }

    .analytics-strip span {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 10px;
      border: 1px solid #d8e2ee;
      border-radius: 8px;
      background: #fff;
    }

    .analytics-strip .muted {
      color: #7a8796;
      font-weight: 700;
    }

    .quick-field {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .quick-field > span {
      color: #516071;
      font-size: 12px;
      font-weight: 900;
    }

    .quick-fields input {
      min-width: 0;
      border: 1px solid #c8d3df;
      border-radius: 8px;
      padding: 12px;
      background: #fbfdff;
    }

    input.manual-basic-input {
      border-color: #e36b6b !important;
      color: #b42318;
      background: #fff8f8 !important;
      font-weight: 800;
    }

    .basic-manual-notice {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 9px;
      color: #b42318;
      font-size: 12px;
      line-height: 1.45;
    }

    .basic-manual-notice[hidden] { display: none; }

    .demo-note {
      margin: 12px 0 0;
      color: #536579;
      font-size: 13px;
      line-height: 1.5;
    }

    .free-mode {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid #edf1f5;
      display: grid;
      gap: 10px;
    }

    .free-mode textarea {
      width: 100%;
      min-height: 118px;
      resize: vertical;
      border: 1px solid #c8d3df;
      border-radius: 8px;
      padding: 12px;
      background: #fbfdff;
      line-height: 1.55;
      outline: none;
    }

    .free-mode textarea:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(40, 104, 199, .13);
    }

    .free-mode-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .capture-box {
      border: 1px solid #dbe6f0;
      border-radius: 8px;
      background: #f8fbff;
      padding: 13px;
      display: grid;
      gap: 10px;
    }

    .capture-title {
      font-weight: 900;
      font-size: 14px;
    }

    .capture-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .ocr-upload {
      display: grid;
      gap: 10px;
    }

    .ocr-upload-line {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: stretch;
    }

    .ocr-upload input[type="file"] {
      width: 100%;
      border: 1px solid #c8d3df;
      border-radius: 8px;
      padding: 10px;
      background: #fff;
    }

    .ocr-upload-line .secondary-btn {
      min-width: 176px;
    }

    .ocr-preview {
      display: none;
      width: 100%;
      max-height: 220px;
      object-fit: contain;
      border: 1px solid #dbe6f0;
      border-radius: 8px;
      background: #fff;
    }

    .ocr-preview.visible {
      display: block;
    }

    .secondary-btn {
      border: 1px solid #b8c5d2;
      border-radius: 8px;
      min-height: 42px;
      padding: 0 14px;
      cursor: pointer;
      color: #26384a;
      background: #fff;
      font-weight: 900;
    }

    .dashboard {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      min-width: 0;
    }

    .panel-head {
      padding: 18px 18px 0;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: start;
    }

    .panel h2 {
      margin: 0;
      font-size: 17px;
      line-height: 1.35;
    }

    .panel-sub {
      color: var(--muted);
      font-size: 13px;
      margin-top: 5px;
      line-height: 1.5;
    }

    .score-card {
      padding: 22px;
      text-align: center;
    }

    .gauge {
      width: 224px;
      aspect-ratio: 1;
      margin: 0 auto 12px;
      border-radius: 50%;
      background: conic-gradient(var(--good) 0deg 266deg, #e8eef4 266deg 360deg);
      display: grid;
      place-items: center;
      position: relative;
    }

    .gauge::before {
      content: "";
      position: absolute;
      width: 72%;
      height: 72%;
      border-radius: 50%;
      background: #fff;
      box-shadow: inset 0 0 0 1px #e8eef4;
    }

    .score {
      position: relative;
      z-index: 1;
    }

    .score strong {
      display: block;
      font-size: 50px;
      line-height: 1;
    }

    .score span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-top: 5px;
    }

    .grade {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 92px;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 8px;
      color: #fff;
      background: var(--good);
      font-weight: 900;
      margin-bottom: 12px;
    }

    .summary {
      color: #465566;
      line-height: 1.62;
      font-size: 14px;
      margin: 0;
    }

    .car-meta {
      border-top: 1px solid var(--line);
      margin-top: 18px;
      padding-top: 14px;
      text-align: left;
      display: grid;
      gap: 10px;
      font-size: 14px;
    }

    .meta-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
    }

    .meta-row span:first-child { color: var(--muted); }
    .meta-row span:last-child { font-weight: 800; text-align: right; }

    .report-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
      gap: 20px;
    }

    .source-panel {
      margin: 20px 0;
    }

    .source-grid {
      padding: 16px 18px 20px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .source-item {
      border: 1px solid #dde6ef;
      border-radius: 8px;
      background: #fbfdff;
      padding: 12px;
      min-height: 86px;
    }

    .source-item span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 6px;
    }

    .source-item strong {
      display: block;
      font-size: 14px;
      line-height: 1.48;
    }

    .source-link {
      display: inline-flex;
      margin-top: 8px;
      color: #1f5fae;
      font-size: 12px;
      font-weight: 800;
      text-decoration: none;
    }

    .source-link:hover { text-decoration: underline; }

    .online-status {
      margin: 8px 0 0;
      color: #2357a4;
      font-size: 12px;
      font-weight: 800;
    }

    .source-item.unverified {
      border-color: #ef9a9a;
      background: #fff8f8;
    }

    .manual-badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 7px;
      border-radius: 6px;
      background: #fee2e2;
      color: #b42318;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }

    .reference-badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 7px;
      border-radius: 6px;
      background: #eaf2ff;
      color: #2357a4;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }

    .official-badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 7px;
      border-radius: 6px;
      background: #e8f7ee;
      color: #087443;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }

    .manual-source-input,
    .compare-manual-input {
      width: 100%;
      min-height: 40px;
      margin-top: 8px;
      border: 1px solid #e36b6b;
      border-radius: 8px;
      padding: 9px 10px;
      color: #b42318;
      background: #fff;
      outline: none;
      font-weight: 800;
    }

    .manual-entry-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 7px;
    }

    .manual-apply-btn {
      min-height: 40px;
      border: 0;
      border-radius: 8px;
      padding: 0 12px;
      color: #fff;
      background: #b42318;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
    }

    .manual-apply-btn:hover { background: #8f1c14; }

    .manual-source-input:focus,
    .compare-manual-input:focus {
      border-color: #b42318;
      box-shadow: 0 0 0 3px rgba(180, 35, 24, .12);
    }

    .manual-source-note {
      display: block;
      margin-top: 6px;
      color: #b42318;
      font-size: 11px;
      line-height: 1.45;
    }

    .final-assessment {
      margin-top: 20px;
      border-left: 5px solid #2868c7;
      padding: 20px 22px;
      background: #fff;
    }

    .final-assessment h2 {
      margin: 0 0 8px;
      font-size: 19px;
    }

    .final-assessment p {
      margin: 0;
      color: #344054;
      font-size: 14px;
      line-height: 1.75;
      white-space: pre-line;
    }

    .pre-purchase-check {
      margin-top: 20px;
      border-left: 5px solid #f0b400;
      background: #fff;
    }

    .pre-purchase-check p {
      margin: 0;
      padding: 0 18px 18px;
      color: #344054;
      font-size: 14px;
      line-height: 1.75;
      white-space: pre-line;
    }

    .custom-request-panel {
      margin-top: 12px;
      padding: 14px;
    }

    .correction-request-inline {
      margin-top: 0;
      border: 1px solid #f1c66a;
      border-radius: 8px;
      background: #fffaf0;
    }

    .custom-request-panel h2 {
      margin: 0 0 4px;
      font-size: 16px;
    }

    .custom-request-panel textarea {
      width: 100%;
      min-height: 58px;
      margin-top: 8px;
      resize: vertical;
      border: 1px solid #b9c7d6;
      border-radius: 8px;
      padding: 10px 12px;
      color: #17212b;
      background: #fff;
      font: inherit;
      line-height: 1.55;
    }

    .custom-request-panel textarea:focus {
      border-color: #2868c7;
      outline: 0;
      box-shadow: 0 0 0 3px rgba(40, 104, 199, .12);
    }

    .custom-request-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
      flex-wrap: wrap;
    }

    .custom-request-status {
      margin: 0;
      color: #516071;
      font-size: 12px;
      font-weight: 800;
    }

    .compare-correction-panel {
      margin-top: 10px;
      padding: 14px;
    }

    .compare-correction-panel h3 {
      margin: 0 0 6px;
      font-size: 14px;
    }

    .compare-correction-panel textarea {
      min-height: 82px;
    }

    .extra-data-panel {
      margin-top: 0;
      border: 1px solid #91d6a9;
      border-radius: 8px;
      background: #f3fbf6;
      padding: 14px;
    }

    .extra-data-panel h2,
    .extra-data-panel h3 {
      margin: 0 0 6px;
      font-size: 15px;
    }

    .extra-data-panel textarea {
      width: 100%;
      min-height: 56px;
      margin-top: 8px;
      resize: vertical;
      border: 1px solid #a8c7b3;
      border-radius: 8px;
      padding: 10px 12px;
      color: #17212b;
      background: #fff;
      font: inherit;
      line-height: 1.55;
    }

    .extra-data-panel textarea:focus {
      border-color: #149454;
      outline: 0;
      box-shadow: 0 0 0 3px rgba(20, 148, 84, .12);
    }

    .extra-data-status {
      margin: 0;
      color: #087443;
      font-size: 12px;
      font-weight: 800;
    }

    .risk-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .risk-table th,
    .risk-table td {
      border-bottom: 1px solid #edf1f5;
      padding: 13px 18px;
      vertical-align: middle;
      text-align: left;
      font-size: 14px;
    }

    .risk-table th {
      color: #516071;
      font-size: 12px;
      background: #f8fafc;
    }

    .risk-table th:nth-child(1) { width: 19%; }
    .risk-table th:nth-child(2) { width: 17%; }
    .risk-table th:nth-child(3) { width: 38%; }
    .risk-table th:nth-child(4) { width: 26%; }

    .level {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-width: 76px;
      min-height: 30px;
      border-radius: 8px;
      color: #fff;
      font-weight: 900;
      font-size: 12px;
    }

    .level.very-bad { background: var(--bad); }
    .level.bad { background: var(--weak); }
    .level.normal { background: var(--mid); color: #3f2f00; }
    .level.good { background: var(--good); }
    .level.great { background: var(--great); }
    .level.unverified {
      min-width: 108px;
      background: #fee2e2;
      color: #b42318;
    }

    .meter {
      height: 12px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--bad) 0 20%, var(--weak) 20% 40%, var(--mid) 40% 60%, var(--good) 60% 80%, var(--great) 80% 100%);
      position: relative;
    }

    .meter::after {
      content: "";
      position: absolute;
      top: 50%;
      left: var(--pos);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid #17202a;
      transform: translate(-50%, -50%);
      box-shadow: 0 2px 5px rgba(0,0,0,.2);
    }

    .meter.unverified {
      background: #e8eef4;
    }

    .meter.unverified::after { display: none; }

    .chart-wrap {
      padding: 16px 18px 20px;
    }

    .radar {
      width: 100%;
      max-width: 320px;
      margin: 4px auto 8px;
      display: block;
    }

    .chart-legend {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: #516071;
      font-size: 12px;
      margin-top: 8px;
    }

    .legend-dot {
      width: 9px;
      height: 9px;
      display: inline-block;
      border-radius: 50%;
      background: var(--blue);
      margin-right: 6px;
    }

    .cards-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin: 20px 0;
    }

    .mini-card {
      padding: 17px;
      min-height: 128px;
    }

    .mini-card strong {
      display: block;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .mini-card p {
      margin: 0;
      color: #536172;
      font-size: 13px;
      line-height: 1.58;
    }

    .checklist {
      padding: 6px 18px 18px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .check-item {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 46px;
      border: 1px solid #dde6ef;
      border-radius: 8px;
      padding: 9px 10px;
      background: #fbfdff;
      font-size: 13px;
    }

    .check-item input { width: 18px; height: 18px; }

    .tag {
      border-radius: 8px;
      padding: 5px 8px;
      background: #eaf2ff;
      color: #2357a4;
      font-weight: 800;
      font-size: 11px;
    }

    .compare-input-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      align-items: start;
    }

    .compare-section-head {
      padding: 0 0 16px;
    }

    .compare-section-head h2 {
      margin: 0;
      font-size: 18px;
    }

    .compare-form {
      padding: 18px;
    }

    .compare-form .link-analyzer,
    .compare-form .ocr-upload-line {
      grid-template-columns: minmax(0, 1fr) 164px;
      gap: 10px;
      align-items: stretch;
      padding: 14px;
      border: 1px solid #bcd3ef;
      border-radius: 8px;
      background: #f4f8ff;
    }

    .compare-form .link-analyzer {
      margin-bottom: 8px;
    }

    .compare-form .ocr-upload-line input[type="file"] {
      min-width: 0;
      border-color: #b8c5d2;
      background: #fff;
    }

    .compare-form .link-analyzer .secondary-btn,
    .compare-form .ocr-upload-line .secondary-btn {
      width: 100%;
      min-width: 0;
      padding-left: 10px;
      padding-right: 10px;
      white-space: nowrap;
    }

    .compare-form-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .compare-form-head h2 {
      font-size: 18px;
    }

    .compare-badge {
      display: inline-grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--blue);
      color: #fff;
      font-weight: 900;
    }

    .compare-badge.b {
      background: #c2415d;
    }

    .compare-quick-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      margin-bottom: 10px;
    }

    .compare-quick-fields .quick-field > span {
      color: #536579;
    }

    .compare-quick-fields input {
      width: 100%;
      min-width: 0;
      border: 1px solid #c8d3df;
      border-radius: 8px;
      padding: 11px;
      background: #fbfdff;
    }

    .compare-form textarea {
      width: 100%;
      min-height: 128px;
      resize: vertical;
      border: 1px solid #c8d3df;
      border-radius: 8px;
      padding: 11px;
      background: #fbfdff;
      line-height: 1.5;
      outline: none;
    }

    .compare-form textarea:focus,
    .compare-quick-fields input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(40, 104, 199, .13);
    }

    .compare-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .compare-status {
      min-height: 38px;
      margin: 10px 0 0;
      color: #536579;
      font-size: 12px;
      line-height: 1.5;
    }

    .compare-balance {
      margin-top: 18px;
      padding: 16px;
      border: 1px solid #d8e2ee;
      border-radius: 8px;
      background: #f8fbff;
    }

    .compare-balance h3 {
      margin: 0 0 10px;
      font-size: 16px;
    }

    .balance-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
    }

    .balance-table th,
    .balance-table td {
      border-bottom: 1px solid #edf1f5;
      padding: 10px 12px;
      text-align: left;
      vertical-align: middle;
      font-size: 12px;
    }

    .balance-bars {
      display: grid;
      gap: 6px;
    }

    .balance-bar {
      height: 8px;
      border-radius: 999px;
      background: #e8eef5;
      overflow: hidden;
    }

    .balance-bar i {
      display: block;
      height: 100%;
      border-radius: inherit;
    }

    .balance-bar.a i { background: #2868c7; }
    .balance-bar.b i { background: #c2415d; }

    .balance-lines {
      display: grid;
      gap: 6px;
    }

    .balance-line-labels {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: #52657a;
      font-size: 11px;
      font-weight: 700;
    }

    .balance-line {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 44px;
      align-items: center;
      gap: 8px;
      color: #52657a;
      font-size: 11px;
      font-weight: 700;
    }

    .balance-track {
      position: relative;
      height: 6px;
      border-radius: 999px;
      background: #e8eef5;
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(20, 35, 54, .05);
    }

    .balance-fill {
      position: absolute;
      left: 0;
      height: 100%;
      border-radius: inherit;
    }

    .balance-fill.a {
      top: 0;
      background: #2868c7;
    }

    .balance-fill.b {
      top: 0;
      background: #c2415d;
    }

    .balance-legend {
      display: flex;
      gap: 12px;
      color: #52657a;
      font-size: 11px;
    }

    .balance-legend span::before {
      content: "";
      display: inline-block;
      width: 9px;
      height: 9px;
      margin-right: 4px;
      border-radius: 999px;
      vertical-align: -1px;
    }

    .balance-legend .a::before { background: #2868c7; }
    .balance-legend .b::before { background: #c2415d; }

    .compare-manual-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #f0b6b6;
    }

    .compare-manual-fields[hidden] { display: none; }

    .compare-manual-heading {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #b42318;
      font-size: 12px;
      font-weight: 900;
    }

    .compare-manual-field {
      min-width: 0;
    }

    .compare-manual-field label {
      display: block;
      color: #7a271a;
      font-size: 12px;
      font-weight: 800;
    }

    .compare-run {
      display: flex;
      justify-content: center;
      margin: 18px 0 0;
    }

    .compare-run .primary-btn {
      min-width: 220px;
      padding: 0 22px;
    }

    .comparison-result {
      margin-top: 20px;
    }

    .compare-score-strip {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(220px, 1.3fr) minmax(0, 1fr);
      align-items: stretch;
      border-bottom: 1px solid var(--line);
    }

    .compare-score-box,
    .compare-verdict {
      padding: 18px;
      text-align: center;
    }

    .compare-score-box:first-child { border-right: 1px solid var(--line); }
    .compare-score-box:last-child { border-left: 1px solid var(--line); }

    .compare-score-box span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 7px;
    }

    .compare-score-box strong {
      display: block;
      font-size: 28px;
      line-height: 1.2;
    }

    .compare-score-box small {
      display: block;
      color: #536579;
      margin-top: 6px;
    }

    .compare-verdict {
      display: grid;
      place-items: center;
      align-content: center;
      gap: 6px;
      background: #f8fafc;
    }

    .compare-verdict strong {
      font-size: 18px;
      line-height: 1.35;
    }

    .compare-verdict span {
      color: var(--muted);
      font-size: 12px;
    }

    .compare-table-wrap {
      overflow-x: auto;
    }

    .compare-table {
      width: 100%;
      min-width: 760px;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .compare-table th,
    .compare-table td {
      padding: 13px 15px;
      border-bottom: 1px solid #edf1f5;
      text-align: left;
      vertical-align: middle;
      font-size: 13px;
      line-height: 1.45;
    }

    .compare-table th {
      color: #516071;
      background: #f8fafc;
      font-size: 12px;
    }

    .compare-table th:first-child { width: 18%; }
    .compare-table th:last-child { width: 16%; }

    .compare-cell-reason {
      display: block;
      margin-top: 5px;
      color: #667085;
      font-size: 12px;
      line-height: 1.45;
    }

    .compare-cell-manual {
      display: inline-flex;
      margin-top: 5px;
      color: #b42318;
      font-size: 11px;
      font-weight: 900;
    }

    .advantage {
      display: inline-flex;
      align-items: center;
      min-height: 27px;
      padding: 0 9px;
      border-radius: 8px;
      background: #eaf2ff;
      color: #2357a4;
      font-weight: 900;
      font-size: 11px;
    }

    .advantage.tie {
      background: #edf1f5;
      color: #536579;
    }

    .comparison-insights {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      border-top: 1px solid var(--line);
    }

    .insight-column {
      padding: 18px;
    }

    .insight-column + .insight-column {
      border-left: 1px solid var(--line);
    }

    .insight-column h3 {
      margin: 0 0 12px;
      font-size: 15px;
    }

    .insight-group + .insight-group {
      margin-top: 16px;
    }

    .insight-group strong {
      display: block;
      margin-bottom: 7px;
      font-size: 13px;
    }

    .insight-list {
      margin: 0;
      padding-left: 18px;
      color: #536172;
      font-size: 13px;
      line-height: 1.65;
    }

    .compare-empty {
      padding: 34px 18px;
      text-align: center;
      color: var(--muted);
      line-height: 1.6;
    }

    @media (max-width: 1120px) {
      .app { grid-template-columns: 1fr; }
      .sidebar {
        position: static;
        height: auto;
        padding: 18px;
      }
      .usage-guide { margin-top: 2px; }
      .dashboard, .report-grid { grid-template-columns: 1fr; }
      .source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .cards-row { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 720px) {
      main { padding: 18px; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .top-actions { justify-content: flex-start; }
      .top-actions .analytics-strip { justify-content: flex-start; }
      .contact-link-pc { display: none; }
      .contact-link-mobile { display: inline-flex; }
      .input-grid, .quick-fields, .cards-row, .checklist, .source-grid, .compare-input-grid, .comparison-insights { grid-template-columns: 1fr; }
      .link-analyzer { grid-template-columns: 1fr; }
      .ocr-upload-line { grid-template-columns: 1fr; }
      .compare-form .link-analyzer,
      .compare-form .ocr-upload-line { grid-template-columns: 1fr; }
      .ocr-upload-line .secondary-btn { min-width: 0; }
      .compare-quick-fields { grid-template-columns: 1fr; }
      .compare-manual-fields { grid-template-columns: 1fr; }
      .compare-score-strip { grid-template-columns: 1fr; }
      .compare-score-box:first-child,
      .compare-score-box:last-child,
      .insight-column + .insight-column { border: 0; }
      .compare-score-box + .compare-verdict,
      .compare-verdict + .compare-score-box,
      .insight-column + .insight-column { border-top: 1px solid var(--line); }
      .risk-table { table-layout: auto; }
      .risk-table th:nth-child(3),
      .risk-table td:nth-child(3) { display: none; }
      .risk-table th,
      .risk-table td { padding: 12px 10px; }
      .gauge { width: min(224px, 72vw); }
    }

    .site-footer {
      border-top: 1px solid var(--line);
      background: #fff;
      padding: 22px 18px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }
    .site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 8px; }
    .site-footer a { color: var(--blue); font-weight: 700; }

    button,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
      min-height: 44px;
    }