/* 키워드 도구 공용 스타일 — tools/keyword.html에서 떼어낸 정본.
   · keyword.html(3탭) · keyword-combiner.html · keyword-topkeyword.html · keyword-rank.html 이 함께 쓴다.
   · 2026-08-15 §14-4(3탭 + 3독립 화면) 반영 때 분리. 화면이 4장이 되어 인라인 <style>로는
     같은 규칙이 네 벌로 갈라지기 때문. 규칙 자체는 옮기기만 했고 값은 바꾸지 않았다.
   · 아래 순서는 원래 문서 순서 그대로다(뒤 블록이 앞 블록을 덮는다). 순서를 바꾸지 말 것. */

    /* 시안(EunCoach Tool RelatedKw / Combine / TopKeyword / RankCheck .dc) 이식 —
       기존 변수 이름은 그대로 두고 값만 시안 팔레트(design-tokens.css)로 갈아끼운다.
       이름을 바꾸면 이 파일 2,500줄의 선택자를 전부 손봐야 해서 사고 위험이 크다. */
    :root {
      --cream: var(--eun-bg);
      --ink: var(--eun-ink);
      --ink-2: var(--eun-sub);
      --ink-3: var(--eun-muted);
      --ink-4: var(--eun-muted);
      --line: var(--eun-border);
      --line-soft: var(--eun-bg);
      --card: var(--eun-card);
      --orange: var(--eun-action);
      --orange-hover: var(--eun-button-primary-hover);
      --orange-soft: var(--eun-action-soft);
      --orange-text: var(--eun-action-text-on-soft);
      --blue: var(--eun-action);
      --green: var(--eun-positive);
      --green-soft: var(--eun-positive-soft);
      --green-text: var(--eun-positive-text);
      --gold: var(--eun-caution-text);
      --gold-soft: var(--eun-caution-soft);
      --red: var(--eun-negative-text);
      --red-soft: var(--eun-negative-soft);
      --radius: var(--eun-radius-sm);
      --radius-lg: var(--eun-radius);
      --shadow-card: var(--eun-shadow);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--cream);
      color: var(--ink);
      font-size: var(--eun-font-body-max, 15px);
      line-height: var(--eun-leading-body, 1.55);
      word-break: var(--eun-word-break, keep-all);
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "tnum" 1;
    }
    .num { font-variant-numeric: tabular-nums; }
    header.topbar {
      max-width: 1200px;
      margin: 0 auto;
      padding: 32px 24px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .brand { display: flex; align-items: baseline; gap: 12px; }
    .brand h1 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
    .brand .subtitle { color: var(--ink-3); font-size: 14px; }
    nav.tabs {
      max-width: 1200px;
      margin: 24px auto 0;
      padding: 0 24px;
      display: flex;
      gap: 4px;
      border-bottom: 1px solid var(--line);
    }
    nav.tabs button {
      border: none;
      background: transparent;
      padding: 12px 20px;
      font: inherit;
      font-weight: 600;
      color: var(--ink-3);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color 0.15s, border-color 0.15s;
    }
    nav.tabs button:hover { color: var(--ink-2); }
    nav.tabs button.active { color: var(--ink); border-bottom-color: var(--orange); }
    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 24px;
    }
    section[data-tab] { display: none; }
    section[data-tab].active { display: block; }
    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      margin-bottom: 16px;
    }
    .card h2 {
      font-size: 15px;
      font-weight: 700;
      margin: 0 0 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .card .help {
      font-size: 13px;
      color: var(--ink-3);
      margin: 4px 0 12px;
    }
    textarea, input[type="text"] {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 10px 12px;
      font: inherit;
      font-size: 14px;
      background: #fff;
      color: var(--ink);
      resize: vertical;
      transition: border-color 0.15s;
    }
    textarea:focus, input[type="text"]:focus {
      outline: none;
      border-color: var(--orange);
    }
    textarea { min-height: 120px; line-height: 1.6; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      color: var(--ink);
      font: inherit;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .btn:hover { background: var(--cream); }
    .btn.primary { background: var(--orange); color: #fff; border-color: var(--orange); }
    .btn.primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
    .btn.primary:disabled { background: #E5E5E5; border-color: #DADADA; color: #666666; cursor: not-allowed; }
    .btn.ghost { background: transparent; border-color: var(--line); }
    .row {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    .row.end { justify-content: flex-end; }
    .spacer { flex: 1; }

    /* 연관키워드 탭 */
    .search-area {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items: start;
    }
    .search-area textarea { min-height: 100px; }
    .search-area .buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 120px;
    }
    .search-area .buttons .btn { width: 100%; }
    @media (max-width: 640px) {
      .search-area { grid-template-columns: 1fr; }
    }

    .result-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }
    .result-header .count { font-weight: 700; font-size: 15px; }
    .result-header .filter {
      flex: 1;
      max-width: 320px;
    }
    .result-header .filter input,
    .result-header .filter select {
      padding: 8px 12px;
      font-size: 14px;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      color: var(--ink);
    }

    /* ── 시즌 키워드 토글: 펼침 영역 (계절·월 칩) ─────────────────────────── */
    .season-controls {
      margin: 12px 0 16px;
      padding: 14px 16px;
      background: var(--cream);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }
    .season-chip-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .season-chip-row:last-child { margin-bottom: 0; }
    .season-chip-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--ink-3);
      letter-spacing: 0.04em;
      margin-right: 8px;
      min-width: 30px;
    }
    .season-chip {
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--ink-2);
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 999px;
      cursor: pointer;
      transition: background 120ms, color 120ms, border-color 120ms;
    }
    .season-chip:hover { border-color: var(--orange); }
    .season-chip.active {
      background: var(--orange);
      color: #fff;
      border-color: var(--orange);
    }
    .prefill-candidates {
      margin-top: 9px;
      padding: 8px 10px;
      border: 1px solid #B9DDC8;
      border-radius: 10px;
      background: #F2FBF6;
    }
    /* 2026-07-28 은코치 지적: 추천 답안 박스가 textarea 뒤(grid 두 번째 셀)에 끼어들며
       입력창이 쪼그라들고 박스가 옆자리를 크게 차지 + 조회 버튼이 아래로 밀림.
       → 박스를 격자 전체 폭의 마지막 줄로 내린다 (입력창·버튼은 원래 자리로). */
    .search-area .prefill-candidates {
      grid-column: 1 / -1;
      order: 2;
      margin-top: 0;
    }
    .prefill-candidates-title {
      margin-bottom: 7px;
      color: #176B48;
      font-size: 12px;
      font-weight: 750;
    }
    .prefill-candidate-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }
    .prefill-candidate-chip {
      max-width: 100%;
      padding: 7px 10px;
      border: 1px solid #92CDAA;
      border-radius: 999px;
      background: #fff;
      color: #176B48;
      font: inherit;
      font-size: 12px;
      line-height: 1.35;
      text-align: left;
      white-space: normal;
      cursor: pointer;
    }
    .prefill-candidate-chip:hover:not(:disabled),
    .prefill-candidate-chip:focus-visible:not(:disabled) {
      border-color: #176B48;
      outline: 2px solid rgba(23,107,72,.16);
      outline-offset: 1px;
    }
    .prefill-candidate-chip:disabled {
      opacity: .48;
      cursor: default;
    }
    input.auto-filled,
    textarea.auto-filled {
      border-color: #92CDAA !important;
      background: #F7FCF9 !important;
    }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      max-height: 600px;
      overflow-y: auto;
    }
    table.kw {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    table.kw thead th {
      background: var(--cream);
      font-weight: 700;
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 1;
      white-space: nowrap;
      font-size: 13px;
      color: var(--ink-2);
      cursor: pointer;
      user-select: none;
    }
    table.kw thead th:hover { background: var(--line-soft); }
    table.kw thead th.sortable::after {
      content: " \2195";
      color: var(--ink-3);
      font-size: 10px;
    }
    table.kw thead th.sort-asc::after { content: " \2191"; color: var(--orange); }
    table.kw thead th.sort-desc::after { content: " \2193"; color: var(--orange); }
    table.kw tbody td {
      padding: 8px 12px;
      border-bottom: 1px solid var(--line-soft);
      white-space: nowrap;
    }
    table.kw tbody tr:hover { background: var(--cream); }
    table.kw td.num { text-align: right; }
    .comp-low { color: var(--green); font-weight: 600; }
    .comp-mid { color: var(--blue); font-weight: 600; }
    .comp-high { color: var(--red); font-weight: 600; }
    .sat-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0;
    }
    .sat-low      { background: #E6F4EA; color: #157A3D; }
    .sat-mid      { background: #E7EEFD; color: #1D5AD1; }
    .sat-high     { background: #FFF0EB; color: #0A4FB8; }
    .sat-extreme  { background: #FFE5E1; color: #B42318; }

    /* 시즌 피크 배지 */
    .peak-fire {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      background: #FFF0EB;
      color: #0A4FB8;
      border: 1px solid rgba(11, 91, 211, 0.3);
      letter-spacing: -0.01em;
      white-space: nowrap;
    }
    .peak-normal {
      color: var(--ink-3);
      font-size: 12px;
      font-weight: 500;
    }

    table.kw tbody tr { cursor: pointer; }
    table.kw tbody tr:hover td:first-child strong { color: var(--orange); }
    table.kw tbody tr.hint-row td {
      background: var(--orange-soft);
      font-weight: 600;
    }
    table.kw tbody tr.hint-row td:first-child {
      border-left: 3px solid var(--orange);
    }
    table.kw tbody tr.hint-row td:first-child strong::before {
      content: "★ ";
      color: var(--orange);
    }
    table.kw tbody tr.hint-divider td {
      background: var(--line-soft);
      border-top: 2px solid var(--line);
      font-size: 11px;
      color: var(--ink-3);
      padding: 4px 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
    }

    /* 트렌드 모달 */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 20px;
    }
    .modal-backdrop.open { display: flex; }
    .modal {
      background: #fff;
      border-radius: 12px;
      max-width: 820px;
      width: 100%;
      max-height: 92vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    }
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 2;
    }
    .modal-title {
      font-size: 18px;
      font-weight: 700;
      margin: 0;
    }
    .modal-title .kw {
      color: var(--orange);
    }
    .modal-close {
      border: none;
      background: transparent;
      font-size: 24px;
      line-height: 1;
      color: var(--ink-3);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
    }
    .modal-close:hover { background: var(--cream); color: var(--ink); }
    .modal-body {
      padding: 24px;
    }
    .modal-section {
      margin-bottom: 22px;
    }
    .modal-section:last-child { margin-bottom: 0; }
    .modal-section-title {
      font-size: 14px;
      font-weight: 700;
      margin: 0 0 10px;
      color: var(--ink-2);
    }
    .modal-chart-wrap {
      position: relative;
      background: var(--cream);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 16px 18px;
    }
    /* 추이 그래프 호버 툴팁 */
    .chart-hover-zone { cursor: crosshair; }
    .chart-tip {
      position: absolute;
      z-index: 5;
      pointer-events: none;
      background: var(--ink);
      color: #fff;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.5;
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
      opacity: 0;
      transition: opacity .12s ease;
    }
    .chart-tip.show { opacity: 1; }
    .chart-tip-title {
      font-weight: 700;
      font-size: 11px;
      opacity: .8;
      margin-bottom: 4px;
    }
    .chart-tip-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .chart-tip-row b {
      margin-left: auto;
      padding-left: 14px;
      font-variant-numeric: tabular-nums;
    }
    .chart-tip-row .d {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
    }
    .chart-tip-row .d.pc { background: var(--blue); }
    .chart-tip-row .d.mo { background: var(--green); }
    .chart-tip-row.total {
      margin-top: 3px;
      padding-top: 3px;
      border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
    .chart-tip-row.total b { color: var(--orange); }
    .modal-note {
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 10px;
      line-height: 1.6;
    }

    /* 상단 검색량 카드 3개 */
    .volume-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    @media (max-width: 520px) {
      .volume-cards { grid-template-columns: 1fr; }
    }
    .volume-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
      text-align: left;
    }
    .volume-card .label {
      font-size: 12px;
      color: var(--ink-3);
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
    }
    .volume-card .label .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .volume-card .val {
      font-size: 22px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }
    .volume-card .bar {
      margin-top: 8px;
      height: 4px;
      background: var(--line-soft);
      border-radius: 999px;
      overflow: hidden;
    }
    .volume-card .bar-fill {
      height: 100%;
      border-radius: 999px;
      transition: width 0.3s;
    }
    .volume-card.pc .bar-fill,
    .volume-card.pc .dot { background: var(--blue); }
    .volume-card.pc .val { color: var(--blue); }
    .volume-card.mo .bar-fill,
    .volume-card.mo .dot { background: var(--green); }
    .volume-card.mo .val { color: var(--green); }
    .volume-card.total .bar-fill,
    .volume-card.total .dot { background: var(--orange); }
    .volume-card.total .val { color: var(--ink); }

    /* range 토글 */
    .range-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .range-toggle {
      display: inline-flex;
      background: var(--line-soft);
      border-radius: 8px;
      padding: 3px;
      gap: 2px;
    }
    .range-btn {
      border: none;
      background: transparent;
      padding: 6px 12px;
      border-radius: 6px;
      font: inherit;
      font-size: 12px;
      color: var(--ink-2);
      cursor: pointer;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.2;
      transition: background 0.12s;
      min-width: 62px;
    }
    .range-btn .sub {
      font-size: 10px;
      color: var(--ink-3);
      font-weight: 400;
      margin-top: 2px;
    }
    .range-btn:hover { background: #fff; }
    .range-btn.active {
      background: #fff;
      color: var(--ink);
      font-weight: 700;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .range-btn.active .sub { color: var(--orange); }

    /* 피크 월 요약 배지 (1년 차트용) — 트렌드 모달 헤더 리본 */
    .modal-peak-ribbon {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #FFF5F0;
      border: 1px solid rgba(11, 91, 211, 0.25);
      color: var(--orange);
      border-radius: 999px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    /* 표 셀 안 작은 피크 배지 (탭1·2 시즌 컬럼) */
    .peak-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: 700;
      border-radius: 999px;
      background: var(--line-soft);
      color: var(--ink-2);
      white-space: nowrap;
    }
    .peak-badge.peak-now {
      background: var(--orange);
      color: #fff;
    }
    .peak-badge.peak-next {
      background: var(--gold-soft);
      color: #8A6519;
    }

    /* 시즌 임박(이번달·다음달 피크) 행 강조 — 키워드 행에 미세한 gold 배경 */
    .kw-table tbody tr.season-upcoming {
      background: var(--gold-soft);
    }
    .kw-table tbody tr.season-upcoming.essential {
      /* essential(빈도 1~5등) + 시즌 임박 동시 — essential의 주황 배경 우선 + 우측 gold 인디케이터 */
      background: rgba(11, 91, 211, 0.16);
      box-shadow: inset 3px 0 0 var(--orange), inset -3px 0 0 var(--gold);
    }
    .kw-table tbody tr.season-upcoming td:last-child {
      box-shadow: inset -3px 0 0 var(--gold);
    }

    /* 2라인 차트 범례 */
    .chart-legend {
      display: flex;
      gap: 16px;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--ink-2);
      justify-content: flex-end;
    }
    .chart-legend .lg {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .chart-legend .lg::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    .chart-legend .lg.pc::before { background: var(--blue); }
    .chart-legend .lg.mo::before { background: var(--green); }

    /* 하단 블로그 블록 */
    .blog-block {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 520px) {
      .blog-block { grid-template-columns: 1fr; }
    }
    .blog-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
    }
    .blog-card .label {
      font-size: 12px;
      color: var(--ink-3);
      margin-bottom: 4px;
    }
    .blog-card .val {
      font-size: 20px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .blog-card .val .unit {
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-3);
    }
    /* 트렌드 모달 — 블로그 1~10등 섹션 */
    .modal-section.blog-posts-section {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }
    .blog-post-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .blog-post-loading {
      padding: 24px;
      text-align: center;
      color: var(--ink-3);
      font-size: 13px;
    }
    .blog-post-card {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      text-decoration: none;
      color: var(--ink);
      background: var(--cream);
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      transition: border-color 120ms ease, background 120ms ease;
    }
    .blog-post-card:hover {
      border-color: var(--orange);
      background: #fff;
    }
    .blog-post-card .blog-post-rank {
      flex: 0 0 auto;
      font-family: 'Geist Mono', ui-monospace, monospace;
      font-size: 13px;
      font-weight: 700;
      color: var(--orange);
      width: 24px;
      text-align: center;
    }
    .blog-post-card .blog-post-content { flex: 1; min-width: 0; }
    .blog-post-card .blog-post-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .blog-post-card .blog-post-desc {
      font-size: 12px;
      color: var(--ink-2);
      line-height: 1.5;
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .blog-post-card .blog-post-meta {
      font-size: 11px;
      color: var(--ink-3);
    }
    .blog-post-card .blog-post-meta .sep { color: var(--ink-4); margin: 0 6px; }
    .blog-post-error {
      padding: 16px;
      text-align: center;
      color: var(--ink-3);
      font-size: 12px;
      background: var(--cream);
      border: 1px dashed var(--line);
      border-radius: var(--radius);
    }

    .empty, .loading {
      padding: 48px 24px;
      text-align: center;
      color: var(--ink-3);
    }
    .loading::before {
      content: "";
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid var(--line);
      border-top-color: var(--orange);
      border-radius: 50%;
      margin-right: 8px;
      animation: spin 0.8s linear infinite;
      vertical-align: -3px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .error {
      padding: 14px 16px;
      background: #FFF3F0;
      color: var(--red);
      border: 1px solid #FFD4CB;
      border-radius: var(--radius);
      font-size: 14px;
      margin-bottom: 16px;
    }

    /* 조합기 */
    .combo-inputs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    @media (max-width: 900px) {
      .combo-inputs { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .combo-inputs { grid-template-columns: 1fr; }
    }
    .combo-input { display: flex; flex-direction: column; gap: 6px; }
    .combo-input label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-2);
    }
    .combo-input label .badge {
      display: inline-flex;
      width: 20px;
      height: 20px;
      align-items: center;
      justify-content: center;
      background: var(--orange-soft);
      color: var(--orange);
      border-radius: 50%;
      font-size: 12px;
      font-weight: 700;
    }
    .combo-input .count-hint {
      font-size: 11px;
      color: var(--ink-3);
      text-align: right;
      min-height: 14px;
    }

    /* 자연스러운 순서 하이라이트 카드 */
    .natural-rule-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: linear-gradient(135deg, #FFF5F0 0%, #FFEEE7 100%);
      border: 1px solid rgba(11, 91, 211, 0.25);
      border-radius: var(--radius);
      padding: 14px 18px;
      margin-bottom: 14px;
    }
    .natural-rule-text {
      flex: 1;
      min-width: 0;
    }
    .natural-rule-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--orange);
      margin-bottom: 4px;
      letter-spacing: -0.01em;
    }
    .natural-rule-desc {
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.55;
    }
    .natural-rule-desc em {
      font-style: normal;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.6);
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
    .natural-rule-card .btn.primary {
      flex-shrink: 0;
    }
    @media (max-width: 600px) {
      .natural-rule-card {
        flex-direction: column;
        align-items: stretch;
      }
      .natural-rule-card .btn.primary { width: 100%; }
    }

    .combo-rules {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .combo-rules .rule-group .rule-title {
      font-weight: 700;
      font-size: 13px;
      color: var(--ink-2);
      margin-bottom: 8px;
    }
    .combo-rules .checks {
      display: flex;
      gap: 6px 10px;
      flex-wrap: wrap;
    }
    .combo-rules label.chk {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      user-select: none;
      background: #fff;
    }
    .combo-rules label.chk:hover { background: var(--cream); }
    .combo-rules label.chk input { margin: 0; accent-color: var(--orange); }
    .combo-rules label.chk.checked { background: var(--orange-soft); border-color: var(--orange); }

    .combo-stats {
      font-size: 13px;
      color: var(--ink-3);
      margin-top: 6px;
    }

    .footer {
      text-align: center;
      padding: 32px 16px;
      color: var(--ink-3);
      font-size: 13px;
    }
    .footer a { color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted var(--ink-3); }

    /* ── 모바일 친화 (자영업자 50%+ 모바일) ─────────────────── */
    @media (max-width: 640px) {
      header.topbar { padding: 20px 16px 0; }
      .brand h1 { font-size: 20px; }
      .brand .subtitle { font-size: 12px; }
      nav.tabs {
        padding: 0 16px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      nav.tabs::-webkit-scrollbar { display: none; }
      nav.tabs button {
        padding: 10px 12px;
        font-size: 13px;
        flex-shrink: 0;
        white-space: nowrap;
      }
      main { padding: 16px; }
      .card { padding: 16px; }
      .card h2 { font-size: 14px; }
      textarea, input[type="text"] { font-size: 16px; } /* iOS 자동 줌 방지 */
      .btn { padding: 12px 16px; font-size: 14px; } /* 손가락 터치 영역 확보 */
    }

    /* 결과 영역 안내 — 처음 보는 사장님도 뭘 해야 하는지 한 눈에 */
    .result-tip {
      background: var(--orange-soft);
      border-left: 3px solid var(--orange);
      padding: 10px 14px;
      margin-bottom: 12px;
      font-size: 13px;
      color: var(--ink-2);
      border-radius: 4px;
      line-height: 1.55;
    }
    .result-tip strong { color: var(--orange); font-weight: 700; }

    /* 결과 헤더 — 모바일에서 줄 정렬 깔끔하게 */
    .result-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    @media (max-width: 640px) {
      .result-header { flex-direction: column; align-items: stretch; gap: 10px; }
      .result-header .filter { max-width: none; flex: 1; }
      .result-actions { gap: 6px; }
      .result-actions .btn { padding: 9px 14px; font-size: 13px; flex: 0 0 auto; }
    }

    /* 데스크톱 — 자세히/간단히 토글 */
    .btn-advanced { white-space: nowrap; }
    .table-wrap.is-simple .col-advanced { display: none; }
    @media (max-width: 720px) {
      .btn-advanced { display: none; }
    }

    /* 모바일 정렬 셀렉트 — 표 위에 한 줄 */
    .kw-sort-mobile {
      display: none;
      width: 100%;
      padding: 11px 12px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      color: var(--ink);
      margin-bottom: 10px;
      -webkit-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
    }
    @media (max-width: 720px) {
      .kw-sort-mobile { display: block; }
    }

    /* 모바일 카드 — 표 대신 카드 1개당 키워드 1개 */
    .kw-cards { display: none; flex-direction: column; gap: 10px; }
    @media (max-width: 720px) {
      .kw-cards { display: flex; }
      .table-wrap.kw-table-wrap { display: none; }
    }
    .kw-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 14px 16px;
      cursor: pointer;
      transition: border-color 0.15s, transform 0.05s;
      -webkit-tap-highlight-color: transparent;
    }
    .kw-card:active { transform: scale(0.99); border-color: var(--orange); }
    .kw-card.is-hint {
      background: linear-gradient(135deg, #FFF5F0 0%, #FFEEE7 100%);
      border-color: rgba(11, 91, 211, 0.3);
    }
    .kw-card-hint-label {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      color: var(--orange);
      margin-bottom: 6px;
      letter-spacing: -0.01em;
    }
    .kw-card-hint-label::before { content: "★ "; }
    .kw-name {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: 8px;
      word-break: break-all;
      line-height: 1.3;
    }
    .kw-total-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-bottom: 10px;
    }
    .kw-total {
      font-size: 26px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      color: var(--ink);
      line-height: 1;
    }
    .kw-total-unit {
      font-size: 12px;
      color: var(--ink-3);
      font-weight: 500;
    }
    .kw-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 12px;
    }
    .kw-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
      background: var(--cream);
      border-radius: 999px;
      color: var(--ink-2);
      line-height: 1.2;
    }
    .kw-meta-item .label { color: var(--ink-3); font-weight: 500; }
    .kw-meta-item strong { color: var(--ink); font-weight: 700; }
    /* 카드 안의 시즌/경쟁 뱃지는 배경/패딩 제거 (이미 칩 안임) */
    .kw-meta-item .sat-badge,
    .kw-meta-item .peak-fire {
      padding: 0;
      background: transparent;
      border: 0;
      font-size: 12px;
    }
    .kw-meta-item.peak-on { background: #FFF0EB; }
    .kw-meta-item.peak-on .label { color: var(--orange); }
    .kw-card-tap-hint {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed var(--line);
      font-size: 11px;
      color: var(--ink-3);
      text-align: center;
      letter-spacing: -0.01em;
    }
    /* ── 5번째 탭: 대표 키워드 분석기 (분석 리포트 톤) ─────────────── */
    #competitor-query-input { width: 100%; }
    .filter-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-right: 12px; }
    .filter-label input[type="number"] { width: 90px; }

    /* 단계별 로딩 인디케이터 */
    .competitor-staged-loader {
      padding: 32px 28px 28px;
      max-width: 520px;
      margin: 0 auto;
    }
    .competitor-staged-loader .stage-list {
      list-style: none;
      padding: 0;
      margin: 0 0 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .competitor-staged-loader .stage {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--ink-3);
      transition: color 240ms ease;
    }
    .competitor-staged-loader .stage .dot {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1.5px solid var(--line);
      background: transparent;
      margin-top: 2px;
      position: relative;
      transition: background 200ms ease, border-color 200ms ease;
    }
    .competitor-staged-loader .stage.done {
      color: var(--ink-3);
    }
    .competitor-staged-loader .stage.done .dot {
      background: var(--ink-3);
      border-color: var(--ink-3);
    }
    .competitor-staged-loader .stage.done .dot::after {
      content: "";
      position: absolute;
      left: 4px;
      top: 1px;
      width: 4px;
      height: 8px;
      border-right: 1.5px solid var(--cream);
      border-bottom: 1.5px solid var(--cream);
      transform: rotate(45deg);
    }
    .competitor-staged-loader .stage.active {
      color: var(--ink);
      font-weight: 600;
    }
    .competitor-staged-loader .stage.active .dot {
      background: var(--orange);
      border-color: var(--orange);
      animation: competitor-pulse 1.4s ease-in-out infinite;
    }
    @keyframes competitor-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(11, 91, 211, 0.45); }
      50% { box-shadow: 0 0 0 6px rgba(11, 91, 211, 0); }
    }
    .competitor-staged-loader .timer {
      margin-top: 4px;
      padding-top: 14px;
      border-top: 1px solid var(--line-soft);
      font-size: 12px;
      color: var(--ink-3);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
      text-align: left;
    }
    /* 작업 중 표시 — 회전 아이콘 + 점점점 (시계초 텍스트 대체) */
    .loader-working {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px dashed var(--line);
      font-size: 13px;
      color: var(--ink-2);
    }
    .loader-spin {
      display: inline-block;
      font-size: 18px;
      animation: loader-spin 2.4s linear infinite;
    }
    @keyframes loader-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .loader-working-text { font-weight: 600; }
    .loader-dots {
      display: inline-flex;
      gap: 3px;
      margin-left: 2px;
    }
    .loader-dots span {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--orange);
      opacity: 0.3;
      animation: loader-dot 1.4s ease-in-out infinite;
    }
    .loader-dots span:nth-child(2) { animation-delay: 0.2s; }
    .loader-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes loader-dot {
      0%, 100% { opacity: 0.3; transform: translateY(0); }
      50%      { opacity: 1;   transform: translateY(-2px); }
    }

    /* ── 대시보드 — 결과 스토리 라인 ─────────────────────── */
    .result-story {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 12px;
      padding: 4px 0 18px;
      border-bottom: 1px solid var(--line-soft);
      margin-bottom: 24px;
    }
    .result-story .query {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    .region-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      font-size: 12px;
      font-weight: 600;
      color: var(--orange);
      background: var(--orange-soft);
      border-radius: 999px;
      letter-spacing: -0.01em;
    }
    .region-chip::before { content: "◉"; font-size: 9px; }
    .stats-meta {
      font-size: 13px;
      color: var(--ink-2);
      margin-left: auto;
    }
    .stats-meta .sep { color: var(--ink-4); margin: 0 8px; }
    .input-hint {
      flex-basis: 100%;
      margin-top: 8px;
      padding: 10px 14px;
      background: #FFF7E8;
      border: 1px solid #F4D58D;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.5;
      color: #7A5200;
    }
    .input-hint strong { color: #4A3000; font-weight: 700; }

    /* ── KPI 카드 ───────────────────────────────────── */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 28px;
    }
    .kpi {
      position: relative;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 18px 20px 16px;
      overflow: hidden;
    }
    .kpi.accent { background: linear-gradient(180deg, var(--orange-tint) 0%, var(--card) 60%); }
    .kpi .kpi-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--ink-3);
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .kpi .kpi-value {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--ink);
    }
    .kpi .kpi-value .unit {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink-3);
      margin-left: 4px;
    }
    .kpi.accent .kpi-value { color: var(--orange); }
    .kpi .kpi-sub {
      margin-top: 10px;
      font-size: 12px;
      color: var(--ink-3);
      line-height: 1.5;
    }
    .kpi .kpi-sub strong { color: var(--ink-2); font-weight: 600; }
    .kpi-bar {
      display: flex;
      gap: 2px;
      height: 4px;
      margin-top: 12px;
      overflow: hidden;
      border-radius: 2px;
    }
    .kpi-bar .seg { background: var(--orange-soft); flex: 1; }
    .kpi-bar .seg.fill { background: var(--orange); }
    .kpi-bar .seg.green { background: var(--green); }
    .kpi-bar .seg.greensoft { background: var(--green-soft); }

    /* ── 두 카드 섹션 (발굴 / 공통) ───────────────────── */
    .panel-row {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 16px;
      margin-bottom: 28px;
    }
    .panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 20px 22px 22px;
    }
    .panel-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 16px;
    }
    .panel-head h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.01em;
    }
    .panel-head .panel-tag {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--ink-3);
      text-transform: uppercase;
    }
    .panel-head .panel-desc {
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 4px;
    }
    .panel-intro {
      font-size: 12px;
      color: var(--ink-3);
      margin: -10px 0 14px;
      line-height: 1.5;
    }

    /* 발굴 후보 카드 그리드 */
    .find-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .find-card {
      padding: 12px 14px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: var(--cream);
      transition: border-color 120ms ease, transform 120ms ease;
      cursor: pointer;
    }
    .find-card:hover {
      border-color: var(--orange);
      transform: translateY(-1px);
    }
    .find-card .find-kw {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.01em;
    }
    .find-card .find-vol {
      font-size: 18px;
      font-weight: 800;
      color: var(--orange);
      margin-top: 4px;
      letter-spacing: -0.02em;
    }
    .find-card .find-vol .unit { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
    .find-card .find-meta {
      font-size: 11px;
      color: var(--ink-3);
      margin-top: 4px;
    }
    .find-card .find-meta strong { color: var(--ink-2); font-weight: 600; }

    /* 공통 키워드 카드 */
    .common-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .common-card {
      display: grid;
      grid-template-columns: 28px 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 12px 14px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: var(--cream);
      cursor: pointer;
    }
    .common-rank {
      font-family: 'Geist Mono', ui-monospace, monospace;
      font-size: 13px;
      font-weight: 700;
      color: var(--orange);
      letter-spacing: -0.02em;
    }
    .common-kw {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }
    .common-kw .common-shop {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: var(--ink-3);
      margin-top: 2px;
    }
    .common-vol {
      text-align: right;
    }
    .common-vol .vol-num {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }
    .common-vol .vol-label {
      display: block;
      font-size: 10px;
      color: var(--ink-3);
      margin-top: 2px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* ── 시즌 임박 배지 (tab1 패널/카드용) ─────── */
    .badge-season {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 7px;
      border-radius: 999px;
      background: var(--orange-soft);
      color: var(--orange);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.02em;
      margin-right: 4px;
    }
    .badge-season.next {
      background: var(--gold-soft);
      color: var(--gold);
    }

    /* ── 경쟁(블로그 포화도) 라벨 ─────── */
    .sat-label {
      display: inline-flex;
      align-items: center;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .sat-label.few {
      background: var(--green-soft);
      color: var(--green);
    }
    .sat-label.normal {
      background: var(--line-soft);
      color: var(--ink-3);
    }
    .sat-label.many {
      background: var(--red-soft);
      color: var(--red);
    }

    /* ── 표 섹션 ─────────────────────── */
    .table-panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 22px 24px 24px;
      margin-bottom: 28px;
    }
    .table-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 16px;
    }
    .table-head h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .table-head .table-controls {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    /* 다시 분석 액션 카드 — 표 위에 설명+버튼 묶음 */
    .action-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px 16px;
      padding: 16px 20px;
      background: var(--card);
      border: 1px solid var(--orange);
      border-radius: var(--radius-lg);
      margin: 16px 0;
      /* 2026-07-28 은코치 지적: 좁은 폭(iframe)에서 설명 글이 한 글자씩 세로로 낑김.
         공간이 모자라면 설명 줄 아래로 버튼 묶음이 내려가게 한다. */
      flex-wrap: wrap;
    }
    .action-card-text { flex: 1 1 260px; min-width: 240px; }
    .action-card-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .action-card-desc {
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.6;
    }
    .action-card-desc strong { color: var(--orange); font-weight: 700; }
    .action-card .btn {
      line-height: 1.4;
      padding: 12px 18px;
    }
    .next-tool-controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .next-tool-controls select {
      min-width: 180px;
      max-width: 260px;
      padding: 9px 34px 9px 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--surface);
      color: var(--ink);
      font: inherit;
    }
    @media (max-width: 640px) {
      .action-card {
        flex-direction: column;
        align-items: stretch;
      }
      .action-card .btn { width: 100%; }
      .action-card .btn br { display: none; }
      .next-tool-controls { justify-content: stretch; }
      .next-tool-controls select { width: 100%; max-width: none; }
    }

    /* 시즌 키워드만 토글 등 — data-active 활성화 표시 */
    .btn[data-active="true"] {
      background: var(--orange);
      color: #fff;
      border-color: var(--orange);
    }

    /* 탭 도움말 카드 — 입력 카드 상단에 "이 도구는 이렇게 쓰세요" */
    .help-callout {
      background: linear-gradient(180deg, var(--orange-soft) 0%, var(--cream) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 16px 20px;
      margin-bottom: 16px;
    }
    .help-callout-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 8px;
    }
    .help-callout-body p {
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.7;
      margin: 0 0 6px;
    }
    .help-callout-body p:last-child { margin-bottom: 0; }
    .help-callout-body strong { color: var(--orange); font-weight: 700; }
    .seg-control {
      display: inline-flex;
      background: var(--line-soft);
      border-radius: 999px;
      padding: 3px;
      gap: 2px;
    }
    .seg-control button {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-2);
      border-radius: 999px;
      cursor: pointer;
      transition: background 120ms ease, color 120ms ease;
    }
    .seg-control button.active {
      background: var(--orange);
      color: #fff;
    }
    .min-vol {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--ink-3);
    }
    .min-vol input {
      width: 80px;
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      font: inherit;
      font-size: 12px;
      background: #fff;
    }
    .kw-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    .kw-table thead th {
      font-size: 11px;
      font-weight: 700;
      color: var(--ink-3);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-align: left;
      padding: 0 12px 10px;
      border-bottom: 1px solid var(--line);
    }
    .kw-table thead th.num { text-align: right; }
    .kw-table tbody td {
      padding: 12px;
      border-bottom: 1px solid var(--line-soft);
      vertical-align: middle;
    }
    .kw-table tbody tr.kw-clickable { cursor: pointer; }
    .kw-table tbody tr.kw-clickable:hover { background: var(--cream); }
    .kw-table tbody tr.kw-clickable:hover .kw-text { color: var(--orange); }
    .kw-table tbody tr.essential { background: var(--orange-tint); position: relative; }
    .kw-table tbody tr.essential td:first-child {
      box-shadow: inset 3px 0 0 var(--orange);
    }
    .kw-table tbody tr.essential .kw-text { font-weight: 700; }
    .kw-table .num { text-align: right; font-variant-numeric: tabular-nums; }
    .kw-table .rank { color: var(--ink-3); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; }
    .kw-table .kw-text { font-size: 16px; color: var(--ink); white-space: nowrap; }
    /* 키워드 칸은 한 줄 고정 (사이드바로 표가 눌려도 글자마다 줄바꿈되지 않게). 넘치면 .table-wrap이 가로스크롤. */
    .kw-table th:first-child, .kw-table td:first-child { white-space: nowrap; }
    .kw-table .vol-cell { font-size: 15px; font-weight: 600; color: var(--ink); }
    .kw-table .vol-cell.muted { color: var(--ink-4); }
    .kw-table .region-cell {
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
    }
    .kw-table .region-cell.empty { color: var(--ink-4); font-weight: 400; }
    .kw-table .region-hint {
      display: block;
      font-size: 11px;
      font-weight: 400;
      color: var(--ink-3);
      margin-top: 2px;
    }
    .kw-table .shop-frac {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .kw-table .shop-bar {
      width: 40px;
      height: 4px;
      background: var(--line-soft);
      border-radius: 2px;
      overflow: hidden;
    }
    .kw-table .shop-bar .fill {
      height: 100%;
      background: var(--orange);
      opacity: 0.55;
    }

    /* 키워드 클릭 (트렌드 모달 점프) */
    .kw-link-competitor {
      cursor: pointer;
      text-decoration: none;
      border-bottom: 1px dotted transparent;
      padding-bottom: 1px;
      transition: border-color 120ms ease, color 120ms ease;
    }
    .kw-link-competitor:hover {
      color: var(--orange);
      border-bottom-color: var(--orange);
    }

    /* ── 가게 카드 그리드 ────────────────────────────── */
    .shops-panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 22px 24px 24px;
    }
    .shops-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .shop-card {
      padding: 12px 14px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: var(--cream);
      transition: border-color 120ms ease;
    }
    .shop-card:hover { border-color: var(--orange); }
    .shop-card .shop-rank {
      font-family: 'Geist Mono', ui-monospace, monospace;
      font-size: 11px;
      font-weight: 700;
      color: var(--orange);
      letter-spacing: 0.04em;
    }
    .shop-card .shop-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      margin-top: 4px;
      line-height: 1.4;
    }
    .shop-card .shop-cat {
      font-size: 11px;
      color: var(--ink-3);
      margin-top: 2px;
    }
    .shop-card .shop-kw {
      font-size: 11px;
      color: var(--ink-3);
      margin-top: 8px;
      line-height: 1.5;
      padding-top: 8px;
      border-top: 1px dashed var(--line);
    }

    /* ── 멤버 잠금 (6위 이상) ──────────────────────── */
    .shops-grid-wrap { position: relative; }
    .shop-card.shop-card-locked {
      opacity: 0.55;
      pointer-events: none;
    }
    .shop-card.shop-card-locked .shop-blurred {
      filter: blur(4px);
      user-select: none;
    }
    .competitor-lock-overlay {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 28px 16px 20px;
      background: linear-gradient(180deg, transparent 0%, rgba(250, 247, 242, 0.95) 35%, var(--cream) 100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: auto;
      min-height: 280px;
    }
    .lock-overlay-content {
      text-align: center;
      max-width: 360px;
      background: #fff;
      border: 1.5px dashed var(--orange);
      border-radius: 14px;
      padding: 20px 18px;
      box-shadow: 0 6px 24px rgba(26,26,26,0.08);
    }
    .lock-overlay-icon { font-size: 28px; margin-bottom: 6px; }
    .lock-overlay-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 6px;
    }
    .lock-overlay-desc {
      font-size: 13px;
      color: var(--ink-2);
      margin-bottom: 14px;
      line-height: 1.55;
    }
    .lock-overlay-actions {
      display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
    }
    .lock-btn-primary {
      background: var(--orange);
      color: #fff !important;
      padding: 10px 18px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 13px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }
    .lock-btn-primary:hover { background: var(--orange-hover); }
    .lock-btn-secondary {
      background: transparent;
      color: var(--ink-2);
      padding: 10px 14px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 12px;
      border: 1px solid var(--line);
      cursor: pointer;
    }
    .lock-btn-secondary:hover {
      border-color: var(--orange);
      color: var(--orange);
    }

    /* ── 안내 박스 ─────────────────────────────────── */
    .tip {
      padding: 14px 18px;
      border-left: 2px solid var(--orange);
      background: var(--orange-tint);
      border-radius: var(--radius);
      margin-bottom: 24px;
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink-2);
    }
    .tip p { margin: 0; }
    .tip p + p { margin-top: 6px; }
    .tip .em { color: var(--orange); font-weight: 600; }
    .tip strong { color: var(--ink); font-weight: 600; }
    .tip::before {
      content: "─";
      color: var(--orange);
      font-weight: 700;
      margin-right: 6px;
    }

    /* 작은 ghost 버튼 + 필터 input — 표 헤더에 들어가는 컨트롤용 */
    .btn.btn-small { padding: 6px 12px; font-size: 12px; font-weight: 600; }
    .min-vol-input {
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      font: inherit;
      font-size: 13px;
      width: 160px;
      background: #fff;
      color: var(--ink);
    }
    .min-vol-input:focus { outline: none; border-color: var(--orange); }

    /* ── 롤모델·경쟁 분석 (tab6) ──────────────────── */
    .rolemodel-locked-access {
      max-width: 720px;
      margin: 0 auto;
      padding: 28px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
    }
    .rolemodel-locked-access h3 {
      margin: 0 0 10px;
      color: var(--ink);
      font-size: 20px;
      line-height: 1.45;
      word-break: keep-all;
    }
    .rolemodel-locked-access p {
      margin: 0;
      color: var(--ink-2);
      font-size: 15px;
      line-height: 1.7;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    .rolemodel-locked-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      margin-top: 22px;
    }
    .rolemodel-locked-primary,
    .rolemodel-locked-secondary {
      max-width: 100%;
      min-width: 0;
      height: auto;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    .rolemodel-locked-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 12px 20px;
      border-radius: var(--radius);
      background: var(--orange);
      color: var(--card);
      font-weight: 700;
      line-height: 1.45;
      text-align: center;
      text-decoration: none;
    }
    .rolemodel-locked-primary:hover,
    .rolemodel-locked-primary:focus-visible { background: var(--orange-hover); }
    .rolemodel-locked-secondary {
      color: #374151;
      font-weight: 700;
      line-height: 1.5;
      text-underline-offset: 3px;
    }
    .rolemodel-candidates {
      display: grid;
      gap: 14px;
      min-width: 0;
      margin-bottom: 16px;
    }
    .rolemodel-candidates[hidden],
    #rolemodel-access[hidden],
    #rolemodel-member-view[hidden] { display: none !important; }
    .rolemodel-candidate-section {
      display: grid;
      gap: 8px;
      min-width: 0;
    }
    .rolemodel-candidate-title {
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.55;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    .rolemodel-candidate-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
    }
    .rolemodel-candidate-chip {
      max-width: 100%;
      min-width: 0;
      height: auto;
      padding: 9px 12px;
      border: 1px solid #9CA3AF;
      border-radius: 999px;
      background: #FFFFFF;
      color: #1F2937;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
      text-align: left;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
      cursor: pointer;
    }
    .rolemodel-candidate-chip:hover,
    .rolemodel-candidate-chip:focus-visible {
      border-color: #176B48;
      outline: 2px solid rgba(23, 107, 72, 0.18);
      outline-offset: 1px;
    }
    .rolemodel-candidate-chip.selected,
    .rolemodel-candidate-chip[aria-pressed="true"] {
      border-color: #176B48;
      background: #EAF6EF;
      color: #0E4D34;
    }
    .rolemodel-inputs {
      display: grid;
      gap: 12px;
      min-width: 0;
    }
    .rolemodel-field { min-width: 0; }
    .rolemodel-field label {
      display: block;
      margin-bottom: 6px;
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
      word-break: keep-all;
    }
    .rolemodel-result-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: -12px 0 28px;
    }
    /* KPI 3칸 grid (다른 탭은 4칸) */
    #rolemodel-kpi.kpi-grid {
      grid-template-columns: repeat(3, 1fr);
    }
    /* KPI 카드 — 데이터 대시보드 느낌 (균일 높이 + mini progress bar) */
    #rolemodel-kpi.kpi-grid > .kpi {
      display: flex;
      flex-direction: column;
      min-height: 156px;
      position: relative;
    }
    #rolemodel-kpi .kpi-sub {
      flex: 1;
      display: flex;
      align-items: flex-end;
      min-height: 18px;
    }
    #rolemodel-kpi .kpi-bar {
      margin-top: 12px;
      height: 6px;
      background: rgba(0,0,0,0.06);
      border-radius: 999px;
      overflow: hidden;
    }
    #rolemodel-kpi .kpi-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--orange, #ff7a3d) 0%, #ffb789 100%);
      border-radius: 999px;
      transition: width 0.6s ease;
    }
    #rolemodel-kpi .kpi.accent .kpi-bar-fill {
      background: linear-gradient(90deg, var(--orange, #ff7a3d) 0%, #ff5e1f 100%);
    }

    .rolemodel-comparison-card {
      min-width: 0;
      margin: 14px 0 18px;
      padding: 22px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
    }
    .rolemodel-comparison-card[hidden] { display: none; }
    .rolemodel-comparison-card > h2 {
      margin: 0 0 16px;
      color: var(--ink);
      font-size: 17px;
      font-weight: 800;
      line-height: 1.45;
      word-break: keep-all;
    }
    .rolemodel-comparison-card .paired-stats,
    .rolemodel-comparison-card .paired-stat,
    .rolemodel-comparison-card .paired-stat-series,
    .rolemodel-comparison-card .paired-stat-measure { min-width: 0; }
    .rolemodel-comparison-card .paired-stats-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      margin-bottom: 10px;
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 700;
    }
    .rolemodel-comparison-card .paired-stats-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    .rolemodel-comparison-card .paired-stats-swatch {
      flex: 0 0 auto;
      width: 18px;
      height: 8px;
      border-radius: 999px;
    }
    .rolemodel-comparison-card .paired-stats-swatch.is-mine { background: var(--orange); }
    .rolemodel-comparison-card .paired-stats-swatch.is-rival { background: var(--ink-3); }
    .rolemodel-comparison-card .paired-stat {
      padding: 16px 0;
      border-top: 1px solid var(--line);
    }
    .rolemodel-comparison-card .paired-stat-heading {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 9px;
      margin-bottom: 10px;
    }
    .rolemodel-comparison-card .paired-stat-name {
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
      line-height: 1.45;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    .rolemodel-comparison-card .paired-stat-status {
      padding: 3px 7px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.4;
      word-break: keep-all;
    }
    .rolemodel-comparison-card .paired-stat-status.is-ahead { background: var(--green-soft); color: var(--green-text); }
    .rolemodel-comparison-card .paired-stat-status.is-behind { background: var(--red-soft); color: var(--red); }
    .rolemodel-comparison-card .paired-stat-series {
      display: grid;
      grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
      align-items: center;
      gap: 8px 12px;
      padding: 4px 0;
    }
    .rolemodel-comparison-card .paired-stat-series-label {
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    .rolemodel-comparison-card .paired-stat-measure {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }
    .rolemodel-comparison-card .paired-stat-track {
      display: block;
      min-width: 0;
      height: 14px;
      overflow: hidden;
      background: var(--line-soft);
      border-radius: 999px;
    }
    .rolemodel-comparison-card .paired-stat-fill {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--orange);
    }
    .rolemodel-comparison-card .paired-stat-series.is-rival .paired-stat-fill { background: var(--ink-3); }
    .rolemodel-comparison-card .paired-stat-value {
      color: var(--ink);
      font-size: 13px;
      font-variant-numeric: tabular-nums;
      font-weight: 800;
    }
    .rolemodel-comparison-card .paired-stat-missing {
      grid-column: 1 / -1;
      color: #5f6b78;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
      word-break: keep-all;
    }

    @media (max-width: 620px) {
      .rolemodel-comparison-card { padding: 18px; }
      .rolemodel-comparison-card .paired-stat-series { grid-template-columns: minmax(0, 1fr); }
      .rolemodel-comparison-card .paired-stat-series-label { margin-top: 2px; }
    }

    .rolemodel-shop-info {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 18px 20px;
      margin: 14px 0 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .rolemodel-shop-info:empty { display: none; }
    .rolemodel-shop-info-block-label {
      font-size: 12px;
      color: var(--ink-3);
      font-weight: 600;
      letter-spacing: 0.02em;
      margin-bottom: 6px;
    }
    .rolemodel-shop-info-keywords {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .rolemodel-shop-info-chip {
      background: var(--orange-soft, #fff3ec);
      color: var(--orange, #d96e3a);
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
    }
    .rolemodel-shop-info-desc {
      font-size: 14px;
      color: var(--ink-2);
      line-height: 1.6;
      white-space: pre-wrap;
    }
    .rolemodel-shop-info-toggle {
      align-self: flex-start;
      margin-top: 8px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--orange, #d96e3a);
      background: transparent;
      border: 1px solid var(--orange, #d96e3a);
      border-radius: 6px;
      cursor: pointer;
    }
    .rolemodel-shop-info-toggle:hover {
      background: var(--orange-soft, #fff3ec);
    }
    .rolemodel-report {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 28px 32px;
      margin-bottom: 28px;
    }
    .rolemodel-report h2 {
      font-size: 18px;
      font-weight: 800;
      color: var(--ink);
      margin: 24px 0 14px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--orange-soft);
      counter-reset: rm-list;
    }
    .rolemodel-report h2:first-child { margin-top: 0; }
    .rolemodel-report h3 {
      font-size: 15px;
      font-weight: 700;
      margin: 16px 0 8px;
      color: var(--ink);
    }
    .rolemodel-report p {
      font-size: 14px;
      color: var(--ink-2);
      line-height: 1.75;
      margin: 0 0 12px;
    }
    .rolemodel-report ul {
      list-style: none;
      margin: 14px 0 24px;
      padding: 0;
      display: grid;
      gap: 10px;
    }
    .rolemodel-report li {
      font-size: 14px;
      color: var(--ink-2);
      line-height: 1.7;
      background: linear-gradient(180deg, #fff8f3 0%, #fff 100%);
      border: 1px solid var(--line);
      border-left: 3px solid var(--orange);
      border-radius: 10px;
      padding: 14px 18px 14px 52px;
      position: relative;
      margin: 0;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .rolemodel-report li:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(255, 122, 61, 0.08);
    }
    .rolemodel-report li::before {
      content: counter(rm-list);
      counter-increment: rm-list;
      position: absolute;
      left: 14px;
      top: 14px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--orange) 0%, #ff5e1f 100%);
      color: #fff;
      font-weight: 700;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(255, 122, 61, 0.25);
    }
    .rolemodel-report li strong {
      display: block;
      margin-bottom: 4px;
      color: var(--ink);
      font-weight: 700;
      font-size: 14.5px;
    }
    .rolemodel-report strong { color: var(--ink); font-weight: 700; }
    .rolemodel-report em { color: var(--orange); font-style: normal; font-weight: 600; }
    .rolemodel-report code {
      background: var(--cream);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 13px;
    }
    @media (max-width: 880px) {
      .rolemodel-report { padding: 20px 18px; }
      .rolemodel-report h2 { font-size: 16px; }
      #rolemodel-kpi.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 480px) {
      .rolemodel-locked-access { padding: 22px 18px; }
      .rolemodel-locked-actions { align-items: stretch; }
      .rolemodel-locked-primary,
      .rolemodel-locked-secondary { width: 100%; }
      #rolemodel-kpi.kpi-grid { grid-template-columns: minmax(0, 1fr); }
    }

    /* tab1 전용 — kw-table 안에서 hint-divider 배경 */
    .kw-table tbody tr.hint-divider td {
      background: var(--line-soft);
      border-top: 1px solid var(--line);
      font-size: 11px;
      color: var(--ink-3);
      padding: 6px 12px;
      letter-spacing: 0.05em;
      font-weight: 700;
      text-transform: uppercase;
    }
    /* "함께 많이 찾는" 그룹 — divider 강조 + 요즘인기 배지 + 모바일 카드 라벨 */
    .kw-table tbody tr.together-divider td {
      background: var(--orange-soft, rgba(11, 91, 211, 0.08));
      color: var(--orange, #0B5BD3);
      border-top: 1px solid var(--orange, #0B5BD3);
    }
    .kw-table tbody tr.anchor-divider td {
      background: rgba(47, 111, 235, 0.08);
      color: var(--blue, #2F6FEB);
      border-top: 1px solid rgba(47, 111, 235, 0.35);
      text-transform: none;
    }
    .kw-table tbody tr.anchor-divider td::before {
      content: "★ ";
      color: var(--blue, #2F6FEB);
    }
    .kw-table tbody tr.together-row .kw-text { font-weight: 700; }
    .kw-badge {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 7px;
      font-size: 11px;
      font-weight: 700;
      color: #B5530F;
      background: #FFE9D5;
      border-radius: 999px;
      vertical-align: middle;
      letter-spacing: 0;
      text-transform: none;
    }
    .kw-cards-group-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--orange, #0B5BD3);
      letter-spacing: 0.04em;
      margin: 6px 2px 0;
    }
    .kw-cards-group-label.anchor-label {
      color: var(--blue, #2F6FEB);
      background: rgba(47, 111, 235, 0.08);
      border: 1px solid rgba(47, 111, 235, 0.18);
      border-radius: 7px;
      padding: 6px 9px;
      letter-spacing: 0;
    }
    .kw-cards-group-label.anchor-label::before { content: "★ "; }
    .kw-cards-group-label.related-label {
      color: var(--ink-3);
      border-top: 1px solid var(--line-soft);
      padding-top: 10px;
    }
    /* tab1 — hover/cursor for sortable headers in kw-table */
    .kw-table thead th.sortable { cursor: pointer; user-select: none; }
    .kw-table thead th.sortable:hover { color: var(--ink); }
    .kw-table thead th.sortable::after { content: " \2195"; opacity: 0.5; }
    .kw-table thead th.sort-asc::after { content: " \2191"; color: var(--orange); opacity: 1; }
    .kw-table thead th.sort-desc::after { content: " \2193"; color: var(--orange); opacity: 1; }
    #keywords-table-panel .kw-table thead th.sort-asc,
    #keywords-table-panel .kw-table thead th.sort-desc,
    #place-table-panel .kw-table thead th.sort-asc,
    #place-table-panel .kw-table thead th.sort-desc {
      background: var(--gold-soft);
      color: var(--ink);
      cursor: pointer;
      user-select: none;
    }
    #keywords-table-panel .kw-table thead th.col-empty,
    #place-table-panel .kw-table thead th.col-empty {
      background: var(--line-soft);
      color: var(--ink-4);
      cursor: not-allowed;
    }
    #keywords-table-panel .kw-table thead th.col-empty:hover,
    #place-table-panel .kw-table thead th.col-empty:hover { color: var(--ink-4); }
    #keywords-table-panel .kw-table thead th.col-empty::after,
    #place-table-panel .kw-table thead th.col-empty::after {
      color: var(--ink-4);
      opacity: 0.35;
    }
    .kw-table tbody tr { cursor: pointer; }
    #keywords-table-panel .kw-table tbody tr.hint-divider,
    #place-table-panel .kw-table tbody tr.hint-divider { cursor: default; }
    .kw-table tbody tr:hover td { background: var(--cream); }
    .kw-table tbody tr.essential:hover td { background: var(--orange-soft); }
    #keywords-table-panel .kw-table tbody td.sorted-col,
    #place-table-panel .kw-table tbody td.sorted-col {
      background: rgba(182, 138, 46, 0.06);
    }
    #keywords-table-panel .kw-table tbody tr:hover td.sorted-col,
    #keywords-table-panel .kw-table tbody tr.essential:hover td.sorted-col,
    #place-table-panel .kw-table tbody tr:hover td.sorted-col,
    #place-table-panel .kw-table tbody tr.essential:hover td.sorted-col {
      background: rgba(182, 138, 46, 0.12);
    }
    #keywords-table-panel .kw-table tbody tr.anchor-divider:hover td,
    #place-table-panel .kw-table tbody tr.anchor-divider:hover td {
      background: rgba(47, 111, 235, 0.08);
    }
    .kw-sort-notice {
      margin: 0 0 10px;
      padding: 9px 12px;
      border: 1px solid rgba(182, 138, 46, 0.24);
      border-radius: 7px;
      background: var(--gold-soft);
      color: var(--ink-2);
      font-size: 12px;
      line-height: 1.45;
    }
    .kw-sort-notice[hidden] { display: none; }
    /* 자세히 토글 — tab1 kw-table */
    .kw-table.is-simple .col-advanced { display: none; }

    /* tab1 — 가로 스크롤 wrap (컬럼 13개라 좁은 화면 대응) */
    .kw-table-scroll { overflow-x: auto; }
    /* tab1 — 모바일에서 표 숨기고 카드만 */
    @media (max-width: 720px) {
      #keywords-table-panel .kw-table-scroll,
      #place-table-panel .kw-table-scroll { display: none; }
    }

    /* 모바일 */
    @media (max-width: 880px) {
      .kpi-grid { grid-template-columns: repeat(2, 1fr); }
      .panel-row { grid-template-columns: 1fr; }
      .find-grid { grid-template-columns: 1fr; }
      .shops-grid { grid-template-columns: repeat(2, 1fr); }
      .stats-meta { margin-left: 0; width: 100%; }
    }
    @media (max-width: 480px) {
      .kpi-grid { grid-template-columns: 1fr; }
      .shops-grid { grid-template-columns: 1fr; }
      .table-head { flex-direction: column; gap: 12px; align-items: flex-start; }
    }

/* ===== (원본 2번째 <style> 블록) ===== */

/* === 도구 허브 사이드바 (2026-05-31) — 무료/시크릿/멤버 그룹 === */
.hub-layout{ display:flex; align-items:flex-start; max-width:1240px; margin:0 auto; }
nav.tabs{
  flex-direction:column !important; width:250px; flex:0 0 250px; gap:2px !important;
  max-width:none !important; margin:0 !important; padding:16px 10px !important;
  border-bottom:none !important; border-right:1px solid var(--line,#E8E2D5);
  align-self:stretch; position:sticky; top:0; max-height:100vh; overflow-y:auto;
}
nav.tabs button{
  width:100%; text-align:left !important; padding:10px 12px !important;
  border:none !important; border-bottom:none !important; margin:0 !important;
  border-radius:9px; display:flex; align-items:center; gap:6px; font-size:13.5px;
}
nav.tabs button:hover{ background:#f3f4f6; color:var(--ink,#191c20); }
nav.tabs button.active{ background:#fff3ef; color:var(--orange,#FF5A2D); border-bottom:none !important; }
.hub-grp-h{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.2px; color:var(--ink,#191c20); padding:14px 12px 5px; }
.hub-grp-h:first-child{ padding-top:4px; }
.hub-grp-h .hub-cap{ color:var(--ink-3,#9ca3af); font-weight:600; }
.hub-dot{ width:8px; height:8px; border-radius:99px; display:inline-block; flex:0 0 8px; }
.hub-dot.free{ background:#15803d; } .hub-dot.secret{ background:#C8941A; } .hub-dot.member{ background:#FF5A2D; }
.hub-badge{ margin-left:auto; font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px; white-space:nowrap; }
.hub-badge.secret{ background:#fdf3dc; color:#C8941A; } .hub-badge.member{ background:#fff0eb; color:#FF5A2D; }
nav.tabs button.active .hub-badge{ background:rgba(255,90,45,.16); color:var(--orange,#FF5A2D); }
.hub-link{ display:flex; align-items:center; gap:6px; width:100%; padding:10px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink-2,#4b5563); text-decoration:none; }
.hub-link:hover{ background:#f3f4f6; }
.hub-link.active{ background:#fff3ef; color:var(--orange,#FF5A2D); }
/* 메뉴 맨 위 '플레이스비서' 강조 카드 — 멤버십 전용을 시크릿 구매자에게 어필 */
.hub-feature{ display:block; position:relative; margin:0 0 10px; padding:13px 12px 12px; border-radius:12px; text-decoration:none; color:inherit;
  background:linear-gradient(135deg,#FFF3EE,#FFE9E0); border:1.5px solid rgba(11,91,211,.45);
  box-shadow:0 4px 14px rgba(11,91,211,.16); animation:hub-feature-glow 2.6s ease-in-out infinite; }
.hub-feature:hover{ transform:translateY(-1px); box-shadow:0 7px 18px rgba(11,91,211,.26); }
.hub-feature .hf-badge{ position:absolute; top:-8px; right:10px; background:var(--orange,#FF5A2D); color:#fff; font-size:10px; font-weight:800; letter-spacing:.2px; border-radius:999px; padding:3px 9px; box-shadow:0 3px 8px rgba(11,91,211,.35); }
.hub-feature .hf-row{ display:flex; align-items:center; gap:8px; }
.hub-feature .hf-em{ font-size:20px; }
.hub-feature .hf-ti{ font-size:14.5px; font-weight:800; color:var(--ink,#191c20); }
.hub-feature .hf-td{ margin-top:5px; font-size:11.5px; line-height:1.5; color:#8a5a4a; font-weight:600; }
@keyframes hub-feature-glow{ 0%,100%{ box-shadow:0 4px 14px rgba(11,91,211,.16);} 50%{ box-shadow:0 4px 20px rgba(11,91,211,.34);} }
@media (prefers-reduced-motion: reduce){ .hub-feature{ animation:none; } }
/* 한 화면 안 임베드(iframe) 규칙은 §14-4로 폐기됐다 — 도구는 항상 독립 화면. */
.hub-note{ margin-top:16px; padding:9px 11px; background:#f6f7f9; border-radius:9px; font-size:11px; color:var(--ink-3,#9ca3af); line-height:1.45; }
.hub-layout > main{ flex:1; min-width:0; }
.hub-scrim{ display:none; }
@media (max-width:760px){
  #hub-menu-btn{ display:inline-flex !important; }
  .hub-layout{ display:block; }
  body:not(.eun-tool-chrome) nav.tabs{
    position:fixed !important; left:0; top:0; bottom:0; z-index:60; width:268px; flex:none;
    background:var(--card); box-shadow:4px 0 24px rgba(0,0,0,.14);
    transform:translateX(-112%); opacity:0; visibility:hidden;
    transition:transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
    max-height:100vh; padding:16px 10px !important; overflow-x:hidden !important;
  }
  body:not(.eun-tool-chrome) nav.tabs.open{ transform:translateX(0); opacity:1; visibility:visible; transition-delay:0s; }
  nav.tabs button{ flex-shrink:0; white-space:normal; }
  body:not(.eun-tool-chrome) .hub-scrim.on{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:50; }
  .hub-layout > main{ padding:16px; }
}
/* 동작 줄이기(멀미 방지) — 2026-07-23 UX 감사 ⑦ (로더 애니 포함 포괄) */
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }

/* ===== (원본 <style id="eun-tool-skin"> 블록 — 문서 마지막이라 위 규칙을 덮는다) ===== */

/* ============================================================================
   시안 이식 스킨 — EunCoach Tool RelatedKw / Combine / TopKeyword / RankCheck (.dc)
   · 기능(JS·API·요소 id)은 건드리지 않고 겉(구조·문구·색·배치)만 시안으로 맞춘다.
   · 색·규격은 /components/design-tokens.css 토큰. 토큰 밖 색은 쓰지 않는다.
   · 이 블록은 문서에서 가장 마지막이라 위 규칙들을 덮는다.
   ========================================================================== */

/* ── 페이지 틀 ───────────────────────────────────────────── */
header.topbar {
  position: sticky; top: 0; z-index: 55;
  max-width: none;
  margin: 0;
  padding: 0 var(--eun-page-padding-inline);
  height: var(--eun-top-nav-height);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  gap: var(--eun-gap-nav-min);
}
header.topbar .brand { align-items: baseline; gap: 10px; min-width: 0; }
header.topbar .brand h1 {
  font-size: var(--eun-font-h2-min);
  font-weight: var(--eun-font-weight-title);
  letter-spacing: var(--eun-tracking-title);
}
header.topbar .brand .subtitle {
  font-size: var(--eun-font-label-max);
  color: var(--ink-3);
}
#hub-menu-btn,
.hub-home-link {
  min-height: var(--eun-touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: var(--eun-font-sub-max);
  font-weight: 700;
  color: var(--ink-2);
  background: var(--card);
  border: var(--eun-control-border-width) solid var(--line);
  border-radius: var(--eun-radius-sm);
  text-decoration: none;
}
#hub-menu-btn { padding: 8px 12px; cursor: pointer; }
.hub-home-link { padding: 8px 14px; }
#hub-menu-btn:hover,
.hub-home-link:hover { border-color: var(--orange); color: var(--orange); }
.hub-layout > main { padding: var(--eun-page-padding-top) var(--eun-page-padding-inline) var(--eun-page-padding-bottom-min); }

/* 사이드바 — 시안엔 없는 허브 부품이라 색만 시안 팔레트로 맞춘다 */
nav.tabs { border-right: 1px solid var(--line); }
nav.tabs button { font-weight: 700; color: var(--ink-2); min-height: var(--eun-touch-target-min); }
nav.tabs button:hover { background: var(--cream); color: var(--ink); }
nav.tabs button.active { background: var(--orange-soft); color: var(--orange-text); }
.hub-grp-h { color: var(--ink); }
.hub-grp-h .hub-cap { color: var(--ink-3); }
.hub-dot.free { background: var(--green); }
.hub-dot.secret { background: var(--gold); }
.hub-dot.member { background: var(--orange); }
.hub-badge.secret { background: var(--gold-soft); color: var(--gold); }
.hub-badge.member { background: var(--orange-soft); color: var(--orange-text); }
nav.tabs button.active .hub-badge { background: var(--card); color: var(--orange-text); }
.hub-link { color: var(--ink-2); font-weight: 700; min-height: var(--eun-touch-target-min); }
.hub-link:hover { background: var(--cream); }
.hub-link.active { background: var(--orange-soft); color: var(--orange-text); }
.hub-feature {
  background: var(--orange-soft);
  border: 1.5px solid var(--orange);
  border-radius: var(--eun-radius-md);
  box-shadow: none;
  animation: none;
}
.hub-feature:hover { transform: none; box-shadow: var(--shadow-card); }
.hub-feature .hf-badge { background: var(--orange); box-shadow: none; }
.hub-feature .hf-ti { color: var(--ink); }
.hub-feature .hf-td { color: var(--orange-text); }
.hub-note { background: var(--cream); color: var(--ink-3); border-radius: var(--radius); }

/* ── 카드 ─────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-lg);
  padding: var(--eun-padding-card);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--eun-gap-section);
}
/* 결과 카드 안에서 로딩·오류가 또 .card를 그리는 자리가 있다 (카드 속 카드).
   테두리·그림자가 겹쳐 상자 안 상자로 보이므로 안쪽은 평평하게 둔다. */
.card .card { border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.card h2 {
  font-size: var(--eun-font-h2-min);
  font-weight: var(--eun-font-weight-title);
  letter-spacing: var(--eun-tracking-title);
  margin: 0 0 var(--eun-gap-inner-box-max);
}
.card .help { font-size: var(--eun-font-sub-max); color: var(--ink-2); margin: 0 0 14px; line-height: 1.7; }

/* 도구 설명 카드 — 시안의 "{도구 이름} 이렇게 쓰세요" 흰 카드 */
.help-callout {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  margin-bottom: var(--eun-gap-section);
}
.help-callout-title {
  font-size: var(--eun-font-body-min);
  font-weight: var(--eun-font-weight-title);
  color: var(--ink);
  margin-bottom: 6px;
}
.help-callout-body p { font-size: 14px; color: var(--ink-2); line-height: 1.7; margin: 0 0 8px; }
.help-callout-body strong { color: var(--orange); font-weight: var(--eun-font-weight-title); }

/* ── 버튼 ─────────────────────────────────────────────────── */
.btn {
  border: var(--eun-button-secondary-border-width) solid var(--line);
  border-radius: var(--eun-button-secondary-radius-min);
  min-height: var(--eun-button-secondary-min-height);
  padding: 0 18px;
  font-size: var(--eun-font-body-min);
  font-weight: var(--eun-font-weight-title);
  color: var(--ink-2);
  background: var(--card);
}
.btn:hover { background: var(--card); border-color: var(--orange); color: var(--orange); }
.btn.primary {
  border: 0;
  background: var(--orange);
  color: var(--card);
  font-size: 15px;
}
.btn.primary:hover { background: var(--orange-hover); color: var(--card); }
.btn.primary:disabled,
.btn:disabled {
  background: var(--eun-button-disabled-bg);
  color: var(--eun-button-disabled-text);
  border-color: transparent;
}
.btn.ghost { background: var(--card); border-color: var(--line); }
.btn.btn-small {
  min-height: var(--eun-button-small-min-height);
  padding: 8px 13px;
  border-radius: var(--eun-radius-xs);
  font-size: var(--eun-button-small-font-min);
  font-weight: var(--eun-font-weight-title);
}
/* 켜진 토글 — 시안은 꽉 찬 파랑이 아니라 연한 파랑 칩 */
.btn[data-active="true"] {
  background: var(--orange-soft);
  color: var(--orange-text);
  border-color: var(--orange);
}

/* ── 입력칸 ───────────────────────────────────────────────── */
textarea, input[type="text"], input[type="number"], select {
  border: var(--eun-control-border-width) solid var(--line);
  border-radius: var(--eun-radius-sm);
  padding: 13px 14px;
  font-size: var(--eun-font-body-min);
  background: var(--card);
  color: var(--ink);
}
textarea { line-height: 1.7; min-height: 96px; }
textarea:focus, input[type="text"]:focus, input[type="number"]:focus, select:focus {
  border-color: var(--orange);
  outline: none;
}
.field-label {
  display: block;
  font-size: 14px;
  font-weight: var(--eun-font-weight-title);
  color: var(--ink);
  margin-bottom: 6px;
}
.field-label .req { color: var(--red); }
.field-hint {
  margin: 8px 0 0;
  font-size: var(--eun-font-label-max);
  font-weight: 700;
  color: var(--green-text);
}
.search-area { grid-template-columns: 1fr 180px; gap: 10px; }
.search-area textarea { min-height: 96px; }
.search-area .buttons { min-width: 0; gap: 8px; }
@media (max-width: 900px) { .search-area { grid-template-columns: 1fr; } }

/* 추천 키워드 상자 — 시안의 초록 판 */
.prefill-candidates {
  margin-top: 0;
  padding: 14px 16px;
  border: var(--eun-control-border-width) solid var(--green);
  border-radius: var(--eun-radius-sm);
  background: var(--green-soft);
}
.prefill-candidates-title {
  margin-bottom: 8px;
  color: var(--green-text);
  font-size: var(--eun-font-sub-min);
  font-weight: var(--eun-font-weight-title);
}
.prefill-candidate-chips { gap: 8px; }
.prefill-candidate-chip {
  min-height: 38px;
  padding: 8px 13px;
  border: var(--eun-control-border-width) solid var(--green);
  background: var(--card);
  color: var(--green-text);
  font-size: var(--eun-font-sub-min);
  font-weight: var(--eun-font-weight-title);
}
.prefill-candidate-chip:hover:not(:disabled),
.prefill-candidate-chip:focus-visible:not(:disabled) {
  border-color: var(--green-text);
  outline: 2px solid var(--green-text);
}
input.auto-filled, textarea.auto-filled {
  border-color: var(--green) !important;
  background: var(--green-soft) !important;
}

/* ── 빈 화면 · 로딩 · 오류 (도구 공통 상태 시안) ─────────────── */
.empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-3);
}
.empty .empty-title {
  display: block;
  font-size: 15px;
  font-weight: var(--eun-font-weight-title);
  color: var(--ink);
}
.empty .empty-hint {
  display: block;
  margin-top: 8px;
  font-size: var(--eun-font-sub-max);
  color: var(--ink-3);
}
.loading {
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: var(--eun-font-weight-title);
}
.loading::before {
  width: 18px; height: 18px;
  border: 2.5px solid var(--orange-soft);
  border-top-color: var(--orange);
  margin-right: 10px;
  vertical-align: -4px;
}
.error {
  padding: 14px 16px;
  background: var(--red-soft);
  color: var(--red);
  border: var(--eun-control-border-width) solid var(--red);
  border-radius: var(--eun-radius-md);
  font-size: 14px;
  font-weight: 700;
}
.loader-spin {
  width: 18px;
  height: 18px;
  font-size: 0;
  border-radius: 50%;
  border: 2.5px solid var(--orange-soft);
  border-top-color: var(--orange);
  animation: loader-spin .8s linear infinite;
}
.competitor-staged-loader .stage.active .dot { background: var(--orange); border-color: var(--orange); }
.competitor-staged-loader .stage.done .dot { background: var(--ink-3); border-color: var(--ink-3); }
.competitor-staged-loader .stage.done .dot::after { border-right-color: var(--card); border-bottom-color: var(--card); }
.loader-dots span { background: var(--orange); }

/* ── 결과 머리줄 ──────────────────────────────────────────── */
.result-story {
  padding: 0 4px 12px;
  border-bottom: 0;
  margin-bottom: 0;
  justify-content: space-between;
  gap: 10px;
}
.result-story .query {
  font-size: 20px;
  font-weight: var(--eun-font-weight-heavy);
  letter-spacing: -0.02em;
}
.stats-meta { font-size: var(--eun-font-label-max); font-weight: 700; color: var(--ink-3); }
.region-chip {
  color: var(--orange-text);
  background: var(--orange-soft);
  font-weight: var(--eun-font-weight-title);
  padding: 5px 12px;
}
.input-hint {
  background: var(--gold-soft);
  border: 0;
  border-radius: var(--eun-radius-sm);
  color: var(--gold);
  font-size: var(--eun-font-sub-max);
  font-weight: 700;
  padding: 12px 16px;
}
.input-hint strong { color: var(--gold); font-weight: var(--eun-font-weight-title); }

/* ── KPI 카드 ─────────────────────────────────────────────── */
.kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.kpi {
  border-radius: var(--eun-radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  background: var(--card);
}
.kpi .kpi-label {
  font-size: var(--eun-font-label-max);
  font-weight: var(--eun-font-weight-title);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin-bottom: 0;
}
.kpi .kpi-value {
  font-size: var(--eun-font-number-card-max);
  font-weight: var(--eun-font-weight-heavy);
  letter-spacing: var(--eun-tracking-card-number);
  margin: 4px 0 2px;
}
.kpi .kpi-value .unit { font-size: 14px; font-weight: 700; color: var(--ink-3); margin-left: 2px; }
.kpi .kpi-sub { margin-top: 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.kpi .kpi-sub strong { color: var(--ink-2); font-weight: var(--eun-font-weight-title); }
/* 시안: 시즌 임박 = 주의색 판 · 발굴 = 파란 판 */
.kpi.warn { background: var(--gold-soft); border-color: transparent; box-shadow: none; }
.kpi.warn .kpi-label, .kpi.warn .kpi-sub, .kpi.warn .kpi-sub strong { color: var(--gold); }
.kpi.warn .kpi-value, .kpi.warn .kpi-value .unit { color: var(--gold); }
.kpi.accent {
  background: var(--orange-soft);
  border-color: transparent;
  box-shadow: none;
}
.kpi.accent .kpi-label, .kpi.accent .kpi-sub, .kpi.accent .kpi-sub strong { color: var(--orange-text); }
.kpi.accent .kpi-value { color: var(--orange); }
.kpi.accent .kpi-value .unit { color: var(--orange-text); }
.kpi-bar .seg { background: var(--orange-soft); }
.kpi-bar .seg.fill { background: var(--orange); }

/* ── 두 패널 ─────────────────────────────────────────────── */
.panel-row { gap: 12px; margin-bottom: 12px; }
#keywords-panels.panel-row, #place-panels.panel-row { grid-template-columns: 1.4fr 1fr; }
#competitor-panels.panel-row { grid-template-columns: 1fr 1fr; }
.panel {
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}
.panel-head { align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 0; }
.panel-head h3 { font-size: var(--eun-font-h2-min); font-weight: var(--eun-font-weight-title); }
.panel-head .panel-tag {
  font-size: var(--eun-font-label-max);
  font-weight: var(--eun-font-weight-title);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  white-space: nowrap;
}
.panel-head .panel-desc { font-size: var(--eun-font-sub-max); color: var(--ink-2); margin: 6px 0 14px; }
.find-grid { gap: 10px; }

/* 시즌 임박 카드 (연관키워드·플레이스 탭) */
#keywords-panels .find-card, #place-panels .find-card {
  background: var(--card);
  border: var(--eun-control-border-width) solid var(--line);
  border-radius: var(--eun-radius-md);
  padding: 14px;
  min-height: 96px;
}
#keywords-panels .find-card:hover, #place-panels .find-card:hover { border-color: var(--orange); transform: none; }
.find-card .find-kw { font-size: var(--eun-font-body-min); font-weight: var(--eun-font-weight-title); }
.find-card .find-vol {
  font-size: 18px;
  font-weight: var(--eun-font-weight-heavy);
  color: var(--orange);
  letter-spacing: -0.02em;
}
.find-card .find-vol .unit { font-size: 12px; font-weight: var(--eun-font-weight-title); color: var(--ink-3); }
.find-card .find-meta { font-size: var(--eun-font-min); font-weight: 700; color: var(--ink-3); margin-top: 8px; }
.badge-season {
  background: var(--gold-soft);
  color: var(--gold);
  font-size: var(--eun-font-min);
  border-radius: var(--eun-radius-pill);
  padding: 2px 8px;
  letter-spacing: 0;
}
.badge-season.next { background: var(--gold-soft); color: var(--gold); }

/* 발굴 후보 카드 (대표키워드 분석기) — 시안은 파란 판 + 좌우 배치 */
#competitor-panels .find-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--orange-soft);
  border: 0;
  border-radius: var(--eun-radius-sm);
  padding: 12px 14px;
}
#competitor-panels .find-card:hover { transform: none; }
#competitor-panels .find-main { min-width: 0; }
#competitor-panels .find-card .find-kw { color: var(--orange-text); display: block; }
#competitor-panels .find-card .find-meta {
  display: block;
  margin-top: 0;
  font-size: var(--eun-font-label-max);
  font-weight: 400;
  color: var(--orange-text);
}
#competitor-panels .find-side { text-align: right; flex-shrink: 0; }
#competitor-panels .find-card .find-vol { display: block; font-size: 15px; color: var(--orange-text); white-space: nowrap; }
#competitor-panels .find-vol-label { display: block; font-size: var(--eun-font-min); color: var(--orange-text); }

/* 공통 키워드 카드 */
.common-card {
  background: var(--cream);
  border: 0;
  border-radius: var(--eun-radius-sm);
  padding: 12px 14px;
  gap: 12px;
}
.common-rank { font-family: inherit; font-size: var(--eun-font-sub-min); font-weight: var(--eun-font-weight-heavy); color: var(--orange); }
.common-kw { font-size: var(--eun-font-body-min); font-weight: var(--eun-font-weight-title); }
.common-kw .common-shop { font-size: var(--eun-font-label-max); color: var(--ink-3); }
.common-vol .vol-num { font-size: 15px; font-weight: var(--eun-font-weight-heavy); }
.common-vol .vol-label { font-size: var(--eun-font-min); color: var(--ink-3); letter-spacing: 0; text-transform: none; }

/* ── 안내 띠 ─────────────────────────────────────────────── */
.tip {
  padding: 14px 18px;
  border-left: 0;
  background: var(--orange-soft);
  border-radius: var(--eun-radius-md);
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--orange-text);
}
.tip::before { content: none; }
.tip .em, .tip strong { color: var(--orange-text); font-weight: var(--eun-font-weight-title); }
.result-tip { background: var(--orange-soft); border-left: 0; border-radius: var(--eun-radius-md); color: var(--orange-text); padding: 14px 18px; }
.result-tip strong { color: var(--orange-text); }

/* ── 다음 도구 카드 ──────────────────────────────────────── */
.action-card {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  border: var(--eun-control-border-width) solid var(--orange);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  margin: 0 0 12px;
}
.action-card-text { flex: none; min-width: 0; }
.action-card-title { font-size: 15px; font-weight: var(--eun-font-weight-title); margin-bottom: 4px; }
.action-card-desc { font-size: var(--eun-font-sub-max); color: var(--ink-2); }
.action-card-desc strong { color: var(--orange); font-weight: var(--eun-font-weight-title); }
.next-tool-controls { justify-content: flex-start; gap: 8px; }
.next-tool-controls select { min-height: var(--eun-button-secondary-min-height); min-width: 200px; }

/* ── 표 ──────────────────────────────────────────────────── */
.table-panel {
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
}
.table-head { align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.table-head h3 { font-size: var(--eun-font-h2-min); font-weight: var(--eun-font-weight-title); }
.table-head .table-controls { justify-content: flex-end; }
.min-vol-input, .result-header .filter input, .result-header .filter select {
  min-height: var(--eun-button-small-max-height);
  padding: 11px 14px;
  border: var(--eun-control-border-width) solid var(--line);
  border-radius: var(--eun-radius-sm);
  font-size: 14px;
}
.kw-table thead th {
  font-size: var(--eun-font-label-max);
  font-weight: var(--eun-font-weight-title);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  padding: 9px 8px;
  border-bottom: var(--eun-control-border-width) solid var(--line);
}
.kw-table tbody td { padding: 12px 8px; border-bottom: 1px solid var(--line); }
.kw-table .kw-text { font-size: 14px; font-weight: 700; }
.kw-table .rank { font-family: inherit; font-size: var(--eun-font-label-max); font-weight: var(--eun-font-weight-title); }
.kw-table tbody tr.essential { background: var(--gold-soft); }
.kw-table tbody tr.essential td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.kw-table tbody tr.essential:hover td { background: var(--gold-soft); }
.kw-table tbody tr.hint-divider td,
table.kw tbody tr.hint-divider td {
  background: var(--cream);
  color: var(--ink-2);
  font-size: var(--eun-font-label-max);
  font-weight: var(--eun-font-weight-title);
  letter-spacing: 0;
  text-transform: none;
  padding: 9px 8px;
  border-top: 0;
}
.kw-table tbody tr.together-divider td {
  background: var(--orange-soft);
  color: var(--orange-text);
  border-top: 0;
}
.kw-table tbody tr.anchor-divider td {
  background: var(--gold-soft);
  color: var(--gold);
  border-top: 0;
}
.kw-table tbody tr.anchor-divider td::before { color: var(--gold); }
#keywords-table-panel .kw-table tbody tr.anchor-divider:hover td,
#place-table-panel .kw-table tbody tr.anchor-divider:hover td { background: var(--gold-soft); }
.kw-badge { color: var(--gold); background: var(--gold-soft); font-weight: var(--eun-font-weight-title); }
.kw-cards-group-label { color: var(--orange-text); background: var(--orange-soft); border-radius: var(--eun-radius-xs); padding: 6px 9px; letter-spacing: 0; }
.kw-cards-group-label.anchor-label { color: var(--gold); background: var(--gold-soft); border-color: transparent; }
.kw-cards-group-label.related-label { color: var(--ink-2); background: var(--cream); border-top: 0; padding: 6px 9px; }
.kw-sort-notice { border-color: var(--gold); background: var(--gold-soft); border-radius: var(--eun-radius-sm); color: var(--gold); }
.kw-sort-mobile { border: var(--eun-control-border-width) solid var(--line); border-radius: var(--eun-radius-sm); min-height: var(--eun-button-secondary-min-height); }
.kw-card { border: var(--eun-control-border-width) solid var(--line); border-radius: var(--eun-radius-md); }
.kw-card.is-hint { background: var(--gold-soft); border-color: var(--gold); }
.kw-card-hint-label { color: var(--gold); }
.kw-meta-item { background: var(--cream); }
.kw-meta-item.peak-on { background: var(--gold-soft); }
.kw-meta-item.peak-on .label { color: var(--gold); }
.kw-total { font-weight: var(--eun-font-weight-heavy); }
.season-controls { background: var(--cream); border: 0; border-radius: var(--eun-radius-sm); }
.season-chip { border: var(--eun-control-border-width) solid var(--line); border-radius: var(--eun-radius-pill); min-height: 38px; font-weight: var(--eun-font-weight-title); }
.season-chip.active { background: var(--orange-soft); color: var(--orange-text); border-color: var(--orange); }
.seg-control { background: transparent; border-radius: var(--eun-radius-pill); padding: 0; gap: 8px; }
.seg-control button {
  border: var(--eun-control-border-width) solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  min-height: 38px;
  padding: 7px 13px;
  font-size: var(--eun-font-sub-min);
  font-weight: var(--eun-font-weight-title);
}
.seg-control button.active { background: var(--orange-soft); color: var(--orange-text); border-color: var(--orange); }
.min-vol { color: var(--ink-3); font-size: var(--eun-font-sub-min); }
.min-vol input { min-height: 38px; border-radius: var(--eun-radius-sm); }

/* 경쟁·시즌 배지 */
.sat-badge { border-radius: var(--eun-radius-pill); font-weight: var(--eun-font-weight-title); font-size: var(--eun-font-min); padding: 2px 8px; }
.sat-low { background: var(--green-soft); color: var(--green-text); }
.sat-mid { background: var(--orange-soft); color: var(--orange-text); }
.sat-high { background: var(--gold-soft); color: var(--gold); }
.sat-extreme { background: var(--red-soft); color: var(--red); }
.sat-label.few { background: var(--green-soft); color: var(--green-text); }
.sat-label.normal { background: var(--cream); color: var(--ink-2); }
.sat-label.many { background: var(--red-soft); color: var(--red); }
.peak-fire {
  background: var(--gold-soft);
  color: var(--gold);
  border: 0;
  border-radius: var(--eun-radius-pill);
  font-size: var(--eun-font-min);
  font-weight: var(--eun-font-weight-title);
}
.peak-badge { background: var(--cream); color: var(--ink-2); font-size: var(--eun-font-min); }
.peak-badge.peak-now { background: var(--gold-soft); color: var(--gold); }
.peak-badge.peak-next { background: var(--gold-soft); color: var(--gold); }
.comp-low { color: var(--green-text); }
.comp-mid { color: var(--orange-text); }
.comp-high { color: var(--red); }
.kw-table tbody tr.season-upcoming { background: var(--gold-soft); }
.kw-table tbody tr.season-upcoming td:last-child { box-shadow: inset -3px 0 0 var(--gold); }
.kw-table tbody tr.season-upcoming.essential {
  background: var(--gold-soft);
  box-shadow: inset 3px 0 0 var(--gold), inset -3px 0 0 var(--gold);
}
#keywords-table-panel .kw-table thead th.sort-asc,
#keywords-table-panel .kw-table thead th.sort-desc,
#place-table-panel .kw-table thead th.sort-asc,
#place-table-panel .kw-table thead th.sort-desc { background: var(--orange-soft); color: var(--orange-text); }
#keywords-table-panel .kw-table tbody td.sorted-col,
#place-table-panel .kw-table tbody td.sorted-col { background: var(--orange-soft); }
#keywords-table-panel .kw-table tbody tr:hover td.sorted-col,
#keywords-table-panel .kw-table tbody tr.essential:hover td.sorted-col,
#place-table-panel .kw-table tbody tr:hover td.sorted-col,
#place-table-panel .kw-table tbody tr.essential:hover td.sorted-col { background: var(--orange-soft); }

/* ── 조합기 ─────────────────────────────────────────────── */
.combo-input label { font-size: var(--eun-font-sub-max); font-weight: var(--eun-font-weight-title); color: var(--ink); gap: 8px; }
.combo-input label .badge {
  width: 22px; height: 22px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 12px;
  font-weight: var(--eun-font-weight-heavy);
}
.combo-input label .count-hint {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
  text-align: right;
}
.combo-input textarea { min-height: 132px; }
.natural-rule-card {
  background: var(--gold-soft);
  border: 0;
  border-radius: var(--eun-radius-md);
  padding: 16px 18px;
  margin-bottom: 16px;
  gap: 14px;
}
.natural-rule-title { font-size: var(--eun-font-body-min); font-weight: var(--eun-font-weight-title); color: var(--gold); }
.natural-rule-desc { font-size: var(--eun-font-sub-max); color: var(--gold); }
.natural-rule-desc strong { color: var(--gold); font-weight: var(--eun-font-weight-title); }
.natural-rule-desc em { background: var(--card); color: var(--gold); font-size: var(--eun-font-sub-min); padding: 1px 6px; border-radius: 4px; }
.combo-rules { gap: 16px; }
.combo-rules .rule-group .rule-title { font-size: var(--eun-font-sub-max); font-weight: var(--eun-font-weight-title); color: var(--ink); margin-bottom: 8px; }
.combo-rules .checks { gap: 8px; }
.combo-rules label.chk {
  gap: 7px;
  min-height: var(--eun-button-small-min-height);
  padding: 9px 13px;
  border: var(--eun-control-border-width) solid var(--line);
  border-radius: var(--eun-radius-xs);
  font-size: var(--eun-font-sub-max);
  font-weight: var(--eun-font-weight-title);
  color: var(--ink-2);
  background: var(--card);
}
.combo-rules label.chk:hover { background: var(--card); border-color: var(--orange); }
.combo-rules label.chk input { width: 17px; height: 17px; accent-color: var(--orange); }
.combo-rules label.chk.checked { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-text); }
.combo-space-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.combo-space-row .chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--eun-touch-target-min);
  padding: 9px 14px;
  border: var(--eun-control-border-width) solid var(--line);
  border-radius: var(--eun-radius-xs);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
}
.combo-space-row .chk input { width: 17px; height: 17px; accent-color: var(--orange); margin: 0; }
.combo-space-row .combo-run-group { display: flex; gap: 8px; flex-wrap: wrap; }
.combo-result-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.combo-result-head .count { font-size: var(--eun-font-h2-min); font-weight: var(--eun-font-weight-title); }
.combo-result-head .combo-stats { font-size: var(--eun-font-label-max); font-weight: 700; color: var(--ink-3); margin: 0; }
.combo-chips { display: flex; gap: 8px; flex-wrap: wrap; max-height: 320px; overflow-y: auto; }
.combo-chips:empty { display: none; }
.combo-chip {
  background: var(--cream);
  color: var(--ink);
  font-size: var(--eun-font-sub-max);
  font-weight: 700;
  border-radius: var(--eun-radius-pill);
  padding: 8px 14px;
  white-space: nowrap;
}
.combo-chips-more { font-size: var(--eun-font-label-max); color: var(--ink-3); margin-top: 10px; }
.combo-raw-label { display: block; margin: 16px 0 6px; font-size: var(--eun-font-sub-min); font-weight: var(--eun-font-weight-title); color: var(--ink-3); }
#combo-result { min-height: 180px; }

/* ── 가게 카드 (대표키워드 분석기) ───────────────────────── */
.shops-panel { border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-card); }
.shops-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.shop-card {
  background: var(--cream);
  border: 0;
  border-radius: var(--eun-radius-md);
  padding: 14px 16px;
}
.shop-card:hover { border-color: transparent; }
.shop-card .shop-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.shop-card .shop-rank {
  display: inline-block;
  font-family: inherit;
  font-size: var(--eun-font-min);
  font-weight: var(--eun-font-weight-heavy);
  color: var(--card);
  background: var(--orange);
  border-radius: var(--eun-gap-base);
  padding: 2px 8px;
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.shop-card.shop-card-locked .shop-rank { background: var(--ink-3); }
.shop-card .shop-name { font-size: var(--eun-font-body-min); font-weight: var(--eun-font-weight-title); margin-top: 0; min-width: 0; }
.find-empty {
  grid-column: 1 / -1;
  background: var(--cream);
  border-radius: var(--eun-radius-sm);
  padding: 28px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}
.find-empty span { display: block; margin-top: 6px; font-size: var(--eun-font-sub-min); font-weight: 400; color: var(--ink-3); }
.shop-card .shop-cat { font-size: var(--eun-font-label-max); color: var(--ink-3); }
.shop-card .shop-kw { font-size: var(--eun-font-sub-max); color: var(--ink-2); line-height: 1.6; border-top: 0; padding-top: 0; margin-top: 8px; }
.lock-overlay-content { border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); }
.lock-overlay-title { font-size: var(--eun-font-h2-min); font-weight: var(--eun-font-weight-title); }
.lock-overlay-desc { font-size: var(--eun-font-sub-max); color: var(--ink-2); }
.lock-btn-primary { border-radius: var(--eun-radius-md); min-height: var(--eun-button-secondary-min-height); padding: 0 20px; font-size: 15px; font-weight: var(--eun-font-weight-title); }
.lock-btn-secondary { border-radius: var(--eun-radius-md); min-height: var(--eun-button-secondary-min-height); font-size: var(--eun-font-sub-max); }

/* 대표키워드 분석기 — 입력 카드 */
.competitor-input-card #competitor-query-input { width: 100%; }
.competitor-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.competitor-actions .btn {
  width: 100%;
  min-height: var(--eun-button-primary-min-height);
  border-radius: var(--eun-button-primary-radius);
  font-size: var(--eun-button-primary-font-size);
}
.competitor-actions .btn.ghost {
  min-height: var(--eun-button-secondary-min-height);
  border-radius: var(--eun-button-secondary-radius-min);
  font-size: var(--eun-font-body-min);
}

/* 대표키워드 분석기 — 시안의 "사장님이 놓친 키워드" 큰 숫자 카드 */
.missed-hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
  margin-bottom: 12px;
}
.missed-hero .missed-label { margin: 0; font-size: var(--eun-font-sub-min); font-weight: var(--eun-font-weight-title); color: var(--ink-3); }
.missed-hero .missed-value {
  margin: 8px 0 0;
  font-size: var(--eun-font-hero);
  font-weight: var(--eun-font-weight-heavy);
  letter-spacing: var(--eun-tracking-hero);
  line-height: 1.1;
}
.missed-hero .missed-value .unit { font-size: 20px; color: var(--ink-3); margin-left: 4px; }
.missed-hero .missed-desc { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
.missed-hero .missed-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--eun-font-sub-min);
  color: var(--ink-3);
}
.missed-hero .missed-foot b { color: var(--ink-2); }
.missed-hero .missed-data {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: var(--eun-font-sub-min);
}
.missed-hero .missed-data strong { color: var(--ink); }
.missed-hero .missed-ratio {
  display: flex;
  height: var(--eun-progress-height-sm);
  overflow: hidden;
  margin: 10px 0 0;
  border-radius: var(--eun-progress-radius);
  background: var(--eun-progress-track);
}
.missed-hero .missed-ratio-region { background: var(--orange); }
.missed-hero .missed-ratio-solo { background: var(--ink-3); }
.missed-hero .missed-criteria,
.missed-hero .missed-samples {
  margin: 10px 0 0;
  color: var(--ink-3);
  font-size: var(--eun-font-label-max);
  line-height: var(--eun-leading-body);
}

/* ── 순위 조회기 ─────────────────────────────────────────── */
.rank-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .rank-inputs { grid-template-columns: 1fr; } }
.rank-inputs .buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.rank-inputs .buttons .btn { flex: 1 1 160px; }
.rank-field label {
  display: block;
  font-size: 14px;
  font-weight: var(--eun-font-weight-title);
  margin-bottom: 6px;
}
.rank-field label .req { color: var(--red); }
.rank-inputs input[type="text"] { width: 100%; }
.rank-inputs .buttons { grid-column: 1 / -1; }
.rank-inputs .buttons .btn.primary {
  min-height: var(--eun-button-primary-min-height);
  border-radius: var(--eun-button-primary-radius);
  font-size: var(--eun-button-primary-font-size);
}
.rank-hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
  margin-bottom: 12px;
  text-align: center;
}
.rank-hero .rank-query { font-size: var(--eun-font-sub-min); font-weight: var(--eun-font-weight-title); color: var(--ink-3); margin: 0; }
.rank-hero .rank-value {
  margin: 10px 0 0;
  font-size: var(--eun-font-hero);
  font-weight: var(--eun-font-weight-heavy);
  letter-spacing: var(--eun-tracking-hero);
  line-height: 1.1;
}
.rank-hero .rank-value .unit { font-size: 20px; font-weight: var(--eun-font-weight-title); color: var(--ink-2); margin-left: 2px; }
.rank-hero .rank-note { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.rank-hero .rank-msg { margin: 8px auto 0; max-width: 420px; font-size: var(--eun-font-sub-max); color: var(--ink-3); line-height: 1.6; }
.rank-hero .rank-chips { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.rank-hero .rank-chip {
  font-size: var(--eun-font-label-max);
  font-weight: var(--eun-font-weight-title);
  border-radius: var(--eun-radius-pill);
  padding: 4px 12px;
  white-space: nowrap;
  background: var(--cream);
  color: var(--ink-2);
}
.rank-hero .rank-chip.is-page1 { background: var(--green-soft); color: var(--green-text); }
.rank-hero .rank-chip.is-page2 { background: var(--gold-soft); color: var(--gold); }
.rank-hero .rank-chip.is-far { background: var(--red-soft); color: var(--red); }
.rank-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 22px 24px; margin-bottom: 12px; }
.rank-group h3 { margin: 0 0 4px; font-size: var(--eun-font-h2-min); font-weight: var(--eun-font-weight-title); color: var(--ink); }
.rank-group .rank-group-desc { margin: 0 0 14px; font-size: var(--eun-font-sub-max); color: var(--ink-2); }
.rank-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--cream);
  border-radius: var(--eun-radius-sm);
  padding: 12px 14px;
}
.rank-row + .rank-row { margin-top: 6px; }
.rank-row.is-mine { background: var(--orange-soft); }
.rank-row .rank-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rank-row .rank-row-no { font-size: var(--eun-font-sub-max); font-weight: var(--eun-font-weight-heavy); color: var(--ink-3); flex-shrink: 0; }
.rank-row.is-mine .rank-row-no { color: var(--orange); }
.rank-row .rank-row-name { font-size: var(--eun-font-body-min); font-weight: 700; color: var(--ink); min-width: 0; }
.rank-row.is-mine .rank-row-name { font-weight: var(--eun-font-weight-title); color: var(--orange-text); }
.rank-row .rank-row-meta { font-size: var(--eun-font-label-max); font-weight: 700; color: var(--ink-3); white-space: nowrap; flex-shrink: 0; }
.rank-deep { border: 0; }
.rank-deep > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: var(--eun-touch-target-min);
  font-size: var(--eun-font-h2-min);
  font-weight: var(--eun-font-weight-title);
  color: var(--ink);
}
.rank-deep > summary::-webkit-details-marker { display: none; }
.rank-deep .rank-deep-count { font-size: var(--eun-font-sub-max); font-weight: 700; color: var(--ink-3); }
.rank-deep .rank-deep-mine {
  font-size: var(--eun-font-label-max);
  font-weight: var(--eun-font-weight-title);
  color: var(--orange-text);
  background: var(--orange-soft);
  border-radius: var(--eun-radius-pill);
  padding: 3px 10px;
}
.rank-cta {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rank-cta .rank-cta-title { font-size: 15px; font-weight: var(--eun-font-weight-title); color: var(--ink); margin: 0; }
.rank-cta .rank-cta-sub { font-size: var(--eun-font-sub-max); color: var(--ink-2); margin: 0; }
.rank-cta .rank-cta-box { background: var(--cream); border-radius: var(--eun-radius-sm); padding: 12px 14px; }
.rank-cta .rank-cta-box p { margin: 0; font-size: var(--eun-font-sub-max); color: var(--ink-2); }
.rank-cta .rank-cta-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--eun-button-primary-min-height);
  border-radius: var(--eun-button-primary-radius);
  background: var(--orange);
  color: var(--card);
  font-size: var(--eun-button-primary-font-size);
  font-weight: var(--eun-button-primary-font-weight);
  text-decoration: none;
}
.rank-cta .rank-cta-btn:hover { background: var(--orange-hover); }
.kw-lowresult-nudge {
  background: var(--gold-soft);
  border: 0;
  border-left: var(--eun-emphasis-rail-width) solid var(--gold);
  border-radius: var(--eun-radius-md);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.kw-nudge-title { font-size: 15px; font-weight: var(--eun-font-weight-title); color: var(--gold); margin-bottom: 8px; }
.kw-nudge-body { margin: 0; font-size: 14px; color: var(--gold); line-height: 1.75; }
.kw-nudge-suggest { margin-top: 14px; }
.kw-nudge-suggest-title { font-size: var(--eun-font-sub-min); font-weight: var(--eun-font-weight-title); color: var(--gold); margin-bottom: 8px; }
.kw-nudge-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-nudge-retry {
  min-height: var(--eun-touch-target-min);
  padding: 10px 16px;
  border: var(--eun-control-border-width) solid var(--orange);
  border-radius: var(--eun-radius-xs);
  background: var(--card);
  color: var(--orange-text);
  font: inherit;
  font-size: 14px;
  font-weight: var(--eun-font-weight-title);
  cursor: pointer;
}
.kw-nudge-retry:hover { background: var(--orange-soft); }
.rank-retried {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; margin-bottom: 12px;
  background: var(--green-soft);
  border-radius: var(--eun-radius-md);
  font-size: 14px; font-weight: 700; color: var(--green-text);
}

/* ── 트렌드 팝업 ─────────────────────────────────────────── */
.modal-backdrop { background: var(--eun-scrim); }
.modal { border-radius: var(--radius-lg); box-shadow: var(--eun-shadow-popup); }
.modal-header { padding: 20px 24px; border-bottom: 0; }
.modal-title { font-size: var(--eun-font-h2-max); font-weight: var(--eun-font-weight-title); }
.modal-title .kw { color: var(--ink); }
.modal-close { font-size: 18px; font-weight: var(--eun-font-weight-title); color: var(--ink-3); }
.modal-close:hover { background: var(--cream); }
.modal-body { padding: 0 24px 24px; }
.modal-section-title { font-size: var(--eun-font-sub-min); font-weight: var(--eun-font-weight-title); color: var(--ink-3); }
.volume-cards { gap: 10px; }
.volume-card { background: var(--cream); border: 0; border-radius: var(--eun-radius-md); padding: 14px 16px; }
.volume-card .label { font-size: var(--eun-font-label-max); font-weight: var(--eun-font-weight-title); color: var(--ink-2); }
.volume-card .val { font-size: var(--eun-font-number-card-min); font-weight: var(--eun-font-weight-heavy); letter-spacing: var(--eun-tracking-card-number); }
.volume-card .bar { height: 6px; background: var(--line); }
.volume-card.pc .label { color: var(--ink-2); }
.volume-card.mo .label { color: var(--green-text); }
.volume-card.total { background: var(--orange-soft); }
.volume-card.total .label { color: var(--orange-text); }
.volume-card.total .val { color: var(--orange); }
.volume-card.total .bar { background: var(--card); }
.range-toggle { background: var(--cream); border-radius: var(--eun-radius-xs); padding: 3px; }
.range-btn { min-height: 38px; padding: 8px 11px; border-radius: var(--eun-gap-base); font-size: var(--eun-font-label-max); font-weight: var(--eun-font-weight-title); color: var(--ink-3); }
.range-btn:hover { background: var(--card); }
.range-btn.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.range-btn .sub { color: var(--ink-3); }
.range-btn.active .sub { color: var(--orange-text); }
.modal-chart-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--eun-radius-md); padding: 16px 14px; }
.modal-peak-ribbon { background: var(--gold-soft); border: 0; color: var(--gold); font-weight: var(--eun-font-weight-title); }
.chart-legend .lg.pc::before { background: var(--orange); }
.chart-legend .lg.mo::before { background: var(--green); }
.chart-tip { background: var(--ink); border-radius: var(--eun-gap-base); }
.chart-tip-row .d.pc { background: var(--orange); }
.chart-tip-row .d.mo { background: var(--green); }
.chart-tip-row.total b { color: var(--card); }
.blog-card { background: var(--cream); border: 0; border-radius: var(--eun-radius-md); padding: 14px 16px; }
.blog-card .label { font-size: var(--eun-font-label-max); font-weight: var(--eun-font-weight-title); color: var(--ink-2); }
.modal-note { font-size: var(--eun-font-label-max); color: var(--ink-3); line-height: 1.65; }
.blog-post-list { gap: 0; }
.blog-post-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 0;
  gap: 12px;
}
.blog-post-card:hover { background: transparent; border-color: var(--line); border-top-color: var(--line); }
.blog-post-card .blog-post-rank { font-family: inherit; font-size: var(--eun-font-label-max); font-weight: var(--eun-font-weight-heavy); color: var(--ink-3); width: 16px; text-align: left; }
.blog-post-card .blog-post-title { font-size: 14px; font-weight: 700; color: var(--orange); line-height: 1.5; }
.blog-post-card .blog-post-desc { font-size: var(--eun-font-sub-min); color: var(--ink-2); line-height: 1.6; }
.blog-post-card .blog-post-meta { font-size: 12px; color: var(--ink-3); }
.blog-post-error { background: var(--cream); border: 1px dashed var(--line); border-radius: var(--eun-radius-sm); }

/* ── 바닥글 ─────────────────────────────────────────────── */
.footer { color: var(--ink-3); font-size: var(--eun-font-sub-max); }
.footer a { color: var(--ink-3); }

/* ── 좁은 화면 ──────────────────────────────────────────── */
@media (max-width: 880px) {
  #keywords-panels.panel-row, #place-panels.panel-row, #competitor-panels.panel-row { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .shops-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* 시안은 좁은 화면에서도 KPI를 두 칸으로 둔다 (한 칸으로 내리면 스크롤이 길어짐) */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .card, .panel, .table-panel, .shops-panel, .help-callout { padding: 18px 16px; }
}

/* 공통 크롬 아래 키워드 이동은 RelatedKw 시안의 형제 3탭으로 시작한다.
   예전 왼쪽 15줄 메뉴는 '다른 도구 보기' 안으로 옮겨, 기존 탭·임베드 경로는 보존한다. */
body.eun-tool-chrome .hub-layout { display: block; max-width: none; }
body.eun-tool-chrome nav.tabs {
  position: sticky;
  top: 64px;
  z-index: 40;
  display: block;
  max-width: 1000px;
  width: auto;
  margin: 0 auto;
  padding: 10px var(--eun-page-padding-inline);
  border: 0;
  background: var(--cream);
}
body.eun-tool-chrome .keyword-primary-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--eun-radius-sm);
  background: var(--card);
}
body.eun-tool-chrome nav.tabs .keyword-primary-tabs button {
  width: 100%;
  min-width: 0;
  min-height: var(--eun-touch-target-min);
  margin: 0;
  padding: 9px 8px;
  border-radius: var(--eun-radius-xs);
  color: var(--ink-2);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
body.eun-tool-chrome nav.tabs .keyword-primary-tabs button.active {
  background: var(--orange-soft);
  color: var(--orange-text);
}
/* 「다른 도구 보기」 접기 규칙은 §13·§14-4로 폐기됐다 — 도구 목록은 허브에만 둔다. */
body.eun-tool-chrome .hub-layout > main {
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  body.eun-tool-chrome nav.tabs { top: 124px; }
}
@media (max-width: 760px) {
  /* 공통 상단바 아래에서 바로 보이는 시안의 3탭. 예전 서랍 문법은 위에서 비도구 화면으로 한정했다. */
  body.eun-tool-chrome nav.tabs {
    position: sticky;
    top: 64px;
    z-index: 40;
    width: auto;
    max-height: none;
    padding: 10px var(--eun-page-padding-inline);
    overflow: visible;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  body.eun-tool-chrome .hub-scrim.on { z-index: 30; }
}
@media (max-width: 620px) {
  body.eun-tool-chrome .keyword-primary-tabs { grid-template-columns: 1fr; }
}

/* ============================================================================
   P3 · P7 · P9 — 시안 「EunCoach Parts 0815」 3·7·9번 (2026-08-15)
   · 이 블록은 문서 마지막이라 위 규칙을 덮는다. 색은 design-tokens.css 토큰만 쓴다.
   ========================================================================== */

/* P9 — 「열 더 보기」로 늘어나는 7열은 머리칸 배경으로 "더 본 열"임을 표시 */
.kw-table thead th.col-advanced { background: var(--eun-action-soft); }

/* P7 — 「담기 · 추적 키워드 N / 5」 띠 */
.kw-track-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: var(--eun-radius-sm);
  background: var(--eun-action-soft);
}
.kw-track-banner.is-guest { background: var(--eun-bg); }
.kw-track-banner-copy {
  min-width: 0;
  color: var(--eun-action-text-on-soft);
  font-size: 13.5px;
  line-height: 1.5;
  word-break: keep-all;
}
.kw-track-banner.is-guest .kw-track-banner-copy { color: var(--eun-sub); font-size: 14px; }
.kw-track-banner-copy b { display: block; font-size: 14.5px; font-weight: 800; }
.kw-track-banner-copy span { display: block; margin-top: 2px; }
.kw-track-banner-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: var(--eun-touch-target-min);
  color: var(--eun-action);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  word-break: keep-all;
}

/* P7 — 표·카드 줄의 담기 버튼 */
/* 우리가 쓴 라벨이라 큰 글씨에서 잘리면 안 된다 — nowrap·말줄임 금지(룰 ⑤). 두 줄로 담는다. */
.kw-table th.kw-track-col,
.kw-table td.kw-track-col { text-align: right; }
.kw-track-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--eun-touch-target-min);
  padding: 0 12px;
  border: var(--eun-control-border-width) solid var(--eun-action);
  border-radius: var(--eun-radius-xs);
  background: transparent;
  color: var(--eun-action);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  word-break: keep-all;
}
.kw-track-btn.is-done,
.kw-track-btn:disabled {
  border-color: var(--line);
  background: var(--cream);
  color: var(--ink-2);
  cursor: default;
}
.kw-track-btn.is-swap { border-color: var(--line); color: var(--ink-2); }
.kw-card-actions { margin-top: 12px; }
.kw-card-actions .kw-track-btn { width: 100%; }

/* P3(2) — 폰 카드. 키워드 16px/700 · 월 검색량 20px/800(「회」) · 칩 시즌·경쟁·블로그 순서 */
.kw-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.kw-card .kw-name {
  min-width: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.kw-total-block { flex-shrink: 0; text-align: right; }
.kw-card .kw-total {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.kw-card .kw-total-unit {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
}
.kw-card .kw-meta { margin-top: 10px; gap: 6px; }
.kw-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--eun-radius-pill);
  background: var(--eun-bg);
  color: var(--eun-sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.kw-chip-season { background: var(--eun-caution-soft); color: var(--eun-caution-text); font-weight: 800; }
.kw-chip-good { background: var(--eun-positive-soft); color: var(--eun-positive-text); font-weight: 800; }
.kw-chip-bad { background: var(--eun-negative-soft); color: var(--eun-negative-text); font-weight: 800; }