:root{--navy:#092848;--navy-deep:#071e37;--blue:#0c4d91;--gold:#f4c877;--ink:#182b3f;--muted:#66788a;--surface:#f8f8f5;--border:#e7e9e8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"Noto Sans KR",Arial,sans-serif;-webkit-font-smoothing:antialiased;background:var(--surface)}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid #f2b94f;outline-offset:4px}
.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}
.skip-link{position:absolute;z-index:100;top:-60px;left:20px;padding:12px 18px;background:white;color:var(--navy);border-radius:8px}
.skip-link:focus{top:12px}
.container{width:min(100% - 72px,1320px);margin-inline:auto}
.hero-shell{overflow:hidden}
.hero-shell::before{content:"";position:absolute;inset:0 0 auto;height:770px;z-index:0;background:linear-gradient(90deg,rgba(4,23,43,.88) 0%,rgba(5,30,51,.76) 32%,rgba(7,37,56,.24) 72%,rgba(5,28,46,.10) 100%),linear-gradient(0deg,rgba(5,27,46,.65),transparent 40%),url('./assets/seongseo-main-gate-cinematic.png') center center/cover no-repeat}
.hero-shell::after{content:"";position:absolute;inset:0 0 auto;height:770px;pointer-events:none;z-index:0;background:linear-gradient(90deg,rgba(4,23,43,.88) 0%,rgba(5,30,51,.76) 32%,rgba(7,37,56,.24) 72%,rgba(5,28,46,.10) 100%),linear-gradient(0deg,rgba(5,27,46,.65),transparent 40%),radial-gradient(circle at 88% 12%,rgba(247,170,88,.38),transparent 41%),url('./assets/seongseo-main-gate.jpg') center 58%/auto 82% no-repeat;filter:sepia(.28) saturate(1.38) contrast(1.08);-webkit-mask-image:linear-gradient(to bottom,transparent 10%,#000 22%,#000 86%,transparent 96%);mask-image:linear-gradient(to bottom,transparent 10%,#000 22%,#000 86%,transparent 96%)}
.site-header{height:104px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20;border-bottom:1px solid rgba(255,255,255,.2)}
.brand{display:flex;align-items:center;gap:14px;color:white;min-width:0}
.brand-emblem{width:64px;height:34px;display:grid;place-items:center;flex:none}
.brand-emblem img{display:block;width:64px;height:auto;max-height:34px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(255,255,255,.3))}
.brand-name{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.brand-name strong{font-size:17px;font-weight:800;letter-spacing:-.035em}
.brand-name small{font:600 9px/1.3 "DM Sans",Arial,sans-serif;letter-spacing:.12em;color:rgba(255,255,255,.7)}
.primary-nav{display:flex;align-items:center;gap:46px;color:white;font-size:14px;font-weight:600}
.primary-nav>a:not(.nav-contact){transition:color .2s}
.primary-nav>a:not(.nav-contact):hover{color:var(--gold)}
.nav-contact{display:inline-flex;align-items:center;gap:17px;border:1px solid rgba(255,255,255,.52);border-radius:100px;padding:13px 20px;transition:background .2s,color .2s}
.nav-contact:hover{background:white;color:var(--navy)}
.nav-contact span[aria-hidden]{font-size:18px;line-height:1}
.menu-toggle{display:none}
.hero{height:666px;position:relative;z-index:1;color:white;display:flex;align-items:center}
.hero-copy{padding-bottom:35px;max-width:690px}
.eyebrow,.section-kicker{font:700 11px/1.5 "DM Sans",Arial,sans-serif;letter-spacing:.23em}
.eyebrow{display:flex;align-items:center;gap:14px;color:#ffdc9f;margin:0 0 27px}
.eyebrow-line{width:32px;height:1px;background:currentColor}
.hero h1{font-size:clamp(44px,4.2vw,63px);line-height:1.31;letter-spacing:-.082em;font-weight:800;margin:0;text-wrap:balance}
.hero h1>span:not(.period){color:#f5d18d}
.hero .period{color:#f5d18d}
.hero-description{font-size:17px;line-height:1.85;letter-spacing:-.03em;color:rgba(255,255,255,.84);margin:24px 0 32px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:25px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:31px;font-size:14px;font-weight:700;transition:transform .2s,background .2s,color .2s}
.button:hover{transform:translateY(-3px)}
.button-primary{background:#fff;color:var(--navy);border-radius:9px;padding:17px 21px 17px 24px;box-shadow:0 12px 35px rgba(0,0,0,.12)}
.button-primary:hover{background:#ffe0a8}
.button-primary span{font-size:19px;line-height:1}
.button-text{color:#fff;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.55);gap:13px}
.button-text:hover{color:#ffe0a8}
.hero-side-note{position:absolute;right:0;top:45%;display:flex;align-items:center;gap:14px;writing-mode:vertical-rl;font:600 10px "DM Sans",Arial,sans-serif;letter-spacing:.2em;color:rgba(255,255,255,.76)}
.hero-side-note i{width:1px;height:45px;background:rgba(255,255,255,.6)}
.hero-footer{position:absolute;left:0;right:0;bottom:123px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.68)}
.scroll-mark{font:600 10px "DM Sans",Arial,sans-serif;letter-spacing:.18em;display:flex;align-items:center;gap:12px}
.scroll-mark i{width:24px;height:38px;border:1px solid rgba(255,255,255,.55);border-radius:20px;display:inline-block;position:relative}
.scroll-mark i::after{content:"";position:absolute;width:3px;height:7px;background:white;border-radius:10px;left:10px;top:8px;animation:scrollDot 1.8s infinite}
@keyframes scrollDot{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:.35}}
.services-section{position:relative;z-index:3;margin-top:-94px;padding-bottom:112px;scroll-margin-top:22px}
.section-intro{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px;color:var(--ink)}
.section-kicker{color:#a16d22;margin:0 0 11px}
.section-intro h2,.guide-heading h2{font-size:clamp(27px,3vw,39px);font-weight:800;letter-spacing:-.065em;line-height:1.37;margin:0}
.section-intro>p{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 2px}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.service-card{min-height:370px;border-radius:16px;padding:24px 29px 25px;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(255,255,255,.72);box-shadow:0 21px 50px rgba(13,31,51,.13),0 2px 7px rgba(13,31,51,.04);transition:transform .25s,box-shadow .25s}
.service-card:hover{transform:translateY(-9px);box-shadow:0 27px 55px rgba(13,31,51,.18)}
.service-card:before{content:"";position:absolute;z-index:0;right:-24px;top:18px;width:57%;height:118%;border:8px solid rgba(255,255,255,.76);border-radius:26px;background:var(--card-screen) center top/100% auto no-repeat #fff;box-shadow:0 20px 42px rgba(30,61,81,.24);opacity:.24;filter:saturate(.75);transform:rotate(9deg);pointer-events:none}
.card-screen-mask{position:absolute;z-index:0;right:-24px;top:18px;width:57%;height:118%;border:8px solid transparent;border-radius:26px;overflow:hidden;transform:rotate(9deg);pointer-events:none}
.screen-image-geometry{display:block;position:relative;width:100%;aspect-ratio:395/867}
.screen-date-blur{position:absolute;display:block;z-index:1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.32);border-radius:3px}
.screen-date-scholarship{left:3%;top:24.3%;width:37%;height:3.1%}
.screen-date-calendar-update{left:59%;top:19.2%;width:40%;height:3.1%}
.screen-date-calendar-month{left:25%;top:27%;width:31%;height:4%}
.screen-date-breakfast-heading{left:22%;top:27.4%;width:56%;height:4%;background:rgba(237,240,250,.34)}
.screen-date-breakfast-today{left:43%;top:48.5%;width:14%;height:5%;background:rgba(237,240,250,.34)}
.service-card:after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-95px;bottom:-95px;border:34px solid rgba(255,255,255,.45);pointer-events:none}
.service-card-scholarship{--card-screen:url('./assets/service-scholarship-mobile.png?v=2');background:#eaf3fc;color:#16447d}
.service-card-calendar{--card-screen:url('./assets/service-calendar-mobile.png?v=2');background:#e8f6ee;color:#176c59}
.service-card-breakfast{--card-screen:url('./assets/service-breakfast-mobile.png?v=2');background:#fff1e6;color:#ac5b2c}
.card-top,.card-link{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.card-index{font:700 10px "DM Sans",Arial,sans-serif;letter-spacing:.18em;opacity:.68}
.card-arrow{width:32px;height:32px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:17px;opacity:.8;transition:transform .2s}
.service-card:hover .card-arrow{transform:rotate(45deg)}
.card-icon{width:65px;height:65px;margin:18px 0 19px;border-radius:16px;background:rgba(255,255,255,.86);display:grid;place-items:center;box-shadow:0 8px 21px rgba(50,77,91,.08)}
.card-icon svg{width:38px;height:38px}
.card-body{display:flex;flex-direction:column;align-items:start;position:relative;z-index:1}
.card-label{font-size:12px;font-weight:700;opacity:.75;margin-bottom:8px}
.card-body strong{font-size:30px;line-height:1.22;letter-spacing:-.065em;font-weight:800}
.card-description{font-size:13px;line-height:1.7;color:#42576a;margin-top:14px;max-width:280px;word-break:keep-all}
.card-link{margin-top:auto;padding-top:18px;border-top:1px solid rgba(38,73,90,.13);font-size:12px;font-weight:800}
.card-link span{font-size:20px;line-height:1;transition:transform .2s}
.service-card:hover .card-link span{transform:translateX(5px)}
.new-window-note{text-align:right;margin:15px 3px 0;color:#84909b;font-size:11px}
.guide-section{background:#fff;padding:110px 0 125px;scroll-margin-top:0}
.guide-heading{text-align:center;margin-bottom:54px}
.guide-heading h2 span{color:#9babc1}
.guide-heading>p:last-child{margin:15px 0 0;font-size:14px;color:var(--muted);line-height:1.8}
.guide-interface{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.4fr);gap:25px;align-items:stretch}
.guide-tabs{display:flex;flex-direction:column;gap:13px}
.guide-tab{border:1px solid #e7ebed;background:#f8fafb;color:#546779;border-radius:14px;min-height:90px;padding:19px 21px;text-align:left;display:flex;align-items:center;gap:16px;font-size:15px;font-weight:700;letter-spacing:-.035em;cursor:pointer;transition:background .2s,border-color .2s,transform .2s,color .2s}
.guide-tab:hover{transform:translateX(4px);background:#f0f5f8}
.guide-tab[aria-selected=true]{background:#0b3158;color:white;border-color:#0b3158;box-shadow:0 12px 25px rgba(9,40,72,.17)}
.guide-tab>span:first-child{font:700 13px "DM Sans",Arial,sans-serif;opacity:.55}
.tab-arrow{margin-left:auto;font-size:20px;opacity:.75}
.guide-panels{min-width:0}
.guide-panel{min-height:297px;height:100%;border-radius:18px;background:#edf5fc;position:relative;overflow:hidden;display:grid;grid-template-columns:.82fr 1fr;align-items:center;gap:15px;padding:33px 42px;color:#133f70}
.guide-panel[hidden]{display:none}
.panel-calendar{background:#e9f5ef;color:#116451}
.panel-breakfast{background:#fff2e7;color:#9d4d29}
.panel-number{position:absolute;top:28px;right:32px;font:700 11px "DM Sans",Arial,sans-serif;letter-spacing:.17em;opacity:.55}
.panel-visual{height:220px;position:relative;display:grid;place-items:center}
.visual-orbit{width:170px;height:170px;border:1px solid rgba(16,80,143,.25);border-radius:50%;display:grid;place-items:center;position:relative}
.visual-orbit:before,.visual-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(16,80,143,.17)}
.visual-orbit:before{inset:19px}.visual-orbit:after{inset:38px}
.visual-cap{font-size:56px;position:relative;z-index:1;color:#286eac;text-shadow:0 10px 25px rgba(20,70,120,.19)}
.visual-mini{position:absolute;z-index:2;background:white;border-radius:100px;padding:8px 13px;box-shadow:0 7px 15px rgba(15,50,85,.12);font-size:11px;font-weight:800}
.mini-one{top:10px;left:0}.mini-two{right:0;top:82px}.mini-three{bottom:8px;left:20px}
.panel-copy{position:relative;z-index:1;padding-right:5px}
.panel-copy>p{font:700 10px "DM Sans",Arial,sans-serif;letter-spacing:.18em;opacity:.7;margin:0 0 13px}
.panel-copy h3{font-size:26px;line-height:1.43;letter-spacing:-.07em;margin:0 0 15px;font-weight:800}
.panel-copy>span{display:block;color:#526779;line-height:1.75;font-size:13px;max-width:310px}
.panel-copy>a{display:inline-flex;gap:16px;align-items:center;margin-top:22px;font-size:12px;font-weight:800;padding-bottom:6px;border-bottom:1px solid currentColor}
.panel-copy>a span[aria-hidden]{font-size:16px}
.mini-calendar{width:188px;height:187px;background:white;border-radius:16px;box-shadow:0 14px 27px rgba(31,104,79,.14);overflow:hidden;transform:rotate(-5deg)}
.mini-calendar-top{height:39px;background:#18745d;display:flex;gap:7px;align-items:center;padding-left:15px}
.mini-calendar-top i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7)}
.mini-calendar-grid{padding:13px;display:grid;grid-template-columns:repeat(5,1fr);gap:9px 5px;text-align:center;align-items:center}
.mini-calendar-grid span{font:700 6px "DM Sans",Arial,sans-serif;color:#8da39a}
.mini-calendar-grid b{font:700 11px "DM Sans",Arial,sans-serif;color:#668278;padding:5px 0}
.mini-calendar-grid .marked{background:#bee7d6;color:#13745d;border-radius:6px}.mini-calendar-grid .second{background:#fce5ba;color:#a36b1d}
.breakfast-sun{width:158px;height:158px;border-radius:50%;background:#ffd9ad;box-shadow:0 0 0 20px rgba(255,223,190,.44)}
.breakfast-bowl{position:absolute;width:150px;height:68px;border-radius:0 0 80px 80px;background:#de784e;top:123px;box-shadow:inset 0 -14px 0 rgba(144,66,48,.16),0 15px 17px rgba(168,79,46,.16)}
.breakfast-bowl:before{content:"";position:absolute;left:-6px;right:-6px;top:-7px;height:18px;border-radius:50%;background:#e9a37d}
.breakfast-steam{position:absolute;width:11px;height:37px;border:3px solid rgba(143,76,46,.58);border-right:0;border-bottom:0;border-radius:50%;top:-55px}.steam-one{left:39px}.steam-two{left:74px;top:-65px}.steam-three{left:107px}
.live-pill{position:absolute;right:5px;top:21px;background:#fff;border-radius:100px;box-shadow:0 8px 20px rgba(167,70,39,.12);padding:8px 12px;font:800 10px "DM Sans",Arial,sans-serif;letter-spacing:.08em;display:flex;align-items:center;gap:6px}
.live-pill i{height:6px;width:6px;border-radius:50%;background:#dc6849}
.site-footer{background:var(--navy-deep);color:#fff;padding:63px 0 27px}
.footer-main{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:66px}
.footer-mark{font-size:28px;font-weight:800;line-height:1.2;letter-spacing:-.06em}
.footer-main p{font-size:23px;font-weight:700;letter-spacing:-.06em;line-height:1.5;margin:20px 0 0}
.footer-highlight{color:#f5d18d}
.footer-links{display:flex;flex-direction:column;align-items:end;gap:15px;font-size:13px;color:rgba(255,255,255,.79)}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.17);padding-top:21px;color:rgba(255,255,255,.53);font-size:11px;line-height:1.6}
@media(min-width:761px){.hero-footer{justify-content:flex-end;padding-right:52px}.scroll-mark{display:none}}
@media(max-width:1050px){.container{width:min(100% - 50px,1320px)}.primary-nav{gap:22px}.hero h1{font-size:56px}.guide-panel{padding:32px 26px}.panel-copy h3{font-size:23px}.guide-interface{grid-template-columns:minmax(270px,.75fr) minmax(0,1.4fr)}.card-body strong{font-size:27px}.service-card{padding:22px;min-height:380px}}
@media(max-width:760px){.container{width:min(100% - 38px,520px)}.hero-shell::before,.hero-shell::after{height:720px}.hero-shell::before{background:linear-gradient(90deg,rgba(5,24,43,.80),rgba(5,31,48,.47)),linear-gradient(0deg,rgba(5,27,46,.75),transparent 50%),url('./assets/seongseo-main-gate-cinematic.png') center center/cover no-repeat}.site-header{height:78px}.brand{gap:9px}.brand-emblem{height:44px;width:44px;border-radius:10px}.brand-emblem img{width:38px}.brand-name strong{font-size:13px}.brand-name small{font-size:7px;letter-spacing:.08em}.menu-toggle{display:flex;width:43px;height:43px;border:1px solid rgba(255,255,255,.6);border-radius:9px;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:white;cursor:pointer}.menu-toggle span{width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-7px) rotate(-45deg)}.primary-nav{display:none;position:absolute;left:0;right:0;top:85px;padding:18px;background:#fff;color:var(--navy);border-radius:15px;box-shadow:0 16px 30px rgba(0,0,0,.25);flex-direction:column;align-items:stretch;gap:0}.primary-nav.is-open{display:flex}.primary-nav>a{padding:14px 10px}.nav-contact{justify-content:space-between;border-color:#d5dce3;margin-top:8px}.hero{height:625px;align-items:flex-start;padding-top:96px}.hero-copy{padding:0}.eyebrow{font-size:9px;letter-spacing:.15em;margin-bottom:24px}.hero h1{font-size:clamp(37px,9vw,54px);line-height:1.28}.hero-description{font-size:13px;line-height:1.8;margin:21px 0 26px}.desktop-break{display:none}.hero-actions{gap:16px}.button-primary{padding:14px 17px;font-size:12px;gap:22px}.button-text{font-size:11px}.hero-side-note{display:none}.hero-footer{bottom:94px;font-size:10px}.scroll-mark{font-size:8px}.scroll-mark i{height:30px;width:19px}.scroll-mark i::after{left:7px}.services-section{margin-top:-55px;padding-bottom:75px}.service-grid{grid-template-columns:1fr;gap:13px}.service-card{min-height:210px;padding:19px 21px;display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto 1fr auto;column-gap:12px}.card-top{grid-column:1/-1}.card-icon{grid-column:1;grid-row:2;margin:20px 0 0;width:58px;height:58px}.card-icon svg{width:34px;height:34px}.card-body{grid-column:2;grid-row:2;padding-top:16px}.card-label{font-size:11px;margin-bottom:4px}.card-body strong{font-size:24px}.card-body strong br{display:none}.card-description{font-size:11px;margin-top:8px;max-width:250px}.card-link{grid-column:1/-1;grid-row:3;margin-top:19px;padding-top:12px}.new-window-note{font-size:10px}.guide-section{padding:77px 0 83px}.guide-heading{margin-bottom:30px}.guide-heading h2{font-size:30px}.guide-heading>p:last-child{font-size:12px}.guide-interface{display:block}.guide-tabs{gap:8px}.guide-tab{min-height:62px;font-size:13px;padding:13px 15px}.guide-panels{margin-top:14px}.guide-panel{min-height:390px;grid-template-columns:1fr;gap:0;padding:25px;align-content:start}.panel-number{top:23px;right:22px}.panel-visual{height:177px}.visual-orbit{width:135px;height:135px}.visual-cap{font-size:48px}.visual-mini{font-size:9px}.mini-one{top:4px;left:14%}.mini-two{right:11%;top:75px}.mini-three{bottom:2px;left:23%}.mini-calendar{transform:rotate(-5deg) scale(.82)}.breakfast-sun{transform:scale(.82)}.breakfast-bowl{transform:scale(.82);top:95px}.panel-copy>p{font-size:9px}.panel-copy h3{font-size:22px;margin-bottom:9px}.panel-copy>span{font-size:11px}.panel-copy>a{margin-top:15px}.site-footer{padding-top:48px}.footer-main{padding-bottom:44px}.footer-main p{font-size:20px}.footer-links{font-size:11px}.footer-bottom{align-items:start;flex-direction:column;gap:5px;font-size:10px}}
@media(max-width:760px){.brand-emblem{width:52px;height:28px;border-radius:0}.brand-emblem img{width:52px;max-height:28px}.service-card:before{right:-20px;top:-12px;width:48%;height:150%;border-width:6px;border-radius:21px;opacity:.14;transform:rotate(8deg)}.card-screen-mask{right:-20px;top:-12px;width:48%;height:150%;border-width:6px;border-radius:21px;transform:rotate(8deg)}}
@media(max-width:760px){.footer-main{flex-direction:column;gap:30px}.footer-mark{font-size:23px}.footer-links{align-items:flex-start}}
@media(max-width:390px){.brand-name strong{font-size:11px}.brand-name small{font-size:6px}.hero h1{font-size:38px}.hero-actions{gap:9px}.button-text{font-size:10px}.service-card{grid-template-columns:63px 1fr;column-gap:8px}.card-description{font-size:10px}}
@media(max-width:350px){.hero-actions{flex-wrap:nowrap;gap:8px}.button-primary{padding:12px 10px;font-size:11px;gap:14px;white-space:nowrap}.button-text{gap:7px;font-size:11px;white-space:nowrap}.hero-footer{color:#fff;text-shadow:0 2px 6px #001628}.hero-footer>span:last-child{background:rgba(7,30,55,.75);padding:5px 7px;border-radius:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}