/* 서브페이지 공통 unslop 덮어쓰기(2026-11-14). 기존 페이지 CSS(운영 배포본) 뒤에 붙는다.
   페이지마다 다른 고침은 sub-<page>.css 에 있다. 방향은 메인과 같다:
   관제실·운영실 / 따뜻한 무채색 한 벌 + 골드 하나(주 행동·핵심 숫자) / 굵기 400·500(드물게 600) / 대문자 영문 라벨 없음 / 움직임은 설명할 때만.
   기존 규칙이 'body.page-x #main …' 처럼 강해서 여기서는 !important 를 쓴다(시안 덮어쓰기 층이라서). */

/* ── 1. 간격·바탕 ── */
body[data-unslop="sub"] { background: var(--u-bg); font-weight: 400; }
body[data-unslop="sub"] #main { font-weight: 400; }
body[data-unslop="sub"] .skip-link { font-family: var(--u-font); }

/* ── 2. 색: 첫 화면 그림은 페이지의 '눈에 띄는 곳'이라 색을 살린다(대표 의견 2026-11-14).
   운영 배포본은 그림에 hue-rotate(-49°)를 걸어 분홍·자주가 됐다. 원본 그림은 따뜻한 호박·올리브(색상 약 45~70°)라
   관제실 톤과 맞으므로 회전만 빼고 원래 색을 쓴다. 글이 읽히게 밝기만 조금 낮춘다(어둡게 덮는 막은 페이지 CSS 그대로). */
html[lang] body[data-unslop="sub"] .generated-hero-media { filter: none !important; }
body[data-unslop="sub"] :is(.generated-hero-media, .ed-hero-media) img { filter: saturate(.9) brightness(.7) !important; }

/* ── 3. 아이콘: 글자 화살표를 바꾼 선 아이콘은 글자 색을 따른다 ── */
body[data-unslop="sub"] .us-glyph { display: inline-block; vertical-align: -3px; }
body[data-unslop="sub"] .pager-dir { display: inline-flex; align-items: center; gap: 6px; }

/* ── 4·5. 문구·글꼴 ── */
/* 영문 대문자 소제목(kicker·eyebrow)은 아래 한국어 제목과 같은 말이라 뺀다 */
body[data-unslop="sub"] #main :is(.kicker, .as-eyebrow) { display: none !important; }
/* 대문자 변환·넓은 자간 없음 */
body[data-unslop="sub"] #main * { text-transform: none !important; }
body[data-unslop="sub"] #main :is(small, em, .mini-label, .hl-period-meta, .pager-step, .pc-kind) { letter-spacing: 0 !important; }
/* 굵기: 제목 500, 강조 600 */
body[data-unslop="sub"] #main :is(h1, h2) { font-weight: 500 !important; letter-spacing: -.02em !important; }
body[data-unslop="sub"] #main :is(h3, h4) { font-weight: 500 !important; letter-spacing: -.01em !important; }
body[data-unslop="sub"] #main :is(b, strong, dt) { font-weight: 600 !important; }
body[data-unslop="sub"] #main h1 :is(b, strong, em, span) { font-weight: inherit !important; }
body[data-unslop="sub"] #main :is(em, i, cite) { font-style: normal !important; }
body[data-unslop="sub"] #main :is(.num, .count, time) { font-variant-numeric: tabular-nums; }

/* ── 6·7. 세부: 버튼은 컨트롤 모서리(10), 높이 48 ── */
body[data-unslop="sub"] #main :is(a.button, button.button, .ad-rq-link) {
  min-height: 48px !important; height: auto !important; padding: 0 20px !important; border-radius: 10px !important;
  font: 500 15px/1 var(--u-font) !important; letter-spacing: 0 !important; box-shadow: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  transition: background-color .15s var(--u-ease), border-color .15s var(--u-ease), color .15s var(--u-ease), transform .12s var(--u-ease) !important;
}
body[data-unslop="sub"] #main :is(a.button, button.button):active { transform: scale(.98); }
/* 밝은 골드 버튼 → 메인과 같은 골드(주 행동) */
body[data-unslop="sub"] #main :is(a.button, button.button, .ad-rq-link):not(.secondary):not(.ghost) { background-color: var(--u-gold) !important; border: 1px solid var(--u-gold) !important; color: var(--u-ink) !important; }
body[data-unslop="sub"] #main :is(a.button, button.button, .ad-rq-link):not(.secondary):not(.ghost):hover { background-color: var(--u-gold-hover) !important; border-color: var(--u-gold-hover) !important; }
body[data-unslop="sub"] #main :focus-visible { outline: 2px solid var(--u-gold-ink) !important; outline-offset: 3px; }

/* 다음 페이지 안내(이전·다음): 대문자 STEP 표시를 조용한 숫자로 */
body[data-unslop="sub"] .pager-step { font-family: var(--u-mono) !important; font-weight: 400 !important; }

/* ── 공통 정리(페이지별 작업 뒤, 2026-11-14) ── */
/* 본문 폭을 메인·머리줄과 같게: 최대 1280, 좌우 32(휴대폰 20) → 로고·본문·바닥글 왼쪽 선이 한 줄 */
body[data-unslop="sub"] :is(#main, .page-pager) :is(.container, .wrap):not(.us-wrap) { width: 100% !important; max-width: 1280px !important; padding-inline: var(--u-pad) !important; margin-inline: auto !important; box-sizing: border-box !important; }
/* 첫 화면 위 경로 표시: 본문 글꼴 13px, 자간 없음 */
body[data-unslop="sub"] .breadcrumb { font: 400 13px/20px var(--u-font) !important; letter-spacing: 0 !important; color: var(--u-d-ink-3) !important; }
body[data-unslop="sub"] .breadcrumb b { font-weight: 500 !important; color: var(--u-d-ink-2) !important; }
/* 다음 페이지 안내: 메인처럼 어두운 띠, 숫자는 고정폭 */
body[data-unslop="sub"] .page-pager { background: var(--u-d-bg-2) !important; color: var(--u-d-ink-2) !important; border-top: 1px solid var(--u-d-line) !important; }
body[data-unslop="sub"] .page-pager a { color: var(--u-d-ink-2) !important; font-family: var(--u-font) !important; transition: color .15s var(--u-ease) !important; }
body[data-unslop="sub"] .page-pager a:hover { color: var(--u-d-ink) !important; }
body[data-unslop="sub"] .page-pager b, body[data-unslop="sub"] .page-pager .pager-label { color: var(--u-d-ink) !important; font-weight: 500 !important; letter-spacing: 0 !important; }
body[data-unslop="sub"] .page-pager .pager-step { font: 400 13px/20px var(--u-mono) !important; letter-spacing: 0 !important; color: var(--u-d-ink-3) !important; }
body[data-unslop="sub"] .page-pager .pager-desc { color: var(--u-d-ink-3) !important; letter-spacing: 0 !important; }
/* 문의 '입력 내용 확인' 창: 카드 모서리 16, 버튼은 컨트롤 모서리 */
body[data-unslop="sub"] dialog.ed-form-review { border-radius: 16px !important; border: 1px solid var(--u-line) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important; font-family: var(--u-font) !important; }
body[data-unslop="sub"] dialog.ed-form-review button { border-radius: 10px !important; min-height: 44px !important; font: 500 15px/1 var(--u-font) !important; letter-spacing: 0 !important; }
/* 전환은 색·면·투명도·위치만(운영 CSS 의 transition 단축 표기가 'all' 이 되는 것을 막음) */
body[data-unslop="sub"] #main * { transition-property: color, background-color, border-color, opacity, transform, box-shadow, fill, stroke !important; }

/* 운영 CSS 의 content 에 박혀 있던 한국어 → 요소의 data-label(언어별로 번역됨)로 표시 */
body[data-unslop="sub"] #main .pc-scope-rows .is-s[data-label]::before, body[data-unslop="sub"] #main .pc-scope-rows .is-l[data-label]::before { content: attr(data-label) " · "; }
body[data-unslop="sub"] #main .mz2-signs em[data-label]::before { content: attr(data-label) " · "; }
body[data-unslop="sub"] #main .mz2-bar[data-label]::after { content: attr(data-label); }

/* ── 9. 움직임: 등장 효과는 한 번만(기존 reveal 은 이미 꺼져 있음), 계속 도는 장식 없음 ── */
@media (prefers-reduced-motion: reduce) {
  body[data-unslop="sub"] * { animation: none !important; transition: none !important; }
}