/* MYEONGRIGYEOL_HEADER_V10 */


/* =========================================================
   OLD ACCOUNT ELEMENTS
   기능은 살리고 화면에서만 감춘다.
========================================================= */

.top > *:not(.logo):not(.mg-site-nav):not(.mg-v10-my-button){
  display:none !important;
}


/* 겹치던 CORE READING 배지 제거 */

.mg-v10-hide-core-badge{
  display:none !important;
}


/* =========================================================
   STABLE HEADER
========================================================= */

.top{
  width:100% !important;

  min-height:82px;

  display:grid !important;

  grid-template-columns:
    auto
    minmax(420px,1fr)
    auto;

  grid-template-areas:
    "logo nav my";

  align-items:center;

  gap:
    clamp(24px,3.4vw,54px);

  padding:
    18px 0 !important;

  margin:
    0 0
    clamp(46px,5vw,70px)
    !important;

  position:relative !important;

  inset:auto !important;

  transform:none !important;

  z-index:100;
}


.top .logo{
  grid-area:logo;

  position:static !important;

  inset:auto !important;

  transform:none !important;

  margin:0 !important;

  justify-self:start;

  cursor:pointer;
}


/* =========================================================
   DESKTOP SERVICE NAV
========================================================= */

.top .mg-site-nav{
  grid-area:nav;

  position:static !important;

  inset:auto !important;

  transform:none !important;

  justify-self:center;

  width:auto !important;

  max-width:100%;

  margin:0 !important;

  padding:0 !important;

  display:flex !important;

  align-items:center;
  justify-content:center;

  gap:
    clamp(8px,1.2vw,22px);

  border:0 !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;

  backdrop-filter:none !important;
}


.mg-site-nav a{
  position:relative;

  min-height:44px !important;

  display:flex !important;

  align-items:center;
  justify-content:center;

  padding:
    0
    13px
    !important;

  border:0 !important;

  border-radius:8px !important;

  background:transparent !important;

  color:#778589 !important;

  text-decoration:none !important;

  font-size:13px !important;

  font-weight:720 !important;

  white-space:nowrap;

  opacity:1 !important;

  filter:none !important;

  transition:
    color .16s ease,
    background .16s ease;
}


.mg-site-nav a:hover{
  color:#b49c78 !important;

  background:
    rgba(173,128,61,.045)
    !important;
}


.mg-site-nav a.is-active{
  color:#ddbd8a !important;

  background:
    rgba(167,120,53,.065)
    !important;

  font-weight:850 !important;
}


.mg-site-nav a.is-active::after{
  content:"";

  position:absolute;

  left:16px;
  right:16px;
  bottom:2px;

  height:1px;

  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #b4874b,
      transparent
    );
}


/* =========================================================
   MY BUTTON
========================================================= */

.mg-v10-my-button{
  grid-area:my;

  justify-self:end;

  min-width:150px;

  height:48px;

  display:flex;

  align-items:center;

  gap:10px;

  padding:
    5px 12px 5px 6px;

  border:
    1px solid
    rgba(164,126,70,.22);

  border-radius:999px;

  background:
    rgba(10,19,22,.78);

  color:#d8d8d2;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.02);

  cursor:pointer;
}


.mg-v10-avatar{
  flex:0 0 36px;

  width:36px;
  height:36px;

  display:flex;

  align-items:center;
  justify-content:center;

  overflow:hidden;

  border:
    1px solid
    rgba(181,139,74,.35);

  border-radius:50%;

  background:#111a1c;

  color:#b8945e;

  font-size:9px;

  font-weight:850;
}


.mg-v10-avatar img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


.mg-v10-my-copy{
  min-width:0;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  line-height:1.05;
}


.mg-v10-my-copy small{
  margin-bottom:4px;

  color:#8f754f;

  font-size:7px;

  font-weight:850;

  letter-spacing:1.4px;
}


.mg-v10-my-copy strong{
  color:#d6d8d4;

  font-size:12px;

  font-weight:750;
}


.mg-v10-my-arrow{
  margin-left:auto;

  color:#79664b;

  font-size:10px;
}


.mg-v10-mobile-bars{
  display:none;
}


/* =========================================================
   MY PANEL
========================================================= */

.mg-v10-backdrop{
  position:fixed;

  inset:0;

  z-index:1998;

  background:
    rgba(0,0,0,.38);

  backdrop-filter:
    blur(2px);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .16s ease,
    visibility .16s ease;
}


.mg-v10-panel{
  position:fixed;

  z-index:1999;

  top:78px;
  right:
    max(
      20px,
      calc(
        (100vw - 1280px) / 2
      )
    );

  width:
    min(330px,calc(100vw - 30px));

  max-height:
    calc(100dvh - 100px);

  overflow-y:auto;

  padding:18px;

  border:
    1px solid
    rgba(174,134,72,.26);

  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      #0a1518,
      #071013
    );

  box-shadow:
    0 28px 90px
    rgba(0,0,0,.46);

  opacity:0;

  visibility:hidden;

  transform:
    translateY(-8px)
    scale(.985);

  transform-origin:
    top right;

  pointer-events:none;

  transition:
    opacity .17s ease,
    visibility .17s ease,
    transform .17s ease;
}


body.mg-v10-menu-open
.mg-v10-backdrop{
  opacity:1;

  visibility:visible;

  pointer-events:auto;
}


body.mg-v10-menu-open
.mg-v10-panel{
  opacity:1;

  visibility:visible;

  transform:
    translateY(0)
    scale(1);

  pointer-events:auto;
}


.mg-v10-panel-top{
  display:flex;

  align-items:center;
  justify-content:space-between;

  padding-bottom:13px;

  border-bottom:
    1px solid
    rgba(131,151,156,.12);
}


.mg-v10-panel-top > span{
  color:#876c48;

  font-size:8px;

  font-weight:850;

  letter-spacing:1.8px;
}


.mg-v10-close{
  width:32px;
  height:32px;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:0;

  border:
    1px solid
    rgba(137,155,160,.14);

  border-radius:50%;

  background:
    rgba(255,255,255,.02);

  color:#8d999c;

  font-size:19px;

  cursor:pointer;
}


/* PC에서는 서비스 메뉴가 이미 상단에 있으므로 숨김 */

.mg-v10-mobile-services{
  display:none;
}


.mg-v10-account-section{
  padding-top:16px;
}


.mg-v10-account-head{
  display:flex;

  align-items:center;

  gap:11px;

  margin-bottom:14px;
}


.mg-v10-account-head small{
  display:block;

  margin-bottom:4px;

  color:#896e49;

  font-size:8px;

  font-weight:850;

  letter-spacing:1.4px;
}


.mg-v10-account-head strong{
  display:block;

  color:#e0dfd9;

  font-size:16px;
}


.mg-v10-point{
  margin-bottom:13px;

  padding:
    14px 15px;

  border:
    1px solid
    rgba(177,134,68,.20);

  border-radius:13px;

  background:
    rgba(166,116,48,.055);
}


.mg-v10-point span{
  display:block;

  margin-bottom:5px;

  color:#77868a;

  font-size:10px;
}


.mg-v10-point strong{
  color:#d6b57f;

  font-size:20px;
}


.mg-v10-account-actions{
  display:grid;

  gap:6px;
}


.mg-v10-account-actions button{
  width:100%;

  min-height:48px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  padding:
    0 13px;

  border:
    1px solid
    rgba(136,153,158,.12);

  border-radius:11px;

  background:
    rgba(255,255,255,.02);

  color:#cbd2d1;

  font-family:inherit;

  font-size:12px;

  font-weight:700;

  cursor:pointer;
}


.mg-v10-account-actions button:hover{
  border-color:
    rgba(176,132,65,.26);

  background:
    rgba(165,117,50,.055);
}


.mg-v10-account-actions button b{
  color:#846b48;

  font-size:18px;

  font-weight:400;
}


.mg-v10-account-actions button.muted{
  margin-top:4px;

  color:#748286;
}


/* =========================================================
   CONTENT SPACING
========================================================= */

body.mg-view-home .hero,
body.mg-view-report .mg-report-page-intro,
body.mg-view-lifebook #lifeBookPreview{
  margin-top:0 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:760px){

  .top{
    min-height:68px;

    grid-template-columns:
      minmax(0,1fr)
      auto;

    grid-template-areas:
      "logo my";

    gap:10px;

    padding:
      14px 0
      !important;

    margin-bottom:
      30px !important;
  }


  /* 모바일에서는 상단 상품 메뉴 완전히 제거 */

  .top .mg-site-nav{
    display:none !important;
  }


  .mg-v10-my-button{
    min-width:74px;

    width:auto;

    height:46px;

    gap:8px;

    padding:
      4px 11px 4px 5px;
  }


  .mg-v10-avatar{
    flex-basis:36px;

    width:36px;
    height:36px;
  }


  .mg-v10-my-copy,
  .mg-v10-my-arrow{
    display:none;
  }


  .mg-v10-mobile-bars{
    width:17px;

    display:flex;

    flex-direction:column;

    gap:4px;
  }


  .mg-v10-mobile-bars i{
    display:block;

    width:17px;
    height:1px;

    border-radius:10px;

    background:#a4865c;
  }


  .mg-v10-panel{
    top:
      max(
        14px,
        env(safe-area-inset-top)
      );

    right:14px;

    width:
      min(
        350px,
        calc(100vw - 28px)
      );

    max-height:
      calc(
        100dvh
        - 28px
      );

    padding:18px;
  }


  /* 모바일 햄버거 안 서비스 */

  .mg-v10-mobile-services{
    display:block;

    padding:
      16px 0 18px;

    border-bottom:
      1px solid
      rgba(131,151,156,.12);
  }


  .mg-v10-menu-label{
    margin-bottom:9px;
  }


  .mg-v10-menu-label small{
    display:block;

    margin-bottom:3px;

    color:#8c7049;

    font-size:8px;

    font-weight:850;

    letter-spacing:1.5px;
  }


  .mg-v10-menu-label strong{
    color:#cbd2d0;

    font-size:12px;
  }


  .mg-v10-service-list{
    display:grid;

    gap:5px;
  }


  .mg-v10-service-list a{
    min-height:54px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:
      8px 12px;

    border:
      1px solid
      transparent;

    border-radius:11px;

    color:#cbd1d0;

    text-decoration:none;
  }


  .mg-v10-service-list a > span{
    display:flex;

    flex-direction:column;

    gap:2px;

    font-size:13px;

    font-weight:720;
  }


  .mg-v10-service-list a small{
    color:#907144;

    font-size:8px;
  }


  .mg-v10-service-list a b{
    color:#816d50;

    font-size:9px;

    font-weight:750;
  }


  .mg-v10-service-list a.is-active{
    border-color:
      rgba(181,137,70,.25);

    background:
      linear-gradient(
        90deg,
        rgba(166,118,50,.11),
        rgba(166,118,50,.02)
      );

    color:#dfc08d;
  }


  body.mg-view-lifebook
  .mg-page-subnav{
    margin-top:0 !important;
  }

}