/* =========================================================
   전역 변수
========================================================= */

:root {
  --page-padding:
    clamp(
      30px,
      2.2vw,
      52px
    );

  --content-width:
    100%;

  --background-color:
    #ffffff;

  --text-color:
    #111111;

  --logo-width:
    81px;

  --menu-icon-width:
    39px;

  --category-menu-gap:
    16px;

  --category-menu-size:
    30px;

  --category-menu-letter-spacing:
    -0.03em;
}


/* =========================================================
   폰트
========================================================= */

@font-face {
  font-family:
    "Pretendard";

  src:
    url(
      "../font/Pretendard-Medium.otf"
    )
    format("opentype");

  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family:
    "Pretendard";

  src:
    url(
      "../font/Pretendard-SemiBold.otf"
    )
    format("opentype");

  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family:
    "BookkMyungjo";

  src:
    url(
      "../font/BookkMyungjo_Light.ttf"
    )
    format("truetype");

  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family:
    "BookkMyungjo";

  src:
    url(
      "../font/BookkMyungjo_Bold.ttf"
    )
    format("truetype");

  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family:
    "Special Gothic Condensed One";

  src:
    url(
      "../font/SpecialGothicCondensedOne-Regular.ttf"
    )
    format("truetype");

  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family:
    "CossetteTitre";

  src:
    url(
      "../font/CossetteTitre-Regular.ttf"
    )
    format("truetype");

  font-weight: 400;
  font-style: normal;
  font-display: block;
}


@font-face {
  font-family:
    "KoPubWorldDotum";

  src:
    url(
      "../font/KoPubWorldDotumMedium.ttf"
    )
    format("truetype");

  font-weight: 500;
  font-style: normal;
  font-display: block;
}


@font-face {
  font-family:
    "KoPubWorldDotum";

  src:
    url(
      "../font/KoPubWorldDotumBold.ttf"
    )
    format("truetype");

  font-weight: 700;
  font-style: normal;
  font-display: block;
}


/* =========================================================
   기본 설정
========================================================= */

*,
*::before,
*::after {
  box-sizing:
    border-box;
}


html {
  width:
    100%;

  min-height:
    100%;

  background-color:
    var(
      --background-color
    );
}


body {
  width:
    100%;

  min-height:
    100vh;

  min-height:
    100dvh;

  margin:
    0;

  background-color:
    var(
      --background-color
    );

  color:
    var(
      --text-color
    );

  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Apple SD Gothic Neo",
    sans-serif;

  font-weight:
    500;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

  overflow-x:
    hidden;
}


a {
  color:
    inherit;

  text-decoration:
    none;
}


button,
input,
textarea,
select {
  font:
    inherit;
}


/* =========================================================
   인트로 페이지용 고정 헤더

   중요:
   ARCHIVE / ARTICLE / ABOUT에는
   아래 고정 위치를 사용하지 않습니다.
========================================================= */

.site-header {
  position:
    fixed;

  top:
    0;

  left:
    0;

  z-index:
    1000;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  width:
    100%;

  padding:
    28px
    40px;

  pointer-events:
    none;
}


.site-logo,
.menu-button,
.site-menu a,
.archive-filter,
.archive-filter a,
.archive-filter-toggle {
  pointer-events:
    auto;
}


/* =========================================================
   ARCHIVE / ARTICLE / ABOUT 상단 메뉴

   INDEX를 기준으로 세 페이지 완전히 통일
========================================================= */

.archive-page
.archive-header,

.article-detail-page
.article-archive-header,

.about-page
.about-header {
  position:
    relative !important;

  top:
    auto !important;

  right:
    auto !important;

  bottom:
    auto !important;

  left:
    auto !important;

  z-index:
    1000;

  display:
    block;

  width:
    100%;

  margin:
    0;

  padding:
    28px
    44px
    18px !important;

  background-color:
    #ffffff;

  pointer-events:
    auto;
}


/* =========================================================
   서브페이지 공통 횡단

   INDEX의 현재 위치 / 크기를 기준으로 사용
========================================================= */

.page-brand {
  position:
    relative !important;

  top:
    auto !important;

  left:
    auto !important;

  z-index:
    1100;

  display:
    block;

  width:
    100%;

  margin:
    0;

  padding:
    26px
    44px
    0;

  background-color:
    #ffffff;

  color:
    #111111;

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

  font-size:
    27px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    -0.03em;

  white-space:
    nowrap;

    cursor:
    pointer;
}


/* =========================================================
   인트로용 로고
========================================================= */

.site-logo {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    0;
}


.site-logo-name {
  display:
    block;

  color:
    #000000;

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

  font-size:
    27px;

  font-weight:
    700;

  line-height:
    1;

  white-space:
    nowrap;
}


/* =========================================================
   햄버거 버튼
========================================================= */

.menu-button {
  position:
    relative;

  z-index:
    1002;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

  padding:
    0;

  background-color:
    transparent;

  border:
    0;

  cursor:
    pointer;

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


.menu-button img {
  display:
    block;

  width:
    var(
      --menu-icon-width
    );

  height:
    auto;
}


/* =========================================================
   슬라이드 메뉴
========================================================= */

.site-menu {
  position:
    fixed;

  top:
    0;

  right:
    0;

  z-index:
    1001;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  justify-content:
    center;

  gap:
    24px;

  width:
    min(
      420px,
      100%
    );

  height:
    100vh;

  height:
    100dvh;

  padding:
    100px
    40px
    40px;

  background-color:
    rgba(
      255,
      255,
      255,
      0.96
    );

  transform:
    translateX(
      100%
    );

  transition:
    transform
    320ms
    ease;
}


.site-menu.is-open {
  transform:
    translateX(
      0
    );
}


.site-menu a {
  color:
    #000000;

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

  font-size:
    34px;

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    0;

  transition:
    opacity
    180ms
    ease;

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


@media (hover: hover) {
  .site-menu a:hover {
    opacity:
      0.45;
  }
}


/* =========================================================
   일반 카테고리 내비게이션
========================================================= */

.category-navigation {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    var(
      --category-menu-gap
    );

  width:
    max-content;

  max-width:
    100%;

  margin:
    0;

  white-space:
    nowrap;
}


.category-link {
  display:
    inline-block;

  flex:
    0
    0
    auto;

  color:
    #111111;

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

  font-size:
    var(
      --category-menu-size
    );

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    var(
      --category-menu-letter-spacing
    );

  text-align:
    left;

  white-space:
    nowrap;

  transition:
    opacity
    180ms
    ease;

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


@media (hover: hover) {
  .category-link:hover {
    opacity:
      0.45;
  }
}


/* =========================================================
   메인 콘텐츠
========================================================= */

.site-main {
  width:
    100%;

  min-height:
    calc(
      100vh -
      68px
    );

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

  background-color:
    var(
      --background-color
    );
}


/* =========================================================
   태블릿
========================================================= */

@media (max-width: 899px) {

  :root {
    --page-padding:
      22px;

    --category-menu-gap:
      11px;

    --category-menu-size:
      20px;
  }


  .archive-page
  .archive-header,

  .article-detail-page
  .article-archive-header,

  .about-page
  .about-header {
    padding:
      22px
      var(--page-padding)
      16px !important;
  }


  .page-brand {
    padding:
      22px
      var(--page-padding)
      0;

    font-size:
      24px;
  }


  .category-navigation {
    justify-content:
      flex-start;

    gap:
      var(
        --category-menu-gap
      );

    width:
      max-content;

    max-width:
      100%;

    margin:
      0;

    overflow-x:
      auto;

    overflow-y:
      hidden;

    scrollbar-width:
      none;

    -webkit-overflow-scrolling:
      touch;
  }


  .category-navigation::-webkit-scrollbar {
    display:
      none;
  }


  .category-link {
    font-size:
      var(
        --category-menu-size
      );
  }


  .article-title {
    font-size:
      clamp(
        24px,
        6.5vw,
        34px
      );

    line-height:
      1.25;

    transform:
      none;
  }


  .article-layout {
    display:
      flex;

    flex-direction:
      column;

    gap:
      42px;
  }


  .article-copy {
    width:
      100%;

    max-width:
      none;
  }


  .article-body {
    font-size:
      clamp(
        16px,
        4.2vw,
        19px
      );

    line-height:
      1.85;
  }


  .article-body > p {
    margin-bottom:
      32px;
  }


  .article-visual {
    position:
      static;

    order:
      -1;

    width:
      100%;

    margin:
      0;
  }


  .article-image {
    width:
      100%;

    aspect-ratio:
      5 / 3;
  }


  .article-caption {
    font-size:
      11px;
  }


  .article-principles {
    margin-top:
      40px;
  }


  .article-principles li {
    grid-template-columns:
      36px
      minmax(
        0,
        1fr
      );
  }


  .footnote-marker {
    width:
      11px;

    height:
      11px;
  }


  .article-footer {
    margin-top:
      60px;
  }
}


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

@media (max-width: 767px) {

  :root {
    --logo-width:
      68px;

    --menu-icon-width:
      28px;

    --category-menu-gap:
      10px;

    --category-menu-size:
      18px;
  }


  /* 인트로 */

  .site-header {
    padding:
      20px;
  }


  .site-logo-name {
    font-size:
      23px;
  }


  /* 서브페이지 횡단 */

  .page-brand {
    padding:
      calc(
        env(
          safe-area-inset-top,
          0px
        ) +
        18px
      )
      18px
      0;

    font-size:
      22px;
  }


  /* 서브페이지 메뉴 */

  .archive-page
  .archive-header,

  .article-detail-page
  .article-archive-header,

  .about-page
  .about-header {
    padding:
      18px
      18px
      14px !important;
  }


  .site-menu {
    width:
      100%;

    padding:
      90px
      20px
      30px;
  }


  .site-menu a {
    font-size:
      30px;
  }


  .category-navigation {
    gap:
      var(
        --category-menu-gap
      );
  }


  .category-link {
    font-size:
      var(
        --category-menu-size
      );
  }
}

/* =========================================================
   Galaxy S8+ 등 좁은 모바일
   ABOUT / INDEX / ARTICLE 공통 상단바
========================================================= */

@media (max-width: 380px) {

  body .archive-filter-all {
    font-size: 38px !important;
  }


  body .archive-filter-items {
    gap: 6px !important;
  }


  body .archive-filter.is-open
  .archive-filter-items {
    margin-left: 9px !important;
  }


  body .archive-filter-items a {
    font-size: 16px !important;
  }


  body .archive-filter-toggle {
    flex:
      0
      0
      20px !important;

    width: 20px !important;
    min-width: 20px !important;

    height: 24px !important;

    margin-left: 6px !important;
  }


  body .archive-filter-toggle span {
    width: 9px !important;
    height: 9px !important;
  }
}

/* =========================================================
   모바일 서브페이지 횡단
   오프닝 횡단과 완전히 동일하게
========================================================= */

@media (max-width: 767px) {

  body.archive-page .page-brand,
  body.article-detail-page .page-brand,
  body.about-page .page-brand {
    padding:
      calc(
        env(safe-area-inset-top, 0px) +
        20px
      )
      22px
      0 !important;

    font-size:
      23px !important;

    font-weight:
      700;

    line-height:
      1;

    letter-spacing:
      0 !important;
  }
}

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

@media (
  prefers-reduced-motion:
  reduce
) {

  .site-menu,
  .site-menu a,
  .category-link {
    transition:
      none;
  }
}