:root{
    --container: 1160px;
    --muted:#6b7280;
    --black:#111827;
    --purple:#3b2460;
    --card:#ffffff;
    --chip:#f3f4f6;
    --shadow:0 8px 24px rgba(0,0,0,.08);
    --radius:16px;
  }

  /* 헤더 */
  .site-top{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;position: relative;}
  .site-top .brand{font-weight:700;letter-spacing:.2em}
  .site-top .nav a{font-size:14px;color:#666;margin-left:16px}
#kakaoQuickTab{
  width: 100vw;
  display: flex;
  justify-content: center;
  background: #2b0e3a;
  color: #fff;
}
body{
  padding-top: 40px;
}
  .brand img{
    width: 115px;
    height: 30px;
    object-fit: cover;
  }
.menu{position: absolute;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;}
.menu a{
  border-radius: 5px;
  color: #252525;
}
.menu a.active{
  color:#2D063D;
  font-weight:800;
}
/* hamburger button (hidden by default; shown under 1000px) */
.hamburger{display:none;position: fixed;right: 16px;top: 60px;width:36px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;z-index: 1001;}
.hamburger span{position:absolute;left:6px;right:6px;height:2px;background:#111827;border-radius:1px;transition:transform .25s ease,opacity .2s ease;}
.hamburger span:nth-child(1){top:7px}
.hamburger span:nth-child(2){top:13px}
  .hamburger span:nth-child(3){top:19px}
  .mo_login{
    display: none;
  }
  .kakao-quick-tab{
    position:fixed;
    top: 0;
    left: 0;
    z-index:1200;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    background:linear-gradient(135deg,#ffe98a 0%,#f9d84a 100%);
    color:#3a2a00;
    font-weight:800;
    font-size:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    cursor:pointer;
    transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
  }
  .kq-ico{ font-size:16px; line-height:1; }
  .kq-text{ letter-spacing:-0.01em; }
  .kakao-quick-tab:focus{ outline:2px solid #111827; outline-offset:2px; }
  @media screen and (max-width:700px){
    .kakao-quick-tab{
    }
  }
  .mo_bg{
    position: fixed;
    top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
  transition: 0.3s;
  backdrop-filter: blur(3px);
  display: none;
}
#site-menu li{
  display: flex;
  gap: 30px;
}
.mo_logout{
  display: none;
}
#site-menu .up_bg{
  display: none;
}
@media screen and (max-width:700px) {
  body{
    overflow-x: hidden;
  }
  .menu{
    top: 65px;
    left: 16px;
}
.menu a{
  font-size: 14px;
}
.site-top{
  padding: 18px 20px 50px;
}
}

/* off-canvas menu and toggle for <=1000px */
@media screen and (max-width:1000px){
  body{
    padding-top: 110px;
  }
  .site-top{position: fixed;top: 36px;left: 0;width: 100vw;height: 70px;display: flex;align-items: center;justify-content: space-between;z-index: 100;background: #fff;padding: 0 20px;}
  .nav{display: none;}
  .hamburger{
    display: flex;
}

  /* off-canvas panel using existing .menu */
  .menu{
    position:fixed;
    top: 37px;
    right:0;
    bottom:0;
    width: 250px;
    max-width:85vw;
    display:block;
    gap:0;
    left:auto; /* override absolute left on desktop */
    padding: 100px 20px 24px;
    background:#fff;
    box-shadow:var(--shadow);
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:1000;
  }
  .menu li{list-style:none;flex-direction: column;}
  .menu a{display:block;margin: 0;font-weight: 700;font-size: 16px;padding: 10px 0 10px 20px;}
  .menu a.active{color:#2D063D}

  body.menu-open .menu{transform:translateX(0)}
  body.menu-open{overflow:hidden}

  /* hamburger -> X animation when open */
  body.menu-open .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu-open .hamburger span:nth-child(2){opacity:0}
  body.menu-open .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mo_login{
    position: absolute;
    left: 20px;
    top: 25px;
    font-size: 14px !important;
    background: none;
    color: #848484 !important;
    padding: 0 !important;
  }
  .mo_login{
    
  }
  .mo_login::before{

  }
  .mo_logout{
    display: block;
  }
  .mo_bg.on{
    display: block;
    right: 0;
  }
  #site-menu .mo_logout{
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 14px;
    color: #ddd;
    margin-bottom: 0;
  }
  #site-menu .up_bg{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #2D063D;
  }
  .hamburger.on span{
    background: #fff;
  }
}