@charset "utf-8";
/* Arimura Skin v1.5 */

/* ==========================================================================
   변수
   ========================================================================== */
:root{
	--width: 760px;
	--sidebar-width: 200px;
	--toc-width: 200px;
	--layout-gap: 40px;
	--container-padding: 20px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
		"Noto Sans KR", "Malgun Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	--font-mono: "Consolas", "Menlo", monospace;

	--text: #333333;
	--text-strong: #1a1a1a;
	--text-muted: #8c8c8c;
	--text-label: #9a9a9a;

	--border: #e8e8e8;
	--border-strong: #dcdcdc;

	--bg: #ffffff;
	--bg-hover: #fafafa;

	--badge-bg: #4d4d4d;
	--badge-text: #ffffff;
}

/* 다크모드 - 시스템 환경설정 기반 (사용자가 직접 선택하지 않았을 때) */
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]){
		--text: #d4d4d4;
		--text-strong: #f2f2f2;
		--text-muted: #9a9a9a;
		--text-label: #8a8a8a;
		--border: #333333;
		--border-strong: #444444;
		--bg: #1a1a1a;
		--bg-hover: #242424;
		--badge-bg: #cfcfcf;
		--badge-text: #1a1a1a;
	}
}
/* 다크모드 - 토글 버튼으로 직접 선택했을 때 */
:root[data-theme="dark"]{
	--text: #d4d4d4;
	--text-strong: #f2f2f2;
	--text-muted: #9a9a9a;
	--text-label: #8a8a8a;
	--border: #333333;
	--border-strong: #444444;
	--bg: #1a1a1a;
	--bg-hover: #242424;
	--badge-bg: #cfcfcf;
	--badge-text: #1a1a1a;
}

/* ==========================================================================
   초기화 / 공통
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

body{
	font-family: var(--font);
	font-size: 15px;
	color: var(--text);
	line-height: 1.7;
	background: var(--bg);
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
}
a, a:link, a:visited, a:hover, a:active{
	text-decoration: none;
	color: var(--text);
	transition: color .2s ease, opacity .2s ease;
}
img{
	max-width: 100%;
	height: auto;
}
.article img,
.blogImage img,
.relatedThumb img{
	display: block;
}
input{ outline: none; }
h3{
	color: var(--text-label);
	font-size: .8em;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin: 0 0 12px;
}
h2{
	color: var(--text-strong);
	font-size: 1.05em;
	font-weight: 700;
	margin: 0;
	line-height: 1.5;
}
h2 a, h2 a:link, h2 a:visited{ color: var(--text-strong); }
h2 a:hover{ color: var(--text-muted); }

textarea{
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 8px;
	font-family: var(--font);
	font-size: .95em;
	color: var(--text);
	background: var(--bg);
}
button, input[type="button"], input[type="submit"]{
	border: 1px solid var(--border-strong);
	border-radius: 3px;
	background: var(--bg);
	padding: 6px 14px;
	font-size: .85em;
	color: var(--text);
	font-family: var(--font);
	cursor: pointer;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover{
	background: var(--text-strong);
	color: var(--bg);
	border-color: var(--text-strong);
}
input[type="text"], input[type="password"]{
	border: 1px solid var(--border);
	border-radius: 3px;
	background: var(--bg);
	padding: 6px 8px;
	font-size: .9em;
	font-family: var(--font);
	color: var(--text);
}

/* ==========================================================================
   레이아웃
   ========================================================================== */
#container{
	width: 100%;
	/* 사이드바+본문(1000px) + 좌우 패딩 = 목차 유무와 무관하게 항상 고정 폭 */
	max-width: calc(var(--width) + var(--sidebar-width) + var(--layout-gap) + (var(--container-padding) * 2));
	margin: 48px auto;
	padding: 0 var(--container-padding);
}
#container ul, #container ol{ margin: 0; padding: 0; }
#container li{ list-style: none; }

#container>.login{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 12px;
	font-size: .8em;
}
#container>.login a{
	color: var(--text-muted);
	letter-spacing: .02em;
}
#container>.login a:hover{ color: var(--text-strong); }

.themeToggle{
	border: none;
	background: transparent;
	padding: 0;
	font-size: 1.05em;
	line-height: 1;
	cursor: pointer;
	color: var(--text-muted);
}
.themeToggle:hover{ color: var(--text-strong); background: transparent; }

#container #header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding-bottom: 16px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--border);
}
#container #header>h1{
	margin: 0;
	font-weight: 700;
	font-size: 32px;
	letter-spacing: -.02em;
	color: var(--text-strong);
}
#container #header>h1 a{ color: var(--text-strong); }

/* 레이아웃: 사이드바 + 본문 (항상 고정 폭/위치, 목차는 독립적으로 오른쪽에 얹힘) */
#layout{
	display: flex;
	align-items: flex-start;
	gap: var(--layout-gap);
	position: relative;
}
#sidebar{
	width: var(--sidebar-width);
	flex-shrink: 0;
	position: relative;
}
/* 구분선을 칼럼 경계가 아니라 여백(gap) 정중앙에 둬서 양쪽에 여유를 줌 */
#sidebar::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(-1 * var(--layout-gap) / 2);
	border-right: 1px solid var(--border);
}
.blogInfo{
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--border);
}
.blogInfo .blogImage img{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 10px;
}
.blogInfo .blogDesc{
	font-size: .85em;
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0 0 4px;
}
.blogInfo .blogger{
	font-size: .8em;
	color: var(--text-label);
	margin: 0;
}
#sidebar>h3{ margin-bottom: 10px; }
#sidebar .menu{
	font-size: .85em;
	line-height: 1.9;
	color: var(--text-muted);
}
#sidebar .menu a, #sidebar .menu a:link, #sidebar .menu a:visited{
	display: block;
	color: var(--text-muted);
}
#sidebar .menu a:hover{ color: var(--text-strong); }

/* 상위/하위 카테고리 트리 - 하위 목록(ul)은 들여쓰기, 상위 항목은 좀 더 진하게 */
#sidebar .menu ul{
	margin-left: 12px;
	padding-left: 10px;
	border-left: 1px solid var(--border);
}
#sidebar .menu > ul > li > a{
	color: var(--text-strong);
	font-weight: 700;
}
#main{
	flex: 1;
	min-width: 0;
	max-width: var(--width);
}
#tocSidebar:empty{ display: none; }
#tocSidebar{
	width: var(--toc-width);
	position: absolute;
	left: 100%;
	top: 0;
	bottom: 0;
	margin-left: var(--layout-gap);
}

.searchBox{
	display: flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 999px;
	overflow: hidden;
	max-width: 240px;
	flex-shrink: 0;
}
.searchBox input[type="text"]{
	flex: 1;
	border: none;
	border-radius: 0;
	background: transparent;
	padding: 6px 6px 6px 14px;
	font-size: .85em;
	color: var(--text);
}
.searchBox button{
	border: none;
	background: transparent;
	padding: 6px 12px;
	font-size: .9em;
	cursor: pointer;
	color: var(--text-muted);
}
.searchBox button:hover{ background: transparent; color: var(--text-strong); border-color: transparent; }

/* 목차(TOC) - #tocSidebar는 #sidebar/#main과 나란한 독립 칼럼 */
/* 모바일: 본문 위, 기본 접힘 / 데스크톱: 본문 오른쪽 별도 칼럼, 스크롤 고정 */
.toc{
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}
.toc .tocLabel{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-weight: 700;
	color: var(--text-label);
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
}
.toc .tocArrow{ transition: transform .2s ease; }
.toc.open .tocArrow{ transform: rotate(90deg); }
.toc ul{ margin: 0; padding: 0; max-height: 0; overflow: hidden; }
.toc.open ul{ max-height: 1000px; margin-top: 10px; }
.toc li{ list-style: none; padding: 3px 0; font-size: .85em; }
.toc a{ color: var(--text-muted); }
.toc a:hover{ color: var(--text-strong); }
.toc a.active{ color: var(--text-strong); font-weight: 700; }
.toc .tocLevel-h3{ padding-left: 14px; }
.toc .tocLevel-h4{ padding-left: 28px; }

/* 목차 칼럼이 실제로 보이는 폭(사이드바+본문 1040px + 여백40 + 목차200 = 1280px)부터 적용 */
@media screen and (min-width: 1280px){
	#tocSidebar .toc{
		margin: 0;
		padding-bottom: 0;
		border-bottom: none;
		position: sticky;
		top: 20px;
	}
	#tocSidebar .toc .tocLabel{ cursor: default; }
	#tocSidebar .toc .tocArrow{ display: none; }
	#tocSidebar .toc ul{ max-height: none; overflow: visible; margin-top: 10px; }
	#container.has-toc #main{ position: relative; }
	#container.has-toc #main::after{
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: calc(-1 * var(--layout-gap) / 2);
		border-right: 1px solid var(--border);
	}
}

/* 사이드바+본문은 들어가지만(1040px~) 목차까지 넣기엔 좁은 구간(~1279px) - 목차 숨김 */
@media screen and (min-width: 1040px) and (max-width: 1279px){
	#tocSidebar{ display: none; }
}

#container #content{
	padding: 0;
}

#container #footer{
	padding: 32px 0 0;
	margin-top: 40px;
	border-top: 1px solid var(--border);
	color: var(--text-muted);
	font-size: .8em;
	line-height: 1.8;
	text-align: center;
}
#container #footer #top{
	display: inline-block;
	margin-bottom: 10px;
	cursor: pointer;
	color: var(--text-muted);
}
#container #footer #top:hover{ color: var(--text-strong); }
#container #footer p{ margin: 0; }

/* ==========================================================================
   검색 결과
   ========================================================================== */
.searchList{
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	color: var(--text-muted);
	padding: 4px 0;
	margin: 24px 0;
}
.searchList li{
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 4px;
	border-bottom: 1px dashed var(--border);
}
.searchList li:last-child{ border-bottom: none; }
.searchList a, .searchList a:link, .searchList a:visited{
	color: var(--text);
	flex: 1;
}
.searchList a:hover{ color: var(--text-muted); }
.searchList .cnt{ font-size: .8em; color: var(--text-label); }
.searchList .date{
	font-size: .8em;
	color: var(--text-label);
	letter-spacing: -.02em;
}

/* ==========================================================================
   태그 목록 (/tag 페이지)
   ========================================================================== */
.taglog{
	border-top: 1px solid var(--border);
	padding-top: 20px;
	margin: 24px 0;
}
.taglog h3{ margin-bottom: 14px; }
.taglog ul{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	list-style: none;
}
.taglog a, .taglog a:link, .taglog a:visited{ color: var(--text-muted); }
.taglog a:hover{ color: var(--text-strong); }
.taglog .cloud1{ font-size: .8em; }
.taglog .cloud2{ font-size: .9em; }
.taglog .cloud3{ font-size: 1em; }
.taglog .cloud4{ font-size: 1.15em; color: var(--text); }
.taglog .cloud5{ font-size: 1.3em; font-weight: 700; color: var(--text-strong); }

/* 방문자 통계 그래프 (플러그인) */
.statsGraph{
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}
.statsGraph li{
	display: flex;
	justify-content: space-between;
	padding: 2px 0;
	font-size: .85em;
	color: var(--text-muted);
}
.statsGraph .statsValue{ color: var(--text-strong); font-weight: 700; }

.linkList{
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}
.linkList li{
	padding: 3px 0;
	font-size: .85em;
}
.linkList a, .linkList a:link, .linkList a:visited{
	color: var(--text-muted);
}
.linkList a:hover{ color: var(--text-strong); }

/* 캘린더 (티스토리 기본 제공, [##_calendar_##] 서버 렌더링 - 클래스명 고정) */
.calendarBox{
	position: relative;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}
.calendarBox table{
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.calendarBox caption{
	caption-side: top;
	position: relative;
	margin-bottom: 10px;
	font-size: .85em;
	text-align: center;
}
.calendarBox caption a:first-child,
.calendarBox caption a:last-child{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	border-radius: 3px;
	color: var(--text-muted);
}
.calendarBox caption a:first-child{ left: 0; }
.calendarBox caption a:last-child{ right: 0; }
.calendarBox caption a:first-child:hover,
.calendarBox caption a:last-child:hover{ background: var(--bg-hover); color: var(--text-strong); }
.calendarBox caption a:nth-child(2){
	font-weight: 700;
	color: var(--text-strong);
	cursor: pointer;
}
.calPicker{
	display: none;
	position: absolute;
	top: 24px;
	left: 0;
	right: 0;
	z-index: 5;
	padding: 10px;
	background: var(--bg);
	border: 1px solid var(--border-strong);
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.calPicker.open{ display: block; }
.calPickerYear{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: .8em;
	font-weight: 700;
	color: var(--text-strong);
}
.calPickerYear button{
	width: 1.6em;
	height: 1.6em;
	padding: 0;
	border: none;
	border-radius: 3px;
	background: transparent;
	color: var(--text-muted);
	font-size: 1em;
	cursor: pointer;
}
.calPickerYear button:hover{ background: var(--bg-hover); color: var(--text-strong); }
.calPickerYearLabel{
	padding: 2px 8px;
	border-radius: 3px;
	cursor: pointer;
}
.calPickerYearLabel:hover{ background: var(--bg-hover); }
.calPickerGrid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}
.calPickerMonth{
	padding: 6px 0;
	border: none;
	border-radius: 3px;
	background: transparent;
	color: var(--text-muted);
	font-size: .78em;
	cursor: pointer;
}
.calPickerMonth:hover{ background: var(--bg-hover); color: var(--text-strong); }
.calPickerMonth.current{ font-weight: 700; color: var(--text-strong); background: var(--bg-hover); }
.calendarBox th{
	padding-bottom: 6px;
	font-size: .75em;
	font-weight: 400;
	color: var(--text-label);
	text-align: center;
}
.calendarBox td{
	padding: 3px 0;
	font-size: .78em;
	text-align: center;
	color: var(--text-muted);
}
.calendarBox td.cal_day_sunday{ color: var(--text-label); }
.calendarBox a.cal_click{
	display: inline-block;
	min-width: 1.8em;
	color: var(--text-strong);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.calendarBox a.cal_click:hover{ color: var(--text-muted); }
.calendarBox td.cal_day4{
	position: relative;
	font-weight: 700;
	color: var(--text-strong);
}
.calendarBox td.cal_day4::after{
	content: '';
	position: absolute;
	bottom: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--text-strong);
}

/* ==========================================================================
   글
   ========================================================================== */
.entryWrap{
	padding: 28px 0;
	margin: 0;
	border-bottom: 1px solid var(--border);
}
.entry:first-child .entryWrap{ padding-top: 0; }

h2 .category{
	display: inline-block;
	padding: 2px 8px;
	margin-right: 6px;
	border-radius: 3px;
	color: var(--badge-text);
	font-size: .7em;
	font-weight: 400;
	letter-spacing: .03em;
	background: var(--badge-bg);
	vertical-align: middle;
}
h2 .category a, h2 .category a:link, h2 .category a:visited{ color: var(--badge-text); }

.entryWrap .date{
	color: var(--text-muted);
	font-size: .8em;
	margin-top: 6px;
}
.entryWrap .admin{
	border: 1px dashed var(--border-strong);
	border-radius: 3px;
	padding: 10px 12px;
	margin: 12px 0 0;
	font-size: .8em;
	color: var(--text-muted);
}
.entryWrap .admin a{ color: var(--text-muted); }
.entryWrap .admin a:hover{ color: var(--text-strong); }

.article{
	padding: 20px 0 0;
	font-size: 1em;
	line-height: 1.8;
	color: var(--text);
	word-break: break-word;
}
.article img{ border-radius: 3px; cursor: zoom-in; }

/* 본문 안 소제목(제목2)은 사이드바 라벨용 h3 스타일(대문자 등)을 물려받지 않도록 별도 지정 */
.article h3{
	color: var(--text-strong);
	font-size: 1em;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	margin: 28px 0 8px;
}

/* #container ul/li 전역 리셋이 본문 리스트까지 지우는 것 복구 */
#container .article ul, #container .article ol{
	padding-left: 1.5em;
	margin: 0 0 1em;
}
#container .article ul li{ list-style-type: disc; }
#container .article ol li{ list-style-type: decimal; }

/* 이미지 라이트박스 */
.lightbox{
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .85);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 999;
	padding: 40px 20px;
	cursor: zoom-out;
}
.lightbox.open{ display: flex; }
.lightbox img{
	display: block;
	max-width: 100%;
	max-height: 100%;
	border-radius: 3px;
	cursor: default;
}
.lightboxClose{
	position: absolute;
	top: 20px;
	right: 24px;
	font-size: 32px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
}

.tagTrail{
	margin-top: 16px;
	font-size: .85em;
}
.tagTrail a, .tagTrail a:link, .tagTrail a:visited{ color: var(--text-muted); }
.tagTrail a:hover{ color: var(--text-strong); }

.shareBox{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: .85em;
}
.shareBox .shareLabel{
	color: var(--text-label);
	font-size: .95em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-right: 2px;
}
.shareBox button, .shareBox a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: transparent;
	padding: 0;
	font-size: .85em;
	color: var(--text-muted);
	cursor: pointer;
}
.shareBox button:hover, .shareBox a:hover{
	color: var(--badge-text);
	background: var(--badge-bg);
	border-color: var(--badge-bg);
}

.tagText, .rpText{
	color: var(--text-label);
	font-size: .8em;
	font-weight: 700;
	margin-right: 6px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.rpText{ display: inline; }
a[href="#rp"]{
	display: inline-block;
	margin-top: 14px;
	font-size: .85em;
	color: var(--text-muted);
}
a[href="#rp"]:hover{ color: var(--text-strong); }
.cnt, .cnt a, .cnt a:link, .cnt a:visited{ color: var(--text-muted); }

/* ==========================================================================
   관련글
   ========================================================================== */
.relatedPosts{
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}
.relatedPosts h3{ margin-bottom: 12px; }
.relatedPosts ul{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.relatedPosts li{
	list-style: none;
	width: calc(50% - 8px);
}
.relatedPosts a, .relatedPosts a:link, .relatedPosts a:visited{
	display: block;
	color: var(--text);
}
.relatedPosts a:hover .relatedTitle{ color: var(--text-muted); }
.relatedThumb{
	display: block;
	margin-bottom: 8px;
	border-radius: 3px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--bg-hover);
}
.relatedThumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.relatedTitle{
	display: block;
	font-size: .9em;
	font-weight: 700;
	color: var(--text-strong);
	line-height: 1.4;
}
.relatedDate{
	display: block;
	margin-top: 4px;
	font-size: .75em;
	color: var(--text-label);
}

/* 티스토리 코드블록(highlight.js)은 라이트 배경 전용 고정 색상이라 다크모드에서 대비가 깨짐.
   클래스별로 색을 일일이 지정하는 대신, 다크모드에서만 색상 반전으로 자동 대응 */
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]) .hljs{
		filter: invert(1) hue-rotate(180deg);
	}
}
:root[data-theme="dark"] .hljs{
	filter: invert(1) hue-rotate(180deg);
}

/* 티스토리가 본문 끝에 자동 삽입하는 네임카드 (skin.html 소유 아님, 클래스만 오버라이드) */
.tt_box_namecard{
	background: var(--bg) !important;
	border: 1px solid var(--border) !important;
}
.tt_box_namecard .tt_tit_cont{ color: var(--text-strong) !important; }
.tt_box_namecard .tt_desc{ color: var(--text-muted) !important; }

/* ==========================================================================
   댓글 / 방명록 (공통)
   ========================================================================== */
.comment, .guestbook{
	padding: 24px 0;
	margin: 0 0 24px;
}
.comment{ border-top: 1px solid var(--border); }

.commentList li, .guestList li{
	padding: 14px 0;
	border-bottom: 1px dashed var(--border);
}
.commentList li:last-child, .guestList li:last-child{ border-bottom: none; }

.comment .name, .guestbook .name{
	color: var(--text-strong);
	font-weight: 700;
	padding-right: 8px;
	font-size: .9em;
}
.comment .date, .guestbook .date{
	color: var(--text-label);
	font-size: .8em;
}
.comment .control, .guestbook .control{
	float: right;
	font-size: .8em;
}
.comment .control a, .guestbook .control a{
	color: var(--text-label);
	margin-left: 8px;
}
.comment .control a:hover, .guestbook .control a:hover{ color: var(--text-strong); }
.comment p, .guestbook p{ margin: 8px 0 0; }

.commentWrite, .guestWrite{
	color: var(--text-muted);
	margin-top: 20px;
}
.commentWrite p, .guestWrite p{ margin: 0 0 8px; }
.secretWrap{ font-size: .85em; }

/* 답글(대댓글) */
.commentList ul, .guestList ul{
	margin: 10px 0 0 20px;
	padding-left: 16px;
	border-left: 2px solid var(--border);
}

/* ==========================================================================
   페이징
   ========================================================================== */
.paging{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 40px 0;
	font-size: .85em;
	color: var(--text-muted);
}
.paging a{ color: var(--text-muted); }
.paging .numbox{ display: flex; gap: 2px; }
.paging .num{
	display: inline-block;
	min-width: 1.8em;
	text-align: center;
	padding: 4px 6px;
	border-radius: 3px;
}
.paging .num:hover{ background: var(--bg-hover); color: var(--text-strong); }
.paging .selected{
	font-weight: 700;
	color: var(--text-strong);
	background: transparent;
}

/* ==========================================================================
   반응형
   ========================================================================== */
/* 사이드바+본문 최소 폭(1040px) 미만부터 모바일 단일 칼럼 */
@media screen and (max-width: 1039px){
	#container{ margin: 32px auto; }
	#container #header>h1{ font-size: 26px; }
	#layout{ flex-direction: column; gap: 24px; }
	#tocSidebar{
		position: static;
		width: 100%;
		margin-left: 0;
		order: 1;
	}
	#main{ width: 100%; max-width: none; order: 2; }
	#sidebar{ width: 100%; order: 3; }
	#sidebar::after{ display: none; }
}

@media screen and (max-width: 480px){
	body{ font-size: 14px; }
	#container{ margin: 24px auto; padding: 0 16px; }
	#container>.login{ font-size: .78em; gap: 10px; margin-bottom: 10px; }
	#container #header{ padding-bottom: 12px; margin-bottom: 20px; }
	#container #header>h1{ font-size: 22px; }
	.searchBox{ max-width: none; }
	.searchList li{ flex-wrap: wrap; }
	.comment .control, .guestbook .control{ float: none; display: block; margin-top: 6px; }
	.comment .control a:first-child, .guestbook .control a:first-child{ margin-left: 0; }
	.commentList ul, .guestList ul{ margin-left: 8px; padding-left: 10px; }
	.paging{ gap: 2px; }
	.relatedPosts li{ width: 100%; }
}