/* =========================================================
   기능 추가분 스타일 — 템플릿(css/style.css)은 건드리지 않고 여기서만 더한다.
   템플릿 토큰(--brand · --accent · --text · --text-sub · --line · --hair · --radius · --header-h)만 쓴다.
   기본 화면(관리자가 아무것도 정하지 않았을 때)은 템플릿과 같아야 한다 — 아래 규칙은 값을 정했을 때만 걸린다.
   ========================================================= */

/* ── 페이지 내용 · 테마 ── */
.cms-hidden{display:none!important}
h1,h2,h3,.sec-title,.hero__title,.subhero__title,.art__title{font-family:var(--font-heading,inherit)}
.logo img.hk-cms-logo{display:block;height:min(var(--hk-logo-h,36px),calc(var(--header-h) - 12px));width:auto;max-width:min(60vw,360px);object-fit:contain}
.logo--sm img.hk-cms-logo{height:30px}
.hk-cms-logo-text{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
/* 대표 색상을 정하면 남색 구역도 그 색을 따른다 */
html[data-hk-accent] .sec--navy{--bg:var(--brand);--panel:var(--brand-2)}

/* ── 지도 (오시는 길 자리표시 → 구글 지도) ── */
.map.hk-mapbox{padding:0;background:#E8EDF3}
.hk-map{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}

/* ── 기사 영상(관리자 [기사]의 영상 칸이 있을 때만) ── */
.hk-art-video{margin:var(--s-5) 0}
.hk-art-video .hk-video-player{border-radius:var(--radius)}

/* ── 편집기(관리자)가 만드는 본문 요소 — 알림·공지 · 정책 · 자주 묻는 질문 답변 ── */
.prose img{max-width:100%;height:auto}
.prose blockquote{margin:0;padding:14px 20px;border-left:3px solid var(--accent);background:var(--bg-soft)}
.prose ol{list-style:decimal;padding-left:var(--s-5)}
.prose ul{list-style:disc;padding-left:var(--s-5)}

/* ── 디자인 모드: 관리 화면 안내 핀(data-hk-manage) — 편집 중에만 보이는 작은 알약(본문 흐름에 끼지 않게) ── */
html:not(.hk-design) .hk-manage-pin{display:none!important}

/* =========================================================
   디자인 모드 1.1 — 사진 보이는 방식 · 영상 · 로고 크기 · 세부 색상 (키트 css/hk-kit.css 를 이 템플릿 클래스로 맞춤)
   ========================================================= */
img[data-hk-fit="contain"]{object-fit:contain!important}
[data-hk-fit="contain"]:not(img){background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
.has-video{isolation:isolate}
.hk-video-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;container-type:size}
.hk-video-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hk-video-bg iframe{position:absolute;top:50%;left:50%;width:100%;height:100%;border:0;transform:translate(-50%,-50%)}
@supports (width:1cqw){.hk-video-bg iframe{width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw)}}
.hk-video-bg::after{content:"";position:absolute;inset:0;background:var(--hk-video-shade,linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55)))}
.hk-video-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius-lg,0);overflow:hidden}
.hk-video-player iframe,.hk-video-player video{position:absolute;inset:0;width:100%;height:100%;border:0}
[data-cms-video-mode="player"]:not(.has-video){display:none}
[data-cms-video]:not([data-cms-video-mode="player"]){position:relative}
/* 메인 톱기사 배경 영상 — 슬라이드 사진은 자리만 두고 숨기고, 템플릿 덮개(.hero__slide::after)는 그대로 쓴다 · 영상 그늘은 끈다(글자 대비를 템플릿과 같게) */
.hero{--hk-video-shade:none}
.hero.has-video .hero__img{visibility:hidden}
.hero.has-video>.hk-video-bg{z-index:0}
.hero.has-video .hero__slide{background:transparent}

/* ── 로고 크기 ── 머리글 높이를 넘지 않게 상한을 둔다(바닥글·모바일 메뉴 로고까지) */
html[data-hk-logo] .logo .logo__mark{width:min(var(--hk-logo-h),calc(var(--header-h) - 12px));height:min(var(--hk-logo-h),calc(var(--header-h) - 12px))}
html[data-hk-logo] .logo img.hk-cms-logo{height:min(var(--hk-logo-h),calc(var(--header-h) - 12px))}
html[data-hk-logo] .logo .hk-cms-logo-text{font-size:calc(min(var(--hk-logo-h),calc(var(--header-h) - 12px)) * .62)}
html[data-hk-logo] .logo{max-width:min(56vw,420px);overflow:hidden}
@media (max-width:479px){html[data-hk-logo] .logo{max-width:52vw}}

/* ── 세부 색상 ── 관리자가 색을 정한 항목만 덮어쓴다(사진·남색·짙은 구역 위 글자는 제외) */
html[data-hk-c~="btn_bg"] .btn--primary,html[data-hk-c~="btn_bg"] .hdr__cta,html[data-hk-c~="btn_bg"] .quick__main,html[data-hk-c~="btn_bg"] .mbar__main{background:var(--hk-btn-bg);border-color:var(--hk-btn-bg)}
html[data-hk-c~="btn_bg"] .hdr--overlay:not(.is-solid) .hdr__cta{background:#fff}
html[data-hk-c~="btn_text"] .btn--primary,html[data-hk-c~="btn_text"] .hdr__cta,html[data-hk-c~="btn_text"] .quick__main,html[data-hk-c~="btn_text"] .mbar__main{color:var(--hk-btn-text)}
html[data-hk-c~="heading"] :is(.sec--base,.sec--soft) :is(h1,h2,h3,.sec-title,.lead__title,.row-card__title,.news-item__t,.ov-card__title):not(.hero *):not(.subhero *),html[data-hk-c~="heading"] .art__title{color:var(--hk-heading)}
html[data-hk-c~="text"] :is(.sec--base,.sec--soft) :is(p,.sec-desc,.lead__sum,.news-item__s,.art__body p):not(.eyebrow):not(.hero *):not(.subhero *){color:var(--hk-text)}
html[data-hk-c~="bg"] body,html[data-hk-c~="bg"] .sec--base{background-color:var(--hk-bg);--bg:var(--hk-bg)}
html[data-hk-c~="header_bg"] .hdr:not(.hdr--overlay),html[data-hk-c~="header_bg"] .hdr--overlay.is-solid{background-color:var(--hk-header-bg)}
html[data-hk-c~="header_text"] .hdr:not(.hdr--overlay) .gnb a,html[data-hk-c~="header_text"] .hdr--overlay.is-solid .gnb a,html[data-hk-c~="header_text"] .hdr:not(.hdr--overlay) .logo,html[data-hk-c~="header_text"] .hdr--overlay.is-solid .logo,html[data-hk-c~="header_text"] .hdr:not(.hdr--overlay) .btn-ico,html[data-hk-c~="header_text"] .hdr--overlay.is-solid .btn-ico{color:var(--hk-header-text)}
html[data-hk-c~="footer_bg"] .ftr{background-color:var(--hk-footer-bg);--bg:var(--hk-footer-bg)}
html[data-hk-c~="footer_text"] .ftr,html[data-hk-c~="footer_text"] .ftr a,html[data-hk-c~="footer_text"] .ftr__brand p,html[data-hk-c~="footer_text"] .ftr__bottom,html[data-hk-c~="footer_text"] .ftr__col li a:not(.btn),html[data-hk-c~="footer_text"] .ftr__contact li>a,html[data-hk-c~="footer_text"] .ftr__contact .ftr__ci{color:var(--hk-footer-text)}

/* ── 1.2 낱개·묶음 숨김 ── 하나를 숨겼을 때 빈 칸·구분선·여백이 남지 않게 */
li:has(> a.cms-hidden:only-child),li:has(> .cms-hidden:only-child){display:none}
/* 신문사 정보 줄 사이 구분선은 "앞에 보이는 줄이 있을 때만" */
.ftr__info>li+li::before{content:none}
.ftr__info>li:not(.cms-hidden)~li:not(.cms-hidden)::before{content:""}
/* 버튼 묶음의 버튼이 다 빠지면 묶음 여백도 */
.btn-group:not(:has(> :not(.cms-hidden))){display:none}
/* 인사말 사진을 빼면 글이 한 단을 다 쓴다 */
.greet:has(> .greet__ph.cms-hidden),.greet:has(> .greet__ph > img.cms-hidden){grid-template-columns:minmax(0,1fr)}
.greet__ph:has(> img.cms-hidden){display:none}
/* 많이 찾은 말 · 모바일 하단 바 · 빠른 메뉴 */
.search-pop__tags:not(:has(> :not(.cms-hidden))){display:none}