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

/* 스크롤바 유무와 무관하게 항상 같은 폭을 예약 -> 목록/글 페이지 간 중앙정렬 요소가 밀리지 않게 함 */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

/* ==================== 폰트 설정 (티스토리에 파일 업로드 필수) ==================== */
@font-face {
    font-family: 'DosGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSGothic.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* ==================== Body 및 기본 레이아웃 ==================== */
body {
    font-family: 'DosGothic', 'Courier New', monospace;
    background-color: #0d1672;
    color: #ffffff;
    line-height: 1.6;
    min-height: 100vh;
    /* 스티키 푸터: 콘텐츠가 짧아도 하단바를 화면 맨 아래에 고정 */
    display: flex;
    flex-direction: column;
    /* 고정된 하단바에 콘텐츠가 가려지지 않도록 여백 확보 */
    padding-bottom: 30px;
    /* CRT 인광(phosphor) 번짐 - 현재 비활성화. 재사용 시 아래 주석 해제
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.35);
    */
}
/* 콘텐츠 영역이 남는 공간을 채워 footer를 아래로 밀어냄 */
.terminal-main {
    flex: 1 0 auto;
    width: 100%;
}
a {
    text-decoration: none;
    color: inherit;
}

/* ==================== CRT 스캔라인 오버레이 (현재 비활성화) ====================
   재사용 시 아래 규칙 전체를 주석 해제
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.14) 0px,
        rgba(0, 0, 0, 0.14) 1px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0) 3px
    );
}
*/

/* ==================== 상단/하단 스테이터스 바 ==================== */
.status-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    background-color: #1aabaa;
    color: #000000;
    font-size: 13px;
    min-height: 22px;
    padding: 3px 12px;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
}
.status-bar .sb-left {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}
.status-bar .sb-right {
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}
.status-bar .sb-center {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}
/* 하단바를 화면(뷰포트) 맨 아래에 항상 고정 */
.status-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
}
.conn-dot {
    color: #00ff00;
    text-shadow: 0 0 3px #00ff00;
}
#sysclock {
    font-variant-numeric: tabular-nums;
}

/* ==================== ASCII 배너 ==================== */
.ascii-banner {
    color: #1aabaa;
    font-family: 'DosGothic', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.2;
    padding: 14px 20px 0;
    max-width: 900px;
    margin: 0 auto;
    overflow-x: auto;
    white-space: pre;
    text-align: center;
    text-shadow: 0 0 2px rgba(26, 171, 170, 0.6);
}
.banner-cursor {
    color: #ffffff;
    animation: blink 1s infinite;
}

/* ==================== 상단 네비게이션 ==================== */
.terminal-nav {
    background-color: #0d1672;
    border-bottom: 1px solid #1aabaa;
    padding: 8px 20px;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 15px;
}
.nav-category {
    color: #ffffff;
    padding: 2px 4px;
    transition: none;
    display: inline-block;
}
.nav-category b {
    color: #ffff00;
    font-weight: normal;
    margin-right: 2px;
}
.nav-category:hover {
    background-color: #ffffff;
    color: #0d1672;
    text-shadow: none;
}
.nav-category:hover b {
    color: #0d1672;
}

/* ==================== 메인 컨텐츠 및 중앙 정렬 ==================== */
.terminal-main {
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
}

/* ==================== 목록 헤더 (list-head) ==================== */
.list-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 14px;
}
.list-conform {
    font-weight: bold;
    letter-spacing: 1px;
}
.list-meta {
    color: #00ff00;
    font-size: 12px;
    text-shadow: 0 0 2px rgba(0, 255, 0, 0.5);
}
.empty {
    text-align: center;
    color: #aaaaaa;
    padding: 40px 0;
    font-size: 14px;
}

/* ==================== 글 제목 끝 깜빡이는 커서 ==================== */
.post-item a::after,
.entryProtected > a::after {
    content: '';
    display: inline-block;
    width: 0.5em;
    height: 1em;
    background-color: #ffffff;
    margin-left: 5px;
    animation: blink 1s infinite;
    vertical-align: -0.1em;
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ==================== 글 목록 (post-item) ==================== */
.post-item {
    margin-bottom: 3px;
}
.post-item a {
    transition: background-color 0.5s ease, color 0.5s ease;
    background-color: #0d1672;
    color: #ffffff;
}
.post-item a:hover {
    background-color: #ffffff !important;
    color: #0d1672 !important;
}
.post-item-cat {
    color: #1aabaa;
    font-size: 14px;
    margin-left: 5px;
}

/* ==================== 글 상세 페이지 (퍼머링크 / 고정 페이지) ==================== */
/* 본문 = 블루 배경 유지 + 소제목/인용/링크 터미널 강조 (B) */
.article-detail {
    border: 3px double #ffffff;
    background-color: #0d1672;
    margin-bottom: 20px;
    overflow: hidden;
}
/* 청록 타이틀바 (경로/파일명) */
.article-detail .article-breadcrumb {
    background-color: #1aabaa;
    color: #000000;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-weight: 700;
}
/* 본문 = 블루 콘솔 + 흰색 텍스트 (B) */
.article-content {
    background-color: #0d1672;
    color: #ffffff;
    padding: 16px;
    font-size: 16px;
    font-family: 'DosGothic', 'Courier New', monospace !important;
}
.article-content p,
.article-content span,
.article-content li {
    font-family: 'DosGothic', 'Courier New', monospace !important;
}
.article-content p {
    margin: 0 0 8px;
}
/* 소제목 = 청록 반전 + >> 프리픽스 (B) */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    display: inline-block;
    background-color: #1aabaa;
    color: #000000;
    padding: 2px 8px;
    margin: 14px 0 8px;
    font-weight: 700;
    font-family: 'DosGothic', 'Courier New', monospace !important;
}
.article-content h1 { font-size: 18px; }
.article-content h2 { font-size: 16px; }
.article-content h3 { font-size: 15px; }
.article-content h4,
.article-content h5,
.article-content h6 { font-size: 14px; }
.article-content h1::before,
.article-content h2::before,
.article-content h3::before,
.article-content h4::before,
.article-content h5::before,
.article-content h6::before {
    content: '>> ';
}
/* 인용문 = 왼쪽 청록 바 (B) */
.article-content blockquote {
    border-left: 3px solid #1aabaa;
    padding-left: 12px;
    margin: 12px 0;
    color: #cfe8e7;
}
/* 링크 = [텍스트] 초록 밑줄 (B) */
.article-content a {
    color: #00ff00;
    text-decoration: underline;
}
/* 순수 텍스트 링크만 [텍스트] + 초록 반전 (내부에 요소가 없는 링크) */
.article-content a:not(:has(*))::before { content: '['; }
.article-content a:not(:has(*))::after { content: ']'; }
.article-content a:not(:has(*)):hover {
    background-color: #00ff00;
    color: #000000;
    text-decoration: none;
}
/* 요소(이미지/카드 등)를 감싼 링크 = 임베드: 대괄호·반전 없이 청록 테두리만
   (:has 미지원 구형 브라우저는 초록 밑줄만 표시되는 안전한 폴백) */
.article-content a:has(*) {
    display: inline-block;
    text-decoration: none;
}
.article-content a:has(*):hover {
    outline: 2px solid #1aabaa;
    outline-offset: 2px;
}
.article-content a:has(*):hover,
.article-content a:has(*):hover * {
    color: #ffffff !important;
}
/* 목록 = 청록 '■' 마커 (B)
   text-indent 트릭 대신 flex로 마커를 별도 박스로 분리 -> 붙여넣은 글(볼드 등 인라인 태그 포함)에서도
   마커가 텍스트 위에 겹치는 문제가 구조적으로 발생하지 않음 */
.article-content ul {
    list-style: none;
    padding-left: 0;
    margin: 8px 0;
}
.article-content ul li {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    margin: 2px 0;
}
.article-content ul li::before {
    content: '■';
    color: #1aabaa;
    flex-shrink: 0;
}
.article-content ol {
    padding-left: 1.4em;
    margin: 8px 0;
}
/* 구분선 = 청록 이중선 (B) */
.article-content hr {
    border: none;
    border-top: 3px double #1aabaa;
    margin: 14px 0;
}
.article-content img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ffffff;
    margin: 10px 0;
}
.article-content pre {
    background-color: #000000;
    border: 1px solid #1aabaa;
    padding: 15px;
    margin: 15px 0;
    overflow-x: auto;
}
.article-content code {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    color: #00ff00;
}

/* ==================== 이전글 / 다음글 ==================== */
.pager {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}
.pager:empty {
    display: none;
}
.pg {
    color: #aaaaaa;
    max-width: 48%;
}
.pg.next {
    margin-left: auto;
    text-align: right;
}
.pg:hover {
    color: #ffffff;
}

/* ==================== 페이징 (페이지 번호) ==================== */
#tt-body-index .pagination {
    display: none !important;
}
.pagination {
    text-align: center;
    margin-top: 30px;
    color: #ffffff;
    padding-bottom: 20px;
}
.pagination a {
    color: #ffffff;
    margin: 0 5px;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    padding: 5px 8px;
    transition: background-color 0.2s;
}
.pagination a:hover {
    background-color: rgba(255, 255, 255, 0.0);
    text-decoration: none;
    color: #0d1672;
}

/* ==================== 보호글 ==================== */
.entryProtected {
    font-family: 'DosGothic', 'Courier New', monospace;
    color: #ffffff;
    margin-bottom: 3px;
}
.entryProtected .lock-icon {
    margin-left: 5px;
}
/* 목록 페이지(홈/카테고리/보관함/태그/검색)에서는 비밀번호 입력폼을 숨기고
   제목+자물쇠만 노출한다. 퍼머링크 단독 페이지(tt-body-page)에서만 입력폼 표시 */
.protected-form {
    display: none;
}
#tt-body-page .protected-form {
    display: block;
}
.entryProtected input {
    font-family: 'DosGothic', 'Courier New', monospace;
    font-size: 16px;
    color: #ffffff;
    background-color: #0d1672;
    border: 1px solid #ffffff;
}
.entryProtected a {
    transition: background-color 0.5s ease, color 0.5s ease;
    background-color: #0d1672;
    color: #ffffff;
}
.entryProtected a:hover {
    background-color: #ffffff;
    color: #0d1672;
}
input[type="button"].submit {
    background-color: #0d1672;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 5px 10px;
    cursor: pointer;
}
input[type="button"].submit:hover {
    background-color: #ffffff;
    color: #0d1672;
}

/* ==================== 공감버튼 숨김 ==================== */
.container_postbtn {
    display: none !important;
}

/* ==================== 갤러리형 (홈 / DESIGN·PROMPT 카테고리) ====================
   목록형이 기본. 홈(#tt-body-index)과 DESIGN·PROMPT 카테고리(html.cat-gallery)에서만
   갤러리형으로 전환한다. ARCHIVE/PROCESS 등 나머지 카테고리는 목록형 유지. */

/* 기본 상태: 갤러리 카드 숨김, 목록(post-item) 노출 */
.gallery-card {
    display: none;
}

/* 갤러리형 활성화: 목록 숨기고 카드 노출 */
#tt-body-index .post-item,
.cat-gallery .post-item {
  display: none;
}
#tt-body-index .gallery-card,
.cat-gallery .gallery-card {
  display: flex;
}

/* 갤러리 그리드 컨테이너 */
#tt-body-index .entry-wrap,
.cat-gallery .entry-wrap {
  display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 5px;
}

/* 갤러리 카드 */
.gallery-card {
    flex-direction: column;
    border: 3px double #ffffff;
    background-color: #0d1672;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow: hidden;
}
.gallery-card:hover {
    background-color: #1aabaa;
    color: #000000;
}
.gallery-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #05093d;
    border-bottom: 2px solid #ffffff;
    overflow: hidden;
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-title {
    display: block;
    padding: 10px 10px 4px;
    font-size: 14px;
    word-break: break-all;
}
.gallery-cat {
    display: block;
    padding: 0 10px 10px;
    color: #1aabaa;
    font-size: 12px;
}
.gallery-card:hover .gallery-cat {
    color: #000000;
}

/* ==================== 반응형 (모바일 최적화) ==================== */
@media (max-width: 768px) {
    .terminal-nav {
        gap: 12px;
    }
    .terminal-main {
        padding: 12px;
    }
    #tt-body-index .entry-wrap,
    .cat-gallery .entry-wrap {
      grid-template-columns: repeat(2, 1fr);
    }
}