/* ════════════════════════════════════════════════════════════════
   소재 데이터베이스 (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);
}

/* ── 탭 토글 (언더라인형 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-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; }

/* ════════════════════════════════════════════════════════════════
   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: hidden;
}

/* ── 좌: 계층 트리 ────────────────────────────────────────────── */
.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: 28px 20px;
  align-self: stretch;
  font-size: 13px;
}
.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;
  }
}

/* ≤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: wrap;
  gap: 8px;
}
/* 채널 칩 — 세이지 틴트(분류 강조 화이트리스트) */
.asd-ref-item-channel {
  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-ref-item-owner {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
/* 액션(수정/삭제) — 우측 정렬, 텍스트 버튼 */
.asd-ref-item-acts {
  margin-left: 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: 3px;
}
.asd-ref-item-field-lab {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.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;
}

/* ── ⭐ 타겟 연관성 강조(읽기) — 좌측 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;
}
.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-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); }
.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;
}

/* ── 아코디언 섹션 (.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; }

/* ── 편집뷰 헤더(← 목록으로) ──────────────────────────────────── */
.asd-plan-editor-head {
  display: flex;
  align-items: center;
  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;
  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; }
}