/* ==========================================================================
   KOKTOON E&M — 테마 보조 스타일 (Bricks child)
   --------------------------------------------------------------------------
   1. 다크 모드 변수 오버라이드 ([data-theme="dark"])
   2. 베이스 리셋 보조 (Bricks 리셋에 없는 항목)
   ========================================================================== */

/* ---------------------------------------------------------------
   1. 다크 모드 — 디자인 토큰 오버라이드 (globals.css 3섹션과 동일)
   --------------------------------------------------------------- */
html[data-theme='dark'] {
  --color-bg: #171717;
  --color-bg-soft: #242424;
  --color-bg-raised: #242424;
  --color-line: #3d3d3d;
  --color-line-soft: #333333;
  --color-line-strong: #555555;

  --color-primary: #fef08c;
  --color-primary-press: #fff7bf;
  --color-on-primary: #171717;

  --color-text-strong: #ffffff;
  --color-text: #fbfbfb;
  --color-text-sub: #dfdfdf;
  --color-text-muted: #c1c1c1;
  --color-text-faint: #a5a5a5;

  --color-header-bg: rgba(23, 23, 23, 0.9);
  --color-focus: #81bfee;

  --color-sns-bg: #c1c1c1;
  --color-sns-icon: #171717;
}

body {
  transition: color 350ms ease, background-color 350ms ease;
}

/* 테마 토글 아이콘 스왑 */
.theme-toggle .icon-sun {
  display: none;
}
html[data-theme='dark'] .theme-toggle .icon-sun {
  display: block;
}
html[data-theme='dark'] .theme-toggle .icon-moon {
  display: none;
}
html[data-theme='dark'] .logo__dot {
  outline: 1px solid rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------------------------
   2. 베이스 보조 (globals.css 6·7섹션 중 Bricks 미커버 항목)
   --------------------------------------------------------------- */
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}
body {
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--color-bg);
}
html body {
  background-color: var(--color-bg);
}
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-break: keep-all;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
summary {
  cursor: pointer;
}
summary::-webkit-details-marker,
summary::marker {
  display: none;
  content: '';
}
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}

/* 플레이스홀더 공통 */
.ph {
  background-color: var(--color-bg-soft);
  overflow: hidden;
  position: relative;
}

/* 스크린리더 전용 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   3. Bricks 변환 보정
   ========================================================================== */

/* 섹션(flex, align-items:center) 안 컨테이너가 내용폭으로 수축되는 것 방지 */
.brxe-section > .container {
  width: 100%;
}

/* --------------------------------------------------------------------------
   태블릿/모바일 여백 보정
   - 헤더(64px, fixed)가 콘텐츠 상단 여백을 가리지 않도록
     첫 섹션/본문의 상단 패딩을 헤더 높이 + 여유로 확보
   - 모바일에서 컨테이너 좌우 패딩 24px → 16px (푸터 포함, 헤더 제외)
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .brxe-section.featured.featured,
  .brxe-section.page-top.page-top,
  .brxe-section.map-section.map-section,
  .brxe-section.article-view.article-view {
    padding-top: 100px;
  }
}
@media (max-width: 640px) {
  .brxe-section.featured.featured,
  .brxe-section.page-top.page-top,
  .brxe-section.map-section.map-section,
  .brxe-section.article-view.article-view {
    padding-top: 88px;
  }
  .brxe-div.container.container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 리스트 마커 제거 */
ul,
ol {
  list-style: none;
}
.gnb__list,
.gnb__sub,
.footer__links,
.footer__sns {
  padding: 0;
  margin: 0;
}

/* 원본 <button> 요소의 UA 기본 배경 제거 */
button.brxe-div {
  background-color: transparent;
  border: 0;
  padding: 0;
}

/* 공지사항 탭 — Bricks 버튼 기본 스타일 리셋 */
.bricks-button.tabs__tab {
  background-color: transparent;
  border: 0;
  padding: 0;
}

/* 게시글 리스트 우측 쉐브론 (원본이 CSS 의사요소 방식 — 변환에서 누락되어 보강) */
.article-item::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 16px;
  background-color: var(--color-text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M1 1l7 7-7 7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M1 1l7 7-7 7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 히어로 multiply 틴트 오버레이 (변환에서 누락되어 보강) */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-hero-overlay);
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}

/* 콕쿤 BI 박스 그라디언트 (변환에서 누락되어 보강) */
.branding__box {
  background: linear-gradient(107deg, #fff000 20.78%, #ffdc00 97.44%);
}

/* ==========================================================================
   4. SVG 아이콘 보정
   ========================================================================== */

/* 변환 오류 수정: 사업자 정보 쉐브론이 닫힌 상태에서 180도 회전된 채 저장됨.
   기본은 0도, <details> 펼침 시에만 180도 (원본 동작). */
.footer__biz-summary svg {
  transform: none;
}
.footer__biz[open] .footer__biz-summary svg {
  transform: rotate(180deg);
}