@charset "utf-8";
/* ==================================================================
* sub_about.css - 지역과 인재 소개(about) 폴더 전용 스타일
* about 폴더의 모든 페이지 스타일을 이 한 파일에서 함께 관리한다.
*
* vision.php 사명과 비전 : Section Head / intro / mission / objective / vision / value
* focus.php 활동 분야 : focus-*
* history.php 걸어온 길 : history-*
*
* main.css 와는 별개 파일이다. (메인 수정이 이 페이지들에 영향을 주지 않도록)
* ================================================================== */
/* ==================================================================
* Reveal 초기 숨김 (스크롤 등장 모션)
*
* sub_about.js 가 에 .reveal-ready 를 붙인 직후 이 블록이 적용되어
* first paint 부터 대상을 숨긴다. JS 가 화면이 그려진 뒤에 opacity:0 을 넣으면
* 보이던 콘텐츠가 사라졌다 다시 나타나 새로고침 때 버벅이는 것처럼 보인다.
*
* · 값(opacity / translateY)은 template.css 의 .reveal 과 반드시 같게 유지
* · 셀렉터 목록은 sub_about.js 의 SELECTOR 와 반드시 같게 유지
* · .is-shown 이 붙으면 해제되고, .reveal 의 transition 이 등장을 재생한다
* ================================================================== */
@media (prefers-reduced-motion: no-preference) {
.reveal-ready .intro:not(.is-shown),
.reveal-ready .mission__quote:not(.is-shown),
.reveal-ready .sec-head:not(.is-shown),
.reveal-ready .objective__item:not(.is-shown),
.reveal-ready .vision__slogan:not(.is-shown),
.reveal-ready .vision__sub:not(.is-shown),
.reveal-ready .vision__item:not(.is-shown),
.reveal-ready .value__item:not(.is-shown),
.reveal-ready .focus-guide:not(.is-shown),
.reveal-ready .focus-guide__methods:not(.is-shown),
.reveal-ready .focus-nav:not(.is-shown),
.reveal-ready .focus-block:not(.is-shown),
.reveal-ready .history-profile:not(.is-shown),
.reveal-ready .history-item:not(.is-shown) {
opacity: 0;
transform: translateY(28px);
}
}
/* ==================================================================
* Section Head
* 페이지별로 css 를 독립 관리하므로 main.css / intro.css 에도
* 같은 규칙이 각각 들어 있다. 수정 시 3개 파일을 함께 맞춘다.
* ================================================================== */
.sec-head { margin-bottom: 48px; text-align: center; }
.sec-head__en {
font-family: var(--font-en);
font-size: 13px; font-weight: 700;
letter-spacing: .18em;
color: var(--c-accent);
}
.sec-head__ko {
font-size: clamp(26px, 3.4vw, 38px);
font-weight: 800;
line-height: 1.3;
color: var(--c-ink);
letter-spacing: -.035em;
}
.sec-head__desc { margin-top: 14px; color: var(--c-sub); }
/* 어두운 배경 섹션 (사명 / 비전) */
.sec-head--light .sec-head__ko { color: #fff; }
.sec-head--light .sec-head__en { color: var(--c-accent); }
/* ==================================================================
* Section 1. 사이트 소개
* ================================================================== */
.intro {
padding: 110px 0 100px;
text-align: center;
}
.intro__eyebrow {
font-family: var(--font-en);
font-size: 12px; font-weight: 700; letter-spacing: .2em;
color: var(--c-accent);
margin-bottom: 16px;
}
.intro__title {
font-size: clamp(25px, 3.6vw, 40px);
font-weight: 800;
color: var(--c-ink);
margin-bottom: 26px;
}
.intro__desc {
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.65;
color: var(--c-body);
}
.intro__desc strong { color: var(--c-primary); }
.intro__desc b {
font-weight: 700;
color: var(--c-primary);
background: linear-gradient(transparent 62%, var(--c-accent-soft) 62%);
padding: 0 2px;
}
.intro__note {
display: inline-block;
margin-top: 38px;
padding: 14px 26px;
font-size: 14.5px;
color: var(--c-sub);
background: var(--c-bg-soft);
border-radius: 999px;
}
.intro__note em { font-weight: 700; color: var(--c-primary); }
/* ==================================================================
* Section 2. 사명 Mission
* ================================================================== */
.mission {
padding: 96px 0 100px;
text-align: center;
background:
radial-gradient(120% 140% at 20% 0%, #14607D 0%, transparent 55%),
radial-gradient(120% 140% at 100% 100%, #10506A 0%, transparent 50%),
var(--c-primary-dark);
}
.mission__quote {
font-size: clamp(21px, 2.9vw, 33px);
font-weight: 500;
line-height: 1.45;
letter-spacing: -.015em;
color: rgba(255, 255, 255, .9);
}
.mission__quote b { font-weight: 800; color: var(--c-accent); }
/* ==================================================================
* Section 3. 핵심목표 Core Objective
* ================================================================== */
.objective { padding: 110px 0; }
.objective__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.objective__item {
position: relative;
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.objective__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.objective__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.objective__thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .7s var(--ease);
}
.objective__item:hover .objective__thumb img { transform: scale(1.06); }
.objective__body { position: relative; padding: 34px 34px 38px; }
.objective__no {
display: block;
font-family: var(--font-en);
font-size: 13px; font-weight: 800; letter-spacing: .1em;
color: var(--c-accent);
margin-bottom: 8px;
}
.objective__title {
font-size: 25px; font-weight: 800;
letter-spacing: -.04em;
color: var(--c-ink);
margin-bottom: 12px;
}
.objective__desc { font-size: 16px; color: var(--c-sub); }
/* ==================================================================
* Section 4. 비전 Vision
* ================================================================== */
.vision {
padding: 110px 0;
text-align: center;
color: #fff;
background:
linear-gradient(150deg, rgba(14, 76, 99, .96) 0%, rgba(8, 48, 63, .97) 100%);
}
.vision__slogan {
margin-bottom: 20px;
font-size: clamp(21px, 4vw, 34px);
letter-spacing: -.03em;
}
.vision__slogan span {
font-weight: 500;
color: rgba(255, 255, 255, .74);
}
.vision__slogan em {
font-weight: 700;
line-height: 1.25;
color: #fff;
}
.vision__slogan em::after {
content: '';
display: block;
width: 54px; height: 3px;
margin: 16px auto 0;
border-radius: 3px;
background: var(--c-accent);
}
.vision__sub {
color: rgba(255, 255, 255, .6);
margin-bottom: 26px;
}
.vision__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.vision__item {
padding: 42px 34px 44px;
border-radius: var(--radius);
background: rgba(255, 255, 255, .06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.vision__item:hover { background: rgba(255, 255, 255, .1); transform: translateY(-5px); }
.vision__en {
font-family: var(--font-en);
font-size: 12px; font-weight: 700; letter-spacing: .2em;
color: var(--c-accent);
margin-bottom: 10px;
}
.vision__label {
font-size: 28px; font-weight: 800;
color: #fff;
margin-bottom: 14px;
}
.vision__desc { color: rgba(255, 255, 255, .74); }
/* ==================================================================
* Section 5. 핵심가치 Core Value
* ================================================================== */
.value { padding: 110px 0; background: var(--c-bg-soft); }
.value__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.value__item { text-align: center; }
.value__thumb {
position: relative;
aspect-ratio: 4 / 3;
margin-bottom: 24px;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.value__thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .7s var(--ease);
}
.value__item:hover .value__thumb img { transform: scale(1.07); }
.value__thumb::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(8, 48, 63, .55) 0%, rgba(8, 48, 63, .05) 60%);
}
.value__en {
position: absolute; left: 22px; bottom: 18px;
z-index: 2;
font-family: var(--font-en);
font-size: 12px; font-weight: 700; letter-spacing: .2em;
color: rgba(255, 255, 255, .92);
}
.value__title {
font-size: 24px; font-weight: 800;
letter-spacing: -.04em;
color: var(--c-ink);
margin-bottom: 10px;
}
.value__desc { color: var(--c-sub); }
/* ==================================================================
* Responsive
* ================================================================== */
@media (max-width: 1024px) {
.objective { padding: 90px 0; }
.vision, .value { padding: 90px 0; }
}
@media (max-width: 860px) {
.objective__list,
.vision__list { grid-template-columns: 1fr; }
.value__list { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 640px) {
.intro { padding: 76px 0 68px; }
.intro__desc br { display: none; }
.mission { padding: 70px 0 74px; }
.objective, .vision, .value { padding: 70px 0; }
.objective__body { padding: 26px 24px 30px; }
.vision__item { padding: 32px 26px 34px; }
.sec-head { margin-bottom: 34px; }
}
/* ==================================================================
* ==================================================================
* focus.php - 활동 분야
* ==================================================================
* ================================================================== */
/* ==================================================================
* Section 1. 활동 방법 × 활동 분야
* ================================================================== */
.focus-guide { padding: 100px 0 90px; }
.focus-guide__row {
display: flex; align-items: flex-start;
gap: 24px;
}
.focus-guide__label {
flex: none;
width: 92px;
font-size: 20px; font-weight: 700;
color: var(--c-primary);
}
/* 라벨 앞 짧은 선 */
.focus-guide__label::after {
content: '';
display: block;
width: 30px; height: 2px;
margin-bottom: 10px;
background: var(--c-accent);
margin-top: 6px;
}
/* ---------- 활동 방법 (칩) ----------
Bootstrap row / col 을 쓴다. 칸 사이 간격은 col 의 좌우 padding(15px)이 만들고,
row 의 음수 마진이 그만큼 상쇄해 주므로 좌우 끝이 컨테이너에 딱 맞는다.
배경은 col 자체가 아니라 안쪽 span 에 준다. (col 에 주면 칸끼리 맞붙음) */
.focus-guide__methods { flex: 1; }
/* 줄바꿈될 때의 세로 간격 */
.focus-guide__methods > li { margin-bottom: 16px; }
.focus-method {
height: 100%;
padding: 30px 16px 26px;
border-radius: var(--radius);
text-align: center;
background: var(--c-bg-soft);
box-shadow: inset 0 0 0 1px var(--c-line);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.focus-method:hover {
transform: translateY(-4px);
box-shadow: inset 0 0 0 1px var(--c-accent), var(--shadow-md);
}
.focus-method__icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin: 0 auto 16px;
border-radius: 50%;
color: #fff;
background: #4f8293;
box-shadow: 0 6px 14px rgb(70 116 131 / 35%);
}
/* 채워진(FILL 1) 형태로 써야 원형 배지 안에서 또렷하게 보인다 */
.focus-method__icon .material-symbols-outlined {
font-size: 28px;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.focus-method__name {
margin-bottom: 8px;
font-size: 17px; font-weight: 700;
color: var(--c-ink);
}
.focus-method__desc {
font-size: 13.5px;
line-height: 1.5;
color: var(--c-sub);
word-break: keep-all;
}
/* ---------- 두 축이 조합됨을 표시 ---------- */
.focus-guide__cross {
display: flex; align-items: center; gap: 16px;
margin: 26px 0 26px 116px;
color: var(--c-accent);
}
.focus-guide__cross span {
flex: 1;
height: 1px;
background: var(--c-line);
}
.focus-guide__cross em {
flex: none;
font-size: 20px; font-weight: 700;
}
/* ---------- 활동 분야 (앵커 버튼) ---------- */
.focus-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
flex: 1;
}
.focus-nav a {
display: flex; align-items: center; gap: 12px;
height: 100%;
padding: 18px 20px;
border-radius: var(--radius-sm);
background: #fff;
box-shadow: inset 0 0 0 1.5px var(--c-line);
transition: box-shadow .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.focus-nav a:hover {
transform: translateY(-3px);
background: var(--c-primary);
box-shadow: inset 0 0 0 1.5px var(--c-primary), var(--shadow-md);
}
.focus-nav__no {
flex: none;
font-size: 13px; font-weight: 800; letter-spacing: .06em;
color: var(--c-accent);
}
.focus-nav__name {
flex: 1;
font-size: 15.5px; font-weight: 700;
line-height: 1.4;
color: var(--c-ink);
transition: color .25s var(--ease);
}
.focus-nav svg {
flex: none;
width: 18px; height: 18px;
color: var(--c-sub);
transition: color .25s var(--ease), transform .25s var(--ease);
}
.focus-nav a:hover .focus-nav__name { color: #fff; }
.focus-nav a:hover svg { color: var(--c-accent); transform: translateY(3px); }
/* ==================================================================
* Section 2. 활동 분야별 상세
* ================================================================== */
.focus-list { padding-bottom: 110px; }
.focus-block {
/* 고정 헤더에 제목이 가리지 않도록 앵커 여백 확보 */
scroll-margin-top: 110px;
padding-top: 56px;
}
.focus-block + .focus-block {
margin-top: 56px;
border-top: 1px solid var(--c-line);
}
/* ---------- 분야 제목 ---------- */
.focus-block__head {
display: flex; flex-wrap: wrap; align-items: center;
gap: 14px;
margin-bottom: 28px;
}
.focus-block__no {
display: grid; place-items: center;
flex: none;
width: 44px; height: 44px;
border-radius: 50%;
font-size: 14px; font-weight: 800; letter-spacing: .04em;
color: #fff;
background: var(--c-primary);
}
.focus-block__name {
font-size: clamp(21px, 2.6vw, 28px);
font-weight: 800;
letter-spacing: -.035em;
color: var(--c-ink);
}
.focus-block__methods {
display: flex; flex-wrap: wrap; gap: 6px;
margin-left: auto;
}
.focus-block__methods li {
padding: 6px 14px;
border-radius: 999px;
font-size: 13.5px; font-weight: 600;
color: var(--c-primary);
background: var(--c-accent-soft);
}
/* ---------- 세부 활동 ---------- */
.focus-group + .focus-group { margin-top: 40px; }
.focus-group__desc {
position: relative;
padding-left: 18px;
margin-bottom: 22px;
font-size: 17px;
line-height: 1.6;
color: var(--c-body);
}
.focus-group__desc::before {
content: '';
position: absolute; left: 0; top: .62em;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--c-accent);
}
/* ---------- 사례 사진 ---------- */
.focus-photos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
}
/* 사진이 1장뿐이면 지나치게 커지지 않도록 폭을 제한한다 */
.focus-photos__item:only-child { max-width: 680px; }
.focus-photos__thumb {
aspect-ratio: 4 / 3;
margin-bottom: 14px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--c-bg-soft);
}
.focus-photos__thumb img {
width: 100%; height: 100%;
/* 포스터·화면 캡처가 섞여 있어 잘리지 않도록 contain 으로 담는다 */
object-fit: contain;
}
.focus-photos__caption {
font-size: 14.5px;
line-height: 1.5;
color: var(--c-sub);
text-align: center;
}
/* ==================================================================
* focus.php Responsive
* ================================================================== */
@media (max-width: 1024px) {
.focus-guide { padding: 80px 0 70px; }
.focus-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
.focus-guide__row { flex-direction: column; gap: 14px; }
.focus-guide__label { width: auto; padding-top: 0; }
.focus-guide__cross { margin-left: 0; }
.focus-block__methods { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
.focus-guide { padding: 64px 0 56px; }
.focus-list { padding-bottom: 76px; }
.focus-block { padding-top: 40px; scroll-margin-top: 84px; }
.focus-block + .focus-block { margin-top: 40px; }
.focus-guide__methods > li { margin-bottom: 12px; }
.focus-method { padding: 24px 12px 22px; }
.focus-method__icon { width: 48px; height: 48px; margin-bottom: 12px; }
.focus-method__icon .material-symbols-outlined { font-size: 24px; }
.focus-method__name { font-size: 16px; }
.focus-method__desc { font-size: 13px; }
.focus-nav { grid-template-columns: 1fr; }
.focus-photos { grid-template-columns: 1fr; gap: 22px; }
.focus-group__desc { font-size: 16px; }
}
/* ==================================================================
* ==================================================================
* history.php - 걸어온 길
* ==================================================================
* ================================================================== */
/* ==================================================================
* Section 1. 인물 소개
* ================================================================== */
.history-intro { padding: 100px 0 0; }
/* 위아래 선만 두면 좌우가 비어 보여서, 카드 박스로 감싼다 */
/* xl 미만(가로 전체 폭)에서는 사진과 이름을 가로로 나란히 둔다 */
.history-profile {
display: flex; align-items: center; justify-content: center;
gap: 32px;
padding: 44px 40px;
border-radius: var(--radius);
background:
radial-gradient(150% 150% at 0% 0%, rgb(175 175 175 / 12%) 0%, #adadad00 80%), #fbfbfb;
box-shadow: inset 0 0 0 1px var(--c-line);
}
/* xl 이상 : 왼쪽 좁은 칼럼이므로 세로로 쌓고, 연표가 길어 스크롤을 따라오게 둔다 */
@media (min-width: 1200px) {
.history-profile {
position: sticky; top: 110px;
flex-direction: column;
gap: 18px;
padding: 34px 24px 36px;
text-align: center;
}
.history-profile__photo { width: 150px; }
}
.history-profile__photo {
flex: none;
width: 220px;
aspect-ratio: 4 / 5;
border-radius: var(--radius-sm);
overflow: hidden;
background: #fff;
box-shadow: var(--shadow-sm);
}
.history-profile__photo img {
width: 100%; height: 100%;
object-fit: cover;
}
.history-profile__name {
font-size: clamp(20px, 3vw, 32px);
font-weight: 800;
letter-spacing: .06em;
color: var(--c-ink);
}
.history-profile__role {
margin-top: 8px;
font-size: 15px; font-weight: 600;
color: var(--c-accent);
}
/* ==================================================================
* Section 2. 연표
* ================================================================== */
.history { padding: 0 0 110px; }
.history__list { position: relative; }
/* 세로 축 : 기간 칼럼 오른쪽 끝을 따라 내려간다 */
/* 세로 축 위치 = 기간 칼럼 폭(140) + 점 반경 보정(25 - 5.5) */
.history__list::before {
content: '';
position: absolute; left: 189px; top: 0; bottom: 0;
width: 1px;
background: var(--c-line);
}
.history-item {
position: relative;
display: flex;
gap: 40px;
padding: 54px 0;
}
@media (min-width: 1200px) {
.history__list::after{
content: '';
position: absolute;
left: 0px;
top: 0;
bottom: 0;
right: 0;
height: 1px;
background: var(--c-line);
}
}
.history-item + .history-item { border-top: 1px solid var(--c-line); }
/* ---------- 기간 ---------- */
.history-item__period {
position: relative;
flex: none;
width: 170px;
padding-top: 2px;
}
.history-item__period span {
font-size: 17px; font-weight: 700;
line-height: 1.4;
color: var(--c-primary);
}
/* 세로 축 위의 점 */
.history-item__period::after {
content: '';
position: absolute; right: -25px; top: 8px;
width: 11px; height: 11px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px #fff;
}
/* ---------- 내용 ---------- */
.history-item__body { flex: 1; min-width: 0; }
.history-item__quote {
margin-bottom: 16px;
font-size: clamp(18px, 2vw, 22px);
font-weight: 700;
line-height: 1.5;
letter-spacing: -.03em;
color: var(--c-ink);
}
.history-item__lead {
display: inline-block;
margin-bottom: 20px;
padding: 9px 18px;
border-radius: 999px;
font-size: 15px; font-weight: 600;
color: var(--c-primary);
background: var(--c-accent-soft);
}
.history-item__points li {
position: relative;
padding-left: 16px;
font-size: 16px;
line-height: 1.7;
color: var(--c-sub);
}
.history-item__points li + li { margin-top: 4px; }
.history-item__points li::before {
content: '';
position: absolute; left: 0; top: .72em;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--c-line);
}
/* ---------- 사진 ---------- */
.history-photos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-top: 26px;
}
/* 사진이 1장이면 지나치게 커지지 않도록 폭을 제한 */
.history-photos li:only-child { max-width: 560px; }
.history-photos li {
aspect-ratio: 3 / 2;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--c-bg-soft);
}
.history-photos img {
width: 100%; height: 100%;
object-fit: cover;
}
/* ==================================================================
* history.php Responsive
* ================================================================== */
@media (max-width: 1024px) {
.history-intro { padding-top: 80px; }
.history { padding-bottom: 90px; }
}
@media (max-width: 767.98px) {
/* 좁은 화면에서는 세로 축을 없애고 기간을 위로 올린다 */
.history__list::before { display: none; }
.history-item {
flex-direction: column;
gap: 14px;
padding: 38px 0;
}
.history-item__period { width: auto; padding-top: 0; }
.history-item__period::after { display: none; }
.history-item__period span {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
font-size: 14.5px;
color: #fff;
background: var(--c-primary);
}
}
@media (max-width: 640px) {
.history-intro { padding-top: 64px; }
.history { padding-bottom: 76px; }
.history-profile { gap: 20px; padding: 28px 22px; }
.history-profile__photo { width: 140px; }
.history-item__points li { font-size: 15.5px; }
.history-photos { grid-template-columns: 1fr; gap: 14px; }
}
/* ==================================================================
* CI 소개 (pages/about/ci.php)
* ================================================================== */
.ci { padding-bottom: 110px; }
.ci-item {
display: grid;
grid-template-columns: minmax(0, 525px) minmax(0, 1fr);
gap: 56px;
align-items: center;
padding: 52px 54px;
border-radius: var(--radius);
background: #fff;
box-shadow: inset 0 0 0 1px var(--c-line);
}
.ci-item + .ci-item { margin-top: 32px; }
/* 심벌 — CI 가이드 시트처럼 흰 바탕 + 방안 격자 위에 올린다 */
.ci-item__symbol {
--ci-grid: 15px; /* 격자 한 칸 */
--ci-grid-line: #e9eef2; /* 격자 선 */
position: relative;
display: grid;
place-items: center;
aspect-ratio: 4 / 2.97;
padding: 28px;
border-radius: 14px;
overflow: hidden;
background:
repeating-linear-gradient(to right, var(--ci-grid-line) 0 1px, transparent 1px var(--ci-grid)),
repeating-linear-gradient(to bottom, var(--ci-grid-line) 0 1px, transparent 1px var(--ci-grid)),
#fff;
box-shadow: inset 0 0 0 1px var(--c-line);
}
/* 심벌은 격자·가이드선 위에 (배경이 투명한 PNG 라 격자가 비쳐 보인다) */
.ci-item__symbol img,
.ci-item__symbol .ci-item__noimg { position: relative; z-index: 1; }
.ci-item__symbol img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ci-item__noimg {
display: grid;
place-items: center;
gap: 8px;
color: #a9b3bd;
font-size: 14px;
font-weight: 600;
}
.ci-item__noimg .material-symbols-outlined { font-size: 38px; }
/* C.I / B.I 구분 표시 */
.ci-item__type {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.ci-item__badge {
display: inline-block;
padding: 5px 13px;
border-radius: 999px;
font-family: var(--font-en);
font-size: 13px;
font-weight: 800;
letter-spacing: .06em;
color: #fff;
background: var(--c-primary);
}
.ci-item__type-en {
font-family: var(--font-en);
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
color: var(--c-sub);
}
/* 두 아이덴티티를 색으로도 구분 */
.ci-item--nailsam .ci-item__badge { background: var(--c-accent); }
.ci-item__name {
margin: 0 0 10px;
font-size: 30px;
font-weight: 800;
color: var(--c-ink);
}
.ci-item__lead {
margin-bottom: 24px;
font-size: 17px;
font-weight: 600;
color: var(--c-primary);
}
/* 심벌을 이루는 기호 */
.ci-marks {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 26px;
}
.ci-marks__item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px 12px 12px;
border-radius: 12px;
background: var(--c-bg-soft);
}
.ci-marks__mark {
display: grid;
place-items: center;
flex: none;
width: 42px;
height: 42px;
border-radius: 10px;
background: #fff;
box-shadow: inset 0 0 0 1px var(--c-line);
font-size: 20px;
font-weight: 800;
color: var(--c-primary);
}
.ci-marks__text { display: grid; gap: 1px; min-width: 0; }
.ci-marks__text b { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.ci-marks__text em {
font-style: normal;
font-size: 13.5px;
color: var(--c-sub);
word-break: keep-all;
}
.ci-item__desc {
color: var(--c-sub);
font-size: 16px;
line-height: 1.75;
word-break: keep-all;
}
.ci-item__desc + .ci-item__desc { margin-top: 14px; }
@media (max-width: 1200px) {
.ci { padding: 90px 0; }
/* 본문의 수동 줄바꿈(
) 해제 — 폭이 좁아지면 자연스럽게 흐르도록.
원문은 ci.php 의 desc / desc2 문자열 안 "\n" 이고 nl2br() 이
로 바꾼다.
이 규칙을 지우거나 breakpoint 를 옮기면 줄바꿈 유지 구간이 달라진다. */
.ci-item__desc br { display: none; }
.ci-item { grid-template-columns: 1fr; gap: 34px; padding: 40px 36px; }
.ci-item__symbol { max-width: 420px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
.ci { padding: 70px 0; }
.ci-item { padding: 30px 22px; gap: 26px; }
/* 좁은 화면에서는 격자를 촘촘하게 (칸이 너무 커 보이지 않도록) */
.ci-item__symbol {padding: 20px; }
.ci-item__name { font-size: 25px; }
.ci-item__lead { font-size: 16px; margin-bottom: 20px; }
.ci-marks { gap: 8px; }
.ci-marks__item { width: 100%; }
.ci-item__desc { font-size: 15.5px; }
}