@charset "utf-8";
/* ==========================================================
   reply.css — 리얼후기 (reply) 갤러리 목록 / 상세
   페이지: /board/reply/index, /board/reply/read
   - 메인·서비스 소개 페이지와 같은 디자인 체계를 쓴다.
     색·크기 값은 site.css 의 :root 토큰만 참조하고 숫자를 직접 적지 않는다
     (--brand / --ink / --ink-2 / --muted / --line / --radius / --shadow,
      타이포 등급 --fs-h2 / --fs-card / --fs-body / --fs-menu / --fs-meta).
   - 게시판 공용 CSS(board.css)는 전 사이트 공유라 건드리지 않는다.
     이 페이지에 필요한 보정만 .review-page 로 스코프를 한정해 여기에 둔다.
   ========================================================== */

/* ---------- 페이지 바탕 ---------- */
/* 레거시 .programCon 의 여백을 걷어내고 섹션 리듬을 다른 페이지(불편접수·FAQ)와 맞춘다.
   ★ board.css 는 .programCon 을 1200px 로, 칩 영역(.chip_filter_wrapper > .inner)은
     1320px + 다른 좌우 패딩으로 잡는다. 둘이 어긋나면 제목과 칩의 시작선이 따로 논다.
     그래서 이 페이지에서는 바깥 폭을 칩 기준(1320px)에 맞추고, 안쪽 블록도 같은 패딩을 쓴다. */
.review-page{
	max-width:1320px; margin:0 auto;
	padding:clamp(40px,5vw,52px) 0 clamp(70px,8vw,110px);
	background:var(--bg);
}
/* 제목 · 검색 · 목록이 칩과 같은 선에서 시작하도록 폭·패딩을 맞춘다
   (칩 영역은 board.css 가 그리므로 그 값을 그대로 따라간다) */
.review-page .rv-head,
.review-page > .inner{
	width:100%; max-width:1320px; margin-left:auto; margin-right:auto; box-sizing:border-box;
	padding-left:clamp(16px,4vw,48px); padding-right:clamp(16px,4vw,48px);
	float:none;			/* 레거시 레이아웃이 float 을 쓰는 경우 대비 */
}
.review-page > .inner::after{content:""; display:block; clear:both;}

/* ---------- 페이지 머리 (제목 + 설명) ---------- */
/* 불편접수(.cp-head) · FAQ(.fq-head) 와 같은 구성 : 가운데 정렬, 브랜드색 소제목 + 큰 제목 + 설명.
   아래 여백만 조금 더 준다 — 이 페이지는 바로 밑에 분류 탭이 붙기 때문. */
.review-page .rv-head{
	text-align:center;
	margin-top:0; margin-bottom:clamp(32px,4vw,56px);
}
.review-page .rv-title{
	margin:0; color:var(--ink);
	font-size:var(--fs-h2); font-weight:var(--fw-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2);
}
.review-page .rv-title .eyebrow{
	display:block; margin-bottom:10px; color:var(--brand);
	font-size:var(--fs-meta); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
/* JSP 컴파일(trimSpaces)에서 앞 단어와의 공백이 사라지므로 여백을 CSS 로 확보.
   제목은 불편접수·FAQ 와 같이 한 가지 색으로 둔다(강조색은 위 소제목이 맡는다) */
.review-page .rv-title .tit-point{margin-left:.26em;}
.review-page .rv-desc{
	margin:14px 0 0; color:var(--ink-2);
	font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
/* 설명 문구의 줄바꿈은 모바일에서만 */
.review-page .rv-desc .m-br{display:none;}
@media (max-width:640px){
	.review-page .rv-desc .m-br{display:inline;}
}

/* ---------- 목록: 갤러리 카드 ---------- */
.review_gallery .programBody{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:clamp(32px,3.6vw,48px) clamp(20px,2.2vw,30px);
	margin-top:clamp(28px,3.2vw,40px);
}
.review_gallery .review_card > a{display:block; cursor:pointer;}
.review_gallery .review_thumb{
	position:relative;
	aspect-ratio:4 / 3;
	overflow:hidden;
	border-radius:var(--radius);
	background:var(--bg-alt);
	box-shadow:0 8px 22px rgba(24,34,66,.10);
	transition:box-shadow .25s ease;
}
.review_gallery .review_card:hover .review_thumb{box-shadow:0 16px 34px rgba(24,34,66,.18);}
.review_gallery .review_thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .35s ease;
}
.review_gallery .review_thumb img.noimg{
	object-fit:contain;
	padding:20%;
	box-sizing:border-box;
}
.review_gallery .review_card:hover .review_thumb img{transform:scale(1.05);}
/* 영상이 첨부된 후기 표시 */
.review_gallery .review_thumb .review_movie_ico{
	position:absolute;
	right:12px;
	bottom:12px;
	width:34px;
	height:34px;
	border-radius:50%;
	background:rgba(24,34,66,.62);
	color:#fff;
	font-size:var(--fs-meta);
	display:flex;
	align-items:center;
	justify-content:center;
}
.review_gallery .review_info{padding:clamp(14px,1.6vw,18px) 4px 0;}
.review_gallery .review_meta{
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	margin-bottom:8px;
}
/* 목록 카드의 알약은 상세보다 한 단계 작게 (아래 공용 알약 규칙보다 먼저 나오므로 .review_info 로 우선순위를 높인다) */
.review_gallery .review_info .review_meta span{padding:5px 10px; font-size:12px;}
/* 분류 = 브랜드색 알약 / 지역 = 옅은 회색 알약 */
.review_gallery .review_meta span,
.review_read .review_meta span{
	display:inline-block;
	padding:6px 12px;
	border-radius:999px;
	background:var(--brand);
	color:#fff;
	font-size:var(--fs-meta); font-weight:var(--fw-meta); line-height:1; letter-spacing:var(--ls-meta);
}
.review_gallery .review_meta span.region,
.review_read .review_meta span.region{
	background:var(--bg-alt);
	color:var(--ink-2);
	box-shadow:inset 0 0 0 1px var(--line);
}
/* 카드 제목 — 두 줄까지 노출하고 그 뒤를 생략한다.
   3열 카드라 카드 제목 등급(22~25px)은 커 보여 18px 로 낮춘다 (모바일은 아래 반응형에서 17px) */
.review_gallery .review_tit{
	color:var(--ink); font-family:var(--font-pre);
	font-size:18px; font-weight:var(--fw-card); line-height:1.55; letter-spacing:var(--ls-card);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.review_gallery .review_card:hover .review_tit{color:var(--brand-deep);}
.review_gallery .review_date{
	margin-top:8px;
	color:var(--muted);
	font-size:var(--fs-meta); font-weight:var(--fw-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta);
}

/* ---------- 상세 ---------- */
.review_read .review_meta{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:6px;
	margin-bottom:22px;
}
/* 상단 검정 구분선 제거 (board.css .beaf_read_top 의 border-top) */
.review_read .beaf_read_top{border-top:0;}
/* 상세 제목 — board.css .login_tit01(30px) 보다 한 단계 작게 카드 제목 등급을 쓴다.
   두 줄로 넘어가면 카드 제목 기본 행간(1.35)이 빽빽해 보여 조금 넓힌다 */
.review_read .login_tit01,
.review_read .login_tit01 .title_value{
	font-family:var(--font-pre);
	font-size:var(--fs-card); font-weight:700; line-height:1.5; letter-spacing:var(--ls-card);
	word-break:keep-all;	/* 한글이 단어 중간에서 끊기지 않게 어절 단위로 줄바꿈 */
	overflow-wrap:anywhere;	/* 띄어쓰기 없는 긴 문자열(URL 등)은 넘치지 않게 끊는다 */
	text-wrap:balance;		/* 여러 줄일 때 줄 길이를 고르게 (미지원 브라우저는 일반 줄바꿈) */
}
.review_read .beaf_read_top .recruitment_alt{
	margin-top:15px;
	font-size:var(--fs-meta); font-weight:var(--fw-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta);
}
/* 본문 내용 양쪽(전체) 정렬 — 마지막 줄은 왼쪽에 붙여 단어 사이가 벌어지지 않게.
   ★ site.css 가 span 등에 word-break:keep-all(어절 단위)을 걸어 두어, 그대로 양쪽 정렬하면
     어절이 통째로 다음 줄로 넘어가면서 남은 폭이 띄어쓰기 몇 곳에 몰려 크게 벌어진다.
     본문만 normal(한글은 글자 단위, 영문은 단어 단위)로 풀어 줄 끝을 채운다 */
.review_read .readCon,
.review_read .readCon *{text-align:justify; text-align-last:left; word-break:normal; line-height:1.7;}
/* 하단 주변 글 목록 — 제목을 본문 크기로 줄이고, 작성자(관리자) 칸은 숨긴다.
   readPageNav.jsp 는 전 게시판 공용이라 출력은 그대로 두고 이 페이지에서만 가린다.
   ★ board.css 의 모바일 규칙이 .title_value 에 font-size !important 를 걸어 두어 여기도 !important 로 맞선다 */
.review_read .read_page_list .noice_board_alt_box .tit,
.review_read .read_page_list .noice_board_alt_box .tit .title_value{
	font-family:var(--font-pre);
	font-size:var(--fs-body) !important; font-weight:700; line-height:1.55; letter-spacing:var(--ls-body);
}
.review_read .read_page_list .noice_board_alt_box .date_box.order3{display:none !important;}
/* 목록 맨 위 구분선 제거 */
.review_read .read_page_list .recruitment_table01{border-top:0;}
/* 목록 버튼 — board.css 기본(300×60, 20px)보다 작게 */
.review_read .mok_rok_btn .btn{
	width:180px; height:46px; font-size:var(--fs-body);
}
/* 날짜는 오른쪽 끝에 붙인다 */
.review_read .read_page_list .noice_board_alt_box .date_box.order2{
	margin-left:auto; text-align:right;
	color:var(--muted); font-size:var(--fs-meta);
}
.review_read .review_media{margin:clamp(24px,2.8vw,30px) 0;}
.review_read .review_media .review_movie{margin-bottom:25px;}
.review_read .review_media .review_img{
	margin-bottom:20px;
	text-align:center;
}
.review_read .review_media .review_img img{
	max-width:100%;
	height:auto;
	border-radius:var(--radius);
}
.review_read .review_media .review_img p{
	margin-top:8px;
	color:var(--muted);
	font-size:var(--fs-meta); font-weight:var(--fw-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta);
}

/* ==========================================================================
   게시판 공용 UI 보정 (이 페이지에서만)
   분류 탭 · 검색 · 페이징은 board.css 가 그린다. 전 사이트 공유라 그 파일은 건드리지 않고,
   불편접수(consult_complaint.css) · FAQ 페이지와 같은 모양이 되도록 여기서 덮어쓴다.
   ========================================================================== */

/* ---------- 분류 탭(칩) ---------- */
/* 서비스 소개 페이지의 탭(.tabs button)과 같은 알약 모양으로 맞춘다 */
.review-page .chip_filter_wrapper{
	margin:0 0 clamp(20px,2.4vw,30px); padding:0; border:0; background:none;
}
.review-page .chip_filter_row{
	display:flex; align-items:center; flex-wrap:wrap; gap:10px;
	margin:0; padding:0; border:0;
}
/* "카테고리" 라벨은 감춘다 — 칩만으로 무엇을 고르는지 충분히 읽힌다 */
.review-page .chip_filter_label{display:none;}
.review-page .chip_filter_chips{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0;}
.review-page .chip_filter_item{
	display:inline-flex; align-items:center; flex-shrink:0; white-space:nowrap;
	height:44px; padding:0 22px; margin:0; border:0; border-radius:999px;
	background:var(--card); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line);
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:var(--lh-menu); letter-spacing:var(--ls-menu);
	transition:background .15s, color .15s, box-shadow .15s;
}
.review-page .chip_filter_item:hover{background:var(--brand-soft); color:var(--brand-deep);}
.review-page .chip_filter_item.active{background:var(--brand); color:#fff; box-shadow:none;}

@media (max-width:768px){
	/* 모바일에서는 탭을 한 줄로 나열하고 좌우 터치 슬라이드(가로 스크롤)되도록 설정 */
	.review-page .chip_filter_wrapper{
		margin-bottom:18px;
	}
	.review-page .chip_filter_row{
		flex-wrap:nowrap; width:100%;
	}
	.review-page .chip_filter_chips{
		flex-wrap:nowrap; width:100%; gap:8px;
		overflow-x:auto; overflow-y:hidden;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none; -ms-overflow-style:none;
		padding:4px 0 8px;
	}
	.review-page .chip_filter_chips::-webkit-scrollbar{display:none;}
	.review-page .chip_filter_item{
		height:38px; padding:0 16px; font-size:14px;
	}
	/* 칩을 가운데 정렬 — justify-content:center 는 넘칠 때 앞쪽 칩이 잘려 스크롤로도 못 보므로
	   양 끝 칩의 auto 여백으로 가운데에 둔다(넘치면 여백이 0 이 되어 처음부터 스크롤된다) */
	.review-page .chip_filter_item:first-child{margin-left:auto;}
	.review-page .chip_filter_item:last-child{margin-right:auto;}
}

/* ---------- 페이징 ---------- */
.review-page .prd_page_nav_wrapper{
	display:flex; align-items:center; justify-content:center; gap:6px;
	margin:clamp(28px,3.4vw,44px) 0 0; padding:0;
}
.review-page .prd_page_nav_num_box{display:flex; align-items:center; gap:6px;}
.review-page .prd_page_nav_wrapper a{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:40px; height:40px; padding:0 8px; margin:0; border:0; border-radius:10px;
	background:var(--card); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-2);
	font-size:var(--fs-meta); font-weight:600; transition:background .15s, color .15s, box-shadow .15s;
}
.review-page .prd_page_nav_wrapper a:hover{background:var(--brand-soft); color:var(--brand-deep);}
/* 현재 페이지 */
.review-page .prd_page_nav_wrapper a.on,
.review-page .prd_page_nav_wrapper a.active,
.review-page .prd_page_nav_wrapper strong{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:40px; height:40px; padding:0 8px; border-radius:10px;
	background:var(--brand); color:#fff; box-shadow:none; font-size:var(--fs-meta); font-weight:700;
}
.review-page .prd_page_nav_arw img{width:14px; height:auto; opacity:.6;}
.review-page .prd_page_nav_arw.next img{transform:rotate(180deg);}
/* 더보기(모바일) — 레거시 board.css 의 사각 회색 배경 및 외곽 테두리 리셋 */
.review-page .mo_programPage{
	margin:clamp(20px,2.4vw,32px) 0 0; text-align:center;
	height:auto; line-height:normal; background:none; border:0; border-radius:0; box-shadow:none;
}
.review-page .mo_programPage:hover{
	background:none; border:0; box-shadow:none;
}
.review-page .mo_programPage a{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	width:auto; height:48px; padding:0 28px; border-radius:999px;
	background:var(--card); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-2);
	font-size:var(--fs-meta); font-weight:600; text-decoration:none;
	transition:background .15s, color .15s, box-shadow .15s;
}
.review-page .mo_programPage a::after{display:none;}
.review-page .mo_programPage a:hover{
	background:var(--brand-soft); color:var(--brand-deep); box-shadow:inset 0 0 0 1px var(--brand-soft);
}

/* ---------- 반응형 ---------- */
@media all and (max-width:1024px){
	.review_gallery .programBody{
		grid-template-columns:repeat(2,1fr);
	}
}
@media all and (max-width:640px){
	.review_gallery .programBody{
		grid-template-columns:1fr;
		gap:clamp(24px,6vw,30px);
	}
	.review_gallery .review_tit{font-size:17px;}
}