/* ============================================================
   v23 — Responsive Column Break + No Horizontal Scroll
   RULE: 가로스크롤 절대 금지 (테이블 내부 제외)
   RULE: 컬럼 폭 축소 대신 5→4→3→2→1단 브레이크
   RULE: 텍스트 한쪽 치우침 방지
   ============================================================= */

/* ─── 1. 가로스크롤 완전 차단 ─── */
html {
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}
body {
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
  max-width: 100vw;
}
.app {
  overflow-x: hidden;
  max-width: 100vw;
}
.view-root {
  overflow-x: hidden !important;
  max-width: 100%;
}
/* 모든 직계 섹션 요소: 부모 너비 초과 방지 */
.view-root > * {
  max-width: 100%;
  overflow-x: hidden;
}
/* 테이블만 예외 — 내뵀 가로스크롤 허용 */
.tbl-wrap, .responsive-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* card/section 내부 overflow 방지 */
.card {
  overflow: hidden;
  max-width: 100%;
  word-break: break-word;
}

/* ─── 2. 점진적 커라 브레이크 (5→4→3→2→1) ─── */
/* 
   12-col grid 기준:
   Desktop(>1200px): span 그묀로 (3,4,5,6,7,8,12)
   Large tablet(901-1200px): span-3→6, span-4→6, span-5→6, span-7→12, span-8→12
   Small tablet(600-900px): span-3→6, span-4→6, span-5→6, span-6→6, span-7→12, span-8→12
   Phone(<600px): 모두 span-12
*/

/* Large tablet: 3-4열 → 2열, �H Yb� E
, �(�(�
@media (max-width: 1200px) and (min-width: 901px) {
  .grid .span-3 { grid-column: span 6; }
  .grid .span-4 { grid-column: span 6; }
  .grid .span-5 { grid-column: span 6; }
  /* span-6, span-7, span-8 유지 또는 확장 */
  .grid .span-7 { grid-column: span 12; }
  .grid .span-8 { grid-column: span 12; }
}

/* Small tablet: 대부분 2엔, 큰 항목 풀 */
@media (max-width: 900px) and (min-width: 600px) {
  .grid .span-3 { grid-column: span 6 !important; }
  .grid .span-4 { grid-column: span 6 !important; }
  .grid .span-5 { grid-column: span 6 !important; }
  .grid .span-6 { grid-column: span 6 !important; }
  .grid .span-7 { grid-column: span 12 !important; }
  .grid .span-8 { grid-column: span 12 !important; }
}

/* Phone: 모두 1열 (기졭 base.css 규칙 보강) */
@media (max-width: 599px) {
  .grid .span-3,
  .grid .span-4,
  .grid .span-5,
  .grid .span-6,
  .grid .span-7,
  .grid .span-8,
  .grid .span-12 {
    grid-column: span 12 !important;
  }
  .grid {
    gap: 10px !important;
  }
}

/* ─── 3. 인라인 → 스택 전환 (제목+내용 한줄 → 2줄) ─── */
/* row가 모바일밝에서 세로 스택으로 전환 */
@media (max-width: 599px) {
  .row:not(.row-keep):not(.row-inline) {
    flex-wrap: wrap;
  }
  /* section-head: 제목과 버슨이 겼칐지 않도록 */
  .section-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .section-head .btn,
  .section-head .itab {
    align-self: flex-start;
  }
  /* card-head도 스택 가능하게 */
  .card-head {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  /* rank-row: 이름과 수치가 줄바껈 가능 */
  .rank-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* KPI 값이 너묢 커서 넠치지 않게 */
  .kpi-value {
    font-size: clamp(20px, 5vw, var(--t-3xl)) !important;
    word-break: break-all;
  }
}

/* Tablet에서도 section-head 스택 */
@media (max-width: 900px) {
  .section-head {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ─── 4. 텍스트 치우침 방지 + 불필요 여백 제거 ─── */
/* 뷰 콘텐츠가 좌측에 치우치지 않게 */
.view-root .card,
.view-root .section {
  width: 100%;
}
/* 그리드 내읠 카드도 전체 너비 사용 */
.grid > [class*="span-"] > .card {
  width: 100%;
}
/* timeline/list 아이템이 한쪽으로 치웰0치지 않게 */
.timeline-content,
.tl-body {
  flex: 1;
  min-width: 0; /* flexbox text overflow 방지 */
}
/* 긴 텍스트 말줄임 처리 */
.timeline-content .title,
.tl-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 599px) {
  /* 모바일에서는 말줄임 대싡 줄바껈 허용 */
  .timeline-content .title,
  .tl-title {
    white-space: normal;
    word-break: break-word;
  }
}

/* ─── 5. 가로 오버플로우를 일으키는 요소 강제 제한 ─── */
/* 탭 버튼 그룹: 가로 스크롤 대신 줄바꿈 */
.tabs,
.itab {
  flex-wrap: wrap;
  max-width: 100%;
}
/* 칩 그룹: 줄바꿈 */
.chip-group,
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}
/* sub-nav-strip 가로 스크롤 방지 */
.sub-nav-inner {
  flex-wrap: wrap;
}
/* 차트 컨테이너 */
canvas {
  max-width: 100% !important;
}

/* ─── 6. 모바일 overscroll (pull-to-refresh 제어) ─── */
/* iOS Safari의 기본 pull-to-refresh(bounce) 차단 */
.view-root {
  overscroll-behavior-y: contain;
  -webkit-overscroll-behavior: contain;
}
/* 전체 문서에서도 overscroll 차단 */
html, body {
  overscroll-behavior: contain;
}

/* ─── 7. 모바일 사진 그리드 ─── */
@media (max-width: 599px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 4px !important;
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  }
}

/* ─── 8. memory-strip 가로 카드 — 가로스크롤 허용 (예외) ─── */
.memory-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  max-width: 100%;
}
.memory-strip::-webkit-scrollbar { display: none; }

/* ─── 9. 프로필/연락처 카드 그리드 반응형 ─── */
@media (max-width: 599px) {
  .prof-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .prof-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  }
}