/* UTOP MARINA — 프론트엔드 SEO·AEO·GEO 적용영역 시각화 오버레이
   data-insight="seo|aeo|geo" + data-insight-label="..." 가 붙은 요소를 강조한다. */

.insight-toggle-wrap{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.insight-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;border-radius:999px;
  padding:12px 20px;font-size:13px;font-weight:800;color:#fff;font-family:Pretendard,sans-serif;
  background:linear-gradient(90deg,#2563eb,#0d9488 55%,#d97706);box-shadow:0 12px 30px -10px rgba(0,0,0,.55)}
.insight-btn:hover{filter:brightness(1.07)}

.insight-legend{display:none;width:300px;border-radius:18px;background:#fff;color:#1f2d3a;
  padding:18px 18px 16px;box-shadow:0 24px 60px -18px rgba(0,0,0,.5);font-family:Pretendard,sans-serif}
body.insight-on .insight-legend{display:block}
.insight-legend h4{font-size:14px;font-weight:800;margin:0}
.insight-legend p.sub{font-size:11px;color:#64748b;margin:4px 0 12px}
.insight-row{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px solid #eef1f4}
.insight-dot{width:12px;height:12px;border-radius:4px;margin-top:3px;flex:0 0 auto}
.insight-row b{font-size:12.5px}
.insight-row span{display:block;font-size:11px;color:#64748b}
.insight-row em{font-style:normal;margin-left:auto;font-size:11px;font-weight:700;color:#94a3b8}
.insight-trust{margin-top:12px;padding-top:11px;border-top:1px solid #eef1f4;font-size:11.5px;color:#334155;line-height:1.5}

/* 강조 대상 */
[data-insight="seo"]{--ic:#2563eb}
[data-insight="aeo"]{--ic:#0d9488}
[data-insight="geo"]{--ic:#d97706}
body.insight-on [data-insight]{position:relative;outline:2px dashed var(--ic);outline-offset:7px;border-radius:10px;
  box-shadow:0 0 0 7px color-mix(in srgb, var(--ic) 11%, transparent);transition:box-shadow .3s ease}

.insight-tag{display:none;position:absolute;top:-12px;left:14px;z-index:30;
  font-size:10px;font-weight:800;letter-spacing:.03em;color:#fff;background:var(--ic);
  padding:3px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 5px 14px rgba(0,0,0,.3);
  font-family:Pretendard,sans-serif}
body.insight-on .insight-tag{display:inline-block}

@media (max-width:640px){ .insight-legend{width:260px} }
@media (prefers-reduced-motion:reduce){ body.insight-on [data-insight]{transition:none} }