/* ========================================================================= 콘텐츠 상세 CSS (board-detail.css) — 시안 01 Centered Editorial ========================================================================= 패키지 / 프로모션 / 이벤트 상세의 카드 톤앤매너 버전. 목록(board-card.css)과 같은 활자 리듬을 쓰고, 상단 대표 이미지는 두지 않는다. 사진은 관리자가 본문 에디터에 올린 것만 나온다. [붙이는 법] 1) 이 파일을 에 링크 2) 상세 JSP 에 .ctv-view 마크업 (board/ct_view.jsp 참고) 3) 종료 표시 토글은 board/promotion.js 의 initDetail 이 담당 ※ 현재는 확인용 페이지(/ctView/{boardIdx})에서만 사용 중. 확정되면 promotion_view.jsp 를 이 마크업으로 바꾸고 임시 라우트를 지우면 된다. ========================================================================= */ /* ========================================================= 0. 디자인 토큰 — 목록 카드와 같은 이름/값 (단독 이식 가능) ========================================================= */ :root { --rn-ink: #222528; --rn-ink-2: #555a61; --rn-ink-3: #8b8f96; --rn-line: #e4e6ea; --rn-line-2: #d9dee4; --rn-soft: #f5f5f3; --rn-point: #23272e; --rn-chip: var(--rn-ink-strong, #1c1c1c); /* 읽는 영역(리드·본문)의 가독 폭. 컨테이너는 목록과 같은 풀폭이고, 글줄만 이 폭으로 가둔다. 🎨 한 줄 글자 수를 늘리려면 이 값만 키우면 리드와 본문이 함께 따라온다. */ --rn-ctv-read-w: 900px; } /* ========================================================= 1. 본문 단 — 컨테이너는 목록 페이지와 '같은 폭' 목록(.board-wrap = wrap1600 풀폭)에서 상세로 올 때 좌측 끝선이 튀지 않아야 하므로 래퍼에는 자기 폭을 두지 않는다. 대신 읽는 요소(리드·본문)만 안에서 --rn-ctv-read-w 로 좁혀 한 줄 글자 수를 잡는다. 칩/제목/기간·가격/이전다음글은 목록과 같은 풀폭 — 상세의 .ctv-nav 가 이미 쓰던 방식이다. 폭은 사이트 상세 공용 토큰 --rn-detail-w (board-renewal.css 0번 블록)를 쓴다 — 공지 상세(.ntc-view)와 '같은 값'이라 상세 페이지끼리 폭이 제각각이 되지 않는다. (이 파일만 단독 이식할 때는 fallback none = 목록과 같은 풀폭) ========================================================= */ .ctv-view {max-width: var(--rn-detail-w, none); margin: 0; text-align: left;} /* 칩 줄 · 제목 · 리드 칩 구성/크기는 목록 카드(board-card.css 의 .chips/.chip)와 동일하게 맞춘다. 대표(분류) 칩은 채움, 상태(종료) 칩은 라인 — 종료 노출은 promotion.js 가 담당. */ .ctv-view .ctv-chips {display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 22px;} /* 태그 — 사이트 공통 태그 스펙(board-renewal.css 4-2)과 같은 계열이되 한 단계 크다. 이 화면은 제목이 40px 이라 28px 태그를 쓰면 제목 옆에서 캡션처럼 작아 보인다. ★ .board-wrap 접두사는 장식이 아니다 — 공통 스펙 쪽 선택자가 .board-wrap 을 달고 있어서 접두사가 없으면 특이도가 한 단계 낮아 이 파일이 나중에 로드돼도 진다(상세 태그만 28px 로 남는다). */ .board-wrap .ctv-view .ctv-chips .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 .ctv-view .ctv-chips .chip.solid {background: var(--rn-chip); border-color: var(--rn-chip); color: #fff;} .board-wrap .ctv-view .ctv-chips .chip[hidden] {display: none;} .ctv-view .ctv-title {font-size: 40px; font-weight: 500; line-height: 1.25; letter-spacing: .01em; text-transform: uppercase; color: var(--rn-ink); margin-bottom: 18px;} .ctv-view .ctv-lead {font-size: 18px; line-height: 1.7; color: var(--rn-ink-2); margin-bottom: 40px; max-width: var(--rn-ctv-read-w);} /* 기간 + 가격 한 줄 (헤어라인 사이) ★ 값 조합(예약만/숙박만/가격만/전부/없음)이 달라도 '골격'은 고정하고 '높이'는 내용만큼만 쓴다. - 기간 왼쪽 / 가격 오른쪽(margin-left:auto). 화면 폭이 아니라 '실제로 안 들어갈 때'만 가격이 아랫줄로 내려간다(flex-wrap) — 값이 짧으면 좁은 폭에서도 한 줄을 유지한다. 내려가도 margin-left:auto 가 유지되므로 가격은 계속 오른쪽에 붙는다. - 위아래 패딩(26px)·정렬만 고정 → 1행이면 얕게, 2행+가격이면 깊게. 빈 칸을 억지로 채우지 않는다. - 값이 하나도 없으면 .empty 로 헤어라인 한 줄만 남긴다. */ .ctv-view .ctv-facts {display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; padding: 26px 0; border-top: 1px solid var(--rn-line); border-bottom: 1px solid var(--rn-line); margin-bottom: 56px;} .ctv-view .ctv-dates {display: flex; flex-direction: column; gap: 6px;} /* 기간이 없는 글 — 빈 칸을 아예 빼서 군더더기 간격이 생기지 않게 한다. 가격은 margin-left:auto 로 계속 오른쪽에 붙는다 */ .ctv-view .ctv-facts .ctv-dates.none {display: none;} /* nowrap: 날짜 한 줄을 쪼개지 않는다 → 자리가 부족하면 (줄을 쪼개는 대신) 가격이 아랫줄로 내려간다 */ .ctv-view .ctv-dates .row {display: flex; gap: 16px; font-size: 17px; line-height: 1.5; color: var(--rn-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;} .ctv-view .ctv-dates .lb {flex: 0 0 auto; width: 4.6em; color: var(--rn-ink-3);} /* line-height 를 글자 높이에 붙여둔다 — 가격(34px)이 만드는 줄 높이가 기간 줄보다 훨씬 커서 1.5 로 두면 기간 1행짜리 글에서 위아래가 과하게 벌어진다 */ .ctv-view .ctv-price {font-size: 14px; line-height: 1.15; letter-spacing: .04em; color: var(--rn-ink-3); white-space: nowrap; text-align: right; margin-left: auto;} .ctv-view .ctv-price strong {font-size: 34px; font-weight: 400; color: var(--rn-ink); margin-right: 6px;} .ctv-view .ctv-price em {font-style: normal;} /* 기간·가격이 하나도 없는 글 — 값 영역은 접고 헤어라인 한 줄만 남겨 제목/본문 경계를 만든다 */ .ctv-view .ctv-facts.empty {padding: 0; border-bottom: 0;} /* 종료된 게시물 — 목록 카드(.ctc-card.end)와 같은 딤 처리 */ .ctv-view.ended .ctv-title, .ctv-view.ended .ctv-price strong {color: #9aa0a6;} /* ========================================================= 2. 본문(에디터 콘텐츠) — 사이트 리셋이 서식을 지우지 않도록 복원 ========================================================= */ .ctv-view .ctv-doc {font-size: 16px; line-height: 1.95; color: var(--rn-ink-2); margin-bottom: 60px; word-break: keep-all; overflow-wrap: break-word; /* 컨테이너는 풀폭이지만 글줄은 여기서 가둔다 (위 1번 블록 주석 참고) */ max-width: var(--rn-ctv-read-w);} .ctv-view .ctv-doc::after {content: ''; display: block; clear: both;} /* 본문이 비어 있는 글 — 본문 여백(60px)은 접되 숨은 조금 남긴다. 붙어 있으면 답답해서. margin 은 위 블록의 margin-bottom 과 상쇄(collapse)되므로 padding 으로 준다 */ .ctv-view .ctv-doc:empty {margin-bottom: 0; padding-bottom: 24px;} /* 에디터가 원본 사이즈(width 속성/인라인 style)로 올린 이미지도 단 폭에 맞춘다. display:block 은 이미지 아래 인라인 여백(baseline 갭)을 없애고 이미지가 단독 블록으로 놓이게 한다 */ .ctv-view .ctv-doc img {max-width: 100%; height: auto; display: block;} .ctv-view .ctv-doc img[src=''], .ctv-view .ctv-doc img:not([src]) {display: none;} .ctv-view .ctv-doc p {margin: 0 0 20px;} .ctv-view .ctv-doc h1, .ctv-view .ctv-doc h2, .ctv-view .ctv-doc h3, .ctv-view .ctv-doc h4 {color: var(--rn-ink); font-weight: 600; margin: 34px 0 12px; line-height: 1.4;} .ctv-view .ctv-doc h1 {font-size: 24px;} .ctv-view .ctv-doc h2 {font-size: 21px;} .ctv-view .ctv-doc h3 {font-size: 19px;} .ctv-view .ctv-doc h4 {font-size: 18px;} .ctv-view .ctv-doc ul {list-style: disc; padding-left: 18px; margin: 0 0 20px;} .ctv-view .ctv-doc ol {list-style: decimal; padding-left: 20px; margin: 0 0 20px;} .ctv-view .ctv-doc li {margin-bottom: 7px; list-style: inherit;} .ctv-view .ctv-doc b, .ctv-view .ctv-doc strong {font-weight: 600; color: var(--rn-ink);} .ctv-view .ctv-doc i, .ctv-view .ctv-doc em {font-style: italic;} .ctv-view .ctv-doc a {color: var(--rn-ink); text-decoration: underline; white-space: normal;} .ctv-view .ctv-doc blockquote {margin: 0 0 20px; padding: 14px 20px; border-left: 2px solid var(--rn-line-2); background: var(--rn-soft);} /* 관리자가 고정폭(style="width:1400px")으로 올린 블록도 단 안에 가둔다 — 상위 .board-wrap 이 overflow:hidden 이라 가두지 않으면 오른쪽이 잘려서 아예 안 보인다 */ .ctv-view .ctv-doc div, .ctv-view .ctv-doc p, .ctv-view .ctv-doc figure, .ctv-view .ctv-doc pre, .ctv-view .ctv-doc blockquote {max-width: 100%;} /* 넓은 표는 잘라내지 않고 표 영역 안에서만 가로 스크롤 (감싸기는 shm.fitContent) */ .ctv-view .ctv-doc .rn-scrollx {max-width: 100%; overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch;} .ctv-view .ctv-doc .rn-scrollx > table {margin: 0; min-width: 480px;} .ctv-view .ctv-doc table {width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px;} .ctv-view .ctv-doc th, .ctv-view .ctv-doc td {border: 1px solid var(--rn-line); padding: 11px 14px; text-align: left; width: auto;} .ctv-view .ctv-doc th {background: #fafafa; font-weight: 500; color: var(--rn-ink);} .ctv-view .ctv-doc hr {border: 0; border-top: 1px solid var(--rn-line); margin: 30px 0;} .ctv-view .ctv-doc iframe, .ctv-view .ctv-doc video {max-width: 100%;} /* ========================================================= 3. 이전 / 다음 글 · 목록 버튼 --------------------------------------------------------- ※ 이 아래 .ctv-nav / .ctv-back 값은 공용 컴포넌트로 승격되어 board-renewal.css 의 4-5 (.rn-pnav) · 4-4 (.rn-btn + 상세 하단 배치) 에서 공지 상세(.ntc-*)와 함께 한 곳에서 관리한다. 아래 정의는 이 파일만 단독 이식했을 때를 위한 것이니 값을 바꿀 때는 양쪽을 같이 옮긴다. ========================================================= */ .ctv-view .ctv-nav {display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rn-line); border-bottom: 1px solid var(--rn-line);} .ctv-view .ctv-nav a, .ctv-view .ctv-nav .none {display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; text-decoration: none; cursor: pointer;} .ctv-view .ctv-nav a + a, .ctv-view .ctv-nav a + .none, .ctv-view .ctv-nav .none + a, .ctv-view .ctv-nav .none + .none {border-left: 1px solid var(--rn-line); text-align: right;} .ctv-view .ctv-nav .lb {font-size: 11px; letter-spacing: .16em; color: var(--rn-ink-3); text-transform: uppercase;} .ctv-view .ctv-nav .tt {font-size: 15px; color: var(--rn-ink); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;} .ctv-view .ctv-nav .none {cursor: default;} .ctv-view .ctv-nav .none .tt {color: var(--rn-ink-3);} /* 아래 여백(120px)은 푸터와 붙지 않게 두는 것 — 공지 상세(.ntc-back)와 같은 리듬 */ .ctv-view .ctv-back {display: flex; justify-content: center; margin: 34px 0 120px;} .ctv-view .ctv-back a {border: 1px solid var(--rn-line-2); background: #fff; color: var(--rn-point); font-size: 16px; font-weight: 500; padding: 18px 88px; cursor: pointer; text-decoration: none; transition: .2s;} .ctv-view .ctv-back a:hover {background: var(--rn-point); color: #fff; border-color: var(--rn-point);} /* ========================================================= 4. 반응형 ========================================================= */ @media screen and (max-width: 900px) { .ctv-view .ctv-title {font-size: 27px;} /* 제목이 내려온 만큼 태그도 공통 크기(28px)로 되돌린다 */ .board-wrap .ctv-view .ctv-chips .chip {height: 28px; font-size: 12px; padding: 0 12px;} .ctv-view .ctv-lead {font-size: 16px; margin-bottom: 30px;} .ctv-view .ctv-facts {gap: 12px 20px; margin-bottom: 40px;} .ctv-view .ctv-dates .row {font-size: 15px;} .ctv-view .ctv-price strong {font-size: 28px;} .ctv-view .ctv-doc {font-size: 15px; margin-bottom: 44px;} .ctv-view .ctv-nav a, .ctv-view .ctv-nav .none {padding: 16px 14px;} .ctv-view .ctv-back {margin: 28px 0 70px;} .ctv-view .ctv-back a {width: 100%; text-align: center; padding: 16px 20px;} } /* 이전/다음글은 좁은 화면에서도 좌우 2열을 유지한다 — 라벨이 ←/→ 방향 표시라 위아래로 쌓으면 화살표 방향과 배치가 어긋난다. 대신 여백·활자만 줄여 좁은 폭에 맞춘다. */ @media screen and (max-width: 640px) { .ctv-view .ctv-nav a, .ctv-view .ctv-nav .none {gap: 4px; padding: 14px 12px;} .ctv-view .ctv-nav .lb {font-size: 10px; letter-spacing: .12em;} .ctv-view .ctv-nav .tt {font-size: 14px;} /* 가격 단계 축소 — 목록 카드(.ctc-card .price strong)와 같은 34 → 28 → 25 스케일 */ .ctv-view .ctv-price {font-size: 13px;} .ctv-view .ctv-price strong {font-size: 25px;} } @media screen and (max-width: 400px) { .ctv-view .ctv-nav a, .ctv-view .ctv-nav .none {padding: 12px 8px;} .ctv-view .ctv-nav .tt {font-size: 13px;} /* 폰 폭에서는 한 단계 더 — 기간(15px)과의 대비를 PC 비율(34:17)에 맞춘다 */ .ctv-view .ctv-price strong {font-size: 22px;} }