/* ============================================================
   키워드 헌터 — 단일 스타일시트  (2026-09-22 전면 개편)

   ⚠️ 이 파일 하나가 사이트 전체의 디자인이다.
      예전에는 app.css(ui.py에서 자동 추출) + bridge.css + parity.css
      세 갈래로 흩어져 있었고, 스트림릿 시절 규칙(footer 숨김, 파란 액센트,
      #MainMenu 같은 죽은 선택자)이 섞여 서로를 덮어썼다.
      그래서 어느 규칙이 이겼는지 아무도 몰랐다 — 사업자 푸터가
      안 보였던 것도 app.css의 `footer{display:none}` 때문이었다.

   컨셉: 정밀 계측기 (ui.py의 원래 설계 의도를 그대로 이어받는다)
      · 바닥은 밝은 회백 #FBFBFD — 표와 숫자를 오래 보는 도구니까
      · 액센트는 둘 — 아이리스=제품이 하는 일 / 에메랄드=당신이 벌 돈
      · 등급·경쟁도는 별도 상태색, 언제나 글자 라벨과 함께
      · 모든 수치는 등폭 서체로 자리를 맞춘다
      · 파일 맨 끝 '밝은 톤 덧칠'이 최종 층이다 — 거기가 이긴다
   ============================================================ */

:root{
  /* ⚠️ 2026-09-22 밤: 다크+보라는 가독성이 떨어진다는 피드백으로 밝은 톤으로 전환.
     표와 숫자를 오래 보는 도구라 밝은 쪽이 눈이 덜 피곤하고,
     지금 한국 SaaS 결(토스·당근)에도 맞는다.
     '싸 보이는 밝은 화면'과 갈리는 지점은 셋이다 —
      1) 바탕을 순백이 아니라 살짝 낮춰 카드가 '떠 보이게'
      2) 테두리를 두르지 말고 옅은 그림자로 띄우기
      3) 액센트는 하나만, 나머지는 회색으로 조용히 */
  /* ⚠️ 2026-09-22 3차: "밝은 건 괜찮은데 개성이 없다 / 너무 밝지 않았으면".
     원인은 색이 아니라 '바닥이 카드와 같은 흰색'이었다.
     흰 바탕에 흰 카드를 놓으면 테두리만 남고 아무것도 떠 보이지 않아서
     어느 SaaS에나 있는 기본 관리자 화면처럼 보인다.
     바닥을 한 단 내려 깔면(#EDEFF4) 흰 카드가 진짜로 뜬다 —
     밝기도 낮아지고 깊이도 생긴다. 한 번에 두 불만을 없애는 지점. */
  --bg:#EDEFF4;          /* 페이지 바닥 — 카드보다 확실히 낮다 */
  --bg2:#E7EAF1;         /* 푸터 */
  --surf:#FFFFFF;        /* 카드·표 — 바닥 위로 뜬다 */
  --surf2:#F4F5F9;       /* 표 머리글·인셋 */
  --surf3:#E6E9F1;       /* 트랙(막대 바탕) */
  --edge:#DFE3EB;        /* 헤어라인 */
  --edge2:#C9D0DD;       /* 강조 경계 */
  /* 잉크 — 화면에 딱 하나 놓는 어두운 판(판정 슬랩)에만 쓴다 */
  --ink:#14171C; --ink2:#1B1F26;
  --on-ink:#E9ECF1; --on-ink2:#8A94A1; --on-ink3:#79828F;
  --iris-lit:#8B7CFF;    /* 잉크 위에서만 쓰는 밝은 아이리스 */
  --mint-lit:#3DDC97;    /* 잉크 위에서만 쓰는 밝은 민트 */
  --hi:rgba(16,24,40,.04);
  /* 그림자 — 테두리 대신 이걸로 띄운다 */
  --sh:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
  --sh-lg:0 6px 18px rgba(16,24,40,.09), 0 1px 3px rgba(16,24,40,.06);
  /* 글자 — 대비를 넉넉히 */
  --txt:#0E1117;
  --txt2:#4A5262;
  --txt3:#7A8494;
  --txt4:#A2AAB8;
  /* 액센트 둘 — 역할이 겹치지 않는다
     아이리스 = 제품이 하는 일 (버튼·AI·탭·링크)
     에메랄드 = 당신이 벌 돈 (단가·수익·좋음) */
  --iris:#5B4BD6;
  --iris2:#7A6BEA;
  --iris-dim:#C7C0F5;
  --iris-wash:rgba(91,75,214,.07);
  --iris-wash2:rgba(91,75,214,.13);
  --mint:#0A9D6B;
  --mint2:#0B8A5E;
  --mint-dim:#A8E2CC;
  --mint-wash:rgba(10,157,107,.08);
  /* 상태색 — 액센트와 따로. 색만으로 뜻을 전하지 않고 항상 글자를 같이 둔다 */
  --slate:#7A86A8; --slate-wash:rgba(122,134,168,.12);
  --coral:#E0455C; --coral-wash:rgba(224,69,92,.09);
  --amber:#A8690A;
  /* 서체 */
  --sans:'Pretendard','IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,
         'Apple SD Gothic Neo',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --r:14px;
  --r-sm:10px;
}

*{box-sizing:border-box}
/* ⚠️ hidden 속성은 무엇보다 세다.
   display를 지정한 규칙(#kh-busy 등)이 hidden을 이겨버려서
   로딩 오버레이가 화면에 계속 떠 있는 사고가 있었다 (2026-09-22). */
[hidden]{display:none !important}

html,body,.stApp{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--txt);
  margin:0;
  -webkit-text-size-adjust:100%;
}
body{font-size:15px;line-height:1.7}

/* 한국어는 어절 단위로만 끊는다 — '찾습니/다.'처럼 잘리면 읽기가 확 나빠진다 */
body,p,div,span,li,td,th,h1,h2,h3,h4{
  word-break:keep-all; overflow-wrap:break-word;
}
/* 숫자·코드·URL은 어절 개념이 없으니 원래대로 */
.mono,code,.kh-num,.tc-rank,.tc-rec,.sc-row,.metric-val,.kpi-val{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  word-break:normal;
}

a{color:var(--iris);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--iris);outline-offset:2px;border-radius:4px}
img{max-width:100%}
hr,.rule{border:0;height:1px;background:var(--edge);margin:18px 0}

/* ── 페이지 골격 ───────────────────────────────── */
.block-container{
  max-width:1060px; margin:0 auto; padding:0 20px 84px;
}

/* ── 상단 바 ───────────────────────────────────── */
.masthead{
  display:flex; align-items:center; gap:14px;
  height:60px; margin:0 0 2px;
  border-bottom:1px solid var(--edge);
}
.mast-brand{
  display:flex; align-items:center; gap:9px;
  text-decoration:none !important; flex:0 0 auto;
}
.mast-brand:hover{opacity:.85}
.mast-logo{height:26px;width:auto;display:block}
.mast-name{
  font-size:1.06rem; font-weight:700; letter-spacing:-.035em;
  color:var(--txt); white-space:nowrap;
}
.mast-name b{color:var(--iris);font-weight:700}
.mast-meta{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.72rem; color:var(--txt3);
  min-width:0; white-space:nowrap;
}
.mast-sep{color:var(--edge2)}
.mast-guide,.mast-me{color:var(--txt3) !important;text-decoration:none !important}
.mast-me{color:var(--txt2) !important}
.mast-guide:hover,.mast-me:hover{color:var(--iris) !important}
.mast-head-row{display:flex;align-items:center;gap:12px}

/* ── 탭 ─────────────────────────────────────────
   상위 탭은 밑줄, 하위 탭은 작은 알약. 알약을 두 단계로 쓰면
   어느 쪽이 상위인지 헷갈린다. */
[role="tablist"]{
  display:flex; align-items:center; gap:2px;
  border-bottom:1px solid var(--edge);
  margin:0 0 26px; padding:0;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
[role="tablist"]::-webkit-scrollbar{display:none}
[role="tab"]{
  flex:0 0 auto; padding:13px 16px; white-space:nowrap;
  font-size:.9rem; font-weight:500; letter-spacing:-.015em;
  color:var(--txt3); text-decoration:none !important;
  border:0; border-bottom:2px solid transparent; background:transparent;
  transition:color .14s ease,border-color .14s ease;
}
[role="tab"]:hover{color:var(--txt);border-bottom-color:var(--edge2);text-decoration:none !important}
[role="tab"][aria-selected="true"]{
  color:var(--txt); font-weight:600; border-bottom-color:var(--iris);
}

[role="tabpanel"] [role="tablist"],
.block-container [role="tabpanel"] > [role="tablist"]{
  border-bottom:0; gap:6px; margin-bottom:22px;
}
[role="tabpanel"] [role="tab"]{
  padding:6px 13px; border-radius:7px; border-bottom:0;
  font-size:.83rem; background:var(--surf); color:var(--txt3);
  border:1px solid var(--edge);
}
[role="tabpanel"] [role="tab"]:hover{
  background:var(--surf2); color:var(--txt); border-color:var(--edge2);
}
[role="tabpanel"] [role="tab"][aria-selected="true"]{
  background:var(--iris); border-color:var(--iris);
  color:#14100A; font-weight:600;
}

/* ── 히어로 ─────────────────────────────────────── */
.hero{text-align:center;padding:58px 8px 20px}
.hero-h{
  font-family:var(--sans);
  font-size:clamp(1.72rem,5vw,2.85rem); font-weight:700;
  letter-spacing:-.05em; line-height:1.28; color:var(--txt); margin:0;
  text-wrap:balance;
}
/* 강조 구절은 색을 올리는 대신 무게를 내린다 — 다크에서는 그게 더 고급스럽다 */
.hero-h em{font-style:normal;color:var(--txt2);font-weight:300}
.hero-lead{margin-top:24px}
.hero-p{
  margin:7px auto 0; max-width:52ch;
  font-size:clamp(.9rem,1.9vw,1rem); color:var(--txt2); line-height:1.75;
}
.hero-p b{color:var(--txt);font-weight:600}
.hero-cap{
  margin:0; font-size:clamp(.88rem,1.9vw,1.02rem); color:var(--txt2);
  font-weight:500; letter-spacing:-.012em; line-height:1.65;
}
.hero-cap b{color:var(--txt);font-weight:600}
.hero-cap i{font-style:normal;color:var(--edge2);margin:0 6px}
.hero-cap i.gap{display:inline-block;width:12px;margin:0}
.hero-cap .tail{white-space:nowrap}
.hero-cap em.ai{
  font-style:normal;color:var(--iris);font-weight:700;font-size:1.06em;
}
.hero-cap em.aio{font-style:normal;color:var(--iris2);font-weight:700}
.hero h1 a,.hero-h a{display:none !important}

.hero-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:16px}
.hero-chip{
  font-family:var(--mono); font-size:.72rem; color:var(--txt2);
  background:var(--surf); border:1px solid var(--edge);
  border-radius:999px; padding:5px 12px;
}
.hero-stat{
  margin-top:26px; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:0 4px;
  font-family:var(--mono); font-size:.7rem; color:var(--txt3);
}
.hs-live{display:inline-flex;align-items:center;gap:6px;color:var(--txt2)}
.hs-live i{
  width:6px;height:6px;border-radius:99px;background:var(--mint);
  box-shadow:0 0 0 3px rgba(70,190,138,.16);
  animation:hsPulse 2.4s ease-in-out infinite;
}
@keyframes hsPulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.hs-live i{animation:none}}
.hs-part::before{
  content:"";display:inline-block;width:3px;height:3px;border-radius:99px;
  background:var(--edge2);margin:0 9px;vertical-align:middle;
}
.hs-num{font-family:var(--mono);font-weight:600;color:var(--txt);margin-right:3px}
.hs-part{color:var(--txt3)}
.hs-src{color:var(--txt4)}

/* ── 검색창 ─────────────────────────────────────── */
.search-box{
  display:flex; align-items:stretch; gap:0;
  max-width:620px; margin:0 auto;
  background:var(--surf); border:1px solid var(--edge2);
  border-radius:var(--r); overflow:hidden;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.search-box:focus-within{
  border-color:var(--iris);
  box-shadow:0 0 0 3px var(--iris-wash);
}
.search-box .stTextInput{flex:1 1 auto;min-width:0}
.stTextInput input{
  width:100%; background:transparent; border:0; outline:0;
  color:var(--txt); font-family:var(--sans); font-size:1rem;
  padding:15px 18px;
}
.stTextInput input::placeholder{color:var(--txt4)}
.search-box .stButton{flex:0 0 auto;display:flex}
.stButton button{
  border:0; background:var(--iris); color:#14100A;
  font-family:var(--sans); font-weight:700; font-size:.94rem;
  letter-spacing:-.015em; padding:0 26px; cursor:pointer;
  transition:background .14s ease;
}
.stButton button:hover{background:var(--iris2)}
.search-btn-pad{display:none}

/* 검색창 밖에 홀로 선 입력칸 (블로그 주소 등) */
.stTextInput:not(.search-box .stTextInput) input{
  background:var(--surf); border:1px solid var(--edge);
  border-radius:var(--r); padding:12px 14px;
}
.stTextInput:not(.search-box .stTextInput) input:focus{
  border-color:var(--iris); box-shadow:0 0 0 3px var(--iris-wash);
}

/* ── 기본 면 ────────────────────────────────────── */
.box,.chart-box,.trend-box,.gk-box,.hr-box,.ws-box,.gauge-wrap,
.brief-box,.outline-card,.serp-box,.kh-tw,.track-card,.kh-modal{
  background:var(--surf); border:1px solid var(--edge);
  border-radius:var(--r);
}
.box{padding:18px 20px;margin:0 0 14px}
.chart-box,.trend-box,.gk-box,.hr-box,.ws-box{padding:17px 19px;margin:0 0 12px}
.gauge-wrap{padding:16px 18px;margin:4px 0 12px}
.row{display:grid;gap:10px;margin:0 0 14px}
.cell{min-width:0}
.kh-result{display:block}
.kh-row-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── 위계: 눈썹줄 · 제목 ─────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--iris);
  margin:0 0 4px;
}
.section-title{
  font-size:1.04rem; font-weight:600; letter-spacing:-.022em;
  color:var(--txt); margin:0 0 12px;
}
.chart-title{
  font-size:.9rem; font-weight:600; color:var(--txt);
  display:block; margin-bottom:12px; letter-spacing:-.015em;
}
.kh-cap{font-family:var(--mono);font-size:.7rem;color:var(--txt3);margin-top:8px}

/* ── 한 방 문구 ─────────────────────────────────── */
.pitch{margin:2px 0 18px}
.pitch-h{
  font-size:clamp(1.18rem,2.8vw,1.6rem); font-weight:700;
  letter-spacing:-.04em; line-height:1.36; color:var(--txt);
  text-wrap:balance;
}
.pitch-h em{font-style:normal;color:var(--txt2);font-weight:300}
.pitch-sub{
  margin-top:9px; font-size:clamp(.85rem,1.8vw,.93rem);
  color:var(--txt2); line-height:1.7;
}

/* ── 지표(KPI) ──────────────────────────────────── */
.kpi{
  background:var(--surf); border:1px solid var(--edge);
  border-radius:var(--r); padding:16px 18px; height:100%;
}
.kpi-label{
  font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt3);
  margin-bottom:8px;
}
.kpi-val{
  font-size:1.46rem; font-weight:600; color:var(--txt); line-height:1.15;
  letter-spacing:-.025em; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
.kpi-sub{font-size:.76rem;color:var(--txt3);margin-top:6px;line-height:1.5}

/* ── 안내 박스 ──────────────────────────────────── */
.note{
  background:var(--surf); border:1px solid var(--edge);
  border-left:3px solid var(--iris); border-radius:var(--r);
  padding:12px 15px; font-size:.88rem; color:var(--txt2); line-height:1.7;
  margin:0 0 10px;
}
.note b{color:var(--txt);font-weight:600}
.note-gold{border-left-color:var(--iris2)}

/* ── 칩·알약 ────────────────────────────────────
   ⚠️ 등급 칩의 배경색은 ui.py가 인라인으로 박는다(상태색).
      다크 바탕에 흰 글자를 올리면 읽기 힘들어서, 글자는 먹색으로 둔다. */
.diag-mark,.outline-num,.mine-tag{
  color:#0B0D10; font-weight:600;
}
.chip{
  display:inline-block; padding:4px 10px; border-radius:5px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:-.01em;
}
.kh-chip{
  display:inline-block; font-family:var(--mono); font-size:.7rem;
  font-weight:600; padding:3px 8px; border-radius:4px;
}
.kh-pill{
  display:inline-block; background:var(--surf); border:1px solid var(--edge);
  color:var(--txt2); border-radius:7px; padding:6px 13px;
  font-size:.82rem; text-decoration:none !important; transition:all .14s ease;
}
.kh-pill:hover{border-color:var(--edge2);color:var(--txt);text-decoration:none !important}
.kh-pill.on{
  background:var(--iris); border-color:var(--iris);
  color:#14100A !important; font-weight:600;
}
.kh-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px}
.kh-filter-label{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt3); margin-right:4px;
}
.topbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.tb-item{
  font-family:var(--mono); font-size:.7rem; color:var(--txt3);
  background:var(--surf); border:1px solid var(--edge);
  padding:4px 10px; border-radius:999px;
}
.tb-on{color:var(--iris);border-color:var(--iris-dim);background:var(--iris-wash)}
.tb-off{color:var(--txt4);border-style:dashed}
.tb-dim{color:var(--txt4)}
.hint-row{
  font-size:.78rem; color:var(--txt3); margin:0 0 12px;
  display:flex; align-items:center; flex-wrap:wrap; gap:5px;
}
.hint-chip{
  font-family:var(--mono); background:var(--iris-wash); color:var(--iris);
  border:1px solid var(--iris-dim); padding:2px 8px; border-radius:999px;
  font-size:.7rem;
}
.kh-guide-link{text-align:center;font-size:.84rem;color:var(--txt3);margin-top:16px}
.kh-hint{display:none;font-family:var(--mono);font-size:.7rem;color:var(--txt3);
  text-align:right;margin:6px 2px 12px}
.kh-flash{
  background:var(--mint-wash); border:1px solid rgba(70,190,138,.3);
  color:var(--mint); border-radius:var(--r); padding:11px 15px;
  font-size:.86rem; margin:0 0 16px;
}

/* ── 버튼 ───────────────────────────────────────── */
.kh-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surf); border:1px solid var(--edge2); color:var(--txt2);
  border-radius:9px; padding:9px 17px; font-size:.86rem; font-weight:500;
  text-decoration:none !important; cursor:pointer; font-family:var(--sans);
  transition:all .14s ease;
}
.kh-btn:hover{border-color:var(--iris-dim);color:var(--txt);text-decoration:none !important}
.kh-btn-primary{background:var(--iris);border-color:var(--iris);color:#14100A}
.kh-btn-primary:hover{background:var(--iris2);border-color:var(--iris2);color:#14100A}
.me-logout{width:auto}

/* ── 소셜 로그인 (브랜드 색은 지킨다 — 한눈에 알아봐야 한다) ── */
.social-row{display:flex;gap:10px;margin:6px 0 2px;flex-wrap:wrap}
.social-btn{
  flex:1 1 200px; display:flex; align-items:center; justify-content:center;
  gap:8px; height:50px; border-radius:var(--r);
  text-decoration:none !important; font-family:var(--sans);
  font-weight:700; font-size:.96rem; letter-spacing:-.02em;
  border:1px solid transparent; transition:filter .12s;
}
.social-btn img{width:19px;height:19px;display:block}
.social-btn:hover{filter:brightness(1.06);text-decoration:none !important}
.social-btn.kakao{background:#FEE500;color:#191600 !important}
.social-btn.google{background:#FFFFFF;color:#3C4043 !important;border-color:#DADCE0}

/* ============================================================
   표 — 키워드 열은 붙박이, 나머지는 옆으로 민다
   ⚠️ 모바일에서 열이 많은 표는 어떻게 줄여도 안 들어간다.
      글씨를 줄이는 대신 첫 열만 고정하고 나머지를 밀어 보게 한다.
      무엇의 숫자인지 항상 보이는 게 중요하다.
   ============================================================ */
.kh-tw{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--edge); border-radius:var(--r);
  background:var(--surf); margin:0 0 12px;
}
.kh-tw.kh-scroll{overflow-y:auto;max-height:560px}
.kh-t{
  border-collapse:separate; border-spacing:0;
  width:100%; font-size:.85rem; color:var(--txt);
}
.kh-t th{
  font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--txt3);
  text-align:left; padding:11px 15px;
  background:var(--surf2); border-bottom:1px solid var(--edge);
  white-space:nowrap; position:sticky; top:0; z-index:3;
}
.kh-t th.kh-key{z-index:4}
.kh-t td{
  padding:12px 15px; border-bottom:1px solid var(--edge);
  white-space:nowrap;
}
.kh-t tbody tr:last-child td{border-bottom:0}
.kh-t .kh-num{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  text-align:right; color:var(--txt2);
}
.kh-t th.kh-num{text-align:right}
.kh-t .kh-center,.kh-t th.kh-center{text-align:center}
/* 붙박이 열 — 배경이 투명하면 뒤 칸이 비쳐 보인다 */
.kh-t .kh-key{
  position:sticky; left:0; z-index:2;
  background:var(--surf); border-right:1px solid var(--edge);
  font-weight:500; white-space:nowrap; width:1%;
}
.kh-t th.kh-key{background:var(--surf2)}
.kh-t tbody tr:hover td{background:var(--surf2)}
.kh-t tbody tr:hover td.kh-key{background:var(--surf2)}
.kh-rk{
  color:var(--txt4); font-family:var(--mono);
  font-size:.7rem; margin-right:8px; font-variant-numeric:tabular-nums;
}
.kh-weekhead{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--iris); margin:18px 0 8px;
}
.kh-fold{margin:0 0 12px}
.kh-fold summary{
  cursor:pointer; font-size:.86rem; color:var(--txt2);
  padding:10px 14px; background:var(--surf);
  border:1px solid var(--edge); border-radius:var(--r);
}
.kh-fold summary:hover{color:var(--txt);border-color:var(--edge2)}
.kh-fold[open] summary{border-radius:var(--r) var(--r) 0 0}
.kh-check{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.84rem; color:var(--txt2); cursor:pointer;
}
.kh-check input{accent-color:var(--iris);width:15px;height:15px}
.kh-track-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0}

/* ── 게이지 ─────────────────────────────────────── */
.gauge-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.gauge-title{font-size:.9rem;font-weight:600;color:var(--txt);letter-spacing:-.015em}
.gauge-num{
  font-family:var(--mono); font-size:1.5rem; font-weight:600;
  color:var(--iris); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.gauge-track{height:8px;background:var(--surf3);border-radius:999px;overflow:hidden}
.gauge-fill{height:100%;border-radius:999px}
.gauge-scale{
  display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:.66rem; color:var(--txt3); margin-top:8px;
}

/* ── 신선도 · 점수구성 · 적중률 막대 ───────────────── */
.fresh-top{display:flex;justify-content:space-between;align-items:baseline}
.fresh-top .chart-title{margin-bottom:0}
.fresh-num{
  font-family:var(--mono); font-size:1.4rem; font-weight:600;
  color:var(--iris); font-variant-numeric:tabular-nums;
}
.fresh-num small{font-size:.86rem;color:var(--txt3);margin-left:2px}
.fresh-track{height:9px;background:var(--surf3);border-radius:999px;overflow:hidden;margin:11px 0 8px}
.fresh-fill{height:100%;border-radius:999px}
.fresh-foot{font-size:.78rem;color:var(--txt3)}

.sb-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.sb-top .chart-title{margin-bottom:0}
.sb-total{
  font-family:var(--mono); font-size:1.6rem; font-weight:600;
  color:var(--iris); font-variant-numeric:tabular-nums; letter-spacing:-.025em;
}
.sb-row{display:flex;align-items:center;gap:12px;padding:7px 0}
.sb-name{flex:0 0 74px;font-size:.84rem;font-weight:500;color:var(--txt)}
.sb-track{flex:1 1 auto;height:8px;background:var(--surf3);border-radius:999px;overflow:hidden}
.sb-fill{height:100%;border-radius:999px}
.sb-val{
  flex:0 0 104px; text-align:right; font-family:var(--mono);
  font-size:.78rem; font-weight:500; font-variant-numeric:tabular-nums;
}
.sb-none{color:var(--txt3) !important;font-weight:400}

.hr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:8px}
.hr-sub{font-size:.76rem;color:var(--txt3);margin-top:-2px}
.hr-big{
  font-family:var(--mono); font-size:2.3rem; font-weight:600; line-height:1;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.hr-big small{font-size:1rem;margin-left:1px;color:var(--txt3)}
.hr-row{display:flex;align-items:center;gap:10px;margin-top:9px}
.hr-lbl{flex:0 0 96px;font-size:.8rem;color:var(--txt);font-weight:500}
.hr-track{flex:1;height:8px;background:var(--surf3);border-radius:999px;overflow:hidden}
.hr-fill{height:8px;border-radius:999px}
.hr-num{
  flex:0 0 52px; text-align:right; font-family:var(--mono);
  font-size:.76rem; color:var(--txt3); font-variant-numeric:tabular-nums;
}
.hr-note{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--edge);
  font-size:.78rem; color:var(--txt3); line-height:1.65;
}

/* ── 사냥 순위 막대 ─────────────────────────────── */
.hb-main{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--edge);
}
.hb-main-label{
  font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.12em; color:var(--txt3); text-transform:uppercase;
}
.hb-main b{font-size:1rem;color:var(--txt);font-weight:600}
.hb-main-sub{font-family:var(--mono);font-size:.74rem;color:var(--txt3)}
.hb-row{
  display:grid; grid-template-columns:130px 1fr 190px;
  align-items:center; gap:11px; padding:7px 0;
}
.hb-kw{
  font-size:.88rem; font-weight:500; color:var(--txt); text-align:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hb-track{height:24px;background:var(--surf3);border-radius:6px;overflow:hidden}
.hb-fill{
  height:100%; border-radius:6px; display:flex; align-items:center;
  justify-content:flex-end; padding-right:9px; min-width:34px;
  transition:width .25s ease;
}
.hb-score{
  color:#0B0D10; font-family:var(--mono); font-size:.76rem; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.hb-sub{
  font-family:var(--mono); font-size:.72rem; color:var(--txt3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── 상위노출 목록 ──────────────────────────────── */
.serp-box{padding:8px 12px}
.serp-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 8px; border-bottom:1px solid var(--edge); font-size:.88rem;
}
.serp-row:last-child{border-bottom:none}
.serp-head{
  font-family:var(--mono); font-size:.64rem; font-weight:500; color:var(--txt3);
  letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--edge2);
}
.serp-rank{
  flex:0 0 32px; text-align:center; font-weight:600;
  font-family:var(--mono); font-size:.95rem; font-variant-numeric:tabular-nums;
}
.serp-head .serp-rank{font-size:.64rem}
.serp-title{
  flex:1 1 auto; color:var(--txt); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.serp-blogger{
  flex:0 0 130px; color:var(--txt3); font-size:.8rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.serp-age{
  flex:0 0 72px; text-align:right; font-weight:500; font-size:.78rem;
  font-family:var(--mono); color:var(--txt2);
}
.mine-tag{
  background:var(--iris); font-size:.66rem; font-weight:700;
  padding:2px 7px; border-radius:999px; margin-left:6px;
  font-family:var(--mono);
}
.serp-row .mine{color:var(--iris2)}

/* ── 제목 단어 칩 ───────────────────────────────── */
.wchip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px; margin:3px;
  font-size:.86rem; font-weight:600;
}
.wchip b{
  font-family:var(--mono); font-size:.74rem;
  background:rgba(0,0,0,.18); padding:1px 6px; border-radius:999px;
}

/* ── 글 뼈대 후보 ───────────────────────────────── */
.outline-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px;
}
.outline-card{padding:13px 14px}
.outline-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.outline-num{
  flex:none; height:22px; border-radius:5px; font-family:var(--mono);
  font-size:.7rem; font-weight:600;
  display:inline-flex; align-items:center; padding:0 8px;
}
.outline-h{
  font-size:.9rem; font-weight:600; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.outline-w{font-size:.76rem;color:var(--txt3);line-height:1.6;margin:0}
.outline-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--edge)}
.outline-item:last-child{border-bottom:none}
.title-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}

/* ── AI 브리핑 ──────────────────────────────────── */
.brief-box{padding:17px 20px;margin:8px 0 14px}
.brief-top{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.brief-tag{
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  padding:3px 10px; border-radius:4px;
}
.brief-title{
  font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt3);
}
.brief-head{
  font-size:1.1rem; font-weight:700; color:var(--txt);
  line-height:1.5; margin-bottom:12px; letter-spacing:-.03em;
}
.brief-reasons{
  margin:0 0 12px; padding-left:18px;
  font-size:.88rem; color:var(--txt2); line-height:1.8;
}
.brief-action{
  background:var(--surf2); border-radius:8px; padding:12px 15px;
  font-size:.88rem; color:var(--txt2); line-height:1.65;
}
.brief-action b{color:var(--iris);font-size:.76rem;font-family:var(--mono)}
.brief-watch{margin-top:9px;font-size:.84rem;color:var(--coral);font-weight:500}

/* ── AI 진단 버튼 ───────────────────────────────── */
.kh-ai-cta{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  margin:24px auto 8px; padding:22px 26px; max-width:520px;
  background:linear-gradient(135deg,#1A1408 0%,#2A2110 55%,#1A1408 100%);
  border:1px solid var(--iris-dim); border-radius:14px;
  text-decoration:none !important; position:relative; overflow:hidden;
  transition:transform .15s ease,border-color .15s ease;
}
.kh-ai-cta::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 18% 0%,var(--iris-wash),transparent 58%);
  pointer-events:none;
}
.kh-ai-cta:hover{
  transform:translateY(-2px); border-color:var(--iris);
  text-decoration:none !important;
}
.kh-ai-badge{
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  letter-spacing:.16em; color:var(--iris);
  border:1px solid var(--iris-dim); border-radius:999px; padding:3px 12px;
}
.kh-ai-main{
  color:var(--txt); font-size:1.14rem; font-weight:700; letter-spacing:-.03em;
}
.kh-ai-sub{color:var(--txt2);font-size:.82rem;text-align:center;line-height:1.55}
.kh-ai-sub b{color:var(--iris2)}

/* ── 추적 카드 ──────────────────────────────────── */
.track-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr));
  gap:10px; margin-bottom:8px;
}
.track-card{
  padding:14px 16px 15px; min-height:214px; height:auto;
  display:flex; flex-direction:column; overflow:visible;
  transition:border-color .14s ease;
}
.track-card > *{flex:0 0 auto}
.track-card:hover{border-color:var(--edge2)}
/* 내가 쓴 키워드 — 놋쇠 테두리로 확실히 구분 */
.track-card.mine{
  border-color:var(--iris-dim);
  background:linear-gradient(180deg,var(--iris-wash),var(--surf) 60%);
}
.track-card.mine:hover{border-color:var(--iris)}
/* 지켜보는 키워드 — 점선 */
.track-card.watching{border-style:dashed;background:var(--surf)}
.track-card.watching:hover{border-color:var(--edge2)}
.tc-head{margin-bottom:7px}
.tc-tag{
  display:inline-block; font-family:var(--mono); font-size:.64rem;
  font-weight:600; padding:3px 9px; border-radius:4px;
  background:var(--iris-wash2); color:var(--iris2); letter-spacing:.04em;
}
.tc-tag.watch{
  background:transparent; color:var(--txt3);
  border:1px dashed var(--edge2); font-weight:500;
}
.tc-kw{
  font-size:.94rem; font-weight:600; color:var(--txt);
  margin-bottom:9px; padding-bottom:9px; border-bottom:1px solid var(--edge);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  letter-spacing:-.02em;
}
.tc-rank{
  font-family:var(--mono); font-size:1.5rem; font-weight:600;
  line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.025em;
}
.tc-sub{font-size:.76rem;color:var(--txt3)}
.tc-chg{font-family:var(--mono);font-size:.8rem;font-weight:500;margin-top:4px}
.tc-up{color:var(--mint)}
.tc-down{color:var(--coral)}
.tc-flat{color:var(--txt3)}
.tc-meta{
  display:flex; align-items:center; gap:6px;
  margin-top:auto; padding-top:10px; border-top:1px solid var(--edge);
  flex-wrap:nowrap;
}
.tc-pill{
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  padding:2px 8px; border-radius:4px;
  flex:0 1 auto; min-width:0;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tc-rec{
  font-family:var(--mono); font-size:.7rem; color:var(--txt3);
  flex:none; white-space:nowrap;
}
.tc-since{color:var(--txt3);font-weight:400;font-size:.74rem}
.tc-cell{min-width:0}
.tc-grid{display:grid;gap:10px}
.tc-btns{display:flex;gap:6px;margin-top:9px}
.tc-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surf2); border:1px solid var(--edge); color:var(--txt2);
  border-radius:7px; padding:7px 8px; font-size:.78rem;
  text-decoration:none !important; cursor:pointer; font-family:var(--sans);
  white-space:nowrap; transition:all .14s ease;
}
.tc-btn:hover{border-color:var(--iris-dim);color:var(--txt);text-decoration:none !important}

/* ── 등록 당시와 비교 ───────────────────────────── */
.sc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.sc-top .chart-title{margin-bottom:0}
.sc-verdict{
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  padding:3px 10px; border-radius:4px;
}
.sc-since{font-size:.76rem;color:var(--txt3);margin-bottom:12px}
.sc-row{
  display:flex; align-items:center; gap:9px; padding:9px 0;
  border-bottom:1px solid var(--edge);
  font-family:var(--mono); font-size:.86rem; font-variant-numeric:tabular-nums;
}
.sc-label{
  flex:0 0 66px; font-family:var(--sans); font-size:.84rem;
  font-weight:500; color:var(--txt);
}
.sc-from{flex:1 1 0;text-align:right;color:var(--txt3)}
.sc-arrow{flex:0 0 16px;text-align:center;color:var(--txt4)}
.sc-to{flex:0 0 auto;min-width:92px;text-align:right;font-weight:600;color:var(--txt)}
.sc-pct{flex:0 0 72px;text-align:right;font-weight:600;font-size:.8rem}
.sc-delta{
  font-family:var(--sans); font-size:.84rem; color:var(--txt3);
  padding-top:10px; line-height:1.65;
}
.sc-delta b{font-weight:600;color:var(--txt2)}
.sc-foot{font-size:.8rem;color:var(--txt3);padding-top:10px;font-family:var(--sans)}
.sc-foot b{color:var(--coral)}
.sc-note{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--edge);
  font-size:.86rem; color:var(--txt2); line-height:1.65;
}

/* ── 진단 매트릭스 ──────────────────────────────── */
.diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.diag-cell{
  border:1px solid; border-radius:9px; padding:14px 16px;
  position:relative; min-height:74px; background:var(--surf);
}
.diag-name{font-size:.96rem;font-weight:600;margin-bottom:4px}
.diag-desc{font-size:.8rem;opacity:.85}
.diag-mark{
  position:absolute; top:-9px; right:11px; background:var(--iris);
  font-family:var(--mono); font-size:.64rem; font-weight:600;
  padding:2px 9px; border-radius:999px;
}
.diag-axis{
  display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:.68rem; color:var(--txt3); padding:2px 2px 10px;
}
.diag-note{
  border-top:1px solid var(--edge); padding-top:11px;
  font-size:.86rem; color:var(--txt2); line-height:1.65;
}
.diag-note b{color:var(--txt)}

/* ── 추이 그래프 ────────────────────────────────── */
.trend-box{padding:16px 18px 14px}
.tr-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.tr-chg{font-family:var(--mono);font-size:.88rem;font-weight:600}
.tr-up{color:var(--mint)}
.tr-down{color:var(--coral)}
.tr-flat{color:var(--txt3)}
.tr-foot{
  display:flex; justify-content:space-between; margin-top:7px;
  font-family:var(--mono); font-size:.68rem; color:var(--txt4);
}
.tr-peak{color:var(--mint);font-weight:500}
.tr-abs{display:block;margin-top:7px;font-size:.76rem;color:var(--txt3)}

/* ── 황금 키워드 ────────────────────────────────── */
.gk-box{padding:17px 19px}
.gk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.gk-sub{font-size:.76rem;color:var(--txt3);margin-top:-2px}
.gk-score{
  font-family:var(--mono); font-size:2.1rem; font-weight:600;
  line-height:1; letter-spacing:-.035em; flex:none;
  font-variant-numeric:tabular-nums;
}
.gk-row{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:11px 0 0; margin-top:12px; border-top:1px solid var(--edge);
}
.gk-k{font-size:.82rem;font-weight:500;color:var(--txt);flex:0 0 auto}
.gk-v{
  font-family:var(--mono); font-size:1rem; font-weight:600;
  color:var(--iris); font-variant-numeric:tabular-nums;
}
.gk-n{font-size:.74rem;color:var(--txt4);flex:1 1 100%}
.gk-season{
  margin-top:13px; padding:11px 13px; border-radius:8px; font-size:.83rem;
  display:flex; flex-direction:column; gap:2px;
}
.gk-season b{font-weight:600}
.gk-season span{font-size:.76rem;opacity:.85}
.gk-now{background:var(--iris-wash);color:var(--iris2);border:1px solid var(--iris-dim)}
.gk-soon{background:var(--mint-wash);color:var(--mint);border:1px solid rgba(70,190,138,.28)}
.gk-off{background:var(--slate-wash);color:var(--txt3);border:1px solid var(--edge)}

/* ── 약한 고리 ──────────────────────────────────── */
.ws-box{padding:17px 19px}
.ws-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.ws-sub{font-size:.76rem;color:var(--txt3);margin-top:-2px}
.ws-big{
  font-family:var(--mono); font-size:2.3rem; font-weight:600; line-height:1;
  letter-spacing:-.035em; flex:none; font-variant-numeric:tabular-nums;
}
.ws-big small{font-size:1rem;color:var(--txt3)}
.ws-strip{display:flex;gap:3px;margin:16px 0 9px}
.ws-cell{flex:1;height:12px;border-radius:3px}
.ws-legend{
  display:flex; flex-wrap:wrap; gap:12px; font-family:var(--mono);
  font-size:.7rem; color:var(--txt3);
}
.ws-lg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.ws-list{margin-top:14px;border-top:1px solid var(--edge);padding-top:4px}
.ws-row{
  display:flex; align-items:center; gap:9px; padding:7px 0; font-size:.83rem;
  border-bottom:1px solid var(--edge);
}
.ws-row:last-child{border-bottom:0}
.ws-rank{
  flex:0 0 18px; font-family:var(--mono); font-size:.7rem;
  color:var(--txt4); text-align:right;
}
.ws-dot{flex:0 0 7px;height:7px;border-radius:99px}
.ws-title{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--txt);
}
.ws-row.ws-open .ws-title{font-weight:600}
.ws-row.ws-hard .ws-title,.ws-row.ws-boss .ws-title{color:var(--txt3)}
.ws-lbl{flex:0 0 auto;font-family:var(--mono);font-size:.7rem;font-weight:500;white-space:nowrap}
.ws-note{
  margin-top:12px; padding-top:11px; border-top:1px solid var(--edge);
  font-size:.78rem; color:var(--txt3); line-height:1.65;
}

/* ── 차트 공통 ──────────────────────────────────── */
.chart-box{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart-box g.pt{cursor:pointer}
.chart-box g.pt circle{transition:r .12s ease,opacity .12s ease}
.donut-box{text-align:center;overflow:hidden}
.donut-box svg{max-width:100%;height:auto}
.donut-box .legend{margin-top:12px}
.legend .lg{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.8rem; color:var(--txt2); margin:0 8px;
}
.legend .lg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legend .lg b{font-family:var(--mono);color:var(--txt)}
.prog-label{font-size:.86rem;color:var(--txt2);font-weight:500;margin-bottom:5px}
.prog-label b{font-family:var(--mono);color:var(--iris)}

/* ── 요금 안내 ──────────────────────────────────── */
.pr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.pr-card{
  position:relative; background:var(--surf); border:1px solid var(--edge);
  border-radius:11px; padding:20px 18px;
  display:flex; flex-direction:column;
}
.pr-card.pr-cur{
  border-color:var(--iris-dim);
  background:linear-gradient(180deg,var(--iris-wash),var(--surf) 55%);
}
.pr-tag{
  position:absolute; top:-9px; left:16px; font-family:var(--mono);
  font-size:.6rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; border-radius:3px; padding:3px 8px;
}
.pr-tag.pr-now{background:var(--iris);color:#14100A}
.pr-tag.pr-pop{background:var(--iris-wash2);color:var(--iris2);border:1px solid var(--iris-dim)}
.pr-name{font-size:.94rem;font-weight:600;color:var(--txt)}
.pr-price{
  font-family:var(--mono); font-size:1.5rem; font-weight:600;
  letter-spacing:-.03em; margin-top:7px; color:var(--txt);
  font-variant-numeric:tabular-nums;
}
.pr-card.pr-cur .pr-price{color:var(--iris)}
.pr-per{font-size:.72rem;color:var(--txt3);font-weight:400;margin-left:2px}
.pr-blurb{margin:9px 0 14px;font-size:.78rem;color:var(--txt3);line-height:1.55;min-height:2.6em}
.pr-feats{
  list-style:none; margin:0; padding:14px 0 0;
  border-top:1px solid var(--edge);
  display:flex; flex-direction:column; gap:7px;
}
.pr-feats li{
  font-size:.79rem; color:var(--txt2); display:flex; gap:7px;
  align-items:flex-start; line-height:1.6;
}
.pr-feats li::before{
  content:"—"; color:var(--iris-dim); flex:0 0 auto;
  font-family:var(--mono); font-size:.7rem;
}
.pr-feats li b{color:var(--txt);font-weight:600}
.pr-no{color:var(--txt4);text-decoration:line-through}
.pr-feats li:has(.pr-no)::before{content:"·";color:var(--edge2)}

/* ── 이용 가이드 ────────────────────────────────── */
.gd-steps{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.gd-step{display:flex;gap:13px;align-items:flex-start}
.gd-n{
  flex:0 0 24px; height:24px; border-radius:6px;
  background:var(--iris-wash2); color:var(--iris2);
  font-family:var(--mono); font-size:.74rem; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
}
.gd-step b{font-size:.92rem;font-weight:600;color:var(--txt)}
.gd-step p{margin:3px 0 0;font-size:.84rem;color:var(--txt2);line-height:1.7}
.gd-card{padding:17px 19px;margin:0 0 10px}
.gd-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.gd-badge{
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  letter-spacing:.1em; background:var(--iris-wash2); color:var(--iris2);
  border-radius:3px; padding:3px 8px;
}
.gd-head b{font-size:.98rem;font-weight:600;color:var(--txt);letter-spacing:-.02em}
.gd-path{
  font-family:var(--mono); font-size:.68rem; color:var(--txt3);
  background:var(--surf2); border-radius:4px; padding:2px 7px;
  margin-left:auto;
}
.gd-what{margin:0 0 10px;font-size:.88rem;color:var(--txt);line-height:1.7}
.gd-how{font-size:.84rem;color:var(--txt2);line-height:1.75}
.gd-how code,.gd-what code{
  font-family:var(--mono); font-size:.8em; background:var(--iris-wash);
  color:var(--iris); border-radius:4px; padding:1px 6px;
}
.gd-tip{
  margin-top:11px; padding-top:10px; border-top:1px dashed var(--edge);
  font-size:.78rem; color:var(--txt3); line-height:1.65;
}

/* ── 약관·방침 ──────────────────────────────────── */
.lg-doc{line-height:1.8}
.lg-art{margin-bottom:20px}
.lg-art h3{font-size:.94rem;font-weight:600;margin:0 0 7px;color:var(--txt)}
.lg-art p{margin:5px 0;font-size:.85rem;color:var(--txt2)}
.lg-art b{color:var(--txt)}

/* ── 마이페이지 ─────────────────────────────────── */
.me-rows{display:flex;flex-direction:column;gap:0}
.me-row{
  display:flex; align-items:center; gap:14px; padding:12px 0;
  border-bottom:1px solid var(--edge);
}
.me-row:last-child{border-bottom:0}
.me-k{
  flex:0 0 96px; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--txt3);
}
.me-v{flex:1;font-size:.9rem;color:var(--txt);min-width:0;word-break:break-all}
.me-withdraw{margin-top:28px;text-align:right}
.me-withdraw a{font-size:.74rem;color:var(--txt4);text-decoration:underline}
.me-withdraw a:hover{color:var(--coral)}

/* ── 회원 탈퇴 ──────────────────────────────────── */
.wd-box{border-left:3px solid var(--coral);padding:20px 22px}
.wd-warn{font-size:.94rem;color:var(--txt);margin:0 0 4px}
.wd-list{margin:12px 0 18px;padding-left:20px}
.wd-list li{font-size:.85rem;color:var(--txt2);margin:6px 0;line-height:1.6}
.wd-label{display:block;font-size:.82rem;color:var(--txt3);margin-bottom:7px}
.wd-form .stTextInput input{
  max-width:220px; background:var(--surf2); border:1px solid var(--edge);
  border-radius:8px; padding:11px 13px;
}
.wd-btns{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}
.wd-danger{
  background:var(--coral) !important; border-color:var(--coral) !important;
  color:#14100A !important; font-weight:600;
}
.wd-danger:hover{background:#FF8A82 !important;border-color:#FF8A82 !important}

/* ── 관리 콘솔 ──────────────────────────────────── */
.kh-adm-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0 0 11px}
.kh-sel,.kh-amt{
  background:var(--surf2); border:1px solid var(--edge); color:var(--txt);
  border-radius:8px; padding:9px 12px; font-family:var(--sans); font-size:.86rem;
}
.kh-sel{flex:1 1 240px;min-width:0}
.kh-amt{flex:0 0 100px;font-family:var(--mono)}
.kh-adm-btn{flex:0 0 auto;padding:9px 16px}

/* ── 모달 (추적기 자세히) ───────────────────────── */
.kh-modal-back{
  position:fixed; inset:0; background:rgba(4,5,7,.78);
  z-index:60; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.kh-modal{
  position:relative; max-width:640px; width:100%;
  max-height:86vh; overflow-y:auto; padding:24px 26px;
  border-color:var(--edge2); box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.kh-modal-x{
  position:absolute; top:12px; right:14px; width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:7px; background:var(--surf2); border:1px solid var(--edge);
  color:var(--txt3); font-size:1rem; text-decoration:none !important;
  cursor:pointer;
}
.kh-modal-x:hover{color:var(--txt);border-color:var(--edge2)}

/* ── 로딩 도넛 ──────────────────────────────────── */
#kh-busy{
  position:fixed; inset:0; z-index:90; background:rgba(8,9,10,.86);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px;
}
.kh-donut{
  width:42px; height:42px; border-radius:50%;
  border:4px solid var(--edge2); border-top-color:var(--iris);
  animation:khSpin .8s linear infinite;
}
@keyframes khSpin{to{transform:rotate(360deg)}}
#kh-busy-msg{
  font-size:.88rem; font-weight:500; color:var(--txt2); margin:0;
}
@media (prefers-reduced-motion:reduce){.kh-donut{animation-duration:2s}}

/* ── 사업자 푸터 ────────────────────────────────── */
.kh-foot{
  margin-top:70px; padding:30px 0 10px;
  border-top:1px solid var(--edge);
}
.kh-foot-links{
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px;
  font-size:.82rem; margin-bottom:16px;
}
.kh-foot-links a{color:var(--txt3);text-decoration:none}
.kh-foot-links a:hover{color:var(--iris);text-decoration:none}
.kh-foot-links a b{color:var(--txt2);font-weight:600}
.kh-foot-links span{color:var(--edge2)}
.kh-foot-biz{
  margin:3px 0; font-family:var(--mono); font-size:.68rem;
  line-height:2; color:var(--txt4); text-align:center;
}
.kh-foot-biz b{color:var(--txt3);font-weight:400}
.kh-foot-biz i{font-style:normal;color:var(--edge2);margin:0 7px}
.kh-foot-copy{
  margin:14px 0 0; font-family:var(--mono); font-size:.64rem;
  color:#454C58; text-align:center;
}

/* ============================================================
   모바일  (≤820 / ≤640 / ≤400)
   ⚠️ 표는 억지로 밀어 넣지 않는다 — 첫 열만 고정하고 나머지는 민다.
   ============================================================ */
@media (max-width:820px){
  .block-container{max-width:none}
  .pr-grid{grid-template-columns:repeat(2,1fr)}
  .kh-row-split{grid-template-columns:1fr}
  .diag-grid{grid-template-columns:1fr}
  .hb-row{grid-template-columns:1fr;gap:4px;padding:9px 0;border-bottom:1px solid var(--edge)}
  .hb-kw{font-size:.86rem}
  .hb-track{height:22px}
  .track-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}

@media (max-width:640px){
  body{font-size:14.5px}
  .block-container{padding:0 14px 60px}
  .masthead{height:52px;gap:10px}
  .mast-logo{height:22px}
  .mast-name{font-size:.96rem}
  .mast-meta{font-size:.66rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  [role="tablist"]{margin-bottom:18px}
  [role="tab"]{padding:11px 11px;font-size:.84rem}
  [role="tabpanel"] [role="tab"]{padding:5px 11px;font-size:.78rem}
  /* 히어로 */
  .hero{padding:26px 2px 14px}
  .hero-lead{margin-top:16px}
  .hero-cap{line-height:1.75;font-size:.88rem}
  .hero-cap i{margin:0 4px}
  .hero-chip{font-size:.7rem;padding:4px 10px}
  .hero-stat{font-size:.66rem;margin-top:16px}
  .hs-part::before{margin:0 7px}
  .hs-src{flex-basis:100%;text-align:center;margin-top:4px}
  .hs-src::before{display:none}
  /* 검색창 — 세로로 쌓는다. 버튼이 손가락에 맞아야 한다 */
  .search-box{flex-direction:column;border-radius:var(--r)}
  /* iOS는 16px 미만 입력칸에서 화면을 확대한다 */
  .stTextInput input{font-size:16px;padding:13px 15px}
  .search-box .stButton{width:100%}
  .stButton button{width:100%;min-height:46px;padding:0 18px}
  /* 면 */
  .box{padding:15px 15px}
  .chart-box,.trend-box,.gk-box,.hr-box,.ws-box{padding:14px 14px}
  .gauge-wrap{padding:13px 14px}
  .brief-box{padding:14px 15px}
  .brief-head{font-size:1rem}
  .brief-reasons{font-size:.84rem;padding-left:16px}
  .note{font-size:.84rem;padding:11px 13px}
  .section-title{font-size:.98rem}
  .kpi{padding:13px 14px}
  .kpi-val{font-size:1.24rem}
  .kpi-label{font-size:.6rem;margin-bottom:6px}
  .kpi-sub{font-size:.72rem}
  .row{grid-template-columns:repeat(2,1fr) !important;gap:8px}
  /* 표 — 첫 열은 화면의 45%까지만 쓰고, 넘치면 단어 단위로 두 줄 */
  .kh-hint{display:block}
  .kh-t{font-size:.8rem}
  .kh-t td{padding:10px 11px}
  .kh-t th{padding:9px 11px;font-size:.6rem}
  .kh-t .kh-key{
    padding-right:13px; width:45vw; min-width:45vw; max-width:45vw;
    white-space:normal; word-break:keep-all; overflow-wrap:anywhere;
    line-height:1.4;
  }
  .kh-t .kh-key .kh-kw{
    display:-webkit-inline-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:2; overflow:hidden;
    max-width:calc(100% - 24px); vertical-align:top;
  }
  /* 상위노출 — 제목이 길면 손가락으로 밀어서 끝까지 본다 */
  .serp-row{gap:8px;padding:9px 5px;font-size:.83rem}
  .serp-title{overflow-x:auto;text-overflow:clip;scrollbar-width:none}
  .serp-title::-webkit-scrollbar{display:none}
  .serp-rank{flex:0 0 24px;font-size:.85rem}
  .serp-blogger{display:none}
  .serp-age{flex:0 0 56px;font-size:.72rem}
  /* 카드류 1열 */
  .track-grid{grid-template-columns:1fr}
  .track-card{min-height:0}
  .outline-grid,.title-grid{grid-template-columns:1fr}
  .pr-grid{grid-template-columns:1fr}
  /* 지표 막대 */
  .sb-name{flex:0 0 56px;font-size:.78rem}
  .sb-val{flex:0 0 74px;font-size:.74rem}
  .sb-total{font-size:1.3rem}
  .hr-big,.ws-big{font-size:1.9rem}
  .hr-lbl{flex:0 0 78px;font-size:.76rem}
  .gk-score{font-size:1.8rem}
  .ws-title{font-size:.79rem}
  .ws-cell{height:10px}
  /* 차트 가로 넘침 */
  .chart-box svg[viewBox^="0 0 760"]{min-width:520px}
  .donut-box svg{min-width:0}
  /* 모달은 아래에서 올라오는 판이 아니라 화면 가운데 (2026-08-29 제보) */
  .kh-modal-back{padding:14px}
  .kh-modal{padding:20px 18px;max-height:88vh}
  /* 푸터 */
  .kh-foot{margin-top:46px}
  .kh-foot-biz{font-size:.64rem;line-height:1.9}
  .kh-foot-biz i{margin:0 5px}
}

@media (max-width:400px){
  .hero-h{font-size:1.4rem}
  .kpi-val{font-size:1.14rem}
  .gk-n{font-size:.7rem}
  .serp-age{display:none}
  .row{grid-template-columns:1fr !important}
}

/* ============================================================
   UI/UX 개편 덧칠  (2026-09-22)
   앞의 규칙들을 덮어쓴다. 여기가 최종 모습이다.
   ============================================================ */

/* ── 면에 물성 주기 ─────────────────────────────
   평평한 다크는 플라스틱처럼 보인다. 카드 위쪽에 1px 빛을 얹으면
   같은 색이어도 '떠 있는 판'으로 읽힌다. */
.box,.chart-box,.trend-box,.gk-box,.hr-box,.ws-box,.gauge-wrap,
.brief-box,.outline-card,.serp-box,.kh-tw,.track-card,.kpi,.note,
.pr-card,.gd-card,.kh-modal{
  box-shadow:inset 0 1px 0 var(--hi);
}
/* 아주 옅은 그레인 — 넓은 다크 면이 죽지 않게 */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}
.block-container{position:relative;z-index:1}

/* ── 상단바: 붙어 있고 뒤가 흐려진다 ──────────── */
.masthead{
  position:sticky; top:0; z-index:30;
  height:56px; margin:0 -20px 2px; padding:0 20px;
  background:rgba(10,11,13,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--edge);
}
.mast-name{letter-spacing:-.045em}
.mast-name b{color:var(--iris)}
.mast-me{
  color:var(--txt2) !important; background:var(--surf2);
  border:1px solid var(--edge); border-radius:999px; padding:4px 11px;
}
.mast-me:hover{border-color:var(--iris-dim);color:var(--txt) !important}
.mast-sep{display:none}
.mast-guide{padding:4px 2px}

/* ── 상위 탭: 밑줄 대신 옅은 판 ────────────────── */
[role="tablist"]{border-bottom:1px solid var(--edge);gap:3px;padding:8px 0}
[role="tab"]{
  padding:8px 13px; border-radius:var(--r-sm); border-bottom:0;
  font-size:.87rem;
}
[role="tab"]:hover{border-bottom:0;background:var(--surf2);color:var(--txt)}
[role="tab"][aria-selected="true"]{
  border-bottom:0; background:var(--surf2); color:var(--txt);
  box-shadow:inset 0 1px 0 var(--hi);
}

/* ── 하위 탭: 세그먼트 컨트롤 ──────────────────── */
[role="tabpanel"] [role="tablist"]{
  display:inline-flex; gap:2px; padding:3px; border-bottom:0;
  background:var(--surf2); border:1px solid var(--edge);
  border-radius:12px; margin-bottom:22px; max-width:100%;
}
[role="tabpanel"] [role="tab"]{
  padding:7px 14px; border:0; border-radius:9px; background:transparent;
  font-size:.82rem;
}
[role="tabpanel"] [role="tab"]:hover{background:transparent;color:var(--txt)}
[role="tabpanel"] [role="tab"][aria-selected="true"]{
  background:var(--surf3); border:0; color:var(--txt); font-weight:600;
  box-shadow:inset 0 1px 0 var(--hi);
}

/* ── 히어로: 뒤에서 빛이 올라온다 ──────────────── */
.hero{position:relative;overflow:hidden;padding:64px 8px 22px}
.hero::before{
  content:""; position:absolute; top:-140px; left:50%;
  transform:translateX(-50%); width:740px; height:420px; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,var(--iris-wash),transparent 70%);
}
.hero > *{position:relative}
.hero-h{letter-spacing:-.055em}
.hero-cap em.ai{color:var(--iris2)}
.hero-cap em.aio{color:var(--mint)}
.hero-chip{border-radius:999px}
.hero-chip:hover{border-color:var(--edge2);color:var(--txt)}

/* ── 검색창: 모서리를 키우고 포커스에 보라 링 ──── */
.search-box{border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.search-box:focus-within{
  border-color:var(--iris); box-shadow:0 0 0 4px var(--iris-wash),0 12px 32px rgba(0,0,0,.35);
}
.stButton button{background:var(--iris);color:#0B0916}
.stButton button:hover{background:var(--iris2)}
.kh-btn-primary{background:var(--iris);border-color:var(--iris);color:#0B0916}
.kh-btn-primary:hover{background:var(--iris2);border-color:var(--iris2);color:#0B0916}
.kh-btn:hover{border-color:var(--iris-dim)}

/* ── 칩·알약 ─────────────────────────────────── */
.diag-mark,.outline-num,.mine-tag{color:#0B0916}
.kh-pill.on{background:var(--surf3);border-color:var(--edge2);
  color:var(--txt) !important;box-shadow:inset 0 1px 0 var(--hi)}
[role="tab"],.kh-pill,.tc-btn,.kh-btn{transition:all .14s ease}

/* ── 크레딧 배지 (상단) ───────────────────────── */
.mast-meta .kh-cr{
  font-family:var(--mono); font-size:.7rem; color:var(--mint);
  background:var(--mint-wash); border:1px solid rgba(61,220,151,.22);
  border-radius:999px; padding:3px 10px;
}

/* ── AI 진단 버튼: 보라 계열로 ─────────────────── */
.kh-ai-cta{
  background:linear-gradient(135deg,#15122B 0%,#1E1940 55%,#15122B 100%);
  border-color:var(--iris-dim); border-radius:16px;
}
.kh-ai-cta:hover{border-color:var(--iris)}
.kh-ai-cta::after{
  background:radial-gradient(120% 90% at 18% 0%,var(--iris-wash2),transparent 58%);
}
.kh-ai-badge{color:var(--iris2);border-color:var(--iris-dim)}
.kh-ai-sub b{color:var(--iris2)}

/* ── 추적 카드: 내 글은 보라, 돈은 민트 ─────────── */
.track-card{border-radius:var(--r)}
.track-card.mine{
  border-color:var(--iris-dim);
  background:linear-gradient(180deg,var(--iris-wash),var(--surf) 60%);
}
.track-card.mine:hover{border-color:var(--iris)}
.tc-tag{background:var(--iris-wash2);color:var(--iris2)}

/* ── 요금: 추천 플랜에 보라 ────────────────────── */
.pr-card{border-radius:16px}
.pr-card.pr-cur{
  border-color:var(--iris-dim);
  background:linear-gradient(180deg,var(--iris-wash),var(--surf) 58%);
}
.pr-card.pr-cur .pr-price{color:var(--iris2)}
.pr-tag.pr-now{background:var(--iris);color:#0B0916}
.pr-tag.pr-pop{background:var(--iris-wash2);color:var(--iris2);border-color:var(--iris-dim)}
/* 체크 표시를 —에서 네모 배지로 (요즘 결) */
.pr-feats li::before{
  content:""; width:14px; height:14px; border-radius:4px; margin-top:4px;
  background:var(--mint-wash); box-shadow:inset 0 0 0 1px rgba(61,220,151,.3);
}
.pr-feats li:has(.pr-no)::before{
  content:""; background:var(--surf3); box-shadow:inset 0 0 0 1px var(--edge);
}

/* ── 가이드 배지 ─────────────────────────────── */
.gd-n,.gd-badge{background:var(--iris-wash2);color:var(--iris2)}
.gd-how code,.gd-what code{background:var(--iris-wash);color:var(--iris2)}
.hint-chip{background:var(--iris-wash);color:var(--iris2);border-color:var(--iris-dim)}

/* ── 모달 ────────────────────────────────────── */
.kh-modal{border-radius:18px}
.kh-modal-back{background:rgba(6,7,9,.8);backdrop-filter:blur(3px)}
.kh-donut{border-top-color:var(--iris)}

/* ── 링크·포커스 ─────────────────────────────── */
a{color:var(--iris2)}
:focus-visible{outline-color:var(--iris)}
.note{border-left-color:var(--iris)}
.note-gold{border-left-color:var(--mint)}
.eyebrow{color:var(--iris2)}

/* ============================================================
   모바일 하단 탭바 — UX 최대 개선점.
   상단 탭을 손가락으로 밀어 찾는 대신, 엄지가 닿는 자리에 고정한다.
   ⚠️ 홈 인디케이터(아이폰 아래 막대)를 피하려면 safe-area를 더해야 한다.
   ============================================================ */
.kh-tabbar{display:none}
@media (max-width:640px){
  .kh-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:rgba(10,11,13,.9);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--edge);
    padding:7px 4px calc(9px + env(safe-area-inset-bottom,0px));
  }
  .kh-tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    text-decoration:none !important; font-family:var(--mono);
    font-size:.58rem; letter-spacing:.02em; color:var(--txt4);
  }
  .kh-tabbar a svg{width:19px;height:19px;display:block}
  .kh-tabbar a.on{color:var(--iris2)}
  /* 탭바가 콘텐츠를 가리지 않게 바닥을 비워둔다 */
  .block-container{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  /* 상단 탭은 모바일에서 감춘다 — 하단 탭바가 그 일을 한다 */
  .masthead + [role="tablist"]{display:none}
  .masthead{margin:0 -14px 10px;padding:0 14px;height:52px}
  .kh-foot{margin-bottom:8px}
}

/* ── 히어로 눈썹 배지 ───────────────────────────── */
.hero-kick{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--iris2);
  background:var(--iris-wash); border:1px solid var(--iris-dim);
  border-radius:999px; padding:5px 14px; margin-bottom:22px;
}
.hero-kick i{
  width:5px; height:5px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 8px var(--mint); font-style:normal; flex:0 0 auto;
}
@media (max-width:640px){
  .hero-kick{font-size:.58rem;padding:4px 11px;margin-bottom:14px}
}

/* ── 첫 화면 랜딩 — 검색창 아래가 텅 비어 있던 자리 ──
   ⚠️ 여기에 가짜 숫자를 넣지 않는다. 기능이 무엇인지만 말한다. */
.lp{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin:46px 0 0;
}
.lp-card{
  position:relative; background:var(--surf); border:1px solid var(--edge);
  border-radius:var(--r); padding:22px 20px 20px;
  box-shadow:inset 0 1px 0 var(--hi);
}
.lp-n{
  display:inline-block; font-family:var(--mono); font-size:.62rem;
  font-weight:600; letter-spacing:.14em; color:var(--iris2);
  background:var(--iris-wash); border-radius:4px; padding:3px 8px;
  margin-bottom:12px;
}
.lp-card b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.025em;
  margin-bottom:7px}
.lp-card p{margin:0;font-size:.84rem;color:var(--txt2);line-height:1.75}
.lp-card p em{font-style:normal;color:var(--txt);font-weight:500}
.lp-foot{
  margin:26px 0 0; text-align:center; font-size:.84rem; color:var(--txt3);
}
.lp-foot a{color:var(--mint);font-weight:500}
@media (max-width:820px){.lp{grid-template-columns:1fr;gap:10px;margin-top:34px}
  .lp-card{padding:17px 17px 16px}}

/* ── 추적 추가 줄 ──────────────────────────────
   ⚠️ 이 폼은 .search-box 클래스를 같이 쓴다(입력+버튼 구조가 같아서).
      그런데 검색창은 한 덩어리 알약이라 overflow:hidden이 걸려 있어,
      뒤에 붙는 체크박스가 상자 밖으로 잘려 나갔다 (2026-09-22).
      여기서는 껍데기를 벗기고 부품끼리 나란히 놓는다. */
.search-box.kh-track-add{
  max-width:none; flex-wrap:wrap; overflow:visible;
  border:0; background:transparent; box-shadow:none;
  gap:10px; align-items:center; margin:0 0 20px;
}
.search-box.kh-track-add:focus-within{box-shadow:none;border:0}
.search-box.kh-track-add .stTextInput{
  flex:1 1 240px; min-width:0; max-width:420px; background:var(--surf);
  border:1px solid var(--edge); border-radius:var(--r-sm);
  box-shadow:inset 0 1px 0 var(--hi);
  transition:border-color .14s ease,box-shadow .14s ease;
}
.search-box.kh-track-add .stTextInput:focus-within{
  border-color:var(--iris); box-shadow:0 0 0 3px var(--iris-wash);
}
.search-box.kh-track-add .stTextInput input{padding:12px 15px;font-size:.92rem}
.search-box.kh-track-add .stButton{flex:0 0 auto}
.search-box.kh-track-add .stButton button{
  border-radius:var(--r-sm); padding:0 22px; height:46px; width:auto;
}
.search-box.kh-track-add .kh-check{flex:0 0 auto;white-space:nowrap}
@media (max-width:640px){
  .search-box.kh-track-add{flex-direction:row}
  .search-box.kh-track-add .stTextInput{flex:1 1 100%}
  .search-box.kh-track-add .stButton,
  .search-box.kh-track-add .stButton button{flex:1 1 auto;width:100%}
  .search-box.kh-track-add .kh-check{flex:1 1 100%;white-space:normal}
}

/* ── 돈 숫자 강조 ──────────────────────────────
   화면에서 딱 하나만 강조한다. 단가가 이 제품의 머릿수라
   첫 칸만 민트로 띄우고 나머지 지표는 조용히 둔다. */
.kh-money{height:100%}
.kh-money .kpi{
  border-color:var(--mint-dim);
  background:linear-gradient(180deg,var(--mint-wash),var(--surf) 72%);
}
.kh-money .kpi-val{color:var(--mint)}
.kh-money .kpi-label{color:var(--mint2)}

/* ============================================================
   밝은 톤 덧칠  (2026-09-22 밤)

   ⚠️ 위쪽 규칙들은 다크 바탕을 전제로 쓰였다.
      다크에서 면을 띄우는 방법은 '위쪽에 1px 빛'(inset highlight)이지만,
      밝은 바탕에서 같은 걸 하면 아무 일도 일어나지 않는다.
      밝은 화면에서 면을 띄우는 건 '아래로 떨어지는 옅은 그림자'다.
      토큰만 바꾸고 이 차이를 안 고치면 카드가 전부 종이처럼 납작해진다.
      여기가 그 차이를 메우는 마지막 층이다.
   ============================================================ */

/* 1. 그레인 끄기 — 다크 면이 죽지 않게 깔았던 잡티다.
      밝은 바탕에서는 화면이 지저분해 보이게만 한다. */
body::before{display:none}

/* 2. 인셋 하이라이트 → 드롭 섀도우.
      테두리는 그대로 두고 그림자로 한 겹 띄운다. */
.box,.chart-box,.trend-box,.gk-box,.hr-box,.ws-box,.gauge-wrap,
.brief-box,.outline-card,.serp-box,.kh-tw,.track-card,.kpi,
.pr-card,.gd-card,.lp-card{
  box-shadow:var(--sh);
}
.note{box-shadow:none}
[role="tab"][aria-selected="true"],
[role="tabpanel"] [role="tab"][aria-selected="true"],
.kh-pill.on,
.search-box.kh-track-add .stTextInput{box-shadow:var(--sh)}

/* 3. 붙어 있는 면들 — 흰 유리로 */
.masthead{background:rgba(255,255,255,.78)}
@media (max-width:640px){
  .kh-tabbar{background:rgba(255,255,255,.92);
    box-shadow:0 -1px 0 var(--edge),0 -6px 20px rgba(16,24,40,.05)}
}
#kh-busy{background:rgba(251,251,253,.86)}
.kh-modal-back{background:rgba(16,24,40,.38);backdrop-filter:blur(3px)}
.kh-modal{box-shadow:0 24px 60px rgba(16,24,40,.18),0 2px 8px rgba(16,24,40,.08)}

/* 4. 검색창 — 거대한 검은 그림자 대신 옅게 떠 있기 */
.search-box{box-shadow:0 2px 6px rgba(16,24,40,.05),0 10px 28px rgba(16,24,40,.07)}
.search-box:focus-within{
  border-color:var(--iris);
  box-shadow:0 0 0 4px var(--iris-wash),0 10px 28px rgba(16,24,40,.09);
}

/* 5. 짙은 색 위의 글자는 흰색.
      다크 시절에는 채색 칩 위에 먹색을 올렸다(밝은 민트·코랄이었으니까).
      지금 상태색은 어두워졌으니 반대로 흰 글자가 맞다. */
/* 상태 칩은 ui.py가 인라인으로 '옅은 배경 + 진한 글자'를 박는다 —
   여기서 색을 덮어쓰면 안 된다. 진짜로 짙은 면에 얹히는 것만 흰 글자. */
/* ⚠️ .kh-chip은 tables.py가 인라인으로 '옅은 배경 + 진한 글자'를 박는다.
      여기서 흰 글자를 강제하면 표 안의 등급 칩이 전부 사라진다. */
.diag-mark,.outline-num,.mine-tag,.hb-score{color:#FFFFFF !important}
.chip,.tc-pill,.brief-tag,.sc-verdict{font-weight:600}
/* 빈도 칩은 배경 진하기로 세기를 나타낸다 — 옅은 쪽에 흰 글자는 안 읽힌다.
   그래서 글자는 늘 진한 아이리스로 두고 배경만 옅게↔진하게 움직인다. */
.wchip{color:var(--iris) !important}
.wchip b{background:rgba(255,255,255,.7);color:var(--iris)}
.stButton button,.kh-btn-primary,.kh-btn-primary:hover,
.kh-pill.on,[role="tabpanel"] [role="tab"][aria-selected="true"].on,
.pr-tag.pr-now,.wd-danger{color:#FFFFFF !important}
.wd-danger:hover{background:#C93A50 !important;border-color:#C93A50 !important}
.social-btn.kakao{color:#191600 !important}

/* 6. 선택된 탭·알약 — 보라 채움은 상단 탭에만 남기고
      나머지는 조용한 회색 판으로 (밝은 화면에서 보라 덩어리가 많으면 시끄럽다) */
[role="tabpanel"] [role="tab"][aria-selected="true"]{
  background:var(--surf); color:var(--txt) !important;
}
.kh-pill.on{
  background:var(--iris); border-color:var(--iris); color:#FFFFFF !important;
}

/* 7. AI 진단 버튼 — 짙은 보라 유리판에서 옅은 보라 종이로 */
.kh-ai-cta{
  background:linear-gradient(135deg,#F6F4FF 0%,#EFECFE 55%,#F6F4FF 100%);
  border-color:var(--iris-dim);
}
.kh-ai-cta:hover{
  border-color:var(--iris);
  box-shadow:0 6px 18px rgba(91,75,214,.12);
}
.kh-ai-badge{background:#FFFFFF}
.kh-ai-cta,.kh-ai-cta *{color:var(--txt)}
.kh-ai-badge,.kh-ai-sub b{color:var(--iris) !important}

/* 8. 링크·액센트 — 밝은 바탕에서는 옅은 쪽(iris2)이 아니라 진한 쪽이 읽힌다 */
a{color:var(--iris)}
.hero-cap em.ai,.eyebrow,.gd-n,.gd-badge,.lp-n,.hero-kick,
.tc-tag,.pr-tag.pr-pop,.hint-chip,.gd-how code,.gd-what code,
.pr-card.pr-cur .pr-price,.mast-name b{color:var(--iris) !important}
@media (max-width:640px){.kh-tabbar a.on{color:var(--iris)}}

/* 9. 돈 색도 진한 쪽으로 */
.hero-cap em.aio,.lp-foot a,.kh-money .kpi-val{color:var(--mint) !important}
.mast-meta .kh-cr{color:var(--mint);border-color:rgba(10,157,107,.28)}
.pr-feats li::before{box-shadow:inset 0 0 0 1px rgba(10,157,107,.34)}

/* 10. 히어로 뒤 빛 — 밝은 바탕에서는 아주 옅게만 */
.hero::before{
  background:radial-gradient(50% 50% at 50% 50%,rgba(91,75,214,.06),transparent 70%);
}
.hero-kick i{box-shadow:0 0 0 3px rgba(10,157,107,.16)}

/* 11. 표 — 머리글을 한 톤 눌러 본문과 구분 */
thead th,.kh-th{background:var(--surf2) !important}
tbody tr:hover td{background:var(--surf2)}

/* 12. 순위 밖 / 회색 문구 대비 보정 */
.kh-foot-copy{color:var(--txt4)}

/* ── 조용한 한 줄 도움말 ────────────────────────
   상자(.note)는 에러와 텅 빈 상태에만. 부가설명은 여기로 내린다. */
.kh-tip{
  margin:-6px 0 18px; padding:0;
  font-size:.82rem; line-height:1.7; color:var(--txt3);
}
.kh-tip b{color:var(--txt2);font-weight:500}
.kh-tip a{color:var(--iris)}
.kh-tip code{
  font-family:var(--mono); font-size:.76rem; color:var(--txt2);
  background:var(--surf2); border-radius:4px; padding:1px 5px;
}
/* 상자는 더 조용하게 — 왼쪽 선 하나로 */
.note{
  background:var(--surf2); border:1px solid var(--edge);
  border-left:2px solid var(--iris); border-radius:var(--r-sm);
  padding:13px 16px; font-size:.86rem; color:var(--txt2); line-height:1.75;
}
.note b{color:var(--txt);font-weight:600}
/* 접히는 각주 — 긴 면책·설명은 여기로 */
.kh-more{margin:14px 0 18px;font-size:.82rem;color:var(--txt3)}
.kh-more > summary{
  cursor:pointer; color:var(--txt3); list-style:none;
  display:inline-flex; align-items:center; gap:5px;
  border-bottom:1px dashed var(--edge2); padding-bottom:1px;
}
.kh-more > summary::-webkit-details-marker{display:none}
.kh-more > summary::after{content:"▾";font-size:.7rem}
.kh-more[open] > summary::after{content:"▴"}
.kh-more > summary:hover{color:var(--txt2)}
.kh-more p{margin:10px 0 0;line-height:1.75}

/* ── 추적 카드 격자 (2026-09-22) ──────────────────
   ⚠️ .tc-grid에 열 정의가 없어서 1280px 화면에서도 카드가 한 줄에
      하나씩 떨어졌다 — 8개를 보려면 스크롤을 한참 내려야 했다.
      카드 안에 있어야 할 버튼 줄(.tc-btns)도 카드 밖 띠처럼 떠 있었다.
      여기서 둘 다 바로잡는다: 격자를 채우고, 버튼은 카드의 바닥으로. */
.tc-grid{grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:12px}
.tc-cell{display:flex;flex-direction:column}
.tc-cell > .track-card{
  flex:1; margin-bottom:0;
  border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:0;
  box-shadow:none;
}
.tc-btns{
  margin-top:0; padding:9px 10px; gap:7px;
  background:var(--surf2); border:1px solid var(--edge); border-top:0;
  border-radius:0 0 var(--r) var(--r); box-shadow:var(--sh);
}
.tc-cell > .track-card.mine + .tc-btns{border-color:var(--iris-dim)}
.tc-cell > .track-card.watching + .tc-btns{border-style:dashed;border-top:0}
.tc-btn{background:var(--surf)}
@media (max-width:640px){
  .tc-grid{grid-template-columns:1fr}
}

/* ============================================================
   개성 넣기  (2026-09-22 3차)

   ⚠️ 밝게 바꿨더니 "깔끔한데 개성이 없다"는 말이 나왔다. 맞는 말이었다.
      흰 카드 여덟 개가 같은 테두리·같은 여백·같은 그림자로 쌓여 있으면
      그건 디자인이 아니라 기본값이다. 어느 제품인지 알 수가 없다.
      그래서 셋을 넣는다 —
        1) 화면마다 '주인공' 하나를 어두운 판(슬랩)으로 못 박는다.
           이 제품이 파는 건 단가라서, 단가가 그 판의 머릿수다.
        2) 제목에 액센트 레일을 달아 눈이 걸릴 곳을 만든다.
        3) 숫자 타이포를 키우고 자간을 조인다 — 계측기처럼 보이게.
      어두운 판은 화면에 하나만. 둘이 되는 순간 다시 다크 테마가 된다.
   ============================================================ */

/* ── 판정 슬랩 — 이 제품의 얼굴 ──────────────────── */
.kh-slab{
  position:relative; overflow:hidden;
  background:var(--ink); border-radius:20px;
  padding:26px 28px 22px; margin:0 0 16px;
  box-shadow:0 12px 32px rgba(16,24,40,.16), 0 2px 6px rgba(16,24,40,.10);
}
.kh-slab::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(85% 130% at 10% 0%,rgba(139,124,255,.18),transparent 62%);
}
.kh-slab > *{position:relative}
.slab-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:18px; margin-bottom:22px;
}
.slab-kw{font-size:1.1rem;font-weight:600;color:var(--on-ink);letter-spacing:-.035em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slab-kw i{
  display:block; font-style:normal; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-ink3);
  margin-bottom:7px;
}
.slab-score{text-align:right;flex:0 0 auto;font-family:var(--mono)}
.slab-score b{
  display:block; font-size:1.7rem; font-weight:600; line-height:1;
  color:var(--iris-lit); letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.slab-score i{
  font-style:normal; font-size:.62rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--on-ink3);
}
.slab-grid{
  display:grid; grid-template-columns:1.55fr 1fr 1fr 1fr; gap:20px; align-items:end;
}
.slab-cell{min-width:0}
.slab-cell .v{
  font-family:var(--mono); font-size:1.32rem; font-weight:600; line-height:1.05;
  color:var(--on-ink); letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.slab-cell .l{margin-top:8px;font-size:.73rem;color:var(--on-ink2);line-height:1.5}
.slab-cell.money .v{font-size:2.15rem;color:var(--mint-lit)}
.slab-foot{
  margin-top:20px; padding-top:15px; border-top:1px solid rgba(255,255,255,.09);
  font-size:.86rem; color:var(--on-ink2); line-height:1.7;
}
.slab-foot b{color:var(--on-ink);font-weight:600}
@media (max-width:820px){
  .kh-slab{padding:20px 20px 18px;border-radius:16px}
  .slab-grid{grid-template-columns:1fr 1fr;gap:17px 14px}
  .slab-cell.money{grid-column:1/-1}
  .slab-cell.money .v{font-size:1.85rem}
  .slab-score b{font-size:1.4rem}
}

/* ── 제목에 액센트 레일 ──────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  letter-spacing:.15em;
}
.eyebrow::before{
  content:""; width:14px; height:2px; border-radius:2px;
  background:var(--iris); flex:none;
}
.section-title{letter-spacing:-.035em}

/* ── 숫자는 계측기처럼 ───────────────────────────── */
.kpi-val,.gk-n,.tc-rank,.sc-row,.hb-score,.tr-chg{letter-spacing:-.035em}
.kpi-val{font-size:1.44rem}
td.num,th.num{font-variant-numeric:tabular-nums}

/* ── 바닥이 내려갔으니 카드가 덜 애써도 뜬다 ───────── */
.box,.chart-box,.trend-box,.gk-box,.hr-box,.ws-box,.gauge-wrap,
.brief-box,.outline-card,.serp-box,.kh-tw,.track-card,.kpi,
.pr-card,.gd-card,.lp-card{border-color:var(--edge)}
.masthead{background:rgba(237,239,244,.82)}
@media (max-width:640px){.kh-tabbar{background:rgba(255,255,255,.94)}}
#kh-busy{background:rgba(237,239,244,.88)}
.tc-btn{background:var(--surf)}
.slab-foot p{margin:0}
.slab-foot p + p{margin-top:7px}

/* ── 첫 화면 잉크 슬랩 (지금 가장 비싼 키워드) ────── */
.slab-lp{margin:44px 0 0}
.slab-lp .slab-kw{font-size:1rem;white-space:normal}
.slab-more{
  flex:none; font-size:.8rem; color:var(--on-ink2) !important;
  text-decoration:none !important; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:2px;
}
.slab-more:hover{color:var(--on-ink) !important;border-color:rgba(255,255,255,.4)}
.slab-rank{display:flex;flex-direction:column;gap:2px}
.sr-item{
  display:flex; align-items:center; gap:14px;
  padding:13px 4px; text-decoration:none !important;
  border-top:1px solid rgba(255,255,255,.07);
  transition:background .14s ease;
}
.sr-item:first-child{border-top:0}
.sr-item:hover{background:rgba(255,255,255,.04)}
.sr-n{
  flex:none; font-family:var(--mono); font-size:.68rem; color:var(--on-ink3);
  width:16px;
}
.sr-kw{
  flex:1; min-width:0; font-size:.98rem; font-weight:500; color:var(--on-ink);
  letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sr-bid{
  flex:none; font-family:var(--mono); font-size:1.24rem; font-weight:600;
  color:var(--mint-lit); letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.sr-bid i{font-style:normal;font-size:.78rem;margin-left:2px;opacity:.7}
@media (max-width:640px){
  .slab-lp{margin-top:32px}
  .sr-kw{font-size:.9rem}
  .sr-bid{font-size:1.06rem}
}

/* ============================================================
   31 · PEACH FUZZ  (2026-09-23) — 최종 층. 여기가 이긴다.

   ⚠️ 60개 시안 중 덕현님이 직접 고른 방향 (31번 + 문구 H).
      복숭아빛 바닥 · 코랄 하나 · 크게 둥근 흰 카드.
      어두운 판(잉크 슬랩)은 버렸다 — 판정도 흰 카드 위 코랄 숫자로 띄운다.
      색을 바꿀 땐 아래 :root 한 곳만 고치면 된다.
      차트·칩의 인라인 색은 ui.py 상단 토큰 10줄이 따로 맡는다 (같이 맞출 것).
   ============================================================ */
:root{
  --bg:#FFF1EA;  --bg2:#FDE9E0;
  --surf:#FFFFFF; --surf2:#FFF7F3; --surf3:#FCE6DC;
  --edge:#F7D9CD; --edge2:#EEC2B1;
  --txt:#3A2320; --txt2:#6B4E47; --txt3:#A07F76; --txt4:#C3A69D;
  /* 액센트는 이름만 iris로 남아 있다 — 사이트 전체의 '행동' 색이 이 변수를 쓴다 */
  --iris:#F2604E; --iris2:#FF6B5A; --iris-dim:#F9C3B6;
  --iris-wash:rgba(255,107,90,.08); --iris-wash2:rgba(255,107,90,.15);
  --coral:#B42C45; --coral-wash:rgba(180,44,69,.09);
  --sh:0 1px 2px rgba(58,35,32,.04), 0 4px 14px rgba(255,107,90,.08);
  --sh-lg:0 10px 28px rgba(255,107,90,.16), 0 2px 6px rgba(58,35,32,.05);
  --r:20px; --r-sm:14px;
  --sans:'Plus Jakarta Sans','Pretendard','IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
}
html,body,.stApp{background:var(--bg)}

/* ── 상단바 · 탭 ── */
.masthead{background:rgba(255,241,234,.86);border-bottom-color:var(--edge)}
.mast-me{background:var(--surf);border-color:var(--edge);border-radius:999px}
[role="tablist"]{border-bottom-color:var(--edge)}
[role="tab"]{border-radius:999px}
[role="tab"]:hover{background:rgba(255,255,255,.7)}
[role="tab"][aria-selected="true"]{background:var(--surf);color:var(--txt);box-shadow:var(--sh)}
[role="tabpanel"] [role="tablist"]{background:rgba(255,255,255,.55);border-color:var(--edge);border-radius:999px}
[role="tabpanel"] [role="tab"]{border-radius:999px}
[role="tabpanel"] [role="tab"][aria-selected="true"]{background:var(--surf);color:var(--txt) !important;box-shadow:var(--sh)}

/* ── 히어로 — 문구 H ── */
.hero::before{
  top:-180px; width:900px; height:520px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,160,120,.42),transparent 70%);
}
.hero-kick{background:var(--surf);border-color:var(--edge);color:var(--iris) !important}
.hero-kick i{background:var(--iris);box-shadow:0 0 0 3px rgba(255,107,90,.18)}
.hero .hero-h{font-weight:800;letter-spacing:-.05em;color:var(--txt)}
.hero .hero-h em{color:var(--iris);font-weight:800}
.hero-cap{color:var(--txt2)}
.hero-cap b{color:var(--txt)}
.hero-chip{background:var(--surf);border-color:var(--edge);color:var(--txt2)}
.hero-chip:hover{border-color:var(--iris-dim);color:var(--txt)}

/* ── 검색창 · 버튼 — 알약 ── */
.search-box{border-radius:999px;border-color:var(--edge);background:var(--surf);
  box-shadow:0 10px 28px rgba(255,107,90,.14),0 1px 2px rgba(58,35,32,.04)}
.search-box:focus-within{border-color:var(--iris);box-shadow:0 0 0 4px rgba(255,107,90,.14),0 10px 28px rgba(255,107,90,.16)}
.search-box .stButton button{border-radius:999px;margin:5px;height:auto;padding:0 24px}
.stButton button,.kh-btn-primary{background:var(--iris);border-color:var(--iris);color:#fff !important}
.stButton button:hover,.kh-btn-primary:hover{background:#E0503F;border-color:#E0503F}
.kh-btn{border-radius:999px}
.kh-pill{border-radius:999px;background:var(--surf);border-color:var(--edge)}
.kh-pill.on{background:var(--iris);border-color:var(--iris);color:#fff !important;box-shadow:none}
.search-box.kh-track-add{border-radius:0;box-shadow:none;background:transparent}
.search-box.kh-track-add .stTextInput{border-radius:999px;border-color:var(--edge)}
.search-box.kh-track-add .stButton button{margin:0;height:46px}

/* ── 카드 — 크게 둥글고, 테두리는 복숭아 헤어라인 ── */
.box,.chart-box,.trend-box,.gk-box,.hr-box,.ws-box,.gauge-wrap,.brief-box,
.outline-card,.serp-box,.kh-tw,.track-card,.kpi,.pr-card,.gd-card,.lp-card{
  border-color:var(--edge); border-radius:var(--r); box-shadow:var(--sh);
}
.tc-cell > .track-card{border-radius:var(--r) var(--r) 0 0}
.tc-btns{border-color:var(--edge);border-radius:0 0 var(--r) var(--r)}
.lp-n{background:var(--iris-wash2);color:var(--iris) !important;border-radius:999px}
.eyebrow::before{background:var(--iris)}
.note{background:var(--surf);border-color:var(--edge);border-left-color:var(--iris)}

/* ── 판정 슬랩 — 잉크판 대신 흰 카드 + 코랄 숫자 ── */
.kh-slab{
  background:var(--surf); border:1px solid var(--edge); border-radius:24px;
  box-shadow:0 12px 32px rgba(255,107,90,.16),0 2px 6px rgba(58,35,32,.05);
}
.kh-slab::before{background:radial-gradient(80% 120% at 0% 0%,rgba(255,160,120,.16),transparent 60%)}
.slab-kw{color:var(--txt)}
.slab-kw i{color:var(--txt3)}
.slab-score b{color:var(--iris)}
.slab-score i{color:var(--txt3)}
.slab-cell .v{color:var(--txt)}
.slab-cell .l{color:var(--txt3)}
.slab-cell.money .v{color:var(--iris)}
.slab-foot{border-top-color:var(--edge);color:var(--txt2)}
.slab-foot b{color:var(--txt)}
/* 첫 화면 '지금 가장 비싼 키워드' */
.slab-more{color:var(--txt3) !important;border-bottom-color:var(--edge2)}
.slab-more:hover{color:var(--iris) !important;border-bottom-color:var(--iris)}
.sr-item{border-top-color:var(--edge)}
.sr-item:hover{background:var(--surf2)}
.sr-n{color:var(--txt4)}
.sr-kw{color:var(--txt)}
.sr-bid{color:var(--iris)}

/* ── AI 진단 버튼 — 복숭아 종이 ── */
.kh-ai-cta{background:linear-gradient(135deg,#FFF7F3 0%,#FFE9E0 100%);border-color:var(--iris-dim);border-radius:var(--r)}
.kh-ai-cta:hover{border-color:var(--iris);box-shadow:0 8px 22px rgba(255,107,90,.16)}
.kh-ai-badge{background:var(--surf);border-color:var(--iris-dim)}
.kh-ai-badge,.kh-ai-sub b{color:var(--iris) !important}

/* ── 표 ── */
thead th,.kh-th{background:var(--surf2) !important}
tbody tr:hover td{background:#FFFAF7}
.mast-meta .kh-cr{color:var(--iris);background:var(--iris-wash);border-color:var(--iris-dim)}

/* ── 모바일 하단 탭바 ── */
@media (max-width:640px){
  .kh-tabbar{background:rgba(255,255,255,.94);border-top-color:var(--edge)}
  .kh-tabbar a.on{color:var(--iris)}
  .search-box{border-radius:22px}
  .search-box .stButton button{margin:0 5px 5px;padding:13px 0}
}

/* ── 푸터 — 항목마다 한 줄 (2026-09-23 요청) ──
   예전엔 사업자 정보 여덟 개를 가운데점으로 두 줄에 몰아 써서
   작은 글씨가 줄줄이 붙어 읽히지 않았다. 이름표 + 값 한 쌍씩 한 줄. */
.kh-foot{border-top-color:var(--edge);padding-top:34px}
.kh-foot-links{gap:6px 10px;margin-bottom:22px}
.kh-foot-links a{color:var(--txt2)}
.kh-foot-links a:hover{color:var(--iris)}
.kh-foot-links span{color:var(--edge2)}
dl.kh-foot-biz{
  display:flex; flex-direction:column; gap:5px;
  width:fit-content; max-width:100%; margin:0 auto; padding:0;
  font-family:var(--sans); font-size:.78rem; line-height:1.6;
  color:var(--txt2); text-align:left;
}
dl.kh-foot-biz > div{display:flex;gap:14px;align-items:baseline}
dl.kh-foot-biz dt{flex:0 0 9.8em;color:var(--txt3);font-size:.74rem;margin:0;white-space:nowrap}
dl.kh-foot-biz dd{margin:0;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
dl.kh-foot-biz dd b{color:var(--txt);font-weight:700}
.kh-foot-copy{color:var(--txt4);margin-top:22px}
@media (max-width:640px){
  dl.kh-foot-biz{width:100%;font-size:.76rem}
  dl.kh-foot-biz > div{gap:10px}
  dl.kh-foot-biz dt{flex-basis:9.2em;font-size:.7rem}
}

/* ── 돈 판정 칩 (슬랩 오른쪽 위) — 2026-09-23, 기회 점수 자리를 대신한다 ── */
.slab-verdict{
  flex:none; align-self:flex-start; border-radius:999px;
  padding:6px 14px; font-size:.84rem; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap;
}
.slab-verdict.tone-good{background:#DCEFE9;color:#175247}
.slab-verdict.tone-warn{background:#FBF2E1;color:#8A6420}
.slab-verdict.tone-bad{background:#FAEAE5;color:#9E3E28}
@media (max-width:640px){.slab-verdict{font-size:.76rem;padding:5px 11px}}

/* ── 관심 키워드 카드 (2026-09-23, 예전 순위 추적) — 큰 숫자는 단가 ── */
.tc-rank.tc-money{color:var(--iris)}
.tc-verdict{font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.tc-verdict.tone-good{background:#DCEFE9;color:#175247}
.tc-verdict.tone-warn{background:#FBF2E1;color:#8A6420}
.tc-verdict.tone-bad{background:#FAEAE5;color:#9E3E28}
.track-card{min-height:0}
/* 카드 버튼 줄 — 폼으로 감싼 버튼('빼기')도 링크 버튼과 같은 폭으로 늘린다 */
.tc-btns > form{flex:1;display:flex;min-width:0}
.tc-btns > form .tc-btn{flex:1;width:100%}
.tc-btns > *{flex:1 1 0;min-width:0}
.tc-btns > a.tc-btn{padding-left:0;padding-right:0}

/* ============================================================
   안내 카드 (2026-09-23) — '왼쪽 색 줄 + 회색 글' 공지 상자를 전부 걷어냈다.
   ui.note()가 이 모양 하나만 뱉는다:
     흰 카드 · 복숭아빛 둥근 아이콘 · 굵은 한 줄 · 흐린 한 줄 · 알약 버튼
   종류(ks-empty / ks-wait / ks-error / ks-ok / ks-info)는 아이콘 색만 바꾼다.
   ============================================================ */
.kh-state{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-start; gap:16px;
  background:var(--surf); border:0; border-radius:24px;
  padding:20px 22px; margin:0 0 14px;
  box-shadow:0 1px 2px rgba(58,35,32,.04), 0 10px 30px rgba(255,107,90,.10);
}
/* 오른쪽으로 갈수록 아주 옅게 물든다 — '공지'가 아니라 화면의 한 조각으로 보이게.
   (둥근 빛 번짐은 화면에서 얼룩처럼 보여서 버렸다) */
.kh-state{background:linear-gradient(100deg,#FFFFFF 55%,#FFF5F0 100%)}
.ks-ic{
  flex:none; width:46px; height:46px; border-radius:16px;
  display:grid; place-items:center;
  background:linear-gradient(145deg,#FFE3D8 0%,#FFD0C0 100%);
  color:var(--iris);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.ks-ic svg{width:23px;height:23px}
.ks-body{flex:1;min-width:0;position:relative;z-index:1;align-self:center}
.ks-t{margin:0;font-size:1.02rem;font-weight:700;letter-spacing:-.03em;
  color:var(--txt);line-height:1.45}
.ks-s,.ks-p{margin:4px 0 0;font-size:.88rem;color:var(--txt2);line-height:1.65}
.ks-p{margin-top:2px}
.ks-t b,.ks-s b,.ks-p b{color:var(--iris);font-weight:700}
.ks-s small,.ks-p small,.ks-t small{display:block;margin-top:6px;font-size:.74rem;
  color:var(--txt4);font-family:var(--mono);word-break:break-all;font-weight:400}
.ks-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ks-btn{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px; padding:8px 16px;
  font-size:.84rem; font-weight:600; letter-spacing:-.02em;
  background:var(--surf2); color:var(--txt2) !important;
  text-decoration:none !important; transition:all .15s ease;
}
.ks-btn::after{content:"→";font-weight:500;transition:transform .15s ease}
.ks-btn:hover{background:var(--surf3);color:var(--txt) !important}
.ks-btn:hover::after{transform:translateX(2px)}
.ks-btn.on{background:var(--iris);color:#fff !important;box-shadow:0 6px 16px rgba(242,96,78,.25)}
.ks-btn.on:hover{background:#E0503F}

/* 종류별 아이콘 색 */
.ks-wait  .ks-ic{background:linear-gradient(145deg,#FFE9DC 0%,#FFD9C4 100%);color:#E8743F}
.ks-error .ks-ic{background:linear-gradient(145deg,#FDE3E3 0%,#F9CDD2 100%);color:var(--coral)}
.ks-ok    .ks-ic{background:linear-gradient(145deg,#DDF3EA 0%,#C7EBDD 100%);color:#0A8A5E}
.ks-info  .ks-ic{background:linear-gradient(145deg,#FFF0E0 0%,#FFE2C8 100%);color:#C9771A}

/* 모달·박스 안에서는 그림자 없이 살짝 물든 바탕 (카드 안에 카드가 뜨지 않게) */
.box .kh-state,.kh-modal .kh-state{box-shadow:none;background:var(--surf2);border-radius:20px}

@media (max-width:640px){
  .kh-state{gap:13px;padding:17px 16px;border-radius:20px}
  .ks-ic{width:40px;height:40px;border-radius:14px}
  .ks-ic svg{width:21px;height:21px}
  .ks-t{font-size:.95rem}
  .ks-s,.ks-p{font-size:.84rem}
  .ks-act{gap:6px;margin-top:12px}
  .ks-btn{padding:8px 14px;font-size:.8rem}
}

/* 예전 공지 상자 — 혹시 남은 호출이 있어도 왼쪽 줄은 절대 안 나온다 */
.note,.note-gold,.kh-flash{border:0 !important;border-radius:20px;background:var(--surf);
  box-shadow:var(--sh);padding:16px 20px}

/* 회원 탈퇴 경고 — 왼쪽 빨간 줄 대신 경고 머리 */
.wd-box{border:0 !important;border-radius:24px;padding:24px 24px 22px;box-shadow:var(--sh)}
.wd-warn{position:relative;padding-left:46px;min-height:32px;font-size:.98rem;line-height:1.6;padding-top:4px}
.wd-warn::before{
  content:"!"; position:absolute; left:0; top:0; width:32px; height:32px; border-radius:11px;
  display:grid; place-items:center; font-weight:800; font-size:1rem;
  background:linear-gradient(145deg,#FDE3E3 0%,#F9CDD2 100%); color:var(--coral);
}

/* ── 푸터 왼쪽 정렬 (2026-09-23 요청) — 링크·사업자 정보·저작권 모두 왼쪽 끝에 맞춘다 ── */
.kh-foot{text-align:left}
.kh-foot-links{justify-content:flex-start;padding:0}
dl.kh-foot-biz{margin:0}
.kh-foot-copy{text-align:left}