/* =========================================================
   기능 추가분 스타일 — 템플릿(css/site.css)은 건드리지 않고 여기서만 더한다.
   템플릿 토큰(--gold · --ink · --ink-2 · --ink-3 · --on-dark · --on-dark-dim · --line-dark · --radius · --s-*)만 쓴다.
   ========================================================= */

/* ── 페이지 내용 · 로고 ── */
.cms-hidden{display:none!important}
/* 올린 이미지 로고 — 머리글 높이의 48%(1440 38px · 축소 31px · 휴대폰 27~31px). 글자 로고 데모라 원래 28px 로는 작아 보였다(R-2026-10-12B ⑦ 3)) */
.logo img.hk-cms-logo{display:block;height:calc(var(--header-h) * .48);width:auto;max-width:min(60vw,360px);object-fit:contain}
.header.is-shrink .logo img.hk-cms-logo{height:31px}
@media (max-width:1023px){.header.is-shrink .logo img.hk-cms-logo{height:27px}}
.hk-cms-logo-text{font-size:20px;font-weight:800;letter-spacing:.04em;line-height:1.1;color:var(--on-dark)}
.hk-legal{display:contents}

/* ── 머리글 축소 — 스크롤 중 머리글 높이가 줄어도 문서 높이는 그대로(줄어든 만큼 아래 여백으로 채운다 · 화면이 튀지 않게) ── */
.header{transition:margin-bottom .25s ease}
.header.is-shrink{margin-bottom:16px}
@media (max-width:1023px){ .header.is-shrink{margin-bottom:8px} }
@media (max-width:479px){ .header.is-shrink{margin-bottom:0} }
@media (prefers-reduced-motion:reduce){ .header{transition:none} }

/* ── 지도 (자리표시 → 구글 지도) ── */
.map-ph.hk-mapbox{padding:0;display:block;overflow:hidden;background:var(--ink-2)}
.hk-map{display:block;width:100%;height:100%;min-height:280px;border:0}

/* ── 폼 오류 · 알림 ── */
.hk-form-msg:empty,.hk-order-msg:empty,.hk-cart-msg:empty,.hk-pdp-msg:empty{display:none}
.hk-form-msg.is-ok{color:var(--gold)}
.hk-order-msg{margin-top:var(--s-4)}
.hk-cart-msg{margin:0 0 var(--s-4)}
[aria-invalid="true"].input{border-color:#E0837A}
.btn[aria-busy="true"]{opacity:.6;cursor:progress}
.qty button[disabled]{opacity:.35;cursor:not-allowed}
.card__quick[disabled]{opacity:.35;cursor:not-allowed}
@media (max-width:1023px){ input.input,select.input,textarea.input,.qty input{font-size:16px} }
.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);background:var(--gold);color:#1A1509;font-size:15px;font-weight:700;box-shadow:0 12px 32px rgba(0,0,0,.45);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.hk-toast.is-on{opacity:1;transform:translate(-50%,0)}
body.has-mobar .hk-toast{bottom:100px}

/* ── 회원 · 조회 · 주문 상세 ── */
.hk-narrow{max-width:480px;margin:0 auto}
.hk-narrow.hk-wide{max-width:720px}
.hk-links{flex-direction:row;flex-wrap:wrap}
.hk-my-grid{align-items:start}
.hk-my-order{margin:0 0 var(--s-6)}
.hk-order .box__title{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2)}
.hk-order .row .v{text-align:right;min-width:0}
.hk-order .row .k{min-width:0}
.hk-status{font-size:11px}
#my-orders-pager{margin-top:var(--s-6)}
.hk-order-pay{max-width:640px;margin:var(--s-4) auto 0;text-align:left}

/* ── 온라인 결제 안내(js/pay.js 공용 마크업 — panel · dl-row · done) 를 이 템플릿 상자 모양으로 ── */
.panel{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--radius);padding:var(--box-pad)}
.dl-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);margin:0;padding:var(--s-2) 0;font-size:14px}
.dl-row dt{color:var(--on-dark-dim)}
.dl-row dd{margin:0;text-align:right;min-width:0}
.card__text{font-size:14px;color:var(--on-dark-dim);line-height:1.7}
.card__text a,.box__text a,.hk-pay__note a{color:var(--gold);text-decoration:underline}
.hk-pay{margin-top:var(--s-4)}
.hk-pay__lead{margin:0 0 var(--s-4)}
.hk-pay__note{margin:var(--s-3) 0 0}
.hk-pay [data-pay-go]{margin-top:var(--s-4);background:var(--gold);color:#1A1509;border-color:var(--gold)}
.hk-pay__total{border-top:1px solid var(--line-dark);margin-top:var(--s-3);padding-top:var(--s-3)}
.hk-copy{display:inline-flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.done{text-align:center;padding:var(--s-6) 0}
.done .icon-circle{width:64px;height:64px;margin:0 auto}
.done__title{margin-top:var(--s-5);font-size:24px;font-weight:700}
.done__desc{margin-top:var(--s-3);color:var(--on-dark-dim)}
.done__box{margin-top:var(--s-6);text-align:left}
.done__btns{justify-content:center;margin-top:var(--s-6)}
.done__btns .btn:not(.btn--line){background:var(--gold);color:#1A1509;border-color:var(--gold)}

/* ── 정책 문서 · 편집기(관리자)가 만드는 본문 요소 — 저널 본문 · 정책 · FAQ 답변 ── */
.prose img{max-width:100%;height:auto;margin:6px 0 16px}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 16px}
.prose th,.prose td{padding:10px 12px;border:1px solid var(--line-dark);text-align:left;vertical-align:top}
.prose blockquote{margin:0 0 16px;padding:14px 20px;border-left:3px solid var(--gold);background:var(--ink-2)}
.acc__panel p{margin:0 0 10px}.acc__panel p:last-child{margin-bottom:0}
.acc__panel a{color:var(--gold);text-decoration:underline}
@media (max-width:767px){ .prose table{display:block;overflow-x:auto;white-space:nowrap} }

/* ── 카카오 상담 버튼 ── */
.kakao-float{position:fixed;right:24px;bottom:28px;z-index:72;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,.4);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 .footer{padding-bottom:56px}
body.has-kakao .totop{bottom:96px}
@media (max-width:767px){ .kakao-float{right:16px;bottom:20px;padding:0 14px} body.has-mobar .kakao-float{bottom:96px} body.has-kakao.has-mobar .totop{bottom:160px} }

/* ── 팝업 (딤 없음 · 9개 위치 · 이미지 원본 크기 · 하단 버튼 2개) ── */
.hk-popup{position:fixed;z-index:1200;width:max-content;max-width:calc(100vw - 32px);background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--radius);box-shadow:0 20px 48px rgba(0,0,0,.5);overflow:hidden;animation:hkPopIn .3s ease;color:var(--on-dark)}
@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) + 24px)}
.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:700;line-height:1.5}
.hk-popup__text{margin-top:8px;font-size:14px;line-height:1.75;color:var(--on-dark-dim);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(--gold);text-decoration:underline}
.hk-popup__foot{display:flex;border-top:1px solid var(--line-dark);background:var(--ink-3)}
.hk-popup__foot button{flex:1;min-height:44px;padding:12px;font-size:13px;font-weight:700;color:var(--on-dark-dim)}
.hk-popup__foot button+button{border-left:1px solid var(--line-dark)}
.hk-popup__foot button:hover{color:var(--gold)}
@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) + 12px)}
  .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 .hero[data-hk-manage] .hk-manage-pin,html.hk-design .fb[data-hk-manage] .hk-manage-pin{z-index:5}
#hkDesignBar{--accent:var(--gold)}
/* 좁은 화면 편집 중: 메인 배너 왼쪽 위 [영상] 핀이 배너 선택 글자("담향의 시작")를 가리지 않게 선택 줄을 핀 아래로 */
@media (max-width:767px){html.hk-design .hero__idx{top:calc(var(--s-5) + 40px)}}
/* 상세·장바구니 요약 줄 — 띄어쓰기 없는 긴 상품명·주소가 화면을 넓히지 않게(값 칸이 줄어들며 줄바꿈) */
.row dd,.row .v{min-width:0;overflow-wrap:anywhere}

/* =========================================================
   디자인 모드 1.1 (R-2026-10-12B) — 사진 보이는 방식 · 영상 · 로고 크기 · 세부 색상
   (공통 규칙은 키트 css/hk-kit.css 그대로, ★ 선택자는 이 템플릿의 클래스로 바꿨다)
   · 값은 js/hk.js(applyImage · applyVideo · applyTheme)와 프론트 서버(injectContents · injectTheme)가 넣는다.
   · 아래 규칙은 고객이 색·로고·영상·"전체 보이기"를 정했을 때만 걸린다 — 기본 화면은 원본 그대로.
   ========================================================= */
/* ── 사진 전체 보이기: 자르지 않고 통째로(여백이 생길 수 있다) ── */
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__media::after)와 같은 색 */
.hk-video-bg::after{content:"";position:absolute;inset:0;background:var(--hk-video-shade,linear-gradient(90deg,rgba(8,7,6,.86) 0%,rgba(8,7,6,.60) 44%,rgba(8,7,6,.25) 100%))}
.hk-video-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius);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}
/* 메인 배너 전체 영상(index.hero_video · .hero) — 영상을 넣으면 배너 사진을 가리고 영상이 뒤에 깔린다(배너 덮개 .hero__media::after · 문구는 그대로) */
.hero.has-video .hero__media>img,.hero.has-video .hero__media>.hk-banner-video>img{visibility:hidden}
.hero.has-video{--hk-video-shade:none}
.hero.has-video .hero__media{z-index:0}
/* 배너 한 장의 영상(banners.video_url → render.js .hk-banner-video[data-hk-video]) — 그 배너 사진 대신 */
.hero__media>.hk-banner-video{position:relative;width:100%;height:100%}
.hero__media>.hk-banner-video>img{width:100%;height:100%;object-fit:cover}
.hero__media>.hk-banner-video.has-video>img{visibility:hidden}
.hero__media>.hk-banner-video .hk-video-bg::after{background:none}
/* 브랜드 소개 영상(플레이어형) · 상품 상세 영상 — 위아래 여백만 */
.hk-intro-video.has-video{margin-top:var(--s-7)}
.hk-detail-video.has-video{margin:var(--s-6) 0}

/* ── 로고 크기 ★ ── 머리글 높이는 --header-h 로 고정이라 로고는 머리글 안에서만 커진다(머리글 높이 - 16px 까지) */
html[data-hk-logo] .logo svg,html[data-hk-logo] .logo img.hk-cms-logo,
html[data-hk-logo] .header.is-shrink .logo svg,html[data-hk-logo] .header.is-shrink .logo img.hk-cms-logo{height:min(var(--hk-logo-h),calc(var(--header-h) - 16px));width:auto;max-width:min(60vw,360px)}
html[data-hk-logo] .logo .hk-cms-logo-text{font-size:calc(min(var(--hk-logo-h),calc(var(--header-h) - 16px)) * .62)}
html[data-hk-logo] .logo{white-space:nowrap;max-width:min(46vw,420px);overflow:hidden;text-overflow:ellipsis}
/* 아주 좁은 휴대폰(360px 미만)은 머리글 아이콘 4개와 함께 들어가야 해서 로고를 30px 까지만 키운다(가로 넘침 방지) */
@media (max-width:359px){html[data-hk-logo] .logo svg,html[data-hk-logo] .logo img.hk-cms-logo,html[data-hk-logo] .header.is-shrink .logo svg,html[data-hk-logo] .header.is-shrink .logo img.hk-cms-logo{height:min(var(--hk-logo-h),30px)}}

/* ── 세부 색상 ★ ── 관리자가 색을 정한 항목만 덮어쓴다. 사진 위(.hero · .fb)·밝은 바탕 구역(.section--light) 글자는 그대로 */
html[data-hk-c~="btn_bg"] .btn--gold{background:var(--hk-btn-bg);border-color:var(--hk-btn-bg)}
html[data-hk-c~="btn_bg"] .btn--gold:hover{filter:brightness(.92)}
html[data-hk-c~="btn_text"] .btn--gold{color:var(--hk-btn-text)}
html[data-hk-c~="heading"] main :is(h1,h2,h3,.sec-title,.subhero__title):not(:is(.hero,.fb,.section--light,.is-light,.btn) *){color:var(--hk-heading)}
html[data-hk-c~="text"] body{color:var(--hk-text)}
html[data-hk-c~="text"] :is(.hero,.fb){color:var(--on-dark)}   /* 사진 위 배너 글자는 원래 색(body 색을 물려받지 않게) */
html[data-hk-c~="text"] main :is(p,li,dd,.sec-desc,.subhero__desc):not(:is(.hero,.fb,.section--light,.is-light,.btn,.badge,.chip) *):not(.btn){color:var(--hk-text)}
html[data-hk-c~="bg"] body,html[data-hk-c~="bg"] .section--dark{background-color:var(--hk-bg)}
html[data-hk-c~="header_bg"] .header{background-color:var(--hk-header-bg)}
html[data-hk-c~="header_text"] .header :is(.gnb a,.util a,.hdr-icons a,.hdr-icons button):not(.btn){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{color:var(--hk-footer-text)}
html[data-hk-c~="footer_text"] .footer :is(a,.footer__info,.footer__info span,.footer__legal a,p:not(.footer__h)):not(.btn){color:var(--hk-footer-text)}

/* =========================================================
   디자인 모드 1.2 (R-2026-10-12C) — 낱개·묶음 숨김 뒤 모양
   숨긴 요소에는 .cms-hidden(display:none)이 붙는다. 그 요소를 감싼 껍데기(li)·칸·여백이 남지 않게 정리한다.
   ========================================================= */
/* 메뉴·목록 <li><a> 에서 a(또는 하나뿐인 글자)를 숨기면 li 도 */
li:has(>a.cms-hidden:only-child),li:has(>.cms-hidden:only-child){display:none}
/* 바닥글 회사 정보 — 줄 이름(.hk-flabel)은 값과 한 칸 띄움만(원래 "상호 " 글자와 같은 간격 · .footer__info span 의 오른쪽 여백을 받지 않는다) · 줄을 모두 숨기면 묶음도 */
.footer__info span.hk-flabel{margin-right:0}
.footer__info:not(:has(.hk-frow:not(.cms-hidden))){display:none}
/* 바닥글 칸(Shop · Brand · Support · Contact)을 숨기면 남은 칸이 자리를 나눈다 */
.footer__cols:has(>.cms-hidden){grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
/* 2단 배치(사진 + 글 · 본문 + 옆 상자)에서 한 칸을 숨기면 남은 칸이 한 단을 다 쓴다 */
:is(.split,.layout-2,.grid--2):has(>.cms-hidden){grid-template-columns:minmax(0,1fr)}
.split>:has(>img.cms-hidden:only-child){display:none}
.split:has(>*>img.cms-hidden:only-child){grid-template-columns:minmax(0,1fr)}
/* 버튼 묶음에서 버튼을 하나 숨기면 남은 버튼만(빈 칸 없음) · 제목 줄(.sec-head)에서 글을 숨기면 남은 쪽만 */
.btn-group>.cms-hidden,.sec-head>.cms-hidden{display:none}