/* -------- Rouge code block base -------- */
figure.highlight,
.highlight {
    --code-bg: #0d1117;
    /* 다크 배경 */
    --code-fg: #e6edf3;
    /* 기본 글자색 */
    --gutter-bg: #0b1220;
    /* 줄번호 영역 */
    --gutter-fg: #9aa0a6;
    --rule: #1f2633;

    background: var(--code-bg);
    color: var(--code-fg);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
    overflow: auto;
    margin: 1rem 0;
    /* 위아래 간격 */
}

/* 폰트/크기: 화면 폭에 맞춰 유연하게 */
.highlight,
.highlight pre,
.highlight code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: clamp(14px, 1.4rem, 14px);
    line-height: 1.6;
}

/* Rouge가 linenos 켜면 table 구조를 만듦 */
figure.highlight .rouge-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
}

/* 줄번호(gutter)와 코드 영역 패딩 */
figure.highlight .rouge-table td.gutter,
figure.highlight .rouge-table td.code {
    padding: .6rem .9rem;
    vertical-align: top;
}

/* 줄번호 컬럼 */
figure.highlight .rouge-table td.gutter {
    background: var(--gutter-bg);
    color: var(--gutter-fg);
    width: 3.5rem;
    border-right: 1px solid var(--rule);
    text-align: right;
    user-select: none;
}

.highlight .lineno {
    opacity: .85;
}

/* 코드 본문 */
figure.highlight .rouge-table td.code {
    width: auto;
}

/* <pre> 기본 여백 초기화 */
figure.highlight pre {
    margin: 0;
    white-space: pre;
}

/* 가로 스크롤 부드럽게 */
.highlight {
    scrollbar-width: thin;
}

.highlight::-webkit-scrollbar {
    height: 9px;
}

.highlight::-webkit-scrollbar-thumb {
    background: #2a3241;
    border-radius: 6px;
}

/* -------- Rouge token colors (C 친화 팔레트) -------- */
/* 주석 */
.highlight .c,
.highlight .cm,
.highlight .c1,
.highlight .cs {
    color: #8b949e;
    font-style: italic;
}

/* 키워드: typedef, struct, if, return 등 */
.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kr,
.highlight .kt {
    color: #ff7b72;
    font-weight: 600;
}

/* 타입(내장): int, char 등 */
.highlight .kt {
    color: #79c0ff;
}

/* 전처리: #include, #define */
.highlight .cp,
.highlight .cpf {
    color: #d2a8ff;
}

/* 숫자 */
.highlight .m,
.highlight .mi,
.highlight .mf {
    color: #79c0ff;
}

/* 문자열/문자 */
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .se,
.highlight .sr {
    color: #a5d6ff;
}

/* 함수명 */
.highlight .nf {
    color: #7ee787;
}

/* 식별자(일반 이름) */
.highlight .n,
.highlight .na,
.highlight .nx {
    color: var(--code-fg);
}

/* 연산자/구두점 */
.highlight .o,
.highlight .p {
    color: #e6edf3;
}

/* 프로젝트 카드 하단 태그만 크게 */
.card .tags .tag {
    font-size: 0.9rem;
    /* 기본보다 큼 */
    padding: .45em .7em;
    /* 안쪽 여백 증가 */
}

.card .tags {
    gap: .4rem;
}

/* 태그 간 간격 */

/* 적용 범위를 페이지 본문으로 제한 (다른 영역 영향 최소화) */
#main-content li>strong,
#main-content li>.sensor-title {
    display: inline;
    /* block으로 바뀌어 있으면 inline으로 복원 */
    font-weight: 700;
    /* 굵게 유지 */
    margin: 0;
    /* 여백 제거 */
    padding: 0;
    font-size: inherit;
    /* 부모 폰트 크기 그대로 */
    line-height: 1.2;
    /* 제목의 줄 높이 (필요 시 1.1~1.3 조정) */
}

/* 제목 바로 아래의 하위 리스트 간격을 줄인다 */
#main-content li>strong+ul,
#main-content li>.sensor-title+ul {
    margin-top: 0.18em;
    /* 기본보다 작게 (원하면 0 또는 0.1em) */
    padding-top: 0;
}

/* li 자체의 하단 간격도 약간 조정 (목록 전체 간격을 자연스럽게 조절) */
#main-content li {
    margin-bottom: 0.35em;
    /* 필요 시 0.2~0.6em 범위로 조정 */
}

/* 공통 폰트 변수 */
:root {
    --title-font: 'Black Han Sans', 'Noto Sans KR', sans-serif;
    --body-font: 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
}

/* 본문 기본 폰트 */
html,
body {
    font-family: var(--body-font);
}

/* 히어로 제목/부제 폰트 */
section.hero .title {
    font-family: var(--title-font);
    font-weight: 400;
    letter-spacing: .02em;
}

section.hero .subtitle {
    font-family: var(--body-font);
    font-weight: 500;
}

/* ===== Hero 타이틀/부제 컨트롤러 ===== */
:root {
    /* 크기: clamp(최소, 뷰포트 비율, 최대) */
    --hero-title-size-min: 56px;
    --hero-title-size-vw: 5vw;
    --hero-title-size-max: 50px;

    --hero-sub-size-min: 18px;
    --hero-sub-size-vw: 2.5vw;
    --hero-sub-size-max: 25px;

    /* 간격 */
    --hero-title-letter: 0.03em;
    /* 자간(제목) */
    --hero-sub-letter: 0.02em;
    /* 자간(부제) */
    --hero-title-line: 1.08;
    /* 행간(제목) */
    --hero-sub-line: 2;
    /* 행간(부제) */
    --hero-gap: 1.2rem;
    /* 제목-부제 사이 간격 */
    --hero-padding-y: 5rem;
    /* 히어로 위/아래 여백 */
}

/* 히어로 전체 위아래 여백 */
section.hero .hero-body {
    padding-top: var(--hero-padding-y) !important;
    padding-bottom: var(--hero-padding-y) !important;
}

/* 제목 */
section.hero .title {
    font-family: var(--title-font);
    font-weight: 600;
    /* Black Han Sans는 보통 400 */
    font-size: clamp(var(--hero-title-size-min), var(--hero-title-size-vw), var(--hero-title-size-max));
    letter-spacing: var(--hero-title-letter);
    line-height: var(--hero-title-line);
    margin: 0 0 var(--hero-gap) 0;
    /* 아래쪽 간격만 */
}

/* 부제 */
section.hero .subtitle {
    font-family: var(--body-font);
    font-weight: 500;
    font-size: clamp(var(--hero-sub-size-min), var(--hero-sub-size-vw), var(--hero-sub-size-max));
    letter-spacing: var(--hero-sub-letter);
    line-height: var(--hero-sub-line);
    margin: 0;
}

/* 원하는 너비로 조절 */
.gh-btn {
  width: 320px;              /* 180~320px 등으로 바꿔도 됨 */
  justify-content: center;   /* 아이콘+텍스트 가운데 정렬 */
}