﻿@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;600;700&display=swap');

/* ============================================================
   IB토마토 · 회사소개 섹션 공통 디자인 시스템
   scope : .ibc-page  (모든 회사소개 페이지의 콘텐츠 래퍼)
   prefix: .ibc-* (공통)  /  .ibe-* (윤리강령 전용)
   ============================================================ */
.ibc-page {
	--navy: #1a3a5c;
	--blue: #3f7bc1;
	--ink: #2b3138;
	--muted: #6b7280;
	--line: #dde4ed;
	--panel: #f7f9fc;
	color: var(--ink);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

	.ibc-page * {
		box-sizing: border-box;
	}

	.ibc-page img {
		max-width: 100%;
	}

/* ---- 페이지 헤더 ---- */
.ibc-head {
	padding: 4px 0 22px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 34px;
}

.ibc-eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: .18em;
	color: var(--blue);
	font-weight: 700;
	margin-bottom: 12px;
}

	.ibc-eyebrow::before {
		content: "";
		display: inline-block;
		width: 18px;
		height: 2px;
		background: var(--blue);
		vertical-align: middle;
		margin-right: 8px;
	}

.ibc-title {
	font-size: 30px;
	font-weight: 800;
	color: var(--navy);
	margin: 0;
	letter-spacing: -.02em;
}
/* 모바일 페이지(사이드바 없는 단일 컬럼) 래퍼 여백 */
.ibc-m {
	padding: 14px 16px 30px;
}

/* ---- 섹션 / 섹션 제목 ---- */
.ibc-sec {
	margin-bottom: 42px;
}

	.ibc-sec:last-child {
		margin-bottom: 0;
	}

.ibc-sec-h {
	position: relative;
	font-size: 18px;
	font-weight: 800;
	color: var(--navy);
	letter-spacing: -.01em;
	padding-bottom: 11px;
	margin: 0 0 18px;
	border-bottom: 1px solid var(--line);
}

	.ibc-sec-h::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -1px;
		width: 34px;
		height: 2px;
		background: var(--blue);
	}

/* ---- 본문 텍스트 ---- */
.ibc-text {
	color: #3a4047;
	font-size: 15px;
	line-height: 1.95;
	word-break: keep-all;
}

	.ibc-text + .ibc-text {
		margin-top: 14px;
	}

.ibc-sub {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--blue);
	margin: 18px 0 8px;
}

/* ---- 안내 / 콜아웃 박스 ---- */
.ibc-note {
	background: var(--panel);
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	padding: 14px 18px;
	border-radius: 2px;
	font-size: 13.5px;
	color: #55606b;
	line-height: 1.85;
	margin-top: 14px;
	word-break: keep-all;
}

/* ---- 정보 테이블 ---- */
.ibc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-top: 2px;
}

	.ibc-table th {
		background: #f0f4f9;
		color: var(--navy);
		font-weight: 700;
		text-align: left;
		padding: 11px 16px;
		border: 1px solid var(--line);
		width: 140px;
	}

	.ibc-table td {
		padding: 11px 16px;
		border: 1px solid var(--line);
		color: #454b52;
	}

/* ---- 프로세스 플로우 ---- */
.ibc-flow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
}

.ibc-flow-step {
	background: var(--navy);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 3px;
}

.ibc-flow-arrow {
	color: var(--blue);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

/* ---- 연락 / 접수 박스 ---- */
.ibc-contact {
	background: var(--navy);
	color: #dfe7f0;
	border-radius: 4px;
	padding: 18px 22px;
	font-size: 14px;
	line-height: 1.95;
}

	.ibc-contact strong {
		color: #fff;
	}

	.ibc-contact a {
		color: #8fc0f3;
		text-decoration: none;
	}

		.ibc-contact a:hover {
			text-decoration: underline;
		}

/* ---- 불릿 리스트 ---- */
.ibc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

	.ibc-list li {
		position: relative;
		padding: 12px 8px 12px 22px;
		border-bottom: 1px solid var(--line);
		font-size: 14px;
		color: #454b52;
		line-height: 1.7;
		word-break: keep-all;
	}

		.ibc-list li::before {
			content: "";
			position: absolute;
			left: 4px;
			top: 19px;
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background: var(--blue);
		}

/* ---- 빈 상태 ---- */
.ibc-empty {
	background: var(--panel);
	border: 1px dashed #c8d4e1;
	border-radius: 4px;
	text-align: center;
	padding: 46px 20px;
	color: #8a939d;
	font-size: 14px;
	line-height: 1.9;
}

	.ibc-empty .ic {
		display: block;
		font-size: 26px;
		margin-bottom: 10px;
		opacity: .6;
	}

/* ---- 링크 / 버튼 ---- */
.ibc-link {
	color: var(--blue);
	font-weight: 600;
	text-decoration: none;
}

	.ibc-link:hover {
		text-decoration: underline;
	}

.ibc-btn {
	display: inline-block;
	background: var(--navy);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 12px 26px;
	border-radius: 3px;
	letter-spacing: .01em;
	transition: background .15s;
}

	.ibc-btn:hover {
		background: #234c74;
		color: #fff;
	}

	.ibc-btn::before {
		content: "\2193";
		margin-right: 8px;
		font-weight: 700;
	}

/* ---- 미디어 프레임 ---- */
.ibc-frame {
	border: 1px solid var(--line);
	border-radius: 3px;
	overflow: hidden;
	background: #000;
	line-height: 0;
}

	.ibc-frame video {
		width: 100%;
		display: block;
	}

.ibc-imgbox {
	border: 1px solid var(--line);
	border-radius: 3px;
	overflow: hidden;
	background: var(--panel);
	line-height: 0;
}

	.ibc-imgbox img {
		width: 100%;
		display: block;
	}

/* ---- 이미지+텍스트 2단 행 (회사소개) ---- */
.ibc-figrow {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 38px;
	align-items: center;
}

	.ibc-figrow.rev {
		grid-template-columns: 1fr 300px;
	}

		.ibc-figrow.rev .ibc-figrow__img {
			order: 2;
		}

/* ============================================================
   CEO 인사말
   ============================================================ */
.ibc-ceo {
	display: block;
}

.ibc-quote {
	font-family: 'Noto Serif KR',serif;
	font-weight: 600;
	font-size: 25px;
	line-height: 1.58;
	color: var(--blue);
	margin: 0 0 32px;
	padding-left: 22px;
	border-left: 3px solid var(--blue);
	letter-spacing: -.01em;
	word-break: keep-all;
}

.ibc-ceo__body p {
	margin: 0 0 18px;
	color: #3a4047;
	font-size: 15.5px;
	line-height: 1.95;
	word-break: keep-all;
}

	.ibc-ceo__body p:last-child {
		margin-bottom: 0;
	}
/* 우측에 띄우는 서명 + 대표 사진 (본문이 왼쪽으로 흐름 → 공백 제거) */
/* 우측 하단 서명 + 대표 사진 (이름 좌 / 사진 우, 하단 정렬) */
.ibc-ceo__foot {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 26px;
	margin-top: -160px;
}

	.ibc-ceo__foot .nm {
		text-align: right;
		padding-bottom: 10px;
	}

		.ibc-ceo__foot .nm .role {
			display: block;
			font-size: 14px;
			color: var(--muted);
			margin-bottom: 7px;
		}

		.ibc-ceo__foot .nm .name {
			font-size: 22px;
			font-weight: 800;
			color: var(--navy);
			letter-spacing: .02em;
		}

	.ibc-ceo__foot img {
		width: 150px;
		display: block;
		border-radius: 2px;
		background: var(--panel);
	}
/* (모바일 페이지에서 쓰는 좌측 서명 블록) */
.ibc-sign {
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

	.ibc-sign .r {
		display: block;
		font-size: 13.5px;
		color: var(--muted);
		margin-bottom: 3px;
	}

	.ibc-sign .n {
		font-size: 20px;
		font-weight: 800;
		color: var(--navy);
		letter-spacing: .02em;
	}

/* ============================================================
   윤리강령 (탭) — 미니멀 / 텍스트 위주 (장식 최소화)
   ============================================================ */
.ibe-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 38px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 36px;
}

	.ibe-tabs a {
		position: relative;
		padding: 0 0 15px;
		font-size: 16px;
		color: var(--muted);
		text-decoration: none;
		font-weight: 600;
		white-space: nowrap;
	}

		.ibe-tabs a:hover {
			color: var(--navy);
		}

		.ibe-tabs a.tab-on {
			color: var(--navy);
		}

		.ibe-tabs a::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -1px;
			height: 3px;
			background: transparent;
			border-radius: 2px;
		}

		.ibe-tabs a.tab-on::after {
			background: var(--blue);
		}

.ibe-panel {
	display: none;
}

	.ibe-panel.active {
		display: block;
	}

.ibe-date {
	display: block;
	text-align: right;
	font-size: 13px;
	color: var(--muted);
	margin: 0 0 2px;
}

.ibe-lead {
	font-size: 15.5px;
	color: #33414f;
	line-height: 1.95;
	margin: 0 0 4px;
	word-break: keep-all;
}

.ibe-term {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	margin: 32px 0 16px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--line);
}

.ibe-panel > .ibe-term:first-child {
	margin-top: 6px;
}

.ibe-p {
	color: #3a4047;
	font-size: 15px;
	line-height: 1.95;
	margin: 0 0 12px;
	word-break: keep-all;
}

	.ibe-p:last-child {
		margin-bottom: 0;
	}

.ibe-art {
	margin: 0 0 26px;
}

	.ibe-art:last-child {
		margin-bottom: 0;
	}

.ibe-art-t {
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.5;
}

.ibe-art-d {
	color: #454b52;
	font-size: 15px;
	line-height: 1.95;
	margin: 0;
	word-break: keep-all;
}

.ibe-sign {
	display: block;
	text-align: right;
	margin-top: 28px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.7;
}

/* ============================================================
   반응형 (좁은 화면에서 세로 스택)
   ============================================================ */
@media (max-width:760px) {
	.ibc-title {
		font-size: 25px;
	}

	.ibc-quote {
		font-size: 21px;
	}

	.ibc-ceo__foot {
		margin-top: 28px;
		gap: 16px;
	}

		.ibc-ceo__foot img {
			width: 118px;
		}

		.ibc-ceo__foot .nm {
			padding-bottom: 6px;
		}

			.ibc-ceo__foot .nm .name {
				font-size: 19px;
			}

	.ibc-figrow, .ibc-figrow.rev {
		grid-template-columns: 1fr;
		gap: 18px;
	}

		.ibc-figrow.rev .ibc-figrow__img {
			order: 0;
		}

	.ibe-tabs {
		gap: 0 22px;
	}

		.ibe-tabs a {
			font-size: 15px;
		}

	.ibc-flow {
		gap: 6px;
	}

	.ibc-table th {
		width: 90px;
		padding: 9px 11px;
	}

	.ibc-table td {
		padding: 9px 11px;
	}

	.ibc-m {
		padding: 14px 14px 28px;
	}
}
