/* ============================================================
   AI 자재 검색 위저드 (.ais-*) — 공용 스타일
   ------------------------------------------------------------
   원래 ver_31/index.html에 인라인으로 있던 것을 세 시안(31/32/33)의
   모든 페이지에서 쓰기 위해 뽑아냈다.
   색은 전부 토큰(var(--accent) 등)으로만 쓰므로 ver_32/33의
   theme-3x.css가 토큰을 갈아끼우면 모달도 그 톤을 따라간다.
   z-index: 오버레이 500 / 다이얼로그 501 / 공유 510·511 / 토스트 520
   ============================================================ */

  /* ── 대시보드에만 있던 조각들 ──
     서브페이지는 assets/kmat.css를 쓰는데 .pill·.mat-tag·.progress-bar가 없다.
     모달 안(.ais-overlay)으로 범위를 좁혀 자체 정의한다. 값은 대시보드와 동일. */
  .ais-overlay .pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    line-height: 1.4;
  }
  .ais-overlay .pill.blue { background: var(--accent-light); color: var(--accent); }
  .ais-overlay .pill.green { background: var(--good-light); color: var(--good); }
  .ais-overlay .pill.orange { background: var(--warn-light); color: var(--warn); }
  .ais-overlay .pill.gray { background: #f3f4f6; color: #6b7280; }

  .ais-overlay .progress-bar {
    height: 8px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
  }
  .ais-overlay .progress-bar .fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s;
  }
  .ais-overlay .progress-bar .fill.blue { background: var(--accent); }

  .ais-overlay .mat-tag {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 4px;
    background: #f3f4f6;
    color: var(--muted);
    font-weight: 700;
  }
  .ais-overlay .mat-tag.fire  { background: var(--bad-light);    color: var(--bad); }
  .ais-overlay .mat-tag.insul { background: var(--accent-light); color: var(--accent); }
  .ais-overlay .mat-tag.eco   { background: var(--good-light);   color: var(--good); }
  .ais-overlay .mat-tag.std   { background: #f5f3ff;             color: #7c3aed; }
  .ais-overlay .mat-tag.dur   { background: var(--warn-light);   color: var(--warn); }

  /* ══════════════════════════════════════════════════════════
     AI 자재 검색 위저드 (.ais-*)
     ----------------------------------------------------------
     이 페이지는 assets/kmat.css를 로드하지 않으므로 .btn·.filter-tab 등을
     쓸 수 없다. 모달 컴포넌트는 여기서 자체 정의한다.
     기존 z-index: .dropdown 300 / #donutTip 400 → 오버레이 500, 다이얼로그 501.
     ══════════════════════════════════════════════════════════ */

  /* ── 헤더 진입 버튼 ──
     높이는 옆의 1·2·3 전환 버튼(28px)에 맞춘다. 헤더 우측 리듬을 맞추기 위함.
     그라데이션·컬러 글로우는 촌스러워서 뺐고 단색으로 간다. */
  .ais-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 11px;
    border: none;
    border-radius: 4px;   /* .ver-switch a와 같은 값 */
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .ais-open-btn:hover { background: #1e40af; transform: translateY(-1px); }
  [data-theme="dark"] .ais-open-btn:hover { background: #3b82f6; }
  /* 흰색으로 구워 둔 애니메이션 SVG.
     원본이 512x512 뷰박스에 여백이 넓어 실제 반짝임은 그 절반 남짓만 찬다.
     → 박스를 버튼 높이보다 크게 잡고 음수 마진으로 자리를 도로 뺏는다. */
  .ais-open-btn .ais-spark {
    width: 26px; height: 26px;
    flex-shrink: 0;
    display: block;
    margin: 0 -5px 0 -7px;
  }

  /* ── 오버레이 / 다이얼로그 ── */
  .ais-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    /* .dropdown은 pointer-events:none만 쓰지만, 모달은 컨트롤이 20개가 넘어
       visibility까지 꺼야 닫힌 상태에서 Tab 순서를 먹지 않는다 */
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
  }
  .ais-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }

  .ais-dialog {
    position: relative;
    z-index: 501;
    display: flex;
    width: 100%;
    max-width: 980px;
    height: min(700px, calc(100vh - 48px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;   /* .dropdown과 동일. --radius(10px) 아님 */
    box-shadow: 0 12px 32px rgba(17,24,39,0.16), 0 24px 64px rgba(17,24,39,0.18);
    overflow: hidden;
    /* body의 font: 600 17px가 상속되므로 여기서 끊는다 */
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    transform: translateY(-8px) scale(0.985);
    transition: transform 0.22s cubic-bezier(.4,0,.2,1);
  }
  .ais-overlay.open .ais-dialog { transform: none; }
  [data-theme="dark"] .ais-dialog {
    box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 24px 64px rgba(0,0,0,0.5);
  }

  /* 스크롤 락. .top-header가 fixed라 보정 없이는 헤더만 스크롤바 폭만큼 튄다 */
  body.ais-lock { overflow: hidden; padding-right: var(--ais-sbw, 0px); }
  body.ais-lock .top-header { right: var(--ais-sbw, 0px); }
  body.ais-lock #donutTip { display: none !important; }

  /* ── 좌측 스텝 레일 ── */
  .ais-rail {
    width: 268px;
    flex-shrink: 0;
    padding: 26px 22px;
    background: var(--accent-muted);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
  }
  [data-theme="dark"] .ais-rail { background: rgba(96,165,250,0.06); }
  .ais-rail-brand { display: flex; align-items: center; gap: 11px; }
  .ais-rail-title { font-size: 15px; font-weight: 800; color: var(--fg); letter-spacing: -0.02em; }
  .ais-rail-sub { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 1px; }
  .ais-rail-note {
    margin-top: auto;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--muted);
    padding-top: 18px;
  }
  .ais-badge-ai {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #1d4ed8, #4f46e5);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    flex-shrink: 0;
  }
  .ais-badge-ai.lg {
    width: 54px; height: 54px;
    border-radius: 14px;
    font-size: 17px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.3);
  }

  .ais-steps { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 26px; }
  .ais-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 9px;
    transition: background 0.15s;
  }
  .ais-step-no {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    color: var(--muted);
    border: 1.5px solid var(--border);
    flex-shrink: 0;
    position: relative;
  }
  .ais-step-txt b { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
  .ais-step-txt i { display: block; font-size: 11px; font-style: normal; font-weight: 500; color: var(--muted); opacity: 0.8; margin-top: 1px; }
  .ais-step.is-current { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
  .ais-step.is-current .ais-step-no { background: var(--accent); border-color: var(--accent); color: #fff; }
  .ais-step.is-current .ais-step-txt b { color: var(--fg); }
  /* 완료 표시는 CSS 체크마크 — 마크업을 건드리지 않고 클래스만으로 토글된다 */
  .ais-step.is-done .ais-step-no { background: var(--good); border-color: var(--good); color: transparent; }
  .ais-step.is-done .ais-step-no::after {
    content: "";
    position: absolute;
    left: 8px; top: 5px;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .ais-step.is-done .ais-step-txt b { color: var(--fg); }

  /* ── 우측 본문 ── */
  .ais-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
  .ais-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 26px 14px;
    border-bottom: 1px solid var(--border);
  }
  .ais-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: var(--accent-light);
    padding: 3px 9px;
    border-radius: 4px;
    margin-bottom: 7px;
  }
  .ais-title { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg); }
  .ais-x {
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
  }
  .ais-x:hover { background: var(--bg); color: var(--fg); }

  .ais-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 26px; }

  .ais-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 26px;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  .ais-hint { font-size: 12.5px; font-weight: 500; color: var(--muted); }
  /* 내보내기(인쇄·공유)는 좌측, 모달 제어(닫기·다음)는 우측 — 성격이 달라 갈라 둔다 */
  .ais-foot-export { display: flex; gap: 7px; margin-left: auto; }
  .ais-foot-export[hidden] { display: none; }
  .ais-foot-btns { display: flex; gap: 7px; }
  .ais-foot-export + .ais-foot-btns {
    padding-left: 14px;
    margin-left: 2px;
    border-left: 1px solid var(--border);
  }
  .ais-foot-export[hidden] + .ais-foot-btns {
    padding-left: 0; margin-left: auto; border-left: none;
  }
  .ais-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 17px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
  }
  .ais-btn:hover { background: var(--bg); }
  .ais-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .ais-btn.primary:hover { background: #1e40af; border-color: #1e40af; }
  [data-theme="dark"] .ais-btn.primary:hover { background: #3b82f6; border-color: #3b82f6; }
  /* 인쇄·공유는 서로 다른 색으로 구분한다 */
  .ais-btn.print { border-color: var(--good); color: var(--good); }
  .ais-btn.print:hover { background: var(--good-light); }
  .ais-btn.share { border-color: var(--accent); color: var(--accent); }
  .ais-btn.share:hover { background: var(--accent-light); }
  .ais-btn.print svg, .ais-btn.share svg { width: 15px; height: 15px; flex-shrink: 0; }
  .ais-btn:disabled { opacity: 0.42; cursor: not-allowed; }
  .ais-btn:disabled:hover { background: var(--accent); }
  .ais-btn.ghost:disabled:hover { background: var(--surface); }
  /* display:inline-flex가 UA의 [hidden]{display:none}을 이기므로 직접 꺼야 한다 */
  .ais-btn[hidden] { display: none; }

  /* ── 질문 / 칩 ── */
  .ais-view { display: none; }
  .ais-view.is-active { display: block; animation: aisViewIn 0.24s cubic-bezier(.4,0,.2,1); }
  @keyframes aisViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  .ais-q { margin-bottom: 26px; }
  .ais-q:last-child { margin-bottom: 0; }
  .ais-q-label { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
  .ais-q-no {
    font-size: 11px;
    font-weight: 800;
    color: var(--accent);
    background: var(--accent-light);
    padding: 3px 8px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
  }
  .ais-q-label h4 { font-size: 14.5px; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; }
  .ais-q-req { font-size: 11px; font-weight: 700; color: var(--bad); }
  .ais-q-opt { font-size: 11px; font-weight: 600; color: var(--muted); }
  .ais-q-help { font-size: 12px; font-weight: 500; color: var(--muted); margin: -4px 0 10px; }
  .ais-q-group.is-disabled { opacity: 0.45; pointer-events: none; }

  .ais-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .ais-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid #c7d2e0;
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.14s, background 0.14s, color 0.14s;
  }
  [data-theme="dark"] .ais-chip { border-color: #3f4d63; }
  .ais-chip:hover { border-color: var(--accent); }
  /* 선택 상태의 단일 진실원천은 aria-pressed. 클래스와 이중 관리하지 않는다 */
  .ais-chip[aria-pressed="true"] {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
  }
  .ais-chip .ais-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .ais-chip .ais-sub { font-size: 11px; font-weight: 500; color: var(--muted); }
  .ais-chip[aria-pressed="true"] .ais-sub { color: var(--accent); opacity: 0.75; }
  .ais-chip .ais-ck { display: none; width: 13px; height: 13px; flex-shrink: 0; }
  .ais-chip[aria-pressed="true"] .ais-ck { display: block; }

  .ais-price-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; flex-wrap: wrap; }
  .ais-input {
    width: 160px;
    padding: 10px 13px;
    border: 1.5px solid #c7d2e0;
    border-radius: 11px;
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  [data-theme="dark"] .ais-input { border-color: #3f4d63; background: #0f172a; }
  .ais-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(29,78,216,0.13);
  }
  [data-theme="dark"] .ais-input:focus { box-shadow: 0 0 0 4px rgba(96,165,250,0.20); }
  /* 위 :focus의 outline:none이 전역 :focus-visible(773행)을 특이도로 이기므로 되살린다 */
  .ais-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ais-input::-webkit-outer-spin-button,
  .ais-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .ais-unit { font-size: 13px; font-weight: 600; color: var(--muted); }

  /* ── AI 분석 중 (항상 네이비. 다크 오버라이드 불필요) ── */
  .ais-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(135deg, #172554 0%, #1e3a8a 38%, #1d4ed8 78%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
  }
  .ais-loading.on { opacity: 1; visibility: visible; }
  .ais-loading-grid {
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 32px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 32px);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 100%);
    animation: aisGridPan 14s linear infinite;
  }
  @keyframes aisGridPan { to { background-position: 32px 32px, 32px 32px; } }
  .ais-loading-inner { position: relative; text-align: center; color: #fff; padding: 0 24px; }
  .ais-loading-title { font-size: 17px; font-weight: 700; margin-top: 18px; letter-spacing: -0.02em; }
  .ais-loading-step { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.72); margin-top: 8px; min-height: 21px; }
  .ais-dots { display: inline-flex; gap: 4px; margin-left: 5px; vertical-align: 2px; }
  .ais-dots i { width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: 0.35; animation: aisDot 1.25s ease-in-out infinite; }
  .ais-dots i:nth-child(2) { animation-delay: 0.18s; }
  .ais-dots i:nth-child(3) { animation-delay: 0.36s; }
  @keyframes aisDot { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
  .ais-loading-bar {
    width: 220px; height: 4px;
    border-radius: 999px;
    margin: 22px auto 0;
    background: rgba(255,255,255,0.18);
    overflow: hidden;
  }
  .ais-loading-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #fff;
    transition: width 0.45s cubic-bezier(.4,0,.2,1);
  }

  /* ── 요약보고서 ── */
  .ais-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 14px 16px;
    background: var(--accent-muted);
    border-radius: 10px;
    margin-bottom: 8px;
  }
  .ais-summary-k { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 2px; }
  .ais-result-note { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 18px; }
  .ais-cards-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; flex-wrap: wrap; }
  .ais-cards-title h4 { font-size: 14.5px; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; }
  .ais-result-note { margin-left: auto; }
  .ais-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .ais-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .ais-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(17,24,39,0.08); }
  [data-theme="dark"] .ais-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
  .ais-card.is-best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .ais-card-thumb { height: 96px; background: #f3f4f6; position: relative; flex-shrink: 0; }
  [data-theme="dark"] .ais-card-thumb { background: #334155; }
  .ais-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* 사진이 없는 자재용. 색은 스펙북의 부위 색 체계를 인라인으로 물려받는다 */
  .ais-thumb-ph {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--ph-c);
    background: var(--ph-bg);
  }
  .ais-thumb-ph svg { width: 22px; height: 22px; opacity: 0.7; }
  .ais-thumb-ph span { font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em; }
  [data-theme="dark"] .ais-thumb-ph { background: rgba(255,255,255,0.05); }
  .ais-rank {
    position: absolute;
    top: 8px; left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(15,23,42,0.78);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
  }
  .ais-card.is-best .ais-rank { background: var(--accent); }
  .ais-card-b { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
  .ais-card-name { font-size: 13px; font-weight: 700; color: var(--fg); line-height: 1.4; }
  .ais-card-mfr { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: -5px; }
  .ais-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
  .ais-card-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
  .ais-card-meta b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
  .ais-fit { display: flex; align-items: center; gap: 8px; }
  /* .progress-bar의 min-width:100px를 풀어야 3열 그리드가 터지지 않는다 */
  .ais-fit .progress-bar { min-width: 0; flex: 1; height: 6px; }
  .ais-fit-pct { font-size: 12px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .ais-card-why {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--muted);
    padding-top: 9px;
    border-top: 1px solid var(--border);
    margin-top: auto;
  }
  .ais-card-why b { color: var(--accent); font-weight: 700; }

  /* ── 카드 액션 ──
     ♡는 썸네일 위에 얹어 세로를 전혀 먹지 않게 한다.
     비교함·스펙북만 하단 행에 둔다. */
  .ais-fav {
    position: absolute;
    top: 8px; right: 8px;
    width: 30px; height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(17,24,39,0.18);
    transition: color 0.14s, transform 0.14s;
  }
  .ais-fav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
  .ais-fav:hover { transform: scale(1.08); color: var(--bad); }
  .ais-fav[aria-pressed="true"] { color: var(--bad); }
  .ais-fav[aria-pressed="true"] svg { fill: currentColor; stroke: currentColor; }

  .ais-card-acts {
    display: flex;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  /* 흰 카드 위에 흰 버튼이라 면이 안 읽힌다는 피드백 → 면을 한 단 깔고
     라벨은 본문색으로 올린다. 좌: 종류 아이콘 + 라벨 / 우: + 아이콘 */
  .ais-card-acts button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--fg);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
  }
  .ais-card-acts button svg { width: 13px; height: 13px; flex-shrink: 0; }
  .ais-card-acts .act-l { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
  /* 면은 각 액션의 의미색으로 옅게 깔고, 글자는 본문색으로 올린다 */
  .ais-card-acts .act-cmp  { background: var(--accent-light); border-color: var(--accent); }
  .ais-card-acts .act-spec { background: var(--good-light);   border-color: var(--good); }
  .ais-card-acts .act-cmp .act-l svg { color: var(--accent); }
  .ais-card-acts .act-spec .act-l svg { color: var(--good); }
  /* + 는 검정(본문색). 담기 전에는 이게 유일한 액션 신호다 */
  .ais-card-acts .act-plus { width: 12px; height: 12px; color: var(--fg); }
  .ais-card-acts .act-cmp:hover  { background: var(--accent); color: #fff; }
  .ais-card-acts .act-spec:hover { background: var(--good);   color: #fff; }
  .ais-card-acts button:hover .act-l svg, .ais-card-acts button:hover .act-plus { color: inherit; }
  /* 담긴 뒤에는 면을 꽉 채워 담기 전과 확실히 갈라놓는다 */
  .ais-card-acts .act-cmp[aria-pressed="true"] {
    background: var(--accent); border-color: var(--accent); color: #fff;
  }
  .ais-card-acts .act-spec[aria-pressed="true"] {
    background: var(--good); border-color: var(--good); color: #fff;
  }
  /* 다크의 --accent·--good은 밝은 파스텔이라 흰 글씨가 묻는다 → 어두운 글씨로 */
  [data-theme="dark"] .ais-card-acts button[aria-pressed="true"],
  [data-theme="dark"] .ais-card-acts .act-cmp:hover,
  [data-theme="dark"] .ais-card-acts .act-spec:hover { color: #0f172a; }
  /* 담긴 뒤엔 +를 45° 돌려 ×로 보이게 한다 — 다시 누르면 빠진다는 뜻 */
  .ais-card-acts button[aria-pressed="true"] .act-plus {
    color: inherit; opacity: 1; transform: rotate(45deg);
  }
  .ais-card-acts button[aria-pressed="true"] .act-l svg { color: inherit; }

  /* ── 공유하기: 중첩 모달 ── */
  .ais-share-overlay {
    position: fixed;
    inset: 0;
    z-index: 510;   /* AI 모달(500/501) 위 */
    background: rgba(15,23,42,0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s;
  }
  .ais-share-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .ais-share-dialog {
    position: relative;
    z-index: 511;
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(17,24,39,0.26);
    padding: 22px 24px 20px;
    font-size: 14px;
    font-weight: 500;
    transform: translateY(-6px) scale(0.99);
    transition: transform 0.2s cubic-bezier(.4,0,.2,1);
  }
  .ais-share-overlay.open .ais-share-dialog { transform: none; }
  [data-theme="dark"] .ais-share-dialog { box-shadow: 0 16px 48px rgba(0,0,0,0.6); }
  .ais-share-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .ais-share-head h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--fg); }

  .ais-share-icons { display: flex; justify-content: space-between; gap: 8px; }
  .ais-share-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    padding: 0;
  }
  /* 원형 아이콘 — 브랜드 색 */
  .ais-share-btn > svg, .ais-share-btn > strong {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.14s ease;
  }
  .ais-share-btn > svg { padding: 15px; }
  .ais-share-btn:hover > svg, .ais-share-btn:hover > strong { transform: translateY(-2px); }
  .ais-share-btn span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
  .sb-mail  > svg { background: #111827; color: #fff; }
  .sb-kakao > strong { background: #FEE500; color: #191600; font-size: 12px; font-weight: 800; letter-spacing: -0.03em; }
  .sb-fb    > svg { background: #1877F2; color: #fff; }
  .sb-li    > svg { background: #0A66C2; color: #fff; }
  .sb-link  > svg { background: #111827; color: #fff; }
  [data-theme="dark"] .sb-mail > svg,
  [data-theme="dark"] .sb-link > svg { background: #e2e8f0; color: #0f172a; }
  .ais-share-note {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-align: center;
  }

  /* ── 토스트 ── */
  .ais-toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%, 12px);
    z-index: 520;   /* 공유 모달(511)보다 위 */
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    box-shadow: 0 8px 28px rgba(17,24,39,0.32);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .ais-toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .ais-toast svg { width: 16px; height: 16px; flex-shrink: 0; color: #4ade80; }
  .ais-toast.info svg { color: #93c5fd; }
  [data-theme="dark"] .ais-toast { background: #e2e8f0; color: #0f172a; }
  [data-theme="dark"] .ais-toast svg { color: #059669; }
  [data-theme="dark"] .ais-toast.info svg { color: #1d4ed8; }

  @media (prefers-reduced-motion: reduce) {
    .ais-open-btn { transition: none; }
    .ais-open-btn:hover { transform: none; }
    .ais-dialog { transition: opacity 0.2s ease; }
    .ais-loading-grid, .ais-dots i { animation: none; }
    .ais-view.is-active { animation: none; }
  }

  /* ══ AI 검색 위저드 · PC 확대 레이어 ══
     FHD에서 모달이 작아 가독성이 떨어진다는 피드백. 연령대가 높은 사용자가 많아
     글자·이미지·버튼을 전반적으로 키우고 보조 텍스트의 대비를 올린다.
     아래 max-width 블록들보다 반드시 먼저 와야 한다 —
     900px 구간에서 이 규칙이 max-width:980 규칙을 덮어쓰면 안 되기 때문. */
  @media (min-width: 769px) {
    /* 모달 안 보조 텍스트는 --muted(#6b7280)보다 진하게 간다 */
    .ais-dialog { --ais-muted: #4b5563; font-size: 15.5px; }
    [data-theme="dark"] .ais-dialog { --ais-muted: #cbd5e1; }

    .ais-overlay { padding: 28px; }
    /* 폭이 좁으면 요약 칩과 카드 태그가 2줄로 감겨 세로가 80px쯤 늘고 결과가 잘린다.
       1360px면 둘 다 한 줄로 펴진다(FHD 실측). */
    .ais-dialog {
      max-width: 1360px;
      height: min(920px, calc(100vh - 56px));
      border-radius: 14px;
    }

    /* 레일 */
    .ais-rail { width: 304px; padding: 30px 26px; }
    .ais-rail-brand { gap: 13px; }
    .ais-badge-ai { width: 42px; height: 42px; border-radius: 11px; font-size: 14px; }
    .ais-rail-title { font-size: 18px; }
    .ais-rail-sub { font-size: 13px; font-weight: 600; color: var(--ais-muted); }
    .ais-rail-note { font-size: 13px; font-weight: 600; color: var(--ais-muted); padding-top: 22px; }
    .ais-steps { margin-top: 30px; gap: 6px; }
    .ais-step { padding: 14px 14px; border-radius: 11px; gap: 14px; }
    .ais-step-no { width: 32px; height: 32px; font-size: 13px; }
    .ais-step.is-done .ais-step-no::after { left: 11px; top: 8px; width: 6px; height: 11px; }
    .ais-step-txt b { font-size: 15.5px; font-weight: 800; }
    .ais-step-txt i { font-size: 12.5px; font-weight: 600; color: var(--ais-muted); opacity: 1; }

    /* 헤더 */
    .ais-head { padding: 28px 32px 18px; }
    .ais-eyebrow { font-size: 12.5px; padding: 4px 11px; border-radius: 5px; margin-bottom: 9px; }
    .ais-title { font-size: 28px; }
    .ais-x { width: 42px; height: 42px; border-radius: 10px; }
    .ais-x svg { width: 19px; height: 19px; }

    /* 본문 */
    .ais-body { padding: 26px 32px 30px; }
    .ais-q { margin-bottom: 32px; }
    .ais-q-label { gap: 10px; margin-bottom: 14px; }
    .ais-q-no { font-size: 12.5px; padding: 4px 10px; border-radius: 5px; }
    .ais-q-label h4 { font-size: 18px; font-weight: 800; }
    .ais-q-req, .ais-q-opt { font-size: 12.5px; font-weight: 700; }
    .ais-q-help { font-size: 14px; font-weight: 600; color: var(--ais-muted); margin: -5px 0 13px; }

    /* 칩 */
    .ais-chips { gap: 10px; }
    .ais-chip { padding: 12px 20px; font-size: 15.5px; font-weight: 700; border-width: 2px; }
    .ais-chip .ais-dot { width: 10px; height: 10px; }
    .ais-chip .ais-sub { font-size: 13px; font-weight: 600; color: var(--ais-muted); }
    .ais-chip .ais-ck { width: 15px; height: 15px; }
    .ais-chip[aria-pressed="true"] { font-weight: 800; }

    /* 입력 */
    .ais-input { width: 200px; padding: 13px 16px; font-size: 16.5px; font-weight: 700; border-width: 2px; }
    .ais-unit { font-size: 15px; font-weight: 700; color: var(--ais-muted); }
    .ais-price-row { gap: 11px; margin-top: 13px; }

    /* 푸터 */
    .ais-foot { padding: 17px 32px; }
    .ais-hint { font-size: 14.5px; font-weight: 600; color: var(--ais-muted); }
    .ais-foot-btns { gap: 9px; }
    .ais-btn { padding: 13px 24px; font-size: 15.5px; font-weight: 800; border-radius: 9px; }

    /* 요약 */
    .ais-summary { gap: 8px; padding: 17px 20px; border-radius: 12px; margin-bottom: 10px; }
    .ais-summary-k { font-size: 13.5px; font-weight: 800; color: var(--ais-muted); }
    .ais-summary .pill { font-size: 13.5px; font-weight: 700; padding: 6px 14px; }
    /* 안내문은 제목 줄에 붙어 우측으로 밀린다 */
    .ais-result-note { font-size: 12.5px; font-weight: 600; color: var(--ais-muted); margin: 0 0 0 auto; text-align: right; }
    .ais-cards-title { margin-bottom: 14px; }
    .ais-cards-title h4 { font-size: 18px; font-weight: 800; }

    /* 카드 액션 */
    .ais-fav { width: 34px; height: 34px; top: 10px; right: 10px; }
    .ais-fav svg { width: 17px; height: 17px; }
    .ais-card-acts { gap: 7px; padding-top: 12px; }
    .ais-card-acts button { padding: 9px 6px; font-size: 12.5px; font-weight: 700; border-radius: 8px; }
    .ais-card-acts button svg { width: 14px; height: 14px; }

    /* 공유 모달 */
    .ais-share-dialog { max-width: 460px; padding: 26px 28px 22px; }
    .ais-share-head h3 { font-size: 21px; }
    .ais-share-btn > svg, .ais-share-btn > strong { width: 58px; height: 58px; }
    .ais-share-btn > svg { padding: 16px; }
    .ais-share-btn span { font-size: 12.5px; font-weight: 700; color: var(--ais-muted); }
    .ais-share-note { font-size: 13px; font-weight: 600; color: var(--ais-muted); }
    .ais-toast { font-size: 14.5px; padding: 14px 24px; }

    /* 카드 */
    .ais-cards { gap: 16px; }
    .ais-card { border-radius: 14px; border-width: 1.5px; }
    .ais-card-thumb { height: 152px; }
    .ais-thumb-ph svg { width: 30px; height: 30px; }
    .ais-thumb-ph span { font-size: 13.5px; font-weight: 800; }
    .ais-rank { font-size: 12.5px; padding: 4px 11px; top: 10px; left: 10px; }
    .ais-card-b { padding: 16px 17px 17px; gap: 9px; }
    .ais-card-name { font-size: 16px; font-weight: 800; }
    .ais-card-mfr { font-size: 13px; font-weight: 600; color: var(--ais-muted); margin-top: -6px; }
    .ais-card-tags { gap: 6px; }
    .ais-card-tags .mat-tag { font-size: 12.5px; padding: 4px 11px; border-radius: 5px; }
    .ais-fit .progress-bar { height: 8px; }
    .ais-fit-pct { font-size: 14.5px; }
    .ais-card-meta { font-size: 13.5px; font-weight: 600; color: var(--ais-muted); }
    .ais-card-meta b { font-size: 14.5px; font-weight: 800; }
    .ais-card-why { font-size: 13.5px; font-weight: 600; color: var(--ais-muted); line-height: 1.6; padding-top: 11px; }
    .ais-card-why b { font-weight: 800; }

    /* 로딩 */
    .ais-badge-ai.lg { width: 66px; height: 66px; border-radius: 17px; font-size: 21px; }
    .ais-loading-title { font-size: 21px; font-weight: 800; margin-top: 22px; }
    .ais-loading-step { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85); margin-top: 10px; min-height: 24px; }
    .ais-loading-bar { width: 280px; height: 5px; margin-top: 26px; }
    .ais-dots i { width: 6px; height: 6px; }

    /* 헤더 진입 버튼은 PC에서도 1·2·3(28px)에 맞춘 높이를 유지한다.
       height를 여기서 덮으면 통일성이 깨진다 — 글자만 살짝 키운다 */
    .ais-open-btn { padding: 0 12px; font-size: 13px; }
  }

  /* ── AI 검색 위저드 반응형 ── */
  @media (max-width: 980px) {
    .ais-cards { grid-template-columns: 1fr; }
    .ais-rail { width: 208px; padding: 20px 16px; }
    .ais-step-txt i { display: none; }
  }
  @media (max-width: 768px) {
    .ais-overlay { padding: 0; }
    .ais-dialog {
      max-width: none;
      width: 100%;
      height: 100vh;
      height: 100dvh;   /* 모바일 주소창 때문에 하단 버튼이 잘리지 않게 */
      border-radius: 0;
      border: none;
      flex-direction: column;
    }
    /* 좌측 레일 → 상단 가로 스텝바 */
    .ais-rail {
      width: auto;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-right: none;
      border-bottom: 1px solid var(--border);
    }
    .ais-rail-brand, .ais-rail-note { display: none; }
    .ais-steps { flex-direction: row; margin-top: 0; flex: 1; gap: 6px; }
    .ais-step { flex: 1; justify-content: center; padding: 7px 4px; }
    .ais-step-txt { display: none; }
    .ais-step.is-current { box-shadow: none; }
    .ais-head { padding: 16px 18px 12px; }
    .ais-title { font-size: 19px; }
    .ais-body { padding: 18px; }
    .ais-foot { flex-direction: column-reverse; align-items: stretch; gap: 10px; padding: 12px 18px; }
    .ais-foot-btns { margin-left: 0; }
    .ais-foot-btns .ais-btn { flex: 1; }
    .ais-hint { text-align: center; }
    /* 세로로 쌓이므로 좌우 구분선은 지운다 */
    .ais-foot-export { margin-left: 0; }
    .ais-foot-export .ais-btn { flex: 1; }
    .ais-foot-export + .ais-foot-btns,
    .ais-foot-export[hidden] + .ais-foot-btns {
      padding-left: 0; margin-left: 0; border-left: none;
    }
    /* 공유 모달: 좁은 화면에서 아이콘 5개가 눌리지 않게 */
    .ais-share-dialog { padding: 20px 18px 18px; }
    .ais-share-icons { gap: 4px; }
    .ais-share-btn > svg, .ais-share-btn > strong { width: 46px; height: 46px; }
    .ais-share-btn > svg { padding: 13px; }
    .ais-share-btn span { font-size: 10.5px; }
    .ais-toast { bottom: 24px; max-width: calc(100vw - 32px); white-space: normal; text-align: center; }
  }
  @media (max-width: 480px) {
    /* .profile-btn span이 480에서 숨는 것과 같은 결 */
    .ais-open-btn span { display: none; }
    .ais-open-btn { padding: 0 10px; }
  }

  /* 인쇄 머리글: 화면에선 숨고 인쇄에서만 나온다 */
  .ais-print-head { display: none; }

  /* ══════════════════════════════════════════════════════════
     인쇄 — AI 추천 보고서만 인쇄한다
     ----------------------------------------------------------
     window.print()만 부르면 뒤의 대시보드까지 통째로 인쇄된다.
     대시보드를 숨기고, 고정 오버레이를 문서 흐름으로 되돌린다.
     ══════════════════════════════════════════════════════════ */
  @media print {
    /* 다크 모드로 인쇄하면 배경이 검게 나와 잉크를 먹는다 → 무조건 라이트 */
    :root, :root[data-theme="dark"] {
      --bg: #ffffff; --surface: #ffffff; --fg: #111827; --muted: #4b5563;
      --border: #d1d5db; --accent: #1d4ed8; --accent-light: #eff6ff;
      --accent-muted: rgba(29,78,216,0.06);
      --good: #059669; --good-light: #ecfdf5;
      --warn: #d97706; --warn-light: #fffbeb;
      --bad: #dc2626; --bad-light: #fef2f2;
    }
    /* 토큰 리셋만으로는 다크가 다 안 걷힌다. 셀렉터 단위로 하드코딩된 다크 값들이
       그대로 살아남아 흰 배경에 어두운 덩어리로 찍힌다 → 개별로 되돌린다.
       (.mat-tag 기본값은 건드리지 않는다 — .fire/.eco 등 변형까지 회색으로 덮어버린다) */
    [data-theme="dark"] .ais-dialog { --ais-muted: #4b5563; }
    [data-theme="dark"] .pill.gray { background: #f3f4f6; color: #6b7280; }
    [data-theme="dark"] .progress-bar { background: #e5e7eb; }
    [data-theme="dark"] .mat-tag.std { background: #f5f3ff; color: #7c3aed; }
    [data-theme="dark"] .ais-card-thumb { background: #f3f4f6; }
    [data-theme="dark"] .ais-thumb-ph { background: var(--ph-bg); }

    @page { size: A4 landscape; margin: 12mm; }

    /* 대시보드 전체를 숨기고 모달만 남긴다 */
    body > *:not(.ais-overlay) { display: none !important; }
    body { background: #fff !important; overflow: visible !important; padding-right: 0 !important; }

    .ais-overlay {
      position: static !important;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      background: none !important;
      backdrop-filter: none !important;
      padding: 0 !important;
      z-index: auto !important;
    }
    .ais-dialog {
      max-width: none !important;
      width: 100% !important;
      height: auto !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      transform: none !important;
      display: block !important;
      font-size: 11pt;
    }
    /* UI 크롬은 전부 뺀다 */
    .ais-rail, .ais-head, .ais-foot, .ais-loading,
    .ais-fav, .ais-card-acts { display: none !important; }
    .ais-main { display: block !important; }
    .ais-body {
      overflow: visible !important;
      padding: 0 !important;
      height: auto !important;
    }
    /* 결과 외의 뷰가 인쇄에 섞이지 않게 */
    .ais-view { display: none !important; }
    .ais-view[data-ais-view="result"] { display: block !important; }

    .ais-print-head {
      display: flex !important;
      align-items: center;
      gap: 12px;
      padding-bottom: 12px;
      margin-bottom: 16px;
      border-bottom: 2px solid #111827;
    }
    .ais-print-head img { height: 30px; width: auto; }
    .ais-print-head strong { display: block; font-size: 15pt; font-weight: 800; letter-spacing: -0.02em; }
    .ais-print-head span { font-size: 8.5pt; color: #4b5563; font-weight: 600; }

    .ais-summary { break-inside: avoid; page-break-inside: avoid; }
    .ais-cards { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8mm !important; }
    .ais-card {
      break-inside: avoid;
      page-break-inside: avoid;
      border: 1px solid #d1d5db !important;
      box-shadow: none !important;
    }
    .ais-card.is-best { box-shadow: none !important; border-color: #1d4ed8 !important; }
    .ais-card-thumb { height: 34mm !important; }

    /* 배경색·썸네일 플레이스홀더가 인쇄에서 날아가지 않게 */
    .ais-card-thumb, .ais-thumb-ph, .ais-rank, .ais-summary,
    .pill, .mat-tag, .progress-bar, .progress-bar .fill, .ais-print-head {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    /* 인쇄물에선 애니메이션이 중간 상태로 굳을 수 있다 */
    .cert-bar span, .gauge-bar .fill, .progress-bar .fill { animation: none !important; }
  }