/* @LAYER: VIEW | @PORT: 8002 | @ROLE: 회원 홈 폰(≤820) 전용 — 카드 접기(2열 요약 격자) + 기능 버튼 아래 고정 독 (CEO 2026-09-21 "A안으로 하자") | @KEY: body.uhd-member @media(max-width:820px)
 *
 * ★ 왜: 폰 실측(운영 화면, 390×844) 전체 2,096px = 2.5화면. 버튼 격자 722px 뒤에 카드 6장 1,239px → 첫 화면에 카드가 한 장도 안 보였다.
 *   제미나이 검토 3건(세로로 길다 · 버튼 위/대시보드 아래가 맞나 · 탭/아코디언/KPI 바) → A안:
 *   ① 요약이 먼저 — 카드 6장을 2열 '접힘 격자'로(제목+아이콘+큰 숫자만). 누르면 그 칸만 펼침. 문제 카드(g-bad)는 처음부터 펼침.
 *   ② 기능 버튼 9개는 화면 아래 고정 독 — 엄지가 닿는 자리. 옆으로 밀어서 본다. 메뉴는 하나도 안 없앤다.
 *   미리보기 실측 = 1화면(본문 653 + 독 94). 정본 = docs/preview/nexus_앱홈_스크롤개선_미리보기_20260921.html
 *
 * ★ 원칙
 *   · DOM 은 그대로(런처·대시보드가 그리는 트리 무변경) — 폰 CSS 만. PC(820 초과)에는 규칙이 하나도 없다.
 *   · 회원(body.uhd-member)만. 관리자 홈은 종전 배치.
 *   · 메뉴(.lh-tile)·묶음(.lh-band)은 display:none 금지 — 묶음 **제목**(.lh-band-t)만 폰에서 생략한다.
 *   · 색은 studio :root 변수·기준표 팔레트만(청록 강조·배경 #060810). 로고 클래스는 건드리지 않는다.
 *   · 접기/펼치기 상태(.open)는 home_phone_fold.js 가 토글한다.
 */

@media (max-width: 820px) {

  /* ── 1. 카드 접기 — 6칸이 2열 요약 격자. 펼친 칸은 한 줄을 다 쓴다(dense: 빈 칸을 남기지 않음) ── */
  body.uhd-member .lh-cols .mdash-grid { grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-flow: dense; }
  body.uhd-member .mdash-card { padding: 12px 12px 11px; min-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  body.uhd-member .mdash-card.open { grid-column: 1 / -1; }
  body.uhd-member .mdash-card:not(.open) .mdh-lines,
  body.uhd-member .mdash-card:not(.open) .mdash-sub,
  body.uhd-member .mdash-card:not(.open) .mdash-go { display: none; }
  body.uhd-member .mdash-card:not(.open) .mdash-dim { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .72rem; }
  body.uhd-member .mdash-card .mdash-h { margin-bottom: 8px; padding-right: 16px; }
  body.uhd-member .mdash-card .mdash-t { font-size: .82rem; }
  body.uhd-member .mdash-card:not(.open) .mdh-body { gap: 10px; }
  body.uhd-member .mdash-card:not(.open) .mdh-ic { width: 38px; height: 38px; border-radius: 10px; }
  body.uhd-member .mdash-card:not(.open) .mdh-ic svg { width: 20px; height: 20px; }
  body.uhd-member .mdash-card:not(.open) .mdh-ring { width: 56px; height: 56px; }
  body.uhd-member .mdash-card:not(.open) .mdh-ring .n b { font-size: .95rem; }
  body.uhd-member .mdash-card:not(.open) .mdh-ring .n s { font-size: .5rem; }
  body.uhd-member .mdash-card:not(.open) .mdash-n { font-size: 1.6rem; }
  body.uhd-member .mdash-card:not(.open) .mdash-u { font-size: .66rem; margin-left: 4px; }
  /* 펼침 표시(꺾쇠) — 글자·아이콘 추가 없이 테두리 2변으로 그린다 */
  body.uhd-member .mdash-card::after { content: ''; position: absolute; right: 14px; top: 17px; width: 7px; height: 7px;
    border-right: 1.5px solid var(--text-muted, #7b8697); border-bottom: 1.5px solid var(--text-muted, #7b8697);
    transform: rotate(45deg); transition: transform .2s; }
  body.uhd-member .mdash-card.open::after { transform: rotate(225deg); top: 21px; }
  body.uhd-member .mdash-top { margin-bottom: 10px; }

  /* ── 2. 기능 버튼 = 화면 아래 고정 독. 묶음 상자(.lh-band/.lh-grid/.lh-row)를 풀어 한 줄로 — 메뉴는 전부 그대로 ── */
  body.uhd-member .lh-right { order: 0; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(6,8,16,.9), #060810); border-top: 1px solid rgba(0,240,255,.22);
    box-shadow: 0 -10px 28px rgba(0,0,0,.5); }
  body.uhd-member .lh-wrap { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 0 12px;
    scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
  body.uhd-member .lh-wrap::-webkit-scrollbar { display: none; }
  body.uhd-member .lh-band, body.uhd-member .lh-grid, body.uhd-member .lh-row { display: contents; }
  body.uhd-member .lh-band-t { display: none; }                                   /* 묶음 제목(작업·서비스·설정)만 생략 */
  body.uhd-member .lh-tile { flex: 0 0 74px; width: 74px; padding: 9px 3px 7px; gap: 5px; border-radius: 12px; scroll-snap-align: start; }
  body.uhd-member .lh-ico { width: 32px; height: 32px; border-radius: 9px; }
  body.uhd-member .lh-ico svg { width: 18px; height: 18px; }
  body.uhd-member .lh-name { font-size: .6rem; line-height: 1.15; }
  body.uhd-member .lh-name-sub { white-space: normal; }   /* 74px 타일에선 괄호 줄도 접히게(넘침 방지) */
  /* 누르는 순간 살짝 눌리고 청록 테두리가 켜진다(제미나이 추가의견 ② · 터치 반응만. '현재 메뉴' 표시는 독이 홈에서만 보여 성립 안 함) */
  body.uhd-member .lh-tile { transition: transform .12s ease, box-shadow .12s ease; }
  body.uhd-member .lh-tile:active { transform: scale(.94); box-shadow: 0 0 0 1px rgba(0,240,255,.55), 0 0 14px rgba(0,240,255,.28); }
  /* 독 높이만큼 본문 끝을 비운다 — mobile.css 의 .content-area 규칙이 !important 라 같은 무게가 필요하다 */
  body.uhd-member .content-area.dashboard-mode { padding-bottom: 122px !important; }
}
