/* =========================================================
   ABOUT 페이지 기본
========================================================= */

.about-page {
  min-height: 100vh;
  min-height: 100dvh;

  margin: 0;

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

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


/* =========================================================
   ABOUT 고정 상단
   횡단 + 카테고리 메뉴
========================================================= */

.about-page
.about-header {
  position: fixed;

  top: 0;
  left: 0;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  gap: 14px;

  width: 100%;

  padding:
    26px
    44px
    18px;

  background-color: #ffffff;

  pointer-events: auto;
}


/* =========================================================
   ABOUT 상단 횡단
========================================================= */

.about-page
.about-header
.page-brand {
  position: static;

  display: block;

  width: auto;

  margin: 0;
  padding: 0;

  color: #111111;

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

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

  letter-spacing: -0.03em;

  white-space: nowrap;
}


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

.about-page
.about-header
.archive-filter {
  position: relative;

  flex: 0 0 auto;

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

  margin: 0;
  padding: 0;
}

.about-page
.archive-filter.is-open
.archive-filter-items {
  opacity: 1;
}
/* =========================================================
   ABOUT 전체
   상단바 바로 아래에서 시작
========================================================= */

.about-main {
  width: 100%;

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

  padding:
    34px
    var(--page-padding)
    80px;

  background-color: #ffffff;
}


.about-content {
  width:
    min(
      100%,
      760px
    );
  max-width: 760px;
  margin:
    0
    auto;
}
/* =========================================================
   큰 ABOUT 제목
========================================================= */

.about-page-title {
  margin:
    0
    0
    clamp(
      48px,
      5vw,
      68px
    );

  padding: 0;

  color: #0f9ed5;

  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-align: left;
}


/* =========================================================
   ABOUT 본문 공통
========================================================= */

.about-introduction,
.about-section p {
  margin: 0;

  padding: 0;

  color: #111111;

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

  font-size:
    clamp(
      17px,
      1.2vw,
      21px
    );

  font-weight: 500;
  line-height: 1.75;
  letter-spacing: -0.02em;

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

  /*
    한글 양끝맞춤
  */
  text-justify: inter-character;

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


/* =========================================================
   소개
========================================================= */

.about-introduction {
  width: 100%;

  margin-bottom:
    clamp(
      48px,
      4vw,
      58px
    );
}


/* =========================================================
   ABOUT 섹션
========================================================= */

.about-section {
  width: 100%;

  margin:
    0
    0
    clamp(
      48px,
      4vw,
      58px
    );

  padding: 0;
}

.about-section:last-of-type {
  margin-bottom: 0;
}


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

.about-section-title {
  display: flex;
  align-items: center;

  gap: 8px;

  margin:
    0
    0
    12px;

  padding: 0;

  color: #111111;

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

  font-size:
    clamp(
      17px,
      1.2vw,
      21px
    );

  font-weight: 500;
  line-height: 1.75;
  letter-spacing: -0.02em;

  word-break: keep-all;
}


/* =========================================================
   소제목 검정 네모
========================================================= */

.about-section-title
> span {
  display: block;

  width: 14px;
  min-width: 14px;
  height: 14px;

  flex:
    0
    0
    14px;

  margin: 0;
  padding: 0;

  background-color: #111111;

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


/* =========================================================
   같은 섹션 안 문단 간격
========================================================= */

.about-section
p + p {
  margin-top:
    clamp(
      32px,
      2.7vw,
      40px
    );
}


/* =========================================================
   번호 문단
========================================================= */

.about-numbered-paragraph {
  margin: 0;
}

.about-number {
  margin-left: 0.28em;

  font-size: inherit;
  font-weight: inherit;
}

.about-number:first-child {
  margin-left: 0;
}


/* =========================================================
   참고문헌
   문장. ■
========================================================= */

.about-section
.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;

  flex:
    0
    0
    14px;

  line-height: 0;
}


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

.about-page
button.footnote-marker {
  display: block;

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

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

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

  background-color:
    #0f9ed5 !important;

  border: 0 !important;
  border-radius: 4px !important;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  outline: none;

  font-size: 0 !important;
  line-height: 0 !important;
}

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

  outline-offset: 2px;
}


/* =========================================================
   참고문헌 팝오버
========================================================= */

.about-section
.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
    );
}

.about-section
.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%);
}

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


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

.about-footer {
  width: 100%;

  margin-top: 46px;

  padding: 0;
}


/* =========================================================
   날짜
   선 위 오른쪽
========================================================= */

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

  margin: 0;
  padding: 0;

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

  font-size:
    clamp(
      17px,
      1.2vw,
      21px
    );
  font-weight: 500;
  line-height: 1.5;

  text-align: right;
}


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

.about-footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
  padding-top: 18px;

  border-top:
    1px solid #111111;
}


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

.about-back-link {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  flex: 0 0 auto;
  margin: 0; padding: 0;

  color: #111111;

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

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

  text-decoration: none;
}

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

  display: block;

  width: 9px;
  height: 9px;

  flex:
    0
    0
    9px;

  background-color: #111111;

  border-radius: 3px;
}


/* =========================================================
   발행인 / 웹디자인
========================================================= */

.about-publication-info {
  margin: 0;
  padding: 0;

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

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

  text-align: right;
}

.about-publication-info p {
  margin: 0;
}

.about-publication-info p + p {
  margin-top: 2px;
}

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

@media (max-width: 767px) {

  .about-page .about-header {
    position: fixed;

    top: 0;
    left: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;

    width: 100%;

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

    background-color: #ffffff;
  }

  .about-page  .about-header
  .page-brand {
    position: static;

    width: auto;

    margin: 0;
    padding: 0;

    font-size: 22px;
    line-height: 1;
  }

    .about-main {
    padding:
      26px
      20px
      58px;
  }
  .about-content {
    width: 100%;

    margin:
      0
      auto;
  }

.about-page .footnote-popover {
  position: absolute;

  top:
    calc(
      100% +
      9px
    );

  left: 50%;

  z-index: 100;

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

  max-width:
    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.6;

  letter-spacing: -0.01em;

  text-align: left;

  white-space: normal;

  word-break: keep-all;

  overflow-wrap: anywhere;

  transform:
    translateX(-50%);

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


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


/* 모바일 */

@media (max-width: 767px) {
  .about-page
  .footnote-popover {
    width:
      min(
        240px,
        calc(
          100vw -
          32px
        )
      );

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

    white-space: normal;

    word-break: keep-all;

    overflow-wrap: anywhere;
  }
}

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


  .about-page-title {
    margin-bottom: 38px;

    font-size: 42px;
    line-height: 1;
  }

  .about-introduction,
  .about-section p,
  .about-section-title {
    font-size:
      clamp(
        16px,
        4.3vw,
        18px
      );

    line-height: 1.68;
  }

  .about-introduction,
  .about-section {
    margin-bottom: 40px;
  }

  .about-section
  p + p {
    margin-top: 30px;
  }

  .about-section-title {
    gap: 6px;

    margin-bottom: 10px;
  }

  .about-section-title
  > span {
    width: 10px;
    min-width: 10px;
    height: 10px;

    flex-basis: 10px;

    border-radius: 3px;
  }

  .about-section
  .footnote-wrap {
    width: 10px;
    height: 10px;

    margin-left: 5px;

    flex-basis: 10px;
  }

  .about-page
  button.footnote-marker {
    width: 10px !important;
    min-width: 10px !important;
    max-width: 10px !important;

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

    border-radius:
      3px !important;
  }

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

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

    font-size: 11px;
    line-height: 1.5;
  }

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

  .about-footer-date {
    display: flex;

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

    width: 100%; 

    min-height: 50px;
    
    margin: 0;

    font-size:
    clamp(
      16px,
      4.3vw,
      18px
    );
  }

  .about-publication-info {
    font-size: 11px;
  }

  .about-footer-bottom {
    margin-top: 52px;

    padding-top: 15px;
  }

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

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

    flex-basis: 9px;
  }
}


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

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