/* ════════════════════════════════════════════════════════════════════
 *  AVA 공용 사이드 메뉴(레일) — 업무허브·마케팅허브 «같은 느낌» (2026-08-27)
 *
 *  왜 만들었나
 *    두 허브가 각자 메뉴를 그려서, 데스크톱에서 열어 보면 서로 다른 앱처럼 보였다.
 *    업무허브는 접히는 그룹, 마케팅허브는 평평한 목록이었다 — 원장 지적.
 *    모양·간격·색을 여기 한 곳에서만 정한다.
 *
 *  쓰는 법 (마크업)
 *    <aside class="ava-rail">
 *      <div class="rail-section open" data-sec="키">
 *        <div class="header"><span>그룹 이름</span><i class="fas fa-chevron-right chev"></i></div>
 *        <div class="items">
 *          <a class="item" href="..."><i class="fas fa-..."></i><span>항목</span></a>
 *        </div>
 *      </div>
 *    </aside>
 *    .open 이 붙어 있으면 펼쳐진 상태다.
 *
 *  색은 정본 토큰(--ava-*)만 쓴다 — 허브마다 다른 옛 별칭을 쓰면 또 갈라진다.
 * ════════════════════════════════════════════════════════════════════ */

.ava-rail {
  background: var(--ava-cream, #F6F4F0);
  border-right: 1px solid var(--ava-line-strong, #C4BEB2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── 그룹 ─────────────────────────────────────────────────────────── */
.ava-rail .rail-section { border-bottom: 1px solid var(--ava-surface, #EEEBE5); }

.ava-rail .rail-section > .header {
  padding: 9px 12px;
  font-family: var(--ava-font-body, 'Pretendard Variable', sans-serif);
  font-style: normal;
  color: var(--ava-ink, #201E1B);
  font-size: 12.5px;   /* 2026-08-27: 항목 글씨(12px)와 차이를 줄였다 — 원장 요청 */
  font-weight: 600;
  letter-spacing: -0.1px;
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
/* 그룹 아이콘 — 둥근 색 타일. 글리프는 자체호스팅된 것을 쓰고 색만 입힌다. */
.ava-rail .rail-section > .header > span { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ava-rail .rail-section > .header .ico {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; flex-shrink: 0;
  background: var(--rail-ico-bg, #EFEBE4);
  color: var(--rail-ico-fg, #7A6136);
}
.ava-rail .rail-section > .header:hover { background: var(--ava-surface, #EEEBE5); }
.ava-rail .rail-section > .header i.chev { font-size: 9px; transition: transform .15s; }
.ava-rail .rail-section.open > .header i.chev { transform: rotate(90deg); }

/* ── 항목 ─────────────────────────────────────────────────────────── */
.ava-rail .rail-section > .items { display: none; padding: 0 0 4px; }
.ava-rail .rail-section.open > .items { display: block; }

.ava-rail .rail-section .item {
  padding: 5px 14px 5px 22px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ava-ink, #201E1B);
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.ava-rail .rail-section .item:hover {
  background: var(--ava-surface, #EEEBE5);
  border-left-color: var(--ava-line-strong, #C4BEB2);
}
.ava-rail .rail-section .item.active {
  background: var(--ava-surface, #EEEBE5);
  border-left-color: var(--ava-gold, #A88C64);
  color: var(--ava-gold, #A88C64);
  font-weight: 600;
}
.ava-rail .rail-section .item i {
  color: var(--ava-gold, #A88C64);
  font-size: 10px;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  opacity: .7;
}
.ava-rail .rail-section .item.active i { opacity: 1; }

/* 즐겨찾기 별 — 업무허브에서 쓴다 */
.ava-rail .rail-section .item .star {
  margin-left: auto;
  color: var(--ava-mute, #6E6962);
  opacity: 0;
  font-size: 10px;
  cursor: pointer;
  padding: 2px;
}
.ava-rail .rail-section .item:hover .star,
.ava-rail .rail-section .item .star.fav { opacity: 1; }
.ava-rail .rail-section .item .star.fav { color: var(--brand-warn, #B0843E); }

/* ── 「자주 쓰는」 — 계획안대로 맨 아래, 접히지 않는다 ─────────────
   매일 쓰는 건 한 번에 바로 눌리게. 그룹 머리글과 달리 누르는 곳이 아니라
   «표지» 이므로 커서도 기본, 눌러도 아무 일 없다. */
.ava-rail .rail-fav {
  margin-top: 4px;
  border-top: 1px solid var(--ava-line-strong, #C4BEB2);
  padding-bottom: 6px;
  background: var(--ava-cream, #F6F4F0);
}
.ava-rail .rail-fav .fav-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px 6px;
  font-family: var(--ava-font-body, 'Pretendard Variable', sans-serif);
  font-size: 12px; font-weight: 700;
  color: var(--ava-mute-strong, #5A554E);
  letter-spacing: -0.1px;
}
.ava-rail .rail-fav .fav-head .ico {
  width: 22px; height: 22px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
  background: #FBF0DA; color: #9A6E1E;
}
.ava-rail .rail-fav .item {
  padding: 5px 14px 5px 22px;
  font-size: 12px; cursor: pointer;
  color: var(--ava-ink, #201E1B);
  display: flex; align-items: center; gap: 6px;
  border-left: 3px solid transparent;
}
.ava-rail .rail-fav .item:hover {
  background: var(--ava-surface, #EEEBE5);
  border-left-color: var(--ava-gold, #A88C64);
}
.ava-rail .rail-fav .item i {
  color: var(--ava-gold, #A88C64); font-size: 10px;
  width: 14px; text-align: center; flex-shrink: 0; opacity: .8;
}
html[data-theme="dark"] .ava-rail .rail-fav,
body.ava-dark .ava-rail .rail-fav { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .ava-rail .rail-fav .fav-head .ico,
body.ava-dark .ava-rail .rail-fav .fav-head .ico { background: rgba(201,168,114,.20); color: #E3C88F; }

/* ── 그룹별 색 (라이트) ─────────────────────────────────────────────
   계획안처럼 «한눈에 구분» 되게 그룹마다 다른 색을 준다.
   밝은 배경 위라 배경은 옅게, 글리프는 진하게 잡았다. */
.ava-rail .rail-section[data-sec="__top"]    { --rail-ico-bg:#FBF0DA; --rail-ico-fg:#9A6E1E; }
.ava-rail .rail-section[data-sec="start"]    { --rail-ico-bg:#FDEADB; --rail-ico-fg:#B65F1B; }
.ava-rail .rail-section[data-sec="clinic"]   { --rail-ico-bg:#E3EEF7; --rail-ico-fg:#2C6493; }
.ava-rail .rail-section[data-sec="patient"]  { --rail-ico-bg:#E8F1E5; --rail-ico-fg:#43703A; }
.ava-rail .rail-section[data-sec="message"]  { --rail-ico-bg:#F5E8EF; --rail-ico-fg:#8E4470; }
.ava-rail .rail-section[data-sec="finance"]  { --rail-ico-bg:#EAF0E1; --rail-ico-fg:#556E2A; }
.ava-rail .rail-section[data-sec="marketing"]{ --rail-ico-bg:#FBE6E2; --rail-ico-fg:#A94036; }
.ava-rail .rail-section[data-sec="ops"]      { --rail-ico-bg:#EBE9F3; --rail-ico-fg:#4F4881; }
/* 마케팅허브 9그룹 — 같은 팔레트를 순서대로 */
.ava-rail .rail-section[data-sec="mh1"]{ --rail-ico-bg:#FDEADB; --rail-ico-fg:#B65F1B; }
.ava-rail .rail-section[data-sec="mh2"]{ --rail-ico-bg:#E3EEF7; --rail-ico-fg:#2C6493; }
.ava-rail .rail-section[data-sec="mh3"]{ --rail-ico-bg:#E8F1E5; --rail-ico-fg:#43703A; }
.ava-rail .rail-section[data-sec="mh4"]{ --rail-ico-bg:#F5E8EF; --rail-ico-fg:#8E4470; }
.ava-rail .rail-section[data-sec="mh5"]{ --rail-ico-bg:#FBF0DA; --rail-ico-fg:#9A6E1E; }
.ava-rail .rail-section[data-sec="mh6"]{ --rail-ico-bg:#EAF0E1; --rail-ico-fg:#556E2A; }
.ava-rail .rail-section[data-sec="mh7"]{ --rail-ico-bg:#FBE6E2; --rail-ico-fg:#A94036; }
.ava-rail .rail-section[data-sec="mh8"]{ --rail-ico-bg:#EBE9F3; --rail-ico-fg:#4F4881; }
.ava-rail .rail-section[data-sec="mh9"]{ --rail-ico-bg:#E6EFEE; --rail-ico-fg:#2F625B; }

/* 펼쳐진 그룹은 머리글을 살짝 강조 — 계획안의 «지금 여기» 느낌 */
.ava-rail .rail-section.open > .header { background: var(--ava-cream, #F6F4F0); }

/* ── 다크 ───────────────────────────────────────────────────────────
   계획안 이미지처럼 어두운 판 위에 색 아이콘이 뜨는 느낌.
   라이트 값을 그대로 쓰면 너무 밝아서, 배경은 반투명으로 깔고 글리프를 밝게 올린다. */
html[data-theme="dark"] .ava-rail .rail-section[data-sec="__top"],
body.ava-dark .ava-rail .rail-section[data-sec="__top"]    { --rail-ico-bg:rgba(201,168,114,.20); --rail-ico-fg:#E3C88F; }
html[data-theme="dark"] .ava-rail .rail-section[data-sec="start"],
body.ava-dark .ava-rail .rail-section[data-sec="start"]    { --rail-ico-bg:rgba(224,140,60,.20);  --rail-ico-fg:#F0B279; }
html[data-theme="dark"] .ava-rail .rail-section[data-sec="clinic"],
body.ava-dark .ava-rail .rail-section[data-sec="clinic"]   { --rail-ico-bg:rgba(90,150,210,.20);  --rail-ico-fg:#93BEE4; }
html[data-theme="dark"] .ava-rail .rail-section[data-sec="patient"],
body.ava-dark .ava-rail .rail-section[data-sec="patient"]  { --rail-ico-bg:rgba(110,180,95,.20);  --rail-ico-fg:#A5CF97; }
html[data-theme="dark"] .ava-rail .rail-section[data-sec="message"],
body.ava-dark .ava-rail .rail-section[data-sec="message"]  { --rail-ico-bg:rgba(200,120,170,.20); --rail-ico-fg:#E0A8C9; }
html[data-theme="dark"] .ava-rail .rail-section[data-sec="finance"],
body.ava-dark .ava-rail .rail-section[data-sec="finance"]  { --rail-ico-bg:rgba(150,180,90,.20);  --rail-ico-fg:#C2D493; }
html[data-theme="dark"] .ava-rail .rail-section[data-sec="marketing"],
body.ava-dark .ava-rail .rail-section[data-sec="marketing"]{ --rail-ico-bg:rgba(215,105,90,.20);  --rail-ico-fg:#EDA093; }
html[data-theme="dark"] .ava-rail .rail-section[data-sec="ops"],
body.ava-dark .ava-rail .rail-section[data-sec="ops"]      { --rail-ico-bg:rgba(140,130,205,.20); --rail-ico-fg:#B3ACE0; }
html[data-theme="dark"] .ava-rail .rail-section.open > .header,
body.ava-dark .ava-rail .rail-section.open > .header { background: rgba(255,255,255,.05); }