/* ============================================================
   blog.vetmanlab.com — app.css v3.0 (Wanted DS 기반 · 프리미엄 데이터 서비스)
   대상: 40~60대 원장, 모바일 80% → 본문 16px 기준 대형 스케일
   개편 원칙: 단일 브랜드 블루(#0066ff)·플랫 서피스·대형 타이포·
             대동여지도 타일맵 시그니처화·진단 헤드라인 톤 완화
   폰트 1예외: Pretendard Variable (jsDelivr, dynamic subset)
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ---------- ① 디자인 토큰 ---------------------------------- */
:root{
  /* brand (Wanted blue) */
  --brand:#0066ff;--brand-strong:#005aeb;--brand-heavy:#0054d1;
  --brand-50:#f4f8ff;--brand-100:#eaf2fe;--brand-200:#c9defe;--brand-300:#9ec5ff;--brand-900:#003e9c;
  --brand-tint:#eef4ff;            /* 히어로/피처 서피스용 소프트 틴트 (5~8%) */
  /* 브랜드 워드마크 오렌지 (VetManAI 톤 계승 — 로고 전용, CTA엔 미사용) */
  --logo-orange:#f0900d;
  /* ink (coolNeutral) — 가독 대비 강화 */
  --ink:#171719;--ink-strong:#0a0b0d;--ink-neutral:rgba(46,47,51,.9);
  --muted:rgba(46,47,51,.72);--assistive:rgba(55,56,60,.45);
  /* surface */
  --bg:#f5f6f8;--card:#fff;
  /* line & fill */
  --line:rgba(112,115,124,.22);--line-soft:rgba(112,115,124,.15);--line-faint:rgba(112,115,124,.09);
  --fill-thin:rgba(112,115,124,.045);--fill-base:rgba(112,115,124,.08);--fill-thick:rgba(112,115,124,.15);
  /* status */
  --pos:#00bf40;--warn:#ff9200;--neg:#ff4242;
  --pos-text:#009632;--warn-text:#d47800;--neg-text:#e52222;
  --pos-bg:#f1fdf5;--pos-line:#b6f3cd;--pos-ink:#00702a;
  --warn-bg:#fff8ee;--warn-line:#ffe2b8;--warn-ink:#8a5200;
  --neg-bg:#fef1f1;--neg-line:#fbd3d3;--neg-ink:#b91414;
  /* 데이터 시각화 */
  --grass-0:#e9ebee;--grass-1:#b6f3cd;--grass-2:#31c869;--grass-3:#009632;
  --bar-avg:#c7cace;--bar-weekend:#b0b3b9;
  /* 유형 5색 (의미 고정: 정보 파랑/후기 주황/소식 초록/이벤트 빨강/일상 회색) */
  --t-info:#0066ff;--t-review:#ff9200;--t-news:#00bf40;--t-event:#ff4242;--t-daily:#989ba2;
  /* legacy alias */
  --brand2:var(--brand-strong);--accent:var(--warn);
  /* 타이포 스케일 (모바일 우선 · 최소 13.5px, 히어로는 대형) */
  --text-hero:clamp(31px,5.6vw,52px);
  --text-h1:26px;--text-h2:19px;--text-body:16px;--text-sub:15px;
  --text-label:14.5px;--text-small:13.5px;--text-caption:12.5px;
  /* radius */
  --r-8:8px;--r-10:10px;--r-12:12px;--r-16:16px;--r-20:20px;--r-24:24px;--r-pill:9999px;
  /* elevation (Wanted — 소프트·저알파·레이어드) */
  --ev-input:0 1px 2px rgba(23,23,23,.04);
  --ev-card:0 1px 2px -1px rgba(23,23,23,.06),0 5px 18px -8px rgba(23,23,23,.09);
  --ev-2:0 4px 8px -2px rgba(23,23,23,.07),0 10px 26px -10px rgba(23,23,23,.12);
  --ev-3:0 10px 20px -6px rgba(23,23,23,.10),0 4px 8px -4px rgba(23,23,23,.06);
  --ev-4:0 16px 48px -12px rgba(23,23,23,.20);
  --ring:0 0 0 4px rgba(0,102,255,.16);
  --header-bg:rgba(255,255,255,.82);
  --font:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
}

/* ---------- ② 베이스 --------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:var(--text-body);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none;font-weight:500}
a:hover{color:var(--brand-heavy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
::selection{background:var(--brand-200)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 88px}
.muted{color:var(--muted)}.small{font-size:var(--text-small)}
h1,h2,h3{color:var(--ink-strong);text-wrap:pretty;letter-spacing:-.022em;font-weight:700}
table,.stat b{font-variant-numeric:tabular-nums}

/* ---------- ③ 헤더 · 배너 ---------------------------------- */
header.site{position:sticky;top:0;z-index:40;background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line-faint);padding:0}
header.site .wrap{padding:0 16px;height:64px;display:flex;justify-content:space-between;align-items:center}
header.site a{color:var(--ink-strong);font-weight:700;font-size:17px;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:10px}
header.site a:hover{text-decoration:none;color:var(--ink-strong)}
/* 브랜드 마크 — 대동여지도 4타일 모티프 (자체 포함 SVG, 파일 의존 없음) */
header.site .wrap>a::before{content:"";width:26px;height:26px;flex:none;border-radius:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%230066ff'/%3E%3Crect x='13' y='13' width='17' height='17' rx='5' fill='%23fff' opacity='.4'/%3E%3Crect x='34' y='13' width='17' height='17' rx='5' fill='%23fff' opacity='.65'/%3E%3Crect x='13' y='34' width='17' height='17' rx='5' fill='%23fff' opacity='.85'/%3E%3Crect x='34' y='34' width='17' height='17' rx='5' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow:0 2px 6px -1px rgba(0,102,255,.4)}
header.site nav{display:flex;gap:8px;align-items:center}
header.site nav a{font-size:14px;font-weight:600;color:var(--ink-neutral);
  padding:9px 15px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);transition:background .15s,box-shadow .15s}
header.site nav a:hover{background:var(--fill-base);box-shadow:inset 0 0 0 1px var(--line-soft)}
.theme-toggle{background:none;border:0;cursor:pointer;font-size:15px;line-height:1;padding:8px 11px;
  border-radius:var(--r-pill);color:var(--ink-neutral);box-shadow:inset 0 0 0 1px var(--line);transition:background .15s}
.theme-toggle:hover{background:var(--fill-base)}
.demo-banner{background:var(--warn-bg);color:var(--warn-ink);border-bottom:1px solid var(--warn-line);
  text-align:center;padding:10px 14px;font-size:13.5px;font-weight:600;letter-spacing:-.01em}

/* ---------- ④ 홈 히어로 · 검색 ------------------------------ */
.hero2{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:-20px;margin-bottom:20px;
  padding:76px 20px 52px;text-align:center;   /* overflow:hidden 제거 — 검색 자동완성이 히어로 밖으로 뻗어야 함 */
  background:var(--brand-tint);border-bottom:1px solid var(--line-faint)}
/* 소프트 상단 페이드 — 헤더에서 자연스럽게 이어지도록 (플랫 틴트 유지) */
.hero2::before{content:"";position:absolute;inset:0 0 auto 0;height:180px;
  background:linear-gradient(180deg,var(--card),transparent);pointer-events:none;z-index:0}
.hero2 h1{font-size:var(--text-hero);line-height:1.18;letter-spacing:-.032em;font-weight:800;
  margin:0 auto 16px;max-width:15ch;color:var(--ink-strong)}
.hero2 p{color:var(--muted);margin:0 auto 30px;font-size:clamp(15.5px,1.6vw,18px);line-height:1.62;max-width:540px}
.hero2 h1,.hero2 p,.hero2 .ticker{position:relative;z-index:2}
.hero2 .searchbox{position:relative;z-index:8}   /* 자동완성이 티커 위에 뜨도록 */
.hero,.hero2{position:relative}
.hero{padding:46px 0 30px;text-align:center}
.hero h1{font-size:28px;margin:0 0 8px}.hero p{color:var(--muted);margin:0 0 18px}
.searchbox{position:relative;max-width:600px;margin:0 auto}
.searchbox input{width:100%;padding:14px 16px 14px 46px;font-size:16px;color:var(--ink);font-family:inherit;
  border:1.5px solid var(--line);border-radius:var(--r-12);outline:none;background:var(--card)
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%2370737c" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>')
  15px 50% no-repeat;box-shadow:var(--ev-input);transition:border-color .15s,box-shadow .15s}
.searchbox input::placeholder{color:var(--assistive)}
.searchbox input:focus{border-color:var(--brand);box-shadow:var(--ring)}
.hero2 .searchbox input{padding:20px 22px 20px 58px;font-size:18px;border-radius:var(--r-16);
  background-position:22px 50%;background-size:24px;box-shadow:var(--ev-3);border-color:transparent}
.hero2 .searchbox input:focus{border-color:var(--brand);box-shadow:var(--ev-3),var(--ring)}
.sugg{position:absolute;left:0;right:0;top:100%;background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r-16);margin-top:10px;box-shadow:var(--ev-4);text-align:left;z-index:20;
  max-height:360px;overflow:auto;padding:8px}
.sugg div{padding:13px 14px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;
  align-items:center;border-radius:var(--r-10);font-size:15.5px;font-weight:500}
.sugg div:hover{background:var(--brand-50)}
.sugg .meta{color:var(--muted);font-size:13px;white-space:nowrap;font-weight:400}
/* 히어로 신뢰 스탯 스트립 */
.ticker{color:var(--muted);font-size:14px;line-height:1.7;margin:22px auto 0;max-width:680px}
.ticker b{color:var(--brand-heavy);font-weight:700}

/* 히어로 대동여지도 시그니처 그래픽 — 데스크톱 전용 우측 배치 */
@media(min-width:900px){
  .hero2{text-align:left;padding:88px max(24px,calc(50vw - 550px)) 60px;margin-bottom:24px}
  .hero2 h1{margin-left:0;margin-right:0;max-width:14ch;font-size:clamp(40px,4.4vw,54px)}
  .hero2 p{margin-left:0;margin-right:0;max-width:520px}
  .hero2 .searchbox{margin-left:0;max-width:560px}
  .hero2 .ticker{margin-left:0;text-align:left}
  .hero2::after{content:"";position:absolute;top:50%;right:max(24px,calc(50vw - 545px));
    transform:translateY(-46%);width:min(30vw,340px);height:460px;opacity:.95;pointer-events:none;z-index:1;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 400'%3E%3Cg%3E%3Crect x='80' y='0' width='68' height='68' rx='18' fill='%23c9defe'/%3E%3Crect x='160' y='0' width='68' height='68' rx='18' fill='%23eaf2fe'/%3E%3Crect x='0' y='80' width='68' height='68' rx='18' fill='%239ec5ff'/%3E%3Crect x='80' y='80' width='68' height='68' rx='18' fill='%230066ff'/%3E%3Crect x='160' y='80' width='68' height='68' rx='18' fill='%23eaf2fe'/%3E%3Crect x='240' y='80' width='68' height='68' rx='18' fill='%23c9defe'/%3E%3Crect x='0' y='160' width='68' height='68' rx='18' fill='%23eaf2fe'/%3E%3Crect x='80' y='160' width='68' height='68' rx='18' fill='%239ec5ff'/%3E%3Crect x='160' y='160' width='68' height='68' rx='18' fill='%23003e9c'/%3E%3Crect x='240' y='160' width='68' height='68' rx='18' fill='%239ec5ff'/%3E%3Crect x='0' y='240' width='68' height='68' rx='18' fill='%23c9defe'/%3E%3Crect x='160' y='240' width='68' height='68' rx='18' fill='%23eaf2fe'/%3E%3Crect x='240' y='240' width='68' height='68' rx='18' fill='%230066ff'/%3E%3Crect x='80' y='320' width='68' height='68' rx='18' fill='%23c9defe'/%3E%3Crect x='240' y='320' width='68' height='68' rx='18' fill='%239ec5ff'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
}

/* ---------- ⑤ 카드 · 그리드 --------------------------------- */
.card{background:var(--card);border:1px solid var(--line-faint);border-radius:var(--r-16);
  box-shadow:var(--ev-card);padding:24px;margin:20px 0}
.card h2{font-size:var(--text-h2);font-weight:700;margin:0 0 16px;line-height:1.35;letter-spacing:-.022em;
  color:var(--ink-strong)}
.card h2 .muted{font-weight:500;font-size:13.5px;letter-spacing:-.01em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}.card{padding:20px}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:24px 0}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line-faint);border-radius:var(--r-16);
  box-shadow:var(--ev-card);padding:20px 16px;text-align:center}
.stat b{display:block;font-size:31px;font-weight:800;letter-spacing:-.03em;color:var(--ink-strong);line-height:1.2}
.stat span{color:var(--muted);font-size:13.5px;margin-top:4px;display:block}
.spot{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.spot .card{margin:0;box-shadow:none;border:1px solid var(--line-soft);border-radius:var(--r-12);padding:20px;
  transition:box-shadow .18s ease-out,transform .12s ease-out,border-color .18s}
.spot .card:hover{box-shadow:var(--ev-2);transform:translateY(-3px);border-color:transparent}
.spot h3{font-size:17px;margin:0 0 4px;letter-spacing:-.015em}
.spot .meta{font-size:13px;color:var(--muted);margin-bottom:12px}
.spot .fact{font-size:14.5px;margin:4px 0;color:var(--ink-neutral)}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:10px 0}
.how div{background:var(--fill-thin);border:1px solid var(--line-faint);border-radius:var(--r-12);padding:18px;
  font-size:14.5px;line-height:1.62;color:var(--ink-neutral)}
.how b{display:block;margin-bottom:6px;color:var(--ink-strong);font-size:15px;font-weight:700}

/* ---------- ⑥ 칩 ------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-pill);padding:8px 15px;
  font-size:13.5px;font-weight:600;cursor:pointer;background:var(--card);color:var(--ink-neutral);
  font-family:inherit;transition:background .15s,box-shadow .15s;line-height:1.45;white-space:nowrap}
.chip:hover{background:var(--fill-base)}
.chip.on{background:var(--brand);box-shadow:none;color:#fff;cursor:default}
.chip.gap{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--brand-300);color:var(--brand-heavy);border-style:dashed}
.chip.gap:hover{background:var(--brand-50);box-shadow:inset 0 0 0 1.5px var(--brand)}
.chip.ocean{background:var(--brand-100);box-shadow:none;color:var(--brand-heavy)}
.chip.ocean:hover{background:var(--brand-200)}
a.chip:hover{text-decoration:none}
.rchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-soft);border-radius:var(--r-10);
  padding:10px 14px;font-size:14px;background:var(--card);color:var(--muted);box-shadow:var(--ev-input)}
.rchip b{color:var(--ink-strong);font-weight:700}

/* ---------- ⑦ 표 · 차트 ------------------------------------ */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:12px 10px;border-bottom:1px solid var(--line-faint);text-align:left;vertical-align:top;line-height:1.55}
th{color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap;border-bottom-color:var(--line-soft);
  letter-spacing:0}
tr:hover>td{background:var(--fill-thin)}
tr:last-child>td{border-bottom:0}
.tbar{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden;background:var(--grass-0)}
.tbar span{display:block;height:100%}
.tleg{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:13px;color:var(--muted)}
.tleg .lg{display:inline-flex;align-items:center}
.tleg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.badge{border-radius:6px;padding:3px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.heat td{text-align:center;font-size:12px;padding:6px 3px}
.heat th{font-size:11px;padding:6px 3px;text-align:center}
.heat td.c0{background:var(--bg);color:var(--assistive);box-shadow:inset 0 0 0 1px var(--line-faint)}.heat td.c1{background:var(--brand-100)}
.heat td.c2{background:var(--brand-300)}.heat td.c3{background:var(--brand-heavy);color:#fff}
.heatwrap{overflow-x:auto}
.heat th:first-child,.heat td:first-child{position:sticky;left:0;background:var(--card);text-align:left;white-space:nowrap;z-index:1;font-size:13px}
.heat tr:hover>td{background:var(--bg)}.heat tr:hover>td:first-child{background:var(--card)}
.heat tr:hover>td.c1{background:var(--brand-100)}.heat tr:hover>td.c2{background:var(--brand-300)}
.heat tr:hover>td.c3{background:var(--brand-heavy)}

/* ---------- ⑦-b 대동여지도 타일맵 (시그니처 서피스) ---------- */
#mapCard{border-radius:var(--r-24);padding:26px 26px 24px}
#mapCard h2{font-size:21px}
#tileMap{background:var(--brand-tint);padding:14px;border-radius:var(--r-20);gap:8px!important;
  box-shadow:inset 0 0 0 1px var(--line-faint)}
#tileMap>button{border-radius:12px!important;box-shadow:inset 0 0 0 1px rgba(0,84,209,.12);
  transition:transform .16s ease-out,box-shadow .16s ease-out!important}
#tileMap>button:hover{transform:translateY(-3px);box-shadow:var(--ev-2),inset 0 0 0 1px rgba(0,84,209,.12)!important;z-index:1;position:relative}
#mapPanel{background:var(--fill-thin);border:1px solid var(--line-faint);border-radius:var(--r-16);
  padding:16px 18px;min-height:100%}

/* ---------- ⑧ 진단 헤드라인 · 점검 · GEO -------------------- */
/* 진단 헤드라인 — 위협적이지 않게, 그러나 눈에 띄고 행동을 부르게 (아이콘 + 소프트 서피스) */
.diag{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:16px 18px;border-radius:var(--r-16);
  font-size:16px;line-height:1.6;border:1px solid;font-weight:500}
.diag::before{content:"";flex:none;width:24px;height:24px;margin-top:1px;background:center/contain no-repeat}
.diag b{font-weight:700;color:var(--ink-strong)}
/* 주의: 붉은 경고 대신 앰버 톤 — 차분하지만 분명한 넛지 */
.diag.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.diag.warn b{color:var(--warn-ink)}
.diag.warn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d47800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.6' r='.4' fill='%23d47800' stroke='none'/%3E%3C/svg%3E")}
.diag.ok{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-heavy)}
.diag.ok b{color:var(--brand-heavy)}
.diag.ok::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230066ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8.2 12.4l2.6 2.6 5-5.4'/%3E%3C/svg%3E")}
.check{border:1px solid;border-radius:var(--r-12);padding:15px 16px;font-size:14.5px;line-height:1.6}
.check.ok{background:var(--pos-bg);border-color:var(--pos-line)}
.check.todo{background:var(--warn-bg);border-color:var(--warn-line)}
.check b{color:var(--ink-strong)}
.check .small{font-size:13.5px}
.geo{display:inline-block;border:1px solid var(--line);border-radius:var(--r-8);padding:5px 11px;
  font-size:13px;font-weight:600;margin:0 5px 5px 0;color:var(--muted);background:var(--card)}
.geo.on{background:var(--pos-bg);border-color:var(--pos-line);color:var(--pos-ink);font-weight:700}
.geo.na{background:var(--fill-base);border-color:transparent;color:var(--muted)}

/* ---------- ⑨ 버튼 · 폼 ------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);
  color:#fff;border:0;border-radius:var(--r-12);padding:12px 20px;font-size:15px;font-weight:600;
  font-family:inherit;letter-spacing:-.01em;cursor:pointer;box-shadow:var(--ev-input);white-space:nowrap;
  transition:background .15s,transform .06s ease-out,box-shadow .15s}
.btn:hover{background:var(--brand-heavy);text-decoration:none;color:#fff;box-shadow:var(--ev-2)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.ghost{background:var(--card);color:var(--brand);box-shadow:inset 0 0 0 1px var(--line),var(--ev-input)}
.btn.ghost:hover{background:var(--brand-50);box-shadow:inset 0 0 0 1px var(--brand-300),var(--ev-input)}
.btn.amber{background:var(--brand);width:100%;padding:16px 22px;font-size:16px;box-shadow:var(--ev-2)}
.btn.amber:hover{background:var(--brand-heavy)}
.pager{display:flex;gap:6px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pager button{border:0;box-shadow:inset 0 0 0 1px var(--line);background:var(--card);border-radius:var(--r-10);
  padding:9px 13px;min-width:40px;min-height:40px;cursor:pointer;font-family:inherit;font-size:14px;
  font-weight:600;color:var(--ink-neutral);transition:background .15s}
.pager button:hover{background:var(--fill-base)}
.pager button.on{background:var(--brand);color:#fff;box-shadow:none;cursor:default}
input.flt,select.flt{padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r-10);
  font-size:16px;font-family:inherit;color:var(--ink);background:var(--card);outline:none;
  transition:border-color .15s,box-shadow .15s}
input.flt:focus,select.flt:focus{border-color:var(--brand);box-shadow:var(--ring)}
input.flt::placeholder{color:var(--assistive)}

/* ---------- ⑩ 프롬프트800 배너 · 비교 · 푸터 ----------------- */
.banner800{background:var(--brand-tint);border:1px solid var(--brand-200);
  border-radius:var(--r-20);color:var(--ink);padding:24px 26px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;margin:20px 0}
.banner800 b{font-size:17.5px;letter-spacing:-.015em;color:var(--ink-strong)}
.banner800 .small{color:var(--muted);font-size:14px}
.banner800 a{background:var(--brand);color:#fff;border-radius:var(--r-12);padding:13px 20px;font-weight:600;
  font-size:15px;box-shadow:var(--ev-input);transition:background .15s,box-shadow .15s;white-space:nowrap}
.banner800 a:hover{background:var(--brand-heavy);text-decoration:none;box-shadow:var(--ev-2)}
.vs{display:grid;grid-template-columns:1fr 56px 1fr;gap:12px;align-items:start}
@media(max-width:760px){.vs{grid-template-columns:1fr}.vs .mid{padding:6px 0}}
.vs .mid{text-align:center;font-weight:800;color:var(--assistive);padding-top:64px;font-size:14px;letter-spacing:.08em}
.win{font-weight:800;color:var(--brand-heavy)}
footer{margin-top:52px;padding-top:24px;border-top:1px solid var(--line-soft);color:var(--muted);
  font-size:13.5px;line-height:1.9}

#plist th:first-child,#plist td:first-child{white-space:nowrap}
.chip{word-break:keep-all}

/* ---------- ⑫ 마스터 대시보드 ------------------------------- */
.brief p{font-size:16.5px;line-height:1.78;margin:0 0 12px;color:var(--ink-neutral);max-width:760px}
.brief p:last-child{margin-bottom:0}
.brief b{color:var(--ink-strong)}
.ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.op{border:1px solid var(--line-soft);border-radius:var(--r-12);padding:16px 18px;background:var(--card)}
.op .k{font-size:14.5px;font-weight:700;color:var(--ink-strong);display:flex;justify-content:space-between;align-items:center;gap:8px}
.op .n{font-size:28px;font-weight:800;letter-spacing:-.025em;color:var(--ink-strong);margin:8px 0 4px;font-variant-numeric:tabular-nums}
.op .n small{font-size:13.5px;color:var(--muted);font-weight:500;letter-spacing:0}
.op .d{font-size:13.5px;color:var(--muted);line-height:1.6}
.st{display:inline-block;border-radius:var(--r-pill);padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.st.live{background:var(--pos-bg);color:var(--pos-ink)}
.st.file{background:var(--brand-100);color:var(--brand-heavy)}
.st.off{background:var(--fill-base);color:var(--muted)}
.scen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.scen article{background:var(--fill-thin);border:1px solid var(--line-faint);border-radius:var(--r-12);padding:18px 20px}
.scen h3{font-size:16.5px;margin:0 0 8px;letter-spacing:-.015em}
.scen p{font-size:14.5px;line-height:1.68;color:var(--ink-neutral);margin:0 0 14px}
.scen ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.scen li{display:flex;gap:9px;font-size:14px;line-height:1.55;align-items:flex-start}
.scen li i{flex:none;font-style:normal;width:21px;height:21px;border-radius:50%;background:var(--brand-100);color:var(--brand-heavy);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}

/* ---------- ⑬ 콘텐츠 우선 피드 ------------------------------ */
.feed-row{display:flex;gap:10px;align-items:baseline;padding:12px 4px;border-bottom:1px solid var(--line-faint);
  border-radius:8px;transition:background .12s;margin:0 -4px}
.feed-row:last-child{border-bottom:none}
.feed-row:hover{background:var(--fill-thin)}
.feed-row .feed-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--ink)}
.feed-row .feed-title:hover{color:var(--brand)}
@media(max-width:600px){.feed-row{flex-wrap:wrap;row-gap:2px}.feed-row .feed-title{white-space:normal;flex:1 1 100%;order:2}}

/* ---------- 브랜드 로고 (VetManBlog — VetManAI 로고 톤 계승) ------- */
header.site .brandmark{color:var(--brand-heavy);font-weight:800;font-size:19px;letter-spacing:-.03em}
header.site .brandmark em{font-style:normal;color:var(--logo-orange)}
header.site .brandmark:hover{color:var(--brand-heavy)}

/* ---------- ⑭ 모바일 (600px 이하 전면 최적화) ---------------- */
@media(max-width:600px){
  .wrap{padding:12px 12px 64px}
  h1{font-size:22px !important}
  .card{padding:16px 14px;margin:14px 0;border-radius:16px}
  .card h2{font-size:17px}
  #mapCard{padding:18px 14px;border-radius:18px}
  #mapCard h2{font-size:18px}
  #tileMap{padding:10px}
  #mapPanel{padding:14px}
  /* 표: 화면 폭에 맞춰 칸 나누고 긴 글자는 줄바꿈 */
  table{table-layout:fixed;width:100%;word-break:break-word}
  th,td{padding:10px 6px;font-size:13.5px;line-height:1.5}
  /* 글 전량 목록: 주제 칸 숨기고 날짜 칸 축소 */
  #plist th:nth-child(3),#plist td:nth-child(3){display:none}
  #plist th:nth-child(1),#plist td:nth-child(1){width:62px}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .cards3{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:15px 10px}
  .stat b{font-size:25px}
  .banner800{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 16px}
  .banner800 a{width:100%;text-align:center;box-sizing:border-box}
  select,input[type=search],input[type=text]{max-width:100%}
  .sugg{max-height:52vh}
  .tleg{gap:8px;font-size:12px}
  .chip{font-size:12.5px;padding:7px 12px}
  .diag{padding:14px 15px;font-size:15.5px}
}
@media(max-width:560px){
  .hero2{padding:52px 18px 40px;margin-top:-12px}
  .hero2 h1{font-size:27px;letter-spacing:-.028em;line-height:1.24}
  .hero2 p{font-size:15.5px;margin-bottom:22px}
  .hero2 .searchbox input{padding:16px 16px 16px 50px;font-size:16px;background-position:17px 50%;background-size:22px}
  .ticker{font-size:13px;padding:0 6px}
  .vs .mid{padding-top:0}
  header.site .wrap{height:56px}
  header.site a{font-size:15.5px}
  header.site .wrap>a::before{width:23px;height:23px}
  header.site nav a{padding:8px 12px;font-size:13px}
  header.site .brandmark{font-size:17.5px}
}

/* ---------- ⑧ 다크 모드 (Wanted dark 토큰 · 시스템 자동 + data-theme 훅) --- */
/* 모든 색은 토큰만 재매핑 — JS 인라인 var() 데이터 시각화도 자동 반영 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16171a;--card:#202226;
    --ink:#eceef1;--ink-strong:#fbfcfd;--ink-neutral:rgba(233,236,240,.9);
    --muted:rgba(226,230,236,.64);--assistive:rgba(205,210,218,.44);
    --line:rgba(255,255,255,.14);--line-soft:rgba(255,255,255,.10);--line-faint:rgba(255,255,255,.07);
    --fill-thin:rgba(255,255,255,.045);--fill-base:rgba(255,255,255,.08);--fill-thick:rgba(255,255,255,.14);
    --brand:#4285f4;--brand-strong:#5d9bff;--brand-heavy:#2f6ff0;
    --brand-50:rgba(66,133,244,.10);--brand-100:rgba(66,133,244,.18);--brand-200:rgba(66,133,244,.30);--brand-300:#5f97f2;--brand-900:#cfe0ff;
    --brand-tint:rgba(66,133,244,.10);
    --logo-orange:#ffa64d;
    --pos:#31c869;--warn:#ffa733;--neg:#ff6b6b;
    --pos-text:#4ad97b;--warn-text:#ffb04a;--neg-text:#ff7a7a;
    --pos-bg:rgba(49,200,105,.14);--pos-line:rgba(49,200,105,.32);--pos-ink:#7be6a4;
    --warn-bg:rgba(255,167,51,.13);--warn-line:rgba(255,167,51,.32);--warn-ink:#ffc987;
    --neg-bg:rgba(255,107,107,.13);--neg-line:rgba(255,107,107,.32);--neg-ink:#ff9a9a;
    --grass-0:rgba(255,255,255,.07);--grass-1:#0e4429;--grass-2:#2ea043;--grass-3:#39d353;
    --bar-avg:#565961;--bar-weekend:#63666d;
    --header-bg:rgba(20,21,24,.72);
    --ev-input:0 1px 2px rgba(0,0,0,.4);
    --ev-card:0 1px 2px -1px rgba(0,0,0,.5),0 6px 20px -8px rgba(0,0,0,.55);
    --ev-2:0 6px 14px -4px rgba(0,0,0,.6),0 12px 30px -12px rgba(0,0,0,.6);
    --ev-3:0 12px 24px -8px rgba(0,0,0,.6),0 4px 8px -4px rgba(0,0,0,.5);
    --ev-4:0 18px 50px -12px rgba(0,0,0,.7);
    --ring:0 0 0 4px rgba(66,133,244,.4);
  }
}
:root[data-theme="dark"]{
    --bg:#16171a;--card:#202226;
    --ink:#eceef1;--ink-strong:#fbfcfd;--ink-neutral:rgba(233,236,240,.9);
    --muted:rgba(226,230,236,.64);--assistive:rgba(205,210,218,.44);
    --line:rgba(255,255,255,.14);--line-soft:rgba(255,255,255,.10);--line-faint:rgba(255,255,255,.07);
    --fill-thin:rgba(255,255,255,.045);--fill-base:rgba(255,255,255,.08);--fill-thick:rgba(255,255,255,.14);
    --brand:#4285f4;--brand-strong:#5d9bff;--brand-heavy:#2f6ff0;
    --brand-50:rgba(66,133,244,.10);--brand-100:rgba(66,133,244,.18);--brand-200:rgba(66,133,244,.30);--brand-300:#5f97f2;--brand-900:#cfe0ff;
    --brand-tint:rgba(66,133,244,.10);
    --logo-orange:#ffa64d;
    --pos:#31c869;--warn:#ffa733;--neg:#ff6b6b;
    --pos-text:#4ad97b;--warn-text:#ffb04a;--neg-text:#ff7a7a;
    --pos-bg:rgba(49,200,105,.14);--pos-line:rgba(49,200,105,.32);--pos-ink:#7be6a4;
    --warn-bg:rgba(255,167,51,.13);--warn-line:rgba(255,167,51,.32);--warn-ink:#ffc987;
    --neg-bg:rgba(255,107,107,.13);--neg-line:rgba(255,107,107,.32);--neg-ink:#ff9a9a;
    --grass-0:rgba(255,255,255,.07);--grass-1:#0e4429;--grass-2:#2ea043;--grass-3:#39d353;
    --bar-avg:#565961;--bar-weekend:#63666d;
    --header-bg:rgba(20,21,24,.72);
    --ev-input:0 1px 2px rgba(0,0,0,.4);
    --ev-card:0 1px 2px -1px rgba(0,0,0,.5),0 6px 20px -8px rgba(0,0,0,.55);
    --ev-2:0 6px 14px -4px rgba(0,0,0,.6),0 12px 30px -12px rgba(0,0,0,.6);
    --ev-3:0 12px 24px -8px rgba(0,0,0,.6),0 4px 8px -4px rgba(0,0,0,.5);
    --ev-4:0 18px 50px -12px rgba(0,0,0,.7);
    --ring:0 0 0 4px rgba(66,133,244,.4);
  }