@media only screen and (max-width: 767px) {

    /* 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;
        transform: none; /* 화면을 가로로 뒤집지 않도록 함 */
        display: inline-block;
        height: 100%;
        overflow: hidden;
    }
    button:focus {
        outline: none !important;
    }
    #wrapper1{ min-height: 70vw; position: relative; width: 100%; }
    #wrapper2{ width: 100%; height: auto; min-height: 95vh; padding-bottom: 0px; }
    .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.7vw rgba(190, 190, 190, 0.5);
        z-index: 3;
    }
    #foot-a{ display: none; }
    .index2_container {
        display: flex;
        justify-content: center;
        align-content: center;
        margin: 1.5vw 8vw 0vw;
        height: 16vw;
    }
    .index2_item:nth-child(1) { width: 40vw; text-align: left; overflow: hidden; }
    .index2_item:nth-child(2) { width: auto; text-align: center; }
    .index2_item:nth-child(3) { width: 40vw; text-align: right; }
    .index2-followbox { display: flex; justify-content: end; }
    .index2-followicon { font-size: 2.5vw; margin-left: 0.7vw; margin-top: -1vw; }
    .index2-follow-line { width: 3vw; }
    .index-follow-number { 
        font-size: 5vw;
        margin-top: -3.5vw;
    }

    .index2_container2 {
        display: flex;
        justify-content: center;
        align-content: center;
        height: 10vw;
    }
    .index2_item2:nth-child(1) { width: 55vw; text-align: left; overflow: hidden; }
    .index2_item2:nth-child(2) { width: 30vw; text-align: right; }
    .index-myshelfie_logo { height:6vw; margin-top: 3vw; opacity: 0.7; }
    #profile_img1 {
        border: 0.3vh solid black;
        border-radius: 2vh;
        width: 3.3vh; height: 3.3vh;
    }
    #profile_img2 {
        border: 0.1vh solid black;
        border-radius: 2vh;
        width: 3.3vh; height: 3.3vh;
    }
    #profile_img-top {
        border: 0.6vw solid rgb(170, 170, 170);
        border-radius: 7vw;
        width: 13vw; height: 13vw;
        margin-top: 2vw;
    }
    .index-star { height:7vw; margin: 2.5vw 0.9vw; }
    .index-bell { height:6.5vw; margin: 2.5vw 0.8vw 2vw; }
    .index-setting-icon { height:4.5vw; margin: 2.5vw 0; }
    
    .index-follow-text { display: inline; font-size: 2.5vw; }
    .index-modal-close { width: 4vw; margin: 2vw; }
    .index-modal-div { margin-top: 4vw; text-align: center; }
    .index-modal-div_scroll {
        height: 120vw; /* 최대 높이 설정 */
        padding-bottom: 10vw;
        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: 4vw; margin-bottom: 4vw; }
    .vertical-line {
        margin-right: 2vw;
    }
    .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: 5vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }
    .follow {
        font-weight: 500;
        background-color: white;
        margin-top: 5vw;
        border: 0.5vw solid black;
        padding: 1vw 2vw;
        border-radius: 3.25vw;
        height: 6.5vw;
        color: black;
        font-size: 2.5vw;
        margin-bottom: 4.5vw;
    }
    .no-follow { height: 12vw; }
    .foot_container {
        display: flex;
        flex-wrap: wrap;
        margin: 0 8vw 4.5vw;
        align-items: center;
        justify-content: space-between;
        height: 6vh;
    }
    .foot-item-height { height:3vh; }
    .setting_text {
        text-decoration: none !important; color: black !important; font-size: 3vw;
        text-align: center; line-height: 7.5vw;
    }
    .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: 4.3vw; margin-left: 1.4vw; padding-bottom: 0.3vw; }

    /* 모달 */
    .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: 1vw;
        border: 0.05vw solid rgba(255, 255, 255, 0.18);
        width: 60vw;
        height: 60vw;
        margin-bottom: 2.5vw;
        padding: 0;
    }
    .modal_title{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-weight: bold;
        font-size: 3vw;
    }
    .modal_title_side{
        flex: 0 0 9vw;
        text-align: center;
    }
    .setting_modal_window {
        background: white;
        backdrop-filter: blur(0.7vw);
        -webkit-backdrop-filter: blur(0.7vw);
        border-radius: 1vw;
        border: 0.05vw solid rgba(255, 255, 255, 0.18);
        width: 80vw;
        height: 132vw;
        /* 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: 15vw;
        margin-bottom: 18vw;
    }
    .main-text {
        font-size: 3vw;
        margin-top: 3vw;
    }
    .fin_logo_margin1 { 
        height: 20vw;
        margin-bottom: 32vh;
    }
    .fin_body_margin {
        font-size: 5vw; 
        color: black;
        line-height: 170%;
        margin-top: 29vh;
        margin-bottom: 3vh;
        font-family: 'Noto Serif KR Medium', serif !important;
        font-weight:500;
    }
    .fin_ffzlogo { 
        height: 15vw;
    }
    .logo_login { 
        height: 15vw;
    }
    .login_boxarea {
        margin-top: 16vh;
        display: flex; justify-content: center; /* 가로 정렬 */
    }
    .loginbox {
        width: 75vw;
        border: 0.5vw solid black;
        border-radius: 2vw;
    }
    .input1 { 
        text-align: left;
        width: 73.5vw; height: 10vw;
        margin: 0.25vw;
        font-size: 3vw;
        letter-spacing: 0.2vw;
        border: none;
        outline: none !important;
        box-shadow: none !important;
    }
    .input1::placeholder{
        color:rgb(190, 190, 190);
    }
    .phone-div { display: grid; grid-template-columns: 54.5vw 19vw; }
    .input1-phonenumber { 
        text-align: left;
        width: 73.5vw; height: 10vw; 
        margin: 0.25vw;
        font-size: 3vw;
        letter-spacing: 0.2vw;
        border: none;
        outline: none !important;
        box-shadow: none !important;
    }
    .input1-phonenumber::placeholder{
        color:rgb(190, 190, 190);
    }
    .input1-birth { 
        text-align: left;
        width: 35vw; height: 10vw; 
        margin: 0.25vw 0.5vw;
        font-size: 3vw;
        letter-spacing: 0.2vw;
        border: none;
        outline: none !important;
        box-shadow: none !important;
        padding-top: 2.5vw;
        display: grid;
        grid-template-columns: 15vw 12vw 6vw 12vw 6vw 12vw 6vw;
    }
    .input1-birth::placeholder{
        color:rgb(190, 190, 190);
    }
    .input1-birth2 { 
        text-align: center;
        width: 5vw; height: 10vw; 
        margin: 0.25vw;
        padding-top: 0.5vw;
        font-size: 6vw;
    }
    .input1-sex { 
        text-align: left;
        width: 8vw; height: 10vw; 
        margin: 0.25vw 0.5vw;
        font-size: 3vw;
        letter-spacing: 0.2vw;
        border: none;
        outline: none !important;
        box-shadow: none !important;
    }
    .input1-sex2 { 
        text-align: left;
        width: auto; height: 5vw; 
        margin-top: 1vw;
        margin-bottom: -2vw;
        padding-top: 2vw;
        font-size: 4vw;
        border: none;
        outline: none !important;
        box-shadow: none !important;
    }
    .phone-auth { 
        background-color: black; color: white; border: none !important; 
        font-size: 3vw;
        border-radius: 1.5vw;
        height: 8vw;
        margin-top: 1vw; margin-right: 1.5vw;
    }
    /* 자동완성 박스 색상 */
    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset; /* 백그라운드를 흰색으로 변경 */
        color: inherit; /* 텍스트 색상 유지 */
    }
    .remember {
        width: 18vw; height: 3vw;
        text-align: left;
        color:rgb(190, 190, 190);
        margin-top: 1vh;
    }
    .remember-input {
        width: 3vw; height: 3vw;
    }
    .remember-text {
        font-size: 2vw; margin-left: 1vw;
    }
    .remember-box {
        margin-top: 0.1vw;
        /* border: solid 2vw rgb(55,55,55) !important;
        border-radius: 1vw !important; */
    }
    .login_link1 { 
        background-color: transparent; 
        border: none;
        padding: 0;
        text-decoration: none;
        font-size: 4vw;
        color: black;
        margin-top: 13vh;
    }
    .login_link2 { 
        background-color: transparent; 
        border: none;
        padding: 0;
        text-decoration: none;
        font-size: 4vw;
        color: black;
        margin-top: 4vw;
    }
    .login_link3 { 
        text-decoration: none;
        color: inherit;
        font-size: 4vw; color: rgb(190, 190, 190);
        margin-top: 4.5vw;
    }
    .login-error-message {
        color: red;
        position: absolute;
        font-size: 3vw;
        margin-top: 12vw;
        width: 75vw;
    }

    /* 회원가입 */
    
    .register_boxarea {
        display: flex;
        justify-content: center; /* 가로 정렬 */
        margin-top: 4vh;
        margin-bottom: 1vh;
    }
    .register_pw_boxarea {
        margin-bottom: 10vh;
        display: flex;
        justify-content: center; /* 가로 정렬 */
    }
    .register_box {
        width: 75vw;
        border: 0.5vw solid black;
        border-radius: 1.5vw;
    }
    .register_link1 { 
        text-decoration: none; color: inherit; font-size: 4vw; color: black;
    }
    .register_button1 { margin-left: 7vw; background-color: white; border:0; color: black; }
    .line-hr { border: 0.03vw solid rgb(190, 190, 190); margin: 0 2vw; }
    .register-error-message {
        color: red;
        font-size: 3vw;
        margin-bottom: 0.5vw;
    }
    .register-success-message {
        color: green;
        font-size: 3vw;
        margin-bottom: 0.5vw;
    }
    .verify-input1 { 
        text-align: left;
        height: 10vw;
        font-size: 3vw;
        letter-spacing: 0.2vw;
        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: 55vw 16vw;
        padding-left: 2.3vw;
    }
    .register-reset-margin { height: 10vh; }

    /* 프로필 */

    .p1 { color:rgb(190, 190, 190); font-size: 4vw; margin-top: 3vh; margin-bottom: 12vh; }
    .picbutton_img {
        width:40vw; height: 40vw;
        border: solid 0.5vw black;
        border-radius: 2vw;
        background-size: 13vw;
        background-repeat: no-repeat;
        background-position: center center;
        cursor: pointer;
        margin-bottom: 14vh;
    }
    input[type="file"] {
        display: none;
    }
    .profile_link1 { 
        text-decoration: none !important;
        color: rgb(190, 190, 190) !important;
        font-size: 4vw;
        margin-right: 8vw;
    }
    .profile-button1 { background-color: white; font-size: 4vw; padding: 0; border:0; color: black; font-family: 'Noto Sans KR', sans-serif; }
    
    .profile-container { position: absolute; top: -9vw; }
    .profile-img { width: 50vw; max-width: 50vw; max-height: 50vw; border-radius: 2vw; }
    .profile-modal { width: 90vw; max-width: 100%; margin: 5vw; }
    .profile-modalimg-container { max-width: 100%; max-height: 90vw; margin: 0 auto; overflow: hidden; display: flex; justify-content: center; align-items: center; }
    .profile-modalimg { width: auto; max-height:90vw; }
    .modal-header {
        height: 7vw;
        padding: 2vw; /* Header의 위 아래 padding을 조절해서 높이를 조절합니다. */
    }
    .modal-header .close {
        font-size: 3vw; /* X 아이콘의 크기를 조절합니다. */
    }
    .modal-footer {
        height: 20vw;
        padding: 0;
    }
    .custom-button {
        background-color: white; color: black;
        font-size: 3vw;
        padding: 0;
    }

    /* myshelf.html */

    .my_container {
        padding-top: 9vw;
        display: grid;
        grid-template-columns: 35vw 35vw;
        gap: 4vw;
        place-content: start center;
        margin-bottom: 2vw;
    }
    .inbox_top {
        display: grid;
        grid-template-columns: 4.5vw 27vw auto;
        margin: 3vw 0 1vw;
    }
    .inbox_top_subslist {
        display: grid;
        margin: 3vw 0 1vw;
        grid-template-columns: 4.5vw 21vw 44.5vw;
        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: 3vw; margin-left: 0.7vw; }
    .inbox_top_item-3 { text-align: right; color: black; }
    .lock { height: 3.5vw; margin-top: 0.7vw; }
    .pagebutton {
        text-decoration: none !important; color: black !important; padding: 0 3vw; font-size: 3vw;
    }
    .sub_scroll {
        height: 130vw;
        /* height: auto; */
        overflow-y: auto; /* 세로 스크롤바 표시 */
        scrollbar-width: none; /* 스크롤바 숨기기 */
        -ms-overflow-style: none; /* IE11에서 스크롤바 숨기기 */
    }
    .sub_scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .like-profile {
        height: 10vw;
        border-radius: 5vw;
        border: solid 0.5vw rgba(0, 0, 0, 0.2);
    }
    .like-display {
        display: grid;
        grid-template-columns: 12vw auto;
        grid-gap: 0.5vw 0.5vw;
        margin: 0vw 0;
        padding: 0 0.25vw;
        height: 11vw;
    }
    .like-username { font-size:4vw; margin-top:2vw; }
    .like-hr { border:solid 0.1vw rgb(220, 220, 220); width:97%; margin-top:1.2vw; margin-bottom:2vw; }
    .like-more-arrow { height: 2.5vw; padding-bottom: 0.4vw; margin-left: 2vw; }
    .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: 5vw;
        background-repeat : no-repeat;
        background-size: 3vw;
        background-position: center center;
        border: none;
        background-color: transparent; padding: 0;
        outline: none !important;
        cursor: pointer;
    }
    .my_dis_subs {
        width: 5vw;
        background-repeat : no-repeat;
        background-size: 3vw;
        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;
        margin-top: 0.3vw;
        width: 5.5vw;
        background-repeat : no-repeat;
        background-size: 5vw;
        background-position: center center;
        border: none;
        background-color: transparent;
    }
    .like_u {
        margin-left: -0.4vw;
        margin-top: 0.3vw;
        width: 5.5vw;
        background-repeat : no-repeat;
        background-size: 5vw;
        background-position: center center;
        border: none;
        background-color: transparent;
    }
    .closed-div { font-size: 2.5vw; color: rgb(190, 190, 190); }

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

    .inbox1 {
        border: 0;
        position: relative;
        width: 93.24vw; height: 132.3vw; /* 148x210x0.63 */
        box-shadow: 0 0 1vw rgba(0, 0, 0,0.3);
        margin-bottom: 2vw;
        margin-top: 1vw;
        border-radius: 1vw;
    }
    .like_scroll {
        height: 120vw; /* 최대 높이 설정 */
        overflow-y: auto; /* 세로 스크롤바 표시 */
        scrollbar-width: none; /* 스크롤바 숨기기 */
        -ms-overflow-style: none; /* IE11에서 스크롤바 숨기기 */
    }
    .like_scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .comment_scroll {
        height: 150vw; /* 최대 높이 설정 */
        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: 2.5vw;
        color: black;
    }
    .re-ul-style {
        list-style: none;
        padding: 0;
        margin: 0 0 0 5vw;
        text-align: left;
        font-size: 2.5vw;
        color: black;
    }
    .comment-profile {
        height: 10vw;
        border-radius: 5vw;
    }
    .comment-display {
        display: grid;
        grid-template-columns: 13vw 55vw 16vw;
        grid-gap: 2vw 0vw;
        margin: 1vw 0;
        font-size: 3.2vw;
    }
    .comment-display > :last-child {
        justify-self: end;
    }
    .submitComment {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 2.5vw;
        padding: 0.5vw 0 3vw;
    }
    .deleteComment {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 2.5vw;
        padding: 0.5vw 0 3vw;
    }
    .comment-more-button {
        font-size: 3vw;
        width: 85vw;
        outline: none !important;
        background-color: inherit;
        color: black;
        border: none;
    }
    .comment-more-arrow { height: 2vw; padding-bottom: 0.15vw; margin-left: 2vw; }
    .form-group {
        display: grid;
        grid-template-columns: 13vw 65vw 9vw;
    }
    .form-group textarea.form-control {
        border: 0.6vw solid black;
        outline: none !important;
        box-shadow: none;
        height: 10vw;
        font-size: 3.5vw;
        padding: 1.7vw 2vw;
    }
    .summary {
        color: black;
        opacity: 0.5;
        font-size: 2.5vw;
        margin-left: 12vw;
    }
    .deleteComment{ outline:none; opacity:0.3; margin-top:1.5vw; }
    .reportComment { background-color: inherit; border: none; outline:none !important; opacity:0.2; margin-top:-0.6vw; }
    .report-icon { height: 3vw; margin-top:-1.2vw; }
    .comment-date { margin-left: 3vw; font-size: 2.5vw; }
    .recomment-display {
        display: grid;
        grid-template-columns: 10vw 50vw 15vw;
        grid-gap: 2vw;
        margin: 2vw 0;
        font-size: 3vw;
    }
    .recomment-display > :last-child {
        justify-self: end;
    }
    .replies-container {
        margin-top: -0.35vw;
    }
    .replies-form {
        display: grid;
        grid-template-columns: 77vw 7vw;
        margin: 1vw 0;
    }
    .replies-form > :last-child {
        justify-self: end;
    }
    .replies-textarea {
        border: 0.6vw solid black;
        padding: 1.5vw 2vw;
        outline: none !important;
        box-shadow: none;
        margin: 0.5vw 0 1vw 12vw;
        border-radius: 1.5vw;
        color: black;
        font-size: 2.5vw;
    }
    .submit-recomment-btn {
        margin-top: 0.5vw;
        padding: 0;
        background-color: inherit;
        color: black;
        border: none;
        font-size: 2.5vw;
        outline:none;
    }
    .rebody-grid {
        grid-template-columns: auto 2vw;
    }
    .deleteRecomment {
        opacity:0.3; margin-top:-0.6vw; margin-left:0.9vw;
    }
    .reportReComment { background-color: inherit; border: none; outline:none !important; opacity:0.2; margin-top: 0.2vw; }
    .cof_container {
        display: grid;
        padding: 1vw 0;
        place-content: space-between center;
        margin-bottom: 1.5vw;
    }
    .cof_flex-container {
        display: flex;
        margin: 4vw 0 5.5vw;
        align-items: center;
        justify-content: center;
    }
    .cof_item:nth-child(1) { 
        font-size: 3vw; text-align: left; color: black; opacity: 0.5; width: 24vw;
        overflow: hidden;           /* 넘치는 텍스트를 숨깁니다. */
        text-overflow: ellipsis;    /* 넘치는 텍스트를 '...'로 표시합니다. */
        white-space: nowrap;  
    }
    .cof_item:nth-child(2) { font-size: 3vw; text-align: right; width: 45vw; }
    .cof_item:nth-child(3) { text-align: right; width: 15vw; }
    .cof_button1 {
        font-size: 3vw;
        padding: 0;
        background-color: inherit;
        border: 0;
        text-decoration: none; 
        color: black; 
    }

    /* 색상 선택 */
    .color-grid {
        display: grid;
        grid-template-columns: repeat(5, 10vw);
        grid-gap: 3vw;
    }
    .color-option {
        width: 9vw;
        height: 9vw;
        border-radius: 4.5vw;
        cursor: pointer;
    }
    .color-option.selected {
        border-color: rgb(60, 135, 130); /* 선택된 색상의 테두리 스타일 */
        border-radius: 4.5vw;
    }
    .color-selected {
        /* 선택된 경우의 스타일 */
        border: 0.5vw solid rgb(60, 135, 130);
        border-radius: 4.5vw;
    }
    .cof-palette-box {
        position: fixed;
        bottom: 14vw; left: 0; 
        height: 45vw; padding-bottom: 3vh;
        width: 100%;
        background-color: rgba(190, 190, 190, 0.3);
        display: grid;
        /* grid-template-columns: 19vw 37vw 37vw; */
        text-align: center;
        justify-content: center;
        box-shadow: 0 -0.1vw 0.3vw rgba(190, 190, 190, 0.5);
        z-index: 2;
        overflow-y: auto; /* 세로 스크롤바 표시 */
        scrollbar-width: none; /* 스크롤바 숨기기 */
        -ms-overflow-style: none; /* IE11에서 스크롤바 숨기기 */
    }
    .cof-palette-box::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .inf-palette-box {
        position: fixed;
        bottom: 14vw; left: 0; 
        height: 45vw; padding-bottom: 3vh;
        width: 100%;
        background-color: rgba(190, 190, 190, 0.3);
        display: grid;
        /* grid-template-columns: 19vw 37vw 37vw; */
        text-align: center;
        justify-content: center;
        box-shadow: 0 -0.1vw 0.3vw rgba(190, 190, 190, 0.5);
        z-index: 2;
        overflow-y: auto; /* 세로 스크롤바 표시 */
        scrollbar-width: none; /* 스크롤바 숨기기 */
        -ms-overflow-style: none; /* IE11에서 스크롤바 숨기기 */
    }
    .inf-palette-box::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .cover-privacy-text { font-size: 2.7vw; color: black; padding-top: 5vw; }
    .cover-font-choice { font-size: 2.7vw; color: black; padding-top: 5vw; }
    .choice-grid-box { display: grid; grid-template-columns: repeat(3, 20vw); gap: 10vw; }
    .choice-inner-grid-box { display: grid; grid-template-columns: repeat(2, 30vw); gap: 10vw; }
    .cover-privacy-box { padding: 2vw 0 1vw; }
    .cover-textcolor-text { font-size: 2.7vw; color: black; padding-top: 5vw; margin-bottom: 2vw; }
    .inner-textcolor-text { font-size: 2.7vw; color: black; padding-top: 5vw; margin-bottom: 2vw; }
    .bgcolor-text { font-size: 2.7vw; color: black; padding-top: 5vw; margin-bottom: 2vw; }

    .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: 3vw;
        color: black;
        opacity: 0.8;
        margin-bottom: 5vw;
    }
    .report-modal-width { max-width: 100vw !important; }
    .report-modal-height { display: flex; align-items: center; height: 75vw; }
    .report-modal-header { padding: 2vw 2.3vw !important; }
    .report-modal-closebutton { width: 3vw; }
    .report-modal-icon { height: 3vw; margin-right: 1.3vw; margin-top: 0.7vw; }
    .report-body textarea.form-control {
        font-size: 3vw !important; margin-bottom: 3vw;
        width: 70vw;
        height: 30vw;
        resize: none;
        border: 0.5vw solid red;
        outline: none !important;
        box-shadow: none;
        /* margin-bottom: 1vw; */
    }
    .report-success {
        font-size: 3vw;
        color: red;
    }
    .submitCoverreport {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 3vw;
        padding: 0.5vw 0.3vw;
        outline: none !important;
        box-shadow: none;
    }
    .submitInnerreport {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 3vw;
        padding: 0.5vw 0.3vw;
        outline: none !important;
        box-shadow: none;
    }
    .submitCommentreport {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 3vw;
        padding: 0.5vw 0.3vw;
        outline: none !important;
        box-shadow: none;
    }
    .submitReCommentreport {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 3vw;
        padding: 0.5vw 0.3vw;
        outline: none !important;
        box-shadow: none;
    }
    .submitMgzInnerreport {
        background-color: inherit;
        color: black;
        border: none;
        font-size: 3vw;
        padding: 0.5vw 0.3vw;
        outline: none !important;
        box-shadow: none;
    }
    .more-icon { width: 8vw; }

    /* 로딩 스피너 */
    .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: 3.3vw;
        display: flex;
        flex-direction: column; /* 세로로 정렬 */
        align-items: center; /* 가로 중앙 정렬 */
        justify-content: center; /* 세로 중앙 정렬 */
    }
    .spinner {
        border: 0.8vw solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top: 0.8vw solid white;
        width: 8vw;
        height: 8vw;
        animation: spin 1s linear infinite;
        margin-bottom: 6vw; /* 스피너 아래에 여백 추가 */
    }
    .loading-title {
        margin-bottom: 4vw;
    }
    /* 스피너 애니메이션 */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}