@charset "UTF-8";

/* 키워드 분석 — 판다랭크 구조: 요약(큰 검색량 + 지표 한 줄) → 밑줄 탭 → 흰 카드들 */
.an-search { margin-bottom: 16px; }

/* 요약 히어로 — 한 장짜리 카드에 몬스터 점수 링 · 기기 비율 바 · 지표 타일. */
.an-hero { padding: 18px 24px 20px; }
.an-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.an-hero__top h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

.an-hero__body { display: grid; grid-template-columns: 104px minmax(160px, 210px) minmax(0, 1fr); gap: 22px; align-items: center; margin-top: 16px; }

.an-ring { position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--brand) calc(var(--v, 0) * 1%), var(--neutral) 0); }
.an-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.an-ring__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.an-ring__num { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.an-ring__k { margin-top: 2px; font-size: 11px; color: var(--fg-muted); }
.an-ring img { position: absolute; right: -10px; bottom: -6px; z-index: 2; width: 38px; }

.an-hero__k { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--fg-muted); }
.an-hero__v { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.an-hero__v small { margin-left: 3px; font-size: 16px; font-weight: 600; color: var(--fg-muted); }
.an-bar { height: 8px; margin-top: 12px; border-radius: 999px; background: var(--neutral-hover); overflow: hidden; }
.an-bar i { display: block; height: 100%; width: var(--mo, 50%); border-radius: 999px; background: var(--brand); transition: width .4s var(--ease); }
.an-hero__split { margin-top: 6px; font-size: 12.5px; color: var(--fg-muted); }
.an-hero__split b { color: var(--fg-sub); font-weight: 700; }

/* 즐겨찾기 — 켜면 JS 가 채운 별 이미지(star-fill)로 바꾼다. */
.fav-btn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; transition: background .15s; }
.fav-btn:hover { background: var(--neutral); }
.fav-btn .ic { width: 19px; height: 19px; vertical-align: 0; }

.an-hero__note { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--brand-soft); font-size: 13px; font-weight: 600; color: var(--brand-strong); }
.an-hero__note .ic { width: 15px; height: 15px; vertical-align: -2px; }

/* 분야 · 검색 의도는 배지 대신 제목 아래 한 줄로 조용히. */
.an-hero__id { min-width: 0; }
.an-hero__name { display: flex; align-items: center; gap: 4px; }
.an-hero__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; color: var(--fg-muted); }
.an-hero__meta span { cursor: help; }
.an-hero__meta i { font-style: normal; color: var(--fg-faint); }
.an-hero__meta .is-commercial { color: #C2670F; font-weight: 600; }
.an-hero__meta .is-informational { color: var(--brand-strong); font-weight: 600; }
.an-hero__meta .is-mixed { color: var(--fg-sub); font-weight: 600; }

.an-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.an-metrics > div { padding: 12px 14px; border-radius: 12px; background: var(--neutral); }
.an-metrics dt { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--fg-muted); }
.an-metrics dt .ic { width: 14px; height: 14px; vertical-align: -2px; }
.an-metrics dd { margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.an-metrics dd small { margin-left: 2px; font-size: 13px; font-weight: 500; }
.an-metrics dd .up { color: var(--red); } .an-metrics dd .down { color: var(--brand); }
.an-metrics p { margin-top: 2px; font-size: 11.5px; color: var(--fg-faint); }

@media (max-width: 1100px) {
    .an-hero__body { grid-template-columns: 96px minmax(0, 1fr); }
    .an-metrics { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .an-hero__body { grid-template-columns: 1fr; }
    .an-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .an-hero__note { margin-left: 0; }
}

/* 밑줄 탭 */
/* 좁은 화면에서 가로로만 밀리게 한다 — overflow-x 만 주면 세로축도 auto 가 돼
   활성 탭 밑줄(1px)이 넘치는 순간 세로 스크롤바가 생긴다. */
.an-tabs { display: flex; align-items: center; gap: 22px; margin: 22px 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
.an-tab { position: relative; padding: 12px 2px; font-size: 15px; font-weight: 600; color: var(--fg-faint); white-space: nowrap; transition: color .15s; }
.an-tab:hover { color: var(--fg-sub); }
.an-tab em { font-style: normal; margin-left: 2px; padding: 1px 6px; border-radius: 999px; background: var(--neutral); font-size: 11.5px; color: var(--fg-muted); }
.an-tab.is-on { color: var(--fg); }
.an-tab.is-on em { background: var(--brand); color: #fff; }
.an-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--fg); }
.an-tabs__link { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.an-tabs__link .ic { width: 13px; height: 13px; vertical-align: 0; }
.an-panel { display: none; }
.an-panel.is-on { display: block; animation: rise .25s var(--ease) both; }
.an-row { margin-top: 12px; }

.ai-sum { font-size: 16px; font-weight: 700; }
.ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ai-box { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--neutral); }
.ai-box__k { font-size: 12.5px; font-weight: 700; color: var(--fg-muted); margin-bottom: 6px; }
.ai-box li { position: relative; padding-left: 12px; font-size: 13.5px; line-height: 1.6; color: var(--fg-sub); }
.ai-box li + li { margin-top: 4px; }
.ai-box li::before { content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--fg-faint); }
.ai-timing { margin-top: 10px; font-size: 13px; color: var(--fg-muted); }

/* 차트 */
.chart-legend { display: flex; gap: 6px; margin-bottom: 10px; }
.chart-legend .chip { height: 28px; font-size: 12.5px; }
.chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; }
.chart-box { position: relative; height: 260px; }
.chart-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border-radius: var(--radius-sm); background: var(--neutral); }
.chart-foot div { padding: 12px 16px; }
.chart-foot div + div { box-shadow: -1px 0 0 #fff; }
.chart-foot span { display: block; font-size: 12px; color: var(--fg-muted); }
.chart-foot b { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 요약 표 · 글 목록 */
.mini-table th { padding-top: 0; }
.mini-table td { padding: 9px 12px; }
.posts li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-radius: 10px; transition: background .12s; }
.posts__body { flex: 1; min-width: 0; }
.posts__desc { margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.posts__thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--neutral); }
/* 종합분석 두 칸(연관 키워드 10줄 · 블로그 TOP 5) 높이를 맞춘다 — 블로그 5개가 남는 높이를 나눠 갖는다. */
.an-row.grid-2 > .card { display: flex; flex-direction: column; }
.an-row.grid-2 > .card > .card__body { flex: 1; display: flex; flex-direction: column; }
#postMini { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
#postMini li { flex: 1; align-items: center; padding: 12px 10px; }
#postMini .posts__thumb { width: 64px; height: 64px; }
#postList .posts__thumb { width: 88px; height: 66px; }
.posts li:hover { background: var(--neutral); }
.posts__no { flex: none; width: 18px; font-size: 13px; font-weight: 700; color: var(--fg-faint); text-align: center; line-height: 1.6; }
.posts__title { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.posts__title mark { background: none; color: var(--brand); font-weight: 700; }
.posts__meta { margin-top: 2px; font-size: 12px; color: var(--fg-faint); }

/* 검색 사용자 분석 — 판다랭크처럼 작고 조용한 막대, 가장 높은 칸만 색 */
.users { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.users__k { margin-bottom: 14px; font-size: 13px; color: var(--fg-muted); }
/* 성별 · 기기별은 도넛 — 옆 칸(세로 막대)과 같은 높이라 네 칸이 나란히 찬다. */
.donut { position: relative; width: 88px; height: 88px; margin: 0 auto; border-radius: 50%;
    background: conic-gradient(var(--ca) calc(var(--a) * 1%), var(--cb) 0); display: grid; place-items: center; }
.donut::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }
.donut__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.donut__in b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.donut__in i { font-style: normal; font-size: 11px; color: var(--fg-muted); }
.split-legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--fg-muted); }
.split-legend span { display: inline-flex; align-items: center; gap: 4px; }
.split-legend em { width: 7px; height: 7px; border-radius: 50%; }
.split-legend b { color: var(--fg); font-weight: 700; }
.cols { display: flex; align-items: flex-end; gap: 6px; height: 88px; }
.cols__c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.cols__v { font-size: 11px; font-weight: 700; color: var(--fg-sub); visibility: hidden; }
.cols__c.is-top .cols__v { visibility: visible; }
.cols__bar { width: 100%; max-width: 26px; border-radius: 4px 4px 2px 2px; background: #E4E6EA; transition: background .15s; }
.cols__c.is-top .cols__bar { background: var(--brand); }
.cols__c:hover .cols__bar { background: #C9CED6; }
.cols__c.is-top:hover .cols__bar { background: var(--brand-strong); }
.cols__c:hover .cols__v { visibility: visible; }
.cols__l { font-size: 11.5px; color: var(--fg-muted); }
.users__empty { font-size: 13px; color: var(--fg-faint); }

/* 상위 노출 파워링크 — 섹션 배치 카드와 같은 높이를 쓰고, 광고가 많으면 이 안에서 스크롤된다. */
:root { --serp-list-h: 420px; }
.pl-list { display: flex; flex-direction: column; gap: 2px; height: var(--serp-list-h); overflow-y: auto; scrollbar-gutter: stable; }
.pl-list li { display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px; transition: background .12s; }
.pl-list li:hover { background: var(--neutral); }
.pl__no { flex: none; width: 18px; font-size: 12.5px; font-weight: 700; color: var(--fg-faint); text-align: center; line-height: 1.7; }
.pl__body { flex: 1; min-width: 0; }
.pl__head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pl__fav { flex: none; width: 16px; height: 16px; border-radius: 4px; object-fit: contain; background: #fff; }
.pl__title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl__title:hover { color: var(--brand-strong); }
.pl__site { margin-top: 1px; font-size: 11.5px; color: var(--fg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl__site em { font-style: normal; color: var(--fg-muted); }
.pl__desc { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 대표 이미지 한 장 — 블로그 TOP 5 썸네일과 같은 결로 줄 오른쪽에 붙는다. */
.pl__thumb { flex: none; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--neutral); }
.pl__pay { flex: none; height: 18px; padding: 0 5px; border-radius: 4px; background: #E7F7F0; color: var(--brand-strong); font-size: 10.5px; font-weight: 700; line-height: 18px; }

/* 발행량 · 광고 지표 */
.doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.doc-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--neutral); }
.doc__k { font-size: 12.5px; color: var(--fg-muted); }
.doc__v { margin-top: 2px; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 섹션 배치 · 파워링크는 나란히 놓인다 — 목록 높이를 같게 못 박고, 넘치는 쪽만 그 안에서 스크롤한다. */
.sections { counter-reset: s; display: flex; flex-direction: column; gap: 2px; height: var(--serp-list-h); overflow-y: auto; scrollbar-gutter: stable; }
.sections.is-wide { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.sections li { counter-increment: s; display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; font-size: 14px; transition: background .12s; }
.sections li:hover { background: var(--neutral); }
.sections li::before { content: counter(s); flex: none; width: 20px; font-size: 12px; font-weight: 700; color: var(--fg-faint); text-align: center; }
.sections li.is-blog::after, .sections li.is-ad::after { margin-left: auto; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.sections li.is-blog::after { content: "콘텐츠"; background: var(--mint-soft); color: #0E8A6D; }
.sections li.is-ad::after { content: "광고"; background: var(--orange-soft); color: #B86A00; }

.an-tools { display: flex; gap: 6px; }
.an-tools .input { height: 34px; width: 180px; font-size: 13px; border-radius: 999px; }

@media (max-width: 1024px) {
    .an-sum { grid-template-columns: 1fr; }
    .an-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .users { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sections.is-wide { grid-template-columns: 1fr; }
    .an-tools .input { width: 120px; }
}