*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111}
body{font-family:Inter,"Noto Sans KR","Noto Sans CJK KR",sans-serif;color:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.home{width:100vw;height:100vh;display:flex;overflow:hidden;position:relative;background:#111}
.panel{position:relative;height:100%;flex:0 0 50%;overflow:hidden;transition:flex-basis 1.25s cubic-bezier(.22,.61,.36,1);isolation:isolate}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:-2;transition:transform 1.25s cubic-bezier(.22,.61,.36,1)}
.mudquick img{object-position:center 52%}
.muddymood img{object-position:center}
.shade{position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.25);transition:background 1.25s cubic-bezier(.22,.61,.36,1)}
.panel-copy{position:absolute;top:17%;width:72%;text-shadow:0 2px 12px rgba(0,0,0,.65);transition:transform 1.25s cubic-bezier(.22,.61,.36,1)}
.left-copy{left:10%;text-align:left}.right-copy{right:10%;text-align:right}
.kicker{margin:0 0 16px;font-size:17px;letter-spacing:-.04em;word-break:keep-all;line-break:strict;text-wrap:pretty}
h1{margin:0;font-size:clamp(44px,4.6vw,76px);line-height:1;letter-spacing:-.06em;text-wrap:balance}
.category{margin:20px 0 0;font-size:11px;letter-spacing:.45em;white-space:nowrap}
.line{width:58px;height:1px;background:#fff;margin:28px 0 22px;opacity:.85}
.left-copy .line{margin-left:0}.right-copy .line{margin-right:0;margin-left:auto}
.desc{margin:0;font-size:16px;line-height:1.6;letter-spacing:-.035em;word-break:keep-all;line-break:strict;text-wrap:pretty}
.explore{display:inline-flex;align-items:center;justify-content:center;gap:22px;width:195px;height:55px;margin-top:34px;border:1px solid rgba(255,255,255,.92);color:#fff;text-decoration:none;font-size:12px;letter-spacing:.13em;background:rgba(0,0,0,.10);text-shadow:0 1px 8px #0008;transition:background .25s,color .25s,gap .25s}
.explore:hover{background:#fff;color:#111;gap:31px;text-shadow:none}.explore span{font-size:20px;font-weight:300}
.brand{position:absolute;z-index:20;top:35px;left:50%;transform:translateX(-50%);text-align:center;font-size:27px;letter-spacing:.06em;text-shadow:0 2px 12px #0009;pointer-events:none}
.brand span{font-weight:400}.brand small{display:block;margin-top:7px;font-size:8px;letter-spacing:.3em}
.home:has(.mudquick:hover) .mudquick{flex-basis:60%}
.home:has(.mudquick:hover) .muddymood{flex-basis:40%}
.home:has(.muddymood:hover) .mudquick{flex-basis:40%}
.home:has(.muddymood:hover) .muddymood{flex-basis:60%}
.home:has(.mudquick:hover) .mudquick img{transform:scale(1.035)}
.home:has(.muddymood:hover) .muddymood img{transform:scale(1.035)}
.home:has(.mudquick:hover) .muddymood .shade{background:rgba(0,0,0,.48)}
.home:has(.mudquick:hover) .mudquick .shade{background:rgba(0,0,0,.14)}
.home:has(.muddymood:hover) .mudquick .shade{background:rgba(0,0,0,.48)}
.home:has(.muddymood:hover) .muddymood .shade{background:rgba(0,0,0,.14)}
@media(max-width:800px){
html,body{overflow:auto}.home{height:100dvh;min-height:650px}.panel{flex-basis:50%!important}.panel-copy{top:15%;width:84%}.left-copy{left:7%}.right-copy{right:7%}.kicker{font-size:13px}h1{font-size:10vw}.desc{font-size:12px}.explore{width:145px;height:48px;font-size:10px}.brand{top:20px;font-size:19px}.brand small{font-size:6px}
}