/* R8: 홈 고정 높이 배너, 메인 팝업, 관리자 팝업 관리, 프로그램 이미지 3:2 cover, 휴대폰 본인인증(준비 중) 버튼, 중복 신청 안내. 기존 토큰과 컴포넌트만 재사용한다. */

/* 1. 홈 대표 이미지 → 고정 높이 배너. 이미지는 cover로 채우고 글은 이미지 위에 얹는다. */
.public-hero.cover-banner{position:relative;display:block;height:340px;min-height:0;overflow:hidden;isolation:isolate;border-radius:16px;background:#faf3e7}
.cover-banner .banner-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;left:0;top:0;transform:none;z-index:-1;border-radius:0}
.cover-banner .banner-art img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:70% 42%}
.cover-banner .banner-art:after{display:block;content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,250,237,.95) 0%,rgba(255,250,237,.86) 34%,rgba(255,250,237,.4) 58%,rgba(255,250,237,0) 78%)}
.cover-banner .hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:100%;width:auto;max-width:620px;padding:0 52px}
.cover-banner .hero-copy .eyebrow{margin:0 0 12px}
.cover-banner .hero-copy h1{font-size:34px;line-height:1.4;margin:0}
.cover-banner .hero-copy p{margin:12px 0 20px;font-size:14px;color:#503923;max-width:420px}
.cover-banner .hero-copy .actions{margin:0}
.cover-banner .hero-caption{top:auto;bottom:12px;right:12px}

/* 2. 메인 팝업. 이미지는 contain으로 잘리지 않게, 하단 바에 오늘 하루 보지 않기와 닫기. */
/* 사용자 QA: 흰 테두리 카드형 팝업. 데스크톱 360px, 모바일 80vw, 최대 70vh. */
.popup-backdrop{padding:16px}
.site-popup{display:flex;flex-direction:column;width:min(360px,80vw);max-height:70vh;background:#fff;padding:10px;border-radius:12px;overflow:hidden;box-shadow:0 8px 40px rgba(20,46,38,.15)}
.popup-image{display:flex;align-items:center;justify-content:center;min-height:0;flex:1 1 auto;border-radius:8px;overflow:hidden;background:#faf3e7}
.popup-image img{display:block;width:100%;height:auto;max-height:calc(70vh - 90px);object-fit:contain}
.popup-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 4px 2px;color:var(--muted)}
.popup-bar .checkline{margin:0;font-size:11px;color:var(--muted);cursor:pointer}
.popup-bar .checkline input{width:15px;height:15px;min-height:0;accent-color:#688f47;margin:0}
.popup-close{min-height:36px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:11px;font-weight:500;cursor:pointer}
.popup-close:hover{background:var(--sage)}
.popup-close:focus-visible,.popup-bar .checkline input:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* 3. 관리자 팝업 관리 */
.popup-thumb{display:block;width:64px;height:64px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#f7f4ec}
.popup-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.popup-period{white-space:nowrap}
td .title-link small{display:block;margin-top:3px;font-size:10px;color:var(--muted);font-weight:400}
.popup-image-field .popup-preview{display:flex;align-items:center;justify-content:center;height:260px;margin:0 0 12px;border:1px solid var(--line);border-radius:8px;background:#f7f4ec;overflow:hidden}
.popup-preview img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.popup-preview.empty>span{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:400;color:var(--muted)}
.popup-preview.empty svg{width:22px;height:22px}
.popup-image-field.has-error .popup-preview{border-color:#bc6a5d;background:#fff9f6}
.popup-image-field.has-error .upload{border-color:#bc6a5d}
.popup-image-field .upload p{margin:0}
.popup-dates{grid-template-columns:1fr;gap:0}
form[data-form="popup"].invalid .field:not(.has-error) .form-error{display:none}
.btn.danger-outline{color:var(--danger);border-color:#e0c2bd}
.btn.danger-outline:hover{background:#fbefeb}

/* 4. 프로그램 이미지: 어떤 비율로 올려도 3:2 틀을 cover로 채운다. */
.program-card .art,.public-detail .art{aspect-ratio:3/2;height:auto!important;overflow:hidden;background:#f1eee6}
.art img{width:100%;height:100%;object-fit:cover;object-position:center}
.program-mini .mini-art{overflow:hidden;border-radius:5px}

/* 5. 휴대폰 본인인증(준비 중) */
.identity-box{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fafbf5}
.identity-box strong{font-size:13px}
.identity-box p.help{margin-top:4px}
.identity-box .identity-btn{flex-shrink:0}
.signup-panel .identity-box{margin-bottom:6px}

/* 6. 중복 신청 안내 */
.duplicate-notice .notice-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.public-form .duplicate-notice .notice-links .textlink{margin-left:0}

@media(max-width:760px){
 .public-hero.cover-banner{height:210px;border-radius:12px}
 .cover-banner .banner-art img{object-position:68% 40%}
 .cover-banner .banner-art:after{background:linear-gradient(90deg,rgba(255,250,237,.94) 0%,rgba(255,250,237,.84) 55%,rgba(255,250,237,.55) 100%)}
 .cover-banner .hero-copy{padding:0 18px;max-width:none}
 .cover-banner .hero-copy .eyebrow{font-size:9px;margin-bottom:6px}
 .cover-banner .hero-copy h1{font-size:19px;line-height:1.4}
 .cover-banner .hero-copy p{font-size:11px;line-height:1.6;margin:6px 0 10px}
 .cover-banner .hero-copy .btn.round{min-height:32px;padding:6px 14px;font-size:11px}
 .cover-banner .hero-caption{bottom:8px;right:8px}
 .popup-bar{padding:0 4px 0 12px}
 .popup-bar .checkline{font-size:12px}
 .popup-image-field .popup-preview{height:200px}
 .identity-box{flex-direction:column;align-items:stretch;gap:10px}
 .identity-box .identity-btn{width:100%}
}