/* ==========================================================
   MYEONGRIGYEOL SAME PAGE ADMIN LAB
   사용자 페이지에는 ?lab=1이 없으면 전혀 나타나지 않음
   ========================================================== */

#mgLabPanel{
  position:fixed;
  z-index:99999;
  top:18px;
  right:18px;
  width:290px;
  overflow:hidden;

  border:1px solid rgba(200,160,98,.40);
  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      rgba(10,25,32,.98),
      rgba(5,17,23,.98)
    );

  box-shadow:
    0 22px 70px rgba(0,0,0,.42);

  color:#e8ece9;

  backdrop-filter:
    blur(16px);
}


#mgLabPanel.is-collapsed
.mg-lab-body{
  display:none;
}


.mg-lab-head{
  min-height:48px;
  padding:11px 12px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  border-bottom:
    1px solid rgba(255,255,255,.06);

  cursor:pointer;
}


.mg-lab-head strong{
  display:block;

  color:#e7c88f;

  font-size:10px;
  letter-spacing:.10em;
}


.mg-lab-head span{
  display:block;
  margin-top:2px;

  color:#61777e;

  font-size:7px;
}


.mg-lab-toggle{
  width:28px;
  height:28px;

  border:1px solid #314850;
  border-radius:8px;

  color:#91a1a5;
  background:#08171d;

  cursor:pointer;
}


.mg-lab-body{
  padding:13px;
}


.mg-lab-label{
  display:block;

  margin:
    0
    0
    5px;

  color:#819399;

  font-size:8px;
}


#mgLabToken{
  width:100%;
  height:38px;

  padding:0 10px;

  border:1px solid #2a424b;
  border-radius:9px;

  color:#dce4e2;
  background:#06151b;

  outline:none;
}


#mgLabToken:focus{
  border-color:#977748;
}


.mg-lab-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;

  margin-top:10px;
}


.mg-lab-run{
  min-height:38px;

  padding:7px;

  border:1px solid #344950;
  border-radius:9px;

  color:#91a2a6;
  background:#08171d;

  font-size:8px;
  line-height:1.25;

  cursor:pointer;
}


.mg-lab-run:hover{
  border-color:#7d6542;
  color:#e0c18d;
}


.mg-lab-run.free{
  grid-column:1/-1;

  border-color:#826943;
  color:#e2c48f;

  background:
    linear-gradient(
      135deg,
      #191b16,
      #0a181a
    );
}


.mg-lab-status{
  margin-top:10px;

  padding:9px;

  border:1px solid #233940;
  border-radius:9px;

  color:#71868b;
  background:#07151b;

  font-size:8px;
  line-height:1.5;
}


.mg-lab-actions{
  display:flex;
  gap:5px;

  margin-top:7px;
}


.mg-lab-actions button,
.mg-lab-actions a{
  flex:1;

  padding:6px 5px;

  border:1px solid #293e46;
  border-radius:7px;

  color:#71868c;
  background:#07151b;

  text-align:center;
  text-decoration:none;

  font-size:7px;

  cursor:pointer;
}


/* ==========================================================
   상용 생성 결과
   실제 본페이지의 report 카드 내부에서 렌더링
   ========================================================== */

#mgCommercialResult{
  display:none;
}


#mgCommercialResult.is-visible{
  display:block;
}


.mg-commercial-head{
  padding-bottom:18px;

  border-bottom:
    1px solid rgba(255,255,255,.06);
}


.mg-commercial-kicker{
  margin-bottom:6px;

  color:#b08c56;

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


.mg-commercial-head h2{
  margin:0;

  color:#edf0ec;

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

  font-size:
    clamp(24px,4vw,34px);

  letter-spacing:-.04em;
}


.mg-commercial-progress{
  height:5px;

  margin-top:15px;

  overflow:hidden;

  border-radius:99px;

  background:#102027;
}


.mg-commercial-progress > div{
  height:100%;
  width:0;

  background:
    linear-gradient(
      90deg,
      #8f7045,
      #d5ae6c
    );

  transition:.3s;
}


.mg-commercial-progress-text{
  margin-top:6px;

  color:#667b81;

  font-size:8px;
}


.mg-commercial-part{
  margin-top:34px;
}


.mg-commercial-part-name{
  margin-bottom:10px;

  color:#806c4d;

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


.mg-reading-block{
  margin-bottom:17px;

  overflow:hidden;

  border:
    1px solid #243942;

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #0b1a21,
      #07151b
    );
}


.mg-reading-visual{
  position:relative;

  height:118px;

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

  overflow:hidden;

  border-bottom:
    1px solid #20353d;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(182,143,83,.12),
      transparent 34%
    ),
    #07141a;
}


/*
  기존 우주궤도 대신 임시 전통 명리 모티프.
  이후 고퀄리티 염주/명리책 아트로 교체 예정.
*/

.mg-beads{
  position:relative;

  width:104px;
  height:70px;
}


.mg-beads::before{
  content:"";

  position:absolute;

  left:13px;
  top:5px;

  width:74px;
  height:52px;

  border:
    2px dotted
    rgba(191,151,90,.72);

  border-radius:50%;

  transform:
    rotate(-8deg);
}


.mg-beads::after{
  content:"命";

  position:absolute;

  left:40px;
  top:19px;

  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(215,178,113,.75);

  border-radius:50%;

  color:#d9b676;
  background:#0c181b;

  font-family:"Batang",serif;
  font-size:13px;
}


.mg-reading-content{
  padding:
    19px
    20px
    21px;
}


.mg-reading-code{
  color:#695e4b;

  font-size:7px;
  letter-spacing:.13em;
}


.mg-reading-content h3{
  margin:
    5px
    0
    13px;

  color:#f0eee7;

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

  font-size:
    clamp(19px,3vw,25px);

  line-height:1.35;

  letter-spacing:-.035em;
}


.mg-reading-opening{
  margin-bottom:15px;

  color:#e3ddcf;

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

  font-size:14px;
  line-height:1.85;
}


.mg-reading-body{
  color:#9eadaf;

  font-size:11px;
  line-height:1.95;
}


.mg-reading-body p,
.mg-reading-opening p{
  margin:
    0
    0
    12px;
}


.mg-reading-qna{
  margin-top:17px;

  padding:14px;

  white-space:pre-wrap;

  border:
    1px solid #30464d;

  border-radius:12px;

  color:#a9b6b7;
  background:#0a181f;

  font-size:10px;
  line-height:1.8;
}


.mg-reading-sting{
  margin-top:17px;

  padding:17px;

  border:
    1px solid #59482f;

  border-radius:12px;

  color:#ddc18e;

  background:
    linear-gradient(
      135deg,
      #191812,
      #0d1719
    );

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

  font-size:14px;
  line-height:1.75;
}


.mg-reading-sting::before{
  content:"명리결이 짚는 한 문장";

  display:block;

  margin-bottom:7px;

  color:#836d4d;

  font-family:sans-serif;
  font-size:7px;
  letter-spacing:.12em;
}


.mg-reading-takeaway{
  margin-top:15px;

  color:#788b90;

  font-size:9px;
  line-height:1.7;
}


.mg-reading-tech{
  margin-top:16px;

  padding-top:12px;

  border-top:
    1px solid #21353c;
}


.mg-reading-tech summary{
  color:#74888d;

  font-size:8px;

  cursor:pointer;
}


.mg-reading-tech pre{
  margin:
    10px
    0
    0;

  white-space:pre-wrap;

  color:#667c82;

  font-family:inherit;
  font-size:8px;
  line-height:1.7;
}


.mg-reading-pending{
  padding:20px;

  color:#687d83;

  font-size:9px;
}


.mg-reading-error{
  margin-top:10px;

  padding:10px;

  border:
    1px solid #674039;

  border-radius:8px;

  color:#c98c82;
  background:#1a1110;

  font-size:8px;
}


@media(max-width:760px){

  #mgLabPanel{
    top:auto;
    right:10px;
    bottom:10px;
    left:10px;

    width:auto;
  }

}