/* 마케팅 스토리 일러스트 테마: 아이보리 + 네이버 그린
   규칙) 초록 = 네이버 화면 요소 / 금·노랑 = 아이엔엠 강조 / 검정 배경 없음 */
.im-story {
  --nv-green: #03c75a;
  --nv-green-deep: #02a84b;
  --nv-green-soft: #e8f8ef;
  --nv-link: #0b57b7;
  --im-ink: #0d2421;
  --im-card: #fffefb;
  --im-line: #e6dfd2;
}

/* ── 앱 화면(블로그 분석·키워드 리서치): 검정 → 흰 카드 ── */
.im-story .im-audit-app {
  color: var(--im-ink);
  background: var(--im-card);
  border: 2px solid var(--im-ink);
  box-shadow: 5px 5px 0 #0d242124;
}
.im-story .im-app-chrome { background: #efeae2; border-bottom: 1px solid var(--im-line); }
.im-story .im-app-chrome span { color: #6f685b; }
.im-story .im-audit-body > small { color: #8a8274; }
.im-story .im-audit-body > strong { color: var(--im-ink); }
.im-story .im-grade { background: #f7f3ea; border: 1px solid var(--im-line); }
.im-story .im-grade > span, .im-story .im-keyword-row > span { color: #2c2820; }
.im-story .im-grade b { color: #c0563f; }
.im-story .im-grade small { color: #8f887b; }
/* 그래프: 네이버 블로그 통계 느낌의 초록 선 */
.im-story .im-chart path:first-child { stroke: #0d24210f; }
.im-story .im-chart path[data-im-draw] { stroke: var(--nv-green); }
.im-story .im-keyword-row { border-top: 1px solid #eee8dc; }
.im-story .im-keyword-row b { color: var(--nv-green-deep); font-weight: 600; }

/* ── 네이버 검색 화면: 초록 N·초록 검색창·초록 탭 ── */
.im-story .im-browser { border: 2px solid var(--im-ink); box-shadow: 5px 5px 0 #0d242124; }
.im-story .im-serp-search { border: 2px solid var(--nv-green); border-radius: 8px; }
.im-story .im-serp-search b { color: var(--nv-green); }
.im-story .im-serp-search svg { stroke: var(--nv-green); }
.im-story .im-search-tabs b { color: #111; border-bottom-color: var(--nv-green); }
.im-story .im-real-result b, .im-story .im-site-lift b { color: var(--nv-link); }
.im-story .im-result-muted b { color: #8d887d; }
.im-story .im-serp-before .im-serp-search { border-color: #bdb6a8; }
.im-story .im-serp-before .im-serp-search b, .im-story .im-serp-before .im-serp-search svg { color: #9b9486; stroke: #9b9486; }
.im-story .im-serp-before .im-search-tabs b { border-bottom-color: #9b9486; }
.im-story .im-serp-now .im-browser { border-color: var(--im-ink); }

/* ── 스마트에디터: 실제처럼 초록 발행 버튼 ── */
.im-story .im-editor-window { border: 2px solid var(--im-ink); box-shadow: 5px 5px 0 #0d242124; }
.im-story .im-editor-publish { background: var(--nv-green); font-weight: 700; }
.im-story .im-editor-toolbar b { color: var(--im-ink); }
.im-story .im-editor-connector path { stroke: #c9a54a; }

/* ── 메모 카드: 사이트 톤의 노란 포스트잇 ── */
.im-story .im-floating-note { background: #fff6d6; border: 1.5px solid var(--im-ink); box-shadow: 4px 4px 0 #0d24211f; }
.im-story .im-floating-note b { color: var(--im-ink); }

/* ── 03 지금 검색: 맨 위 AI 브리핑이 우리 홈페이지를 출처로 인용 ── */
.im-story .im-ai-brief {
  position: relative; z-index: 3; margin-bottom: 8px; padding: 11px 12px 12px;
  background: linear-gradient(135deg, #eefaf3, #f3f7ff); border: 1px solid #bfe9d0; border-radius: 8px;
}
.im-story .im-ai-head { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; color: var(--nv-green-deep); }
.im-story .im-ai-head::before { content: "✦"; font-size: 11px; }
.im-story .im-ai-brief p { font-size: 10.5px; line-height: 1.6; color: #34403a; margin: 6px 0 8px; }
.im-story .im-ai-source {
  display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 700;
  color: #6f5413; background: #f3e3ad; transition: box-shadow .4s ease;
}
/* 홈페이지 카드가 자리 잡으면 출처 표시와 함께 강조 → 인용 관계가 보이게 */
.im-ranked .im-ai-source { box-shadow: 0 0 0 2px #c9a54a; }
@media (max-width: 760px) {
  .im-story .im-ai-brief { padding: 13px 14px; }
  .im-story .im-ai-head { font-size: 12px; }
  .im-story .im-ai-brief p { font-size: 12.5px; }
  .im-story .im-ai-source { font-size: 11px; }
}