/* =========================================================
   기능 추가분 스타일 — 템플릿(css/style.css)은 건드리지 않고 여기서만 더한다.
   템플릿 토큰(--c-blue · --c-navy · --c-text · --c-sub · --c-line · --c-alt · --radius · --hdr …)만 쓴다.
   기본 화면(관리자가 아무것도 바꾸지 않은 상태)은 템플릿과 같아야 한다 — 여기 규칙은 새 기능 화면과 "정했을 때만" 걸린다.
   ========================================================= */

/* ── 페이지 내용 · 테마 ── */
.cms-hidden{display:none!important}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--font-heading,inherit)}
.logo img.hk-cms-logo{display:block;height:40px;width:auto;max-width:min(60vw,360px);object-fit:contain}
@media (max-width:1023px){.logo img.hk-cms-logo{height:34px}}
@media (max-width:479px){.logo img.hk-cms-logo{height:30px}}
.hk-cms-logo-text{font-size:20px;font-weight:900;letter-spacing:-.045em;line-height:1.1}

/* 바닥글 회사 정보 — 줄마다 숨길 수 있게 나눈 자리. 구분 기호(·)는 "앞에 보이는 줄이 있을 때만" 붙는다 */
.hk-row:not(.cms-hidden)~.hk-row:not(.cms-hidden)::before{content:" · "}
/* 바닥글 약관 링크 묶음 — 감싼 span 이 배치에 끼어들지 않게 */
.hk-menu-legal{display:contents}

/* ── 지도 (오시는 길 자리표시 → 구글 지도) — 상자 크기는 자리표시 그대로 ── */
.map-ph.hk-map-box{position:relative;padding:0;gap:0;background:var(--c-alt);overflow:hidden}
.hk-map-box iframe.hk-map{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── 서비스 상세 영상 자리 (영상이 없으면 보이지 않는다) ── */
.hk-detail-video-slot:empty{display:none}
.hk-detail-video-slot{margin-bottom:var(--s-5)}

/* ── 폼 오류 · 알림 ── */
.hk-form-msg{margin-top:var(--s-3);font-size:14px;color:var(--c-danger);font-weight:500}
.hk-form-msg:empty{display:none}
.hk-form-msg.is-ok{color:var(--c-blue)}
.hk-toast{position:fixed;left:50%;bottom:var(--s-6);transform:translate(-50%,20px);z-index:1400;max-width:calc(100vw - 32px);padding:var(--s-3) var(--s-5);background:var(--c-navy);color:#fff;border-radius:var(--radius);font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.hk-toast.is-on{opacity:1;transform:translate(-50%,0)}
.cal-day.is-full{text-decoration:line-through}
.slot:disabled small.hk-full{color:var(--c-danger)}
/* 휴대폰에서 입력칸 글꼴이 16px 미만이면 iOS 가 화면을 확대한다 — 입력칸에만 16px */
@media (max-width:767px){.input,.select,.textarea,input,select,textarea{font-size:16px}}

/* ── 관리자가 쓴 본문(공지·정책·FAQ 답변) — 템플릿 article-body 를 따르고 빠진 요소만 ── */
.article-body p{margin:0}
.article-body a{color:var(--c-blue);text-decoration:underline}
.article-body table{width:100%;border-collapse:collapse;font-size:14px}
.article-body th,.article-body td{padding:10px 12px;border:1px solid var(--c-line);text-align:left;vertical-align:top}
.article-body th{background:var(--c-alt);color:var(--c-text);font-weight:700}
.article-body blockquote{margin:0;padding:var(--s-4) var(--s-5);border-left:3px solid var(--c-blue);background:var(--c-alt)}
.article-body hr{border:0;border-top:1px solid var(--c-line);margin:var(--s-4) 0}
.article-body img{max-width:100%;height:auto}
.acc-body p{margin:0 0 8px}.acc-body p:last-child{margin-bottom:0}
.acc-body ul{margin:8px 0;padding-left:18px;list-style:disc}
.acc-body a{color:var(--c-blue);text-decoration:underline}
@media (max-width:767px){.article-body table,.acc-body table{display:block;overflow-x:auto;white-space:nowrap}}

/* ── 카카오 상담 버튼 ── */
.kakao-float{position:fixed;right:24px;bottom:28px;z-index:300;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,.2);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
.kakao-float.show{opacity:1;transform:none}
.kakao-float svg{width:20px;height:20px}
body.has-kakao .site-footer{padding-bottom:64px}
@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:#fff;border:1px solid var(--c-line2);border-radius:var(--radius-lg);box-shadow:0 20px 48px rgba(17,24,39,.25);overflow:hidden;animation:hkPopIn .3s ease;color:var(--c-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(--hdr) + 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(--c-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(--c-blue);text-decoration:underline}
.hk-popup__foot{display:flex;border-top:1px solid var(--c-line);background:var(--c-alt)}
.hk-popup__foot button{flex:1;padding:12px;min-height:44px;font-size:13px;font-weight:700;color:var(--c-sub)}
.hk-popup__foot button+button{border-left:1px solid var(--c-line)}
.hk-popup__foot button:hover{color:var(--c-blue)}
@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(--hdr) + 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}
html.hk-design .site-header.is-over{position:sticky}

/* ============================================================
   디자인 모드 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; }

/* ── 영상: 배경형(자리를 꽉 채움 · 소리 없이 반복) / 플레이어형(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-overlay)와 같은 색 */
:root { --hk-video-shade: linear-gradient(180deg, rgba(11,21,38,.55) 0%, rgba(11,21,38,.45) 50%, rgba(11,21,38,.75) 100%); }
.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))); }
/* 메인 첫 화면: 영상이 들어오면 원래 사진·덮개를 가리고 영상이 그 자리에 깔린다(글자·카드는 그 위) */
.hero.has-video .hk-video-bg { z-index: 0; }
.hero.has-video .hero-bg, .hero.has-video .hero-overlay { display: none; }
.hero.has-video .container { z-index: 1; }
.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; }
.hk-intro-video.has-video { margin-top: var(--s-6); }

/* ── 사진 — 올린 사진이 찌그러지지 않게(기본 화면은 같은 모양) ── */
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.rc-photo img, .g-item img, .card-media img { object-fit: cover; }

/* ── 로고 크기 ★ ── 머리글 높이(--hdr)는 그대로 두고 로고만 키운다(넘치면 머리글을 min-height 로 푼다) */
html[data-hk-logo] .logo img.hk-cms-logo { height: var(--hk-logo-h); width: auto; max-width: min(60vw, 360px); }
html[data-hk-logo] .logo .logo-symbol { width: var(--hk-logo-h); height: var(--hk-logo-h); --icon: calc(var(--hk-logo-h) * 0.62); }
html[data-hk-logo] .logo .logo-kr, html[data-hk-logo] .logo .hk-cms-logo-text { font-size: calc(var(--hk-logo-h) * 0.62); }
html[data-hk-logo] .logo { white-space: nowrap; max-width: min(60vw, 420px); }
html[data-hk-logo] .site-header { height: auto; min-height: var(--hdr); }
html[data-hk-logo] .hdr-inner { min-height: var(--hdr); }

/* ── 세부 색상 ★ ── 관리자가 색을 정한 항목만 덮어쓴다 */
html[data-hk-c~="btn_bg"] .btn-primary { background: var(--hk-btn-bg); border-color: var(--hk-btn-bg); }
html[data-hk-c~="btn_bg"] .btn-primary:hover { background: var(--hk-btn-bg); filter: brightness(0.92); }
html[data-hk-c~="btn_text"] .btn-primary { color: var(--hk-btn-text); }
html[data-hk-c~="heading"] :is(h1, h2, h3):not(:is(.hero, .sub-hero, .cta-band, .site-footer, .media-card, .wide-card, .g-item, .hero-card) *) { color: var(--hk-heading); }
html[data-hk-c~="text"] body, html[data-hk-c~="text"] :is(.card-desc, .lead, .rc-text, .article-body, .acc-body, .check-list, .with-icon-top) { color: var(--hk-text); }
html[data-hk-c~="bg"] body, html[data-hk-c~="bg"] main > section:not(:is(.hero, .sub-hero, .cta-band, .bg-alt, [class*="alt"])) { background-color: var(--hk-bg); }
html[data-hk-c~="header_bg"] .site-header:not(.is-over), html[data-hk-c~="header_bg"] .site-header.is-over.is-scrolled { background-color: var(--hk-header-bg); }
html[data-hk-c~="header_text"] .site-header:not(.is-over) :is(.gnb a, .hdr-tel, .hdr-menu, .logo), html[data-hk-c~="header_text"] .site-header.is-over.is-scrolled :is(.gnb a, .hdr-tel, .hdr-menu, .logo) { color: var(--hk-header-text); }
html[data-hk-c~="footer_bg"] .site-footer { background-color: var(--hk-footer-bg); }
html[data-hk-c~="footer_text"] .site-footer, html[data-hk-c~="footer_text"] .site-footer a:not(.btn-primary), html[data-hk-c~="footer_text"] .site-footer .family .select, html[data-hk-c~="footer_text"] .site-footer .family .icon { color: var(--hk-footer-text); }

/* ── 1.2 낱개·묶음 숨김 ★ ── 숨긴 요소의 껍데기(li · 칸)와 앞뒤 구분 기호까지 같이 정리 */
li:has(> a.cms-hidden:only-child), li:has(> .cms-hidden:only-child) { display: none; }
.footer-info .with-icon:not(:has(.hk-row:not(.cms-hidden))) { display: none; }
.footer-info > span:first-child:not(:has(.hk-row:not(.cms-hidden))) { display: none; }

/* ── 편집 화면 핀 자리 ★ (디자인 모드에서만 — 방문자 화면과 무관) ──
   · 로고: 사진 핀이 기본 자리(왼쪽 위 12px)면 로고 글자를 가린다 → 심볼 위(왼쪽 가운데)에 둔다(편집기가 글자와 겹치면 아이콘만 남긴다)
   · 카드 사진: 왼쪽 위에는 배지(GIMPO 등)가 있다 → 사진 왼쪽 아래 / 사진+설명 카드(.media-card): 좁은 폭에서 설명이 카드 전체를 덮는다 → 설명의 아래 여백(오른쪽 아래)
   · 위치 줄(breadcrumb)의 데이터 항목: 핀을 둘 자리가 없어 글자 위에 뜬다 → 항목 오른쪽 옆에 아이콘만
   · 휴대폰 폭: 구역 위 여백(--sec 40·56px)이 섹션 핀(12px + 30~34px)보다 좁아 영문 소제목을 가린다 → 편집 화면에서만 위 여백을 늘린다 */
html.hk-design .logo > .hk-pill.hk-pill-img { top: 50%; left: 0; transform: translateY(-50%); }
html.hk-design .card-media > .hk-pill.hk-pill-img { top: auto !important; bottom: 12px; }
html.hk-design .media-card > .hk-pill.hk-pill-img { top: auto !important; left: auto !important; right: 8px !important; bottom: 8px; }
html.hk-design .breadcrumb [data-cms-item] > .hk-pill.hk-pill-item { top: 50%; right: auto; left: calc(100% + 6px); transform: translateY(-50%); width: 26px; padding: 0; justify-content: center; }
html.hk-design .breadcrumb [data-cms-item] > .hk-pill.hk-pill-item > span { display: none; }
html.hk-design .breadcrumb [data-cms-item] { margin-right: 34px; }
@media (max-width: 767px) {
  html.hk-design .section[data-cms-section] { padding-top: calc(var(--sec) + 16px); }
  html.hk-design .section[data-cms-section][style*="padding-top"] { padding-top: 56px !important; }   /* 위 여백 0 인 구역(메인 진행 순서) */
}
/* · 휴대폰 폭의 2단 사진 카드(.two-col.equal — 템플릿 규칙이 우선해 휴대폰에서도 2단): 카드가 120px 로 좁아 사진 핀이 설명을 가린다 → 편집 화면에서만 1단 */
@media (max-width: 767px) { html.hk-design .two-col.equal { grid-template-columns: 1fr; } }