/* 홈 화면 브랜드 이야기 구역 (2026-11): 사진 한 장 + 짧은 글 */
.home-story{
 /* 사진이 4:5로 잘릴 때 보이는 위치 (가로% 세로%). 100%에 가까울수록 사진 아래쪽이 보임 */
 --story-photo-position:50% 88%;
 display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);align-items:center;
 gap:0;max-width:1500px;margin:0 auto;
 padding:120px clamp(24px,5.5vw,96px);
 border-top:1px solid var(--line);
}
body.home main section.home-story{padding-block:120px}
.home-story-media{margin:0;aspect-ratio:4/5;overflow:hidden;background:#000}
.home-story-media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--story-photo-position)}
.home-story-copy{padding-left:clamp(40px,7vw,120px);word-break:keep-all;overflow-wrap:break-word}
.home-story-label{margin:0 0 18px;color:var(--muted);font-size:12px;letter-spacing:.06em}
body.home main section.home-story h2{margin:0;color:var(--paper);font:300 clamp(34px,3vw,44px)/1.28 "Cormorant Garamond",Georgia,"Times New Roman","Apple SD Gothic Neo","Noto Serif KR",serif;letter-spacing:-.005em}
.home-story h2 span{display:block}
body.home main section.home-story .home-story-body{margin:28px 0 36px;max-width:34em;color:var(--paper);opacity:.82;font-size:16px;line-height:1.8}
.home-story-link{position:relative;display:inline-block;padding:2px 0 6px;color:var(--paper);font-size:14px;letter-spacing:.04em}
/* 기본 밑줄(흐림) + 마우스를 올리면 왼쪽→오른쪽으로 그어지는 진한 밑줄 */
.home-story-link::before,.home-story-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.home-story-link::before{opacity:.35}
.home-story-link::after{transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.home-story-link:hover::after,.home-story-link:focus-visible::after{transform:scaleX(1)}
.home-story-link:hover{color:var(--paper)}

/* 화면에 들어올 때 한 번 떠오르기. 스크립트가 화면 아래에 있을 때만 .will-reveal 을 붙이므로 스크립트가 없으면 그냥 보임 */
.home-story.will-reveal .home-story-media,.home-story.will-reveal .home-story-copy{opacity:0;transform:translateY(18px)}
.home-story.is-revealed .home-story-media,.home-story.is-revealed .home-story-copy{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.home-story.is-revealed .home-story-copy{transition-delay:.12s}

@media (max-width:800px){
 .home-story{grid-template-columns:1fr;padding:72px 0}
 body.home main section.home-story{padding-block:72px}
 .home-story-copy{padding:36px 6% 0}
 body.home main section.home-story h2{font-size:clamp(28px,7.6vw,30px)}
 body.home main section.home-story .home-story-body{margin:22px 0 30px}
}
@media (prefers-reduced-motion:reduce){
 .home-story.will-reveal .home-story-media,.home-story.will-reveal .home-story-copy{opacity:1;transform:none}
 .home-story.is-revealed .home-story-media,.home-story.is-revealed .home-story-copy{transition:none}
 .home-story-link::after{transition:none}
}

/* 4순위 정리 (2026-11) */
/* 투명 배경 제품 사진일 때: 잘리지 않게 전체를 보여 줌 */
.home-story.is-product .home-story-media img{object-fit:contain;padding:6% 12%}
/* 스크롤 떠오르기 효과는 사용하지 않음(home-story.js 삭제). 남은 클래스가 있어도 항상 보이게 */
.home-story.will-reveal .home-story-media,.home-story.will-reveal .home-story-copy{opacity:1;transform:none}
/* 휴대폰: 제품 사진이 화면을 거의 다 차지하지 않도록 정사각형 + 여백 (2026-11) */
@media (max-width:800px){
 .home-story.is-product .home-story-media{aspect-ratio:1/1;width:min(100%,62vh);max-height:none;margin:0 auto}
 .home-story.is-product .home-story-media img{padding:8% 24%}
}
/* 제품 사진은 칸의 약 70% 크기로, 가운데에 여백을 두고 놓음 — 고리부터 끝까지 잘리지 않게(contain) (2026-11) */
.home-story.is-product .home-story-media{display:flex;align-items:center;justify-content:center}
.home-story.is-product .home-story-media img{width:70%;height:70%;padding:0;object-fit:contain;object-position:50% 50%}

/* 휴대폰(768px 이하): 사진을 이전의 약 70% 크기로 줄여 가운데에, 비율 그대로(찌그러지지 않게)
   칸 = 화면 폭의 70%(최대 260px), 사진 높이 = 그 칸의 70%. 칸 높이를 사진에 맞춰 위아래 빈 공간을 없애고 아래 글과 간격을 자연스럽게
   제품 사진(is-product)·일반 사진 모두 적용, PC는 그대로 (2026-11) */
@media (max-width:768px){
 .home-story .home-story-media,.home-story.is-product .home-story-media{--story-box:min(70vw,260px);width:var(--story-box);aspect-ratio:auto;height:auto;margin-inline:auto;padding-block:8px}
 .home-story .home-story-media img,.home-story.is-product .home-story-media img{width:auto;height:calc(var(--story-box) * .7);max-width:100%;margin-inline:auto;object-fit:contain}
 .home-story .home-story-copy{padding-top:36px}
}