@charset "utf-8";


/* 전체 레이아웃 분할 */
.split-layout {
    display: flex !important;
    height: 100vh; /* 브라우저 높이에 고정 */
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/**
 * @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

:where(#bo_v:has(.view-content)) * { color: var(--color-point) !important; }
**/

/** Notice Box **/
.board-notice	{ width: 340px; padding: 10px; margin: 0 auto; text-align: center; box-sizing: border-box; }

/**
.review-board,
#bo_list,
#bo_w,
#bo_v,
.review-list {
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif !important;
}
**/

.bo_fx { position: relative; padding: 20px 0; }
.bo_fx .chk_all { position: absolute; left: 5px; top: 20px; }


.board-category { display: block; position: relative;}
.board-category select {}

#bo_cate_ul {     text-align: center; 
    margin: 20px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3.5px;}
#bo_cate li { display: contents;}

.category-tags {
    display:flex; 
    justify-content:center; 
    flex-wrap:wrap; 
    gap:5px;
    margin: 20px auto ;   /* ✅ 좌우 auto로 박스 자체를 가운데 */
}

.category-tags .tag-chip.is-active {
    color: #a3cca2 !important;
}


.tag-chip {
    font-size:12px; 
    padding: 0 5px;
    border-radius:5px; 
    color: #ffffff !important;
    background:rgba(255,255,255,0.15); 
    display:inline-block;
}

.category-tags .tag-chip:hover{ opacity:0.7; }


.board-write { padding: 0 10px; }
.board-write h3 { font-size: 26px; text-align: center; padding: 30px 0 20px; }
.board-write .write-notice { padding: 10px; font-size: 11px; }
.board-write > dl { position: relative; margin: 10px 0;}
.board-write > dl > dt { width: 70px; position: absolute; line-height: 30px; text-align: center; }
.board-write > dl > dd { width: 100%; margin-left: 0; padding-left: 80px; box-sizing: border-box;}
.board-write input.frm_input.full { width: 100%; display: block; margin: 0px 0; }

.board-viewer.theme-box { display: block; position: relative; padding: 20px; }
.board-viewer .subject { text-align: center; }
.board-viewer .subject em { display: block; position: relative; font-size: 14px; line-height: 1.2; padding-bottom: 10px; }
.board-viewer .subject strong { display: block; position: relative; font-size: 22px; line-height: 1.2; }
.board-viewer .info { margin-top: 20px; padding: 8px 10px; text-align: center; }
.board-viewer .info span { display: inline-block; opacity: .8; }
.board-viewer .info span + span:before { content: ""; display: inline-block; width: 1px; height: 8px; vertical-align: middle; margin: 0 10px; }
.board-viewer .contents { display: block; position: relative; margin: 20px 0; padding: 40px 15px; border-left-width: 0; border-right-width: 0; }


#bo_v_bot { padding: 0px 0; overflow: hidden; 
	align-self: flex-end; /* 부모의 규칙을 깨고 자신만 오른쪽으로 이동 */
	display: flex;        /* flex 레이아웃 적용 */
    justify-content: flex-end; /* 오른쪽 끝으로 정렬 */}
.bo_v_nb { float: left; }
.bo_v_com { display:inline-block }

.board-comment-list { position: relative; }
.board-comment-list .theme-box { padding: 0 !important; border: none !important; }

.board-comment-list .co-line { display: block; position: relative; clear: both; width: 100%; height: 1px; margin: 0; padding: 0; border: none; }
.board-comment-list .item { position: relative; padding: 10px; }
.board-comment-list .item .co-content {
    display: block;
    overflow: visible; /* ✅ 넘치는 부분 보이게 */
    word-break: keep-all;
}

/* 핵심: item이 자식 요소 전체를 감싸도록 */
.board-comment-list .item {
    position: relative;
    padding-left: 18px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right:0;
    display: flow-root; /* ✅ float 자식도 높이에 포함 */
}
.board-comment-form {
    margin-bottom: 10px;
}

/* btn_confirm의 float 제거 */
.board-comment-form .btn_confirm {
    margin-top: 5px !important;
    float: none; /* ✅ float: right 제거 */
    text-align: right; /* ✅ 대신 오른쪽 정렬 */
}
.board-comment-list .co-name { display: flex; margin-bottom: 10px; position: relative; width: auto; top: 0; left: 0; bottom: 0; box-sizing: border-box; }
.board-comment-list .co-info { display: block; text-align: left; font-size: 11px; color: #a3cca2 !important;}
.board-comment-list .co-inner { font-family: dotum; line-height: 1.65; margin-bottom: 10px;}

.board-comment-list .item.reply .co-name { background: none; }
.board-comment-list + .board-comment-write { margin-top: 0px; }

/* 댓글 이미지/비디오 영역 통합 스타일 */

/* 이미지 컨테이너 기본 설정 */
.board-comment-list .item .img_box_wrap {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 10px; 
    margin: 10px 0; 
    height: 405px; /* 고정 높이 유지 */
}

/* 개수별 너비 설정 */
.board-comment-list .item .img_box_wrap .img_box {
    cursor: pointer; 
    border-radius: 5px; 
    overflow: hidden; 
    height: calc(50% - 5px); /* 기본 2단 쌓기 */
}

/* 1개 또는 2개일 때 높이 100% */
.board-comment-list .item .img_box_wrap.img_box_1 .img_box,
.board-comment-list .item .img_box_wrap.img_box_2 .img_box {
    height: 100%;
}

/* 개수별 가로 너비 계산 */
.board-comment-list .item .img_box_wrap.img_box_1 .img_box { width: 100%; }
.board-comment-list .item .img_box_wrap.img_box_2 .img_box,
.board-comment-list .item .img_box_wrap.img_box_4 .img_box { width: calc(50% - 5px); }
.board-comment-list .item .img_box_wrap.img_box_5 .img_box,
.board-comment-list .item .img_box_wrap.img_box_6 .img_box { width: calc(33.33% - 7px); }
.board-comment-list .item .img_box_wrap.img_box_7 .img_box,
.board-comment-list .item .img_box_wrap.img_box_8 .img_box { width: calc(25% - 8px); }

/* 이미지 실제 출력 설정 */
.board-comment-list .item .img_box_wrap img {
    cursor: pointer; 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

/* --- 이미지 3개일 때(img_box_3) 전용 Grid 레이아웃 --- */
.board-comment-list .item .img_box_wrap.img_box_3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}
.board-comment-list .item .img_box_wrap.img_box_3 .img_box {
    width: 100% !important;
    height: 100% !important;
}
.board-comment-list .item .img_box_wrap.img_box_3 .img_box:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.board-comment-list .item .img_box_wrap.img_box_3 .img_box:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.board-comment-list .item .img_box_wrap.img_box_3 .img_box:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* --- 동영상/오디오 레이아웃 --- */
.video_box_wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
    width: 100%;
}
.video_box_wrap .video_box {
    width: 100%;
    background: transparent !important;
    border-radius: 5px;
    overflow: hidden;
    line-height: 0;
}
.video_box_wrap .video_box video {
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    display: block;
}


/* 대댓글 아이템 기본 설정 */
.item.reply {
    position: relative;
    /* 대댓글 단계마다 왼쪽으로 20px씩 밀어줌 */
    padding-left: calc(var(--dep) * 20px + 18px) !important; 
}

/* 세로 가이드라인: repeating-linear-gradient 활용 */
.item.reply::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;

    /* 1. 너비 확보: 현재 깊이만큼 선이 그려질 공간 (예: 2단계면 40px) */
    width: calc(var(--dep) * 20px);
    
    /* 2. 위치: 왼쪽 끝에서부터 시작 */
    left: 18px; /* 첫 번째 선의 시작 위치 미세 조정 */

    /* 3. 선 긋기: 20px 간격으로 2px 두께의 선을 반복 생성 */
    background: repeating-linear-gradient(
        to right,
        rgba(187, 187, 187, 0.3) 0px,
        rgba(187, 187, 187, 0.3) 2px, /* 선 두께 */
        transparent 2px,
        transparent 20px /* 선 간격 */
    );

    pointer-events: none;
    z-index: 1;
}

.board-comment-form { position: relative;}
.board-comment-form .comment_info {display: flex; gap:5px; margin: 1px 0;}
.comment_info label {
    white-space: nowrap; /* 핵심: 줄바꿈 방지 */
    flex-shrink: 0;      /* 공간이 부족해도 크기를 줄이지 않음 */
    display: flex;
    align-items: center;
}

.board-comment-form .comment_info a {    
    white-space: nowrap; /* 핵심: 줄바꿈 방지 */
    flex-shrink: 0;      /* 공간이 부족해도 크기를 줄이지 않음 */
    display: flex;
    align-items: center;
    height: 30px;}
.board-comment-form textarea { width: 100%;display: block; height: 100px; /*resize: none; border: none;*/ background-color: #000 !important; }
.board-comment-form .btn_confirm {margin: 5px 0;float: right;}

#rating-stars { font-size: 24px; color: #f39c12; cursor: pointer; line-height: 1; }
.rating-input { width: 50px; text-align: center; }
dd.rating-wrap { display: flex; align-items: center; gap: 6px; }

.form-bpd { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.form-bpd dl { display: grid; grid-template-columns: 70px 1fr; align-items: center; margin: 0; padding: 0; }
.form-bpd dt { margin: auto; }
.form-bpd dd { margin: 0;}
.form-bpd .date-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; 
    line-height: 30px; height: 30px;}
.form-bpd select.frm_input,
.form-bpd input[type="date"].frm_input { margin: 0 10px;width: 100%; min-width: 0; box-sizing: border-box; }

.top-line { display: flex; flex-wrap: wrap; align-items: center;gap:10px;}
.top-line label { margin-right: 4px; white-space: nowrap; line-height: 2.5; }
.top-line select,
.top-line input[type="text"] { height: 30px; line-height: 30px; box-sizing: border-box; }
.top-inline .item { display: inline-flex; align-items: center; gap: 6px; }

.poster-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.poster-grid input[type="text"] { width: 100% !important; box-sizing: border-box; }

.review-list { 
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap; gap: 10px; 
	justify-content: center;
	margin: 35px auto; }

/** 카드 **/
.review-item { 
	position: relative; border-radius: 0px; overflow: hidden; background: #111; color: #fff; width: var(--card-width); height: var(--card-height); min-height: 250px; max-height: 1000px; box-shadow: 0 0 0px #00000042; 
}
.review-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 75%; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 100%); z-index: 1; pointer-events: none; }

.review-item.is-locked::after {
    display: none;
}

.lock_overlay {
    position: absolute;
    inset: 0;
    background: #a3cca2;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.lock_overlay img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: none;
}

.review-item .card-link { 
	box-shadow: inset 0 0 0 1px #A3CCA2;
	position: absolute; inset: 0; z-index: 10; background: transparent; }
.review-item .card-link:hover { cursor: pointer;}

.review-item.is-blind .review-thumb { filter: blur(10px); -webkit-filter: blur(10px); transform: scale(1.02); position: relative; }
.review-item.is-blind .review-cover-blind { display: none !important; }

.review-thumb { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; width: 100%; height: 100%; }
.review-cover-blind { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.75), rgba(0,0,0,.75) 10px, rgba(255,255,255,.25) 10px, rgba(255,255,255,.25) 20px); z-index: 2; }

/**작품정보**/
.review-content { 
	position: absolute; bottom: 20px; left: 20px; right: 20px; 
	display: flex; flex-direction: column; align-items: flex-start; 
	gap: 5px; 
	z-index: 11; }

/**제목**/
.review-content .rating-line,
.review-content .review-title { display: block; }

/**제목**/
.review-title { word-break: keep-all; font-size: 16px; font-weight: bold; line-height: 1.45; white-space: normal; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.review-title a { word-break: keep-all; display: inline-block; font-weight: bold; font-size: 16px; line-height: 1.45; color: #fff !important; text-decoration: none; text-shadow: 0 0px 0px rgba(0,0,0,.45); }

.review-bgm-ico{
  font-size: 12px;
  opacity: 0.7;
  margin-left:2px;
  vertical-align: middle;   /* ✅ */
}

.title { font-size: 16px; font-weight: bold; color: #fff !important; line-height: 1.45; word-break: keep-all; overflow-wrap: break-word; }

/* 부제목 */
.review-subtitle {
    color: #fff !important
    display: block;
    font-size: 12px;      /* 제목보다 작은 크기 */
    word-break: keep-all;    /* 한글 단어 끊김 방지 */
    max-width: 100%;
    opacity: 0.7;
}

/**해시태그**/
/* 모든 태그 공통 (a 태그에 직접 디자인) */
.tags {
	display: flex;       /* flex로 설정해야 gap이 먹습니다 */
    flex-wrap: wrap;    /* 태그가 많아지면 다음 줄로 넘어가게 설정 */
    gap: 5px;           /* 태그 사이의 간격 5px */
    align-items: center;
}

.custom-tag {
    display: inline-block;
    padding: 0 5px;       /* 패딩을 여기서 조절 */
    border-radius: 5px;
    font-size: 12px;
    text-decoration: none !important;
    transition: all 0s ease;
}

/* 일반 태그 스타일 */
.custom-tag.is-tag {
    color: #fff !important;
    background: rgba(255, 255, 255, .15) !important;
}

/* 카테고리 전용 스타일 (검정색) */
.custom-tag.is-category {
    color: #fff !important;
    background: #A3CCA2 !important;
}

/* 마우스 올렸을 때 공통 */
.custom-tag:hover {
    opacity: .7;
}

/* 별점 영역 정렬 */
.rating-line { display: flex; align-items: center; 
	opacity: 1; }

/* 1. 기존 가상 요소(::before) 스타일 완전히 끄기 (잔상 제거 핵심) */
.rating-stars .star.half2::before,
/* 반 별 아이콘 스타일 */
.rating-stars .half2 {
    /* 1. 배경을 반반(노란색/회색)으로 나눕니다. */
    background: linear-gradient(90deg, #f5c342 50%, rgba(255,255,255,0.15) 50%) !important;
    
    /* 2. 그 배경이 아이콘 글자 모양대로만 보이게 깎습니다. */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    
    /* 3. 원래 아이콘 색상을 투명하게 만들어 배경이 보이게 합니다. */
    color: transparent !important;
    
    display: inline-block;
    line-height: 1;
}

/* 꽉 찬 별과 빈 별은 기존 방식 유지 */
.rating-stars .full2 { color: #f5c342 !important; }
.rating-stars .empty2 { color: rgba(255,255,255,0.15) !important; }


/**줄거리**/
.review-summary { z-index: 12; 
    font-family: dotum;
	position: absolute; inset: 0; 
	background: rgba(0,0,0,.75); 
	box-shadow: inset 0 0 0 1px #A3CCA2;
	color: #fff; 
	padding: 20px 20px; opacity: 0; transition: opacity .25s ease; overflow-y: auto; 
	word-break: keep-all;
	line-height: 1.65 !important;
	/* 중요: 드래그 허용 설정 */
    user-select: text !important; 
    -webkit-user-select: text !important;
    
    /* 기본 상태에선 마우스 무시 (아래 레이어 클릭용) */
    pointer-events: none; }

.review-item:hover .review-summary { 
	opacity: 1; 
	cursor: text; /* 마우스 커서를 글자 선택 모양으로 강제 변경 */
	line-height: 1.65 !important;
    pointer-events: none; /* hover시에도 none 유지 → 링크 클릭 가능 */
}


#bo_list .review-item .review-summary {
	display: -webkit-box !important;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden !important;
	text-overflow: ellipsis;
	white-space: normal !important;
	font-size: 12px; 
	line-height: 1.65 !important; 
	height: auto !important;
	max-height: calc(1.65em * 6) !important;
}

/* view */

/*
.view-fullbleed.view-fullbleed { 
	font-family: "Pretendard"; }
*/

.view-fullbleed::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.75) 100%),
		var(--view-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.content-wrap {
	display: flex; flex-direction: row; align-items: flex-start; 
	gap: 0px; 
}
.review-info {
	display: flex; flex-direction: column; align-items: flex-start; 
	gap: 5px; 
	margin-top: 20px;
	margin-bottom: 35px;
	z-index: 11;
}


.review-data-wrap {
    width: 25%;
    min-width: 320px;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    padding: 70px 35px 0px 35px; /* 하단 패딩을 그라데이션 높이만큼 확보 */
    box-sizing: border-box;
    background: rgba(0, 0, 0, 1);
    
    /* 스크롤바 숨기기 */
    -ms-overflow-style: none;
    scrollbar-width: none;
    
    /* 중요: 이 설정이 있어야 내부 요소가 고정됩니다 */
    position: relative; 
    background-attachment: local; /* 배경색이 컨텐츠와 함께 스크롤되도록 방지 */
}

.review-data-wrap::-webkit-scrollbar {
    display: none;
}

/* 하단 고정 그라데이션 */
.review-data-wrap::after {
    content: "";
    /* absolute는 부모인 .review-data-wrap 기준이지만, 
       스크롤에 영향을 받지 않으려면 컨테이너 바닥에 고정되어야 함 */
    position: sticky; 
    bottom: 0;
    left: 0;
    
    /* 박스 밖으로 삐져나가지 않게 배치 */
    margin-top: -70px; 
    display: block;
    
    width: 100%;
    height: 70px;
    
    /* 그라데이션: 바닥(Black) -> 위(Transparent) */
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    
    /* 글자 클릭 및 스크롤 방해 금지 */
    pointer-events: none; 
    z-index: 10;

  opacity: 1;
  transition: opacity .25s ease;

}


/* 스크롤 맨 아래면 그라데이션 숨김 */
.review-data-wrap.is-scroll-end::after {
  opacity: 0;
}


/* Chrome, Safari, Opera, Edge(Chromium) 스크롤바 숨기기 */
.review-data-wrap::-webkit-scrollbar {
    display: none;
}

/* 부모 컨테이너: 자식 요소의 기준점이 됩니다 */
.review-poster-img {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
    overflow: hidden;
    line-height: 0;
}

.review-poster-img img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

/* BGM 컨트롤러 영역 */
.bgm-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;             /* 부모 너비에 맞춤 */
    max-width: 100%;         /* 부모를 절대 넘지 않도록 제한 */
    box-sizing: border-box;  /* 패딩이 너비에 포함되도록 설정 */
    overflow: hidden;        /* 혹시나 넘치는 요소 숨김 */
    margin-top: 10px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.5);

}

.absolute-bgm {
	width: calc(100% - 20px);
	height: 35px;
	border-radius: 5px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 99;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    gap: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
}

/* 이퀄라이저 애니메이션 */
.equalizer {
    display: flex;
    align-items: center;
    height: 16px;
    gap: 2px;
    margin: 5px;
    width: 12px;
    filter: drop-shadow(0 0 3px rgb(0,0,0, 0.5));

}

.equalizer span {
    display: block;
    width: 3px;
    background-color: #A3CCA2;
    height: 10%;
}

.equalizer.is-playing span {
    animation: eq-bounce 0.8s infinite ease-in-out;
}

.equalizer.is-playing span:nth-child(1) { animation-delay: -0.4s; }
.equalizer.is-playing span:nth-child(2) { animation-delay: -0.2s; }
.equalizer.is-playing span:nth-child(3) { animation-delay: -0.6s; }

@keyframes eq-bounce {
    0%, 100% { height: 10%; }
    50% { height: 100%; }
}

/* 버튼 스타일 */
.bgm-btn {
	width: 12px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    background: none;
    border: none;
    padding: 0;
    margin: 5px;
    filter: drop-shadow(0 0 3px rgb(0,0,0, 0.5));
}

.bgm-btn:hover { opacity: 0.7; }
/* 기존 .bgm-btn 스타일 유지 */

/* 투명 링크 레이어: 버튼 영역 전체를 덮음 */
.invisible-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    text-decoration: none !important;
    background: transparent;
}

.rating { font-size: 1.2rem; margin-bottom: .5em; }

.subnote { font-family: dotum; word-break: keep-all;
	font-size: 12px; line-height: 1.65 !important; color: #fff;}

.comment-wrap {
	width: 75%;
    flex-grow: 1;
    height: 100%;
    overflow-y: auto; /* 독립 스크롤 */
    padding: 70px;
    box-sizing: border-box;
    background: transparent;
}

#bo_v.view-fullbleed .content-wrap { width: 100% !important; }

/* 왼쪽 그룹 (진행상황/날짜) */
.review-meta-wrap {
	display: flex;
    justify-content: space-between; /* 여기서 양 끝으로 밀어줍니다 */
    align-items: center;
    width: 100%;
    gap: 10px;
}

/* 진행상황 */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 15px; /* 알약 모양 */
    text-decoration: none !important;
    box-shadow: 0 0px 0px rgba(0,0,0,0);
    transition: transform 0s;
    opacity: 1;
    white-space: nowrap;
}

.status-badge:hover {
    transform: scale(1.00);
    opacity: .5;
}

/* 상태별 고유 배경색 */
/* 감상 중 */
.status-badge.ing {
	color: #000000 !important;
    background-color: #ffffff !important;
}

/* 감상 완료 */
.status-badge.done {
    color: #ffffff !important;
    background-color: #000000 !important;
}

/* 중도 하차 */
.status-badge.stop {
    color: #ffffff !important;
    background-color: #000000 !important;
}

.date { font-size: 12px; opacity: 0.7; }
.content-date{
    width: 100%;
    display: flex;
  justify-content: flex-end;
  font-size: 12px;
  opacity: 0.7; 
}

/* 감상 */
.view-content { padding: 20px;
	background:  rgba(0,0,0,.5);
	}

.view-content p,
.view-content span,
.view-content .view-text {
  white-space: pre-wrap;   /* \n 줄바꿈 살림 */
  overflow-wrap: anywhere; /* 긴 단어도 줄바꿈 */
  word-break: keep-all;
}

a.blur-txt { filter: blur(0px); color: currentColor; cursor: pointer; }
a.none-blur { filter: blur(0); font-family: inherit; }
span.italictext { font-style: italic; font-family: inherit; }
span.txt-box { color: <?=$css['color_default'][0]?>; background-color: <?=$css['color_point'][0]?>; padding: 0 2px; }
.blurtext { filter: blur(0px); -webkit-filter: blur(0px); transition: filter .2s ease, -webkit-filter .2s ease; }
.blurtext.off { filter: blur(0) !important; }

#toggle_bo_vc.ui-btn{
  width: 100%;
  height: 28px;
  line-height: 28px;   /* 버튼 텍스트 수직 중앙 */
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 기본 접힘 */
#bo_vc.is-collapsed{
  display: none;
}


@media all and (max-width: 820px) {

.view-fullbleed::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 100%),
		var(--view-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

  /* ✅ 부모가 100vh/hidden이면 페이지 스크롤이 막힘 */
  .content-wrap.split-layout{
    flex-direction: column !important;
    height: auto !important;          /* ← 100vh 해제 */
    overflow: visible !important;     /* ← hidden 해제 (중요) */
    width: 100%;
    min-width: 340px;
  }

  /* ✅ 상단 review는 sticky로 고정 느낌 */
  .review-data-wrap{
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;     /* ← 내부 스크롤 제거 */
    padding: 70px 20px 35px 20px !important;

    position: sticky !important;
    top: 0;                           /* 상단 고정 (헤더 있으면 top 값 조절) */
    z-index: 50;
  }

  /* ✅ review-data-wrap 안에서 포스터(25%) / info(75%) + 간격 20px */
  .review-data-wrap{
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start;
  }

  .review-data-wrap .review-poster-img{
    flex: 0 0 25%;
    width: 25%;
    min-width: 140px;
    margin-bottom: 0 !important;
  }

  .absolute-bgm {
    gap: 0px;
}

  .review-data-wrap .review-info{
    flex: 1 1 75%;
    width: 75%;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ✅ 아래 comment는 페이지 스크롤을 타게 */
  .comment-wrap{
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;     /* ← 내부 스크롤 제거 */
    padding: 20px !important;
    margin-bottom: 35px;
  }

  /* 모바일에선 하단 고정 그라데이션(내부 스크롤용) 끄기 */
  .review-data-wrap::after{
    display: none !important;
  }

}

.comment-box {
    display: block;
    width: 100%;
}