/* ============================================================
   프리바다 껍데기 CSS — 여기 하나만 고치면 모든 페이지에 적용됩니다.

   쓰는 곳 : 메인(bp-test.php) · 게시판 스킨 3개(FB-List / FB-Sched / FB-Member)
   전에는 이 내용이 4곳에 복사돼 있어서 한 곳만 고치면 나머지가 안 바뀌었습니다.
   [2026-08-23] 하나로 합쳤습니다.

   ── 왼쪽 메뉴 게임 아이콘 크기를 바꾸려면 아래 두 값만 고치세요 ──
        --ic-size  : 아이콘 동그라미 지름 (지금 22px)
        --ic-zoom  : 그림을 동그라미 안에서 확대하는 배율 (지금 1.32)
   그림 파일은 img/game/ 폴더에 있습니다.
   ============================================================ */

:root{
	--ic-size: 22px;
	/* [2026-08-23] 1.32 → 1 로. 확대하면 아이콘 가장자리가 잘려나간다.
	   던파처럼 원형으로 만들어진 문양은 테두리가 통째로 날아갔다.
	   원본 파비콘은 이미 딱 맞게 만들어져 있으므로 확대하지 않는다. */
	--ic-zoom: 1;

	/* 가운데 게임 아이콘 줄(메인 검색창 아래)의 그림 배율.
	   1 이면 동그라미를 꽉 채우고, 작을수록 그림이 줄어 흰 여백이 생깁니다. */
	--ico-zoom: 0.82;

	/* 오픈 예정 위의 게임 고르기 칩 안에 들어가는 로고 배율 */
	--chip-zoom: 0.80;
}

/* 왼쪽 메뉴 아이콘 — 메인과 게시판이 클래스 이름이 달라서 둘 다 적어둡니다.
   (메인은 .bp-side, 게시판·회원 페이지는 .fbp-side) */
.bp-side .ic,
.fbp-side .ic{
	width:var(--ic-size);height:var(--ic-size);flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	font-size:12px;border-radius:50%;overflow:hidden;background:#fff;
	/* [2026-08-23] 아이콘 둘레의 흰 테두리 제거(사용자 요청).
	   되살리려면 아래 줄의 주석을 풀 것:
	   border:1px solid rgba(255,255,255,.35); */
	border:0}
.bp-side .ic img,
.fbp-side .ic img{
	width:100%;height:100%;object-fit:cover;display:block;
	transform:scale(var(--ic-zoom))}
.bp-side .ic .fa,
.fbp-side .ic .fa{color:#8b8892;font-size:11px}

/* 가운데 게임 아이콘 줄 — 동그라미 크기(44px)는 그대로 두고 그림만 줄인다.
   [2026-08-24] 전에는 1.32배 확대라 그림 가장자리가 잘려나갔다. */
.bp-ico i img{width:100%;height:100%;object-fit:contain;display:block;
	transform:scale(var(--ico-zoom))}

/* 게임 고르기 칩 안의 로고 — 동그라미(20px)는 그대로, 그림만 줄인다.
   [2026-08-24] 전에는 1.32배 확대라 로고가 잘려 이상하게 보였다. */
.bp-fchip .gdot img{width:100%;height:100%;object-fit:contain;display:block;
	transform:scale(var(--chip-zoom))}

/* ─────────── 아래는 게시판·회원 페이지 껍데기 (상단바·왼쪽메뉴·하단띠) ─────────── */
/* FB-Purple 껍데기 — 상단 바 · 두 번째 줄 메뉴 · 왼쪽 메뉴 · 하단 띠
   [2026-08-21] bp-test.php 에서 다듬은 값을 그대로 옮긴 것 (betPARX 실측 기준).
   테마 머리를 끈 페이지(page_sub=1)에서만 쓰인다.
   이 파일은 겉모양만 정한다. 게시판 동작은 bbs/board.php 가 맡는다.

   되돌리기 : 테마를 BS4-Basic 으로 바꾸면 이 파일은 아예 안 불린다.
              머리·꼬리 원본은 theme/FB-Purple/_head_original_header.txt,
              _tail_original_footer.txt 에 그대로 보관돼 있다. */

:root{
	--fbp-navy:#190532;
	--fbp-hover:#220745;
	--fbp-side-t:#ccc8d2;   /* 왼쪽 메뉴 기본 글자 */
	--fbp-accent:#c100e3;   /* 선택 항목 왼쪽 세로바 */
	--fbp-red:#e61e37;
}

/* 하단 띠 아래로 같은 색이 이어지게 — 내용이 짧아도 흰 띠가 안 생긴다 */
body{background:var(--fbp-navy)}

/* ── 상단 바 ──────────────────────────────────────────────
   구분선을 border 로 그리면 바가 1px 높아진다. inset 그림자로 그려야 72px 이 유지된다. */
.fbp-top{background:var(--fbp-navy);box-shadow:inset 0 -1px 0 rgba(255,255,255,.32)}
.fbp-top .in{display:flex;align-items:center;gap:26px;height:72px;padding:0 77px}
.fbp-logo{font-size:22px;font-weight:900;letter-spacing:-.04em;color:#fff}
.fbp-logo a{color:#fff;text-decoration:none}
.fbp-logo b{color:#ffd24d}
.fbp-logo.ref{line-height:0}
.fbp-logo.ref img{width:120px;height:16px;display:block}
/* [2026-08-23] 우리 로고 — 비율 9.3:1 이라 높이만 정하고 폭은 알아서 */
.fbp-logo.own{line-height:0}
/* [2026-11-02] 로고 교체 — 18px → 46px(휴대폰 15 → 34). 메인 bp-test.php 와 같은 값. 옛 로고 img/logo-fb-old.png */
.fbp-logo.own img{height:46px;width:auto;display:block}
.fbp-auth{margin-left:auto;display:flex}   /* 간격은 버튼 margin 7px 로 (실측) */

/* 로그인 / 회원가입 — 실측값 그대로 (소수점 포함) */
.fbp-btn{display:block;box-sizing:border-box;height:32.0312px;min-width:88.018px;
	padding:0 12.796px;border-width:1px;border-style:solid;border-radius:24.0188px;
	font-family:"MADEOuterSans-Medium","Pretendard Variable",Pretendard,sans-serif;
	font-size:12.0094px;font-weight:400;line-height:30.8px;letter-spacing:.5px;
	text-transform:uppercase;text-align:center;position:relative;overflow:hidden;cursor:pointer;
	white-space:nowrap;text-decoration:none}
a.fbp-btn-g{width:88.0156px;margin:0 7px 0 0;border-color:transparent;color:#fff;
	background-color:rgb(230,30,55);
	background-image:linear-gradient(rgb(25,5,50),rgb(25,5,50)),
	                 linear-gradient(to right,rgb(230,30,55) 0px,rgb(167,0,196) 35%,rgb(90,0,120) 75%);
	background-origin:padding-box,border-box;
	background-clip:padding-box,border-box}
a.fbp-btn-w{width:90.125px;margin:0 0 0 7px;border-color:transparent;
	background-color:#fff;color:rgb(25,5,50)}
a.fbp-btn-g:hover{color:#fff;
	background-image:linear-gradient(rgb(25,5,50),rgb(25,5,50)),
	                 linear-gradient(rgb(230,30,55),rgb(230,30,55))}
a.fbp-btn-w:hover{background-color:rgb(230,30,55);color:#fff}

/* ── 두 번째 줄 메뉴 ──────────────────────────────────────
   높이 50px, 글자 14px, 항목 좌우 여백 13px (실측).
   굵기는 CSS 숫자가 아니라 실제 획 두께로 맞춘 값이다(600). */
.fbp-sub{background:var(--fbp-navy);box-shadow:inset 0 -1px 0 rgba(255,255,255,.18)}
.fbp-sub .in{display:flex;align-items:center;gap:12px;height:50px;padding:0 64px;
	font-size:14px;font-weight:600;letter-spacing:.5px}
.fbp-sub .in > a{padding:0 13px}
.fbp-sub a{color:#fff;display:flex;align-items:center;gap:6px;
	height:100%;align-self:stretch;position:relative;text-decoration:none}
.fbp-sub a:hover{color:#fff;text-decoration:none}
/* 호버 밑줄 — 테두리가 아니라 ::after 막대. 왼쪽 아래에서 퍼지는 원형 그라데이션 */
.fbp-sub a:hover::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2.8px;
	background:radial-gradient(100% 218.35% at 0% 100%,
		#ffc30a 0%, #ff7d0f 22.4%, #e21930 50.52%, #af008c 78.65%, #5a0078 100%)}
/* 고객센터 — 실측 182x48 · padding 0 12.74px · 14px · 자간 0.5px */
.fbp-sub a.cs{box-sizing:border-box;height:48.0156px;padding:0 12.74px;gap:9px;
	color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;white-space:nowrap;
	align-items:center;justify-content:center;transition:opacity .3s cubic-bezier(0,0,0,1)}
.fbp-sub a.cs:hover{opacity:.85}
.fbp-sub a .mi{width:25px;height:25px;flex:0 0 auto;
	background-size:contain;background-position:center;background-repeat:no-repeat}
/* [2026-08-23] 아이콘을 그림파일 대신 코드(SVG)로 그린다. 색은 글자색을 따라간다 */
.fbp-sub a .mi svg{width:100%;height:100%;display:block;color:#fff}


/* ── 뼈대 ─────────────────────────────────────────────────
   왼쪽 메뉴 + 본문을 가로로. 화면 높이만큼 억지로 늘리지 않는다
   (늘리면 내용이 짧을 때 하단 띠가 아래로 밀려 여백이 커진다). */
.fbp-body{display:flex;align-items:stretch}
.fbp-main{flex:1 1 auto;min-width:0;background:#f4f6fa}

/* 왼쪽 메뉴 — 폭 256px, 항목 높이 32px, 글자 14px/800 (실측).
   세로바 자리는 모든 항목에 투명으로 잡아둬서 선택돼도 글자가 안 밀린다. */
.fbp-side{flex:0 0 256px;width:256px;background:var(--fbp-navy);padding:14px 0}
.fbp-side a{display:flex;align-items:center;gap:9px;height:32px;padding:0 20px 0 16px;
	color:var(--fbp-side-t);font-size:14px;font-weight:800;
	border-left:4px solid transparent;text-decoration:none}
.fbp-side a:hover{background:var(--fbp-hover);color:#fff;text-decoration:none}
.fbp-side a.on{color:#fff;background:transparent;border-left-color:var(--fbp-accent)}
.fbp-side .n{margin-left:auto;font-size:11px;font-weight:800;color:var(--fbp-side-t);
	font-variant-numeric:tabular-nums}
.fbp-side a.on .n{color:#fff}
/* 아이콘 규칙은 이 파일 맨 위로 옮겼습니다 */
.fbp-sec{padding:0 20px;margin:16px 0 8px}
/* 유저홍보 구역 — 위쪽 게임 목록과 구분되게 선을 하나 넣는다 */
.fbp-sec.up{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.fbp-sec h3{margin:0;font-size:10px;font-weight:500;color:#fff;letter-spacing:.1em}

/* 본문 안쪽 여백 — 목록이 껍데기에 붙지 않게 */
.fbp-main{padding:18px 22px 70px}

/* ── 하단 띠 ─────────────────────────────────────────────── */
.fbp-foot{background:var(--fbp-navy);color:#fff;padding:26px 18px 0;border:0}
.fbp-foot .in{display:flex;flex-wrap:wrap;gap:26px 40px;max-width:1200px;
	justify-content:center;margin:0 auto}
.fbp-foot .col{min-width:150px}
.fbp-foot .col.about{flex:1 1 260px;max-width:420px}
/* [2026-09-06] 게임 10개가 한 칸에 들어가면서 세로로 길어졌다. 2열로 흘린다. */
.fbp-foot .col.games{flex:0 1 340px;min-width:300px}
.fbp-foot .col.games .list{column-count:2;column-gap:22px}
.fbp-foot h4{margin:0 0 10px;font-size:12.5px;font-weight:800;color:#fff}
.fbp-foot a{display:block;font-size:12px;color:rgba(255,255,255,.72);padding:3px 0;
	text-decoration:none}
.fbp-foot a:hover{color:#fff;text-decoration:none}
.fbp-foot p{margin:0 0 8px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.72)}
.fbp-foot .links{display:flex;gap:14px}
.fbp-foot .links a{display:inline-block;padding:0}
.fbp-foot .bar{margin-top:22px;padding:12px 0;border-top:1px solid rgba(255,255,255,.18);
	font-size:11.5px;color:rgba(255,255,255,.55);text-align:center}

@media (max-width:900px){
	.fbp-side{display:none}
	.fbp-top .in{padding:0 14px;gap:14px}
	/* [2026-09-05] 두 번째 줄 메뉴를 가로 스크롤로 바꾼다.
	   전에는 overflow-x 만 줬는데, 그러면 항목이 flex 기본값대로 찌그러져서
	   글자가 "서 버" 처럼 세로로 터졌다. 자식에 flex:0 0 auto 를 주는 게 핵심이다.
	   (햄버거로 숨기지 않는 이유 : 게임별 메뉴가 이 사이트의 알맹이다) */
	.fbp-sub .in{padding:0 14px;gap:0;overflow-x:auto;overflow-y:hidden;
		-webkit-overflow-scrolling:touch;scrollbar-width:none}
	.fbp-sub .in::-webkit-scrollbar{display:none}
	.fbp-sub .in > a{flex:0 0 auto;white-space:nowrap}
}

/* ── 휴대폰 ───────────────────────────────────────────────
   [2026-09-05] 390px 에서 로고와 버튼 2개가 한 줄에 안 들어가
   SIGN UP 이 화면 밖으로 밀려나 있었다. 실측 고정폭을 여기서만 푼다. */
@media (max-width:560px){
	.fbp-top .in{height:56px;gap:8px;padding:0 12px}
	.fbp-logo.own img{height:34px}
	.fbp-logo.ref img{width:100px;height:13px}
	.fbp-btn{height:28px;min-width:0;width:auto;padding:0 11px;
		font-size:11px;line-height:26px;letter-spacing:.3px}
	a.fbp-btn-g{width:auto;margin:0 5px 0 0}
	a.fbp-btn-w{width:auto;margin:0}

	.fbp-sub .in{height:46px;font-size:13px;padding:0 8px}
	.fbp-sub .in > a{padding:0 9px}
	.fbp-sub a .mi{width:20px;height:20px}
	.fbp-sub a.cs{height:46px;padding:0 9px;font-size:13px;gap:6px}

	.fbp-main{padding:10px 8px 44px}

	/* [2026-09-06] 하단 띠 — 폰에서 흐트러져 보이던 것을 격자로 바로잡는다.
	   원인은 .in 의 justify-content:center 였다. 칸이 줄바꿈되면 마지막 한 칸이
	   혼자 가운데로 밀려서("문의") 왼쪽 기준선이 무너졌다.
	   2열 격자로 바꾸면 모든 제목이 같은 세로선에서 시작한다. */
	.fbp-foot{padding:22px 16px 0}
	/* [2026-09-06] 2열이면 커뮤니티/정보 다음 줄에 문의만 남아 옆이 비었다.
	   작은 칸 3개(커뮤니티·정보·문의)를 한 줄에 넣어 빈칸을 없앤다. */
	.fbp-foot .in{display:grid;grid-template-columns:repeat(3,1fr);
		gap:20px 10px;justify-content:stretch;justify-items:start}
	.fbp-foot .col{min-width:0}
	.fbp-foot .col.games{grid-column:1 / -1;flex:none;min-width:0;max-width:none;
		justify-self:stretch}
	.fbp-foot .col.games .list{column-gap:14px}
	.fbp-foot .col.about{grid-column:1 / -1;flex:none;max-width:none}
	.fbp-foot h4{margin-bottom:6px;font-size:12px}
	.fbp-foot a{padding:2.5px 0}
	.fbp-foot .bar{margin-top:16px}
}

/* ── [2026-09-10] 글꼴 통일 — 메인과 게시판이 서로 달랐다 ──────────────
   메인(bp-test.php)은 Pretendard, 게시판은 나리야 테마가 들고 온
   theme/BS4-Basic/css/font/NEXON-Gothic-14px.css 의 "NEXON Lv2 Gothic" 을 썼다.
   글자 크기(px)가 같아도 글꼴이 다르면 크기가 달라 보인다(실측 확인).

   그 파일이 !important 로 걸어놔서 여기서도 !important 로 덮어야 이긴다.
   이 파일은 CSS 중 맨 마지막에 불리므로 순서상 이긴다.
   대상은 그 파일이 건드리는 선택자와 똑같이 맞췄다 — 더 넓게 잡으면
   아이콘 글꼴(FontAwesome)까지 덮어써서 아이콘이 전부 네모가 된다.

   되돌리기 : 이 블록만 지우면 원래 넥슨 고딕으로 돌아간다. */
body,
h1, h2, h3, h4, h5, h6, .en,
.f-md, .f-mo, .f-lg, .f-xl{
	font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
		"Apple SD Gothic Neo","Malgun Gothic",sans-serif !important;
}