/* ==========================================
   Source: top.css
========================================== */

/* ==========================================
   top.css - Top page styles
========================================== */

/* ==========================================
   KV Component
========================================== */

@layer components {
  .kv {
    --kv-grid-size: 13.067vw;

    display: block;
    padding: calc(var(--space-80) + 19.733vw) 12vw 24.6vw;
    background-color: var(--bg-color-card);
    background-image:
      url("/image/technical-analysis/top/mv-bg-01-sp.png"),
      url("/image/technical-analysis/top/mv-bg-02-sp.png"),
      linear-gradient(var(--color-grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-position: left 21.333vw, left bottom, left 1.333vw, 4vw top;
    background-size:
      contain, contain, var(--kv-grid-size) var(--kv-grid-size),
      var(--kv-grid-size) var(--kv-grid-size);
  }

  .kv-author-block {
    margin-top: 8.533vw;
  }

  .kv-author-block img {
    width: 60vw;
    margin-inline: auto;
  }

  .kv h1 {
    width: auto;
    margin-top: 0;
  }

  .kv-author {
    padding-left: var(--space-10);
    margin-top: 4.267vw;
    border-left: 1.067vw solid var(--color-black);
  }

  .kv-author-title {
    font-size: 3.2vw;
    line-height: var(--line-height-h3-lg);
  }

  .kv-author-name {
    font-size: 5.333vw;
    line-height: var(--line-height-h3-lg);
  }

  .kv-description {
    margin-top: 23.5vw;
    font-size: 4.267vw;
    line-height: var(--line-height-lg);
  }

  @media (width >= 768px) {
    .kv {
      --kv-grid-size: 5.63vw;

      display: grid;
      grid-template: "title author" auto "description author" 1fr / 1fr 33.333vw;
      padding: calc(110px + 5.21vw) 8.33vw 3.802vw 11.11vw;
      background-image:
        url("/image/technical-analysis/top/mv-bg-pc.png"),
        linear-gradient(var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
      background-repeat: no-repeat, repeat, repeat;
      background-position: left bottom, left 2.85vw, 2.08vw top;
      background-size:
        contain, var(--kv-grid-size) var(--kv-grid-size), var(--kv-grid-size) var(--kv-grid-size);
    }

    .kv-author-block {
      grid-area: author;
      margin-top: 0;
    }

    .kv-author-block img {
      width: 33.333vw;
    }

    .kv h1 {
      grid-area: title;
      width: 38.85vw;
      margin-top: 8.438vw;
    }

    .kv h1 img {
      width: 100%;
    }

    .kv-author {
      margin-top: 0;
      border-left-width: 0.313vw;
    }

    .kv-author-title {
      font-size: 0.83vw;
    }

    .kv-author-name {
      font-size: 1.39vw;
    }

    .kv-description {
      grid-area: description;
      margin-top: 2.01vw;
      font-size: 1.11vw;
    }
  }
}

/* ==========================================
   Top Section Component
========================================== */

@layer components {
  .top-section {
    display: grid;
  }

  .top-section-description {
    margin-top: var(--space-18);
    font-size: var(--font-size-md);
    line-height: var(--line-height-xs);
  }

  .top-section > .button {
    margin-top: var(--space-40);
    margin-inline: auto;
  }

  .top-section-content {
    margin-top: 34px;
  }

  @media (width >= 768px) {
    .top-section {
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: var(--space-30);
      align-items: end;
    }

    .heading-with-label,
    .top-section-description {
      grid-column: 1;
    }

    .top-section-description {
      margin-top: var(--space-24);
    }

    .top-section-content {
      grid-column: 1 / -1;
      margin-top: var(--space-64);
    }

    .top-section > .button {
      grid-row: 2 / 3;
      grid-column: 2;
      margin-top: 0;
    }

    .top-section:not(:has(.top-section-description)) > .button {
      grid-row: 1;
    }

    .top-section:not(:has(.top-section-description)) > .top-section-content {
      margin-top: var(--space-48);
    }
  }
}

/* ==========================================
   Top Indicators Component
========================================== */

@layer components {
  .indicators-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  @media (width >= 768px) {
    .indicators-card-list {
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      gap: var(--space-32) var(--space-48);
    }
  }
}

/* ==========================================
   Glossary List Component
========================================== */

@layer components {
  .glossary-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-08) var(--space-48);
    margin-top: var(--space-07);
  }

  .glossary-list li {
    position: relative;
    padding-left: var(--space-14);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-h3);
  }

  .glossary-list li::before {
    position: absolute;
    top: 0.7em;
    left: 0;
    width: var(--space-06);
    height: var(--space-06);
    content: "";
    background-color: var(--color-subtle);
    border-radius: var(--radius-round);
  }

  .glossary-list a {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
  }

  .glossary-list ruby {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.5;
  }

  .glossary-list rb {
    font-size: var(--font-size-md);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .glossary-list a:not(:has(ruby)) {
    font-size: var(--font-size-md);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .glossary-list rt {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-subtler);
    text-align: left;
    transition: color 0.2s ease;
  }

  .glossary-list rt::before {
    content: "（";
  }

  .glossary-list rt::after {
    content: "）";
  }

  @media (any-hover: hover) {
    .glossary-list a:hover {
      text-decoration: none;
    }

    .glossary-list a:hover rb {
      text-decoration: none;
    }

    .glossary-list a:hover rt {
      color: var(--color-primary);
    }
  }

  @media (width >= 768px) {
    .glossary-list {
      grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
      margin-top: 4px;
    }

    .glossary-list rt {
      margin-top: 0;
    }
  }
}