/* 내비게이션 전용 스타일 — 데스크톱 좌측 레일 + 모바일 하단 독.
   style.css 800줄 한계 때문에 응집도 기준으로 분리했다(app-core.js renderTabs가 렌더). */

/* 독은 데스크톱에서 숨김 — 900px 이하에서만 flex로 켜진다(아래 미디어쿼리) */
.dock{display:none}

/* ============ 좌측 레일(AI 최상단 + 그룹별 섹션) ============ */
.rail{
  grid-row:1; overflow-y:auto; border-right:1px solid var(--line); padding:16px 12px;
  display:flex; flex-direction:column; gap:3px; background:color-mix(in srgb,var(--surface) 40%,transparent);
}
.rtab{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-radius:11px; padding:11px 13px; color:var(--ink-dim); font-size:14px; font-weight:500; transition:.13s;
}
.rtab .ic{font-size:17px; width:22px; text-align:center}
.rtab:hover{background:var(--surface-2); color:var(--ink)}
.rtab.on{color:var(--ink); background:var(--surface-2); position:relative}
.rtab.on::before{content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:3px; background:var(--aurora)}
.rtab-ai{font-weight:700; font-size:14.5px}
.rtab-ai .orb-sm{width:20px; height:20px}
.rail-sep{height:1px; background:var(--line); margin:9px 8px}

/* rtab 내부: 라벨은 남는 폭을 먹고(말줄임), 상태 점은 오른쪽 끝에 고정 */
.rlab{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* 플러그인 켜짐/꺼짐 상태 점 — 사이드바에서 바로 파악(개요 탭까지 안 가도 되게).
   plug(실제 plugin_configs 키)가 있는 항목에만 붙는다. */
.rtab-dot{flex:none; width:7px; height:7px; border-radius:50%; background:var(--line-strong); transition:.16s}
.rtab-dot.on{background:var(--good); box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent)}

/* 그룹 머리글 = 접기 버튼. 클릭 대상이지만 rtab보다 색·크기를 낮춰 계층을 유지한다. */
.rail-group{
  display:flex; align-items:center; gap:6px; width:100%; text-align:left; font-family:inherit;
  background:none; border:0; cursor:pointer; user-select:none;
  padding:14px 13px 5px; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint);
}
.rail-group:hover{color:var(--ink-dim)}
.rail-group>span:first-child{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rchev{flex:none; font-size:12px; line-height:1; transition:transform .16s}
.rail-group.off .rchev{transform:rotate(180deg)}
.rail-grp-items{display:flex; flex-direction:column; gap:3px}
.rail-grp-items.off{display:none}

@media (max-width:900px){
  .rail{display:none}
  /* 하단 독: 좌측 AI 오브(고정) + 우측 가로스크롤 섹션 탭 (인-플로우).
     좁은 화면에선 그룹 머리글을 쓰지 않고 그룹 순서대로 나열만 한다(가로 스크롤이 이미 맥락을 줌). */
  .dock{
    display:flex; align-items:center; gap:9px; flex:none; z-index:45;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(14px);
    border-top:1px solid var(--line-strong);
  }
  .dock-ai{flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
    background:var(--surface); border:1px solid var(--line-strong); transition:.15s}
  .dock-ai .orb-sm{width:26px; height:26px}
  .dock-ai.on{border-color:transparent; box-shadow:0 0 0 2px var(--a1)}
  .dock-tabs{flex:1; min-width:0; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity}
  .dock-tabs::-webkit-scrollbar{display:none}
  /* 그룹 경계 표시 — 독은 머리글을 못 넣으니 얇은 구분선으로 대체 */
  .dock-gsep{flex:none; align-self:center; width:1px; height:24px; background:var(--line-strong); margin:0 3px}
  .dtab{flex:none; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:0; cursor:pointer; color:var(--ink-faint); padding:6px 13px; border-radius:11px; transition:.13s}
  .dtab .di{font-size:18px; line-height:1} .dtab .dl{font-size:10px; white-space:nowrap}
  .dtab.on{color:var(--a2); background:var(--surface-2)} .dtab.on .di{transform:translateY(-1px)}
  .dtab:focus-visible{outline:2px solid var(--a1); outline-offset:-2px}
}
@media (max-width:360px){ .dtab .dl{display:none} }