html,body {
margin:0;
padding:0;
border:0;
font-family:"SpoqaHanSansNeo";
overflow:hidden;
}
address,html,body,button,dl,dt,dd,div,em,fieldset,form,p,a,span,td,th,i {
margin:0;
padding:0;
border:0;
}
ol {
counter-reset: list-counter; /* 숫자 카운터 초기화 */
margin: 0 0 0 25px;
padding: 0;
}
ol li:not(:last-child) {
margin-bottom: 10px;
}
ol li {
counter-increment: list-counter; /* 각 항목마다 카운터 증가 */
position: relative;
}
ol li::marker {
color: white;
}
ol li::before {
content: counter(list-counter);
position: absolute;
background: black;
color: white;
border-radius: 50%;
width: 13px;
height: 13px;
left: -20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
top: 2px;
font-weight: bold;
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
.modal__container {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:#fff;
/* width:1000px;
height:750px; */
overflow:auto;
padding:30px;
}
.modal__close {
position:absolute;
top:10px;
right:16px;
width:30px;
height:30px;
color:#1b1b1b;
z-index:3;
}
.edit-icon {
display:inline-block;
width:20px;
height:20px;
vertical-align:middle;
background-repeat:no-repeat;
pointer-events:none;
}
.edit-icon.close {
width:30px;
height:30px;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%231b1b1b' stroke-width='24' stroke-linecap='round' stroke-linejoin='round' d='M368,368L144,144 M368,144 L144,368'/%3E%3C/svg%3E");
}
input,select,textarea,button {
font-family:"SpoqaHanSansNeo";
font-size:1.4rem;
font-weight:400;
margin:0;
border-width:0;
background:none;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
border-radius:0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.modal__header {
position:relative;
font-size:22px;
font-weight:700;
line-height:1.4;
text-align:center;
}
.modal__description {
font-size:14px;
font-weight:500;
line-height:1.6;
color:rgba(27,27,27,0.8);
margin:1.5rem 0 0;
height: 22px;
}
.modal__body {
padding:20px 0;
font-size:13px;
font-weight:400;
line-height:1.6;
color:rgba(27,27,27,0.6);
text-align:center;
}
.pic-selbox {
margin: 0 -20px;
}
.pic-selbox__container {
position:relative;
display:flex;
justify-content:center;
align-self:center;
width:100%;
/* min-height:360px; */
border:1px solid #e2e2e2;
overflow: hidden;
}
.pic-selbox__container canvas {
width:1000px;
max-width: 1000px;
height:570px;
}
.pic-selbox__tooltip {
position:absolute;
right: 10px;
top: 10px;
z-index:2;
}
.pic-selbox__container .output_canvas.active {
width: 100%;
height: auto;
}
.tooltip {
position:relative;
display:inline-block;
margin-left:5px;
vertical-align:middle;
}
.tooltip__title {
display:flex;
gap:5px;
font-size:13px;
font-weight:400;
line-height:1.4;
padding:5px 8px;
background-color:#e2e2e2;
border-radius:4px;
cursor:pointer;
}
.tooltip__text {
position:absolute;
top:calc(100%+5px);
right:0;
font-size:13px;
font-weight:400;
line-height:1.4;
width:254px;
visibility:hidden;
background-color:#fff;
border:1px solid #2081a4;
color:#1b1b1b;
text-align:left;
padding:10px;
border-radius:4px;
box-shadow:0 4px 10px rgba(27,27,27,0.1);
opacity:0;
transition:opacity 0.3s;
z-index:3;
}
.tooltip:hover .tooltip__text {
visibility:visible;
opacity:1;
}
.modal__footer {
display:flex;
flex-flow: wrap-reverse;
align-items:center;
justify-content:space-between;
gap: 2rem;
}
.modal__footer .btn {
color:#1b1b1b;
background-color:#ffffff;
padding:10px 20px;
display:inline-block;
text-decoration:none;
border-radius:4px;
font-size:14px;
font-weight:700;
line-height:1.4;
text-align:center;
border:1px solid #1b1b1b;
vertical-align:top;
cursor:pointer;
transition:background-color 0.2s,color 0.2s,border-color 0.2s;
white-space: nowrap;
}
.modal__footer .btn.btn--gray {
background-color:#9e9e9e;
border-color:#9e9e9e;
color:#ffffff;
}
.modal__footer .btn+.btn {
margin-left:0.5rem;
}
.modal__footer .btn-text-group {
display:flex;
flex-flow: wrap-reverse;
justify-content: right;
gap:20px;
}
.modal__footer .btn-text-group p:first-child {
font-size:16px;
line-height:1.2;
color:#1b1b1b;
margin-bottom:4px;
font-weight: bold;
}
.modal__footer .btn-text-group p {
font-size:13px;
line-height:1.3;
text-align: right;
color: rgba(0,0,0,0.5);
}
.text-white {
color: white;
}
.text-danger {
color: #f00000;
}
.text-primary {
color: #2081a4;
}
.bg-primary {
background: #2081a4;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
i.icon-circle {
display: inline-block;
width: 18px;
height: 18px;
background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>') no-repeat center;
background-size: contain;
filter: invert(1);
}
#facecut-error-message {
position: absolute;
align-content: center;
background: #00000005;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#facecut-error-message > .textbox {
align-self: center;
color: #1b1b1b;
width: 100%;
height: 100px;
max-width: 300px;
background: white;
align-content: center;
border-radius: 10px;
border: 1px solid #2081a4;
font-weight: bold;
font-size: 16px;
box-shadow: 0px 3px 10px -5px #1b1b1ba8;
margin: auto;
}
.modal__loading {
z-index: 999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-flow: column;
text-align: center;
align-items: center;
background: #2081a4;
color: white;
border-radius: 2rem;
min-width: 500px;
padding: 2em 0;
box-shadow: 5px 10px 18px -5px #000000;
}
.modal__loading img {
width: 100px;
}
.modal__loading .text {
white-space: pre;
}