/* PSTN company introduction — intentionally scoped to the code-backed /about/ page. */
.pstn-about {
	padding-top: var(--pstn-chrome-height);
	overflow: hidden;
	background: #fff;
	color: var(--pstn-black);
}

body.pstn-promotion-hidden .pstn-about { padding-top: var(--pstn-header-height); }

.pstn-about *,
.pstn-about *::before,
.pstn-about *::after { box-sizing: border-box; }

.pstn-about h1,
.pstn-about h2,
.pstn-about h3,
.pstn-about p,
.pstn-about figure,
.pstn-about ol { margin: 0; }

.pstn-about ol { padding: 0; list-style: none; }

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

.pstn-about-container {
	width: 100%;
	max-width: var(--pstn-container-box);
	margin: 0 auto;
	padding-right: 32px;
	padding-left: 32px;
}

.pstn-about-kicker {
	color: var(--pstn-blue);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .18em;
}

.pstn-about-hero {
	position: relative;
	background:
		radial-gradient(circle at 87% 22%, rgba(145, 185, 168, .28) 0 8%, transparent 31%),
		linear-gradient(128deg, #f9f5eb 0%, #f2f7f3 55%, #e4f1ed 100%);
}

.pstn-about-hero::before,
.pstn-about-hero::after {
	position: absolute;
	content: "";
	border: 1px solid rgba(20, 105, 200, .12);
	border-radius: 50%;
	pointer-events: none;
}

.pstn-about-hero::before {
	top: -290px;
	right: -160px;
	width: 650px;
	height: 650px;
}

.pstn-about-hero::after {
	right: 20%;
	bottom: -100px;
	width: 250px;
	height: 250px;
}

.pstn-about-hero__inner {
	position: relative;
	z-index: 1;
	min-height: 700px; /* shared hero ladder: 700 / 590 (≤1180) / 560 (≤1023) — mirrored on brand + products */
	padding-top: clamp(86px, 7vw, 118px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	grid-template-rows: 1fr auto;
	column-gap: clamp(48px, 8vw, 126px);
}

.pstn-about-hero__copy { min-width: 0; }

.pstn-about-hero__copy h1 {
	max-width: 980px;
	margin-top: 22px;
	color: #0b1722;
	font-family: var(--pstn-font);
	font-size: var(--pstn-type-page-hero, clamp(44px, 4.5vw, 58px));
	font-weight: 700;
	line-height: .94;
	letter-spacing: -.045em;
	overflow-wrap: anywhere;
}

.pstn-about-hero__statement {
	margin-top: 38px !important;
	font-size: var(--pstn-type-lead-hero, clamp(20px, 1.8vw, 26px));
	font-weight: 500;
	line-height: 1.52;
	letter-spacing: -.035em;
}

.pstn-about-hero__side {
	align-self: center;
	padding: 27px 0 27px 30px;
	border-left: 1px solid rgba(11, 63, 120, .22);
}

.pstn-about-hero__side strong {
	display: block;
	color: var(--pstn-blue);
	font-family: var(--pstn-font);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.pstn-about-hero__side p {
	margin-top: 18px !important;
	color: #51625d;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: -.01em;
}

/* Section tabs: standalone bar under the hero, mirroring the brand page local-nav. */
.pstn-about-tabs {
	position: relative;
	z-index: 10;
	border-bottom: 1px solid rgba(11, 63, 120, .14);
	background: rgba(255, 255, 255, .97);
}

.pstn-about-tabs > .pstn-about-container {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pstn-about-tabs a {
	position: relative;
	min-height: 68px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #63716c;
	font-size: 13px;
	font-weight: 650;
	text-align: center;
	transition: color .2s ease, background-color .2s ease;
}

.pstn-about-tabs a + a { border-left: 1px solid var(--pstn-hairline); }

.pstn-about-tabs a::after {
	position: absolute;
	right: 18px;
	bottom: -1px;
	left: 18px;
	height: 2px;
	content: "";
	transform: scaleX(0);
	background: var(--pstn-blue);
	transition: transform .2s ease;
}

.pstn-about-tabs a:hover,
.pstn-about-tabs a.is-active,
.pstn-about-tabs a[aria-current="location"] {
	color: var(--pstn-deep-blue);
	background: #f7faf8;
}

.pstn-about-tabs a.is-active::after,
.pstn-about-tabs a[aria-current="location"]::after { transform: scaleX(1); }

.pstn-about-section {
	padding: 120px 0;
	scroll-margin-top: 154px;
}

body.pstn-promotion-hidden .pstn-about-section {
	scroll-margin-top: 124px;
}

.pstn-about-section-head {
	display: grid;
	grid-template-columns: minmax(260px, .78fr) minmax(440px, 1.22fr);
	gap: clamp(50px, 9vw, 150px);
	align-items: start;
}

.pstn-about-section-head h2 {
	margin-top: 17px;
	color: #111b24;
	font-family: var(--pstn-font);
	font-size: var(--pstn-type-section-max, clamp(34px, 3vw, 46px));
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.045em;
	word-break: keep-all;
	overflow-wrap: normal;
	text-wrap: balance;
}

.pstn-about-section-head__copy {
	width: min(100%, 660px);
	padding-top: 25px;
	justify-self: end;
}

@media (min-width: 901px) {
	#about-approach .pstn-about-section-head__copy {
		width: max-content;
		max-width: 100%;
	}
}

.pstn-about-section-head__copy strong {
	display: block;
	color: #15202b;
	font-size: clamp(22px, 2vw, 29px);
	font-weight: 600;
	line-height: 1.48;
	letter-spacing: -.04em;
	overflow-wrap: break-word;
}

.pstn-about-section-head__copy p {
	margin-top: 20px !important;
	max-width: 680px;
	color: var(--pstn-gray);
	font-size: 16px;
	line-height: 1.82;
	letter-spacing: -.015em;
	overflow-wrap: break-word;
}

.pstn-about-flow {
	margin-top: 88px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(76px, 6.5vw, 96px) minmax(0, 1fr) clamp(76px, 6.5vw, 96px) minmax(0, 1fr);
	gap: clamp(12px, 2vw, 28px);
	align-items: center;
}

.pstn-about-flow__node {
	min-width: 0;
	height: 100%;
	padding: clamp(22px, 2.3vw, 34px);
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #e4ebe7;
	border-radius: 24px;
	background: #fbfcfb;
	text-align: center;
}

.pstn-about-flow__node.is-pstn { background: #f2f7fb; }
.pstn-about-flow__node.is-pharmacist { background: var(--pstn-mint); }
.pstn-about-flow__node.is-customer { background: var(--pstn-cream); }

.pstn-about-flow__circle {
	width: clamp(142px, 13vw, 182px);
	aspect-ratio: 1;
	padding: 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 14px 38px rgba(22, 74, 77, .08);
}

.is-pstn .pstn-about-flow__circle { color: var(--pstn-deep-blue); }
.is-pharmacist .pstn-about-flow__circle { color: #286858; }
.is-customer .pstn-about-flow__circle { color: #9b5b48; }

.pstn-about-flow__circle strong {
	font-family: var(--pstn-font);
	font-size: clamp(25px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1;
}

.pstn-about-flow__circle span {
	margin-top: 11px;
	color: #66736f;
	font-size: 13px;
	line-height: 1.45;
}

.pstn-about-flow__body { margin-top: 28px; }

.pstn-about-flow__body b {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

.pstn-about-flow__body p {
	margin-top: 11px !important;
	color: var(--pstn-gray);
	font-size: 14px;
	line-height: 1.7;
}

/* 브리지 — 카피(위) / ← 라인 / → 라인 / 카피(아래) 샌드위치 구조.
   양쪽 브리지를 stretch시키고 1fr/1fr 스페이서로 화살표 쌍을 세로 중앙에 고정하므로,
   카피 줄 수가 달라도 두 브리지의 가로라인 y좌표가 픽셀 단위로 일치한다.
   padding-bottom 80은 행 높이(원 + 본문 카피 ~81px)의 절반을 상쇄해
   화살표 클러스터 중심을 양옆 원의 세로 중심에 맞추는 보정값. */
.pstn-about-flow__bridge {
	position: relative;
	min-width: 0;
	align-self: stretch;
	padding-bottom: 80px;
	display: grid;
	grid-template-rows: 1fr auto auto 1fr;
	color: #66736f;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
	word-break: keep-all;
}

.pstn-about-flow__bridge span.is-top { align-self: end; padding-bottom: 12px; }
.pstn-about-flow__bridge span.is-bottom { align-self: start; padding-top: 12px; }

.pstn-about-flow__bridge i {
	position: relative;
	width: 100%;
	height: 1px;
	display: block;
	background: #a9bab4;
}

.pstn-about-flow__bridge i.is-left { margin-bottom: 27px; }

.pstn-about-flow__bridge i::before {
	position: absolute;
	top: 50%;
	width: 7px;
	height: 7px;
	content: "";
	border-top: 1px solid #8ba29a;
	border-right: 1px solid #8ba29a;
}

.pstn-about-flow__bridge i.is-left::before { left: 1px; transform: translateY(-50%) rotate(-135deg); }
.pstn-about-flow__bridge i.is-right::before { right: 1px; transform: translateY(-50%) rotate(45deg); }

.pstn-about-system {
	background: #f3f7fb;
}

.pstn-about-system__notice {
	max-width: 680px;
	padding: 14px 17px;
	border-left: 3px solid var(--pstn-blue);
	background: rgba(255, 255, 255, .72);
	color: #596b7b !important;
	font-size: 13px !important;
	line-height: 1.7 !important;
}

.pstn-about-system__principles {
	margin-top: 82px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.pstn-about-system__principles article {
	position: relative;
	min-height: 315px;
	padding: 34px;
	display: flex;
	flex-direction: column;
	border: 1px solid #dce6ee;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(18, 55, 84, .055);
}

.pstn-about-system__principles article > span {
	color: #a0b3c3;
	font-family: var(--pstn-font);
	font-size: 20px;
	line-height: 1;
}

.pstn-about-system__principles .pstn-about-kicker {
	margin-top: 47px !important;
}

.pstn-about-system__principles h3 {
	margin-top: 13px;
	color: #132333;
	font-family: var(--pstn-font);
	font-size: clamp(27px, 2.35vw, 34px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.035em;
}

.pstn-about-system__principles article > p:last-child {
	margin-top: auto !important;
	padding-top: 30px;
	color: #65727e;
	font-size: 14px;
	line-height: 1.75;
}

.pstn-about-system__criteria {
	min-height: 410px;
	margin-top: 22px;
	padding: clamp(42px, 5vw, 72px);
	display: grid;
	grid-template-columns: minmax(260px, .78fr) minmax(420px, 1.22fr);
	gap: clamp(48px, 7vw, 100px);
	align-items: center;
	overflow: hidden;
	border-radius: 24px;
	background:
		radial-gradient(circle at 92% 4%, rgba(75, 170, 160, .32), transparent 30%),
		var(--pstn-deep-blue);
	color: #fff;
}

.pstn-about-system__criteria .pstn-about-kicker {
	color: #8edfd3;
}

.pstn-about-system__criteria ol {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	list-style: none;
}

.pstn-about-system__criteria li {
	min-width: 0;
	padding: 18px 20px;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 17px;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	background: rgba(255, 255, 255, .075);
}

.pstn-about-system__criteria li > span {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--pstn-deep-blue);
	font-size: 12px;
	font-weight: 800;
}

.pstn-about-system__criteria li strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.pstn-about-system__criteria li p {
	margin-top: 5px !important;
	color: rgba(255, 255, 255, .68);
	font-size: 12px;
	line-height: 1.6;
}

.pstn-about-philosophy { background: var(--pstn-cream); }

.pstn-about-philosophy__grid {
	margin-top: 86px;
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
	gap: clamp(50px, 7vw, 112px);
	align-items: center;
}

.pstn-about-givers {
	min-height: 330px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pstn-about-giver {
	position: relative;
	width: clamp(194px, 18vw, 258px);
	aspect-ratio: 1;
	margin-left: clamp(-40px, -2.6vw, -24px);
	padding: 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(145, 185, 168, .66);
	border-radius: 50%;
	background: rgba(255, 255, 255, .72);
	color: #52645e;
	text-align: center;
}

.pstn-about-giver:first-child { margin-left: 0; }

.pstn-about-giver.is-primary {
	z-index: 2;
	width: clamp(224px, 21vw, 300px);
	border-color: var(--pstn-blue);
	background: var(--pstn-blue);
	color: #fff;
	box-shadow: 0 25px 55px rgba(20, 105, 200, .19);
}

.pstn-about-giver strong {
	font-family: var(--pstn-font);
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
}

.pstn-about-giver p {
	margin-top: 17px !important;
	font-size: 13px;
	line-height: 1.65;
}

.pstn-about-philosophy__message {
	padding-left: clamp(0px, 2vw, 28px);
	border-left: 1px solid rgba(11, 63, 120, .2);
}

.pstn-about-philosophy__message p {
	color: var(--pstn-gray);
	font-size: 16px;
	line-height: 1.85;
}

.pstn-about-philosophy__message strong {
	display: block;
	margin-top: 30px;
	color: var(--pstn-deep-blue);
	font-size: clamp(22px, 2.05vw, 29px);
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: -.035em;
}

/* 철학 문구는 손글씨 질감만 남기고 원형 드로잉 장식은 사용하지 않는다. */
.pstn-about-philosophy .pstn-hand__circle { display: none; }

.pstn-about-philosophy__photo {
	position: relative;
	margin-top: 98px !important;
	overflow: hidden;
	border-radius: 24px;
	background: #dfe9e5;
}

.pstn-about-philosophy__photo img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.22, .75, .25, 1);
}

.pstn-about-philosophy__photo:hover img { transform: scale(1.018); }

.pstn-about-philosophy__photo figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 62px 40px 34px;
	background: linear-gradient(transparent, rgba(6, 24, 36, .65));
	color: #fff;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.02em;
}

.pstn-about-philosophy__photo figcaption span {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .17em;
}

.pstn-about-history { background: #fff; }

.pstn-about-timeline {
	position: relative;
	max-width: 1160px;
	margin: 90px auto 0 !important;
}

.pstn-about-timeline li {
	position: relative;
	min-height: 174px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
	align-items: start;
}

.pstn-about-timeline time {
	grid-column: 1;
	padding-top: 9px;
	color: var(--pstn-blue);
	font-family: var(--pstn-font);
	font-size: clamp(34px, 3.1vw, 45px);
	font-weight: 700;
	line-height: 1;
	text-align: right;
}

.pstn-about-timeline__rail {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	height: 100%;
	min-height: 174px;
}

.pstn-about-timeline__rail::before {
	position: absolute;
	top: 15px;
	bottom: -15px;
	left: 50%;
	width: 1px;
	content: "";
	background: #cfdcd6;
}

.pstn-about-timeline__rail::after {
	position: absolute;
	top: 9px;
	left: 50%;
	width: 13px;
	height: 13px;
	content: "";
	transform: translateX(-50%);
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--pstn-blue);
	box-shadow: 0 0 0 1px rgba(20, 105, 200, .35);
}

.pstn-about-timeline li:last-child .pstn-about-timeline__rail::before { bottom: calc(100% - 16px); }

.pstn-about-timeline li > div {
	grid-column: 3;
	padding: 3px 0 50px 12px;
}

.pstn-about-timeline li:nth-child(even) time {
	grid-column: 3;
	text-align: left;
}

.pstn-about-timeline li:nth-child(even) > div {
	grid-column: 1;
	grid-row: 1;
	padding-right: 12px;
	padding-left: 0;
	text-align: right;
}

.pstn-about-timeline h3 {
	color: #17222b;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.025em;
}

.pstn-about-timeline p {
	margin-top: 9px !important;
	color: var(--pstn-gray);
	font-size: 14px;
	line-height: 1.75;
}

.pstn-about-timeline p strong {
	display: inline-block;
	margin-top: 7px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #edf6ff;
	color: var(--pstn-deep-blue);
	font-size: 12px;
	font-weight: 700;
}

.pstn-about-timeline h3.pstn-about-timeline__brand-launch {
	margin-top: 24px;
	font-size: 30px;
	line-height: 1.28;
	letter-spacing: -.035em;
}

.pstn-about-timeline__brand-launch span {
	color: var(--pstn-blue);
}

.pstn-about-timeline p.pstn-about-timeline__brand-copy {
	margin-top: 7px !important;
	color: #45535d;
}

.pstn-about-history__closing {
	margin-top: clamp(44px, 5.5vw, 78px);
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--pstn-deep-blue);
	text-align: center;
}

.pstn-about-history__closing p {
	margin: 0 !important;
	font-family: "Cafe24Shiningstar", var(--pstn-font);
	font-size: clamp(26px, 2.2vw, 32px);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -.025em;
	word-break: keep-all;
}

.pstn-about-history__closing svg {
	width: 63px;
	height: 63px;
	margin-top: 20px;
	fill: none;
	stroke: #6f9f90;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .72;
}

.pstn-about-values { background: #f7faf8; }

.pstn-about-values__grid {
	margin-top: 82px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid #dce4e0;
	border-bottom: 1px solid #dce4e0;
}

.pstn-about-value {
	position: relative;
	min-height: 360px;
	padding: 40px clamp(28px, 3.2vw, 48px) 44px;
	display: flex;
	flex-direction: column;
	border: 0;
	border-radius: 0;
	background: transparent;
	transition: none;
}

.pstn-about-value + .pstn-about-value { border-left: 1px solid #dce4e0; }

.pstn-about-value:hover {
	transform: none;
	box-shadow: none;
	background: transparent;
}

.pstn-about-value__number {
	color: #9db0a9;
	font-family: var(--pstn-font);
	font-size: 18px;
}

.pstn-about-value__icon {
	width: 52px;
	height: 52px;
	margin-top: auto;
	display: grid;
	place-items: center;
	border-radius: 0;
	background: transparent;
	color: var(--pstn-blue);
}

.pstn-about-value:nth-child(2) .pstn-about-value__icon { background: transparent; color: #ad6b58; }
.pstn-about-value:nth-child(3) .pstn-about-value__icon { background: transparent; color: var(--pstn-deep-blue); }

.pstn-about-value__icon svg {
	width: 39px;
	height: 39px;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pstn-about-value h3 {
	margin-top: 26px;
	color: var(--pstn-deep-blue);
	font-family: var(--pstn-font);
	font-size: clamp(29px, 2.5vw, 37px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
}

.pstn-about-value p {
	margin-top: 15px !important;
	color: var(--pstn-gray);
	font-size: 15px;
	line-height: 1.7;
}

.pstn-about-closing {
	padding: 112px 0;
	background: #fff;
}

.pstn-about-closing__inner {
	min-height: 330px;
	padding: 68px clamp(42px, 6.5vw, 92px);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	overflow: hidden;
	border-radius: 24px;
	background:
		radial-gradient(circle at 92% 0%, rgba(73, 163, 157, .48), transparent 30%),
		var(--pstn-deep-blue);
	color: #fff;
}

.pstn-about-closing .pstn-about-kicker { color: #8edfd3; }

.pstn-about-closing h2 {
	margin-top: 18px;
	font-size: var(--pstn-type-section-max, clamp(34px, 3vw, 46px));
	font-weight: 500;
	line-height: 1.23;
	letter-spacing: -.045em;
}

.pstn-about-closing a {
	min-height: 54px;
	padding: 0 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border-radius: 999px;
	background: #fff;
	color: var(--pstn-deep-blue);
	font-size: 14px;
	font-weight: 700;
	transition: transform .22s ease, background-color .22s ease;
}

.pstn-about-closing a::after {
	width: 8px;
	height: 8px;
	margin-left: 22px;
	content: "";
	transform: rotate(-45deg);
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}

.pstn-about-closing a:hover { transform: translateY(-2px); background: #e9f5f2; }

.pstn-about a:focus-visible {
	outline: 2px solid var(--pstn-blue);
	outline-offset: 4px;
}

body.pstn-about-motion-enabled [data-pstn-about-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .72s ease, transform .72s cubic-bezier(.22, .75, .25, 1);
}

body.pstn-about-motion-enabled [data-pstn-about-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (max-width: 1180px) {
	.pstn-about-hero__inner { min-height: 590px; }
	.pstn-about-section { padding: 112px 0; }
	.pstn-about-section-head { grid-template-columns: minmax(230px, .72fr) minmax(390px, 1.28fr); gap: 56px; }
	.pstn-about-flow { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr); }
	.pstn-about-flow__node { padding-right: 24px; padding-left: 24px; }
	.pstn-about-philosophy__grid { gap: 42px; }
	.pstn-about-giver { padding: 22px; }
	.pstn-about-system__principles article { padding: 28px; }
	.pstn-about-system__criteria { gap: 44px; }
}

@media (max-width: 1023px) {
	.pstn-about-flow { grid-template-columns: 1fr; gap: 0; }
	.pstn-about-flow__node { max-width: 620px; width: 100%; margin: 0 auto; flex-direction: row; text-align: left; }
	.pstn-about-flow__circle { flex: 0 0 160px; }
	.pstn-about-flow__body { margin: 0 0 0 30px; }
	/* 세로 ↑↓ 쌍 + 양옆 카피. 1fr 스페이서 덕에 카피 폭이 달라도 화살표는 항상 중심축. */
	.pstn-about-flow__bridge { align-self: auto; width: 100%; height: 86px; margin: 0 auto; padding-bottom: 0; grid-template-rows: none; grid-template-columns: 1fr auto auto 1fr; column-gap: 14px; align-items: center; }
	.pstn-about-flow__bridge span { padding: 0 !important; align-self: center; font-size: 12px; line-height: 1.45; }
	.pstn-about-flow__bridge span.is-top { align-self: center; justify-self: end; text-align: right; }
	.pstn-about-flow__bridge span.is-bottom { align-self: center; justify-self: start; text-align: left; }
	.pstn-about-flow__bridge i { width: 1px; height: 66px; margin: 0 !important; }
	.pstn-about-flow__bridge i.is-left::before { top: 0; left: 50%; right: auto; transform: translate(-50%, 0) rotate(-45deg); }
	.pstn-about-flow__bridge i.is-right::before { top: auto; bottom: 0; left: 50%; right: auto; transform: translate(-50%, 0) rotate(135deg); }
}

@media (max-width: 900px) {
	.pstn-about-hero__inner { grid-template-columns: minmax(0, 1fr) 210px; column-gap: 38px; }
	.pstn-about-section-head { grid-template-columns: 1fr; gap: 22px; }
	.pstn-about-section-head__copy { width: auto; max-width: 700px; padding-top: 0; justify-self: start; }
	.pstn-about-philosophy__grid { grid-template-columns: 1fr; }
	.pstn-about-givers { justify-content: center; }
	.pstn-about-philosophy__message { max-width: 680px; padding: 0 0 0 24px; }
	.pstn-about-system__criteria { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.pstn-about-container { padding-right: 15px; padding-left: 15px; }
	.pstn-about-kicker { font-size: 12px; letter-spacing: .14em; }
	.pstn-about-hero { border-radius: 16px 16px 0 0; }
	.pstn-about-hero__inner {
		min-height: 0;
		padding-top: 58px;
		display: block;
	}
	.pstn-about-hero::before { top: -120px; right: -190px; width: 390px; height: 390px; }
	.pstn-about-hero::after { right: -50px; bottom: 40px; width: 170px; height: 170px; }
	.pstn-about-hero__copy h1 {
		max-width: 100%;
		margin-top: 16px;
		font-size: clamp(34px, 9.7vw, 42px);
		line-height: .98;
		letter-spacing: -.04em;
	}
	.pstn-about-hero__copy h1 br { display: none; }
	.pstn-about-hero__statement { margin-top: 27px !important; font-size: 18px; line-height: 1.55; }
	.pstn-about-hero__side {
		max-width: 235px;
		margin-top: 46px;
		padding: 0;
		border: 0;
	}
	.pstn-about-hero__side strong { font-size: 27px; }
	.pstn-about-hero__side p { margin-top: 11px !important; font-size: 14px; line-height: 1.7; }
	.pstn-about-tabs { overflow: hidden; }
	.pstn-about-tabs > .pstn-about-container { display: flex; overflow-x: auto; scrollbar-width: none; }
	.pstn-about-tabs > .pstn-about-container::-webkit-scrollbar { display: none; }
	.pstn-about-tabs a { min-width: max-content; min-height: 58px; padding: 0 24px; flex: 0 0 auto; font-size: 12px; }
	.pstn-about-tabs a:first-child { padding-left: 4px; padding-right: 24px; }
	.pstn-about-tabs a + a { border: 0; }
	.pstn-about-tabs a::after { right: 12px; left: 12px; }
	.pstn-about-tabs a:first-child::after { right: 16px; left: 0; }
	.pstn-about-section { padding: 78px 0; scroll-margin-top: 104px; }
	body.pstn-promotion-hidden .pstn-about-section { scroll-margin-top: 74px; }
	.pstn-about-section-head { gap: 19px; }
	.pstn-about-section-head h2 { margin-top: 12px; font-size: 36px; line-height: 1.08; }
	.pstn-about-section-head__copy strong { font-size: 21px; line-height: 1.5; }
	.pstn-about-section-head__copy p { margin-top: 14px !important; font-size: 14px; line-height: 1.75; }
	.pstn-about-flow { margin-top: 48px; }
	.pstn-about-flow__node {
		max-width: none;
		padding: 26px 23px;
		flex-direction: column;
		border-radius: 18px;
		text-align: center;
	}
	.pstn-about-flow__circle { width: 145px; flex-basis: auto; }
	.pstn-about-flow__circle span { font-size: 13px; }
	.pstn-about-flow__body { margin: 22px 0 0; }
	.pstn-about-flow__body p { font-size: 14px; }
	.pstn-about-pc-break { display: none; }
	.pstn-about-flow__bridge { height: 62px; }
	.pstn-about-flow__bridge i { height: 44px; }
	.pstn-about-system__notice { padding: 12px 14px; font-size: 13px !important; }
	.pstn-about-system__principles { margin-top: 48px; grid-template-columns: 1fr; gap: 12px; }
	.pstn-about-system__principles article { min-height: 250px; padding: 27px; border-radius: 17px; }
	.pstn-about-system__principles .pstn-about-kicker { margin-top: 34px !important; }
	.pstn-about-system__principles h3 { font-size: 29px; }
	.pstn-about-system__principles article > p:last-child { padding-top: 24px; font-size: 14px; }
	.pstn-about-system__criteria { min-height: 0; margin-top: 12px; padding: 38px 24px; gap: 32px; border-radius: 17px; }
	.pstn-about-system__criteria li { padding: 15px; grid-template-columns: 40px minmax(0, 1fr); gap: 13px; border-radius: 13px; }
	.pstn-about-system__criteria li > span { width: 38px; height: 38px; }
	.pstn-about-system__criteria li strong { font-size: 15px; }
	.pstn-about-system__criteria li p { font-size: 13px; }
	.pstn-about-philosophy__grid { margin-top: 48px; gap: 40px; }
	.pstn-about-givers { min-height: 306px; display: grid; grid-template-columns: repeat(2, 1fr); place-items: center; }
	.pstn-about-giver,
	.pstn-about-giver.is-primary { width: min(43vw, 176px); margin: 0; padding: 17px; }
	.pstn-about-giver.is-primary { transform: translateX(8px); }
	.pstn-about-giver:nth-child(2) { transform: translateX(-8px); }
	.pstn-about-giver:nth-child(3) { grid-column: 1 / -1; margin-top: -20px; }
	.pstn-about-giver strong { font-size: 22px; }
	.pstn-about-giver p { margin-top: 10px !important; font-size: 13px; line-height: 1.55; }
	.pstn-about-philosophy__message { padding-left: 17px; }
	.pstn-about-philosophy__message p { font-size: 14px; line-height: 1.75; }
	.pstn-about-philosophy__message strong { margin-top: 20px; font-size: 21px; line-height: 1.55; }
	.pstn-about-philosophy__photo { margin-top: 55px !important; border-radius: 16px; }
	.pstn-about-philosophy__photo img { aspect-ratio: 4 / 5; }
	.pstn-about-philosophy__photo figcaption { padding: 65px 20px 22px; font-size: 14px; }
	.pstn-about-timeline { margin-top: 52px !important; }
	.pstn-about-timeline li { min-height: 148px; grid-template-columns: 33px minmax(0, 1fr); }
	.pstn-about-timeline time,
	.pstn-about-timeline li:nth-child(even) time {
		grid-column: 2;
		grid-row: 1;
		padding-top: 0;
		font-size: 31px;
		text-align: left;
	}
	.pstn-about-timeline__rail {
		grid-column: 1;
		grid-row: 1 / span 2;
		min-height: 148px;
	}
	.pstn-about-timeline__rail::before { top: 9px; bottom: -9px; left: 7px; }
	.pstn-about-timeline__rail::after { top: 4px; left: 7px; width: 11px; height: 11px; }
	.pstn-about-timeline li > div,
	.pstn-about-timeline li:nth-child(even) > div {
		grid-column: 2;
		grid-row: 2;
		padding: 12px 0 37px;
		text-align: left;
	}
	.pstn-about-timeline h3 { font-size: 17px; }
	.pstn-about-timeline p { margin-top: 6px !important; font-size: 14px; line-height: 1.7; }
	.pstn-about-timeline h3.pstn-about-timeline__brand-launch { margin-top: 18px; font-size: 24px; }
	.pstn-about-values__grid { margin-top: 48px; grid-template-columns: 1fr; gap: 0; }
	.pstn-about-value { min-height: 0; padding: 32px 0 36px; border-radius: 0; }
	.pstn-about-value + .pstn-about-value { border-top: 1px solid #dce4e0; border-left: 0; }
	.pstn-about-value__icon { width: 52px; height: 52px; margin-top: 34px; }
	.pstn-about-value__icon svg { width: 34px; height: 34px; }
	.pstn-about-value h3 { margin-top: 21px; font-size: 30px; }
	.pstn-about-value p { margin-top: 11px !important; font-size: 14px; }
	.pstn-about-closing { padding: 72px 15px; }
	.pstn-about-closing__inner {
		min-height: 370px;
		padding: 42px 27px;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 35px;
		border-radius: 17px;
	}
	.pstn-about-closing h2 { margin-top: 14px; font-size: 32px; }
	.pstn-about-closing a { min-height: 50px; padding: 0 20px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.pstn-about *,
	.pstn-about *::before,
	.pstn-about *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
	.pstn-about-philosophy__photo:hover img,
	.pstn-about-value:hover,
	.pstn-about-closing a:hover { transform: none; }
}

/* ── /about 히어로 — 약사 검토 사진을 배경으로 (.pstn-about-hero--study) ──
   흰색 베일로 사진을 덮고 텍스트/탭은 기본 라이트 스타일을 그대로 상속한다. */
.pstn-about-hero--study { overflow: hidden; }

.pstn-about-hero__media {
	position: absolute;
	z-index: 0;
	inset: 0;
}

.pstn-about-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 넓은 화면일수록 cover 세로 크롭이 커진다. 12%라야 2560px에서도 인물 머리가 남는다. */
	object-position: 50% 12%;
}

.pstn-about-hero__media::after {
	position: absolute;
	inset: 0;
	content: "";
	/* 가로: 카피가 얹히는 좌측을 짙게, 인물이 있는 우측은 옅게.
	   세로: 하단 탭(14px)과 상단 카피 대비 확보. */
	background:
		linear-gradient(100deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .66) 40%, rgba(255, 255, 255, .56) 64%, rgba(255, 255, 255, .18) 86%, rgba(255, 255, 255, .10) 100%),
		linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, transparent 28%, transparent 80%, rgba(255, 255, 255, .30) 100%);
}

.pstn-about-hero--study::before,
.pstn-about-hero--study::after { z-index: 1; }

.pstn-about-hero--study .pstn-about-hero__inner {
	z-index: 2;
	min-height: clamp(520px, 42vw, 700px);
	grid-template-columns: minmax(0, 1fr);
	padding-bottom: 0;
}

.pstn-about-hero--study .pstn-about-hero__copy h1 {
	max-width: 900px;
	font-family: var(--pstn-font);
	font-size: var(--pstn-type-page-hero, clamp(44px, 4.5vw, 58px));
	line-height: 1.14;
	letter-spacing: -.045em;
	word-break: keep-all;
	overflow-wrap: normal;
	/* 베일을 얇게 가져가는 대신 글자 주변에 흰 헤일로를 둬서 국소 대비를 확보한다. */
	text-shadow: 0 1px 3px rgba(255, 255, 255, .95), 0 0 26px rgba(255, 255, 255, .85);
}

.pstn-about-hero--study .pstn-about-hero__statement {
	max-width: 620px;
	text-shadow: 0 1px 3px rgba(255, 255, 255, .95), 0 0 20px rgba(255, 255, 255, .85);
}

/* 브랜드 히어로의 eyebrow와 같은 파랑을 쓴다.
   12px 볼드는 large text가 아니라 이 색은 사진 위에서 대비가 3.6:1까지 떨어진다.
   그래서 같은 히어로의 제목·서브카피가 쓰는 흰색 글로우를 여기에도 넣어 읽힘을 보완한다. */
.pstn-about-hero--study .pstn-about-kicker {
	color: var(--pstn-blue);
	text-shadow: 0 1px 3px rgba(255, 255, 255, .95), 0 0 16px rgba(255, 255, 255, .9);
}

@media (max-width: 1023px) {
	.pstn-about-hero--study .pstn-about-hero__copy h1 { font-size: clamp(38px, 5.4vw, 54px); }
	.pstn-about-hero--study .pstn-about-hero__inner { min-height: 560px; }
}

@media (max-width: 767px) {
	.pstn-about-hero--study .pstn-about-hero__inner {
		min-height: 560px;
		padding-bottom: 0;
		display: grid;
		grid-template-rows: 1fr auto;
	}
	.pstn-about-hero--study .pstn-about-hero__copy h1 {
		max-width: 100%;
		margin-top: 16px;
		font-size: clamp(30px, 8.2vw, 40px);
		line-height: 1.2;
		letter-spacing: -.04em;
	}
	.pstn-about-hero--study .pstn-about-hero__statement { max-width: 100%; }
	.pstn-about-hero__media img { object-position: 50% 22%; }
	/* 모바일은 카피가 전폭이라 세로 베일만. 카피 아래(64%)부터 열어 사진이 드러나게 한다. */
	.pstn-about-hero__media::after {
		background: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .70) 40%, rgba(255, 255, 255, .16) 64%, rgba(255, 255, 255, .14) 78%, rgba(255, 255, 255, .80) 97%);
	}
}

/* ── /about OUR APPROACH — 비주얼 밴드 + 리드 카피 ──
   헤드라인은 이미지로 굽지 않고 라이브 텍스트로 둔다(SEO·스크린리더·리플로우).
   사진은 좌측이 비워진 소스라 카피를 그 자리에 얹는 구성. */
.pstn-about-approach {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
	gap: clamp(24px, 3.4vw, 52px);
	align-items: center;
}

.pstn-about-approach__copy { min-width: 0; }

/* 메인카피가 한 문장이라 짧은 헤드라인보다 작게, 행간은 넉넉히 잡는다. */
.pstn-about-approach h2 {
	margin-top: 18px;
	color: #111b24;
	font-family: var(--pstn-font);
	font-size: clamp(29px, 3.35vw, 50px);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -.045em;
	word-break: keep-all;
	overflow-wrap: normal;
	text-wrap: balance;
}

/* '지식'·'경험'만 살짝 — 밑줄 없이 컬러와 굵기로만 든다. */
.pstn-about-approach h2 em {
	color: var(--pstn-blue);
	font-style: normal;
	font-weight: 600;
}

.pstn-about-approach__sub {
	margin-top: clamp(20px, 2.1vw, 30px) !important;
	color: var(--pstn-gray);
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.85;
	letter-spacing: -.02em;
	word-break: keep-all;
}

.pstn-about-approach__media {
	position: relative;
	min-width: 0;
}

.pstn-about-approach__media picture,
.pstn-about-approach__media picture > img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── 순환 다이어그램 원형 — 텍스트 대신 로고/일러스트 ──
   일러스트가 들어가면서 텍스트가 원의 곡선 밖으로 밀려 원을 조금 키운다. */
.pstn-about-flow__circle {
	width: clamp(158px, 14.5vw, 200px);
	padding: 16px;
}

/* 곡선 안쪽에 머물도록 폭을 제한하고, 한글은 어절 단위로만 끊는다. */
.pstn-about-flow__circle span + span {
	max-width: 70%;
	word-break: keep-all;
	overflow-wrap: normal;
}

/* .pstn-about-flow__circle span (0,2,0)이 더 강해서 같은 특이도로 뒤에 둬야 마진이 죽는다. */
.pstn-about-flow__circle .pstn-about-flow__mark {
	height: clamp(50px, 5.6vw, 84px);
	margin-top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pstn-about-flow__mark img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

/* 워드마크는 가로로 길어 높이 대신 폭으로 시각 무게를 맞춘다. */
.pstn-about-flow__mark.is-logo img {
	width: clamp(74px, 7.6vw, 112px);
	height: auto;
}

.pstn-about-flow__circle span + span { margin-top: 9px; }

@media (max-width: 900px) {
	.pstn-about-approach {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
	.pstn-about-approach h2 { font-size: clamp(28px, 4vw, 40px); }
	.pstn-about-approach__media { max-width: 620px; }
}

@media (max-width: 767px) {
	.pstn-about-approach h2 { margin-top: 12px; font-size: clamp(24px, 6.4vw, 30px); line-height: 1.34; }
	.pstn-about-approach__media { max-width: 100%; }
	/* 모바일에서도 문장 단위 줄바꿈을 유지한다(br 살림). */
	.pstn-about-approach__sub { margin-top: 18px !important; font-size: 14px; line-height: 1.78; }
	.pstn-about-flow__circle { width: 172px; flex-basis: auto; }
	.pstn-about-flow__circle .pstn-about-flow__mark { height: 66px; }
	.pstn-about-flow__mark.is-logo img { width: 90px; }
	.pstn-about-history__closing { margin-top: 36px; padding: 0 18px; }
	.pstn-about-history__closing p { font-size: 24px; }
	.pstn-about-history__closing svg { width: 54px; height: 54px; margin-top: 18px; }
}

/* ── 순환 다이어그램 — 카드(사각형) 제거 ──
   순환 다이어그램의 기본 문법은 노드(원) + 엣지(화살표)다. 카드는 '콘텐츠 블록'용이라
   원 안에 이미지까지 들어온 지금은 [카드 → 원 → 이미지] 3중 액자가 된다.
   색 구분은 카드 배경 대신 원의 얇은 링으로 옮겨 유지한다. */
.pstn-about-flow__node,
.pstn-about-flow__node.is-pstn,
.pstn-about-flow__node.is-pharmacist,
.pstn-about-flow__node.is-customer {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.pstn-about-flow__circle {
	position: relative;
	border: 1.5px solid transparent;
	box-shadow: 0 10px 30px rgba(22, 74, 77, .07);
}

.is-pstn .pstn-about-flow__circle { border-color: rgba(20, 105, 200, .26); }
.is-pharmacist .pstn-about-flow__circle { border-color: rgba(40, 104, 88, .26); }
.is-customer .pstn-about-flow__circle { border-color: rgba(155, 91, 72, .26); }

.pstn-about-flow__circle .pstn-about-flow__mark {
	width: 100%;
	height: 100%;
}

.pstn-about-flow__mark img {
	max-width: 72%;
	max-height: 72%;
}

.pstn-about-flow__mark.is-logo img {
	width: min(72%, 112px);
}

.is-pharmacist .pstn-about-flow__mark {
	position: absolute;
	top: 26px;
	right: 0;
	left: 0;
	height: 94px;
}

.is-pharmacist .pstn-about-flow__mark img {
	max-width: 70%;
	max-height: 100%;
}

.pstn-about-flow__circle .pstn-about-flow__caption {
	position: absolute;
	right: 16px;
	bottom: 24px;
	left: 16px;
	max-width: none;
	margin: 0;
	color: #66736f;
	font-size: 13px;
	line-height: 1.35;
	text-align: center;
	word-break: keep-all;
}

.pstn-about-flow__role {
	position: absolute;
	left: 50%;
	bottom: -17px;
	min-width: 100px;
	min-height: 34px;
	padding: 5px 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateX(-50%);
	border-radius: 999px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
}

.is-pharmacist .pstn-about-flow__role { background: #365f50; }
.is-customer .pstn-about-flow__role { background: #a76e50; }

/* 태블릿/모바일 — 약사 원이 작아져 absolute 배치(일러스트 top 26/94px, 캡션 bottom 24)가
   서로 겹친다. 정적 플렉스 흐름으로 되돌려 겹침을 원천 차단한다. */
@media (max-width: 1023px) {
	.is-pharmacist .pstn-about-flow__mark {
		position: static;
		height: 72px;
	}
	.pstn-about-flow__circle .pstn-about-flow__caption {
		position: static;
		right: auto;
		bottom: auto;
		left: auto;
		margin-top: 9px;
	}
}

@media (max-width: 767px) {
	.pstn-about-flow__node,
	.pstn-about-flow__node.is-pstn,
	.pstn-about-flow__node.is-pharmacist,
	.pstn-about-flow__node.is-customer {
		padding: 0;
		border-radius: 0;
	}
}

/* 원형 아래 카피가 한 문장으로 짧아져 본문 톤을 조금 키운다. */
.pstn-about-flow__body b {
	display: block;
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.55;
	letter-spacing: -.03em;
	word-break: keep-all;
}

/* ── OUR APPROACH 하단 — /brand의 Ver 안내를 카드로 이식 ──
   섹션에 녹아들도록 테두리·라운드·그림자는 이 페이지의 기존 카드 관용구
   (.pstn-about-system__principles article)를 그대로 따른다. */
.pstn-about-version {
	margin-top: clamp(54px, 5.4vw, 82px);
	padding: clamp(26px, 2.8vw, 40px) clamp(24px, 3vw, 46px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(22px, 3vw, 54px);
	align-items: center;
	border: 1px solid #dce6ee;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(18, 55, 84, .055);
}

.pstn-about-version__copy { min-width: 0; }

.pstn-about-version h3 {
	display: flex;
	align-items: center;
	gap: 11px;
	color: #132333;
	font-size: clamp(18px, 1.65vw, 23px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.035em;
	word-break: keep-all;
}

.pstn-about-version__mark {
	width: 27px;
	height: 27px;
	flex: 0 0 27px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pstn-blue);
	color: #fff;
	font-family: var(--pstn-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.pstn-about-version p {
	margin-top: 15px !important;
	color: var(--pstn-gray);
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.82;
	letter-spacing: -.02em;
	word-break: keep-all;
}

.pstn-about-version__visual img {
	width: clamp(176px, 17.5vw, 250px);
	height: auto;
}

@media (max-width: 767px) {
	.pstn-about-version {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 24px 20px;
		border-radius: 18px;
	}
	.pstn-about-version h3 { font-size: 17px; gap: 9px; }
	.pstn-about-version__mark { width: 24px; height: 24px; flex-basis: 24px; font-size: 13px; }
	/* 모바일에서도 문장 단위 줄바꿈 유지(br 살림). */
	.pstn-about-version p { margin-top: 12px !important; font-size: 14px; line-height: 1.76; }
	.pstn-about-version__visual { display: flex; justify-content: center; }
	.pstn-about-version__visual img { width: 200px; }
}

/* ── 나눔의 선순환 GIVER 인포그래픽 마감 ──
   기존 .pstn-about-givers 컴포넌트를 그대로 쓰고 질감만 다듬는다.
   (width/margin/transform 등 반응형 규칙은 건드리지 않음) */
.pstn-about-giver.is-primary {
	background: radial-gradient(circle at 34% 26%, #3f92f2 0%, #1469c8 50%, #0d55a8 100%);
	box-shadow: 0 26px 58px rgba(20, 105, 200, .26), 0 0 0 8px rgba(20, 105, 200, .06);
}

.pstn-about-giver.is-primary p { color: rgba(255, 255, 255, .9); }

/* 겹치는 원이 유리처럼 비쳐 '번짐'이 읽히게 한다. */
.pstn-about-giver:not(.is-primary) {
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* GIVER > MATCHER > TAKER 순으로 겹쳐 왼쪽이 앞에 오도록. */
.pstn-about-giver:nth-child(2) { z-index: 1; }

/* 은근한 강조 — 형광펜을 브랜드 민트로 바꾼 밑줄형 하이라이트. */
.pstn-about em.pstn-mark {
	font-style: normal;
	font-weight: 600;
	color: #15202b;
	background: linear-gradient(transparent 56%, rgba(80, 195, 181, .32) 56%);
}

/* ── PSTN의 접근 — 좌 카피 / 중앙 인체도 / 우 문답 ── */
.pstn-about-approach-sys { background: #f7fafc; }

.pstn-about-sys {
	margin-top: clamp(52px, 5.4vw, 82px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(230px, 24vw, 330px) minmax(0, 1fr);
	gap: clamp(20px, 2.8vw, 46px);
	align-items: center;
}

.pstn-about-sys__panel {
	height: 100%;
	padding: clamp(24px, 2.4vw, 34px);
	display: flex;
	flex-direction: column;
	/* 두 패널의 첫 줄을 같은 높이에서 시작시킨다(가운데 정렬이면 글 양이 다른 쪽이 내려간다). */
	justify-content: flex-start;
	border: 1px solid #dce6ee;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(18, 55, 84, .05);
}

.pstn-about-sys__panel h3 {
	padding-bottom: 14px;
	border-bottom: 1px solid #e4ebf1;
	color: #132333;
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 700;
	letter-spacing: -.035em;
}

.pstn-about-sys__panel p {
	margin-top: 16px !important;
	color: #55636d;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.82;
	letter-spacing: -.02em;
	word-break: keep-all;
}

.pstn-about-sys__list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.pstn-about-sys__list li {
	position: relative;
	padding-left: 16px;
	color: #45525b;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.75;
	letter-spacing: -.02em;
	word-break: keep-all;
}

.pstn-about-sys__list li + li { margin-top: 7px; }

.pstn-about-sys__list li::before {
	position: absolute;
	top: .72em;
	left: 2px;
	width: 5px;
	height: 5px;
	content: "";
	border-radius: 50%;
	background: var(--pstn-blue);
}

.pstn-about-sys__panel .pstn-about-sys__note {
	margin-top: 18px !important;
	padding-top: 16px;
	border-top: 1px dashed #dfe7ee;
	color: var(--pstn-deep-blue);
	font-weight: 600;
}

.pstn-about-sys__figure {
	min-width: 0;
	align-self: center;
}

/* 좌측 패널은 오른쪽(질문 목록)보다 글이 짧다. 줄간격을 넓혀 좌우 기둥의 무게를 맞춘다. */
@media (min-width: 1024px) {
	.pstn-about-sys__panel:not(.is-question) p { line-height: 2.15; }
}

.pstn-about-sys__figure img { width: 100%; height: auto; }

.pstn-about-sys__caption {
	position: relative;
	left: 50%;
	width: max-content;
	max-width: calc(100vw - 30px);
	margin-top: 8px;
	transform: translateX(-50%);
	color: #8a94a3;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -.025em;
	text-align: center;
	white-space: nowrap;
}

/* ── PSTN과 약국 ── */
.pstn-about-pharmacy__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(30px, 4.4vw, 76px);
	align-items: center;
}

.pstn-about-pharmacy__copy { min-width: 0; }

.pstn-about-pharmacy__copy h2 {
	margin-top: 18px;
	color: #111b24;
	font-family: var(--pstn-font);
	font-size: var(--pstn-type-section-max, clamp(34px, 3vw, 46px));
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.045em;
	word-break: keep-all;
}

.pstn-about-pharmacy__copy p {
	margin-top: clamp(18px, 1.8vw, 26px) !important;
	color: var(--pstn-gray);
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.88;
	letter-spacing: -.02em;
	word-break: keep-all;
}

/* p:first-of-type은 본문 첫 문단이 아니라 eyebrow(<p>)에 걸려서, 본문 블록 위에
   34px 빈 공간을 만들고 있었다(이미지가 그만큼 위로 떠 보이던 원인).
   원래 의도대로 '제목 다음 첫 문단'에만 여백을 준다. */
.pstn-about-pharmacy__copy > .pstn-about-kicker { margin-top: 0 !important; }
.pstn-about-pharmacy__copy h2 + p { margin-top: clamp(24px, 2.4vw, 34px) !important; }

.pstn-about-pharmacy__figure { min-width: 0; justify-self: center; }
.pstn-about-pharmacy__figure img { width: 100%; max-width: 420px; height: auto; }

/* PC에서는 이미지의 위/아래 라인을 좌측 본문 블록의 위/아래에 정확히 맞춘다.
   이미지를 absolute로 빼내 그리드 '행 높이' 계산에서 제외하는 게 핵심이다. 그렇지 않으면
   본문이 짧은 넓은 화면에서 이미지가 행 높이를 밀어 올려 본문보다 위아래로 삐져나온다.
   본문이 칼럼 폭보다 길어지는 1280px 미만은 원래의 가운데 정렬을 그대로 쓴다. */
@media (min-width: 1280px) {
	.pstn-about-pharmacy__grid { align-items: stretch; }

	/* 선택자를 한 단계 올린다. 위쪽의 `.pstn-about figure { margin: 0 }`이 더 구체적이라
	   클래스 하나짜리 규칙으로는 margin이 먹지 않는다. */
	.pstn-about-pharmacy__grid .pstn-about-pharmacy__figure {
		position: relative;
		/* 첫 줄(eyebrow)이 대문자라 선택 상자보다 글자가 8px 아래에서 시작한다.
		   이미지 윗선을 '보이는 글자' 윗선에 맞추기 위해 그만큼 내린다.
		   stretch 상태라 위만 내려가고 아래 끝선은 그대로다. */
		margin: 8px 0 0;
		justify-self: stretch;
		min-height: 0;
	}

	.pstn-about-pharmacy__figure picture {
		position: absolute;
		inset: 0;
		display: block;
	}

	.pstn-about-pharmacy__figure img {
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: contain;
		/* 세로는 본문 높이에 맞고 가로는 남으므로, 남는 폭을 왼쪽에 두고
		   이미지를 컨테이너 오른쪽 끝선에 붙인다. */
		object-position: right center;
	}
}

@media (max-width: 1023px) {
	.pstn-about-sys {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 26px;
	}
	/* 인체도는 두 패널 위에 가로로 눕히지 않고 첫 줄 전체를 쓴다. */
	.pstn-about-sys__figure { grid-column: 1 / -1; order: -1; justify-self: center; max-width: 250px; }
}

@media (max-width: 767px) {
	.pstn-about-sys {
		margin-top: 40px;
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
	.pstn-about-sys__figure { max-width: 210px; }
	.pstn-about-sys__panel { padding: 22px 18px; border-radius: 16px; }
	.pstn-about-sys__panel h3 { font-size: 16px; padding-bottom: 12px; }
	.pstn-about-sys__panel p { margin-top: 13px !important; font-size: 13px; line-height: 1.78; }
	.pstn-about-sys__list li { font-size: 13px; }
	.pstn-about-pharmacy__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.pstn-about-pharmacy__copy h2 { margin-top: 12px; font-size: clamp(25px, 6.6vw, 32px); line-height: 1.3; }
	.pstn-about-pharmacy__copy p { margin-top: 15px !important; font-size: 14px; line-height: 1.8; }
	.pstn-about-pharmacy__copy p br { display: none; }
	.pstn-about-pharmacy__figure img { max-width: 300px; }
}

/* ── /about 히어로 — 모바일에서도 카피의 줄바꿈을 유지 ──
   줄바꿈이 카피 자체의 일부라 감추지 않는다. 대신 세 번째 줄이 한 줄에 들어가도록
   이 히어로에 한해 글자 크기를 낮춘다. */
@media (max-width: 767px) {
	.pstn-about-hero--study .pstn-about-hero__copy h1 br { display: inline; }

	.pstn-about-hero--study .pstn-about-hero__copy h1 {
		/* 메인 카피가 2줄(가장 긴 줄 약 11em)로 짧아져 크기를 되돌린다. */
		font-size: clamp(24px, 7.6vw, 38px);
		line-height: 1.28;
	}
}

/* 초광폭 화면에서도 콘텐츠 사이의 리듬이 과도하게 벌어지지 않게 한다. */
@media (min-width: 1921px) {
	.pstn-about-section { padding-block: 96px; }
	.pstn-about-philosophy__grid { margin-top: 64px; }
	.pstn-about-philosophy__photo { margin-top: 72px !important; }
	.pstn-about-timeline { margin-top: 64px !important; }
	.pstn-about-timeline li,
	.pstn-about-timeline__rail { min-height: 150px; }
	.pstn-about-history__closing { margin-top: 48px; }
}