/* 첫 화면(hero) — 세로 화면: 한 장씩 슬라이드 / 가로 화면: 3장 나란히 / 선택: 영상 */
#hero-slideshow{width:100%;background:#000}
.hero-frame{position:relative;isolation:isolate}
#hero-stage.campaign-media{position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:auto;background:#000;touch-action:pan-y pinch-zoom}
#hero-stage .hero-slide{position:absolute;inset:0;display:block;opacity:0;z-index:0;transition:none;pointer-events:none}
#hero-stage .hero-slide.is-current{opacity:1;z-index:1}
#hero-stage .hero-slide.is-entering{opacity:1;z-index:2;transition:opacity 1.2s linear}
#hero-stage .hero-photo{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 32%;user-select:none;-webkit-user-drag:none}

/* 세로 화면 기본: 사진 한 장이 화면을 채움 */
#hero-stage{height:calc(100vh - var(--hero-offset,88px));height:calc(100svh - var(--hero-offset,88px));min-height:420px}
/* 휴대폰 세로: 사진 비율(2:3) 그대로 꽉 채움 — 잘림 없음 */
@media (max-width:700px) and (orientation:portrait){#hero-stage.campaign-media{height:auto;min-height:0;aspect-ratio:2/3}}

/* 가로 화면: 세로 사진을 모두(지금은 2장) 가로로 붙여 화면 전체를 채움 — 사진 수에 맞춰 칸이 자동으로 나뉨 */
@media (orientation:landscape) and (min-width:701px){
 #hero-slideshow[data-mode=triptych] #hero-stage{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);min-height:360px}
 #hero-slideshow[data-mode=triptych] #hero-stage .hero-slide{position:relative;inset:auto;opacity:1;z-index:auto;transition:none;height:100%;overflow:hidden}
 #hero-slideshow[data-mode=triptych] #hero-stage .hero-photo{object-position:50% 88%;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
 #hero-slideshow[data-mode=triptych] #hero-stage .hero-slide:hover .hero-photo{transform:scale(1.025)}
}

/* 영상 */
#hero-stage .hero-video{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;background:#000}
#hero-stage .hero-video[hidden]{display:none}
.hero-video-toggle{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,36px);z-index:5;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgb(255 255 255 / .55);border-radius:50%;background:rgb(0 0 0 / .25);color:#fff;font-size:13px;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}
.hero-video-toggle:hover{background:rgb(0 0 0 / .5);border-color:#fff}
.hero-video-toggle[hidden]{display:none}

/* 사진 위 문구: 아래쪽 짧은 한 줄 + 밑줄 링크 */
.hero-caption{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:14px;padding:120px 6% clamp(30px,5.5vh,56px);text-align:center;color:#fff;background:linear-gradient(to top,rgb(0 0 0 / .5),rgb(0 0 0 / 0));pointer-events:none}
.hero-line{margin:0;max-width:none;color:#fff;font:400 clamp(17px,1.6vw,24px)/1.3 "Cormorant Garamond",Georgia,"Times New Roman",serif;letter-spacing:.06em;text-shadow:0 1px 14px rgb(0 0 0 / .35)}
.hero-link{position:relative;display:inline-block;padding:4px 0 6px;color:#fff;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;pointer-events:auto}
.hero-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.hero-link:hover::after,.hero-link:focus-visible::after{animation:hero-underline .7s cubic-bezier(.65,0,.35,1)}
@keyframes hero-underline{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.hero-frame:has(.hero-video:not([hidden])) .hero-caption{padding-left:90px;padding-right:90px}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* 슬라이드 컨트롤 (세로 화면에서만 보임) */
.hero-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 4%;min-height:56px;flex-wrap:wrap}
.hero-controls[hidden]{display:none}
.hero-selectors{display:flex;gap:8px}
.hero-selectors button{width:56px;min-height:44px;padding:20px 0;border:0;background:transparent;cursor:pointer}
.hero-selectors span{display:block;height:1px;width:100%;background:#444;transition:background-color .4s ease}
.hero-selectors [aria-pressed="true"] span{background:#fff}
#hero-playback{width:44px;min-height:44px;padding:8px;border:0;background:transparent;color:#fff;cursor:pointer;font-size:13px}
#hero-retry{border:0;background:transparent;color:#fff;text-decoration:underline;font:inherit;min-height:44px}
.hero-status{font-size:12px;line-height:1.5;margin:0;padding:0 6%;text-align:center;color:var(--muted)}
.hero-status:empty{display:none}

@media (max-width:700px){
 .hero-caption{gap:10px;padding:90px 6% 26px}
 .hero-line{font-size:17px}
}
/* 세로 화면(휴대폰·세로 태블릿): 문구가 사진(펜던트)을 가리지 않도록 사진 바로 아래 검은 영역에 둠.
   태블릿처럼 사진이 화면보다 길어 잘려야 할 때는 위쪽을 잘라 아래쪽 펜던트가 보이게 함 */
@media (orientation:portrait){
 #hero-stage .hero-photo{object-position:50% 100%}
}
@media (orientation:portrait){
 .hero-caption{position:static;padding:26px 6% 4px;background:none}
 .hero-line{text-shadow:none}
}
@media (prefers-reduced-motion:reduce){
 #hero-stage .hero-slide.is-entering{transition:none}
 #hero-slideshow[data-mode=triptych] #hero-stage .hero-photo{transition:none}
 #hero-slideshow[data-mode=triptych] #hero-stage .hero-slide:hover .hero-photo{transform:none}
 .hero-link:hover::after,.hero-link:focus-visible::after{animation:none}
}

/* ── 첫 화면 아래 섹션 글자 크기 축소 (2026-11): 제품 상세와 같은 차분한 크기 ── */
body.home main section:not(.campaign-hero){padding-block:clamp(44px,5vw,76px)}
body.home main section:not(.campaign-hero) h2{font-size:clamp(22px,2vw,30px);line-height:1.35;letter-spacing:.01em}
body.home main section:not(.campaign-hero) h3{font-size:16px;line-height:1.45}
body.home main section:not(.campaign-hero) p{font-size:13.5px;line-height:1.8}
body.home main .eyebrow{font-size:10px;letter-spacing:.2em;margin-bottom:10px}
body.home .story-link{font-size:12px;letter-spacing:.04em}
body.home .stories-grid p{margin:10px 0 14px}
body.home .stories .button{min-height:42px;padding:10px 18px;font-size:12px}
body.home main section.coming{padding-block:26px}
body.home main section.coming h2{font-size:18px}
body.home .home-detail img{height:300px}
body.home footer{font-size:11.5px}
@media (max-width:700px){
 body.home main section:not(.campaign-hero) h2{font-size:21px}
 body.home main section:not(.campaign-hero) p{font-size:13px}
 body.home .home-detail img{height:220px}
}
/* 첫 화면 "컬렉션 보기": 다른 링크와 같은 크기, 누르기 쉬운 높이(44px) (2026-11) */
.hero-link{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:13px;letter-spacing:.12em}
.hero-link::after{bottom:10px}
/* 휴대폰 첫 화면 슬라이드 표시를 더 가늘고 짧게, 일시정지는 가는 선 아이콘 (2026-11) */
.hero-controls{gap:16px;min-height:48px}
.hero-selectors{gap:6px}
.hero-selectors button{width:28px;padding:21px 0}
.hero-selectors span{background:#3a3a3a}
.hero-selectors [aria-pressed="true"] span{background:var(--paper)}
#hero-playback,.hero-video-toggle{display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
#hero-playback:hover{color:var(--paper)}
#hero-playback svg,.hero-video-toggle svg{display:block}