:root{--paper:#f8fbff;--white:#ffffff;--ink:#16284b;--muted:#52627d;--blue:#165dff;--blue-hover:#1047ca;--sky:#dceaff;--lavender:#efecff;--ice:#e2edff;--line:#dce5f3;--radius:16px;--ease:cubic-bezier(.16,1,.3,1);--shadow:0 14px 38px rgba(30,73,160,.1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:112px}body{word-break:keep-all;overflow-wrap:anywhere;margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',sans-serif;font-size:16px;line-height:1.8}button,input,textarea,select{font:inherit;color:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto;object-fit:contain}button:disabled{cursor:not-allowed;opacity:.62}::selection{background:#c7dcff;color:#133369}input,textarea{caret-color:var(--blue)}:focus-visible{outline:3px solid var(--blue);outline-offset:5px}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:#b2c9f4;border-radius:8px;border:2px solid var(--paper)}::-webkit-scrollbar-track{background:var(--paper)}
.skip{position:fixed;top:-100px;left:20px;background:var(--blue);color:white;padding:10px 20px;z-index:100}
.skip:focus{top:12px}
.draft-dot{height:6px;width:6px;border-radius:50%;background:#165dff}
.draft-label{margin-left:10px;font-size:11px;background:#ffffff;padding:1px 7px;border-radius:6px}
.header{max-width:1300px;margin:auto;height:98px;padding:0 38px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:9px;min-width:205px;line-height:1.05;font-size:20px;letter-spacing:-.025em;font-weight:600}

.wordmark{display:flex;align-items:center;gap:9px;font-family:Montserrat,'Noto Sans KR',sans-serif;line-height:1;color:var(--ink)}.wm-team{font-weight:700;font-size:.5em;letter-spacing:.34em;padding:5px 0 5px .34em;writing-mode:vertical-rl;transform:rotate(180deg);border-left:2px solid var(--blue);color:var(--blue)}.wm-name{font-family:Orbitron,Montserrat,sans-serif;font-weight:900;font-size:1.34em;letter-spacing:.02em}.wm-name b{font-weight:900;background:linear-gradient(120deg,#0b3fc4 0%,#165dff 45%,#6aa8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:.06em;padding-right:.06em;margin-right:-.06em}
.brand small{display:block;font-size:11px;letter-spacing:0;line-height:1.2;margin-top:8px;font-weight:500;color:var(--muted)}nav{display:flex;align-items:center;justify-content:center;gap:27px;flex:1;white-space:nowrap}nav a{font-size:13px;font-weight:600;position:relative;padding:10px 0}nav a::after{content:'';position:absolute;bottom:1px;left:0;right:0;height:3px;background:var(--blue);border-radius:3px;transform:scaleX(0);transition:transform .25s var(--ease)}nav a:hover::after,nav a[aria-current=page]::after{transform:scaleX(1)}
.classroom-link{font-size:12px;white-space:nowrap;font-weight:700;display:flex;gap:8px;align-items:center;padding:10px 15px;background:var(--white);border-radius:11px}
.classroom-link:hover{background:var(--sky)}
.menu-toggle{display:none;background:transparent;border:0;width:44px;height:44px}
.menu-toggle span{display:block;height:2px;width:24px;background:var(--ink);margin:6px auto;border-radius:2px}#main{min-height:65vh}#main:focus{outline:none}
.wrap{max-width:1224px;padding:0 38px;margin:auto}
.hero{position:relative;min-height:650px;display:grid;grid-template-columns:45% 55%;align-items:center;padding-top:28px;padding-bottom:42px}
.hero-copy{position:relative;z-index:2;padding:0 0 30px 2px}
.hero h1,.page-intro h1{font-family:Jua,sans-serif;font-weight:400;font-size:clamp(48px,4.7vw,70px);line-height:1.21;letter-spacing:-.025em;margin:0 0 26px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-copy>p{color:var(--muted);font-size:16px;line-height:1.95;max-width:31em;margin:0 0 31px}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:13px 22px;min-height:50px;border:0;border-radius:13px;font-size:14px;font-weight:700;line-height:1.5;transition:transform .24s var(--ease),background .2s,box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(1px)}
.btn-primary{color:var(--white);background:var(--blue);box-shadow:0 7px 15px rgba(30,73,160,.17)}
.btn-primary:hover{background:var(--blue-hover);box-shadow:0 12px 25px rgba(30,73,160,.22)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-soft{background:#eaf2ff;color:var(--ink)}
.btn-yellow{background:var(--lavender);color:var(--ink)}
.btn svg{width:17px;height:17px}
.hero-visual{position:relative;min-width:0;aspect-ratio:1.15;margin-left:-12px;display:flex;align-items:center;justify-content:center}
.hero-visual::before{content:'';position:absolute;width:84%;height:82%;border-radius:50%;background:#eaf2ff;z-index:0;transform:rotate(-9deg)}
.diorama{position:relative;z-index:1;width:112%;max-width:none;margin-left:-6%;transition:transform .5s var(--ease);transform:translate3d(var(--dx,0px),var(--dy,0px),0);animation:hello 1.1s var(--ease) both}
.orbit{position:absolute;display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--white);border-radius:12px;font-size:12px;font-weight:700;box-shadow:var(--shadow);z-index:2;pointer-events:none;transform:rotate(var(--angle,0deg))}
.orbit svg{width:20px;height:20px}
.orbit-one{top:8%;left:11%;--angle:-7deg;background:var(--lavender)}
.orbit-two{top:19%;right:-3%;--angle:6deg;background:#165dff}
.orbit-three{bottom:14%;right:8%;--angle:-5deg;background:var(--ice)}
.hero-footnote{font-size:11px!important;margin-top:23px!important;color:#52627d!important}
.scroll-note{display:flex;align-items:center;gap:10px;font-size:11px;color:#52627d;margin-top:28px}
.scroll-note span{width:17px;height:27px;border:1px solid #b2c9f4;border-radius:9px;position:relative}
.scroll-note span::after{content:'';position:absolute;width:3px;height:5px;background:var(--blue);top:5px;left:6px;border-radius:4px}
.activity-strip{background:#16284b;padding:24px 0;margin-bottom:110px}
.activity-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.activity-strip p{margin:0;font-size:12px;font-weight:700}
.activity-strip svg{width:22px;height:22px;vertical-align:middle;margin-right:9px}
.activity-strip i{font-style:normal;color:#7c92b9}
.section{margin-bottom:110px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:30px}
.section h2,.wide-feature h2,.closing h2{font-family:Jua,sans-serif;font-size:38px;font-weight:400;letter-spacing:-.025em;line-height:1.35;margin:0 0 14px;text-wrap:balance}
.section-head p,.body-copy{font-size:14px;color:var(--muted);margin:0;max-width:50ch}
.text-link{font-size:13px;font-weight:700;display:inline-flex;gap:9px;align-items:center;white-space:nowrap;padding:8px 0;text-decoration:underline;text-underline-offset:6px;text-decoration-color:#aec6ef}
.text-link:hover{text-decoration-color:var(--blue)}
.text-link svg{width:17px;height:17px}
.work-panels{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.work-panel{position:relative;min-height:270px;overflow:hidden;border-radius:var(--radius);padding:34px;isolation:isolate;transition:transform .35s var(--ease)}
.work-panel:hover{transform:translateY(-5px)}
.work-panel h3{font-family:Jua,sans-serif;font-size:29px;font-weight:400;line-height:1.4;margin:0 0 13px;max-width:none}
.work-panel p{font-size:13px;max-width:30ch;margin:0 0 24px}
.mint-panel{background:var(--sky)}
.yellow-panel{background:var(--lavender)}
.panel-icon{position:absolute;right:30px;bottom:30px;background:rgba(30,73,160,.75);width:96px;height:96px;border-radius:23px;display:grid;place-items:center;transform:rotate(9deg);box-shadow:0 12px 28px rgba(30,73,160,.1)}
.panel-icon svg{width:48px;height:48px;stroke-width:1.5}
.wide-feature{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-bottom:110px}
.feature-art{min-width:0;background:#eaf2ff;border-radius:var(--radius);aspect-ratio:1.35;position:relative;display:grid;place-items:center;overflow:hidden}
.feature-art img{width:100%;position:relative;z-index:1}
.feature-copy{padding:22px 16px}
.feature-copy>p{color:var(--muted);font-size:14px;max-width:44ch;margin:0 0 25px}
.feature-list{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:27px}
.tag{font-size:11px;border-radius:7px;padding:5px 10px;background:#eaf2ff;font-weight:600}
.course-art{background:var(--ice);padding:35px;position:relative}
.course-object{width:82%;aspect-ratio:1.45;position:relative;padding:20px;background:#ffffff;border-radius:14px;transform:rotate(-6deg);box-shadow:0 18px 38px rgba(30,73,160,.14);display:flex;flex-direction:column;justify-content:space-between}
.course-object small{font-size:12px;color:#52627d}
.course-object strong{font-family:Jua,sans-serif;font-weight:400;font-size:38px;line-height:1.3;position:relative;z-index:1}
.course-object .play-disc{position:absolute;right:20px;bottom:28px;width:58px;height:58px;border-radius:50%;background:#165dff;display:grid;place-items:center}
.play-disc svg{height:24px;width:24px}
.course-shelf{position:absolute;right:30px;bottom:32px;padding:11px 17px;background:var(--lavender);font-family:Jua,sans-serif;font-size:17px;border-radius:12px;transform:rotate(7deg);box-shadow:0 12px 25px rgba(30,73,160,.08)}
.studio-note{display:grid;grid-template-columns:39% 61%;gap:35px;align-items:start}
.studio-note h2{font-size:43px}
.studio-note p{margin:0 0 15px;color:var(--muted);font-size:15px}
.studio-note .pending-inline{display:inline-block;background:#eaf2ff;padding:9px 13px;font-size:11px;border-radius:9px}
.closing{background:#165dff;position:relative;border-radius:var(--radius);padding:53px 50px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:90px}
.closing h2{font-size:35px;margin:0 0 10px}
.closing p{color:#e1ebff;font-size:13px;margin:0}
.closing .btn{white-space:nowrap}
.footer{max-width:1224px;margin:auto;padding:30px 38px 42px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.3fr 1fr 1.5fr;gap:30px;align-items:start}
.footer-brand{font-size:19px;font-weight:800;line-height:1.4}
.footer-brand span{display:block;font-size:12px;margin-top:8px;font-weight:500}
.footer p{font-size:11px;color:var(--muted)}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:13px;font-size:11px;padding-top:4px}
.footer-note{margin:4px 0!important;line-height:2}
.page-intro{padding:65px 0 55px;max-width:790px}
.page-intro h1{font-size:54px}
.page-intro p{color:var(--muted);font-size:15px;margin:0;max-width:57ch}
.subnav{display:flex;gap:8px;margin:15px 0 50px;flex-wrap:wrap}
.pill{border:0;background:#eaf2ff;border-radius:9px;padding:10px 17px;font-size:13px;font-weight:600}
.pill[aria-selected=true],.pill[aria-pressed=true]{background:var(--blue);color:var(--white)}
.pill:hover{background:#dceaff}
.pill[aria-selected=true]:hover,.pill[aria-pressed=true]:hover{background:var(--blue-hover)}
.members{display:grid;grid-template-columns:repeat(4,1fr);gap:23px;margin-top:30px}
.member{padding-top:15px}
.member-art{height:170px;background:var(--sky);border-radius:var(--radius);overflow:hidden;position:relative}
.member-art::before{content:'';position:absolute;inset:12px;background:url('/assets/team-studio-768.webp') center/auto 220px no-repeat}
.member:nth-child(2) .member-art{background:var(--lavender)}
.member:nth-child(3) .member-art{background:var(--ice)}
.member:nth-child(4) .member-art{background:#ffeae4}
.member h3{font-family:Jua,sans-serif;font-weight:400;font-size:22px;margin:20px 0 4px}
.member p{font-size:12px;color:var(--muted);margin:0}
.pending{padding:24px 0;border-bottom:1px solid var(--line);display:flex;gap:35px;align-items:baseline}
.pending strong{font-family:Jua,sans-serif;font-size:23px;font-weight:400;min-width:180px}
.pending p{font-size:13px;color:var(--muted);margin:0}
.pending-label{display:inline-flex;align-items:center;gap:6px;background:#eaf2ff;color:#52627d;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:500}
.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.project-cover{position:relative;border-radius:var(--radius);aspect-ratio:1.5;background:var(--sky);overflow:hidden}
.project-cover img{width:100%;height:100%;object-fit:contain}
.project-title{font-family:Jua,sans-serif;font-size:26px;font-weight:400;margin:18px 0 7px}
.project p{font-size:13px;color:var(--muted);margin:0 0 15px}
.project .tag{margin-right:5px}
.project-cover.course-art{display:grid;place-items:center}
.empty-filter{padding:42px;background:#eaf2ff;border-radius:var(--radius);font-size:14px}
.tab-panel[hidden]{display:none}
.course-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:45px;align-items:center;margin-bottom:60px}
.course-layout .course-art{aspect-ratio:1.35;border-radius:var(--radius);display:grid;place-items:center}
.course-layout h2{font-size:36px}
.course-layout p{font-size:14px;color:var(--muted)}
.course-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:25px}
.course-item{padding:22px;background:var(--white);border-radius:var(--radius)}
.course-item h3{font-size:16px;line-height:1.6;margin:10px 0}
.course-item p{font-size:12px;color:var(--muted);margin:0}
.faq-list{max-width:900px}
.faq-list details,.notice-list details{border-bottom:1px solid var(--line);padding:21px 0}
.faq-list summary,.notice-list summary{cursor:pointer;font-size:15px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq-list summary::after,.notice-list summary::after{content:'+';font-size:23px;font-weight:400;color:var(--blue);line-height:1}
.faq-list details[open] summary::after,.notice-list details[open] summary::after{content:'−'}
.faq-list details>p,.notice-list details>p{font-size:13px;line-height:1.9;color:var(--muted);white-space:pre-wrap;margin:20px 0 2px;max-width:72ch}
.course-shell-note{font-size:12px;background:#eaf2ff;padding:16px 19px;border-radius:10px;color:#35557e;margin:25px 0}
.app-hero{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:22px;padding:15px 0 60px}
.app-hero h1{font-family:Jua,sans-serif;font-size:57px;font-weight:400;line-height:1.25;margin:0 0 22px}
.app-hero p{font-size:14px;color:var(--muted);max-width:38ch}
.app-hero img{width:100%}
.store-links{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}
.store-links .btn{font-size:12px;padding:13px 17px}
.benefit-row{display:grid;grid-template-columns:220px 1fr;gap:45px;padding:30px 0;border-top:1px solid var(--line)}
.benefit-row h3{font-family:Jua,sans-serif;font-size:25px;font-weight:400;margin:0}
.benefit-row p{font-size:14px;color:var(--muted);margin:0;max-width:65ch}
.booklet{background:#eaf2ff;padding:30px;border-radius:var(--radius);display:flex;gap:28px;align-items:center;justify-content:space-between;margin:55px 0 110px}
.booklet h3{font-family:Jua,sans-serif;font-size:27px;font-weight:400;margin:0 0 8px}
.booklet p{font-size:12px;margin:0;max-width:60ch}
.contact-layout{display:grid;grid-template-columns:34% 66%;gap:38px;margin-bottom:110px}
.service-picker{display:flex;flex-direction:column;gap:10px}
.service-choice{border:0;background:#eaf2ff;text-align:left;padding:19px 22px;border-radius:12px;transition:background .2s,transform .25s var(--ease)}
.service-choice strong{display:block;font-family:Jua,sans-serif;font-size:22px;font-weight:400}
.service-choice small{display:block;font-size:11px;color:var(--muted);margin-top:7px}
.service-choice[aria-pressed=true]{background:#165dff;transform:translateX(6px)}
.inquiry-form{background:var(--white);padding:34px;border-radius:var(--radius)}
.inquiry-form h2{font-family:Jua,sans-serif;font-size:31px;font-weight:400;margin:0 0 8px}
.inquiry-form .hint{font-size:12px;color:var(--muted);margin:0 0 25px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:19px}
.field>span{font-size:12px;font-weight:600}
.field input,.field textarea,.field select{width:100%;background:#f1f6ff;border:1px solid #dce5f3;border-radius:9px;padding:11px 13px;font-size:13px;line-height:1.7}
.field textarea{resize:vertical;min-height:155px}
.field input::placeholder,.field textarea::placeholder{color:#61728d}
.form-note{font-size:11px;color:var(--muted);margin:18px 0 0}
.local-draft{background:#eaf2ff;padding:19px;border-radius:10px;margin-top:25px;white-space:pre-wrap;font-size:12px}
.local-draft[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);max-width:90%;background:var(--ink);color:var(--white);border-radius:10px;padding:12px 19px;font-size:12px;z-index:20;opacity:0;pointer-events:none;transition:transform .25s var(--ease),opacity .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.to-top{position:fixed;right:20px;bottom:20px;width:40px;height:40px;background:#eaf2ff;border:0;border-radius:11px;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s}
.to-top.show{opacity:1;pointer-events:auto}
.view-enter{animation:view-enter .5s var(--ease) both}
.image-error{font-size:13px;color:var(--muted);padding:30px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}svg.icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab-panel{min-height:330px}@keyframes hello{from{opacity:.45;filter:blur(3px)}to{opacity:1;filter:blur(0)}}@keyframes view-enter{from{opacity:.6;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.hero{min-height:700px}}
@media(max-width:1100px){.header{padding:0 25px;gap:15px}
.brand{min-width:175px;font-size:17px}nav{gap:18px}nav a{font-size:12px}
.classroom-link{padding:9px 10px}
.hero h1{font-size:56px}
.hero{min-height:560px}
.orbit{font-size:11px;padding:9px 12px}
.orbit-two{right:0}
.wrap{padding:0 28px}
.hero-copy>p{font-size:14px}
.course-object strong{font-size:30px}
.contact-layout{grid-template-columns:32% 1fr;gap:24px}
.members{gap:17px}
.activity-strip i{display:none}
.activity-strip p{font-size:11px}
.activity-strip svg{width:18px;margin-right:4px}
.panel-icon{width:65px;height:65px;right:20px;bottom:30px}
.panel-icon svg{width:35px;height:35px}
.work-panel p{max-width:25ch}}
@media(max-width:850px){.header{height:82px;flex-wrap:wrap;position:relative;gap:15px;padding:0 22px}
.brand{margin-right:auto}
.menu-toggle{display:block;order:3}
.classroom-link{order:2}nav{display:none;position:absolute;top:82px;left:15px;right:15px;padding:14px 20px;background:var(--white);z-index:10;box-shadow:var(--shadow);border-radius:var(--radius);flex-direction:column;align-items:stretch;gap:0}nav.open{display:flex}nav a{font-size:14px;padding:13px 5px}nav a::after{display:none}nav a[aria-current=page]{color:var(--blue);background:#eaf2ff;border-radius:8px}
.hero{grid-template-columns:1fr 1fr;min-height:490px}
.hero h1{font-size:46px}
.hero-copy>p{font-size:12px;max-width:28ch}
.hero-actions .btn{font-size:12px;padding:12px 14px}
.hero-visual{aspect-ratio:1}
.orbit{font-size:11px;padding:8px 10px}
.orbit svg{width:15px;height:15px}
.orbit-one{top:12%;left:0}
.orbit-two{top:26%;right:-4%}
.orbit-three{bottom:15%;right:0}
.activity-strip{margin-bottom:75px}
.activity-strip .wrap{flex-wrap:wrap;justify-content:center;gap:14px 24px}
.section,.wide-feature{margin-bottom:80px}
.section h2,.wide-feature h2{font-size:31px}
.work-panel{padding:26px;min-height:270px}
.work-panel h3{font-size:26px}
.studio-note{grid-template-columns:1fr 1.25fr;gap:25px}
.studio-note h2{font-size:33px}
.studio-note p{font-size:13px}
.feature-copy{padding:15px 0}
.wide-feature{gap:28px}
.feature-art{aspect-ratio:1}
.course-object{width:100%}
.course-object strong{font-size:25px}
.course-shelf{font-size:12px;right:10px;bottom:15px}
.closing{padding:35px 30px}
.closing h2{font-size:29px}
.footer{grid-template-columns:1fr 1fr;gap:20px;padding:25px 28px 35px}
.footer-note{grid-column:1/-1}
.members{grid-template-columns:1fr 1fr;gap:30px}
.portfolio-grid{gap:22px}
.page-intro{padding:45px 0 30px}
.page-intro h1{font-size:44px}
.contact-layout{grid-template-columns:1fr;gap:27px}
.service-picker{display:grid;grid-template-columns:1fr 1fr}
.service-choice[aria-pressed=true]{transform:none}
.course-list{grid-template-columns:1fr 1fr}
.app-hero h1{font-size:42px}
.benefit-row{grid-template-columns:170px 1fr;gap:25px}}
@media(max-width:580px){body{font-size:14px}
.draft-label{font-size:11px;margin-left:2px}
.header{height:75px;padding:0 18px;gap:7px}
.brand{font-size:16px;min-width:0;gap:7px}

.brand small{font-size:11px;margin-top:6px}
.classroom-link{font-size:11px;padding:8px 9px;gap:5px}
.menu-toggle{width:37px}nav{top:75px}
.wrap{padding:0 22px}
.hero{display:flex;flex-direction:column;min-height:0;padding-top:38px;padding-bottom:27px;align-items:stretch}
.hero-copy{padding:0 3px}
.hero h1{font-size:49px;line-height:1.2;margin-bottom:20px;max-width:100%;text-wrap:initial}
.hero-copy>p{font-size:13px;max-width:100%;line-height:1.85;margin-bottom:24px}
.hero-copy>p br{display:initial}
.hero-actions .btn{font-size:12px;padding:13px 19px;min-height:48px}
.hero-footnote{margin-top:18px!important;font-size:11px!important}
.scroll-note{display:none}
.hero-visual{aspect-ratio:1.35;width:100%;margin:18px 0 0}
.hero-visual::before{width:83%;height:93%}
.diorama{width:108%;margin-left:-4%}
.orbit{font-size:11px;padding:7px 10px}
.orbit-one{top:2%;left:2%}
.orbit-two{right:0;top:18%}
.orbit-three{bottom:6%;right:3%}
.activity-strip{padding:17px 0;margin-bottom:64px}
.activity-strip .wrap{gap:10px 20px;justify-content:flex-start}
.activity-strip p{font-size:11px;flex-basis:42%}
.activity-strip svg{height:16px;width:16px}
.section{margin-bottom:66px}
.section-head{display:block;margin-bottom:24px}
.section h2,.wide-feature h2{font-size:31px;margin-bottom:12px}
.section-head .text-link{margin-top:12px}
.section-head p,.body-copy{font-size:12px}
.studio-note{display:block}
.studio-note h2{font-size:32px;margin-bottom:21px}
.studio-note p{font-size:13px}
.work-panels{grid-template-columns:1fr;gap:16px}
.work-panel{padding:27px;min-height:245px}
.work-panel h3{font-size:28px;max-width:none}
.work-panel p{font-size:12px;max-width:30ch}
.panel-icon{width:76px;height:76px;right:23px;bottom:28px}
.panel-icon svg{width:40px;height:40px}
.wide-feature{display:flex;flex-direction:column;gap:16px;margin-bottom:65px;align-items:stretch}
.wide-feature.reverse .feature-art{order:0}
.wide-feature.reverse .feature-copy{order:1}
.feature-art{aspect-ratio:1.35}
.feature-copy{padding:12px 2px}
.feature-copy>p{font-size:12px;max-width:100%}
.course-object{width:85%;padding:23px}
.course-object strong{font-size:35px}
.course-shelf{font-size:15px;right:28px;bottom:25px}
.closing{display:block;padding:32px 26px;margin-bottom:55px}
.closing h2{font-size:29px}
.closing p{font-size:12px}
.closing .btn{margin-top:24px}
.footer{display:block;padding:26px 22px 35px}
.footer-links{margin:24px 0;max-width:300px;gap:14px}
.footer-note{font-size:11px!important}
.page-intro{padding:36px 0 24px}
.page-intro h1{font-size:39px;margin-bottom:18px}
.page-intro p{font-size:13px}
.subnav{gap:7px;margin:12px 0 34px}
.pill{font-size:12px;padding:10px 14px}
.members{gap:22px 17px}
.member-art{height:136px}
.member-art::before{background-size:auto 170px}
.member h3{font-size:20px;margin-top:15px}
.member p{font-size:11px}
.pending{display:block;padding:22px 0}
.pending strong{font-size:23px;display:block;margin-bottom:8px}
.pending p{font-size:12px}
.portfolio-grid{grid-template-columns:1fr;gap:34px}
.project-cover .course-object strong{font-size:30px}
.project-title{font-size:25px}
.course-layout{grid-template-columns:1fr;gap:25px;margin-bottom:40px}
.course-layout h2{font-size:30px}
.course-layout .course-art{padding:25px}
.course-list{grid-template-columns:1fr}
.course-item{padding:21px}
.course-shell-note{font-size:11px}
.faq-list summary,.notice-list summary{font-size:13px}
.faq-list details>p,.notice-list details>p{font-size:12px}
.app-hero{display:flex;flex-direction:column;align-items:stretch;padding:35px 0 38px;gap:18px}
.app-hero h1{font-size:43px}
.app-hero p{font-size:13px}
.app-hero img{width:104%;max-width:none;margin-left:-2%}
.benefit-row{grid-template-columns:1fr;gap:12px;padding:23px 0}
.benefit-row h3{font-size:24px}
.benefit-row p{font-size:12px}
.booklet{display:block;padding:27px;margin:37px 0 65px}
.booklet h3{font-size:26px}
.booklet .btn{margin-top:22px}
.booklet p{font-size:12px}
.contact-layout{margin-bottom:65px}
.service-picker{gap:9px}
.service-choice{padding:15px}
.service-choice strong{font-size:18px}
.service-choice small{font-size:11px}
.inquiry-form{padding:24px 21px}
.inquiry-form h2{font-size:27px}
.form-row{grid-template-columns:1fr;gap:0}
.inquiry-form .btn{width:100%}
.toast{font-size:11px}
.to-top{right:13px;bottom:13px;width:36px;height:36px}}
.studio-note{grid-template-columns:minmax(0,.39fr) minmax(0,.61fr)}
.contact-layout{grid-template-columns:minmax(0,.34fr) minmax(0,.66fr)}
.member-art::before{inset:0;background-size:auto 900px;background-position:12% 22%}
.member:nth-child(2) .member-art::before{background-position:43% 33%}
.member:nth-child(3) .member-art::before{background-position:71% 12%}
.member:nth-child(4) .member-art::before{background-position:93% 34%}
.classroom-link svg{width:13px;height:13px}
@media(max-width:850px){.studio-note{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.contact-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:580px){.member-art::before{background-size:auto 480px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
.diorama{transform:none!important}
.btn:hover,.work-panel:hover{transform:none}}

/* Content states stay still when unavailable. */
.btn:disabled{transform:none;box-shadow:none;cursor:not-allowed}

/* Mobile reading, header fit and touch targets, verified in Chrome viewports. */
@media(max-width:850px){.menu-toggle,.classroom-link,.pill,.text-link,.to-top{min-height:44px;min-width:44px}
.field input,.field textarea,.field select{font-size:16px}}
@media(max-width:580px){.header{flex-wrap:nowrap;gap:5px}
.brand{flex-shrink:0}
.menu-toggle{width:44px;flex-shrink:0}
.classroom-link{padding:8px;gap:4px}
.member-art::before{background-size:auto 600px;background-position:13% 20%}
.member:nth-child(2) .member-art::before{background-position:38% 29%}
.member:nth-child(3) .member-art::before{background-position:59% 13%}
.member:nth-child(4) .member-art::before{background-position:87.5% 33%}}
@media(max-width:360px){.header{padding:0 14px}
.brand{font-size:14px;gap:5px}

.brand small{font-size:10px}
.classroom-link{padding:8px 6px;font-size:10px}
.draft-label{font-size:10px}}

@media(max-width:850px){nav{max-height:calc(100dvh - 130px);overflow-y:auto;overscroll-behavior:contain}}

/* Blue prototype studio: identity, spatial hierarchy and state continuity. */
.header-shell{position:sticky;top:0;background:rgba(248,251,255,.97);z-index:30;box-shadow:0 1px 0 var(--line)}
.header{height:88px;max-width:1380px}
.reading-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--blue);transform:scaleX(var(--read-progress,0));transform-origin:left;pointer-events:none}

.wrap,.footer{max-width:1300px}.hero{grid-template-columns:minmax(0,.43fr) minmax(0,.57fr)}
.hero h1{font-size:clamp(48px,4.8vw,74px)}.hero-visual{aspect-ratio:1.12;margin-left:0}.hero-visual::before{width:86%;height:86%}
.diorama{margin-left:-4%;animation:studio-arrival .85s var(--ease) both}
.studio-orbit{position:absolute;inset:6% 3%;border:1px solid #c2d6fb;border-radius:50%;transform:rotate(-16deg);pointer-events:none;z-index:1}
.studio-orbit::after{content:'';position:absolute;inset:13% -7%;border:1px solid #d3e2fd;border-radius:50%;transform:rotate(28deg)}
.studio-orbit span{position:absolute;width:12px;height:12px;background:var(--blue);border-radius:50%;top:12%;left:11%}.studio-orbit span:nth-child(2){top:75%;left:94%;width:8px;height:8px;background:#ff876c}.studio-orbit span:nth-child(3){top:95%;left:33%;width:9px;height:9px;background:#7b66ef}
.orbit-one{top:13%;left:1%;background:white}.orbit-two{top:24%;right:-1%;color:white}.orbit-three{bottom:8%;right:10%;background:var(--lavender)}.orbit svg{color:var(--blue)}.orbit-two svg{color:white}
.btn{min-height:52px}.btn svg,.text-link svg{transition:transform .25s var(--ease)}.btn:hover svg,.text-link:hover svg{transform:translateX(4px)}.btn:disabled svg{transform:none}
.classroom-link{background:var(--sky)}nav a[aria-current=page]{color:var(--blue)}
.activity-strip{color:white;margin-bottom:96px}.activity-strip p{font-size:13px}.activity-strip svg{color:#9dc0ff}
.section h2,.wide-feature h2{font-size:42px}.section-head p,.body-copy{max-width:65ch}
.idea-lab{background:var(--blue);color:white;border-radius:var(--radius);padding:48px 46px;position:relative;overflow:hidden}
.lab-heading{display:flex;justify-content:space-between;gap:35px;align-items:center;margin-bottom:28px}.lab-heading h2{font-size:43px;margin:0}.lab-heading p{font-size:14px;color:#e1ebff;margin:0;max-width:35ch}
.lab-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:35px}.lab-choice{display:flex;align-items:center;justify-content:center;gap:9px;background:#0e4bd7;color:white;border:0;border-radius:11px;font-weight:600;font-size:14px;padding:12px 18px;min-height:48px;transition:background .2s,transform .25s var(--ease)}.lab-choice svg{width:19px;height:19px}.lab-choice[aria-selected=true]{color:var(--blue);background:white}.lab-choice:hover{transform:translateY(-2px)}.idea-lab :focus-visible,.closing :focus-visible{outline-color:white}
.signal-flow{display:flex;align-items:center;gap:14px;max-width:100%;margin-bottom:34px}.signal-step{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;white-space:nowrap}.signal-number{display:grid;place-items:center;background:#0d48d1;color:white;width:32px;height:32px;border-radius:9px;font-variant-numeric:tabular-nums;flex-shrink:0}.signal-connector{height:2px;flex:1;position:relative;min-width:14px;background:#7fa8ff;overflow:hidden}.signal-connector i{display:block;background:white;width:30%;height:100%;transform:translateX(-100%)}.signal-flow.pulse .signal-connector i{animation:signal-send .7s var(--ease) both}.signal-flow.pulse .signal-connector:nth-of-type(4) i{animation-delay:.14s}
.lab-story{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.lab-story h3{font-family:Jua,sans-serif;font-size:29px;font-weight:400;line-height:1.35;margin:0 0 12px}.lab-story p{font-size:13px;color:#e1ebff;max-width:58ch;margin:0}.lab-story .btn{flex-shrink:0;font-size:13px}.lab-story .btn:hover{color:var(--blue)}
.work-panel{min-height:285px;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s var(--ease),box-shadow .3s}
.work-panel::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(255,255,255,.7),transparent 55%);opacity:0;transition:opacity .3s;z-index:-1}.work-panel:hover::before{opacity:1}.work-panel:hover{box-shadow:var(--shadow);transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.work-panel h3{font-size:32px}.work-panel p{font-size:14px}.panel-icon{color:var(--blue);transition:transform .4s var(--ease)}.work-panel:hover .panel-icon{transform:rotate(-3deg) translateY(-5px)}
.feature-art{background:var(--sky)}.reverse .feature-art{background:#eef5ef}.course-art{background:var(--sky)}.course-object small{color:var(--muted)}.play-disc,.course-shelf{color:white}.course-shelf{background:var(--blue)}
.course-object{transition:transform .45s var(--ease)}.course-art:hover .course-object{transform:rotate(-2deg) translateY(-4px)}
.tag{font-size:12px;color:#35557e}.closing{color:white}.closing p{font-size:14px}.closing .btn{background:white;color:var(--blue);box-shadow:none}.closing .btn:hover{background:var(--sky)}
.footer-brand{color:var(--blue)}.footer p,.footer-links,.footer-note{font-size:12px!important}.footer-links a{min-height:36px;padding:5px 0}.footer-links a:hover{color:var(--blue)}
.page-intro h1{font-size:56px}.pill{transition:background .2s,color .2s,transform .25s var(--ease)}.pill:hover{transform:translateY(-2px)}
.member-art,.project-cover{transition:transform .35s var(--ease)}.member:hover .member-art,.project:hover .project-cover{transform:translateY(-5px)}.member p,.project p,.pending p{font-size:14px}.member-art{background:var(--sky)}.member:nth-child(2) .member-art{background:var(--lavender)}.member:nth-child(3) .member-art{background:#e3f2ff}.member:nth-child(4) .member-art{background:#ffeae4}
.project-cover{background:#eef5ef}.project-cover.course-art{background:var(--sky)}.course-item p{font-size:13px}
.faq-list details,.notice-list details{transition:background .25s}.faq-list details[open],.notice-list details[open]{background:var(--sky);border-radius:12px;padding:21px 18px}.faq-list details>p,.notice-list details>p{font-size:14px}
.service-choice[aria-pressed=true]{color:white}.service-choice[aria-pressed=true] small{color:#e1ebff}.service-choice small{font-size:12px}
.inquiry-form{box-shadow:0 18px 45px rgba(30,73,160,.07)}.field>span{font-size:13px}.field input,.field textarea,.field select{font-size:16px;transition:background .2s,border-color .2s}.field input:focus,.field textarea:focus{background:white;border-color:var(--blue)}.local-draft{font-size:14px}.form-note{font-size:12px}
.to-top{position:fixed;right:20px;width:44px;height:44px;background:white;color:var(--blue);border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;z-index:25;transition:opacity .25s,background .2s}.to-top:hover{background:var(--sky)}
.view-enter{animation:route-arrival .4s var(--ease) both}.hero-visual.in-view .orbit{animation:orbit-drift 5s ease-in-out infinite}.hero-visual.in-view .orbit-two{animation-delay:-1.5s}.hero-visual.in-view .orbit-three{animation-delay:-3s}.out-of-view .orbit{animation-play-state:paused}body.page-hidden *{animation-play-state:paused!important}
@keyframes studio-arrival{from{opacity:.6;filter:blur(4px);clip-path:inset(8% 4% 0 4%)}to{opacity:1;filter:blur(0);clip-path:inset(0)}}
@keyframes route-arrival{from{opacity:.75;clip-path:inset(0 0 6% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes signal-send{from{transform:translateX(-110%)}to{transform:translateX(440%)}}
@keyframes signal-send-vertical{from{transform:translateY(-110%)}to{transform:translateY(440%)}}
@keyframes orbit-drift{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(max-width:1100px){.hero h1{font-size:56px}.work-panel h3{font-size:29px}.lab-story{align-items:flex-start;flex-direction:column;gap:22px}.lab-heading h2{font-size:37px}}
@media(max-width:850px){.header{height:78px}nav{top:78px;max-height:calc(100dvh - 90px)}.hero h1{font-size:45px}.section h2,.wide-feature h2{font-size:34px}.work-panel h3{font-size:27px}.idea-lab{padding:35px 30px}.lab-heading{align-items:flex-start}.lab-heading p{font-size:13px;max-width:30ch}.lab-choice{font-size:12px;padding:11px 13px}.signal-flow{gap:9px}.signal-step{font-size:12px;gap:7px}.signal-number{width:27px;height:27px}.lab-story h3{font-size:27px}.service-choice[aria-pressed=true]{transform:none}}
@media(max-width:580px){.header{height:72px}nav{top:72px;max-height:calc(100dvh - 84px)}.hero h1{font-size:49px}.hero-visual{aspect-ratio:1.35;margin:22px 0 0}.hero-copy>p{font-size:14px}.hero-actions .btn{min-height:48px}.diorama{width:108%}.studio-orbit{inset:3% 2%}.orbit-one{top:3%;left:0}.orbit-two{right:0;top:23%}.orbit-three{bottom:5%;right:2%}.activity-strip{margin-bottom:64px}.activity-strip p{font-size:11px}.section h2,.wide-feature h2{font-size:33px}.section-head p,.body-copy,.feature-copy>p,.pending p,.benefit-row p,.app-hero p{font-size:14px}.idea-lab{padding:30px 24px}.lab-heading{display:block;margin-bottom:24px}.lab-heading h2{font-size:33px}.lab-heading p{font-size:13px;max-width:none;margin-top:19px}.lab-controls{gap:7px;margin-bottom:27px}.lab-choice{flex:1;font-size:12px;padding:11px 8px;gap:6px}.lab-choice svg{display:none}.signal-flow{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:24px}.signal-step{font-size:13px;white-space:normal}.signal-number{width:30px;height:30px}.signal-connector{height:18px;min-height:18px;min-width:2px;max-width:2px;margin-left:14px}.signal-connector i{width:100%;height:30%}.signal-flow.pulse .signal-connector i{animation-name:signal-send-vertical}.lab-story h3{font-size:26px}.lab-story p{font-size:13px}.lab-story .btn{font-size:12px;padding:12px 15px;min-height:48px}.work-panel h3{font-size:29px}.work-panel p{font-size:13px}.panel-icon{width:65px;height:65px;right:22px;bottom:23px}.panel-icon svg{width:35px;height:35px}.member p,.project p{font-size:13px}.course-shell-note{font-size:12px}.faq-list summary,.notice-list summary,.faq-list details>p,.notice-list details>p{font-size:14px}.page-intro h1{font-size:40px}.service-choice small{font-size:12px}.to-top{right:12px}.to-top{bottom:12px}}
@media(max-width:360px){.hero h1{font-size:43px}.lab-choice{font-size:11px;padding:11px 6px}.lab-controls{gap:5px}.work-panel h3{font-size:27px}.panel-icon{width:50px;height:50px;right:16px;bottom:20px}.panel-icon svg{width:28px;height:28px}}
body.motion-quiet *,body.motion-quiet *::before,body.motion-quiet *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}body.motion-quiet .diorama,body.motion-quiet .work-panel{transform:none!important}body.motion-quiet .btn:hover,body.motion-quiet .pill:hover{transform:none}
@media(prefers-reduced-motion:reduce){.diorama,.work-panel{transform:none!important}.btn:hover,.pill:hover,.member:hover .member-art,.project:hover .project-cover,.course-art:hover .course-object{transform:none}}
.member:nth-child(3) .member-art::before{background-position:65% 16%}.member:nth-child(4) .member-art::before{background-position:97% 38%}
@media(max-width:580px){.member:nth-child(2) .member-art::before{background-position:42.5% 29%}.member:nth-child(3) .member-art::before{background-position:64% 14.5%}.member:nth-child(4) .member-art::before{background-position:95% 37%}}

/* Confine orbital geometry; preserve the complete chibi plate within its studio. */
.hero{overflow:clip}.panel-icon{background:white;border-radius:16px}
.hero-visual::before{background:var(--sky)}
/* SupGilDoGam is a distinct fresh-sprout product world within the team website. */
body[data-page=supgil]{--paper:#f6ffef;--ink:#173c21;--muted:#426649;--blue:#168239;--blue-hover:#106326;--sky:#cafa83;--lavender:#e1facd;--ice:#e4ffd1;--line:#cbe6b8}
body[data-page=supgil] .header-shell{background:rgba(246,255,239,.97)}
body[data-page=supgil] .classroom-link{background:#d5f8b2}
body[data-page=supgil] .app-hero{background:#d5ff9b;border-radius:16px;padding:36px 30px;margin:38px 0 75px}
body[data-page=supgil] .app-hero h1{color:#167535}
body[data-page=supgil] .app-hero .btn-primary{background:#168239;box-shadow:0 8px 20px rgba(45,116,34,.16)}
body[data-page=supgil] .app-hero .btn-primary:hover{background:#106326}
body[data-page=supgil] .booklet{background:#bdf37a}
body[data-page=supgil] .benefit-row h3{color:#1c702d}
body[data-page=supgil] .btn-light{color:#173c21}
body[data-page=supgil] .footer-brand{color:#168239}
body[data-page=supgil] ::selection{background:#b0ee70;color:#173c21}
body[data-page=supgil] ::-webkit-scrollbar-thumb{background:#94cc69}
@media(max-width:850px){body[data-page=supgil] .app-hero{gap:12px;padding:30px 24px}}
@media(max-width:580px){body[data-page=supgil] .app-hero{padding:30px 22px;margin:26px 0 55px}.lab-choice{min-width:0}.signal-step{max-width:100%}}
.diorama{width:100%;max-width:100%;margin-left:0}.orbit-two{right:1%}
@media(max-width:850px){nav{max-height:calc(100dvh - 132px)}}
@media(max-width:580px){nav{max-height:calc(100dvh - 126px)}}

/* Live cinematic studio: actual 3D geometry plus the generated chibi plate. */
.hero-visual{perspective:1100px;isolation:isolate}
.hero-canvas{position:absolute;inset:-4%;width:108%;height:108%;z-index:1;pointer-events:none}
.chibi-motion{width:100%;position:relative;z-index:2;transform-style:preserve-3d}
.hero-visual.in-view .chibi-motion{animation:chibi-float 7s ease-in-out infinite}
.out-of-view .chibi-motion{animation-play-state:paused}
.hero-visual .studio-orbit{opacity:.28}
@keyframes chibi-float{0%,100%{transform:translate3d(0,8px,0) rotateY(-3deg) rotateX(1deg)}50%{transform:translate3d(0,-12px,18px) rotateY(3deg) rotateX(-1deg)}}
.idea-lab{min-height:690px;padding:55px 46px;background:#071d4a;isolation:isolate}
.lab-heading{display:block;position:relative;z-index:2;width:52%;margin-bottom:28px}.lab-heading h2{font-size:51px}.lab-heading p{margin-top:23px;color:#d7e7ff}
.lab-controls{position:relative;z-index:2;width:55%;margin-bottom:36px}.lab-choice{background:#143878}.lab-choice[aria-selected=true]{color:#165dff}
.lab-story{position:relative;z-index:2;align-items:flex-start;flex-direction:column;gap:25px}.lab-story h3{font-size:30px}.lab-story p{color:#d7e7ff}
#lab-result{position:relative;z-index:2;width:55%}.signal-flow{gap:10px}.signal-number{background:#16418c}.signal-connector{background:#5981b6}.signal-step{white-space:normal}
.lab-canvas{position:absolute;right:-2%;top:1%;height:93%;width:50%;z-index:1;pointer-events:none}
.lab-canvas canvas{width:100%;height:100%;display:block;position:relative;z-index:2}
.core-fallback{position:absolute;inset:17%;border-radius:50%;background:#165dff;box-shadow:0 20px 70px rgba(39,99,230,.3);z-index:0;opacity:.7}.core-fallback i{position:absolute;inset:-15%;border:1px solid #57caff;border-radius:50%;transform:rotateX(55deg) rotateZ(25deg)}.core-fallback i:nth-child(2){transform:rotateY(65deg) rotateZ(-25deg)}.core-fallback i:nth-child(3){inset:15%;background:#164ba9;border:0}
.lab-canvas:has(canvas[data-renderer=webgl]) .core-fallback{display:none}
.activity-strip{overflow:hidden}.activity-strip .wrap{animation:signal-band 8s ease-in-out infinite}.activity-strip:hover .wrap,.activity-strip.out-of-view .wrap{animation-play-state:paused}
@keyframes signal-band{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@media(max-width:1100px){.idea-lab{padding:44px 36px;min-height:660px}.lab-heading h2{font-size:44px}.lab-controls{width:56%;gap:6px}.lab-choice{font-size:12px;padding:12px 11px}#lab-result{width:54%}.signal-flow{gap:7px}.signal-step{font-size:12px}.signal-number{width:25px;height:25px}.lab-story h3{font-size:27px}}
@media(max-width:850px){.idea-lab{min-height:650px;padding:36px 30px}.lab-heading{width:57%}.lab-heading h2{font-size:36px}.lab-controls{width:58%;gap:6px}.lab-choice{font-size:12px}.lab-choice svg{display:none}#lab-result{width:56%}.signal-flow{flex-direction:column;align-items:flex-start;gap:7px}.signal-connector{height:16px;min-height:16px;min-width:2px;max-width:2px;margin-left:13px}.signal-connector i{width:100%;height:30%}.signal-flow.pulse .signal-connector i{animation-name:signal-send-vertical}.lab-canvas{width:48%;height:70%;top:13%;right:-5%}.lab-story h3{font-size:26px}}
@media(max-width:580px){.idea-lab{min-height:0;padding:32px 24px}.lab-heading{width:100%;margin-bottom:0}.lab-heading h2{font-size:36px}.lab-heading p{font-size:14px;max-width:100%}.lab-canvas{position:relative;right:auto;top:auto;width:115%;margin-left:-7.5%;height:290px;margin-top:-5px;margin-bottom:10px}.lab-controls{width:100%;margin-bottom:28px}.lab-choice{font-size:12px;padding:12px 8px}#lab-result{width:100%}.signal-step{font-size:13px}.lab-story h3{font-size:26px}.lab-story .btn{min-height:48px}.hero-canvas{inset:-10%;width:120%;height:120%}.hero-visual.in-view .chibi-motion{animation-duration:8s}}
@media(max-width:360px){.lab-heading h2{font-size:32px}.lab-choice{font-size:11px}.lab-canvas{height:250px}}
@media(max-width:580px){.orbit-two{top:0;right:0}.orbit-one{top:0;max-width:49%}.orbit-two{max-width:46%}.orbit{font-size:11px;padding:10px 9px}}
.brand small,.draft-label,.classroom-link{font-size:11px}

@media(max-width:850px){.header{gap:10px}}
@media(max-width:580px){.header{gap:4px}.classroom-link{width:44px;height:44px;flex:0 0 44px;min-width:44px;padding:0;justify-content:center}.classroom-link span{display:none}.classroom-link svg{width:22px;height:22px}}
body.motion-quiet .chibi-motion,body.motion-quiet .activity-strip .wrap{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.chibi-motion,.activity-strip .wrap{animation:none!important;transform:none!important}}

/* Let hero orbital motion spill over the copy and into the next band. */
html,body{overflow-x:clip}.hero{overflow:visible;position:relative;z-index:3}.hero-copy{position:relative;z-index:4}
.hero-canvas{inset:auto;top:-18%;left:-52%;width:172%;height:166%}.activity-strip .wrap{position:relative;z-index:4}
@media(max-width:850px){.hero-canvas{top:-16%;left:-14%;width:128%;height:140%}}

/* Scroll cue: the wheel dot follows the user's scroll direction. */
.scroll-note span::after{top:5px;transform:translateY(var(--wheel-y,0px));transition:transform .32s var(--ease)}.scroll-note:not([data-dir]) span::after{animation:wheel-idle 1.8s ease-in-out infinite}
.scroll-note[data-dir=down] span::after{--wheel-y:13px}.scroll-note[data-dir=up] span::after{--wheel-y:-2px}
@keyframes wheel-idle{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(9px);opacity:.35}}
@media(prefers-reduced-motion:reduce){.scroll-note span::after{animation:none!important;transition:none}}

/* Service strip: hand-drawn emblems. */
.activity-strip p{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.01em}.activity-strip svg.emblem{width:40px;height:40px;margin:0;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(111,182,255,.35));transition:transform .35s var(--ease)}.activity-strip p:hover svg.emblem{transform:translateY(-3px) rotate(-4deg)}
@media(max-width:850px){.activity-strip svg.emblem{width:34px;height:34px}.activity-strip p{font-size:12px;gap:9px}}
@media(max-width:580px){.activity-strip svg.emblem{width:30px;height:30px}.activity-strip p{font-size:11px}}
.activity-strip{position:relative;z-index:4;background:#16284b}
.lab-canvas canvas[data-renderer=three]+.core-fallback{display:none}
/* Team stats: real counts with a count-up entrance. */
.team-stats{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);gap:40px;align-items:center}
.stats-head h2{font-family:Jua,sans-serif;font-weight:400;font-size:44px;line-height:1.3;margin:0 0 16px;letter-spacing:-.025em}
.stats-head h2 em{font-style:normal;color:var(--blue)}
.stats-head p{margin:0;color:var(--ink);font-size:18px;font-weight:700;letter-spacing:-.01em}
.stat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{position:relative;background:white;border-radius:var(--radius);padding:26px 20px 22px;box-shadow:0 18px 40px rgba(30,73,160,.08);overflow:hidden;isolation:isolate;transition:transform .35s var(--ease)}
.stat::before{content:'';position:absolute;inset:auto -30% -55% auto;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#dbe8ff 0,transparent 70%);z-index:-1}
.stat:hover{transform:translateY(-4px)}
.stat strong{display:flex;align-items:baseline;gap:4px;line-height:1;margin-bottom:14px}
.stat-num{font-family:Orbitron,Montserrat,sans-serif;font-weight:900;font-size:50px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;background:linear-gradient(120deg,#0b3fc4,#165dff 45%,#6aa8ff);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.stat small{font-size:15px;font-weight:700;color:var(--blue)}
.stat b{display:block;font-size:15px;font-weight:800;margin-bottom:4px;white-space:nowrap;letter-spacing:-.03em}
.stat>span{display:block;font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:1300px){.team-stats{grid-template-columns:1fr;gap:28px}}
@media(max-width:700px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat{padding:20px 16px 18px}.stat-num{font-size:40px}.stats-head h2{font-size:32px}}@media(max-width:700px){.stat b{font-size:13.5px}}@media(max-width:400px){.stat b{white-space:normal}}
/* Field gallery: staggered horizontal strip that drifts left; hover pauses it. */
.field-gallery{margin:-40px calc(50% - 50vw) 80px;overflow:hidden;padding:20px 0 30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.field-track{display:flex;align-items:flex-start;gap:18px;width:max-content;animation:field-drift 70s linear infinite}
.field-gallery:hover .field-track{animation-play-state:paused}
.field-card{position:relative;margin:0;height:var(--fh,230px);aspect-ratio:var(--ar);border-radius:18px;overflow:hidden;background:#e4edfb;box-shadow:0 18px 38px rgba(30,73,160,.12);flex-shrink:0;transition:transform .45s var(--ease)}
.field-card:nth-child(3n+1){--fh:270px}.field-card:nth-child(3n+2){--fh:200px;margin-top:56px}.field-card:nth-child(3n){--fh:235px;margin-top:22px}
.field-card:hover{transform:translateY(-6px) scale(1.02)}
.field-card img{width:100%;height:100%;object-fit:cover;display:block}
.field-card figcaption{position:absolute;left:12px;bottom:12px;padding:6px 11px;border-radius:9px;background:rgba(7,29,74,.78);color:white;font-size:12px;font-weight:700;line-height:1.3}
@keyframes field-drift{to{transform:translateX(calc(-50% - 9px))}}
@media(max-width:700px){.field-gallery{margin-bottom:70px}.field-card:nth-child(3n+1){--fh:190px}.field-card:nth-child(3n+2){--fh:140px;margin-top:40px}.field-card:nth-child(3n){--fh:165px;margin-top:16px}.field-track{gap:12px}}
@media(prefers-reduced-motion:reduce){.field-track{animation:none}.field-gallery{overflow-x:auto}}/* YouTube channel card + course stack rows. */
.yt-art{background:linear-gradient(150deg,#eaf2ff,#dfe9ff);padding:28px;place-items:center}
.yt-card{display:block;width:100%;max-width:520px;background:white;border-radius:20px;overflow:hidden;box-shadow:0 24px 50px rgba(30,73,160,.16);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.yt-card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 30px 60px rgba(30,73,160,.22)}
.yt-banner{height:118px;overflow:hidden;background:#d98a1c}.yt-banner img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.yt-body{display:flex;align-items:center;gap:14px;padding:0 20px;margin-top:-30px;position:relative}
.yt-avatar{width:76px;height:76px;border-radius:50%;border:4px solid white;flex-shrink:0;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.yt-meta{flex:1;min-width:0;padding-top:30px}.yt-meta strong{display:block;font-size:19px;font-weight:800;line-height:1.3;color:var(--ink)}.yt-meta span{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.yt-sub{margin-top:30px;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;background:#0f0f0f;color:white;font-size:12px;font-weight:700;white-space:nowrap}.yt-sub svg{width:18px;height:18px}
.yt-lists{display:flex;flex-wrap:wrap;gap:7px;padding:16px 20px 20px}.yt-lists span{font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;background:#eef4ff;color:#1d4fc4}
.stack-rows{margin:4px 0 26px;display:grid;gap:9px}.stack-rows div{display:flex;align-items:center;gap:12px}
.stack-rows dt{width:52px;flex-shrink:0;font-size:12px;font-weight:800;color:var(--blue)}
.stack-rows dd{margin:0;display:flex;flex-wrap:wrap;gap:6px}.stack-rows dd span{font-family:Montserrat,'Noto Sans KR',sans-serif;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;background:white;border:1px solid #d7e4fb;color:var(--ink)}
@media(max-width:580px){.yt-art{padding:16px}.yt-banner{height:84px}.yt-avatar{width:60px;height:60px}.yt-meta strong{font-size:16px}.yt-sub{display:none}}.yt-art{display:grid}.yt-card .yt-banner img{width:100%;height:100%}.yt-card img.yt-avatar{width:76px;height:76px}@media(max-width:580px){.yt-card img.yt-avatar{width:60px;height:60px}}
.yt-art{border-radius:var(--radius)}
.btn-dark{background:#0f1729;color:white;box-shadow:0 14px 30px rgba(15,23,41,.25)}.btn-dark:hover{background:#000}
.feature-actions{display:flex;flex-wrap:wrap;gap:10px}.btn-youtube{background:#ff0033;color:white;box-shadow:0 14px 30px rgba(255,0,51,.28)}.btn-youtube:hover{background:#d9002b}
/* ===== SupGilDoGam (booklet v1.2): living topographic hero, pinned-phone story, booklet data ===== */
.sg-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;color:#168239;margin-bottom:14px}.sg-eyebrow.light{color:#a6f56a}
.sg-lead{font-size:16px;line-height:1.75;color:#2d5a36;margin:0 0 22px;max-width:52ch}
.sg-source{font-size:11px;color:#5a7a60;margin:0}
.btn-green{background:#168239;color:white;box-shadow:0 12px 26px rgba(22,130,57,.25)}.btn-green:hover{background:#106326}
.btn-ghost-green{background:transparent;color:#168239;border:1.5px solid #9fd77a;gap:8px}.btn-ghost-green:hover{background:#eaffd8}.btn-ghost-green svg{width:17px;height:17px}
.sg-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.sg-actions .store-links{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.sg-ic{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* phone frame around extracted app screens */
.ph{--pw:300px;position:relative;width:var(--pw);padding:calc(var(--pw)*.028);border-radius:calc(var(--pw)*.165);background:linear-gradient(160deg,#30362f,#0b0d0b 38%,#171a1c);box-shadow:0 46px 90px -24px rgba(10,40,20,.5);transform-style:preserve-3d}
.ph::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 calc(var(--pw)*.013) rgba(0,0,0,.4)}
.ph-screen{position:relative;aspect-ratio:.486;border-radius:calc(var(--pw)*.135);overflow:hidden;background:#0b0d0b}
.ph-screen>img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;display:block}
/* hero */
.sg-hero{position:relative;margin:0 calc(50% - 50vw);padding:44px 0 56px;min-height:min(840px,calc(100vh - 124px));display:flex;align-items:center;overflow:hidden;background:linear-gradient(180deg,#f6ffef 0%,#e4ffcb 48%,#f6ffef 100%)}
.sg-topo{position:absolute;inset:0;opacity:.55;pointer-events:none;background-image:url(/assets/supgil/topo.svg);background-size:760px 760px;background-position:62% 40%}
.sg-terrain{position:absolute;top:-8%;right:-6%;width:70%;height:116%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);mask-image:linear-gradient(90deg,transparent 0,#000 28%)}
.sg-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.56fr) minmax(0,.44fr);align-items:center;gap:30px;width:100%}
.sg-hero h1{font-family:Jua,sans-serif;font-weight:400;font-size:clamp(46px,5.1vw,78px);line-height:1.14;margin:0 0 20px;color:#173c21;letter-spacing:-.02em}.sg-hero h1 em{font-style:normal;color:#168239}
.sg-hero-copy>p{font-size:18px;line-height:1.7;color:#2d5a36;margin:0 0 28px}
.sg-meta{display:flex;gap:30px;margin:34px 0 0}.sg-meta div{border-left:2px solid #b7ea8c;padding-left:12px}.sg-meta dt{font-size:11px;font-weight:800;color:#168239;letter-spacing:.06em}.sg-meta dd{margin:3px 0 0;font-size:14px;font-weight:700;color:#173c21}
.sg-hero-device{position:relative;height:640px;perspective:1500px}
.sg-hero-phone{--pw:292px;position:absolute;left:50%;top:50%;animation:sg-hover 7s ease-in-out infinite}
@keyframes sg-hover{0%,100%{transform:translate(-50%,-50%) rotateY(-16deg) rotateX(4deg)}50%{transform:translate(-50%,calc(-50% - 16px)) rotateY(-11deg) rotateX(2deg)}}
.sg-float-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.93);box-shadow:0 14px 34px rgba(23,60,33,.16);font-size:12px;font-weight:800;color:#173c21;white-space:nowrap}.sg-float-chip .sg-ic{width:20px;height:20px;color:#168239}
.sg-hero-device .chip-a{left:-4%;top:17%;animation:orbit-drift 5s ease-in-out infinite}.sg-hero-device .chip-b{right:-2%;bottom:15%;animation:orbit-drift 6s ease-in-out infinite;animation-delay:-2s}
/* hero: two phones in an Apple-like white frame (splash behind, hike record in front) */
.sg-hero-phone.is-back{--pw:244px;left:27%;top:45%;z-index:1;animation-delay:-3.5s}
.sg-hero-phone.is-front{--pw:270px;left:72%;top:53%;z-index:2}
.sg-hero-device .chip-a{top:auto;bottom:9%;left:-2%}
.ph-white.ph{background:linear-gradient(150deg,#fdfdfe 0%,#e4e7eb 30%,#f9fafb 55%,#d9dde2 100%);box-shadow:0 40px 80px -26px rgba(16,44,24,.42),0 2px 6px rgba(16,44,24,.08)}
.ph-white.ph::after{box-shadow:inset 0 0 0 1px rgba(120,128,138,.35),inset 0 0 0 calc(var(--pw)*.009) rgba(255,255,255,.9)}
.ph-white.ph::before{content:'';position:absolute;left:-2px;top:22%;width:3px;height:9%;border-radius:2px;background:#cfd4da;box-shadow:0 calc(var(--pw)*.2) 0 #cfd4da}
.ph-white .ph-screen{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.ph-white .ph-screen::before{content:'';position:absolute;z-index:2;left:50%;top:calc(var(--pw)*.03);width:31%;height:calc(var(--pw)*.072);border-radius:999px;background:#0b0b0c;transform:translateX(-50%)}
.ph-white .ph-screen>img{object-position:top}
.ph-status{position:absolute;z-index:2;left:0;right:0;top:calc(var(--pw)*.036);display:flex;justify-content:space-between;align-items:center;padding:0 calc(var(--pw)*.085) 0 calc(var(--pw)*.1);color:#111;font:700 calc(var(--pw)*.05)/1 -apple-system,'Noto Sans KR',sans-serif;pointer-events:none}.ph-status svg{width:calc(var(--pw)*.19);height:auto;fill:currentColor}
/* market band */
.sg-market{position:relative;margin:0 calc(50% - 50vw);padding:72px 0 44px;background:#0f3d22;color:white;overflow:hidden}
.sg-market::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 12% 20%,rgba(166,245,106,.22),transparent 42%),radial-gradient(circle at 88% 85%,rgba(22,130,57,.55),transparent 48%);pointer-events:none}
.sg-market-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.sg-market h2{font-family:Jua,sans-serif;font-weight:400;font-size:46px;line-height:1.22;margin:0 0 14px;color:white}.sg-market h2 strong{font-weight:400;color:#a6f56a;font-size:1.25em}
.sg-market-head p{margin:0;color:#cfe8c2;font-size:16px}
.sg-market-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sg-market-stats li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:22px 20px}
.sg-market-stats strong{display:block;font-family:Montserrat,'Noto Sans KR',sans-serif;font-weight:800;font-size:40px;line-height:1;letter-spacing:-.02em;color:white}.sg-market-stats strong small{font-family:'Noto Sans KR',sans-serif;font-size:14px;margin-left:3px;color:#a6f56a}
.sg-market-stats b{display:block;font-size:14px;margin:12px 0 4px}.sg-market-stats span{font-size:12px;color:#b9d8ab;line-height:1.5}
.sg-market .sg-source{position:relative;color:#8fb98f;margin-top:30px}
/* problem → solution */
.sg-shift{padding-top:110px}
.sg-shift-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;margin-bottom:90px}
.sg-shift h2,.sg-verbs-title,.sg-step h3,.sg-data h2,.sg-compare h2,.sg-vision h2,.sg-cta h2,.home-supgil h2{font-family:Jua,sans-serif;font-weight:400;letter-spacing:-.02em;line-height:1.25;color:#173c21}
.sg-shift h2{font-size:44px;margin:0 0 18px}
.sg-problems{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sg-problems li{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:start;background:white;border-radius:18px;padding:22px 24px;box-shadow:0 14px 34px rgba(23,60,33,.06)}
.sg-problems li>span{font-family:Montserrat,sans-serif;font-weight:800;font-size:24px;color:#9fd77a;line-height:1}
.sg-problems h3{font-size:18px;margin:0 0 6px;color:#168239}.sg-problems p{margin:0;font-size:14px;color:#426649;line-height:1.7}
.sg-verbs-wrap{position:relative;background:#173c21;color:white;border-radius:30px;padding:60px 56px;overflow:hidden;margin-bottom:130px}
.sg-verbs-wrap::after{content:'';position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(166,245,106,.28),transparent 70%);pointer-events:none}
.sg-verbs-wrap .sg-verbs-title{font-size:clamp(36px,4.4vw,60px);color:white;margin:0 0 12px}.sg-verbs-title span{display:inline-block}.sg-verbs-title span:nth-child(2){color:#d5ff9b}.sg-verbs-title span:nth-child(4){color:#a6f56a}
body:not(.motion-quiet) .sg-verbs-title span{opacity:0}body:not(.motion-quiet) [data-scroll-reveal=entered] .sg-verbs-title span{animation:sg-verb-in .8s var(--ease) both}body:not(.motion-quiet) [data-scroll-reveal=entered] .sg-verbs-title span:nth-child(2){animation-delay:.14s}body:not(.motion-quiet) [data-scroll-reveal=entered] .sg-verbs-title span:nth-child(3){animation-delay:.28s}body:not(.motion-quiet) [data-scroll-reveal=entered] .sg-verbs-title span:nth-child(4){animation-delay:.42s}
@keyframes sg-verb-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.sg-verbs-wrap>p{margin:0 0 40px;color:#cfe8c2;font-size:17px}
.sg-verbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.sg-verbs li{border-top:1px solid rgba(255,255,255,.25);padding-top:20px;color:#a6f56a}.sg-verbs b{display:block;font-size:22px;color:white;margin:14px 0 6px}.sg-verbs span{display:block;font-size:13px;color:#cfe8c2;line-height:1.6}
/* pinned-phone story */
.sg-story{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:64px;align-items:start;margin:0 0 130px}
.sg-stage{position:sticky;top:116px;height:calc(100vh - 150px);min-height:560px;display:grid;place-items:center;border-radius:32px;background:linear-gradient(160deg,#d5ff9b,#eaffd2 55%,#f6ffef);overflow:hidden;isolation:isolate}
.sg-stage-glow{position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(22,130,57,.38),transparent 64%);filter:blur(12px);animation:sg-breathe 6s ease-in-out infinite}
@keyframes sg-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.sg-stage-phone{--pw:min(296px,calc((100vh - 240px)*.45))}
.sg-stage-phone .ph-screen>img{opacity:0;transform:scale(1.04);transition:opacity .55s var(--ease),transform .75s var(--ease)}
.sg-stage[data-active="0"] img[data-step="0"],.sg-stage[data-active="1"] img[data-step="1"],.sg-stage[data-active="2"] img[data-step="2"],.sg-stage[data-active="3"] img[data-step="3"],.sg-stage[data-active="4"] img[data-step="4"]{opacity:1;transform:none}
.sg-stage-side{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.sg-stage-label{background:#173c21;color:#d5ff9b;font-size:12px;font-weight:800;padding:8px 12px;border-radius:10px;white-space:nowrap}
.sg-progress{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sg-progress li{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;color:#6f8f74;transition:color .3s}
.sg-progress li i{width:10px;height:10px;border-radius:50%;background:#b7ea8c;transition:transform .3s var(--ease),background .3s}
.sg-stage[data-active="0"] .sg-progress li:nth-child(1),.sg-stage[data-active="1"] .sg-progress li:nth-child(2),.sg-stage[data-active="2"] .sg-progress li:nth-child(3),.sg-stage[data-active="3"] .sg-progress li:nth-child(4),.sg-stage[data-active="4"] .sg-progress li:nth-child(5){color:#173c21}
.sg-stage[data-active="0"] .sg-progress li:nth-child(1) i,.sg-stage[data-active="1"] .sg-progress li:nth-child(2) i,.sg-stage[data-active="2"] .sg-progress li:nth-child(3) i,.sg-stage[data-active="3"] .sg-progress li:nth-child(4) i,.sg-stage[data-active="4"] .sg-progress li:nth-child(5) i{background:#168239;transform:scale(1.5)}
.sg-steps{display:grid}
.sg-step{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding:36px 0;opacity:.42;transition:opacity .5s}
.sg-step.is-active{opacity:1}
.sg-step h3{font-size:42px;margin:0 0 18px}
.sg-points{list-style:none;margin:0;padding:0}
.sg-points li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-top:1px solid #cbe6b8}.sg-points li:last-child{border-bottom:1px solid #cbe6b8}
.sg-points b{color:#168239;font-size:15px}.sg-points span{font-size:14px;color:#2d5a36;line-height:1.65}
.sg-step-phone{display:none}
/* data assets */
.sg-data{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;margin-bottom:130px}
.sg-data h2{font-size:42px;margin:0 0 26px}
.sg-data-nums{display:grid;margin-bottom:22px}.sg-data-nums div{display:grid;grid-template-columns:200px 1fr;align-items:baseline;gap:14px;padding:14px 0;border-top:1px solid #cbe6b8}
.sg-data-nums strong{font-family:Montserrat,'Noto Sans KR',sans-serif;font-size:40px;font-weight:800;color:#168239;letter-spacing:-.02em;line-height:1}.sg-data-nums small{font-family:'Noto Sans KR',sans-serif;font-size:14px;margin-left:4px;font-weight:700}.sg-data-nums span{font-size:14px;color:#2d5a36}
.sg-layers{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.sg-layers li{display:grid;grid-template-columns:30px 48px 1fr;gap:12px;align-items:center;background:white;border-radius:14px;padding:12px 16px;color:#168239}.sg-layers b{font-size:14px;color:#173c21}.sg-layers span{font-size:13px;color:#426649;line-height:1.5}
.sg-data-art{position:relative;height:660px}
.sg-data-art .ph{--pw:252px;position:absolute}.sg-data-art .ph-a{left:4%;top:0;transform:rotate(-6deg)}.sg-data-art .ph-b{right:5%;bottom:0;transform:rotate(5deg)}
/* traction */
/* vision */
.sg-vision{background:#0b1f12;color:white;border-radius:32px;padding:60px;margin-bottom:130px}
.sg-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.sg-badge{display:inline-block;background:#a6f56a;color:#173c21;font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px}.sg-badge.is-patent{background:transparent;color:#a6f56a;box-shadow:inset 0 0 0 1.5px #a6f56a}
.sg-vision h2{font-size:44px;margin:0 0 16px;color:white}.sg-vision h2 small{font-family:'Noto Sans KR',sans-serif;font-size:14px;color:#9fd77a;margin-left:8px}
.sg-vision p{color:#cfe8c2;margin:0 0 26px;font-size:17px;line-height:1.7}
.sg-vision-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}.sg-vision-list li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:15px;line-height:1.6;color:#cfe8c2;word-break:keep-all}.sg-vision-list b{color:#a6f56a;font-weight:800}
.sg-vision-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:stretch}.sg-vision-art{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:16px;min-height:300px}.sg-vision-art figure{margin:0;position:relative;border-radius:20px;overflow:hidden}.sg-vision-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.sg-vision-art figcaption{position:absolute;left:14px;bottom:14px;background:rgba(0,0,0,.6);color:white;font-size:12px;font-weight:700;padding:6px 10px;border-radius:8px}
.sg-vision-models{list-style:none;margin:44px 0 0;padding:28px 0 0;border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.sg-vision-models li{display:flex;flex-direction:column;gap:8px}.sg-vision-models .vm-no{font-family:Montserrat,'Noto Sans KR',sans-serif;font-size:13px;font-weight:800;letter-spacing:.04em;color:#a6f56a}.sg-vision-models b{font-size:17px;line-height:1.45;color:#fff;word-break:keep-all}.sg-vision-models .vm-desc{font-size:15px;line-height:1.6;color:#cfe8c2;word-break:keep-all}
@media(max-width:1100px){.sg-vision-top{grid-template-columns:1fr;gap:28px}.sg-vision-art{min-height:0}.sg-vision-art figure{aspect-ratio:1.5}.sg-vision-models{grid-template-columns:1fr;gap:0;padding-top:0;margin-top:32px}.sg-vision-models li{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18)}}
@media(max-width:640px){.sg-vision-art{grid-template-columns:1fr}.sg-vision-list li{grid-template-columns:1fr;gap:2px}}
/* closing call */
.sg-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;background:linear-gradient(120deg,#168239,#34b35a);color:white;border-radius:32px;padding:60px;margin-bottom:110px}
.sg-cta h2{font-size:46px;line-height:1.2;margin:0 0 10px;color:white}.sg-cta p{margin:0 0 26px;color:#e2fbd2}
.sg-cta .btn-primary{background:white;color:#168239;box-shadow:none}.sg-cta .btn-light{background:rgba(255,255,255,.16);color:white}.sg-cta .btn-ghost-green{color:white;border-color:rgba(255,255,255,.6)}.sg-cta .btn-ghost-green:hover{background:rgba(255,255,255,.12)}
.sg-qr{display:flex;gap:14px}.sg-qr figure{margin:0;background:white;border-radius:16px;padding:12px;text-align:center}.sg-qr img{width:120px;height:120px;display:block;border-radius:8px}.sg-qr figcaption{font-size:11px;font-weight:800;color:#173c21;margin-top:8px}
/* home teaser */
.home-supgil{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:30px;align-items:center;margin-bottom:110px;background:linear-gradient(135deg,#d5ff9b 0%,#eaffd2 50%,#f6ffef 100%);border-radius:32px;padding:48px 20px 48px 56px;overflow:hidden}
.home-supgil h2{font-size:44px;margin:0 0 16px}
.home-supgil-copy>p{color:#2d5a36;font-size:15px;line-height:1.75;max-width:46ch;margin:0 0 22px}
.home-supgil-verbs{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.home-supgil-verbs li{display:grid;grid-template-columns:26px 1fr;gap:4px 12px;align-items:start;background:rgba(255,255,255,.78);border-radius:14px;padding:14px 16px;color:#168239}.home-supgil-verbs .sg-ic{width:26px;height:26px;grid-row:span 2;margin-top:1px}.home-supgil-verbs b{font-size:15px;color:#173c21;line-height:1.3}.home-supgil-verbs span{font-size:12.5px;color:#426649;line-height:1.6;word-break:keep-all}
.home-supgil-art{position:relative;height:540px}
.home-supgil-canvas{position:absolute;inset:-10% -4% -12% 0;width:104%;height:122%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 18%,rgba(0,0,0,.55) 42%,#000 62%);mask-image:linear-gradient(90deg,transparent 18%,rgba(0,0,0,.55) 42%,#000 62%)}.home-supgil-copy{position:relative;z-index:2}.home-supgil-art{z-index:2}
.home-supgil-phone{--pw:244px;position:absolute;left:50%;top:50%;animation:sg-hover 7s ease-in-out infinite}
.home-supgil-art .chip-a{left:2%;bottom:12%;animation:orbit-drift 5s ease-in-out infinite}
/* responsive */
/* why SupGilDoGam: category comparison from the booklet */
.sg-compare{margin-bottom:130px}
.sg-compare-head{display:grid;grid-template-columns:34% minmax(0,1fr);align-items:end;margin-bottom:36px}.sg-compare-head p{padding-left:16px}.sg-compare h2{font-size:44px;margin:10px 0 0;color:#173c21}.sg-compare-head p{margin:0;font-size:17px;line-height:1.7;color:#2d5a36;word-break:keep-all}
.cmp{width:100%;border-collapse:collapse;font-size:15px;color:#173c21}.cmp thead th:first-child{width:34%}
.cmp th,.cmp td{padding:14px 10px;border-bottom:1px solid #d6e8c8;text-align:center;font-weight:700}
.cmp thead th{font-size:13px;color:#4b6b52;border-bottom:2px solid #173c21;word-break:keep-all;vertical-align:bottom}
.cmp tbody th,.cmp tfoot th{text-align:left;font-weight:700;word-break:keep-all}
.cmp .is-us{background:#e4f6d6}.cmp thead .is-us{background:#168239;color:#fff;border-radius:12px 12px 0 0;white-space:nowrap}
.cmp tfoot th,.cmp tfoot td{border-bottom:2px solid #173c21;font-family:Montserrat,'Noto Sans KR',sans-serif;font-weight:800;color:#168239}.cmp tfoot td{color:#4b6b52}.cmp tfoot .is-us{background:#168239;color:#fff}
.cmp-dot{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:middle;border:2px solid #9bb59f}
.cmp-dot.is-f{background:#173c21;border-color:#173c21}.cmp .is-us .cmp-dot.is-f{background:#168239;border-color:#168239}
.cmp-dot.is-p{background:linear-gradient(90deg,#173c21 50%,transparent 50%);border-color:#173c21}
.cmp-dot.is-e{border-color:#c4d6c4}
.cmp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:14px 0 0;font-size:13px;color:#4b6b52}.cmp-legend .cmp-dot{width:12px;height:12px;margin-left:8px}.cmp-legend .cmp-dot:first-child{margin-left:0}
.sg-why{list-style:none;margin:44px 0 0;padding:28px 0 0;border-top:1px solid #cfe3bf;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.sg-why li{display:flex;flex-direction:column;gap:8px}.sg-why .why-no{font-family:Montserrat,'Noto Sans KR',sans-serif;font-size:13px;font-weight:800;letter-spacing:.04em;color:#168239}
.sg-why b{font-size:17px;line-height:1.45;color:#173c21;word-break:keep-all}.sg-why .why-desc{font-size:15px;line-height:1.6;color:#2d5a36;word-break:keep-all}
@media(max-width:1100px){.sg-compare-head{grid-template-columns:1fr;gap:14px}.sg-compare-head p{padding-left:0}.sg-why{grid-template-columns:1fr;gap:0;padding-top:0;margin-top:32px}.sg-why li{padding:16px 0;border-bottom:1px solid #cfe3bf}}
@media(max-width:640px){.sg-compare{margin-bottom:84px}.sg-compare h2{font-size:32px}.cmp{font-size:13px}.cmp th,.cmp td{padding:11px 4px}.cmp thead th{font-size:12px}.cmp-dot{width:13px;height:13px}.cmp tbody th{padding-right:8px}}
@media(max-width:1100px){.sg-hero-grid{grid-template-columns:1fr;gap:20px}.sg-hero-device{height:540px}.sg-terrain{top:auto;right:0;bottom:-12%;width:100%;height:72%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 32%);mask-image:linear-gradient(180deg,transparent 0,#000 32%)}.sg-market-grid,.sg-shift-grid,.sg-data,.sg-vision,.sg-growth-head{grid-template-columns:1fr}.sg-story{grid-template-columns:1fr;gap:0}.sg-stage{display:none}.sg-step{min-height:0;padding:40px 0;opacity:1}.sg-step-phone{display:block;--pw:224px;margin:0 0 26px}.sg-market-stats,.sg-growth-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.sg-verbs{grid-template-columns:repeat(2,minmax(0,1fr))}.sg-data-art{height:540px}.sg-cta{grid-template-columns:1fr}.home-supgil{grid-template-columns:1fr;padding:36px 24px}.home-supgil-art{height:460px}.home-supgil-canvas{inset:auto -4% -8% 0;width:104%;height:70%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 35%);mask-image:linear-gradient(180deg,transparent 0,#000 35%)}.sg-chain{grid-template-columns:auto auto auto auto auto}.sg-chain p{grid-column:1/-1;padding:14px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.2)}}
@media(max-width:640px){.sg-hero{padding:32px 0 40px;min-height:0}.sg-hero h1{font-size:44px}.sg-hero-copy>p{font-size:16px}.sg-hero-device{height:430px}.sg-hero-phone{--pw:204px}.sg-hero-phone.is-back{--pw:164px;left:28%}.sg-hero-phone.is-front{--pw:180px;left:71%}.sg-float-chip{font-size:11px;padding:8px 10px}.sg-hero-device .chip-a{left:0}.sg-hero-device .chip-b{right:0}.sg-meta{gap:16px;flex-wrap:wrap}.sg-market{padding:52px 0 36px}.sg-market h2,.sg-shift h2,.sg-step h3,.sg-data h2,.sg-compare h2,.sg-vision h2,.sg-cta h2,.home-supgil h2{font-size:32px}.sg-shift{padding-top:70px}.sg-verbs-wrap{padding:36px 22px;border-radius:22px;margin-bottom:80px}.sg-verbs{grid-template-columns:1fr}.sg-points li,.sg-data-nums div,.sg-vision-list li{grid-template-columns:1fr;gap:4px}.sg-growth,.sg-vision,.sg-cta{padding:36px 22px;border-radius:22px;margin-bottom:80px}.sg-data{margin-bottom:80px}.sg-story{margin-bottom:60px}.sg-market-stats,.sg-growth-stats{grid-template-columns:1fr}.sg-data-art{height:420px}.sg-data-art .ph{--pw:176px}.sg-vision-art{grid-template-columns:1fr}.sg-qr{justify-content:center}.sg-layers li{grid-template-columns:26px 1fr}.sg-layers span{grid-column:2}.home-supgil-verbs{grid-template-columns:1fr}.home-supgil-art{height:400px}.home-supgil-phone{--pw:190px}.sg-chain{gap:12px}.sg-chain strong{font-size:26px}}
@media(prefers-reduced-motion:reduce){.sg-hero-phone,.home-supgil-phone,.sg-float-chip,.sg-stage-glow{animation:none!important}.sg-hero-phone,.home-supgil-phone{transform:translate(-50%,-50%)}}

/* Footer: company and legal lines carried over from the live site. */
.footer-legal{font-style:normal;display:grid;gap:2px;color:var(--muted);line-height:1.9}.footer-legal span{display:block;word-break:keep-all}.footer-legal i{display:inline-block;width:1px;height:11px;margin:0 10px;vertical-align:-1px;background:#7f93b3}.footer-legal .footer-copy{margin-top:8px}body[data-page=supgil] .footer-legal i{background:#6f9a78}

/* Home SupGil splash phone: white device frame. */
.home-supgil-phone.ph{background:linear-gradient(160deg,#ffffff,#eef3ea 45%,#f8fbf5);box-shadow:0 46px 90px -24px rgba(10,40,20,.38)}.home-supgil-phone.ph::after{box-shadow:inset 0 0 0 1.5px rgba(23,60,33,.14),inset 0 0 0 calc(var(--pw)*.013) rgba(255,255,255,.65)}.home-supgil-phone .ph-screen{background:#f4f7ef}

/* Home SupGil: two static chibi hikers flank the phone at the foot of the panel. */
.hiker{position:absolute;bottom:-14px;z-index:3;height:auto;pointer-events:none;filter:drop-shadow(0 16px 14px rgba(23,60,33,.28))}
.hiker-a{width:176px;left:50%;margin-left:16px;transform:rotate(-3deg)}
.hiker-b{width:180px;right:2%;transform:rotate(2deg)}
.home-supgil .chip-a{bottom:auto;top:12%;left:6%}
@media(max-width:1100px){.hiker-a{width:150px;left:8%;margin-left:0}.hiker-b{width:140px;right:4%}}
@media(max-width:640px){.hiker-a{width:104px;left:2%;bottom:-8px}.hiker-b{width:98px;right:0;bottom:-8px}.home-supgil .chip-a{top:6%;left:2%}}
/* SupGil store buttons: platform marks before the label. */
.btn .store-mark{width:19px;height:19px;flex-shrink:0;margin-right:-2px}.store-links .btn{gap:9px}.btn.store-play .store-mark{filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}

/* Booklet gate dialog + lead admin page. */
.booklet-dialog{border:0;border-radius:22px;padding:0;max-width:min(560px,calc(100vw - 32px));width:100%;box-shadow:0 40px 90px rgba(23,60,33,.3);background:transparent}
.booklet-dialog::backdrop{background:rgba(7,29,22,.55);backdrop-filter:blur(3px)}
.booklet-form{position:relative;margin:0;padding:34px 32px 28px;box-shadow:none}
.booklet-form h2{font-family:Jua,sans-serif;font-weight:400;font-size:30px;margin:0 0 6px;color:#173c21}
.booklet-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:#eaffd8;color:#173c21;font-size:22px;line-height:1;cursor:pointer}
.booklet-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#2d5a36;line-height:1.6;margin:4px 0 16px}.booklet-consent input{margin-top:4px;width:18px;height:18px;accent-color:#168239;flex-shrink:0}
.booklet-actions{display:flex;gap:10px;flex-wrap:wrap}.booklet-error{margin:0 0 14px;color:#b4231a}
.booklet-popup{border:0;border-radius:22px;padding:0;width:min(440px,calc(100vw - 32px));box-shadow:0 40px 90px rgba(23,60,33,.3);background:white}.booklet-popup::backdrop{background:rgba(7,29,22,.55);backdrop-filter:blur(3px)}
.booklet-popup-body{padding:34px 30px 28px;text-align:center}.booklet-popup-icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#eaffd8;color:#168239;margin-bottom:14px}.booklet-popup-icon svg{width:30px;height:30px}.booklet-popup-icon.is-done{background:#168239;color:white}
.booklet-popup h2{font-family:Jua,sans-serif;font-weight:400;font-size:26px;margin:0 0 8px;color:#173c21}.booklet-popup p{margin:0 0 6px;font-size:14px;color:#2d5a36;line-height:1.7}.booklet-popup .form-note{margin:6px 0 0;font-size:12px}.booklet-popup .form-note a{color:#168239;font-weight:700}.booklet-popup .booklet-actions{justify-content:center;margin-top:20px}
body[data-page=supgil] .booklet-form .field input,body[data-page=supgil] .booklet-form .field textarea{background:#f4fbec;border-color:#cbe6b8}
@media(max-width:580px){.booklet-form{padding:26px 20px 22px}.booklet-form h2{font-size:26px}}
.admin-body{background:var(--paper)}.admin-main{padding-top:40px;padding-bottom:80px}
.admin-gate h1,.admin-list h1{font-family:Jua,sans-serif;font-weight:400;font-size:38px;margin:0 0 10px}
.admin-gate p{color:var(--muted);font-size:14px;max-width:60ch}.admin-gate code,.admin-list code{background:#eaf2ff;padding:2px 6px;border-radius:5px;font-size:12px}
.admin-key-form{max-width:520px;margin-top:22px}.admin-actions{display:flex;gap:10px;flex-wrap:wrap}
.admin-table-wrap{overflow-x:auto;background:white;border-radius:16px;box-shadow:var(--shadow);margin-top:24px}
.admin-table{width:100%;border-collapse:collapse;font-size:13px}.admin-table th,.admin-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}.admin-table th{background:#f1f6ff;font-weight:700;white-space:nowrap}.admin-table td:nth-child(4){max-width:420px;white-space:pre-wrap}.admin-empty{color:var(--muted);text-align:center!important;padding:40px 14px!important}

/* SupGil page: the header wordmark's 100 follows the page's green palette. */
body[data-page=supgil] .wm-name b{background-image:linear-gradient(120deg,#0e5a24 0%,#168239 45%,#5fc46c 100%)}

/* Team members: 1:1 character portraits, left to right in team order (Team Leader first). */
.member-photo{aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:#3b3d40;box-shadow:0 22px 44px rgba(22,40,75,.16);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.member-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.member:hover .member-photo{transform:translateY(-6px);box-shadow:0 30px 56px rgba(22,40,75,.22)}.member:hover .member-photo img{transform:scale(1.04)}
.member-role{display:block;font-family:Montserrat,'Noto Sans KR',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.01em;line-height:1.3;color:var(--ink);margin:18px 0 8px}
.member-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.member h3.member-name{font-family:Jua,sans-serif;font-weight:400;font-size:22px;line-height:1.2;margin:0;color:var(--blue)}
.member p.member-intro{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.member p.member-career{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line);font-size:13px;font-weight:600;line-height:1.5;color:var(--ink)}
/* Hover (mouse), keyboard focus or tap selection fills that person's info block with brand blue. */
.member{cursor:pointer;outline:none;border-radius:22px}
.member-body{margin-top:14px;padding:14px 16px 16px;border-radius:16px;transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.member-body .member-role{margin-top:0}
.member-body *{transition:color .25s var(--ease),border-color .25s var(--ease)}
.member.is-active .member-body,.member:focus-visible .member-body{background:var(--blue);box-shadow:0 18px 36px rgba(22,40,75,.18)}
.member.is-active :is(.member-role,.member-name,.member-career),.member:focus-visible :is(.member-role,.member-name,.member-career){color:#fff}
.member.is-active .member-intro,.member:focus-visible .member-intro{color:#dce8ff}
.member.is-active .member-career,.member:focus-visible .member-career{border-top-color:rgba(255,255,255,.35)}
.member:focus-visible .member-photo{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--blue)}
@media(hover:hover){.member:hover .member-body{background:var(--blue);box-shadow:0 18px 36px rgba(22,40,75,.18)}.member:hover :is(.member-role,.member-name,.member-career){color:#fff}.member:hover .member-intro{color:#dce8ff}.member:hover .member-career{border-top-color:rgba(255,255,255,.35)}}
@media(max-width:640px){.member-body{margin-top:10px;padding:10px 10px 12px;border-radius:12px}}
@media(max-width:640px){.member-photo{border-radius:16px}.member-role{font-size:16px;margin-top:12px}.member h3.member-name{font-size:19px}.member p.member-intro{font-size:12px;flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.member:hover .member-photo,.member:hover .member-photo img{transform:none}}

/* Team history lists: year column + two-column title list; collapsed years hide items past the 8th. */
.hist{border-top:1px solid var(--line)}
.hist-year{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.hist-label strong{display:block;font-family:Montserrat,'Noto Sans KR',sans-serif;font-weight:800;font-size:30px;line-height:1;color:var(--blue);letter-spacing:-.02em}
.hist-label span{display:block;margin-top:8px;font-size:12px;font-weight:600;color:var(--muted)}
.hist-body ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.hist-body li{position:relative;padding-left:16px;font-size:14px;line-height:1.55;color:var(--ink);word-break:keep-all}
.hist-body li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.55}
.hist-year.is-collapsed li:nth-child(n+9){display:none}
.hist-more{margin-top:16px;min-height:40px;padding:8px 16px;border:1px solid #c9d8f3;border-radius:999px;background:white;color:var(--blue);font-size:13px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}
.hist-more:hover{background:#eaf2ff;border-color:var(--blue)}
@media(max-width:850px){.hist-year{grid-template-columns:1fr;gap:12px;padding:22px 0}.hist-label{display:flex;align-items:baseline;gap:10px}.hist-label span{margin-top:0}}
@media(max-width:640px){.hist-body ul{grid-template-columns:1fr;gap:9px}.hist-label strong{font-size:26px}.hist-body li{font-size:13px}}

/* Team page field photos: static masonry columns, every photo visible at its natural ratio. */
.field-grid{columns:4 220px;column-gap:16px;margin-top:32px}
.field-tile{margin:0 0 16px;break-inside:avoid;border-radius:16px;overflow:hidden;background:#e4edfb;box-shadow:0 14px 30px rgba(30,73,160,.1)}
.field-tile img{display:block;width:100%;height:auto;transition:transform .5s var(--ease)}
@media(hover:hover){.field-tile:hover img{transform:scale(1.03)}}
@media(max-width:640px){.field-grid{columns:2;column-gap:10px}.field-tile{margin-bottom:10px;border-radius:12px}}
@media(prefers-reduced-motion:reduce){.field-tile:hover img{transform:none}}

/* Team page development visuals: 2x2 wide tiles (max two per project); the app screen sits on a tinted card. */
.dev-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.dev-tile{margin:0;border-radius:18px;overflow:hidden;background:#e4edfb;box-shadow:0 14px 30px rgba(30,73,160,.1);aspect-ratio:880/390}
.dev-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.dev-screen-card{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0;background:linear-gradient(140deg,#d5ff9b,#eaffd2 55%,#f6ffef)}
.dev-phone{height:118%;aspect-ratio:.486;margin-bottom:-14%;padding:5px;border-radius:24px;background:#0b0d0b;box-shadow:0 24px 44px rgba(23,60,33,.28);transform:rotate(-4deg);transition:transform .5s var(--ease)}
.dev-phone img{border-radius:19px;object-fit:cover}
.dev-screen-card figcaption{position:absolute;left:18px;top:16px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.85);font-size:13px;font-weight:700;color:#173c21}
@media(hover:hover){.dev-banner:hover img{transform:scale(1.03)}.dev-screen-card:hover .dev-phone{transform:rotate(0) translateY(-6px)}}
@media(max-width:640px){.dev-gallery{grid-template-columns:1fr;gap:10px}.dev-tile{border-radius:14px}.dev-screen-card figcaption{font-size:12px;left:12px;top:12px}}
@media(prefers-reduced-motion:reduce){.dev-banner:hover img,.dev-screen-card:hover .dev-phone{transform:none}}

/* 팀 더백과 함께한 곳: two full-bleed logo rows drifting in opposite directions; hover pauses, reduced motion scrolls by hand. */
.partners .partner-row{margin:0 calc(50% - 50vw);overflow:hidden;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.partners .partner-row+.partner-row{margin-top:6px}
.partner-track{list-style:none;margin:0;padding:0;display:flex;gap:16px;width:max-content;animation:partner-drift 48s linear infinite}
.partner-row.is-reverse .partner-track{animation-direction:reverse;animation-duration:54s}
.partner-row:hover .partner-track{animation-play-state:paused}
.partner{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;height:84px;min-width:168px;padding:0 26px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 24px rgba(30,73,160,.06)}
.partner img{display:block;max-height:40px;max-width:150px;width:auto;height:auto;object-fit:contain}
.partner.has-label img{max-height:44px;max-width:52px}.partner span{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
@keyframes partner-drift{to{transform:translateX(calc(-50% - 8px))}}
@media(max-width:640px){.partner{height:68px;min-width:132px;padding:0 18px;border-radius:14px}.partner img{max-height:30px;max-width:116px}.partner.has-label img{max-height:34px;max-width:40px}.partner span{font-size:12px}.partner-track{gap:10px}}
@media(prefers-reduced-motion:reduce){.partner-track{animation:none}.partners .partner-row{overflow-x:auto}}
body.page-hidden .partner-track{animation-play-state:paused}

/* Client project cards under the own-app gallery: logo (or org name), category, title, year. */
.client-cards{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.client-card{position:relative;display:flex;flex-direction:column;min-height:196px;padding:20px 20px 18px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 24px rgba(30,73,160,.06);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.client-logo{height:44px;display:flex;align-items:center;margin-bottom:16px}.client-logo img{max-height:40px;max-width:150px;width:auto;height:auto;object-fit:contain}
.client-logo strong{font-size:15px;font-weight:800;color:var(--ink);line-height:1.3}
.client-tag{align-self:flex-start;padding:4px 10px;border-radius:999px;background:#eaf2ff;color:var(--blue);font-size:12px;font-weight:700}
.client-title{margin:10px 0 0;font-size:15px;font-weight:700;line-height:1.45;color:var(--ink);word-break:keep-all}
.client-year{margin-top:auto;padding-top:12px;font-family:Montserrat,'Noto Sans KR',sans-serif;font-weight:800;font-size:13px;color:#8aa0c4}
@media(hover:hover){.client-card:hover{transform:translateY(-4px);border-color:#c9d8f3;box-shadow:0 18px 34px rgba(30,73,160,.12)}}
@media(max-width:1000px){.client-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.client-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.client-card{min-height:170px;padding:14px;border-radius:14px}.client-title{font-size:13px}.client-logo{height:34px;margin-bottom:10px}.client-logo img{max-height:28px;max-width:110px}.client-logo strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.client-card:hover{transform:none}}

/* Online course page: four quiet link cards; only the accent colour differs. */
.course-cards{margin-top:72px}
.cc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cc{--cc:var(--blue);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:220px;padding:24px 22px 20px;border-radius:16px;background:var(--cc);color:#fff;text-decoration:none;box-shadow:0 14px 30px -18px var(--cc);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cc-local{--cc:#165dff}.cc-server{--cc:#0f2f6b}.cc-sns{--cc:#d6336c}.cc-ai{--cc:#6741d9}
.cc-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px;font-family:Montserrat,'Noto Sans KR',sans-serif;font-size:13px;font-weight:700}
.cc-no{display:inline-flex;align-items:center;gap:8px}.cc-no::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff}.cc-count{color:rgba(255,255,255,.85)}
.cc h3{margin:0 0 8px;font-size:19px;font-weight:800;line-height:1.35;word-break:keep-all}
.cc p{margin:0;color:rgba(255,255,255,.88);font-size:14px;line-height:1.6;word-break:keep-all}
.cc-go{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:14px;font-weight:700}
.cc-go svg{width:15px;height:15px;transition:transform .25s var(--ease)}
@media(hover:hover){.cc:hover{transform:translateY(-3px);box-shadow:0 22px 38px -18px var(--cc)}.cc:hover .cc-go svg{transform:translateX(3px)}}
.cc-mark{position:absolute;right:-12px;bottom:-20px;z-index:-1;width:104px;height:104px;fill:none;stroke:#fff;stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round;opacity:.16;transition:transform .5s var(--ease),opacity .5s var(--ease)}
@media(hover:hover){.cc:hover .cc-mark{opacity:.24;transform:rotate(-6deg) scale(1.04)}}
.cc:focus-visible{outline:3px solid var(--cc);outline-offset:3px}
@media(max-width:1000px){.cc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.course-cards{margin-top:52px}.cc-grid{grid-template-columns:1fr;gap:12px}.cc{min-height:0;padding:20px 18px 18px}.cc-top{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.cc,.cc-go svg,.cc-mark{transition:none}.cc:hover .cc-mark{transform:none}.cc:hover{transform:none}}
/* Mobile pass (2026-10-08): readable small copy, 44px footer targets, footer clears the to-top button. */
.footer-legal em{font-style:normal;white-space:nowrap}.sg-vision p,.sg-compare-head p,.sg-why .why-desc,.sg-vision-models .vm-desc{text-wrap:pretty}
@media(max-width:640px){.footer-legal em{display:block}.footer-legal i{display:none}}
@media(max-width:850px){.footer-links{row-gap:0}.footer-links a{min-height:44px;display:flex;align-items:center}.footer{padding-bottom:84px}}
@media(max-width:640px){.hero-footnote{font-size:12px!important}.tag,.pending-label,.service-choice small,.form-note,.activity-strip p,.member p,.yt-lists span,.sg-source,.sg-meta dt,.sg-progress li,.sg-qr figcaption,.client-tag,.toast,.scroll-note{font-size:12px}}
/* Contact: one form, inquiry type chosen in a select (user, 2026-10-08). */
.contact-single{max-width:780px;margin:0 auto 110px}body[data-page=contact] .page-intro{max-width:780px;margin-left:auto;margin-right:auto}
.field>.select-wrap{position:relative;display:block;font-size:inherit;font-weight:400}.select-wrap::after{content:"";position:absolute;right:17px;top:50%;width:8px;height:8px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-70%) rotate(45deg);pointer-events:none}.field select{appearance:none;-webkit-appearance:none;padding-right:44px;min-height:48px;color:var(--ink);cursor:pointer}.field select:focus{background:white;border-color:var(--blue);outline:none}
@media(max-width:640px){.contact-single{margin-bottom:65px}}
.field-error{color:#c42b1c;font-size:13px;font-weight:600;line-height:1.5}.field-error[hidden]{display:none}.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:#d93a2b;background:#fff6f5}
.inquiry-consent{margin:4px 0 6px}.inquiry-error{margin:6px 0 12px;color:#c42b1c;font-size:14px;font-weight:700}.inquiry-error[hidden]{display:none}.inquiry-form [type=submit]{margin-top:12px}.inquiry-popup{box-shadow:0 40px 90px rgba(7,22,60,.3)}.inquiry-popup::backdrop{background:rgba(7,22,60,.55)}.inquiry-popup .booklet-popup-icon{background:#eaf2ff;color:var(--blue)}.inquiry-popup .booklet-popup-icon.is-done{background:var(--blue);color:#fff}.inquiry-popup h2{color:var(--ink)}.inquiry-popup p{color:#35557e}.inquiry-popup .booklet-actions{justify-content:center;margin-top:18px}
.inquiry-consent{color:var(--muted)}.inquiry-consent input{accent-color:var(--blue)}.admin-inquiries{margin-top:56px}.admin-inquiries h2{font-family:Jua,sans-serif;font-weight:400;font-size:30px;margin:0 0 8px}.admin-message{white-space:pre-wrap;max-width:420px;word-break:keep-all}
.client-more-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.client-more-list li{display:flex;justify-content:space-between;gap:10px;font-size:15px;font-weight:700;line-height:1.45;color:var(--ink)}
@media(max-width:640px){.client-more-list{gap:8px}.client-more-list li{font-size:13px}}
/* SupGilDoGam booklet v1.3 (2026-10-11): hero slogan, paired story screens, AI 추천코스 NEW badge, 계절 layer phone */
.sg-slogan{display:block;font-size:17px;font-weight:800;color:#1d5f2c;letter-spacing:-.01em;margin:-4px 0 16px}
.sg-new{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:5px;background:#168239;color:#fff;font-style:normal;font-family:Montserrat,sans-serif;font-size:10px;font-weight:800;letter-spacing:.06em;vertical-align:2px}
.sg-stage-phone{transition:transform .6s var(--ease)}
.sg-stage[data-pair] .sg-stage-phone{z-index:1}
.sg-stage[data-pair="front"] .sg-stage-phone{transform:translateX(-30%) rotate(-3deg)}
.sg-stage[data-pair="back"] .sg-stage-phone{transform:translateX(-22%) rotate(-2deg)}
.sg-stage-phone2{--pw:min(236px,calc((100vh - 240px)*.36));position:absolute;left:44%;top:50%;z-index:2;opacity:0;visibility:hidden;transform:translate(10%,-42%) rotate(7deg);transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s linear .45s}
.sg-stage-phone2.is-back{z-index:0;left:46%}
.sg-stage-phone2.is-on{opacity:1;visibility:visible;transform:translate(0,-46%) rotate(4deg);transition-delay:0s}
.sg-stage-side{z-index:3}
.sg-step-pair{display:none}
.sg-data-art .ph-c{left:30%;top:16%;z-index:2;transform:rotate(-1deg)}
@media(max-width:1100px){
  .sg-step-pair{display:flex;align-items:flex-start;margin:0 0 26px}
  .sg-step-pair .sg-step-phone{margin:0;position:relative;z-index:1}
  .sg-step-pair .sg-step-phone.is-second{--pw:188px;margin:40px 0 0 -54px;z-index:2;transform:rotate(4deg)}
  .sg-step-pair.is-back .sg-step-phone.is-second{z-index:0;margin-left:-96px}
}
@media(max-width:640px){
  .sg-slogan{font-size:15px}
  .sg-step-pair .sg-step-phone.is-second{--pw:150px;margin-left:-60px}
  .sg-step-pair.is-back .sg-step-phone.is-second{margin-left:-84px}
}
/* With two phones per step the stage indicator moves from the right edge to a row along the bottom. */
.sg-stage-side{top:auto;bottom:20px;right:auto;left:50%;transform:translateX(-50%);flex-direction:row;align-items:center;gap:18px}
.sg-progress{display:flex;gap:14px}
.sg-progress li{justify-content:center}
.sg-stage-phone{--pw:min(272px,calc((100vh - 270px)*.42))}
.sg-stage[data-pair="front"] .sg-stage-phone{transform:translate(-26%,-4%) rotate(-3deg)}
.sg-stage[data-pair="back"] .sg-stage-phone{transform:translate(-20%,-4%) rotate(-2deg)}
.sg-stage-phone2{--pw:min(222px,calc((100vh - 270px)*.34));left:47%}
.sg-stage-phone2.is-on{transform:translate(0,-50%) rotate(4deg)}
.sg-progress li{white-space:nowrap;flex:none}
/* SupGil hero: third phone with the autoplaying 3D replay beside the splash and record screens. */
.ph-screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;background:#020403}
.ph-status.is-light{color:#fff}
.sg-hero-phone.is-back{--pw:226px;left:19%;top:44%;z-index:1}
.sg-hero-phone.is-front{--pw:252px;left:50%;top:53%;z-index:3}
.sg-hero-phone.is-video{--pw:236px;left:81%;top:46%;z-index:2;animation-delay:-5s}
@media(max-width:1100px){.sg-hero-phone.is-back{left:22%}.sg-hero-phone.is-video{left:78%}}
@media(max-width:640px){
  .sg-hero-phone.is-back{--pw:134px;left:20%}
  .sg-hero-phone.is-front{--pw:156px;left:50%}
  .sg-hero-phone.is-video{--pw:140px;left:80%}
}
/* spread the three hero phones; the replay video sits in front on the right */
.sg-hero-phone.is-back{--pw:208px;left:15%;top:45%;z-index:1}
.sg-hero-phone.is-front{--pw:232px;left:47%;top:52%;z-index:2}
.sg-hero-phone.is-video{--pw:240px;left:82%;top:47%;z-index:3}
@media(max-width:1100px){.sg-hero-phone.is-back{left:24%}.sg-hero-phone.is-front{left:50%}.sg-hero-phone.is-video{left:76%}}
@media(max-width:640px){
  .sg-hero-phone.is-back{--pw:128px;left:18%}
  .sg-hero-phone.is-front{--pw:146px;left:49%}
  .sg-hero-phone.is-video{--pw:150px;left:81%}
}
/* 03 산행 기록: the 실사 인증 photo card over the two phones */
.sg-stage-card{position:absolute;right:7%;bottom:17%;z-index:4;width:min(150px,calc((100vh - 270px)*.23));margin:0;border-radius:14px;overflow:hidden;border:5px solid #fff;box-shadow:0 26px 50px -18px rgba(10,40,20,.5);opacity:0;visibility:hidden;transform:translateY(16px) rotate(-3deg);transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s linear .45s}
.sg-stage-card.is-on{opacity:1;visibility:visible;transform:rotate(-3deg);transition-delay:.12s}
.sg-stage-card img{display:block;width:100%;height:auto}
.sg-step-card{display:none}
@media(max-width:1100px){
  .sg-step-pair{position:relative}
  .sg-step-card{display:block;position:absolute;z-index:3;right:0;bottom:-14px;width:120px;height:auto;border-radius:12px;border:4px solid #fff;box-shadow:0 18px 36px -14px rgba(10,40,20,.5);transform:rotate(-3deg)}
}
@media(max-width:640px){.sg-step-card{width:92px}}
/* data assets: three upright phones in a row, slightly overlapping (map · season · trail) */
.sg-data-art{height:auto;display:flex;justify-content:center;align-items:flex-start;padding:8px 0}
.sg-data-art .ph{--pw:204px;position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;flex:none}
.sg-data-art .ph-a{order:1;z-index:1}
.sg-data-art .ph-c{order:2;z-index:2;margin-left:-34px}
.sg-data-art .ph-b{order:3;z-index:1;margin-left:-34px}
@media(max-width:1100px){.sg-data-art .ph{--pw:220px}}
@media(max-width:640px){.sg-data-art .ph{--pw:128px}.sg-data-art .ph-c,.sg-data-art .ph-b{margin-left:-22px}}