@charset "UTF-8";
.board-menu-box .title-text {
   padding: 20px 20px 10px 20px;
   font-size: 16px;
   font-weight: 600;
   color: #555;
   display: flex;
   align-items: center;
   gap: 8px;
}
.board-menu-box .board-area .menu-item {
   padding: 21px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
   transition: background-color 0.2s;
   position: relative;
   font-size: 15px;
   border-bottom: 1px solid #eeeeee; 
}
.board-main .tab-box {
   border-bottom: 10px solid #EFF1F3;
   height: 60px !important;
}
.group-box {
   padding: 20px 16px;
}
.group-box .group-title {
   font-weight: 600;
   font-size: 18px;
}
.post-area {
   overflow-y: auto;
   overflow-x: hidden;
   flex-grow: 1;
}
.post-header-title {
   font-size: 20px;
   font-weight: 600;
   line-height: 1.4;
}
.post-text {
   font-size: 16px;
   color: #707070;
   font-weight: 300;
   line-height: 1.4;
}
.gray-label {
   color: #767676;
}
.gray-label.right {
   margin-left: auto;
}
.post-list {
   flex-grow: 1;
   overflow-y: auto;
   width: 100%;
}
.post-box .big-text {
   font-size: 18px;
}
.post-box .image-box img {
   object-fit: cover;
   width: 90px; 
   height: 90px;
   border-radius: 10px;
}
.post-box .writer {
   white-space: nowrap;
}
.post-box .writer .site-nm{
   color: #767676;
   overflow: hidden;
   text-overflow: ellipsis;
}
.post-box .post-content img {
   max-width: 100% !important;
   height: auto !important;
   display: block;
}
.post-footer-box {
   padding: 15px;
   text-align: center;
}
.post-footer-box > i {
   font-size: 24px;
}
.post-footer-box .title {
   margin-top: 4px;
}
.post-footer-box.selected {
   color: #80BC50;
}
.comment-box {
   border-bottom: 1px solid #EFF1F3;
   padding: 0px 0px 15px 0px;
}
.comment-header {
   position: relative;
}
.comment-header .comment-menu {
   cursor: pointer;
   color: #6c757d;
   margin-left: auto;
}
.comment-header .open-post {
   cursor: pointer;
   color: #767676;
}
.no-comment {
   padding: 40px;
}
.comment-input-area {
   width: 100%;
   background-color: #fff;
   flex-shrink: 0;
}
.comment-input-box {
   width: 100%;
   padding: 12px 16px;
}
/* 입력창 내부 스타일 */
.comment-input-box .input-container {
   display: flex;
   align-items: center;
   gap: 8px;
}
.comment-input-box textarea {
   flex: 1;
   border: 1px solid #ddd;
   border-radius: 10px;
   padding: 10px 16px;
   font-size: 14px;
   outline: none;
   background: #f5f5f5;
   resize: none; /* 수동 리사이즈 비활성화 */
   min-height: 36px; /* 최소 높이 설정 */
   max-height: 120px; /* 최대 높이 설정 */
   line-height: 1.4;
   font-family: inherit;
   overflow-y: hidden; /* 스크롤바 숨김 */
   box-sizing: border-box;
}

.comment-input-box textarea:focus {
   border-color: #80BC50;
   background: #fff;
}

.comment-input-box .send-btn {
   width: 32px;
   height: 32px;
   background: none;
   border: none;
   border-radius: 50%;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   margin-left: 5px;
}
.comment-input-box .send-btn .ri-send-plane-fill {
   font-size: 24px;
   color: #191919;
   vertical-align: middle;
}

.comment-input-box .send-btn .ri-send-plane-fill:hover {
   color: #80BC50;
}

.comment-box .comment-input::plcaeholder {
   color: #F9F9F9;
}
.comment-text {
   display: -webkit-box;
   -webkit-line-clamp: 4;      /* 최대 4줄 */
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;    /* 말줄임표 (...) 처리 */
   word-break: break-all;
   white-space: pre-line;
   font-size: 16px;
   color: #171717;
   line-height: 1.4;
}
.comment-count {
   color: #FF0000;
   font-size: 20px;
   font-weight: 600;
   margin-left: 5px;
}
.more-btn {
   color: #707070;
   cursor: default;
}
.menu-dropdown {
   position: absolute;
   right: 5px;
   top: 15px;
   background-color: white;
   border: 1px solid #C8E6C9;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
   z-index: 1000;
   min-width: 100px;
   display: none;
}

.menu-dropdown.show {
   display: block;
}

.menu-dropdown .menu-item {
   padding: 10px 15px;
   cursor: pointer;
   font-size: 14px;
   transition: background-color 0.2s;
   text-align: center;
}

.menu-dropdown .menu-item:hover {
   background-color: #E6F5E6;
}

.menu-dropdown .menu-item:first-child {
   border-radius: 8px 8px 0 0;
}

.menu-dropdown .menu-item:last-child {
   border-radius: 0 0 8px 8px;
}


.reply-area {
   margin-top: 15px;
}
.reply-item {
   padding: 10px
}
.reply-count {
   color: #FF0000;
   margin-left: 3px;
}

.comment-actions {
   margin-top: 15px;
   display: flex;
   gap: 10px;
}

.comment-action {
   padding: 6px 15px;
   border: 1px solid #E5E7EB;
   border-radius: 15px;
   font-size: 13px;
   cursor: pointer;
   transition: all 0.2s;
}
.new-ico {
   background-color: #D40304;
   color: #fff;
   padding: 1px 5px 0px 5px;
   border-radius: 50%;
   font-size: 10px;
   font-weight: 600;
   margin-left: 6px;
}
.bookmark-ico {
   color: #80BC50;
   font-size: 17px;
   margin-right: 6px;
}
.post-title {
   width: 250px;
   line-height: 1.4;
   overflow: hidden;           /* 넘치는 텍스트 숨기기 */
   text-overflow: ellipsis;
   display: -webkit-box;
  -webkit-line-clamp: 2;      /* 보여줄 줄 수 */
  -webkit-box-orient: vertical;
}
.post-title.wide {
   width:100%;
}
.write-top-box {
   position: absolute;
   bottom: 10px;
   right: 30px;
   z-index: 1002;
   width: 50px;
   height: 50px;
}
.write-top-box .write-btn {
   border: 1px solid #eeeeee;
   border-radius: 50%;
   padding: 14px;
   cursor: pointer;
   background-color: rgb(255 255 255 / 0.4);
   backdrop-filter: blur(2px);
}
.write-top-box .ri-edit-line {
   font-size: 18px;
}
.board-tab-area {
   padding: 25px;
}
.board-tab-box {
   position: sticky;
   top: 0;
   left: 0;
   background-color: #fff;
   z-index: 1000;
   width: 100%;
   padding: 5px;
   border-bottom: 1px solid #EFF1F3;
   white-space: nowrap;
}
.board-tab-box .btn {
   border: 1px solid #E5E7EB;
   color: #767676;
   font-size: 15px;
}
.board-tab-box .btn.selected{
   background-color: #000;
   color: #fff;
   border: none;
}
.vertical-divider {
   font-size: 12px;
   color: #C5C5C5;
   margin: 0px 6px;
}
.devide-line {
   border-bottom: 10px solid #F1F5F9;
}
.view-guest.overlay {
   position: absolute;
   top: 60px;
   left: 0;
   width: 100%;
   height: calc(100% - 60px);
   background: linear-gradient(
     to bottom,
     rgba(255, 255, 255, 0.2),
     rgba(255, 255, 255, 0.8)
   );
   z-index: 10;           /* 입력창보다 위에 */
}
.view-guest-btn {
   width: 370px;
   position: absolute;
   bottom: 20px;
   background-color:#171717;
   padding: 15px 40px;
   border-radius: 60px;
   color:#fff;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   z-index: 11;
}

.note-editable,
.note-editable p,
.note-placeholder {
   font-size: 17px !important;
   line-height: 1.7 !important;
}