/* =========================================================
   기능 추가분 스타일 — 템플릿(css/style.css)은 건드리지 않고 여기서만 더한다.
   템플릿 토큰(--primary · --accent · --ink · --ink-2 · --ink-3 · --line · --line-2 · --bg-soft · --s-* · --radius · --header-h)만 쓴다.
   기본 화면(방문자 · 데이터 그대로)은 템플릿과 같아야 한다 — 아래 규칙은 새 화면 · 숨김 · 고객이 색·로고·영상을 정했을 때만 걸린다
   (예외: ⑥ 사용 편의 — 머리글 축소 때 문서 높이 유지 · 휴대폰 입력칸 16px).
   ========================================================= */

/* ── 페이지 내용 · 로고 ── */
.cms-hidden{display:none!important}
/* 올린 이미지 로고 — 머리글 높이의 50%(1440 40px · 휴대폰 28px). 원래 로고(SVG 26px)보다 작아 보이지 않게 */
.logo img.hk-cms-logo{display:block;height:min(calc(var(--header-h) * .5),var(--hk-logo-cap,999px));width:auto;max-width:min(60vw,360px);object-fit:contain}
.footer__logo img.hk-cms-logo{height:32px;width:auto;max-width:min(60vw,240px);object-fit:contain}
.hk-cms-logo-text{font-size:20px;font-weight:800;letter-spacing:.04em;line-height:1.1;white-space:nowrap}

/* ── 머리글 회원 아이콘(로그인 · 마이페이지) ── */
.util__icons [data-hk-auth][hidden]{display:none!important}
@media (max-width:379px){.util__icons [data-hk-auth]{display:none!important}}   /* 아주 좁은 화면: 로그인은 휴대폰 메뉴에 있다 */

/* ── ⑥ 스크롤 머리글: 높이가 줄어드는 만큼 아래 여백을 늘려 문서 높이를 그대로(스크롤 위치가 되돌아가 떨리지 않게) ── */
.header{transition:box-shadow .25s ease,background-color .25s ease,margin-bottom .25s ease}   /* 높이(.header__inner height .25s ease)와 같은 시간·곡선 */
.header.is-shrink{margin-bottom:calc(var(--header-h) - 64px)}
@media (max-width:1023px){.header.is-shrink{margin-bottom:max(0px,calc(var(--header-h) - 56px))}}
@media (prefers-reduced-motion:reduce){.header{transition:none}}

/* ── ⑥ 휴대폰 입력칸 16px(아이폰이 화면을 확대하지 않게) ── */
@media (max-width:767px){.input,.textarea,select.input,.select{font-size:16px}}

/* ── 지도 (자리표시 → 구글 지도 · 바깥 상자는 자리표시와 같다) ── */
.map-placeholder.hk-mapbox{padding:0;overflow:hidden;position:relative}
.map-placeholder.hk-mapbox .hk-map{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}

/* ── 상품 상세 영상 ── */
.hk-pd-video{margin-top:var(--s-4);width:100%;min-width:0}

/* ── 바닥글 회사 정보: 줄(.hk-fline) · 항목(.hk-frow) — 구분점(·)은 앞 항목이 보일 때만, 줄의 항목이 모두 숨으면 줄도 ── */
.hk-fline{display:block}
.hk-frow:not(.cms-hidden) ~ .hk-frow:not(.cms-hidden)::before{content:" · "}
.hk-fline:not(:has(.hk-frow:not(.cms-hidden))){display:none}

/* ── 폼 오류 · 알림 · 잠금 ── */
.hk-form-msg:empty{display:none}
.hk-form-msg{margin:var(--s-3) 0 0;font-size:14px}
.hk-form-msg.is-ok{color:var(--ink-2)}
.btn[aria-busy="true"],.btn.is-busy,.btn[disabled]{opacity:.6;cursor:progress}
.btn.is-disabled{opacity:.45;pointer-events:none}
.hk-toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);z-index:1400;max-width:calc(100vw - 32px);padding:12px 24px;border-radius:2px;background:#1c1a17;color:#fff;font-size:14px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;text-align:center}
.hk-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ── 새 화면(로그인·가입·마이페이지·조회·결제 결과) — 템플릿 폼·표·상자 클래스로 조립 ── */
.hk-narrow{max-width:520px}
.hk-lead{color:var(--ink-2);font-size:15px;margin-bottom:var(--s-6)}
.hk-sub{margin-top:var(--s-5);font-size:14px;color:var(--ink-2);text-align:center}
.hk-links{margin-top:var(--s-6);justify-content:center}
.hk-block{width:100%;justify-content:center;margin-top:var(--s-3)}
.hk-panel{margin-top:var(--s-6)}
.hk-my-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6);align-items:start}
@media (max-width:767px){.hk-my-grid{grid-template-columns:1fr}}
.hk-box{border:1px solid var(--line);padding:var(--s-5);background:#fff}
.hk-box .buybox__h{margin-bottom:var(--s-4)}
.hk-empty{padding:var(--s-7) 0;text-align:center;color:var(--ink-2)}
.hk-order{border-top:1px solid var(--ink);padding:var(--s-5) 0;margin-bottom:var(--s-5)}
.hk-order__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3)}
.hk-order__no{font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hk-status{display:inline-flex;align-items:center;height:26px;padding:0 10px;background:var(--bg-soft);font-size:13px;font-weight:600}
.hk-order .pinfo__rows dd,.hk-order .pinfo__rows dt{overflow-wrap:anywhere}
.hk-order .btn-group{margin-top:var(--s-4)}

/* ── 온라인 결제 안내(js/pay.js) ── */
.hk-pay{margin-top:var(--s-5);border:1px solid var(--line);padding:var(--s-5);background:#fff;text-align:left}
.hk-pay__lead{font-size:15px;font-weight:600}
.hk-pay__note{margin-top:var(--s-2);font-size:13px;color:var(--ink-3)}
.hk-pay__methods{margin-top:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hk-pay__total{margin-top:var(--s-4)}
.hk-pay .btn{margin-top:var(--s-4)}
.hk-payres{text-align:center}
.hk-copy{margin-left:var(--s-2)}

/* ── 상품 목록·상세: 관리자가 넣는 긴 글(60자 이름 · 띄어쓰기 없는 영문)이 화면 밖으로 밀지 않게 ── */
[data-hk-text="data"],.pcard__name,.pinfo__name,.rcard__title,.rcard__text,.nlist__title,.citem__name,.citem__opt,.prose,.prose *,[data-pd],[data-nv]{overflow-wrap:anywhere}
.pdetail>*,.cart-layout>*{min-width:0}
/* 품절 상품 — 담기·구매 버튼 */
.buybox [disabled]{opacity:.45;cursor:not-allowed}

/* ── ⑥ 휴대폰에서 구매 상자 열기(데스크톱과 같은 옵션 상자를 아래에서 올라오는 시트로) ── */
.hk-sheet-dim{position:fixed;inset:0;z-index:70;background:rgba(28,26,23,.45)}
.hk-sheet-dim[hidden]{display:none}

/* ── 영상 자리 ── */
.hero{--hk-video-shade:none}
.hero.has-video .hero__slide .hero__img{visibility:hidden}
.hero__slide.has-video>.hero__img{visibility:hidden}

/* ── 디자인 모드: 메뉴·목록 관리 안내 핀(data-hk-manage → a.hk-manage-pin) — 편집 중에만 작은 알약으로 ── */
.hk-manage-pin{display:none}
html:not(.hk-design) [data-hk-manage-pin]{display:none!important}
html.hk-design [data-hk-manage]{position:relative}
html.hk-design .hk-manage-pin{display:inline-flex;align-items:center;position:absolute;z-index:6;left:0;bottom:100%;margin-bottom:6px;padding:3px 10px;border-radius:999px;background:#1d4ed8;color:#fff!important;font:600 12px/1.5 "Pretendard",system-ui,sans-serif;letter-spacing:0;text-decoration:none;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.25)}
html.hk-design .hero>.hk-manage-pin{bottom:auto;top:10px;left:var(--gutter)}
html.hk-design [data-hk-manage]:not(.hero):not(tbody){margin-top:34px!important}
html.hk-design tbody[data-hk-manage]>.hk-manage-pin{display:none}
/* 편집 중에만: 바닥글 SNS 아이콘 사이를 벌려 아이콘마다 붙는 [표시/숨김] 핀이 서로 겹치지 않게 · 좁은 화면에서 구역 핀이 첫 제목을 가리지 않게 구역 위 여백을 핀 높이만큼 */
html.hk-design .footer__sns{gap:44px;padding-top:30px}
@media (max-width:767px){html.hk-design main section[data-cms-section]{padding-top:max(var(--sec-pad),64px)}}
@media (max-width:479px){html.hk-design .iggrid .hk-pill span{display:none}}   /* 좁은 화면: 인스타그램 사진 핀은 그림만(오른쪽 끝 사진의 핀이 화면 밖으로 1px 나가지 않게) */

/* ============================================================
   디자인 모드 1.1 공통 규칙(css/hk-kit.css) — 사진 보이는 방식 · 영상 · 로고 크기 · 세부 색상 · 1.2 숨김
   ============================================================ */
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;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}
/* 히어로 영상은 슬라이드 사진 자리에 깔린다(글자·화살표·점은 그 위) */
.hero.has-video>.hk-video-bg{z-index:0}
.hero.has-video .hero__track{position:relative;z-index:1}
.hero.has-video .hero__nav,.hero.has-video .hero__dots{z-index:2}

/* ── 로고 크기 ── 로고 높이는 머리글 높이를 넘지 않게(머리글 - 12px) · 모든 .logo(머리글·휴대폰 메뉴)와 바닥글 로고 */
:root{--hk-logo-cap:calc(var(--header-h) - 12px)}
@media (max-width:767px){:root{--hk-logo-cap:36px}}
@media (max-width:479px){:root{--hk-logo-cap:26px}}
@media (max-width:379px){:root{--hk-logo-cap:24px}}
html[data-hk-logo] .logo img.hk-cms-logo,
html[data-hk-logo] .logo svg{height:min(var(--hk-logo-h),var(--hk-logo-cap));width:auto;max-width:min(60vw,360px)}
html[data-hk-logo] .footer__logo svg,html[data-hk-logo] .footer__logo img.hk-cms-logo{height:min(var(--hk-logo-h),48px);width:auto;max-width:min(60vw,240px)}
html[data-hk-logo] .logo,html[data-hk-logo] .logo .hk-cms-logo-text{font-size:calc(min(var(--hk-logo-h),var(--hk-logo-cap)) * .62)}
html[data-hk-logo] .logo{white-space:nowrap;max-width:min(46vw,420px);overflow:hidden}
@media (max-width:479px){html[data-hk-logo] .header .logo{max-width:40vw}}

/* ── 세부 색상 ── 관리자가 색을 정한 항목만 덮어쓴다(사진 위 글자 · 배너 글자는 제외) */
html[data-hk-c~="btn_bg"] .btn-primary{background:var(--hk-btn-bg);border-color:var(--hk-btn-bg)}
html[data-hk-c~="btn_text"] .btn-primary{color:var(--hk-btn-text)}
html[data-hk-c~="heading"] :is(h1,h2,h3,h4):not(.hero__title):not(.hero *){color:var(--hk-heading)}
html[data-hk-c~="text"] body{color:var(--hk-text)}
html[data-hk-c~="text"] :is(.section-desc,.promo__desc,.rcard__text,.prose p,.prose li,.notice-box,.pinfo__row dd){color:var(--hk-text)}
html[data-hk-c~="bg"] body,html[data-hk-c~="bg"] .section:not(.section--soft){background-color:var(--hk-bg)}
html[data-hk-c~="header_bg"] .header,html[data-hk-c~="header_bg"] .header.is-shrink{background-color:var(--hk-header-bg)}
html[data-hk-c~="header_text"] .header :is(.gnb a,.util a,.util__icons a,.hamburger,.logo){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,.footer__h,.footer__list a,.footer__hours,.footer__biz,.footer__tel){color:var(--hk-footer-text)}

/* ── 1.2 낱개·묶음 숨김 ── 글자·메뉴 하나를 숨겼을 때 빈 칸·구분선·여백이 남지 않게 */
li:has(> a.cms-hidden:only-child),li:has(> .cms-hidden:only-child){display:none}
.btn-group:not(:has(> :not(.cms-hidden))){display:none}
.center-more:not(:has(> :not(.cms-hidden))){display:none}
.promo__link:not(:has(> :not(.cms-hidden))){display:none}
.promo__item:has(> .promo__img.cms-hidden) .promo__text,.promo__item:has(> .promo__img > img.cms-hidden:only-child) .promo__text{grid-column:1 / -1}
.promo__img:has(> img.cms-hidden:only-child){display:none}
.pinfo__row:has(> dd.cms-hidden){display:none}
.crumb strong.cms-hidden{display:none}