/* =========================================================
   기능 추가분 스타일 — 템플릿(css/style.css)은 건드리지 않고 여기서만 더한다.
   템플릿 토큰(--paper · --surface · --ink · --muted · --line · --line-2 · --brand · --accent · --accent-s · --r · --hd · --gutter)만 쓴다.
   기본 화면(관리자가 아무것도 바꾸지 않은 상태)은 원본과 같아야 한다 — 아래 규칙은 새 요소이거나 "정했을 때만" 걸린다.
   ========================================================= */

/* ── 페이지 내용 · 테마 ── */
.cms-hidden{display:none!important}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--font-heading,inherit)}
/* 올린 로고 이미지 · 문자 로고 (원래 SVG 로고는 템플릿 크기 그대로) */
.logo img.hk-cms-logo{display:block;height:44px;width:auto;max-width:min(60vw,360px);object-fit:contain}
.hk-cms-logo-text{font-size:24px;font-weight:800;letter-spacing:-.04em;line-height:1.1;white-space:nowrap}
@media (max-width:1023px){.logo img.hk-cms-logo{height:40px}}
@media (max-width:479px){.logo img.hk-cms-logo{height:30px}.hk-cms-logo-text{font-size:20px}}
.hk-tel-num{display:block}

/* ── 바닥글: 회사 정보 줄 · 약관 링크 ──
   한 줄에 둘이 있는 자리(대표·사업자등록번호 / 대표전화·이메일)는 줄마다 요소 하나 — 구분 기호는 css 로 "앞 줄이 있을 때만" */
.ft__info .hk-r+.hk-r::before{content:" · "}
.ft__info .hk-r.cms-hidden+.hk-r::before{content:none}
.ft__info .hk-rows:not(:has(>.hk-r:not(.cms-hidden))){display:none}
.drawer__foot p .cms-hidden+br{display:none}
.hk-legal{display:inline-flex;gap:14px;flex-wrap:wrap}
.hk-legal:empty{display:none}

/* ── 오시는 길 지도 (자리표시 → 구글 지도) — 크기·모서리는 자리표시와 같다 ── */
.mapbox.hk-mapwrap{overflow:hidden;background:#E7E1D7;align-items:flex-end;justify-content:flex-start}
.hk-mapbox{position:absolute;inset:0}
.hk-mapbox .hk-map{display:block;width:100%;height:100%;border:0}
.mapbox.hk-mapwrap .pin{position:relative;z-index:2;margin:16px;text-align:left;pointer-events:none;box-shadow:0 6px 18px rgba(20,18,16,.12)}
@media (max-width:767px){
  /* 원본 자리표시는 좁은 화면에서 안내 상자 높이만큼 늘어난다(390 기준 169px) — 같은 높이를 지킨다 */
  .mapbox.hk-mapwrap{width:100%;min-height:169px}
  .mapbox.hk-mapwrap .pin{margin:10px;padding:10px 12px;max-width:72%}
  .mapbox.hk-mapwrap .pin b{font-size:13.5px}
  .mapbox.hk-mapwrap .pin span{font-size:12px;line-height:1.5}
}

/* ── 영상 자리 ── */
.hk-intro-video.has-video{margin-bottom:22px}
.hk-detail-video.has-video{margin-bottom:16px}
.hero{--hk-video-shade:none}                       /* 배너 덮개(.hero__bg::after)가 영상 위에도 그대로 깔린다 */
.hero.has-video .hero__bg img{opacity:0}
.hk-vbadge{position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50%;background:rgba(20,18,16,.72);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}

/* ── 정책 문서 (개인정보처리방침 · 이용약관 — 관리자 편집기가 만드는 본문) ── */
.hk-prose{font-size:15px;color:#3E3A35;line-height:1.8}
.hk-prose h2{font-size:19px;margin:30px 0 10px}
.hk-prose h2:first-child{margin-top:0}
.hk-prose h3{font-size:16px;margin:22px 0 8px}
.hk-prose p{margin:0 0 12px}
.hk-prose ul{list-style:disc;padding-left:20px;margin:0 0 14px}
.hk-prose ol{list-style:decimal;padding-left:20px;margin:0 0 14px}
.hk-prose li{margin-bottom:4px}
.hk-prose li>p{margin:0}
.hk-prose a{color:var(--accent);text-decoration:underline}
.hk-prose table{width:100%;min-width:0;border-collapse:collapse;font-size:14px;margin:0 0 16px}
.hk-prose th,.hk-prose td{padding:10px 12px;border:1px solid var(--line);white-space:normal;text-align:left;vertical-align:top}
.hk-prose th{background:var(--paper);color:var(--ink)}
.hk-prose blockquote{margin:0 0 14px;padding:12px 18px;border-left:3px solid var(--accent);background:var(--paper)}
.hk-prose hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.hk-prose img{max-width:100%;height:auto}
.faq .a p+p,.faq .a ul,.faq .a ol{margin-top:8px}
.faq .a ul{list-style:disc;padding-left:18px}
.faq .a a{color:var(--accent);text-decoration:underline}
@media (max-width:767px){.hk-prose table{display:block;overflow-x:auto}}

/* ── 견적 신청 — 서버 오류 안내 · 휴대폰 입력칸 확대 방지(iOS 는 16px 미만이면 화면을 키운다) ── */
.hk-form-msg{margin-top:14px;font-size:13.5px;font-weight:700;color:#C0392B;text-align:center}
@media (max-width:767px){.field input,.field select,.field textarea{font-size:16px}}
.cal__grid button[data-why]{position:relative}

/* ── 알림 · 카카오 상담 · 팝업 ── */
.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(--r);background:var(--ink);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)}
.kakao-float{position:fixed;right:24px;bottom:28px;z-index:65;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,.22);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 .ft{padding-bottom:64px}
@media (max-width:767px){.kakao-float{right:16px;bottom:20px;padding:0 14px}}
.hk-popup{position:fixed;z-index:85;width:max-content;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 20px 48px rgba(20,18,16,.28);overflow:hidden;animation:hkPopIn .3s ease;color:var(--ink)}
@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(--hd) + 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(--muted);overflow-wrap:anywhere}
.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(--paper)}
.hk-popup__foot button{flex:1;min-height:44px;padding:12px;font-size:13px;font-weight:700;color:var(--muted);border:0;background:transparent}
.hk-popup__foot button+button{border-left:1px solid var(--line)}
.hk-popup__foot button:hover{color:var(--accent)}
@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(--hd) + 8px)}.hk-popup.isY-bottom{bottom:12px}
}

/* ── 디자인 모드 — 목록을 관리자 화면에서 고치라는 안내 핀(방문자에게는 없다) ── */
.hk-manage-pin{display:none}
html.hk-design [data-hk-manage]{position:relative}
html.hk-design .hk-manage-pin{position:absolute;z-index:45;top:6px;right:6px;display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:#7c3aed;color:#fff!important;font:700 12px/1 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",sans-serif;letter-spacing:0;white-space:nowrap;text-decoration:none!important;box-shadow:0 2px 8px rgba(0,0,0,.22);pointer-events:auto}
html.hk-design .hk-manage-pin:hover{background:#6d28d9}
/* 디자인 모드에서만 — 섹션 핀(위·아래·숨기기)이 첫 줄 글자를 덮지 않게 위 여백을 핀 높이만큼 둔다(방문자 화면은 그대로) */
html.hk-design [data-cms-section="index.sec_requests"],html.hk-design [data-cms-section="about.sec_stats"]{padding-top:52px!important}
@media (max-width:1023px){html.hk-design .hero__in{padding-top:96px}}
html.hk-design .rv{opacity:1!important;transform:none!important;transition:none!important}

/* =========================================================
   디자인 모드 1.1 공통 규칙(css/hk-kit.css) — 사진 보이는 방식 · 영상 · 로고 크기 · 세부 색상 · 1.2 낱개·묶음 숨김
   ★ 세부 색상·로고 크기 선택자는 이 템플릿의 클래스로 바꿨다(js/hk.js 의 THEME_COLORS · LOGO_RANGE 와 짝)
   ========================================================= */
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(--r);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}

/* ── 로고 크기 ★ ── 머리글은 높이를 고정(var(--hd))했으므로 로고를 정했을 때만 min-height 로 푼다 */
html[data-hk-logo] .logo img,html[data-hk-logo] .logo svg{height:var(--hk-logo-h)!important;width:auto;max-width:min(60vw,360px);object-fit:contain}
html[data-hk-logo] .logo .hk-cms-logo-text{font-size:calc(var(--hk-logo-h) * .62)}
html[data-hk-logo] .logo{white-space:nowrap;max-width:min(60vw,420px);overflow:hidden;text-overflow:ellipsis}
html[data-hk-logo] .hd__in{height:auto;min-height:var(--hd);padding-top:6px;padding-bottom:6px}
html[data-hk-logo] .ft__logo img[data-cms-img="common.footer_logo"]{height:calc(var(--hk-logo-h) * .54)!important}
@media (max-width:479px){html[data-hk-logo] .logo img,html[data-hk-logo] .logo svg{height:min(var(--hk-logo-h),48px)!important;max-width:52vw}}

/* ── 세부 색상 ★ ── 관리자가 색을 정한 항목만 덮어쓴다(사진·짙은 바탕 위 글자는 제외) */
html[data-hk-c~="btn_bg"] .btn--accent{background:var(--hk-btn-bg);border-color:var(--hk-btn-bg)}
html[data-hk-c~="btn_bg"] .btn--accent:hover{background:var(--hk-btn-bg);border-color:var(--hk-btn-bg);filter:brightness(.92)}
html[data-hk-c~="btn_bg"] .opt.is-on,html[data-hk-c~="btn_bg"] .cal__grid button.is-on{background:var(--hk-btn-bg);border-color:var(--hk-btn-bg)}
html[data-hk-c~="btn_text"] .btn--accent,html[data-hk-c~="btn_text"] .opt.is-on{color:var(--hk-btn-text)}
html[data-hk-c~="heading"] :is(h1,h2,h3,h4):not(.hero *,.live *,.cta *,.ft *){color:var(--hk-heading)}
html[data-hk-c~="text"] body{color:var(--hk-text)}
html[data-hk-c~="text"] :is(.sub,.phead p,.story p,.proc p,.card__meta,.desc,.faq .a,.stats .k):not(.live *){color:var(--hk-text)}
html[data-hk-c~="bg"] body{background-color:var(--hk-bg)}
html[data-hk-c~="header_bg"] .hd{background:var(--hk-header-bg)}
html[data-hk-c~="header_text"] .hd :is(.gnb a,.hd__tel,.hd__tel span){color:var(--hk-header-text)}
html[data-hk-c~="header_text"] .hd .burger i{background:var(--hk-header-text)}
html[data-hk-c~="footer_bg"] .ft{background-color:var(--hk-footer-bg)}
html[data-hk-c~="footer_bg"] .ft__bar{border-top-color:color-mix(in srgb,var(--hk-footer-bg) 80%,#fff 20%)}
html[data-hk-c~="footer_text"] :is(.ft,.ft a,.ft__bar){color:var(--hk-footer-text)}

/* ── 1.2 낱개·묶음 숨김 ── 빈 칸·구분선·여백이 남지 않게 */
li:has(>a.cms-hidden:only-child),li:has(>.cms-hidden:only-child){display:none}
.story:has(>.ph.cms-hidden),.story:has(>.ph>img.cms-hidden){grid-template-columns:1fr}
.story>.ph:has(>img.cms-hidden){display:none}
.hero__bg:has(>img.cms-hidden){background:#3a3a36}
.cta__r .sns:not(:has(>a:not(.cms-hidden))){display:none}
.drawer__foot p:not(:has(>span:not(.cms-hidden))){display:none}
.lcard__s b:empty{display:none}
/* 머리글 상담 전화 — 번호는 이름표(작은 글자, .hd__tel span)와 따로 크게 (2026-10-20) */
.hd__tel .hk-tel-num{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.15;color:inherit;margin-top:1px}
@media (max-width:1279px){.hd__tel .hk-tel-num{font-size:17px}}
/* 견적 신청 — 금액 표시 안 함(공간 유형 단가가 모두 0): 상자 제목을 안내 문구로 크게 (js/estimate.js NO_PRICE) */
.calc--noprice{border-color:var(--line)}
.calc--noprice .lab{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.calc--noprice .note{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.6}
/* 메인 상단 배너 큰 제목 서체 — 설정 theme_hero_font="blackhan" 일 때만 (frontend/server.js injectHeroFont) */
html[data-hk-hero-font="blackhan"] .hero h1{font-family:"Black Han Sans",var(--sans);font-weight:400;letter-spacing:-.005em;line-height:1.2}