/* ============================================================ AICL — AI Communication Lab 디자인 시스템 (v2, 2026-09) 안양대학교 정보전기전자공학과 이기호 조교수 연구실 교수님이 만든 index.html 의 색·질감을 따른다. 딥네이비 바탕 + 시안(#4fc3f7) 강조 + 앰버(사람 쪽) 포인트. ★ 기본은 어두운 모드다. :root 가 곧 다크 팔레트이고, 밝은 모드는 :root[data-theme="light"] 에서 값만 갈아끼운다. v1(안양대 Royal Blue) 원본은 design/v1-royalblue/ 에 보관되어 있다. 클래스 이름(.lab-*, .aicl-*)은 v1 과 똑같이 유지했으므로 기존 컴포넌트는 그대로 동작한다. ============================================================ */ :root { /* 강조 — 시안 (AI 쪽) */ --lab-accent: #4fc3f7; --lab-accent-bright: #8fd3f2; --lab-accent-dim: #2b8db8; --lab-accent-ink: #0b1523; /* 네비·푸터 바탕 */ --lab-accent-soft: rgba(79, 195, 247, .10); /* 칩·옅은 배경 */ --lab-accent-border: rgba(79, 195, 247, .28); --lab-on-accent: #08131f; /* accent 바탕 위 글자 */ /* 포인트 — 앰버 (사람 쪽). 절제해서 사용 */ --lab-flame: #f0a04a; --lab-flame-soft: rgba(240, 160, 74, .12); --lab-flame-ink: #ffd9a6; /* 중립 */ --lab-ink: #e8f1f8; --lab-muted: #93a7bd; --lab-muted2: #8195ab; --lab-border: rgba(255, 255, 255, .07); --lab-bg-soft: #122036; /* 표면 */ --lab-page: #0f1b2d; --lab-surface: #152439; --lab-surface2: #1a2d47; --lab-text-soft: #b7c6d6; --lab-card-shadow: rgba(0, 0, 0, .28); --lab-card-shadow-lift: rgba(0, 0, 0, .42); --lab-card-bg: linear-gradient(160deg, #152439 0%, #122036 100%); /* 네비·히어로·푸터는 밝은 모드에서도 딥네이비를 유지한다. 그 위에 올라가는 글자는 테마 변수를 따르면 안 되므로 따로 고정한다. */ --lab-on-dark: #e8f1f8; --lab-on-dark-muted: #a9bdd2; --lab-on-dark-dim: #8399b1; --lab-on-dark-accent: #6cd0ff; --aicl-nav-h: 64px; color-scheme: dark; } /* ── 밝은 모드 ──────────────────────────────────────────── 네비·푸터는 두 모드 모두 딥네이비를 유지한다(로고가 밝은 색이라). */ :root[data-theme="light"] { --lab-accent: #0a6f99; --lab-accent-bright: #075978; --lab-accent-dim: #256E90; --lab-accent-ink: #0b1523; --lab-accent-soft: #E7F4FB; --lab-accent-border: #B5DCEE; --lab-on-accent: #ffffff; --lab-flame: #C2701A; --lab-flame-soft: #FDF2E4; --lab-flame-ink: #8A4E0B; --lab-ink: #12222F; --lab-muted: #556C80; --lab-muted2: #5A6E80; /* 흰 바탕에서 4.5:1 을 넘도록 조금 진하게 */ --lab-border: #DFE7EE; --lab-bg-soft: #F1F6FA; --lab-page: #F7FAFC; --lab-surface: #FFFFFF; --lab-surface2: #F4F8FB; --lab-text-soft: #3F5568; --lab-card-shadow: rgba(16, 24, 40, .05); --lab-card-shadow-lift: rgba(16, 24, 40, .12); --lab-card-bg: #FFFFFF; color-scheme: light; } /* 폰트 — _Layout.cshtml 에서 IBM Plex Sans / KR 을 받아 온다 */ body { font-family: 'IBM Plex Sans', 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--lab-ink); line-height: 1.65; } /* ── 페이지 컨테이너 ── */ .lab { max-width: 1120px; margin: 0 auto; padding: 2.25rem 2rem 4.5rem; color: var(--lab-ink); overflow-wrap: break-word; word-break: break-word; } .lab img { max-width: 100%; height: auto; } .lab a { color: var(--lab-accent); text-decoration: none; } .lab a:hover { color: var(--lab-accent-bright); text-decoration: underline; } /* ── 제목 ── */ .lab-h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .4rem; color: var(--lab-ink); } .lab-h1 + .lab-lead { color: var(--lab-muted); font-size: .9rem; margin: 0 0 1.6rem; } .lab-h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.32rem; font-weight: 600; line-height: 1.25; margin: 2.25rem 0 1.1rem; padding-left: .7rem; border-left: 3px solid var(--lab-accent); color: var(--lab-ink); } /* 페이지 맨 처음이 곧바로 h2 일 때만 위 여백을 줄인다. */ .lab > .lab-h2:first-child { margin-top: .25rem; } .lab-sub-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--lab-accent); margin: 1.1rem 0 .45rem; } .lab-sub-h:first-child { margin-top: 0; } /* ── 카드 ── */ .lab-card { background: var(--lab-card-bg); border: 1px solid var(--lab-border); border-radius: 16px; padding: 1.4rem 1.5rem; box-shadow: 0 1px 2px var(--lab-card-shadow); position: relative; overflow: hidden; } .lab-card.pad-0 { padding: 0; } .lab-card-lift { transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; } .lab-card-lift::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--lab-accent), transparent); opacity: 0; transition: opacity .25s ease; } .lab-card-lift:hover { transform: translateY(-4px); border-color: var(--lab-accent-border); box-shadow: 0 14px 40px var(--lab-card-shadow-lift); } .lab-card-lift:hover::before { opacity: 1; } /* 연구분야 카드 — 좌측 컬러 바 */ .lab-area { border-left: 3px solid var(--lab-accent); height: 100%; } .lab-area-1 { border-left-color: #4fc3f7; } .lab-area-2 { border-left-color: #7dd3fc; } .lab-area-3 { border-left-color: #a78bfa; } .lab-area-4 { border-left-color: #f0a04a; } /* ── 칩 ── */ .lab-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; } .lab-chip { display: inline-block; background: var(--lab-accent-soft); color: var(--lab-accent-bright); border: 1px solid var(--lab-accent-border); border-radius: 999px; padding: .26rem .74rem; font-size: .75rem; font-weight: 500; letter-spacing: .01em; } .lab-chip.gray { background: var(--lab-bg-soft); color: var(--lab-muted); border-color: var(--lab-border); } .lab-chip.flame { background: var(--lab-flame-soft); color: var(--lab-flame-ink); border-color: rgba(240, 160, 74, .3); } a.lab-chip { cursor: pointer; transition: background .15s, color .15s, border-color .15s; } a.lab-chip:hover { background: var(--lab-accent); color: var(--lab-accent-ink); border-color: var(--lab-accent); text-decoration: none; } /* ── 서브 탭 ── */ .lab-tabbar { display: flex; align-items: flex-end; gap: .15rem; border-bottom: 1px solid var(--lab-border); margin: 0 0 1.75rem; } .lab-tabs { display: flex; gap: .3rem; overflow-x: auto; flex: 1 1 auto; scrollbar-width: none; } .lab-tabs::-webkit-scrollbar { display: none; } .lab-tab { flex: 0 0 auto; padding: .6rem 1.05rem; font-size: .88rem; font-weight: 500; color: var(--lab-muted); text-decoration: none; border-radius: 20px 20px 0 0; white-space: nowrap; transition: color .18s, background .18s; margin-bottom: -1px; border-bottom: 2px solid transparent; } .lab-tab:hover { color: var(--lab-ink); text-decoration: none; } .lab-tab.active { color: var(--lab-accent); border-bottom-color: var(--lab-accent); background: var(--lab-accent-soft); font-weight: 600; } /* ── 논문 목록 ── */ .lab-year { display: flex; align-items: center; gap: .8rem; margin: 2rem 0 .9rem; font-size: 1.24rem; font-weight: 700; color: var(--lab-accent); letter-spacing: .03em; } .lab-year::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--lab-border); } .lab-pubs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .lab-pubs > li { background: var(--lab-surface); border: 1px solid var(--lab-border); border-left: 3px solid var(--lab-accent-dim); border-radius: 10px; padding: .95rem 1.15rem; line-height: 1.6; transition: background .22s, border-color .22s, transform .22s; } .lab-pubs > li:hover { background: var(--lab-surface2); border-left-color: var(--lab-accent); transform: translateX(3px); } .lab-pub-title { font-size: .96rem; font-weight: 600; color: var(--lab-ink); margin-bottom: .3rem; } .lab-pub-meta { font-size: .82rem; color: var(--lab-muted); } .lab-pub-date { color: var(--lab-accent); font-weight: 600; margin-left: .4rem; } /* ── 라벨·값 목록 ── */ .contact-list { list-style: none; padding: 0; margin: 0; } .contact-list li { display: flex; gap: 1rem; padding: .8rem 0; line-height: 1.6; border-bottom: 1px solid var(--lab-border); } .contact-list li:last-child { border-bottom: 0; } .contact-list .k { flex: 0 0 82px; font-weight: 600; font-size: .84rem; color: var(--lab-muted); } .contact-list .v { flex: 1 1 auto; min-width: 0; color: var(--lab-text-soft); overflow-wrap: break-word; } @media (max-width: 480px) { .contact-list li { flex-direction: column; gap: .15rem; } .contact-list .k { flex: none; } } /* ── 타임라인 ── */ .lab-timeline { position: relative; margin: 0 0 0 .4rem; padding: 0 0 0 1.4rem; list-style: none; border-left: 2px solid var(--lab-accent-border); } .lab-timeline > li { position: relative; padding: 0 0 1.35rem .35rem; } .lab-timeline > li:last-child { padding-bottom: 0; } .lab-timeline > li::before { content: ""; position: absolute; left: calc(-1.4rem - 7px); top: .45em; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; background: var(--lab-page); border: 2px solid var(--lab-accent-dim); } .lab-timeline > li:first-child::before { background: var(--lab-accent); border-color: var(--lab-accent); box-shadow: 0 0 10px var(--lab-accent); } .lab-date { font-size: .74rem; font-weight: 600; color: var(--lab-muted2); display: block; letter-spacing: .06em; font-variant-numeric: tabular-nums; margin-bottom: .15rem; } /* ── 네비게이션 — index.html 과 같은 고정형 반투명 바 ── */ .navbar.aicl-nav { position: fixed; inset: 0 0 auto 0; z-index: 1030; min-height: var(--aicl-nav-h); padding: 0 clamp(16px, 4vw, 48px) !important; background: rgba(11, 21, 35, .72) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--lab-border); } /* 고정 바에 가리지 않도록 본문을 그만큼 내린다 */ main { padding-top: var(--aicl-nav-h); } .navbar.aicl-nav .navbar-brand { display: flex; align-items: center; gap: .6rem; padding: 0; } .aicl-brand-txt { color: var(--lab-on-dark-accent); font-size: 1.05rem; font-weight: 700; line-height: 1; letter-spacing: .16em; } .aicl-brand-sub { color: var(--lab-on-dark-dim); font-size: .55rem; font-weight: 500; letter-spacing: .1em; margin-top: 2px; } .navbar.aicl-nav .nav-link { position: relative; color: var(--lab-on-dark-muted) !important; font-size: .88rem; font-weight: 400; padding: .5rem 1rem !important; border-radius: 20px; transition: color .2s, background .2s; } .navbar.aicl-nav .nav-link:hover { color: var(--lab-on-dark) !important; } .navbar.aicl-nav .nav-link.active { color: var(--lab-on-dark-accent) !important; background: rgba(79, 195, 247, .12); } .navbar.aicl-nav .navbar-toggler { border-color: rgba(79, 195, 247, .35); color: var(--lab-on-dark-accent); padding: .25rem .5rem; } .navbar.aicl-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(79, 195, 247, .2); } /* 밝은 모드에서는 뒤의 밝은 본문이 비쳐 글자 대비가 무너진다. 네비·히어로·푸터는 두 모드 모두 딥네이비로 두기로 했으므로 여기서는 불투명하게 만든다. */ :root[data-theme="light"] .navbar.aicl-nav { background: var(--lab-accent-ink) !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: rgba(255, 255, 255, .09); } :root[data-theme="light"] .aicl-foot { border-top-color: rgba(255, 255, 255, .09); } /* ── 히어로 ── */ .aicl-hero { position: relative; min-height: calc(100vh - var(--aicl-nav-h)); max-height: 760px; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; background: var(--lab-accent-ink); } .aicl-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .aicl-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, transparent 40%, rgba(15, 27, 45, .45) 80%, var(--lab-page) 100%); } .aicl-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1120px; margin: 0 auto; padding: 2.5rem clamp(20px, 5vw, 40px); } /* 로고 바로 밑 한 줄 — index.html 의 .sub */ .aicl-kicker { font-size: clamp(1rem, 3.4vw, 1.55rem); font-weight: 300; color: #cfe3f0; letter-spacing: .08em; margin: 0; } /* 그 아래 설명 한 줄 — index.html 의 .tag */ .aicl-sub { font-size: clamp(.9rem, 2.6vw, 1.06rem); color: var(--lab-on-dark-muted); margin: 0 auto; max-width: 36ch; word-break: keep-all; /* site.json 의 heroSub 에 넣은 줄바꿈( )을 그대로 살린다 */ white-space: pre-line; } /* ── 푸터 — index.html 과 같은 형태 ── */ /* 세 줄이 들어갈 만큼만. 필요 이상으로 키우지 않는다. */ .aicl-foot { background: var(--lab-accent-ink); color: var(--lab-on-dark-dim); padding: 18px 24px; text-align: center; margin-top: 0; border-top: 1px solid rgba(255, 255, 255, .09); line-height: 1.5; } .aicl-foot-brand { font-weight: 700; letter-spacing: .18em; font-size: .9rem; color: var(--lab-on-dark-accent); } .aicl-foot p { margin: 3px 0 0; color: var(--lab-on-dark-dim); font-size: .78rem; } .aicl-foot p.dim { opacity: .6; } .aicl-foot a { color: inherit; } .aicl-foot a:hover { color: var(--lab-on-dark-accent); } /* ── 반응형 미디어 ── */ .lab-media { border-radius: 12px; overflow: hidden; border: 1px solid var(--lab-border); background: #000; }