/* =========================
   Fonts
========================= */
@font-face{
    font-family:'Maplestory';
    src:url('/static/fonts/Maplestory_Light.ttf') format('truetype');
    font-weight:300 500; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'Maplestory';
    src:url('/static/fonts/Maplestory_Bold.ttf') format('truetype');
    font-weight:600 800; font-style:normal; font-display:swap;
}

/* =========================
   Global (Dark-only)
========================= */
:root{
    color-scheme: dark;
    --header-h: 64px;
    --footer-h: 64px;
    /* 헤더-본문 / 본문-푸터 동일 간격 */
    --hf-gap: 2rem;
}

html,body,*{font-family:'Maplestory','Apple SD Gothic Neo','Noto Sans KR',sans-serif;}
body{background:#1f1f1f; color:#e6e8eb}

/* 다크 팔레트 매핑 */
.bg-white{background:#262626 !important}
.bg-gray-50{background:#1f1f1f !important}
.border, .border-gray-200, .border-gray-300, .border-t{border-color:#33383f !important}
header, footer{background:#222225 !important}
.text-gray-900{color:#e6e8eb !important}
.text-gray-700{color:#d3d6da !important}
.text-gray-600{color:#b7bfc9 !important}
.text-gray-500{color:#9aa4b2 !important}
.text-gray-400{color:#8892a0 !important}
.hover\:bg-gray-50:hover{background:#2a2a2a !important}
.shadow-sm, .hover\:shadow-md:hover{box-shadow:0 1px 2px rgba(0,0,0,.45) !important}

.bg-red-100{background:rgba(239,68,68,.18) !important}
.bg-blue-100{background:rgba(59,130,246,.18) !important}
.bg-green-100{background:rgba(34,197,94,.18) !important}
.bg-purple-100{background:rgba(147,51,234,.18) !important}
.bg-yellow-100{background:rgba(234,179,8,.18) !important}
.bg-blue-50{background:rgba(59,130,246,.10) !important}
.border-blue-200{border-color:rgba(59,130,246,.35) !important}
.text-blue-800{color:#a7c7ff !important}

input, select, textarea{background:#222225 !important; border-color:#33383f !important; color:#e6e8eb !important}
::placeholder{color:#9aa4b2 !important}

/* Scrollbar */
::-webkit-scrollbar{width:0;height:0}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.5);border-radius:4px}

/* 고정 헤더/푸터 레이아웃(옵션) */
body.has-fixed-layout{
    padding-top: calc(var(--header-h) + 8px);
    padding-bottom: calc(var(--footer-h) + 8px);
}

/* ===== Header / Footer ↔ Main 동일 간격 강제 ===== */
.hf-gap{ padding-block: var(--hf-gap); }
header, footer{ margin:0 !important; }
.hf-gap > :first-child { margin-top: 0 !important; }
.hf-gap > :last-child  { margin-bottom: 0 !important; }
/* 흔한 tailwind 마진 유틸 안전망 */
.hf-gap > .mb-0,
.hf-gap > .mb-1,
.hf-gap > .mb-2,
.hf-gap > .mb-3,
.hf-gap > .mb-4,
.hf-gap > .mb-5,
.hf-gap > .mb-6,
.hf-gap > .mb-8,
.hf-gap > .mb-10 { margin-bottom: 0 !important; }
footer > *:first-child { margin-top: 0 !important; }

/* 검색 하이라이트 */
.mark-hit{background:rgba(234,179,8,.35); color:inherit; padding:0 .12em; border-radius:2px}

/* =========================
   Category Badges (Dark-only)
========================= */
.badge-cat{
    display:inline-flex; align-items:center; white-space:nowrap;
    font-weight:600; font-size:12px; line-height:1;
    padding:4px 8px; border-radius:9999px;
    border:1px solid transparent;
    transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* 기본 세이프티 */
.badge-cat[data-cat-id]{
    background:rgba(148,163,184,.14); border-color:rgba(148,163,184,.32); color:#e2e8f0;
}
/* 10-Color Loop */
.badge-cat[data-cat-k="0"]{ background:rgba(59,130,246,.20); border-color:rgba(59,130,246,.52); color:#dbeafe; }
.badge-cat[data-cat-k="1"]{ background:rgba(139,92,246,.20); border-color:rgba(139,92,246,.52); color:#ddd6fe; }
.badge-cat[data-cat-k="2"]{ background:rgba(6,182,212,.20); border-color:rgba(6,182,212,.56); color:#a5f3fc; }
.badge-cat[data-cat-k="3"]{ background:rgba(16,185,129,.20); border-color:rgba(16,185,129,.56); color:#a7f3d0; }
.badge-cat[data-cat-k="4"]{ background:rgba(245,158,11,.20); border-color:rgba(245,158,11,.56); color:#fde68a; }
.badge-cat[data-cat-k="5"]{ background:rgba(236,72,153,.20); border-color:rgba(236,72,153,.54); color:#fbcfe8; }
.badge-cat[data-cat-k="6"]{ background:rgba(100,116,139,.22); border-color:rgba(100,116,139,.54); color:#e5e7eb; }
.badge-cat[data-cat-k="7"]{ background:rgba(239,68,68,.20); border-color:rgba(239,68,68,.54); color:#fecaca; }
.badge-cat[data-cat-k="8"]{ background:rgba(99,102,241,.20); border-color:rgba(99,102,241,.54); color:#e0e7ff; }
.badge-cat[data-cat-k="9"]{ background:rgba(20,184,166,.20); border-color:rgba(20,184,166,.56); color:#99f6e4; }
.badge-cat:hover{ filter:brightness(1.05) saturate(1.05); }

/* 줄말줄임/타이틀 보정 */
.line-clamp-1,.line-clamp-2{word-break:break-word}
.title-wrap{gap:0}
.title-clip{display:block}
.cmt-count{margin-left:0}

/* =========================
   Layouts
========================= */
.layout-2col-right{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:2rem;
    align-items:start;
}
@media (min-width:768px){
    .layout-2col-right{ grid-template-columns:minmax(0,1fr) 320px; }
}
.layout-2col-right > section, .right-rail{min-width:0;width:100%}
.right-rail > *{min-width:0}

@media (pointer:fine){
    .lg-sticky{position:sticky; top:76px; align-self:start}
}
@media (min-width:1024px){
    .right-rail{width:300px}
}
@media (min-width:1024px){
    .layout-left-main-right-300{
        display:grid;
        grid-template-columns:auto minmax(0,1fr) 300px;
        gap:2rem; align-items:start;
    }
}

/* Pagination */
.pg-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:0 12px; min-height:36px;
    border:1px solid var(--pg-b,#33383f);
    border-radius:12px;
    background:var(--pg-bg,#262626);
    color:var(--pg-fg,#e6e8eb);
    white-space:nowrap;
}
.pg-btn:hover{ filter:brightness(1.03); }
.pg-active{ background:#3b82f6; color:#fff; border-color:#3b82f6; }
.pg-disabled{ pointer-events:none; opacity:.5; }
@media (max-width:360px){
    .pg-btn{ padding:0 10px; min-height:34px; }
}