/* ==========================================================================
   라이브캠코리아 — lck.css (couche au-dessus de Bootstrap 5.3)
   Layout top-nav + barre de filtres horizontale. Design PLAT (pas de glow/
   gradient) — distinct de kawaiilive (Bulma) et mlive (sidebar). Classes kcam-*.
   ========================================================================== */
:root {
  --kcam-magenta: #d81b7e; --kcam-magenta-dark: #b01567;
  --kcam-bg: #ffffff; --kcam-surface: #f5f5f8; --kcam-text: #1d1d24; --kcam-muted: #6b6b78;
  --kcam-card-bg: #ffffff; --kcam-border: #e4e4ec;
  --kcam-bar-bg: #17171f; --kcam-bar-text: #f4f4f7; --kcam-bar-line: #2a2a35;
}
[data-theme="dark"] {
  --kcam-bg: #0d0d12; --kcam-surface: #16161d; --kcam-text: #f2f2f6; --kcam-muted: #9a9aa8;
  --kcam-card-bg: #15151c; --kcam-border: #262630;
  --kcam-bar-bg: #0b0b10; --kcam-bar-text: #f2f2f6; --kcam-bar-line: #23232d;
}
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;500;700;800&family=Noto+Sans+KR:wght@400;500;700&display=swap');

body { background-color: var(--kcam-bg); color: var(--kcam-text); font-family: 'Noto Sans KR', system-ui, sans-serif; overflow-x: hidden; transition: background-color .25s, color .25s; }
h1,h2,h3,h4,h5,h6 { font-family: 'Gothic A1','Noto Sans KR',sans-serif; font-weight: 800; color: var(--kcam-text); }
a { color: var(--kcam-magenta); }
a:hover { color: var(--kcam-magenta-dark); }
.kcam-accent { color: var(--kcam-magenta) !important; }
.kcam-section-title { letter-spacing: -.5px; }

/* boutons (plat) */
.btn-kcam { --bs-btn-color:#fff; --bs-btn-bg:var(--kcam-magenta); --bs-btn-border-color:var(--kcam-magenta); --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--kcam-magenta-dark); --bs-btn-hover-border-color:var(--kcam-magenta-dark); --bs-btn-active-bg:var(--kcam-magenta-dark); font-weight:700; }
.btn-outline-kcam { --bs-btn-color:var(--kcam-magenta); --bs-btn-border-color:var(--kcam-magenta); --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--kcam-magenta); font-weight:600; }
.badge-kcam { background-color: var(--kcam-magenta); color:#fff; }

/* top bar (plat, pas de glow) */
.kcam-topbar { background: var(--kcam-bar-bg); border-bottom: 1px solid var(--kcam-bar-line); position: sticky; top: 0; z-index: 1030; }
.kcam-topbar .navbar-brand, .kcam-topbar .nav-link { color: var(--kcam-bar-text) !important; }
.kcam-brand strong { font-family: 'Gothic A1', sans-serif; font-weight: 800; color: var(--kcam-magenta); font-size: 1.15rem; }
.kcam-brand__sub { color: var(--kcam-muted) !important; font-weight: 500; }
.kcam-topbar .navbar-toggler { border-color: var(--kcam-bar-line); }
.kcam-search .form-control { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color:#fff; }
.kcam-search .form-control::placeholder { color: rgba(255,255,255,.5); }
.kcam-theme-toggle { cursor:pointer; color: var(--kcam-bar-text); background:transparent; border:0; font-size:1.05rem; padding:.35rem .55rem; }
.kcam-theme-toggle:hover { color: var(--kcam-magenta); }

/* barre de filtres horizontale (sticky sous la nav) */
.kcam-filterbar { background: var(--kcam-bar-bg); border-bottom: 1px solid var(--kcam-bar-line); position: sticky; top: 53px; z-index: 1020; }
.kcam-filterbar__row { display: flex; align-items: center; gap: .4rem; overflow-x: auto; white-space: nowrap; padding: .5rem 0; scrollbar-width: none; }
.kcam-filterbar__row::-webkit-scrollbar { display: none; }
.kcam-fpill { flex: 0 0 auto; padding: .32rem .85rem; border-radius: 6px; font-size: .86rem; font-weight: 600; color: var(--kcam-bar-text); border: 1px solid var(--kcam-bar-line); text-decoration: none; }
.kcam-fpill:hover { color:#fff; background: var(--kcam-magenta); border-color: var(--kcam-magenta); }
.kcam-fsep { flex: 0 0 auto; width: 1px; height: 18px; background: var(--kcam-bar-line); margin: 0 .3rem; }

/* carte modèle (plat) */
.kcam-grid { --bs-gutter-x:1rem; --bs-gutter-y:1rem; }
.kcam-card { background: var(--kcam-card-bg); border: 1px solid var(--kcam-border); border-radius: 10px; overflow: hidden; height: 100%; transition: transform .16s ease, border-color .16s ease; }
.kcam-card a { text-decoration:none; color:inherit; display:block; height:100%; }
.kcam-card:hover { transform: translateY(-3px); border-color: var(--kcam-magenta); }
.kcam-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background:#000; }
.kcam-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.kcam-card__body { padding: .6rem .7rem .8rem; text-align: center; }
.kcam-card__name { font-weight:700; font-size:1rem; margin:0 0 .15rem; color:var(--kcam-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kcam-card__meta { font-size:.8rem; color:var(--kcam-muted); margin:0; }
.kcam-card__live { position:absolute; top:.5rem; left:.5rem; background:var(--kcam-magenta); color:#fff; font-size:.66rem; font-weight:700; padding:.1rem .45rem; border-radius:4px; letter-spacing:.5px; }

/* tags / pills */
.kcam-tags { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; list-style:none; padding:0; }
.kcam-pill { display:inline-block; padding:.25rem .7rem; border-radius:6px; background:var(--kcam-surface); color:var(--kcam-magenta); border:1px solid var(--kcam-border); font-size:.82rem; font-weight:500; text-decoration:none; }
.kcam-pill:hover { background:var(--kcam-magenta); color:#fff; border-color:var(--kcam-magenta); }

/* panneaux */
.kcam-panel { background:var(--kcam-surface); border:1px solid var(--kcam-border); border-radius:10px; padding:1.1rem 1.25rem; font-size:.92rem; line-height:1.65; }
.kcam-panel p:last-child { margin-bottom:0; }

/* promo (plat, pas de gradient) */
.kcam-promo { max-width:760px; margin:1.25rem auto; }
.kcam-promo__link { display:flex; align-items:center; gap:.85rem; padding:.8rem 1.25rem; background:var(--kcam-surface); border:1px solid var(--kcam-border); border-left:3px solid var(--kcam-magenta); border-radius:10px; text-decoration:none; color:var(--kcam-text); transition:border-color .16s; }
.kcam-promo__link:hover { border-color:var(--kcam-magenta); }
.kcam-promo__icon { font-size:1.5rem; flex-shrink:0; color:var(--kcam-magenta); }
.kcam-promo__text { flex:1; font-size:.94rem; line-height:1.4; color:var(--kcam-text); }
.kcam-promo__text strong { color:var(--kcam-magenta); }
.kcam-promo__cta { flex-shrink:0; padding:.42rem 1.05rem; background:var(--kcam-magenta); color:#fff; border-radius:6px; font-size:.85rem; font-weight:700; white-space:nowrap; }
@media (max-width:768px){ .kcam-promo__link{flex-wrap:wrap;justify-content:center;text-align:center;gap:.5rem;} .kcam-promo__text{width:100%;order:2;font-size:.85rem;} .kcam-promo__cta{order:3;} }

/* page modèle */
.kcam-video { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; }
.kcam-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.kcam-profile { background:var(--kcam-surface); border:1px solid var(--kcam-border); border-radius:10px; padding:1.25rem; }
.kcam-profile ul { list-style:none; padding:0; margin:0; }
.kcam-profile li { padding:.3rem 0; border-bottom:1px dashed var(--kcam-border); }
.kcam-profile li:last-child { border-bottom:0; }
.kcam-profile .kcam-label { font-weight:700; color:var(--kcam-magenta); margin-right:.35rem; }

/* mosaïque multicam */
#kcam-mosaic { display:grid; gap:10px; width:100%; }
#kcam-mosaic.kcam-mosaic--2x2 { grid-template-columns:repeat(2,1fr); }
#kcam-mosaic.kcam-mosaic--1x4 { grid-template-columns:1fr; }
.kcam-mosaic__cell { position:relative; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden; }
.kcam-mosaic__cell iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:768px){ #kcam-mosaic.kcam-mosaic--2x2 { grid-template-columns:1fr; } }
body.kcam-theatre { overflow:hidden; }

/* footer (plat) */
.kcam-footer { background:var(--kcam-surface); border-top:1px solid var(--kcam-border); color:var(--kcam-muted); padding:2.5rem 1rem 2rem; margin-top:3rem; font-size:.88rem; text-align:center; }
.kcam-footer a { color:var(--kcam-magenta); }

/* pagination */
.kcam-pagination .pagination { justify-content:center; }
.kcam-pagination .page-item.active .page-link { background:var(--kcam-magenta); border-color:var(--kcam-magenta); }
.kcam-pagination .page-link { color:var(--kcam-magenta); }
.kcam-pagination ul { display:flex; justify-content:center; gap:.35rem; list-style:none; padding:0; flex-wrap:wrap; }
.kcam-pagination ul li a, .kcam-pagination ul li span { display:inline-block; padding:.4rem .75rem; border:1px solid var(--kcam-border); border-radius:6px; text-decoration:none; color:var(--kcam-magenta); }
.kcam-pagination ul li.current span, .kcam-pagination ul li.active span { background:var(--kcam-magenta); color:#fff; border-color:var(--kcam-magenta); }

/* divers */
.kcam-fade-in { animation: kcamFade .4s ease both; }
@keyframes kcamFade { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }
.kcam-legal h1 { font-size:1.35rem; margin-top:1.5rem; }
.kcam-legal p { line-height:1.7; color:var(--kcam-text); }