/*
Theme Name: GeneratePress Child (west84999)
Template: generatepress
Description: west84999 국문 사이트 커스터마이징용 자식 테마입니다. 부모 테마(GeneratePress) 파일은 절대 수정하지 말고 이 파일에서 작업하세요.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: generatepress-cafe24
*/

/* ==========================================================================
   [1] 디자인 토큰 — 사이트 전체 톤은 여기 값만 바꾸면 됩니다
   ========================================================================== */
:root {
	/* --- 브랜드 색상 ---
	   올라운드샵은 파랑을 쓰지 않습니다. 먹색이 기본이고
	   포인트는 라임(--arf-lime) 하나뿐입니다. */
	--c-brand:        #0f1216;   /* 링크·강조 (먹색) */
	--c-brand-dark:   #000000;   /* 마우스 올렸을 때 */
	--c-brand-soft:   #f1f3f5;   /* 옅은 배경용 */

	/* --- 글자 색 --- */
	--c-heading:      #14181d;   /* 제목 */
	--c-text:         #2b3138;   /* 본문 */
	--c-muted:        #6b7280;   /* 날짜, 카테고리 등 보조 정보 */

	/* --- 배경 / 선 --- */
	--c-bg:           #ffffff;
	--c-bg-soft:      #f6f7f9;   /* 사이트 전체 바탕 */
	--c-border:       #e5e7eb;

	/* --- 글꼴 --- */
	--font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
	             system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
	--fs-base:    17px;   /* 본문 기본 크기 */
	--lh-base:    1.8;    /* 줄 간격 — 한글은 1.7~1.9가 편합니다 */

	/* --- 여백 / 모양 --- */
	--space-sm:   12px;
	--space-md:   24px;
	--space-lg:   48px;
	--radius:     10px;

	/* 깊이 표현은 테두리가 아니라 그림자로.
	   1층은 1px 테두리 역할, 2층은 살짝 뜨는 느낌, 3층은 은은한 확산.
	   테두리와 달리 투명도라서 어떤 배경 위에서도 자연스럽습니다. */
	--shadow-border:
		0 0 0 1px oklch(0 0 0 / .06),
		0 1px 2px -1px oklch(0 0 0 / .06),
		0 2px 4px 0 oklch(0 0 0 / .04);
	--shadow-border-hover:
		0 0 0 1px oklch(0 0 0 / .08),
		0 1px 2px -1px oklch(0 0 0 / .08),
		0 2px 4px 0 oklch(0 0 0 / .06);
}

/* ==========================================================================
   [2] 타이포그래피 — 한글 가독성 기본 세팅
   ========================================================================== */
body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-text);
	background-color: var(--c-bg-soft);
	/* 한글이 단어 중간에서 잘리지 않게 (가독성 차이가 큽니다) */
	word-break: keep-all;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	color: var(--c-heading);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;   /* 한글 제목은 살짝 좁히면 깔끔합니다 */
}

.entry-content h2 { margin-top: var(--space-lg); font-size: 1.6em; }
.entry-content h3 { margin-top: var(--space-md); font-size: 1.3em; }
.entry-content p  { margin-bottom: 1.4em; }

a       { color: var(--c-brand); text-decoration: none; }
a:hover { color: var(--c-brand-dark); text-decoration: underline; }

/* ==========================================================================
   [3] 헤더 & 네비게이션
   ========================================================================== */
.site-header {
	background-color: var(--c-bg);
	border-bottom: 0;
}

/* 워드마크 — allroundfriends.com 헤더(18px)와 같은 크기로 맞춤 */
.main-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 0;
}

.main-title a {
	color: var(--c-heading);
	text-decoration: none;
}

.main-title a:hover { color: var(--c-brand); }

.site-description {
	color: var(--c-muted);
	font-size: .82rem;
	letter-spacing: 0;
	margin-top: 2px;
}

@media (max-width: 768px) {
	.main-title { font-size: 18px; }
	.site-description { display: none; }   /* 모바일 헤더는 좁으므로 숨김 */
}

.main-navigation {
	background-color: var(--c-bg);
	border-bottom: 0;
}

/* 헤더 아래 가로줄 제거 — GeneratePress가 넣는 선까지 함께 걷어냅니다 */
.site-header,
.main-navigation,
.inside-navigation,
.nav-float-right .main-navigation {
	border-bottom: 0;
	box-shadow: none;
}

.main-navigation .main-nav ul li a {
	font-weight: 600;
	text-decoration: none;
	transition: color .15s ease;
}

/* 파란색 대신 브랜드 톤(먹색)으로 — 올라운드샵은 파랑을 쓰지 않습니다 */
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--c-heading);
	text-decoration: none;
}

/* 헤더 우측 전환 버튼 (functions.php에서 출력) */
.menu-bar-items { display: flex; align-items: center; }

/* 구형 float 구조에서는 내비게이션 안에 직접 들어가므로 오른쪽으로 띄웁니다 */
.nav-float-right .inside-navigation > .arf-nav-cta,
.nav-float-left .inside-navigation > .arf-nav-cta {
	float: right;
	margin-top: 8px;
}

.inside-navigation::after {
	content: "";
	display: table;
	clear: both;
}

.arf-nav-cta {
	display: inline-block;
	background-color: var(--arf-lime, #a6ff00);
	color: #0a0a0a;
	font-size: .88rem;
	font-weight: 700;
	line-height: 1;
	padding: 11px 18px;
	margin-left: 12px;
	border-radius: 8px;
	white-space: nowrap;
	text-decoration: none;
	transition-property: filter, scale;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

.arf-nav-cta:hover,
.arf-nav-cta:focus {
	background-color: var(--arf-lime, #a6ff00);
	color: #0a0a0a;
	filter: brightness(1.08);
	text-decoration: none;
}

.arf-nav-cta:active { scale: .96; }

@media (max-width: 768px) {
	.arf-nav-cta {
		font-size: .82rem;
		padding: 9px 14px;
		margin-left: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arf-nav-cta { transition: none; }
}

/* ==========================================================================
   [4] 글 목록 / 본문 카드
   ========================================================================== */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .paging-navigation,
.one-container .container {
	background-color: var(--c-bg);
	border: 0;                          /* 깊이용 테두리 제거 — 그림자가 대신합니다 */
	border-radius: var(--radius);
	box-shadow: var(--shadow-border);
}

.entry-meta {
	color: var(--c-muted);
	font-size: .875em;
}

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

.entry-content img,
.entry-content iframe {
	border-radius: var(--radius);
	max-width: 100%;
	height: auto;
	/* 흰 배경 이미지가 배경과 붙어버리지 않도록 아주 옅은 윤곽선.
	   회색 계열을 쓰면 이미지 가장자리에 때가 낀 것처럼 보이므로 순수 검정 투명도로. */
	outline: 1px solid oklch(0 0 0 / .1);
	outline-offset: -1px;
}

/* 목록과 글머리의 대표 이미지에도 같은 모양을 줍니다.
   이 이미지들은 .entry-content 밖에 있어 위 규칙이 닿지 않습니다. */
.inside-article .post-image img,
.inside-article .featured-image img {
	border-radius: var(--radius);
	outline: 1px solid oklch(0 0 0 / .1);
	outline-offset: -1px;
}

/* 이미지를 감싼 링크가 inline 이라 아래에 글자만큼 빈틈이 생기고,
   누를 수 있는 범위도 그 한 줄로 잡힙니다. 블록으로 바꿔 이미지
   전체가 그대로 누르는 자리가 되게 합니다. */
.inside-article .post-image a {
	display: block;
	line-height: 0;
}

/* 목록 썸네일은 비율을 고정합니다. 대표 이미지를 1200×630 으로
   만들어 올리다가 한 장만 4:3 이 섞이면 그 카드만 70px 더 길어져
   목록 리듬이 틀어집니다. 기준을 정해 두면 어떤 이미지가 와도 같은 높이가 됩니다.
   글머리 큰 이미지(.featured-image)는 자르지 않고 원본 비율로 둡니다. */
.inside-article .post-image img {
	width: 100%;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
}

.entry-content blockquote {
	border-left: 3px solid var(--c-brand);
	background-color: var(--c-brand-soft);
	padding: var(--space-md);
	border-radius: 0 var(--radius) var(--radius) 0;
	margin-left: 0;
}

/* ==========================================================================
   [5] 버튼
   ========================================================================== */
.button,
button,
input[type="submit"] {
	background-color: var(--c-brand);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	padding: 10px 20px;
	font-weight: 600;
	transition-property: background-color;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
	background-color: var(--c-brand-dark);
	color: #fff;
	text-decoration: none;
}

.button:active,
button:active,
input[type="submit"]:active { transform: scale(.96); }

/* 목록의 "더 읽기" — 파란 알약 대신 본사이트와 같은 텍스트 링크로.
   글 카드가 여러 개 쌓이는 화면이라 버튼이 반복되면 시선이 분산됩니다. */
.read-more {
	display: inline-block;
	background: none;
	border: 0;
	padding: 0;
	margin-left: 2px;
	color: var(--c-heading);
	font-weight: 700;
	font-size: .95em;
	text-decoration: none;
	white-space: nowrap;
}

.read-more::after {
	content: " →";
	transition-property: opacity;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

.read-more:hover {
	background: none;
	color: var(--c-heading);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   [6] 사이드바 위젯
   ========================================================================== */
.sidebar .widget {
	background-color: var(--c-bg);
	border: 0;
	border-radius: var(--radius);
	box-shadow: var(--shadow-border);
	transition-property: box-shadow;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

.sidebar .widget:hover { box-shadow: var(--shadow-border-hover); }

.sidebar .widget .widget-title {
	font-size: 1.05em;
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--c-border);
}

/* ==========================================================================
   [7] 푸터
   ========================================================================== */
.site-footer,
.site-info,
.footer-bar {
	background-color: var(--c-heading);
	color: #b6bcc4;
}

.site-info a,
.footer-bar a { color: #e6e9ed; }

/* ==========================================================================
   [8] 모바일 (768px 이하)
   ========================================================================== */
@media (max-width: 768px) {
	:root {
		--fs-base: 16px;
		--space-lg: 32px;
	}

	.entry-content h2 { font-size: 1.4em; }
}

/* ==========================================================================
   [9] 표 — 세로줄을 없애고 가로 실선만 남긴 형태
   기본 워드프레스 표는 칸마다 테두리가 둘러쳐져 투박합니다.
   ========================================================================== */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table {
	margin: var(--space-lg) 0;
	overflow-x: auto;          /* 모바일에서 표만 옆으로 스크롤 */
	-webkit-overflow-scrolling: touch;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: .95rem;
	line-height: 1.65;
	min-width: 460px;          /* 이보다 좁아지면 스크롤 */
	font-variant-numeric: tabular-nums;
}

/* 머리글 — 굵은 검은 줄 대신 옅은 실선 하나 */
.entry-content table th {
	background: none;
	border: 0;
	border-bottom: 1.5px solid var(--c-heading);
	padding: 0 16px 10px;
	text-align: left;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--c-muted);
	white-space: nowrap;
}

.entry-content table td {
	border: 0;
	border-bottom: 1px solid var(--c-border);
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
	color: var(--c-text);
}

/* 첫 칸은 항목명이므로 조금 더 진하게 */
.entry-content table td:first-child {
	color: var(--c-heading);
	font-weight: 600;
	white-space: nowrap;
}

/* 좌우 끝은 여백을 없애 본문 기준선과 맞춥니다 */
.entry-content table th:first-child,
.entry-content table td:first-child { padding-left: 0; }
.entry-content table th:last-child,
.entry-content table td:last-child  { padding-right: 0; }

.entry-content table tr:last-child td { border-bottom: 0; }

.entry-content table tr:hover td {
	background-color: var(--c-bg-soft);
}

/* 워드프레스 기본 줄무늬 표는 무늬만 걷어냅니다 */
.entry-content .wp-block-table.is-style-stripes table,
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: transparent;
}

/* ==========================================================================
   [9-1] 본문 다듬기 — 목록 간격, 강조, 인용
   ========================================================================== */
.entry-content { color: var(--c-text); }

.entry-content ul,
.entry-content ol {
	padding-left: 1.15em;
	margin-bottom: 1.6em;
}

.entry-content li {
	margin-bottom: .6em;
	padding-left: .2em;
}

.entry-content li::marker { color: var(--c-muted); }

.entry-content strong { color: var(--c-heading); font-weight: 600; }

/* 링크 색이 먹색이라 색만으로는 구분이 안 됩니다.
   본문 링크는 밑줄로 구분하되, 제목·버튼 링크는 제외합니다. */
.entry-content a:not(.arf-btn):not(.read-more):not(.wp-block-button__link):not(.arf-quick__btn) {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--c-border-strong, #c9d0d8);
}

.entry-content a:not(.arf-btn):not(.read-more):not(.wp-block-button__link):not(.arf-quick__btn):hover {
	text-decoration-color: currentColor;
}

/* 소제목 위의 구분선.
   .4em(11px) 은 선과 글자가 붙어 선이 제목에 끌려다니는 것처럼 보였습니다.
   선 위 48px : 선 아래 23px 정도가 되어야 선이 아랫글의 머리로 읽힙니다. */
.entry-content h2 {
	padding-top: .85em;
	border-top: 1px solid var(--c-border);
}

/* 이미지 위아래 여백.
   블록 에디터가 넣는 figure 는 마진이 0 이고 문단도 아래쪽 마진만 가져서,
   이미지 바로 뒤 문단이 이미지에 딱 붙어 버렸습니다.
   위쪽은 앞 문단의 마진과 겹쳐져(마진 상쇄) 같은 값으로 맞췄집니다. */
.entry-content figure.wp-block-image,
.entry-content .wp-block-embed,
.entry-content .wp-block-video {
	margin-top: 1.6em;
	margin-bottom: 1.6em;
}

.entry-content figure.wp-block-image figcaption {
	margin-top: .7em;
	font-size: .85em;
	color: var(--c-muted);
	line-height: 1.5;
}

.entry-content h2:first-of-type { border-top: 0; padding-top: 0; }

@media (max-width: 768px) {
	.entry-content table { font-size: .88rem; }
	.entry-content table td { padding: 11px 12px; }
}

/* ==========================================================================
   [10] 전환 CTA 블록 — 올라운드샵 브랜드 톤 (다크 + 라임)
   allroundfriends.com 과 같은 색을 써서 브랜드 일관성을 유지합니다.
   본문은 밝은 배경이라 CTA만 어둡게 두면 시선이 확실히 걸립니다.
   ========================================================================== */
:root {
	--arf-ink:    #0a0a0a;   /* 올라운드샵 배경색 */
	--arf-ink-2:  #1a1a1a;
	--arf-lime:   #a6ff00;   /* 올라운드샵 포인트 컬러 */
	--arf-gray:   #9a9a9a;
}

.arf-cta {
	background-color: var(--arf-ink);
	color: #fff;
	border-radius: var(--radius);
	padding: 32px 28px;
	margin: var(--space-lg) 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow: hidden;
}

.arf-cta__eyebrow {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--arf-lime);
	text-transform: uppercase;
}

.arf-cta__title {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
	margin: 0;
	letter-spacing: -.02em;
}

.arf-cta__desc {
	font-size: .95rem;
	line-height: 1.7;
	color: var(--arf-gray);
	margin: 0;
}

/* 신뢰 지표 — 카페24 실제 수치와 반드시 일치시킬 것 */
.arf-cta__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: .82rem;
	color: var(--arf-gray);
	padding-top: 4px;
}

.arf-cta__trust b {
	color: #fff;
	font-weight: 600;
}

.arf-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 6px;
}

/* 주 버튼 — 라임. 한 블록에 하나만 두세요 */
.arf-cta .arf-btn {
	display: inline-block;
	background-color: var(--arf-lime);
	color: var(--arf-ink);
	font-weight: 700;
	font-size: .95rem;
	padding: 12px 22px;
	border-radius: var(--radius);
	text-decoration: none;
	transition: transform .15s ease, filter .15s ease;
}

.arf-cta .arf-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: var(--arf-ink);
	text-decoration: none;
}

/* 누를 때 살짝 눌리는 느낌 — 0.96이 기준입니다.
   이보다 작으면 과장돼 보이고, 크면 눌린 게 안 느껴집니다. */
.arf-cta .arf-btn:active { transform: scale(.96); }

/* 본문 CTA 안의 카카오톡 버튼.
   문의 유도 CTA에서는 이것을 주 버튼로 쓰고 나머지를 ghost 로 둘러야
   밝은 버튼 둘이 서로 시선을 빼앗지 않습니다. 한 블록에 주 버튼은 하나만. */
.arf-cta .arf-btn--kakao {
	background-color: #fee500;
	color: #191600;
}

.arf-cta .arf-btn--kakao:hover {
	background-color: #fee500;
	color: #191600;
	filter: brightness(.96);
}

/* 보조 버튼 — 테두리만 */
.arf-cta .arf-btn--ghost {
	background-color: transparent;
	color: #fff;
	border: 1px solid #3a3a3a;
	font-weight: 600;
}

.arf-cta .arf-btn--ghost:hover {
	border-color: var(--arf-lime);
	color: var(--arf-lime);
	filter: none;
}

@media (max-width: 768px) {
	.arf-cta { padding: 26px 20px; }
	.arf-cta__title { font-size: 1.15rem; }
	.arf-cta .arf-btn { width: 100%; text-align: center; }
}

/* 움직임을 줄이도록 설정한 사용자에게는 모든 전환을 끕니다.
   단, 색·그림자 같은 정적 신호는 그대로 남으므로 상태는 여전히 구분됩니다. */
@media (prefers-reduced-motion: reduce) {
	.arf-cta .arf-btn,
	.arf-nav-cta,
	.arf-skin,
	.sidebar .widget {
		transition: none;
	}

	.arf-cta .arf-btn:hover,
	.arf-cta .arf-btn:active { transform: none; }

	.arf-nav-cta:active { scale: 1; }
}

/* ==========================================================================
   [11] 사이드바 스킨 목록 — 글 읽는 내내 보이는 자리
   ========================================================================== */
.arf-skins {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arf-skin {
	display: flex;
	gap: 12px;
	align-items: center;
	text-decoration: none;
	padding: 8px;
	margin: -8px;
	/* 안쪽 썸네일(8px) + 여백(8px) = 16px.
	   중첩된 모서리는 이 계산이 맞아야 어색해 보이지 않습니다. */
	border-radius: 16px;
	transition-property: background-color;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

.arf-skin:hover {
	background-color: var(--c-bg-soft);
	text-decoration: none;
}

.arf-skin__thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	background-color: var(--c-bg-soft);
	border: 0;
	outline: 1px solid oklch(0 0 0 / .1);
	outline-offset: -1px;
}

.arf-skin__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.arf-skin__name {
	font-size: .92rem;
	font-weight: 600;
	color: var(--c-heading);
	line-height: 1.4;
	/* 이름이 길어도 두 줄에서 자릅니다 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.arf-skin__price {
	font-size: .85rem;
	font-weight: 700;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}

/* 위젯 하단 전체보기 링크 */
.arf-skins-more {
	display: block;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--c-border);
	font-size: .88rem;
	font-weight: 700;
	color: var(--c-heading);
	text-decoration: none;
}

.arf-skins-more:hover {
	color: var(--c-heading);
	text-decoration: none;
}

/* ==========================================================================
   [12] 모바일 최적화 (768px 이하)

   GeneratePress 기본값은 데스크톱 기준이라 좁은 화면에서 몇 가지가
   어긋납니다. 아래는 그 부분만 바로잡은 것입니다.

     - 목록 제목이 35px, 글 제목이 42px 로 그대로 나옴 (테마 h1/h2 기본값)
     - 글 카드가 화면 양끝에 딱 붙어 둥근 모서리와 그림자가 잘림
     - 제목 + 스킨버튼 + 햄버거가 한 줄에 안 들어가 360px 화면에서 줄바꿈
     - 표가 min-width 460px 라서 두 칸짜리 표까지 가로 스크롤에 걸림
     - 헤더의 전환 버튼이 스크롤하면 사라져 전환 통로가 없어짐

   ※ 여백은 --arf-gutter(화면끝~카드) 와 --arf-pad(카드~글) 두 값으로
     조절합니다. 둘을 더한 값이 헤더·푸터 여백과 같아야 글자 시작선이
     위아래로 일직선이 됩니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12-1. 화면 크기와 상관없이 적용되는 것
   -------------------------------------------------------------------------- */

html {
	/* 아이폰을 가로로 눕혔을 때 사파리가 글자를 멋대로 키우는 것을 막습니다 */
	-webkit-text-size-adjust: 100%;
}

/* 네이버 모바일 기사를 기준으로 맞춘 본문 스케일.
   한글을 가장 많은 사람이 매일 읽는 화면이라 수치가 가장 많이 검증된 곳입니다.

     네이버  본문 17px / 줄간격 1.56 / 자간 -0.3px / 좌우여백 15px
     이전    본문 16px / 줄간격 1.8  / 자간 0     / 좌우여백 30px

   문제는 줄간격 1.8 이었습니다. 글자는 작은데 줄 사이만 넘어서
   글이 한 덩어리로 안 읽히고 시선이 흥어졌습니다.
   글자를 키우고 줄을 좁혀 밀도를 올립니다. */
@media (max-width: 768px) {
	:root {
		/* 데스크톱과 같은 17px. 이전에는 모바일만 16px 로 줄였는데,
		   휴대폰은 눈과 화면이 가까워 오히려 큰 글자가 편합니다. */
		--fs-base: 17px;
		--lh-base: 1.6;
	}

	/* 자간은 읽는 글에만. 버튼·메뉴까지 좁히면 눈에 띄게 답답해집니다. */
	.entry-content,
	.entry-summary {
		letter-spacing: -.3px;
	}

	/* 제목은 여러 줄로 넘어가므로 본문보다 더 좁혀야 한 덩어리로 보입니다 */
	h1, h2, h3, h4, h5, h6,
	.entry-title {
		line-height: 1.35;
	}

	/* 본문 소제목 — 네이버 19px 기준.
	   이전 1.4em(23.8px)은 글 제목과 거의 비슷해 위아래 구분이 약했습니다. */
	.entry-content h2 { font-size: 1.2em; }
	.entry-content h3 { font-size: 1.05em; }

	/* 날짜·작성자·카테고리 — 네이버 13px */
	.entry-meta { font-size: 13px; }

	/* 목록 발췌문은 읽히는 글이 아니라 맛보기라 본문보다 한 단계 작게 */
	.blog .entry-summary,
	.archive .entry-summary { font-size: 16px; }
}

/* 카테고리·검색결과 제목 — 카드가 아니라 목록 위 이름표로.
   흰 카드에 40px 여백까지 두르면 글 카드와 같은 무게가 돼서
   정작 보여주려는 목록보다 제목이 먼저 눈에 들어옵니다.
   여기서 알아야 할 건 "지금 어느 분류를 보고 있는가" 한 줄뿐입니다.

   ※ 아예 안 나오게 하려면 아래 .page-header 에 display: none 을 넣으면 됩니다.
     다만 이 h1 은 이 페이지의 유일한 제목이라, 구글이 이 목록을
     "제작사례" 페이지로 읽을 근거가 사라집니다.
     검색 유입이 목적인 사이트라 남겨두고 무게만 낮췄습니다. */
.separate-containers .page-header {
	background-color: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

.page-header .page-title {
	font-size: clamp(20px, .9vw + 14px, 24px);
	margin-bottom: 0;
}

/* 네이버는 기사 제목 22px / 본문 17px = 1.29배입니다.
   글 제목을 26px 로 두면 본문의 1.53배라 제목만 동떨어져 보입니다.

   제목 크기를 화면 폭에 따라 늘렸다 줄입니다.
   clamp(최소, 화면비례, 최대) — 최대값이 지금 데스크톱 크기 그대로라
   넓은 화면에서 보이는 모습은 달라지지 않습니다. */
.entry-title {
	font-size: clamp(22px, 4.2vw + 6px, 35px);
}

.single .entry-title,
.page .entry-title {
	font-size: clamp(24px, 5.2vw + 5px, 42px);
}

/* --------------------------------------------------------------------------
   12-2. 좌우 여백 — 카드가 화면 끝에 붙지 않게
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	:root {
		/* 네이버 기사는 좌우 15px 입니다. 여기는 카드 구조라 바탕이 보일
		   틈(gutter)이 필요해, 둘을 합친 24px 를 글자 시작선으로 잡았습니다.
		   짧을수록 한 줄에 글자가 많이 들어가 줄바꿈이 줄어듭니다. */
		--arf-gutter: 10px;   /* 화면 끝 ~ 카드 모서리 */
		--arf-pad:    14px;   /* 카드 모서리 ~ 글 */
	}

	/* 이 여백이 있어야 카드의 둥근 모서리와 그림자가 실제로 보입니다 */
	.site-content {
		padding-left: var(--arf-gutter);
		padding-right: var(--arf-gutter);
	}

	.separate-containers .inside-article,
	.separate-containers .comments-area,
	.separate-containers .paging-navigation,
	.inside-page-header,
	.widget-area .widget {
		padding: var(--arf-pad);
	}

	/* 이름표는 배경이 없으므로 좌우 여백만 줘서
	   글자가 카드 본문과 같은 선에서 시작하게 합니다. */
	.separate-containers .page-header {
		padding: 2px var(--arf-pad) 6px;
	}

	/* 전체폭(alignfull) 블록은 카드 안쪽 여백만큼 밖으로 나가야 합니다.
	   --arf-pad 를 바꾸면 이 값도 같이 따라오므로 가로 스크롤이 생기지 않습니다. */
	.entry-content .alignwide,
	.entry-content .alignfull,
	body:not(.no-sidebar) .entry-content .alignfull {
		margin-left: calc(var(--arf-pad) * -1);
		width: calc(100% + var(--arf-pad) * 2);
		max-width: calc(100% + var(--arf-pad) * 2);
	}

	/* 헤더·푸터 글자는 카드 본문과 같은 선에서 시작합니다 (10 + 14 = 24px) */
	.inside-header,
	.inside-site-info {
		padding-left: calc(var(--arf-gutter) + var(--arf-pad));
		padding-right: calc(var(--arf-gutter) + var(--arf-pad));
	}

	/* 카드 사이 간격도 좌우 여백과 같은 리듬으로 */
	.separate-containers .site-main > * {
		margin-bottom: var(--arf-gutter);
	}

	/* 목록 카드 높이 줄이기
	   제목은 훑을 때 유일한 단서라 그대로 두고,
	   요소 사이 여백(테마 기본 2em = 32px)과 발췌문 줄간격만 줄입니다.
	   발췌문 글자 수 자체는 functions.php 의 excerpt_length 에서 줄였습니다. */
	.blog .post-image:not(:first-child),
	.archive .post-image:not(:first-child),
	.blog .entry-summary:not(:first-child),
	.archive .entry-summary:not(:first-child),
	.blog footer.entry-meta,
	.archive footer.entry-meta {
		margin-top: 14px;
	}

	/* 본문은 1.8 이 읽기 편하지만, 발췌문은 맛보기라 좀 좀혀도 됩니다 */
	.blog .entry-summary,
	.archive .entry-summary {
		line-height: 1.65;
	}

	/* 위젯이 하나도 없으면 사이드바 자리가 빈 칸으로 남습니다 */
	.sidebar:not(:has(.widget)) {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   12-3. 헤더 — 제목과 햄버거만 남깁니다
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* 헤더의 "스킨 보러가기" 는 화면 아래 고정 바(12-6)로 옮겼습니다.
	   360px 화면에서 제목·버튼·햄버거 셋이 한 줄에 안 들어가 줄바꿈이
	   일어나던 문제도 함께 사라집니다. 스크롤해도 늘 보이니 전환에도 낫습니다. */
	.mobile-menu-control-wrapper .menu-bar-items {
		display: none;
	}

	/* 햄버거 버튼 — 아이콘 오른쪽 끝을 헤더 여백선에 맞춥니다.
	   음수 마진은 누를 수 있는 넓이는 그대로 두고 보이는 아이콘만
	   제목과 같은 선으로 당기기 위한 것입니다. */
	.main-navigation .menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56px;
		line-height: 1;
		font-size: 22px;          /* gp-icon 이 1em 이라 곧 아이콘 크기입니다 */
		padding: 0 14px;
		margin-right: -14px;
		border-radius: 10px;
	}

	button.menu-toggle:active {
		background-color: var(--c-bg-soft);
	}

	/* 사이트 이름도 누를 수 있는 링크입니다. 글자 높이만큼만 반응하면
	   손가락으로 누르기 어려워서 위아래로 넓힙니다.
	   같은 크기만큼 음수 마진을 줘서 헤더 높이는 그대로 둘니다. */
	.main-title a,
	.site-info a {
		display: inline-block;
		padding: 10px 0;
		margin: -10px 0;
	}

	/* 햄버거 ↔ 닫기 아이콘 — 껐다 켜는 대신 부드럽게 교차시킵니다.
	   둘을 같은 자리에 겹쳐 두고 투명도·크기·흐림으로만 바꿉니다. */
	.menu-toggle .gp-icon.icon-menu-bars {
		position: relative;
		width: 1em;
		height: 1em;
	}

	.menu-toggle .gp-icon.icon-menu-bars svg {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		transition-property: opacity, scale, filter;
		transition-duration: 200ms;
		transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
	}

	.menu-toggle .gp-icon.icon-menu-bars svg:nth-child(2),
	.toggled .menu-toggle .gp-icon.icon-menu-bars svg:nth-child(1) {
		opacity: 0;
		scale: .25;
		filter: blur(4px);
	}

	.toggled .menu-toggle .gp-icon.icon-menu-bars svg:nth-child(2) {
		opacity: 1;
		scale: 1;
		filter: blur(0);
	}
}

/* --------------------------------------------------------------------------
   12-4. 펼친 메뉴 — 손가락으로 누를 수 있는 크기로
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* 메뉴를 펼치면 헤더 아래에 붙는 한 장의 판처럼 보이게 합니다.
	   테마 기본값은 헤더 안쪽 여백(30px) 안에 갇힌 옆대 회색 사각형이라,
	   헤더의 일부인지 본문인지 구분이 안 되고 위아래 흰 여백도 짝이 안 맞았습니다.
	   음수 마진으로 헤더 여백을 벗어나 화면 끝까지 펼치고,
	   같은 값을 안쪽에 여백으로 돌려줘 글자는 제목과 같은 선에 남습니다. */
	.has-inline-mobile-toggle #site-navigation.toggled {
		margin-left: calc((var(--arf-gutter) + var(--arf-pad)) * -1);
		margin-right: calc((var(--arf-gutter) + var(--arf-pad)) * -1);
		/* 헤더는 flex 입니다. 음수 마진만 주면 자리만 왼쪽으로 옥기고
		   폭은 그대로라 오른쪽이 비게 됩니다. 기준 폭도 같이 늘려 줍니다. */
		flex-basis: calc(100% + (var(--arf-gutter) + var(--arf-pad)) * 2);
		max-width: none;
		margin-top: 20px;     /* 헤더 위쪽 여백과 같은 값 */
		margin-bottom: -20px; /* 헤더 아래쪽 여백을 상쇄해 헤더 밑에 딱 붙입니다 */
		background-color: var(--c-bg);
		border-top: 1px solid var(--c-border);
		/* 내려온 판이라는 신호. 그림자는 헤더가 아니라 메뉴에만 걸립니다. */
		box-shadow: 0 8px 16px -10px oklch(0 0 0 / .12);
	}

	.has-inline-mobile-toggle #site-navigation.toggled .inside-navigation {
		padding-left: calc(var(--arf-gutter) + var(--arf-pad));
		padding-right: calc(var(--arf-gutter) + var(--arf-pad));
	}

	/* 기본값은 좌우 20px 여백이라 메뉴 글자가 사이트 제목보다 20px
	   안쪽에서 시작합니다. 여백을 지워 제목과 같은 선에 맞춥니다.
	   위아래 15px + 글자 24px = 54px 로 누르기에도 충분합니다. */
	.main-navigation.toggled .main-nav ul li a {
		padding: 15px 0;
		line-height: 1.5;
	}

	/* 항목 사이 경계선 — 어디까지가 한 항목인지 보이게 */
	.main-navigation.toggled .main-nav ul li {
		border-top: 1px solid var(--c-border);
	}

	.main-navigation.toggled .main-nav > ul > li:first-child {
		border-top: 0;
	}

	.main-navigation.toggled .main-nav ul li a:active {
		background-color: var(--c-bg-soft);
	}

	/* 하위 메뉴는 한 단계 들여쓰기로 구분 */
	.main-navigation.toggled .main-nav ul ul li a {
		padding-left: 14px;
		font-size: .95em;
	}
}

/* --------------------------------------------------------------------------
   12-5. 본문 — 표, 인용, 입력칸, 누르는 자리
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* 표를 옆으로 미는 대신 화면 폭에 맞춰 접습니다.
	   min-width 460px 와 nowrap 때문에 좁은 화면에서는 두 칸짜리 표까지
	   가로 스크롤에 걸렸습니다. 이 블로그의 표는 대부분 비교표라
	   줄이 바뀌더라도 한 화면에 다 보이는 쪽이 읽기 편합니다.
	   칸이 아주 많은 표는 [9]의 overflow-x 가 그대로 받아 줍니다. */
	.entry-content table {
		min-width: 0;
	}

	.entry-content table th,
	.entry-content table td:first-child {
		white-space: normal;
	}

	.entry-content blockquote {
		padding: 14px 16px;
	}

	/* 코드 블록이 화면을 밀어내지 않게 */
	.entry-content pre {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 손가락으로 누르는 자리를 위아래로 넓힙니다.
	   inline 요소의 위아래 여백은 줄 높이를 바꾸지 않아 글줄이 벌어지지 않습니다. */
	.read-more,
	.entry-meta a,
	.post-navigation a,
	.paging-navigation .nav-links a {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	/* 이전 글 / 다음 글은 한 줄에 하나씩 */
	.site-main .post-navigation .nav-previous,
	.site-main .post-navigation .nav-next {
		float: none;
		width: 100%;
	}

	.site-main .post-navigation .nav-next {
		margin-top: 4px;
	}

	/* 입력칸 글자가 16px 보다 작으면 아이폰이 입력할 때 화면을 확대합니다 */
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="number"],
	textarea,
	select {
		font-size: 16px;
		border-radius: var(--radius);
		padding: 12px 14px;
	}

	/* 본문 CTA — 카드 안쪽 여백이 줄었으므로 함께 줄입니다 */
	.arf-cta {
		padding: 22px 16px;
	}

	.arf-cta .arf-btn {
		padding-top: 15px;
		padding-bottom: 15px;
	}
}

/* --------------------------------------------------------------------------
   12-6. 화면 아래 고정 전환 바 (모바일 전용)

   이 블로그의 목적은 글을 읽히는 것이 아니라 디자인센터로 보내는 것입니다.
   헤더 버튼은 조금만 스크롤해도 사라지므로, 모바일에서는 늘 보이는
   자리를 하나 둡니다. 마크업은 functions.php 의 arf_render_mobile_bar().

   ※ 데스크톱에서는 display:none 이라 화면에도, 스크린리더에도 안 나옵니다.
   -------------------------------------------------------------------------- */
.arf-mobilebar {
	display: none;
}

@media (max-width: 768px) {
	.arf-mobilebar {
		display: flex;
		align-items: center;
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		padding: 10px var(--arf-gutter);
		/* 아이폰 홈 인디케이터가 버튼을 가리지 않도록 그만큼 더 띄웁니다 */
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
		background-color: var(--arf-ink);
		border-top: 1px solid oklch(1 0 0 / .1);
		box-shadow: 0 -8px 24px oklch(0 0 0 / .18);
	}

	.arf-mobilebar__btn,
	.arf-mobilebar__sub {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		padding: 16px 14px;
		border-radius: var(--radius);
		text-decoration: none;
		white-space: nowrap;
	}

	/* 주 버튼 — 남는 자리를 전부 차지합니다 */
	.arf-mobilebar__btn {
		flex: 1 1 auto;
		background-color: var(--arf-lime);
		color: var(--arf-ink);
		font-size: .95rem;
		font-weight: 700;
	}

	/* 보조 버튼 — 전화 걸기. 폭은 글자에 맞춰 고정 */
	.arf-mobilebar__sub {
		flex: 0 0 auto;
		border: 1px solid #3a3a3a;
		color: #fff;
		font-size: .9rem;
		font-weight: 600;
	}

	.arf-mobilebar__btn:hover,
	.arf-mobilebar__btn:focus {
		background-color: var(--arf-lime);
		color: var(--arf-ink);
		text-decoration: none;
	}

	.arf-mobilebar__sub:hover,
	.arf-mobilebar__sub:focus {
		color: #fff;
		border-color: var(--arf-lime);
		text-decoration: none;
	}

	.arf-mobilebar__btn:active { scale: .96; }
	.arf-mobilebar__sub:active { background-color: oklch(1 0 0 / .08); }

	/* 고정 바가 마지막 내용을 가리지 않도록 푸터 아래에 자리를 만듭니다.
	   70px = 버튼 49px + 바 위아래 여백 20px (실측 69.4px) */
	.site-footer {
		padding-bottom: calc(70px + env(safe-area-inset-bottom));
	}

	/* "맨 위로" 버튼을 켰다면 고정 바 위로 올립니다 */
	a.generate-back-to-top {
		bottom: calc(80px + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.menu-toggle .gp-icon.icon-menu-bars svg,
	.arf-mobilebar__btn,
	.arf-mobilebar__sub {
		transition: none;
	}

	.arf-mobilebar__btn:active { scale: 1; }
}

/* ==========================================================================
   [13] PC 레이아웃 — 사이드바를 없았으니 목록은 두 칸으로

   사이드바 제거 자체는 functions.php 의 generate_sidebar_layout 필터에서 합니다.
   여기서는 비운 자리를 어떻게 쓸지만 정합니다.

     목록  → 두 칸 (1000px 이상에서만)
     글    → 가운데 760px. 푸는 것이 아니라 오히려 좀럽니다.
   ========================================================================== */

@media (min-width: 769px) {

	/* --- 사이드바 자리 회수 ---
	   테마가 고객맞춤 설정에서 읽은 사이드바 폭(30%)을 반영해
	   본문을 70% 로 고정해 둡니다. 필터로 사이드바를 꺼도 이 값은 그대로라
	   오른쪽 360px 가 빈 칄 무의미하게 남습니다. 직접 되돌려 줍니다. */
	.no-sidebar .site-content .content-area {
		width: 100%;
	}

	/* 헤더·푸터의 좌우 여백이 40px 입니다.
	   카드도 같은 선에서 시작해야 사이트 이름과 세로로 맞아떨어집니다. */
	.site-content {
		padding-left: 40px;
		padding-right: 40px;
	}

	/* 글은 가운데로.
	   사이드바가 없어졌다고 본문을 1120px 로 풀어버리면 한 줄에 한글이
	   60자 넘게 들어가 눈이 다음 줄 첫글자를 못 찾습니다.
	   읽기 편한 폭은 한글 35~40자, 17px 기준으로 대략 760px 입니다. */
	.single .content-area,
	.page .content-area {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* 메뉴가 마침 한 줄에 안 들어가는 구간.
   항목이 다섯 개(분류 네 개 + 문의)이라 테마 기본 좌우 20px 여백이맄
   800~900px 창에서 내비게이션이 둘째 줄로 밀려 헤더가 갑자기 높어집니다.
   이 구간에서만 여백을 좁혀 한 줄을 유지합니다. */
@media (min-width: 769px) and (max-width: 940px) {
	.main-navigation .main-nav ul li a {
		padding-left: 12px;
		padding-right: 12px;
	}

	.arf-nav-cta {
		padding-left: 14px;
		padding-right: 14px;
		margin-left: 6px;
	}
}

/* 두 칸은 1000px 부터입니다.
   태블릿 폭(769~999px)에서 두 칸로 쪼개면 카드 하나가 330px 밖에 안 돼
   제목이 네다섯 줄씩 넘어갑니다. 그 구간은 한 칸으로 둡니다. */
@media (min-width: 1000px) {

	.blog .site-main,
	.archive .site-main,
	.search .site-main {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		/* 카드 높이를 서로 맞추지 않습니다.
		   대표 이미지가 없는 글이 섮이면 그 카드만 짧은데, 억지로 맞추면
		   카드 아랫쪽이 흰색으로 텀 빈 칸처럼 보입니다.
		   자연스러운 높이로 두면 남는 자리가 바탕색으로 빠져 눈에 거슬리지 않습니다. */
		align-items: start;
	}

	/* 격자의 gap 이 간격을 만드므로 카드 개별 마진은 거둡니다.
	   안 그러면 위아래만 40px 로 벌어져 가로세로 간격이 달라집니다. */
	.blog .site-main > *,
	.archive .site-main > *,
	.search .site-main > * {
		margin-bottom: 0;
	}

	/* 카테고리 제목과 페이지 넘기기는 칸을 나누지 않고 가로로 펼칩니다 */
	.blog .site-main > .page-header,
	.archive .site-main > .page-header,
	.search .site-main > .page-header,
	.blog .site-main > .paging-navigation,
	.archive .site-main > .paging-navigation,
	.search .site-main > .paging-navigation,
	.blog .site-main > .no-results,
	.archive .site-main > .no-results,
	.search .site-main > .no-results {
		grid-column: 1 / -1;
	}

	/* 칸 하나가 절반 폭이 됐으므로 제목도 그에 맞춥니다.
	   35px 그대로는 제목이 네 줄씩 넘어가 카드가 제목만 가득해집니다. */
	.blog .site-main .entry-title,
	.archive .site-main .entry-title,
	.search .site-main .entry-title {
		font-size: 26px;
		line-height: 1.4;
	}

	/* 카드 안쪽 여백도 한 단계 줄입니다 (테마 기본 40px) */
	.blog .separate-containers .inside-article,
	.archive .separate-containers .inside-article,
	.search .separate-containers .inside-article {
		padding: 28px;
	}
}

/* ==========================================================================
   [14] 문의 폼

   마크업은 functions.php 의 [arf_contact_form] 단축코드에서 나옵니다.
   문의 페이지 하나에만 쓰이지만, 이 사이트에서 전환이 실제로 일어나는
   마지막 화면이라 대충 두면 안 되는 자리입니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14-1. 빠른 문의 — 카카오톡 / 전화

   폼 위에 둡니다. 이름·연락처·내용을 적는 것보다 카톡방에 들어오는 쪽이
   문턱이 훨씬 낮습니다. 폼은 카톡을 안 쓰거나 기록을 남기고 싶은 분을 위한
   다른 길입니다.

   카카오 노랑(#FEE500)을 그대로 쓰는 이유는, 브랜드 라임으로 바꾸면
   깔끔하긴 해도 글자를 읽기 전에 "카톡이구나" 하고 알아보지 못하기 때문입니다.
   -------------------------------------------------------------------------- */
.arf-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 4px;
}

.arf-quick__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	padding: 16px 24px;
	border-radius: var(--radius);
	text-decoration: none;
	white-space: nowrap;
	transition-property: filter, background-color;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

.arf-quick__btn--kakao {
	background-color: #fee500;
	color: #191600;
	/* 노랑 위 검정은 대비가 충분하지만, 흰 배경과 붙으면 경계가 흐려집니다.
	   테두리 대신 아주 옅은 그림자로 윤곽만 잡아 줍니다. */
	box-shadow: 0 0 0 1px oklch(0 0 0 / .06);
}

.arf-quick__btn--kakao:hover,
.arf-quick__btn--kakao:focus {
	background-color: #fee500;
	color: #191600;
	filter: brightness(.96);
	text-decoration: none;
}

.arf-quick__btn--tel {
	background-color: var(--c-bg);
	color: var(--c-heading);
	font-weight: 600;
	box-shadow: 0 0 0 1px var(--c-border);
}

.arf-quick__btn--tel:hover,
.arf-quick__btn--tel:focus {
	background-color: var(--c-bg-soft);
	color: var(--c-heading);
	text-decoration: none;
}

.arf-quick__btn:active {
	scale: .96;
}

/* 글자 굵기가 700 이라 아이콘도 그만큼 두께가 있어야 같이 놓였을 때 뜨지 않습니다 */
.arf-quick__icon {
	flex: 0 0 auto;
	/* 말풍선은 아래쪽 꼬리 때문에 시각적 무게가 아래로 쏠립니다.
	   기하학적으로 가운데 두면 살짝 내려가 보여 1px 올립니다. */
	transform: translateY(-1px);
}

/* 두 길 사이의 구분선. "또는" 글자를 선 가운데 얹습니다. */
.arf-or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 26px 0 22px;
	color: var(--c-muted);
	font-size: .88rem;
}

.arf-or::before,
.arf-or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background-color: var(--c-border);
}

@media (max-width: 768px) {
	/* 좁은 화면에서는 한 줄에 하나씩. 카톡이 위입니다. */
	.arf-quick {
		flex-direction: column;
		gap: 8px;
	}

	.arf-quick__btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arf-quick__btn {
		transition: none;
	}

	.arf-quick__btn:active {
		scale: 1;
	}
}


/* --------------------------------------------------------------------------
   14-2. 문의 폼
   -------------------------------------------------------------------------- */
.arf-form {
	margin: 0;
}

.arf-form__row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 18px;
}

.arf-form__label {
	font-size: .9rem;
	font-weight: 600;
	color: var(--c-heading);
	letter-spacing: -.01em;
}

/* input / textarea 를 앞에 붙인 이유:
   테마가 input[type="text"] 같은 속성 선택자로 배경·테두리를 지정해 두는데,
   그쪽이 클래스 하나짜리 규칙보다 우선순위가 높습니다.
   요소 이름을 하나 붙여 같은 무게로 맞춘 뒤 뒤에서 덮어씁니다. */
input.arf-form__input,
textarea.arf-form__input {
	width: 100%;
	font-family: inherit;
	/* 16px 미만이면 아이폰이 입력할 때 화면을 확대합니다 */
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-text);
	background-color: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 13px 15px;
	transition-property: border-color, box-shadow;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

input.arf-form__input::placeholder,
textarea.arf-form__input::placeholder {
	color: var(--c-muted);
	opacity: .75;
}

/* 어디를 입력 중인지 색만이 아니라 테두리 두께감으로도 보이게.
   기본 outline 을 지우는 대신 같은 자리에 더 잘 보이는 테를 둡니다. */
input.arf-form__input:focus,
textarea.arf-form__input:focus {
	outline: none;
	border-color: var(--c-heading);
	box-shadow: 0 0 0 3px oklch(0 0 0 / .07);
}

textarea.arf-form__textarea {
	min-height: 150px;
	resize: vertical;
}

/* 사람에게는 안 보이고 자동 프로그램만 채우는 칸.
   display:none 대신 화면 밖으로 밀어 둡니다 — 숨김 방식이 단순할수록
   무시하고 지나가는 프로그램이 많습니다. */
.arf-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.arf-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin: 26px 0 0;
}

/* 주 버튼 — 본문 CTA와 같은 라임. 이 페이지에서 누를 곳은 여기 하나뿐입니다. */
.arf-form__submit {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	color: var(--arf-ink);
	background-color: var(--arf-lime);
	border: 0;
	border-radius: var(--radius);
	padding: 17px 28px;
	cursor: pointer;
	transition-property: filter;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}

.arf-form__submit:hover,
.arf-form__submit:focus {
	color: var(--arf-ink);
	background-color: var(--arf-lime);
	filter: brightness(1.08);
}

.arf-form__submit:active {
	transform: scale(.96);
}

/* 보조 — 폼이 부담스러운 사람을 위한 통로. 버튼으로 만들면 주 버튼과 경쟁합니다. */
.arf-form__tel {
	font-size: .95rem;
	font-weight: 600;
	color: var(--c-muted);
}

.arf-form__tel:hover {
	color: var(--c-heading);
}

/* 보낸 뒤 화면 */
.arf-form__done {
	border: 1px solid var(--c-border);
	border-left: 3px solid var(--arf-lime);
	border-radius: var(--radius);
	background-color: var(--c-bg-soft);
	padding: 24px 26px;
}

.arf-form__done-title {
	margin: 0 0 8px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--c-heading);
	letter-spacing: -.02em;
}

.arf-form__done-desc {
	margin: 0;
	font-size: .95rem;
	color: var(--c-text);
}

/* 잘못된 경우. 빨강은 이 사이트의 색이 아니지만, 오류만은 관습을 따르는 편이
   설명 없이도 바로 읽힙니다. */
.arf-form__error {
	margin: 0 0 20px;
	padding: 13px 16px;
	border-radius: var(--radius);
	border: 1px solid #f0d0d0;
	background-color: #fdf3f3;
	color: #a13a3a;
	font-size: .95rem;
	font-weight: 600;
}

@media (max-width: 768px) {
	/* 휴대폰에서는 주 버튼을 가로로 꽉 채웁니다.
	   한 손으로 쥔 채 엄지로 누르는 자리라 넓을수록 안전합니다. */
	.arf-form__actions {
		gap: 14px;
	}

	.arf-form__submit {
		width: 100%;
	}

	/* 글자 높이만큼만 반응하면 24px 밖에 안 돼 손가락으로 누르기 어렵습니다 */
	.arf-form__tel {
		width: 100%;
		text-align: center;
		padding: 13px 0;
	}

	/* 이미 문의 페이지에 있는 사람에게 "문의" 버튼을 또 보여줄 이유가 없습니다.
	   그 자리는 스킨 버튼이 다 쓰게 둡니다. */
	.arf-contact-page .arf-mobilebar__sub {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	input.arf-form__input,
	textarea.arf-form__input,
	.arf-form__submit {
		transition: none;
	}

	.arf-form__submit:active {
		transform: none;
	}
}

/* ==========================================================================
   [15] 내가 추가하는 CSS — 아래에 자유롭게 작성하세요
   ========================================================================== */

/* ==========================================================================
   [16] 쓴 스킨 카드 — 사례글 아래에 붙는 상품 카드
   ------------------------------------------------------------------
   이름을 arf-usedskin 으로 둡니다. [11] 사이드바 위젯이 arf-skin 을
   이미 쓰고 있어서, 같은 이름을 쓰면 그쪽의 64px 고정 크기가 끼어듭니다.
   ========================================================================== */

.arf-usedskin {
	display: grid;
	grid-template-columns: 168px 1fr;
	grid-template-areas:
		"label label"
		"thumb body";
	gap: 0 22px;
	align-items: center;
	margin: 44px 0;
	padding: 22px;
	border-radius: 14px;
	background: #fafbfc;
	box-shadow: var(--shadow-border);
}

.arf-usedskin__eyebrow {
	grid-area: label;
	margin-bottom: 14px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--c-muted);
}

.arf-usedskin__thumb {
	grid-area: thumb;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.arf-usedskin__thumb img {
	width: 100%;
	height: auto;
	display: block;
	outline: 1px solid oklch(0 0 0 / .1);
	outline-offset: -1px;
	transition: transform .25s ease;
}

.arf-usedskin__thumb:hover img { transform: scale(1.03); }

.arf-usedskin__body {
	grid-area: body;
	min-width: 0;
}

.arf-usedskin__name {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--c-brand);
	letter-spacing: -.01em;
}

.arf-usedskin__meta {
	margin: 0 0 16px;
	font-size: .875rem;
	color: var(--c-muted);
}

@media (max-width: 600px) {
	.arf-usedskin {
		grid-template-columns: 1fr;
		grid-template-areas:
			"label"
			"thumb"
			"body";
		gap: 0;
	}
	.arf-usedskin__thumb { margin-bottom: 16px; }
}

/* ==========================================================================
   [17] 글 아래 「이어서 볼 글」 — functions.php 의 arf_render_more_posts()
   ========================================================================== */
.arf-more {
	margin: 56px 0 8px;
	padding-top: 40px;
	border-top: 1px solid var(--c-border);
}

.arf-more__title {
	margin: 0 0 22px;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--c-heading);
}

/* 소제목 앞 라임 점 하나 — 본문 h2 와 구분되게 */
.arf-more__title::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 9px;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--arf-lime);
}

.arf-more__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.arf-more__card {
	display: block;
	min-width: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-border);
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}

.arf-more__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-border-hover);
}

.arf-more__thumb {
	display: block;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	background: var(--c-bg-soft);
	line-height: 0;
}

.arf-more__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.arf-more__card:hover .arf-more__thumb img { transform: scale(1.04); }

/* 대표 이미지가 없는 글의 대체 칸 */
.arf-more__blank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--c-brand);
	color: var(--arf-lime);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1;
}

/* min-width 0 이 없으면 아래 -webkit-box 제목이 칸을 밀어내
   글자가 카드 밖으로 삐져나옵니다. 가로형 카드에서 특히 그렇습니다. */
.arf-more__body {
	display: block;
	min-width: 0;
	overflow: hidden;
	padding: 14px 16px 18px;
}

.arf-more__cat {
	display: block;
	margin-bottom: 6px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--c-muted);
}

.arf-more__name {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 100%;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: -.01em;
	color: var(--c-heading);
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* --- 이전 / 다음 --------------------------------------------------------- */
.arf-adjacent {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 32px;
}

.arf-adjacent__item {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 12px;
	border-radius: 12px;
	background: var(--c-bg-soft);
	text-decoration: none;
	transition: background .2s ease;
}

.arf-adjacent__item:hover { background: var(--c-brand-soft); }

/* 다음 글은 오른쪽 끝에 붙는 게 방향과 맞습니다 — 그림도 반대편으로 */
.arf-adjacent__item--next {
	grid-template-columns: minmax(0, 1fr) 84px;
	text-align: right;
}

.arf-adjacent__item--next .arf-adjacent__thumb { order: 2; }

/* 이전 글이 없으면 다음 글이 왼쪽으로 밀리지 않게 오른쪽 칸에 고정합니다 */
.arf-adjacent__item--next:first-child { grid-column: 2; }

.arf-adjacent__thumb {
	display: block;
	aspect-ratio: 1200 / 630;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	line-height: 0;
}

.arf-adjacent__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.arf-adjacent__body {
	min-width: 0;
	overflow: hidden;
}

.arf-adjacent__label {
	display: block;
	margin-bottom: 4px;
	font-size: .7rem;
	font-weight: 700;
	color: var(--c-muted);
}

.arf-adjacent__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 100%;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -.01em;
	color: var(--c-heading);
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 좁아지면 세 칸을 한 줄씩 가로형으로 눕힙니다.
   칸을 둘씩 쪼개면 제목이 두 글자씩 끊겨 읽히지 않습니다. */
@media (max-width: 860px) {
	.arf-more__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

	.arf-more__card {
		display: grid;
		grid-template-columns: 168px minmax(0, 1fr);
		gap: 14px;
		align-items: center;
		padding: 12px;
	}

	/* 표지는 가로로 긴 그림이라 정사각형으로 자르면 글자가 잘립니다.
	   비율을 지키고 세로 가운데에 둡니다. */
	.arf-more__thumb { border-radius: 8px; }

	.arf-more__body { padding: 0; }
}

@media (max-width: 560px) {
	.arf-more { margin-top: 40px; padding-top: 30px; }

	.arf-more__card { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }

	/* 좁을수록 한 줄에 들어가는 글자가 적어집니다. 줄 수를 늘려
	   제목 끝의 브랜드 이름까지 보이게 합니다 — 사례글은 그게 미끼입니다. */
	.arf-more__name { font-size: .82rem; -webkit-line-clamp: 4; }

	.arf-adjacent__name { -webkit-line-clamp: 3; }

	.arf-adjacent { grid-template-columns: minmax(0, 1fr); }

	.arf-adjacent__item,
	.arf-adjacent__item--next,
	.arf-adjacent__item--next:first-child {
		grid-template-columns: 96px minmax(0, 1fr);
		grid-column: 1;
		text-align: left;
	}

	.arf-adjacent__item--next .arf-adjacent__thumb { order: 0; }
}