html {
     font-family: 'Open Sans', sans-serif;
}
/* body{
     -ms-overflow-style: none;
}
 ::-webkit-scrollbar {
     display: none;
}
 */
/* Global Styles */
 *, *:before, *:after {
     box-sizing: border-box;
}
 :root {
     --white: #fff;
     --black: #000;
     --bg: #f8f8f8;
     --grey: #999;
     --dark: #1a1a1a;
     --light: #e6e6e6;
     --wrapper: 1000px;
     --blue: #00b0ff;
}
/* Body Styles */
 body {
     margin: 0;
     background-color: white;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
     @include font;
     background-size: cover;
     background-repeat: none;
}
/* Wrapper Styles */
 .wrapper {
     display: flex;
     justify-content: center;
    /* 가로 가운데 정렬 */
    /* min-height: 100vh;
    /* 화면 높이 100%로 설정, 적절한 크기로 조절 가능 */
}
/* Container Styles */
 .container {
     width: 100%;
    /*max-width: var(--wrapper);
     최대 너비 지정 */
     background-color: var(--white);
}
/* Left Panel Styles */
 .container .left {
     position: relative;
     float: left;
     width: 40%;
     height: 100%;
     border-right: 1px solid var(--light);
     background-color: var(--white);
}
 .new-send {
     position: absolute;
     width: 60px;
     height : 60px;
     bottom: calc(var(--vh, 1vh) + 110px + 15px);
     right: 20px;
     z-index: 3;
     background: #4285f4;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .new-send-icon {
     width: 50%;
}
 .top {
     position: relative;
     width: 100%;
     height: 80px;
     display: flex;
     align-items: center;
}
 .top centered-text {
     flex: 1;
     margin-left: 15px;
}
 .top img {
     height: 20px;
     margin-right: 15px;
     cursor: pointer;
}
 .top .keyword {
     margin: 0;
     padding: 0px 0px 0px 10px;
     color: #888;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 100px;
}
 .top .del-keyword {
     color: #888;
     font-size: 20px;
     margin: 0;
     padding: 0px 5px 0px 5px;
}
 .search {
     display: flex;
     justify-content: center;
     height: 60px;
}
 .search .write-search {
     width: 85%;
}
 .search .write-search img {
     width: 20px;
}
 .highlighted {
     background-color: yellow;
    /* 원하는 배경색으로 변경 가능 */
}
 .centered-text {
     flex: 1;
     padding-left: 20px;
     font-size: 30px;
     font-weight: bold;
     color: var(--dark);
}
 .top .search-keyword-container {
     background: lightgrey;
     height: 30px;
     margin-left: 15px;
     margin-right: 15px;
     border-radius: 10px;
     min-width: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
}
 .chatbox-avatar, .profile-avatar, .chatlist-avatar, .profile-avatar img {
     border-radius: 15px 15px 15px 0px;
}
 .chatbox-avatar img {
     border-radius: 5px 5px 5px 0px;
}
 .person-more {
     width: 35px;
     height: 35px;
     position: absolute;
     right: 10px;
     top: 31px;
     border-radius: 50%;
     text-align: center;
     font-size: 12px;
     color: white;
}
 .person-more img {
     background: none;
     width: 24px;
     height: 24px;
     float: right;
}
 .newmsg-container {
     width: 24px;
     height: 24px;
     background: #ea4335;
     position: absolute;
     right: 20px;
     top: 31px;
     border-radius: 50%;
     text-align: center;
     font-size: 12px;
     color: white;
}
 .newmsg-centered-text {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
}
/* Input Styles */
 .container .left input {
     float: left;
     width: 188px;
     height: 42px;
     padding: 0 15px;
     border: 1px solid var(--light);
     background-color: #eceff1;
     border-radius: 21px;
     @include font();
}
/* Search Link Styles */
 .container .left a.search {
     display: block;
     float: left;
     width: 42px;
     height: 42px;
     margin-left: 10px;
     border: 1px solid var(--light);
     background-color: var(--blue);
     background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/name-type.png');
     background-repeat: no-repeat;
     background-position: top 12px left 14px;
     border-radius: 50%;
}
/* People List Styles */
 .container .left .people {
     margin-left: -1px;
     border-right: 1px solid var(--light);
     border-left: 1px solid var(--light);
     width: calc(100% + 2px);
     height:calc(var(--vh, 1vh) * 100 - 162px);
     scrollbar-width: thin;
    /* Firefox에 대한 스크롤바 너비 조정 */
     position: relative;
}
/* Person Styles */
 .container .left .people .person {
     position: relative;
     cursor: pointer;
     background-color: var(--white);
     height: 80px;
     border-bottom: 1px solid #e9e9e9;
     padding: 10px;
     margin-left: 10px;
     margin-right: 10px;
}
/*.container .left .people .person {
     position: relative;
     width: 100%;
     cursor: pointer;
     background-color: var(--white);
     height: 80px;
     padding: 10px 20px 10px 20px;
}
*/
 .container .left .people .person.active, .container .left .people .person:hover {
     background-color: var(--blue);
}
 .container .left .people .person.active span, .container .left .people .person:hover span {
     color: var(--white);
     background: transparent;
}
 .chatlist-avatar img {
     float: left;
     width: 60px;
     height: 60px;
     background: lightgray;
}
 .chatlist-avatar img {
     border-radius: 15px 15px 15px 0px;
}
 .hidden {
     display: none;
}
/* Name Styles */
 .container .left .people .person .name {
     font-size: 17px;
     color: var(--dark);
    /*font-weight: bold;
    */
     overflow: hidden;
     text-overflow: ellipsis;
}
 .container .left .people .person .email {
     font-size: 14px;
     color: var(--grey);
     overflow: hidden;
     text-overflow: ellipsis;
}
/* Time Styles */
 .container .left .people .person .time {
     font-size: 14px;
     padding: 0 0 5px 5px;
     color: var(--grey);
}
/* Time Styles */
 .container .left .people .person .time.new {
     font-size: 14px;
     font-weight: bold;
     color: #4285f4;
}
 .info {
     overflow: hidden;
     flex: 1;
    /* info 영역이 남은 공간을 모두 차지하도록 설정합니다. */
     display: flex;
     flex-direction: column;
    /* name과 preview를 세로로 배치합니다. */
     text-overflow: ellipsis;
}
 .info-time-container {
     display: flex;
     justify-content: space-between;
    /* 수평으로 정렬하고 양쪽 끝에 배치 */
}
/* Preview Styles */
 .container .left .people .person .preview {
     font-size: 14px;
     display: inline-block;
     overflow: hidden !important;
     white-space: nowrap;
     text-overflow: ellipsis;
     color: gray;
}
 .preview-container {
     display: flex;
     align-items: center;
}
 .preview-container img {
     width: 15px;
     height: 15px;
     margin-right: 5px;
}
/* Right Panel Styles */
 .container .right {
     position: relative;
     float: left;
     width: 60%;
     height: 100%;
}
 .container .empty-right {
     position: relative;
     float: left;
     width: 60%;
     height: 100%;
     border: #e6e6e6;
     border-width: 1px;
     border-style: solid;
     border-left: 0px;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .container .empty-right .empty-container {
     display: flex;
     flex-direction: column;
     align-items: center;
}
 .container .empty-right .empty-container .empty-msg {
     font-size: 20px;
     margin-bottom: 20px;
     text-align: center;
}
/* Chat Area Styles */
/* Chat Area Styles */
 .container .right .chat {
     position: relative;
     padding: 10px 10px 10px 20px;
     background: white;
     border-width: 0;
     height:calc(var(--vh, 1vh) * 100 - 80px - 40px);
     overflow-y: auto;
    /* 수직 스크롤바 활성화 */
     scrollbar-width: thin;
    /* Firefox에 대한 스크롤바 너비 조정 */
}
 .msg-img {
     height: 150px;
     width: 150px;
}
 #loading-indicator {
     display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 85vh;
     top: 0;
     left: 0;
     width: 100%;
     background-color: rgba(255, 255, 255, 0.7);
     z-index: 999;
}
 .loader {
     border: 4px solid #f3f3f3;
     border-top: 4px solid #3498db;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     animation: spin 2s linear infinite;
     margin-bottom: 20px;
}
 @keyframes spin {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
/* Active Chat Styles */
 .container .right .chat.active-chat {
     display: block;
     display: flex;
     .bubble {
         transition-timing-function: cubic-bezier(.4,-.04, 1, 1);
         @for $i from 1 through 10 {
             &:nth-of-type(#{
                $i
            }
            ) {
                 animation-duration: .15s * $i;
            }
        }
    }
}
/* Bubble Styles */
 .container .right .bubble {
     font-size: 16px;
     position: relative;
     display: inline-block;
     clear: both;
     margin-bottom: 8px;
     padding: 13px 14px;
     vertical-align: top;
     max-width: 60%;
     word-wrap: break-word;
}
 .bubble.me.pending, .bubble.you.pending {
     opacity: 0.2;
}
/* You Bubble Styles */
 .bubble.you {
     float: left;
     color: var(--dark);
     background-color: #eceff1;
     align-self: flex-start;
     border-radius: 15px 15px 15px 0px;
     animation-name: slideFromLeft;
     &:before {
         left: -3px;
         background-color: var(--blue);
    }
}
/* Me Bubble Styles */
 .bubble.me {
     float: right;
     color: var(--white);
     background-color: #4285f4;
     align-self: flex-end;
     border-radius: 15px 15px 0px 15px;
     animation-name: slideFromRight;
     &:before {
         right: -3px;
         background-color: #eceff1;
    }
}
 .money-text-container {
     display: flex;
     align-items: center;
}
 .money-text-container img {
     width: 35px;
}
 .not-found {
     display: none;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
     background-color: white;
     z-index: 2;
     position: absolute;
     font-size: 18px;
     font-weight: bold;
     color: #888;
}
 .bubble.me.money-completed, .bubble.you.money-completed {
     background-color: #fbbc05;
     color: white;
     //animation: shimmer 1s infinite;
}
 .bubble.me.money-pending, .bubble.you.money-pending {
     background-color: #fbbc05;
     color: white;
     //animation: shimmer 1s infinite;
}
 .money-text {
     font-weight: bold;
}
 .money-status-text {
     font-size: 13px;
     font-weight: bold;
}
 @keyframes shimmer {
     0%, 100% {
         background-color: #34a853;
        /* 시작 색상 */
    }
     50% {
         background-color: #FBBC05;
        /* 중간 색상 */
    }
}
/* Conversation Start Styles */
 .container .right .conversation-start {
     position: relative;
     width: 100%;
     margin-bottom: 27px;
     text-align: center;
     span {
         font-size: 14px;
         display: inline-block;
         color: var(--grey);
         &:before,&:after {
             position: absolute;
             top: 10px;
             display: inline-block;
             width: 30%;
             height: 1px;
             content: '';
             background-color: var(--light);
        }
         &:before {
             left: 0;
        }
         &:after {
             right: 0;
        }
    }
}
/* People List Styles */
 .people ul, .people ul li {
     list-style-type: none;
     padding: 0;
     margin: 0;
}
 .people {
     overflow-x: hidden;
    /* 가로 스크롤바 숨김 */
    /* 다른 스타일 */
}
 .profileBox-top, .newsendbox-top {
     height: 80px;
     position: relative;
     display: flex;
     padding: 10px 10px;
     background: #f7f7f7;
     align-items: center;
}
 .chatbox-top {
     height: 80px;
     position: relative;
     display: flex;
     padding: 10px 10px;
     background: #f7f7f7;
     align-items: center;
}
 .newsendbox-top {
     align-items: center;
}
 .email-input, #tip-input {
     flex: 1;
     font-size: 15px;
     margin-left: 10px;
     height: 40px;
     color: var(--dark);
     border: 0;
     outline: none;
     background-color: #eceff100;
}
 #tip-input {
     margin-left: 7px;
}
 .profile-avatar {
     width: 50px;
     height: 50px;
     overflow: hidden;
     bottom: 0;
     background: lightgray;
     border-radius: 15px 15px 15px 0px;
     align-self: center;
}
 .chatbox-avatar {
     width: 60px;
     height: 60px;
     overflow: hidden;
     margin-left: 10px;
     bottom: 0;
     background: lightgray;
     border-radius: 5px 5px 5px 0px;
     align-self: center;
}
 .chatlist-avatar {
     margin-right: 10px;
     float: left;
     width: 60px;
     height: 60px;
     background: lightgray;
     position: relative;
}
 .chatlist-avatar .money {
     position: absolute;
     width: 25px;
     height: 25px;
     right: -10px;
     top: -10px;
     z-index: 1;
     background: #ea4335;
}
 .chatbox-avatar img, .profile-avatar img {
     width: 100%;
     height: 100%;
}
 .profile-name {
     padding: 0 10px 0 10px;
     font-size: 17px;
    /* font-weight: bold;
    */
     color: .black;
     text-overflow: ellipsis;
     overflow: hidden;
     flex: 1;
}
 .chat-partner-name {
     align-self: center;
     padding: 0 10px 0 10px;
     font-size: 20px;
    /* font-weight: bold;
    */
     color: .black;
     text-overflow: ellipsis;
     overflow: hidden;
     flex: 1;
     max-width: 300px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
.chat-partner-specialize {
	font-size: 13px;
    padding: 0 10px 0 10px;
    font-weight: bold;
    display: none;
}
 .chatbox-partner-body {
     flex: 1;
}
 .write {
     height: auto;
     display: flex;
     justify-content: space-between;
     align-items: end;
     min-height: 42px;
     padding-left: 8px;
     border: 1px solid var(--light);
     background-color: #f7f7f7;
     border-radius: 5px;
     padding-right: 8px;
     position: absolute;
     bottom: 10px;
     width: calc(100% - 20px);
     left: 10px;
}
 .write-link {
     width: 20px;
     height: 40px;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
	 filter: invert(43%) sepia(44%) saturate(1579%) hue-rotate(192deg) brightness(101%) contrast(91%);
}

 .write-link.attach {
     background-image: url('/images/image-icon.png');
}
 .write-link.send {
     background-image: url('/images/send-icon.png');
}
 .write-link.money {
     background-image: url('/images/icons8-dollar-50.png');
     width: 30px;
     margin-left: 3px;
}
 .write input {
     flex: 1;
    /* 남은 공간을 모두 차지하도록 설정 */
     font-size: 16px;
     height: 40px;
     padding: 0 10px;
     color: var(--dark);
     border: 0;
     outline: none;
     background-color: #eceff100;
    /* @include font;
     (필요한 경우 사용) */
}
 .chat-input, .comment-input {
     flex: 1;
     overflow: hidden;
     font-size: 16px;
     background-color: #eceff100;
     resize: none;
     height: 23px;
     box-sizing: border-box;
     max-height: 200px;
     outline: none;
     border: 0;
     margin: 8px 3px;
}
 .chat-input {
     max-height: 58px;
}
 .comment-input {
     min-height: 23px;
     max-height: 100px;
}
 .write-email, .write-tip, .write-tip-msg, .write-comment, .write-alias, .write-search {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 42px;
     padding-left: 8px;
     border: 1px solid var(--light);
     background-color: white;
     border-radius: 5px;
     padding-right: 8px;
     left: 10px;
}
 .write-tip-msg {
     height: 150px;
     margin-top: 10px;
}
 #tip-msg-input {
     color: var(--dark);
     font-size: 15px;
     width: 100%;
     height: 100%;
     outline: none;
     border: none;
     resize: none;
     padding: 10px;
     scrollbar-width: none;
}
 .to {
     z-index: 2;
     margin-left: 10px;
}
 .email-input {
     padding-left: 20px;
     font-size: 17px;
}
 .newsendbox-top .list {
     position: absolute;
     right: 10px;
     margin-top: 0px;
}
 .back {
     display: none;
}
 .signout {
     display: block;
     width: 25px;
     height: 25px;
     margin-top: 10px;
}
 .list {
     display: block;
     width: 25px;
     height: 25px;
}
.write-container {
	position: absolute;
    width: 100%;
    z-index: 2;
    background: white;
    bottom: 0;
    min-height: 60px;
}

/* 모바일 화면에 대한 스타일 (미디어 쿼리) */
 @media only screen and (max-width: 600px) {
    /* Left Panel Styles */
     body, html {
         /* overflow: hidden; */
         /* height: 100%; */
    }
	.write-container {
		position: fixed;
	}
	.top {
		position: fixed;
		z-index: 2;
		background: white;
		top: 0;
	}
	.empty-right {
		display: none !important; 
	}
	.profileBox-top {
		bottom: 0;
		width: 100%;
		position: fixed;
		z-index: 2;
	}
	.container .left .people {
		margin-top: 80px;
		margin-bottom: 80px;
		height: auto;
	}
	.container .right .chat {
		margin-top: 80px;
		margin-bottom: 55px;
		height: auto;
		padding-left: 10px;
	}
	.container .right .chatbox-top {
		position: fixed;
		width: 100%;
		z-index: 2;
		top: 0;
	}
	.container .right .write {
		position: fixed;
		z-index: 2;
	}
	
    .back {
         display: block;
         width: 25px;
         height: 25px;
         margin-left: 5px;
         margin-right: 5px;
    }
     .container .left {
         width: 100%;
         height: 100%;
		 overflow-y: auto;
		 overflow-x: hidden;
    }
     .container .right {
         /*height:calc(var(--vh, 1vh) * 100);*/
         width: 100%;
		 overflow-y: auto;
    }
	.right #loading-indicator {
		margin-top: 55px;
	}
     = #loading-indicator {
         height:calc(var(--vh, 1vh) * 100 - 80px - 62px);
    }
     .new-send {
         bottom: calc(var(--vh, 1vh) + 125px);
		 position: fixed;
    }
}
/* 모달 스타일 */
 .modal, .pmodal, .opmodal {
     align-items: center;
     display: none;
     position: fixed;
     z-index: 1;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 99999;
}
 .modal-content {
     background-color: #fff;
     margin: 15% auto;
     padding: 20px;
     border: 1px solid #888;
     width: 300px;
     border-radius: 10px;
}
 #profileModal .profile-container,  #otherPersonProfileModal .profile-container {
     display: flex;
     justify-content: center;
}
 #profileModal .profile-container .profile-avatar,  #otherPersonProfileModal .profile-container .profile-avatar {
     height: 80px;
     width: 80px;
}
 #reviewModal .modal-content, #tipsModal .modal-content {
     width: 90%;
     height: 90%;
     border-radius: 0px;
     display: flex;
     flex-direction: column;
}
 .modal-body {
     position: relative;
}
 #tipsModal .modal-body {
     height: calc(80% - var(--vh));
}
 #reviewModal h2, #tipsModal h2 {
     margin: 0;
     flex: 1;
}
 #reviewModal .reviews-container, #tipsModal ul {
     list-style-type: none;
     padding-left: 0px;
     margin: 0px;
     overflow-y: auto;
     height: 100%;
}
 #reviewModal .modal-content {
     position: relative;
}
 #reviewModal .modal-content .close {
     text-align: end;
     position: absolute;
     right: 20px;
     top: 30px;
}
 #reviewModal .modal-body {
     flex: 1;
     overflow-y: auto;
     scrollbar-width: thin;
}
 #reviewModal .info-time-container {
     text-align: start;
}
 #reviewModal .modal-body li, #tipsModal li {
     position: relative;
     background-color: var(--white);
     height: auto;
     border-bottom: 1px solid #e9e9e9;
     padding: 10px;
}
 #tipsModal li {
     min-height: 80px;
}
 #reviewModal .modal-footer {
     margin-top: auto;
     flex: 0 0 auto;
}
 #reviewModal .modal-footer .write {
     position: relative;
     bottom: 0px;
     width: 100%;
     left: 0px;
     margin-bottom: 10px;
}
 #reviewModal .chatlist-avatar, #reviewModal .chatlist-avatar img, #tipsModal .chatlist-avatar, #tipsModal .chatlist-avatar img {
     width: 45px;
     height: 45px;
     border-radius: 10px 10px 10px 0px;
}
 #reviewModal .name, #tipsModal .name {
     font-size: 15px;
    /* font-weight: bold;
    */
}
 #reviewModal .email, #reviewModal .time, #tipsModal .time, #tipsModal .email {
     font-size: 14px;
     color: gray;
}
 #tipsModal .msg {
     overflow-wrap: break-word;
     font-size: 15px;
    /*max-height: 80px;
    */
     color: gray;
}
 #tipsModal .modal-header {
     height: 80px;
     display: flex;
     align-items: center;
     padding: 0;
}
 #reviewModal .modal-header, #reviewModal .modal-footer {
     padding-bottom: 0;
}
 #reviewModal .modal-footer {
     min-height: 133px;
}
 #reviewModal .modal-header {
     border-bottom: 2px solid #e9e9e9;
     margin-bottom: 10px;
     display: flex;
}
 #reviewModal #submitComment {
     border-radius: 10px;
     background-color: #4285f4;
     color: #fff;
     padding: 00px 10px;
     border: none;
     cursor: pointer;
     height: 30px;
     font-size: 16px;
     float: right;
     margin-top: 7px;
}
 #reviewModal .msg {
     color: gray;
}
 #leave-review {
     position: relative;
}
 #reviewModal .star {
     font-size: 27px;
}
 #reviewModal #review-ratingStars {
     float: inline-end;
     margin-right: 10px;
}
 .profile-container {
     position: relative;
}
 .profile-name-container {
     flex: 1;
     display: flex;
     flex-direction: column;
}
 .profile-name-container #review-ratingStars {
     margin-left: 10px;
}
 .profile-rating-container {
     display: flex;
     margin-left: 10px;
}
 .profile-review-count {
     font-size: 12px;
     display: block;
     align-self: end;
     margin-left: 5px;
}
 .change-container {
     width: 26px;
     height: 26px;
     position: absolute;
     background: white;
     bottom: -11px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     cursor: cell;
}
 .change-container img {
     width: 100%;
     height: 100%;
}
 #profileModal .modal-header,  #otherPersonProfileModal .modal-header {
     padding: 0;
     padding-top: 20px;
     display: flex;
}
 #profileModal .modal-header h2,  #otherPersonProfileModal .modal-header h2 {
     margin: 0;
     flex: 1;
}
 #profileModal .modal-content,  #otherPersonProfileModal .modal-content {
     width: 350px;
}
 #profileModal .modal-header h4,  #otherPersonProfileModal .modal-header h4 {
     border-bottom: 1px solid #e6e6e6;
     color: gray;
}
 #profileModal .profile-rating,  #otherPersonProfileModal .oprofile-rating {
     display: flex;
     justify-content: center;
     margin-top: 10px;
}
#profileModal .profile-email, #otherPersonProfileModal .profile-email {
     text-align: center;
     margin: 10px;
}

#otherPersonProfileModal {
	.profile-email, .profile-name, .profile-specialize, .profile-bio {
		text-align: center;
		margin: 10px;
		height: 25px;
	}
	#profile-bio {
		width: 100%;
		height: 140px;
		resize: none;
		border: 1px solid #e6e6e600 !important;
		border-radius: 5px;
		margin-top: 10px;
		margin-bottom: 20px;
		outline: none;
		font-size: 16px;
	}
}

#profileModal #bio-input {
    width: 100%;
    height: 140px;
    resize: none;
    border: 1px solid #e6e6e6 !important;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    outline: none;
    font-size: 16px;
}

 #blockListModal .modal-content {
	 width: 40%;
}

 #blockListModal .block-list-container {
     max-height: 600px;
     overflow-y: auto;
}
 #blockListModal .unblock {
     border-radius: 10px;
     background-color: #000000a8;
     color: #fff;
     padding: 5px 5px;
     border: none;
     cursor: pointer;
     font-size: 12px;
}
 #blockListModal .block-list {
     margin: 0;
     list-style: none;
     padding: 10px;
}
 #blockListModal .block-list li {
     display: flex;
     padding: 5px 0px 5px 0px;
}
 #blockListModal .block-list li span {
     flex: 1;
     overflow:hidden;
     text-overflow: ellipsis;
     overflow-wrap: break-word;
}
 .mt-5 {
     margin-top: 1rem !important;
}
 .close {
     color: #888;
     float: right;
     font-size: 28px;
     font-weight: bold;
     cursor: pointer;
     text-align: end;
}
/* 모달 내용 스타일 */
 .modal-header, .modal-footer {
     padding: 10px 0;
}
 .modal-footer {
     margin-top: 10px;
}
 #tipModal .info {
     font-size: 12px;
     color: gray;
     padding-top: 10px;
}
 #emailInput, #commentInput, #aliasInput, #nameInput, #searchInput {
     width: 100%;
     font-size: 16px;
     flex: 1;
     height: 40px;
     padding: 0 10px;
     color: var(--dark);
     border: 0;
     outline: none;
     background-color: #eceff100;
}
 #nameInput {
     text-align: center;
}
/* 모달 버튼 스타일 */
 button#openModal {
     background-color: #008CBA;
     color: #fff;
     padding: 10px 20px;
     border: none;
     cursor: pointer;
}
 button#submitEmail, button#sendTipBtn, button#submitAlias, button#newMsgBtn, button#submitSearch {
     border-radius: 10px;
     background-color: #4285f4;
     color: #fff;
     padding: 10px 20px;
     border: none;
     cursor: pointer;
     height: 50px;
     font-size: 16px;
     width: 100%;
}
 button#newMsgBtn {
     width: auto;
}
 button#changeName {
     border-radius: 10px;
     background-color: #4285f4;
     color: #fff;
     padding: 5px 5px;
     border: none;
     cursor: pointer;
     font-size: 16px;
	width: 100%;
    height: 50px;
}
 .action-sheet {
     display: none;
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: rgba(0, 0, 0, 0.5);
     align-items: center;
     justify-content: center;
     height: 100%;
     z-index: 3;
}
 .action-options {
     min-width: 200px;
    /* background: #ffffff9e;
    */
     border-radius: 10px 10px 10px 10px;
     background: white;
     position: relative;
     padding-top: 30px;
}
 .action-options .close {
     position: absolute;
     right: 8px;
     top: 0px;
}
 .action-button {
     font-size: 18px;
     padding: 10px 20px;
     cursor: pointer;
    /* background-color: #fff;
     margin: 1px;
     */
     display: block;
     text-align: center;
}
 .cancel-button {
     color: red;
	 border-top: 1px solid #e5e5e5;
}

 .bubble:hover + .tooltip {
     display: block;
}
 .rating {
     display: flex;
     align-items: center;
    /* 수직으로 중앙 정렬 */
     padding-left: 10px;
}
/* 별 모양 스타일링 */
 .star {
     font-size: 16px;
     color: gray;
    /* 모든 별의 기본 색상 */
}
 .checked {
     background: #4285f4;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .half-checked::before {
     content: '\00bd';
    /* 반 별 모양 (½
    ) */
     position: absolute;
     color: orange;
    /* 반 별의 색상 */
}
/*background: linear-gradient(to right, orange 50%, gray 50%);
/* 꽉 찬 별의 색상 */
 .review-count {
     font-size: 13px;
     display: block;
     align-self: end;
     margin-left: 5px;
}
/* 로딩 스피너 스타일 */
 .loading-spinner {
     display: flex;
     justify-content: center;
     align-items: center;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(255, 255, 255, 0.7);
    /* 배경 색상과 투명도 조절 */
     z-index: 9999;
    /* 다른 요소 위에 표시되도록 함 */
     position: absolute;
}
 #profileModal .loading-spinner {
     position: absolute;
     height: 540px;
     margin-top: 70px;
     background: white;
}
#otherPersonProfileModal .loading-spinner {
     position: absolute;
     height: 420px;
     margin-top: 70px;
     background: white;
}
 .spinner {
     border: 4px solid rgba(0, 0, 0, 0.1);
    /* 스피너 테두리 색상과 투명도 조절 */
     border-top: 4px solid #3498db;
    /* 스피너의 상단 테두리 색상 설정 */
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
    /* 스핀 애니메이션 적용 */
}
 .star-container {
     display: inline-block;
     font-size: 15px;
}
/* 스핀 애니메이션 효과 */
 @keyframes spin {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 ::-webkit-scrollbar {
     width: thin;
}
 #submitEmail:disabled, #sendTipBtn:disabled {
     background-color: #ccc;
    /* 회색 배경색 */
     color: #666;
    /* 글자색 변경 (회색 또는 원하는 색상) */
     cursor: not-allowed;
    /* 커서 변경 */
}
 .modal-header {
     display: flex;
     align-items: center;
}
 .modal-header h2 {
     flex: 1;
     margin: 0;
}
 .write-tip {
     margin-top: 10px;
}

#specialization {
    width: 100%;
    height: 40px;
    border: 1px solid var(--light);
    border-radius: 5px;
    margin-top: 10px;
	margin-bottom: 10px;
	font-size: 16px;
    text-align: center;
}


/* 모달 스타일 */
.modal {
    display: none; /* 초기에는 모달 숨김 */
    position: fixed; /* 화면 고정 */
    z-index: 2; /* 화면 상위에 표시 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 스크롤 가능 */
    background-color: rgba(0,0,0,0.5); /* 투명한 배경 */
}
/* 모달 내용 스타일 */
.modal-content {
    background-color: #fefefe;
    margin: auto; /* 수평 가운데 정렬 */
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    max-width: 500px; /* 최대 너비 */
    position: relative; /* 상대 위치 설정 */
    top: 50%; /* 상단에서 50% 위치 */
    transform: translateY(-50%); /* 세로 가운데 정렬 */
}
 @media only screen and (max-width: 600px) {
	 .modal-content {
		 width: 80%;
	 }
 }
 
/* 닫기 버튼 스타일 */
.close {
    position: absolute; /* 절대 위치 설정 */
    top: 0;
    right: 0;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
	margin-right: 10px;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* 로그인 버튼 스타일 */
#loginBtn {
    width: 100%;
    padding: 10px;
    background-color: #4285f4;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#appBtn {
	padding: 10px;
    background-color: #b1b1b1;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 5px;
}

#loginBtn:hover {
    background-color: #0056b3;
}

#appBtn:hover {
    background-color: #808181;
}


 .temp-name-container {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #34a853;
    }

    /* 텍스트 스타일 */
    .temp-name {
        padding: 10px;
        font-size: 30px;
        font-weight: bold;
        color: white;
        text-align: center;
        border-radius: 5px;
        background-color: rgb(var(--bg-color)); /* 랜덤 배경 색상 설정 */
    }