/*
Theme Name: GeneratePress Raster
Theme URI: https://generatepress.com/
Description: GeneratePress 자식 테마. 직각 · 헤어라인 격자 · 산세리프만으로 구성한 스위스 편집 스타일입니다. 그림자와 둥근 모서리를 쓰지 않고 선과 여백으로만 정렬합니다. 색상은 시그널(레드) · 코발트(블루) · 오커(머스터드) · 그라파이트(무채색) 네 가지를 사용자정의하기에서 전환합니다.
Author: gwang
Author URI: https://example.com
Template: generatepress
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-raster
Tags: blog, one-column, two-columns, custom-menu, custom-colors, editor-style, translation-ready, full-width-template
*/

/* =========================================================
   01. 팔레트 — 네 가지
   지면은 넷 다 밝은 종이색입니다. 다른 것은 강조색 하나뿐입니다.
   스위스 편집 디자인은 색을 늘리지 않고 하나를 정확한 자리에 씁니다.
   ========================================================= */

:root,
body.palette-signal {
	color-scheme: light;

	/* 종이 — 순백은 아주 조금 눌러 씁니다. 흰 화면이 그대로면 눈이 부십니다. */
	--c-bg:          #f4f4f2;
	--c-bg-deep:     #ebebe8;
	--c-surface:     #ffffff;
	--c-surface-alt: #f7f7f5;

	/* 글자 */
	--c-ink:         #111214;
	--c-body:        #4b4e54;
	--c-muted:       #85888f;

	/* 강조 — 스위스 편집의 정통. 넓은 면에 바르지 않고 선 · 숫자 · 단추에만 씁니다. */
	--c-accent:      #d2372c;
	--c-accent-deep: #a8281f;
	--c-accent-soft: #b52d23;
	--c-accent-tint: rgba(210, 55, 44, .08);
	--c-on-accent:   #ffffff;

	/* 선 — 이 테마의 전부입니다. 두 굵기만 씁니다. */
	--c-line:        #dcdcd8;
	--c-line-strong: #111214;

	/* 격자 안내선 (사용자정의하기에서 켰을 때만 보입니다) */
	--c-guide:       rgba(210, 55, 44, .16);
}

body.palette-cobalt {
	color-scheme: light;

	--c-bg:          #f3f4f6;
	--c-bg-deep:     #e9eaee;
	--c-surface:     #ffffff;
	--c-surface-alt: #f6f7f9;

	--c-ink:         #0f1116;
	--c-body:        #494e58;
	--c-muted:       #838894;

	--c-accent:      #1a4bc4;
	--c-accent-deep: #12379a;
	--c-accent-soft: #163fa8;
	--c-accent-tint: rgba(26, 75, 196, .08);
	--c-on-accent:   #ffffff;

	--c-line:        #d9dbe0;
	--c-line-strong: #0f1116;

	--c-guide:       rgba(26, 75, 196, .16);
}

body.palette-ochre {
	color-scheme: light;

	--c-bg:          #f6f4ef;
	--c-bg-deep:     #edeae2;
	--c-surface:     #ffffff;
	--c-surface-alt: #faf8f4;

	--c-ink:         #16140f;
	--c-body:        #4f4b43;
	--c-muted:       #8a857a;

	--c-accent:      #a5701a;
	--c-accent-deep: #7d5312;
	--c-accent-soft: #8c5e15;
	--c-accent-tint: rgba(165, 112, 26, .09);
	--c-on-accent:   #fffdf8;

	--c-line:        #ddd9d0;
	--c-line-strong: #16140f;

	--c-guide:       rgba(165, 112, 26, .18);
}

/* 색을 아예 쓰지 않는 판. 강조도 먹색으로 두어 인쇄물처럼 절제됩니다. */
body.palette-graphite {
	color-scheme: light;

	--c-bg:          #f4f4f4;
	--c-bg-deep:     #ebebeb;
	--c-surface:     #ffffff;
	--c-surface-alt: #f7f7f7;

	--c-ink:         #101010;
	--c-body:        #4d4d4d;
	--c-muted:       #858585;

	--c-accent:      #101010;
	--c-accent-deep: #000000;
	--c-accent-soft: #333333;
	--c-accent-tint: rgba(16, 16, 16, .06);
	--c-on-accent:   #ffffff;

	--c-line:        #d8d8d8;
	--c-line-strong: #101010;

	--c-guide:       rgba(16, 16, 16, .14);
}

/* =========================================================
   02. 토큰 — 서체 · 격자 · 리듬
   ========================================================= */

:root {
	/* 서체. 라틴은 Archivo(그로테스크), 한글은 Pretendard 가 받습니다.
	   제목도 본문도 같은 산세리프입니다. 크기와 굵기로만 위계를 만듭니다. */
	--font-sans: "Archivo", "Pretendard Variable", Pretendard, -apple-system,
		BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
		system-ui, sans-serif;

	/* 숫자 · 라벨 · 메타 정보용. 기술 문서의 인상을 냅니다. */
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas,
		"Pretendard Variable", Pretendard, "Malgun Gothic", monospace;

	/* 형태 — 둥근 모서리를 쓰지 않습니다. 직각이 격자를 만듭니다. */
	--radius: 0;

	/* 선 굵기 — 두 가지만 씁니다. */
	--hair: 1px;
	--rule: 2px;

	/* 자간 — 작은 대문자 라벨에만 넓게 줍니다. */
	--track: .14em;
	--track-wide: .2em;

	/* 리듬 */
	--space-xs: .5rem;
	--space-sm: 1rem;
	--space:    clamp(1.5rem, 3vw, 2.5rem);
	--space-lg: clamp(2.5rem, 5vw, 4.5rem);
	--space-xl: clamp(4rem, 8vw, 7rem);

	/* 지면 안쪽 여백 */
	--pad: clamp(1.25rem, 3vw, 2.75rem);

	/* 헤더와 본문 사이 간격.
	   0 이면 내비 아래 선에 본문이 그대로 붙습니다. 이 테마의 기본값입니다.
	   띄우고 싶으면 clamp(1.5rem, 3.5vw, 3rem) 처럼 되돌리세요. */
	--gap-top:    0;
	/* 본문과 푸터 사이 간격. GeneratePress 가 .site-main 에 주는 20px 와
	   이 값이 더해져 실제 간격이 됩니다(푸터 margin-top 은 0 으로 두었습니다). */
	--gap-bottom: 2rem;

	/* 격자 안내선이 기준으로 삼는 폭. GeneratePress 컨테이너 폭과 맞추세요. */
	--wrap: 1200px;
	--cols: 12;

	/* 글줄 길이 제한값.
	   기본값으로는 '적용되지 않습니다' — 사용자정의하기 > Raster 스타일 >
	   '낱글 본문 글줄 길이' 에 값을 넣었을 때만 켜집니다(body.raster-measure).
	   제한이 없는 상태가 GeneratePress 기본 동작이고, 디자인 글처럼 스스로
	   폭을 정하는 본문을 좁히지 않습니다. */
	--measure: 40rem;

	--ease: cubic-bezier(.2, .6, .2, 1);
}

/* =========================================================
   03. 기본 골격
   ========================================================= */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	background: var(--c-bg);
	color: var(--c-body);
	font-family: var(--font-sans);
	font-size: 16.5px;
	line-height: 1.65;
	letter-spacing: -.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "tnum" 0;
}

.site-content {
	padding-top: var(--gap-top);
	padding-bottom: var(--gap-bottom);
}

::selection {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

:focus-visible {
	outline: var(--rule) solid var(--c-accent);
	outline-offset: 2px;
}

/* 격자 안내선 — 디자인을 맞출 때만 켭니다 (사용자정의하기 > Raster 스타일).
   실제 방문자에게 보여 주려고 만든 것이 아니라, 요소를 열에 맞추는 자입니다. */
body.raster-guides::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9997;
	pointer-events: none;
	max-width: var(--wrap);
	margin-inline: auto;
	background-image: repeating-linear-gradient(
		to right,
		var(--c-guide) 0 var(--hair),
		transparent var(--hair) calc(100% / var(--cols))
	);
}

/* =========================================================
   04. 타이포그래피
   위계는 색이 아니라 크기 · 굵기 · 여백으로만 만듭니다.
   ========================================================= */

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--font-sans);
	color: var(--c-ink);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-wrap: balance;
	word-break: keep-all;
	overflow-wrap: break-word;
	margin: 0 0 .5em;
}

h1, .entry-title { font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.9rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
h4 { font-size: 1.1rem; }

/* 작은 제목은 본문 흐름의 라벨입니다. 크기 대신 대문자 · 자간으로 구분합니다. */
h5, h6 {
	font-family: var(--font-mono);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: .8em;
}

/* 본문 소제목 — 위에 선을 긋고 그 아래에 붙입니다. 장이 바뀌는 표시입니다. */
/* 선 위 간격은 rem(고정), 선과 글자 사이는 em(제목 크기에 비례) 으로 둡니다.
   em 으로 주면 제목 글꼴이 커질수록 위 여백이 같이 부풀어, 넓은 화면에서
   한 문단만큼의 빈 자리가 생깁니다. */
.entry-content > h2 {
	margin-top: 2.75rem;
	padding-top: .55em;
	border-top: var(--rule) solid var(--c-line-strong);
}

.entry-content > h3 {
	margin-top: 2rem;
	padding-top: .5em;
	border-top: var(--hair) solid var(--c-line);
}

p, li, dd, figcaption, .entry-meta {
	word-break: keep-all;
	overflow-wrap: break-word;
}

p { margin: 0 0 1.3em; text-wrap: pretty; }

strong, b { color: var(--c-ink); font-weight: 600; }

a {
	color: var(--c-accent);
	text-decoration: none;
	transition: color .2s var(--ease);
}

a:hover { color: var(--c-accent-deep); }

/* 본문 링크는 밑줄을 둡니다. 스위스 편집에서 링크는 장식이 아니라 표시입니다. */
.entry-content a:not(.btn):not(.link-arrow):not(.wp-block-button__link) {
	text-decoration: underline;
	text-decoration-thickness: var(--hair);
	text-underline-offset: .2em;
	text-decoration-color: var(--c-accent);
}

.entry-content a:not(.btn):not(.link-arrow):not(.wp-block-button__link):hover {
	background: var(--c-accent-tint);
}

hr,
.wp-block-separator {
	border: 0;
	border-top: var(--rule) solid var(--c-line-strong);
	margin: var(--space-lg) 0;
	height: 0;
}

/* 라벨 — 카테고리 · 절 이름처럼 작게 벌려 쓰는 글자입니다. */
.raster-label,
.raster-eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-accent);
}

/* 소제목 번호 — 내용이 실제로 순서가 있을 때만 켭니다
   (사용자정의하기 > Raster 스타일 > 소제목에 번호 매기기). */
body.raster-numbered .entry-content { counter-reset: raster-h2; }

body.raster-numbered .entry-content > h2::before {
	counter-increment: raster-h2;
	content: counter(raster-h2, decimal-leading-zero);
	display: block;
	font-family: var(--font-mono);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: var(--track);
	color: var(--c-accent);
	margin-bottom: .5rem;
}

/* =========================================================
   05. 헤더 · 내비게이션
   ========================================================= */

.site-header {
	background: var(--c-bg);
	border-bottom: var(--rule) solid var(--c-line-strong);
}

.site-header .inside-header {
	padding-top: clamp(1rem, 2.4vw, 1.75rem);
	padding-bottom: clamp(1rem, 2.4vw, 1.75rem);
}

.site-title,
.site-title a {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -.035em;
	color: var(--c-ink);
	line-height: 1;
	margin: 0;
}

.site-title a:hover { color: var(--c-accent); }

.site-description {
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
	margin: .5rem 0 0;
}

.main-navigation {
	background: var(--c-bg);
	border-bottom: var(--hair) solid var(--c-line);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	font-family: var(--font-mono);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-body);
	line-height: 1;
	padding-top: 1.05rem;
	padding-bottom: 1.05rem;
	transition: color .2s var(--ease), background .2s var(--ease);
}

/* 메뉴 항목 사이를 세로선으로 나눕니다. 격자의 연장입니다. */
.main-navigation .main-nav > ul > li {
	border-left: var(--hair) solid var(--c-line);
}

.main-navigation .main-nav > ul > li:last-child {
	border-right: var(--hair) solid var(--c-line);
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a {
	background: var(--c-accent-tint);
	color: var(--c-ink);
}

.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--c-ink);
	box-shadow: inset 0 calc(var(--rule) * -1) 0 var(--c-accent);
}

.main-navigation ul ul {
	background: var(--c-surface);
	border: var(--hair) solid var(--c-line-strong);
	padding: 0;
}

.main-navigation ul ul li a {
	padding: .8rem 1rem;
	border-bottom: var(--hair) solid var(--c-line);
}

.main-navigation ul ul li:last-child a { border-bottom: 0; }

body.raster-sticky .site-header {
	position: sticky;
	top: 0;
	z-index: 120;
	background: var(--c-bg);
	transition: padding .25s var(--ease);
}

body.raster-sticky.is-scrolled .site-header .inside-header {
	padding-top: .7rem;
	padding-bottom: .7rem;
}

/* =========================================================
   06. 지면 — 카드가 아니라 '판'
   그림자 없이, 흰 면과 헤어라인만으로 구분합니다.
   ========================================================= */

.separate-containers .inside-article,
.separate-containers .inside-page,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.separate-containers .site-main > .no-results,
.one-container .site-content .content-area {
	background: var(--c-surface);
	border: var(--hair) solid var(--c-line);
	border-radius: var(--radius);
	padding: var(--pad);
}

.separate-containers .site-main > *:not(:last-child) {
	margin-bottom: var(--space-sm);
}

/* 지면 맨 위 요소의 윗선은 긋지 않습니다 (내비 아래 선과 겹칩니다).
   흰 면과 종이색 바탕의 밝기 차이가 경계를 대신합니다. */
.site-main > :first-child > .inside-article,
.site-main > :first-child > .inside-page,
.site-main > .page-header:first-child,
.content-area > .page-header:first-child {
	border-top: 0;
}

.entry-content { font-size: 1rem; }
.entry-content > *:last-child { margin-bottom: 0; }

/* 낱글 머리 — 제목 아래 굵은 선 하나. */
.single .entry-header,
.page .entry-header {
	padding-bottom: 1.2rem;
	border-bottom: var(--rule) solid var(--c-line-strong);
	margin-bottom: 2rem;
}

.entry-meta {
	font-family: var(--font-mono);
	font-size: .74rem;
	letter-spacing: .02em;
	color: var(--c-muted);
	margin-top: .9rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
}

.entry-meta a { color: var(--c-muted); }
.entry-meta a:hover { color: var(--c-accent); }

.entry-meta .cat-links a,
.entry-meta .tags-links a {
	display: inline-block;
	font-size: .7rem;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-accent);
	border: var(--hair) solid var(--c-accent);
	padding: .1rem .5rem;
	margin-right: .25rem;
}

.entry-meta .cat-links a:hover,
.entry-meta .tags-links a:hover {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

.page-header .page-title,
.archive .page-title,
.search .page-title {
	font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
	margin-bottom: .3em;
}

.page-header .taxonomy-description { color: var(--c-muted); }

/* =========================================================
   07. 목록 — 격자 행
   카드를 띄우지 않고, 선으로 나눈 행에 정보를 정렬합니다.
   ========================================================= */

body.raster-rows.blog .inside-article,
body.raster-rows.archive .inside-article,
body.raster-rows.search-results .inside-article {
	border: 0;
	border-top: var(--hair) solid var(--c-line);
	padding: clamp(1.4rem, 3vw, 2.2rem) 0;
	background: transparent;

	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
	column-gap: var(--space);
	align-items: start;
}

/* 첫 행 위에는 선을 긋지 않습니다. 바로 위 내비게이션 아래 선이 이미
   목록의 윗변이기 때문입니다. 같은 자리에 선을 두 번 그으면 굵기만 어긋나 보입니다.
   (--gap-top 을 다시 띄우면 아래 주석을 풀어 굵은 선을 되살리세요.) */
body.raster-rows .site-main > article:first-of-type .inside-article {
	border-top: 0;
	/* border-top: var(--rule) solid var(--c-line-strong); */
}

body.raster-rows .site-main > *:not(:last-child) {
	margin-bottom: 0;
}

/* 왼쪽 = 제목과 요약, 오른쪽 = 메타. 오른쪽 열은 오른쪽 끝에 맞춥니다. */
body.raster-rows.blog .entry-summary,
body.raster-rows.archive .entry-summary,
body.raster-rows.search-results .entry-summary,
body.raster-rows.blog .post-image,
body.raster-rows.archive .post-image,
body.raster-rows.search-results .post-image,
body.raster-rows.blog .read-more,
body.raster-rows.archive .read-more,
body.raster-rows.search-results .read-more {
	grid-column: 1;
}

/* 글 머리는 껍질만 풀어 제목과 메타를 각자 열에 앉힙니다.
   낱글 화면(.single)에는 걸리지 않게 목록 화면으로 한정합니다. */
body.raster-rows.blog .entry-header,
body.raster-rows.archive .entry-header,
body.raster-rows.search-results .entry-header {
	display: contents;
}

body.raster-rows.blog .entry-header .entry-meta,
body.raster-rows.archive .entry-header .entry-meta,
body.raster-rows.search-results .entry-header .entry-meta {
	grid-column: 2;
	grid-row: 1;
	margin-top: .45rem;
	justify-content: flex-end;
	text-align: right;
}

/* 제목 안에 링크가 들어가도 제목은 먹색입니다. 강조색은 링크 표시가 아니라
   위치 표시로만 씁니다 (일부 설정에서는 낱글 제목도 링크로 출력됩니다). */
.entry-title a { color: var(--c-ink); }
.entry-title a:hover { color: var(--c-accent); }

.blog .entry-title,
.archive .entry-title,
.search-results .entry-title {
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
	margin-bottom: .4em;
}

.blog .entry-title a,
.archive .entry-title a,
.search-results .entry-title a {
	color: var(--c-ink);
	background-image: linear-gradient(var(--c-accent), var(--c-accent));
	background-size: 0 var(--rule);
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .3s var(--ease), color .2s var(--ease);
}

.blog .entry-title a:hover,
.archive .entry-title a:hover,
.search-results .entry-title a:hover {
	color: var(--c-accent);
	background-size: 100% var(--rule);
}

.entry-summary { color: var(--c-body); }
.entry-summary p:last-child { margin-bottom: 0; }

.post-image,
.page-header-image { margin-bottom: 1.2rem; }

.post-image img,
.wp-post-image,
.entry-content img,
.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

figcaption,
.wp-element-caption {
	font-family: var(--font-mono);
	font-size: .74rem;
	color: var(--c-muted);
	text-align: left;
	margin-top: .6rem;
	padding-left: .6rem;
	border-left: var(--rule) solid var(--c-accent);
}

.read-more,
.more-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--font-mono);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-accent);
	margin-top: .9rem;
}

.read-more::after,
.more-link::after { content: "→"; }

/* =========================================================
   08. 본문 요소 — 목록 · 인용 · 표 · 코드
   ========================================================= */

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}

.entry-content li { margin-bottom: .45em; }
.entry-content ul li::marker { color: var(--c-accent); }

.entry-content ol {
	list-style: none;
	counter-reset: raster-ol;
	padding-left: 0;
}

.entry-content ol > li {
	counter-increment: raster-ol;
	display: grid;
	grid-template-columns: 2.4rem 1fr;
	align-items: baseline;
}

.entry-content ol > li::before {
	content: counter(raster-ol, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: .8rem;
	color: var(--c-accent);
}

blockquote,
.wp-block-quote {
	margin: var(--space) 0;
	padding: 0 0 0 1.4rem;
	border: 0;
	border-left: var(--rule) solid var(--c-accent);
	background: none;
	color: var(--c-ink);
	font-size: 1.22rem;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.015em;
}

blockquote p:last-child { margin-bottom: 0; }

blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: .8rem;
	font-family: var(--font-mono);
	font-size: .74rem;
	font-style: normal;
	font-weight: 400;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
}

.wp-block-pullquote {
	border-top: var(--rule) solid var(--c-line-strong);
	border-bottom: var(--rule) solid var(--c-line-strong);
	padding: var(--space) 0;
	text-align: left;
}

/* 표 — 세로선을 쓰지 않습니다. 가로선과 정렬만으로 읽힙니다. */
table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space) 0;
	font-size: .94rem;
}

th {
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
	text-align: left;
	padding: .7rem .9rem .7rem 0;
	border-bottom: var(--rule) solid var(--c-line-strong);
	white-space: nowrap;
}

td {
	padding: .8rem .9rem .8rem 0;
	border-bottom: var(--hair) solid var(--c-line);
	font-variant-numeric: tabular-nums;
	vertical-align: top;
}

/* 숫자 열은 오른쪽에 맞춥니다. */
th:not(:first-child),
td:not(:first-child) { text-align: right; padding-right: 0; }

.wp-block-table { overflow-x: auto; }

code, kbd, samp {
	font-family: var(--font-mono);
	font-size: .88em;
	background: var(--c-surface-alt);
	border: var(--hair) solid var(--c-line);
	padding: .1em .35em;
	color: var(--c-ink);
}

pre,
.wp-block-code {
	background: var(--c-surface-alt);
	border: var(--hair) solid var(--c-line);
	border-left: var(--rule) solid var(--c-line-strong);
	padding: 1.2rem 1.4rem;
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: .85rem;
	line-height: 1.65;
	margin: var(--space) 0;
}

pre code { background: none; border: 0; padding: 0; }

/* =========================================================
   09. 버튼 · 부품 · 숏코드
   ========================================================= */

.btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--font-mono);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	line-height: 1;
	padding: .95rem 1.5rem;
	border: var(--hair) solid var(--c-accent);
	border-radius: var(--radius);
	background: var(--c-accent);
	color: var(--c-on-accent);
	cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease);
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-block-search__button:hover {
	background: var(--c-accent-deep);
	border-color: var(--c-accent-deep);
	color: var(--c-on-accent);
}

.btn-cta {
	width: 100%;
	padding: 1.1rem 1.5rem;
	justify-content: space-between;
}

.btn-cta::after { content: "→"; }

.btn-outline {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-line-strong);
}

.btn-outline:hover {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-surface);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--font-mono);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-accent);
}

.link-arrow::after { content: "→"; }

.raster-badge {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-ink);
	border: var(--hair) solid var(--c-line-strong);
	padding: .18rem .6rem;
}

/* 안내 상자 — 배경을 칠하지 않고 선으로 묶습니다. */
.box-note,
.box-tip,
.box-warn {
	margin: var(--space) 0;
	padding: 1.2rem 1.4rem;
	border: var(--hair) solid var(--c-line);
	border-left: var(--rule) solid var(--c-line-strong);
	background: var(--c-surface-alt);
	font-size: .96rem;
}

.box-note > strong,
.box-tip > strong,
.box-warn > strong {
	display: block;
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: .55rem;
}

.box-tip { border-left-color: var(--c-accent); }
.box-tip > strong { color: var(--c-accent); }

.box-warn { border-left-color: #c2410c; }
.box-warn > strong { color: #c2410c; }

.box-note p:last-child,
.box-tip p:last-child,
.box-warn p:last-child { margin-bottom: 0; }

/* 수치 줄 — 표와 같은 규칙. 위아래 선과 세로 구분선만 씁니다. */
.raster-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	margin: var(--space) 0;
	border-top: var(--rule) solid var(--c-line-strong);
	border-bottom: var(--hair) solid var(--c-line);
}

.raster-stats > div {
	padding: 1.1rem 1rem 1.1rem 0;
	border-left: var(--hair) solid var(--c-line);
	padding-left: 1rem;
}

.raster-stats > div:first-child { border-left: 0; padding-left: 0; }

.raster-stats strong {
	display: block;
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}

.raster-stats small {
	display: block;
	margin-top: .5rem;
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
}

/* 구분선 — 라벨을 얹을 수 있는 선. */
.ornament {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: var(--space-lg) 0;
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
}

.ornament::before { content: ""; width: 3rem; height: var(--rule); background: var(--c-accent); flex: 0 0 auto; }
.ornament::after { content: ""; flex: 1; height: var(--hair); background: var(--c-line); }

/* 표제 블록 — 큰 제목과 한 문단. 배경 없이 선으로만 묶습니다. */
.raster-hero {
	margin: 0 0 var(--space);
	padding: 0 0 var(--space-sm);
	border-bottom: var(--rule) solid var(--c-line-strong);
}

.raster-hero > .raster-eyebrow { margin-bottom: .9rem; }

.raster-hero h2 {
	font-size: clamp(2rem, 1.3rem + 3.2vw, 3.8rem);
	margin-bottom: .4em;
	max-width: 20ch;
}

.raster-hero p {
	max-width: 46ch;
	font-size: 1.05rem;
}

.raster-hero .btn { margin-top: .6rem; }

/* =========================================================
   10. 사이드바 위젯 — 상자를 만들지 않습니다.
   ========================================================= */

.widget-area .widget {
	background: none;
	border: 0;
	border-top: var(--rule) solid var(--c-line-strong);
	padding: 1rem 0 0;
	font-size: .94rem;
}

.widget-area .widget + .widget { margin-top: var(--space); }

/* 사이드바가 본문 옆에 놓일 때, 첫 위젯의 윗선도 내비 아래 선과 겹칩니다.
   세로로 쌓이는 좁은 화면에서는 경계가 필요하므로 그대로 둡니다. */
@media (min-width: 769px) {
	.site-content .widget-area .widget:first-child { border-top: 0; }
}

.widget-area .widget-title,
.widget .widget-title {
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: .9rem;
}

.widget ul { margin: 0; padding: 0; list-style: none; }

.widget li {
	padding: .5rem 0;
	border-bottom: var(--hair) solid var(--c-line);
}

.widget li:last-child { border-bottom: 0; }

.widget a { color: var(--c-body); }
.widget a:hover { color: var(--c-accent); }

/* =========================================================
   11. 폼
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	background: var(--c-surface);
	border: var(--hair) solid var(--c-line-strong);
	border-radius: var(--radius);
	color: var(--c-ink);
	font-family: var(--font-sans);
	font-size: .95rem;
	padding: .8rem .9rem;
	transition: border-color .2s var(--ease);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--c-accent);
	outline: none;
	box-shadow: inset 0 0 0 var(--hair) var(--c-accent);
}

::placeholder { color: var(--c-muted); opacity: 1; }

label {
	display: block;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: .45rem;
}

/* =========================================================
   12. 댓글 · 페이지 이동
   ========================================================= */

.comments-title,
.comment-reply-title {
	font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
	padding-bottom: .7rem;
	border-bottom: var(--rule) solid var(--c-line-strong);
	margin-bottom: 1.3rem;
}

.comment-list { margin: 0; padding: 0; list-style: none; }

.comment-body {
	padding: 1.2rem 0;
	border-bottom: var(--hair) solid var(--c-line);
}

.comment-author .fn { color: var(--c-ink); font-weight: 600; font-style: normal; }

.comment-metadata {
	font-family: var(--font-mono);
	font-size: .72rem;
	color: var(--c-muted);
}

.comment-author img.avatar { border-radius: var(--radius); }

.comment-reply-link {
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: var(--track);
	text-transform: uppercase;
}

.paging-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	align-items: stretch;
}

.paging-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.8rem;
	height: 2.8rem;
	padding: 0 .7rem;
	margin-left: -1px;
	border: var(--hair) solid var(--c-line-strong);
	color: var(--c-ink);
	font-family: var(--font-mono);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	transition: background .2s var(--ease), color .2s var(--ease);
}

.paging-navigation .page-numbers:hover {
	background: var(--c-accent-tint);
}

.paging-navigation .page-numbers.current {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent);
}

.post-navigation .nav-previous,
.post-navigation .nav-next { font-family: var(--font-mono); font-size: .78rem; }

/* =========================================================
   13. 푸터 — 열을 세로선으로 나눕니다.
   ========================================================= */

.site-footer {
	/* 본문과의 간격은 --gap-bottom 한 곳에서만 잡습니다.
	   여기에도 여백을 주면 두 값이 더해져 지나치게 벌어집니다. */
	margin-top: 0;
	border-top: var(--rule) solid var(--c-line-strong);
	background: var(--c-bg);
	color: var(--c-body);
}

.site-footer .footer-widgets {
	padding-top: var(--space);
	padding-bottom: var(--space);
}

.site-footer .widget {
	background: none;
	border: 0;
	border-left: var(--hair) solid var(--c-line);
	padding: 0 0 0 var(--space-sm);
	margin: 0;
}

.site-footer .widget:first-child {
	border-left: 0;
	padding-left: 0;
}

.site-footer .widget-title { margin-bottom: .8rem; }

.site-info {
	border-top: var(--hair) solid var(--c-line);
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .02em;
	color: var(--c-muted);
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
}

.site-info a { color: var(--c-body); }
.site-info a:hover { color: var(--c-accent); }

.generate-back-to-top {
	background: var(--c-ink);
	border: 0;
	border-radius: var(--radius);
	color: var(--c-surface);
	transition: background .2s var(--ease);
}

.generate-back-to-top:hover,
.generate-back-to-top:focus { background: var(--c-accent); }

/* =========================================================
   14. 사이드바를 쓰지 않을 때
   GeneratePress 레이아웃 > 사이드바 = "콘텐츠(사이드바 없음)" 이면
   body 에 no-sidebar 가 붙습니다.
   ========================================================= */

/* 낱글 · 페이지 — 글줄은 읽기 좋은 길이로 모으고, 자료는 넓게 씁니다.

   사용자정의하기의 '낱글 본문 글줄 길이' 에 값을 넣었을 때만 켜집니다
   (body.raster-measure). 값이 없는 기본 상태에서는 이 규칙이 통째로 빠지고,
   GeneratePress 기본처럼 본문이 컨테이너 폭을 가득 씁니다. */
body.raster-measure.no-sidebar.single .entry-header,
body.raster-measure.no-sidebar.page .entry-header,
body.raster-measure.no-sidebar.single .entry-content > *:not(:where(.alignwide, .alignfull,
	.raster-hero, .raster-stats, table, figure, hr, style,
	.wp-block-table, .wp-block-image, .wp-block-gallery, .wp-block-embed,
	.wp-block-separator, .ornament,
	.pts-preset, [class*="-landing"], [class*="pl-wrap"])),
body.raster-measure.no-sidebar.page .entry-content > *:not(:where(.alignwide, .alignfull,
	.raster-hero, .raster-stats, table, figure, hr, style,
	.wp-block-table, .wp-block-image, .wp-block-gallery, .wp-block-embed,
	.wp-block-separator, .ornament,
	.pts-preset, [class*="-landing"], [class*="pl-wrap"])) {
	max-width: var(--measure);
}

/* 스위스 편집에서는 가운데로 모으지 않고 왼쪽 끝에 맞춥니다.
   오른쪽에 남는 여백이 격자의 일부입니다. */
body.raster-measure.no-sidebar .entry-content > .alignwide,
body.raster-measure.no-sidebar .entry-content > .raster-stats,
body.raster-measure.no-sidebar .entry-content > table,
body.raster-measure.no-sidebar .entry-content > .wp-block-table,
body.raster-measure.no-sidebar .entry-content > figure {
	max-width: min(100%, 58rem);
}

/* 목록은 행 배치라 사이드바가 없어도 그대로 동작합니다.
   폭이 넓어진 만큼 메타 열만 조금 좁힙니다. */
@media (min-width: 1100px) {
	body.raster-rows.no-sidebar .inside-article {
		grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
	}
}

/* =========================================================
   15. 읽기 진행 · 움직임
   이 테마는 움직임을 거의 쓰지 않습니다. 진행 표시 한 줄이 전부입니다.
   ========================================================= */

@supports (animation-timeline: scroll()) {
	body.raster-progress::after {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: var(--rule);
		z-index: 9999;
		transform-origin: 0 50%;
		background: var(--c-accent);
		animation: raster-progress linear both;
		animation-timeline: scroll(root block);
	}

	@keyframes raster-progress {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* =========================================================
   16. 반응형 · 인쇄
   ========================================================= */

@media (max-width: 900px) {
	/* 목록 행의 메타를 제목 아래로 내립니다. */
	body.raster-rows.blog .inside-article,
	body.raster-rows.archive .inside-article,
	body.raster-rows.search-results .inside-article {
		grid-template-columns: minmax(0, 1fr);
	}

	body.raster-rows.blog .entry-header .entry-meta,
	body.raster-rows.archive .entry-header .entry-meta,
	body.raster-rows.search-results .entry-header .entry-meta {
		grid-column: 1;
		grid-row: auto;
		justify-content: flex-start;
		text-align: left;
		order: 3;
	}
}

@media (max-width: 768px) {
	body { font-size: 16px; }

	.main-navigation .main-nav > ul > li { border-left: 0; }
	.main-navigation .main-nav > ul > li:last-child { border-right: 0; }

	.main-navigation .main-nav ul li a {
		border-bottom: var(--hair) solid var(--c-line);
	}

	.site-footer .widget {
		border-left: 0;
		padding-left: 0;
		border-top: var(--hair) solid var(--c-line);
		padding-top: 1rem;
	}

	.site-footer .widget:first-child { border-top: 0; padding-top: 0; }
}

@media print {
	body { background: #fff; color: #000; }

	body::before,
	body::after,
	.site-header,
	.main-navigation,
	.site-footer,
	.widget-area,
	.generate-back-to-top { display: none !important; }

	.separate-containers .inside-article {
		border: 0;
		padding: 0;
	}
}

/* =========================================================
   17. 블록 에디터 보정
   ========================================================= */

.editor-styles-wrapper {
	background: var(--c-bg);
	color: var(--c-body);
	font-family: var(--font-sans);
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper .editor-post-title__input {
	font-family: var(--font-sans);
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--c-ink);
}