/* =====================================================================
   about.css — 소개 페이지 전용
   시안: Figma node 8:542 (introduce-1920)
   ※ 공통 토큰·유틸(.container/.section/.eyebrow/.sec-title/.btn)은 layout.css
   ※ 값은 시안 실측값 그대로. 임의 라운딩 금지.
   ===================================================================== */

/* =====================================================================
   1) PAGE HERO — 시안 node 8:546 (bg #f7f5ee / pt 110 / pb 80)
   ===================================================================== */
.about-hero {
	background: var(--color-bg-cream);
	padding: 110px 0 80px;
	text-align: center;
}
/* 시안 node 8:548 — 본문 컨테이너가 760px (기본 1120px 아님) */
.about-hero__inner {
	max-width: 760px;
}
/* 시안 — 13.12px Bold / lh 22.304 / ls 2.3616 / #093a24 */
.about-hero__eyebrow {
	font-size: 13.12px;
	font-weight: 700;
	line-height: 22.304px;
	letter-spacing: 2.3616px;
	text-transform: uppercase;
	color: var(--color-primary-deep);
}
/* 시안 — 57.6px Bold / lh 74.88 / ls -0.576 */
.about-hero__title {
	margin-top: 16px;
	font-size: 57.6px;
	line-height: 74.88px;
	font-weight: 700;
	letter-spacing: -0.576px;
	color: var(--color-text);
}
/* 2행("성장을 심습니다.")만 딥그린 */
.about-hero__title .em { color: var(--color-primary-deep); }
/* 시안 — 17.92px / lh 30.464 / #6a7065 / pt 28
   ※ 시안 폭 600px 는 적용하지 않음. 줄바꿈은 마크업의 <br>(시안 개행)로만 통제 */
.about-hero__desc {
	margin: 28px 0 0;
	font-size: 17.92px;
	line-height: 30.464px;
	color: var(--color-text-sub);
}
@media (max-width: 900px) {
	.about-hero { padding: 80px 0 56px; }
	.about-hero__title { font-size: 38px; line-height: 52px; }
	.about-hero__desc { font-size: 16px; line-height: 28px; }
	/* 좁은 화면에서는 시안의 강제 개행이 어색해지므로 흐르게 둔다 */
	.about-hero__desc br { display: none; }
}
@media (max-width: 560px) {
	.about-hero__title { font-size: 30px; line-height: 42px; }
}

/* =====================================================================
   2) WHY PLAN-T — 시안 node 8:557 (bg #edeee6)
   ===================================================================== */
.why {
	position: relative;
	background: var(--color-bg-cream-2);
	overflow: hidden;   /* 워터마크가 우측으로 넘쳐 가로스크롤 만드는 것 차단 */
	text-align: center;
}
/* 시안 node 8:558 — 331x331, x=1589(=1920-331 → 우측 끝에 붙음), y=448.95
   ★ CSS opacity 금지: SVG 내부 path 에 fill-opacity="0.1" 이 이미 있다.
     여기서 또 곱하면 0.01 이 되어 보이지 않는다(Stats 섹션에서 겪은 함정). */
.why__mark {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 331px;
	height: 331px;
	pointer-events: none;
	user-select: none;
}
.why__head { max-width: 760px; }
.why__head .sec-title { letter-spacing: -0.4px; }
/* 시안 폭(640px)은 재현하지 않는다 — 폭을 잠그면 문구가 조금만 길어져도
   원치 않는 줄바꿈이 생긴다. 줄바꿈은 컨테이너 폭에 맡긴다. */
.why__head .sec-desc {
	margin-top: 18px;
	font-size: 16.8px;
	line-height: 28.56px;
}
/* 시안 node 8:573 — 카드 영역은 1120 컨테이너, 헤드에서 48px 아래 */
.why__body { margin-top: 48px; }
.why__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;                 /* 시안: 548 - 524 = 24 */
	text-align: left;
}
/* 시안 node 8:576 — 524x281.9 / r14 / bg #f7f5ee / border #dcdacb / p 41 37 */
.why-card {
	background: var(--color-bg-cream);
	border: 1px solid var(--color-line);
	border-radius: 14px;
	padding: 30px;
}
/* 시안 — 14.4px / lh 24.48 / #6a7065 */
.why-card__order {
	font-size: 14.4px;
	line-height: 24.48px;
	color: var(--color-text-sub);
}
/* 시안 — 17.6px Bold / lh 29.92 / #093a24 / pt 10 */
.why-card__en {
	margin-top: 10px;
	font-size: 17.6px;
	font-weight: 700;
	line-height: 29.92px;
	color: var(--color-primary-deep);
}
/* 시안 — 20.8px SemiBold / lh 31.2 / #1b2620 / pt 8 */
.why-card__title {
	margin-top: 8px;
	font-size: 20.8px;
	font-weight: 600;
	line-height: 31.2px;
	color: var(--color-text);
}
/* 시안 — 15.68px / lh 27.44 / #6a7065 / pt 14 */
.why-card__desc {
	margin-top: 14px;
	font-size: 15.68px;
	line-height: 27.44px;
	color: var(--color-text-sub);
}
/* 시안 node 8:595 — 17.6px / lh 31.68 / #00472a / pt 42, 강조만 Bold */
.why__note {
	margin-top: 42px;
	font-size: 17.6px;
	line-height: 31.68px;
	color: var(--color-primary-dark);
}
.why__note b { font-weight: 700; }
@media (max-width: 1100px) {
	/* 마크가 카드와 겹쳐 읽기 방해되는 지점부터 숨김(장식 요소) */
	.why__mark { display: none; }
}
@media (max-width: 900px) {
	.why__grid { grid-template-columns: 1fr; }
	.why-card { padding: 32px 26px; }
	.why__note { font-size: 16px; line-height: 28px; }
	.why__note br { display: none; }
}

/* =====================================================================
   3) OUR PROMISE — 시안 node 8:596 (bg #1b2620, 다크)
   ===================================================================== */
.promise {
	background: var(--color-text);   /* #1b2620 — 시안값과 동일 */
	text-align: center;
}
.promise__eyebrow { text-align: center; }
/* 시안 — 40px SemiBold / lh 54 / ls -0.4 / 흰색, 2행만 골드
   ※ 시안 폭 780px 는 적용하지 않음. 줄바꿈은 마크업의 <br>(시안 개행)로만 통제 */
.promise__title {
	margin: 16px 0 0;
	font-size: 40px;
	line-height: 54px;
	font-weight: 600;
	letter-spacing: -0.4px;
	color: var(--color-text-on-dark);
}
.promise__title .em { color: var(--color-accent); }
/* 시안 — 16.8px / lh 28.56 / #bdbaae / pt 24
   ※ 시안 폭 680px 는 적용하지 않음: 잠그면 2줄로 강제 줄바꿈됨(실측 2줄→1줄) */
.promise__desc {
	margin: 24px 0 0;
	font-size: 16.8px;
	line-height: 28.56px;
	color: #bdbaae;
}
/* 시안 node 8:607 — 2열, 가운데 1px 골드 그라디언트 구분선 */
.promise__grid {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	margin-top: 56px;
	text-align: left;
}
/* ★ 3개 아이템 모두 위치를 명시한다.
   ::before 는 DOM 상 첫 자식이라, 이것만 grid-column:2 로 두면 자동배치 커서가
   2열을 지나가 버려서 첫 칼럼이 3열에, 둘째 칼럼이 다음 줄 1열에 놓인다
   (2행으로 깨져 계단 모양이 됨 — 실측 rows=154/154, sameRow=false).
   행까지 못박아 자동배치에 의존하지 않게 한다. */
.promise__grid::before {
	content: "";
	grid-row: 1;
	grid-column: 2;
	/* 시안 node 8:616 — 위아래 투명, 중앙 rgba(229,195,85,.6) */
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(229, 195, 85, .6) 50%,
		rgba(0, 0, 0, 0) 100%);
}
.promise__grid > .promise-col:nth-of-type(1) { grid-row: 1; grid-column: 1; }
.promise__grid > .promise-col:nth-of-type(2) { grid-row: 1; grid-column: 3; }
/* 시안 — 카드 내부 패딩 38px */
.promise-col { padding: 38px; }
/* 시안 — 12.48px Bold / lh 21.216 / ls 1.7472 / 골드 */
.promise-col__label {
	font-size: 12.48px;
	font-weight: 700;
	line-height: 21.216px;
	letter-spacing: 1.7472px;
	text-transform: uppercase;
	color: var(--color-accent);
}
/* 시안 — 24px SemiBold / lh 40.8 / 흰색 / pt 16 */
.promise-col__title {
	margin-top: 16px;
	font-size: 24px;
	font-weight: 600;
	line-height: 40.8px;
	color: var(--color-text-on-dark);
}
/* 시안 — 15.68px / lh 26.656 / #bdbaae / pt 14 */
.promise-col__desc {
	margin-top: 14px;
	font-size: 15.68px;
	line-height: 26.656px;
	color: #bdbaae;
}
/* 시안 node 8:626 — bg rgba(255,255,255,.04) / r8 / p 30 34 / pt 50 */
.promise__case {
	margin-top: 50px;
	padding: 30px 34px;
	background: rgba(255, 255, 255, .04);
	border-radius: 8px;
	text-align: left;
}
/* 시안 — 16px / lh 29.6 / #d6d2c6 */
.promise__case p {
	font-size: 16px;
	line-height: 29.6px;
	color: #d6d2c6;
}
/* 시안 node 8:629 — 17.92px / lh 32.256 / 흰색 / pt 36 */
.promise__closing {
	margin-top: 36px;
	font-size: 17.92px;
	line-height: 32.256px;
	color: var(--color-text-on-dark);
}
@media (max-width: 900px) {
	.promise__title { font-size: 30px; line-height: 44px; }
	/* 본문 <br> 은 1920 시안 기준으로 넣은 위치다. 좁은 화면에서는 문장 중간을
	   엉뚱하게 끊으므로 해제하고 자연 줄바꿈에 맡긴다. (제목의 <br> 은 유지) */
	.promise__desc br,
	.promise__case br { display: none; }
	.promise__grid { grid-template-columns: 1fr; margin-top: 40px; }
	/* 1열이 되면 세로 구분선은 의미가 없다 → 가로선으로 대체.
	   데스크톱 규칙이 1행에 못박아 두었으므로, 여기서는 쌓이는 순서
	   (칼럼1 → 구분선 → 칼럼2)로 행을 다시 지정한다. */
	.promise__grid::before {
		grid-row: 2;
		grid-column: 1;
		height: 1px;
		background: linear-gradient(to right,
			rgba(0, 0, 0, 0) 0%,
			rgba(229, 195, 85, .6) 50%,
			rgba(0, 0, 0, 0) 100%);
	}
	.promise__grid > .promise-col:nth-of-type(1) { grid-row: 1; grid-column: 1; }
	.promise__grid > .promise-col:nth-of-type(2) { grid-row: 3; grid-column: 1; }
	.promise-col { padding: 28px 0; }
	.promise__closing { font-size: 16px; line-height: 28px; }
	.promise__closing br { display: none; }
}

/* =====================================================================
   4) NO EXPERIMENTS — 시안 node 8:630 (bg #f7f5ee)
   ===================================================================== */
.noexp {
	background: var(--color-bg-cream);
	text-align: center;
}
/* 시안은 760px 인데 840px 로 넓혔다(실측 근거).
   본문 3행 중 1행("…검증된 회계사·노무사·변호사·변리사 등")이 775px 필요한데
   760px 컨테이너의 내용폭은 712px(= 760 - 좌우 padding 24×2) 뿐이어서
   그 행이 저절로 두 줄로 흘러 3줄이 4줄이 됐다.
   840px → 내용폭 792px 로 1행이 한 줄에 들어간다(여유 17px).
   ※ 이 섹션은 가운데 정렬 텍스트만 있어 폭을 넓혀도 시안 레이아웃이 깨지지 않는다. */
.noexp__inner { max-width: 840px; }
/* 시안 — 16.8px / lh 30.24 / #43463e */
.noexp__desc {
	margin-top: 18px;
	font-size: 16.8px;
	line-height: 30.24px;
	color: #43463e;
}
.noexp__desc + .noexp__desc { margin-top: 14px; }
/* 시안 node 8:641 — pill 태그 5개, gap 10 / pt 26 */
.noexp__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 26px;
	list-style: none;
	padding: 0;
}
/* 시안 — bg #edeee6 / border #dcdacb / r999 / p 9 17 / 14.72px Medium / #00472a */
.noexp__tags li {
	background: var(--color-bg-cream-2);
	border: 1px solid var(--color-line);
	border-radius: 999px;
	padding: 9px 17px;
	font-size: 14.72px;
	font-weight: 500;
	line-height: 25.024px;
	color: var(--color-primary-dark);
}
@media (max-width: 900px) {
	.noexp__desc { font-size: 16px; line-height: 28px; }
	/* 1920 기준 <br> 해제 — 위 promise 와 동일한 이유 */
	.noexp__desc br { display: none; }
}

/* =====================================================================
   5) LONG-TERM PARTNERSHIP — 시안 node 8:652 (bg #093a24)
   ===================================================================== */
.longterm {
	background: var(--color-primary-deep);
	text-align: center;
}
.longterm__inner { text-align: center; }
/* 시안 — 40px SemiBold / lh 54 / 흰색 (시안 폭 700px 은 적용 안 함) */
.longterm__title {
	margin: 16px 0 0;
	font-size: 40px;
	line-height: 54px;
	font-weight: 600;
	color: var(--color-text-on-dark);
}
/* 시안 — 16.8px / lh 28.56 / rgba(243,239,228,.82) / pt 24
   ※ 시안 폭 640px 는 적용하지 않음: 잠그면 3줄로 강제 줄바꿈됨(실측 3줄→2줄) */
.longterm__desc {
	margin: 24px 0 0;
	font-size: 16.8px;
	line-height: 28.56px;
	color: rgba(243, 239, 228, .82);
}
/* 시안 — 20px / lh 34 / 흰색 / pt 40 */
.longterm__closing {
	margin-top: 40px;
	font-size: 20px;
	line-height: 34px;
	color: var(--color-text-on-dark);
}
@media (max-width: 900px) {
	.longterm__title { font-size: 30px; line-height: 44px; }
	.longterm__closing { font-size: 17px; line-height: 30px; }
	/* 1920 기준 <br> 해제 — 위 promise 와 동일한 이유 */
	.longterm__desc br,
	.longterm__closing br { display: none; }
}

/* =====================================================================
   6) REPRESENTATIVE — 시안 node 8:664 (bg #edeee6)
   ===================================================================== */
.rep { background: var(--color-bg-cream-2); }
/* 시안 — 사진 407 / 본문 609.6, 좌우 간격 486.4-(23.5+407)=55.9 */
.rep__inner {
	display: grid;
	grid-template-columns: 407px minmax(0, 609.6px);
	justify-content: space-between;
	gap: 56px;
	align-items: start;
}
/* 시안 node 8:667 — 407x562 / r18 / bg #ded8c7 / border #dcdacb / 사진 383x515 하단정렬 */
.rep__photo {
	width: 407px;
	height: 562px;
	background: #ded8c7;
	border: 1px solid var(--color-line);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 1px;
}
.rep__photo img {
	width: 383px;
	height: 515px;
	object-fit: cover;
	object-position: center top;
	display: block;
}
/* 시안 — 15.2px Bold / lh 25.84 / ls 0.608 / #093a24 */
.rep__label {
	font-size: 15.2px;
	font-weight: 700;
	line-height: 25.84px;
	letter-spacing: 0.608px;
	color: var(--color-primary-deep);
}
/* 시안 — 30.4px Bold / lh 51.68 / #1b2620 / pt 12 */
.rep__name {
	margin-top: 12px;
	font-size: 30.4px;
	font-weight: 700;
	line-height: 51.68px;
	color: var(--color-text);
}
/* 시안 node 8:675 — 골드 원형 불릿 7px, 좌측 padding 20, 항목 py 5 */
.rep__list {
	margin-top: 14px;
	padding: 0;
	list-style: none;
}
.rep__list li {
	position: relative;
	padding: 5px 0 5px 20px;
	font-size: 15.36px;
	line-height: 26.112px;
	color: var(--color-text-sub);
}
.rep__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 7px;
	height: 7px;
	border-radius: 3.5px;
	background: var(--color-accent);
}
/* 시안 — 16px / lh 28 / #6a7065 / pt 18 */
.rep__desc {
	margin-top: 18px;
	font-size: 16px;
	line-height: 28px;
	color: var(--color-text-sub);
}
/* 시안 — 18.4px / lh 31.28 / #093a24 / pt 22 / Regular(400) */
.rep__sign {
	margin-top: 22px;
	font-size: 18.4px;
	font-weight: 400;
	line-height: 31.28px;
	color: var(--color-primary-deep);
}
.rep__cta { margin-top: 26px; }
/* 시안 node 8:703 — bg #093a24 / r999 / p 13 24 / 15.2px SemiBold / 흰색 */
.rep__btn {
	background: var(--color-primary-deep);
	color: #fff;
	padding: 13px 24px;
	font-size: 15.2px;
	line-height: 25.84px;
}
.rep__btn:hover { background: var(--color-primary-dark); }
@media (max-width: 1100px) {
	.rep__inner { grid-template-columns: 340px minmax(0, 1fr); gap: 40px; }
	.rep__photo { width: 340px; height: 470px; }
	.rep__photo img { width: 320px; height: 430px; }
}
@media (max-width: 900px) {
	.rep__inner { grid-template-columns: 1fr; gap: 32px; }
	.rep__photo {
		width: 100%;
		max-width: 340px;
		height: auto;
		aspect-ratio: 407 / 562;
		margin: 0 auto;
	}
	.rep__photo img { width: 94%; height: auto; }
	.rep__name { font-size: 26px; line-height: 40px; }
}