/* Shared readability rules for the approved category and keyword result UI.
   Keep category selection controls scoped; retain native horizontal scrolling. */
@media screen {
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) {
    --category-copy: #343a43;
    --category-secondary: #616977;
  }

  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="category"] .research-category-trigger {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="category"] .research-category-options button {
    font-size: 16px;
    font-weight: 550;
    line-height: 1.55;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) :is([data-research-status], [data-research-category-message], .research-category-feedback) {
    font-size: 13px;
    line-height: 1.7;
    font-weight: 500;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) :is(.research-section-header, .table-head h2) {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) :is(.research-shipping, .research-reviews, .research-saturation) > h3 {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-shipping-row > div:first-child {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--category-secondary);
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-shipping-row b {
    font-size: 16px;
    font-weight: 700;
    color: var(--category-copy);
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-shipping-includes {
    font-size: 12px;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-kpi-stack > .metric > .metric-title {
    padding-right: 0;
    color: var(--category-secondary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-kpi-stack > .metric > .metric-value,
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-kpi-stack > .metric > .metric-value strong {
    color: var(--category-copy);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-kpi-stack > .metric > .metric-foot {
    color: var(--category-secondary);
    font-size: 12px;
    line-height: 1.6;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-saturation-grid h4 {
    color: var(--category-secondary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-saturation-grid :is(dt, dd) {
    font-size: 16px;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-saturation-grid dt {
    color: var(--category-secondary);
    font-weight: 500;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-saturation-grid dd {
    color: var(--category-copy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-review-chart h4 {
    color: var(--category-secondary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-review-axis {
    color: var(--category-secondary);
    font-size: 12px;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-review-column b {
    font-size: 13px;
    font-weight: 700;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-review-column small {
    color: var(--category-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    height: 36px;
  }

  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-filter-heading {
    font-size: 16px;
    font-weight: 700;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-filter-heading .research-filter-state {
    font-size: 12px;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-filter-field {
    font-size: 14px;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-filter-label {
    color: var(--category-secondary);
    font-weight: 600;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-filter-form :is(input:not([type="checkbox"]), select) {
    color: var(--category-copy);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-filter-form input::placeholder {
    color: #777f8c;
    font-weight: 400;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-filter-shipping-choice {
    font-size: 13px;
    font-weight: 600;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-filter-shipping-choice > span {
    color: var(--category-secondary);
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-filter-shipping-choice > input:checked + span {
    color: #fff;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) :is(.research-filter-apply, .research-saved-products-toggle, .research-section-actions > .btn) {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-filter-chips button {
    font-size: 12px;
    line-height: 1.5;
  }

  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) [data-research-table-area] .research-product-table tbody td[data-column] {
    color: var(--category-copy);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) [data-research-table-area] .research-product-table thead th {
    color: #58616d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-product-table .research-product-copy > a {
    color: var(--category-copy);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-product-table .research-product-copy > a:hover {
    color: var(--hc-brand-deep, #9a4b12);
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-product-table td[data-column="shipping"] {
    padding-inline: 8px;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-product-table .research-shipping-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
  }
  /* Colors sampled from the official Coupang delivery badges. Keep this on
     result labels only; filter controls intentionally remain neutral. */
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-product-table .research-shipping-label[data-shipping="로켓배송"] {
    color: #009CCB;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-product-table .research-shipping-label[data-shipping="판매자로켓"] {
    color: #F97000;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-product-table .research-shipping-label[data-shipping="일반배송"] {
    color: #454F5B;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-product-table .research-shipping-label:is([data-shipping="해외배송"], [data-shipping="로켓직구"], [data-shipping="해외직구"]) {
    color: #9E20D3;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-product-table .research-shipping-label[data-shipping="로켓프레시"] {
    color: #008C00;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) :is(.research-wing-login, .research-kpi-stack .metric-value .research-wing-login span) {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-product-table td[data-column] .research-wing-login {
    font-size: 13px;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-wing-login-gate p {
    color: var(--category-secondary);
    font-size: 14px;
    line-height: 1.7;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .table-footer {
    color: var(--category-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) [data-research-table-area] > .chart-note {
    color: var(--category-secondary);
    font-size: 13px;
    line-height: 1.8;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-category-notice {
    margin: 20px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #e8ebf0;
    color: var(--category-secondary);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-category-notice p {
    margin: 0 0 6px;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-category-notice p:last-child {
    margin-bottom: 0;
  }
}

/* Keyword-only controls keep their function and data basis, with the same
   readable text scale as the shared category result components. */
@media screen {
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-keyword-bar input {
    color: var(--category-copy);
    font-weight: 600;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] :is(.research-keyword-result-title h2, .research-keyword-overview-panel > .section-head h2, .research-keyword-disclosure > summary h2, .research-section > :is(summary, :where(.research-section-header)), .table-head h2) {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-count-card > span {
    color: var(--category-secondary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-count-card > strong {
    color: var(--category-copy);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] :is(.research-count-card > small, .research-count-card .source-note, .research-volume-details) {
    color: var(--category-secondary);
    font-size: 12px;
    line-height: 1.7;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-keyword-discovery .section-head :is(h2, h3) {
    color: var(--category-secondary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-keyword-discovery :is(.research-discovery-list :is(button, a), .weekly-rank) {
    min-height: 24px;
    color: var(--category-copy);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-keyword-discovery :is(.chart-note, .weekly-count-source) {
    color: var(--category-secondary);
    font-size: 12px;
    line-height: 1.7;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-price-summary h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-price-summary :is(small, .price-stats div) {
    color: var(--category-secondary);
    font-size: 13px;
    line-height: 1.6;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-keyword-range-column > button {
    min-height: 32px;
    font-size: 14px;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-summary-loading {
    grid-column: 1 / -1;
    min-height: 336px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 24px;
    background: var(--hc-soft, #f8f9fb);
    border: 0;
    border-radius: 8px;
    text-align: center;
    color: var(--hc-text, #5d3b26);
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-summary-loading strong {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-summary-loading p {
    margin: 0;
    color: #7e8590;
    font-size: 14px;
    line-height: 1.7;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-summary-spinner {
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    border: 3px solid #eadfce;
    border-top-color: var(--hc-brand, #e98925);
    border-radius: 50%;
    animation: research-summary-spin 1s linear infinite;
  }
}

/* Keep keyword products inside the same content area as category products.
   A viewport-wide expansion moved the left columns behind the fixed rail,
   particularly while the navigation menu was expanded. The table's own
   scrollbar continues to handle columns wider than the content area. */
@media screen {
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] #research-products {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-summary-spinner {
    animation: none;
  }
}

/* At half-window width each mini-chart was too narrow for four delivery
   labels. Stack the charts instead of shrinking text or hiding captions. */
@media screen and (max-width: 1100px) {
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-review-charts {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* Preserve readable input text and allow chart captions to wrap at narrow
   widths. Product columns continue to use the existing horizontal scrollbar. */
@media screen and (max-width: 600px) {
  .commerce-surface[data-commerce-page="analyzer"] .research-view[data-mode="keyword"] .research-keyword-bar input {
    font-size: 16px;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-filter-form :is(input:not([type="checkbox"]), select) {
    font-size: 16px;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-saturation-grid dl {
    grid-template-columns: 1fr;
    row-gap: 2px;
    text-align: center;
  }
  .commerce-surface[data-commerce-page="analyzer"] .research-view:is([data-mode="category"], [data-mode="keyword"]) .research-saturation-grid :is(dt, dd) {
    font-size: 14px;
    white-space: normal;
    margin: 0;
  }
}