/* static/css/coustory_mobile.css */
/* 목적: 폰/태블릿에서 “DC 모바일” 느낌(밀도/가독성/터치 타겟)으로 UI 개선
   - PC(>=992px)는 기존 coustory.css 유지
   - 모바일/태블릿(<992px)은 아래 규칙으로 덮어씀
*/

@media (max-width: 991px) {
    .card-body {
        padding: 4px 8px;
    }

    .csb-pagination-full {
        width: 100%;
        padding: 0px 8px;
    }

    /* 버튼들이 전체 폭을 “나눠먹게” */
    .csb-pagination-full .page-item {
        flex: 1 1 0;
    }

    /* 각 버튼을 칸 전체로 */
    .csb-pagination-full .page-link {
        display: block;
        width: 100%;
        text-align: center;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }


    /* 컨테이너 좌우 여백 */
    .csb-container { 
        padding-left: 12px; 
        padding-right: 12px; 
    }

    /* 상단 보드 탭: 가로 스크롤 */
    .csb-subnav .csb-subnav-scroll { -webkit-overflow-scrolling: touch; }
    .csb-subnav .csb-subnav-scroll::-webkit-scrollbar { display: none; }
    .csb-subnav .nav-link { white-space: nowrap; }

    /* 모바일 상단 정렬/말머리 바 */
    .csb-m-top {
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 12px;
        overflow: hidden;
    }
    .csb-m-tabs, .csb-m-subtabs {
        display: flex;
        gap: 10px;
        padding: 10px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        align-items: center;
    }
    .csb-m-tabs::-webkit-scrollbar,
    .csb-m-subtabs::-webkit-scrollbar { display: none; }

    .csb-m-tab, .csb-m-subtab {
        text-decoration: none;
        color: #111;
        font-size: 14px;
        padding: 6px 8px;
        border-radius: 10px;
        flex: 0 0 auto;
    }
    .csb-m-tab.is-active,
    .csb-m-subtab.is-active {
        background: rgba(0,0,0,.06);
        font-weight: 700;
    }
    .csb-m-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    .csb-m-pagesize {
        border: 1px solid rgba(0,0,0,.18);
        border-radius: 10px;
        height: 32px;
        padding: 0 10px;
        font-size: 13px;
        background: #fff;
    }

    /* 모바일 row 리스트 */
    .csb-m-list { border-top: 1px solid rgba(0,0,0,.06); }

    .csb-m-row {
        display: block;
        padding: 6px 4px;
        border-bottom: 1px solid rgba(0,0,0,.1);
        text-decoration: none;
        color: inherit;
        background: #fff;
    }
    .csb-m-row.is-current { background: rgba(0,0,0,.03); }

    .csb-m-row-top {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .csb-m-badge {
        font-size: 12px;
        padding: 2px 8px;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 999px;
        flex: 0 0 auto;
    }

    .csb-m-title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .csb-m-cnt {
        flex: 0 0 auto;
        color: #d00;
        font-weight: 800;
        font-size: 14px;
        padding-left: 8px;
    }

    .csb-m-row-meta {
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 12px;
        opacity: .80;
    }
    .csb-m-dot { opacity: .55; }
    .csb-m-spacer { margin-left: auto; }
    .csb-m-stat { white-space: nowrap; }

    /* post_detail: 추천/비추 박스 폭 */
    .csb-detail-actionbox {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    /* 댓글 입력 폼: 터치 타겟 */
    .csb-comment-textarea { min-height: 90px; font-size: 14px; }
}

/* 폰(<=576): 더 촘촘 + 하단 고정 액션바 */
@media (max-width: 576px) {
    /* 하단 고정 액션바 */
    .csb-m-bottom {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid rgba(0,0,0,.10);
        z-index: 1030;
    }
    .csb-m-bottom-actions {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }
    .csb-m-btn { flex: 1 1 0; }

    .csb-m-search {
        display: grid;
        grid-template-columns: 110px 1fr 44px;
        gap: 8px;
        align-items: center;
    }
    .csb-m-select, .csb-m-input {
        height: 42px;
        border: 1px solid rgba(0,0,0,.18);
        border-radius: 10px;
        padding: 0 10px;
        font-size: 14px;
        background: #fff;
    }
    .csb-m-search-btn {
        height: 42px;
        border: 0;
        border-radius: 10px;
        background: rgba(0,0,0,.06);
        font-size: 16px;
    }

    /* 하단 고정바가 본문 가리지 않도록 */
    body.csb-has-m-bottom { padding-bottom: 150px; }

    .csb-oss-table {
    table-layout: fixed;        /* 핵심: 고정 레이아웃으로 폭 안깨지게 */
    width: 100%;
    font-size: 0.85rem;
  }

  /* 3열 비율 (스마트폰에서 가장 무난) */
  .csb-oss-table th.csb-oss-col-lib,
  .csb-oss-table td:nth-child(1) {
    width: 30%;
  }

  .csb-oss-table th.csb-oss-col-lic,
  .csb-oss-table td:nth-child(2) {
    width: 20%;
    white-space: wrap; /* 라이선스는 짧으니 한 줄로 */
  }

  .csb-oss-table th:nth-child(3),
  .csb-oss-table td:nth-child(3) {
    width: 50%;
  }

  /* Remarks가 길어도 오른쪽이 ‘깨지지’ 않게 강제 줄바꿈 */
  .csb-oss-table td:nth-child(3) {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

    /* 개인정보처리방침 테이블 */
  .csb-privacy-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.88rem;
  }

  .csb-privacy-table .csb-privacy-col-type { width: 28%; }
  .csb-privacy-table .csb-privacy-col-items { width: 32%; }
  .csb-privacy-table .csb-privacy-col-purpose { width: 40%; }

  .csb-privacy-table td {
    overflow-wrap: anywhere; /* 긴 토큰/이메일/영문도 안전 */
    word-break: keep-all;    /* 한글은 보기 좋게 */
    white-space: normal;
  }

  .csb-legal-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.88rem;
  }

  .csb-legal-table td {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere; /* 긴 영문 토큰 대비 */
    line-height: 1.35;
  }

  /* 모바일에서 첫/마지막 열이 너무 좁아지는 걸 방지 */
  .csb-legal-col-a { width: 28%; }
  .csb-legal-col-b { width: 28%; }
}

/* 태블릿(577~991): 제목 2줄 허용 + 하단바는 sticky로(덜 답답) */
@media (min-width: 577px) and (max-width: 991px) {
    .csb-m-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;

        -webkit-line-clamp: 2;
        line-clamp: 2;         
        overflow: hidden;
        word-break: break-word;
        min-width: 0;
    }

    .csb-m-bottom {
        position: sticky;
        left: 0; right: 0; bottom: 0;
        padding: 12px 0;
        background: transparent;
        border-top: 0;
    }
    .csb-m-bottom .csb-m-bottom-actions,
    .csb-m-bottom .csb-m-search {
        background: #fff;
        border: 1px solid rgba(0,0,0,.10);
        border-radius: 12px;
        padding: 12px;
        margin: 0 12px 10px;
    }
    body.csb-has-m-bottom { padding-bottom: 24px; }
}

/* ===================================
   PC보기(모바일에서 데스크톱 UI 강제)
   =================================== */
body.csb-force-pc .d-lg-none:not(.csb-keep-in-pc) {
  display: none !important;
}

body.csb-force-pc .d-none.d-lg-block { display: block !important; }
body.csb-force-pc .d-none.d-lg-flex { display: flex !important; }
body.csb-force-pc .d-none.d-lg-table { display: table !important; }
body.csb-force-pc .d-none.d-lg-inline { display: inline !important; }
body.csb-force-pc .d-none.d-lg-inline-block { display: inline-block !important; }

/* 모바일 하단바 padding 보정이 남는 경우 제거 */
body.csb-force-pc.csb-has-m-bottom {
  padding-bottom: 0 !important;
}

@media (min-width: 992px) {
  .csb-view-toggle-footer { display: none !important; }
}

body.csb-force-pc .csb-view-toggle-footer { 
  display: flex !important; 
}