/* 헤더 */
.page-header { position: relative; z-index: 1;  padding: 10px 0; color: #fff; text-align: center;}
.page-header .copy-wrap { display: flex; gap: 10px; flex-direction: row-reverse; padding: 0 30px;}
.page-header .copy-wrap .img-btn { position: relative; background: #272B2F; border-radius: 100px; width: 42px; height: 42px; cursor: pointer;}
.page-header .copy-wrap .img-btn img { position: absolute; width: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.page-header .copy-wrap .img-btn .box-area { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; color: #111; padding: 6px 12px; border-radius: 6px; white-space: nowrap; font-size: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;}
.page-header .copy-wrap .img-btn .box-area::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: transparent transparent #fff transparent;}
.page-header .copy-wrap .img-btn:hover .box-area { opacity: 1; visibility: visible;}

/* 스크린 및 설정탭탭 */
.container { background:#0E1012;     position: relative;
    padding-bottom: 63px;
}
.control { display: flex; gap: 20px; align-items: stretch;  height: 100%;}
.control .contents-wrap { background: #13171B;  height: 100%;}
.control .contents-wrap.screen { position: relative; width: calc(100% - 470px); overflow: hidden; height: 820px; max-height: 930px;}
.control .contents-wrap.aside { position: relative; width: 470px; height: 100%; padding: 15px 0 0 0; border-radius: 10px 10px 0 0;}
.control .contents-wrap.aside > .option-area { padding: 5px 20px 20px 20px;}
.control .contents-wrap.aside > .option-area .setting { display: flex; align-items: center;}
.control .contents-wrap.aside > .option-area .setting .tit { font-size: 15px; color: #dbdbdb; width: 70px}

/* 스크롤바 */
.scrollbar::-webkit-scrollbar { width: 6px; }
.scrollbar::-webkit-scrollbar-thumb { background: #4b4d50; border-radius: 10px;}
.scrollbar::-webkit-scrollbar-track { background: #13171B; }



/* 탭버튼 */
.tab-area { padding-left: 15px; z-index: 999; box-shadow: -12px 5px 33px -10px rgb(20 23 26); position: relative;}
.tab-area ul li { display: inline-block; padding: 15px 20px; font-size: 14px; font-weight: 400; color: #BDC4CA; text-align: center; border-radius: 10px 10px 0 0; cursor: pointer;}
.tab-area ul li.active { background: #202529; color: #6AE1BF; font-weight: 600;}

.control .contents-wrap.aside .aside-body { overflow-y: auto; max-height: 640px; background: #202529;}
.control .contents-wrap.aside .aside-body .tit { font-size: 15px; color: #dbdbdb; width: 90px;}
.control .contents-wrap.aside .aside-bottom { position: absolute; bottom: -35px; width: 100%; padding: 10px 20px; background: #13171B; border-radius: 0 0 10px 10px;}




/* 토글 */
.toggle-input { display: none;}

.toggle { display: flex; align-items: center; }
.toggle-label { position: relative; display: block; width: 42px; height: 22px; border-radius: 12px; border: 1px solid #BDC4CA; cursor: pointer; transition: background-color 0.3s ease; }
.toggle-label::before { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #BDC4CA; border-radius: 50%; transition: transform 0.3s ease, background 0.3s ease, border 0.3s ease; }
/* 토글 ON 스타일 지정 */
.toggle-input:checked + .toggle-label { border: 1px solid #99e4cf;}
/* 토글 ON인 경우에 버튼 위치 지정 */
.toggle-input:checked + .toggle-label::before { transform: translateX(19px); background: #6AE1BF;}

/* 옵션 ui */
.option-area { padding: 20px 20px 30px 20px;}
.option-area .setting { display: flex; align-items: flex-start; padding-bottom: 14px;}
.option-area .setting .position.w-56 { width: calc(100% - 170px)}
.option-area .setting:last-child { padding-bottom: 0;}
.option-area:only-child { padding-bottom: 0;}
.option-area .setting .number-input { display: flex; gap: 5px; width: calc(100% - 90px);}
.option-area .setting .btn-wrap button img { position: relative; top: 6px; right: -7px; width: 15px; height: auto; }
.option-area .setting .btn-wrap button img.align { top: 6px; right: 0; margin-right: 4px;}
.option-area .inner-set { width: 100%; }




/*  inner-set  */
.back-gray  {  background: #2B3034; }
.position { width: calc(100% - 90px);}
.position .inner-set { display: flex; align-items: center; padding-bottom: 15px;}
.position .inner-set.file_input { padding-bottom: 10px;}
.position .inner-set:last-child { padding-bottom: 0; }
.position .inner-set .sub-tit {font-size: 13px; font-weight: 400; color: #BDC4CA;  width: 65px;}
.position .inner-set .btn-wrap { display: flex; gap: 4px;}
.position .inner-set .btn-wrap.block { display: block;}
.position .inner-set .btn-wrap.block button { margin-bottom: 3px;}
.position .inner-set .btn-wrap.position button { position: relative; padding: 0px 20px;}
.position .inner-set .btn-wrap.position button.active { border: 1px solid #959a9f; background: #212326;}
.position .inner-set .btn-wrap.position button img {  width: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}





/* 입력 인풋 number */
.input-text.number  { position: relative;}
.input-text.number input[type=number] { padding: 0px 25px 0 10px;}
.input-text .spin-btn { position: absolute;right: 2px;width: 12px;height: 12px;background: #343a3f;border-radius: 2px;cursor: pointer;text-align: center;font-size: 6px;color: #BDC4CA; line-height: 13px;}
.input-text .spin-btn.up { top: 2px; }
.input-text .spin-btn.down { bottom: 2px; }





/* 셀렉트박스 */
.selectobx { position: relative; font-size: 15px; font-weight: 600; }
.selectobx::after { content: ''; width: 6px; height: 6px; right: 15px; top: 10px; border-left: 1px solid #ffffff; border-bottom: 1px solid #ffffff; position: absolute; transform: rotate(-45deg); cursor: pointer;}
.selectobx select { display: inline-block; width: 100px; line-height: 30px; padding: 0 20px 0 15px; color: #BDC4CA; background: #101214; border-radius: 4px; cursor: pointer;}



/* custom file */
.filebox { position: relative; display: flex; align-items: center; width: 225px;}
.filebox .file_input { display: inline-block; height: 30px; padding: 0 10px; width: 100%; box-sizing: border-box; background: #101214; color: #BDC4CA; border-radius: 4px;}
.filebox input[type="file"] { position: absolute; display: inline-block; width: 100%; height: 40px; top: 0; left: 0; opacity: 0; cursor: pointer; }
.setting .img-area { max-width: 26px; max-height: 26px; cursor: pointer;}
.setting .img-area img { width: 26px; height: 26px;  border-radius: 4px;}
.img-preview { position: relative; display: inline-block; margin-left: 5px; }
.img-preview:hover::after { content: ""; position: absolute; top: 100%; left: -100px; width: 200px; height: 200px; background-image: url('../img/test_logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center; border: 1px solid #000; z-index: 999; margin-top: 10px; background-color: #0E1012;
}
.img-preview.none:hover::after { background-image: url('../img/board/spon_logo.png');}