:root{
    --ease: cubic-bezier(.22,.61,.36,1);
    --bg-dim: rgba(0,0,0,.35);
  
    /* 스태거 조절 */
    --col-base: .10s;
    --col-step: .08s;
    --link-base: .18s;
    --link-step: .05s;
  
    /* 패널 타이밍 */
    --open-t: .60s;
  }
  
  /* 닫혀 있을 땐 통째로 보이지 않게 */
  body:not(.sidemunu_active) .feature,
  body:not(.sidemunu_active) .mega-inner {
    visibility: hidden;
  }
  body.sidemunu_active .feature,
  body.sidemunu_active .mega-inner {
    visibility: visible;
  }
  
  /* 열렸을 때 스크롤락 */
  body.sidemunu_active{ overflow:hidden; }
  
  /* ===== 우상단 토글 버튼 ===== */
  .menu-toggle{
    position:fixed; top:24px; right:24px; z-index:3000;
    width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center;
    background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.18);
    cursor:pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .menu-toggle:active{ transform: scale(.96); }
  .menu-toggle:hover{ box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  .menu-ic .l{
    stroke:#fff; stroke-width:2.2; stroke-linecap:round;
    transform-origin: 12px 12px;
    transition: transform .45s var(--ease), opacity .25s var(--ease);
  }
  .menu-ic .l1{ transform: translateY(0px); }
  .menu-ic .l2{ opacity:1; }
  .menu-ic .l3{ transform: translateY(0px); }
  body.sidemunu_active .menu-ic .l1{ transform: translateY(5px) rotate(45deg); }
  body.sidemunu_active .menu-ic .l2{ opacity:0; transform: scaleX(0); }
  body.sidemunu_active .menu-ic .l3{ transform: translateY(-5px) rotate(-45deg); }
  
  /* ===== 왼쪽 히어로 패널 ===== */
  .feature {
    position: fixed; top:0; left:0; bottom:0;
    max-width: 704rem;
    width:100%;
    z-index:1800;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-14px) scale(0.992);
    filter: blur(6px);
    pointer-events: none;
    transition:
      transform var(--open-t) var(--ease),
      opacity  var(--open-t) var(--ease),
      filter   calc(var(--open-t)*.85) var(--ease);
    will-change: transform, opacity, filter;
  }
  
  body.sidemunu_active .feature{
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
  }
  
  .feature .img-wrap {
    position: absolute; inset: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1s var(--ease), transform 2s var(--ease);
  }
  .feature img{
    width:100%; height:100%; object-fit:cover;
    transform: scale(1.02); opacity:0;
    transition: transform 4s var(--ease), opacity .7s var(--ease);
  }
  .feature .img-wrap.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
  }
  .feature img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 8s ease; /* ★ 고급스러운 천천히 확대 */
  }
  .feature .img-wrap.active img {
    transform: scale(1.08);
  }
  body.sidemunu_active .feature img{ transform: scale(1.05); opacity:1; }
  
  /* 로고/카피 */
  .feature .copy{
    position:absolute; left:50%; top:30%;
    transform:translate(-50%,-50%);
    color:#111; text-align:center; padding:0 36px; width:100%;
  
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .logo1{ font-size:54px; font-weight:800; font-family: var(--font-family-montserrat);}
  .logo2{ font-size:54px; font-weight:500; margin:0 0 40px; font-family: var(--font-family-montserrat);}
  .sub1{ font-size:18px; margin:0 0 6px; color:#1d1d1d; }
  .sub2{ font-size:14px; margin:0; color:#1d1d1d; }
  
  .line{ opacity:0; transform: translateY(8px); filter: blur(2px); }
  @keyframes rise { to{ opacity:1; transform:translateY(0); filter:blur(0);} }
  
  /* 라이트 스캔 */
  .shine{ position:relative; display:inline-block; }
  .shine::after{
    content:""; position:absolute; inset:-6px -12px;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.65) 12%, transparent 24%);
    transform: translateX(-120%); mix-blend-mode: screen; opacity:0;
  }
  body.sidemunu_active .shine::after{ animation: sweep 1.1s .35s var(--ease) 1 forwards; }
  @keyframes sweep{ 0%{transform:translateX(-120%);opacity:0} 15%{opacity:1} 100%{transform:translateX(120%);opacity:0} }
  
  /* 가독성 오버레이 */
  .feature::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.86) 42%, rgba(255,255,255,.66) 75%, rgba(255,255,255,.28) 100%);
  }
  
  /* ===== 오버레이 & 오른쪽 패널 ===== */
  .overlay{
    position: fixed; inset:0; pointer-events:none;
    background: transparent; backdrop-filter: blur(0px);
    transition: background .4s var(--ease), backdrop-filter .4s var(--ease);
    z-index:1500;
  }
  body.sidemunu_active .overlay{ background: var(--bg-dim); backdrop-filter: blur(6px); pointer-events:auto; }
  
  .mega{
    position:fixed; top:0; right:0; bottom:0;
    width:calc(100% - 704rem);
    display:flex; justify-content:flex-end;
    z-index:2003; pointer-events:none;
  }
  .mega-inner{
    width:100%; height:100%; pointer-events:auto; 
    background: rgba(15,15,15,.86); color:#fff;
    isolation:isolate;
    clip-path: inset(0 0 0 100% round 0);
    transition: clip-path var(--open-t) var(--ease);
    display:grid; grid-template-rows:auto 1fr;
    padding-left: 100rem;
  }
  body.sidemunu_active .mega-inner{ clip-path: inset(0 0 0 0 round 0); }
  
  /* 상단 헤더(좌 로고 / 우 아이콘) */
  .mega-header{
    position:sticky; top:0; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    padding:100rem 50rem 100rem 40rem; 
    max-width:100%;
  }
  .mega-logo a{ max-width:150px;width:100%;display: inline-flex;; }
  .mega-logo a img {
    max-width:100%;
    width:auto;
    height:auto;
  }
  
  .mega-icons{ display:flex; gap:12px; align-items: center; }
  .icon-btn{
    width:36px; height:36px; border-radius:50%;
    display:grid; place-items:center;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
    color:#fff; text-decoration:none;
    transition: transform .2s var(--ease), background .2s var(--ease);
  }
  .icon-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12); }
  .icon-btn svg{ width:18px; height:18px; display:block; stroke:#fff; stroke-width:1.6; fill:none; }

  .sidemunu_active .user_li .nav_btn i {color:#fff; font-weight: 200;}
  
  /* 본문 그리드 */
  .mega-body{
    padding:16px 60px 60px;
    display:grid; grid-template-columns: repeat(auto-fill, minmax(370rem, 1fr));
    gap:40px 48px;
    overflow-y: auto;
  }
  .mega-body ul{ list-style:none; margin:0; padding:0; }
  .mega-body h3{ font-size:20px; margin:0 0 12px; opacity:0; transform:translateY(8px); filter:blur(2px); font-family: var(--font-family-cochin); }
  .mega-body a{
    display:inline-flex;width:auto; color:#a7a7a7; padding:6px 0;
    transform: translateY(8px); opacity:0; filter: blur(2px);
    line-height:1.6; letter-spacing:.01em; font-family: var(--font-family-montserrat);
    font-size:16px;
  }
  .mega-body a:hover{ color:#fff; }

  
  /* 스크롤바의 폭 너비 */
  .mega-body::-webkit-scrollbar {
      width: 5px;  
  }
  
  .mega-body::-webkit-scrollbar-thumb {
      background: rgb(102, 102, 102); /* 스크롤바 색상 */
      border-radius: 10px; /* 스크롤바 둥근 테두리 */
  }
  
  .mega-body::-webkit-scrollbar-track {
      background: rgba(189, 189, 189, 0.1);  /*스크롤바 뒷 배경 색상*/
  }
  @keyframes riseFast { to{ transform:translateY(0); opacity:1; filter:blur(0);} }
  
  /* ===== 반응형 ===== */
  @media (max-width:1500px){
    /* .feature{ width:520px; } .mega{ width:calc(100% - 520px); } */
  }
  @media (max-width:1200px){
    /* .feature{ width:420px; } .mega{ width:calc(100% - 420px); } */
    .mega-body{  padding:16px 40px 48px; }
  }
  @media (max-width:860px){
    .feature{ display: none; }
    body.sidemunu_active .feature{ display: none; }
  
    .feature .copy{ top:44%; padding:0 20px; }
    .logo1{ font-size:34px; } .logo2{ font-size:26px; }
    .sub1{ font-size:14px; } .sub2{ font-size:12px; }
  
    .overlay{ top:0; }
    .mega{ top:0; right:0; left:0; bottom:0; width:100%; }
    body.sidemunu_active .overlay{ top:0; }
    body.sidemunu_active .mega{ top:0; }
    .mega-body{ grid-template-columns: repeat(2, 1fr); gap:24px; padding:16px 16px 32px; }
  }
  @media (max-width:560px){
    .mega-body{ grid-template-columns:1fr; }
  }
  
  /* 접근성: 모션 축소 */
  @media (prefers-reduced-motion: reduce){
    .feature, .overlay, .mega-inner{ transition:none !important }
    .feature img{ transition:none !important; }
    .line, .mega-body a, .mega-body h3{ animation:none !important; opacity:1; transform:none; filter:none; }
    .shine::after{ animation:none !important; opacity:0 !important; }
  }

  @media screen and (max-width: 860px) {
    .mega-inner {
      padding-left: 20rem;
    }
    .mega-logo a {
      max-width: 100rem;
    }
    .mega-header {
      padding: 40px 50px 30px 40px;
      position: static;
    }
  }
  @media screen and (max-width:499px) {

    .mega-body h3 {font-size:16px;}
    .mega-body a {font-size:14px;}
    .mega-logo a {
      max-width:80rem;
      font-size: 14px;
    }
    .mega-body ul {margin-bottom:10px;}
    .mega-header {
      padding: 40px 50px 30px 0;
      position: static;
    }
  }