/* =========================================================
   기능 추가분 스타일 — 템플릿(css/style.css)은 건드리지 않고 여기서만 더한다.
   · hk- 접두사 클래스(와 상태 속성)만 쓴다 — 템플릿 클래스를 덮지 않는다.
   · 템플릿 토큰(--bg · --bg-elev · --text · --text-sub · --line · --accent · --accent-2 · --on-accent · --radius · --header-h)만 쓴다.
   ========================================================= */

/* ── 페이지 내용 · 상태 ── */
[hidden]{display:none!important}
.cms-hidden{display:none!important}

/* ── 로고 (관리자에서 이미지·문자 로고로 바꿨을 때 — 헤더 높이 안에) ── */
img.hk-cms-logo{display:block;height:40px;width:auto;max-width:236px;object-fit:contain}
.hk-cms-logo-text{display:inline-block;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#F3F5F8;white-space:nowrap}
@media (max-width:767px){
  img.hk-cms-logo{height:32px;max-width:180px}
  .hk-cms-logo-text{font-size:18px}
}

/* ── 지도 (오시는 길 — 자리표시 상자 크기 그대로 · iframe 이 꽉 채운다) ── */
.map-ph iframe.hk-map{width:100%;height:100%;border:0;display:block}
[data-hk-map]{place-items:stretch}

/* ── 알림(토스트) ── */
.hk-toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);z-index:1400;max-width:calc(100vw - 32px);padding:14px 20px;border-radius:var(--radius);background:var(--bg-elev);border:1px solid var(--line);color:var(--text);font-size:15px;font-weight:600;line-height:1.6;box-shadow:0 12px 32px rgba(0,0,0,.45);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.hk-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ── 카카오 상담 버튼 (관리자 설정에 주소가 있을 때만) ── */
.kakao-float{position:fixed;right:24px;bottom:28px;z-index:900;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;background:#FEE500;color:#191919;font-size:14px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
.kakao-float.show{opacity:1;transform:none}
.kakao-float svg{width:20px;height:20px}
@media (max-width:767px){.kakao-float{right:16px;bottom:20px;padding:0 14px}}

/* ── 팝업 (본사 사양: 딤 없음 · 9개 위치 · 이미지 원본 크기 · 하단 버튼 2개) ── */
.hk-popup{position:fixed;z-index:1200;width:max-content;max-width:calc(100vw - 32px);background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 48px rgba(0,0,0,.5);overflow:hidden;animation:hkPopIn .3s ease;color:var(--text)}
@keyframes hkPopIn{from{opacity:0}to{opacity:1}}
.hk-popup.isX-left{left:24px}
.hk-popup.isX-center{left:50%}
.hk-popup.isX-right{right:24px}
.hk-popup.isY-top{top:calc(var(--header-h) + 16px)}
.hk-popup.isY-middle{top:50%}
.hk-popup.isY-bottom{bottom:24px}
.hk-popup{transform:translate(var(--tx,0),var(--ty,0)) translate(var(--cx,0),var(--cy,0))}
.hk-popup.isX-center{--tx:-50%}
.hk-popup.isY-middle{--ty:-50%}
.hk-popup__img{display:block;width:auto;height:auto;max-width:calc(100vw - 32px);max-height:calc(80vh - 52px)}
.hk-popup__imglink{display:block;line-height:0;cursor:pointer}
.hk-popup__body{padding:24px;max-width:100%}
.hk-popup__body h3{font-size:17px;font-weight:800;line-height:1.5}
.hk-popup__text{margin-top:8px;font-size:14px;line-height:1.75;color:var(--text-sub);overflow-wrap:anywhere}
.hk-popup__text p{margin:0}.hk-popup__text p+p,.hk-popup__text ul,.hk-popup__text ol{margin-top:8px}
.hk-popup__text ul{padding-left:18px;list-style:disc}
.hk-popup__text a{color:var(--accent);text-decoration:underline}
.hk-popup__foot{display:flex;border-top:1px solid var(--line);background:var(--bg)}
.hk-popup__foot button{flex:1;padding:12px;font-size:13px;font-weight:700;color:var(--text-sub)}
.hk-popup__foot button+button{border-left:1px solid var(--line)}
@media (hover:hover){.hk-popup__foot button:hover{color:var(--accent-2)}}
@media (max-width:768px){
  .hk-popup.isX-left,.hk-popup.isX-right,.hk-popup.isX-center{left:50%;right:auto;--tx:-50%}
  .hk-popup.isY-top{top:calc(var(--header-h) + 8px)}
  .hk-popup.isY-bottom{bottom:12px}
}

/* ── 디자인 모드 — 안내 핀 자리 · 편집 중 템플릿 효과 끄기 ── */
html.hk-design .reveal{opacity:1!important;transform:none!important}
html.hk-design [data-hk-manage]{position:relative}
.hk-manage-pin{display:none}
html.hk-design .hk-manage-pin{display:inline-flex;align-items:center;gap:6px;position:absolute;top:8px;right:8px;z-index:60;min-height:32px;padding:0 12px;border-radius:999px;background:rgba(16,24,40,.88);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;pointer-events:auto}
html.hk-design .hk-manage-pin:hover{background:#C8A24C;color:#14161B}
html.hk-design .hero[data-hk-manage] .hk-manage-pin{top:calc(var(--header-h) + 56px);right:24px}   /* 섹션 핀(위로·아래로·숨기기 — 머리글 아래 12px) 밑에 */

/* =========================================================
   디자인 모드 1.1 (2026-10-21) — 사진 보이는 방식 · 영상 · 로고 크기 · 세부 색상 (키트 css/hk-kit.css 를 이 템플릿 클래스로 맞춤)
   · 관리자가 정했을 때만 걸린다 — 기본 화면은 템플릿 그대로(html[data-hk-c~="…"] · html[data-hk-logo] · [data-hk-fit] · .has-video).
   · 값은 js/hk.js(applyImage · applyVideo · applyColors)와 프론트 서버(injectContents · injectTheme)가 넣는다.
   ========================================================= */
/* ── 사진 전체 보이기: 자르지 않고 통째로(여백이 생길 수 있다) ── */
img[data-hk-fit="contain"]{object-fit:contain!important;background:#0B0D12}
[data-hk-fit="contain"]:not(img){background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
/* (사진 자리는 템플릿이 이미 aspect-ratio + object-fit:cover — 공연 카드 · 갤러리 · 소개 4:3 · 시설 16:9 · 포스터 4:5 · 상단 머리. 편집기 "사진 맞추기"가 이 모양대로 잘라 올린다) */

/* ── 영상: 배경형(자리를 꽉 채움 · 소리 없이 반복) / 플레이어형(16:9) ── */
.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)}}
/* 영상 위의 글자가 읽히게 덮는 막 — 템플릿 히어로 덮개(.hero__scrim)와 같은 색 */
.hk-video-bg::after{content:"";position:absolute;inset:0;background:var(--hk-video-shade,linear-gradient(180deg,rgba(6,8,12,.80) 0%,rgba(6,8,12,.42) 24%,rgba(6,8,12,.74) 52%,rgba(6,8,12,.93) 100%))}
.hk-video-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius);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}
/* 메인 히어로 — 영상(index.hero_video)을 넣으면 슬라이드 사진 대신 영상(덮개는 영상 쪽 막) · 글자·버튼은 그 위 */
.hero>.hk-video-bg{z-index:0}
.hero.has-video>.hero__slide,.hero.has-video>.hero__dots{visibility:hidden}
/* 메인 슬라이드 하나하나의 영상(관리자 [메인 슬라이드]) — 사진 대신 영상 · 덮개(.hero__scrim)는 그대로 위에 남는다 */
.hero__slide{--hk-video-shade:none}
.hero__slide>.hk-video-bg{z-index:0}
.hero__slide.has-video>img{visibility:hidden}
/* 회관 소개 영상(플레이어형) · 공연 소개 영상(관리자 [공연·전시]) */
.hk-intro-video.has-video{margin-top:var(--s-6)}
.hk-detail-video:not([hidden]){margin-bottom:48px}

/* ── 로고 크기 ── 머리글 높이(100 · 1023 이하 80 · 479 이하 72)를 넘지 않게 묶는다(휴대폰 메뉴 안 작은 로고는 그대로) */
html[data-hk-logo] .hdr .logo svg,html[data-hk-logo] .hdr .logo img.hk-cms-logo{height:min(var(--hk-logo-h),72px);width:auto;max-width:min(60vw,360px)}
html[data-hk-logo] .hdr .logo .hk-cms-logo-text{font-size:calc(min(var(--hk-logo-h),72px) * .62);display:block;white-space:nowrap;max-width:min(46vw,420px);overflow:hidden;text-overflow:ellipsis;line-height:1.2}
html[data-hk-logo] .ftr [data-cms-logo] svg,html[data-hk-logo] .ftr [data-cms-logo] img.hk-cms-logo{height:min(var(--hk-logo-h),72px)!important;width:auto;max-width:min(80vw,360px)}
@media (max-width:1023px){
  html[data-hk-logo] .hdr .logo svg,html[data-hk-logo] .hdr .logo img.hk-cms-logo{height:min(var(--hk-logo-h),60px)}
  html[data-hk-logo] .hdr .logo .hk-cms-logo-text{font-size:calc(min(var(--hk-logo-h),60px) * .62)}
}
@media (max-width:479px){
  html[data-hk-logo] .hdr .logo svg,html[data-hk-logo] .hdr .logo img.hk-cms-logo{height:min(var(--hk-logo-h),52px);max-width:min(58vw,240px)}
  html[data-hk-logo] .hdr .logo .hk-cms-logo-text{font-size:calc(min(var(--hk-logo-h),52px) * .62);max-width:56vw}
}
/* 올린 로고 이미지 — 머리글 높이의 46% 쯤(문자 로고였던 자리에 이미지 로고를 올려도 작지 않게) */
.hdr .logo img.hk-cms-logo{height:calc(var(--header-h) * .46);max-width:min(60vw,360px);object-fit:contain}

/* ── 세부 색상 ── 관리자가 색을 정한 항목만 덮어쓴다(사진·짙은 금색 구역 위의 글자는 제외) */
html[data-hk-c~="btn_bg"] .btn:not(.btn--ghost):not(.btn--line):not(.btn--solidDark):not([disabled]):not(:disabled):not(.sec--accent .btn){background:var(--hk-btn-bg);border-color:var(--hk-btn-bg)}
html[data-hk-c~="btn_bg"] .btn:not(.btn--ghost):not(.btn--line):not(.btn--solidDark):not([disabled]):not(:disabled):not(.sec--accent .btn):hover{background:var(--hk-btn-bg);filter:brightness(.92)}
html[data-hk-c~="btn_bg"] .btn--ghost:not(.sec--accent .btn){border-color:var(--hk-btn-bg);color:var(--hk-btn-bg)}
html[data-hk-c~="btn_text"] .btn:not(.btn--ghost):not(.btn--line):not(.btn--solidDark):not([disabled]):not(:disabled):not(.sec--accent .btn){color:var(--hk-btn-text)}
html[data-hk-c~="heading"] :is(h1,h2,h3):not(.hero *):not(.subhero *):not(.pv-hero *):not(.sec--accent *):not(.ftr *):not(.mmenu *):not(.hdr *):not(.hk-popup *){color:var(--hk-heading)}
html[data-hk-c~="text"] :is(body,.sec--soft){--text-sub:var(--hk-text)}   /* 이 템플릿의 설명 글은 --text-sub(금색 구역은 그 안에서 다시 정하므로 그대로) */
html[data-hk-c~="bg"] body{--bg:var(--hk-bg);background-color:var(--hk-bg)}
html[data-hk-c~="header_bg"] .hdr{background-color:var(--hk-header-bg)}
html[data-hk-c~="header_text"] .hdr :is(.gnb a:not([aria-current="page"]),.btn-icon,.logo){color:var(--hk-header-text)}
html[data-hk-c~="footer_bg"] .ftr{background-color:var(--hk-footer-bg)}
html[data-hk-c~="footer_text"] .ftr :is(a:not(.btn),p,li,.ftr__copy,.ftr__info .icon){color:var(--hk-footer-text)}

/* =========================================================
   디자인 모드 1.2 — 낱개·묶음 숨김 · 글자·메뉴 하나를 숨겼을 때 빈 칸·여백이 남지 않게(.cms-hidden = display:none)
   ========================================================= */
/* 메뉴 <li><a> 에서 a 를 숨기면 li 도 */
li:has(>a.cms-hidden:only-child),li:has(>.cms-hidden:only-child){display:none}
/* 바닥글 — 칸(제목+메뉴) 하나를 숨기면 남은 칸이 그 자리를 나눠 쓴다 · 주소·전화·이메일 줄을 모두 숨기면 목록도 */
@media (min-width:768px){.ftr__cols:has(>.cms-hidden){grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}}
.ftr__info:not(:has(>:not(.cms-hidden))){display:none}
/* 버튼 묶음에서 전부 숨기면 빈 줄을 남기지 않는다 */
.btn-group:not(:has(>:not(.cms-hidden))),.hero__btns:not(:has(>:not(.cms-hidden))){display:none}
/* 2단(글+사진)에서 사진을 숨기면 글이 한 단을 다 쓴다 */
.about-hero:has(>.about-hero__img>img.cms-hidden){grid-template-columns:minmax(0,1fr)}
.about-hero__img:has(>img.cms-hidden){display:none}