/* ===================================================================
   피터캣클럽 — About = 사이트 루트 (2.png / 모바일 13·14·15·16.png)

   2026-09-15 개편: 데스크톱(1024 이상)은 시안 2.png(800 캔버스)의 좌표를
   화면 폭 비율로 그대로 옮긴다. 단위 --u = 100vw / 800 (시안 1px).
   - 옛 판은 메인 목업(1440 px 고정값)을 따라 로고·Read below·카피·오브젝트 크기와 위치가 시안과 달랐다.
   - 히어로 요소는 히어로 바닥(시안 y 450, 카피 구역과의 경계) 기준으로 둔다 → 헤더 높이가 달라도 경계가 맞는다.
   - 고양이 조각 3개(히어로·카피·앞발)는 원본 메인심볼 재렌더/벡터 — 경계를 넘는 수염·몸통이 시안처럼 이어진다.
   - 1023px 이하는 모바일 시안(13~16.png) 배치.
   - 호버가 없는 기기는 오브젝트 메뉴명 버전을 기본으로 보여 준다(롤아웃 R23).
   색은 tokens.css 변수만.
   =================================================================== */

/* ===================
   1. CSS Variables
   =================== */

/* 2026-09-16 80% 축소: 그림(고양이 조각·오브젝트)과 좌표는 --u(전폭) 그대로 — 조각이 경계에서 이어져야 한다.
   글자·로고·Read below·버튼 크기만 --pc-u(site.css, 시안 1px × 0.8, 1440 에서 멈춤)로 줄인다. */
.pc-about {
	--u: calc(100vw / 800);          /* 시안 2.png 1px */
	--pc-about-header: var(--pc-header-h, 83px); /* 전역 헤더 높이(site.css 시안 76u) — 히어로 높이 계산용 */
}

/* ===================
   3. Layout
   =================== */

.pc-about {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--pc-font);
	color: var(--pc-ink);
}

.pc-about h1,
.pc-about h2,
.pc-about p {
	margin: 0;
}

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

.pc-about .pc-br-m {
	display: none;
}

/* ===================
   5. Sections
   =================== */

/* 5-1. 히어로 — 시안 y (헤더 아래) .. 450 */
.pc-about .pc-hero {
	position: relative;
	height: calc(var(--u) * 450 - var(--pc-about-header));
	min-height: 440px;
	overflow: hidden;
}

.pc-about .pc-hero__text {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 0;
	pointer-events: none;
}

/* 로고 — 시안 x 52..401, y 82..155 */
.pc-about .pc-hero__title {
	position: absolute;
	left: calc(var(--u) * 52);
	bottom: calc(var(--u) * 295);
	width: calc(var(--pc-u) * 349);
	line-height: 0;
}

.pc-about .pc-hero__logo {
	width: 100%;
	max-width: none;
	margin: 0;
}

.pc-about .pc-hero__face {
	display: none;
}

/* Read below — 글자 시안 x 111..225, y 298..318 / 화살표 y 338..396 */
.pc-about .pc-readbelow {
	position: absolute;
	left: calc(var(--u) * 111);
	bottom: calc(var(--u) * 54);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--pc-u) * 20);
	width: calc(var(--pc-u) * 114);
	color: var(--pc-ink);
	text-decoration: none;
	pointer-events: auto;
}

.pc-about .pc-readbelow__label {
	display: block;
	font-family: var(--pc-font-script);
	font-size: calc(var(--pc-u) * 31);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--pc-ink);
	transform: rotate(-3deg);
}

.pc-about .pc-readbelow__arrow {
	width: calc(var(--pc-u) * 25);
	height: calc(var(--pc-u) * 58);
	stroke: var(--pc-ink);
	transition: transform var(--pc-dur-arrow) ease;
}

.pc-about .pc-readbelow:hover .pc-readbelow__arrow {
	transform: translateY(6px);
}

/* 고양이 얼굴 — 시안 x 400..800, y 40..470 조각. 아래 20줄(4.651%)은 경계(y 450) 밑이라
   가리고 그만큼 내려서, 보이는 끝을 히어로 바닥에 맞춘다. */
.pc-about .pc-hero__cat {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: calc(var(--u) * 400);
	max-width: none;
	transform: translateY(4.651%);
	clip-path: inset(0 0 4.651% 0);
	pointer-events: none;
	user-select: none;
}

/* 5-2. 카피 — 시안 y 450..900. 왼쪽 몸통·수염은 벡터(intro-cat.svg, 시안 x 0..460) */
.pc-about .pc-intro {
	position: relative;
	z-index: 2;
}

.pc-about .pc-intro__body {
	position: relative;
	min-height: calc(var(--u) * 450);
	background: var(--pc-white);
}

.pc-about .pc-intro__cat {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--u) * 460);
	max-width: none;
	pointer-events: none;
	user-select: none;
}

/* 제목 시안 x 235, y 573(구역 위 123) */
.pc-about .pc-intro__content {
	position: relative;
	max-width: none;
	margin-left: calc(var(--u) * 235);
	padding: calc(var(--u) * 123) var(--pc-space-5) calc(var(--u) * 60) 0;
}

/* 제목 — 시안 폭 507 (x 235..742) */
.pc-about .pc-intro__headline {
	margin: 0 0 calc(var(--pc-u) * 28);
	font-family: var(--pc-font-en);
	font-size: calc(var(--pc-u) * 46);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0;
	white-space: nowrap;
	color: var(--pc-pink-main);
}

/* 본문 — 시안 6줄, 줄 간격 20 */
.pc-about .pc-intro__copy {
	margin-bottom: calc(var(--pc-u) * 26);
}

.pc-about .pc-intro__line {
	font-size: max(16px, calc(var(--pc-u) * 10.3));
	line-height: 1.94;
	color: var(--pc-ink-body);
}

/* 버튼(목업 .pc-btn) — lms-common.css 의 같은 이름 규칙과 무관하게 여기서 전부 정한다 */
.pc-about .pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
	padding: 15px 34px;
	border: 0;
	border-radius: var(--pc-radius-pill);
	box-shadow: none;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-15);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--pc-dur-fast) ease, box-shadow var(--pc-dur-fast) ease;
}

.pc-about .pc-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--pc-shadow-btn-hover);
}

/* 테스트 해보기 — 시안 148×39 (x 233..381, y 787..826) */
.pc-about .pc-intro__cta {
	width: max(160px, calc(var(--pc-u) * 148));
	height: calc(var(--pc-u) * 39);
	min-height: 44px;
	padding: 0;
	font-size: max(15px, calc(var(--pc-u) * 14));
}

.pc-about .pc-intro__cta,
.pc-about .pc-intro__cta:hover,
.pc-about .pc-intro__cta:focus {
	background: var(--pc-purple);
	color: var(--pc-yellow-main);
}

/* 5-3. 레몬·책·찻잔 — 시안 y 900..1350 */
.pc-about .pc-objects {
	position: relative;
	min-height: calc(var(--u) * 450);
	overflow: hidden;
}

/* 앞발·꼬리 — 시안 x 250..800, y 900..1160 */
.pc-about .pc-objects__paw {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(var(--u) * 550);
	max-width: none;
	pointer-events: none;
	user-select: none;
}

.pc-about .pc-objects__list {
	position: absolute;
	inset: 0;
}

.pc-about .pc-obj {
	position: absolute;
	display: block;
	text-decoration: none;
	cursor: pointer;
}

/* 시안 x 45..212, y 950..1128 */
.pc-about .pc-obj--lemon {
	left: calc(var(--u) * 45);
	top: calc(var(--u) * 50);
	width: calc(var(--u) * 167);
	height: calc(var(--u) * 178);
}

/* 시안 x 192..355, y 1128..1322 */
.pc-about .pc-obj--book {
	left: calc(var(--u) * 192);
	top: calc(var(--u) * 228);
	width: calc(var(--u) * 163);
	height: calc(var(--u) * 194);
}

/* 시안 x 458..664, y 1195..1337 */
.pc-about .pc-obj--tea {
	left: calc(var(--u) * 458);
	top: calc(var(--u) * 295);
	width: calc(var(--u) * 206);
	height: calc(var(--u) * 142);
}

.pc-about .pc-obj__inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transition: transform var(--pc-dur-object) var(--pc-ease-spring);
}

.pc-about .pc-obj--lemon:is(:hover, :focus-visible) .pc-obj__inner {
	transform: translateY(var(--pc-lift-object)) rotate(var(--pc-rot-lemon)) scale(var(--pc-scale-object));
}

.pc-about .pc-obj--book:is(:hover, :focus-visible) .pc-obj__inner {
	transform: translateY(var(--pc-lift-object)) rotate(var(--pc-rot-book)) scale(var(--pc-scale-object));
}

.pc-about .pc-obj--tea:is(:hover, :focus-visible) .pc-obj__inner {
	transform: translateY(var(--pc-lift-object)) rotate(var(--pc-rot-tea)) scale(var(--pc-scale-object));
}

.pc-about .pc-obj__plain,
.pc-about .pc-obj__labeled {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	filter: var(--pc-shadow-object);
	transition: opacity var(--pc-dur) ease;
}

.pc-about .pc-obj__labeled {
	opacity: 0;
}

.pc-about .pc-obj:is(:hover, :focus-visible) .pc-obj__plain {
	opacity: 0;
}

.pc-about .pc-obj:is(:hover, :focus-visible) .pc-obj__labeled {
	opacity: 1;
}

.pc-about .pc-obj__hint {
	position: absolute;
	bottom: -30px;
	left: 50%;
	font-size: var(--pc-fs-12);
	font-weight: 500;
	line-height: 1.4;
	color: var(--pc-ink);
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity var(--pc-dur-arrow) ease;
}

.pc-about .pc-obj:is(:hover, :focus-visible) .pc-obj__hint {
	opacity: var(--pc-hint-opacity);
}

.pc-about :is(a, button):focus-visible {
	outline: 2px solid var(--pc-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--pc-white);
}

/* ===================
   6. Responsive
   =================== */

/* 호버가 없는 기기: 메뉴명 버전을 기본으로 (롤아웃 R23) */
@media (hover: none) {
	.pc-about .pc-obj__plain {
		opacity: 0;
	}

	.pc-about .pc-obj__labeled {
		opacity: 1;
	}
}

/* 1023 이하: 모바일 시안(13·14·15·16.png) 배치 */
@media (max-width: 1023px) {
	/* 13.png 히어로 — 보라 전면, 흰 로고·얼굴·Read below */
	.pc-about .pc-hero {
		height: 100vh;
		height: 100svh;
		min-height: 0;
		background: var(--pc-surface-brand);
	}

	.pc-about .pc-hero__text {
		position: static;
		padding: 0;
	}

	.pc-about .pc-hero__title {
		position: static;
		width: auto;
	}

	.pc-about .pc-hero__logo {
		position: absolute;
		top: 36px;
		left: 50%;
		width: 209px;
		margin: 0;
		transform: translateX(-50%);
		filter: brightness(0) invert(1); /* 흰 로고 원본이 없어 검정 로고를 반전 (1회차 Q2 가안) */
	}

	.pc-about .pc-hero__face {
		position: absolute;
		top: calc(50% - 110px); /* 667 높이에서 224 (13.png), 더 긴 화면에서는 가운데 */
		left: 50%;
		display: block;
		width: 220px;
		max-width: none;
		transform: translateX(-50%);
	}

	.pc-about .pc-hero__cat {
		display: none;
	}

	.pc-about .pc-readbelow {
		position: absolute;
		bottom: 30px; /* 667 높이에서 top 583 (13.png), 더 긴 화면에서도 아래쪽 */
		left: 50%;
		width: auto;
		gap: var(--pc-space-1);
		margin: 0;
		color: var(--pc-on-dark);
		transform: translateX(-50%);
	}

	.pc-about .pc-readbelow__label {
		font-size: var(--pc-fs-18);
		color: var(--pc-on-dark);
	}

	.pc-about .pc-readbelow__arrow {
		width: 12px;
		height: 28px;
		stroke: var(--pc-on-dark);
	}

	/* 14.png 카피 — 흰 바탕, 좌측 36 */
	.pc-about .pc-intro__cat {
		display: none;
	}

	.pc-about .pc-intro__body {
		min-height: 0;
		background: var(--pc-white);
	}

	.pc-about .pc-intro__content {
		max-width: calc(600px + 2 * var(--pc-gutter-mobile));
		margin: 0 auto;
		padding: var(--pc-space-9) var(--pc-gutter-mobile) var(--pc-space-8);
	}

	.pc-about .pc-br-m {
		display: inline;
	}

	.pc-about .pc-intro__headline {
		margin-bottom: var(--pc-space-5);
		font-size: var(--pc-fs-34);
		white-space: normal;
	}

	.pc-about .pc-intro__line {
		font-size: var(--pc-fs-16);
		line-height: var(--pc-lh-cta);
	}

	.pc-about .pc-intro__copy {
		margin-bottom: var(--pc-space-8);
	}

	.pc-about .pc-intro__cta {
		display: flex;
		width: 200px;
		height: 51px;
		margin: 0 auto;
		padding: 0;
		font-size: var(--pc-fs-20);
	}

	/* 15.png 앞발 + 명세서 8 "1열 세로 재배치" (1회차 Q7 가안) */
	.pc-about .pc-objects {
		min-height: 0;
		padding: 156px 0 var(--pc-space-8);
	}

	.pc-about .pc-objects__paw {
		width: 257px;
	}

	.pc-about .pc-objects__list {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--pc-space-6);
	}

	.pc-about .pc-objects .pc-obj {
		position: relative;
		top: auto;
		left: auto;
		flex: none;
	}

	.pc-about .pc-obj--lemon {
		width: 210px;
		height: 224px;
	}

	.pc-about .pc-obj--book {
		width: 190px;
		height: 225px;
	}

	.pc-about .pc-obj--tea {
		width: 236px;
		height: 169px;
	}
}