/* ════════════════════════════════════════════════════════════════
   소재 데이터베이스 (Detail DB) — 전용 스타일
   · 모든 토큰(--brand/--sage 등)은 index.html :root에서 정의됨 → 참조만(재정의 금지).
   · 클래스 프리픽스 `asd-` 로 기존 .enc-* 와 충돌 회피.
   · 세이지 절제(화이트리스트): 현재 선택 바/배경·활성 조상 텍스트·활성 탭 언더라인·
     weight=high 칩·NEW 칩·포커스 링. 나머지 무채색. best/bad는 --pos/--neg(라인+아이콘+텍스트만).
   ════════════════════════════════════════════════════════════════ */

/* 뷰 전환 — view-cost/view-personas 패턴 모방.
   .container.view-assetdb 활성 시 #assetdbView만 표시, 나머지 섹션·배너·빈상태 숨김. */
.container.view-assetdb > .section:not(#assetdbView),
.container.view-assetdb > #bannerSlot,
.container.view-assetdb > #emptySlot { display: none; }

#assetdbView { padding: 0; }

/* ── 셸 ───────────────────────────────────────────────────────── */
.asd-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── 페이지 헤더 (56px) ───────────────────────────────────────── */
.asd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 4px 14px;
}
.asd-head-tt {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.asd-head-sub {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

/* 📢 업데이트 안내 (What's New) */
.asd-whatsnew-btn {
  margin-left: auto; flex-shrink: 0; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); padding: 6px 13px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer;
}
.asd-whatsnew-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.asd-wn-badge { background: var(--neg); color: #fff; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 800; padding: 1px 6px; min-width: 16px; text-align: center; }
.asd-wn-overlay { position: fixed; inset: 0; background: rgba(20,24,28,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.asd-wn-card { background: var(--surface); border-radius: 14px; max-width: 520px; width: 100%; max-height: 80vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.asd-wn-head { position: sticky; top: 0; background: var(--surface); display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; border-bottom: 1px solid var(--line); }
.asd-wn-title { font-size: 16px; font-weight: 800; color: var(--text); }
.asd-wn-close { background: none; border: none; font-size: 18px; color: var(--muted); cursor: pointer; line-height: 1; padding: 2px 6px; }
.asd-wn-sub { padding: 10px 18px 2px; font-size: 12.5px; color: var(--muted); }
.asd-wn-list { padding: 6px 18px 18px; }
.asd-wn-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.asd-wn-item:last-child { border-bottom: none; }
.asd-wn-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.asd-wn-tag { font-size: 10.5px; font-weight: 700; border-radius: var(--radius-pill); padding: 2px 8px; }
.asd-wn-tag--new { background: var(--sage-tint); color: var(--brand-ink); }
.asd-wn-tag--ai { background: #efe7ff; color: #6b3fd0; }
.asd-wn-tag--fix { background: #eef2f6; color: #4a5159; }
.asd-wn-date { font-size: 11px; color: var(--muted); }
.asd-wn-item-tt { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.asd-wn-item-desc { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.asd-wn-goto { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; background: var(--sage-tint); border: 1px solid var(--sage); color: var(--brand-ink); border-radius: var(--radius-pill); padding: 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.asd-wn-goto:hover { background: var(--sage-tint-2); }
/* 여기 보기 — 대상 하이라이트 + 경로 툴팁(코치마크) */
.asd-wn-spot { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 8px; animation: asdWnPulse 1s ease-in-out 2; }
@keyframes asdWnPulse { 0%,100% { box-shadow: 0 0 0 5px rgba(62,77,65,.18); } 50% { box-shadow: 0 0 0 10px rgba(62,77,65,.04); } }
.asd-wn-coach { position: absolute; z-index: 10001; max-width: 300px; background: var(--brand); color: #fff; border-radius: 10px; padding: 11px 13px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.asd-wn-coach-tx { font-size: 12.5px; line-height: 1.55; margin-bottom: 9px; }
.asd-wn-coach-x { background: rgba(255,255,255,.22); color: #fff; border: none; border-radius: 6px; padding: 4px 13px; font-size: 12px; font-weight: 700; cursor: pointer; }
.asd-wn-coach-x:hover { background: rgba(255,255,255,.32); }

/* ── 탭 토글 (언더라인형 2탭) ─────────────────────────────────── */
.asd-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.asd-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 14px 11px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 0;
  transition: color .14s ease;
}
.asd-tab::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 2px;
}
.asd-tab:hover { color: var(--text-2); }
.asd-tab.is-active { color: var(--text); }
.asd-tab.is-active::after { background: var(--brand); }   /* 활성 탭 언더라인 = 세이지(brand) */
.asd-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ── 탭 패널 ──────────────────────────────────────────────────── */
.asd-panel { display: none; }
.asd-panel.is-active { display: block; }

/* ── 탭B placeholder (다음 단계 진입점) ───────────────────────── */
.asd-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 280px;
  text-align: center;
  color: var(--muted);
}
.asd-placeholder-tt { font-size: 14px; font-weight: 600; color: var(--text-2); }
.asd-placeholder-sub { font-size: 13px; font-weight: 400; color: var(--muted); }

/* ── 탭 패널(hidden 속성 기반 토글) ─────────────────────────────
   표시는 기본, 숨김은 JS가 hidden 속성으로 처리(.asd-panel과 별개 규약). */
.asd-tabpanel { display: block; }
.asd-tabpanel[hidden] { display: none; }

/* ── 빈 탭 placeholder(안내 문구) ────────────────────────────── */
.asd-tab-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 200px;
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

/* ── 후킹·홀딩 보관함(P1) — 안내문 + 레퍼런스 패널 재사용 ────── */
.asd-stash { padding: 4px 2px; }
.asd-stash-desc {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}
.asd-stash .asd-ref-panel { margin-top: 0; }

/* ── P1 보관함/레퍼런스 추가 기능(복사·검색·정렬·칩·보내기·배지·피커) ── */
/* 링크 + 복사 버튼 */
.asd-ref-item-urlrow { display: flex; align-items: center; gap: 8px; }
.asd-ref-item-urlrow .asd-ref-item-url {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asd-ref-item-copy, .asd-ref-chip {
  flex: 0 0 auto; padding: 3px 10px; font-size: 12px; font-weight: 600;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); cursor: pointer;
}
.asd-ref-item-copy:hover, .asd-ref-chip:hover { border-color: var(--brand); color: var(--brand-ink); }

/* 검색 + 정렬 툴바 */
.asd-ref-tools { display: flex; gap: 8px; }
.asd-ref-search, .asd-ref-sort {
  padding: 7px 10px; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.asd-ref-search { flex: 1 1 auto; min-width: 0; }
.asd-ref-sort { flex: 0 0 auto; cursor: pointer; }

/* 입력폼 빠른 선택 칩(채널 등) */
.asd-ref-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* 프레임 분석 — 줄바꿈 보존(5비트 한 줄씩) */
.asd-ref-frame-tx { white-space: pre-wrap; }

/* 📝 기록 가이드(부록 "누가 봐도 이해되게") — 접이식 */
.asd-rec-guide {
  margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-2);
}
.asd-rec-guide-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 14px; background: none; border: 0; cursor: pointer; text-align: left;
}
.asd-rec-guide-tt { font-size: 13px; font-weight: 700; color: var(--text); }
.asd-rec-guide-caret { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.asd-rec-guide-body { display: none; padding: 0 14px 14px; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.asd-rec-guide.is-open .asd-rec-guide-body { display: block; }
.asd-rec-guide-sec { margin-top: 8px; }
.asd-rec-guide-sec ol, .asd-rec-guide-sec ul { margin: 4px 0 0; padding-left: 18px; }
.asd-rec-guide-sec li { margin: 2px 0; }

/* 🧠 인사이트 기록 카드(부록) — 폼 그룹 + 표시 강조 */
.asd-ref-form-pack {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px; padding: 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.asd-ref-pack-tt { font-size: 13px; font-weight: 700; color: var(--text); }
.asd-ref-pack-lead .asd-ref-form-input { border-color: var(--brand); }
.asd-ref-item-field.asd-ref-item-lead {
  padding: 8px 11px;
  background: var(--sage-tint); border: 1px solid var(--sage-tint-2); border-radius: var(--radius-sm);
}
.asd-ref-item-lead .asd-ref-item-field-lab { color: var(--brand-ink); }

/* 📝 임시저장 복구 알림(레퍼런스·기획서 폼 상단) */
.asd-draft-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 12px; padding: 8px 12px;
  font-size: 12.5px; color: var(--brand-ink);
  background: var(--sage-tint); border: 1px solid var(--sage-tint-2); border-radius: var(--radius-sm);
}
.asd-draft-notice-btn {
  flex: 0 0 auto; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
}
.asd-draft-notice-btn:hover { border-color: var(--neg); color: var(--neg); }

/* 보관함 항목 → 페르소나로 보내기 */
.asd-ref-item-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.asd-ref-item-send {
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--brand-ink); background: var(--sage-tint);
  border: 1px solid var(--sage-tint-2); border-radius: var(--radius-pill);
}
.asd-ref-item-send:hover { background: var(--sage-tint-2); }
.asd-ref-item-send:disabled { opacity: .55; cursor: default; }

/* 탭 개수 배지 */
.asd-tab-count {
  display: inline-block; margin-left: 6px; padding: 0 6px; min-width: 16px;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  color: #fff; background: var(--sage); border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
.asd-tab-count[hidden] { display: none; }

/* 페르소나 선택 모달 */
.asd-picker { width: min(520px, 92vw); }
.asd-picker-search {
  width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 4px 0 10px;
  font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.asd-picker-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.asd-picker-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 8px 10px; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.asd-picker-row:hover { border-color: var(--brand); background: var(--sage-tint); }
.asd-picker-row-nm { font-size: 13px; font-weight: 700; color: var(--text); }
.asd-picker-row-meta { font-size: 11.5px; color: var(--muted); }
.asd-picker-empty { font-size: 13px; color: var(--muted); padding: 10px 2px; }
/* 연결 모달 구역 헤더(👤 페르소나 / 📌 후킹·홀딩 보관함) */
.asd-picker-group {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--muted); padding: 8px 2px 2px;
  border-top: 1px solid var(--line); margin-top: 4px;
}
.asd-picker-group:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }
.asd-picker-group--stash { color: var(--brand-ink); }

/* ── 기획서 ↔ 레퍼런스 연결(P2) ──────────────────────────────── */
.asd-plan-reflink {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 0 14px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.asd-plan-reflink-desc { margin: -2px 0 2px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.asd-plan-reflink-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.asd-plan-reflink-add {
  flex: 0 0 auto; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--brand-ink); background: var(--sage-tint);
  border: 1px solid var(--sage-tint-2); border-radius: var(--radius-pill);
}
.asd-plan-reflink-add:hover { background: var(--sage-tint-2); }
.asd-plan-reflink-add:disabled { opacity: .55; cursor: default; }
.asd-plan-reflink-list { display: flex; flex-direction: column; gap: 8px; }
.asd-plan-reflink-empty { font-size: 13px; color: var(--muted); padding: 4px 2px; }
.asd-plan-reflink-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.asd-plan-reflink-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.asd-plan-reflink-url {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--brand);
}
.asd-plan-reflink-miss { font-size: 12px; color: var(--neg); }
.asd-plan-reflink-remove {
  flex: 0 0 auto; margin-left: auto; padding: 2px 9px; font-size: 11.5px; cursor: pointer;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
}
.asd-plan-reflink-remove:hover { border-color: var(--neg); color: var(--neg); }
/* 🧠 연결 레퍼런스 인사이트 보기 토글 */
.asd-plan-reflink-insbtn {
  align-self: flex-start; margin-top: 4px; padding: 4px 11px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--brand-ink); background: var(--sage-tint);
  border: 1px solid var(--sage-tint-2); border-radius: var(--radius-pill);
}
.asd-plan-reflink-insbtn:hover { background: var(--sage-tint-2); }
.asd-plan-reflink-ins { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.asd-plan-reflink-ins[hidden] { display: none; }

/* 메시지 칸 아래 "연결 레퍼런스 근거" 힌트 */
.asd-plan-refhint {
  margin: -2px 0 8px; padding: 7px 10px;
  background: var(--sage-tint); border: 1px solid var(--sage-tint-2);
  border-radius: var(--radius-sm); font-size: 12px;
}
.asd-plan-refhint-lab { font-weight: 700; color: var(--brand-ink); margin-bottom: 3px; }
/* 연결 레퍼런스별 블록 — 여러 개면 점선으로 구분 */
.asd-plan-refhint-ref { margin-top: 2px; }
.asd-plan-refhint-ref + .asd-plan-refhint-ref {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--sage-tint-2);
}
.asd-plan-refhint-ch { display: inline-block; font-weight: 600; color: var(--muted); margin-bottom: 1px; }
/* 비트별 한 줄: [라벨+텍스트] 좌 / [캡처] 우 — 1:1 짝 */
.asd-plan-refhint-beat { display: flex; gap: 8px; align-items: flex-start; margin-top: 3px; }
.asd-plan-refhint-col { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.asd-plan-refhint-bl { font-weight: 700; color: var(--brand-ink); }
.asd-plan-refhint-tx { color: var(--text-2); white-space: pre-wrap; }
.asd-plan-refhint-thumb {
  flex: 0 0 auto; width: 76px; height: auto;
  border-radius: 5px; border: 1px solid var(--line); cursor: zoom-in;
}

/* 페르소나 요약 바(좁은 화면 sticky) — 넓은 화면(우측 메타 컬럼 sticky)에선 숨김 */
.asd-plan-pbar {
  position: sticky; top: 0; z-index: 5;
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--sage-tint); border: 1px solid var(--sage-tint-2);
  border-radius: var(--radius-md);
}
.asd-plan-pbar-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.asd-plan-pbar-sum { font-size: 13px; font-weight: 700; color: var(--brand-ink); line-height: 1.4; }
.asd-plan-pbar-caret { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.asd-plan-pbar-body { display: none; margin-top: 8px; flex-direction: column; gap: 5px; }
.asd-plan-pbar.is-open .asd-plan-pbar-body { display: flex; }
.asd-plan-pbar-block { font-size: 12px; line-height: 1.45; }
.asd-plan-pbar-lab { font-weight: 700; color: var(--text-2); margin-right: 6px; }
.asd-plan-pbar-tx { color: var(--text-2); }
@media (min-width: 1440px) { .asd-plan-pbar { display: none; } }

/* ════════════════════════════════════════════════════════════════
   3-pane (탭A)  — ≥1440: 280 / 1fr / 320
   ════════════════════════════════════════════════════════════════ */
.asd-3pane {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  gap: 0;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: clip;   /* hidden이면 자식 sticky가 깨짐 — clip은 모서리 클립 유지하며 sticky 허용 */
}

/* ── 좌: 계층 트리 ────────────────────────────────────────────── */
.asd-tree {
  border-right: 1px solid var(--line);
  padding: 8px 0;
  align-self: stretch;
}
.asd-tree-scroll {
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  padding: 0 4px;
}
.asd-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 수직 가이드선 (children 영역) */
.asd-tree-children {
  position: relative;
}
.asd-tree-children::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}
.asd-node {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  color: var(--text-2);
  transition: background .12s ease, color .12s ease;
}
.asd-node:hover { background: var(--surface-2); }
.asd-node:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 레벨별 행 높이 / 들여쓰기 / 폰트 */
.asd-node-major {
  min-height: 40px;
  padding: 4px 8px 4px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.asd-node-mid {
  min-height: 36px;
  padding: 4px 8px 4px 28px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
}
.asd-node-sub {
  min-height: 36px;
  padding: 4px 8px 4px 44px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
}

/* caret (대·중만) — 기존 대시보드 .ctb-caret 톤 통일: CSS 보더 셰브론 */
.asd-caret {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: 0 5px 0 2px;
  pointer-events: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  /* 접힘 = 오른쪽(▸) */
  transform: translateX(-2px) rotate(-45deg);
  transition: transform .16s ease, border-color .16s ease;
}
/* 펼침 = 아래(▾) + 브랜드 색 (aria-expanded는 트리 버튼 .asd-node에 있음) */
.asd-node[aria-expanded="true"] .asd-caret {
  transform: translateY(-2px) rotate(45deg);
  border-color: var(--brand);
}
.asd-node-sub .asd-caret { visibility: hidden; }

.asd-node-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 카운트 뱃지 (대·중) */
.asd-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-left: 4px;
}

/* NEW 칩 (소분류) */
.asd-new {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brand-ink);
  background: var(--sage-tint-2);
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 4px;
}

/* 활성 조상(대·중) — brand-ink 600 승격 */
.asd-node.is-ancestor {
  color: var(--brand-ink);
  font-weight: 600;
}
/* 현재 선택 소분류 — 배경 sage-tint + 좌측 3px brand 바 + brand-ink 600 */
.asd-node-sub.is-selected {
  background: var(--sage-tint);
  color: var(--brand-ink);
  font-weight: 600;
}
.asd-node-sub.is-selected::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--brand);
}

/* ── 가운데: 본문 ─────────────────────────────────────────────── */
.asd-main {
  padding: 28px 32px 48px;
  min-width: 0;
}
.asd-main-inner { max-width: 720px; }

.asd-crumb {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 8px;
}
.asd-crumb-sep { padding: 0 6px; color: var(--line-strong); }
.asd-h1 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.asd-lead {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-2);
}

/* 개요(대/중 클릭 시) 카드 그리드 */
.asd-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.asd-ov-card {
  appearance: none;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.asd-ov-card:hover { background: var(--surface-2); border-color: var(--line-strong); }
.asd-ov-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.asd-ov-card-tt {
  font-size: 14px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.asd-ov-card-meta { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 4px; }
/* 개요 카드 부제목 — 제목 아래 보조 한 줄(한 줄 말줄임) */
.asd-ov-card-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 체크포인트 목록 — 카드 중첩 금지, 디바이더로 구분 */
.asd-cps { margin-top: 24px; }
.asd-cp {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.asd-cp:first-child { border-top: 0; padding-top: 4px; }

.asd-cp-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.asd-cp-point {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}

/* weight 칩 */
.asd-wt {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.asd-wt-high { background: var(--sage-tint-2); color: var(--brand-ink); }
.asd-wt-mid  { background: var(--surface-2); color: var(--text-2); }
.asd-wt-low  {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  padding: 1px 7px;
}

/* check 라인 */
.asd-cp-check {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-2);
}
.asd-check-lab {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 6px;
}

/* best / bad — 좌측 라인 + 아이콘 + 텍스트 라벨 (면 채우기 금지) */
.asd-case {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
}
.asd-case-best { border-left-color: var(--pos); }
.asd-case-bad  { border-left-color: var(--neg); }
.asd-case-lab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 3px;
}
.asd-case-best .asd-case-lab { color: var(--pos); }
.asd-case-bad  .asd-case-lab { color: var(--neg); }
.asd-case-ico {
  display: inline-flex;
  width: 13px; height: 13px;
  align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; line-height: 1;
}
.asd-case-body {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-2);
}

/* 예시 이미지(ref) — 2열 그리드 */
.asd-refs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.asd-ref {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.asd-ref-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--surface-2);
}
.asd-ref-cap { padding: 8px 10px 10px; }
.asd-ref-brand { font-size: 12px; font-weight: 600; color: var(--text); }
.asd-ref-note {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* img 없을 때 캡션만 — 카드 패딩 보정 */
.asd-ref.is-noimg .asd-ref-cap { padding-top: 12px; }

/* ── 우: 메타 ─────────────────────────────────────────────────── */
.asd-meta {
  border-left: 1px solid var(--line);
  padding: 16px 18px;
  align-self: start;            /* 콘텐츠 높이로 — sticky 가능하게 */
  font-size: 13px;
  position: sticky;            /* 스크롤해도 페르소나 정보가 따라옴(우측 컬럼일 때) */
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
/* 메타 토글 헤더/본문 — 클릭하면 페르소나 정보 펼침(기본 접힘) */
.asd-meta-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.asd-meta-head-tt {
  font-size: 13px; font-weight: 700; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asd-meta-head-caret { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.asd-meta-body { margin-top: 12px; }
.asd-meta-body[hidden] { display: none; }
/* 🔗 기획서 편집 중 연결 레퍼런스(영상) — 메타 패널 하단 */
.asd-meta-planrefs-box:not(:empty) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.asd-meta-planrefs { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.asd-meta-planref {
  display: block; font-size: 12px; line-height: 1.4;
  color: var(--brand); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 8px; background: var(--sage-tint);
  border: 1px solid var(--sage-tint-2); border-radius: var(--radius-sm);
}
.asd-meta-planref:hover { text-decoration: underline; }
.asd-meta-planref--nourl { color: var(--muted); background: var(--surface-2); border-color: var(--line); cursor: default; }
/* 연결 레퍼런스 카드 — 링크 + 작성 내용(5비트/인사이트)을 한 묶음으로. 가독성 위해 라벨=윗줄, 본문=아랫줄 */
.asd-meta-planref-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 11px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.asd-meta-planref-card .asd-meta-planref {
  padding: 0 0 3px; background: none; border: 0; border-radius: 0;
  font-weight: 700; font-size: 12.5px;
}
.asd-meta-planref-card .asd-meta-planref--nourl { background: none; }
/* 비트(①훅~) · 인사이트 한 줄 — 라벨을 본문 위 작은 헤더로 분리 */
.asd-meta-planref-bit { display: flex; flex-direction: column; gap: 2px; }
.asd-meta-planref-bit-lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand-ink);
}
.asd-meta-planref-bit-tx {
  font-size: 12px; line-height: 1.55; color: var(--text);
  white-space: pre-wrap;        /* 입력한 줄바꿈 그대로(메인 카드와 동일) */
  overflow-wrap: anywhere;      /* 긴 링크·단어가 좁은 패널을 넘치지 않게 */
}
/* 토글 '바'(A) — 라벨 왼쪽 / 캐럿 오른쪽, 기본 접힘. ▶ 링크는 항상 보임 */
.asd-meta-planref-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; appearance: none; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--brand-ink); cursor: pointer; padding: 6px 9px;
}
.asd-meta-planref-toggle:hover,
.asd-meta-planref-toggle.is-open { background: var(--sage-tint); border-color: var(--sage-tint-2); }
.asd-meta-planref-toggle-lab { min-width: 0; overflow-wrap: anywhere; }
.asd-meta-planref-toggle-caret { flex: 0 0 auto; font-size: 10px; color: var(--muted); }
/* 펼친 내용(B) — 들여쓰기 + 좌측 라인으로 '이 토글의 내용'임을 표시 */
.asd-meta-planref-bits {
  display: flex; flex-direction: column; gap: 8px;
  margin: -1px 0 1px 4px; padding: 4px 0 4px 10px;
  border-left: 2px solid var(--sage-tint-2);
}
.asd-meta-planref-bits[hidden] { display: none; }   /* display:flex가 hidden을 덮어쓰지 않게 */
.asd-meta-block { padding: 14px 0; border-top: 1px solid var(--line); }
.asd-meta-block:first-child { border-top: 0; padding-top: 0; }
.asd-meta-lab {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}
.asd-meta-val { font-size: 13px; font-weight: 600; color: var(--text); }

/* 위치 브레드크럼 */
.asd-meta-loc { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.5; }
.asd-meta-loc .asd-crumb-sep { color: var(--line-strong); }

/* weight 분포 미니 막대 */
.asd-wbar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-2);
  margin: 8px 0 6px;
}
.asd-wbar-high { background: var(--brand); }
.asd-wbar-mid  { background: var(--sage); }
.asd-wbar-low  { background: var(--line-strong); }
.asd-wlegend {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.asd-wlegend b { font-weight: 600; color: var(--text); }

/* structural rules */
.asd-srule { padding: 8px 0; }
.asd-srule + .asd-srule { border-top: 1px solid var(--line); }
.asd-srule-id {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 1px 7px;
  border-radius: 4px;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.asd-srule-rule {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-2);
}

/* ════════════════════════════════════════════════════════════════
   모바일 경로(트리→드롭다운) — 기본 숨김, 좁은 폭에서 노출
   ════════════════════════════════════════════════════════════════ */
.asd-mobnav { display: none; }
.asd-mobnav-back {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  padding: 8px 12px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.asd-mobnav-crumb {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 2px;
}
/* 모바일 단계 드롭다운 — 터치 타깃 ≥44px. 네이티브 화살표 제거 후 가는 선 ∨ 커스텀 */
.asd-mobnav-sel {
  min-height: 44px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  padding: 0 36px 0 14px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2379818B' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
.asd-mobnav-sel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════
   반응형
   ════════════════════════════════════════════════════════════════ */

/* 1024~1439: 우 메타 → 본문 하단 스택 (좌 트리 + 본문 2-pane) */
@media (max-width: 1439px) {
  .asd-3pane { grid-template-columns: 280px minmax(0, 1fr); }
  .asd-meta {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 20px 32px;
    position: static;          /* 스택 레이아웃에선 sticky 해제(본문 아래로 흐름) */
    max-height: none;
    overflow: visible;
  }
}

/* ≤1023: 좌 트리도 접고(데스크톱 3-pane 해제는 아래 768에서) — 중간 구간은 2-pane 유지 */
@media (max-width: 1023px) {
  .asd-tree-scroll { max-height: calc(100vh - 200px); }
}

/* ≤768: 좌 트리 → 상단 경로 드롭다운 + 단계 드릴다운. 우 메타 본문 하단 스택. */
@media (max-width: 768px) {
  .asd-3pane {
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .asd-tree { display: none; }      /* 데스크톱 트리 숨김 */
  .asd-mobnav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .asd-main {
    padding: 4px 0 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 20px 18px 28px;
  }
  .asd-meta {
    grid-column: auto;
    border-left: 0;
    border-top: 0;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 18px;
  }
  .asd-refs { gap: 12px; }
}

/* ≤375: 예시 이미지 1열 */
@media (max-width: 420px) {
  .asd-refs { grid-template-columns: 1fr; }
  .asd-overview { grid-template-columns: 1fr; }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
  .asd-tab, .asd-node, .asd-caret, .asd-ov-card { transition: none; }
  .asd-own-prod, .asd-own-tnode, .asd-own-card, .asd-own-sortbtn { transition: none; }
  .asd-jumplink, .asd-jumplink-hint { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   탭B — 자사 상세 점검 (own)
   · 공용 셸(.asd-3pane/.asd-tree/.asd-main/.asd-meta)을 재사용 → 반응형 상속.
   · 세이지 화이트리스트: 선택 제품/분류 바·배경, 게이지/막대 채움, 활성 강조, 포커스 링.
   · taxonomy color 미사용.
   ════════════════════════════════════════════════════════════════ */

/* ── 좌: 제품 선택 + 트리 ─────────────────────────────────────── */
.asd-own-mobsel { display: none; }            /* 좁은 폭에서만 노출 */

.asd-own-products {
  display: flex;
  flex-direction: column;
  padding: 0 4px;
}
.asd-own-prod {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 10px 4px 12px;
  color: var(--text-2);
  transition: background .12s ease, color .12s ease;
}
.asd-own-prod:hover { background: var(--surface-2); }
.asd-own-prod:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.asd-own-prod-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asd-own-prod-cnt {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* 선택 제품: 좌측 3px brand 바 + sage-tint 배경 + brand-ink */
.asd-own-prod.is-active {
  background: var(--sage-tint);
}
.asd-own-prod.is-active .asd-own-prod-name { color: var(--brand-ink); }
.asd-own-prod.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--brand);
}

.asd-own-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 8px;
}

/* 대>중 트리 */
.asd-own-tree { list-style: none; margin: 0; padding: 0 4px; }
.asd-own-tree ul { list-style: none; margin: 0; padding: 0; }
.asd-own-tree-children { position: relative; }
.asd-own-tnode {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text-2);
  transition: background .12s ease, color .12s ease;
}
.asd-own-tnode:hover { background: var(--surface-2); }
.asd-own-tnode:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.asd-own-tnode-all,
.asd-own-tnode-major {
  min-height: 36px;
  padding: 4px 8px 4px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.asd-own-tnode-mid {
  min-height: 32px;
  padding: 3px 8px 3px 28px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
}
.asd-own-tnode-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asd-own-tnode-cnt {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* 보유 0 분류 — muted + 점선 카운트 */
.asd-own-tnode.is-empty { color: var(--muted); }
.asd-own-tnode.is-empty .asd-own-tnode-label { color: var(--muted); }
.asd-own-tnode.is-empty .asd-own-tnode-cnt {
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  padding: 0 5px;
  color: var(--muted);
}
/* 선택 분류 — sage-tint 배경 + 좌측 3px brand 바 + brand-ink */
.asd-own-tnode.is-active {
  background: var(--sage-tint);
  color: var(--brand-ink);
}
.asd-own-tnode.is-active .asd-own-tnode-label { color: var(--brand-ink); font-weight: 600; }
.asd-own-tnode.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--brand);
}

/* ── 가운데: 본문 ─────────────────────────────────────────────── */
.asd-own-main-inner { max-width: 920px; }
.asd-own-head { margin-bottom: 16px; }
.asd-own-headmeta {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* 정렬 토글 + 필터 칩 */
.asd-own-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.asd-own-sort {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.asd-own-sortbtn {
  appearance: none;
  border: 0;
  background: var(--surface);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 7px 14px;
  min-height: 36px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.asd-own-sortbtn + .asd-own-sortbtn { border-left: 1px solid var(--line); }
.asd-own-sortbtn:hover { color: var(--text-2); background: var(--surface-2); }
.asd-own-sortbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.asd-own-sortbtn.is-active { background: var(--sage-tint); color: var(--brand-ink); }

.asd-own-filterchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 5px 6px 5px 10px;
}
.asd-own-filterchip-lab {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 2px;
}
.asd-own-filterclear {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  width: 20px; height: 20px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.asd-own-filterclear:hover { color: var(--text); background: var(--surface); }
.asd-own-filterclear:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.asd-own-empty {
  padding: 40px 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* 분류별 그룹 — 스티키 미니 헤더 */
.asd-own-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 0;
  margin-top: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.asd-own-group-head:first-child { margin-top: 0; }

/* 아이템 그리드 — 데스크톱 3열 */
.asd-own-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 8px;
}
.asd-own-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .12s ease;
}
.asd-own-card:hover { border-color: var(--line-strong); }
.asd-own-thumb {
  aspect-ratio: 9 / 16;
  background: var(--surface-2);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.asd-own-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.asd-own-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.asd-own-card-el {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.asd-own-card-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asd-own-card-chip {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 소분류 베스트 프랙티스 비교 (우리 카드 ↔ 베스트) ──────────────
   우리 요소(위)와 시각 구분: 상단 디바이더 + 세이지 라벨. 같은 톤 유지. */
.asd-own-best {
  margin-top: 12px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.asd-own-best-lab { display: flex; align-items: center; }
.asd-own-best-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--brand-ink);
  background: var(--sage-tint);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
}
.asd-own-best-point {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-2);
}
/* 카드 안에서 case/refs 여백은 살짝 축소(중첩 과하지 않게) */
.asd-own-best .asd-case { margin-top: 2px; }
.asd-own-best .asd-refs { margin-top: 6px; gap: 10px; }

/* ── 미보유 소분류 — 베스트 참고(본문 하단 접기) ───────────────────── */
.asd-own-miss-sec {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.asd-own-miss-sec-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  padding: 4px 0;
}
.asd-own-miss-sec-sum::-webkit-details-marker { display: none; }
.asd-own-miss-sec-sum::before {
  content: "▸";
  color: var(--muted);
  font-size: 11px;
  transition: transform .12s ease;
}
.asd-own-miss-sec[open] .asd-own-miss-sec-sum::before { transform: rotate(90deg); }
.asd-own-miss-sec-sum:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.asd-own-miss-sec-tt {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.asd-own-miss-sec-cnt {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.asd-own-miss-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.asd-own-misscard {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.asd-own-misscard-hd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.asd-own-misscard-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* ── 탭B → 탭A 베스트 점프 링크(미보유 카드 이름 / 보유 카드 분류 칩) ──
   세이지 화이트리스트만 사용. hover/포커스 시 색·밑줄·힌트로 어포던스. */
.asd-jumplink {
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.asd-jumplink:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
/* 미보유 카드 이름: 이름 + "베스트 보기 →" 힌트 한 줄 */
.asd-own-misscard-name.asd-jumplink {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.asd-own-misscard-name.asd-jumplink:hover .asd-jumplink-tx,
.asd-own-misscard-name.asd-jumplink:focus-visible .asd-jumplink-tx {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.asd-jumplink-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
}
.asd-own-misscard-name.asd-jumplink:hover .asd-jumplink-hint,
.asd-own-misscard-name.asd-jumplink:focus-visible .asd-jumplink-hint {
  opacity: 1;
  color: var(--brand);
}
/* 보유 카드 분류 칩(링크형): hover/포커스 시 세이지 강조 */
.asd-own-card-chip--link:hover,
.asd-own-card-chip--link:focus-visible {
  color: var(--brand-ink);
  background: var(--sage-tint);
}
.asd-own-misscard-flag {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  line-height: 1.3;
}
/* 미보유 카드 안 베스트는 위 디바이더 생략(이미 카드로 구분됨) */
.asd-own-best--inmiss {
  border-top: 0;
  padding: 10px 0 0;
  margin-top: 8px;
}

/* ── 우: 보유율 메타 ──────────────────────────────────────────── */
.asd-own-bignum {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.asd-own-bignum b { font-weight: 700; }
.asd-own-gauge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.asd-own-gauge {
  flex: 1 1 auto;
  height: 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.asd-own-gauge-fill {
  height: 100%;
  background: var(--brand);
  border-radius: var(--radius-sm);
}
.asd-own-gauge-pct {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}

/* 대분류별 보유율 막대 */
.asd-own-mbar-row { margin-top: 12px; }
.asd-own-mbar-row:first-of-type { margin-top: 4px; }
.asd-own-mbar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.asd-own-mbar-lab {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asd-own-mbar-num {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.asd-own-mbar {
  height: 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.asd-own-mbar-fill {
  height: 100%;
  background: var(--sage);
  border-radius: var(--radius-sm);
}
.asd-own-mbar.is-strong .asd-own-mbar-fill { background: var(--brand); }
/* 0% — 트랙 + 점선 */
.asd-own-mbar.is-empty {
  background: transparent;
  border: 1px dashed var(--line-strong);
  height: 6px;
}

/* 미보유 소분류 — 대분류별 그룹 + 점선 칩 */
.asd-own-miss-grp { margin-top: 12px; }
.asd-own-miss-grp:first-of-type { margin-top: 4px; }
.asd-own-miss-grphead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.asd-own-miss-grpcnt {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.asd-own-miss-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.asd-own-miss-chip {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  line-height: 1.3;
}
/* 미보유 소분류 칩(링크형): hover/포커스 시 세이지 강조 — 보유 카드 칩 링크와 동일 어포던스
   (커서/트랜지션/포커스 링은 .asd-jumplink 공용 규칙 상속) */
.asd-own-miss-chip--link:hover,
.asd-own-miss-chip--link:focus-visible {
  color: var(--brand-ink);
  background: var(--sage-tint);
  border-color: var(--brand);
}

/* ════════════════════════════════════════════════════════════════
   탭B 반응형 — 공용 셸(.asd-3pane 등)이 1439/768 미디어를 상속.
   아이템 그리드 열수 + 모바일 좌측(제품 드롭다운) 처리만 추가.
   ════════════════════════════════════════════════════════════════ */

/* 1024~ : 아이템 그리드 2열 (우 메타는 공용 규칙으로 하단 스택) */
@media (max-width: 1439px) {
  .asd-own-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 미보유 베스트 그리드: 좁은 폭에서 1열(카드 내용 가독성) */
@media (max-width: 768px) {
  .asd-own-miss-grid { grid-template-columns: 1fr; }
}

/* ≤768: 좌 트리 → 상단 제품 드롭다운 + 가로 분류 칩. 공용 규칙이
   .asd-tree를 display:none 처리하므로 own-left만 다시 노출. */
@media (max-width: 768px) {
  .asd-own .asd-own-left {
    display: block;
    border-right: 0;
    padding: 0;
    margin-bottom: 12px;
  }
  .asd-own .asd-own-left .asd-tree-scroll {
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  .asd-own-mobsel {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
  }
  /* 데스크톱 제품 리스트·디바이더 숨기고, 트리는 가로 칩으로 */
  .asd-own-products,
  .asd-own-divider { display: none; }
  .asd-own-tree {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
  }
  .asd-own-tree > li { display: contents; }
  .asd-own-tree-children { display: contents; }
  .asd-own-tnode {
    width: auto;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
  }
  .asd-own-tnode-all,
  .asd-own-tnode-major,
  .asd-own-tnode-mid {
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 500;
  }
  .asd-own-tnode.is-active::before { display: none; }
  .asd-own-tnode.is-active { border-color: var(--brand); }
}

/* ≤420: 아이템 그리드 2열 유지(요구), gap 축소 */
@media (max-width: 420px) {
  .asd-own-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   페르소나 카드 (소분류 상세) — assetdb.js renderPersonaCard 마크업 대응
   · 토큰(--brand/--sage-tint 등)은 :root 참조만. 세이지 절제 유지.
   · ★강조 3블록: quote(좌 보더+틴트+따옴표) / concept(점선 박스) / cap(brand 틴트+굵게).
   · 위계: 라벨=작은 muted 캡션, 본문=text-2. 칩=작고 단정. 반응형=모바일 세로 정렬.
   ════════════════════════════════════════════════════════════════ */

/* ── 카드 컨테이너 ────────────────────────────────────────────── */
.asd-persona {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 24px 26px 26px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── 헤더: code 뱃지 + 유형 칩 + 이름 + demo 칩 ──────────────── */
.asd-persona-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.asd-persona-head-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* code 뱃지 — 모노톤·작게(식별자 느낌) */
.asd-persona-code {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
/* 유형 칩 — 세이지 틴트(분류 강조 화이트리스트) */
.asd-persona-type {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--brand-ink);
  background: var(--sage-tint);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
.asd-persona-name {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--text);
}
/* 부제목 「발화」 — 제목(name) 바로 아래 보조 한 줄(차분한 인용 톤). 제목이 주, 부제목 보조 */
.asd-persona-subtitle {
  margin: 3px 0 0;
  font-size: 13.5px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--muted);
}
/* demo 칩 4개 — 작고 단정(연령·지역·혼인·직업), 무채색 */
.asd-persona-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.asd-persona-demo-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  line-height: 1.3;
}

/* ── life / desire 공용 필드 (라벨 + 본문) ───────────────────── */
.asd-persona-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.asd-persona-field-lab {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.asd-persona-field-tx {
  margin: 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-2);
}
/* life — 일상(기본 필드 톤 그대로, 강조 없음) */
.asd-persona-life .asd-persona-field-tx { color: var(--text-2); }
/* desire — 좌측 세이지 라인으로 살짝 강조(욕망이 핵심) */
.asd-persona-desire {
  padding-left: 12px;
  border-left: 2px solid var(--sage);
}
.asd-persona-desire .asd-persona-field-tx {
  font-weight: 500;
  color: var(--text);
}

/* ── ★ quote — 인용 블록(좌 두꺼운 보더 + 연한 틴트 + 따옴표 마크) ── */
.asd-persona-quote {
  position: relative;
  margin: 0;
  padding: 16px 18px 16px 22px;
  background: var(--sage-tint);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.asd-persona-quote-mark {
  display: block;
  font-size: 34px;
  line-height: .6;
  font-weight: 700;
  color: var(--sage);
  margin-bottom: 2px;
  user-select: none;
}
.asd-persona-quote-tx {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.6;
  color: var(--brand-ink);
}
.asd-persona-quote-src {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  color: var(--muted);
}
.asd-persona-quote-src-dash { color: var(--sage); }

/* ── role — 제품 역할(담백, 라벨 + 본문) ─────────────────────── */
.asd-persona-role {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.asd-persona-role-lab {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.asd-persona-role-tx {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-2);
}

/* ── ★ concept — 광고 콘셉트(점선 보더 박스 + ✨ 라벨), cap 중첩 ── */
.asd-persona-concept {
  border: 1px dashed var(--sage);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.asd-persona-concept-lab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brand-ink);
}
.asd-persona-concept-ico {
  display: inline-flex;
  font-size: 13px;
  line-height: 1;
}
.asd-persona-concept-tx {
  margin: 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-2);
}

/* ── ★ cap — 카피(brand 틴트 강조 배경 + 굵은 텍스트) ────────── */
.asd-persona-cap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--sage-tint-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.asd-persona-cap-lab {
  display: inline-flex;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.asd-persona-cap-tx {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--brand-ink);
}

/* ════════════════════════════════════════════════════════════════
   개요 카드(페르소나 변형) · 트리 code 뱃지 · 우 메타 보강
   ════════════════════════════════════════════════════════════════ */

/* 트리 노드 code 뱃지(.asd-node 내부) — 작은 모노톤 식별자 */
.asd-node-code {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* 개요 카드 — 페르소나 변형(code 뱃지 + 이름 한 줄 + desire 미리보기) */
.asd-ov-card--persona .asd-ov-card-tt {
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.asd-ov-card-code {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.asd-ov-card-desire {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 우 메타 — 한 줄 욕망/출처 본문, 카피(강조) */
.asd-meta-note {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-2);
}
.asd-meta-cap {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand-ink);
  background: var(--sage-tint);
  border-left: 2px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 10px;
}
.asd-meta-src {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════
   루트 개요 — 순위별 섹션(assetdb.js renderRootOverview 마크업 대응)
   · section.asd-root-section > button.asd-root-section-head(span.tt + span.meta)
     + div.asd-overview(기존 카드 그리드 — 건드리지 않음).
   · 헤더는 "눌러서 해당 순위로 들어간다" 어포던스: 좌측 brand 악센트 + hover 틴트.
   · 세이지 화이트리스트: 좌측 악센트 바·hover 배경·포커스 링. 제목 brand-ink.
   ════════════════════════════════════════════════════════════════ */

/* 순위 섹션 묶음 — 섹션 간 아래 여백 */
.asd-root-section { margin-bottom: 28px; }

/* 클릭 가능한 섹션 헤더 버튼 — 순위명 ↔ "페르소나 N명" 가로 양끝 */
.asd-root-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  appearance: none;
  border: 0;
  border-left: 3px solid var(--brand);
  border-bottom: 1px solid var(--line);
  border-radius: 0 var(--radius-sm) 0 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 12px 9px;
  transition: background .12s ease;
}
.asd-root-section-head:hover { background: var(--sage-tint); }
.asd-root-section-head:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* 순위 제목 — 약간 크게·굵게, brand-ink */
.asd-root-section-tt {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--brand-ink);
}

/* "페르소나 N명" 메타 — 작게·muted */
.asd-root-section-meta {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 루트 개요 반응형 — 모바일에서 헤더 패딩 축소 */
@media (max-width: 768px) {
  .asd-root-section { margin-bottom: 22px; }
  .asd-root-section-head { padding: 7px 10px 8px; }
  .asd-root-section-tt { font-size: 14px; }
}

/* ── 페르소나 카드 반응형 — 모바일에서 칩·여백 세로 정렬 ──────── */
@media (max-width: 768px) {
  .asd-persona {
    padding: 18px 18px 20px;
    gap: 16px;
  }
  .asd-persona-name { font-size: 19px; }
  .asd-persona-quote-tx { font-size: 14.5px; }
  .asd-persona-cap-tx { font-size: 14px; }
}

/* ≤420: demo 칩 가로폭 절약(줄바꿈은 이미 wrap), 인용/콘셉트 패딩 축소 */
@media (max-width: 420px) {
  .asd-persona-head-top { gap: 6px; }
  .asd-persona-quote { padding: 14px 14px 14px 18px; }
  .asd-persona-concept { padding: 14px; }
}

/* 모션 최소화 — 페르소나 카드엔 트랜지션 없음(정적). 별도 처리 불필요. */

/* ════════════════════════════════════════════════════════════════
   레퍼런스 · 인사이트 · 기획서 입력 UI (assetdb.js 액션바/패널 마크업 대응)
   · 토큰(--brand/--sage/--sage-tint/--muted/--line/--text 등)은 :root 참조만(재정의 금지).
   · 콘셉트: 기획서 PDF 느낌 — "작은 muted 라벨 + 단정한 박스(input/textarea)".
   · 세이지 절제(화이트리스트): 주 액션 버튼·⭐타겟 연관성 강조·활성 칩(.is-on)·
     아코디언 펼침(.is-open)·포커스 링. 나머지 무채색.
   · ⭐ asd-ref-relevance: 타겟 연관성이 중심축 → 좌측 brand 바 + sage-tint 배경.
   ════════════════════════════════════════════════════════════════ */

/* ── 카드 액션바 (레퍼런스 / 기획서 진입 버튼) ─────────────────── */
.asd-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.asd-card-action-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
/* 레퍼런스 = 주 액션(세이지 톤: sage-tint 면 + brand-ink) */
.asd-card-action-ref {
  border: 1px solid transparent;
  background: var(--sage-tint);
  color: var(--brand-ink);
}
.asd-card-action-ref:hover { background: var(--sage-tint-2); }
.asd-card-action-ref[aria-expanded="true"] {
  background: var(--sage-tint-2);
  border-color: var(--brand);
}
/* 기획서 = 보조 액션(무채색 아웃라인) */
.asd-card-action-plan {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
}
.asd-card-action-plan:hover { background: var(--surface-2); border-color: var(--line-strong); }
.asd-card-action-plan[aria-expanded="true"] {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--text);
}
.asd-card-action-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── 패널 공통(레퍼런스/기획서) — 카드 하단 펼침 영역 ─────────── */
.asd-ref-panel,
.asd-plan-panel {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.asd-ref-panel[hidden],
.asd-plan-panel[hidden] { display: none; }

/* 로그인 안내 / 로딩 — 담백한 안내 줄 */
.asd-ref-login,
.asd-ref-loading,
.asd-plan-login,
.asd-plan-loading {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  padding: 6px 2px;
}
.asd-plan-bar .asd-plan-login { padding: 0; align-self: center; }

/* ════════════════════════════════════════════════════════════════
   레퍼런스 섹션
   ════════════════════════════════════════════════════════════════ */
.asd-ref-sec {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.asd-ref-sec + .asd-ref-sec { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.asd-ref-sec-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.asd-ref-sec-tt {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.asd-ref-sec-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── 레퍼런스 목록 ────────────────────────────────────────────── */
.asd-ref-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asd-ref-empty {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  padding: 14px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  text-align: center;
}

/* ── 레퍼런스 아이템(읽기 카드) ───────────────────────────────── */
.asd-ref-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asd-ref-item-head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;   /* 한 줄 고정 — 요약은 …로 잘림(줄바꿈 깨짐 방지) */
  gap: 8px;
}
/* 토글(채널 + 요약 + caret) — 클릭 영역, 접힘 시 한 줄 요약 */
.asd-ref-item-toggle {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.asd-ref-item-summary {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--text-2);
}
.asd-ref-item-caret { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
/* 본문 — 기본 접힘, .is-open일 때 펼침 */
.asd-ref-item-body { display: none; }
.asd-ref-item.is-open .asd-ref-item-body { display: flex; flex-direction: column; gap: 10px; }
/* 채널 칩 — 세이지 틴트(분류 강조 화이트리스트) */
.asd-ref-item-channel {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;   /* 채널 칩이 "인스타 릴 / 스"처럼 쪼개지지 않게 */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--brand-ink);
  background: var(--sage-tint);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
/* 📌 출처 태그(후킹/홀딩 보관함 레퍼런스) — 채널 칩과 구분되게 무채색 톤 */
.asd-ref-srctag {
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.asd-ref-item-owner {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
/* 액션(수정/삭제) — 우측 정렬, 텍스트 버튼 */
.asd-ref-item-acts {
  margin-left: auto;
  flex: 0 0 auto;       /* 수정·삭제는 줄어들거나 줄바꿈되지 않게 */
  display: inline-flex;
  gap: 4px;
}
.asd-ref-item-act {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background .12s ease, color .12s ease;
}
.asd-ref-item-act:hover { color: var(--text); background: var(--surface-2); }
.asd-ref-item-act.danger:hover { color: var(--neg); }
.asd-ref-item-act:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* 참고 URL — 한 줄 말줄임 링크 */
.asd-ref-item-url {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand-ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.asd-ref-item-url:hover { text-decoration: underline; text-underline-offset: 2px; }

/* 일반 필드(후킹/홀딩/핵심메시지/메모) — 라벨 + 본문 */
.asd-ref-item-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 11px;                     /* 항목별 영역 분리 — 연한 카드 블록 */
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.asd-ref-item-field-lab {
  font-size: 11px;
  font-weight: 700;                      /* 항목 제목처럼 또렷하게 */
  color: var(--text-2);
}
.asd-ref-item-field-tx {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre-wrap;
}
/* 🎬 프레임 폴더가 있는 비트 행 — 텍스트 좌측 / 대표 프레임 썸네일 우측 */
.asd-ref-bitrow { flex-direction: row; align-items: flex-start; gap: 10px; }
.asd-ref-bitcol { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.asd-ref-frame-thumb {
  flex: 0 0 auto;
  width: 88px;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line);
  cursor: zoom-in;
}

/* ── ⭐ 타겟 연관성 강조(읽기) — 좌측 brand 바 + sage-tint 배경 ──
   타겟 연관성이 레퍼런스의 중심축 → 가장 또렷한 세이지 강조. */
.asd-ref-relevance {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--sage-tint);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 12px;
}
.asd-ref-relevance-ico {
  font-size: 12px;
  line-height: 1;
}
.asd-ref-relevance-lab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--brand-ink);
}
.asd-ref-relevance-tx {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--brand-ink);
  white-space: pre-wrap;
}

/* ════════════════════════════════════════════════════════════════
   레퍼런스 / 인사이트 입력 폼 (PDF 느낌: 라벨 + 박스)
   ════════════════════════════════════════════════════════════════ */
.asd-ref-form,
.asd-insight-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 추가 폼은 위에 살짝 구분선, 수정 폼은 카드 안에서 박스로 */
.asd-ref-form--add {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}
.asd-ref-form--edit {
  border: 1px solid var(--brand);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 14px 16px;
}

.asd-ref-form-row,
.asd-insight-form-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* 🎯 탐색 결론 — 맨 위 결론 한 줄(방법론 Step 4) 강조 */
.asd-insight-lead {
  padding: 10px 12px;
  background: var(--sage-tint);
  border: 1px solid var(--sage-tint-2);
  border-radius: var(--radius-sm);
}
.asd-insight-lead .asd-insight-form-lab { color: var(--brand-ink); font-weight: 700; }
.asd-ref-form-lab,
.asd-insight-form-lab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* input/textarea 공통 — 단정한 박스, 포커스 시 brand 보더 */
.asd-ref-form-input,
.asd-insight-form-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.asd-ref-form-input::placeholder,
.asd-insight-form-input::placeholder { color: var(--muted); }
.asd-ref-form-input:hover,
.asd-insight-form-input:hover { border-color: var(--muted); }
.asd-ref-form-input:focus,
.asd-insight-form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--sage-tint);
}
textarea.asd-ref-form-input,
textarea.asd-insight-form-input {
  resize: vertical;
  min-height: 56px;
}

/* ⭐ 타겟 연관성 입력행 — 읽기와 동일한 세이지 강조(좌 바 + 틴트 배경) */
.asd-ref-form-row.asd-ref-relevance {
  background: var(--sage-tint);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 12px;
  gap: 6px;
}
.asd-ref-form-row.asd-ref-relevance .asd-ref-form-lab { color: var(--brand-ink); font-weight: 700; }
.asd-ref-form-row.asd-ref-relevance .asd-ref-form-input { border-color: var(--brand); }
.asd-ref-form-row.asd-ref-relevance .asd-ref-form-input:focus {
  box-shadow: 0 0 0 3px var(--sage-tint-2);
}

/* 폼 버튼 바 */
.asd-ref-form-bar,
.asd-insight-form-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
/* 저장/추가 = 주 액션(brand 면 + 흰 글씨) */
.asd-ref-form-submit,
.asd-insight-form-submit {
  appearance: none;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  min-height: 36px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter .12s ease;
}
.asd-ref-form-submit:hover,
.asd-insight-form-submit:hover { filter: brightness(.95); }
.asd-ref-form-submit:focus-visible,
.asd-insight-form-submit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 취소 = 보조(무채색 아웃라인) */
.asd-ref-form-cancel {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  min-height: 36px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.asd-ref-form-cancel:hover { background: var(--surface-2); border-color: var(--muted); }
.asd-ref-form-cancel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── 인사이트 섹션 ────────────────────────────────────────────── */
.asd-insight-sec { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
/* 🎯 콘텐츠 제작 방향성 — 이 단계 핵심 산출물이라 세이지 박스로 강조(가이드 아래 최상단) */
.asd-dir-sec {
  margin: 0 0 16px; padding: 14px;
  background: var(--sage-tint); border: 1px solid var(--sage-tint-2);
  border-radius: var(--radius-md);
}
.asd-dir-sec .asd-ref-sec-tt { font-size: 15px; }
.asd-dir-sec .asd-insight-desc { margin-bottom: 8px; }
.asd-dir-input { min-height: 130px; }
/* 저장 후 잠금(읽기 전용) — '✏️ 수정' 눌러야 편집 가능 */
.asd-dir-input.is-locked { background: var(--surface); color: var(--text); cursor: default; }
.asd-dir-input.is-locked:hover { border-color: var(--line); }
.asd-dir-input.is-locked:focus { border-color: var(--line); box-shadow: none; }
/* 🤖 AI 방향성 분석 — 방향성 박스 안 하단, 점선 구분 */
.asd-dir-ai { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--sage-tint-2); }
.asd-dir-ai-lab { font-size: 13px; font-weight: 700; color: var(--brand-ink); margin-bottom: 2px; }
.asd-dir-ai-desc { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.asd-dir-ai-btn {
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--brand); border: 1px solid var(--brand); border-radius: var(--radius-sm);
}
.asd-dir-ai-btn:disabled { opacity: .6; cursor: default; }
.asd-dir-ai-out { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.asd-dir-ai-card { padding: 10px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.asd-dir-ai-tx { margin: 0 0 6px; font-size: 12.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; }
.asd-dir-ai-add {
  padding: 3px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer;
  color: var(--brand-ink); background: var(--sage-tint); border: 1px solid var(--sage-tint-2); border-radius: var(--radius-pill);
}
.asd-dir-ai-msg { font-size: 12.5px; color: var(--muted); padding: 6px 0; }
.asd-dir-ai-hint { font-size: 11.5px; color: var(--muted); }
/* 종합 인사이트 — 토글(접이식) 헤더 + 본문 */
.asd-insight-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 14px; cursor: pointer; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.asd-insight-head-tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asd-insight-head-main { font-size: 14px; font-weight: 700; color: var(--text); }
.asd-insight-head-sub {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asd-insight-head-caret { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.asd-insight-body[hidden] { display: none; }
.asd-insight-desc {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════
   기획서 폼 (PDF 느낌: 라벨 + 박스, 아코디언 섹션, 다중선택 칩)
   ════════════════════════════════════════════════════════════════ */
.asd-plan-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 평면 필드 영역(상단 기본 항목) */
.asd-plan-flat { gap: 12px; }
/* 2열 그리드(넓은 폭) — 모바일에서 1열로 내려감 */
.asd-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ── 기획서 필드 (라벨 + 박스) ────────────────────────────────── */
.asd-plan-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.asd-plan-field-lab {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.asd-plan-field-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.asd-plan-field-input::placeholder { color: var(--muted); }
.asd-plan-field-input:hover { border-color: var(--muted); }
select.asd-plan-field-input { cursor: pointer; background-color: var(--surface); }
.asd-plan-field-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--sage-tint);
}
textarea.asd-plan-field-input {
  resize: vertical;
  min-height: 68px;
}
/* 다중 입력(오프닝 후크/CTA) — ‘+ 상황 추가’로 칸을 늘려 여러 개 작성 */
.asd-plan-multi { display: flex; flex-direction: column; gap: 6px; }
.asd-plan-multi-list { display: flex; flex-direction: column; gap: 6px; }
.asd-plan-multi-row { display: flex; flex-direction: column; gap: 4px; }
.asd-plan-multi-inner { display: flex; gap: 6px; align-items: flex-start; }
/* ✨ AI 작성 배지 — AI가 쓴 칸 표시(저장해도 유지) */
.asd-plan-ai-badge {
  align-self: flex-start; font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--brand, #2f6b4f); padding: 1px 8px; border-radius: 999px; letter-spacing: .02em;
}
textarea.asd-plan-multi-input { min-height: 44px; flex: 1; min-width: 0; }
.asd-plan-multi-rm {
  flex: 0 0 auto; appearance: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 13px; line-height: 1;
}
.asd-plan-multi-rm:hover { color: var(--neg); border-color: var(--neg); }
.asd-plan-multi-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.asd-plan-multi-add {
  align-self: flex-start; appearance: none; cursor: pointer;
  border: 1px dashed var(--brand); background: transparent;
  color: var(--brand-ink); font-weight: 700; font-size: 12px;
  padding: 5px 12px; border-radius: 6px;
}
.asd-plan-multi-add:hover { background: var(--sage-tint); }
/* ✨ AI 작성 버튼 + AI가 추가한 칸 강조 */
.asd-plan-multi-ai {
  appearance: none; cursor: pointer;
  border: 1px solid var(--brand, #2f6b4f); background: var(--brand, #2f6b4f); color: #fff;
  font-weight: 700; font-size: 12px; padding: 5px 12px; border-radius: 6px;
}
.asd-plan-multi-ai:hover { filter: brightness(1.08); }
.asd-plan-multi-ai:disabled { opacity: .6; cursor: default; }
textarea.asd-plan-multi-ai-new { background: var(--sage-tint); border-color: var(--sage-tint-2); }

/* ── 아코디언 섹션 (.is-open 펼침, caret 회전) ────────────────── */
.asd-plan-sec {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.asd-plan-sec.is-open { border-color: var(--line-strong); }
.asd-plan-sec-head {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  min-height: 48px;
  padding: 12px 14px;
  transition: background .12s ease;
}
.asd-plan-sec-head:hover { background: var(--surface-2); }
.asd-plan-sec.is-open .asd-plan-sec-head { background: var(--sage-tint); }
.asd-plan-sec-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.asd-plan-sec-tt {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.asd-plan-sec.is-open .asd-plan-sec-tt { color: var(--brand-ink); }
/* caret — CSS 보더 셰브론(접힘 ▸ → 펼침 ▾). 트리 .asd-caret 톤 통일 */
.asd-plan-sec-caret {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .16s ease, border-color .16s ease;
}
.asd-plan-sec.is-open .asd-plan-sec-caret {
  transform: translateY(-2px) rotate(45deg);
  border-color: var(--brand);
}
/* body — hidden 속성으로도 닫힘(JS), 펼침 시 패딩 영역 */
.asd-plan-sec-body {
  padding: 4px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.asd-plan-sec-body[hidden] { display: none; }

/* 섹션 내 블록 제목 — 작은 구분 헤더 */
.asd-plan-block-tt {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-top: 4px;
}
.asd-plan-block-tt:first-child { margin-top: 0; }

/* ── 다중선택 칩 (.is-on 토글 — 켜짐: brand 면 + 흰 글씨) ─────── */
.asd-plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.asd-plan-chip {
  appearance: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  min-height: 34px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.asd-plan-chip:hover { background: var(--surface-2); border-color: var(--muted); }
.asd-plan-chip.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.asd-plan-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── 기획서 저장 바 ───────────────────────────────────────────── */
.asd-plan-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.asd-plan-save {
  appearance: none;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  min-height: 40px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter .12s ease;
}
.asd-plan-save:hover { filter: brightness(.95); }
.asd-plan-save:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.asd-plan-save:disabled {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--muted);
  cursor: not-allowed;
  filter: none;
}

/* ════════════════════════════════════════════════════════════════
   입력 UI 반응형 — 768/420 모바일 세로 정렬
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 기획서 2열 그리드 → 1열 */
  .asd-plan-grid { grid-template-columns: 1fr; }
  /* 액션바 버튼 가로 꽉 채우기(터치 타깃) */
  .asd-card-actions { gap: 8px; }
  .asd-card-action-btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  /* 폼 버튼 바 — 가로 꽉 */
  .asd-ref-form-bar .asd-ref-form-submit,
  .asd-ref-form-bar .asd-ref-form-cancel,
  .asd-insight-form-bar .asd-insight-form-submit { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  /* 아이템 헤더 — 액션이 다음 줄로 내려가도 자연스럽게 */
  .asd-ref-item-acts { margin-left: auto; }
}

@media (max-width: 420px) {
  .asd-ref-panel,
  .asd-plan-panel { padding: 14px; }
  .asd-ref-item { padding: 12px 14px; }
  /* 칩 — 좁은 폭에서 줄바꿈 여유 */
  .asd-plan-chip { padding: 7px 12px; }
}

/* 모션 최소화 — 입력 UI 트랜지션 제거 */
@media (prefers-reduced-motion: reduce) {
  .asd-card-action-btn,
  .asd-ref-item-act,
  .asd-ref-form-input, .asd-insight-form-input, .asd-plan-field-input,
  .asd-ref-form-submit, .asd-insight-form-submit, .asd-ref-form-cancel,
  .asd-plan-sec-head, .asd-plan-sec-caret,
  .asd-plan-chip, .asd-plan-save { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   퍼널 단계 네비 + 기획서 카드 목록 (assetdb.js buildStepNav / paintPlanPanel 대응)
   · 토큰(--brand/--sage/--sage-tint/--muted/--line/--text 등)은 :root 참조만(재정의 금지).
   · 단계 칩 = detaildb식 탭(.asd-tab)처럼 활성 밑줄. 진행(next)=brand 면, 뒤로(back)=아웃라인.
   · 기획서 카드 = 레퍼런스 아이템(.asd-ref-item)과 시각 대칭. 세이지 절제(화이트리스트):
     활성 단계 칩 밑줄·플랫폼 칩·진행 버튼 면·포커스 링. 나머지 무채색. 삭제=neg(텍스트만).
   ════════════════════════════════════════════════════════════════ */

/* ── 단계 네비 묶음 (breadcrumb + 단계 칩) ─────────────────────── */
.asd-step-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

/* 단계 칩 가로 묶음 — 하단 라인(detaildb 탭바 톤) */
.asd-step-chips {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}

/* 단계 칩 — .asd-tab 모방(언더라인형). 기본 muted, .is-active=현재 단계(brand 밑줄) */
.asd-step-chip {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 14px 11px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
  transition: color .14s ease;
}
.asd-step-chip::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 2px;
}
.asd-step-chip:hover { color: var(--text-2); }
.asd-step-chip.is-active { color: var(--text); }
.asd-step-chip.is-active::after { background: var(--brand); }   /* 활성 단계 밑줄 = 세이지 */
.asd-step-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ── 단계 이동 버튼 묶음 (뒤로 ↔ 다음) — 양끝 정렬 ─────────────── */
.asd-step-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
/* next만 있고 back이 없을 일은 없지만, back 단독(3단계)이면 좌측 정렬 유지됨.
   next가 없을 때 back을 좌측에 두기 위해 마진 보정 불필요(justify-content: space-between). */

/* 단계 버튼 공통 — 터치 타깃 ≥40px */
.asd-step-back,
.asd-step-next {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, filter .12s ease;
}
/* 뒤로 = 보조(무채색 아웃라인) */
.asd-step-back {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
}
.asd-step-back:hover { background: var(--surface-2); border-color: var(--muted); color: var(--text); }
.asd-step-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 다음 = 주 액션(brand 면 + 흰 글씨) */
.asd-step-next {
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
}
.asd-step-next:hover { filter: brightness(.95); }
.asd-step-next:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════
   기획서 카드 목록 (단계4) — 레퍼런스 아이템과 대칭
   ════════════════════════════════════════════════════════════════ */

/* ── 목록 헤더(제목 + 개수 + "+ 새 기획서") ───────────────────── */
.asd-plan-list-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.asd-plan-list-tt {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.asd-plan-list-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* "+ 새 기획서" — 우측 정렬 주 액션(brand 면 + 흰 글씨) */
.asd-plan-add-btn {
  appearance: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter .12s ease;
}
.asd-plan-add-btn:hover { filter: brightness(.95); }
.asd-plan-add-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── 목록 컨테이너 ────────────────────────────────────────────── */
.asd-plan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 빈 상태 — 점선 박스 안내(레퍼런스 .asd-ref-empty 톤) */
.asd-plan-empty {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  padding: 14px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  text-align: center;
}

/* ── 기획서 1건(읽기 카드) — .asd-ref-item 대칭 ───────────────── */
.asd-plan-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asd-plan-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* 소재명 — 굵게(카드 주제목) */
.asd-plan-item-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
/* 플랫폼 칩 — 세이지 틴트(분류 강조 화이트리스트, 채널 칩과 동일 톤) */
.asd-plan-item-platform {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--brand-ink);
  background: var(--sage-tint);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
/* 작성일 · 작성자 — 작게 muted */
.asd-plan-item-date,
.asd-plan-item-owner {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* 상태 칩 — 무채색(중립 메타). 세이지 남용 방지 */
.asd-plan-item-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
/* 수정/삭제 — 우측 정렬 텍스트 버튼(.asd-ref-item-act 대칭) */
.asd-plan-item-acts {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
}
.asd-plan-item-act {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background .12s ease, color .12s ease;
}
.asd-plan-item-act:hover { color: var(--text); background: var(--surface-2); }
.asd-plan-item-act.danger:hover { color: var(--neg); }
.asd-plan-item-act:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* 📄 PPT 생성 — 양식 내보내기(눈에 띄게) */
.asd-plan-item-act.asd-plan-ppt {
  color: #fff;
  background: var(--brand, #2f6b4f);
  font-weight: 700;
}
.asd-plan-item-act.asd-plan-ppt:hover { color: #fff; filter: brightness(1.08); }
.asd-plan-item-act.asd-plan-ppt:disabled { opacity: .55; cursor: default; }
/* 🔄 새로 만들기 — 보조(아웃라인) 버튼 */
.asd-plan-item-act.asd-plan-ppt-new {
  color: var(--brand, #2f6b4f);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--brand, #2f6b4f);
  font-weight: 600;
}
.asd-plan-item-act.asd-plan-ppt-new:hover { color: var(--brand, #2f6b4f); background: var(--surface-2); }
.asd-plan-item-act.asd-plan-ppt-new:disabled { opacity: .55; cursor: default; }

/* ── 편집뷰 헤더(← 목록으로) ──────────────────────────────────── */
.asd-plan-editor-head {
  display: flex;
  align-items: center;
  gap: 12px;          /* "← 목록으로" 버튼과 제목 사이 간격 */
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
/* "← 목록으로" — 무채색 아웃라인 뒤로 버튼(.asd-step-back 톤) */
.asd-plan-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.asd-plan-back:hover { background: var(--surface-2); border-color: var(--muted); color: var(--text); }
.asd-plan-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════
   퍼널 단계 네비 + 기획서 카드 반응형 — 768/420
   ════════════════════════════════════════════════════════════════ */

/* ≤768: 단계 칩 가로 스크롤(잘림 방지), 이동·추가 버튼 가로 채움(터치) */
@media (max-width: 768px) {
  .asd-step-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .asd-step-chips::-webkit-scrollbar { display: none; }
  .asd-step-chip { flex: 0 0 auto; }
  .asd-step-foot { gap: 8px; }
  .asd-step-back,
  .asd-step-next { flex: 1 1 auto; justify-content: center; }
  /* 목록 헤더 — "+ 새 기획서"가 다음 줄로 내려가면 가로 채움 */
  .asd-plan-add-btn { min-height: 40px; }
  .asd-plan-item-acts { margin-left: auto; }
}

/* ≤420: 단계 칩 세로 묶음(밑줄→좌측 바로 전환), 카드 패딩 축소 */
@media (max-width: 420px) {
  .asd-step-chips {
    flex-direction: column;
    overflow-x: visible;
    border-bottom: 0;
    gap: 2px;
  }
  .asd-step-chip {
    text-align: left;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
  }
  .asd-step-chip::after {
    left: 0; right: auto; top: 4px; bottom: 4px;
    width: 3px; height: auto;
    border-radius: 0 2px 2px 0;
  }
  .asd-step-chip.is-active { background: var(--sage-tint); color: var(--brand-ink); }
  .asd-plan-item { padding: 12px 14px; }
  .asd-plan-add-btn { width: 100%; justify-content: center; }
}

/* 모션 최소화 — 단계/기획서 버튼 트랜지션 제거 */
@media (prefers-reduced-motion: reduce) {
  .asd-step-chip,
  .asd-step-back, .asd-step-next,
  .asd-plan-add-btn, .asd-plan-item-act, .asd-plan-back { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   삭제 확인 모달 (assetdb.js showConfirm 마크업 대응)
   · 토큰(--brand/--surface/--muted/--line/--neg 등)은 :root 참조만(재정의 금지).
   · 콘셉트: 화면 가운데 작은 팝업 + 반투명 오버레이. 오버레이 클릭/ESC 닫힘은 JS가 처리.
   · 세이지 절제: 모달엔 세이지 면 없음(중립). 삭제 버튼만 위험 톤(--neg 면 + 흰 글씨)으로 또렷이.
   · 작은 페이드 인만(과하지 않게). prefers-reduced-motion 존중.
   ════════════════════════════════════════════════════════════════ */

/* 전체를 덮는 반투명 오버레이 — 가운데 정렬, 높은 z-index */
.asd-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 30, .48);
  animation: asd-modal-fade .14s ease;
}

/* 가운데 박스 */
.asd-modal {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 48px rgba(15, 23, 30, .24);
  padding: 22px 22px 18px;
  animation: asd-modal-pop .16s ease;
}

/* 제목 — 굵게, brand-ink */
.asd-modal-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--brand-ink);
}

/* 본문 — muted, 줄간격 */
.asd-modal-msg {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-wrap;
}

/* 버튼 묶음 — 가로, 우측 정렬 */
.asd-modal-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* 버튼 공통 — 터치 타깃 ≥40px */
.asd-modal-cancel,
.asd-modal-ok {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, filter .12s ease;
}
/* 취소 = 보조(무채색 아웃라인 톤, .asd-step-back 대칭) */
.asd-modal-cancel {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
}
.asd-modal-cancel:hover { background: var(--surface-2); border-color: var(--muted); color: var(--text); }
.asd-modal-cancel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 삭제 = 위험 톤(--neg 면 + 흰 글씨) — 되돌릴 수 없는 동작임을 명확히 */
.asd-modal-ok {
  border: 1px solid var(--neg);
  background: var(--neg);
  color: #fff;
}
.asd-modal-ok:hover { filter: brightness(.95); }
.asd-modal-ok:focus-visible { outline: 2px solid var(--neg); outline-offset: 2px; }

/* 작은 페이드 인(오버레이) + 살짝 떠오름(박스) */
@keyframes asd-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes asd-modal-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* 모바일 — 모달 폭 90%, 버튼 가로 채움 */
@media (max-width: 420px) {
  .asd-modal { max-width: 90%; padding: 20px 18px 16px; }
  .asd-modal-bar { gap: 8px; }
  .asd-modal-cancel,
  .asd-modal-ok { flex: 1 1 auto; }
}

/* 모션 최소화 — 모달 진입 애니메이션·버튼 트랜지션 제거 */
@media (prefers-reduced-motion: reduce) {
  .asd-modal-overlay,
  .asd-modal { animation: none; }
  .asd-modal-cancel,
  .asd-modal-ok { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   레퍼런스 리스트화 — 기획서(.asd-plan-*) 대칭 보강
   · asd-ref-list / asd-ref-empty 는 위(레퍼런스 섹션)에 이미 정의됨 → 여기선 미정의분만.
   · "+ 새 레퍼런스" 버튼·편집뷰 헤더·뒤로 버튼을 기획서와 시각 대칭으로.
   · 토큰은 :root 참조만(재정의 금지). 세이지 절제 유지.
   ════════════════════════════════════════════════════════════════ */

/* "+ 새 레퍼런스" — 우측 정렬 주 액션(.asd-plan-add-btn 대칭: brand 면 + 흰 글씨) */
.asd-ref-add-btn {
  appearance: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter .12s ease;
}
.asd-ref-add-btn:hover { filter: brightness(.95); }
.asd-ref-add-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 편집뷰 헤더(← 목록으로) — .asd-plan-editor-head 대칭 */
.asd-ref-editor-head {
  display: flex;
  align-items: center;
  gap: 12px;          /* "← 목록으로" 버튼과 제목 사이 간격 */
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
/* "← 목록으로" — 무채색 아웃라인 뒤로 버튼(.asd-plan-back 대칭) */
.asd-ref-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.asd-ref-back:hover { background: var(--surface-2); border-color: var(--muted); color: var(--text); }
.asd-ref-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 반응형 — 좁은 폭에서 "+ 새 레퍼런스" 가로 채움(.asd-plan-add-btn 대칭) */
@media (max-width: 768px) {
  .asd-ref-add-btn { min-height: 40px; }
}
@media (max-width: 420px) {
  .asd-ref-add-btn { width: 100%; justify-content: center; }
}

/* 모션 최소화 — 레퍼런스 추가/뒤로 버튼 트랜지션 제거 */
@media (prefers-reduced-motion: reduce) {
  .asd-ref-add-btn, .asd-ref-back { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   욕망카드(새 스키마) — 욕망 뱃지 / 8차원 가설·검증표 / 검증태그 /
   광고소재 강조 / 보조 레이어(정체성·대표 인물).
   · 색 기준은 원본 페르소나카드 디자인(보라 계열 + 검증 4색)을 따르고,
     여백·radius·라벨 폰트는 기존 --asd 토큰 톤에 맞춤.
   · 남성 카드(.asd-persona--male)는 보라 → 파랑 계열로 오버라이드.
   ════════════════════════════════════════════════════════════════ */

/* ── 욕망 뱃지 — 헤더 우측 보라 칩(.asd-persona-head-top 안) ───── */
.asd-persona-desire-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  color: #531dab;
  background: #f9f0ff;
  border: 1px solid #d3adf7;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}

/* ── 8차원 가설·검증표 컨테이너 + 라벨 ──────────────────────────── */
.asd-hypo-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.asd-hypo-lab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
}
.asd-hypo-ico {
  display: inline-flex;
  font-size: 13px;
  line-height: 1;
}

/* ── 가설·검증 표 ───────────────────────────────────────────────── */
.asd-hypo-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.asd-hypo-tbl th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.asd-hypo-tbl td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.asd-hypo-tbl tr:last-child td { border-bottom: none; }
/* 1열(차원) 좁게·굵게 */
.asd-hypo-dim {
  width: 78px;
  font-weight: 700;
  color: var(--text);
  white-space: normal;
}
/* 2열(가설) — 본문 톤 */
.asd-hypo-hy {
  color: var(--text-2);
}
/* 3열(검증) — 태그 칩을 줄바꿈 허용으로 담음 */
.asd-hypo-vf {
  width: 30%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}

/* ── 검증태그 칩 — BQ 초록 / 커뮤니티 파랑 / 리뷰 주황 / 간접 회색 ── */
.asd-vtag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  border: 1px solid transparent;
}
.asd-vtag--bq { color: #389e0d; background: #f6ffed; border-color: #b7eb8f; }
.asd-vtag--cm { color: #0958d9; background: #e6f4ff; border-color: #91caff; }
.asd-vtag--rv { color: #d46b08; background: #fff7e6; border-color: #ffd591; }
.asd-vtag--id { color: #999;    background: #fafafa; border-color: #e8e8e8; }

/* ── 광고소재 강조 박스 — 💡 + 보라 배경 + 좌측 굵은 보라 보더 ──── */
.asd-persona-adv {
  position: relative;
  background: #f9f0ff;
  border-left: 4px solid #531dab;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 14px 12px 16px;
}
.asd-persona-adv-tx {
  margin: 0;
  padding-left: 24px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.55;
  color: #531dab;
}
.asd-persona-adv-tx::before {
  content: "💡";
  position: absolute;
  left: 14px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
}

/* ── 보조 레이어 컨테이너 — 위 여백 + 상단 점선 구분 ─────────────── */
.asd-persona-extra {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

/* ── 정체성 / 대표 인물 박스 — 연회색 카드 ──────────────────────── */
.asd-extra-block {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 정체성 메시지(🎭) — 좌측 세이지 라인으로 욕망과 결 맞춤 */
.asd-extra-identity { border-left: 3px solid var(--sage); }
/* 대표 인물(👤) — 좌측 중립 라인(보조 정보 톤) */
.asd-extra-persona { border-left: 3px solid var(--line-strong, var(--line)); }
.asd-extra-lab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
}
.asd-extra-tx {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}
.asd-extra-tx b { font-weight: 700; }
/* 작게 흐리게 — 정체성 부제(title) */
.asd-extra-sub {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}
/* 인용 느낌 — 대표 인물 hook */
.asd-extra-hook {
  margin: 2px 0 0;
  padding-left: 10px;
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-2);
  border-left: 2px solid var(--line);
}
/* 페인포인트 ul — 불릿 */
.asd-extra-pains {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.asd-extra-pains li {
  position: relative;
  margin-bottom: 3px;
  padding-left: 12px;
}
.asd-extra-pains li::before {
  content: "·";
  position: absolute;
  left: 3px;
  color: var(--muted);
}
.asd-extra-pains li:last-child { margin-bottom: 0; }
/* 태그 — flex wrap */
.asd-extra-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.asd-extra-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}

/* ── 남성 카드 변형 — 보라 → 파랑 계열 오버라이드 ─────────────────── */
.asd-persona--male .asd-persona-desire-badge {
  color: #0958d9;
  background: #e6f4ff;
  border-color: #91caff;
}
.asd-persona--male .asd-persona-adv {
  background: #e6f4ff;
  border-left-color: #0958d9;
}
.asd-persona--male .asd-persona-adv-tx { color: #0958d9; }

/* ── 모바일 — 표 폰트 11px·1열 폭 축소·검증열 가변 ─────────────── */
@media (max-width: 480px) {
  .asd-hypo-tbl { font-size: 11px; }
  .asd-hypo-tbl th { font-size: 9.5px; padding: 5px 6px; }
  .asd-hypo-tbl td { padding: 5px 6px; }
  .asd-hypo-dim { width: 62px; }
  .asd-hypo-vf { width: 34%; }
  .asd-persona-adv-tx { font-size: 13px; }
}

/* ── 🧠 몰입 카드 토글 (페르소나 헤더 우측) ─────────────────────
   immersion.file 이 있는 카드에만 붙는다. 클릭하면 헤더 아래로
   iframe 패널이 펼쳐지고, 최초 1회만 로드된다(assetdb.js). */
.asd-imm-btn {
  margin-left: auto;                 /* 헤더 오른쪽 끝으로 밀기 */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid #c4b5fd;
  border-radius: 999px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.asd-imm-btn:hover { background: #ede9fe; border-color: #a78bfa; }
.asd-imm-btn-ico { font-size: 13px; line-height: 1; }
.asd-imm-btn-caret {
  font-size: 10px;
  line-height: 1;
  transition: transform .18s ease;
}
.asd-imm-btn.is-open { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.asd-imm-btn.is-open .asd-imm-btn-caret { transform: rotate(180deg); }

.asd-imm-box {
  margin-top: 12px;
  border: 1px solid #ddd6fe;
  border-radius: 12px;
  overflow: hidden;
  background: #faf5ff;
}
.asd-imm-box[hidden] { display: none; }   /* flex/block 규칙에 안 먹히는 것 방지 */
.asd-imm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid #ddd6fe;
  background: #f5f3ff;
}
.asd-imm-bar-tx { font-size: 12.5px; font-weight: 800; color: #5b21b6; }
.asd-imm-open {
  font-size: 12px;
  font-weight: 800;
  color: #6d28d9;
  text-decoration: none;
  white-space: nowrap;
}
.asd-imm-open:hover { text-decoration: underline; }
.asd-imm-frame {
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
  background: #fff;
}
@media (max-width: 640px) {
  .asd-imm-btn { margin-left: 0; }
  .asd-imm-frame { height: 480px; }
}