/* Lightweight CSS 3D geometry, real photos remain separate from decorative objects */
:root{--studio-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body,button,input,select,textarea{font-family:var(--studio-font)}
#app :is(h1,h2,h3,h4){font-family:var(--studio-font);word-break:keep-all;overflow-wrap:normal;text-wrap:balance;letter-spacing:-.035em;line-height:1.35}
#app :is(p,small,li,summary){word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
#app p{line-height:1.8}
#app .type-line{display:block;word-break:keep-all}
#app .we-hero h1{font-size:clamp(38px,4.8vw,72px);line-height:1.17;letter-spacing:-.045em}
#app .we-hero h1 .type-line{white-space:nowrap}
#app .we-home h2{font-size:clamp(29px,3.7vw,50px)}
#app .arc-summary h1{font-size:clamp(24px,3vw,36px);line-height:1.32}
#app .arc-summary p{line-height:1.65}
#app .we-service h3{font-size:clamp(23px,2.5vw,30px)}
#app .we-lead,#app .we-heading>p,#app .we-service p,#app .we-craft-list p{font-size:14px}
#app .info-page-intro h1{font-size:clamp(32px,5vw,42px)}
#app .info-page-intro>p{font-size:15px;max-width:42ch}
#app .wistia-about h2{font-size:clamp(25px,4vw,36px)}
.studio-meta-actions{display:flex;align-items:center;gap:18px}
button[data-studio-motion]{min-height:32px;border:1px solid #d9dee4;border-radius:999px;padding:5px 10px;font-size:10px;color:#626b75;background:#fff;white-space:nowrap}
.mobile-copy-break{display:none}
#app .wistia-location-address{padding:32px;background:#f7f8fa;border-radius:12px}
#app .studio-address{display:grid;gap:8px;margin-block:24px;font-size:32px;line-height:1.35;letter-spacing:-.025em}
.studio-address-city{font-size:15px;font-weight:500;color:#626b75}
.studio-address-street{white-space:nowrap;font-weight:600}
.studio-address-floor{font-size:19px;font-weight:500;color:#626b75}
#app .wistia-location-links{grid-template-columns:1fr}
#app .wistia-location-address>span{font-size:10px;letter-spacing:.12em}
/* Existing IDs/URLs retain the floating-click-only tracking contract */
body:not([data-page=event]):not(.menu-open):not(.modal-open) #floatingKakao{
 display:flex!important;position:fixed!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;
 right:max(18px,calc((100vw - var(--app-canvas-width))/2 + 18px))!important;left:auto!important;bottom:calc(22px + env(safe-area-inset-bottom))!important;
 width:148px!important;height:auto!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;z-index:90!important;transform:none!important
}
body #floatingKakao a{width:100%!important;height:50px!important;min-height:50px!important;padding:10px 14px!important;border-radius:12px!important;font-size:12px!important;font-weight:600;gap:8px}
body #floatingKakao .floating-action-price{box-shadow:0 3px 0 #d9dee4,0 8px 22px #292f3617!important;background:linear-gradient(150deg,#fff,#f1f3f5)!important}
body #floatingKakao .floating-action-chat{box-shadow:0 3px 0 #171d23,0 8px 22px #292f3620!important;background:linear-gradient(150deg,#434c55,#292f36)!important;border-radius:12px!important}
#floatingKakaoChat:before{content:""!important;display:block!important;width:15px;height:12px;border:1.5px solid currentColor;border-radius:5px;position:static!important;clip-path:none;background:transparent!important;transform:none!important;box-shadow:none!important}
body.menu-open #floatingKakao,body.modal-open #floatingKakao,body[data-page=event] #floatingKakao{display:none!important}
.ar-commerce-detail .arc-bottom{display:none!important}
#app .footer{padding-bottom:165px}
/* The right-hand contact buttons never receive perspective or scroll transforms */
.studio-hero-visual{position:relative;min-width:0;perspective:1100px}
.studio-hero-visual .we-hero-photo{position:absolute;right:8px;bottom:32px;width:36%;z-index:2;transform:rotate(5deg);background:#fff;padding:7px;box-shadow:0 15px 30px #292f361a}
.studio-hero-visual .we-hero-photo img{aspect-ratio:4/5;max-height:none}
.studio-hero-visual .we-hero-photo figcaption{font-size:8px;text-wrap:pretty;line-height:1.6;padding-top:7px}
.studio-scene{position:relative;isolation:isolate;width:100%;height:470px;perspective:1000px;overflow:hidden;border-radius:20px;background:radial-gradient(ellipse at 55% 30%,#fff 5%,#edf0f3 65%,#dfe4e9);contain:layout style;touch-action:pan-y}
.studio-world{position:absolute;left:50%;top:50%;width:300px;height:320px;margin:-160px 0 0 -150px;transform-style:preserve-3d;transform:rotateX(calc(-8deg + var(--tilt-x,0deg))) rotateY(calc(-16deg + var(--tilt-y,0deg) + var(--scroll-turn,0deg)));transition:transform .65s cubic-bezier(.16,1,.1,1)}
.studio-world>*{position:absolute;transform-style:preserve-3d}
.studio-scene-shadow{position:absolute;left:18%;right:18%;bottom:15%;height:25px;background:radial-gradient(ellipse,#68768340,transparent 70%);filter:blur(9px)}
.studio-orbit{width:310px;height:310px;border:1px solid #adb7c0;border-radius:50%;left:-5px;top:-12px;transform:rotateY(42deg) rotateX(24deg);box-shadow:inset 0 0 0 2px #ffffff90}
.studio-orbit-two{width:350px;height:350px;left:-25px;top:-30px;border-color:#fff;transform:rotateY(-45deg) rotateX(-28deg)}
.studio-record{width:210px;height:210px;left:30px;top:40px;transform:translateZ(-15px) rotateY(-28deg) rotateZ(-15deg)}
.studio-record-face,.studio-record-back{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden}
.studio-record-face{background:repeating-radial-gradient(circle,#c5cdd4 0 1px,#e6eaee 2px 3px,#aeb8c1 4px 5px);box-shadow:inset 0 0 0 3px #e8edf0;transform:translateZ(6px);display:grid;place-items:center}
.studio-record-face:after{content:"";position:absolute;width:8px;height:8px;left:calc(50% - 4px);top:calc(50% - 4px);border-radius:50%;background:#697581;border:2px solid #fafbfc}
.studio-record-face>span{width:76px;height:76px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:#f9fafb;box-shadow:0 0 0 1px #ffffffa0;font:500 11px/1.2 var(--font-heading);color:#333e47;letter-spacing:.09em}
.studio-record-face small{font:7px/1 var(--studio-font);letter-spacing:.05em;margin-top:8px}
.studio-record-back{background:#8f9aa4;transform:translateZ(-6px) rotateY(180deg)}
.studio-record-edge{position:absolute;inset:1px;border-radius:50%;background:#9ca8b2;transform:translateZ(0);box-shadow:0 0 0 5px #b9c3cb}
.studio-mic{left:180px;top:38px;width:74px;height:250px;transform:translateZ(75px) rotateZ(10deg)}
.studio-mic>*{position:absolute;transform-style:preserve-3d}
.studio-mic-mesh{left:8px;top:0;width:58px;height:92px;border-radius:30px 30px 14px 14px;background:repeating-linear-gradient(0deg,transparent 0 3px,#72808d66 4px 5px),repeating-linear-gradient(90deg,#dce3e9 0 2px,#71808c 3px 4px);box-shadow:inset 5px 0 8px #fff9,inset -10px 0 10px #52616d80;transform:translateZ(17px)}
.studio-mic-side{left:8px;top:0;width:34px;height:92px;border-radius:24px 24px 10px 10px;background:repeating-linear-gradient(0deg,#9dabb5 0 3px,#6d7c88 4px 5px);transform:translateX(42px) rotateY(90deg)}
.studio-mic-body{left:8px;top:88px;width:58px;height:62px;border-radius:0 0 18px 18px;background:linear-gradient(90deg,#a6b3bd,#f5f7f9 38%,#c3ccd4 70%,#7a8b98);transform:translateZ(17px)}
.studio-mic-body:after{content:"W";position:absolute;left:23px;top:20px;font:13px var(--font-heading);color:#758591}
.studio-mic-yoke{left:-3px;top:100px;width:80px;height:75px;border:5px solid #bbc6ce;border-top:0;border-radius:0 0 27px 27px;transform:translateZ(23px);box-shadow:0 2px 0 #8293a0}
.studio-mic-stem{left:31px;top:170px;width:13px;height:68px;background:linear-gradient(90deg,#8b9ca9,#edf2f5,#b3c0ca);transform:translateZ(20px)}
.studio-mic-base{left:-7px;top:233px;width:90px;height:40px;border-radius:50%;background:linear-gradient(145deg,#f9fbfc,#9eacb8);transform:rotateX(65deg) translateZ(20px);box-shadow:0 5px 0 #82929f}
.studio-plinth{left:12px;top:300px;width:276px;height:40px;transform:translateZ(0)}
.studio-plinth i{position:absolute;display:block;background:#e0e6eb;border:1px solid #d4dde4}
.studio-plinth i:nth-child(1){width:276px;height:140px;transform:rotateX(90deg) translateZ(70px);background:linear-gradient(120deg,#fff,#d5dee5)}
.studio-plinth i:nth-child(2){width:276px;height:40px;transform:translateZ(70px);background:linear-gradient(#eaf0f4,#bac6cf)}
.studio-plinth i:nth-child(3){width:140px;height:40px;right:-70px;transform:rotateY(90deg);background:#bcc8d1}
.studio-wave{left:14px;top:233px;display:flex;gap:7px;align-items:center;height:70px;transform:translateZ(-45px) rotateY(-12deg)}
.studio-wave i{display:block;width:4px;height:var(--height);border-radius:5px;background:linear-gradient(#fff,#9aaab8);box-shadow:2px 0 0 #c3cdd5;transform-origin:center}
.studio-scene-note{position:absolute;left:25px;bottom:22px;color:#687682;font-size:9px;letter-spacing:.18em}
.studio-sound-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;border-block:1px solid #d9dee4}
.studio-sound-section p{font-size:14px;margin-top:24px}
.studio-sound-section .text-link{margin-top:26px;font-size:13px}
.studio-scene-record .studio-mic{transform:translateZ(-70px) translateX(40px) scale(.65)}
.studio-scene-record .studio-record{width:265px;height:265px;left:8px;top:15px;transform:translateZ(65px) rotateY(-12deg) rotateZ(-20deg)}
.studio-scene-record .studio-record-face>span{width:94px;height:94px;font-size:15px}
.studio-scene-record .studio-record-face small{font-size:8px}
.studio-depth-card{--card-x:0deg;--card-y:0deg;position:relative;transform:perspective(1100px) rotateX(var(--card-x)) rotateY(var(--card-y));transition:transform .6s cubic-bezier(.16,1,.1,1),box-shadow .6s;transform-style:preserve-3d}
.studio-depth-card.is-pointed{box-shadow:0 22px 40px #292f3620}
.studio-depth-card>img{backface-visibility:hidden}
html[data-studio-motion=on] .studio-scene.is-in-view .studio-record{animation:studio-disc-float 7s ease-in-out infinite}
html[data-studio-motion=on] .studio-scene.is-in-view .studio-mic{animation:studio-mic-float 6s ease-in-out infinite}
html[data-studio-motion=on] .studio-scene-record.is-in-view .studio-record{animation:studio-disc-turn 12s ease-in-out infinite}
html[data-studio-motion=on] .studio-scene.is-in-view .studio-wave i{animation:studio-wave 2.2s ease-in-out infinite;animation-delay:calc(var(--wave)*-.12s)}
html[data-studio-motion=on] .studio-scene.is-in-view .studio-orbit-one{animation:studio-orbit 18s linear infinite}
html[data-studio-motion=on] .studio-scene.is-in-view .studio-orbit-two{animation:studio-orbit 24s linear infinite reverse}
.studio-scene *{animation-play-state:var(--studio-animation-state,running)!important}
@keyframes studio-disc-float{0%,100%{transform:translateZ(-15px) rotateY(-28deg) rotateZ(-15deg) translateY(0)}50%{transform:translateZ(0) rotateY(-5deg) rotateZ(-4deg) translateY(var(--studio-disc-rise,-14px))}}
@keyframes studio-mic-float{0%,100%{translate:0 0}50%{translate:0 var(--studio-mic-rise,-12px)}}
@keyframes studio-disc-turn{0%,100%{transform:translateZ(65px) rotateY(-12deg) rotateZ(-20deg)}50%{transform:translateZ(90px) rotateY(25deg) rotateZ(12deg)}}
@keyframes studio-wave{0%,100%{scale:1 .65}50%{scale:1 1}}
@keyframes studio-orbit{from{rotate:y 0deg}to{rotate:y 360deg}}
@media(max-width:900px){
 .studio-hero-visual .we-hero-photo{width:30%;right:5px;bottom:24px}
 .studio-scene{height:390px}.studio-world{scale:.88}
 .studio-sound-section{gap:32px}
}
@media(max-width:700px){
 #app .we-hero h1{font-size:clamp(35px,10.5vw,50px)}
 #app .we-home h2{font-size:clamp(27px,7.4vw,35px)}
 #app .we-lead,#app .we-heading>p,#app .we-service p,#app .we-craft-list p{font-size:13px}
 #app .arc-summary h1{font-size:24px}
 #app .arc-summary p{font-size:12px}
 #app .info-page-intro>p{font-size:14px}
 #app .wistia-location-address{padding:24px 20px}
 #app .studio-address{font-size:clamp(22px,6.3vw,30px);gap:9px}
 .studio-address-city{font-size:14px}.studio-address-floor{font-size:18px}
 .mobile-copy-break{display:block}
 .studio-meta-actions{gap:10px}
 button[data-studio-motion]{font-size:9px;padding:4px 8px}
 .studio-hero-visual{margin-top:6px}.studio-scene{height:330px;border-radius:16px}
 .studio-world{scale:.78}.studio-scene-shadow{bottom:12%}
 .studio-scene{--studio-disc-rise:-6px;--studio-mic-rise:-5px}
 .studio-hero-visual .we-hero-photo{width:29%;bottom:22px;right:5px;padding:5px}
 .studio-hero-visual .we-hero-photo figcaption{font-size:7px}
 .studio-sound-section{grid-template-columns:1fr;gap:24px}.studio-sound-section .studio-scene{height:330px}
 .studio-sound-section p{font-size:13px}
 body:not([data-page=event]):not(.menu-open):not(.modal-open) #floatingKakao{right:12px!important;left:auto!important;bottom:calc(16px + env(safe-area-inset-bottom))!important;width:132px!important}
 body #floatingKakao a{height:44px!important;min-height:44px!important;font-size:11px!important;padding:10px!important}
 .studio-depth-card{transform:none}
}
@media(max-width:360px){
 #app .studio-address{font-size:22px}
 .studio-scene{height:300px}.studio-world{scale:.68}
 .we-meta>span{max-width:115px}
 #app .we-service h3{font-size:23px}
 #app .arc-summary h1{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
 .studio-scene *{animation:none!important;transition:none!important}
 .studio-depth-card{transform:none;transition:none}
 /* Explicit, accessible per-site opt-in overrides only this site's decorative motion */
 html[data-studio-motion=on] .studio-scene.is-in-view .studio-record{animation:studio-disc-float 7s ease-in-out infinite!important}
 html[data-studio-motion=on] .studio-scene-record.is-in-view .studio-record{animation:studio-disc-turn 12s ease-in-out infinite!important}
 html[data-studio-motion=on] .studio-scene.is-in-view .studio-mic{animation:studio-mic-float 6s ease-in-out infinite!important}
 html[data-studio-motion=on] .studio-scene.is-in-view .studio-wave i{animation:studio-wave 2.2s ease-in-out infinite!important;animation-delay:calc(var(--wave)*-.12s)!important}
 html[data-studio-motion=on] .studio-scene.is-in-view .studio-orbit-one{animation:studio-orbit 18s linear infinite!important}
 html[data-studio-motion=on] .studio-scene.is-in-view .studio-orbit-two{animation:studio-orbit 24s linear infinite reverse!important}
 html[data-studio-motion=on] .studio-world{transition:transform .65s cubic-bezier(.16,1,.1,1)!important}
 html[data-studio-motion=on] .studio-depth-card{transform:perspective(1100px) rotateX(var(--card-x)) rotateY(var(--card-y));transition:transform .6s cubic-bezier(.16,1,.1,1)!important}
}
html[data-studio-motion=off] .studio-scene *{animation:none!important;transition:none!important}
html[data-studio-motion=off] .studio-depth-card{transform:none!important}
@media(min-width:901px) and (hover:hover) and (pointer:fine){html[data-studio-motion=on] .wistia-cursor{display:block!important}}
