/* ============================================================
   blog.oxythus.com — 모던 블로그 디자인 시스템
   외부 의존: Pretendard(폰트)만. 라이트/다크 지원. 빠른 로딩.
   ============================================================ */

/* ---------- 토큰 ---------- */
:root{
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  --bg:#ffffff; --bg-soft:#f6f7f9; --surface:#ffffff; --surface-2:#f2f4f7;
  --ink:#15181e; --ink-2:#3c434e; --muted:#6b7480; --faint:#98a1ac;
  --line:#e9ebef; --line-2:#dfe2e8;
  --brand:#3b5bff; --brand-ink:#ffffff; --brand-soft:#eef1ff;
  --accent:#ff5a4d;
  --shadow-sm:0 1px 2px rgba(17,24,39,.06), 0 1px 3px rgba(17,24,39,.05);
  --shadow-md:0 6px 20px rgba(17,24,39,.08);
  --shadow-lg:0 16px 40px rgba(17,24,39,.14);
  --radius:16px; --radius-sm:10px; --radius-lg:22px;
  --wrap:1160px; --measure:720px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:64px;
}
html[data-theme="dark"]{
  --bg:#0f1115; --bg-soft:#0f1115; --surface:#171a21; --surface-2:#1d222b;
  --ink:#e9ecf1; --ink-2:#c3c9d4; --muted:#98a1ae; --faint:#6b7480;
  --line:#242a34; --line-2:#2d3440;
  --brand:#6b8afd; --brand-ink:#0b1020; --brand-soft:#1a2033;
  --accent:#ff6f63;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 20px 48px rgba(0,0,0,.55);
}

/* ---------- 리셋/기본 ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.7;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .25s var(--ease), color .25s var(--ease)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.dot{margin:0 7px;color:var(--faint)}

/* ---------- 읽기 진행바 ---------- */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .1s linear}

/* ---------- 헤더 ---------- */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.8) blur(12px);-webkit-backdrop-filter:saturate(1.8) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s, background .25s}
.site-header.scrolled{border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:18px;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:20px;letter-spacing:-.045em}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:12px 12px 12px 4px;
  background:conic-gradient(from 220deg at 30% 30%, var(--brand), #8a5cff 40%, #ff5a7a 70%, var(--brand));
  color:#fff;font-size:17px;font-weight:900;transform:rotate(-6deg);
  box-shadow:0 5px 14px rgba(91,107,255,.35), inset 0 0 0 2px rgba(255,255,255,.22);
  transition:transform .35s var(--ease), box-shadow .25s}
.brand:hover .brand-mark{transform:rotate(4deg) scale(1.08);box-shadow:0 7px 18px rgba(91,107,255,.45), inset 0 0 0 2px rgba(255,255,255,.3)}
.brand-name{background:linear-gradient(92deg,var(--ink) 20%,var(--brand) 60%,#8a5cff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.brand:hover .brand-name{background:linear-gradient(92deg,var(--brand),#8a5cff 55%,#ff5a7a);
  -webkit-background-clip:text;background-clip:text}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:8px 12px;border-radius:9px;color:var(--muted);font-size:15px;font-weight:600;transition:color .15s, background .15s}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a.on{color:var(--brand)}
.header-actions{display:flex;align-items:center;gap:8px}
.search{display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;color:var(--muted);transition:border-color .15s, width .2s}
.search:focus-within{border-color:var(--brand)}
.search input{border:0;background:transparent;color:var(--ink);font-size:14px;width:110px;outline:none;
  -webkit-appearance:none;appearance:none;min-width:0}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--faint)}
/* 돋보기 submit 버튼 — 터치 타깃을 확보하려 여백을 음수로 상쇄해 겉보기는 그대로 둔다 */
.search-btn{display:grid;place-items:center;flex:none;border:0;background:none;color:inherit;cursor:pointer;
  padding:9px;margin:-9px -6px -9px -9px;border-radius:999px;-webkit-tap-highlight-color:transparent}
.search-btn:hover{color:var(--brand)}
.theme-toggle{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface);color:var(--ink-2);transition:.15s}
.theme-toggle:hover{background:var(--surface-2);color:var(--ink)}
.theme-toggle .ico-moon{display:none}
html[data-theme="dark"] .theme-toggle .ico-sun{display:none}
html[data-theme="dark"] .theme-toggle .ico-moon{display:block}

/* ---------- 메인 ---------- */
.site-main{padding:0 0 80px;min-height:60vh}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:44px 0 20px}
.section-head h2{font-size:22px;font-weight:800;letter-spacing:-.03em;margin:0}
.section-head a{font-size:14px;color:var(--muted);font-weight:600}

/* 페이지 인트로 */
.page-intro{padding:44px 0 8px}
.page-intro h1{font-size:34px;font-weight:800;letter-spacing:-.04em;margin:0 0 8px}
.page-intro p{margin:0;color:var(--muted);font-size:17px}

/* ---------- 히어로 피처드 ---------- */
.hero{margin-top:34px}
.hero-card{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease)}
.hero-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.hero-media{position:relative;min-height:340px;background:var(--surface-2);overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-ph{display:grid;place-items:center;height:100%;font-size:96px;font-weight:900;color:var(--line-2)}
.hero-body{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.hero-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.02em;
  color:var(--accent);text-transform:uppercase;margin-bottom:14px}
.hero-body h2{font-size:30px;line-height:1.28;letter-spacing:-.035em;font-weight:800;margin:0 0 14px}
.hero-body h2 a:hover{color:var(--brand)}
.hero-excerpt{color:var(--ink-2);font-size:16px;margin:0 0 22px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-meta{display:flex;align-items:center;gap:2px;color:var(--muted);font-size:13.5px}
.chip{display:inline-flex;align-items:center;background:var(--brand-soft);color:var(--brand);
  font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:999px;transition:.15s}
.chip:hover{filter:brightness(.97)}

/* ---------- 카드 그리드 ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--line-2)}
.pcard-thumb{display:block;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.pcard-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.pcard:hover .pcard-thumb img{transform:scale(1.05)}
.pcard-ph{display:grid;place-items:center;height:100%;font-size:46px;font-weight:900;color:var(--line-2)}
.pcard-body{display:flex;flex-direction:column;gap:9px;padding:16px 18px 20px;flex:1}
.pcard-top{display:flex;gap:8px}
.pcard-title{font-size:17.5px;font-weight:700;line-height:1.42;letter-spacing:-.02em;margin:0}
.pcard-title a{background:linear-gradient(var(--brand),var(--brand)) 0 100%/0 1px no-repeat;transition:background-size .3s}
.pcard-title a:hover{color:var(--brand)}
.pcard-excerpt{color:var(--muted);font-size:14px;line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-meta{margin-top:auto;padding-top:4px;color:var(--faint);font-size:12.5px;display:flex;align-items:center}
/* 가로형(리스트) 카드 */
.pcard-wide{flex-direction:row;align-items:stretch}
.pcard-wide .pcard-thumb{flex:0 0 40%;aspect-ratio:auto}

/* ---------- 카테고리 칩 바 ---------- */
.chipbar{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 4px}
.chipbar a{padding:8px 15px;border:1px solid var(--line);border-radius:999px;font-size:14px;
  font-weight:600;color:var(--ink-2);background:var(--surface);transition:.15s}
.chipbar a:hover{border-color:var(--brand);color:var(--brand)}

/* ==================== 홈 (에디토리얼 스타일) ==================== */
.home{padding-bottom:40px}
.home-hero{padding:40px 0 8px}
.home-h{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.045em;line-height:1.28;margin:0 0 24px;max-width:20ch}
.home-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 26px}
.home-chips-label{font-size:12.5px;font-weight:800;letter-spacing:-.01em;color:var(--muted);
  padding-right:12px;margin-right:4px;border-right:1.5px solid var(--line-2);white-space:nowrap}
.home-chip{padding:9px 18px;border-radius:999px;background:var(--surface-2);border:1px solid transparent;
  font-weight:600;font-size:14px;color:var(--ink-2);transition:.15s}
.home-chip:hover{background:var(--surface);border-color:var(--line-2)}
.home-chip.on{background:var(--ink);color:var(--bg)}
.home-chip .chip-n{margin-left:6px;font-size:11.5px;font-weight:700;opacity:.5}

/* 피처 카드줄 */
.feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-card{position:relative;display:block;aspect-ratio:3/3.7;border-radius:20px;overflow:hidden;
  background:var(--surface-2);box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feature-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.feature-card:hover img{transform:scale(1.06)}
.feature-card .fc-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.16) 58%,rgba(0,0,0,.82) 100%)}
.feature-card.fc-c0{background:linear-gradient(160deg,#2c2c3b,#131320)}
.feature-card.fc-c1{background:linear-gradient(160deg,#20a866,#0e7a46)}
.feature-card.fc-c2{background:linear-gradient(160deg,#4d7dff,#2a53d8)}
.feature-card.fc-c3{background:linear-gradient(160deg,#ff9e42,#f5751a)}
.feature-card:not(.has-img) .fc-scrim{background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35) 100%)}
.fc-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:20px;color:#fff}
.fc-cat{font-size:12px;font-weight:800;letter-spacing:.02em;opacity:.95;margin-bottom:auto;
  background:rgba(255,255,255,.16);align-self:flex-start;padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.fc-title{font-size:19px;font-weight:800;line-height:1.34;letter-spacing:-.02em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fc-desc{font-size:13px;opacity:.86;margin-top:7px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 섹션 헤더 */
.home-section{margin:56px 0}
.home-h2row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 22px}
.home-h2{font-size:24px;font-weight:800;letter-spacing:-.035em;margin:0}
.home-more{font-size:14px;color:var(--muted);font-weight:600}
.home-more:hover{color:var(--brand)}

/* 섹션 둘러보기 (컬러 카드) */
/* 둘러보기 — 잡지 목차(에디토리얼) 스타일: 배경·이모지 없이 타이포와 헤어라인만 */
.pillar-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.pillar{display:flex;flex-direction:column;gap:8px;padding:24px 26px 30px;border-left:1px solid var(--line)}
.pillar:first-child{border-left:0;padding-left:2px}
.pillar::before{content:var(--pl-l,"");font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--faint);margin-bottom:2px}
.pillar .pl-t{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--ink);transition:color .15s}
.pillar .pl-d{font-size:14px;color:var(--muted);line-height:1.55}
.pillar .pl-go{margin-top:16px;font-size:13.5px;font-weight:700;color:var(--ink);opacity:.45;transition:opacity .2s, transform .2s var(--ease), color .2s}
.pillar:hover .pl-t{color:var(--brand)}
.pillar:hover .pl-go{opacity:1;color:var(--brand);transform:translateX(4px)}
.pillar.p0{--pl-l:"REVIEW"}
.pillar.p1{--pl-l:"INFO"}
.pillar.p2{--pl-l:"ESSAY"}

@media(max-width:860px){
  .feature-row{grid-template-columns:repeat(2,1fr)}
  .pillar-row{grid-template-columns:1fr}
  .pillar{border-left:0;border-top:1px solid var(--line);padding-left:2px}
  .pillar:first-child{border-top:0}
}
@media(max-width:560px){
  .home-hero{padding:26px 0 4px}
  .feature-row{grid-template-columns:1fr 1fr;gap:12px}
  .feature-card{aspect-ratio:3/3.9;border-radius:16px}
  .fc-title{font-size:16px}.fc-desc{display:none}
}

/* ---------- 단일 글 ---------- */
.article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;
  max-width:var(--wrap);margin:0 auto;padding:0 20px;align-items:start}
.article{min-width:0;max-width:var(--measure);margin:0 auto;width:100%}
.breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13.5px;margin:30px 0 18px}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb .sep{color:var(--faint)}
.article-head h1{font-size:36px;line-height:1.3;letter-spacing:-.04em;font-weight:800;margin:12px 0 16px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px;color:var(--muted);font-size:14px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.article-hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin:24px 0 10px;box-shadow:var(--shadow-md)}

.article-body{font-size:18px;line-height:1.98;color:#23282f;margin-top:28px;
  word-break:keep-all;overflow-wrap:break-word;letter-spacing:-.003em}
html[data-theme="dark"] .article-body{color:var(--ink-2)}
.article-body > *:first-child{margin-top:0}
.article-body h2{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1.4;margin:50px 0 16px;
  padding-top:6px}
.article-body h3{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:34px 0 10px}
.article-body p{margin:20px 0}
.article-body strong{font-weight:700;color:var(--ink)}
.article-body a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.article-body ul,.article-body ol{margin:20px 0;padding-left:24px}
.article-body li{margin:10px 0;padding-left:2px}
.article-body img{max-width:100%;width:auto;border-radius:var(--radius);margin:28px auto;box-shadow:var(--shadow-sm)}
/* 쿠팡 배너·상품 이미지: 원본이 작아서 확대되면 흉함 — 적당한 크기로 제한 */
.article-body img[src*="coupang"]{max-width:min(340px,100%);box-shadow:none;border:1px solid var(--line)}
.article-body .video-embed{margin:28px 0}
.article-body .video-embed-frame{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius);background:#000;box-shadow:var(--shadow-md)}
.article-body .video-embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article-body .video-embed video{display:block;width:100%;border-radius:var(--radius);background:#000;box-shadow:var(--shadow-md)}
.article-body .video-embed figcaption{margin-top:8px;font-size:14px;color:var(--muted);text-align:center}
.article-body blockquote{margin:26px 0;padding:6px 22px;border-left:3px solid var(--brand);
  background:var(--surface-2);border-radius:0 10px 10px 0;color:var(--ink-2)}
.article-body table{width:100%;border-collapse:separate;border-spacing:0;margin:26px 0;font-size:15px;
  border:1px solid var(--line-2);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.article-body th,.article-body td{border:0;border-bottom:1px solid var(--line-2);padding:13px 16px;text-align:left;
  vertical-align:top;line-height:1.65;word-break:keep-all}
.article-body thead th{background:var(--surface-2);font-weight:800;font-size:13.5px;letter-spacing:-.01em;
  color:var(--ink);border-bottom:2px solid var(--line-2)}
.article-body tbody tr:nth-child(even){background:var(--surface-2)}
.article-body tbody tr:last-child td{border-bottom:0}
.article-body td:first-child,.article-body th:first-child{font-weight:700;color:var(--ink)}
/* 추천 이미지 자리(슬롯) — 발행 전 자리표시자 */
.article-body [data-image-slot]{background:var(--surface-2);border:2px dashed var(--brand);border-radius:12px;
  padding:14px 18px;margin:20px 0;color:var(--muted);font-size:14px}
.article-body [data-image-slot] p{margin:6px 0}
.article-body code{background:var(--surface-2);padding:2px 7px;border-radius:6px;font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.article-body hr{border:0;border-top:1px solid var(--line);margin:36px 0}
/* 쿠팡 등 제휴 구매 버튼(CTA) */
.article-body a.coupang-cta{display:block;text-align:center;text-decoration:none;
  background:linear-gradient(135deg,#ff5a4d,#ff8a3d);color:#fff!important;font-weight:800;font-size:16px;
  padding:15px 20px;border-radius:14px;margin:22px 0;box-shadow:0 6px 18px rgba(255,90,77,.28);
  transition:transform .12s var(--ease), box-shadow .12s}
.article-body a.coupang-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,90,77,.36);text-decoration:none}
/* 쿠팡 배너 이미지 링크 — 이미지 자체가 클릭 영역 (버튼 스타일은 씌우지 않음) */
.article-body a.coupang-banner{display:block;text-align:center;text-decoration:none;background:none;color:inherit}
.article-body a.coupang-banner img{display:inline-block;
  transition:transform .12s var(--ease), box-shadow .12s}
.article-body a.coupang-banner:hover img{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* 대가성 고지 / 저자 박스 */
.disclosure{display:flex;gap:12px;align-items:flex-start;margin:30px 0;padding:15px 18px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:13.5px;color:var(--muted);line-height:1.6}
.disclosure svg{flex:none;margin-top:2px;color:var(--accent)}
.author-box{display:flex;gap:16px;align-items:center;margin:40px 0;padding:20px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.author-avatar{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;font-weight:800;font-size:20px}
.author-box .n{font-weight:700}
.author-box .d{color:var(--muted);font-size:14px;margin-top:2px}

/* 광고 슬롯 — 광고가 실제로 채워졌을 때만 보임 (미승인·미채움 시 완전히 숨김) */
.ad-slot{margin:30px 0}
.ad-slot ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none;margin:0}
.ad-slot:has(ins.adsbygoogle:not([data-ad-status])){display:none;margin:0}

/* ---------- 사이드바 ---------- */
.sidebar{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:26px}
.side-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.side-box h4{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.toc{font-size:14px;display:flex;flex-direction:column}
.toc a{display:block;padding:6px 0 6px 14px;color:var(--muted);line-height:1.55;
  border-left:1px solid var(--line);transition:color .15s, border-color .15s}
.toc a:hover{color:var(--ink)}
.toc a.lvl-3{padding-left:30px;font-size:13px;color:var(--faint)}
.toc a.lvl-3:hover{color:var(--ink)}
.toc a.active{color:var(--ink);font-weight:700;border-left:2px solid var(--ink);padding-left:13px}
.toc a.lvl-3.active{padding-left:29px}

/* 글 하단 태그 */
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 4px}
.post-tags .tag{font-size:13px;font-weight:600;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;transition:.15s}
.post-tags .tag:hover{color:var(--brand);border-color:var(--brand);background:var(--surface)}
.side-pop{display:flex;flex-direction:column;gap:2px}
.side-pop a{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.45}
.side-pop a:last-child{border-bottom:0}
.side-pop .rank{flex:none;font-weight:800;color:var(--brand);width:16px}

/* 관련글 */
.related{max-width:var(--wrap);margin:56px auto 0;padding:0 20px}
.related .section-head{margin:0 0 20px}
.related .grid{grid-template-columns:repeat(4,1fr);gap:20px}

/* 뒤로 */
.backrow{max-width:var(--measure);margin:40px auto 0;padding:0 20px;text-align:center}
.btn-back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:600;font-size:14.5px}
.btn-back:hover{color:var(--brand)}

/* ---------- 고정 페이지 ---------- */
.page-doc{max-width:var(--measure);margin:0 auto;padding:0 20px}

/* ---------- 빈 상태 ---------- */
.empty{text-align:center;color:var(--muted);padding:80px 20px}
.empty .big{font-size:52px;margin-bottom:10px}
.empty a{color:var(--brand);font-weight:600}

/* ---------- 푸터 ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg-soft);margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px;padding:48px 20px 30px}
.footer-brand p{margin:12px 0 0;color:var(--muted);font-size:14px;max-width:36ch}
.footer-col h4{margin:0 0 14px;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.footer-col a{display:block;padding:5px 0;color:var(--muted);font-size:14px;transition:color .15s}
.footer-col a:hover{color:var(--brand)}
.footer-legal{color:var(--faint);font-size:12.5px;padding:18px 20px 30px;border-top:1px solid var(--line)}

/* ---------- 반응형 ---------- */
@media(max-width:980px){
  .article-wrap{grid-template-columns:1fr;gap:0}
  .sidebar{position:static;flex-direction:row;flex-wrap:wrap;margin:34px auto 0;max-width:var(--measure)}
  .sidebar .side-box{flex:1;min-width:220px}
  .side-box.toc-box{order:-1;flex-basis:100%}
}
@media(max-width:860px){
  .grid{grid-template-columns:repeat(2,1fr);gap:22px 18px}
  .hero-card{grid-template-columns:1fr}
  .hero-media{min-height:220px;aspect-ratio:16/9}
  .hero-body{padding:26px 24px}
  .hero-body h2{font-size:25px}
  .related .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .wrap{padding:0 16px}
  .brand-name{display:none}
  /* 접힌 상태 — 돋보기만 보인다. 탭하면 app.js 가 펴 준다(빈 검색 전송 대신) */
  .search input{width:0;padding:0;font-size:16px}      /* 16px 미만이면 iOS 가 페이지를 확대함 */
  /* 펼친 상태 — 남는 폭을 채운다. 모자라면 .nav 가 대신 줄어든다(overflow-x:auto 라 축소 가능) */
  .search.open,.search:focus-within{flex:1 1 auto;min-width:0}
  .search.open input,.search:focus-within input{flex:1 1 auto;width:auto;min-width:60px;padding-left:2px}
  .header-actions{min-width:0}
  .page-intro h1{font-size:27px}
  .article-head h1{font-size:28px}
  .grid{grid-template-columns:1fr;gap:18px}
  .pcard-wide{flex-direction:column}
  .pcard-wide .pcard-thumb{flex-basis:auto;aspect-ratio:16/10}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .footer-brand{grid-column:1/-1}
  .related .grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}