/* ============================================================
   blog.vetman.kr — app.css v2.1 (Wanted DS 기반 · 가독성 스케일)
   대상: 40~60대 원장, 모바일 80% → 본문 16px 기준 대형 스케일
   폰트 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:#005eeb;--brand-heavy:#0054d1;
  --brand-50:#f7fbff;--brand-100:#eaf2fe;--brand-200:#c9defe;--brand-300:#9ec5ff;--brand-900:#003e9c;
  /* ink (coolNeutral) — 가독 대비 강화 */
  --ink:#1b1c1e;--ink-strong:#000;--ink-neutral:rgba(46,47,51,.88);
  --muted:rgba(46,47,51,.74);--assistive:rgba(55,56,60,.43);
  /* surface */
  --bg:#f7f7f8;--card:#fff;
  /* line & fill */
  --line:rgba(112,115,124,.22);--line-soft:rgba(112,115,124,.16);--line-faint:rgba(112,115,124,.08);
  --fill-thin:rgba(112,115,124,.05);--fill-base:rgba(112,115,124,.08);--fill-thick:rgba(112,115,124,.16);
  /* status */
  --pos:#00bf40;--warn:#ff9200;--neg:#ff4242;
  --pos-text:#009632;--warn-text:#d47800;--neg-text:#e52222;
  --pos-bg:#f2fff6;--pos-line:#acfcc7;--pos-ink:#006e25;
  --warn-bg:#fffcf7;--warn-line:#fee6c6;--warn-ink:#9c5800;
  --neg-bg:#feecec;--neg-line:#fed5d5;--neg-ink:#b20c0c;
  /* 데이터 시각화 */
  --grass-0:#eaebec;--grass-1:#acfcc7;--grass-2:#1ed45a;--grass-3:#009632;
  --bar-avg:#c2c4c8;--bar-weekend:#aeb0b6;
  /* 유형 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(28px,6vw,40px);
  --text-h1:24px;--text-h2:18px;--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-pill:9999px;
  /* elevation (Wanted) */
  --ev-input:0 1px 2px rgba(0,0,0,.03);
  --ev-card:0 0 1px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.12);
  --ev-2:0 4px 6px -1px rgba(23,23,23,.06),0 2px 4px -2px rgba(23,23,23,.06);
  --ev-3:0 10px 15px -3px rgba(23,23,23,.07),0 4px 6px -2px rgba(23,23,23,.07);
  --ev-4:0 0 60px rgba(23,23,23,.10);
  --font:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
}

/* ---------- ② 베이스 --------------------------------------- */
*{box-sizing:border-box}
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}
a{color:var(--brand);text-decoration:none;font-weight:500}
a:hover{color:var(--brand-strong);text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--brand-100)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 80px}
.muted{color:var(--muted)}.small{font-size:var(--text-small)}
h1,h2,h3{color:var(--ink-strong);text-wrap:pretty;letter-spacing:-.02em}
table,.stat b{font-variant-numeric:tabular-nums}

/* ---------- ③ 헤더 · 배너 ---------------------------------- */
header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line-faint);padding:0}
header.site .wrap{padding:0 16px;height:60px;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:9px}
header.site a:hover{text-decoration:none;color:var(--ink-strong)}
header.site .wrap>a::before{content:"";width:22px;height:22px;flex:none;border-radius:6px;
  background:url("./favicon.svg") center/contain no-repeat}
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 14px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line)}
header.site nav a:hover{background:var(--fill-thin)}
.demo-banner{background:#fef4e6;color:var(--warn-ink);border-bottom:1px solid var(--warn-line);
  text-align:center;padding:9px 14px;font-size:13.5px;font-weight:600}

/* ---------- ④ 홈 히어로 · 검색 ------------------------------ */
.hero2{width:100vw;margin-left:calc(50% - 50vw);padding:64px 20px 44px;text-align:center;
  background:linear-gradient(180deg,#fff 0%,var(--brand-50) 55%,var(--brand-100) 100%);
  border-bottom:1px solid var(--line-faint);margin-bottom:14px}
.hero2 h1{font-size:var(--text-hero);line-height:1.28;letter-spacing:-.028em;font-weight:700;margin:0 0 14px}
.hero2 p{color:var(--muted);margin:0 auto 28px;font-size:16.5px;line-height:1.6;max-width:520px}
.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:580px;margin:0 auto}
.searchbox input{width:100%;padding:13px 16px 13px 46px;font-size:16px;color:var(--ink);font-family:inherit;
  border:1.5px solid var(--line);border-radius:var(--r-12);outline:none;background:#fff
  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:0 0 0 4px rgba(0,102,255,.12)}
.hero2 .searchbox input{padding:19px 22px 19px 56px;font-size:18px;border-radius:var(--r-16);
  background-position:20px 50%;box-shadow:var(--ev-3)}
.hero2 .searchbox input:focus{box-shadow:var(--ev-3),0 0 0 4px rgba(0,102,255,.13)}
.sugg{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-12);margin-top:8px;box-shadow:var(--ev-4);text-align:left;z-index:20;
  max-height:360px;overflow:auto;padding:6px}
.sugg div{padding:12px 14px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;
  align-items:center;border-radius:var(--r-8);font-size:15.5px;font-weight:500}
.sugg div:hover{background:var(--fill-base)}
.sugg .meta{color:var(--muted);font-size:13px;white-space:nowrap;font-weight:400}
.ticker{text-align:center;color:var(--muted);font-size:14px;line-height:1.7;margin:20px auto 0;max-width:640px}
.ticker b{color:var(--ink);font-weight:700}

/* ---------- ⑤ 카드 · 그리드 --------------------------------- */
.card{background:var(--card);border:1px solid var(--line-faint);border-radius:var(--r-16);
  box-shadow:var(--ev-card);padding:22px;margin:16px 0}
.card h2{font-size:var(--text-h2);font-weight:700;margin:0 0 16px;line-height:1.4}
.card h2 .muted{font-weight:500;font-size:13.5px;letter-spacing:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}.card{padding:18px}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:26px 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:18px 14px;text-align:center}
.stat b{display:block;font-size:30px;font-weight:700;letter-spacing:-.025em;color:var(--ink-strong);line-height:1.25}
.stat span{color:var(--muted);font-size:13.5px}
.spot{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.spot .card{margin:0;box-shadow:none;border:1px solid var(--line-soft);border-radius:var(--r-12);padding:18px;
  transition:box-shadow .15s,transform .1s}
.spot .card:hover{box-shadow:var(--ev-2);transform:translateY(-1px)}
.spot h3{font-size:17px;margin:0 0 4px;letter-spacing:-.01em}
.spot .meta{font-size:13px;color:var(--muted);margin-bottom:10px}
.spot .fact{font-size:14.5px;margin:3px 0;color:var(--ink-neutral)}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:10px 0}
.how div{background:var(--fill-thin);border-radius:var(--r-12);padding:16px 18px;font-size:14.5px;
  line-height:1.6;color:var(--ink-neutral)}
.how b{display:block;margin-bottom:5px;color:var(--ink-strong);font-size:15px}

/* ---------- ⑥ 칩 ------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-pill);padding:8px 14px;
  font-size:13.5px;font-weight:600;cursor:pointer;background:#fff;color:var(--ink-neutral);
  font-family:inherit;transition:background .15s;line-height:1.45}
.chip:hover{background:var(--fill-thin)}
.chip.on{background:var(--fill-thick);box-shadow:none;color:var(--ink-neutral);cursor:default}
.chip.gap{background:#fff;box-shadow:none;border:1.5px dashed var(--brand-300);color:var(--brand-heavy)}
.chip.gap:hover{background:var(--brand-50)}
.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);border-radius:var(--r-10);
  padding:10px 14px;font-size:14px;background:#fff;color:var(--muted)}
.rchip b{color:var(--ink-strong);font-weight:700}

/* ---------- ⑦ 표 · 차트 ------------------------------------ */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:11px 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)}
tr:hover>td{background:var(--fill-thin)}
tr:last-child>td{border-bottom:0}
.tbar{display:flex;height:14px;border-radius:var(--r-8);overflow:hidden;background:var(--grass-0)}
.tbar span{display:block;height:100%}
.tleg{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;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:5px}
.badge{border-radius:5px;padding:3px 8px;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:#fff;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:#fff}
.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)}

/* ---------- ⑧ 진단 헤드라인 · 점검 · GEO -------------------- */
.diag{margin-top:14px;padding:16px 18px;border-radius:var(--r-12);font-size:16px;line-height:1.65;border:1px solid}
.diag b{font-weight:700}
.diag.warn{background:var(--neg-bg);border-color:var(--neg-line);color:var(--neg-ink)}
.diag.ok{background:var(--brand-100);border-color:var(--brand-200);color:var(--brand-900)}
.check{border:1px solid;border-radius:var(--r-12);padding:14px 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 4px 4px 0;color:var(--muted);background:#fff}
.geo.on{background:#d9ffe6;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 .05s,box-shadow .15s}
.btn:hover{background:var(--brand-strong);text-decoration:none;color:#fff}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.ghost{background:#fff;color:var(--brand);box-shadow:inset 0 0 0 1px var(--line),var(--ev-input)}
.btn.ghost:hover{background:var(--brand-50)}
.btn.amber{background:var(--brand);width:100%;padding:15px 22px;font-size:16px;box-shadow:var(--ev-2)}
.btn.amber:hover{background:var(--brand-strong)}
.pager{display:flex;gap:6px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.pager button{border:0;box-shadow:inset 0 0 0 1px var(--line);background:#fff;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-thin)}
.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:#fff;outline:none;
  transition:border-color .15s,box-shadow .15s}
input.flt:focus,select.flt:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,102,255,.12)}
input.flt::placeholder{color:var(--assistive)}

/* ---------- ⑩ 프롬프트800 배너 · 비교 · 푸터 ----------------- */
.banner800{background:linear-gradient(135deg,var(--brand-100),#fff 70%);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:16px 0}
.banner800 b{font-size:17.5px;letter-spacing:-.01em;color:var(--ink-strong)}
.banner800 .small{color:var(--muted);font-size:14px}
.banner800 a{background:var(--brand);color:#fff;border-radius:var(--r-10);padding:12px 18px;font-weight:600;
  font-size:15px;box-shadow:var(--ev-input);transition:background .15s;white-space:nowrap}
.banner800 a:hover{background:var(--brand-strong);text-decoration:none}
.vs{display:grid;grid-template-columns:1fr 56px 1fr;gap:10px;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:48px;padding-top:20px;border-top:1px solid var(--line-soft);color:var(--muted);
  font-size:13.5px;line-height:1.85}

#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:#fff}
.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:700;letter-spacing:-.02em;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:#d9ffe6;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-radius:var(--r-12);padding:18px 20px}
.scen h3{font-size:16.5px;margin:0 0 8px;letter-spacing:-.01em}
.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}

/* ---------- ⑬ 모바일 ---------------------------------------- */
@media(max-width:560px){
  .hero2{padding:48px 18px 36px}
  .hero2 p{font-size:15.5px}
  #plist th:nth-child(4),#plist td:nth-child(4){display:none}
  .banner800{padding:20px}
  .vs .mid{padding-top:0}
  .stat b{font-size:26px}
}

/* ---------- 콘텐츠 우선 피드 (2026-07-18 개편) ---------------- */
.feed-row{display:flex;gap:10px;align-items:baseline;padding:11px 2px;border-bottom:1px solid var(--line-faint)}
.feed-row:last-child{border-bottom:none}
.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;width:100%;order:2}}