/* 2026-10-03 사용자 지정: 승인된 와이드 시안. 스타일은 메인 영역에만 적용한다. */
#landing-hero {position:relative;isolation:isolate;overflow:hidden}
#landing-hero:before {content:'';position:absolute;inset:27% -10% -30% 15%;z-index:-2;background:radial-gradient(ellipse at 72% 50%,#e4faff,transparent 64%)}
#landing-hero .intro {max-width:1240px;margin:58px auto 0;display:flex;justify-content:space-between;align-items:end;gap:30px}
#landing-hero .eyebrow {font-size:13px;color:#7794a8;letter-spacing:.025em;margin:0 0 21px;display:flex;align-items:center;gap:10px}
#landing-hero .eyebrow:before {content:'';width:24px;height:2px;background:#38bdf8}
#landing-hero h1 {font-size:58px;font-weight:730;line-height:1.17;letter-spacing:-.065em;margin:0}
#landing-hero h1 span {color:#139dda}
#landing-hero .intro-side {padding-bottom:6px}
#landing-hero .intro-side p {font-size:15px;color:#7d90a3;line-height:1.8;margin:0 0 20px;letter-spacing:-.02em}
#landing-hero .actions {display:flex;align-items:center;gap:24px;font-size:13px;font-weight:600}
#landing-hero .primary {padding:15px 21px;background:#364359;color:white;border-radius:10px;display:flex;gap:25px;align-items:center;transition:transform .2s}
#landing-hero .primary:hover {transform:translateY(-3px)}
#landing-hero .arrow {font-size:18px;font-weight:400}
#landing-hero .secondary {display:flex;gap:12px;align-items:center}
#landing-hero .stage {position:relative;width:calc(100% - 80px);max-width:1240px;height:485px;margin:30px auto 0;isolation:isolate}
#landing-hero .ghost {position:absolute;border:1px solid #d5eaf1a0;border-radius:25px;z-index:-1;background:linear-gradient(130deg,#f9fdff70,#ffffff10)}
#landing-hero .g1 {width:220px;height:148px;left:-130px;top:55px}
#landing-hero .g2 {width:147px;height:147px;left:23%;top:32px}
#landing-hero .g3 {width:270px;height:147px;left:33%;top:185px}
#landing-hero .g4 {width:146px;height:146px;left:4%;top:265px}
#landing-hero .g5 {width:330px;height:155px;left:76%;top:-42px}
#landing-hero .g6 {width:260px;height:147px;left:79%;top:346px}
#landing-hero .g7 {width:145px;height:145px;left:58%;top:287px}
#landing-hero .ghost:after {content:'';position:absolute;inset:20px;border-radius:15px;background:#f5fbfd40}
#landing-hero .back-word {position:absolute;left:12%;top:48%;font-size:70px;font-weight:700;letter-spacing:-.065em;color:#e5f2f580;z-index:-2;transform:rotate(-6deg);white-space:nowrap;user-select:none}
#landing-hero .wires {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#landing-hero .wire {fill:none;stroke:#d5e8ef;stroke-width:1.2;vector-effect:non-scaling-stroke}
#landing-hero .wire.hot {stroke:var(--accent,#20aedf);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;animation:dh-trace 6.8s ease-in-out infinite}
#landing-hero .wire.second {animation-delay:.45s}
#landing-hero .node {position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:0;padding:0;background:none;display:flex;flex-direction:column;align-items:center;gap:12px;color:#5c7188;z-index:2}
#landing-hero .node-art {position:relative;width:94px;height:94px;display:grid;place-items:center;border-radius:27px;color:var(--ink);background:linear-gradient(145deg,#fff,var(--pale));border:1px solid white;box-shadow:0 13px 34px -17px #417c9950;transform:rotate(var(--tilt));transition:background .5s,box-shadow .5s,transform .5s}
#landing-hero .node svg {width:40px;height:40px;stroke-width:1.8}
#landing-hero .node strong {font-size:13px;font-weight:600;letter-spacing:-.02em}
#landing-hero .node:hover .node-art {transform:rotate(0) translateY(-5px)}
#landing-hero .node[aria-pressed=true] .node-art {background:var(--pale);box-shadow:0 0 0 1px var(--ink),0 16px 35px -18px var(--ink);animation:dh-activate 6.8s ease-in-out infinite}
#landing-hero .node[aria-pressed=true] strong {color:var(--ink)}
#landing-hero .node.secondary-active .node-art {animation-delay:.45s}
#landing-hero .node[data-kind=calendar] {--x:13%;--y:19%;--ink:#369ed7;--pale:#e1f6ff;--tilt:-7deg}
#landing-hero .node[data-kind=check] {--x:34%;--y:43%;--ink:#22af96;--pale:#e0f8ee;--tilt:6deg}
#landing-hero .node[data-kind=students] {--x:53%;--y:15%;--ink:#9980d9;--pale:#f1ecff;--tilt:8deg}
#landing-hero .node[data-kind=chat] {--x:8%;--y:75%;--ink:#d99c43;--pale:#fff4da;--tilt:5deg}
#landing-hero .node[data-kind=payment] {--x:35%;--y:87%;--ink:#6086e4;--pale:#eaf0ff;--tilt:-6deg}
#landing-hero .node[data-kind=chart] {--x:56%;--y:70%;--ink:#cf7ca4;--pale:#fbeaf1;--tilt:-8deg}
#landing-hero .destination {position:absolute;left:83%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);width:314px;height:241px;background:#28acd9;border-radius:27px;box-shadow:0 24px 50px -25px #218ab685;z-index:3;color:white;padding:28px;transition:background 1s}
#landing-hero .destination:before {content:'';position:absolute;inset:-10px;border:1px solid #a0deed90;border-radius:35px;transform:rotate(5deg);z-index:-1}
#landing-hero .destination-top {display:flex;align-items:center;justify-content:space-between}
#landing-hero .destination-brand {display:flex;align-items:center;gap:7px}
#landing-hero .destination-brand img {filter:brightness(0) invert(1)}
#landing-hero .destination-brand .mark {width:21px;height:21px;object-fit:contain}
#landing-hero .destination-brand .word {width:96px}
#landing-hero .live {font-size:9px;letter-spacing:.06em;display:flex;gap:5px;align-items:center;opacity:.9}
#landing-hero .live:before {content:'';width:5px;height:5px;background:#fff;border-radius:50%}
#landing-hero .destination h2 {font-size:23px;line-height:1.35;font-weight:650;letter-spacing:-.04em;margin:21px 0 18px}
#landing-hero .result {background:white;color:#36526a;border-radius:14px;padding:14px 13px;display:flex;gap:10px;align-items:center;box-shadow:0 7px 20px #147ea71c;animation:dh-dh-dh-arrive 6.8s ease both infinite}
#landing-hero .result-icon {background:#e7f7fd;color:#24a1d6;border-radius:10px;width:32px;height:32px;flex-shrink:0;display:grid;place-items:center}
#landing-hero .result-icon svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#landing-hero .result small {display:block;color:#9aabb8;font-size:10px;margin-bottom:4px}
#landing-hero .result strong {font-size:12px;font-weight:650;display:block}
#landing-hero .note {position:absolute;left:72%;top:84%;display:flex;align-items:center;gap:8px;color:#6a9eb2;font-size:11px;transform:rotate(-3deg)}
#landing-hero .note svg {width:35px;height:30px;fill:none;stroke:#82bbcc;stroke-width:1.5}
#landing-hero .spark {position:absolute;color:#42b6dd;font-size:25px;left:65%;top:21%;font-weight:300}
#landing-hero .spark:after {content:'+';font-size:13px;position:absolute;top:-11px;left:16px}
#landing-hero .scene-controls {max-width:1240px;margin:13px auto 25px;display:flex;gap:19px;align-items:center;justify-content:center}
#landing-hero .scene-controls button {border:0;background:none;padding:8px 0;color:#a1b0be;font-size:11px;display:flex;align-items:center;gap:7px}
#landing-hero .scene-controls button i {width:4px;height:4px;border-radius:5px;background:#c7d7e1;transition:width .5s}
#landing-hero .scene-controls button[aria-pressed=true] {color:#318fb7}
#landing-hero .scene-controls button[aria-pressed=true] i {width:20px;background:#31b2e1}
#landing-hero .scene-controls .pause {margin-left:5px;font-size:12px;min-width:20px}
#landing-hero .paused * {animation-play-state:paused!important}
#landing-hero .quiet * {animation:none!important;transition:none!important}
#landing-hero .quiet .wire.hot {stroke-dashoffset:0;opacity:1}
#landing-hero .quiet .result {opacity:1;transform:none}
#landing-hero .paused .result {opacity:1!important;animation:none!important;transform:none!important}
#landing-hero .paused .wire.hot {stroke-dashoffset:0!important;opacity:1!important}
#landing-hero .end-line {border-top:1px solid #e9f2f6;max-width:1240px;margin:auto;padding:27px 0 40px;display:flex;justify-content:space-between;color:#8ca0b1;font-size:12px}
#landing-hero .end-line strong {color:#536f86;font-weight:550}
#landing-hero .end-line span:last-child {font-size:9px;letter-spacing:.18em}
@keyframes dh-trace {0%,10%{stroke-dashoffset:1;opacity:0}16%{opacity:1}54%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes dh-activate {0%,100%{transform:rotate(var(--tilt))}20%,75%{transform:translateY(-7px) rotate(0)}}
@keyframes dh-dh-dh-arrive {0%,38%{opacity:0;transform:translateY(9px)}53%,91%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@media(max-width:1350px) {
#landing-hero .intro {margin-left:40px;margin-right:40px}
#landing-hero .end-line {margin-left:40px;margin-right:40px}
#landing-hero h1 {font-size:51px}
#landing-hero .destination {width:280px;height:230px;padding:25px}
#landing-hero .destination h2 {font-size:22px}
#landing-hero .node-art {width:85px;height:85px}
#landing-hero .stage {height:470px}
#landing-hero .g3 {width:230px}
}
@media(max-width:1050px) {
#landing-hero .intro-side p {font-size:13px}
#landing-hero h1 {font-size:43px}
#landing-hero .intro {margin-top:45px}
#landing-hero .stage {height:420px}
#landing-hero .destination {width:232px;height:214px;padding:21px;left:84%}
#landing-hero .destination h2 {font-size:19px}
#landing-hero .result {padding:11px 9px;gap:7px}
#landing-hero .result-icon {width:25px;height:25px}
#landing-hero .result strong {font-size:10px}
#landing-hero .node-art {width:72px;height:72px;border-radius:23px}
#landing-hero .node svg {width:32px;height:32px}
#landing-hero .node strong {font-size:12px}
#landing-hero .destination-brand .word {width:82px}
#landing-hero .live {font-size:8px}
#landing-hero .note {left:69%;font-size:10px}
#landing-hero .g5 {left:72%;width:250px}
#landing-hero .g3 {width:190px}
#landing-hero .g7 {width:125px;height:125px;top:245px}
#landing-hero .back-word {font-size:55px}
}
@media(max-width:760px) {
#landing-hero header {height:70px;padding:0 23px}
#landing-hero .brand .mark {width:24px;height:24px}
#landing-hero .brand .word {width:111px}
#landing-hero nav {display:none}
#landing-hero .mobile-nav {display:block;font-size:12px;color:#58758c;font-weight:600}
#landing-hero .intro {margin:34px 22px 0;display:block}
#landing-hero .eyebrow {font-size:11px;margin-bottom:19px;gap:8px}
#landing-hero .eyebrow:before {width:17px}
#landing-hero h1 {font-size:39px;line-height:1.21;letter-spacing:-.055em}
#landing-hero .intro-side {margin-top:19px}
#landing-hero .intro-side p {font-size:13px;line-height:1.7;margin-bottom:19px}
#landing-hero .intro-side p br {display:none}
#landing-hero .actions {font-size:12px;gap:25px}
#landing-hero .primary {padding:13px 17px;gap:21px;border-radius:9px}
#landing-hero .stage {width:calc(100% - 36px);max-width:440px;height:560px;margin-top:24px}
#landing-hero .node-art {width:63px;height:63px;border-radius:20px}
#landing-hero .node svg {width:29px;height:29px}
#landing-hero .node strong {font-size:11px}
#landing-hero .node {gap:9px}
#landing-hero .node[data-kind=calendar] {--x:14%;--y:11%}
#landing-hero .node[data-kind=check] {--x:48%;--y:21%}
#landing-hero .node[data-kind=students] {--x:84%;--y:10%}
#landing-hero .node[data-kind=chat] {--x:14%;--y:39%}
#landing-hero .node[data-kind=payment] {--x:47%;--y:47%}
#landing-hero .node[data-kind=chart] {--x:85%;--y:37%}
#landing-hero .destination {left:50%;top:80%;width:89%;max-width:345px;height:179px;padding:20px 23px;border-radius:23px;transform:translate(-50%,-50%) rotate(-2deg)}
#landing-hero .destination h2 {font-size:21px;margin:15px 0 12px}
#landing-hero .destination-brand .word {width:95px}
#landing-hero .destination-brand .mark {width:20px;height:20px}
#landing-hero .live {font-size:9px}
#landing-hero .result {padding:10px 12px}
#landing-hero .result-icon {width:28px;height:28px}
#landing-hero .result strong {font-size:11px}
#landing-hero .result small {font-size:9px;margin-bottom:3px}
#landing-hero .note {display:none}
#landing-hero .g1 {left:-20%;top:35px;width:155px;height:90px}
#landing-hero .g2 {left:37%;top:25px;width:92px;height:92px}
#landing-hero .g3 {left:5%;top:191px;width:142px;height:90px}
#landing-hero .g4 {left:65%;top:280px;width:147px;height:90px}
#landing-hero .g5 {left:66%;top:88px;width:144px;height:113px}
#landing-hero .g6 {display:none}
#landing-hero .g7 {left:-27%;top:354px;width:150px;height:160px}
#landing-hero .back-word {font-size:43px;left:3%;top:27%;opacity:.7}
#landing-hero .spark {left:82%;top:55%;font-size:20px}
#landing-hero:before {inset:30% -50% -10%;background:radial-gradient(ellipse at 50% 55%,#e6faff,transparent 65%)}
#landing-hero .scene-controls {margin:3px 0 24px;gap:14px}
#landing-hero .scene-controls button {font-size:10px}
#landing-hero .scene-controls button[aria-pressed=true] i {width:12px}
#landing-hero .end-line {margin:0 23px;padding:24px 0 50px;display:block;font-size:11px;line-height:1.7}
#landing-hero .end-line span:last-child {display:block;margin-top:7px;font-size:8px}
}
@media(max-width:350px) {
#landing-hero h1 {font-size:33px}
#landing-hero .intro-side p {font-size:12px}
#landing-hero .node-art {width:55px;height:55px;border-radius:18px}
#landing-hero .stage {height:530px}
#landing-hero .destination {padding:18px 19px;width:90%;height:177px}
#landing-hero .destination h2 {font-size:19px}
#landing-hero .result strong {font-size:10px}
#landing-hero .scene-controls {gap:10px}
#landing-hero .scene-controls button {font-size:9px}
}
@media(prefers-reduced-motion:reduce) {
#landing-hero *,
#landing-hero *:before,
#landing-hero *:after {animation:none!important;transition:none!important}
#landing-hero .wire.hot {stroke-dashoffset:0;opacity:1}
#landing-hero .result {opacity:1;transform:none}
}
#landing-hero .wire {opacity:0}
#landing-hero .wire.hot {animation-fill-mode:both}
#landing-hero .result {animation:dh-dh-dh-arrive 6.8s ease-in-out both infinite}
@keyframes dh-dh-dh-arrive {0%,61%{opacity:0;transform:translateY(9px)}71%,88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce) {
#landing-hero .wire.hot {opacity:1;stroke-dashoffset:0}
#landing-hero .result {opacity:1;transform:none}
}
#landing-hero [hidden] {display:none!important}
#landing-hero .feature-groups {max-width:1240px;margin:25px auto 0;display:flex;align-items:center;gap:20px}
#landing-hero .feature-groups button {border:0;background:none;padding:9px 0;font-size:12px;color:#93a5b6;border-bottom:2px solid transparent}
#landing-hero .feature-groups button[aria-pressed=true] {color:#248fb7;border-bottom-color:#38bdf8;font-weight:600}
#landing-hero .feature-groups small {font-size:10px;color:#a1b1bf;margin-left:auto}
#landing-hero .scene-controls .scene-name {color:#4296b8;font-size:11px;min-width:100px;text-align:center}
#landing-hero .scene-controls .scene-count {font-size:10px;color:#9bb0bf;font-variant-numeric:tabular-nums}
#landing-hero .scene-controls .previous,
#landing-hero .scene-controls .next {font-size:17px;padding:5px 10px}
#landing-hero .node[data-slot="0"] {--x:13%;--y:19%;--tilt:-7deg}
#landing-hero .node[data-slot="1"] {--x:53%;--y:15%;--tilt:8deg}
#landing-hero .node[data-slot="2"] {--x:34%;--y:43%;--tilt:6deg}
#landing-hero .node[data-slot="3"] {--x:8%;--y:75%;--tilt:5deg}
#landing-hero .node[data-slot="4"] {--x:35%;--y:87%;--tilt:-6deg}
#landing-hero .node[data-slot="5"] {--x:56%;--y:70%;--tilt:-8deg}
@keyframes dh-dh-dh-arrive {0%,54%{opacity:0;transform:translateY(9px)}66%,88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@media(max-width:1350px) {
#landing-hero .feature-groups {margin-left:40px;margin-right:40px}
}
@media(max-width:760px) {
#landing-hero .feature-groups {margin:23px 22px 0;gap:17px}
#landing-hero .feature-groups button {font-size:11px}
#landing-hero .feature-groups small {font-size:9px}
#landing-hero .node[data-slot="0"] {--x:14%;--y:11%}
#landing-hero .node[data-slot="1"] {--x:84%;--y:10%}
#landing-hero .node[data-slot="2"] {--x:48%;--y:21%}
#landing-hero .node[data-slot="3"] {--x:14%;--y:39%}
#landing-hero .node[data-slot="4"] {--x:47%;--y:47%}
#landing-hero .node[data-slot="5"] {--x:85%;--y:37%}
}

#landing-hero {background-color:#fff;color:#293c52;}
#landing-hero button {font:inherit;cursor:pointer;}
#landing-hero a:focus-visible, #landing-hero button:focus-visible {outline:3px solid #239de7;outline-offset:6px;}