/* =========================
   ±âº» ÃʱâÈ­
========================= */

html, body {
  height:100%;
  overflow:hidden;   /* ?? ¹Ù±ùÀº ¸·¾Æ¾ß iframe¸¸ ½ºÅ©·ÑµÊ */
}


* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

html, body {
  height:100%;
  margin:0;
}

/* ¸µÅ© */
a {
  text-decoration:none;
}

/* =========================
   Çì´õ (°íÁ¤)
========================= */
header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:80px;
  background:rgba(0,0,0,0.2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  z-index:1000;
}

.logo img { height:50px; }

.navigation a,
.navigation span,
.navigation button {
  margin-left:20px;
  color:#fff;
  font-weight:500;
}

.navigation button { cursor:pointer; }

/* =========================
   Àüü ·¹À̾ƿô (ÇÙ½É)
========================= */
#container {
  position:absolute;   /* ?? absolute ¸»°í fixed */
  top:80px;
  left:0;
  right:0;
  bottom:0;
  display:flex;
}

/* =========================
   ÁÂÃø ¸Þ´º
========================= */
#leftMenu {
  width:250px;
  min-width:200px;
  background:#FFF0F5;
  border-right:1px solid #ccc;
  overflow-y:auto;
  flex-shrink:0;
}

#leftMenu ul { list-style:none; }

#leftMenu li { border-bottom:1px solid #ddd; }

#leftMenu li a {
  display:block;
  padding:12px 20px;
  color:#333;
  cursor:pointer;
}

#leftMenu li a:hover {
  background:#A0A0FF;
}

.submenu {
  max-height:0;
  overflow:hidden;
  background:#f0f0f0;
  transition:max-height 0.3s ease;
}

.submenu a { padding-left:40px; }

/* =========================
   ¿ìÃø ÄÜÅÙÃ÷
========================= */
#rightContent {
  flex:1;
  min-width:0;
  min-height:0;
  
  background:#fff;
   display:flex;          /* ?? Ãß°¡ */
}

/* iframe */
#contentFrame {
  width:100%;
  height:100%;   /* ?? ´Ù½Ã 100% À¯Áö */
  border:none;
  display:block;
   overflow:auto;       /* ?? ÇÙ½É */
}

/* =========================
   ¹ÝÀÀÇü
========================= */
@media (max-width:1250px) {

  #container {
    flex-direction:column;
  }

  #leftMenu {
    width:100%;
    height:200px;
  }

  #rightContent {
    flex:1;
  }
}

@media (max-width:768px) {

  header {
    flex-direction:column;
    height:80px;
    padding:10px 20px;
  }

  .navigation {
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
  }

  .navigation a,
  .navigation span,
  .navigation button {
    margin:5px 10px 0 0;
  }

  #leftMenu {
    height:180px;
  }

  #rightContent {
    flex:1;
  }
}

header {
  backdrop-filter:blur(10px);
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}

#leftMenu li a {
  transition:all .2s ease;
}

#leftMenu li a:hover {
  background:#FFDDEE;
  color:#C2185B;
}

#leftMenu li a.active {
  background:#FFC1D9;
  color:#AD1457;
  font-weight:700;
  border-left:5px solid #E91E63;
}

#rightContent {
  background:#FAFAFA;
  box-shadow:inset 0 0 8px rgba(0,0,0,.03);
}