/* =========================================================
   기사 상세 페이지
========================================================= */

.article-detail-page {
  min-height: 100vh;
  min-height: 100dvh;

  margin: 0;

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


/* =========================================================
   ARTICLE 상단

   INDEX의 상단 HTML 구조를 그대로 사용하되
   style.css의 fixed site-header만 기사 페이지에서 해제
========================================================= */

.article-detail-page
.article-archive-header {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  z-index: 1000;

  display: block !important;

  width: 100%;

  margin: 0;

  padding:
    28px
    44px
    18px !important;

  background-color: #ffffff;

  pointer-events: auto !important;
}


/* =========================================================
   횡단

   INDEX와 동일한 위치 / 크기
========================================================= */

.article-detail-page
.page-brand {
  position: relative !important;

  top: auto !important;
  left: auto !important;

  z-index: 1100;

  display: block;

  width: 100%;

  margin: 0;

  padding:
    26px
    44px
    0 !important;

  background-color: #ffffff;

  color: #111111;

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

  font-size: 27px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: -0.03em;

  white-space: nowrap;
}


/* =========================================================
   상단 카테고리 메뉴

   INDEX처럼 왼쪽부터 시작
========================================================= */

.article-detail-page
.archive-filter {
  position: relative !important;

  display: flex !important;

  align-items: flex-start !important;
  justify-content: flex-start !important;

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

  margin: 0 !important;
  padding: 0 !important;

  white-space: nowrap;
}


/* 기사에서는 기본 펼침 */

.article-detail-page
.archive-filter.is-open
.archive-filter-items {
  opacity: 1;
}


/* =========================================================
   기사 전체 영역
========================================================= */

.article-page {
  width: 100%;

  min-height: 100vh;
  min-height: 100dvh;

  padding:
    clamp(
      72px,
      6vw,
      105px
    )
    var(--page-padding)
    100px;

  background-color: #ffffff;

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


.article-detail {
  width: 100%;

  max-width:
    var(--content-width);

  margin:
    0
    auto;
}


/* =========================================================
   로딩 / 오류
========================================================= */

.article-loading,
.article-error {
  margin: 0;

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

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


/* =========================================================
   기사 제목
========================================================= */

.article-header {
  width: 100%;

  margin:
    0
    0
    clamp(
      58px,
      6vw,
      92px
    );

  text-align: center;
}


.article-title {
  display: inline-block;

  max-width:
    min(
      100%,
      1100px
    );

  margin: 0;

  color: #111111;

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

  font-size:
    clamp(
      28px,
      2.55vw,
      44px
    );

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

  letter-spacing: -0.035em;

  text-align: center;

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


/* =========================================================
   이미지 있는 기사
========================================================= */

.article-layout--with-image {
  display: grid;

  grid-template-columns:
    minmax(0, 900px)
    minmax(280px, 1fr);

  column-gap:
    clamp(
      70px,
      8vw,
      150px
    );

  align-items: start;

  width: 100%;
}


/* =========================================================
   이미지 없는 기사

   ABOUT처럼 760px 중앙
========================================================= */

.article-layout--text-only {
  display: block;

  width: 100%;
}


.article-layout--text-only
.article-copy {
  width:
    min(
      100%,
      760px
    );

  max-width: 760px;

  margin:
    0
    auto;
}


/* =========================================================
   본문 영역
========================================================= */

.article-copy {
  width: 100%;
  min-width: 0;

  max-width: 900px;

  margin: 0;

  justify-self: start;

  text-align: left;
}


/* =========================================================
   본문
========================================================= */

.article-body {
  width: 100%;

  margin: 0;
  padding: 0;

  color: #111111;

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

  font-size:
    clamp(
      17px,
      1.25vw,
      24px
    );

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

  letter-spacing: -0.02em;

  text-align: justify;
  text-align-last: left;

  text-justify: inter-character;

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


/* =========================================================
   본문 문단
========================================================= */

.article-body > p {
  margin:
    0
    0
    38px;
}


.article-body > p:first-child {
  margin-top: 0;
}


.article-body > p:last-child {
  margin-bottom: 0;
}


/*
  CMS에서 LEFT / CENTER / RIGHT / JUSTIFY를
  inline style로 저장했을 경우
  그 값을 그대로 존중합니다.
*/

.article-body
[style*="text-align: left"] {
  text-align: left !important;
  text-align-last: auto !important;
}


.article-body
[style*="text-align: center"] {
  text-align: center !important;
  text-align-last: auto !important;
}


.article-body
[style*="text-align: right"] {
  text-align: right !important;
  text-align-last: auto !important;
}


.article-body
[style*="text-align: justify"] {
  text-align: justify !important;

  text-align-last:
    left !important;

  text-justify:
    inter-character !important;
}


/* =========================================================
   CMS 작은 글씨
========================================================= */

.article-body
.cms-small-text {
  font-size: 0.78em;
}
/* =========================================================
   CMS 큰 글씨
========================================================= */

.article-body
.cms-large-text {
  font-size: 1.5em;
}
/* =========================================================
   CMS 부크크명조
========================================================= */

.article-body
.cms-bookk-font {
  font-family:
    "BookkMyungjo",
    serif;
}

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

.article-body h2 {
  margin:
    54px
    0
    24px;

  font-size:
    clamp(
      22px,
      1.65vw,
      30px
    );

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

  letter-spacing: -0.03em;

  word-break: keep-all;
}


/* =========================================================
   CMS 목록
========================================================= */

.article-body ul,
.article-body ol {
  margin:
    0
    0
    38px;

  padding-left: 1.5em;
}


.article-body li {
  margin-bottom: 10px;
}


/* =========================================================
   CMS 링크
========================================================= */

.article-body a {
  color: inherit;

  text-decoration: underline;

  text-underline-offset: 4px;
}


/* =========================================================
   인용문
========================================================= */

.article-quote,
.article-body blockquote {
  margin:
    0
    0
    48px;

  padding: 0;

  border: 0;

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


.article-quote p,
.article-body blockquote p {
  margin: 0;

  font-weight: 500;

  text-align: justify;
  text-align-last: left;
}


.article-quote cite,
.article-body blockquote cite {
  display: block;

  margin-top: 18px;

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

  text-align: right;
}


/* =========================================================
   오른쪽 이미지
========================================================= */

.article-visual {
  position: absolute;

  top: 0;
  right: 0;

  width:
    min(
      100%,
      520px
    );

  min-width: 0;

  margin: 0;
}


.article-image {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 5 / 3;

  object-fit: cover;

  background-color: #eeeeee;
}


.article-caption {
  margin-top: 10px;

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

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

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

  text-align: center;

  word-break: keep-all;
}


.article-image-source {
  display: inline;
}


/* =========================================================
   원칙 목록
========================================================= */

.article-principles {
  display: flex;
  flex-direction: column;

  gap: 20px;

  margin:
    48px
    0
    0;

  padding: 0;

  list-style: none;
}


.article-principles li {
  display: grid;

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

  column-gap: 8px;

  align-items: start;
}


.principle-number {
  font-size: 14px;
  line-height: 1.8;
}


.article-principles strong {
  display: block;

  font-weight: 600;
  line-height: 1.8;
}


.article-principles p {
  margin: 0;
}


/* =========================================================
   원칙 제목 + 각주
========================================================= */

.principle-heading {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  width: max-content;
  max-width: 100%;
}


/* =========================================================
   각주 래퍼

   문장. ■
========================================================= */

.footnote-wrap,
.article-body
.footnote-wrap {
  position: relative;

  display: inline-flex;

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

  width: 14px;
  height: 14px;

  margin:
    0
    0
    0
    6px;

  padding: 0;

  vertical-align: middle;

  line-height: 0;

  flex:
    0
    0
    14px;
}


/* =========================================================
   파란 네모
========================================================= */

.footnote-marker,
.article-body
.footnote-marker {
  display: block;

  width: 14px;
  min-width: 14px;
  max-width: 14px;

  height: 14px;
  min-height: 14px;
  max-height: 14px;

  margin: 0;
  padding: 0;

  background-color: #0f9ed5;

  border: 0;

  border-radius: 4px;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  outline: none;

  font-size: 0;
  line-height: 0;

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


.footnote-marker:focus-visible {
  outline:
    1px solid
    #0f9ed5;

  outline-offset: 2px;
}


/* =========================================================
   각주 팝오버
========================================================= */

.footnote-popover,
.article-body
.footnote-popover {
  position: absolute;

  top:
    calc(
      100% +
      9px
    );

  left: 50%;

  z-index: 100;

  width: max-content;

  max-width:
    min(
      420px,
      calc(
        100vw -
        40px
      )
    );

  padding:
    8px
    11px;

  background-color:
    rgba(
      0,
      0,
      0,
      0.82
    );

  color: #ffffff;

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

  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;

  letter-spacing: -0.01em;

  text-align: left;

  white-space: normal;

  transform:
    translateX(-50%);

  box-shadow:
    0
    4px
    14px
    rgba(
      0,
      0,
      0,
      0.14
    );
}


.footnote-popover::before {
  content: "";

  position: absolute;

  bottom: 100%;
  left: 50%;

  border-right:
    4px
    solid
    transparent;

  border-bottom:
    5px
    solid
    rgba(
      0,
      0,
      0,
      0.82
    );

  border-left:
    4px
    solid
    transparent;

  transform:
    translateX(-50%);
}


.footnote-popover[hidden] {
  display: none !important;
}


/* =========================================================
   작성자 + 한 줄 소개

   둘이 하나의 블록으로 함께 오른쪽 정렬
========================================================= */

.article-author-info {
  width:
    min(
      100%,
      520px
    );

  margin:
    46px
    0
    0
    auto;

  padding: 0;

  text-align: right;
}


/* 작성자 이름 */

.article-author-name {
  margin:
    0 !important;

  padding: 0;

  color: #111111;

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

  font-size:
    clamp(
      15px,
      1vw,
      18px
    );

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

  letter-spacing: -0.02em;

  text-align:
    right !important;

  text-align-last:
    right !important;
}


/* =========================================================
   작성자 한 줄 소개

   변경점:
   pre-line → normal
   나머지는 그대로
========================================================= */

.article-author-bio {
  width: 100%;

  margin:
    4px
    0
    0 !important;

  padding: 0;

  color: #111111;

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

  font-size:
    clamp(
      13px,
      0.9vw,
      16px
    ) !important;

  font-weight: 500;

  line-height:
    1.7 !important;

  letter-spacing: -0.02em;

  text-align:
    right !important;

  text-align-last:
    right !important;

  word-break: keep-all;

  overflow-wrap: break-word;

  white-space: normal !important;
}

.article-series {
  margin-top: 70px;
  }
  
  .article-series-title {
  margin-bottom: 22px;
}

.article-series-list {
  display: flex;
  flex-direction: column;

  gap: 10px;

  margin:
    0
    0
    36px;

  padding-left: 1.7em;
}

.article-series-item {
  line-height: 1.55;
}

/* =========================================================
   기사 하단
========================================================= */

.article-footer {
  width: 100%;

  margin-top: 30px;

  padding: 0;
}


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

.article-footer-date {
  width: 100%;

  margin:
    0
    0
    12px;

  padding: 0;

  color: #111111;

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

  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;

  text-align: right;
}


/* =========================================================
   선 + INDEX
========================================================= */

.article-footer-bottom {
  display: flex;

  align-items: flex-start;
  justify-content: flex-start;

  width: 100%;

  padding-top: 18px;

  border-top:
    1px
    solid
    #111111;
}


/* =========================================================
   ■ INDEX
========================================================= */

.back-link {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  flex:
    0
    0
    auto;

  color: #111111;

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

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

  text-decoration: none;
}


.back-link::before {
  content: "";

  display: block;

  width: 9px;
  height: 9px;

  flex:
    0
    0
    9px;

  background-color: #111111;

  border-radius: 3px;
}

/* =========================================================
   ARTICLE VIDEO
========================================================= */

.article-video {
  width: 100%;
  margin: 2rem 0;
  aspect-ratio: 16 / 9;
}

.article-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   ARTICLE MULTIPLE IMAGES
========================================================= */

.article-visuals {
  position: relative;

  width: 100%;
  min-width: 0;

  min-height: 1px;
}

.article-visuals .article-visual {
  margin: 0;
}

.article-visuals .article-image {
  display: block;

  width: 100%;
  height: auto;
}

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

@media (max-width: 767px) {

  /* =======================================================
     횡단
  ======================================================= */

  .article-detail-page
  .page-brand {
    position: relative !important;

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

    font-size: 22px;
  }


  /* =======================================================
     상단 메뉴

     fixed로 되돌리지 않음
  ======================================================= */

  .article-detail-page
  .article-archive-header {
    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

    display:
      block !important;

    width:
      100%;

    padding:
      20px
      18px
      14px !important;

    background-color:
      #ffffff;
  }


  .article-detail-page
  .archive-filter {
    display:
      flex !important;

    justify-content:
      flex-start !important;

    margin:
      0 !important;
  }

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


  /* =======================================================
     기사
  ======================================================= */

  .article-page {
    padding:
      52px
      18px
      60px;
  }


  .article-header {
    margin:
      0
      0
      38px;
  }


  .article-title {
    max-width: 100%;

    font-size:
      clamp(
        27px,
        7.6vw,
        34px
      );

    line-height: 1.28;
  }


  .article-layout--with-image {
    display: flex;

    flex-direction: column;

    gap: 38px;
  }


  .article-layout--text-only {
    display: block;
  }


  .article-layout--text-only
  .article-copy,
  .article-copy {
    width: 100%;
    max-width: none;

    margin:
      0
      auto;
  }


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

    line-height: 1.8;
  }


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


  /* =======================================================
     이미지
  ======================================================= */

.article-visuals {
  order: -1;

  display: flex;
  flex-direction: column;

  gap: 32px;

  width: 100%;
  max-width: none;

  margin: 0;
}


.article-visual {
  position: static;

  width: 100%;
  max-width: none;

  margin: 0;
}


.article-image {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 5 / 3;

  object-fit: cover;
}


.article-caption {
  margin-top: 10px;

  font-size: 11px;
}


  /* =======================================================
     각주
  ======================================================= */

  .footnote-wrap,
  .article-body
  .footnote-wrap {
    width: 10px;
    height: 10px;

    margin-left: 5px;

    flex-basis: 10px;
  }


  .footnote-marker,
  .article-body
  .footnote-marker {
    width: 10px;
    min-width: 10px;
    max-width: 10px;

    height: 10px;
    min-height: 10px;
    max-height: 10px;

    border-radius: 3px;
  }


  .footnote-popover,
  .article-body
  .footnote-popover {
    width:
      min(
        260px,
        calc(
          100vw -
          40px
        )
      );

    max-width:
      calc(
        100vw -
        40px
      );

    white-space: normal;
  }


  /* =======================================================
     작성자 + 소개
  ======================================================= */

  .article-author-info {
    width: 100%;

    margin-top: 52px;
  }


  .article-author-name {
    font-size: 15px;
  }


  .article-author-bio {
    margin-top:
      4px !important;

    font-size:
      13px !important;
  }

     .article-series {
  margin-top: 52px;
  }

  /* =======================================================
     하단
  ======================================================= */

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


  .article-footer-date {
    font-size: 11px;
  }


  .article-footer-bottom {
    padding-top: 15px;
  }


  .back-link {
    font-size: 12px;
  }


  .back-link::before {
    width: 9px;
    height: 9px;

    flex-basis: 9px;
  }
}

/* Galaxy S8+ - ARTICLE 네모 위치를 INDEX와 동일하게 */
@media (max-width: 380px) {

  .article-detail-page
  .archive-filter-toggle {
    transform: translateY(6px) !important;
  }

}

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

@media (
  prefers-reduced-motion:
  reduce
) {
  .footnote-marker,
  .footnote-popover {
    transition: none;
  }
}