/* ==========================================
   Source: indicators.css
========================================== */

/* ==========================================
   indicators.css - Indicators page styles
========================================== */

/* ==========================================
   Indicators Index Component
========================================== */

@layer components {
  .indicator-category-list {
    display: grid;
    gap: var(--space-16);
  }

  .indicator-category {
    padding: var(--space-40) var(--space-20);
    scroll-margin-top: calc(var(--space-80) + var(--space-16));
    background-color: var(--bg-color-card);
    border: 2px solid transparent;
    border-radius: var(--space-20);
  }

  .indicator-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-64);
    height: var(--space-64);
    margin-inline: auto;
    background-color: var(--color-white);
    border-radius: var(--space-10);
  }

  .indicator-category-icon img {
    width: var(--space-40);
    height: var(--space-40);
  }

  .indicator-category h2 {
    margin-top: var(--space-08);
    font-size: var(--font-size-h3-lg);
    font-weight: 700;
    line-height: var(--line-height-h3);
    text-align: center;
  }

  .indicator-category p {
    margin-top: var(--space-20);
    font-size: var(--font-size-md);
    line-height: var(--line-height-lg);
  }

  .indicator-category ul {
    display: grid;
    gap: var(--space-04);
    padding-left: var(--space-18);
    margin-top: var(--space-35);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    list-style: disc;
  }

  .indicator-category li::marker {
    color: var(--color-subtle);
  }

  @media (width >= 768px) {
    .indicator-category-list {
      gap: var(--space-35);
    }

    .indicator-category {
      display: grid;
      grid-template-columns: var(--space-120) 1fr;
      column-gap: var(--space-40);
      align-items: start;
      padding: var(--space-64);
      scroll-margin-top: calc(var(--space-120) + var(--space-24));
      border-radius: var(--space-40);
    }

    .indicator-category-icon {
      grid-row: span 3;
      width: var(--space-120);
      height: var(--space-120);
      margin-inline: 0;
      border-radius: var(--space-20);
    }

    .indicator-category-icon img {
      width: var(--space-80);
      height: var(--space-80);
    }

    .indicator-category h2 {
      font-size: var(--font-size-40);
      text-align: left;
    }

    .indicator-category p {
      margin-top: var(--space-10);
    }

    .indicator-category a {
      font-size: var(--font-size-md);
    }

    .indicator-category ul {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--space-04) var(--space-48);
      font-size: var(--font-size-sm);
    }
  }
}

/* ==========================================
   Detail Component
========================================== */

@counter-style detail-circled {
  system: fixed;
  symbols: "\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467" "\2468";
  suffix: "";
}

@layer components {
  .detail-page {
    padding: 104px var(--space-15) var(--space-40);
    background-color: var(--bg-color-card);
  }

  .detail {
    width: min(100%, var(--content-width));
    margin-inline: auto;
    overflow: hidden;
    background-color: var(--color-white);
    border-radius: var(--space-20);
  }

  .detail-header,
  .detail-content {
    width: min(100%, calc(784px + (min(8.33vw, var(--space-120)) * 2)));
    margin-inline: auto;
  }

  .detail-header {
    padding: var(--space-40) var(--space-20) 0;
  }

  .detail-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-160);
    min-height: var(--space-40);
    padding-inline: var(--space-12);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.4;
    background-color: var(--bg-color-card);
    border-radius: var(--radius-round);
  }

  .detail h1 {
    margin-top: var(--space-07);
    font-size: 1.875rem;
    line-height: var(--line-height-h2);
  }

  .detail-share {
    width: auto;
    padding-top: var(--space-20);
    margin-inline: var(--space-20);
    border-top: 1px solid var(--color-border-subtle);
  }

  .detail-share-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-06);
    align-items: center;
  }

  .detail-share-list li {
    display: block;
    min-height: var(--space-20);
  }

  .detail-share iframe {
    display: block;
  }

  .detail-content {
    padding: var(--space-60) var(--space-20) var(--space-64);
    container: detail-content / inline-size;
  }

  .detail-content :where(p),
  .detail-content :where(li) {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
  }

  .detail-content > :where(p) + :where(p, .detail-signal-list) {
    margin-top: var(--space-28);
  }

  .detail-intro-media {
    --detail-intro-media-image-width: 264px;

    display: grid;
    gap: var(--space-32);
  }

  .detail-note {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-08);
    margin-top: var(--space-08);
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: var(--line-height-h3-lg);
    color: var(--color-subtler);
  }

  .detail-content > .detail-note {
    margin-top: 23px;
  }

  .detail-subtitle {
    margin-top: var(--space-16);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-md);
  }

  .detail-section:not(:first-child) {
    margin-top: var(--space-80);
  }

  .detail-section
    > :where(
      *:not(
        :first-child,
        h3 + *,
        .detail-highlight-text + *,
        .detail-cross-list,
        .detail-table-note,
        .detail-note
      )
    ) {
    margin-top: var(--space-32);
  }

  .detail-section h2 {
    display: grid;
    row-gap: var(--space-06);
    justify-items: center;
    margin-bottom: var(--space-40);
    font-size: var(--font-size-h2);
    line-height: 1.5;
    text-align: center;
  }

  .detail-figure {
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--space-10);
  }

  .detail-content > .detail-figure {
    margin-top: var(--space-32);
  }

  .detail-figure-caption + .detail-figure {
    margin-top: var(--space-12);
  }

  .detail-figure :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
  }

  .detail-figure-icon {
    margin-inline: auto;
  }

  .detail-intro-media > .detail-figure {
    width: min(100%, var(--detail-intro-media-image-width));
    margin-inline: auto;
  }

  .detail-figure[data-detail-figure-variant="padded"] {
    padding: var(--space-16);
  }

  .detail-figure-grid {
    display: grid;
    gap: var(--space-20);
    margin-top: var(--space-24);
  }

  .detail-figure-grid img {
    max-width: 100%;
    height: auto;
  }

  .detail-candlestick-list {
    margin-top: var(--space-32);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--space-10);
  }

  .detail-candlestick-item {
    display: grid;
    padding: var(--space-24) var(--space-20) var(--space-32);
  }

  .detail-candlestick-item + .detail-candlestick-item {
    border-top: 1px solid var(--color-border-subtle);
  }

  .detail-candlestick-figure {
    display: grid;
    justify-items: center;
    order: 2;
    margin-inline: 0;
  }

  .detail-candlestick-figure img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .detail-candlestick-body {
    display: contents;
  }

  .detail-candlestick-title.detail-highlight-text {
    order: 1;
    margin-bottom: 0;
    text-align: center;
  }

  .detail-candlestick-ruby {
    display: block;
    margin-top: var(--space-05);
    font-size: var(--font-size-12);
    line-height: 1;
    color: var(--color-subtler);
  }

  .detail-candlestick-text {
    order: 3;
    margin-inline: 0;
  }

  .detail-candlestick-text p {
    font-size: var(--font-size-14);
    line-height: var(--line-height-h3-lg);
    color: var(--color-subtle);
  }

  .detail-candlestick-text p + p {
    margin-top: var(--space-12);
  }

  .detail-section h2 img {
    width: var(--space-56);
  }

  .detail-section h3:not([class]) {
    padding-block: 2px;
    padding-left: var(--space-16);
    margin-top: 0;
    margin-bottom: var(--space-24);
    font-size: var(--font-size-h3);
    line-height: 1.25;
    border-left: var(--space-04) solid var(--color-primary);
  }

  .detail-section > :where(*:not(h2)) + h3:not([class]) {
    margin-top: var(--space-40);
  }

  .detail-figure-caption {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
  }

  .detail-table table {
    width: 100%;
    overflow: hidden;
    border-spacing: 0;
    border-collapse: separate;
    border: 1px solid var(--color-border-subtle);
    border-radius: 10px;
  }

  .detail-table th,
  .detail-table td {
    padding: var(--space-14) var(--space-09);
    font-size: var(--font-size-14);
    line-height: 1.4;
    text-align: left;
    border: 1px solid var(--color-border-subtle);
    border-width: 0 0 1px 1px;
  }

  .detail-table thead th {
    padding: var(--space-16) var(--space-16) var(--space-12);
    color: var(--color-white);
    text-align: center;
    background-color: var(--color-primary);
  }

  .detail-table tbody th {
    font-weight: 700;
    background-color: var(--bg-color-card);
  }

  .detail-table td {
    line-height: var(--line-height-h3);
    vertical-align: text-top;
    background-color: var(--color-white);
  }

  .detail-table th:first-child,
  .detail-table td:first-child {
    border-left: 0;
  }

  .detail-table[data-detail-table-variant="ranking"] thead th {
    padding: var(--space-16) var(--space-24);
    font-size: var(--font-size-14);
    line-height: var(--line-height-h3);
    border-width: 0 0 1px;
  }

  .detail-table[data-detail-table-variant="ranking"] tbody th,
  .detail-table[data-detail-table-variant="ranking"] tbody td {
    border-width: 0 0 1px;
  }

  .detail-table[data-detail-table-variant="ranking"] tbody th {
    width: var(--space-36);
    background-color: var(--color-white);
  }

  .detail-table[data-detail-table-variant="ranking"] tbody td {
    padding: var(--space-16) var(--space-16) var(--space-16) 0;
    vertical-align: middle;
  }

  .detail-table tbody tr:last-child > * {
    border-bottom-width: 0;
  }

  .detail-table[data-detail-table-variant="comparison"] th:last-child {
    background-color: var(--color-subtler);
  }

  .detail-table[data-detail-table-variant="comparison"][data-detail-table-ratio="equal"] th,
  .detail-table[data-detail-table-variant="comparison"][data-detail-table-ratio="equal"] td,
  .detail-table[data-detail-table-variant="comparison"][data-detail-table-ratio="pc-1-2"]
    th:first-child,
  .detail-table[data-detail-table-variant="comparison"][data-detail-table-ratio="pc-1-2"]
    th:last-child {
    width: 50%;
  }

  .detail-related span {
    color: var(--color-subtler);
  }

  .detail-table[data-detail-table-variant="comparison"] th span {
    display: inline-flex;
    gap: var(--space-08);
    align-items: center;
    justify-content: center;
  }

  .detail-table[data-detail-table-variant="comparison"] th img {
    flex: 0 0 auto;
  }

  .detail-ranking-badge {
    display: inline-grid;
    place-items: center;
    width: var(--space-24);
    height: var(--space-24);
    padding-bottom: 3px;
    font-size: var(--font-size-16);
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
    background-color: #717f89;
    border-radius: var(--radius-round);
  }

  .detail-ranking-badge[data-detail-ranking-rank="gold"] {
    background-color: #cc9d33;
  }

  .detail-ranking-badge[data-detail-ranking-rank="blue"] {
    background-color: #489cd0;
  }

  .detail-ranking-badge[data-detail-ranking-rank="orange"] {
    background-color: #d17b3f;
  }

  .detail-ranking-link {
    display: block;
    width: fit-content;
    font-size: var(--font-size-14);
    font-weight: 700;
    line-height: var(--line-height-h3);
    color: var(--color-primary);
    text-decoration: underline;
  }

  .detail-ranking-analysis {
    display: block;
    font-size: var(--font-size-12);
    line-height: var(--line-height-h3);
    color: var(--color-subtler);
  }

  .detail-highlight-text {
    margin-bottom: var(--space-24);
    font-size: var(--font-size-20);
    font-weight: 700;
    line-height: 1.35;
  }

  .detail-formula {
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: 1.2;
  }

  .detail-formula [aria-hidden="true"] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--space-08);
    align-items: center;
    width: min(100%, 390px);
  }

  .detail-formula-fraction {
    position: relative;
    display: inline-grid;
    grid-template-rows: 1fr 1fr;
    row-gap: var(--space-04);
    text-align: center;
  }

  .detail-formula-fraction-line {
    align-content: flex-end;
  }

  .detail-formula-fraction::after {
    position: absolute;
    top: 50%;
    display: block;
    width: 100%;
    height: 1px;
    content: "";
    background-color: currentcolor;
    transform: translateY(-50%);
  }

  .detail-table-note {
    margin-top: var(--space-08);
    font-size: var(--font-size-12);
    line-height: var(--line-height-md);
    color: var(--color-subtler);
    text-align: right;
  }

  .detail-list {
    display: grid;
    gap: var(--space-08);
    padding-left: 1.2em;
    margin-top: var(--space-24);
    list-style: disc;
  }

  .detail-ordered-list {
    display: grid;
    gap: var(--space-08);
    padding-left: 0;
    list-style: none;
    counter-reset: item;
  }

  .detail-ordered-list li {
    position: relative;
    padding-left: var(--space-24);
    line-height: var(--line-height-h3);
    counter-increment: item;
  }

  .detail-ordered-list li .detail-note {
    margin-top: var(--space-04);
  }

  .detail-ordered-list li::before {
    position: absolute;
    top: 0;
    left: 0;
    content: counter(item, detail-circled);
  }

  .detail-cross-list {
    display: grid;
    row-gap: var(--space-40);
    margin-top: var(--space-38);
  }

  .detail-cross-list section {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-20);
  }

  .detail-cross-list section figure {
    margin-top: var(--space-10);
  }

  .detail-subheading {
    padding: 11px var(--space-16);
    font-size: var(--font-size-18);
    line-height: var(--line-height-h3);
    background-color: var(--bg-color-detail-heading);
    border-radius: var(--space-04);
  }

  .detail-signal {
    margin-top: var(--space-40);
  }

  .detail-signal > :where(*) {
    margin-bottom: 23px;
  }

  .detail-signal .detail-subheading {
    margin-bottom: 23px;
  }

  .detail-signal-list {
    display: grid;
    gap: var(--space-08);
    list-style: none;
  }

  .detail-signal-list li {
    position: relative;
    padding-left: 2.5em;
    line-height: var(--line-height-h3);
  }

  .detail-signal-label {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
  }

  .detail-next-link {
    margin-top: var(--space-64);
  }

  .detail-next-link-anchor {
    display: grid;
    gap: var(--space-08);
    place-items: center;
    min-height: 72px;
    padding: 23px var(--space-20);
    font-size: var(--font-size-18);
    font-weight: 700;
    line-height: var(--line-height-h3);
    color: var(--color-black);
    text-align: center;
    text-decoration: none;
    background-color: var(--bg-color-card);
    border-radius: var(--radius-8);
    transition: background-color 0.2s ease;
  }

  .detail-next-link-label {
    display: inline-flex;
    gap: var(--space-15);
    align-items: center;
    font-size: var(--font-size-16);
  }

  .detail-next-link-label::before {
    width: 11px;
    height: 11px;
    content: "";
    background-image: url("/image/technical-analysis/common/icon-button-arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .detail-related {
    padding: var(--space-35) var(--space-20);
    margin-top: var(--space-64);
    background-color: var(--bg-color-detail-heading);
    border-radius: var(--space-12);
  }

  .detail-related + .detail-related {
    margin-top: var(--space-16);
  }

  .detail-related h2 {
    font-size: var(--font-size-18);
    line-height: var(--line-height-md);
    color: var(--color-subtler);
  }

  .detail-related ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-04) var(--space-16);
    margin-top: var(--space-20);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
  }

  .detail-footer {
    display: flex;
    justify-content: center;
    padding: var(--space-40) var(--space-15);
    border-top: 1px solid var(--color-border-subtle);
  }

  .detail[data-detail-variant="column"] .detail-header {
    padding-bottom: var(--space-15);
  }

  .detail[data-detail-variant="column"] .detail-content {
    padding-top: var(--space-80);
  }

  .detail-definition-list {
    display: grid;
    gap: var(--space-16);
    margin-top: var(--space-20);
  }

  .detail-definition-list dt {
    font-size: var(--font-size-18);
    font-weight: 700;
    line-height: var(--line-height-h3);
    color: var(--color-subtler);
  }

  .detail-definition-list dd {
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: var(--line-height-md);
  }

  @media (any-hover: hover) {
    .detail-next-link-anchor:hover {
      text-decoration: none;
      background-color: var(--bg-color-card-hover);
    }

    .detail-ranking-link:hover {
      text-decoration: none;
    }
  }

  @media (width >= 768px) {
    .detail-page {
      padding: 63px min(8.33vw, var(--space-120)) var(--space-96);
    }

    .detail {
      border-radius: var(--space-40);
    }

    .detail h1 {
      margin-top: var(--space-20);
      font-size: var(--font-size-48);
    }

    .detail[data-detail-variant="column"] h1 {
      font-size: 3.5rem;
    }

    .detail-header {
      padding-inline: min(8.33vw, var(--space-120));
      padding-top: var(--space-120);
    }

    .detail[data-detail-variant="column"] .detail-header {
      padding-bottom: var(--space-30);
    }

    .detail-share {
      width: min(calc(100% - (min(8.33vw, var(--space-120)) * 2)), 784px);
      padding-top: var(--space-22);
      margin-inline: auto;
    }

    .detail-content {
      padding-block: var(--space-96) var(--space-120);
      padding-inline: min(8.33vw, var(--space-120));
    }

    .detail-cross-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-48);
      margin-top: var(--space-60);
    }

    .detail-cross-list section figure {
      margin-top: 0;
    }

    .detail-figure {
      border-radius: var(--space-20);
    }

    .detail-figure[data-detail-figure-variant="padded"] {
      padding: var(--space-24);
    }

    .detail-candlestick-list {
      margin-top: 0;
      border-radius: var(--space-20);
    }

    .detail-candlestick-item {
      grid-template-rows: auto 1fr;
      grid-template-columns: var(--space-160) minmax(0, 1fr);
      column-gap: var(--space-24);
      align-items: start;
      padding: var(--space-40) var(--space-24);
    }

    .detail-candlestick-figure {
      display: grid;
      grid-row: 1 / span 2;
      grid-column: 1;
      place-items: center;
      order: initial;
      width: 160px;
      height: 160px;
    }

    .detail-candlestick-title.detail-highlight-text {
      grid-column: 2;
      order: initial;
      text-align: left;
    }

    .detail-candlestick-text {
      grid-column: 2;
      order: initial;
      margin-top: var(--space-24);
    }

    .detail-candlestick-ruby {
      display: inline;
      margin-top: 0;
    }

    .detail-candlestick-text p {
      font-size: 15px;
      line-height: var(--line-height-md);
    }

    .detail-content :where(p) {
      line-height: var(--line-height-lg);
    }

    .detail-content > :where(p) + :where(p, .detail-signal-list) {
      margin-top: var(--space-32);
    }

    .detail-note {
      margin-top: var(--space-12);
    }

    .detail-content > .detail-figure {
      margin-top: 42px;
    }

    .detail-content > .detail-note {
      margin-top: var(--space-40);
    }

    .detail-section:not(:first-child) {
      margin-top: 117px;
    }

    .detail-section
      > :where(
        *:not(
          :first-child,
          h3 + *,
          .detail-highlight-text + *,
          .detail-cross-list,
          .detail-table-note,
          .detail-note
        )
      ) {
      margin-top: 42px;
    }

    .detail[data-detail-variant="column"] .detail-content {
      padding-top: var(--space-96);
    }

    .detail-section h2 {
      row-gap: 11px;
      margin-bottom: var(--space-64);
      font-size: var(--font-size-40);
    }

    [data-detail-variant="column"] .detail-section h2 {
      margin-bottom: var(--space-48);
    }

    .detail-section h2 img {
      width: var(--space-80);
    }

    .detail-section h3:not([class]) {
      margin-top: var(--space-80);
      margin-bottom: var(--space-20);
      border-left-width: var(--space-06);
    }

    .detail-highlight-text {
      margin-bottom: var(--space-20);
    }

    .detail-subheading {
      padding-block: 13px;
      font-size: var(--font-size-20);
    }

    .detail-signal {
      margin-top: var(--space-64);
    }

    .detail-next-link {
      margin-top: var(--space-120);
    }

    .detail-next-link-anchor {
      position: relative;
      gap: 0;
      min-height: var(--space-56);
      padding-inline: 150px;
      text-align: left;
      border-radius: var(--space-20);
    }

    .detail-next-link-label {
      position: absolute;
      right: var(--space-24);
    }

    .detail-next-link-title {
      justify-self: center;
      font-size: var(--font-size-20);
    }

    .detail-table th,
    .detail-table td {
      padding: var(--space-20);
    }

    .detail-table[data-detail-table-variant="ranking"] tbody th {
      width: var(--space-60);
      padding-left: var(--space-20);
    }

    .detail-table[data-detail-table-variant="ranking"] tbody td {
      padding: var(--space-20) var(--space-24) var(--space-20) var(--space-08);
    }

    .detail-ranking-badge {
      width: var(--space-32);
      height: var(--space-32);
    }

    .detail-table[data-detail-table-variant="comparison"][data-detail-table-ratio="pc-1-2"]
      th:first-child {
      width: 33.333%;
    }

    .detail-table[data-detail-table-variant="comparison"][data-detail-table-ratio="pc-1-2"]
      th:last-child {
      width: 66.667%;
    }

    .detail-related {
      padding: var(--space-40);
      margin-top: 117px;
      border-radius: var(--space-20);
    }

    .detail-related ul {
      gap: var(--space-05) var(--space-24);
      margin-top: var(--space-10);
    }

    .detail-next-link-label {
      gap: var(--space-20);
    }

    .detail-next-link-label::before {
      display: none;
    }

    .detail-next-link-label::after {
      width: 11px;
      height: 11px;
      content: "";
      background-image: url("/image/technical-analysis/common/icon-button-arrow.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    .detail-footer {
      padding-block: var(--space-48) var(--space-56);
    }
  }

  @container detail-content (width >= 760px) {
    .detail-intro-media {
      grid-template-columns: minmax(0, 1fr) var(--detail-intro-media-image-width);
      gap: var(--space-48);
      align-items: flex-start;
    }

    .detail-intro-media > .detail-figure {
      width: auto;
    }
  }
}