@import "./../../common/best-reset.css";
@import "./../../common/a11y.css";
@import "./../../common/base.css";
@import "./../../common/theme.css";
@import "./../../common/components/thumbnail-card.css";

/* 기본 스타일 */
.ediya-container {
  margin: var(--spacing-md);
}

.ediya-heading {
  --title-text-color: var(--deep-blue, #24388d);
  --subtitle-text-color: var(--silver, #878787);
  margin-block: 20px;

  h1 {
    color: var(--title-text-color);
  }

  p {
    color: var(--subtitle-text-color);
  }
}

/* 이디야 뉴스 */
.ediya-news {
  --text-color: var(--deep-blue, #24388d);
  --border-thick: 2px;
  --border-thin: 1px;
  --border-color: var(--deep-blue);
  --cell-spacing-head: var(--spacing-md);
  --cell-spacing-body: var(--spacing-md);

  table-layout: fixed;
  /* auto 레이아웃에서는 테이블이 처음부터 데이터를 보고 열 너비를 결정합니다. 즉, 테이블의 내용이 많거나 넓으면 그만큼 열이 넓어집니다. */
  border-collapse: collapse;
  /* 이 속성은 테이블의 셀과 셀 사이의 테두리(border)가 어떻게 처리될지를 결정합니다.
  seperate 는 셀 사이의 테두리가 서로 독립적입니다 */
  border-spacing: 0;
  inline-size: 680px;
  color: var(--text-color);
  border-block: var(--border-thick) solid currentColor;
  /* box-shadow: 1px 1px 0 0 #000, -1px -1px 0 0 #000; */

  .ediya-news__number {
    inline-size: 46px;
    text-align: center;
  }

  .ediya-news__content {
    inline-size: 579px;
  }

  .ediya-news__date {
    inline-size: 85px;
    /* 해당 열 사이즈 얼마나 크게 작게? */
    text-align: center;
  }

  tbody tr {
    /* 테두리 두깨 결정 */
    border-block-start: var(--border-thin) solid currentColor;
  }

  th {
    font-size: 0.875rem;
    padding-block: var(--cell-spacing-head);
  }

  td {
    font-size: 0.75rem;
    padding-block: var(--cell-spacing-body);

    /* 이디야 소식 관련 내용이 포함 된 셀을 제외하고 모든 td 요소 선택 */
    &:not(:nth-child(2)) {
      text-align: center;
      font-size: 0.75rem;
      vertical-align: top;
    }
  }

  .thumbnail-card__caption strong {
    color: var(--deep-blue, #24388d);
  }
}