/* StyleMZ home v4 (2026-10-13): the artwork wall, the graphic of the day, the scroll statement. Colours are the smzed tokens. */
.smzv4-hero{position:relative;height:clamp(520px,78vh,880px);background:var(--smzed-ink,#0a0a09);overflow:hidden;isolation:isolate}
.smzv4-hero::before{content:"";position:absolute;inset:0;background:var(--smzv4-wall) center/cover no-repeat;opacity:.5;z-index:0}
.smzv4-hero.is-live::before{display:none}
.smzv4-hero__gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity .6s cubic-bezier(.25,.6,.3,1)}
.smzv4-hero.is-live .smzv4-hero__gl{opacity:1}
.smzv4-hero.is-static .smzv4-hero__gl{display:none}
.smzv4-hero.is-static::before{opacity:.85}
.smzv4-hero__copy{position:absolute;left:28px;bottom:28px;z-index:3;max-width:min(720px,calc(100% - 56px));padding:22px 24px 24px;background:var(--smzed-ink,#0a0a09);color:var(--smzed-bone,#fbfbf8);pointer-events:none}
.smzv4-hero__copy>*{pointer-events:auto}
.smzv4-kicker{margin:0 0 14px;font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:inherit;opacity:.72}
.smzv4-hero__copy h1{margin:0 0 20px;font:900 clamp(46px,6.6vw,126px)/.82 var(--smzed-sans,Inter,sans-serif);letter-spacing:-.07em;color:inherit;text-transform:uppercase}
.smzv4-hero__copy h1 span{display:inline-block;animation:smzv4-rise .6s cubic-bezier(.25,.6,.3,1) both}
.smzv4-hero__copy h1 span:nth-child(2){animation-delay:.08s}
.smzv4-hero__copy h1 span:nth-child(3){animation-delay:.16s}
@keyframes smzv4-rise{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
.smzv4-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;background:var(--smzed-bone,#fbfbf8);color:var(--smzed-ink,#0a0a09);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--smzed-bone,#fbfbf8);transition:background .2s,color .2s}
.smzv4-btn:hover,.smzv4-btn:focus-visible{background:transparent;color:var(--smzed-bone,#fbfbf8)}
.smzv4-btn--ink{background:var(--smzed-ink,#0a0a09);color:var(--smzed-bone,#fbfbf8);border-color:var(--smzed-ink,#0a0a09)}
.smzv4-btn--ink:hover,.smzv4-btn--ink:focus-visible{background:transparent;color:var(--smzed-ink,#0a0a09)}
.smzv4-btn:focus-visible{outline:2px solid var(--smzed-accent,#a31f27);outline-offset:2px}
.smzv4-hero__hint{position:absolute;right:28px;bottom:28px;z-index:3;margin:0;padding:8px 12px;background:var(--smzed-ink,#0a0a09);color:var(--smzed-bone,#fbfbf8);font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.smzv4-hero__hint-m{display:none}
.smzv4-hero.is-static .smzv4-hero__hint{display:none}
.smzv4-hero__tag{position:absolute;left:0;top:0;z-index:4;display:flex;align-items:center;gap:10px;max-width:min(320px,calc(100% - 16px));padding:10px 12px;background:var(--smzed-bone,#fbfbf8);color:var(--smzed-ink,#0a0a09);font:700 12px/1.25 var(--smzed-sans,Inter,sans-serif);text-decoration:none;will-change:transform}
.smzv4-hero__tag[hidden]{display:none}
.smzv4-hero__tag [data-smzv4-price]{font-weight:500;color:var(--smzed-soft,#666);white-space:nowrap}
.smzv4-hero__tag-go{padding:6px 8px;background:var(--smzed-ink,#0a0a09);color:var(--smzed-bone,#fbfbf8);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){.smzv4-hero__tag{pointer-events:none}.smzv4-hero__tag-go{display:none}}

/* graphic of the day - the page's own section, wrap and heading styles; only the layout is new */
.smzv4-feature{background:var(--smzed-bone,#fbfbf8)}
.smzv4-feature__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:58px;align-items:end}
.smzv4-feature__copy{margin:0}
.smzv4-feature .smzed-h2{font-size:clamp(40px,4.6vw,88px);line-height:.9;letter-spacing:-.06em;overflow-wrap:anywhere}
.smzv4-feature__art{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-decoration:none}
.smzv4-feature__art img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;background:var(--smzed-steel,#f4f4f1);transition:transform .5s cubic-bezier(.25,.6,.3,1)}
.smzv4-feature__art:hover img{transform:scale(1.02)}
.smzv4-feature__grid{margin-top:58px}

/* the statement: each word takes its ink as the heading crosses the screen (native scroll-driven animation; plain ink without it) */
.smzv4-say .smzed-h2{margin-bottom:48px;font-size:clamp(40px,7vw,132px);line-height:.86}
.smzv4-say .smzed-h2 span{color:var(--smzed-ink,#0a0a09)}
@supports (animation-timeline:view()){
	@media (prefers-reduced-motion:no-preference){
		.smzv4-say .smzed-h2{view-timeline:--smzv4-say block}
		.smzv4-say .smzed-h2 span{color:var(--smzed-line,#deded8);animation:smzv4-ink linear both;animation-timeline:--smzv4-say;animation-range:cover calc(16% + var(--i) * 2.6%) cover calc(24% + var(--i) * 2.6%)}
	}
}
@keyframes smzv4-ink{to{color:var(--smzed-ink,#0a0a09)}}
.smzv4-say__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0 0 36px;padding:0;list-style:none}
.smzv4-say__facts li{padding-top:14px;border-top:1px solid var(--smzed-ink,#0a0a09);font:650 14px/1.45 var(--smzed-sans,Inter,sans-serif);color:var(--smzed-ink,#0a0a09)}
.smzv4-say__facts b{display:block;margin-bottom:8px;font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--smzed-accent,#a31f27)}

@media (max-width:782px){
	.smzv4-hero{height:clamp(460px,72svh,680px)}
	.smzv4-hero__copy{left:20px;right:20px;bottom:20px;max-width:none;padding:18px 18px 20px}
	.smzv4-hero__hint{left:20px;right:auto;top:20px;bottom:auto}
	.smzv4-hero__hint-d{display:none}.smzv4-hero__hint-m{display:inline}
	.smzv4-feature__in{grid-template-columns:1fr;gap:24px}
	.smzv4-feature__grid{margin-top:28px}
	.smzv4-say .smzed-h2{margin-bottom:28px}
	.smzv4-say__facts{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
}
@media (prefers-reduced-motion:reduce){.smzv4-hero__copy h1 span{animation:none}.smzv4-hero__gl{transition:none}}

/* the shell colours every link in main; these buttons keep their own */
.smzed.smzv4 a.smzv4-btn{color:var(--smzed-ink,#0a0a09)!important;text-decoration:none!important}
.smzed.smzv4 a.smzv4-btn:hover,.smzed.smzv4 a.smzv4-btn:focus-visible{color:var(--smzed-bone,#fbfbf8)!important}
.smzed.smzv4 a.smzv4-btn--ink{color:var(--smzed-bone,#fbfbf8)!important}
.smzed.smzv4 a.smzv4-btn--ink:hover,.smzed.smzv4 a.smzv4-btn--ink:focus-visible{color:var(--smzed-ink,#0a0a09)!important}
.smzed.smzv4 a.smzv4-hero__tag{color:var(--smzed-ink,#0a0a09)!important;text-decoration:none!important}
/* the page's heading rule is more specific; these two headings carry long lines and need their own size */
body .smzed.smzv4 .smzv4-feature .smzed-h2{font-size:clamp(38px,4.1vw,84px)!important;line-height:.9!important;letter-spacing:-.06em!important;overflow-wrap:normal;word-break:normal;hyphens:none}
body .smzed.smzv4 .smzv4-say .smzed-h2{font-size:clamp(38px,6.4vw,126px)!important;line-height:.86!important;overflow-wrap:normal;word-break:normal;hyphens:none}
body .smzed.smzv4 .smzv4-say .smzed-h2{max-width:none!important}
body .smzed.smzv4 .smzv4-say__facts b{color:var(--smzed-ink,#0a0a09)}

/* the hats wall: the same wall, a little lower, its heading in the same type */
.smzv4-hero--hats{height:clamp(420px,62vh,720px);border-top:1px solid #34342f}
.smzv4-hero__copy h2{margin:0 0 20px;font:900 clamp(46px,6.6vw,126px)/.82 var(--smzed-sans,Inter,sans-serif)!important;letter-spacing:-.07em!important;color:inherit!important;text-transform:uppercase}
.smzv4-hero__copy h2 span{display:inline-block}
@media (max-width:782px){.smzv4-hero--hats{height:clamp(380px,58svh,560px)}}

/* owner 2026-10-13 ("캐러솔들이 너무 작고 카드들 간격이 너무 적고"): bigger cards with air between them - about three and a half
   to a row on a desktop, two and a half on a tablet, one and a half on a phone (the next card always peeks in) */
body .smzed.smzv4 .smzed-swiper .smzed-track{grid-auto-columns:calc((100% - 72px) / 3.4)!important;gap:24px!important;column-gap:24px!important}
body .smzed.smzv4 .smzed-swiper{border:0!important}
@media (max-width:1200px){body .smzed.smzv4 .smzed-swiper .smzed-track{grid-auto-columns:calc((100% - 40px) / 2.4)!important;gap:20px!important;column-gap:20px!important}}
@media (max-width:782px){body .smzed.smzv4 .smzed-swiper .smzed-track{grid-auto-columns:calc((100% - 14px) / 1.45)!important;gap:14px!important;column-gap:14px!important}}
/* owner 2026-10-13 ("캐러솔도 풀스크린으로"): the rows run the full width of the screen like the wall */
body .smzed.smzv4 .smzed-rail .smzed-wrap{max-width:none!important;width:auto!important;padding-left:28px!important;padding-right:28px!important}
body .smzed.smzv4 .smzed-swiper .smzed-track{grid-auto-columns:calc((100% - 96px) / 5)!important}   /* owner: "5개" - five cards to a row on a desktop */
@media (max-width:1200px){body .smzed.smzv4 .smzed-swiper .smzed-track{grid-auto-columns:calc((100% - 40px) / 2.4)!important}}
@media (max-width:782px){body .smzed.smzv4 .smzed-rail .smzed-wrap{padding-left:20px!important;padding-right:20px!important}body .smzed.smzv4 .smzed-swiper .smzed-track{grid-auto-columns:calc((100% - 14px) / 1.45)!important}}