/* TD컴퍼니 병원마케팅 가이드 시리즈 - 공통 스타일시트 */
:root{
  --bg:#FAFAF8;
  --ink:#15171B;
  --muted:#5B6169;
  --accent:#2A3EDB;
  --accent-ink:#1C2A99;
  --accent-soft:#EBEDFB;
  --border:#E4E4E1;
  --card-bg:#FFFFFF;
  --good-soft:#EAF3EC;
  --good-ink:#276240;
  --shadow: 0 1px 2px rgba(20,20,20,0.04), 0 10px 28px -14px rgba(20,20,20,0.14);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E0F12;
    --ink:#EDEEF0;
    --muted:#9CA1AA;
    --accent:#7C8CFF;
    --accent-ink:#C7CDFF;
    --accent-soft:rgba(124,140,255,0.14);
    --border:#26282E;
    --card-bg:#17181D;
    --good-soft:rgba(90,190,130,0.14);
    --good-ink:#8FDCAC;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -14px rgba(0,0,0,0.6);
  }
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent-ink); }
h1,h2,h3{ text-wrap:balance; font-weight:800; letter-spacing:-0.01em; margin:0 0 14px; }
p{ margin:0 0 1em; }

/* Header / nav */
.site-header{
  border-bottom:1px solid var(--border); background:var(--bg);
  position:sticky; top:0; z-index:10;
}
.site-header .inner{
  max-width:920px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{ font-weight:800; font-size:16px; letter-spacing:-0.01em; color:var(--ink); text-decoration:none; }
.nav{ display:flex; gap:22px; font-size:14px; }
.nav a{ color:var(--muted); text-decoration:none; font-weight:600; }
.nav a:hover{ color:var(--ink); }
.nav a.cta{
  color:#fff; background:var(--accent); padding:8px 16px; border-radius:8px;
}

/* Layout */
.wrap{ max-width:720px; margin:0 auto; padding:52px 24px 96px; }
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:10px;
}
h1{ font-size:clamp(26px,4.2vw,36px); }
.lede{ font-size:17px; color:var(--muted); margin-bottom:8px; }
.meta-row{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--muted); margin:14px 0 40px; padding-bottom:24px; border-bottom:1px solid var(--border); }

section{ margin-bottom:38px; }
h2{ font-size:20px; }
h3{ font-size:16px; }

.callout{
  border-radius:12px; padding:18px 20px; background:var(--accent-soft); border:1px solid transparent;
}
.callout.good{ background:var(--good-soft); }
.callout-title{ font-weight:800; font-size:14px; color:var(--accent-ink); margin-bottom:6px; }
.callout.good .callout-title{ color:var(--good-ink); }
.callout p:last-child{ margin-bottom:0; }

.keypoints{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--card-bg); }
.keypoints li{ display:grid; grid-template-columns:26px 1fr; gap:12px; padding:15px 18px; border-bottom:1px solid var(--border); font-size:14.5px; }
.keypoints li:last-child{ border-bottom:none; }
.keypoints .n{ width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; }

.faq{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--border); border-radius:12px; padding:16px 18px; background:var(--card-bg); }
.faq-item h3{ margin:0 0 6px; font-size:15px; }
.faq-item p{ margin:0; font-size:14px; color:var(--muted); }

.cta-block{
  text-align:center; padding:36px 24px; border-radius:16px; background:var(--card-bg); color:#fff; margin-top:48px;
}
.cta-block h2{ color:#fff; font-size:20px; }
.cta-block p{ color:#c9c9cc; margin-bottom:20px; }
.cta-block a{
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  font-weight:700; padding:12px 26px; border-radius:9px; font-size:14.5px;
}

.guide-links{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.guide-links a{ font-size:14px; text-decoration:none; }

/* Hub cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.card{
  border:1px solid var(--border); border-radius:14px; background:var(--card-bg); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
}
.card .thumb{ width:100%; aspect-ratio:1200/630; object-fit:cover; display:block; border-bottom:1px solid var(--border); }
.card .card-body{ padding:18px 20px; display:flex; flex-direction:column; gap:6px; }
.card .num{ font-size:12px; font-weight:800; color:var(--accent-ink); letter-spacing:0.06em; }
.card h3{ margin:0; font-size:16.5px; }
.card p{ margin:0; font-size:13.5px; color:var(--muted); }

/* Article hero thumbnail */
.hero-thumb{
  width:100%; aspect-ratio:1200/630; object-fit:cover; border-radius:14px; border:1px solid var(--border);
  display:block; margin:20px 0 8px; box-shadow:var(--shadow);
}

footer{ font-size:12.5px; color:var(--muted); text-align:center; padding:32px 24px 48px; }

@media (max-width:560px){
  .nav{ gap:14px; }
  .nav a.cta{ padding:7px 12px; }
}