/* ========================================================================= 콘텐츠 카드 목록 CSS (board-card.css) ========================================================================= 패키지 / 프로모션 / 이벤트 목록의 카드 디자인 전용 스타일. 다른 템플릿(홈페이지)에 그대로 이식할 수 있도록 이 파일 하나로 완결되어 있다. [다른 템플릿에 붙이는 법] 1) 이 파일을 복사하고 에 링크한다. (JSP 템플릿이면 개별 링크 대신 WEB-INF/homepage/inc/board-css.jsp 인클루드 한 줄로 끝난다) 2) 아래 스크립트 3종을 넣는다. (순서 유지) comm/paging.js → board/api.js → board/promotion.js 3) 목록 페이지에 마크업과 전역값만 준비하면 끝. 카드 HTML 은 JS 가 만든다.

[커스터마이즈] 색·글자 크기는 아래 토큰만 재정의하면 전체 톤이 한 번에 바뀐다. board-renewal.css 를 함께 쓰는 사이트라면 같은 이름의 토큰을 공유하므로 값이 중복 선언되어도 동작에 문제가 없다. (뒤에 로드된 값이 적용) ========================================================================= */ /* ========================================================= 0. 디자인 토큰 — 🎨 호텔별 커스텀은 이 블록만 수정 ========================================================= */ :root { --rn-ink: #222528; /* 제목/가격 */ --rn-ink-2: #555a61; /* 본문 */ --rn-ink-3: #8b8f96; /* 라벨/보조 */ --rn-point: #23272e; /* 버튼 호버/진행 바 */ --rn-point-text: #fff; /* 포인트 위 글자 */ --rn-line-2: #d9dee4; /* 칩/버튼 테두리 */ --rn-soft: #f2f3f5; /* 이미지 로딩 전 배경 */ --rn-chip: var(--rn-ink-strong, #1c1c1c); /* 분류 뱃지 배경 — 사이트 먹 하나로 통일 */ --rn-chip-end: #6e7379; /* 종료 칩 배경 — 흰 글씨 대비 4.8:1 (13px 글자도 읽히는 회색) */ --rn-fs-xs: 12.5px; /* 캡션 */ } /* ========================================================= 1. 목록 그리드 — 한 줄에 2개. 카드 사이 세로 간격을 넓게 준다. ========================================================= */ .board-wrap .content-list {width: 100%; text-align: left;} .board-wrap .content-list ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 84px 30px; list-style: none; margin: 0; padding: 0;} .board-wrap .content-list .nodata_g {grid-column: 1 / -1; text-align: center; padding: 80px 0;} /* ========================================================= 2. 카드 (.ctc-card) — promotion.js renderCard 마크업 분류 칩 → 제목 → 설명 → 기간 → 가격 순으로 쌓는다. 테두리 없이 사진과 활자만 쓰고, 본문은 사진 왼쪽 끝선에 정렬한다. 카드 전체가 상세로 가는 링크라 별도 버튼은 두지 않는다. ========================================================= */ .board-wrap .content-list .ctc-card {display: flex; flex-direction: column; background: transparent; cursor: pointer;} /* 썸네일 */ .board-wrap .content-list .ctc-card .thumb {position: relative; aspect-ratio: 613 / 422; overflow: hidden; background: var(--rn-soft);} .board-wrap .content-list .ctc-card .thumb img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;} .board-wrap .content-list .ctc-card:hover .thumb img {transform: scale(1.04);} .board-wrap .content-list .ctc-card .body {display: flex; flex-direction: column; flex: 1; padding: 32px 0 0;} /* 분류 칩 — 대표 칩은 채움, 추가 칩은 라인 */ .board-wrap .content-list .ctc-card .chips {display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px;} /* 뱃지 — 성격이 다른 두 종류를 '색'이 아니라 '형태'로 가른다. 분류(Package/Event…) = 솔리드 — 종류가 늘어도 색은 하나로 두고 글자로만 구분한다. 상태(종료) = 아웃라인 — 솔리드로 두면 분류와 같은 급 정보로 읽힌다. 치수(높이·패딩·활자)는 둘이 완전히 같아야 한 줄에서 기준선이 맞는다. 이 화면은 제목이 30px 이라 뱃지도 공통 스펙(28px)보다 한 단계 크게 쓴다. */ .board-wrap .content-list .ctc-card .chip {display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .02em; padding: 0 14px; border: 1px solid var(--rn-line-2); color: var(--rn-ink-2); background: #fff;} .board-wrap .content-list .ctc-card .chip.solid {background: var(--rn-chip); border-color: var(--rn-chip); color: #fff;} /* 제목 · 설명 (각각 두 줄까지) */ .board-wrap .content-list .ctc-card h3 {font-size: 30px; font-weight: 500; line-height: 1.25; letter-spacing: .01em; text-transform: uppercase; color: var(--rn-ink); margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .board-wrap .content-list .ctc-card .maintxt {font-size: 18px; line-height: 1.6; color: var(--rn-ink-2); margin-bottom: 46px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} /* 기간 — 입력된 기간만 행으로 나온다 (예약/투숙 독립) ★ 행 수가 카드마다 달라도(1행/2행) 기간 블록의 높이는 2행 기준으로 고정한다. 빈 div 를 끼우지 않고 min-height 로만 자리를 잡으므로, 값이 없는 행을 숨기는 현재 동작은 그대로다. 높이는 font-size 에서 계산되므로 반응형에서는 .meta 의 font-size 만 바꾸면 min-height 가 함께 따라온다. (line-height 를 못 박아 둔다 — normal 로 두면 대상 사이트 글꼴에 따라 행 높이가 흔들린다) */ .board-wrap .content-list .ctc-card .meta {display: flex; flex-direction: column; gap: 5px; margin-bottom: 22px; font-size: 17px; line-height: 1.5; min-height: calc(1.5em * 2 + 5px);} .board-wrap .content-list .ctc-card .meta .row {display: flex; gap: 16px; letter-spacing: .02em; color: var(--rn-ink-2); font-variant-numeric: tabular-nums;} .board-wrap .content-list .ctc-card .meta .lb {flex: 0 0 auto; width: 4.6em; color: var(--rn-ink-3);} /* 가격 — 값이 없으면 영역만 비워둔다 */ .board-wrap .content-list .ctc-card .foot {margin-top: auto; display: flex; align-items: baseline; gap: 12px;} .board-wrap .content-list .ctc-card .price {font-size: 14px; letter-spacing: .04em; color: var(--rn-ink-3); min-height: 1em;} .board-wrap .content-list .ctc-card .price strong {font-size: 34px; font-weight: 400; color: var(--rn-ink); margin-right: 6px;} .board-wrap .content-list .ctc-card .price em {font-style: normal; font-size: inherit; font-weight: 400; letter-spacing: .04em; color: var(--rn-ink-3);} /* 상태 뱃지(종료) — 분류 칩 오른쪽에 덧붙는다(분류 칩은 종료돼도 그대로 남는다). 아웃라인인 이유: 솔리드로 두면 분류와 같은 급으로 읽혀 '무슨 카테고리인지'가 흐려진다. 문구는 promotion.js 의 END_LABELS 가 언어별로 넣는다 */ .board-wrap .content-list .ctc-card .chip.is-end {background: #fff; border-color: #d5d5d5; color: #999;} /* 종료된 게시물 — 사진은 흑백 + 투명도로 함께 눌러 두고 글자는 한 단계씩 연하게. hover 로도 복원하지 않는다 — 되살아나면 아직 신청할 수 있는 것처럼 보인다. */ .board-wrap .content-list .ctc-card.end .thumb img {filter: grayscale(1); opacity: .55;} .board-wrap .content-list .ctc-card.end:hover .thumb img {filter: grayscale(1); opacity: .55; transform: none;} .board-wrap .content-list .ctc-card.end h3 {color: #999;} .board-wrap .content-list .ctc-card.end .maintxt {color: #aaa;} .board-wrap .content-list .ctc-card.end .meta {color: #aaa;} .board-wrap .content-list .ctc-card.end .meta .lb {color: #bbb;} .board-wrap .content-list .ctc-card.end .price, .board-wrap .content-list .ctc-card.end .price strong, .board-wrap .content-list .ctc-card.end .price em {color: #aaa;} /* ========================================================= 3. 더보기 페이징 — comm/paging.js 의 Paging.more 마크업 ========================================================= */ .board-wrap .pg-more {text-align: center;} .board-wrap .pg-more .bar {width: 220px; height: 3px; background: #eef0f2; border-radius: 99px; margin: 0 auto 14px; overflow: hidden;} .board-wrap .pg-more .bar i {display: block; height: 100%; background: var(--rn-point); border-radius: 99px; transition: width .4s ease;} .board-wrap .pg-more .cnt {font-size: var(--rn-fs-xs); color: var(--rn-ink-3); margin-bottom: 14px;} .board-wrap .pg-more .cnt strong {color: var(--rn-point);} .board-wrap .pg-more .btn-loadmore {border: 1px solid var(--rn-line-2); background: #fff; color: var(--rn-point); font-size: 16px; font-weight: 500; border-radius: 0; padding: 18px 88px; cursor: pointer; transition: .2s; display: inline-flex; align-items: center; gap: 10px; font-family: inherit;} .board-wrap .pg-more .btn-loadmore:hover {background: var(--rn-point); color: var(--rn-point-text); border-color: var(--rn-point);} .board-wrap .pg-more .btn-loadmore .plus {font-size: 16px; font-weight: 400;} /* 레거시 게시판 CSS 가 .page_Num strong 을 아이콘 버튼으로 쓰는 경우가 있어 되돌린다 */ .board-wrap .page_Num .pg-more strong {float: none; width: auto; height: auto; text-indent: 0; margin: 0; background: none;} .board-wrap .page_Num .pg-more {line-height: normal;} /* 레거시 .page_Num 이 inline-block(=shrink-to-fit)이라 640px 이하에서 더보기 버튼의 width:100% 가 버튼 자기 폭으로 계산돼 풀폭이 되지 않는다. 더보기형일 때만 블록으로 돌린다 */ .board-wrap .page_Num:has(.pg-more) {display: block;} /* ========================================================= 4. 반응형 — 900px 이하 1열, 활자 한 단계 축소 ========================================================= */ @media screen and (max-width: 900px) { .board-wrap .content-list ul {grid-template-columns: minmax(0, 1fr); gap: 52px;} .board-wrap .content-list .ctc-card .body {padding-top: 24px;} .board-wrap .content-list .ctc-card h3 {font-size: 24px; margin-bottom: 12px;} /* 제목이 내려온 만큼 뱃지도 한 단계 작게 (분류·상태 둘 다 같은 값) */ .board-wrap .content-list .ctc-card .chip {height: 28px; font-size: 12px; padding: 0 12px;} .board-wrap .content-list .ctc-card .maintxt {font-size: 16px; margin-bottom: 28px;} /* font-size 는 .meta 에 둔다 — min-height(calc(1.5em*2+5px))가 이 값에서 계산된다 */ .board-wrap .content-list .ctc-card .meta {font-size: 15px;} .board-wrap .content-list .ctc-card .meta .row {gap: 14px;} .board-wrap .content-list .ctc-card .price strong {font-size: 28px;} } @media screen and (max-width: 640px) { .board-wrap .content-list .ctc-card h3 {font-size: 21px;} .board-wrap .content-list .ctc-card .maintxt {font-size: 15px; margin-bottom: 22px;} .board-wrap .content-list .ctc-card .price strong {font-size: 25px;} .board-wrap .pg-more .btn-loadmore {width: 100%; justify-content: center; padding: 15px 20px; font-size: 15px;} }