@charset "utf-8";
/* ==========================================================================
 * Name: 플랫
 * Desc: 평면 — 살짝 둥근 각진 모서리 · 그라데이션과 카드 그림자 없음 · 무채색 바탕 (강조색은 리빌더 강조컬러)
 * --------------------------------------------------------------------------
 * 첫 디자인 스타일 — 평면. 기본 모양의 푸른 기운(글자 · 선 · 바탕 · 그림자)을 걷어 내고, 모서리는 살짝(최대 4px),
 * 그라데이션은 단색으로, 카드는 그림자 없이 선으로만 나눈다(구매자 의견: 그라데이션 · 그림자가 'AI 티'가 난다). 떠 있는 것(드롭다운 · 팝업 · 모달 = --sh-md 이상)만 그림자를 남긴다.
 * 하늘색 계열(--sky-*)은 건드리지 않는다 — 강조색은
 * 관리자 리빌더 환경설정 '강조컬러'가 그대로 정한다(어느 색을 골라도 어울리게 무채색 바닥).
 * 틀 · 만드는 법은 rb.css/style/_template/style.css.
 * ========================================================================== */

/* ---------------------------------------------------------------- 토큰 · 라이트 */
:root {
  /* 글자 — 푸른 남색 → 중성 회색 */
  --ink-900: #18181B;
  --ink-800: #27272A;
  --ink-700: #3F3F46;
  --ink-600: #52525B;
  --ink-500: #6E6E77;
  --ink-400: #9C9CA5;
  --ink-300: #C4C4CB;
  --ink-200: #E2E2E6;

  /* 선 · 바닥 */
  --line:      #E6E6EA;
  --line-soft: #F1F1F3;
  --bg:        #F5F5F6;

  /* 그림자 — 카드(xs · sm)는 없앤다(카드는 이미 1px 선이 있다). none 이 아니라 투명 그림자인 건
     'box-shadow: var(--sh-sm), …' 처럼 다른 그림자와 이어 쓰는 곳이 있어서 */
  --sh-xs: 0 0 0 transparent;
  --sh-sm: 0 0 0 transparent;
  --sh-md: 0 4px 14px rgba(0,0,0,.07);
  --sh-lg: 0 10px 30px rgba(0,0,0,.10);
  --sh-up: 0 -3px 12px rgba(0,0,0,.06);

  /* 모서리 — 각지게, 살짝만(최대 4px). 알약(--r-full)도 4px. 숫자로 박힌 곳 · 동그라미는 아래 '부품' */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 4px;
  --r-xl: 4px;
  --r-full: 4px;
}

/* ---------------------------------------------------------------- 토큰 · 다크 */
:root[data-theme="dark"] {
  --bg:        #111113;
  --surface:   #1A1A1D;
  --surface-2: #232327;
  --line:      #2D2D32;
  --line-soft: #222226;

  --ink-900: #F4F4F5;
  --ink-800: #E4E4E7;
  --ink-700: #C8C8CE;
  --ink-600: #A5A5AD;
  --ink-500: #8B8B94;
  --ink-400: #84848D;
  --ink-300: #66666E;
  --ink-200: #34343A;

  --sh-xs: 0 0 0 transparent;
  --sh-sm: 0 0 0 transparent;
  --sh-md: 0 4px 14px rgba(0,0,0,.48);
  --sh-lg: 0 10px 30px rgba(0,0,0,.56);
  --sh-up: 0 -3px 12px rgba(0,0,0,.44);

  --plate: #ECECEE;
}

/* ---------------------------------------------------------------- 부품 */

/* 그라데이션 → 단색. 강조색 칠은 --sky-500(리빌더 강조컬러), 옅은 면은 --surface */
.sub-head, .view-head, .ab-hero, .my-profile, .bf-header-top,
.ad-intro, .widget-cs { background: var(--surface); }
.sch-sec-board .sc-head { background: var(--line-soft); }
.vm-thumb, .ab-ico, .f-ico, .my-thumb, .bf-search-submit, .mem-gauge i,
.bd-logo, .scf-ico, .mem-thumb, .bf-btn-login { background: var(--sky-500); }
.bf-btn-login:hover, .bf-search-submit:hover { background: var(--sky-600); }
.f-ico.th-rpi { background: #C93B5D; }
.f-ico.th-odr { background: #2168AE; }
.f-ico.th-opi { background: #E8761E; }
.f-ico.th-tkb { background: #13998B; }
.faq-cta { background: var(--sky-600); }
.strip-banner, .sec-wide { background: var(--sky-700); }
/* 메인 프로모 카드 — 라운드는 어두운 슬라이더 옆에 '파란 칠 + 흰 카드'로 명암 리듬을 준다(bf.hero/style.css).
   플랫은 두 장을 같은 흰 카드(선 · 강조 글자)로 맞춘다. 색 그림자 · 썸네일 그림자 · 떠오르는 효과도 뺀다 */
.promo-1 { background: var(--surface); border: 1px solid var(--line); color: var(--ink-900); }
.promo-1 .promo-label { color: var(--sky-t1); }
.promo-1 strong b { color: var(--sky-t2); }
.promo-1 .promo-more { color: var(--sky-t2); }
.promo-2 { border-color: var(--line); }
.promo-1:hover, .promo-2:hover { border-color: var(--sky-b3); }
.promo-1, .promo-1:hover, .promo-2, .promo-2:hover,
.promo-1 .promo-thumb, .promo-2 .promo-thumb { box-shadow: none; }
.promo-card:hover { transform: none; }
/* 사진 위 덮개 — 글자가 읽히게 어둡게는 두되 한 색으로 */
.strip-banner::before, .sec-wide::after { background: rgba(17,17,19,.72); }
.ad-box::before, .sch-card-ad .ad-box::before { background: var(--ov1); }
.sec-wide::before { background-image: none; }

/* 모서리 — 토큰을 안 쓰고 숫자 · 동그라미(50%)로 박힌 곳을 같은 '살짝'(4px)으로. 화면을 돌며 찾은 것
   (메인 · 게시판 목록/보기 · 갤러리 · 자료실 · 이벤트 · 리뷰 · Q&A · 쇼핑 · 상품 · 통합검색 · 마이페이지).
   아주 작은 점(4~8px — 목록 점 · 접속 점)은 4px 여도 동그랗게 보이므로 그대로 둔다.
   원래 규칙이 여러 단계 선택자 · 모바일 미디어쿼리 안에 있어 :root[data-bf-style] 를 붙여 세기를 올린다 */
:root[data-bf-style="flat"] .mem-thumb,
:root[data-bf-style="flat"] .my-thumb,
:root[data-bf-style="flat"] .vm-thumb,
:root[data-bf-style="flat"] .profile_img img,
:root[data-bf-style="flat"] .bc-home,
:root[data-bf-style="flat"] .sec-more-ico,
:root[data-bf-style="flat"] .slider-ctrl button,
:root[data-bf-style="flat"] .widget-refresh,
:root[data-bf-style="flat"] .ev-cal-nav,
:root[data-bf-style="flat"] .ev-cal-num,
:root[data-bf-style="flat"] .pd-zoom-badge,
:root[data-bf-style="flat"] .bd-notice-ico,
:root[data-bf-style="flat"] .st-mark,
:root[data-bf-style="flat"] .cs-faq a > i,
:root[data-bf-style="flat"] .q-ico,
:root[data-bf-style="flat"] .promo-thumb,
:root[data-bf-style="flat"] .bd-logo,
:root[data-bf-style="flat"] .rbmt-empty,
:root[data-bf-style="flat"] .rb-custom-alert-popup,
:root[data-bf-style="flat"] .rb-custom-alert-popup .rb-alert-btn { border-radius: var(--r-md); }
:root[data-bf-style="flat"] .dot-list a em.no,
:root[data-bf-style="flat"] a > em.no { border-radius: var(--r-sm); }
:root[data-bf-style="flat"] .ev-bar.is-s { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); }
:root[data-bf-style="flat"] .ev-bar.is-e { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
/* 미니 달력(bf.calendar) — 일정 막대 양 끝(12px) · 날짜 동그라미 */
:root[data-bf-style="flat"] .cal-table td.ev-s::before,
:root[data-bf-style="flat"] .cal-table td.ev-in:first-child::before { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
:root[data-bf-style="flat"] .cal-table td.ev-e::before,
:root[data-bf-style="flat"] .cal-table td.ev-in:last-child::before { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
:root[data-bf-style="flat"] .cal-table td.today span { border-radius: var(--r-sm); }

/* 장식 동그라미 — 서브 머리 · 프로모 카드 · 띠 배너 · 광고 칸 귀퉁이에 얹던 반투명 원. 평면에서는 뺀다 */
.sub-head::after, .promo-card::after, .strip-banner::after, .ad-box::after { display: none; }

/* 통합검색 — 버튼을 입력칸 오른쪽 끝에 붙여 한 덩어리로. 상자 안쪽 여백을 없애고 버튼이 테두리(2px)까지
   덮게 키운다(위 · 아래 · 오른쪽 -2px). 오른쪽 모서리만 상자와 같게. 떠 보이던 그림자 · 커지는 효과 · 포커스 빛 번짐도 뺀다 */
.bf-search-box { align-items: stretch; padding-right: 0; }
.bf-search-box:focus-within { box-shadow: none; }
.bf-search-box > .bf-rank-roll, .bf-search-box > .bf-search-input { align-self: center; }
.bf-search-submit {
  width: 56px; height: auto; margin: -2px -2px -2px 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: none;
}
.bf-search-submit:hover { transform: none; }
/* 모바일 검색 레이어도 — 입력칸과 보내기 버튼 사이 틈(6px)을 없애고 높이를 입력칸(42px)에 맞춘다 */
.bf-mo-search-layer input[type="search"] { border-radius: var(--r-md) 0 0 var(--r-md); }
.bf-mo-search-layer button[type="submit"] { width: 48px; height: 42px; margin-left: -6px; border-radius: 0 var(--r-md) var(--r-md) 0; }

/* ---------------------------------------------------------------- 섹션 안쪽 여백
   영역 사이 간격은 스타일이 정하지 않는다 — 리빌더 환경설정 '모듈간격'(co_gap_pc)을 따른다.
   여기서는 섹션 상자 안쪽 여백만 조금 줄인다(넓은 화면 · 900px 이하는 원래도 작다) */
@media (min-width: 901px) {
  .sec { padding: 22px 24px 24px; }
  .sec-head { padding-bottom: 14px; margin-bottom: 14px; }
}