/* =========================================================
   아카이브 조절 변수
========================================================= */

:root {
  --archive-animation-duration: 800ms;

  --archive-animation-easing:
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --archive-square-open-scale: 1;

  --archive-small-menu-offset-y: 0px;
  --archive-square-offset-y: -1.5px;
}


/* =========================================================
   메인 기사 인덱스
========================================================= */

.site-main {
  width: 100%;

  min-height:
    calc(
      100dvh -
      53px
    );

  padding:
    0
    var(--page-padding)
    100px;

  background-color: #ffffff;
}


/* =========================================================
   검정 정렬표

   왼쪽  = 흰색 네모 블록
   오른쪽 = LATEST / OLDEST / 카테고리 순환 버튼
========================================================= */

.archive-sort {
  display: grid;

  grid-template-columns:
    100px
    minmax(0, 1fr)
    120px
    130px;

  align-items: center;

  column-gap:
    clamp(
      18px,
      2vw,
      36px
    );

  width: 100%;
  min-height: 48px;

  margin:
    clamp(
      54px,
      4vw,
      74px
    )
    0
    0;

  /*
    기사 카드의 좌우 padding과 동일합니다.

    따라서
    왼쪽 네모 시작선 = FILM 시작선
    오른쪽 LATEST 끝선 = 날짜 끝선
  */
  padding:
    0
    clamp(
      24px,
      2.4vw,
      40px
    );

  background-color: #111111;
  color: #ffffff;

  border: 0;
}


/* =========================================================
   왼쪽 흰색 네모 블록

   첫 번째 열 중앙이 아니라
   정렬바의 실제 왼쪽 padding 선에 맞춤
========================================================= */

.archive-sort-blocks {
  grid-column: 1;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 3px;

  /*
    중요:
    width:100%를 사용하지 않습니다.
    첫 번째 grid 열 중앙으로 밀리는 것을 방지합니다.
  */
  width: 11px;
  height: 28px;

  margin: 0;
  padding: 0;

  /*
    FILM 왼쪽 시작선과 동일
  */
  justify-self: start;
}


/* =========================================================
   흰색 네모
========================================================= */

.archive-sort-blocks span {
  display: block;

  width: 11px;
  height: 11px;

  flex:
    0
    0
    11px;

  margin: 0;
  padding: 0;

  background-color: #ffffff;

  border: 0;
  border-radius: 3px;
}


/*
  두 네모를 같은 x축에 정확히 배치
*/

.archive-sort-blocks
span:nth-child(2) {
  margin: 0;

  transform: none;
}


/* =========================================================
   오른쪽 순환 정렬 버튼

   CATEGORY가 있던 우측 위치
========================================================= */

.archive-sort-button {
  grid-column: 4;

  justify-self: end;

  display: inline-flex;
  align-items: center;
  justify-content: flex-end;

  width: 100%;

  min-width: 0;
  min-height: 48px;

  margin: 0;
  padding: 0;

  background-color: transparent;
  color: #ffffff;

  border: 0;
  border-radius: 0;

  font-family:
    "CossetteTitre",
    "Special Gothic Condensed One",
    "Pretendard",
    sans-serif;

  font-size: 15px;
  font-weight: 400;
  line-height: 1;

  letter-spacing: -0.02em;

  text-align: right;

  white-space: nowrap;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    opacity 160ms ease;

  -webkit-tap-highlight-color:
    transparent;
}


/* =========================================================
   정렬 버튼 인터랙션
========================================================= */

.archive-sort-button:hover {
  background-color: transparent;
  color: #ffffff;

  opacity: 0.55;
}

.archive-sort-button:active {
  opacity: 0.35;
}

.archive-sort-button:focus-visible {
  outline:
    1px solid #ffffff;

  outline-offset: 4px;
}


/* =========================================================
   로딩 / 오류 / 빈 결과
========================================================= */

.archive-loading,
.archive-error,
.archive-empty {
  margin: 0;

  padding:
    30px
    0;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}


/* =========================================================
   전체 기사 목록
========================================================= */

.article-index {
  display: grid;

  grid-template-columns: 1fr;

  row-gap: 0;

  width: 100%;

  margin:
    0
    auto;

  padding: 0;
}


/* =========================================================
   index-column 평탄화
========================================================= */

.index-column {
  display: contents;
}


/* =========================================================
   개별 기사 카드

   PC / 태블릿 / 모바일 공통 구조
========================================================= */

.index-item {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  grid-template-areas:
    "subcategory subcategory"
    "title title"
    "author date";

  column-gap:
    clamp(
      16px,
      1.8vw,
      28px
    );

  row-gap:
    clamp(
      12px,
      1.2vw,
      18px
    );

  align-items: start;

  width: 100%;

  min-height:
    clamp(
      150px,
      11vw,
      190px
    );

  /*
    왼쪽 padding이 archive-sort와 동일하므로
    FILM과 흰 네모가 같은 시작선에 놓입니다.
  */
  padding:
    clamp(
      24px,
      2vw,
      34px
    )
    clamp(
      24px,
      2.4vw,
      40px
    )
    clamp(
      26px,
      2.2vw,
      38px
    );

  background-color: #ffffff;
  color: #111111;

  border: 0;
  border-bottom:
    1px solid #111111;

  box-shadow: none;

  text-decoration: none;

  overflow: visible;

  transition:
    background-color 180ms ease,
    opacity 180ms ease;

  -webkit-tap-highlight-color:
    transparent;
}


/* =========================================================
   첫 기사 위쪽 선
========================================================= */

.article-index
> .index-column:first-child
> .index-item:first-child {
  border-top:
    1px solid #111111;
}


/* =========================================================
   세부 카테고리
========================================================= */

.index-subcategory {
  grid-area: subcategory;

  min-width: 0;

  margin: 0;

  color: #111111;

  font-family:
    "CossetteTitre",
    "Special Gothic Condensed One",
    "Pretendard",
    sans-serif;

  font-size:
    clamp(
      16px,
      1vw,
      19px
    );

  font-weight: 400;
  line-height: 1;

  letter-spacing: 0;

  text-align: left;

  white-space: nowrap;
}


/* =========================================================
   제목
========================================================= */

.index-title {
  grid-area: title;

  min-width: 0;

  margin: 0;

  color: #111111;

  font-family:
    "Pretendard",
    sans-serif;

  font-size:
    clamp(
      25px,
      2vw,
      38px
    );

  font-weight: 600;
  line-height: 1.32;

  letter-spacing: -0.035em;

  white-space: normal;

  overflow: visible;
  text-overflow: clip;

  word-break: keep-all;
  overflow-wrap: break-word;
}


/* =========================================================
   작성자
========================================================= */

.index-author {
  grid-area: author;

  align-self: end;

  min-width: 0;

  color: #111111;

  font-family:
    "Pretendard",
    sans-serif;

  font-size:
    clamp(
      14px,
      0.9vw,
      16px
    );

  font-weight: 500;
  line-height: 1.3;

  white-space: nowrap;
}


/* =========================================================
   날짜
========================================================= */

.index-date {
  grid-area: date;

  align-self: end;

  min-width: 0;

  color: #111111;

  font-family:
    "CossetteTitre",
    "Special Gothic Condensed One",
    "Pretendard",
    sans-serif;

  font-size:
    clamp(
      14px,
      0.95vw,
      17px
    );

  font-weight: 400;
  line-height: 1;

  letter-spacing: 0;

  text-align: right;

  white-space: nowrap;
}


/* =========================================================
   빈 카드
========================================================= */

.index-item--placeholder {
  cursor: default;

  pointer-events: none;
}

.index-item--placeholder
.index-author,
.index-item--placeholder
.index-title,
.index-item--placeholder
.index-date,
.index-item--placeholder
.index-subcategory {
  color:
    rgba(
      17,
      17,
      17,
      0.28
    );
}


/* =========================================================
   기사 인터랙션
========================================================= */

.index-item:active {
  opacity: 0.55;
}


@media (hover: hover) {
  .index-item:not(
    .index-item--placeholder
  ):hover {
    background-color:
      rgba(
        0,
        0,
        0,
        0.035
      );
  }
}


/* =========================================================
   아카이브 상단 필터
========================================================= */

.archive-filter {
  position: relative;

  display: flex;

  align-items: flex-start;

  width: max-content;

  max-width: 100%;

  min-height: 66px;

  white-space: nowrap;
}


/* =========================================================
   ALL
========================================================= */

.archive-filter-all {
  position: relative;

  z-index: 1;

  display: inline-block;

  flex:
    0
    0
    auto;

  margin-top: -2px;

  color: #111111;

  font-family:
    "CossetteTitre",
    "Special Gothic Condensed One",
    "Pretendard",
    sans-serif;

  font-size: 64px;

  font-weight: 400;
  line-height: 0.94;

  letter-spacing: -0.045em;

  text-decoration: none;

  transition:
    opacity 180ms ease;
}


/* =========================================================
   펼쳐지는 메뉴
========================================================= */

.archive-filter-items {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: flex-start;

  gap: 16px;

  width: 0;
  min-width: 0;

  margin: 0;

  opacity: 0;

  overflow: hidden;

  transform:
    translateY(
      var(
        --archive-small-menu-offset-y
      )
    );

  transition:
    width
      var(
        --archive-animation-duration
      )
      var(
        --archive-animation-easing
      ),
    margin-left
      var(
        --archive-animation-duration
      )
      var(
        --archive-animation-easing
      ),
    opacity
      var(
        --archive-animation-duration
      )
      var(
        --archive-animation-easing
      );
}


/* =========================================================
   메뉴 열린 상태
========================================================= */

.archive-filter.is-open
.archive-filter-items {
  width:
    var(
      --archive-menu-width,
      0px
    );

  margin-left: 22px;

  opacity: 1;
}


/* =========================================================
   펼쳐지는 메뉴 항목
========================================================= */

.archive-filter-items a {
  display: inline-block;

  flex:
    0
    0
    auto;

  color: #111111;

  font-family:
    "CossetteTitre",
    "Special Gothic Condensed One",
    "Pretendard",
    sans-serif;

  font-size: 30px;

  font-weight: 400;
  line-height: 1;

  letter-spacing: -0.03em;

  text-decoration: none;
}


/* =========================================================
   상단 검정 네모 버튼
========================================================= */

.archive-filter-toggle {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;
  justify-content: center;

  flex:
    0
    0
    auto;

  width: 24px;
  height: 24px;

  margin:
    0
    0
    0
    16px;

  padding: 0;

  background-color: transparent;

  border: 0;

  cursor: pointer;

  transform:
    translateY(
      var(
        --archive-square-offset-y
      )
    );

  transition:
    opacity 180ms ease;

  -webkit-tap-highlight-color:
    transparent;
}


/* =========================================================
   상단 검정 네모
========================================================= */

.archive-filter-toggle span {
  display: block;

  width: 15px;
  height: 15px;

  background-color: #111111;

  transform: scale(1);

  transform-origin: center;

  transition:
    transform
      var(
        --archive-animation-duration
      )
      var(
        --archive-animation-easing
      );
}


.archive-filter.is-open
.archive-filter-toggle
span {
  transform:
    scale(
      var(
        --archive-square-open-scale
      )
    );
}


/* =========================================================
   상단 메뉴 인터랙션
========================================================= */

.archive-filter-toggle:focus-visible {
  outline:
    1px solid #111111;

  outline-offset: 4px;
}


@media (hover: hover) {
  .archive-filter a:hover,
  .archive-filter-toggle:hover {
    opacity: 0.45;
  }
}


/* =========================================================
   아카이브 페이지 폰트
========================================================= */

.archive-page
.archive-filter-all,
.archive-page
.archive-filter-items
a,
.archive-page
.index-date,
.archive-page
.index-subcategory {
  font-family:
    "CossetteTitre",
    "Special Gothic Condensed One",
    "Pretendard",
    sans-serif;

  font-weight: 400;
}


.archive-page
.index-author,
.archive-page
.index-title {
  font-family:
    "Pretendard",
    sans-serif;
}

/* =========================================================
   아직 존재하지 않는 기사 자리 숨김
========================================================= */

.index-item--placeholder {
  display: none !important;
}

/* 현재 선택된 인덱스 메뉴 */
.index-filter.is-active {
  color: #9a9a9a; }
/* =========================================================
   태블릿
========================================================= */

@media (max-width: 1100px) {

  .archive-sort {
    grid-template-columns:
      82px
      minmax(0, 1fr)
      100px
      110px;

    column-gap: 16px;

    padding:
      0
      24px;
  }


  .archive-sort-button {
    font-size: 13px;
  }


  /*
    태블릿에서도 네모는
    왼쪽 padding 선에 붙습니다.
  */

  .archive-sort-blocks {
    width: 11px;

    justify-self: start;
  }


  .index-item {
    min-height: 150px;

    padding:
      22px
      24px
      24px;

    row-gap: 12px;
  }


  .index-title {
    font-size:
      clamp(
        23px,
        2.4vw,
        32px
      );
  }


  .index-subcategory {
    font-size: 15px;
  }


  .index-author {
    font-size: 14px;
  }


  .index-date {
    font-size: 14px;
  }
}


/* =========================================================
   모바일
========================================================= */

@media (max-width: 767px) {

  :root {
    --archive-small-menu-offset-y:
      0px;

    --archive-square-offset-y:
      0px;
  }


  /* =======================================================
     전체
  ======================================================= */

  .site-main {
    width: 100%;

    padding:
      0
      18px
      60px;
  }


  /* =======================================================
     헤더
  ======================================================= */

  .archive-header {
    width: 100%;

    padding:
      calc(
        env(
          safe-area-inset-top,
          0px
        ) +
        18px
      )
      18px
      16px;

    background-color: #ffffff;
  }


  /* =======================================================
     상단 필터
  ======================================================= */

  .archive-filter {
    display: flex;

    align-items: center;

    width: 100%;
    max-width: 100%;

    min-height: 58px;

    padding-right: 8px;

    overflow-x: auto;
    overflow-y: visible;

    white-space: nowrap;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
      touch;
  }


  .archive-filter::-webkit-scrollbar {
    display: none;
  }


  /* =======================================================
     ALL
  ======================================================= */

  .archive-filter-all {
    display: flex;

    align-items: center;

    flex:
      0
      0
      auto;

    margin: 0;

    font-size: 42px;

    line-height: 1;

    letter-spacing: -0.045em;
  }


  /* =======================================================
     펼쳐지는 메뉴
  ======================================================= */

  .archive-filter-items {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 0;
    min-width: 0;

    min-height: 34px;

    margin: 0;

    opacity: 0;

    overflow: hidden;

    transform: none;

      a[href="./about.html"] {
    display: none !important;
  }
  
  }


  .archive-filter.is-open
  .archive-filter-items {
    width:
      var(
        --archive-menu-width,
        0px
      );

    margin-left: 16px;

    opacity: 1;

    overflow: visible;
  }


  .archive-filter-items a {
    display: flex;

    align-items: center;

    flex:
      0
      0
      auto;

    height: 34px;

    padding-top: 2px;

    font-size: 20px;

    line-height: 1;

    letter-spacing: -0.03em;
  }


  /* =======================================================
     상단 네모 버튼
  ======================================================= */

  .archive-filter-toggle {
    display: flex;

    align-items: center;
    justify-content: center;

    flex:
      0
      0
      auto;

    width: 24px;
    height: 34px;

    margin:
      0
      0
      0
      10px;

    padding: 0;

    transform: none;
  }


  .archive-filter-toggle span {
    width: 11px;
    height: 11px;
  }


  /* =======================================================
     모바일 정렬표
  ======================================================= */

  .archive-sort {
    grid-template-columns:
      56px
      minmax(0, 1fr)
      48px
      66px;

    column-gap: 8px;

    min-height: 42px;

    margin:
      34px
      0
      0;

    /*
      모바일 카드 좌우 여백과 같은 10px
    */
    padding:
      0
      10px;
  }


  /* =======================================================
     모바일 흰색 블록
  ======================================================= */

  .archive-sort-blocks {
    grid-column: 1;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 2px;

    width: 9px;
    height: 24px;

    margin: 0;
    padding: 0;

    justify-self: start;
  }


  .archive-sort-blocks span {
    width: 9px;
    height: 9px;

    flex:
      0
      0
      9px;

    margin: 0;

    background-color: #ffffff;

    border-radius: 2px;
  }


  .archive-sort-blocks
  span:nth-child(2) {
    margin: 0;

    transform: none;
  }


  /* =======================================================
     모바일 정렬 버튼
  ======================================================= */

  .archive-sort-button {
    min-height: 42px;

    font-size: 11px;

    justify-content: flex-end;

    text-align: right;
  }


  /* =======================================================
     모바일 기사 카드
  ======================================================= */

  .index-item {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    grid-template-areas:
      "subcategory subcategory"
      "title title"
      "author date";

    column-gap: 12px;

    row-gap: 10px;

    min-height: 120px;

    padding:
      12px
      0
      14px;
  }


  .index-subcategory {
    font-family:
      "Pretendard",
      sans-serif;

    font-size: 15px;

    text-align: left;
  }


  .index-title {
    font-size:
      clamp(
        23px,
        6.4vw,
        30px
      );

    font-weight: 600;

    line-height: 1.35;

    letter-spacing: -0.035em;
  }


  .index-author {
    font-size: 14px;
  }


  .index-date {
    font-family:
      "Pretendard",
      sans-serif;

    font-size: 14px;

    line-height: 1.3;

    text-align: right;
  }


  /* =======================================================
     모바일 빈 카드 제거
  ======================================================= */

  .index-item--placeholder {
    display: none;
  }


  /* =======================================================
     모바일 로딩
  ======================================================= */

  .archive-loading,
  .archive-error,
  .archive-empty {
    margin: 0;

    padding:
      28px
      0;

    font-size: 14px;

    line-height: 1.6;
  }
}

/* =========================================================
   모바일 INDEX 상단 메뉴
   ARTICLE과 위치 정렬
========================================================= */

@media (max-width: 767px) {

  /* ALL 포함 메뉴 전체를 위로 6px */
  body.archive-page .archive-filter {
    transform: translateY(-6px);
  }

  /* 작은 카테고리 메뉴 + 검정 네모만 추가로 위로 */
  body.archive-page .archive-filter-items,
  body.archive-page .archive-filter-toggle {
    transform: translateY(-7px) !important;
  }

  /* 모바일에서 ABOUT 숨김 */
  body.archive-page
  .archive-filter-items
  a[href="./about.html"] {
    display: none !important;
  }
}

/* =========================================================
   움직임 최소화
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .archive-filter-items,
  .archive-filter-toggle span,
  .archive-sort-button,
  .index-item {
    transition: none;
  }
}