/* =========================================================
   판매 랜딩페이지 (Sell Landing) — 앞단 스타일

   테마에 기대지 않는 자기완결 스타일입니다.
   변수는 모두 --slp- 로 시작하므로 테마 변수와 부딪히지 않습니다.

   01 색 · 형태
   02 숏코드 구성요소 (일반 글에서도 씁니다)
   03 랜딩페이지 — 테마 골격 비우기
   04 랜딩페이지 — 첫 화면
   05 랜딩페이지 — 구매 버튼
   06 랜딩페이지 — 본문
   07 랜딩페이지 — 중간 버튼 띠 · 마무리 상자
   08 랜딩페이지 — 하단 고정바
   09 좁은 화면
   ========================================================= */

/* ---------------------------------------------------------
   01. 색 · 형태
   --------------------------------------------------------- */

:root {
	--slp-bg:          #ffffff;
	--slp-surface:     #ffffff;
	--slp-surface-alt: #f5f7fa;

	--slp-ink:         #12161c;
	--slp-body:        #414b58;
	--slp-muted:       #78838f;

	--slp-line:        #e5e9ef;
	--slp-line-strong: #cfd6e0;

	--slp-accent:      #1b5cd7;

	/* 구매 버튼 — 아래 body 클래스로 바뀝니다. */
	--slp-cta:         #ef5b25;
	--slp-cta-deep:    #d64a17;
	--slp-cta-ink:     #ffffff;

	--slp-good:        #17795e;
	--slp-good-bg:     #eefaf5;
	--slp-warn:        #b4530f;
	--slp-warn-bg:     #fff5eb;

	--slp-radius-sm:   6px;
	--slp-radius:      10px;
	--slp-radius-lg:   16px;

	--slp-shadow-sm:   0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
	--slp-shadow-md:   0 14px 28px -14px rgba(16, 24, 40, .3);

	--slp-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
		"Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;

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

/* 설정 화면에서 고른 버튼 색 */
body.slp-cta-orange { --slp-cta: #ef5b25; --slp-cta-deep: #d64a17; }
body.slp-cta-red    { --slp-cta: #e0342f; --slp-cta-deep: #bd2521; }
body.slp-cta-blue   { --slp-cta: #1b5cd7; --slp-cta-deep: #1348ab; }
body.slp-cta-green  { --slp-cta: #10893e; --slp-cta-deep: #0b6d31; }
body.slp-cta-ink    { --slp-cta: #1c222b; --slp-cta-deep: #0d1116; }

/* ---------------------------------------------------------
   02. 숏코드 구성요소 — 일반 글에서도 그대로 쓰입니다.
   --------------------------------------------------------- */

/* 버튼 [cta] */
.sell-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .9rem 1.5rem;
	font-family: var(--slp-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--slp-cta-ink);
	background: var(--slp-cta);
	border: 1px solid var(--slp-cta);
	border-radius: var(--slp-radius);
	box-shadow: var(--slp-shadow-sm);
	transition: transform .18s var(--slp-ease), filter .18s var(--slp-ease), box-shadow .18s var(--slp-ease);
}

.sell-btn:hover,
.sell-btn:focus-visible {
	color: var(--slp-cta-ink);
	filter: brightness(1.08);
	box-shadow: var(--slp-shadow-md);
	transform: translateY(-1px);
}

.sell-btn-block {
	display: flex;
	width: 100%;
	margin: 1.5rem 0;
}

.sell-btn-outline {
	color: var(--slp-ink);
	background: var(--slp-surface);
	border-color: var(--slp-line-strong);
	box-shadow: none;
}

.sell-btn-outline:hover {
	color: var(--slp-ink);
	background: var(--slp-surface-alt);
	border-color: var(--slp-muted);
}

/* 신뢰 배지 [badges] */
.sell-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.2rem 0;
	padding: 0;
	list-style: none;
}

.sell-badges li {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: .42rem .8rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--slp-ink);
	background: var(--slp-surface-alt);
	border: 1px solid var(--slp-line);
	border-radius: 999px;
}

.sell-badges li::before {
	content: "✓";
	font-weight: 800;
	color: var(--slp-good);
}

/* 핵심 수치 [stats] */
.sell-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 1px;
	margin: 1.8rem 0;
	background: var(--slp-line);
	border: 1px solid var(--slp-line);
	border-radius: var(--slp-radius);
	overflow: hidden;
}

.sell-stats > * {
	padding: 1rem .8rem;
	text-align: center;
	background: var(--slp-surface);
}

.sell-stats strong {
	display: block;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--slp-ink);
}

.sell-stats small {
	display: block;
	margin-top: .2rem;
	font-size: .78rem;
	color: var(--slp-muted);
}

/* 별점 [rating] */
.sell-rating {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .92rem;
	color: var(--slp-muted);
}

.sell-rating .stars {
	position: relative;
	display: inline-block;
	font-size: 1rem;
	letter-spacing: .08em;
	color: var(--slp-line-strong);
}

.sell-rating .stars span {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #f5a524;
}

.sell-rating b {
	font-weight: 800;
	color: var(--slp-ink);
}

/* 문답 상자 [faq] · 본문 "Q." 자동 변환 */
.sell-faq {
	margin: 0;
	border: 1px solid var(--slp-line);
	border-radius: var(--slp-radius);
	overflow: hidden;
}

.sell-faq + .sell-faq {
	margin-top: -1px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.sell-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	padding: .95rem 1.2rem;
	font-weight: 700;
	color: var(--slp-ink);
	background: var(--slp-surface-alt);
	cursor: pointer;
	list-style: none;
}

.sell-faq summary::-webkit-details-marker {
	display: none;
}

.sell-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--slp-muted);
	transition: transform .2s var(--slp-ease);
}

.sell-faq[open] summary::after {
	transform: rotate(45deg);
}

.sell-faq .sell-faq-a {
	padding: 1rem 1.2rem;
	font-size: .97rem;
	background: var(--slp-surface);
}

.sell-faq .sell-faq-a > *:last-child {
	margin-bottom: 0;
}

/* 안내 상자 [box] */
.sell-box {
	margin: 1.6rem 0;
	padding: 1.1rem 1.3rem;
	background: var(--slp-surface-alt);
	border: 1px solid var(--slp-line);
	border-left: 3px solid var(--slp-line-strong);
	border-radius: var(--slp-radius-sm);
	font-size: .97rem;
}

.sell-box-tip  { border-left-color: var(--slp-accent); }
.sell-box-warn { border-left-color: var(--slp-warn); background: var(--slp-warn-bg); }

.sell-box > *:last-child { margin-bottom: 0; }

.sell-box > strong:first-child {
	display: block;
	margin-bottom: .4rem;
	color: var(--slp-ink);
}

.sell-box-warn > strong:first-child { color: var(--slp-warn); }

/* 표 감싸기 — 좁은 화면에서 옆으로 밀어 봅니다. */
.sell-tw {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------
   03. 랜딩페이지 — 테마 골격 비우기

   테마마다 감싸는 상자 이름이 달라서 흔한 것들을 함께 적었습니다.
   쓰는 테마가 목록에 없어 여백이 남으면, 그 테마의 본문 감싸개 클래스를
   아래 목록에 한 줄 추가하면 됩니다.
   --------------------------------------------------------- */

/* ▼ "직접 지정" 폭일 때만 테마 상자를 비웁니다.
   설정에서 "테마 폭 그대로" 를 고르면 이 규칙이 통째로 빠지고,
   테마가 정한 폭·여백을 그대로 씁니다. */

body.sell-lp-page.lp-width-fixed #page,
body.sell-lp-page.lp-width-fixed #content,
body.sell-lp-page.lp-width-fixed #primary,
body.sell-lp-page.lp-width-fixed #main,
body.sell-lp-page.lp-width-fixed .site-content,
body.sell-lp-page.lp-width-fixed .content-area,
body.sell-lp-page.lp-width-fixed .site-main,
body.sell-lp-page.lp-width-fixed .entry-content,
body.sell-lp-page.lp-width-fixed .ast-container,
body.sell-lp-page.lp-width-fixed .entry-content-wrap,
body.sell-lp-page.lp-width-fixed .content-container,
body.sell-lp-page.lp-width-fixed .wp-site-blocks {
	max-width: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	display: block;
	float: none;
}

/* 위아래 여백은 0 으로 두고, 대신 .sell-lp 가 자기 여백을 가집니다
   (테마 여백을 그대로 두면 테마마다 간격이 제각각이 됩니다). */
body.sell-lp-page.lp-width-fixed .site-content,
body.sell-lp-page.lp-width-fixed #content {
	padding-top: 0;
	padding-bottom: 0;
}

/* 사이드바 · 테마가 그리는 제목줄은 이 화면에서 쓰지 않습니다. */
body.sell-lp-page .widget-area,
body.sell-lp-page #secondary,
body.sell-lp-page .sidebar,
body.sell-lp-page .entry-header,
body.sell-lp-page .entry-meta,
body.sell-lp-page .page-header,
body.sell-lp-page .post-navigation,
body.sell-lp-page .comments-area,
body.sell-lp-page .entry-footer {
	display: none;
}

/* 테마 본문 상자의 테두리 · 배경 제거 (카드형 테마 대응) */
body.sell-lp-page.lp-width-fixed .inside-article,
body.sell-lp-page.lp-width-fixed .inside-page,
body.sell-lp-page.lp-width-fixed article.post,
body.sell-lp-page.lp-width-fixed article.page {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* 머리말 · 꼬리말 표시 방식 */
body.lp-chrome-slim .main-navigation,
body.lp-chrome-slim .site-description,
body.lp-chrome-slim .footer-widgets,
body.lp-chrome-slim #footer-widgets,
body.lp-chrome-slim .main-header-bar-navigation,
body.lp-chrome-slim .site-footer .footer-widget-area,
body.lp-chrome-slim nav.navigation,
body.lp-chrome-slim .wp-block-navigation {
	display: none;
}

body.lp-chrome-none .site-header,
body.lp-chrome-none .site-footer,
body.lp-chrome-none .main-navigation,
body.lp-chrome-none #masthead,
body.lp-chrome-none #colophon,
body.lp-chrome-none header.wp-block-template-part,
body.lp-chrome-none footer.wp-block-template-part {
	display: none;
}

/* ---------------------------------------------------------
   04. 랜딩페이지 — 지면 · 첫 화면
   --------------------------------------------------------- */

.sell-lp {
	--lp-w:   var(--slp-w, 1160px);
	--lp-pad: clamp(1.15rem, 4vw, 2rem);
	--lp-gap: clamp(2rem, 5vw, 3.25rem);

	max-width: var(--lp-w);
	margin: 0 auto;
	padding: 0 var(--lp-pad) var(--lp-gap);
	font-family: var(--slp-font);
	font-size: 17px;
	line-height: 1.75;
	color: var(--slp-body);
	background: var(--slp-bg);
	text-align: left;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.sell-lp *,
.sell-lp *::before,
.sell-lp *::after {
	box-sizing: border-box;
}

/* 직접 지정 폭 — 테마 여백을 비웠으므로 위아래 간격을 여기서 만듭니다.
   (이게 없으면 지면이 헤더에 딱 붙습니다.) */
body.lp-width-fixed .sell-lp {
	margin-top: clamp(1rem, 2.5vw, 2rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--slp-radius-lg);
}

/* 테마 폭 그대로 — 테마 컨테이너가 폭과 여백을 이미 갖고 있으므로
   지면은 폭 제한 없이 그 안을 채우기만 합니다. */
body.lp-width-theme .sell-lp {
	max-width: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	background: transparent;
}

.sell-lp a {
	color: var(--slp-accent);
}

/* 맨 윗줄 — 제휴 고지 한 줄. 작고 옅게 두어 시선이 제목으로 바로 가게 합니다. */
.lp-crumb {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
	padding: 1rem 0 0;
	font-size: .82rem;
	color: var(--slp-muted);
}

.lp-crumb:empty {
	display: none;
}

.lp-crumb a {
	color: inherit;
	text-decoration: none;
}

.lp-hero {
	display: grid;

	/* 제목만 전체 폭을 쓰고, 그 아래부터는 왼쪽에 요약 · 서론,
	   오른쪽에 구매 카드가 나란히 섭니다. 카드를 요약 줄까지 끌어올려
	   왼쪽에 남는 빈 공간을 줄입니다.
	   글 순서는 제목 -> 요약 -> 카드 -> 서론 그대로 두고 자리만 옮겼습니다
	   (읽는 순서 · 좁은 화면 쌓이는 순서를 지키기 위해). */
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);

	/* 줄 간격은 좁게, 칸 사이는 넓게. 같은 값으로 두면 제목과 요약이
	   서로 다른 문단처럼 멀어집니다. */
	row-gap: clamp(.9rem, 2vw, 1.35rem);
	column-gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	padding: clamp(1.5rem, 5vw, 3rem) 0 var(--lp-gap);
	border-bottom: 1px solid var(--slp-line);
}

/* 제목 — 첫 줄 전체 폭 */
.sell-lp .lp-hero > .lp-title {
	grid-column: 1 / -1;
	grid-row: 1;
	margin-bottom: 0;
}

/* 왼쪽 칸 — 요약 · 핵심 3가지 · 신뢰 배지 · 서론을 한 항목으로 묶습니다.

   ⚠ 묶는 이유. 예전에는 요약과 서론을 각각 다른 줄에 두고 카드를
   `grid-row: 2 / span 2` 로 두 줄에 걸쳤는데, 그러면 그리드가 카드 높이를
   두 줄에 **나눠 배분**합니다. 왼쪽 내용이 카드보다 짧으면 남는 높이의 절반이
   요약과 서론 사이로 들어가 가운데가 뻥 뚫립니다 (2026-08-30 실측).
   한 항목으로 묶으면 카드와 나란히 선 칸이 하나뿐이라 그 일이 없습니다. */
.lp-hero-main {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(.9rem, 2vw, 1.35rem);
}

/* 구매 카드 — 왼쪽 칸 옆 한 칸 */
.lp-hero-buy {
	grid-column: 2;
	grid-row: 2;
}

.sell-lp .lp-title {
	margin: 0 0 .8rem;
	font-family: var(--slp-font);
	font-size: clamp(1.75rem, 4.6vw, 2.85rem);
	font-weight: 800;
	line-height: 1.24;
	letter-spacing: -.03em;
	color: var(--slp-ink);
}

.lp-sub {
	margin: 0;
	font-size: clamp(1rem, 2.1vw, 1.14rem);
	line-height: 1.75;
	color: var(--slp-body);
}

/* 핵심 3가지 */
.lp-points {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.35rem 0 0;
	padding: 0;
}

.lp-points li {
	margin: 0;
	padding: .45rem .85rem;
	font-size: .88rem;
	font-weight: 700;
	color: var(--slp-ink);
	background: var(--slp-surface-alt);
	border: 1px solid var(--slp-line);
	border-radius: var(--slp-radius-sm);
}

.lp-points li::before {
	content: none;
}

.lp-hero .sell-badges {
	margin-top: .9rem;
	margin-bottom: 0;
}

/* 첫 화면으로 올린 서론 문단.
   본문과 같은 크기로 두어 요약 한 줄 다음에 자연스럽게 이어지게 합니다.
   폭은 아랫줄 왼쪽 칸(약 690px)이 정하므로 --lp-measure 를 따로 걸지 않습니다. */
.lp-hero-lead {
	/* 위 여백은 .lp-hero 의 gap 이 만듭니다. 여기서 또 주면
	   같은 줄에 선 구매 카드보다 서론만 아래로 내려앉습니다. */
	font-size: clamp(1rem, 2.1vw, 1.06rem);
	line-height: 1.85;
	color: var(--slp-body);
}

.lp-hero-lead p {
	margin: 0 0 1.15rem;
}

.lp-hero-lead p:last-child {
	margin-bottom: 0;
}

/* 구매 카드 — 데스크톱에서는 스크롤을 따라옵니다. */
.lp-hero-buy {
	position: sticky;
	top: 24px;
	padding: 1.4rem;
	background: var(--slp-surface);
	border: 1px solid var(--slp-line-strong);
	border-radius: var(--slp-radius-lg);
	box-shadow: var(--slp-shadow-md);
}

.lp-shot {
	/* 카드 사진 비율.

	   원래 비율 그대로 두면 세로로 긴 상품 사진이 카드를 400px 넘게 밀어 올려,
	   ① 구매 버튼이 첫 화면 밖으로 내려가고 ② 카드 옆 왼쪽 칸이 그만큼 빕니다.
	   가로형으로 잘라 쓰면 둘 다 함께 줄어듭니다.

	   4 / 3  = 약 236px (기본, 가장 완만한 가로형)
	   3 / 2  = 약 210px
	   16 / 10 = 약 197px
	   상품이 잘려 보이면 아래 object-fit 을 cover -> contain 으로 바꾸세요.
	   잘리지 않는 대신 좌우에 흰 여백이 생깁니다. */
	--lp-shot-ratio: 4 / 3;

	margin: 0 0 1.1rem;
}

.lp-shot img {
	display: block;
	width: 100%;
	height: auto;

	/* aspect-ratio 를 모르는 옛 브라우저에서는 이 두 줄이 무시되고
	   사진이 원래 비율로 나옵니다 (예전과 같은 모습). */
	aspect-ratio: var(--lp-shot-ratio);
	object-fit: cover;
	object-position: center;

	border-radius: var(--slp-radius);
}

.lp-hero-buy .sell-rating {
	margin-bottom: .6rem;
}

/* 가격 */
.lp-price {
	margin: 0 0 1.1rem;
}

.lp-price-badge {
	display: inline-block;
	margin-bottom: .3rem;
	font-size: .78rem;
	font-weight: 700;
	color: var(--slp-muted);
}

.lp-price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
}

.lp-price-row del {
	font-size: .95rem;
	color: var(--slp-muted);
}

.lp-price-row strong {
	font-size: clamp(1.55rem, 3.4vw, 2rem);
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--slp-ink);
}

.lp-price-off {
	padding: .2rem .5rem;
	font-size: .82rem;
	font-style: normal;
	font-weight: 800;
	color: #fff;
	background: var(--slp-cta);
	border-radius: var(--slp-radius-sm);
}

/* ---------------------------------------------------------
   05. 랜딩페이지 — 구매 버튼
   --------------------------------------------------------- */

.sell-lp .lp-btn,
.lp-sticky .lp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	padding: 1.05rem 1.4rem;
	font-family: var(--slp-font);
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--slp-cta-ink);
	background: var(--slp-cta);
	border: 1px solid var(--slp-cta);
	border-radius: var(--slp-radius);
	box-shadow: var(--slp-shadow-sm);
	transition: transform .18s var(--slp-ease), filter .18s var(--slp-ease), box-shadow .18s var(--slp-ease);
}

.lp-btn::after {
	content: "→";
	font-weight: 500;
	transition: transform .18s var(--slp-ease);
}

.sell-lp .lp-btn:hover,
.sell-lp .lp-btn:focus-visible,
.lp-sticky .lp-btn:hover {
	color: var(--slp-cta-ink);
	filter: brightness(1.08);
	box-shadow: var(--slp-shadow-md);
	transform: translateY(-1px);
}

.lp-btn:hover::after {
	transform: translateX(4px);
}

.lp-btn:active {
	transform: translateY(0);
}

.sell-lp .lp-btn-big {
	padding: 1.2rem 1.5rem;
	font-size: clamp(1.06rem, 2.4vw, 1.18rem);
}

/* 보조 판매처 — 주 버튼보다 조용하게. */
.sell-lp .lp-btn-alt {
	margin-top: .6rem;
	padding: .85rem 1.3rem;
	font-size: .98rem;
	color: var(--slp-ink);
	background: var(--slp-surface);
	border-color: var(--slp-line-strong);
	box-shadow: none;
}

.sell-lp .lp-btn-alt:hover {
	color: var(--slp-ink);
	background: var(--slp-surface-alt);
	border-color: var(--slp-muted);
	box-shadow: none;
}

.lp-sticky .lp-btn-bar {
	width: auto;
	flex: 0 0 auto;
	padding: .85rem 1.5rem;
	font-size: 1rem;
}

/* 구매 상자 아래 맨 마지막 한 줄 (본문에 두면 상자보다 위로 올라간다).
   구매 상자와 붙어 보이지 않게 위 여백을 넉넉히 준다.
   ⚠ `.sell-lp` 를 붙여 쓰는 이유 — 이 문단은 본문(.lp-body) 안에 있어서
   `.lp-body p { margin: 0 0 1.15rem }` 이 더 강하다. 그냥 `.lp-footnote` 로
   쓰면 위 여백이 0 으로 눌린다 (2026-08-24 실측). */
.sell-lp .lp-footnote {
	margin: 2.6rem 0 0;
	padding: .85rem 1rem;
	border-radius: var(--slp-radius);
	background: var(--slp-surface-alt);
	font-size: .78rem;
	line-height: 1.6;
	color: var(--slp-muted);
}

/* 버튼 아래 한 줄 — 버튼에 붙어 보이지 않게 한 칸 띄운다.
   마무리 구매 상자의 것은 본문 안에 있어 `.sell-lp` 를 붙여야 이긴다 (위 참조) */
.sell-lp .lp-note {
	margin: 1.15rem 0 0;
	font-size: .83rem;
	line-height: 1.6;
	text-align: center;
	color: var(--slp-muted);
}

/* ---------------------------------------------------------
   06. 랜딩페이지 — 본문
   --------------------------------------------------------- */

.lp-body {
	/* 본문 한 줄 길이. 지면 폭(--lp-w)과는 따로 잡습니다.

	   none = 지면을 꽉 씁니다(1160px 지면에서 1096px). 첫 화면의 서론과 폭이
	   같아져 목차 · 표 · 구매 상자와도 왼쪽 · 오른쪽 끝이 모두 맞습니다.

	   한 줄이 길어 읽기 불편하면 길이를 지정하세요. 한글 17px 기준
	   46rem = 736px 약 43자 / 52rem = 832px 약 49자 / 60rem = 960px 약 56자.
	   지정하면 아래 목록(소제목 · 문단 · 목록)만 그 폭으로 묶이고, 표 · 목차 ·
	   구매 상자는 그대로 지면을 꽉 씁니다. */
	--lp-measure: none;

	padding-top: var(--lp-gap);
	font-size: clamp(1rem, 2.1vw, 1.06rem);
	line-height: 1.85;
}

/* 위 --lp-measure 를 실제로 적용하는 자리.

   기본값 none 이면 아무것도 좁아지지 않습니다. 길이를 지정하면 읽어 내려가는
   것(소제목 · 문단 · 목록)만 함께 묶입니다 — h2 를 빼고 문단만 좁히면 긴
   구분선 아래 짧은 문단이 놓여 오른쪽 빈 공간이 더 도드라집니다.

   자식 선택자(>)로 잡았으므로 표 · 상자 · 목차 안쪽 문단은 걸리지 않고,
   여기 없는 것(.sell-tw 표 · .lp-band 버튼띠 · .lp-pc · .sell-box · .lp-toc ·
   .lp-close 마무리 상자 · figure)은 언제나 지면을 꽉 씁니다. */
.lp-body > h2,
.lp-body > h3,
.lp-body > h4,
.lp-body > p,
.lp-body > ul,
.lp-body > ol,
.lp-body > dl,
.lp-body > blockquote {
	max-width: var(--lp-measure);
}

/* 맨 아래 한 줄은 바로 위 마무리 구매 상자와 폭을 맞춥니다
   (배경이 있는 상자라 혼자 짧으면 어긋나 보입니다).
   `.lp-body > p` 를 이기려면 `.sell-lp` 를 붙여야 합니다. */
.sell-lp .lp-body > .lp-footnote {
	max-width: none;
}

.sell-lp .lp-body > h2 {
	display: block;
	margin: clamp(2.4rem, 5vw, 3.4rem) 0 1rem;
	padding-top: 1.6rem;
	font-family: var(--slp-font);
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.35;
	color: var(--slp-ink);
	border-top: 1px solid var(--slp-line);
	scroll-margin-top: 84px;
}

.sell-lp .lp-body > h2:first-child {
	margin-top: 0;
}

.sell-lp .lp-body h3 {
	margin: 2rem 0 .8rem;
	font-family: var(--slp-font);
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--slp-ink);
}

.lp-body p {
	margin: 0 0 1.15rem;
}

.lp-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--slp-radius);
}

.lp-body ul,
.lp-body ol {
	margin: 0 0 1.3rem;
	padding-left: 1.3rem;
}

.lp-body li {
	margin-bottom: .45rem;
}

/* 목차 */
.lp-toc {
	margin: 0 0 var(--lp-gap);
	padding: 1.35rem 1.5rem;
	background: var(--slp-surface-alt);
	border: 1px solid var(--slp-line);
	border-radius: var(--slp-radius);
}

.lp-toc-title {
	margin: 0 0 .7rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--slp-muted);
}

.lp-toc ol {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: .3rem 1.5rem;
	margin: 0;
	padding: 0 0 0 1.15rem;
	font-size: .95rem;
}

.lp-toc li {
	margin: 0;
	padding: .12rem 0;
}

.lp-toc a {
	color: var(--slp-body);
	text-decoration: none;
}

.lp-toc a:hover {
	color: var(--slp-accent);
	text-decoration: underline;
}

/* 표 */
.lp-body .sell-tw {
	margin: 1.6rem 0;
}

.lp-body .sell-tw table {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	margin: 0;
	font-size: .95rem;
}

.lp-body .sell-tw th,
.lp-body .sell-tw td {
	padding: .8rem 1rem;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--slp-line);
}

.lp-body .sell-tw thead th {
	font-size: .8rem;
	font-weight: 700;
	color: var(--slp-muted);
	border-bottom: 1px solid var(--slp-line-strong);
}

.lp-body .sell-tw tbody th,
.lp-body .sell-tw tbody tr > *:first-child {
	width: 34%;
	font-weight: 600;
	color: var(--slp-ink);
	background: var(--slp-surface-alt);
}

.lp-body .sell-tw tbody tr:last-child th,
.lp-body .sell-tw tbody tr:last-child td {
	border-bottom: 0;
}

/* 강점 / 짚어볼 점 */
.lp-pc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin: 1.8rem 0;
}

.lp-pros,
.lp-cons {
	margin: 1.8rem 0;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--slp-line);
	border-top-width: 3px;
	border-radius: var(--slp-radius);
}

.lp-pc .lp-pros,
.lp-pc .lp-cons {
	margin: 0;
}

.lp-pros {
	border-top-color: var(--slp-good);
	background: var(--slp-good-bg);
}

.lp-cons {
	border-top-color: var(--slp-warn);
	background: var(--slp-warn-bg);
}

.sell-lp .lp-pros h3,
.sell-lp .lp-cons h3 {
	margin: 0 0 .7rem;
	font-size: .98rem;
	font-weight: 800;
}

.sell-lp .lp-pros h3 { color: var(--slp-good); }
.sell-lp .lp-cons h3 { color: var(--slp-warn); }

.lp-pros ul,
.lp-cons ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .96rem;
}

.lp-pros li,
.lp-cons li {
	position: relative;
	margin: 0 0 .45rem;
	padding-left: 1.4rem;
	line-height: 1.7;
}

.lp-pros li::before,
.lp-cons li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
}

.lp-pros li::before { content: "✓"; color: var(--slp-good); }
.lp-cons li::before { content: "!"; color: var(--slp-warn); padding-left: .35rem; }

.lp-pros li:last-child,
.lp-cons li:last-child {
	margin-bottom: 0;
}

/* 본문 안 문답 상자 사이 간격 */
.lp-body .sell-faq:first-of-type {
	margin-top: 1.4rem;
}

.lp-body .sell-faq:last-of-type {
	margin-bottom: 1.4rem;
}

/* ---------------------------------------------------------
   07. 중간 버튼 띠 · 마무리 상자
   --------------------------------------------------------- */

.lp-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin: clamp(2rem, 4vw, 2.75rem) 0;
	padding: 1.25rem 1.4rem;
	background: var(--slp-surface-alt);
	border: 1px solid var(--slp-line);
	border-radius: var(--slp-radius);
}

.lp-band-price {
	font-size: 1.22rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--slp-ink);
}

.sell-lp .lp-band .lp-btn {
	width: auto;
	flex: 1 1 220px;
	max-width: 340px;
	padding: .9rem 1.4rem;
	font-size: 1rem;
}

.lp-close {
	margin: var(--lp-gap) 0 0;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
	background: var(--slp-surface);
	border: 1px solid var(--slp-line-strong);
	border-radius: var(--slp-radius-lg);
	box-shadow: var(--slp-shadow-sm);
}

.lp-close-lead {
	margin: 0 0 1rem;
	font-size: 1.12rem;
	font-weight: 800;
	line-height: 1.5;
	color: var(--slp-ink);
}

.lp-close .lp-price {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lp-close .lp-price-row {
	justify-content: center;
}

.sell-lp .lp-close .lp-btn {
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

/* 제휴 고지 — 규정상 반드시 보여야 하지만, 읽는 사람을 막아서면 안 됩니다.
   작게 · 옅게 두어 '있는 것은 보이되 시선을 끌지는 않는' 정도로 맞춥니다. */
.lp-disclosure {
	margin: 0;
	padding: 0;
	font-size: .72rem;
	line-height: 1.55;
	font-weight: 400;
	color: var(--slp-muted);
	opacity: .8;
	border: 0;
}

@media (max-width: 600px) {
	/* 좁은 화면에서는 사이트 이름 아래로 내려가므로 조금 더 눌러 둡니다. */
	.lp-disclosure {
		font-size: .7rem;
		opacity: .72;
	}
}

/* ---------------------------------------------------------
   08. 하단 고정 구매바
   --------------------------------------------------------- */

.lp-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	padding: .6rem clamp(1.15rem, 4vw, 2rem);
	font-family: var(--slp-font);
	background: rgba(255, 255, 255, .93);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border-top: 1px solid var(--slp-line-strong);
	box-shadow: 0 -10px 30px -24px rgba(16, 24, 40, .8);
	transform: translateY(110%);
	transition: transform .28s var(--slp-ease);
}

.lp-sticky[hidden] {
	display: none;
}

.lp-sticky.is-on {
	transform: translateY(0);
}

.lp-sticky-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--slp-w, 1160px);
	margin: 0 auto;
}

/* 테마 폭을 쓰는 경우 고정바도 조금 넓게 잡습니다. */
body.lp-width-theme .lp-sticky-in {
	max-width: 1200px;
}

.lp-sticky-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}

.lp-sticky-text strong {
	overflow: hidden;
	font-size: .92rem;
	font-weight: 600;
	color: var(--slp-ink);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lp-sticky-text span {
	font-size: 1.08rem;
	font-weight: 800;
	color: var(--slp-ink);
}

/* 고정바가 마지막 문단을 가리지 않도록 아래를 비웁니다. */
body.lp-has-sticky .site-footer,
body.lp-has-sticky .sell-lp {
	padding-bottom: 84px;
}

/* ---------------------------------------------------------
   09. 좁은 화면
   --------------------------------------------------------- */

@media (max-width: 768px) {
	.lp-hero {
		grid-template-columns: 1fr;
		padding-top: 1.25rem;
	}

	/* 한 줄로 쌓입니다. 자리 지정을 풀면 글 순서대로 놓이므로
	   제목 -> 구매 카드 -> 서론 이 됩니다. */
	.sell-lp .lp-hero > .lp-title,
	.lp-hero-main,
	.lp-hero-text,
	.lp-hero-buy,
	.lp-hero-lead {
		grid-column: auto;
		grid-row: auto;
	}

	/* 한 줄로 쌓일 때는 묶음을 풀어 자식들을 히어로의 직접 칸으로 만듭니다.
	   그래야 아래 order 로 구매 카드를 서론보다 위에 올릴 수 있습니다
	   (가격 · 버튼이 서론 아래로 밀리지 않게). */
	.lp-hero-main {
		display: contents;
	}

	.sell-lp .lp-hero > .lp-title {
		margin-bottom: .8rem;
		order: 1;
	}

	.lp-hero-text {
		order: 2;
	}

	.lp-hero-buy {
		order: 3;
	}

	.lp-hero-lead {
		order: 4;
	}

	.lp-hero-buy {
		position: static;
		padding: 1.15rem;
	}

	.lp-band {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	/* 띠가 세로 배치로 바뀌므로 flex-basis 220px 이 '높이'로 해석됩니다.
	   그대로 두면 버튼이 세로로 길게 늘어납니다. 여기서 되돌립니다. */
	.sell-lp .lp-band .lp-btn {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}

	.lp-sticky-text strong {
		display: none;
	}

	.lp-sticky .lp-btn-bar {
		flex: 1 1 auto;
	}

	/* 좁은 화면에서는 옆으로 미는 대신 줄을 접습니다 (2열 스펙표 기준). */
	.lp-body .sell-tw table {
		min-width: 0;
	}

	.lp-body .sell-tw th,
	.lp-body .sell-tw td {
		padding: .7rem .8rem;
		font-size: .92rem;
	}

	.lp-body .sell-tw tbody th,
	.lp-body .sell-tw tbody tr > *:first-child {
		width: 38%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-btn,
	.lp-btn::after,
	.sell-btn,
	.lp-sticky {
		transition: none;
	}
}