@import url("https://fonts.googleapis.com/earlyaccess/notosanskr.css");

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Noto Sans KR", "Malgun Gothic";
    touch-action: manipulation;
}

button {
    color: black;
    cursor: pointer;
}

input:focus,
canvas:focus,
textarea:focus {
    outline: none;
}

.button-90-50-right-yellow {
    width: 90px;
    height: 50px;
    background-color: #fbbe18;
    border-radius: 0 5px 5px 0;
    font-size: 14px;
    color: white;
    border: none;
}

.button-90-50-right-white {
    width: 90px;
    height: 50px;
    background-color: white;
    border-radius: 0 5px 5px 0;
    font-size: 14px;
    color: #fbbe18;
    border: 1px solid #fbbe18;
}

.project-list, .shape-list {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, 135px); /* repeat(2, 1fr); /* 기본 2열 */
    gap: 30px 10px; /* 카드 사이 간격 */
    padding: 0;
}

/* 카드가 없을 때 스타일 */
.project-list:not(:has(.button-140-70-project)) {
    justify-content: start; /* 또는 원하는 스타일 */
    padding-left: 10%;
    /* 예: min-height, 안내문 표시 등 추가도 가능 */
}

.shape-list {
    gap: 10px 10px; /* 카드 사이 간격 */
}

.button-140-70-new {
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1 / 1.25;
    border: 3px solid #FFBE00;
    border-radius: 10px;
    background-color: white;
    font-size: 10px;
    color: #FFBE00;
    vertical-align: top;
}

.button-140-70-project {
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1 / 1.25;
    border: none;
    border-radius: 10px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
    background-color: white;
    cursor: pointer;
    vertical-align: top;
    display: inline-grid;
    grid-template-rows: 110px 30px auto;
    grid-template-columns: 100px auto;
}

.button-140 {
    width: 140px;
    height: 140px;
    border: none;
    border-radius: 10px;
    background-color: white;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}

.button-150-55-yellow {
    display: inline-block;
    width: 150px;
    height: 55px;
    background-color: #FFBE00;
    border-radius: 27px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    color: white;
}

.button-150-55-white {
    display: inline-block;
    width: 150px;
    height: 55px;
    background-color: white;
    border-radius: 27px;
    border: 1px solid #ffbe00;
    font-size: 16px;
    font-weight: bold;
    color: #ffbe00;
}

.button-160-44-yellow {
    width: 160px;
    height: 44px;
    border: none;
    border-radius: 40px;
    background-color: #FFBE00;
    color: white;
    font-size: 18px;
}

.button-160-44-gray {
    width: 160px;
    height: 44px;
    border: none;
    border-radius: 40px;
    background-color: #666666;
    color: white;
    font-size: 18px;
}

.button-215-50-ok {
    display: block;
    width: 215px;
    height: 50px;
    border: none;
    border-radius: 25px;
    background-color: #FFBE00;
    color: white;
    font-size: 16px;
    font-weight: bold;
}

.button-220-50-info {
    width: 220px;
    height: 50px;
    border: 1px solid #FFBE00;
    border-radius: 25px;
    font-size: 16px;
    background-color: white;
    cursor: default;
}

.button-255-60-yellow {
    width: 255px;
    height: 60px;
    background-color: #fbbe18;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.button-255-60-white {
    width: 255px;
    height: 60px;
    background-color: white;
    border: 1px solid #fbbe18;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #fbbe18;
}

.mode-container {
    position: absolute;
    top: 10px;
    left: calc(50% - 75px);
    height: 50px;
    background-color: white;
    display: flex;
}

.mode-button {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 5px;
    background-color: white;
    font-size: 16px;
    font-weight: bold;
    color: #999999;
    align-self: center;
    cursor: pointer;
}

.mode-button.active {
    background-color: #FFBE00;
    color: white;
    border: none;
    cursor: default;
}

.button-shadow {
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}

.input-200-50-left {
    width: 200px;
    height: 50px;
    border: 1px solid #ebebeb;
    border-radius: 5px 0 0 5px;
    font-size: 15px;
    color: black;
    padding: 0 15px;
}

.button-290-64 {
    display: block;
    height: 64px;
    width: 290px;
    background-color: #FFBE00;
    border-radius: 32px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    color: white;
}


.button-290-50 {
    display: block;
    height: 50px;
    width: 290px;
    background-color: #FFBE00;
    border-radius: 32px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    color: white;
}

.button-290-50.disabled {
    background-color: #bbbbbb;
}

.button-h25-option {
    height: 25px;
    border: 1px solid #999999;
    border-radius: 12px;
    padding: 0 15px 0 15px;
    background-color: white;
    color: #999999;
    font-size: 14px;
    cursor: pointer;
}

.button-h25-option.active {
    border: none;
    background-color: #FFBE00;
    color: white;
    cursor: default;
}

.button-h25-option.disabled {
    color: #eeeeee;
    border: 1px solid #eeeeee;
    cursor: default;
}

.box-8 {
    height: 8px;
    width: 8px;
    background-color: #EAEAEA;
    border-radius: 50%;
    display: inline-block;
}

.box-8.active {
    background-color: #FFBE00;
}

.box-25-step {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 1px solid #FFBE00;
    border-radius: 12px;
    text-align: center;
    color: #FFBE00;
    background-color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.box-25-step.active {
    color: white;
    background-color: #FFBE00;
    width: 80px;
    cursor: default;
}

.box-100p-55-category {
    display: flex;
    width: 100%;
    height: 50px;
    font-size: 18px;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
}

.box-100p-100p-blocker {
    width: 100%;
    height: 100%;
    background-color: #0000007F;
}

.box-100p-100p-highlight {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    border: 5px solid #FFBE00;
}

.box-w270-notification {
    width: 270px;
    background-color: #ffffffcc;
    border-radius: 10px;
    box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 16px;
}


.box-w100p-60-shadow {
    width: calc(100% - 60px);
    padding: 5px;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    border-radius: 0 0 5px 5px;
}

.box-h18-option {
    display: inline-block;
    height: 18px;
    border: 1px solid #BFBFBF;
    border-radius: 9px;
    padding: 0 9px 0 9px;
    color: #BFBFBF;
    font-size: 10px;
}

.box-h18-option.deprecated {
    background-color: #f4f4f4;
    color: #cccccc;
}

.box-h34-search {
    width: 100%;
    height: 34px;
    border: 1px solid #999999;
    border-radius: 5px;
    display: flex;
    padding-left: 20px;
}

.box-h40-item {
    display: flex;
    height: 40px;
    font-size: 18px;
    color: #565656;
}

.modal-w310 {
    position: absolute;
    top: calc(50% - 90px);
    left: calc(50% - 155px);
    width: 310px;
    text-align: center;
    font-size: 14px;
    color: #565656;
    background-color: white;
    border-radius: 15px;
}

.modal-button-estimation-ok {
    display: block;
    width: 100%;
    height: 55px;
    border-radius: 0 0 15px 15px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    background-color: #FFBE00;
    color: white;
}

.modal-button-yes {
    width: 50%;
    height: 55px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-bottom-right-radius: 15px;
    background-color: #FFBE00;
    color: white;
}

.modal-button-no {
    width: 50%;
    height: 55px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-bottom-left-radius: 15px;
    background-color: #EAEAEA;
    color: #666666;
}

.input-153-34-number {
    display: inline-block;
    width: 153px;
    height: 34px;
    border: none;
    border-radius: 15px;
    background-color: #FFBE0026;
    color: black;
    font-size: 12px;
    font-weight: bold;
    padding-left: 20px;
}

.input-160-34-number {
    display: inline-block;
    width: 160px;
    height: 34px;
    border: none;
    border-radius: 15px;
    background-color: #FFBE0026;
    color: black;
    font-size: 12px;
    font-weight: bold;
    padding-left: 20px;
}

.input-202-34-number {
    display: inline-block;
    width: 202px;
    height: 34px;
    border: none;
    border-radius: 15px;
    background-color: #FFBE0026;
    color: black;
    font-size: 12px;
    font-weight: bold;
    padding-left: 20px;
}

.input-210-40-title {
    width: 210px;
    height: 40px;
    border: 1px solid #999999;
    border-radius: 8px;
    padding-left: 10px;
    color: black;
}


.input-260-50-left {
    width: 260px;
    height: 50px;
    border: 1px solid #ebebeb;
    border-radius: 5px 0 0 5px;
    font-size: 15px;
    color: #cccccc;
    padding: 0 15px;
}

.input-290-50 {
    width: 290px;
    height: 50px;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    font-size: 15px;
    color: black;
    padding: 0 15px;
}

.textarea-100p-160 {
    display: block;
    width: 100%;
    height: 160px;
    resize: none;
    font-size: 14px;
    padding: 10px;
    border: 1px solid #ebebeb;
    border-radius: 5px;
}

.textarea-100p-160::placeholder {
    color: #cccccc;
}

/* Display */
.flex-start {
    display: flex;
    justify-content: flex-start;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.flex-center {
    display: flex;
    justify-content: center;
    justify-items: center;
}

.flex-fit {
    display: flex;
    justify-content: space-between;
}

.flex-column {
    flex-direction: column;
}

.none {
    display: none;
}

.block {
    display: block;
}

/* Position */
.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.fixed {
    position: fixed;
}

/* Size */
.max-size-35 {
    max-width: 35px;
    max-height: 35px;
}

.max-size-180 {
    max-width: 180px;
    max-height: 180px;
}

.size-22 {
    width: 22px;
    height: 22px;
}

.size-80 {
    width: 80px;
    height: 80px;
}

.size-100p {
    width: 100%;
    height: 100%;
}

.max-width-60 {
    max-width: 60px;
}

.width-20 {
    width: 20px;
}

.width-40 {
    width: 40px;
}

.width-50 {
    width: 50px;
}

.width-50p {
    width: 50%;
}

.width-60 {
    width: 60px;
}

.width-100p {
    width: 100%;
}

.width-100p-60 {
    width: calc(100% - 60px);
}

.width-210 {
    width: 210px;
}

.width-290 {
    width: 290px;
}

.width-300 {
    width: 300px;
}

.max-height-75 {
    max-height: 75px;
}

.min-height-100p {
    min-height: 100%;
}

.height-8 {
    height: 8px;
}

.height-28 {
    height: 28px;
}

.height-30 {
    height: 30px;
}

.height-35 {
    height: 35px;
}

.height-40 {
    height: 40px;
}

.height-75 {
    height: 75px;
}

.height-94 {
    height: 94px;
}

.height-100p {
    height: 100%;
}

.grow {
    flex-grow: 1;
}

.align-center {
    align-self: center;
}

.align-items-start {
    align-items: start;
}

.grid-1-1-1-2 {
    grid-area: 1 / 1 / span 1 / span 2;
}

.grid-2-1-1-1 {
    grid-area: 2 / 1 / span 1 / span 1;
}

.grid-3-1-1-1 {
    grid-area: 3 / 1 / span 1 / span 1;
}

.grid-2-2-2-1 {
    grid-area: 2 / 2 / span 2 / span 1;
}

/* Location */
.top-10 {
    top: 10px;
}

.top-12 {
    top: 12px;
}

.top-15 {
    top: 15px;
}

.top-25 {
    top: 25px;
}

.top-30 {
    top: 30px;
}

.top-40 {
    top: 40px;
}

.top-66 {
    top: 66px;
}

.top-80 {
    top: 80px;
}

.left-10 {
    left: 10px;
}

.left-30 {
    left: 30px;
}

.left-50p-35 {
    left: calc(50% - 35px);
}

.left-50p-60 {
    left: calc(50% - 60px);
}

.left-50p-108 {
    left: calc(50% - 108px);
}

.left-50p-110 {
    left: calc(50% - 110px);
}

.left-50p-135 {
    left: calc(50% - 135px);
}

.left-200 {
    left: 200px;
}

.right-0 {
    right: 0px;
}

.right-10 {
    right: 10px;
}

.right-20 {
    right: 20px;
}

.right-30 {
    right: 30px;
}

.right-100 {
    right: 100px;
}

.bottom-0 {
    bottom: 0px;
}

.bottom-10 {
    bottom: 10px;
}

.bottom-20 {
    bottom: 20px;
}

.bottom-20.lifted {
    bottom: 80px;
}

.bottom-70 {
    bottom: 70px;
}

/* Border */
.border-none {
    border: none;
}

.border-none-white {
    border: none;
    background-color: white;
}

.border-bottom-1 {
    border-bottom: 1px dotted gray;
}

.border-1-solid-ebebeb {
    border: 1px solid #ebebeb;
}

.radius-5 {
    border-radius: 5px;
}

.radius-l20 {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.radius-r20 {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Padding */
.padding-5 {
    padding: 5px;
}

.padding-20 {
    padding: 20px;
}

.padding-30 {
    padding: 30px;
}

.padding-40 {
    padding: 40px;
}

.padding-v10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.padding-v20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.padding-h10 {
    padding-left: 10px;
    padding-right: 10px;
}

.padding-l10 {
    padding-left: 10px;
}

.padding-b10 {
    padding-bottom: 10px;
}

/* Margin */
.margin-auto {
    margin: auto;
}

.margin-v10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.margin-h3 {
    margin-left: 3px;
    margin-right: 3px;
}

.margin-h5 {
    margin-left: 5px;
    margin-right: 5px;
}

.margin-h10 {
    margin-left: 10px;
    margin-right: 10px;
}

.margin-t5 {
    margin-top: 5px;
}

.margin-t10 {
    margin-top: 10px;
}

.margin-t14 {
    margin-top: 14px;
}

.margin-t16 {
    margin-top: 16px;
}

.margin-t20 {
    margin-top: 20px;
}

.margin-t25 {
    margin-top: 25px;
}

.margin-t30 {
    margin-top: 30px;
}

.margin-t40 {
    margin-top: 40px;
}

.margin-t50 {
    margin-top: 50px;
}

.margin-t80 {
    margin-top: 80px;
}

.margin-l10 {
    margin-left: 10px;
}

.margin-l20 {
    margin-left: 20px;
}

.margin-l30 {
    margin-left: 30px;
}

.margin-r5 {
    margin-right: 5px;
}

.margin-r10 {
    margin-right: 10px;
}

.margin-r15 {
    margin-right: 15px;
}

.margin-b10 {
    margin-bottom: 10px;
}

.margin-b15 {
    margin-bottom: 15px;
}

.margin-b30 {
    margin-bottom: 30px;
}

.overflow-y {
    overflow-y: auto;
}

/* Font */
.font-10 {
    font-size: 10px;
}

.font-12 {
    font-size: 12px;
}

.font-14 {
    font-size: 14px;
}

.font-15 {
    font-size: 15px;
}

.font-17 {
    font-size: 17px;
}

.font-18 {
    font-size: 18px;
}

.font-20 {
    font-size: 20px;
}

.font-22 {
    font-size: 22px;
}

.font-normal {
    font-weight: normal;
}

.bold {
    font-weight: bold;
}

.font-w500 {
    font-weight: 500;
}

.font-w700 {
    font-weight: 700;
}

.text-center {
    text-align: center;
}

.vertical-middle {
    vertical-align: middle;
}

.line-height-35 {
    line-height: 35px;
}

.break-word {
    word-wrap: break-word;
}

/* Color */
.color-black {
    color: black;
}

.color-white {
    color: white;
}

.color-333333 {
    color: #333333;
}

.color-333333.placeholder {
    color: #cccccc;
}

.color-424ed7 {
    color: #424ed7;
}

.color-444444 {
    color: #444444;
}

.color-565656 {
    color: #565656;
}

.color-565656.deprecated {
    color: #bbbbbb;
}

.color-666666 {
    color: #666666;
}

.color-999999 {
    color: #999999;
}

.color-bbbbbb {
    color: #bbbbbb;
}

.color-c4c4c4 {
    color: #c4c4cc;
}

.color-c4c4c4.active {
    color: #ffbe00;
}

.color-ffbe00 {
    color: #ffbe00;
}

.background-white {
    background-color: white;
}

.background-cccccc {
    background-color: #cccccc;
}

.background-eaeaea {
    background-color: #eaeaea;
}

.background-eeeeee {
    background-color: #eeeeee;
}

.background-ffbe00 {
    background-color: #ffbe00;
}

.background-fff5d9 {
    background-color: #fff5d9;
}

.pointer {
    cursor: pointer;
}

.z-1 {
    z-index: 1;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.popup-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-wrap .popup {
    background: #fff;
    padding: 24px;
    width: 420px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-family: 'Noto Sans KR', sans-serif;
}

.popup-wrap .popup h2 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
}

.popup-wrap .popup .desc {
    font-size: 14px;
    margin: 12px 0;
}

.popup-wrap .popup .version {
    font-weight: 400;
    margin-bottom: 10px;
}

.popup-wrap .popup .popup-scroll-area {
    max-height: 280px;       /* 원하는 높이로 설정 (예: 60vh 도 가능) */
    overflow-y: auto;
    margin-bottom: 16px;
    padding-right: 10px;     /* 스크롤바 여유 */
    /*border: 1px solid #ddd;  !* 선택: 구분선 *!*/
}
.popup-wrap .popup .update-list {
    padding-left: 20px;
    margin: 0 0 20px;
}

.popup-wrap .popup .update-list li {
    font-size: 12px;
    margin-bottom: 6px;
}

.popup-wrap .popup .update-list li strong {
    color: #ff0000;
}

.popup-wrap .popup label {
    font-size: 16px;
    display: block;
    margin-bottom: 16px;
}

.popup-wrap .popup .confirm-btn {
    background: #ffcc00;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    border-radius: 6px;
}

.popup-wrap .popup .popup-close {
    position: absolute;
    right: 10px;
    top: 10px;
    border: none;
    background: none;
    font-size: 18px;
    cursor: pointer;
}

/* 모바일 반응형 (최대 480px까지 적용) */
@media screen and (max-width: 480px) {
    .popup-wrap .popup {
        width: 90%;       /* 화면의 90% */
        padding: 16px;
    }

    .popup-wrap .popup h2 {
        font-size: 18px;
    }

    .popup-wrap .popup .desc,
    .popup-wrap .popup .update-list li,
    .popup-wrap .popup label {
        font-size: 13px;
    }

    .popup-wrap .popup .confirm-btn {
        font-size: 14px;
    }
}

.custom-check {
    font-size: 16px;
    margin: 10px 0 10px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.custom-check input[type="checkbox"] {
    margin-top: 3px;
    accent-color: #FFB400;
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: inline-block;
    opacity: 1;
    appearance: auto;
}

.custom-check label {
    flex: 1;
    font-size: 1em;
    font-weight: 400;
}

.custom-check .blue-link {
    color: #FFB400;
    margin-left: 4px;
    font-size: 0.97em;
    font-weight: 500;
}

@media (max-width: 400px) {
    .custom-check {
        font-size: 0.92em;
    }

    .custom-check .blue-link {
        font-size: 0.92em;
    }
}