:root{
  --blue:#1268D6;
  --blue-2:#30A1F2;
  --navy:#12345B;
  --ink:#12243a;
  --muted:#62758d;
  --sky:#F1F8FF;
  --mint:#EAFBF8;
  --yellow:#FFD84D;
  --line:#dbe7f2;
  --white:#fff;
  --max:1280px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Pretendard,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.topbar{background:#f3f8fd;border-bottom:1px solid #e6eef6;color:#5f748c;font-size:12px}.topbar-inner{height:32px;display:flex;align-items:center;justify-content:space-between}.topbar p{margin:0}.utility{display:flex;gap:18px}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);z-index:20;border-bottom:1px solid rgba(9,42,82,.08)}

/* 2026-09-09 메인 배너 92단계 — 홈 데스크톱 메뉴를 배너 구조 내부로 통합 */
@media (min-width:681px){
  .home-mobile-header{display:none;}
  .home-banner-header{
    position:absolute;
    z-index:12;
    left:0;right:0;top:0;
    height:104px;
    background:transparent;
  }
  .home-banner-header::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(1,10,27,.34) 0%,rgba(1,10,27,.13) 60%,rgba(1,10,27,0) 100%);
  }
  .home-banner-nav-wrap{
    height:104px;
    display:flex;
    align-items:center;
    gap:30px;
  }
  .home-banner-brand{
    flex:0 0 auto;
    display:flex;
    align-items:center;
  }
  .home-banner-logo{
    width:224px;
    height:auto;
    max-height:54px;
    object-fit:contain;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.18));
  }
  .home-banner-nav{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:31px;
    color:#fff;
    font-size:15px;
    font-weight:750;
    letter-spacing:-.015em;
  }
  .home-banner-nav>a,
  .home-banner-nav>.nav-item>a{
    position:relative;
    height:104px;
    display:flex;
    align-items:center;
    padding:0;
    color:rgba(255,255,255,.96);
    white-space:nowrap;
    text-shadow:0 1px 8px rgba(0,0,0,.22);
  }
  .home-banner-nav>a::after,
  .home-banner-nav>.nav-item>a::after{
    content:"";
    position:absolute;
    left:0;right:100%;bottom:29px;
    height:2px;
    background:#9EEAC3;
    transition:right .2s ease;
  }
  .home-banner-nav>a:hover,
  .home-banner-nav>.nav-item>a:hover{color:#DDF7E8;}
  .home-banner-nav>a:hover::after,
  .home-banner-nav>.nav-item>a:hover::after{right:0;}
  .home-banner-nav .submenu{top:calc(100% - 18px);}
  .home-banner-nav .submenu a{color:#294b63!important;text-shadow:none!important;}
  .home-banner-management{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:13px 18px;
    border-radius:999px;
    background:#050505;
    color:#45e38a;
    border:1px solid rgba(255,79,216,.34);
    font-size:13px;
    font-weight:850;
    white-space:nowrap;
    box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 7px rgba(255,79,216,.10);
    text-shadow:0 0 1px rgba(255,79,216,.95),0 0 3px rgba(255,79,216,.38);
  }
}
@media (max-width:1180px) and (min-width:681px){
  .home-banner-logo{width:190px;max-height:46px;}
  .home-banner-nav{gap:19px;font-size:13px;}
  .home-banner-nav-wrap{gap:20px;}
}
@media (max-width:680px){
  .home-banner-header{display:none;}
  .home-mobile-header{display:block;}
}
.nav-wrap{height:94px;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;color:var(--navy);white-space:nowrap}.brand-mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),#53b6ff);color:#fff;font-size:15px}
.main-nav{display:flex;align-items:center;justify-content:flex-end;flex:1 1 auto;gap:30px;margin-left:auto;font-size:15px;font-weight:700;color:#27415f}.main-nav a{padding:37px 0;position:relative}.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:28px;height:2px;background:var(--blue-2);transition:.2s}.main-nav a:hover::after,.main-nav .nav-emphasis::after{right:0}.header-cta{background:var(--blue);color:#fff;padding:13px 18px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap;flex:0 0 auto}.mobile-toggle{display:none;margin-left:auto;background:none;border:0;font-size:24px}

.hero{position:relative;min-height:620px;overflow:hidden;background:linear-gradient(135deg,#F8FBFD 0%,#F2F7FA 56%,#EAF2F7 100%)}.hero-media{position:absolute;inset:0;display:flex;justify-content:flex-end;align-items:stretch;background:transparent}.hero-media img{width:auto;height:100%;min-width:980px;object-fit:contain;object-position:right center;display:block;flex:0 0 auto}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,251,253,.98) 0%,rgba(248,251,253,.96) 34%,rgba(242,247,250,.82) 47%,rgba(234,242,247,.38) 58%,rgba(234,242,247,.05) 70%,rgba(234,242,247,0) 100%)}
.hero-content{position:relative;z-index:2;min-height:620px;display:flex;align-items:center;justify-content:space-between;color:#fff}.hero-copy{max-width:650px;padding-right:34px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--blue);margin:0 0 16px}.eyebrow.light{color:#4D87B4}.hero h1{font-size:50px;line-height:1.18;margin:0 0 22px;letter-spacing:-.035em;color:#183B5B}.hero h1 span{color:#2C76B8}.hero-lead{font-size:18px;color:#405A73}.hero-actions{display:flex;gap:12px;margin-top:30px}.btn{display:inline-flex;gap:10px;align-items:center;padding:14px 20px;border-radius:8px;font-weight:800;font-size:14px}.btn-primary{background:#1E5D92;color:#fff;box-shadow:0 10px 22px rgba(30,93,146,.14)}.btn-ghost{border:1px solid #AFC5D8;color:#2B4D6B;background:rgba(255,255,255,.72)}.btn-dark{background:var(--navy);color:#fff}.hero-caption{align-self:flex-end;margin-bottom:52px;max-width:230px;border-left:2px solid rgba(255,255,255,.78);padding-left:18px}.hero-caption span{font-size:10px;letter-spacing:.15em;color:rgba(255,255,255,.82)}.hero-caption strong{display:block;margin-top:9px;font-size:20px;line-height:1.4;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.18)}

.section{padding:92px 0}.section-head{margin-bottom:38px}.section-head.split{display:flex;justify-content:space-between;gap:40px;align-items:end}.section h2{font-size:42px;line-height:1.18;letter-spacing:-.03em;margin:0}.section-desc{max-width:560px;margin:0;color:var(--muted);font-size:16px}
.flagship{background:linear-gradient(180deg,#ffffff,#F2F9FF)}.management-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;background:linear-gradient(135deg,#EAF6FF 0%,#FFFFFF 54%,#EAFBF8 100%);border:1px solid #dcecf7;padding:50px;border-radius:22px;box-shadow:0 25px 70px rgba(16,82,137,.08)}
.accent-rule{width:68px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--blue),#4cc8c0);margin-bottom:25px}.management-copy h3{font-size:33px;line-height:1.3;margin:0 0 18px}.management-copy p{color:var(--muted);font-size:17px}.feature-pills{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0}.feature-pills span{background:#fff;border:1px solid #cfe0ed;padding:9px 13px;border-radius:999px;font-size:13px;font-weight:750;color:#245174}.text-link{display:inline-flex;gap:8px;align-items:center;color:var(--blue);font-weight:850}.diagnosis-card{background:#fff;border-radius:18px;border:1px solid #dbe8f2;padding:26px;transition:.2s;box-shadow:0 18px 40px rgba(26,86,126,.07)}.diagnosis-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(26,86,126,.13)}.diagnosis-label{font-size:11px;font-weight:900;letter-spacing:.16em;color:#4c7ea8;margin-bottom:18px}.diagnosis-card img{width:100%;border:1px solid #edf1f4}.diagnosis-foot{display:flex;justify-content:space-between;gap:16px;margin-top:18px;align-items:end}.diagnosis-foot strong{font-size:17px}.diagnosis-foot span{font-size:12px;color:var(--muted);text-align:right}

.editorial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.story{border:1px solid #e1e8ef;background:#fff;overflow:hidden;position:relative;min-height:365px;transition:.22s}.story:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(18,50,84,.10)}.story img{width:100%;height:220px;object-fit:cover}.story-large{grid-column:span 2;grid-row:span 2;min-height:610px}.story-large img{height:100%;position:absolute;inset:0}.story-wide{grid-column:span 2}.story-wide img{height:100%;position:absolute;inset:0}.story-gradient{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,25,48,.82) 100%)}.story-body{position:absolute;z-index:2;left:26px;right:26px;bottom:26px;color:#fff}.card-copy{position:static;color:var(--ink);padding:18px 18px 22px}.story-body h3{font-size:24px;line-height:1.3;margin:7px 0}.card-copy h3{font-size:19px}.story-body p{margin:0;color:inherit;opacity:.9}.tag{font-size:11px;font-weight:900;letter-spacing:.12em;color:#72c4ff}.card-copy .tag{color:var(--blue)}

.training-section{background:#f8fbfd}.training-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}.training-visual{position:relative}.training-visual img{width:100%;height:500px;object-fit:cover}.floating-note{position:absolute;right:-24px;bottom:-24px;background:var(--yellow);padding:22px 26px;font-weight:900;font-size:19px;line-height:1.35;box-shadow:0 16px 32px rgba(82,62,0,.16)}.training-content h2{font-size:42px;margin-bottom:18px}.training-content>p{color:var(--muted);font-size:17px}.training-links{border-top:1px solid var(--line);margin-top:30px}.training-links a{display:flex;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);transition:.2s}.training-links a:hover{color:var(--blue)}.training-links span{color:var(--muted);font-size:14px;text-align:right}

.research-section{background:#fff}.research-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}.research-main{background:linear-gradient(135deg,#eaf6ff,#fff);display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;padding:38px;border:1px solid #dbeaf4}.research-main img{background:#fff;border:1px solid #e2e8ed}.research-copy p{color:var(--muted)}.director-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;background:#0d335f;color:#fff;padding:28px}.director-card img{height:100%;object-fit:cover}.director-card .eyebrow{color:#82c7ff}.director-card h3{font-size:28px;margin:0}.director-card blockquote{margin:24px 0;color:#dcecff;font-size:18px;line-height:1.55}.director-card .text-link{color:#8fd2ff}

.publication-section{background:linear-gradient(180deg,#fffdf8,#f8f3e8)}.publication-layout{position:relative;display:grid;grid-template-columns:.8fr 1fr .55fr;gap:50px;align-items:center}.book-stage{min-height:420px;display:grid;place-items:center;background:linear-gradient(180deg,#fffefb,#f6efdc);border:1px solid #eadfbd;border-radius:22px;padding:28px;box-shadow:0 18px 40px rgba(77,61,20,.08), inset 0 1px 0 rgba(255,255,255,.9)}.book-stage img{max-height:390px;width:auto;filter:drop-shadow(0 18px 26px rgba(60,45,0,.16))}.publication-copy h3{font-size:35px;margin:18px 0 10px}.publication-copy p{color:#5c6570;margin-bottom:28px}.publication-quote{font-size:16px;font-weight:900;letter-spacing:.2em;color:#8a7222;line-height:2}

.news-section{padding-bottom:110px}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.news-card{border:1px solid #e1e8ee;background:#fff;transition:.2s}.news-card:hover{transform:translateY(-4px);box-shadow:0 15px 36px rgba(12,55,95,.09)}.news-card img{width:100%;height:210px;object-fit:cover}.news-card div{padding:20px}.news-card time{font-size:11px;color:var(--blue);font-weight:900;letter-spacing:.12em}.news-card h3{font-size:20px;margin:8px 0}.news-card p{color:var(--muted);font-size:14px}

.site-footer{background:var(--navy);color:#dce9f7;padding:54px 0 22px}.footer-grid{display:grid;grid-template-columns:1.1fr 1.2fr .7fr;gap:40px}.footer-grid strong{font-size:22px;color:#fff}.footer-grid p{color:#a9bfd5}.footer-grid span{font-size:13px;color:#fff;font-weight:800}.footer-links{display:flex;flex-direction:column;gap:10px;align-items:flex-end}.copyright{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#829bb4}

.detail-hero{padding:88px 0 56px;background:linear-gradient(135deg,#0b315d,#0d66c9);color:#fff}.detail-hero .eyebrow{color:#91d0ff}.detail-hero h1{font-size:52px;margin:0 0 16px}.detail-hero p{max-width:760px;color:#e8f3ff;font-size:18px}.detail-body{padding:70px 0}.detail-layout{display:grid;grid-template-columns:1fr .36fr;gap:60px}.detail-content h2{font-size:30px;margin-top:0}.detail-content h3{margin-top:36px}.detail-content p,.detail-content li{color:#56697d}.detail-aside{border-left:1px solid var(--line);padding-left:28px}.detail-aside a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-weight:750}.detail-image{margin:28px 0 34px;width:100%;max-height:520px;object-fit:cover}

@media(max-width:1050px){.hero-media img{min-width:760px;height:100%;width:auto;object-position:right center}
  .main-nav{display:none;position:absolute;top:76px;left:0;right:0;background:white;padding:18px 24px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
  .main-nav.open{display:flex}.main-nav a{padding:8px 0}.header-cta{display:none}.mobile-toggle{display:block}
  .hero h1{font-size:45px}.hero-caption{display:none}
  .management-grid,.training-layout,.research-grid,.publication-layout,.detail-layout{grid-template-columns:1fr}
  .editorial-grid{grid-template-columns:repeat(2,1fr)}.story-large{grid-column:span 2}.story-wide{grid-column:span 2}
  .publication-quote{display:none}.research-main{grid-template-columns:1fr 1fr}
  .detail-aside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}
}
@media(max-width:680px){.hero-media img{width:100%;height:100%;min-width:0;object-fit:cover;object-position:78% 38%}
  .container{width:min(100% - 28px,var(--max))}.topbar{display:none}.nav-wrap{height:66px}.site-header{top:0}
  .brand{font-size:19px}.hero,.hero-content{min-height:600px}.hero-overlay{background:linear-gradient(180deg,rgba(5,28,55,.44) 0%,rgba(5,28,55,.88) 58%,rgba(5,28,55,.98) 100%)}.hero-content{align-items:flex-end;padding-bottom:48px}.hero h1{font-size:36px}.hero-lead{font-size:16px}.hero-actions{flex-direction:column;align-items:flex-start}
  .section{padding:66px 0}.section-head.split{display:block}.section h2{font-size:34px}.section-desc{margin-top:14px}
  .management-grid{padding:26px}.management-copy h3{font-size:26px}.diagnosis-foot{display:block}.diagnosis-foot span{display:block;text-align:left;margin-top:4px}
  .editorial-grid{grid-template-columns:1fr}.story,.story-large,.story-wide{grid-column:auto;grid-row:auto;min-height:420px}.story img,.story-large img,.story-wide img{height:230px;position:static}.story-large .story-gradient,.story-wide .story-gradient{display:none}.story-large .story-body,.story-wide .story-body{position:static;color:var(--ink);padding:20px}.story-large .tag,.story-wide .tag{color:var(--blue)}
  .training-visual img{height:380px}.floating-note{right:14px;bottom:14px}.training-content h2{font-size:34px}.training-links a{display:block}.training-links span{display:block;text-align:left;margin-top:5px}
  .research-main{grid-template-columns:1fr}.director-card{grid-template-columns:1fr}.director-card img{max-height:330px;width:100%}
  .book-stage{min-height:340px;padding:20px}.publication-layout{gap:28px}
  .news-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-links{align-items:flex-start}.detail-hero h1{font-size:38px}
}



/* 2026-09-06 logo & navigation refresh */
.brand{display:flex;align-items:center;min-width:0;padding:0;flex:0 0 auto}
.brand-logo{display:block;width:208px;height:auto;max-height:46px;object-fit:contain}
.header-cta.management-cta{
  background-image:linear-gradient(rgba(10,32,58,.24),rgba(10,32,58,.24)),url("assets/images/learning_management_button_bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  box-shadow:0 10px 24px rgba(24,50,98,.22);
  border:1px solid rgba(255,255,255,.34);
  text-shadow:0 1px 2px rgba(0,0,0,.28)
}
.header-cta.management-cta:hover{filter:brightness(1.035);transform:translateY(-1px)}
.cta-leaf{font-size:15px;line-height:1;color:#DDF7E5}
.main-nav{gap:26px}
.main-nav a{white-space:nowrap}
.main-nav a::after{background:#2DAA63}
.main-nav a:hover{color:#1F7748}
.management-inline{color:#1F8D50!important;font-weight:900!important}
@media(max-width:1180px){
  .brand{min-width:0}
  .brand-logo{width:192px;max-height:42px}
  .main-nav{gap:18px;font-size:13px}
}
@media(max-width:680px){
  .brand{min-width:0}
  .brand-logo{width:230px;max-height:52px}
}


/* ===== Dropdown navigation ===== */
.nav-wrap{overflow:visible}
.main-nav{overflow:visible}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a{display:flex;align-items:center;height:94px}
.has-submenu>.submenu{
  position:absolute;
  top:calc(100% - 8px);
  left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:190px;
  padding:10px;
  background:rgba(255,255,255,.98);
  border:1px solid #dce7ec;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(20,56,78,.13);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:120;
}
.has-submenu>.submenu::before{
  content:"";
  position:absolute;
  top:-8px;left:50%;
  width:14px;height:14px;
  background:#fff;
  border-left:1px solid #dce7ec;
  border-top:1px solid #dce7ec;
  transform:translateX(-50%) rotate(45deg);
}
.has-submenu:hover>.submenu,
.has-submenu:focus-within>.submenu,
.has-submenu.submenu-open>.submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.submenu a{
  display:block!important;
  height:auto!important;
  padding:11px 13px!important;
  border-radius:9px;
  font-size:13px!important;
  font-weight:750!important;
  color:#294b63!important;
  white-space:nowrap;
  transition:background .15s,color .15s,transform .15s;
}
.submenu a::after{display:none!important}
.submenu a:hover{
  background:#edf8f2;
  color:#1e824c!important;
  transform:translateX(2px);
}



.header-cta.management-cta{position:relative;z-index:2}
.section-anchors{height:0;overflow:hidden}

@media(max-width:1050px){
  .main-nav{overflow:visible}
  .nav-item{width:100%;display:block}
  .nav-item>a{height:auto;width:100%;justify-content:space-between}
  .nav-item.has-submenu>a::before{
    content:"＋";
    order:2;
    margin-left:10px;
    color:#5f7a8c;
    font-size:17px;
    line-height:1;
  }
  .nav-item.submenu-open>a::before{content:"−"}
  .has-submenu>.submenu,
  
  .has-submenu>.submenu::before{display:none}
  .has-submenu.submenu-open>.submenu{display:block}
  .submenu a{padding:9px 12px!important}
}


/* 최종 메뉴 단순화: 학습법/프로그램만 드롭다운 */
.main-nav > a{
  display:flex;
  align-items:center;
  height:94px;
  white-space:nowrap;
}
@media(max-width:1050px){
  .main-nav > a{
    height:auto;
    width:100%;
    padding:8px 0;
  }
}


/* 학습관리프로그램 메뉴: hover 시 실제 코딩 흐름 애니메이션 */
.header-cta.management-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background-image:
    linear-gradient(rgba(7,20,48,.28),rgba(7,20,48,.28)),
    url("assets/images/learning_management_button_bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  box-shadow:0 10px 24px rgba(24,50,98,.22);
  border:1px solid rgba(255,255,255,.34);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.header-cta.management-cta::before,
.header-cta.management-cta::after{
  position:absolute;
  left:0;
  width:max-content;
  white-space:nowrap;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  color:rgba(164,255,228,.92);
  font:700 8px/1.25 "SFMono-Regular",Consolas,"Liberation Mono",monospace;
  letter-spacing:.01em;
  text-shadow:0 0 7px rgba(69,235,198,.75);
}
.header-cta.management-cta::before{
  content:"function study(data){ return analyze(data)+feedback(); }  for(i=0;i<n;i++){score+=calc(i);}  if(memory>0.8){routine();}  map(x=>x*1.03)  ∑ progress[n]  API.sync()  ";
  top:7px;
  transform:translateX(0);
}
.header-cta.management-cta::after{
  content:"const plan=optimize(time,focus);  while(active){learn();save();}  f(x)=ax+b  Δresult=now-prev  model.predict(input)  DB.write(log)  return nextStep();  ";
  bottom:7px;
  transform:translateX(-45%);
  color:rgba(126,188,255,.94);
  text-shadow:0 0 7px rgba(91,139,255,.8);
}
.header-cta.management-cta:hover{
  transform:translateY(-1px) scale(1.015);
  box-shadow:0 12px 30px rgba(51,39,153,.34),0 0 0 1px rgba(123,111,255,.22) inset;
  filter:saturate(1.08) brightness(1.03);
}
.header-cta.management-cta:hover::before{
  opacity:.95;
  animation:managementCodeFlowA 1.35s linear infinite;
}
.header-cta.management-cta:hover::after{
  opacity:.95;
  animation:managementCodeFlowB 1.05s linear infinite;
}
@keyframes managementCodeFlowA{
  from{transform:translateX(8%)}
  to{transform:translateX(-58%)}
}
@keyframes managementCodeFlowB{
  from{transform:translateX(-48%)}
  to{transform:translateX(6%)}
}
@media (prefers-reduced-motion:reduce){
  .header-cta.management-cta:hover::before,
  .header-cta.management-cta:hover::after{animation:none;opacity:.28}
}


/* 2026-09-06 요청 수정: 학습관리프로그램 버튼만 변경 */
.header-cta.management-cta{
  background:#050505 !important;
  background-image:none !important;
  color:#45e38a !important;
  border:1px solid rgba(255,79,216,.34) !important;
  text-shadow:
    0 0 1px rgba(255,79,216,.95),
    0 0 3px rgba(255,79,216,.42) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.22),
    0 0 7px rgba(255,79,216,.10) !important;
}
.header-cta.management-cta .cta-leaf{
  color:#45e38a !important;
  text-shadow:
    0 0 1px rgba(255,79,216,.95),
    0 0 3px rgba(255,79,216,.38) !important;
}
.header-cta.management-cta:hover{
  background:#050505 !important;
  color:#58ef98 !important;
  filter:none !important;
  text-shadow:
    0 0 1px rgba(255,79,216,.95),
    0 0 4px rgba(255,79,216,.48) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.24),
    0 0 9px rgba(255,79,216,.14) !important;
}


/* 2026-09-06 처음으로 버튼 */
.back-to-top{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 17px;
  border:0;
  border-radius:12px;
  background:#182636;
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.02em;
  box-shadow:0 10px 28px rgba(17,35,52,.18);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease, background .2s ease;
}
.back-to-top span:first-child{font-size:21px;line-height:1;font-weight:900}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:#0f1d2b}
@media(max-width:680px){
  .back-to-top{right:16px;bottom:16px;padding:11px 14px;font-size:14px}
}


/* 메인 하단 기존 문의 영역 복원 */
.home-contact-section{background:#fff;padding-top:88px;padding-bottom:88px}
.home-contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:88px;align-items:center}
.home-contact-copy .eyebrow{color:#08705f;margin-bottom:16px}
.home-contact-copy h2{margin:0 0 22px;font-size:clamp(36px,4vw,58px);line-height:1.12;color:#102f4b;letter-spacing:-.03em}
.home-contact-copy>p:last-child{margin:0;max-width:620px;color:#667889;line-height:1.8;word-break:keep-all}
.home-contact-card{padding:34px 36px;border:1px solid #d7e2e7;border-radius:22px;background:#fff}
.home-contact-card h3{margin:0 0 22px;font-size:26px;color:#102f4b}
.home-contact-card>p{margin:0 0 24px;color:#667889;line-height:1.7}
.home-contact-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.home-contact-button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 22px;border-radius:12px;background:#177d68;color:#fff;font-weight:900;text-decoration:none}
.home-contact-phone{display:inline-flex;align-items:center;gap:12px;color:#102f4b;text-decoration:none;font-size:18px}
.home-contact-phone span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#eef8f5;color:#177d68;font-size:18px}
.home-contact-email{color:#5b7082;text-decoration:none;font-weight:700}
@media(max-width:850px){.home-contact-grid{grid-template-columns:1fr;gap:34px}.home-contact-section{padding-top:64px;padding-bottom:64px}}

/* 메인 현장 섹션 오른쪽 빈칸 2개 채움 */
.story-right-top{grid-column:4;grid-row:2}
.story-right-bottom{grid-column:4;grid-row:3}
@media(max-width:1050px){
  .story-right-top,.story-right-bottom{grid-column:auto;grid-row:auto}
}


/* 2026-09-06 메인 히어로 가독성·심미성 개선
   - 벤치마크처럼 제목을 과도하게 키우지 않고, 짧은 행폭과 안정적인 행간으로 정리 */
.hero{
  min-height:570px;
}
.hero-content{
  min-height:570px;
}
.hero-copy{
  max-width:610px;
  padding-right:36px;
}
.hero .eyebrow{
  margin-bottom:18px;
  font-size:11px;
  letter-spacing:.17em;
}
.hero h1{
  max-width:590px;
  margin:0 0 24px;
  font-size:clamp(38px,3.15vw,45px);
  line-height:1.28;
  font-weight:780;
  letter-spacing:-.04em;
  color:#173b5b;
  word-break:keep-all;
  text-wrap:balance;
}
.hero h1 span{
  color:inherit;
}
.hero-lead{
  max-width:560px;
  margin:0;
  font-size:16px;
  line-height:1.85;
  font-weight:500;
  letter-spacing:-.015em;
  color:#526a7f;
  word-break:keep-all;
}
.hero-lead strong{
  color:#173b5b;
  font-weight:800;
}
.hero-actions{
  margin-top:28px;
}
@media(max-width:1050px){
  .hero h1{font-size:40px;line-height:1.3}
  .hero-copy{max-width:570px}
}
@media(max-width:680px){
  .hero,.hero-content{min-height:570px}
  .hero h1{font-size:32px;line-height:1.34;letter-spacing:-.035em}
  .hero-lead{font-size:15px;line-height:1.8}
}


/* 2026-09-06 메인 첫 화면 타이포그래피 2차 축소
   - 큰 글자보다 짧은 행폭·여백·균형을 우선 */
.hero-copy{
  max-width:700px !important;
  padding-right:44px !important;
}
.hero h1{
  max-width:680px !important;
  font-size:clamp(31px,2.45vw,37px) !important;
  line-height:1.34 !important;
  font-weight:760 !important;
  letter-spacing:-.035em !important;
  margin-bottom:20px !important;
}
.hero-lead{
  max-width:610px !important;
  font-size:15px !important;
  line-height:1.82 !important;
}
.hero-actions{
  margin-top:24px !important;
}
@media(max-width:1050px){
  .hero h1{font-size:34px !important;line-height:1.34 !important}
}
@media(max-width:680px){
  .hero h1{font-size:29px !important;line-height:1.38 !important}
  .hero-lead{font-size:14px !important}
}


/* 2026-09-07 메인 히어로: 현대적 이미지 감성 + 문구 중심 전체폭 배너
   - 메인 전용 modifier만 사용하여 다른 페이지/헤더에는 영향 없음 */
.hero.hero-full-banner{
  min-height:570px;
  background:#0b2b45;
}
.hero.hero-full-banner .hero-media{
  inset:0;
  display:block;
}
.hero.hero-full-banner .hero-media img{
  width:100%;
  height:100%;
  min-width:0;
  object-fit:cover;
  object-position:center 52%;
}
.hero.hero-full-banner .hero-overlay{
  background:
    linear-gradient(90deg,rgba(5,27,47,.88) 0%,rgba(7,35,59,.78) 36%,rgba(8,42,70,.48) 61%,rgba(8,42,70,.18) 100%),
    linear-gradient(180deg,rgba(3,19,34,.10) 0%,rgba(3,19,34,.22) 100%);
}
.hero.hero-full-banner .hero-content{
  min-height:570px;
  justify-content:flex-start;
}
.hero.hero-full-banner .hero-copy{
  max-width:720px!important;
  padding-right:24px!important;
}
.hero.hero-full-banner .eyebrow{
  color:#a8d8ff!important;
  text-shadow:0 1px 8px rgba(0,0,0,.18);
}
.hero.hero-full-banner h1{
  max-width:720px!important;
  color:#fff!important;
  text-shadow:0 3px 22px rgba(0,0,0,.30);
}
.hero.hero-full-banner .hero-lead{
  max-width:620px!important;
  color:rgba(255,255,255,.91)!important;
  text-shadow:0 2px 12px rgba(0,0,0,.24);
}
.hero.hero-full-banner .hero-lead strong{color:#fff!important}
.hero.hero-full-banner .btn-primary{
  background:#1d6ca8;
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.hero.hero-full-banner .btn-ghost{
  color:#fff;
  border-color:rgba(255,255,255,.54);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(5px);
}
@media(max-width:1050px){
  .hero.hero-full-banner .hero-media img{object-position:58% center}
  .hero.hero-full-banner .hero-overlay{
    background:linear-gradient(90deg,rgba(5,27,47,.88) 0%,rgba(7,35,59,.76) 50%,rgba(8,42,70,.30) 100%);
  }
}

/* 2026-09-08 메인 배너 30단계 — 희망이 열리는 작품형 새벽안개 일출 배너 */
.main-banner-stage{
  min-height:680px;
  height:680px;
  background:
    radial-gradient(ellipse 96% 12% at 50% 91%, rgba(236,241,247,.18) 0%, rgba(196,205,218,.10) 28%, rgba(126,140,164,.04) 52%, rgba(5,5,5,0) 76%),
    radial-gradient(ellipse 70% 9% at 18% 88%, rgba(233,238,245,.09) 0%, rgba(174,186,204,.05) 30%, rgba(5,5,5,0) 72%),
    radial-gradient(ellipse 78% 10% at 78% 89%, rgba(255,243,224,.12) 0%, rgba(238,217,190,.07) 28%, rgba(5,5,5,0) 72%),
    radial-gradient(ellipse 56% 18% at 52% 84%, rgba(220,228,238,.08) 0%, rgba(160,173,191,.04) 34%, rgba(5,5,5,0) 72%),
    radial-gradient(ellipse 18% 18% at 96% 68%, rgba(255,239,194,.28) 0%, rgba(255,204,127,.20) 18%, rgba(255,134,74,.11) 40%, rgba(5,5,5,0) 74%),
    radial-gradient(ellipse 60% 24% at 86% 60%, rgba(176,38,40,.24) 0%, rgba(105,18,27,.14) 38%, rgba(5,5,5,0) 76%),
    radial-gradient(ellipse 92% 48% at 92% 22%, rgba(116,28,33,.17) 0%, rgba(60,16,24,.09) 34%, rgba(5,5,5,0) 74%),
    linear-gradient(180deg,#020204 0%, #040507 24%, #09101f 58%, #101736 100%);
}
@media(max-width:680px){
  .main-banner-stage{display:none;}
}


/* 2026-09-07 메인 배너 10단계 — 8프레임 러닝 + 짧은 등장/소멸 이동 */
@media (min-width:681px){
  .main-banner-stage{
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }
  /* 작품형 새벽: 오른쪽에서 빛이 넓게 열리고, 구름층과 하단 안개가 함께 호흡하도록 조정 */
  .main-banner-stage::before{
    content:"";
    position:absolute;
    z-index:0;
    right:-5%;
    top:-6%;
    width:86%;
    height:90%;
    pointer-events:none;
    transform-origin:100% 60%;
    background:
      radial-gradient(ellipse 124% 92% at 100% 54%, rgba(255,229,180,.18) 0%, rgba(255,177,106,.13) 16%, rgba(202,79,58,.09) 36%, rgba(5,5,5,0) 68%),
      conic-gradient(from 196deg at 100% 63%,
        rgba(255,255,255,0) 0deg 10deg,
        rgba(255,219,166,.10) 10deg 24deg,
        rgba(255,255,255,0) 24deg 35deg,
        rgba(255,181,112,.12) 35deg 49deg,
        rgba(255,255,255,0) 49deg 61deg,
        rgba(255,223,168,.08) 61deg 73deg,
        rgba(255,255,255,0) 73deg 86deg),
      linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 47%,
        rgba(85,16,23,.08) 58%,
        rgba(125,22,29,.15) 64%,
        rgba(171,45,40,.12) 70%,
        rgba(255,255,255,0) 86%),
      radial-gradient(ellipse 90% 18% at 82% 67%, rgba(150,33,34,.11) 0%, rgba(86,18,25,.07) 40%, rgba(5,5,5,0) 74%);
    filter:blur(20px);
    opacity:.26;
    mix-blend-mode:screen;
    animation:studyhopeSunriseRays 18s linear infinite;
    will-change:transform,opacity,filter;
  }
  .main-banner-stage::after{
    content:"";
    position:absolute;
    z-index:0;
    right:-1%;
    top:-1%;
    width:78%;
    height:80%;
    pointer-events:none;
    transform-origin:100% 60%;
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 40%,
        rgba(88,15,22,.08) 52%,
        rgba(134,23,30,.16) 58%,
        rgba(184,50,40,.18) 64%,
        rgba(239,111,62,.16) 69%,
        rgba(250,186,112,.10) 74%,
        rgba(233,238,243,.08) 80%,
        rgba(255,255,255,0) 90%),
      radial-gradient(ellipse 34% 11% at 82% 50%, rgba(115,32,31,.24) 0%, rgba(83,22,25,.16) 38%, rgba(5,5,5,0) 74%),
      radial-gradient(ellipse 38% 9% at 79% 60%, rgba(131,37,34,.20) 0%, rgba(95,24,29,.14) 40%, rgba(5,5,5,0) 74%),
      radial-gradient(ellipse 30% 8% at 89% 70%, rgba(255,220,170,.22) 0%, rgba(255,167,94,.16) 24%, rgba(237,96,50,.10) 48%, rgba(5,5,5,0) 74%),
      radial-gradient(ellipse 38% 22% at 95% 67%, rgba(255,246,205,.34) 0%, rgba(255,214,136,.24) 16%, rgba(255,168,94,.16) 30%, rgba(255,110,65,.08) 48%, rgba(5,5,5,0) 72%),
      radial-gradient(ellipse 78% 18% at 50% 92%, rgba(242,245,249,.16) 0%, rgba(210,219,229,.09) 26%, rgba(165,176,194,.04) 48%, rgba(5,5,5,0) 74%);
    filter:blur(23px);
    opacity:.33;
    mix-blend-mode:screen;
    animation:studyhopeSunriseGlow 18s linear infinite;
    will-change:transform,opacity,filter;
  }

  .banner-base-fog{
    position:absolute;
    z-index:1;
    left:-10%;
    bottom:18px;
    pointer-events:none;
    border-radius:999px;
    mix-blend-mode:screen;
    will-change:transform,opacity,filter;
  }
  .banner-base-fog.fog-1{
    width:132%;
    height:72px;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(233,240,250,.05) 8%,
        rgba(226,236,248,.15) 20%,
        rgba(241,246,252,.21) 34%,
        rgba(248,248,246,.22) 48%,
        rgba(255,241,223,.24) 62%,
        rgba(255,214,176,.22) 74%,
        rgba(255,181,126,.16) 86%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse at 22% 52%, rgba(238,244,250,.20) 0%, rgba(228,236,244,.09) 38%, rgba(255,255,255,0) 74%),
      radial-gradient(ellipse at 72% 50%, rgba(255,236,214,.22) 0%, rgba(255,210,180,.11) 34%, rgba(255,255,255,0) 74%),
      radial-gradient(ellipse at 90% 48%, rgba(255,188,126,.18) 0%, rgba(247,118,76,.07) 34%, rgba(255,255,255,0) 70%);
    filter:blur(24px);
    opacity:.35;
    animation:studyhopeBaseFogDriftA 26s ease-in-out infinite alternate;
  }
  .banner-base-fog.fog-2{
    left:-4%;
    bottom:40px;
    width:94%;
    height:56px;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(235,241,248,.04) 12%,
        rgba(231,239,247,.10) 28%,
        rgba(244,247,251,.14) 42%,
        rgba(250,246,240,.15) 56%,
        rgba(255,230,203,.16) 68%,
        rgba(255,193,146,.13) 82%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse at 42% 54%, rgba(239,244,249,.13) 0%, rgba(230,236,243,.06) 40%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse at 86% 48%, rgba(255,212,178,.16) 0%, rgba(250,136,90,.07) 32%, rgba(255,255,255,0) 70%);
    filter:blur(21px);
    opacity:.24;
    animation:studyhopeBaseFogDriftB 31s ease-in-out infinite alternate;
  }
  .banner-base-fog.fog-3{
    left:-12%;
    bottom:8px;
    width:118%;
    height:44px;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(236,242,248,.03) 14%,
        rgba(231,239,247,.07) 32%,
        rgba(245,247,250,.09) 48%,
        rgba(253,245,236,.10) 62%,
        rgba(255,217,188,.09) 76%,
        rgba(255,179,134,.07) 88%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse at 30% 46%, rgba(238,243,248,.08) 0%, rgba(230,236,242,.04) 34%, rgba(255,255,255,0) 72%),
      radial-gradient(ellipse at 82% 48%, rgba(255,210,176,.10) 0%, rgba(247,128,84,.04) 30%, rgba(255,255,255,0) 68%);
    filter:blur(18px);
    opacity:.17;
    animation:studyhopeBaseFogDriftC 36s ease-in-out infinite alternate;
  }

  .banner-runner-fade-track{
    position:absolute;
    z-index:3;
    left:-120px;
    bottom:14px;
    width:320px;
    height:88px;
    pointer-events:none;
    opacity:0;
    animation:studyhopeRunnerFadeAcross 18s linear infinite;
    will-change:transform,opacity;
    isolation:isolate;
  }
  .banner-runner-fade-track::before{
    content:"";
    position:absolute;
    z-index:0;
    left:-38px;
    bottom:4px;
    width:392px;
    height:52px;
    border-radius:999px;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.12) 10%,
        rgba(255,255,255,.36) 24%,
        rgba(255,255,255,.48) 42%,
        rgba(255,255,255,.50) 58%,
        rgba(255,255,255,.34) 76%,
        rgba(255,255,255,.12) 90%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse at center,
        rgba(255,255,255,.44) 0%,
        rgba(246,249,252,.24) 46%,
        rgba(255,255,255,0) 82%);
    filter:blur(22px);
    opacity:.78;
    mix-blend-mode:screen;
    will-change:transform,opacity;
  }
  .banner-runner-fade-track::after{
    content:"";
    position:absolute;
    z-index:1;
    left:-16px;
    bottom:18px;
    width:336px;
    height:30px;
    border-radius:999px;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.10) 12%,
        rgba(255,255,255,.22) 28%,
        rgba(255,255,255,.28) 45%,
        rgba(255,255,255,.28) 55%,
        rgba(255,255,255,.22) 72%,
        rgba(255,255,255,.10) 88%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse at center,
        rgba(255,255,255,.26) 0%,
        rgba(247,250,255,.14) 48%,
        rgba(255,255,255,0) 86%);
    filter:blur(18px);
    opacity:.66;
    mix-blend-mode:screen;
    will-change:transform,opacity;
  }
  .banner-runner-sprite{
    z-index:2;
    display:block;
    width:36px;
    height:42px;
    background-image:url("assets/images/banner_runner_sprite_20260907.png");
    background-repeat:no-repeat;
    background-size:800% 100%;
    background-position:0% 0;
    opacity:.94;
    filter:invert(.05) brightness(.90) contrast(1.14) drop-shadow(0 0 1px rgba(255,255,255,.16));
    animation:studyhopeRunnerFrames .80s steps(7,end) infinite;
    will-change:background-position;
  }
}

@keyframes studyhopeRunnerFadeAcross{
  0%{
    transform:translate3d(0,0,0);
    opacity:.16;
  }
  3%{opacity:.74;}
  90%{opacity:.74;}
  96%{opacity:.40;}
  100%{
    transform:translate3d(calc(100vw - 40px),0,0);
    opacity:0;
  }
}

@keyframes studyhopeRunnerFrames{
  from{background-position:0% 0;}
  to{background-position:100% 0;}
}

@keyframes studyhopeSunriseRays{
  0%{
    opacity:.04;
    transform:translate3d(2.5%,1.2%,0) scale(.84) rotate(-3.2deg);
    filter:blur(20px);
  }
  18%{
    opacity:.09;
    transform:translate3d(1.9%,.8%,0) scale(.90) rotate(-2.5deg);
    filter:blur(18px);
  }
  38%{
    opacity:.16;
    transform:translate3d(1.1%,.3%,0) scale(.98) rotate(-1.5deg);
    filter:blur(16px);
  }
  60%{
    opacity:.24;
    transform:translate3d(.5%,-.1%,0) scale(1.05) rotate(-.6deg);
    filter:blur(15px);
  }
  84%{
    opacity:.34;
    transform:translate3d(0,-.6%,0) scale(1.11) rotate(.1deg);
    filter:blur(14px);
  }
  95%{
    opacity:.41;
    transform:translate3d(-.2%,-.9%,0) scale(1.15) rotate(.3deg);
    filter:blur(13px);
  }
  100%{
    opacity:.46;
    transform:translate3d(-.4%,-1.1%,0) scale(1.18) rotate(.5deg);
    filter:blur(13px);
  }
}

@keyframes studyhopeSunriseGlow{
  0%{
    opacity:.10;
    transform:translate3d(2.8%,1.4%,0) scale(.84);
    filter:blur(28px);
  }
  18%{
    opacity:.16;
    transform:translate3d(2.1%,.9%,0) scale(.90);
    filter:blur(26px);
  }
  38%{
    opacity:.25;
    transform:translate3d(1.3%,.4%,0) scale(.99);
    filter:blur(24px);
  }
  60%{
    opacity:.36;
    transform:translate3d(.7%,-.1%,0) scale(1.07);
    filter:blur(22px);
  }
  84%{
    opacity:.48;
    transform:translate3d(.1%,-.7%,0) scale(1.13);
    filter:blur(20px);
  }
  95%{
    opacity:.56;
    transform:translate3d(-.2%,-1.0%,0) scale(1.17);
    filter:blur(19px);
  }
  100%{
    opacity:.62;
    transform:translate3d(-.4%,-1.2%,0) scale(1.20);
    filter:blur(19px);
  }
}

@keyframes studyhopeBaseFogDriftA{
  0%{
    transform:translate3d(-3%,0,0) scaleX(.98);
    opacity:.26;
  }
  50%{
    transform:translate3d(1.5%,-2px,0) scaleX(1.01);
    opacity:.34;
  }
  100%{
    transform:translate3d(4%,1px,0) scaleX(1.03);
    opacity:.30;
  }
}

@keyframes studyhopeBaseFogDriftB{
  0%{
    transform:translate3d(2%,0,0) scaleX(1);
    opacity:.18;
  }
  50%{
    transform:translate3d(-1.5%,-1px,0) scaleX(.99);
    opacity:.24;
  }
  100%{
    transform:translate3d(-4%,2px,0) scaleX(1.02);
    opacity:.20;
  }
}

@keyframes studyhopeBaseFogDriftC{
  0%{
    transform:translate3d(-1.5%,0,0) scaleX(.99);
    opacity:.12;
  }
  50%{
    transform:translate3d(.8%,-1px,0) scaleX(1.01);
    opacity:.17;
  }
  100%{
    transform:translate3d(2.8%,1px,0) scaleX(1.02);
    opacity:.14;
  }
}

@media (prefers-reduced-motion: reduce){
  .banner-base-fog{animation:none!important;}
}

@media (prefers-reduced-motion: reduce){
  .banner-runner-fade-track{display:none!important;}
}


/* 2026-09-07 메인 배너 14단계 — 넓은 안개형 주광원 + 천천히 사라지는 잔광 */
@media (min-width:681px){
  /* 고정 안개 위로 러너가 지나가며 안개가 아주 조금 더 살아나는 작품형 이동 안개 */
  .banner-runner-fade-track::before{
    left:-112px;
    bottom:6px;
    width:520px;
    height:58px;
    border-radius:999px;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(236,242,248,.05) 9%,
        rgba(239,244,250,.12) 24%,
        rgba(247,249,252,.17) 42%,
        rgba(255,247,239,.20) 56%,
        rgba(255,228,205,.22) 68%,
        rgba(255,194,152,.18) 82%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse at 42% 56%,
        rgba(242,246,250,.14) 0%,
        rgba(232,237,243,.07) 46%,
        rgba(255,255,255,0) 82%),
      radial-gradient(ellipse at 78% 52%,
        rgba(255,216,184,.16) 0%,
        rgba(247,129,84,.07) 36%,
        rgba(255,255,255,0) 74%);
    filter:blur(24px);
    opacity:.55;
    mix-blend-mode:screen;
  }

  .banner-runner-fade-track::after{
    left:-34px;
    bottom:19px;
    width:372px;
    height:32px;
    border-radius:999px;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(236,242,248,.03) 12%,
        rgba(243,246,250,.08) 28%,
        rgba(248,249,251,.12) 45%,
        rgba(255,248,242,.14) 56%,
        rgba(255,226,202,.13) 70%,
        rgba(255,188,146,.09) 82%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse at 72% 50%,
        rgba(255,214,182,.12) 0%,
        rgba(247,126,82,.05) 34%,
        rgba(255,255,255,0) 74%),
      radial-gradient(ellipse at center,
        rgba(243,246,250,.08) 0%,
        rgba(234,239,245,.04) 48%,
        rgba(255,255,255,0) 86%);
    filter:blur(18px);
    opacity:.47;
    mix-blend-mode:screen;
  }

  .banner-runner-trail{
    position:absolute;
    z-index:2;
    left:-430px;
    bottom:8px;
    width:720px;
    height:42px;
    border-radius:999px;
    pointer-events:none;
    opacity:0;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(236,242,248,.02) 12%,
        rgba(242,246,250,.06) 28%,
        rgba(247,248,251,.09) 46%,
        rgba(255,247,239,.11) 58%,
        rgba(255,225,202,.11) 70%,
        rgba(255,188,144,.08) 82%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse at 70% 50%,
        rgba(255,214,180,.10) 0%,
        rgba(245,124,81,.04) 34%,
        rgba(255,255,255,0) 72%),
      radial-gradient(ellipse at 56% 50%,
        rgba(243,246,251,.08) 0%,
        rgba(228,234,241,.04) 36%,
        rgba(255,255,255,0) 78%);
    filter:blur(28px);
    mix-blend-mode:screen;
    animation:studyhopeTrailAcross 18s linear infinite;
    will-change:transform,opacity;
  }
  .banner-runner-trail.trail-1{animation-delay:.18s;}
  .banner-runner-trail.trail-2{animation-delay:.44s;}
  .banner-runner-trail.trail-3{animation-delay:.76s;}
  .banner-runner-trail.trail-4{animation-delay:1.12s;}
  .banner-runner-trail.trail-5{animation-delay:1.52s;}
}

@keyframes studyhopeTrailAcross{
  0%{
    transform:translate3d(260px,0,0) scaleX(.95);
    opacity:0;
  }
  6%{opacity:.05;}
  14%{opacity:.11;}
  84%{opacity:.10;}
  94%{opacity:.05;}
  98%{opacity:.02;}
  100%{
    transform:translate3d(calc(100vw + 260px),0,0) scaleX(1.04);
    opacity:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .banner-runner-trail{display:none!important;}
}

/* 2026-09-08 메인 배너 33단계 — 자연풍 안개 흐름 + 일출 방향 희망색 연동 */
@media (min-width:681px){
  /* 안개띠를 동일한 캡슐형으로 보이지 않게 폭·높이·곡률을 서로 다르게 만든다. */
  .banner-base-fog{
    transform-origin:center bottom;
    border-radius:46% 54% 42% 58% / 62% 48% 52% 38%;
  }

  .banner-base-fog.fog-1{
    left:-13%;
    bottom:10px;
    width:139%;
    height:82px;
    border-radius:42% 58% 47% 53% / 58% 45% 55% 42%;
    background:
      radial-gradient(ellipse 15% 72% at 10% 58%, rgba(232,239,248,.13) 0%, rgba(226,235,245,.07) 45%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 25% 92% at 29% 52%, rgba(242,246,251,.20) 0%, rgba(229,237,246,.09) 44%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 18% 68% at 47% 60%, rgba(247,249,251,.16) 0%, rgba(235,240,246,.07) 42%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 26% 88% at 66% 52%, rgba(255,236,214,.20) 0%, rgba(255,208,171,.11) 42%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 19% 74% at 81% 55%, rgba(255,194,142,.20) 0%, rgba(245,111,77,.10) 43%, rgba(255,255,255,0) 75%),
      radial-gradient(ellipse 16% 68% at 94% 50%, rgba(236,105,73,.18) 0%, rgba(175,50,49,.10) 44%, rgba(255,255,255,0) 73%),
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(231,239,248,.09) 16%,
        rgba(242,246,251,.17) 35%,
        rgba(252,247,240,.18) 52%,
        rgba(255,225,195,.19) 66%,
        rgba(255,174,125,.18) 80%,
        rgba(210,74,61,.12) 93%,
        rgba(255,255,255,0) 100%);
    filter:blur(25px);
    opacity:.36;
    animation:studyhopeNaturalFogA 29s ease-in-out infinite alternate;
  }

  .banner-base-fog.fog-2{
    left:-5%;
    bottom:44px;
    width:103%;
    height:49px;
    border-radius:56% 44% 62% 38% / 42% 63% 37% 58%;
    background:
      radial-gradient(ellipse 21% 76% at 14% 50%, rgba(230,238,247,.09) 0%, rgba(224,233,243,.04) 48%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 16% 88% at 38% 56%, rgba(242,246,250,.13) 0%, rgba(231,238,245,.06) 44%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 29% 68% at 62% 48%, rgba(255,236,217,.15) 0%, rgba(255,213,183,.07) 44%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 20% 90% at 83% 56%, rgba(255,184,137,.14) 0%, rgba(230,92,70,.07) 43%, rgba(255,255,255,0) 73%),
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(228,237,246,.05) 18%,
        rgba(241,245,250,.10) 38%,
        rgba(251,245,238,.12) 55%,
        rgba(255,215,184,.14) 70%,
        rgba(247,153,111,.12) 84%,
        rgba(194,61,57,.08) 95%,
        rgba(255,255,255,0) 100%);
    filter:blur(20px);
    opacity:.25;
    animation:studyhopeNaturalFogB 34s ease-in-out infinite alternate;
  }

  .banner-base-fog.fog-3{
    left:-17%;
    bottom:2px;
    width:126%;
    height:38px;
    border-radius:38% 62% 45% 55% / 66% 36% 64% 34%;
    background:
      radial-gradient(ellipse 22% 82% at 20% 56%, rgba(235,241,247,.07) 0%, rgba(224,232,241,.03) 46%, rgba(255,255,255,0) 75%),
      radial-gradient(ellipse 14% 64% at 47% 45%, rgba(244,247,250,.08) 0%, rgba(234,239,244,.035) 45%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 28% 86% at 71% 58%, rgba(255,222,196,.10) 0%, rgba(253,184,144,.05) 45%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 17% 72% at 91% 50%, rgba(246,143,103,.10) 0%, rgba(186,54,55,.05) 43%, rgba(255,255,255,0) 72%),
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(231,239,247,.035) 20%,
        rgba(244,247,250,.065) 43%,
        rgba(253,240,229,.075) 60%,
        rgba(255,203,168,.085) 75%,
        rgba(229,116,89,.07) 88%,
        rgba(178,49,52,.045) 96%,
        rgba(255,255,255,0) 100%);
    filter:blur(17px);
    opacity:.18;
    animation:studyhopeNaturalFogC 39s ease-in-out infinite alternate;
  }

  /* 러너 주위 이동안개도 좌우가 똑같은 타원형이 아니라 숨결처럼 불규칙하게 만든다. */
  .banner-runner-fade-track::before{
    left:-126px;
    bottom:3px;
    width:548px;
    height:64px;
    border-radius:44% 56% 38% 62% / 60% 42% 58% 40%;
    background:
      radial-gradient(ellipse 31% 86% at 22% 58%, rgba(236,242,249,.08) 0%, rgba(255,255,255,0) 74%),
      radial-gradient(ellipse 35% 74% at 48% 46%, rgba(244,247,250,.16) 0%, rgba(232,238,244,.07) 46%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 27% 92% at 71% 58%, rgba(255,239,221,.18) 0%, rgba(255,209,176,.08) 44%, rgba(255,255,255,0) 75%),
      radial-gradient(ellipse 18% 68% at 90% 48%, rgba(255,185,136,.16) 0%, rgba(225,87,68,.07) 45%, rgba(255,255,255,0) 73%),
      linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(236,242,248,.06) 16%, rgba(246,248,251,.14) 42%, rgba(255,236,218,.17) 65%, rgba(255,178,130,.14) 82%, rgba(214,77,63,.08) 94%, rgba(255,255,255,0) 100%);
    filter:blur(25px);
    opacity:.54;
    animation:studyhopeRunnerMistBreath 4.8s ease-in-out infinite alternate;
  }

  .banner-runner-fade-track::after{
    left:-40px;
    bottom:17px;
    width:386px;
    height:31px;
    border-radius:58% 42% 48% 52% / 43% 61% 39% 57%;
    background:
      radial-gradient(ellipse 34% 76% at 34% 52%, rgba(241,245,249,.08) 0%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 38% 86% at 67% 48%, rgba(255,226,204,.11) 0%, rgba(255,179,140,.05) 46%, rgba(255,255,255,0) 75%),
      linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(238,243,248,.035) 18%, rgba(246,248,250,.08) 43%, rgba(255,229,207,.10) 66%, rgba(244,150,113,.075) 84%, rgba(191,61,59,.04) 95%, rgba(255,255,255,0) 100%);
    filter:blur(18px);
    opacity:.45;
  }

  /* 잔광도 획일적인 폭을 피하고, 뒤쪽은 차갑고 앞쪽은 일출색을 받게 한다. */
  .banner-runner-trail{
    width:760px;
    height:46px;
    border-radius:49% 51% 39% 61% / 62% 38% 57% 43%;
    background:
      radial-gradient(ellipse 27% 86% at 35% 52%, rgba(239,244,249,.07) 0%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 34% 76% at 62% 55%, rgba(255,232,211,.09) 0%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 20% 90% at 83% 49%, rgba(255,174,130,.08) 0%, rgba(198,61,59,.04) 46%, rgba(255,255,255,0) 73%),
      linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(233,240,247,.025) 14%, rgba(244,247,250,.065) 40%, rgba(255,232,213,.09) 64%, rgba(249,167,126,.075) 82%, rgba(190,56,57,.045) 95%, rgba(255,255,255,0) 100%);
    filter:blur(29px);
  }
}

@keyframes studyhopeNaturalFogA{
  0%{transform:translate3d(-4.0%,0,0) scaleX(.965) scaleY(.90) skewX(-1.0deg);opacity:.28;}
  28%{transform:translate3d(-1.4%,-3px,0) scaleX(1.015) scaleY(1.05) skewX(.7deg);opacity:.35;}
  57%{transform:translate3d(1.6%,1px,0) scaleX(.985) scaleY(.96) skewX(-.5deg);opacity:.32;}
  81%{transform:translate3d(3.5%,-2px,0) scaleX(1.035) scaleY(1.08) skewX(.8deg);opacity:.37;}
  100%{transform:translate3d(5.2%,1px,0) scaleX(1.005) scaleY(.93) skewX(-.3deg);opacity:.31;}
}
@keyframes studyhopeNaturalFogB{
  0%{transform:translate3d(3.0%,1px,0) scaleX(1.02) scaleY(.92) skewX(.8deg);opacity:.19;}
  34%{transform:translate3d(.6%,-2px,0) scaleX(.975) scaleY(1.09) skewX(-.7deg);opacity:.25;}
  69%{transform:translate3d(-2.0%,1px,0) scaleX(1.03) scaleY(.97) skewX(.5deg);opacity:.22;}
  100%{transform:translate3d(-4.7%,-1px,0) scaleX(.99) scaleY(1.06) skewX(-.4deg);opacity:.24;}
}
@keyframes studyhopeNaturalFogC{
  0%{transform:translate3d(-2.1%,0,0) scaleX(.98) scaleY(1.06) skewX(-.6deg);opacity:.12;}
  31%{transform:translate3d(.3%,-1px,0) scaleX(1.025) scaleY(.91) skewX(.5deg);opacity:.17;}
  66%{transform:translate3d(2.2%,1px,0) scaleX(.99) scaleY(1.10) skewX(-.4deg);opacity:.15;}
  100%{transform:translate3d(4.1%,-1px,0) scaleX(1.035) scaleY(.95) skewX(.4deg);opacity:.18;}
}
@keyframes studyhopeRunnerMistBreath{
  0%{transform:translate3d(-4px,1px,0) scaleX(.97) scaleY(.92);opacity:.47;}
  48%{transform:translate3d(2px,-2px,0) scaleX(1.035) scaleY(1.08);opacity:.57;}
  100%{transform:translate3d(7px,1px,0) scaleX(1.01) scaleY(.96);opacity:.51;}
}

@media (prefers-reduced-motion: reduce){
  .banner-base-fog,
  .banner-runner-fade-track::before{animation:none!important;}
}

/* 2026-09-08 메인 배너 34단계 — 수평띠 제거 / 자연 안개 덩어리 / 일출색 침투 강화 */
@media (min-width:681px){
  /* 바닥 전체에 깔린 직선형 밝은 띠를 걷어내고, 자연 안개가 군데군데 차오르는 바탕으로 교체 */
  .main-banner-stage{
    background:
      radial-gradient(ellipse 31% 13% at 7% 91%, rgba(223,232,244,.10) 0%, rgba(173,187,207,.045) 38%, rgba(5,5,5,0) 76%),
      radial-gradient(ellipse 19% 16% at 25% 87%, rgba(232,239,247,.105) 0%, rgba(182,194,210,.045) 39%, rgba(5,5,5,0) 77%),
      radial-gradient(ellipse 27% 11% at 44% 93%, rgba(226,234,244,.09) 0%, rgba(173,186,203,.04) 42%, rgba(5,5,5,0) 78%),
      radial-gradient(ellipse 16% 17% at 58% 87%, rgba(236,235,231,.09) 0%, rgba(204,191,181,.045) 40%, rgba(5,5,5,0) 77%),
      radial-gradient(ellipse 24% 15% at 72% 91%, rgba(255,225,197,.11) 0%, rgba(232,177,145,.055) 42%, rgba(5,5,5,0) 78%),
      radial-gradient(ellipse 24% 16% at 86% 88%, rgba(255,186,139,.13) 0%, rgba(220,101,78,.07) 42%, rgba(5,5,5,0) 78%),
      radial-gradient(ellipse 23% 20% at 97% 85%, rgba(255,177,124,.16) 0%, rgba(205,73,61,.085) 43%, rgba(5,5,5,0) 78%),
      radial-gradient(ellipse 18% 18% at 97% 68%, rgba(255,239,194,.28) 0%, rgba(255,204,127,.20) 18%, rgba(255,134,74,.11) 40%, rgba(5,5,5,0) 74%),
      radial-gradient(ellipse 60% 24% at 86% 60%, rgba(176,38,40,.24) 0%, rgba(105,18,27,.14) 38%, rgba(5,5,5,0) 76%),
      radial-gradient(ellipse 92% 48% at 92% 22%, rgba(116,28,33,.17) 0%, rgba(60,16,24,.09) 34%, rgba(5,5,5,0) 74%),
      linear-gradient(180deg,#020204 0%,#040507 24%,#09101f 58%,#101736 100%);
  }

  /* 안개 1: 가장 낮고 넓은 층. 직선 띠가 아닌 불규칙한 섬 형태의 안개 군락 */
  .banner-base-fog.fog-1{
    left:-8%;
    bottom:0;
    width:120%;
    height:118px;
    border-radius:0;
    background:
      radial-gradient(ellipse 14% 56% at 5% 72%, rgba(232,239,248,.13) 0%, rgba(223,232,243,.055) 50%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 19% 74% at 18% 62%, rgba(240,245,250,.17) 0%, rgba(226,235,244,.07) 46%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 12% 48% at 31% 76%, rgba(235,242,249,.12) 0%, rgba(225,233,242,.05) 47%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 21% 68% at 43% 57%, rgba(245,247,250,.16) 0%, rgba(231,237,244,.065) 46%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 10% 43% at 56% 79%, rgba(247,244,238,.10) 0%, rgba(233,222,210,.045) 47%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 18% 73% at 67% 60%, rgba(255,228,204,.17) 0%, rgba(247,191,154,.075) 47%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 12% 51% at 78% 75%, rgba(255,203,163,.15) 0%, rgba(237,143,110,.065) 48%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 20% 76% at 89% 59%, rgba(255,181,132,.18) 0%, rgba(223,98,76,.085) 46%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 12% 54% at 99% 71%, rgba(241,137,101,.15) 0%, rgba(187,58,57,.075) 46%, rgba(255,255,255,0) 78%);
    filter:blur(22px);
    opacity:.42;
    animation:studyhopeNaturalFog34A 31s ease-in-out infinite alternate;
  }

  /* 안개 2: 중간 높이. 폭과 높이를 일부러 들쭉날쭉하게 배치 */
  .banner-base-fog.fog-2{
    left:-3%;
    bottom:31px;
    width:110%;
    height:92px;
    border-radius:0;
    background:
      radial-gradient(ellipse 13% 67% at 8% 61%, rgba(229,238,247,.09) 0%, rgba(220,230,241,.04) 50%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 18% 81% at 27% 46%, rgba(241,245,249,.12) 0%, rgba(227,235,243,.05) 48%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 11% 52% at 42% 70%, rgba(238,243,248,.08) 0%, rgba(225,233,241,.035) 48%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 21% 72% at 58% 52%, rgba(250,239,228,.12) 0%, rgba(241,213,190,.052) 48%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 14% 85% at 73% 45%, rgba(255,215,181,.14) 0%, rgba(245,167,128,.06) 48%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 22% 64% at 89% 60%, rgba(255,178,132,.15) 0%, rgba(220,90,73,.07) 48%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 10% 50% at 99% 40%, rgba(235,112,88,.12) 0%, rgba(176,49,53,.06) 48%, rgba(255,255,255,0) 78%);
    filter:blur(19px);
    opacity:.30;
    animation:studyhopeNaturalFog34B 37s ease-in-out infinite alternate;
  }

  /* 안개 3: 가장 가볍고 위로 떠오르는 조각층 */
  .banner-base-fog.fog-3{
    left:-6%;
    bottom:58px;
    width:115%;
    height:84px;
    border-radius:0;
    background:
      radial-gradient(ellipse 12% 66% at 13% 59%, rgba(232,240,248,.07) 0%, rgba(220,230,240,.03) 50%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 9% 42% at 34% 71%, rgba(239,244,248,.06) 0%, rgba(226,234,241,.025) 49%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 16% 78% at 49% 43%, rgba(245,244,240,.075) 0%, rgba(231,226,219,.032) 49%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 11% 51% at 65% 67%, rgba(255,226,205,.08) 0%, rgba(242,192,160,.035) 49%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 18% 74% at 80% 44%, rgba(255,192,149,.10) 0%, rgba(225,116,88,.045) 49%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 10% 48% at 95% 64%, rgba(239,132,102,.085) 0%, rgba(180,52,55,.04) 49%, rgba(255,255,255,0) 78%);
    filter:blur(17px);
    opacity:.21;
    animation:studyhopeNaturalFog34C 43s ease-in-out infinite alternate;
  }

  /* 오른쪽으로 갈수록 일출이 안개 속으로 실제 스며드는 느낌을 강화 */
  .main-banner-stage::after{
    width:83%;
    height:86%;
    background:
      radial-gradient(ellipse 46% 22% at 96% 72%, rgba(255,235,189,.30) 0%, rgba(255,183,117,.20) 25%, rgba(239,101,70,.11) 50%, rgba(5,5,5,0) 78%),
      radial-gradient(ellipse 56% 17% at 90% 83%, rgba(255,197,144,.22) 0%, rgba(230,105,79,.12) 35%, rgba(174,49,51,.06) 58%, rgba(5,5,5,0) 80%),
      radial-gradient(ellipse 43% 13% at 72% 88%, rgba(255,226,197,.14) 0%, rgba(243,170,132,.07) 42%, rgba(5,5,5,0) 78%),
      linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 45%,rgba(121,24,30,.08) 58%,rgba(178,48,43,.13) 68%,rgba(243,128,76,.10) 77%,rgba(255,255,255,0) 92%);
    filter:blur(24px);
    opacity:.43;
  }

  /* 러너 주위 안개는 더 작게 쪼개고, 지나가는 방향으로 따뜻한 기운을 받게 한다. */
  .banner-runner-fade-track::before{
    left:-108px;
    bottom:0;
    width:500px;
    height:78px;
    border-radius:0;
    background:
      radial-gradient(ellipse 25% 70% at 17% 67%, rgba(235,242,249,.08) 0%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 32% 86% at 43% 48%, rgba(246,248,250,.16) 0%, rgba(231,238,244,.065) 48%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 24% 58% at 62% 72%, rgba(255,239,221,.16) 0%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 28% 82% at 82% 47%, rgba(255,203,163,.16) 0%, rgba(229,107,82,.07) 48%, rgba(255,255,255,0) 79%);
    filter:blur(21px);
    opacity:.48;
  }

  .banner-runner-fade-track::after{
    left:-18px;
    bottom:15px;
    width:340px;
    height:42px;
    border-radius:0;
    background:
      radial-gradient(ellipse 38% 76% at 31% 55%, rgba(241,246,250,.09) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 42% 84% at 68% 50%, rgba(255,220,194,.11) 0%, rgba(242,150,112,.05) 49%, rgba(255,255,255,0) 78%);
    filter:blur(16px);
    opacity:.42;
  }

  .banner-runner-fade-track{
    animation:studyhopeRunnerFadeAcross34 18s linear infinite;
  }
}

@keyframes studyhopeNaturalFog34A{
  0%{transform:translate3d(-3.4%,2px,0) scaleX(.98) scaleY(.92);opacity:.34;}
  24%{transform:translate3d(-1.1%,-4px,0) scaleX(1.02) scaleY(1.07);opacity:.42;}
  51%{transform:translate3d(1.2%,1px,0) scaleX(.99) scaleY(.96);opacity:.38;}
  76%{transform:translate3d(3.0%,-3px,0) scaleX(1.035) scaleY(1.10);opacity:.44;}
  100%{transform:translate3d(4.8%,1px,0) scaleX(1.01) scaleY(.94);opacity:.37;}
}
@keyframes studyhopeNaturalFog34B{
  0%{transform:translate3d(3.5%,0,0) scaleX(1.01) scaleY(.94);opacity:.24;}
  31%{transform:translate3d(1.0%,-5px,0) scaleX(.98) scaleY(1.11);opacity:.31;}
  67%{transform:translate3d(-1.9%,2px,0) scaleX(1.03) scaleY(.97);opacity:.27;}
  100%{transform:translate3d(-4.2%,-2px,0) scaleX(.99) scaleY(1.08);opacity:.30;}
}
@keyframes studyhopeNaturalFog34C{
  0%{transform:translate3d(-2.4%,1px,0) scaleX(.985) scaleY(1.04);opacity:.16;}
  33%{transform:translate3d(.2%,-6px,0) scaleX(1.02) scaleY(.92);opacity:.22;}
  69%{transform:translate3d(2.1%,-1px,0) scaleX(.99) scaleY(1.12);opacity:.19;}
  100%{transform:translate3d(4.0%,-5px,0) scaleX(1.025) scaleY(.96);opacity:.22;}
}

@keyframes studyhopeRunnerFadeAcross34{
  0%{transform:translate3d(0,0,0);opacity:.14;filter:none;}
  3%{opacity:.72;filter:none;}
  45%{filter:sepia(.05) saturate(1.04);}
  68%{filter:sepia(.18) saturate(1.16) brightness(1.02);}
  84%{opacity:.76;filter:sepia(.30) saturate(1.28) brightness(1.05);}
  92%{opacity:.66;filter:sepia(.38) saturate(1.36) brightness(1.07);}
  97%{opacity:.34;filter:sepia(.42) saturate(1.42) brightness(1.08);}
  100%{transform:translate3d(calc(100vw - 40px),0,0);opacity:0;filter:sepia(.45) saturate(1.45) brightness(1.08);}
}


/* 2026-09-08 메인 배너 37단계 — 이전 작품형 유지 / 높낮이 안개층 + 바람결 흩날림 미세 강화 */
@media (min-width:681px){
  /* 실사진 없이 검은 캔버스 위에 새벽을 그리는 느낌을 유지하되, 안개 높낮이와 여백을 더 자연스럽게 다듬는다. */
  .main-banner-stage{
    background:
      radial-gradient(ellipse 24% 10% at 8% 90%, rgba(220,229,240,.07) 0%, rgba(166,180,197,.028) 42%, rgba(5,5,5,0) 76%),
      radial-gradient(ellipse 16% 14% at 24% 86%, rgba(229,236,244,.08) 0%, rgba(177,190,205,.03) 42%, rgba(5,5,5,0) 77%),
      radial-gradient(ellipse 22% 9% at 42% 92%, rgba(226,233,241,.065) 0%, rgba(168,181,197,.028) 43%, rgba(5,5,5,0) 78%),
      radial-gradient(ellipse 15% 15% at 56% 85%, rgba(234,233,229,.065) 0%, rgba(200,190,182,.03) 41%, rgba(5,5,5,0) 77%),
      radial-gradient(ellipse 20% 13% at 72% 90%, rgba(255,222,194,.085) 0%, rgba(228,176,144,.038) 44%, rgba(5,5,5,0) 78%),
      radial-gradient(ellipse 18% 14% at 85% 87%, rgba(255,188,141,.10) 0%, rgba(217,103,80,.052) 44%, rgba(5,5,5,0) 78%),
      radial-gradient(ellipse 16% 16% at 96% 84%, rgba(255,176,123,.12) 0%, rgba(196,71,60,.06) 46%, rgba(5,5,5,0) 79%),
      radial-gradient(ellipse 16% 15% at 97% 67%, rgba(255,239,195,.23) 0%, rgba(255,204,127,.16) 20%, rgba(255,143,79,.08) 43%, rgba(5,5,5,0) 74%),
      radial-gradient(ellipse 55% 22% at 86% 60%, rgba(153,33,35,.16) 0%, rgba(86,18,25,.09) 40%, rgba(5,5,5,0) 76%),
      radial-gradient(ellipse 90% 44% at 92% 22%, rgba(90,24,31,.13) 0%, rgba(46,14,22,.075) 35%, rgba(5,5,5,0) 74%),
      linear-gradient(180deg,#020204 0%, #040507 26%, #08101d 58%, #0d1532 100%);
  }

  /* 광선은 하나의 일출 위치에서만 얇게 퍼지도록 하고, 그림 느낌을 깨지 않게 아주 은은하게 유지한다. */
  .main-banner-stage::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 26% 22% at 96% 68%, rgba(255,235,193,.22) 0%, rgba(255,187,119,.14) 22%, rgba(239,113,78,.065) 45%, rgba(5,5,5,0) 78%),
      conic-gradient(from 188deg at 96% 68%,
        rgba(255,255,255,0) 0deg 8deg,
        rgba(255,225,171,.07) 8deg 12deg,
        rgba(255,255,255,0) 12deg 21deg,
        rgba(255,198,140,.055) 21deg 25deg,
        rgba(255,255,255,0) 25deg 34deg,
        rgba(255,236,198,.04) 34deg 37deg,
        rgba(255,255,255,0) 37deg 360deg),
      radial-gradient(ellipse 40% 10% at 83% 78%, rgba(255,216,176,.085) 0%, rgba(247,170,123,.04) 34%, rgba(5,5,5,0) 74%);
    filter:blur(18px);
    opacity:.28;
    mix-blend-mode:screen;
    animation:studyhopeSunriseRays37 22s ease-in-out infinite alternate;
  }

  /* 오른쪽의 희망빛은 회백색 안개 속으로 살구빛과 금주황빛이 스며드는 정도로만 조정한다. */
  .main-banner-stage::after{
    width:82%;
    height:84%;
    background:
      radial-gradient(ellipse 40% 18% at 96% 73%, rgba(255,232,190,.25) 0%, rgba(255,183,118,.15) 26%, rgba(236,104,71,.07) 50%, rgba(5,5,5,0) 79%),
      radial-gradient(ellipse 49% 14% at 89% 84%, rgba(255,201,149,.16) 0%, rgba(229,109,82,.08) 36%, rgba(165,50,52,.03) 58%, rgba(5,5,5,0) 81%),
      radial-gradient(ellipse 38% 11% at 71% 89%, rgba(255,224,196,.10) 0%, rgba(243,170,132,.045) 43%, rgba(5,5,5,0) 79%),
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(151,46,41,.045) 63%, rgba(232,125,79,.055) 76%, rgba(255,255,255,0) 92%);
    filter:blur(22px);
    opacity:.34;
  }

  /* 전경 안개: 낮게 깔리되, 중간중간 비어 있어 바닥 전체가 띠처럼 보이지 않게 한다. */
  .banner-base-fog.fog-1{
    left:-7%;
    bottom:-2px;
    width:121%;
    height:126px;
    background:
      radial-gradient(ellipse 12% 44% at 6% 82%, rgba(233,239,247,.10) 0%, rgba(223,232,243,.04) 50%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 17% 72% at 18% 63%, rgba(240,245,250,.15) 0%, rgba(228,235,243,.055) 46%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 10% 40% at 29% 83%, rgba(235,241,247,.08) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 20% 64% at 42% 59%, rgba(244,247,250,.15) 0%, rgba(231,237,243,.058) 46%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 9% 37% at 55% 84%, rgba(245,243,238,.08) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 16% 68% at 66% 61%, rgba(255,229,206,.15) 0%, rgba(245,191,154,.062) 47%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 11% 43% at 77% 80%, rgba(255,204,165,.12) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 18% 70% at 88% 60%, rgba(255,182,134,.15) 0%, rgba(222,100,77,.068) 46%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 10% 44% at 98% 74%, rgba(242,140,105,.12) 0%, rgba(186,59,57,.055) 46%, rgba(255,255,255,0) 78%);
    filter:blur(24px);
    opacity:.34;
    animation:studyhopeNaturalFog37A 33s ease-in-out infinite alternate;
  }

  /* 중경 안개: 높낮이가 가장 잘 보이는 주 안개층. 일부는 낮고 일부는 살짝 떠서 자연스럽게 연결된다. */
  .banner-base-fog.fog-2{
    left:-4%;
    bottom:36px;
    width:112%;
    height:106px;
    background:
      radial-gradient(ellipse 11% 61% at 8% 66%, rgba(229,238,246,.075) 0%, rgba(220,230,241,.028) 50%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 18% 78% at 24% 45%, rgba(241,245,249,.11) 0%, rgba(228,235,242,.04) 48%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 10% 45% at 39% 74%, rgba(238,243,248,.06) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 19% 72% at 56% 51%, rgba(249,239,228,.11) 0%, rgba(241,214,190,.042) 48%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 12% 76% at 71% 43%, rgba(255,215,182,.11) 0%, rgba(245,167,128,.045) 48%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 19% 60% at 87% 61%, rgba(255,178,133,.12) 0%, rgba(220,90,73,.05) 48%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 9% 43% at 98% 41%, rgba(235,112,88,.085) 0%, rgba(176,49,53,.035) 48%, rgba(255,255,255,0) 78%);
    filter:blur(20px);
    opacity:.23;
    animation:studyhopeNaturalFog37B 39s ease-in-out infinite alternate;
  }

  /* 상층 안개: 바람에 살짝 들려 있는 옅은 층. 위아래 변화가 더 느리게 보이도록 조정한다. */
  .banner-base-fog.fog-3{
    left:-5%;
    bottom:74px;
    width:116%;
    height:92px;
    background:
      radial-gradient(ellipse 11% 62% at 12% 61%, rgba(232,240,248,.055) 0%, rgba(220,230,240,.02) 50%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 8% 38% at 31% 73%, rgba(239,244,248,.045) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 15% 76% at 47% 42%, rgba(245,244,240,.06) 0%, rgba(231,226,219,.022) 49%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 10% 46% at 63% 68%, rgba(255,226,205,.06) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 16% 72% at 79% 43%, rgba(255,192,149,.075) 0%, rgba(225,116,88,.03) 49%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 9% 42% at 95% 66%, rgba(239,132,102,.06) 0%, rgba(180,52,55,.025) 49%, rgba(255,255,255,0) 78%);
    filter:blur(18px);
    opacity:.16;
    animation:studyhopeNaturalFog37C 46s ease-in-out infinite alternate;
  }

  /* 러너 주변은 과하지 않게, 안개가 살짝 흩날리며 지나가는 느낌만 유지한다. */
  .banner-runner-fade-track::before{
    left:-112px;
    bottom:2px;
    width:486px;
    height:74px;
    background:
      radial-gradient(ellipse 23% 66% at 18% 68%, rgba(235,242,249,.065) 0%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 31% 82% at 43% 48%, rgba(246,248,250,.12) 0%, rgba(231,238,244,.045) 48%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 22% 54% at 63% 74%, rgba(255,239,221,.12) 0%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 26% 78% at 82% 46%, rgba(255,203,163,.12) 0%, rgba(229,107,82,.04) 48%, rgba(255,255,255,0) 79%);
    filter:blur(20px);
    opacity:.35;
    animation:studyhopeRunnerMist37 5.6s ease-in-out infinite alternate;
  }

  .banner-runner-fade-track::after{
    left:-20px;
    bottom:16px;
    width:326px;
    height:40px;
    background:
      radial-gradient(ellipse 37% 74% at 31% 55%, rgba(241,246,250,.07) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 40% 82% at 68% 50%, rgba(255,220,194,.085) 0%, rgba(242,150,112,.03) 49%, rgba(255,255,255,0) 78%);
    filter:blur(15px);
    opacity:.29;
  }

  .banner-runner-fade-track{
    animation:studyhopeRunnerFadeAcross37 18s linear infinite;
  }

  .banner-runner-trail{
    width:720px;
    height:40px;
    filter:blur(24px);
    opacity:.82;
  }
}

@keyframes studyhopeSunriseRays37{
  0%{transform:translate3d(.4%,.3%,0) scale(.99);opacity:.22;filter:blur(17px);}  
  50%{transform:translate3d(0,0,0) scale(1.01);opacity:.28;filter:blur(18px);}  
  100%{transform:translate3d(-.35%,-.25%,0) scale(1.025);opacity:.31;filter:blur(19px);} 
}
@keyframes studyhopeNaturalFog37A{
  0%{transform:translate3d(-2.8%,1px,0) scaleX(.985) scaleY(.91) skewX(-.7deg);opacity:.30;}
  27%{transform:translate3d(-.9%,-4px,0) scaleX(1.018) scaleY(1.07) skewX(.5deg);opacity:.35;}
  58%{transform:translate3d(1.0%,1px,0) scaleX(.995) scaleY(.97) skewX(-.4deg);opacity:.32;}
  82%{transform:translate3d(2.7%,-3px,0) scaleX(1.03) scaleY(1.10) skewX(.6deg);opacity:.36;}
  100%{transform:translate3d(4.0%,1px,0) scaleX(1.01) scaleY(.94) skewX(-.3deg);opacity:.31;}
}
@keyframes studyhopeNaturalFog37B{
  0%{transform:translate3d(2.8%,0,0) scaleX(1.01) scaleY(.93) skewX(.6deg);opacity:.18;}
  32%{transform:translate3d(.8%,-5px,0) scaleX(.985) scaleY(1.10) skewX(-.5deg);opacity:.24;}
  68%{transform:translate3d(-1.5%,2px,0) scaleX(1.025) scaleY(.98) skewX(.4deg);opacity:.21;}
  100%{transform:translate3d(-3.8%,-2px,0) scaleX(.995) scaleY(1.07) skewX(-.3deg);opacity:.23;}
}
@keyframes studyhopeNaturalFog37C{
  0%{transform:translate3d(-2.0%,1px,0) scaleX(.988) scaleY(1.03) skewX(-.5deg);opacity:.13;}
  35%{transform:translate3d(.2%,-6px,0) scaleX(1.02) scaleY(.92) skewX(.4deg);opacity:.17;}
  71%{transform:translate3d(1.9%,-1px,0) scaleX(.994) scaleY(1.11) skewX(-.3deg);opacity:.15;}
  100%{transform:translate3d(3.6%,-5px,0) scaleX(1.022) scaleY(.97) skewX(.3deg);opacity:.17;}
}
@keyframes studyhopeRunnerMist37{
  0%{transform:translate3d(-4px,1px,0) scaleX(.975) scaleY(.93);opacity:.29;}
  52%{transform:translate3d(2px,-2px,0) scaleX(1.03) scaleY(1.08);opacity:.37;}
  100%{transform:translate3d(6px,1px,0) scaleX(1.01) scaleY(.96);opacity:.32;}
}
@keyframes studyhopeRunnerFadeAcross37{
  0%{transform:translate3d(0,0,0);opacity:.13;filter:none;}
  3%{opacity:.68;filter:none;}
  46%{filter:sepia(.04) saturate(1.03);} 
  68%{filter:sepia(.13) saturate(1.12) brightness(1.01);} 
  84%{opacity:.71;filter:sepia(.22) saturate(1.20) brightness(1.03);} 
  92%{opacity:.58;filter:sepia(.28) saturate(1.26) brightness(1.04);} 
  97%{opacity:.30;filter:sepia(.31) saturate(1.30) brightness(1.05);} 
  100%{transform:translate3d(calc(100vw - 40px),0,0);opacity:0;filter:sepia(.33) saturate(1.32) brightness(1.05);} 
}

@media (prefers-reduced-motion: reduce){
  .main-banner-stage::before,
  .banner-base-fog,
  .banner-runner-fade-track,
  .banner-runner-fade-track::before{animation:none!important;}
}


/* 2026-09-08 메인 배너 38단계 — 배경안개/러너안개 분리 강화 + 러너가 달리는 안개 공간 형성 */
@media (min-width:681px){
  /* 기본 배경 안개: 높낮이는 유지하고 농도와 백색감을 올려 공간 자체를 안개 지역으로 만든다. */
  .banner-base-fog.fog-1{
    height:132px;
    filter:blur(25px);
    opacity:.46;
    background:
      radial-gradient(ellipse 13% 48% at 6% 82%, rgba(240,244,249,.13) 0%, rgba(231,238,246,.055) 48%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 18% 76% at 18% 63%, rgba(244,247,251,.20) 0%, rgba(233,239,246,.078) 45%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 11% 42% at 29% 83%, rgba(238,243,249,.11) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 21% 68% at 42% 59%, rgba(247,249,251,.19) 0%, rgba(235,240,246,.080) 46%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 10% 40% at 55% 84%, rgba(247,245,240,.10) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 17% 70% at 66% 61%, rgba(255,236,217,.19) 0%, rgba(247,202,170,.086) 46%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 12% 46% at 77% 80%, rgba(255,216,184,.15) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 19% 72% at 88% 60%, rgba(255,193,151,.19) 0%, rgba(230,113,89,.088) 46%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 11% 46% at 98% 74%, rgba(247,155,119,.15) 0%, rgba(194,70,63,.070) 46%, rgba(255,255,255,0) 78%);
    animation:studyhopeNaturalFog38A 34s ease-in-out infinite alternate;
  }

  .banner-base-fog.fog-2{
    bottom:34px;
    height:116px;
    filter:blur(22px);
    opacity:.34;
    background:
      radial-gradient(ellipse 12% 64% at 8% 66%, rgba(236,242,248,.10) 0%, rgba(224,233,242,.040) 49%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 19% 80% at 24% 45%, rgba(245,247,250,.15) 0%, rgba(231,238,244,.056) 47%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 11% 48% at 39% 74%, rgba(241,245,249,.09) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 20% 74% at 56% 51%, rgba(251,243,233,.15) 0%, rgba(244,220,198,.056) 47%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 13% 79% at 71% 43%, rgba(255,223,194,.15) 0%, rgba(247,176,140,.058) 47%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 20% 62% at 87% 61%, rgba(255,188,147,.16) 0%, rgba(226,101,81,.065) 47%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 10% 45% at 98% 41%, rgba(241,126,100,.11) 0%, rgba(184,57,58,.048) 47%, rgba(255,255,255,0) 78%);
    animation:studyhopeNaturalFog38B 40s ease-in-out infinite alternate;
  }

  .banner-base-fog.fog-3{
    bottom:76px;
    height:98px;
    filter:blur(20px);
    opacity:.24;
    background:
      radial-gradient(ellipse 12% 64% at 12% 61%, rgba(236,243,249,.08) 0%, rgba(223,232,241,.028) 50%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 9% 40% at 31% 73%, rgba(242,246,249,.07) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 16% 78% at 47% 42%, rgba(248,246,242,.08) 0%, rgba(236,230,222,.028) 49%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 11% 48% at 63% 68%, rgba(255,233,214,.08) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 17% 74% at 79% 43%, rgba(255,202,163,.10) 0%, rgba(232,129,99,.040) 49%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 10% 44% at 95% 66%, rgba(243,144,114,.08) 0%, rgba(187,59,59,.032) 49%, rgba(255,255,255,0) 78%);
    animation:studyhopeNaturalFog38C 48s ease-in-out infinite alternate;
  }

  /* 러너가 실제로 안개 속을 달리는 것처럼, 러너 주변의 이동 안개를 배경 안개와 구분해서 강화한다. */
  .banner-runner-fade-track{
    z-index:4;
    bottom:39px;
    width:356px;
    height:96px;
    animation:studyhopeRunnerFadeAcross38 18s linear infinite;
    isolation:isolate;
  }

  .banner-runner-fade-track::before{
    content:"";
    position:absolute;
    left:-138px;
    bottom:-1px;
    width:590px;
    height:92px;
    background:
      radial-gradient(ellipse 22% 60% at 14% 69%, rgba(242,246,250,.11) 0%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 31% 84% at 38% 48%, rgba(249,251,252,.23) 0%, rgba(236,241,246,.085) 48%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 25% 60% at 58% 72%, rgba(255,244,231,.20) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 28% 80% at 80% 47%, rgba(255,214,181,.20) 0%, rgba(237,122,92,.074) 48%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 14% 48% at 96% 72%, rgba(246,154,119,.13) 0%, rgba(255,255,255,0) 77%);
    filter:blur(22px);
    opacity:.62;
    mix-blend-mode:screen;
    animation:studyhopeRunnerMist38 5.2s ease-in-out infinite alternate;
  }

  .banner-runner-fade-track::after{
    content:"";
    position:absolute;
    left:-36px;
    bottom:14px;
    width:390px;
    height:50px;
    background:
      radial-gradient(ellipse 40% 76% at 28% 55%, rgba(243,247,250,.12) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 42% 84% at 66% 50%, rgba(255,226,203,.14) 0%, rgba(245,161,123,.055) 49%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 18% 72% at 90% 50%, rgba(247,176,139,.08) 0%, rgba(255,255,255,0) 78%);
    filter:blur(16px);
    opacity:.52;
    mix-blend-mode:screen;
  }

  .banner-runner-sprite{
    z-index:2;
    opacity:.96;
    filter:invert(.04) brightness(.82) contrast(1.16) drop-shadow(0 0 1px rgba(255,255,255,.22)) drop-shadow(0 0 7px rgba(255,236,204,.10));
  }

  .banner-runner-trail{
    z-index:3;
    left:-450px;
    bottom:34px;
    width:820px;
    height:52px;
    background:
      radial-gradient(ellipse 28% 82% at 30% 56%, rgba(242,247,250,.060) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 35% 80% at 59% 56%, rgba(255,236,220,.078) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 23% 84% at 82% 47%, rgba(255,193,154,.068) 0%, rgba(210,89,72,.025) 45%, rgba(255,255,255,0) 78%);
    filter:blur(24px);
    opacity:.94;
  }
}

@keyframes studyhopeNaturalFog38A{
  0%{transform:translate3d(-2.6%,1px,0) scaleX(.988) scaleY(.92) skewX(-.6deg);opacity:.40;}
  27%{transform:translate3d(-.8%,-4px,0) scaleX(1.02) scaleY(1.08) skewX(.5deg);opacity:.47;}
  58%{transform:translate3d(1.0%,1px,0) scaleX(.996) scaleY(.98) skewX(-.3deg);opacity:.44;}
  82%{transform:translate3d(2.8%,-3px,0) scaleX(1.032) scaleY(1.11) skewX(.6deg);opacity:.49;}
  100%{transform:translate3d(4.1%,1px,0) scaleX(1.012) scaleY(.95) skewX(-.2deg);opacity:.43;}
}
@keyframes studyhopeNaturalFog38B{
  0%{transform:translate3d(2.6%,0,0) scaleX(1.01) scaleY(.94) skewX(.5deg);opacity:.28;}
  32%{transform:translate3d(.7%,-5px,0) scaleX(.988) scaleY(1.11) skewX(-.5deg);opacity:.35;}
  68%{transform:translate3d(-1.6%,2px,0) scaleX(1.026) scaleY(.99) skewX(.4deg);opacity:.31;}
  100%{transform:translate3d(-3.9%,-2px,0) scaleX(.996) scaleY(1.08) skewX(-.3deg);opacity:.34;}
}
@keyframes studyhopeNaturalFog38C{
  0%{transform:translate3d(-1.9%,1px,0) scaleX(.989) scaleY(1.03) skewX(-.4deg);opacity:.20;}
  35%{transform:translate3d(.3%,-6px,0) scaleX(1.02) scaleY(.93) skewX(.4deg);opacity:.25;}
  71%{transform:translate3d(1.9%,-1px,0) scaleX(.995) scaleY(1.12) skewX(-.3deg);opacity:.22;}
  100%{transform:translate3d(3.7%,-5px,0) scaleX(1.022) scaleY(.98) skewX(.3deg);opacity:.24;}
}
@keyframes studyhopeRunnerMist38{
  0%{transform:translate3d(-6px,1px,0) scaleX(.97) scaleY(.92);opacity:.54;}
  50%{transform:translate3d(2px,-3px,0) scaleX(1.04) scaleY(1.10);opacity:.64;}
  100%{transform:translate3d(8px,1px,0) scaleX(1.01) scaleY(.97);opacity:.58;}
}
@keyframes studyhopeRunnerFadeAcross38{
  0%{transform:translate3d(0,0,0);opacity:.18;filter:none;}
  3%{opacity:.76;filter:none;}
  45%{filter:sepia(.04) saturate(1.05);} 
  68%{filter:sepia(.14) saturate(1.16) brightness(1.02);} 
  84%{opacity:.80;filter:sepia(.24) saturate(1.24) brightness(1.04);} 
  92%{opacity:.68;filter:sepia(.31) saturate(1.32) brightness(1.05);} 
  97%{opacity:.36;filter:sepia(.36) saturate(1.36) brightness(1.06);} 
  100%{transform:translate3d(calc(100vw - 40px),0,0);opacity:0;filter:sepia(.38) saturate(1.38) brightness(1.06);} 
}

@media (prefers-reduced-motion: reduce){
  .banner-base-fog,
  .banner-runner-fade-track,
  .banner-runner-fade-track::before{animation:none!important;}
}


/* 2026-09-08 메인 배너 39단계 — 38단계 미세조정 / 러너 이동안개를 덩어리화하고 배경안개 높낮이 보강 */
@media (min-width:681px){
  /* 배경안개를 조금 더 위로 세워 높낮이를 살린다. */
  .banner-base-fog.fog-2{
    bottom:52px;
    height:122px;
    opacity:.32;
    background:
      radial-gradient(ellipse 12% 66% at 8% 63%, rgba(236,242,248,.11) 0%, rgba(224,233,242,.042) 49%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 18% 82% at 23% 41%, rgba(245,247,250,.15) 0%, rgba(231,238,244,.056) 47%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 10% 44% at 37% 70%, rgba(241,245,249,.09) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 19% 72% at 55% 46%, rgba(251,243,233,.15) 0%, rgba(244,220,198,.056) 47%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 13% 81% at 70% 39%, rgba(255,223,194,.15) 0%, rgba(247,176,140,.058) 47%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 19% 64% at 86% 56%, rgba(255,188,147,.16) 0%, rgba(226,101,81,.065) 47%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 10% 46% at 97% 37%, rgba(241,126,100,.11) 0%, rgba(184,57,58,.048) 47%, rgba(255,255,255,0) 79%);
    animation:studyhopeNaturalFog39B 41s ease-in-out infinite alternate;
  }

  .banner-base-fog.fog-3{
    bottom:108px;
    height:104px;
    opacity:.22;
    background:
      radial-gradient(ellipse 12% 67% at 12% 59%, rgba(236,243,249,.08) 0%, rgba(223,232,241,.028) 50%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 9% 41% at 30% 70%, rgba(242,246,249,.07) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 16% 80% at 46% 38%, rgba(248,246,242,.08) 0%, rgba(236,230,222,.028) 49%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 11% 48% at 62% 64%, rgba(255,233,214,.08) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 17% 76% at 78% 38%, rgba(255,202,163,.10) 0%, rgba(232,129,99,.040) 49%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 10% 45% at 94% 62%, rgba(243,144,114,.08) 0%, rgba(187,59,59,.032) 49%, rgba(255,255,255,0) 79%);
    animation:studyhopeNaturalFog39C 50s ease-in-out infinite alternate;
  }

  /* 러너가 달리는 이동안개는 긴 띠가 아니라, 러너 주변 3~4개의 안개 덩어리로 재구성한다. */
  .banner-runner-fade-track{
    z-index:4;
    bottom:40px;
    width:300px;
    height:100px;
    animation:studyhopeRunnerFadeAcross39 18s linear infinite;
  }

  .banner-runner-fade-track::before{
    left:-72px;
    bottom:8px;
    width:430px;
    height:82px;
    background:
      radial-gradient(ellipse 16% 52% at 12% 69%, rgba(243,247,250,.08) 0%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 18% 64% at 31% 54%, rgba(249,251,252,.19) 0%, rgba(236,241,246,.072) 47%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 13% 46% at 49% 72%, rgba(245,248,250,.11) 0%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 18% 66% at 66% 49%, rgba(255,239,224,.16) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 13% 50% at 84% 67%, rgba(255,218,188,.14) 0%, rgba(241,142,111,.055) 47%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 10% 40% at 97% 53%, rgba(247,168,130,.08) 0%, rgba(255,255,255,0) 77%);
    filter:blur(20px);
    opacity:.58;
    animation:studyhopeRunnerMist39 5.4s ease-in-out infinite alternate;
  }

  .banner-runner-fade-track::after{
    left:-14px;
    bottom:18px;
    width:292px;
    height:44px;
    background:
      radial-gradient(ellipse 26% 76% at 20% 56%, rgba(243,247,250,.08) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 30% 84% at 48% 50%, rgba(250,251,252,.13) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 24% 80% at 73% 51%, rgba(255,227,206,.14) 0%, rgba(245,161,123,.052) 49%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 12% 66% at 93% 50%, rgba(247,180,145,.07) 0%, rgba(255,255,255,0) 78%);
    filter:blur(15px);
    opacity:.46;
  }

  /* 러너와 함께 움직이는 발밑 안개 꼬리도 더 짧고 자연스럽게 조정 */
  .banner-runner-trail{
    left:-310px;
    bottom:38px;
    width:540px;
    height:48px;
    background:
      radial-gradient(ellipse 26% 82% at 22% 56%, rgba(242,247,250,.042) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 22% 76% at 47% 56%, rgba(246,249,251,.055) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 26% 82% at 75% 54%, rgba(255,233,216,.072) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 16% 74% at 93% 50%, rgba(255,197,161,.050) 0%, rgba(210,89,72,.018) 45%, rgba(255,255,255,0) 78%);
    filter:blur(22px);
    opacity:.78;
  }

  .banner-runner-sprite{
    opacity:.98;
    filter:invert(.03) brightness(.79) contrast(1.18) drop-shadow(0 0 1px rgba(255,255,255,.24)) drop-shadow(0 0 8px rgba(255,239,212,.11));
  }
}

@keyframes studyhopeNaturalFog39B{
  0%{transform:translate3d(2.3%,0,0) scaleX(1.008) scaleY(.95) skewX(.4deg);opacity:.27;}
  32%{transform:translate3d(.6%,-5px,0) scaleX(.989) scaleY(1.12) skewX(-.4deg);opacity:.34;}
  68%{transform:translate3d(-1.5%,2px,0) scaleX(1.024) scaleY(.99) skewX(.3deg);opacity:.30;}
  100%{transform:translate3d(-3.6%,-2px,0) scaleX(.996) scaleY(1.08) skewX(-.2deg);opacity:.32;}
}
@keyframes studyhopeNaturalFog39C{
  0%{transform:translate3d(-1.8%,1px,0) scaleX(.99) scaleY(1.03) skewX(-.3deg);opacity:.18;}
  35%{transform:translate3d(.3%,-6px,0) scaleX(1.02) scaleY(.93) skewX(.3deg);opacity:.23;}
  71%{transform:translate3d(1.8%,-1px,0) scaleX(.995) scaleY(1.11) skewX(-.2deg);opacity:.20;}
  100%{transform:translate3d(3.5%,-5px,0) scaleX(1.022) scaleY(.98) skewX(.2deg);opacity:.22;}
}
@keyframes studyhopeRunnerMist39{
  0%{transform:translate3d(-5px,1px,0) scaleX(.975) scaleY(.93) skewX(-.4deg);opacity:.52;}
  50%{transform:translate3d(2px,-3px,0) scaleX(1.04) scaleY(1.09) skewX(.3deg);opacity:.61;}
  100%{transform:translate3d(7px,1px,0) scaleX(1.01) scaleY(.97) skewX(-.2deg);opacity:.55;}
}
@keyframes studyhopeRunnerFadeAcross39{
  0%{transform:translate3d(0,0,0);opacity:.18;filter:none;}
  3%{opacity:.76;filter:none;}
  45%{filter:sepia(.04) saturate(1.05);} 
  68%{filter:sepia(.14) saturate(1.16) brightness(1.02);} 
  84%{opacity:.79;filter:sepia(.24) saturate(1.24) brightness(1.04);} 
  92%{opacity:.66;filter:sepia(.31) saturate(1.32) brightness(1.05);} 
  97%{opacity:.34;filter:sepia(.36) saturate(1.36) brightness(1.06);} 
  100%{transform:translate3d(calc(100vw - 40px),0,0);opacity:0;filter:sepia(.38) saturate(1.38) brightness(1.06);} 
}

@media (prefers-reduced-motion: reduce){
  .banner-base-fog.fog-2,
  .banner-base-fog.fog-3,
  .banner-runner-fade-track,
  .banner-runner-fade-track::before{animation:none!important;}
}


/* 2026-09-08 메인 배너 40단계 — 러너 접지감 보정 / 약간 떠보이는 느낌 수정 */
@media (min-width:681px){
  /* 러너 전체 위치를 소폭 아래로 내려 안개 바닥을 딛는 느낌으로 정리 */
  .banner-runner-fade-track{
    bottom:31px;
    height:102px;
    animation:studyhopeRunnerFadeAcross40 18s linear infinite;
  }

  /* 러너와 함께 이동하는 전용 안개도 발밑 중심으로 약간 아래에 모이게 조정 */
  .banner-runner-fade-track::before{
    left:-72px;
    bottom:2px;
    width:426px;
    height:76px;
    filter:blur(19px);
    opacity:.54;
    animation:studyhopeRunnerMist40 5.3s ease-in-out infinite alternate;
  }

  .banner-runner-fade-track::after{
    left:-10px;
    bottom:10px;
    width:274px;
    height:34px;
    background:
      radial-gradient(ellipse 24% 78% at 20% 58%, rgba(243,247,250,.07) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 30% 86% at 48% 52%, rgba(250,251,252,.12) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 25% 82% at 73% 52%, rgba(255,229,209,.13) 0%, rgba(245,161,123,.046) 49%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 11% 66% at 92% 52%, rgba(247,180,145,.06) 0%, rgba(255,255,255,0) 78%);
    filter:blur(13px);
    opacity:.42;
  }

  /* 러너 자체도 조금 아래로 내려 접지감을 강화 */
  .banner-runner-sprite{
    opacity:.98;
    filter:invert(.03) brightness(.78) contrast(1.20) drop-shadow(0 0 1px rgba(255,255,255,.24)) drop-shadow(0 0 7px rgba(255,239,212,.10));
  }

  /* 발밑 접지용 아주 얇은 그림자/안개를 추가하여 떠 있는 느낌을 제거 */
/* 러너와 함께 끌려가는 안개 꼬리도 조금 아래로, 조금 짧게 정리 */
  .banner-runner-trail{
    left:-292px;
    bottom:31px;
    width:500px;
    height:42px;
    filter:blur(20px);
    opacity:.72;
  }
}

@keyframes studyhopeRunnerMist40{
  0%{transform:translate3d(-5px,1px,0) scaleX(.978) scaleY(.92) skewX(-.3deg);opacity:.49;}
  50%{transform:translate3d(2px,-2px,0) scaleX(1.035) scaleY(1.08) skewX(.2deg);opacity:.57;}
  100%{transform:translate3d(6px,1px,0) scaleX(1.01) scaleY(.97) skewX(-.2deg);opacity:.52;}
}
@keyframes studyhopeRunnerFadeAcross40{
  0%{transform:translate3d(0,0,0);opacity:.18;filter:none;}
  3%{opacity:.76;filter:none;}
  45%{filter:sepia(.04) saturate(1.05);} 
  68%{filter:sepia(.14) saturate(1.16) brightness(1.02);} 
  84%{opacity:.79;filter:sepia(.24) saturate(1.24) brightness(1.04);} 
  92%{opacity:.66;filter:sepia(.31) saturate(1.32) brightness(1.05);} 
  97%{opacity:.34;filter:sepia(.36) saturate(1.36) brightness(1.06);} 
  100%{transform:translate3d(calc(100vw - 40px),0,0);opacity:0;filter:sepia(.38) saturate(1.38) brightness(1.06);} 
}

@media (prefers-reduced-motion: reduce){
  .banner-runner-fade-track,
  .banner-runner-fade-track::before{animation:none!important;}
}


/* 2026-09-08 메인 배너 41단계 — 러너 세로 위치 원위치 복귀 */
@media (min-width:681px){
  /* 접지감 보정은 유지하되, 러너 자체는 위치 변경 전보다 더 낮게 복귀시킨다. */
  .banner-runner-fade-track{
    bottom:18px;
    height:96px;
    animation:studyhopeRunnerFadeAcross41 18s linear infinite;
  }

  .banner-runner-fade-track::before{
    left:-74px;
    bottom:0;
    width:430px;
    height:74px;
    filter:blur(19px);
    opacity:.54;
    animation:studyhopeRunnerMist41 5.3s ease-in-out infinite alternate;
  }

  .banner-runner-fade-track::after{
    left:-12px;
    bottom:7px;
    width:276px;
    height:34px;
    filter:blur(13px);
    opacity:.42;
  }

  .banner-runner-sprite{
    opacity:.98;
    filter:invert(.03) brightness(.78) contrast(1.20) drop-shadow(0 0 1px rgba(255,255,255,.24)) drop-shadow(0 0 7px rgba(255,239,212,.10));
  }
.banner-runner-trail{
    left:-292px;
    bottom:19px;
    width:500px;
    height:40px;
    filter:blur(20px);
    opacity:.72;
  }
}

@keyframes studyhopeRunnerMist41{
  0%{transform:translate3d(-5px,1px,0) scaleX(.978) scaleY(.92) skewX(-.3deg);opacity:.49;}
  50%{transform:translate3d(2px,-2px,0) scaleX(1.035) scaleY(1.08) skewX(.2deg);opacity:.57;}
  100%{transform:translate3d(6px,1px,0) scaleX(1.01) scaleY(.97) skewX(-.2deg);opacity:.52;}
}
@keyframes studyhopeRunnerFadeAcross41{
  0%{transform:translate3d(0,0,0);opacity:.18;filter:none;}
  3%{opacity:.76;filter:none;}
  45%{filter:sepia(.04) saturate(1.05);} 
  68%{filter:sepia(.14) saturate(1.16) brightness(1.02);} 
  84%{opacity:.79;filter:sepia(.24) saturate(1.24) brightness(1.04);} 
  92%{opacity:.66;filter:sepia(.31) saturate(1.32) brightness(1.05);} 
  97%{opacity:.34;filter:sepia(.36) saturate(1.36) brightness(1.06);} 
  100%{transform:translate3d(calc(100vw - 40px),0,0);opacity:0;filter:sepia(.38) saturate(1.38) brightness(1.06);} 
}

@media (prefers-reduced-motion: reduce){
  .banner-runner-fade-track,
  .banner-runner-fade-track::before{animation:none!important;}
}


/* 2026-09-08 메인 배너 42단계 — 22단계 러너 위치 로직만 복원, 나머지 효과는 유지 */
@media (min-width:681px){
  /* 러너 실제 발 위치를 22단계 기준 높이로 복원 */
  .banner-runner-fade-track{
    bottom:15px;
    height:96px;
    animation:studyhopeRunnerFadeAcross42 18s linear infinite;
  }

  /* 러너와 함께 이동하는 안개도 위치 로직만 같이 낮춘다. 효과의 크기/질감은 그대로 유지 */
  .banner-runner-fade-track::before{
    bottom:-6px;
    animation:studyhopeRunnerMist42 5.3s ease-in-out infinite alternate;
  }

  .banner-runner-fade-track::after{
    bottom:2px;
  }

  /* 현재 효과는 유지하되, 러너 본체만 22단계의 실질 높이에 맞게 아래로 내린다 */
  .banner-runner-sprite{
  }
/* 지나온 안개 꼬리도 러너 발 위치에 맞게만 복원 */
  .banner-runner-trail{
    bottom:4px;
  }
}

@keyframes studyhopeRunnerMist42{
  0%{transform:translate3d(-5px,1px,0) scaleX(.978) scaleY(.92) skewX(-.3deg);opacity:.49;}
  50%{transform:translate3d(2px,-2px,0) scaleX(1.035) scaleY(1.08) skewX(.2deg);opacity:.57;}
  100%{transform:translate3d(6px,1px,0) scaleX(1.01) scaleY(.97) skewX(-.2deg);opacity:.52;}
}
@keyframes studyhopeRunnerFadeAcross42{
  0%{transform:translate3d(0,0,0);opacity:.18;filter:none;}
  3%{opacity:.76;filter:none;}
  45%{filter:sepia(.04) saturate(1.05);} 
  68%{filter:sepia(.14) saturate(1.16) brightness(1.02);} 
  84%{opacity:.79;filter:sepia(.24) saturate(1.24) brightness(1.04);} 
  92%{opacity:.66;filter:sepia(.31) saturate(1.32) brightness(1.05);} 
  97%{opacity:.34;filter:sepia(.36) saturate(1.36) brightness(1.06);} 
  100%{transform:translate3d(calc(100vw - 40px),0,0);opacity:0;filter:sepia(.38) saturate(1.38) brightness(1.06);} 
}

@media (prefers-reduced-motion: reduce){
  .banner-runner-fade-track,
  .banner-runner-fade-track::before{animation:none!important;}
}


/* 2026-09-08 메인 배너 43단계 — 러너 위치 고정 / 러너와 함께 움직이는 안개만 강화 */
@media (min-width:681px){
  /* 러너 위치 로직은 42단계 그대로 고정하고, 이동 안개만 더 짙고 하얗게 강화한다. */
  .banner-runner-fade-track{
    bottom:15px;
    height:96px;
    animation:studyhopeRunnerFadeAcross43 18s linear infinite;
  }

  .banner-runner-fade-track::before{
    left:-92px;
    bottom:-6px;
    width:500px;
    height:88px;
    background:
      radial-gradient(ellipse 16% 56% at 12% 70%, rgba(245,248,251,.11) 0%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 22% 74% at 30% 54%, rgba(250,251,252,.28) 0%, rgba(238,242,247,.10) 47%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 15% 52% at 47% 73%, rgba(247,249,251,.16) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 20% 70% at 63% 49%, rgba(255,241,227,.22) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 16% 56% at 80% 68%, rgba(255,223,195,.19) 0%, rgba(242,147,114,.070) 48%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 12% 44% at 94% 56%, rgba(248,175,137,.10) 0%, rgba(255,255,255,0) 78%);
    filter:blur(21px);
    opacity:.74;
    mix-blend-mode:screen;
    animation:studyhopeRunnerMist43 5.1s ease-in-out infinite alternate;
  }

  .banner-runner-fade-track::after{
    left:-24px;
    bottom:2px;
    width:340px;
    height:56px;
    background:
      radial-gradient(ellipse 28% 80% at 18% 58%, rgba(244,247,250,.11) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 32% 88% at 45% 52%, rgba(250,251,252,.18) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 28% 84% at 71% 52%, rgba(255,230,210,.20) 0%, rgba(246,165,127,.060) 49%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 15% 70% at 92% 52%, rgba(248,185,149,.09) 0%, rgba(255,255,255,0) 78%);
    filter:blur(16px);
    opacity:.60;
    mix-blend-mode:screen;
  }

  /* 지나가는 안개 꼬리도 조금 더 살아 있게 하되, 러너 위치는 건드리지 않는다. */
  .banner-runner-trail{
    left:-340px;
    bottom:4px;
    width:620px;
    height:50px;
    background:
      radial-gradient(ellipse 24% 84% at 19% 56%, rgba(243,248,251,.060) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 28% 78% at 42% 56%, rgba(247,249,251,.080) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 30% 86% at 70% 54%, rgba(255,236,221,.10) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 17% 76% at 92% 50%, rgba(255,198,163,.070) 0%, rgba(214,94,75,.022) 45%, rgba(255,255,255,0) 78%);
    filter:blur(23px);
    opacity:.92;
  }
}

@keyframes studyhopeRunnerMist43{
  0%{transform:translate3d(-6px,1px,0) scaleX(.975) scaleY(.92) skewX(-.3deg);opacity:.67;}
  50%{transform:translate3d(2px,-3px,0) scaleX(1.04) scaleY(1.10) skewX(.2deg);opacity:.76;}
  100%{transform:translate3d(7px,1px,0) scaleX(1.012) scaleY(.97) skewX(-.2deg);opacity:.71;}
}
@keyframes studyhopeRunnerFadeAcross43{
  0%{transform:translate3d(0,0,0);opacity:.20;filter:none;}
  3%{opacity:.80;filter:none;}
  45%{filter:sepia(.04) saturate(1.05);} 
  68%{filter:sepia(.14) saturate(1.16) brightness(1.02);} 
  84%{opacity:.83;filter:sepia(.24) saturate(1.24) brightness(1.04);} 
  92%{opacity:.70;filter:sepia(.31) saturate(1.32) brightness(1.05);} 
  97%{opacity:.38;filter:sepia(.36) saturate(1.36) brightness(1.06);} 
  100%{transform:translate3d(calc(100vw - 40px),0,0);opacity:0;filter:sepia(.38) saturate(1.38) brightness(1.06);} 
}

@media (prefers-reduced-motion: reduce){
  .banner-runner-fade-track,
  .banner-runner-fade-track::before{animation:none!important;}
}


/* 2026-09-08 메인 배너 44단계 — 일출효과만 수정 / 화가·사진전문가식 확산광과 안개 반사광 */
@media (min-width:681px){
  /* 태양 자체보다 빛이 안개와 공간을 바꾸는 느낌에 집중한다. 붉은 면적을 줄이고 금빛/살구빛 확산광으로 정리 */
  .main-banner-stage::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 18% 16% at 96.6% 66%, rgba(255,243,212,.22) 0%, rgba(255,223,170,.14) 18%, rgba(255,193,126,.06) 38%, rgba(5,5,5,0) 72%),
      radial-gradient(ellipse 31% 18% at 91% 69%, rgba(255,220,170,.10) 0%, rgba(248,183,130,.045) 34%, rgba(5,5,5,0) 74%),
      conic-gradient(from 188deg at 96.4% 66%,
        rgba(255,255,255,0) 0deg 8deg,
        rgba(255,234,192,.055) 8deg 11deg,
        rgba(255,255,255,0) 11deg 18deg,
        rgba(255,220,176,.04) 18deg 21deg,
        rgba(255,255,255,0) 21deg 29deg,
        rgba(255,239,206,.028) 29deg 32deg,
        rgba(255,255,255,0) 32deg 360deg),
      radial-gradient(ellipse 38% 10% at 83% 77%, rgba(255,225,187,.06) 0%, rgba(243,181,131,.03) 33%, rgba(5,5,5,0) 75%);
    filter:blur(15px);
    opacity:.24;
    mix-blend-mode:screen;
    animation:studyhopeSunriseRays44 24s ease-in-out infinite alternate;
  }

  /* 안개 위에 얹히는 반사광. 태양 원반보다 빛을 받은 안개가 더 눈에 들어오게 한다. */
  .main-banner-stage::after{
    content:"";
    position:absolute;
    z-index:0;
    right:0;
    bottom:0;
    width:82%;
    height:84%;
    pointer-events:none;
    background:
      radial-gradient(ellipse 32% 13% at 97% 71%, rgba(255,236,202,.18) 0%, rgba(255,199,142,.10) 26%, rgba(243,160,112,.04) 48%, rgba(5,5,5,0) 78%),
      radial-gradient(ellipse 42% 11% at 89% 84%, rgba(255,214,171,.11) 0%, rgba(242,168,124,.05) 36%, rgba(5,5,5,0) 80%),
      radial-gradient(ellipse 26% 9% at 73% 88%, rgba(255,228,201,.07) 0%, rgba(243,176,136,.028) 41%, rgba(5,5,5,0) 79%),
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 53%, rgba(255,220,184,.028) 67%, rgba(244,174,129,.038) 77%, rgba(255,255,255,0) 92%);
    filter:blur(20px);
    opacity:.28;
    mix-blend-mode:screen;
  }
}

@keyframes studyhopeSunriseRays44{
  0%{transform:translate3d(.35%,.2%,0) scale(.992);opacity:.20;filter:blur(14px);}  
  50%{transform:translate3d(0,0,0) scale(1.008);opacity:.24;filter:blur(15px);}  
  100%{transform:translate3d(-.3%,-.18%,0) scale(1.02);opacity:.27;filter:blur(16px);} 
}

@media (prefers-reduced-motion: reduce){
  .main-banner-stage::before{animation:none!important;}
}


/* 2026-09-08 메인 배너 45단계 — 일출 광량/광선의 서서한 변화 + 러너/빛 루프 전환 완화 */
@media (min-width:681px){
  /* 다른 구조는 그대로 두고 일출광만 살아 움직이도록 조정 */
  .main-banner-stage::before{
    opacity:.18;
    animation:studyhopeSunriseRays45 26s ease-in-out infinite alternate;
  }

  .main-banner-stage::after{
    opacity:.22;
    animation:studyhopeSunriseGlow45 26s ease-in-out infinite alternate;
  }

  /* 러너 위치는 고정한 채, 시작/종료 구간을 부드럽게 만들어 급박한 점프를 숨긴다. */
  .banner-runner-fade-track{
    animation:studyhopeRunnerFadeAcross45 18s linear infinite;
  }

  .banner-runner-trail{
    animation:studyhopeTrailAcross45 18s linear infinite;
  }
}

@keyframes studyhopeSunriseRays45{
  0%{
    transform:translate3d(.55%,.28%,0) scale(.986);
    opacity:.12;
    filter:blur(17px);
  }
  18%{
    transform:translate3d(.35%,.18%,0) scale(.994);
    opacity:.16;
    filter:blur(16px);
  }
  42%{
    transform:translate3d(.12%,.04%,0) scale(1.006);
    opacity:.23;
    filter:blur(15px);
  }
  68%{
    transform:translate3d(-.06%,-.06%,0) scale(1.018);
    opacity:.31;
    filter:blur(14px);
  }
  84%{
    transform:translate3d(-.18%,-.10%,0) scale(1.026);
    opacity:.35;
    filter:blur(14px);
  }
  100%{
    transform:translate3d(-.28%,-.15%,0) scale(1.032);
    opacity:.28;
    filter:blur(15px);
  }
}

@keyframes studyhopeSunriseGlow45{
  0%{
    transform:translate3d(.35%,.22%,0) scale(.988);
    opacity:.16;
    filter:blur(22px);
  }
  20%{
    transform:translate3d(.22%,.14%,0) scale(.996);
    opacity:.20;
    filter:blur(21px);
  }
  46%{
    transform:translate3d(.05%,.04%,0) scale(1.008);
    opacity:.27;
    filter:blur(20px);
  }
  70%{
    transform:translate3d(-.08%,-.04%,0) scale(1.018);
    opacity:.35;
    filter:blur(19px);
  }
  86%{
    transform:translate3d(-.14%,-.08%,0) scale(1.024);
    opacity:.39;
    filter:blur(19px);
  }
  100%{
    transform:translate3d(-.18%,-.10%,0) scale(1.028);
    opacity:.32;
    filter:blur(20px);
  }
}

@keyframes studyhopeRunnerFadeAcross45{
  0%{
    transform:translate3d(0,0,0);
    opacity:0;
    filter:none;
  }
  7%{
    opacity:.08;
    filter:none;
  }
  14%{
    opacity:.72;
    filter:none;
  }
  46%{
    opacity:.80;
    filter:sepia(.04) saturate(1.05);
  }
  70%{
    opacity:.84;
    filter:sepia(.14) saturate(1.16) brightness(1.02);
  }
  84%{
    opacity:.82;
    filter:sepia(.24) saturate(1.24) brightness(1.04);
  }
  91%{
    opacity:.62;
    filter:sepia(.30) saturate(1.30) brightness(1.05);
  }
  96%{
    opacity:.18;
    filter:sepia(.34) saturate(1.34) brightness(1.05);
  }
  98%{
    opacity:0;
    filter:sepia(.36) saturate(1.36) brightness(1.06);
  }
  100%{
    transform:translate3d(calc(100vw - 40px),0,0);
    opacity:0;
    filter:sepia(.38) saturate(1.38) brightness(1.06);
  }
}

@keyframes studyhopeTrailAcross45{
  0%{
    transform:translate3d(260px,0,0) scaleX(.95);
    opacity:0;
  }
  8%{opacity:.01;}
  16%{opacity:.10;}
  44%{opacity:.14;}
  72%{opacity:.13;}
  88%{opacity:.08;}
  95%{opacity:.03;}
  98%{opacity:0;}
  100%{
    transform:translate3d(calc(100vw + 260px),0,0) scaleX(1.04);
    opacity:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .main-banner-stage::before,
  .main-banner-stage::after,
  .banner-runner-fade-track,
  .banner-runner-trail{animation:none!important;}
}


/* 2026-09-08 메인 배너 46단계 — 일출효과만 재조정 / 붉은 주황빛이 중간·상단으로 시간에 따라 확장 */
@media (min-width:681px){
  /* 큰 일출 면적광: 오른쪽 하단에서 시작해 시간이 지나며 위와 중앙으로 넓게 퍼지게 한다. */
  .main-banner-stage::after{
    content:"";
    position:absolute;
    z-index:0;
    right:-3%;
    bottom:-4%;
    width:104%;
    height:110%;
    pointer-events:none;
    transform-origin:100% 100%;
    background:
      radial-gradient(ellipse 24% 16% at 98% 69%, rgba(255,244,216,.22) 0%, rgba(255,222,173,.13) 18%, rgba(255,190,123,.06) 38%, rgba(255,255,255,0) 74%),
      radial-gradient(ellipse 42% 24% at 92% 78%, rgba(255,201,137,.11) 0%, rgba(247,157,105,.055) 34%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 60% 30% at 88% 86%, rgba(207,80,58,.11) 0%, rgba(132,36,38,.055) 42%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 74% 40% at 86% 96%, rgba(103,26,33,.16) 0%, rgba(56,14,22,.085) 38%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 64% 42% at 103% 18%, rgba(102,30,37,.10) 0%, rgba(68,18,27,.055) 38%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 52% 28% at 76% 60%, rgba(137,45,45,.07) 0%, rgba(255,255,255,0) 78%),
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 48%, rgba(130,39,42,.025) 60%, rgba(198,86,66,.040) 71%, rgba(248,168,119,.045) 82%, rgba(255,233,190,.025) 92%, rgba(255,255,255,0) 100%);
    filter:blur(26px);
    opacity:.12;
    mix-blend-mode:screen;
    animation:studyhopeSunriseGlow46 30s ease-in-out infinite alternate;
  }

  /* 핵심광과 광선: 작은 중심에서 시작해 조금씩 강해지고 길어지며, 안개에 닿는 부분이 살아나게 한다. */
  .main-banner-stage::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    transform-origin:96% 68%;
    background:
      radial-gradient(ellipse 15% 14% at 96.7% 66%, rgba(255,246,218,.28) 0%, rgba(255,231,186,.16) 16%, rgba(255,200,134,.06) 36%, rgba(255,255,255,0) 74%),
      radial-gradient(ellipse 28% 16% at 92% 68%, rgba(255,219,164,.09) 0%, rgba(247,172,119,.04) 32%, rgba(255,255,255,0) 74%),
      conic-gradient(from 188deg at 96.5% 66%,
        rgba(255,255,255,0) 0deg 7deg,
        rgba(255,236,197,.07) 7deg 10deg,
        rgba(255,255,255,0) 10deg 17deg,
        rgba(255,224,177,.05) 17deg 20deg,
        rgba(255,255,255,0) 20deg 27deg,
        rgba(255,214,163,.038) 27deg 30deg,
        rgba(255,255,255,0) 30deg 360deg),
      radial-gradient(ellipse 42% 10% at 83% 77%, rgba(255,225,188,.065) 0%, rgba(243,181,131,.028) 34%, rgba(255,255,255,0) 76%);
    filter:blur(16px);
    opacity:.10;
    mix-blend-mode:screen;
    animation:studyhopeSunriseRays46 30s ease-in-out infinite alternate;
  }
}

@keyframes studyhopeSunriseGlow46{
  0%{
    transform:translate3d(2.0%,1.0%,0) scaleX(.68) scaleY(.60);
    opacity:.10;
    filter:blur(28px);
  }
  18%{
    transform:translate3d(1.2%,.7%,0) scaleX(.80) scaleY(.71);
    opacity:.15;
    filter:blur(27px);
  }
  40%{
    transform:translate3d(.4%,.25%,0) scaleX(.95) scaleY(.86);
    opacity:.22;
    filter:blur(26px);
  }
  62%{
    transform:translate3d(-.8%,-.35%,0) scaleX(1.08) scaleY(1.01);
    opacity:.30;
    filter:blur(25px);
  }
  82%{
    transform:translate3d(-1.8%,-.9%,0) scaleX(1.17) scaleY(1.11);
    opacity:.39;
    filter:blur(24px);
  }
  100%{
    transform:translate3d(-2.3%,-1.2%,0) scaleX(1.20) scaleY(1.15);
    opacity:.35;
    filter:blur(24px);
  }
}

@keyframes studyhopeSunriseRays46{
  0%{
    transform:translate3d(.7%,.35%,0) scale(.82);
    opacity:.08;
    filter:blur(18px);
  }
  20%{
    transform:translate3d(.45%,.2%,0) scale(.90);
    opacity:.12;
    filter:blur(17px);
  }
  44%{
    transform:translate3d(.14%,.06%,0) scale(1.00);
    opacity:.18;
    filter:blur(16px);
  }
  68%{
    transform:translate3d(-.08%,-.08%,0) scale(1.10);
    opacity:.25;
    filter:blur(15px);
  }
  86%{
    transform:translate3d(-.20%,-.14%,0) scale(1.17);
    opacity:.31;
    filter:blur(14px);
  }
  100%{
    transform:translate3d(-.26%,-.17%,0) scale(1.20);
    opacity:.28;
    filter:blur(15px);
  }
}

@media (prefers-reduced-motion: reduce){
  .main-banner-stage::before,
  .main-banner-stage::after{animation:none!important;}
}


/* 2026-09-08 메인 배너 47단계 — 일출효과만 재설계 / 우측 중상단 하늘 선행 + 하단은 중반 이후 반응 */
@media (min-width:681px){
  /* 상·중단 하늘: 러너가 출발하는 순간부터 우측 중간 하늘이 먼저 붉어지고, 상단과 중앙으로 넓게 퍼진다. */
  .main-banner-stage::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    transform-origin:95% 46%;
    background:
      radial-gradient(ellipse 24% 18% at 96% 45%, rgba(255,236,197,.18) 0%, rgba(255,210,151,.10) 20%, rgba(248,157,102,.04) 41%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 38% 22% at 91% 51%, rgba(229,95,66,.12) 0%, rgba(174,56,48,.068) 34%, rgba(88,25,31,.03) 54%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 54% 28% at 87% 34%, rgba(248,138,76,.10) 0%, rgba(199,76,49,.058) 35%, rgba(95,27,32,.028) 58%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 72% 30% at 85% 18%, rgba(255,177,96,.07) 0%, rgba(210,86,53,.045) 34%, rgba(88,25,31,.022) 57%, rgba(255,255,255,0) 82%),
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(99,27,36,.02) 28%, rgba(176,59,50,.032) 42%, rgba(232,112,70,.038) 57%, rgba(255,168,107,.025) 68%, rgba(255,255,255,0) 81%),
      conic-gradient(from 198deg at 96% 48%, rgba(255,255,255,0) 0deg 11deg, rgba(255,222,176,.045) 11deg 15deg, rgba(255,255,255,0) 15deg 23deg, rgba(255,200,152,.032) 23deg 27deg, rgba(255,255,255,0) 27deg 360deg);
    filter:blur(24px);
    opacity:.10;
    mix-blend-mode:screen;
    animation:studyhopeSunriseSky47 18s cubic-bezier(.38,0,.22,1) infinite;
  }

  /* 하단 안개·러너 방향: 러너가 중간 이상 넘어갈 때부터 서서히 붉어지고, 마지막에 러너까지 내려온다. */
  .main-banner-stage::after{
    content:"";
    position:absolute;
    z-index:0;
    right:-4%;
    bottom:-4%;
    width:108%;
    height:112%;
    pointer-events:none;
    transform-origin:100% 78%;
    background:
      radial-gradient(ellipse 22% 14% at 97% 72%, rgba(255,242,204,.18) 0%, rgba(255,214,157,.10) 20%, rgba(248,163,109,.04) 42%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 34% 18% at 93% 78%, rgba(246,140,86,.08) 0%, rgba(214,85,62,.05) 34%, rgba(102,29,34,.022) 56%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 48% 20% at 87% 86%, rgba(168,56,46,.08) 0%, rgba(117,35,38,.05) 37%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 28% 10% at 82% 89%, rgba(255,196,137,.075) 0%, rgba(236,125,87,.04) 40%, rgba(255,255,255,0) 80%),
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 56%, rgba(120,34,40,.012) 67%, rgba(188,79,59,.022) 76%, rgba(243,154,108,.03) 85%, rgba(255,238,198,.018) 92%, rgba(255,255,255,0) 100%);
    filter:blur(26px);
    opacity:.02;
    mix-blend-mode:screen;
    animation:studyhopeSunriseGround47 18s cubic-bezier(.38,0,.22,1) infinite;
  }
}

@keyframes studyhopeSunriseSky47{
  0%{
    transform:translate3d(2.3%,.2%,0) scaleX(.72) scaleY(.68);
    opacity:.08;
    filter:blur(25px);
  }
  14%{
    transform:translate3d(1.6%,-.1%,0) scaleX(.86) scaleY(.82);
    opacity:.15;
    filter:blur(24px);
  }
  30%{
    transform:translate3d(.8%,-.5%,0) scaleX(1.00) scaleY(.96);
    opacity:.24;
    filter:blur(23px);
  }
  50%{
    transform:translate3d(.1%,-.9%,0) scaleX(1.12) scaleY(1.08);
    opacity:.33;
    filter:blur(22px);
  }
  70%{
    transform:translate3d(-.7%,-1.4%,0) scaleX(1.22) scaleY(1.18);
    opacity:.42;
    filter:blur(21px);
  }
  86%{
    transform:translate3d(-1.2%,-1.9%,0) scaleX(1.29) scaleY(1.26);
    opacity:.49;
    filter:blur(20px);
  }
  100%{
    transform:translate3d(-1.6%,-2.3%,0) scaleX(1.33) scaleY(1.30);
    opacity:.46;
    filter:blur(20px);
  }
}

@keyframes studyhopeSunriseGround47{
  0%{
    transform:translate3d(1.6%,.8%,0) scaleX(.82) scaleY(.78);
    opacity:.01;
    filter:blur(27px);
  }
  24%{
    transform:translate3d(1.1%,.6%,0) scaleX(.88) scaleY(.84);
    opacity:.015;
    filter:blur(27px);
  }
  45%{
    transform:translate3d(.5%,.3%,0) scaleX(.95) scaleY(.91);
    opacity:.02;
    filter:blur(26px);
  }
  58%{
    transform:translate3d(.1%,.1%,0) scaleX(1.00) scaleY(.98);
    opacity:.08;
    filter:blur(26px);
  }
  72%{
    transform:translate3d(-.5%,-.2%,0) scaleX(1.08) scaleY(1.06);
    opacity:.18;
    filter:blur(25px);
  }
  86%{
    transform:translate3d(-1.0%,-.6%,0) scaleX(1.14) scaleY(1.12);
    opacity:.28;
    filter:blur(24px);
  }
  100%{
    transform:translate3d(-1.4%,-.9%,0) scaleX(1.18) scaleY(1.15);
    opacity:.34;
    filter:blur(24px);
  }
}

@media (prefers-reduced-motion: reduce){
  .main-banner-stage::before,
  .main-banner-stage::after{animation:none!important;}
}


/* 2026-09-08 메인 배너 48단계 — 일출효과만 수정 / 마지막 하단을 크게 밝혀 러너가 희망 속으로 들어가게 */
@media (min-width:681px){
  /* 하늘 선행 구조는 유지하고, 하단 일출 반응만 마지막 구간에 크게 밝힌다. */
  .main-banner-stage::after{
    content:"";
    position:absolute;
    z-index:0;
    right:-4%;
    bottom:-4%;
    width:110%;
    height:114%;
    pointer-events:none;
    transform-origin:100% 80%;
    background:
      /* 러너가 도착하는 우측 하단 중심광 */
      radial-gradient(ellipse 16% 12% at 95.6% 86%, rgba(255,250,232,.30) 0%, rgba(255,236,200,.18) 22%, rgba(255,205,148,.08) 46%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 24% 15% at 93.8% 82%, rgba(255,231,189,.18) 0%, rgba(250,184,126,.10) 28%, rgba(236,123,86,.04) 52%, rgba(255,255,255,0) 80%),
      /* 마지막 하단 안개가 환하게 반응하는 층 */
      radial-gradient(ellipse 34% 17% at 92% 88%, rgba(255,216,168,.16) 0%, rgba(247,162,112,.08) 34%, rgba(178,62,49,.035) 58%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 48% 21% at 86% 90%, rgba(182,62,49,.09) 0%, rgba(125,39,39,.05) 38%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 30% 11% at 79% 89%, rgba(255,200,145,.08) 0%, rgba(238,130,90,.04) 40%, rgba(255,255,255,0) 81%),
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 56%, rgba(126,36,40,.010) 67%, rgba(193,82,60,.022) 76%, rgba(246,157,109,.038) 84%, rgba(255,232,194,.040) 91%, rgba(255,255,255,0) 100%);
    filter:blur(26px);
    opacity:.015;
    mix-blend-mode:screen;
    animation:studyhopeSunriseGround48 18s cubic-bezier(.38,0,.22,1) infinite;
  }
}

@keyframes studyhopeSunriseGround48{
  0%{
    transform:translate3d(1.7%,.8%,0) scaleX(.80) scaleY(.76);
    opacity:.01;
    filter:blur(27px);
  }
  24%{
    transform:translate3d(1.2%,.6%,0) scaleX(.87) scaleY(.83);
    opacity:.012;
    filter:blur(27px);
  }
  45%{
    transform:translate3d(.5%,.3%,0) scaleX(.95) scaleY(.91);
    opacity:.02;
    filter:blur(26px);
  }
  /* 러너가 중간 전까지는 우측 하단 어둠 유지 */
  58%{
    transform:translate3d(.1%,.1%,0) scaleX(1.00) scaleY(.98);
    opacity:.07;
    filter:blur(26px);
  }
  /* 중반 이후부터 하단 반응 시작 */
  72%{
    transform:translate3d(-.5%,-.2%,0) scaleX(1.09) scaleY(1.07);
    opacity:.20;
    filter:blur(25px);
  }
  /* 마지막 구간에서 러너 도착 지점이 밝게 열리기 시작 */
  86%{
    transform:translate3d(-1.0%,-.6%,0) scaleX(1.18) scaleY(1.16);
    opacity:.37;
    filter:blur(24px);
  }
  /* 끝에서는 희망의 밝은 빛 속으로 러너가 들어가는 느낌 */
  96%{
    transform:translate3d(-1.35%,-.86%,0) scaleX(1.28) scaleY(1.25);
    opacity:.50;
    filter:blur(23px);
  }
  100%{
    transform:translate3d(-1.5%,-1.0%,0) scaleX(1.31) scaleY(1.28);
    opacity:.56;
    filter:blur(23px);
  }
}

@media (prefers-reduced-motion: reduce){
  .main-banner-stage::after{animation:none!important;}
}


/* 2026-09-08 메인 배너 49단계 — 일출효과 재정렬 / 우측 중상단 시작, 하단 초기 어둠 유지, 마지막에 러너까지 하강 */
@media (min-width:681px){
  /* 일출은 우측 중상단 하늘에서 시작해 좌측과 상단으로 퍼진다. 하늘 변화가 먼저 보이도록 재설계. */
  .main-banner-stage::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    transform-origin:100% 40%;
    background:
      radial-gradient(ellipse 18% 14% at 97% 39%, rgba(255,244,219,.22) 0%, rgba(255,223,173,.12) 18%, rgba(246,164,110,.05) 39%, rgba(255,255,255,0) 73%),
      radial-gradient(ellipse 34% 22% at 93% 43%, rgba(240,112,74,.14) 0%, rgba(188,67,51,.084) 34%, rgba(102,29,35,.032) 58%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 52% 30% at 88% 31%, rgba(249,149,79,.12) 0%, rgba(210,88,52,.070) 33%, rgba(104,29,35,.028) 56%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 70% 34% at 83% 18%, rgba(255,183,96,.09) 0%, rgba(218,95,56,.055) 34%, rgba(95,27,34,.022) 58%, rgba(255,255,255,0) 84%),
      radial-gradient(ellipse 88% 28% at 72% 53%, rgba(183,60,46,.060) 0%, rgba(111,34,36,.026) 44%, rgba(255,255,255,0) 82%),
      linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(88,23,31,.012) 18%,
        rgba(132,36,40,.024) 30%,
        rgba(185,66,53,.036) 42%,
        rgba(234,114,70,.042) 56%,
        rgba(255,171,106,.030) 68%,
        rgba(255,255,255,0) 82%),
      conic-gradient(from 198deg at 96.5% 42%,
        rgba(255,255,255,0) 0deg 9deg,
        rgba(255,228,184,.050) 9deg 13deg,
        rgba(255,255,255,0) 13deg 20deg,
        rgba(255,203,154,.036) 20deg 24deg,
        rgba(255,255,255,0) 24deg 360deg);
    filter:blur(24px);
    opacity:.06;
    mix-blend-mode:screen;
    animation:studyhopeSunriseSky49 18s cubic-bezier(.38,0,.22,1) infinite;
  }

  /* 하단은 초반에 거의 검게 두고, 러너가 중간을 넘긴 뒤부터만 서서히 반응하게 한다. */
  .main-banner-stage::after{
    content:"";
    position:absolute;
    z-index:0;
    right:-4%;
    bottom:-4%;
    width:110%;
    height:114%;
    pointer-events:none;
    transform-origin:100% 82%;
    background:
      radial-gradient(ellipse 14% 11% at 95.7% 86%, rgba(255,250,235,.30) 0%, rgba(255,237,201,.16) 22%, rgba(255,206,150,.06) 46%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 22% 14% at 94% 82%, rgba(255,231,189,.16) 0%, rgba(250,183,124,.08) 30%, rgba(236,123,86,.032) 52%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 34% 17% at 92% 88%, rgba(255,216,168,.14) 0%, rgba(247,162,112,.07) 34%, rgba(178,62,49,.028) 58%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 48% 21% at 86% 90%, rgba(182,62,49,.08) 0%, rgba(125,39,39,.044) 38%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 30% 11% at 79% 89%, rgba(255,200,145,.07) 0%, rgba(238,130,90,.034) 40%, rgba(255,255,255,0) 81%),
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, rgba(126,36,40,.008) 71%, rgba(193,82,60,.016) 79%, rgba(246,157,109,.028) 87%, rgba(255,232,194,.034) 93%, rgba(255,255,255,0) 100%);
    filter:blur(26px);
    opacity:0;
    mix-blend-mode:screen;
    animation:studyhopeSunriseGround49 18s cubic-bezier(.38,0,.22,1) infinite;
  }
}

@keyframes studyhopeSunriseSky49{
  0%{
    transform:translate3d(3.6%,.3%,0) scaleX(.56) scaleY(.60);
    opacity:.04;
    filter:blur(25px);
  }
  12%{
    transform:translate3d(2.6%,-.1%,0) scaleX(.74) scaleY(.76);
    opacity:.11;
    filter:blur(24px);
  }
  28%{
    transform:translate3d(1.7%,-.5%,0) scaleX(.94) scaleY(.92);
    opacity:.20;
    filter:blur(23px);
  }
  46%{
    transform:translate3d(.7%,-1.0%,0) scaleX(1.12) scaleY(1.08);
    opacity:.30;
    filter:blur(22px);
  }
  64%{
    transform:translate3d(-.4%,-1.5%,0) scaleX(1.25) scaleY(1.18);
    opacity:.39;
    filter:blur(21px);
  }
  82%{
    transform:translate3d(-1.4%,-2.0%,0) scaleX(1.34) scaleY(1.25);
    opacity:.47;
    filter:blur(20px);
  }
  100%{
    transform:translate3d(-2.0%,-2.3%,0) scaleX(1.40) scaleY(1.30);
    opacity:.44;
    filter:blur(20px);
  }
}

@keyframes studyhopeSunriseGround49{
  0%{
    transform:translate3d(2.0%,.9%,0) scaleX(.76) scaleY(.72);
    opacity:0;
    filter:blur(27px);
  }
  24%{
    transform:translate3d(1.5%,.7%,0) scaleX(.82) scaleY(.79);
    opacity:0;
    filter:blur(27px);
  }
  42%{
    transform:translate3d(.9%,.5%,0) scaleX(.88) scaleY(.86);
    opacity:.005;
    filter:blur(27px);
  }
  /* 러너가 중간까지는 우측 하단이 거의 검게 유지 */
  56%{
    transform:translate3d(.3%,.2%,0) scaleX(.96) scaleY(.94);
    opacity:.018;
    filter:blur(26px);
  }
  /* 중간 이후부터만 하단이 늦게 반응 */
  72%{
    transform:translate3d(-.4%,-.1%,0) scaleX(1.05) scaleY(1.03);
    opacity:.12;
    filter:blur(25px);
  }
  86%{
    transform:translate3d(-1.0%,-.5%,0) scaleX(1.15) scaleY(1.13);
    opacity:.26;
    filter:blur(24px);
  }
  /* 마지막에는 러너 도착 지점이 환하게 열리며 희망으로 연결 */
  96%{
    transform:translate3d(-1.35%,-.82%,0) scaleX(1.26) scaleY(1.23);
    opacity:.43;
    filter:blur(23px);
  }
  100%{
    transform:translate3d(-1.5%,-.95%,0) scaleX(1.31) scaleY(1.28);
    opacity:.50;
    filter:blur(23px);
  }
}

@media (prefers-reduced-motion: reduce){
  .main-banner-stage::before,
  .main-banner-stage::after{animation:none!important;}
}


/* 2026-09-08 메인 배너 50단계 — 일출효과 전체 삭제 / 러너와 안개효과만 유지 */
@media (min-width:681px){
  /* 기존 일출용 오버레이는 모두 제거한다. 러너와 안개 관련 레이어는 건드리지 않는다. */
  .main-banner-stage::before,
  .main-banner-stage::after{
    content:none !important;
    background:none !important;
    animation:none !important;
    opacity:0 !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    transform:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .main-banner-stage::before,
  .main-banner-stage::after{animation:none!important;}
}


/* 2026-09-08 메인 배너 51단계 — 상위 원천에서 일출효과 완전 제거 / 러너와 안개만 유지 */
@media (min-width:681px){
  /* 1) 상위 배경 원천 정리: 붉은·주황·크림 일출 계열을 모두 제거하고 검은 캔버스 + 남청 새벽으로 복귀 */
  .main-banner-stage{
    background:
      
      linear-gradient(135deg,
        rgba(17,53,120,1) 0%,
        rgba(13,45,105,1) 18%,
        rgba(10,37,88,1) 36%,
        rgba(8,31,74,1) 54%,
        rgba(7,25,61,1) 72%,
        rgba(6,20,50,1) 88%,
        rgba(6,18,45,1) 100%) !important;
  }

  /* 2) 일출용 가상 오버레이는 상위 원천에서 완전 차단 */
  .main-banner-stage::before,
  .main-banner-stage::after{
    content:none !important;
    background:none !important;
    animation:none !important;
    opacity:0 !important;
    filter:none !important;
    transform:none !important;
    mix-blend-mode:normal !important;
  }

  /* 3) 배경 안개는 형태/움직임은 유지하고 색조만 중성 회백·청회색으로 복귀 */
  .banner-base-fog.fog-1{
    background:
      radial-gradient(ellipse 26% 78% at 14% 55%, rgba(226,232,244,.040) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 32% 92% at 39% 48%, rgba(232,237,246,.072) 0%, rgba(194,206,230,.045) 36%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 28% 84% at 68% 56%, rgba(236,240,247,.060) 0%, rgba(192,204,229,.036) 42%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 18% 66% at 90% 50%, rgba(223,230,243,.040) 0%, rgba(255,255,255,0) 78%) !important;
  }

  .banner-base-fog.fog-2{
    background:
      radial-gradient(ellipse 18% 70% at 9% 58%, rgba(228,234,245,.038) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 28% 88% at 29% 52%, rgba(236,239,247,.064) 0%, rgba(188,200,227,.040) 40%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 34% 94% at 56% 52%, rgba(240,243,248,.072) 0%, rgba(194,206,229,.044) 40%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 26% 82% at 84% 50%, rgba(232,237,246,.048) 0%, rgba(182,196,224,.030) 42%, rgba(255,255,255,0) 80%) !important;
  }

  .banner-base-fog.fog-3{
    background:
      radial-gradient(ellipse 22% 76% at 12% 54%, rgba(233,238,247,.042) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 30% 92% at 38% 52%, rgba(241,244,249,.070) 0%, rgba(198,209,231,.042) 40%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 28% 86% at 67% 48%, rgba(236,240,247,.058) 0%, rgba(192,204,228,.036) 42%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 20% 70% at 90% 53%, rgba(227,234,245,.040) 0%, rgba(255,255,255,0) 78%) !important;
  }

  /* 4) 러너와 함께 이동하는 안개도 따뜻한 일출색만 제거하고 움직임은 그대로 둔다 */
  .banner-runner-fade-track::before{
    background:
      radial-gradient(ellipse 16% 56% at 12% 70%, rgba(244,247,251,.10) 0%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 22% 74% at 30% 54%, rgba(248,250,252,.24) 0%, rgba(232,238,246,.09) 47%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 15% 52% at 47% 73%, rgba(242,246,250,.14) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 20% 70% at 63% 49%, rgba(237,242,249,.16) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 16% 56% at 80% 68%, rgba(226,234,245,.12) 0%, rgba(185,197,221,.05) 48%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 12% 44% at 94% 56%, rgba(214,225,241,.07) 0%, rgba(255,255,255,0) 78%) !important;
  }

  .banner-runner-fade-track::after{
    background:
      radial-gradient(ellipse 28% 80% at 18% 58%, rgba(241,245,250,.10) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 32% 88% at 45% 52%, rgba(246,249,252,.16) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 28% 84% at 71% 52%, rgba(233,239,247,.15) 0%, rgba(191,203,227,.045) 49%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 15% 70% at 92% 52%, rgba(214,226,242,.07) 0%, rgba(255,255,255,0) 78%) !important;
  }

  .banner-runner-trail{
    background:
      radial-gradient(ellipse 24% 84% at 19% 56%, rgba(237,242,249,.050) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 28% 78% at 42% 56%, rgba(242,246,250,.065) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 30% 86% at 70% 54%, rgba(230,237,247,.080) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 17% 76% at 92% 50%, rgba(206,219,239,.055) 0%, rgba(150,169,208,.018) 45%, rgba(255,255,255,0) 78%) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .main-banner-stage::before,
  .main-banner-stage::after{animation:none!important;}
}


/* 2026-09-08 메인 배너 52단계 — 안개효과 2단계 재설계 / 하단 자연 운무 + 러너 동행 안개 */
@media (min-width:681px){
  /* 1단계: 하단 배경 운무 — 높낮이가 다른 자연 운무층 */
  .banner-base-fog{
    mix-blend-mode:screen;
    will-change:transform,opacity,filter;
  }

  .banner-base-fog.fog-1{
    left:-14% !important;
    bottom:14px !important;
    width:142% !important;
    height:88px !important;
    opacity:.28 !important;
    filter:blur(28px) !important;
    background:
      radial-gradient(ellipse 22% 62% at 8% 62%, rgba(226,233,244,.05) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 28% 86% at 25% 52%, rgba(240,244,249,.12) 0%, rgba(206,216,233,.06) 42%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 20% 58% at 44% 64%, rgba(232,238,246,.07) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 32% 92% at 60% 50%, rgba(243,246,250,.13) 0%, rgba(205,216,234,.06) 42%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 24% 74% at 82% 58%, rgba(234,240,247,.09) 0%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 16% 58% at 95% 66%, rgba(220,229,242,.05) 0%, rgba(255,255,255,0) 78%) !important;
    animation:studyhopeNaturalBottomFog52A 34s ease-in-out infinite alternate !important;
  }

  .banner-base-fog.fog-2{
    left:-8% !important;
    bottom:36px !important;
    width:114% !important;
    height:64px !important;
    opacity:.20 !important;
    filter:blur(22px) !important;
    background:
      radial-gradient(ellipse 18% 60% at 10% 60%, rgba(226,233,243,.04) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 24% 84% at 32% 46%, rgba(242,245,249,.11) 0%, rgba(205,216,233,.05) 42%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 18% 56% at 49% 64%, rgba(234,240,246,.07) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 26% 86% at 71% 48%, rgba(239,244,249,.10) 0%, rgba(201,213,232,.05) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 20% 68% at 90% 56%, rgba(229,236,245,.06) 0%, rgba(255,255,255,0) 80%) !important;
    animation:studyhopeNaturalBottomFog52B 29s ease-in-out infinite alternate !important;
  }

  .banner-base-fog.fog-3{
    left:-16% !important;
    bottom:4px !important;
    width:126% !important;
    height:50px !important;
    opacity:.15 !important;
    filter:blur(18px) !important;
    background:
      radial-gradient(ellipse 24% 74% at 14% 58%, rgba(233,239,246,.05) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 18% 54% at 36% 68%, rgba(239,243,248,.06) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 28% 82% at 56% 50%, rgba(237,242,248,.09) 0%, rgba(200,212,231,.04) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 22% 62% at 78% 62%, rgba(230,237,246,.06) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 14% 52% at 94% 60%, rgba(219,229,242,.04) 0%, rgba(255,255,255,0) 78%) !important;
    animation:studyhopeNaturalBottomFog52C 38s ease-in-out infinite alternate !important;
  }

  /* 2단계: 러너와 함께 이동하는 안개 — 러너 주변/발밑/뒤쪽 안개를 분리 */
  .banner-runner-fade-track{
    bottom:248px !important;
    width:356px !important;
    height:98px !important;
    animation:studyhopeRunnerFadeAcross45 18s linear infinite !important;
    will-change:transform,opacity;
  }

  .banner-runner-fade-track::before{
    left:-44px !important;
    bottom:6px !important;
    width:430px !important;
    height:62px !important;
    opacity:.82 !important;
    filter:blur(24px) !important;
    background:
      radial-gradient(ellipse 16% 54% at 10% 70%, rgba(242,246,251,.09) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 20% 66% at 24% 56%, rgba(247,249,252,.22) 0%, rgba(224,232,243,.09) 48%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 14% 48% at 38% 74%, rgba(243,247,251,.13) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 20% 70% at 52% 50%, rgba(241,246,251,.18) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 16% 54% at 68% 68%, rgba(234,240,248,.14) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 14% 48% at 83% 58%, rgba(224,233,244,.11) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 10% 40% at 95% 66%, rgba(213,225,241,.07) 0%, rgba(255,255,255,0) 78%) !important;
    animation:studyhopeRunnerFogPulse52 3.6s ease-in-out infinite alternate !important;
  }

  .banner-runner-fade-track::after{
    left:-10px !important;
    bottom:16px !important;
    width:302px !important;
    height:34px !important;
    opacity:.68 !important;
    filter:blur(17px) !important;
    background:
      radial-gradient(ellipse 24% 74% at 20% 58%, rgba(244,247,251,.13) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 32% 86% at 48% 52%, rgba(248,250,252,.20) 0%, rgba(232,239,247,.08) 50%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 26% 76% at 78% 54%, rgba(232,239,247,.14) 0%, rgba(255,255,255,0) 79%) !important;
    animation:studyhopeRunnerFogShear52 2.8s ease-in-out infinite alternate !important;
  }

  .banner-runner-trail{
    opacity:.76 !important;
    filter:blur(18px) !important;
    background:
      radial-gradient(ellipse 18% 70% at 16% 58%, rgba(236,241,248,.045) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 24% 84% at 38% 56%, rgba(242,246,250,.070) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 30% 90% at 66% 54%, rgba(231,237,246,.085) 0%, rgba(196,208,230,.032) 49%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 16% 74% at 91% 52%, rgba(210,222,240,.05) 0%, rgba(255,255,255,0) 78%) !important;
    animation:studyhopeTrailAcross45 18s linear infinite, studyhopeRunnerTrailBreath52 3.2s ease-in-out infinite alternate !important;
  }
}

@keyframes studyhopeNaturalBottomFog52A{
  0%   {transform:translate3d(-1.8%, 0, 0) scaleX(.98) scaleY(.96); opacity:.24;}
  50%  {transform:translate3d(.6%, -1.5px, 0) scaleX(1.02) scaleY(1.02); opacity:.30;}
  100% {transform:translate3d(2.4%, .8px, 0) scaleX(1.04) scaleY(1.00); opacity:.27;}
}
@keyframes studyhopeNaturalBottomFog52B{
  0%   {transform:translate3d(1.2%, 0, 0) scaleX(.97) scaleY(.94); opacity:.17;}
  50%  {transform:translate3d(-.5%, -1px, 0) scaleX(1.01) scaleY(1.00); opacity:.22;}
  100% {transform:translate3d(-2.0%, .6px, 0) scaleX(1.04) scaleY(1.03); opacity:.19;}
}
@keyframes studyhopeNaturalBottomFog52C{
  0%   {transform:translate3d(-.8%, 0, 0) scaleX(.99) scaleY(.96); opacity:.13;}
  50%  {transform:translate3d(1.1%, -1.2px, 0) scaleX(1.03) scaleY(1.02); opacity:.17;}
  100% {transform:translate3d(2.0%, .7px, 0) scaleX(1.05) scaleY(1.01); opacity:.15;}
}
@keyframes studyhopeRunnerFogPulse52{
  0%   {transform:translate3d(-3px,0,0) scaleX(.98) scaleY(.97); opacity:.74;}
  50%  {transform:translate3d(0,-1px,0) scaleX(1.02) scaleY(1.03); opacity:.86;}
  100% {transform:translate3d(3px,.5px,0) scaleX(1.04) scaleY(1.00); opacity:.80;}
}
@keyframes studyhopeRunnerFogShear52{
  0%   {transform:translate3d(-2px,0,0) scaleX(.98); opacity:.58;}
  50%  {transform:translate3d(1px,-.8px,0) scaleX(1.02); opacity:.72;}
  100% {transform:translate3d(3px,.5px,0) scaleX(1.04); opacity:.64;}
}
@keyframes studyhopeRunnerTrailBreath52{
  0%   {opacity:.44; transform:scaleX(.98) scaleY(.96);}
  50%  {opacity:.61; transform:scaleX(1.02) scaleY(1.02);}
  100% {opacity:.54; transform:scaleX(1.04) scaleY(1.00);}
}

@media (prefers-reduced-motion: reduce){
  .banner-base-fog,
  .banner-runner-fade-track::before,
  .banner-runner-fade-track::after,
  .banner-runner-trail{animation:none!important;}
}


/* 2026-09-08 메인 배너 53단계 — 안개 보강 / 배경 운무 증량 + 러너 안개 구름형 재구성 */
@media (min-width:681px){
  /* 1단계: 하단 기본 운무를 더 넓고 풍부하게, 높낮이와 농도 차이를 크게 준다. */
  .banner-base-fog.fog-1{
    left:-18% !important;
    bottom:10px !important;
    width:156% !important;
    height:116px !important;
    opacity:.36 !important;
    filter:blur(34px) !important;
    background:
      radial-gradient(ellipse 16% 46% at 3% 70%, rgba(219,228,242,.06) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 22% 66% at 12% 58%, rgba(235,240,247,.11) 0%, rgba(212,221,235,.05) 42%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 18% 54% at 23% 73%, rgba(228,235,244,.07) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 26% 82% at 33% 50%, rgba(243,246,250,.14) 0%, rgba(209,219,235,.06) 43%, rgba(255,255,255,0) 83%),
      radial-gradient(ellipse 16% 48% at 45% 70%, rgba(229,236,245,.08) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 28% 88% at 56% 48%, rgba(244,247,250,.15) 0%, rgba(210,220,236,.06) 44%, rgba(255,255,255,0) 83%),
      radial-gradient(ellipse 18% 52% at 68% 72%, rgba(231,237,245,.08) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 24% 76% at 78% 54%, rgba(240,244,249,.12) 0%, rgba(204,215,233,.05) 43%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 18% 50% at 89% 70%, rgba(228,234,243,.07) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 14% 44% at 97% 64%, rgba(216,226,241,.05) 0%, rgba(255,255,255,0) 78%) !important;
    animation:studyhopeNaturalBottomFog53A 38s ease-in-out infinite alternate !important;
  }

  .banner-base-fog.fog-2{
    left:-12% !important;
    bottom:30px !important;
    width:132% !important;
    height:86px !important;
    opacity:.28 !important;
    filter:blur(26px) !important;
    background:
      radial-gradient(ellipse 14% 44% at 6% 68%, rgba(222,231,243,.05) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 20% 72% at 20% 48%, rgba(240,244,248,.11) 0%, rgba(206,217,233,.05) 42%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 16% 48% at 35% 70%, rgba(232,238,246,.08) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 24% 80% at 48% 46%, rgba(242,246,249,.12) 0%, rgba(205,216,232,.05) 43%, rgba(255,255,255,0) 83%),
      radial-gradient(ellipse 16% 46% at 62% 70%, rgba(231,237,245,.08) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 22% 74% at 76% 48%, rgba(239,244,249,.11) 0%, rgba(201,213,232,.05) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 16% 48% at 90% 66%, rgba(227,235,245,.06) 0%, rgba(255,255,255,0) 79%) !important;
    animation:studyhopeNaturalBottomFog53B 31s ease-in-out infinite alternate !important;
  }

  .banner-base-fog.fog-3{
    left:-20% !important;
    bottom:-2px !important;
    width:144% !important;
    height:64px !important;
    opacity:.22 !important;
    filter:blur(20px) !important;
    background:
      radial-gradient(ellipse 20% 60% at 8% 64%, rgba(231,237,246,.06) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 14% 40% at 20% 76%, rgba(238,242,248,.06) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 24% 72% at 33% 54%, rgba(239,243,248,.10) 0%, rgba(204,215,232,.04) 43%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 16% 42% at 48% 73%, rgba(234,239,247,.07) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 24% 74% at 61% 52%, rgba(237,242,248,.10) 0%, rgba(200,212,231,.04) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 18% 48% at 78% 66%, rgba(229,236,245,.07) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 14% 38% at 93% 72%, rgba(218,228,242,.05) 0%, rgba(255,255,255,0) 78%) !important;
    animation:studyhopeNaturalBottomFog53C 40s ease-in-out infinite alternate !important;
  }

  /* 2단계: 러너 동행 안개를 타원형 글로우 대신 불규칙한 구름형 안개 덩어리로 만든다. */
  .banner-runner-fade-track{
    bottom:12px !important;
    width:388px !important;
    height:110px !important;
  }

  .banner-runner-fade-track::before{
    left:-58px !important;
    bottom:-2px !important;
    width:486px !important;
    height:76px !important;
    opacity:.94 !important;
    filter:blur(22px) !important;
    background:
      radial-gradient(ellipse 10% 34% at 6% 70%, rgba(238,243,249,.07) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 14% 46% at 15% 56%, rgba(246,248,251,.17) 0%, rgba(224,232,243,.07) 48%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 10% 32% at 24% 76%, rgba(240,245,250,.10) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 18% 58% at 34% 52%, rgba(247,249,252,.23) 0%, rgba(228,235,244,.08) 48%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 12% 38% at 46% 72%, rgba(240,245,250,.11) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 16% 52% at 57% 48%, rgba(245,248,252,.20) 0%, rgba(222,231,243,.08) 48%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 12% 40% at 69% 68%, rgba(235,241,248,.12) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 14% 46% at 80% 54%, rgba(236,242,249,.16) 0%, rgba(213,224,240,.06) 48%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 10% 34% at 90% 72%, rgba(228,236,246,.10) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 8% 28% at 97% 62%, rgba(214,226,241,.07) 0%, rgba(255,255,255,0) 78%) !important;
    animation:studyhopeRunnerFogPulse53 3.8s ease-in-out infinite alternate !important;
  }

  .banner-runner-fade-track::after{
    left:-20px !important;
    bottom:14px !important;
    width:348px !important;
    height:44px !important;
    opacity:.78 !important;
    filter:blur(14px) !important;
    background:
      radial-gradient(ellipse 14% 42% at 10% 62%, rgba(241,245,250,.10) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 18% 58% at 24% 50%, rgba(246,249,252,.17) 0%, rgba(230,238,247,.06) 50%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 12% 34% at 38% 72%, rgba(241,246,251,.09) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 20% 60% at 52% 50%, rgba(248,250,252,.19) 0%, rgba(233,239,247,.07) 50%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 14% 40% at 67% 68%, rgba(236,242,249,.11) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 18% 54% at 82% 52%, rgba(233,239,247,.15) 0%, rgba(211,223,240,.05) 48%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 10% 30% at 95% 66%, rgba(219,229,243,.08) 0%, rgba(255,255,255,0) 78%) !important;
    animation:studyhopeRunnerFogShear53 2.9s ease-in-out infinite alternate !important;
  }

  .banner-runner-trail{
    opacity:.64 !important;
    filter:blur(19px) !important;
    background:
      radial-gradient(ellipse 12% 40% at 11% 64%, rgba(233,239,247,.04) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 16% 52% at 23% 52%, rgba(240,245,250,.06) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 11% 34% at 34% 74%, rgba(236,241,248,.05) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 20% 62% at 48% 54%, rgba(243,246,250,.09) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 14% 42% at 63% 70%, rgba(233,239,247,.07) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 18% 56% at 77% 54%, rgba(229,236,246,.09) 0%, rgba(196,208,230,.03) 48%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 10% 34% at 91% 62%, rgba(210,222,240,.05) 0%, rgba(255,255,255,0) 78%) !important;
    animation:studyhopeTrailAcross45 18s linear infinite, studyhopeRunnerTrailBreath53 3.4s ease-in-out infinite alternate !important;
  }
}

@keyframes studyhopeNaturalBottomFog53A{
  0%   {transform:translate3d(-2.4%, 0, 0) scaleX(.98) scaleY(.95); opacity:.32;}
  50%  {transform:translate3d(.8%, -2px, 0) scaleX(1.03) scaleY(1.03); opacity:.39;}
  100% {transform:translate3d(2.8%, .9px, 0) scaleX(1.05) scaleY(1.00); opacity:.35;}
}
@keyframes studyhopeNaturalBottomFog53B{
  0%   {transform:translate3d(1.4%, 0, 0) scaleX(.97) scaleY(.94); opacity:.24;}
  50%  {transform:translate3d(-.8%, -1.2px, 0) scaleX(1.02) scaleY(1.01); opacity:.30;}
  100% {transform:translate3d(-2.4%, .7px, 0) scaleX(1.05) scaleY(1.03); opacity:.27;}
}
@keyframes studyhopeNaturalBottomFog53C{
  0%   {transform:translate3d(-1.0%, 0, 0) scaleX(.99) scaleY(.96); opacity:.19;}
  50%  {transform:translate3d(1.4%, -1.1px, 0) scaleX(1.04) scaleY(1.03); opacity:.24;}
  100% {transform:translate3d(2.4%, .7px, 0) scaleX(1.06) scaleY(1.01); opacity:.21;}
}
@keyframes studyhopeRunnerFogPulse53{
  0%   {transform:translate3d(-4px,0,0) scaleX(.97) scaleY(.96); opacity:.80;}
  50%  {transform:translate3d(0,-1px,0) scaleX(1.03) scaleY(1.04); opacity:.90;}
  100% {transform:translate3d(4px,.6px,0) scaleX(1.05) scaleY(1.00); opacity:.84;}
}
@keyframes studyhopeRunnerFogShear53{
  0%   {transform:translate3d(-3px,0,0) scaleX(.98); opacity:.61;}
  50%  {transform:translate3d(1px,-.7px,0) scaleX(1.03); opacity:.75;}
  100% {transform:translate3d(4px,.5px,0) scaleX(1.05); opacity:.67;}
}
@keyframes studyhopeRunnerTrailBreath53{
  0%   {opacity:.50; transform:scaleX(.98) scaleY(.96);}
  50%  {opacity:.68; transform:scaleX(1.03) scaleY(1.03);}
  100% {opacity:.59; transform:scaleX(1.05) scaleY(1.00);}
}

@media (prefers-reduced-motion: reduce){
  .banner-base-fog,
  .banner-runner-fade-track::before,
  .banner-runner-fade-track::after,
  .banner-runner-trail{animation:none!important;}
}


/* 2026-09-08 메인 배너 54단계 — 기본 운무를 별도 무한순환형으로 재설계 / 좌하단 뭉침 제거 */
@media (min-width:681px){
  /* 기본 운무는 하단 전체에 미리 깔아둔 형태로 두고, 러너와 별도로 아주 천천히 순환시킨다. */
  .banner-base-fog{
    mix-blend-mode:screen;
    will-change:transform,opacity,filter;
  }

  /* 가장 아래 깔리는 넓은 운무층: 좌측 뭉침을 없애고 길게 흐르는 기본 흐름을 만든다. */
  .banner-base-fog.fog-1{
    left:-10% !important;
    bottom:26px !important;
    width:130% !important;
    height:108px !important;
    opacity:.31 !important;
    filter:blur(30px) !important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(221,229,242,.018) 7%,
        rgba(233,239,247,.040) 16%,
        rgba(244,247,250,.068) 28%,
        rgba(233,239,247,.050) 42%,
        rgba(245,248,251,.072) 58%,
        rgba(230,237,246,.048) 73%,
        rgba(240,244,249,.060) 86%,
        rgba(215,225,240,.022) 95%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse 18% 58% at 10% 64%, rgba(226,234,244,.045) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 24% 78% at 29% 52%, rgba(241,245,249,.088) 0%, rgba(209,219,235,.040) 43%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 16% 46% at 45% 69%, rgba(232,238,246,.050) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 26% 84% at 59% 48%, rgba(244,247,250,.092) 0%, rgba(208,218,235,.040) 44%, rgba(255,255,255,0) 83%),
      radial-gradient(ellipse 19% 60% at 77% 61%, rgba(232,239,247,.055) 0%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 16% 52% at 93% 56%, rgba(225,233,244,.040) 0%, rgba(255,255,255,0) 79%) !important;
    animation:studyhopeBaseMistFlow54A 52s ease-in-out infinite alternate !important;
  }

  /* 중간 운무층: 기본 흐름 위에 높낮이 차이를 만드는 보조층 */
  .banner-base-fog.fog-2{
    left:-6% !important;
    bottom:28px !important;
    width:118% !important;
    height:76px !important;
    opacity:.24 !important;
    filter:blur(24px) !important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(229,236,245,.010) 9%,
        rgba(239,244,249,.036) 23%,
        rgba(247,249,252,.058) 36%,
        rgba(235,241,248,.040) 52%,
        rgba(244,247,250,.060) 69%,
        rgba(230,237,246,.034) 84%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse 14% 42% at 11% 64%, rgba(228,235,245,.038) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 20% 68% at 33% 46%, rgba(242,246,249,.072) 0%, rgba(205,216,233,.032) 43%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 14% 40% at 50% 67%, rgba(232,239,247,.042) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 22% 72% at 70% 48%, rgba(240,244,249,.076) 0%, rgba(200,212,231,.032) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 15% 42% at 90% 60%, rgba(227,235,245,.038) 0%, rgba(255,255,255,0) 79%) !important;
    animation:studyhopeBaseMistFlow54B 46s ease-in-out infinite alternate !important;
  }

  /* 가장 앞의 낮은 운무층: 길게 흐르며 화면 하단을 부드럽게 연결 */
  .banner-base-fog.fog-3{
    left:-14% !important;
    bottom:-1px !important;
    width:138% !important;
    height:58px !important;
    opacity:.18 !important;
    filter:blur(18px) !important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(231,237,246,.012) 8%,
        rgba(241,245,249,.028) 20%,
        rgba(246,248,251,.046) 34%,
        rgba(235,241,248,.034) 50%,
        rgba(243,246,250,.044) 67%,
        rgba(228,236,245,.026) 82%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse 16% 48% at 14% 60%, rgba(232,238,246,.040) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 22% 66% at 39% 52%, rgba(240,244,249,.060) 0%, rgba(201,213,231,.026) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 17% 50% at 63% 62%, rgba(231,238,246,.042) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 20% 62% at 84% 54%, rgba(237,242,248,.054) 0%, rgba(197,210,230,.022) 44%, rgba(255,255,255,0) 82%) !important;
    animation:studyhopeBaseMistFlow54C 58s ease-in-out infinite alternate !important;
  }
}

@keyframes studyhopeBaseMistFlow54A{
  0%   {transform:translate3d(-1.8%, 0, 0) scaleX(.99) scaleY(.97); opacity:.28;}
  50%  {transform:translate3d(.7%, -1.6px, 0) scaleX(1.02) scaleY(1.03); opacity:.33;}
  100% {transform:translate3d(2.2%, .8px, 0) scaleX(1.04) scaleY(1.00); opacity:.30;}
}
@keyframes studyhopeBaseMistFlow54B{
  0%   {transform:translate3d(1.2%, 0, 0) scaleX(.98) scaleY(.96); opacity:.21;}
  50%  {transform:translate3d(-.5%, -1.1px, 0) scaleX(1.02) scaleY(1.01); opacity:.26;}
  100% {transform:translate3d(-2.1%, .6px, 0) scaleX(1.04) scaleY(1.02); opacity:.23;}
}
@keyframes studyhopeBaseMistFlow54C{
  0%   {transform:translate3d(-1.0%, 0, 0) scaleX(.99) scaleY(.97); opacity:.15;}
  50%  {transform:translate3d(1.0%, -0.8px, 0) scaleX(1.03) scaleY(1.02); opacity:.20;}
  100% {transform:translate3d(2.0%, .6px, 0) scaleX(1.05) scaleY(1.01); opacity:.17;}
}

@media (prefers-reduced-motion: reduce){
  .banner-base-fog{animation:none!important;}
}


/* 2026-09-09 메인 배너 89단계 — 하단 검정 그라데이션 반영 / 기본운무·러너 보호 */
@media (min-width:681px){
  /* 보호영역: 러너, 러너 동행 운무, 기본운무 이동, 일출 흐름은 유지한다. */

  /* 1) 상위 원천 수정: 하단의 푸른 바닥 느낌을 제거하고,
     바닥은 검은 어둠에서 시작해 안개선까지 자연스럽게 올라오는 세로 그라데이션으로 바꾼다. */
  .main-banner-stage{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 58%,
        rgba(3,5,10,.18) 69%,
        rgba(2,4,9,.42) 78%,
        rgba(1,2,5,.72) 89%,
        rgba(0,0,0,.94) 100%),
      linear-gradient(135deg,
        rgba(17,53,120,1) 0%,
        rgba(13,45,105,1) 18%,
        rgba(10,37,88,1) 36%,
        rgba(8,31,74,1) 54%,
        rgba(7,25,61,1) 72%,
        rgba(6,20,50,1) 88%,
        rgba(6,18,45,1) 100%) !important;
  }

  /* 2) 기본운무는 별도 레이어로 다시 깐다. 좌측은 덩어리 없이 흐름으로 시작한다. */
  .banner-base-fog{
    mix-blend-mode:screen;
    will-change:transform,opacity,filter;
  }

  .banner-base-fog.fog-1{
    left:-8% !important;
    bottom:10px !important;
    width:126% !important;
    height:104px !important;
    opacity:.30 !important;
    filter:blur(32px) !important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 6%,
        rgba(225,233,244,.015) 13%,
        rgba(235,241,248,.036) 22%,
        rgba(244,247,250,.062) 34%,
        rgba(233,239,247,.048) 47%,
        rgba(244,247,250,.068) 61%,
        rgba(232,238,246,.050) 75%,
        rgba(239,244,249,.060) 88%,
        rgba(220,229,242,.024) 96%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse 20% 62% at 24% 58%, rgba(239,244,249,.075) 0%, rgba(206,217,233,.032) 42%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 15% 44% at 41% 72%, rgba(232,238,246,.045) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 24% 78% at 57% 50%, rgba(243,246,250,.082) 0%, rgba(206,217,233,.034) 44%, rgba(255,255,255,0) 83%),
      radial-gradient(ellipse 16% 50% at 74% 66%, rgba(232,239,247,.050) 0%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 20% 60% at 89% 56%, rgba(237,242,248,.056) 0%, rgba(198,210,230,.024) 44%, rgba(255,255,255,0) 82%) !important;
    animation:studyhopeBaseMistFlow55A 56s ease-in-out infinite alternate !important;
  }

  .banner-base-fog.fog-2{
    left:-4% !important;
    bottom:30px !important;
    width:116% !important;
    height:74px !important;
    opacity:.23 !important;
    filter:blur(24px) !important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 8%,
        rgba(229,236,245,.010) 16%,
        rgba(239,244,249,.030) 28%,
        rgba(247,249,252,.052) 41%,
        rgba(235,241,248,.036) 55%,
        rgba(244,247,250,.056) 70%,
        rgba(230,237,246,.032) 85%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse 16% 48% at 28% 48%, rgba(241,245,249,.060) 0%, rgba(205,216,233,.024) 42%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 13% 38% at 47% 68%, rgba(232,239,247,.038) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 18% 58% at 69% 50%, rgba(240,244,249,.064) 0%, rgba(200,212,231,.024) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 14% 40% at 88% 60%, rgba(227,235,245,.034) 0%, rgba(255,255,255,0) 79%) !important;
    animation:studyhopeBaseMistFlow55B 48s ease-in-out infinite alternate !important;
  }

  .banner-base-fog.fog-3{
    left:-12% !important;
    bottom:0 !important;
    width:136% !important;
    height:54px !important;
    opacity:.17 !important;
    filter:blur(18px) !important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 7%,
        rgba(231,237,246,.010) 18%,
        rgba(241,245,249,.024) 31%,
        rgba(246,248,251,.040) 46%,
        rgba(235,241,248,.030) 60%,
        rgba(243,246,250,.040) 74%,
        rgba(228,236,245,.022) 87%,
        rgba(255,255,255,0) 100%),
      radial-gradient(ellipse 18% 54% at 36% 54%, rgba(239,243,248,.048) 0%, rgba(201,213,231,.020) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 15% 44% at 61% 64%, rgba(231,238,246,.036) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 17% 52% at 83% 56%, rgba(237,242,248,.046) 0%, rgba(197,210,230,.018) 44%, rgba(255,255,255,0) 82%) !important;
    animation:studyhopeBaseMistFlow55C 60s ease-in-out infinite alternate !important;
  }
}

@keyframes studyhopeBaseMistFlow55A{
  0%   {transform:translate3d(-1.6%,0,0) scaleX(.99) scaleY(.97); opacity:.27;}
  50%  {transform:translate3d(.6%,-1.4px,0) scaleX(1.02) scaleY(1.03); opacity:.32;}
  100% {transform:translate3d(2.0%,.8px,0) scaleX(1.04) scaleY(1.00); opacity:.29;}
}
@keyframes studyhopeBaseMistFlow55B{
  0%   {transform:translate3d(1.0%,0,0) scaleX(.98) scaleY(.96); opacity:.20;}
  50%  {transform:translate3d(-.4%,-1.0px,0) scaleX(1.02) scaleY(1.01); opacity:.25;}
  100% {transform:translate3d(-1.8%,.6px,0) scaleX(1.04) scaleY(1.02); opacity:.22;}
}
@keyframes studyhopeBaseMistFlow55C{
  0%   {transform:translate3d(-.8%,0,0) scaleX(.99) scaleY(.97); opacity:.14;}
  50%  {transform:translate3d(.8%,-.8px,0) scaleX(1.03) scaleY(1.02); opacity:.19;}
  100% {transform:translate3d(1.8%,.5px,0) scaleX(1.05) scaleY(1.01); opacity:.16;}
}

@media (prefers-reduced-motion: reduce){
  .banner-base-fog{animation:none!important;}
}


/* 2026-09-08 메인 배너 56단계 — 좌하단 뭉침 원천 수정 / 러너 동행 운무 보호 */
@media (min-width:681px){
  /* 보호영역: 러너 본체 및 러너 동행 운무 형상은 유지한다. */

  /* 좌하단에 먼저 걸리던 trail 보조 운무의 시작점을 화면 밖으로 더 빼고,
     초기 투명 구간을 늘려 좌하단 뭉침을 제거한다. */
  .banner-runner-trail{
    left:43vw !important;
    width:760px !important;
    opacity:0 !important;
    animation:studyhopeTrailAcross56 18s linear infinite,
              studyhopeRunnerTrailBreath53 3.4s ease-in-out infinite alternate !important;
  }

  .banner-runner-trail.trail-1{animation-delay:.18s,0s !important;}
  .banner-runner-trail.trail-2{animation-delay:.44s,.2s !important;}
  .banner-runner-trail.trail-3{animation-delay:.76s,.4s !important;}
  .banner-runner-trail.trail-4{animation-delay:1.12s,.6s !important;}
  .banner-runner-trail.trail-5{animation-delay:1.52s,.8s !important;}
}

@keyframes studyhopeTrailAcross56{
  0%{
    transform:translate3d(0,0,0) scaleX(.96);
    opacity:0;
  }
  10%{
    opacity:0;
  }
  16%{
    opacity:.02;
  }
  24%{
    opacity:.07;
  }
  44%{
    opacity:.12;
  }
  70%{
    opacity:.11;
  }
  86%{
    opacity:.07;
  }
  94%{
    opacity:.025;
  }
  98%{
    opacity:0;
  }
  100%{
    transform:translate3d(calc(57vw + 40px),0,0) scaleX(1.04);
    opacity:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .banner-runner-trail{animation:none!important;}
}

/* 2026-09-08 메인 배너 57단계 — 기본운무만 재설계 / 자연 구름형 + 천천히 무한순환
   보호영역: 러너 본체, 러너 위치, 러너와 함께 움직이는 운무 및 trail 로직은 수정하지 않는다. */
@media (min-width:681px){
  .banner-base-fog{
    pointer-events:none;
    mix-blend-mode:screen;
    transform-origin:50% 70%;
    will-change:transform,opacity,filter;
  }

  .banner-base-fog.fog-1{
    left:-16% !important;
    bottom:4px !important;
    width:148% !important;
    height:128px !important;
    opacity:.42 !important;
    filter:blur(27px) !important;
    border-radius:0 !important;
    background:
      radial-gradient(ellipse 14% 38% at 12% 72%, rgba(224,231,242,.055) 0%, rgba(224,231,242,.020) 44%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 21% 62% at 27% 58%, rgba(239,243,248,.12) 0%, rgba(210,220,235,.052) 42%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 12% 32% at 39% 76%, rgba(226,234,244,.065) 0%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 25% 72% at 53% 53%, rgba(244,247,250,.13) 0%, rgba(207,218,234,.055) 42%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 15% 42% at 67% 72%, rgba(230,237,246,.070) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 22% 64% at 79% 57%, rgba(239,244,249,.105) 0%, rgba(203,214,232,.045) 44%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 13% 36% at 91% 70%, rgba(222,231,243,.055) 0%, rgba(255,255,255,0) 77%),
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(226,234,244,.026) 12%,
        rgba(240,244,249,.052) 28%,
        rgba(228,236,246,.038) 43%,
        rgba(243,246,250,.058) 59%,
        rgba(229,237,246,.038) 74%,
        rgba(238,243,249,.048) 88%,
        rgba(255,255,255,0) 100%) !important;
    animation:studyhopeBaseMistLoop57A 72s ease-in-out infinite alternate !important;
  }

  .banner-base-fog.fog-2{
    left:-10% !important;
    bottom:25px !important;
    width:130% !important;
    height:92px !important;
    opacity:.31 !important;
    filter:blur(21px) !important;
    border-radius:0 !important;
    background:
      radial-gradient(ellipse 13% 42% at 15% 66%, rgba(228,235,245,.050) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 18% 68% at 31% 48%, rgba(242,245,249,.105) 0%, rgba(205,216,233,.045) 42%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 11% 34% at 44% 74%, rgba(231,238,246,.060) 0%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 20% 70% at 60% 48%, rgba(240,244,249,.11) 0%, rgba(201,213,231,.042) 43%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 12% 38% at 74% 71%, rgba(227,235,245,.058) 0%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 17% 56% at 88% 56%, rgba(236,241,248,.085) 0%, rgba(198,210,230,.035) 44%, rgba(255,255,255,0) 80%),
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(232,239,247,.018) 14%,
        rgba(243,246,250,.040) 31%,
        rgba(230,237,246,.030) 48%,
        rgba(242,246,250,.044) 66%,
        rgba(227,235,245,.026) 84%,
        rgba(255,255,255,0) 100%) !important;
    animation:studyhopeBaseMistLoop57B 64s ease-in-out infinite alternate-reverse !important;
  }

  .banner-base-fog.fog-3{
    left:-18% !important;
    bottom:-5px !important;
    width:150% !important;
    height:68px !important;
    opacity:.24 !important;
    filter:blur(16px) !important;
    border-radius:0 !important;
    background:
      radial-gradient(ellipse 15% 48% at 18% 62%, rgba(233,239,247,.052) 0%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 20% 62% at 38% 55%, rgba(241,245,249,.078) 0%, rgba(201,213,231,.028) 44%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 12% 34% at 51% 73%, rgba(230,237,246,.045) 0%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 19% 60% at 68% 55%, rgba(238,243,249,.072) 0%, rgba(198,210,230,.026) 44%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 14% 42% at 86% 64%, rgba(226,234,244,.050) 0%, rgba(255,255,255,0) 78%),
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(232,239,247,.015) 12%,
        rgba(242,245,249,.030) 27%,
        rgba(230,237,246,.025) 43%,
        rgba(241,245,249,.032) 60%,
        rgba(228,236,245,.022) 77%,
        rgba(238,243,249,.026) 90%,
        rgba(255,255,255,0) 100%) !important;
    animation:studyhopeBaseMistLoop57C 82s ease-in-out infinite alternate !important;
  }
}

@keyframes studyhopeBaseMistLoop57A{
  0%   {transform:translate3d(-2.2%, 1px, 0) scaleX(.99) scaleY(.97); opacity:.37;}
  22%  {transform:translate3d(-.8%, -1px, 0) scaleX(1.01) scaleY(1.01); opacity:.43;}
  48%  {transform:translate3d(.7%, -2.5px, 0) scaleX(1.03) scaleY(1.04); opacity:.40;}
  74%  {transform:translate3d(2.0%, -.5px, 0) scaleX(1.04) scaleY(.99); opacity:.45;}
  100% {transform:translate3d(3.0%, 1px, 0) scaleX(1.02) scaleY(1.02); opacity:.39;}
}
@keyframes studyhopeBaseMistLoop57B{
  0%   {transform:translate3d(2.0%, 0, 0) scaleX(1.01) scaleY(.96); opacity:.27;}
  25%  {transform:translate3d(.8%, -2px, 0) scaleX(.99) scaleY(1.03); opacity:.32;}
  52%  {transform:translate3d(-.7%, -1px, 0) scaleX(1.03) scaleY(1.00); opacity:.29;}
  78%  {transform:translate3d(-2.0%, 1px, 0) scaleX(1.05) scaleY(1.04); opacity:.34;}
  100% {transform:translate3d(-3.0%, 0, 0) scaleX(1.02) scaleY(.98); opacity:.30;}
}
@keyframes studyhopeBaseMistLoop57C{
  0%   {transform:translate3d(-1.5%, 0, 0) scaleX(.99) scaleY(.98); opacity:.20;}
  25%  {transform:translate3d(-.2%, -1px, 0) scaleX(1.01) scaleY(1.02); opacity:.25;}
  50%  {transform:translate3d(1.0%, -.5px, 0) scaleX(1.03) scaleY(.99); opacity:.22;}
  75%  {transform:translate3d(2.2%, -1.5px, 0) scaleX(1.04) scaleY(1.03); opacity:.27;}
  100% {transform:translate3d(3.2%, 0, 0) scaleX(1.02) scaleY(1.00); opacity:.23;}
}

@media (prefers-reduced-motion: reduce){
  .banner-base-fog{animation:none!important;}
}


/* 2026-09-10 메인 배너 135단계 — 기본운무 원천 재구성 / 검정영역에 흩어진 구름형 운무
   원칙: 검정 배경을 띠로 덮지 않고, 도서관 끝선(45%) 이후에 높낮이가 다른 운무 덩어리만 띄엄띄엄 흐르게 한다.
   러너 본체/속도/스프라이트는 유지하며 러너 동행 운무는 별도 원천을 그대로 사용한다. */
@media (min-width:681px){
  .banner-base-fog{
    pointer-events:none;
    mix-blend-mode:screen;
    transform-origin:50% 70%;
    will-change:transform,opacity,filter;
  }

  .banner-base-fog.fog-1{
    left:45% !important;
    bottom:18px !important;
    width:58% !important;
    height:118px !important;
    opacity:.46 !important;
    filter:blur(23px) !important;
    border-radius:0 !important;
    background:
      radial-gradient(ellipse 18% 48% at 8% 73%, rgba(239,244,250,.22) 0%, rgba(216,226,240,.08) 43%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 23% 67% at 36% 50%, rgba(247,249,252,.28) 0%, rgba(213,224,239,.09) 42%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 15% 39% at 67% 74%, rgba(235,242,249,.18) 0%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 21% 56% at 92% 58%, rgba(242,246,251,.23) 0%, rgba(208,220,237,.07) 44%, rgba(255,255,255,0) 78%) !important;
    animation:studyhopeBaseMistLoop65A 54s ease-in-out infinite alternate !important;
  }

  .banner-base-fog.fog-2{
    left:47% !important;
    bottom:54px !important;
    width:55% !important;
    height:92px !important;
    opacity:.35 !important;
    filter:blur(18px) !important;
    border-radius:0 !important;
    background:
      radial-gradient(ellipse 15% 51% at 13% 67%, rgba(238,244,250,.17) 0%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 24% 72% at 48% 43%, rgba(247,249,252,.24) 0%, rgba(209,221,238,.07) 43%, rgba(255,255,255,0) 78%),
      radial-gradient(ellipse 17% 46% at 82% 70%, rgba(232,240,248,.17) 0%, rgba(255,255,255,0) 77%) !important;
    animation:studyhopeBaseMistLoop65B 47s ease-in-out infinite alternate-reverse !important;
  }

  .banner-base-fog.fog-3{
    left:46% !important;
    bottom:5px !important;
    width:57% !important;
    height:70px !important;
    opacity:.30 !important;
    filter:blur(14px) !important;
    border-radius:0 !important;
    background:
      radial-gradient(ellipse 20% 54% at 20% 61%, rgba(241,246,251,.18) 0%, rgba(255,255,255,0) 77%),
      radial-gradient(ellipse 14% 38% at 57% 75%, rgba(231,239,248,.14) 0%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 21% 58% at 90% 55%, rgba(245,248,251,.20) 0%, rgba(205,218,236,.06) 44%, rgba(255,255,255,0) 78%) !important;
    animation:studyhopeBaseMistLoop65C 61s ease-in-out infinite alternate !important;
  }
}

/* 좌우 이동폭을 키워 실제로 흐르는 것이 눈에 보이되, 러너보다 훨씬 천천히 움직인다. */
@keyframes studyhopeBaseMistLoop65A{
  0%   {transform:translate3d(-8%, 1px, 0) scaleX(.98) scaleY(.97); opacity:.69;}
  25%  {transform:translate3d(-3%, -1px, 0) scaleX(1.01) scaleY(1.01); opacity:.78;}
  50%  {transform:translate3d(2%, -2px, 0) scaleX(1.03) scaleY(1.03); opacity:.73;}
  75%  {transform:translate3d(7%, 0, 0) scaleX(1.04) scaleY(.99); opacity:.81;}
  100% {transform:translate3d(11%, 1px, 0) scaleX(1.02) scaleY(1.01); opacity:.71;}
}
@keyframes studyhopeBaseMistLoop65B{
  0%   {transform:translate3d(9%, 0, 0) scaleX(1.01) scaleY(.97); opacity:.54;}
  25%  {transform:translate3d(4%, -2px, 0) scaleX(.99) scaleY(1.02); opacity:.63;}
  50%  {transform:translate3d(-1%, -1px, 0) scaleX(1.03) scaleY(1.00); opacity:.57;}
  75%  {transform:translate3d(-6%, 1px, 0) scaleX(1.04) scaleY(1.03); opacity:.66;}
  100% {transform:translate3d(-10%, 0, 0) scaleX(1.02) scaleY(.98); opacity:.59;}
}
@keyframes studyhopeBaseMistLoop65C{
  0%   {transform:translate3d(-7%, 0, 0) scaleX(.99) scaleY(.98); opacity:.42;}
  25%  {transform:translate3d(-2%, -1px, 0) scaleX(1.01) scaleY(1.02); opacity:.50;}
  50%  {transform:translate3d(3%, 0, 0) scaleX(1.03) scaleY(.99); opacity:.45;}
  75%  {transform:translate3d(8%, -1px, 0) scaleX(1.04) scaleY(1.02); opacity:.53;}
  100% {transform:translate3d(12%, 0, 0) scaleX(1.02) scaleY(1.00); opacity:.47;}
}

@media (prefers-reduced-motion: reduce){
  .banner-base-fog{animation:none!important;}
}


/* 2026-09-08 메인 배너 59단계 — 러너 실루엣 상시 선명 유지 / 중간 소실 제거
   보호영역: 기본운무, 러너 동행 운무, 러너 위치, 일출 관련 상태는 변경하지 않는다. */
@media (min-width:681px){
  .banner-runner-fade-track{
    animation:studyhopeRunnerFadeAcross59 18s linear infinite !important;
  }

  .banner-runner-sprite{
    opacity:1 !important;
    filter:brightness(.44) contrast(1.45) saturate(.15) !important;
  }
}

@keyframes studyhopeRunnerFadeAcross59{
  /* 단일 원천: 러너 실체의 시작점은 도서관 끝선(45vw) 바로 다음이다.
     track 자체가 left:-120px, sprite가 track 내부 left:120px이므로
     sprite의 실제 X좌표는 아래 translate 값과 정확히 일치한다. */
  0%{
    transform:translate3d(calc(45vw + 8px),0,0);
    opacity:0;
    filter:none;
  }
  2%{
    opacity:.55;
    filter:none;
  }
  4%{
    opacity:1;
    filter:none;
  }
  96%{
    transform:translate3d(calc(100vw - 52px),0,0);
    opacity:1;
    filter:none;
  }
  98%{
    transform:translate3d(calc(100vw - 36px),0,0);
    opacity:.92;
    filter:none;
  }
  100%{
    transform:translate3d(calc(100vw + 12px),0,0);
    opacity:0;
    filter:none;
  }
}




/* 2026-09-08 메인 배너 62단계 — 러너 위치 원천 초기화 후 단일 기준값 재부여
   과거 단계의 position/margin/top/bottom/left/right 위치값은 .banner-runner-sprite 원천에서 제거했다.
   러너 위치는 아래 단일 규칙에서만 관리한다.
   보호영역: 기본운무, 기본운무 이동, 러너 동행 운무, 러너 크기/속도/실루엣/프레임 애니메이션 유지. */
@media (min-width:681px){
  .banner-runner-sprite{
    position:absolute !important;
    left:120px !important;
    right:auto !important;
    top:auto !important;
    bottom:2px !important;
    margin:0 !important;
  }
}




/* 2026-09-08 메인 배너 73단계
   72단계 일출 원천을 통째로 교체.
   목표:
   - 시작 직후 오른쪽 중단에서 빛이 즉시 보이기 시작
   - 중단 → 상단 방향으로 빠르게 퍼지는 상승광
   - 러너 후반에는 빛이 아래로 내려와 러너가 밝은 빛 속으로 들어가는 효과
   - 붉은/주황 광량 상승 속도 대폭 가속
   보호영역: 65단계 러너/러너 동행운무/기본운무/기본운무 애니메이션 일절 수정 금지. */

@media (min-width:681px){
  .banner-dawn-light-sky69,
  .banner-dawn-light-ground69{
    z-index:3;
    right:-6%;
    bottom:-3%;
    width:76%;
    height:42%;
    opacity:0;
    mix-blend-mode:screen;
    background:
      radial-gradient(ellipse 34% 30% at 90% 80%,
        rgba(255,238,184,.58) 0%,
        rgba(255,187,95,.42) 18%,
        rgba(255,123,58,.26) 38%,
        rgba(215,60,40,.13) 58%,
        rgba(0,0,0,0) 82%),
      radial-gradient(ellipse 28% 24% at 74% 88%,
        rgba(255,204,125,.36) 0%,
        rgba(255,139,67,.23) 26%,
        rgba(221,69,42,.11) 50%,
        rgba(0,0,0,0) 80%),
      radial-gradient(ellipse 22% 34% at 84% 66%,
        rgba(255,177,89,.24) 0%,
        rgba(241,95,49,.14) 34%,
        rgba(188,47,39,.07) 58%,
        rgba(0,0,0,0) 82%),
      radial-gradient(ellipse 26% 20% at 62% 76%,
        rgba(255,188,102,.18) 0%,
        rgba(235,91,48,.10) 40%,
        rgba(0,0,0,0) 80%),
      radial-gradient(ellipse 18% 28% at 96% 94%,
        rgba(255,226,162,.42) 0%,
        rgba(255,157,76,.24) 30%,
        rgba(218,65,41,.10) 54%,
        rgba(0,0,0,0) 82%);
    -webkit-mask-image:
      radial-gradient(ellipse 96% 88% at 94% 84%,
        #000 0%,
        #000 44%,
        rgba(0,0,0,.78) 60%,
        rgba(0,0,0,.42) 76%,
        rgba(0,0,0,.14) 90%,
        transparent 100%);
    mask-image:
      radial-gradient(ellipse 96% 88% at 94% 84%,
        #000 0%,
        #000 44%,
        rgba(0,0,0,.78) 60%,
        rgba(0,0,0,.42) 76%,
        rgba(0,0,0,.14) 90%,
        transparent 100%);
    filter:blur(28px);
    animation:studyhopeDawnLightGround74 18s linear infinite;
  }
}

/* 초반 2~4초 내에 하늘 일출을 확실히 보이게 한다.
   크기는 고정하고 광량/선명도만 증가. */
@keyframes studyhopeDawnLightSky73{
  0%   {opacity:.10; filter:blur(24px);}
  3%   {opacity:.24; filter:blur(23px);}
  6%   {opacity:.38; filter:blur(22px);}
  10%  {opacity:.52; filter:blur(21px);}
  15%  {opacity:.64; filter:blur(20px);}
  22%  {opacity:.74; filter:blur(19px);}
  32%  {opacity:.82; filter:blur(18px);}
  46%  {opacity:.88; filter:blur(17px);}
  60%  {opacity:.92; filter:blur(17px);}
  74%  {opacity:.95; filter:blur(16px);}
  86%  {opacity:.98; filter:blur(16px);}
  96%  {opacity:1;   filter:blur(16px);}
  99%  {opacity:1;   filter:blur(16px);}
  100% {opacity:.10; filter:blur(24px);}
}

/* 하단은 러너가 중후반으로 들어가면서 빠르게 밝아지고,
   마지막 20% 구간에서 '빛 속으로 들어가는' 느낌을 만든다. */
@keyframes studyhopeDawnLightGround74{
  0%,34% {opacity:0;   filter:blur(30px);}
  40%    {opacity:.05; filter:blur(30px);}
  46%    {opacity:.12; filter:blur(29px);}
  52%    {opacity:.20; filter:blur(29px);}
  60%    {opacity:.31; filter:blur(28px);}
  68%    {opacity:.43; filter:blur(27px);}
  76%    {opacity:.56; filter:blur(26px);}
  84%    {opacity:.69; filter:blur(25px);}
  90%    {opacity:.79; filter:blur(24px);}
  95%    {opacity:.88; filter:blur(23px);}
  98%    {opacity:.94; filter:blur(23px);}
  99%    {opacity:.94; filter:blur(23px);}
  100%   {opacity:0;   filter:blur(30px);}
}
  40%    {opacity:.06; filter:blur(25px);}
  46%    {opacity:.13; filter:blur(24px);}
  52%    {opacity:.22; filter:blur(23px);}
  60%    {opacity:.34; filter:blur(22px);}
  68%    {opacity:.47; filter:blur(21px);}
  76%    {opacity:.61; filter:blur(20px);}
  84%    {opacity:.74; filter:blur(19px);}
  90%    {opacity:.84; filter:blur(18px);}
  95%    {opacity:.92; filter:blur(17px);}
  98%    {opacity:.98; filter:blur(17px);}
  99%    {opacity:.98; filter:blur(17px);}
  100%   {opacity:0;   filter:blur(26px);}
}

@media (prefers-reduced-motion:reduce){
  .banner-dawn-light-sky69,
  .banner-dawn-light-ground69{
    animation:none !important;
  }
}


/* 2026-09-08 메인 배너 76단계 — 파란 수평선 제거 / 빛을 머금은 안개형 일출
   75단계 일출 원천을 통째로 교체.
   보호영역: 러너, 러너 동행 운무, 65단계 기본운무 구조/이동은 수정하지 않는다.
   목표: 직선 경계 없이 청회색 운무와 붉은·주황 일출광이 부드럽게 섞이도록 한다. */

@media (min-width:681px){
  .banner-sunrise-horizon75,
  .banner-sunrise-rise75{
    position:absolute;
    pointer-events:none;
    display:block;
    border:0;
    transform:none;
    mix-blend-mode:screen;
    will-change:opacity,filter;
  }

  /* 하단 시작광:
     일직선 띠를 만들지 않고 높낮이가 다른 넓은 운무형 빛 덩어리로 분산.
     파란 경계가 생기지 않도록 충분히 높은 영역과 큰 blur를 사용한다. */
  .banner-sunrise-horizon75{
    z-index:1;
    right:-8%;
    bottom:-8%;
    width:82%;
    height:60%;
    opacity:.070;
    background:
      radial-gradient(ellipse 46% 34% at 94% 84%,
        rgba(255,235,176,.58) 0%,
        rgba(255,183,91,.42) 20%,
        rgba(255,119,56,.27) 40%,
        rgba(212,59,40,.12) 60%,
        rgba(0,0,0,0) 84%),
      radial-gradient(ellipse 38% 28% at 78% 90%,
        rgba(255,207,128,.28) 0%,
        rgba(255,143,68,.18) 30%,
        rgba(221,72,43,.09) 54%,
        rgba(0,0,0,0) 82%),
      radial-gradient(ellipse 30% 38% at 88% 70%,
        rgba(255,164,77,.19) 0%,
        rgba(235,87,47,.11) 36%,
        rgba(180,44,38,.05) 58%,
        rgba(0,0,0,0) 82%),
      radial-gradient(ellipse 28% 24% at 64% 82%,
        rgba(255,183,95,.14) 0%,
        rgba(230,83,46,.07) 42%,
        rgba(0,0,0,0) 80%);
    -webkit-mask-image:
      radial-gradient(ellipse 98% 96% at 94% 88%,
        #000 0%,
        #000 38%,
        rgba(0,0,0,.78) 56%,
        rgba(0,0,0,.43) 72%,
        rgba(0,0,0,.14) 88%,
        transparent 100%);
    mask-image:
      radial-gradient(ellipse 98% 96% at 94% 88%,
        #000 0%,
        #000 38%,
        rgba(0,0,0,.78) 56%,
        rgba(0,0,0,.43) 72%,
        rgba(0,0,0,.14) 88%,
        transparent 100%);
    filter:blur(38px);
    animation:studyhopeSunriseHorizon76 18s linear infinite;
  }

  /* 상승광:
     하단에서 생긴 빛이 안개에 스며들며 중단/상단으로 번지는 흐름.
     중심이 하나인 타원광 대신 여러 높이의 퍼짐을 겹친다. */
  .banner-sunrise-rise75{
    z-index:1;
    right:-7%;
    bottom:3%;
    width:80%;
    height:80%;
    opacity:0;
    background:
      radial-gradient(ellipse 56% 56% at 94% 92%,
        rgba(255,196,103,.24) 0%,
        rgba(255,128,59,.17) 26%,
        rgba(220,64,41,.08) 50%,
        rgba(0,0,0,0) 82%),
      radial-gradient(ellipse 48% 48% at 88% 74%,
        rgba(255,155,72,.12) 0%,
        rgba(235,88,47,.075) 34%,
        rgba(173,42,37,.035) 58%,
        rgba(0,0,0,0) 82%),
      radial-gradient(ellipse 42% 54% at 84% 56%,
        rgba(242,108,52,.085) 0%,
        rgba(197,49,39,.045) 46%,
        rgba(0,0,0,0) 82%),
      radial-gradient(ellipse 36% 52% at 80% 36%,
        rgba(212,63,42,.050) 0%,
        rgba(138,30,33,.022) 52%,
        rgba(0,0,0,0) 84%);
    -webkit-mask-image:
      radial-gradient(ellipse 98% 100% at 94% 92%,
        #000 0%,
        #000 32%,
        rgba(0,0,0,.74) 52%,
        rgba(0,0,0,.38) 70%,
        rgba(0,0,0,.12) 86%,
        transparent 100%);
    mask-image:
      radial-gradient(ellipse 98% 100% at 94% 92%,
        #000 0%,
        #000 32%,
        rgba(0,0,0,.74) 52%,
        rgba(0,0,0,.38) 70%,
        rgba(0,0,0,.12) 86%,
        transparent 100%);
    filter:blur(44px);
    animation:studyhopeSunriseRise76 18s linear infinite;
  }
}

/* 크기는 고정하고 광량만 증가.
   초반부터 하단에 존재감을 주되, 붉은/주황이 안개 속에서 부드럽게 섞이게 한다. */
@keyframes studyhopeSunriseHorizon76{
  0%   {opacity:.045; filter:blur(40px);}
  4%   {opacity:.12;  filter:blur(39px);}
  9%   {opacity:.22;  filter:blur(38px);}
  15%  {opacity:.33;  filter:blur(37px);}
  24%  {opacity:.44;  filter:blur(36px);}
  36%  {opacity:.55;  filter:blur(35px);}
  50%  {opacity:.65;  filter:blur(34px);}
  64%  {opacity:.74;  filter:blur(33px);}
  78%  {opacity:.82;  filter:blur(32px);}
  90%  {opacity:.89;  filter:blur(31px);}
  98%  {opacity:.94;  filter:blur(30px);}
  99%  {opacity:.94;  filter:blur(30px);}
  100% {opacity:.045; filter:blur(40px);}
}

@keyframes studyhopeSunriseRise76{
  0%   {opacity:0;    filter:blur(46px);}
  6%   {opacity:.035; filter:blur(45px);}
  12%  {opacity:.08;  filter:blur(44px);}
  20%  {opacity:.15;  filter:blur(43px);}
  30%  {opacity:.23;  filter:blur(42px);}
  42%  {opacity:.32;  filter:blur(41px);}
  56%  {opacity:.42;  filter:blur(40px);}
  70%  {opacity:.52;  filter:blur(39px);}
  82%  {opacity:.61;  filter:blur(38px);}
  92%  {opacity:.68;  filter:blur(37px);}
  98%  {opacity:.73;  filter:blur(36px);}
  99%  {opacity:.73;  filter:blur(36px);}
  100% {opacity:0;    filter:blur(46px);}
}

@media (prefers-reduced-motion:reduce){
  .banner-sunrise-horizon75,
  .banner-sunrise-rise75{
    animation:none !important;
  }
}


/* 2026-09-08 메인 배너 77단계 — 확정 문구 반영
   보호영역: 러너, 러너 동행 운무, 기본운무, 일출효과 수정 금지. */
@media (min-width:681px){
  .banner-copy77{
    position:absolute;
    z-index:6;
    left:8.5%;
    top:18%;
    width:min(620px, 42vw);
    color:#fff;
    pointer-events:none;
    text-align:left;
    text-shadow:0 2px 16px rgba(0,0,0,.34);
  }

  .banner-copy77 h1{
    margin:0 0 15px 0;
    font-size:clamp(31px, 2.65vw, 51px);
    line-height:1.15;
    font-weight:700;
    letter-spacing:-0.035em;
    color:rgba(255,255,255,.96);
  }

  .banner-copy77 p{
    margin:0;
    max-width:610px;
    font-size:clamp(15px, 1.12vw, 20px);
    line-height:1.78;
    font-weight:400;
    letter-spacing:-0.015em;
    color: #7FAF9A;
    word-break:keep-all;
  }
}

@media (max-width:680px){
  .banner-copy77{
    display:none;
  }
}


/* 2026-09-08 메인 배너 78단계 — 배너 문구 가독성 미세조정
   보호영역: 러너, 러너 동행 운무, 기본운무, 일출효과 수정 금지. */
@media (min-width:681px){
  .banner-copy77{
    left:7.6% !important;
    top:31% !important;
    width:min(760px, 46vw) !important;
  }
  .banner-copy77 h1{
    margin-bottom:20px !important;
  }
  .banner-copy77 p{
    max-width:760px !important;
    font-size:clamp(14px, 1.02vw, 18px) !important;
    line-height:1.82 !important;
    letter-spacing:-0.012em !important;
  }
}





/* 2026-09-08 메인 배너 83단계 — 모바일 전수조사 후 전용 완성
   원인: 기존 모바일 원천에서 .main-banner-stage{display:none;} 처리되어
   데스크톱에서 완성한 배너가 모바일에서는 전부 사라지는 구조였다.
   원칙: 데스크톱 보호영역은 수정하지 않고, 680px 이하 모바일 전용 범위만 재설계. */

@media (max-width:680px){

  /* 1) 기존 모바일 원천의 display:none 해제 — 모바일 배너 활성화 */
  .main-banner-stage{
    display:block !important;
    position:relative !important;
    min-height:430px !important;
    height:430px !important;
    overflow:hidden !important;
    isolation:isolate !important;
    background:
      linear-gradient(145deg,
        rgba(18,58,128,1) 0%,
        rgba(13,46,106,1) 24%,
        rgba(10,37,88,1) 46%,
        rgba(8,30,72,1) 66%,
        rgba(7,24,59,1) 82%,
        rgba(7,21,52,1) 100%) !important;
  }

  /* 2) 모바일 문구 — 데스크톱 문구 내용은 그대로 유지 */
  .banner-copy77{
    display:block !important;
    position:absolute !important;
    z-index:8 !important;
    left:22px !important;
    right:22px !important;
    top:36px !important;
    width:auto !important;
    color:#fff !important;
    text-align:left !important;
    pointer-events:none !important;
    text-shadow:0 2px 14px rgba(0,0,0,.24) !important;
  }

  .banner-copy77 h1{
    margin:0 0 18px 0 !important;
    max-width:340px !important;
    font-size:34px !important;
    line-height:1.17 !important;
    font-weight:800 !important;
    letter-spacing:-0.045em !important;
    color:rgba(255,255,255,.98) !important;
    word-break:keep-all !important;
  }

  .banner-copy77 p{
    margin:0 !important;
    max-width:390px !important;
    font-size:13px !important;
    line-height:1.72 !important;
    font-weight:500 !important;
    letter-spacing:-0.015em !important;
    color:#91C0AB !important;
    word-break:keep-all !important;
  }

  /* 3) 모바일 기본운무 — 데스크톱과 같은 3층 개념, 모바일 폭에 맞게 재배치 */
  .banner-base-fog{
    display:block !important;
    position:absolute !important;
    z-index:2 !important;
    pointer-events:none !important;
    mix-blend-mode:screen !important;
    transform-origin:50% 70% !important;
    will-change:transform,opacity,filter !important;
  }

  .banner-base-fog.fog-1{
    left:-28% !important;
    bottom:2px !important;
    width:180% !important;
    height:96px !important;
    opacity:.58 !important;
    filter:blur(24px) !important;
    background:
      radial-gradient(ellipse 36% 38% at 12% 70%, rgba(230,238,248,.12) 0%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 46% 52% at 36% 60%, rgba(246,249,252,.22) 0%, rgba(210,221,238,.09) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 34% 34% at 58% 72%, rgba(232,240,248,.13) 0%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 48% 50% at 82% 58%, rgba(244,248,251,.22) 0%, rgba(205,217,235,.08) 44%, rgba(255,255,255,0) 82%) !important;
    animation:studyhopeMobileFog83A 52s ease-in-out infinite alternate !important;
  }

  .banner-base-fog.fog-2{
    left:-22% !important;
    bottom:22px !important;
    width:164% !important;
    height:72px !important;
    opacity:.62 !important;
    filter:blur(19px) !important;
    background:
      radial-gradient(ellipse 34% 42% at 18% 66%, rgba(234,241,249,.10) 0%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 42% 48% at 46% 54%, rgba(245,248,251,.18) 0%, rgba(208,220,237,.07) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 34% 36% at 78% 68%, rgba(234,241,249,.11) 0%, rgba(255,255,255,0) 80%) !important;
    animation:studyhopeMobileFog83B 46s ease-in-out infinite alternate-reverse !important;
  }

  .banner-base-fog.fog-3{
    left:-30% !important;
    bottom:-4px !important;
    width:188% !important;
    height:56px !important;
    opacity:.50 !important;
    filter:blur(14px) !important;
    background:
      radial-gradient(ellipse 40% 38% at 18% 62%, rgba(238,244,250,.09) 0%, rgba(255,255,255,0) 80%),
      radial-gradient(ellipse 46% 42% at 52% 57%, rgba(246,249,252,.13) 0%, rgba(205,218,236,.05) 44%, rgba(255,255,255,0) 82%),
      radial-gradient(ellipse 38% 34% at 86% 64%, rgba(232,240,248,.09) 0%, rgba(255,255,255,0) 80%) !important;
    animation:studyhopeMobileFog83C 60s ease-in-out infinite alternate !important;
  }

  /* 4) 모바일 일출 — 하단 우측에서 시작해 위쪽으로 매우 부드럽게 섞임 */
  .banner-sunrise-horizon75{
    display:block !important;
    position:absolute !important;
    z-index:1 !important;
    right:-22% !important;
    bottom:-6% !important;
    width:94% !important;
    height:44% !important;
    opacity:.12 !important;
    pointer-events:none !important;
    mix-blend-mode:screen !important;
    background:
      radial-gradient(ellipse 56% 34% at 92% 84%,
        rgba(255,232,174,.38) 0%,
        rgba(255,177,89,.28) 22%,
        rgba(255,117,56,.18) 44%,
        rgba(205,57,40,.09) 64%,
        rgba(0,0,0,0) 84%) !important;
    filter:blur(34px) !important;
    animation:studyhopeMobileSun83A 18s linear infinite !important;
  }

  .banner-sunrise-rise75{
    display:block !important;
    position:absolute !important;
    z-index:1 !important;
    right:-24% !important;
    bottom:8% !important;
    width:96% !important;
    height:68% !important;
    opacity:0 !important;
    pointer-events:none !important;
    mix-blend-mode:screen !important;
    background:
      radial-gradient(ellipse 62% 66% at 94% 92%,
        rgba(255,179,87,.16) 0%,
        rgba(250,113,53,.11) 30%,
        rgba(208,57,40,.065) 54%,
        rgba(0,0,0,0) 82%) !important;
    filter:blur(40px) !important;
    animation:studyhopeMobileSun83B 18s linear infinite !important;
  }

  /* 5) 모바일 러너 — 84단계 원천 단일화
     원인검증:
     - 기존 모바일 트랙 left:-96px + 내부 sprite left:92px 이중좌표
     - 트랙 opacity 0 시작 + 기존 공통규칙 중첩
     - 작은 sprite 크기로 실제 화면에서 식별성이 낮음
     수정원칙:
     - 모바일에서는 트랙의 좌표를 단일 기준(left:0)으로 사용
     - sprite는 트랙 안에서 고정된 한 좌표만 사용
     - 이동 중 opacity 1 유지, 끝에서만 소멸
     - 데스크톱 보호영역은 수정하지 않음 */
  .banner-runner-fade-track{
    display:block !important;
    position:absolute !important;
    z-index:5 !important;
    left:0 !important;
    right:auto !important;
    top:auto !important;
    bottom:8px !important;
    width:176px !important;
    height:86px !important;
    margin:0 !important;
    pointer-events:none !important;
    opacity:1 !important;
    visibility:visible !important;
    isolation:isolate !important;
    animation:studyhopeMobileRunner87 6.2s linear infinite !important;
    will-change:transform,opacity !important;
  }

  .banner-runner-fade-track::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:0 !important;
    left:-18px !important;
    bottom:0 !important;
    width:210px !important;
    height:52px !important;
    opacity:.88 !important;
    filter:blur(18px) !important;
    mix-blend-mode:screen !important;
    background:
      radial-gradient(ellipse 20% 42% at 16% 68%, rgba(238,243,249,.07) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 30% 62% at 40% 54%, rgba(247,249,252,.19) 0%, rgba(224,232,243,.07) 48%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 20% 44% at 64% 70%, rgba(239,245,250,.09) 0%, rgba(255,255,255,0) 79%),
      radial-gradient(ellipse 28% 58% at 86% 56%, rgba(237,243,249,.14) 0%, rgba(212,223,240,.05) 48%, rgba(255,255,255,0) 80%) !important;
  }

  .banner-runner-fade-track::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:1 !important;
    left:4px !important;
    bottom:12px !important;
    width:158px !important;
    height:36px !important;
    opacity:.48 !important;
    filter:blur(12px) !important;
    mix-blend-mode:screen !important;
    background:
      radial-gradient(ellipse 26% 54% at 22% 54%, rgba(246,249,252,.13) 0%, rgba(230,238,247,.05) 50%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 32% 58% at 55% 54%, rgba(248,250,252,.15) 0%, rgba(233,239,247,.06) 50%, rgba(255,255,255,0) 81%),
      radial-gradient(ellipse 24% 50% at 84% 58%, rgba(232,240,248,.10) 0%, rgba(255,255,255,0) 80%) !important;
  }

  .banner-runner-sprite{
    display:block !important;
    visibility:visible !important;
    position:absolute !important;
    z-index:3 !important;
    left:18px !important;
    right:auto !important;
    top:auto !important;
    bottom:0 !important;
    margin:0 !important;
    width:38px !important;
    height:44px !important;
    opacity:1 !important;
    background-image:url("assets/images/banner_runner_sprite_20260907.png") !important;
    background-repeat:no-repeat !important;
    background-size:800% 100% !important;
    background-position:0% 0;
    filter:brightness(.20) contrast(1.72) saturate(0) !important;
    animation:studyhopeMobileRunnerFrames87 .58s steps(7,end) infinite !important;
  }

  .banner-runner-trail{
    display:none !important;
  }
}

@keyframes studyhopeMobileFog83A{
  0%{transform:translate3d(-7%,1px,0) scaleX(.99);opacity:.52;}
  50%{transform:translate3d(2%,-2px,0) scaleX(1.03);opacity:.62;}
  100%{transform:translate3d(10%,1px,0) scaleX(1.02);opacity:.55;}
}
@keyframes studyhopeMobileFog83B{
  0%{transform:translate3d(8%,0,0) scaleX(1.01);opacity:.39;}
  50%{transform:translate3d(-1%,-1px,0) scaleX(1.03);opacity:.47;}
  100%{transform:translate3d(-9%,1px,0) scaleX(1.02);opacity:.42;}
}
@keyframes studyhopeMobileFog83C{
  0%{transform:translate3d(-6%,0,0) scaleX(.99);opacity:.29;}
  50%{transform:translate3d(3%,-1px,0) scaleX(1.03);opacity:.37;}
  100%{transform:translate3d(11%,0,0) scaleX(1.02);opacity:.32;}
}
@keyframes studyhopeMobileSun83A{
  0%{opacity:.08;filter:blur(36px);}
  12%{opacity:.20;filter:blur(34px);}
  30%{opacity:.34;filter:blur(32px);}
  52%{opacity:.48;filter:blur(30px);}
  74%{opacity:.60;filter:blur(28px);}
  94%{opacity:.70;filter:blur(26px);}
  99%{opacity:.70;filter:blur(26px);}
  100%{opacity:.08;filter:blur(36px);}
}
@keyframes studyhopeMobileSun83B{
  0%,18%{opacity:0;filter:blur(42px);}
  30%{opacity:.06;filter:blur(40px);}
  48%{opacity:.14;filter:blur(38px);}
  66%{opacity:.22;filter:blur(36px);}
  82%{opacity:.30;filter:blur(34px);}
  96%{opacity:.38;filter:blur(32px);}
  99%{opacity:.38;filter:blur(32px);}
  100%{opacity:0;filter:blur(42px);}
}
@keyframes studyhopeMobileRunner87{
  0%{
    transform:translate3d(6px,0,0);
    opacity:0;
  }
  4%{opacity:.65;}
  7%{opacity:1;}
  91%{opacity:1;}
  95%{opacity:.78;}
  98%{opacity:.30;}
  100%{
    transform:translate3d(calc(100vw - 58px),0,0);
    opacity:0;
  }
}
@keyframes studyhopeMobileRunnerFrames87{
  from{background-position:0% 0;}
  to{background-position:100% 0;}
}

  3%{opacity:.55;}
  6%{opacity:1;}
  92%{opacity:1;}
  96%{opacity:.72;}
  98%{opacity:.28;}
  100%{
    transform:translate3d(calc(100vw - 62px),0,0);
    opacity:0;
  }
}
@media (max-width:390px){
  .main-banner-stage{
    min-height:410px !important;
    height:410px !important;
  }
  .banner-copy77{
    left:18px !important;
    right:18px !important;
    top:42px !important;
  }
  .banner-copy77 h1{
    max-width:300px !important;
    font-size:30px !important;
  }
  .banner-copy77 p{
    max-width:340px !important;
    font-size:12.5px !important;
    line-height:1.68 !important;
  }
}


/* 2026-09-09 메인 배너 94단계 — 로고·문구·사진·메뉴 동일 정렬축 / 중앙밀집 2열 구조 */
@media (min-width:681px){
  /* 상단도 본문도 동일한 .container 폭을 사용한다.
     로고 왼쪽선 = 배너문구 왼쪽선 / 메뉴·버튼 오른쪽선 = 사진 오른쪽선 */
  .home-banner-nav-wrap{
    gap:24px;
  }
  .home-banner-logo{
    width:214px;
    max-height:52px;
  }
  .home-banner-nav{
    gap:24px;
    font-size:14px;
  }
  .home-banner-management{
    padding:12px 16px;
    font-size:12.5px;
  }

  .banner-content-grid{
    position:absolute;
    z-index:7;
    left:50%;
    top:154px;
    width:min(995px, calc(100% - 72px));
    transform:translateX(-50%);
    display:grid;
    grid-template-columns:560px 420px;
    gap:12px;
    align-items:center;
  }

  .banner-copy77{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    z-index:8 !important;
    align-self:center;
  }
  .banner-copy77 h1{
    margin:0 0 22px !important;
    font-size:clamp(42px, 3vw, 54px) !important;
    line-height:1.10 !important;
    white-space:nowrap;
  }
  .banner-copy77 p{
    margin:0 !important;
    max-width:560px !important;
    font-size:clamp(14px, .95vw, 16.5px) !important;
    line-height:1.88 !important;
    color:#91b99f !important;
  }

  .banner-photo-panel{
    position:relative;
    z-index:5;
    width:100%;
    height:392px;
    margin:0;
    overflow:hidden;
    border-radius:3px;
    border:1px solid rgba(255,255,255,.10);
    background:#0a1320;
    box-shadow:0 18px 38px rgba(0,0,0,.20);
  }
  .banner-photo-panel::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,.10) 100%);
    pointer-events:none;
  }
  .banner-photo-panel img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 61%;
    transform:scale(1.10);
    transform-origin:center 61%;
  }
}
@media (max-width:1180px) and (min-width:681px){
  .home-banner-logo{width:184px;max-height:44px;}
  .home-banner-nav{gap:16px;font-size:12.5px;}
  .home-banner-nav-wrap{gap:16px;}
  .home-banner-management{padding:11px 13px;font-size:11.5px;}
  .banner-content-grid{
    grid-template-columns:500px 375px;
    gap:10px;
  }
  .banner-copy77 h1{font-size:clamp(36px,3.4vw,46px) !important;}
  .banner-photo-panel{height:374px;}
}
@media (max-width:680px){
  .banner-content-grid{display:block;}
  .banner-photo-panel{display:none !important;}
}


/* 2026-09-09 메인 배너 97단계 — 가로폭 확장 / 직사각 사진 / 공통 정렬축 재정렬 */
@media (min-width:681px){
  .home-banner-nav-wrap{
    width:min(1180px, calc(100% - 72px));
    margin:0 auto;
    height:104px;
    display:flex;
    align-items:center;
    gap:20px;
  }

  .home-banner-brand{
    flex:0 0 auto;
    justify-self:auto;
  }

  .home-banner-nav{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:24px;
    font-size:14px;
  }

  .home-banner-management{
    flex:0 0 auto;
    margin-left:8px;
    padding:12px 16px;
    font-size:12.5px;
  }

  .banner-content-grid{
    position:absolute;
    z-index:7;
    left:50%;
    top:156px;
    width:min(995px, calc(100% - 72px));
    transform:translateX(-50%);
    display:grid;
    grid-template-columns:560px 420px;
    gap:12px;
    align-items:start;
  }

  .banner-copy77{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:560px !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    z-index:8 !important;
    align-self:start;
  }

  .banner-copy77 h1{
    margin:0 0 26px !important;
    font-size:clamp(42px, 3vw, 56px) !important;
    line-height:1.12 !important;
    font-weight:700 !important;
    white-space:nowrap;
    letter-spacing:-0.038em !important;
  }

  .banner-copy77 p,
  .banner-copy77 p.banner-copy-body{
    margin:0 0 14px 0 !important;
    max-width:540px !important;
    font-size:clamp(15px, .98vw, 16.8px) !important;
    line-height:1.9 !important;
    color:#9ab8a7 !important;
  }


  .banner-copy77 p.banner-copy-emphasis{
    margin:18px 0 0 0 !important;
    max-width:540px !important;
    font-size:clamp(16px, 1.02vw, 18px) !important;
    line-height:1.7 !important;
    font-weight:700 !important;
    color:#d8e7dc !important;
    letter-spacing:-0.01em !important;
  }

  .banner-copy77 p:last-child{margin-bottom:0 !important;}

  .banner-photo-panel{
    position:relative;
    z-index:5;
    width:560px;
    height:360px;
    margin:0;
    overflow:hidden;
    align-self:start;
    transform:translateY(-8px);
    border-radius:2px;
    border:1px solid rgba(255,255,255,.08);
    background:#0a1320;
    box-shadow:0 16px 34px rgba(0,0,0,.18);
  }

  .banner-photo-panel::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,0) 54%,rgba(0,0,0,.07) 100%);
    pointer-events:none;
  }

  .banner-photo-panel img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .banner-photo-slide{
    position:absolute;
    inset:0;
    opacity:0;
    will-change:auto;
  }
  .banner-photo-slide.slide-1{object-position:50% 44%;}
  .banner-photo-slide.slide-2{object-position:48% 48%;}
  .banner-photo-slide.slide-3{object-position:46% 49%;}
}

@media (prefers-reduced-motion:reduce){
  .banner-photo-slide{opacity:0;transition:none !important;}
  .banner-photo-slide.is-active,
  .banner-photo-slide.slide-1{opacity:1;}
}

@media (max-width:1180px) and (min-width:681px){
  .home-banner-nav-wrap{
    width:min(1040px, calc(100% - 48px));
    gap:14px;
  }
  .home-banner-logo{width:184px;max-height:44px;}
  .home-banner-nav{gap:16px;font-size:12.5px;}
  .home-banner-management{padding:11px 12px;font-size:11.5px;margin-left:4px;}

  .banner-content-grid{
    width:min(889px, calc(100% - 48px));
    grid-template-columns:500px 375px;
    gap:10px;
  }
  .banner-copy77{width:500px !important;}
  .banner-copy77 h1{font-size:clamp(35px, 3.1vw, 46px) !important; white-space:normal;}
  .banner-copy77 p, .banner-copy77 p.banner-copy-body{max-width:490px !important; font-size:14px !important; line-height:1.8 !important;}
  .banner-copy77 p.banner-copy-emphasis{max-width:490px !important; font-size:15px !important; line-height:1.65 !important; margin-top:16px !important;}
  .banner-photo-panel{width:500px; height:330px;}
}

@media (max-width:680px){
  .banner-content-grid{display:block;}
  .banner-photo-panel{display:none !important;}
}