/**
 * pages/extracan.css — 엑스트라 크리미 생 캔 캠페인 전용
 * 사용: extracreamydraftcan.php / smoooooooth.php (+ campaign)
 * 마크업 prefix: hm-dt-can > hdc-*
 */

body:has(.hdc-smooth-with).is-scrolled{padding-top: 90px !important}

@media (max-width: 1024px) {
    body:has(.hdc-smooth-with).is-scrolled{padding-top: 53px !important}
}

.hm-dt-can { background: var(--color-hm-cream); color: var(--color-hm-dark-green); font-family: "Pretendard", sans-serif; }

/* ── KV (Hero) ── */
.hdc-kv { position: relative; }
.hdc-kv__inner{position: absolute; top:0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%;}
/* .hdc-kv__inner .hdc-layers-wrap { display: flex; justify-content: space-between; width: 1362px; position:relative; top:15%; left:-4%; } */
.hdc-kv__inner .left{position:absolute; top:59%; left:26%; transform:translate(-50%, -50%); max-width:520px; width:28%; padding-top:55px}
.hdc-kv__inner .right{position:absolute; top:61%; left:72%; transform:translate(-50%, -50%); max-width:462px; width:25%;}
.hdc-kv__inner .hdc_cta_btn{ width: 100%; }

/* 공통 배경(골드) backdrop — 이미지가 KV 높이 결정 */
.hdc-kv__backdrop { position: relative; z-index: 0; overflow: hidden; }
.hdc-kv__bg { display: block; }
.hdc-kv__bg img { display: block; width: 100%; }
/* 전면 비주얼(투명 PNG) — 배경 위(z1 shimmer) 아래/텍스트 위 */
.hdc-kv__overlay { position: absolute; inset: 0; z-index: 2; }
.hdc-kv__overlay img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hdc-kv__inner { z-index: 3; }

/* Diagonal shimmer — 배경 위(z1), 오버레이 아래에서 천천히 무한 반복 */
.hdc-kv__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
    transform: translateX(-130%);
    pointer-events: none;
    z-index: 1;
    animation: hdc-kv-shimmer 6s ease-in-out 0.5s infinite;
}
@keyframes hdc-kv-shimmer {
    0%   { transform: translateX(-130%); }
    60%  { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
    .hdc-kv__backdrop::after { animation: none; }
}

@media (max-width: 1024px) {
    .hm_cta_btn{ height: 55px; }
}

@media (max-width: 768px) {
    /* 모바일도 PC 모델 그대로: 모바일 골드 배경(-mo)이 높이 결정 + shimmer + 투명 오버레이(-mo) */
    /* 세로 배경: PC처럼 대각선 좌→우(translateX) 유지하되 띠를 얇게 (넓으면 끝부분이 뭉침) */
    .hdc-kv__backdrop::after { background: linear-gradient(120deg, transparent 43%, rgba(255, 255, 255, 0.22) 50%, transparent 57%); }
    .hdc-kv__bg, .hdc-kv__bg img { width: 100%; }
    .hdc-kv__inner { right: auto; left: 50%; bottom: 3%; transform: translateX(-50%); width: 90%; align-items: center; gap: 20px; }
    .hdc-kv__inner { align-items: flex-end; bottom :24px; height: auto; }
    .hdc-kv__inner img { display: none; }
    .hdc-kv__inner .hdc_cta_btn { width: 305px; max-width: 100%; height: 48px; padding: 14px 27px; font-size: 16px; }
}

/* ── 신제품 소개 ── */
.hdc-new-can { position: relative; padding: 120px 0; }
.hdcnc-txt { text-align: center; }
.hdcnc-txt h1 { margin-bottom: 80px; font-size: 24px; font-weight: 400; letter-spacing: -0.7px; color: var(--color-hm-green); }
.hdcnc-flex { display: flex; justify-content: space-between; align-items: center; gap: 60px; max-width: 90%; width: 1440px; margin: auto; }
.hdcncf-left { width: 480px; }
.hdcncf-center { width: 406px; }
.hdcncf-right { width: 480px; }
.hdcncf-right p { font-family: 'Seongang', "Pretendard", sans-serif; color: var(--color-hm-green); font-size: 68px; font-weight: 400; line-height: 92.48px; letter-spacing: -0.7px; }
.hdcncf-right .hdcncf-new-pkg{margin-bottom:8px; color:#C07712; font-size:43px; line-height:136%;}
.hdcncf-center img { width: 100%; object-fit: contain; }

@media (max-width: 1024px) {
    .hdcncf-right p { font-size: 45px; line-height: 60px; }
    .hdcncf-right .hdcncf-new-pkg{font-size:32px;}
}

@media (max-width: 768px) {
    .hdc-new-can { padding: 10%; background: linear-gradient(to bottom, #F1E9DD 0%, #E7D5BB 100%); }
    .hdcnc-txt h1 { margin-bottom: 30px; font-size: 15px; }
    .hdcnc-flex { flex-direction: column; gap: 30px }
    .hdcncf-left { width: 100%; }
    .hdcncf-right p { font-size: 40px; line-height: 50px; text-align: center; }
    .hdcncf-right .hdcncf-new-pkg{font-size:25px;}
    .hdcncf-center img { width:90%; max-height: 100vh; }
}

/* ── Smooth Foam (FULL OPEN + 오래가는 거품) ── */
.hdc-smooth-foam,
.hdc-smooth-foam2 { display: flex; justify-content: space-between; align-items: center; /* background: url("/resources/images/extracreamydraftcan/hdcsf-tit-bg.jpg") no-repeat; background-size: cover; */ max-height: 934px; overflow: hidden; }
.hdcsf-img{ position: relative; width: 50%; height: auto; aspect-ratio: 1/1; }
.hdcsf-img video{ position:absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hdcsf-tit { display: flex; flex-direction: column; justify-content: center; width: 50%; aspect-ratio: 1/1; background: url("/resources/images/extracreamydraftcan/hdcsf-tit-bg.jpg?v=20260618") no-repeat; background-size: cover; }
.hdc-smooth-foam .hdcsf-tit,
.hdc-smooth-foam2 .hdcsf-tit { padding: 0 15px; }
.hdcsf-tit h2 { text-align: center; color: var(--color-hm-green); font-size: 48px; font-weight: 700; letter-spacing: -0.7px; word-break: keep-all; }
.hdcsf-tit h2 img { margin: 5px 0; letter-spacing: -0.7px; }
.hdcsf-tit p { margin-top: 20px; text-align: center; color: var(--color-hm-green); font-size: 28px; font-weight: 500; letter-spacing: -0.7px; }

@media (max-width: 1280px) {
    .hdcsf-tit h2 { line-height: 60px; }
    .hdcsf-tit h2 img { margin: 0; }
    .hdcsf-tit p { margin-top: 15px; font-size: 26px; }
}

@media (max-width: 1024px) {
    .hdcsf-tit h2 { font-size: 28px; line-height: 40px; }
    .hdcsf-tit h2 img { margin: 0; }
    .hdcsf-tit p { font-size: 20px; }
}

@media (max-width: 768px) {
    .hdc-smooth-foam,
    .hdc-smooth-foam2 { max-height: 1536px; flex-direction: column; }
    .hdc-smooth-foam2 { background: none; flex-direction: column-reverse; }
    .hdcsf-tit h2 { font-size: 25px; line-height: 1.3; }
    .hdcsf-tit h2 img { margin: 2px 0; }
    .hdcsf-tit p { margin-top: 20px; font-size: 20px; }
    .hdcsf-img { width: 100%; }
    .hdcsf-tit { width: 100%; aspect-ratio: 1/0.9; }
}

/* ── How to (스크롤 4-step) ── */
.hdc-how-to { padding: 120px 0; overflow: hidden; }
.hdcht-tit { width: 696px; max-width: 90%; margin: 0 auto; }
.hdcht-li { display: flex; justify-content: flex-start; align-items: flex-end; max-width: 90%; width: 1440px; padding: 120px 0; gap: 50px; border-bottom: 1px solid rgba(0, 81, 59, 0.3); margin: 0 auto; }
.hdcht-li:first-child { padding-top: 0; }
.hdcht-li:last-child { border: 0; }
.hdc-how-to .hdchtl-img { max-width: 680px; width: calc((100% - 50px) / 2); }
.hdc-how-to .hdchtl-img + div { width: calc((100% - 50px) / 2); }
.hdchtl-step p { width: 125px; padding: 8px 0; margin-bottom: 15px; background: var(--color-hm-gold); color: #fff; font-size: 24px; font-weight: 600; text-align: center; border-radius: 50px; letter-spacing: -0.7px; }
.hdchtl-step-tip p { width: 125px; padding: 8px 0; margin-bottom: 15px; background: linear-gradient(to right, #efd478, #bb9023); color: #fff; font-size: 24px; font-weight: 600; text-align: center; border-radius: 50px; letter-spacing: -0.7px; }
.hdchtl-tit h2 { color: var(--color-hm-green); font-size: 54px; font-weight: 700; line-height: 1.3; letter-spacing: -0.7px; word-break: keep-all; }
.hdchtl-tit h2 span { color: var(--color-hm-gold); font-size: 34px; font-weight: 600; letter-spacing: -0.7px; }
.hdchtl-desc p { margin-top: 50px; font-size: 28px; font-weight: 500; line-height: 1.4; letter-spacing: -0.7px; color: #202020; }
.hdchtl-desc p + p {margin-top: 5px;}
.hdchtl-desc p span { padding: 3px 7px; margin-bottom: 4px; background: rgba(192, 119, 18, 0.55); color: #fff; line-height: 38px; }

@media (max-width: 1280px) {
    .hdcht-li { padding: 100px 0; }
    .hdchtl-tit h2 { font-size: 48px; }
    .hdchtl-tit h2 span { font-size: 30px; }
    .hdchtl-desc p { margin-top: 30px; font-size: 24px; }
}

@media (max-width: 1024px) {
    .hdcht-li { padding: 80px 0; flex-wrap: wrap; }
    .hdc-how-to .hdchtl-img { width: 100%; max-width: 100%; }
    .hdc-how-to .hdchtl-img + div { display:flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; }
    .hdchtl-tit h2{ font-size: 32px; }
    .hdchtl-tit h2 span{ font-size: 20px; }
    .hdchtl-desc p { font-size: 22px; }
    .hdchtl-desc p + p {margin-top: 15px;}
}

@media (max-width: 768px) {
    .hdc-how-to { padding: 10% 0; }
    .hdcht-li { flex-wrap: wrap; gap: 30px; width: calc(100% - 48px); padding: 40px 0; border-bottom: 0; }
    .hdcht-tit { width: 100%; padding: 0 10% 0 5%; }
    .hdchtl-tit h2 { font-size: 25px; }
    .hdchtl-tit h2 span { font-size: 14px; }
    .hdchtl-step p,
    .hdchtl-step-tip p { width: 85px; margin-bottom: 12px; font-size: clamp(11px, 4vw, 20px); }
    .hdchtl-img { width: 100%; }
    .hdchtl-desc p { margin-top: 15px; font-size: 20px; font-weight:400 }
    .hdchtl-desc p span {line-height: 32px;}
}

/* ── Search Shop (CTA) ── */
.hdc-serch-shop { position: relative; background: url("/resources/images/extracreamydraftcan/hdcss-bg.webp?v=20260618") no-repeat; background-size: cover; }
.hdcss-tit h2 { padding: 192px 20px 222px; text-align: center; color: var(--color-hm-gold); font-size: 54px; font-weight:500; letter-spacing: -0.7px; word-break: keep-all; }
.hdcss-tit h2 span {font-weight:700}
.hdcss-tit h2 span .strong { color: #955600; }
.hdcss-txt p { padding: 52px 0; text-align: center; color: #c6a56d; font-size: 28px; font-weight: 500; letter-spacing: -0.7px; }
.hdcss-btn { margin-top: 40px; padding-bottom: 110px; text-align: center; }
.hdcss-btn a { display: block; width: 579px; margin: 0 auto; padding: 10px 40px; background: linear-gradient(to right, #c6a56d 0%, #d19f58 100%); color: #fff; font-size: 34px; font-weight: 600; text-align: center; border-radius: 10px; letter-spacing: -0.7px; }

@media (max-width: 1024px) {
    .hdcss-tit h2 { padding: 100px 20px 170px; font-size: 48px; }
}

@media (max-width: 768px) {
    .hdcss-tit h2 { padding: 60px 20px 130px; font-size: 25px; }
    .hdcss-txt p { padding: 30px 0; font-size: 20px; }
    .hdcss-btn { padding-bottom: 65px; }
    .hdcss-btn a { width: 90%; font-size: 20px; }
}


/* ── Floating CTA — 평소 플로팅(fixed), Search Shop 배너에서 도킹(absolute) ── */
/* --float-bottom / --dock-bottom: JS가 매끄러운 도킹 전환 계산에 사용 (단일 소스) */
/* --nav-h: 모바일 하단 내비(.footer_menu) 높이만큼 위로 띄움(JS 측정). 데스크톱/없을 때 0 */
.hdc-floating-cta { --float-bottom: 24px; --dock-bottom: 110px; --nav-h: 0px; position: fixed; left: 50%; bottom: calc(var(--float-bottom) + var(--nav-h)); transform: translateX(-50%); z-index: 90; max-width: 90%; }
.hdc-floating-cta.is-docked { position: absolute; bottom: var(--dock-bottom); }
.hdc-floating-cta a { display: block; padding: 14px 40px; max-width:100%; width:305px; background: linear-gradient(to bottom, #087C5D -23%, #00513B 66%); color: #fff; font-size: 16px; text-align:center; font-weight: 600; border-radius: 8px; box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.20), inset 1px 1px 1px 0px rgba(255, 255, 255, 0.19), inset -2px -2px 1.7px 0px rgba(0, 0, 0, 0.25); letter-spacing: -0.7px; }
.hdc-floating-cta.active a { box-shadow: inset 1px 1px 1px 0px rgba(198,165,109,0.4), 4px 4px 12px 0px rgba(0,0,0,0.2), inset 1px 1px 1px 0px rgba(255,255,255,0.19), inset -2px -2px 1.7px 0 rgba(0,0,0,0.25); }
.hdc-floating-cta a:is([disabled]){cursor:auto; background:#978D68; box-shadow:4px 4px 12px 0px rgba(0,0,0,0.2), inset 1px 1px 1px 0px rgba(255,255,255,0.19), inset -2px -2px 1.7px 0px rgba(0,0,0,0.25);}

@media (max-width: 1024px) {
    .hdc-floating-cta { --dock-bottom: 65px; }
}

@media (max-width: 768px) {
    .hdc-floating-cta { --float-bottom: 16px; --dock-bottom: 50px; }
    .hdc-floating-cta a { padding: 12px 32px; font-size: 16px; }
}

/* ── Drink Notice (음용 주의사항) ── */
.hdc-drink-noice { padding: 120px 0; background: var(--color-hm-green); }
.hdcdn-tit { margin-bottom: 80px; text-align: center; font-family: 'Seongang'; font-size: 68px; line-height: 1; color:#fff; }
.hdcdn-ul { display: flex; justify-content: flex-start; align-items: flex-start; gap: 60px; width: 1028px; max-width: 90%; margin: 0 auto 80px; color: #fff; text-align: center; }
.hdcdn-ul:last-child { margin: 0 auto; }
.hdcdn-ul li { width: 484px; }
.hdcdnl-tit { margin-top: 50px; }
.hdcdnl-tit h2 { font-size: 38px; font-weight: 700; letter-spacing: -0.7px; word-break: keep-all; }
.hdcdnl-tit p { font-size: 28px; font-weight: 500; letter-spacing: -0.7px; color: #D2AD6A }

@media (max-width: 1024px) {
    .hdcdn-tit { margin-bottom: 60px; font-size:70px; }
    .hdcdnl-tit h2 { font-size: 32px; }
    .hdcdnl-tit p { font-size: 24px; }
}

@media (max-width: 768px) {
    .hdcncfl-logo { width: 100%; margin-left: -5%; }
    .hdcncf-center { width: 100%; text-align: center; }
    .hdcncf-right { width: 100%; }
    .hdc-drink-noice { /* padding: 60px 0 120px; */ padding: 60px 0; }
    .hdcdn-tit { margin-bottom: 40px; font-size: 45px; }
    .hdcdn-ul { gap: 20px; margin: 0 auto; width: 100%; max-width:100%; padding: 0 24px; }
    .hdcdn-ul:last-child{ margin: 50px auto 0; }
    .hdcdnl-tit { margin-top: 30px; }
    .hdcdnl-tit h2 { font-size: 17px; word-break: keep-all; }
    .hdcdnl-tit p { font-size: 12px; }
}

@media (max-width: 512px) {
    .hdcdn-tit { font-size: 34px; }
}

@media (min-width: 2560px) {
    .hdcnc-flex,
    .hdc-smooth-foam,
    .hdc-smooth-foam2 { max-width: 1920px; margin: auto; }
}


/* smooooooooth page */
.hdc-normal-page .hdc-serch-shop{ position: relative; background: url("/resources/images/extracreamydraftcan/hdcss-smooth-bg.webp") no-repeat; background-size: cover; padding:112px 0; }
.hdc-normal-page .hdc-serch-shop .hdcss-tit h2{ padding: 0; color:#fff; font-weight:600 }
.hdc-normal-page .hdc-serch-shop .hdcss-btn{margin:0; padding:0;}

@media (max-width: 768px) {
    .hdc-normal-page .hdc-serch-shop{padding:60px 0;}
}

/* ───── 한맥과 스무스하게 (Netflix 인트로) ───── */
/* #2 앵커 이동 오프셋. 새로 뜬 페이지(새창/새탭/시크릿)는 위쪽 리소스 늦로드로 섹션이 ~헤더 절반만큼 밀려 내려오므로,
   그만큼 덜 띄워서(45) 최종적으로 헤더 아래에 맞게 함. (값은 dev 실측 기준, 조절 가능) */
.hdc-smooth-with { overflow: hidden; background: var(--color-hm-cream); scroll-margin-top: 45px; }
/* PC/모바일 모두 통이미지 한 장 (picture: 모바일 source + PC img) */
.hdcsw-img { display: block; }
.hdcsw-img img { display: block; width: 100%; height: auto; }

/* ───── Netflix 에피소드 ───── */
.hdc-netflix { display: flex; flex-direction: column; align-items: center; padding: 120px 5%; overflow: hidden; text-align: center; background: url('/resources/images/extracreamydraftcan/hanmac-smooth-heart-grid-bg.webp') center/cover no-repeat; }
.hdcnf-tit { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hdcnf-logo { width: 330px; max-width: 80%; }
.hdcnf-logo img { display: block; width: 100%; height: auto; }
.hdcnf-tit h2 { font-family: 'Seongang', sans-serif; font-weight: 400; font-size: 68px; line-height: 1.28; letter-spacing: -4.08px; color: var(--color-hm-green); word-wrap: break-word; word-break: keep-all; }
.hdcnf-tit h2 span { color: #E97687; }
.hdcnf-tit p{ color: var(--color-hm-green); font-size: 38px; line-height: 1.28; letter-spacing: -4.08px; font-family: 'Seongang', sans-serif; }
.hdcnf-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 1040px; max-width:100%; margin-top: 24px; }
.hdcnf-tab { overflow:hidden; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; position:relative; text-align: center; padding: 5px; min-height:110px; width:calc((100% - 36px) / 4); border-radius: 12px; letter-spacing: -0.5px; cursor: pointer; background: #fff; border: 1.5px solid var(--color-hm-green); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.hdcnf-tab:after{ display:block; content:""; position:absolute; bottom:0; left:0; width:100%; height:0; transition:height 0.4s ease; background:var(--color-hm-green); z-index:0; }
.hdcnf-tab span{ position:relative; z-index:1; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 18px; line-height: 1; color: var(--color-hm-green); transition:color 0.4s ease; }
.hdcnf-tab .tab-tit{ margin-top:9px; font-size:18px; color: var(--color-hm-green); line-height:130%; }
.hdcnf-tab:not(.is-soon):hover:after {height:100%;}
.hdcnf-tab:not(.is-soon):hover span{color:rgba(255,255,255,0.8); transition-delay:0.1s}
.hdcnf-tab:not(.is-soon):hover .tab-tit{color:#fff; transition-delay:0.1s}
.hdcnf-tab.is-active { background: var(--color-hm-green); border-color: var(--color-hm-green) }
.hdcnf-tab.is-active span{ color:rgba(255,255,255,0.8); }
.hdcnf-tab.is-active .tab-tit{ color: #fff; }
.hdcnf-tab.is-soon { opacity:0.6; cursor: default; }
.hdcnf-tab.is-soon:hover { border: 1.5px solid var(--color-hm-green); }
.hdcnf-videos { margin-top: 40px; width: 1040px; max-width: 100%; }
.hdcnf-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #10120E; border-radius: 16px; overflow: hidden; }
.hdcnf-video video, .hdcnf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.hdcnf-videos.swiper-fade .swiper-slide:first-child { position: relative; }
.hdc-netflix-fab { position: fixed; right: 24px; bottom: calc(24px + var(--fab-shift, 0px)); z-index: 90; width: 168px; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 12px; background: linear-gradient(to bottom, #fe92a1 0%, #e97687 85%); text-decoration: none; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2); animation: hdc-fab-bounce 1.8s ease-in-out infinite; }
.hdc-netflix-fab__img { display: block; width: 160px; height: 160px; object-fit: cover; border-radius: 12px; }
.hdc-netflix-fab__go { display: flex; align-items: center; justify-content: center; padding: 4px 0 8px; color: #fff; font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: 0.5px; }
.hdc-netflix-fab__go svg { width: 18px; height: 18px; }
@keyframes hdc-fab-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .hdc-netflix-fab { animation: none; } }
/* 512 이하: 이동 대상(#2) 영역에 스크롤이 닿으면 fade-out (JS가 .is-hidden 토글) */
.hdc-netflix-fab { transition: opacity .35s ease, visibility .35s ease; }
.hdc-netflix-fab.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 1440px) {
    .hdc-netflix{padding-bottom:260px;}
}

@media (max-width: 1024px) {
    .hdc-smooth-with { scroll-margin-top: 27px; }   /* 헤더 53의 절반 */
    .hdc-netflix{padding-bottom:150px;}
    .hdcnf-tit h2 { font-size: 44px; letter-spacing: -2px; }
    .hdcnf-tit p { font-size: 30px; }
    .hdcnf-tab { font-size: 18px; }
    .hdc-netflix-fab{gap:4px; padding:2px; width:84px; border-radius: 8px;}
    .hdc-netflix-fab__img{width:80px; height:80px; border-radius: 4px;} 
    .hdc-netflix-fab__go{ padding:2px 0 4px; font-size:11px;}
    .hdc-netflix-fab__go svg { width: 9px; height: 9px; }
}
@media (max-width: 768px) {
    .hdc-netflix { padding: 60px 24px 140px; background: url('/resources/images/extracreamydraftcan/hanmac-smooth-heart-grid-bg-mo.jpg') center/cover no-repeat; }
    .hdcnf-tit{ gap: 12px; }
    .hdcnf-tit p{ font-size: 18px; letter-spacing: -1px; }
    .hdcnf-tit h2 { font-size: 24px; letter-spacing: -1px; }
    .hdcnf-logo { width: 220px; }
    .hdcnf-tabs { gap: 10px; margin-top:24px; }
    .hdcnf-tab { flex: 0 0 calc(50% - 5px); font-size: 15px; min-height:67px; height:auto; border-radius: 8px; }
    .hdcnf-tab span{font-size:12px;}
    .hdcnf-tab .tab-tit{ margin-top:6px; font-size:13px; }
    .hdcnf-videos{margin-top: 24px;}
    .hdcnf-video{border-radius: 8px;}
    /* 노치 safe-area 보정 (하단 내비바 보정은 512 분기에서) */
    .hdc-netflix-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--fab-shift, 0px)); }
}
@media (max-width: 512px) {
    /* 512px부터: 하단 내비바(.footer_menu ≈71px) + 구매하러 가기 CTA 높이(--cta-lift, JS가 도킹/플로팅 따라 토글) 만큼 위로 올림 */
    .hdc-netflix-fab { bottom: calc(71px + 16px + var(--cta-lift, 0px) + env(safe-area-inset-bottom, 0px) + var(--fab-shift, 0px)); }
}