---
title: "🧩 특이이슈 — 셸(768)·콘텐츠(1024) 이중 브레이크포인트 불일치 (태블릿 붕괴 근본원인)"
category: "reference"
parent: "Claude Code 작업보고"
updated: "2026-07-04"
priority: "High"
purpose: "달록 반응형이 셸과 콘텐츠에 서로 다른 전환점(셸=768/콘텐츠=1024)을 쓰기 때문에 768~1023 태블릿 구간이 '데스크탑 셸 + 모바일 콘텐츠' 하이브리드가 되고, CSS가 767.98에서 끊겨 있으면 이 구간이 붕괴한다는 아키텍처 지식. 태블릿 반응형 작업 시 반드시 참조."
read_when: ["셸 콘텐츠 브레이크포인트","768 1024 불일치","태블릿 하이브리드 구간","반응형 붕괴 근본원인","lay-tabbar 768","isDesktop 1024"]
document_type: "참조"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260704_113805"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록본레포CC (D:\\dallog\\dallog_git)."
---

> 관련: 작업보고 "762~1024 태블릿폭 UI 정합 3건"·의사결정 2건. 본 문서는 재사용 아키텍처 지식.

## 핵심
달록은 폭에 따라 **두 개의 다른 전환점**을 가진다 — 이걸 모르면 태블릿 작업이 반드시 어긋난다.

| 계층 | 코드 | 전환점 |
|---|---|---|
| **셸** (사이드바/topbar ↔ 상단헤더+하단탭바) | `Layout.tsx` `isDesktop = window.innerWidth >= 768` | **768** |
| **콘텐츠** (대시보드/기록/코치 2단 ↔ 단일+탭) | `App/History/CoachNotes/SummaryBrief` `useMediaQuery('(min-width:1024px)')` | **1024** |

→ **768~1023 = 데스크탑 셸(사이드바·하단탭바 없음) + 모바일 콘텐츠(단일+탭)** 인 하이브리드 구간.

## 왜 붕괴했나
모바일 콘텐츠 스타일이 `@media(max-width:767.98)`에만 걸려 있으면, 768~1023에서 콘텐츠는 **모바일 구조로 렌더되는데 base(데스크탑) 스타일**을 받아 "예전 엉망 UI 섞임"이 된다. (콘텐츠 JS는 1024까지 모바일인데 CSS는 768에서 끊김 = 불일치)

## 실전 규칙 (태블릿 작업 시)
1. **콘텐츠 성격** 모바일 규칙 → `max-width:1023.98`로 콘텐츠 분기(1024)와 정렬.
2. **셸 성격** 규칙(하단 탭바 높이계산·토스트 offset·모달 하단시트·스플래시) → `767.98` 유지. **768+엔 탭바가 없으므로** `--lay-tabbar-h`를 차감하는 규칙을 1023.98로 확장하면 오히려 깨진다.
3. **설정 페이지**는 자체 우측 레일(셸급 요소)이라 셸 분기(768)에 맞춰야 함 → `Settings.tsx isDesktop`을 1024가 아닌 768로(CSS `.lay-main.is-settings` 300px 예약이 이미 min-768).
4. **토픽바**는 768~1920 전 구간에 뜨는 셸 요소 → 손대면 넓은폭까지 회귀검증 필수.

## 함정 사례(이번 세션)
- 읽기전용 스카우트가 "높이·탭바 규칙까지 1023.98로 전면확장" 권고 → **거부**(768+ 탭바 없음). 편집 전 코드로 이중 분기점을 실증한 것이 회귀 방지의 핵심.
- 편입 breakpoint는 헌법 §3의 768/1024/560만 허용 → 763/815 같은 임의 breakpoint 추가 금지(이번엔 clamp·기존 768/1024 range로 해결).