@charset "UTF-8";

/* ============================================================
 * 키워드몬스터 공통 스타일
 *
 * 판다랭크 결을 따른다:
 *   - 서체는 Pretendard. 굵기로 위계를 만들고 크기는 과하게 키우지 않는다.
 *   - 회색 페이지 위에 흰 카드. 카드는 테두리 · 그림자 없이 12px 둥글기로만 구분한다.
 *   - 무채색은 남색 기운이 도는 한 벌(fg / sub / muted), 포인트는 파랑 하나.
 *   - 호버는 옅은 회색 바탕이 깔리는 정도. 들썩이거나 그림자가 커지지 않는다.
 * ========================================================= */

:root {
    /* 키 컬러 = 캐릭터 "몬" 의 민트 (#34C6A2) 를 한 톤 눌러 흰 글자가 읽히게 한 초록 */
    --brand: #11A876;
    --brand-strong: #0B8F63;
    --brand-soft: #E7F7F0;
    --mint: #2E6BFF;          /* 보조 색은 파랑으로 돌린다 — 키 컬러와 겹치지 않게 */
    --mint-soft: #EEF3FF;
    --violet: #7B61FF;
    --violet-soft: #F0EDFF;
    --orange: #F08C00;
    --orange-soft: #FFF4E0;
    --red: #E5484D;
    --red-soft: #FFEEEE;
    --yellow: #FFC857;

    --fg: #172B4D;
    --fg-sub: #44546F;
    --fg-muted: #626F86;
    --fg-faint: #8590A2;
    --fg-disabled: rgba(9, 30, 66, .31);
    --neutral: rgba(9, 30, 66, .04);
    --neutral-hover: rgba(9, 30, 66, .08);
    --line: #EBECF0;

    --page: #F7F8F9;
    --card: #FFFFFF;

    --radius: 12px;
    --radius-sm: 8px;
    --sidebar-w: 232px;
    --topbar-h: 56px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --shadow-pop: 0 8px 24px rgba(9, 30, 66, .12), 0 0 1px rgba(9, 30, 66, .2);

    /* 이전 이름 호환 — 다른 화면 CSS 가 아직 쓰는 토큰 */
    --blue: var(--brand);
    --blue-strong: var(--brand-strong);
    --blue-soft: var(--brand-soft);
    --blue-line: #D3E0FF;
    --ink: var(--fg);
    --slate: var(--fg-sub);
    --muted: var(--fg-muted);
    --faint: var(--fg-faint);
    --line-soft: #F1F2F4;
    --bg-soft: #F7F8F9;
    --bg-soft2: #F1F2F4;
    --bg-page: var(--page);
    --radius-lg: 12px;
    --radius-xs: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: none; scroll-behavior: smooth; }
body {
    background: var(--page);
    color: var(--fg);
    font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -.005em;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; outline: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--fg); color: #fff; font-size: 13px; }
.skip-link:focus { top: 12px; }

/* 스크롤바 — 기본 회색 막대는 결이 튄다. 평소엔 옅게 두고 손이 닿으면 키 컬러로 짙어진다. */
* { scrollbar-width: thin; scrollbar-color: rgba(9, 30, 66, .18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: rgba(9, 30, 66, .18); background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--brand); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }
:hover > *::-webkit-scrollbar-thumb { background: rgba(9, 30, 66, .26); background-clip: content-box; }

/* ============================================================
 * 앱 셸 — 사이드바 + 상단바
 * ========================================================= */
.shell { display: flex; min-height: 100dvh; }

/* 사이드바만 Paperlogy — 브랜드 결(블로그매트릭 · 트래픽부스터)을 메뉴에 남긴다. 본문은 Pretendard. */
@font-face { font-family: 'Paperlogy'; font-weight: 500; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 600; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-6SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 700; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-7Bold.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 800; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-8ExtraBold.woff2') format('woff2'); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); z-index: 40; font-family: 'Paperlogy', 'Pretendard Variable', sans-serif; }
.sidebar .nav-link { font-weight: 500; letter-spacing: -.01em; }
/* 브랜드 — 마스코트와 글자가 한 장으로 된 로고라 사이드바 가운데에 둔다. */
.sidebar__brand { display: flex; align-items: center; justify-content: center; height: var(--topbar-h); padding: 0 18px; }
.sidebar__brand img { width: auto; height: 34px; }
.brand-word { font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.brand-word em { font-style: normal; color: var(--brand); }

/* 로고와 첫 메뉴가 붙어 보여 위쪽만 조금 띄운다. */
.sidebar__scroll { flex: 1; overflow-y: auto; padding: 16px 10px 16px; }
.nav-group__title { padding: 16px 10px 4px; font-size: 12px; font-weight: 600; color: var(--fg-faint); }
.nav-link { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--fg-sub); transition: background .15s; }
.nav-link .ic { width: 18px; height: 18px; vertical-align: 0; }
.nav-link:hover { background: var(--neutral); }
.nav-link.is-on { background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }
/* 선택된 메뉴의 아이콘은 app.js 가 -brand.png 로 갈아 끼운다 (이미지라 색을 CSS 로 못 바꾼다). */
.nav-flag { margin-left: auto; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; background: var(--red-soft); color: var(--red); }
.nav-flag.is-soon { background: var(--neutral); color: var(--fg-faint); }

.side-plan { position: relative; overflow: hidden; margin: 10px; padding: 14px; border-radius: var(--radius); background: var(--neutral); }
.side-plan__img { position: absolute; right: 6px; bottom: -6px; width: 56px; }
.side-plan__label { font-size: 12px; color: var(--fg-muted); }
.side-plan__name { font-size: 15px; font-weight: 700; }
.side-plan__btn { display: inline-flex; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--brand-strong); }

.main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 28px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar__menu { display: none; width: 36px; height: 36px; border-radius: 8px; align-items: center; justify-content: center; font-size: 20px; }
.topbar__title { font-size: 15px; font-weight: 700; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.quota-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--neutral); font-size: 12.5px; font-weight: 500; color: var(--fg-muted); }
.quota-chip .ic { width: 14px; height: 14px; }
.quota-chip b { color: var(--fg); font-weight: 700; }
.btn-ghost { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--fg-sub); }
.btn-ghost:hover { background: var(--neutral); }

.dd-wrap { position: relative; }
.avatar-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral); overflow: hidden; }
.avatar-btn img { width: 26px; height: 26px; }
.dd { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; padding: 8px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.dd.is-open { opacity: 1; visibility: visible; transform: none; }
.dd__info { display: flex; align-items: center; gap: 10px; padding: 10px; }
.dd__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--neutral); display: grid; place-items: center; }
.dd__avatar img { width: 30px; }
.dd__name { font-size: 14.5px; font-weight: 700; }
.dd__mail { font-size: 12.5px; color: var(--fg-muted); }
.dd__plan { display: flex; justify-content: space-between; margin: 4px 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-soft); font-size: 13px; }
.dd__plan b { color: var(--brand-strong); }
.dd__menu { display: flex; flex-direction: column; }
.dd__item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 13.5px; }
.dd__item:hover { background: var(--neutral); }
.dd__item .ic { width: 18px; height: 18px; vertical-align: 0; }
.dd__logout { display: block; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--fg-muted); }
.dd__logout:hover { background: var(--neutral); }

.content { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px 24px 64px; }

/* ============================================================
 * 공통 부품
 * ========================================================= */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.page-lead { margin-top: 4px; max-width: 64ch; font-size: 14px; color: var(--fg-muted); }

.card { background: var(--card); border-radius: var(--radius); }
.card + .card { margin-top: 12px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
.card__title { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.card__title .accent { color: var(--brand); }
.card__sub { font-size: 13px; font-weight: 400; color: var(--fg-muted); }
.card__body { padding: 16px 24px 24px; }
.card__more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--fg-muted); }
.card__more:hover { color: var(--fg); }
/* 글씨 옆 화살표는 기본 18px 이면 글자보다 커 보인다 — 글자 크기에 맞춘다. */
.card__more .ic { width: 13px; height: 13px; vertical-align: -2px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.grid-2 > .card + .card, .grid-3 > .card + .card, .grid-4 > .card + .card { margin-top: 0; }

.stat { padding: 16px 18px; border-radius: var(--radius); background: #fff; }
.stat__k { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--fg-muted); }
.stat__v { margin-top: 4px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat__v small { margin-left: 2px; font-size: 14px; font-weight: 500; color: var(--fg-sub); }
.stat__sub { margin-top: 2px; font-size: 12px; color: var(--fg-faint); }
.stat.is-accent .stat__v { color: var(--brand); }

.tip { position: relative; display: inline-flex; width: 14px; height: 14px; border-radius: 50%; background: rgba(9, 30, 66, .14); color: #fff; font-size: 10px; font-weight: 700; align-items: center; justify-content: center; cursor: help; }
.tip__body { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 240px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--fg); color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.55; text-align: left; white-space: normal; opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 20; }
.tip:hover .tip__body, .tip:focus .tip__body { opacity: 1; visibility: visible; }

/* 등급 라벨 — 판다랭크 "매우 높음" 처럼 옅은 바탕 + 같은 계열 글자 */
.grade { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 4px; font-size: 12px; font-weight: 600; background: var(--neutral); color: var(--fg-sub); }
.grade.is-very-low, .grade.is-very-good { background: var(--mint-soft); color: #0E8A6D; }
.grade.is-low, .grade.is-good { background: var(--brand-soft); color: var(--brand-strong); }
.grade.is-normal { background: var(--orange-soft); color: #B86A00; }
.grade.is-high, .grade.is-bad { background: #FFF0E8; color: #D4541E; }
.grade.is-very-high, .grade.is-very-bad { background: var(--red-soft); color: #C9373C; }
.grade.is-unknown { background: var(--neutral); color: var(--fg-faint); }

/* 칩 · 세그먼트 — 판다랭크 알약 버튼 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--neutral); font-size: 13px; font-weight: 600; color: var(--fg-sub); transition: background .15s; }
.chip:hover { background: var(--neutral-hover); }
.chip.is-on { background: var(--brand-soft); color: var(--brand-strong); }
.chip:disabled { opacity: .5; cursor: not-allowed; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--neutral); }
.seg__btn { height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--fg-disabled); transition: background .15s, color .15s; }
.seg__btn:hover { color: var(--fg-sub); }
.seg__btn.is-on { background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }

/* 입력 · 버튼 */
.input, .select { height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: 14.5px; transition: border-color .15s, box-shadow .15s; }
.input:focus, .select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(46, 107, 255, .12); }
.input::placeholder { color: var(--fg-disabled); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 700; white-space: nowrap; transition: background .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }
.btn-dark { background: var(--fg); color: #fff; }
.btn-dark:hover { background: #253858; }
.btn-line { background: var(--neutral); color: var(--fg-sub); }
.btn-line:hover { background: var(--neutral-hover); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: default; }
.link-arrow { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; font-weight: 600; color: var(--brand); }
.link-arrow:hover { color: var(--brand-strong); }

/* 검색창 — 판다랭크: 옅은 회색 알약 + 오른쪽 파란 버튼 */
.search-box { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 6px 0 8px; border: 1px solid transparent; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s; }
.search-box:focus-within { box-shadow: 0 0 0 2px var(--brand); }
.search-box__engine { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--neutral); }
.engine-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 7px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--fg-disabled); transition: background .15s, color .15s; }
.engine-btn svg { width: 16px; height: 16px; flex: none; filter: grayscale(1); opacity: .45; transition: filter .15s, opacity .15s; }
.engine-btn.is-on svg, .engine-btn:hover svg { filter: none; opacity: 1; }
.engine-btn.is-on { background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.engine-btn.is-on[data-engine="NAVER"] { color: #03A94D; }
.engine-btn.is-on[data-engine="GOOGLE"] { color: #3B78E7; }
.search-box__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 16px; padding: 0 6px; }
.search-box__input::placeholder { color: var(--fg-disabled); }
.search-box__input:focus-visible { outline: none; }
.search-box__btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 16px 0 13px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 14.5px; font-weight: 700; transition: background .15s; }
.search-box__btn:hover { background: var(--brand-strong); }
.search-box__btn .ic { width: 18px; height: 18px; vertical-align: 0; }

/* 표 — 선 없이 여백으로. 머리글은 작은 회색 */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 10px 12px; text-align: right; white-space: nowrap; }
.table th { font-size: 13px; font-weight: 500; color: var(--fg-muted); border-bottom: 1px solid var(--line); }
.table th.is-sort { cursor: pointer; }
.table th.is-sort:hover { color: var(--fg); }
.table th[aria-sort="descending"]::after { content: " ↓"; color: var(--brand); }
.table th[aria-sort="ascending"]::after { content: " ↑"; color: var(--brand); }
.table th:first-child, .table td:first-child { text-align: left; }
.table td.kw { font-weight: 600; color: var(--fg); }
.table td.kw a:hover { color: var(--brand); }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--neutral); }
.table tbody tr:hover td:first-child { border-radius: 8px 0 0 8px; }
.table tbody tr:hover td:last-child { border-radius: 0 8px 8px 0; }
.table .muted { color: var(--fg-faint); }

.locked { position: relative; }
.locked__blur { filter: blur(5px); pointer-events: none; user-select: none; }
.locked__cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(255, 255, 255, .7); text-align: center; padding: 20px; }
.locked__cover img { width: 60px; }
.locked__title { font-size: 15px; font-weight: 700; }
.locked__desc { font-size: 13px; color: var(--fg-muted); }

/* 카드 안 빈 상태 — 표 한 줄로 흘리지 않고 카드 가운데(세로도 가운데)에 캐릭터와 함께 놓는다.
   남는 높이를 카드 → 본문 → 표·목록·칩 순으로 물려줘야 그 안에서 가운데로 갈 수 있다. */
/* 불러오는 중 — 크기 규칙이 없으면 마스코트 원본(1024px)이 그대로 깔려 화면을 덮는다. */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; }
.loading img { width: 92px; animation: km-bob 1.6s ease-in-out infinite; }
.loading__text { font-size: 13.5px; color: var(--fg-muted); }

/* 빈 상태가 든 카드만 세로로 편다 — 모든 .card 를 flex 로 바꾸면 form.card 처럼
   스스로 display 를 쓰는 카드가 망가진다(키워드 확장 폼이 그렇게 찌그러졌다). */
.card:has(.card-empty) { display: flex; flex-direction: column; }
.card:has(.card-empty) > .card__body { flex: 1; min-height: 0; }
.card__body:has(.card-empty) { display: flex; flex-direction: column; }
.card__body:has(.card-empty) > * { flex: 1; min-height: 0; }
.table-wrap:has(.card-empty) { display: flex; }
.table:has(.card-empty) { flex: 1; }
td:has(.card-empty) { height: 100%; vertical-align: middle; }
li:has(> .card-empty) { flex: 1; }
.card-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px 16px; text-align: center; height: 100%; }
.card-empty img { width: 72px; }
.card-empty p { font-size: 13px; color: var(--fg-muted); }
td .card-empty { padding: 20px 16px; }

/* 아이콘 — 아이콘 폰트 · SVG 대신 PNG 한 장씩 쓴다 (assets/image/icon). 색은 파일로 나뉜다: 기본 회색 · -brand · -white. */
.ic { display: inline-block; flex: none; width: 18px; height: 18px; object-fit: contain; vertical-align: -3px; }
.ic-sm { width: 14px; height: 14px; vertical-align: -2px; }
.ic-md { width: 20px; height: 20px; }
.ic-lg { width: 22px; height: 22px; vertical-align: -4px; }
.ic-xl { width: 26px; height: 26px; vertical-align: -5px; }

/* 한도 안내 — 표를 가리는 커버 대신 표 아래에 여유 있게 놓는 한 줄 배너. */
.upsell { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 20px 22px; border-radius: var(--radius); background: var(--brand-soft); }
.upsell__art { flex: none; width: 58px; }
.upsell__body { flex: 1; min-width: 0; }
.upsell__title { font-size: 15px; font-weight: 700; }
.upsell__desc { margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--fg-sub); }
.upsell__btn { flex: none; }
@media (max-width: 620px) { .upsell { flex-direction: column; text-align: center; gap: 12px; } }

.empty { padding: 48px 20px; text-align: center; }
.empty img { width: 96px; margin: 0 auto 10px; }
.empty__title { font-size: 16px; font-weight: 700; }
.empty__desc { margin: 4px auto 0; max-width: 46ch; font-size: 14px; color: var(--fg-muted); }

.sk { display: block; border-radius: 6px; background: linear-gradient(100deg, #F1F2F4 30%, #F8F9FA 50%, #F1F2F4 70%); background-size: 220% 100%; animation: sk-shine 1.3s ease-in-out infinite; }
.sk-line { height: 12px; margin: 6px 0; }
.sk-line.is-lg { height: 26px; }
.sk-line.is-w40 { width: 40%; } .sk-line.is-w60 { width: 60%; } .sk-line.is-w80 { width: 80%; }
.sk-box { height: 220px; border-radius: var(--radius-sm); }
/* 차트 자리 스켈레톤 — 회색 덩어리 하나로는 그래프로 안 보인다. 눈금선 · 꺾은선 실루엣 · 축 라벨을 같이 깐다. */
.sk-chart { position: relative; height: 260px; }
.sk-chart__grid { position: absolute; inset: 0 0 24px 0; background-image: repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 25%); }
.sk-chart__area { position: absolute; inset: 20px 0 24px 0; border-radius: 0;
    clip-path: polygon(0 74%, 9% 58%, 18% 67%, 27% 41%, 36% 52%, 45% 30%, 55% 44%, 64% 24%, 73% 37%, 82% 18%, 91% 29%, 100% 12%, 100% 100%, 0 100%); }
.sk-chart__labels { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; }
.sk-chart__labels .sk { width: 30px; height: 10px; margin: 0; }
@keyframes sk-shine { from { background-position: 180% 0; } to { background-position: -20% 0; } }
@keyframes km-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .35s var(--ease) both; }

.ad-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 16px; border-radius: var(--radius); background: #fff; }
.ad-banner__tag { flex: none; padding: 1px 5px; border-radius: 4px; background: var(--neutral); font-size: 10.5px; font-weight: 700; color: var(--fg-faint); }
.ad-banner__text { flex: 1; font-size: 13.5px; color: var(--fg-sub); }
.ad-banner__text b { color: var(--fg); }
.ad-banner__cta { flex: none; font-size: 13px; font-weight: 600; color: var(--brand); }
.ad-banner__close { flex: none; font-size: 12px; color: var(--fg-faint); }

.modal-dim { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(9, 30, 66, .4); }
.modal-dim.is-open { display: flex; }
.modal { width: 100%; max-width: 380px; padding: 24px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-pop); text-align: center; animation: rise .25s var(--ease) both; }
.modal__art { width: 84px; margin: 0 auto 10px; }
.modal__title { font-size: 17px; font-weight: 700; }
.modal__desc { margin-top: 6px; font-size: 14px; color: var(--fg-muted); line-height: 1.6; }
.modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.modal__actions.is-one { grid-template-columns: 1fr; }
.robot-faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.robot-face { padding: 6px; border-radius: var(--radius); background: var(--neutral); transition: background .15s, box-shadow .15s; }
.robot-face:hover { background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand); }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); z-index: 1100; padding: 11px 16px; border-radius: 999px; background: var(--fg); color: #fff; font-size: 13.5px; font-weight: 600; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.powered { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fg-faint); }
.powered b { color: var(--fg-muted); font-weight: 600; }

/* 차트 툴팁 — app.js 의 KM.chartTooltip 이 그린다 */
.km-tt { position: absolute; z-index: 50; min-width: 120px; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-pop); pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); transition: opacity .12s; font-size: 12.5px; }
.km-tt__title { margin-bottom: 4px; font-weight: 600; color: var(--fg-muted); }
.km-tt__row { display: flex; align-items: center; gap: 6px; }
.km-tt__row i { width: 8px; height: 8px; border-radius: 50%; }
.km-tt__row span { color: var(--fg-sub); }
.km-tt__row b { margin-left: auto; padding-left: 12px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
/* 보조 줄 — 기기별 분해 · 직전 구간 대비 증감 (kmDetail) */
.km-tt__sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; padding-left: 14px; font-size: 12px; color: var(--fg-faint); }
.km-tt__sub:first-of-type { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.km-tt__sub b { margin-left: auto; padding-left: 12px; font-weight: 600; color: var(--fg-sub); font-variant-numeric: tabular-nums; }
.km-tt__sub.is-up b { color: var(--red); }
.km-tt__sub.is-down b { color: var(--brand); }

/* 푸터 — 판다랭크: 흰 바탕, 영문 머리 + 한글 부제의 링크 열, 아래 가운데 정책 · 사업자 정보 */
/* 푸터 — 홈 화면에만. 판다랭크처럼 배경 없이 얇은 선 하나, 왼쪽 메뉴 열 / 오른쪽 사업자 정보. */
.footer { padding: 0 24px 40px; font-size: 12px; color: var(--fg-muted); }
.footer__inner { display: flex; justify-content: space-between; gap: 40px; max-width: 1080px; margin: 0 auto; padding-top: 28px; border-top: 1px solid var(--line); }
.footer__cols { display: flex; gap: 44px; }
.footer__col { display: flex; flex-direction: column; gap: 9px; }
.footer__head { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--fg); }
.footer__head span { margin-left: 2px; font-weight: 400; color: var(--fg-muted); }
.footer__col a { width: fit-content; font-size: 12px; color: var(--fg-muted); transition: color .15s; }
.footer__col a:hover { color: var(--fg); }
.footer__side { flex: none; text-align: right; }
.footer__legal { display: flex; justify-content: flex-end; gap: 14px; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--fg); }
.footer__legal a:hover { color: var(--brand-strong); }
.footer__info { font-size: 12px; line-height: 1.9; color: var(--fg-muted); }
.footer__info span { margin-left: 8px; }
.footer__copy { margin-top: 4px; font-size: 12px; color: var(--fg-muted); }
@media (max-width: 1024px) {
    .footer__inner { flex-direction: column; }
    .footer__cols { flex-wrap: wrap; gap: 24px 32px; }
    .footer__side { text-align: left; }
    .footer__legal { justify-content: flex-start; }
}

.side-dim { display: none; }
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s var(--ease); }
    body.side-open .sidebar { transform: none; }
    body.side-open .side-dim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(9, 30, 66, .3); }
    .main { margin-left: 0; }
    .topbar { padding: 0 16px; }
    .topbar__menu { display: inline-flex; }
    .content { padding: 16px 16px 48px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .quota-chip { display: none; }
    .card__head { padding: 18px 18px 0; }
    .card__body { padding: 14px 18px 20px; }
}
@media (max-width: 560px) {
    .grid-4 { grid-template-columns: 1fr 1fr; }
    .search-box { height: 48px; }
    .search-box__btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}