/* ==========================================================================
  File: components.css
  Purpose: 컴포넌트 단위 스타일(토픽/배지/카드/상세/드로어/토글버튼/카운트 강조 등)
  Contains:
    - Pills, Topic List & Item, Active 상태 강조
    - Cards & 상세 설명(스크롤/호버 표시)
    - Drawer/Menu(1·2레벨, 서브메뉴)
    - 사이드바 토글 버튼 그룹화(#sidebarToggle, .sidebar-toggle)
    - 'XXX개' 카운트 강조 규칙(옵션 포함)
  Depends on: base.css, layout.css
  Import order: 3 / 3
========================================================================== */

/* ===== Pills & Topic list ===== */
.pill-row { padding: 10px; display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.pill {
  font-size: 12px; padding: 6px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--fg);
}
.pill.active { background: var(--brand); color: #fff; border-color: transparent; }

.topic-list { overflow: auto; padding: 6px; scrollbar-width: thin; }
.topic-list, #topicList, #topicList * { color: var(--fg); }
.topic-list::-webkit-scrollbar { width: 8px; }
.topic-list::-webkit-scrollbar-thumb { background: #2a3242; border-radius: 6px; }

/* ===== Topic item ===== */
.topic-item {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px; margin: 6px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .2s ease, background .2s ease, transform .08s ease;
}
.topic-item:hover { border-color: var(--brand); background: rgba(43,116,255,.06); }
.topic-item:active { transform: translateY(1px); }
.topic-name { font-weight: 600; }
.badge {
  background: var(--surface); border: 1px solid var(--border);
  padding: 3px 8px; font-size: 12px; border-radius: 999px; color: var(--muted);
  min-width: 28px; text-align: center;
}

/* 현재 보고 있는 토픽 강조 */
.topic-item.active,
.topic-item[aria-current="page"] {
  border-color: var(--brand);
  background: linear-gradient(0deg, rgba(43,116,255,.08), rgba(43,116,255,.08)), var(--surface-2);
}
.topic-item.active::before,
.topic-item[aria-current="page"]::before {
  content: "";
  position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--brand);
}
.topic-item.active .topic-name,
.topic-item[aria-current="page"] .topic-name { font-weight: 700; }

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 12px;
  display: grid; gap: 12px;
  box-shadow: var(--shadow-soft);
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.card:hover { transform: translateY(-2px); border-color: var(--brand); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-title { margin: 0; font-size: 16px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 12px; padding: 4px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}

/* 카드 및 상세 설명 텍스트 */
.card-desc {
  font-size: 13px; color: var(--muted); margin: 0;
  text-overflow: ellipsis; max-height: 60px; overflow-y: auto; white-space: normal;
}
.card-desc:hover { cursor: pointer; text-decoration: underline; }
#detailDesc { margin-top: 6px; font-size: 14px; color: var(--muted); }

/* 상세 상단 */
.detail { display: grid; gap: 14px; }
.detail.hidden { display: none; }
.detail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px;
}

/* ===== Add-stock form ===== */
.add-stock-form { display: flex; gap: 8px; margin-top: 10px; }
.add-stock-form input {
  flex: 1; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--fg);
}
.add-stock-form button { white-space: nowrap; }

/* ===== Drawer / Menu ===== */
.menu {
  position: fixed; top: 0; left: 0; height: 100dvh; width: 240px; z-index: 1000;
  background: var(--surface-2); border-right: 1px solid var(--border);
  transform: translateX(-105%); transition: transform .2s ease;
}
.menu.open { transform: translateX(0); }
.menu.teal {}
.menu-lv1, .menu-lv2 { display: flex; gap: 10px; padding: 10px 12px; margin: 0; list-style: none; }
.menu-lv1.vertical, .menu-lv2.vertical { flex-direction: column; gap: 8px; padding: 10px; }
.menu-lv2.sub { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 10px; }
.drawer { box-shadow: var(--shadow); }
.drawer-head { display:flex; align-items:center; justify-content: space-between; padding: 14px 16px; border-bottom:1px solid var(--border); color: var(--fg); }
.drawer-title { font-weight:700; }
.menu-btn { width: 100%; padding: 12px 18px; border-radius: 0; background: transparent; border: 0; text-align: left; display: flex; align-items: center; gap: 12px; color: var(--fg); }
.menu-lv1 li { position: relative; }
.menu-lv1 li .menu-btn {
  width: 100%; gap: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg);
}
.menu-lv1 li .menu-btn:hover { background: var(--surface-2); }
.menu-lv1 li .menu-btn.active { position: relative; background: var(--brand); color: #fff; border-color: transparent; }
.menu-lv1 li .menu-btn.active::after { content: '›'; position: absolute; right: 12px; font-size: 18px; opacity: .95; }
.menu-icon { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--fg); border: 1px solid var(--border); }
.menu-label { flex: 1; }
.menu-lv2 li a { display: block; padding: 12px 14px; color: var(--fg); border-bottom: 1px solid var(--border); background: var(--surface); }

/* flyout submenu */
.submenu {
  position: absolute; top: 60px; left: 100%; width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-left: none;
  border-radius: 0 6px 6px 0; box-shadow: var(--shadow); display: none;
}
.submenu.open { display: block; }
.menu-l1 .has-children::after,
.menu-lv1 li button.has-children::after { content: '›'; float: right; opacity: .6; }

/* ===== Sidebar Toggle (통합) ===== */
#sidebarToggle,
.sidebar-toggle {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px; line-height: 1; padding: 0; border: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; box-shadow: var(--shadow-soft);
}
#sidebarToggle:hover, .sidebar-toggle:hover { filter: brightness(1.06); }
.light #sidebarToggle, .light .sidebar-toggle { color: #fff; }

/* 아이콘 자동(비어있을 때만) */
#sidebarToggle:empty::before,
.sidebar-toggle:empty::before {
  content: "›"; /* 필요 시 '‹'로 변경 */
  font-size: 18px; line-height: 1; transform: translateX(1px);
}
/* 내부 svg/i 색상 상속 */
#sidebarToggle i, #sidebarToggle .icon, #sidebarToggle svg,
.sidebar-toggle i, .sidebar-toggle .icon, .sidebar-toggle svg {
  fill: currentColor; color: currentColor;
}

/* ===== ‘XXX개’ 카운트 강조 ===== */
.sidebar-head > :not(:first-child):not(:last-child) {
  order: 1;
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  margin-right: 6px;
  align-self: center;
}
/* 토글 버튼은 항상 오른쪽 */
.sidebar-head > :is(button, #sidebarToggle, .sidebar-toggle):last-child { order: 2; }
/* count 클래스를 사용할 경우 톤 다운(옵션) */
.sidebar-head .topic-count,
.sidebar-head .count {
  color: var(--muted);
  font-size: 13px;
}