/* =========================================
   공통 스타일
   ========================================= */
.sstoc-mobile a, .sstoc-pc a {
	text-decoration: none !important;
	box-shadow: none !important;
	font-family: inherit;
	transition: all 0.2s ease;
}

.sstoc-mobile ul, .sstoc-pc ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sstoc-mobile ul li, .sstoc-pc ul li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}


/* =========================================
   모바일 (Inline Type) - 미니멀 스타일
   ========================================= */
.sstoc-mobile {
	background: #ffffff !important;
	border: 1px solid #e0e0e0 !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
	border-radius: 4px;
	padding: 0;
	margin: 30px 0;
	box-sizing: border-box;
	overflow: hidden;
}

.sstoc-mobile .sstoc-mobile-header {
	font-weight: 600;
	font-size: var(--sstoc-mobile-title-font-size, 1.2em) !important;
	padding: 14px 18px;
	background: #fafafa !important;
	color: #222 !important;
	border-bottom: 1px solid #e8e8e8;
	margin: 0;
}

.sstoc-mobile .sstoc-mobile-list {
	padding: 0 !important;
	margin: 0 !important;
}

.sstoc-mobile .sstoc-mobile-item {
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid #f5f5f5;
}

.sstoc-mobile .sstoc-mobile-item:last-child {
	border-bottom: none;
}

.sstoc-mobile .sstoc-mobile-item a {
	display: flex;
	align-items: center;
	padding: 12px 18px;
	background: transparent !important;
	color: #444 !important;
	border: none !important;
	border-radius: 0;
	font-size: var(--sstoc-mobile-item-font-size, 0.95em) !important;
	line-height: 1.5;
	transition: background-color 0.15s ease;
}

.sstoc-mobile .sstoc-mobile-item a:hover {
	background: #fafafa !important;
}

.sstoc-mobile .sstoc-number {
	display: inline-block;
	min-width: 40px;
	font-weight: 500;
	color: #888;
	font-size: 0.9em;
	flex-shrink: 0;
}

.sstoc-mobile .sstoc-text {
	flex: 1;
	word-wrap: break-word;
	overflow-wrap: break-word;
}


/* =========================================
   PC (Fixed Type)
   ========================================= */
.sstoc-pc {
	position: fixed;
	top: var(--sstoc-top);
	bottom: 20px;
	width: var(--sstoc-width, 250px) !important;
	z-index: 99999;
	
	background: var(--sstoc-bg) !important;
	border: var(--sstoc-pc-border) !important;
	box-shadow: var(--sstoc-pc-shadow) !important;
	border-radius: 8px !important;
	padding: 15px !important;
	
	max-height: calc(100vh - var(--sstoc-top) - 20px);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

body.admin-bar .sstoc-pc {
	top: calc(var(--sstoc-top) + 32px) !important;
	max-height: calc(100vh - var(--sstoc-top) - 32px - 20px);
}

.sstoc-pc .sstoc-header {
	font-weight: bold;
	font-size: var(--sstoc-pc-title-font-size, 1em) !important;
	margin-bottom: 15px !important; 
	color: var(--sstoc-text) !important;
	opacity: 0.9;
	padding-bottom: 5px;
	border-bottom: 1px solid #eee;
	word-wrap: break-word;
}

/* 항목 간격(Gap) */
.sstoc-pc ul li {
	margin-bottom: 8px !important; 
}

.sstoc-pc ul li:last-child {
	margin-bottom: 0 !important;
}

.sstoc-pc ul li a {
	display: block;
	background: var(--sstoc-item-bg) !important; 
	color: var(--sstoc-text) !important;
	font-size: var(--sstoc-pc-item-font-size, 0.9em) !important;
	
	/* 패딩: 상하 8px, 좌우는 아래에서 정렬에 따라 지정 */
	padding-top: 2px !important;
	padding-bottom: 2px !important;
	
	margin: 0 !important;
	border-radius: 0; 
	border-left: 3px solid #ccc !important; /* 기본 막대 */
	
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

.sstoc-pc ul li a:hover {
	color: var(--sstoc-active) !important;
	background: #eaeaea !important;
	border-left-color: var(--sstoc-active) !important;
}

.sstoc-pc ul li a.active {
	color: var(--sstoc-active) !important;
	font-weight: bold;
	background: var(--sstoc-active-bg) !important;
	border-left: 3px solid var(--sstoc-active) !important;
}


/* ----------------------------------
   PC: 위치 (Left / Right)
   ---------------------------------- */
.sstoc-pc.sstoc-right { 
	left: 50%; 
	margin-left: var(--sstoc-offset); 
}

.sstoc-pc.sstoc-left { 
	right: 50%; 
	margin-right: var(--sstoc-offset); 
}


/* ----------------------------------
   PC: 텍스트 정렬 및 들여쓰기(설정값 적용)
   ---------------------------------- */

/* 1. 왼쪽 / 가운데 정렬 */
.sstoc-pc.sstoc-align-left .sstoc-header,
.sstoc-pc.sstoc-align-left ul li a { 
	text-align: left; 
}

.sstoc-pc.sstoc-align-center .sstoc-header,
.sstoc-pc.sstoc-align-center ul li a { 
	text-align: center; 
}

/* 기본 패딩 + 들여쓰기 계산 */
.sstoc-pc.sstoc-align-left ul li a,
.sstoc-pc.sstoc-align-center ul li a {
	padding-left: 12px !important;
	padding-right: 12px !important;
}

.sstoc-pc.sstoc-align-left .sstoc-item-h3 a,
.sstoc-pc.sstoc-align-center .sstoc-item-h3 a { 
	padding-left: calc(12px + var(--sstoc-indent-h3)) !important; 
}

.sstoc-pc.sstoc-align-left .sstoc-item-h4 a,
.sstoc-pc.sstoc-align-center .sstoc-item-h4 a { 
	padding-left: calc(12px + var(--sstoc-indent-h4)) !important; 
}


/* 2. 오른쪽 정렬 */
.sstoc-pc.sstoc-align-right .sstoc-header,
.sstoc-pc.sstoc-align-right ul li a { 
	text-align: right; 
	border-left: none !important;
	border-right: 3px solid #ccc !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
}

.sstoc-pc.sstoc-align-right ul li a:hover,
.sstoc-pc.sstoc-align-right ul li a.active {
	border-right-color: var(--sstoc-active) !important;
}

.sstoc-pc.sstoc-align-right .sstoc-item-h3 a { 
	padding-right: calc(12px + var(--sstoc-indent-h3)) !important; 
}

.sstoc-pc.sstoc-align-right .sstoc-item-h4 a { 
	padding-right: calc(12px + var(--sstoc-indent-h4)) !important; 
}