/* =========================================================
   기능 추가분 스타일 — 템플릿(css/style.css)은 건드리지 않고 여기서만 더한다.
   · 방문자 화면의 글꼴·여백은 템플릿 그대로다. 여기 있는 규칙은 기능이 새로 만든 요소(지도·팝업·카카오 버튼·알림·편집기 본문)와
     디자인 모드에서만 쓰는 것뿐이고, 기본 상태의 템플릿 요소 모양은 바꾸지 않는다.
   · 템플릿 토큰(--primary · --line · --text · --text-sub · --radius · --radius-sm · --header-h · --acc-text · --hot-text)만 쓴다.
   ========================================================= */

/* ── 페이지 내용 · 테마 ── */
.cms-hidden{display:none!important}
[hidden]{display:none!important}
html[data-hk-font] h1,html[data-hk-font] h2,html[data-hk-font] h3,html[data-hk-font] .hero__title,html[data-hk-font] .sec-title{font-family:var(--font-heading)}
.logo img.hk-cms-logo{display:block;height:40px;width:auto;max-width:220px;object-fit:contain}
.hk-cms-logo-text{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2}

/* ── 지도 (오시는 길 자리표시 → 구글 지도 · 상자 크기·모서리는 템플릿 .map 그대로) ── */
.map.hk-mapbox{display:block;padding:0}
.hk-map{display:block;width:100%;height:100%;border:0}

/* ── 폼 서버 오류 ── */
.hk-form-msg{font-size:14px;margin-top:var(--s-4)}
.hk-form-msg:empty{display:none}
.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-sm);background:#14201D;color:#fff;font-size:15px;font-weight:600;box-shadow:0 12px 32px rgba(0,0,0,.25);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.hk-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ── 관리자 편집기가 만드는 본문 요소 — 공지 본문 · 정책 · FAQ 답변 (템플릿 .prose 에 없는 것만) ── */
.prose h1{font-size:28px;font-weight:800;line-height:1.4;margin-top:var(--s-7)}
.prose h3{font-size:20px;font-weight:800;line-height:1.5;margin-top:var(--s-6)}
.prose h4{font-size:17px;font-weight:800;margin-top:var(--s-5)}
.prose h3+p,.prose h4+p,.prose p+ul,.prose p+ol,.prose ul+p,.prose ol+p,.prose table+p{margin-top:var(--s-4)}
.prose li>p{margin:0}
.prose blockquote{margin:var(--s-4) 0;padding:var(--s-3) var(--s-5);border-left:3px solid var(--acc-text);color:var(--text-sub)}
.prose hr{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0}
.prose img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:var(--s-2) 0 var(--s-4)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin-top:var(--s-4)}
.prose th,.prose td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font-weight:700}
.prose del{color:var(--text-sub)}
.acc__a p+p,.acc__a p+ul,.acc__a ul+p{margin-top:var(--s-3)}
.acc__a ul{padding-left:18px;list-style:disc}.acc__a ol{padding-left:18px;list-style:decimal}
.acc__a a{color:var(--acc-text);text-decoration:underline}
.acc__a table{width:100%;border-collapse:collapse;font-size:14px;margin-top:var(--s-3)}
.acc__a th,.acc__a td{padding:8px 10px;border:1px solid var(--line)}
@media (max-width:767px){
  .prose table,.acc__a table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ── 카카오 상담 버튼 (설정에 채널 주소가 있을 때만) ── */
.kakao-float{position:fixed;right:24px;bottom:88px;z-index:90;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;background:#FEE500;color:#191919;font-size:15px;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 .ftr{padding-bottom:64px}
@media (max-width:767px){.kakao-float{right:16px;bottom:80px;padding:0 14px}}

/* ── 팝업 (본사 사양: 딤 없음 · 9개 위치 · 이미지 원본 크기 · 하단 버튼 2개) ── */
.hk-popup{position:fixed;z-index:1200;width:max-content;max-width:calc(100vw - 32px);background:#fff;color:#14201D;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 48px rgba(0,0,0,.25);overflow:hidden;animation:hkPopIn .3s ease}
@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:18px;font-weight:800;line-height:1.5}
.hk-popup__text{margin-top:8px;font-size:15px;line-height:1.75;color:#46524F;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:#0A6358;text-decoration:underline}
.hk-popup__foot{display:flex;border-top:1px solid var(--line);background:#EDF5F2}
.hk-popup__foot button{flex:1;padding:12px;font-size:14px;font-weight:700;color:#46524F}
.hk-popup__foot button+button{border-left:1px solid var(--line)}
.hk-popup__foot button:hover{color:#0A6358}
@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}
}

/* ── 디자인 모드 — 템플릿 효과를 끈다 (편집 바 아래로 헤더·모바일 메뉴·본문을 내리는 규칙은 js/hk.js 가 design-mode.css 다음에 붙인다) ── */
html.hk-design .rv{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,.82);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;pointer-events:auto}
html.hk-design .hk-manage-pin:hover{background:var(--primary)}
html.hk-design .hero[data-hk-manage] .hk-manage-pin{top:72px;right:24px}

/* ── ⑥ 사용 편의 (2026-10 보완) — 기본 화면의 템플릿 모양은 그대로, 좁은 화면 · 빈 목록 · 긴 글에서만 ── */
/* 휴대폰에서 달력 날짜 버튼도 누르기 쉬운 44px (템플릿 479px 이하 40px) */
@media (max-width:479px){.cal__d{height:44px}}
/* 빈 목록 안내(갤러리 0개) — 템플릿 .empty 를 격자 전체 폭으로 */
.grid>.hk-empty{grid-column:1/-1}
.hk-empty a{color:var(--acc-text);text-decoration:underline;margin-left:4px}
/* 띄어쓰기 없는 긴 이름·URL(관리자가 넣은 서비스 이름·소개 · 게시글 작성자)이 좁은 화면 밖으로 밀어내지 않게 */
.opt b,.opt span:not(.icon),.article__meta span{overflow-wrap:anywhere}