/* Table of contents, detail panel, desktop bottom CTA. Loaded after editorial.css. */
:root { --header-h:88px; --toc-bar-h:0px; --panel-w:440px; }
html { scroll-padding-top:calc(var(--header-h) + var(--toc-bar-h) + 20px); }

/* ---------- TOC: shared list ---------- */
.toc-list { list-style:none; margin:0; padding:0; }
.toc-list li { margin:0; }
.toc-list a { display:block; padding:9px 12px; border-radius:10px; font-size:14px; line-height:1.5; font-weight:600; color:#4b5468; text-decoration:none; border-left:3px solid transparent; }
.toc-list a:hover { background:#f3f5fb; color:var(--ink); }
.toc-list a.is-active { color:var(--blue); background:#eef3ff; border-left-color:var(--blue); }
.toc-list a:focus-visible { outline:3px solid #edc74a; outline-offset:2px; }

/* ---------- TOC: desktop fixed rail (≥1360px only, so it clears the 880px application column; narrower widths use the collapsible bar). Hidden while the wider hero is on screen. ---------- */
.toc-desktop { display:none; }
.toc-mobile { display:block; }
@media (min-width:1360px) {
  .toc-mobile { display:none; }
  .toc-desktop { display:block; position:fixed; left:max(16px, calc((100vw - 800px) / 2 - 232px)); top:calc(var(--header-h) + 24px); width:208px; max-height:calc(100vh - var(--header-h) - 48px); overflow-y:auto; overscroll-behavior:contain; padding:6px 0 6px; z-index:5; scrollbar-width:thin; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; }
  .toc-desktop.is-visible { opacity:1; visibility:visible; }
  .toc-desktop nav { display:block; margin:0; }
  .toc-title { margin:0 12px 8px; font-size:11px; letter-spacing:.14em; font-weight:800; color:#8a93a8; text-transform:uppercase; }
}

/* ---------- TOC: collapsible bar (mobile + tablet), sticky under the header ---------- */
.toc-mobile { position:sticky; top:var(--header-h); z-index:9; background:#fffffff5; backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.toc-toggle { display:flex; align-items:center; gap:10px; width:100%; min-height:46px; padding:8px 20px; background:transparent; border:0; font:inherit; font-size:14px; font-weight:800; color:var(--ink); cursor:pointer; text-align:left; }
.toc-toggle:focus-visible { outline:3px solid #edc74a; outline-offset:-3px; }
.toc-current { flex:1; min-width:0; font-weight:600; color:var(--blue); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toc-current:empty { display:none; }
.toc-chevron { margin-left:auto; width:9px; height:9px; border-right:2px solid #69758c; border-bottom:2px solid #69758c; transform:rotate(45deg); transition:transform .2s; flex:none; }
.toc-toggle[aria-expanded="true"] .toc-chevron { transform:rotate(-135deg); }
.toc-mobile-list { display:block; margin:0; padding:6px 12px 12px; max-height:min(60vh, 480px); overflow-y:auto; overscroll-behavior:contain; border-top:1px solid var(--line); }
.toc-mobile-list .toc-list a { padding:12px 12px; font-size:15px; }
@media (min-width:801px) { .toc-toggle { padding-left:32px; padding-right:32px; } .toc-mobile-list { padding-left:24px; padding-right:24px; } }

/* ---------- Triggers inside the article ---------- */
.chapter-inner>p.panel-actions { margin:18px 0 8px; }
.button.ghost { background:#fff; color:var(--blue); border:1.5px solid #c7d4fb; padding:12px 22px; font-size:15px; gap:8px; }
.button.ghost:hover { background:#eef3ff; }
a[data-panel="case"] { cursor:pointer; }

/* ---------- Detail panel: right overlay drawer (desktop/tablet) ---------- */
.panel-backdrop { position:fixed; inset:0; z-index:40; background:#12162b66; }
.detail-panel { position:fixed; top:0; right:0; bottom:0; z-index:41; width:min(var(--panel-w), 100vw); background:#fff; box-shadow:-8px 0 24px #1a204212; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .28s ease; }
.detail-panel.is-open { transform:translateX(0); }
.panel-head { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); background:#fff; flex:none; }
.panel-title { flex:1; min-width:0; margin:0; font-size:17px; line-height:1.4; letter-spacing:-.02em; font-weight:800; }
.panel-close { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 14px; border:1px solid var(--line); border-radius:100px; background:#fff; font:inherit; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; }
.panel-close:hover { background:#f3f5fb; }
.panel-close:focus-visible, .panel-body:focus-visible { outline:3px solid #edc74a; outline-offset:2px; }
.panel-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:20px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.panel-section { display:none; }
.detail-panel[data-mode="case"] .panel-section[data-mode="case"], .detail-panel[data-mode="week"] .panel-section[data-mode="week"] { display:block; }
/* Week mode: wider drawer (1.8× the case drawer) on desktop; the cloned week table reuses the article table styles. */
.detail-panel[data-mode="week"] { --panel-w:792px; }
.panel-week.chapter, .panel-week.week { padding:0; border:0; margin:0; background:transparent; box-shadow:none; }
.panel-week .tablewrap { overflow:auto; }
.panel-week .tablewrap { margin:0 0 18px; }
.panel-week .tablewrap table { table-layout:auto; }
.panel-week .tablewrap td, .panel-week .tablewrap th { padding:14px 12px; }
@media (min-width:801px) {
  .panel-week .tablewrap th:first-child, .panel-week .tablewrap td:first-child { width:132px; }
  .panel-week .tablewrap th:nth-child(2), .panel-week .tablewrap td:nth-child(2) { width:160px; }
  .panel-week .tablewrap th:last-child, .panel-week .tablewrap td:last-child { white-space:nowrap; }
}
@media (max-width:800px) {
  .panel-week .tablewrap { border:0; }
  .panel-week .tablewrap table { min-width:0; width:100%; }
  .panel-week .tablewrap tr { display:block; padding:14px 0; border-bottom:1px solid var(--line); }
  .panel-week .tablewrap td { display:block; width:auto; border:0; padding:3px 0; }
  .panel-week .tablewrap td:first-child { color:var(--blue); font-weight:800; }
  .panel-week .tablewrap thead { display:none; }
}
.panel-week>p { margin:12px 0; font-size:15px; color:var(--muted); }
.panel-week>p:first-child { margin-top:0; }
.panel-week-nav { display:flex; justify-content:space-between; gap:12px; margin:8px 0 0; padding-top:16px; border-top:1px solid var(--line); }
.panel-week-nav .button.ghost { padding:10px 16px; font-size:14px; }
.panel-week-nav .button.ghost[disabled] { opacity:.4; cursor:default; }
/* With the panel active, the week rows read as "open in panel" rather than expand/collapse. */
body.week-panel .chapter details.week>summary { position:relative; padding-right:132px; }
body.week-panel .chapter details.week>summary::after { content:'자세히 보기 →'; position:absolute; right:16px; top:50%; transform:translateY(-50%); padding:5px 10px; border-radius:6px; font-size:12px; line-height:1.5; font-weight:650; color:var(--blue); background:#eef3ff; }
body.week-panel .chapter details.week>summary small { margin-right:8px; }
@media (max-width:800px) { body.week-panel .chapter details.week>summary { padding-right:110px; } body.week-panel .chapter details.week>summary::after { top:22px; transform:none; right:14px; } body.week-panel .chapter details.week>summary small { float:none; margin:6px 0 0; display:block; } }
body.week-panel .chapter details.week[open]>summary::after { content:'자세히 보기 →'; background:#eef3ff; }
body.week-panel .chapter details.week[open]>summary { background:#fff; border-bottom:0; }
body.week-panel .chapter details.week>summary~* { display:none; }
.panel-subtitle { margin:0 0 6px; font-size:17px; font-weight:750; letter-spacing:-.02em; }
.panel-note { margin:0 0 16px; font-size:14px; color:var(--muted); line-height:1.7; }
.panel-actions { margin:14px 0 22px; }
.panel-figure { margin:0; }
.panel-figure img { width:100%; height:auto; border-radius:14px; border:1px solid var(--line); }
.tiktok-frame { min-height:120px; border:1px solid var(--line); border-radius:14px; background:#f8f9fc; overflow:hidden; }
.tiktok-frame blockquote { margin:0 !important; }
.tiktok-frame iframe { display:block; width:100% !important; margin:0 auto; }
.tiktok-loading { margin:0; padding:24px 16px; text-align:center; font-size:14px; color:var(--muted); }
.tiktok-fallback { margin:12px 0 0; padding:14px 16px; background:#fff7e6; border:1px solid #f1dfae; border-radius:12px; font-size:14px; color:#6b5312; }

/* ---------- Detail panel: full-screen sheet (mobile) ---------- */
@media (max-width:800px) {
  .detail-panel { width:100vw; box-shadow:none; }
  .panel-head { padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top, 0px)); position:sticky; top:0; }
  .panel-title { font-size:16px; }
  .panel-body { padding:16px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
}
body.panel-locked { position:fixed; left:0; right:0; overflow:hidden; width:100%; }

/* ---------- Desktop bottom CTA (mobile keeps the existing .mobile-cta) ---------- */
.desktop-cta { display:none; }
@media (min-width:801px) {
  .desktop-cta { display:flex; align-items:center; justify-content:center; gap:22px; position:fixed; left:0; right:0; bottom:0; z-index:12; padding:12px 24px; background:#fffffff2; border-top:1px solid var(--line); backdrop-filter:blur(12px); box-shadow:0 -8px 30px #1a204214; }
  .desktop-cta p { margin:0; font-size:14px; color:var(--muted); }
  .desktop-cta[hidden] { display:none; }
  footer { padding-bottom:110px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  .detail-panel, .toc-chevron, .toc-desktop { transition:none; }
}

/* ---------- In-body application CTAs removed (2026-09-22): the header shortcut and the fixed bottom CTA remain. Markup is kept so the copy stays in the generated HTML. ---------- */
div.cta { display:none; }