/* =========================================================================
   게시판 리뉴얼 CSS (board-renewal.css)
   =========================================================================
   SHM API 연동 게시판의 신규 디자인 전용 스타일 모음.
   레거시 디자인을 유지하는 홈페이지는 이 파일을 포함하지 않으면 되고,
   신규 디자인을 쓰는 홈페이지는 게시판 JSP + 이 파일만 옮기면 바로 적용된다.

   [목차]
     0. 공통 디자인 토큰            — 색/타이포/라운드 (호텔별 커스텀은 여기만)
     1. 공통 페이지 타이틀          — .board_tit (패키지·갤러리·공지·FAQ·Q&A 목록 공용)
     2. 게시글 본문(에디터 콘텐츠)  — notice_view/promotion_view/FAQ 답변
     3. 콘텐츠 카드 목록            — 별도 파일 board-card.css (이식용으로 분리)
     4-1. 공통 카테고리 탭          — .rn-tabs / .rn-tab (FAQ·갤러리 공용)
     4-2. 공통 분류 칩              — .rn-chip (패키지 카드 칩과 같은 값, 갤러리 공용)
     4-3. 공통 데이터 없음          — .nodata_g (패키지·갤러리·FAQ 공용)
     4-4. 공통 기본 버튼            — .rn-btn / .rn-btn.solid (대표 CTA, Q&A 등록 버튼 공용)
     4-5. 공통 이전/다음 글          — .rn-pnav (공지 상세 · 콘텐츠 상세 공용)
     4-6. 공통 정보행                — .rn-facts (제목 아래 헤어라인 사이 [라벨+값] 줄)
     4-7. 공통 얇은 스크롤 영역      — .rn-scrolly (약관 상자 · 셀렉트 목록 공용)
     4-8. 공통 커스텀 셀렉트         — .rn-select, board/rn-select.js (시스템 UI 제거)
     4-9. 공통 커스텀 체크박스       — .rn-chk (시스템 UI 제거)
     4-10. 공통 약관 스크롤 박스     — .rn-terms (동의 폼 공용)
     4-11. 공통 좁은 단 레이아웃     — .rn-narrow (Q&A · FAQ 공용 폭/좌우 여백/타이포)
     4-12. 공통 스크린리더 전용 텍스트 — .sr-only (점·아이콘 표식의 뜻을 읽히게 한다)
     5. FAQ                        — .faq-search / .faq-acc
     6. 공통 페이징                 — .pg (숫자형), comm/paging.js  ※ 더보기형은 board-card.css
     7. Q&A 문의 폼                 — .qna-ed, board/qna.js
     8. 공지 에디토리얼             — .ntc-* (notice_list/notice_view), board/notice.js
   ========================================================================= */

/* =========================================================
   0. 공통 디자인 토큰
      모든 리뉴얼 컴포넌트가 이 변수만 사용한다. (:root 전역 — 게시판 밖의
      메인 슬라이드/팝업에서도 동일 토큰 사용)
      🎨 호텔별 커스텀: 이 블록의 값만 재정의하면 전체 톤이 일괄 변경.
   ========================================================= */
:root {
	/* 색상 */
	--rn-ink: #222528;          /* 제목/강조 텍스트 */
	--rn-ink-2: #555a61;        /* 본문 텍스트 */
	--rn-ink-3: #8b8f96;        /* 보조/설명 텍스트 */
	--rn-ink-doc: #333;         /* 상세 본문 글자 — 보조 회색보다 진한 '읽는' 색 */
	--rn-point: #23272e;        /* 포인트 (활성 탭/버튼 호버/뱃지) */
	--rn-point-text: #fff;      /* 포인트 위 글자 */
	--rn-err: #c0392b;          /* 오류/필수 표시 */
	--rn-line: #e4e6ea;         /* 옅은 구분선/입력 테두리 */
	--rn-line-0: #eef0f2;       /* 아주 연한 선 — 블록을 감싸는 선(--rn-line) 안쪽을 다시 나눌 때 */
	--rn-line-2: #d9dee4;       /* 카드 테두리 */
	--rn-line-3: #c3c7cd;       /* 진한 구분선 — 입력 밑줄(경계가 읽혀야 하는 선) */
	--rn-soft: #f2f3f5;         /* 칩/호버 배경 */
	--rn-live-dot: #7ee2a8;     /* 진행중 점 */
	--rn-accent: var(--rn-point); /* 강조 포인트 (공지 고정핀/룰) — 기본은 포인트색과 동일 */
	--rn-required: var(--rn-err); /* 필수 표시 전용 — 라벨의 *, (필수), 타이틀 범례가 모두 이 하나를 쓴다 */
	--rn-new: #e23e2c;            /* 신규 표시 점 색 (목록의 유일한 유채색 — 이 한 곳만 쓴다) */
	--rn-ink-strong: #1c1c1c;     /* 가장 진한 먹 — 대표 CTA 배경 · 입력 포커스선 · 체크 표시 */

	/* 떠 있는 면(드롭다운 패널 등) — 페이지 위에 겹치는 요소는 이 세 값만 쓴다 */
	--rn-pop-bg: #fff;
	--rn-pop-line: #e5e5e5;
	--rn-pop-shadow: 0 4px 12px rgba(0, 0, 0, .06);
	--rn-scroll-thumb: #ccc;      /* 얇은 스크롤바 손잡이 (4-7 .rn-scrolly) */

	/* 폼 활자·색 — 라벨과 입력값이 같은 크기여야 한 줄로 읽힌다.
	   🎨 폼 톤을 바꿀 땐 이 네 값만 재정의하면 Q&A 등 모든 폼이 함께 따라온다. */
	--rn-form-fs: 15px;           /* 라벨 = 입력값 = 버튼 활자 */
	--rn-form-label-c: #999;      /* 라벨 */
	--rn-form-value-c: #333;      /* 입력값 (placeholder 는 라벨과 같은 색) */
	--rn-form-line: #ccc;         /* 입력 밑줄 (포커스 시 --rn-ink-strong 으로 차오른다) */

	/* 타이포 스케일 (게시판 공통) */
	--rn-fs-title: 38px;        /* 페이지 타이틀 */
	--rn-fs-h: 18px;            /* 항목 제목 (카드/FAQ 질문) */
	--rn-fs-body: 15px;         /* 본문/리드 */
	--rn-fs-sm: 14px;           /* 보조 (기간/탭/버튼) */
	--rn-fs-xs: 12.5px;         /* 라벨 칩/캡션 */

	/* 형태 */
	--rn-radius: 16px;          /* 카드/아코디언 */
	--rn-radius-sm: 12px;       /* 버튼/작은 요소 */

	/* 상세 페이지 컨테이너 폭 — 사이트 전체 상세가 공유하는 '단 하나의' 값.
	   공지 상세(.ntc-view)와 콘텐츠(패키지/프로모션) 상세(.ctv-view)가 모두 이 값을 쓴다.
	   none = 목록 페이지(.wrap1600 풀폭)와 같은 폭 → 목록↔상세 이동 시 좌우 끝선이 튀지 않는다.
	   🎨 상세를 좁은 단으로 쓰고 싶으면 이 값만 px 로 바꾸면 두 상세가 함께 따라온다. */
	--rn-detail-w: none;

	/* 좁은 단 폭 — '읽고 입력하는' 페이지(Q&A 폼 · FAQ)가 공유하는 '단 하나의' 값.
	   목록/상세의 풀폭과 달리 한 단으로 모은다(4-11 .rn-narrow).
	   🎨 두 페이지의 폭을 바꾸려면 이 값만 고치면 된다. */
	--container-narrow: 1000px;

	/* 폼 라벨 컬럼 폭 — 고정폭이라 라벨 길이(분류/이름/연락처…)와 무관하게
	   모든 행의 입력 시작 x축이 한 줄로 맞는다. 언어별로 라벨이 길면 이 값만 키운다. */
	--rn-form-label-w: 100px;

	/* 정보행(4-6 .rn-facts) 기본값 — 화면마다 다른 값은 그 화면의 컨테이너에서 이 토큰만 덮어쓴다.
	   (공지 상세 .ntc-facts 가 그렇게 자기 값을 쓴다 — 8번 블록 참고)
	   라벨 컬럼은 '최소폭'이 아니라 '고정폭'이어야 한다: 최소폭으로 두면 라벨이 긴 글에서만
	   컬럼이 늘어나 글마다(첨부 유무) 값의 시작 x축이 달라진다.
	   🎨 언어·문구 때문에 라벨이 더 길면(영문 'Attachments' 등) 이 값을 키우거나,
	     해당 화면의 정보행에만 .is-lb-wide 를 붙인다. */
	--rn-facts-pad: 26px;            /* 블록 상하 패딩 */
	--rn-facts-label-w: 4.6em;       /* 라벨 컬럼 고정 폭 */
	--rn-facts-gap: 16px;            /* 라벨 ↔ 값 간격 */
	--rn-facts-row-gap: 6px;         /* 행 ↔ 행 간격 */
	--rn-facts-fs: 17px;             /* 값 활자 */
	--rn-facts-label-fs: inherit;    /* 라벨 활자 (기본은 값과 같은 크기) */

	/* 공지 목록 번호 컬럼 폭 — 번호와 NOTICE 배지가 '같은 폭의 한 컬럼'을 나눠 쓴다.
	   고정 폭이라 자릿수(1/10/100)나 배지 유무와 무관하게 중심선·제목 시작선이 그대로다.
	   🎨 배지 문구가 길어지면(예: 'IMPORTANT') 이 값만 키운다. */
	--rn-ntc-no-w: 80px;

	/* FAQ 카테고리 배지 최소 폭 — 질문 제목의 시작선을 모든 행에서 고정한다.
	   🎨 호텔별 커스텀: 카테고리명이 이보다 길면(한글 6글자 초과) 이 값만 키우면 되고,
	   답변 본문의 좌측 들여쓰기도 이 값으로 계산되므로 함께 따라온다. */
	--rn-faq-cat-w: 78px;
}

/* =========================================================
   1. 공통 페이지 타이틀 — 게시판 페이지(.board_tit)의 레거시 초대형 타이틀을
      리뉴얼 스케일로 통일한다.
      패키지·갤러리·공지·FAQ·Q&A 목록이 모두 이 하나를 쓴다 — 페이지마다 따로
      그리지 말고 이 블록만 고친다.

      [붙이는 법] 제목과 설명을 한 줄(인라인)로 두고, 좁은 화면에서만 줄이 떨어진다.
        <div class="board_tit">
          <h2>Notice<br class="m_block"><span>설명 문구</span></h2>
        </div>
        - <br class="m_block"> : 768px 이하에서만 나타나는 줄바꿈 (style.css/media.css 공용 유틸)
        - <span>              : 640px 이하에서 block 으로 떨어져 제목 아래로 쌓인다 (아래 미디어쿼리)
   ========================================================= */
.board-wrap .board_tit h2 {font-size: var(--rn-fs-title); font-weight: 800; letter-spacing: -.5px; color: var(--rn-ink);}
.board-wrap .board_tit span {font-size: var(--rn-fs-body); font-weight: 400; color: var(--rn-ink-3); margin-left: 16px;}
.board-wrap .board_tit {margin-bottom: 56px;}
/* 타이틀 아래에 '검색행' 같은 보조 줄이 한 번 더 오는 목록(공지)은 여백을 좁힌다 —
   56px 을 그대로 두면 타이틀·검색행·목록 상단선 사이가 벌어져 헐거워 보인다.
   [붙이는 법] <div class="board_tit is-tight"> */
.board-wrap .board_tit.is-tight {margin-bottom: 28px;}
@media screen and (max-width: 640px) {
	.board-wrap .board_tit h2 {font-size: 28px;}
	.board-wrap .board_tit span {display: block; margin: 10px 0 0; font-size: var(--rn-fs-sm);}
}

/* =========================================================
   2. 게시글 본문(에디터 콘텐츠) 스타일 — notice/promotion 상세, FAQ 답변
      사이트 공통 리셋과 게시판 레이아웃 CSS 가 에디터 서식(목록/표/인용/기울임 등)을
      덮어쓰지 않도록 본문 영역 안에서만 서식을 복원한다.
   ========================================================= */

/* 본문 컨테이너: 영단어 중간 끊김 방지 + 에디터 이미지 float 정리(clearfix) */
.board-wrap .notice_view tbody tr td.content {word-break: keep-all; overflow-wrap: break-word; line-height: 1.7;}
.board-wrap .notice_view tbody tr td.content::after {content: ''; display: block; clear: both;}

/* 이미지: 컨테이너 넘침 방지, 빈 src 아티팩트 숨김 */
.board-wrap .notice_view tbody tr td.content img,
.board-wrap .faq_list .answer .content img {max-width: 100%; height: auto;}
.board-wrap .notice_view tbody tr td.content img[src=""],
.board-wrap .notice_view tbody tr td.content img:not([src]),
.board-wrap .faq_list .answer .content img[src=""],
.board-wrap .faq_list .answer .content img:not([src]) {display: none;}

/* 문단/제목 */
.board-wrap .notice_view tbody tr td.content p {margin: 0 0 10px;}
.board-wrap .notice_view tbody tr td.content h1,
.board-wrap .notice_view tbody tr td.content h2,
.board-wrap .notice_view tbody tr td.content h3,
.board-wrap .notice_view tbody tr td.content h4 {margin: 24px 0 12px; color: var(--rn-ink); line-height: 1.4; font-weight: 700;}
/* px 고정 — rem 기준이 다른 사이트로 이식해도 크기가 변하지 않도록 */
.board-wrap .notice_view tbody tr td.content h1 {font-size: 26px;}
.board-wrap .notice_view tbody tr td.content h2 {font-size: 23px;}
.board-wrap .notice_view tbody tr td.content h3 {font-size: 20px;}
.board-wrap .notice_view tbody tr td.content h4 {font-size: 19px;}

/* 목록: 전역 리셋(list-style:none)으로 사라진 불릿/번호 복원 */
.board-wrap .notice_view tbody tr td.content ul,
.board-wrap .faq_list .answer .content ul {list-style: disc; margin: 10px 0; padding-left: 25px;}
.board-wrap .notice_view tbody tr td.content ol,
.board-wrap .faq_list .answer .content ol {list-style: decimal; margin: 10px 0; padding-left: 25px;}
.board-wrap .notice_view tbody tr td.content li,
.board-wrap .faq_list .answer .content li {list-style: inherit; margin: 4px 0;}

/* 인라인 서식: 굵게/기울임 복원 (레이아웃용 strong 스타일 침범 차단) */
.board-wrap .notice_view tbody tr td.content strong,
.board-wrap .notice_view tbody tr td.content b,
.board-wrap .faq_list .answer .content strong,
.board-wrap .faq_list .answer .content b {display: inline; padding: 0; font-weight: 700; color: inherit; vertical-align: baseline;}
.board-wrap .notice_view tbody tr td.content em,
.board-wrap .notice_view tbody tr td.content i,
.board-wrap .faq_list .answer .content em,
.board-wrap .faq_list .answer .content i {font-style: italic;}

/* 링크: 목록 레이아웃의 말줄임(nowrap/ellipsis) 침범 차단 */
.board-wrap .notice_view tbody tr td.content a {display: inline; width: auto; white-space: normal; overflow: visible;
	text-overflow: clip; color: var(--rn-ink-2); text-decoration: underline;}

/* 인용구 */
.board-wrap .notice_view tbody tr td.content blockquote {margin: 16px 0; padding: 12px 20px;
	border-left: 4px solid var(--rn-line-2); background: #fafbfc; color: var(--rn-ink-3);}

/* 에디터로 삽입한 표: 게시판 레이아웃 표 스타일(패딩 70px, width 50% 등) 침범 차단 */
.board-wrap .notice_view tbody tr td.content table {width: auto; max-width: 100%; table-layout: auto;
	border-collapse: collapse; margin: 12px 0;}
.board-wrap .notice_view tbody tr td.content table td,
.board-wrap .notice_view tbody tr td.content table th {width: auto; padding: 10px 14px; border: 1px solid var(--rn-line);
	vertical-align: middle; font-size: inherit;}

/* 임베드/구분선 */
.board-wrap .notice_view tbody tr td.content iframe,
.board-wrap .notice_view tbody tr td.content video {max-width: 100%;}
.board-wrap .notice_view tbody tr td.content hr {margin: 20px 0; border: 0; border-top: 1px solid var(--rn-line);}

/* =========================================================
   4-0. 공통 줄바꿈 방어 — 게시판 전체 한 줄
      관리자가 붙여넣은 '띄어쓰기 없는 긴 문자열'(긴 URL, "수영장수영장수영장…")은
      한 낱말이라 줄바꿈 지점이 없다. 그대로 두면 그 낱말 폭이 칸의 최소 폭이 되어
      제목이 옆 요소(FAQ 펼침 화살표·날짜·썸네일 칸)를 화면 밖으로 밀어낸다.
      overflow-wrap 은 상속되는 속성이라 여기 한 줄이면 게시판 안 모든 글자에 적용된다.
      ※ break-word 는 '칸보다 긴 낱말'일 때만 쪼갠다 — 평소 한국어 줄바꿈(word-break: keep-all)은 그대로다.
      ※ 이것만으로는 부족한 자리가 있다: flex/grid 칸은 min-width 의 기본값(auto)이
        '내용의 최소 폭'이라 칸 자체가 안 줄어든다. 그런 칸에는 min-width: 0 을 같이 건다
        (.faq-q .txt · .ntc-list .ntc-tit · .gal-cell · .rn-pnav > * 가 그 경우다).
   ========================================================= */
.board-wrap {overflow-wrap: break-word;}

/* ----- 공통 가로 스크롤 박스 — .rn-scrollx -----
   에디터 본문의 '화면보다 넓은 표'를 api.js 의 shm.fitContent() 가 이 박스로 감싼다.
   글자와 달리 표는 쪼갤 수 없어서 위 줄바꿈 방어로는 못 막는다 — .board-wrap 이
   overflow:hidden 이라 감싸지 않으면 좁은 화면에서 표 오른쪽이 그냥 잘려 볼 방법이 없다.
   본문 컨테이너(.ctv-doc / .ntc-body / .faq-a-inner)가 무엇이든 여기 한 곳이 담당하고,
   컨테이너별 규칙은 위아래 여백만 따로 가진다. */
.board-wrap .rn-scrollx {max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.board-wrap .rn-scrollx > table {margin: 0; min-width: 480px;}

/* =========================================================
   4-1. 공통 카테고리 탭 — .rn-tabs / .rn-tab
      FAQ(#faqCats) · 갤러리(#galleryCats) 가 같은 컴포넌트를 쓴다.
      게시판마다 따로 그리지 말고 이 블록만 고친다.

      [붙이는 법]
        <div class="rn-tabs" id="...">                     ← 좌측 정렬(기본)
        <div class="rn-tabs is-center" id="...">           ← 중앙 정렬
          <button class="rn-tab on">전체 <span class="cnt">12</span></button>
          <button class="rn-tab">객실 관련 <span class="cnt">9</span></button>

      형태는 목록 카드의 .chip 과 같은 계열(사각 라인, 선택 시 채움)이고,
      크기만 한 단계 크다 — 탭은 눌러야 하는 요소라 칩보다 히트 영역을 넓게 잡는다.
   ========================================================= */
/* 탭은 '조작', 카테고리 라벨(4-2)은 '정보' — 둘을 색이 아니라 '형태'로 가른다.
   활성 탭을 검정 면으로 두면 같은 화면의 검정 태그와 얼굴이 같아져 무엇을 누르는지 흐려진다.
   그래서 탭은 면을 쓰지 않고 밑줄로만 활성 상태를 표시한다(유채색도 늘리지 않는다).
   밑줄형은 칩이 아니라 '줄'로 읽혀야 하므로 탭 사이 간격도 좁힌다(8 → 4px). */
.board-wrap .rn-tabs {display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 26px; text-align: left;}
.board-wrap .rn-tabs.is-center {justify-content: center;}
.board-wrap .rn-tabs .rn-tab {border: 0; border-bottom: 2px solid transparent; background: transparent;
	color: #888;
	/* line-height 를 못 박아 두 페이지에서 탭 높이가 어긋나지 않게 한다(부모 line-height 영향 차단) */
	font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: .02em; border-radius: 0; padding: 11px 16px;
	cursor: pointer; font-family: inherit; transition: border-color .2s, color .2s;
	display: inline-flex; align-items: center; gap: 6px;}
.board-wrap .rn-tabs .rn-tab:hover {color: #111;}
.board-wrap .rn-tabs .rn-tab.on {color: #111; font-weight: 500;
	border-bottom-color: var(--rn-ink-strong); cursor: default;}
/* 건수는 탭 이름보다 한 단계 뒤로 — 활성 탭에서만 한 단계 진하게 */
.board-wrap .rn-tabs .rn-tab .cnt {font-size: 11px; line-height: 1; color: #bbb;}
.board-wrap .rn-tabs .rn-tab.on .cnt {color: #999;}

@media screen and (max-width: 900px) {
	.board-wrap .rn-tabs .rn-tab {font-size: 14px; padding: 9px 12px;}
}
@media screen and (max-width: 640px) {
	.board-wrap .rn-tabs .rn-tab {font-size: 13px; padding: 8px 10px;}
}

/* =========================================================
   4-2. 공통 분류 칩 — .rn-chip / .rn-chip.solid
      컨펌된 패키지 목록 카드의 분류 칩과 '같은 값'을 쓰는 공용 클래스.
      갤러리 카드가 이 클래스를 그대로 사용한다.

      ※ board-card.css 는 단독 이식용(파일 하나로 완결)이라 자기 정의를 유지하고,
        여기서 같은 선택자 그룹으로 묶어 값을 한 곳에서 관리한다.
        값을 바꿀 때는 board-card.css 의 .ctc-card .chip 과 함께 옮긴다.

      [붙이는 법] <span class="rn-chip solid">시설</span>   ← 채움(대표)
                  <span class="rn-chip">시설</span>         ← 라인(추가)
   ========================================================= */
/* ★ 사이트의 모든 분류 태그가 이 한 블록에서 크기·활자를 받는다 —
   갤러리 카드 / FAQ 행 / 공지 고정글 / 패키지(목록·상세) / 메인 카드.
   높이를 height 로 못 박고 세로 가운데 정렬한다: padding 으로만 잡으면 글자(한글/영문)에 따라
   화면마다 1px 씩 달라져 같은 값인데도 어느 하나가 작아 보인다.
   (.mainc-card 는 게시판 밖이라 .board-wrap 접두사를 붙이지 않는다)
   ※ 예외 하나: 패키지 목록·상세는 제목이 30~40px 라 태그만 한 단계 크다(32px/13px).
     값은 board-card.css · board-detail.css 가 각자 갖는다 — 그 파일들이 나중에 로드된다. */
.board-wrap .rn-chip,
.board-wrap .ctv-view .ctv-chips .chip,
.board-wrap .content-list .ctc-card .chip,
.board-wrap .faq-acc .faq-q .cat,
.board-wrap .ntc-list .no.pin,
.mainc-card .tag {display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	height: 28px; padding: 0 12px; border: 1px solid var(--rn-line-2); border-radius: 0;
	font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .02em;
	color: var(--rn-ink-2); background: #fff;}
/* 채움(대표) — 목록에서 분류를 한눈에 집게 하는 표식은 전부 같은 먹으로 채운다 */
.board-wrap .rn-chip.solid,
.board-wrap .ctv-view .ctv-chips .chip.solid,
.board-wrap .content-list .ctc-card .chip.solid,
.board-wrap .faq-acc .faq-q .cat,
.board-wrap .ntc-list .no.pin,
.mainc-card .tag {background: var(--rn-chip); border-color: var(--rn-chip); color: #fff;}


/* =========================================================
   4-4. 공통 기본 버튼 — .rn-btn(라인) / .rn-btn.solid(채움 = 화면의 대표 CTA)
      사이트 기본 톤: 라운드 없는 사각 + 검정 채움(--rn-point) + 흰 글씨.
      FAQ 검색 버튼, 활성 탭, 활성 페이지 번호가 이미 같은 톤이고 대표 CTA 는 이 값을 쓴다.
      hover 는 사이트 관행대로 opacity 로 눌러 색 토큰을 하나만 유지한다.

      [붙이는 법] <button class="rn-btn solid">문의 등록</button>
      ※ 마크업을 못 바꾸는 기존 버튼은 아래 선택자 그룹에 이름만 더한다
        (지금은 Q&A 등록 버튼 .qna-ed-btn 이 이 방식으로 같은 값을 쓴다)
   ========================================================= */
.board-wrap .rn-btn,
.board-wrap .ntc-view .ntc-back a,
.board-wrap .qna-ed .qna-ed-btn {display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--rn-line-2); background: #fff; color: var(--rn-point);
	border-radius: 0; padding: 18px 40px; font-family: inherit; font-size: 16px; font-weight: 500;
	line-height: 1.2; letter-spacing: .02em; cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, opacity .2s;}
.board-wrap .rn-btn:hover,
.board-wrap .ntc-view .ntc-back a:hover {background: var(--rn-point); color: var(--rn-point-text); border-color: var(--rn-point);}

/* 채움(대표 CTA) — 페이지에서 가장 중요한 동작 하나에만 쓴다 */
.board-wrap .rn-btn.solid,
.board-wrap .qna-ed .qna-ed-btn {background: var(--rn-point); border-color: var(--rn-point);
	color: var(--rn-point-text);}
.board-wrap .rn-btn.solid:hover,
.board-wrap .qna-ed .qna-ed-btn:hover {background: var(--rn-point); border-color: var(--rn-point);
	color: var(--rn-point-text); opacity: .82;}
.board-wrap .rn-btn.solid:active,
.board-wrap .qna-ed .qna-ed-btn:active {opacity: .92; transform: translateY(1px);}
.board-wrap .rn-btn:focus-visible,
.board-wrap .ntc-view .ntc-back a:focus-visible,
.board-wrap .qna-ed .qna-ed-btn:focus-visible {outline: 2px solid var(--rn-point); outline-offset: 3px;}

/* 상세 하단 '목록' 버튼 — 공지 상세(.ntc-back)와 콘텐츠 상세(.ctv-back)가 같은 자리·같은 폭.
   활자/테두리/라운드는 위 .rn-btn(라인 = 사이트 secondary) 값을 그대로 쓰고,
   상세 하단 전용으로 '가운데 배치 + 넓은 좌우 여백'만 여기서 함께 준다. */
.board-wrap .ntc-view .ntc-back,
.board-wrap .ctv-view .ctv-back {display: flex; justify-content: center; margin: 34px 0 120px;}
.board-wrap .ntc-view .ntc-back a,
.board-wrap .ctv-view .ctv-back a {padding: 18px 88px; text-decoration: none;}
@media screen and (max-width: 900px) {
	.board-wrap .ntc-view .ntc-back,
	.board-wrap .ctv-view .ctv-back {margin: 28px 0 70px;}
	.board-wrap .ntc-view .ntc-back a,
	.board-wrap .ctv-view .ctv-back a {width: 100%; padding: 16px 20px;}
}

/* =========================================================
   4-6. 공통 정보행 — .rn-facts (.row / .lb)
      제목 바로 아래, 위아래 헤어라인 사이에 놓이는 [라벨 + 값] 줄.
      콘텐츠 상세의 기간·가격 줄(.ctv-facts)이 쓰던 값을 공용으로 올린 것이고,
      공지 상세의 등록일·첨부파일 줄(.ntc-facts)이 같은 값을 쓴다.

      [붙이는 법]
        <div class="rn-facts">
          <div class="row"><span class="lb">등록일</span><span class="val">2026-07-29</span></div>
          <div class="row"><span class="lb">첨부파일</span> … </div>
        </div>

      ★ 틀(헤어라인·안쪽 여백)과 활자만 공용이다. 줄을 어떻게 늘어놓을지(가로 1줄 + 우측 가격 /
        세로 스택)는 페이지마다 달라서 각자 정한다 — 여기서 display 를 못 박으면 콘텐츠 상세의
        '가격 오른쪽 붙임'이 깨진다.

      ※ board-detail.css 는 단독 이식용이라 자기 정의를 유지하고, 여기서 같은 선택자 그룹으로
        묶어 값을 한 곳에서 관리한다 (4-2 와 같은 방식).
   ========================================================= */
/* 틀 — 위아래 헤어라인 + 안쪽 여백. 높이는 내용만큼만 쓴다 */
.board-wrap .rn-facts,
.board-wrap .ctv-view .ctv-facts,
.board-wrap .ntc-view .ntc-facts {padding: var(--rn-facts-pad) 0; margin-bottom: 56px;
	border-top: 1px solid var(--rn-line); border-bottom: 1px solid var(--rn-line);}
/* 줄 — [라벨][값] */
.board-wrap .rn-facts .row,
.board-wrap .ctv-view .ctv-dates .row,
.board-wrap .ntc-view .ntc-facts .row {display: flex; gap: var(--rn-facts-gap); font-size: var(--rn-facts-fs);
	line-height: 1.5; color: var(--rn-ink-2); font-variant-numeric: tabular-nums;}
/* 라벨 — 폭을 '고정'해 값의 시작 x축을 줄마다·글마다 똑같이 맞춘다.
   nowrap: 컬럼 안에서 라벨이 두 줄로 접히지 않게 한다 */
.board-wrap .rn-facts .lb,
.board-wrap .ctv-view .ctv-dates .lb,
.board-wrap .ntc-view .ntc-facts .lb {flex: 0 0 auto; width: var(--rn-facts-label-w);
	font-size: var(--rn-facts-label-fs); white-space: nowrap; color: var(--rn-ink-3);}
/* 넓은 라벨 변형 — 라벨이 기본 폭을 넘는 화면(영문 'Attachments' 등)에서 컨테이너에 붙인다.
   [붙이는 법] <div class="ntc-facts is-lb-wide"> */
.board-wrap .rn-facts.is-lb-wide {--rn-facts-label-w: 6em;}
.board-wrap .ntc-view .ntc-facts.is-lb-wide {--rn-facts-label-w: 112px;}
/* 줄이 여러 개면 사이 간격 (콘텐츠 상세는 .ctv-dates 의 column gap 이 같은 값을 낸다)
   ※ 공지 상세는 줄의 성격이 달라(메타 / 다운로드 액션) 8번에서 연한 선 + 넉넉한 여백으로 따로 나눈다 */
.board-wrap .rn-facts .row + .row {margin-top: var(--rn-facts-row-gap);}

@media screen and (max-width: 900px) {
	/* 활자는 .row 의 font-size 를 직접 덮지 않고 '토큰'을 내린다 —
	   토큰을 읽는 다른 요소(공지 첨부 파일명 등)도 같은 단계로 함께 따라오게 하기 위해서다 */
	.board-wrap .rn-facts,
	.board-wrap .ctv-view .ctv-facts,
	.board-wrap .ntc-view .ntc-facts {margin-bottom: 40px; --rn-facts-fs: 15px;}
}

/* =========================================================
   4-5. 공통 이전/다음 글 — .rn-pnav
      컨펌된 콘텐츠 상세(board-detail.css 의 .ctv-nav)의 값을 공용 컴포넌트로 승격한 것.
      공지 상세(.ntc-nav)가 같은 값을 쓴다 — 상세 페이지끼리 이 영역이 어긋나지 않게 한다.

      [붙이는 법] 칸 2개(있으면 <a>, 없으면 <span class="none">)를 감싸기만 하면 된다
        <div class="rn-pnav">
          <a data-idx="12"><span class="lb">← 이전글</span><span class="tt">제목</span></a>
          <span class="none"><span class="lb">다음글 →</span><span class="tt">다음글이 없습니다.</span></span>
        </div>

      ※ board-card.css/board-detail.css 는 단독 이식용(파일 하나로 완결)이라 자기 정의를
        유지하고, 여기서 같은 선택자 그룹으로 묶어 값을 한 곳에서 관리한다 (4-2 와 같은 방식).
        값을 바꿀 때는 board-detail.css 의 .ctv-nav 와 함께 옮긴다.
   ========================================================= */
.board-wrap .rn-pnav,
.board-wrap .ctv-view .ctv-nav,
.board-wrap .ntc-view .ntc-nav {display: grid; grid-template-columns: 1fr 1fr; gap: 0;
	margin: 0; padding: 0; text-align: left; clear: both;
	border-top: 1px solid var(--rn-line); border-bottom: 1px solid var(--rn-line);}
/* 칸: 라벨 위 / 제목 아래 2줄. 두 번째 칸은 좌측 경계선 + 우측 정렬(방향 표시와 배치 일치) */
.board-wrap .rn-pnav > *,
.board-wrap .ctv-view .ctv-nav > *,
.board-wrap .ntc-view .ntc-nav > * {display: flex; flex-direction: column; gap: 6px; min-width: 0;
	padding: 20px 22px; color: inherit; text-decoration: none; cursor: pointer;}
.board-wrap .rn-pnav > *:nth-child(2),
.board-wrap .ctv-view .ctv-nav > *:nth-child(2),
.board-wrap .ntc-view .ntc-nav > *:nth-child(2) {border-left: 1px solid var(--rn-line); text-align: right;}
/* 라벨 — 작고 자간이 넓어 --rn-ink-3 로는 거의 안 읽힌다. 한 단계 진한 본문색을 쓴다 */
.board-wrap .rn-pnav .lb,
.board-wrap .ctv-view .ctv-nav .lb,
.board-wrap .ntc-view .ntc-nav .lb {font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--rn-ink-2); margin: 0;}
.board-wrap .rn-pnav .tt,
.board-wrap .ctv-view .ctv-nav .tt,
.board-wrap .ntc-view .ntc-nav .tt {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
	overflow: hidden; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--rn-ink); white-space: normal;}
.board-wrap .rn-pnav a:hover .tt,
.board-wrap .ctv-view .ctv-nav a:hover .tt,
.board-wrap .ntc-view .ntc-nav a:hover .tt {text-decoration: underline;}
/* 이전/다음 글이 없는 칸 */
.board-wrap .rn-pnav .none,
.board-wrap .ctv-view .ctv-nav .none,
.board-wrap .ntc-view .ntc-nav .none {cursor: default;}
.board-wrap .rn-pnav .none .tt,
.board-wrap .ctv-view .ctv-nav .none .tt,
.board-wrap .ntc-view .ntc-nav .none .tt {color: var(--rn-ink-3);}

/* 좁은 화면에서도 좌우 2열을 유지한다 — 라벨이 ←/→ 방향 표시라 위아래로 쌓으면
   화살표 방향과 배치가 어긋난다. 여백·활자만 줄여 좁은 폭에 맞춘다. */
@media screen and (max-width: 900px) {
	.board-wrap .rn-pnav > *,
	.board-wrap .ctv-view .ctv-nav > *,
	.board-wrap .ntc-view .ntc-nav > * {padding: 16px 14px;}
}
@media screen and (max-width: 640px) {
	.board-wrap .rn-pnav > *,
	.board-wrap .ctv-view .ctv-nav > *,
	.board-wrap .ntc-view .ntc-nav > * {gap: 4px; padding: 14px 12px;}
	.board-wrap .rn-pnav .lb,
	.board-wrap .ctv-view .ctv-nav .lb,
	.board-wrap .ntc-view .ntc-nav .lb {font-size: 10px; letter-spacing: .12em;}
	.board-wrap .rn-pnav .tt,
	.board-wrap .ctv-view .ctv-nav .tt,
	.board-wrap .ntc-view .ntc-nav .tt {font-size: 14px;}
}
@media screen and (max-width: 400px) {
	.board-wrap .rn-pnav > *,
	.board-wrap .ctv-view .ctv-nav > *,
	.board-wrap .ntc-view .ntc-nav > * {padding: 12px 8px;}
	.board-wrap .rn-pnav .tt,
	.board-wrap .ctv-view .ctv-nav .tt,
	.board-wrap .ntc-view .ntc-nav .tt {font-size: 13px;}
}
/* 비활성 — Q&A 는 전송 중에도 이 상태가 되므로 글자는 읽히게 두고 채움만 뺀다 */
.board-wrap .rn-btn[disabled],
.board-wrap .qna-ed .qna-ed-btn[disabled] {background: var(--rn-soft); border-color: var(--rn-line-2);
	color: var(--rn-ink-3); opacity: 1; transform: none; cursor: default;}

/* =========================================================
   4-3. 공통 '데이터 없음' — .nodata_g
      패키지 목록(board-card.css 의 .content-list .nodata_g)과 같은 렌더를
      갤러리·FAQ 도 그대로 쓴다. 마크업까지 동일하게 맞춘다:
        <li class="nodata_g"><img src="/common/images/homepage/board/file.png"><p>…</p></li>
      활자/색은 레거시 .nodata_g (board.css) 규칙을 그대로 물려받는다 — 여기서
      다시 정의하면 패키지와 미묘하게 달라지므로 건드리지 않는다.
      그리드 목록에서 한 줄을 다 쓰도록 하는 것만 공통으로 얹는다.
   ========================================================= */
.board-wrap .nodata_g {grid-column: 1 / -1; text-align: center; padding: 80px 0;}
/* FAQ 목록은 위쪽 헤어라인이 있어 빈 상태에서 선만 떠 보인다 — 빈 상태에선 선을 뺀다 */
.board-wrap .faq-acc:has(.nodata_g) {border-top: 0;}

/* =========================================================
   4-7. 공통 얇은 스크롤 영역 — .rn-scrolly
      브라우저 기본 스크롤바(윈도우 17px 회색 막대)는 미니멀한 면 위에서 혼자 튄다.
      스크롤이 생기는 블록은 이 클래스만 붙여 같은 얇은 스크롤바를 쓴다.
      [붙이는 법] <div class="rn-terms rn-scrolly"> … </div>
   ========================================================= */
.rn-scrolly {overflow-y: auto; -webkit-overflow-scrolling: touch;
	scrollbar-width: thin; scrollbar-color: var(--rn-scroll-thumb) transparent;}
.rn-scrolly::-webkit-scrollbar {width: 6px;}
.rn-scrolly::-webkit-scrollbar-track {background: transparent;}
.rn-scrolly::-webkit-scrollbar-thumb {background: var(--rn-scroll-thumb); border-radius: 0;}

/* =========================================================
   4-8. 공통 커스텀 셀렉트 — .rn-select  (JS: board/rn-select.js)
      네이티브 드롭다운은 OS 가 그린다 — 파란 하이라이트·둥근 모서리·시스템 활자가
      그대로 나와 폼 톤과 어긋난다. 그래서 목록만 직접 그린다.
      네이티브 <select> 는 지우지 않고 화면에서만 감춘다 → 값·name·폼 전송·검증은 그대로.

      [붙이는 법] <select id="x" name="x" data-rn-select><option value="">선택하세요.</option>…</select>
        - rn-select.js 가 .rn-select > (select + 버튼 + 목록) 구조를 만들어준다.
        - 닫힌 상태는 다른 입력과 같은 얼굴(배경 없음)이라, 밑줄은 감싼 폼 행이 그린다.
      🎨 패널 색/그림자는 공통 토큰(--rn-pop-*) 하나로 관리한다.
   ========================================================= */
.rn-select {position: relative; display: block; width: 100%;}
/* 네이티브는 접근성 트리에서만 살려두고 화면에서 감춘다 (display:none 이면 포커스 이동이 막힌다) */
.rn-select > select {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	opacity: 0; pointer-events: none;}

/* 닫힌 상태 — 입력(input)과 같은 활자·여백·색 */
.rn-select-btn {display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; margin: 0; padding: 0 0 2px; border: 0; border-radius: 0; background: transparent;
	font-family: inherit; font-size: var(--rn-form-fs); font-weight: 400; line-height: 1.5;
	color: var(--rn-form-value-c); text-align: left; cursor: pointer; outline: none;}
.rn-select-val {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/* 선택 전 placeholder 는 라벨과 같은 회색 — 선택하면 값 색으로 바뀐다 */
.rn-select-val.is-ph {color: var(--rn-form-label-c);}

/* 화살표: 이미지/글리프 없이 CSS 로 그린 12px 박스 안의 V */
.rn-select-arrow {position: relative; flex: 0 0 auto; width: 12px; height: 12px;}
.rn-select-arrow::before {content: ''; position: absolute; left: 1px; top: 2px; width: 7px; height: 7px;
	border-right: 1.4px solid var(--rn-form-label-c); border-bottom: 1.4px solid var(--rn-form-label-c);
	transform: rotate(45deg); transition: transform .2s;}
.rn-select.is-open .rn-select-arrow::before {top: 4px; transform: rotate(-135deg);}

/* 열린 상태 — 아래로 떨어지는 패널 */
.rn-select-list {position: absolute; left: 0; top: calc(100% + 9px); z-index: 30;
	min-width: 100%; max-width: 100%; max-height: 258px; margin: 0; padding: 0; list-style: none;
	background: var(--rn-pop-bg); border: 1px solid var(--rn-pop-line); border-radius: 0;
	box-shadow: var(--rn-pop-shadow); text-align: left;}
.rn-select-list[hidden] {display: none;}

.rn-select-opt {display: flex; align-items: center; height: 42px; padding: 0 16px;
	font-size: var(--rn-form-fs); line-height: 1.4; color: var(--rn-form-value-c); cursor: pointer;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* 마우스 hover 와 키보드 이동(.is-on)은 같은 면 — 시스템 파란 하이라이트는 쓰지 않는다 */
.rn-select-opt:hover,
.rn-select-opt.is-on {background: #f5f5f5;}
.rn-select-opt.is-sel {color: #111; font-weight: 500;}
.rn-select-opt[aria-disabled="true"] {color: var(--rn-form-label-c); background: none; cursor: default;}

/* =========================================================
   4-9. 공통 커스텀 체크박스 — .rn-chk
      네이티브 체크박스도 OS 가 그린다(둥근 모서리·시스템 파랑). 각진 사각형 + 먹 채움으로 통일.
      [붙이는 법] <div class="chk rn-chk"><input type="checkbox" id="a"><label for="a">…</label></div>
   ========================================================= */
/* display 를 다시 켜는 이유: 레거시 규칙(board.css 의 .board-wrap input[type=checkbox]{display:none})이
   이미지형 체크박스를 전제로 네이티브를 숨겨둔다 — 리뉴얼 폼은 네이티브를 직접 그려 쓴다 */
.rn-chk input[type="checkbox"] {appearance: none; -webkit-appearance: none; position: relative;
	display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; border: 1px solid var(--rn-form-line);
	border-radius: 0; background: #fff; cursor: pointer; outline: none;
	transition: background .15s, border-color .15s;}
/* 체크 표시 — 흰 선 두 개를 회전시킨 V (이미지 의존 제거) */
.rn-chk input[type="checkbox"]::after {content: ''; position: absolute; left: 5px; top: 1px;
	width: 5px; height: 9px; border: solid #fff; border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg); opacity: 0; transition: opacity .15s;}
.rn-chk input[type="checkbox"]:checked {background: var(--rn-ink-strong); border-color: var(--rn-ink-strong);}
.rn-chk input[type="checkbox"]:checked::after {opacity: 1;}
.rn-chk input[type="checkbox"]:focus-visible {outline: 2px solid var(--rn-ink-strong); outline-offset: 2px;}

/* =========================================================
   4-10. 공통 약관 스크롤 박스 — .rn-terms
      동의를 받는 화면에서 '전문을 그대로 보여주되 폼 길이는 고정'해야 할 때 쓴다.
      높이를 못 박고 안에서만 스크롤하므로 약관이 길어져도 폼 레이아웃이 흔들리지 않는다.

      [붙이는 법]
        <div class="rn-terms rn-scrolly" tabindex="0">
          <h4>개인정보 수집에 대한 안내 및 동의</h4>
          <dl><dt>1. 수집/이용항목</dt><dd>…</dd> … </dl>
        </div>
      ※ tabindex="0" : 마우스 없이 키보드로도 스크롤할 수 있게 한다.
      🎨 높이만 바꾸고 싶으면 이 블록에서 --rn-terms-h 를 재정의한다.
   ========================================================= */
.rn-terms {--rn-terms-h: 180px;
	height: var(--rn-terms-h); padding: 20px 24px; border: 1px solid var(--rn-pop-line);
	border-radius: 0; background: #fafafa; font-size: 14px; line-height: 1.7; color: #555;}
.rn-terms:focus-visible {outline: 1px solid var(--rn-form-line); outline-offset: 2px;}
.rn-terms h4 {margin: 0 0 16px; font-size: 14px; font-weight: 500; color: var(--rn-form-value-c);}
.rn-terms dl {margin: 0;}
/* 항목(제목+내용) 사이 간격 — 한 항목 안에서는 붙이고 항목끼리만 띄운다 */
.rn-terms dt {margin-top: 16px; color: var(--rn-form-value-c);}
.rn-terms dt:first-child {margin-top: 0;}
.rn-terms dd {margin: 4px 0 0;}
.rn-terms p {margin: 16px 0 0;}
.rn-terms p:first-child {margin-top: 0;}
@media screen and (max-width: 768px) {
	.rn-terms {padding: 18px 16px;}
}

/* =========================================================
   4-11. 공통 좁은 단 레이아웃 — .rn-narrow
      '읽고 입력하는' 페이지(Q&A 폼 · FAQ)는 목록·상세의 풀폭(.wrap1600)이 아니라 한 단으로 모은다 —
      풀폭에서는 입력 한 줄이 1,400px 까지 늘어나 눈이 줄 끝을 못 따라가고, 반대로 단이 너무 좁으면
      상단 배너 대비 본문만 쪼그라들어 보인다. 두 페이지가 같은 폭·같은 좌우 여백을 쓰게 묶은 블록.

      [붙이는 법]  <section class="board rn-narrow"><div class="board-wrap"> … </div></section>
        - .wrap1600 은 빼고 이 클래스를 쓴다 — 같이 쓰면 좌우 여백이 8% 로 덮인다.
        - 직계 자식이 '단'(= --container-narrow) 이 된다. 안쪽 컴포넌트는 폭을 갖지 않는다.
      🎨 폭은 --container-narrow, 여백은 --rn-narrow-pad(좌우) / --rn-narrow-pad-y(상하) 만 고친다.

      [상하 여백] 배너 바로 아래에서 시작하는 페이지라 위쪽 여백이 곧 '배너 ↔ 타이틀' 간격이다.
        레거시 .board 는 padding-top 을 6%(폭 비례)로 두어 화면마다 값이 달라지는데,
        여기서는 px 로 못 박아 두 페이지가 어느 화면에서나 같은 간격을 갖게 한다.
        아래쪽도 같은 값을 줘 위아래 균형을 맞춘다 — 안쪽 컴포넌트는 아래 여백을 갖지 않는다.

      [브레이크포인트] 이 블록 이후 Q&A·FAQ 반응형은 1024 / 768 / 480 세 개만 쓴다.
   ========================================================= */
.rn-narrow {--rn-narrow-pad: 40px; --rn-narrow-pad-y: 120px;
	width: 100%; margin: 0 auto;
	/* padding 축약형으로 좌우만 쓰면 레거시 .board 의 padding-top(6%)까지 0 으로 덮인다 —
	   상하 값을 반드시 함께 명시한다 */
	padding: var(--rn-narrow-pad-y) var(--rn-narrow-pad);}
/* 고정 px 폭을 쓰지 않는다 — max-width + width:100% 라야 단보다 좁은 화면에서 가로 스크롤이 안 생긴다 */
.rn-narrow > * {width: 100%; max-width: var(--container-narrow); margin-left: auto; margin-right: auto;}
/* 목록형(FAQ) 하단 페이징 — 아래 여백은 단이 책임진다(레거시 margin 100px 0 이 겹치면 220px 이 된다) */
.rn-narrow .page_Num {margin: 100px 0 0;}

@media screen and (max-width: 1024px) {
	.rn-narrow {--rn-narrow-pad: 32px;}
}
@media screen and (max-width: 768px) {
	.rn-narrow {--rn-narrow-pad: 24px; --rn-narrow-pad-y: 80px;}
	.rn-narrow .page_Num {margin: 60px 0 0;}
	/* 타이틀·부제는 가로 배치를 풀고 세로로 쌓는다.
	   마크업의 <br class="m_block"> 은 줄만 떨어뜨릴 뿐 간격을 못 주므로 끄고,
	   부제를 블록으로 내려 8px 만 띄운다 (다른 페이지의 .board_tit 는 그대로 둔다) */
	.rn-narrow .board_tit h2 {font-size: 32px;}
	.rn-narrow .board_tit .m_block {display: none;}
	.rn-narrow .board_tit span {display: block; margin: 8px 0 0; font-size: 13px;}
}
@media screen and (max-width: 480px) {
	.rn-narrow {--rn-narrow-pad: 16px; --rn-narrow-pad-y: 60px;}
	.rn-narrow .board_tit h2 {font-size: 26px;}
	.rn-narrow .board_tit span {font-size: 13px;}
}

/* =========================================================
   4-12. 공통 스크린리더 전용 텍스트 — .sr-only
      화면에서는 안 보이지만 스크린리더에는 읽히는 글. 점·아이콘처럼 '모양만으로 뜻을 전하는'
      표식에는 반드시 이 글을 같이 넣는다 — 모양은 소리로 읽히지 않는다.
      display:none / visibility:hidden 은 낭독 대상에서도 빠지므로 쓰지 않는다(1px 로 접어서 감춘다).

      [붙이는 법] <span class="new"><span class="sr-only">신규</span></span>
   ========================================================= */
.sr-only {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;}


/* =========================================================
   5. FAQ — faq.jsp 의 .faq-search/.rn-tabs/.faq-acc + faq.js 마크업
      실시간 검색 + 카테고리 탭 + 아코디언(grid-rows 전환).

      ★ 톤앤매너: 컨펌된 패키지 목록/상세(board-card.css · board-detail.css)에 맞춘다.
        - 라운드/그림자 없음 (사각 + 1px 헤어라인)
        - 칩/배지는 목록 카드의 .chip 과 같은 값: 13px / padding 6px 12px / border-radius 0
          (탭·갤러리 칩은 라인 + 선택 시 채움 / FAQ 배지만 연한 면 — 아래 .cat 주석 참고)
        - 좌측 정렬 (카드 목록의 .board_tit 와 같은 축)
        - 구분은 박스가 아니라 헤어라인 — 상세의 .ctv-facts / .ctv-nav 와 같은 방식
   ========================================================= */

/* 본문 단 — 폭은 공통 4-11 .rn-narrow(= --container-narrow)가 잡는다.
   Q&A 폼과 같은 단 폭·같은 좌우 여백을 쓰기 위해 여기서는 폭을 갖지 않는다 */
.board-wrap .faq-col {width: 100%; max-width: none; margin: 0; text-align: left;}

/* 검색: 타이틀은 공통 .board_tit 를 쓰고(목록 페이지와 동일), 여기서는 검색만 담당.
   사각 라인 입력 + 사각 채움 버튼 (목록 더보기 버튼과 같은 사각 톤) */
/* 검색창은 아래 목록과 같은 폭·같은 좌측 축(단 전체 폭)으로 둔다 — 목록이 좌측 정렬 풀폭인데
   검색만 중앙 좁은 폭이면 세로 축이 어긋나 보인다 */
.board-wrap .faq-search {position: relative; max-width: none; margin: 0 0 26px;}
.board-wrap .faq-search input {width: 100%; height: 58px; border: 1px solid var(--rn-line-2); border-radius: 0;
	padding: 0 66px 0 18px; font-size: 16px; color: var(--rn-ink); outline: none;
	background: #fff; transition: border-color .2s;}
.board-wrap .faq-search input::placeholder {color: var(--rn-ink-3);}
.board-wrap .faq-search input:focus {border-color: var(--rn-point);}
.board-wrap .faq-search button {position: absolute; right: 0; top: 0; width: 58px; height: 58px; border: 0;
	border-radius: 0; background: var(--rn-point); cursor: pointer; transition: opacity .2s;
	display: flex; align-items: center; justify-content: center;}
.board-wrap .faq-search button:hover {opacity: .82;}
/* 돋보기 아이콘 (CSS 로 그림 — 글리프 깨짐 방지) */
.board-wrap .faq-search button::before {content: ''; width: 12px; height: 12px; border: 1.5px solid #fff;
	border-radius: 50%; margin: -4px -4px 0 0;}
.board-wrap .faq-search button::after {content: ''; width: 1.5px; height: 7px; background: #fff;
	transform: rotate(-45deg); margin: 8px 0 0 -3px;}

/* 카테고리 탭은 공통 컴포넌트 .rn-tabs / .rn-tab (위 4-1 블록) 를 쓴다.
   FAQ 는 검색바와 같은 축으로 중앙 정렬 — 마크업에 .is-center 만 붙인다 */

/* 아코디언 목록 — 개별 카드 박스가 아니라 헤어라인으로 나눈 목록 */
.board-wrap .faq-acc {display: flex; flex-direction: column; gap: 0; text-align: left; list-style: none;
	border-top: 1px solid var(--rn-line);}
.board-wrap .faq-acc .faq-item {border-bottom: 1px solid var(--rn-line); background: transparent;
	line-height: normal; cursor: default;}

/* 질문 행 */
/* 한 화면에 10개 이상 반복되는 행이라 상하 패딩을 조여 스캔이 쉽게 한다.
   좌측 'Q' 아이콘은 두지 않는다 — 정보 가치가 없고 배지·제목의 시작선만 흐린다.
   따라서 배지가 행의 첫 요소다 */
.board-wrap .faq-acc .faq-q {display: flex; align-items: baseline; gap: 16px; padding: 20px 4px; cursor: pointer;
	user-select: none;}
/* 카테고리 라벨 — 생김새는 공통 태그 스펙(4-2)이 가지고 여기서는 자리만 잡는다.
   min-width 로 제목 시작선을 고정한다 — 글자수가 달라도 모든 행의 질문이 같은 x축에서 시작한다 */
.board-wrap .faq-acc .faq-q .cat {flex: 0 0 auto; align-self: center;
	min-width: var(--rn-faq-cat-w);}
/* 카테고리가 없는 항목도 제목 시작선은 같아야 하므로 배지 자리를 그대로 비워 둔다 */
.board-wrap .faq-acc .faq-q .cat.is-empty {visibility: hidden;}
/* min-width: 0 이 있어야 이 칸이 실제로 줄어든다 — 없으면 띄어쓰기 없는 긴 제목의 폭이
   그대로 최소 폭이 되어 오른쪽 펼침 화살표(.chev)를 화면 밖으로 밀어낸다 (4-0 참고) */
.board-wrap .faq-acc .faq-q .txt {flex: 1; min-width: 0; font-size: 21px; font-weight: 500; line-height: 1.5;
	color: var(--rn-ink); word-break: keep-all;}
.board-wrap .faq-acc .faq-q .chev {flex: 0 0 auto; align-self: center; width: 20px; height: 20px; color: var(--rn-ink-3);
	transition: transform .35s ease, color .25s; display: flex; align-items: center; justify-content: center;}
/* 화살표는 폰트 글리프 대신 CSS 로 그린다 (환경별 글자 깨짐 방지) */
.board-wrap .faq-acc .faq-q .chev::before {content: ''; width: 8px; height: 8px; margin-top: -4px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);}
.board-wrap .faq-acc .faq-item.open .chev {transform: rotate(180deg); color: var(--rn-ink);}

/* 답변: 높이(grid-rows) 전환 — 질문 텍스트와 같은 축에서 시작한다 */
.board-wrap .faq-acc .faq-a {display: grid; grid-template-rows: 0fr;
	transition: grid-template-rows .4s cubic-bezier(.22, 1, .36, 1);}
.board-wrap .faq-acc .faq-item.open .faq-a {grid-template-rows: 1fr;}
.board-wrap .faq-acc .faq-a-clip {overflow: hidden; min-height: 0;}
.board-wrap .faq-acc .faq-a-inner {padding: 0 4px 30px calc(var(--rn-faq-cat-w) + 20px);
	font-size: 16px; line-height: 1.85;
	color: var(--rn-ink-2); word-break: keep-all; overflow-wrap: break-word;
	/* 질문 행은 단 전체(1200px)를 쓰지만 답변 글줄은 상세 본문과 같은 가독 폭으로 제한한다 */
	max-width: 900px;}
/* 답변 위 구분선은 두지 않는다 — 항목 아래 헤어라인만으로 구분한다(선이 겹쳐 보임 방지) */
.board-wrap .faq-acc .faq-a-inner img {max-width: 100%; height: auto;}
/* 답변 안의 넓은 표는 잘리지 않게 (감싸기는 shm.fitContent) */
.board-wrap .faq-acc .faq-a-inner .rn-scrollx {max-width: 100%; overflow-x: auto; margin: 0 0 18px;
	-webkit-overflow-scrolling: touch;}
.board-wrap .faq-acc .faq-a-inner .rn-scrollx > table {margin: 0; min-width: 480px;}

/* 결과 없음 */
.board-wrap .faq-acc .faq-nodata {text-align: center; padding: 80px 0; color: var(--rn-ink-3);}
.board-wrap .faq-acc .faq-nodata p {font-size: var(--rn-fs-body); margin-top: 16px; line-height: 1.6;}

/* 반응형 (1024 / 768 / 480) — 질문 활자 21 → 18 → 15px 단계 하강 */
@media screen and (max-width: 1024px) {
	.board-wrap .faq-acc .faq-q {padding: 18px 4px; gap: 14px;}
	.board-wrap .faq-acc .faq-q .txt {font-size: 18px;}
	.board-wrap .faq-acc .faq-a-inner {padding: 0 4px 26px calc(var(--rn-faq-cat-w) + 18px);
		font-size: var(--rn-fs-body);}
	/* 탭 활자: 공통 블록(4-1)은 900/640 에서 한 번 더 줄지만 FAQ 는 1024/768/480 만 쓴다.
	   단 안에서만 더 구체적인 선택자로 덮어 다른 페이지(갤러리)의 탭은 건드리지 않는다 */
	.board-wrap .faq-col .rn-tabs .rn-tab {font-size: 14px; padding: 9px 12px;}
}
@media screen and (max-width: 768px) {
	/* 검색: 입력은 단 전체를 쓰고 버튼만 고정 48px.
	   활자 16px — iOS Safari 는 16px 미만 입력에 포커스하면 화면을 확대한다(자동으로 안 돌아온다) */
	.board-wrap .faq-search input {height: 48px; font-size: 16px; padding: 0 60px 0 14px;}
	.board-wrap .faq-search button {width: 48px; height: 48px;}
	/* 카테고리 탭: 줄바꿈 대신 가로 스크롤 — 항목이 많아도 화면 위쪽을 몇 줄씩 잡아먹지 않는다.
	   스크롤바는 숨기고(모바일은 원래 안 보인다) 터치로만 민다. FAQ 단에서만 적용 —
	   갤러리 탭은 항목이 적어 줄바꿈이 더 낫다 */
	.board-wrap .faq-col .rn-tabs {flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;}
	.board-wrap .faq-col .rn-tabs::-webkit-scrollbar {display: none;}
	.board-wrap .faq-col .rn-tabs .rn-tab {flex: 0 0 auto; white-space: nowrap;}
	/* 배지와 제목을 한 행에 나란히 두면 모바일 폭이 모자라므로
	   [배지] 윗줄 / [질문 제목] 아랫줄로 세로 스택 배치한다.
	   flex 를 grid 로 바꿔 1행=배지, 2행=제목으로 쌓고
	   화살표만 1~2행을 함께 차지하게 걸어 행 우측 세로 가운데에 그대로 남긴다.
	   row-gap 은 0 으로 둔다 — 배지가 없는 항목(.is-empty)은 1행이 비는데,
	   간격을 gap 으로 주면 그 빈 행의 간격이 제목 위에 그대로 남는다.
	   배지·제목 사이 간격은 배지의 margin-bottom 으로 준다.
	   행 높이는 고정하지 않는다 — 제목이 두세 줄로 늘어나도 상하 18px 패딩만 유지된다 */
	.board-wrap .faq-acc .faq-q {display: grid; grid-template-columns: minmax(0, 1fr) auto;
		align-items: center; column-gap: 10px; row-gap: 0; padding: 18px 2px;}
	/* 세로 스택에서는 제목 시작선을 배지 폭으로 맞출 필요가 없으므로 min-width 를 해제해
	   배지가 글자수만큼만 폭을 쓰게 한다 — 좁은 화면을 밀어낼 여지가 사라진다.
	   활자·패딩은 데스크탑(13px / 6px 12px)에서 한 단계 낮춘다 */
	/* 세로 스택에서는 제목 시작선을 맞출 필요가 없어 min-width 만 푼다 — 라벨 크기는 데스크탑과 같다 */
	.board-wrap .faq-acc .faq-q .cat {grid-column: 1; grid-row: 1; justify-self: start;
		min-width: 0; margin: 0 0 8px;}
	/* 시작선을 맞출 배지 자리가 필요 없으니 카테고리가 없는 항목은 배지를 아예 뺀다 */
	.board-wrap .faq-acc .faq-q .cat.is-empty {display: none;}
	/* 제목은 줄바꿈 허용 — 말줄임(...)으로 자르지 않는다. 질문은 끝까지 읽혀야 고르는 의미가 있다 */
	.board-wrap .faq-acc .faq-q .txt {grid-column: 1; grid-row: 2; font-size: 16px;
		white-space: normal; overflow: visible; text-overflow: clip;}
	/* 화살표는 계속 행 우측 — 1~2행을 함께 차지해 두 줄의 세로 가운데에 놓인다 */
	.board-wrap .faq-acc .faq-q .chev {grid-column: 2; grid-row: 1 / span 2; align-self: center;}
	/* 세로 스택이라 제목이 행 좌측에서 시작하므로 답변 들여쓰기(배지 폭)도 걷어낸다 */
	.board-wrap .faq-acc .faq-a-inner {padding: 0 2px 22px 2px;}
}
@media screen and (max-width: 480px) {
	.board-wrap .faq-col .rn-tabs .rn-tab {font-size: 13px; padding: 8px 10px;}
	.board-wrap .faq-acc .faq-q .txt {font-size: 15px;}
	.board-wrap .faq-acc .faq-a-inner {padding-bottom: 20px;}
}

/* =========================================================
   6. 공통 페이징(숫자형) — comm/paging.js 가 그리는 마크업 전용
      .pg      : 숫자형 — 공지/FAQ 등 일반 게시판
      ※ 컨펌된 패키지 톤(사각)에 맞춰 라운드를 쓰지 않는다 — 목록의 더보기 버튼도 사각이다.
   ========================================================= */

/* ----- 숫자형 (사각) ----- */
.board-wrap .pg {display: flex; align-items: center; justify-content: center; gap: 6px;}
.board-wrap .pg button {border: 0; background: none; cursor: pointer; font-family: inherit; padding: 0;}
.board-wrap .pg .num {min-width: 38px; height: 38px; border-radius: 0; font-size: var(--rn-fs-sm);
	color: var(--rn-ink-3); transition: .18s;}
.board-wrap .pg .num:hover {background: var(--rn-soft); color: var(--rn-point);}
.board-wrap .pg .num.on {background: var(--rn-point); color: var(--rn-point-text); font-weight: 700; cursor: default;}
.board-wrap .pg .gap {color: #c6cad0; font-size: 13px; padding: 0 2px;}
.board-wrap .pg .nav {width: 38px; height: 38px; border-radius: 0; color: #b6bac0;
	display: flex; align-items: center; justify-content: center; transition: .18s;}
/* 화살표는 CSS 로 그린다 (이미지/글리프 의존 제거) */
.board-wrap .pg .nav::before {content: ''; width: 8px; height: 8px; border-right: 1.8px solid currentColor; border-top: 1.8px solid currentColor;}
.board-wrap .pg .nav.prev::before {transform: rotate(-135deg); margin-left: 3px;}
.board-wrap .pg .nav.next::before {transform: rotate(45deg); margin-right: 3px;}
.board-wrap .pg .nav:hover:not([disabled]) {background: var(--rn-soft); color: var(--rn-point);}
.board-wrap .pg .nav[disabled] {opacity: .35; cursor: default;}

/* 레거시 .page_Num 컨테이너의 구형 규칙(strong 이미지화/float) 무력화 */
.board-wrap .page_Num .pg strong,
.board-wrap .page_Num .pg {line-height: normal;}

@media screen and (max-width: 640px) {
	.board-wrap .pg .num, .board-wrap .pg .nav {min-width: 34px; width: auto; height: 34px; border-radius: 0; font-size: 13.5px;}
}

/* =========================================================
   7. Q&A 문의 폼 — .qna-ed (언더라인 필드 폼)
      qna.jsp 마크업 + board/qna.js (검증/자동 하이픈/카운터) 전용.

      ★ 폭·좌우 여백은 공통 4-11 .rn-narrow 가 잡는다 (FAQ 와 같은 단 = --container-narrow).
        폼 자신은 폭을 갖지 않는다 — 두 페이지의 좌우 끝선이 한 줄로 맞아야 한다.
      ★ 활자는 폼 공통 토큰(--rn-form-*) — 라벨과 입력값이 같은 크기라 한 줄로 읽힌다.
      ★ 필드는 한 줄에 하나씩. 2열로 붙이면 라벨 축이 두 개가 되어 읽는 흐름이 끊긴다.
      ★ 시스템 UI(셀렉트 드롭다운·체크박스)는 공통 커스텀 컴포넌트로 대체한다(4-8 / 4-9).

      [구성]  분류 → 이름 → 연락처 → 이메일 → 제목 → 내용(카운터 내장)
              → 개인정보 약관 상자 → 동의 체크 → 가운데 등록 버튼
   ========================================================= */
/* 아래 여백은 갖지 않는다 — 단(.rn-narrow)의 padding-bottom 이 페이지 하단 여백을 책임진다.
   여기서 또 주면 폼 끝과 푸터 사이만 두 배로 벌어진다 */
.board-wrap .qna-ed {width: 100%; max-width: none; margin: 0; background: #fff;
	text-align: left; color: var(--rn-ink); padding-bottom: 0;}

/* ----- 폼 그리드 -----
   타이틀 밑 헤어라인은 두지 않는다 — 첫 필드의 밑줄이 이미 경계 역할을 한다.
   선을 빼면서 타이틀과의 간격도 같이 조인다 — .board_tit 의 여백(56px)만 쓴다.
   (기존 56 + padding 40 + margin 40 = 136px) 이제 FAQ 의 타이틀→내용 간격과 동일 */
.board-wrap .qna-ed fieldset {border: 0; margin: 0; padding: 0;}
.board-wrap .qna-ed .qna-ed-grid {display: grid; gap: 34px;}

/* ----- 언더라인 필드 행 (한 줄에 하나) ----- */
/* 라벨 컬럼은 --rn-form-label-w 고정폭 — 라벨 길이와 무관하게 모든 행의 입력 시작점이 맞는다.
   밑줄(--rn-form-line)은 입력 영역의 경계가 읽히는 최소 농도 */
.board-wrap .qna-ed .qna-ed-row {display: grid; grid-template-columns: var(--rn-form-label-w) 1fr; gap: 8px 20px;
	align-items: baseline; border-bottom: 1px solid var(--rn-form-line); padding-bottom: 16px; position: relative;}
/* 포커스 강조선은 두지 않는다 — 입력하려고 클릭하는 순간 밑줄이 검게 차올라 시선이 그리로 끌린다.
   밑줄은 어느 상태에서나 같은 농도(--rn-form-line)로 두고, 오류일 때만 색이 바뀐다(아래 .err). */

.board-wrap .qna-ed .qna-ed-row > label {font-size: var(--rn-form-fs); font-weight: 400;
	color: var(--rn-form-label-c); line-height: 1.5;}
/* 필수 표시는 한 곳(--rn-required)만 쓴다 — 라벨의 *, 동의문의 (필수), 타이틀 범례의 * 까지 같은 색.
   (타이틀 범례의 * 는 설명문 색을 물려받아 회색이었다) */
.board-wrap .qna-ed .board_tit span em,
.board-wrap .qna-ed .qna-ed-row > label em,
.board-wrap .qna-ed .qna-ed-agree label em {font-style: normal; color: var(--rn-required); margin-left: 2px;}

/* 입력값·placeholder 활자는 라벨과 같은 크기(--rn-form-fs).
   outline:none 은 브라우저 기본 파란 테두리를 끄기 위한 것 — 대신 위 ::after 밑줄이 포커스를 알린다 */
.board-wrap .qna-ed .qna-ed-row input,
.board-wrap .qna-ed .qna-ed-row textarea {width: 100%; border: 0; background: transparent; border-radius: 0;
	font-family: inherit; font-size: var(--rn-form-fs); line-height: 1.5; color: var(--rn-form-value-c);
	padding: 0 0 2px; outline: none;}
.board-wrap .qna-ed .qna-ed-row input::placeholder,
.board-wrap .qna-ed .qna-ed-row textarea::placeholder {color: var(--rn-form-label-c); opacity: 1;}

/* 분류(셀렉트)는 공통 커스텀 드롭다운(4-8 .rn-select)이 그린다 — 여기서는 자리만 잡는다 */
.board-wrap .qna-ed .qna-ed-row .rn-select {min-width: 0;}

/* ----- 내용: 글자수 카운터를 입력칸 안(오른쪽 아래)에 둔다 -----
   resize 핸들은 끈다 — 오른쪽 아래에서 카운터와 겹친다.
   높이는 height 로 못 박는다 — 마크업의 rows="5" 가 만드는 기본 높이(약 140px)는
   min-height 로는 줄지 않아 폼 하단에 빈 공간이 크게 남는다.
   padding-bottom 34px 은 카운터 자리 (border-box 라 height 안에 포함된다) —
   카운터 위로 8px 이 남게 잡는다. 26px 이면 마지막 줄이 카운터에 붙어 답답해 보인다.
   .qna-ed-block: 여러 줄 입력 행은 라벨을 위에 맞춘다 — baseline 정렬은 감싼 요소의
   마지막 줄(=카운터)에 맞춰져 라벨이 아래로 내려간다. */
.board-wrap .qna-ed .qna-ed-row.qna-ed-block {align-items: start;}
.board-wrap .qna-ed .qna-ed-area {position: relative; display: block;}
.board-wrap .qna-ed .qna-ed-area textarea {resize: none; height: 120px; min-height: 0; line-height: 1.75;
	padding-bottom: 34px;}
.board-wrap .qna-ed .qna-ed-count {position: absolute; right: 0; bottom: 4px; font-size: var(--rn-fs-xs);
	color: var(--rn-ink-3); letter-spacing: .06em; font-variant-numeric: tabular-nums; pointer-events: none;}

/* ----- 오류 표시 (qna.js 가 .err 토글 + 메시지 주입) ----- */
.board-wrap .qna-ed .qna-ed-err {grid-column: 1 / -1; font-size: var(--rn-fs-xs); color: var(--rn-err); line-height: 1.4; margin: 0;}
.board-wrap .qna-ed .qna-ed-err:empty {display: none;}
.board-wrap .qna-ed .qna-ed-row.err {border-bottom-color: var(--rn-err);}
.board-wrap .qna-ed .qna-ed-row.err > label {color: var(--rn-err);}

/* ----- 개인정보 약관 상자 — 내용칸과 동의 체크 사이 -----
   약관은 요약하지 않고 전문을 그대로 보여준다(동의의 근거가 화면에 있어야 한다).
   대신 높이를 못 박고 안에서만 스크롤해 폼 길이가 약관 길이에 끌려가지 않게 한다.
   상자 자체의 값(높이/여백/활자/스크롤바)은 공통 4-10 .rn-terms + 4-7 .rn-scrolly 가 가진다.
   ★ 호텔별로 방침이 다르면 JSP 의 이 블록 문구만 교체하면 된다 — CSS 는 건드릴 필요 없다 */
.board-wrap .qna-ed .qna-ed-terms {margin-top: 44px;}

/* ----- 동의 체크 — 약관 상자 바로 아래. 위아래 구분선은 두지 않는다(상자가 이미 영역) ----- */
.board-wrap .qna-ed .qna-ed-agree {margin-top: 18px;}
.board-wrap .qna-ed .qna-ed-agree .chk {display: flex; align-items: flex-start; gap: 12px;}
/* 체크박스 모양은 공통 4-9 .rn-chk — 여기서는 라벨 첫 줄과의 세로 맞춤만 준다 */
.board-wrap .qna-ed .qna-ed-agree input[type="checkbox"] {margin-top: 2px;}
.board-wrap .qna-ed .qna-ed-agree label {font-size: var(--rn-form-fs); color: var(--rn-ink-2);
	line-height: 1.6; cursor: pointer;}
.board-wrap .qna-ed .qna-ed-agree .qna-ed-err {margin-top: 10px;}
/* 동의 누락도 다른 필드와 같은 신호를 준다 — 메시지만으로는 어디가 문제인지 안 걸린다 */
.board-wrap .qna-ed .qna-ed-agree.err input[type="checkbox"] {border-color: var(--rn-err);}

/* ----- 하단: 등록 버튼 (가운데) -----
   이 페이지의 대표 CTA 라 공통 채움 버튼(위 4-4 .rn-btn.solid)의 형태를 그대로 쓰고,
   폼 안의 버튼이라 활자만 폼 토큰(--rn-form-fs)에 맞춘다 — 라운드는 0(사이트 기본).
   hover 는 opacity 대신 한 단계 옅은 먹으로 바꿔 폼 위에서 또렷하게 눌린 느낌을 준다 */
.board-wrap .qna-ed .qna-ed-foot {margin-top: 44px; display: flex; justify-content: center;}
.board-wrap .qna-ed .qna-ed-btn {min-width: 340px; padding: 19px 60px; border-radius: 0;
	font-size: var(--rn-form-fs); font-weight: 500;
	background: var(--rn-ink-strong); border-color: var(--rn-ink-strong);}
.board-wrap .qna-ed .qna-ed-btn:hover {background: var(--rn-ink-doc); border-color: var(--rn-ink-doc); opacity: 1;}

/* ----- 반응형 (FAQ 와 같은 기준: 1024 / 768 / 480) ----- */
@media screen and (max-width: 1024px) {
	.board-wrap .qna-ed .qna-ed-grid {gap: 30px;}
	/* 라벨 컬럼만 한 단계 더 좁힌다 (활자는 이미 폼 토큰으로 통일돼 따로 줄이지 않는다) */
	.board-wrap .qna-ed {--rn-form-label-w: 84px;}
}
@media screen and (max-width: 768px) {
	.board-wrap .qna-ed .qna-ed-grid {gap: 26px;}
	/* 라벨-입력 가로 배치를 풀고 라벨을 입력 위로 올린다 (간격 8px) */
	.board-wrap .qna-ed .qna-ed-row {grid-template-columns: 1fr; gap: 8px; padding-bottom: 12px;}
	/* 모바일 입력 활자는 16px 로 올린다 — iOS Safari 는 16px 미만 입력에 포커스하면 화면을
	   자동 확대하고 되돌리지 않는다. 최소 높이 44px 은 손가락 히트 영역 기준. */
	.board-wrap .qna-ed .qna-ed-row input,
	.board-wrap .qna-ed .qna-ed-row textarea,
	.board-wrap .qna-ed .qna-ed-row .rn-select-btn {font-size: 16px; min-height: 44px;}
	/* 네이티브 셀렉트도 같이 올린다 — 커스텀 드롭다운이 없는 환경(JS 미로드) 대비 */
	.board-wrap .qna-ed .qna-ed-row select {font-size: 16px;}
	.board-wrap .qna-ed .qna-ed-area textarea {height: 132px;}
	/* 약관 상자는 한 단계 낮춘다 — 모바일에서 180px 은 화면의 1/3 을 잡아먹는다 */
	.board-wrap .qna-ed .qna-ed-terms {margin-top: 34px; --rn-terms-h: 140px;}
	.board-wrap .qna-ed .qna-ed-foot {margin-top: 34px;}
	.board-wrap .qna-ed .qna-ed-btn {width: 100%; min-width: 0; padding: 17px 20px;}
}
/* =========================================================
   8. 공지 에디토리얼 — notice_list/notice_view (.ntc-*), board/notice.js
      넘버링 목록 + 센터 아티클 상세 + 첨부파일.
      타이포/색은 공통 토큰 — 다른 게시판(카드/FAQ/Q&A)과 동일 스케일.
   ========================================================= */

/* ----- 목록: 타이틀 -----
   전용 히어로(.ntc-hero)를 두지 않는다 — 패키지·갤러리·FAQ·Q&A 와 같은 공통 컴포넌트
   .board_tit (위 1번 블록) 를 그대로 쓴다. 마크업도 같다:
     <div class="board_tit"><h2>Notice<br class="m_block"><span>설명</span></h2></div>
*/

/* ----- 목록: 검색 바 -----
   건수 표기는 두지 않는다 — 검색만 남으므로 우측 정렬(flex-end)로 붙인다.
   (space-between 으로 두면 자식이 하나일 때 왼쪽으로 붙어 버린다)
   행 높이는 검색 입력(43px)이 만든다. 건수 글자는 그보다 낮아 높이에 관여하지 않았으므로
   지워도 행 높이·아래 목록 상단선까지의 여백(20px)은 그대로다. min-height 로 한 번 더 못 박아
   나중에 이 행의 내용이 바뀌어도 리스트 상단선이 올라붙지 않게 한다. */
.board-wrap .ntc-bar {display: flex; justify-content: flex-end; align-items: center; gap: 10px 18px;
	flex-wrap: wrap; min-height: 48px; margin-bottom: 12px;}
.board-wrap .ntc-search {position: relative; width: min(300px, 100%);}
/* placeholder/입력값이 밑줄에 붙지 않도록 line-height 와 padding-bottom 으로 여유를 준다 */
.board-wrap .ntc-search input {width: 100%; border: 0; border-bottom: 1px solid var(--rn-line); background: transparent;
	padding: 8px 30px 13px 2px; font-size: var(--rn-fs-sm); line-height: 1.5; outline: none;
	transition: border-color .2s; border-radius: 0;}
.board-wrap .ntc-search input:focus {border-color: var(--rn-point);}
/* 돋보기 아이콘 (CSS 로 그림) */
.board-wrap .ntc-search button {position: absolute; right: 0; top: 8px; width: 22px; height: 22px;
	background: none; border: 0; cursor: pointer;}
/* 돋보기 = 원(::before) + 손잡이(::after).
   원은 테두리가 밖으로 붙어(의사요소는 전역 border-box 리셋이 안 걸린다) 실제 지름이
   10 + 1.8×2 = 13.6px 이다. 따라서 중심 (9.8, 9.8) · 반지름 6.8. */
.board-wrap .ntc-search button::before {content: ''; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px;
	border: 1.8px solid var(--rn-ink-3); border-radius: 50%;}
/* 손잡이는 원의 '45° 방향 가장자리'에서 시작해야 붙어 보인다. 테두리 선 안쪽으로 0.8px 만
   물려 시작한다 — 딱 가장자리에 맞추면 안티에일리어싱 때문에 실선 한 가닥만큼 떠 보인다.
     시작점 = 중심 9.8 + (반지름 6.8 − 0.8) × 0.707 = 14.04
     막대 중심 = 시작점 + (길이 6.6 / 2) × 0.707 = 16.37  → left/top = 중심 − 폭·높이의 절반
   위치를 right/bottom 으로 잡으면 원이 아니라 '버튼 모서리' 기준이 되어 원과 떨어지므로
   반드시 left/top 으로 원 기준에서 계산한다. (틀어져 보이던 원인) */
.board-wrap .ntc-search button::after {content: ''; position: absolute; box-sizing: border-box;
	left: 15.4px; top: 13.1px; width: 2px; height: 6.6px;
	background: var(--rn-ink-3); border-radius: 2px; transform: rotate(-45deg);}

/* ----- 목록: 넘버링 행 -----
   상하 패딩은 FAQ 질문 행(.faq-q: 20 / 18 / 15px)과 같은 값 — 한 화면에 10건이 반복되는
   같은 성격의 목록이라 행 높이를 맞춰 두 페이지의 스캔 리듬을 같게 한다. */
.board-wrap .ntc-list {list-style: none; text-align: left; border-top: 1.5px solid var(--rn-ink);}
.board-wrap .ntc-list .detail {display: grid; grid-template-columns: var(--rn-ntc-no-w) minmax(0, 1fr) auto; gap: 20px;
	align-items: baseline; padding: 20px 2px; border-bottom: 1px solid var(--rn-line); cursor: pointer;}
/* 번호는 컬럼 안에서 가운데 정렬 — 자릿수가 1 → 10 → 100 으로 늘어나도 중심선이 그대로다.
   (좌측 정렬로 두면 자릿수마다 글자 중심이 오른쪽으로 밀려 아래 배지와 축이 어긋난다) */
/* 번호 칸 높이를 배지(4-2 태그 28px)와 같게 잡는다 — 안 맞추면 고정글 행만 2px 높아져 줄 간격이 튄다 */
.board-wrap .ntc-list .no {display: flex; align-items: center; justify-content: center; height: 28px;
	font-size: var(--rn-fs-sm); color: var(--rn-ink-3); font-variant-numeric: tabular-nums;}
/* 고정글 배지 — 생김새는 사이트 공통 태그 스펙(4-2)이 가진다.
   고정글이라 '채움(solid)' 변형을 써서 일반 번호와 위계를 분명히 나눈다.
   배지는 박스라 baseline 이 아니라 행 가운데에 맞춘다(FAQ 카테고리 배지와 같은 방식). */
/* grid 자식은 inline-block 이 block 으로 승격돼 컬럼 폭을 다 쓰므로 justify-self 로 배지 폭만 쓰게 하고,
   center 로 컬럼 가운데에 놓는다 — 위 번호(text-align:center)와 좌우 중심선이 정확히 겹친다 */
.board-wrap .ntc-list .no.pin {align-self: center; justify-self: center; max-width: 100%;}
/* 제목 행은 [제목 + 신규 표시] 두 칸짜리 flex — 블록으로 두면 제목이 줄바꿈될 때
   신규 표시가 마지막 줄 끝으로 따라 내려간다(첫 줄 옆에 붙어 있어야 눈에 걸린다).
   --ntc-tit-fs 는 신규 표시의 세로 가운데 정렬 기준(한 줄 높이) 계산에도 쓰인다 */
.board-wrap .ntc-list h3 {--ntc-tit-fs: var(--rn-fs-h); --ntc-tit-lh: 1.45;
	display: flex; align-items: flex-start;
	font-size: var(--ntc-tit-fs); font-weight: 600; color: var(--rn-ink); line-height: var(--ntc-tit-lh);
	transition: transform .3s ease; transform-origin: left; word-break: keep-all;}
/* 제목은 남는 폭만 쓰고 줄바꿈된다(min-width:0 이라야 flex 항목이 실제로 줄어든다) */
.board-wrap .ntc-list h3 .ntc-tit {min-width: 0;}
.board-wrap .ntc-list .detail:hover h3 {transform: translateX(10px);}
/* 신규 표시 — 박스형 뱃지가 아니라 [점 + NEW] 텍스트.
   배경·테두리가 없어 목록의 사각 배지(NOTICE)와 위계가 섞이지 않고, 위첨자도 아니라 각주로 안 읽힌다.
   height 를 제목 한 줄 높이로 잡고 그 안에서 가운데 정렬 — 제목이 두 줄이 돼도 첫 줄에 세로 중앙으로 붙는다.
   활자·점 크기는 고정(11px / 5px) — 표식이라 화면 폭에 따라 줄이지 않는다. */
.board-wrap .ntc-list h3 .new {flex: 0 0 auto; margin-left: 8px;
	height: calc(var(--ntc-tit-fs) * var(--ntc-tit-lh));
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--rn-new);}
/* 점 — 글자와 같은 색(currentColor)이라 색을 바꿀 때 한 곳만 고치면 된다 */
.board-wrap .ntc-list h3 .new::before {content: ''; width: 5px; height: 5px; border-radius: 50%;
	background: currentColor;}
.board-wrap .ntc-list .dt {font-size: var(--rn-fs-xs); color: var(--rn-ink-3);
	font-variant-numeric: tabular-nums; letter-spacing: .06em;}
.board-wrap .ntc-list .ntc-nodata {text-align: center; padding: 80px 0; color: var(--rn-ink-3);}
.board-wrap .ntc-list .ntc-nodata p {font-size: var(--rn-fs-body); margin-top: 14px;}

/* ----- 상세: 아티클 -----
   컨테이너 폭은 공용 토큰 --rn-detail-w (0번 블록) — 콘텐츠 상세(.ctv-view)와 '같은 값'이라
   목록↔상세, 공지 상세↔패키지 상세 사이에서 좌우 끝선이 튀지 않는다.
   날짜/제목/본문 모두 같은 좌측 축을 쓴다(가운데 정렬 금지 — 본문이 좌측 정렬이라 축이 어긋난다). */
.board-wrap .ntc-view {max-width: var(--rn-detail-w); margin: 0; text-align: left;}
/* 제목 위 배지 줄 — '고정글에만' 나온다.
   일반글은 목록에서 들어오는 구조라 '공지사항' 같은 라벨이 정보 가치가 없어서 마크업에서 아예 뺀다.
   (자리만 남기는 visibility:hidden / 빈 div 는 쓰지 않는다 — 읽히지 않는 요소가 DOM 에 남는다)

   두 케이스의 제목 시작 높이는 아래 :first-child 규칙이 맞춘다:
     고정글 = 배지 28px + 아래 여백 20px = 48px
     일반글 = 배지 줄이 없으므로 제목이 .ntc-view 의 첫 요소가 되고, 같은 48px 을 위 여백으로 받는다
   조건이 마크업(배지 유무)에서 바로 읽히므로 클래스를 따로 주고받을 필요가 없다. */
.board-wrap .ntc-view .ntc-chips {display: flex; align-items: center; gap: 6px 14px;
	/* 높이 '고정' — 배지 활자가 바뀌어도 제목 시작 높이(48px)가 흔들리지 않게 */
	height: 28px; margin-bottom: 20px;}
/* 배지는 사이트 공통 태그 스펙(4-2, 24px) 그대로 쓴다 — 제목 시작선은 위 .ntc-chips 의 고정 높이가 잡는다 */
/* 제목 — 콘텐츠 상세 제목(.ctv-title)과 '같은' 크기·자간(40px / .01em).
   weight 만 600 — bold(700+)로 올리면 40px 에서 활자가 뭉쳐 목록 헤더처럼 무거워진다.
   대문자 변환(text-transform)은 가져오지 않는다 — 패키지는 영문 상품명이라 쓰지만
   공지 제목은 문장이라 대문자로 올리면 읽기 어려워진다.
   아래 여백 52px: 패키지는 제목 아래 부제 한 줄이 여백을 만들지만 공지는 부제가 없으므로
   그만큼을 여백으로 보정해야 메타 구분선까지의 밀도가 같아진다. */
.board-wrap .ntc-view .ntc-vtitle {font-size: 40px; font-weight: 600; letter-spacing: .01em;
	line-height: 1.25; color: var(--rn-ink); margin: 0 0 52px; word-break: keep-all; text-wrap: balance;}
/* 배지 줄이 없는 글(일반 공지) — 제목이 컨테이너의 첫 요소가 된다.
   배지 줄이 차지하던 높이(28px) + 그 아래 여백(20px) = 48px 을 제목 위 여백으로 대신 준다.
   → 고정글/일반글의 제목 시작선, 그 아래 메타 구분선·본문 시작선이 모두 같은 높이가 된다.
   ※ margin 이 아니라 padding 이어야 한다 — 첫 자식의 위 margin 은 부모(.ntc-view) 밖으로
     빠져나가(margin collapsing) 컨테이너 자체를 밀어내므로 여백이 두 번 생기거나 사라진다. */
.board-wrap .ntc-view .ntc-vtitle:first-child {padding-top: 48px;}
/* 제목 아래 구분선 — 짧은 장식선이 아니라 본문 폭을 채우는 얇은 헤어라인.
   콘텐츠 상세의 제목 아래 헤어라인(.ctv-facts)과 같은 역할·같은 선 굵기/색이다. */
/* 제목 아래 단독 헤어라인 — 정보행(.ntc-facts)이 없는 화면(promotion_view 레거시)에서만 쓴다.
   공지 상세는 위아래 헤어라인을 가진 .ntc-facts 가 이 역할을 대신한다. */
.board-wrap .ntc-view .ntc-rule {width: 100%; height: 1px; background: var(--rn-line); margin: 22px 0 56px;}

/* ----- 상세: 등록일 + 첨부파일 정보행 (.ntc-facts) -----
   틀·활자는 공통 컴포넌트 4-6 (.rn-facts) 이 담당하고, 여기서는 공지 쪽 배치만 정한다.
   줄을 세로로 쌓고, 좁아지면 값이 라벨 아래로 떨어진다(flex-wrap) — 숨기지 않는다. */
/* 등록일 + 첨부파일은 '하나의 덩어리'다 — 사이에 선을 두지 않고 행 간격(18px)으로만 나눈다.
   1px 라인은 블록의 위/아래에만 (4-6 공용 틀이 담당).
   상하 패딩은 줄 수와 무관하게 28px 고정 — 두 줄 기준으로 높이를 잡아 두면 등록일만 있는 글에
   빈 띠가 생긴다. 높이는 내용만큼만 쓰고, 대신 패딩을 못 박아 케이스별 리듬을 맞춘다. */
.board-wrap .ntc-view .ntc-facts {
	--rn-facts-pad: 28px;
	--rn-facts-label-w: 80px;
	--rn-facts-gap: 24px;
	--rn-facts-row-gap: 18px;
	/* 활자는 공용 기본값(값·라벨 모두 17px)을 그대로 쓴다 — 패키지 메타(예약/숙박 기간)와 같은 크기 */

	/* 메타 아래 구분선 → 본문 시작 간격. 공용 기본값(56px)을 공지에서만 48px 로 쓴다 */
	margin-bottom: 48px;
}
.board-wrap .ntc-view .ntc-facts .row {flex-wrap: wrap;}
/* 첨부파일 행이 렌더되지 않는 글에는 이 규칙 자체가 걸리지 않는다 (빈 라벨이 남지 않음) */
.board-wrap .ntc-view .ntc-facts .row + .row {margin-top: var(--rn-facts-row-gap);}
/* 첨부파일 줄 — 박스(배경·테두리) 없이 '아이콘 + 파일명' 텍스트 링크만 둔다.
   정보행의 위/아래 헤어라인이 이미 영역을 만들고 있어서 안쪽에 상자를 또 그리면 흐름에서 떠 보인다.
   파일이 여러 개면 가로로 흘리지 않고 '세로로 한 줄씩' — 파일명이 길어도 잘리는 자리가 일정하다.
   라벨과 첫 파일명의 기준선을 맞추기 위해 행은 위쪽 정렬(flex-start)로 두고,
   활자 크기 차이(라벨 17px / 파일명 14px)에서 오는 기준선 어긋남만 아래에서 미세 보정한다. */
.board-wrap .ntc-view .ntc-facts .ntc-files {align-items: flex-start;}
.board-wrap .ntc-view .ntc-files ul {list-style: none; display: flex; flex-direction: column;
	align-items: flex-start; gap: 10px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0;}
/* 파일 링크 — 면도 테두리도 없다. 클릭 요소라는 신호는 hover(밑줄 + 색 진해짐)가 맡는다 */
.board-wrap .ntc-view .ntc-files a {display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
	background: none; border: 0; padding: 0; border-radius: 0; text-decoration: none;
	/* 활자는 같은 블록의 '등록일 값'과 같은 토큰을 쓴다 — 숫자를 따로 적으면 반응형 단계
	   (17px / 900px 이하 15px)에서 첨부 줄만 어긋난다. 줄 높이(1.5)도 값 줄과 같게 맞춰 두면
	   라벨과 첫 파일명의 기준선이 별도 보정 없이 그대로 겹친다. */
	font-size: var(--rn-facts-fs); line-height: 1.5; color: #333;
	cursor: pointer; transition: color .2s;}
.board-wrap .ntc-view .ntc-files a:hover {color: #111;}
.board-wrap .ntc-view .ntc-files a:hover span {text-decoration: underline;}
.board-wrap .ntc-view .ntc-files a:hover i {color: #333;}
/* 파일명 — 길면 말줄임. 전체 이름은 <a title> 로 확인한다 (JSP 에서 같은 값을 넣는다) */
.board-wrap .ntc-view .ntc-files a span {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 320px;}
/* 다운로드 아이콘 (CSS 로 그림: 세로선 + 화살촉) — 15px 박스, 파일명보다 한 단계 연한 색.
   hover 시 파일명과 함께 진해지도록 색 전환을 건다.

   ★ 화살촉은 정사각형의 오른쪽·아래 테두리만 남겨 45° 돌린 것이라, 돌린 뒤의 '아래 꼭짓점'이
     화살표 끝이 된다. 그래서 두 가지를 맞춰야 똑바로 보인다:
       ① 가로 축 — 기둥(::before) 중심과 화살촉 정사각형의 중심이 같은 x(7.5px)여야 한다.
       ② 세로 위치 — 꼭짓점은 중심에서 반대각선(= 한 변 × 0.707)만큼 더 내려가므로,
          8px 사각형이면 중심 아래로 5.66px 더 간다. 그만큼 위로 올려 잡아야 15px 박스를 안 넘는다.
   ★ box-sizing 을 명시하는 이유: 전역 리셋의 border-box 가 의사요소(::before/::after)에는
     걸려 있지 않아 기본값(content-box)이 된다. 그러면 테두리 2px 이 밖으로 붙어 사각형이
     8px 이 아니라 10px 이 되고, 중심이 1px 오른쪽·아래로 밀려 화살표가 틀어져 보인다. */
.board-wrap .ntc-view .ntc-files a i {position: relative; width: 15px; height: 15px; flex: 0 0 auto;
	color: #999; transition: color .2s;}
/* 기둥 — 폭 2px 의 중심이 7.5px (6.5 + 1) */
.board-wrap .ntc-view .ntc-files a i::before {content: ''; position: absolute; box-sizing: border-box;
	left: 6.5px; top: 2px; width: 2px; height: 9px;
	background: currentColor; border-radius: 2px;}
/* 화살촉 — 중심 (7.5, 7.4) · 꼭짓점 y ≈ 13 (박스 안). 잉크 전체는 y 2~13 으로 박스 중앙에 앉는다 */
.board-wrap .ntc-view .ntc-files a i::after {content: ''; position: absolute; box-sizing: border-box;
	left: 3.5px; top: 3.4px; width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);}

/* ----- 상세: 본문 (에디터 콘텐츠 서식 복원 — 에디토리얼 컨테이너 전용) -----
   높이는 내용만큼만 쓴다(min-height 없음). 아래 이전/다음글과의 간격은 콘텐츠 상세
   (.ctv-doc margin-bottom:60px)와 같은 값 하나로만 만든다 — 본문 아래 margin 과
   이전/다음글 위 margin 을 겹쳐 주면 한 줄짜리 글에서 빈 공간이 과하게 남는다. */
.board-wrap .ntc-view .ntc-body {text-align: left; font-size: 16px; line-height: 1.7; color: var(--rn-ink-doc);
	word-break: keep-all; overflow-wrap: break-word;
	/* 내용이 한 줄이거나 비어도 하단 네비가 메타 블록에 바로 붙지 않게 바닥을 잡아 둔다 */
	min-height: 200px; margin-bottom: 60px;}
/* 콘텐츠 상세(.ctv-doc img)와 같은 규칙 — display:block 은 이미지 아래 인라인 여백(baseline 갭)을
   없애고 이미지가 단독 블록으로 놓이게 한다. 정렬(float) 이미지는 아래 규칙이 다시 흐르게 둔다 */
.board-wrap .ntc-view .ntc-body img {max-width: 100%; height: auto; display: block;}
/* 에디터 이미지 정렬(float) 지원: 글자 두름 여백 + 본문 밖(이전/다음글)으로 새지 않게 clearfix
   (float 가 걸린 이미지는 위 display:block 과 무관하게 계속 글자를 두른다) */
.board-wrap .ntc-view .ntc-body img[style*="float"] {margin: 4px 18px 12px 0;}
.board-wrap .ntc-view .ntc-body img[style*="float: right"],
.board-wrap .ntc-view .ntc-body img[style*="float:right"] {margin: 4px 0 12px 18px;}
.board-wrap .ntc-view .ntc-body::after {content: ''; display: block; clear: both;}
.board-wrap .ntc-view .ntc-body img[src=""],
.board-wrap .ntc-view .ntc-body img:not([src]) {display: none;}
.board-wrap .ntc-view .ntc-body p {margin: 0 0 10px;}
.board-wrap .ntc-view .ntc-body h1, .board-wrap .ntc-view .ntc-body h2,
.board-wrap .ntc-view .ntc-body h3, .board-wrap .ntc-view .ntc-body h4 {margin: 24px 0 12px; color: var(--rn-ink);
	line-height: 1.4; font-weight: 700;}
.board-wrap .ntc-view .ntc-body h1 {font-size: 26px;}
.board-wrap .ntc-view .ntc-body h2 {font-size: 23px;}
.board-wrap .ntc-view .ntc-body h3 {font-size: 20px;}
.board-wrap .ntc-view .ntc-body h4 {font-size: 19px;}
.board-wrap .ntc-view .ntc-body ul {list-style: disc; margin: 10px 0; padding-left: 25px;}
.board-wrap .ntc-view .ntc-body ol {list-style: decimal; margin: 10px 0; padding-left: 25px;}
.board-wrap .ntc-view .ntc-body li {list-style: inherit; margin: 4px 0;}
.board-wrap .ntc-view .ntc-body strong, .board-wrap .ntc-view .ntc-body b {display: inline; padding: 0;
	font-weight: 700; color: inherit; vertical-align: baseline;}
.board-wrap .ntc-view .ntc-body em, .board-wrap .ntc-view .ntc-body i {font-style: italic;}
.board-wrap .ntc-view .ntc-body a {display: inline; width: auto; white-space: normal; overflow: visible;
	text-overflow: clip; color: var(--rn-ink-2); text-decoration: underline;}
.board-wrap .ntc-view .ntc-body blockquote {margin: 16px 0; padding: 12px 20px;
	border-left: 4px solid var(--rn-line-2); background: #fafbfc; color: var(--rn-ink-3);}
.board-wrap .ntc-view .ntc-body table {width: auto; max-width: 100%; table-layout: auto; border-collapse: collapse; margin: 12px 0;}
/* 넓은 표를 감싼 가로 스크롤 박스(4-0)가 표의 위아래 여백을 그대로 이어받는다 */
.board-wrap .ntc-view .ntc-body .rn-scrollx {margin: 12px 0;}
.board-wrap .ntc-view .ntc-body table td, .board-wrap .ntc-view .ntc-body table th {width: auto; padding: 10px 14px;
	border: 1px solid var(--rn-line); vertical-align: middle; font-size: inherit;}
.board-wrap .ntc-view .ntc-body iframe, .board-wrap .ntc-view .ntc-body video {max-width: 100%;}
.board-wrap .ntc-view .ntc-body hr {margin: 20px 0; border: 0; border-top: 1px solid var(--rn-line);}

/* ----- 상세: 이전/다음 + 목록 버튼 -----
   이전/다음글(.ntc-nav)은 공용 컴포넌트 4-5 (.rn-pnav) 가, 목록 버튼(.ntc-back)은
   공용 버튼 4-4 (.rn-btn 라인형 + 상세 하단 배치) 가 담당한다 — 여기서 다시 정의하지 않는다.
   콘텐츠 상세(.ctv-nav / .ctv-back)와 같은 블록을 공유하므로 두 상세가 항상 같이 움직인다. */

/* ----- 콘텐츠(패키지/프로모션/이벤트) 상세 확장 — .ntc-view 재사용 ----- */
/* 리드 문장 (mainTxt) */
.board-wrap .ntc-view .ntc-vlead {font-size: var(--rn-fs-body); color: var(--rn-ink-3); line-height: 1.7;
	margin-top: 14px; word-break: keep-all;}

/* 기간 메타라인 — 사용하는 기간만 표시, 항목 사이 가운데점(·)은 CSS 로 자동 삽입 */
.board-wrap .ntc-view .ntc-metaline {margin-top: 18px; font-size: 13.5px; color: var(--rn-ink-2);
	display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 6px 0;}
.board-wrap .ntc-view .ntc-metaline .it {display: inline-flex; align-items: center;}
.board-wrap .ntc-view .ntc-metaline .it + .it::before {content: '·'; color: #c6cad0; margin: 0 13px;}
.board-wrap .ntc-view .ntc-metaline .lb {color: var(--rn-ink-3); font-size: var(--rn-fs-xs); margin-right: 6px; letter-spacing: .04em;}
.board-wrap .ntc-view .ntc-metaline b {font-weight: 700; color: var(--rn-ink); font-variant-numeric: tabular-nums;}

/* 종료 상태 — 예외일 때만 노출되는 회색 뱃지 + 헤더 딤 처리 (promotion.js .ended 토글) */
.board-wrap .ntc-view .ntc-ended {display: inline-flex; align-items: center; font-size: var(--rn-fs-xs); font-weight: 700;
	border-radius: 999px; padding: 6px 14px; background: var(--rn-soft); color: var(--rn-ink-3);
	letter-spacing: .5px; margin-bottom: 18px;}
.board-wrap .ntc-view .ntc-ended::before {content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: #c6cad0; margin-right: 7px;}
.board-wrap .ntc-view .ntc-ended[hidden] {display: none;}
.board-wrap .ntc-view.ended .ntc-vtitle {color: #9aa0a6;}
.board-wrap .ntc-view.ended .ntc-rule {background: #c6cad0;}
.board-wrap .ntc-view.ended .ntc-feature {filter: grayscale(.85) brightness(.96);}

/* 대표 이미지 (thumbnail) — 본문(에디터) 이미지와 구분되는 컴팩트 카드형.
   전폭이 아닌 축소 사이즈 + 그림자로 "대표 비주얼"임을 티나게 한다 */
.board-wrap .ntc-view .ntc-feature {display: block; width: auto; max-width: min(420px, 100%); max-height: 300px;
	margin: 0 0 38px; object-fit: cover; border-radius: 12px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .14);}
@media screen and (max-width: 640px) {
	.board-wrap .ntc-view .ntc-feature {max-width: 100%; max-height: 240px;}
}

/* ----- 반응형 (FAQ 와 같은 기준: 900 / 640) -----
   이전/다음글(.rn-pnav 그룹)과 목록 버튼(4-4)의 반응형은 공용 블록이 담당한다. */
@media screen and (max-width: 900px) {
	/* 행 높이 — FAQ 질문 행(.faq-q)과 같은 값 */
	.board-wrap .ntc-list .detail {padding: 18px 2px;}
	/* 본문 위/아래 여백 — 콘텐츠 상세(.ctv-facts 40px / .ctv-doc 44px)와 같은 단계 하강 */
	.board-wrap .ntc-view .ntc-rule {margin: 20px 0 40px;}
	.board-wrap .ntc-view .ntc-vtitle {font-size: 27px; margin-bottom: 40px;}
	.board-wrap .ntc-view .ntc-body {font-size: 15px; min-height: 160px; margin-bottom: 44px;}
	.board-wrap .ntc-view .ntc-facts {--rn-facts-pad: 24px; --rn-facts-row-gap: 16px;}
}
@media screen and (max-width: 640px) {
	/* 좁은 화면에서도 데스크탑과 같은 3열 [번호/배지 · 제목 · 날짜] 을 유지한다.
	   번호를 숨기거나 배지를 윗줄로 올리면 그 행만 생김새가 달라져 목록의 리듬이 깨진다.
	   번호 컬럼만 배지 폭(≈69px)에 맞춰 좁히면 셋 다 한 줄에 들어간다 —
	   고정폭이라 번호든 배지든 아래 제목의 시작선은 모든 행에서 같다. */
	.board-wrap .ntc-list {--rn-ntc-no-w: 70px;}
	.board-wrap .ntc-list .detail {grid-template-columns: var(--rn-ntc-no-w) minmax(0, 1fr) auto;
		gap: 8px 12px; padding: 15px 2px;}
	.board-wrap .ntc-list .no {font-size: 13px;}
	/* 배지는 좁은 화면용으로 한 단계 줄인다 (13px/6·12px → 12px/4·10px) */
	/* 제목 활자는 토큰으로 내린다 — 신규 표시의 세로 가운데 기준(한 줄 높이)도 함께 따라온다 */
	.board-wrap .ntc-list h3 {--ntc-tit-fs: 16px;}
	.board-wrap .ntc-view .ntc-vtitle {margin-bottom: 32px;}
	/* 정보행: 좁아져도 [라벨 + 값]을 한 줄로 유지한다 — 라벨만 있는 줄이 먼저 보이면
	   '등록일' 아래 날짜가 따로 떨어져 두 줄짜리 항목처럼 읽힌다.
	   라벨 컬럼과 간격만 한 단계 줄이면 날짜(10자)는 360px 화면에서도 같은 줄에 들어간다 */
	.board-wrap .ntc-view .ntc-facts {--rn-facts-gap: 12px; --rn-facts-pad: 22px; --rn-facts-label-w: 64px;}
	.board-wrap .ntc-view .ntc-body {min-height: 140px;}
	.board-wrap .ntc-view .ntc-files a span {max-width: 200px;}
}

/* =========================================================
   9. 메인 페이지 — 콘텐츠 슬라이드(.mainc-*) + 팝업(.pop-rn)
      index.jsp 의 main.js / popup.js 마크업 전용. (게시판 밖이라 :root 토큰 사용)
      슬라이드 데이터는 /api/boards?type=MAIN_CONTENT — 관리자에서
      "메인페이지 노출" 을 켠 콘텐츠(main_expose_yn=Y)만 내려온다.
   ========================================================= */

/* ----- 메인 콘텐츠 슬라이드 ----- */
/* 메인은 .board-wrap 밖이라 4-0 의 줄바꿈 방어가 닿지 않는다 — 카드에도 같은 규칙을 건다.
   (안 걸면 띄어쓰기 없는 긴 상품명이 카드 폭을 넘어 한 줄로 잘려 나간다) */
.mainc-slide, .pop-rn-set {overflow-wrap: break-word;}
.mainc-slide {padding: 0 48px;}   /* 좌우 여백 — 첫/마지막 카드가 화면 가장자리에 붙지 않게 */
.mainc-slide .slick-slide {margin: 0 10px;}
.mainc-slide .slick-list {margin: 0 -10px;}
@media screen and (max-width: 640px) {
	.mainc-slide {padding: 0 18px;}
}

/* ----- 메인 콘텐츠 카드 — [이미지 위 + 텍스트 아래] 분리형 -----
   정보를 이미지 위에 얹지 않는다: 패키지가 늘면서 라벨·뱃지·기간·가격이 사진을 덮어 둘 다 안 읽혔다.
   ★ 카드 크기는 항목 내용과 무관하게 항상 같다 — 이미지는 고정 비율, 텍스트 영역은 min-height 고정,
     제목·설명은 2줄에서 자른다. 내용이 적은 카드도 높이가 같아 줄이 가지런하다.
   ★ 라운드·그림자 없음(사이트 전체가 각진 톤), 이미지 위 그라데이션 없음.
   🎨 텍스트 영역 높이는 --mainc-body-h 하나로 조절한다. */
.mainc-card {--mainc-body-h: 276px;
	display: block; background: #fff; border-radius: 0; box-shadow: none;
	text-decoration: none; cursor: pointer;}
.mainc-card .thumb {position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rn-soft);}
@supports not (aspect-ratio: 16 / 10) {.mainc-card .thumb {height: 0; padding-top: 62.5%;}}
.mainc-card .thumb img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .4s ease;}
.mainc-card:hover .thumb img {transform: scale(1.04);}

/* 텍스트 영역 — 흰 면. 좌우 패딩을 두지 않아 글의 시작선이 이미지 왼쪽 끝과 맞는다
   (패키지 목록 카드 .ctc-card 와 같은 방식) */
.mainc-card .body {display: flex; flex-direction: column; min-height: var(--mainc-body-h);
	background: #fff; padding: 18px 0 0;}
/* 분류 라벨 — 이미지 위 오버레이가 아니라 제목 위 한 줄로.
   상태 뱃지(진행중)는 두지 않는다 — 메인은 진행중인 것만 올라오므로 모든 카드에 같은 말이 붙는다.
   (한 줄짜리 head 를 남겨 둔 것은 이 자리에 다른 표식을 붙일 여지를 남기기 위함) */
.mainc-card .head {display: flex; align-items: center; gap: 8px; margin-bottom: 10px;}
/* 분류 라벨 — 생김새는 공통 태그 스펙(4-2)과 같다.
   대문자 변환은 걸지 않는다 — 라벨 원본이 이미 Package/Promotion/Event 형태라
   여기서만 올리면 목록·상세(Package)와 글자가 달라 보인다(PACKAGE vs Package) */
.mainc-card .tag {flex: 0 0 auto;}

/* 제목·설명은 2줄 말줄임 — 3줄짜리가 하나 섞이면 그 카드만 키가 커진다 */
.mainc-card h3 {font-size: 20px; font-weight: 600; line-height: 1.4; color: #111;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.mainc-card .txt {margin-top: 10px; font-size: 15px; line-height: 1.55; color: #666;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
/* 기간 — 예약기간/투숙기간 두 줄 유지. 라벨은 회색 박스 없이 글자만(폭 고정이라 값의 시작선이 맞는다) */
.mainc-card .meta {margin-top: 20px; display: flex; flex-direction: column; gap: 4px;
	font-size: 14px; line-height: 1.5; color: #666; font-variant-numeric: tabular-nums;}
.mainc-card .meta .row {display: flex; gap: 10px;}
.mainc-card .meta .lb {flex: 0 0 auto; width: 4.6em; color: #999;}
/* 가격은 기간 아래 우측. margin-top:auto 라 내용이 적은 카드에서도 바닥에 붙어 줄이 맞는다 */
.mainc-card .foot {margin-top: auto; padding-top: 12px; display: flex; align-items: baseline;
	justify-content: flex-end;}
.mainc-card .price {font-size: 13px; color: #999; letter-spacing: .02em;}
.mainc-card .price strong {font-size: 20px; font-weight: 600; color: #111; margin-right: 3px;}

@media screen and (max-width: 768px) {
	/* 활자가 작아진 만큼 줄었지만, 최대 내용(제목 2줄 + 설명 2줄 + 기간 2줄 + 가격) 기준으로 잡는다 */
	.mainc-card {--mainc-body-h: 268px;}
	.mainc-card h3 {font-size: 18px;}
	.mainc-card .txt {font-size: 14px;}
}
.mainc-nodata {text-align: center; padding: 60px 0; color: #9aa0a6;}
.mainc-nodata p {font-size: var(--rn-fs-body); margin-top: 14px;}

/* ----- 메인 팝업 (리뉴얼) — board/popup.js -----
   [구조]  .pop-rn-set.is-slide | .is-single   (좌상단 고정 · 클릭 통과)
             └ .pop-rn-list (가로 배치)
                 └ .pop-rn  … 이미지 영역(.pop-rn-img) + 버튼(.pop-rn-foot)
                                [슬라이드형] 화살표(.pop-rn-arw)·인디케이터(.pop-rn-dots)는 사진 위에 겹친다

   ★ 두 표시 방식은 '창이 몇 개냐'가 다르다 — 섞이지 않게 .pop-rn-set 에 모드 클래스를 달고
     레이아웃 규칙은 그 클래스 밑에서만 쓴다. (popup.js 가 호텔 설정 POPUP_TYPE 으로 붙인다)
       .is-slide  … 창 1개. 여러 이미지를 그 안에서 넘긴다. 폭 고정(--pop-w).
       .is-single … 창 N개. 겹치지 않게 가로로 나란히 놓고, 화면 폭에 안 들어가는 건 감춘다.

   ★ 비차단(non-blocking) 팝업이다 — 딤도 스크롤 잠금도 없다. 팝업이 떠 있어도 뒤 페이지를
     그대로 보고 누를 수 있어야 한다. 그래서 감싼 .pop-rn-set 은 클릭을 통과시키고
     (pointer-events:none) 팝업 자신만 클릭을 받는다.
   ★ 이미지 영역은 비율을 고정하지 않는다 — 등록 이미지 원본 비율 그대로 담는다.
     고정 비율(레터박스)로 두면 세로로 긴 안내문이 과하게 줄어 글을 읽을 수 없다.
     대신 폭 최대 500px · 팝업 전체 높이 최대 --pop-max-h 로 묶고, 넘치면 이미지 영역만 세로 스크롤한다.
     원본이 최대 폭보다 작으면 확대하지 않는다(작은 배너가 뭉개지지 않게).
   ★ 관리자 권장 이미지 규격: 폭 500px (세로 길이 제한 없음)
   🎨 위치·폭·최대 높이는 토큰(--pop-top / --pop-left / --pop-w / --pop-max-h)만 고치면 된다.
      --pop-top 은 '헤더 높이 + 20px' 이라 헤더 높이가 바뀌면 이 값만 맞추면 된다. */
.pop-rn-set {--pop-w: 500px; --pop-min-w: 240px; --pop-top: 130px; --pop-left: 40px; --pop-gap: 20px;
	--pop-max-h: calc(100vh - 160px); --pop-chrome-h: 48px;   /* 사진 밖 영역 = 하단 버튼 48 (인디케이터는 사진 위에 겹쳐 자리를 쓰지 않는다) */
	position: fixed; top: var(--pop-top); left: var(--pop-left); z-index: 10000;
	max-width: calc(100% - var(--pop-left) * 2);
	pointer-events: none;}   /* 뒤 페이지의 스크롤·클릭(GNB 포함)을 막지 않는다 */
/* 슬라이드형은 창이 하나뿐이라 폭을 고정한다(슬릭이 슬라이드 폭을 계산하려면 먼저 정해져 있어야 한다).
   단독형은 창 개수만큼 가로로 늘어나므로 내용에 맡긴다(위 max-width 가 상한). */
.pop-rn-set.is-slide {width: var(--pop-w);}
.pop-rn-set.is-single {width: auto;}
/* 가로 배치 — 창끼리 --pop-gap 만큼 떼어 둔다. 높이가 달라도 위쪽 선은 맞춘다 */
.pop-rn-list {display: flex; align-items: flex-start; gap: var(--pop-gap);}

/* 한 장 — 라운드/그림자 없음(사이트 전체가 각진 톤).
   등장 애니메이션은 'backwards' 로만 건다 — 기본 상태를 opacity:0 으로 두면 어떤 이유로든
   애니메이션이 돌지 않는 환경에서 팝업이 영영 안 보인다(보수적으로 간다). */
/* 폭은 이미지에 맞춘다(max-content) — 버튼 영역도 같은 폭이 되어 삐져나오지 않는다.
   세로 flex 로 두는 이유: 높이가 최대치를 넘을 때 이미지 영역만 줄여 스크롤시키고
   하단 버튼은 항상 화면에 남기기 위해서다. */
.pop-rn {pointer-events: auto;
	display: flex; flex-direction: column;
	width: max-content; min-width: var(--pop-min-w); max-width: 100%; max-height: var(--pop-max-h);
	background: #fff; border-radius: 0; box-shadow: none;
	animation: popRnIn .35s cubic-bezier(.22, 1, .36, 1) backwards;}
/* 슬라이드형은 창 폭을 컨테이너에 맞춘다 — 장마다 폭이 다르면 넘길 때 창이 좌우로 흔들린다
   (높이는 장마다 달라도 된다) */
.pop-rn-slide {width: 100%;}
/* 단독형 — 창마다 폭 상한(--pop-w)을 직접 건다. 컨테이너(.pop-rn-set)가 창 개수만큼
   늘어나는 구조라 상한을 창에 걸지 않으면 원본이 큰 이미지가 그대로 500px 을 넘어 버린다.
   좁은 화면에서는 컨테이너 폭(100%)이 더 작으므로 둘 중 작은 값을 쓴다.
   ★ 자리가 모자라면 먼저 '같이 조금씩 줄여서' 전부 보여준다(flex-shrink: 1).
     한 장이라도 조용히 사라지는 것보다 조금 작게라도 다 보이는 편이 낫다.
     최소 폭(--pop-min-w)까지 줄여도 안 들어갈 때만 뒤에서부터 감춘다(아래 [hidden]) —
     어느 것을 감출지는 popup.js 가 실제 위치를 재서 정한다(관리자 우선순위가 앞선 것이 남는다).
   ★ 늘리지는 않는다(flex-grow: 0) — 원본보다 키우면 작은 배너가 뭉개진다. */
.pop-rn-set.is-single .pop-rn {flex: 0 1 auto; max-width: min(var(--pop-w), 100%);}
/* .pop-rn 이 display:flex 라 hidden 속성만으로는 안 감춰진다 — 명시적으로 끈다 */
.pop-rn[hidden] {display: none;}
/* 여러 창이 동시에 뜨면 아주 살짝 차례로 등장시킨다 — 한꺼번에 튀어나오는 것보다 눈이 편하다 */
.pop-rn:nth-child(2) {animation-delay: .07s;}
.pop-rn:nth-child(3) {animation-delay: .14s;}
@keyframes popRnIn {from {opacity: 0; transform: translateY(-10px);} to {opacity: 1; transform: none;}}

/* 이미지 영역 — 비율 고정 없음. 길면 이 영역만 스크롤한다(min-height:0 이라야 flex 안에서 줄어든다) */
/* 폭 상한을 이미지 영역에 건다. 창의 기준 폭은 '안에 든 이미지의 원본 폭'인데, 여기서 먼저
   500px 로 잘라 두지 않으면 단독형에서 자리를 나눠 쓸 때 원본이 큰 이미지(4096px 등)일수록
   더 많이 줄어들어 창 크기가 제각각이 된다(측정값 500/383/397/500 → 상한 적용 후 445 균일).
   상한일 뿐이라 원본이 작은 배너는 그대로 자기 크기를 지킨다. */
.pop-rn-img {position: relative; flex: 0 1 auto; min-height: 0; max-width: var(--pop-w);
	overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: #fff;}
/* 슬라이드형은 이미지 영역이 flex 자식이 아니라 슬릭 트랙 안에 있어 위 flex 축소가 걸리지 않는다 —
   최대 높이를 직접 물려야 긴 이미지에서도 인디케이터·버튼이 팝업 안에 남는다 */
.pop-rn-slide .pop-rn-img {max-height: calc(var(--pop-max-h) - var(--pop-chrome-h));}
/* 원본 비율 그대로. width:auto + max-width:100% 라 큰 이미지만 줄어들고 작은 이미지는 확대되지 않는다 */
.pop-rn-img img {display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto;}
/* 링크가 걸린 이미지만 손가락 커서 — 링크 없는 팝업까지 눌러도 되는 것처럼 보이지 않게 */
.pop-rn-img img.btnImgLink {cursor: pointer;}

/* 하단 버튼 — 이미지 바로 아래. 폭은 팝업(=이미지)과 정확히 같다.
   두 버튼은 flex:1 로 폭이 같고(5:5) 높이도 영역 높이를 그대로 채운다.
   활자도 두 버튼이 같은 값(14px/400) — 한쪽만 굵으면 무게가 기울어 보인다.
   ★ 위쪽 구분선(border-top)은 두지 않는다 — 사진과 버튼 사이에 밝은 1px 줄이 그어져
     사진이 잘린 것처럼 보인다. 경계는 사진과 버튼면(흰색/먹색)의 대비가 이미 충분히 만든다. */
.pop-rn-foot {flex: 0 0 auto; display: flex; height: 48px;}
.pop-rn-foot button {flex: 1 1 0; height: 100%; border: 0; border-radius: 0; padding: 0;
	font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1; text-align: center;
	cursor: pointer; transition: background .2s;}
.pop-rn-foot .iChk {background: #fff; color: #666;}
.pop-rn-foot .iChk:hover {background: #f5f5f5;}
/* 두 버튼 사이 1px 구분선은 오른쪽 버튼의 왼 테두리가 맡는다 (box-sizing:border-box 라 폭은 그대로) */
.pop-rn-foot .btnPopClose {background: var(--rn-ink-strong); color: #fff;
	border-left: 1px solid var(--rn-pop-line);}
.pop-rn-foot .btnPopClose:hover {background: var(--rn-ink-doc);}

/* ----- 슬라이드형 -----
   화살표는 이미지 '바깥' 좌우, 인디케이터는 이미지 '아래' 흰 영역에 둔다.
   둘 다 이미지 위에 얹으면 밝은 이미지에서 안 보이고 내용도 가린다.
   1건이면 화살표·인디케이터 모두 그리지 않는다(popup.js 가 slick 옵션으로 끈다). */
/* 화살표·인디케이터는 사진 '안'에 겹쳐 놓는다 — 팝업 폭이 좁아(500px) 바깥에 두면
   화면 왼쪽으로 삐져나가고, 흰 띠를 따로 두면 사진보다 컨트롤이 커 보인다.
   ★ 사진 위에 얹는 것은 '어떤 사진에서도 보이는가'가 관건이다. 사진은 밝을 수도 어두울 수도
     있으므로 두 겹으로 보장한다 (테두리는 두지 않는다 — 사각 판에 선까지 두르면 사진 위에서
     UI 가 과하게 튄다):
       ① 아래쪽 어둠막(.pop-rn-stage::after) — 인디케이터가 앉는 자리를 항상 어둡게 깐다
       ② 반투명 검은 판 + 흰 화살표 — 밝은 사진은 판이, 어두운 사진은 흰 화살표가 분리를 맡는다 */
.pop-rn-stage {position: relative; overflow: hidden;}
/* ① 아래쪽 어둠막 — 인디케이터 뒤에만 옅게. 클릭은 통과시킨다 */
.pop-rn-stage::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); pointer-events: none;}

.pop-rn-slide .pop-rn-arw {position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 36px; height: 36px; border: 0; border-radius: 0; padding: 0; cursor: pointer;
	background: rgba(0, 0, 0, .42);                       /* ② */
	transition: background .2s;
	display: flex; align-items: center; justify-content: center;}
.pop-rn-slide .pop-rn-arw:hover {background: rgba(0, 0, 0, .68);}
.pop-rn-slide .pop-rn-arw::before {content: ''; width: 8px; height: 8px;
	border-right: 2px solid #fff; border-top: 2px solid #fff;}
/* 사진 안쪽 가장자리에서 12px 띄운다 — 0 으로 붙이면 사진 모서리와 붙어 잘린 것처럼 보인다 */
.pop-rn-slide .pop-rn-arw.prev {left: 12px;}
.pop-rn-slide .pop-rn-arw.prev::before {transform: rotate(-135deg); margin-left: 3px;}
.pop-rn-slide .pop-rn-arw.next {right: 12px;}
.pop-rn-slide .pop-rn-arw.next::before {transform: rotate(45deg); margin-right: 3px;}

/* 인디케이터 — 사진 하단에 겹친다. 흰 띠(높이 34px)를 없앴으므로 레이아웃 자리를 쓰지 않는다.
   컨테이너는 클릭을 통과시키고(사진 클릭=링크 열기 유지) 점만 눌리게 한다 */
.pop-rn-dots {position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
	display: flex; align-items: center; justify-content: center; pointer-events: none;}
.pop-rn-dots:empty {display: none;}
.pop-rn-dots .slick-dots {display: flex !important; align-items: center; gap: 7px;
	list-style: none; margin: 0; padding: 0; pointer-events: auto;}
.pop-rn-dots .slick-dots li {line-height: 0;}
/* 점 자체도 밝은 사진에 대비해 옅은 그림자를 두른다 — 어둠막(①)과 이중 보장 */
.pop-rn-dots .slick-dots li button {width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
	font-size: 0; cursor: pointer; background: rgba(255, 255, 255, .5);
	box-shadow: 0 0 2px rgba(0, 0, 0, .55); transition: background .2s;}
.pop-rn-dots .slick-dots li.slick-active button {background: #fff;}

/* 헤더가 60px 로 줄어드는 구간 — 팝업 시작 위치도 '헤더 + 20px' 규칙을 그대로 따른다 */
@media screen and (max-width: 1024px) {
	.pop-rn-set {--pop-top: 80px;}
}
@media screen and (max-width: 768px) {
	/* 좌우 여백 20px — 폭은 --pop-w 를 넘지 않는다. 좁은 화면에서는 단독형도 한 창만 들어가므로
	   두 모드 모두 화면 폭에 맞춘다(들어가지 않는 창은 popup.js 가 감춘다) */
	.pop-rn-set {--pop-left: 20px; --pop-max-h: calc(100vh - 120px);}
	.pop-rn-set.is-slide, .pop-rn-set.is-single {width: calc(100% - 40px); max-width: var(--pop-w);}
	/* 화살표는 데스크톱과 같이 사진 안 좌우 가운데 — 손가락 닿는 크기(40px)만 키우고
	   가장자리 여백은 줄인다. (예전엔 사진 바깥에 있어 좁은 화면에서 아래 모서리로 옮겼었다) */
	.pop-rn-slide .pop-rn-arw {width: 40px; height: 40px;}
	.pop-rn-slide .pop-rn-arw.prev {left: 8px;}
	.pop-rn-slide .pop-rn-arw.next {right: 8px;}
}
@media screen and (max-width: 480px) {
	.pop-rn-set {--pop-left: 16px;}
	.pop-rn-set.is-slide, .pop-rn-set.is-single {width: calc(100% - 32px);}
}