/* MYEONGRIGYEOL_NAV_V8 */


/* ==========================================================
   V7 QUICK NAV 완전 제거
========================================================== */

.mg-v7-quicknav,
.mg-v7-quick-panel,
.mg-v7-quick-button{
  display:none
    !important;
}


/* ==========================================================
   COMMON
========================================================== */

.mg-v8-redundant-home{
  display:none
    !important;
}


.mg-v8-logo{
  cursor:pointer;
}


.mg-v8-logo:focus-visible{
  outline:
    2px solid
    rgba(
      188,
      145,
      78,
      .68
    );

  outline-offset:
    7px;

  border-radius:
    10px;
}


/* ==========================================================
   HEADER
   1행 = 로고 / 계정
   2행 = 서비스 탭
========================================================== */

.top.mg-v6-header-ready{
  width:100%;

  display:grid
    !important;

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

  grid-template-areas:
    "logo account"
    "nav nav"
    !important;

  align-items:center;

  column-gap:
    20px;

  row-gap:
    24px;

  padding:
    22px
    0
    0
    !important;

  margin-bottom:
    clamp(
      44px,
      5vw,
      68px
    )
    !important;

  position:relative
    !important;

  inset:auto
    !important;

  transform:none
    !important;

  z-index:30;
}


.top
.logo{
  grid-area:logo;

  justify-self:start;

  min-width:0;

  margin:0
    !important;

  position:static
    !important;

  inset:auto
    !important;

  transform:none
    !important;
}


.mg-v6-account-tools{
  grid-area:account;

  justify-self:end;

  min-width:0;

  margin:0;
}


/* ==========================================================
   SERVICE TABS
========================================================== */

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

  width:
    min(
      590px,
      100%
    )
    !important;

  max-width:100%;

  justify-self:center;

  position:static
    !important;

  inset:auto
    !important;

  transform:none
    !important;

  margin:
    0
    auto
    !important;

  padding:
    6px
    !important;

  display:grid
    !important;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    )
    !important;

  gap:
    5px
    !important;

  border:
    1px solid
    rgba(
      151,
      118,
      70,
      .18
    )
    !important;

  border-radius:
    17px
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(
        12,
        22,
        25,
        .96
      ),
      rgba(
        8,
        16,
        19,
        .98
      )
    )
    !important;

  box-shadow:
    0
    14px
    38px
    rgba(
      0,
      0,
      0,
      .14
    );

  backdrop-filter:
    blur(
      16px
    );
}


.mg-site-nav
a{
  width:100%;

  min-width:0;

  min-height:
    48px
    !important;

  display:flex
    !important;

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

  padding:
    0
    15px
    !important;

  border:
    1px solid
    transparent
    !important;

  border-radius:
    12px
    !important;

  background:
    transparent
    !important;

  color:
    #7f8d91
    !important;

  text-decoration:none
    !important;

  font-size:
    13px
    !important;

  font-weight:
    720
    !important;

  letter-spacing:
    -.15px;

  white-space:
    nowrap;

  opacity:1
    !important;

  filter:none
    !important;

  transition:
    background
    .18s ease,
    color
    .18s ease,
    border-color
    .18s ease,
    box-shadow
    .18s ease,
    transform
    .18s ease;
}


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

  background:
    rgba(
      169,
      123,
      57,
      .055
    )
    !important;
}


/* 선택된 메뉴 */

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

  border-color:
    rgba(
      190,
      147,
      78,
      .32
    )
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(
        179,
        133,
        68,
        .18
      ),
      rgba(
        125,
        88,
        39,
        .095
      )
    )
    !important;

  box-shadow:
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .035
    ),
    0
    7px
    18px
    rgba(
      0,
      0,
      0,
      .12
    )
    !important;

  font-weight:
    850
    !important;
}


/*
 * 활성 메뉴 아래에 매우 얇은 골드 포인트.
 * 밝은 금색 버튼처럼 보이지 않도록 절제.
 */

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

  position:absolute;

  left:50%;

  bottom:
    5px;

  width:
    20px;

  height:
    1px;

  transform:
    translateX(
      -50%
    );

  border-radius:
    10px;

  background:
    #b88b4d;

  opacity:.72;
}


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


/* ==========================================================
   CONTENT START
   헤더 바로 아래 콘텐츠가 붙지 않도록 통일
========================================================== */

body.mg-view-home
.hero{
  margin-top:
    0
    !important;
}


body.mg-view-report
.mg-report-page-intro{
  margin-top:
    0
    !important;
}


body.mg-view-lifebook
#lifeBookPreview{
  margin-top:
    0
    !important;
}


/*
 * 인생서 상단의 PERSONAL LIFE BOOK이
 * 서비스 탭과 붙지 않도록 추가 여백.
 */

body.mg-view-lifebook
.mg-page-subnav{
  margin-top:
    4px
    !important;

  margin-bottom:
    28px
    !important;
}


/* ==========================================================
   PC LARGE
========================================================== */

@media
(
  min-width:1181px
){

  .top.mg-v6-header-ready{
    row-gap:
      23px;
  }


  .top
  .mg-site-nav{
    width:
      600px
      !important;
  }


  .mg-site-nav
  a{
    min-height:
      50px
      !important;

    font-size:
      13.5px
      !important;
  }

}


/* ==========================================================
   MOBILE / TABLET SMALL
========================================================== */

@media
(
  max-width:760px
){

  .top.mg-v6-header-ready{
    width:100%;

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

    grid-template-areas:
      "logo hamburger"
      "nav nav"
      !important;

    column-gap:
      10px;

    row-gap:
      20px;

    padding:
      16px
      0
      0
      !important;

    margin-bottom:
      40px
      !important;
  }


  /*
   * 실제 계정 버튼은 V6처럼 감추고
   * 우측 햄버거에서 사용.
   */

  .mg-v6-account-tools{
    display:none
      !important;
  }


  .mg-v6-menu-button{
    grid-area:
      hamburger;

    display:flex
      !important;
  }


  .top
  .mg-site-nav{
    width:100%
      !important;

    max-width:100%
      !important;

    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      )
      !important;

    margin:
      0
      !important;

    padding:
      5px
      !important;

    gap:
      3px
      !important;

    border-radius:
      15px
      !important;
  }


  .mg-site-nav
  a{
    min-height:
      48px
      !important;

    padding:
      0
      4px
      !important;

    font-size:
      12.5px
      !important;

    letter-spacing:
      -.35px;
  }


  .mg-site-nav
  a.is-active::after{
    bottom:
      4px;

    width:
      17px;
  }


  /* 페이지 내용은 메뉴 아래 충분히 떨어짐 */

  body.mg-view-home
  .hero{
    margin-top:
      0
      !important;
  }


  body.mg-view-report
  .mg-report-page-intro{
    margin-top:
      0
      !important;
  }


  body.mg-view-lifebook
  #lifeBookPreview{
    margin-top:
      0
      !important;
  }


  body.mg-view-lifebook
  .mg-page-subnav{
    margin-bottom:
      24px
      !important;
  }

}


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

@media
(
  max-width:390px
){

  .top.mg-v6-header-ready{
    row-gap:
      17px;

    margin-bottom:
      34px
      !important;
  }


  .mg-site-nav
  a{
    min-height:
      46px
      !important;

    font-size:
      11.5px
      !important;

    padding:
      0
      2px
      !important;
  }

}