/* ============================================================
   운영 추가 스타일(레이어 서울 아트페어) — 템플릿 css/style.css 위에 얹는다. 템플릿 변수(--c-* · --s-* · --radius)만 쓴다.
   · 화면을 바꾸지 않는 것: 숨김 · 자리 묶음(display:contents) · 지도 iframe(자리표시와 같은 21:9 상자)
   · 새 기능 요소: 메시지 · 상자(모달 — 모바일 바텀시트) · 알림 · 팝업 · 영상 재생 · QR 이미지 · 로고(이미지/문자) · 휴대폰 입력 16px
   ============================================================ */
[hidden]{display:none!important}
.cms-hidden{display:none!important}
.hk-contents{display:contents}

/* 지도(오시는 길) — 자리표시(.map-box 21:9 · 테두리)와 같은 바깥 상자 */
.map-box.hk-mapbox{padding:0;display:block;overflow:hidden}
.hk-mapbox iframe{display:block;width:100%;height:100%;border:0}

/* 로고 — 이미지/문자 로고(디자인 모드) */
.logo img.hk-cms-logo{height:40px;width:auto;max-width:240px;object-fit:contain}
.hk-cms-logo-text{font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1.1;color:var(--c-text);white-space:nowrap}
@media (max-width:1200px){.logo img.hk-cms-logo{height:32px}}
@media (max-width:479px){.logo img.hk-cms-logo{height:28px}}

/* 서체 테마(디자인 모드 > 테마) */
.hk-font-serif h1,.hk-font-serif h2,.hk-font-serif h3{font-family:"Noto Serif KR","Apple Myungjo","AppleMyungjo","Nanum Myeongjo","Batang",Georgia,serif}

/* 메시지(폼 오류 · 완료) */
.hk-msg{margin:var(--s-3) 0;padding:var(--s-3) var(--s-4);border:1px solid var(--c-accent);background:var(--c-accent-soft);color:#b3401e;font-size:14px;font-weight:500;line-height:1.6;text-align:left}
.hk-msg.is-ok{border-color:var(--c-line);background:var(--c-grey);color:var(--c-text)}
.hk-msg .btn{margin-top:var(--s-3)}
.field [aria-invalid="true"]{border-color:var(--c-accent)}

/* 관리자 편집기로 쓴 본문(소식 · 정책 · FAQ 답변) */
.acc-body p+p{margin-top:var(--s-2)}
.prose ol{padding-left:var(--s-5);list-style:decimal;color:var(--c-sub);margin-bottom:var(--s-4)}
.article-body img{max-width:100%;height:auto}

/* 상자(모달) — 데스크톱 가운데 · 768px 이하 바텀시트 */
.hk-modal{position:fixed;inset:0;z-index:400;background:rgba(17,19,24,.55);display:flex;align-items:center;justify-content:center;padding:var(--s-5) var(--s-4);overflow-y:auto}
.hk-modal__box{position:relative;width:100%;max-width:600px;max-height:calc(100vh - 48px);overflow-y:auto;background:#fff;padding:var(--s-6);border-radius:var(--radius-lg);box-shadow:0 20px 48px rgba(0,0,0,.18)}
.hk-modal__box .step-title{padding-right:44px}
.hk-modal__close{position:absolute;top:var(--s-3);right:var(--s-3);width:44px;height:44px;display:grid;place-items:center;color:var(--c-text)}
.hk-sheet__sub{margin:calc(-1 * var(--s-3)) 0 var(--s-4);font-size:14px;color:var(--c-sub)}
.hk-sheet__foot{text-align:center;margin-top:var(--s-3)}
.hk-sheet__done{text-align:center;padding:var(--s-4) 0}
.hk-sheet__done h3{font-size:22px;font-weight:700}
.hk-sheet__done p{margin-top:var(--s-3);color:var(--c-sub)}
.hk-sheet__done .btn-group{justify-content:center;margin-top:var(--s-5)}
body.hk-lock{overflow:hidden}
@media (max-width:768px){
  .hk-modal{align-items:flex-end;padding:0}
  .hk-modal__box{max-width:none;max-height:88vh;border-radius:16px 16px 0 0;padding:var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));animation:hk-up .22s ease-out}
}
@keyframes hk-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.hk-modal__box{animation:none}}

/* 영상 재생 상자 */
.hk-video .hk-modal__box{max-width:960px;padding:0;background:#000;overflow:hidden}
.hk-video .hk-modal__close{color:#fff;z-index:2;background:rgba(0,0,0,.4);border-radius:50%}
.hk-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
@media (max-width:768px){.hk-video{align-items:center;padding:var(--s-4)}.hk-video .hk-modal__box{border-radius:var(--radius-lg);padding:0}}

/* QR — 템플릿 .qr 상자 안에 서버가 만든 QR 이미지 */
.qr.has-img{background:#fff;padding:var(--s-2)}
.qr img{width:100%;height:100%;display:block;image-rendering:pixelated}
.qr.is-off{background:var(--c-grey);text-align:center;padding:var(--s-3);font-size:12px;line-height:1.5}

/* 사전등록 달력 · 회차(site.js) */
.cal-nav .btn-icon[disabled]{opacity:.35;cursor:not-allowed}
.cal-day.is-fair small{display:none}
.slot.is-soon small{color:var(--c-accent)}
.slot.is-selected.is-soon small{color:#fff}
.hk-slot-day{font-size:13px;color:var(--c-sub);margin-bottom:var(--s-2)}

/* 등록 확인 — 신청한 프로그램 */
.hk-applist{border-top:1px solid var(--c-text)}
.hk-applist li{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;padding:var(--s-4) 0;border-bottom:1px solid var(--c-line);font-size:15px}
.hk-applist li .what{flex:1 1 240px;min-width:0}
.hk-applist li .what b{display:block;font-weight:500}
.hk-applist li .what span{font-size:13px;color:var(--c-sub)}
.hk-applist .hk-empty-row{color:var(--c-muted);justify-content:center}
.hk-lookup .summary{text-align:left}

/* 빈 목록 안내 */
.hk-empty{grid-column:1/-1;padding:var(--s-8) 0;text-align:center;color:var(--c-muted);border:1px dashed var(--c-line);list-style:none}
.hk-empty a{color:var(--c-text);text-decoration:underline;margin-left:4px}

/* 알림(hk.js) */
.hk-toast{position:fixed;left:50%;bottom:var(--s-7);transform:translate(-50%,16px);z-index:500;max-width:calc(100vw - 32px);padding:var(--s-3) var(--s-5);border-radius:999px;background:var(--c-text);color:#fff;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.hk-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* 카카오 상담 버튼(설정 kakao_url 이 있을 때) */
.kakao-float{position:fixed;right:var(--s-5);bottom:84px;z-index:90;display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border-radius:999px;background:#FEE500;color:#191600;font-weight:600;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
.kakao-float.show{opacity:1;transform:none}
.kakao-float svg{width:20px;height:20px}

/* 팝업(관리자 [팝업]) */
.hk-popup{position:fixed;z-index:350;width:max-content;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--c-line);overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.18)}
.hk-popup.isX-left{left:24px}.hk-popup.isX-center{left:50%}.hk-popup.isX-right{right:24px}
.hk-popup.isY-top{top:120px}.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}
.hk-popup__body{padding:var(--s-5)}
.hk-popup__body h3{font-size:17px;font-weight:600}
.hk-popup__text{margin-top:var(--s-2);font-size:14px;line-height:1.7;color:var(--c-sub);overflow-wrap:anywhere}
.hk-popup__foot{display:flex;border-top:1px solid var(--c-line);background:var(--c-grey)}
.hk-popup__foot button{flex:1;min-height:44px;font-size:13px;font-weight:500;color:var(--c-sub)}
.hk-popup__foot button+button{border-left:1px solid var(--c-line)}
@media (max-width:767px){.hk-popup{left:16px!important;right:16px!important;width:auto;--tx:0}}

/* ⑥ 휴대폰 입력칸 글꼴: 템플릿 입력칸은 이미 16px(body 16px · input{font:inherit}) — 따로 넣지 않는다.
   새로 만든 칸도 같은 .field 를 쓴다. 혹시 작은 글꼴을 쓰는 칸이 생기면 아래처럼 입력칸에만 16px. */
@media (max-width:767px){.hk-modal input,.hk-modal select,.hk-modal textarea{font-size:16px}}

/* 지도 상자 높이 — 자리표시는 좁은 화면에서 안내 글 높이(약 174px)만큼 커졌다. 같은 높이를 유지 */
.map-box.hk-mapbox{width:100%;min-height:174px}

/* ⑥ 긴 글 — 띄어쓰기 없는 긴 이름 · 이메일 · 작가명 · 주소가 화면 밖으로 밀어내지 않게(사전등록 요약 · 등록 확인 · 갤러리 상세) */
.summary li>*,.kv li>*,.info-list li>*{min-width:0;overflow-wrap:anywhere}