@charset "utf-8";
/* ==========================================================================
   게시판 목록 페이지 스킨   /css/board_list_v2.css
   2026-07-26  /board/list.asp 에서 무조건 로드 (전 분양몰 공통)

   · 스코프는 html.page_board_v2 — 게시판 목록 화면에서만 적용된다.
   · 마크업(.commuWrap / .postListBox / .normalList …)은 공용 소스와
     관리자 디자인관리 양쪽에 걸쳐 있어 건드리지 않고 CSS 로만 재구성한다.
   · list.asp · list_default.asp 의 인라인 <style> 보다 뒤에서 로드되고
     스코프로 특이도가 높아 그대로 덮는다.
   · 메인컬러는 몰별 --sitecolor1 을 승계하므로 몰마다 자기 색이 적용된다.
   ========================================================================== */

html.page_board_v2{
	--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);
}
/* ★ 폴백 스택에 로컬 'Pretendard' 를 남기면 안 된다 — /css/base.css 가 로컬 웨이트를
      @font-face 로 선언해 두어서, 그 이름이 실제로 쓰이는 순간 웨이트당 870KB 대를 통째로 받는다.
      또 이 페이지 인라인 CSS 의 `.commuWrap .commuBox .writeBox input{font-family:Pretendard}`
      (특이도 0,3,1)가 스코프 규칙(0,2,2)을 이기므로 !important 가 필요하다.
      실측: 이 선언 전 Pretendard-Regular.woff2 873KB 수신 → 후 0건. */
html.page_board_v2 .commuWrap,
html.page_board_v2 .commuWrap input,
html.page_board_v2 .commuWrap select,
html.page_board_v2 .commuWrap button,
html.page_board_v2 .commuWrap textarea{
	font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
	             'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
	letter-spacing: -.02em;
}

/* ── 1. 상단 타이틀 배너 ─────────────────────────────────────────────── */
html.page_board_v2 .commuWrap .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. 글쓰기 박스 ──────────────────────────────────────────────────── */
html.page_board_v2 .commuWrap .commuBox .writeBox{
	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_v2 .commuWrap .commuBox .writeBox:hover{
	border-color: var(--bd-line-strong) !important;
	box-shadow: var(--bd-shadow-hover);
}
html.page_board_v2 .commuWrap .commuBox .writeBox input{
	font-size: 15px !important;
	color: var(--bd-ink) !important;
	cursor: pointer;
}
html.page_board_v2 .commuWrap .commuBox .writeBox input::placeholder{ color: var(--bd-ink-mute) !important; }
html.page_board_v2 .commuWrap .commuBox .writeBox .btnSend{
	width: auto !important;
	min-width: 96px;
	padding: 12px 22px !important;
	border-radius: var(--bd-radius-xs) !important;
	background-color: var(--bd-accent) !important;
	box-shadow: 0 2px 6px rgba(20,24,33,.14);
	font-size: 15px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: transform var(--bd-ease), box-shadow var(--bd-ease), filter var(--bd-ease);
}
html.page_board_v2 .commuWrap .commuBox .writeBox .btnSend:hover{
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(20,24,33,.18);
	filter: brightness(1.06);
}
html.page_board_v2 .commuWrap .commuBox .writeBox .btnSend:active{
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(20,24,33,.16);
}

/* ── 3. 게시판 그룹 셀렉트 ───────────────────────────────────────────── */
html.page_board_v2 .commuWrap .commuBox .selectChk .selectGroup{
	padding: 15px 22px !important;
	border: 1px solid var(--bd-line) !important;
	border-radius: var(--bd-radius-s) !important;
	box-shadow: var(--bd-shadow);
	font-family: inherit !important;
	font-size: 15px !important;
	color: var(--bd-ink) !important;
	background-position: right 20px center !important;
	cursor: pointer;
	transition: border-color var(--bd-ease);
}
html.page_board_v2 .commuWrap .commuBox .selectChk .selectGroup:focus{
	outline: none;
	border-color: var(--bd-accent) !important;
}

/* ── 4. 목록 카드 ────────────────────────────────────────────────────── */
html.page_board_v2 .commuWrap .postListBox{
	margin: 26px 0 40px !important;
	border: 1px solid var(--bd-line) !important;
	border-radius: var(--bd-radius) !important;
	box-shadow: var(--bd-shadow) !important;   /* 원본의 0 0 6px 3px rgba(0,0,0,.1) 은 과함 */
	overflow: hidden;
}
html.page_board_v2 .commuWrap .postListBox .title{
	padding: 18px 26px !important;
	border-bottom: 1px solid var(--bd-line) !important;
	background: var(--bd-surface-alt) !important;
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	letter-spacing: -.03em !important;
	color: var(--bd-ink) !important;
}
html.page_board_v2 .commuWrap .postListBox ul{ margin: 0 !important; padding: 0 !important; }

/* 공지 행 */
html.page_board_v2 .commuWrap .postListBox ul .topNotiBox{
	padding: 15px 26px !important;
	border-bottom: 1px solid var(--bd-line) !important;
	background: var(--bd-surface) !important;
	transition: background-color var(--bd-ease);
}
html.page_board_v2 .commuWrap .postListBox ul .topNotiBox:hover{ background: var(--bd-surface-alt) !important; }
html.page_board_v2 .commuWrap .postListBox ul .topNotiBox .notiMark{
	width: auto !important;
	min-width: 46px;
	padding: 5px 10px !important;
	border-radius: 999px !important;
	background-color: var(--bd-accent-soft) !important;
	color: var(--bd-accent) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}
html.page_board_v2 .commuWrap .postListBox ul .topNotiBox .contTitle{
	font-size: 15.5px !important;
	font-weight: 700 !important;
	color: var(--bd-ink) !important;
}

/* 일반 행 */
html.page_board_v2 .commuWrap .postListBox ul .normalList{
	padding: 22px 26px !important;
	border-bottom: 1px solid var(--bd-line) !important;
	font-family: inherit !important;
	background: var(--bd-surface) !important;
	transition: background-color var(--bd-ease);
}
html.page_board_v2 .commuWrap .postListBox ul .normalList:hover{ background: var(--bd-surface-alt) !important; }
html.page_board_v2 .commuWrap .postListBox ul .normalList .postSection .listTxt{
	width: calc(100% - 118px) !important;
	margin-right: 22px !important;
}
html.page_board_v2 .commuWrap .postListBox ul .normalList .postSection .listTxt .conTitBox{
	font-size: 16.5px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--bd-ink) !important;
}
html.page_board_v2 .commuWrap .postListBox ul .normalList .postSection .listTxt .conTitBox a{ color: inherit !important; }
html.page_board_v2 .commuWrap .postListBox ul .normalList .postSection .listTxt .postTime{
	margin-top: 5px !important;
	font-size: 13px !important;
	color: var(--bd-ink-mute) !important;
}
html.page_board_v2 .commuWrap .postListBox ul .normalList .postSection .listTxt .conTxt{
	margin-top: 12px !important;
	font-size: 14.5px !important;
	line-height: 1.55 !important;
	color: var(--bd-ink-sub) !important;
}
html.page_board_v2 .commuWrap .postListBox ul .normalList .postSection .listTxt .conTxt a{ color: inherit !important; }
html.page_board_v2 .commuWrap .postListBox ul .normalList .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_v2 .commuWrap .postListBox ul .normalList .postSection .thumbImg img{
	transition: transform var(--bd-ease);
}
html.page_board_v2 .commuWrap .postListBox ul .normalList:hover .postSection .thumbImg img{ transform: scale(1.04); }

/* 작성자 / 카운트 */
html.page_board_v2 .commuWrap .postListBox ul .normalList .infoSection{ margin-top: 18px !important; }
html.page_board_v2 .commuWrap .postListBox ul .normalList .infoSection .writerInfo .userImg{
	width: 28px !important;
	height: 28px !important;
	border: 1px solid var(--bd-line);
}
html.page_board_v2 .commuWrap .postListBox ul .normalList .infoSection .writerInfo .userName{
	margin-left: 7px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--bd-ink-sub) !important;
}
html.page_board_v2 .commuWrap .postListBox ul .normalList .infoSection .countBox{
	margin-top: 5px !important;
	font-size: 13.5px !important;
	color: var(--bd-ink-mute) !important;
	font-variant-numeric: tabular-nums;
}
html.page_board_v2 .commuWrap .postListBox ul .normalList .infoSection .countBox span{
	margin-right: 16px !important;
	padding-left: 24px !important;
	background-size: 17px !important;
}

/* 빈 목록 */
html.page_board_v2 .commuWrap .postListBox .noPostList{
	padding: 72px 20px !important;
	font-size: 15px !important;
	color: var(--bd-ink-mute) !important;
}

/* ── 5. 페이징 ───────────────────────────────────────────────────────── */
html.page_board_v2 .commuWrap .gs_paging_box{ margin: 0 0 26px !important; }
html.page_board_v2 .commuWrap .gs_paging{ font-size: 14px !important; }
/* ★ span 을 통째로 잡으면 안 된다 — commonTotal.css 가 `.golink`(GO 페이지 입력)를
      display:none 으로 숨겨두는데, 여기서 display 를 !important 로 주면 그 숨김을 눌러
      원래 안 보이던 입력칸이 노출된다(2026-07-26 실제 발생). 숨김 요소는 명시적으로 제외한다. */
html.page_board_v2 .commuWrap .gs_paging a,
html.page_board_v2 .commuWrap .gs_paging strong,
html.page_board_v2 .commuWrap .gs_paging span:not(.golink){
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	margin: 0 3px !important;
	padding: 0 9px;
	border-radius: var(--bd-radius-xs);
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1;
	color: var(--bd-ink-sub) !important;
	vertical-align: middle;
	transition: background-color var(--bd-ease), color var(--bd-ease), border-color var(--bd-ease);
}
html.page_board_v2 .commuWrap .gs_paging a{ border: 1px solid var(--bd-line); background: var(--bd-surface); }
html.page_board_v2 .commuWrap .gs_paging a:hover{
	border-color: var(--bd-accent);
	background: var(--bd-accent-soft);
	color: var(--bd-accent) !important;
}
html.page_board_v2 .commuWrap .gs_paging .hoverbg2,
html.page_board_v2 .commuWrap .gs_paging strong{
	border: 1px solid var(--bd-accent) !important;
	background: var(--bd-accent) !important;
	color: #fff !important;
	font-weight: 700;
}
html.page_board_v2 .commuWrap .gs_paging img{ vertical-align: middle; }
/* 원본(commonTotal.css · 인라인)이 숨겨둔 요소는 이 스킨이 절대 되살리지 않는다 */
html.page_board_v2 .commuWrap .gs_paging .golink{ display: none !important; }
html.page_board_v2 .commuWrap [style*="display:none"],
html.page_board_v2 .commuWrap [style*="display: none"]{ display: none !important; }

/* ── 6. 검색 영역 ────────────────────────────────────────────────────── */
html.page_board_v2 .commuWrap .boardListSearch .search_area fieldset{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	background: var(--bd-surface);
	box-shadow: var(--bd-shadow);
}
html.page_board_v2 .commuWrap .boardListSearch .search_area legend{
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
html.page_board_v2 .commuWrap .boardListSearch .search_area .select{
	height: 44px !important;
	padding: 0 12px !important;
	border: 1px solid var(--bd-line) !important;
	border-radius: var(--bd-radius-xs) !important;
	background-color: var(--bd-surface) !important;
	font-family: inherit !important;
	font-size: 14.5px !important;
	color: var(--bd-ink) !important;
	cursor: pointer;
}
html.page_board_v2 .commuWrap .boardListSearch .search_area .text{
	width: 260px !important;
	height: 44px !important;
	padding: 0 14px !important;
	border: 1px solid var(--bd-line) !important;
	border-radius: var(--bd-radius-xs) !important;
	font-family: inherit !important;
	font-size: 14.5px !important;
	color: var(--bd-ink) !important;
	transition: border-color var(--bd-ease), box-shadow var(--bd-ease);
}
html.page_board_v2 .commuWrap .boardListSearch .search_area .text::placeholder{ color: var(--bd-ink-mute); }
html.page_board_v2 .commuWrap .boardListSearch .search_area .text:focus{
	outline: none;
	border-color: var(--bd-accent) !important;
	box-shadow: 0 0 0 3px rgba(20,24,33,.06);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-accent) 14%, transparent);
}
html.page_board_v2 .commuWrap .boardListSearch .search_area .btnActive{
	height: 44px !important;
	min-width: 84px;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: var(--bd-radius-xs) !important;
	background-color: var(--bd-accent) !important;
	box-shadow: 0 2px 6px rgba(20,24,33,.14);
	color: #fff !important;
	font-family: inherit !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: transform var(--bd-ease), box-shadow var(--bd-ease), filter var(--bd-ease);
}
html.page_board_v2 .commuWrap .boardListSearch .search_area .btnActive:hover{
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(20,24,33,.18);
	filter: brightness(1.06);
}
html.page_board_v2 .commuWrap .boardListSearch .search_area .btnActive:active{
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(20,24,33,.16);
}
html.page_board_v2 .commuWrap .board-default.pageTb{ padding-bottom: 50px; }

/* ── 7. 키보드 포커스 링 ─────────────────────────────────────────────── */
html.page_board_v2 .commuWrap a:focus-visible,
html.page_board_v2 .commuWrap button:focus-visible,
html.page_board_v2 .commuWrap input:focus-visible,
html.page_board_v2 .commuWrap select:focus-visible{
	outline: 2px solid var(--bd-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ── 8. 좁은 화면 ────────────────────────────────────────────────────── */
@media (max-width: 1024px){
	html.page_board_v2 .commuWrap .topBanner{ padding: 40px 0 !important; font-size: 26px !important; }
	html.page_board_v2 .commuWrap .postListBox ul .normalList{ padding: 18px !important; }
	html.page_board_v2 .commuWrap .postListBox ul .topNotiBox{ padding: 14px 18px !important; }
	html.page_board_v2 .commuWrap .boardListSearch .search_area .text{ width: 180px !important; }
}
@media (prefers-reduced-motion: reduce){
	html.page_board_v2 .commuWrap .writeBox,
	html.page_board_v2 .commuWrap .btnSend,
	html.page_board_v2 .commuWrap .btnActive,
	html.page_board_v2 .commuWrap .normalList,
	html.page_board_v2 .commuWrap .thumbImg img{ transition: none !important; transform: none !important; }
}