/* =====================================================================
   layout.css - 앱바 / 컨테이너 / 하단 탭바 / 반응형(576, 992)
   ===================================================================== */

/* ---------- 상단 앱바 ---------- */
.appbar{
    position:fixed; top:0; left:0; right:0; z-index:60;
    background:#fff; border-bottom:1px solid var(--c-line);
    height:var(--appbar-h);
    padding-top:env(safe-area-inset-top);
}
.appbar-in{
    max-width:1280px; margin:0 auto; height:var(--appbar-h);
    display:flex; align-items:center; gap:8px; padding:0 12px;
}
.appbar-logo{ font-size:19px; font-weight:900; color:var(--c-point); }
.appbar-title{
    flex:1; font-size:17px; font-weight:700; text-align:center;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.btn-back{
    min-width:44px; min-height:44px; font-size:22px; color:var(--c-text);
    display:flex; align-items:center; justify-content:center;
}
.appbar-right{ min-width:44px; display:flex; justify-content:flex-end; }
.btn-bell{
    position:relative; min-width:44px; min-height:44px; font-size:20px;
    display:flex; align-items:center; justify-content:center;
}
.bell-dot{
    position:absolute; top:8px; right:8px; width:9px; height:9px;
    border-radius:50%; background:var(--c-danger);
}
.btn-login-top{ font-size:15px; font-weight:700; color:var(--c-point); padding:10px 4px; }

/* ---------- 본문 컨테이너 ---------- */
.container{
    max-width:640px; margin:0 auto;
    padding:calc(var(--appbar-h) + env(safe-area-inset-top) + 14px) 16px
            calc(var(--tabbar-h) + 30px);
    min-height:100vh;
}
body.no-tabbar .container{ padding-bottom:110px; }

/* ---------- 하단 탭바 ---------- */
.tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:#fff; border-top:1px solid var(--c-line);
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    display:flex;
}
.tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2px;
    font-size:12px; color:var(--c-text-sub); min-height:48px;
}
.tabbar a.on{ color:var(--c-point); font-weight:800; }
.tabbar .tab-ico{ font-size:21px; line-height:1; }

/* ---------- 섹션 공통 ---------- */
.sec{ margin-bottom:26px; }
.sec-head{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.sec-title{ font-size:19px; font-weight:800; }
.sec-more{ font-size:14px; color:var(--c-text-sub); padding:8px 0 8px 12px; }

/* ---------- 반응형 ---------- */
/* Tablet 576~991 */
@media (min-width:576px){
    .container{ max-width:720px; }
    .grid-select{ grid-template-columns:repeat(3,1fr); }
    .grid-time{ grid-template-columns:repeat(4,1fr); }
}

/* Desktop 992+ : 좌측필터+우측리스트는 페이지별 pc-2col 클래스 사용 */
@media (min-width:992px){
    .container{ max-width:1200px; }
    .tabbar{ display:none; }
    body{ --tabbar-h:0px; }
    .fixed-bottom-btn{
        position:static; padding:16px 0; background:none; border:0;
        max-width:480px; margin:0 auto;
    }
    .pc-2col{ display:flex; gap:24px; align-items:flex-start; }
    .pc-2col .col-filter{
        flex:0 0 280px; position:sticky;
        top:calc(var(--appbar-h) + 20px);
    }
    .pc-2col .col-list{ flex:1; min-width:0; }
    .grid-select{ grid-template-columns:repeat(4,1fr); }
    .grid-time{ grid-template-columns:repeat(6,1fr); }
    .card-grid-pc{
        display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
    }
    .card-grid-pc .card{ margin-bottom:0; }
}