/* 화면 하단 매뉴얼 패널 (kia-ev6 layout, Manual*.html content) */
.instruction-text[data-theme="kia-ev6"] {
  color: var(--kia-ev6-instruction-text-color);
  text-align: left;

  /* Tag defaults: `:where(&)` keeps this ancestor chain at zero specificity, so any utility
     class below (.text-warn, .text-danger, .text-lg, .text-sm, ...) reliably overrides it,
     while explicit inline `style="..."` on the source HTML still wins as usual. */
  :where(&) {
    h1, h2 {
      font-size: 1.5em;
      margin: 0;
    }

    h3, h4 {
      font-size: 1.2em;
      line-height: 1em;
      margin: 0;
    }

    p {
      font-size: 0.8em;
      line-height: 1.5em;
      margin: 0;
    }

    ol, ul {
      font-size: 0.75em;
      line-height: 2;
      color: var(--kia-ev6-color-muted);
    }

    hr {
      border: none;
      height: 2px;
      background: rgba(255, 255, 255, 0.15);
      margin: 10px 0;
    }

    blockquote {
      margin: 10px 0;
      padding-left: 1em;
      border-left: 3px solid rgba(255, 255, 255, 0.3);
      font-size: 0.85em;
      line-height: 1.5em;
    }

    a {
      color: var(--kia-ev6-link-color);
      text-decoration: none;

      &:active, &:focus, &:visited {
        color: var(--kia-ev6-link-color);
      }

      &:hover {
        color: orange;
        text-decoration: underline;
      }
    }
  }

  /* Utilities: plain classes, always win over the :where()-wrapped defaults above. */
  .text-warn {
    color: var(--kia-ev6-color-warn);
  }

  .text-danger {
    color: var(--kia-ev6-color-danger);
  }

  .text-lg {
    font-size: 1em;
    line-height: 1.5em;
  }

  .text-sm {
    font-size: 0.7em;
    line-height: 1.5em;
  }

  .reference {
    font-size: 0.9em;
    opacity: 0.85;
  }

  /* hr divider variants, matching the opacity levels found across Manual.html content */
  .separator-1 {
    background: rgba(255, 255, 255, 0);
  }

  .separator-2 {
    background: rgba(255, 255, 255, 0.5);
  }

  .separator-3 {
    background: rgba(255, 255, 255, 0.8);
  }
}