iframe {
  border: 0;
}
/* ===== Vars & Base ===== */
:root{
  --m-h: 56px;
  --bg: #fff;
  --ink: #222;
  --muted: #7a7a7a;
  --brand: #2C7BE5;       /* 포인트 컬러 */
  --dim: rgba(0,0,0,.45);
  --shadow: 0 10px 30px rgba(17,24,39,.12);
  --radius: 18px 0 0 18px;
}

@media (min-width: 1024px){
  .m-header { display:none; } /* 모바일 전용 */
}
.m_logos img{
    width: 140px;
}
.m-header{
  position: relative;
  z-index: 1000;
  font-family: system-ui, -apple-system, "Pretendard", "SUIT", sans-serif;
  color: var(--ink);
}

/* Top bar */
.m-header__bar{
  position: sticky; top: 0;
  height: var(--m-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 14px;
  background: var(--bg);
  backdrop-filter: saturate(1.2) blur(4px);
}

.m-header__logo img{ height: 28px; display:block; }

/* Hamburger */
.m-nav-toggle{
  width: 44px; height: 44px;
  display:grid; place-content:center;
  border:0; background:transparent; cursor:pointer;
  border-radius:12px;
  display:none;
}
.m-nav-toggle__bar{
  width: 22px; height: 2px; margin: 3px 0;
  background: var(--ink);
  display:block; transition: transform .25s ease, opacity .2s ease;
}
.is-menu-open .m-nav-toggle__bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.is-menu-open .m-nav-toggle__bar:nth-child(2){ opacity:0; }
.is-menu-open .m-nav-toggle__bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* Dim */
.m-nav-dim{
  position: fixed; inset: 0;
  background: var(--dim);
  opacity: 0; transition: opacity .25s ease;
}
.is-menu-open .m-nav-dim{ opacity: 1; }
body.is-menu-open{ overflow:hidden; }

/* Drawer */
.m-gnb{
  position: fixed; inset: 0 0 0 auto;
  width: min(86vw, 360px);
  background: #fdfdfd;
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  border-radius: var(--radius);
  display:flex; flex-direction:column;
}
.is-menu-open .m-gnb{ transform: translateX(0); }

.m-gnb__head{
  height: var(--m-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 30px;
  background: linear-gradient(180deg, #fff, #fafafa);
  border-bottom: 1px solid #eee;
  border-top-left-radius: var(--radius);
}
.m-gnb__close{
  border:0; background:transparent;
   /* width:34px; height:34px; */
    border-radius:10px; cursor:pointer;
}

/* List */
.gnb-1depth, .gnb-2depth, .gnb-3depth{ list-style:none; margin:0; padding:0; }
.gnb-1depth{ padding: 8px 10px 24px; overflow:auto; -webkit-overflow-scrolling:touch; }

.gnb-1depth > li > a{
  position: relative;
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  padding: 14px 12px 14px 14px;
  margin: 6px 0;
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  box-shadow: 0 2px 10px rgba(20,20,40,.04);
  text-decoration:none; color:var(--ink); font-weight:600; font-family: "Hakgyoansim Allimjang";
}
.gnb-1depth > li.open > a{ border-color: #e3edff; box-shadow: 0 6px 16px rgba(44,123,229,.08); 
   font-family: "Hakgyoansim Allimjang";
}

.gnb-2depth{
  display:none;
  margin: 6px 0 4px 0;
  padding-left: 6px;
  border-left: 2px solid #eef3ff;
}
.gnb-2depth > li > a{
  display:flex; justify-content:space-between; align-items:center;
 padding: 11px 10px 11px 30px;
  margin: 6px 0;
  background:#fff;
  border:1px dashed #eaeaea;
  border-radius:12px;
  text-decoration:none; color:#323232; font-weight:500;
 font-family: 'Pretendard';
}
.gnb-3depth{ display:none; margin: 4px 0 10px 12px; }
.gnb-3depth > li > a{
  display:block; padding:10px 12px; margin: 4px 0; color:#4b5563; background:#fcfcfc; border-radius:10px; text-decoration:none;
}

/* Active & hover */
.gnb-1depth a:hover, .gnb-2depth a:hover, .gnb-3depth a:hover{ background:#f7fbff; }
.gnb-1depth a.active{ color: var(--brand); border-color: #d9e8ff; }

/* + → – 아이콘 */
.plus-btn{
  flex: 0 0 22px; height:22px; width:22px; position:relative;
}
.plus-btn::before, .plus-btn::after{
  content:""; position:absolute; left:50%; top:50%;
  width: 14px; height:2px; background:#111;
  transform-origin:center; transition: transform .2s ease, opacity .2s ease;
}
.plus-btn::before{ transform: translate(-50%,-50%) scaleX(1); }              /* — */
.plus-btn::after{ transform: translate(-50%,-50%) rotate(90deg) scaleX(1); }  /* | */
.open > a > .plus-btn::after{ opacity:0; transform: translate(-50%,-50%) rotate(90deg) scaleX(0); }
.gnb-2depth .has-child > a > .plus-btn::after{ opacity:1; } /* 2뎁스도 동일 동작 */
.gnb-2depth .has-child.open > a > .plus-btn::after{ opacity:0; transform: translate(-50%,-50%) rotate(90deg) scaleX(0); }

@media (max-width: 1024px){
  .m-nav-toggle { display:grid; } 
}