/* ==========================================================================
AIIR PRODUCT LOGO KIT v1.0
ferouter.ai · fecine.ai · fecafe.ai
--------------------------------------------------------------------------
사용법 / Usage
1) 에 웹폰트 연결 (아래 @import 를 쓰거나 로 대체)
2)
3) 마크업 예시는 aiir-logo.html 참고
커스터마이즈
--aiir-size 마크 높이 (기본 48px) — 전체 크기가 이 값에 비례
--aiir-name 제품명 색
--aiir-tld ".ai" 색
--aiir-tagline 태그라인 색
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,400..800&family=IBM+Plex+Mono:wght@400;500&display=swap");
/* --------------------------------------------------------------------------
1. BASE — 어두운 배경 기준(기본값)
-------------------------------------------------------------------------- */
.aiir-logo {
--aiir-size: 48px;
--aiir-name: #ffffff;
--aiir-tld: rgba(255, 255, 255, .55);
--aiir-tagline: rgba(255, 255, 255, .75);
--aiir-gap: .21em;
--aiir-shadow: drop-shadow(0 3px 5px rgba(2, 8, 20, .45));
display: inline-flex;
align-items: center;
gap: calc(var(--aiir-size) * .21);
text-decoration: none;
line-height: 1;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
}
.aiir-logo__mark {
height: var(--aiir-size);
width: auto;
flex: none;
display: block;
filter: var(--aiir-shadow);
}
.aiir-logo__text {
display: block;
min-width: 0;
}
.aiir-logo__name {
display: block;
font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
font-weight: 700;
font-size: calc(var(--aiir-size) * .5);
letter-spacing: -.01em;
line-height: 1;
color: var(--aiir-name);
white-space: nowrap;
}
.aiir-logo__tld {
font-weight: 600;
color: var(--aiir-tld);
}
.aiir-logo__tagline {
display: block;
margin-top: calc(var(--aiir-size) * .105);
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-weight: 500;
font-size: calc(var(--aiir-size) * .219);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--aiir-tagline);
white-space: nowrap;
}
/* --------------------------------------------------------------------------
2. THEME — 밝은 배경
-------------------------------------------------------------------------- */
.aiir-logo--light {
--aiir-name: #0B1220;
--aiir-tld: rgba(11, 18, 32, .45);
--aiir-tagline: rgba(11, 18, 32, .62);
--aiir-shadow: none;
}
/* --------------------------------------------------------------------------
3. PRODUCT — 제품별 태그라인 색
-------------------------------------------------------------------------- */
.aiir-logo--ferouter { --aiir-tagline: rgba(255, 255, 255, .78); }
.aiir-logo--ferouter.aiir-logo--light { --aiir-tagline: #1D4ED8; }
.aiir-logo--fecine { --aiir-tagline: rgba(255, 255, 255, .78); }
.aiir-logo--fecine.aiir-logo--light { --aiir-tagline: #7C3AED; }
.aiir-logo--fecafe { --aiir-tagline: #FDBA3C; --aiir-tagline-ls: .2em; }
.aiir-logo--fecafe.aiir-logo--light { --aiir-tagline: #C2740A; }
.aiir-logo--fecafe .aiir-logo__tagline { letter-spacing: .2em; }
/* --------------------------------------------------------------------------
4. SIZE — 프리셋 (또는 style="--aiir-size:56px" 로 직접 지정)
-------------------------------------------------------------------------- */
.aiir-logo--xs { --aiir-size: 28px; }
.aiir-logo--sm { --aiir-size: 36px; }
.aiir-logo--lg { --aiir-size: 64px; }
.aiir-logo--xl { --aiir-size: 88px; }
/* --------------------------------------------------------------------------
5. LAYOUT VARIANTS
-------------------------------------------------------------------------- */
/* 5-1. 세로형 — 마크 위, 텍스트 아래 가운데 정렬 */
.aiir-logo--stacked {
flex-direction: column;
text-align: center;
gap: calc(var(--aiir-size) * .26);
}
.aiir-logo--stacked .aiir-logo__text { text-align: center; }
/* 5-2. 태그라인 없이 제품명만 */
.aiir-logo--compact .aiir-logo__tagline { display: none; }
/* 5-3. 마크만 (파비콘·앱 아이콘·프로필) */
.aiir-logo--mark-only .aiir-logo__text { display: none; }
.aiir-logo--mark-only { gap: 0; }
/* 5-4. fecafe 전용 — 심볼+글자가 한 덩어리인 원본 워드마크 이미지 사용 */
.aiir-logo--wordmark { flex-direction: column; align-items: flex-start; gap: 0; }
.aiir-logo--wordmark .aiir-logo__mark { height: calc(var(--aiir-size) * .75); }
.aiir-logo--wordmark .aiir-logo__tagline { margin-top: calc(var(--aiir-size) * .17); }
.aiir-logo--wordmark.aiir-logo--stacked { align-items: center; text-align: center; }
/* --------------------------------------------------------------------------
6. LINK STATE — 로 쓸 때
-------------------------------------------------------------------------- */
a.aiir-logo { transition: opacity .18s ease, transform .18s ease; }
a.aiir-logo:hover { opacity: .88; }
a.aiir-logo:active { transform: translateY(1px); }
a.aiir-logo:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
/* --------------------------------------------------------------------------
7. RESPONSIVE — 좁은 화면에서 자동 축소 (원치 않으면 이 블록 삭제)
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
.aiir-logo { --aiir-size: calc(clamp(32px, 11vw, 48px)); }
.aiir-logo--lg, .aiir-logo--xl { --aiir-size: clamp(40px, 14vw, 64px); }
}
/* --------------------------------------------------------------------------
8. PRINT
-------------------------------------------------------------------------- */
@media print {
.aiir-logo { --aiir-name: #0B1220; --aiir-tld: #6B7688; --aiir-tagline: #6B7688; --aiir-shadow: none; }
}