/* ============================================================
   whereispost 새 디자인 v2 — "클린 미니멀 + 다크 사이드바" (2026-10 확정 시안)
   ui_head.php 스위치가 켜졌을 때만 로드되고, 모든 규칙은 html.ui2 아래에서만 동작한다.
   0단계: 디자인 토큰 + 공통 부품   1단계: 공통 틀(사이드바·헤더·본문 바탕)
   ============================================================ */

/* ---------- 0. 디자인 토큰 ---------- */
html.ui2 {
	--ui-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	--ui-ink: #111111;      /* 제목·강조 글자 */
	--ui-ink-2: #333333;    /* 본문 글자 */
	--ui-sub: #666666;      /* 보조 설명 */
	--ui-faint: #999999;    /* 라벨·캡션 */
	--ui-line: #ececec;     /* 카드·표 테두리 */
	--ui-line-2: #f3f3f3;   /* 표 행 구분 */
	--ui-bg: #ffffff;       /* 본문 바탕 */
	--ui-soft: #fafafa;     /* 옅은 면 */
	--ui-accent: #111111;   /* 주 버튼 */
	--ui-accent-h: #000000;
	--ui-side: #212730;     /* 사이드바 (현재 사이트 색 유지) */
	--ui-side-2: #2f3742;   /* 사이드바 선택 */
	--ui-side-h: #2a313b;   /* 사이드바 hover */
	--ui-side-text: #c9d1d9;
	--ui-side-faint: #7d8794;
	--ui-good: #15803d; --ui-good-bg: #f0fdf4; --ui-good-bd: #bbf7d0;
	--ui-soso: #a16207; --ui-soso-bg: #fefce8; --ui-soso-bd: #fde68a;
	--ui-bad:  #b91c1c; --ui-bad-bg:  #fef2f2; --ui-bad-bd:  #fecaca;
	--ui-up:   #16a34a;
	--ui-r: 12px;           /* 카드 모서리 */
	--ui-r-sm: 8px;         /* 버튼·입력 모서리 */
}

/* ---------- 0. 기본 글꼴·글자 ---------- */
html.ui2 body,
html.ui2 .sidebar,
html.ui2 .buger_menu {
	font-family: var(--ui-font);
	-webkit-font-smoothing: antialiased;
}
html.ui2 body { background: var(--ui-side); color: var(--ui-ink-2); }
html.ui2 input, html.ui2 button, html.ui2 select, html.ui2 textarea { font-family: inherit; }

/* ---------- 0. 공통 부품 (2단계에서 페이지 마크업에 쓰는 클래스) ---------- */
/* 페이지 머리: 작은 분류 + 큰 제목 + 설명 */
html.ui2 .ui-hero { margin: 0 0 22px; }
html.ui2 .ui-eyebrow { font-size: 12px; font-weight: 600; color: #888; }
html.ui2 .ui-title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--ui-ink); margin: 6px 0; line-height: 1.25; }
html.ui2 .ui-desc { font-size: 15px; color: var(--ui-sub); margin: 0; }

/* 검색창: 테두리 박스 안에 입력 + 검정 버튼 */
html.ui2 .ui-search {
	display: flex; align-items: center; gap: 6px;
	max-width: 620px; height: 48px; padding: 0 6px 0 16px;
	border: 1px solid #e3e3e3; border-radius: 10px; background: #fff;
}
html.ui2 .ui-search:focus-within { border-color: #bdbdbd; }
html.ui2 .ui-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; font-size: 15px; color: var(--ui-ink); background: transparent; }
html.ui2 .ui-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 36px; padding: 0 18px; border: 0; border-radius: 7px;
	background: var(--ui-accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
html.ui2 .ui-btn:hover { background: var(--ui-accent-h); }
html.ui2 .ui-btn.ghost { background: #fff; color: var(--ui-ink); border: 1px solid #e3e3e3; }

/* 카드 */
html.ui2 .ui-card { background: #fff; border: 1px solid var(--ui-line); border-radius: var(--ui-r); padding: 18px 20px; }

/* 수치 묶음: 테두리 박스를 세로선으로 나눔 */
html.ui2 .ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: 1px solid var(--ui-line); border-radius: var(--ui-r); background: #fff; }
html.ui2 .ui-stat { padding: 18px 22px; border-left: 1px solid var(--ui-line); }
html.ui2 .ui-stat:first-child { border-left: 0; }
html.ui2 .ui-stat-label { display: block; font-size: 12px; color: #888; }
html.ui2 .ui-stat-value { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ui-ink); margin: 4px 0; }
html.ui2 .ui-stat-note { display: block; font-size: 12px; color: var(--ui-up); }

/* 표 */
html.ui2 .ui-table { width: 100%; border-collapse: collapse; }
html.ui2 .ui-table th { font-size: 12px; font-weight: 600; color: #888; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ui-line); background: transparent; }
html.ui2 .ui-table td { font-size: 14px; color: var(--ui-ink-2); padding: 13px 12px; border-bottom: 1px solid var(--ui-line-2); }

/* 상태 배지 */
html.ui2 .ui-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--ui-line); background: var(--ui-soft); color: var(--ui-ink-2); }
html.ui2 .ui-badge.good { color: var(--ui-good); border-color: var(--ui-good-bd); background: var(--ui-good-bg); }
html.ui2 .ui-badge.soso { color: var(--ui-soso); border-color: var(--ui-soso-bd); background: var(--ui-soso-bg); }
html.ui2 .ui-badge.bad  { color: var(--ui-bad);  border-color: var(--ui-bad-bd);  background: var(--ui-bad-bg); }

/* 섹션 제목·본문 */
html.ui2 .ui-h2 { font-size: 16px; font-weight: 700; color: var(--ui-ink); margin: 0 0 10px; }
html.ui2 .ui-text { font-size: 14px; line-height: 1.7; color: var(--ui-sub); }

/* ---------- 1. 공통 틀: PC 상단 헤더 제거 ---------- */
/* display:none 대신 '화면에서만 숨김' — 헤더의 h1(페이지 제목)은 문서에 그대로 남아 검색엔진·스크린리더가 읽는다 */
@media (min-width: 1001px) {
	html.ui2 body > header {
		position: absolute !important; width: 1px !important; height: 1px !important;
		margin: -1px !important; padding: 0 !important; overflow: hidden !important;
		clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
	}
}

/* ---------- 1. 공통 틀: 모바일 상단 바 (1000px 이하) ---------- */
@media (max-width: 1000px) {
	html.ui2 .header { background: var(--ui-side); display: flex; align-items: center; justify-content: space-between; height: 52px; }
	html.ui2 .navybar { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 16px; }
	html.ui2 .navybar a { text-decoration: none; }
	html.ui2 .navybar h1 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; padding: 0; margin: 0; color: #fff; white-space: nowrap; }
	html.ui2 .navybar .title_s { font-size: 12px; color: var(--ui-side-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	html.ui2 .header .burger { float: none; margin-right: 6px; }
	/* 햄버거 메뉴 펼침 목록 */
	html.ui2 .buger_menu { background: var(--ui-side); }
	html.ui2 .buger_menu .inner ul { padding: 6px 12px 12px; margin: 0; }
	html.ui2 .buger_menu .inner ul li { list-style: none; border: 0; padding: 0; margin: 2px 0; }
	html.ui2 .buger_menu .inner ul li a { display: flex; align-items: center; padding: 10px 10px; border-radius: 7px; font-size: 15px; color: var(--ui-side-text); text-decoration: none; }
	html.ui2 .buger_menu .inner ul li a span { width: 18px; margin-right: 12px !important; color: var(--ui-side-faint); font-size: 14px; }
	html.ui2 .buger_menu .inner ul li a.menu-active { background: var(--ui-side-2); color: #fff; }
	html.ui2 .buger_menu .inner ul li a.menu-active span { color: #fff; }
}

/* ---------- 1. 공통 틀: 다크 사이드바 (pcmenu.php) ---------- */
html.ui2 .sidebar { width: 240px; background: var(--ui-side); }
html.ui2 .sidebar .inner { padding: 22px 12px 18px; }

/* 브랜드 (pcmenu.php 의 .ws-brand — v2 에서만 표시) */
html.ui2 .ws-brand { display: flex; align-items: center; gap: 10px; margin: 0 8px 18px; text-decoration: none; }
html.ui2 .ws-brand .ws-logo { width: 26px; height: 26px; border-radius: 7px; background: #fff; color: var(--ui-side); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
html.ui2 .ws-brand b { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }

/* 메뉴 목록 */
html.ui2 .sidebar .inner ul.menu-ul { padding: 0; margin: 0; }
html.ui2 .sidebar .inner ul li { margin: 1px 0; padding: 0; font-size: 14px; border: 0; }
html.ui2 .sidebar .inner ul li.menu-label {
	margin: 18px 10px 6px; padding: 0; border: 0;
	font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--ui-side-faint); text-transform: none;
}
html.ui2 .sidebar .inner ul li.menu-label:first-child { margin-top: 0; }
html.ui2 .sidebar .menu-li a {
	display: flex; align-items: center;
	padding: 8px 10px; border-radius: 7px;
	color: var(--ui-side-text); text-decoration: none; font-weight: 400;
}
html.ui2 .sidebar .menu-li a:hover { background: var(--ui-side-h); color: #fff; }
html.ui2 .sidebar .menu-li a span { width: 16px; margin-right: 10px; color: var(--ui-side-faint); font-size: 13px; text-align: center; }
html.ui2 .sidebar .inner ul li a.menu-active,
html.ui2 .sidebar .menu-li a.menu-active {
	background: var(--ui-side-2); color: #fff; font-weight: 600;
	box-shadow: inset 3px 0 0 #fff;
}
html.ui2 .sidebar .menu-li a.menu-active span { color: #fff; }
html.ui2 .sidebar .new-badge { margin-left: 6px; }

/* 사이드바 하단 프로모션 카드 (pcmenu.php 의 .wt-banner) — 흰 카드 유지, 여백만 사이드바에 맞춤 */
html.ui2 .sidebar .wt-banner { margin: 14px 4px 0; }
html.ui2 .sidebar .wt-banner a { border-radius: var(--ui-r); border-color: transparent; }

/* ---------- 1. 공통 틀: 본문 바탕 ---------- */
html.ui2 .wrap { background: var(--ui-bg); color: var(--ui-ink-2); }

/* ============================================================
   2단계 — 본문 공통 (html.ui-page : ui_head.php 의 $UI_PAGES_DONE 에 든 페이지만)
   ============================================================ */
html.ui2.ui-page .wrap .content { max-width: 1480px; padding: 36px 44px 48px; color: var(--ui-ink-2); }
@media (max-width: 1000px) { html.ui2.ui-page .wrap .content { padding: 20px 16px 36px; } }
html.ui2.ui-page .ui-title { font-size: 30px; }
@media (max-width: 1000px) { html.ui2.ui-page .ui-title { font-size: 24px; } html.ui2.ui-page .ui-hero { margin-bottom: 16px; } }

/* 상단 안내 바 (기존 노란 alert) → 옅은 회색 안내 */
html.ui2.ui-page .wrap .alert,
html.ui2.ui-page .wrap .alert-warning,
html.ui2.ui-page .wrap .alert-info {
	background: var(--ui-soft); border: 1px solid var(--ui-line); border-radius: 10px;
	color: var(--ui-ink-2); padding: 12px 16px; margin: 0 0 18px;
}
html.ui2.ui-page .wrap .alert > div { font-size: 14px !important; font-weight: 500 !important; color: var(--ui-ink-2) !important; }
html.ui2.ui-page .wrap .alert a { color: var(--ui-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* 검색창 (form.search) → 테두리 입력 + 검정 버튼 */
html.ui2.ui-page .wrap form.search { max-width: 620px; padding: 0; margin: 0 0 22px; flex-wrap: wrap; }
html.ui2.ui-page .wrap form.search input[type=text] {
	height: 48px; padding: 0 16px; font-size: 15px; color: var(--ui-ink);
	border: 1px solid #e3e3e3; border-right: 0; border-radius: 10px 0 0 10px; background: #fff;
}
html.ui2.ui-page .wrap form.search input[type=text]:focus { border-color: #bdbdbd; outline: 0; }
html.ui2.ui-page .wrap form.search button {
	height: 48px; padding: 0 22px !important; border: 1px solid var(--ui-accent); border-radius: 0 10px 10px 0;
	background: var(--ui-accent); color: #fff; font-size: 14px; font-weight: 600;
}
html.ui2.ui-page .wrap form.search button:hover { background: var(--ui-accent-h); }
html.ui2.ui-page .wrap form.search .cf-turnstile { flex-basis: 100%; justify-content: flex-start !important; }

/* 소개(SEO) 섹션: "~란?" 제목 + 카드 */
html.ui2.ui-page .wrap .content > h2,
html.ui2.ui-page .wrap .content h2:has(+ .box) {
	font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.02em;
	color: var(--ui-ink); padding: 0; margin: 34px 0 12px;
}
html.ui2.ui-page .wrap .box {
	background: #fff; border: 1px solid var(--ui-line); border-radius: var(--ui-r); box-shadow: none;
	padding: 20px 22px; margin: 0 0 12px; font-size: 14px; line-height: 1.75; color: #555;
}
html.ui2.ui-page .wrap .box h2 { font-size: 18px !important; font-weight: 800 !important; margin: 0 0 10px; padding: 0; color: var(--ui-ink); }
html.ui2.ui-page .wrap .box h3 { font-size: 16px !important; font-weight: 700 !important; color: var(--ui-ink); margin: 0 0 10px; }
html.ui2.ui-page .wrap .box h3:not(:first-child) { margin-top: 18px; }
html.ui2.ui-page .wrap .box p, html.ui2.ui-page .wrap .box li { font-size: 14px; line-height: 1.75; }
html.ui2.ui-page .wrap .box strong { color: var(--ui-ink); }
html.ui2.ui-page .wrap .box a { color: var(--ui-ink) !important; text-decoration: underline; text-underline-offset: 2px; }

/* 하단 푸터 */
html.ui2.ui-page .wrap .footer_desc { width: auto; max-width: 1480px; border-top: 1px solid var(--ui-line); margin: 0 44px; padding: 18px 0 6px; }
html.ui2.ui-page .wrap .footer_util { font-size: 13px; color: var(--ui-faint); text-align: center; padding: 0 0 28px; }
html.ui2.ui-page .wrap .footer_util a { color: var(--ui-sub); text-decoration: none; }
html.ui2.ui-page .wrap .footer_util a:hover { color: var(--ui-ink); text-decoration: underline; }

/* ============================================================
   2단계 — 키워드마스터 (/keyword)
   ============================================================ */
/* 결과 표 */
html.ui2[data-ui-page="keyword"] #result { background: #fff; border: 1px solid var(--ui-line); border-radius: var(--ui-r); border-collapse: separate; border-spacing: 0; }
html.ui2[data-ui-page="keyword"] #result thead th:first-child { border-top-left-radius: var(--ui-r); }
html.ui2[data-ui-page="keyword"] #result thead th:last-child { border-top-right-radius: var(--ui-r); }
html.ui2[data-ui-page="keyword"] #result th {
	background: var(--ui-soft); color: #888; font-size: 12px; font-weight: 600;
	padding: 11px 12px; border: 0; border-bottom: 1px solid var(--ui-line);
}
html.ui2[data-ui-page="keyword"] #result td {
	font-size: 14px; color: var(--ui-ink-2); padding: 12px 12px;
	border: 0; border-bottom: 1px solid var(--ui-line-2);
	font-variant-numeric: tabular-nums;
}
html.ui2[data-ui-page="keyword"] #result tbody tr:last-child td { border-bottom: 0; }
html.ui2[data-ui-page="keyword"] #result tr:hover { background: var(--ui-soft); }
html.ui2[data-ui-page="keyword"] #result td a { color: var(--ui-ink); font-weight: 600; }
html.ui2[data-ui-page="keyword"] #result td a:hover { color: var(--ui-ink); text-decoration: underline; }
html.ui2[data-ui-page="keyword"] #result td button {
	width: 22px; height: 22px; padding: 0 !important; border: 1px solid #e3e3e3; border-radius: 6px;
	background: #fff; color: #999; font-size: 13px; line-height: 1; cursor: pointer;
}
html.ui2[data-ui-page="keyword"] #result td button:hover { color: var(--ui-bad); border-color: var(--ui-bad-bd); background: var(--ui-bad-bg); }
html.ui2[data-ui-page="keyword"] .content > div:has(> #result) { padding: 0 !important; }

/* 블로그 출처 배지 N·T·D·E */
html.ui2[data-ui-page="keyword"] #result .naver,
html.ui2[data-ui-page="keyword"] #result .tistory,
html.ui2[data-ui-page="keyword"] #result .daum,
html.ui2[data-ui-page="keyword"] #result .etc {
	display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 5px;
	font-size: 11px; font-weight: 700; color: #fff;
}
html.ui2[data-ui-page="keyword"] #result .naver { background: #03c75a; }
html.ui2[data-ui-page="keyword"] #result .tistory { background: #f05a28; }
html.ui2[data-ui-page="keyword"] #result .daum { background: #2f80ed; }
html.ui2[data-ui-page="keyword"] #result .etc { background: #b8b8b8; }
html.ui2[data-ui-page="keyword"] #result .naver:hover, html.ui2[data-ui-page="keyword"] #result .tistory:hover,
html.ui2[data-ui-page="keyword"] #result .daum:hover, html.ui2[data-ui-page="keyword"] #result .etc:hover { background-color: var(--ui-ink) !important; }

/* 순위 미리보기 툴팁 */
html.ui2[data-ui-page="keyword"] .tooltip .tooltiptext {
	width: 380px; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 10px;
	background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.10); text-align: left; font-size: 13px; line-height: 1.6;
}

/* 엑셀 다운로드 → 보조 버튼 */
html.ui2[data-ui-page="keyword"] #excel {
	width: max-content !important; display: none; margin-top: 10px; padding: 8px 14px; border: 1px solid #e3e3e3; border-radius: 8px;
	background: #fff; font-size: 13px; font-weight: 600;
}
html.ui2[data-ui-page="keyword"] #excel span { color: var(--ui-ink) !important; }
html.ui2[data-ui-page="keyword"] #excel:hover { background: var(--ui-soft); }
html.ui2[data-ui-page="keyword"] #excel span::before { content: '⤓ '; }

/* 관련키워드: 제목 + 칩 */
html.ui2[data-ui-page="keyword"] #relkey_on > h2 {
	display: flex; align-items: center; gap: 10px;
	font-size: 16px !important; font-weight: 700 !important; color: var(--ui-ink); padding: 0; margin: 0 0 10px;
}
html.ui2[data-ui-page="keyword"] #relkey_on .copy-tags { color: var(--ui-ink-2); }
html.ui2[data-ui-page="keyword"] #relkey_on .copy-tags .copy-tags {
	border: 1px solid #e3e3e3 !important; border-radius: 99px; padding: 3px 10px !important;
	background: #fff !important; font-size: 12px !important; font-weight: 600; margin: 0 !important;
}
html.ui2[data-ui-page="keyword"] #relkey_on .copy-tags .copy-tags:hover { background: var(--ui-soft) !important; color: var(--ui-ink); }
html.ui2[data-ui-page="keyword"] #relkey_on .box { padding: 14px 16px; margin-bottom: 20px; }
html.ui2[data-ui-page="keyword"] #relkey { display: flex; flex-wrap: wrap; gap: 6px; }
html.ui2[data-ui-page="keyword"] #relkey li { list-style: none; margin: 0; display: inline-flex; }
html.ui2[data-ui-page="keyword"] #relkey li a {
	display: inline-block; padding: 5px 11px; border: 1px solid var(--ui-line); border-radius: 99px;
	background: #fff; color: var(--ui-ink-2) !important; font-size: 13px; text-decoration: none !important;
}
html.ui2[data-ui-page="keyword"] #relkey li a:hover { border-color: #bdbdbd; color: var(--ui-ink) !important; background: var(--ui-soft); }

/* 모바일: 표 글자·여백 줄임 */
@media (max-width: 1000px) {
	html.ui2[data-ui-page="keyword"] #result th, html.ui2[data-ui-page="keyword"] #result td { padding: 10px 8px; font-size: 13px; }
}

/* ============================================================
   2단계 — 공통: 부트스트랩 카드(.card) 정리 (완료 페이지)
   ============================================================ */
html.ui2.ui-page .wrap .card {
	max-width: none !important; border: 1px solid var(--ui-line); border-radius: var(--ui-r);
	box-shadow: none !important; background: #fff; margin: 0 0 12px !important; overflow: hidden;
}
html.ui2.ui-page .wrap .card-header {
	background: #fff; border-bottom: 1px solid var(--ui-line); padding: 14px 20px;
	font-size: 15px; font-weight: 700 !important; color: var(--ui-ink);
}
html.ui2.ui-page .wrap .card-body { padding: 18px 20px; color: #555; }
html.ui2.ui-page .wrap .card-body .blockquote,
html.ui2.ui-page .wrap .card-body blockquote { font-size: 14px !important; line-height: 1.75; color: #555; margin: 0; }
html.ui2.ui-page .wrap .card-body p, html.ui2.ui-page .wrap .card-body li { font-size: 14px; line-height: 1.75; }
html.ui2.ui-page .wrap .card-body > h2 { font-size: 18px !important; font-weight: 800 !important; color: var(--ui-ink); margin: 0 0 10px; }
html.ui2.ui-page .wrap .card-body > h3 { font-size: 16px !important; font-weight: 700 !important; color: var(--ui-ink); margin: 18px 0 8px; }
html.ui2.ui-page .wrap .card-body a { color: var(--ui-ink); text-decoration: underline; text-underline-offset: 2px; }
html.ui2.ui-page .wrap code { background: var(--ui-soft); border: 1px solid var(--ui-line); border-radius: 5px; padding: 1px 5px; color: var(--ui-ink); font-size: 12.5px; }

/* 상태 배지 (부트스트랩 bg-*-opacity 조합 → v2 배지) — checkpost.php 응답과 안내 문구 공통 */
html.ui2.ui-page .wrap span.bg-success.bg-opacity-10,
html.ui2.ui-page .wrap span.bg-warning.bg-opacity-10,
html.ui2.ui-page .wrap span.bg-danger.bg-opacity-10,
html.ui2.ui-page .wrap span.bg-primary.bg-opacity-10 {
	display: inline-block; font-size: 12px; font-weight: 600 !important; line-height: 1.4 !important;
	padding: 3px 9px !important; border-radius: 99px !important; border: 1px solid;
}
html.ui2.ui-page .wrap span.bg-success.bg-opacity-10 { background: var(--ui-good-bg) !important; color: var(--ui-good) !important; border-color: var(--ui-good-bd); }
html.ui2.ui-page .wrap span.bg-warning.bg-opacity-10 { background: var(--ui-soso-bg) !important; color: var(--ui-soso) !important; border-color: var(--ui-soso-bd); }
html.ui2.ui-page .wrap span.bg-danger.bg-opacity-10  { background: var(--ui-bad-bg) !important;  color: var(--ui-bad) !important;  border-color: var(--ui-bad-bd); }
html.ui2.ui-page .wrap span.bg-primary.bg-opacity-10 { background: #fff !important; color: var(--ui-ink) !important; border-color: #d4d4d4; cursor: pointer; }

/* 페이지 번호 */
html.ui2.ui-page .wrap .pagination { gap: 4px; margin: 16px 0 6px; }
html.ui2.ui-page .wrap .pagination .page-link {
	min-width: 34px; height: 34px; padding: 0 10px; display: grid; place-items: center;
	border: 1px solid var(--ui-line); border-radius: 8px !important; background: #fff; color: var(--ui-ink-2); font-size: 13px; box-shadow: none;
}
html.ui2.ui-page .wrap .pagination .page-link:hover { background: var(--ui-soft); color: var(--ui-ink); }
html.ui2.ui-page .wrap .pagination .page-item.active .page-link { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }

/* ============================================================
   2단계 — 웨어이즈포스트 메인 (/)
   ============================================================ */
/* 조회한 블로그 카드 */
html.ui2[data-ui-page="home"] .card-header h2 { font-size: 18px !important; font-weight: 800; color: var(--ui-ink); }
html.ui2[data-ui-page="home"] .card-header h2 .fa-home { color: var(--ui-faint); margin-right: 4px; }
html.ui2[data-ui-page="home"] .card-header h2 a { color: var(--ui-faint); font-size: 14px; }

/* 글 목록 표 */
html.ui2[data-ui-page="home"] .table-responsive { border: 1px solid var(--ui-line); border-radius: var(--ui-r); background: #fff; margin-bottom: 4px; }
html.ui2[data-ui-page="home"] .table-responsive > table.table { margin: 0; border: 0 !important; box-shadow: none !important; background: #fff; }
html.ui2[data-ui-page="home"] table.table th {
	background: var(--ui-soft); color: #888; font-size: 12px; font-weight: 600;
	padding: 11px 12px; border-bottom: 1px solid var(--ui-line); white-space: nowrap;
}
html.ui2[data-ui-page="home"] table.table td { padding: 13px 12px; border-bottom: 1px solid var(--ui-line-2); vertical-align: middle; font-size: 14px; color: var(--ui-ink-2); }
html.ui2[data-ui-page="home"] table.table tbody tr:last-child td { border-bottom: 0; }
html.ui2[data-ui-page="home"] table.table tbody tr:hover td { background: var(--ui-soft); }
html.ui2[data-ui-page="home"] table.table td:first-child { color: var(--ui-faint); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.ui2[data-ui-page="home"] table.table td > div:first-child { font-weight: 600; color: var(--ui-ink); margin-bottom: 6px; }
html.ui2[data-ui-page="home"] table.table .post-link { color: var(--ui-faint); font-size: 12px; margin-left: 4px; }
html.ui2[data-ui-page="home"] table.table .post-link:hover { color: var(--ui-ink); }
/* #태그 → 칩 (누르면 순위 체크) */
html.ui2[data-ui-page="home"] table.table .tags {
	display: inline-block; margin: 0 2px 4px 0; padding: 2px 8px; border: 1px solid var(--ui-line); border-radius: 99px;
	background: #fff; color: var(--ui-sub); font-size: 12px; cursor: pointer;
}
html.ui2[data-ui-page="home"] table.table .tags:hover { border-color: #bdbdbd; color: var(--ui-ink); background: var(--ui-soft); }
/* 순위 입력칸 */
html.ui2[data-ui-page="home"] table.table input.rank {
	height: 32px; border: 1px solid #e3e3e3; border-radius: 7px !important; font-size: 13px; box-shadow: none;
}
html.ui2[data-ui-page="home"] table.table input.rank:focus { border-color: #bdbdbd; }
/* 검색량 숫자 */
html.ui2[data-ui-page="home"] table.table .k-pc, html.ui2[data-ui-page="home"] table.table .k-mo { color: var(--ui-ink-2) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html.ui2[data-ui-page="home"] table.table .k-sum { color: var(--ui-ink) !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
/* 메인: 표 머리 아래 부트스트랩 굵은 선 제거 */
html.ui2[data-ui-page="home"] table.table > :not(:first-child) { border-top: 0 !important; }
/* 메인: 순위 칸 — 입력 + 검색 버튼(결과 순위도 이 칸에 표시됨) */
html.ui2[data-ui-page="home"] table.table .input-group { flex-wrap: nowrap; }
html.ui2[data-ui-page="home"] table.table input.rank { border-radius: 7px 0 0 7px !important; }
html.ui2[data-ui-page="home"] table.table .checkrank {
	height: 32px; min-width: 50px; width: auto !important; display: inline-flex !important; align-items: center; justify-content: center;
	padding: 0 10px; border: 1px solid #e3e3e3; border-left: 0; border-radius: 0 7px 7px 0 !important;
	background: #fff !important; color: var(--ui-ink) !important; font-size: 13px; font-weight: 600 !important; cursor: pointer;
}
html.ui2[data-ui-page="home"] table.table .checkrank:hover { background: var(--ui-soft) !important; }
/* 키워드마스터: 순위 배지(최대 10개)가 줄바꿈되지 않게 */
html.ui2[data-ui-page="keyword"] #result td.pcw { white-space: nowrap; }
html.ui2[data-ui-page="keyword"] #result th.pcw { width: 260px !important; }
html.ui2[data-ui-page="keyword"] #result .tooltip { margin-right: 2px !important; }

/* ============================================================
   2단계 — 형태소 분석기 (/morpheme)
   페이지 안에 별도 리디자인 CSS(!important 다수)가 있어 여기서도 !important 로 덮는다
   ============================================================ */
html.ui2[data-ui-page="morpheme"] .wrap .content.p-4 { padding: 36px 44px 48px !important; }
@media (max-width: 1000px) { html.ui2[data-ui-page="morpheme"] .wrap .content.p-4 { padding: 20px 16px 36px !important; } }

/* 소개 카드 */
html.ui2[data-ui-page="morpheme"] .card { border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r) !important; box-shadow: none !important; }
html.ui2[data-ui-page="morpheme"] .card-header {
	background: #fff !important; color: var(--ui-ink) !important; border-bottom: 1px solid var(--ui-line) !important;
	border-radius: var(--ui-r) var(--ui-r) 0 0 !important; font-size: 15px; font-weight: 700; padding: 14px 20px;
}
html.ui2[data-ui-page="morpheme"] .card-body .blockquote p { font-size: 14px !important; color: #555 !important; margin: 0; }

/* 입력·결과 칸 라벨 */
html.ui2[data-ui-page="morpheme"] .row .mt-3 { color: var(--ui-ink); font-size: 13px; font-weight: 700; }
html.ui2[data-ui-page="morpheme"] .mb-1 { font-size: 13px; font-weight: 700; color: var(--ui-ink) !important; margin-bottom: 8px !important; }
html.ui2[data-ui-page="morpheme"] .mb-1 #test_cnt { font-weight: 500; color: var(--ui-faint); }
html.ui2[data-ui-page="morpheme"] .fa-question-circle { color: #c4c4c4; }

/* 입력창 */
html.ui2[data-ui-page="morpheme"] textarea.form-control {
	border: 1px solid #e3e3e3 !important; border-radius: var(--ui-r) !important; padding: 14px 16px !important;
	font-size: 15px !important; line-height: 1.7; color: var(--ui-ink) !important; box-shadow: none !important;
}
html.ui2[data-ui-page="morpheme"] textarea.form-control:focus { border-color: #bdbdbd !important; box-shadow: none !important; }

/* 분석 버튼 */
html.ui2[data-ui-page="morpheme"] .btn-analyze {
	height: 48px; padding: 0 18px !important; margin-top: 4px;
	background: var(--ui-accent) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important;
	box-shadow: none !important; font-size: 15px !important; font-weight: 600 !important; filter: none !important;
}
html.ui2[data-ui-page="morpheme"] .btn-analyze:hover { background: var(--ui-accent-h) !important; }

/* 결과·감정·금칙어·태그 클라우드 상자 */
html.ui2[data-ui-page="morpheme"] .result-box,
html.ui2[data-ui-page="morpheme"] .badtext-box,
html.ui2[data-ui-page="morpheme"] .emotional-box,
html.ui2[data-ui-page="morpheme"] #tag-cloud {
	border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r) !important; background: #fff !important;
	padding: 14px 16px !important; box-shadow: none !important; font-size: 14px; font-weight: 400; color: #555;
}
html.ui2[data-ui-page="morpheme"] .result-box .table { margin: 0; }
html.ui2[data-ui-page="morpheme"] .result-box .table td { padding: 6px 4px !important; font-size: 14px; color: var(--ui-ink-2); border: 0; border-bottom: 1px solid var(--ui-line-2); }
html.ui2[data-ui-page="morpheme"] .result-box .table tr:last-child td { border-bottom: 0; }
html.ui2[data-ui-page="morpheme"] .text-primary { color: var(--ui-ink) !important; font-weight: 700 !important; }
html.ui2[data-ui-page="morpheme"] .badtext-box .text-danger { color: var(--ui-bad) !important; font-weight: 600; }

/* 감정 비율 막대: 단색 초록/빨강 */
html.ui2[data-ui-page="morpheme"] .progress { border-radius: 99px !important; background: var(--ui-line-2) !important; height: 28px !important; }
html.ui2[data-ui-page="morpheme"] .progress-bar { font-size: 12px; font-weight: 600 !important; }
html.ui2[data-ui-page="morpheme"] .progress-bar.bg-success { background: var(--ui-up) !important; }
html.ui2[data-ui-page="morpheme"] .progress-bar.bg-danger { background: #dc2626 !important; }

/* 태그 클라우드: 무채색 + 초록·파랑 포인트 */
html.ui2[data-ui-page="morpheme"] ul.cloud a { --color: var(--ui-ink); }
html.ui2[data-ui-page="morpheme"] ul.cloud li:nth-child(2n+1) a { --color: #6b7280; }
html.ui2[data-ui-page="morpheme"] ul.cloud li:nth-child(3n+1) a { --color: var(--ui-up); }
html.ui2[data-ui-page="morpheme"] ul.cloud li:nth-child(4n+1) a { --color: #2563eb; }

/* 소개 섹션: 페이지 CSS 의 보라색 h3 → 공통 검정 */
html.ui2[data-ui-page="morpheme"] .wrap .box h3 { color: var(--ui-ink) !important; }
html.ui2[data-ui-page="morpheme"] .wrap .content > h2 { margin-top: 34px !important; }
/* 형태소: 넓은 화면에서 3단(입력 · 감정/결과/금칙어 · 키워드 클라우드)이 본문 폭을 꽉 채우게 */
@media (min-width: 1200px) {
	html.ui2[data-ui-page="morpheme"] .row.mb-5 { flex-wrap: nowrap; }
	html.ui2[data-ui-page="morpheme"] .row.mb-5 > [class*="col-"] { flex: 1 1 0; max-width: none; width: auto; }
	html.ui2[data-ui-page="morpheme"] .row.mb-5 > [class*="col-"]:first-child { flex-grow: 1.6; }
}

/* ============================================================
   2단계 — 공통: 부트스트랩 p-4 본문 여백 (형태소·블로그 지수 등)
   ============================================================ */
html.ui2.ui-page .wrap .content.p-4 { padding: 36px 44px 48px !important; }
@media (max-width: 1000px) { html.ui2.ui-page .wrap .content.p-4 { padding: 20px 16px 36px !important; } }

/* ============================================================
   2단계 — 블로그 지수 (/level)
   ============================================================ */
/* 검색: [블로그 주소 | 입력 | 확인] */
html.ui2[data-ui-page="level"] .row[style*="38rem"] { max-width: 620px !important; margin: 0 0 22px !important; }
html.ui2[data-ui-page="level"] .row[style*="38rem"] form { padding: 0; margin: 0 !important; }
html.ui2[data-ui-page="level"] .row[style*="38rem"] .input-group { box-shadow: none !important; margin: 0 !important; flex-wrap: nowrap; }
html.ui2[data-ui-page="level"] .row[style*="38rem"] .input-group-text {
	height: 48px; background: var(--ui-soft); border: 1px solid #e3e3e3; border-right: 0;
	border-radius: 10px 0 0 10px; color: var(--ui-sub); font-size: 13px; font-weight: 600; padding: 0 14px;
}
html.ui2[data-ui-page="level"] .row[style*="38rem"] .form-control {
	height: 48px; border: 1px solid #e3e3e3; border-left: 0; border-right: 0; border-radius: 0 !important;
	font-size: 15px; color: var(--ui-ink); box-shadow: none !important;
}
html.ui2[data-ui-page="level"] .row[style*="38rem"] .form-control:focus { border-color: #bdbdbd; }
html.ui2[data-ui-page="level"] .row[style*="38rem"] .input-group > button {
	height: 48px; border-radius: 0 10px 10px 0 !important; padding: 0 22px !important; font-size: 14px;
}

/* 소제목 (🏠 블로그 이름, 🚥 최근 포스트, 🔥 포스팅 분석 …) */
html.ui2[data-ui-page="level"] .text-black.fw-bold.fs-5 { font-size: 16px !important; font-weight: 700 !important; color: var(--ui-ink) !important; margin: 4px 0 10px !important; }

/* 그림자 흰 상자 → 테두리 카드 */
html.ui2[data-ui-page="level"] .bg-white.shadow {
	box-shadow: none !important; border: 1px solid var(--ui-line); border-radius: var(--ui-r);
}
html.ui2[data-ui-page="level"] .text-secondary { color: #888 !important; font-size: 12px; }
html.ui2[data-ui-page="level"] .bg-white.shadow .fs-5 { font-size: 20px !important; font-weight: 800 !important; color: var(--ui-ink) !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
html.ui2[data-ui-page="level"] .bg-white.shadow .fa-question-circle { color: #c4c4c4; }

/* 최근 포스트 표 */
html.ui2[data-ui-page="level"] table.table.bg-white.shadow { border-collapse: separate; border-spacing: 0; overflow: visible; }
html.ui2[data-ui-page="level"] table.table > :not(:first-child) { border-top: 0 !important; }
html.ui2[data-ui-page="level"] table.table th {
	background: var(--ui-soft); color: #888; font-size: 12px; font-weight: 600; padding: 11px 12px;
	border-bottom: 1px solid var(--ui-line); white-space: nowrap;
}
html.ui2[data-ui-page="level"] table.table thead th:first-child { border-top-left-radius: var(--ui-r); }
html.ui2[data-ui-page="level"] table.table thead th:last-child { border-top-right-radius: var(--ui-r); }
html.ui2[data-ui-page="level"] table.table td { padding: 12px 12px; font-size: 14px; color: var(--ui-ink-2); border-bottom: 1px solid var(--ui-line-2); vertical-align: middle; }
html.ui2[data-ui-page="level"] table.table tbody tr:last-child td { border-bottom: 0; }
html.ui2[data-ui-page="level"] table.table tbody tr:hover td { background: var(--ui-soft); }
html.ui2[data-ui-page="level"] table.table td:first-child { color: var(--ui-faint); font-size: 13px; white-space: nowrap; }
html.ui2[data-ui-page="level"] table.table td a.text-black { color: var(--ui-ink) !important; font-weight: 600; }
html.ui2[data-ui-page="level"] table.table td a.text-black:hover { text-decoration: underline !important; }
html.ui2[data-ui-page="level"] .detail-view {
	display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e3e3e3; border-radius: 8px;
	background: #fff; color: var(--ui-ink) !important; cursor: pointer; font-size: 12px;
}
html.ui2[data-ui-page="level"] .detail-view:hover { background: var(--ui-soft); border-color: #bdbdbd; }

/* 포스팅 분석 · 형태소 · 스타일 분석 칸의 표 */
html.ui2[data-ui-page="level"] table.table-border { background: #fff; border: 1px solid var(--ui-line); border-radius: var(--ui-r); border-collapse: separate; border-spacing: 0; }
/* 블로그 지수: 확인 버튼 (예전 공통 규칙의 보라색 덮기) */
html.ui2[data-ui-page="level"] .row[style*="38rem"] .input-group > button,
html.ui2[data-ui-page="level"] .row[style*="38rem"] .input-group > button:hover {
	background: var(--ui-accent) !important; border: 1px solid var(--ui-accent) !important; color: #fff !important; font-weight: 600;
}
/* 블로그 지수: 스타일 분석(글 구성 순서) 블록 — 무채색 + 이미지·인용·링크만 옅은 포인트 */
html.ui2[data-ui-page="level"] .preview { display: flex; flex-direction: column; gap: 3px; background: transparent; }
html.ui2[data-ui-page="level"] .preview > div {
	margin: 0 !important; padding: 3px 8px; border-radius: 6px; font-size: 12px; line-height: 20px; text-align: center;
	background: var(--ui-line-2); color: var(--ui-sub);
}
html.ui2[data-ui-page="level"] .preview > .se-image { background: #e8f0fb; color: #4b6b94; }
html.ui2[data-ui-page="level"] .preview > .se-quotation { background: var(--ui-good-bg); color: var(--ui-good); }
html.ui2[data-ui-page="level"] .preview > .se-oglink { background: var(--ui-soso-bg); color: var(--ui-soso); }
/* 블로그 지수 모바일: 큰 숫자·레벨 배지가 칸을 넘지 않게 */
@media (max-width: 1000px) {
	html.ui2[data-ui-page="level"] .bg-white.shadow .fs-5 { font-size: 16px !important; }
	html.ui2[data-ui-page="level"] .bg-white.shadow .row.m-2 { margin: 4px !important; }
	html.ui2[data-ui-page="level"] .bloglevel, html.ui2[data-ui-page="level"] .bloglevel * { white-space: nowrap; }
}

/* ============================================================
   2단계 — 실시간 검색어 (/hot, /hot/issue, /hot/history)
   두 스타일시트(hot/index.php 인라인, hot/hot-pages.css)가 색을 변수로 쓰므로 변수만 v2 값으로 바꾸고,
   하드코딩된 그라데이션·큰 모서리·그림자만 따로 덮는다
   ============================================================ */
html.ui2[data-ui-page="hot"] .hp {
	/* /hot 메인 변수 */
	--hp-primary: #111111; --hp-primary-d: #000000; --hp-primary-l: #f3f3f3;
	--hp-ink: #111111; --hp-ink-2: #333333; --hp-sub: #666666; --hp-faint: #999999;
	--hp-line: #ececec; --hp-line-2: #f3f3f3; --hp-soft: #fafafa;
	/* 하위 페이지 변수 */
	--p: #111111; --pl: #f3f3f3; --ink: #111111; --ink2: #333333; --sub: #666666; --faint: #999999;
	--line: #ececec; --line2: #f3f3f3; --soft: #fafafa;
	font-family: var(--ui-font) !important;
	max-width: 1480px; margin: 0; padding: 36px 44px 48px;
}
@media (max-width: 1000px) { html.ui2[data-ui-page="hot"] .hp { padding: 20px 16px 36px; } }
/* 숫자 전용 Inter 글꼴 → Pretendard 로 통일 (아이콘 글꼴은 건드리지 않음) */
html.ui2[data-ui-page="hot"] .hp :is(.rank-num, .hp-chip strong, .tab-btn .n, .news-time, .hp-hero-title, h1, h2, h3, .stat b, .tm, .snap-t, .snap-list .n, .tbl td.num) { font-family: var(--ui-font) !important; font-variant-numeric: tabular-nums; }

/* 카드: 큰 모서리·그림자 → 12px 테두리 카드 */
html.ui2[data-ui-page="hot"] .hp-card,
html.ui2[data-ui-page="hot"] .hp-sponsor,
html.ui2[data-ui-page="hot"] .hp-about-box,
html.ui2[data-ui-page="hot"] .hp .card,
html.ui2[data-ui-page="hot"] .hp .ws-sponsor { border-radius: var(--ui-r) !important; box-shadow: none !important; }

/* 머리: 카드형 히어로 → 다른 페이지와 같은 글자형 머리 */
html.ui2[data-ui-page="hot"] .hp-hero { background: transparent; border: 0; padding: 0; margin-bottom: 22px; box-shadow: none; align-items: flex-end; }
html.ui2[data-ui-page="hot"] .hp-hero-ic { display: none; }
html.ui2[data-ui-page="hot"] .hp-hero-title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
html.ui2[data-ui-page="hot"] .hp-hero-sub { font-size: 15px; font-weight: 400; color: var(--ui-sub); margin-top: 6px; }
html.ui2[data-ui-page="hot"] .hp-chip { border-radius: 8px; background: #fff; }
html.ui2[data-ui-page="hot"] .hp-chip i { color: var(--ui-faint); }
@media (max-width: 1000px) { html.ui2[data-ui-page="hot"] .hp-hero-title { font-size: 24px; } }

/* 순위 번호 1~3위: 보라 그라데이션 → 검정 */
html.ui2[data-ui-page="hot"] .rank-num.top { background: var(--ui-accent); box-shadow: none; }
html.ui2[data-ui-page="hot"] .rank-key:hover .rank-txt { text-decoration: underline; text-underline-offset: 3px; }
/* '이슈 정리' 등 작은 링크 버튼 */
html.ui2[data-ui-page="hot"] .rank-issue { background: #fff; border: 1px solid var(--ui-line); color: var(--ui-ink); }
html.ui2[data-ui-page="hot"] .rank-issue:hover { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
html.ui2[data-ui-page="hot"] .hp-links a:hover,
html.ui2[data-ui-page="hot"] .tab-btn:hover,
html.ui2[data-ui-page="hot"] .hp-subnav a:hover { border-color: #bdbdbd !important; color: var(--ui-ink) !important; }
html.ui2[data-ui-page="hot"] .news-item:hover .news-t { text-decoration: underline; text-underline-offset: 3px; }
/* 키워드 이력 막대 그래프: 보라 → 회색·검정 */
html.ui2[data-ui-page="hot"] .rank-chart span { background: linear-gradient(180deg, #333, #bbb) !important; }
/* 하위 페이지 상단 메뉴(실시간 순위·이슈 정리·실검 이력) */
html.ui2[data-ui-page="hot"] .hp-subnav a { border-radius: 8px; }

/* ============================================================
   2단계 — 세부키워드 조합기 (/mix)
   페이지 CSS 가 --indigo 변수 + 보라 그라데이션을 쓰므로 변수를 바꾸고 그라데이션·글로우만 덮는다
   ============================================================ */
html.ui2[data-ui-page="mix"] { --indigo: #111111; --indigo-2: #333333; --indigo-soft: #f3f3f3; --line: #ececec; }
html.ui2[data-ui-page="mix"] .wrap .content.ps-3 { padding: 36px 44px 48px !important; }
@media (max-width: 1000px) { html.ui2[data-ui-page="mix"] .wrap .content.ps-3 { padding: 20px 16px 36px !important; } }
html.ui2[data-ui-page="mix"] .modern-card { border-radius: var(--ui-r); box-shadow: none; }
html.ui2[data-ui-page="mix"] .modern-card:hover { box-shadow: none; transform: none; border-color: #d4d4d4; }
html.ui2[data-ui-page="mix"] .kw-header { background: var(--ui-soft); border-radius: var(--ui-r) var(--ui-r) 0 0; border-bottom-color: var(--ui-line); }
html.ui2[data-ui-page="mix"] .kw-badge { background: #fff; border: 1px solid var(--ui-line); color: var(--ui-ink); }
html.ui2[data-ui-page="mix"] .btn-check:checked + .btn-rule-chip { background: var(--ui-accent); box-shadow: none; }
html.ui2[data-ui-page="mix"] .btn-rule-chip:hover { background: var(--ui-soft); border-color: #bdbdbd; }
html.ui2[data-ui-page="mix"] .btn-primary,
html.ui2[data-ui-page="mix"] .btn-primary:hover,
html.ui2[data-ui-page="mix"] .btn-primary:focus,
html.ui2[data-ui-page="mix"] .btn-dark,
html.ui2[data-ui-page="mix"] .btn-dark:hover,
html.ui2[data-ui-page="mix"] .btn-dark:focus { background: var(--ui-accent) !important; box-shadow: none !important; filter: none; border-radius: 8px !important; }
html.ui2[data-ui-page="mix"] .btn-outline-primary { border-color: #d4d4d4; color: var(--ui-ink); }
html.ui2[data-ui-page="mix"] .btn-outline-primary:hover { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
html.ui2[data-ui-page="mix"] #result { background: var(--ui-soft); border-color: var(--ui-line); }
html.ui2[data-ui-page="mix"] #result:focus { background: #fff; border-color: #bdbdbd; box-shadow: none; }
html.ui2[data-ui-page="mix"] .form-check-input:focus { border-color: #bdbdbd; box-shadow: none; }
html.ui2[data-ui-page="mix"] .wrap .box h3 { color: var(--ui-ink) !important; }

/* ============================================================
   2단계 — 무한 키워드 (/muhan) : 무료 서비스 종료 → 프리미엄(muhankey.com) 안내 랜딩
   무한키워드 제품 색(보라)은 상품 광고라 유지하고, 본문 바탕·여백·푸터만 공통 틀을 따른다
   ============================================================ */
html.ui2[data-ui-page="muhan"] .wrap .content.ps-3 { padding: 36px 44px 48px !important; }
@media (max-width: 1000px) { html.ui2[data-ui-page="muhan"] .wrap .content.ps-3 { padding: 20px 16px 36px !important; } }

/* ============================================================
   2단계 — 키워드 지수 (/keyanalysis)
   ============================================================ */
html.ui2[data-ui-page="keyanalysis"] { --indigo: #111111; --indigo-2: #333333; --indigo-soft: #f3f3f3; --line: #ececec; }
/* 상단 보라 안내 바 → 공통 회색 안내 */
html.ui2[data-ui-page="keyanalysis"] .promo-bar { background: var(--ui-soft); border: 1px solid var(--ui-line); border-radius: 10px; padding: 12px 16px; }
html.ui2[data-ui-page="keyanalysis"] .promo-bar > div { color: var(--ui-ink-2) !important; font-weight: 500 !important; }
html.ui2[data-ui-page="keyanalysis"] .promo-bar a { color: var(--ui-ink) !important; text-decoration: underline !important; text-underline-offset: 2px; }
/* 프로 안내 상자: 보라 그라데이션 → 검정 카드 */
html.ui2[data-ui-page="keyanalysis"] .cta-strong { background: var(--ui-accent); border-radius: var(--ui-r); box-shadow: none; }
html.ui2[data-ui-page="keyanalysis"] .cta-strong p { color: #cfcfcf; }
html.ui2[data-ui-page="keyanalysis"] .btn-cta { color: var(--ui-ink) !important; border-radius: 8px; box-shadow: none; }
html.ui2[data-ui-page="keyanalysis"] .btn-cta-ghost { border-radius: 8px; }
/* 영상 틀·카드·버튼 */
html.ui2[data-ui-page="keyanalysis"] .video-frame { border-radius: var(--ui-r); border: 1px solid var(--ui-line); box-shadow: none; }
html.ui2[data-ui-page="keyanalysis"] .video-cap { color: var(--ui-faint); }
html.ui2[data-ui-page="keyanalysis"] .card { border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r) !important; box-shadow: none !important; }
html.ui2[data-ui-page="keyanalysis"] .card-header { background: #fff !important; color: var(--ui-ink) !important; border-bottom: 1px solid var(--ui-line) !important; border-radius: var(--ui-r) var(--ui-r) 0 0 !important; font-size: 15px; font-weight: 700; }
html.ui2[data-ui-page="keyanalysis"] .btn-primary,
html.ui2[data-ui-page="keyanalysis"] .btn-primary:hover,
html.ui2[data-ui-page="keyanalysis"] .btn-primary:focus { background: var(--ui-accent) !important; box-shadow: none !important; filter: none; }
html.ui2[data-ui-page="keyanalysis"] .wrap .box h3 { color: var(--ui-ink) !important; }
html.ui2[data-ui-page="keyanalysis"] .wrap .content > h2 { margin-top: 34px !important; }
/* 키워드마스터: 순위 칸 nowrap 이 툴팁으로 상속돼 글이 상자 밖으로 나가던 문제 — 툴팁은 줄바꿈 */
html.ui2[data-ui-page="keyword"] #result .tooltip .tooltiptext { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
html.ui2[data-ui-page="keyword"] #result .tooltip .tooltiptext p { margin: 0 0 4px; white-space: normal; }