@charset "utf-8";
/* ==========================================================================
   rb.BoardFactory — 서브페이지 공통

   목업 mockup/css/sub.css 를 그대로 옮긴 것이다.
   처음에는 이식 스크립트(port_sub_css.py)로 만들었지만 그 스크립트는 남아
   있지 않다. 지금은 스킨별로 떼어 내는 중이라 이 파일을 직접 고친다
   (tools/bf_css_split.py). 떼어 낸 구역은 머리글에 새 위치를 적어 두었다.

   담고 있는 것
     1 서브 헤더 · 브레드크럼      12 보드DB 목록
     2 서브 탭                     13 보드 상세
     3 리스트 도구                 14 자료실 · 샵 목록
     4 게시판 목록                 15 FAQ
     5 페이지네이션 · 버튼 · 검색  16 공용 폼 (문의 · 가입 · 주문)
     6 게시글 상세                 17 로그인 · 회원가입 → 회원 스킨
     7 이전 · 다음 글              18 이벤트 · 캘린더
     8 댓글                        19 1:1 문의 내역
     9 글쓰기 폼                   20 마이페이지
    10 사이드바 없는 본문          21 상품 옵션 · 장바구니 · 주문
    11 검색 필터

   바뀐 것은 이름뿐이다.
     .inner   -> .bf-inner        테마 공용 컨테이너
     .btn     -> .bf-btn          그누보드 .btn 과 충돌
     #footer  -> #bf_footer       테마 마크업의 id (header · gnb · btnTop 도)
     Montserrat -> var(--font-en) 토큰 경유 (지금 값은 Pretendard)

   ※ rb/rb.search/style.css 에도 페이지네이션 · 검색 필터가 있다. 검색은
     테마와 따로 배포하는 컴포넌트라(PACKAGE.md) 혼자서도 서야 해서 일부러
     겹쳐 둔 것이다. 값이 같으므로 어느 쪽이 이겨도 결과는 같다.
   ========================================================================== */

/* ==========================================================================
   1. 서브 헤더
   ========================================================================== */
.sub-head {
  position: relative;
  padding: 34px 0 30px;
  background: linear-gradient(135deg, var(--sky-50) 0%, var(--sky-100) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.sub-head::after {
  content: ''; position: absolute; right: -60px; top: -90px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,.6);
}
/* 밝은 바닥 위에 얹던 흰 원이라 다크에서는 거의 비친다(목업 theme.css 3절) */
:root[data-theme="dark"] .sub-head::after { background: rgba(255,255,255,.035); }
.sub-head .bf-inner { position: relative; z-index: 2; }

.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 13px; color: var(--ink-500);
}
.breadcrumb .bc-home {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); color: var(--sky-t2);
  border: 1px solid var(--sky-b1);
}
.breadcrumb .bc-home .ico { width: 13px; height: 13px; }
.breadcrumb a:not(.bc-home):hover { color: var(--sky-t2); text-decoration: underline; }
.breadcrumb > *:not(.bc-home)::before {
  content: '';
  display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; margin: -2px 9px 0 3px;
  border-top: 1.5px solid var(--ink-300);
  border-right: 1.5px solid var(--ink-300);
  transform: rotate(45deg);
}
.breadcrumb strong { font-weight: 600; color: var(--ink-800); }

.sub-tit {
  margin-top: 12px;
  font-size: 30px; font-weight: 800; letter-spacing: -1px;
  color: var(--ink-900);
}
.sub-desc { margin-top: 7px; font-size: 15px; color: var(--ink-500); }

/* ==========================================================================
   2. 서브 탭
   ========================================================================== */
.sub-tab {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-xs);
}
.sub-tab ul { display: flex; flex-wrap: wrap; }
.sub-tab li { position: relative; }
.sub-tab a {
  position: relative;
  display: flex; align-items: center;
  height: 54px; padding: 0 22px;
  font-size: 15.5px; font-weight: 500; color: var(--ink-500);
  transition: color .2s;
}
.sub-tab a::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--sky-500);
  transform: scaleX(0); transition: transform .25s;
}
.sub-tab a:hover { color: var(--sky-t2); }
.sub-tab li.on a { color: var(--sky-t3); font-weight: 700; }
.sub-tab li.on a::after { transform: scaleX(1); }

/* 서브 본문 영역 */
.sub .content-wrap { padding-top: 30px; }
.content-wrap-wide { grid-template-columns: minmax(0, 1fr) !important; }

/* ==========================================================================
   3. 리스트 도구
   ========================================================================== */
.list-tools {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
}
.list-total { font-size: 14.5px; color: var(--ink-500); }
.list-total b { font-weight: 700; color: var(--sky-t2); }
.sort-btns { display: flex; flex-wrap: wrap; gap: 5px; }
/* 링크(<a>)로도 쓴다 — 게시판 · FAQ · 1:1문의 · 쇼핑몰 정렬 · 새글. 목업은 <button> 이라 글자가 저절로
   가운데 왔지만 <a> 는 위에 붙으므로 flex 로 세운다 */
.sort-btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; white-space: nowrap;
  height: 32px; padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 500; color: var(--ink-500);
  transition: all .18s;
}
.sort-btn:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
.sort-btn.on {
  background: var(--sky-500); border-color: var(--sky-500);
  color: #fff; font-weight: 600;
}

/* ==========================================================================
   4. 게시판 목록
   ========================================================================== */
.board-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.bl-head {
  display: flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 20px;
  background: var(--sky-50);
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-500);
}
.bl-row {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 10px 20px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .18s;
}
.bl-row:last-child { border-bottom: 0; }
.bl-row:hover { background: var(--sky-50); }
.bl-row.bl-notice { background: #FBFDFF; }
.bl-row.bl-notice:hover { background: var(--sky-50); }

.bl-no {
  flex: none; width: 62px; text-align: center;
  font-family: var(--font-en);
  font-size: 13px; color: var(--ink-300);
}
.tag-notice {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-xs);
  background: var(--sky-600); color: #fff;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
}
.bl-subject {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 7px;
}
.bl-subject > a {
  min-width: 0;
  font-size: 15px; color: var(--ink-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bl-row:hover .bl-subject > a { color: var(--sky-t3); text-decoration: underline; }
.bl-notice .bl-subject > a { font-weight: 600; }
.p-hot {
  flex: none;
  display: inline-flex; align-items: center;
  height: 17px; padding: 0 6px;
  border-radius: 4px;
  background: #FFF0EE; color: var(--point);
  font-family: var(--font-en);
  font-size: 9.5px; font-weight: 700;
}
:root[data-theme="dark"] .p-hot { background: #3B221F; }
.p-img { flex: none; color: var(--ink-300); display: inline-flex; }
.p-img .ico { width: 13px; height: 13px; }
.bl-writer {
  flex: none; width: 104px;
  font-size: 13.5px; color: var(--ink-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bl-date {
  flex: none; width: 66px; text-align: center;
  font-size: 12.5px; color: var(--ink-400);
}
.bl-view {
  flex: none; width: 84px;
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
  font-size: 12.5px; color: var(--ink-400);
}
.bl-view .ico { width: 13px; height: 13px; }
.bl-head .bl-view { justify-content: flex-end; }

/* ==========================================================================
   5. 페이지네이션 · 버튼 · 검색
   ========================================================================== */
.paging {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 26px;
}
.paging a {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 6px;
  border-radius: var(--r-sm);
  font-family: var(--font-en);
  font-size: 14px; font-weight: 600; color: var(--ink-500);
  transition: all .18s;
}
.paging a:hover { background: var(--sky-50); color: var(--sky-t2); }
.pg-num { display: flex; gap: 2px; margin: 0 6px; }
.pg-num a.on {
  background: var(--sky-500); color: #fff;
  box-shadow: 0 3px 10px rgba(62,159,222,.3);
}
.pg-arw, .pg-edge {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-400);
}
.pg-edge { gap: 0; }
.pg-edge .ico:last-child { margin-left: -9px; }
.paging .ico { width: 15px; height: 15px; stroke-width: 2.2; }

.board-btns {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 20px;
}
.board-btns .bf-btn { height: 44px; padding: 0 22px; }
.board-btns .ico { width: 15px; height: 15px; }

.board-search {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 30px; padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.board-search select,
.board-search input {
  height: 44px; padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sky-50);
  font-size: 14px; color: var(--ink-800);
  transition: all .2s;
}
/* 다크 — 입력창은 바닥보다 한 단계 들어가 보이게(목업 theme.css 4절) */
:root[data-theme="dark"] .board-search select,
:root[data-theme="dark"] .board-search input { background: #101922; }
.board-search select { width: 130px; cursor: pointer; }
.board-search input { width: 300px; max-width: 100%; }
.board-search input:focus,
.board-search select:focus {
  background: var(--surface); border-color: var(--sky-b3);
  box-shadow: 0 0 0 3px rgba(62,159,222,.13);
}
.board-search button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 20px;
  border-radius: var(--r-sm);
  background: var(--sky-500); color: #fff;
  font-size: 14.5px; font-weight: 600;
  transition: background .2s;
}
.board-search button:hover { background: var(--sky-600); }
.board-search .ico { width: 16px; height: 16px; stroke-width: 2.2; }

/* ==========================================================================
   6. 게시글 상세
   ========================================================================== */
.view-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.view-head {
  padding: 26px 30px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--sky-50), var(--surface));
}
.view-cate { display: flex; align-items: center; gap: 6px; }
.view-tit {
  margin-top: 11px;
  font-size: 24px; font-weight: 700; line-height: 1.4;
  letter-spacing: -.7px; color: var(--ink-900);
}
.view-meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-top: 16px;
}
.vm-writer { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.vm-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(140deg, var(--sky-300), var(--sky-500));
  color: #fff;
}
.vm-thumb .ico { width: 19px; height: 19px; }
.vm-writer b { font-weight: 700; color: var(--ink-900); }
.vm-writer em { font-size: 12px; color: var(--sky-t2); font-weight: 600; }
.vm-info { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--ink-400); }
.vm-info i { display: inline-flex; align-items: center; gap: 4px; }
.vm-info .ico { width: 13px; height: 13px; }

.view-body {
  padding: 30px;
  font-size: 15.5px; line-height: 1.85; color: var(--ink-700);
}
.view-body > * + * { margin-top: 16px; }
.view-body h4 {
  margin-top: 30px;
  padding-left: 12px;
  border-left: 3px solid var(--sky-500);
  font-size: 18px; font-weight: 700; color: var(--ink-900);
}
.view-body ul { padding-left: 4px; }
.view-body li { position: relative; padding-left: 14px; }
.view-body li + li { margin-top: 5px; }
.view-body li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--sky-400);
}
.view-body strong { font-weight: 700; color: var(--ink-900); }
.view-body blockquote {
  padding: 16px 20px;
  background: var(--sky-50);
  border-left: 3px solid var(--sky-b2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14.5px; color: var(--ink-600);
}
.view-figure { margin: 22px 0; }
.view-figure img {
  width: 100%; max-width: 560px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.view-figure figcaption {
  margin-top: 9px;
  font-size: 12.5px; color: var(--ink-400);
}
.view-table {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: 14px;
}
.view-table th, .view-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.view-table thead th {
  background: var(--sky-50);
  font-weight: 700; color: var(--ink-700);
}
.view-table tbody th { background: #FBFDFF; font-weight: 600; color: var(--ink-800); }
.view-table tbody tr:last-child th,
.view-table tbody tr:last-child td { border-bottom: 0; }

.view-file {
  margin: 0 30px; padding: 16px 18px;
  background: var(--sky-50);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.vf-tit {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-700);
}
.vf-tit .ico { width: 15px; height: 15px; color: var(--sky-t1); }
.vf-tit b { color: var(--sky-t2); }
.view-file ul { margin-top: 9px; }
.view-file a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
  border-radius: var(--r-xs);
  font-size: 13.5px; color: var(--ink-600);
  transition: background .18s;
}
.view-file a:hover { background: var(--surface); color: var(--sky-t3); }
.view-file a span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-file a em, .view-file a i { flex: none; font-size: 12px; color: var(--ink-400); }

.view-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 20px 30px 0; }
.view-tags a {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--sky-50); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-600);
  transition: all .18s;
}
.view-tags a:hover { background: var(--sky-500); border-color: var(--sky-500); color: #fff; }

.view-act {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 24px; padding: 22px 30px 26px;
  border-top: 1px solid var(--line-soft);
}
.view-act button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 18px;
  border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; font-weight: 500; color: var(--ink-600);
  transition: all .2s;
}
.view-act button:hover { border-color: var(--sky-b2); color: var(--sky-t2); background: var(--sky-50); }
.view-act .ico { width: 16px; height: 16px; }
.view-act .va-like {
  border-color: var(--sky-b2); color: var(--sky-t3); background: var(--sky-50);
  font-weight: 600;
}
.view-act .va-like.on { background: var(--sky-500); border-color: var(--sky-500); color: #fff; }
.view-act .va-like.on .ico { fill: currentColor; }
.view-act .va-like b { font-family: var(--font-en); font-weight: 700; }
.view-act .va-report { margin-left: 6px; color: var(--ink-400); }

/* ==========================================================================
   7. 이전 · 다음 글
   ========================================================================== */
.view-nav {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.view-nav a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  transition: background .18s;
}
.view-nav a + a { border-top: 1px solid var(--line-soft); }
.view-nav a:hover { background: var(--sky-50); }
.view-nav em {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  width: 84px;
  font-size: 13px; font-weight: 600; color: var(--ink-400);
}
.view-nav .ico { width: 15px; height: 15px; }
.view-nav span {
  flex: 1 1 auto; min-width: 0;
  font-size: 14.5px; color: var(--ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-nav a:hover span { color: var(--sky-t3); }

/* ==========================================================================
   8. 댓글
   ========================================================================== */
.comment {
  margin-top: 26px; padding: 24px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.cm-tit { font-size: 18px; font-weight: 700; color: var(--ink-900); }
.cm-tit b { color: var(--sky-t2); }

.cm-form { margin-top: 16px; }
.cm-form textarea {
  width: 100%; height: 104px; padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sky-50);
  font-size: 14.5px; line-height: 1.6;
  transition: all .2s;
}
.cm-form textarea::placeholder { color: var(--ink-400); }
.cm-form textarea:focus {
  background: var(--surface); border-color: var(--sky-b3);
  box-shadow: 0 0 0 3px rgba(62,159,222,.13);
}
.cm-form-bot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px;
}
.cm-count { font-size: 12.5px; color: var(--ink-400); }
.cm-count b { font-family: var(--font-en); color: var(--ink-600); }

.cm-list { margin-top: 20px; }
.cm-item {
  display: flex; gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
}
.cm-item.cm-reply {
  margin-left: 30px;
  padding-left: 16px;
  border-left: 2px solid var(--sky-100);
}
.cm-thumb {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sky-100); color: var(--sky-t1);
}
.cm-thumb .ico { width: 19px; height: 19px; }
.cm-body { flex: 1 1 auto; min-width: 0; }
.cm-meta { display: flex; align-items: center; gap: 8px; }
.cm-meta b { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.cm-meta i { font-size: 12px; color: var(--ink-400); }
.cm-text { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--ink-700); }
.cm-act { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.cm-act button {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--ink-400);
  transition: color .18s;
}
.cm-act button:hover { color: var(--sky-t2); }
.cm-act .ico { width: 13px; height: 13px; }
.cm-act .cm-like.on { color: var(--point); }
.cm-act .cm-like.on .ico { fill: currentColor; }

.cm-more {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; height: 44px; margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sky-50);
  font-size: 14px; font-weight: 600; color: var(--ink-600);
  transition: all .2s;
}
.cm-more:hover { background: var(--sky-100); color: var(--sky-t3); }
.cm-more .ico { width: 15px; height: 15px; }

/* ==========================================================================
   9. 글쓰기 폼
   ========================================================================== */
.write-form {
  padding: 26px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.wf-label {
  margin-bottom: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink-700);
}
.wf-row + .wf-row,
.wf-editor, .wf-file, .wf-opt { margin-top: 20px; }

.wf-row-top { display: flex; gap: 8px; }
.wf-cate { flex: none; width: 150px; }
.wf-subject { flex: 1 1 auto; min-width: 0; }
.write-form select,
.write-form input[type="text"] {
  width: 100%; height: 48px; padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sky-50);
  font-size: 15px; color: var(--ink-900);
  transition: all .2s;
}
.write-form select { cursor: pointer; }
.write-form input::placeholder { color: var(--ink-400); }
.write-form select:focus,
.write-form input[type="text"]:focus,
.write-form textarea:focus {
  background: var(--surface); border-color: var(--sky-b3);
  box-shadow: 0 0 0 3px rgba(62,159,222,.13);
}

.wf-editor {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.wf-editor:focus-within { border-color: var(--sky-b3); }
.ed-tool {
  display: flex; align-items: center; gap: 2px;
  padding: 8px 10px;
  background: var(--sky-50);
  border-bottom: 1px solid var(--line);
}
.ed-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  font-size: 14px; color: var(--ink-600);
  transition: all .16s;
}
.ed-btn:hover { background: var(--surface); color: var(--sky-t2); }
.ed-btn.on { background: var(--sky-500); color: #fff; }
.ed-btn .ico { width: 16px; height: 16px; }
.ed-b { font-weight: 800; }
.ed-i { font-style: italic; font-family: Georgia, serif; }
.ed-u { text-decoration: underline; }
.ed-s { text-decoration: line-through; }
.ed-sep { width: 1px; height: 18px; margin: 0 6px; background: var(--ink-200); }
.ed-note { margin-left: auto; font-size: 11.5px; color: var(--ink-300); }
.wf-editor textarea {
  width: 100%; height: 340px; padding: 18px;
  border: 0; background: var(--surface);
  font-size: 15px; line-height: 1.8; color: var(--ink-800);
}
.wf-editor textarea::placeholder { color: var(--ink-300); }

.file-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 30px 20px;
  border: 2px dashed var(--sky-b1);
  border-radius: var(--r-md);
  background: var(--sky-50);
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.file-drop:hover, .file-drop.is-over {
  border-color: var(--sky-b3); background: var(--sky-100);
}
.file-drop .ico { width: 26px; height: 26px; color: var(--sky-t1); }
.file-drop p { font-size: 14.5px; color: var(--ink-600); }
.file-drop p b { color: var(--sky-t2); font-weight: 700; }
.file-drop em { font-size: 12.5px; color: var(--ink-400); }

.file-added { margin-top: 10px; }
.file-added li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13.5px;
}
.file-added li + li { margin-top: 6px; }
.file-added span {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  color: var(--ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-added .ico { width: 15px; height: 15px; color: var(--sky-t1); }
.file-added em { flex: none; font-size: 12px; color: var(--ink-400); }
.file-added button {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: var(--ink-400);
}
.file-added button:hover { background: var(--sky-50); color: var(--point); }
.file-added button .ico { width: 13px; height: 13px; color: currentColor; }

.wf-tag input { margin-bottom: 8px; }
.tag-added { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-added a {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--sky-100); color: var(--sky-t3);
  font-size: 13px; font-weight: 500;
}
.tag-added .ico { width: 12px; height: 12px; stroke-width: 2.6; opacity: .6; }
.tag-added a:hover .ico { opacity: 1; }

.wf-opt {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding: 16px 18px;
  background: var(--sky-50);
  border-radius: var(--r-md);
}
.wf-opt .chk { font-size: 14px; color: var(--ink-600); }

.write-form .board-btns { justify-content: center; margin-top: 26px; }
.write-form .board-btns .bf-btn { min-width: 120px; }

/* ==========================================================================
   10. 사이드바 없는 본문 (보드DB · 샵 · FAQ)
   ========================================================================== */
.sub-body { padding-top: 30px; padding-bottom: 60px; }
.sub-body-narrow { max-width: 1000px; }

/* 안내 바 */
.notice-bar {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 18px; margin-bottom: 16px;
  background: var(--sky-50);
  border: 1px solid var(--sky-b1);
  border-radius: var(--r-md);
  font-size: 14px; line-height: 1.6; color: var(--ink-600);
}
.notice-bar .ico { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--sky-t1); }
.notice-bar b { font-weight: 700; color: var(--sky-t3); }

/* ==========================================================================
   11. 검색 필터
   ========================================================================== */
.filter-box {
  padding: 6px 24px 18px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.filter-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}
.filter-label {
  flex: none; width: 84px; padding-top: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink-700);
}
.filter-chips { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  height: 32px; padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--sky-50);
  border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-600);
  transition: all .18s;
}
.filter-chip:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
.filter-chip.on {
  background: var(--sky-500); border-color: var(--sky-500);
  color: #fff; font-weight: 600;
  box-shadow: 0 3px 10px rgba(62,159,222,.26);
}
.filter-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-top: 18px;
}
.filter-reset {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14.5px; font-weight: 500; color: var(--ink-500);
  transition: all .2s;
}
.filter-reset:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
.filter-reset .ico { width: 15px; height: 15px; }
.filter-foot .bf-btn { min-width: 190px; height: 44px; }
.filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.26);
  font-family: var(--font-en);
  font-size: 11px; font-weight: 700;
}

/* 보기 방식 전환 */
.view-mode { display: flex; gap: 4px; margin-left: 8px; }
.view-mode button {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-400);
  transition: all .18s;
}
.view-mode button:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
.view-mode button.on { background: var(--sky-500); border-color: var(--sky-500); color: #fff; }
.view-mode .ico { width: 16px; height: 16px; }

/* ==========================================================================
   12. 보드DB 목록 → rb.css/part/gallery.css
   ========================================================================== */

/* ==========================================================================
   13. 보드 상세
   ========================================================================== */

.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.qty button {
  width: 40px; height: 46px;
  font-size: 18px; color: var(--ink-500);
  transition: background .18s;
}
.qty button:hover { background: var(--sky-50); color: var(--sky-t2); }
.qty input {
  width: 52px; height: 46px;
  border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-en);
  font-size: 15px; font-weight: 600; color: var(--ink-900);
  background: var(--surface);
}

.spec-table { font-size: 14.5px; }
.spec-table th, .spec-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}
.spec-table .sp-group th {
  background: var(--sky-50);
  border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 700; color: var(--sky-t3);
}
.spec-table tbody th {
  width: 170px;
  color: var(--ink-500); font-weight: 500;
}
.spec-table tbody td { color: var(--ink-800); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

.qa-q, .qa-a { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.7; }
.qa-a { margin-top: 10px; }
.qa-q i, .qa-a i {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: 2px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 11px; font-weight: 700;
}
.qa-q i { background: var(--sky-100); color: var(--sky-t3); }
.qa-a i { background: var(--ink-200); color: var(--ink-600); }
.qa-q { font-weight: 600; color: var(--ink-900); }
.qa-a { color: var(--ink-600); }

/* ==========================================================================
   14. 자료실 · 샵 목록 → rb.css/part/shop.css
   ========================================================================== */

/* ==========================================================================
   15. FAQ
   ========================================================================== */
.faq-search {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 20px;
  margin-bottom: 22px;
  background: var(--surface);
  border: 2px solid var(--sky-b1);
  border-radius: var(--r-full);
  transition: border-color .2s, box-shadow .2s;
}
.faq-search:focus-within {
  border-color: var(--sky-b3);
  box-shadow: 0 6px 20px rgba(62,159,222,.14);
}
.faq-search > .ico { flex: none; width: 20px; height: 20px; color: var(--sky-t1); }
.faq-search input {
  flex: 1 1 auto; min-width: 0;
  height: 46px; border: 0; background: none;
  font-size: 15.5px; color: var(--ink-900);
}
:root[data-theme="dark"] .faq-search input { background: #101922; }
.faq-search input::placeholder { color: var(--ink-400); }
.faq-search .bf-btn { flex: none; height: 46px; padding: 0 26px; border-radius: var(--r-full); }

.faq-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.faq-item + .faq-item { border-top: 1px solid var(--line-soft); }
.faq-q {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 18px 22px;
  text-align: left;
  transition: background .18s;
}
.faq-q:hover { background: var(--sky-50); }
.faq-item.on .faq-q { background: var(--sky-50); }
.faq-mark {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sky-500); color: #fff;
  font-family: var(--font-en);
  font-size: 13px; font-weight: 700;
}
.faq-cate {
  flex: none;
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-xs);
  background: var(--sky-100); color: var(--sky-t3);
  font-size: 12px; font-weight: 600;
}
.faq-txt {
  flex: 1 1 auto; min-width: 0;
  font-size: 15.5px; font-weight: 500; color: var(--ink-800);
}
.faq-item.on .faq-txt { font-weight: 700; color: var(--sky-t3); }
.faq-arw {
  flex: none; width: 18px; height: 18px;
  color: var(--ink-300);
  transition: transform .25s, color .2s;
}
.faq-item.on .faq-arw { transform: rotate(180deg); color: var(--sky-t1); }

.faq-a {
  display: flex; gap: 12px;
  padding: 4px 22px 22px 22px;
}
.faq-mark-a { background: var(--ink-200); color: var(--ink-700); }
.faq-a p {
  flex: 1 1 auto; padding-top: 4px;
  font-size: 15px; line-height: 1.78; color: var(--ink-600);
}

.faq-cta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
  margin-top: 30px; padding: 28px 32px;
  border-radius: var(--r-lg);
  background: linear-gradient(115deg, var(--sky-700) 0%, var(--sky-500) 60%, #5FC0E8 100%);
  color: #fff;
  box-shadow: var(--sh-md);
}
.fc-txt strong { font-size: 21px; font-weight: 700; letter-spacing: -.6px; }
.fc-txt p { margin-top: 7px; font-size: 14.5px; color: rgba(255,255,255,.88); }
.fc-btns { display: flex; gap: 8px; }
.fc-btns .bf-btn { height: 48px; padding: 0 24px; }
.fc-btns .bf-btn-solid { background: #fff; color: var(--sky-t3); }
.fc-btns .bf-btn-solid:hover { background: var(--sky-50); }

/* ==========================================================================
   16. 공용 폼 (1:1 문의 · 회원가입 · 주문)
   ========================================================================== */
.form-box {
  padding: 26px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.form-box + .form-box { margin-top: 18px; }
.form-tit {
  padding-bottom: 16px; margin-bottom: 6px;
  border-bottom: 2px solid var(--ink-800);
  font-size: 19px; font-weight: 700; color: var(--ink-900);
}
.form-tit b { color: var(--sky-t2); }

.form-row {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.form-label {
  flex: none; width: 130px; padding-top: 13px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-700);
}
.req { margin-left: 3px; color: var(--point); font-weight: 700; }
.form-field { flex: 1 1 auto; min-width: 0; }
.form-field > * + * { margin-top: 8px; }
.form-field input[type="text"],
.form-field input[type="password"],
.form-field select,
.form-field textarea {
  width: 100%; padding: 0 15px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sky-50);
  font-size: 15px; color: var(--ink-900);
  transition: all .2s;
}
.form-field textarea { height: auto; padding: 14px 15px; line-height: 1.7; resize: vertical; }
.form-field select { cursor: pointer; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-400); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  background: var(--surface); border-color: var(--sky-b3);
  box-shadow: 0 0 0 3px rgba(62,159,222,.13);
}

.form-opt {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 18px; padding: 16px 18px;
  background: var(--sky-50);
  border-radius: var(--r-md);
}
.form-opt .chk { font-size: 14px; color: var(--ink-600); }

/* 단계 표시 */
.step-nav {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 24px;
}
.step {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-400);
}
.step i {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink-200); color: #fff;
  font-family: var(--font-en);
  font-size: 12px; font-weight: 700;
}
.step.on {
  background: var(--sky-500); border-color: var(--sky-500);
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 14px rgba(62,159,222,.3);
}
.step.on i { background: rgba(255,255,255,.3); }
.step.done { border-color: var(--sky-b1); color: var(--sky-t3); }
.step.done i { background: var(--sky-500); }

/* ==========================================================================
   17. 로그인 · 회원가입 → skin/member/bf.member/style.css
   ========================================================================== */

/* ==========================================================================
   18. 이벤트 목록 · 캘린더
   ========================================================================== */

/* 캘린더 */
.cv-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 16px;
}
.cv-move { display: flex; align-items: center; gap: 12px; }
.cv-move button {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-500);
  transition: all .2s;
}
.cv-move button:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
.cv-move .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.cv-move strong {
  font-family: var(--font-en);
  font-size: 24px; font-weight: 700; color: var(--ink-900);
}
.cv-move em { color: var(--sky-t2); }
.cv-legend { display: flex; gap: 14px; }
.cv-legend li {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-500);
}
.cv-legend i { width: 10px; height: 10px; border-radius: 3px; }
.cv-legend .cv-ing { background: var(--mint); }
.cv-legend .cv-ready { background: var(--sky-500); }
.cv-legend .cv-end { background: var(--ink-400); }

.cv-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.cv-table { table-layout: fixed; }
.cv-table th {
  padding: 13px 0;
  background: var(--sky-50);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; color: var(--ink-600);
  text-align: center;
}
.cv-table th.sun { color: #EF6A63; }
.cv-table th.sat { color: var(--sky-t1); }
.cv-table td {
  height: 104px; padding: 8px 8px 10px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.cv-table td:last-child { border-right: 0; }
.cv-table tr:last-child td { border-bottom: 0; }
.cv-table td.off { background: #FBFCFD; }
.cv-day {
  display: block;
  font-family: var(--font-en);
  font-size: 14px; font-weight: 600; color: var(--ink-600);
}
.cv-table td.sun .cv-day { color: #EF6A63; }
.cv-table td.sat .cv-day { color: var(--sky-t1); }
.cv-table td.today { background: var(--sky-50); }
.cv-table td.today .cv-day {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: -3px 0 0 -4px;
  border-radius: 50%;
  background: var(--sky-500); color: #fff;
}
.cv-evs { display: block; margin-top: 6px; }
.cv-chip {
  display: block; margin-bottom: 3px;
  padding: 4px 7px;
  border-radius: var(--r-xs);
  font-size: 11.5px; line-height: 1.35; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity .18s;
}
.cv-chip:hover { opacity: .82; }
.cv-chip.cv-ing { background: var(--mint); }
.cv-chip.cv-ready { background: var(--sky-500); }
.cv-chip.cv-end { background: var(--ink-400); }

.cv-sum {
  margin-top: 22px; padding: 22px 26px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.cv-sum-tit { font-size: 17px; font-weight: 700; color: var(--ink-900); }
.cv-sum-tit b { color: var(--sky-t2); }
.cv-sum-list { margin-top: 12px; }
.cv-sum-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.cv-date {
  flex: none;
  font-family: var(--font-en);
  font-size: 13px; font-weight: 700; color: var(--sky-t2);
}
.cv-sum-list a {
  flex: 1 1 auto; min-width: 0;
  font-size: 14.5px; color: var(--ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-sum-list a:hover { color: var(--sky-t3); text-decoration: underline; }

/* ==========================================================================
   19. 1:1 문의 내역
   ========================================================================== */
.inq-state {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 62px; height: 24px; padding: 0 9px;
  border-radius: var(--r-xs);
  font-size: 12px; font-weight: 700;
}
.inq-done { background: var(--sky-100); color: var(--sky-t3); }
.inq-wait { background: #FFF2EF; color: var(--point); }
.inq-date {
  flex: none;
  font-family: var(--font-en);
  font-size: 12.5px; color: var(--ink-400);
}
.inq-list .faq-txt { font-weight: 500; }
p.inq-wait {
  display: block; background: none; color: var(--ink-400);
  min-width: 0; height: auto; padding: 4px 0 0;
}

.board-list-qna .bl-no { width: 72px; }

/* ==========================================================================
   20. 마이페이지 → rb.css/part/shop-page.css
   ========================================================================== */

/* ==========================================================================
   21. 상품 옵션 · 장바구니 · 주문
   ========================================================================== */
.pd-note { font-size: 12.5px; color: var(--ink-400); }

.og-thumb {
  flex: none; width: 60px; height: 60px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; background: var(--plate);
}
.og-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root[data-theme="dark"] .og-thumb { isolation: isolate; }
:root[data-theme="dark"] .og-thumb img { mix-blend-mode: var(--plate-blend); }
.og-body { flex: 1 1 auto; min-width: 0; }
.og-body strong {
  display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.og-body em { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-400); }

.pay-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.pay-item { cursor: pointer; }
.pay-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-item span {
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 14.5px; color: var(--ink-700);
  transition: all .2s;
}
.pay-item:hover span { border-color: var(--sky-b2); }
.pay-item input:checked + span {
  border-color: var(--sky-500);
  background: var(--sky-50);
  color: var(--sky-t3); font-weight: 600;
  box-shadow: 0 0 0 1px var(--sky-500) inset;
}
.pay-ico {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 26px; padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--ink-200); color: var(--ink-700);
  font-size: 11.5px; font-weight: 700;
}
.pay-kakao { background: #FEE500; color: #3C1E1E; }
.pay-naver { background: #03C75A; color: #fff; }

/* ==========================================================================
   22. 사이트 소개 · 이용 가이드
   ========================================================================== */
.ab-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 34px; align-items: center;
  padding: 34px 36px;
  background: linear-gradient(135deg, var(--surface), var(--sky-50));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.ab-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--sky-t1); }
.ab-hero-txt h3 {
  margin-top: 12px;
  font-size: 30px; font-weight: 800; line-height: 1.36; letter-spacing: -1px;
  color: var(--ink-900);
}
.ab-hero-txt p { margin-top: 16px; font-size: 15.5px; line-height: 1.8; color: var(--ink-600); }
.ab-hero-img {
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--sh-md);
}
.ab-hero-img img { width: 100%; display: block; }

.ab-stat {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-top: 18px;
}
.ab-stat li {
  padding: 22px 16px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.ab-stat b {
  display: block;
  font-family: var(--font-en);
  font-size: 30px; font-weight: 800; color: var(--sky-t2);
  letter-spacing: -1px;
}
.ab-stat em { display: block; margin-top: 5px; font-size: 13.5px; color: var(--ink-500); }

.ab-sec { margin-top: 44px; }
.ab-sec-tit {
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 22px; font-weight: 700; letter-spacing: -.7px; color: var(--ink-900);
}
.ab-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ab-cards li {
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .2s, box-shadow .2s;
}
.ab-cards li:hover { border-color: var(--sky-b2); box-shadow: var(--sh-sm); }
.ab-ico {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(140deg, var(--sky-400), var(--sky-600));
  color: #fff;
  box-shadow: 0 5px 14px rgba(62,159,222,.28);
}
.ab-ico .ico { width: 23px; height: 23px; }
.ab-cards strong {
  display: block; margin-top: 14px;
  font-size: 18px; font-weight: 700; color: var(--ink-900);
}
.ab-cards p { margin-top: 8px; font-size: 14.5px; line-height: 1.75; color: var(--ink-600); }

.ab-history { position: relative; padding-left: 16px; }
.ab-history::before {
  content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px;
  width: 2px; background: var(--sky-200);
}
.ab-history li {
  position: relative;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 11px 0;
}
.ab-history li::before {
  content: ''; position: absolute; left: -16px; top: 18px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--sky-b2);
}
.ab-history li.on::before { background: var(--sky-500); border-color: var(--sky-500); }
.ab-history i {
  flex: none; width: 74px;
  font-family: var(--font-en);
  font-size: 14px; font-weight: 700; color: var(--sky-t2);
}
.ab-history span { font-size: 15px; color: var(--ink-600); }
.ab-history li.on span { font-weight: 700; color: var(--ink-900); }

.gd-steps { display: grid; gap: 12px; }
.gd-steps li {
  position: relative;
  display: grid; grid-template-columns: 54px 56px minmax(0, 1fr);
  align-items: center; gap: 4px 18px;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.gd-no {
  grid-row: span 2;
  font-family: var(--font-en);
  font-size: 30px; font-weight: 800; color: var(--sky-200);
}
/* 흐릿한 '유령 숫자'인데 --sky-200 이 다크에서 선 색이 돼 아예 사라진다.
   같은 흐릿함이 나도록 한 단계 띄운다(목업 theme.css 4절) */
:root[data-theme="dark"] .gd-no { color: #3E6182; }
.gd-ico {
  grid-row: span 2;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--sky-50); color: var(--sky-t2);
  border: 1px solid var(--sky-b1);
}
.gd-ico .ico { width: 24px; height: 24px; }
.gd-steps strong { align-self: end; font-size: 17px; font-weight: 700; color: var(--ink-900); }
.gd-steps p { align-self: start; font-size: 14.5px; line-height: 1.7; color: var(--ink-600); }

.gd-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.gd-table { background: var(--surface); }
.gd-table thead th {
  background: var(--sky-50);
  border-bottom: 1px solid var(--line);
  font-weight: 700; color: var(--ink-700);
  white-space: nowrap;
}
.gd-table tbody th { width: auto; font-weight: 700; color: var(--sky-t3); white-space: nowrap; }

.gd-rules li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.gd-rules li:last-child { border-bottom: 0; }
.gd-ok, .gd-x {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 12px; font-weight: 700; color: #fff;
}
.gd-ok { background: var(--mint); }
.gd-x { background: var(--point); }
.gd-rules span { font-size: 15px; line-height: 1.7; color: var(--ink-600); }

/* ==========================================================================
   23. 후기 갤러리 → rb.css/part/review.css
   ========================================================================== */

/* ==========================================================================
   24. 반응형
   ========================================================================== */
@media (max-width: 1280px) {
  .ab-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 26px; padding: 28px; }
  .ab-hero-txt h3 { font-size: 26px; }
}

@media (max-width: 1080px) {
  .sub .content-side { margin-top: 4px; }
  .ab-hero { grid-template-columns: minmax(0, 1fr); }
  .ab-hero-img { order: -1; }
}

@media (max-width: 900px) {
  .sub-head { padding: 20px 0 22px; }
  .sub-head::after { display: none; }
  .sub-tit { margin-top: 9px; font-size: 23px; }
  .sub-desc { font-size: 13.5px; }
  .breadcrumb { font-size: 12px; }

  .sub-tab {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sub-tab::-webkit-scrollbar { display: none; }
  .sub-tab ul { flex-wrap: nowrap; }
  .sub-tab a { height: 46px; padding: 0 15px; font-size: 14.5px; white-space: nowrap; }
  .sub-tab a::after { left: 15px; right: 15px; }

  .sub .content-wrap { padding-top: 16px; }

  /* 게시판 목록 — 제목 한 줄, 메타 아래 줄 */
  .bl-head { display: none; }
  .bl-row {
    flex-wrap: wrap; gap: 6px 10px;
    padding: 13px 16px;
  }
  .bl-no { display: none; }
  .bl-notice .bl-no { display: block; width: auto; }
  .bl-subject { flex: 1 1 100%; }
  .bl-subject > a { white-space: normal; line-height: 1.45; }
  .bl-writer, .bl-date, .bl-view { width: auto; }
  .bl-writer { order: 1; }
  .bl-date { order: 2; }
  .bl-date::before,
  .bl-view::before {
    content: ''; display: inline-block;
    width: 1px; height: 10px; margin-right: 10px;
    background: var(--ink-200); vertical-align: middle;
  }
  .bl-view { order: 3; justify-content: flex-start; }

  .board-search { flex-wrap: wrap; padding: 14px; }
  .board-search select { width: 110px; }
  .board-search input { flex: 1 1 auto; width: auto; min-width: 0; }
  .board-btns .bf-btn { flex: 1 1 0; }

  .view-head { padding: 20px 18px 16px; }
  .view-tit { font-size: 19px; }
  .view-body { padding: 22px 18px; font-size: 15px; }
  .view-file { margin: 0 18px; }
  .view-tags { padding: 16px 18px 0; }
  .view-act { flex-wrap: wrap; padding: 18px; gap: 6px; }
  .view-act button { height: 38px; padding: 0 13px; font-size: 13px; }
  .view-act .va-report { margin-left: 0; }

  .view-nav a { padding: 12px 16px; gap: 10px; }
  .view-nav em { width: 70px; font-size: 12px; }
  .view-nav span { font-size: 13.5px; }

  .comment { padding: 20px 16px; }
  .cm-item.cm-reply { margin-left: 14px; padding-left: 12px; }

  .write-form { padding: 18px 16px 22px; }
  .wf-row-top { flex-wrap: wrap; }
  .wf-cate { width: 100%; }
  .ed-note { display: none; }
  .wf-editor textarea { height: 260px; padding: 14px; }
  .write-form .board-btns .bf-btn { min-width: 0; }

  /* 좁은 화면에서는 처음·끝 버튼을 숨기고 번호도 5개까지만 노출.
     .paging a (0,1,1) 보다 특이도가 높아야 display 가 먹는다. */
  .paging a { min-width: 32px; height: 32px; font-size: 13px; }
  .paging .pg-edge { display: none; }
  .paging .pg-num a:nth-child(n+6) { display: none; }
  .pg-num { margin: 0 4px; }

  /* 사이드바 없는 본문 */
  .sub-body { padding-top: 16px; padding-bottom: 30px; }

  /* 필터 — 라벨을 위로 */
  .filter-box { padding: 4px 16px 14px; }
  .filter-row { flex-direction: column; gap: 8px; padding: 12px 0; }
  .filter-label { width: auto; padding-top: 0; font-size: 13.5px; }
  .filter-chips {
    flex-wrap: nowrap; overflow-x: auto;
    /* flex 아이템 기본값 min-width:auto 를 풀어야 컨테이너 폭으로 줄어든다 */
    min-width: 0; max-width: 100%;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; height: 30px; padding: 0 12px; font-size: 13px; }
  .filter-foot { flex-wrap: wrap; padding-top: 14px; }
  .filter-foot .bf-btn, .filter-reset { flex: 1 1 0; min-width: 0; }

  .view-mode { display: none; }

  .spec-table { font-size: 13.5px; }
  .spec-table th, .spec-table td { padding: 11px 10px; }
  .spec-table tbody th { width: 96px; }

  /* FAQ */
  .faq-search { padding: 6px 6px 6px 16px; gap: 8px; }
  .faq-search input { height: 42px; font-size: 14.5px; }
  .faq-search .bf-btn { height: 42px; padding: 0 18px; font-size: 14px; }
  .faq-q { padding: 15px 16px; gap: 9px; flex-wrap: wrap; }
  .faq-cate { order: 1; }
  .faq-txt { order: 3; flex: 1 1 100%; font-size: 15px; }
  .faq-arw { order: 2; margin-left: auto; }
  .faq-a { padding: 0 16px 18px; }
  .faq-a p { font-size: 14.5px; }
  .faq-cta { padding: 22px 20px; gap: 14px; }
  .fc-txt strong { font-size: 18px; }
  .fc-btns { width: 100%; }
  .fc-btns .bf-btn { flex: 1 1 0; height: 44px; padding: 0; font-size: 14.5px; }

  /* ----- 폼 : 라벨을 위로 ----- */
  .form-box { padding: 18px 16px 22px; }
  .form-tit { font-size: 17px; padding-bottom: 13px; }
  .form-row { flex-direction: column; gap: 8px; padding: 14px 0; }
  .form-label { width: auto; padding-top: 0; font-size: 14px; }
  .form-opt { padding: 14px 15px; }

  .step-nav { gap: 5px; margin-bottom: 18px; }
  .step { flex: 1 1 0; justify-content: center; padding: 10px 6px; font-size: 12.5px; gap: 5px; }
  .step i { width: 20px; height: 20px; font-size: 11px; }
  .step span { white-space: nowrap; }

  .cv-move strong { font-size: 20px; }
  .cv-move button { width: 32px; height: 32px; }
  .cv-legend { font-size: 12px; gap: 10px; }
  .cv-wrap { overflow-x: auto; }
  .cv-table { min-width: 560px; }
  .cv-table td { height: 82px; padding: 6px 5px 8px; }
  .cv-chip { font-size: 10.5px; padding: 3px 5px; }
  .cv-sum { padding: 18px 16px; }

  /* ----- 문의 내역 ----- */
  .inq-date { order: 4; flex: 1 1 100%; }
  .inq-list .faq-txt { flex: 1 1 100%; }

  .pay-methods { grid-template-columns: minmax(0, 1fr); }

  /* ----- 소개 · 가이드 ----- */
  .ab-hero { padding: 18px 16px; gap: 18px; }
  .ab-hero-txt h3 { font-size: 21px; }
  .ab-hero-txt p { font-size: 14.5px; }
  .ab-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ab-stat li { padding: 16px 10px; }
  .ab-stat b { font-size: 23px; }
  .ab-sec { margin-top: 30px; }
  .ab-sec-tit { font-size: 19px; padding-bottom: 13px; margin-bottom: 16px; }
  .ab-cards { grid-template-columns: minmax(0, 1fr); }
  .ab-cards li { padding: 18px 16px; }
  .ab-history i { width: 58px; font-size: 13px; }
  .ab-history span { font-size: 14px; }

  .gd-steps li { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; gap: 4px 12px; }
  .gd-ico { display: none; }
  .gd-no { font-size: 24px; }
  .gd-steps strong { font-size: 15.5px; }
  .gd-steps p { font-size: 14px; }
  .gd-table { min-width: 520px; }
  .gd-rules span { font-size: 14px; }

}

@media (max-width: 600px) {
  .sort-btns {
    width: 100%; min-width: 0;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .sort-btns::-webkit-scrollbar { display: none; }
  .sort-btn { flex: none; }
  .view-figure img { max-width: 100%; }
  .step span { display: none; }
  .step { padding: 10px 4px; }
}