/*
 * 크리스마스 2026 시즌 스타일.
 *
 * ★이 파일은 season.css 바로 뒤에, 같은 조건으로만 로드된다(SeasonHead.astro). 시즌 id 가 없는 공통 규칙(배지·히어로 패널·탭·
 *   할인율·카드 배지·안내 창 …)은 season.css 에 한 벌만 있다. 여기에는 `christmas-2026` 범위 규칙만 둔다.
 * ★2026-11-11: 예전에는 season.css 전체를 시즌 id 만 바꿔 복사해 두어(1~385행) 할로윈 기간에도 같은 규칙을 두 번 읽었다.
 *   겹치는 범위 없는 규칙 211개를 걷었다. 걷은 규칙과 특이도·속성이 겹치는 시즌 범위 규칙이 없고 두 파일이 붙어 로드되므로
 *   cascade 결과는 같다(정적 검사 + 할로윈·크리스마스 화면 픽셀 비교). 공통 모양을 고치려면 season.css 를 고친다.
 */

/* ── 켜고 끄기 ─────────────────────────────────────────── */
html:not([data-season="christmas-2026"]) [data-season-only="christmas-2026"] { display: none !important; }
html[data-season="christmas-2026"] [data-season-off~="christmas-2026"] { display: none !important; }

/* ── 홈 히어로 — season.css 「홈 히어로」의 시즌 범위 줄을 크리스마스 id 로 ──────────── */
html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]) h1 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.3; margin: 0 0 18px; }
html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]) h1 em { display: inline; font-size: 0.62em; margin-left: 0.5em; opacity: 0.8; }
html[data-season="christmas-2026"][lang="ko"] .p_section_0:not([data-hero-slide="brand"]) h1,
html[data-season="christmas-2026"][lang="ko"] .p_section_0:not([data-hero-slide="brand"]) h1 em { margin-left: 0; }
html[data-season="christmas-2026"][lang="ko"] .p_section_0:not([data-hero-slide="brand"]) h1 em { margin-left: 0.5em; }
html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]) .p_definition { display: none; }
html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]) .naver_link { display: none; }
html[data-season="christmas-2026"] .p_section_0[data-hero-slide="brand"] .season-hero-lead,
html[data-season="christmas-2026"] .p_section_0[data-hero-slide="brand"] .season-hero-links { display: none; }
/* brand 장: 위 「켜고 끄기」가 숨긴 평소 사진·오른쪽 문구를 되살린다(둘 다 작성자 display 가 없어 revert 가 원래 모습이다). */
html[data-season="christmas-2026"] .p_section_0[data-hero-slide="brand"] [data-season-off~="christmas-2026"] { display: revert !important; }
html[data-season="christmas-2026"] .p_section_0[data-hero-slide="brand"] .bg_img .season-hero-media { opacity: 0; pointer-events: none; }
html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]) .p_text_wrap > div:first-child { width: min(var(--season-col), 100%); flex: none; }
@media screen and (max-width: 1024px) {
  html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]) h1 { font-size: 22px; }
}
@media screen and (max-width: 601px) {
  html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]) h1 { font-size: 5vw; margin-bottom: 4vw; }
}

/* ── 제품 목록 카드 — season.css 「제품 목록 카드」의 시즌 범위 줄 ──────────────── */
html[data-season="christmas-2026"] .p_section_1 .product_list a:is(:hover, :focus-visible) .season-media { opacity: 1; }
html[data-season="christmas-2026"] .p_section_1 .product_list a:is(:hover, :focus-visible):has(.season-media) img:nth-child(2) { opacity: 0; }
/* ★제품명을 흰 글자로 바꾸는 것은 제품명 자리가 어두운 그림뿐이다. 크리스마스 합성 카드는 대부분 밝아서(크림 벽·눈 바닥,
 *   흰 글자 대비 1.3~1.6:1 — 할로윈은 11~18:1) 굽는 스크립트가 그 자리 밝기를 재 `data-season-label="dark"` 를 단다 →
 *   그 카드는 제품명을 원래 색 그대로 둔다(2026-11-11). */
html[data-season="christmas-2026"] .p_section_1 .product_list a:is(:hover, :focus-visible):has(.season-media:not([data-season-label="dark"])) .product_label { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65); }
@media (hover: none) {
  /* 터치: 시즌 배경이 기본이다. 한 번 탭하면 카드 링크가 바로 동작한다(두 번 탭 없음). */
  html[data-season="christmas-2026"] .p_section_1 .product_list .season-media { opacity: 1; }
  html[data-season="christmas-2026"] .p_section_1 .product_list a:has(.season-media:not([data-season-label="dark"])) .product_label { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65); }
}

/* ── 크리스마스 전용 ─────────────────────────────────────── */

html[data-season="christmas-2026"] .season-hero-lead__badge { color: #f1dca6; }
html[data-season="christmas-2026"] .season-dialog__panel { background: #102a25; }

/* Preview artwork: original product photographs, evergreen vector scenery. */
html[data-season="christmas-2026"] .christmas-scene { position:absolute; inset:0; overflow:hidden; background:#0b3028; }
html[data-season="christmas-2026"] .christmas-scene__backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html[data-season="christmas-2026"] .christmas-scene__art { position:absolute; right:6%; top:50%; transform:translateY(-46%); width:35%; max-width:550px; text-align:center; }
html[data-season="christmas-2026"] .christmas-scene__edition { color:#ddc799; font-size:11px; letter-spacing:.24em; display:block; margin-bottom:20px; }
html[data-season="christmas-2026"] .christmas-scene__frame { position:relative; border:10px solid #e8e0cd; border-radius:50% 50% 8px 8px; background:#f7f7f7; overflow:hidden; box-shadow:0 32px 70px #00181088; aspect-ratio:1; }
html[data-season="christmas-2026"] .bg_img .christmas-scene__product { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; }
html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide]) .christmas-scene__product--pro,
html[data-season="christmas-2026"] .p_section_0[data-hero-slide="pro"] .christmas-scene__product--pro,
html[data-season="christmas-2026"] .p_section_0[data-hero-slide="proPlus"] .christmas-scene__product--proPlus,
html[data-season="christmas-2026"] .p_section_0[data-hero-slide="mini"] .christmas-scene__product--mini { opacity:1; }
html[data-season="christmas-2026"] .christmas-scene__ribbon { position:absolute; left:0; right:0; bottom:0; height:11px; background:#a34448; border-top:2px solid #d6b67d; }
html[data-season="christmas-2026"] .christmas-scene__caption { display:block; font-family:Georgia,serif; font-style:italic; color:#e9e0c9; font-size:21px; margin-top:22px; }
html[data-season="christmas-2026"] .p_section_0[data-hero-slide="brand"] .christmas-scene { display:none; }
html[data-season="christmas-2026"] .season-hero-panel { background:#072b25c9; border-color:#d6b67d55; }
html[data-season="christmas-2026"] .season-hero-lead__badge { background:#d6b67d18; border-color:#d6b67d66; color:#f1dca6; }
/*
 * 히어로 할인율 — season.css 의 할로윈 주황 그라데이션 대신 이 파일의 금색(탭·안내 창 할인율 #e2c78e 계열)으로 (2026-11-11).
 * ★`background` 줄임 속성을 쓰면 background-clip:text 가 풀려 글자 대신 상자가 칠해진다 — background-image 만 바꾼다.
 *   글자 채움을 못 하는 브라우저는 season.css 처럼 단색으로 떨어뜨린다.
 */
html[data-season="christmas-2026"] .season-hero-lead__rate { background-image: linear-gradient(180deg, #f1dca6 0%, #e2c78e 45%, #d6b67d 100%); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-season="christmas-2026"] .season-hero-lead__rate { color: #e2c78e; background-image: none; }
}
html[data-season="christmas-2026"] .season-hero-tabs [aria-selected="true"],
html[data-season="christmas-2026"] .season-slide__rate { background:#e2c78e; color:#163b2c; }
html[data-season="christmas-2026"] .season-hero-links__offers { background:#a34448; border-color:#a34448; color:#fff; }
/* 크리스마스는 링크 버튼이 하나다(앱 소식 버튼 없음). 반 칸에 가두면 영문 «View Christmas offers →» 가 휴대폰에서 양쪽 여백을 먹고
 * 글꼴이 늦게 오면 버튼 밖으로 삐져나왔다 — 하나일 때는 글자 폭만큼 넓히고, 반 칸보다 좁아지지는 않게 해 한국어 모양은 그대로 둔다. */
html[data-season="christmas-2026"] .season-hero-links__btn:only-child { grid-column: 1 / -1; justify-self: start; min-width: calc((100% - 12px) / 2); }
@media screen and (max-width: 601px) { html[data-season="christmas-2026"] .season-hero-links__btn:only-child { min-width: calc((100% - 2.4vw) / 2); } }
html[data-season="christmas-2026"] .season-slide__eyebrow { color:#ead5a9; border-color:#d6b67d66; background:#d6b67d18; }
html[data-season="christmas-2026"] .season-slide__points li::before { background:#d6b67d; }
html[data-season="christmas-2026"] .season-slide__actions .season-btn--primary { background:#e2c78e; border-color:#e2c78e; color:#163b2c; }
html[data-season="christmas-2026"] .season-slide__media img { border:8px solid #e2c78e; border-radius:45% 45% 8px 8px; box-sizing:border-box; background:#f7f7f7; }
@media(max-width:1100px) and (min-width:768px) { html[data-season="christmas-2026"] .p_section_0 { --season-col:550px; } html[data-season="christmas-2026"] .christmas-scene__art { right:3%; width:33%; } }
@media(max-width:767px) {
 html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]) { min-height:1050px; }
 html[data-season="christmas-2026"] .christmas-scene__art { width:70%; max-width:320px; right:15%; top:auto; bottom:45px; transform:none; }
 html[data-season="christmas-2026"] .christmas-scene__edition { font-size:9px; margin-bottom:12px; }
 html[data-season="christmas-2026"] .christmas-scene__caption { font-size:17px; margin-top:14px; }
 html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]) .p_text_wrap { top:135px; transform:none; justify-content:flex-start; }
}
/*
 * ★세로판 히어로 자리(2026-11-11 밤 검증 수리): 제품 그림은 세로판(1122×1402) 한 장, 제품 윗변이 그림 y 858 이다(PRO·PRO+·MINI 같다).
 *   그림은 높이 맞춤 cover 라 화면 y = 858 × (히어로 높이 / 1402). 히어로 높이를 링크 줄 아래 끝에 맞춰 제품이 늘
 *   «크리스마스 혜택 보기» 바로 아래(약 10px)에 오게 한다 — 1050px 고정일 때는 430 폭에 맞춰 두어 390 폭 실제 브라우저(664px)
 *   첫 화면에 제품이 몇 px 만 보였다.
 *   - ≤601px: 패널이 vw 로 커진다. 링크 아래 끝 실측 ≈ 146px + 111.2vw(320~600 폭) → 높이 = 255px + 181.66vw.
 *     영문은 배지가 두 줄이라 패널이 8~25px 길다(실측 링크 아래 끝 ≈ 140.5px + 116.34vw) → 높이 = 246px + 190.11vw.
 *     한 식으로 두면 영문 휴대폰에서 제품 윗변이 «View Christmas offers» 밑으로 1~15px 들어갔다(2026-11-12 실측). 시즌 히어로는 ko·en 에만 있다.
 *   - 602~767px, 그리고 가로 ≤1100px·가로/세로 ≤1.3(iPad 세로·폴더블 펼침 가로 — SeasonHeroMedia 가 같은 조건에서 세로판을 쓴다):
 *     패널이 고정 크기라 위(135px)에 붙이고 높이 1020px(링크 아래 끝 ≈ 607~620px). 폭이 넓어 그림이 폭 맞춤으로 바뀌면
 *     가랜드가 잘리므로 125vw(= 1402/1122) 보다 낮게 두지 않는다.
 *   - 이 배치는 «상자 내린» 배치(v5 굽기 선택 hero "H4v5" → 매니페스트 hero.mobile_layout "low")에만 건다 — PRO 그림의
 *     data-season-hero-layout="low" 를 :has() 로 본다. 키가 없으면(옛 휴대폰판, 상자 그림 y 418~891) 위 1050px 고정·세로 가운데 패널 그대로다.
 *     높이 식을 옛 판에 걸면 상자가 패널 뒤로 숨는다. 높이 식을 바꾸면 SeasonHeroMedia 의 LOW_PORTRAIT_SIZES(세로판이 그려지는 폭)도 같이 바꾼다.
 */
@media (max-width: 601px) {
 html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]):has(.season-hero-media[data-season-hero-layout="low"]) { min-height: calc(255px + 181.66vw); }
 html[data-season="christmas-2026"][lang="en"] .p_section_0:not([data-hero-slide="brand"]):has(.season-hero-media[data-season-hero-layout="low"]) { min-height: calc(246px + 190.11vw); }
}
@media (min-width: 602px) and (max-width: 767px), (min-width: 768px) and (max-width: 1100px) and (max-aspect-ratio: 13/10) {
 html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]):has(.season-hero-media[data-season-hero-layout="low"]) { min-height: max(1020px, 125vw); }
 html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]):has(.season-hero-media[data-season-hero-layout="low"]) .p_text_wrap { top:135px; transform:none; justify-content:flex-start; align-items:flex-start; }
 html[data-season="christmas-2026"] .p_section_0:has(.season-hero-media[data-season-hero-layout="low"]) .bg_img .season-hero-media img { object-position: 50% 50%; }
}
/*
 * ★가로판 1101~1366px(v5, 2026-11-11 밤 실측): 패널(4% + 640px)과 화면 오른쪽 끝 사이 가운데에 제품(그림 x 1220~1595, 가운데 1408)을 둔다.
 *   45% 고정일 때 1133×690(iPad mini 가로 Safari)에서 PRO+ 가 패널과 5css, 1101×650 창에서는 −19css(패널 밑)였다.
 *   그림 왼쪽 끝 = (패널 오른쪽 + 화면 폭)/2 − 1408 × (100vh/941) = 320px + 52vw − 149.63vh. 그림이 화면을 다 덮게 [100vw − 230.82vh, 0] 로 자른다
 *   (폭 맞춤이 되는 납작한 창은 0). 세 탭 그림이 같은 자리라 같은 식이 셋 다에 맞다 — 그림 픽셀은 그대로다.
 */
@media (min-width: 1101px) and (max-width: 1366px) {
 html[data-season="christmas-2026"] .p_section_0:has(.season-hero-media[data-season-hero-layout="low"]) .bg_img .season-hero-media img { object-position: clamp(min(0px, 100vw - 230.82vh), 320px + 52vw - 149.63vh, 0px) 50%; }
}
/*
 * ★교차 전환(v5, 2026-11-11 밤): PRO+ ↔ MINI 로 넘길 때 두 장이 같이 옅어져 밑의 PRO 장이 25% 까지 비쳤다(세 제품이 같은 자리라 «유령 상자»).
 *   들어오는 장을 위(z-index 2)에서 0.45초 동안 나타내고, 나가는 장은 그 밑에서 불투명하게 있다가 0.45초 뒤에 끈다 → 늘 두 장만 섞인다.
 *   PRO 로 돌아갈 때(바탕 장)와 영수증사진기 장으로 갈 때는 예전처럼 나가는 장이 옅어진다. 탭 스크립트·문구는 그대로다.
 */
html[data-season="christmas-2026"] .p_section_0 .bg_img { isolation: isolate; }
html[data-season="christmas-2026"] .p_section_0 .bg_img .season-hero-media--model { z-index: 1; }
html[data-season="christmas-2026"] .p_section_0 .bg_img .season-hero-media--model.is-active { z-index: 2; }
html[data-season="christmas-2026"] .p_section_0:is([data-hero-slide="proPlus"], [data-hero-slide="mini"]) .bg_img .season-hero-media--model:not(.is-active) { transition: opacity 0s linear 0.45s; }
@media (prefers-reduced-motion: reduce) {
 html[data-season="christmas-2026"] .p_section_0:is([data-hero-slide="proPlus"], [data-hero-slide="mini"]) .bg_img .season-hero-media--model:not(.is-active) { transition: none; }
}
/* The evergreen composition already supplies text contrast; keep product photos unobscured. */
html[data-season="christmas-2026"] .p_section_0:not([data-hero-slide="brand"]) .bg_img::after { display:none; }

/* Lightweight, non-interactive snowfall. Keep navigation, dialogs and purchase UI usable. */
#christmas-snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
#christmas-snow[hidden] { display: none; }
/*
 * 눈 켜기·끄기 단추(왼쪽 아래). ★2026-11-11: 제품 화면 하단 고정 메뉴(`.stiky_wrap`, z130)가 단추를 덮어 누를 수 없었다.
 *   상담 버튼(ChatWidget)과 같은 방식으로 바가 떠 있으면 그 **위로** 올린다(데스크톱 72px · 휴대폰 109px, 바가 푸터 위로
 *   밀려 올라가면 `--brief-sticky-bottom` 만큼 더). z-index 는 문의 구역(.site-contact-section, 120)보다 위, 바(130)보다 아래.
 */
.christmas-snow-toggle { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 125; width: 44px; height: 44px; padding: 0; border: 1px solid #d5c3a2; border-radius: 50%; background: #231e1bf2; color: #f4ead9; font: 24px/1 sans-serif; cursor: pointer; box-shadow: 0 2px 12px #0002; }
/*
 * ★:has() 를 못 읽는 브라우저(Safari<15.4·Firefox<121)는 :has 규칙을 통째로 버린다 — christmas-snow.js 가 바를 보면
 *   html 에 `christmas-snow-above-bar` 를 단다. 셀렉터 목록으로 묶으면 :has 때문에 같이 버려지므로 규칙을 따로 둔다.
 */
html.christmas-snow-above-bar .christmas-snow-toggle { bottom: calc(72px + var(--brief-sticky-bottom, 0px)); }
body:has(.stiky_wrap.on) .christmas-snow-toggle { bottom: calc(72px + var(--brief-sticky-bottom, 0px)); }
@media (max-width: 768px) {
  html.christmas-snow-above-bar .christmas-snow-toggle { bottom: calc(109px + var(--brief-sticky-bottom, 0px)); }
  body:has(.stiky_wrap.on) .christmas-snow-toggle { bottom: calc(109px + var(--brief-sticky-bottom, 0px)); }
  /* 폼 입력 중에는 하단 메뉴처럼 내린다 — 키보드 위로 떠서 입력칸을 가리지 않게(style.css 의 html.is-form-focus). */
  html.is-form-focus .christmas-snow-toggle { display: none; }
}
.christmas-snow-toggle[aria-pressed='false'] { opacity: .65; }
.christmas-snow-toggle:focus-visible { outline: 3px solid #ba9046; outline-offset: 3px; }
html:not([data-season='christmas-2026']) #christmas-snow,
html:not([data-season='christmas-2026']) .christmas-snow-toggle { display: none; }
@media print { #christmas-snow, .christmas-snow-toggle { display: none !important; } }
/* 크리스마스 별 장식(배지·가격 줄·주문 머리) — 잭오랜턴과 같은 자리 맞춤, 색은 옆 글자색. */
.season-star { flex: none; display: inline-block; vertical-align: -0.15em; }