/* StyleMZ home showcase (owner 2026-11-05 "아 이 사이트 대단하구나"): the first screen shows one best design at a time -
   the model shot, then a slow push into the drawing itself. Phone: the drawing fades in over the model shot.
   Desktop: copy panel | model shot | drawing, side by side. */
/* the .smzed scope swaps --smzed-ink/--smzed-bone (ink = paper there), so the showcase names its two colours itself */
.smzv4-show{--d:7s;--sw-ink:#0a0a09;--sw-paper:#fbfbf8;position:relative;height:clamp(520px,82svh,900px);background:var(--sw-ink);color:var(--sw-ink);overflow:hidden;isolation:isolate}
.smzv4-show__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s cubic-bezier(.25,.6,.3,1),visibility 0s linear .6s}
.smzv4-show__slide.is-on{opacity:1;visibility:visible;transition:opacity .6s cubic-bezier(.25,.6,.3,1),visibility 0s}
.smzv4-show__media{position:absolute;inset:0;display:block}
.smzv4-show__ph{position:absolute;inset:0;overflow:hidden;display:block}
.smzv4-show__ph img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 40%}
.smzv4-show__ph--art{opacity:0}
.smzv4-show__slide.is-on .smzv4-show__ph--model img{animation:smzv4-push var(--d) linear both}
.smzv4-show__slide.is-on .smzv4-show__ph--art{animation:smzv4-reveal var(--d) linear both}
.smzv4-show__slide.is-on .smzv4-show__ph--art img{animation:smzv4-push-art var(--d) linear both}
@keyframes smzv4-push{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes smzv4-push-art{0%,34%{transform:scale(1.04)}to{transform:scale(1.3)}}
@keyframes smzv4-reveal{0%,34%{opacity:0}46%,to{opacity:1}}

.smzv4-show__bars{position:absolute;z-index:4;top:14px;left:20px;right:20px;display:flex;gap:4px;pointer-events:none}
.smzv4-show__bars i{flex:1;height:3px;background:rgba(251,251,248,.45);box-shadow:0 0 0 1px rgba(10,10,9,.12);overflow:hidden}
.smzv4-show__bars b{display:block;height:100%;width:0;background:var(--sw-paper)}
.smzv4-show__bars i.is-done b{width:100%}
.smzv4-show__bars i.is-on b{animation:smzv4-bar var(--d) linear both}
.smzv4-show.is-paused .smzv4-show__bars i.is-on b,.smzv4-show.is-paused .smzv4-show__slide.is-on .smzv4-show__ph img,.smzv4-show.is-paused .smzv4-show__slide.is-on .smzv4-show__ph--art{animation-play-state:paused}
@keyframes smzv4-bar{from{width:0}to{width:100%}}

.smzv4-show__kicker{position:absolute;z-index:4;top:28px;left:20px;margin:0;padding:7px 10px;background:var(--sw-paper);color:var(--sw-ink);font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}

.smzv4-show__copy{position:absolute;z-index:3;left:20px;right:20px;bottom:20px;padding:14px 16px 16px;background:var(--sw-paper);color:var(--sw-ink);text-align:left}
.smzv4-show .smzv4-show__copy .smzv4-btn{align-self:flex-start;background:var(--sw-ink);border-color:var(--sw-ink);color:var(--sw-paper)!important}
.smzv4-show .smzv4-show__copy .smzv4-btn:hover,.smzv4-show .smzv4-show__copy .smzv4-btn:focus-visible{background:transparent;color:var(--sw-ink)!important}
.smzv4-show__name{margin:0 0 8px;font:900 clamp(26px,7.4vw,64px)/.92 var(--smzed-sans,Inter,sans-serif);letter-spacing:-.05em;text-transform:uppercase;color:inherit}
.smzv4-show__line{margin:0 0 12px;font:italic 500 13px/1.4 var(--smzed-sans,Inter,sans-serif);color:inherit;opacity:.86}
.smzv4-show__slide.is-on .smzv4-show__copy>*{animation:smzv4-up .5s cubic-bezier(.25,.6,.3,1) both}
.smzv4-show__slide.is-on .smzv4-show__line{animation-delay:.08s}
.smzv4-show__slide.is-on .smzv4-show__copy .smzv4-btn{animation-delay:.16s}
@keyframes smzv4-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.smzv4-show__nav{position:absolute;z-index:2;top:56px;bottom:46%;width:28%;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.smzv4-show__nav--prev{left:0}
.smzv4-show__nav--next{right:0}
.smzv4-show__nav:focus-visible{outline:2px solid var(--sw-paper);outline-offset:-4px}

/* desktop = a motion graphic on ink (2026-11-05 "모션그래픽으로"): the design name runs behind in giant outlined type,
   the drawing unveils from below and pulls back, the model shot lands as a tilted card, the name rises letter by letter,
   a yellow wipe changes designs, and the layers drift a little with the pointer. */
.smzv4-show__marq,.smzv4-show__wipe{display:none}
.smzv4-w{white-space:nowrap}
.smzv4-w>span{display:inline-block}
@media (min-width:783px){
	.smzv4-show{--sw-yel:#ffd523;--aw:calc(var(--h,800px) * .82 * 2 / 3);background:var(--sw-ink);color:var(--sw-paper)}
	.smzv4-show__slide{transition:opacity 0s linear .36s,visibility 0s linear .36s}
	.smzv4-show__slide.is-on{transition:opacity 0s linear .36s,visibility 0s}
	/* giant outlined name, two rows running opposite ways */
	.smzv4-show__marq{display:flex;position:absolute;z-index:0;left:0;top:3%;width:max-content;font:900 calc(var(--h,800px) * .3)/1 var(--smzed-sans,Inter,sans-serif);letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(255,213,35,.3);pointer-events:none;translate:calc(var(--mx,0) * 10px) 0;transition:translate .8s cubic-bezier(.2,.6,.2,1)}
	.smzv4-show__marq span{padding-right:.3em}
	.smzv4-show__marq--b{top:auto;bottom:3%;-webkit-text-stroke-color:rgba(251,251,248,.07)}
	.smzv4-show__slide.is-on .smzv4-show__marq{animation:smzv4-marq 46s linear infinite,smzv4-fade 1.2s ease-out both}
	.smzv4-show__slide.is-on .smzv4-show__marq--b{animation:smzv4-marq 54s linear infinite reverse,smzv4-fade 1.2s ease-out both}
	/* the drawing: tall panel on the right, unveiled from below, then a slow pull back */
	.smzv4-show__media{z-index:2;pointer-events:none}
	.smzv4-show__ph{inset:auto;pointer-events:auto}
	.smzv4-show__ph--art{opacity:1;top:10%;right:7%;height:82%;width:var(--aw);box-shadow:0 30px 80px rgba(0,0,0,.55);translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * -12px);transition:translate .8s cubic-bezier(.2,.6,.2,1)}
	.smzv4-show__slide.is-on .smzv4-show__ph--art{animation:smzv4-unveil 1.25s cubic-bezier(.7,0,.2,1) .3s both}
	.smzv4-show__slide.is-on .smzv4-show__ph--art img{animation:smzv4-pull var(--d) cubic-bezier(.2,.6,.2,1) .3s both;transform-origin:50% 45%}
	/* the model shot lands as a tilted photo card over the drawing's lower left corner */
	.smzv4-show__ph--model{z-index:1;bottom:8%;right:calc(7% + var(--aw) - var(--h,800px) * .13);width:calc(var(--h,800px) * .3);aspect-ratio:3/4;border:6px solid var(--sw-paper);box-shadow:0 24px 60px rgba(0,0,0,.5);translate:calc(var(--mx,0) * 24px) calc(var(--my,0) * 16px);transition:translate .8s cubic-bezier(.2,.6,.2,1);transform:rotate(-5deg)}
	.smzv4-show__slide.is-on .smzv4-show__ph--model{animation:smzv4-card 1s cubic-bezier(.2,.8,.2,1) .95s both}
	.smzv4-show__slide.is-on .smzv4-show__ph--model img{animation:smzv4-push var(--d) linear 1s both}
	/* the words, bottom left, on the ink */
	.smzv4-show__copy{z-index:3;top:auto;bottom:11%;left:5%;right:auto;width:calc(88% - var(--aw) - var(--h,800px) * .2);max-width:980px;padding:0;background:none;color:var(--sw-paper);display:block}
	.smzv4-show__name{font-size:clamp(52px,5.4vw,116px);line-height:.9;margin-bottom:22px;color:var(--sw-yel)}
	.smzv4-show__name .smzv4-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
	.smzv4-show__slide.is-on .smzv4-show__copy>.smzv4-show__name{animation:none}
	.smzv4-show__slide.is-on .smzv4-w>span{animation:smzv4-letter .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.45s + var(--i) * .03s)}
	.smzv4-show__line{font-size:18px;max-width:34ch;margin-bottom:28px;color:var(--sw-paper);opacity:.82}
	.smzv4-show__slide.is-on .smzv4-show__line{animation-delay:.9s}
	.smzv4-show__slide.is-on .smzv4-show__copy .smzv4-btn{animation-delay:1s}
	/* ink words on the yellow button (the .smzed scope paints .smzv4-btn text paper-white with a stronger rule) */
	html body .smzv4-show .smzv4-show__copy a.smzv4-btn{background:var(--sw-yel);border:2px solid var(--sw-yel);color:var(--sw-ink)!important;-webkit-text-fill-color:var(--sw-ink);font-size:13px;font-weight:800;letter-spacing:.12em;padding:17px 26px}
	html body .smzv4-show .smzv4-show__copy a.smzv4-btn:hover,html body .smzv4-show .smzv4-show__copy a.smzv4-btn:focus-visible{background:transparent;color:var(--sw-yel)!important;-webkit-text-fill-color:var(--sw-yel)}
	/* progress, label and arrows, top left */
	.smzv4-show__bars{top:30px;left:5%;right:auto;width:28%}
	.smzv4-show__bars i{background:rgba(251,251,248,.18);box-shadow:none}
	.smzv4-show__bars b{background:var(--sw-yel)}
	.smzv4-show__kicker{top:48px;left:5%;padding:0;background:none;color:var(--sw-yel);font-size:11px}
	.smzv4-show__nav{top:22px;bottom:auto;width:44px;height:44px;border:1px solid rgba(251,251,248,.5);color:var(--sw-paper);z-index:4}
	.smzv4-show__nav::before{font:400 18px/1 var(--smzed-sans,Inter,sans-serif)}
	.smzv4-show__nav--prev{left:calc(5% + 28% + 20px)}
	.smzv4-show__nav--next{left:calc(5% + 28% + 72px);right:auto}
	.smzv4-show__nav--prev::before{content:"\2190"}
	.smzv4-show__nav--next::before{content:"\2192"}
	.smzv4-show__nav:hover{background:var(--sw-yel);border-color:var(--sw-yel);color:var(--sw-ink)}
	/* the yellow wipe between designs */
	.smzv4-show__wipe{display:block;position:absolute;inset:0;z-index:6;background:var(--sw-yel);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
	.smzv4-show.is-wipe .smzv4-show__wipe{animation:smzv4-wipe .8s cubic-bezier(.7,0,.2,1) both}
}
@keyframes smzv4-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes smzv4-fade{from{opacity:0}to{opacity:1}}
@keyframes smzv4-unveil{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes smzv4-pull{from{transform:scale(1.28)}to{transform:scale(1.02)}}
@keyframes smzv4-card{from{opacity:0;transform:translate(-50px,80px) rotate(-14deg)}to{opacity:1;transform:rotate(-5deg)}}
@keyframes smzv4-letter{from{transform:translateY(108%)}to{transform:none}}
@keyframes smzv4-wipe{0%{transform:scaleX(0);transform-origin:0 50%}45%,55%{transform:scaleX(1);transform-origin:0 50%}55.1%{transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}

@media (prefers-reduced-motion:reduce){
	.smzv4-show__slide,.smzv4-show__slide.is-on{transition:none}
	.smzv4-show__slide.is-on .smzv4-show__ph img,.smzv4-show__slide.is-on .smzv4-show__copy>*{animation:none}
	.smzv4-show__slide.is-on .smzv4-show__ph--art{animation:none;opacity:0}
}
@media (prefers-reduced-motion:reduce) and (min-width:783px){.smzv4-show__slide.is-on .smzv4-show__ph--art{opacity:1}.smzv4-show__slide.is-on .smzv4-show__marq,.smzv4-show__slide.is-on .smzv4-show__ph--model,.smzv4-show__slide.is-on .smzv4-w>span,.smzv4-show.is-wipe .smzv4-show__wipe{animation:none}}