/*
Theme Name: 인생플러스
Theme URI: https://insaengplus.com
Description: 50+ 생활문제 해결 큐레이션 준포털 전용 테마. 목업이 디자인 기준이며 docs/01_디자인-토큰.md 의 값만 쓴다.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: senior
*/

/* ═══════════════════════════════════════════════════════════════
   0. 토큰 — docs/01_디자인-토큰.md
   ⛔ 이 블록 밖에서 새로운 색·간격·라운드 값을 만들지 않는다.
   ═══════════════════════════════════════════════════════════════ */
:root {
	/* 브랜드 */
	--brand-900: #0E5C44;
	--brand-700: #106B50;
	--brand-500: #22A06B;
	--brand-100: #EAF5EC;
	--leaf: #4CAF50;

	/* 배경 */
	--bg-page: #F5F5F2;
	--bg-card: #FFFFFF;
	--bg-hero-from: #FDF6EC;
	--bg-hero-to: #F6E9D8;
	--bg-product: #FDF2E6;
	--bg-gift: #FDECEF;

	/* 텍스트 — text-muted 보다 옅게 쓰지 않는다 (대비 4.8:1) */
	--text-strong: #1F2A24;
	--text-body: #3F4A44;
	--text-muted: #6B7280;

	/* 선 */
	--border: #E5E7EB;
	--border-strong: #D1D5DB;
	--focus-ring: #22A06B;

	/* 모양 */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-full: 9999px;
	--shadow-card: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
	--shadow-hover: 0 8px 20px rgba(0, 0, 0, .10);

	/* 간격 (4px 스케일) */
	--sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
	--sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px;

	/* 레이아웃 */
	/* ⚠ 1200 → 1320. 2026-09-12 실측 후 변경.
	   1200 에서 카드 한 장이 185px 이었다. 사진 + 세 줄 제목 + 배지가 들어가기엔 좁아
	   제목이 자주 잘렸다. 시니어 대상이라 글자를 16px 아래로 못 내리기 때문이다.
	   ⛔ 1360 이나 1440 으로 가지 않는다. 노트북 1366×768 에서 스크롤바를 빼면 1351px 이라
	      좌우가 잘린다. 1320 이 그 화면에 여유 있게 들어가는 상한이다.
	   ⛔ 본문 폭(720px)은 그대로 둔다. 한글 18px 에 720px 면 한 줄 40자로 적정이다.
	      넓히면 오히려 읽기 나빠진다. 넓히는 것은 «바깥 폭»뿐이다. */
	--maxw: 1320px;
	--sidebar-w: 320px;
	--gutter: 24px;

	--font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
		"Malgun Gothic", "맑은 고딕", sans-serif;
}

@media (max-width: 767px) {
	:root { --gutter: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   1. 기본
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font);
	/* 본문 하한 18px — 시니어 대상이므로 낮추지 않는다 */
	font-size: 18px;
	line-height: 1.75;
	color: var(--text-body);
	background: var(--bg-page);
	-webkit-font-smoothing: antialiased;
	/* ⛔ 이게 없으면 좁은 칸에서 한글이 «한 글자씩» 세로로 쪼개진다.
	   keep-all 이면 띄어쓰기 단위로만 줄이 바뀐다. */
	word-break: keep-all;
	overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

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

h1, h2, h3, h4 { color: var(--text-strong); margin: 0; font-weight: 700; }
h1 { font-size: 32px; line-height: 1.35; }
h2 { font-size: 24px; line-height: 1.4; }
h3 { font-size: 19px; line-height: 1.45; font-weight: 600; }

p { margin: 0 0 var(--sp-24); }

@media (max-width: 767px) {
	h1 { font-size: 26px; }
}

/* 포커스 링을 없애지 않는다 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sr-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--brand-700); color: #fff; padding: var(--sp-12) var(--sp-16);
	border-radius: 0 0 var(--radius-sm) 0;
}
.sr-skip:focus { left: 0; }

/* 아이콘 */
.sr-ico { width: 24px; height: 24px; flex: none; }

/* ═══════════════════════════════════════════════════════════════
   2. 레이아웃
   ═══════════════════════════════════════════════════════════════ */
.sr-wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.sr-main { padding-bottom: var(--sp-64); }

/* 홈 2단 — lg 미만에서 1단 */
/* ⛔ 1fr 은 기본 min-width 가 auto 라 내용보다 작아지지 못한다.
   칸 안에 줄일 수 없는 요소가 하나라도 있으면 격자가 부풀어 «좌우 스크롤»이 생긴다.
   minmax(0, 1fr) 이 그것을 막는다. 이 파일의 모든 격자에 같은 규칙을 쓴다. */
.sr-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-32);
}
@media (min-width: 1024px) {
	.sr-cols { grid-template-columns: minmax(0, 1fr) var(--sidebar-w); }
}

.sr-section { margin-top: var(--sp-48); }
@media (max-width: 767px) {
	.sr-section { margin-top: var(--sp-32); }
}

/* ═══════════════════════════════════════════════════════════════
   3. 헤더
   ═══════════════════════════════════════════════════════════════ */
.sr-header {
	background: var(--bg-card);
	border-bottom: 1px solid var(--border);
	position: sticky; top: 0; z-index: 50;
}

/* 머리글이 붙어 있으므로 «#이름»으로 온 소제목이 그 밑에 가리지 않게 한다. 작성자 줄 → /about/#how */
h2[id] { scroll-margin-top: 100px; }

.sr-header__inner {
	display: flex; align-items: center; gap: var(--sp-24);
	/* 로고 위아래 숨 쉴 자리. 767px 이하 값은 26절에서 다시 정한다 */
	min-height: 84px;
}
@media (min-width: 768px) {
	/* PC 로고 80px — 위아래 10px 씩 */
	.sr-header__inner { min-height: 100px; }
}

.sr-logo { display: flex; align-items: center; gap: var(--sp-8); text-decoration: none; }
.sr-logo:hover { text-decoration: none; }
.sr-logo__mark { color: var(--leaf); width: 32px; height: 32px; }
.sr-logo__name { font-size: 22px; font-weight: 700; color: var(--text-strong); line-height: 1.2; }
.sr-logo__tag { font-size: 14px; color: var(--text-muted); line-height: 1.3; display: block; }

.sr-nav { display: none; gap: var(--sp-4); flex: 1; }
@media (min-width: 1024px) { .sr-nav { display: flex; } }

.sr-nav a {
	display: flex; align-items: center;
	/* 터치 타겟 44px */
	min-height: 44px; padding: 0 var(--sp-16);
	font-size: 17px; font-weight: 600; color: var(--text-body);
	border-radius: var(--radius-sm);
}
.sr-nav a:hover { background: var(--brand-100); color: var(--brand-900); text-decoration: none; }
.sr-nav .current-menu-item > a { color: var(--brand-700); }

.sr-search { display: none; margin-left: auto; }
@media (min-width: 1024px) { .sr-search { display: block; } }

.sr-search__form { display: flex; align-items: center; gap: var(--sp-8);
	background: var(--bg-page); border: 1px solid var(--border);
	border-radius: var(--radius-full); padding: 0 var(--sp-16); min-height: 44px;
	width: 280px; max-width: 100%; }
.sr-search__form:focus-within { border-color: var(--brand-500); }
.sr-search__icon { color: var(--text-muted); width: 20px; height: 20px; }
.sr-search__input {
	border: 0; background: transparent; flex: 1; min-width: 0;
	font: inherit; font-size: 16px; color: var(--text-body);
}
.sr-search__input:focus { outline: none; }
.sr-search__submit { border: 0; background: transparent; color: var(--brand-700);
	font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; padding: 0 var(--sp-4); }

/* 모바일 헤더 버튼 */
.sr-hbtn {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border: 0; background: transparent;
	color: var(--text-body); cursor: pointer; border-radius: var(--radius-sm);
}
.sr-hbtn:hover { background: var(--bg-page); }
.sr-header__mobile { display: flex; gap: var(--sp-4); margin-left: auto; }
@media (min-width: 1024px) { .sr-header__mobile { display: none; } }

/* 모바일 패널 */
.sr-mobile-panel { display: none; border-top: 1px solid var(--border); background: var(--bg-card); }
.sr-mobile-panel.is-open { display: block; }
@media (min-width: 1024px) { .sr-mobile-panel { display: none !important; } }
.sr-mobile-panel ul { list-style: none; margin: 0; padding: var(--sp-8) 0; }
.sr-mobile-panel a {
	display: flex; align-items: center; min-height: 52px;
	padding: 0 var(--gutter); font-size: 18px; font-weight: 600; color: var(--text-body);
}
.sr-mobile-panel a:hover { background: var(--brand-100); text-decoration: none; }
.sr-mobile-search { padding: var(--sp-12) var(--gutter); border-top: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════
   4. 히어로
   ═══════════════════════════════════════════════════════════════ */
.sr-hero {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, var(--bg-hero-from), var(--bg-hero-to));
	border-radius: var(--radius-lg);
	margin-top: var(--sp-24);
	display: grid; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 768px) {
	.sr-hero { grid-template-columns: 1fr 1fr; }
}

.sr-hero__text { padding: var(--sp-40); }
@media (max-width: 767px) { .sr-hero__text { padding: var(--sp-24); } }

.sr-hero__title {
	font-size: 44px; line-height: 1.25; font-weight: 700;
	color: var(--text-strong); margin: 0 0 var(--sp-16);
}
@media (max-width: 767px) { .sr-hero__title { font-size: 32px; } }

.sr-hero__sub { font-size: 18px; color: var(--text-body); margin: 0 0 var(--sp-24); }

.sr-hero__media { position: relative; aspect-ratio: 16 / 10; }
.sr-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* 목업의 손글씨 메모 — 이미지에 합성하지 않고 텍스트로 분리한다 */
.sr-hero__note {
	display: none;
	position: absolute; right: var(--sp-24); top: var(--sp-24);
	max-width: 200px; font-size: 16px; line-height: 1.6;
	color: var(--text-body); text-align: center;
}
@media (min-width: 1024px) { .sr-hero__note { display: block; } }

/* 대상 선택 칩 */
.sr-chips { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.sr-chip {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 var(--sp-24);
	border-radius: var(--radius-full);
	background: var(--bg-card); border: 1px solid var(--border);
	font-size: 17px; font-weight: 600; color: var(--text-body);
}
.sr-chip:hover { border-color: var(--brand-500); text-decoration: none; }
.sr-chip.is-active { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   5. 섹션 헤더
   ═══════════════════════════════════════════════════════════════ */
.sr-shead { display: flex; align-items: baseline; gap: var(--sp-16); margin-bottom: var(--sp-20); }
.sr-shead__body { flex: 1; min-width: 0; }
.sr-shead__title { font-size: 24px; font-weight: 700; color: var(--text-strong); margin: 0; }
.sr-shead__sub { font-size: 16px; color: var(--text-muted); margin: var(--sp-4) 0 0; }
.sr-shead__more {
	display: inline-flex; align-items: center; gap: var(--sp-4);
	min-height: 44px; font-size: 16px; font-weight: 600; color: var(--text-muted); flex: none;
}
.sr-shead__more:hover { color: var(--brand-700); text-decoration: none; }
.sr-shead__more .sr-ico { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════════════════════
   6. 생활문제 카드
   ═══════════════════════════════════════════════════════════════ */
.sr-grid {
	display: grid; gap: var(--sp-20);
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1023px) { .sr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	/* 모바일 가로 스크롤 — 카드 폭 78vw, 스냅 */
	.sr-grid {
		grid-auto-flow: column;
		grid-auto-columns: 78vw;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: var(--sp-16);
		padding-bottom: var(--sp-8);
		margin-left: calc(var(--gutter) * -1);
		margin-right: calc(var(--gutter) * -1);
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}
	.sr-grid > * { scroll-snap-align: start; }
}

/* 카드 전체가 링크다. 안에 링크를 중첩하지 않는다. */
.sr-card {
	display: block; background: var(--bg-card);
	border-radius: var(--radius-md); overflow: hidden;
	box-shadow: var(--shadow-card);
	color: inherit;
	transition: box-shadow .18s ease;
}
.sr-card:hover { box-shadow: var(--shadow-hover); text-decoration: none; }

.sr-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--border); }
.sr-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .18s ease; }
.sr-card:hover .sr-card__media img { transform: scale(1.03); }

.sr-badge {
	position: absolute; left: var(--sp-12); top: var(--sp-12);
	display: inline-block; padding: var(--sp-4) var(--sp-12);
	border-radius: var(--radius-sm);
	font-size: 14px; font-weight: 600; line-height: 1.5;
}

.sr-card__body { padding: var(--sp-20); }
.sr-card__title {
	font-size: 19px; font-weight: 600; line-height: 1.45; color: var(--text-strong);
	margin: 0 0 var(--sp-8);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-card__sub {
	font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-card__meta {
	display: flex; align-items: center; gap: var(--sp-4);
	margin-top: var(--sp-12); font-size: 14px; color: var(--text-muted);
}
.sr-card__meta .sr-ico { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════
   7. 상품
   ═══════════════════════════════════════════════════════════════ */
.sr-strip {
	background: var(--bg-product); border-radius: var(--radius-lg);
	padding: var(--sp-32); margin-top: var(--sp-48);
	display: grid; gap: var(--sp-24); grid-template-columns: 1fr;
}
/* ⚠ 목업은 왼쪽에 문구, 오른쪽에 상품 5칸이다. 그런데 본문 열이 약 776px 이라
   5칸이면 한 칸이 139px 이 되고, 시니어 기준 버튼 글자(16~17px)가 들어가지 않는다.
   규칙 2(글자 크기를 낮추지 않는다)가 규칙 1(목업)보다 우선하므로
   «문구를 위로 올리고 칸을 4개로 줄인다». docs/04 ProductStrip 참조. */
@media (max-width: 767px) { .sr-strip { padding: var(--sp-20); } }

.sr-strip__lead h2 { margin-bottom: var(--sp-12); }
.sr-strip__lead p { font-size: 16px; color: var(--text-body); margin: 0; }

.sr-pgrid { display: grid; gap: var(--sp-20); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .sr-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sr-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); } }
/* 모바일 가로 스크롤 — 글 줄(.sr-grid)과 같은 방식. 홈 추천 상품 줄이 쓴다.
   ⚠ 카드 폭은 글 카드(78vw)보다 좁은 64vw. 상품 사진이 정사각이라 78vw 면 카드가 너무 길고,
   다음 카드가 넉넉히 보여야 옆으로 넘긴다는 것을 안다. 360px 에서 카드 안쪽 198px — 버튼이 한 줄에 든다. */
@media (max-width: 767px) {
	.sr-pgrid--scroll {
		grid-auto-flow: column;
		grid-auto-columns: 64vw;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--sp-8);
		margin-left: calc(var(--gutter) * -1);
		margin-right: calc(var(--gutter) * -1);
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}
	.sr-pgrid--scroll > * { scroll-snap-align: start; }
}

.sr-product {
	background: var(--bg-card); border-radius: var(--radius-md);
	padding: var(--sp-16); box-shadow: var(--shadow-card);
	display: flex; flex-direction: column; gap: var(--sp-12);
}
.sr-product__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-page); }
.sr-product__media img { width: 100%; height: 100%; object-fit: contain; }
.sr-product__name { font-size: 17px; font-weight: 600; color: var(--text-strong); margin: 0; line-height: 1.45; }
.sr-product__desc { font-size: 16px; color: var(--text-muted); margin: 0; }
.sr-product .sr-cta { font-size: 16px; padding: 0 var(--sp-12); }

/* 「이 글에서 고른 물건」 — 비교 행이 없는 비교표 대신(애드센스 승인용 스위치, 2026-10-20).
   사진 없이 이름 · 한 줄 평 · 버튼. 버튼을 카드 아래 끝에 맞춘다.
   ⚠ .sr-compare 는 모바일에서 좌우 여백이 0 이다(표가 옆으로 넘어가서). 카드는 넘기지 않으니 여백을 돌려준다. */
.sr-chosen .sr-product .sr-cta { margin-top: auto; }
@media (max-width: 767px) { .sr-chosen { padding: var(--sp-20); } }

/* 모바일 2단에서는 카드 안쪽이 약 104px 이다. nowrap 이면 버튼이 카드를 뚫는다.
   keep-all 이 걸려 있으므로 띄어쓰기에서만 줄이 바뀐다 — 「최저가 / 확인하기」. */
@media (max-width: 767px) {
	.sr-product .sr-cta {
		white-space: normal;
		line-height: 1.3;
		height: auto;
		min-height: 44px;
		padding: var(--sp-8) var(--sp-12);
	}
}

/* ⛔ 가격·할인율 배지를 만들지 않는다. 자리는 CTA 가 대신한다. */
.sr-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
	min-height: 44px; padding: 0 var(--sp-20); margin-top: auto;
	background: var(--brand-700); color: #fff;
	border: 0; border-radius: var(--radius-sm);
	font: inherit; font-size: 17px; font-weight: 600; line-height: 1;
	cursor: pointer; text-align: center;
	white-space: nowrap;
}
.sr-cta:hover { background: var(--brand-900); color: #fff; text-decoration: none; }
.sr-cta .sr-ico { width: 18px; height: 18px; }

.sr-more-card {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-8);
	min-height: 200px;
	background: transparent; border: 1px dashed var(--border-strong);
	border-radius: var(--radius-md); padding: var(--sp-20);
	font-size: 16px; font-weight: 600; color: var(--text-muted); text-align: center;
}
.sr-more-card:hover { border-color: var(--brand-500); color: var(--brand-700); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   8. 사이드바 위젯
   ═══════════════════════════════════════════════════════════════ */
.sr-side { display: flex; flex-direction: column; gap: var(--sp-24); }
.sr-widget { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--sp-24); }
.sr-widget__title { font-size: 19px; font-weight: 700; color: var(--text-strong); margin: 0 0 var(--sp-16); }

/* 많이 찾는 주제 — 4x2 */
.sr-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); }
/* 모바일에서 4칸이면 한 칸이 약 58px 인데 「디지털기기」 라벨이 약 70px 이다.
   keep-all 때문에 줄일 수도 없어 격자가 밀려난다. 2칸으로 내리면 터치도 편해진다. */
@media (max-width: 767px) {
	.sr-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
	.sr-topic { flex-direction: row; justify-content: flex-start; gap: var(--sp-12); min-height: 56px; }
	.sr-topic__label { text-align: left; }
}
.sr-topic { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); color: var(--text-body); }
.sr-topic:hover { text-decoration: none; color: var(--brand-700); }
.sr-topic__ico {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: var(--radius-full);
}
.sr-topic__label { font-size: 14px; text-align: center; line-height: 1.3; }

/* 선물 배너 */
.sr-gift { background: var(--bg-gift); }
.sr-gift p { font-size: 16px; color: var(--text-body); margin: 0 0 var(--sp-16); }

/* 꿀팁 목록 */
.sr-tips { display: flex; flex-direction: column; gap: var(--sp-16); }
.sr-tip { display: flex; gap: var(--sp-12); align-items: flex-start; color: inherit; }
.sr-tip:hover { text-decoration: none; }
.sr-tip:hover .sr-tip__title { color: var(--brand-700); }
.sr-tip__media { width: 64px; height: 64px; flex: none; border-radius: var(--radius-md); overflow: hidden; background: var(--border); }
.sr-tip__media img { width: 100%; height: 100%; object-fit: cover; }
.sr-tip__title {
	font-size: 16px; font-weight: 600; color: var(--text-strong); margin: 0; line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-tip__meta { font-size: 14px; color: var(--text-muted); margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-4); }
.sr-tip__meta .sr-ico { width: 16px; height: 16px; }

/* 뉴스레터 */
.sr-news { background: var(--brand-100); }
.sr-news p { font-size: 16px; color: var(--text-body); margin: 0 0 var(--sp-16); }
.sr-news__form { display: flex; gap: var(--sp-8); }
.sr-news__input {
	flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--sp-16);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	font: inherit; font-size: 16px; background: var(--bg-card);
}
.sr-news__note { font-size: 16px; color: var(--text-muted); margin: var(--sp-12) 0 0; }

/* ═══════════════════════════════════════════════════════════════
   9. 빈 상태
   ═══════════════════════════════════════════════════════════════ */
.sr-empty {
	background: var(--bg-card); border: 1px dashed var(--border-strong);
	border-radius: var(--radius-md); padding: var(--sp-48) var(--sp-24);
	text-align: center; color: var(--text-muted); font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   10. 푸터
   ═══════════════════════════════════════════════════════════════ */
.sr-footer {
	background: var(--bg-card); border-top: 1px solid var(--border);
	margin-top: var(--sp-64); padding: var(--sp-40) 0;
	/* 모바일 탭바에 가리지 않게 */
	padding-bottom: calc(var(--sp-40) + 72px);
}
@media (min-width: 1024px) { .sr-footer { padding-bottom: var(--sp-40); } }

.sr-footer__nav { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); margin-bottom: var(--sp-20); }
.sr-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--text-body); font-weight: 600; }

/* 쿠팡 파트너스 고지 · 오인 방지 문구 — 모든 페이지 하단에 고정 노출
   ⛔ 14px 이었다. CLAUDE.md 규칙 2 의 «부가정보 16px 이상»을 어기고 있었다.
      2026-09-21 Chris 결정으로 16px 로 올렸다. 시니어 독자에게 14px 은 작고,
      고지 문구는 특히 읽혀야 하는 글이다. */
.sr-disclosure { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0; }
.sr-disclosure + .sr-disclosure { margin-top: var(--sp-8); }
.sr-copy { font-size: 14px; color: var(--text-muted); margin: var(--sp-12) 0 0; }

/* 본문 상단 제휴 고지 */
.sr-affiliate-note {
	background: var(--brand-100); border-radius: var(--radius-sm);
	padding: var(--sp-12) var(--sp-16); font-size: 16px; color: var(--text-body);
	margin: 0 0 var(--sp-24);
}

/* ═══════════════════════════════════════════════════════════════
   11. 모바일 하단 탭바 — 3탭
   ═══════════════════════════════════════════════════════════════ */
.sr-tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	display: flex; background: var(--bg-card); border-top: 1px solid var(--border);
	padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 1024px) { .sr-tabbar { display: none; } }
.sr-tabbar a {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: var(--sp-4); min-height: 64px; font-size: 14px; font-weight: 600; color: var(--text-muted);
}
.sr-tabbar a:hover, .sr-tabbar a.is-active { color: var(--brand-700); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   12. 본문 (상세)
   ═══════════════════════════════════════════════════════════════ */
.sr-article { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--sp-40); }
@media (max-width: 767px) { .sr-article { padding: var(--sp-20); } }
.sr-article__body { max-width: 720px; font-size: 18px; line-height: 1.75; }
.sr-article__body p { margin: 0 0 var(--sp-24); }
.sr-article__body img { border-radius: var(--radius-md); margin: var(--sp-24) 0; }
.sr-article__fig { margin: 0; }
.sr-article__fig img { display: block; width: 100%; height: auto; margin: 0 0 var(--sp-24); }
.sr-article__body h2 { margin: var(--sp-40) 0 var(--sp-16); }
.sr-article__body h3 { margin: var(--sp-32) 0 var(--sp-12); }

.sr-crumbs { font-size: 15px; color: var(--text-muted); margin-bottom: var(--sp-16); }
.sr-crumbs a { color: var(--text-muted); }
.sr-crumbs a:hover { color: var(--brand-700); }

/* ═══════════════════════════════════════════════════════════════
   13. 상세 — 제목 영역
   ═══════════════════════════════════════════════════════════════ */
.sr-ahead { margin-bottom: var(--sp-24); }
.sr-ahead h1 { margin-bottom: var(--sp-8); }
.sr-ahead__sub { font-size: 18px; color: var(--text-muted); margin: 0 0 var(--sp-16); }
.sr-ahead__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8);
	font-size: 14px; color: var(--text-muted); margin: 0;
	padding-bottom: var(--sp-16); border-bottom: 1px solid var(--border);
}
/* 작성자 줄 → 소개 «어떻게 쓰나요». 글자 줄이라도 누르는 자리는 44px 를 둔다(규칙 2). */
.sr-ahead__by {
	display: inline-flex; align-items: center; min-height: 44px;
	color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.sr-ahead__views { display: inline-flex; align-items: center; gap: var(--sp-4); }
.sr-ahead__views .sr-ico { width: 16px; height: 16px; }

.sr-article__hero { margin: 0 0 var(--sp-24); }
.sr-article__hero img { border-radius: var(--radius-md); width: 100%; }

/* 3레이어 — 요약 / 비교판단 / 본문 */
.sr-lead { font-size: 19px; font-weight: 600; color: var(--text-strong); }
.sr-decide {
	background: var(--bg-page); border-left: 4px solid var(--brand-500);
	border-radius: var(--radius-sm); padding: var(--sp-20) var(--sp-24);
	margin: 0 0 var(--sp-32);
}
.sr-decide p:last-child { margin-bottom: 0; }

/* ⛔ .sr-grid 는 모바일에서 가로 스크롤로 바뀐다(grid-auto-flow:column).
   --4 변형은 그 규칙을 물려받으면 안 된다. 흐름과 여백을 되돌린다. */
.sr-grid--4 {
	grid-auto-flow: row;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-columns: auto;
	overflow-x: visible;
	margin-left: 0; margin-right: 0;
	padding-left: 0; padding-right: 0;
}
@media (max-width: 1023px) { .sr-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .sr-grid--4 { grid-template-columns: 1fr; gap: var(--sp-16); } }

/* ═══════════════════════════════════════════════════════════════
   14. 비교표
   ⛔ 가격 행이 없다. 모바일에서 첫 열을 고정한다.
   ═══════════════════════════════════════════════════════════════ */
.sr-compare { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--sp-32); }
@media (max-width: 767px) { .sr-compare { padding: var(--sp-20) 0; } }

.sr-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sr-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 560px; font-size: 16px; }
.sr-table th, .sr-table td {
	border-bottom: 1px solid var(--border); padding: var(--sp-12) var(--sp-16);
	text-align: left; vertical-align: middle;
}
.sr-table thead th { border-bottom: 2px solid var(--border-strong); vertical-align: top; }
.sr-table tbody th {
	font-weight: 600; color: var(--text-strong); white-space: nowrap;
	/* 모바일에서 첫 열 고정 */
	position: sticky; left: 0; background: var(--bg-card); z-index: 1;
}
.sr-table thead th:first-child { position: sticky; left: 0; background: var(--bg-card); z-index: 2; }

.sr-tcell { display: flex; flex-direction: column; gap: var(--sp-8); align-items: center; min-width: 140px; }
.sr-tcell__media { width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-page); }
.sr-tcell__media img { width: 100%; height: 100%; object-fit: contain; }
.sr-tcell__name { font-size: 16px; font-weight: 600; color: var(--text-strong); text-align: center; line-height: 1.45; }
.sr-tcell .sr-cta { width: 100%; font-size: 16px; padding: 0 var(--sp-12); }

.sr-pick {
	display: inline-block; padding: var(--sp-4) var(--sp-12); border-radius: var(--radius-sm);
	background: var(--brand-100); color: var(--brand-900); font-size: 14px; font-weight: 600;
}

.sr-compare__note { font-size: 16px; color: var(--text-muted); margin: var(--sp-16) 0 0; }

.sr-stars { display: inline-flex; align-items: center; gap: 2px; }
.sr-star { width: 18px; height: 18px; color: var(--border-strong); }
.sr-star.is-on { color: #A16207; fill: currentColor; }
.sr-stars__num { margin-left: var(--sp-8); font-size: 14px; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   15. 상품 상세
   ═══════════════════════════════════════════════════════════════ */
.sr-pdetail { display: grid; grid-template-columns: 1fr; gap: var(--sp-24); }
@media (min-width: 768px) { .sr-pdetail { grid-template-columns: 320px 1fr; } }
.sr-pdetail__media { aspect-ratio: 1 / 1; background: var(--bg-page); border-radius: var(--radius-md); overflow: hidden; }
.sr-pdetail__media img { width: 100%; height: 100%; object-fit: contain; }
.sr-pdetail__brand { font-size: 16px; color: var(--text-muted); margin: 0 0 var(--sp-4); }
.sr-pdetail__desc { font-size: 18px; margin: var(--sp-12) 0 var(--sp-16); }
.sr-pdetail__note { font-size: 16px; color: var(--text-muted); margin: var(--sp-12) 0 0; }
.sr-table--spec { min-width: 0; }
.sr-table--spec th { width: 160px; background: var(--bg-page); }

.sr-cta--block { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   16. CPA 신청
   ⛔ 동의 2개 전에는 버튼이 동작하지 않는다.
   ═══════════════════════════════════════════════════════════════ */
.sr-cpa {
	background: var(--brand-100); border-radius: var(--radius-lg);
	padding: var(--sp-32); margin-top: var(--sp-48);
}
@media (max-width: 767px) { .sr-cpa { padding: var(--sp-20); } }
.sr-cpa__title { font-size: 22px; font-weight: 700; color: var(--text-strong); margin: 0 0 var(--sp-20); }
.sr-cpa__consent { display: flex; flex-direction: column; gap: var(--sp-12); margin-bottom: var(--sp-20); }

.sr-check { display: flex; align-items: flex-start; gap: var(--sp-12); font-size: 16px; line-height: 1.6; cursor: pointer; }
.sr-check input {
	/* 터치 타겟 확보 */
	width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--brand-700);
}
.sr-check a { text-decoration: underline; }

.sr-cpa__text { font-size: 16px; color: var(--text-muted); background: var(--bg-card);
	border-radius: var(--radius-sm); padding: var(--sp-12) var(--sp-16); margin: 0; }
.sr-cpa__note { font-size: 16px; color: var(--text-muted); margin: var(--sp-12) 0 0; }

.sr-cta[aria-disabled="true"] {
	background: var(--border-strong); color: var(--text-muted); cursor: not-allowed; pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   17. 공유 — 카카오톡 · 스레드
   이 타깃의 실제 유통 경로는 검색이 아니라 카카오톡이다.
   ═══════════════════════════════════════════════════════════════ */
.sr-share {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-16);
	background: var(--brand-100); border-radius: var(--radius-lg);
	padding: var(--sp-20) var(--sp-24); margin-top: var(--sp-32);
}
.sr-share__label { font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--text-strong); margin: 0; flex: 1; min-width: 200px; }
.sr-share__row { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.sr-share__done { font-size: 16px; color: var(--brand-900); flex-basis: 100%; }

/* 공유 버튼 — 흰 바탕에 상표 아이콘. 글자는 토큰 색이다. */
.sr-sharebtn {
	display: inline-flex; align-items: center; gap: var(--sp-8);
	min-height: 48px; padding: 0 var(--sp-16) 0 var(--sp-8);
	background: var(--bg-card); color: var(--text-strong);
	border: 1px solid var(--border-strong); border-radius: var(--radius-full);
	font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
}
.sr-sharebtn:hover { border-color: var(--brand-700); }
.sr-sharebtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ⚠ 상표 색은 토큰 밖이다. 카카오·스레드의 공식 앱 아이콘 모양을 그대로 쓴다. 바꾸지 않는다. */
.sr-sharebtn__ico {
	width: 32px; height: 32px; flex: 0 0 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px; overflow: hidden;
}
.sr-sharebtn__ico .sr-ico { width: 100%; height: 100%; }
/* 경로가 사각형을 채우고 말풍선을 비워 둔다. 노란색으로 칠하고 바탕을 짙게 깔면 앱 아이콘 모양이 된다. */
.sr-sharebtn__ico--kakao { background: #3A1D1D; color: #FEE500; }
.sr-sharebtn__ico--threads { background: #000; color: #fff; padding: 6px; }

@media (max-width: 767px) {
	.sr-share { flex-direction: column; align-items: stretch; }
	.sr-share__row { display: grid; grid-template-columns: 1fr 1fr; }
	.sr-sharebtn { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   18. 뒤늦은 보정
   ⚠ 이 블록은 «파일 끝»에 있어야 한다. 같은 특정도의 기본 규칙보다
      뒤에 와야 이긴다. 앞쪽 미디어쿼리에 넣었더니 뒤의 기본 규칙에 덮였다.
   ═══════════════════════════════════════════════════════════════ */

/* 사이드바 주제 — 모바일 2열에서 아이콘과 라벨을 가로로 나란히 */
@media (max-width: 767px) {
	.sr-topic {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: var(--sp-12);
		min-height: 56px;
	}
	.sr-topic__label { text-align: left; }
}

/* 히어로 메모 — 사진 위에 그냥 얹으면 대비를 보장할 수 없다.
   반투명 바탕을 깔아 4.5:1 을 확보한다. 시니어 대상에서 타협하지 않는 항목. */
.sr-hero__note {
	background: rgba(255, 255, 255, .88);
	border-radius: var(--radius-md);
	padding: var(--sp-12) var(--sp-16);
	color: var(--text-strong);
	box-shadow: var(--shadow-card);
}

/* 대표 이미지가 없을 때의 자리표시 — 깨진 느낌 대신 의도된 빈칸으로 */
.sr-card__media:empty,
.sr-tip__media:empty {
	background: linear-gradient(135deg, var(--bg-page), var(--border));
}

/* ⚠ 생활발견 그리드 5열 → 4열 (2026-09-12)
   본문 열이 약 800px 이라 5열이면 한 칸이 144px 이다. 제목 19px 이 두 글자 단위로
   잘려 「밤에 화장실 / 갈 때, 이런…」 이 된다. 4열이면 185px 이 나온다.
   상품 스트립과 같은 판단 — 규칙 2(읽기)가 규칙 1(목업)보다 우선한다.
   docs/04 ProblemCardGrid 참조. */
@media (min-width: 1024px) {
	.sr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 제목은 세 줄까지 보여 준다. 두 줄이면 대부분의 제목이 잘린다. */
.sr-card__title { -webkit-line-clamp: 3; }

/* 비교표 — 추천 배지가 없는 열도 같은 높이를 차지해야 버튼 줄이 맞는다 */
.sr-pick.is-empty { visibility: hidden; }
.sr-tcell { justify-content: flex-start; }
.sr-tcell .sr-cta { margin-top: var(--sp-4); }

/* ═══════════════════════════════════════════════════════════════
   19. 추천상품 — 선정 기준 안내
   ⛔ 근거 없는 「인기·만족도」 표현을 쓰지 않는다. 어떻게 골랐는지만 적는다.
   ═══════════════════════════════════════════════════════════════ */
.sr-picks-note { margin-bottom: var(--sp-32); }
.sr-picks-note h2 { font-size: 19px; font-weight: 600; margin: 0 0 var(--sp-12); }
.sr-picks-note p { font-size: 16px; line-height: 1.7; margin: 0 0 var(--sp-12); }
.sr-picks-note p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   20. 게시판 설명 — 분류·대상 목록 맨 위
   ⛔ 카드만 늘어놓으면 목록이 아니라 나열이 된다. 설명이 그 차이를 만든다.
   ═══════════════════════════════════════════════════════════════ */
.sr-board-note {
	background: var(--bg-card); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: var(--sp-20) var(--sp-24);
	margin: 0 0 var(--sp-24); max-width: 720px;
}
.sr-board-note p { font-size: 16px; line-height: 1.75; margin: 0 0 var(--sp-12); }
.sr-board-note p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   21. 출처 — 정부지원·금융 글 맨 끝
   ⛔ 숫자가 든 글은 어디서 왔는지 밝힌다. 그게 없으면 못 믿을 글이다.
   ═══════════════════════════════════════════════════════════════ */
.sr-article__body .sr-sources { margin: 0 0 var(--sp-12); padding-left: var(--sp-20); }
.sr-article__body .sr-sources li { font-size: 16px; line-height: 1.7; margin-bottom: var(--sp-8); }
.sr-sources__note { font-size: 16px; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   22. 글 종류 배지 — 안내 / 고르기
   한 종류 안에 두 성격의 글이 있다. 독자에게 무엇을 읽게 되는지 미리 알려 준다.
   ═══════════════════════════════════════════════════════════════ */
.sr-kind {
	display: inline-flex; align-items: center;
	padding: 2px var(--sp-8); border-radius: var(--radius-full);
	font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
.sr-kind--facts { color: #0F766E; background: #CCFBF1; }
.sr-kind--goods { color: #A16207; background: #FEF3C7; }

/* ═══════════════════════════════════════════════════════════════
   23. 로고 이미지
   ⛔ 높이로 맞춘다. 폭으로 맞추면 가로형 로고가 머리글을 밀어낸다.
   ═══════════════════════════════════════════════════════════════ */
.sr-logo__img {
	height: 80px; width: auto; max-width: 320px; object-fit: contain;
	/* ⚠ 시각 보정. 잎사귀가 위로 솟고 아래 획이 길어 가운데 정렬하면
	   눈에는 조금 내려앉아 보인다. 원본 여백을 잘라낸 뒤라 보정은 작게 둔다. */
	margin-top: -2px;
}
/* 767px 이하 로고 크기는 26절 한 곳에서만 정한다. 여기 두면 뒤에서 덮어써져 헛돈다. */

/* 로고 옆 태그라인 — 좁은 화면에서는 자리를 차지하니 감춘다 */
.sr-logo__tag--beside {
	display: none; align-self: center; padding-left: var(--sp-4);
	border-left: 1px solid var(--border); margin-left: var(--sp-4);
}
@media (min-width: 1024px) {
	.sr-logo__tag--beside { display: block; font-size: 16px; padding-left: var(--sp-12); margin-left: var(--sp-8); }
}

/* ═══════════════════════════════════════════════════════════════
   24. 비교표 세로줄
   ⚠ 가로줄만 있으면 어느 값이 어느 상품 것인지 눈이 헤맨다.
      열이 넷이라 시선이 옆으로 가는데 짚어 줄 것이 없다.
   ⛔ 맨 오른쪽 열에는 줄을 긋지 않는다. 표 바깥에 선이 하나 더 생긴 것처럼 보인다.
   ⛔ 첫 열(항목 이름)은 고정 열이라 오른쪽에 조금 진한 줄로 경계를 준다.
   ═══════════════════════════════════════════════════════════════ */
.sr-table th:not(:last-child),
.sr-table td:not(:last-child) { border-right: 1px solid var(--border); }

.sr-table thead th:first-child,
.sr-table tbody th:first-child { border-right: 1px solid var(--border-strong); }

/* 머리줄의 세로줄은 상품 사이만 긋는다. 위아래로 끝까지 이어지게 둔다. */
.sr-table thead th { padding-top: var(--sp-4); }

/* ═══════════════════════════════════════════════════════════════
   25. 글 종류 오가기 — 목록 위 탭
   ⛔ 지금 보고 있는 것에는 링크를 걸지 않는다. 눌러도 제자리인 링크는 혼란만 준다.
   ═══════════════════════════════════════════════════════════════ */
.sr-kindnav {
	display: flex; gap: var(--sp-8); flex-wrap: wrap;
	margin: 0 0 var(--sp-24);
}
.sr-kindnav a, .sr-kindnav__on {
	display: inline-flex; align-items: center; min-height: 44px;
	padding: 0 var(--sp-20); border-radius: var(--radius-full);
	font-size: 16px; font-weight: 600; text-decoration: none;
}
.sr-kindnav a { color: var(--text-body); background: var(--bg-card); border: 1px solid var(--border); }
.sr-kindnav a:hover { color: var(--brand-700); border-color: var(--brand-500); text-decoration: none; }
.sr-kindnav__on { color: #fff; background: var(--brand-700); }

/* ═══════════════════════════════════════════════════════════════
   25. 모바일에서 박스를 낮춘다
   ⚠ 2026-09-13 Chris — 「모바일에서 박스 높이가 너무 크다」.
      카드 한 장이 화면의 대부분을 먹어 다음 카드가 있다는 것이 안 보였다.
      재어 보니 390px 화면에서 카드 한 장이 약 410px 이었다. 화면보다 높았다.
   ⛔ 글자를 줄이는 게 아니라 «사진과 여백»을 줄인다.
      어르신 독자라 본문 글씨는 함부로 줄이지 않는다.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	/* 카드 폭도 조금 줄여 옆 카드가 살짝 보이게 한다 — 더 있다는 신호다 */
	.sr-grid { grid-auto-columns: 72vw; }

	/* 4:3 은 세로가 길다. 가로로 눕혀 100px 가까이 덜어낸다 */
	.sr-card__media { aspect-ratio: 16 / 10; }

	.sr-card__body { padding: var(--sp-16) var(--sp-16) var(--sp-12); }
	.sr-card__title { font-size: 17px; margin-bottom: var(--sp-4); }

	/* 부제는 한 줄이면 충분하다. 제목이 이미 무슨 글인지 말한다 */
	.sr-card__sub { font-size: 15px; -webkit-line-clamp: 1; }
	.sr-card__meta { margin-top: var(--sp-8); }

	/* 한 칸짜리 목록(관련 글, 다음 단계)도 같이 낮춘다 */
	.sr-grid--4 .sr-card__media { aspect-ratio: 16 / 9; }

	/* 구획 머리도 한 뼘 줄인다 */
	.sr-shead__sub { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════
   26. 모바일 머리띠
   ⚠ 머리띠가 84px 였다. 붙어 다니는(sticky) 띠라 화면을 계속 먹는다.
   ⛔ 로고 옆 보조 문구는 좁은 화면에서 확실히 감춘다.
      display 를 두 군데에서 잡고 있어 순서가 바뀌면 다시 나온다.
   ═══════════════════════════════════════════════════════════════ */
/* ⚠ 2026-09-13 Chris — 모바일에서도 로고 옆에 보조 문구를 «보여 준다».
   앞서 감췄던 것을 되돌린다. 좁은 화면이라 글자를 줄이고 로고 폭을 조금 더 깎아
   햄버거 단추까지 한 줄에 들어가게 한다. 360px 에서도 넘치지 않는다. */
/* ⛔ max-width 를 두었더니 「오늘도, 더 편안한」 / 「하루」로 줄이 갈렸다.
   `[확인]` 2026-09-13. 한 줄에 안 들어가면 폭을 넓히는 게 아니라
   «로고를 깎아» 자리를 만든다. 보조 문구는 절대 줄바꿈하지 않는다. */
@media (max-width: 1023px) {
	.sr-logo__tag--beside {
		display: block;
		font-size: 15px; line-height: 1.35;
		padding-left: var(--sp-8); margin-left: var(--sp-8);
		white-space: nowrap;
	}
}
/* ⚠ 2026-09-26 Chris — 「로고가 너무 작다」「보조 문구도 더 크게」. 로고 38→56px, 문구 11.5→15px.
   폭 계산: 381px 화면에서 로고·문구·메뉴 단추가 쓸 수 있는 폭은 297px,
   로고 84 + 문구 154(15px) + 테두리·여백 25 = 263px. 글꼴 차이 10% 를 얹어도 들어간다. */
@media (max-width: 767px) {
	.sr-header__inner { min-height: 72px; gap: var(--sp-8); }
	.sr-logo { min-width: 0; flex-shrink: 1; }
	.sr-logo__img { height: 56px; max-width: 90px; }
	.sr-logo__tag--beside { font-size: 15px; flex-shrink: 0; }
}
/* 아주 좁은 화면에서는 로고를 한 번 더 깎는다. 360px 에서도 한 줄이다.
   360px: 쓸 수 있는 폭 276px, 로고 72 + 문구 144(14px) + 여백 17 = 233px. */
@media (max-width: 380px) {
	.sr-logo__img { height: 48px; max-width: 76px; }
	.sr-logo__tag--beside { font-size: 14px; padding-left: var(--sp-4); margin-left: var(--sp-4); }
}

/* ═══════════════════════════════════════════════════════════════
   27. 전체 글로 가는 버튼
   ⚠ 2026-09-13 Chris — 「글 본문에서 전체글로 가는 버튼이 없다」.
      한 편을 다 읽고 나면 갈 곳이 없었다. 관련 글 넷이 전부였다.
   ═══════════════════════════════════════════════════════════════ */
.sr-allmore {
	display: flex; align-items: center; justify-content: center; gap: var(--sp-8);
	margin-top: var(--sp-24);
	min-height: 56px; padding: 0 var(--sp-24);
	border: 1px solid var(--border); border-radius: var(--radius-md);
	background: var(--bg-card);
	font-size: 17px; font-weight: 600; color: var(--text-body);
}
.sr-allmore:hover {
	border-color: var(--brand-500); color: var(--brand-700);
	background: var(--brand-100); text-decoration: none;
}
.sr-allmore .sr-ico { width: 20px; height: 20px; }
@media (max-width: 767px) { .sr-allmore { min-height: 52px; font-size: 16px; } }

/* ═══════════════════════════════════════════════════════════════
      ⚠ 첫 화면에서 가장 큰 자리인데 붙박이 사진 한 장이라 아무 데로도 이어지지 않았다.
   ⛔ 자바스크립트 없이도 «옆으로 밀어» 볼 수 있어야 한다.
      그래서 숨겼다 보였다 하지 않고 가로 스크롤 + 스냅으로 짠다.
   ⛔ 화살표와 점은 기본이 hidden 이다. 스크립트가 살아 있을 때만 켜 준다.
      동작하지 않는 버튼을 두면 신뢰를 깎는다.
   ═══════════════════════════════════════════════════════════════ */
.sr-carousel { position: relative; width: 100%; height: 100%; }

.sr-carousel__track {
	display: flex; height: 100%;
	overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.sr-carousel__track::-webkit-scrollbar { display: none; }
.sr-carousel__track:focus-visible { outline: 3px solid var(--brand-500); outline-offset: -3px; }

.sr-carousel__slide {
	position: relative; flex: 0 0 100%; scroll-snap-align: start;
	display: block; color: inherit; text-decoration: none;
}
.sr-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-carousel__slide:hover { text-decoration: none; }

/* 글자가 사진 위에 올라가므로 아래쪽을 어둡게 깐다. 사진마다 밝기가 달라서다. */
.sr-carousel__cap {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; flex-direction: column; gap: var(--sp-4);
	padding: var(--sp-32) var(--sp-20) var(--sp-16);
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
	color: #fff;
}
.sr-carousel__cap strong {
	font-size: 20px; font-weight: 700; line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-carousel__kind {
	align-self: flex-start; font-style: normal;
	font-size: 13px; font-weight: 700; line-height: 1.5;
	padding: var(--sp-4) var(--sp-8); border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, .92); color: var(--text-strong);
}

.sr-carousel__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	border: 0; cursor: pointer;
	background: rgba(255, 255, 255, .92); color: var(--text-strong);
	box-shadow: var(--shadow-card);
	display: flex; align-items: center; justify-content: center;
}
.sr-carousel__nav:hover { background: #fff; }
.sr-carousel__nav .sr-ico { width: 22px; height: 22px; }
.sr-carousel__nav--prev { left: var(--sp-12); }
.sr-carousel__nav--prev .sr-ico { transform: scaleX(-1); }
.sr-carousel__nav--next { right: var(--sp-12); }

/* 손가락으로 미는 화면에서는 화살표가 자리만 먹는다 */
@media (max-width: 767px) { .sr-carousel__nav { display: none; } }

.sr-carousel__dots {
	position: absolute; left: 0; right: 0; bottom: var(--sp-8);
	display: flex; justify-content: center; gap: var(--sp-8);
}
.sr-carousel__dots button {
	/* 터치 타겟은 24px 을 채우고, 보이는 점만 작게 둔다 */
	width: 24px; height: 24px; padding: 0; border: 0; cursor: pointer;
	background: none; display: flex; align-items: center; justify-content: center;
}
.sr-carousel__dots button::before {
	content: ''; width: 9px; height: 9px; border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
	transition: background .18s ease, width .18s ease;
}
.sr-carousel__dots button[aria-current="true"]::before { background: #fff; width: 22px; border-radius: 5px; }

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

/* 캐러셀과 손글씨 메모가 겹치지 않게 — 메모는 클릭을 가로채지 않는다 */
.sr-hero__note { pointer-events: none; }

/* 점이 제목 위에 올라앉지 않게 아래 여백을 더 준다 */
.sr-carousel__cap { padding-bottom: var(--sp-40); }
@media (max-width: 767px) { .sr-carousel__cap strong { font-size: 18px; } }

/* ═══════════════════════════════════════════════════════════════
   29. 주제로 좁히는 줄 · 상품의 주제 표시
   ⚠ 2026-09-13 Chris — 「고르기와 안내 두 가지만 보인다.
      금융/절약·건강관리·정부지원 같은 실제 카테고리로도 나뉘어야 한다」.
   ⭐ 종류(안내·고르기)와 주제는 «다른 축»이다. 종류 줄 아래에 주제 줄을 둔다.
      같은 모양으로 두면 어느 것이 무엇인지 헷갈리니 주제 줄은 더 작고 가볍게 한다.
   ═══════════════════════════════════════════════════════════════ */
.sr-topicnav {
	display: flex; flex-wrap: wrap; gap: var(--sp-8);
	margin: var(--sp-12) 0 var(--sp-24);
}
.sr-topicnav a {
	display: inline-flex; align-items: center; gap: var(--sp-4);
	min-height: 40px; padding: 0 var(--sp-16);
	border: 1px solid var(--border); border-radius: 999px;
	background: var(--bg-card);
	font-size: 15px; font-weight: 600; color: var(--text-body);
	text-decoration: none;
}
.sr-topicnav a:hover {
	border-color: var(--brand-500); color: var(--brand-700);
	background: var(--brand-100); text-decoration: none;
}
.sr-topicnav b { font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sr-topicnav a:hover b { color: var(--brand-700); }

/* 상품 카드의 주제 — 글 카드의 배지와 같은 뜻이지만 사진 위가 아니라 이름 위에 둔다.
   상품 사진은 공식 이미지라 그 위에 무엇을 얹지 않는다. */
.sr-product__cat {
	display: inline-block; margin: var(--sp-8) 0 var(--sp-4);
	font-size: 13px; font-weight: 600; line-height: 1.5;
	color: var(--text-muted); text-decoration: none;
}
.sr-product__cat:hover { color: var(--brand-700); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   30. 나눔글 게시판
   ⚠ 2026-09-13 Chris — 관리자만 쓰는 «공유용» 게시판.
      사진이 위, 글이 아래다. 인스타그램 캐러셀과 같은 모양이다.
   ⛔ 본진(생활글)과 화면부터 다르게 둔다. 섞이면 안 된다.
   ═══════════════════════════════════════════════════════════════ */
.sr-board {
	max-width: 680px; margin: var(--sp-24) auto var(--sp-40);
	background: var(--bg-card); border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--sp-24);
}
@media (max-width: 767px) { .sr-board { padding: var(--sp-16); margin-top: var(--sp-12); } }

/* 사진 자리 — 정사각에 가깝게. 인스타그램에서 보던 비율이다. */
.sr-board__media {
	position: relative; margin: var(--sp-12) calc(var(--sp-24) * -1) var(--sp-20);
	aspect-ratio: 4 / 5; max-height: 640px; overflow: hidden;
	background: var(--border);
}
@media (max-width: 767px) {
	.sr-board__media { margin-left: calc(var(--sp-16) * -1); margin-right: calc(var(--sp-16) * -1); }
}
.sr-board__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sr-board__title { font-size: 24px; font-weight: 700; line-height: 1.4; margin: 0 0 var(--sp-8); }
.sr-board__meta { font-size: 14px; color: var(--text-muted); margin: 0 0 var(--sp-20); }
.sr-board__body { font-size: 17px; line-height: 1.75; color: var(--text-body); }
.sr-board__body p { margin: 0 0 var(--sp-16); }
.sr-board__body p:last-child { margin-bottom: 0; }

.sr-board__share {
	margin-top: var(--sp-32); padding-top: var(--sp-20);
	border-top: 1px solid var(--border);
}
.sr-board__sharelabel { font-size: 16px; font-weight: 600; margin: 0 0 var(--sp-12); }
.sr-board__sharerow { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.sr-cta--ghost {
	background: var(--bg-card); color: var(--text-body);
	border: 1px solid var(--border);
}
.sr-cta--ghost:hover { border-color: var(--brand-500); color: var(--brand-700); background: var(--brand-100); }
.sr-board__sharedone { display: block; margin-top: var(--sp-8); font-size: 15px; color: var(--brand-700); }
.sr-board__from { margin: var(--sp-12) 0 0; font-size: 14px; color: var(--text-muted); }

/* 목록 */
.sr-bgrid { display: grid; gap: var(--sp-16); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .sr-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .sr-bgrid { grid-template-columns: 1fr; } }

.sr-bcard {
	display: block; background: var(--bg-card); border-radius: var(--radius-md);
	overflow: hidden; box-shadow: var(--shadow-card); color: inherit;
}
.sr-bcard:hover { box-shadow: var(--shadow-hover); text-decoration: none; }
.sr-bcard__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--border); }
.sr-bcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-bcard__count {
	position: absolute; right: var(--sp-8); top: var(--sp-8);
	padding: var(--sp-4) var(--sp-8); border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; font-weight: 600;
}
.sr-bcard__body { display: block; padding: var(--sp-16); }
.sr-bcard__title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--text-strong);
}
.sr-bcard__meta { display: block; margin-top: var(--sp-8); font-size: 14px; color: var(--text-muted); }

.sr-board__admin { margin-top: var(--sp-32); text-align: center; }
.sr-board__admin a { font-size: 15px; color: var(--text-muted); }

/* 바닥글의 관리자 로그인 — 저작권 줄에 조용히 붙인다 */
.sr-adminlink { margin-left: var(--sp-12); color: var(--text-muted); font-size: 14px; }

/* ── 간단 댓글 ────────────────────────────────────────────── */
.sr-comments { margin-top: var(--sp-32); padding-top: var(--sp-20); border-top: 1px solid var(--border); }
.sr-comments__title { font-size: 18px; font-weight: 700; margin: 0 0 var(--sp-16); }
.sr-comments__list { list-style: none; margin: 0 0 var(--sp-24); padding: 0; display: grid; gap: var(--sp-16); }
.sr-comment { padding: var(--sp-12) 0; border-bottom: 1px solid var(--border); }
.sr-comment:last-child { border-bottom: 0; }
.sr-comment__head { display: flex; gap: var(--sp-8); align-items: baseline; margin: 0 0 var(--sp-4); }
.sr-comment__head strong { font-size: 15px; color: var(--text-strong); }
.sr-comment__head time { font-size: 13px; color: var(--text-muted); }
.sr-comment__body { font-size: 16px; line-height: 1.7; color: var(--text-body); }
.sr-comment__body p { margin: 0; }
.sr-comment__wait { color: var(--text-muted); font-size: 15px; }

.sr-cform__row { margin: 0 0 var(--sp-12); }
.sr-cform textarea, .sr-cform input[type="text"] {
	width: 100%; padding: var(--sp-12); font: inherit; font-size: 16px;
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--bg-card); color: var(--text-strong);
}
.sr-cform textarea:focus, .sr-cform input[type="text"]:focus {
	outline: 2px solid var(--brand-500); outline-offset: -2px; border-color: var(--brand-500);
}
.sr-cform .form-submit { margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   31. 나눔글 쓰기 — /share/write/
   ⚠ 2026-09-13 Chris — 관리화면에 들어가지 않고 사이트에서 바로 올린다.
   ⭐ 칸을 적게 둔다. 제목·사진·글. 여기서 할 일이 늘면 만든 뜻이 없다.
   ═══════════════════════════════════════════════════════════════ */
.sr-write { max-width: 720px; margin: var(--sp-24) auto var(--sp-40); }
.sr-write__title { font-size: 26px; font-weight: 700; margin: var(--sp-12) 0 var(--sp-20); }

.sr-write__saved {
	margin: 0 0 var(--sp-20); padding: var(--sp-12) var(--sp-16);
	border-radius: var(--radius-sm);
	background: var(--brand-100); color: var(--brand-900); font-weight: 600;
}

.sr-write__form {
	background: var(--bg-card); border-radius: var(--radius-md);
	box-shadow: var(--shadow-card); padding: var(--sp-24);
}
@media (max-width: 767px) { .sr-write__form { padding: var(--sp-16); } }

.sr-write__row { margin: 0 0 var(--sp-24); }
.sr-write__row label {
	display: block; margin-bottom: var(--sp-8);
	font-size: 16px; font-weight: 600; color: var(--text-strong);
}
.sr-write__hint { margin: 0 0 var(--sp-8); font-size: 16px; line-height: 1.6; color: var(--text-muted); }

.sr-write__form input[type="text"],
.sr-write__form textarea {
	width: 100%; padding: var(--sp-12); font: inherit; font-size: 17px;
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--bg-card); color: var(--text-strong);
}
.sr-write__form textarea { line-height: 1.7; resize: vertical; }
.sr-write__form input[type="text"]:focus,
.sr-write__form textarea:focus {
	outline: 2px solid var(--brand-500); outline-offset: -2px; border-color: var(--brand-500);
}
/* 파일 고르기 단추는 브라우저 것을 그대로 쓰되 누르기 쉽게만 한다 */
.sr-write__form input[type="file"] { font: inherit; font-size: 16px; padding: var(--sp-8) 0; }

.sr-write__thumbs {
	list-style: none; margin: var(--sp-8) 0 0; padding: 0;
	display: grid; gap: var(--sp-12); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.sr-write__thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.sr-write__thumbs label { display: block; cursor: pointer; font-weight: 400; margin: 0; }
.sr-write__thumbs span {
	display: flex; align-items: center; gap: var(--sp-4);
	margin-top: var(--sp-4); font-size: 14px; color: var(--text-muted);
}

.sr-write__actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12);
	padding-top: var(--sp-8);
}
.sr-write__actions .sr-cta { border: 0; cursor: pointer; font: inherit; font-size: 17px; font-weight: 600; }
.sr-write__actions .sr-cta--ghost { border: 1px solid var(--border); }
.sr-write__view { font-size: 15px; color: var(--text-muted); }

.sr-write__recent { margin-top: var(--sp-32); }
.sr-write__recent h2 { font-size: 18px; font-weight: 700; margin: 0 0 var(--sp-12); }
.sr-write__recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.sr-write__recent li {
	display: flex; justify-content: space-between; gap: var(--sp-12);
	padding: var(--sp-12) 0; border-bottom: 1px solid var(--border);
}
.sr-write__recent li span { font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.sr-write__go { margin: 0 0 var(--sp-24); }
.sr-board__edit { margin: 0 0 var(--sp-8); font-size: 14px; }
.sr-board__edit a { color: var(--text-muted); }
.sr-write__busy {
	margin: var(--sp-12) 0 0; padding: var(--sp-12) var(--sp-16);
	border-radius: var(--radius-sm); background: var(--brand-100);
	color: var(--brand-900); font-weight: 600;
}
.sr-comments__notice {
	margin: 0 0 var(--sp-16); padding: var(--sp-12) var(--sp-16);
	border-radius: var(--radius-sm); background: var(--brand-100);
	color: var(--brand-900); font-size: 16px; line-height: 1.6;
}
.sr-board__pending {
	margin: 0 0 var(--sp-20); padding: var(--sp-12) var(--sp-16);
	border-radius: var(--radius-sm); border: 1px solid var(--border);
	background: var(--bg-card); font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════
   30. 히어로 슬라이드 — 문구와 사진이 함께 넘어간다 (2026-09-14)
   ⭐ 한 장 = 왼쪽 문구 + 오른쪽 사진. 트랙이 히어로 전체를 민다.
   ⭐ 넘김 단추는 사진 위가 아니라 문구 칸 아래에 둔다. 크림색 바탕이라 진한 색으로 보인다.
   ═══════════════════════════════════════════════════════════════ */
.sr-hero--slides { display: block; }
.sr-hero--slides .sr-carousel__track { height: auto; }

.sr-hero__slide {
	display: grid; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 768px) {
	.sr-hero__slide { grid-template-columns: 1fr 1fr; }
	.sr-hero--slides[data-sr-carousel] .sr-hero__text { padding-bottom: calc(var(--sp-40) + 44px + var(--sp-16)); }
}

.sr-hero__controls {
	display: flex; align-items: center; justify-content: center; gap: var(--sp-8);
	padding: var(--sp-8) var(--sp-24) var(--sp-12);
}
@media (min-width: 768px) {
	.sr-hero__controls {
		position: absolute; left: var(--sp-40); bottom: var(--sp-32);
		justify-content: flex-start; padding: 0;
	}
}

.sr-hero__controls .sr-carousel__nav {
	position: static; transform: none;
	background: var(--bg-card); color: var(--text-strong);
	border: 1px solid var(--border-strong); box-shadow: none;
}
.sr-hero__controls .sr-carousel__nav:hover { border-color: var(--brand-700); color: var(--brand-700); }
.sr-hero__controls .sr-carousel__nav:focus-visible,
.sr-hero__controls .sr-carousel__dots button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.sr-hero__controls .sr-carousel__dots { position: static; }
/* 터치 타겟 44px — 시니어 기준. 보이는 점만 작다. */
.sr-hero__controls .sr-carousel__dots button { width: 44px; height: 44px; }
.sr-hero__controls .sr-carousel__dots button::before { background: var(--text-muted); box-shadow: none; }
.sr-hero__controls .sr-carousel__dots button[aria-current="true"]::before { background: var(--brand-700); }

/* ═══════════════════════════════════════════════════════════════
   31. 비교표 — «가격 보러 가기» 버튼 줄을 맞춘다 (2026-09-14)
   상품 이름이 2줄·3줄로 달라 버튼 높이가 칸마다 달랐다.
   ⭐ 머리 칸을 같은 높이로 늘리고 버튼을 칸 맨 아래에 붙인다.
      표 칸에 height:1px 을 주면 안쪽의 height:100% 가 행 높이를 따른다.
   ⭐ 이름 자리는 3줄을 잡아 둔다. 늘이기가 안 먹는 브라우저에서도 대부분 맞는다.
   ═══════════════════════════════════════════════════════════════ */
.sr-table thead th { height: 1px; }
.sr-table thead .sr-tcell { height: 100%; }
.sr-tcell__name { min-height: calc(1.45em * 3); }
.sr-tcell .sr-cta { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════
   32. 2026-09-19 — 상품 자리 · 공유 · 한마디
   ═══════════════════════════════════════════════════════════════ */

/* 돌려 보여 주는 후보. .sr-product 가 display:flex 라 hidden 속성만으로는 안 숨는다. */
[data-rot][hidden] { display: none !important; }

/* 함께 보면 좋은 상품 — 색 박스(.sr-strip)를 쓴다. 목업 밖 새 시안을 만들지 않는다.
   홈 추천 상품 줄(.sr-picks)은 2026-09-26 부터 글 줄과 같은 모양이다. */
.sr-rail { display: block; }
.sr-rail .sr-shead { margin-bottom: var(--sp-20); }
/* ⛔ 홈 .sr-picks 는 색 박스가 없어 고지가 페이지 배경(#F5F5F2) 위에 놓인다. text-muted 면 4.43:1 로
   4.5:1 에 못 미친다 `[확인]` 2026-09-26. 본문색으로 올린다. */
.sr-rail .sr-shead__sub, .sr-picks .sr-shead__sub { color: var(--text-body); }
/* ⛔ .sr-shead__sub 는 모바일에서 15px 다. 수수료 고지가 들어 있으므로 부가정보 하한 16px 을 지킨다(규칙 2). */
.sr-rail .sr-shead__sub, .sr-picks .sr-shead__sub, .sr-strip__note { font-size: 16px; }
.sr-strip__note { color: var(--text-muted); margin: var(--sp-8) 0 0; }

/* 나눔글은 폭이 680px 이라 4칸이면 버튼 글자가 넘친다. 2칸 × 2줄. */
.sr-board .sr-rail { margin: var(--sp-32) 0 0; padding: var(--sp-20); }
.sr-board .sr-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); }
.sr-board .sr-shead { flex-wrap: wrap; }

/* 공유 — 나눔글 안에서는 사진 바로 아래 · 글 아래 두 번 나온다 */
.sr-board .sr-share { margin: var(--sp-16) 0 var(--sp-24); }
.sr-board .sr-rail + .sr-share { margin-top: var(--sp-24); }
.sr-share__label { font-size: 18px; }
.sr-share__from { flex-basis: 100%; margin: 0; font-size: 16px; color: var(--text-muted); }
.sr-sharebtn__ico--more { background: var(--brand-700); color: #fff; padding: 6px; }

/* 모바일 — 카카오톡이 가장 많이 쓰이므로 한 줄을 통째로 준다. 나머지 둘은 반씩. */
@media (max-width: 767px) {
	.sr-share__row { display: grid; grid-template-columns: 1fr 1fr; }
	.sr-sharebtn--kakao { grid-column: 1 / -1; }
}

/* 공유로 들어온 사람에게만 보이는 첫 인사 (S84) */
.sr-welcome {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-16);
	margin: var(--sp-16) 0; padding: var(--sp-16) var(--sp-20);
	background: var(--brand-100); border-radius: var(--radius-md);
}
.sr-welcome p { flex: 1; min-width: 220px; margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.sr-welcome strong { display: block; font-size: 18px; color: var(--text-strong); }
.sr-welcome__go {
	display: inline-flex; align-items: center; gap: var(--sp-4);
	min-height: 44px; padding: 0 var(--sp-16);
	border-radius: var(--radius-sm); background: var(--bg-card);
	border: 1px solid var(--border-strong);
	font-size: 16px; font-weight: 600; color: var(--brand-700);
}
.sr-welcome__go:hover { border-color: var(--brand-700); text-decoration: none; }
.sr-welcome__go .sr-ico { width: 18px; height: 18px; }
.sr-board .sr-welcome { margin-top: 0; }

/* 한마디 — 닉네임 · 한 줄 · 확인 숫자 */
.sr-cform__label { display: block; margin: 0 0 var(--sp-4); font-size: 16px; font-weight: 600; color: var(--text-strong); }
.sr-cform__label span { font-weight: 400; color: var(--text-muted); }
.sr-cform input[type="text"] { min-height: 48px; font-size: 18px; }
.sr-code {
	display: inline-block; padding: 0 var(--sp-8);
	font-size: 22px; letter-spacing: .2em; line-height: 1.5;
	background: var(--bg-page); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	color: var(--text-strong);
}
.sr-cform__code input[type="text"] { max-width: 180px; letter-spacing: .2em; }
.sr-cform__err { display: block; margin-top: var(--sp-8); font-size: 16px; font-weight: 600; color: #B91C1C; }
/* 사람 눈에는 안 보이는 칸 — display:none 이면 일부 로봇이 건너뛴다. 화면 밖으로 뺀다. */
.sr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   33. 나눔글 목록 카드 — 제목 옆 공유 단추 (2026-09-19 Chris)
   ⛔ 카드 전체가 링크였다. 링크 안에 단추를 넣을 수 없어 사진·제목만 링크로 바꿨다.
   ═══════════════════════════════════════════════════════════════ */
.sr-bcard__body { display: flex; align-items: flex-start; gap: var(--sp-12); }
.sr-bcard__text { flex: 1; min-width: 0; display: block; color: inherit; }
.sr-bcard__text:hover { text-decoration: none; }
.sr-bcard__text:hover .sr-bcard__title { color: var(--brand-700); }
.sr-bcard__share { display: flex; gap: var(--sp-4); flex: 0 0 auto; }

/* 로고만 있는 단추. 터치 타겟 44×44 — 시니어 기준. 글자 이름은 화면 낭독기로만 읽힌다. */
.sr-iconshare {
	width: 44px; height: 44px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.sr-iconshare .sr-sharebtn__ico { width: 36px; height: 36px; flex-basis: 36px; }
.sr-iconshare:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sr-bcard__done { display: block; padding: 0 var(--sp-16) var(--sp-12); font-size: 16px; color: var(--brand-900); }

/* 공유 단추가 둘이 되었다 — 모바일에서도 반씩 나란히. 카카오톡 한 줄 통째 규칙을 푼다. */
@media (max-width: 767px) {
	.sr-sharebtn--kakao { grid-column: auto; }
}

/* 한마디 — 「남기기」를 확인 숫자 칸 오른쪽에 (2026-09-19 Chris) */
.sr-cform__coderow { display: flex; align-items: stretch; gap: var(--sp-8); }
.sr-cform__coderow input[type="text"] { flex: 0 1 180px; min-width: 0; }
.sr-cform__coderow .sr-cta { flex: 0 0 auto; min-height: 48px; margin: 0; }
.sr-board .sr-comments + .sr-rail { margin-top: var(--sp-32); }

/* 글 머리 — 발행일 오른쪽 공유 단추 (2026-09-19 Chris). 로고 단추는 나눔글 목록 카드와 같다(.sr-iconshare). */
.sr-ahead__share { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-left: auto; }
.sr-ahead__done { flex-basis: 100%; font-size: 16px; color: var(--brand-900); text-align: right; }

/* 나눔글 한마디 — 닉네임 칸은 짧게. 별명 몇 글자면 된다 (2026-09-19 Chris) */
.sr-cform #author { max-width: 240px; }

/* 한마디 목록 — 닉네임 · 날짜 · 한마디를 한 줄에 (2026-09-19 Chris) */
.sr-comment {
	display: grid; grid-template-columns: auto auto minmax(0, 1fr);
	column-gap: var(--sp-12); align-items: baseline;
}
.sr-comment__who { font-size: 16px; color: var(--text-strong); white-space: nowrap; }
.sr-comment__when { font-size: 16px; color: var(--text-muted); white-space: nowrap; }
.sr-comment__body { font-size: 16px; line-height: 1.6; color: var(--text-body); overflow-wrap: anywhere; }
.sr-comment__body p { margin: 0; }

/* 한마디 — Turnstile 칸과 「남기기」. 위젯이 300px 이라 좁은 화면에서는 단추가 아래로 내려간다. */
.sr-cform__code .sr-cform__coderow { flex-wrap: wrap; align-items: center; }
.sr-cform .cf-turnstile { min-height: 65px; }

/* ═══════════════════════════════════════════════════════════════
   34. 한마디 가독성 (2026-09-20 Chris — 「가독성이 안 좋다」)
   ⚠ 닉네임 길이가 달라 날짜·내용이 줄마다 다른 자리에서 시작했다.
     구분선도 첫 줄에만 있었고, 목록과 쓰는 칸이 한 덩어리로 붙어 있었다.
   ⭐ 닉네임·날짜 칸 폭을 고정해 세로줄을 맞춘다. 모든 줄에 같은 선. 쓰는 칸은 옅은 바탕 상자.
   ═══════════════════════════════════════════════════════════════ */
.sr-comments__title { margin-bottom: var(--sp-12); }
.sr-comments__list {
	display: block; gap: 0; margin: 0 0 var(--sp-24);
	border-top: 1px solid var(--border);
}
.sr-comment {
	grid-template-columns: 8em 7em minmax(0, 1fr);
	column-gap: var(--sp-16);
	padding: var(--sp-12) var(--sp-4);
	border-bottom: 1px solid var(--border);
}
.sr-comment:last-child { border-bottom: 1px solid var(--border); }
.sr-comment__who { overflow: hidden; text-overflow: ellipsis; }
.sr-comment__body { font-size: 17px; color: var(--text-strong); }

/* 휴대폰 — 닉네임·날짜 한 줄, 그 아래 한마디 */
@media (max-width: 560px) {
	.sr-comment { grid-template-columns: minmax(0, auto) auto; justify-content: start; row-gap: var(--sp-4); }
	.sr-comment__body { grid-column: 1 / -1; }
}

/* 쓰는 칸 — 목록과 구분되는 상자 */
.sr-cform {
	background: var(--bg-page); border-radius: var(--radius-md);
	padding: var(--sp-20);
}
@media (max-width: 767px) { .sr-cform { padding: var(--sp-16); } }
.sr-cform input[type="text"] { background: var(--bg-card); }
.sr-cform__row:last-of-type { margin-bottom: 0; }