@charset "utf-8";
/* ==========================================================================
   게시글 보기 페이지 스킨   /css/board_view_v1.css
   2026-07-26  /board/view.asp 에서 무조건 로드 (전 분양몰 공통)

   · 스코프는 html.page_board_view — 게시글 상세 화면에서만 적용된다.
   · 토큰(--bd-*)은 게시판 목록 스킨(board_list_v2.css)과 동일하게 맞춰
     목록 → 상세 이동 시 같은 화면처럼 보이도록 한다.
   · 마크업(.commuPostWrap / .postSec / .otherTbList …)은 전 분양몰 공용
     소스라 건드리지 않고 CSS 로만 재구성한다.
   · view.asp 의 인라인 <style> 보다 뒤에서 로드되고 스코프로 특이도가
     높아 그대로 덮는다.
   · 메인컬러는 몰별 --sitecolor1 을 승계하므로 몰마다 자기 색이 적용된다.
   ========================================================================== */

html.page_board_view{
	--bd-accent:      var(--rr-primary, var(--sitecolor1, #2E2E2E));
	--bd-accent-soft: var(--rr-primary-soft, var(--sitecolor3, #F4F5F7));

	--bd-ink:         var(--rr-ink, #17191D);
	--bd-ink-sub:     var(--rr-ink-2, #5F6672);
	--bd-ink-mute:    var(--rr-ink-3, #9AA1AD);

	--bd-line:        var(--rr-line, #E6E8EC);
	--bd-line-strong: var(--rr-line-strong, #D4D8DF);
	--bd-surface:     #fff;
	--bd-surface-alt: var(--rr-bg-soft, #F7F8FA);

	--bd-radius:      14px;
	--bd-radius-s:    10px;
	--bd-radius-xs:   8px;

	--bd-shadow:      0 1px 2px rgba(20,24,33,.04), 0 6px 16px rgba(20,24,33,.05);
	--bd-shadow-hover:0 6px 14px rgba(20,24,33,.08), 0 14px 30px rgba(20,24,33,.09);
	--bd-ease:        .22s cubic-bezier(.2,.8,.3,1);
}

/* ── 0. 폰트 ─────────────────────────────────────────────────────────────
   ★/css/base.css 의 로컬 Pretendard 는 서브셋이 아니라 웨이트당 870~940KB 다.
     이 화면은 Light/Regular/Bold 3종을 받아 약 2.7MB 를 폰트에만 썼다.
     스택에서 로컬 'Pretendard' 를 빼고 다이나믹 서브셋('Pretendard Variable')만
     쓰게 하면 글꼴 모양은 그대로면서 필요한 글자만 조각으로 받는다.
     ★아이콘 폰트(.material-icons / .iconfont)는 반드시 제외해야 한다
       — 포함하면 아이콘이 글자로 깨진다.                                   */
html.page_board_view body,
html.page_board_view body input,
html.page_board_view body select,
html.page_board_view body textarea,
html.page_board_view body button,
html.page_board_view .commuPostWrap *:not(.material-icons):not(.iconfont),
html.page_board_view .otherTbList *:not(.material-icons):not(.iconfont){
	font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
	             'Apple SD Gothic Neo', 'Noto Sans KR', Arial, 'Malgun Gothic', dotum, sans-serif;
}
html.page_board_view .commuPostWrap,
html.page_board_view .otherTbList{ letter-spacing: -.02em; }

/* ── 1. 상단 타이틀 배너 (목록 화면과 동일) ──────────────────────────── */
html.page_board_view .commuPostWrap .topBanner{
	padding: 56px 0 !important;
	background-color: var(--bd-surface-alt) !important;
	border-bottom: 1px solid var(--bd-line) !important;
	color: var(--bd-ink) !important;
	font-size: 32px !important;
	font-weight: 800 !important;
	letter-spacing: -.035em !important;
	line-height: 1.2 !important;
}

/* ── 2. 본문 컬럼 정렬 ───────────────────────────────────────────────────
   ★원본은 .commuBox 에 margin-top:210px 가 하드코딩돼 있어 좌측 메뉴보다
     본문이 210px 아래에서 시작했다(좌측에 큰 빈 공간). 위를 맞춘다.
   ★width 는 게시판 설정값이 인라인 style 로 박혀 컬럼보다 좁게 나온다.
     inline 을 이기려면 !important 가 필요하다.                            */
html.page_board_view .commuPostWrap .commuBox{
	margin-top: 0 !important;
	margin-bottom: 60px !important;
	width: 100% !important;
	max-width: 100% !important;
}
html.page_board_view .commuPostWrap .sub_contents .PageWrapSize,
html.page_board_view .commuPostWrap .sub_contents .LeftWrapSize{ margin-top: 36px !important; }

/* ── 3. 게시글 카드 ─────────────────────────────────────────────────── */
html.page_board_view .commuPostWrap .postSec{
	margin: 0 0 28px 0 !important;
	padding: 30px 34px 34px !important;
	border: 1px solid var(--bd-line) !important;
	border-radius: var(--bd-radius) !important;
	box-shadow: var(--bd-shadow) !important;
	color: var(--bd-ink) !important;
	background: var(--bd-surface);
}

/* 상단 : 게시판 이름 뱃지 + 목록으로 + 더보기 */
html.page_board_view .commuPostWrap .postSec .topCate{ margin-bottom: 18px; }
html.page_board_view .commuPostWrap .postSec .topCate .cateMenu{
	padding: 7px 16px !important;
	border-radius: 999px !important;
	background-color: var(--bd-accent-soft) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: -.02em;
}
html.page_board_view .commuPostWrap .postSec .topCate .cateMenu a{ color: var(--bd-accent) !important; }
html.page_board_view .commuPostWrap .postSec .topCate .rgtBtns{ margin-top: 2px !important; display: flex; align-items: center; gap: 8px; }
html.page_board_view .commuPostWrap .postSec .topCate .rgtBtns .listBtn{
	display: inline-flex; align-items: center;
	height: 36px; margin-right: 0 !important; padding: 0 16px;
	border: 1px solid var(--bd-line-strong); border-radius: 999px;
	background: var(--bd-surface);
	color: var(--bd-ink-sub) !important;
	font-size: 13px !important; font-weight: 600;
	box-shadow: 0 1px 2px rgba(20,24,33,.05);
	transition: border-color var(--bd-ease), color var(--bd-ease), box-shadow var(--bd-ease), transform var(--bd-ease);
}
html.page_board_view .commuPostWrap .postSec .topCate .rgtBtns .listBtn:hover{
	border-color: var(--bd-accent); color: var(--bd-accent) !important;
	box-shadow: 0 4px 10px rgba(20,24,33,.10); transform: translateY(-1px);
}
html.page_board_view .commuPostWrap .postSec .topCate .setIcon{
	width: 36px; height: 36px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--bd-line); background: var(--bd-surface);
	transition: border-color var(--bd-ease), background var(--bd-ease);
}
html.page_board_view .commuPostWrap .postSec .topCate .setIcon:hover{ border-color: var(--bd-line-strong); background: var(--bd-surface-alt); }
html.page_board_view .commuPostWrap .postSec .topCate .setIcon .moreHoriz{ font-size: 20px !important; color: var(--bd-ink-sub) !important; }
html.page_board_view .commuPostWrap .postSec .topCate .setMenu{
	border: 1px solid var(--bd-line) !important;
	border-radius: var(--bd-radius-s) !important;
	box-shadow: var(--bd-shadow-hover) !important;
	font-size: 14px !important;
}
html.page_board_view .commuPostWrap .postSec .topCate .setMenu li a{ color: var(--bd-ink-sub) !important; padding: 4px 0; }
html.page_board_view .commuPostWrap .postSec .topCate .setMenu li a:hover{ color: var(--bd-accent) !important; }

/* 제목 · 작성정보 */
html.page_board_view .commuPostWrap .postSec .titleSec{ margin-bottom: 14px !important; }
html.page_board_view .commuPostWrap .postSec .titleSec .postTitle{
	font-size: 26px !important; font-weight: 800 !important;
	letter-spacing: -.035em; line-height: 1.35; color: var(--bd-ink) !important;
}
html.page_board_view .commuPostWrap .postSec .titleSec .postTime{
	font-size: 14px !important; color: var(--bd-ink-mute) !important;
}
html.page_board_view .commuPostWrap .writerDesc{
	margin-bottom: 22px !important; padding-bottom: 20px;
	border-bottom: 1px solid var(--bd-line);
}
html.page_board_view .commuPostWrap .writerDesc .writerInfo .userImg{
	width: 34px !important; height: 34px !important;
	border: 1px solid var(--bd-line); box-sizing: border-box;
}
html.page_board_view .commuPostWrap .writerDesc .writerInfo .userName{
	font-size: 14px !important; font-weight: 600; color: var(--bd-ink) !important;
}
html.page_board_view .commuPostWrap .writerDesc .cntBox{ font-size: 13px !important; color: var(--bd-ink-mute) !important; }
html.page_board_view .commuPostWrap .writerDesc .cntBox span{ margin-right: 14px !important; }

/* 본문 */
html.page_board_view .commuPostWrap .contentSec .postContent{
	margin-bottom: 34px !important;
	font-size: 16px !important; line-height: 1.85; color: var(--bd-ink) !important;
	word-break: break-word !important;
}
html.page_board_view .commuPostWrap .contentSec .postContent img{
	max-width: 100% !important; height: auto; border-radius: var(--bd-radius-s);
}

/* 첨부파일 */
html.page_board_view .commuPostWrap .contentSec .fileAdd{
	margin-bottom: 30px !important;
	padding: 14px 20px !important;
	border: 1px solid var(--bd-line) !important;
	border-radius: var(--bd-radius-s) !important;
	background-color: var(--bd-surface-alt) !important;
	font-size: 14px !important; color: var(--bd-ink-sub) !important;
}
html.page_board_view .commuPostWrap .contentSec .fileAdd dt{ font-weight: 700 !important; color: var(--bd-ink) !important; }
html.page_board_view .commuPostWrap .contentSec .fileAdd dd a{
	border-bottom: 1px solid var(--bd-line-strong) !important; color: var(--bd-ink-sub) !important;
	transition: color var(--bd-ease), border-color var(--bd-ease);
}
html.page_board_view .commuPostWrap .contentSec .fileAdd dd a:hover{ color: var(--bd-accent) !important; border-color: var(--bd-accent) !important; }

/* 좋아요 · URL복사 */
html.page_board_view .commuPostWrap .contentSec .btmBtn{ margin-bottom: 6px !important; }
html.page_board_view .commuPostWrap .contentSec .likeSec .likeBtn{
	gap: 6px;
	padding: 14px 34px !important;
	border: 1px solid var(--bd-line-strong) !important;
	border-radius: 999px !important;
	font-size: 15px !important; font-weight: 600; color: var(--bd-ink) !important;
	box-shadow: 0 1px 2px rgba(20,24,33,.05);
	transition: border-color var(--bd-ease), color var(--bd-ease), box-shadow var(--bd-ease), transform var(--bd-ease);
}
html.page_board_view .commuPostWrap .contentSec .likeSec .likeBtn:hover{
	border-color: var(--bd-accent) !important; color: var(--bd-accent) !important;
	box-shadow: 0 6px 14px rgba(20,24,33,.10); transform: translateY(-1px);
}
html.page_board_view .commuPostWrap .contentSec .likeSec .likeBtn:active{ transform: translateY(0); box-shadow: 0 1px 2px rgba(20,24,33,.06); }
html.page_board_view .commuPostWrap .contentSec .likeSec .likeIco{ font-size: 20px !important; color: var(--bd-accent) !important; }
html.page_board_view .commuPostWrap .contentSec .urlCopyBtn span{
	display: inline-flex !important; align-items: center;
	height: 36px; padding: 0 16px 0 40px !important;
	border: 1px solid var(--bd-line); border-radius: 999px;
	background-color: var(--bd-surface);
	background-position: left 15px center !important; background-size: 17px !important;
	line-height: 1 !important; font-size: 13px !important; font-weight: 600;
	color: var(--bd-ink-sub) !important;
	transition: border-color var(--bd-ease), color var(--bd-ease), box-shadow var(--bd-ease);
}
html.page_board_view .commuPostWrap .contentSec .urlCopyBtn span:hover{
	border-color: var(--bd-line-strong); color: var(--bd-ink) !important;
	box-shadow: 0 4px 10px rgba(20,24,33,.08);
}

/* 복사 완료 토스트 (얼럿 대체) */
.mp-bv-toast{
	position: fixed; left: 50%; bottom: 46px; transform: translate(-50%, 12px);
	z-index: 99999; max-width: 86vw;
	padding: 13px 22px; border-radius: 999px;
	background: rgba(23,25,29,.92); color: #fff;
	font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
	font-size: 14px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
	opacity: 0; pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.mp-bv-toast.on{ opacity: 1; transform: translate(-50%, 0); }

/* ── 4. 관련상품 ─────────────────────────────────────────────────────── */
html.page_board_view .commuPostWrap .relPdList{
	margin: 0 0 28px 0 !important;
	border: 1px solid var(--bd-line) !important;
	border-radius: var(--bd-radius) !important;
	box-shadow: var(--bd-shadow) !important;
	overflow: hidden;
}
html.page_board_view .commuPostWrap .relPdList .relPdTitle{
	padding: 20px 26px !important;
	border-bottom: 1px solid var(--bd-line) !important;
	font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.03em;
	color: var(--bd-ink) !important;
}
html.page_board_view .commuPostWrap .relPdList ul{ padding: 26px !important; }
html.page_board_view .commuPostWrap .relPdList ul li .pdImg{ border-radius: var(--bd-radius-s) !important; border: 1px solid var(--bd-line); box-sizing: border-box; }
html.page_board_view .commuPostWrap .relPdList ul li .pdImg a img{ transition: transform .4s cubic-bezier(.2,.8,.3,1); }
html.page_board_view .commuPostWrap .relPdList ul li:hover .pdImg a img{ transform: translate(-50%, -50%) scale(1.04); }
html.page_board_view .commuPostWrap .relPdList ul li .pdTit{ font-size: 14px !important; color: var(--bd-ink-sub) !important; }
html.page_board_view .commuPostWrap .relPdList ul li .pdPrice .maktPri{ font-size: 18px !important; color: var(--bd-ink) !important; }
html.page_board_view .commuPostWrap .relPdList ul li .pdPrice .salePer{ color: var(--bd-accent) !important; }
html.page_board_view .commuPostWrap .relPdList ul li .pdPrice .salePer em{ font-size: 18px !important; }
html.page_board_view .commuPostWrap .relPdList ul li .pdPrice .delPri{ color: var(--bd-ink-mute) !important; }

/* ── 5. 게시판 다른글 ────────────────────────────────────────────────── */
html.page_board_view .otherTbList{
	margin: 0 0 28px 0 !important;
	border: 1px solid var(--bd-line) !important;
	border-radius: var(--bd-radius) !important;
	box-shadow: var(--bd-shadow) !important;
}
html.page_board_view .otherTbList h3{
	padding: 20px 26px !important;
	border-bottom: 1px solid var(--bd-line) !important;
	font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.03em;
	color: var(--bd-ink) !important;
}
html.page_board_view .otherTbList h3 a{
	right: 26px !important;
	display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
	border: 1px solid var(--bd-line); border-radius: 999px;
	font-size: 13px !important; font-weight: 600; color: var(--bd-ink-sub) !important;
	transition: border-color var(--bd-ease), color var(--bd-ease), box-shadow var(--bd-ease);
}
html.page_board_view .otherTbList h3 a:hover{
	border-color: var(--bd-accent); color: var(--bd-accent) !important;
	box-shadow: 0 4px 10px rgba(20,24,33,.08);
}
html.page_board_view .otherTbList ul li{
	padding: 22px 26px !important;
	border-bottom: 1px solid var(--bd-line) !important;
	transition: background var(--bd-ease);
}
html.page_board_view .otherTbList ul li:hover{ background-color: var(--bd-surface-alt); }
html.page_board_view .otherTbList ul li.on{
	background-color: var(--bd-accent-soft) !important;
	box-shadow: inset 3px 0 0 var(--bd-accent);
}
html.page_board_view .otherTbList ul li .postSection .listTxt .conTitBox{
	font-size: 16px !important; font-weight: 700; color: var(--bd-ink) !important;
}
html.page_board_view .otherTbList ul li .postSection .listTxt .postTime{ font-size: 13px !important; color: var(--bd-ink-mute) !important; }
html.page_board_view .otherTbList ul li .postSection .listTxt .conTxt{ margin-top: 12px !important; font-size: 14px !important; }
html.page_board_view .otherTbList ul li .postSection .listTxt .conTxt a{ color: var(--bd-ink-mute) !important; }
html.page_board_view .otherTbList ul li .postSection .thumbImg{
	width: 88px !important; height: 88px !important;
	border: 1px solid var(--bd-line) !important; border-radius: var(--bd-radius-s) !important;
}
html.page_board_view .otherTbList ul li .infoSection{ margin-top: 18px !important; }
html.page_board_view .otherTbList ul li .infoSection .writerInfo .userImg{
	width: 28px !important; height: 28px !important;
	border: 1px solid var(--bd-line); box-sizing: border-box;
}
html.page_board_view .otherTbList ul li .infoSection .writerInfo .userName{ font-size: 14px !important; color: var(--bd-ink-sub) !important; }
html.page_board_view .otherTbList ul li .infoSection .countBox{ font-size: 13px !important; color: var(--bd-ink-mute) !important; }
html.page_board_view .otherTbList ul li .infoSection .countBox span{ margin-right: 14px !important; padding-left: 24px !important; background-size: 17px !important; }

/* ── 6. 댓글 영역 ────────────────────────────────────────────────────── */
html.page_board_view .commuPostWrap .commuBox .writeBox{
	margin: 0 0 20px !important;
	padding: 10px 10px 10px 22px !important;
	border: 1px solid var(--bd-line) !important;
	border-radius: var(--bd-radius) !important;
	box-shadow: var(--bd-shadow);
	transition: border-color var(--bd-ease), box-shadow var(--bd-ease);
}
html.page_board_view .commuPostWrap .commuBox .writeBox:focus-within{
	border-color: var(--bd-line-strong) !important; box-shadow: var(--bd-shadow-hover);
}
html.page_board_view .commuPostWrap .commuBox .writeBox input,
html.page_board_view .commuPostWrap .commuBox .writeBox textarea{ font-size: 15px !important; }
html.page_board_view .commuPostWrap .commuBox .writeBox .btnSend{
	border-radius: var(--bd-radius-xs) !important;
	background-color: var(--bd-accent) !important;
	font-size: 14px !important; font-weight: 700;
	box-shadow: 0 2px 8px rgba(20,24,33,.14);
	transition: filter var(--bd-ease), transform var(--bd-ease), box-shadow var(--bd-ease);
}
html.page_board_view .commuPostWrap .commuBox .writeBox .btnSend:hover{ filter: brightness(.94); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(20,24,33,.18); }
html.page_board_view .commuPostWrap .commuBox .writeBox .btnSend:active{ transform: translateY(0); }

html.page_board_view .commuPostWrap .commentWrap{
	margin-top: 0 !important;
	border: 1px solid var(--bd-line) !important;
	border-radius: var(--bd-radius) !important;
	box-shadow: var(--bd-shadow);
	overflow: hidden;
}
html.page_board_view .commuPostWrap .commentWrap .commentDesc{
	padding: 20px 26px !important; border-bottom: 1px solid var(--bd-line) !important;
}
html.page_board_view .commuPostWrap .commentWrap .commentDesc .commentCnt{
	font-size: 18px !important; font-weight: 800 !important; color: var(--bd-ink) !important;
}
html.page_board_view .commuPostWrap .commentWrap .commentDesc .commentCnt span{ color: var(--bd-accent) !important; }
html.page_board_view .commuPostWrap .commentWrap .commentDesc .viewMenu select{ font-size: 14px !important; }
html.page_board_view .commuPostWrap .commentWrap .noCommentBox{
	margin: 64px 0 !important; font-size: 15px !important; color: var(--bd-ink-mute) !important;
}
html.page_board_view .commuPostWrap .commentWrap .commentList > ul > li{
	padding: 22px 26px !important; border-top: 1px solid var(--bd-line) !important; font-size: 15px !important;
}
html.page_board_view .commuPostWrap .commentWrap .commentList .commtTop{ font-size: 14px !important; }
html.page_board_view .commuPostWrap .commentWrap .commentList .commtTop .userSec .profile{
	border: 1px solid var(--bd-line); box-sizing: border-box;
}
html.page_board_view .commuPostWrap .commentWrap .commentList .commtTop .userSec .nickName{ font-weight: 600; color: var(--bd-ink) !important; }
html.page_board_view .commuPostWrap .commentWrap .commentList .commtTop .userSec .postTime{ color: var(--bd-ink-mute) !important; }
html.page_board_view .commuPostWrap .commentWrap .commentList .commtTop .moreMenuIco .setMenu{
	border: 1px solid var(--bd-line) !important; border-radius: var(--bd-radius-s) !important;
	box-shadow: var(--bd-shadow-hover) !important; font-size: 14px !important;
}
html.page_board_view .commuPostWrap .commentWrap .commentList .commtTxt .cmtContent{ line-height: 1.7 !important; color: var(--bd-ink) !important; }
html.page_board_view .commuPostWrap .commentWrap .commentList .commtTxt .moreBtn{ font-size: 14px !important; color: var(--bd-ink-mute) !important; }
html.page_board_view .commuPostWrap .commentWrap .commentList .commtBtm .likeBtn .likeIco{ font-size: 19px !important; color: var(--bd-ink-sub) !important; }
html.page_board_view .commuPostWrap .commentWrap .commentList .replyCnt{ font-size: 14px !important; color: var(--bd-accent) !important; }
html.page_board_view .commuPostWrap .commentWrap .commentList .replyCnt .arrowIco{ border-top-color: var(--bd-accent) !important; }
html.page_board_view .commuPostWrap .commentWrap .commentList .replyCnt .arrowIco.on{ border-bottom-color: var(--bd-accent) !important; border-top-color: transparent !important; }
html.page_board_view .commuPostWrap .commentWrap .commentList .replyList .replyId{ color: var(--bd-accent) !important; }
html.page_board_view .commuPostWrap .commentWrap .replyInput .inputBox{
	border: 1px solid var(--bd-line) !important; border-radius: var(--bd-radius-s) !important;
}
html.page_board_view .commuPostWrap .commentWrap .replyInput .inputBox .btnSend{ color: var(--bd-accent) !important; font-weight: 700; }

/* ── 7. 접근성 ───────────────────────────────────────────────────────── */
html.page_board_view .commuPostWrap a:focus-visible,
html.page_board_view .commuPostWrap .likeBtn:focus-visible,
html.page_board_view .commuPostWrap .urlCopyBtn:focus-visible,
html.page_board_view .otherTbList a:focus-visible{
	outline: 2px solid var(--bd-accent); outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce){
	html.page_board_view *{ transition: none !important; }
	html.page_board_view .commuPostWrap .relPdList ul li:hover .pdImg a img{ transform: translate(-50%, -50%) !important; }
}

/* ── 8. 좁은 화면 보정 ───────────────────────────────────────────────── */
@media (max-width: 1100px){
	html.page_board_view .commuPostWrap .postSec{ padding: 24px 20px 26px !important; }
	html.page_board_view .commuPostWrap .postSec .titleSec .postTitle{ font-size: 22px !important; }
	html.page_board_view .otherTbList ul li{ padding: 18px 20px !important; }
	html.page_board_view .commuPostWrap .topBanner{ padding: 40px 0 !important; font-size: 26px !important; }
}