@charset "utf-8";

/* ==========================================================================
   CI 소개 페이지 전용 스타일 (ci.html)
   --------------------------------------------------------------------------
   구성
     1. 심볼 색상의 의미   .symbol / .symbol-img / .symbol-info
     2. 색상 칩            .ci (공통) + .yellow / .orange / .green / .navy
     3. 서체 색상의 의미   .logo / .logo-img / .logo-info
     4. 로고 타입          .ci-type-wrap / .ci-type
     5. 다운로드 버튼      .ci-bu-wrap
     6. 반응형 (768px)
   --------------------------------------------------------------------------
   색상 원칙
     CI 고유색(#fbb517·#f99a1c·#82b52c·#004b88)은 CI 자체를 설명하는 값이므로
     하드코딩을 유지한다. 레이아웃 포인트 컬러가 바뀌어도 따라가면 안 된다.
     반면 배경·버튼 등 장식 요소는 레이아웃 변수(--point-color4)를 사용한다.
     주의: --point-color3 은 좌측메뉴 '글자색'으로 쓰이므로 배경에 쓰지 말 것.
   ========================================================================== */


/* ==========================================================================
   1. 심볼 색상의 의미
   ========================================================================== */

.symbol{
	display:flex;
	gap:35px;
	align-items:center;
	padding:25px 35px;
	border:1px solid #d6d6d6;
	border-radius:1rem;
	box-sizing:border-box;
}
/* 이미지는 내용 크기 유지 (flex:1 을 주면 텍스트와 같은 비율로 늘어남) */
.symbol-img{ flex:0 0 auto; }
.symbol-img img{ width:220px; max-width:100%; display:block; }

.symbol-info{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:30px;              /* .ci-box 사이 간격 — flex 컨테이너에 걸어야 적용됨 */
}

.ci-box{ display:block; padding:0; box-sizing:border-box; }


/* ==========================================================================
   2. 색상 칩
   공통 형태를 .ci 로 묶고 색상만 개별 지정한다. 색을 추가할 때 두 줄이면 된다.
   마크업: <span class="ci yellow">Yellow</span>
   ========================================================================== */

.ci-color{
	font-size:clamp(15px, 2.4vw, 25px);
	font-weight:700;
	padding:0 0 7px;
}
.ci{ padding-left:27px; position:relative; }
.ci:before{
	content:'';
	position:absolute;
	width:20px; height:20px;
	border-radius:6px;
	left:0; top:6px;
}

.yellow{ color:#fbb517; }
.yellow:before{ background:#fbb517; }

.orange{ color:#f99a1c; margin-left:15px; }
.orange:before{ background:#f99a1c; }

.green{ color:#82b52c; }
.green:before{ background:#82b52c; }

.navy{ color:#004b88; }
.navy:before{ background:#004b88; }


/* ==========================================================================
   3. 서체 색상의 의미
   ========================================================================== */

.logo{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:30px;
	padding:65px 35px;
	border:1px solid #d6d6d6;
	border-radius:1rem;
	box-sizing:border-box;
}
.logo-img{ flex:0 0 auto; }
.logo-img img{ width:65%; max-width:100%; display:block; margin:0 auto; }

.logo-info{
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:center;
}


/* ==========================================================================
   4. 로고 타입
   ========================================================================== */

.ci-type-wrap{ display:block; padding:0; margin:0; }

.ci-type{
	display:flex;
	flex-wrap:wrap;
	gap:30px;
	padding:35px;
	margin:0;
	list-style:none;
	background:var(--point-color4, #eef5dc);
	box-sizing:border-box;
}
.ci-type li{
	flex:0 0 calc((100% - 30px) / 2);
	margin:0;
	padding:25px;
	text-align:center;
	background:#fff;
	border-radius:1rem;
	box-sizing:border-box;
}
.ci-type li img{ width:100%; max-width:100%; display:block; }


/* ==========================================================================
   5. 다운로드 버튼
   ========================================================================== */

.ci-bu-wrap{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	padding:0;
	margin:0;
}
.ci-bu-wrap a{
	flex:0 0 calc((100% - 10px) / 2);
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	padding:20px;
	margin:0;
	background:#667b8b;
	border-radius:0.5rem;
	box-sizing:border-box;
	color:#fff;
	font-size:clamp(15px, 2.3vw, 20px);
	font-weight:600;
	text-decoration:none;
	transition:background 0.3s ease;
}
.ci-bu-wrap a:hover{ background:#004b88; color:#fff; text-decoration:none; }
.ci-bu-wrap a i{ font-size:clamp(16px, 2.4vw, 30px); line-height:1; }


/* ==========================================================================
   6. 반응형
   ========================================================================== */

@media (max-width:768px){
	.symbol{ flex-direction:column; gap:25px; padding:25px 20px; }
	.symbol-img img{ width:65%; margin:0 auto; }
	.symbol-info{ text-align:center; gap:20px; }

	.ci:before{ top:2px; }

	.logo{ padding:40px 20px; }

	.ci-type{ padding:20px; gap:15px; }
	.ci-type li{ flex:0 0 100%; padding:20px; }

	.ci-bu-wrap a{ flex:0 0 100%; }
}