/* 화면별: 첫 화면 순위·영상, 검색어 상세, 날짜별 기록 — 크기는 GPT 규칙표(모바일/PC) */
.eyebrow { color: var(--muted); font-size: 13px; margin: 24px 0 4px; }
.home-title { font-size: 24px; font-weight: 800; margin: 16px 0 0; letter-spacing: -.01em; }
@media (min-width: 768px) { .home-title { font-size: 28px; } }
.page-title { font-size: 26px; font-weight: 700; }
.page-sub { color: var(--muted); margin: 4px 0 0; }
.meta { color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); padding: 28px 0; }

.tabs { display: flex; gap: 24px; margin: 16px 0 16px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 10px 2px; font-size: 16px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--accent); border-color: var(--accent); }

.layout { display: grid; gap: 28px; margin-top: 12px; }   /* 머리 문구를 지우고 순위·YouTube 를 위로(2026-10-22 폐하 지시) */
@media (min-width: 768px) {
    .page-title { font-size: 32px; }
    .tabs { display: none; }
    .layout.has-side { grid-template-columns: minmax(0, 560px) minmax(280px, 1fr); gap: 32px; }
}
/* 순위 줄 폭 560px(2026-10-22 폐하 지시 "좌우폭 줄여라, 쓸데없이 길다" — 680 → 560) */
@media (min-width: 1200px) { .layout.has-side { grid-template-columns: 560px 1fr; } }

/* 순위 줄: 2026-10-22 폐하 지시로 높이 약 2/3(56 → 38px, 위아래 여백 10 → 5px, 줄 사이 8 → 6px), 순위 28px 칸, 오른쪽 끝 변동 48px */
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank-item a { display: grid; grid-template-columns: 28px 1fr 48px; gap: 12px; align-items: center; min-height: 38px; padding: 5px 14px; background: var(--surface); border-radius: 12px; border: 1px solid var(--line); transition: border-color .15s, background .15s; }
/* 누를 수 있는 줄이라는 표시: 마우스·손가락을 대면 보라 테두리 */
.rank-item a:hover, .rank-item a:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.rank-no { font-size: 18px; font-weight: 700; color: var(--accent); text-align: center; }
.rank-body { min-width: 0; display: grid; gap: 2px; }
.keyword { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }

/* 변동: 상승 빨간 ▲, 하락 파란 ▼, 그대로 –, 새로 NEW — 줄 오른쪽 끝에 맞춤 */
.mv { justify-self: end; display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.mv-new { padding: 2px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 11px; }
.mv-up { color: var(--up); }
.mv-down { color: var(--down); }
.mv-same { color: var(--muted); font-weight: 400; }
.badges .mv { justify-self: auto; }

/* YouTube 인기(오른쪽 열 / 모바일은 순위 다음) */
.side-card { background: var(--surface); border-radius: 12px; padding: 20px; }
.section-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
@media (min-width: 768px) { .section-title { font-size: 22px; } }
.video-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.video-list a { display: grid; grid-template-columns: 20px 120px 1fr; gap: 12px; align-items: start; }
.video-no { font-weight: 700; color: var(--accent); padding-top: 4px; }
.yt-title { display: flex; align-items: center; gap: 8px; }
.yt-icon { width: 28px; height: 20px; flex: none; }
.thumb { aspect-ratio: 16 / 9; border-radius: 8px; background: var(--ad); }
.video-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }

/* 상세: 목록(흰 줄)과 다르게 보라 머리 상자 + 위치 줄 + 칸 제목 왼쪽 보라 막대(2026-10-22 폐하 지시) */
.crumb { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin: 20px 0 12px; }
.crumb a { color: var(--accent); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.detail-hero { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 16px; padding: 20px 22px 4px; margin-bottom: 20px; }
.detail-hero .badges { margin-bottom: 16px; }
.detail-hero .badge { background: var(--surface); }
.detail-hero .badge-rank { background: var(--surface); color: var(--up); }
.detail-wrap .card h2 { border-left: 4px solid var(--accent); padding-left: 10px; line-height: 1.2; }
.btn-outline.btn-solid { background: var(--accent); color: var(--surface); margin-top: 20px; }   /* 뒤의 .btn-outline 글자색(보라)에 덮여 글자가 안 보였음(2026-10-22) */
.detail-label { color: var(--accent); font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.detail-title { font-size: 28px; font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 768px) { .detail-title { font-size: 32px; } }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.badge { padding: 6px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; background: var(--accent-soft); color: var(--accent); }
.badge-rank { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); }
.badge-out { background: var(--ad); color: var(--muted); }
.card { background: var(--surface); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.card h2 { font-size: 20px; margin-bottom: 12px; }
.chart { width: 100%; height: auto; display: block; color: var(--accent); }
.chart text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .grid { stroke: var(--line); }
.btn-outline { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--accent); border-radius: 10px; color: var(--accent); font-size: 14px; font-weight: 600; margin: 8px 0 12px; }
.detail-wrap { max-width: 560px; }

.layout:not(.has-side) { max-width: 560px; }

/* 소개·방침·약관 읽기 화면 */
.doc { max-width: 720px; background: var(--surface); border-radius: 12px; padding: 24px 20px; margin-top: 20px; }
.doc h2 { font-size: 18px; margin: 24px 0 8px; }
.doc ul { padding-left: 20px; margin: 8px 0; }
.doc li { margin: 4px 0; }
.doc a { color: var(--accent); text-decoration: underline; }

/* 정정 요청 양식 */
.form { display: grid; gap: 16px; margin-top: 16px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.form input[type="text"], .form input[type="email"], .form select, .form textarea {
    font: inherit; font-weight: 400; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-height: 44px; }
.form .check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 13px; }
.form .check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.form .hp { position: absolute; left: -9999px; }
.btn-primary { min-height: 52px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
:root[data-theme="dark"] .btn-primary { color: #14151B; }
.form-error { color: var(--up); font-weight: 600; }

/* 상세: 왜 떴나·관련 기사 */
.why-text { font-size: 15px; margin: 0 0 8px; }
.source-list { list-style: none; margin: 0; padding: 0; }
.source-list li + li { border-top: 1px solid var(--line); }
.source-list a { display: grid; gap: 2px; padding: 12px 0; min-height: 44px; }
.source-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 768px) { .source-title { font-size: 16px; } }

/* YouTube 목록 보강 */
.thumb { position: relative; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .dur { position: absolute; right: 4px; bottom: 4px; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; line-height: 1.6; }
.video-body { display: grid; gap: 2px; min-width: 0; }
.video-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-note { margin: 12px 0 0; }

/* 블로그(2026-10-22): 목록은 제목·한 줄 소개·날짜, 글은 읽기 좋은 줄 간격 */
.blog-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.blog-list a { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.blog-list a:hover, .blog-list a:focus-visible { border-color: var(--accent); }
.blog-title { font-size: 17px; font-weight: 700; line-height: 1.4; }
.blog-list .reason { color: var(--muted); font-size: 14px; line-height: 1.5; }
.blog-body { font-size: 16px; line-height: 1.75; }
.blog-body h2 { font-size: 19px; margin: 24px 0 8px; }
.blog-body h3 { font-size: 17px; margin: 20px 0 6px; }
.blog-body p, .blog-body ul, .blog-body ol { margin: 0 0 14px; }
.blog-body a { color: var(--accent); text-decoration: underline; }
.blog-date { margin: 6px 0 14px; }
.blog-body img { max-width: 100%; height: auto; display: block; border-radius: 10px; margin: 8px 0 16px; }