/* 2026-10-05 사용자 지정: 남색 데스크와 곡선으로 독자적인 메인 구성. */
#landing-hero{background:#fcfbf8;color:#303e50}
#landing-hero{background:transparent}
#landing-hero:before{inset:26% -15% -35% 19%;background:radial-gradient(ellipse at 67% 61%,#e9eff4 0,transparent 65%)}
#landing-hero .intro{margin-top:48px}
#landing-hero .eyebrow{color:#809096}
#landing-hero .eyebrow:before{background:#acbea8}
#landing-hero h1{font-weight:690;letter-spacing:-.058em}
#landing-hero h1 span{color:#507b86}
#landing-hero .primary{background:#364359;border-radius:5px;box-shadow:none}
#landing-hero .intro-side p{color:#7d8892}
#landing-hero .feature-groups{margin-top:31px;gap:9px}
#landing-hero .feature-groups button{border:1px solid transparent;padding:9px 15px;border-radius:30px;color:#8c999f}
#landing-hero .feature-groups button[aria-pressed=true]{border-color:#dce3e5;background:#fff;color:#364359;font-weight:650}
#landing-hero .feature-groups small{color:#98a3a9}
#landing-hero .stage{height:470px;margin-top:20px}
#landing-hero .ghost,#landing-hero .back-word,#landing-hero .spark,#landing-hero .note{display:none}
#landing-hero .stage:before{content:'';position:absolute;left:56%;top:7%;width:390px;height:360px;border:1px solid #dce4df;border-radius:50%;transform:rotate(-24deg) scaleX(1.55);z-index:-1}
#landing-hero .stage:after{content:'';position:absolute;left:69%;top:6%;width:230px;height:355px;background:#eceee4;border-radius:48% 52% 45% 55%;transform:rotate(31deg);z-index:-2}
#landing-hero .node{flex-direction:row;gap:11px;border:1px solid #e4e7e5;background:#ffffffb5;border-radius:50px;padding:10px 17px 10px 10px;box-shadow:0 9px 26px -20px #61748045;transition:border-color .3s,background .3s;min-width:132px;justify-content:flex-start;transform:translate(-50%,-50%) rotate(var(--tilt))}
#landing-hero .node-art{width:40px;height:40px;flex-shrink:0;border:0;background:var(--pale);border-radius:50%;box-shadow:none;transform:none;animation:none!important}
#landing-hero .node svg{width:23px;height:23px;stroke-width:1.7}
#landing-hero .node strong{font-size:12px;font-weight:550;white-space:nowrap;color:#657685}
#landing-hero .node[aria-pressed=true]{background:#fff;border-color:#879eab;box-shadow:0 12px 30px -20px #4c71886b}
#landing-hero .node[aria-pressed=true] strong{color:#334a5d}
#landing-hero .node[aria-pressed=true] .node-art{box-shadow:none;background:#364359;color:white;transform:none}
#landing-hero .node:hover .node-art{transform:none}
#landing-hero .node:hover{border-color:#aab9c3}
#landing-hero .node[data-slot="0"]{--x:12%;--y:20%;--tilt:-7deg}
#landing-hero .node[data-slot="1"]{--x:35%;--y:10%;--tilt:4deg}
#landing-hero .node[data-slot="2"]{--x:39%;--y:41%;--tilt:-3deg}
#landing-hero .node[data-slot="3"]{--x:11%;--y:66%;--tilt:5deg}
#landing-hero .node[data-slot="4"]{--x:30%;--y:89%;--tilt:-4deg}
#landing-hero .node[data-slot="5"]{--x:52%;--y:75%;--tilt:4deg}
#landing-hero .wire.hot{stroke:#819fad;stroke-width:1.6}
#landing-hero .destination{left:79%;top:43%;width:388px;height:267px;padding:28px 30px;background:#364359!important;border-radius:17px;transform:translate(-50%,-50%) rotate(-4deg);box-shadow:12px 22px 0 -7px #dfe6e7,0 32px 58px -35px #354f6d70;color:#fff}
#landing-hero .destination:before{inset:10px -14px -12px 12px;border:1px solid #aabbc744;border-radius:18px;transform:rotate(7deg);background:transparent}
#landing-hero .destination-brand .word{width:96px}
#landing-hero .destination-brand .mark{width:20px;height:20px}
#landing-hero .live{color:#c6d9dd;font-size:8px;letter-spacing:.1em}
#landing-hero .live:before{background:#bdd0ad}
#landing-hero .destination h2{margin:25px 0 12px;font-size:25px;max-width:260px;line-height:1.4;letter-spacing:-.045em}
#landing-hero .desk-subtitle{font-size:11px;color:#aebbc9;margin:0 0 23px}
#landing-hero .desk-lines{display:flex;gap:8px}
#landing-hero .desk-lines span{display:block;height:5px;border-radius:5px;background:#b6c6d329;width:68px}
#landing-hero .desk-lines span:nth-child(2){width:43px;background:#c7dbc167}
#landing-hero .desk-lines span:nth-child(3){width:28px}
#landing-hero .result{position:absolute;bottom:-37px;left:-29px;width:304px;padding:17px 18px;gap:12px;border-radius:11px;transform:rotate(4deg);box-shadow:0 16px 30px -15px #58748e35;border:1px solid #ecf0f2;color:#405669}
#landing-hero .result-icon{background:#edf3ee;color:#719076;border-radius:50%;width:34px;height:34px}
#landing-hero .result small{font-size:10px}
#landing-hero .result strong{font-size:12px}
#landing-hero .desk-signature{position:absolute;right:3%;bottom:13%;font-size:10px;color:#8f9c9f;letter-spacing:.14em}
#landing-hero .desk-signature:before{content:'';display:inline-block;vertical-align:middle;width:32px;height:1px;background:#a9b8b8;margin-right:11px}
#landing-hero .scene-controls{margin-top:24px}
#landing-hero .scene-controls .scene-name{color:#547481}
#landing-hero .scene-controls button{color:#8a9da6}
#landing-hero .end-line{margin-top:7px;border-color:#e2e7e7}
#landing-hero .scene-count{font-variant-numeric:tabular-nums}
@keyframes dh-paper-arrive{0%,54%{opacity:0;translate:0 9px}66%,88%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
@media(max-width:1350px){#landing-hero .destination{width:337px;height:255px;padding:26px}
#landing-hero .destination h2{font-size:23px}
#landing-hero .stage:before{width:320px}
#landing-hero .result{width:284px}
#landing-hero .node{min-width:120px;padding:9px 13px 9px 9px;gap:8px}
#landing-hero .node-art{width:37px;height:37px}
#landing-hero .node strong{font-size:11px}}
@media(max-width:1050px){#landing-hero .destination{left:80%;width:265px;height:238px;padding:23px}
#landing-hero .destination h2{font-size:20px}
#landing-hero .destination-brand .word{width:80px}
#landing-hero .live{font-size:7px}
#landing-hero .result{left:-17px;width:253px;padding:14px 12px;gap:8px}
#landing-hero .result strong{font-size:10px}
#landing-hero .desk-subtitle{font-size:10px}
#landing-hero .node{min-width:108px}
#landing-hero .node-art{width:33px;height:33px}
#landing-hero .node svg{width:20px;height:20px}
#landing-hero .stage:before{left:54%;width:260px;height:300px;top:8%}
#landing-hero .stage:after{left:70%;width:175px;height:320px}
#landing-hero .desk-signature{right:0;font-size:8px}}
@media(max-width:760px){#landing-hero .intro{margin-top:30px}
#landing-hero h1{font-size:38px}
#landing-hero:before{inset:20% -90% -30%;background:radial-gradient(ellipse at 50% 65%,#e9eff4,transparent 61%)}
#landing-hero .feature-groups{margin-top:22px;gap:3px}
#landing-hero .feature-groups button{font-size:10px;padding:8px 10px}
#landing-hero .feature-groups small{font-size:8px}
#landing-hero .stage{height:545px;max-width:440px;margin-top:19px}
#landing-hero .node{padding:8px 10px 8px 8px;gap:7px;min-width:117px}
#landing-hero .node-art{width:32px;height:32px}
#landing-hero .node strong{font-size:11px}
#landing-hero .node[data-slot="0"]{--x:22%;--y:8%;--tilt:-5deg}
#landing-hero .node[data-slot="1"]{--x:74%;--y:7%;--tilt:4deg}
#landing-hero .node[data-slot="2"]{--x:32%;--y:23%;--tilt:-3deg}
#landing-hero .node[data-slot="3"]{--x:78%;--y:22%;--tilt:5deg}
#landing-hero .node[data-slot="4"]{--x:22%;--y:38%;--tilt:3deg}
#landing-hero .node[data-slot="5"]{--x:69%;--y:39%;--tilt:-4deg}
#landing-hero .destination{left:51%;top:73%;width:84%;height:224px;padding:22px 23px;transform:translate(-50%,-50%) rotate(-3deg)}
#landing-hero .destination h2{font-size:22px;margin:20px 0 10px}
#landing-hero .destination-brand .word{width:86px}
#landing-hero .live{font-size:7px}
#landing-hero .desk-subtitle{font-size:10px;margin-bottom:17px}
#landing-hero .result{width:89%;bottom:-31px;left:-10px;padding:13px 12px}
#landing-hero .result strong{font-size:10px}
#landing-hero .result small{font-size:9px}
#landing-hero .stage:before{left:17%;top:52%;width:230px;height:230px;transform:rotate(-28deg) scaleX(1.35)}
#landing-hero .stage:after{left:52%;top:50%;width:145px;height:238px}
#landing-hero .desk-signature{display:none}
#landing-hero .scene-controls{margin-top:26px}
#landing-hero .end-line{margin-top:0}
#landing-hero .result-icon{width:29px;height:29px}}
@media(max-width:350px){#landing-hero h1{font-size:33px}
#landing-hero .node{min-width:101px;padding:7px;gap:5px}
#landing-hero .node-art{width:28px;height:28px}
#landing-hero .node svg{width:18px;height:18px}
#landing-hero .node strong{font-size:10px}
#landing-hero .destination{width:85%;padding:20px;height:214px}
#landing-hero .destination h2{font-size:19px}
#landing-hero .live{font-size:6px}
#landing-hero .result{width:94%;left:-8px}
#landing-hero .result strong{font-size:9px}
#landing-hero .stage{height:525px}}
@media(min-width:761px) and (max-width:1050px){#landing-hero .node[data-slot="5"]{--x:47%;--y:82%}}
@media(prefers-reduced-motion:reduce){#landing-hero .result{translate:none}
#landing-hero .node{transition:none}}
#landing-hero .result{animation-name:dh-paper-arrive}#landing-hero .paused .result{transform:rotate(4deg)!important}
