@charset "utf-8";
/* ════════════════════════════════════════════════════════
   Devvvvvv — 티스토리 스킨 스타일시트
   구조(skin.html)는 건드리지 않고 이 파일만 교체합니다.
   ════════════════════════════════════════════════════════ */

/* 색을 바꾸려면 아래 --primary 한 줄만 고치면 전체에 반영됩니다.
   (꾸미기 → 스킨 설정의 '포인트 색상'보다 이 값이 우선합니다) */

/* ── 토큰 ───────────────────────────────────────────── */
:root{
  --bg:#FFFFFF;
  --surface:#F1F3F6;
  --surface-2:#F7F8FA;
  --line:#E5E6E8;
  --ink:#171D26;
  --ink2:#42464E;
  --muted:#596372;
  --primary:#254ACB;
  --on-primary:#FFFFFF;
  --primary-soft:#EDF1FC;
  --radius:16px;
  --radius-sm:10px;
  --content:760px;   /* 글 본문 읽는 폭 */
  --list:1080px;     /* 목록·커버·하단 영역 폭 */
  --aside:232px;
  --gutter:24px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E1116; --surface:#181C23; --surface-2:#141820; --line:#262B33;
    --ink:#EDF0F4; --ink2:#B6BDC8; --muted:#8A93A1;
    --primary:#7E9CF2; --on-primary:#0E1116; --primary-soft:#1A2134;
  }
}

/* ── 리셋 ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,Inter,"Noto Sans KR",
    -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.65;font-weight:400;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:500;letter-spacing:-.04em;line-height:1.32}
p,ul,ol,figure,dl{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;vertical-align:middle}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
hr{display:none}
.screen_out,#acc-nav{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#acc-nav a:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;
  z-index:200;background:var(--primary);color:var(--on-primary);padding:10px 16px;border-radius:var(--radius-sm)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── 헤더 ───────────────────────────────────────────── */
#header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
}
@media (prefers-color-scheme:dark){ #header{background:rgba(14,17,22,.9)} }
#header .inner{
  max-width:1200px;margin:0 auto;padding:10px var(--gutter);
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;min-height:62px;
}
#header h1{font-size:17px;font-weight:600;letter-spacing:-.045em;flex:none}
#header h1 a{color:var(--ink)}
#header h1 img{max-height:26px;width:auto}

#header h1{order:1}
#gnb{order:2;flex:1 0 auto;min-width:max-content}
#gnb ul{display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
#gnb li{margin:0}
#gnb a{font-size:14.5px;color:var(--muted);letter-spacing:-.015em;white-space:nowrap;
  padding:4px 0;display:inline-block;transition:color .15s}
#gnb a:hover{color:var(--ink)}
#gnb .selected>a,#gnb .on>a{color:var(--ink);font-weight:500}

.util{order:3;display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0}
.util .search{position:relative}
.util .search input{
  width:clamp(110px,13vw,180px);font-size:14px;padding:9px 14px;border:0;border-radius:999px;
  background:var(--surface);color:var(--ink);transition:width .2s;
}
.util .search input::placeholder{color:var(--muted)}
.util .search input:focus{width:clamp(140px,17vw,220px);outline:2px solid var(--primary);outline-offset:1px}
.util .search button{
  font-size:13.5px;color:var(--muted);padding:6px 10px;border-radius:var(--radius-sm);
}
.util .search button:hover{color:var(--primary)}
.util .profile{position:relative}
.util .profile>button{display:block;line-height:0}
.util .profile img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--surface)}
.util .profile nav{
  position:absolute;right:0;top:calc(100% + 10px);min-width:132px;z-index:60;
  background:var(--bg);border-radius:var(--radius-sm);
  padding:6px;box-shadow:0 12px 32px rgba(16,24,40,.12);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s;
}
.util .profile:hover nav,.util .profile:focus-within nav{opacity:1;visibility:visible;transform:none}
.util .profile nav a{display:block;padding:8px 12px;font-size:14px;color:var(--ink2);border-radius:8px}
.util .profile nav a:hover{background:var(--surface);color:var(--ink)}
.util .menu{display:none;font-size:14px;color:var(--ink2);
  background:var(--surface);border-radius:var(--radius-sm);padding:8px 14px}

/* ── 레이아웃 ───────────────────────────────────────
   참고 사이트와 같은 가운데 한 줄 구성.
   사이드바는 본문 아래 넓은 띠로 내려갑니다.
   예전 2단으로 돌리려면 아래 .content-wrap / #aside 블록만 교체하세요. */
#container{display:block}
.content-wrap{
  max-width:1200px;margin:0 auto;padding:0 var(--gutter) clamp(88px,12vw,128px);
  display:block;
}
#content{max-width:var(--list);margin:0 auto;min-width:0}
#content>.inner{display:block}

#aside{
  max-width:var(--list);margin:clamp(96px,12vw,136px) auto 0;
}
#aside .sidebar-1{margin-bottom:52px}
#aside .sidebar-2{columns:3;column-gap:48px}
#aside .sidebar-2>div{break-inside:avoid;width:100%;margin:0 0 34px;display:inline-block}
#aside .sidebar-2>div:last-child{margin-bottom:0}
#aside>div>*+*{margin-top:0}

/* ── 프로모션 슬라이더 ──────────────────────────────── */
.main-slider{max-width:1200px;margin:28px auto 0;padding:0 var(--gutter)}
.main-slider ul{display:flex;flex-direction:column;gap:12px}
.main-slider li{
  background-size:cover;background-position:center;border-radius:var(--radius);
  overflow:hidden;min-height:180px;display:flex;
}
.main-slider .inner{display:flex;align-items:flex-end;width:100%;padding:28px}
.main-slider .text{display:block;font-size:22px;font-weight:500;letter-spacing:-.04em;color:#fff}
.main-slider .btn{
  display:inline-block;margin-top:14px;font-size:14px;font-weight:500;
  background:var(--primary);color:var(--on-primary);border-radius:var(--radius-sm);padding:9px 18px;
}

/* ── 홈 커버 공통 ───────────────────────────────────── */
[class^="cover-"]{padding-top:clamp(72px,11vw,132px)}
[class^="cover-"]:first-child{padding-top:clamp(56px,8vw,96px)}
/* 홈 첫 섹션의 제목을 히어로 크기로.
   꾸미기 → 홈 커버에서 첫 커버 제목을 블로그 한 줄 소개로 바꾸면 그대로 히어로가 됩니다. */
#tt-body-index [class^="cover-"]:first-child{padding-top:clamp(64px,10vw,116px)}
#tt-body-index [class^="cover-"]:first-child>h2{
  font-size:clamp(32px,6vw,56px);letter-spacing:-.055em;line-height:1.2;
  margin-bottom:clamp(40px,6vw,68px);
}
[class^="cover-"]>h2{
  font-size:clamp(26px,3.8vw,38px);font-weight:500;letter-spacing:-.045em;
  color:var(--ink);text-align:center;line-height:1.3;
  margin-bottom:clamp(32px,4.5vw,52px);
}
[class^="cover-"] .title{
  display:block;font-size:17px;font-weight:500;letter-spacing:-.03em;
  line-height:1.45;color:var(--ink);
}
[class^="cover-"] .excerpt{
  display:block;margin-top:7px;font-size:14px;line-height:1.62;color:var(--muted);
  letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
[class^="cover-"] .date,[class^="cover-"] .comment{font-size:13px;color:var(--muted)}
[class^="cover-"] .meta{display:flex;gap:12px;margin-top:12px}
[class^="cover-"] li>a{display:block}
[class^="cover-"] figure{margin:0;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface)}
[class^="cover-"] figure img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease}
[class^="cover-"] a:hover figure img{transform:scale(1.03)}
[class^="cover-"] a:hover .title{color:var(--primary)}
[class^="cover-"] .more{
  display:block;width:fit-content;margin:36px auto 0;font-size:14px;font-weight:500;color:var(--primary);
  background:var(--surface);border-radius:var(--radius-sm);padding:10px 18px;
}

/* 커버 1 — 썸네일 그리드 */
.cover-thumbnail-1 ul{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 22px}
.cover-thumbnail-1 figure{aspect-ratio:3/2;margin-bottom:14px}
.cover-thumbnail-1 .date{display:block;margin-top:9px}

/* 커버 2 — 가로 리스트 */
.cover-thumbnail-2 ul{display:flex;flex-direction:column;gap:12px}
.cover-thumbnail-2 li>a{
  display:grid;grid-template-columns:auto 1fr;align-items:start;
  background:var(--surface);border-radius:var(--radius);padding:22px 24px;
  transition:transform .18s,filter .18s;
}
.cover-thumbnail-2 li>a:hover{transform:translateY(-2px);filter:brightness(.985)}
.cover-thumbnail-2 figure{grid-column:1;grid-row:1 / span 3;width:104px;height:104px;margin-right:20px}
.cover-thumbnail-2 figure:empty{display:none}
.cover-thumbnail-2 .title{grid-column:2;font-size:18px}
.cover-thumbnail-2 .excerpt{grid-column:2}
.cover-thumbnail-2 .meta{grid-column:2}

/* 커버 3 — 작은 카드 */
.cover-thumbnail-3 ul{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 18px}
.cover-thumbnail-3 figure{aspect-ratio:3/4;margin-bottom:12px}
.cover-thumbnail-3 .title{font-size:15px}

/* 커버 4 — 요약 포함 그리드 */
.cover-thumbnail-4 ul{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 22px}
.cover-thumbnail-4 figure{aspect-ratio:16/10;margin-bottom:14px}

/* 커버 — 텍스트 리스트 */
.cover-list ul{display:flex;flex-direction:column;gap:6px}
.cover-list li>a{display:block;padding:20px 22px;border-radius:var(--radius);transition:background .15s}
.cover-list li>a:hover{background:var(--surface)}
.cover-list .title{font-size:18px}

/* 커버 — 이벤트 배너 */
.cover-event ul{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cover-event a{
  display:flex;align-items:flex-end;min-height:132px;padding:22px;
  border-radius:var(--radius);background-size:cover;background-position:center;
  background-color:var(--surface);
}
.cover-event .title{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.cover-event .more{margin:0 0 0 auto;padding:6px 12px;font-size:13px}

/* ── 목록 머리말 ────────────────────────────────────── */
/* 참고 사이트의 히어로 구조: 작은 회색 한 줄 → 큰 제목 */
.post-header{padding:clamp(48px,6vw,64px) 0 clamp(36px,5vw,52px);text-align:center}
.post-header h1 span{font-size:clamp(28px,4.2vw,40px);font-weight:500;letter-spacing:-.05em;line-height:1.24}
#content .post-header h1{display:flex;flex-direction:column-reverse;align-items:center;gap:14px}
#content .post-header h1 em{
  font-style:normal;margin:0;font-size:14px;font-weight:400;
  color:var(--muted);letter-spacing:-.01em;
}
#content .post-header h1 em::before{content:"글 "}
#content .post-header h1 em::after{content:"개"}

/* ── 글 목록 (post-item) ────────────────────────────── */
.post-item{margin:0 0 12px}
.post-item>a{
  display:grid;grid-template-columns:auto 1fr;align-items:start;
  background:var(--surface);border-radius:var(--radius);padding:26px 30px;
  transition:transform .18s,filter .18s;
}
.post-item>a:hover{transform:translateY(-2px);filter:brightness(.985)}
.post-item .thum{
  grid-column:1;grid-row:1 / span 3;margin-right:20px;
  width:116px;height:116px;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--bg);display:block;
}
.post-item .thum:empty{display:none}
.post-item .thum:not(:has(img)){display:none}   /* 대표이미지 없는 글은 썸네일 자리 자체를 없앰 */
.post-item .thum img{width:100%;height:100%;object-fit:cover;display:block}
.post-item .title{
  grid-column:2;display:block;font-size:19px;font-weight:500;letter-spacing:-.035em;
  line-height:1.4;color:var(--ink);
}
.post-item>a:hover .title{color:var(--primary)}
.post-item .excerpt{
  grid-column:2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--muted);letter-spacing:-.01em;
}
.post-item .meta{grid-column:2;display:block;margin-top:14px;font-size:13px;color:var(--muted)}
.post-item.protected .thum{background:var(--bg)}

/* 목록형(텍스트) 옵션일 때 */
body.list-type-text .post-item .thum{display:none}

/* ── 글 상세 ────────────────────────────────────────── */
.post-cover{
  padding:clamp(64px,10vw,120px) 0 0;background-size:cover;background-position:center;
}
.post-cover .inner{max-width:var(--content);margin:0 auto;text-align:center}
.post-cover .category{
  display:inline-block;font-size:14px;color:var(--primary);letter-spacing:-.015em;margin-bottom:16px;
}
.post-cover h1{
  font-size:clamp(26px,4.2vw,38px);font-weight:500;letter-spacing:-.05em;line-height:1.28;
}
.post-cover .meta{
  display:flex;justify-content:center;gap:14px;margin-top:20px;
  font-size:13.5px;color:var(--muted);flex-wrap:wrap;
}
/* 커버 이미지가 있을 때 글자가 묻히지 않게 */
.post-cover[style*="background-image"]{
  position:relative;border-radius:var(--radius);overflow:hidden;
  padding:96px 24px;margin-top:40px;
}
.post-cover[style*="background-image"]::before{
  content:"";position:absolute;inset:0;background:rgba(10,14,20,.55);
}
.post-cover[style*="background-image"] .inner{position:relative}
.post-cover[style*="background-image"] h1,
.post-cover[style*="background-image"] .category,
.post-cover[style*="background-image"] .meta{color:#fff}

/* ── 본문 ───────────────────────────────────────────── */
.entry-content{
  max-width:var(--content);margin:clamp(40px,6vw,64px) auto 0;
  font-size:16.5px;line-height:1.8;color:var(--ink);letter-spacing:-.015em;
}
.entry-content p{margin:1.3em 0}
.entry-content h2{margin:2.6em 0 .6em;font-size:21px;letter-spacing:-.04em}
.entry-content h3{margin:2em 0 .4em;font-size:17.5px;letter-spacing:-.03em}
.entry-content h4{margin:1.8em 0 .35em;font-size:16px;font-weight:600;letter-spacing:-.025em}
.entry-content ul{list-style:disc;padding-left:1.3em}
.entry-content ol{list-style:decimal;padding-left:1.3em}
.entry-content li{margin:.5em 0}
.entry-content strong,.entry-content b{font-weight:600}
#content .entry-content a{
  color:var(--primary);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.entry-content blockquote{
  margin:1.9em 0;padding:20px 24px;background:var(--primary-soft);
  border-radius:var(--radius);color:var(--ink2);
}
.entry-content blockquote p{margin:0}
.entry-content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.87em;
  background:var(--surface);border-radius:6px;padding:.14em .42em;
}
.entry-content pre{
  background:var(--surface);border-radius:var(--radius);padding:20px 22px;
  overflow-x:auto;font-size:14.5px;line-height:1.7;margin:1.8em 0;
}
.entry-content pre code{background:none;padding:0;font-size:inherit}
.entry-content hr{display:block;border:0;height:1px;background:var(--surface);margin:3.2em 0}
.entry-content img{border-radius:var(--radius-sm)}
.entry-content figure{margin:1.9em 0}
.entry-content figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);text-align:center}
.entry-content table{width:100%;border-collapse:collapse;font-size:14.5px;margin:1.8em 0;display:block;overflow-x:auto}
.entry-content th,.entry-content td{
  padding:.78em .85em;text-align:left;vertical-align:top;
  box-shadow:inset 0 -1px 0 var(--surface);
}
.entry-content thead th{font-size:13.5px;color:var(--muted);font-weight:500}

/* ── 태그 · 관련글 ──────────────────────────────────── */
#content>.inner .tags,.post-item+.tags{max-width:var(--content);margin:clamp(56px,7vw,72px) auto 0;text-align:center}
.tags h2{font-size:14px;color:var(--muted);font-weight:400;margin-bottom:14px}
.tags a{
  display:inline-block;margin:0 6px 6px 0;font-size:13.5px;color:var(--ink2);
  background:var(--surface);border-radius:999px;padding:6px 13px;letter-spacing:-.01em;
}
.tags a:hover{color:var(--primary)}

.related-articles{max-width:var(--content);margin:clamp(72px,9vw,104px) auto 0}
.related-articles h2{font-size:14px;color:var(--muted);font-weight:400;margin-bottom:20px;text-align:center}
.related-articles ul{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-articles figure{margin:0 0 12px;aspect-ratio:3/2;border-radius:var(--radius-sm);
  overflow:hidden;background:var(--surface)}
.related-articles figure img{width:100%;height:100%;object-fit:cover}
.related-articles .title{
  display:block;font-size:15px;font-weight:500;letter-spacing:-.03em;line-height:1.45;
}
.related-articles a:hover .title{color:var(--primary)}

/* ── 댓글 ───────────────────────────────────────────── */
.comments{max-width:var(--content);margin:clamp(72px,9vw,104px) auto 0}
.comments h2{font-size:14px;color:var(--muted);font-weight:400;text-align:center;margin-bottom:20px}
#content .comments h2 .count{color:var(--primary)}
.tt-comments-wrap{font-size:15px}

/* ── 페이징 ─────────────────────────────────────────── */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;
  flex-wrap:wrap;margin-top:52px}
.pagination a{
  min-width:40px;height:40px;padding:0 13px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14.5px;color:var(--ink2);background:var(--surface);transition:.15s;
}
.pagination a>span{display:block;line-height:1;color:inherit;background:none}
.pagination a:hover{color:var(--primary)}
/* 현재 페이지: 티스토리는 <a><span class="selected">2</span></a> 구조라
   span만 칠하면 숫자에 딱 붙은 작은 네모가 된다. 칩(=a) 전체를 칠한다. */
.pagination a:has(.selected),
.pagination a.selected{background:var(--primary);color:var(--on-primary)}
.pagination a:has(.selected):hover,
.pagination a.selected:hover{color:var(--on-primary)}
.pagination .selected{color:var(--on-primary)}
/* :has() 미지원 브라우저 폴백 — span 자체를 칩 크기로 키운다 */
@supports not selector(:has(*)){
  .pagination a>span.selected{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:40px;height:40px;margin:0 -13px;
    border-radius:var(--radius-sm);background:var(--primary);
  }
}
/* 생략 기호(···)는 href가 없다 — 버튼처럼 보이지 않게 */
.pagination a:not([href]){
  background:none;color:var(--muted);pointer-events:none;
  min-width:24px;padding:0 2px;
}
.pagination .no-more-prev,.pagination .no-more-next{display:none}

/* ── 검색 결과 없음 ─────────────────────────────────── */
.not-found{
  max-width:var(--content);margin:0 auto;background:var(--surface);
  border-radius:var(--radius);padding:32px 34px;color:var(--muted);font-size:15px;
}
.not-found li{margin:6px 0}

/* ── 보호글 ─────────────────────────────────────────── */
.protected_form{
  max-width:440px;margin:80px auto;background:var(--surface);
  border-radius:var(--radius);padding:34px;text-align:center;
}
.protected_form h2{font-size:19px;margin-bottom:8px}
.protected_form p{color:var(--muted);font-size:14.5px;margin-bottom:20px}
.protected_form input{
  width:100%;font-size:15px;padding:12px 15px;border:0;border-radius:var(--radius-sm);
  background:var(--bg);margin-bottom:12px;
}
.protected_form .btn{
  width:100%;font-size:15px;font-weight:500;padding:13px;border-radius:var(--radius-sm);
  background:var(--primary);color:var(--on-primary);
}

/* ── 사이드바 ───────────────────────────────────────── */
#aside h2{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:-.01em;margin-bottom:14px}
#aside>div>*+*{margin-top:34px}

#aside .category{text-align:center;font-size:0}      /* 칩 사이 공백문자 제거 */
#aside .category>ul{display:block}
#aside .category ul ul{display:inline}                /* 하위 목록도 같은 줄 흐름으로 */
#aside .category li{display:inline}
#aside .category li{margin:0}
#aside .category a{
  display:inline-block;margin:0 4px 7px;font-size:13.5px;color:var(--ink2);
  padding:7px 14px;border-radius:999px;background:var(--surface);
  letter-spacing:-.015em;line-height:1.35;vertical-align:middle;
}
#aside .category a:hover{color:var(--primary);background:var(--primary-soft)}
/* 하위 카테고리는 테두리만 — 계층이 보이되 밀도는 유지 */
#aside .category ul ul a{
  background:transparent;box-shadow:inset 0 0 0 1px var(--surface);
  color:var(--muted);font-size:13px;padding:6px 12px;
}
#aside .category ul ul a:hover{box-shadow:none;background:var(--primary-soft);color:var(--primary)}

#aside .notice li,#aside .recent-comment li{margin:0}
#aside .notice a,#aside .recent-comment a{
  display:block;padding:7px 0;font-size:14px;color:var(--ink2);line-height:1.5;
  letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#aside .notice a:hover,#aside .recent-comment a:hover{color:var(--primary)}

#aside .tab-ui .tab-list+.tab-list{margin-top:26px}
#aside .post-list li{margin:0}
#aside .post-list a{display:flex;gap:11px;align-items:flex-start;padding:8px 0}
#aside .post-list img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;
  background:var(--surface)}
#aside .post-list .title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:14px;line-height:1.45;color:var(--ink2);letter-spacing:-.015em;
}
#aside .post-list a:hover .title{color:var(--primary)}
#aside .post-list .date{display:block;margin-top:3px;font-size:12px;color:var(--muted)}

#aside .tags a{font-size:13px;padding:5px 11px;margin:0 5px 5px 0}

#aside .count{background:var(--surface);border-radius:var(--radius);padding:18px 20px}
#aside .count h2{margin-bottom:6px}
#aside .count .total{font-size:26px;font-weight:500;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1.3}
#aside .count p{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

#aside .social-channel ul{display:flex;gap:8px;flex-wrap:wrap}
#aside .social-channel a{
  display:inline-block;font-size:13px;color:var(--ink2);background:var(--surface);
  border-radius:999px;padding:7px 14px;
}
#aside .social-channel a:hover{color:var(--primary)}

/* ── 푸터 ───────────────────────────────────────────── */
#footer{background:transparent}
#footer .inner{
  max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,80px) var(--gutter) 56px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  font-size:13.5px;color:var(--muted);
}
#footer .order-menu{display:flex;gap:18px;flex-wrap:wrap}
#footer .order-menu a{color:var(--ink2)}
#footer .order-menu a:hover{color:var(--primary)}
#footer .page-top{
  margin-left:auto;font-size:13px;color:var(--ink2);
  background:var(--surface);border-radius:999px;padding:9px 18px;
}
#footer .page-top:hover{color:var(--primary)}
#footer .meta,#footer .copyright{flex-basis:100%;margin:0}

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width:1040px){
  .content-wrap{gap:36px}
  .cover-thumbnail-3 ul{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:880px){
  #aside .sidebar-2{columns:2;column-gap:32px}
  .cover-thumbnail-1 ul{grid-template-columns:repeat(2,1fr)}
  .cover-thumbnail-3 ul{grid-template-columns:repeat(3,1fr)}
  .cover-thumbnail-4 ul,.cover-event ul{grid-template-columns:1fr}
  .related-articles ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1100px){
  #gnb{order:3;flex-basis:100%;min-width:100%}
  #gnb ul{flex-wrap:wrap;gap:8px 18px}
  .util{order:2;margin-left:auto}
}
@media (max-width:720px){
  body{font-size:15.5px}
  :root{--gutter:18px}
  #header .inner{min-height:56px;flex-wrap:wrap;padding-block:10px}
  #gnb{padding-bottom:2px}
  #gnb ul{flex-wrap:nowrap;gap:16px}
  #gnb a{white-space:nowrap;font-size:14px}
  .util{margin-left:auto}
  .util .search input{width:132px}
  .util .search input:focus{width:160px}
  .util .menu{display:none}
  .post-item>a,.cover-thumbnail-2 li>a{grid-template-columns:1fr;padding:20px 22px}
  .post-item .thum,.cover-thumbnail-2 figure{grid-column:1;grid-row:auto;
    width:100%;height:180px;margin:0 0 16px}
  .post-item .title,.post-item .excerpt,.post-item .meta,
  .cover-thumbnail-2 .title,.cover-thumbnail-2 .excerpt,.cover-thumbnail-2 .meta{grid-column:1}
  .post-item .title{font-size:18px}
  .cover-thumbnail-3 ul{grid-template-columns:repeat(2,1fr)}
  .cover-thumbnail-1 ul{grid-template-columns:repeat(1,1fr)}
  .related-articles ul{grid-template-columns:1fr}
  #aside .sidebar-2{columns:1}
  .entry-content{font-size:16px}
  .post-cover[style*="background-image"]{padding:64px 20px}
  #footer .inner{padding-block:28px}
  #footer .page-top{margin-left:0}
}


/* ── 스크롤 등장 ────────────────────────────────────
   화면에 들어올 때 살짝 올라오며 나타납니다.
   지원하지 않는 브라우저에서는 처음부터 그냥 보입니다. */
@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .post-item,
    .post-header,
    [class^="cover-"]>h2,
    [class^="cover-"] li,
    .related-articles li{
      animation:rise both cubic-bezier(.22,.61,.36,1);
      animation-timeline:view();
      animation-range:entry 0% entry 35%;
    }
    .post-cover .inner,
    .entry-content>*:nth-child(-n+3){
      animation:rise .55s both cubic-bezier(.22,.61,.36,1);
    }
    .post-cover .inner{animation-delay:.02s}
  }
}
/* 링크·카드 호버는 조금 더 부드럽게 */
.post-item>a,.cover-thumbnail-2 li>a{transition:transform .22s cubic-bezier(.22,.61,.36,1),filter .22s}