﻿.planning-story{--planning-navy:#1c446d;--planning-blue:#2c6baf;background:#f2f4f6;color:#173b60;padding:76px 28px 0;scroll-margin-top:90px}
.planning-inner{max-width:1224px;margin:auto}.planning-heading{margin-bottom:30px}.planning-story .planning-heading h2{font-size:clamp(26px,3vw,38px);line-height:1.35;font-weight:700;letter-spacing:-.04em;color:#173b60;margin:0 0 10px;word-break:keep-all}.planning-heading p{font-size:15px;color:#425971;margin:0;line-height:1.7}
.planning-demo{overflow:hidden;background:#fff;border-radius:16px;box-shadow:0 16px 50px #173b6010}.planning-stage{position:relative;height:720px;overflow:hidden;isolation:isolate;background:#edf1f5}
.planning-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(5%);pointer-events:none;transition:opacity .65s cubic-bezier(.23,1,.32,1),transform .65s cubic-bezier(.23,1,.32,1),visibility .65s}
.planning-stage[data-view=consult] .planning-consult,.planning-stage[data-view=plan] .planning-plan,.planning-stage[data-view=model] .planning-model{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.planning-copy{position:absolute;z-index:3;left:48px;top:44px;right:270px;pointer-events:none}.planning-condition{display:inline-block;font-size:14px;font-weight:600;color:#20558d;margin-bottom:17px}.planning-story .planning-copy h3{font-family:inherit;font-size:clamp(30px,3.6vw,48px);font-weight:700;line-height:1.27;letter-spacing:-.045em;word-break:keep-all;margin:0;color:#173b60}.planning-copy p{font-size:16px;line-height:1.6;color:#425971;margin:17px 0 0;word-break:keep-all}.planning-copy strong{font-weight:700}
.planning-time{position:absolute;z-index:3;right:44px;top:48px;padding-left:24px;border-left:1px solid #b7c9da;display:flex;flex-direction:column;gap:8px;color:#173b60}.planning-time>span{font-size:13px}.planning-time b{font-size:30px;line-height:1.15;letter-spacing:-.04em}.planning-time small{font-size:11px;color:#425971}
.planning-consult{background:#173b60}.planning-map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}.planning-consult::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#173b60 0%,#173b60e8 27%,#173b6000 63%)}.planning-consult .planning-condition{color:#c1e5f1}.planning-story .planning-consult h3,.planning-consult .planning-copy p,.planning-consult .planning-time,.planning-consult .planning-time small{color:#fff}.planning-consult .planning-copy strong{background:#fff;color:#1c446d;border-radius:4px;padding:4px 10px;margin-left:7px;font-size:14px}.planning-consult .planning-time{border-color:#8ba8c2}.map-note{position:absolute;z-index:3;background:#fff;border-radius:8px;padding:15px 19px;box-shadow:0 8px 20px #0d284e30;color:#173b60}.map-note span{display:block;font-size:11px;color:#47617c;margin-bottom:6px}.map-note b{font-size:15px}.map-note-one{left:24%;top:53%}.map-note-two{right:12%;top:71%}
.planning-bottom{position:absolute;bottom:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 34px;background:#fff;color:#425971;border-top:1px solid #d9e2ec;font-size:13px;line-height:1.6}.planning-bottom small{font-size:10px;color:#536478}.planning-consult .planning-bottom{background:#173b60;color:#fff;border-color:#456785}.planning-consult .planning-bottom small{color:#d4e4f1}
.planning-plan{background-color:#f7fafc;background-image:linear-gradient(#c6d7e540 1px,transparent 1px),linear-gradient(90deg,#c6d7e540 1px,transparent 1px);background-size:28px 28px}.planning-drawing{position:absolute;top:205px;height:450px;left:calc(50% - 170px);width:450px;overflow:hidden;mix-blend-mode:multiply}.planning-drawing img{position:absolute;width:225%;max-width:none;height:auto;left:-7%;top:-150px}.planning-scan{position:absolute;inset:0;background:linear-gradient(transparent 40%,#2c6baf18 49%,#2c6baf55 50%,transparent 51%);opacity:0;pointer-events:none}.planning-playing .planning-stage[data-view=plan] .planning-scan{animation:planning-scan 6.5s linear infinite}@keyframes planning-scan{0%{transform:translateY(-45%);opacity:0}15%,75%{opacity:1}100%{transform:translateY(45%);opacity:0}}
.drawing-note{position:absolute;left:48px;top:370px;color:#173b60;z-index:3;border-left:3px solid #2c6baf;padding-left:18px}.drawing-note>span{display:block;font-size:11px;color:#536478}.drawing-note>b{display:block;font-size:18px;margin:8px 0}.drawing-note p{font-size:13px;line-height:2;color:#425971;margin:0 0 12px}.drawing-note a{font-size:12px;color:#20558d;text-underline-offset:4px}
.planning-model{background:#edf1f5}.planning-poster,.planning-canvas{position:absolute;inset:150px 0 52px;width:100%;height:calc(100% - 202px);object-fit:contain}.planning-canvas canvas{display:block;width:100%;height:100%}.planning-story[data-model-ready=true] .planning-poster{visibility:hidden}.planning-model-label{position:absolute;z-index:3;right:32px;bottom:86px;font-size:11px;color:#425971;background:#fff;padding:8px 12px;border-radius:4px}
.planning-controls{display:flex;align-items:center;border-bottom:1px solid #d9e2ec;padding:0 28px;gap:26px}.planning-tabs{display:flex;flex:1;gap:20px}.planning-story button{font-family:inherit;cursor:pointer;border:0;color:#425971;background:transparent;min-height:44px}.planning-tabs button{position:relative;flex:1;text-align:left;padding:21px 4px 22px;line-height:1.4;overflow:hidden}.planning-tabs button span{display:block;font-size:11px;margin-bottom:6px;color:#536478}.planning-tabs button b{display:block;font-size:17px;font-weight:600;letter-spacing:-.025em}.planning-tabs button::before,.planning-tabs button::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:#d4e1ee;opacity:0;transform-origin:left}.planning-tabs button[aria-pressed=true]{color:#1c446d}.planning-tabs button[aria-pressed=true]::before{opacity:1}.planning-tabs button[aria-pressed=true]::after{opacity:1;background:#2c6baf}.planning-playing .planning-tabs button[aria-pressed=true]::after{animation:planning-progress 6.5s linear infinite}@keyframes planning-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.planning-transport{display:flex;align-items:center;gap:8px}.planning-transport button[data-step]{border:1px solid #d0dce8;border-radius:50%;width:40px;min-height:40px;font-size:18px}.planning-play{font-size:11px;min-width:100px;padding:8px;color:#20558d!important}.planning-story :is(button,a):focus-visible{outline:3px solid #2c6baf;outline-offset:-3px}
.planning-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:23px 32px}.planning-foot b{display:block;font-size:17px;line-height:1.5;color:#173b60}.planning-status{display:block;font-size:12px;line-height:1.6;color:#536478;margin-top:5px}.planning-cta{display:flex;align-items:center;justify-content:space-between;gap:34px;min-height:52px;padding:12px 23px;background:#2c6baf;color:#fff!important;border-radius:6px;font-size:14px;font-weight:600;text-decoration:none;box-sizing:border-box;flex-shrink:0}.planning-cta span{font-size:22px}
.planning-included{max-width:1224px;margin:30px auto 0;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid #d4dfe8}.planning-included span{font-size:12px;color:#536478}.planning-included p{font-size:14px;color:#173b60;margin:0}.planning-integrated{padding:0 0 40px;background:transparent}.planning-integrated .planning-heading{display:none}
@media(max-width:900px){.planning-copy{left:30px;right:220px}.planning-story .planning-copy h3{font-size:36px}.planning-time{right:30px;padding-left:15px}.planning-time b{font-size:26px}.planning-controls{flex-wrap:wrap;gap:0}.planning-tabs{width:100%;flex:auto}.planning-transport{margin:8px 0 12px auto}.drawing-note{left:30px}.planning-drawing{left:calc(50% - 130px);width:420px}.planning-foot{padding:22px;gap:16px}.planning-cta{gap:20px}}
@media(max-width:600px){.planning-story:not(.planning-integrated){padding:42px 16px 0}.planning-heading{margin-bottom:22px}.planning-story .planning-heading h2{font-size:27px}.planning-heading p{font-size:13px}.planning-demo{border-radius:10px}.planning-stage{height:710px}.planning-copy{left:23px;right:20px;top:28px}.planning-condition{font-size:12px;margin-bottom:14px}.planning-story .planning-copy h3{font-size:29px;line-height:1.3}.planning-copy p{font-size:13px;margin-top:14px}.planning-consult .planning-copy strong{font-size:12px;padding:3px 7px;margin-left:4px}.planning-time{top:215px;left:23px;right:auto;border-left:0;padding:0;gap:5px}.planning-time>span{font-size:11px}.planning-time b{font-size:25px}.planning-time small{font-size:10px}.planning-map{width:185%;max-width:none;left:-54%;top:70px;height:88%}.planning-consult::after{background:linear-gradient(180deg,#173b60 0%,#173b60eb 33%,#173b6000 65%)}.map-note{padding:12px 14px}.map-note b{font-size:12px}.map-note-one{left:20px;top:52%}.map-note-two{right:18px;top:76%}.map-note span{font-size:10px}.planning-bottom{padding:14px 20px;display:block;font-size:12px}.planning-bottom small{display:block;font-size:9px;margin-top:4px}.planning-drawing{top:325px;left:calc(50% - 140px);width:280px;height:310px;bottom:auto}.planning-drawing img{width:225%;left:-7%;top:-90px}.drawing-note{top:235px;left:auto;right:20px;border-left:1px solid #adc5db;padding-left:12px}.drawing-note>span{font-size:9px}.drawing-note>b{font-size:13px;margin:4px 0 7px}.drawing-note p{display:none}.drawing-note a{font-size:10px}.planning-poster,.planning-canvas{inset:310px 0 73px;height:calc(100% - 383px)}.planning-model-label{right:15px;bottom:94px;font-size:9px;padding:6px 8px}.planning-controls{padding:0 15px}.planning-tabs{gap:9px}.planning-tabs button{padding:16px 0}.planning-tabs button span{font-size:9px}.planning-tabs button b{font-size:12px;white-space:nowrap}.planning-transport{width:100%;justify-content:space-between;margin:0 0 12px}.planning-transport button[data-step]{min-height:34px;height:34px;width:34px}.planning-foot{display:block;padding:20px}.planning-foot b{font-size:16px}.planning-status{font-size:11px}.planning-cta{margin-top:17px;width:100%;min-height:50px;font-size:13px}.planning-included{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}.planning-included span{grid-column:1/-1}.planning-included p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.planning-slide{transition:none;transform:none}.planning-scan{display:none}.planning-tabs button::after{animation:none!important}}

@media(max-width:350px){.planning-time{top:230px}}
/* Full-panel design gallery. Visuals are supplied 3D renders; controls stay in the DOM. */
.planning-model{background:#173b60}.planning-gallery-image{position:absolute;inset:0;width:100%;height:calc(100% - 60px);object-fit:cover;object-position:center 53%}.planning-model::after{content:'';position:absolute;inset:0 0 60px;z-index:1;pointer-events:none;background:linear-gradient(180deg,#102b45ed 0%,#102b45b8 24%,#102b4500 52%,#102b4555 80%,#102b45d9 100%)}
.planning-story .planning-model .planning-copy h3{color:#fff;font-size:42px}.planning-model .planning-condition{color:#c6e5f1}.planning-model .planning-copy p,.planning-model .planning-time,.planning-model .planning-time small{color:#fff}.planning-model .planning-time{border-color:#91a9bd}
.gallery-toolbar{position:absolute;left:48px;right:44px;top:235px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px}.gallery-designs{display:flex;gap:7px;background:#173b60e8;padding:5px;border-radius:8px}.planning-story .gallery-designs button{display:flex;align-items:center;gap:8px;padding:9px 15px;color:#fff;border-radius:5px;font-size:13px;font-weight:600}.planning-story .gallery-designs button[aria-pressed=true]{background:#fff;color:#173b60}.gallery-designs i{width:13px;height:13px;border-radius:50%;border:1px solid #a9b9c8;display:block}.swatch-changdong{background:#aa9b8a}.swatch-white{background:#fff}.swatch-industrial{background:#454b53}.planning-story .gallery-live{color:#fff;background:#173b60e8;border:1px solid #91a9bd;border-radius:6px;padding:10px 16px;font-size:12px}
.gallery-caption{position:absolute;right:34px;bottom:196px;z-index:4;display:flex;gap:18px;align-items:center;color:#fff;background:#173b60ed;padding:9px 13px;border-radius:5px;font-size:12px}.gallery-caption [data-gallery-count]{font-size:10px;color:#c6deef}.gallery-angles{position:absolute;z-index:4;bottom:78px;left:34px;right:34px;display:flex;gap:10px;max-width:740px}.planning-story .gallery-angles button{position:relative;flex:1;min-width:0;height:100px;padding:0;overflow:hidden;border:2px solid #ffffff70;border-radius:7px;background:#173b60;box-shadow:0 4px 12px #102b4520}.gallery-angles img{width:100%;height:100%;object-fit:cover;display:block;opacity:.72}.gallery-angles button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px #2c6baf}.gallery-angles button[aria-pressed=true] img{opacity:1}.gallery-angles span{position:absolute;bottom:0;left:0;right:0;padding:7px 5px;background:#173b60eb;color:#fff;font-size:11px;font-weight:600;text-align:center}
.planning-model .planning-canvas,.planning-model .planning-poster{inset:285px 0 185px;height:calc(100% - 470px);display:none}.planning-model[data-mode=live] .planning-canvas,.planning-model[data-mode=live] .planning-poster{display:block;z-index:2}.planning-model[data-mode=live] .planning-gallery-image{opacity:.1}.planning-model[data-mode=live]::after{background:linear-gradient(#173b60,#173b6080)}.planning-model[data-mode=live] .gallery-caption{display:none}.planning-model[aria-busy=true] .gallery-caption::before{content:'불러오는 중';color:#fff}.planning-model .planning-bottom{background:#173b60;color:#fff;border-color:#476681}.planning-model .planning-bottom small{color:#d3e5f3}
.planning-model .planning-copy{right:245px}.planning-demo{border-radius:18px;box-shadow:0 18px 60px #173b6014}.planning-foot{background:#f8fafc}.planning-heading p{max-width:650px}.planning-tabs button[aria-pressed=true] b{font-weight:700}.planning-story button:active{transform:translateY(1px)}
@media(max-width:900px){.planning-story .planning-model .planning-copy h3{font-size:33px}.gallery-toolbar{left:30px;right:30px;top:230px}.planning-story .gallery-designs button{padding:9px 10px;font-size:12px}.gallery-angles{max-width:none}.gallery-caption{bottom:196px}.planning-model .planning-copy{right:220px}}
@media(max-width:600px){.planning-story .planning-model .planning-copy h3{font-size:27px;line-height:1.3}.planning-model .planning-copy{left:23px;right:20px;top:28px}.planning-model .planning-copy p{font-size:12px;max-width:280px}.planning-model .planning-time{top:190px;left:23px;right:auto;gap:3px}.planning-model .planning-time>span{font-size:10px}.planning-model .planning-time b{font-size:22px}.planning-model .planning-time small{font-size:9px}.gallery-toolbar{left:16px;right:16px;top:282px;display:block}.gallery-designs{width:100%;box-sizing:border-box;gap:3px;padding:4px}.planning-story .gallery-designs button{flex:1;justify-content:center;gap:5px;padding:8px 5px;font-size:11px;white-space:nowrap}.gallery-designs i{width:10px;height:10px;flex-shrink:0}.planning-story .gallery-live{margin-top:9px;min-height:34px;font-size:10px;padding:7px 10px}.planning-gallery-image{height:calc(100% - 66px);object-position:46% center}.planning-model::after{bottom:66px;background:linear-gradient(180deg,#102b45f5 0%,#102b45d9 34%,#102b4520 63%,#102b45b8 100%)}.gallery-angles{left:14px;right:14px;bottom:89px;gap:5px}.planning-story .gallery-angles button{height:65px;border-radius:4px}.gallery-angles span{padding:5px 0;font-size:9px}.gallery-caption{right:16px;bottom:167px;font-size:10px;padding:7px 10px;gap:12px}.gallery-caption [data-gallery-count]{font-size:9px}.planning-model .planning-canvas,.planning-model .planning-poster{inset:365px 0 176px;height:calc(100% - 541px)}.planning-demo{border-radius:12px}}
@media(max-width:350px){.planning-story .planning-model .planning-copy h3{font-size:24px}.planning-model .planning-copy p{font-size:11px}.planning-model .planning-time{top:190px}.planning-story .gallery-designs button{font-size:10px;padding-inline:3px}.gallery-designs i{width:8px;height:8px}}
@media(max-width:350px){.planning-model .planning-time{top:220px}.gallery-toolbar{top:310px}}
.planning-model .planning-canvas,.planning-model .planning-poster{inset:200px 0 150px;height:calc(100% - 350px)}@media(max-width:600px){.planning-model .planning-canvas,.planning-model .planning-poster{inset:330px 0 160px;height:calc(100% - 490px)}}
/* Neutral gallery surfaces preserve the supplied interior colors. */
.planning-model{background:#eeefed}.planning-model::after,.planning-model[data-mode=live]::after{display:none}.planning-gallery-image{opacity:1;filter:none}.planning-model[data-mode=live] .planning-gallery-image{display:none}.planning-model .planning-copy{top:22px;left:26px;right:auto;padding:20px 24px;background:#fffffff5;border-radius:9px;box-shadow:0 4px 18px #2222220d}.planning-story .planning-model .planning-copy h3{font-size:34px;color:#282c30}.planning-model .planning-condition{color:#454a4e;margin-bottom:12px}.planning-model .planning-copy p{color:#4d5358;font-size:14px;margin-top:12px}.planning-model .planning-time{top:24px;right:26px;color:#282c30;background:#fffffff5;padding:16px 20px;border:0;border-radius:8px}.planning-model .planning-time small{color:#4d5358}.gallery-designs{background:#fffffff0;border:1px solid #d7d8d6;gap:9px;padding:7px;box-shadow:0 3px 15px #22222212}.planning-story .gallery-designs button{border:1px solid #8e918f;box-sizing:border-box;border-radius:5px;min-height:43px;padding:10px 18px}.planning-story .gallery-designs button[data-design=changdong]{background:#b4a58d;color:#29251f}.planning-story .gallery-designs button[data-design=white]{background:#fff;color:#30343a}.planning-story .gallery-designs button[data-design=industrial]{background:#454a50;color:#fff}.planning-story .gallery-designs button[aria-pressed=true]{outline:2px solid #292d31;outline-offset:2px;box-shadow:0 0 0 3px #fff}.gallery-designs i{display:none}.planning-story .gallery-live{background:#fffffff5;color:#30343a;border-color:#a4a8aa}.gallery-caption{background:#fffffff5;color:#30343a;box-shadow:0 3px 12px #00000012}.gallery-caption [data-gallery-count]{color:#555c61}.planning-model[aria-busy=true] .gallery-caption::before{color:#30343a}.planning-story .gallery-angles button{background:#e9eae8;border-color:#c5c7c6;box-shadow:0 4px 12px #00000018}.gallery-angles img{opacity:1}.gallery-angles button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px #373c40}.gallery-angles span{background:#fffffff2;color:#30343a}.planning-model .planning-bottom{background:#fafbf9;color:#30343a;border-color:#d5d8d5}.planning-model .planning-bottom small{color:#555c61}.planning-model[data-mode=live] .planning-canvas{z-index:2}.planning-model .planning-copy,.planning-model .planning-time{z-index:3}
.planning-consult::after{background:linear-gradient(180deg,#173b60 0%,#173b60e8 22%,#173b6010 48%,transparent 80%)}.planning-map{opacity:1}.map-note{border:1px solid #b3e3ec;box-shadow:0 12px 35px #09294b45}.map-note-one{border-left:4px solid #70c8be}.map-note-two{border-left:4px solid #ecc577}.map-focus-ring{animation:map-glow 3s ease-in-out infinite;animation-play-state:paused}.planning-playing .planning-stage[data-view=consult] .map-focus-ring{animation-play-state:running}@keyframes map-glow{0%,100%{opacity:.4}50%{opacity:1}}
@media(max-width:900px){.planning-story .planning-model .planning-copy h3{font-size:30px}.planning-model .planning-copy{max-width:calc(100% - 280px)}.planning-model .planning-time{right:20px;padding:15px}.planning-story .gallery-designs button{padding:9px 12px}}
@media(max-width:600px){.planning-model .planning-copy{left:16px;right:16px;top:16px;padding:15px 17px;max-width:none}.planning-story .planning-model .planning-copy h3{font-size:25px}.planning-model .planning-condition{font-size:11px;margin-bottom:9px}.planning-model .planning-copy p{font-size:11px;margin-top:9px;max-width:none}.planning-model .planning-time{left:16px;right:auto;top:195px;padding:10px 13px}.planning-model .planning-time b{font-size:22px}.gallery-toolbar{left:16px;right:16px;top:282px}.gallery-designs{gap:7px;padding:6px}.planning-story .gallery-designs button{font-size:11px;padding:8px 5px}.gallery-caption{background:#fffffff5}.planning-consult::after{background:linear-gradient(180deg,#173b60 0%,#173b60eb 30%,#173b6010 55%,transparent 85%)}.planning-map{top:65px}.map-note-one{top:52%}.map-note-two{top:76%}}
@media(max-width:350px){.planning-model .planning-time{top:205px}.gallery-toolbar{top:294px}.planning-story .gallery-designs button{font-size:10px}.planning-story .planning-model .planning-copy h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){.map-focus-ring{animation:none}}
