/*
Theme Name: TSShell
Description: TwentySixteen Shell — ANDRWJ.COM child theme.
Template: twentysixteen
Version: 0.7.10
Text Domain: tsshell
*/

/* Site appearance remains in Customize > Additional CSS; width uses the display settings contract. */
.site { max-width: 100%; }

/* Keep the document at its vertical scroll boundary, including touch bounce. */
html { overscroll-behavior-y: none; }

/* Structural rules only: release the sidebar column inside the existing site frame. */
body.tsshell-menu-stream #primary {
	float: none;
	width: 100%;
	margin: 0;
}

body.tsshell-menu-stream #primary .site-main > article > .entry-header,
body.tsshell-menu-stream #primary .site-main > article > .entry-content,
body.tsshell-menu-stream #primary .site-main > article > .entry-summary,
body.tsshell-menu-stream #primary .site-main > article > .entry-footer,
body.tsshell-menu-stream .comments-area,
body.tsshell-menu-stream .post-navigation,
body.tsshell-menu-stream .content-bottom-widgets {
	float: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.tsshell-group {
	clear: both;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid currentColor;
}

.tsshell-group-item {
	margin-top: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #ddd;
}

.tsshell-group-item h3 {
	margin: 0 0 .6rem;
}

.tsshell-group-summary {
	overflow-wrap: anywhere;
}

body.tsshell-menu-stream #primary .tsshell-group-container {
	float: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.tsshell-sidebar-handle, .tsshell-sidebar-edge { display: none; }
/* A viewport edge, independent of article length and current scroll position. */
.tsshell-sidebar-gestures .tsshell-sidebar-edge {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    z-index: 99;
    touch-action: pan-y pinch-zoom;
}

/* Overlay the drawer in the same row, while keeping its open height in flow. */
.tsshell-sidebar-ready #content {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.tsshell-sidebar-ready #content::before,
.tsshell-sidebar-ready #content::after {
	display: none;
}

.tsshell-sidebar-ready #primary {
	grid-area: 1 / 1;
	min-width: 0;
	float: none;
	width: 100%;
	margin: 0;
}

/* A full-width article must not retain Twenty Sixteen's sidebar-column gutters. */
.tsshell-sidebar-ready #primary .site-main > article > .entry-header,
.tsshell-sidebar-ready #primary .site-main > article > .entry-content,
.tsshell-sidebar-ready #primary .site-main > article > .entry-summary,
.tsshell-sidebar-ready #primary .site-main > article > .entry-footer,
.tsshell-sidebar-ready #primary .comments-area,
.tsshell-sidebar-ready #primary .post-navigation,
.tsshell-sidebar-ready #primary .content-bottom-widgets {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* WARNING: This grid item is anchored to #content's content-box edge.
 * sidebar.js position() corrects its offset to .site's OUTER right edge.
 * Do not replace this with viewport-right positioning or drop the padding
 * correction when changing drawer/gesture behavior. */
.tsshell-sidebar-ready .tsshell-sidebar-viewport {
	--tsshell-sidebar-handle-width: 22.4px;
	--tsshell-sidebar-border-width: 1px;
	--tsshell-sidebar-width: min(300px, calc(100vw - var(--tsshell-sidebar-handle-width) - 16px));
	grid-area: 1 / 1;
	justify-self: end;
	position: relative;
	right: var(--tsshell-sidebar-right, 0px);
	width: calc(var(--tsshell-sidebar-width) + var(--tsshell-sidebar-handle-width));
	overflow-x: clip;
	overflow-y: visible;
	overflow-anchor: none;
	pointer-events: none;
	z-index: 100;
}

/* Remove closed widgets from layout rather than relying on off-screen clipping.
 * The sticky handle still spans the article row; open widgets retain natural height. */
.tsshell-sidebar-ready .tsshell-sidebar-viewport:not(.is-open) #secondary {
	display: none;
}

.tsshell-sidebar-ready .tsshell-sidebar-drawer {
	display: flex;
	gap: 0;
	align-items: flex-start;
	height: 100%;
	transform: translateX(var(--tsshell-sidebar-width));
	transition: transform 0.1s ease-out;
}

.tsshell-sidebar-ready .is-open .tsshell-sidebar-drawer {
	height: auto;
	transform: translateX(0);
}

/*
 * 핸들 표현 규칙 — 변경 시 반드시 준수
 *
 * 1. **닫힌 상태:** 핸들의 오른쪽 끝을 `.site` 요소의 외곽 오른쪽 끝에 맞춥니다.
 * 2. **열린 상태:** 핸들과 Sidebar 사이에 **Sidebar 테두리 두께만큼의 간격**을 둡니다. 현재는 **1px**입니다.
 * 3. **겹침 금지:** 핸들이 Sidebar나 Sidebar 테두리를 덮지 않습니다.
 * 4. **오른쪽 테두리 없음:** 핸들의 오른쪽 `border-width`는 **0px**입니다.
 * 5. **포커스 외곽선 없음:** 마우스·키보드 포커스 모두 `outline`과 포커스 링·그림자를 그리지 않습니다. 기존 배경색·글자색 변화는 유지합니다.
 * 6. **반응형 유지:** 화면 폭·사이트 폭·패딩이 바뀌어도 위 정렬과 간격을 유지합니다.
 * 7. **계약 보존:** 제스처·Hammer.js 관련 코드를 변경할 때도 위 규칙을 유지하며, 관련 JS·CSS에 경고 주석을 남깁니다.
 */
.tsshell-sidebar-ready .tsshell-sidebar-handle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--tsshell-sidebar-handle-width);
	width: var(--tsshell-sidebar-handle-width);
	position: sticky;
	top: 44px;
	height: 76px;
	margin: 16px 0 0;
	padding: 0;
	border: 1px solid #c7c7c7;
	/* WARNING: The handle has no right border, including focused states. */
	border-width: 1px 0 1px 1px;
	outline: none;
	border-radius: 10px 0 0 10px;
	background: #f2f2f2;
	opacity: 0.8;
	color: #626262;
	box-shadow: none;
	pointer-events: auto;
	touch-action: pan-y pinch-zoom;
	cursor: pointer;
}

.tsshell-sidebar-ready .tsshell-sidebar-handle:hover,
.tsshell-sidebar-ready .tsshell-sidebar-handle:focus-visible {
	background: #e5e5e5;
	color: #282828;
}

/* WARNING: Focus must not draw an outline or ring around the handle.
 * Keep the existing focus background/color change as the focus indication. */
.tsshell-sidebar-ready .tsshell-sidebar-handle:focus,
.tsshell-sidebar-ready .tsshell-sidebar-handle:focus-visible {
	outline: none;
	box-shadow: none;
}

.tsshell-sidebar-ready .is-open .tsshell-sidebar-chevron {
	transform: rotate(180deg);
	transform-origin: 8px 9px;
}

.tsshell-sidebar-ready .tsshell-sidebar-viewport #secondary {
	float: none;
	/* WARNING: Leave exactly one panel border-width between handle and panel.
	 * Never overlap or cover the panel border. Subtract the same gap from panel
	 * width to preserve .site right-edge alignment and closed handle position. */
	flex: 0 0 calc(var(--tsshell-sidebar-width) - var(--tsshell-sidebar-border-width));
	width: calc(var(--tsshell-sidebar-width) - var(--tsshell-sidebar-border-width));
	box-sizing: border-box;
	touch-action: pan-y pinch-zoom;
	max-height: none;
	margin: 0 0 0 var(--tsshell-sidebar-border-width);
	padding: 24px;
	overflow: visible;
	background: #fefbfa;
	border: var(--tsshell-sidebar-border-width) solid #dedede;
	border-top-color: #2C3E50;
	border-left-color: #2C3E50;
	border-bottom-color: #2C3E50;
	border-radius: 10px 0 0 10px;
	box-shadow: none;
	pointer-events: auto;
}

@media (any-pointer: coarse) {
	.tsshell-sidebar-ready .tsshell-sidebar-viewport { --tsshell-sidebar-handle-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.tsshell-sidebar-ready .tsshell-sidebar-drawer {
		transition: none;
	}
}

/* Blog pagination: ten numbers and four compact SVG controls. */
.tsshell-pagination {
  border-top: 4px solid #1a1a1a;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 20px;
  margin-bottom: 40px;
}
.tsshell-pagination > a,
.tsshell-pagination > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 36px;
  padding: 0 4px;
  font-weight: 700;
  color: #2C3E50;
  box-shadow: none;
}
.tsshell-pagination .current {
  background: #2C3E50;
  color: #fff;
  border-radius: 3px;
}
.tsshell-pagination a:hover,
.tsshell-pagination a:focus-visible { color: #f82f19; }
.tsshell-pagination .is-disabled { opacity: 0.3; }

/* The tag stream uses one full-width article followed by contextual summaries. */
#primary .tsshell-taxonomy-stream > article > .entry-content,
#primary .tsshell-taxonomy-stream > article > .entry-footer {
  float: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
#primary .tsshell-taxonomy-stream > article { border-bottom: 0; }

textarea.tsshell-comment-autosize {
  box-sizing: border-box;
  min-height: 0;
  max-height: none;
  overflow-y: hidden;
  resize: none;
}

.tsshell-page-meta { display: flex; flex-wrap: wrap; gap: 1em; margin-top: .5em; }