@charset "UTF-8";


/*---------------------------------------------------------------*\
$ article_page
\*---------------------------------------------------------------*/

#article_page {
  position: relative;
}

#article_page .article_shell {
  width: min(calc(100% - 120px), 1080px);
  margin: 0 auto;
}


/*---------------------------------------------------------------*\
$ article_hero
\*---------------------------------------------------------------*/

#article_hero {
  border-bottom: 1px solid var(--color_border_subtle);
}

#article_hero .article_shell {
  padding: 72px 0 80px;
}

#article_hero .article_badge {
  width: fit-content;
  font-size: 15px;
  border-radius: 80px;
  padding: 12px 16px;
  color: var(--color_white);
  background: var(--color_orange);
  box-shadow:
    0 0 16px rgba(255, 120, 0, 0.14),
    -5px 6px 12px rgba(255, 107, 0, 0.1),
    inset -2px 2px 3px rgba(255, 255, 255, 0.35);
}

#article_hero .article_hero_text .heading {
  font-size: 40px;
  margin: 20px 0 0 0;
}


/*---------------------------------------------------------------*\
$ article_breadcrumb
\*---------------------------------------------------------------*/

#article_breadcrumb {
  padding: 20px 0 0;
}

#article_breadcrumb .article_breadcrumb_list {
  gap: 8px;
}

#article_breadcrumb .article_breadcrumb_list * {
  font-size: 12px;
}

#article_breadcrumb .article_breadcrumb_list li {
  gap: 8px;
  color: #999;
}

#article_breadcrumb .article_breadcrumb_item {
  gap: 8px;
}

#article_breadcrumb .article_breadcrumb_sep {
  color: #ccc;
  font-size: 14px;
}

#article_breadcrumb .article_breadcrumb_list li a {
  color: var(--color_accent);
}

#article_breadcrumb .article_breadcrumb_list li .summary {
  color: #888;
  font-size: 12px;
}


/*---------------------------------------------------------------*\
$ article_back_to_top
\*---------------------------------------------------------------*/

#article_page .article_top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  color: var(--color_white);
  background: var(--color_orange);
  box-shadow:
    0 0 16px rgba(255, 120, 0, 0.14),
    -6px 8px 12px rgba(255, 107, 0, 0.1),
    inset -2px 2px 3px rgba(255, 255, 255, 0.35);
  font-size: 20px;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  z-index: 130;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#article_page .article_top.is_visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/*---------------------------------------------------------------*\
$ article_main
\*---------------------------------------------------------------*/

#article_main {
  padding: 56px 0 140px 0;
}

#article_main .article_layout {
  gap: 80px;
}

#article_main .article_toc_wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 48px;
  align-self: flex-start;
  width: 260px;
  flex-shrink: 0;
}

#article_main .article_toc_list {
  gap: 2px;
}

#article_main .article_toc_button {
  width: 100%;
  border-radius: 8px;
  padding: 14px 12px;
  text-align: left;
  background: transparent;
  font-size: 14px;
  color: #888;
  line-height: 1.5;
  transition: color 0.2s ease, background-color 0.2s ease;
}

#article_main .article_toc_button:hover {
  color: #555;
}

#article_main .article_toc_button.is_active {
  color: var(--color_accent);
  background-color: var(--color_off_white);
  font-weight: 600;
}

#article_main .article_body_wrap {
  width: 100%;
  font-feature-settings: "palt" 0;
}

#article_main .article_intro {
  margin: 0 0 72px;
}

#article_main .article_intro .subject {
  margin: 0 0 24px;
  font-size: 20px;
  line-height: 1.8;
}

#article_main .article_intro .description {
  margin: 0 0 16px;
}

#article_main .article_intro .description:last-child,
#article_main .article_answer_body .description:last-child {
  margin: 0;
}

#article_main .article_photo {
  margin: 0 0 72px;
}

#article_main .article_photo_image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

#article_main .article_image_marker {
  margin: 30px 0 90px;
  border-radius: var(--radius_10);
  padding: 16px 20px;
  background: #f2f4f9;
  box-shadow: var(--shadow_article_neu);
}

#article_main .article_image_note {
  color: #888;
  font-size: 14px;
}

#article_main .article_block {
  margin: 0 0 72px;
}

#article_main .article_heading_row {
  gap: 16px;
  margin: 0 0 30px;
}

#article_main .article_index {
  width: 52px;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  border-radius: var(--radius_10);
  color: var(--color_white);
  background-color: var(--color_orange);
  box-shadow:
    0 0 14px rgba(255, 120, 0, 0.14),
    -5px 6px 12px rgba(255, 107, 0, 0.1),
    inset -2px 2px 3px rgba(255, 255, 255, 0.35);
  text-align: center;
  line-height: 52px;
}

#article_main .article_heading_row .subject {
  font-size: 20px;
}

#article_main .article_block_body {
  margin: 0 0 0 48px;
}

#article_main .article_question_box {
  border-radius: var(--radius_10);
  padding: 20px;
  background: #f2f4f9;
  box-shadow: var(--shadow_article_neu);
}

#article_main .article_question_box .title {
  line-height: 1.8;
}

#article_main .article_answer {
  margin: 40px 0 0 0;
}

#article_main .article_answer_head {
  gap: 10px;
  margin: 0 0 12px;
}

#article_main .article_answer_mark {
  width: 32px;
  aspect-ratio: 1/1;
  border-radius: 1000px;
  color: var(--color_white);
  background: var(--color_orange);
  box-shadow:
    0 0 12px rgba(255, 120, 0, 0.14),
    -4px 5px 10px rgba(255, 107, 0, 0.1),
    inset -2px 2px 3px rgba(255, 255, 255, 0.35);
  text-align: center;
  font-family: var(--font-inter-tight), sans-serif;
  font-size: 14px;
  line-height: 32px;
}

#article_main .article_answer_head .summary {
  color: var(--color_accent);
  font-size: 15px;
}

#article_main .article_answer_body {
  margin: 0 0 0 16px;
  padding: 0 0 0 24px;
  border-left: 1px solid var(--color_border_subtle);
}

#article_main .article_note {
  border-radius: 10px;
  margin: 0 0 80px;
  padding: 40px;
  background: #f2f4f9;
  box-shadow: var(--shadow_article_neu);
}

#article_main .article_note_head {
  gap: 12px;
  margin: 0 0 16px;
}

#article_main .article_note .description {
  color: #777;
}

#article_main .article_share {
  border-top: 1px solid var(--color_border_subtle);
  border-bottom: 1px solid var(--color_border_subtle);
  padding: 32px 0;
  gap: 20px;
}

#article_main .article_share_list {
  gap: 16px;
}

#article_main .article_share_list button {
  width: 56px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  color: #999;
  background: #f2f4f9;
  box-shadow: var(--shadow_article_neu_btn);
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

#article_main .article_share_list button:hover {
  color: var(--color_orange);
  box-shadow: var(--shadow_article_neu_btn_hover);
}

#article_main .article_share_list button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

#article_main .article_back_wrap {
  margin: 40px 0 0;
}

#article_main .article_back_button {
  gap: 8px;
  min-width: 260px;
  border-radius: 80px;
  height: 64px;
  color: var(--color_white);
  background: var(--color_orange);
  box-shadow:
    0 0 18px rgba(255, 120, 0, 0.16),
    -6px 8px 12px rgba(255, 107, 0, 0.1),
    inset -2px 2px 3px rgba(255, 255, 255, 0.35);
  font-size: 16px;
  transition: filter 0.2s ease;
}

#article_main .article_back_button:hover {
  filter: brightness(1.08);
}

#article_main .detail {
  font-size: 20px;
}


@media screen and (max-width: 1080px) {

  #article_page .article_shell {
    width: min(calc(100% - 80px), 1080px);
  }

  #article_main .article_layout {
    gap: 30px;
  }
}


@media screen and (max-width: 960px) {

  #article_page .article_shell {
    width: min(calc(100% - 70px), 1080px);
  }
}


@media screen and (max-width: 860px) {

  #article_main .article_layout {
    gap: 0;
  }

  #article_main .article_toc_wrap {
    display: none;
  }

  #article_main .article_body_wrap {
    max-width: none;
  }
}


@media screen and (max-width: 600px) {

  #article_main {
    padding: 32px 0 80px 0;
  }

  #article_page .article_shell {
    width: min(calc(100% - 52px), 1200px);
  }

  #article_main .article_heading_row .subject {
    font-size: 16px;
  }

  #article_hero .article_shell {
    padding: 32px 0 40px;
  }

  #article_hero .article_hero_text .heading {
    font-size: 21px;
  }

  #article_hero .article_badge {
    font-size: 11px;
    padding: 8px 12px;
  }

  #article_main .article_intro {
    margin: 0 0 56px;
  }

  #article_main .article_photo {
    margin: 0 0 56px;
  }

  #article_main .article_image_marker {
    margin: 24px 0 72px;
    padding: 14px 16px;
  }

  #article_main .article_block {
    margin: 0 0 56px;
  }

  #article_main .article_heading_row {
    margin: 0 0 24px;
    gap: 8px;
  }

  #article_main .article_note {
    margin: 0 0 40px;
    padding: 32px;
  }

  #article_main .article_share {
    padding: 24px 0;
  }

  #article_main .article_back_button {
    height: 56px;
    font-size: 14px;
  }

  #article_page .article_top {
    right: 16px;
    bottom: 16px;
  }

  #article_main .article_index {
    width: 36px;
    line-height: 36px;
  }

  #article_main .article_share .summary {
    font-size: 13px;
  }

  #article_main .article_question_box {
    padding: 14px;
  }

  #article_main .detail {
    font-size: 15px;
  }

  #article_main .article_block_body {
    margin: 0;
  }

  #article_main .article_answer_head .summary {
    font-size: 13px;
  }
}