@charset "utf-8";

:root {
	scroll-behavior: smooth;

	--font-size-xxs: calc(var(--font-size) - 4px);
	--font-size-xs: calc(var(--font-size) - 3px);
	--font-size-s: calc(var(--font-size) - 2px);
	--font-size-m: calc(var(--font-size) + 2px);
	--font-size-l: calc(var(--font-size) + 4px);
	--font-size-xl: calc(var(--font-size) + 6px);
	--font-size-xxl: calc(var(--font-size) + 10px);

	--gutter-container: 30px;
	--gutter-container-s: 20px;
	--gutter-container-xs: 10px;

/* ────────────────────────────────custom */
	--color-white: #fdfdfd;
	--color-base-100: #fafafa;
	--color-base-150: #f8f8f8;
	--color-base-200: #f5f5f5;
	--color-base-250: #f0f0f0;
	--color-base-300: #eaeaea;
	--color-base-400: #dadada;
	--color-base-500: #cbcbcb;
	--color-base-600: #bebebb;
	--color-base-700:#acaaaa;
	--color-base-800: #9a9999;
	--color-base-900: #777777;
	--color-base-1000: #5c5a52;
	--color-base-1100: #4a4a4a;
	--color-base-1200: #3e3d3f;
	--color-black: #1b1d1f;
	--padding: 20px;
	--font-size: 14px;
	--border-color: var(--color-base-250);
	--radius: 20px;
	--radius-base-s: 4px;
	--radius-base-m: 8px;
	--radius-base-l: 16px;
	--radius-circle: 100%;
	--shadow-100: 0px 2px 4px #00000010;
	--shadow-150: 0px 2px 4px #00000015;
	--shadow-200: 0px 2px 4px #00000020;
	--shadow-250: 0px 2px 4px #00000025;
	--shadow-300: 0px 2px 4px #00000030;
	--duration: 0.5s;
	--color-system-close: #ff7676;
	--color-system-refresh: #64e060;
}


/*
────────────────────────────────────────────────────
apricot skin #8
Edited by salgu
────────────────────────────────────────────────────

800001 RESET
800002 툴팁
800003 레이아웃
800004 모달 디자인
├─ 0401 공통
├─ 0402 로그인/아웃 박스
└─ 0403 패스워드 박스
800005 상단 네비게이션
800006 헤더
800007 메뉴 네비게이션
├─ 0701 공통
├─ 0702 검색
└─ 0703 카테고리
800008 커버
├─ 0801 공통
├─ 0802 공지
├─ 0803 태그 클라우드
├─ 0804 캘린더
├─ 0805 해빗 트래커
├─ 0806 디데이
├─ 0807 링크
├─ 0808 트위터
├─ 0809 문서
├─ 0810 웹진
├─ 0811 심플
├─ 0812 갤러리
├─ 0813 갤러리2
├─ 0814 슬라이드 갤러리
├─ 0815 그리드 갤러리
└─ 0816 피드
800009 목록 스타일
├─ 0901 공통
├─ 0902 심플
├─ 0903 문서
├─ 0904 메모
├─ 0905 슬라이드 메모
├─ 0906 갤러리
├─ 0907 갤러리2
├─ 0908 갤러리3
├─ 0909 웹진
└─ 0910 웹진2
800010 본문
├─ 1001 공통
├─ 1002 플로팅 네비게이션
├─ 1003 에디터
│  ├─ 100301 리스트
│  ├─ 100302 배경색
│  ├─ 100303 밑줄
│  ├─ 100304 인용
│  ├─ 100305 더보기
│  ├─ 100306 링크 열기
│  ├─ 100307 파일 다운로드
│  ├─ 100308 글감
│  ├─ 100309 코드블럭
│  ├─ 100310 지도
│  ├─ 100311 반응형 동영상
│  ├─ 100312 본문 이미지
│  ├─ 100313 제목 태그
│  └─ 100314 본문 a태그
├─ 1004 관련글
└─ 1005 태그 목록
800011 비밀글
800012 공지사항
800013 포스트 버튼
├─ 1301 공통
├─ 1302 리셋: 메인 박스/공유/통계/더보기/구독/응원하기 
├─ 1303 공감 버튼
└─ 1304 응원하기
800014 댓글 & 방명록
800015 태그 클라우드
800016 페이징
800017 스크롤바
800018 드래그
800019 반응형
├─ 1901 태블릿
└─ 1902 모바일
────────────────────────────────────────────────────
*/


/* ───────────────────────────────────────────────────────── */
/* 800001 : reset inline style */
/* ───────────────────────────────────────────────────────── */

* {
	box-sizing: border-box;

	margin: 0;
	padding: 0;
}

[hidden] {
	display: none;
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,u,ul,var,video {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: inherit;
	vertical-align: baseline;
}

table,tbody,td,tfoot,th,thead,time,tr,tt {
	font-size: inherit;
	vertical-align: baseline;	
}

a {
	color: inherit;
	transition: all var(--duration);
}

a:where(:link, :visited, :hover, :active) {
	text-decoration: none;
}

ol, ul, li {
	list-style: none;
}

button {  
	appearance: none;
	border:0;
	outline: none;
	background: none;

	font-size:inherit;
	font-family: inherit;
	line-height: inherit;

	cursor: pointer;  
}

:focus {
	outline: 0;
}

:focus-visible {
	outline: 2px solid var(--color-base-500);
}

input:focus-visible {
	outline: 0;
}

textarea:focus-visible {
	outline: 0;
}

input, textarea {
	-webkit-appearance: none;
	appearance: none;

	border: 0;
	outline: none;
	background: none;

	font-size:inherit;
	font-family: inherit;

	resize: none;
}

input[type="submit"] {
	cursor: pointer;
}

strong {
	font-weight: 600;
}

img.lazyload, img.lazyloading {
	opacity: 0;

	transition: all var(--duration);
}

img.lazyloaded {
	opacity: 1;

	transition: all var(--duration);
}

/* ───────────────────────────────────────────────────────── */



/* ───────────────────────────────────────────────────────── */
/* Start */
/* ───────────────────────────────────────────────────────── */





/* ───────────────────────────────────────────────────────── */
/* 800002 : 툴팁 */
/* ───────────────────────────────────────────────────────── */

.tooltip {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	opacity: 0;

	position: fixed;
	z-index: 999;
	
	border-radius: var(--radius-base-m);
	padding: 6px 10px;
	background-color: var(--color-white);
	overflow: hidden;

	font-size: var(--font-size-xs);
	text-transform: capitalize;
	color: var(--color-primary);

	transition: opacity var(--duration);
}

.tooltip:empty {
	padding: 0;
}

.tooltip::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, var(--color-primary-b2) 0%, var(--color-primary-b) 100%);
}

/* ───────────────────────────────────────────────────────── */





/* ───────────────────────────────────────────────────────── */
/* 800003 : 레이아웃 */
/* ───────────────────────────────────────────────────────── */

body {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100vw;
	min-height: 100vh;
	margin: 0;
	background-color: var(--background-pattern-color);
	overflow-x: hidden;
	overflow-y: overlay;

	font-size: var(--font-size);
	font-family: "pretendard";
	line-height: 1.7;
	word-break: break-all;
	color: var(--color-black);
}

html[data-background-type="gradient"] body {
	background: radial-gradient(circle var(--background-pattern-size) at center, var(--background-pattern-color2), var(--background-pattern-color));
	background-attachment: fixed;
	background-repeat: no-repeat;
}

html[data-background-type="checkered"] body {
	background: conic-gradient(var(--background-pattern-color) 0.25turn, var(--background-pattern-color2) 0.25turn 0.5turn, var(--background-pattern-color) 0.5turn 0.75turn, var(--background-pattern-color2) 0.75turn) top left / 25% 25% repeat;
	background-size: var(--background-pattern-size) var(--background-pattern-size);
	background-attachment: fixed;
}

html[data-background-type="plaid"] body {
	--line-size: calc(var(--background-pattern-size) - var(--background-pattern-size2));
	background: linear-gradient(to bottom, transparent var(--line-size), var(--background-pattern-color2) var(--line-size)) 0 0 / 100% var(--background-pattern-size) repeat-y, linear-gradient(to right, transparent var(--line-size), var(--background-pattern-color2) var(--line-size)) 0 0 / var(--background-pattern-size) 100% repeat-x var(--background-pattern-color);
	background-attachment: fixed;
}

html[data-background-type="solid"] body {
	background-color: var(--background-pattern-color);
}

html[data-background-type="image"] body {
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.wrap {
	display: flex;
	flex-direction: column;
	opacity: 0;

	position: relative;

	gap: 20px;

	width: max(var(--content-width), 460px);
	min-height: 700px;
	margin: 200px auto 100px auto;

	transition: opacity 0.7s 0.5s;
}

.folder-shape {
	position: absolute; 

	height: 100%;
}

.folder-shape-back {
	position: absolute;
	z-index: 0;
	top: -29px;
	left: 0;

	width: var(--content-width);
	height: 100px;
	border-radius: 40px;
	background-color: var(--color-base-250);
}

.folder-shape-back::before {
	content: "";

	position: absolute;
	z-index: 7;
	top: -20px;
	left: 0;

	width: 214px;
	height: 90px;
	border-radius: 40px 120px 0 0;
	background-color: inherit;
	clip-path: polygon(0% -107%, 0% 100%, 148% 130%);
}

.folder-inner {
	display: flex;
	flex-direction: column;

	position: absolute;
	z-index: 1;
	top: -16px;
	left: 20px;

	width: calc(var(--content-width) - 40px);
	height: 100px;
	border-radius: 16px;
	box-shadow: 0px 2px 4px transparent;
	background-color: var(--color-base-150);
	overflow: hidden;

	transition: transform 0.5s ease;
}

.folder-inner.active {
	height: unset;
	box-shadow: var(--shadow-200);
	background: linear-gradient(0deg, var(--color-white) 30%, var(--color-primary-b) 100%);
	background-color: var(--color-white);
}

.folder-inner-top {
	opacity: 0;

	transition: opacity var(--duration);
}

.folder-inner.active .folder-inner-top {
	opacity: 1;
}

.folder-inner .folder-inner-top {
	border-bottom: 1px solid var(--color-primary-b);
	background-color: transparent;
}

.folder-inner .system-close-btn {
	background-color: var(--color-primary-b2);
}

.container {
	display: flex;
	flex-direction: column;

	position: relative;
	z-index: 3;
	flex-grow: 1;

	width: var(--content-width);
	height: 100%;
	border-radius: 24px;
	box-shadow: var(--shadow-100), 0px -15px 4px #00000005;
	background-color: var(--color-white);
	overflow: hidden;
}

.content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;

	position: relative;
	flex-grow: 1;

	width: 100%;
	height: 100%;
	border-radius: var(--radius);
	padding: var(--gutter-container);
	
	overflow: hidden;

	transition: transform var(--duration);
}


/* ───────────────────────────────────────────────────────── */





/* ───────────────────────────────────────────────────────── */
/* 800004 : 모달 디자인 */
/* ───────────────────────────────────────────────────────── */

/* 0401 공통 */

.system-top {
	display: flex;
	align-items: center;

	gap: 6px;
	border-bottom: 1px solid var(--border-color);
	padding: 8px 16px;
	background-color: var(--color-white);

	line-height: 1.6;
}

.system-title {
	display: block;

	order: -1;

	margin: 0 auto;

	font-size: var(--font-size);
	font-weight: 600;
}

button + .system-title {
	padding-left: 18px;
}

button + button + .system-title, a + button + .system-title {
	padding-left: 36px;
}

.system-close-btn, .system-refresh-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	position: relative;
	z-index: 2;
	flex-shrink: 0;

	width: 12px;
	aspect-ratio: 1/1;
	border-radius: var(--radius-circle);
	background-color: var(--color-base-300);

	transition: background-color var(--duration);
}

.system-close-btn:hover {
	background-color: var(--color-system-close);
}

.system-refresh-btn:hover {
	background-color: var(--color-system-refresh);
}

.system-close-icon, .system-refresh-icon {
	opacity: 0;
	
	width: 10px;
	height: 10px;
	stroke-width: 2px;
	color: var(--color-base-100);

	transition: opacity var(--duration);
}

.system-close-btn:hover .system-close-icon, .system-refresh-btn:hover .system-refresh-icon {
	opacity: 1;
}

.modal-wrap {
	opacity: 0;

	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	background-color: #0001;

	transition: opacity var(--duration);
}

.modal-wrap:not(.active) {
	display: none;
}

/* 0402 로그인/아웃 화면 */

.log-box {
	display: flex;
	flex-direction: column;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 450px;
	border-radius: var(--radius-base-l);
	background-color: var(--color-white);
	overflow: hidden;

	text-align: center;
}

.log-box.opacity-1 {
	transition: opacity var(--duration);
}

.log-title {
	padding-left: 14px;
}

.log-container {
	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 10px;
	padding: 40px 20px 50px 20px;
}

.log-alert {
	padding: 6px 16px;

	font-weight: 500;
	text-align: center;
}

.log-user, .log-password, .log-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 180px;
	border-radius: var(--radius-base-m);
	padding: 10px;
	background-color: var(--color-base-200);

	color: var(--color-base-900);
	line-height: 1;
}

.log-user, .log-password {
	cursor: not-allowed;
}

.log-btn-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	gap: 6px;	
	margin-top: 10px;
}

.log-btn {
	margin-top: 10px;
	background-color: var(--color-primary-b2);

	font-size: var(--font-size-s);
	color: var(--color-primary);
}

.log-btn-message::before {
	content: "OK";
}

.log-alert::after {
	content: "로그인 하시겠습니까?";
}

.login .log-alert::after {
	content: "정말 로그아웃 하시겠습니까?";
}

.log-forgot {
	font-size: var(--font-size-s);
	color: var(--color-base-500);
}

html:is([data-role="owner"], [data-role="user"], [data-role="connected"]) .log-forgot {
	display: none;
}


/* 0403 패스워드 박스 */

.password-box {
	display: flex;
	flex-direction: column;
	opacity: 0;

	position: fixed;
	z-index: 10;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: min(90vw, 400px);
	border-radius: var(--radius-base-l);
	box-shadow: var(--shadow-100);
	background-color: var(--color-base-100);
	overflow: hidden;

	transition: opacity var(--duration);
}

.password-box.opacity-1 {
	opacity: 1;

	transition: opacity var(--duration);
}

.password-close-btn, .password-refresh-btn {
	transition: background-color var(--duration);
}

.password-container {
	display: flex;
	flex-direction: column;

	position: relative;

	height: 100%;
	padding: 20px;
}

.password-user-wrap {
	display: flex;
	justify-content: center;
	align-items: center;

	position: relative;

	margin: 20px 0 10px 0;
}

.password-user-img {
	width: 60px;
	height: 60px;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: var(--radius-circle);
}

.password-lock-wrap {
	display: flex;
	justify-content: center;
	align-items: center;

	position: absolute;
	z-index: 2;

	aspect-ratio: 1/1;
	margin: 40px 0 0 40px;
	border-radius: var(--radius-circle);
	padding: 4px 6px;
	background-color: var(--color-base-1200);

	color: var(--color-white);
	line-height: 1;
}

.password-lock-icon {
	width: 14px;
	height: 14px;
	stroke-width: 2px;
	color: inherit;
}

.password-desc {
	margin: 10px 0 20px 0;

	font-size: var(--font-size);
	color: var(--color-base-700);
	text-align: center;
}

.password-current-label {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 40px;
	margin: 30px 0 30px 10px;
	padding: 10px 20px;

	font-size: var(--font-size-m);
	font-weight: 600;
	color: var(--color-black);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: 20px;
}

.password-box[data-active="false"] .password-current-label {
	color: #ff5b5b;
}

.password-box[data-active="true"] .password-current-label {
	color: var(--color-primary);
}

.password-num-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 10px;
}

.password-num-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	position: relative;

	padding: 16px;

	font-size: var(--font-size);
}

.password-num-icon {
	width: var(--font-size-m);
	height: var(--font-size-m);
	stroke-width: 2.5px;
}

.password-num-btn[data-value="*"] .password-num-icon {
	width: var(--font-size-l);
	height: var(--font-size-l);
	stroke-width: 1.5px;
	color: var(--color-base-1000);
}

.password-img {
	opacity: 0;
	visibility: hidden;

	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	object-fit: cover;

	transition: opacity var(--duration) 0.6s;
	will-change: opacity;
}

.password-box[data-active="true"] .password-img {
	opacity: 1;
	visibility: visible;
}



/* ───────────────────────────────────────────────────────── */
/* 800005 : 상단 네비게이션 */
/* ───────────────────────────────────────────────────────── */

.top-nav {
	display: flex;
	align-items: center;
	opacity: 0.5;

	position: fixed;
	z-index: 10;
	top: 0;
	transform: translateY(-20px);

	gap: 10px;
	width: var(--content-width);
	padding: 12px var(--gutter-container);
	border-radius: 0 0 20px 20px;
	box-shadow: var(--shadow-100);
	background-color: var(--color-white);
	
	transition: transform var(--duration), opacity var(--duration);
}

.top-nav:hover {
	opacity: 1;
	
	transform: translateY(0);
}

.nav-title-wrap {
	display: flex;
	align-items: center;

	gap: 10px;
}

.nav-img {
	width: 24px;
	height: 24px;
	aspect-ratio: 1/1;
	border-radius: var(--radius-circle);
}

.top-nav .nav-menu {
	margin-left: auto;
}

.control-btn-container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	
	gap: 10px;
	margin-left: auto;
}

.control-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	border-radius: var(--radius-circle);
	padding: 10px;
	background-color: var(--color-base-250);
}

.control-icon {
	width: 12px;
	height: 12px;
	stroke-width: 2.5px;
	color: var(--color-base-1200);
}

.control-icon:has(use[href*="tabler"]) {
	width: 14px;
	height: 14px;
}

.scroll-progress {
	position: relative;

	width: 32px;
	height: 32px;
	border-radius: var(--radius-circle);
	background-color: var(--color-base-250);
}

.progress-ring {
	position: absolute;
	z-index: 1;
	top: 6px;
	left: 6px;
	transform: rotate(-90deg);
}

.progress-ring-back {
	position: absolute;
	top: 6px;
	left: 6px;

	width: 20px;
	height: 20px;
	border: 3px solid var(--color-base-500);
	border-radius: var(--radius-circle);
}

.progress-ring-circle {
	stroke: var(--color-primary);
	stroke-dasharray: 56.55;
	stroke-dashoffset: 56.55;
	transition: stroke-dashoffset 0.3s;
}

.percentage-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);

	width: 32px;

	font-size: 10px;
	font-family: "Geist";
	text-align: center;
	color: var(--color-base-900);
}

/* ───────────────────────────────────────────────────────── */




/* ───────────────────────────────────────────────────────── */
/* 800006 : 헤더 */
/* ───────────────────────────────────────────────────────── */

.header {
	display: flex;
	flex-direction: column;

	position: relative;

	gap: 40px;
	padding: var(--gutter-container) var(--gutter-container) 20px var(--gutter-container);
}

.title-section {
	display: flex;
	align-items: center;

	gap: 10px;
}

.header-title {
	display: flex;
	flex-direction: column;

	gap: 6px;
}

.header-title-text {
	font-size: var(--font-size-l);
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-base-1200);
}

.header-btn-wrap {
	display: flex;
	align-items: stretch;

	flex-shrink: 0;

	margin-left: auto;
}

.folder-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	order: 1;
	
	border-radius: 0 var(--radius-base-m) var(--radius-base-m) 0;
	padding: 10px;
	background-color: var(--color-base-200);

	color: var(--color-primary);

	transition: background-color var(--duration);
}

.folder-btn.on {
	background-color: var(--color-primary-b2);
}

.folder-btn:hover .folder-btn-icon {
	transform: scale(1.1);
}

.folder-btn-icon {
	width: 12px;
	height: 12px;
	color: inherit;
	stroke-width: 2px;

	transition: transform var(--duration);
	will-change: transform;
}

.nav-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	gap: 6px;
	border-radius: var(--radius-base-m);
	padding: 6px 12px;
	background-color: var(--color-base-200);

	color: var(--color-base-900);

	transition: transform var(--duration), background-color var(--duration) 0.3s, color var(--duration);
}

.folder-btn + .nav-btn {
	border-right: 1px solid var(--color-base-300);
	border-radius: var(--radius-base-m) 0 0 var(--radius-base-m);
	padding: 6px 10px 6px 14px;
}

.header .nav-btn.on {
	background-color: var(--color-base-250);
}

.nav-title-text {
	font-size: var(--font-size-s);
	font-weight: 500;
}

.nav-btn-icon {
	width: var(--font-size-s);
	height: var(--font-size-s);
	color: inherit;
	stroke-width: 2.5px;
	margin: -1px;

	transition: transform var(--duration);
	will-change: transform;
}

.header .nav-btn.on .nav-btn-icon {
	transform: rotate(180deg);
}

.profile-section {
	display: flex;
	flex-direction: column;
}

.container:has(.list-empty) .profile-section, #tt-body-tag:not(:has(.tag-container .tag-item)) .profile-section {
	display: none;
}

.section-user {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.profile-section .profile-img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: var(--radius-base-l);
}

.profile-user {
	display: flex;
	align-items: center;

	gap: 4px;
	padding-left: 2px;
}

.profile-desc {
	padding-left: 2px;

	font-size: var(--font-size-s);
	color: var(--color-base-800);
}

.user-icon {
	width: var(--font-size-m);
	height: var(--font-size-m);
	color: var(--color-primary);
}


/* ───────────────────────────────────────────────────────── */




/* ───────────────────────────────────────────────────────── */
/* 800007 : 메뉴 네비게이션 */
/* ───────────────────────────────────────────────────────── */

/* 0701 공통 */

.nav-menu {
	display: flex;
	align-items: center;

	gap: 10px;

	font-family: "Rubik", "Pretendard";
}

.menu-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	aspect-ratio: 1/1;
	border-radius: var(--radius-circle);
	padding: 10px;
	background-color: var(--color-primary-b);

	color: var(--color-primary);

	transition: transform var(--duration);
	will-change: transform;
}

.menu-btn:hover, .menu-btn:active {
	transform: scale(0.9);
}

.menu-icon {
	width: 14px;
	height: 14px;
	stroke-width: 2px;
	color: inherit;
}

html[data-page="notice"] .notice-btn {
	background-color: var(--color-primary-b2);
}

#tt-body-tag .tag-btn {
	background-color: var(--color-primary-b2);
}

#tt-body-guestbook .msg-btn {
	background-color: var(--color-primary-b2);
}


/* 0702 검색 */

.search-container {
	display: flex;
	align-items: center;

	width: 130px;
	margin-left: auto;
	border-bottom: 1px solid var(--color-primary-b2);
	padding: 8px 0;
}

.search-container:hover .search-icon, .search-container:focus-within .search-icon {
	transform: scale(0.9);
}

.search-icon {
	width: var(--font-size-m);
	height: var(--font-size-m);
	color: var(--color-primary);
	stroke-width: 2px;

	transition: transform var(--duration);
	will-change: transform;
}

.search-input::placeholder {
	color: var(--color-primary);
}

.search-input {
	width: 100%;

	color: var(--color-base-800);
}

.search-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	flex-shrink: 0;
}


/* 0703 카테고리 */

.category-inner {
	display: flex;
	flex-direction: column;

	gap: 14px;
	height: 100%;
	padding: 30px;
	overflow: hidden;
}

.category {
	position: relative;

	width: calc(100% + 30px);
	height: 100%;
	margin: 10px -30px 0 0;
	padding-right: 30px;
	overflow-x: hidden;
	overflow-y: scroll;

	-ms-overflow-style: none;

	scroll-behavior: smooth;
}

.category::-webkit-scrollbar {
  width: 4px;
}

.category::-webkit-scrollbar-button:vertical:start:decrement,
.category::-webkit-scrollbar-button:vertical:start:increment {
	display: block;
	height: 20px;
}

.category::-webkit-scrollbar-button:vertical:end:decrement,
.category::-webkit-scrollbar-button:vertical:end:increment {
	display: block;
	height: 5px;
}

.category::before {
	content: "카테고리";

	display: block;

	margin-bottom: 10px;

	font-weight: 600;
	color: var(--color-base-1200);
}

.category-icon {
	width: var(--font-size);
	height: var(--font-size);
	stroke-width: 2px;
	color: var(--color-primary-b5);
}

.tt_category > li {
	display: flex;
	flex-direction: column;
}

.category .link_tit {
	display: none;
}

.category[data-view-all="1"] .link_tit {
	display: flex;

	width: fit-content;
}

.category_list {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.category_list li {
	display: flex;
	flex-direction: column;

	position: relative;
}

.category :where(.link_tit, .link_item, .link_sub_item) {
	display: flex;
	justify-content: flex-start;
	align-items: center;

	position: relative;

	gap: 6px;
	padding: 12px 0;

	font-size: var(--font-size-s);
	color: var(--color-base-1200);
	line-height: 1;
}

.category .link_sub_item {
	opacity: 0.6;

	padding: 12px 0 12px 14px;

	font-weight: 500;
}

.category .c_cnt {
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0.5;

	order: 1;
	align-self: center;
	flex-shrink: 0;

	font-size: 10px;
	font-weight: normal;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.3px;
}

html[data-page="category"] li:not(:has(.selected)) .link_tit, html[data-page="category"] li:not(:has(.selected)) .link_tit > .c_cnt {
	color: var(--color-primary);
}

.category_list > li.selected a:not(.link_sub_item) {
	color: var(--color-primary);
}

.category_list > li.selected a:not(.link_sub_item) > .c_cnt {
	color: var(--color-primary);
}

.category_list > li.selected a:not(.link_sub_item) > .sub-open-btn {
	color: var(--color-primary);
}

.category_list > li.selected a:not(.link_sub_item) > .sub-open-btn .open-icon {
	opacity: 1;
}

.category_list > li.selected a:not(.link_sub_item) > .new-icon {
	opacity: 1;
}

.sub_category_list > li.selected :is(.link_sub_item, .c_cnt) {
	color: var(--color-primary);
}

.category .sub_category_list {
	display: flex;
	flex-direction: column;

	margin: 0 0 0 8px;
	border-left: 1px solid var(--color-base-300);
}

.has-sub .link_item .c_cnt { 
	font-weight: normal;
}

.category .new-icon {
	display: flex;
	align-items: center;
	opacity: 0.5;

	flex-shrink: 0;
	order: 1;
	transform: scale(0.9);

	margin-left: 4px;

	font-size: 10px;
	font-family: "Pretendard";
}

.category .new-icon::before {
	content: "N";

	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.sub-open-btn {
	display: none;
}

.category[data-view-sub="1"] .has-sub .link_item {
	padding: 8px 0;
}

.category[data-view-sub="1"] .sub_category_list {
	display: none;
}

.category[data-view-sub="1"] .has-sub .sub-open-btn {
	display: flex;
	align-items: center;

	flex-shrink: 0;
	order: 1;

	margin-left: auto;
	padding: 6px;
}

.category[data-view-sub="1"] .has-sub .open-icon {
	opacity: 0.5;

	width: var(--font-size-s);
	height: var(--font-size-s);
	color: inherit;
	stroke-width: 2px;

	transition: transform var(--duration);
	will-change: transform;
}

.category[data-view-sub="1"] .link_sub_item .c_cnt {
	opacity: 0.5;
}

.category[data-view-sub="1"] .on .has-sub .open-icon {
	transform: rotate(-180deg);
}

.layer_tooltip {
	border-radius: var(--radius);
	background-color: var(--color-primary);
}

.layer_tooltip .inner_layer_tooltip .desc_g {
	color: var(--color-inner-primary);
}



/* ───────────────────────────────────────────────────────── */





/* ───────────────────────────────────────────────────────── */
/* 800008 : 커버 */
/* ───────────────────────────────────────────────────────── */

/* 0801 커버 - 공통 */

.cover {
	display: flex;
	flex-direction: column;

	gap: var(--cover-container-gutter);

	transition: opacity var(--duration);
}

.cover-box {
	display: flex;
	flex-direction: column;

	gap: 10px;
}

.cover-headline {
	font-size: var(--font-size-m);
	font-weight: 600;
	text-transform: capitalize;
	color: var(--color-black);
}

.cover-item[data-status="thumb"] .cover-icon {
	width: 20px !important;
	height: 20px !important;
	color: var(--color-base-500) !important;
}

.cover-img.lazyloaded + .cover-noimg {
	opacity: 0;
}

.cover-date {
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.3px;
}

.cover-module {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-base-l);
	padding: var(--padding);
	background-color: var(--color-base-100);
}


/* 0802 커버 - [공지] */

.cover-notice .cover-container {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;

	gap: var(--cover-item-gutter);
}

.cover-notice .cover-item {
	display: flex;
	flex-direction: column;

	gap: var(--cover-item-gutter);
	width: 100%;
}

.cover-notice .cover-img {
	object-fit: cover;
	border-radius: var(--radius);
}

.cover-notice .cover-item[data-sum-empty="1"] .cover-img {
	max-width: 100%;
	width: 100%;
}

.cover-notice .cover-item[data-sum-empty="1"] .cover-headline {
	display: none;
}

.cover-notice .cover-info {
	display: flex;
	flex-direction: column;

	position: relative;

	gap: 30px;
	width: 100%;
}

.cover-notice .cover-item[data-sum-empty="1"] {
	flex-shrink: 0;
	
	width: 100%;
	padding: 0;
}

.cover-notice .cover-item[data-sum-iframe="1"] .cover-info {
	width: 100%;
	padding: 0;
}

.cover-notice .cover-item[data-sum-empty="1"] .cover-info {
	display: none;
}

.cover-notice .cover-item[data-sum-iframe="1"] iframe {
	width: 100%;
	border-radius: var(--radius);
}

.cover-notice .cover-sum {
	color: var(--color-base-1100);
}

.cover-notice .cover-sum a {
	margin-right: 10px;
}

.cover-notice .cover-sum a::before {
	content: "";
	display: inline-flex;

	width: 6px;
	height: 0.9px;
	margin-right: 4px;
	background-color: var(--color-black);

	vertical-align: middle;
}

.cover-notice .notice-profile {
	display: grid;
	grid-template-columns: auto 1fr;

	gap: 0 16px;
	padding: 0 0 16px 0;
}

.cover-notice * + .notice-profile {
	padding-top: 16px;
}

.cover-notice .cover-sum b + .notice-profile {
	padding-top: 4px;
}

.cover-notice .cover-sum b {
	color: var(--color-base-1100);
}

.cover-notice .profile-category {
	color: var(--color-base-800);
}


/* 0803 커버 - [태그 클라우드] */

.cover-tag .cover-container {
	display: flex;
	flex-wrap: wrap;
	
	gap: 4px;
}

.cover-tag .cover-headline {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cover-tag .tag-more {
	font-size: var(--font-size-s);
	font-weight: normal;
	color: var(--color-base-600);
}

.cover-tag .cover-item {
	display: inline-flex;
	align-items: center;

	border-radius: var(--radius-base-m);
	padding: 8px 12px;

	color: var(--color-base-1100);
	line-height: 1;

	transition: border-color var(--duration), background-color var(--duration), color var(--duration);
}

.cover-tag .cover-item:hover {
	border-color: transparent;
	background-color: var(--color-primary-b);

	color: var(--color-primary);
}

.cover-tag .cloud1 {
	border: 0;
	background-color: var(--color-primary-b);

	font-weight: 500;
	color: var(--color-primary);
}

.cover-tag .cloud2 {
	border: 0;
	background-color: var(--color-primary-b);

	color: var(--color-primary);
}


/* 0804 커버 - [캘린더] */

.cover-calendar {
	position: relative;
}

.cover-calendar .cover-headline {
	font-size: var(--font-size-m);
}

.cover-calendar * {
	--gap: 6px;

	font-size: var(--font-size-xs);
}

.cover-calendar .cal_month { 
	display: none;
}

.cover-calendar .calendar-current {
	display: block;
	
	margin-bottom: 10px;
	padding-left: 4px;
}

.cover-calendar .calendar-nav {
	display: flex;
	align-items: center;

	position: absolute;
	top: 6px;
	right: 0;

	gap: 10px;
	padding-right: 4px;
}

.cover-calendar .calendar-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	padding: 0 4px;

	color: var(--color-base-1100);
}

.cover-calendar .cover-arrow-icon {
	width: var(--font-size);
	height: var(--font-size);
	stroke-width: 2px;
	color: inherit;
}

.cover-calendar thead > tr {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));

	gap: var(--gap);
	margin-bottom: 10px;
}

.cover-calendar thead th {
	text-transform: capitalize;
	font-size: var(--font-size);
	font-weight: 500;
	color: var(--color-base-1100);
}

.cover-calendar .cal_week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));

	gap: var(--gap);
	margin-bottom: var(--gap);
}

.cover-calendar .cal_week th, .cover-calendar .cal_week td {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	aspect-ratio: 1/1;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-circle);
	padding: 4px;
	background-color: var(--color-base-150);

	color: var(--color-base-1100);
}

.cover-calendar .cal_week td:has(a) {
	position: relative;

	border-color: transparent;
	background-color: var(--color-primary-b);

	font-size: 10px;
	color: transparent;

	transition: background-color var(--duration);
}

.cover-calendar .cal_week td:has(a[data-status="1"]) {
  background-color: var(--color-primary-b);
}

.cover-calendar .cal_week td:has(a[data-status="2"]) {
  background-color: var(--color-primary-b2);
}

.cover-calendar .cal_week td:has(a[data-status="3"]) {
  background-color: var(--color-primary-b3);
}

.cover-calendar .cal_week td.cal_day[data-dday="1"] {
	border-color: transparent;
	background-color: var(--color-primary-b);

	color: transparent;
}

.cover-calendar .cal_week td.cal_day[data-dday="1"]::before {
	content: attr(data-icon);

	position: absolute;

	font-size: var(--font-size-xxl);
	color: #000;
}

.cover-calendar .calendar-emoji {
	position: absolute;

	font-size: var(--font-size-xxl);
	color: #000;
} 

.cover-calendar .cal_day .calendar-emoji + a {
	opacity: 0;

	position: relative;
}

.cover-calendar .cal_day a {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: var(--radius-circle);
}

.cover-calendar:not([data-click="1"]) .cal_day a {
	pointer-events: none;
}


/* 0805 커버 - [해빗 트래커] */

.cover-habitTracker {
	gap: 16px;
}

.cover-habitTracker .cover-container {
	display: flex;
	flex-direction: column;

	gap: 10px;
}

.cover-habitTracker .cover-item {
  display: flex;
	justify-content: space-between;

	gap: 10px;
	padding-bottom: 10px;
}

.cover-habitTracker .cover-item:not(:last-child) {
	border-bottom: 1px solid var(--border-color);
}

.cover-habitTracker .cover-title {
	flex-shrink: 0;

	font-weight: 500;
	color: var(--color-base-1100);
}

.cover-habitTracker .cover-tracker {
	display: flex;
	justify-content: flex-end;
	align-items: center;

	gap: 10px;
}

.cover-habitTracker .cover-icon {
	width: 16px;
	height: 16px;
	color: var(--color-base-250);
}

.cover-habitTracker .cover-icon[data-mode="on"] {
	color: var(--color-primary-b5);
}

.cover-habitTracker .article-count {
	display: none;
}


/* 0806 커버 - [디데이] */

.cover-dday {
	display: flex;
	flex-direction: column;

	position: relative;
}

.cover-dday .cover-container {
	display: grid;
	grid-template-columns: repeat(var(--cover-link-column), minmax(0, 1fr));

	gap: var(--cover-item-gutter);
}

.cover-dday .cover-item {
	display: flex;
	flex-direction: column;

	width: 100%;

	transition: background-color var(--duration), border-color var(--duration);
}

.cover-dday .cover-item:hover {
	border-color: transparent;
	background-color: var(--color-primary-b);
}

.cover-dday .cover-date {
	opacity: 0.4;

	margin-bottom: 6px;

	font-size: var(--font-size-xs);
	line-height: 1;
}

.cover-dday .cover-title {
	margin-bottom: 14px;
	
	font-size: var(--font-size-m);
	font-weight: 500;
	color: var(--color-base-1100);
	line-height: 1.2;
}

.cover-dday .dday-icon {
	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: auto;

	font-size: 40px;
}

.cover-dday .cover-sum {
	display: flex;
	align-items: center;

	flex-shrink: 0;

	width: -moz-fit-content;
	width: fit-content;
	margin: 0 auto;
	border-radius: var(--radius-base-m);
	padding: 4px 8px;
	background-color: var(--color-primary-b2);

	line-height: 1;
} 

.cover-dday .d-day {
	font-size: var(--font-size-s);
	color: var(--color-primary);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.3px;
}


/* 0807 커버 - [링크] */

.cover-link .cover-container {
	display: grid;
	grid-template-columns: repeat(var(--cover-link-column), minmax(0, 1fr));

	gap: var(--cover-item-gutter);
}

.cover-link .cover-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;

	position: relative;

	min-height: 150px;
}

.cover-link .cover-item:hover {
	border-color: transparent;
	background-color: var(--color-primary-b);
}

.cover-link .cover-item[data-link="empty"] {
	cursor: default;
}

.cover-link .cover-title-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;

	width: 100%;
}

.cover-link .cover-arrow-icon {
	flex-shrink: 0;
	position: absolute;
	right: var(--padding);
	bottom: var(--padding);

	width: calc(var(--font-size-xxl) + 4px);
	height: calc(var(--font-size-xxl) + 4px);
	stroke-width: 2.5px;
	border-radius: var(--radius-circle);
	padding: 8px;
	background-color: var(--color-base-200);
	color: var(--color-base-700);

	transition: color var(--duration), opacity var(--duration), transform var(--duration);
}

.cover-link .cover-item:hover .cover-arrow-icon {
	opacity: 0;

	transform: translateX(10px);
}

.cover-link .cover-item[data-link="empty"] .cover-arrow-icon {
	display: none;
}

.cover-link .cover-link-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: 4px;
}

.cover-link .cover-icon {
	display: flex;
	justify-content: center;
	align-items: center;

	flex-shrink: 0;

	width: var(--font-size-xxl);
	height: var(--font-size-xxl);
	stroke-width: 2px;
	color: var(--color-primary-b4);

	line-height: 1;

	transition: color var(--duration);
}

.cover-link .cover-title {
	margin-top: auto;

	font-size: var(--font-size-m);
	font-weight: 500;
	color: var(--color-primary);
	text-transform: uppercase;

	transition: color var(--duration);
}

.cover-link .cover-sum {
	opacity: 0.4;

	font-size: var(--font-size-s);
	font-family: "Rubik", "Pretendard";

	transition: color var(--duration);
}


/* 0808 커버 - [트위터] */

.cover-twitter .cover-container {
	position: relative;
	z-index: 2;

	padding: 10px 10px 0 10px;
	overflow: hidden;
}


/* 0809 커버 - [문서] */

.cover-document .cover-container {
	display: grid;
	grid-template-columns: repeat(var(--cover-document-column), minmax(0, 1fr));

	gap: var(--cover-item-gutter);
}

.cover-document .cover-item {
	display: flex;

	position: relative;

	min-height: 220px;
	background: linear-gradient(225deg, transparent 28px, var(--color-base-100) 0);

	transition: transform var(--duration);
}

.cover-document .cover-item::before {
	content: "";

	position: absolute;
	top: -1px;
	right: -1px;

	width: 41px;
	height: 41px;
	border-bottom: 1px solid var(--color-base-200);
	border-left: 1px solid var(--color-base-200);
	border-radius: 0 0 0 var(--radius-base-s);
	box-shadow: -3px 3px 7px -5px var(--color-base-500);
	background: linear-gradient(to left bottom, var(--color-white) 50%, var(--color-base-200) 0, var(--color-base-150)) no-repeat 100% 0;
}

.cover-document .cover-thumb {
	width: 50px;
	height: 50px;
	margin: auto 0 auto auto;
}

.cover-document .cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-base-l);
}

.cover-document .cover-info {
	display: flex;
	flex-direction: column;

	gap: 4px;
	width: 100%;
}

.cover-document .cover-cate {
	opacity: 0.4;

	font-size: var(--font-size-s);
}

.cover-document .cover-title {
	display: -webkit-box;

	overflow: hidden;

	font-weight: 500;
	color: var(--color-base-1100);
	-webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.cover-document .cover-date {
	display: inline-flex;
	align-items: center;
	opacity: 0.4;

	flex-shrink: 0;

	margin-top: -4px;

	font-size: var(--font-size-xs);
}


/* 0810 커버 - [웹진] */

.cover-webzine .cover-container {
	display: flex;
	flex-direction: column;

	gap: var(--cover-item-gutter);
}

.cover-webzine .cover-item {
	display: flex;

	position: relative;

	gap: 40px;
	width: 100%;

	transition: background-color var(--duration), border-color var(--duration);
}

.cover-webzine .cover-item:hover {
	border-color: transparent;
	background-color: var(--color-primary-b);
}

.cover-webzine .cover-thumb {
	display: flex;

	flex-shrink: 0;

	position: relative;

	width: 60px;
	height: 60px;
	aspect-ratio: 1/1;
	margin-left: auto;
	border-radius: var(--radius-base-l);
	overflow: hidden;

	transition: border-color var(--duration);
}

.cover-webzine .cover-item:hover .cover-thumb {
	border-color: transparent;
}

.cover-webzine .cover-item:not([data-status="thumb"]) .cover-thumb {
	display: none;
}

.cover-webzine .cover-img {
	position: relative;
	z-index: 2;

	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
}

.cover-webzine .cover-noimg {
	display: none;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;
	background-color: var(--color-white);

	transition: all var(--duration);
}

.cover-webzine .cover-noimg .cover-icon {
	display: block;

	width: var(--font-size);
	height: var(--font-size);
	color: var(--color-primary-b4);
	stroke-width: 1.5px;
}

.cover-webzine .cover-img+.cover-noimg {
	display: flex;
	
	position: absolute;
	z-index: 1;
	top: 0;
}

.cover-webzine .cover-info {
	display: flex;
	flex-direction: column;

	gap: 6px;
	overflow: hidden;
}

.cover-webzine .cover-title {
	width: 100%;

	font-weight: 500;
	color: var(--color-base-1100);

	transition: color var(--duration);
}

.cover-webzine .cover-cate {
	display: inline-flex;
	align-items: center;

	width: fit-content;
	border-radius: var(--radius-base-m);

	color: var(--color-primary-b4);
	font-size: var(--font-size-s);

	transition: color var(--duration);
}

.cover-webzine .cover-sum {
	display: -webkit-box;
	opacity: 0.4;

	width: 100%;
	margin-top: auto;
	overflow: hidden;

	font-size: var(--font-size-s);
	line-height: 1.5;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;

	transition: color var(--duration);
}


/* 0811 커버 - [심플] */

.cover-simple .cover-container {
	display: flex;
	flex-direction: column;

	padding: 14px;
}

.cover-simple .cover-item {
	position: relative;

	border-radius: var(--radius-base-m);
	padding: 0 14px;

	transition: background-color var(--duration), border-color var(--duration);
}

.cover-simple .cover-item:hover {
	border-color: transparent;
	background-color: var(--color-primary-b);
}

.cover-simple .cover-info {
	display: flex;
	align-items: center;

	gap: 10px;
	padding: 14px 0;
	overflow: hidden;

	transition: border-color var(--duration);
}

.cover-simple .cover-item:not(:first-of-type) .cover-info {
	border-top: 1px solid var(--border-color);
}

.cover-simple .cover-item:hover .cover-info, .cover-simple .cover-item:hover + .cover-item  .cover-info  {
	border-color: transparent;
}

.cover-simple .cover-title {
	width: 100%;
	overflow: hidden;

	font-weight: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-base-1100);

	transition: color var(--duration);
}

.cover-simple .cover-item:hover .cover-title {
	color: var(--color-primary);
}

.cover-simple .cover-date {
	opacity: 0.4;

	flex-shrink: 0;

	margin-left: auto;
	
	font-size: var(--font-size-xs);
	transition: color var(--duration);
}

.cover-simple .cover-item:hover .cover-date {
	color: var(--color-primary);
}


/* 0812 커버 - [갤러리] */

.cover-gallery {
	position: relative;
}

.cover-gallery .cover-container {
	display: grid;
	grid-template-columns: repeat(var(--cover-gallery-column), minmax(0, 1fr));

	position: relative;
	z-index: 2;

	gap: var(--cover-item-gutter);
	transition: transform var(--duration);
}

.cover-gallery .cover-item {
	display: flex;

	position: relative;

	width: 100%;
	aspect-ratio: var(--cover-gallery-ratio);
	border-radius: var(--radius-base-m);
	overflow: hidden;

	line-height: 1;

	transition: transform var(--duration);
}

.cover-gallery .cover-thumb {
	position: relative;

	width: 100%;
	height: 100%;
	border-radius: 0;
	padding: 0;
	overflow: hidden;
}

.cover-gallery .cover-item[data-status="thumb"] .cover-thumb {
	border: 0;
}

.cover-gallery .cover-img {
	position: relative;
	z-index: 2;
	transform: scale(1.2) translateY(-10px);

	width: 100%;
	height: 100%;
	object-fit: cover;

	transition: transform var(--duration), opacity var(--duration);
	will-change: transform;
}

.cover-gallery .cover-item:hover .cover-img {
	transform: scale(1.2) translateY(0px);
}

.cover-gallery .cover-noimg {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;

	transition: all var(--duration);
}

.cover-gallery .cover-noimg .cover-icon {
	display: block;

	width: max(10%, 20px);
	height: max(10%, 20px);
	color: var(--color-primary-b4);
	stroke-width: 1.5px;

	transition: opacity var(--duration);
}

.cover-gallery .cover-item:not([data-status="thumb"]):hover .cover-icon {
	opacity: 0.3;
}

.cover-gallery .cover-img+.cover-noimg {
	position: absolute;
	z-index: 1;
	top: 0;
}

.cover-gallery .cover-info {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;

	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	
	gap: 6px;
	width: 100%;
	height: 100%;
	padding: 20px;

	background-color: transparent;
	color: var(--color-base-100);

	transition: background-color calc(var(--duration) + 0.3s);
}

.cover-gallery .cover-item:hover .cover-info {
	background-color: #0005;
}

.cover-gallery .cover-item:not([data-status="thumb"]) .cover-info {
	background-color: transparent;

	color: var(--color-base-1000);
}

.cover-gallery .cover-item .cover-info > * {
	transform: translateY(20px);

	transition: opacity var(--duration), transform var(--duration);
}

.cover-gallery .cover-item:hover .cover-info > * {
	transform: translateY(0px);

	transition: opacity var(--duration) 0.1s, transform var(--duration) 0.1s;
}

.cover-gallery .cover-title {
	display: -webkit-box;
	opacity: 0;

	width: 100%;
	overflow: hidden;

	font-weight: 500;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.2;

	transition: opacity 0.7s;
}

.cover-gallery .cover-item:hover .cover-title {
	opacity: 1;
}

.cover-gallery .cover-date {
	opacity: 0;

	width: 100%;

	font-size: var(--font-size-xs);

	transition: opacity 0.7s;
}

.cover-gallery .cover-item:hover .cover-date {
	opacity: 0.6;
}


/* 0813 커버 - [갤러리2] */

.cover-gallery2 .cover-container {
	display: grid;
	grid-template-columns: repeat(var(--cover-gallery-column2), minmax(0, 1fr));

	position: relative;

	gap: max(20px, var(--cover-item-gutter)) var(--cover-item-gutter);
}

.cover-gallery2 .cover-item {
	display: flex;
	flex-direction: column;

	position: relative;

	gap: 6px;

	transition: transform var(--duration);
}

.cover-gallery2 .cover-item:last-child {
	margin-bottom: max(20px, var(--cover-item-gutter));
}

.cover-gallery2 .cover-thumb {
	position: relative;
	flex-shrink: 0;

	width: 100%;
	aspect-ratio: var(--cover-gallery-ratio2);
	border: 1px solid var(--color-base-200);
	border-radius: var(--radius-base-m);
	padding: 30%;
	background-color: var(--color-base-150);
	overflow: hidden;

	transition: background-color var(--duration), border-color var(--duration);
}

.cover-gallery2 .cover-item:hover .cover-thumb {
	border-color: transparent;
	background-color: var(--color-primary-b);
}

.cover-gallery2 .cover-img {
	position: relative;
	z-index: 2;

	width: 100%;
	aspect-ratio: var(--cover-gallery-ratio2);
	object-fit: cover;
	border-radius: var(--radius-base-s);

	transition: all var(--duration);
}

.cover-gallery2 .cover-noimg {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	aspect-ratio: var(--cover-gallery-ratio2);

	transition: all var(--duration);
}

.cover-gallery2 .cover-item:hover .cover-noimg {
	filter: none;
}

.cover-gallery2 .cover-noimg .cover-icon {
	display: block;

	width: 24px;
	height: 24px;
	color: var(--color-primary-b4);
	stroke-width: 1.5px;
}

.cover-gallery2 .cover-img+.cover-noimg {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}

.cover-gallery2 .cover-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	position: relative;

	gap: 4px;
	padding: 0 4px;

	line-height: 1.2;
}

.cover-gallery2 .cover-title {
	display: block;

	width: 100%;
	overflow: hidden;

	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-base-1000);
}

.cover-gallery2 .cover-cate {
	font-size: var(--font-size-xs);
	color: var(--color-base-500);
}


/* 0814 커버 - [슬라이드 갤러리] */

.cover-slideGallery {
	position: relative;

	border-radius: var(--radius-base-l);
	overflow: hidden;
}

.cover-slideGallery .cover-container {
	display: flex;

	position: relative;

	gap: 0;
	transition: transform var(--duration);
}

.cover-slideGallery .cover-item {
	display: flex;

	flex-shrink: 0;
	position: relative;

	width: 100%;
	aspect-ratio: 3/2;
	padding: 0;
	overflow: hidden;

	line-height: 1;

	transition: transform var(--duration);
}

.cover-slideGallery .cover-item[data-sum-iframe="1"] {
	aspect-ratio: 16/9;
}

.cover-slideGallery .cover-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	position: absolute;
	top: 0;
	left: 0;

	gap: 20px;
	width: 100%;
	padding: 20px;
}

.cover-slideGallery .cover-arrow-btn {
	display: flex;
	align-items: center;
	opacity: 0;

	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);

	border-radius: var(--radius-circle);
	padding: 4px;
	background-color: var(--color-white);

	color: var(--color-base-1200);

	transition: opacity var(--duration)
}

.cover-slideGallery .cover-container[data-length="1"] .cover-arrow-btn {
	display: none;
}

.cover-slideGallery .cover-arrow-btn.left-btn {
	left: 20px;
}

.cover-slideGallery .cover-arrow-btn.right-btn {
	right: 20px;
}

.cover-slideGallery:hover .cover-arrow-btn {
	opacity: 0.4;
}

.cover-slideGallery .cover-arrow-icon {
	width: var(--font-size-m);
	height: var(--font-size-m);
	stroke-width: 1.5px;
	color: inherit;
}

.cover-slideGallery .cover-headline {
	position: relative;
	z-index: 5;

	margin-left: auto;
	overflow: hidden;
	
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-base-1000);
}

.cover-slideGallery .cover-item[data-status="thumb"] .cover-headline {
	font-size: var(--font-size);
	color: var(--color-base-100);
}

.cover-slideGallery .cover-thumb {
	position: relative;

	width: 100%;
	height: 100%;
	overflow: hidden;
}

.cover-slideGallery .cover-img {
	position: relative;
	z-index: 2;

	width: 100%;
	height: 100%;
	object-fit: cover;

	transition: all var(--duration);
}

.cover-slideGallery .cover-noimg {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;

	transition: all var(--duration);
}

.cover-slideGallery .cover-noimg .cover-icon {
	display: block;

	width: 10%;
	height: 10%;
	color: var(--color-primary-b4);
	stroke-width: 1.5px;
}

.cover-slideGallery .cover-img+.cover-noimg {
	position: absolute;
	z-index: 1;
	top: 0;
}

.cover-slideGallery .cover-info {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	opacity: 1;

	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	
	gap: 6px;
	width: 100%;
	height: 100%;
	padding: 20px;

	background-color: #0003;
	color: var(--color-base-100);

	transition: opacity calc(var(--duration) + 0.3s), background-color calc(var(--duration) + 0.3s);
}

.cover-slideGallery .cover-item:hover .cover-info {
	opacity: 0;

	background-color: transparent;
}

.cover-slideGallery .cover-item:has(.lazyload) .cover-info {
	background-color: transparent;
}

.cover-slideGallery .cover-item:has(.lazyloaded) .cover-info {
	background-color: #0003;
}

.cover-slideGallery .cover-item[data-sum-iframe="1"] .cover-info {
	opacity: 1 !important;

	padding: 0;
}

.cover-slideGallery .cover-item:not([data-status="thumb"]) .cover-info {
	background-color: transparent;

	color: var(--color-base-1000);
}

.cover-slideGallery .cover-info > * {
	transition: transform var(--duration), opacity var(--duration);
}

.cover-slideGallery .cover-item:hover .cover-info > * {
	opacity: 0;

	transform: translateY(30px);

	transition: transform var(--duration), opacity var(--duration);
}

.cover-slideGallery .cover-title {
	display: -webkit-box;

	width: 100%;
	overflow: hidden;

	font-size: var(--font-size-m);
	font-weight: normal;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-height: 1.2;
}

.cover-slideGallery .cover-item[data-sum-iframe="1"] .cover-title {
	display: none;
}

.cover-slideGallery .cover-item[data-sum-iframe="1"] .cover-header {
	display: none;
}

.cover-slideGallery .cover-date {
	opacity: 0.6;

	width: 100%;

	font-size: var(--font-size-xs);
}

.cover-slideGallery .cover-sum:not(:empty) + .cover-date {
	display: none;
}

.cover-slideGallery .cover-sum {
	display: -webkit-box;

	opacity: 0.7;

	width: 100%;
	overflow: hidden;

	font-size: var(--font-size-xs);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-height: 1.4;
}

.cover-slideGallery .cover-sum:empty {
	display: none;
}

.cover-slideGallery .cover-item[data-sum-iframe="1"] .cover-sum {
	opacity: 1;
}


/* 0815 커버 - [그리드 갤러리] */

.cover-gridGallery {
	position: relative;
}

.cover-gridGallery .cover-container {
	display: grid;
	position: relative;
	z-index: 2;

	gap: var(--cover-item-gutter);

	transition: transform var(--duration);
}

.cover-gridGallery .cover-container:has(:nth-child(3)):not(:has(:nth-child(4)))  {
	height: 300px;
}

.cover-gridGallery .cover-container[data-type="1"]:has(:nth-child(3)):not(:has(:nth-child(4)))  {
	grid-template-areas: "item1 item2" "item1 item3";
}

.cover-gridGallery .cover-container[data-type="2"]:has(:nth-child(3)):not(:has(:nth-child(4)))  {
	grid-template-areas: "item1 item3" "item2 item3";
}

.cover-gridGallery .cover-container[data-type="3"]:has(:nth-child(3)):not(:has(:nth-child(4)))  {
	grid-template-areas: "item1 item1" "item2 item3";
}

.cover-gridGallery .cover-container[data-type="4"]:has(:nth-child(3)):not(:has(:nth-child(4)))  {
	grid-template-areas: "item1 item2" "item3 item3";
}

.cover-gridGallery .cover-container:has(:nth-child(6)):not(:has(:nth-child(7)))  {
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
}

.cover-gridGallery .cover-container[data-type="1"]:has(:nth-child(6)):not(:has(:nth-child(7))) {
	grid-template-areas: "item1 item1 item2" "item1 item1 item3" "item4 item5 item6";
}

.cover-gridGallery .cover-container[data-type="2"]:has(:nth-child(6)):not(:has(:nth-child(7))) {
	grid-template-areas: "item1 item3 item3" "item2 item3 item3" "item4 item5 item6";
}

.cover-gridGallery .cover-container[data-type="3"]:has(:nth-child(6)):not(:has(:nth-child(7))) {
	grid-template-areas: "item1 item2 item3" "item4 item4 item5" "item4 item4 item6";
}

.cover-gridGallery .cover-container[data-type="4"]:has(:nth-child(6)):not(:has(:nth-child(7))) {
	grid-template-areas: "item1 item2 item3" "item4 item6 item6" "item5 item6 item6";
}

.cover-gridGallery .cover-container[data-type="1"]:has(:nth-child(9)):not(:has(:nth-child(10))) {
	grid-template-areas: "item1 item1 item2" "item1 item1 item3" "item4 item5 item6" "item7 item8 item9" "item10 item11 item12";
}

.cover-gridGallery .cover-container[data-type="2"]:has(:nth-child(9)):not(:has(:nth-child(10))) {
	grid-template-areas: "item1 item3 item3" "item2 item3 item3" "item4 item5 item6" "item7 item8 item9" "item10 item11 item12";
}

.cover-gridGallery .cover-container[data-type="3"]:has(:nth-child(9)):not(:has(:nth-child(10))) {
	grid-template-areas: "item1 item2 item3" "item4 item4 item5" "item4 item4 item6" "item7 item8 item9" "item10 item11 item12";
}

.cover-gridGallery .cover-container[data-type="4"]:has(:nth-child(9)):not(:has(:nth-child(10))) {
	grid-template-areas: "item1 item2 item3" "item4 item6 item6" "item5 item6 item6" "item7 item8 item9" "item10 item11 item12";
}

.cover-gridGallery .cover-container[data-type="1"]:has(:nth-child(12)):not(:has(:nth-child(13))) {
	grid-template-areas: "item1 item1 item2" "item1 item1 item3" "item4 item5 item6" "item7 item8 item9" "item10 item11 item12";
}

.cover-gridGallery .cover-container[data-type="2"]:has(:nth-child(12)):not(:has(:nth-child(13))) {
	grid-template-areas: "item1 item3 item3" "item2 item3 item3" "item4 item5 item6" "item7 item8 item9" "item10 item11 item12";
}

.cover-gridGallery .cover-container[data-type="3"]:has(:nth-child(12)):not(:has(:nth-child(13))) {
	grid-template-areas: "item1 item2 item3" "item4 item4 item5" "item4 item4 item6" "item7 item8 item9" "item10 item11 item12";
}

.cover-gridGallery .cover-container[data-type="4"]:has(:nth-child(12)):not(:has(:nth-child(13))) {
	grid-template-areas: "item1 item2 item3" "item4 item6 item6" "item5 item6 item6" "item7 item8 item9" "item10 item11 item12";
}

.cover-gridGallery .cover-item {
	display: flex;

	position: relative;

	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--radius-base-m);
	padding: 0;
	overflow: hidden;

	line-height: 1;
}

.cover-gridGallery .cover-item:nth-of-type(1) {
	grid-area: item1;
}

.cover-gridGallery .cover-item:nth-of-type(2) {
	grid-area: item2;
}

.cover-gridGallery .cover-item:nth-of-type(3) {
	grid-area: item3;
}

.cover-gridGallery .cover-item:nth-of-type(4) {
	grid-area: item4;
}

.cover-gridGallery .cover-item:nth-of-type(5) {
	grid-area: item5;
}

.cover-gridGallery .cover-item:nth-of-type(6) {
	grid-area: item6;
}

.cover-gridGallery .cover-item:nth-of-type(7) {
	grid-area: item7;
}

.cover-gridGallery .cover-item:nth-of-type(8) {
	grid-area: item8;
}

.cover-gridGallery .cover-item:nth-of-type(9) {
	grid-area: item9;
}

.cover-gridGallery .cover-item:nth-of-type(10) {
	grid-area: item10;
}

.cover-gridGallery .cover-item:nth-of-type(11) {
	grid-area: item11;
}

.cover-gridGallery .cover-item:nth-of-type(12) {
	grid-area: item12;
}

.cover-gridGallery .cover-item {
	aspect-ratio: 1/1;
}

.cover-gridGallery .cover-item:not([data-status="thumb"]) {
	border: 1px solid var(--border-color);
}

.cover-gridGallery .cover-thumb {
	position: relative;

	width: 100%;
	height: 100%;
	overflow: hidden;
}

.cover-gridGallery .cover-img {
	position: relative;
	z-index: 2;

	width: 100%;
	height: 100%;
	object-fit: cover;

	transition: transform var(--duration);
	will-change: transform;
}

.cover-gridGallery .cover-noimg {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;
}

.cover-gridGallery .cover-img+.cover-noimg {
	position: absolute;
	z-index: 1;
	top: 0;
}

.cover-gridGallery .cover-noimg .cover-icon {
	display: block;

	width: max(10%, 20px);
	height: max(10%, 20px);
	color: var(--color-primary-b4);
	stroke-width: 1.5px;

	transition: opacity var(--duration);
}

.cover-gridGallery .cover-item:not([data-status="thumb"]):hover .cover-icon {
	opacity: 0.3;
}

.cover-gridGallery .cover-item:hover .cover-img {
	transform: scale(1.1);
}

.cover-gridGallery .cover-info {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	opacity: 0;

	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	
	gap: 6px;
	width: 100%;
	height: 100%;
	padding: 20px;

	background-color: transparent;
	color: var(--color-base-100);

	transition: opacity var(--duration), background-color var(--duration);
}

.cover-gridGallery .cover-item:hover .cover-info {
	opacity: 1;

	background-color: #0005;
}

.cover-gridGallery .cover-item:not([data-status="thumb"]) .cover-info {
	background-color: transparent;

	color: var(--color-base-1000);
}

.cover-gridGallery .cover-title {
	width: 100%;
	overflow: hidden;

	font-weight: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.2;
}

.cover-gridGallery .cover-date {
	opacity: 0.6;

	font-size: var(--font-size-xs);
}

.cover-gridGallery .cover-sum:not(:empty) + .cover-date {
	display: none;
}

.cover-gridGallery .cover-sum {
	display: -webkit-box;

	opacity: 0.7;

	width: 100%;
	overflow: hidden;

	font-size: var(--font-size-xs);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.4;

	transition: all var(--duration);
}

.cover-gridGallery .cover-sum:empty {
	display: none;
}


/* 0816 커버 - [피드] */

.cover-feed .cover-container {
	display: flex;
	flex-direction: column;

	gap: var(--cover-item-gutter);
}

.cover-feed .cover-item {
	display: flex;
	flex-wrap: wrap;

	gap: var(--padding);
	position: relative;
	
	transition: background-color var(--duration), border-color var(--duration);
}

.cover-feed .cover-item:hover {
	border-color: transparent;
	background-color: var(--color-primary-b);
}

.cover-feed .cover-thumb {
	display: flex;
	justify-content: center;
	align-items: center;

	flex-shrink: 0;
	position: relative;

	width: calc(var(--content-width) * 0.16);
	aspect-ratio: 1/1;
	margin: 0 0 10px auto;
	border-radius: var(--radius-base-l);
	overflow: hidden;
}

.cover-feed .cover-item:not([data-status="thumb"]) .cover-thumb {
	display: none;
}

.cover-feed .cover-img {
	position: relative;
	z-index: 2;

	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cover-feed .cover-noimg {
	display: none;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;
	background-color: var(--color-base-100);

	transition: all var(--duration);
}

.cover-feed .cover-noimg .cover-icon {
	display: block;

	width: max(10%, 20px);
	height: max(10%, 20px);
	color: var(--color-primary-b4);
	stroke-width: 1.5px;
}

.cover-feed .cover-img+.cover-noimg {
	display: flex;

	position: absolute;
	z-index: 1;
	top: 0;
}

.cover-feed .cover-info {
	display: flex;
	flex-direction: column;
	align-content: flex-start;

	gap: 2px;
	width: 100%;
}

.cover-feed .cover-cate {
	display: flex;
	align-items: center;
	opacity: 0.4;

	font-size: var(--font-size-xs);
	line-height: 1;

	transition: color var(--duration);
}

.cover-feed .cover-item:hover .cover-cate {
	color: var(--color-primary);
}

.cover-feed .cover-title {
	display: block;

	margin-top: -2px;

	font-weight: 500;
	color: var(--color-base-1100);

	transition: color var(--duration);
}

.cover-feed .cover-item:hover .cover-title {
	color: var(--color-primary);
}

.cover-feed .cover-sum {
	opacity: 0.4;

	width: 100%;
	overflow: hidden;

	font-size: var(--font-size-s);
	text-overflow: ellipsis;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

.cover-feed .cover-sum:not(:empty) + .cover-thumb:has(.cover-img) {
	margin-top: var(--padding);
}

.cover-feed .cover-sum {
	display: -webkit-box;
	
	width: 100%;
	overflow: hidden;

	line-height: 1.5;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

.cover-feed .cover-user-info {
	display: flex;
	align-items: center;

	gap: 10px;
	width: 100%;
	border-top: 1px solid var(--border-color);
	padding-top: 20px;

	transition: border-color var(--duration);
}

.cover-feed .cover-item:hover .cover-user-info {
	border-color: var(--color-primary-b);
}

.cover-feed .cover-user-img {
	flex-shrink: 0;

	width: 30px;
	height: 30px;
	aspect-ratio: 1/1;
	object-fit: cover;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-circle);
}

.cover-feed .cover-user-wrap {
	display: flex;
	flex-direction: column;

	gap: 2px;

	line-height: 1;
}

.cover-feed .cover-user-name {
	opacity: 0.8;

	font-size: var(--font-size-s);
}

.cover-feed .cover-user-date {
	opacity: 0.4;

	flex-shrink: 0;

	font-size: var(--font-size-xs);
}

/* ───────────────────────────────────────────────────────── */



/* ───────────────────────────────────────────────────────── */
/* 800009 : 목록 스타일 */
/* ───────────────────────────────────────────────────────── */


/* 0901 목록 스타일 - 공통*/

.search-list {
	display: flex;
	flex-direction: column;

	gap: 16px;
}

.list-conform {
	display: flex;

	gap: 6px;
	
	font-size: var(--font-size);
	text-transform: uppercase;
}

.list-conform-text {
	font-weight: 600;
}

.list-cnt {
	flex-shrink: 0;

	margin-left: auto;

	font-size: var(--font-size-s);
	color: var(--color-base-500);
}

.list-item {
	display: block;
}

.list-img {
	object-fit: cover;
}

.list-profile-img {
	display: none;
}

.list-date {
	font-size: var(--font-size-s);

	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.4px;
}

.list-sum {
	display: none;
}

.list-cate {
	display: none;
}

.list-icon {
	display: none;
}

.list-item[data-status="thumb"] .list-icon {
	width: 20px !important;
	height: 20px !important;
	color: var(--color-base-500) !important;
}

.list-img.lazyloaded + .list-noimg {
	opacity: 0;
}

.list-info-icon {
	display: none;
}

.search-list .new-icon {
	display: flex;
	justify-content: center;
	align-items: center;

	flex-shrink: 0;

	font-size: var(--font-size-xxs);
	font-weight: normal;
	color: var(--color-base-800);
	text-transform: uppercase;
}

.search-list .new-icon::before {
	content: "N";
}

#tt-body-tag .list-conform::before {
	content: "#";
}

.content:has(.search-list .list-empty) {
	display: flex;
	flex-direction: column;
	justify-content: center;

	margin: auto;
}

.content:has(.search-list .list-empty) .list-conform {
	display: none;
}

.list-empty, .tag-empty {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;
	padding: 130px 60px;
	overflow: hidden;

	color: var(--color-base-1000);
	text-align: center;
	line-height: 1.6;
}

.search-list .list-empty + .list-container {
	display: none; 
}

.list-empty-icon {
	width: 40px;
	height: 40px;
	stroke-width: 1.5px;
	color: var(--color-primary);
}

.list-empty-title {
	display: block;

	margin-bottom: 30px;

	font-size: var(--font-size-xl);
	color: var(--color-primary);
}

.list-item-cnt {
	opacity: 0.4;

	flex-shrink: 0;

	font-size: var(--font-size-xs);
}

.list-item-cnt:not(:empty)::before {
	content: "+";
}

.list-item-cnt:empty {
	display: none !important;
}


/* 0902 목록 스타일 - [심플] */

.list-simple .list-item-wrap {
	display: block;

	margin: 0 -14px;
	border-radius: var(--radius-base-m);
	padding: 0 14px;

	transition: background-color var(--duration), padding var(--duration), transform var(--duration);
}

.list-simple .list-item-wrap:hover {
	background-color: var(--color-primary-b);
}

.list-simple .list-info :is(.list-title, .list-date, .new-icon) {
	transition: color var(--duration);
}

.list-simple .list-item-wrap:hover :is(.list-title, .list-date, .new-icon) {
	color: var(--color-primary);
}

.list-simple .list-item {
	padding: 14px 0;

	transition: border-color var(--duration);
}

.list-simple .list-item-wrap:not(:first-child) .list-item {
	border-top: 1px solid var(--color-base-300);
}

.list-simple .list-item-wrap:hover .list-item {
	border-color: transparent;
}

.list-simple .list-item-wrap:hover + .list-item-wrap .list-item {
	border-color: transparent;
}

.list-simple .list-info {
	display: flex;
	justify-content: space-between;
	align-items: center;

	gap: 10px;
}

.list-simple .list-title {
	display: flex;
	align-items: center;

	flex-grow: 1;

	gap: 4px;
	min-width: 0;
}

.list-simple .secret-icon {
	flex-shrink: 0;

	width: var(--font-size);
	height: var(--font-size);
	stroke-width: 2px;
}

.list-simple .title-content {
	overflow: hidden;

	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-simple .list-item-cnt {
	flex-shrink: 0;
}

.list-simple .list-icon {
	flex-shrink: 0;
}

.list-simple .list-cate-date {
	flex-shrink: 0;
}

.list-simple .list-date {
	font-size: var(--font-size-xs);
	color: var(--color-base-500);
}

.list-simple .list-user-wrap {
	flex-shrink: 0;
}

.list-simple :is(.list-thumb, .list-cate, .list-user-name, .list-user-img) {
	display: none;
}


/* 0903 목록 스타일 - [문서] */

.list-document .list-container {
	display: grid;
	grid-template-columns: repeat(var(--list-document-column), minmax(0, 1fr));

	gap: var(--list-document-gutter);
}

.list-document .list-item {
	position: relative;

	height: 100%;
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: var(--padding);
	background: linear-gradient(225deg, transparent 28px, var(--color-base-100) 0);
}

.list-document .list-item::before {
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;

	width: 32px;
	height: 32px;
	border-bottom: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
	border-radius: 0 0 0 var(--radius-base-s);
	box-shadow: -3px 3px 7px -5px var(--color-base-500);
	background: linear-gradient(to left bottom, var(--color-white) 50%, var(--color-base-250) 0, var(--color-white)) no-repeat 100% 0;
}

.list-document .list-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;

	height: 100%;
}

.list-document .list-thumb {
	display: none;
}

.list-document .list-item:not([data-status="thumb"]) .list-thumb {
	display: none;
}

.list-document .list-item-cnt:empty {
	display: none;
}

.list-document .list-title {
	display: flex;
	align-items: center;

	order: -2;
	position: relative;

	gap: 4px;
	margin-right: 40px;

	font-weight: 600;

	transition: all var(--duration);
}

.list-document .title-content {
	font-weight: 500;
}

.list-document .new-icon {
	position: absolute;
	top: 0;
	right: -10px;

	color: var(--color-primary);
}

.list-document .new-icon::before {
	content: "＊";
}

.list-document .list-sum {
	display: -webkit-box;

	order: -1;

	width: 100%;
	margin: 20px 0 30px 0;
	overflow: hidden;

	color: var(--color-base-900);
	line-height: 1.4;
	text-align: justify;
	text-overflow: ellipsis;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}

.list-document .list-sum:empty {
	display: none;
}

.list-document .list-item[data-type="secret"] .list-sum {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	gap: 16px;
}

.list-document .secret-icon {
	flex-shrink: 0;

	width: 22px;
	height: 22px;
	margin-top: 4px;

	transition: all var(--duration);
}

.list-document .list-user-name {
	font-size: var(--font-size-xs);
	color: var(--color-base-1000);
}

.list-document .list-date {
	font-size:  var(--font-size-xs);
	color: var(--color-base-500);
}


/* 0904 목록 스타일 - [메모] */

.list-memo .list-container {
	display: flex;
	flex-direction: column;

	gap: 30px;
}

.list-memo .list-item {
	display: flex;

	gap: 16px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-base-l);
	padding: 20px;
	background-color: var(--color-base-100);
	overflow: hidden;

	transition: background-color var(--duration), border-color var(--duration);
}

.list-memo .list-item:hover {
	border-color: transparent;
	background-color: var(--color-primary-b);
}

.list-memo .list-profile-img {
	display: block;

	flex-shrink: 0;

	width: 40px;
	height: 40px;
	object-fit: cover;
	margin-top: 2px;
	border-radius: var(--radius-base-m);
	background-color: var(--color-primary-b4);
}

.list-memo .list-info {
	display: flex;
	flex-direction: column;

	width: 100%;
	overflow: hidden;
}

.list-memo .list-thumb {
	display: none;
}

.list-memo .list-noimg {
	display: none;
}

.list-memo .list-img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.list-memo .list-item-cnt:empty {
	display: none;
}

.list-memo .list-title {
	display: flex;
	align-items: center;

	position: relative;

	gap: 4px;

	font-weight: 600;

	transition: color var(--duration);
}

.list-memo .title-content {
	font-weight: 500;
}

.list-memo .list-item:hover .list-title {
	color: var(--color-primary);
}

.list-memo .list-date {
	opacity: 0.4;

	font-size: var(--font-size-xs);
}

.list-memo .new-icon {
	display: none;
}

.list-memo .list-sum {
	display: block;

	order: 1;

	width: 100%;
	margin-top: 10px;
}

.list-memo .list-sum iframe {
	border-radius: var(--radius-base-l);
}

.list-slideMemo .list-sum iframe {
	background-color: var(--color-base-250);
}

.list-slideMemo .list-sum iframe.lazyloaded {
	background-color: transparent;
}

.list-memo .list-sum[data-iframe-size="1"] iframe {
	width: 100%;
}

.list-memo .list-sum figure[data-ke-type='video'][data-ke-style='alignCenter'] {
	font-size: inherit;
	line-height: 1;
}

.list-memo .list-sum figure[data-index="last"][data-ke-type='video'][data-ke-style='alignCenter'] {
	margin-bottom: 0;
}

.list-memo .list-sum img {
	border-radius: var(--radius-base-l);
}

.list-memo .list-item[data-type="secret"] .list-sum {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0.8;

	gap: 10px;
	aspect-ratio: 16/9;
	margin-left: -20px;

	color: var(--color-base-1200);
}

.list-memo .secret-icon {
	opacity: 0.4;

	flex-shrink: 0;

	width: 30px;
	height: 30px;
	color: var(--color-base-1200);

	transition: all var(--duration);
}


/* 0905 목록 스타일 - [슬라이드 메모] */ 

.list-slideMemo {
	--item-padding: 16px;
}

.list-slideMemo .list-container {
	display: flex;
	flex-direction: column;
}

.list-slideMemo .list-item-wrap {
	display: flex;
	align-items: flex-end;

	position: relative;

	margin: 0 calc(-1 * var(--item-padding) + 4px) 4px calc(-1 * var(--item-padding));
	border-radius: var(--radius-base-m);
	padding: 0 var(--item-padding);

	transition: color var(--duration), background-color var(--duration), transform var(--duration);
	cursor: pointer;
}

.list-slideMemo .list-item-wrap.on {
	transform: scale(0.98);

	background-color: var(--color-primary-b);

	color: var(--color-primary);
}

.list-slideMemo .list-item {
	display: flex;
	align-items: flex-end;

	gap: 20px;
	width: 100%;
	padding: var(--item-padding) 0;
	overflow: hidden;
}

.list-slideMemo .list-item-wrap:not(:first-child) .list-item {
	border-top: 1px solid var(--border-color);
}

.list-slideMemo .list-item-wrap.on + .list-sum + .list-item-wrap .list-item {
	border-color: transparent;
}

.list-slideMemo .list-item-wrap.on .list-item {
	border-color: transparent;
}

.list-slideMemo .link-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	
	margin: 0 0 10px auto;
	border-radius: var(--radius-base-m);
	padding: 6px;
	overflow: hidden;
	
	color: inherit;
}

.list-slideMemo .link-btn::before {
	content: "";

	opacity: 0.05;

	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	background-color: var(--color-base-1200);
}

.list-slideMemo .link-icon {
	position: relative;
	z-index: 1;

	width: 12px;
	height: 12px;
	stroke-width: 2px;

	color: var(--color-base-900);

	transition: transform var(--duration), opacity var(--duration);
}

.list-slideMemo .link-btn:hover .link-icon {
	opacity: 0;

	transform: translateX(5px);
}

.list-slideMemo .list-thumb {
	display: flex;

	flex-shrink: 0;
	position: relative;

	width: 50px;
	aspect-ratio: 1/1;
	border: 1px solid var(--color-base-200);
	border-radius: var(--radius-base-m);
	overflow: hidden;

	transform: border-color var(--duration);
}

.list-slideMemo .list-item-wrap.on .list-thumb {
	border-color: transparent;
}

.list-slideMemo .list-img {
	position: relative;
	z-index: 2;
	
	width: 100%;
	height: 100%;
}

.list-slideMemo .list-noimg {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
	background-color: #00000005;

	transition: background-color var(--duration);
}

.list-slideMemo .list-item-wrap.on .list-noimg {
	background-color: var(--color-primary-b);
}

.list-slideMemo .list-noimg .list-icon {
	display: block;

	width: 20px;
	height: 20px;
	color: var(--color-primary-b4);
	stroke-width: 1.5px;
}

.list-slideMemo .list-img+.list-noimg {
	position: absolute;
	z-index: 1;
	top: 0;
}

.list-slideMemo .list-info {
	display: flex;
	flex-direction: column;

	gap: 2px;
	padding: 0 50px 4px 0;
	overflow: hidden;
}

.list-slideMemo .list-title {
	display: flex;
	align-items: center;

	position: relative;

	gap: 6px;
	width: 100%;
	overflow: hidden;

	line-height: 1.2;
}

.list-slideMemo .title-content {
	overflow: hidden;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-slideMemo .list-item-cnt:empty {
	display: none;
}

.list-slideMemo .list-date {
	opacity: 0.4;

	font-size: var(--font-size-xs);
}

.list-slideMemo .new-icon {
	opacity: 0.4;

	color: inherit;
}

.list-slideMemo .list-sum {
	display: none;

	position: fixed;
	transform: translateX(-50%);

	width: var(--content-width);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-base-m);
	box-shadow: var(--shadow-100);
	background-color: var(--color-white);
}

.list-slideMemo .list-sum-bar {
	border-radius: var(--radius-base-m) var(--radius-base-m) 0 0;
}

.list-slideMemo .list-sum-title {
	margin-left: auto;
	padding: 0 16px 0 42px;
	overflow: hidden;

	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-slideMemo .list-sum-title img, .list-slideMemo .list-sum-title span {
	display: none;
}

.list-slideMemo .list-sum-circle {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 12px;
	height: 12px;
	margin-left: auto;
	margin-right: 10px;
	border-radius: var(--radius-circle);
	background-color: var(--color-base-500);

	transition: background-color var(--duration);
}

.list-slideMemo .list-sum .contents_style {
	min-height: 200px;
	max-height: 400px;
	border-radius: 0 0 var(--radius-base-m) var(--radius-base-m);
	padding: 20px 14px 20px 20px;
	background-color: var(--color-white);
	overflow-y: scroll;
}

.list-slideMemo .list-sum .contents_style[data-type="secret"] {
	display: flex;
	justify-content: center;
	align-items: center;

	padding: 90px 50px 30px 50px;
	overflow: hidden;
	
	color: var(--color-base-800);
}

.list-slideMemo .secret-link-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100px;
	margin: 0 auto 90px auto;
	border-radius: var(--radius-base-m);
	padding: 10px;
	background-color: var(--color-primary-b2);

	font-size: var(--font-size-s);
	color: var(--color-primary);
	line-height: 1;
}

.list-slideMemo .list-sum iframe {
	border-radius: var(--radius-base-m);
}

.list-slideMemo .list-sum iframe {
	background-color: var(--color-base-150);
}

.list-slideMemo .list-sum iframe.lazyloaded {
	background-color: transparent;
}

.list-slideMemo .list-sum[data-iframe-size="1"] iframe {
	width: 100%;
}

.list-slideMemo .list-sum figure[data-ke-type='video'][data-ke-style='alignCenter'] {
	font-size: inherit;
	line-height: 1;
}

.list-slideMemo .list-sum figure[data-index="last"][data-ke-type='video'][data-ke-style='alignCenter'] {
	margin-bottom: 0;
}

.list-slideMemo .list-sum img {
	border-radius: var(--radius-base-m);
}

.list-slideMemo .list-item[data-type="secret"] .list-sum {
	display: flex;
	align-items: center;

	gap: 4px;
	border: 0;
	border-radius: 0;
	padding: 0;

	font-size: var(--font-size-s);
	color: var(--color-base-500);
	line-height: 1.2;
}

.list-slideMemo .secret-icon {
	flex-shrink: 0;

	width: var(--font-size);
	height: var(--font-size);

	transition: all var(--duration);
}

.list-slideMemo :is(.list-user-name, .list-user-img) {
	display: none;
}

.list-slideMemo .list-item[data-type="secret"] .list-user-wrap {
	display: none;
}


/* 0906 목록 스타일 - [갤러리] */

.list-gallery .list-container {
	display: grid;
	grid-template-columns: repeat(var(--list-gallery-column), minmax(0, 1fr));

	gap: var(--list-gallery-gutter);
}

.list-gallery .list-item-wrap {
	aspect-ratio: var(--list-gallery-ratio);
}

.list-gallery .list-item {
	display: flex;

	position: relative;

	width: 100%;
	aspect-ratio: var(--list-gallery-ratio);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-base-m);
	background-color: var(--color-base-150);
	overflow: hidden;
}

.list-gallery .list-item:hover .list-img {
	transform: scale(1.05);
}

.list-gallery .list-thumb {
	display: block;

	width: 100%;
	height: 100%;
	aspect-ratio: var(--list-gallery-ratio);
}

.list-gallery .list-noimg {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
}

.list-gallery .list-noimg .list-icon {
	display: block;

	width: 15%;
	height: 15%;
	color: var(--color-primary-b4);
	stroke-width: 1.5px;

	transition: opacity var(--duration);
}

.list-gallery .list-item:not([data-status="thumb"]):hover .list-icon {
	opacity: 0.3;
}

.list-gallery .list-img+.list-noimg {
	position: absolute;
	z-index: 1;
	top: 0;
}

.list-gallery .list-img {
	display: block;

	position: relative;
	z-index: 2;
	transform: scale(1.2);

	width: 100%;
	height: 100%;
	object-fit: cover;

	transition: transform var(--duration), opacity var(--duration);
	will-change: transform;
}

.list-gallery .list-info {
	display: flex;
	opacity: 0;
	flex-wrap: wrap;
	align-content: flex-end;
	justify-content: flex-start;

	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;

	gap: 2px;
	width: 100%;
	height: 100%;
	padding: var(--padding);
	background: linear-gradient(0deg, #0009 0%, #0000 50%);;

	color: var(--color-white);

	transition: opacity var(--duration);
}

.list-gallery .list-item:hover .list-info {
	opacity: 1;
}

.list-gallery .list-item:not([data-status="thumb"]) .list-info {
	background-color: transparent;
}

.list-gallery .list-cate {
	display: none;
}

.list-gallery .list-title {
	display: inline;
	opacity: 0;

	position: relative;
	transform: translateY(30px);

	width: 100%;

	font-size: var(--font-size-s);
	line-height: 1.5;

	transition: transform var(--duration), opacity var(--duration);
}

.list-gallery .list-item:hover .list-title {
	opacity: 1;

	transform: translateY(0);
}

.list-gallery .list-date {
	display: none;
}

.list-gallery .title-content {
	display: inline;

	font-weight: 500;
	white-space: normal;
}

.list-gallery .list-item-cnt {
	display: inline;

	color: var(--color-white);
}

.list-gallery .list-item:not([data-status="thumb"]) .list-info .list-item-cnt {
	color: var(--color-black);
}

.list-gallery .list-item-cnt:empty {
	display: none;
}

.list-gallery .new-icon {
	display: inline-flex;

	width: 14px;
	height: 14px;
	aspect-ratio: 1/1;
	border-radius: var(--radius-circle);
	background-color: #fff4;

	font-size: 10px;
	color: var(--color-base-100);
	line-height: 1;
}

.list-gallery .new-icon::before {
	position: relative;
	z-index: 2;

	transform: scale(0.77);
}

.list-gallery .list-sum {
	display: none
}

.list-gallery .list-user-wrap {
	display: none;
}


/* 0907 목록 스타일 - [갤러리2] */

.list-gallery2 .list-container {
	display: grid;
	grid-template-columns: repeat(var(--list-gallery-column2), minmax(0, 1fr));
	grid-template-rows: 1fr;

	gap: max(20px, var(--list-gallery-gutter2)) var(--list-gallery-gutter2);
}

.list-gallery2 .list-item {
	display: flex;
	flex-direction: column;

	position: relative;

	gap: min(6px, calc(var(--list-gallery-gutter2) / 2)) var(--list-gallery-gutter2);
}

.list-gallery2 .list-item-wrap:last-child {
	margin-bottom: max(20px, var(--list-gallery-gutter2));
}

.list-gallery2 .list-thumb {
	position: relative;
	flex-shrink: 0;

	width: 100%;
	aspect-ratio: var(--list-gallery-ratio2);
	border-radius: var(--radius-base-m);
	padding: 30%;
	background-color: var(--color-base-200);
	overflow: hidden;
}

.list-gallery2 .list-noimg {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	aspect-ratio: var(--list-gallery-ratio2);
}

.list-gallery2 .list-noimg .list-icon {
	display: block;

	width: max(35%, 20px);
	height: max(35%, 20px);
	color: var(--color-primary-b4);
	stroke-width: 1.5px;
}

.list-gallery2 .list-img+.list-noimg {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}

.list-gallery2 .list-img {
	display: block;

	position: relative;
	z-index: 2;

	width: 100%;
	aspect-ratio: var(--list-gallery-ratio2);
	object-fit: cover;
	border-radius: var(--radius-base-s);

	transition: all var(--duration);
}

.list-gallery2 .list-info {
	display: flex;
	flex-direction: column;

	padding: 0 4px;
}

.list-gallery2 .list-cate {
	display: none;
}

.list-gallery2 .list-title {
	display: flex;
	align-items: center;

	position: relative;

	gap: 4px;
	width: 100%;
	overflow: hidden;

	color: var(--color-base-1000);
	line-height: 1.5;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-gallery2 .title-content {
	display: inline;

	overflow: hidden;

	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-gallery2 .list-item-cnt {
	display: inline;

	color: inherit;
}

.list-gallery2 .list-item-cnt:empty {
	display: none;
}

.list-gallery2 .new-icon {
	display: inline;

	color: var(--color-base-800);
}

.list-gallery2 .list-date {
	font-size: var(--font-size-xs);
	color: var(--color-base-600);
}

.list-gallery2 .list-sum {
	display: none
}


/* 0908 목록 스타일 - [갤러리3] */

.list-gallery3 .list-container {
	display: grid;
	grid-template-columns: repeat(var(--list-gallery-column3), minmax(0, 1fr));

	gap: 1px;
}

.list-gallery3 .list-item-wrap {
	aspect-ratio: var(--list-gallery-ratio3);
}

.list-gallery3 .list-item {
	display: flex;

	position: relative;

	width: 100%;
	aspect-ratio: var(--list-gallery-ratio3);
	border: 2px solid transparent;
	border-radius: var(--radius-base-m);
	background-color: var(--color-base-150);
	overflow: hidden;

	transition: border-color var(--duration);
}

.list-gallery3 .list-item:hover {
	border-color: var(--color-primary);
}

.list-gallery3 .list-item:hover .list-img {
	transform: scale(1.2);
}

.list-gallery3 .list-thumb {
	display: block;

	width: 100%;
	aspect-ratio: var(--list-gallery-ratio3);
	overflow: hidden;
}

.list-gallery3 .list-noimg {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	aspect-ratio: var(--list-gallery-ratio3);
}

.list-gallery3 .list-noimg .list-icon {
	display: block;

	width: 15%;
	height: 15%;
	color: var(--color-primary-b4);
	stroke-width: 1.5px;

	transition: opacity var(--duration);
}

.list-gallery3 .list-img+.list-noimg {
	position: absolute;
	z-index: 1;
	top: 0;
}

.list-gallery3 .list-img {
	display: block;

	position: relative;
	z-index: 2;
	transform: scale(1.05);

	width: 100%;
	aspect-ratio: var(--list-gallery-ratio3);
	object-fit: cover;

	transition: transform var(--duration), opacity var(--duration);
	will-change: transform;
}

.list-gallery3 .list-info {
	display: flex;
	opacity: 1;
	justify-content: flex-start;
	align-items: flex-end;

	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;

	gap: 2px;
	width: 100%;
	aspect-ratio: var(--list-gallery-ratio3);
	padding: 16px;
	background: linear-gradient(0deg, #00000050 0%, #00000000 50%);

	color: var(--color-white);

	transition: opacity var(--duration);
}

.list-gallery3 .list-thumb:has(.lazyload) + .list-info, .list-gallery3 .list-thumb:has(.lazyloading) + .list-info {
	background: none;
}

.list-gallery3 .list-item:hover .list-info {
	opacity: 0;
}

.list-gallery3 .list-cate {
	display: none;
}

.list-gallery3 .list-title {
	display: flex;
	align-items: center;

	position: relative;

	gap: 4px;
	width: 100%;

	font-size: var(--font-size-s);
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.5;

	transition: transform var(--duration), opacity var(--duration) 0.2s;
}

.list-gallery3 .list-item:hover .list-title {
	opacity: 0;

	transform: translateY(20px);
}

.list-gallery3 .title-content {
	overflow: hidden;
	
	text-overflow: ellipsis;
}

.list-gallery3 .list-item-cnt {
	flex-shrink: 0;
}

.list-gallery3 .list-item-cnt:empty {
	display: none;
}

.list-gallery3 .new-icon {
	display: inline-flex;

	width: 14px;
	height: 14px;
	aspect-ratio: 1/1;
	border-radius: var(--radius-circle);
	background-color: #fff4;

	font-size: 8px;
	color: var(--color-base-100);
	line-height: 1;
}

.list-gallery3 .list-item:not([data-status="thumb"]) .new-icon {
	background-color: #aaa4;
}

.list-gallery3 .list-cate-date {
	display: none;
}

.list-gallery3 .list-sum {
	display: none
}

.list-gallery3 .list-user-wrap {
	display: none;
}



/* 0909 목록 스타일 - [웹진] */

.list-webzine .list-container {
	display: flex;
	flex-direction: column;

	--webzine-img-size: 70px;
}

.list-webzine .list-item-wrap {
	display: block;

	margin: 0 -20px;
	border-radius: var(--radius-base-l);
	padding: 0 20px;

	transition: background-color var(--duration), transform var(--duration);
	will-change: transform;
}

.list-webzine .list-item-wrap:hover {
	background-color: var(--color-primary-b);

	transform: scale(0.98);
}

.list-webzine .list-item {
	display: flex;
	
	position: relative;

	gap: 30px;
	padding: 24px 0;

	transition: border-color var(--duration);
}

.list-webzine .list-item-wrap:not(:first-child) .list-item {
	border-top: 1px solid var(--color-base-300);
}

.list-webzine .list-item-wrap:hover .list-item {
	border-color: transparent;
}

.list-webzine .list-item-wrap:hover + .list-item-wrap .list-item {
	border-color: transparent;
}

.list-webzine .list-thumb {
	position: relative;
	flex-shrink: 0;
	order: 1;

	margin-left: auto;
}

.list-webzine .list-item:not([data-status="thumb"]) .list-thumb {
	display: none;
}

.list-webzine .list-img {
	display: block;

	position: relative;
	z-index: 2;

	width: var(--webzine-img-size);
	height: var(--webzine-img-size);
	border-radius: var(--radius-base-l);
	object-fit: cover;
}

.list-webzine .list-noimg {
	display: none;
}

.list-webzine .list-img+.list-noimg {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	position: absolute;
	z-index: 1;
	top: 0;

	width: var(--webzine-img-size);
	height: var(--webzine-img-size);
	border-radius: var(--radius);
	background-color: #00000006;
}

.list-webzine .list-item[data-type="secret"] .list-noimg {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: var(--webzine-img-size);
	height: var(--webzine-img-size);
	border-radius: var(--radius);
	background-color: #00000006;
}

.list-webzine .list-noimg .list-icon {
	display: block;

	width: 24px;
	height: 24px;
	color: var(--color-primary-b4);
	stroke-width: 1.5px;
}

.list-webzine .list-info {
	display: flex;
	flex-direction: column;

	flex-grow: 1;

	gap: 3px;
	min-width: 0;
}

.list-webzine .list-title {
	display: flex;
	align-items: center;

	gap: 6px;
	width: 100%;
	overflow: hidden;

	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;

	transition: all var(--duration);
}

.list-webzine .new-icon {
	transition: color var(--duration);
}

.list-webzine .list-item:hover :is(.list-title, .new-icon, .secret-icon) {
	color: var(--color-primary);
}

.list-webzine .title-content {
	overflow: hidden;

	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-webzine .secret-icon {
	flex-shrink: 0;

	width: var(--font-size);
	height: var(--font-size);
	stroke-width: 2px;

	transition: color var(--duration);
}

.list-webzine .list-item-cnt {
	font-weight: normal;
}

.list-webzine .list-cate-date {
	display: flex;
	align-items: center;
	opacity: 0.4;

	gap: 10px;

	font-size: var(--font-size-xs);
}

.list-webzine .list-date {
	display: flex;
	align-items: center;

	gap: 4px;

	font-size: inherit;
	color: inherit;

	transition: color var(--duration);
}

.list-webzine .list-cate {
	display: flex;
	align-items: center;

	gap: 4px;

	font-size: inherit;
	text-transform: capitalize;
	color: inherit;

	transition: color var(--duration);
}

.list-webzine .list-sum {
	display: -webkit-box;
	opacity: 0.7;

	margin-top: auto;
	overflow: hidden;

	font-size: var(--font-size-s);
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;

	transition: color var(--duration);
}

.list-webzine .list-item[data-type="secret"] .list-sum {
	display: flex;
	align-items: center;

	gap: 4px;
}


/* 0910 목록 스타일 - [웹진2] */

.list-webzine2 .list-container {
	display: flex;
	flex-direction: column;

	gap: 10px;
}

.list-webzine2 .list-item {
	display: flex;
	flex-wrap: wrap;


	position: relative;
	will-change: transform;

	gap: var(--padding);
	border: 1px solid var(--color-base-200);
	border-radius: var(--radius);
	padding: var(--padding);
	background-color: var(--color-base-100);
	overflow: hidden;

	transition: border-color var(--duration), background-color var(--duration), transform var(--duration);
}

.list-webzine2 .list-item:hover {
	transform: scale(1.03);

	border-color: transparent;
	background-color: var(--color-primary-b);
}

.list-webzine2 .list-thumb {
	display: flex;
	justify-content: center;
	align-items: center;

	flex-shrink: 0;
	position: relative;

	width: calc(var(--content-width) * 0.16);
	aspect-ratio: 1/1;
	margin: 38px 0 -24px auto;
	border-radius: var(--radius-base-l);
	overflow: hidden;
}

.list-webzine2 .list-item:not([data-status="thumb"]) .list-thumb {
	display: none;
}

.list-webzine2 .list-img {
	position: relative;
	z-index: 2;

	width: 100%;
	height: 100%;
	object-fit: cover;
}

.list-webzine2 .list-noimg {
	display: none;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;
	background-color: #00000004;

	transition: all var(--duration);
}

.list-webzine2 .list-noimg .list-icon {
	display: block;

	width: max(10%, 20px);
	height: max(10%, 20px);
	color: var(--color-primary-b4);
	stroke-width: 1.5px;
}

.list-webzine2 .list-img+.list-noimg {
	display: flex;

	position: absolute;
	z-index: 1;
	top: 0;
}

.list-webzine2 .list-info {
	display: flex;
	flex-direction: column;

	gap: 2px;
	width: 100%;
	padding-top: 30px;
}

.list-webzine2 .list-title {
	display: flex;
	align-items: center;

	position: absolute;
	top: var(--padding);

	gap: 6px;
	width: calc(100% - (var(--padding) * 2));
	overflow: hidden;

	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-webzine2 .title-content {
	overflow: hidden;

	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-base-1100);
}

.list-webzine2 .secret-icon {
	flex-shrink: 0;

	width: var(--font-size);
	height: var(--font-size);
	stroke-width: 2px;
}

.list-webzine2 .list-sum {
	display: -webkit-box;

	opacity: 0.7;

	width: 100%;
	overflow: hidden;

	font-size: var(--font-size-s);
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.list-webzine2 .list-sum:not(:empty) + .list-thumb:has(.list-img) {
	margin-top: var(--padding);
}

.list-webzine2 .list-cate-date {
	display: flex;
	align-items: center;
	opacity: 0.4;

	gap: 6px;
}

.list-webzine2 .list-cate {
	display: flex;
	align-items: center;

	font-size: var(--font-size-xs);
	line-height: 1;
}

.list-webzine2 .list-date {
	display: flex;
	align-items: center;

	flex-shrink: 0;

	font-size: var(--font-size-xs);
}

.list-webzine2 .list-date::before {
	content: "";

	display: flex;
	align-items: center;

	width: 4px;
	height: 0.9px;
	margin-right: 6px;
	border-radius: var(--radius-circle);
	background-color: var(--color-black);
}

/* ───────────────────────────────────────────────────────── */




/* ───────────────────────────────────────────────────────── */
/* 800010 : 본문 */
/* ───────────────────────────────────────────────────────── */

/* 1001 본문 - 공통 */

html[data-page="article"] .header {
	display: none;
}

html[data-page="article"] .profile-section {
	display: none;
}

html[data-page="article"] .content {
	justify-content: flex-start;
}

.article {
	padding-bottom: 70px;

	color: var(--color-black);
}

.article-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

html[data-page="article"] .nav-btn {
	transform: rotateY(180deg);
	
	margin-top: 2px;
	border: 0;
	aspect-ratio: 1/1;
	border-radius: var(--radius-circle);
	padding: 10px;
	background-color: var(--color-base-200);

	color: var(--color-black);
}

html[data-page="article"] .nav-btn.on {
	background-color: var(--color-primary-b);

	color: var(--color-primary);
}

html[data-page="article"] .nav-btn-icon {
	width: var(--font-size);
	height: var(--font-size);
	color: inherit;
	stroke-width: 1.5px;
	margin: unset;
}

.back-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	margin: 2px 0 0 0;
	aspect-ratio: 1/1;
	border-radius: var(--radius-circle);
	padding: 10px;
	background-color: var(--color-base-200);

	color: var(--color-black);
}

.article-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;

	gap: 6px;
	margin: 24px 0 30px 0;
	
	line-height: 1.2;
}

.article-title {
	width: 100%;

	font-size: var(--font-size-l);
	font-weight: 500;
	color: var(--color-black)
}

.article-date-cate {
	display: inline-flex;

	gap: 10px;
	width: 100%;

	font-size: var(--font-size-s);
	color: var(--color-base-800);

	transition: transform var(--duration), opacity var(--duration);
}

.article-cate {
	display: flex;
	align-items: center;

	gap: 6px;
}

.article-cate::before {
	content: "";
	display: flex;
	justify-content: center;
	align-items: center;

	width: 6px;
	height: 1px;
	margin-right: 6px;
	background-color: var(--color-base-800);
}

.article-content {
	margin-bottom: var(--padding);
}

.contents_style {
	font-size: var(--article-font-size);
	font-family: "Pretendard";
	color: var(--color-base-1100);
}


/* 1002 본문 - [플로팅 네비게이션] */

.article-nav {
	display: flex;
	align-items: center;

	position: fixed;
	z-index: 10;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);

	gap: 40px;

	border: 1px solid #00000009;
	border-radius: 20px;
	box-shadow: 0px 2px 6px #0001;
	padding: 8px 20px;
	background-color: var(--color-white);
}

.article-more {
	display: flex;
	align-items: center;

	position: relative;

	gap: 20px;
}

.more-btn {
	display: flex;
	justify-content: center;
	align-items: center;
}

.article-more-box {
	overflow: hidden;

	transition: opacity var(--duration);
}

.article-more-box:not(.opacity-1) {
	display: none;
}

.article .article-more-box {
	height: 100%;
}

.article-more-container {
	display: flex;

	gap: 10px;
	width: max-content;
	border: 1px solid var(--color-base-300);
	border-radius: var(--radius-base-s);
	padding: 4px 10px;
	background-color: var(--color-base-200);
	overflow: hidden;

	text-align: center;
}

.article .article-more-container {
	height: 100%;
}

.more-item {
	display: flex;
	align-items: center;

	transition: all var(--duration);
}

.report-btn {
	display: flex;
	justify-content: center;
	align-items: center;
}

.more-item-icon {
	width: var(--font-size);
	height: var(--font-size);
	stroke-width: 2px;
	color: var(--color-base-900);
}

.more-item:hover {
	opacity: 0.4;
}

:is(#tt-body-index, #tt-body-search, #tt-body-category, #tt-body-tag) .article-paging {
	display: none;
}

.article-paging {
	display: flex;
	align-items: center;

	gap: 10px;
	margin-left: auto;

	line-height: 1;
}

.article-paging .paging-icon {
	width: 14px;
	height: 14px;
	color: var(--color-base-800);
}


/* 1003 본문 - [에디터] */


/* 100301 에디터 - 리스트 */
:is(ol, ul)[data-ke-list-type] {
	padding-left: 16px;
}


/* 100302 에디터 - 배경색 */
:is(.contents_style, .notice-content) article span[style*="background-color"] {
	border-radius: 3px;
	padding: 0 6px;
}

/* 100303 에디터 - 밑줄 */
:is(.contents_style, .notice-content) u {
	background: linear-gradient(to top, var(--color-primary-b2) 30%, transparent 30%);

	text-decoration: none;
}

/* 100304 에디터 - 인용 */
:is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) :is(blockquote, blockquote p) {
	margin: 20px auto 0;
	
	font-size: inherit;
}

/* 인용1 */
:is(#tt-body-page, #tt-body-category, #tt-body-tag, #tt-body-index, #tt-body-search) blockquote[data-ke-style='style1'] {
	position: relative;

	padding-top: 24px;
	background: none;

	font-size: calc(var(--article-font-size) + 4px);
	text-align: center;
	letter-spacing: -0.5px;
	line-height: 1.5;
}

blockquote[data-ke-style='style1']::before {
	content: "“";

	display: block;

	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);

	font-size: 44px;
	font-family: "Prata";
	line-height: 1;
}

blockquote[data-ke-style='style1'] span {
	display: block;

	font-family: inherit !important;
	text-align: center;
}

/* 인용2 */
:is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) blockquote[data-ke-style='style2'] {
	border-left: 1px solid var(--color-base-400);
	padding: 0 0 0 20px;

	transition: color var(--duration), border-color var(--duration);
}

:is(#tt-body-index, #tt-body-page) blockquote[data-ke-style='style2']:hover {
	border-left-color: var(--color-primary-b3);

	color: var(--color-primary);
}


/* 인용3 */
blockquote[data-ke-style='box'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) blockquote[data-ke-style='box'], blockquote[data-ke-style='style3'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) blockquote[data-ke-style='style3'] {
	border: 0;
	border-radius: var(--radius-base-m);
	background-color: var(--color-base-150);

	transition: background-color var(--duration), color var(--duration);
}

:is(blockquote[data-ke-style='box'], :is(#tt-body-index, #tt-body-page) blockquote[data-ke-style='box'], blockquote[data-ke-style='style3'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) blockquote[data-ke-style='style3']):hover {
	background-color: var(--color-primary-b);

	color: var(--color-primary);
}


/* 100305 에디터 - 더보기 */

:is(div[data-ke-type='moreLess'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) div[data-ke-type='moreLess']) {
	display: flex;
	flex-direction: column;

	position: relative;
}

:is(div[data-ke-type='moreLess'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) div[data-ke-type='moreLess']) .btn-toggle-moreless {
	display: flex;
	align-items: center;

	position: relative;

	gap: 4px;
	width: -moz-fit-content;
	width: fit-content;
	border: 1px solid transparent;
	border-radius: var(--radius-base-s);
	padding: 10px 13px;
	background-color: var(--color-base-150);

	font-size: inherit;
	font-weight: 600;
	color: var(--color-base-800);
	line-height: 1;

	transition: border-color var(--duration), color var(--duration), background-color var(--duration);
}

.btn-toggle-moreless::before {
	content: "→";

	margin-right: 2px;

	transition: transform var(--duration), background-color var(--duration);
}

:is(div[data-ke-type='moreLess'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) div[data-ke-type='moreLess']) .btn-toggle-moreless:hover {
	background-color: var(--color-primary-b);

	color: var(--color-primary);
}

.btn-toggle-moreless:hover::before {
	transform: rotate(90deg);
}

:is(div[data-ke-type='moreLess'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) div[data-ke-type='moreLess']).open .btn-toggle-moreless {
	border-color: var(--color-base-300);
	border-bottom-color: transparent;
	border-radius: var(--radius-base-s) var(--radius-base-s) 0 0;
	background-color: var(--color-white);
}

:is(div[data-ke-type='moreLess'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) div[data-ke-type='moreLess']).open .btn-toggle-moreless:hover {
	border-color: var(--color-base-300);
	background-color: var(--color-white);

	color: var(--color-base-800);
}

.open .btn-toggle-moreless::before {
	transform: rotate(90deg);
}

.open .btn-toggle-moreless:hover::before {
	transform: rotate(0);
}

:is(figure[data-ke-type='opengraph'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph']) {
	margin-top: 4px;
}

:is(div[data-ke-type='moreLess'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) div[data-ke-type='moreLess']).open .moreless-content {
	margin-top: -1px;
	border: 1px solid var(--color-base-300);
	border-radius: 0 var(--radius-base-s) var(--radius-base-s) var(--radius-base-s);
	padding: var(--padding);
	background-color: var(--color-white);
}


/* 100306 에디터 - 링크 열기 */

:is(figure[data-ke-type='opengraph'] a, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph'] a):hover :is(figure[data-ke-type='opengraph'] div.og-text p.og-title, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph'] div.og-text p.og-title) {
	color: var(--color-primary);
}

:is(figure[data-ke-type='opengraph'] a, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph'] a):hover :is(figure[data-ke-type='opengraph'] div.og-text p.og-title, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph'] div.og-text p.og-title)::before {
	background-color: var(--color-primary);
}

:is(figure[data-ke-type='opengraph'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph']) a {
	display: flex;
	justify-content: space-between;
	align-items: center;

	z-index: 0;

	width: max(100%, 400px);
	height: auto;
	border: 0;
	border-radius: var(--radius-base-l);
	background-color: var(--color-base-150);
	overflow: hidden;	
}

:is(figure[data-ke-type='opengraph'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph']) div.og-image {
	position: relative;

	flex-shrink: 0;

	width: 110px;
	height: 100%;
	aspect-ratio: 1/1;
	border-right: 1px solid var(--border-color);
}

figure[data-ke-type=opengraph] a div.og-image::before, #tt-body-page figure[data-ke-type=opengraph] a div.og-image::before, #tt-body-page .blogview_content figure[data-ke-type=opengraph] div.og-image::before {
	content: "Image \A Not found";

	display: flex;
	justify-content: center;
	align-items: center;
	background: none;

	font-size: 10px;
	line-height: 1.4;
	color: var(--color-base-600);
	text-align: center;
	text-indent: unset;
	white-space: pre;
}

:is(figure[data-ke-type='opengraph'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph']) div.og-text {
	display: flex;
	flex-wrap: wrap;
	align-content: center;

	position: static;

	flex: 1;
	gap: 4px;
	width: -moz-fit-content;
	width: fit-content;
	height: auto;
	padding: 6px var(--padding) !important;
	overflow: hidden;
}

:is(figure[data-ke-type='opengraph'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph']) div.og-text p.og-title {
	width: 100%;
	margin: 0 !important;

	font-size: var(--font-size);
	font-family: "pretendard";
	font-weight: 600;

	transition: all var(--duration);
}

:is(figure[data-ke-type='opengraph'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph']) div.og-text p.og-desc {
	width: 100%;

	font-size: var(--font-size-s);
	font-family: "pretendard";
	color: var(--color-base-800);
}

:is(figure[data-ke-type='opengraph'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph']) div.og-text p.og-host {
	display: flex;

	position: static;

	width: 100%;

	font-size: var(--font-size-s);
	font-family: "pretendard";
	color: var(--color-base-600);
}


/* 100307 에디터 - 파일 다운로드 */

:is(figure.fileblock, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure.fileblock) {
	width: fit-content;
	height: auto;
	border: 0;
	border-radius: var(--radius);
	background-color: var(--color-base-150);
	overflow: hidden;

	transition: border var(--duration);
}

:is(figure.fileblock, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure.fileblock) a {
	display: flex;
	align-items: center;

	gap: 30px;
	height: auto;
	padding: 16px 24px;
	overflow: hidden;
}

:is(figure.fileblock, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure.fileblock) .image {
	display: none;
}

:is(figure.fileblock, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure.fileblock) .desc {
	display: flex;
	flex-direction: column;
	justify-content: center;

	position: static;

	flex: 1;

	overflow: hidden;

	font-family: "Pretendard";
	color: var(--color-base-1000);
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1;
}

:is(figure.fileblock, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure.fileblock) .filename {
	height: auto;
	margin: 0;

	font-size: inherit;
	font-weight: 500;
	color: var(--color-base-1000);

	transition: color var(--duration);
}

:is(figure.fileblock .name, #tt-body-page figure.fileblock .name) {
	height: unset;
	margin-bottom: 4px;

	font-size: var(--font-size-s);
}

:is(figure.fileblock, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure.fileblock) .size {
	opacity: 0.8;

	height: auto;
	margin: 0;

	font-size: var(--font-size-xs);
	font-family: inherit;
}

:is(figure.fileblock, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure.fileblock) a::after {
	content: none
}

:is(figure.fileblock, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure.fileblock) .fileblock-icon {
	order: -1;
	flex-shrink: 0;

	width: 16px;
	height: 16px;
	stroke-width: 2.5px;
	color: var(--color-primary);

	transition: transform var(--duration);
}

:is(figure.fileblock, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure.fileblock) .fileblock-ring {
	position: absolute;
	top: 18px;
	left: 20px;
	transform: rotate(-90deg) scale(1.5);
}

:is(figure.fileblock, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure.fileblock) .fileblock-ring circle {
	color: var(--color-primary-b4);
	fill: var(--color-primary-b);
	
	transition: stroke-dashoffset 1s ease, transform var(--duration), fill var(--duration);
}
:is(figure.fileblock, :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure.fileblock) a:hover .fileblock-ring circle {
	stroke-dashoffset: 0;
	fill: var(--color-primary-b2);
}


/* 100308 에디터 - 글감 */

figure[data-ke-type="contentSearch"] {
	border: 1px solid var(--color-base-300);
	border-radius: var(--radius-base-l);
	box-shadow: none;
	background-color: var(--color-white);
	overflow: hidden;
}

html[data-border-type="1"] figure[data-ke-type="contentSearch"] {
	border: 2px solid var(--color-border-item);
}

figure[data-ke-type='contentSearch'] a {
	width: 100%;
	overflow: hidden;
}

figure[data-ke-type='contentSearch'] div.cs-info-wrap {
	width: unset;
	padding: clamp(20px, 10%, 40px) !important;
}

figure[data-ke-type='contentSearch'] .cs-desc {
	white-space: normal;
}

figure[data-ke-type=contentSearch][data-cs-kind=exhibition] div.cs-info-wrap, figure[data-ke-type=contentSearch][data-cs-kind=person] div.cs-info-wrap, figure[data-ke-type=contentSearch][data-cs-kind=music] div.cs-info-wrap {
	width: 100%;
	overflow: hidden;
	
	text-overflow: ellipsis;
	white-space: nowrap;
}

figure[data-ke-type=contentSearch][data-cs-kind=movie] div.cs-info-wrap, figure[data-ke-type=contentSearch][data-cs-kind=book] div.cs-info-wrap, figure[data-ke-type=contentSearch][data-cs-kind=tv] div.cs-info-wrap, figure[data-ke-type=contentSearch][data-cs-kind=play] div.cs-info-wrap {
	width: 100%;
	overflow: hidden;
	
	text-overflow: ellipsis;
	white-space: nowrap;	
}

figure[data-ke-type='contentSearch'] div.cs-image {
	width: 50% !important;
	height: unset !important;
	min-width: 100px !important;
	max-width: 140px !important;
	background-size: cover !important;
}


/* 100309 에디터 - 코드블럭 */

.content pre[data-ke-type="codeblock"] {
	position: relative;
}

.content pre[data-ke-type="codeblock"] .hljs{
	position: relative;

	border-radius: var(--radius-base-s);
	padding: 0;

	font-family: "Rubik", "Pretendard";
	white-space: pre-wrap;
}

.content pre .copy-btn {
	position: absolute;
	right: 20px;
	bottom: 16px;

	border-radius: var(--radius-base-s);
	padding: 4px 8px;
	background: var(--color-primary);

	font-size: var(--font-size-s);
	font-family: "Pretendard";
	color: var(--color-inner-primary);
	line-height: 1;
}

.copy-icon {
	width: 16px;
	height: 16px;
	color: var(--color-white);
	stroke-width: 2px;
}

.content .codeblock, .search-list code {
	max-height: 500px;
	margin: 3px;
	padding: 10px;
	overflow-y: scroll;

	font-family: "Rubik", "Pretendard";
}

.search-list pre[data-ke-type="codeblock"] {
	border-radius: var(--radius-base-s);
	padding: 4px;
	background-color: var(--color-base-300);
}

.content .codeblock::-webkit-scrollbar {
	width: 4px;
}

.content .codeblock::-webkit-scrollbar-track {
	background-color: transparent;
}

.content .codeblock::-webkit-scrollbar-thumb {
	border-radius: var(--radius-base-l);
}

.content .codeblock::-webkit-scrollbar-button:vertical:start:decrement,
.content .codeblock::-webkit-scrollbar-button:vertical:start:increment {
	display: block;
	height: 5px;
}

.content .codeblock::-webkit-scrollbar-button:vertical:end:decrement,
.content .codeblock::-webkit-scrollbar-button:vertical:end:increment {
	display: block;
	height: 5px;
}

.content .codeblock-line {
	display: flex;

	gap: 16px;

	counter-increment: line-index;
}

.content .codeblock-line::before {
  content: counter(line-index);

	opacity: 0.4;

	flex-shrink: 0;
}


/* 100310 에디터 - 지도 */

figure[data-ke-type='map'] {
	max-width: 100%;
}


/* 100311 에디터 - 본문 반응형 동영상 */

iframe:not(.instagram-media, [data-ke-type='map']) {
	max-width: 100%;
	height: 100%;
	border-radius: var(--img-border-radius);
}

:is(.article-content, .notice-content)[data-iframe-size="1"] iframe:not(.instagram-media, [data-ke-type='map']) {
	width: 100%;
}

:is(.article-content, .notice-content) :is(p:has(iframe[data-src*="youtube"]), p:has(iframe[data-src*="soundcloud"])) {
	border-radius: var(--img-border-radius);
	background-color: var(--color-base-150);

	line-height: 1;

	transition: background-color var(--duration);
}

p iframe[data-src*="youtube"], p iframe[data-src*="soundcloud"] {
	opacity: 0;

	transition: opacity var(--duration);
}

p:has(iframe[data-src*="youtube"].lazyloaded), p:has(iframe[data-src*="soundcloud"].lazyloaded) {
	background-color: transparent !important;
}

p iframe[data-src*="youtube"].lazyloaded, p iframe[data-src*="soundcloud"].lazyloaded {
	opacity: 1 !important;
}


/* 100312 에디터 - 본문 이미지 설정 */

.imageblock span {
	display: flex;
}

.imageblock span, .imagegridblock span {
	border-radius: var(--img-border-radius);
	background-color: var(--color-base-150);

	transition: background-color var(--duration);
}

.contents_style figure.imageblock span img, .contents_style figure.imagegridblock span img {
	opacity: 0;
}

.contents_style figure.imageblock span img.lazyloaded, .contents_style figure.imagegridblock span img.lazyloaded {
	opacity: 1;

	transition: all var(--duration);
}

.contents_style figure.imageblock span:has(img.lazyloaded), .contents_style figure.imagegridblock span:has(img.lazyloaded) {
	background-color: transparent;
}

.notice-content figure.imageblock span img {
	opacity: 0;
}

.notice-content figure.imageblock span img.lazyloaded {
	opacity: 1;

	transition: all var(--duration);
}

.contents_style img {
	max-width: 100%;
	height: auto;
	border-radius: var(--img-border-radius);
}

figure.imagegridblock .image-container > span {
	display: flex;
	
	margin-top: 0 !important;
}

figure.imagegridblock + figure.imagegridblock .image-container > span{
	margin-top: 10px !important;
}

figure.imageslideblock div.mark span {
	margin: 20px 4px;
	border-radius: var(--radius-base-m);
	background-color: var(--color-base-300);
}

figure.imageslideblock div.mark span:first-child {
	background-color: var(--color-base-1100) !important;
}

figure.imageslideblock div.mark span[style*="background-color: rgb(214, 214, 214)"] {
	background-color: var(--color-base-300) !important;
}

figure.imageslideblock div.mark span[style*="background-color: rgb(0, 0, 0)"] {
	background-color: var(--color-base-1100) !important;
}

figure.imageslideblock div.image-container {
	background-color: transparent;
}


/* 이미지 주석 */

:is(figure.imageslideblock div.image-container) {
	min-width: 100%;
}

article :is(figure figcaption, figure.imageslideblock figcaption) {
	padding-top: 4px;

	font-size: var(--font-size);
	color: var(--color-base-800);
}


/* 100313 에디터 - 제목 태그 */

h2, h2[data-ke-size], h3, h3[data-ke-size] {
	font-weight: normal;
}


/* 100314 에디터 - 본문 a태그 */

:is(.contents_style, .notice-content)[data-link-style="1"] p>a:link, :is(.contents_style, .notice-content)[data-link-style="1"] p>a:visited {
	position: relative;

	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: var(--color-primary-b4);
	text-decoration-thickness: 1.4px;
	text-underline-offset: 3px;
}


/* 1004 본문 - [관련글] */

.article-related {
	margin: 40px 0 0 0;
}

.related-headline {
	display: flex;
	align-items: center;

	position: relative;

	margin-bottom: 12px;

	font-weight: 500;
	color: var(--color-base-1200);
}

.related-container {
	display: grid;

	gap: 10px;
	overflow: hidden;
}

.related-container[data-style*="simple"] {
	gap: 10px 20px;
}

.related-container[data-style*="1x4"] {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.related-container[data-style*="2x2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 16px 10px;
}

.related-container[data-style*="4x1"] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.related-item {
	display: flex;
	align-items: center;

	gap: 8px;
	overflow: hidden;
}

.related-container[data-style*="simple"] .related-item {
	gap: 14px;
}

.related-container[data-style*="gallery"] .related-item {
	flex-direction: column;
}

.related-img-box {
	display: flex;

	flex-shrink: 0;

	width: 50px;
	aspect-ratio: 1/1;
	border-radius: var(--radius-base-m);
	background-color: var(--color-base-200);
	overflow: hidden;
}

.related-container[data-style*="gallery"] .related-img-box {
	width: 100%;
}

:where(.related-item.text_type, .related-item[data-type="secret"]) .related-img-box {
	display: flex;
	justify-content: center;
	align-items: center;
}

.related-img-box:has(.related-img.lazyloaded) {
	background-color: transparent;
}

.related-item.thumb_type:not([data-type="secret"]) .related-icon {
	display: none;
}

.related-icon { 
	width: max(16%, 18px);
	height: max(16%, 18px);
	color: var(--color-base-800);
	stroke-width: 1.5px;
	
	transition: color var(--duration);
}

:where(.related-item.text_type, .related-item[data-type="secret"]):hover .related-icon {
	color: var(--color-primary);
}

.related-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-info {
	display: flex;
	flex-direction: column;

	width: 100%;
	overflow: hidden;

	line-height: 1.4;
}

.related-container[data-style*="gallery"] .related-info {
	padding: 0 2px;
}

.related-title {
	width: 100%;
	overflow: hidden;

	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-base-1100);

	transition: all var(--duration);
}

.related-item:hover .related-title {
	color: var(--color-primary);
}

.related-date {
	font-size: var(--font-size-s);
	color: var(--color-base-700);
}


/* 1005 본문 - [태그 목록] */

.article-tag {
	font-size: var(--font-size-s);
	color: var(--color-base-800);
}

.article-tag a {
	color: inherit
}

.article-tag a:not(:first-child) {
	margin-left: 4px;
}

.article-tag a:hover {
	color: var(--color-primary);
}

.article-tag a::before {
	content: "#";
}

/* ───────────────────────────────────────────────────────── */





/* ───────────────────────────────────────────────────────── */
/* 800011 : 비밀글 */
/* ───────────────────────────────────────────────────────── */

html[data-page="protected"] .profile-section {
	display: none;
}

.content:has(.protected) {
	display: flex;
	flex-direction: column;

	margin: auto;
}

.protected {
	display: flex;
	flex-direction: column;
	justify-content: center;

	position: relative;
	flex-grow: 1;

	width: 100%;
	height: 100%;
	text-align: center;
}

.protected-icon {
	width: 40px;
	height: 40px;
	stroke-width: 1.5px;
	color: var(--color-primary);
}

.protected-inner {
	opacity: 0;
	display: flex;
	flex-direction: column;

	position: fixed;
	top: 60%;
	left: 70%;
	transform: translate(-50%, -50%);

	width: 370px;
	border: 1px solid var(--color-base-300);
	border-radius: var(--radius-base-l);
	box-shadow: var(--shadow-100);
	background-color: var(--color-base-100);
	overflow: hidden;

	transition: opacity var(--duration);
}

.protected-inner.opacity-1 {
	transition: opacity var(--duration);
}

.protected-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	gap: 4px;
	padding: 30px 30px 40px 30px;
	overflow: hidden;

	transition: all var(--duration);
}

.protected-container-alert {
	margin-bottom: 10px;
}

.protected-input {
	opacity: 1 !important;

	width: 200px;
	height: 36px;
	border: 1px solid var(--color-base-300);
	border-radius: var(--radius-base-l);
	padding: 10px;
	background-color: var(--color-white);
	overflow: hidden;

	font-size: var(--font-size-s);
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;

	transition: all var(--duration);
}

.protected-input[type="password"] {
	text-align: center;
}

.protected-submit {
	display: inline-flex;
	justify-content: center;
	align-items: center;

	width: 200px;
	height: 36px;
	border-radius: var(--radius-base-l);
	background-color: var(--color-primary-b2);
	
	font-size: var(--font-size-s);
	font-weight: 600;
	color: var(--color-primary);
}


/* ───────────────────────────────────────────────────────── */





/* ───────────────────────────────────────────────────────── */
/* 800012 : 공지사항 */
/* ───────────────────────────────────────────────────────── */

html[data-page="notice"] .content {
	padding-top: 10px;
}

.notice {
	display: flex;
	align-items: flex-start;

	position: relative;

	gap: 24px;
	padding: 0 0 24px 0;
}

.notice:not(:first-child) {
	padding-top: 24px;
}

.notice-entry {
	width: 100%;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-base-m);
	padding: 20px;
	background-color: var(--color-base-100);
	overflow: hidden;
}

.notice-info {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;

	gap: 10px;
	margin-top: -4px;
	padding: 0 0 var(--padding) 0;
}

.notice-title {
	font-size: var(--font-size-m);
	font-weight: 500;
	color: var(--color-base-1100);
}

.notice-sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	flex-shrink: 0;

	padding-top: 4px;

	font-size: var(--font-size-xs);
	color: var(--color-base-500);
	text-align: center;
}

.notice-date-day {
	display: block;

	margin-bottom: -2px;
	font-size: calc(var(--font-size-xxl) + 10px);
	color: var(--color-base-1000);
	letter-spacing: -0.5px;
	line-height: 1;
}

.notice-date-wrap {
	display: flex;
	align-items: center;
}

.notice .article-more {
	margin: 8px 0 0 auto;
}

.notice .more-btn {
	color: var(--color-base-900);
}

.notice .more-btn-icon {
	width: var(--font-size);
	height: var(--font-size);
	stroke-width: 2px;
	color: inherit;
}

.notice .article-more-box {
	position: absolute;
	top: 20px;
	right: -10px;

	text-align: center;
}

.notice .article-more-container {
	flex-direction: column;

	padding: 10px;
	background-color: var(--color-white);
}

.notice .container_postbtn {
	width: unset;
	margin: 10px auto 0 auto;
}

.notice-content {
	font-size: var(--article-font-size);
}

.notice-content figure[data-ke-type="contentSearch"] a {
	margin: unset;
}

.notice-content figure a:link::before {
	content: none;
}

/* ───────────────────────────────────────────────────────── */





/* ───────────────────────────────────────────────────────── */
/* 800013 : 포스트 버튼 */
/* ───────────────────────────────────────────────────────── */

/* 1301 공통 */

.article-post-btn {
	display: flex;
	align-items: stretch;

	gap: 16px;

	transition: var(--duration);
}

.rp-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;

	gap: 8px;
	height: 100%;
	border-radius: var(--radius-base-m);

	font-family: "Geist";
	font-weight: 500;
	color: var(--color-base-800);

	transition: all var(--duration);
}

.post-icon {
	flex-shrink: 0;

	width: var(--font-size);
	height: var(--font-size);
	stroke-width: 2px;
	color: var(--color-base-800);
}

.rp-btn span {
	flex-shrink: 0;

	font-size: calc(var(--font-size) - 2px);
}


/* 1302 RESET */

.container_postbtn {
	display: flex;
	width: 100%;
	
	padding: unset;
}

.container_postbtn::after {
	content: none;
}

.container_postbtn .postbtn_like {
	display: flex;
	align-items: center;

	float: unset;

	padding: unset;

	font-size: inherit !important;
}

.container_postbtn .postbtn_like .wrap_btn {
	display: flex;
	align-items: center;

	float: unset;
}

.container_postbtn .btn_post {
	height: unset;
	border: unset;
	border-radius: unset;
	padding: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

.container_postbtn .btn_post.uoc-icon .uoc-icon {
	display: flex;
	align-items: center;

	position: relative;
}

.container_postbtn .btn_post .ico_like {
	display: none;

	max-width: unset;
	width: unset;
	height: unset;
	margin: unset;
	background: none;

	text-indent: unset;
}

.container_postbtn .btn_post .txt_like {
	margin: unset;
    
	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

.container_postbtn .btn_post .ico_share {
	display: none;

	margin: unset;
	background: none;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

.container_postbtn .layer_post {
	border: unset;
	box-shadow: unset;
	padding: unset;
	background: unset;
}

.container_postbtn .layer_post .ico_arrbt {
	display: none;
}

.container_postbtn .layer_post .btn_mark {
	padding: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
	color: inherit;
}

.container_postbtn .btn_post .ico_statistics {
	display: none;

	width: unset;
	height: unset;
	margin: unset;
	background: none;

	text-indent: unset;
}

.btn_post, .btn_menu_toolbar {
	outline: none !important;
}

.btn_post, .btn_menu_toolbar:focus-visible {
	outline: 2px !important;
}

.container_postbtn .postbtn_ccl {
	display: none;
}

.container_postbtn .ico_postbtn.ico_etc {
	display: none;
}

.container_postbtn .btn_menu_toolbar, .container_postbtn button.tt-btn-support {
	width: -moz-fit-content;
	width: fit-content;
	height: unset;
	margin: unset;
	border: unset;
	border-radius: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

.container_postbtn .btn_menu_toolbar .txt_state {
	display: none;
}

.container_postbtn .btn_menu_toolbar.following .ico_check_type1 {
	display: none;
}


/* 130 메인 박스 */
.container_postbtn {
	justify-content: space-between;

	gap: 16px;
}

.container_postbtn .postbtn_like { 
	gap: 16px;
	border: 0;
}

/* 공유 */
.container_postbtn .wrap_btn_share {
	display: none !important;
}

/* 통계 */
.container_postbtn .wrap_btn:nth-of-type(3):not(.wrap_btn_etc) {
	display: none !important;
}

/* 더보기 */
.container_postbtn .wrap_btn_etc {
	display: none !important;
}

/* 구독 */
.container_postbtn .btn_menu_toolbar {
	display: none !important
}

.container_postbtn .postbtn_like + .btn_menu_toolbar {
	margin-left: auto;
}

.notice .container_postbtn .btn_menu_toolbar {
	display: none !important;
}


/* 1303 공감 버튼 */

.container_postbtn .btn_post {
	display: flex;
	align-items: center;
}

.container_postbtn .btn_post.uoc-icon .uoc-icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	height: 100%;
	font-size: calc(var(--font-size) - 2px);
	font-family: "Geist";
	font-weight: 500;
	color: var(--color-base-800);
	transition: all var(--duration);
}

.notice .container_postbtn .btn_post.uoc-icon .uoc-icon {
	flex-direction: column;

	gap: 3px;

	border-radius: var(--radius-circle);
	padding: 12px;
	background-color: var(--color-base-200);

	line-height: 1;
}

.ico_postbtn.ico_like {
	display: none;
}

.like-iconbox {
	display: inline-flex;
	align-items: center;

	position: relative;
}

.article-like, .notice-like {
	display: none;
}

.like-icon {
	color: transparent;
	stroke: var(--color-base-800);

	transition: all var(--duration);
}

.notice .like-icon {
	width: var(--font-size);
	height: var(--font-size);
}

.like_on .like-icon {
	color: var(--color-primary);
	stroke: none;

	animation: changeColor 0.3s alternate linear, changeScale 0.8s alternate linear;
	transition: all var(--duration);
}

.like_on .like-iconbox::before {
	content: "";
	opacity: 0;

	position: absolute;
	top: 0;
	left: 0;
	transform: scale(1.3);

	width: 100%;
	height: 100%;
	border-radius: var(--radius-circle);
	background-color: var(--color-primary-b2);

	animation: applyBack 1.2s alternate linear;
}

@keyframes changeColor {
	0% {
		color: var(--color-base-800);
	}
	50% {
	}
	100% {
		color: var(--color-primary);
	}
}

@keyframes changeScale {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes applyBack {
	0% {
		transform: scale(1.3);
	}
	20% {
		opacity: 1;
	}
	50% {
		transform: scale(1.7);
	}
	100% {
		transform: scale(1.3);
	}
}

.like-count {
	flex-shrink: 0;

	font-family: "Inter";
}

.notice .like-count {
	display: none !important;
}

.article-post-btn:not([data-like-count="1"]) .like-count, .article-more-box:not([data-like-count="1"]) .like-count  {
	display: none !important;
}

.container_postbtn .btn_post .like_on .like-count { 
	font-size: var(--font-size-s) !important;
	color: var(--color-primary) !important;
}


/* 1304 응원하기 */

.container_postbtn button.tt-btn-support {
	display: inline-flex;
	align-items: center;

	height: 100%;
	border: 0;
	border-radius: var(--radius-base-m);
	padding: 0;
	background-color: transparent;

	font-family: "pretendard" !important;
	font-weight: 500;
	color: var(--color-base-800);
	transition: all var(--duration);
}

.container_postbtn button:focus, .layer_post button:focus, .layer_tooltip button:focus {
	outline: none;
}

.tt-btn-support:focus-visible {
	outline: 2px solid var(--color-base-500);
}

.support-icon {
	width: var(--font-size);
	height: var(--font-size);
	stroke-width: 2px;
	color: var(--color-base-800);
}

.notice div[data-tistory-react-app="SupportButton"] {
	display: none;
}

div[data-tistory-react-app="SupportButton"]:empty {
	display: none;
}

.article-support {
	display: none;
}

.tt_box_cheers {
	display: none;

	margin-bottom: 0;
	border: 0;
	border-top: 1px solid var(--color-base-300);
}

.tt_cheers_msg {
	height: 32px;
	margin: 10px 0 10px -4px;
	border-radius: var(--radius-base-m);
}

.tt_cheers_msg .tt_txt, .tt_cheers_msg .tt_txt_won {
	font-size: 12px !important;
}

div[class*="tt_card_cheers_level"], .tt_list_cheers_select .tt-xe-label input:checked + .tt_card_cheers.div[class*="tt_card_cheers_level"] {
	border: 0;
	background-color: var(--color-base-200);

	color: var(--color-base-1000) !important;
}

.tt_card_cheers_level svg path, .tt_list_cheers_select .tt-xe-label input:checked+.tt_card_cheers.tt_card_cheers_level svg path {
	fill: var(--color-base-1000) !important;
}

/* ───────────────────────────────────────────────────────── */





/* ───────────────────────────────────────────────────────── */
/* 800014 : 댓글 & 방명록 */
/* ───────────────────────────────────────────────────────── */

.article-comment {
	position: fixed;
	z-index: 11;
	top: 45%;
	left: 55%;

	width: min(var(--content-width), 700px);
}

.article-comment div[data-tistory-react-app="Comment"] {
	height: 100%;
}

/* reset */
.tt-wrap-cmt .tt-link-user,
.tt-box-write .tt-xe-label,
.tt-btn-cancel,
.tt-item-reply .tt_cmt_info .tt_txt_g,
.tt-item-reply,
.tt-item-reply .tt-list-reply-comment,
.tt-area-write .tt-box-account input,
.tt-wrap-cmt .tt_desc,
.tt-btn_register,
.tt-txt-mention,
.tt-wrap-cmt .tt_date,
.tt-link-comment .tt_txt_g,
.tt-wrap-cmt .tt-link-comment,
.tt-box-total .tt_txt_g,
.tt-box-total .tt_num_g,
.tt-wrap-cmt .tt-wrap-link-comment,
.tt-area-reply,
.tt-item-reply .tt_cmt_info,
.tt-link-comment .tt_num_g,
.tt-box-textarea textarea,
.tt-box-textarea div,
.tt-box-textarea .tt_txt_user {
	margin: 0;
	border: 0;
	padding: 0;

	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
}

/* start */
.tt-comment-cont {
	display: flex;
	flex-direction: column;

	gap: var(--padding);
	height: 100%;
}

/* 코멘트 - 헤더 */
.tt-comment-cont .tt-box-total {
	display: none;

	margin: 0;
	border: 0;
	padding: 0;
}

.tt-box-total .tt_txt_g {
	display: none;
}

/* 코멘트 - 리스트 스타일 */
.tt-comment-cont .tt-area-reply {
	position: relative;

	width: 100%;
	max-height: 400px;
	height: 100%;
	overflow-y: scroll;
}

.tt-comment-cont .tt-area-reply:empty {
	display: none;
}

.tt-list-reply {
	display: flex;
	flex-direction: column-reverse;

	border: 0;
}

.article-comment .tt-list-reply {
	gap: var(--padding);
}

.tt-list-reply .tt-item-reply.has-fixed  {
	border-top: 0 !important;
}

.tt-list-reply .tt-list-reply-comment li:first-child {
	border-top: 0;
}

.tt-list-reply > .tt-item-reply {
	padding: 28px 30px;
}

.article-comment .tt-list-reply {
	gap: 0;
}

#tt-body-guestbook .tt-list-reply > .tt-item-reply {
	padding: 40px 4px;
}

#tt-body-guestbook .tt-list-reply > .tt-item-reply.has-fixed {
	padding-top: 20px;
}

#tt-body-guestbook .tt-list-reply > .tt-item-reply:last-child {
	padding-top: 30px;
}

#tt-body-guestbook .tt-list-reply > .has-fixed ~ .tt-item-reply:last-child {
	padding-top: 40px;
}

.tt-list-reply > .tt-item-reply:not(:last-child) {
	border-top: 1px solid var(--border-color);
}

.tt-list-reply > .has-fixed ~ .tt-item-reply:last-child {
	border-top: 1px solid var(--border-color);
}

/****/
.tt-wrap-cmt {
	flex-wrap: nowrap;
	gap: 10px;

	position: relative;
}

.tt-item-reply {
	display: flex;
	flex-direction: column;
}

.tt-list-reply-comment .tt-item-reply {
	border-radius: var(--radius-base-l);
	padding: 20px 0 20px 50px;
}

.tt-list-reply-comment .tt-item-reply::before {
	z-index: 2;
	top: 30px;
	left: 20px;
	border-bottom-left-radius: 3px;
	border-color: var(--color-base-400);
}

.tt-item-reply .tt-list-reply-comment {
	display: flex;
	flex-direction: column;

	gap: 10px;
	margin-top: 20px;
	border-color: var(--color-base-500);
}

.tt_item_secret::after {
	content: "Private Message";
	display: block;

	order: -1;

	width: fit-content;
	margin: 0 auto 20px auto;
	border-radius: var(--radius-base-s);
	padding: 4px 12px;
	background-color: var(--color-base-200);

	font-size: var(--font-size-s);
	color: var(--color-base-800);
}

#tt-body-guestbook .tt_item_secret::after {
	content: none;
}


/* 고정 */
.tt-list-reply>.tt-item-reply.has-fixed {
	order: 1;
}

.tt-list-reply>.tt-item-reply.has-fixed .tt-wrap-cmt {
	position: relative;

	border-top: 0;
	border-bottom: 0;
}

.tt-list-reply>.tt-item-reply.has-fixed .tt_cmt_info .tt_ico_fixed {
	background-color: var(--color-primary-b5);
}

.tt-item-reply .tt_cmt_info .tt_ico_fixed {
	width: var(--font-size);
	height: var(--font-size);
	margin-right: 4px;
	margin-bottom: 0;
	background-size: 100px;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 3V5H17V11L19 14V16H13V23H11V16H5V14L7 11V5H6V3H18Z'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	background-image: var(--svg);
	mask-image: var(--svg);
	mask-repeat: no-repeat;
	background-color: var(--color-primary-b5);
}

.tt-item-reply .tt_cmt_info .tt_txt_g {
	color: var(--color-primary-b5);
}

.tt-list-reply>.tt-item-reply:first-child:not(.has-fixed)>.tt-wrap-cmt {
	border-bottom: 0;
}

.tt-list-reply>.has-fixed+.tt-item-reply>.tt-wrap-cmt {
	border-bottom: 0;
}

.tt-list-reply>.tt-item-reply:last-child>.tt-wrap-cmt {
	border-top: 0;
}

.tt-item-reply .tt_cmt_info {
	width: -moz-fit-content;
	width: fit-content;

	margin: 0 auto 20px auto;
	border-radius: var(--radius-base-s);
	padding: 4px 10px;
	background-color: var(--color-primary-b);

	font-size: var(--font-size-s);
	font-weight: 600;
}

.tt_ico_fixed {
	width: var(--font-size);
	height: var(--font-size);
	margin-right: 0;
	background-size: 100px;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.8273 1.68994L22.3126 10.1752L20.8984 11.5894L20.1913 10.8823L15.9486 15.125L15.2415 18.6605L13.8273 20.0747L9.58466 15.8321L4.63492 20.7818L3.2207 19.3676L8.17045 14.4179L3.92781 10.1752L5.34202 8.76101L8.87756 8.0539L13.1202 3.81126L12.4131 3.10416L13.8273 1.68994ZM14.5344 5.22548L9.86358 9.89631L7.0417 10.4607L13.5418 16.9608L14.1062 14.1389L18.7771 9.46812L14.5344 5.22548Z'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	background-image: var(--svg);
	mask-image: var(--svg);
	mask-repeat: no-repeat;
	background-color: var(--color-black);
}

.tt_btn_prev_more {
	width: -moz-fit-content;
	width: fit-content;
	margin: 0;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-base-l);
	padding: 0 16px;
	background-color: var(--color-base-150);

	color: var(--color-black);
}

/* 코멘트 - 썸네일*/
.tt-box-thumb {
	margin-right: 0;
}

.rp-form .tt-box-thumb {
	position: absolute;
	z-index: 2;
	top: 8px;
	left: 40px;
}

.tt-area-reply[data-mode="login"] .rp-form .tt-box-thumb {
	top: 14px;
	left: 14px;
}

.tt-area-reply[data-mode="login"] + .rp-form .tt-box-thumb {
	top: 12px;
	left: 16px;
}

.tt-comment-cont:has(div[data-mode="logout"]) .tt-area-write .tt-box-thumb {
	top: 8px;
	left: 10px;
}

.tt-comment-cont:has(div[data-mode="logout"]) > .rp-form .tt-box-thumb {
	top: 40px;
	left: 20px;
}

.tt-thumb-wrap {
	display: inline-block;

	border-radius: var(--radius-circle);
}

.tt-box-thumb>a {
	display: inline-block;

	border-radius: var(--radius-circle);
}

html[data-border-type="1"] .tt-box-thumb>a {
	border: 2px solid var(--color-border-item);
}

.tt-item-reply .tt-box-thumb {
	z-index: 1;
}

.tt-thumbnail {
	width: 33px;
	height: 33px;
	background-color: var(--color-white);
}

.tt-thumbnail:after {
	box-shadow: none;
}

/* 코멘트 - 유저 정보 & 내용 */
.tt-wrap-cmt .tt-box-meta {
	margin-top: 2px;
	
	line-height: 1;
}

.tt-wrap-cmt .tt-link-user {
	display: flex;
	align-items: center;

	gap: 6px;

	font-weight: 600;
}

.admin .tt-wrap-cmt .tt-link-user::before {
	content: "Admin";
	display: block;

	order: 1;

	width: fit-content;
	border-radius: var(--radius-base-s);
	padding: 4px 6px;
	background-color: var(--color-primary-b);

	font-size: var(--font-size-xxs);
	font-weight: normal;
	color: var(--color-primary-b4);
}

#tt-body-guestbook .tt_item_secret .tt-link-user::after {
	content: "Private";
	display: block;

	order: 2;

	width: fit-content;
	border-radius: var(--radius-base-s);
	padding: 4px 6px;
	background-color: var(--color-base-200);

	font-size: var(--font-size-xxs);
	font-weight: normal;
	color: var(--color-base-800);
}

.tt-wrap-cmt .tt-box-content {
	display: flex;
	flex-direction: column;

	gap: 6px;
	width: 100%;
}

.tt-comment-cont .tt-wrap-desc {
	display: block;

	position: relative;

	color: var(--color-base-900);
}

.tt_item_modify .tt_desc, .tt_item_modify .tt_desc_more {
	color: var(--color-black);
}

.tt-wrap-cmt .tt_desc {
	color: var(--color-base-1200);
}

.tt_item_secret>.tt-wrap-cmt .tt_desc {
	color: var(--color-base-1000);
}

.tt_item_secret .tt_desc .secret-icon {
	display: inline;

	width: var(--font-size);
	height: var(--font-size);
	margin: -2px 4px 0 0;
	color: var(--color-base-1000);
	stroke-width: 2px;

	vertical-align: middle;
}

.tt-wrap-info {
	gap: 8px;

	line-height: 1;
}

.has-fixed .tt-wrap-info {
	margin-top: 2px;
}

.tt-wrap-cmt .tt_date {
	opacity: 0.4;

	font-size: var(--font-size-xs);
	
	color: var(--color-black);
}

.tt-wrap-cmt .tt-wrap-link-comment {
	display: inline-flex;
	align-items: center;

	margin-left: auto;
	border-radius: var(--radius-base-s);
	padding: 4px 8px;
	background-color: var(--color-primary-b);

	font-size: var(--font-size-xs);

	transition: opacity var(--duration);
}

.has-fixed .tt-wrap-cmt .tt-wrap-link-comment {
	display: none;
}

.tt-list-reply-comment .tt-wrap-cmt .tt-wrap-link-comment {
	background-color: var(--color-base-250);
}

.tt-list-reply-comment .admin .tt-wrap-cmt .tt-wrap-link-comment {
	background-color: var(--color-primary-b);
}

.tt-wrap-cmt .tt-link-comment {
	display: inline-flex;
	align-items: center;

	font-size: var(--font-size-xs);
	color: var(--color-primary);
}

.tt-wrap-info .tt_date + .tt-wrap-link-comment:before {
	content: none;
}

.tt-wrap-cmt .tt-link-comment .tt_txt_g {
	color: inherit;
}

.tt-list-reply-comment .tt-wrap-cmt .tt-link-comment .tt_txt_g {
	color: var(--color-base-900);
}

.tt-list-reply-comment .admin .tt-wrap-cmt .tt-link-comment .tt_txt_g {
	color: var(--color-primary);
}

.tt-link-comment .tt_num_g {
	margin-left: 4px;

	color: inherit;
}

.tt-wrap-cmt .tt-box-modify {
	top: 0;
}

.tt-wrap-cmt .tt-button-modify {
	opacity: 0.3;
}

.tt-wrap-cmt .tt-button-modify:hover, .tt-wrap-cmt .tt-box-modify.tt-box-modify-open .tt-button-modify {
	background-color: var(--color-base-100);
}

.tt-wrap-cmt .tt-list-modify {
	z-index: 2;

	border: 1px solid var(--color-base-300);
	border-radius: var(--radius-base-m);
	box-shadow: none;
	padding: 4px 0;
	background-color: var(--color-white);
	overflow: hidden;
}

.tt-wrap-cmt .tt-list-modify li:not(:last-child) {
	border-bottom: 0;
}

.tt-wrap-cmt .tt-list-modify a {
	padding: 6px 10px;
	color: var(--color-base-800);
	line-height: 1;
	text-align: center;
}

.tt-wrap-cmt .tt-list-modify a:hover {
	background-color: transparent;

	color: var(--color-primary);
}

/* 코멘트 - 멘션 */
.tt-area-reply .tt-list-reply .tt-txt-mention {
	margin: 0 6px 2px -2px;
	border: 0;
	border-radius: var(--radius-base-s);
	padding: 4px 8px;
	background-color: var(--color-base-250);

	font-size: var(--font-size-xs);
	font-weight: 500;
	color: var(--color-base-900);
}

.tt-txt-mention::before {
	content: none;
}

.tt_ico_lock {
	display: none;
}

/* 코멘트 입력창 */
.rp-form {
	width: 100%;
}

.tt-area-write {
	position: relative;
	gap: 10px;
}

.tt-area-reply + .rp-form .tt-area-write {
	margin-right: 12px;
}

.tt-box-write {
	align-items: flex-start;

	gap: 16px;
	margin-top: 10px;
}

.tt-area-reply .tt-box-write {
	margin-top: 0;
	padding: 0 0 0 4px;
}

.tt-area-reply .tt_wrap_write>div:nth-child(2).tt-box-textarea + .tt-box-write {
	margin-left: 0;
}

.tt-area-write .tt-box-account {
	flex-direction: row;

	gap: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--color-base-300);
}

.tt-area-reply .tt-area-write .tt-box-account {
	margin-bottom: 0;
	border: 0;
	border-radius: var(--radius-base-m);
	background-color: var(--color-base-150);
}

.tt-xe-label {
	height: 100%;
}

.secret-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;

	height: 100%;
}

.tt-area-reply+.rp-form .secret-btn {
	margin-right: unset;
}

.secret-btn .secret-icon {
	width: 18px;
	height: 18px;
	color: inherit;
	stroke-width: 1.5px;
}

.tt-item-reply .tt-box-write > div {
	gap: 10px;
	width: 100%;
}

.tt-item-reply .secret-btn .secret-icon {
	width: 16px;
	height: 16px;
}

.tt-xe-label.checked .secret-btn .secret-icon {
	color: var(--color-primary);
}

.tt-box-write .tt-xe-input-helper {
	display: none;
}

.tt_wrap_write>div:nth-child(2).tt-box-textarea + .tt-box-write .tt-xe-label {
	position: static;
}

.tt-area-reply :is(.tt-box-write .tt-xe-label .secret-btn) {
	box-shadow: none;
	background-color: transparent;
}

.tt-btn-cancel {
	height: 100%;
}

.tt-area-reply .tt-area-write .tt-btn-cancel {
	min-width: unset;
	margin-top: 2px;

	color: var(--color-base-1200);
}

.tt-area-reply .tt-area-write:has(.tt_wrap_write .tt-box-account) .tt-btn-cancel {
	margin-left: 0;
}

.article-comment .tt-area-reply[data-mode="logout"] + .rp-form .tt-area-write {
	padding-top: 30px;
}

.tt-area-write .tt-box-account input {
	border: 0;
	border-radius: var(--radius-base-m);
	padding: 14px 16px;
	background-color: transparent;

	font-size: var(--font-size);
	color: var(--color-base-1200);

	transition: all var(--duration);
}

.tt-area-reply .tt-box-account input {
	width: 50%;
}

.tt-area-write .tt-box-account input[type="text"] {
	padding-left: 66px;
}

.tt-area-write .tt-box-account input:hover, .tt-area-write .tt-box-account input:focus {
	border-color: transparent;
	background-color: transparent !important;
}

.tt-box-textarea {
	margin-bottom: unset;
}

div[data-mode="login"] .tt-item-reply .tt-box-textarea {
	width: 100%;
}

.tt-area-reply + .rp-form .tt-box-textarea {
	width: 100%;
	height: 100%;
}

.tt_wrap_write>div:nth-child(2).tt-box-textarea {
	margin-left: 0;
}

.tt-box-textarea .tt-inner-g, .tt-box-textarea.tt-input-textarea .tt-inner-g {
	min-height: 100px;
	max-height: 330px;
	border: 0;
	padding: 10px 36px 10px 30px;
	background-color: transparent;

	font-size: var(--font-size);
	color: var(--color-primary);

	transition: all var(--duration);
}

.tt-box-textarea:hover .tt-inner-g {
	border-color: var(--color-base-300);
}

.tt-area-reply[data-mode="logout"] .rp-form :is(.tt-box-account input[type="text"]) {
	padding-left: 56px;
}

.tt-area-reply[data-mode="logout"] .rp-form :is(.tt-box-textarea .tt-inner-g, .tt-box-textarea.tt-input-textarea .tt-inner-g) {
	min-height: 100px;
	max-height: 140px;
	padding: 10px 20px 14px 20px;
}

.tt-item-reply .tt-box-textarea .tt-inner-g, .tt-item-reply .tt-box-textarea.tt-input-textarea .tt-inner-g {
	border-radius: var(--radius-base-m);
	padding: 20px 36px 10px 56px;
	background-color: var(--color-base-150);
}

.tt-box-textarea .tt-inner-g::-webkit-scrollbar-track {
	background-color: transparent;
}

.tt-box-textarea .tt-inner-g::-webkit-scrollbar-button:vertical:start:decrement,
.tt-box-textarea .tt-inner-g::-webkit-scrollbar-button:vertical:start:increment,
.tt-box-textarea .tt-inner-g::-webkit-scrollbar-button:vertical:end:decrement,
.tt-box-textarea .tt-inner-g::-webkit-scrollbar-button:vertical:end:increment  {
	display: block;
	height: 5px;
}

.tt_wrap_write {
	display: flex;
	flex-direction: column;
	
	position: relative;
}

.tt-area-reply .tt_wrap_write {
	gap: 10px;
}

.tt_wrap_write:has(.tt-box-account) {
	flex-direction: column;
}

.tt-box-textarea textarea, .tt-box-textarea div {
	height: unset;
	padding-top: 4px;

	color: var(--color-base-800);
}

.tt-box-textarea .tt-cmt[contenteditable='true']:empty::before {
	content: "내용을 입력하세요.";
}

.tt-box-textarea .tt_txt_user {
	font-weight: 500;
	color: var(--color-base-1200);

	line-height: 1;
}

.tt-area-reply .tt-box-textarea .tt_txt_user {
	font-weight: 600;
	line-height: 1;
}

.cancel-icon{
	width: 14px;
	height: 14px;
	color: var(--color-primary-b5);
	stroke-width: 1.5px;
}

:is(.cancel-icon, .tt-btn_register .submit-icon) {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	color: inherit;
	stroke-width: 2px;
	margin-top: -2px;
}

.tt-btn_register:hover, .tt-btn_register:focus {
	border: 0;
	background-color: var(--color-primary-b5);
}

.article-comment .tt-comment-cont > .rp-form .tt-box-write {
	margin-top: unset;
	padding: 16px 30px;
	background-color: var(--color-base-200);
}

.article-comment .tt-area-reply + .rp-form .tt-area-write {
	height: 100%;
	margin-right: unset;
}

.article-comment .tt-box-textarea .tt-inner-g {
	min-height: 150px;
}

.article-comment .tt-comment-cont:has(div[data-mode="login"]) > .rp-form :is(.tt-box-textarea .tt-inner-g, .tt-box-textarea.tt-input-textarea .tt-inner-g) {
	padding: 30px 20px 14px 73px;
}

.tt-area-reply[data-mode="login"] + .rp-form .tt-box-thumb {
	top: 28px;
	left: 30px;
}

.secret-btn {
	display: flex;
	justify-content: center;
	align-items: center;

	border-radius: var(--radius-base-s);
}

.tt-btn_register {
	display: flex;
	justify-content: center;
	align-items: center;

	gap: 6px;
	width: unset;
	height: 100%;
	border: 0;
	border-radius: var(--radius-base-s);
	padding: 6px 14px;
	background-color: var(--color-primary-b5);

	font-size: var(--font-size-s);
	color: var(--color-base-100);

	transition: all var(--duration);
}

.tt-btn_register::before {
	content: "Send";

	flex-shrink: 0;
}

.tt_wrap_write>div:nth-child(2).tt-box-textarea + .tt-box-write .tt-btn_register {
	position: relative;
	
	height: 100%;
	margin-left: 0px;
}

.tt-btn_register:disabled {
	border: 0;
	background-color: var(--color-base-400);
}

.tt-list-reply > .tt-item-reply {
	background-color: var(--color-white);
}

#tt-body-guestbook .content, #tt-body-guestbook .content > div, #tt-body-guestbook .guestbook, #tt-body-guestbook .guestbook > div[data-tistory-react-app="Comment"], #tt-body-guestbook .tt-comment-cont {
	height: 100%;
}

#tt-body-guestbook .tt-comment-cont .tt-area-reply {
	max-height: unset;
	padding-bottom: unset;
	overflow-y: unset;
}

#tt-body-guestbook .tt-comment-cont .tt-area-reply + .rp-form {
	opacity: 1;
	visibility: visible;

	position: unset;
	top: unset;
	left: unset;

	border: 1px solid var(--color-base-200);
	border-radius: var(--radius-base-l);
	background-color: var(--color-base-150);
}

#tt-body-guestbook .tt-comment-cont .tt-area-reply + .rp-form .tt-area-write {
	margin-right: unset;
	padding: 20px;
}

#tt-body-guestbook .tt-list-reply-comment .tt-item-reply {
	border-top: 1px solid var(--border-color);
	border-radius: 0;
	padding: 30px 0 30px 40px;
}

#tt-body-guestbook .tt-list-reply-comment .tt-item-reply:last-of-type {
	padding-bottom: 0;
}

#tt-body-guestbook .tt-list-reply-comment .tt-item-reply.admin {
	background-color: transparent;
}

#tt-body-guestbook .tt-list-reply-comment .tt-item-reply::before {
	left: 4px;
}

#tt-body-guestbook .tt-area-reply[data-mode="login"] + .rp-form .tt-box-thumb {
	top: 20px;
	left: 20px;
}

#tt-body-guestbook .tt-area-reply[data-mode="logout"] + .rp-form .tt-area-write .tt-box-thumb {
	top: 14px;
	left: 18px;
}

#tt-body-guestbook .tt-comment-cont > .rp-form .tt-area-write .tt-box-account input[type="text"] {
	padding-left: 46px;
}

#tt-body-guestbook .tt-comment-cont > .rp-form .tt-area-write .tt-box-account input {
	padding-top: 0;
}

#tt-body-guestbook .tt-comment-cont:has(div[data-mode="login"]) > .rp-form :is(.tt-box-textarea .tt-inner-g, .tt-box-textarea.tt-input-textarea .tt-inner-g) {
	min-height: 180px;
	padding: 4px 20px 14px 44px;
}

#tt-body-guestbook .tt-comment-cont:has(div[data-mode="logout"]) .tt-area-reply + .rp-form :is(.tt-box-textarea .tt-inner-g, .tt-box-textarea.tt-input-textarea .tt-inner-g) {
	padding: 10px 20px 14px 4px;
}

#tt-body-guestbook .tt-box-thumb>a {
	border-color: var(--color-base-200);
}

#tt-body-guestbook .paging {
	display: none;
}

/* 네임카드 */

.content .tt_box_namecard {
	display: none !important;
}


/* 코멘트 스위치 */

.comment-toggle {
	display: flex;
	align-items: center;

	gap: 4px;
	width: 100%;
	border-radius: var(--radius-base-m);
	padding: 4px;
	background-color: var(--color-base-200);
}

.article-comment .comment-toggle {
	width: unset;
	margin: 20px 20px 0 20px;
}

.guestbook .comment-toggle {
	margin-bottom: 20px;
}

.toggle-btn {
	display: none;
}

.toggle-btn + label {
	display: inline-block;

	width: 50%;
	padding: 4px 10px;
	
	text-align: center;
	color: var(--color-base-1100);

	cursor: pointer;
	transition: color 0.3s ease;
}

.toggle-btn:checked + label {
	border-radius: var(--radius-base-s);
	box-shadow: 0px 2px 4px #0001;
	background-color: var(--color-white);

	color: var(--color-primary);
}

article:has(.tt-area-reply:empty) .comment-toggle input[id="toggle-rpList"] + label {
	cursor: not-allowed !important;
}

.comment-toggle:has(#toggle-rpForm) ~ div .tt-comment-cont > .rp-form,
.comment-toggle:has(#toggle-rpList) ~ div .tt-comment-cont > .tt-area-reply {
	display: none;

	visibility: hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.3s ease;
}

.tt-comment-cont {
	position: relative; 
}

.tt-comment-cont > .rp-form {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;

	height: 100%;

	transition: visibility 0s, opacity 0.3s ease;
}

.tt-comment-cont .tt-area-reply:empty + .rp-form {
	position: unset;
}

.comment-toggle:has(#toggle-rpForm:checked) ~ div .tt-comment-cont > .rp-form {
	display: block;
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.comment-toggle:has(#toggle-rpForm:checked) ~ div .tt-comment-cont > .tt-area-reply {
	display: none;
	visibility: hidden;
	opacity: 0;
	transition-delay: 0s;
}

article:has(.tt-area-reply:empty) .comment-toggle:has(#toggle-rpForm) ~ div .tt-comment-cont > .tt-area-reply {
	display: none;
}

.comment-toggle:has(#toggle-rpList:checked) ~ div .tt-comment-cont > .tt-area-reply {
	display: block;
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.comment-toggle:has(#toggle-rpForm) ~ div .tt-comment-cont > .tt-area-reply {
	display: block;
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

article:has(.tt-area-reply:empty) .comment-toggle:has(#toggle-rpForm) ~ div .tt-comment-cont > .rp-form {
	display: block;
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

article:has(.tt-area-reply:empty) #toggle-rpList + label {
	border-radius: var(--radius-base-s);
	box-shadow: none;
	background-color: transparent;

	color: var(--color-base-1100);
}

article:has(.tt-area-reply:empty) #toggle-rpForm + label {
	border-radius: var(--radius-base-s);
	box-shadow: 0px 2px 4px #0001;
	background-color: var(--color-white);

	color: var(--color-primary);
}

.comment-title {
	padding-left: 16px;
}

.article-comment-inner {
	display: flex;
	flex-direction: column;

	height: 500px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-base-l);
	box-shadow: var(--shadow-100);
	background-color: var(--color-white);
	overflow: hidden;
}

.article-comment .tt-area-reply {
	border-radius: var(--radius);
	background-color: var(--color-white);
}

.article-comment .tt-area-reply::-webkit-scrollbar-button:vertical:start:decrement,
.article-comment .tt-area-reply::-webkit-scrollbar-button:vertical:start:increment {
	display: block;
	height: 10px;
}

.article-comment .tt-area-reply::-webkit-scrollbar-button:vertical:end:decrement,
.article-comment .tt-area-reply::-webkit-scrollbar-button:vertical:end:increment {
	display: block;
	height: 10px;
}

/* ───────────────────────────────────────────────────────── */




/* ───────────────────────────────────────────────────────── */
/* 800015 : 태그 클라우드 */
/* ───────────────────────────────────────────────────────── */

.taglog {
	display: flex;
	flex-direction: column;

	gap: 20px;
	padding: 10px 0;
}

.taglog:not(:has(.tag-item)), .taglog:has(.tag-item) + .tag-empty  {
	display: none;
}

.tag-headline {
	display: flex;
	align-items: center;

	gap: 6px;
	
	font-size: var(--font-size);
	text-transform: uppercase;
}

.tag-headline-text {
	font-weight: 600;
}

.tag-count {
	margin-left: auto;

	font-size: var(--font-size-s);
	color: var(--color-base-500);
}

.tag-container {
	display: flex;
	flex-wrap: wrap;

	gap: 8px;
}

.tag-item {
	border: 1px solid var(--color-base-200);
	border-radius: var(--radius-base-m);
	padding: 4px 12px;
	background-color: var(--color-base-150);

	color: var(--color-base-1000);
}

.tag-item::before {
	content: "#";
}

.tag-item.cloud1 {
	background-color: var(--color-primary-b);

	font-weight: 600;
	color: var(--color-primary);
}


/* ───────────────────────────────────────────────────────── */





/* ───────────────────────────────────────────────────────── */
/* 800016 : 전체 페이지네이션 */
/* ───────────────────────────────────────────────────────── */


.paging {
	display: flex;
	justify-content: space-between;
	align-items: stretch;

	gap: 8px;

	width: 100%;
	margin: 30px 0 0 0;
}

.paging-link { 
	display: flex;
	justify-content: center;
	align-items: center;

	color: var(--color-base-900);
}

.paging-num {
	display: flex;
	align-items: center;

	gap: 10px;

	font-size: var(--font-size-xs);
	text-align: center;
	color: var(--color-base-800);
}

.num-item {
	cursor: default;
}

.num-item.last-num {
	padding: 0 4px;
}

.paging-icon {
	width: 14px;
	height: 14px;
	stroke-width: 2px;
	color: inherit;
}

:where(.no-more-prev.paging-link, .no-more-next.paging-link) .paging-icon {
	color: var(--color-base-400);
}

.article-paging-link:not([data-paging="on"]) .paging-icon {
	color: var(--color-base-500);
}

.paging-input {
	display: flex;
	align-items: stretch;
	
	width: 30px;
	margin-left: auto;
	border-radius: var(--radius-base-s);
	padding: 4px;
	background-color: var(--color-base-200);

	font-size: var(--font-size-xs);
	text-align: center;

	transition: background-color var(--duration);
}

.paging-input:hover {
	background-color: var(--color-primary-b);
}

.paging-num[data-index="last"] .paging-input {
	width: var(--font-size);
	background-color: transparent;

	color: var(--color-base-800);
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ───────────────────────────────────────────────────────── */




/* ───────────────────────────────────────────────────────── */
/* 800017 : 스크롤바 */
/* ───────────────────────────────────────────────────────── */

::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-thumb {
	outline: none;
	background-color: var(--color-base-300);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-base-600);
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

/* ───────────────────────────────────────────────────────── */




/* ───────────────────────────────────────────────────────── */
/* 800018 : 드래그 */
/* ───────────────────────────────────────────────────────── */

::selection {
	background-color: var(--color-primary-b);

	color: var(--color-primary);
}

.menu_toolbar {
	display: none;
}

.tistoryProfileLayerTrigger {
	display: none;
}

.opacity-1 {
	opacity: 1;
	
	transition: all var(--duration);
}

/* ───────────────────────────────────────────────────────── */




/* ───────────────────────────────────────────────────────── */
/* 800019 : 반응형 */
/* ───────────────────────────────────────────────────────── */


/* 1901 태블릿 */

@media only screen and (max-width : 1200px) {
	:root {
		--content-width: 60vw;
		--m-gutter: 20vh;
	}

	body {
		font-family:"pretendard" !important;
	}

	.wrap {
		position: relative;

		width: var(--content-width);
		margin: var(--m-gutter) auto calc(var(--m-gutter) / 2);
	}

	.box {
		height: calc(100vh - var(--m-gutter) - var(--m-gutter));
	}

	.folder-shape {
		height: 100%;
	}

	.folder-shape {
		width: var(--content-width);
		height: calc(100vh - var(--m-gutter) - var(--m-gutter));
	}

	.folder-inner {
		width: calc(var(--content-width) - 50px);
		height: clamp(450px, 50vh, 650px);
	}

	.container {
		width: 100%;
		height: auto;
		min-height: unset;
		margin: 0;
		border: 0;
	}

	.container::after {
		content: none !important;
	}

	.category {
		max-height: 50vh;
	}

	.category :where(.link_tit, .link_item, .link_sub_item) {
		padding: 12px 0;
	}

	.category .link_sub_item {
		padding: 16px 0 16px 14px;
	}

	.cover-document .cover-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.cover-gallery .cover-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.cover-gallery2 .cover-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.list-gallery .list-img {
		transform: scale(1.05);
	}

	.container_postbtn {
		width: unset;
	}

	.article-comment {
		top: 20vh;
		left: calc(100vw - var(--content-width) - (var(--gutter-container) / 2));

		width: min(calc(var(--content-width) - 6vw), 700px);
	}

	.article-post-btn {
		gap: 20px;
	}

	.article-paging {
		gap: 16px;
	}

	* {
		-webkit-tap-highlight-color: transparent
	}

	.tooltip {
		display: none !important;
	}

	.scroll-progress {
		display: none;
	}
}


/* 1902 모바일 */

@media only screen and (max-width : 600px) {
	:root {
		--content-width: 92vw;
		--gutter-container: 20px;

		--padding: 16px;
	}

	.nav-menu {
		flex-wrap: wrap;
	}

	.control-btn-container {
		justify-content: flex-start;

		width: 100%;
	}

	.category {
		max-height: 45vh;
	}

	.system-top {
		gap: 14px;
	}

	.system-close-btn, .system-refresh-btn {
		width: 14px;
		height: 14px;
	}

	.log-box {
		width: 90%;
	}

	.cover-notice .cover-info {
		flex-direction: column;
	}

	.cover-notice .cover-img {
		max-width: 100%;
	}

	.cover-notice .cover-img+.cover-sum-wrap {
		width: 100%;
	}
	
	.cover-link .cover-container {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.cover-document .cover-container {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.cover-calendar .calendar-emoji {
		margin-bottom: auto;
	}

	.cover-habitTracker .cover-title {
		max-width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cover-webzine :is(.cover-img, .cover-noimg) {
		width: 60px;
		height: 60px;
	}

	.cover-webzine .cover-date-cate {
		flex-direction: column;
		align-items: flex-start;
	}

	.cover-webzine .cover-cate {
		margin-left: 0;
	}

	.cover-webzine .cover-cate::before {
		content: none;
	}

	.list-gallery .list-container, .list-gallery2 .list-container  {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.list-webzine .list-item {
		gap: 16px;
	}

	.list-webzine :is(.list-img, .list-img+.list-noimg, .list-item[data-type="secret"]t .list-noimg) {
		width: 60px;
		height: 60px;
	}

	.list-webzine .list-noimg .list-icon {
		width: 13px;
		height: 13px;
	}

	.list-gallery3 .list-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.list-gallery3 .list-item {
		aspect-ratio: unset;
	}

	:is(figure[data-ke-type='opengraph'], :is(#tt-body-index, #tt-body-search, #tt-body-tag, #tt-body-page, #tt-body-category) figure[data-ke-type='opengraph']) a {
		width: 90%;
	}

	.related-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

		gap: 16px;
	}

	.notice {
		flex-direction: column;
	}

	.notice-img {
		width: 40px;
		height: 40px;
	}

	.notice-content {
		padding: 16px;
	}

	.tt-list-reply > .tt-item-reply {
		padding: 20px;
	}

	.tt-wrap-cmt .tt-box-content {
		width: 100%;
	}

	.tt-comment-cont .tt-wrap-desc {
		max-width: 100%;
	}

	.tt-wrap-cmt .tt-link-user {
		max-width: 100%;
	}

	.tt-list-reply>.tt-item-reply.has-fixed .tt_cmt_info .tt_ico_fixed {
		flex-shrink: 0;
	}

	.paging {
		gap: 8px;
	}	

}

@media only screen and (max-width : 500px) { 
	.cover-habitTracker .cover-container[data-display="10"] .cover-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.cover-habitTracker .cover-container[data-display="9"] .cover-item {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media only screen and (max-width : 400px) { 
	.cover-calendar .calendar-emoji, .cover-calendar .cal_week td.cal_day[data-dday="1"]::before {
		font-size: var(--font-size-l);
	}

	.cover-document .cover-container {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	}

	.cover-dday .cover-container {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	}

	.cover-gallery .cover-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.cover-gallery2 .cover-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.list-webzine2 .list-img {
		width: 50px;
	}

	.list-webzine2 .list-img+.list-noimg {
		width: 50px;
	}

	.cover-gridGallery .cover-container:has(:nth-child(6)):not(:has(:nth-child(7)))  {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(1, 1fr);
	}

	.cover-gridGallery .cover-container[data-type="1"]:has(:nth-child(6)):not(:has(:nth-child(7))) {
		grid-template-areas: "item1 item1" "item1 item1" "item2 item2" "item3 item4" "item5 item6";
	}

	.cover-gridGallery .cover-container[data-type="2"]:has(:nth-child(6)):not(:has(:nth-child(7))) {
		grid-template-areas: "item1 item2" "item3 item3" "item3 item3" "item4 item4" "item5 item6";
	}

	.cover-gridGallery .cover-container[data-type="3"]:has(:nth-child(6)):not(:has(:nth-child(7))) {
		grid-template-areas: "item1 item2" "item3 item3" "item4 item4" "item4 item4" "item5 item6";
	}

	.cover-gridGallery .cover-container[data-type="4"]:has(:nth-child(6)):not(:has(:nth-child(7))) {
		grid-template-areas: "item1 item2" "item3 item4" "item5 item5" "item6 item6" "item6 item6";
	}

	.cover-gridGallery .cover-container[data-type="1"]:has(:nth-child(6)):not(:has(:nth-child(7))) .cover-item:nth-of-type(2) {
		aspect-ratio: 2/1;
	}

	.cover-gridGallery .cover-container[data-type="2"]:has(:nth-child(6)):not(:has(:nth-child(7))) .cover-item:nth-of-type(4) {
		aspect-ratio: 2/1;
	}

	.cover-gridGallery .cover-container[data-type="3"]:has(:nth-child(6)):not(:has(:nth-child(7))) .cover-item:nth-of-type(3) {
		aspect-ratio: 2/1;
	}

	.cover-gridGallery .cover-container[data-type="4"]:has(:nth-child(6)):not(:has(:nth-child(7))) .cover-item:nth-of-type(5) {
		aspect-ratio: 2/1;
	}

	.list-empty {
		padding: 0;
	}

	.protected {
		padding: 110px 30px 30px 30px;
	}

	.protected-inner {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		width: 70vw;
	}

	.notice-content {
		padding: 10px;
	}

	.notice .article-more {
		top: 16px;
		right: 16px;
	}

	.tt-wrap-cmt .tt-link-user {
		flex-wrap: wrap;
	}
}

@media only screen and (max-width : 350px) { 
	.cover-habitTracker .cover-container[data-display="8"] .cover-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.cover-habitTracker .cover-container[data-display="7"] .cover-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.nav-title {
		display: none;
	}
}