/* ══ 🆕 2026-10-18 종목 화면 「접는 카드 + 목차 칩」 (진석님: 카드가 많아져 모바일에서 읽기 어렵다) ══════════
   stock.css 위에 **덧씌우는** 파일이다 — 되돌리기 = index.html 의 이 파일 <link> 한 줄을 빼면 끝.
   (pm/v2 의 pmv2.card.css 와 같은 방식.) 미리보기 stage.html 에서 먼저 보고 index.html 로 옮긴다.
   🔴 shell.css 이름·:root·details 재선언 금지(stock.css 머리 규칙 그대로) · 새 이름은 sp-
   구조(JS sec()/foldWrap 이 만든다):
     .card.sp-fold[.open] > h2.sp-fh(제목 · small 날짜 · .sp-cv 화살표) + .sp-sum(「쉽게 말하면」 두 줄) + .sp-body(원래 내용)
════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 접는 카드 ── */
.sp-fold .sp-fh{ cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; margin-bottom:0 }
.sp-fold.open .sp-fh{ margin-bottom:8px }
.sp-fold .sp-fh:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }
.sp-cv{ margin-left:8px; color:var(--tx2); font-size:12px; line-height:1; transition:transform .15s }
.sp-fold.open .sp-cv{ transform:rotate(180deg) }
.sp-sum{ margin-top:5px; font-size:13.5px; line-height:1.55; color:var(--tx2); cursor:pointer;
         display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.sp-fold.open .sp-sum{ display:none }
.sp-fold:not(.open) .sp-body{ display:none }
.sp-fold:not(.open){ padding-top:12px; padding-bottom:12px }
/* 칩으로 이동할 때 상단 메뉴 + 칩 줄에 제목이 가리지 않게 */
.card.sp-sec{ scroll-margin-top:calc(var(--nav-h, 38px) + 52px) }

/* ── 목차 칩 (스크롤해도 상단에 붙어 다닌다) ── */
.sp-jump{ grid-column:1/-1; position:sticky; top:var(--nav-h, 38px); z-index:20;
          display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
          margin:-4px -2px; padding:6px 2px; background:var(--bg) }
.sp-jump::-webkit-scrollbar{ display:none }
.sp-jump button{ flex:0 0 auto; font:inherit; font-size:12.5px; line-height:1.4; padding:4px 11px; border-radius:999px;
                 border:1px solid var(--line); background:var(--card); color:var(--tx2); cursor:pointer;
                 -webkit-tap-highlight-color:transparent; white-space:nowrap }
.sp-jump button:hover{ color:var(--tx) }
.sp-jump button.on{ color:var(--tx); border-color:rgba(47,129,247,.55); background:rgba(47,129,247,.12) }
.sp-jump button.all{ margin-left:auto; color:var(--accent); border-color:rgba(47,129,247,.45) }
/* 🆕 10-19 버튼이 맨 앞일 때(stage 먼저) — 칩을 옆으로 밀어도 왼쪽에 붙어 있는다. 맨 끝(index 옛 배치)엔 안 먹는다 */
.sp-jump button.all:first-child{ margin-left:0; position:sticky; left:0; z-index:1; background:var(--card);
                                 box-shadow:6px 0 6px -2px var(--bg) }

/* ── 종목을 연 뒤엔 검색칸 아래 안내 두 줄을 숨긴다(같은 내용이 맨 아래 🔄 카드에 있다) ── */
body.sp-has .hint, body.sp-has .sp-auto{ display:none }
body.sp-has .srch{ margin-bottom:10px }

/* ── 폰 ── */
@media (max-width:480px){
  .grid{ gap:8px }
  .card h2{ font-size:14.5px }
  .easy{ font-size:13.5px; padding:8px 11px }
  .sp-note{ font-size:11px }
  /* 접혀 있을 땐 제목 옆 날짜(small)를 숨긴다 — 줄이 두 번 꺾여 카드가 길어졌다. 펼치면 다시 보인다 */
  .sp-fold:not(.open) .sp-fh small{ display:none }
  .sp-fold:not(.open) .sp-cv{ margin-left:auto }
  .sp-sum{ font-size:13px }
}