/* 학교알리미 — a moving noticeboard, cobalt / acid lime / warm white. */
:root{--ink:#20233b;--green:#4d54e8;--green-dark:#353cc3;--muted:#858699;--line:#e6e6ee;--bg:#f6f6fa;--mint:#edeeff;--lime:#dfff7e;--ease-out:cubic-bezier(.16,1,.3,1)}
body{background:var(--bg);color:var(--ink)}
.sidebar{background:#fff;padding-top:30px;width:250px}.brand{font-size:23px;gap:9px;letter-spacing:-1.5px}.brand-icon{background:var(--ink);border-radius:11px;font-size:29px;width:37px;height:37px;line-height:34px;color:var(--lime);flex-shrink:0}.brand-word{display:inline-flex;gap:1px;white-space:nowrap}.brand-word>span{font-weight:500}.brand-dot{color:var(--green);margin-left:-6px}.brand-sub{margin-top:12px;font-size:10px;color:#9393a5;letter-spacing:0}.class-chip{background:#f5f5fa;border-color:#eaeaf2}.class-avatar{background:#e5e5fb;color:var(--green)}.class-chip small,.profile small{color:#8c8d9f}.nav-label{color:#aaaabc}.nav-item{color:#858597;padding-block:15px;transition:background .25s,color .25s,transform .25s}.nav-item.active{background:#eeeefe;color:var(--green)}.nav-item.active>span{color:var(--green)}.nav-item:hover{transform:translateX(3px)}.nav-item i{background:#dbdcfb;color:var(--green)}.sidebar-note{background:#f2f2fa;border-radius:16px;padding:20px 16px;margin: auto 0 24px;overflow:hidden;position:relative}.sidebar-note>span{color:var(--green);position:absolute;right:8px;top:10px;font-size:65px;opacity:.12;animation:star-turn 24s linear infinite}.sidebar-note b{color:#626482;font-size:14px}.sidebar-note p{color:#9697ad;font-size:9px}.profile-avatar{background:var(--lime);color:#53612f}.topbar{background:#fff9}.topbar b{color:#67677d}.page{padding-top:35px}.page-heading{margin-bottom:24px}.eyebrow{color:var(--green);font-weight:800;letter-spacing:2.5px;font-size:9px}.page-heading h1{font-size:30px;letter-spacing:-1.6px;color:#24263d}.page-heading p{color:#9191a4}.page-heading .primary{border-radius:10px;box-shadow:0 5px 14px #4d54e81a}.primary,.secondary{transition:background .2s,transform .2s,box-shadow .2s}.primary:hover{transform:translateY(-2px);box-shadow:0 7px 18px #4d54e82a}.primary:active,.secondary:active{transform:scale(.97)}.secondary{border-color:#dfdfed}.secondary:hover{background:#f1f1fb}.icon-btn:hover{background:#ededf9}.text-btn{color:#77799c}.demo-banner{background:#f0f0fd;border-color:#e1e1f6;color:#8282a5;border-radius:11px;padding:11px 14px}.demo-banner>span{color:#7e7ed3}.demo-banner button{color:#6265c7}.demo-pill{background:#f6f5ff;border-color:#e5e3f5;color:#8881b2}.motion-toggle{display:inline-flex;align-items:center;gap:7px;font-size:10px;color:#7b7c94;white-space:nowrap;padding:7px 9px;border:1px solid #ececf3;border-radius:6px;background:#fff}.motion-status{width:5px;height:5px;background:#7174ec;border-radius:50%;box-shadow:0 0 0 3px #ededff;animation:status-pulse 2.5s ease-in-out infinite}.motion-toggle[aria-pressed=false] .motion-status{background:#aaa;box-shadow:none;animation:none}.hero{height:320px;background:#292e79;border-radius:20px;padding:34px 36px;isolation:isolate;border:1px solid #3b418d;box-shadow:0 12px 30px #24264c0a}.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 85% 40%,#545ec079,transparent 65%),linear-gradient(120deg,#25296c,#30367f)}.hero:after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.13' d='M0 0h180v180H0z'/%3E%3C/svg%3E");opacity:.2;pointer-events:none;z-index:-1}.hero-copy{max-width:58%;animation:copy-arrive .9s var(--ease-out) both}.hero-tag{color:#c7c9ff;letter-spacing:2px;font-size:8px;display:flex;align-items:center;gap:9px}.live-dot{width:5px;height:5px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 4px #dfff7e17;animation:status-pulse 2.5s ease-in-out infinite}.hero h2{font-size:32px;color:white;font-weight:600;line-height:1.6;letter-spacing:-1.5px;margin:18px 0 11px}.hero-emphasis{color:var(--lime);font-weight:800}.hero-period{color:white}.hero-copy>p{color:#b0b6e0;font-size:11px;line-height:1.9}.hero-link{background:#ffffff0a;border:1px solid #ffffff30;color:white;border-radius:8px;padding:10px 13px;margin-top:15px;font-size:10px;transition:background .25s,transform .25s}.hero-link:hover{background:#ffffff20;transform:translateX(4px)}.hero-link span{color:var(--lime);margin-left:20px;font-size:14px}.motion-stage{position:absolute;right:2%;top:0;width:40%;height:100%;perspective:800px;pointer-events:none}.stage-grid{position:absolute;width:110%;height:95%;top:4%;left:0;background-image:linear-gradient(#b3baff09 1px,transparent 1px),linear-gradient(90deg,#b3baff09 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse,black 30%,transparent 70%);transform:rotate(-12deg)}.orbit{position:absolute;top:50%;left:50%;border:1px solid #c5caff25;border-radius:50%;transform:translate(-50%,-50%) rotate(-22deg);width:260px;height:200px}.orbit-two{width:310px;height:250px;border-style:dashed;border-color:#c5caff14;transform:translate(-50%,-50%) rotate(25deg)}.orbit-traveler{position:absolute;top:50%;left:50%;width:260px;height:260px;margin:-130px;border-radius:50%;animation:orbit-spin 24s linear infinite}.orbit-traveler i{position:absolute;left:50%;top:0;width:6px;height:6px;background:#dfff7e;border-radius:50%;box-shadow:0 0 12px #dfff7e66}.bell-scene{position:absolute;left:50%;top:50%;width:165px;height:220px;transform:translate(-50%,-50%);animation:bell-float 6s ease-in-out infinite}.bell-halo{position:absolute;width:170px;height:170px;top:20px;left:0;border-radius:50%;background:#dfff7e0b;box-shadow:0 0 55px #dfff7e09}.hero-bell{width:165px;height:180px;position:absolute;top:7px;left:0;filter:drop-shadow(6px 13px 9px #171b4c55);transform-origin:50% 15%;animation:bell-ring 7s ease-in-out infinite}.bell-shadow{position:absolute;width:90px;height:13px;background:#11184f40;filter:blur(7px);border-radius:50%;bottom:9px;left:39px;animation:shadow-breathe 6s ease-in-out infinite}.float-label{position:absolute;background:#fff;box-shadow:0 8px 20px #161b5420;display:flex;align-items:center;gap:9px;border-radius:11px;padding:11px 13px;z-index:2}.float-deadline{left:-10px;top:54px;transform:rotate(-7deg);animation:float-left 7s ease-in-out infinite}.float-icon{background:#ededff;color:var(--green);width:28px;height:28px;display:grid;place-items:center;border-radius:8px;font-size:19px}.float-label small{display:block;font-size:6px;letter-spacing:1.5px;color:#9c9cbb;margin-bottom:3px}.float-label b{font-size:9px;color:#51546d;font-weight:700}.float-dot{width:5px;height:5px;background:var(--green);border-radius:50%;margin-left:5px}.float-check{right:-3px;bottom:53px;transform:rotate(8deg);animation:float-right 6s ease-in-out infinite;font-size:10px;color:#4f5853;padding:10px 14px;gap:8px;background:#effbd6}.float-check>span{width:19px;height:19px;display:grid;place-items:center;background:#d4eba4;color:#5b7832;border-radius:50%;font-weight:700}.motion-star{position:absolute;color:var(--lime);line-height:1}.star-one{right:27px;top:30px;font-size:31px;animation:star-turn 22s linear infinite}.star-two{left:14px;bottom:46px;font-size:20px;color:#9098e0;animation:star-turn 20s linear infinite reverse}.motion-point{position:absolute;border-radius:50%;background:#9aa1e1}.point-one{width:5px;height:5px;top:34px;left:62px}.point-two{width:4px;height:4px;bottom:35px;right:60px}.stage-caption{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:6px;letter-spacing:2px;color:#8d94ce;white-space:nowrap}.motion-strip{margin:16px 0 0;border-block:1px solid #e1e2eb;padding:9px 0;overflow:hidden;user-select:none;mask-image:linear-gradient(90deg,transparent,black 5%,black 95%,transparent)}.strip-track{width:max-content;display:flex;align-items:center;gap:35px;animation:marquee 40s linear infinite;font-size:8px;letter-spacing:1.7px;color:#9898ac;font-weight:600}.strip-track i{font-style:normal;color:#7c80d4;font-size:13px}.stats{margin-top:20px;gap:15px}.stats>div{border-radius:13px;padding:19px;transition:transform .3s,box-shadow .3s}.stats>div:hover{transform:translateY(-3px);box-shadow:0 6px 14px #33366608}.stats>div:nth-child(1){animation:copy-arrive .7s .1s var(--ease-out) backwards}.stats>div:nth-child(2){animation:copy-arrive .7s .18s var(--ease-out) backwards}.stats>div:nth-child(3){animation:copy-arrive .7s .26s var(--ease-out) backwards}.stats b{color:#313451}.stats p{color:#9393a7}.mint{background:#eeedff;color:#7777d4}.peach{background:#f1f6e4;color:#90a456}.lavender{background:#fbece7;color:#cd967e}.section-title h2{color:#33364e}.section-title h2>span{color:#8e8fbb}.filters button{color:#9393a5;transition:background .25s,color .25s}.filters button.selected{background:#eaeafd;color:#6265ca}.search input::placeholder{color:#aaaabc}.notice-card{border-color:#e5e5ef;border-radius:14px;padding:22px;animation:card-arrive .55s var(--ease-out) backwards;transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s}.notice-card:nth-child(2){animation-delay:.06s}.notice-card:nth-child(3){animation-delay:.12s}.notice-card:nth-child(4){animation-delay:.18s}.notice-card:nth-child(n+5){animation-delay:.22s}.notice-card:hover{transform:translateY(-5px);border-color:#c0c1f4;box-shadow:0 12px 25px #383d850c}.notice-card h3{color:#35374d}.notice-card .snippet{color:#9696a7}.card-bottom{border-color:#eeeef5;color:#9a9aaa}.done-button{border-color:#e7e7f0;color:#9292a8;transition:background .2s,color .2s,transform .2s}.done-button:hover{background:#f2f2fc}.done-button:active{transform:scale(.94)}.done-button.checked{background:#efefff;border-color:#dfdff7;color:#7878c9}.subject-tag{background:#edeeff;color:#8282bb}.subject-tag.math{background:#f4edfa;color:#a58abb}.subject-tag.english{background:#fff1df;color:#c09e67}.subject-tag.science{background:#eaf5ed;color:#82a78c}.subject-tag.social{background:#fcecf0;color:#c18a9b}.subject-tag.other{background:#eeeef3;color:#9797aa}.due-badge{background:#f1f2fb;color:#9194b3}.due-badge.urgent{background:#f0f6d9;color:#8a9f45}.due-badge.overdue{background:#fff0ed;color:#cd958a}.detail-note{background:#f1f1fc;color:#9595b7}.detail-body{color:#7e8097}.muted,.hint{color:#9393a6}.instruction{border-color:#e4e4fb}.calendar-event{background:#ededfd;color:#8585b9}.calendar-day:hover{background:#f4f4ff}.calendar-day.selected{background:#efefff;box-shadow:inset 0 0 0 2px #b9baf0}.calendar-day.blank{background:#fafafe}.day-label{background:#f3f3fa;color:#9393ad}.calendar-day{border-color:#eeeef5}.empty{color:#9294b8;border-color:#d8d8ec}.setting-card{border-color:#e5e5ef}.setting-card>p,.instruction p{color:#9393aa}input,select,textarea{border-color:#e1e1ee;background:#fdfdff}input:focus,select:focus,textarea:focus{border-color:#a0a2ed;box-shadow:0 0 0 3px #efefff}dialog{box-shadow:0 24px 100px #22244625}dialog[open]{animation:dialog-arrive .35s var(--ease-out)}dialog::backdrop{background:#24264455}footer{color:#a2a2b7}.footer-logo{color:#8183b6}.mobile-nav{border-color:#e6e6ef}.mobile-nav button{color:#aaaabc}.mobile-nav .active{color:var(--green)}#toast{background:#343976;box-shadow:0 7px 30px #24275520}.motion-celebrate{position:fixed;z-index:100;width:9px;height:9px;border-radius:2px;pointer-events:none;background:var(--lime);animation:confetti .7s cubic-bezier(.1,.7,.2,1) forwards}.motion-celebrate:nth-child(even){background:#8b8ef4;border-radius:50%}
@keyframes bell-float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-54%)}}
@keyframes bell-ring{0%,12%,100%{transform:rotate(-8deg)}3%,9%{transform:rotate(7deg)}6%{transform:rotate(-16deg)}50%{transform:rotate(-3deg)}}
@keyframes float-left{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-8px) rotate(-3deg)}}
@keyframes float-right{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(7px) rotate(3deg)}}
@keyframes orbit-spin{to{transform:rotate(360deg)}}@keyframes star-turn{to{transform:rotate(360deg)}}
@keyframes shadow-breathe{50%{transform:scaleX(.85);opacity:.6}}@keyframes status-pulse{50%{opacity:.5}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes copy-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-arrive{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(15px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes confetti{to{transform:translate(var(--dx),var(--dy)) rotate(var(--turn));opacity:0}}
/* Explicit pause and OS preference both keep every screen usable and visible. */
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion-suspended] *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:1500px){.hero{height:340px}.hero h2{font-size:36px}.motion-stage{right:4%;width:39%}}
@media(max-width:1150px){.sidebar{width:220px}.brand{font-size:21px;gap:7px}.brand-icon{width:33px;height:33px;line-height:30px}.hero{padding:30px}.hero h2{font-size:27px}.hero-copy{max-width:64%}.motion-stage{right:0;width:39%;transform:scale(.88);transform-origin:center}.float-deadline{left:-24px}.float-check{right:-15px}.stats>div{padding:17px 13px}.hero-copy>p{max-width:240px}.topbar>div{gap:12px}}
@media(max-width:880px){.sidebar{width:190px}.brand{font-size:19px;gap:6px}.brand-word{gap:0}.brand-dot{margin-left:-4px}.brand-icon{width:28px;height:30px;font-size:25px}.brand-sub{font-size:9px}.hero{height:310px;padding:25px}.hero h2{font-size:25px}.hero-copy{max-width:68%}.motion-stage{width:43%;right:-6%;transform:scale(.7)}.float-deadline{left:-55px;top:26px}.float-check{right:-50px;bottom:35px}.hero-tag{font-size:6px;letter-spacing:1.5px}.hero-copy>p{max-width:195px;font-size:10px}.stats>div{padding:15px 10px}.motion-toggle{font-size:9px;padding:6px}.topbar>div{gap:7px}.demo-pill{font-size:9px}}
@media(max-width:650px){.hero{height:390px;padding:25px 25px 170px;border-radius:18px;align-items:flex-start}.hero-copy{max-width:100%}.hero h2{font-size:29px;margin:15px 0 9px;line-height:1.5}.hero-tag{font-size:7px;letter-spacing:1.6px}.hero-copy>p{max-width:100%;font-size:10px}.hero-link{padding:8px 11px;margin-top:9px;font-size:9px}.motion-stage{height:215px;width:290px;top:auto;bottom:-13px;right:-3px;transform:scale(.8);transform-origin:bottom right}.orbit{width:265px;height:155px}.orbit-two{width:310px;height:210px}.orbit-traveler{width:195px;height:195px;margin:-97.5px}.bell-scene{transform:translate(-50%,-50%);width:145px;height:190px;animation-name:bell-float}.hero-bell{width:140px;height:155px;top:0}.bell-halo{width:140px;height:140px}.bell-shadow{bottom:7px;left:25px}.float-deadline{top:28px;left:-47px;padding:9px 11px;transform:rotate(-7deg)}.float-check{bottom:33px;right:8px}.star-one{top:6px;right:8px;font-size:27px}.star-two{bottom:24px;left:-8px}.point-one{top:4px;left:48px}.stage-caption{font-size:6px;bottom:5px}.motion-strip{padding:8px 0;margin-top:12px}.strip-track{font-size:7px;gap:25px;letter-spacing:1.4px}.stats{margin-top:17px;gap:8px}.stats>div{padding:14px 11px}.page-heading h1{font-size:25px}.page{padding-top:25px}.motion-toggle{font-size:8px;padding:6px 7px;gap:6px}.topbar>div{gap:7px}.topbar .demo-pill{font-size:8px;padding:4px 6px}.topbar{padding:0 17px;font-size:9px}.crumb{margin:0 6px}.topbar>div>.icon-btn{display:none}.notice-card{padding:21px}.sidebar{display:none}}
@media(max-width:370px){.hero h2{font-size:26px}.hero{height:390px;padding-inline:21px}.motion-stage{right:-18px;transform:scale(.75)}.topbar .demo-pill{display:none}}
.demo-banner #refreshNotices{display:inline-flex;white-space:nowrap;flex-shrink:0}