/* guide-visual: 플랫폼·이카운트 안내 페이지 시각 요소 (2026-10-20) */
:root{--gv:#3182f6;--gv-soft:#eef5ff;--gv-ink:#191f28;--gv-sub:#6b7684;--gv-line:#e5e8eb}
body.gv-page .hero{position:relative}
body.gv-page .hero .eyebrow{display:table;margin-bottom:14px;background:var(--gv-soft);color:var(--gv);padding:6px 12px;border-radius:999px;font-weight:700}
body.gv-page .hero h1{background:linear-gradient(transparent 68%,var(--gv-soft) 68%);display:inline}
body.gv-page .panel h2 .gv-e{margin-right:8px;font-size:.95em}
body.gv-page .toc{border-left:4px solid var(--gv)}
.gv-hero-img{margin:24px auto 4px;max-width:640px;border-radius:20px;overflow:hidden;background:var(--gv-soft)}
.gv-hero-img img{display:block;width:100%;height:auto}
/* 흐름도 */
.gv-flow{list-style:none;margin:18px 0 22px;padding:0;display:flex;gap:10px;flex-wrap:wrap;counter-reset:none}
.gv-flow li{flex:1 1 120px;position:relative;background:var(--gv-soft);border-radius:16px;padding:14px 12px 12px;text-align:center;min-width:0}
.gv-flow li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--gv);font-weight:800;font-size:18px;z-index:1}
.gv-flow .e{display:block;font-size:28px;line-height:1.2;margin-bottom:6px}
.gv-flow b{display:block;font-size:15px;line-height:1.4;color:var(--gv-ink)}
.gv-flow small{display:block;font-size:13px;line-height:1.45;color:var(--gv-sub);margin-top:4px}
@media(max-width:640px){.gv-flow{flex-direction:column}.gv-flow li{display:grid;grid-template-columns:44px 1fr;text-align:left;align-items:center;column-gap:8px;padding:12px}.gv-flow .e{grid-row:span 2;margin:0;text-align:center}.gv-flow li:not(:last-child)::after{content:"↓";right:auto;left:26px;top:auto;bottom:-15px;transform:none}}
/* 막대그래프 */
.gv-chart{margin:18px 0 22px;padding:18px 18px 12px;border:1px solid var(--gv-line);border-radius:18px;background:#fff}
.gv-chart>p.gv-t{margin:0 0 12px;font-weight:800;font-size:16px;color:var(--gv-ink)}
.gv-bar{display:grid;grid-template-columns:minmax(84px,30%) 1fr auto;align-items:center;gap:10px;margin:0 0 10px}
.gv-bar .l{font-size:14px;color:var(--gv-ink);line-height:1.35}
.gv-bar .t{height:16px;background:#f2f4f6;border-radius:99px;overflow:hidden}
.gv-bar .t i{display:block;height:100%;border-radius:99px;background:var(--gv);transform-origin:left;animation:gvGrow .9s ease-out both}
.gv-bar b{font-size:15px;white-space:nowrap;color:var(--gv-ink)}
.gv-chart small.gv-n{display:block;color:var(--gv-sub);font-size:13px;margin-top:4px}
@keyframes gvGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.gv-bar .t i{animation:none}}
/* 비율 띠 */
.gv-split{margin:18px 0 22px;padding:18px;border:1px solid var(--gv-line);border-radius:18px;background:#fff}
.gv-split>p.gv-t{margin:0 0 12px;font-weight:800;font-size:16px}
.gv-split .band{display:flex;height:42px;border-radius:12px;overflow:hidden}
.gv-split .band span{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;min-width:0;white-space:nowrap;overflow:hidden}
.gv-split ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px}
.gv-split li{font-size:14px;color:var(--gv-ink)}
.gv-split li i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
/* 큰 숫자 */
.gv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0 22px}
.gv-stats div{background:var(--gv-soft);border-radius:16px;padding:16px 14px}
.gv-stats .e{font-size:22px}
.gv-stats b{display:block;font-size:24px;line-height:1.25;color:var(--gv);margin:4px 0 2px;letter-spacing:-.02em}
.gv-stats span{display:block;font-size:14px;line-height:1.45;color:var(--gv-ink)}
/* 팁·주의 상자 */
.gv-call{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:start;border-radius:16px;padding:16px 16px 14px;margin:16px 0}
.gv-call .e{font-size:22px;line-height:1.3}
.gv-call p{margin:0;font-size:16px;line-height:1.7}
.gv-call.tip{background:#e8f8ee}.gv-call.tip b{color:#0b7a3e}
.gv-call.warn{background:#fff4e5}.gv-call.warn b{color:#b45309}
.gv-call.key{background:var(--gv-soft)}.gv-call.key b{color:var(--gv)}
body.gv-page p.note{background:#fff8e1;border-left:4px solid #f5b400;border-radius:10px;padding:12px 14px}
body.gv-page .faq summary::before{content:"💬 "}
body.gv-page .table-wrap thead th{background:var(--gv-soft);color:var(--gv-ink)}
/* 실제 화면 캡처 */
.gv-shot{margin:18px 0 22px;border:1px solid var(--gv-line);border-radius:14px;overflow:hidden;background:#fff}
.gv-shot img{display:block;width:100%;height:auto}
.gv-shot figcaption{padding:10px 14px;font-size:13px;color:var(--gv-sub);border-top:1px solid var(--gv-line)}
/* 허브 목록 이모지 */
.ec-list .ee{margin-right:6px}
.gv-inline{margin:20px auto 22px;max-width:560px}
/* 결론부터 직답 (AEO) */
.gv-answer{margin:16px 0 6px;padding:14px 16px;border-radius:14px;background:#fffbe8;border:1px solid #f5d76e;font-size:17px;line-height:1.7;color:#191f28}
.gv-answer b{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:999px;background:#191f28;color:#fff;font-size:13px;vertical-align:2px}
/* 작성자 상자 (E-E-A-T) */
.gv-author{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:start}
.gv-author img{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--gv-soft)}
.gv-author b{font-size:16px}.gv-author p{margin:6px 0 8px;font-size:15px;line-height:1.65;color:#4e5968}