/* =============================================================
   WSSA Korea — 고도몰 커스텀 스킨 공통 스타일 레이어
   파일: /data/skin/front/[스킨명]/css/bxsk.css
   기준 지침: GL v0.4.0  ·  작성: 0단계(공통 스타일 토큰)
   근거: 데모 styles.css(정본) + doms_backup 스킨 구조(V2) + 고도몰 template 문법(V1)

   [적용 방법]  outline/_header.html <head>에 아래 1줄을 custom.css 뒤에 추가:
   <link type="text/css" rel="stylesheet" href="{=setBrowserCache('../css/bxsk.css')}" />
   (실제 반영 전 작업스킨 사본 + 라이브 비침범 — A9)

   [네이밍 규칙]  지침 B4-4
   - 디자인 토큰(커스텀 프로퍼티): --wssa-*  (브랜드 네임스페이스, 충돌 위험 없음 → 데모값 유지)
   - 신규 클래스: bxsk-*  (기존 스킨의 #header/.gnb/.btn 등과 충돌 방지)
   - 이미지: img/[영역]/[용도]_[상태].확장자 (2배수)
   ============================================================= */

/* #bxsk-subpage(게시판/커스텀페이지 공통 id) 상단 여백 전역 제거 */
.sub_content:has(#bxsk-subpage) { padding-top: 0 !important; padding-bottom: 0 !important; }
#contents:has(#bxsk-subpage) { padding-top: 0 !important; padding-bottom: 0 !important; }



/* ---------- 0. 전역 가로 오버플로 최종 방어선 (html/body 레벨, E-032) ----------
   [UNVERIFIED:F-018] 근본 원인은 미확정 — 후보: 모바일 오프캔버스 nav drawer/backdrop(position:fixed,
   #wrap·.bxsk-footer의 overflow-x:hidden(E-030/E-031)이 못 미치는 지점) 또는 {=displaySSLSeal}/
   {=dataEggBanner()} 치환코드가 주입하는 고정폭 위젯(내용 미검증).
   html/body는 position:fixed 요소를 포함해 뷰포트 밖으로 나가는 모든 요소를 실제로 잘라내는
   유일한 레벨이라 원인 불문 확실한 방어선. 순수 추가(가역적)이며 기존 스타일 파괴 없음(A9 해당無). */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---------- (선행) #wrap 최상위 강제폭 해제 (E-047, 신규 — 진짜 근본원인) ----------
   실코드 확인(V2, layout.css:4): #wrap{min-width:1200px}이 페이지 전체(헤더~푸터 전부)를
   감싸는 최상위 래퍼에 걸려있음. #container(layout.css:241)·#contents(242)는 width 지정이
   전혀 없어(auto) → #wrap이 강제하는 1200px을 그대로 물려받음.
   결과: 뷰포트가 1200px보다 좁아도 #wrap→#container→#contents 전체가 절대 1200px 밑으로
   못 내려감 → 아래 0-a(.sub_content 반응형화)를 단독 적용해도 그 부모가 여전히 1200px라
   "100%"가 1200px로 계산돼 사실상 무효였음. 0-a는 이 조치와 "함께" 있어야 완성됨
   (0-a=자기 자신 강제폭 해제, 이 규칙=부모 체인 강제폭 해제 — 두 층 다 필요).
   과거 min-width 존재 이유(코드주석: "스크롤배너도 보이게") = E-045에서 스크롤배너 전체
   숨김 처리로 이미 소멸 → 모바일 구간에서 안전하게 해제 가능.
   [ASSUME:VX] layout.css 110~650행 구간은 전체 미확인 — #wrap을 참조하는 다른 규칙이
   더 있을 가능성 낮지만 배포 전 B6 QA로 재확인 권장. */
@media (max-width: 1199px) {
  #wrap { min-width: 0 !important; }
}



/* ---------- 0-a. vendor .sub_content 모바일 반응형 오버라이드 (E-046, 신규) ----------
   근본원인 확정(V2, 실코드+스크린샷 대조): vendor .sub_content{width:1200px;margin:0 auto}는
   반응형이 아님. 뷰포트가 1200px보다 넓을 때만 margin:auto가 정상 중앙정렬되고,
   뷰포트가 1200px보다 좁아지면(모바일) CSS 사양상 auto margin이 0으로 강제되어
   .sub_content가 좌측정렬로 바뀜. 그 순간 아래 0-b(E-036)의 calc(50% - 50vw) 공식이
   전제(부모=뷰포트 중앙정렬)를 잃고 오작동 → #bxsk-main 전체가 우측으로 수백px 밀려나
   좌측 공백 + 우측 콘텐츠 잘림 발생(사용자 모바일 스크린샷 V2 확인).
   해결: .sub_content를 1200px 미만에서 유동폭(100%)으로, 1200px 이상에서만 기존 vendor 값 복원
   → 0-b 공식이 항상 성립하는 조건(부모-뷰포트 중앙 일치)을 회복.
   [ASSUME:VX] vendor layout.css의 실제 선택자 명시도(specificity)/!important 여부 미확인 →
   안전하게 !important로 강제. 전 페이지(게시판·마이페이지 등 시스템페이지 포함) 공통 적용이라
   배포 전 B6 QA 필수(A9 대상 — 작업스킨/스테이징에서는 편집 가능, 라이브 반영은 승인 후).
   [추가수정 2026-07-09, players.html 콘솔 실측(V2)] 위 조치는 width/margin만 잡고 vendor의
   padding-left:100px는 안 건드려서 놓친 구멍이었음 — 측면영역이 "측면감춤"으로 꺼져있는데도
   vendor가 그 자리를 여전히 padding으로 예약해두고 있었음. #bxsk-subpage의 calc(50%-50vw)
   공식은 부모의 width는 탈출해도 padding까지 상쇄하진 못해 그대로 100px 밀림으로 전이됨
   (#bxsk-subpage만 left:100, 헤더/푸터는 left:0으로 실측 확정 — 서브페이지 한정 재현 이유). */
.sub_content {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (min-width: 1200px) {
  .sub_content {
    width: 1200px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------- 0-b. 우리 콘텐츠 풀블리드 탈출 (E-036) ----------
   근본원인: vendor .sub_content{width:1200px; margin:0 auto}(layout.css:5, V2)가 우리 메인/서브페이지를
   1200px 센터박스에 가둠 → 넓은 화면에서 편측 여백.
   해법: 우리 래퍼(#bxsk-main/#bxsk-subpage)만 부모 박스를 벗어나 뷰포트 풀폭으로 확장.
   vendor 기본페이지(상품목록/마이페이지 등)는 우리 래퍼가 없으므로 영향 0(A6).
   내부 콘텐츠는 .bxsk-container(max-width 중앙정렬)로 정렬됨. overflow-x 안전망(E-030~032)이 부작용 흡수.
   ※ E-037(푸터를 이 규칙에 포함)은 전제오류로 철회 — 푸터는 .sub_content가 아닌 #footer_wrap 소속이라
     1200px 제약이 아니라 #footer_wrap의 left:100px가 원인이었음(E-038에서 해결). */
#bxsk-main, #bxsk-subpage, #bxsk-auth, #bxsk-join {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------- 0-c. 푸터 편측 밀림 근본해결 (E-038) ----------
   #footer_wrap이 라이브 커스텀 CSS에서 position:relative + left:100px를 받아 통째로 오른쪽 100px 밀림
   (콘솔 computed style V2 확정: footerWrap_left='100px', position='relative').
   #container는 left:0인데 #footer_wrap만 어긋나 왼쪽 빈 영역 발생 → left:0으로 리셋해 #container와 정렬.
   라이브 커스텀 CSS 로드순서 불명이라 !important로 확정(정답값은 명백히 0). 순수 1속성 리셋(가역적). */
#footer_wrap { left: 0 !important; }

/* ---------- 1. 색상 (Brand Palette) ---------- */
:root {
  --wssa-navy: #0A2E6E;
  --wssa-navy-dark: #061F4D;
  --wssa-navy-deep: #04153A;
  --wssa-blue: #1E5BBF;
  --wssa-blue-light: #3D7BDB;
  --wssa-cyan: #00A4E4;
  --wssa-yellow: #FFC72C;
  --wssa-yellow-deep: #E8AE00;
  --wssa-red: #D7263D;
  --wssa-red-dark: #A8001E;
  --wssa-green: #1F8A5B;
  --wssa-purple: #6D3FA6; /* [2026-08-06 재추가, F-160 재발] 승급대회 색상 — E-320(2026-08-05)에서
                              한 번 추가했으나 라이브 반영이 안 됐던 것으로 추정, 동일 값으로 재적용 */

  /* Neutrals */
  --gray-50: #F7F9FC;  --gray-100: #EEF2F7; --gray-200: #DCE3EC;
  --gray-300: #C2CCDA; --gray-400: #95A3B6; --gray-500: #6B7A91;
  --gray-600: #4D5A6E; --gray-700: #2F394B; --gray-800: #1C2331; --gray-900: #0F141E;

  /* Semantic (Light) */
  --bg: #FFFFFF;       --bg-soft: #F7F9FC;  --bg-muted: #EEF2F7;
  --surface: #FFFFFF;  --surface-alt: #F7F9FC;
  --border: #DCE3EC;   --border-strong: #C2CCDA;
  --text: #0F141E;     --text-muted: #4D5A6E; --text-soft: #6B7A91;

  /* ---------- 2. 글꼴 (기본 제공 폰트 내 — 외부 폰트 업로드 미지원, B4) ---------- */
  --font-sans: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'D2Coding', Menlo, monospace;

  /* ---------- 3. 레이아웃 (본문 최대 너비) ---------- */
  --container: 1240px;
  --gutter: 16px;          /* 모바일 기준 좌우 여백 */

  /* Radius / Shadow */
  --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 12px;
  --shadow-sm: 0 1px 2px rgba(15,20,30,.04), 0 1px 1px rgba(15,20,30,.04);
  --shadow-md: 0 2px 6px rgba(15,20,30,.06), 0 1px 2px rgba(15,20,30,.04);
  --shadow-lg: 0 8px 24px rgba(15,20,30,.08), 0 2px 6px rgba(15,20,30,.04);
}

/* 다크 모드는 데모 기능이나 고도몰 스토어에선 선택사항 → 후순위(F로 보류).
   필요 시 [data-theme="dark"] 토큰 블록을 이 자리에 추가. */

/* ---------- 베이스 (스코프 한정: bxsk 영역만 건드림, 기존 스킨 reset 보존) ---------- */
.bxsk-scope, .bxsk-scope * { box-sizing: border-box; }
.bxsk-scope {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;      /* 한글 단어 중간 줄바꿈 방지 (모바일 핵심 수정) */
  overflow-wrap: break-word; /* 긴 URL 등 불가피한 토큰만 예외적으로 줄바꿈 */
}
.bxsk-scope img { max-width: 100%; display: block; }

/* 전역 가로 오버플로 안전망 — slick.js 등 JS가 인라인으로 폭을 주입하는 요소(예: .slick-track)는
   정적 CSS 점검으로 100% 잡기 어려움. #wrap에 안전장치를 걸어 어떤 요소가 넘치든
   모바일 브라우저가 전체 페이지를 축소(zoom-out)하는 현상을 원천 차단. (E-030) */
#wrap { overflow-x: hidden; max-width: 100vw; }

/* [FIX 2026-07-09] 위 E-030은 "줌아웃" 증상만 막고, 소스 쪽에서 실제로 잘라주진 않아 —
   players.html 콘솔 실측(V2)에서 .slick-track이 3510px(뷰포트 390px)로 확인됨. 기존엔
   .bxsk-hero/.bxsk-promo/.bxsk-hero-widget(메인페이지 배너류)에만 .slick-list 클리핑이 있었는데,
   헤더 쪽(검색창 위젯 등 전 페이지 공통 요소)의 slick은 그 범위 밖이라 안 걸리고 있었음.
   slick-list는 원래 항상 overflow:hidden이어야 정상 동작이라 전역으로 걸어도 부작용 없음. */
.slick-list { overflow: hidden; }

/* 컨테이너 (모바일 우선: 풀폭 → 데스크톱에서 최대너비) */
.bxsk-container { width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px)  { .bxsk-container { padding: 0 20px; } }
@media (min-width: 1280px) { .bxsk-container { max-width: var(--container); } }

/* ---------- 4. 버튼 (버튼명은 본문 크기에 연동, B4) ---------- */
.bxsk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 18px; font-size: 14px; font-weight: 700;
  border: 1px solid transparent; border-radius: var(--r-md);
  letter-spacing: -.01em; cursor: pointer; transition: all .15s;
  font-family: inherit; min-height: 44px;           /* 모바일 터치 타깃 ≥44px */
}
.bxsk-btn-primary { background: var(--wssa-navy); color: #fff; }
.bxsk-btn-primary:hover { background: var(--wssa-navy-dark); }
.bxsk-btn-cta { background: var(--wssa-red); color: #fff; box-shadow: 0 6px 20px rgba(215,38,61,.35); }
.bxsk-btn-cta:hover { background: var(--wssa-red-dark); }
.bxsk-btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.bxsk-btn-outline:hover { border-color: var(--wssa-navy); color: var(--wssa-navy); }
.bxsk-btn-sm { padding: 8px 12px; font-size: 12px; min-height: 36px; }
.bxsk-btn-lg { padding: 14px 28px; font-size: 15px; }
@media (min-width: 768px) { .bxsk-btn { padding: 10px 18px; min-height: 0; } }

/* ---------- 5. 슬라이드 (배너 화살표 / 페이징 점) ---------- */
.bxsk-slide-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center; color: #fff;
  background: rgba(0,0,0,.2); transition: all .15s;
}
.bxsk-slide-arrow:hover { background: rgba(255,255,255,.12); }
.bxsk-slide-dots { display: flex; gap: 8px; }
.bxsk-slide-dots .dot { width: 28px; height: 3px; background: rgba(255,255,255,.25); cursor: pointer; transition: background .15s; }
.bxsk-slide-dots .dot.active { background: var(--wssa-yellow); }

/* ---------- 공용 태그/뱃지 (데모 .tag → bxsk-tag) ---------- */
.bxsk-tag { display: inline-flex; align-items: center; padding: 3px 8px; font-size: 11px; font-weight: 700; border-radius: var(--r-sm); }
.bxsk-tag.navy { background: var(--wssa-navy); color: #fff; }
.bxsk-tag.blue { background: var(--wssa-blue); color: #fff; }
.bxsk-tag.yellow { background: var(--wssa-yellow); color: var(--wssa-navy); }
.bxsk-tag.red { background: var(--wssa-red); color: #fff; }
.bxsk-tag.purple { background: var(--wssa-purple); color: #fff; }
.bxsk-tag.green { background: var(--wssa-green); color: #fff; }
.bxsk-tag.gray { background: var(--gray-200); color: var(--gray-700); }

/* 헤더/푸터/메인 등 컴포넌트 스타일은 0단계 ② 마크업과 함께 추가됩니다. */


/* =============================================================
   0단계 ② — 헤더 / 푸터 컴포넌트 (모바일 우선, 데스크톱 ≥1024px)
   ============================================================= */

/* 헤더 고정: 기존 JS padding 핸들링 대신 CSS sticky (레이아웃 점프 방지) */
#header_warp { position: sticky; top: 0; z-index: 50; background: var(--surface); }

/* ---------- 공지 티커 ---------- */
.bxsk-header .bxsk-notice-ticker { display: none; }
@media (min-width: 1024px) {
  .bxsk-header .bxsk-notice-ticker {
    display: block; background: var(--bg-soft); border-bottom: 1px solid var(--border);
    font-size: 12px; color: var(--text-soft);
  }
}

/* [FIX 2026-07-14 최종 — 텍스트 공지 티커로 복귀] 이미지 배너(slick 기반, bannerCode 3302919612) 관련
   사이징 문제(float:left shrink-to-fit 트랩, 스케일링 불가 등 위 이력 전부)를 근본적으로 피하기 위해
   원래 위젯(board/board_article_scrolling, vTicker.js 기반)으로 standard.html의 includeWidget 호출을
   되돌림(사용자 확인). 이 위젯은 이미지가 없는 순수 텍스트 세로 스크롤 리스트라 오늘 겪은 문제들이
   구조적으로 성립하지 않음 — 크롭·센터정렬·해상도 이슈 전부 무관.
   [DRAFT — 아직 실제 렌더링 HTML로 검증 안 됨(VX), 템플릿 소스(board/_board_article_scrolling.php)의
   클래스명(notice_rolling / btn_notice_rolling / js_notice_list)만 근거로 작성. 벤더 layout.css에 이미
   `.notice_rolling{width:280px}` 같은 구식 좁은 폭 기본값이 있어 우리 티커 바에 맞게 재정의함.
   staging 반영 후 콘솔로 실제 마크업 확인 필요.
   ▶ 되돌리려면(이미지 배너 재사용): standard.html의 includeWidget을 다시 proc/_slider_banner.html로
   바꾸고, 이 블록 대신 이전 커밋의 img 1024×45 고정 사이즈(A안) 규칙을 복원. */
.bxsk-header .bxsk-notice-ticker > * {
  max-width: var(--container);
  margin: 0 auto;
  padding: 6px 20px;
}
.bxsk-header .bxsk-notice-ticker .notice_rolling {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  float: none; width: 100%; height: auto;
}
.bxsk-header .bxsk-notice-ticker .notice_rolling ul {
  float: none; width: 100%; height: 18px; overflow: hidden; margin: 0; padding: 0; list-style: none;
}
.bxsk-header .bxsk-notice-ticker .notice_rolling li a {
  display: block; color: var(--text-soft); font-size: 12px; line-height: 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bxsk-header .bxsk-notice-ticker .notice_rolling li a:hover { color: var(--wssa-navy); }
.bxsk-header .bxsk-notice-ticker .btn_notice_rolling {
  float: none; flex: 0 0 auto; display: flex; gap: 4px; padding: 0;
}
.bxsk-header .bxsk-notice-ticker .btn_notice_rolling a { display: inline-flex; width: 18px; height: 18px; opacity: .6; }
.bxsk-header .bxsk-notice-ticker .btn_notice_rolling a:hover { opacity: 1; }
.bxsk-header .bxsk-notice-ticker .btn_notice_rolling img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Utility bar (데스크톱 전용) ---------- */
.bxsk-utility { display: none; background: var(--wssa-navy-deep); color: rgba(255,255,255,.85); }
@media (min-width: 1024px) { .bxsk-utility { display: block; } }
.bxsk-utility-inner { display: flex; justify-content: flex-end; }
.bxsk-util-links { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; height: 34px; }
.bxsk-util-links a { color: rgba(255,255,255,.78); font-size: 12px; font-weight: 600; }
.bxsk-util-links a:hover { color: #fff; }
.bxsk-lang { display: inline-flex; gap: 2px; background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px; }
.bxsk-lang span { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6); cursor: pointer; }
.bxsk-lang span.active { background: var(--wssa-yellow); color: var(--wssa-navy); }

/* ---------- Main bar (단일 행: 로고 | 메뉴 | 검색·장바구니) ---------- */
.bxsk-headbar { background: var(--surface); border-bottom: 1px solid var(--border); position: relative; }
.bxsk-headbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 58px; }
@media (min-width: 1024px) { .bxsk-headbar-inner { gap: 28px; height: 84px; justify-content: flex-start; } }

.bxsk-navtoggle { width: 40px; height: 40px; display: grid; place-content: center; gap: 5px; flex-shrink: 0; }
.bxsk-navtoggle span { display: block; width: 22px; height: 2px; background: var(--text); transition: .2s; }
@media (min-width: 1024px) { .bxsk-navtoggle { display: none; } }

.bxsk-logo { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.bxsk-logo img { max-height: 28px; max-width: 160px; width: auto; height: auto; object-fit: contain; }
/* [FIX 2026-07-09] 로고가 실제로는 업로드 배너 이미지(가로 비율 미상) — width:auto만 있으면 원본이
   넓을 때 헤더 폭을 초과해 GNB·검색창이 밀려나옴(실마크업 확인). max-width로 상한을 걸어 비율 유지한 채 축소. */
@media (min-width: 1024px) { .bxsk-logo { flex: 0 0 auto; } .bxsk-logo img { max-height: 46px; max-width: 220px; } }

/* 우측 액션: 검색 + 장바구니 — 아이콘폰트 로딩 실패해도 보이도록 윤곽선 부여 (모바일 헤더 깨짐 핵심수정, E-029) */
.bxsk-head-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bxsk-head-actions .bxsk-searchtoggle { width: 36px; height: 36px; display: grid; place-content: center; font-size: 16px; color: var(--text); border: 1px solid var(--border); border-radius: 50%; flex-shrink: 0; }
.bxsk-cart { position: relative; width: 36px; height: 36px; display: grid; place-content: center; font-size: 17px; color: var(--text); border: 1px solid var(--border); border-radius: 50%; flex-shrink: 0; }
@media (min-width: 1024px) { .bxsk-head-actions .bxsk-searchtoggle, .bxsk-cart { width: 40px; height: 40px; font-size: 19px; } }
.bxsk-cart-cnt {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--wssa-red); color: #fff; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; line-height: 17px; text-align: center; font-weight: 700;
}

/* 검색 박스 */
/* 검색창 vendor 고정폭(333px) 제거 — layout.css 원본 확인, 우리 flex 레이아웃과 충돌 소지 */
#header .bxsk-search .top_search .top_text_cont { width: 100% !important; }
/* flex 자식 min-width:auto 기본값 때문에 검색 인풋이 230px 부모를 뚫고 나가는 문제 방지 (B13-2 패턴) */
.bxsk-searchform { min-width: 0; }
#header .bxsk-search .top_search .top_text_cont { min-width: 0; }
#header .bxsk-search .top_search .top_text_cont .top_srarch_text { min-width: 0; }

.bxsk-search { display: flex; align-items: center; gap: 6px; }
.bxsk-global-sel { flex-shrink: 0; }
.bxsk-searchform { flex: 1; }

/* GNB 기본 */
.bxsk-menu { list-style: none; margin: 0; padding: 0; }
.bxsk-menu > li > a { display: block; font-weight: 700; color: var(--text); }
.bxsk-submenu-row { list-style: none; margin: 0; padding: 0; display: flex; }
.bxsk-submenu-row li a { display: block; }

/* ===== 데스크톱(≥1024): 2단 탭바 — 1행 중앙정렬 메뉴, 2행은 해당 탭 hover 시 드롭다운으로 노출 (2026-07-09 메뉴 개편) ===== */
@media (min-width: 1024px) {
  .bxsk-gnb { flex: 1; position: relative; }
  .bxsk-gnb-inner { display: block; }
  .bxsk-allcate { display: none; }
  .bxsk-tabbar-row1 .bxsk-menu { display: flex; justify-content: center; gap: 4px; }
  .bxsk-tabbar-row1 .bxsk-menu > li > a { padding: 0 16px; height: 84px; display: flex; align-items: center; font-size: 16px; }
  .bxsk-tabbar-row1 .bxsk-menu > li > a:hover { color: var(--wssa-blue); }
  .bxsk-tabbar-row2 { position: absolute; left: 0; right: 0; top: 84px; z-index: 100; }
  .bxsk-submenu-row {
    display: none; justify-content: center; gap: 28px; padding: 14px 0;
    background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--wssa-navy);
    box-shadow: var(--shadow-lg);
  }
  .bxsk-submenu-row li a { font-size: 13px; font-weight: 700; color: var(--text-muted); }
  .bxsk-submenu-row li a:hover { color: var(--wssa-navy); }
  .bxsk-submenu-row li.all { display: none; } /* 데스크톱은 탭 본문 클릭으로 이미 전체이동 가능 — "전체" 칩 불필요 */
  /* 6개 탭 각각 hover 매칭 (:has() 지원 브라우저 — Chrome/Safari/Firefox 2023+로 폭넓게 지원) */
  .bxsk-tabbar:has(a[data-tab="about"]:hover) [data-for="about"],
  .bxsk-tabbar:has([data-for="about"]:hover) [data-for="about"] { display: flex; }
  .bxsk-tabbar:has(a[data-tab="competitions"]:hover) [data-for="competitions"],
  .bxsk-tabbar:has([data-for="competitions"]:hover) [data-for="competitions"] { display: flex; }
  .bxsk-tabbar:has(a[data-tab="records"]:hover) [data-for="records"],
  .bxsk-tabbar:has([data-for="records"]:hover) [data-for="records"] { display: flex; }
  .bxsk-tabbar:has(a[data-tab="players"]:hover) [data-for="players"],
  .bxsk-tabbar:has([data-for="players"]:hover) [data-for="players"] { display: flex; }
  .bxsk-tabbar:has(a[data-tab="education"]:hover) [data-for="education"],
  .bxsk-tabbar:has([data-for="education"]:hover) [data-for="education"] { display: flex; }
  .bxsk-tabbar:has(a[data-tab="news"]:hover) [data-for="news"],
  .bxsk-tabbar:has([data-for="news"]:hover) [data-for="news"] { display: flex; }
  .bxsk-search { width: 230px; }
  .bxsk-head-actions .bxsk-searchtoggle { display: none; }
  .bxsk-nav-backdrop { display: none; }
}

/* ===== 모바일(<1024): 2단 탭바 — 1행 대분류 6개, 탭 탭하면 2행에 해당 서브메뉴 펼침(JS 토글) (2026-07-09 메뉴 개편) ===== */
@media (max-width: 1023px) {
  .bxsk-navtoggle { display: none; } /* 드로어 폐지로 햄버거 버튼 불필요 */
  .bxsk-nav-backdrop { display: none !important; }

  /* headbar를 2행으로: 1행(로고·검색·장바구니)은 그대로, GNB를 2행 전체폭으로 줄바꿈 */
  .bxsk-headbar-inner {
    flex-wrap: wrap;
    height: auto;    /* [FIX 2026-07-09] 베이스 규칙의 고정 height:58px이 2행 줄바꿈을 못 담아 GNB가 찌그러지던 버그 */
    min-height: 58px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .bxsk-gnb {
    order: 3; flex-basis: 100%; width: 100%;
    position: static; background: transparent; box-shadow: none; z-index: auto;
    transform: none; visibility: visible; transition: none; overflow: visible;
    border-top: 1px solid var(--border);
  }
  .bxsk-gnb-inner { padding: 0; }
  .bxsk-allcate { display: none; }

  .bxsk-tabbar-row1 { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .bxsk-tabbar-row1::-webkit-scrollbar { display: none; }
  .bxsk-tabbar-row1 .bxsk-menu { display: flex; gap: 0; }
  .bxsk-tabbar-row1 .bxsk-menu > li { flex: 0 0 auto; }
  .bxsk-tabbar-row1 .bxsk-menu > li > a {
    padding: 12px 16px; white-space: nowrap; font-size: 15px; font-weight: 700;
    border-bottom: 3px solid transparent;
  }
  .bxsk-tabbar-row1 .bxsk-menu > li.active > a { color: var(--wssa-navy); border-bottom-color: var(--wssa-navy); }

  .bxsk-tabbar-row2 { background: var(--bg-soft); }
  .bxsk-tabbar-row2:not(:empty) { border-top: 1px solid var(--border); }
  .bxsk-submenu-row { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; padding: 8px 12px; }
  .bxsk-submenu-row::-webkit-scrollbar { display: none; }
  .bxsk-submenu-row[hidden] { display: none; }
  .bxsk-submenu-row li { flex: 0 0 auto; }
  .bxsk-submenu-row li a {
    padding: 6px 14px; white-space: nowrap; font-size: 13px; font-weight: 700;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  }
  .bxsk-submenu-row li.all a { background: var(--wssa-navy); color: #fff; border-color: var(--wssa-navy); }

  /* 검색: 헤더 아래 드롭다운 토글 */
  .bxsk-search {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background: var(--bg-soft); border-bottom: 1px solid var(--border);
    max-height: 0; overflow: hidden; padding: 0 16px; transition: max-height .25s ease;
  }
  .bxsk-header.bxsk-search-open .bxsk-search { max-height: 120px; padding: 12px 16px; }
}

/* =============================================================
   푸터
   ============================================================= */
.bxsk-footer {
  background: var(--wssa-navy-deep);
  color: rgba(255,255,255,.72);
  padding-top: 48px;     /* ① 푸터 배경 시작 ~ 브랜드 콘텐츠 위쪽 여백 (모바일) */
  padding-right: 0;
  padding-bottom: 28px;  /* ② 푸터 맨 아래(저작권 표기 등) ~ 배경 끝 여백 (모바일) */
  padding-left: 0;
  margin-top: 0;         /* 위 섹션과 배경 사이 간격 — 0 유지 권장(E-039, 밖에 빈틈 생김) */
  font-size: 13px;
  overflow-x: hidden;
  max-width: 100vw;
}
@media (min-width: 1024px) {
  .bxsk-footer {
    padding-top: 64px;    /* ① 데스크톱 값 */
    padding-bottom: 32px; /* ② 데스크톱 값 */
  }
}

/* foot-top 안쪽 간격 — E-041/E-042/E-043 이력. 아래 ③④ 숫자만 바꿔서 조절 가능 */
.bxsk-foot-top {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 48px;     /* ③ 브랜드·메뉴 영역 위쪽 여백 (①과 더해짐 → 총 위 여백 = ①+③ = 96px, 모바일) */
  padding-bottom: 48px;  /* ④ 브랜드·메뉴 영역 ~ 구분선(border-bottom) 사이 여백 (모바일) */
  border-bottom: 1px solid rgba(255,255,255,.1);
  min-width: 0;
}
@media (min-width: 1024px) {
  .bxsk-foot-top {
    flex-direction: row;
    justify-content: space-between;
    gap: 48px;
    padding-top: 64px;    /* ③ 데스크톱 값 (총 위 여백 = ①+③ = 128px) */
    padding-bottom: 64px; /* ④ 데스크톱 값 */
  }
}
/* flex 자식 오버플로 방어 — min-width:0 없으면 긴 텍스트가 안 줄어 푸터를 오른쪽으로 밀어냄
   (vendor #footer{overflow:hidden}(layout.css:458, V2)이 초과분을 잘라 왼쪽 여백 발생). E-035 */
.bxsk-foot-brand { flex: 1 1 auto; min-width: 0; }
@media (min-width: 1024px) { .bxsk-foot-brand { max-width: 460px; } }
.bxsk-foot-links { min-width: 0; }
.bxsk-foot-desc { overflow-wrap: break-word; }
.bxsk-foot-logo img { height: 36px; width: auto; }
.bxsk-foot-desc { max-width: 380px; line-height: 1.7; margin: 14px 0; font-size: 12.5px; }
.bxsk-foot-sns { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; }
.bxsk-foot-sns a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-content: center; color: rgba(255,255,255,.75); }
.bxsk-foot-sns a:hover { background: var(--wssa-yellow); color: var(--wssa-navy); }

.bxsk-foot-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (min-width: 1024px) { .bxsk-foot-links { display: flex; gap: 48px; } }
.bxsk-foot-col h4 { color: #fff; font-size: 13px; font-weight: 800; margin: 0 0 10px; }
.bxsk-foot-col a { display: block; padding: 4px 0; color: rgba(255,255,255,.62); font-size: 12.5px; }
.bxsk-foot-col a:hover { color: var(--wssa-yellow); }

.bxsk-foot-info { padding: 22px 0; color: rgba(255,255,255,.6); }
.bxsk-foot-addr { font-style: normal; margin-bottom: 12px; }
.bxsk-foot-addr strong { color: #fff; margin-right: 8px; }
.bxsk-foot-biz { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; min-width: 0; }
.bxsk-foot-biz div { display: flex; gap: 6px; min-width: 0; }
.bxsk-foot-biz dd { overflow-wrap: break-word; word-break: break-all; }
.bxsk-foot-biz dt { color: rgba(255,255,255,.45); margin: 0; }
.bxsk-foot-biz dd { margin: 0; color: rgba(255,255,255,.72); }
.bxsk-foot-biz a { color: inherit; }

.bxsk-foot-certify { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 0; }
.bxsk-foot-certify img { display: inline-block; }
.bxsk-copyright { font-size: 11px; color: rgba(255,255,255,.5); font-family: var(--font-mono); letter-spacing: .02em; }
.bxsk-copyright strong { color: rgba(255,255,255,.8); }
.bxsk-foot-mobile { margin-top: 16px; text-align: center; }
.bxsk-foot-mobile img { display: inline-block; }


/* =============================================================
   0단계 ②-fix — 위젯 정규화 (실측 반영, 2026-06-24)
   기존 스킨 CSS(#header ...)가 위젯 마크업을 깨는 부분만 동일 특정도로 교정.
   ============================================================= */

/* (1) 검색 위젯: vendor의 position:absolute/float 무력화 → 검색 밴드 안으로 복귀 */
#header .bxsk-search .top_search {
  position: static; float: none; top: auto; right: auto; z-index: auto;
  width: 100%; background: transparent;
}
#header .bxsk-search .bxsk-searchform { position: relative; }
#header .bxsk-search .top_search fieldset { border: 0; margin: 0; padding: 0; }
#header .bxsk-search .top_search .top_text_cont {
  display: flex; align-items: center; background: #fff;
  border: 2px solid var(--wssa-navy); border-radius: var(--r-md); overflow: hidden;
}
#header .bxsk-search .top_search .top_text_cont .top_srarch_text {
  flex: 1; width: auto; height: 42px; padding: 0 14px; box-sizing: border-box; border: 0;
}
/* [FIX 2026-07-09] btn_top_srarch는 <input type="image">라서 CSS로 크기를 안 잡으면 원본 이미지
   (btn_top_search.png) 크기 그대로 렌더됨 — flex:0 0 auto(안 줄어듦)라서 그 크기만큼 검색창 폭을
   그대로 초과시켜 오른쪽으로 밀려나왔음(사용자 실화면+실마크업 확인). 아이콘 크기로 명시 제약. */
#header .bxsk-search .top_search .top_text_cont .btn_top_srarch {
  position: static; flex: 0 0 auto; margin: 0 8px;
  width: 18px; height: 18px; padding: 0; border: 0; cursor: pointer;
}
#header .bxsk-search .top_search .search_cont {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 200; margin-top: 4px;
  border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}

/* (2) 전체카테고리(ALL CATEGORY): 데모 디자인에 없는 쇼핑몰 전용 요소 → 숨김.
       카테고리 접근은 스토어 드롭다운(category_side)으로 충분. (E-016)
       전체카테고리 메가메뉴를 다시 쓰려면 아래 한 줄을 제거. */
#header .bxsk-allcate { display: none; }

/* (3) 스토어 드롭다운 안의 category_side 슬라이더: PREV/NEXT 화살표 숨기고 목록만 */
#header .bxsk-store-cate .gnb_left,
#header .bxsk-store-cate .gnb_right { display: none; }
#header .bxsk-store-cate .gnb_menu_box .depth0 > li > a { display: block; padding: 9px 16px; white-space: nowrap; color: var(--text); }
#header .bxsk-store-cate .gnb_menu_box .depth0 > li > a:hover { color: var(--wssa-blue); background: var(--bg-soft); }

/* (4) 상단 흰 여백 정리 — 데모엔 없는 vendor 빈 영역 + 상단 스크롤 공지.
   .top_area / 빈 #bnr_pop = vendor 빈 div(여백·이벤트 띠배너).
   .bxsk-notice-ticker = 상단 스크롤 공지(기능). 데모처럼 네이비 바가 맨 위에 오도록 숨김.
   ▶ 되돌리기: 해당 줄만 제거. 스크롤 공지를 살리려면 .bxsk-notice-ticker 줄만 빼면 됨. */
.top_area { display: none; }
#bnr_pop:empty { display: none; }
.bxsk-notice-ticker { display: none; }


/* =============================================================
   1단계 — 메인 (모바일 우선)
   ============================================================= */
.bxsk-main { padding-bottom: 48px; }
.bxsk-main section { margin-top: 28px; }
@media (min-width: 1024px) { .bxsk-main section { margin-top: 40px; } }

/* 섹션 헤더 공통 */
.bxsk-sec-head, .bxsk-board-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.bxsk-sec-head h3, .bxsk-board-head h3 { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.bxsk-sec-head h3::before, .bxsk-board-head h3::before { content: ''; display: inline-block; width: 4px; height: 16px; background: var(--wssa-navy); border-radius: 2px; margin-right: 8px; vertical-align: -2px; }
.bxsk-more { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.bxsk-more:hover { color: var(--wssa-blue); }

/* 1. 히어로 슬라이더 — slick fade 내부 레이아웃(track/slide)은 건드리지 않는다.
   (이전 track/slide width:100%!important → 활성 슬라이드가 left:-Npx로 화면 밖으로 밀려 "사라짐"+거대 빈공간)
   wrap/이미지만 반응형으로 처리. */
.bxsk-hero { margin-top: 0; background: var(--bg-soft); }
.bxsk-hero-inner { max-width: var(--container); margin: 0 auto; }
.bxsk-hero [class*="slider-banner-"] { width: 100% !important; height: auto !important; }
.bxsk-hero .slick-list { overflow: hidden; }
.bxsk-hero .slick-slide img { width: 100% !important; height: auto !important; display: block; }
.bxsk-hero .slick-dots { bottom: 12px; }

/* 2. 공지/대회 보드 */
.bxsk-boards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .bxsk-boards { grid-template-columns: 1fr 1fr; gap: 24px; } }
.bxsk-board-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 18px 8px; background: var(--surface); }
.bxsk-board-list { list-style: none; margin: 0; padding: 0; }
.bxsk-board-list li { border-top: 1px dashed var(--border); }
.bxsk-board-list li:first-child { border-top: 0; }
.bxsk-board-list li a { display: flex; align-items: center; gap: 10px; padding: 11px 2px; }
.bxsk-bd-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text); }
.bxsk-board-list li a:hover .bxsk-bd-subject { color: var(--wssa-blue); }
.bxsk-bd-date { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }

/* 3. 퀵메뉴 */
.bxsk-quickmenu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 768px) { .bxsk-quickmenu { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.bxsk-quick { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: all .15s; }
.bxsk-quick:hover { border-color: var(--wssa-navy); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bxsk-quick-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-content: center; background: var(--bg-soft); color: var(--wssa-navy); font-size: 20px; }
.bxsk-quick:hover .bxsk-quick-ico { background: var(--wssa-navy); color: #fff; }
.bxsk-quick strong { font-size: 13px; font-weight: 700; color: var(--text); }

/* 4·6. 프로모/슬라이드 배너 */
.bxsk-promo { text-align: center; }
.bxsk-promo img { max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--r-md); }
.bxsk-promo [class*="slider-banner-"] { width: 100% !important; height: auto !important; }
.bxsk-promo .slick-slide, .bxsk-promo .slick-list, .bxsk-promo .slick-track { width: 100% !important; max-width: 100% !important; }
.bxsk-promo .slick-slide img { width: 100% !important; height: auto !important; }

/* 5·6. 스토어 상품진열 — _goods_display_main 실제 구조: .item_gallery_type ul > li[style=width:25%] */
.bxsk-goods-wrap .goods_list_tit { display: none; }   /* 위젯 내부 제목 숨김(섹션 헤더와 중복) */
.bxsk-goods-wrap .item_gallery_type ul {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 12px;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 768px) { .bxsk-goods-wrap .item_gallery_type ul { grid-template-columns: repeat(4, 1fr); gap: 26px 18px; } }
.bxsk-goods-wrap .item_gallery_type li { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.bxsk-goods-wrap .item_photo_box img { width: 100%; height: auto; }
.bxsk-goods-wrap .item_name { display: block; font-size: 13px; line-height: 1.45; color: var(--text); }
.bxsk-goods-wrap .item_price { font-size: 14px; color: var(--wssa-navy); }
.bxsk-goods-wrap .item_soldout_bg { font-size: 12px; }
.bxsk-goods-wrap img { max-width: 100%; height: auto; }

/* (전역) 가로 오버플로 차단 — 데모에 없는 레거시 우측 스크롤배너 정리 (E-018, 되돌리기 쉬움)
   #scroll_right{right:-142px}가 뷰포트 밖으로 뻗어 가로 스크롤 유발 → 숨김.
   CTA(자격증갱신/Q&A 등)는 추후 메인 섹션으로 재배치 가능. */
.scroll_wrap { display: none !important; }


/* =============================================================
   1단계 메인 — 추가 섹션 (퀵스탯 / 영상 / 갤러리 / 스폰서)
   ============================================================= */

/* 2. 퀵스탯 */
.bxsk-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 768px) { .bxsk-stats { grid-template-columns: repeat(4, 1fr); } }
.bxsk-stat { background: var(--surface); padding: 22px 12px; text-align: center; }
.bxsk-stat strong { display: block; font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--wssa-navy); line-height: 1; }
.bxsk-stat strong em { font-style: normal; color: var(--wssa-yellow-deep); }
.bxsk-stat span { display: block; margin-top: 8px; font-size: 12px; color: var(--text-soft); }
@media (min-width: 768px) { .bxsk-stat strong { font-size: 34px; } }

/* 6. 영상 하이라이트 */
.bxsk-video-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .bxsk-video-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.bxsk-video-card { display: block; }
.bxsk-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: center/cover no-repeat; background-color: var(--gray-200); }
.bxsk-video-thumb.bxsk-video-ph { background: linear-gradient(135deg, var(--wssa-navy), var(--wssa-blue)); }
.bxsk-video-thumb i { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; display: grid; place-content: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 16px; padding-left: 3px; }
.bxsk-video-card:hover .bxsk-video-thumb i { background: var(--wssa-red); }
.bxsk-video-card strong { display: block; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.4; }

/* 7. 포토 갤러리 */
.bxsk-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 768px) { .bxsk-gallery-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; } }
.bxsk-gallery-tile { display: block; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--bg-muted); }
.bxsk-gallery-tile span { width: 100%; height: 100%; display: grid; place-content: center; color: var(--gray-300); font-size: 22px; transition: all .15s; }
.bxsk-gallery-tile:hover span { background: var(--wssa-navy); color: #fff; }

/* 8. 스폰서(공식 파트너) — index.html 인라인 <style>에서 이전 (E-044).
   ※ 기존 .bxsk-sponsor-list(카드형 그리드)는 실마크업에서 안 쓰이는 데모 잔재라 이전 없이 제거함
   (실제 마크업은 .sponsors > .sponsors-row.bxsk-sponsor-imgs 구조, E-025 이후 사용 중).
   아래 ①②③④ 숫자만 바꿔서 조절 가능. */
#bxsk-main .bxsk-sponsors-title { text-align: center; font-size: 11px; font-weight: 800; color: var(--text-soft); letter-spacing: .2em; margin-bottom: 20px; } /* ③ 타이틀 ~ 로고 목록 사이 여백 */
#bxsk-main .sponsors {
  padding-top: 20px;     /* ① 위 여백(구분선 제거, 캔버스 배경 대비로만 구분 — 2026-07-09, 전체 간격 축소로 재조정) */
  padding-bottom: 0px;  /* ② 로고 목록 아래 ~ 섹션 끝 여백 */
}
#bxsk-main .sponsors-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } /* ④ 로고 사이 가로 간격 */
#bxsk-main .bxsk-sponsor-imgs { list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
#bxsk-main .bxsk-sponsor-imgs li { display: flex; flex: 0 1 auto; }
/* 모바일 우선: 로고 원본이 136px 고정이라 좁은 화면에서 줄바꿈이 들쭉날쭉 → 모바일은 작게, 데스크톱에서 원래 크기(2026-07-09, 사용자 실화면 피드백) */
#bxsk-main .bxsk-sponsor-imgs img { height: 44px; width: auto; max-width: 96px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: all .15s; }
#bxsk-main .bxsk-sponsor-imgs a:hover img { filter: none; opacity: 1; }
@media (min-width: 640px) { #bxsk-main .sponsors-row { gap: 28px 32px; } #bxsk-main .bxsk-sponsor-imgs img { height: 72px; max-width: 130px; } }
@media (min-width: 1024px) { #bxsk-main .bxsk-sponsor-imgs img { height: 136px; max-width: 180px; } }


/* =============================================================
   F-007 — GNB 커스텀 서브페이지 공용 컴포넌트 (대회/기록·랭킹/선수/교육)
   htmid 메커니즘 [V1: guide.godo.co.kr 디자인#11] main/html.php?htmid=wssa/xxx.html
   ============================================================= */
.bxsk-subpage { padding-bottom: 56px; }

/* 페이지 히어로 밴드 */
.bxsk-page-hero { background: var(--wssa-navy); color: #fff; padding: 40px 0; margin-bottom: 32px; }
.bxsk-page-hero h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.bxsk-page-hero p { font-size: 13.5px; color: rgba(255,255,255,.75); line-height: 1.5; max-width: 560px; }
@media (min-width: 1024px) { .bxsk-page-hero { padding: 56px 0; } .bxsk-page-hero h1 { font-size: 30px; } .bxsk-page-hero p { font-size: 14.5px; } }
/* [2026-09-16] 서브페이지 히어로 브레드크럼(홈 › 협회 › 현재) — 링크가 기본 검정으로 뜨던 것을 전 페이지 공통 흰색으로(사용자 요청: insa/organization/articles/local_01/localjoin 등) */
.bxsk-page-hero .bxsk-breadcrumb { font-size: 12.5px; margin-bottom: 10px; color: rgba(255,255,255,.85); }
.bxsk-page-hero .bxsk-breadcrumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.bxsk-page-hero .bxsk-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.bxsk-page-hero .bxsk-breadcrumb > span { color: #fff; }

.bxsk-subpage section { margin-top: 32px; }
@media (min-width: 1024px) { .bxsk-subpage section { margin-top: 44px; } }

/* 일반 정보 카드(텍스트 설명용) */
.bxsk-info-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 22px 20px; }
.bxsk-info-card p { font-size: 13.5px; color: var(--text-soft); line-height: 1.7; }
.bxsk-info-card p + p { margin-top: 10px; }

/* 종목/카테고리 뱃지 그리드 (WSSA 국제표준 5종목 — 일반 사실, 단체 고유통계 아님) */
.bxsk-events-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 768px) { .bxsk-events-grid { grid-template-columns: repeat(5, 1fr); } }
.bxsk-event-badge { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 16px 10px; text-align: center; }
.bxsk-event-badge .code { font-family: var(--font-mono); font-size: 17px; font-weight: 800; color: var(--wssa-navy); margin-bottom: 4px; }
.bxsk-event-badge .name { font-size: 11.5px; font-weight: 700; color: var(--text); }

/* 실재 페이지/외부 리소스 링크 카드 */
.bxsk-link-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .bxsk-link-grid { grid-template-columns: repeat(2, 1fr); } }
.bxsk-link-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 18px 20px; transition: all .15s; }
.bxsk-link-card:hover { border-color: var(--wssa-navy); box-shadow: var(--shadow-md); }
.bxsk-link-card strong { font-size: 14px; color: var(--text); }
.bxsk-link-card span { font-size: 12px; color: var(--text-soft); display: block; margin-top: 2px; }
.bxsk-link-card .arrow { color: var(--wssa-navy); font-weight: 700; }

/* 안내(준비중) 패널 — 기록·랭킹처럼 데이터 출처 없는 영역 */
.bxsk-pending-panel { text-align: center; padding: 48px 20px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--bg-soft); }
.bxsk-pending-panel p { font-size: 13.5px; color: var(--text-soft); margin-bottom: 16px; }

/* 공용 버튼 (서브페이지 CTA — 메인페이지 데모 포팅분과 별개의 전역 버튼) */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: var(--r-md); font-size: 13px; font-weight: 700; border: 1px solid transparent; transition: all .15s; }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--wssa-navy); color: var(--wssa-navy); }
.btn-sm { padding: 8px 14px; font-size: 12px; }


/* =========================================================================
   2026-07-08 index.html 인라인 <style> 전체 통합 (1415줄)
   사유: bxsk.css(header include, 먼저 로드) vs index.html 인라인 스타일(나중 로드)
         간 로드순서 충돌 반복 발생 → 원천 차단을 위해 전량 이전.
         모든 선택자가 #bxsk-main으로 스코프돼 있어 다른 페이지에는 영향 없음.
   ========================================================================= */
/* ===== WSSA 메인 (데모 디자인, #bxsk-main 스코프) ===== */
#bxsk-main, #bxsk-main * { box-sizing: border-box; }
#bxsk-main { font-family: var(--font-sans); color: var(--text); line-height: 1.5; }
#bxsk-main img { max-width: 100%; }
#bxsk-main a { color: inherit; text-decoration: none; }

#bxsk-main [data-theme="dark"] {
  --bg: #0B1220;
  --bg-soft: #111A2D;
  --bg-muted: #18253E;
  --surface: #111A2D;
  --surface-alt: #18253E;
  --border: #1F2C44;
  --border-strong: #2C3B58;
  --text: #F0F4FB;
  --text-muted: #B8C3D6;
  --text-soft: #8A97AE;
  --header-bg: #061029;
  --header-band: #04153A;
}
#bxsk-main a { color: inherit; text-decoration: none; }
#bxsk-main img { max-width: 100%; display: block; }
#bxsk-main button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
#bxsk-main table { border-collapse: collapse; width: 100%; }
#bxsk-main .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
/* [FIX 2026-07-09, 2차수정] 1차수정 때 padding:24px 0 단축속성을 그대로 써서 main-grid와 똑같은 버그(좌우 0으로 덮어씀)를
   재발시킴 — .container와 같은 태그에 결합되는 클래스는 반드시 롱핸드(top/bottom만)로 쓸 것. 간격값도 전체적으로 과했다는
   피드백에 맞춰 축소. */
#bxsk-main .bxsk-sec { padding-top: 8px; padding-bottom: 8px; }
#bxsk-main .sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}
#bxsk-main .sec-head .left { display: flex; align-items: baseline; gap: 12px; }
#bxsk-main .sec-head h2 {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 8px;
}
#bxsk-main .sec-head h2::before {
  content: '';
  width: 4px;
  height: 18px;
  background: var(--wssa-navy);
  display: inline-block;
}
#bxsk-main .sec-head .sub {
  font-size: 12px;
  color: var(--text-soft);
}
#bxsk-main .sec-head .more {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
#bxsk-main .sec-head .more:hover { color: var(--wssa-blue); }
#bxsk-main .tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-sm);
  letter-spacing: 0;
  flex-shrink: 0;
}
#bxsk-main .tag.navy { background: var(--wssa-navy); color: #fff; }
#bxsk-main .tag.blue { background: var(--wssa-blue); color: #fff; }
#bxsk-main .tag.yellow { background: var(--wssa-yellow); color: var(--wssa-navy); }
#bxsk-main .tag.red { background: var(--wssa-red); color: #fff; }
#bxsk-main .tag.green { background: var(--wssa-green); color: #fff; }
#bxsk-main .tag.gray { background: var(--gray-200); color: var(--gray-700); }
#bxsk-main .tag.outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }
#bxsk-main .tag.live { background: var(--wssa-red); color: #fff; position: relative; padding-left: 16px; }
#bxsk-main .tag.live::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
#bxsk-main .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-md);
  transition: all 0.15s;
  cursor: pointer;
  border: 1px solid transparent;
  letter-spacing: -0.01em;
}
#bxsk-main .btn-primary { background: var(--wssa-navy); color: #fff; }
#bxsk-main .btn-primary:hover { background: var(--wssa-navy-dark); }
#bxsk-main .btn-cta { background: var(--wssa-red); color: #fff; }
#bxsk-main .btn-cta:hover { background: var(--wssa-red-dark); }
#bxsk-main .btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
#bxsk-main .btn-outline:hover { border-color: var(--wssa-navy); color: var(--wssa-navy); }
#bxsk-main .btn-ghost { color: var(--text-muted); }
#bxsk-main .btn-ghost:hover { color: var(--wssa-blue); }
#bxsk-main .btn-sm { padding: 6px 12px; font-size: 12px; }
#bxsk-main .btn-lg { padding: 14px 28px; font-size: 14px; }
#bxsk-main .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
#bxsk-main .data-table {
  width: 100%;
  font-size: 13px;
}
#bxsk-main .data-table thead th {
  background: var(--bg-soft);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 12px;
  padding: 10px 8px;
  text-align: center;
  border-bottom: 2px solid var(--border-strong);
  letter-spacing: -0.01em;
}
#bxsk-main .data-table tbody td {
  padding: 11px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
#bxsk-main .data-table tbody tr:hover {
  background: var(--bg-soft);
}
#bxsk-main .data-table .rank {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--wssa-navy);
}
#bxsk-main .data-table .rank.top1 { color: var(--wssa-yellow-deep); }
#bxsk-main .data-table .rank.top2 { color: var(--gray-500); }
#bxsk-main .data-table .rank.top3 { color: #B87333; }
#bxsk-main .data-table .time {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
#bxsk-main .data-table .name-cell {
  text-align: left;
  font-weight: 700;
}
#bxsk-main .data-table .change.up { color: var(--wssa-red); font-weight: 700; font-family: var(--font-mono); }
#bxsk-main .data-table .change.down { color: var(--wssa-blue); font-weight: 700; font-family: var(--font-mono); }
#bxsk-main .data-table .change.same { color: var(--text-soft); font-family: var(--font-mono); }
#bxsk-main .player-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#bxsk-main .player-chip .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-200);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-600);
  flex-shrink: 0;
  overflow: hidden;
}
#bxsk-main .player-chip .name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
#bxsk-main .player-chip .meta {
  font-size: 11px;
  color: var(--text-soft);
}
#bxsk-main .page-hero {
  background: linear-gradient(135deg, var(--wssa-navy) 0%, var(--wssa-navy-dark) 100%);
  color: #fff;
  padding: 48px 0 56px;
  position: relative;
  overflow: hidden;
}
#bxsk-main .page-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  width: 320px;
  height: 100%;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 24px, rgba(255,255,255,0.04) 24px 25px);
  pointer-events: none;
}
#bxsk-main .page-hero .breadcrumb {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
#bxsk-main .page-hero .breadcrumb span { opacity: 0.5; }
#bxsk-main .page-hero h1 {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
#bxsk-main .page-hero p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
#bxsk-main .sub-tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 104px;
  z-index: 30;
}
#bxsk-main .sub-tabs .container {
  display: flex;
  gap: 0;
  overflow-x: auto;
}
#bxsk-main .sub-tabs a {
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  border-bottom: 3px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
#bxsk-main .sub-tabs a:hover { color: var(--text); }
#bxsk-main .sub-tabs a.active {
  color: var(--wssa-navy);
  border-bottom-color: var(--wssa-navy);
}
#bxsk-main [data-theme="dark"] .sub-tabs a.active { color: var(--wssa-yellow); border-bottom-color: var(--wssa-yellow); }
#bxsk-main .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
#bxsk-main .kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  position: relative;
}
#bxsk-main .kpi .label {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
#bxsk-main .kpi .value {
  font-size: 28px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.04em;
  font-family: var(--font-mono);
}
#bxsk-main .kpi .unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 2px;
  font-family: var(--font-sans);
}
#bxsk-main .kpi .accent {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 28px;
  height: 28px;
  background: var(--wssa-navy);
  color: #fff;
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 900;
}
#bxsk-main .page-section { padding: 48px 0; }
#bxsk-main .page-section + .page-section { padding-top: 0; }
#bxsk-main .placeholder-img {
  background:
    repeating-linear-gradient(135deg, var(--gray-100) 0 12px, var(--gray-200) 12px 13px);
  display: grid;
  place-items: center;
  color: var(--gray-500);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
}
#bxsk-main [data-theme="dark"] .placeholder-img {
  background:
    repeating-linear-gradient(135deg, var(--bg-muted) 0 12px, var(--bg-soft) 12px 13px);
  color: var(--text-soft);
}
#bxsk-main .placeholder-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed var(--border-strong);
  border-radius: inherit;
  pointer-events: none;
}
#bxsk-main ::-webkit-scrollbar { width: 8px; height: 8px; }
#bxsk-main ::-webkit-scrollbar-track { background: transparent; }
#bxsk-main ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
#bxsk-main ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
#bxsk-main .theme-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  background: var(--wssa-navy);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  font-size: 18px;
  transition: all 0.15s;
}
#bxsk-main .theme-toggle:hover { transform: scale(1.05); }
#bxsk-main [data-theme="dark"] .theme-toggle { background: var(--wssa-yellow); color: var(--wssa-navy); }

/* ---- page ---- */
/* 캔버스: 연회색 페이지 배경 — 흰 카드(.side-card/.info-col/.news-block/.match-card/.video-card/.event-badge)가
   테두리만으로는 약해 보이던 문제를 배경 대비로 보강 (2026-07-09, 사용자 실화면 피드백 — 대회카드·공지사항
   "카드 안에 안 들어가 보임" 문제 해결). 대신 색상·hover·모자이크 등 원본 데모 디테일은 전부 유지 — 절충. */
#bxsk-main { background: var(--bg-soft); }

#bxsk-main .hero {
    background: var(--wssa-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
  }
#bxsk-main .quick-stats {
    background: var(--wssa-navy-deep);
    border-top: 1px solid rgba(255,255,255,0.06);
  }
#bxsk-main .quick-stats .container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    color: #fff;
  }
#bxsk-main .quick-stat {
    padding: 22px 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
  }
#bxsk-main .quick-stat:first-child { border-left: none; }
#bxsk-main .quick-stat .text .l {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 2px;
  }
#bxsk-main .quick-stat .text .v {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
  }
#bxsk-main .quick-stat .text .v span { font-size: 12px; font-family: var(--font-sans); margin-left: 2px; color: rgba(255,255,255,0.7); font-weight: 700; }
#bxsk-main .schedule-strip {
    padding: 12px 0 4px;
    background: var(--bg-soft);
  }
#bxsk-main .schedule-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
#bxsk-main .schedule-head .date-nav {
    display: flex;
    align-items: center;
    gap: 16px;
  }
#bxsk-main .schedule-head .date-nav .arrow {
    width: 32px; height: 32px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface);
    display: grid; place-items: center;
    color: var(--text-muted);
    transition: all 0.15s;
  }
#bxsk-main .schedule-head .date-nav .arrow:hover { border-color: var(--wssa-navy); color: var(--wssa-navy); }
/* 대회안내 타이틀 — 원래 mono 폰트+마커없음(실제 날짜 표시용 잔재)이었는데 지금은 정적 라벨 텍스트라
   다른 페이지급 섹션 타이틀(.sec-head h2: 영상하이라이트/공인종목/포토갤러리)과 동일 스타일로 통일 (2026-07-09) */
#bxsk-main .schedule-head .date-nav .date {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: var(--text);
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    gap: 8px;
  }
#bxsk-main .schedule-head .date-nav .date::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--wssa-navy);
    display: inline-block;
    flex-shrink: 0;
  }
#bxsk-main .schedule-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-strong); }
#bxsk-main .schedule-tabs button {
    padding: 8px 18px;
    font-weight: 700;
    color: var(--text-soft);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
  }
#bxsk-main .schedule-tabs button.active {
    color: var(--wssa-navy);
    border-bottom-color: var(--wssa-navy);
  }
#bxsk-main [data-theme="dark"] .schedule-tabs button.active { color: var(--wssa-yellow); border-bottom-color: var(--wssa-yellow); }

/* ---------- 대회안내 = 매치카드 (2026-07-09, 원본 데모 카드 셸 계승)
   원본 데모의 .match-card(팀 versus/뱃지/actions 포함)는 대진 구조데이터가 실제 출처 없어 사용 불가(A7).
   실데이터는 getArticles('tournament')의 subject/regDt뿐이라 head(장소·시간)+제목만으로 재구성.
   시각적 셸(테두리·radius·hover 시 navy 테두리+lift+shadow)은 .event-badge/.info-col과 동일한
   카드 언어를 그대로 계승해 데모의 톤을 유지 (제안: E-048로 등재, 이전 NAVER-STYLE 오버레이 제거와 세트). ---------- */
#bxsk-main .match-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }
#bxsk-main .match-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    padding: 14px;
    transition: all 0.15s;
  }
#bxsk-main .match-card:hover {
    border-color: var(--wssa-navy);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
#bxsk-main .match-card .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
  }
#bxsk-main .match-card .head .venue {
    color: var(--text-muted);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
#bxsk-main .match-card .head .time {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
  }
#bxsk-main .match-card .event.tour-title {
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
#bxsk-main .match-card:hover .event.tour-title { color: var(--wssa-blue); }

/* ---------- 대회안내 참가현황 배지 (신규, DECIDE 대기 — 실 DB 연동)
   목업의 "지부 VS 지부" 대진(.versus/.badge/.team) 구조는 실 스키마상 근거 없음(A7) — 대회는
   지부 1곳 소속(wssa_test_tournament.chapter_id), 참가자는 개인등록(wssa_test_tournament_entry)이라
   "팀 대 팀 매치" 데이터가 존재하지 않음(E-048 판단 재확인, V2 스키마 조회로 재검증됨).
   대신 실제 조회 가능한 값(부문 수·참가인원·선택적 team_name)만 통계 배지로 표시. ---------- */
#bxsk-main .bxsk-schedule-stats {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
#bxsk-main .bxsk-stat-chip {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-soft);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 9px;
    font-family: var(--font-mono);
  }
/* team_name은 wssa_test_athlete의 자유텍스트 필드(예: "Team Korea") — 정식 팀 엔티티가 아니라
   비어있는 대회/선수가 많을 수 있음(V2 스키마 확인, 데이터 값 자체는 미검증) — 있을 때만 렌더 */
#bxsk-main .bxsk-team-chips {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
  }
#bxsk-main .bxsk-team-chip {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--wssa-navy);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 7px;
  }
#bxsk-main .bxsk-team-chip-more { color: var(--text-soft); }
#bxsk-main .bxsk-schedule-loading,
#bxsk-main .bxsk-schedule-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px 0;
    color: var(--text-soft);
    font-size: 13px;
  }

/* [FIX 2026-07-09] padding 단축속성이 같은 요소의 .container padding(0 20px)을 통째로 덮어써
   좌우 인셋이 사라지던 버그 — main-grid만 top/bottom 롱핸드로 분리해 .container 좌우패딩 보존 */
#bxsk-main .main-grid {
    padding-top: 14px;
    padding-bottom: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); /* [FIX 2026-07-09] fr 단독으로는 콘텐츠 min-content 폭 아래로 안 줄어듦(min-width:auto 기본값) — minmax(0,..)로 강제 축소 허용 */
    gap: 32px;
  }
/* .news-block 자체 카드 래퍼 — 원래 top-news 썸네일카드(F-012 미검증이라 미사용)가 채우던 여백을
   .side-card와 동일한 카드 셸로 대체. 근거 없이 비어 보이던 좌측 컬럼을 우측 side-card들과 시각적으로 맞춤. */
#bxsk-main .news-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
  }
/* news-block 내부 헤더는 .sec-head(페이지급, 22px)가 아니라 옆 side-card .head(카드내부용, 14px)와
   같은 언어로 — 카드 안에 들어가면서 타이틀 크기·마커·정렬을 옆 카드와 맞춤 (2026-07-09, 사용자 피드백) */
#bxsk-main .news-block .sec-head {
    margin-bottom: 0;
    padding: 16px 20px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    align-items: center;
  }
#bxsk-main .news-block .sec-head h2 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.025em;
    gap: 8px;
  }
#bxsk-main .news-block .sec-head h2::before { width: 4px; height: 18px; }
#bxsk-main .news-block .sec-head .sub { display: none; } /* 압축 헤더엔 서브타이틀 생략 — 옆 side-card head도 sub 없음 */
#bxsk-main .news-block .news-list { padding: 6px 16px 12px; } /* 헤더 스트립이 패딩을 가져가서 리스트 자체 인셋 별도 지정 */
#bxsk-main .main-grid .news-block .top-news {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }
#bxsk-main .news-feature {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
    transition: all 0.15s;
  }
#bxsk-main .news-feature:hover { border-color: var(--wssa-navy); box-shadow: var(--shadow-md); }
#bxsk-main .news-feature .thumb {
    aspect-ratio: 16/9;
    position: relative;
  }
#bxsk-main .news-feature .thumb .play {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    border-radius: 2px;
  }
#bxsk-main .news-feature .body {
    padding: 14px;
  }
#bxsk-main .news-feature .cat {
    font-size: 11px;
    font-weight: 800;
    color: var(--wssa-blue);
    letter-spacing: 0.05em;
    margin-bottom: 6px;
  }
#bxsk-main .news-feature .title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
#bxsk-main .news-feature .date {
    font-size: 11px;
    color: var(--text-soft);
    font-family: var(--font-mono);
  }
#bxsk-main .news-list { display: flex; flex-direction: column; gap: 0; }
/* [2026-07-09] 네이버 데스크톱 실측(cc_text_a 16px) 대비 리스트 텍스트가 작다는 피드백 반영 —
   서브페이지 게시판(.bxsk-bd-subject)이 이미 14px라 그 기준으로 통일(사이트 전체 일관성) */
/* [2026-07-09] .info-col 기준으로 정렬 — 패딩/날짜폰트/타이틀 말줄임 기법 전부 통일 */
#bxsk-main .news-list .row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
    transition: color 0.15s;
  }
#bxsk-main .news-list .row:hover { color: var(--wssa-blue); }
#bxsk-main .news-list .row .title { flex: 1; min-width: 0; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bxsk-main .news-list .row:hover .title { color: var(--wssa-blue); }
#bxsk-main .news-list .row .date { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); flex-shrink: 0; }
#bxsk-main .side-block { margin-bottom: 24px; }
#bxsk-main .side-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
  }
/* [2026-07-09] 카드헤더 타이틀 크기를 대회안내(.sec-head h2) 기준으로 통일 — 옆 대회안내 섹션과 동일 체감 */
#bxsk-main .side-card .head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-soft);
  }
#bxsk-main .side-card .head h3 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.025em;
    display: flex;
    align-items: center;
    gap: 8px;
  }
#bxsk-main .side-card .head h3::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--wssa-navy);
  }
/* [2026-07-09] .info-col .head .plus(플레인 텍스트) 기준으로 통일 — 기존 박스버튼 스타일 제거 */
#bxsk-main .side-card .head .plus {
    font-size: 14px;
    color: var(--text-soft);
    cursor: pointer;
  }
#bxsk-main .ranking-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
  }
#bxsk-main .ranking-tabs button {
    flex: 1;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-soft);
    border-bottom: 2px solid transparent;
  }
#bxsk-main .ranking-tabs button.active {
    color: var(--wssa-navy);
    border-bottom-color: var(--wssa-navy);
    background: var(--surface);
  }
#bxsk-main [data-theme="dark"] .ranking-tabs button.active { color: var(--wssa-yellow); border-bottom-color: var(--wssa-yellow); }
#bxsk-main .notice-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
  }
#bxsk-main .notice-tabs button {
    flex: 1;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-soft);
    border-bottom: 2px solid transparent;
  }
#bxsk-main .notice-tabs button.active {
    color: var(--wssa-navy);
    border-bottom-color: var(--wssa-navy);
  }
#bxsk-main [data-theme="dark"] .notice-tabs button.active { color: var(--wssa-yellow); border-bottom-color: var(--wssa-yellow); }
/* [2026-07-09] .info-col 기준으로 정렬 — 컨테이너 패딩/날짜폰트 통일 + tag-mini 정의 누락분 신규 추가
   (기존엔 이 .tag-mini에 스타일이 전혀 없어 "대회" 배지가 맨텍스트로 노출되고 있었음) */
#bxsk-main .notice-list { padding: 6px 16px 12px; }
#bxsk-main .notice-list .row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
  }
#bxsk-main .notice-list .row:last-child { border-bottom: none; }
#bxsk-main .notice-list .row .tag-mini {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--wssa-cyan);
    color: #fff;
  }
#bxsk-main .notice-list .row .title { flex: 1; min-width: 0; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bxsk-main .notice-list .row .date { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); flex-shrink: 0; }
#bxsk-main .quick-menu {
    background: var(--bg-soft);
    padding: 16px 0;
  }
#bxsk-main .quick-menu-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
  }
#bxsk-main .quick-menu-item {
    text-align: center;
    padding: 22px 6px;
    border-radius: var(--r-md);
    transition: all 0.15s;
    cursor: pointer;
  }
#bxsk-main .quick-menu-item:hover { background: var(--surface); }
#bxsk-main .quick-menu-item .ico {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    font-size: 18px;
    color: var(--wssa-navy);
    transition: all 0.15s;
  }
#bxsk-main [data-theme="dark"] .quick-menu-item .ico { color: var(--wssa-yellow); }
#bxsk-main .quick-menu-item:hover .ico {
    background: var(--wssa-navy);
    color: #fff;
    border-color: var(--wssa-navy);
  }
#bxsk-main .quick-menu-item .l {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
  }
  /* [2026-08-07 신규] "포토 갤러리" 퀵메뉴 항목 — 최신 사진 실제 썸네일을 배경으로, 라벨은
     하단 그라디언트 오버레이 위에(다른 항목들과 같은 높이를 유지하면서 이미지가 실제로 보이게) */
#bxsk-main .quick-menu-item-photo {
    padding: 0;
    height: 108px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    display: block;
  }
#bxsk-main .quick-menu-item-photo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65));
  }
#bxsk-main .quick-menu-item-photo-overlay .l { color: #fff; font-size: 12px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
#bxsk-main .video-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
#bxsk-main .video-card { cursor: pointer; }
#bxsk-main .video-card .thumb {
    aspect-ratio: 16/9;
    border-radius: var(--r-md);
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
  }
#bxsk-main .video-card .thumb .play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(10, 46, 110, 0);
    color: #fff;
    transition: background 0.2s;
  }
#bxsk-main .video-card:hover .thumb .play { background: rgba(10, 46, 110, 0.45); }
#bxsk-main .video-card .thumb .play svg {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s;
  }
#bxsk-main .video-card:hover .thumb .play svg { opacity: 1; transform: scale(1); }
#bxsk-main .video-card .thumb .dur {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 3px 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    border-radius: 2px;
  }
#bxsk-main .video-card .label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
#bxsk-main .video-card .sub {
    font-size: 11px;
    color: var(--text-soft);
    font-family: var(--font-mono);
  }
#bxsk-main .events-strip {
    background: var(--bg-soft);
    padding: 10px 0;
  }
#bxsk-main .events-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }
#bxsk-main .event-badge {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px;
    text-align: center;
    transition: all 0.15s;
    cursor: pointer;
  }
#bxsk-main .event-badge:hover {
    border-color: var(--wssa-navy);
    transform: translateY(-2px);
  }
#bxsk-main .event-badge .code {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 900;
    color: var(--wssa-navy);
    letter-spacing: -0.04em;
    margin-bottom: 6px;
  }
#bxsk-main [data-theme="dark"] .event-badge .code { color: var(--wssa-yellow); }
#bxsk-main .event-badge .name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
  }
#bxsk-main .event-badge .desc {
    font-size: 10px;
    color: var(--text-soft);
    font-weight: 500;
  }
#bxsk-main .promo {
    background: linear-gradient(110deg, var(--wssa-yellow) 50%, #FFD96A 50%);
    color: var(--wssa-navy);
    padding: 28px 36px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0;
    overflow: hidden;
    position: relative;
  }
#bxsk-main .promo .text .eyebrow {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
  }
#bxsk-main .promo .text h3 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
  }
#bxsk-main .promo .text p {
    font-size: 13px;
    opacity: 0.85;
    font-weight: 600;
  }
#bxsk-main .promo .visual {
    display: flex;
    align-items: center;
    gap: 16px;
  }
#bxsk-main .promo .badge-num {
    font-family: var(--font-mono);
    font-size: 46px;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
  }
#bxsk-main .promo .badge-num sup { font-size: 22px; vertical-align: super; }
#bxsk-main .two-col-block {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* [FIX 2026-07-09] main-grid와 동일 버그 예방 — .info-col도 22px 헤더 타이틀 써서 같은 위험 있음 */
    gap: 24px;
  }
#bxsk-main .info-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
  }
/* [2026-07-09] 카드헤더 타이틀 크기를 대회안내(.sec-head h2) 기준으로 통일 */
#bxsk-main .info-col .head {
    padding: 16px 20px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
#bxsk-main .info-col .head h3 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.025em;
    display: flex;
    align-items: center;
    gap: 8px;
  }
#bxsk-main .info-col .head h3::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--wssa-navy);
  }
#bxsk-main .info-col .head .plus {
    font-size: 14px;
    color: var(--text-soft);
    cursor: pointer;
  }
#bxsk-main .info-col .list {
    padding: 6px 16px 12px;
  }
#bxsk-main .info-col .list .row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
  }
#bxsk-main .info-col .list .row:last-child { border-bottom: none; }
#bxsk-main .info-col .list .row .tag-mini {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 2px;
    flex-shrink: 0;
  }
#bxsk-main .info-col .list .row.notice .tag-mini { background: var(--wssa-cyan); color: #fff; }
#bxsk-main .info-col .list .row.press .tag-mini { background: var(--wssa-navy); color: #fff; }
#bxsk-main .info-col .list .row.transfer .tag-mini { background: var(--wssa-yellow); color: var(--wssa-navy); }
#bxsk-main .info-col .list .row .title { flex: 1; min-width: 0; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bxsk-main .info-col .list .row .date { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); flex-shrink: 0; }
#bxsk-main .photo-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    aspect-ratio: 3/1;
  }
#bxsk-main .photo-row .ph {
    border-radius: var(--r-md);
    overflow: hidden;
    position: relative;
  }
#bxsk-main .photo-row .ph:first-child {
    grid-row: 1 / 3;
  }
#bxsk-main .photo-row .ph .cap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
/* 공식 파트너(sponsors) 스타일 → bxsk.css "8. 스폰서" 섹션으로 이전 완료 (E-044).
   .sponsor(대시 테두리 placeholder)는 실마크업 어디서도 안 쓰이는 데모 잔재라 이전 없이 제거함 — 필요 시 이전 대화 diff에서 복원 가능. */
@media (max-width: 960px) {
#bxsk-main .quick-stats .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#bxsk-main .main-grid { grid-template-columns: minmax(0, 1fr); }
#bxsk-main .match-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* .event.tour-title이 실제 게시글 제목이라 위험도 높음 */
#bxsk-main .quick-menu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#bxsk-main .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#bxsk-main .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#bxsk-main .two-col-block { grid-template-columns: minmax(0, 1fr); }
}
/* 작은 폰 전용 2차 분기점 (iPhone SE급 ≤480px) — 960px 분기 하나로는 좁은 폰에서 2열도 빡빡함 (E-029) */
@media (max-width: 480px) {
#bxsk-main .quick-stats .container { grid-template-columns: repeat(2, 1fr); }
#bxsk-main .quick-stat { border-left: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
#bxsk-main .quick-stat:nth-child(2n) { border-left: 1px solid rgba(255,255,255,0.08); } /* 2x2 세로 구분선(우측 열) */
#bxsk-main .quick-stat:nth-last-child(-n+2) { border-bottom: none; } /* 2x2 마지막 행엔 하단 구분선 불필요 */
#bxsk-main .quick-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#bxsk-main .video-grid { grid-template-columns: minmax(0, 1fr); }
#bxsk-main .match-cards { grid-template-columns: minmax(0, 1fr); }
#bxsk-main .container { padding: 0 16px; }
/* 게시판에서 뽑은 목록·카드의 날짜는 좁은 화면에서 제목 공간 확보를 위해 생략 (2026-07-09, 사용자 피드백) */
#bxsk-main .news-list .row .date,
#bxsk-main .notice-list .row .date,
#bxsk-main .info-col .list .row .date,
#bxsk-main .match-card .head .time { display: none; }
.bxsk-bd-date { display: none; } /* 서브페이지(대회/기록·랭킹 등) 게시판 리스트도 동일 처리 */
}
/* ---- 실배너 히어로 위젯 컨테이너 (텍스트 캐러셀 대체, E-025) ---- */
#bxsk-main .hero { height: auto; }
#bxsk-main .hero-stage { display: none; } /* 혹시 잔존 시 안전망 */

#bxsk-main .bxsk-hero-widget [class*="slider-banner-"] { width: 100% !important; height: auto !important; }
#bxsk-main .bxsk-hero-widget .slick-list { overflow: hidden; }

/* [FIX 2026-07-14 1차 — 시도 후 되돌림] breakpoint별 고정 height(220/320/380px) + object-fit:cover가
   원본 상하좌우를 크게 잘라내는 문제(사용자 확인 — "잘려보여")를 aspect-ratio로 없애려 했으나,
   이 위젯은 slick `variableWidth:true`+`adaptiveHeight:true` 조합으로 `.slick-track`에 벤더 JS가
   `width:10000px` 인라인을 강제 부여함 — 여기에 aspect-ratio를 걸면 10000px 폭 기준으로 높이가
   1953px로 폭증, adaptiveHeight가 그 값을 `.slick-list`에 그대로 복사해 히어로 전체가 거대한 빈
   배너로 깨짐(콘솔 HTML 실측 V2로 확인). 이 파일 504~506행 주석에도 동일 계열(.bxsk-hero, fade 모드)
   위젯에서 track/slide 폭을 건드리면 슬라이드가 사라지는 동일 실패 패턴이 이미 기록돼 있었음 —
   track/list/slide 치수는 절대 건드리지 않는다(A11 교훈).
   [FIX 2026-07-14 2차 — 최종] 크롭 자체는 감수하기로 결정(사용자 확인) — 배너 원본을 권장 비율로
   재제작해 크롭량을 최소화하고, object-fit은 cover로 되돌려 박스를 항상 꽉 채움. 남는 부분은
   `object-position: center`로 이미지 정중앙을 기준 삼아 상하 또는 좌우를 대칭으로만 잘라낸다
   (좌우 어느 한쪽으로 쏠려 잘리는 비대칭 크롭 방지). img 자체만 손대 slick 내부 치수는 무영향. */
#bxsk-main .bxsk-hero-widget .slick-slide img {
  width: 100% !important; height: 220px !important; object-fit: cover; object-position: center; display: block;
}
@media (min-width: 768px) { #bxsk-main .bxsk-hero-widget .slick-slide img { height: 320px !important; } }
@media (min-width: 1280px) { #bxsk-main .bxsk-hero-widget .slick-slide img { height: 380px !important; } }
#bxsk-main .bxsk-hero-widget .slick-dots { bottom: 12px; }

/* 배너 원본 2560×500 — 뷰포트가 2560px를 넘는 초광폭 화면에서는 캡+가운데 정렬로 업스케일(화질 저하) 방지,
   좌우 여백은 브랜드 네이비로 채움 (Rodin 확인·채택, 2026-07-14) */
#bxsk-main .bxsk-hero-widget { max-width: 2560px; margin: 0 auto; background: var(--wssa-navy-deep); }
#bxsk-main .bxsk-ranking-cta-body { padding: 20px 16px; text-align: center; }
#bxsk-main .bxsk-ranking-cta-body p { font-size: 12.5px; color: var(--text-soft); margin-bottom: 14px; line-height: 1.5; }
#bxsk-main .bxsk-promo-real { display: block; padding: 0; background: none; margin: 32px 0; border-radius: var(--r-md); overflow: hidden; }
#bxsk-main .bxsk-promo-real img { width: 100%; height: auto; display: block; border-radius: var(--r-md); }
#bxsk-main .bxsk-store-mini { padding: 10px 12px; }
#bxsk-main .bxsk-store-mini .goods_list_tit { display: none; }
#bxsk-main .bxsk-store-mini .item_gallery_type ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
#bxsk-main .bxsk-store-mini .item_gallery_type li { width: auto !important; margin: 0 !important; }
#bxsk-main .bxsk-store-mini .item_photo_box img { width: 100%; height: auto; border-radius: var(--r-sm); }
#bxsk-main .bxsk-store-mini .item_name { font-size: 11.5px; line-height: 1.35; display: block; margin-top: 4px; }
#bxsk-main .bxsk-store-mini .item_price { font-size: 12px; color: var(--wssa-navy); font-weight: 700; }
/* .bxsk-sponsor-imgs 스타일도 bxsk.css로 이전 완료 (E-044) */

/* ============================================================================
   12. 로그인/회원가입 (member/login.php, member/join_*.php) — 2026-07-10 신설
   #bxsk-auth 스코프. 목업 디자인(auth-hero+form 2단 카드) 적용, 실템플릿 기능 보존.
   B13 안전패턴 전부 선반영: grid는 minmax(0,...), 텍스트 담는 요소는 min-width:0.
   ============================================================================ */
#bxsk-auth .bxsk-auth-wrap { padding: 32px 0 48px; background: var(--bg-soft); }
#bxsk-auth .bxsk-auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 880px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { #bxsk-auth .bxsk-auth-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Hero side — 768px 미만은 숨김(디자인 전용, 실기능 없음) */
#bxsk-auth .bxsk-auth-hero {
  display: none;
  background: linear-gradient(135deg, var(--wssa-navy) 0%, var(--wssa-navy-dark) 100%);
  color: #fff;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 768px) { #bxsk-auth .bxsk-auth-hero { display: flex; } }
#bxsk-auth .bxsk-auth-hero::before {
  content: '';
  position: absolute;
  top: 0; right: -50px; bottom: 0; width: 200px;
  background: repeating-linear-gradient(135deg, transparent 0 20px, rgba(255,255,255,0.04) 20px 21px);
}
#bxsk-auth .bxsk-auth-mark { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
#bxsk-auth .bxsk-auth-mark .mark {
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--wssa-yellow); color: var(--wssa-navy);
  display: grid; place-items: center;
  font-weight: 900; font-size: 10px; letter-spacing: -0.02em;
}
#bxsk-auth .bxsk-auth-mark .text-block { min-width: 0; }
#bxsk-auth .bxsk-auth-mark .ko { font-size: 12px; font-weight: 800; letter-spacing: -0.02em; }
#bxsk-auth .bxsk-auth-mark .en { font-size: 9px; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); }

#bxsk-auth .bxsk-auth-middle { position: relative; z-index: 1; }
#bxsk-auth .bxsk-auth-middle h2 { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.25; margin-bottom: 12px; }
#bxsk-auth .bxsk-auth-middle h2 .accent { color: var(--wssa-yellow); }
#bxsk-auth .bxsk-auth-middle p { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.7; }

#bxsk-auth .bxsk-auth-feat { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
#bxsk-auth .bxsk-auth-feat .row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,0.85); }
#bxsk-auth .bxsk-auth-feat .ico {
  width: 24px; height: 24px; flex-shrink: 0;
  background: rgba(255,255,255,0.1); color: var(--wssa-yellow);
  border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900;
}
#bxsk-auth .bxsk-auth-bottom { font-size: 11px; color: rgba(255,255,255,0.4); position: relative; z-index: 1; font-family: var(--font-mono); }

/* Form side */
#bxsk-auth .bxsk-auth-form-side { padding: 32px 24px; }
@media (min-width: 768px) { #bxsk-auth .bxsk-auth-form-side { padding: 40px 36px; } }
#bxsk-auth .bxsk-auth-form-side h2 { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 6px; }
#bxsk-auth .bxsk-auth-form-side .sub { font-size: 12.5px; color: var(--text-soft); margin-bottom: 24px; }

#bxsk-auth .bxsk-field-group { margin-bottom: 12px; }
#bxsk-auth .bxsk-field-group input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); font-family: inherit; font-size: 13.5px; color: var(--text); outline: none;
}
#bxsk-auth .bxsk-field-group input:focus { border-color: var(--wssa-navy); }

#bxsk-auth .bxsk-checkbox-row { display: flex; align-items: center; margin: 12px 0 4px; font-size: 12.5px; }
#bxsk-auth .bxsk-checkbox-row .form_element { display: flex; align-items: center; gap: 6px; }
#bxsk-auth .bxsk-checkbox-row label { color: var(--text-muted); cursor: pointer; }
#bxsk-auth .bxsk-checkbox-row input[type="checkbox"] { accent-color: var(--wssa-navy); }

#bxsk-auth .bxsk-error-msg { font-size: 11.5px; color: var(--wssa-red); margin: 6px 0 0; }
#bxsk-auth .bxsk-error-msg.dn { display: none; }

#bxsk-auth .bxsk-login-btn {
  display: block; width: 100%; padding: 14px; margin-top: 16px; border: 0;
  background: var(--wssa-navy); color: #fff; border-radius: var(--r-md);
  font-size: 14px; font-weight: 800; text-align: center; cursor: pointer; transition: background 0.15s;
}
#bxsk-auth .bxsk-login-btn:hover { background: var(--wssa-navy-dark); }

#bxsk-auth .bxsk-divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  color: var(--text-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
}
#bxsk-auth .bxsk-divider::before, #bxsk-auth .bxsk-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

#bxsk-auth .bxsk-sns-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#bxsk-auth .bxsk-sns-btn { display: block; border-radius: var(--r-md); overflow: hidden; }
#bxsk-auth .bxsk-sns-btn img { width: 100%; height: auto; display: block; }

#bxsk-auth .bxsk-btn-login-box { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
#bxsk-auth .bxsk-btn-login-box ul { display: flex; list-style: none; margin: 0; padding: 0; justify-content: center; gap: 4px; flex-wrap: wrap; }
#bxsk-auth .bxsk-btn-login-box li { flex: 0 0 auto; position: relative; }
#bxsk-auth .bxsk-btn-login-box li + li::before { content: '|'; position: absolute; left: -3px; top: 50%; transform: translateY(-50%); color: var(--border-strong); }
#bxsk-auth .bxsk-auth-textbtn { font-size: 12px; color: var(--text-soft); padding: 4px 10px; border: 0; background: none; cursor: pointer; }
#bxsk-auth .bxsk-auth-textbtn:hover { color: var(--wssa-navy); }

/* 비회원 주문 아코디언 (원본 목업엔 없던 실기능 신규 배치) */
#bxsk-auth .bxsk-guest-accordion { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
#bxsk-auth .bxsk-guest-accordion summary {
  padding: 13px 16px; font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-soft); cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
#bxsk-auth .bxsk-guest-accordion summary::-webkit-details-marker { display: none; }
#bxsk-auth .bxsk-guest-accordion summary::after { content: '+'; font-size: 16px; font-weight: 400; color: var(--text-soft); }
#bxsk-auth .bxsk-guest-accordion[open] summary::after { content: '−'; }
#bxsk-auth .bxsk-guest-body { padding: 16px; display: flex; flex-direction: column; gap: 20px; }
#bxsk-auth .bxsk-guest-block h3 { font-size: 13px; font-weight: 800; margin-bottom: 10px; }
#bxsk-auth .bxsk-guest-btn {
  display: block; width: 100%; padding: 11px; margin-top: 4px; border: 1px solid var(--border-strong);
  background: var(--surface); border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 700; color: var(--text); text-align: center; cursor: pointer;
}
#bxsk-auth .bxsk-guest-btn:hover { border-color: var(--wssa-navy); color: var(--wssa-navy); }

/* ============================================================================
   13. 회원가입 위저드 (member/join_method.php ~ join_ok.php 등) — 2026-07-10 신설
   #bxsk-join 스코프. signup.html 목업의 스텝 인디케이터+카드폼 디자인 적용.
   vendor 테이블 기반 위젯(_join_view.html 등)은 구조는 그대로 두고 CSS로 카드 필드그룹처럼 리스킨
   (테이블 태그를 display:block으로 눌러 시각적으로만 div처럼 만듦 — JS/서버 로직은 태그와 무관해 안전).
   ============================================================================ */
#bxsk-join { padding: 32px 0 60px; }
#bxsk-join .bxsk-join-wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { #bxsk-join .bxsk-join-wrap { padding: 0 20px; } }

/* 상단 타이틀 */
#bxsk-join .member_tit { text-align: center; margin-bottom: 20px; }
#bxsk-join .member_tit h2 { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 4px; }
#bxsk-join .member_tit h2.skip { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0,0,0,0); }

/* 스텝 인디케이터 */
#bxsk-join .member_tit ol {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  list-style: none; padding: 0;
}
#bxsk-join .member_tit ol li { padding: 12px 8px; text-align: center; background: var(--bg-soft); font-size: 12px; font-weight: 700; color: var(--text-soft); }
#bxsk-join .member_tit ol li.page_on { background: var(--wssa-navy); color: #fff; }
#bxsk-join .member_tit ol li span:first-child { display: block; font-family: var(--font-mono); font-size: 10px; margin-bottom: 2px; opacity: .7; }
#bxsk-join .member_tit ol li img { display: none; }

/* 카드형 폼 컨테이너 */
#bxsk-join .member_cont { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px 20px; }
@media (min-width: 768px) { #bxsk-join .member_cont { padding: 36px 40px; } }
#bxsk-join .member_cont > h3:first-child, #bxsk-join .member_cont form > h3:first-child {
  font-size: 20px; font-weight: 900; letter-spacing: -0.02em;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 2px solid var(--wssa-navy);
}

/* 약관동의 (join_agreement) */
#bxsk-join .join_agreement_box { margin-bottom: 12px; }
#bxsk-join .join_agreement_box .form_element {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 13px;
}
#bxsk-join .join_agreement_box .form_element input[type="checkbox"] { accent-color: var(--wssa-navy); flex-shrink: 0; }
#bxsk-join .join_agreement_box .form_element label { flex: 1; min-width: 0; cursor: pointer; }
#bxsk-join .join_agreement_box .form_element span { font-size: 11px; color: var(--text-soft); flex-shrink: 0; }
#bxsk-join .join_agreement_box.js_terms_view .form_element { border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface); }
#bxsk-join .agreement_box {
  max-height: 100px; overflow-y: auto; padding: 12px 16px; font-size: 11.5px; line-height: 1.6; color: var(--text-soft);
  background: var(--bg); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md);
}
#bxsk-join .important_check_box .important_check { display: block; margin-top: 10px; font-size: 12px; color: var(--wssa-red); font-weight: 700; }
#bxsk-join .important_check_box .important_check.dn { display: none; }

/* 정보입력 폼 (join.html + _join_view*.html — 벤더 테이블 리스킨) */
#bxsk-join .base_info_box, #bxsk-join .business_info_box, #bxsk-join .addition_info_box { margin-bottom: 24px; }
#bxsk-join .base_info_box h3, #bxsk-join .business_info_box h3, #bxsk-join .addition_info_box h3 {
  font-size: 14px; font-weight: 800; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
#bxsk-join table { width: 100%; border-collapse: collapse; }
#bxsk-join table, #bxsk-join tbody, #bxsk-join tr, #bxsk-join th, #bxsk-join td { display: block; width: auto; }
#bxsk-join colgroup, #bxsk-join col { display: none; }
#bxsk-join tr { margin-bottom: 14px; }
#bxsk-join th { text-align: left; font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
#bxsk-join th .important { color: var(--wssa-red); }
#bxsk-join th .important::after { content: ' *'; }
#bxsk-join td input[type="text"], #bxsk-join td input[type="password"], #bxsk-join td select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); font-family: inherit; font-size: 13px; color: var(--text); outline: none;
}
#bxsk-join td input:focus, #bxsk-join td select:focus { border-color: var(--wssa-navy); }
#bxsk-join .member_warning { margin-bottom: 6px; }
#bxsk-join .member_warning:last-child { margin-bottom: 0; }
#bxsk-join .form_element ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 8px; }
#bxsk-join .choice_s { display: block; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: 13px; font-weight: 700; color: var(--text-soft); cursor: pointer; }
#bxsk-join .choice_s.on { border-color: var(--wssa-navy); color: var(--wssa-navy); background: var(--bg-soft); }
#bxsk-join .hobby_list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
#bxsk-join .check_s { display: block; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: 12.5px; font-weight: 700; color: var(--text-soft); cursor: pointer; }
#bxsk-join .check_s.on { border-color: var(--wssa-navy); color: var(--wssa-navy); background: var(--bg-soft); }
#bxsk-join textarea {
  width: 100%; padding: 11px 14px; min-height: 90px; resize: vertical;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); font-family: inherit; font-size: 13px; color: var(--text); outline: none;
}
#bxsk-join textarea:focus { border-color: var(--wssa-navy); }
#bxsk-join .member_warning_info {
  margin-top: 10px; padding: 14px 16px; background: var(--bg-soft); border: 1px dashed var(--wssa-yellow-deep); border-radius: var(--r-md);
}
#bxsk-join .member_warning_info.dn { display: none; }
#bxsk-join .member_warning_info .info_title { font-size: 12px; font-weight: 800; color: var(--wssa-navy); margin-bottom: 6px; }
#bxsk-join .member_warning_info .info_text { font-size: 11.5px; color: var(--text-soft); line-height: 1.6; }
#bxsk-join .member_warning_info .text_red { color: var(--wssa-red); font-weight: 800; }

/* 마이페이지 전용(부가정보 위젯 하단, isMyPage 조건부 — 지금은 가입플로우엔 미노출, 마이페이지 작업 시 참고) */
#bxsk-join .site_info_box, #bxsk-join .join_agreement_cont:not(form .join_agreement_cont) { margin-top: 24px; }
#bxsk-join .site_sns_info { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--r-md); }
#bxsk-join .site_sns_list, #bxsk-join .site_sns_list_disconnect { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#bxsk-join .site_sns_info em { font-size: 12px; color: var(--text-soft); font-weight: 700; flex-shrink: 0; }
#bxsk-join .site_sns_info img { height: 28px; width: auto; }

/* 아이디/비밀번호 찾기 (find_id, find_password*) */
#bxsk-join .find_id_sec h3, #bxsk-join .find_password_box h3, #bxsk-join .find_password_reset_box h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
#bxsk-join .find_password_box p, #bxsk-join .find_password_reset_box p { font-size: 12.5px; color: var(--text-soft); margin-bottom: 14px; }
#bxsk-join .radio_find_type { display: flex; gap: 8px; margin-bottom: 14px; }
#bxsk-join .login_input input[type="text"], #bxsk-join .login_input input[type="password"] {
  width: 100%; padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); font-family: inherit; font-size: 13.5px; color: var(--text); outline: none;
}
#bxsk-join .login_input input:focus { border-color: var(--wssa-navy); }
#bxsk-join .login_input select.email_select { width: 100%; padding: 11px 14px; margin-bottom: 8px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg); font-size: 13px; }
#bxsk-join .find_complete_box { text-align: center; padding: 24px 0; font-size: 14px; line-height: 1.7; }
#bxsk-join .find_complete_box strong { color: var(--wssa-navy); font-weight: 900; }
#bxsk-join .find_password_complete_box { text-align: center; padding: 20px 0; }
#bxsk-join .find_password_complete_box p { font-size: 14px; margin-bottom: 20px; }
#bxsk-join .js_input_pw { margin-bottom: 10px; }

/* 카카오싱크 연동하기 (kakao_connect) — 원본 인라인 <style> 블록을 WSSA 카드 시스템으로 대체 */
#bxsk-join .kakao_connect_header { margin-bottom: 20px; }
#bxsk-join .kakao_connect_header h3 { font-size: 15px; font-weight: 700; line-height: 1.5; }
#bxsk-join .kakao_connect_members_list { list-style: none; margin: 0 0 10px; padding: 0; }
#bxsk-join .kakao_connect_members_list li { margin-bottom: 8px; }
#bxsk-join .kakao_connect_members_list_input {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px;
}
#bxsk-join .kakao_connect_members_list_input input[type="radio"] { accent-color: var(--wssa-navy); flex-shrink: 0; }
#bxsk-join .kakao_connect_members_list_input label { flex: 1; min-width: 0; cursor: pointer; }
#bxsk-join .kakao_connect_members_list_input_status {
  flex-shrink: 0; padding: 2px 8px; border-radius: 2px; font-size: 10.5px; font-weight: 800; background: var(--text-soft); color: #fff;
}
#bxsk-join .kakao_connect_members_info { font-size: 11.5px; color: var(--wssa-red); margin-bottom: 14px; }
#bxsk-join .kakao_connect_login_input { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#bxsk-join .kakao_connect_login_input input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); font-family: inherit; font-size: 13.5px; color: var(--text); outline: none;
}
#bxsk-join .kakao_connect_login_input input:focus { border-color: var(--wssa-navy); }
#bxsk-join .kakao_connect_login_find { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 10px; font-size: 12px; }
#bxsk-join .kakao_connect_login_find a { color: var(--wssa-blue); font-weight: 700; }
#bxsk-join .kakao_connect_login_btn button {
  width: 100%; padding: 13px; border-radius: var(--r-md); font-size: 14px; font-weight: 800; border: 0; cursor: pointer;
}
#bxsk-join .kakao_background_yellow button { background: #FEE500; color: #000; }
#bxsk-join .kakao_background_black button { background: #191919; color: #fff; }
#bxsk-join .kakao_connect_divider { margin: 20px 0; border-top: 1px solid var(--border); }

/* ============================================================================
   14. SNS 회원가입 팝업 (member/join_agreement.php, SNS 경유 — share_header/footer 기반) — 2026-07-10 신설
   share_header는 GNB 없는 팝업 전용 래퍼라 #bxsk-join과 별도로, 원본 루트 요소 #popup을 그대로 스코프로 사용.
   ============================================================================ */
#popup { max-width: 420px; margin: 30px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg); font-family: var(--font-sans); }
#popup .top { padding: 18px 20px; background: var(--wssa-navy); color: #fff; }
#popup .top .title { font-size: 16px; font-weight: 900; }
#popup .content { padding: 20px; }
#popup .wrap .tit_1 { font-size: 14px; font-weight: 700; margin-bottom: 16px; text-align: center; line-height: 1.5; }
#popup .box_info { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
#popup .box_info dl { display: flex; padding: 10px 14px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
#popup .box_info dl:last-child { border-bottom: 0; }
#popup .box_info dt { width: 60px; flex-shrink: 0; color: var(--text-soft); font-weight: 700; }
#popup .box_info dd { flex: 1; min-width: 0; }
#popup .box_check { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
#popup .box_check > div { display: flex; align-items: center; gap: 6px; font-size: 12px; }
#popup .box_check input[type="checkbox"] { flex-shrink: 0; }
#popup .box_check label { flex: 1; min-width: 0; }
#popup .box_check input[type="checkbox"] { accent-color: var(--wssa-navy); flex-shrink: 0; }
#popup .box_check label span { color: var(--text-soft); margin-right: 4px; }
#popup .box_check .ico { color: var(--wssa-blue); text-decoration: underline; }
#popup .btn_wrap { text-align: center; }
#popup .btn_1 { display: block; width: 100%; padding: 14px; background: var(--wssa-navy); color: #fff; border-radius: var(--r-md); font-size: 14px; font-weight: 800; text-align: center; }
#popup .btn_1:hover { background: var(--wssa-navy-dark); }
#popup .bottom { padding: 14px 20px; background: var(--bg-soft); font-size: 10.5px; color: var(--text-soft); line-height: 1.6; }
#popup .bottom .wrap { text-align: center; }
#popup .bottom a { color: var(--wssa-blue); font-weight: 700; }

.dim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; }
.dim.on { display: block; }
.layer_popup {
  display: none; position: fixed; left: 50%; top: 0; transform: translateX(-50%);
  width: 90%; max-width: 420px; max-height: 70vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 201;
}
.layer_popup .title { padding: 14px 18px; background: var(--wssa-navy); color: #fff; font-size: 14px; font-weight: 800; }
.layer_popup .box_text { padding: 16px 18px; font-size: 11.5px; color: var(--text-soft); line-height: 1.6; }
.layer_popup .btn_wrap { padding: 14px 18px; text-align: right; border-top: 1px solid var(--border); }
.layer_popup .btn_close { display: inline-block; padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 12px; font-weight: 700; }

/* 필수항목 안내문구 (base_info_box 최상단, th 밖에서 단독 사용되는 .important) */
#bxsk-join .base_info_box > .important { display: block; font-size: 11.5px; color: var(--wssa-red); margin: -6px 0 14px; }

/* 우편번호검색/주소입력 (_join_view.html, _join_view_business.html 공통) */
#bxsk-join .address_postcode { display: flex; gap: 8px; margin-bottom: 8px; }
#bxsk-join .address_postcode input { flex: 1; min-width: 0; }
#bxsk-join .btn_post_search {
  flex-shrink: 0; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer;
}
#bxsk-join .btn_post_search:hover { border-color: var(--wssa-navy); color: var(--wssa-navy); }
#bxsk-join .address_input { display: flex; flex-direction: column; gap: 8px; }

/* 마이페이지 전용 비밀번호 변경/도움말 레이어팝업 (_join_view.html, isMyPage 조건부 — 지금은 가입플로우엔 미노출) */
#bxsk-join .btn_common_box { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#bxsk-join .btn_gray_mid {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700; color: var(--text-soft); cursor: pointer;
}
#bxsk-join .btn_gray_mid:hover { border-color: var(--wssa-navy); color: var(--wssa-navy); }
#bxsk-join .member_pw_change { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 14px; background: var(--bg-soft); border-radius: var(--r-md); }
#bxsk-join .member_pw_change dl { display: flex; flex-direction: column; gap: 4px; }
#bxsk-join .member_pw_change dt { font-size: 12px; font-weight: 700; color: var(--text-soft); }
#bxsk-join .fc_red { color: var(--wssa-red); }
#bxsk-join .layer_area .ly_wrap {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 210;
  width: 90%; max-width: 360px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden;
}
#bxsk-join .layer_area .ly_tit { padding: 14px 18px; background: var(--wssa-navy); color: #fff; font-size: 13px; font-weight: 800; }
#bxsk-join .layer_area .ly_cont { padding: 16px 18px; font-size: 11.5px; color: var(--text-soft); line-height: 1.6; }
#bxsk-join .layer_area .pw_advice_list ul { list-style: disc; margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
#bxsk-join .layer_area .ly_close { position: absolute; top: 12px; right: 14px; }
#bxsk-join .layer_area .ly_close img { width: 16px; height: 16px; }

/* 버튼 공통(가입/취소/다음/이전/확인) */
#bxsk-join .btn_center_box, #bxsk-join .btn_member_sec { display: flex; gap: 8px; justify-content: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
#bxsk-join .btn_member_sec ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
#bxsk-join button { padding: 13px 24px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 800; border: 0; cursor: pointer; }
#bxsk-join .btn_comfirm, #bxsk-join .js_btn_join, #bxsk-join .btn_member_next, #bxsk-join .btn_member_ok, #bxsk-join .btn_login,
#bxsk-join .btn_center_box button:not([class]), #bxsk-join .btn_member_sec button:not([class]) {
  background: var(--wssa-navy); color: #fff;
}
#bxsk-join .btn_comfirm:hover, #bxsk-join .js_btn_join:hover, #bxsk-join .btn_member_next:hover { background: var(--wssa-navy-dark); }
#bxsk-join .btn_member_cancel, #bxsk-join .btn_member_prev, #bxsk-join .btn_member_white, #bxsk-join #btnHome {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
}

/* 가입방법 선택(join_method) */
#bxsk-join .member_login_shop { margin-bottom: 20px; }
#bxsk-join .shop_mall_join { display: block; width: 100%; padding: 16px; text-align: center; background: var(--wssa-navy); color: #fff; border-radius: var(--r-md); font-size: 15px; font-weight: 800; }
#bxsk-join .shop_mall_join:hover { background: var(--wssa-navy-dark); }
#bxsk-join .member_sns_login { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
#bxsk-join .member_sns_login a { display: block; border-radius: var(--r-md); overflow: hidden; }
#bxsk-join .member_sns_login img { width: 100%; height: auto; display: block; }
#bxsk-join .chk_none { display: block; text-align: center; font-size: 11.5px; color: var(--text-soft); line-height: 1.6; }
#bxsk-join .member_guide_txt { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--text-soft); }
#bxsk-join .member_guide_txt a { color: var(--wssa-blue); font-weight: 800; margin-left: 4px; cursor: pointer; }

/* 가입완료/승인대기(join_ok, join_wait) */
#bxsk-join .join_ok_box, #bxsk-join .join_wait_box { text-align: center; padding: 20px 0; }
#bxsk-join .join_ok_tit .complete, #bxsk-join .join_wait_tit .complete { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
#bxsk-join .join_ok_tit .complete strong, #bxsk-join .join_wait_tit .complete strong { color: var(--wssa-navy); }
#bxsk-join .join_ok_tit p, #bxsk-join .join_wait_tit p { font-size: 13px; color: var(--text-soft); line-height: 1.6; }
#bxsk-join .join_ok_tit span { color: var(--wssa-navy); font-weight: 800; }
#bxsk-join .join_wait_14under {
  margin-top: 20px; padding: 16px; background: var(--bg-soft); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  text-align: left; font-size: 12px; color: var(--text-soft);
}
#bxsk-join .join_wait_14under dt { font-weight: 800; margin-bottom: 6px; }
#bxsk-join .join_wait_14under .btn_gray_small { display: inline-block; margin-top: 8px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: 11.5px; font-weight: 700; }

/* 비밀번호 변경 안내 (password_change) */
#bxsk-join .password_change_tit { text-align: center; margin-bottom: 24px; }
#bxsk-join .password_change_tit strong { display: block; font-size: 17px; font-weight: 900; margin-bottom: 6px; }
#bxsk-join .password_change_tit span { display: block; font-size: 12.5px; color: var(--wssa-red); font-weight: 700; margin-bottom: 10px; }
#bxsk-join .password_change_tit p { font-size: 12.5px; color: var(--text-soft); line-height: 1.6; }
#bxsk-join .password_change_input input[type="password"] {
  width: 100%; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); font-family: inherit; font-size: 13.5px; color: var(--text); outline: none;
}
#bxsk-join .password_change_input input:focus { border-color: var(--wssa-navy); }
#bxsk-join .new_password { margin-top: 10px; }
#bxsk-join .password_change_tip {
  margin-top: 20px; padding: 14px 16px; background: var(--bg-soft); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
}
#bxsk-join .password_change_tip strong { display: block; font-size: 12px; font-weight: 800; color: var(--wssa-navy); margin-bottom: 6px; }
#bxsk-join .password_change_tip p { font-size: 11.5px; color: var(--text-soft); line-height: 1.6; }

/* 본인인증 수단 선택/확인 (user_certification*) */
#bxsk-join .user_certify_tit, #bxsk-join .find_password_box > h3 { margin-bottom: 16px; }
#bxsk-join .user_certify_tit h3, #bxsk-join .find_password_box h3 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
#bxsk-join .user_certify_tit p, #bxsk-join .find_password_box p.guide { font-size: 12.5px; color: var(--text-soft); }
#bxsk-join .user_certify_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#bxsk-join .user_certify_list li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md);
}
#bxsk-join .user_certify_list li:has(input:checked) { border-color: var(--wssa-navy); background: var(--bg-soft); }
#bxsk-join .user_certify_list input[type="radio"] { accent-color: var(--wssa-navy); }
#bxsk-join .user_certify_list .choice { font-size: 13.5px; font-weight: 800; cursor: pointer; }
#bxsk-join .user_certify_list strong { font-size: 12px; color: var(--text-soft); font-weight: 700; }
#bxsk-join .user_certify_list span { flex-basis: 100%; font-size: 11px; color: var(--text-soft); }
#bxsk-join .info_again { font-size: 11.5px; color: var(--text-soft); margin-top: 8px; }
#bxsk-join .info_again a { color: var(--wssa-blue); font-weight: 700; margin-left: 4px; }
#bxsk-join #errorMessage, #bxsk-join .text_warning { font-size: 11.5px; color: var(--wssa-red); margin-top: 8px; }
#bxsk-join #errorMessage.dn { display: none; }

/* 휴면회원 해제 (wake*) */
#bxsk-join .wake_base_tit { text-align: center; margin-bottom: 20px; }
#bxsk-join .wake_base_tit .complete { font-size: 17px; font-weight: 900; margin-bottom: 14px; }
#bxsk-join .wake_base_tit .complete strong { color: var(--wssa-navy); }
#bxsk-join .wake_date { display: flex; flex-direction: column; gap: 4px; margin: 0 auto 14px; max-width: 280px; text-align: left; font-size: 12px; }
#bxsk-join .wake_date dl { display: flex; justify-content: space-between; }
#bxsk-join .wake_date dt { color: var(--text-soft); }
#bxsk-join .wake_date dd { font-weight: 700; }
#bxsk-join .wake_notice { font-size: 11.5px; color: var(--text-soft); line-height: 1.6; }
#bxsk-join .none_wake, #bxsk-join .wake_ok {
  text-align: center; padding: 16px; margin-bottom: 16px; border-radius: var(--r-md); font-size: 12.5px;
}
#bxsk-join .none_wake { background: rgba(215,38,61,.08); color: var(--wssa-red); }
#bxsk-join .wake_ok { background: rgba(31,138,91,.08); color: var(--wssa-green); }
#bxsk-join .wake_certify_input { margin-bottom: 16px; }
#bxsk-join .wc_info_tip, #bxsk-join .uc_info_tip { font-size: 12.5px; color: var(--text-soft); margin-bottom: 10px; }
#bxsk-join .wake_certify_input select, #bxsk-join .wake_certify_input input[type="text"] {
  width: 100%; padding: 11px 14px; margin-bottom: 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); font-family: inherit; font-size: 13px; color: var(--text); outline: none;
}
#bxsk-join .wake_wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px; background: var(--bg-soft); border-radius: var(--r-md); }
#bxsk-join .wake_wrap img { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--r-sm); }
#bxsk-join .wake_wrap .wake_inner { min-width: 0; font-size: 12px; }
#bxsk-join .wake_wrap strong { display: block; margin-bottom: 4px; }
#bxsk-join .wake_wrap ul { list-style: none; margin: 0; padding: 0; color: var(--text-soft); }


/* ---- 히어로 게시판 캐러셀 v3 — 데모 목업(hero-stage/hero-slide) 구조 이식 ----
   2026-07-20: split(.bxsk-hero-pair) → 사용자 제공 데모(index.html/styles.css)의
   .hero/.hero-stage/.hero-slide/.hero-dots/.hero-nav 구조로 전면 교체(사용자 확정 스크린샷 근거).
   배경(navy)은 풀블리드, 실제 콘텐츠(copy+visual)는 var(--container) 폭으로 중앙정렬(데모와 동일 패턴).
   slick 미사용 — 순수 opacity 크로스페이드 + flex(B19 위험 없음). */
#bxsk-main .bxsk-hero-board {
  position: relative;
  background: var(--wssa-navy);
  color: #fff;
  overflow: hidden;
}
#bxsk-main .bxsk-hero-stage { position: relative; height: 420px; }
@media (min-width: 768px)  { #bxsk-main .bxsk-hero-stage { height: 400px; } }
@media (min-width: 1280px) { #bxsk-main .bxsk-hero-stage { height: 460px; } }

#bxsk-main .bxsk-hero-slide {
  position: absolute;
  inset: 0;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  z-index: 1;
  transition: opacity .5s ease;
}
#bxsk-main .bxsk-hero-slide.is-active { opacity: 1; z-index: 2; }
@media (min-width: 768px) {
  #bxsk-main .bxsk-hero-slide { flex-direction: row; align-items: center; gap: 32px; }
}

#bxsk-main .bxsk-hero-copy { flex: 0 0 auto; min-width: 0; padding: 22px 0 14px; }
@media (min-width: 768px)  { #bxsk-main .bxsk-hero-copy { flex: 0 0 44%; padding: 0; } }
@media (min-width: 1280px) { #bxsk-main .bxsk-hero-copy { flex: 0 0 42%; } }

#bxsk-main .bxsk-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wssa-yellow); margin-bottom: 10px;
}
#bxsk-main .bxsk-hero-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--wssa-yellow); flex-shrink: 0; }

#bxsk-main .bxsk-hero-copy h1 {
  font-size: 22px; font-weight: 900; letter-spacing: -.03em; line-height: 1.28; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 1280px) { #bxsk-main .bxsk-hero-copy h1 { font-size: 32px; } }

#bxsk-main .bxsk-hero-date {
  font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.6);
  padding: 10px 0; margin-bottom: 16px; max-width: 320px;
  border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15);
}

#bxsk-main .bxsk-hero-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
#bxsk-main .bxsk-hero-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 20px; font-size: 13.5px; font-weight: 800; border-radius: var(--r-md);
  background: var(--wssa-red); color: #fff; box-shadow: 0 6px 20px rgba(215,38,61,.35);
}
#bxsk-main .bxsk-hero-cta:hover { background: var(--wssa-red-dark); }
#bxsk-main .bxsk-hero-cta-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 20px; font-size: 13.5px; font-weight: 800; border-radius: var(--r-md);
  background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff;
}
#bxsk-main .bxsk-hero-cta-outline:hover { background: rgba(255,255,255,.08); }

#bxsk-main .bxsk-hero-visual { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
#bxsk-main .bxsk-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
#bxsk-main .bxsk-hero-noimg {
  width: 100%; height: 100%; min-height: 140px; display: flex; align-items: center; justify-content: center;
  background: var(--wssa-navy-dark); color: rgba(255,255,255,.5); font-size: 12.5px;
}

/* dots·nav — 개수는 실제 heroSlide 게시글 수만큼 JS가 런타임 생성(정적 3개 고정 아님, 게시글이 3건 미만일 수 있음) */
#bxsk-main .bxsk-hero-dots {
  position: absolute; z-index: 5; left: 20px; bottom: 14px;
  display: flex; gap: 8px;
}
@media (min-width: 768px) {
  #bxsk-main .bxsk-hero-dots { left: max(20px, calc((100% - var(--container)) / 2 + 20px)); }
}
#bxsk-main .bxsk-hero-dots .dot { width: 22px; height: 3px; background: rgba(255,255,255,.28); cursor: pointer; transition: background .15s; }
#bxsk-main .bxsk-hero-dots .dot.active { background: var(--wssa-yellow); }

#bxsk-main .bxsk-hero-nav {
  position: absolute; z-index: 5; right: 16px; bottom: 12px;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 999px; background: rgba(4,21,58,.55);
  color: rgba(255,255,255,.8); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
}
#bxsk-main .bxsk-hero-nav button {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff;
  display: grid; place-items: center; background: transparent; transition: all .15s;
}
#bxsk-main .bxsk-hero-nav button:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.45); }












/* ============================================================
   대회 일정(schedule.php) 전용 컴포넌트 — 2026-07-21 신규
   전역 클래스(#bxsk-main 스코프 아님) — bxsk.css 맨 끝에 이어붙일 것.
   .bxsk-page-hero/.bxsk-container/.bxsk-info-card/.bxsk-tag/.bxsk-btn-*/
   .bxsk-stats/.bxsk-stat는 이미 전역에 있어 재사용, 여기선 신규분만 추가.
   ============================================================ */

/* 서브탭 내비게이션(대회일정/대회결과/실시간기록) — #bxsk-main에 이미 하이픈 없는
   .sub-tabs가 있으나 #bxsk-main 스코프 한정이라 서브페이지(#bxsk-subpage)엔 적용 안 됨.
   그래서 이름을 다르게(.bxsk-sub-tabs) 잡아 전역으로 신설, 값은 동일 톤 유지. */
.bxsk-sub-tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.bxsk-sub-tabs .bxsk-container {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bxsk-sub-tabs a {
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: all .15s;
}
.bxsk-sub-tabs a:hover { color: var(--text); }
.bxsk-sub-tabs a.active { color: var(--wssa-navy); border-bottom-color: var(--wssa-navy); }
.bxsk-sub-tabs a.disabled { color: var(--gray-400); cursor: default; pointer-events: none; }
.bxsk-sub-tabs a.disabled::after { content: ' (준비중)'; font-size: 10px; font-weight: 700; }

/* 필터 툴바 */
.bxsk-schedule-toolbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.bxsk-filter-group { display: flex; align-items: center; gap: 8px; }
.bxsk-filter-group .lbl {
  font-size: 12px; font-weight: 700; color: var(--text-soft);
}
.bxsk-filter-group select {
  font-family: inherit;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg);
  color: var(--text);
}
.bxsk-schedule-toolbar .bxsk-btn-outline { margin-left: auto; }

/* 뷰 전환(월간/리스트) */
.bxsk-view-switch { display: flex; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; margin-left: auto; }
.bxsk-view-switch a { padding: 6px 14px; font-size: 12px; font-weight: 700; color: var(--text-soft); background: var(--bg); }
.bxsk-view-switch a.active { background: var(--wssa-navy); color: #fff; }

/* 월간 캘린더 */
.bxsk-cal-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 20px; }
.bxsk-cal-head { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.bxsk-cal-head .month { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; font-family: var(--font-mono); display: flex; align-items: baseline; gap: 8px; }
.bxsk-cal-head .month .y { font-size: 13px; color: var(--text-soft); }
.bxsk-cal-nav { display: flex; align-items: center; gap: 8px; }
.bxsk-cal-nav .arrow { width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: 4px; display: grid; place-items: center; color: var(--text-muted); font-size: 16px; }
.bxsk-cal-nav .today { padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 4px; font-size: 12px; font-weight: 700; color: var(--text); }
.bxsk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.bxsk-cal-dow { padding: 10px 6px; text-align: center; font-size: 11px; font-weight: 800; color: var(--text-soft); background: var(--bg-soft); border-bottom: 1px solid var(--border); letter-spacing: .05em; }
.bxsk-cal-dow.sun { color: var(--wssa-red); }
.bxsk-cal-dow.sat { color: var(--wssa-blue); }
.bxsk-cal-cell { min-height: 96px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.bxsk-cal-cell:nth-child(7n) { border-right: none; }
.bxsk-cal-cell.muted { background: var(--bg-soft); color: var(--text-soft); }
.bxsk-cal-cell .date { font-size: 11px; font-weight: 700; margin-bottom: 4px; font-family: var(--font-mono); }
.bxsk-cal-cell.today .date { background: var(--wssa-navy); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; }
.bxsk-cal-cell.sun .date { color: var(--wssa-red); }
.bxsk-cal-cell.sat .date { color: var(--wssa-blue); }
.bxsk-cal-event { display: block; padding: 2px 5px; font-size: 9.5px; font-weight: 700; border-radius: 2px; margin-bottom: 2px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.bxsk-cal-event.navy { background: rgba(10,46,110,.1); color: var(--wssa-navy); }
.bxsk-cal-event.yellow { background: rgba(255,199,44,.2); color: var(--wssa-navy); }
.bxsk-cal-event.red { background: rgba(215,38,61,.1); color: var(--wssa-red-dark); }
.bxsk-cal-event.purple { background: rgba(109,63,166,.12); color: var(--wssa-purple); }
.bxsk-cal-event.blue { background: rgba(30,91,191,.1); color: var(--wssa-blue); }
.bxsk-cal-event.green { background: rgba(31,138,91,.1); color: var(--wssa-green); }
.bxsk-cal-event.more { background: transparent; color: var(--text-soft); font-weight: 800; }
.bxsk-cal-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 12px 16px; font-size: 12px; color: var(--text-muted); }
.bxsk-cal-legend .item { display: inline-flex; align-items: center; gap: 6px; }
.bxsk-cal-legend .dot { width: 12px; height: 4px; border-radius: 1px; display: inline-block; }
.bxsk-cal-legend .dot.navy { background: var(--wssa-navy); }
.bxsk-cal-legend .dot.yellow { background: var(--wssa-yellow); }
.bxsk-cal-legend .dot.red { background: var(--wssa-red); }
.bxsk-cal-legend .dot.purple { background: var(--wssa-purple); }

@media (max-width: 768px) {
  .bxsk-cal-cell { min-height: 56px; }
  .bxsk-cal-event { font-size: 8.5px; }
}

/* v3 모바일 정리 (2026-07-21) */
.bxsk-schedule-kpi { margin-bottom: 20px; }
.bxsk-filter-group select { min-width: 88px; }

@media (max-width: 480px) {
  .bxsk-schedule-toolbar { padding: 12px 14px; gap: 10px 14px; }
  .bxsk-filter-group .lbl { font-size: 11px; }
  .bxsk-filter-group select { min-width: 0; flex: 1; padding: 6px 8px; }
  .bxsk-cal-head .month { font-size: 17px; }
  .bxsk-cal-cell { min-height: 46px; padding: 4px; }
  .bxsk-cal-event { font-size: 7.5px; padding: 1px 3px; }
  .bxsk-cal-dow { font-size: 9.5px; padding: 8px 2px; }
  .bxsk-schedule-row .date-block .d { font-size: 20px; }
}

/* ============================================================
   대회 결과(tournament_results.php) 전용 컴포넌트 — 2026-07-21 신규
   ============================================================ */

.bxsk-results-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }

.bxsk-results-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; position: sticky; top: 20px; }
.bxsk-results-side .head { padding: 14px 16px; background: var(--bg-soft); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 900; display: flex; justify-content: space-between; }
.bxsk-results-side .item { padding: 12px 16px; border-bottom: 1px solid var(--border); display: block; text-decoration: none; transition: background .15s; }
.bxsk-results-side .item:last-child { border-bottom: none; }
.bxsk-results-side .item:hover { background: var(--bg-soft); }
.bxsk-results-side .item.active { background: var(--bg-soft); border-left: 3px solid var(--wssa-navy); padding-left: 13px; }
.bxsk-results-side .item .date { font-size: 11px; color: var(--text-soft); font-family: var(--font-mono); margin-bottom: 4px; }
.bxsk-results-side .item .title { font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.4; letter-spacing: -.02em; margin-bottom: 6px; }

.bxsk-results-header { background: var(--wssa-navy); color: #fff; padding: 28px; border-radius: var(--r-md); margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.bxsk-results-header .label { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--wssa-yellow); margin-bottom: 8px; }
.bxsk-results-header h2 { font-size: 24px; font-weight: 900; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 8px; }
.bxsk-results-header .meta { display: flex; gap: 20px; font-size: 12px; color: rgba(255,255,255,.7); flex-wrap: wrap; }
.bxsk-results-header .meta b { color: #fff; }
.bxsk-results-header .stat-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bxsk-results-header .stat-mini .item { padding: 0 16px; text-align: center; border-left: 1px solid rgba(255,255,255,.15); }
.bxsk-results-header .stat-mini .item:first-child { border-left: none; }
.bxsk-results-header .stat-mini .v { font-size: 22px; font-weight: 900; font-family: var(--font-mono); }
.bxsk-results-header .stat-mini .l { font-size: 11px; color: rgba(255,255,255,.6); font-weight: 700; margin-top: 2px; }

.bxsk-event-tabs { display: flex; gap: 4px; margin-bottom: 18px; flex-wrap: wrap; }
.bxsk-event-tabs a { padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; font-weight: 700; color: var(--text-muted); text-decoration: none; }
.bxsk-event-tabs a:hover { border-color: var(--wssa-navy); }
.bxsk-event-tabs a.active { background: var(--wssa-navy); color: #fff; border-color: var(--wssa-navy); }

.bxsk-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 24px; align-items: end; }
.bxsk-podium .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px 20px; text-align: center; }
.bxsk-podium .step.gold { border-top: 4px solid var(--wssa-yellow); padding-top: 32px; }
.bxsk-podium .step.silver { border-top: 4px solid var(--gray-400); }
.bxsk-podium .step.bronze { border-top: 4px solid #B87333; }
.bxsk-podium .place { font-family: var(--font-mono); font-size: 32px; font-weight: 900; line-height: 1; margin-bottom: 12px; }
.bxsk-podium .gold .place { color: var(--wssa-yellow-deep); }
.bxsk-podium .silver .place { color: var(--gray-500); }
.bxsk-podium .bronze .place { color: #B87333; }
.bxsk-podium .avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--wssa-navy), var(--wssa-blue)); color: #fff; display: grid; place-items: center; margin: 0 auto 10px; font-size: 15px; font-weight: 900; }
.bxsk-podium .silver .avatar { background: linear-gradient(135deg, var(--gray-400), var(--gray-600)); }
.bxsk-podium .name { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.bxsk-podium .affil { font-size: 11px; color: var(--text-soft); margin-bottom: 10px; }
.bxsk-podium .time { font-family: var(--font-mono); font-size: 20px; font-weight: 900; color: var(--text); }
.bxsk-podium .time-label { font-size: 10px; color: var(--text-soft); font-weight: 700; margin-top: 2px; }

.bxsk-results-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }
.bxsk-results-table th { padding: 10px 12px; background: var(--bg-soft); border-bottom: 1px solid var(--border); text-align: left; font-size: 11px; font-weight: 800; color: var(--text-soft); }
.bxsk-results-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.bxsk-results-table td.top1 { color: var(--wssa-yellow-deep); font-weight: 900; }
.bxsk-results-table td.top2, .bxsk-results-table td.top3 { font-weight: 800; color: var(--text-soft); }

/* [2026-08-07 신규] 전역에 빠져있던 범용 테이블 클래스 — 오늘 promotion_tournament.php에서
   발견(스타일 없이 브라우저 기본 테이블로 표시되던 실사고), grep으로 확인해보니
   RecordRequestController/SchoolclubDivisionManageMyController 등 최소 7개 Front 셀프서비스
   컨트롤러가 이미 이 클래스명을 쓰고 있었음(전부 같은 미스터리한 누락 버그를 안고 있었던 것) —
   .bxsk-results-table과 동일한 시각언어로 신규 작성해 한 번에 해소. */
.bxsk-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.bxsk-table th { padding: 10px 12px; background: var(--bg-soft); border-bottom: 1px solid var(--border); text-align: left; font-size: 11px; font-weight: 800; color: var(--text-soft); }
.bxsk-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.bxsk-table tr:last-child td { border-bottom: none; }

@media (max-width: 900px) {
  .bxsk-results-layout { grid-template-columns: 1fr; }
  .bxsk-results-side { position: static; }
}
@media (max-width: 600px) {
  .bxsk-podium { grid-template-columns: 1fr; }
  .bxsk-podium .step.gold { order: -1; }
}

/* 대회 목록 */
.bxsk-schedule-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.bxsk-schedule-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.bxsk-schedule-row:last-child { border-bottom: none; }
.bxsk-schedule-row:hover { background: var(--bg-soft); }
.bxsk-schedule-row .date-block { text-align: center; }
.bxsk-schedule-row .date-block .m { font-size: 10px; font-weight: 800; color: var(--wssa-navy); }
.bxsk-schedule-row .date-block .d { font-family: var(--font-mono); font-size: 24px; font-weight: 900; line-height: 1; color: var(--text); margin: 2px 0; }
.bxsk-schedule-row .date-block .w { font-size: 11px; color: var(--text-soft); font-weight: 700; }
.bxsk-schedule-row .title-block .name { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.bxsk-schedule-row .title-block .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.bxsk-schedule-row .meta { font-size: 12px; color: var(--text-muted); text-align: right; white-space: nowrap; }
.bxsk-schedule-row .meta .l { font-size: 10px; color: var(--text-soft); font-weight: 700; display: block; margin-bottom: 2px; }
.bxsk-schedule-row .status { text-align: center; }

.bxsk-schedule-empty { padding: 48px 20px; text-align: center; color: var(--text-soft); font-size: 13.5px; }

@media (max-width: 768px) {
  .bxsk-schedule-row { grid-template-columns: 60px 1fr; }
  .bxsk-schedule-row .meta, .bxsk-schedule-row .status, .bxsk-schedule-row .action { grid-column: 2; text-align: left; }
  .bxsk-schedule-row .action { margin-top: 4px; }
}

[data-theme="dark"] .bxsk-sub-tabs a.active { color: var(--wssa-yellow); border-bottom-color: var(--wssa-yellow); }

/* ============================================================
   히어로 네비게이션(.bxsk-hero-nav) 목업 대조 수정 — 2026-07-21
   기존 규칙(우하단 고정+어두운 알약형 배경+26px 버튼)이 목업(.hero-nav:
   하단중앙+배경없음+36px 버튼+gap 16px)과 달라 사용자 지적으로 재작성.
   같은 선택자를 파일 뒤쪽(bxsk.css 맨 끝에 이어붙임)에서 재선언 → 캐스케이드 우선순위로 덮어씀.
   ============================================================ */
#bxsk-main .bxsk-hero-nav {
  position: absolute; z-index: 5; left: 50%; right: auto; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  background: none; padding: 0; border-radius: 0;
  color: rgba(255,255,255,.7); font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}
#bxsk-main .bxsk-hero-nav button {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); color: #fff;
  display: grid; place-items: center; background: transparent; transition: all .15s;
}
#bxsk-main .bxsk-hero-nav button:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }
#bxsk-main .bxsk-hero-nav .counter { min-width: 60px; text-align: center; }
#bxsk-main .bxsk-hero-nav .counter b { color: #fff; }



/* B18-1 #2와 동일한 벤더 800px 고정폭 버그 — 마이페이지 측면감춤 적용판 (근거: E-135 패턴 재사용) */
body.body-mypage .sub_content .content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}