/* @LAYER: VIEW | @PORT: 8002 | @ROLE: 홈 아이콘 런처의 모양(트리를 걷어낸 상단바 + 격자) | @KEY: .lh-*
 *
 * ★ 왜 (CEO 2026-09-20)
 *   "최초 대시보드 및 메인 화면에 아이콘이 존재하고 그 아이콘을 클릭했을 때 해당 기능의 페이지로 이동했으면
 *    좋겠어. (…) 실제 고객들은 어떤 기능이 있는 지 확연하게 알기가 어려울거야."
 *   "버튼형으로 바뀌었으면 좌측이 없어져야 하지 않을까?"
 *
 * ★ 좌측 트리는 **지우지 않고 감춘다.**
 *   studio_v2.0.html 이 pane-header / submenu-list / breadcrumb 에 글 쓰는 곳이 25군데,
 *   appData.find 로 그룹을 이름으로 찾는 곳이 12군데다(2026-09-20 실측). 지우면 그 자리들이 터진다.
 *   menu_visibility.js 가 이미 같은 이유로 "배열에서 빼지 않고 표식만 단다" 고 적어 뒀다 — 그 전례를 따른다.
 *
 * ★ 색·글꼴은 새로 만들지 않는다. studio 의 :root 변수를 그대로 쓴다.
 */

/* ── 트리 감추기 (DOM 은 살아 있다) ─────────────────────────────── */
.sidebar, .submenu-pane { display: none !important; }

/* ── 상단바 — 트리를 대신한다 (런처 JS 가 로고·홈 버튼을 심는다) ── */
/* ★로고 자체는 칠하지 않는다. 글꼴·색·자간·숨쉬기는 전부 정본 클래스
   (.logo-uhdpro / .logo-ai)가 쥔다 — 여기선 '어디에 놓을지'만 정한다.
   크기도 좌측 브랜드헤더(.brand-header h1)와 같은 1.3rem 을 쓴다. */
.lh-brand {
  font-size: 1.3rem; cursor: pointer; user-select: none;
  white-space: nowrap; margin-right: 4px;
}
.lh-home {
  display: none; align-items: center; gap: 6px; background: transparent;
  border: 1px solid var(--border-color); color: #bbb; border-radius: 7px;
  padding: 2px 10px; font-size: .8rem; line-height: 1.4; cursor: pointer; font-family: inherit; transition: .15s;   /* 6px 13px→2px 10px: 상자 31→24px, 경로 줄(26px)보다 작게(김성광 2026-10-06 "홈 버튼이 조금 더 큰 상태") */
}
.lh-home:hover { background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.2); }
.lh-home.on { display: inline-flex; }
.lh-home { white-space: nowrap; }   /* 폰에서 '←'·'홈' 이 두 줄로 쪼개지던 것(2026-10-06 실측) */
/* 로고·홈·경로 한 묶음 — 글자 아랫선을 맞춘다(김성광 2026-10-06). 로고는 아래 기준으로 세로를 줄여(scaleY .78)
   글꼴 아랫선보다 조금 내려앉으므로, 묶음 안에서 로고 칸만 .05em 올려 아랫선을 맞춘다(로고 클래스는 건드리지 않음). */
.lh-head { display: flex; align-items: baseline; gap: 18px; min-width: 0; position: relative; top: -3px; }  /* -3px = 묶음 글자 가운데를 상단바 가운데(오른쪽 버튼 줄)에 맞춤(실측) */
.lh-head > .lh-brand { position: relative; top: -.05em; }
.lh-head > .breadcrumb { margin-left: 2px; }
.lh-head > .lh-home { align-self: center; position: relative; top: 5px; }   /* '← 홈' 은 테두리 상자라 글자 아랫선이 아니라 묶음 가운데에 놓는다. 3→5px: 실제 글꼴(Noto Sans KR·Orbitron 웹폰트)로 잰 글자 가운데 = 로고 36 · 경로 36.5 → 상자 34.5→36.5(김성광 2026-10-06 "로고·글자보다 위에 있다") */

/* ── 격자 ──────────────────────────────────────────────────────── */
.lh-wrap { max-width: 1180px; margin: 0 auto; }
.lh-band { margin-bottom: 34px; }
.lh-band-t {
  font-size: .78rem; color: #9aa3b4; font-weight: 700;
  margin-bottom: 20px; display: flex; align-items: center; gap: 16px;
}
.lh-band-t::before, .lh-band-t::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
.lh-band-t i { font-style: normal; font-size: .68rem; color: #555; margin-left: 6px; font-weight: 400; }

/* 줄마다 같은 칸수 격자(--lh-cols = JS 가 잰 칸수, PC 최대 5). 덜 찬 마지막 줄도 칸 자리가 같아 세로 열이 맞는다.
   김성광 2026-10-06 "1줄에 5칸씩 · 왼쪽부터"(9/20 '위아래 개수 맞추기'를 대체). justify-content 는 칸 묶음 전체를 옮긴다. */
.lh-grid { display: flex; flex-direction: column; gap: 10px; }
.lh-row  { display: grid; grid-template-columns: repeat(var(--lh-cols, 5), 132px); justify-content: center; gap: 10px; }

.lh-tile {
  width: 132px; background: rgba(255,255,255,.015); border: 1px solid rgba(255,255,255,.05);
  border-radius: 14px; padding: 20px 8px 16px; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  cursor: pointer; transition: .18s;
}
.lh-tile:hover { background: rgba(255,255,255,.055); border-color: rgba(0,240,255,.28); transform: translateY(-3px); }
.lh-tile:focus-visible { outline: 2px solid var(--ai-neon); outline-offset: 2px; }
.lh-ico { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: #7FA8E8; transition: .18s; }
.lh-ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.lh-tile:hover .lh-ico { color: var(--ai-neon); filter: drop-shadow(0 0 7px rgba(0,240,255,.35)); }
.lh-name { font-size: .79rem; color: #dcdcdc; text-align: center; line-height: 1.35; word-break: keep-all; }
.lh-name-main, .lh-name-sub { display: block; }
.lh-name-sub { white-space: nowrap; }   /* 괄호 부분은 한 줄로 — 폰(home_phone.css)에서는 다시 풀어 준다 */
.lh-lock { position: absolute; top: 11px; left: 12px; font-size: .56rem; color: var(--uhd-red); letter-spacing: .5px; }

/* ★진행 배지(점)는 두지 않는다 — CEO 2026-09-20 "미완성 기능은 따로 표시하지 마. 지금 전부 완성했잖아?" */

/* ── 대시보드와 격자 사이 구분선 ───────────────────────────────── */
.lh-split { display: flex; align-items: center; gap: 14px; margin: 34px 0 22px; }
.lh-split::before, .lh-split::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
.lh-split b { font-family: 'Orbitron', sans-serif; font-size: .7rem; letter-spacing: 2px; color: #666; font-weight: 700; }

/* ── 폰(/m) — 칸을 줄이고 한 줄 최대 4칸 ───────────────────────── */
@media (max-width: 820px) {
  .lh-grid, .lh-row { gap: 6px; }
  /* 폰: 4칸 격자가 화면 폭을 나눠 쓴다(타일이 칸 폭을 따라감) — 360px 폰에서도 4칸(김성광 2026-10-06 "휴대폰에서 찌그러진다") */
  .lh-row  { grid-template-columns: repeat(var(--lh-cols, 4), minmax(0, 1fr)); justify-content: stretch; }
  .lh-tile { width: auto; min-width: 0; padding: 15px 5px 11px; gap: 8px; }
  .lh-ico { width: 36px; height: 36px; }
  .lh-name { font-size: .7rem; }
  .lh-head > .breadcrumb { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   회원 홈 3차 (CEO 2026-09-21 확정 — 제미나이 시안 반영 · B 타일 · 내용 폭 존중 레이아웃)
   스위치 = body.uhd-console (관리자·회원 공통: 상단바·타일·테마) + body.uhd-console (회원만: 2단 배치·LIVE n/4 숨김). CEO 2026-09-21 "관리자 계정도 디자인".
   색은 studio :root 변수만 · 로고 클래스는 건드리지 않는다(디자인 기준표 §1).
   ══════════════════════════════════════════════════════════════════════ */

/* ── 상단바: 로고·경로 확대(규칙4, 로고는 균일 확대만) · 환영문구 · 알림종 · 설정 · 로그아웃 ── */
body.uhd-console .top-bar { padding: 0 30px; gap: 18px; }
body.uhd-console .lh-brand { font-size: 1.7rem; }   /* 1.9→1.7 · 경로 1.05→1.2 = 로고와 경로 글자 크기를 비슷하게(김성광 2026-10-06, 대문자 높이 실측 13.8 vs 13.0px) */
body.uhd-console .breadcrumb { font-size: 1.2rem; color: #9aa3b4; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }  /* 경로 글자 꺾임 방지(통합 렌더 1600 에서 실측) */
body.uhd-console .breadcrumb span { color: #fff; font-weight: 700; }
body.uhd-member .data-source { display: none; }                        /* LIVE n/4 = 개발자 계기판 — 고객 화면에서 제거(9/21 확정) */
body.uhd-member .top-actions > button[onclick^="refreshStudio"] { display: none; }
body.uhd-console #auth-user { display: none; }                          /* 환영문구가 대신한다 */
body.uhd-console .top-actions { gap: 14px; margin-left: auto; }
.lh-hello { font-size: 1.05rem; color: #c8cdd6; white-space: nowrap; }
.lh-hello b { color: var(--ai-neon); font-weight: 700; }
.lh-ib {
  position: relative; width: 40px; height: 40px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); display: inline-flex; align-items: center; justify-content: center;
  color: #c8cdd6; cursor: pointer; transition: .15s; padding: 0; font-family: inherit;
}
.lh-ib:hover { border-color: var(--ai-neon); color: var(--ai-neon); }
.lh-ib svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lh-badge {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--uhd-red);
  color: #fff; font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
body.uhd-console #logout-btn { font-family: inherit; letter-spacing: 0; font-weight: 500; font-size: .95rem; padding: 9px 18px; border-radius: 8px; white-space: nowrap; border-color: rgba(0,240,255,.3); color: #dfe5ee; }
body.uhd-console #logout-btn:hover { border-color: var(--ai-neon); color: var(--ai-neon); background: rgba(0,240,255,.06); }

/* ── 관리자 홈: 개요 위젯(넓은 3열)은 위아래 그대로, 폭 1180 가운데 · 구분선 '바로가기' 유지 ── */
.lh-wide { max-width: 1180px; margin: 0 auto; }
body.uhd-console .lh-split b { color: #9fb3c8; }
body.uhd-console .lh-split::before, body.uhd-console .lh-split::after { background: rgba(0,240,255,.18); }

/* ── 본문 2단(회원): 좌 '오늘의 요약' 568px 고정(카드 277px = 글자 안 꺾이는 하한 실측) / 우 격자 = 남는 폭 ── */
body.uhd-console .content-area.dashboard-mode { padding: 28px 24px; }  /* ★홈 진입 시 studio 가 인라인 padding 을 지워야 산다 */
.lh-cols { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 568px minmax(0,1fr); gap: 26px; align-items: start; }
.lh-left, .lh-right { min-width: 0; }
.lh-cols .lh-wrap { max-width: none; margin: 0; }
.lh-cols .lh-row { justify-content: flex-start; }
.lh-cols .mdash-top { margin: 0 0 14px; }
.lh-cols .mdash-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
body.uhd-console .lh-band { margin-bottom: 18px; }
body.uhd-console .lh-band-t { font-size: .76rem; color: #9fb3c8; margin-bottom: 12px; }
body.uhd-console .lh-band-t::before, body.uhd-console .lh-band-t::after { background: rgba(0,240,255,.18); }

/* ── 타일 B '아이콘 상자' (CEO 확정): 유리판 + 베벨 + 청록 네온, 아이콘은 빛나는 상자 안(듀오톤) ── */
body.uhd-console .lh-tile {
  padding: 16px 8px 14px; gap: 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(18,28,42,.72), rgba(8,12,20,.82)); backdrop-filter: blur(10px);
  border: 1px solid rgba(0,240,255,.30);
  box-shadow: 0 14px 32px rgba(0,0,0,.5), 0 0 20px rgba(0,240,255,.12), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.55);
}
body.uhd-console .lh-tile:hover { transform: translateY(-4px); border-color: rgba(0,240,255,.6); box-shadow: 0 18px 38px rgba(0,0,0,.55), 0 0 30px rgba(0,240,255,.24), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.55); }
body.uhd-console .lh-ico { width: 58px; height: 58px; border-radius: 15px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); color: #9aa3b4; }
body.uhd-console .lh-ico svg { width: 30px; height: 30px; fill: currentColor; fill-opacity: .16; stroke-width: 1.5; }
body.uhd-console .lh-band[data-b="work"] .lh-ico { color: var(--ai-neon); background: linear-gradient(160deg, rgba(0,240,255,.26), rgba(0,87,255,.20)); border-color: rgba(0,240,255,.45); box-shadow: 0 0 18px rgba(0,240,255,.22), inset 0 1px 0 rgba(255,255,255,.18); }
body.uhd-console .lh-tile:hover .lh-ico { color: var(--ai-neon); box-shadow: 0 0 26px rgba(0,240,255,.4); filter: none; }
body.uhd-console .lh-name { font-size: .8rem; font-weight: 700; color: #e8eaef; }

/* ── 분기점 1100: 좌측이 찌그러지기 전에 상하 배치 (568 + 26 + 타일 3칸 437 + 여백 48 ≈ 1080) ── */
@media (max-width: 1100px) {
  .lh-cols { grid-template-columns: 1fr; }
  .lh-left { max-width: 568px; margin: 0 auto; width: 100%; }
  .lh-cols .lh-row { justify-content: center; }
  body.uhd-console .breadcrumb { white-space: nowrap; font-size: .9rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }  /* 1024 꺾임·900 넘침 실측 */
  body.uhd-console .top-actions { flex: 0 0 auto; }
  body.uhd-console .lh-head { flex: 1 1 auto; }   /* 경로가 묶음 안으로 들어갔으므로 줄어들 자리는 묶음이 받는다 */
  body.uhd-console .lh-brand { font-size: 1.6rem; }
}
/* ── 폰(APP): 아이콘 격자가 먼저(CEO 2026-09-21) · 카드 1열 · 상단바 확대분 되돌림(390 에서 28px 넘침 실측) ── */
@media (max-width: 820px) {
  .lh-right { order: -1; margin-bottom: 6px; }
  .lh-cols .mdash-grid { grid-template-columns: 1fr; }
  body.uhd-console .content-area.dashboard-mode { padding: 16px 14px; }
  .lh-hello { display: none; }
  body.uhd-console .top-bar { gap: 10px; padding: 0 14px; }
  body.uhd-console .lh-brand { font-size: 1.45rem; }
  /* 폰 상단바: 로고 묶음은 줄지 않고, 오른쪽 버튼 줄이 남은 자리에서 옆으로 밀린다(버튼은 하나도 안 없앤다).
     2026-10-06 실측: 묶음이 0까지 줄어 버튼 줄(x=24부터)이 로고 위를 덮었다(김성광 캡처). */
  body.uhd-console .lh-head { flex: 0 0 auto; gap: 10px; }
  body.uhd-console .top-actions {
    flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; justify-content: flex-start;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }
  body.uhd-console .top-actions::-webkit-scrollbar { display: none; }
  body.uhd-console .top-actions > * { flex: 0 0 auto; }
  .lh-ib { width: 36px; height: 36px; } .lh-ib svg { width: 19px; height: 19px; }
  body.uhd-console #logout-btn { font-size: .85rem; padding: 7px 12px; }
  body.uhd-console .lh-tile { backdrop-filter: none; }
}