/* MYEONGRIGYEOL_SITE_LAYOUT_V3 */


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

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

  margin:0;
  padding:0;
}

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

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

body{
  overflow-x:clip;
}


/* ==========================================================
   SITE CONTAINER
========================================================== */

.shell{
  width:100% !important;

  max-width:1280px !important;

  margin:
    0 auto !important;

  padding-left:
    clamp(20px,4vw,48px) !important;

  padding-right:
    clamp(20px,4vw,48px) !important;
}


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

.top{
  width:100%;

  display:flex;

  align-items:center;

  gap:14px;

  flex-wrap:wrap;

  padding-top:20px;
  padding-bottom:18px;
}

.logo{
  flex:0 0 auto;
}

.mg-site-nav{
  display:grid !important;

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

  align-items:center;

  gap:2px;

  margin-left:auto;
  margin-right:0;

  padding:5px;

  border:
    1px solid
    rgba(159,125,74,.16);

  border-radius:999px;

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

  backdrop-filter:
    blur(14px);
}

.mg-site-nav a{
  min-height:38px;

  display:flex;

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

  padding:
    0 16px;

  border-radius:999px;

  color:#b8b0a5;

  text-decoration:none;

  font-size:13px;
  font-weight:750;

  white-space:nowrap;

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

.mg-site-nav a:hover{
  color:#efe9df;

  background:
    rgba(185,143,74,.10);
}


/* ==========================================================
   HERO - DESKTOP
========================================================== */

.hero{
  width:100% !important;

  max-width:920px !important;

  margin:
    clamp(68px,8vw,110px)
    auto
    clamp(72px,8vw,105px)
    !important;

  padding:0 !important;

  text-align:center;
}

.hero-label{
  width:100%;

  overflow-wrap:anywhere;
}

.hero h1{
  max-width:100%;

  margin-left:auto !important;
  margin-right:auto !important;

  font-size:
    clamp(
      52px,
      5.3vw,
      78px
    ) !important;

  line-height:1.12 !important;

  letter-spacing:
    -.055em;
}

.hero p{
  max-width:720px !important;

  margin-left:auto !important;
  margin-right:auto !important;

  font-size:
    clamp(
      15px,
      1.25vw,
      18px
    ) !important;

  line-height:1.9 !important;
}

.trust{
  max-width:100%;

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:9px;
}

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

  max-width:610px;

  display:grid !important;

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

  gap:12px;

  margin:
    30px auto 0 !important;
}

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

  min-width:0;

  min-height:54px;

  display:flex;

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

  border-radius:14px;

  font-size:15px;
  font-weight:800;

  text-decoration:none;
}


/* ==========================================================
   PRODUCTS
========================================================== */

.mg-products{
  width:100% !important;

  max-width:1120px !important;

  margin:
    0 auto
    clamp(75px,9vw,115px)
    !important;
}

.mg-section-head{
  align-items:end;
}

.mg-product-grid{
  width:100%;

  max-width:none !important;

  display:grid !important;

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

  gap:18px !important;
}

.mg-product-card{
  width:100%;

  min-width:0 !important;

  overflow:hidden;
}


/* ==========================================================
   WHY SECTION
   상품 선택 뒤에 짧게 보여준다.
========================================================== */

.mg-commercial-intro{
  width:100% !important;

  max-width:1080px !important;

  margin:
    0 auto
    clamp(70px,8vw,100px)
    !important;

  text-align:center;
}

.mg-commercial-intro h2{
  max-width:720px;

  margin-left:auto !important;
  margin-right:auto !important;
}

.mg-commercial-lead{
  max-width:720px !important;

  margin-left:auto !important;
  margin-right:auto !important;
}

.mg-quote{
  display:none !important;
}

.mg-principles{
  width:100%;

  display:grid !important;

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

  gap:14px !important;

  margin-top:34px !important;
}

.mg-principles article{
  min-width:0;
}


/* ==========================================================
   MAIN FORM / RESULT
========================================================== */

.layout{
  width:100% !important;

  max-width:1120px !important;

  margin-left:auto !important;
  margin-right:auto !important;
}


/* ==========================================================
   HOME LIFEBOOK TEASER
========================================================== */

.mg-home-lifebook-teaser{
  width:
    calc(
      100% - 40px
    );

  max-width:1080px;

  margin:
    clamp(80px,10vw,130px)
    auto;

  padding:
    clamp(28px,5vw,58px);

  display:grid;

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

  align-items:center;

  gap:
    clamp(28px,6vw,72px);

  border:
    1px solid
    rgba(177,133,66,.22);

  border-radius:24px;

  background:
    linear-gradient(
      135deg,
      rgba(10,17,20,.97),
      rgba(23,22,19,.96)
    );

  box-shadow:
    0 28px 80px
    rgba(0,0,0,.20);
}

.mg-home-book-copy{
  min-width:0;
}

.mg-home-book-copy > small{
  display:block;

  margin-bottom:16px;

  color:#a7814b;

  font-size:10px;
  font-weight:800;

  letter-spacing:2.6px;
}

.mg-home-book-copy h2{
  margin:
    0 0 18px;

  color:#f0ede7;

  font-size:
    clamp(
      30px,
      4vw,
      49px
    );

  font-weight:500;

  line-height:1.32;

  letter-spacing:
    -.035em;
}

.mg-home-book-copy h2 em{
  color:#aa8147;

  font-style:normal;
}

.mg-home-book-copy p{
  max-width:620px;

  color:#9fa9ac;

  font-size:14px;

  line-height:1.9;
}

.mg-home-book-meta{
  margin-top:22px;

  color:#c4ab83;

  font-size:12px;
  font-weight:800;

  letter-spacing:1.2px;
}

.mg-home-book-meta span{
  margin:
    0 8px;
}

.mg-home-book-button{
  min-height:48px;

  display:inline-flex;

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

  gap:16px;

  margin-top:24px;

  padding:
    0 20px;

  border:
    1px solid
    rgba(179,136,69,.35);

  border-radius:12px;

  color:#dfc69d;

  text-decoration:none;

  font-size:13px;
  font-weight:800;
}

.mg-home-book-mini{
  width:210px;
  aspect-ratio:.72;

  justify-self:end;

  display:flex;

  flex-direction:column;

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

  padding:24px;

  border:
    1px solid
    rgba(189,144,74,.38);

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(151,111,54,.15),
      transparent 55%
    ),
    #080d0f;

  box-shadow:
    18px 24px 50px
    rgba(0,0,0,.35);

  color:#b18a50;
}

.mg-home-book-mini span{
  font-size:16px;
  letter-spacing:5px;
}

.mg-home-book-mini b{
  margin:
    32px 0;

  color:#e4ddd1;

  font-size:28px;
  font-weight:500;

  letter-spacing:10px;
}

.mg-home-book-mini small{
  font-size:8px;
  letter-spacing:2px;
}


/* 홈에서는 전체 인생서 랜딩 숨김 */

body.mg-view-home
#lifeBookPreview{
  display:none !important;
}


/* ==========================================================
   REPORT PAGE
========================================================== */

body.mg-view-report
.hero,

body.mg-view-report
.mg-products,

body.mg-view-report
.mg-commercial-intro,

body.mg-view-report
.mg-home-lifebook-teaser,

body.mg-view-report
#lifeBookPreview{
  display:none !important;
}

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

  max-width:760px;

  margin:
    clamp(56px,7vw,90px)
    auto
    34px;

  text-align:center;
}

.mg-page-back{
  display:inline-flex;

  margin-bottom:28px;

  color:#8b9699;

  text-decoration:none;

  font-size:12px;
}

.mg-report-page-intro > small{
  display:block;

  color:#a98249;

  font-size:10px;
  font-weight:850;

  letter-spacing:2.4px;
}

.mg-report-page-intro h1{
  margin:
    12px 0 16px;

  color:#f0ede7;

  font-size:
    clamp(
      36px,
      5vw,
      58px
    );

  font-weight:500;

  letter-spacing:
    -.045em;
}

.mg-report-page-intro p{
  max-width:620px;

  margin:
    0 auto;

  color:#9ca6aa;

  font-size:14px;

  line-height:1.85;
}

.mg-report-page-price{
  margin-top:20px;

  color:#c39a60;

  font-size:19px;
  font-weight:850;
}

body.mg-view-report
.layout{
  max-width:820px !important;

  display:grid !important;

  grid-template-columns:
    1fr !important;

  gap:18px !important;
}


/* DIRECT REPORT BANNER */

.mg-direct-report-banner{
  margin:
    0 0 22px;

  padding:
    18px 20px;

  border:
    1px solid
    rgba(165,123,62,.24);

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      rgba(160,117,56,.075),
      rgba(255,255,255,.025)
    );
}

.mg-direct-report-banner small{
  display:block;

  margin-bottom:7px;

  color:#a9814a;

  font-size:9px;
  font-weight:850;

  letter-spacing:1.8px;
}

.mg-direct-report-banner strong{
  display:block;

  margin-bottom:6px;

  color:#e8e3db;

  font-size:19px;
}

.mg-direct-report-banner p{
  margin:0;

  color:#929da1;

  font-size:13px;

  line-height:1.75;
}


/* ==========================================================
   LIFEBOOK PAGE
========================================================== */

body.mg-view-lifebook
.hero,

body.mg-view-lifebook
.mg-products,

body.mg-view-lifebook
.mg-commercial-intro,

body.mg-view-lifebook
.mg-home-lifebook-teaser{
  display:none !important;
}

body.mg-view-lifebook
#lifeBookPreview{
  display:grid !important;

  margin-top:
    clamp(
      46px,
      7vw,
      86px
    ) !important;
}

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

  width:100%;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  margin-bottom:36px;

  padding-bottom:15px;

  border-bottom:
    1px solid
    rgba(158,119,62,.15);
}

.mg-page-subnav a{
  color:#9aa4a7;

  text-decoration:none;

  font-size:12px;
}

.mg-page-subnav span{
  color:#9e7945;

  font-size:9px;
  font-weight:800;

  letter-spacing:2px;
}

body.mg-view-lifebook
.layout{
  max-width:900px !important;

  margin-top:70px !important;

  display:grid !important;

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


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

@media
(max-width:900px){

  .shell{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .hero{
    max-width:760px !important;
  }

  .mg-home-lifebook-teaser{
    grid-template-columns:
      minmax(0,1fr)
      190px;
  }

  .mg-home-book-mini{
    width:175px;
  }

}


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

@media
(max-width:760px){

  .shell{
    max-width:100% !important;

    padding-left:18px !important;
    padding-right:18px !important;
  }


  /* header */

  .top{
    width:100%;

    display:flex !important;

    align-items:center;

    gap:10px;

    padding-top:12px;
  }

  .logo{
    min-width:0;

    margin-right:auto;
  }

  .engine-state{
    display:none !important;
  }

  .mg-mobile-secondary-account{
    display:none !important;
  }

  .mg-site-nav{
    order:20;

    width:100%;

    margin:
      10px 0 0 !important;

    display:grid !important;

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

    gap:2px;

    padding:5px;
  }

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

    min-width:0;

    min-height:44px;

    padding:
      0 5px;

    font-size:13px;
  }


  /* HERO */

  .hero{
    width:100% !important;

    max-width:100% !important;

    margin:
      44px auto
      72px
      !important;

    padding:0 !important;

    overflow:visible !important;
  }

  .hero-label{
    font-size:8px !important;

    letter-spacing:2.3px !important;
  }

  .hero h1{
    width:100%;

    max-width:100%;

    margin:
      17px auto
      18px !important;

    font-size:
      clamp(
        38px,
        11vw,
        52px
      ) !important;

    line-height:1.18 !important;

    letter-spacing:
      -.055em !important;

    white-space:normal !important;

    overflow-wrap:normal;
  }

  .hero p{
    width:100%;

    max-width:100% !important;

    margin:
      0 auto
      24px !important;

    padding:
      0 3px;

    font-size:14px !important;

    line-height:1.85 !important;

    word-break:keep-all;
  }

  .trust{
    width:100%;

    gap:7px;
  }

  .trust span{
    flex:
      0 1 auto;

    font-size:
      10px !important;

    white-space:normal;
  }

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

    max-width:100%;

    grid-template-columns:
      1fr !important;

    gap:10px;

    margin-top:26px !important;
  }

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

    min-height:58px;

    font-size:15px;
  }


  /* PRODUCTS */

  .mg-products{
    width:100% !important;

    margin-bottom:72px !important;
  }

  .mg-section-head{
    display:block !important;
  }

  .mg-section-head > p{
    max-width:100% !important;

    margin-top:18px !important;
  }

  .mg-product-grid{
    width:100%;

    grid-template-columns:
      1fr !important;

    gap:14px !important;
  }

  .mg-product-card{
    width:100%;

    max-width:100%;

    min-width:0;

    margin:0 !important;
  }


  /* WHY */

  .mg-commercial-intro{
    width:100% !important;

    margin-bottom:72px !important;
  }

  .mg-commercial-intro h2{
    font-size:
      clamp(
        30px,
        9vw,
        42px
      ) !important;

    line-height:1.4 !important;
  }

  .mg-commercial-lead{
    font-size:13px !important;

    line-height:1.85 !important;
  }

  .mg-principles{
    grid-template-columns:
      1fr !important;

    gap:10px !important;
  }


  /* FORM */

  .layout{
    width:100% !important;

    max-width:100% !important;

    display:grid !important;

    grid-template-columns:
      1fr !important;

    gap:16px !important;
  }


  /* LIFEBOOK TEASER */

  .mg-home-lifebook-teaser{
    width:
      calc(
        100% - 36px
      );

    grid-template-columns:
      1fr;

    gap:28px;

    padding:26px 22px;

    margin:
      76px auto;
  }

  .mg-home-book-copy h2{
    font-size:
      clamp(
        28px,
        8vw,
        37px
      );
  }

  .mg-home-book-mini{
    width:145px;

    justify-self:center;
  }


  /* REPORT */

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

    margin-top:42px;
  }

  .mg-report-page-intro h1{
    font-size:
      clamp(
        34px,
        10vw,
        46px
      );
  }


  /* LIFEBOOK */

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

    margin-left:auto !important;
    margin-right:auto !important;
  }

  .mg-page-subnav{
    align-items:flex-start;

    flex-direction:column;

    gap:8px;
  }

}


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

@media
(max-width:390px){

  .shell{
    padding-left:14px !important;
    padding-right:14px !important;
  }

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

  .hero h1{
    font-size:
      clamp(
        35px,
        10.7vw,
        43px
      ) !important;
  }

  .hero p{
    font-size:13px !important;
  }

}


/* MYEONGRIGYEOL_PRODUCT_FORMS_V4 */


/* ==========================================================
   HERO / NAV COLLISION FIX
========================================================== */

.top{
  position:relative !important;
  z-index:30 !important;
}

.mg-site-nav{
  position:relative !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  transform:none !important;
}

.hero{
  position:relative !important;
  z-index:1 !important;

  clear:both !important;
}

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

  background:
    linear-gradient(
      180deg,
      #100d08,
      #080705
    ) !important;

  border:
    1px solid
    rgba(176,130,66,.46)
    !important;
}

.mg-hero-secondary{
  color:#e1c29b !important;

  background:
    linear-gradient(
      180deg,
      #4d4d4d,
      #3c3c3c
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.08)
    !important;
}

.mg-hero-primary::before,
.mg-hero-primary::after,
.mg-hero-secondary::before,
.mg-hero-secondary::after{
  content:none !important;
  display:none !important;
}


/* ==========================================================
   PRODUCT-SPECIFIC FORM
========================================================== */

body.mg-view-report
.form-card,

body.mg-view-lifebook
.form-card{
  width:100% !important;

  max-width:820px !important;

  margin-left:auto !important;
  margin-right:auto !important;
}

body.mg-view-lifebook
.form-card{
  border-color:
    rgba(174,131,68,.28)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(7,18,22,.97),
      rgba(11,17,18,.98)
    )
    !important;
}


.mg-entry-fields{
  width:100%;

  margin-top:30px;

  padding-top:30px;

  border-top:
    1px solid
    rgba(135,155,161,.16);
}

.mg-life-entry-fields{
  border-top-color:
    rgba(177,133,68,.22);
}


.mg-entry-section-head{
  margin-bottom:26px;
}

.mg-entry-section-head small{
  display:block;

  margin-bottom:10px;

  color:#a47c46;

  font-size:9px;
  font-weight:850;

  letter-spacing:2px;
}

.mg-entry-section-head h3{
  margin:0 0 10px;

  color:#ece8e1;

  font-size:
    clamp(
      22px,
      3vw,
      30px
    );

  line-height:1.45;

  letter-spacing:
    -.025em;
}

.mg-entry-section-head p{
  max-width:650px;

  margin:0;

  color:#85969c;

  font-size:13px;

  line-height:1.8;

  word-break:keep-all;
}


.mg-entry-grid{
  width:100%;

  display:grid;

  gap:14px;
}

.mg-entry-grid-2{
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
}


.mg-entry-field{
  width:100%;

  min-width:0;

  margin-top:20px;
}

.mg-entry-field > label{
  display:block;

  margin-bottom:9px;

  color:#a1b0b5;

  font-size:12px;
  font-weight:700;
}

.mg-entry-field > label span{
  color:#607177;

  font-weight:500;
}


.mg-entry-field select,
.mg-entry-field textarea{
  width:100%;

  border:
    1px solid
    #31464d;

  border-radius:13px;

  outline:none;

  background:
    #09161a;

  color:#dce3e5;

  font-family:inherit;

  font-size:14px;
}

.mg-entry-field select{
  height:54px;

  padding:
    0 15px;
}

.mg-entry-field textarea{
  min-height:128px;

  padding:
    15px;

  resize:vertical;

  line-height:1.7;
}

.mg-life-entry-fields
textarea{
  min-height:142px;
}

.mg-entry-field select:focus,
.mg-entry-field textarea:focus{
  border-color:
    rgba(174,132,69,.72);

  box-shadow:
    0 0 0 3px
    rgba(174,132,69,.08);
}


.mg-entry-chips{
  display:flex;

  flex-wrap:wrap;

  gap:8px;
}

.mg-entry-chip{
  position:relative;

  cursor:pointer;
}

.mg-entry-chip input{
  position:absolute;

  opacity:0;

  pointer-events:none;
}

.mg-entry-chip span{
  min-height:40px;

  display:flex;

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

  padding:
    0 13px;

  border:
    1px solid
    #2d4249;

  border-radius:999px;

  background:
    rgba(9,21,25,.86);

  color:#8ea0a6;

  font-size:12px;

  transition:
    border-color .15s ease,
    color .15s ease,
    background .15s ease;
}

.mg-entry-chip
input:checked
+ span{
  border-color:
    rgba(174,131,67,.62);

  background:
    rgba(138,98,43,.15);

  color:#d5b17e;
}


.mg-entry-note{
  display:block;

  margin-top:9px;

  color:#62747a;

  font-size:10px;

  line-height:1.65;
}


.mg-entry-product-summary{
  margin-top:28px;

  padding:18px;

  border:
    1px solid
    rgba(150,113,62,.20);

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      rgba(151,111,52,.08),
      rgba(255,255,255,.018)
    );
}

.mg-entry-product-summary span{
  display:block;

  color:#9aabaf;

  font-size:11px;
}

.mg-entry-product-summary strong{
  display:block;

  margin-top:5px;

  color:#d5b27d;

  font-size:24px;
}

.mg-entry-product-summary p{
  margin:
    8px 0 0;

  color:#78898f;

  font-size:11px;

  line-height:1.65;
}


/* REPORT은 좀 더 실무 상담 느낌 */

body.mg-view-report
.form-card{
  box-shadow:
    0 24px 70px
    rgba(0,0,0,.18);
}


/* LIFEBOOK은 책처럼 한 단계 더 고급스럽게 */

body.mg-view-lifebook
.form-card{
  box-shadow:
    0 28px 90px
    rgba(0,0,0,.28);
}

body.mg-view-lifebook
.mg-life-entry-fields
.mg-entry-section-head small{
  color:#bb8c4c;
}

body.mg-view-lifebook
.mg-entry-product-summary{
  border-color:
    rgba(186,139,70,.27);
}


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

@media
(max-width:760px){

  /*
   * 메뉴 아래 제목이 바로 붙으면서
   * "운명의 결을 읽다"를 가리던 문제 해결.
   */

  .mg-site-nav{
    margin-top:
      28px !important;
  }

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


  /*
   * account 영역과 nav가 여러 줄일 때도
   * hero가 위로 끼어들지 않도록 확보.
   */

  .top{
    padding-bottom:
      8px !important;
  }


  .mg-entry-grid-2{
    grid-template-columns:
      1fr;
  }

  .mg-entry-fields{
    margin-top:25px;

    padding-top:25px;
  }

  .mg-entry-section-head h3{
    font-size:23px;
  }

  .mg-entry-chip span{
    min-height:42px;

    padding:
      0 12px;

    font-size:11px;
  }

  .mg-entry-field select{
    height:56px;

    font-size:14px;
  }

  .mg-entry-field textarea{
    min-height:140px;

    font-size:14px;
  }

}


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

@media
(max-width:390px){

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

  .mg-entry-chips{
    gap:7px;
  }

  .mg-entry-chip span{
    font-size:10px;

    padding:
      0 10px;
  }

}