@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

/* ============================================================
   OBSERVER VECTOR — Tistory Skin Stylesheet (Full Replace)
   obvector.tistory.com | Dark Theme
   ※ 스킨 HTML(Odyssey 계열)의 실제 클래스에 매핑됨
   구조: ① 변수/베이스 → ② 헤더 → ③ 리스트 카드 → ④ 본문(뷰)
        → ⑤ 사이드바 → ⑥ 푸터 → ⑦ 모바일
   ============================================================ */


/* ============================================================
   ① 변수 & 베이스
   ============================================================ */
:root {
  --bg-base:        #05080f;
  --bg-surface:     #0a0f1a;
  --bg-elevated:    #0e1524;
  --bg-code:        #0b1120;

  --border-subtle:  #141c2e;
  --border-default: #1c2740;
  --border-hover:   #2b3b5e;

  --accent:         #3b82f6;
  --accent-bright:  #5ea2ff;
  --accent-dim:     rgba(59, 130, 246, 0.12);
  --accent-glow:    rgba(59, 130, 246, 0.35);

  --text-primary:   #e9eef7;
  --text-secondary: #9aa6bb;
  --text-muted:     #5d6980;

  --font-sans: 'Pretendard Variable', Pretendard, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --content-width: 1180px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

a { color: var(--text-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-bright); }
img { max-width: 100%; vertical-align: top; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--accent-glow); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* 스킨 유틸 클래스 (필수) */
.display-none { display: none !important; }
.blind, .screen_out {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); border: 0;
}

#wrap { min-height: 100vh; display: flex; flex-direction: column; }
#container { flex: 1; }


/* ============================================================
   ② 헤더
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 8, 15, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.inner-header {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

/* 로고 */
.title-logo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.title-logo .link_logo { color: var(--text-primary); }
.title-logo .link_logo:hover { color: var(--accent-bright); }
.title-logo .img_logo { max-height: 40px; width: auto; }

/* 검색 (PC 상단) */
.util.use-top { flex: 0 1 260px; }
.util .search { position: relative; }
.util .searchInput {
  width: 100%;
  padding: 9px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.util .searchInput::placeholder { color: var(--text-muted); }
.util .searchInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* GNB (블로그 메뉴) */
.area-align { position: relative; }
.area-gnb nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 0 14px;
}
.area-gnb nav a {
  display: block;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.area-gnb nav a:hover {
  color: var(--accent-bright);
  background: var(--bg-elevated);
}

/* 슬로건 = 미니 히어로 */
.area-slogun {
  margin: 10px 0 18px;
  padding: 44px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(ellipse 60% 90% at 78% 30%, rgba(59,130,246,0.16), transparent 60%),
    radial-gradient(ellipse 35% 60% at 92% 75%, rgba(234,140,46,0.07), transparent 60%),
    linear-gradient(135deg, #070c16 0%, #0a1222 100%);
}
.area-slogun strong {
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.area-slogun p {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 헤더 배너 (설정 시) */
.site-banner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}
.area-promotion {
  margin: 16px 0 18px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.area-promotion.height400 { min-height: 300px; }
.inner-promotion { display: flex; align-items: center; min-height: inherit; padding: 40px; }
.box-promotion strong { display: block; font-size: 28px; font-weight: 700; margin-bottom: 14px; }
.link-promotion {
  display: inline-block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  border-radius: var(--radius-sm);
}

/* 햄버거 버튼 (모바일용) */
.button-menu {
  display: none;
  position: absolute;
  top: -54px;
  right: 0;
  padding: 10px;
  background: none;
  border: none;
}
.button-menu svg path { fill: var(--text-primary); }

.line-bottom { display: none; }


/* ============================================================
   ③ 메인 레이아웃 & 리스트 카드
   ============================================================ */
.main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}

/* 리스트 타이틀 ("전체 글 N" 등) */
.title-search {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 24px;
  padding-bottom: 14px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-default);
}
.title-search span {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-bright);
}

/* 카테고리 배너 */
.category-banner {
  margin-bottom: 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-surface);
}
.category-banner-inner { padding: 40px; background: rgba(5,8,15,0.55); }
.category-description { font-size: 18px; font-weight: 600; }

/* --- 글 목록 카드 --- */
.article-type-common {
  display: flex;
  gap: 22px;
  padding: 22px;
  margin-bottom: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.article-type-common:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px var(--accent-dim);
}

/* 썸네일 */
.article-type-common > .link-article { flex-shrink: 0; }
.article-type-common .thumbnail {
  width: 220px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--bg-elevated);
  background-size: cover;
  background-position: center;
}
.article-type-common .thumbnail:not([has-thumbnail]) { display: none; }
.article-type-common .img-thumbnail {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;             /* background-image로 표시, img는 폴백 */
}
.article-type-common .thumbnail[has-thumbnail] .img-thumbnail { opacity: 0; }

/* 텍스트 영역 */
.article-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.article-content .title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 8px;
  transition: color var(--transition);
}
.article-type-common:hover .article-content .title { color: var(--accent-bright); }
.article-content .summary {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 메타 (카테고리 배지 + 날짜) - 글 목록 카드 전용 */
.article-type-common .box-meta {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.article-type-common .box-meta .link-category {
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-bright);
  background: var(--accent-dim);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 999px;
}
.article-type-common .box-meta .link-category:hover { border-color: var(--accent); }
.article-type-common .box-meta .reply:not(:empty)::before { content: "💬 "; font-size: 11px; }

/* 검색 결과 없음 */
.box-no-search {
  padding: 40px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
}
.box-no-search span { display: block; font-size: 14px; color: var(--text-secondary); padding: 3px 0; }

/* --- 커버(대문) 리스트 --- */
.area-cover { margin-bottom: 44px; }
.box-cover-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.title-cover {
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.box-cover-title .link-title { font-size: 13px; color: var(--text-secondary); }

/* 커버 썸네일형: 그리드 */
.area-cover-thumbnail .box-article,
.box-cover-poster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.area-cover-thumbnail .article-type-common,
.article-type-poster {
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.area-cover-thumbnail .article-type-common .thumbnail,
.article-type-poster .thumbnail {
  width: 100%;
  border-radius: 0;
}
.area-cover-thumbnail .article-content,
.article-type-poster .article-content { padding: 16px 18px 18px; }

.button-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.button-more:hover { color: var(--accent-bright); border-color: var(--accent); }

/* --- 페이징 --- */
.area-paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 36px;
}
.paging_num { display: flex; gap: 6px; }
.area-paging .link_num,
.area-paging .link_page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  font-size: 14px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.area-paging .link_num:hover,
.area-paging .link_page:hover {
  color: var(--accent-bright);
  border-color: var(--accent);
}
.area-paging .link_num[href=""] ,
.area-paging .selected,
.area-paging .link_num:not([href]) {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.area-paging .no-more-prev,
.area-paging .no-more-next { opacity: 0.35; pointer-events: none; }
.area-paging-more { display: none; }


/* ============================================================
   ④ 본문 (뷰 페이지)
   ============================================================ */

/* 포스트 헤더 */
.article-header {
  position: relative;
  margin-bottom: 32px;
  padding: 44px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background-color: #070c16;   /* 대표이미지가 없는 글일 때 폴백 배경색 */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* 대표이미지 위에 어두운 그라디언트를 얹어서 글자가 항상 잘 읽히게 함 */
.article-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* 좌측 → 우측: 제목이 앉는 좌하단을 훨씬 어둡게, 우측 일부만 이미지가 살도록 */
    linear-gradient(115deg, rgba(5,8,15,0.99) 0%, rgba(5,8,15,0.92) 30%, rgba(5,8,15,0.55) 55%, rgba(5,8,15,0.18) 82%),
    /* 하단 → 상단: 제목/날짜가 바닥에 깔려도 대비가 확실히 유지되도록 */
    linear-gradient(to top, rgba(5,8,15,0.97) 0%, rgba(5,8,15,0.5) 38%, rgba(5,8,15,0.1) 65%, transparent 80%),
    /* 우상단 블루 글로우: 어둠 속에서도 브랜드 컬러가 은은하게 스며들도록 */
    radial-gradient(ellipse 60% 90% at 82% 18%, rgba(59,130,246,0.22), transparent 62%);
  z-index: 0;
}
.article-header .inner-header { position: relative; z-index: 1; max-width: none; padding: 0; }

/* 카테고리 + 제목 + 날짜를 세로로 쌓는 상세페이지 전용 레이아웃 */
.article-header .box-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.article-header .category {
  display: inline-block;
  order: -1;
  margin-bottom: 14px;
  padding: 4px 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-bright);
  background: var(--accent-dim);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 999px;
}
.title-article {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px;
}
.box-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.box-info .writer::after {
  content: "·";
  margin-left: 8px;
  color: var(--border-hover);
}

/* --- Table of Contents (본문 h2/h3 자동 스캔) --- */
.toc:empty { display: none; }   /* 소제목이 부족해 JS가 안 채우면 자체 숨김 */
.toc {
  margin-bottom: 32px;
  padding: 28px 32px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.toc__title {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.toc ol {
  margin: 0;
  padding-left: 22px;
  counter-reset: toc-counter;
}
.toc li {
  padding: 4px 0;
  font-size: 14px;
}
.toc li.toc-sub {
  list-style: none;
  margin-left: 18px;
  font-size: 13px;
}
.toc li.toc-sub::before { content: "– "; color: var(--text-muted); }
.toc a {
  color: var(--text-secondary);
  border-bottom: none;
}
.toc a:hover { color: var(--accent-bright); }

/* --- 본문 에디터 영역 --- */
.article-view {
  font-size: 16px;
  line-height: 1.85;
  color: #c7d0e0;
}
.article-view h2 {
  margin: 48px 0 16px;
  padding-bottom: 10px;
  font-size: 25px;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-default);
  scroll-margin-top: 130px;   /* ← TOC 클릭 시 sticky 헤더에 안 가려지게 하는 여유 공간 */
}
.article-view h3 {
  margin: 36px 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  scroll-margin-top: 130px;
}
.article-view h4 {
  margin: 28px 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-bright);
}
.article-view p { margin: 0 0 16px; }
.article-view strong, .article-view b { color: var(--text-primary); }
.article-view a {
  color: var(--accent-bright);
  border-bottom: 1px solid rgba(94,162,255,0.3);
}
.article-view a:hover { border-bottom-color: var(--accent-bright); }

.article-view img,
.article-view figure img {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.article-view figcaption {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
}

.article-view blockquote {
  margin: 24px 0;
  padding: 16px 22px;
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary);
}
.article-view blockquote p { margin: 0; }

.article-view hr {
  margin: 40px 0;
  border: none;
  border-top: 1px solid var(--border-default);
}

.article-view ul, .article-view ol { padding-left: 24px; margin: 0 0 16px; }
.article-view ul { list-style: disc; }
.article-view ol { list-style: decimal; }
.article-view li { margin: 6px 0; }

/* 표 */
.article-view table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  font-size: 14px;
}
.article-view th {
  padding: 10px 14px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  text-align: left;
}
.article-view td {
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

/* 코드 블록 */
.article-view pre {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--bg-code);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
}
.article-view pre code { background: none; border: none; padding: 0; color: inherit; }
.article-view code {
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--accent-bright);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
}

/* --- 포스트 푸터 --- */
.article-footer { margin-top: 48px; }
.title-footer {
  margin: 40px 0 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 태그 */
.article-tag .box-tag,
.area-tag .box-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.article-tag .box-tag a,
.area-tag .box-tag a {
  padding: 5px 13px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
}
.article-tag .box-tag a:hover,
.area-tag .box-tag a:hover {
  color: var(--accent-bright);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* 이전/현재/다음 글 */
.article-page ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-page li a,
.article-page li > span {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  font-size: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.article-page li a:hover { border-color: var(--border-hover); }
.article-page li a span,
.article-page li > span {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.article-page li strong {
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-page li a:hover strong { color: var(--accent-bright); }
.article-page li:nth-child(2) strong { color: var(--accent-bright); }
.article-page li:nth-child(2) {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  font-size: 12px; color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

/* 관련글 */
.list-related {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.link-related { display: block; }
.item-related .thumnail {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
  background-size: cover;
  background-position: center;
  margin-bottom: 10px;
  border: 1px solid var(--border-subtle);
}
.item-related strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.item-related:hover strong { color: var(--accent-bright); }
.item-related .date { display: block; margin-top: 5px; font-size: 11px; color: var(--text-muted); }

/* 댓글/방명록 영역 */
/* 댓글 입력창 */
.area-reply textarea,
.area-reply textarea:focus,
.area-reply textarea:active {
    color: #e9eef7 !important;
    background: #0e1524 !important;
    caret-color: #ffffff !important;
}

/* placeholder */
.area-reply textarea::placeholder{
    color:#9aa6bb !important;
}
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm);
}
.area-reply textarea::placeholder,
.area-reply input::placeholder {
  color: var(--text-muted) !important;
}
.area-reply a { color: var(--accent-bright); }

/* 보호글 */
.area-protected { padding: 48px 24px; text-align: center; }
.text-protected { margin-bottom: 20px; color: var(--text-secondary); }
.box-protected { display: flex; justify-content: center; gap: 8px; }
.box-protected input {
  padding: 10px 14px;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none;
}
.box-protected button {
  padding: 10px 20px;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
}


/* ============================================================
   ⑤ 사이드바
   ============================================================ */
.area-aside {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 공통 위젯 박스 */
.area-aside > s_sidebar,
.box-profile, .box-category, .area-aside .box-tag,
.area-aside .box-recent, .box-reply, .box-notice,
.box-plugins, .box-archive, .box-calendar, .box-visit,
.util.use-sidebar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px;
}

.title-sidebar {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 프로필 */
.box-profile { text-align: center; background-size: cover; background-position: center; }
.box-profile .img-profile {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-default);
  margin-bottom: 12px;
}
.box-profile .tit-g { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; }
.box-profile .text-profile { margin-top: 6px; font-size: 13px; color: var(--text-secondary); }
.box-profile .box-sns { display: flex; justify-content: center; gap: 14px; margin-top: 14px; }
.box-profile .link-sns svg path { fill: var(--text-muted); transition: fill var(--transition); }
.box-profile .link-sns:hover svg path { fill: var(--accent-bright); }
.profile-btn-group { display: none; }

/* 구독 버튼 */
.box-profile button, .box-profile .btn-g {
  margin-top: 12px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  transition: all var(--transition);
}
.box-profile button:hover { border-color: var(--accent); color: var(--accent-bright); }

/* 카테고리 트리 */
.box-category nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.box-category nav a:hover {
  color: var(--accent-bright);
  background: var(--bg-elevated);
}
.box-category .category_list { padding-left: 14px; }
.box-category .c_cnt { font-size: 11px; color: var(--text-muted); }
.box-category .link_tit { font-weight: 700; color: var(--text-primary); }

/* 사이드바 태그 */
.area-aside .box_tag { display: flex; flex-wrap: wrap; gap: 8px; }
.area-aside .box_tag a {
  padding: 4px 11px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
}
.area-aside .box_tag a:hover {
  color: var(--accent-bright);
  border-color: var(--accent);
}

/* 최근글/인기글 탭 */
.tab-recent, .tab-sns {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.tab-button > a.tab-button {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
.tab-button.on > a.tab-button {
  color: var(--accent-bright);
  border-bottom-color: var(--accent);
}

/* 최근글 리스트 */
.list-recent li { border-bottom: 1px solid var(--border-subtle); }
.list-recent li:last-child { border-bottom: none; }
.link-recent {
  display: flex;
  gap: 12px;
  padding: 11px 0;
}
.link-recent .thumbnail {
  flex-shrink: 0;
  width: 64px; height: 48px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
  background-size: cover;
  background-position: center;
}
.link-recent .box-recent {
  background: none; border: none; padding: 0; border-radius: 0;
  min-width: 0;
}
.link-recent strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.link-recent:hover strong { color: var(--accent-bright); }
.link-recent span { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); }

/* 최근댓글 / 공지 / 아카이브 */
.list-sidebar li { border-bottom: 1px solid var(--border-subtle); }
.list-sidebar li:last-child { border-bottom: none; }
.link-sidebar { display: block; padding: 10px 0; font-size: 13px; color: var(--text-secondary); }
.link-sidebar:hover { color: var(--accent-bright); }
.link-sidebar strong {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-sidebar p { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* 방문자수 */
.box-visit .text-total {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-bright);
  margin-bottom: 8px;
}
.box-visit .item-visit { font-size: 12px; color: var(--text-muted); padding: 2px 0; }

/* 달력 */
.box-calendar table { width: 100%; font-size: 12px; border-collapse: collapse; }
.box-calendar caption { font-size: 13px; font-weight: 700; padding-bottom: 10px; }
.box-calendar th, .box-calendar td { padding: 5px 0; text-align: center; color: var(--text-secondary); }
.box-calendar a { color: var(--accent-bright); font-weight: 700; }

/* 모바일 검색 */
.util.use-sidebar { display: none; }

/* SNS 플러그인 박스 — 다크와 안 어울려서 감춤 (원하면 지워) */
.box-plugins { display: none; }


/* ============================================================
   ⑥ 푸터
   ============================================================ */
#footer {
  margin-top: 40px;
  border-top: 1px solid var(--border-subtle);
  background: #04060c;
}
.inner-footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.box-policy { display: flex; gap: 18px; }
.link-footer {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.link-footer:hover { color: var(--accent-bright); }
.text-info, #footer address {
  font-size: 12px;
  font-style: normal;
  color: var(--text-muted);
}
.box-site { position: relative; }
.box-site button {
  padding: 7px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.box-site ul { display: none; margin-top: 8px; }
.box-site button[aria-expanded="true"] + ul,
.box-site.open ul { display: block; }
.box-site li a {
  display: block;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}


/* ============================================================
   ⑦ 모바일 & 반응형
   ============================================================ */
@media (max-width: 1024px) {
  .main {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .area-aside { position: static; }
  .list-related { grid-template-columns: repeat(2, 1fr); }
  .area-cover-thumbnail .box-article,
  .box-cover-poster { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .box-header { height: 60px; }
  .title-logo { font-size: 14px; letter-spacing: 0.12em; }
  .util.use-top { display: none; }
  .util.use-sidebar { display: block; }

  .area-gnb nav ul { gap: 0; padding: 2px 0 10px; }
  .area-gnb nav a { padding: 6px 10px; font-size: 12px; }

  .area-slogun { padding: 30px 22px; margin: 8px 0 14px; }
  .area-slogun strong { font-size: 21px; }

  .main { padding: 20px 16px 48px; }

  /* 리스트 카드: 세로 스택 */
  .article-type-common { flex-direction: column; gap: 14px; padding: 16px; }
  .article-type-common .thumbnail { width: 100%; }

  .article-header { padding: 28px 22px; }
  .title-article { font-size: 24px; }
  .article-view { font-size: 15px; }
  .article-view h2 { font-size: 21px; }
  .article-view h3 { font-size: 18px; }

  .list-related { grid-template-columns: 1fr; }
  .area-cover-thumbnail .box-article,
  .box-cover-poster { grid-template-columns: 1fr; }

  .inner-footer { padding: 28px 16px; }
}

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

/* ============================================================
   LATEST POSTS 섹션 (style.css 맨 아래에 추가)
   ============================================================ */

/* 기본은 숨김 → 홈(#tt-body-index)에서만 표시 */
.home-latest { display: none; }

#tt-body-index .home-latest {
  display: block;
  margin-bottom: 40px;
}

.home-latest__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.home-latest__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* 카드 그리드 */
.home-latest__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* 최근글 개수 설정과 무관하게 4개까지만 표시 */
.home-latest__grid .latest-card:nth-child(n+5) { display: none; }

.latest-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.latest-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px var(--accent-dim);
  color: inherit;
}

.latest-card__thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background-color: var(--bg-elevated);
  background-size: cover;
  background-position: center;
}
/* 썸네일 없는 글: 벡터 느낌의 그라디언트 폴백 */
.latest-card__thumb:not([style]) {
  background-image:
    radial-gradient(circle at 65% 35%, rgba(59,130,246,0.25), transparent 55%),
    linear-gradient(135deg, #0a1222, #070c16);
}

.latest-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 16px 17px;
  flex: 1;
}
.latest-card__title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition);
}
.latest-card:hover .latest-card__title { color: var(--accent-bright); }
.latest-card__date {
  margin-top: auto;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* 반응형 */
@media (max-width: 1024px) {
  .home-latest__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .home-latest__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .latest-card__title { font-size: 13px; }
  .latest-card__body { padding: 12px 13px 14px; }
}
}



.title-logo{
    margin:0;
}

.link_logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo-mark{
    width:260px;
    height:auto;
}

/* ============================================================
   HOME HERO + 카테고리 아이콘 바 (style.css 맨 아래에 추가)
   ============================================================ */

/* 헤더 안의 기본 슬로건은 숨김 (히어로에서 대신 표시) */
.area-slogun { display: none !important; }

/* 히어로 전체: 홈에서만 표시 */
.home-hero { display: none; }

#tt-body-index .home-hero {
  display: block;
  grid-column: 1 / -1;   /* ← .main 그리드 전체(콘텐츠+사이드바) 폭을 그대로 사용 - 폭 불일치 원천 차단 */
  margin: 0 0 32px;
}

/* --- 히어로 상단: 배경 이미지 + 슬로건 --- */
.home-hero__inner {
  position: relative;
  height: 420px;               /* ← 이 숫자만 바꾸면 박스 크기 조절, 이미지는 알아서 꽉 채워짐 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

/* 실제 <img> 태그: object-fit으로 항상 박스를 꽉 채움 (박스 높이 바뀌어도 자동 대응) */
.home-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 이미지 자체에 있는 상하 여백을 잘라내기 위한 확대 — 여백이 더/덜 보이면 1.15~1.4 사이로 조절 */
  transform: scale(1.25);
  transform-origin: center;
}

/* 이미지 안에 텍스트가 이미 박혀있으므로 중복 텍스트 숨김 */
.home-hero__text { display: none; }

.home-hero__title {
  display: block;
  margin: 0 0 12px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}
.home-hero__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* --- 카테고리 아이콘 바 --- */
.home-hero__cats {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 22px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.hero-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  text-align: center;
  border-radius: var(--radius-md);
  transition: background var(--transition), transform var(--transition);
}
.hero-cat:hover {
  background: var(--bg-elevated);
  transform: translateY(-3px);
}
.hero-cat i {
  font-size: 25px;
  color: var(--accent-bright);
}
.hero-cat strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-bright);
}
.hero-cat span {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* --- 반응형 --- */
@media (max-width: 1024px) {
  .home-hero__cats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .home-hero__inner { height: 300px; }
  .home-hero__title { font-size: 28px; letter-spacing: 0.04em; }
  .home-hero__cats { grid-template-columns: repeat(2, 1fr); padding: 16px 10px; }
  .hero-cat span { display: none; } /* 모바일에선 설명 문구 생략 */
}

.tt-box-textarea textarea{
    color:#e9eef7 !important;
}

.tt-box-textarea{
    background:#0e1524 !important;
}


/* 댓글 전체 */
.article-reply,
.article-reply *{
    color:#e8edf5 !important;
}

/* 댓글 입력창 */
.article-reply textarea{
    background:#111827 !important;
    color:#ffffff !important;
    border:1px solid #334155 !important;
    caret-color:#ffffff !important;
}

/* placeholder */
.article-reply textarea::placeholder{
    color:#94a3b8 !important;
}

/* 이름 입력 */
.article-reply input{
    color:#ffffff !important;
    background:#111827 !important;
}

/* 댓글 본문 */
.article-reply .comment-content,
.article-reply p{
    color:#e5e7eb !important;
}

/* 작성자 */
.article-reply .name,
.article-reply strong{
    color:#ffffff !important;
}

/* 날짜 */
.article-reply .date{
    color:#94a3b8 !important;
}