/* =======================================
   Vars (헤더/탭 높이, 메인 패딩)
   ======================================= */
:root{
    --h-header: 48px;
    --h-tabs: 40px;
    --main-pt: calc(var(--h-header) + var(--h-tabs) + 12px);
    --main-pb: 96px; /* FAB와 겹치지 않게 */
}
@media (min-width: 768px){
    :root{
        --h-header: 56px;
        --h-tabs: 44px;
        --main-pt: calc(var(--h-header) + var(--h-tabs) + 16px);
        --main-pb: 48px;
    }
}

/* =======================================
   Layout & Content
   ======================================= */
.container{ max-width:1280px; margin:0 auto; padding:0 20px; }
.main{ padding-top:var(--main-pt); padding-bottom:var(--main-pb); }

/* 카드 그리드 */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:24px;
    margin-top:16px;
}
@media (max-width:640px){
    .grid{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:16px; }
}

/* 카드 */
.card{
    display:block;
    background:#fff;
    border:1px solid #eef0f3;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
    padding:10px;
    transition:transform .1s ease, box-shadow .1s ease;
    overflow:hidden;
}
.card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.card img{
    width:100%; height:180px; object-fit:cover;
    display:block; border-radius:10px;
}
.caption{
    margin-top:8px; font-size:12px; color:#6b7280; word-break:break-all;
}

/* =======================================
   Mobile Header & Navigation
   ======================================= */
.m-header{
    position:sticky; top:0;
    display:flex; align-items:center; gap:10px;
    height:48px; padding:0 12px;
    background:#fff; border-bottom:1px solid #eee; z-index:100;
}
.m-brand{ font-weight:700; color:#111; text-decoration:none; }
.m-nav-btn{
    width:40px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:#f3f4f6; border:1px solid #e5e7eb; font-size:18px;
}

/* 가로 스크롤 탭(칩) */
.m-tabs{
    position:sticky; top:48px; z-index:90;
    display:flex; gap:8px; padding:8px 12px;
    background:#fff; border-bottom:1px solid #eee;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    white-space:nowrap;
}
.m-tab{
    flex:0 0 auto; padding:6px 10px; border-radius:9999px;
    background:#f3f4f6; border:1px solid #e5e7eb;
    color:#374151; font-size:14px; text-decoration:none;
    scroll-snap-align:start;
}
.m-tab.is-active{ background:#111827; color:#fff; border-color:#111827; }

@media (min-width:768px){
    .m-header{ height:56px; padding:0 16px; }
    .m-tabs{ top:56px; padding:10px 16px; }
}

/* 모바일 시트(선택 기능 템플릿 대비) */
.m-sheet{ position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); z-index:1200; }
.m-sheet__inner{
    position:absolute; left:0; right:0; bottom:0; max-height:80vh;
    background:#fff; border-radius:16px 16px 0 0;
    box-shadow:0 -10px 30px rgba(0,0,0,.15);
    padding-bottom:env(safe-area-inset-bottom);
    animation:sheetIn .18s ease;
}
@keyframes sheetIn{ from{ transform:translateY(16px); opacity:.8 } to{ transform:none; opacity:1 } }

/* =======================================
   Pagination (하단 숫자/텍스트 버튼)
   ======================================= */
.pager{
    display:flex; justify-content:center; align-items:center;
    gap:8px; margin:22px 0 8px; flex-wrap:wrap;
}
.pg-btn,.pg-num{
    display:inline-flex; align-items:center; justify-content:center;
    height:36px; min-width:44px; padding:0 12px;
    border-radius:10px; font-size:14px; text-decoration:none;
    background:#fff; color:#111827;
    border:1px solid #e5e7eb; box-shadow:0 1px 2px rgba(0,0,0,.04);
    transition:background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.pg-num{ min-width:36px; padding:0 10px; }
.pg-btn:hover,.pg-num:hover{ background:#f9fafb; box-shadow:0 4px 10px rgba(0,0,0,.06); transform:translateY(-1px); }
.pg-num.is-active{ background:#111827; color:#fff; border-color:#111827; box-shadow:0 6px 16px rgba(17,24,39,.18); }
.pg-btn.disabled{ opacity:.45; pointer-events:none; }
@media (max-width:480px){ .pg-btn,.pg-num{ height:40px; border-radius:12px; } }

/* =======================================
   Floating Action Button (FAB) Pager
   ======================================= */
.pager-fab{
    position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
    display:grid; gap:10px; z-index:1030; pointer-events:none;
}
.fab-btn{
    pointer-events:auto;
    width:48px; height:48px; border-radius:9999px;
    display:grid; place-items:center;
    font-size:22px; font-weight:700; line-height:1; text-decoration:none;
    background:#fff; color:#111827; border:1px solid #e5e7eb;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
    -webkit-tap-highlight-color:transparent;
}
.fab-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.16); background:#f9fafb; }
.fab-btn:active{ transform:translateY(0); box-shadow:0 4px 14px rgba(0,0,0,.14); }
.fab-btn:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; box-shadow:0 0 0 4px rgba(37,99,235,.15); }
.fab-btn.is-disabled{ opacity:.4; pointer-events:none; }
.fab-prev-range,.fab-next-range{ background:#f3f4f6; }
.fab-prev,.fab-next{ background:#ffffff; }

@media (min-width:768px){
    .pager-fab{ grid-template-columns:repeat(2, 48px); grid-auto-rows:48px; }
    .fab-prev-range{ grid-column:1; grid-row:1; }
    .fab-next-range{ grid-column:2; grid-row:1; }
    .fab-prev      { grid-column:1; grid-row:2; }
    .fab-next      { grid-column:2; grid-row:2; }
}
@media (max-width:640px){
    .pager-fab{ right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); gap:12px; }
    .fab-btn{ width:56px; height:56px; font-size:24px; }
}
@supports not (bottom: env(safe-area-inset-bottom)){ .pager-fab{ bottom:16px; } }
@media (prefers-reduced-motion: reduce){
    .fab-btn{ transition:none!important; }
    .fab-btn:hover,.fab-btn:active{ transform:none!important; }
}

/* 작은 화면 FAB와 겹침 방지 */
@media (max-width:640px){
    .main{ padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
}
@supports not (bottom: env(safe-area-inset-bottom)){
    .main{ padding-bottom:110px; }
}

/* =======================================
   Dark Mode
   ======================================= */
@media (prefers-color-scheme: dark){
    .card{ background:#111418; border-color:#1c2433; box-shadow:0 2px 10px rgba(0,0,0,.4); }
    .caption{ color:#a7b0bf; }
    .pg-btn,.pg-num{ background:#0f1216; color:#e5e7eb; border-color:#1c2433; }
    .pg-num.is-active{ background:#2563eb; border-color:#2563eb; }

    .fab-btn{
        background:#111418; color:#e5e7eb; border-color:#222733;
        box-shadow:0 6px 18px rgba(0,0,0,.5);
    }
    .fab-btn:hover{ background:#171b22; }
    .fab-prev-range,.fab-next-range{ background:#151922; }

    .m-header,.m-tabs{ background:#0f1216; border-color:#1b2230; }
    .m-brand{ color:#e5e7eb; }
    .m-nav-btn{ background:#1a2030; border-color:#263147; color:#e5e7eb; }
    .m-tab{ background:#151b26; border-color:#263147; color:#cbd5e1; }
    .m-tab.is-active{ background:#2563eb; border-color:#2563eb; color:#fff; }
}