/* 공통 */
.popup-box {width: 760px;}
.popup-box .btn-wrap {justify-content: flex-end; margin-top: 20px;}
.popup-box .btn-wrap button img {height: 12px; vertical-align: middle;}
.popup-box .btn-gray {background-color: #e9e9e9; border: 1px solid #afafaf; color: #000;}
.popup-box .btn-wrap.excel {justify-content: flex-start; margin-bottom: 8px;}
.popup-box .btn-wrap.excel .btn-gray, .memo-file .btn-gray {border: 1px solid #c5d8f2; background-color: #f6f8fb;}
.popup-box .search-box {margin-top: 7px;}
.popup-box .search-box input {width: 100%;}
.popup-tab > ul {justify-content: flex-start; gap: 20px;}
.popup-tab > ul li {width: 148px; height: 38px; font-size: 14px;}
.popup-tab.tab-con > div {margin-top: 15px;}
.popup-box .txt-box {border: none; padding: 0; margin-bottom: 15px;}
.popup-box .pagination span {width: 30px; height: 30px; line-height: 28px; font-size: 12px;}

.popup-box div::-webkit-scrollbar {width: 10px; background-color: #f5f5f5;}
.popup-box div::-webkit-scrollbar-track {border-radius: 0px; background-color: #f0f0f0;}
.popup-box div::-webkit-scrollbar-thumb {border-radius: 5px; border: 2px solid transparent; background-color: #c9c9c9; background-clip: padding-box;}

/* 메시지 */
.msg {font-size: 16px; color: #666; line-height: 135%; word-break: keep-all; text-align: left;}

/* 이미지 편집기 */
.edit-wrap {display: flex; justify-content: space-between; gap: 20px; height: 657px;}
.edit-wrap .edit-tool {border: 1px solid #ddd; width: 450px; display: flex;}
.edit-wrap .edit-tool .tool-tab {width: 110px; height: 100%; box-sizing: border-box;}
.edit-wrap .edit-tool .tool-tab .tool-el {position: relative; padding: 15px 0; box-sizing: border-box; text-align: center; height: 20%; color: #131e1b; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.edit-wrap .edit-tool .tool-tab .tool-el::after {position: absolute; display: block; content: ''; bottom: -1px; width: 70%; height: 1px; left: 50%; transform: translateX(-50%); background-color: #ddd;}
.edit-wrap .edit-tool .tool-tab .tool-el:last-child::after {display: none;}
.edit-wrap .edit-tool .tool-tab .tool-el.active {background-color: #42ade2; color: #fff; border-radius: 5px;}
.edit-wrap .edit-tool .tool-tab .tool-el.active::after {display: none;}
.edit-wrap .edit-tool .tool-tab .tool-el span {display: block; margin-top: 10px; font-size: 16px;}
.edit-wrap .edit-tool .tool-con {border-left: 1px solid #ddd; width: calc(100% - 110px);}
.edit-wrap .edit-tool .tool-con > div {display: none;}
.edit-wrap .edit-tool .tool-con > div.on {display: block; padding: 20px 0; box-sizing: border-box; height: 100%;}
.edit-wrap .edit-tool .tool-con .tool-con-wrap {height: 100%;}
.edit-wrap .preview {width: calc(100% - 340px); height: 657px; text-align: center;}
.edit-wrap .preview-img {height: 100%; max-height: 657px;}
.edit-wrap .preview .preview-img img, .edit-wrap .preview .preview-img canvas {width: 100%; height: 657px; object-fit: contain;}

.template-top {padding: 0 8px; box-sizing: border-box; margin-bottom: 20px;}
.template-top p {margin: 0 auto 15px; color: #999; line-height: 145%; word-break: keep-all; font-size: 15px;}
.template-top select {width: 100%; margin-top: 10px; border-radius: 4px; padding: 8px 15px;}
.template-wrap {height: calc(100% - 148px); overflow-y: scroll; overflow-x: hidden; padding: 0 8px 15px; box-sizing: border-box;}
.template-wrap .template-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;}
.template-wrap .template-list .template-img {position: relative;}
.template-wrap .template-list .template-img:hover::after {position: absolute; display: block; content: ''; background-color: rgba(0,0,0,0.25); width: 100%; height: 100%; top: 0; left: 0; z-index: 1; border-radius: 3px;;}
.template-wrap .template-list .template-img img {width: 100%; border-radius: 4px;}
.sticker-top {padding: 0 8px; box-sizing: border-box;}
.sticker-top p {margin: 15px auto 5px; color: #999; line-height: 145%; word-break: keep-all; font-size: 15px;}
.btn-tool {background-color: #475b65; border: 1px solid #475b65; width: 100%;}
.sticker-wrap {padding: 15px 0 20px; box-sizing: border-box; height: calc(100% - 141px); overflow-x: hidden; overflow-y: scroll;}
.sticker-wrap .sticker-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 8px; box-sizing: border-box;}
.sticker-wrap .sticker-list > div {width: 56px; height: 56px; border: 1px solid #ddd; border-radius: 5px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer;}
.sticker-wrap .sticker-list > div img {height: max-content;}
.text-top {padding: 0 8px; box-sizing: border-box;}
.text-top input {width: 100%; border: 1px solid #ddd; border-radius: 5px; padding: 8px 16px; box-sizing: border-box; margin-bottom: 10px;}
.text-top .text-select {display: grid; grid-template-columns: 2.6fr 1fr; gap: 5px;}
.text-top .text-select select {width: 100%; border: 1px solid #ddd; border-radius: 5px; padding: 8px; box-sizing: border-box; margin-bottom: 10px;}
.text-top input::placeholder {background-image: url('/images/popup/text_01.png'); background-repeat: no-repeat; background-size: 20px; background-position: 5% 50%; padding-left: 38px;}
.text-top .text-btn {display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 18px;}
.text-top .text-btn button {border: none; background-color: transparent; text-align: center; font-size: 22px; color: #181818;}
.text-top .text-btn button span {display: block; font-size: 13px; color: #666; margin-top: 8px;}
.text-top .btn-wrap.color {position: relative;}
.text-top .btn-wrap.color label {width: 100%; color: #42ade2;}
.text-top .btn-wrap.color input {position: absolute; bottom: -8px; visibility: hidden;}
.text-top .btn-wrap.text {position: relative;}
.text-top .btn-wrap.text label {width: 100%; color: #475b65; margin-bottom: 10px;}
.text-top .btn-wrap.text input {position: absolute; bottom: 8px; visibility: hidden;}
.tool-con-wrap.size {padding: 0 15px; box-sizing: border-box; text-align: center; padding-top: 30px;}
.size-list {display: grid; margin-bottom: 10px;}
.size-list div {margin-bottom: 25px; cursor: pointer;}
.size-list div img {margin-bottom: 15px;}
.size-list div span {font-size: 12px; display: block;}
.size-list:nth-child(1) {grid-template-columns: repeat(3, 1fr);}
.size-list:nth-child(2) {grid-template-columns: repeat(2, 1fr);}
.size-list:nth-child(2) div:nth-child(4) img {transform: rotate(90deg);}
.tool-con-wrap.size .btn-wrap {justify-content: center; margin-top: 0;}
.tool-con-wrap.size .btn-wrap button {padding: 0 5px;}

/* 메시지 발송내역 */
.history-wrap {display: flex; justify-content: space-between; gap: 20px;}
.history-view {width: 295px;}
.history-view .view-wrap {height: 380px; border: 1px solid #ddd; border-radius: 5px; width: 100%; padding: 15px 0; box-sizing: border-box;}
.history-view .view-wrap .view-top {display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; margin-bottom: 12px; padding: 0 25px; box-sizing: border-box;}
.history-view .view-wrap .view-top img {height: 30px;}
.history-view .view-wrap .view-con {height: 305px; overflow-y: auto; padding: 0 25px; box-sizing: border-box;}
.history-view .view-wrap .view-con span {display: block; text-align: center; font-size: 12px; color: #acacac; margin-bottom: 12px;}
.history-view .view-wrap .view-con .phone-img img {width: fit-content; margin-bottom: 10px; width: 100%;}
/* .history-view .view-wrap .view-con pre {min-height: 100px; padding: 20px 12px; box-sizing: border-box; width: 100%; background-color: #f6f6f6; border: 1px solid #ddd; border-radius: 5px; font-size: 13px; line-height: 135%; word-break: break-word; white-space: pre-wrap;} */
.history-con {margin-top: -25px; width: 290px}
.history-con .history-con-box .history-con-item {padding-bottom: 10px; margin-bottom: 10px;}
.history-con .history-con-box .history-con-item {border-bottom: 1px solid #ddd;;}
.history-con .history-con-box .history-con-item:nth-child(2) {border-bottom: 2px solid #848383;}
.history-con .history-con-box .history-con-item span {display: inline-block;}
.history-con .history-con-box .history-con-item .title {margin-right: 25px;}
.history-con .number-list {width: 100%; height: 170px; margin-top: 18px;}
.history-con .number-list ul li {font-size: 18px;}

/* 주소록 */
.address-search {margin-bottom: 20px; display: flex; align-items: center;}
.address-search select {background-color: #f6f8fb; border: none; min-width: 95px; height: 30px; padding: 0 10px; font-size: 15px; margin-right: 8px;}
.address-search input {border-radius: 5px; border: 1px solid #ddd; width: 380px; height: 30px; padding: 6px 15px; font-size: 13px; box-sizing: border-box;;}
.address-search button {display: inline-flex; justify-content: center; align-items: center; margin-left: 8px; border: 1px solid #ddd; width: 30px; height: 30px; border-radius: 5px; background-color: #fff;}
.address-tbl .thead-sticky {max-height: 250px;}
.address-tbl .x-scroll {max-width: 700px;}
.address-tbl .tbl td:nth-child(1) {width: 10%;}
.address-tbl .tbl td:nth-child(2) {width: 30%;}
.address-tbl .tbl td:nth-child(3) {width: 60%;}
.memo-file div {display: inline-flex; align-items: center; width: 100%; height: 34px; margin-top: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;}
.memo-file div .file-name {width: calc(100% - 90px); background-color: transparent; border: none; background-image: url(/front/images/ico_file.png); background-repeat: no-repeat; background-size: 20px; background-position: 3% 50%; padding: 0 15px 0 50px; font-size: 15px; color: #666;}
.memo-file div button {background-color: transparent; border: none; height: 14px; padding: 0; margin: 0;}
.memo-file div button img {height: 100%;}

/* 메시지 보관함 */
.sms-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 25px;}
.sms-list .chk-item.sms-use {margin-top: 14px; text-align: center;}
.sms-list .chk-item.sms-use label {font-size: 15px; font-weight: 500; color: #161616;}
.sms-list .chk-item.sms-use input[type=checkbox] + label.label-cb {border-radius: 100%;}
.sms-list .chk-item.sms-use input[type="checkbox"]:checked + label.label-cb::after {transform: scale(0.46);}
.sms-list .chk-item label {font-size: 14px; color: #353535; margin-bottom: 5px;}
.sms-list .sms-date {font-size: 12px; margin-bottom: 12px; color: #353535; display: inline-block; cursor: pointer;}

/* 최근 발송 내역 */
.recent-wrap .btn-wrap {justify-content: right; margin-bottom: 15px;}
.recent-tbl .thead-sticky {max-height: 310px;}
.recent-tbl .tbl td {color: #000; font-size: 15px;}