/*
 * 신검황 CBT 이벤트 공통 보정 CSS
 * big_banner.css / bombasic.css와 페이지 전용 CSS 다음에 로드합니다.
 * 실제 서비스의 중첩 문서에서도 동작하도록 본문 래퍼 .sink-cbt-event를 기준으로 합니다.
 */

.sink-cbt-event,
.sink-cbt-event * {
  box-sizing: border-box;
}

/*
 * 포털 CSS가 p/a/button 등에 Malgun Gothic을 직접 지정하면 부모의 글꼴 상속이 끊긴다.
 * 이벤트 일반 문구에는 동일한 산세리프 스택을 직접 적용한다.
 * .brush, .sect .no 등 제목용 명조 규칙은 선택자 우선순위가 더 높아 그대로 유지된다.
 */
.sink-cbt-event,
.sink-cbt-event :where(
  div, section, header, footer, nav, main, article,
  h1, h2, h3, h4, h5, h6, p, span, em, strong, b,
  ul, ol, li, dl, dt, dd, table, th, td,
  form, fieldset, legend, label, input, select, textarea, button
) {
  font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* 포털 공통 CSS의 숨김·들여쓰기·고정 행간을 이벤트 영역에서 해제 */
.sink-cbt-event :where(
  div, section, header, footer, nav, main, article,
  h1, h2, h3, h4, h5, h6, p, ul, ol, li,
  dl, dt, dd, table, tbody, thead, tfoot, tr, th, td,
  form, fieldset, legend, label, button, input, textarea
) {
  text-indent: 0;
}

.sink-cbt-event a,
.sink-cbt-event a:link,
.sink-cbt-event a:visited,
.sink-cbt-event a:hover,
.sink-cbt-event a:active {
  font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  text-indent: 0;
}

.sink-cbt-event .brush {
  font-family: 'HY헤드라인M', 'Nanum Myeongjo', 'Batang', serif;
}

/* 순위 왕관·메달은 일반 한글 폰트가 아니라 컬러 이모지 글꼴로 렌더링 */
.sink-cbt-event .pod .crown,
.sink-cbt-event .pod .medal {
  display: block;
  overflow: visible;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  font-variant-emoji: emoji;
  font-weight: 400;
  text-align: center;
  text-indent: 0;
}

.sink-cbt-event .pod .crown {
  font-size: 30px;
  line-height: 1;
}

.sink-cbt-event .pod .medal {
  font-size: 44px;
  line-height: 1;
}

.sink-cbt-event .pod.p1 .medal {
  font-size: 56px;
}

.sink-cbt-event button,
.sink-cbt-event input,
.sink-cbt-event select,
.sink-cbt-event textarea {
  text-indent: 0;
}

.sink-cbt-event img {
  max-width: 100%;
  border: 0;
}

/* 페이지 공통 구성 요소 */
.sink-cbt-event .wrap {
  width: auto;
  max-width: 1180px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}

.sink-cbt-event .sect {
  display: block;
  padding: 74px 0 0;
  text-align: center;
  text-indent: 0;
}

.sink-cbt-event .sect .desc {
  display: block;
  margin: 20px 0 0;
  padding: 0;
  color: #b6ab99;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.8;
  text-align: center;
  text-indent: 0;
}

.sink-cbt-event .sect .desc b {
  color: var(--ice, #97d1e0);
}

/* bombasic.css의 a:visited 규칙이 버튼 글자색·크기를 바꾸지 못하게 고정 */
.sink-cbt-event a.cta,
.sink-cbt-event a.cta:link,
.sink-cbt-event a.cta:visited,
.sink-cbt-event a.cta:hover,
.sink-cbt-event a.cta:active {
  display: block;
  width: 340px;
  margin: 36px auto 0;
  padding: 20px 0;
  color: #fff;
  font-family: inherit;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  cursor: pointer;
  background: linear-gradient(180deg, #f0512f, #c62d18);
  border: 1px solid rgba(255, 160, 130, 0.45);
  box-shadow: 0 12px 28px rgba(232, 69, 42, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.sink-cbt-event a.cta:hover {
  color: #fff;
  filter: brightness(1.06);
}

.sink-cbt-event a.cta:active {
  color: #fff;
  transform: scale(0.98);
}

/* 탭 링크도 방문 여부와 관계없이 같은 모양 유지 */
.sink-cbt-event .tabs a,
.sink-cbt-event .tabs a:link,
.sink-cbt-event .tabs a:visited {
  font-family: inherit;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
}

.sink-cbt-event .tabs a:not(.on),
.sink-cbt-event .tabs a:not(.on):visited {
  color: #9a9186;
}

.sink-cbt-event .tabs a.on,
.sink-cbt-event .tabs a.on:visited {
  color: #fff;
}

/* 페이지별 동작 버튼: 포털의 button/a 공통 숨김 규칙만 해제 */
.sink-cbt-event :where(.pick, .copy, .get, .rb) {
  text-indent: 0;
}

/* 이벤트 내부 문단·목록은 외부의 display/overflow 숨김 규칙에서 보호 */
.sink-cbt-event :where(.sect, .panel, .notice, .guide, .side, .cps, .cpfoot, .ft) p,
.sink-cbt-event :where(.sect, .panel, .notice, .guide, .side, .cps, .cpfoot, .ft) ul,
.sink-cbt-event :where(.sect, .panel, .notice, .guide, .side, .cps, .cpfoot, .ft) li {
  overflow: visible;
  text-indent: 0;
}

@media (max-width: 760px) {
  .sink-cbt-event .wrap {
    padding-right: 14px;
    padding-left: 14px;
  }

  .sink-cbt-event .sect {
    padding-top: 48px;
  }

  .sink-cbt-event a.cta,
  .sink-cbt-event a.cta:link,
  .sink-cbt-event a.cta:visited {
    width: min(340px, 100%);
  }
}