.mg-my-overlay{
  position:fixed;
  inset:0;
  z-index:15000;
  display:none;
  background:rgba(2,8,12,.9);
  backdrop-filter:blur(14px);
}

.mg-my-overlay.on{
  display:block;
}

.mg-my-shell{
  width:min(1080px,100%);
  height:100%;
  margin:0 auto;
  background:#06151d;
  overflow:auto;
}

.mg-my-head{
  position:sticky;
  top:0;
  z-index:2;
  min-height:78px;
  padding:17px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(6,21,29,.95);
  backdrop-filter:blur(12px);
}

.mg-my-kicker{
  color:#c39b5e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.17em;
}

.mg-my-head h2{
  margin:4px 0 0;
  font-size:20px;
  color:#f1eee8;
}

.mg-my-close{
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:#0a1d26;
  color:#cbd4d7;
  font-size:19px;
  cursor:pointer;
}

.mg-my-body{
  padding:22px;
}

.mg-my-wallet{
  margin-bottom:20px;
  padding:16px 18px;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  border:1px solid rgba(198,157,94,.20);
  border-radius:15px;
  background:rgba(198,157,94,.04);
}

.mg-my-wallet span{
  color:#758d96;
  font-size:10px;
}

.mg-my-wallet strong{
  display:block;
  margin-top:3px;
  color:#e4c184;
  font-size:16px;
}

.mg-my-section{
  margin-top:28px;
}

.mg-my-section-head{
  margin-bottom:12px;
}

.mg-my-section-head small{
  color:#758b94;
  font-size:8px;
  letter-spacing:.13em;
}

.mg-my-section-head h3{
  margin:5px 0 0;
  color:#e9e8e3;
  font-size:16px;
}

.mg-my-reports{
  display:grid;
  gap:10px;
}

.mg-my-report{
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:#081b24;
}

.mg-my-report-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.mg-my-report small{
  color:#6f8790;
  font-size:9px;
}

.mg-my-report h4{
  margin:5px 0 7px;
  color:#ecede8;
  font-size:14px;
}

.mg-my-report-meta{
  color:#718790;
  font-size:10px;
  line-height:1.7;
}

.mg-my-status{
  flex:0 0 auto;
  height:25px;
  padding:0 8px;
  display:flex;
  align-items:center;
  border:1px solid rgba(104,169,170,.24);
  border-radius:999px;
  color:#7fb6b5;
  font-size:8px;
}

.mg-my-open{
  margin-top:12px;
  width:100%;
  min-height:43px;
  border:1px solid rgba(205,166,96,.34);
  border-radius:11px;
  background:rgba(205,166,96,.08);
  color:#e4c383;
  font-weight:800;
  cursor:pointer;
}

.mg-my-empty{
  padding:30px 18px;
  text-align:center;
  border:1px dashed rgba(255,255,255,.09);
  border-radius:14px;
  color:#728992;
  font-size:11px;
  line-height:1.8;
}

.mg-my-profiles{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:9px;
}

.mg-my-profile{
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:#081a22;
}

.mg-my-profile strong{
  color:#d9dfdf;
  font-size:12px;
}

.mg-my-profile p{
  margin:5px 0 0;
  color:#718790;
  font-size:9px;
  line-height:1.6;
}


/* 리포트 리더 */

.mg-my-reader{
  display:none;
  margin-top:25px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
}

.mg-my-reader.on{
  display:block;
}

.mg-my-reader-head{
  margin-bottom:17px;
}

.mg-my-reader-head small{
  color:#b99055;
  font-size:8px;
  letter-spacing:.15em;
}

.mg-my-reader-head h3{
  margin:6px 0;
  color:#f0ede6;
  font-size:21px;
}

.mg-my-reader-back{
  margin-bottom:15px;
  border:0;
  background:none;
  color:#9caeb4;
  cursor:pointer;
}

.mg-my-block{
  margin-bottom:12px;
  padding:18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:#071922;
}

.mg-my-block-label{
  color:#806f52;
  font-size:8px;
  letter-spacing:.12em;
}

.mg-my-block h4{
  margin:5px 0 13px;
  color:#e6e5df;
  font-size:15px;
}

.mg-my-text{
  color:#abb9bd;
  font-size:11px;
  line-height:1.9;
}

.mg-my-value{
  margin-top:11px;
}

.mg-my-value-label{
  margin-bottom:4px;
  color:#b69661;
  font-size:9px;
  font-weight:700;
}

.mg-my-progress{
  margin-top:9px;
  color:#718993;
  font-size:9px;
}

@media(max-width:640px){

  .mg-my-body{
    padding:16px;
  }

  .mg-my-profiles{
    grid-template-columns:1fr;
  }

  .mg-my-head{
    padding-left:16px;
    padding-right:16px;
  }
}


/* ============================================================
   MYEONGRIGYEOL_LIFEBOOK_READER_V1
   ============================================================ */

.mg-life-reader{
  width:min(820px,100%);
  margin:0 auto;
  color:#25221d;
  background:#eee9df;
  border-radius:4px;
  overflow:hidden;
  box-shadow:
    0 28px 90px rgba(0,0,0,.40);
}


.mg-life-cover{
  min-height:72vh;
  padding:
    clamp(48px,8vw,90px)
    clamp(28px,8vw,78px);

  display:flex;
  flex-direction:column;
  justify-content:center;

  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(210,171,109,.13),
      transparent 30%
    ),
    #10191b;

  color:#eee9de;
}


.mg-life-cover-mark{
  margin-bottom:44px;

  color:#d0a969;

  font-family:serif;
  font-size:14px;

  letter-spacing:.55em;
}


.mg-life-cover-kicker{
  color:#786b57;

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

  letter-spacing:.20em;
}


.mg-life-cover h1{
  margin:15px 0 22px;

  font-family:
    "Noto Serif KR",
    "Batang",
    serif;

  font-size:
    clamp(
      34px,
      7vw,
      58px
    );

  font-weight:500;

  line-height:1.25;
}


.mg-life-cover h1 em{
  color:#d6b476;
  font-style:normal;
}


.mg-life-cover-line{
  width:54px;
  height:1px;

  margin:3px 0 26px;

  background:#b58c51;
}


.mg-life-cover p{
  max-width:420px;

  margin:0;

  color:#a3aaa7;

  font-family:
    "Noto Serif KR",
    "Batang",
    serif;

  font-size:13px;
  line-height:2;
}


.mg-life-cover > small{
  margin-top:52px;

  color:#6f7877;

  font-size:9px;

  letter-spacing:.10em;
}


.mg-life-toc{
  padding:
    56px
    clamp(24px,7vw,68px);

  background:#ebe6db;
}


.mg-life-toc > small,
.mg-life-ending > small{
  color:#96764a;

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

  letter-spacing:.17em;
}


.mg-life-toc h2{
  margin:8px 0 30px;

  font-family:
    "Noto Serif KR",
    "Batang",
    serif;

  font-size:25px;
}


.mg-life-toc-row{
  display:grid;

  grid-template-columns:
    38px 1fr;

  gap:10px;

  padding:13px 0;

  border-bottom:
    1px solid
    rgba(35,30,23,.12);

  text-decoration:none;
  color:#302c25;
}


.mg-life-toc-row span{
  color:#a2855a;

  font-size:10px;
}


.mg-life-toc-row strong{
  font-family:
    "Noto Serif KR",
    "Batang",
    serif;

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


.mg-life-part{
  padding:
    64px
    clamp(24px,7vw,68px);

  background:#f3eee4;

  border-top:
    8px solid #e4ded1;
}


.mg-life-part-head{
  margin-bottom:42px;
}


.mg-life-part-head small{
  color:#a18152;

  font-size:9px;
  letter-spacing:.12em;
}


.mg-life-part-head h2{
  margin:8px 0 0;

  font-family:
    "Noto Serif KR",
    "Batang",
    serif;

  font-size:
    clamp(
      27px,
      5vw,
      38px
    );

  font-weight:500;
}


.mg-life-chapter{
  margin-bottom:52px;
}


.mg-life-chapter-code{
  margin-bottom:7px;

  color:#a88b61;

  font-size:8px;
  letter-spacing:.12em;
}


.mg-life-chapter h3{
  margin:0 0 20px;

  color:#24211c;

  font-family:
    "Noto Serif KR",
    "Batang",
    serif;

  font-size:20px;
  font-weight:600;

  line-height:1.55;
}


.mg-life-chapter-body .mg-my-text{
  color:#46413a;

  font-family:
    "Noto Serif KR",
    "Batang",
    serif;

  font-size:
    clamp(
      14px,
      2.3vw,
      16px
    );

  line-height:2.05;
}


.mg-life-chapter-body
.mg-my-value-label{
  margin-top:20px;

  color:#8d704a;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Noto Sans KR",
    sans-serif;

  font-size:10px;
}


.mg-life-ending{
  padding:
    70px
    clamp(24px,7vw,68px);

  background:#111a1c;

  color:#ede8dd;
}


.mg-life-ending h2{
  max-width:590px;

  margin:12px 0 20px;

  font-family:
    "Noto Serif KR",
    "Batang",
    serif;

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

  line-height:1.55;
}


.mg-life-ending p{
  max-width:580px;

  margin:0;

  color:#9da5a3;

  font-family:
    "Noto Serif KR",
    "Batang",
    serif;

  font-size:13px;
  line-height:2;
}


@media(max-width:640px){

  .mg-life-reader{
    width:100%;
    border-radius:0;
  }

  .mg-life-cover{
    min-height:68vh;
  }

  .mg-life-part{
    padding-top:48px;
    padding-bottom:48px;
  }

}