@charset "utf-8";
/* ============================================================
   BS4-Free-Slot — 무료슬롯 체험 게시판
   PRAG TV 컨셉 (브랜드 블루 + 다크) — 자유게시판/스트리밍 스킨과 동일 팔레트
   ============================================================ */
.fs-board, .fs-view {
	--brand:#5b7bff; --brand-strong:#3f5be0; --brand-light:#7aa2ff; --brand-soft:#1c2748;
	--surface:#171a21; --surface-2:#1d212a; --line:#272b35;
	--text:#eef1f6; --text-sub:#a4acba; --text-mute:#6f7886;
	font-family:'Pretendard','Noto Sans KR',sans-serif; color:var(--text);
}
.fs-board *, .fs-view * { box-sizing:border-box; }
.fs-board a, .fs-view a { text-decoration:none; color:inherit; }

/* ───────── 목록: 카테고리 탭 (한 줄 슬라이드, 자유게시판 fv-tab 컨셉) ───────── */
.fs-cats-wrap { margin-bottom:22px; position:relative; }
.fs-cats { display:flex; flex-wrap:nowrap; gap:6px 4px; padding:14px 10px; background:var(--surface); border:1px solid var(--line); border-radius:12px 12px 0 0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; -webkit-overflow-scrolling:touch; }
.fs-cats::-webkit-scrollbar { display:none; }
.fs-cats.is-dragging { cursor:grabbing; scroll-behavior:auto; }
.fs-cats.is-dragging .fs-cat { pointer-events:none; }
.fs-cat { flex-shrink:0; padding:10px 16px; border-radius:20px; font-size:15px; font-weight:600; color:var(--text-sub); white-space:nowrap; transition:color .15s, background .15s; user-select:none; }
.fs-cat:hover { color:var(--text); background:rgba(255,255,255,.05); }
.fs-cat.on { background:var(--brand); color:#fff; font-weight:800; }
.fs-cats-line { height:4px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,var(--brand-strong),var(--brand-light)); }

/* ───────── 목록: 툴바 ───────── */
.fs-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.fs-total { font-size:14px; color:var(--text-sub); }
.fs-total b { color:var(--brand); }
.fs-write { display:inline-flex; align-items:center; gap:6px; background:var(--brand); color:#fff; font-size:14px; font-weight:700; padding:9px 16px; border-radius:9px; }
.fs-write:hover { background:var(--brand-strong); color:#fff; }

/* ───────── 목록: 카드 그리드 ───────── */
.fs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.fs-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s; }
.fs-card:hover { transform:translateY(-4px); border-color:var(--brand); box-shadow:0 10px 28px rgba(0,0,0,.45); }
/* 이미지 영역: padding-top 비율(전 브라우저 호환) + 절대배치 → 비율 100% 고정 */
.fs-card__imgwrap { position:relative; display:block; width:100%; height:0; padding-top:58.33%; background:#10131a; overflow:hidden; }
.fs-card__img { position:absolute; top:0; left:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; transition:transform .25s; }
.fs-card:hover .fs-card__img { transform:scale(1.04); }
.fs-card__noimg { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:44px; opacity:.5; }
.fs-card__body { padding:14px 12px 16px; text-align:center; }
.fs-card__title { display:block; font-size:17px; font-weight:800; color:var(--text); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fs-card__provider { display:block; margin-top:5px; font-size:13.5px; color:var(--brand); font-weight:600; }

/* New 리본 (7일 이내 등록) */
.fs-card__new { position:absolute !important; top:14px; right:-32px; z-index:3; transform:rotate(45deg); width:120px; text-align:center; padding:5px 0; background:linear-gradient(120deg,var(--brand-strong),var(--brand) 60%,var(--brand-light)) !important; color:#fff !important; font-size:12px; font-weight:800; letter-spacing:.5px; line-height:1.4; box-shadow:0 3px 10px rgba(0,0,0,.35); }

/* 플레이 오버레이 — 호버 시 동심원 펄스 애니메이션 */
.fs-card__playov { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; background:rgba(8,11,22,.45); opacity:0; transition:opacity .25s ease; }
.fs-card:hover .fs-card__playov { opacity:1; }
.fs-card__playbtn { position:relative; width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--brand-strong),var(--brand)); color:#fff; font-size:20px; box-shadow:0 8px 24px rgba(63,91,224,.55); }
.fs-card__playbtn i { margin-left:4px; }
.fs-card__playbtn::before, .fs-card__playbtn::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--brand-light); opacity:0; }
.fs-card:hover .fs-card__playbtn::before { animation:fsRing 1.6s ease-out infinite; }
.fs-card:hover .fs-card__playbtn::after { animation:fsRing 1.6s ease-out .55s infinite; }
@keyframes fsRing { 0%{transform:scale(1);opacity:.85} 100%{transform:scale(1.9);opacity:0} }

/* 게임시작 버튼 — 브랜드 글로우 + 광택 스윕 (스트리밍 버튼과 동일 무드) */
.fs-card__start { position:relative; display:inline-flex !important; align-items:center; justify-content:center; gap:8px; margin-top:12px; height:40px; padding:0 30px; border-radius:20px; background:linear-gradient(120deg,var(--brand-strong),var(--brand) 55%,var(--brand-light)) !important; color:#fff !important; font-size:14.5px; font-weight:800; overflow:hidden; box-shadow:0 4px 14px rgba(91,123,255,.35); animation:fsGlow 2.6s ease-in-out infinite; transition:transform .15s; }
.fs-card__start i { font-size:11px; }
.fs-card:hover .fs-card__start { transform:translateY(-2px); }
.fs-card__start::before { content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-22deg); animation:fsShine 3.2s ease-in-out infinite; }
@keyframes fsGlow { 0%,100%{box-shadow:0 4px 14px rgba(91,123,255,.30)} 50%{box-shadow:0 6px 24px rgba(91,123,255,.62)} }
@keyframes fsShine { 0%{left:-70%} 55%,100%{left:130%} }
@media (prefers-reduced-motion:reduce) { .fs-card__start, .fs-card__start::before, .fs-card__playbtn::before, .fs-card__playbtn::after { animation:none !important; } }
.fs-empty { grid-column:1/-1; padding:70px 0; text-align:center; color:var(--text-mute); background:var(--surface); border:1px dashed var(--line); border-radius:12px; }

/* 페이징 (자유게시판과 동일 컨셉) */
.fs-foot { margin-top:26px; }
.fs-foot .pagination { display:flex; list-style:none; gap:6px; padding:0; flex-wrap:wrap; margin:0; }
.fs-foot .page-link { display:block; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text-sub); font-size:14px; }
.fs-foot .page-item.active .page-link, .fs-foot .page-link:hover { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ───────── 상세: 제목/소개 ───────── */
.fs-vhead { margin-bottom:16px; }
.fs-vtitle { margin:0; font-size:26px; font-weight:800; color:var(--text); line-height:1.35; }
.fs-intro { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; font-size:15px; line-height:1.8; color:var(--text-sub); margin-bottom:20px; word-break:break-word; }
.fs-intro img { max-width:100%; height:auto; border-radius:8px; }

/* ───────── 상세: 게임 프레임 ───────── */
.fs-game { border-radius:12px; overflow:hidden; border:1px solid var(--line); margin-bottom:20px; background:#000; }
.fs-game__bar { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:linear-gradient(120deg,var(--brand-strong),var(--brand) 60%,var(--brand-light)); }
.fs-game__name { font-size:16px; font-weight:800; color:#fff; }
.fs-game__full { background:none; border:none; color:#fff; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:4px 6px; }
.fs-game__full:hover { opacity:.85; }
.fs-game__stage { position:relative; width:100%; height:0; padding-top:56.25%; background-size:cover; background-position:center; background-color:#10131a; }
.fs-game__stage::before { content:""; position:absolute; inset:0; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); background:rgba(5,8,16,.35); }
.fs-game__stage.is-playing::before { display:none; }
.fs-game__overlay { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; }
.fs-game__iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }
.fs-play { display:inline-flex; align-items:center; gap:14px; min-width:300px; justify-content:center; padding:16px 34px; border-radius:12px; border:1px solid rgba(255,255,255,.3); background:linear-gradient(135deg,var(--brand-strong),var(--brand)); color:#fff; cursor:pointer; box-shadow:0 10px 30px rgba(63,91,224,.45); transition:transform .15s, box-shadow .15s; }
.fs-play:hover { transform:scale(1.03); box-shadow:0 14px 38px rgba(63,91,224,.6); }
.fs-play--off { background:#3a3d45; cursor:default; box-shadow:none; }
.fs-play__ico { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.fs-play__txt { text-align:left; line-height:1.3; }
.fs-play__txt b { display:block; font-size:20px; font-weight:800; }
.fs-play__txt small { font-size:13px; opacity:.9; }
.fs-affbtn { display:inline-flex; align-items:center; gap:9px; min-width:300px; justify-content:center; padding:13px 30px; border-radius:12px; border:1px solid var(--brand); background:rgba(10,14,30,.75); color:var(--brand-light); font-size:15px; font-weight:700; }
.fs-affbtn:hover { background:var(--brand-soft); color:#fff; }
.fs-game__affbar { display:flex; align-items:center; justify-content:center; gap:9px; padding:14px; background:linear-gradient(120deg,var(--brand-strong),var(--brand) 60%,var(--brand-light)); color:#fff; font-size:16px; font-weight:800; }
.fs-game__affbar:hover { filter:brightness(1.08); color:#fff; }
.fs-game__baractions { display:inline-flex; align-items:center; gap:12px; flex-shrink:0; }
.fs-game__hint { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 10px; padding:10px 14px; background:#0c0f16; border-top:1px solid rgba(255,255,255,.08); font-size:13.5px; color:#aab2c5; text-align:center; }
.fs-game__hint .fa-info-circle { color:var(--brand-light); }
.fs-game__hint button { background:none; border:1px solid var(--brand); border-radius:6px; padding:3px 12px; color:var(--brand-light); font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.fs-game__hint button:hover { background:var(--brand-soft); color:#fff; }

/* ───────── 상세: 슬롯정보 (브랜드 블루 틴트) ───────── */
.fs-info { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--brand-strong); background-size:cover; background-position:center; background-color:var(--surface); margin-bottom:16px; }
.fs-info__in { position:relative; z-index:1; padding:26px 30px; background:linear-gradient(120deg, rgba(16,23,52,.94), rgba(63,91,224,.82)); }
.fs-info__title { margin:0 0 16px; padding-bottom:12px; text-align:center; font-size:21px; font-weight:800; color:#fff; border-bottom:1px solid rgba(255,255,255,.3); }
.fs-info__list { display:grid; grid-template-columns:110px 1fr; gap:12px 18px; margin:0; }
.fs-info__list dt { font-size:15px; font-weight:700; color:#c9d6ff; }
.fs-info__list dd { margin:0; font-size:15px; color:#fff; }

/* ───────── 상세: 해시태그 (브랜드 칩) ───────── */
.fs-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.fs-tag { background:var(--brand-soft); color:var(--brand-light); font-size:13.5px; font-weight:700; padding:7px 12px; border-radius:6px; border:1px solid rgba(91,123,255,.3); }

/* ───────── 상세: 인기슬롯 ───────── */
.fs-popular { margin-bottom:26px; }
.fs-sec-title { position:relative; margin:0 0 16px; padding-left:14px; font-size:20px; font-weight:800; color:var(--text); }
.fs-sec-title::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:20px; border-radius:3px; background:var(--brand); }
.fs-pop-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.fs-pop-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; transition:border-color .15s, transform .15s; }
.fs-pop-card:hover { border-color:var(--brand); transform:translateY(-3px); }
.fs-pop-card__imgwrap { position:relative; display:block; width:100%; height:0; padding-top:58.33%; background:#10131a; overflow:hidden; }
.fs-pop-card__imgwrap img { position:absolute; top:0; left:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; }
.fs-pop-card__imgwrap .fs-card__noimg { font-size:32px; }
.fs-pop-card__title { padding:11px 10px; text-align:center; font-size:14px; font-weight:600; color:var(--text-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 섹션 소개문구 (인기슬롯/제휴카지노 공용) */
.fs-sec-desc { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 20px; font-size:14.5px; line-height:1.8; color:var(--text-sub); margin:0 0 18px; }
.fs-sec-desc b { color:var(--brand-light); }

/* ───────── 상세: 제휴카지노 ───────── */
.fs-affsec { margin-bottom:26px; }
.fs-aff-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.fs-aff-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; transition:border-color .15s, transform .15s; }
.fs-aff-card:hover { border-color:var(--brand); transform:translateY(-3px); }
.fs-aff-card__imgwrap { position:relative; display:block; width:100%; height:0; padding-top:100%; background:#10131a; overflow:hidden; }
.fs-aff-card__imgwrap img { position:absolute; top:0; left:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; }
.fs-aff-card__title { padding:11px 10px 2px; font-size:14px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fs-aff-card__meta { padding:0 10px 12px; font-size:12.5px; color:var(--text-mute); }
.fs-aff-card__meta b { color:var(--brand); }
@media (max-width:991px) { .fs-aff-grid { grid-template-columns:repeat(2,1fr); } }

/* ───────── 상세: 관리 버튼 ───────── */
.fs-vbtns { display:flex; justify-content:flex-end; gap:8px; margin-bottom:22px; padding-top:16px; border-top:1px solid var(--line); }
.fs-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:9px; font-size:14px; font-weight:600; border:1px solid var(--line); background:var(--surface); color:var(--text-sub); }
.fs-btn:hover { color:var(--text); background:var(--surface-2); }
.fs-btn--danger:hover { border-color:#e8312f; color:#e8312f; }

/* ───────── 반응형 ───────── */
@media (max-width:991px) {
	.fs-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
	.fs-pop-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
	.fs-cat { padding:8px 12px; font-size:13.5px; }
	.fs-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
	.fs-card__title { font-size:14.5px; }
	.fs-card__start { height:34px; padding:0 20px; font-size:13px; margin-top:9px; }
	.fs-card__playbtn { width:50px; height:50px; font-size:16px; }
	.fs-card__new { top:10px; right:-38px; font-size:11px; }
	.fs-vtitle { font-size:20px; }
	.fs-play { min-width:230px; padding:12px 22px; }
	.fs-play__txt b { font-size:16px; }
	.fs-affbtn { min-width:230px; }
	.fs-info__in { padding:20px 16px; }
	.fs-info__list { grid-template-columns:88px 1fr; gap:9px 12px; }
}