@media only screen and (min-width: 1025px) {

    /* index 1,2,3 */

    p {
        font-family: 'Noto Sans KR', sans-serif;
    }
    html, body {
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans KR', sans-serif;
        width: 100%;
        text-align: center;
        height: 100%;
        overflow: hidden;
    }
    body { display: inline-block; /* 수평 가운데 정렬을 위해 인라인 블록 요소로 설정 */ }
    button:focus {
        outline: none !important;
    }
    #wrapper1{ min-height: 70vw; position: relative; width: 100%; }
    #wrapper2{ width: 95%; height: auto; min-height: 85vh; padding-bottom: 0; margin-left: 2.5%; }
    .section1 {
        padding-bottom: 3.1vw;
    }
    .section2 {
        height: calc(88.1vh - 6.5vw); /* 또는 적당한 높이 */
        overflow-y: auto;
        scroll-behavior: smooth;
        padding-bottom: 0;
        
    }
    .footer1{
        display: none;
    }
    .footer2{
        position: fixed;
        bottom: 0;
        width: 100%;
        padding-top: 2vw;
        padding-bottom: 1vw;
        /* height: 6.5vw; */
        /* transform: translateY(-100%); */
        text-align: center;
        background-color: white;
        box-shadow: 0 -0.1vw 0.3vw rgba(190, 190, 190, 0.5);
    }
    #foot-a{ display: none; }
    .foot-a-margin1 { margin-right: 1vw; }
    .foot-a-margin2 { margin-top: 0.2vw; }
    .index2_container {
        display: flex;
        justify-content: center;
        align-content: center;
        margin: 1.5vw 22vw 0;
        height: 3vw;
    }
    .index2_item:nth-child(1) { width: 30vw; text-align: left; overflow: hidden; }
    .index2_item:nth-child(2) { width: 40vw; text-align: center; }
    .index2_item:nth-child(3) { width: 30vw; text-align: right; }
    .index2-followbox { display: flex; justify-content: end; }
    .index2-followicon { font-size: 0.7vw; margin-left: 0.7vw; margin-top: -0.4vw; }
    .index2-follow-line { width: 0.6vw; }
    .index-follow-number { 
        font-size: 2vw;
        margin-top: -0.7vw;
    }
    .index2_container2 {
        display: flex;
        justify-content: center;
        align-content: center;
        margin: 0 22vw;
        height: 4vw;
    }
    .index2_item2:nth-child(1) { width: 60vw; text-align: left; overflow: hidden; }
    .index2_item2:nth-child(2) { width: 25vw; text-align: right; }
    .index-myshelfie_logo { height:2vw; }
    #profile_img1 {
        border: 0.3vh solid black;
        border-radius: 1vw;
        width: 2vw; height: 2vw;
    }
    #profile_img2 {
        border: 0.05vw solid black;
        border-radius: 1vw;
        width: 2vw; height: 2vw;
    }
    #profile_img-top {
        border: 0.12vw solid rgb(170, 170, 170);
        border-radius: 2vw;
        width: 3vw; height: 3vw;
    }
    .index-star { height:1.7vw; margin-right: 0.3vw; margin-bottom: 1.1vw; }
    .index-bell { height:1.5vw; margin-right: 0.3vw; margin-bottom: 0.9vw; }
    .index-setting-icon { height:1vw; margin-top: 0.3vw; margin-bottom: 1.1vw; }
    .index-follow-text { display: inline; font-size: 0.8vw; }
    .index-modal-close { width: 0.75vw; }
    .index-modal-div { margin-top: 0.6vw; text-align: center; }
    .index-modal-div_scroll {
        height: 35vh; /* 최대 높이 설정 */
        padding-bottom: 2vw;
        overflow-y: auto; /* 세로 스크롤바 표시 */
        scrollbar-width: none; /* 스크롤바 숨기기 */
        -ms-overflow-style: none; /* IE11에서 스크롤바 숨기기 */
    }
    .index-modal-div_scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .index-modal-hr { border: 0.02vw solid rgb(220, 220, 220); width:87%; margin-top: 0.7vw; margin-bottom: 0.7vw; }
    .nick_container {
        display: flex;
        justify-content: center;
        align-content: center;
    }
    .nickname {
        font-family: 'Noto Sans KR', sans-serif;
        font-weight:600;
        /* width: 100%; */
        color: black;
        font-size: 2vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }
    .follow {
        font-weight: 500;
        background-color: white;
        border: 0.15vw solid black;
        padding: 0.2vw 0.55vw;
        border-radius: 0.9vw;
        height: 1.8vw;
        color: black;
        font-size: 0.65vw;
        margin-top: 0.3vw;
    }
    .no-follow { height: 2.8vw; }
    .foot_container {
        display: flex;
        flex-wrap: wrap;
        margin: 0 34vw 1vw;
        align-items: center;
        justify-content: space-between;
    }
    .foot-item-height { height:1.7vw; }
    .vertical-line {
        margin-right: 0.5vw;
    }
    .setting_text {
        text-decoration: none !important; color: black !important; font-size: 0.65vw;
        text-align: center; line-height: 1.6vw;
    }
    .truncate {
        overflow: hidden; /* 내용 초과시 숨김 */
        text-overflow: ellipsis; /* 생략 부호 (...) 표시 */
        width: 100%;
    }
    .next-button { padding: 1.5vw 0; display: flex; align-items: center; justify-content: center; }
    .privacy-lock-icon { height: 1.4vw; margin-left: 0.6vw; }

    /* 모달 */
    .modal_overlay {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(0.07vw);
        -webkit-backdrop-filter: blur(0.07vw);
        z-index: 2;
    }
    .subs_overlay {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(0.07vw);
        -webkit-backdrop-filter: blur(0.07vw);
        z-index: 2;
    }
    .modal_window {
        background: white;
        backdrop-filter: blur(0.7vw);
        -webkit-backdrop-filter: blur(0.7vw);
        border-radius: 0.25vw;
        border: 0.05vw solid rgba(255, 255, 255, 0.18);
        width: 8vw;
        height: 9.5vw;
        margin-bottom: 2.5vw;
        padding: 0;
    }
    .modal_title{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-weight: bold;
        font-size: 1vw;
    }
    .modal_title_side{
        flex: 0 0 2vw;
        text-align: center;
    }
    .setting_modal_window {
        background: white;
        backdrop-filter: blur(0.7vw);
        -webkit-backdrop-filter: blur(0.7vw);
        border-radius: 0.25vw;
        border: 0.05vw solid rgba(255, 255, 255, 0.18);
        width: 15vw;
        height: 40vh;
        /* position: relative; */
        /* margin-bottom: 2vw; */
        padding: 0;
    }
    .followmodal {
        width:17vw;
        overflow-y: scroll; height: 25vw;
        -ms-overflow-style: none; /* 인터넷 익스플로러 */
        scrollbar-width: none; /* 파이어폭스 */
    }
    .followmodal::-webkit-scrollbar {
        display: none; /* 크롬, 사파리, 오페라, 엣지 */
    }

    /* 로그인 & main */

    .index1-box {
        display: flex;
        align-items: center; justify-content: center;
        height: 100vh;
    }
    .main_logo { 
        height: 6vw;
        margin-bottom: 5vw;
    }
    .main-text {
        font-size: 0.8vw;
        margin-top: 1vw;
    }
    .fin_logo_margin1 { 
        height: 7vw;
        margin-bottom: 25vh;
    }
    .fin_body_margin {
        font-size: 1vw; 
        color: black;
        margin-top: 15vh;
        margin-bottom: 4vh;
        font-family: 'Noto Serif KR Medium', serif !important;
        font-weight:500;
    }
    .fin_ffzlogo { 
        height: 4vw;
    }
    
    .logo_login { 
        height: 4.5vw;
        margin-bottom: 4vw;
    }
    .login_boxarea {
        display: flex; justify-content: center; /* 가로 정렬 */
    }
    .loginbox {
        width: 18vw;
        border: 0.1vw solid black;
        border-radius: 0.5vw;
    }
    .input1 { 
        text-align: left;
        width: 17.5vw; height: 1.5vw; 
        margin: 0.25vw;
        font-size: 0.65vw;
        letter-spacing: 0.1vw;
        border: none;
        outline: none !important;
        box-shadow: none !important;
    }
    .input1::placeholder{
        color:rgb(190, 190, 190);
    }
    .phone-div { display: grid; grid-template-columns: 14vw 3.5vw; }
    .input1-phonenumber { 
        text-align: left;
        width: 13.5vw; height: 1.5vw; 
        margin: 0.25vw;
        font-size: 0.65vw;
        letter-spacing: 0.1vw;
        border: none;
        outline: none !important;
        box-shadow: none !important;
    }
    .input1-phonenumber::placeholder{
        color:rgb(190, 190, 190);
    }
    .input1-birth { 
        text-align: left;
        width: 15.5vw; height: 1.5vw; 
        margin: 0.25vw;
        font-size: 0.65vw;
        letter-spacing: 0.1vw;
        border: none;
        outline: none !important;
        box-shadow: none !important;
        display: grid;
        grid-template-columns: 4vw 3vw 1.5vw 2vw 1.5vw 2vw 1.5vw;
    }
    .input1-birth::placeholder{
        color:rgb(190, 190, 190);
    }
    .phone-auth { 
        background-color: black; color: white; border: none !important; 
        font-size: 0.65vw;
        border-radius: 0.25vw;
        height: 1.8vw;
        margin-top: 0.2vw;
    }
    /* 자동완성 박스 색상 */
    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset; /* 백그라운드를 흰색으로 변경 */
        color: inherit; /* 텍스트 색상 유지 */
    }
    .remember {
        width: 6.9vw; height: 1.5vw;
        text-align: left;
        color:rgb(190, 190, 190);
        margin-top: 0.5vw;
    }
    .remember-text {
        font-size: 0.6vw; margin-left: 0.2vw;
    }
    .remember-input {
        width: 0.7vw; height: 0.7vw;
    }
    .remember-box {
        margin-top: 0.1vw;
        /* border: solid 1vw rgb(55,55,55) !important;
        border-radius: 1vw !important; */
    }
    .login_link1 { 
        background-color: transparent; 
        border: none;
        padding: 0;
        text-decoration: none;
        font-size: 0.75vw;
        color: black;
        margin-top: 2vw;
    }
    .login_link2 { 
        background-color: transparent; 
        border: none;
        padding: 0;
        text-decoration: none;
        font-size: 0.75vw;
        color: black;
        margin-top: 0.7vw;
    }
    .login_link3 { 
        text-decoration: none;
        color: inherit;
        font-size: 0.75vw; color: rgb(190, 190, 190);
        margin-top: 0.7vw;
    }
    .login-error-message {
        color: red;
        position: absolute;
        font-size: 0.5vw;
        width: 18vw;
    }

    /* 회원가입 */
    
    .register_boxarea {
        display: flex;
        justify-content: center; /* 가로 정렬 */
        margin-bottom: 1vw;
    }
    .register_pw_boxarea {
        margin-bottom: 4vw;
        display: flex;
        justify-content: center; /* 가로 정렬 */
    }
    .register_box {
        width: 18vw;
        border: 0.1vw solid black;
        border-radius: 0.5vw;
    }
    .register_link1 { 
        text-decoration: none; color: inherit; font-size: 0.7vw; color: black;
    }
    .register_button1 { margin-left: 3vw; background-color: white; border:0; color: black; }
    .line-hr { border: 0.03vw solid rgb(190, 190, 190); margin: 0 0.5vw; }
    .register-error-message {
        color: red;
        font-size: 0.5vw;
        margin-bottom: 0.25vw;
    }
    .register-success-message {
        color: green;
        font-size: 0.5vw;
        margin-bottom: 0.25vw;
    }
    .verify-input1 { 
        text-align: left;
        height: 1.5vw; 
        margin: 0.25vw;
        font-size: 0.65vw;
        letter-spacing: 0.1vw;
        border: none;
        outline: none !important;
        box-shadow: none !important;
    }
    .verify-input1::placeholder{
        color:rgb(190, 190, 190);
    }
    .verify-auth-grid {
        display: grid;
        grid-template-columns: 14.2vw 2.7vw;
        padding-left: 0.55vw;
    }
    .register-reset-margin { height: 6vw; }

    /* 프로필 */

    .p1 { color:rgb(190, 190, 190); font-size: 0.7vw; margin-bottom: 2vw; }
    .picbutton_img {
        width:8vw; height: 8vw;
        border: solid 0.1vw black;
        border-radius: 0.5vw;
        background-size: 3vw;
        background-repeat: no-repeat;
        background-position: center center;
        cursor: pointer;
        margin-bottom: 4.5vw;
    }
    input[type="file"] {
        display: none;
    }
    .profile_link1 { 
        text-decoration: none !important;
        color: rgb(190, 190, 190) !important;
        font-size: 0.7vw;
        margin-right: 2vw;
    }
    .profile-button1 { background-color: white; font-size: 0.7vw; padding: 0; border:0; color: black; font-family: 'Noto Sans KR', sans-serif; }
    .profile-container { position: absolute; top: -1.7vw; }
    .profile-img { width: 9vw; max-width: 9vw; max-height: 9vw; border-radius: 0.5vw; }
    .profile-modal { width: 25vw; max-width: 100%; }
    .profile-modalimg-container { max-width: 100%; max-height: 28vw; margin: 0 auto; overflow: hidden; display: flex; justify-content: center; align-items: center; }
    .profile-modalimg { width: auto; max-height:28vw; }

    .modal-header {
        height: 2vw;
        padding: 0.5vw; /* Header의 위 아래 padding을 조절해서 높이를 조절합니다. */
    }
    .modal-header .close {
        font-size: 0.7vw; /* X 아이콘의 크기를 조절합니다. */
    }
    .modal-footer {
        height: 3.5vw;
        padding: 0;
    }
    .custom-button {
        background-color: white; color: black;
        font-size: 0.7vw;
        padding: 0;
    }

    /* myshelf.html */

    .my_container {
        padding: 1vw 0 1.6vw;
        display: grid;
        grid-template-columns: 12.3vw 12.3vw 12.3vw 12.3vw;
        grid-gap: 1.2vw 0.6vw;
        place-content: start center;
        margin-top: 2vw;
    }
    .inbox_top {
        display: grid;
        grid-template-columns: 0.7vw 10.3vw 1.3vw;
        height: 1vw;
        margin: 0.15vw 0.15vw 0.1vw 0.35vw;
    }
    .inbox_top_subslist {
        display: grid;
        grid-template-columns: 0.7vw 3.3vw 7.7vw;
        height: 1vw;
        margin: 0.15vw 0.15vw 0.1vw 0.35vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .inbox_top_item-1 { text-align: left; color: black; }
    .inbox_top_item-2 { text-align: left; color: black; opacity: 0.5; font-size: 0.6vw; }
    .inbox_top_item-3 { text-align: right; font-size: 0.8vw; color: black; }
    .lock { height: 0.7vw; margin-top: 0.15vw; }
    .pagebutton {
        text-decoration: none !important; color: black !important; padding: 0 1vw; font-size: 0.7vw;
    }
    .sub_scroll {
        height: 22.5vw; /* 최대 높이 설정 */
        overflow-y: auto; /* 세로 스크롤바 표시 */
        scrollbar-width: none; /* 스크롤바 숨기기 */
        -ms-overflow-style: none; /* IE11에서 스크롤바 숨기기 */
    }
    .sub_scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .ul-style {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: left;
        font-size: 0.6vw;
        color: black;
    }
    .like-profile {
        height: 1.3vw;
        border-radius: 0.65vw;
        border: solid 0.08vw rgba(0, 0, 0, 0.2);
    }
    .like-display {
        display: grid;
        grid-template-columns: 1.2vw auto;
        grid-gap: 0.5vw 0.5vw;
        margin: 0vw 0;
        padding: 0 0.25vw;
        height: 1.2vw;
    }
    .like-username { font-size:0.7vw; margin-top:0.15vw; }
    .like-hr { border:solid 0.03vw rgb(220, 220, 220); width:97%; margin-top:0.4vw; margin-bottom:0.5vw; }
    .like-more-arrow { height: 0.5vw; padding-bottom: 0.15vw; margin-left: 0.35vw; }
    .link {
        text-decoration: none !important;
        color: black !important;
    }
    .my_scroll {
        overflow-y: scroll;
        padding-bottom: 10vh;
        -ms-overflow-style: none; /* 인터넷 익스플로러 */
        scrollbar-width: none; /* 파이어폭스 */
        height: calc(88.1vh - 6.5vw);
        /* min-height: calc(88.1vh - 6.5vw); */
        /* height: auto; */
    }
    .my_scroll::-webkit-scrollbar {
        display: none; /* 크롬, 사파리, 오페라, 엣지 */
    }
    .my_subs {
        width: 0.5vw;
        background-repeat : no-repeat;
        background-size: 0.5vw;
        background-position: center center;
        border: none;
        background-color: transparent; padding: 0;
        outline: none !important;
        cursor: pointer;
    }
    .my_dis_subs {
        width: 0.5vw;
        background-repeat : no-repeat;
        background-size: 0.5vw;
        background-position: center center;
        border: none;
        opacity: 0.5;
        background-color: transparent; padding: 0;
        outline: none !important;
        cursor: pointer;
    }
    .like_c {
        margin-left: -0.4vw;
        width: 1vw;
        background-repeat : no-repeat;
        background-size: 0.7vw;
        background-position: center center;
        border: none;
        background-color: transparent;
    }
    .like_u {
        margin-left: -0.4vw;
        width: 1vw;
        background-repeat : no-repeat;
        background-size: 0.7vw;
        background-position: center center;
        border: none;
        background-color: transparent;
    }
    .closed-div { height:60vh; font-size: 0.8vw; color: rgb(190, 190, 190); }

    /* book */
    /* book */
    /* book */

    .inbox1 {
        border: 0;
        position: relative;
        width: 20vw; height: 28.378vw; /* 148x210 */
        box-shadow: 0 0 0.3vw rgba(0, 0, 0, 0.2);
        margin-top: 0.3vw;
        margin-bottom: 0.5vw;
        border-radius: 0.3vw;
    }
    .like_scroll {
        height: 22.5vw; /* 최대 높이 설정 */
        overflow-y: auto; /* 세로 스크롤바 표시 */
        scrollbar-width: none; /* 스크롤바 숨기기 */
        -ms-overflow-style: none; /* IE11에서 스크롤바 숨기기 */
    }
    .like_scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .comment_scroll {
        height: 22.5vw; /* 최대 높이 설정 */
        overflow-y: auto; /* 세로 스크롤바 표시 */
        scrollbar-width: none; /* 스크롤바 숨기기 */
        -ms-overflow-style: none; /* IE11에서 스크롤바 숨기기 */
    }
    .comment_scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .ul-style {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: left;
        font-size: 0.6vw;
        color: black;
    }
    .re-ul-style {
        list-style: none;
        padding: 0;
        margin: 0 0 0 2vw;
        text-align: left;
        font-size: 0.6vw;
        color: black;
    }
    .comment-profile {
        height: 1.5vw;
        border-radius: 0.75vw;
        margin-bottom: -0.3vw;
    }
    .comment-display {
        display: grid;
        grid-template-columns: 2vw 10.2vw 6vw;
        grid-gap: 0.5vw 0vw;
        margin: 0.5vw 0;
    }
    .comment-display > :last-child {
        justify-self: end;
    }
    .submitComment {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 0.6vw;
        padding: 0.15vw 0.3vw;
    }
    .deleteComment {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 0.6vw;
        padding: 0.15vw 0.3vw;
    }
    .comment-more-button {
        font-size: 0.6vw;
        width: 17.5vw;
        outline: none !important;
        background-color: inherit;
        color: black;
        border: none;
    }
    .comment-more-arrow { height: 0.5vw; padding-bottom: 0.15vw; margin-left: 0.35vw; }
    .form-group {
        display: grid;
        grid-template-columns: 2vw 14.5vw 2vw;
    }
    .form-group textarea.form-control {
        border: 0.12vw solid black;
        outline: none !important;
        box-shadow: none;
        /* height: 1.8vw; */
    }
    .summary {
        color: black;
        opacity: 0.5;
        font-size: 0.5vw;
        margin-left: 2vw;
    }
    .deleteComment{ outline:none; opacity:0.3; margin-top:-0.6vw; }
    .reportComment { background-color: inherit; border: none; outline:none !important; opacity:0.2; margin-top:-0.6vw; }
    .report-icon { height: 0.65vw; }
    .comment-date { margin-left: 0.5vw; }
    .recomment-display {
        display: grid;
        grid-template-columns: 1.5vw 10.4vw 3vw;
        grid-gap: 0.5vw 0.5vw;
        margin: 0.5vw 0;
    }
    .recomment-display > :last-child {
        justify-self: end;
    }
    .replies-container {
        margin-top: -0.35vw;
    }
    .replies-form {
        display: grid;
        grid-template-columns: 15.5vw 2.4vw;
    }
    .replies-form > :last-child {
        justify-self: end;
    }
    .replies-textarea {
        border: 0.12vw solid black;
        padding-left: 0.5vw; padding-top: 0.3vw;
        outline: none !important;
        box-shadow: none;
        margin-top: 0.5vw; margin-left: 2vw;
        border-radius: 0.15vw;
        color: black;
        font-size: 0.6vw
    }
    .submit-recomment-btn {
        margin-top: 0.5vw;
        padding: 0;
        background-color: inherit;
        color: black;
        border: none;
        font-size: 0.6vw;
        outline:none;
    }
    .rebody-grid {
        grid-template-columns: auto 2vw;
    }
    .deleteRecomment {
        opacity:0.3; margin-top:-0.6vw; margin-left:0.2vw;
    }
    .reportReComment { background-color: inherit; border: none; outline:none !important; opacity:0.2; margin-top:-0.6vw; }
    .cof_container {
        display: grid;
        padding-bottom: 1vw;
        place-content: space-between center;
        height: calc(88.1vh - 6.5vw);
        margin-bottom: 1.5vw;
    }
    .cof_flex-container {
        display: flex;
        margin: 1.2vw 4.5vw 1.5vw;
        align-items: center;
        justify-content: center;
    }
    .cof_item:nth-child(1) {
        font-size: 0.7vw; text-align: left; color: black; opacity: 0.5; width: 30vw;
        overflow: hidden;           /* 넘치는 텍스트를 숨깁니다. */
        text-overflow: ellipsis;    /* 넘치는 텍스트를 '...'로 표시합니다. */
        white-space: nowrap;  
    }
    .cof_item:nth-child(2) { font-size: 0.7vw; text-align: right; width: 17vw; }
    .cof_item:nth-child(3) { text-align: right; width: 4vw; }
    .cof_button1 {
        font-size: 0.7vw;
        padding: 0;
        background-color: inherit;
        border: 0;
        text-decoration: none; 
        color: black; 
    }

    /* 색상 선택 */
    .color-grid {
        display: grid;
        grid-template-columns: repeat(5, 1.2vw);
        grid-gap: 0.3vw;
    }
    .color-option {
        width: 1.2vw;
        height: 1.2vw;
        border-radius: 1vw;
        cursor: pointer;
    }
    .color-option.selected {
        border-color: rgb(60, 135, 130); /* 선택된 색상의 테두리 스타일 */
        border-radius: 1vw;
    }
    .color-selected {
        /* 선택된 경우의 스타일 */
        border: 0.15vw solid rgb(60, 135, 130);
        border-radius: 1vw;
    }
    .cof-palette-box {
        background-color: white;
        border-radius: 0.4vw;
        display: grid;
        text-align: center;
        justify-content: center;
        box-shadow: 0 0 0.3vw rgba(0, 0, 0, 0.2);
        height: 23vw;
        overflow-y: auto; /* 세로 스크롤바 표시 */
        scrollbar-width: none; /* 스크롤바 숨기기 */
        -ms-overflow-style: none; /* IE11에서 스크롤바 숨기기 */
    }
    .cof-palette-box::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .inf-palette-box {
        background-color: white;
        border-radius: 0.4vw;
        display: grid;
        text-align: center;
        justify-content: center;
        box-shadow: 0 0 0.3vw rgba(0, 0, 0, 0.2);
        height: 23vw;
        overflow-y: auto; /* 세로 스크롤바 표시 */
        scrollbar-width: none; /* 스크롤바 숨기기 */
        -ms-overflow-style: none; /* IE11에서 스크롤바 숨기기 */
    }
    .inf-palette-box::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .choice-inner-grid-box {padding-top: 2vw;}
    .cover-privacy-text { font-size: 0.6vw; color: rgb(190, 190, 190); padding-top: 1.5vw; }
    .cover-font-choice { font-size: 0.6vw; color: rgb(190, 190, 190); }
    .cover-privacy-box { padding: 0.5vw 0 1vw; }
    .cover-textcolor-text { font-size: 0.6vw; color: rgb(190, 190, 190); padding-top: 1.5vw; margin-bottom: 0.5vw; }
    .inner-textcolor-text { font-size: 0.6vw; color: rgb(190, 190, 190); padding-top: 1.5vw; margin-bottom: 0.5vw; }
    .bgcolor-text { font-size: 0.6vw; color: rgb(190, 190, 190); padding-top: 1.2vw; margin-bottom: 0.5vw; }

    .basic-red-color { background-color: rgb(200, 30, 50); }
    .basic-pink-color { background-color: rgb(230, 100, 170); }
    .basic-yellow-color { background-color: rgb(255, 210, 50); }
    .basic-green-color { background-color: rgb(0, 165, 0); }
    .basic-mint-color { background-color: rgb(60, 200, 170); }
    .basic-blue-color { background-color: rgb(0, 90, 80); }
    .basic-navy-color { background-color: rgb(0, 40, 80); }
    .basic-purple-color { background-color: rgb(110, 50, 160); }
    .basic-ashbrown-color { background-color: rgb(180, 160, 120); }
    .basic-sephia-color { background-color: rgb(120, 60, 60); }
    .basic-orange-color { background-color: rgb(240, 100, 40); }
    .basic-skyblue-color { background-color: rgb(130, 200, 255); }
    .basic-beige-color { background-color: rgb(240, 220, 176); }
    .basic-lightmint-color { background-color: rgb(180, 230, 210); }
    .basic-lightpurple-color { background-color: rgb(180, 160, 210); }
    .basic-darkgreen-color { background-color: rgb(0, 75, 0); }
    .basic-magenta-color { background-color: rgb(210, 50, 130); }
    .basic-lightbrown-color { background-color: rgb(200, 145, 80); }
    .basic-white-color { background-color: rgb(255, 255, 255); }
    .basic-black-color { background-color: rgb(0, 0, 0); }

    .basic-text-red-color { color: rgb(200, 30, 50); }
    .basic-text-pink-color { color: rgb(230, 100, 170); }
    .basic-text-yellow-color { color: rgb(255, 210, 50); }
    .basic-text-green-color { color: rgb(0, 165, 0); }
    .basic-text-mint-color { color: rgb(60, 200, 170); }
    .basic-text-blue-color { color: rgb(0, 90, 80); }
    .basic-text-navy-color { color: rgb(0, 40, 80); }
    .basic-text-purple-color { color: rgb(110, 50, 160); }
    .basic-text-ashbrown-color { color: rgb(180, 160, 120); }
    .basic-text-sephia-color { color: rgb(120, 60, 60); }
    .basic-text-orange-color { color: rgb(240, 100, 40); }
    .basic-text-skyblue-color { color: rgb(130, 200, 255); }
    .basic-text-beige-color { color: rgb(240, 220, 176); }
    .basic-text-lightmint-color { color: rgb(180, 230, 210); }
    .basic-text-lightpurple-color { color: rgb(180, 160, 210); }
    .basic-text-darkgreen-color { color: rgb(0, 75, 0); }
    .basic-text-magenta-color { color: rgb(210, 50, 130); }
    .basic-text-lightbrown-color { color: rgb(200, 145, 80); }
    .basic-text-white-color { color: rgb(255, 255, 255); }
    .basic-text-black-color { color: rgb(0, 0, 0); }
    
    /* 신고 */
    .report-title {
        font-size: 0.6vw;
        color: black;
        opacity: 0.8;
        margin-bottom: 1vw;
    }
    .report-modal-width { outline:none; width: 18vw !important; height: 13.8vw !important; }
    .report-modal-title {height: 2vw;}
    .report-modal-closebutton { width: 0.7vw; }
    .report-modal-icon { height: 0.65vw; margin-right: 0.2vw; }
    .report-body textarea.form-control {
        font-size: 0.6vw !important; margin-bottom: 1vw;
        width: 14.5vw;
        height: 5.5vw;
        resize: none;
        border: 0.12vw solid red;
        outline: none !important;
        box-shadow: none;
        /* margin-bottom: 1vw; */
    }
    .report-success {
        font-size: 0.6vw;
        color: red;
    }
    .submit-report {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 0.6vw;
        padding: 0.15vw 0.3vw;
        outline: none !important;
        box-shadow: none;
    }
    .submitInnerreport {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 0.6vw;
        padding: 0.15vw 0.3vw;
        outline: none !important;
        box-shadow: none;
    }
    .submitCommentreport {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 0.6vw;
        padding: 0.15vw 0.3vw;
        outline: none !important;
        box-shadow: none;
    }
    .submitReCommentreport {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 0.6vw;
        padding: 0.15vw 0.3vw;
        outline: none !important;
        box-shadow: none;
    }
    .submitMgzInnerreport {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 0.6vw;
        padding: 0.15vw 0.3vw;
        outline: none !important;
        box-shadow: none;
    }
    .more-icon { width: 2vw; }


    /* 로딩 스피너 */
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 살짝 어두운 배경 */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        backdrop-filter: blur(5px); /* 배경을 뿌옇게 만드는 부분 */
    }
    .loading-message {
        color: white;
        text-align: center;
        font-size: 0.8vw;
        display: flex;
        flex-direction: column; /* 세로로 정렬 */
        align-items: center; /* 가로 중앙 정렬 */
        justify-content: center; /* 세로 중앙 정렬 */
    }
    .spinner {
        border: 0.2vw solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top: 0.2vw solid white;
        width: 2vw;
        height: 2vw;
        animation: spin 1s linear infinite;
        margin-bottom: 1.5vw; /* 스피너 아래에 여백 추가 */
    }
    .loading-title {
        margin-bottom: 1vw;
    }
    /* 스피너 애니메이션 */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}