/********** Template CSS **********/ /* 웹폰트는 각 HTML 에서 preconnect + link로 로드 (@import는 지연·차단에 취약) */ /* ----------------------------------------------------------------- Design tokens & base ----------------------------------------------------------------- */ :root { /* Latin/영어 → Inter, 한글 → Noto Sans KR (스택 순서 + 글자별 폰트 매칭) */ --app-font-sans: 'Inter', 'Noto Sans KR', system-ui, sans-serif; --bs-font-sans-serif: var(--app-font-sans); /* * 본문 밴드 고정 간격 (뷰포트·콘텐츠 높이와 무관) — index/about/contact 등 전 페이지 공통 * - page-header(타이틀) 아래 ↔ .page-section 본문 시작 (padding-top) * - 본문 카드 아래 ↔ 푸터 다크 시작: .page-section padding-bottom + .container-fluid.footer padding-top * (둘 다 이 토큰. 마진 붕괴 방지를 위해 푸터는 padding-top 사용) * - 푸터 직전 .page-section: :has(+ .footer.container-fluid) 때 border-bottom 1px transparent */ --layout-band-gap: 30px; --footer-inner-top: 40px; --footer-inner-bottom: 40px; /* 지도는 푸터 하단 기준(남색이 위에서 지도를 덮지 않음). 필요 시만 살짝 위로 당김(px) */ --footer-map-lift: 0px; } html { font-family: var(--app-font-sans); /* 브라우저 기본 16px 기준 약 14px — 본문·rem 기반 컴포넌트 전반 약 2pt↓ */ font-size: 87.5%; } /* body: bootstrap.min.css도 Inter/Noto로 맞춤 — 여기서 상속 확정 */ body { font-family: var(--app-font-sans); } /* 상단 고정 헤더·내비·페이지 타이틀 밴드·다크 푸터: 모든 서브페이지에서 동일 산세리프 상속 보강 */ .sticky-top.bg-white, .navbar, .navbar-brand, .page-header, .container-fluid.footer, .footer.container-fluid { font-family: var(--app-font-sans); } /* 제목: 테마용 bootstrap에 Red Rose가 있었음 → 소스에서 제거했으나 명시 유지 */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--app-font-sans); } /* Bootstrap 컴포넌트·전시 크기 (유틸은 var(--bs-font-sans-serif) = 위 :root) */ .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .form-control, .form-select, textarea.form-control, .modal-content, .card, .list-group-item, .dropdown-menu, .pagination, .breadcrumb, .toast, .alert, .table, .member-card, .seminar-card, .seminar-card-body { font-family: var(--app-font-sans); } .page-section pre, .page-section code, .page-section kbd, .page-section samp, .card pre, .card code, .card kbd, .card samp, .modal-content pre, .modal-content code { font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); } /* ----------------------------------------------------------------- Utilities ----------------------------------------------------------------- */ .back-to-top { position: fixed; display: none; right: 30px; bottom: 30px; z-index: 99; } .fw-medium { font-weight: 500; } /*** Spinner ***/ #spinner { opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999; } #spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; } /*** Button ***/ .btn { transition: .5s; font-weight: 500; font-family: var(--app-font-sans); } .btn-primary, .btn-outline-primary:hover { color: var(--bs-light); } .btn-secondary, .btn-outline-secondary:hover { color: var(--bs-dark); } .btn-square { width: 38px; height: 38px; } .btn-sm-square { width: 32px; height: 32px; } .btn-lg-square { width: 48px; height: 48px; } .btn-square, .btn-sm-square, .btn-lg-square { padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50px; font-weight: normal; } .icon-box-primary, .icon-box-light { position: relative; padding: 0 0 10px 10px; z-index: 1; } .icon-box-primary i, .icon-box-light i { font-size: 56px; line-height: 0; } .icon-box-primary::before, .icon-box-light::before { position: absolute; content: ""; width: 35px; height: 35px; left: 0; bottom: 0; border-radius: 35px; transition: .5s; z-index: -1; } .icon-box-primary::before { background: var(--bs-primary); } .icon-box-light::before { background: var(--bs-light); } /*** Navbar ***/ .sticky-top { top: 0; transition: none; z-index: 1020; } .site-logo { max-height: 96px; width: auto; margin-left: 18px; } .navbar .navbar-nav .nav-link { margin-right: 35px; padding: 20px 0; color: var(--bs-dark); font-size: 16px; font-weight: 500; outline: none; } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: var(--bs-primary); } .navbar .navbar-nav .nav-item.dropdown > .nav-link.dropdown-toggle::after { display: none; } /* 드롭다운: 보더·그림자로 헤더와 구분 (배경은 흰색) */ .navbar .dropdown-menu { background: #fff; border: 1px solid rgba(10, 110, 189, 0.2); border-radius: 8px; box-shadow: 0 2px 4px rgba(3, 27, 78, 0.06), 0 12px 32px rgba(10, 110, 189, 0.14); padding-top: 0.4rem; padding-bottom: 0.4rem; min-width: 11rem; } .navbar .dropdown-item { color: rgba(3, 27, 78, 0.92); border-radius: 6px; margin-left: 0.3rem; margin-right: 0.3rem; padding: 0.45rem 0.75rem; } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background-color: rgba(10, 110, 189, 0.14); color: var(--bs-primary); } .navbar .dropdown-item.active, .navbar .dropdown-item:active { background-color: var(--bs-primary); color: #fff; } @media (max-width: 991.98px) { .site-logo { max-height: 84px; margin-left: 6px; } .navbar .navbar-nav .nav-link { margin-right: 0; padding: 10px 0; } .navbar .navbar-nav { margin-top: 15px; border-top: 1px solid #EEEEEE; } } @media (min-width: 992px) { .sticky-top { margin-top: 0; } .navbar { height: 68px; } .navbar .nav-item .dropdown-menu { display: block; margin-top: 0; left: 0; top: 150%; opacity: 0; visibility: hidden; transition: .5s; } .navbar .nav-item:hover .dropdown-menu { top: 100%; visibility: visible; transition: .5s; opacity: 1; } } /*** Header & carousel ***/ @media (min-width: 992px) { .header-carousel, .page-header { margin-top: 0; } } .carousel-caption { top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; background: rgba(3, 27, 78, .3); z-index: 1; } .carousel-control-prev, .carousel-control-next { width: 15%; } .carousel-control-prev-icon, .carousel-control-next-icon { width: 3.5rem; height: 3.5rem; border-radius: 3.5rem; background-color: var(--bs-primary); border: 15px solid var(--bs-primary); } @media (max-width: 767.98px) { #header-carousel .carousel-item { position: relative; min-height: 450px; } #header-carousel .carousel-item img { position: absolute; width: 100%; height: 100%; object-fit: cover; } } .page-header { margin-bottom: 0 !important; padding: 3rem 0 0 !important; background: linear-gradient(rgba(3, 27, 78, .3), rgba(3, 27, 78, .3)), url(../img/background.png) center center no-repeat; background-size: cover; } .page-header > .container { padding-top: 1.5rem; padding-bottom: 1.5rem; } .page-header .display-2 { margin-bottom: 0 !important; } .page-header .breadcrumb-item + .breadcrumb-item::before { color: var(--bs-white); } .page-header .breadcrumb-item, .page-header .breadcrumb-item a { font-size: 16px; color: var(--bs-white); } /*** Page section spacing (모든 본문 페이지: .container-fluid.page-section 바로 다음 형제가 .container-fluid.footer 일 때) ***/ /* 본문 가로 폭: index / about / contact 모두 .page-section > .container 전폭 (좁은 col 래퍼 없음) */ /* 본문 카드에 wow fadeInUp 금지: translateY는 레이아웃 박스 밖으로만 그려져 푸터와 겹쳐 보일 수 있음 → HTML에서는 fadeIn 사용 */ .page-section { display: flow-root; padding-top: var(--layout-band-gap) !important; padding-bottom: var(--layout-band-gap) !important; } .page-section > .container { padding-top: 0 !important; padding-bottom: 0 !important; } .page-section > .container > :first-child { margin-top: 0 !important; } /* team: 제목이 .container-fluid 안에 있어도 About 등과 동일한 컨테이너 여백 */ .page-section > .container-fluid.container-team > .container { padding-top: 0 !important; padding-bottom: 0 !important; } .page-section > .container-fluid.container-team > .container > :first-child { margin-top: 0 !important; } /* People: 헤더는 제목 텍스트만(다른 서브페이지와 동일 상단 여백), 탭은 container-team 본문 안으로 */ .page-section.people-landing > .container.people-landing-heading .home-latest-title-block { padding-top: 1.75rem; padding-bottom: 0; } /* 페이지 큰 제목 → 본문(Faculty|Researchers 줄)까지 간격: People 기준으로 통일 */ .page-section .page-hero-title, .page-section.people-landing .people-landing-title { margin-bottom: 0 !important; } .page-section .page-body-after-title { margin-top: 3.5rem !important; } @media (min-width: 992px) { .page-section .page-body-after-title { margin-top: 4.25rem !important; } } .page-section .row:not(.page-body-after-title), .page-section .content-card:not(.page-body-after-title) { margin-top: 0 !important; } /* 마지막 행·카드 하단 마진이 푸터와 형제 마진 붕괴로 간격을 삼키지 않게 */ .page-section > .container > .row:last-child { margin-bottom: 0 !important; } .page-section .content-card:last-child { margin-bottom: 0 !important; } /* 푸터 직전: 형제 마진 붕괴·서브픽셀 착시 줄이기 (레이아웃 1px, 시각적 투명) */ .page-section:has(+ .footer.container-fluid) { border-bottom: 1px solid transparent; } /* * WOW fadeInUp은 translateY(100%)로 “그리기만” 움직임 → 레이아웃 박스 높이는 그대로라 * 본문은 아래로 치우쳐 보이는데 푸터는 원래 위치에 남아 “겹침”으로 보일 수 있음. * page-section 안에서는 opacity만 바꾸는 fadeIn으로 통일(!important로 WOW 인라인 animation-name 덮음). */ .page-section .wow.fadeInUp.animated { animation-name: fadeIn !important; } /* Contact: About 과 동일 — col 바로 아래 자식만 두고 2열은 Grid (중첩 row 거터/음수마진 제거) */ .contact-page-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 992px) { .contact-page-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 991.98px) { :root { --footer-inner-bottom: 28px; } } /*** About ***/ .about-fact { width: 220px; height: 220px; box-shadow: 0 0 30px rgba(0, 0, 0, .1); } @media (min-width: 576px) { .about-fact.mt-n130 { margin-top: -130px; } } /*** Service ***/ .service-item { position: relative; height: 100%; padding: 45px 30px; background: var(--bs-white); box-shadow: 0 0 45px rgba(0, 0, 0, .05); } .service-item::before { position: absolute; content: ""; width: 100%; height: 0; left: 0; bottom: 0; transition: .5s; background: var(--bs-primary); } .service-item:hover::before { height: 100%; top: 0; } .service-item * { position: relative; transition: .5s; z-index: 1; } .service-item:hover h5, .service-item:hover p { color: var(--bs-white); } .service-item:hover .icon-box-primary::before { background: var(--bs-dark); } .service-item:hover .icon-box-primary i { color: var(--bs-white) !important; } /*** Team ***/ .container-team { position: relative; } .team-item { background: var(--bs-white); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 22px rgba(15, 23, 42, 0.07), 0 1px 4px rgba(15, 23, 42, 0.04); height: 100%; display: flex; flex-direction: column; transition: box-shadow 0.28s ease, transform 0.28s ease; } .team-item:hover { box-shadow: 0 10px 36px rgba(15, 23, 42, 0.11), 0 3px 10px rgba(15, 23, 42, 0.06); transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .team-item { transition: none; } .team-item:hover { transform: none; } } /* 카드 폭 100% · 3:4 사진 영역에 cover로 꽉 채움 (같은 열이면 같은 카드/사진 크기) */ .people-photo-slot { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; flex-shrink: 0; background: #f1f3f5; } .people-photo-slot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; } .people-photo-slot img.people-photo-placeholder { object-fit: contain; object-position: center bottom; padding: 10% 14% 6%; background: linear-gradient(180deg, #e9ecef 0%, #dee2e6 100%); } .team-item .position-relative { flex-shrink: 0; } .people-feature-photo { width: 100%; height: clamp(320px, 38vw, 460px); object-fit: cover; object-position: center top; } .people-feature-photo-center { object-position: center center; } .people-feature-photo-full { object-fit: contain; object-position: center center; background-color: #fff; } /* 디렉터 블록: 본문·그리드와 동일하게 왼쪽 정렬(전체 너비) */ .people-director-group { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } .people-director-feature { --bs-gutter-x: 1.35rem; --bs-gutter-y: 0.75rem; } @media (min-width: 992px) { .people-director-feature { --bs-gutter-x: 1.65rem; } } .people-director-photo-card.team-item { align-self: flex-start; width: 100%; max-width: 100%; height: auto; } /* 디렉터: 모바일은 세로 스택 */ .people-director-feature-grid { display: flex; flex-direction: column; gap: 0.65rem; } @media (min-width: 768px) { /* * 왼쪽 사진이 1~2행을 span → 행 높이 합 = 사진 높이. * 오른쪽은 copy-cell 하나가 같은 두 행을 span → 세로가 사진과 동일. * 사진 열 너비: 아래 team-grid 와 동일 비율 (md 3열=1:2, lg 5열=1:4). */ .people-director-feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; column-gap: var(--bs-gutter-x, 1.35rem); row-gap: 0; align-items: stretch; } .people-director-photo-cell { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; min-width: 0; } .people-director-feature-grid .people-director-photo-cell .people-director-photo-card.team-item { margin-left: 0; margin-right: 0; max-width: 100%; } .people-director-copy-cell { grid-column: 2; grid-row: 1 / -1; align-self: stretch; display: flex; flex-direction: column; min-width: 0; min-height: 0; /* 이름을 아래로 내리고, 이력은 mt:auto로 하단 고정 → 둘 사이 빈칸만 줄어듦 */ padding-top: 2.3rem; box-sizing: border-box; overflow-y: auto; } .people-director-copy-cell .people-director-name { flex-shrink: 0; margin-bottom: 0.35rem; } .people-director-copy-cell .people-director-affiliations { margin-top: auto; flex-shrink: 0; } } @media (min-width: 992px) { .people-director-feature-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 3.92fr); } } .people-director-name { font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 700; line-height: 1.25; color: var(--bs-dark); margin-top: 0; margin-bottom: 0.65rem; } @media (max-width: 767.98px) { .people-director-copy-cell .people-director-name { margin-bottom: 0.65rem; } } /* People 페이지: Faculty / Researchers 그리드 열 비율을 동일하게 고정 (row-cols 보조) */ .page-section.people-landing .container-team .team-grid-compact.team-grid-faculty.row > [class*="col"] { flex: 0 0 auto; } @media (max-width: 767.98px) { .page-section.people-landing .container-team .team-grid-compact.team-grid-faculty.row-cols-2 > [class*="col"] { width: 50%; max-width: 50%; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-section.people-landing .container-team .team-grid-compact.team-grid-faculty.row-cols-md-3 > [class*="col"] { width: 33.333333%; max-width: 33.333333%; } } @media (min-width: 992px) { .page-section.people-landing .container-team .team-grid-compact.team-grid-faculty.row-cols-lg-5 > [class*="col"] { width: 20%; max-width: 20%; } } /* People 그리드: 이름·직함 영역 높이 통일 (긴 직함 때문에 Researcher 쪽만 카드가 더 길어 보이는 현상 완화) */ .page-section.people-landing .container-team .team-grid-compact .team-item > .text-center h5 { font-size: 1.05rem; line-height: 1.3; min-height: calc(1.3em * 2); margin-bottom: 0.35rem !important; } .page-section.people-landing .container-team .team-grid-compact .team-item > .text-center span { font-size: 0.875rem; line-height: 1.35; min-height: calc(1.35em * 2); } /* 같은 행에서 카드 높이 맞춤 · 카드는 열 너비 100% */ .container-team .team-grid-compact > [class*="col-"] { display: flex; } .container-team .team-grid-compact .team-item { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-height: 0; height: 100%; } .container-team .team-grid-compact .team-item > .text-center { flex: 1 1 auto; } .people-director-affiliations { font-size: 0.9rem; line-height: 1.45; color: #495057; } .people-director-affiliations p { margin-bottom: 0.35rem; } .people-director-affiliations p:last-child { margin-bottom: 0; } .people-director-affiliations strong { color: var(--bs-dark); font-weight: 600; } .container-team .team-item > .text-center { padding: 1rem 0.85rem !important; } .team-item .text-center { min-height: 84px; } .team-item .text-center span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 2.8em; } .team-item .team-social { position: absolute; width: 0; height: 100%; top: 0; right: 0; transition: .5s; background: var(--bs-primary); display: flex; align-items: center; justify-content: center; display: none; } .team-item:hover .team-social { width: 0; left: auto; } .team-item .team-social .btn { opacity: 0; transition: .5s; } .team-item:hover .team-social .btn { opacity: 0; } @media (max-width: 991.98px) { .people-feature-photo { height: 360px; } } /*** Contact ***/ @media (min-width: 992px) { .contact-info::after { position: absolute; content: ""; width: 0; height: 100%; top: 0; left: 50%; border-left: 1px dashed rgba(255, 255, 255, .2); } } @media (max-width: 991.98px) { .contact-info::after { position: absolute; content: ""; width: 100%; height: 0; top: 50%; left: 0; border-top: 1px dashed rgba(255, 255, 255, .2); } } .contact-slider-card { border-radius: 16px; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06); background: #fff; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* h-100% 체인 제거: 부모 높이 미정일 때 높이 0·푸터 침범 방지 */ #contactSlideshow { position: relative; width: 100%; min-height: 420px; flex: 1 1 auto; overflow: hidden; } #contactSlideshow .carousel-inner { position: relative; width: 100%; min-height: 420px; overflow: hidden; } #contactSlideshow .carousel-item { min-height: 420px; transition: opacity 1.2s ease-in-out; } .contact-slide-frame { position: relative; width: 100%; min-height: 420px; height: 420px; overflow: hidden; background: #f8f9fa; } .contact-slide-image { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .contact-carousel-control { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.88); color: #0d6efd; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.12); transition: all 0.25s ease; } #contactSlideshow .carousel-control-prev, #contactSlideshow .carousel-control-next { width: 12%; opacity: 1; } .carousel-control-prev:hover .contact-carousel-control, .carousel-control-next:hover .contact-carousel-control { background: #fff; transform: scale(1.06); } @media (max-width: 991.98px) { #contactSlideshow, #contactSlideshow .carousel-inner, #contactSlideshow .carousel-item { min-height: 340px; } .contact-slide-frame { min-height: 340px; height: 340px; } } /*** Footer ***/ /* * 본문↔푸터 사이: (1) .page-section padding-bottom = 분홍 밴드 안 여백 * (2) 푸터 padding-top = 패딩은 margin 과 달리 형제 마진 붕괴에 안 먹혀 겹침 방지에 유리 * margin-top 단독은 붕괴로 사라질 수 있음 — 쓰지 않음. * 지도·그라데이션은 ::before(absolute). */ .container-fluid.footer, .footer.container-fluid { position: relative; clear: both; margin-top: 0 !important; padding-top: var(--layout-band-gap) !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; background-color: var(--bs-dark); color: rgba(255, 255, 255, 0.5); } .container-fluid.footer::before, .footer.container-fluid::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( to bottom, rgba(3, 27, 78, 0) 0%, rgba(3, 27, 78, 0.08) 42%, rgba(3, 27, 78, 0.22) 100% ), url(../img/footer.png); background-position: center top, center calc(100% - var(--footer-map-lift)); background-size: 100% 100%, contain; background-repeat: no-repeat; } @media (min-width: 992px) { .footer::after { position: absolute; content: ""; width: 0; height: 100%; top: 0; left: 50%; border-left: 1px dashed rgba(255, 255, 255, .2); pointer-events: none; } } .footer .btn.btn-link { display: block; margin-bottom: 5px; padding: 0; text-align: left; color: rgba(255, 255, 255, .5); font-weight: normal; text-transform: capitalize; transition: .3s; } .footer .btn.btn-link::before { position: relative; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: rgba(255, 255, 255, .5); margin-right: 10px; } .footer .btn.btn-link:hover { color: var(--bs-primary); letter-spacing: 1px; box-shadow: none; } .copyright { border-top: 1px dashed rgba(255, 255, 255, .2); } .copyright a { color: var(--bs-white); } .copyright a:hover { color: var(--bs-primary); } .footer-inner { position: relative; z-index: 1; padding-top: var(--footer-inner-top); padding-bottom: var(--footer-inner-bottom); } /* ----------------------------------------------------------------- CNAI — cards & feeds ----------------------------------------------------------------- */ .content-card { background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 12px; box-shadow: 0 8px 24px rgba(3, 27, 78, .08); padding: 28px 24px; } /* 정적 본문 카드(conferences 등) 인라인 font-family 제거 — 홈 피드 카드(.update-feed-card) 포함 */ .page-section .content-card, .page-section .content-card * { font-family: var(--app-font-sans) !important; } .page-section .content-card pre, .page-section .content-card code, .page-section .content-card kbd, .page-section .content-card samp { font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace) !important; } /* 홈 9카드: 열마다 동일 높이 — 제목·요약 줄 수 제한 + min-height */ .update-feed-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; min-height: 17.5rem; } .update-feed-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(3, 27, 78, .15); color: inherit; } .update-feed-title { margin-top: 14px; margin-bottom: 10px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.25rem * 1.45 * 3); } .update-feed-summary { margin-bottom: 0; color: #6c757d; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 auto; min-height: calc(1rem * 1.6 * 4); } .date-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(11, 87, 208, .1); color: var(--bs-primary); font-size: 11px; font-weight: 700; } /* flex 카드(.update-feed-card) 안에서는 기본 stretch로 가로로 늘어남 → 내용만큼만 */ .update-feed-card .date-badge { align-self: flex-start; width: fit-content; } .member-card { height: 100%; background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 12px; padding: 18px; box-shadow: 0 6px 16px rgba(3, 27, 78, .07); } .member-card h5, .member-card h6 { margin-bottom: 6px; } .member-card p { color: #6c757d; margin-bottom: 0; font-size: 0.95rem; } /* ----------------------------------------------------------------- CNAI — seminar ----------------------------------------------------------------- */ .seminar-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(3, 27, 78, .08); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; } .seminar-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(3, 27, 78, .15); color: inherit; } .seminar-card-thumb { height: 228px; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .seminar-card-body { padding: 18px 18px 10px; } .seminar-card-title { margin-bottom: 8px; font-size: 1.05rem; line-height: 1.4; } .seminar-card-text { margin-bottom: 0; color: #6c757d; font-size: 0.92rem; line-height: 1.45; } .seminar-card-foot { margin-top: auto; padding: 0 18px 18px; } /* ----------------------------------------------------------------- CNAI — home (Latest at CNAI: seminar grid + news stack) ----------------------------------------------------------------- */ /* 홈 Latest at CNAI / About 등: 그림 없는 페이지 타이틀 블록 */ .home-latest-title-block { padding-top: 1.75rem; } .home-latest-title-block > h2 { margin-top: 0; } .home-latest-title-block > h6 { margin-bottom: 0.35rem; } .home-latest-section .home-panel-head { border-bottom: 1px solid rgba(3, 27, 78, .12); padding-bottom: 12px; } .home-panel-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bs-primary); margin-bottom: 4px; } .home-panel-title { font-weight: 700; color: #0b1933; } .home-latest-section .home-seminar-card .seminar-card-thumb { height: 168px; } .home-latest-section .home-seminar-card-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.05rem * 1.4 * 2); } .home-latest-section .home-seminar-card .seminar-card-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-news-card { display: flex; flex-direction: column; align-items: flex-start; padding: 17px 17px calc(17px + 0.5rem); background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 12px; border-left: 3px solid var(--bs-primary); box-shadow: 0 8px 24px rgba(3, 27, 78, .08); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; } .home-news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(3, 27, 78, .15); color: inherit; } .home-news-card .date-badge { flex-shrink: 0; } .home-news-title { font-size: 0.95rem; font-weight: 700; margin: 10px 0 6px; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-news-excerpt { margin-bottom: 0; font-size: 0.82rem; color: #6c757d; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 991.98px) { .home-latest-section .home-news-stack { margin-top: 0.25rem; } } .seminar-pagination-nav { margin-top: 2.5rem; } /* Seminar list: prev/next — contact 슬라이드와 동일한 원형 chevron 버튼 */ .seminar-pagination-arrows { gap: 2rem; } .seminar-pagination-arrow { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 0; background: transparent; padding: 0; cursor: pointer; color: inherit; } .seminar-pagination-arrow:hover .contact-carousel-control, .seminar-pagination-arrow:focus-visible .contact-carousel-control { background: #fff; transform: scale(1.06); } .seminar-pagination-arrow:focus-visible { outline: none; } .seminar-pagination-arrow:focus-visible .contact-carousel-control { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35); } .seminar-pagination-arrow--disabled { cursor: not-allowed; pointer-events: none; } .seminar-pagination-arrow--disabled .contact-carousel-control { opacity: 0.42; box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.06); } .seminar-detail-shell { max-width: 960px; } .seminar-detail-panel, .seminar-detail-empty { background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 18px; box-shadow: 0 12px 28px rgba(3, 27, 78, .08); } .seminar-detail-panel { padding: 32px; } .seminar-detail-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; } .seminar-detail-back { display: inline-flex; align-items: center; color: var(--bs-primary); font-weight: 600; text-decoration: none; } .seminar-detail-back:hover { color: #0946a6; } .seminar-detail-title { margin-bottom: 24px; line-height: 1.35; } .seminar-detail-cover { margin-bottom: 26px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%); } .seminar-detail-cover img { display: block; width: 100%; max-height: 560px; object-fit: contain; margin: 0 auto; } .seminar-detail-content { color: #4d5a6a; line-height: 1.75; font-size: 1rem; } /* 아임웹 등에서 붙은 인라인 font-family보다 우선 (news/seminar data-news-body·data-seminar-body) */ .seminar-detail-content, .seminar-detail-content * { font-family: var(--app-font-sans) !important; } .seminar-detail-content pre, .seminar-detail-content code, .seminar-detail-content kbd, .seminar-detail-content samp { font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace) !important; } .seminar-detail-content p { margin-bottom: 1rem; } .seminar-detail-content .post-detail-prose p:has(img), .seminar-detail-content .post-detail-prose figure, .seminar-detail-content .post-detail-figure { text-align: center !important; } .seminar-detail-content img { max-width: 100%; height: auto; border-radius: 14px; display: block; margin-left: auto; margin-right: auto; float: none !important; } .seminar-detail-content a { word-break: break-all; } .seminar-detail-content [class*="_comment_body"], .seminar-detail-content .post-detail-prose { margin-top: 0 !important; } .post-detail-prose { color: inherit; line-height: inherit; font-size: inherit; } .post-detail-figure { margin: 1.25rem 0; } .post-detail-figure img { max-width: 100%; height: auto; border-radius: 14px; display: block; margin-left: auto; margin-right: auto; } .detail-attachments { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(3, 27, 78, 0.1); } .detail-attachments-heading { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; color: rgba(3, 27, 78, 0.88); } .detail-attachments-item + .detail-attachments-item { margin-top: 0.5rem; } .detail-attachments-link { display: inline-flex; align-items: center; font-weight: 600; color: #0d6efd; text-decoration: none; word-break: break-all; } .detail-attachments-link:hover { color: #0946a6; text-decoration: underline; } .seminar-detail-empty { padding: 40px 32px; text-align: center; } @media (max-width: 575.98px) { .seminar-card-thumb { height: 200px; } .seminar-detail-panel, .seminar-detail-empty { padding: 24px; } .seminar-detail-top { flex-direction: column; align-items: flex-start; } .seminar-detail-title { font-size: 1.5rem; } } /* ----------------------------------------------------------------- CNAI — people ----------------------------------------------------------------- */ /* People: 홈 패널 구분선 톤 · Faculty|Researchers는 본문 그리드와 동일하게 왼쪽 정렬 */ .people-submenu { display: block; width: 100%; } .page-section.people-landing .people-submenu.people-panel-head, .page-section.research-output-nav-section .people-submenu.people-panel-head { text-align: left; border-bottom: 1px solid rgba(3, 27, 78, .12); padding-bottom: 12px; margin-bottom: 1.5rem; } .page-section.people-landing .people-index-nav, .page-section.research-output-nav-section .people-index-nav { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0.2rem 0.45rem; margin-top: 0; font-weight: 700; color: #0b1933; } .page-section.people-landing .people-index-nav .people-submenu-link, .page-section.research-output-nav-section .people-index-nav .people-submenu-link { display: inline; padding: 0; margin: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; transform: none; font-size: inherit; font-weight: 700; letter-spacing: 0.01em; color: #8b95a0; text-decoration: none; transition: color 0.2s ease; } .page-section.people-landing .people-index-nav .people-submenu-link:focus-visible, .page-section.research-output-nav-section .people-index-nav .people-submenu-link:focus-visible { outline: 2px solid rgba(11, 87, 208, .45); outline-offset: 3px; border-radius: 2px; } .page-section.people-landing .people-index-nav .people-submenu-link.active, .page-section.research-output-nav-section .people-index-nav .people-submenu-link.active, .page-section.people-landing .home-panel-title.people-index-nav .people-submenu-link.active, .page-section.research-output-nav-section .home-panel-title.people-index-nav .people-submenu-link.active { color: var(--bs-primary) !important; background: transparent; box-shadow: none; transform: none; } /* 방문 링크(:visited)가 active·호버 톤을 덮지 않게 (연구 출력 색인 = People Faculty|Researchers와 동일) */ .page-section.people-landing .people-index-nav .people-submenu-link.active:visited, .page-section.research-output-nav-section .people-index-nav .people-submenu-link.active:visited, .page-section.people-landing .home-panel-title.people-index-nav .people-submenu-link.active:visited, .page-section.research-output-nav-section .home-panel-title.people-index-nav .people-submenu-link.active:visited { color: var(--bs-primary) !important; } .page-section.people-landing .people-index-nav .people-submenu-link:hover, .page-section.research-output-nav-section .people-index-nav .people-submenu-link:hover, .page-section.people-landing .home-panel-title.people-index-nav .people-submenu-link:hover, .page-section.research-output-nav-section .home-panel-title.people-index-nav .people-submenu-link:hover { color: var(--bs-primary) !important; } .page-section.people-landing .people-index-sep, .page-section.research-output-nav-section .people-index-sep { color: rgba(3, 27, 78, .22); font-weight: 400; user-select: none; pointer-events: none; } #faculty, #researcher { scroll-margin-top: 140px; } @media (max-width: 575.98px) { .page-section.people-landing .people-submenu.people-panel-head, .page-section.research-output-nav-section .people-submenu.people-panel-head { margin-bottom: 1.25rem; } .page-section.people-landing .people-index-nav.h4, .page-section.research-output-nav-section .people-index-nav.h4 { font-size: 1.1rem; } } /* ----------------------------------------------------------------- CNAI — timeline & research records ----------------------------------------------------------------- */ .timeline-list { position: relative; margin: 0 auto; max-width: 920px; } .timeline-list::before { content: ''; position: absolute; left: 18px; top: 8px; bottom: 8px; width: 2px; background: rgba(11, 87, 208, .25); } .timeline-item { position: relative; margin-left: 52px; margin-bottom: 20px; background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 12px; box-shadow: 0 6px 20px rgba(3, 27, 78, .07); padding: 22px; } .timeline-item::before { content: ''; position: absolute; left: -42px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: var(--bs-primary); box-shadow: 0 0 0 4px rgba(11, 87, 208, .2); } @media (max-width: 767.98px) { .timeline-list::before { left: 12px; } .timeline-item { margin-left: 34px; padding: 18px; } .timeline-item::before { left: -28px; } } /* Journals — structured list (authors / italic title / bold colored venue) */ .content-card .journal-paper-list u { text-decoration: none; } .journal-paper-authors { font-size: 1rem; font-weight: 400; color: rgba(3, 27, 78, 0.92); line-height: 1.5; } .journal-paper-title { font-size: 1rem; line-height: 1.55; } .journal-paper-title em { font-style: italic; color: rgba(3, 27, 78, 0.82); } .journal-paper-venue-line { font-size: 1rem; line-height: 1.5; color: rgba(3, 27, 78, 0.72); } .journal-paper-venue { font-weight: 700; color: #0a6ebd; } .research-record-list { list-style: none; padding-left: 0; margin: 0; } .research-record-item { margin: 0 0 1rem; padding: 0 0 1rem; border-bottom: 1px solid rgba(3, 27, 78, .08); } .research-record-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .research-record-item p { margin: 0; } .research-record-name, .research-record-title, .research-record-meta { line-height: 1.55; } .research-record-title, .research-record-meta { margin-top: .25rem; } .research-record-title { color: #4d5a6a; } .research-record-meta { color: #6c757d; } .research-record-meta strong { color: var(--bs-dark); }