@charset "utf-8";
/* ==========================================================================
   rb.BoardFactory — 테마 마감

   마지막에 로드된다. 그누보드 기본 CSS(default.css)와 리빌더 공통 CSS 가
   남긴 값 중 우리 톤과 어긋나는 것을 여기서 덮는다.
   새 컴포넌트를 여기에 쌓지 말 것 — 그건 base.css / layout.css 로.
   ========================================================================== */

/* 링크 색에 관한 규칙은 여기 두지 않는다.
   base.css 의 `a { color: inherit }` 하나면 된다 — 그누보드 default.css 의
   `a { color:#000 }` 과 선택자가 같고 우리가 뒤에 오므로 그것으로 이긴다.
   목업 reset.css 도 딱 그 한 줄이고 호버 색은 컴포넌트마다 따로 준다.

   예전에 여기 `#bf_wrap a { color: inherit }` 와 `#bf_wrap a:hover` 를
   두었는데, id 선택자라 가중치가 (1,0,1) 이어서 클래스로 준 링크 색을 전부
   눌러 버렸다. 프로모 카드(.promo-1 { color:#fff })가 검게 나온 원인이다. */

/* 리빌더 모듈 공통 래퍼 */
.rb-module-wrap {
  background: var(--surface);
  border-radius: var(--r-lg);
}

/* 모듈 제목 줄 — 리빌더가 md_title_* 로 인라인 스타일을 넣으므로
   여기서는 여백과 정렬만 잡는다 */
.bbs_main_wrap_tit {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bbs_main_wrap_tit_l { margin: 0; padding: 0; list-style: none; }
.bbs_main_wrap_tit_l h2 { margin: 0; line-height: 1.3; }
.bbs_main_wrap_tit_r { margin: 0; padding: 0; list-style: none; }
.cb { clear: both; }

/* 회원 이름 — 코어 사이드뷰(get_sideview)가 이름을 <span class="sv_member"> 로
   감싸는데 default.css 가 #333 을 박아 둔다. 목업은 이름을 둘레 글자와 같은 색으로
   쓴다(메인 최신글 .p-info em = --ink-500). 박힌 #333 은 다크 모드에서 거의 안
   보였다. 목록 글쓴이 칸처럼 따로 색을 정한 곳(.td_name)은 그쪽이 이긴다. */
.sv_member { color: inherit; }

/* 빈 상태 */
.no_data {
  padding: 40px 16px;
  color: var(--ink-500);
  font-size: 14.5px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   맨몸 페이지(회원 화면) 보정.

   그누보드는 login · register · password_lost 를 팝업처럼 다루어 head.php 를
   건너뛴다. 테마 head.sub.php 가 그때만 껍데기를 둘러 주는데(그쪽 주석 참고),
   목업처럼 폭을 좁히는 .sub-body-narrow 까지는 붙이지 않는다. 화면마다
   컨테이너 클래스를 다르게 주려면 head.sub.php 가 어떤 화면인지 알아야 하고,
   그건 스킨이 정할 일이다. 그래서 '좁아야 하는 것' 쪽에 폭을 준다.
   -------------------------------------------------------------------------- */
.sub-body > .step-nav,
.sub-body > .form-box { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* 탈퇴 버튼 — 되돌릴 수 없는 동작이라 색으로도 구분한다 */
.bf-btn-danger { background: var(--point); color: #fff; }
.bf-btn-danger:hover { background: #E8503F; }

.form-note { margin-left: 6px; font-size: 12.5px; color: var(--ink-400); }

.board-btns-center { justify-content: center; }

/* ==========================================================================
   콘텐츠샵 (영카트) 마크업 보정

   상품 목록·상세는 코어 shop/*.php 가 바깥 껍데기를 찍는다. 그 구조는
   우리가 못 바꾸므로(스킨은 안쪽만 담당한다) 여기서 목업 골격에 맞춘다.
   ========================================================================== */

/* 목록 컨테이너 #sct 는 폭을 갖지 않는다 — 안에 든 분류 탭(.sub-tab)이
   화면 전체를 가로지르는 띠여야 하기 때문이다. 탭을 뺀 나머지 자식에게만
   본문 폭을 준다. */
#sct > *:not(.sub-tab) {
  max-width: var(--bf-inner);
  margin-left: auto; margin-right: auto;
  padding-left: var(--bf-gutter); padding-right: var(--bf-gutter);
}
#sct > .sub-tab + * { margin-top: 30px; }
#sct { padding-bottom: 60px; }

/* 코어가 정렬·보기전환을 한 줄로 묶는 껍데기. 목업 .list-tools 가 스스로
   가로 배치를 하므로 이 div 는 자리만 내준다. */
#sct_sortlst { display: block; }

/* 비어 있을 때 마진만 남는 자리 */
#sct_hhtml:empty, #sct_thtml:empty { display: none; }

/* --------------------------------------------------------------------------
   페이지 이동 — 그누보드 get_paging() 마크업을 목업 .paging 모양으로.

   목업은 .paging > .pg-num > a 구조인데, get_paging() 은
   <nav.pg_wrap><span.pg> 안에 화살표와 숫자를 한 줄로 늘어놓는다.
   그 함수는 lib/common.lib.php 에 있고 extend 보다 먼저 로드돼 갈아끼울 수
   없다. 그래서 마크업은 두고 보이는 모양만 맞춘다.

   게시판·FAQ·새글·검색·콘텐츠샵 문의/후기가 모두 같은 함수를 쓰므로 여기
   한 곳에서 맞춘다. 스킨에 따로 두지 않는다 — 두 곳이 어긋나 있었다.
   -------------------------------------------------------------------------- */
/* default.css 가 .pg_wrap 에 float:left 를 준다. 그대로 두면 폭이 내용만큼만
   잡혀(446px) 가운데 정렬이 왼쪽으로 붙는다. 띄움을 풀고 한 줄을 다 쓴다. */
.pg_wrap {
  display: flex; justify-content: center;
  float: none; width: 100%; margin-top: 40px;
}
.pg_wrap .pg { display: flex; align-items: center; gap: 2px; }

/* 숫자 — 목업 .paging a. default.css 가 깔아 둔 회색 바탕 · 테두리(#eee)를
   걷어 낸다. 목업의 숫자는 바탕이 없고 지금 페이지만 채운다. */
.pg_wrap .pg_page,
.pg_wrap .pg_current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 6px;
  background: transparent; border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font-en); font-size: 14px; font-weight: 600; line-height: 1;
  color: var(--ink-500);
  transition: all .18s;
}
.pg_wrap .pg_page:hover { background: var(--sky-50); color: var(--sky-t2); }
.pg_wrap .pg_current {
  background: var(--sky-500); color: #fff;
  box-shadow: 0 3px 10px rgba(62,159,222,.3);
}

/* 처음 · 이전 · 다음 · 맨끝 — 목업 .pg-edge · .pg-arw.
   default.css 는 글자를 밀어내고 GIF 화살표를 배경에 깐다. 그 배경을 덮어쓰면
   글자도 화살표도 없는 빈 상자가 된다(실제로 그랬다). 그래서 글자는 화면
   낭독기용으로 밀어 둔 채, 화살표를 ::before 에 마스크로 그린다. 선은 테마
   스프라이트 ico-left · ico-right 와 같고, 목업처럼 15px · 굵기 2.2 ·
   처음/맨끝은 두 개를 9px 겹친다. 코어 마크업이라 <svg> 를 넣을 수 없다. */
.pg_wrap .pg_start, .pg_wrap .pg_prev { margin-right: 6px; }
.pg_wrap .pg_next,  .pg_wrap .pg_end  { margin-left: 6px; }
.pg_wrap .pg_start, .pg_wrap .pg_prev,
.pg_wrap .pg_next,  .pg_wrap .pg_end {
  position: relative; padding: 0;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-400);
  text-indent: -9999px; overflow: hidden;
}
.pg_wrap .pg_start::before, .pg_wrap .pg_prev::before,
.pg_wrap .pg_next::before,  .pg_wrap .pg_end::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: var(--pg-ico) center / 100% 100% no-repeat;
          mask: var(--pg-ico) center / 100% 100% no-repeat;
}
.pg_wrap .pg_start::before, .pg_wrap .pg_end::before { width: 21px; }
.pg_wrap .pg_prev  { --pg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5'/%3E%3C/svg%3E"); }
.pg_wrap .pg_next  { --pg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E"); }
.pg_wrap .pg_start { --pg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.6 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5M24.1 5.5 17.6 12l6.5 6.5'/%3E%3C/svg%3E"); }
.pg_wrap .pg_end   { --pg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.6 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5m9.6-13 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E"); }

@media (max-width: 900px) {
  /* 목업 .paging 처럼 처음 · 맨끝을 접고 번호는 다섯 개까지.
     목업은 번호가 한 상자(.pg-num)에 들어 있어 nth-child 로 자르지만,
     get_paging() 은 화살표와 번호가 한 줄에 섞여 있어 순번으로 자르면
     '다음'까지 잘리고 지금 페이지가 빠진다. 지금 페이지 앞뒤 두 개씩 남긴다.
     (지금 페이지 <strong> 앞뒤에는 .sound_only 가 하나씩 붙어 있다) */
  .pg_wrap .pg_start, .pg_wrap .pg_end { display: none; }
  .pg_wrap .pg_current + .sound_only + .pg_page + .pg_page ~ .pg_page:not(.pg_next):not(.pg_end) { display: none; }
  .pg_wrap .pg_page:not(.pg_start):not(.pg_prev):has(~ .pg_page + .pg_page + .sound_only + .pg_current) { display: none; }
}

/* --------------------------------------------------------------------------
   상품 상세 #sit

   목록 #sct 과 같은 이유로 폭을 여기서 준다. 다만 상세는 분류 탭이 #sit
   바깥(코어 item.php 가 #sit 를 열기 전에 include)이라 예외를 둘 필요가 없다.
   -------------------------------------------------------------------------- */
#sit > * {
  max-width: var(--bf-inner);
  margin-left: auto; margin-right: auto;
  padding-left: var(--bf-gutter); padding-right: var(--bf-gutter);
}
#sit { padding-bottom: 60px; }
#sit > .detail-tab { margin-top: 56px; }
#sit > .rel-sec { margin-top: 56px; }

/* --------------------------------------------------------------------------
   고른 옵션 줄.

   js/shop.js 의 add_sel_option() 이 찍는 마크업을 목업 .opt-item 모양으로
   맞춘다. 그쪽 HTML 은 우리가 못 바꾸므로(바꾸려면 shop.js 를 테마로 복제해야
   하고, 그러면 영카트가 올라갈 때마다 따라가야 한다) 이름만 이어 준다.

     li.sit_opt_list   = .opt-item      옵션 한 줄
     .sit_opt_subj     = .opt-name      옵션 이름
     .sit_opt_prc      = (추가금)        이름 옆에 붙인다
     li > div          = .opt-ctl       수량 · 금액 · 삭제 줄
   -------------------------------------------------------------------------- */
#sit_sel_option ul { margin-top: 10px; display: grid; gap: 8px; }

#sit_sel_option li {
  padding: 14px 16px;
  background: var(--sky-50);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
#sit_sel_option .sit_opt_subj {
  display: inline; font-size: 14px; font-weight: 600; color: var(--ink-800);
}
#sit_sel_option .sit_opt_prc {
  margin-left: 6px; font-size: 13px; color: var(--ink-500);
}
#sit_sel_option li > div {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}

/* 수량 — 목업 .qty 와 같은 모양. 버튼 글자(−/+)는 스킨이 넣는다.
   shop.js 가 새로 찍는 줄에는 '증가/감소/삭제' 글자가 들어가므로
   폭을 고정해 세 개가 나란히 서게 둔다. */
#sit_sel_option .sit_qty_minus,
#sit_sel_option .sit_qty_plus,
#sit_sel_option .sit_opt_del {
  flex: 0 0 auto;
  min-width: 28px; height: 28px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  font-size: 13px; color: var(--ink-600);
}
#sit_sel_option .sit_qty_minus:hover,
#sit_sel_option .sit_qty_plus:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
#sit_sel_option .sit_opt_del { margin-left: auto; color: var(--ink-400); }
#sit_sel_option .sit_opt_del:hover { border-color: var(--point); color: var(--point); }

#sit_sel_option input[name^="ct_qty"] {
  width: 52px; height: 28px; padding: 0 6px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  font-family: var(--font-en); font-size: 14px; text-align: center;
  color: var(--ink-900);
}

/* 옵션 셀렉트 — get_item_options() 가 만든다 */
#sit .pd-option select,
#sit .pd-option .it_option {
  width: 100%; height: 46px; padding: 0 14px; margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--ink-800);
}

/* --------------------------------------------------------------------------
   합계 — shop.js 가 #sit_tot_price 안을
   <span>총 금액 :</span><strong>29,900</strong> 원 으로 채운다.
   목업 .pd-total 의 b 자리를 strong 이 대신한다.
   -------------------------------------------------------------------------- */
.pd-total strong {
  margin-left: 8px;
  font-family: var(--font-en);
  font-size: 26px; font-weight: 800; color: var(--point);
  letter-spacing: -.5px;
}
.pd-total:empty { display: none; }

/* 품절 안내 */
.pd-soldout {
  margin-top: 14px; padding: 12px 16px;
  background: var(--sky-50); border-radius: var(--r-sm);
  font-size: 14px; color: var(--point); text-align: center;
}

/* 상품 정보 고시 표 */
.pd-spec-wrap { overflow-x: auto; margin-top: 12px; }
.pd-spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-spec th, .pd-spec td {
  padding: 10px 14px; border: 1px solid var(--line); text-align: left;
  vertical-align: top;
}
.pd-spec th {
  width: 200px; background: var(--sky-50);
  font-weight: 600; color: var(--ink-700);
}

/* --------------------------------------------------------------------------
   구매 후기 — 목업 .review-list 에 없는 머리줄만 여기서.
   후기 목록 자체는 sub.css 가 이미 들고 있다.
   -------------------------------------------------------------------------- */
.review-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.rv-avg { display: flex; align-items: center; gap: 10px; }
.rv-avg .rv-star { font-size: 18px; font-weight: 800; color: var(--ink-900); }
.rv-avg i { font-style: normal; font-size: 14px; color: var(--ink-500); }
.rv-avg i b { color: var(--ink-800); }
.rv-subject { margin-bottom: 4px; font-size: 15px; font-weight: 600; color: var(--ink-800); }
.rv-act { margin-left: auto; display: flex; gap: 8px; font-size: 13px; color: var(--ink-400); }
.rv-reply {
  margin-top: 12px; padding: 12px 14px;
  background: var(--sky-50); border-radius: var(--r-sm); font-size: 14px;
}
.rv-reply b { display: block; margin-bottom: 4px; color: var(--sky-t2); }

/* 상품 문의 — 목업 질문답변(.qna-state · .qa-q · .qa-a)을 그대로 쓰고,
   상품 상세에만 있는 머리줄만 여기서 더한다 */
.qna-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qna-subject {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: var(--ink-900);
}
.qna-subject .ico { width: 13px; height: 13px; color: var(--ink-400); }
.qna-head b { font-size: 13.5px; font-weight: 600; color: var(--ink-600); }
.qna-head i { font-style: normal; font-size: 13px; color: var(--ink-400); }
.qna-list .qa-q, .qna-list .qa-a { margin-top: 10px; }
.qna-locked { margin-top: 10px; font-size: 14px; color: var(--ink-400); }

/* --------------------------------------------------------------------------
   장바구니 · 주문 — 단계 표시는 본문 폭을 다 쓴다.

   위쪽 '맨몸 페이지 보정' 이 .sub-body > .step-nav 를 1000px 로 좁히는데,
   그건 회원 화면(로그인 · 가입)에서 폼이 너무 넓어지지 않게 하려던 것이다.
   장바구니 · 주문은 목업이 본문 폭을 그대로 쓰므로 여기서 되돌린다.
   -------------------------------------------------------------------------- */
#sod_bsk > .step-nav,
#sod_frm_wrap > .step-nav { max-width: none; }

/* ==========================================================================
   주문서 (shop/orderform.sub.php)

   여기만 마크업을 우리가 못 그린다. 코어 orderform.sub.php 는 1,937줄이고
   테마로 넘기는 분기가 없다 — 훅은 easypay 버튼 하나뿐이다. 페이지를 복사해
   오버라이드하면 결제 연동 분기까지 통째로 떠안게 되므로, 목록 페이지네이션 ·
   상품 옵션줄 때와 같이 모양만 맞춘다.

   코어가 주는 뼈대는 다행히 목업과 결이 같다.
     #sod_frm > .od_prd_list   주문 상품 표      → 목업 .form-box
     #sod_frm > .sod_left      주문자 · 배송지   → 목업 .form-box 두 개
     #sod_frm > .sod_right     합계 · 결제수단   → 목업 .order-sum
   ========================================================================== */

#sod_frm_wrap { padding-top: 30px; }

#sod_frm.sod_frm_pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
  max-width: var(--bf-inner);
  margin: 0 auto;
  padding: 0 var(--bf-gutter) 60px;
}
/* DOM 순서가 상품표 → 왼쪽 → 오른쪽이라, 오른쪽을 두 줄에 걸쳐 세운다 */
#sod_frm > .od_prd_list { grid-column: 1; grid-row: 1; }
#sod_frm > .sod_left    { grid-column: 1; grid-row: 2; }
#sod_frm > .sod_right   { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 20px; }

/* --------------------------------------------------------- 박스 (.form-box) */
#sod_frm > .od_prd_list,
#sod_frm_orderer,
#sod_frm_taker {
  padding: 26px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
#sod_frm_orderer { margin-bottom: 18px; }
#sod_frm_taker > br { display: none; }   /* 코어가 제목 앞에 넣는 빈 줄 */

#sod_frm_orderer > h2,
#sod_frm_taker > h2,
#sod_frm > .od_prd_list > h2 {
  padding-bottom: 16px; margin-bottom: 6px;
  border-bottom: 2px solid var(--ink-800);
  font-size: 19px; font-weight: 700; color: var(--ink-900);
}

/* ------------------------------------------------------------- 주문 상품 표 */
#sod_list { width: 100%; border-collapse: collapse; font-size: 14px; }
#sod_list thead th {
  padding: 12px 10px;
  background: var(--sky-50);
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-600); text-align: center;
}
#sod_list tbody td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center; color: var(--ink-700);
}
#sod_list tbody td.td_prd { text-align: left; }
#sod_list .sod_img img { width: 64px; height: 64px; border-radius: var(--r-xs); object-fit: cover; }
#sod_list .sod_name { font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
#sod_list .sod_opt { margin-top: 4px; font-size: 13px; color: var(--ink-500); font-weight: 400; }

/* ------------------------------------------------- 입력 줄 (.form-row 흉내) */
.tbl_frm01 table { width: 100%; border-collapse: collapse; }
.tbl_frm01 tr { display: flex; align-items: flex-start; gap: 20px;
                padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.tbl_frm01 th {
  flex: 0 0 120px; padding-top: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-700); text-align: left;
}
.tbl_frm01 td { flex: 1 1 auto; min-width: 0; }
.tbl_frm01 .frm_input,
.tbl_frm01 input[type="text"],
.tbl_frm01 input[type="tel"],
.tbl_frm01 input[type="email"],
.tbl_frm01 textarea,
.tbl_frm01 select {
  width: 100%; max-width: 420px; min-height: 42px; padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--ink-900);
}
.tbl_frm01 textarea { padding: 10px 12px; min-height: 90px; }
.tbl_frm01 .frm_input:focus,
.tbl_frm01 select:focus { border-color: var(--sky-500); outline: none; }
.tbl_frm01 .btn_frmline,
.tbl_frm01 button:not(.bf-btn) {
  height: 42px; padding: 0 14px; margin-left: 6px;
  background: var(--sky-50); border: 1px solid var(--sky-b1);
  border-radius: var(--r-sm); font-size: 14px; color: var(--sky-t2);
}

/* ------------------------------------------------- 오른쪽 요약 (.order-sum) */
#sod_frm > .sod_right {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
#sod_frm > .sod_right h2 {
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 17px; font-weight: 700; color: var(--ink-900);
}
/* 합계 줄.

   default_shop.css 가 #sod_frm #sod_bsk_tot li 로 float + width:33.333% 를
   줘서 세 칸이 한 줄에 눕는다. 목업은 세로 목록이므로 같은 특이성(아이디 둘)
   으로 되받아야 한다. 선택자를 줄이면 다시 눕는다.

   마크업이 <span>주문</span><strong>62,200</strong>원 이라 '원' 이 태그 밖
   글자다. space-between 으로 벌리면 금액과 '원' 이 갈라지므로, 이름만
   왼쪽으로 밀어내고 나머지는 붙여 둔다. */
#sod_frm #sod_bsk_tot { border: 0; margin: 0; }
#sod_frm #sod_bsk_tot ul { display: block; }
#sod_frm #sod_bsk_tot li {
  position: static; float: none; width: auto; height: auto;
  display: flex; align-items: baseline; gap: 2px;
  padding: 7px 0; background: none;
  font-size: 14.5px; color: var(--ink-800);
}
#sod_frm #sod_bsk_tot li span { display: inline; float: none; color: var(--ink-500); }
#sod_frm #sod_bsk_tot li span:first-child { margin-right: auto; }
#sod_frm #sod_bsk_tot li strong {
  font-family: var(--font-en); font-weight: 600; color: var(--ink-900);
}
#sod_frm #sod_bsk_tot li.sod_bsk_cnt {
  margin-top: 6px; padding-top: 10px;
  border-top: 1px solid var(--line); font-weight: 700;
}
#sod_frm #sod_bsk_tot li.sod_bsk_cnt strong { font-size: 17px; color: var(--sky-t3); }

#od_tot_price {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; padding-top: 16px;
  border-top: 2px solid var(--ink-800);
  font-size: 15px; font-weight: 700; color: var(--ink-900);
}
#od_tot_price strong, #od_tot_price b {
  font-family: var(--font-en); font-size: 26px; font-weight: 800; color: var(--point);
}

#od_pay_sl { margin-top: 16px; font-size: 14px; color: var(--ink-600); }
#od_pay_sl label { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; }
#sod_frm_paysel { margin-top: 10px; border: 0; padding: 0; }

/* 결제 버튼 — 목업 .os-btn */
#display_pay_button { margin-top: 18px; display: grid; gap: 8px; }
#display_pay_button .btn_submit,
#display_pay_button .btn01,
#display_pay_button a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; border: 0; border-radius: var(--r-sm);
  font-size: 16px; font-weight: 700; cursor: pointer;
}
#display_pay_button .btn_submit { background: var(--sky-500); color: #fff; }
#display_pay_button .btn_submit:hover { background: var(--sky-600); }
#display_pay_button .btn01,
#display_pay_button a {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-700);
}

@media (max-width: 1023px) {
  #sod_frm.sod_frm_pc { grid-template-columns: minmax(0, 1fr); }
  #sod_frm > .sod_left  { grid-row: auto; }
  #sod_frm > .sod_right { grid-column: 1; grid-row: auto; position: static; }
  .tbl_frm01 tr { flex-direction: column; gap: 8px; }
  .tbl_frm01 th { flex: none; padding-top: 0; }
}

/* 코어 shop CSS 가 .sod_left / .sod_right 에 float + 고정폭(840 · 340)을 준다.
   그리드로 나눴으므로 그 값을 풀어야 열 폭이 맞는다. 오른쪽은 두 줄에 걸쳐
   놓았기 때문에 align-self 를 명시하지 않으면 줄 높이만큼 늘어난다. */
#sod_frm > .sod_left,
#sod_frm > .sod_right {
  float: none; width: auto; margin: 0; height: auto;
}
#sod_frm > .sod_right { align-self: start; }

/* 주문 상품 표의 상품칸.

   default_shop.css 는 칸에 padding-left:120px 를 주고 썸네일을 그 자리에
   position:absolute 로 띄운다. 그대로 두면 flex 가 썸네일을 못 잡아 이름과
   겹친다. 같은 특이성(.od_prd_list .td_prd …)으로 되돌린 뒤 한 줄로 세운다. */
.od_prd_list .td_prd {
  display: flex; align-items: center; gap: 12px;
  position: static; padding-left: 10px; min-height: 0;
}
.od_prd_list .td_prd .sod_img { position: static; flex: 0 0 auto; margin: 0; }
.od_prd_list .td_prd .sod_name { min-height: 0; flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   본문 폭 기본값

   테마는 '화면이 스스로 .bf-inner 로 감싼다'는 규약으로 돌아간다. 우리가
   쓴 화면(콘텐츠샵 · FAQ · 1:1문의 · 내용관리 · 회원)은 전부 그렇게 한다.

   그런데 코어 화면은 그러지 않는다 — 게시판(#bo_list · #bo_v · #bo_w),
   새글 · 쪽지 · 포인트 · 회원정보 같은 것들이 #bf_container 바로 밑에
   맨몸으로 들어온다. 그러면 화면 폭이 넓을수록 표가 끝까지 퍼진다.
   1920 에서 목록이 양끝까지 늘어나 있었다.

   그래서 '스스로 감싸지 않은 직계 자식' 에만 본문 폭을 준다.
   빼는 것들:
     .sub-head        서브 헤더 — 화면을 가로지르는 띠
     .sub-tab         분류 탭 — 같은 이유
     .bf-inner        이미 감싼 것 (우리 화면들)
     .bf-sub-module   리빌더 레이아웃 박스 — 모듈이 제 폭을 정한다
     #sct · #sit      콘텐츠샵 목록 · 상세 — 안에 전체폭 분류 탭을 품는다
                      (그 둘은 자식에게 폭을 준다. 위쪽 '콘텐츠샵' 절 참고)
     form             주문서 등 폼이 최상위인 화면 — 안쪽에서 폭을 잡는다
     .bf-main         메인 레이아웃 — 스스로 --bf-inner 를 들고 있고
                      (rb_config.co_main_width) 안쪽 .bf-inner 가 폭을 잡는다.
                      여기서 또 감싸면 24px 이 두 번 붙어 본문이 48px 좁아진다.
   ========================================================================== */
#bf_container > *:not(.sub-head):not(.sub-tab):not(.bf-inner):not(.bf-sub-module):not(.bf-main):not(#sct):not(#sit):not(form):not(script):not(noscript):not(style) {
  max-width: var(--bf-inner);
  margin-left: auto; margin-right: auto;
  padding-left: var(--bf-gutter); padding-right: var(--bf-gutter);
}

/* ==========================================================================
   주문 상세 (shop/orderinquiryview.php)

   이 화면은 테마가 가로채지 않고 코어 마크업을 그대로 쓴다. 795줄 가운데
   대부분이 결제대행(PG) 취소·환불 처리라, 모양 때문에 통째로 베껴 오면
   결제 로직이 두 벌이 되고 코어가 올라갈 때마다 어긋난다. 장바구니 옵션 폼과
   주문서에서 이미 택한 방식 그대로 — 마크업은 코어 것, 모양만 여기서 맞춘다.

   코어가 내는 뼈대
     #sod_fin
       #sod_fin_no                    주문번호 띠
       section#sod_fin_list           주문하신 상품      (표)
       .sod_left  > #sod_fin_pay · #sod_fin_orderer · #sod_fin_receiver · #sod_fin_dvr
       .sod_right > #sod_fin_tot · #sod_fin_cancel
     표는 전부 .tbl_head01 .tbl_wrap
   ========================================================================== */
/* 두 칸 배치.
   default_shop.css 는 .sod_left 840px + .sod_right 340px 로 못박는다. 합이
   1,180px 인데 우리 본문은 1,200px 에서 좌우 여백 24px 를 빼면 1,152px 라
   오른쪽 칸이 아래로 밀리고, float 를 걷어 줄 사람도 없어 뒤에 빈 화면이
   1,300px 쯤 따라붙었다. 격자로 바꿔 폭을 화면에 맞춘다. */
#sod_fin {
  margin-top: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0 20px;
  align-items: start;
}
#sod_fin > #sod_fin_no,
#sod_fin > #sod_fin_list { grid-column: 1 / -1; }
#sod_fin > .sod_left,
#sod_fin > .sod_right { float: none; width: auto; min-width: 0; }

#sod_fin_no {
  margin-bottom: 18px; padding: 16px 20px;
  background: var(--sky-50);
  border: 1px solid var(--sky-b1);
  border-radius: var(--r-md);
  font-size: 14.5px; color: var(--ink-600);
}
#sod_fin_no strong {
  margin-left: 6px;
  font-family: var(--font-en);
  font-size: 17px; font-weight: 800; color: var(--sky-t3);
}

/* 각 묶음을 카드로 */
#sod_fin > section,
#sod_fin .sod_left > section,
#sod_fin .sod_right > section {
  margin-bottom: 18px; padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

#sod_fin h2,
#sod_fin h3 {
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 700; color: var(--ink-900);
  letter-spacing: -.2px;
}
#sod_fin .sod_left > section h3,
#sod_fin .sod_right > section h2 { font-size: 15px; }

/* 결제/배송 정보 큰 제목은 카드 밖의 머리글이라 테두리를 빼 둔다 */
#sod_fin > h2 {
  margin: 26px 0 12px; padding: 0; border: 0;
  font-size: 18px;
}

/* ------------------------------------------------------------------- 표 */
#sod_fin .tbl_head01 { overflow-x: auto; }
#sod_fin .tbl_head01 table {
  width: 100%; border-collapse: collapse;
}
#sod_fin .tbl_head01 th,
#sod_fin .tbl_head01 td {
  padding: 11px 12px;
  border: 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--ink-600);
  text-align: left; vertical-align: middle;
  background: transparent;
}
#sod_fin .tbl_head01 thead th {
  background: var(--sky-50);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-500);
  white-space: nowrap;
}
#sod_fin .tbl_head01 tbody tr:last-child td { border-bottom: 0; }
#sod_fin .tbl_head01 tbody th {          /* 좌측 항목명 칸 */
  width: 130px;
  background: var(--plate);
  font-weight: 600; color: var(--ink-500);
  white-space: nowrap;
}
#sod_fin .tbl_head01 td img { border-radius: var(--r-sm); }
#sod_fin .td_numbig, #sod_fin .td_num, #sod_fin .text_right { text-align: right; }
#sod_fin .td_stat, #sod_fin .td_chk { text-align: center; }

/* 결제합계 · 주문취소의 제목은 default_shop.css 가 position:absolute 로
   화면 밖에 빼 둔다. 위 규칙이 그 둘에 테두리·여백을 붙이면 떠 있는 채로
   보여 내용과 겹친다. 제자리로 돌려놓고 카드 제목으로 쓴다. */
#sod_fin_tot > h2,
#sod_fin_cancel > h2 {
  position: static; width: auto; height: auto;
  overflow: visible; clip: auto;
}

/* 오른쪽 합계 상자 — default_shop.css 는 여기에 청록 배경을 깐다.
   주문서(#sod_frm)에서 이미 맞춰 둔 것과 같은 모양으로 되돌린다. */
#sod_fin #sod_bsk_tot {
  margin: 0 0 16px; padding: 16px 18px; border: 0;
  background: var(--sky-50);
  border-radius: var(--r-md);
}
#sod_fin #sod_bsk_tot ul { display: block; }
#sod_fin #sod_bsk_tot li {
  position: static; float: none; width: auto; height: auto;
  display: flex; align-items: baseline; gap: 2px;
  padding: 6px 0; background: none; border: 0;
  font-size: 14px; color: var(--ink-700);
}
#sod_fin #sod_bsk_tot li span,
#sod_fin #sod_bsk_tot li strong { color: inherit; float: none; }
#sod_fin #sod_bsk_tot li span:first-child { margin-right: auto; color: var(--ink-500); }
#sod_fin #sod_bsk_tot li strong {
  font-family: var(--font-en); font-weight: 700; color: var(--ink-900);
}

/* --------------------------------------------------------------- 결제합계 */
#sod_fin_tot .tbl_head01 tbody th { width: auto; background: transparent; }
#sod_fin_tot .tbl_head01 td { text-align: right; font-weight: 600; color: var(--ink-800); }
#sod_fin_tot tr:last-child td,
#sod_fin_tot .total_price td {
  font-family: var(--font-en);
  font-size: 18px; font-weight: 800; color: var(--sky-t3);
}

/* --------------------------------------------------------- 상태 안내 · 버튼 */
#sod_sts_wrap {
  margin-bottom: 14px; padding: 14px 16px;
  background: var(--plate);
  border-radius: var(--r-md);
  font-size: 13.5px; color: var(--ink-600);
}
#sod_sts_explan { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--ink-500); }

#sod_fin .btn_confirm,
#sod_fin_test { margin-top: 18px; text-align: center; }
#sod_fin .btn_confirm a,
#sod_fin .btn_confirm button,
#sod_fin_cancel button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px; margin: 0 3px;
  border-radius: var(--r-md);
  background: var(--surface); color: var(--sky-t3);
  border: 1px solid var(--sky-b1);
  font-size: 14.5px; font-weight: 600;
}
#sod_fin .btn_confirm a:hover,
#sod_fin .btn_confirm button:hover,
#sod_fin_cancel button:hover { background: var(--sky-50); border-color: var(--sky-b3); }

/* ------------------------------------------------------------------ 반응형
   .sod_left / .sod_right 는 default_shop.css 가 float + % 로 잡는다.
   좁아지면 두 칸이 서로를 밀어 글자가 겹치므로 한 줄로 편다. */
@media (max-width: 900px) {
  #sod_fin { grid-template-columns: minmax(0, 1fr); }
  #sod_fin .tbl_head01 tbody th { width: 96px; }
}

/* ==========================================================================
   자동등록방지(캡차) — 사이트 모양 · 다크 모드

   비회원 댓글 · 비회원 글쓰기 · 회원가입 · 비밀번호 찾기에 나온다. 모양은 두
   곳에서 온다. 그누보드 default.css 의 #captcha 규칙과, 리빌더가
   plugin/kcaptcha/kcaptcha.lib.php 의 captcha_html() 에서 폼 안에 바로 찍는
   <style> 이다. 그 <style> 은 본문 중간에 있어 우리 CSS 보다 뒤에 오고, 입력칸
   포커스 · 버튼 hover 테두리는 !important 로 #000 이다. 둘 다 코어라 못 고친다.

   :root 가 가중치를 한 단계 올려 뒤에 오는 <style> 을 이긴다. !important 둘은
   코어의 !important(포커스 · hover 검은 테두리)를 이기려고 어쩔 수 없이 쓴다.

   모양(라이트 · 다크 공통) — 코어는 그림 · 입력칸 · 단추를 3px 씩 붙여 놓고 회색 네모 ·
   검은 포커스라, 사이트 입력칸(.auth-field)처럼 둥근 옅은 칸 · 하늘 포커스로 바꾸고 사이를 띄운다.

   캡차 그림(검은 숫자 · 흰 바탕)과 버튼 아이콘(cp_btn_img.png — 남색 아이콘 ·
   흰 바탕)은 바탕까지 불투명하게 그려진 그림이라 다크에서 흰 네모로 뜬다.
   색을 뒤집고(invert) 밝게 합성(screen)하면 흰 바탕은 어두운 카드에 녹고
   숫자 · 아이콘만 밝게 남는다. 목업이 흰 바탕 제품 사진을 곱셈 합성으로
   판에 녹이는 것(목업 theme.css 2절)을 선 그림에 맞게 뒤집은 것이다.
   버튼은 테두리까지 뒤집히지 않게 아이콘만 ::before 로 옮겨 뒤집는다.
   ========================================================================== */
/* #captcha.captcha — 코어 <style> 의 #captcha.m_captcha …(모바일형 캡차)와 같은 가중치면 뒤에 오는 쪽이 이겨서 한 단계 올린다 */
:root #captcha.captcha { border-color: var(--line); border-radius: var(--r-md); }
:root #captcha.captcha #captcha_key {
  margin-left: 8px; height: 40px;
  border-color: var(--line); border-radius: var(--r-sm);
  background-color: var(--sky-50); color: var(--ink-900);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
:root #captcha.captcha #captcha_key:focus {
  outline: none; background-color: var(--surface);
  border-color: var(--sky-b3) !important; box-shadow: 0 0 0 3px rgba(62,159,222,.13);
}
:root #captcha.captcha #captcha_mp3 { margin-left: 6px; }
:root #captcha.captcha #captcha_reload { margin-left: 3px; }
:root #captcha.captcha #captcha_mp3,
:root #captcha.captcha #captcha_reload { border-color: var(--line); border-radius: var(--r-sm); }
:root #captcha.captcha button:hover { border-color: var(--sky-b3) !important; }

/* 다크 — 그림 · 아이콘 뒤집기 */
:root[data-theme="dark"] #captcha #captcha_img { filter: invert(1); mix-blend-mode: screen; }

:root[data-theme="dark"] #captcha #captcha_mp3,
:root[data-theme="dark"] #captcha #captcha_reload {
  position: relative;
  background-image: none;
}
:root[data-theme="dark"] #captcha #captcha_mp3::before,
:root[data-theme="dark"] #captcha #captcha_reload::before {
  content: ''; position: absolute; inset: 0;
  background: url(../../rb.basic/rb.img/icon/cp_btn_img.png) no-repeat 0 0;
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}
:root[data-theme="dark"] #captcha #captcha_reload::before { background-position: 0 -40px; }

/* ==========================================================================
   리빌더 알림 창(.rb-custom-alert-popup) — 다크 모드

   코어 bbs/alert.php · alert_close.php · confirm.php 가 '회원이시라면 로그인 후
   이용해 보십시오' 같은 안내를 띄우는 창이다. 모양은 그 파일 안의 <style> 에
   흰 바탕 · 검은 글자 · 버튼 !important 로 박혀 있다. 라이트는 그대로 두고 다크만
   가중치를 올려 덮는다. 확인 버튼은 라이트의 '진한 바탕 + 흰 글자'를 뒤집는다.
   ========================================================================== */
:root[data-theme="dark"] .rb-custom-alert-popup {
  background: var(--surface);
  color: var(--ink-800);
  box-shadow: var(--sh-lg);
}
:root[data-theme="dark"] .rb-custom-alert-popup .rb-alert-btn {
  background-color: var(--surface-2) !important;
  color: var(--ink-700);
}
:root[data-theme="dark"] .rb-custom-alert-popup .rb-alert-btn.rb-btn-ok {
  background-color: var(--ink-900) !important;
  color: var(--bg) !important;
}

/* ==========================================================================
   hidden 속성 — 목업 reset.css 69행에 해당

   ※ !important 를 쓰면 안 된다
     처음에 base.css 에 [hidden]{display:none !important} 로 넣었다가
     리빌더 관리자 UI 가 통째로 먹통이 됐다. 모듈 설정(톱니바퀴) 모달도,
     색상 선택기(Coloris)도 hidden 으로 시작해 자바스크립트가 열어 주는데,
     jQuery .show() 는 인라인 display 를 넣을 뿐이라 !important 를 못 이긴다.
     버튼을 눌러도 아무 일이 안 일어나는 것처럼 보였다.

   ※ 그런데 !important 없이는 우리 컴포넌트에 진다
     .faq-a{display:flex} 같은 클래스 규칙과 [hidden] 은 가중치가 같아서
     나중에 온 쪽이 이긴다. base.css(3)는 sub.css(5)보다 먼저라 졌다.
     그래서 맨 뒤(theme.css, 9)로 옮겼다. 이제
       [hidden]            우리 컴포넌트 클래스 규칙을 이긴다 (순서)
       인라인 display      [hidden] 을 이긴다 (JS 가 여는 길이 열려 있다)
     둘 다 성립한다.
   ========================================================================== */
[hidden] { display: none; }

/* ==========================================================================
   코어 관리자 버튼 — 숨긴다

   코어가 관리자에게만 찍는 톱니 버튼이다.
     .ctt_admin   '내용 수정'   bbs/content.php 105행
     .sit_admin   '상품 관리'   shop/item.php 151행
   아이콘이 Font Awesome(<i class="fa fa-cog">)인데 이 테마는 Font Awesome 을
   싣지 않는다(아이콘은 SVG 스프라이트). 그래서 보이는 것 없이 35px 빈 줄로만
   남아, 관리자로 열면 본문이 그만큼 내려갔다. 리빌더 기본 테마도 둘 다 숨긴다
   (rb.basic rb.css/style.css · style.shop.css). 수정은 관리자 메뉴에서 한다.
   ========================================================================== */
.ctt_admin, .sit_admin { display: none; }

/* ==========================================================================
   미니톡 채팅 위젯(rb/rb.widget/rb.minitalk) — 보드팩토리 템플릿일 때 바깥 모양
   사이드의 다른 카드(.widget)처럼 18px 모서리에 옅은 그림자. 채팅창 안쪽(테두리 · 색 · 다크)은
   템플릿(templet/boardfactory)이 그린다. 위젯은 테마 없이도 팔리므로 이 규칙을 위젯 style.css 에 두지 않는다.
   ========================================================================== */
.rbmt-t-boardfactory .rbmt-chat { border-radius: 18px; box-shadow: var(--sh-sm, 0 2px 8px rgba(31, 102, 158, .06)); }