@charset "utf-8";

/* =======================================================================
   드롭인 티스토리 스킨  style.css   ·  v2 (2026-08)
   · 외부 이미지/폰트 파일 의존 없음 (어떤 블로그에도 그대로 사용)
   · 색·둥근모서리·본문폭은 아래 :root 변수만 바꾸면 한 번에 조정됩니다.

   v2 에서 바뀐 것
   · 제목(H2/H3)에서 배경 배너를 걷어냈습니다. 색 덩어리 대신 여백과
     크기로 단계를 나눕니다 — 글이 길수록 이쪽이 덜 피곤합니다.
   · 예전 글에 인라인 스타일이 박힌 제목도 같은 모양으로 맞춥니다
     (아래 '예전 글 정리' 구역). 글을 다시 손대지 않아도 됩니다.
   · 표·인용·목록의 선을 줄였습니다. 가로선만 남기면 숫자가 읽힙니다.
   · 본문 17px / 행간 1.78 / 읽기폭 720px — 한글 기준으로 다시 잡았습니다.
   ======================================================================= */

:root {
  /* 색 — 코럴 한 갈래로 통일합니다.
     본문 속 요약 박스·비교표·하이라이트가 이미 코럴(#E8590C)이라,
     스킨까지 같은 갈래로 맞춰야 한 화면에 두 색이 안 섞입니다.
     · brand   = 글자에 쓰는 진한 코럴 (흰 바탕에서 4.9:1, 읽힙니다)
     · brand-2 = 지침이 쓰는 그 코럴. 기둥·선 같은 면에 씁니다
     · brand-3 = 본문 박스와 같은 크림 바탕 (#FFF4E6)
     · line-w  = 본문 표가 쓰는 테두리색 (#FFE8CC) */
  --brand:    #c14a11;   /* 메인 색 — 글자용 */
  --brand-2:  #e8590c;   /* 보조 색 — 면·선용 (지침과 동일) */
  --brand-3:  #fff4e6;   /* 아주 옅은 브랜드 배경 (지침과 동일) */
  --line-w:   #ffe8cc;   /* 따뜻한 경계선 (지침 표와 동일) */
  --accent:   #d9480f;   /* 강조 (버튼) — 아껴 씁니다 */

  /* 글자 — 회색에 붉은기를 아주 살짝 섞어 코럴과 붙여 둡니다.
     차가운 회색을 쓰면 코럴 옆에서 파랗게 떠 보입니다. */
  --ink:      #1f1a17;   /* 제목 */
  --body:     #4a423c;   /* 본문 */
  --muted:    #7a6f66;   /* 부가 정보 */

  --line:     #ece5df;   /* 경계선 */
  --line-2:   #f5f0eb;   /* 더 옅은 경계선 */
  --soft:     #fbf8f5;   /* 옅은 배경 */

  --radius:   12px;
  --wrapw:    1120px;    /* 헤더/목록 최대폭 */
  --readw:    720px;     /* 글 본문 읽기폭 — 한글은 이쯤이 한 줄에 40자 안팎 */
}

/* ── 리셋 ── */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  font-size:16px; line-height:1.7; color:var(--body);
  background:#fff; -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  word-break:keep-all;          /* 한글은 단어 단위로 줄바꿈해야 읽힙니다 */
}
h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img{ border:0; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; }

/* 키보드로 다니는 사람에게 지금 어디인지 보여 줍니다 */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--brand-2); outline-offset:2px; border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ── 접근성 ── */
#acc-nav{ position:absolute; left:-9999px; top:0; }
#acc-nav:focus{ left:8px; top:8px; z-index:9999; padding:8px 14px; background:#000; color:#fff; border-radius:8px; }


/* =======================================================================
   헤더 / 메뉴
   ======================================================================= */
#header{ border-bottom:1px solid var(--line); }
.header-top .inner{
  display:flex; align-items:center; gap:14px;
  max-width:var(--wrapw); margin:0 auto; padding:0 20px; min-height:66px;
}
.logo{ font-size:20px; font-weight:800; line-height:1.2; letter-spacing:-.03em; }
.logo a{ color:var(--ink); }

.util{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.search{
  display:flex; align-items:center;
  background:var(--soft); border:1px solid var(--line);
  border-radius:999px; padding:0 4px 0 14px;
  transition:border-color .15s ease, background .15s ease;
}
.search:focus-within{ border-color:var(--brand-2); background:#fff; }
.search input{ width:130px; height:36px; border:0; background:transparent; outline:none; font-size:14px; color:var(--ink); }
.search input::placeholder{ color:var(--muted); }
.search button{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; color:var(--muted); }
.search button:hover{ color:var(--brand); }

.menu-toggle{ display:none; align-items:center; justify-content:center; color:var(--ink); }

/* GNB */
#gnb{ position:relative; }
#gnb ul{
  display:flex; flex-wrap:nowrap; overflow-x:auto;
  max-width:var(--wrapw); margin:0 auto; padding:0 12px;
  scrollbar-width:none; -ms-overflow-style:none;
}
#gnb ul::-webkit-scrollbar{ display:none; }
#gnb li{ flex:0 0 auto; }
#gnb a{ position:relative; display:block; padding:13px 15px; font-size:15px; color:var(--muted); white-space:nowrap; transition:color .15s ease; }
#gnb a:hover{ color:var(--brand); }
#gnb li.current a{ color:var(--brand); font-weight:600; }
#gnb li.current a::after{ content:""; position:absolute; left:15px; right:15px; bottom:0; height:2px; background:var(--brand); }
.gnb-close{ display:none; }


/* =======================================================================
   레이아웃 (단일 프레임)
   ======================================================================= */
.content-wrap{ max-width:var(--wrapw); margin:0 auto; padding:0 20px; }
#content{ width:100%; padding:44px 0 56px; }

/* 글(퍼머링크) 페이지 : 가운데 정렬 단일 컬럼 */
#tt-body-page #content{ max-width:var(--readw); margin:0 auto; padding-top:36px; }


/* =======================================================================
   목록 페이지 : 글 카드 (반응형 그리드)
   ======================================================================= */
#content > .inner{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px 26px;
}
#tt-body-page #content > .inner{ display:block; }   /* 글 페이지는 1단 */

.post-item a{ display:flex; flex-direction:column; height:100%; }
.post-item .thumb{
  display:block; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  background:var(--soft); margin-bottom:13px;
}
.post-item .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.post-item a:hover .thumb img{ transform:scale(1.035); }
.post-item .title{ font-size:17px; font-weight:700; color:var(--ink); line-height:1.5; letter-spacing:-.02em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-item a:hover .title{ color:var(--brand); }
.post-item .excerpt{ margin:8px 0 12px; font-size:14px; color:var(--muted); line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-item .date{ margin-top:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }


/* =======================================================================
   페이지네이션
   ======================================================================= */
.paging{ display:flex; align-items:center; justify-content:center; gap:6px; margin:52px 0 8px; }
.paging a{ display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px; border-radius:8px;
  font-size:14px; color:var(--body); font-variant-numeric:tabular-nums;
  transition:background .15s ease, color .15s ease; }
.paging .pg-num:hover, .paging .pg-arrow:hover{ background:var(--soft); color:var(--brand); }
.paging .pg-num.selected, .paging .pg-num[class*="current"]{ background:var(--brand); color:#fff; }
.paging .pg-nums{ display:inline-flex; gap:4px; }
.paging .no_more{ opacity:.3; pointer-events:none; }


/* =======================================================================
   글 상단 커버
   ======================================================================= */
.post-cover{
  position:relative; display:flex; align-items:flex-end; overflow:hidden;
  min-height:210px; margin:0 0 36px; border-radius:14px;
  background:#33261f center/cover no-repeat;
}
.post-cover::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,17,10,.72), rgba(28,17,10,.06)); }
.post-cover .inner{ position:relative; z-index:1; width:100%; padding:28px 28px 26px; color:#fff; }
.post-cover .category{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.9); }
.post-cover h1{ margin:10px 0 12px; font-size:28px; font-weight:700; line-height:1.36;
  letter-spacing:-.03em; color:#fff; text-wrap:balance; }
.post-cover .meta{ font-size:13px; color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums; }
.post-cover .meta span + span::before{ content:"·"; margin:0 8px; }


/* =======================================================================
   본문 콘텐츠
   ======================================================================= */
.entry-content{ font-size:17px; line-height:1.78; color:var(--body); letter-spacing:-.01em; }
.entry-content > * + *{ margin-top:20px; }
.entry-content p{ word-break:keep-all; overflow-wrap:break-word; }
.entry-content a:not(.go-button){
  color:var(--brand); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:rgba(193,74,17,.35);
  transition:text-decoration-color .15s ease;
}
.entry-content a:not(.go-button):hover{ text-decoration-color:var(--brand); }

/* ── 제목 ───────────────────────────────────────────────────────────────
   배경 배너를 쓰지 않습니다. 색 덩어리는 처음엔 시원해 보여도 글이
   길어지면 시선을 잡아먹습니다. 단계는 여백과 크기로 나눕니다.
     H2 = 왼쪽 기둥 + 큰 글자   (섹션이 시작된다는 신호)
     H3 = 기둥 없이 브랜드색     (같은 섹션 안의 갈래)
     H4 = 얇은 밑줄
   ------------------------------------------------------------------- */

.entry-content h1{
  margin:44px 0 18px; font-size:27px; font-weight:800; line-height:1.38;
  letter-spacing:-.035em; color:var(--ink); text-wrap:balance;
}

.entry-content h2{
  margin:56px 0 18px; padding-left:16px;
  font-size:24px; font-weight:700; line-height:1.42;
  letter-spacing:-.032em; color:var(--ink);
  border-left:3px solid var(--brand-2);
  text-wrap:balance;
}
/* 첫 제목이 커버 바로 밑에 붙으면 위 여백이 과합니다 */
.entry-content > h2:first-child{ margin-top:8px; }

.entry-content h3{
  margin:38px 0 14px;
  font-size:19px; font-weight:700; line-height:1.5;
  letter-spacing:-.028em; color:var(--brand);
  text-wrap:balance;
}

.entry-content h4{
  margin:30px 0 12px; padding-bottom:8px;
  font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--ink);
  border-bottom:1px solid var(--line);
}

/* H5·H6 은 글에서 거의 안 쓰지만, 규칙이 없으면 브라우저 기본값이 나옵니다.
   특히 H6 는 기본이 0.67em 이라 **본문보다 작아져** 제목처럼 안 보입니다.
   모델이 어쩌다 뱉었을 때를 대비해 자리를 잡아 둡니다. */
.entry-content h5{
  margin:26px 0 10px; font-size:15px; font-weight:700;
  letter-spacing:-.015em; color:var(--ink);
}
.entry-content h6{
  margin:24px 0 8px; font-size:13px; font-weight:700;
  letter-spacing:.04em; color:var(--muted);
}

/* ── 예전 글 정리 ───────────────────────────────────────────────────────
   2026년 8월 전에 쓴 글에는 제목에 인라인 스타일(배경·색)이 박혀 있습니다.
   인라인이 CSS 를 이깁니다. 그대로 두면 새 글과 옛 글의 제목 모양이
   달라지므로, 제목에 style 이 붙어 있으면 여기서 도로 맞춥니다.
   글을 하나하나 열어 고칠 필요가 없습니다.
   ------------------------------------------------------------------- */
.entry-content h1[style], .entry-content h2[style],
.entry-content h3[style], .entry-content h4[style],
.entry-content h5[style], .entry-content h6[style]{
  background:none !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
  text-shadow:none !important;
}
.entry-content h2[style]{
  padding:0 0 0 16px !important;
  border-left:3px solid var(--brand-2) !important;
  color:var(--ink) !important;
}
/* H3 는 크기·여백을 건드리지 않습니다. 예전 글의 styled H3 는 대부분
   FAQ 카드 안의 질문 줄이고(`margin:0; font-size:16px`), 그건 일부러
   작게 잡은 것입니다. 억지로 섹션 제목 크기로 키우면 카드가 깨집니다.
   색만 코럴로 맞춥니다. */
.entry-content h3[style]{ color:var(--brand) !important; }
.entry-content h4[style]{
  padding:0 0 8px !important;
  border-bottom:1px solid var(--line) !important;
  color:var(--ink) !important;
}
/* 제목 안에 색만 입힌 껍데기가 있던 경우 */
.entry-content :is(h1,h2,h3,h4,h5,h6) :is(span,font,b,strong)[style]{
  background:none !important; color:inherit !important;
  padding:0 !important; border:0 !important;
}

/* 목록 */
.entry-content ul{ list-style:disc; padding-left:22px; }
.entry-content ol{ list-style:decimal; padding-left:22px; }
.entry-content li{ margin:8px 0; }
.entry-content li::marker{ color:var(--brand-2); }
.entry-content li > ul, .entry-content li > ol{ margin-top:8px; }

/* 인용 — 배경 없이 선 하나 */
.entry-content blockquote{
  padding:2px 0 2px 20px;
  border-left:2px solid var(--brand-2);
  color:var(--muted);
}
.entry-content blockquote p + p{ margin-top:12px; }

/* 이미지 */
.entry-content img{ border-radius:10px; }
.entry-content figure{ text-align:center; }
.entry-content figcaption{ margin-top:9px; font-size:13px; color:var(--muted); }

/* 코드 */
.entry-content pre{ padding:18px; background:#221b16; color:#ece3db; border-radius:10px;
  overflow-x:auto; font-size:14px; line-height:1.65; }
.entry-content code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.entry-content :not(pre) > code{ padding:2px 6px; background:var(--brand-3);
  border:0; border-radius:5px; font-size:.9em; color:#9c3d0e; }

/* 구분선 */
.entry-content hr{ border:0; border-top:1px solid var(--line); margin:44px 0; }

/* 표 — 세로선을 지우고 가로선만 남깁니다. 숫자가 훨씬 잘 읽힙니다. */
.entry-content table{
  width:100%; border-collapse:collapse; margin:6px 0;
  font-size:15px; font-variant-numeric:tabular-nums;
}
.entry-content th,.entry-content td{
  padding:12px 14px; border:0; border-bottom:1px solid var(--line-w);
  text-align:left; vertical-align:top;
}
/* 머리줄은 본문이 직접 그리는 비교표(#FFF4E6 + 코럴 글자)와 같은 옷을
   입힙니다. 지침대로 쓴 표든 맨 <table> 이든 화면에서 같아 보여야 합니다. */
.entry-content thead th{
  background:var(--brand-3); color:var(--brand); font-weight:700;
  font-size:13.5px; letter-spacing:.01em;
  border-bottom:1px solid var(--line-w);
}
.entry-content tbody tr:last-child td{ border-bottom:0; }
.entry-content tbody td:first-child{ color:var(--ink); font-weight:600; }
/* 표가 화면보다 넓으면 표만 옆으로 밀립니다 — 페이지 전체가 밀리면 안 됩니다 */
.entry-content .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }


/* =======================================================================
   '바로 가기' 버튼  (아이콘/화살표/이미지 없음 — 순수 텍스트)
   ======================================================================= */
.entry-content a.go-button{
  display:block; width:100%; max-width:520px; margin:28px auto;
  padding:16px 22px;
  text-align:center; text-decoration:none !important;
  font-size:17px; font-weight:700; letter-spacing:-.02em; color:#fff !important;
  background:var(--accent); border-radius:10px;
  transition:background .18s ease, transform .18s ease;
}
.entry-content a.go-button:hover{ background:#b83c0c; transform:translateY(-1px); }
.entry-content a.go-button:active{ transform:translateY(0); }


/* =======================================================================
   목차 — 인라인
   ======================================================================= */
#toc-container{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin:4px 0 34px; overflow:hidden; }
#toc-container .toc-title{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--brand);
  background:var(--soft); border-bottom:1px solid var(--line); cursor:pointer; user-select:none;
}
#toc-toggle-text{ font-size:12px; font-weight:400; color:var(--muted); }
#toc-list{ padding:14px 18px; counter-reset:toc-h2; }
#toc-list.hidden{ display:none; }
#toc-list li[data-level="2"]{ counter-increment:toc-h2; counter-reset:toc-h3; margin:7px 0 3px; }
#toc-list li[data-level="3"]{ counter-increment:toc-h3; margin:3px 0 3px 16px; }
#toc-list li[data-level="2"] > a::before{ content:counter(toc-h2)". "; color:var(--brand); font-weight:700; }
#toc-list li[data-level="3"] > a::before{ content:counter(toc-h2)"-"counter(toc-h3)". "; color:var(--brand-2); font-weight:600; }
#toc-list a{ display:inline-block; padding:2px 6px; border-radius:6px; color:var(--body);
  text-decoration:none; line-height:1.6; transition:.15s; }
#toc-list li[data-level="2"] > a{ font-size:15px; font-weight:600; color:var(--ink); }
#toc-list li[data-level="3"] > a{ font-size:14px; }
#toc-list a:hover{ color:var(--brand); background:var(--brand-3); }


/* =======================================================================
   목차 — 좌측 플로팅 (1320px 이상 넓은 화면에서만 표시)
   ======================================================================= */
#toc-float{
  display:none;
  position:fixed; top:120px; left:28px;
  width:230px; max-height:72vh; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); z-index:900;
}
@media (min-width:1320px){
  #tt-body-page #toc-float.show{ display:block; }   /* 인라인 목차를 지나친 뒤에만 노출 */
}
#toc-float .tf-head{ padding:12px 16px; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); }
#toc-float ul{ padding:8px; counter-reset:tf-h2; }
#toc-float li[data-level="2"]{ counter-increment:tf-h2; counter-reset:tf-h3; }
#toc-float li[data-level="3"]{ counter-increment:tf-h3; margin-left:12px; }
#toc-float a{ display:block; padding:6px 10px; border-radius:7px; font-size:13px; line-height:1.45;
  color:var(--muted); text-decoration:none; border-left:2px solid transparent; transition:.15s; }
#toc-float li[data-level="2"] > a{ color:#4a423c; font-weight:600; }
#toc-float li[data-level="2"] > a::before{ content:counter(tf-h2)". "; color:var(--brand); font-weight:700; }
#toc-float li[data-level="3"] > a::before{ content:counter(tf-h2)"-"counter(tf-h3)". "; color:var(--brand-2); }
#toc-float a:hover{ background:var(--soft); color:var(--brand); }
#toc-float a.active{ background:var(--brand-3); color:var(--brand); font-weight:700; border-left-color:var(--brand); }
#toc-float::-webkit-scrollbar{ width:6px; }
#toc-float::-webkit-scrollbar-thumb{ background:#e8d5c2; border-radius:3px; }


/* =======================================================================
   태그 / 관련글 / 댓글
   ======================================================================= */
.tags{ margin:52px 0 0; padding-top:26px; border-top:1px solid var(--line); }
.tags h2{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px; }
.tags a{ display:inline-block; margin:0 7px 8px 0; padding:6px 13px;
  background:var(--soft); border:1px solid var(--line);
  border-radius:999px; font-size:13px; color:var(--muted);
  transition:border-color .15s ease, color .15s ease, background .15s ease; }
.tags a:hover{ border-color:var(--brand); color:var(--brand); background:#fff; }

.related-articles{ margin:48px 0 0; }
.related-articles h2{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px; }
.related-articles ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.related-articles .thumb{ display:block; aspect-ratio:16/10; border-radius:9px; overflow:hidden; background:var(--soft); margin-bottom:9px; }
.related-articles .thumb img{ width:100%; height:100%; object-fit:cover; }
.related-articles .title{ font-size:14px; color:var(--body); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.related-articles a:hover .title{ color:var(--brand); }

.comments{ margin:52px 0 0; }


/* =======================================================================
   푸터
   ======================================================================= */
#footer{ border-top:1px solid var(--line); margin-top:60px; }
#footer .inner{ position:relative; max-width:var(--wrapw); margin:0 auto; padding:28px 20px; text-align:center; }
#footer .copyright{ font-size:13px; color:var(--muted); }
.page-top{ position:absolute; right:20px; top:50%; transform:translateY(-50%);
  padding:7px 12px; border:1px solid var(--line); border-radius:8px;
  font-size:12px; font-weight:700; color:var(--muted); }
.page-top:hover{ color:var(--brand); border-color:var(--brand); }


/* =======================================================================
   최상단 이동(TOP) 버튼 — 우측 하단 고정
   ======================================================================= */
#top-btn{
  position:fixed; right:22px; bottom:22px; z-index:950;
  width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); color:var(--brand);
  box-shadow:0 6px 18px rgba(31,26,23,.10);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
#top-btn.show{ opacity:1; visibility:visible; transform:translateY(0); }
#top-btn:hover{ background:var(--soft); border-color:var(--brand); }
@media (max-width:768px){ #top-btn{ right:16px; bottom:16px; width:42px; height:42px; } }


/* =======================================================================
   반응형
   ======================================================================= */
@media (max-width:1024px){
  #content > .inner{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px){
  .menu-toggle{ display:inline-flex; }

  /* 모바일 메뉴 = 전체 오버레이 */
  #gnb{ position:fixed; inset:0; z-index:9000; background:#fff; display:none; overflow-y:auto; padding:64px 0 30px; }
  body.gnb-open #gnb{ display:block; }
  #gnb ul{ flex-direction:column; padding:0; overflow:visible; }
  #gnb li{ width:100%; }
  #gnb a{ padding:15px 24px; font-size:16px; border-bottom:1px solid var(--line); color:var(--ink); }
  #gnb li.current a::after{ display:none; }
  .gnb-close{ display:flex; position:absolute; top:16px; right:20px; color:var(--ink); }

  #content{ padding:30px 0 44px; }
  .post-cover{ min-height:172px; border-radius:12px; }
  .post-cover h1{ font-size:21px; }
  .post-cover .inner{ padding:22px 20px 20px; }

  .entry-content{ font-size:16px; line-height:1.75; }
  .entry-content h1{ font-size:23px; margin-top:36px; }
  .entry-content h2{ font-size:20px; margin-top:42px; padding-left:13px; }
  .entry-content h2[style]{ padding-left:13px !important; }
  .entry-content h3{ font-size:17.5px; margin-top:30px; }
  .entry-content hr{ margin:34px 0; }

  /* 표 가로 스크롤 (모바일 넘침 방지) */
  .entry-content table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
}

@media (max-width:560px){
  #content > .inner{ grid-template-columns:1fr; }
  .related-articles ul{ grid-template-columns:1fr; }
  .search input{ width:96px; }
  .logo{ font-size:18px; }
}