/* MYEONGRIGYEOL_LAYOUT_V6 */


/* ==========================================================
   GLOBAL
========================================================== */

html,
body{
  width:100%;
  max-width:100%;

  margin:0;

  overflow-x:hidden
    !important;
}


*,
*::before,
*::after{
  box-sizing:
    border-box;
}


img,
svg,
video,
canvas{
  max-width:100%;
}


.shell,
.top,
.hero,
.layout,
.mg-products,
.mg-product-grid,
.mg-commercial-intro,
.mg-life-book,
.mg-book-cover,
.mg-book-content,
.form-card,
.card{
  min-width:0
    !important;
}


.hero h1,
.mg-section-head h2,
.mg-commercial-intro h2,
.mg-book-content h2,
.mg-report-page-intro h1,
.mg-entry-section-head h3{
  max-width:100%;

  white-space:normal
    !important;

  overflow:visible
    !important;

  text-overflow:clip
    !important;

  word-break:keep-all;

  overflow-wrap:
    break-word;
}


/* ==========================================================
   SHELL
========================================================== */

.shell{
  width:100%
    !important;

  max-width:1280px
    !important;

  margin:
    0 auto
    !important;

  padding:
    0
    clamp(
      24px,
      4vw,
      52px
    )
    !important;
}


/* ==========================================================
   DESKTOP HEADER
========================================================== */

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

  display:grid
    !important;

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

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

  align-items:center;

  gap:
    18px
    30px;

  padding:
    22px
    0
    18px
    !important;

  position:relative
    !important;

  inset:auto
    !important;

  z-index:30;
}


.top
.logo{
  grid-area:logo;

  margin:0
    !important;

  min-width:0;
}


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


.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:5px
    !important;

  display:grid
    !important;

  grid-template-columns:
    repeat(
      3,
      max-content
    );

  gap:3px;

  border:
    1px solid
    rgba(
      159,
      122,
      68,
      .19
    )
    !important;

  border-radius:
    999px
    !important;

  background:
    rgba(
      11,
      20,
      23,
      .92
    )
    !important;

  box-shadow:
    0 12px 34px
    rgba(
      0,
      0,
      0,
      .15
    );

  backdrop-filter:
    blur(15px);
}


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

  display:flex
    !important;

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

  padding:
    0
    17px
    !important;

  border-radius:
    999px
    !important;

  color:
    #95a1a4
    !important;

  background:
    transparent
    !important;

  text-decoration:none
    !important;

  font-size:
    13px
    !important;

  font-weight:
    760
    !important;

  line-height:1;

  white-space:
    nowrap;
}


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

  background:
    linear-gradient(
      180deg,
      rgba(
        170,
        124,
        57,
        .16
      ),
      rgba(
        127,
        89,
        37,
        .07
      )
    )
    !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(
      184,
      138,
      70,
      .15
    );
}


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

  min-width:0;

  display:flex;

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

  gap:7px;

  flex-wrap:wrap;
}


/* desktop에서 햄버거 숨김 */

.mg-v6-menu-button,
.mg-v6-menu-backdrop,
.mg-v6-mobile-menu{
  display:none;
}


/* ==========================================================
   NO HEADER / CONTENT OVERLAP
========================================================== */

.hero{
  position:relative
    !important;

  inset:auto
    !important;

  transform:none
    !important;

  clear:both;

  z-index:1;

  overflow:visible
    !important;
}


body.mg-view-home
.hero{
  margin-top:
    clamp(
      64px,
      7vw,
      100px
    )
    !important;
}


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


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


/* ==========================================================
   ACTIVE CTA COLORS
========================================================== */

.mg-hero-primary,
.mg-hero-primary:visited{
  color:
    #f2eee7
    !important;

  background:
    linear-gradient(
      180deg,
      #15110c,
      #070605
    )
    !important;

  border:
    1px solid
    rgba(
      184,
      137,
      68,
      .56
    )
    !important;

  opacity:1
    !important;

  filter:none
    !important;
}


.mg-hero-secondary,
#mgReportProductBtn:not(:disabled),
.mg-home-book-button,
body.mg-view-report
#birthForm
button[type="submit"]:not(:disabled),
body.mg-view-lifebook
#birthForm
button[type="submit"]:not(:disabled){
  color:
    #171109
    !important;

  background:
    linear-gradient(
      135deg,
      #e0c18c
      0%,
      #bd9051
      53%,
      #996a31
      100%
    )
    !important;

  border:
    1px solid
    rgba(
      231,
      199,
      143,
      .72
    )
    !important;

  box-shadow:
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .28
    ),
    0
    13px
    32px
    rgba(
      126,
      84,
      29,
      .19
    )
    !important;

  opacity:1
    !important;

  filter:none
    !important;

  cursor:pointer
    !important;
}


button:disabled,
.paybtn:disabled,
.mg-product-button:disabled{
  opacity:.42
    !important;

  filter:
    saturate(.25)
    brightness(.72)
    !important;

  cursor:
    not-allowed
    !important;

  box-shadow:none
    !important;
}


/* ==========================================================
   LIFEBOOK DESKTOP
========================================================== */

body.mg-view-lifebook
#lifeBookPreview{
  width:
    calc(
      100% - 48px
    )
    !important;

  max-width:
    1160px
    !important;

  margin-left:auto
    !important;

  margin-right:auto
    !important;

  display:grid
    !important;

  grid-template-columns:
    minmax(
      280px,
      370px
    )
    minmax(
      0,
      1fr
    )
    !important;

  gap:
    clamp(
      42px,
      6vw,
      76px
    )
    !important;

  align-items:start;

  overflow:visible
    !important;
}


.mg-page-subnav{
  grid-column:
    1 / -1;

  width:100%;

  margin-bottom:
    16px
    !important;
}


.mg-book-cover{
  width:100%
    !important;

  max-width:
    370px
    !important;

  min-width:0;

  margin:
    0 auto
    !important;

  position:relative
    !important;

  inset:auto
    !important;

  transform:none
    !important;

  overflow:hidden
    !important;
}


.mg-book-content{
  width:100%;

  min-width:0;

  overflow:visible
    !important;
}


/* ==========================================================
   REPORT DESKTOP
========================================================== */

body.mg-view-report
.mg-report-page-intro{
  width:
    calc(
      100% - 48px
    );

  max-width:
    800px
    !important;

  margin-left:auto
    !important;

  margin-right:auto
    !important;
}


body.mg-view-report
.layout{
  width:
    calc(
      100% - 48px
    )
    !important;

  max-width:
    860px
    !important;

  margin-left:auto
    !important;

  margin-right:auto
    !important;

  grid-template-columns:
    1fr
    !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media
(
  min-width:761px
)
and
(
  max-width:1180px
){

  .top.mg-v6-header-ready{
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );

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

    row-gap:14px;
  }


  .mg-v6-account-tools{
    justify-self:end;
  }


  .top
  .mg-site-nav{
    width:
      min(
        620px,
        100%
      )
      !important;

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

    justify-self:center;
  }


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

    padding:
      0
      10px
      !important;
  }

}


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

@media
(
  max-width:760px
){

  .shell{
    width:100%
      !important;

    max-width:100%
      !important;

    padding:
      0
      17px
      !important;
  }


  /* HEADER */

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

    display:grid
      !important;

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

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

    align-items:center;

    column-gap:
      10px;

    row-gap:
      18px;

    padding:
      16px
      0
      4px
      !important;

    position:relative
      !important;

    z-index:30;
  }


  .top
  .logo{
    grid-area:logo;

    min-width:0;

    margin:0
      !important;
  }


  /*
   * 실제 계정 UI는 모바일에서 숨기고
   * 햄버거에서 프록시로 실행.
   */

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


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

    width:46px;

    height:46px;

    display:flex;

    flex-direction:column;

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

    gap:5px;

    padding:0;

    border:
      1px solid
      rgba(
        176,
        132,
        67,
        .34
      );

    border-radius:
      14px;

    background:
      rgba(
        9,
        18,
        21,
        .95
      );

    cursor:pointer;
  }


  .mg-v6-menu-button
  span{
    display:block;

    width:19px;

    height:1.5px;

    border-radius:
      4px;

    background:
      #d5bd96;
  }


  /* PRODUCT NAV = normal document flow */

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

    width:100%
      !important;

    max-width:100%
      !important;

    justify-self:stretch;

    position:static
      !important;

    inset:auto
      !important;

    transform:none
      !important;

    margin:
      0
      !important;

    padding:
      5px
      !important;

    display:grid
      !important;

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

    gap:2px;
  }


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

    min-width:0;

    min-height:
      47px
      !important;

    padding:
      0
      4px
      !important;

    font-size:
      13px
      !important;
  }


  /* 콘텐츠는 메뉴 아래 정상 배치 */

  body.mg-view-home
  .hero{
    margin:
      46px
      auto
      58px
      !important;
  }


  body.mg-view-report
  .mg-report-page-intro{
    width:100%;

    margin:
      34px
      auto
      30px
      !important;
  }


  body.mg-view-lifebook
  #lifeBookPreview{
    width:100%
      !important;

    max-width:100%
      !important;

    margin:
      34px
      auto
      70px
      !important;

    grid-template-columns:
      1fr
      !important;

    gap:
      34px
      !important;
  }


  .mg-page-subnav{
    grid-column:auto;

    margin-bottom:
      8px
      !important;
  }


  .mg-book-cover{
    width:
      min(
        86vw,
        330px
      )
      !important;

    max-width:
      100%
      !important;

    justify-self:center;

    margin:
      0
      auto
      !important;
  }


  .mg-book-content{
    width:100%;

    max-width:100%;

    min-width:0;

    padding:
      0
      2px;
  }


  .mg-book-content
  h2{
    width:100%;

    font-size:
      clamp(
        31px,
        8.5vw,
        42px
      )
      !important;

    line-height:
      1.42
      !important;
  }


  body.mg-view-report
  .layout{
    width:100%
      !important;

    max-width:100%
      !important;

    margin:
      0
      auto
      !important;
  }


  /* HERO CTA */

  .mg-hero-actions{
    width:100%
      !important;

    max-width:100%
      !important;

    grid-template-columns:
      1fr
      !important;

    gap:10px
      !important;
  }


  .mg-hero-primary,
  .mg-hero-secondary{
    width:100%
      !important;

    min-height:
      60px
      !important;
  }


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

  .mg-v6-menu-backdrop{
    display:block;

    position:fixed;

    inset:0;

    z-index:1998;

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

    backdrop-filter:
      blur(3px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
      .2s ease;
  }


  .mg-v6-mobile-menu{
    display:block;

    position:fixed;

    z-index:1999;

    top:
      max(
        16px,
        env(
          safe-area-inset-top
        )
      );

    right:14px;

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

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

    overflow-y:auto;

    padding:
      20px;

    border:
      1px solid
      rgba(
        181,
        137,
        70,
        .30
      );

    border-radius:
      22px;

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

    box-shadow:
      0
      30px
      100px
      rgba(
        0,
        0,
        0,
        .50
      );

    transform:
      translateX(
        calc(
          100% + 30px
        )
      );

    opacity:0;

    visibility:hidden;

    pointer-events:none;

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


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

    visibility:visible;

    pointer-events:auto;
  }


  body.mg-v6-menu-open
  .mg-v6-mobile-menu{
    transform:
      translateX(0);

    opacity:1;

    visibility:visible;

    pointer-events:auto;
  }


  body.mg-v6-menu-open{
    overflow:hidden
      !important;
  }


  .mg-v6-drawer-head{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:16px;

    padding-bottom:
      18px;

    border-bottom:
      1px solid
      rgba(
        144,
        165,
        170,
        .13
      );
  }


  .mg-v6-drawer-head
  small{
    display:block;

    margin-bottom:5px;

    color:#98713f;

    font-size:9px;

    font-weight:850;

    letter-spacing:
      1.7px;
  }


  .mg-v6-drawer-head
  strong{
    color:#f0ece5;

    font-size:22px;
  }


  .mg-v6-drawer-close{
    width:38px;

    height:38px;

    border:
      1px solid
      rgba(
        144,
        162,
        167,
        .18
      );

    border-radius:50%;

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

    color:#a8b3b6;

    font-size:23px;

    line-height:1;

    cursor:pointer;
  }


  .mg-v6-point-card{
    margin:
      18px
      0;

    padding:
      17px;

    border:
      1px solid
      rgba(
        178,
        133,
        66,
        .25
      );

    border-radius:
      16px;

    background:
      linear-gradient(
        135deg,
        rgba(
          163,
          117,
          51,
          .10
        ),
        rgba(
          255,
          255,
          255,
          .018
        )
      );
  }


  .mg-v6-point-card
  span{
    display:block;

    margin-bottom:5px;

    color:#85969b;

    font-size:11px;
  }


  .mg-v6-point-card
  strong{
    display:block;

    color:#dfbd89;

    font-size:23px;
  }


  .mg-v6-point-card
  small{
    display:block;

    margin-top:8px;

    color:#936f42;

    font-size:9px;

    letter-spacing:
      1px;
  }


  .mg-v6-drawer-actions{
    display:grid;

    grid-template-columns:
      1fr;

    gap:8px;
  }


  .mg-v6-drawer-actions
  button{
    width:100%;

    min-height:
      52px;

    display:flex;

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

    padding:
      0
      16px;

    border:
      1px solid
      rgba(
        132,
        153,
        158,
        .16
      );

    border-radius:
      13px;

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

    color:#d9deda;

    font-size:14px;

    font-weight:700;

    cursor:pointer;
  }


  .mg-v6-drawer-actions
  button:hover{
    border-color:
      rgba(
        179,
        135,
        69,
        .35
      );

    background:
      rgba(
        170,
        123,
        54,
        .07
      );
  }


  .mg-v6-drawer-actions
  button
  b{
    color:#9b7949;

    font-size:20px;

    font-weight:400;
  }


  .mg-v6-drawer-actions
  button.muted{
    margin-top:6px;

    color:#7e8c90;
  }

}


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

@media
(
  max-width:390px
){

  .shell{
    padding:
      0
      14px
      !important;
  }


  .mg-site-nav
  a{
    font-size:
      12px
      !important;
  }


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

}