/* Pretendard — Tiro UI body font (design 레포 tokens: ui_body) */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css'); /* Averia Serif Libre — 영문 브랜드 모먼트 전용 (히어로 eyebrow, "Meet Tiro Pro"). 한글엔 절대 쓰지 않음 (hangul serif엔 Averia의 온기가 안 남 — 디자인 규칙). */ @import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400&display=swap'); /* ============================================================ Design tokens — 값은 design 레포 tokens/colors.yaml 그대로 인용. hex 리터럴은 이 :root 블록 안에서만 허용 (scripts/check-tokens.mjs). ============================================================ */ :root { /* neutral.stone */ --tiro-stone-200: #D6D3D1; --tiro-stone-500: #57534E; /* body secondary / descriptions */ --tiro-stone-600: #44403C; /* brand.brown */ --tiro-brown-30: #F8F2F0; --tiro-brown-50: #EBDAD4; --tiro-brown-100: #D5BAB2; --tiro-brown-200: #C6A296; --tiro-brown-300: #9C6D5F; --tiro-brown-500: #7A4B3D; --tiro-brown-700: #5C372B; --tiro-brown-800: #3A2018; --tiro-brown-light: #C8A98C; /* 다크모드 사이드바 헤더 (기존 값) */ /* brand.brown — 코드블록 함수/변수 강조용 중간톤 (brown-500·700 사이) */ --tiro-brown-600: #6B4234; /* feedback.amber — 업셀 카드 시안 B (nudge 배너 role) + Callout 주의 + 코드 키워드 */ --tiro-amber-50: #fffbeb; --tiro-amber-100: #fef3c7; --tiro-amber-200: #fde68a; --tiro-amber-500: #f59e0b; --tiro-amber-700: #b45309; /* feedback.rose — API 레퍼런스 "필수" 파라미터 + Callout 위험 (개발자 문서 톤). ⚠ design 레포 colors.yaml에 아직 없는 값 — 채택 시 tokens에 rose 스케일 추가 필요. */ --tiro-rose-50: #fff1f2; --tiro-rose-100: #ffe4e6; --tiro-rose-500: #f43f5e; --tiro-rose-700: #be123c; /* accent.lime — 코드블록 문자열(올리브). ⚠ 위와 동일, tokens에 추가 필요. */ --tiro-lime-700: #4d7c0f; /* 유틸 — CTA 버튼 텍스트 (디자인 토큰에 white 항목 없음, 관용값) */ --tiro-white: #FFFFFF; /* type — 영문 브랜드 세리프 (Averia). UI/한글은 Pretendard(상속). */ --tiro-serif: 'Averia Serif Libre', Georgia, serif; } /* 사이드바·navbar 다크브라운 override는 제거함. 사유: DESIGN.md SSOT = "light mode only" + 사이드바 stone-50(연회색). 다크브라운(이전 sol 커밋)은 디자인 시스템 deviation이었고, 최신 Mintlify에선 적용되어 브라운으로 렌더됨. 현 배포본(라이트)·디자인 시스템과 맞추기 위해 almond 기본(라이트) 유지. */ /* ============================================================ 사이드바 그룹 헤더(시작하기·대화 기록하기 등) — 카테고리 묶음 가독성. Mintlify 기본은 text-xs(12px)·font-semibold(600)이라 본문 링크에 묻힘. 브랜드 브라운 + 13px·700·살짝 자간으로 "섹션 구분선" 역할을 더 또렷이. ============================================================ */ .sidebar-group-header { color: var(--tiro-brown-800) !important; font-size: 1rem !important; /* 12 → 16px, 본문 링크(14px) 위로 확실히 점프 */ font-weight: 700 !important; /* semibold → bold */ letter-spacing: -0.005em; /* 큰 사이즈에서 살짝 조여 단단하게 */ margin-top: 0.25rem !important; margin-bottom: 0.6rem !important; /* 커진 헤더 아래 숨 트이게 */ } .sidebar-group-header .sidebar-group-icon { height: 1.05rem !important; /* 14 → ~17px, 커진 텍스트와 균형 */ width: 1.05rem !important; } .dark .sidebar-group-header { color: var(--tiro-brown-light) !important; } /* ============================================================ 홈을 사이드바에서 완전히 숨김 (헤더 + 링크 통째). Mintlify는 "탭/루트 착지점 = 네비 1번 항목"이라 홈을 네비에서 빼면 미아가 됨. → docs.json에선 홈을 자체 그룹(icon:"house")으로 네비 1번에 남겨 착지점 유지하되, 사이드바 렌더에서만 그 그룹 wrapper를 통째로 숨김. 타겟: 직속 자식(>)이 house 아이콘 헤더인 wrapper div만 (바깥 컨테이너는 헤더가 직속 자식이 아니라 안 걸림 → 사이드바 전체 증발 위험 없음). 결과: 탭 클릭·루트 진입 → 홈 착지, 사이드바엔 홈 안 보이고 "시작하기"부터 시작. ============================================================ */ #navigation-items div:has(> .sidebar-group-header > .sidebar-group-icon[style*="house"]) { display: none !important; } /* ============================================================ 현재 열람 중인 아티클 강조 — Granola 풍 소프트 라운드 하이라이트. 활성 링크:

안의 . Mintlify 기본은 글자색만 primary로 바꿔 "어디 있는지" 한눈에 안 들어옴. → 브라운-30 아이보리 pill 배경 + 라운드로 위치를 명확히. (#navigation-items로 스코프) ============================================================ */ /* pill geometry는 모든 링크에 상시 부여 → hover/active 전환 시 리플로우 없음 */ #navigation-items a { border-radius: 8px; margin-right: 8px; } #navigation-items a[aria-current="page"] { background: var(--tiro-brown-30) !important; font-weight: 600; } /* 비활성 링크 hover — pill 프리뷰로 클릭 가능 영역 암시 (Granola 동일 감각) */ #navigation-items a:not([aria-current="page"]):hover { background: color-mix(in srgb, var(--tiro-brown-30) 60%, transparent) !important; } .dark #navigation-items a[aria-current="page"] { background: color-mix(in srgb, var(--tiro-brown-300) 16%, transparent) !important; } .dark #navigation-items a:not([aria-current="page"]):hover { background: color-mix(in srgb, var(--tiro-brown-300) 9%, transparent) !important; } /* ============================================================ Card 컴포넌트 — 홈(무엇을 도와드릴까요?) 카테고리 카드 톤 정리. - 제목: 사이드바 그룹 헤더와 동일하게 브랜드 브라운 + bold (브랜드 통일) - 설명(한 줄): 16px → 13px로 줄여 제목과 위계 분리, 그리드 더 깔끔하게 전 페이지 공통 적용 (Card 쓰는 다른 페이지도 동일 톤). ============================================================ */ [data-component-part="card-title"] { color: var(--tiro-brown-800) !important; font-weight: 700 !important; } .dark [data-component-part="card-title"] { color: var(--tiro-brown-light) !important; } [data-component-part="card-content"] { font-size: 0.8125rem !important; /* text-base(16) → 13px */ line-height: 1.5 !important; } /* 카드 아이콘을 둥근 브라운 뱃지로 (1a/1b/1c 공통 — 디자인 덱 카드 톤). 기본은 size-6 회색 인라인 SVG → 40px 라운드 뱃지 + 브라운 아이콘. */ [data-component-part="card-icon"] { display: inline-flex !important; align-items: center; justify-content: center; width: 2.5rem !important; height: 2.5rem !important; margin-bottom: 0.85rem; background: var(--tiro-brown-800) !important; /* 1b — 브라운 채움 원형 뱃지 */ border-radius: 9999px !important; color: var(--tiro-brown-30) !important; fill: var(--tiro-brown-30) !important; } [data-component-part="card-icon"] svg { width: 1.25rem !important; height: 1.25rem !important; /* Mintlify FA 아이콘은 mask-image + background-color로 글리프를 칠함(bg-primary). 브라운 원 위에 보이도록 글리프 색을 크림(brown-30)으로 덮어씀. */ background-color: var(--tiro-brown-30) !important; } /* 페이지 하단 "이전/다음" 페이지네이션 푸터 전역 제거 (모든 페이지) */ #pagination { display: none !important; } #footer { display: none !important; } /* ============================================================ 아티클 부제 (frontmatter description) — Mintlify 기본 text-lg(18px)· prose-gray(진한 회색)라 본문과 위계가 약함. 브레드크럼(14px)보다 살짝 크고 본문(16px)보다는 작은 15px + 한 톤 연한 stone-500(토큰 'descriptions')으로 정리. 타겟: H1(#page-title) 컨테이너 바로 다음 형제인 prose 블록 = 부제 div. (본문 prose는 #page-title 형제가 아니라 안 걸림) ============================================================ */ div:has(> #page-title) + div.prose { font-size: 0.9375rem !important; /* 15px */ line-height: 1.55 !important; } div:has(> #page-title) + div.prose p { color: var(--tiro-stone-500) !important; } .dark div:has(> #page-title) + div.prose p { color: var(--tiro-stone-200) !important; } /* ============================================================ 홈 히어로 — brown-800 브랜드 밴드 (1b "Brand Hero", 2026 확정). 구 이미지 배너(tiro-user-guide.jpg) 폐기 → 세리프 영문 eyebrow + 흰 헤드라인 + 서브카피. 검색창은 밴드 하단에 겹쳐 뜸(플로팅). 카드 그리드는 위의 Card 공통 톤(브라운 제목/작은 설명) 그대로 사용. ============================================================ */ /* 홈 = mode:custom (헤더·브레드크럼·복사버튼·사이드바·TOC 전부 제거된 빈 캔버스). */ #tiro-home { width: 100%; max-width: none; margin: 0 auto; padding: 0 0 5rem; } #tiro-guide-hero, #tiro-developer-hero { display: block; width: 100%; max-width: 100%; padding: 4rem 1.5rem 5.5rem; background: var(--tiro-brown-800); /* 다크 브라운 브랜드 밴드 (1b, 확정) */ text-align: center; /* 콘텐츠 영역(사이드바 오른쪽)을 꽉 채움 — 100vw breakout은 가로 스크롤 유발해서 제거. 홈은 위 #content-container:has(#tiro-home) 규칙이 콘텐츠 패딩을 0으로 만들어 이미 풀폭. */ } #tiro-guide-hero { margin-bottom: -2.75rem; } /* 검색창이 밴드 하단에 겹치도록 */ #tiro-developer-hero { margin-bottom: 2.5rem; padding-bottom: 4rem; } /* 개발자 홈은 검색창 없음 */ /* 레거시 이미지 배너 흔적 제거 (구