@charset "utf-8";
/* ==========================================================================
   rb.BoardFactory — 기본 (리셋 · 타이포 · 접근성 · 공용 컴포넌트)
   값은 전부 tokens.css 의 var() 를 쓴다.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-kr);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-800);
  background: var(--bg);
  letter-spacing: -.2px;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   목업 reset.css 에는 있고 그누보드 default.css 에는 없는 것.

   목업은 단독 페이지라 reset.css 를 통째로 깔지만, 테마는 그누보드 위에서
   돌아간다. 전체 요소에 margin/padding/border 0 을 다시 먹이면 관리자 화면과
   기본 스킨이 같이 무너지므로, '목업과 눈에 띄게 달라지는 것' 만 가져온다.

   font-style 이 가장 크다 — 이 테마는 <em>/<i> 를 날짜(.p-date)·배지(.p-new)·
   말머리(.gal-cate)·이벤트 상태(.ev-state)·로고 영문처럼 곳곳에 쓰는데,
   브라우저 기본값이 italic 이라 리셋이 없으면 전부 기울어진다.
   -------------------------------------------------------------------------- */
address, em, i, cite, dfn, var { font-style: normal; }

/* hidden 속성 규칙은 여기 두지 않는다 — theme.css 맨 뒤에 있다.
   이유는 그쪽 주석 참고 (!important 를 쓰면 리빌더 관리자 UI 가 열리지 않는다). */

ol { margin: 0; padding: 0; list-style: none; }
li { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th { font-weight: 600; text-align: left; }

/* 입력 요소가 색을 물려받아야 다크 모드에서 글자가 보인다 */
input, select, textarea { margin: 0; color: inherit; }
textarea { resize: vertical; overflow: auto; }

/* 검색창의 브라우저 기본 X 버튼 — 우리 아이콘과 겹친다 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; }
input::-ms-clear, input::-ms-reveal { display: none; }

/* --------------------------------------------------------------------------
   그누보드 css/default.css 되돌리기.

   default.css 는 order 0 으로 우리보다 먼저 들어오지만, 아래 선택자들은
   우리 body 규칙이 상속으로 닿지 않는 자리에 'Malgun Gothic' 을 직접 박는다.

       h1~h6 { font-family:'Malgun Gothic', dotum, sans-serif }
       input, button, textarea, select { font-family:'Malgun Gothic', ... }

   상속보다 직접 지정이 이기므로, 그냥 두면 섹션 제목(.sec-tit 은 h2 다)과
   위젯 제목, 검색창 글씨가 전부 맑은 고딕으로 나온다. 실제로 그랬다.
   inherit 로 돌려놓으면 body 의 Pretendard 가 다시 내려온다.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
input, button, textarea, select, optgroup {
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   영문 라벨 · 숫자 유틸 — 목업 style.css 2절.

   메인화면 이식 범위(3~13절) 밖이라 여기로 따로 옮겼다.
   헤더는 클래스를 .bf-* 로 바꿔 썼으므로 양쪽을 다 적는다.

   지금은 --font-en 이 --font-kr 과 같은 Pretendard 라 이 묶음은 아무것도
   바꾸지 않는다. 영문·숫자만 다른 글꼴로 되돌릴 때 붙잡을 자리로 남겨 둔다
   (tokens.css 의 --font-en 한 줄).
   -------------------------------------------------------------------------- */
.logo-txt em, .bf-logo-txt em,
.foot-logo-txt, .rank-roll-label, .bf-rank-roll-label, .mem-lv,
.sec-tit strong, .gal-price i, .shop-price small, .cal-month em,
.copyright b, .foot-sns b, .sns b,
.bf-num, .num, .count, .bf-badge,
.p-date, .p-view, .p-reply, .f-cnt, .gal-price, .shop-price {
  font-family: var(--font-en);
}

/* --------------------------------------------------------------------------
   목업 reset.css 에서 빠져 있던 것들.

   이 테마는 rb.basic 을 기반으로 깔지 않고 목업에서 새로 짰다. 그래서 목업
   reset.css 를 옮길 때 빠뜨린 규칙은 그대로 구멍이 된다 — 밑에 받쳐 줄 게
   없기 때문이다. 아래 둘이 실제로 그랬다.
   -------------------------------------------------------------------------- */

/* SVG 아이콘 — 목업 reset.css 94행.
   없으면 브라우저 기본값(fill:black, stroke:none)으로 그려진다. 메인 슬라이더
   좌우 화살표가 검게 찍히던 원인이다. 리빌더 관리자 UI 는 .ico 를 쓰지 않아
   (rb.config/style.css 에 .ico 규칙 0건) 전역으로 둬도 부딪히지 않는다. */
.ico {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.board-ico {
  width: 64px; height: 44px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 입력 요소에서 OS 기본 모양 벗기기 — 목업 reset.css 의
   input, select, textarea { border-radius:0; appearance:none } 에 해당.
   이게 빠져서 둥근 테두리와 셀렉트 화살표 같은 기본 크롬이 그대로 보였다.

   #bf_wrap 안으로 제한한다. 리빌더 환경설정 패널(right.php)은 tail.php 가
   #bf_wrap 을 닫은 뒤에 include 하므로 여기 걸리지 않는다.

   :where() 로 감싸 가중치를 0 으로 둔다. 아이디 선택자를 그냥 쓰면 (1,0,1) 이
   되어 컴포넌트 클래스 규칙을 전부 눌러 버린다 — theme.css 위쪽 링크 색
   주석에 적힌 사고와 같은 일이다.

   체크박스 · 라디오는 뺀다. appearance:none 이면 아예 안 보인다. */
:where(#bf_wrap) input:not([type="checkbox"]):not([type="radio"]),
:where(#bf_wrap) select,
:where(#bf_wrap) textarea {
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
}

/* 화면낭독기에만 읽히는 것 — 목업 reset.css */
legend, caption {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
:where(#bf_wrap) fieldset { margin: 0; padding: 0; border: 0; }

img, svg, video, canvas { max-width: 100%; vertical-align: middle; }
img { height: auto; border-style: none; }

a { color: inherit; text-decoration: none; background-color: transparent; }

button {
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
button:disabled { cursor: default; }

/* ------------------------------------------------------------- 접근성 */
.blind {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 본문 바로가기 — 키보드 포커스를 받기 전까지는 '크기 0' 으로 숨긴다.

   화면 밖으로 밀어 두는 방식(top:-100px)은 position:fixed 라 전체 페이지
   캡처나 인쇄에서 화면 중간에 파란 띠로 찍힌다. 실제로 그렇게 보였다.
   크기를 0 으로 두면 어디에도 그려지지 않으면서 낭독기는 그대로 읽는다. */
.bf-skip {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  background: var(--sky-700); color: #fff;
  font-size: 15px; font-weight: 600; text-align: center;
}
.bf-skip:focus {
  width: 100%; height: auto; padding: 14px 0; overflow: visible;
  clip: auto; clip-path: none;
}

/* 키보드 초점 고리 — 링크 · 단추 · 체크박스 · 라디오. 마우스로 누를 때는 생기지 않는다. */
a:focus-visible,
button:focus-visible,
input:is([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"]):focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sky-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 글자 입력칸 · 선택칸에는 고리를 두지 않는다(사용자 요청, 2026-09-22).
   입력칸은 마우스로 눌러도 :focus-visible 이라 누를 때마다 칸 둘레에 네모 고리가
   생겼다 — 브라우저 기본 고리도 같이 끈다. 초점은 각 부품이 제 :focus 규칙으로
   테두리 색을 바꿔 보여 준다(헤더 검색창 · 게시판 검색 · 글쓰기 · 댓글 · 주문서 ·
   회원 · 사이드 로그인 모두 있다). 새 입력칸을 만들면 :focus 테두리를 같이 줄 것. */
input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"]):focus,
textarea:focus,
select:focus {
  outline: none;
}

::selection { background: var(--sky-200); color: var(--ink-900); }
:root[data-theme="dark"] ::selection { background: #2F5E80; color: #EAF4FB; }

/* ---------------------------------------------------- 제품 사진 판(plate)
   흰 배경 제품컷이 올라가는 자리. 다크에서 판을 어둡게 칠하면 사진 속 흰
   배경이 네모로 떠 버리므로, 판은 밝게 두고 사진을 곱셈 합성해 경계를 지운다.
   합성이 뒤쪽 배경까지 번지지 않도록 isolation 을 건다. */
.bf-plate {
  background: var(--plate);
  overflow: hidden;
  isolation: isolate;
}
.bf-plate img { mix-blend-mode: var(--plate-blend); }

/* ------------------------------------------------------------ 공용 버튼 */
.bf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 46px; padding: 0 22px;
  border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; line-height: 1;
  transition: background .2s, color .2s, box-shadow .2s, transform .2s;
  cursor: pointer;
}
.bf-btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }

.bf-btn-solid { background: var(--sky-500); color: #fff; box-shadow: 0 4px 12px rgba(62,159,222,.3); }
.bf-btn-solid:hover { background: var(--sky-600); box-shadow: 0 6px 16px rgba(62,159,222,.38); }

.bf-btn-ghost { background: var(--surface); color: var(--sky-t3); border: 1px solid var(--sky-b1); }
.bf-btn-ghost:hover { background: var(--sky-50); border-color: var(--sky-b3); }

/* 색이 깔린 바닥 위에 놓는 흰 테두리 버튼 — 목업 .btn-line-w
   (하단 가입 유도 배너 '커뮤니티 둘러보기', 로그인 화면 '회원가입 하러 가기')
   이름을 .btn-* 에서 .bf-btn-* 로 옮기면서 이 한 줄이 빠져 있었다.
   테두리도 배경도 없이 글자만 떠 보였다. */
.bf-btn-line-w {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.bf-btn-line-w:hover { background: rgba(255,255,255,.22); }

/* -------------------------------------------------------------- TOP 버튼 */
.bf-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface); color: var(--sky-t2);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
}
.bf-top.on { display: flex; }
.bf-top:hover { background: var(--sky-500); color: #fff; border-color: var(--sky-500); }
.bf-top svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ------------------------------------------------------- 이미지 출처 표
   내용관리 'credits' 페이지가 쓰는 표. 테마에 동봉한 rb.img/CREDITS.md 를
   그대로 옮긴 것이라 열 수가 표마다 다르다 — 폭을 고정하지 않는다. */
.bf-credits {
  width: 100%;
  margin: 12px 0 28px;
  border-top: 2px solid var(--sky-b2);
  font-size: 14px;
}
.bf-credits th,
.bf-credits td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}
.bf-credits th { background: var(--sky-50); color: var(--ink-900); font-weight: 700; }
.bf-credits td { color: var(--ink-600); }
.bf-credits code {
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--sky-50);
  color: var(--sky-t3);
  font-size: 13px;
}
.bf-credits a { color: var(--sky-t2); text-decoration: underline; }
.bf-credits-note {
  margin: 10px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--amber);
  background: var(--sky-50);
  color: var(--ink-600);
  font-size: 14px; line-height: 1.7;
}

/* ------------------------------------------------- 관리자 안내 (빈 레이아웃) */
.bf-empty {
  margin: 40px auto;
  max-width: 560px;
  padding: 28px 24px;
  border: 1px dashed var(--sky-b2);
  border-radius: var(--r-lg);
  background: var(--sky-50);
  color: var(--ink-600);
  font-size: 15px; line-height: 1.7; text-align: center;
}
.bf-empty strong { display: block; margin-bottom: 4px; color: var(--ink-900); font-size: 16px; }

/* 목록 안이 비었을 때의 한 줄. .bf-empty 는 화면 하나가 통째로 빌 때 쓰는
   큰 안내라 ul 안에 넣으면 너무 크다. */
.bf-empty-row {
  padding: 26px 8px;
  color: var(--ink-400);
  font-size: 13.5px; text-align: center;
}

/* 목업 공용 유틸 — 숫자 하나를 강조할 때 (mockup/css/style.css:158) */
.c-point { color: var(--sky-t2) !important; font-weight: 600; }

/* --------------------------------------------------------- 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}