/* ============================================================
 * /projects/* 포트폴리오 페이지 공통 오버라이드
 * layout.html 이 pageName == 'portfolio' 일 때만 로드
 * ------------------------------------------------------------
 *  1) 우상단 Home 버튼 숨김 (각 템플릿 산재된 .btn_home)
 *  2) 헤더 로고 사이즈 — 메인과 동일하게
 *  3) 푸터 다크 통일 (다른 페이지와 동일한 다크 푸터)
 *  4) 헤더 라이트 모드 (.on-light 클래스 추가 시 메뉴 폰트/로고 어둡게)
 * ============================================================ */

/* 1) Home 버튼 숨김 — 모든 변형 안전망 */
.btn_home,
.btn-home,
.home_btn,
.home-btn {
  display: none !important;
}

/* 2) 헤더 로고 — 메인 헤더와 동일 사이즈 */
header#header .header_container.n1 .logo {
  width: auto;
  height: auto;
}
header#header .header_container.n1 .logo a {
  display: inline-block;
}
header#header .header_container.n1 .logo a img {
  /* 메인과 동일: 로고 IMG 는 height:20px / width:auto (메인 .logo a img 규칙).
   * (과거 width:10rem 은 메인의 '컨테이너(.logo) width:10rem' 을 IMG 에 잘못 적용해
   *  로고가 메인보다 크게/비율 다르게 보이던 원인. 페이지 인라인 img{height:auto} 리셋을
   *  이기도록 !important 유지.) */
  height: 20px !important;
  width: auto !important;
  max-width: none;
  object-fit: contain;
}
header#header .header_container.n2 .logo a img {
  height: 20px !important;
  width: auto !important;
  max-width: none;
  object-fit: contain;
}

/* 3) 푸터 — 다크 모드 통일
 *    portfolio CSS가 다음을 화이트로 만들었을 가능성 차단
 *    배경 투명화 + 글자 흰색으로 부모 다크 배경 노출 */
/* #footer 자체에 다크 fallback 배경 + stacking context 강제 생성.
 *
 * 배경: 메인 footer 는 position:relative + z-index:auto 라 stacking context 미생성.
 *       그 상태에서 bg_video(position:absolute, z-index:-1) 는 footer 부모(body) 의
 *       stacking context 안의 z-index:-1 자리로 올라감. 메인은 footer 가 transparent
 *       라 영상이 그대로 비쳐 보임.
 *
 *       /projects/* 에서 footer 에 background:#111 만 주면 bg_video 가 footer 부모
 *       context 의 z-index:-1 에 있고, footer 본체는 그보다 위 stacking 레벨 → #111
 *       이 bg_video 를 덮어 영상/gif 가 보이지 않음 (실제로는 로드 중인데 가려짐).
 *
 * 해결: isolation:isolate 로 footer 에 자체 stacking context 강제 생성.
 *       → bg_video z-index:-1 이 footer 의 #111 위 레벨에 페인트됨 (CSS spec 상
 *         같은 stacking context 안의 음수 z-index 자식은 부모 background 위 페인트).
 *       정상 케이스: 영상+gif 가 footer 전체 덮음 → #111 안 보임 (메인과 동일).
 *       bg_video 로드 실패/지연: #111 fallback 노출 → ohc/cj/illumiel 의 인라인
 *       html{bg:white} 누출 차단 (이전 transparent → 흰 footer 자해 해결 유지). */
#wrap.sub_layout footer#footer.footer,
footer#footer.footer {
  background-color: #111 !important;
  background: #111 !important;
  isolation: isolate;
}
footer#footer.footer,
footer#footer.footer .txt_box,
footer#footer.footer .txt_box h2,
footer#footer.footer .txt_box h2 a,
footer#footer.footer .address,
footer#footer.footer .address p,
footer#footer.footer .sns_mark,
footer#footer.footer .sns,
footer#footer.footer .sns a,
footer#footer.footer .mark {
  color: #fff !important;
}
/* 푸터 bg_video / musign_3d gif가 정상 보이도록 보장 */
footer#footer.footer .bg_video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
footer#footer.footer .bg_video .musign_3d {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================================
 * 모바일 전용 보정
 *
 *   히스토리 (재정정):
 *   - 04a22c52 의 overscroll-behavior-y:none 만으로는 바닥 튕김 못 잡았음.
 *   - d6246646 에서 overscroll-behavior:none + touch-action:pan-y + min-height 추가
 *     했으나 자해 확인됨:
 *       * overscroll-behavior:none → pull-to-refresh 가 동작 안 함
 *       * touch-action:pan-y → 빠른/강한 드래그(가로 성분 포함) 를 거부 →
 *         사용자가 '튕긴다' 고 인식
 *     사용자 보고로 둘 다 자해 확정 → 본 turn 에서 revert.
 *
 *   진짜 원인 (cjcheiljedang/illumiel/ohc 의 '두번째 로드 + 스크롤 0 복귀'):
 *   - 글로벌 footer 의 gradient_bg.mp4 (~11MB) 다운로드가 window.load 를 10~30s
 *     지연시킴 (모바일 데이터 환경).
 *   - window.load 발화 시점에 동시 다발 layout 변경:
 *       (a) common.js: $('#header').prependTo('body') + .bg_video 클래스 토글
 *       (b) 페이지 자체 script: splitBigType() 가 headline/title/page-end-footer h2
 *           텍스트를 글자별 span 으로 *전부 재구성* (수백 개 노드 생성)
 *       (c) gsap.set(".split-text .char-inner", {yPercent:115, opacity:0}) →
 *           모든 char hidden, 부모 height 재계산
 *       (d) ScrollTrigger.create() 다수 → DOM 전체 측정
 *       (e) CDN Pretendard 폰트 swap-in (font-display:swap 기본)
 *   - 이 모든 게 동시에 일어나며 iOS Chrome 이 scroll position 을 0으로 리셋,
 *     사용자는 '두번째 로드 + 얇은 폰트' 로 인식.
 *
 *   조치:
 *      - revert: overscroll-behavior/touch-action/min-height — pull-to-refresh
 *        와 fast-drag 살림.
 *      - 유지: scroll-behavior:auto !important — inline smooth-scroll 차단.
 *        smooth-scroll 이 layout reflow 와 충돌해 위치 흔들리는 보조 원인 차단.
 *      - 유지: footer musign_3d gif object-fit:contain — 비율 보존.
 *
 *   추가: 페이지 자체 inline <style> 의 html { scroll-behavior: smooth } 가
 *      smooth-scroll 의 원인이지만 3개 파일 inline 수정보다는 cascade 마지막에
 *      위치한 본 override 에서 !important 로 차단하는 게 단순.
 * ============================================================ */
@media (max-width: 767px) {
  html {
    scroll-behavior: auto !important;
  }
  footer#footer.footer .bg_video .musign_3d {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-width: none !important;
  }
}

/* ============================================================
 * 4-pre) 글로벌 헤더를 메인과 100% 동일 스타일로 통일
 *
 *   문제: portfolio/mu_layout.css:44-53 의 전역 * 셀렉터가 모든 요소에
 *         다음 값을 *직접* 적용:
 *           font-family: 'Nanum Square'
 *           font-size: 14px
 *           color: #666
 *           letter-spacing: -0.5px
 *           line-height: 1.6
 *         → 헤더 자식 중 musign.min.css 에 별도 규칙이 없는 요소들이 모두
 *           이 값으로 덮임 (MENU 라벨, 구분자 '/', BROCHURE/CONTACT 색·간격 등).
 *
 *   해결: 2단 전략
 *   ① header#header 자체에 메인 기본값을 명시
 *      (specificity (0,1,0,1) > mu_layout '*' (0,0,0,0) 으로 header 요소 자체 복원)
 *   ② :where(header#header) *::* 로 모든 자식 요소의 위 5속성을 'inherit' 로 리셋
 *      (:where() 는 specificity 0 → '*' 와 동일 specificity. 단 cascade 순서상
 *       projects-override.css 가 mu_layout.css 보다 *나중에* 로드되므로 승리.
 *       동시에 .en (0,0,1,0), .menu li a (0,0,1,2),
 *       .header_container.pc ul li p (0,0,2,3) 등 더 specific 한 메인 규칙은
 *       그대로 살아남음 → 메인과 동일 결과)
 * ============================================================ */
/* 메인의 전역 *{...} 기본값을 헤더 범위에 '값 그대로' 복제.
 * 메인 헤더 폰트/자간/크기는 전역 * 규칙
 *   { font-family:AlbertSans,Pretendard; font-size:clamp(1.2rem,.677vw,1.3rem);
 *     line-height:1; letter-spacing:-0.05rem; font-weight:normal; color:#fff }
 * 에서 나옴. /projects/* 엔 이 * 가 헤더에 적용되지 않아(또는 과거 inherit 리셋이 덮어써)
 * 폰트가 달라졌었음 → 동일 값을 :where() (specificity 0) 로 직접 부여.
 * .en(letter-spacing:normal) · .menu li a · nav li clamp(…1.4rem) · bx_lab(font-weight:500)
 * 등 더 구체적인 메인 규칙은 그대로 승리 → 메인과 100% 동일 계산. */
header#header,
:where(header#header) *,
:where(header#header) *::before,
:where(header#header) *::after {
  font-family: 'AlbertSans', 'Pretendard', sans-serif;
  font-size: clamp(1.2rem, .677vw, 1.3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05rem;
  color: #fff;
}
/* (이전 BX LAB 안전망 height:1.9rem !important 제거 — :where() * 리셋이 이미
 * mu_layout * 의 line-height:1.6 누출을 차단하므로 musign.min.css 의 원본
 * 사이즈 규칙이 정상 작동. !important 강제가 메인보다 박스를 작게 만들던 자해.) */

/* 4) 헤더 라이트 모드 — JS가 흰 배경 섹션 감지 시 header에 .on-light 부여 */
header#header.on-light .header_container .menu li a,
header#header.on-light .header_container .en,
header#header.on-light .header_container .brochure,
header#header.on-light .header_container .btn_contact,
header#header.on-light .header_container p,
header#header.on-light .gnb_wrap .en,
header#header.on-light .gnb_wrap .link_contact a {
  color: #111 !important;
}
/* 로고 임시 처리: 흰색 SVG를 invert로 검정처럼.
 * 추후 다크 버전 로고 SVG가 제공되면 아래 filter 제거하고
 * .logo a img src 자체를 교체하는 방식으로 전환 권장.
 * 예) /img/front/main/musign_logo_dark.svg
 */
header#header.on-light .logo a img {
  filter: invert(1) brightness(0);
}
/* BX LAB 박스 배경/글자도 라이트 모드에 맞춤 */
header#header.on-light .bx_lab_link_box p {
  color: #111 !important;
}
/* 예외: BX LAB · CONTACT US 는 자체 배경(다크 pill / 블루 버튼)을 가진 버튼이라
 * on-light 에서도 글자를 항상 흰색으로 유지(다크 배경 위 가독성).
 * m-CMS(.bx_lab_link_box.n2 p)는 투명 배경이라 #111 그대로 둠.
 * 원본 규칙(.header_container .btn_contact 등)과 동등/상위 specificity + 후순위로 승리. */
header#header.on-light .header_container .btn_contact,
header#header.on-light .gnb_wrap .btn_contact,
header#header.on-light .header_container .bx_lab_link_box.n1 p,
header#header.on-light .gnb_wrap .bx_lab_link_box p {
  color: #fff !important;
}
/* 'MENU' 라벨(li 직계 p)만 40% 블랙으로 흐리게, 실제 메뉴 항목(PROJECTS 등)은 솔리드 블랙.
 * (메인 다크 헤더의 위계 'MENU'=rgba(255,255,255,.4) / 항목=솔리드 화이트 를 라이트에서 재현.
 *  .f_b > li > p 직계 셀렉터라 BX LAB·m-CMS(div 안의 p)는 매칭되지 않음.) */
header#header.on-light .header_container .f_b > li > p {
  color: rgba(0, 0, 0, .4) !important;
}
header#header.on-light .header_container .menu li a {
  color: rgba(0, 0, 0, 1) !important;
}
/* 메뉴 항목 사이 '/' 구분자(.menu li+li::before, content:"/")도 항목과 동일하게 솔리드 블랙.
 * li 의 가상요소라 .menu li a 규칙엔 안 잡혀 헤더 통일의 *::before{color:#fff} 가 남아
 * 흰 배경에서 안 보이던 것을 on-light 에서 반전. */
header#header.on-light .header_container .menu li + li::before {
  color: rgba(0, 0, 0, 1) !important;
}

/* ===== 모바일: 헤더 메뉴 패널·MENU 버튼·CONTACT 는 항상 흰색 =====
 * 모바일 햄버거 메뉴(.mo_gnb)는 다크(#000) 패널, CONTACT(.link_contact)는 컬러 버튼이라
 * on-light(.gnb_wrap .en / .link_contact a → #111)가 적용되면 다크 위 다크 글씨로 안 보임.
 * BX LAB 과 동일하게 항상 흰색 유지. (상위 specificity + !important + 후순위로 on-light 무력화) */
@media (max-width: 767px) {
  /* 메뉴 패널(.mo_gnb)·CONTACT 는 항상 흰색 (BX LAB 과 동일) */
  header#header .header_container.n2 .gnb_wrap .mo_gnb,
  header#header .header_container.n2 .gnb_wrap .mo_gnb a,
  header#header .header_container.n2 .gnb_wrap .mo_gnb .en,
  header#header .header_container.n2 .gnb_wrap .link_contact,
  header#header .header_container.n2 .gnb_wrap .link_contact a {
    color: #fff !important;
  }
  /* MENU 버튼은 닫힘 상태에선 on-light 따라 블랙 유지(위 always-white 에서 제외).
   * 패널 오픈(.menu_btn.on) 시엔 CLOSE 가 다크 패널 위라 흰색 + 좌상단 로고도 흰색(invert 해제). */
  header#header .header_container.n2 .menu_btn.on,
  header#header .header_container.n2 .menu_btn.on span { color: #fff !important; }
  header#header .header_container.n2:has(.menu_btn.on) .logo a img { filter: none !important; }
}

/* COMPANY BROCHURE 다운로드 아이콘 — 라이트 배경에서만 검정 머티리얼 심볼로 교체.
 * 기본(다크 헤더): 흰색 webp 아이콘. on-light(흰 배경): webp 숨기고 검정 머티리얼 심볼 표시. */
.brochure_li .brochure-dl-dark { display: none; }
header#header.on-light .brochure_li .brochure img { display: none; }
header#header.on-light .brochure_li .brochure-dl-dark {
  display: inline-block;
  color: #111;
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
  margin-left: 6px;
}

/* /projects/* footer 의 큰 글씨 'With musign' — 한 줄, uppercase 해제 */
footer#footer.footer .txt_box h2,
footer#footer.footer .txt_box h2 a {
  text-transform: none !important;
}

/* /projects/* 내부 nav_tab 이 fixed 상태가 되면 글로벌 헤더와 충돌하므로 헤더를 위로 숨김.
 * 영역을 지나 .is-fixed 가 해제되면 헤더 다시 노출 (transform transition). */
header#header {
  transition: transform 0.3s ease;
}
body:has(.nav_tab.is-fixed) header#header {
  transform: translateY(-100%);
  pointer-events: none;
}

/* (이전 섹션 5: .page-end-footer color #111 — 섹션 7-pre 의 다크 배경 + 흰 글씨로 통합되어 제거됨) */

/* ============================================================
 * 6) 챗봇(mChat) — 메인과 동일하게 mChat.min.css 만 적용되도록 정리
 *
 *   히스토리:
 *   - 도입 시점: '옛 portfolio min.css 의 전역 img { width: 25rem | 100% }' 같은
 *     공격적 규칙이 챗봇 마스코트를 거대화시킬 것을 우려한 선제 방어.
 *   - 실제 점검 결과: portfolio/{hong,innersignal,spc}.css, mu_layout.css 의 img 규칙은
 *     모두 { border:0; max-width:100%; vertical-align:middle } 수준의 무해한 reset 임.
 *     mChat.min.css 의 자체 specific 규칙 (.status_icon_box>img{width:36px}, .icon{...}
 *     등) 이 specificity 로 충분히 이김.
 *   - 부작용: #mChat img { width:auto; max-width:100% } 가 specificity (0,1,0,1) 로
 *     mChat 의 specific 사이즈 규칙 (0,0,1,1) 을 깨뜨려 버튼/아이콘 사이즈가 의도와
 *     다르게 렌더되던 자해 (메인에는 이 override 가 없어 정상).
 *
 *   조치: 전역 #mChat img { ... } 블록 제거. mChat.min.css 의 의도된 사이즈가 살아남도록.
 *   (이전에 함께 두었던 .quit/.home > .img2 display:none, .mchat_skin--banner 사이즈
 *   강제 등도 같은 이유로 제거 — mChat.min.css 가 이미 처리하고 있음.)
 * ============================================================ */

/* ============================================================
 *  mChat backdrop-filter 모바일 차단 — iOS Chrome scroll-reset 자해 방지
 *
 *  문제:
 *    .mchat_btn_wr .quick_btn (우하단 '무엇이든 물어보세요!') 가
 *      position: fixed + backdrop-filter: blur(30px)
 *    조합으로 매 스크롤 프레임마다 blur 를 재계산. iOS Chrome 의 momentum
 *    scroll 과 이 GPU 작업이 충돌해 compositor 가 뒤처지면 안전 위치(0)로
 *    scroll 을 reset 하는 자해 발생.
 *
 *    사용자 보고: 모바일 iOS Chrome 에서 강한 swipe-up 시 위치가 0 으로 복귀.
 *    direct path /cjcheiljedang 은 챗봇 미로드 → 동일 증상 없음.
 *
 *  해결:
 *    모바일에서만 backdrop-filter 무효화 + 배경 불투명도 살짝 올려서 시각 유지.
 *    (chat 패널 blur(15px), 알림 blur(5px) 도 함께 차단)
 * ============================================================ */
@media (max-width: 1024px) {
  #mChat *,
  #mChat *::before,
  #mChat *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* quick_btn 의 rgba(255,255,255,.1) 배경은 blur 없으면 너무 투명해 글씨와 충돌
   * → 가독성 위해 살짝 진한 배경으로 대체 */
  .mchat_btn_wr .quick_btn {
    background: rgba(40, 40, 60, 0.85) !important;
  }
}


/* ============================================================
 * 7-pre) /projects/* 의 layout 그라데이션 영상(layout.html 의 #wrap > .bg_video) 숨김
 *
 *   주의: common.js 가 .bg_video 의 ver1 클래스를 시간대 기반(ver1~ver6/night)
 *   으로 교체하므로 `.bg_video.ver1` 단일 선택자는 무효.
 *   → #wrap 직속 .bg_video 만 노린다 (#footer 내부 .bg_video 는 보존).
 *   .bg_video.ver1 도 안전망으로 함께 숨김 (JS 로드 전 깜빡임 방지).
 * ============================================================ */
#wrap > .bg_video,
.bg_video.ver1 {
  display: none !important;
}
/* page-end-footer (THANKS FOR WATCHING) — 자체 다크 배경 + 흰 글씨.
 * cjcheiljedang/ohc/illumiel 의 인라인 html{bg:white} 가 살아 있어도
 * page-end-footer 자신이 검정 컨테이너이므로 흰 글씨 가시성 보장. */
.page-end-footer {
  background: #111 !important;
}
.page-end-footer h2,
.page-end-footer p,
.page-end-footer .credit-list,
.page-end-footer .credit-list b,
.page-end-footer .credit-list li,
.page-end-footer .footer-title-group h2,
.page-end-footer .brand-copy {
  color: #fff !important;
}

/* ============================================================
 * 7) 운영 푸터(#footer)의 .bg_video / .musign_3d 강제 가시화·배치
 *    — /projects/* 에서 옛 portfolio CSS 가 사이즈를 망가뜨려도 살아나도록
 * ============================================================ */
footer#footer.footer .bg_video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
  pointer-events: none;
  overflow: hidden;
  /* filter 를 컨테이너에 두면 gif 까지 함께 어두워져 gif 가 보이지 않음.
   * brightness 는 video 요소에만 적용하고 gif 는 자체 z-index 로 video 위에 표시. */
}
footer#footer.footer .bg_video .musign_3d {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 0 !important;
  left: -2vw !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  mix-blend-mode: soft-light !important;
  filter: opacity(0.85) !important;
  transform: none !important;
  z-index: 2; /* gradient video 위 */
}
/* /projects/* 전용 그라데이션 영상 — gif 아래에 깔림. brightness 를 여기서만 적용. */
footer#footer.footer .bg_video > video.bg_video_content {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transform: translate(-50%, -50%) !important;
  filter: brightness(0.25) !important;
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
 * 8) cascade 디자인 원칙 — split 텍스트 흰글씨 누출 방지
 *
 *   원칙:
 *   (a) .page 안의 일반 텍스트는 기본 dark (var(--ink))
 *   (b) 다크 배경 섹션은 자신의 더 구체적인 셀렉터(예:
 *       .cards-section .copy, .swatch .title)로 color:#fff 명시
 *       → (a)보다 specific 하므로 dark 섹션 안의 텍스트는 흰색 유지
 *   (c) .split-word / .char-mask / .char-inner 는 color:inherit
 *       강제 — JS 가 생성하는 wrapper 가 의도치 않은 흰색을 흡수
 *       하지 않게 부모 색을 따르도록 보장
 * ============================================================ */
.page {
  color: var(--ink);
}
/* reset.css 의 * { color:#fff } 가 모든 엘리먼트에 직접 적용되어 중간 div까지 흰색이 됨.
 * .page * { color:inherit } 로 모든 자식이 부모 색을 따르게 해 .page 의 dark 기본색이
 * 하위로 흘러내려가도록 보장. dark 섹션(.cards-section, .showcase-main 등)은 자신에게
 * color:#fff 가 명시되어 있어 그 자식들은 흰색을 상속. */
.page * {
  color: inherit;
}
/* 명시적 dark 안전망 — inherit 체인이 끊기는 경우 대비 */
.page .headline,
.page .title,
.page .small-title,
.page .lettermark,
.page .eyebrow,
.page .copy,
.page .tag {
  color: var(--ink);
}

/* ============================================================
 *  .page 콘텐츠 영역의 글로벌 * 침투 차단 — inherit 체인 자연 복원
 *
 *  근본 원인:
 *    /projects/{cj,illumiel,ohc} 는 자체 inline <style> 로 디자인이 완결되도록
 *    설계되었으나, layout decorate 로 로드되는 reset.css * + mu_layout.css * 등의
 *    글로벌 * 규칙이 .page 내부 모든 요소에 *직접* 적용되어 페이지의 자연
 *    inherit 체인을 끊음.
 *    예: <h2 class="headline" style="font-weight:900">  ← .headline 클래스로 적용
 *          <span>                                       ← 글로벌 * { font-weight:normal } 직접 적용
 *            → 부모의 900 을 상속받지 못해 얇아짐
 *
 *    이 침투의 가장 두드러진 증상:
 *      - splitBigType() 가 동적으로 생성한 span 들이 얇은 폰트로 렌더
 *      - 사용자 인식: window.load 시점에 '두번째 로드 + 얇은 폰트'
 *
 *  해결:
 *    :where(main.page) * { font-*: inherit; color: inherit; ... } 로
 *    .page 내부 모든 요소가 부모로부터 font/color 속성을 자연 상속받도록 강제.
 *
 *  Specificity 분석:
 *    - :where(main.page) *      = (0,0,0,1) — :where 가 0 으로 wrapping
 *    - reset.css *              = (0,0,0,0) — cascade 순서로 본 override 가 이김
 *    - mu_layout.css *          = (0,0,0,0) — 동일
 *    - 페이지 자체 .headline    = (0,0,1,0) — 그대로 살아남음 (헤드라인 자기 속성 유지)
 *    - 페이지 자체 .copy 등     = (0,0,1,0) — 그대로 살아남음
 *    → 클래스 없는 동적 생성 span 들은 inherit 적용, 명시 클래스 요소는 본인 규칙 유지.
 *
 *  효과:
 *    direct path /cjcheiljedang 에서 reset.css 미로드일 때의 자연 inherit
 *    체인과 동일한 결과를 /projects/* 에서 재현.
 *    padding / margin / box-sizing 은 inherit 시키지 않음 (레이아웃 깨짐 방지).
 * ============================================================ */
:where(main.page) * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-stretch: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  word-break: inherit;
  color: inherit;
}
/* page-end-footer 는 다크 배경(#111)이므로 글자는 흰색 */
.page-end-footer {
  color: #fff;
}
/* split JS 가 만드는 wrapper — 부모 색 inherit 보장 */
.page .split-word,
.page .char-mask,
.page .char-inner {
  color: inherit !important;
}