/* site-common section-page-head · subnav — TI 셸(매거진·오오극장) 오버라이드 */

.ti .mz-panel .section-page-head__title,
.ti .sub-scroll .section-page-head__title {
  color: var(--text, var(--ti-text-strong, #0a0a0a));
}

.ti .mz-panel .section-page-subnav a,
.ti .sub-scroll .section-page-subnav a {
  border-radius: 0;
  text-decoration: none;
}

.ti .mz-panel .section-page-subnav a:hover:not(.is-current):not(.is-placeholder),
.ti .mz-panel .section-page-subnav a:focus-visible:not(.is-current):not(.is-placeholder),
.ti .sub-scroll .section-page-subnav a:hover:not(.is-current):not(.is-placeholder),
.ti .sub-scroll .section-page-subnav a:focus-visible:not(.is-current):not(.is-placeholder) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ti .mz-panel .section-page-subnav a.is-current,
.ti .sub-scroll .section-page-subnav a.is-current {
  color: #fff;
  background: #1a1a1a;
  border-color: #1a1a1a;
}

.ti .mz-panel .section-page-head__rule,
.ti .sub-scroll .section-page-head__rule {
  border-top-color: #c8c8c8;
}

.ti .mz-panel .section-page-head__row {
  display: block;
}

.ti .mz-panel .section-page-head__rule {
  margin: 12px 0 0;
  border-top-color: #e2e2e2;
}

.ti .mz-panel .section-page-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
  margin-top: 12px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.ti .sub-scroll .section-page-head {
  margin-bottom: 20px;
}

.ti .sub-scroll .section-page-head__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 10px;
}

.ti .sub-scroll .section-page-head__title {
  color: var(--ti-text-strong, #0a0a0a);
}

.ti .sub-scroll .section-page-subnav {
  width: 100%;
  justify-content: flex-end;
}

@media (max-width: 820px) {
  .ti .sub-scroll .section-page-subnav {
    flex-wrap: nowrap;
    gap: 3px 4px;
    justify-content: flex-end;
  }

  .ti .sub-scroll .section-page-subnav a {
    padding: 5px 7px;
    font-size: 0.76rem;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .ti .sub-scroll .section-page-subnav {
    gap: 2px 3px;
  }

  .ti .sub-scroll .section-page-subnav a {
    padding: 4px 5px;
    font-size: clamp(0.68rem, 2.6vw, 0.74rem);
  }
}