:root{
  --bg:#f2f3f5;
  --panel:#fff;
  --frame-width:1080px;
  --accent:rgb(47, 140, 255);
  --bg-color:#eee;
  --bg-start:#eee;
  --bg_end:#eee;
  --a:#fff3d6;
  --b:#eafcff;
  --basic-a:#000000;
  --basic-b:#000000;
  --highlight-a:#ff4d4f;
  --highlight-b:#4f7eff;
  --margin-top:50px;
  --margin-bottom:50px;
  --margin-left:50px;
  --margin-right:50px;
  --bg-dimmed:0;
  --bubble-gap: 20px;
  --bubble-border-radius:30px;
  --bubble-line-height: 1.4;
  --bubble-letter-spacing : 0px;
  --bubble-max-width : 550px;
  --bubble-margin : 45px;
  --chat-font: 'Pretendard';
  --chat-font-weight: normal;
  --avatar-size: 50px;
}

/*xĴ*/
@font-face {
    font-family: 'NexonLv1Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'GowoonDodum';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
.nanum-gothic-regular {
  font-family: "Nanum Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.noto-sans-kr {
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'Ridibatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ChosunIlboMyungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
.nanum-myeongjo-regular {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 400;
  font-style: normal;
}
@font-face {
    font-family: 'Sweet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

/*� � (*/
@font-face {
    font-family: 'GabiaSai';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2510-1@1.0/GabiaSai-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GangwonEducationModuche';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFLightA.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

/* � (*/
@font-face {
    font-family: 'OngleipKonkon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2412-1@1.0/Ownglyph_corncorn-Rg.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OmuDaye';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/omyu_pretty.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

/*��� � (*/
@font-face {
    font-family: 'IsYun';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'KyoboHandwriting2019';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MissedGyuwon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2510-1@1.0/Griun_Gyuwon-Rg.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

/*� (*/
@font-face {
    font-family: 'Shilla';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/Shilla_CultureM-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'SolmoeKimDaegeon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/kdg_Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Joseon100Years';
    src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/ChosunCentennial.woff2') format('woff2');
    font-weight: Normal;
    font-display: swap;
}
@font-face {
    font-family: 'KkuBulLim';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/BMkkubulimTTF-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

/*=@*/
@font-face {
    font-family: 'RoundedFixedsys';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}



*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  font-family:NexonLv1Gothic; font-weight: 300;
  display:flex;
  gap:10px;
  padding:10px;
  height:100vh
}

.panel{
  position: fixed;
  width:400px;
  height: 100%;
  background:var(--panel);
  border-radius:10px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto
}

.inner-panel {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
}

inner-panel-row-div-mob {
  display:flex;
  flex-direction: row;
  gap:12px;
}

.hidden-panel .hidden-options{
  overflow:hidden;
  max-height:0;
  transition:all 0.3s ease;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:5px;
  margin-left: 15px;
  opacity: 0;
}

.horizon-panel
{
    display:flex;
    flex-direction:row;
}

.hidden-panel.active .hidden-options {
  max-height:1000px; /* ��� p <\ �h */
    opacity: 1;
}


.hidden-options-item {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.35s ease;
  display:grid;
  gap:12px;
  margin-left: 15px;
}
/* �� L */
.hidden-options-item.active {
  max-height: 1000px;
  opacity: 1;
}

.toggle-btn{
  padding:6px 8px;
  border:none;
  /*background:#92a7a0;*/
  border-radius:3px;
  cursor:pointer;
  font-size:13px;
  text-align:left;
  display:flex;
  align-items:center;
  gap:4px;
}

.toggle-btn::before{
  content:'▶';
  display:inline-block;
  transition: transform 0.3s ease;
}

button{
  padding:8px 10px;border:0;border-radius:6px;
    margin-left: 5px;
    margin-right: 10px;
  background:var(--accent);color:#fff;cursor:pointer
}
button.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent)}
button.delete{background:#fa5e5e; border:1px solid #fa5e5e ;color:#fff}
button.save{background:#3e3e3e; border:1px solid #3e3e3e ;color:#fff}
button.upscaleSave{background:#3e3e3e; border:1px solid #3e3e3e ;color:#fff;
  display: none;
}
button.active{background:var(--accent);color:#fff}

.only-mob {
  display: none;
}

textarea{
  width:100%;height:80px;resize:none;padding:8px;
  border-radius:8px;border:1px solid #ccc
}

textarea.name{
    width:100%;height:25px;resize:none;padding:8px;
  border-radius:8px;border:1px solid #ccc
}

input[type=file]{font-size:12px; margin-left: 10px; margin-top: 5px;}
input[type=color]{ width: 30px; height: 30px; margin-left: 10px; margin-right: 15px}
input[type=checkbox]{font-size:12px; margin-left: 10px}
label{font-size:13px;font-weight:600}
.toggle{display:flex;align-items:center;gap:6px;font-size:13px;margin-left: 10px}

.chat-wrapper{
  margin-top:70px;
  margin-left: 410px;
  height:fit-content;
  /*flex:1;*/
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.frame{
  width:var(--frame-width);
  /*min-height:200px;*/
  background:#f7f8fa;
  display:flex;
  flex-direction:column;
  overflow: hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/*
.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width:fit-content;
  height: fit-content;
  object-fit: cover;
  z-index: -1;
  display: none;
}
*/
.chat-area {
  /*flex:1;*/
  /*overflow:auto;*/
  /*
  height:var(--frame-width);
  */
  height:fit-content;
  justify-content: center;  
  align-items : center;
  
  padding:var(--margin-top) 10px var(--margin-bottom) 10px;
  
  display:flex;
  flex-direction:column;
  gap:var(--bubble-gap);
  /*background:#f7f8fa;*/
  background-color: rgba(0, 0, 0, var(--bg-dimmed));
  transition:padding 0.15s ease;
  /*
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  */
}

.chat-area, .bubble {
  font-family: var(--chat-font);
  font-weight: var(--chat-font-weight);
}

.msg {
  display: flex;
  align-items: flex-start; /* �� 0  , */
  gap: 10px;
  max-width: 100%;
  margin-left: var(--margin-left);
  margin-right: var(--margin-right);
  text-align:justify;
}
.msg.left {
  align-self: flex-start;
  flex-direction: row;
}

.msg.right {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.msg.centerA{
  align-self: center !important;
  flex-direction: column;
  /*text-align: center;*/
  align-items: flex-start; /* Y , � � � */
}
.msg.centerB {
  align-self: center !important;
  flex-direction: column;
  /*text-align: center;*/
  align-items:flex-end; /* Y , � � � */
}

.highlighted-text {
  background-color: var(--highlight-bg, yellow);
  white-space: pre-wrap;
  box-decoration-break: clone;
}


/* \D t�� � */
.avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: #ddd;
  overflow: hidden;
  display: none;
  flex-shrink: 0; /* l0 ��� )� */
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bubble {
  padding:var(--bubble-margin);
  border-radius:var(--bubble-border-radius);
  line-height:var(--bubble-line-height);
  letter-spacing:var(--bubble-letter-spacing);
  font-size:var(--bubble-font-size,16px);
  color:#000;
  max-width: var(--bubble-max-width);
}

.left .bubble{background:var(--a);border-top-left-radius:6px}
.right .bubble{background:var(--b);border-top-right-radius:6px}
.centerA .bubble{background:var(--a);border-top-left-radius:6px}
.centerB .bubble{background:var(--b);border-top-right-radius:6px}

.margin-box{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}

.edit-panel{
  position: fixed !important;
  width:403px;
  height: auto;
  background:#fff;
  border-radius:10px;
  padding:12px;
  /*display:flex;*/
  flex-direction:column;
  gap:12px;
  border:1px solid #ccc;
  display:none;
}
.edit-panel.active{display:flex;}
#editBox{height:500px;}

.top-panel{
  position: fixed;
  margin-left: 410px;
  width: fit-content;
  
  background:var(--panel);
  border-radius:10px;
  padding:12px;
  gap:12px;
  overflow:auto;
  display: flex; 
  flex-direction: row;
  align-items: center;
}

.top-inner-panel {
  display:flex; 
  gap:6px;
  flex-wrap:wrap; 
  align-items: center; 
  border-right:inset;
}

@media (max-width: 1080px){
  body {
    flex-direction: column;
    height: auto;
  }

  /* 5X ( �� � */
  .panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    width: 100% !important;
    height: auto;
    max-height: 350px; /* 5X �<t �ld �@ */
    overflow-y: auto;

    z-index: 9999;
    border-radius: 0;
    border-bottom: 1px solid #ddd;
    align-items: center;
  }
  
  .inner-panel {
    width: 400px;
  }
  
  .top-panel {
    margin-top: 350px; /* ( D�\ Xܤ� �<t 260px\ �� */
    margin-left: 0;
    width: fit-content;
    display: flex; 
    flex-direction:row;
    align-items: center;
  }

  /* ( L8�  $�� chat-wrapper| D�\  0 */
  .chat-wrapper {
    margin-top: 420px; /* panel �t�| �$ */
    margin-left: 0;
  }

  /* T��  ( � */
  .edit-panel {
    position: fixed !important;
    top: 0; /* ( D�\ Xܤ� �<t 260px\ �� */
    left: 0;
    right: 0;

    width: 100%;
    max-height: 350px;
    padding: 12px;
    background: #fff;
    z-index: 99999;

    border-bottom: 1px solid #ccc;
  }

  /*  ( \1T � chat-area   $�� J�] �1 */
  .edit-panel.active + .chat-area,
  .edit-panel.active ~ .chat-wrapper .chat-area {
    margin-top: 120px; /* edit-panel �t�| p */
  }
}

/* --- �| X� � UI  --- */
@media (max-width: 768px){
  html {
    font-size: 25px;  /* 0� 16px � 18px (�  �, padding �  ��) */
  }

  body {
    flex-direction: column;
    height: auto;
  }
  
  .only-mob {
    display: flex;
  }

  /* 5X ( �� � */
  .panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    width: 100% !important;
    height: auto;
    max-height: 350px; /* 5X �<t �ld �@ */
    overflow-y: auto;

    z-index: 9999;
    border-radius: 0;
    border-bottom: 1px solid #ddd;
    align-items:flex-start;
  }
  
  .inner-panel {
    width: 600px;
  }
  
  .top-panel {
    margin-top: 350px; /* ( D�\ Xܤ� �<t 260px\ �� */
    margin-left: 0;
    width: fit-content;
    gap:12px;
    display: flex; 
    flex-direction:column;
    align-items: flex-start;
  }
  
  .top-inner-panel {
    border-right: hidden;
  }

  /* ( L8�  $�� chat-wrapper| D�\  0 */
  .chat-wrapper {
    margin-top: 550px; /* panel �t�| �$ */
    margin-left: 0;
  }

  /* T��  ( � */
  .edit-panel {
    position: fixed !important;
    top: 0; /* ( D�\ Xܤ� �<t 260px\ �� */
    left: 0;
    right: 0;

    width: 100%;
    max-height: 350px;
    padding: 12px;
    background: #fff;
    z-index: 99999;

    border-bottom: 1px solid #ccc;
  }

  /*  ( \1T � chat-area   $�� J�] �1 */
  .edit-panel.active + .chat-area,
  .edit-panel.active ~ .chat-wrapper .chat-area {
    margin-top: 120px; /* edit-panel �t�| p */
  }
  
  button.upscaleSave {
    display: flex
  }
}