body {
    font-family: Arial, sans-serif;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 7%;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    text-align: left;
    padding: 1em 1em 0em 0.9em;
    /* top - right - bottom - left */
}

nav {
    position: sticky;
    top: -1px;
    /*알 수 없는 이유로 0으로 설정시 얇은 틈이 존재한다.*/
    
    z-index: 9;  /* .colorscripter-code 클래스가 nav보다 위에 뜨는 것을 막기 위함.*/

    background-color: #f4f4f4;

    color: 	#AFAFAF;
    padding-bottom: 1em;
    padding: 1em;
    /* top - right - bottom - left */
    text-align: left;
    word-wrap: break-word;  /*자동줄바꿈*/
}

#nav-tracker{
    padding-bottom: 0.3em;
}
#nav-tracker a{
    text-decoration: none;
    color: black;
    font-size: 0.9em;
}
nav>a {
    /*id : nav-tracker인 div태그 안의 a태그에 영향 끼치면 안됨.*/
    font-size: 0.9em;
    color: #0172d5;
    text-decoration: none;
}
nav>span{
    margin: 0.6em;
}

#TITLE {
    text-decoration: none;
    color: black;
    margin-bottom: 0;
    font-size: 1.5em;
}

/* div로 img를 감쌀 때 사용.*/
.imgBox{
    border: solid black 1px;
    margin-bottom: 10px;
}
.imgBox img{
    width: 100%;
}

.gap{
  padding: 0.3em 1em 0em 1em;
  /* top - right - bottom - left */
}
.gap *{
  margin-bottom: 0;
}
section {
    padding: 0.75em 1.2em 0.8em 1.2em;
    /* top - right - bottom - left */
    /*이상하게 상단 여백이 약간 커 보인다. 그래서 0.05만큼 뺐다.*/
    margin: 10px;
    background-color: #fff;
    border-radius: 5px;
}
section>h3:nth-child(1){
    margin-top: 0.3em;
    margin-bottom: 0.4em;
}
section>h4:nth-child(1){
    margin-top: 0.2em;
    margin-bottom: 0.5em;
}
section>h5:nth-child(1){
    font-size: 0.9em;
    margin-top: 0.2em;
    margin-bottom: 0.5em;
}
section>h3:nth-child(n+2){
    margin-top: 3em;    /*큰 범주이므로, 상단 넓은 간격 부여. (1. 대분류)*/
    margin-bottom: 0.4em;
}
section>h4:nth-child(n+2){
    margin-top: 1.6em;    /*큰 범주이므로, 상단 넓은 간격 부여. (1.1. 중분류)*/
    margin-bottom: 0.5em;
}
section>h5:nth-child(n+2){
    font-size: 0.9em;
    margin-top: 0.5em;  /*소 범주, 상단 간격 축소. (1.1.1. 소제목)*/
    margin-bottom: 0.25em;
}
section p{
    font-size: 0.9em;
    line-height: 1.9em;
    text-indent: 1.5em;
    margin-bottom: 0.2em;
    margin-top: 0.2em;
}
section small{
    font-size: 0.75em;
}

section>ul{
    margin-top: 0.2em;
}
section>ul>li:nth-child(1){
    margin-top: 0.2em;
}

section li{
    font-size: 0.9em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    line-height: 1.5em;
}
.Qlist li::marker {
    /* for ol tag, marker of li tag change to Qn mark. */
    content: "Q" counter(list-item) ". ";
    font-weight: bold;
    margin-right: 0.8em;
}
section ol{
    padding-left: 1.7em;
}
section blockquote{
    border-left: 4px solid #ccc;
    padding-left: 1em;
    margin-left: 1.5em;
    margin-right: 0;
    font-size: 0.8em;
}
section table{
    border: none;
    border-collapse: collapse;
    font-size: 0.8em;
    text-align: left;

    display: block;
    width: 100%;
    overflow-x: auto;
}
section th, td{
    border: 1px solid black;
    padding: 0.2em 0.5em;
}
section a{
    text-decoration: none;
}

section pre{
    max-width: 100%;
    overflow-x: auto;
    background-color: #afafaf41;
    border: 1em;
}

section code{
    background-color: #afafaf41;
    padding: 0.2em;
}
section pre>code{
    /*section code 때문에 pre>code 내부의 모든 행에 진하게 색상이 겹친다. 해당 문제 해결을 위해, section code 아래에 현재 CSS를 추가하여 우선 적용. (CSS는 아래 것이 우선 적용됨.)*/
    background-color: transparent;
    padding: inherit;
}


/*
적절한 다른 수단이 필요하다...
스크롤이 안예뻐...
.mainPage_section{
    height: 6em;
    overflow-y: scroll;
    scrollbar-width: thin;
}
*/
.listup_module_div{
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}
.listup_module_title>a{
    font-style: italic;
    font-size: 0.9em;
    text-decoration: none;
}
* a:link{
    color: #0172d5;
}
.listup_module_date{
    width: 100%;
    font-size: 0.7em;
}

footer {
    font-size: 0.8em;
    color: black;
    text-align: left;
    padding: 1em;
    /*position: fixed;
    bottom: 0;
    width: 60%;*/
    background-color: #f4f4f4;
}

.colorscripter-code div{
    z-index: 1;  /* nav 영역보다 더 위에 뜨는 것을 막기 위함.*/
}

.imgBox{  /* section 내부의 이미지와, 이미지 설명을 묶는 div 박스에 지정할 클래스.*/
    width: 65%;
}
.imgBox small{
    margin-left: 0.4em;
}

@media (min-width: 993px) and (max-width: 1430px) {
    body {
        font-family: Arial, sans-serif;
        margin-left: 20%;
        margin-right: 20%;
        margin-top: 7%;
        padding: 0;
        background-color: #f4f4f4;
    }

    .colorscripter-code div{
        z-index: 1;  /* nav 영역보다 더 위에 뜨는 것을 막기 위함.*/
        font-size: 0.8em;
    }
    .colorscripter-code td{
        font-size: 0.8em;
    }

    .imgBox{  /* section 내부의 이미지와, 이미지 설명을 묶는 div 박스에 지정할 클래스.*/
        width: 80%;
    }
}

@media (min-width: 601px) and (max-width: 992px) {
    body {
        font-family: Arial, sans-serif;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 7%;
        padding: 0;
        background-color: #f4f4f4;
    }

    .colorscripter-code div{
        z-index: 1;  /* nav 영역보다 더 위에 뜨는 것을 막기 위함.*/
        font-size: 0.8em;
    }
    .colorscripter-code td{
        font-size: 0.8em;
    }

    .imgBox{  /* section 내부의 이미지와, 이미지 설명을 묶는 div 박스에 지정할 클래스.*/
        width: 80%;
    }
}
@media screen and (max-width: 600px) {
    body {
        font-family: Arial, sans-serif;
        margin-left: 3%;
        margin-right: 3%;
        margin-top: 7%;
        padding: 0;
        background-color: #f4f4f4;
    }
    .gap{
        padding: 0.1em 1em 0em 1em;
        /* top - right - bottom - left */
    }

    .colorscripter-code div{
        z-index: 1;  /* nav 영역보다 더 위에 뜨는 것을 막기 위함.*/
        font-size: 0.7em;
    }
    .colorscripter-code td{
        font-size: 0.7em;
    }

    .imgBox{  /* section 내부의 이미지와, 이미지 설명을 묶는 div 박스에 지정할 클래스.*/
        width: 100%;
    }
}


/* ════════════════════════════════════════════════════════════════
   Search UI  (v0.4.0)
   - .nav-search  : 홈/카테고리 인덱스 nav 우측 상단의 미세한 검색 입력
                   배경/테두리 없음, focus 시 가로 확장
                   모든 뷰포트 폭에서 노출 (모바일 포함)
   - .search-scope : 결과 페이지 헤더의 스코프 안내 영역
   - .search-result, .search-snippet, .search-hint : 결과 페이지 표시
   - mark          : 본문/제목 매치 강조
   ════════════════════════════════════════════════════════════════ */

/* nav 우측의 검색 입력. nav 가 sticky 라 absolute 가 nav 기준으로 안착.
   배경/테두리 없음 — nav 톤에 자연스럽게 녹아드는 placeholder 만 보임. */
.nav-search {
    position: absolute;
    top: 1em;
    right: 1em;
    margin: 0;
    z-index: 10;
    line-height: 1;
}
.nav-search input[type='search'] {
    width: 4.5em;
    padding: 0.1em 0.3em;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background-color: transparent;
    font-family: Arial, sans-serif;
    font-size: 0.85em;
    color: #AFAFAF;  /* nav 글자 색과 동일 */
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: width 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nav-search input[type='search']::placeholder {
    color: #AFAFAF;
    opacity: 1;  /* Firefox 의 기본 0.54 무력화 */
}
/* WebKit/Chromium 의 검색 의사요소 — appearance:none 만으로 일부 빌드에서
   완전히 사라지지 않을 수 있어 명시적으로 제거. */
.nav-search input[type='search']::-webkit-search-decoration,
.nav-search input[type='search']::-webkit-search-cancel-button,
.nav-search input[type='search']::-webkit-search-results-button,
.nav-search input[type='search']::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.nav-search input[type='search']:focus {
    outline: none;
    width: 12em;
    color: #333;
    border-bottom-color: #c0c0c0;
}

/* 결과 페이지 — 스코프 안내 (예: "Blog 카테고리에서 검색") */
.search-scope {
    font-size: 0.85em;
    color: #888;
    margin-left: 0.4em;
}
.search-scope a {
    color: #0172d5;
    text-decoration: none;
}

/* 결과 페이지 — 한 글의 카드 */
.search-result {
    margin-bottom: 0.8em;
}
.search-snippet {
    font-size: 0.8em;
    color: #555;
    line-height: 1.5em;
    margin: 0.15em 0 0.3em 0.4em;
    text-indent: 0;
    /* section p 의 글로벌 스타일을 덮기 위함 */
}

/* 결과 없음 / 입력 안내 — section p 의 들여쓰기/큰 line-height 를 무력화 */
.search-hint {
    font-size: 0.9em !important;
    color: #666;
    line-height: 1.5em !important;
    text-indent: 0 !important;
    margin: 0.4em 0 0.2em 0 !important;
}

/* 매치 강조. */
mark {
    background-color: #fff3cd;
    color: inherit;
    padding: 0 0.1em;
}

/* ════════════════════════════════════════════════════════════════
   Pagination  (v0.4.5)
   - 미니멀, 모던. nav-search 입력과 톤을 맞춤 (border 없음, 회색 텍스트,
     hover 시 색만 진해짐). 페이지 컨트롤이 콘텐츠를 시각적으로 압도하지
     않도록 의도.
   ════════════════════════════════════════════════════════════════ */

.pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8em;
    /* v0.4.6: 상단 padding 제거 + 음수 margin-top 으로 위 section 과 더 가깝게.
       하단 padding 도 약간 축소. */
    padding: 0 1em 0.3em;
    margin: -0.45em 0 0 0;
    font-family: Arial, sans-serif;
    font-size: 0.85em;
    user-select: none;
}
.pagination-nav .pagi-btn {
    background: none;
    border: none;
    color: #AFAFAF;
    cursor: pointer;
    padding: 0.1em 0.4em;
    font-family: inherit;
    font-size: 1.1em;
    line-height: 1;
    transition: color 0.2s ease;
}
.pagination-nav .pagi-btn:hover:not(:disabled) {
    color: #333;
}
.pagination-nav .pagi-btn:focus {
    outline: none;
    color: #333;
}
.pagination-nav .pagi-btn:disabled {
    color: #dadada;
    cursor: default;
}
.pagination-nav .pagi-info {
    color: #AFAFAF;
    min-width: 2.2em;
    text-align: center;
}

/* v1.0.1: 소분류명 링크 — 소분류 section 헤더의 분류명 글씨 자체가 그
   소분류 페이지로 가는 a 태그다 (이전의 우측 → 화살표 폐지). 본문 글씨와
   동일하게 보이도록 스타일을 비운다: 색은 주변 글씨 그대로(inherit — 전역
   `* a:link` 의 링크색·방문색을 덮음), 밑줄 없음, 호버 효과 없음. 클릭
   가능 암시는 브라우저 기본 포인터 커서뿐. */
.gap .subcat-link {
    color: inherit;
    text-decoration: none;
}

/* nav-search 반응형 — 모든 폭에서 노출.
   좁은 화면에서는 시작 폭/확장 폭만 줄여 nav 다른 요소를 덮지 않게 한다. */
@media (min-width: 993px) and (max-width: 1430px) {
    .nav-search input[type='search'] { width: 4.5em; }
    .nav-search input[type='search']:focus { width: 11em; }
}
@media (min-width: 601px) and (max-width: 992px) {
    .nav-search input[type='search'] { width: 4em; }
    .nav-search input[type='search']:focus { width: 10em; }
}
@media screen and (max-width: 600px) {
    .nav-search { top: 1.05em; right: 0.7em; }
    .nav-search input[type='search'] { width: 3.7em; font-size: 0.8em; }
    .nav-search input[type='search']:focus { width: 8em; }
}


/* ════════════════════════════════════════════════════════════════
   Gallery layout  (v0.5.3)
   카테고리/홈 meta.yaml 의 `layout: gallery` 일 때.
   modern minimal — 콘텐츠를 압도하지 않으면서 글마다 미리보기 이미지를
   타일로 보여준다. 톤은 nav-search / pagination 과 동일 (회색 액센트,
   subtle hover, 절제된 그림자).
   ════════════════════════════════════════════════════════════════ */

section.listup-gallery {
    /* 기본 section 의 흰 배경/넉넉한 padding 을 해제. 각 타일이 흰 카드라
       이중 배경이 되지 않도록. */
    background-color: transparent;
    border-radius: 0;
    padding: 0.2em 0.4em 0.4em 0.4em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
section.listup-gallery > p {
    /* 빈 갤러리의 "No articles found" 메시지 — grid 한 칸 차지. */
    grid-column: 1 / -1;
}

.gallery-tile {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery-tile:hover,
.gallery-tile:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    outline: none;
}

.gallery-tile-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #f7f7f7 0%, #ececec 100%);
    position: relative;
}
.gallery-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.gallery-tile:hover .gallery-tile-thumb img {
    transform: scale(1.04);
}
.gallery-tile-thumb-empty::after {
    /* 옅은 모노그램 — 시각적 placeholder. 콘텐츠 자체에는 영향 없음. */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28%;
    height: 28%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,0.6), transparent 60%),
        linear-gradient(135deg, #e7e7e7 0%, #d4d4d4 100%);
    border-radius: 50%;
    opacity: 0.7;
}

.gallery-tile-meta {
    padding: 0.7em 0.95em 0.85em 0.95em;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    flex: 1;
}
.gallery-tile-title {
    font-style: italic;
    font-size: 0.92em;
    line-height: 1.4em;
    color: #0172d5;
    /* 두 줄까지만 — 그 이상은 ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.gallery-tile-date {
    font-size: 0.72em;
    color: #afafaf;
    margin-top: auto;
    padding-top: 0.4em;
}

/* a:link 의 전역 컬러 (.listup_module_title a 와 동일 정책) 가 타일 전체에
   덮이지 않도록 — 타일은 색을 inherit, 안쪽의 .gallery-tile-title 만 강조. */
* a:link.gallery-tile {
    color: inherit;
}

/* 모바일: 한 줄에 두 칸. 패딩과 글자 크기 살짝 축소. */
@media screen and (max-width: 600px) {
    section.listup-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0.2em 0.3em 0.4em 0.3em;
    }
    .gallery-tile-meta {
        padding: 0.6em 0.75em 0.75em 0.75em;
    }
    .gallery-tile-title {
        font-size: 0.82em;
        line-height: 1.35em;
    }
    .gallery-tile-date {
        font-size: 0.68em;
    }
}


/* ════════════════════════════════════════════════════════════════
   imgSlideBox  (v1.1.2 — 오류 수정 + 페이지네이션형 재디자인)
   정본 lama.pe.kr 의 imgSlideBox 는 단일 <img> 의 src 를 JS 로 갈아끼워
   한 장만 보였다. siheonlee 정적 빌드(markdown.py _simulate_imgslidebox)
   는 폴더의 모든 이미지를 <img class="slide"> 로 미리 펼치고 그중 한
   장에만 .active 를 주며, assets/imgslidebox.js 가 .active 를 옮긴다.
   (1) 오류 수정 — "active 한 장만 보이기"는 전적으로 CSS 책임인데
   v1.1.1 까지 그 규칙이 없어 모든 슬라이드가 세로로 나열됐다(슬라이드
   박스가 아니라 이미지 목록). 아래 .slide / .slide.active 가 그 핵심
   수정이며, .imgBox 와 톤(테두리/마진/반응형 폭)을 맞춘다.
   (2) 재디자인 — 좌우 큰 오버레이 버튼 대신, 사이트 .pagination-nav 와
   같은 절제된 톤의 점(dot) 인디케이터를 이미지 하단 중앙에 둔다
   (‹ prev · 점들 · next ›). 이 .slide-nav 는 imgslidebox.js 가 런타임에
   만들므로 정적 HTML 산출물은 바뀌지 않는다.
   ════════════════════════════════════════════════════════════════ */
.imgSlideBox {
    position: relative;   /* prev/next 절대배치의 기준 */
    border: solid black 1px;
    margin-bottom: 10px;
    width: 65%;           /* .imgBox 와 동일 폭 (반응형도 아래에서 일치) */
    overflow: hidden;
}
/* 핵심: active 한 장만 노출. 이 두 줄이 없으면 모든 이미지가 나열된다. */
.imgSlideBox .slide {
    display: none;
    width: 100%;          /* .imgBox img 와 동일 — 박스 폭에 꽉 채움 */
}
.imgSlideBox .slide.active {
    display: block;
}
/* 하단 중앙 내비게이션 — imgslidebox.js 가 런타임에 만든다(정적 HTML
   불변). 사이트 .pagination-nav 와 같은 절제된 톤을 따르되, 이미지
   위에 얹히므로 흰색 계열 + 가독성용 그림자를 쓴다. '평소 흐릿,
   hover/focus 시 또렷' 원칙 유지(콘텐츠를 시각적으로 압도하지 않음). */
.imgSlideBox .slide-nav {
    position: absolute;
    left: 50%;
    bottom: 0.7em;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.3em 0.7em;
    user-select: none;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.imgSlideBox:hover .slide-nav,
.imgSlideBox:focus .slide-nav,
.imgSlideBox:focus-within .slide-nav {
    opacity: 1;
}
/* 점 인디케이터 — 현재 위치 표시 + 클릭으로 해당 슬라이드 이동 */
.imgSlideBox .slide-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.imgSlideBox .slide-dot:hover,
.imgSlideBox .slide-dot:focus {
    background-color: rgba(255, 255, 255, 0.85);
    outline: none;
}
.imgSlideBox .slide-dot.active {
    background-color: #fff;
    transform: scale(1.35);
}
/* 이전/다음 — 점들 양옆의 절제된 갈매기(chevron) */
.imgSlideBox .prev,
.imgSlideBox .next {
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.15em;
    line-height: 1;
    padding: 0 0.15em;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.imgSlideBox .prev:hover,
.imgSlideBox .next:hover,
.imgSlideBox .prev:focus,
.imgSlideBox .next:focus {
    opacity: 1;
    outline: none;
}
/* 반응형 폭 — .imgBox 의 브레이크포인트/폭과 동일하게 맞춤. */
@media (min-width: 993px) and (max-width: 1430px) {
    .imgSlideBox { width: 80%; }
}
@media (min-width: 601px) and (max-width: 992px) {
    .imgSlideBox { width: 80%; }
}
@media screen and (max-width: 600px) {
    .imgSlideBox { width: 100%; }
}