/* ==========================================================================
   Clean Modern – White Commercial Theme (FINAL CONSOLIDATED ONE FILE)
   Path: /blog/css/clean-modern.css
   ========================================================================== */

/* =========================
   GLOBAL TOKENS
   ========================= */
:root{
  --bg:#fff; --fg:#111315; --muted:#6b7280; --line:#eceff3;
  --card:#fff; --shadow:0 8px 30px rgba(17,19,21,.06); --r:16px;
  --ink:#111827; --accent:#0f172a;

  /* SRS/Stats helpers */
  --sl-line:#EAECEF; --sl-muted:#6b7280; --sl-shadow:0 10px 30px rgba(0,0,0,.06);

  /* Speaking heights */
  --speaking-card-h: 520px;
  --speaking-step-h: 240px;
}
@media (max-width: 992px){
  :root{ --speaking-card-h: 480px; --speaking-step-h: 220px; }
}
@media (max-width: 640px){
  :root{ --speaking-card-h: 420px; --speaking-step-h: 200px; }
}

/* =========================
   BASE
   ========================= */
html,body{height:100%}
*{box-sizing:border-box}
html{font-size:17px}
@media (max-width:640px){ html{font-size:16px} }
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:1rem; line-height:1.75;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.shadow{box-shadow:0 2px 16px rgba(17,19,21,.08)}
ul{margin:0 0 12px 1.25rem; padding:0}
ol{margin:0 0 12px 1.25rem; padding:0}

/* =========================
   NAV
   ========================= */
.navbar{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(6px);
}
.navbar.shadow{ box-shadow:0 1px 0 rgba(0,0,0,.06) }
.navbar .container{display:flex; align-items:center; gap:16px; min-height:64px}
.brand{font-weight:600; color:var(--fg)}
/* fallback(class) + current(id) 모두 지원 */
.nav-links,#navLinks{display:flex; align-items:center; gap:16px; margin-left:auto}
.nav-links a,#menuDynamic a{color:#374151; font-size:1rem}
.nav-links a:hover,#menuDynamic a:hover{color:#0f172a}
.menu{display:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:6px 10px}

#menuDynamic{display:flex; align-items:center; gap:28px; flex-wrap:wrap}
#menuDynamic a{
  display:inline-flex; align-items:center; padding:6px 8px;
  border-radius:6px; white-space:nowrap; text-decoration:none;
}

#navLinks .searchbar{display:flex; align-items:center; gap:8px; margin-left:48px}
#navLinks .searchbar input{width:220px}

@media (max-width:960px){
  .menu{display:block}
  .nav-links,#navLinks{
    display:none; flex-direction:column; align-items:flex-start; gap:12px;
    position:absolute; right:20px; top:70px; min-width:220px;
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px;
  }
  .nav-links.open,#navLinks.open{display:flex}
  #menuDynamic{width:100%; gap:12px}
  #navLinks .searchbar{width:100%; margin-left:0}
  #navLinks .searchbar input{width:100%}
}

/* =========================
   Search
   ========================= */
.searchbar{display:flex; align-items:center; gap:8px}
.searchbar input{
  border:1px solid var(--line); padding:.55rem .8rem;
  border-radius:999px; outline:none; min-width:180px;
}
.searchbar input:focus{border-color:#cfd6dd; box-shadow:0 0 0 4px rgba(207,214,221,.35)}
.searchbar button{
  border:none; background:transparent; color:#6b7280;
  width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.searchbar button:hover{background:#f5f5f5; color:#111315}
.searchbar input:focus + button{background:#e5e7eb; color:#111315}

/* =========================
   HERO
   ========================= */
.hero{
  padding:96px 0 56px; background:linear-gradient(180deg,#fff,#fafbfc);
  border-bottom:1px solid var(--line);
}
.hero.compact{padding:48px 0; background:#fff; border-bottom:1px solid var(--line)}
.hero .hero-inner{max-width:760px}
.display{font-size:2.625rem; line-height:1.15; margin:0}
.lead{color:var(--muted); font-size:1.125rem; margin:6px 0 18px}
.btn{display:inline-block; background:#111315; color:#fff; padding:.8rem 1.2rem; border-radius:14px}
.btn:hover{opacity:.9}

/* minimal variant for index */
.hero-minimal{ padding:64px 0 40px; background:#fff; border-bottom:1px solid var(--line) }
.hero-minimal .container{ max-width:920px }
.hero-title{
  font-size:clamp(28px,4vw,40px); line-height:1.15; font-weight:700;
  letter-spacing:-.01em; color:#111827; margin:0 0 10px;
}
.hero-subtitle{ font-size:16px; color:#6b7280; margin:0 }
.hero-minimal + main{ margin-top:8px }

/* =========================
   GRID & CARD (Blog list)
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:32px;
}
@media (max-width:1024px){ .grid{ grid-template-columns:repeat(2,1fr); gap:24px } }
@media (max-width:640px){  .grid{ grid-template-columns:1fr;      gap:18px } }

.card{
  border-radius:14px; background:#fff;
  box-shadow:0 4px 14px rgba(17,24,39,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow:0 10px 24px rgba(17,24,39,.10);
}
.card-body{padding:18px}
.title{font-size:1.125rem; margin:0 0 6px}
.card .title a{color:#111315}
.card .title a:hover{color:#0f172a}
.meta{color:var(--muted); font-size:.875rem; margin:0 0 10px}
.excerpt{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; color:#4b5563; line-height:1.55; min-height:48px;
}

/* =========================
   THUMBNAIL (contain) + overlay
   ========================= */
.thumb{display:block}
.ratio-16x9{position:relative; width:100%; padding-top:56.25%}
.thumb.ratio-16x9{
  background-position:center; background-repeat:no-repeat; background-size:contain;
  background-color:#fff;
}
.thumb.overlay{ position:relative; overflow:hidden }
.thumb.overlay::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0) 45%);
}
.overlay-text{ position:absolute; left:14px; right:14px; bottom:12px; color:#fff }
.overlay-title{ font-weight:600; font-size:16px; line-height:1.35 }
.overlay-meta{ opacity:.9; font-size:12px; margin-top:6px }
.card:hover .thumb.overlay{transform:translateY(-1px)}
.card:hover .thumb.overlay::after{
  background:linear-gradient(180deg, rgba(17,19,21,0) 0%, rgba(17,19,21,.82) 100%)
}
.card .thumb.overlay{transition:transform .18s ease, box-shadow .18s ease}

/* =========================
   CONTENT (article)
   ========================= */
.content{max-width:760px; margin:48px auto; font-size:1.0625rem}
.content .lead{font-weight:500; font-size:1.125rem}
.content h2{font-size:1.625rem; margin:28px 0 12px}
.content p{line-height:1.75}
blockquote{border-left:3px solid var(--line); padding:8px 14px; margin:16px 0; background:#fafbfc; border-radius:10px}
figure{margin:20px 0}
figure img{border:1px solid var(--line); border-radius:12px}
figcaption{font-size:.75rem; margin-top:6px; color:var(--muted)}

/* =========================
   POST PAGE
   ========================= */
.post-hero{max-width:820px}
.post-title{font-size:2.5rem; line-height:1.2; margin:8px 0 10px}
@media (max-width:640px){ .post-title{font-size:2.125rem} }
.post-meta{display:flex; align-items:center; gap:12px}
.post-meta-top{display:flex; gap:8px; margin-bottom:8px}
.tag{display:inline-block; background:#f5f7fa; border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:.75rem; color:#374151}
.author-avatar{width:40px; height:40px; border-radius:50%; border:1px solid var(--line)}
.author-name{font-weight:600}

/* =========================
   TOC
   ========================= */
.toc{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff; margin:20px 0}
.toc-title{font-weight:600; margin-bottom:6px}
.toc ol{margin:0; padding-left:18px}
.toc a{color:#374151}
.toc a:hover{color:#0f172a}

/* =========================
   Sharebar
   ========================= */
.sharebar{position:sticky; top:100px; float:left; margin-left:-80px; display:flex; flex-direction:column; gap:10px}
.sharebar a{width:38px; height:38px; border:1px solid var(--line); border-radius:999px; display:grid; place-items:center; color:#111315; background:#fff}
@media (max-width:1200px){.sharebar{display:none}}

/* =========================
   Code block
   ========================= */
pre.code{background:#0b1220; color:#e6edf3; border-radius:12px; padding:14px 16px; overflow:auto; border:1px solid #0f172a}
pre.code code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:.8125rem}

/* =========================
   Table
   ========================= */
.tbl{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.tbl th,.tbl td{
  padding:10px 12px; border-bottom:1px solid var(--line);
  vertical-align:middle; white-space:normal; word-break:break-word;
}
.tbl thead th{background:#fafbfc; text-align:left}
.tbl tbody tr:last-child td{border-bottom:none}

/* =========================
   CTA & Subscribe
   ========================= */
.cta-box{border:1px solid var(--line); border-radius:16px; padding:18px; margin:28px 0; background:#fff; box-shadow:var(--shadow)}
.subscribe{display:flex; gap:10px; margin-top:10px}
.subscribe input{flex:1; border:1px solid var(--line); padding:.6rem .8rem; border-radius:12px}
.subscribe button{border:0; background:#111315; color:#fff; padding:.65rem 1rem; border-radius:12px}

/* =========================
   Author / separators / post nav / related
   ========================= */
.author-box{display:flex; gap:12px; align-items:flex-start}
.sep{border:0; border-top:1px solid var(--line); margin:28px 0}
.post-nav{display:flex; justify-content:space-between; gap:12px; margin:32px 0}
.post-nav a{border:1px solid var(--line); border-radius:12px; padding:10px 12px; color:#111315; background:#fff}
.post-nav a:hover{background:#fafbfc}
.related{margin:28px 0}
.related .h5{font-size:1.125rem; margin-bottom:10px}

/* =========================
   FOOTER
   ========================= */
.footer{border-top:1px solid var(--line); background:#fff}
.footer .container{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px}
.footer a{color:#6b7280; font-size:1rem}
.footer a:hover{color:#111315}

/* =========================
   Load More
   ========================= */
.loadmore-wrap{display:flex; flex-direction:column; align-items:center; gap:10px; margin:26px 0 10px}
.btn-outline{
  appearance:none; border:1px solid var(--line); background:#fff; color:#111315;
  padding:.8rem 1.2rem; border-radius:14px; cursor:pointer; box-shadow:var(--shadow);
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn-outline:hover{background:#fafbfc}
.btn-outline:focus-visible{outline:4px solid rgba(207,214,221,.35); outline-offset:2px}
.btn-outline[disabled]{opacity:.5; cursor:not-allowed}
.loadmore.is-loading{position:relative; color:#6b7280; pointer-events:none}
.loadmore.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2px solid #cfd6dd; border-top-color:#6b7280; border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loadmore-end{font-size:.95rem; color:var(--muted)}

/* =========================
   PRODUCT LANDING (lp-*)
   ========================= */
.lp-hero{position:relative; overflow:hidden; padding:64px 0 32px; border-bottom:1px solid var(--line)}
.lp-hero::before{content:""; position:absolute; inset:-30% -20% auto -20%; height:140%; background:radial-gradient(60% 60% at 50% 0%, rgba(15,23,42,.06), transparent 60%)}
.lp-hero .hero-inner{position:relative; z-index:1}
.lp-hero h1{font-size:clamp(28px,4.8vw,48px); line-height:1.12; margin:0 0 10px}
.lp-hero p{color:var(--muted); max-width:720px}
.lp-hero .lp-hero-grid{display:grid; gap:20px; grid-template-columns:1fr; align-items:center}
@media(min-width:992px){.lp-hero .lp-hero-grid{grid-template-columns:1.3fr .7fr}}
.lp-hero .lp-figure{border:1px solid var(--line); border-radius:18px; background:#fff; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.06); display:flex; justify-content:center}
.lp-hero .lp-figure img{width:100%; height:auto; display:block}
.lp-hero .lp-caption{padding:10px 12px; border-top:1px solid var(--line); font-size:.92rem; color:var(--muted)}

.frame-sidebar{width:min(100%, 380px); margin:0 auto; border:1px solid var(--sl-line); border-radius:18px; background:#fff; box-shadow:var(--sl-shadow); overflow:hidden}
.frame-title{height:36px; background:linear-gradient(180deg,#f8fafc,#eef2f7); border-bottom:1px solid var(--sl-line); display:flex; align-items:center; gap:8px; padding:0 12px}
.frame-dots{display:flex; gap:6px}
.frame-dot{width:10px; height:10px; border-radius:50%; background:#d1d5db}
.frame-viewport{display:block; width:100%; height:auto; object-fit:contain; background:#f8fafc}
@media (min-width: 992px){
  .lp-hero .frame-sidebar{ width:320px }
  .lp-hero .frame-viewport{ width:auto; max-height: clamp(460px, 60vh, 620px); margin:0 auto }
}

.lp-section{padding:56px 0; border-bottom:1px solid var(--line)}
.lp-section h2{margin:0 0 14px; font-size:clamp(22px,3.6vw,34px)}
.lp-section .sub{color:var(--muted); margin:0 0 18px}
.lp-grid{display:grid; gap:18px}
.cols-2{grid-template-columns:1fr}
.cols-3{grid-template-columns:1fr}
@media(min-width:992px){.cols-2{grid-template-columns:1.05fr .95fr} .cols-3{grid-template-columns:repeat(3,1fr)}}
.lp-card{border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 12px 40px rgba(0,0,0,.06); padding:18px}
.lp-card h4{margin:6px 0 6px}

.lp-kpis{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.lp-kpis{grid-template-columns:repeat(4,1fr)}}
.lp-kpi{border:1px solid var(--line); border-radius:14px; background:#fff; padding:14px 16px; box-shadow:0 12px 40px rgba(0,0,0,.06)}
.lp-kpi .num{font-weight:800; font-size:1.35rem}
.lp-note{color:var(--muted); font-size:.9rem}

.lp-steps{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:992px){.lp-steps{grid-template-columns:repeat(4,1fr)}}
.lp-step{border:1px solid var(--line); border-radius:14px; background:#fff; padding:16px; box-shadow:0 12px 40px rgba(0,0,0,.06)}
.lp-step .idx{display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:999px; margin-right:8px}

#how .lp-grid.cols-3{ align-items:start }
#how .figure{ display:flex; flex-direction:column; align-items:center }
#how .figure img, #how .frame-sidebar, #how .frame-viewport{
  width:auto !important; max-width:100%; height:auto; max-height:520px; object-fit:contain; margin:0 auto;
}
@media (max-width: 991px){
  #how .figure img, #how .frame-sidebar, #how .frame-viewport{ max-height:380px }
}
.lp-grid.cols-2{ align-items:start }

/* =========================
   STATS / SRS (sl-*)
   ========================= */
.sl-grid{display:grid; gap:16px}
.sl-grid.cols-2{grid-template-columns:1fr}
.sl-grid.cols-3{grid-template-columns:1fr}
@media(min-width:992px){
  .sl-grid.cols-2{grid-template-columns:1.15fr .85fr}
  .sl-grid.cols-3{grid-template-columns:repeat(3,1fr)}
}
.sl-figure{border:1px solid var(--sl-line); border-radius:16px; background:#fff; box-shadow:var(--sl-shadow); overflow:hidden}
.sl-figure img{width:100%; height:auto; display:block}
.sl-caption{padding:12px 14px; font-size:.92rem; color:var(--sl-muted); border-top:1px solid var(--sl-line)}
.sl-kpis{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){ .sl-kpis{grid-template-columns:repeat(4,1fr)} }
.sl-kpi{padding:16px; border:1px solid var(--sl-line); border-radius:12px; background:#fff; box-shadow:var(--sl-shadow)}
.sl-kpi .num{font-weight:800; font-size:1.4rem}
.sl-bullets{display:grid; gap:8px}
.sl-badge{display:inline-block; padding:2px 8px; border:1px solid var(--sl-line); border-radius:999px; font-size:.8rem; color:#374151; background:#fff}
.sl-note{color:#6b7280; font-size:.9rem}

.sl-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:.5rem 0 1rem}
.sl-chip{padding:6px 10px;border:1px solid var(--sl-line);border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.04);font-size:.9rem}
.sl-chip .idx{font-weight:700;margin-right:6px;color:#374151}
.sl-chip .tag{opacity:.75}

.sl-steps{display:grid;gap:10px;margin:14px 0}
@media(min-width:768px){ .sl-steps{grid-template-columns:repeat(5,1fr)} }
.sl-step{border:1px solid var(--sl-line);border-radius:12px;background:#fff;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.sl-step .t{font-weight:800;font-size:.95rem}
.sl-step .b{font-size:.9rem;color:#6b7280}
.sl-step .e{margin-top:6px;font-size:.92rem}

/* =========================
   Screenshots (.ss)
   ========================= */
.ss{max-width:420px; margin:0 auto}
.ss figure{margin:0}
.ss .frame{border:1px solid var(--sl-line); border-radius:18px; background:#fff; box-shadow:var(--sl-shadow); overflow:hidden}
.ss .bar{height:36px; display:flex; align-items:center; gap:8px; padding:0 12px; background:linear-gradient(180deg,#f8fafc,#eef2f7); border-bottom:1px solid var(--sl-line)}
.ss .dots{display:flex; gap:6px}
.ss .dots i{width:10px;height:10px;border-radius:50%;background:#d1d5db;display:block}
.ss img{display:block; width:100%; height:auto; object-fit:contain}
.ss .caption{padding:10px 12px; font-size:.92rem; color:#6b7280; border-top:1px solid var(--sl-line)}
.ss.rounded .bar{display:none}
.ss.device  .bar{display:flex}
.ss.edge .frame{border-color:transparent}
.ss.squared .frame{border-radius:8px}
@media (max-width:576px){ .ss{max-width:100%} }

/* =========================
   SPEAKING
   ========================= */
#speaking .lp-grid.cols-2.pair-equal{ align-items:stretch }
#speaking .lp-equal, #speaking .lp-card, #speaking .fc-card{ height:var(--speaking-card-h); margin-top:20px }

#speaking .sl-steps.equal{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:12px;
}
#speaking .sl-step{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:var(--speaking-step-h);
  border:1px solid #EAECEF; border-radius:14px; background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.06); padding:18px 16px;
}
#speaking .sl-step .t{font-weight:800; font-size:1.05rem; color:#111315}
#speaking .sl-step .b{font-size:1rem; color:#6b7280; margin-top:2px}
#speaking .sl-step .e{font-size:1.125rem; line-height:1.6; margin-top:10px}

/* 플래시카드 */
.fc-wrap{display:flex;flex-direction:column;gap:12px;margin-top:16px}
#speaking .fc-card{
  width:min(820px,100%); height:var(--speaking-card-h);
  perspective:1200px; margin-top:-10px;
}
.fc-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.fc-card.is-flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border:1px solid #EAECEF; border-radius:16px; background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.06); padding:12px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.fc-front .kr{font-size:clamp(1.6rem, 2.6vw, 2.6rem); line-height:1.35; font-weight:600}
.fc-front .hint{position:absolute; bottom:12px; left:0; right:0; color:#6b7280; font-size:.95rem}
.fc-back{transform:rotateY(180deg)}
.fc-back img{width:100%; height:100%; object-fit:contain; display:block; max-height:calc(var(--speaking-card-h) - 24px)}

@media (max-width: 992px){ #speaking .sl-steps.equal{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){
  #speaking .sl-steps.equal{grid-template-columns:1fr}
  #speaking .fc-front .kr{font-size:clamp(1.35rem, 4.2vw, 1.9rem)}
}

/* 섹션 간 마진/패딩 안정화 */
.lp-section .container > :last-child{ margin-bottom:0 }
#speaking.lp-section, #why-speaking.lp-section{ padding-bottom:16px }
#speaking .container, #why-speaking .container{ display:flow-root }
#speaking ul:last-of-type, #why-speaking ul:last-of-type{ margin-bottom:0 }
.lp-section + .lp-section, #speaking + *, #why-speaking + *{ margin-top:0 }

/* 카드 높이 제한(요청) */
#speaking .lp-card.core-principles { max-height:120px; overflow:hidden; padding-bottom:8px; margin-bottom:8px }
#speaking .lp-card.why-fast       { max-height:160px; overflow:hidden; padding-bottom:8px; margin-top:8px; margin-bottom:0 }

/* =========================
   DASHBOARD (Notion white)
   ========================= */
.dash{display:grid; gap:14px; margin-top:14px}
.dash.grid-4{grid-template-columns:1fr}
.dash.grid-2{grid-template-columns:1fr}
@media(min-width:992px){
  .dash.grid-4{grid-template-columns:repeat(4,1fr)}
  .dash.grid-2{grid-template-columns:repeat(2,1fr)}
}
.dash-card{
  border:1px solid var(--line); border-radius:14px; background:#fff;
  box-shadow:var(--sl-shadow); padding:14px; display:flex; flex-direction:column; gap:10px;
}
.dash-card .card-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.dash-card .card-head .muted{color:var(--sl-muted); font-size:.9rem}
.kpi-head{display:flex; align-items:center; justify-content:space-between}
.kpi-title{font-weight:600}
.kpi-badge{border:1px solid var(--line); border-radius:999px; padding:2px 8px; font-size:.8rem; color:#374151}
.kpi-main{display:flex; align-items:center; gap:14px}
.kpi-num{font-weight:800; font-size:1.35rem}
.kpi-sub{color:var(--sl-muted); font-size:.9rem}
.donut{
  --size:74px; width:var(--size); height:var(--size); border-radius:50%;
  background:conic-gradient(var(--clr) calc(var(--val)*1%), #eef2f7 0);
  display:grid; place-items:center; position:relative;
}
.donut::after{
  content:""; position:absolute; inset:8px; background:#fff; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--line);
}
.donut-cutout{position:relative; z-index:1; font-weight:700; font-size:.95rem}
.spark{
  width:120px; height:36px; color:#111315;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(180deg,#f3f4f6,#eef2f7) border-box;
  border:1px solid var(--line); border-radius:10px; display:grid; place-items:center;
}
.bars{display:grid; gap:8px; min-width:220px}
.bar{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center}
.bar .label{color:#374151; font-size:.92rem}
.bar .track{height:8px; background:#f1f5f9; border-radius:999px; overflow:hidden}
.bar .track i{display:block; height:100%; width:var(--w); background:#111315}
.bar .val{font-variant-numeric:tabular-nums; color:#374151; font-size:.92rem}
.skill{display:grid; gap:10px}
.skill-row{display:grid; grid-template-columns:140px 1fr auto; gap:10px; align-items:center}
.skill-row span{color:#111315}
.skill-row .track{height:10px; background:#f1f5f9; border-radius:999px; overflow:hidden}
.skill-row .track i{display:block; height:100%; width:var(--w); background:#111315}
.skill-row em{font-style:normal; color:#374151; font-variant-numeric:tabular-nums}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); padding:6px 10px; border-radius:999px; font-size:.9rem; background:#fff}
.chip.ok{box-shadow:0 4px 16px rgba(0,0,0,.05)}
.chip.mid{opacity:.85;}
.bullets{margin:0; padding-left:18px; display:grid; gap:6px}
.bullets li{line-height:1.6}

/* article tables inside content */
.post-content table,#content table,article table{ width:100%; border-collapse:collapse; margin:1rem 0 }
.post-content th,.post-content td,article th,article td{
  border:1px solid rgba(0,0,0,.12); padding:.5rem .75rem; vertical-align:top;
}
.post-content thead th,article thead th{ background:#f8f9fa; font-weight:600 }
.table-striped tbody tr:nth-of-type(odd){ background:rgba(0,0,0,.02) }
.table-sm th,.table-sm td{ padding:.35rem .5rem }
.table-responsive{ display:block; width:100%; overflow-x:auto }