/* =====================================================================
   JINOISM — Terminal Ink   (concept: "Terminal Ink")
   고대비 모노 잉크(C) + 터미널 타이틀(A)
   본문: Pretendard / 라벨·메타·코드·워드마크: JetBrains Mono
   기획안 디자인을 티스토리 스킨(캥거루 치환자 뼈대)에 이식.
   ===================================================================== */

/* ── DESIGN TOKENS ─────────────────────────────────────────────────── */
:root{
  /* ink & paper — 흑백 */
  --ink:        #0b0b0c;   /* 본문/제목 */
  --ink-2:      #3f3f42;   /* 보조 텍스트 */
  --ink-3:      #8a8a88;   /* 캡션/메타 */
  --paper:      #ffffff;   /* 배경 */
  --paper-2:    #f6f6f3;   /* 옅은 면 */
  --line:       #e7e7e3;   /* 헤어라인 */
  --line-bold:  #0b0b0c;   /* 강한 룰 */

  /* accent — 포인트 1색 (deep blue). index.xml primaryColor(RGB)로 덮어쓰기 가능 */
  --accent:     rgb(var(--primary-rgb, 31 68 214));   /* ≈ oklch(.50 .20 262) */
  --accent-ink: #ffffff;
  --accent-10:  rgb(var(--primary-rgb, 31 68 214) / .09);
  --accent-20:  rgb(var(--primary-rgb, 31 68 214) / .18);

  /* 코드블록(다크) — 터미널 악센트 */
  --term-bg:    #0c0d11;
  --term-fg:    #e6e7ea;
  --term-mut:   #6b7079;
  --term-grn:   oklch(0.82 0.15 152);

  /* type */
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
         system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --t-wordmark: 1.125rem;
  --t-h1:       clamp(2rem, 1.2rem + 2.6vw, 2.9rem);
  --t-h2:       1.7rem;
  --t-h3:       1.3rem;
  --t-listttl:  1.45rem;
  --t-body:     1.0625rem;   /* 17px */
  --t-sm:       0.875rem;
  --t-meta:     0.78rem;

  --lh-tight:   1.18;
  --lh-body:    1.82;

  /* layout */
  --maxw:       1180px;
  --read:       720px;
  --gap:        56px;
  --radius:     6px;
}

/* ── RESET ─────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-body);
  color:var(--ink);background:var(--paper);letter-spacing:-0.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%;display:block}
::selection{background:var(--accent-20)}

/* 본문 진입 전 살짝 페이드 (캥거루 #content.show 훅) */
#content{opacity:0;transition:opacity .3s ease}
#content.show{opacity:1}

/* ── SCROLL PROGRESS BAR ───────────────────────────────────────────── */
.progress-bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);
  z-index:60;transition:width .1s linear}

/* ── HEADER (terminal wordmark) ────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#header_wrap{transition:box-shadow .2s}
#header_wrap.shrink{box-shadow:0 1px 0 var(--line)}
.site-header .bar{max-width:var(--maxw);margin:0 auto;height:68px;padding:0 28px;
  display:flex;align-items:center;gap:20px}
.wordmark{font-family:var(--mono);font-size:var(--t-wordmark);font-weight:700;
  letter-spacing:-0.01em;color:var(--ink);margin-right:auto;display:inline-flex;align-items:baseline}
.wordmark .caret{display:inline-block;width:0.58em;height:1.05em;margin-left:2px;
  background:var(--accent);transform:translateY(0.12em);animation:blink 1.15s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wordmark .caret{animation:none}}

/* search box (캥거루 #search-bar 토글 유지) */
.searchbox{display:flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:var(--radius);padding:6px 12px;color:var(--ink-3);background:var(--paper-2)}
.searchbox .search-icon{background:none;border:0;cursor:pointer;display:flex;align-items:center;
  color:var(--ink-3);font-family:var(--mono);padding:0}
.searchbox .search-icon .material-icon{font-size:18px}
.searchbox input{border:0;background:transparent;color:var(--ink);font:inherit;
  font-size:var(--t-sm);width:150px;outline:none}
.searchbox input::placeholder{color:var(--ink-3)}
.searchbox .search-close-icon{display:none;background:none;border:0;color:var(--ink-3);
  cursor:pointer;font-family:var(--mono);font-size:1rem;line-height:1;padding:0 2px}
.searchbox.active .search-close-icon{display:inline-flex}

/* hamburger (모바일 메뉴 열기) */
.menu-btn{display:flex;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:4px}
.menu-btn .menu-icon{width:20px;height:2px;background:var(--ink);display:block}
.menu-btn .menu-icon:nth-child(2){background:var(--accent);width:14px}

/* ── MOBILE DROPDOWN MENU (캥거루 .dropdown-content 유지) ───────────── */
.dimmed{position:fixed;inset:0;background:rgba(11,11,12,.45);z-index:70;opacity:0;
  visibility:hidden;transition:opacity .25s}
.dimmed.show{opacity:1;visibility:visible}
.dropdown-content{position:fixed;top:0;right:0;height:100%;width:min(320px,86vw);
  background:var(--paper);z-index:80;transform:translateX(100%);transition:transform .28s ease;
  border-left:1px solid var(--line);overflow-y:auto;padding:18px 20px}
.dropdown-content.dropdown-content-toggle{transform:translateX(0)}
.dropdown-content .lb-data{display:flex;justify-content:flex-end}
.dropdown-content .btn_close{cursor:pointer;color:var(--ink-2);display:flex}
.dropdown-content .close-icon{font-size:22px}
.dropdown-profile{margin:10px 0 20px;padding-bottom:18px;border-bottom:2px solid var(--line-bold)}
.dropdown-profile_info-inner{display:flex;align-items:center;gap:12px}
.dropdown-profile_info-inner img{width:48px;height:48px;border-radius:50%;border:1px solid var(--line)}
.dropdown-profile-title{font-weight:800;letter-spacing:-0.02em}
.github-link{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-3)}
#dropdown-menu a{display:block;font-size:var(--t-sm);color:var(--ink-2);padding:7px 0}
#dropdown-menu a:hover{color:var(--accent)}

/* ── SHELL / GNB ───────────────────────────────────────────────────── */
#wrap{min-height:60vh}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.gnb{margin:22px 0 30px}
.gnb .header-blog-menu>ul,.gnb ul{display:flex;gap:2px;border-bottom:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.gnb .header-blog-menu>ul::-webkit-scrollbar,.gnb ul::-webkit-scrollbar{display:none;height:0}
.gnb a{position:relative;display:block;padding:12px 16px;font-family:var(--mono);
  font-size:var(--t-sm);text-transform:uppercase;letter-spacing:0.04em;font-weight:500;color:var(--ink-2);white-space:nowrap}
.gnb a:hover{color:var(--ink)}
.gnb a::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transition:transform .22s}
.gnb a:hover::after,.gnb li.selected a::after{transform:scaleX(1)}

/* ads */
.ads-wrap{margin:8px 0 18px}

/* layout (캥거루 #container/#main/#sidebar 에 매핑) */
.layout{display:flex;gap:var(--gap);align-items:flex-start}
.col-main{flex:1 1 auto;min-width:0}
.col-side{flex:0 0 268px;border-left:1px solid var(--line);padding-left:28px;align-self:stretch}
.content-width.wide{max-width:none}
@media (max-width:920px){
  .layout{display:block}
  .col-side{display:none}
}

/* ── POST LIST (numbered) ──────────────────────────────────────────── */
/* 글 목록은 s_article_rep 반복으로 .h-entry 가 여러 개 생기므로,
   카운터 기준점은 비반복 조상인 #content 에 둔다. */
#content{counter-reset:post}
.post-item{counter-increment:post;position:relative;display:flex;gap:22px;
  padding:28px 0;border-top:1px solid var(--line)}
.h-entry:first-of-type .post-item{border-top:2px solid var(--line-bold)}
.post-item::before{content:counter(post,decimal-leading-zero);font-family:var(--mono);
  font-weight:700;font-size:1.05rem;color:var(--accent);letter-spacing:-0.02em;
  flex:0 0 auto;line-height:1.5;width:2.2em}
.post-item .body{min-width:0;flex:1 1 auto}
.post-item .ttl{font-size:var(--t-listttl);font-weight:800;letter-spacing:-0.035em;
  line-height:var(--lh-tight);margin-bottom:8px;transition:color .2s}
.post-item:hover .ttl{color:var(--accent)}
.post-item .excerpt{font-size:var(--t-sm);color:var(--ink-2);line-height:1.62;
  margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 목록 썸네일 숨김 (텍스트 리스트 방향) */
.post-item .thumnail{display:none}
.meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:var(--t-meta);letter-spacing:0.05em;color:var(--ink-3);white-space:nowrap}
.meta .cat{text-transform:uppercase;font-weight:700;color:var(--ink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px}
.meta .cat .material-icons-outlined{font-size:14px}
.meta .dot{color:var(--line)}

/* ── PAGINATION ────────────────────────────────────────────────────── */
.pager .pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin:40px 0;flex-wrap:wrap}
.pager a{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-2);
  min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius)}
.pager a:hover{color:var(--accent)}
.pager a.num .selected{color:inherit}
.pager a.num.current{background:var(--ink);color:var(--paper)}
.pager a.num.current .selected{color:var(--paper)}
.pager .page-icon{font-size:18px}
.pager .no-more-prev,.pager .no-more-next,.pager .no_more_prev,.pager .no_more_next{opacity:.3;pointer-events:none}

/* ── SIDEBAR ───────────────────────────────────────────────────────── */
.widget{margin-bottom:34px}
.widget .w-title{font-family:var(--mono);font-weight:800;font-size:var(--t-meta);
  text-transform:uppercase;letter-spacing:0.06em;color:var(--ink);
  border-bottom:2px solid var(--line-bold);padding-bottom:9px;margin-bottom:10px;display:block}
.widget a{display:block;font-size:var(--t-sm);color:var(--ink-2);padding:5px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.widget a:hover{color:var(--accent)}

/* 사이드바 카테고리 — 티스토리 [##_category_list_##] 네이티브 출력 매핑 */
.cat-tree .tt-cate>ul,.cat-tree ul{display:block}
.cat-tree li{margin:0}
.cat-tree li a{display:flex;justify-content:space-between;gap:8px}
.cat-tree ul ul{margin-left:6px;padding-left:14px;border-left:2px solid var(--line)}
.cat-tree .c_cnt,.cat-tree .cnt{font-family:var(--mono);font-size:var(--t-meta);
  color:var(--ink-3);margin-left:4px;flex:0 0 auto}

/* 인기글 / 공지 모듈 */
.popularPost-list a,.notice-list a{white-space:normal;display:block;padding:6px 0}
.popularPost-info .popular-right span{font-size:var(--t-sm);color:var(--ink-2)}

/* ── SECTION HEADERS (taglog / guestbook 공용) ─────────────────────── */
.hd{margin:8px 0 26px}
.hd .hd-heading{font-size:var(--t-h1);font-weight:800;letter-spacing:-0.04em;line-height:1.12}
.hd .sub-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);
  font-size:var(--t-meta);letter-spacing:0.05em;color:var(--ink-3);margin-bottom:14px}
.hd .sub-info .meta-cate{display:inline-flex;align-items:center;gap:8px}
.hd .sub-info .p-category{text-transform:uppercase;font-weight:700;color:var(--accent)}
/* 본문 메타(.a-meta)와 섹션 헤더(.hd) 공통 — 관리 메뉴 / 넓게보기 */
.hd .admin-menu a,.a-meta .admin-menu a{color:var(--ink-3)}
.hd .wide-button-wrap,.a-meta .wide-button-wrap{margin-left:auto;display:inline-flex;align-items:center;gap:14px}
.hd .widely-text,.a-meta .widely-text{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);
  font-family:var(--mono);font-size:var(--t-meta);line-height:1;white-space:nowrap}
.hd .wide-icon,.a-meta .wide-icon{font-size:16px;line-height:1;vertical-align:middle}
.a-meta .admin-menu{display:inline-flex;align-items:center}
@media (max-width:920px){.hd .wide-button-wrap,.a-meta .wide-button-wrap{display:none}}

/* ── ARTICLE (post page) ───────────────────────────────────────────── */
.article{max-width:var(--read);margin:0 auto;padding:8px 0 0}
.content-width.wide .article{max-width:none}
.article .a-meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:var(--t-meta);letter-spacing:0.05em;color:var(--ink-3);margin-bottom:14px;flex-wrap:wrap}
.article .a-meta .cat{text-transform:uppercase;font-weight:700;color:var(--accent)}
.article h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-0.04em;line-height:1.12}

/* TOC — 캥거루 enableAutoTOC 자동생성 마크업(.toc-wrap/.toc/.toc-item)에 매핑 */
.toc-space{margin:0}
.toc-wrap{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  margin:24px 0 36px;background:var(--paper-2)}
.toc-title{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--t-meta);
  text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-3);margin-bottom:10px}
.toc-title strong{font-weight:700}
.toc-title .toc-icon{width:9px;height:9px;background:var(--accent);border-radius:2px}
ul.toc{display:flex;flex-direction:column;gap:7px;padding-left:0!important;margin:0}
/* TOC 항목은 본문 글머리(–) 스타일에서 제외 — 중복 마커 방지 */
.e-content.post-content ul.toc li.toc-item{list-style:none!important;position:static;
  padding-left:0!important;margin:0!important}
.e-content.post-content ul.toc li.toc-item::before{content:none!important}
ul.toc .toc-item a{font-size:var(--t-sm);color:var(--ink-2);display:flex;gap:8px;align-items:baseline}
ul.toc .toc-item a:hover{color:var(--accent)}
ul.toc .toc-item.h2>a::before{content:"›";font-family:var(--mono);color:var(--accent)}
.e-content.post-content ul.toc li.toc-item.h3{padding-left:18px!important}
ul.toc .toc-item.h3>a::before{content:"–";font-family:var(--mono);color:var(--ink-3)}

/* body type (e-content == .prose) */
.prose,.e-content.post-content{font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink);
  letter-spacing:0}
.prose>*+*,.e-content.post-content>*+*{margin-top:1.15em}
/* 티스토리는 본문을 .contents_style 로 한 겹 더 감싸므로, 위 owl 규칙이 안쪽
   문단까지 닿지 않는다 → 문단(p) 간 여백을 직접 부여해 빽빽함 해소
   (헤딩·목록·인용은 각자 margin 이 있으므로 p 만 보정) */
.e-content.post-content .contents_style p{margin:1.05em 0}
.prose h2,.e-content.post-content h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-0.03em;
  line-height:1.2;margin:1.9em 0 .1em;padding-bottom:.32em;position:relative}
.prose h2::after,.e-content.post-content h2::after{content:"";position:absolute;left:0;bottom:0;
  width:34px;height:3px;background:var(--accent)}
.prose h3,.e-content.post-content h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-0.02em;margin:1.6em 0 .1em}
.prose p,.e-content.post-content p{text-wrap:pretty}
.prose a,.e-content.post-content a{color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong,.e-content.post-content strong{font-weight:700}
.prose ul,.prose ol,.e-content.post-content ul,.e-content.post-content ol{padding-left:1.3em}
/* 티스토리 에디터가 <ul style="list-style-type:disc"> 로 출력 + content.css 가세 →
   일반 list-style:none 으로는 기본 불릿(•)이 남아 우리 '–' 마커와 중복. !important 로 제압. */
.prose ul li,.e-content.post-content ul li{list-style:none !important;position:relative;padding-left:1.1em;margin:.5em 0}
.prose ul li::before,.e-content.post-content ul li::before{content:"–";position:absolute;left:0;
  color:var(--accent);font-family:var(--mono)}
.prose ol,.e-content.post-content ol{list-style:decimal;margin-left:.4em}
.prose ol li,.e-content.post-content ol li{margin:.5em 0}
.prose ol li::marker,.e-content.post-content ol li::marker{font-family:var(--mono);color:var(--ink-3);font-size:.85em}

/* blockquote — 캥거루(티스토리 에디터 data-ke-style) 방식
   style1/style2 = 좌측 룰 인용 / style3 = 옅은 면 박스 인용
   티스토리 content.css 와 충돌하므로 캥거루처럼 !important 로 제압 */
.prose blockquote,.e-content.post-content blockquote{display:block!important;margin:1.8em 0!important;
  border:0!important;border-left:3px solid var(--line-bold)!important;background:none!important;
  padding:2px 0 2px 16px!important;color:var(--ink-2)!important;font-size:1.05rem;
  text-align:left!important;line-height:var(--lh-body)}
.e-content.post-content blockquote[data-ke-style="style3"]{border:0!important;border-radius:var(--radius)!important;
  background:var(--accent-10)!important;padding:16px 18px!important;font-size:var(--t-sm);color:var(--ink)!important}
.e-content.post-content blockquote blockquote{margin:0!important}

/* hr — 캥거루식 깔끔한 헤어라인 */
.prose hr,.e-content.post-content hr{display:block!important;border:0!important;
  border-bottom:1px solid var(--line)!important;height:0!important;width:100%!important;
  margin:2.4em auto!important;background:none!important}

/* inline code */
.prose :not(pre)>code,.e-content.post-content :not(pre)>code{font-family:var(--mono);font-size:.86em;
  background:var(--accent-10);color:var(--ink);padding:.12em .4em;border-radius:4px}

/* code block — terminal dark (수동 마크업 .codeblock + 티스토리 pre/code 양쪽) */
.codeblock{background:var(--term-bg);border-radius:var(--radius);margin:1.6em 0;overflow:hidden}
.codeblock .cb-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #1d2027}
.codeblock .cb-bar .lang{font-family:var(--mono);font-size:var(--t-meta);color:var(--term-mut);
  text-transform:uppercase;letter-spacing:.08em;margin-left:auto}
.codeblock .cb-bar .dot{width:11px;height:11px;border-radius:50%;background:#ff5f56;
  box-shadow:18px 0 0 #febc2e,36px 0 0 #28c840;margin-right:30px}
.codeblock pre{margin:0;padding:16px 18px;overflow-x:auto}
.codeblock code{font-family:var(--mono);font-size:.85rem;line-height:1.7;color:var(--term-fg);white-space:pre}
.codeblock .c-key{color:var(--term-grn)}
.codeblock .c-str{color:#e2c08d}
.codeblock .c-com{color:var(--term-mut)}
/* 티스토리 에디터 코드블록(pre>code) — 맥 신호등 점(빨강·노랑·초록) + 터미널 면 */
.e-content.post-content pre{background:var(--term-bg);border-radius:var(--radius);margin:1.6em 0;
  padding:0;overflow:hidden;position:relative}
.e-content.post-content pre::before{content:"";position:absolute;top:14px;left:16px;width:11px;height:11px;
  border-radius:50%;background:#ff5f56;box-shadow:18px 0 0 #febc2e,36px 0 0 #28c840;z-index:2}
.e-content.post-content pre>code{display:block;font-family:var(--mono);font-size:.85rem;line-height:1.7;
  color:var(--term-fg);background:transparent;padding:38px 18px 18px;overflow-x:auto;white-space:pre}

/* table — 깔끔한 Markdown(GitHub) 스타일.
   티스토리 에디터는 table[data-ke-style] + content.css 로 회색헤더/장식을 입히므로 !important 로 제압.
   thead 없이 첫 행 td 가 헤더인 케이스(tr:first-child td)까지 커버. */
.prose table,
.e-content.post-content table,
.e-content.post-content table[data-ke-style]{width:100%!important;border-collapse:collapse!important;
  font-size:var(--t-sm);margin:1.6em 0!important;border:1px solid var(--line)!important;
  border-spacing:0!important;background:var(--paper)!important}
.prose th,.prose td,
.e-content.post-content table th,
.e-content.post-content table td{border:1px solid var(--line)!important;padding:9px 13px!important;
  text-align:left;color:var(--ink)!important;background:transparent!important;
  font-family:var(--sans)!important;font-weight:400!important;word-break:break-word}
/* 줄무늬(zebra) — 옅게 */
.e-content.post-content table tbody tr:nth-child(even) td{background:#fafaf8!important}
/* 헤더: <thead th> 또는 첫 행 td */
.prose thead th,
.e-content.post-content table thead th,
.e-content.post-content table tr:first-child th,
.e-content.post-content table[data-ke-style] tbody tr:first-child td,
.e-content.post-content table tbody tr:first-child td{background:var(--paper-2)!important;
  color:var(--ink)!important;font-weight:700!important;border-bottom:2px solid var(--line-bold)!important}
.e-content.post-content table thead th b,
.e-content.post-content table tbody tr:first-child td b{font-weight:700}

/* figure */
.prose figure,.e-content.post-content figure{margin:1.8em 0}
.prose figcaption,.e-content.post-content figcaption{font-family:var(--mono);font-size:var(--t-meta);
  color:var(--ink-3);margin-top:8px;text-align:center}
.prose figure .ph{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-3);letter-spacing:.06em;
  background-image:repeating-linear-gradient(45deg,#0000 0 8px,#00000006 8px 16px)}

/* tags (본문 하단 태그 == .tags / 캥거루 .entry-tag) */
.tags,.entry-tag{display:flex;flex-wrap:wrap;gap:8px;margin:40px 0 0}
.tags a,.entry-tag a{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:4px 12px;display:inline-block}
.tags a::before,.entry-tag a::before{content:"#";color:var(--accent)}
.tags a:hover,.entry-tag a:hover{border-color:var(--accent);color:var(--accent)}

/* related (캥거루 .area_related_wrap / .list_related) */
.area_related_wrap{margin:48px 0 0;border-top:2px solid var(--line-bold);padding-top:20px}
.related_header{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.tit_related{font-family:var(--mono);font-size:var(--t-meta);text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);font-weight:700}
.area_btn_more_wrap .link_more{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-3)}
.list_related .list_item a.area_info{display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.list_related .title span{font-weight:600}
.list_related .list_item a:hover .title span{color:var(--accent)}
.list_related .list_date span{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-3);flex:0 0 auto}

/* ── COMMENTS / GUESTBOOK (티스토리 네이티브 [##_comment_group_##]) ─── */
.post-reply{margin:48px 0 0}
.post-reply .comment_count,.post-reply .tit_cmt,.post-reply .area_comment_count{
  font-family:var(--mono);font-size:var(--t-meta);text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);margin-bottom:14px}
.post-reply textarea,.post-reply .tt_input_comment textarea{width:100%;border:1px solid var(--line);
  background:var(--paper-2);border-radius:var(--radius);font:inherit;font-size:var(--t-sm);
  color:var(--ink);resize:vertical;outline:none;min-height:64px;padding:12px 14px}
.post-reply button[type="submit"],.post-reply .btn_comment,.post-reply input[type="submit"]{
  font-family:var(--mono);font-size:var(--t-sm);background:var(--ink);color:var(--paper);
  border:0;border-radius:var(--radius);padding:7px 16px;cursor:pointer}
.post-reply button[type="submit"]:hover,.post-reply .btn_comment:hover{background:var(--accent)}
.post-reply .comment_author,.post-reply .name{font-weight:700}
.post-reply .comment_text,.post-reply .desc_comment{color:var(--ink-2)}

/* ── PROTECTED POST (암호 입력) ────────────────────────────────────── */
.protected .media-wrap{max-width:var(--read);margin:0 auto}
.media-heading{font-family:var(--mono);font-size:var(--t-meta);text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);margin-bottom:12px}
.textbox.focus-wrap{display:flex;gap:8px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-2);padding:8px 10px;max-width:420px}
.focus-wrap .focus-target{flex:1 1 auto;border:0;background:transparent;font:inherit;
  font-family:var(--mono);font-size:var(--t-sm);color:var(--ink);outline:none}
.focus-wrap .media_btn{font-family:var(--mono);font-size:var(--t-sm);background:var(--ink);
  color:var(--paper);border:0;border-radius:var(--radius);padding:6px 14px;cursor:pointer}
.focus-wrap .media_btn:hover{background:var(--accent)}

/* ── SEARCH NO RESULTS ─────────────────────────────────────────────── */
#no-search-results .not-found{max-width:var(--read);margin:30px auto;color:var(--ink-2);font-size:var(--t-sm)}
#no-search-results .not-found ul{border-top:1px solid var(--line);padding:16px 0;list-style:disc;margin-left:1.2em}
#no-search-results .not-found li{margin:.4em 0}

/* ── TAG CLOUD ─────────────────────────────────────────────────────── */
.module-tag .tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.module-tag .tag-list a{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 13px;display:inline-block}
.module-tag .tag-list a::before{content:"#";color:var(--accent)}
.module-tag .tag-list a:hover{border-color:var(--accent);color:var(--accent)}

/* ── FOOTER ────────────────────────────────────────────────────────── */
.footer-wrap{border-top:1px solid var(--line);background:var(--ink);color:#c9c9c6;
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.03em;margin-top:64px}
#footer,#ft-skin{max-width:var(--maxw);margin:0 auto;padding:0 28px}
#footer{padding-top:26px}
#ft-skin{padding-bottom:26px;color:#5a5a57;margin-top:8px}
.footer-wrap a{color:#fff}
#ft-skin a{color:#8a8a88}

/* ── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width:600px){
  .shell{padding:0 18px}
  .site-header .bar{padding:0 18px}
  .searchbox{display:none}
  #footer,#ft-skin{padding-left:18px;padding-right:18px}
  .article h1,.hd .hd-heading{letter-spacing:-0.03em}
}

/* 카테고리 New 뱃지 — 티스토리 기본 빨간 N(gif) 숨기고 포인트 컬러 미니 라벨로 교체 */
.tt_category img[alt="N"]{display:none}
.tt_category a:has(img[alt="N"])::after{content:"NEW";font-family:var(--mono);font-size:.6rem;
  font-weight:700;letter-spacing:.04em;color:var(--accent);border:1px solid var(--accent);
  border-radius:3px;padding:0 4px;margin-left:6px;line-height:1.5;vertical-align:middle}

.another_category {display: none;}