Imported from aifactory-team/discover (kist/kist-brand-guidelines/SKILL.md). Install upstream with npx skills add aifactory-team/discover --skill kist-brand-guidelines. Copyright stays with the author.

KIST Design Guide

본 스킬은 https://kist.re.kr 의 실제 빌드 산출물(main.css, main-renew.css, sub.css, cms-common.css, font.css, 60anniversary.css, board.*.css + 메인/intro/research/notice/intro_org/promote 6개 페이지의 computed style + 로고 PNG 픽셀 분석)에서 직접 추출한 사실(fact) 기반 디자인 토큰·컴포넌트 패턴 모음입니다. 모든 값은 운영 중인 사이트에서 그대로 옮긴 것으로, 추적 정보는 tokens/evidence.json(revision 2, logo PIL sources 포함)에 보존됩니다.

스택 요약: 정부출연연(.re.kr) 톤 + jQuery + slick/swiper 캐러셀 + GmarketSans 한글 본문 + KIMM_Bold 디스플레이 + 직각 직사각 카드 + 플랫(그림자 없음) + 단일 라이트 모드.

1. Brand Essence

2. Logo

KIST는 사이트에 PNG 비트맵 로고만 노출한다(공식 SVG 없음). 본 스킬은 6개 PNG 변종을 assets/logos/에 포함한다.

규칙:

• logo_main (라이트 GNB) / logo_main_on (다크 히어로 위) 두 변종을 동시에 마크업에 넣고 스크롤/배경에 따라 CSS로 토글한다(KIST 패턴).
• Clear-space: 로고 높이의 ½ 이상 확보.
• 최소 크기: 가로 100px 권장(웹), 12mm(인쇄).
• 로고를 다른 색(예: 블루 #2A82D5)으로 다시 칠하지 말 것 — 로고는 항상 KIST 레드 #E03710 또는 푸터 mono #CBCBCB 또는 white-on-dark 두 가지로만 사용한다.
• 60주년 로고는 specials. 일반 페이지/제안서/이메일에 사용하지 말 것. 60주년 컨텍스트(2026년 한정 행사/캠페인)에서만 사용.

<a href="/">
  <img src="./assets/logos/logo_main.png"    alt="KIST" class="kist-logo-basic" width="219" height="52">
  <img src="./assets/logos/logo_main_on.png" alt="KIST" class="kist-logo-on"    width="219" height="52" hidden>
</a>

Key-Visual Rule (강제 — 절대 누락 금지)

모든 키비주얼에는 KIST 로고를 반드시, 명시적으로 노출한다. 키비주얼이란 다음을 모두 포함한다:

• 발표자료(PPTX) — 표지·각 본문 슬라이드 헤더·마무리 슬라이드 모두
• 문서(DOCX/PDF/HWP) — 표지 + 각 챕터 헤더 + 푸터
• 웹페이지 — GNB 좌상단 + 푸터
• 슬라이드/배너/이메일 헤더/제안서 표지/포스터/대형 카드

텍스트 "KIST"는 로고가 아니다. 워드마크의 그래픽 형태(자간·서체·기울기)가 KIST 시각 정체성이므로 반드시 PNG 자산을 이미지로 삽입한다:

• 라이트 배경 → assets/logos/logo_main.png (219×52, red on white)
• 다크 배경 → assets/logos/logo_main_on.png (219×52, red on black) 또는 logo_white.png (600×120, 고해상도)
• 푸터 단색톤 → assets/logos/logo_footer.png (224×53, mono gray)

위치·크기 가이드:

• 발표자료 표지: 좌상단 또는 우상단, 가로 1.52.5인치(인쇄 기준 2440mm) 일관 사이즈.
• 본문 슬라이드: 좌상단 가로 1.2~1.6인치로 모든 슬라이드 동일 위치(master slide 헤더 영역).
• 마무리 슬라이드: 다크 배경이면 logo_main_on.png 또는 logo_white.png로 명료하게.
• clear-space: 항상 로고 높이의 ½ 이상.

구현 예:

# python-pptx
slide.shapes.add_picture("assets/logos/logo_main.png",
                         Inches(0.6), Inches(0.4),
                         width=Inches(1.4))  # height auto-scale

<!-- HTML -->
<img src="./assets/logos/logo_main.png" alt="KIST" width="219" height="52">

검증 체크리스트: 작성 완료 후 모든 키비주얼에 로고 PNG가 실제 이미지 요소로 삽입돼 있는지 확인. 텍스트만 있는 키비주얼은 결함으로 간주하고 즉시 보완한다.

공식 SVG가 필요한 경우: KIST 홍보팀 공식 채널을 통해 벡터 자산을 별도 요청. 본 스킬은 PNG 참조만 제공한다.

3. Color Tokens

3.1 Brand (가장 중요한 두 색)

규칙: CTA·로고·활성 상태는 무조건 #E03710 (brand-primary). #D84725는 입력 보더 1px 라인과 캐러셀 active dot 외엔 사용하지 말 것.

3.2 UI Interactive (Link / Hover — 보조 블루)

블루는 링크 / 보조 outline 버튼 / .f_cyan 강조 텍스트에서만 사용. primary CTA를 블루로 만들지 말 것 — KIST의 CTA는 항상 레드.

3.3 Neutral (텍스트·서피스·디바이더)

추출된 raw CSS의 빈도 기반(괄호 안 hit 수):

3.4 Status Colors

KIST 사이트의 status 컬러 노출이 적다. 일반 페이지 사용 시 위 두 값을 베이스로 쓰되, 모달 토스트 등 디자인 시스템 확장 시 추가 정의 권장.

3.5 Signature Gradient (오렌지 → 레드)

.kist-gradient-signature {
  background: linear-gradient(to right, #FF7E00 0%, #E03710 100%);
}

KIST의 시그니처 그라디언트. 메인 데코, 하이라이트 라인, 60주년 배너 등에서 발견된 가장 식별 가능한 시각 요소(로고 다음).

토큰: --kist-brand-gradient-start = #FF7E00, --kist-brand-gradient-end = #E03710 (= --kist-brand-primary).

3.6 Semantic Aliases

--kist-cta:          var(--kist-brand-primary);   /* CTA·primary 버튼 */
--kist-link:         var(--kist-ui-blue);         /* 링크 텍스트 */
--kist-link-hover:   var(--kist-ui-blue-hover);   /* 링크 호버 */
--kist-focus-ring:   0 0 0 3px rgba(224, 55, 16, 0.25); /* brand-primary 25% alpha */

백워드 호환을 위해 --kist-primary / --kist-primary-hover / --kist-accent도 --kist-ui-*의 alias로 유지된다(reference/tokens.css 참조). 신규 코드는 --kist-brand-primary / --kist-ui-* / --kist-cta 사용 권장.

4. Signature Background / Gradient

KIST 메인의 히어로는 풀와이드 사진 슬라이더가 차지하고 그 위에 흰 로고가 얹힌다(어시웍스 같은 파스텔 그라디언트가 아님). 시그니처 그라디언트는 별도 데코 요소로 등장한다.

4.1 Hero Pattern (사진 + 좌상단 흰 로고 + 우하단 검색바)

• 히어로 영역은 화면 거의 풀(높이 ≈ 720~946px)
• 좌측 상단에 logo_white.png (600×120) 오버레이
• 우측 하단에 search_wrap(검색 라벨 "SEARCH" + 입력 + 해시태그 3개)
• 우측 하단에 슬라이드 컨트롤(dots + play/pause + KIMM_Bold "1 / 3" 카운터)

4.2 Signature Linear Gradient

.kist-deco-gradient {
  background: linear-gradient(to right, #FF7E00 0%, #E03710 100%);
  /* 또는 var(--kist-brand-gradient-start) → var(--kist-brand-gradient-end) */
}

사용처: 60주년 라벨, 데코 라인, 하이라이트 띠, 이벤트 배너 등. 본문 배경 전체에 깔지 말 것 — 강조 데코로만 사용.

4.3 Soft Background (선택)

본문 카드/리스트 섹션은 var(--kist-bg-soft) (#F6F6F6) 위 흰 카드 패턴이 자주 등장. 어시웍스 글래스모피즘 같은 흐릿한 알파는 KIST 패턴이 아님.

5. Typography

KIST는 3개 폰트 패밀리를 역할별로 사용한다:

<!-- KIST 도메인 직접 참조하는 자체 호스팅 폰트 (CORS 주의) -->
<!-- 합법 호스팅 대안: NotoSans KR via Google Fonts + Pretendard 폴백 -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">

5.1 Scale (KIST 메인에서 관측된 실제 사이즈)

5.2 Weights

5.3 폰트 라이선스 주의

• KIMM_Bold — 한국기계연구원 배포 (KIMM 라이선스 확인 필요)
• GmarketSans Light/Medium/Bold — 지마켓 무료 폰트 (상업 사용 가능, 재배포 조건 확인)
• NotoKr 200~600 — Google Noto, SIL OFL 1.1
• Material Icons / Material Symbols — Apache 2.0

KIST 도메인의 폰트 URL은 assets/manifest.json의 fonts 필드에 27 URLs 메타로 기록되어 있다. 합법 호스팅 대안: NotoSans KR (Google Fonts) + Pretendard Variable (jsDelivr) 조합으로 GmarketSans의 한글 폭/리듬을 근사할 수 있다.

6. Component Patterns (KIST 메인 추출 그대로)

본 섹션은 컴포넌트의 핵심 마크업 + 토큰 참조 CSS만 발췌한다. 전체 디테일(상태/변종/메가메뉴 트리)은 reference/components/*.md 참조.

6.1 Header / GNB (2단 구조)

<header class="kist-header">
  <div class="kist-header__top">
    <div class="kist-header__inner">
      <ul class="kist-header__sns">
        <li><a href="#" aria-label="블로그"><img src="./assets/icons/social_naverblog.png" alt=""></a></li>
        <li><a href="#" aria-label="유튜브"><img src="./assets/icons/social_youtube.png"   alt=""></a></li>
        <li><a href="#" aria-label="인스타"><img src="./assets/icons/social_instagram.png" alt=""></a></li>
        <li><a href="#" aria-label="페이스북"><img src="./assets/icons/social_facebook.png" alt=""></a></li>
      </ul>
      <a href="#" class="kist-header__lang">ENGLISH</a>
    </div>
  </div>
  <div class="kist-header__bot">
    <div class="kist-header__inner">
      <h1 class="kist-header__logo">
        <a href="/"><img src="./assets/logos/logo_main.png" alt="KIST" width="219" height="52"></a>
      </h1>
      <nav class="kist-header__nav" aria-label="Global">
        <ul>
          <li><a href="#">연구</a></li>
          <li><a href="#">소개</a></li>
          <li><a href="#">소식</a></li>
          <li><a href="#">홍보</a></li>
          <li><a href="#">참여</a></li>
        </ul>
      </nav>
      <button class="kist-btn--icon" aria-label="검색"><span class="blind">검색</span></button>
    </div>
  </div>
</header>

.kist-header {
  position: absolute; top: 0; left: 0; width: 100%; height: 156px;
  z-index: var(--kist-z-header);  /* 1111 */
  padding-top: var(--kist-space-7);  /* 25px */
  font-family: var(--kist-font-sans);
  font-size: var(--kist-fs-body);
  font-weight: var(--kist-fw-medium);
}
.kist-header__top  { color: var(--kist-surface); }
.kist-header__nav a { color: var(--kist-ink); }
.kist-header__nav a:hover { color: var(--kist-link-hover); }
.kist-header__nav .is-active { color: var(--kist-brand-primary); }

6.2 Hero (풀와이드 슬라이더 + 우하단 검색)

<section class="kist-hero">
  <div class="kist-hero__slide">
    <img src="[hero-img]" alt="" class="kist-hero__img">
    <div class="kist-hero__logo-overlay">
      <img src="./assets/logos/logo_white.png" alt="KIST" width="600" height="120">
    </div>
    <div class="kist-hero__control">
      <p class="kist-count kimm"><span>1</span> <span>/</span> <span>3</span></p>
    </div>
  </div>
  <div class="kist-hero__search">
    <p class="kist-hero__search-label">SEARCH</p>
    <div class="kist-search__input">
      <input type="text" placeholder="검색어를 입력하세요">
      <button type="button" aria-label="검색">🔍</button>
    </div>
    <div class="kist-hero__hashtags">
      <a href="#">#양자기술</a>
      <a href="#">#반도체</a>
      <a href="#">#바이오</a>
    </div>
  </div>
</section>

.kist-hero { position: relative; width: 100%; height: 720px; overflow: hidden; }
.kist-hero__img { width: 100%; height: 100%; object-fit: cover; }
.kist-hero__search-label,
.kist-count.kimm {
  font-family: var(--kist-font-display);
  font-size: var(--kist-fs-display);
  line-height: var(--kist-lh-display);
  color: var(--kist-surface);
}

6.3 Section Title (KIMM_Bold 디스플레이)

<p class="kist-section-title kimm">KIST 소식</p>

.kist-section-title.kimm {
  font-family: var(--kist-font-display);
  font-size: var(--kist-fs-display);    /* 36px */
  line-height: var(--kist-lh-display);  /* 47px */
  font-weight: var(--kist-fw-medium);
  color: var(--kist-ink);
  margin-bottom: var(--kist-space-6);
}

6.4 Card (3 변종 — News / Publication / Interview)

News card (텍스트 위주, 시그니처 — 카테고리 라벨이 UI accent #D84725, 카드 자체에 soft shadow + 호버 시 대각 코너 프레임):

중요 (CSS-verified, revision 3 — 2026-05-12): 카테고리 라벨 컬러는 --kist-ui-accent (#D84725, KIST --k_color2)이며 --kist-brand-primary (#E03710)가 아니다. KIST는 wordmark RED와 UI accent RED를 다른 컨텍스트에 분리한다. 또한 notice card는 메인 페이지의 유일한 그림자 예외 — 2px 2px 14px -4px rgba(0,0,0,0.2)의 부드러운 그림자 + 호버 시 ::before/::after로 그려지는 --kist-ui-accent 2px 대각 코너 프레임. Publication / Interview 카드는 기본 flat을 유지.

<article class="kist-card kist-card--news">
  <a href="#">
    <p class="kist-card__category">최신연구성과</p>
    <p class="kist-card__title">KIST, 양자 컴퓨팅 분야 신규 성과 발표</p>
    <p class="kist-card__excerpt">한국과학기술연구원이 양자 정보 처리 분야에서…</p>
    <p class="kist-card__date">2026 - 05 - 11</p>
  </a>
</article>

.kist-card {
  background: var(--kist-surface);
  border: 1px solid var(--kist-border-soft);
  border-radius: var(--kist-radius-none);   /* 직각 */
  box-shadow: var(--kist-shadow-none);       /* publication/interview는 flat 기본 */
  padding: var(--kist-space-6);
  transition: var(--kist-transition-base);
}
.kist-card--news {
  position: relative;
  border: 1px solid var(--kist-divider);                    /* 실측 #d3d3d3 ≈ divider */
  box-shadow: var(--kist-shadow-card);                       /* 카드 예외 — soft shadow (= 2px 2px 14px -4px rgba(0,0,0,0.2)) */
  padding: 20px 28px 25px;                                   /* 실측 */
}
.kist-card--news::before,
.kist-card--news::after {
  content: ""; position: absolute;
  width: 0; height: 0;
  visibility: hidden; transition: var(--kist-transition-base);
}
.kist-card--news::before {
  top: -3px; right: 0;
  border-top: 2px solid var(--kist-ui-accent);               /* 호버 코너 프레임 */
  border-left: 2px solid var(--kist-ui-accent);
}
.kist-card--news::after {
  bottom: 0; left: 0;
  border-bottom: 2px solid var(--kist-ui-accent);
  border-right: 2px solid var(--kist-ui-accent);
}
.kist-card--news:hover::before,
.kist-card--news:hover::after {
  visibility: visible; width: 100%; height: 100%;
}
.kist-card__category {
  font-family: var(--kist-font-display);
  font-size: 20px;
  color: var(--kist-ui-accent);                              /* #D84725 — NOT brand-primary */
  margin-bottom: var(--kist-space-5);
}
.kist-card__category::after {
  content: ''; display: block;
  width: 100%; height: 1px;
  background: var(--kist-ui-accent);
  margin-top: var(--kist-space-4);
}
.kist-card__title {
  font-family: var(--kist-font-sans);
  font-weight: var(--kist-fw-medium);
  font-size: 20px; line-height: 28px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 56px;
}
.kist-card__excerpt {
  color: var(--kist-warm-gray);                              /* 실측 #626262 ≈ #727069 */
  font-size: 16px; line-height: 25px; font-weight: var(--kist-fw-regular);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 75px;
}
.kist-card__date {
  font-family: var(--kist-font-display);
  font-size: 16px;
  color: var(--kist-warm-gray);
}

Publication card: .kist-card--publication — 상단 썸네일 + 제목 + 날짜. flat 유지. Interview card: .kist-card--interview — 정사각 썸네일 + 1줄 캡션. flat 유지. (마크업/디테일은 reference/components/card.md + reference/components/_css_corrections.md §7 참조)

6.5 Buttons (4 변종)

<!-- Primary CTA -->
<a class="kist-btn kist-btn--primary" href="#">KIST 홈페이지 바로가기</a>

<!-- Secondary outline (blue) -->
<button class="kist-btn kist-btn--secondary">자세히 보기</button>

<!-- Gray (form action) -->
<button class="kist-btn kist-btn--gray">평가하기</button>

<!-- Icon-only -->
<button class="kist-btn kist-btn--icon" aria-label="이전"><span class="blind">이전</span></button>

.kist-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--kist-font-sans);
  font-weight: var(--kist-fw-medium);
  font-size: var(--kist-fs-body);
  line-height: var(--kist-lh-tight);
  border: 0;
  border-radius: var(--kist-radius-none);   /* KIST = sharp */
  cursor: pointer;
  transition: var(--kist-transition-base);
}
.kist-btn--primary {
  height: 45px; padding: 0 var(--kist-space-6);
  background: var(--kist-cta);                 /* #E03710 */
  color: var(--kist-surface);
  font-family: var(--kist-font-display);       /* .kimm */
}
.kist-btn--primary:hover { background: var(--kist-brand-primary-dark); }
.kist-btn--secondary {
  padding: var(--kist-space-3) var(--kist-space-4);
  background: transparent;
  color: var(--kist-link);
  border: 1px solid var(--kist-link);
}
.kist-btn--secondary:hover {
  background: var(--kist-link-hover);
  color: var(--kist-surface);
}
.kist-btn--gray {
  padding: var(--kist-space-2) var(--kist-space-4);
  background: var(--kist-warm-gray);            /* #727069 */
  color: var(--kist-surface);
}
.kist-btn--icon {
  background: transparent; border: 0; color: inherit;
  font-family: var(--kist-font-noto);
  font-size: var(--kist-fs-icon);
}
.kist-btn[disabled], .kist-btn:disabled {
  opacity: var(--kist-opacity-disabled);
  cursor: not-allowed; pointer-events: none;
}

6.6 Tab — 메인 페이지 notice tab은 BLUE 강조 (애니메이션 underline)

중요 (CSS-verified, revision 3 — 2026-05-12): 메인 페이지의 .notice_wrap .tab_button-list (KIST 소식 / 발간물 섹션의 가로 텍스트 탭)의 active 컬러는 --kist-ui-blue (#2A82D5, KIST --k_color1)이며 --kist-brand-primary 레드가 아니다. 밑줄은 ::after의 width 0 → 100% 애니메이션. 폰트는 KIMM_Bold 22px. 서브 페이지의 .tab_wrap 알약형 탭은 active가 brand-primary 레드 + 2px 보더 + soft shadow로 다르게 표현된다 — reference/components/_css_corrections.md §2/§6 참조.

<div class="kist-tabs">
  <ul class="kist-tabs__list" role="tablist">
    <li class="is-active"><button role="tab" aria-selected="true">최신연구성과</button></li>
    <li><button role="tab" aria-selected="false">주요행사</button></li>
    <li><button role="tab" aria-selected="false">일반공지</button></li>
    <li><button role="tab" aria-selected="false">채용공지</button></li>
  </ul>
  <div class="kist-tabs__panel" role="tabpanel">…</div>
</div>

.kist-tabs__list {
  display: flex; justify-content: center; gap: 50px;
  list-style: none; padding: 0; margin: 0;
}
.kist-tabs__list button {
  position: relative;
  background: transparent; border: 0;
  color: var(--kist-ink);
  font-family: var(--kist-font-display);       /* KIMM_Bold */
  font-size: 22px;
  padding: 0 0 9px 0;
  cursor: pointer;
}
.kist-tabs__list button::after {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--kist-ui-blue);              /* BLUE — not red */
  transform: translateX(-50%);
  transition: var(--kist-transition-base);
}
.kist-tabs__list .is-active button {
  color: var(--kist-ui-blue);                   /* BLUE */
}
.kist-tabs__list .is-active button::after {
  width: 100%;
}

6.7 Form / Search Input (1px RED 보더 — --kist-ui-accent 전용)

<div class="kist-search">
  <input type="text" placeholder="검색어를 입력하세요">
  <button type="button" aria-label="검색">🔍</button>
</div>

.kist-search { display: flex; }
.kist-search input {
  flex: 1;
  height: 65px;
  background: var(--kist-surface);
  border: 1px solid var(--kist-ui-accent);  /* #D84725 — KIST 입력 전용 */
  border-radius: var(--kist-radius-none);
  padding: var(--kist-space-px) var(--kist-space-5);
  font-family: var(--kist-font-sans);
  font-size: var(--kist-fs-input);          /* 20px */
  line-height: var(--kist-lh-input);        /* 43px */
  color: var(--kist-ink);
}
.kist-search input:focus {
  outline: none;
  box-shadow: var(--kist-shadow-focus);
}
.kist-search button {
  background: var(--kist-surface);
  border: 1px solid var(--kist-ui-accent);
  border-left: 0;
  padding: 0 var(--kist-space-5);
  cursor: pointer;
}

중요: 입력 보더는 --kist-ui-accent (#D84725)만 사용. --kist-brand-primary (#E03710)으로 그리지 말 것 — KIST는 두 컬러를 명확히 분리한다.

6.8 Footer (좌: 정책+로고+주소 / 우: Family Site + SNS + 인증마크)

<footer class="kist-footer">
  <div class="kist-footer__inner">
    <div class="kist-footer__left">
      <ul class="kist-footer__policy">
        <li><a href="#"><strong>개인정보처리방침</strong></a></li>
        <li><a href="#">이메일무단수집거부</a></li>
        <li><a href="#">소비자안내</a></li>
        <li><a href="#">고객헌장</a></li>
        <li><a href="#">서비스이행표준</a></li>
        <li><a href="#">정보만족도</a></li>
      </ul>
      <div class="kist-footer__brand">
        <img src="./assets/logos/logo_footer.png" alt="KIST" width="224" height="53">
        <p>주소: 서울특별시 성북구 화랑로14길 5 (02792)</p>
        <p>대표전화: 02-958-5114</p>
        <p class="kist-footer__copyright">COPYRIGHT © KIST. ALL RIGHTS RESERVED.</p>
      </div>
    </div>
    <div class="kist-footer__right">
      <button class="kist-footer__family">Family Site ▾</button>
      <ul class="kist-footer__sns">
        <li><img src="./assets/icons/social_facebook.png"  alt="Facebook"></li>
        <li><img src="./assets/icons/social_youtube.png"   alt="YouTube"></li>
        <li><img src="./assets/icons/social_instagram.png" alt="Instagram"></li>
        <li><img src="./assets/icons/social_naverblog.png" alt="Blog"></li>
      </ul>
      <ul class="kist-footer__certs">
        <li><img src="./assets/icons/mark_web_accessibility.png" alt="웹접근성"></li>
        <li><img src="./assets/icons/mark_ieco_award.png"        alt="iECO"></li>
        <li><img src="./assets/icons/mark_web_award.png"         alt="웹어워드"></li>
      </ul>
    </div>
  </div>
</footer>

.kist-footer {
  border-top: 1px solid var(--kist-divider);
  background: var(--kist-surface);
  font-family: var(--kist-font-sans);
  font-size: var(--kist-fs-body);
  color: var(--kist-ink);
}
.kist-footer__copyright { color: var(--kist-warm-gray); font-size: 12px; }

7. Spacing, Radius, Shadow

Sharp + Flat 원칙과 3가지 명시 예외 (CSS-verified): KIST의 기본 chrome은 직각(--kist-radius-none) + 그림자 없음(--kist-shadow-none)이지만, 다음 3개 컴포넌트는 의도된 예외다.

1. News card (.notice_slide li = .kist-card--news): box-shadow: 2px 2px 14px -4px rgba(0,0,0,0.2) soft shadow. flat에 가깝지만 elevation 효과 있음. publication/interview 카드와 일반 카드는 여전히 flat.
2. Slider control buttons (캐러셀 prev/next, more_link): 45×45 원형 (border-radius: 50% = --kist-radius-full). 1px solid #bcbcbc 보더, hover 시 --kist-ui-accent 채움. 일반 버튼은 직각 유지.
3. Hashtag chips (.hash_tag a): border-radius: 5px 살짝 둥근 모서리 (히어로 다크 배경 위 흰색 1px outline chip). 다른 chip/badge는 직각 유지.

그 외 모달(.kist-popup)은 elevation 그림자(0 18px 48px rgba(0,0,0,0.18))가 허용되지만 모서리는 여전히 직각이다.

7.1 Spacing scale (관측 + 8/16/24/32 확장)

aliases: xs=4, sm=8, md=16, lg=24, xl=32, 2xl=48, 3xl=64.

7.2 Radius

KIST 시그니처는 0px 직각. 카드/버튼/입력은 모두 직각. 도트만 --kist-radius-full.

7.3 Shadow

7.4 Transitions / Effects

--kist-transition-base: all 200ms ease;
--kist-transition-slow: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
--kist-transition-fast: all 120ms ease-out;

--kist-opacity-disabled: 0.4;
--kist-opacity-muted:    0.7;

--kist-z-base:     1;
--kist-z-dropdown: 100;
--kist-z-sticky:   500;
--kist-z-header:   1111;   /* 실측: header z-index */
--kist-z-modal:    2000;
--kist-z-toast:    3000;

7.5 Layout container

8. Don'ts

9. Quick Recipes

9.1 시그니처 페이지 한 페이지 통째로

전체 HTML 예시: examples/signature-page.html — GNB + 풀와이드 히어로 + 섹션 타이틀 + 뉴스 카드 3개 + Primary CTA + 푸터 전체.

9.2 컴포넌트 갤러리

examples/component-gallery.html — header / hero / section title / button (4종) / card (3 변종) / tab / search input / footer 일괄 렌더.

9.3 Tailwind 설정 스니펫

// tailwind.config.js (v3 기준)
export default {
  theme: {
    extend: {
      colors: {
        'kist-brand-primary':       '#E03710',
        'kist-brand-primary-dark':  '#98260F',
        'kist-brand-primary-light': '#E54125',
        'kist-ui-blue':             '#2A82D5',
        'kist-ui-blue-hover':       '#1750A2',
        'kist-ui-accent':           '#D84725',
        'kist-ink':                 '#000000',
        'kist-text':                '#555555',
        'kist-warm-gray':           '#727069',
        'kist-divider':             '#C8C8C8',
        'kist-border-soft':         '#DDDDDD',
        'kist-surface':             '#FFFFFF',
        'kist-bg-soft':             '#F6F6F6',
      },
      fontFamily: {
        sans:    ['"GmarketSans"', '"Apple SD Gothic Neo"', '"Malgun Gothic"', 'system-ui', 'sans-serif'],
        display: ['"KIMM_Bold"', '"GmarketSans"', '"Apple SD Gothic Neo"', 'sans-serif'],
      },
      borderRadius: {
        DEFAULT: '0',
      },
      boxShadow: {
        none: 'none',
        focus: '0 0 0 3px rgba(224, 55, 16, 0.25)',
      },
    },
  },
}

9.4 CSS 변수만 쓰는 Plain HTML

reference/tokens.css를 그대로 import:

<link rel="stylesheet" href="./reference/tokens.css">
<style>
  body { font-family: var(--kist-font-sans); color: var(--kist-ink); background: var(--kist-surface); }
  .cta { background: var(--kist-cta); color: white; padding: 12px 24px; border: 0; }
  a    { color: var(--kist-link); }
</style>

9.5 PPT/슬라이드/문서/제안서에 적용

기본 룩:

• 표지 배경 (다크): #0D0D0D + 우상단 라디얼 광채 (#2A0D05 같은 톤) + 시그니처 그라디언트 띠.
• 표지 배경 (라이트): 흰색 + 상단 0.08" 빨간 띠 + (선택) --kist-bg-soft 패널.
• 강조 라벨 띠: 시그니처 그라디언트(#FF7E00 → #E03710) 사각형 채움.
• 타이틀: KIMM_Bold 30~58pt, --kist-ink (라이트) 또는 흰색 + 강조 단어 ORANGE (다크).
• 본문: GmarketSans 13~16pt, --kist-text (#555) 또는 #E0E0E0 (다크 위).
• 카드: 흰 BG + 1px #DDDDDD 보더 + 좌측 4pt 색 바 + 직각(radius 0) + 그림자 없음.
• CTA 라인/언더라인: --kist-brand-primary (#E03710).
• 탭 active: --kist-ui-blue (#2A82D5) + ::after 2px 애니메이션 underline.
• 차트 컬러 시퀀스: #E03710, #2A82D5, #FF7E00, #727069, #98260F, #E54125, #1750A2, #555555.

로고 (§2 Key-Visual Rule 강제):

• 모든 슬라이드 — 표지·본문·마무리 — 에 로고 PNG를 반드시 이미지로 삽입. 텍스트 "KIST"는 시각적 동등물이 아님.
• 라이트 배경: assets/logos/logo_main.png (좌상단 가로 1.2~1.6")
• 다크 배경: assets/logos/logo_main_on.png (좌상단 가로 1.7~2.1")
• 모든 본문 슬라이드는 동일 위치·동일 사이즈로 일관 배치 (마스터 슬라이드 헤더 영역).

python-pptx 미니 레시피 (5-slide 발표자료):

from pptx import Presentation
from pptx.util import Inches, Pt
from pptx.dml.color import RGBColor
from pptx.enum.shapes import MSO_SHAPE

RED, ORANGE, INK, WHITE = (
    RGBColor(0xE0, 0x37, 0x10), RGBColor(0xFF, 0x7E, 0x00),
    RGBColor(0x00, 0x00, 0x00), RGBColor(0xFF, 0xFF, 0xFF),
)
SKILL = "/path/to/kist-brand-guidelines"  # this skill's directory
LOGO_LIGHT = f"{SKILL}/assets/logos/logo_main.png"
LOGO_DARK  = f"{SKILL}/assets/logos/logo_main_on.png"

prs = Presentation()
prs.slide_width, prs.slide_height = Inches(13.333), Inches(7.5)
BLANK = prs.slide_layouts[6]

def add_logo(slide, dark=False, x=Inches(0.6), y=Inches(0.32), w_in=1.45):
    """§2 Key-Visual Rule — 모든 슬라이드에 호출 필수"""
    slide.shapes.add_picture(LOGO_DARK if dark else LOGO_LIGHT, x, y, width=Inches(w_in))

# 표지 (다크 BG)
s1 = prs.slides.add_slide(BLANK)
s1.shapes.add_shape(MSO_SHAPE.RECTANGLE, 0, 0, prs.slide_width, prs.slide_height)\
   .fill.solid(); s1.shapes[0].fill.fore_color.rgb = RGBColor(0x0D, 0x0D, 0x0D)
add_logo(s1, dark=True, w_in=2.1)   # ← 로고 필수
# ... eyebrow + 타이틀 + CTA

# 본문 슬라이드 (라이트 BG)
for content in [...]:
    s = prs.slides.add_slide(BLANK)
    # 상단 0.08" 빨간 띠
    bar = s.shapes.add_shape(MSO_SHAPE.RECTANGLE, 0, 0, prs.slide_width, Inches(0.08))
    bar.fill.solid(); bar.fill.fore_color.rgb = RED
    add_logo(s, dark=False)         # ← 로고 필수, 모든 슬라이드 동일 위치
    # ... 헤더 디바이더 + 큰 타이틀 + 그라디언트 56pt 띠 + 본문

# 마무리 (다크 BG)
sN = prs.slides.add_slide(BLANK)
# ... 다크 BG + 큰 메시지
add_logo(sN, dark=True, w_in=1.7)   # ← 로고 필수

prs.save("output.pptx")

완성 후 검증 체크리스트:

from pptx import Presentation
p = Presentation("output.pptx")
for i, s in enumerate(p.slides, 1):
    pics = [sh for sh in s.shapes if sh.shape_type == 13]  # 13 = PICTURE
    assert pics, f"slide {i} has NO logo picture! (§2 Key-Visual Rule violation)"
print("OK — all slides have a logo image.")

전체 작동 예시: examples/sample-intro-deck.py (5 슬라이드: 표지 / 개요 / Vision&Mission / 연구분야 그리드 / 마무리).

10. Reference Files (이 스킬 디렉터리 안)

11. 사용 가이드 (이 스킬을 호출했을 때 어떻게 행동할 것인가)

1. 사용자가 "KIST 스타일로 ~ 만들어달라"고 하면:
   • 빈 페이지를 만들 때 → §6.1 GNB + §6.2 풀와이드 히어로 + §6.3 섹션 타이틀(KIMM) + §6.4 카드 3개 + §6.5 Primary CTA + §6.8 푸터의 6-블록 시퀀스로 시작 (examples/signature-page.html 참조).
   • 컴포넌트만 추가 → §6의 패턴을 그대로 재사용.
   • 컬러는 §3 토큰만 사용. CTA/액티브는 #E03710, 링크는 #2A82D5, 입력 보더는 #D84725 — 혼동 금지.
2. 한글 콘텐츠는 GmarketSans/KIMM_Bold 로딩이 어려운 환경에서는 Pretendard Variable + Noto Sans KR을 폴백으로 사용. var(--kist-font-sans)의 폴백 체인에 system-ui가 포함되어 있어 자체 호스팅이 없어도 동작한다.
3. radius/shadow 기본값을 절대 변경하지 말 것 — KIST 시그니처는 sharp + flat.
4. 로고를 사용할 때 assets/logos/logo_main.png(또는 _on.png)를 직접 참조하거나 복사하여 사용 — 색을 덮어쓰거나 그라디언트로 채우지 말 것. §2 Key-Visual Rule을 따라 표지·본문 슬라이드 헤더·마무리 슬라이드, 페이지 헤더·푸터, 표지·챕터 헤더 등 모든 키비주얼에 로고 PNG를 반드시 이미지로 삽입한다. 텍스트 "KIST"로 대체 금지. python-pptx에서는 slide.shapes.add_picture(path, x, y, width=Inches(W))로, HTML/CSS에서는 <img src="...">로 삽입.
5. 시그니처 그라디언트(#FF7E00 → #E03710)는 데코·라벨·짧은 띠로만 사용. 본문 배경 전체에 깔지 말 것.
6. 다른 도메인/페이지를 만들 때도 §8 금지 항목을 점검.
7. "값을 모르겠다" 싶을 때는 reference/tokens.css / reference/tokens.json을 먼저 열어볼 것.
8. 본 스킬은 KIST 룩&필 참조 디자인 시스템이며 KIST 명의의 공식 산출물(보도자료, 공식 홈페이지, 명함, 공인 발표자료)을 KIST의 사전 허가 없이 제작하는 용도가 아님.

저작권 / 출처 고지

• 자산 소유권: 본 스킬에 포함된 KIST 로고(assets/logos/), 아이콘(assets/icons/), favicon, 스크린샷(screenshots/)은 한국과학기술연구원(KIST, https://kist.re.kr) 소유입니다. 본 스킬은 디자인 시스템 참조용 수집물이며 자산 재배포/재가공 배포를 금지합니다.
• 폰트 라이선스: GmarketSans / KIMM_Bold / NotoKr / Material Icons는 각각 별도 라이선스가 적용됩니다 — LICENSE_NOTICE.md 참조.
• 출처 URL: 모든 자산의 원본 URL은 assets/manifest.json의 source_url 필드에 기록.
• 사용 범위: 본 스킬은 KIST와 동일한 룩&필의 페이지/문서/슬라이드 제작 시 색·폰트·컴포넌트 토큰을 즉시 제공하는 참조 디자인 시스템입니다. KIST 명의 산출물 제작 용도가 아닙니다.
• 수집 시점: 2026-05-11 ~ 2026-05-12.
• 수집 워크플로우: kist-brand-build 오케스트레이터 6-agent 팀 (web-investigator → token-extractor + asset-collector + component-pattern-analyzer → brand-skill-author → visual-qa-reviewer).