/* =============================================================
   mobile.css — 모바일 전용 오버라이드 (max-width: 767px)
   데스크탑은 이 파일의 @media 블록 밖 규칙만 적용됩니다.
   ============================================================= */

/* 모바일 UI 요소: 데스크탑에선 숨김 */
.mobile-topbar,
.mobile-tabbar { display: none; }

@media (max-width: 767px) {

/* ───── 레이아웃 리셋 ───── */

.sidebar { display: none !important; }

.layout {
    display: block;
}

.main {
    margin-left: 0;
    padding: 66px 16px 76px;
    max-width: 100%;
    min-height: 100vh;
}

/* ───── 상단 앱 바 ───── */

.mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 54px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 16px;
    z-index: 200;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.mob-logo {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: inherit;
}
.mob-logo img {
    width: 28px; height: 28px; object-fit: contain;
}
.mob-logo-title {
    font-size: 15px; font-weight: 700;
    color: var(--ink, #171717);
    letter-spacing: -0.02em;
}

.mob-topbar-right {
    display: flex; align-items: center; gap: 12px;
}
.mob-settings-btn {
    font-size: 18px; line-height: 1;
    text-decoration: none; color: #6b7280;
    padding: 6px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

/* ───── 하단 탭 바 ───── */

.mobile-tabbar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mob-tab {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #9ca3af;
    font-size: 10px; font-weight: 500;
    transition: color 0.12s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.mob-tab .t-icon { font-size: 20px; line-height: 1; }
.mob-tab.active  { color: var(--accent, #2d8659); }
.mob-tab:active  { background: #f3f4f6; }

/* ───── 페이지 헤더 ───── */

.page-header { margin-bottom: 12px; }
.page-title  { font-size: 17px !important; line-height: 1.3; }
.page-subtitle { font-size: 12px !important; margin-top: 2px; }
.page-title-icon { font-size: 16px !important; }
.back-to-today { font-size: 12px; }

/* ───── 한 줄 입력창 ───── */

.dash-input {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 12px;
}
.dash-input input { font-size: 14px; }
.dash-input > button[type="submit"] {
    padding: 10px 14px; font-size: 13px;
}

/* ───── 4 카운터 — 2×2 그리드 ───── */

.brief-counters {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.brief-counter { padding: 10px 12px; border-radius: 8px; }
.brief-counter .bc-label { font-size: 11px; }
.brief-counter .bc-num   { font-size: 20px; }

/* ───── 오늘의 과제 ───── */

.brief-tasks-2col { padding: 12px 14px; }
.brief-tasks-grid { grid-template-columns: 1fr !important; gap: 4px; }
.brief-task-row   { padding: 6px 0; }

/* ───── 피드백 카드 ───── */

.brief-feedback { padding: 12px 14px; margin-bottom: 12px; }
.brief-feedback .bf-title { font-size: 14px; }
.brief-feedback .bf-body  { font-size: 12px; }

/* ───── 잔디 ───── */

.brief-grass { padding: 10px 12px; margin-bottom: 12px; }
.brief-grass .grass-cell { height: 12px; }

/* ───── AI 자아 분석 ───── */

.brief-soul { padding: 12px 14px; margin-bottom: 12px; }
.brief-soul .bs-head {
    font-size: 12px; flex-wrap: wrap; gap: 6px;
}
.brief-soul .bs-run-btn { padding: 4px 10px; font-size: 11px; }

/* ───── 기록 리스트 ───── */

.brief-records { border-radius: 10px; }
.brief-records .br-head { padding: 10px 14px; font-size: 13px; }
.brief-records .br-row {
    grid-template-columns: 40px 24px 1fr;
    padding: 12px 14px;
    gap: 8px;
}
.brief-records .br-title   { font-size: 13px; }
.brief-records .br-preview { font-size: 11px; }

/* ───── 한 줄 기록 종합 ───── */

.brief-list-section { margin-top: 12px; }
.brief-list-section h3 { font-size: 13px !important; }
.brief-list-row { padding: 8px 0; }

/* ───── 마이크 버튼 ───── */

.mic-btn { width: 36px; height: 36px; }

/* ───── 대시 카드 ───── */

.dash-row { gap: 8px; }
.dash-card { padding: 12px 14px; border-radius: 10px; }
.dash-card .value { font-size: 22px; }

/* ───── AI 스트림 패널 ───── */

.ai-stream-panel {
    margin: 0; border-radius: 10px;
    padding: 14px;
}

/* ───── 계획 기간 탭 — 가로 스크롤 ───── */

.plan-period-tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.plan-period-tabs::-webkit-scrollbar { display: none; }

/* ───── 테이블 overflow ───── */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ───── 빠른 기록 모달 ───── */

.modal-card {
    width: 96%; max-width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed; bottom: 62px; left: 0; right: 0;
    margin: 0; width: 100%;
}
.modal-overlay {
    align-items: flex-end;
    padding-top: 0;
}

/* ───── 버튼 최소 터치 영역 ───── */

.btn, .btn-primary, .btn-ghost { min-height: 44px; }

} /* end @media */