@charset "UTF-8";

/**
 * @File: content-finance.css
 * @Author: 디지털웍스
 * @Date: 2026-07-09
 * @Description: finance-summary 요약 재무제표 스타일
 * @Note: public/contents 정적 HTML 전용 스타일
 */

.finance-summary {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  background-color: var(--color-white, #fff);
  overflow: hidden;

  /* 기본 텍스트 */
  font-size: 14px;
  line-height: 24px;

  /* 섹션 영역 */
  .finance-section {
    position: relative;
    margin-top: 120px;

    &:first-child {
      margin-top: 0;
    }

    .section-title {
      font-size: 23px;
      font-weight: 600;
      line-height: 33px;
    }

    .section-title-sm {
      font-size: 18px;
      font-weight: 600;
      line-height: 28px;
    }

    .section-sub {
      margin-top: 6px;
    }
  }

  /* 테이블 */
  .finance-table {
    display: block;
    overflow-x: auto;
    margin-top: 24px;
    border-top: 1px solid var(--color-brand, #141414);
    padding-bottom: 5px;
    scrollbar-width: thin; /* 가로 스크롤바 */

    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
      border: none;
      font-size: 15px;
      line-height: 25px;
    }

    th,
    td {
      overflow-wrap: anywhere;
    }

    th {
      font-weight: 600;
    }

    thead {
      border-bottom: 1px solid var(--color-brand, #141414);

      th,
      td {
        padding-block: 12px;
        padding-inline: 6px;
        max-width: 100%;
      }
    }

    tbody {
      border-bottom: 1px solid var(--color-brand, #141414);

      tr {
        border-top: 1px solid #e8e8e8;

        &:first-child {
          border-top: none;
        }
      }

      th,
      td {
        padding-block: 16px;
        padding-inline: 6px;
      }
    }

    .cell-label {
      text-align: left;
      font-weight: 600;
    }

    .cell-sublabel {
      text-align: left;
    }

    .cell-value {
      text-align: center;

      &.cell-right {
        text-align: right;
      }
    }

    .subtotal-row {
      th,
      td {
        font-weight: 600;
      }
    }

    .total-row {
      border-top: 1px solid var(--color-brand, #141414);

      th,
      td {
        font-weight: 600;
      }
    }

    .block-row {
      border-top: 1px solid var(--color-brand, #141414);

      &:first-child {
        border-top: none;
      }
    }

    .icon-sub {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-bottom: 3px;
      margin-right: 6px;
      background: url('/contents/assets/images/finance/icon-sub.svg') no-repeat center center / contain;
    }

    /* 요약 손익계산서 테이블 */
    &.table-01 {
      .col-label {
        min-width: 150px;
      }
      .col-value {
        width: 150px;

        &.col-right {
          width: 100px;
        }
      }
    }

    /* 요약 재무상태표 테이블 */
    &.table-02 {
      .col-label {
        width: 150px;
      }
      .col-sublabel {
        min-width: 150px;
      }
      .col-value {
        width: 150px;

        &.col-right {
          width: 100px;
        }
      }
    }
  }

  /* 유의사항 */
  .note-content {
    margin-top: 6px;
    border-top: 1px solid var(--color-brand, #141414);
    padding-top: 20px;
  }

  .note-list {
    display: flex;
    flex-direction: column;
    gap: 6px;

    li {
      position: relative;
      padding-left: 10px;

      &::before {
        content: '';
        display: block;
        width: 3px;
        height: 3px;
        background-color: var(--color-brand, #141414);
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 10px;
      }
    }
  }
}

/* ============================================================
 모바일 화면 (max-width: 960px)
 ============================================================ */

@media (max-width: 960px) {
  .finance-summary {
    /* 섹션 영역 */
    .finance-section {
      margin-top: 80px;
    }

    /* 테이블 */
    .finance-table {
      -webkit-overflow-scrolling: touch;

      table {
        width: auto;
        min-width: 100%;
      }

      /* 요약 손익계산서 테이블 */
      &.table-01 {
        table {
          min-width: 470px;
        }

        .col-label {
          min-width: 150px;
        }
        .col-value {
          width: 120px;

          &.col-right {
            width: 80px;
          }
        }
      }

      /* 요약 재무상태표 테이블 */
      &.table-02 {
        table {
          min-width: 590px;
        }

        .col-label {
          width: 120px;
        }
        .col-sublabel {
          min-width: 150px;
        }
        .col-value {
          width: 120px;

          &.col-right {
            width: 80px;
          }
        }
      }
    }
  }
}