/* =========================================================
   기능 추가분 스타일 — 템플릿(css/style.css)은 건드리지 않고 여기서만 더한다.
   템플릿 토큰(--primary · --point · --dark · --text · --muted · --line · --bg-light · --radius)만 쓴다.
   템플릿 요소의 기존 모양을 덮어쓰지 않는다(새로 생긴 요소·상태만). 기본 화면은 원본과 같다.
   ========================================================= */

/* ── 페이지 내용 · 테마 ── */
.cms-hidden{display:none!important}
:root[style*="--font-heading"] h1,:root[style*="--font-heading"] h2,:root[style*="--font-heading"] h3{font-family:var(--font-heading)}
.logo img.hk-cms-logo{display:block;height:36px;width:auto;max-width:min(60vw,360px);object-fit:contain}
.hk-cms-logo-text{font-family:var(--font-en);font-weight:900;font-size:22px;letter-spacing:-.01em;line-height:1;color:inherit}

/* ── 지도 (자리표시 → 구글 지도, 같은 상자 크기) ── */
.map-ph.hk-mapbox{display:block;padding:0}
.map-ph.hk-mapbox::before{content:none}
.map-ph.hk-mapbox > .hk-map{position:absolute;inset:0;width:100%;height:100%;border:0}
.hk-map{display:block;width:100%;height:100%;border:0}

/* ── 바닥글 사업자 정보 — 줄마다 숨김 · 구분 기호는 앞뒤 항목이 있을 때만 ── */
.hk-biz .hk-frow.cms-hidden + .hk-sep,.hk-biz .hk-sep:has(+ .hk-frow.cms-hidden){display:none}
.hk-biz .hk-sep:first-child,.hk-biz .hk-sep:last-child{display:none}

/* ── 폼 오류 · 알림 ── */
.hk-form-msg{margin-top:14px;padding:12px 16px;border-radius:12px;background:var(--primary-soft);color:var(--primary-dark);font-size:14px;font-weight:600}
.hk-form-msg.is-ok{background:var(--point-soft);color:#0B7A66}
.btn[disabled],.btn[aria-busy="true"]{opacity:.6;cursor:progress}

/* ── 체험 예약 — 남은 자리 · 예약번호 ── */
.slots button small{display:block;font-size:11px;font-weight:600;opacity:.75;margin-top:2px}
.hk-trial-no{margin-top:10px;font-size:14px;color:var(--muted)}
.hk-trial-no b{color:var(--dark)}
.hk-trial-no a{color:var(--primary);font-weight:700;text-decoration:underline}

/* ── 회원 · 체험 예약 조회 · 마이페이지 ── */
.hk-rsv{display:grid;gap:14px}
.hk-rsv .card{padding:22px 24px;text-align:left}
.hk-rsv__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.hk-rsv__head b{font-size:17px;color:var(--dark)}
.hk-rsv .summary{margin:0}
.hk-rsv__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.hk-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--point-soft);color:#0B7A66}
.hk-badge.is-cancel{background:#F1F2F4;color:var(--muted)}

/* ── 편집기(관리자)가 만드는 본문 요소 — 공지·정책·FAQ 답변 ── */
.doc ol{margin:0 0 16px;padding-left:20px;list-style:decimal}
.post-body img{max-width:100%;height:auto}
.post-body a,.faq__a a{color:var(--primary)}

/* ── 영상(프로그램 상세 · 소개) ── */
.hk-pd-video{margin-top:22px}
.hk-intro-video{margin-top:16px}

/* ── ⑥ 모바일: 누르기 쉬운 크기(44px) ── */
@media (max-width:767px){
  .slots button{min-height:44px}
  .mnav__list a{min-height:44px;display:flex;align-items:center}
}

/* ============================================================
   디자인 모드 1.1 공통 규칙 — 사진 보이는 방식 · 영상 · 로고 크기 · 세부 색상 (키트 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; }
/* 올린 사진이 찌그러지지 않게 — 템플릿의 사진 자리 모양 그대로(기본 화면 동일) */
.trainer__photo img,.img-card img,.post-card__thumb img,.gallery__item img,.loc__img img,.detail-hero__img img{object-fit:cover}

.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__bg::after)와 같은 색 */
.hk-video-bg::after { content: ""; position: absolute; inset: 0; background: var(--hk-video-shade, linear-gradient(180deg,rgba(21,23,28,.55) 0%,rgba(21,23,28,.45) 60%,rgba(21,23,28,.7) 100%)); }
.hero.has-video .hero__bg{display:none}
.hero.has-video .hk-video-bg{z-index:0}
.hero.has-video > .container,.hero.has-video .hero__slider-ui,.hero.has-video .hero__scroll{position:relative;z-index:2}
.hk-video-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius, 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; }

/* ── 로고 크기 ★ ── (머리글은 fixed · 높이를 px 로 못 박지 않아 로고가 커져도 넘치지 않는다) */
html[data-hk-logo] .header .logo img.hk-cms-logo,
html[data-hk-logo] .header .logo svg { height: var(--hk-logo-h); width: auto; max-width: min(60vw, 360px); }
html[data-hk-logo] .header .logo .hk-cms-logo-text,html[data-hk-logo] .header .logo .logo__text { font-size: calc(var(--hk-logo-h) * 0.62); }
html[data-hk-logo] .header .logo { white-space: nowrap; max-width: min(46vw, 420px); overflow: hidden; }

/* ── 세부 색상 ★ ── 관리자가 색을 정한 항목만 덮어쓴다 */
html[data-hk-c~="btn_bg"] :is(.btn--primary,.header__cta,.mnav__cta,.fl-trial) { background: var(--hk-btn-bg); border-color: var(--hk-btn-bg); }
html[data-hk-c~="btn_bg"] :is(.btn--primary,.header__cta):hover { filter: brightness(0.92); }
html[data-hk-c~="btn_text"] :is(.btn--primary,.header__cta,.mnav__cta,.fl-trial) { color: var(--hk-btn-text); }
html[data-hk-c~="heading"] .section:not(.section--dark) :is(.section-title,.card__title,.plan__name,.trainer__name,.post-card__title,h2,h3):not(.img-card *) { color: var(--hk-heading); }
html[data-hk-c~="text"] .section:not(.section--dark) :is(.section-desc,.card__desc,.para,.lead,.plan__desc,.review__text,.post-card__sum,.faq__a,.doc p,.doc li) { color: var(--hk-text); }
html[data-hk-c~="bg"] body,html[data-hk-c~="bg"] .section:not(.section--light):not(.section--dark) { background-color: var(--hk-bg); }
html[data-hk-c~="header_bg"] .header.is-scrolled,html[data-hk-c~="header_bg"] .header.is-solid,html[data-hk-c~="header_bg"] .mnav__panel { background-color: var(--hk-header-bg); }
html[data-hk-c~="header_text"] .header :is(.gnb a,.logo,.hamburger) { color: var(--hk-header-text); }
html[data-hk-c~="header_text"] .hamburger span { background-color: var(--hk-header-text); }
html[data-hk-c~="footer_bg"] .footer { background-color: var(--hk-footer-bg); }
html[data-hk-c~="footer_text"] .footer, html[data-hk-c~="footer_text"] .footer :is(a,p,li,h4,.logo) { color: var(--hk-footer-text); }

/* ── 1.2 낱개·묶음 숨김 ★ ── 숨겼을 때 빈 칸·구분선·여백이 남지 않게 */
li:has(> a.cms-hidden:only-child), li:has(> .cms-hidden:only-child) { display: none; }
.two-col:has(> .reveal > img.cms-hidden:only-child) { grid-template-columns: 1fr; }
.two-col > .reveal:has(> img.cms-hidden):not(:has(> :not(.cms-hidden):not([data-cms-video-mode]))) { display: none; }
.breadcrumb li:has(> .cms-hidden:only-child) { display: none; }

/* ── 디자인 모드: 휴대폰 메뉴 · 사진 크게 보기는 편집 바 아래에서 시작 · 옆 상자(sticky)는 바 높이만큼 더 내린다 (R-2026-10-05) ── */
html.hk-design .mnav,html.hk-design .lightbox{top:var(--hk-bar,0px)}
html.hk-design .filterbox{top:calc(96px + var(--hk-bar,0px))}

/* ── ⑥ 긴 글(띄어쓰기 없는 이름·영문·주소)이 휴대폰 폭에서 옆으로 넘치지 않게 — 기본 화면(짧은 글)은 그대로 ── */
.review__meta > .review__name{min-width:0;overflow-wrap:anywhere}
.review__text{overflow-wrap:anywhere}
.breadcrumb li{min-width:0;overflow-wrap:anywhere}

/* ── 빼기(1.2): 사진만 담은 상자에서 사진을 숨기면 빈 상자(둥근 바탕·그림자)도 같이 뺀다 — 디자인 모드에서는 흐리게 보이므로 그대로 ── */
html:not(.hk-design) .loc__img:has(> img.cms-hidden){display:none}

/* ── 영상(플레이어형) 자리 — 영상이 없으면 hidden(원본 화면 그대로) · 영상이 들어오면(js/hk.js applyVideo → .has-video) 보인다 ── */
.hk-pd-video.has-video[hidden],.hk-intro-video.has-video[hidden]{display:block}

/* ⑥ 빈 목록 안내(고객이 항목을 모두 지웠을 때만 — 서버가 목록 자리에 넣는다) */
.hk-empty{grid-column:1/-1;width:100%;text-align:center;color:var(--muted);padding:48px 16px;font-size:15px;line-height:1.7;word-break:keep-all}
.hk-empty .btn{margin:14px auto 0;display:flex;width:max-content}
td > .hk-empty{padding:32px 12px}