@charset "utf-8";
/* ============================================================
   캐럿 타이포그래피 — 프리텐다드 + 황금비 스케일
   default.css 다음에 로드된다 (head.sub.php).

   [스케일 근거]
   황금비 1.618 을 그대로 단계비로 쓰면 16 → 26 → 42 → 68 로 너무 성기다.
   그래서 단계비는 √1.618 = 1.272 를 쓰고, 두 단계를 건너뛰면 정확히 1.618 이
   되도록 맞췄다. (16 × 1.272² = 25.9 ≈ 26,  26 × 1.272² = 42)
   행간은 본문에 황금비 1.618 을 그대로 쓰고, 제목은 1.272 로 좁힌다.
   여백은 황금비에 수렴하는 피보나치 수열(8·13·21·34·55)을 쓴다.

   [적용 범위 — 중요]
   폰트 지정은 전역이지만, 크기/행간 스케일은 캐럿 컴포넌트
   (.carat_* · .clab_* · .tv_*) 에만 적용한다.
   그누보드 기본 스킨은 body{font-size:0.75em} 을 기준으로 모든 크기를 em 으로
   쌓아 올리기 때문에, 전역으로 크기를 건드리면 게시판·회원·쇼핑몰 화면이
   전부 어긋난다. 그래서 스케일은 rem 으로만 쓰고 body 는 그대로 둔다.
   ============================================================ */

:root{
    --font-sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
                system-ui,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
    --font-mono:'D2Coding',Consolas,'SFMono-Regular',Menlo,monospace;

    /* 글자 크기 — 단계비 1.272 (√φ), 두 단계 = 황금비 */
    --fs-100:0.75rem;    /* 12 — 캡션·뱃지 */
    --fs-200:0.875rem;   /* 14 — 보조 텍스트 */
    --fs-300:1rem;       /* 16 — 본문 기준 */
    --fs-400:1.25rem;    /* 20 — 소제목 */
    --fs-500:1.625rem;   /* 26 — 섹션 제목 (= 16 × φ) */
    --fs-600:2.0625rem;  /* 33 — 페이지 제목 */
    --fs-700:2.625rem;   /* 42 — 히어로 (= 26 × φ) */

    /* 행간 */
    --lh-tight:1.272;    /* 제목 */
    --lh-snug:1.45;      /* 카드 제목처럼 2~3줄짜리 */
    --lh-body:1.618;     /* 본문 — 황금비 */

    /* 여백 — 피보나치 */
    --sp-1:8px;
    --sp-2:13px;
    --sp-3:21px;
    --sp-4:34px;
    --sp-5:55px;

    /* 자간 — 큰 글자일수록 좁혀야 균형이 맞는다 */
    --ls-tight:-0.022em;
    --ls-snug:-0.014em;
}

/* ---------- 폰트 교체 (전역) ----------
   default.css 가 body/제목/폼요소에 각각 'Malgun Gothic' 을 따로 박아둬서
   같은 선택자들을 그대로 다시 지정해야 이긴다. */
body,
h1, h2, h3, h4, h5, h6,
input, button, textarea, select,
.tbl_head01 th, .tbl_head01 td{
    font-family:var(--font-sans);
}
body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    word-break:keep-all;      /* 한글 어절 단위 줄바꿈 */
}
code, pre, kbd, samp{ font-family:var(--font-mono); }

/* 프리텐다드는 700 이 충분히 굵어서 800~900 은 뭉개져 보인다 */
strong, b{ font-weight:700; }

/* ---------- 캐럿 컴포넌트 스케일 ---------- */
.carat_home, .carat_sub, .clab, .clab_layout, .tv_wrap{
    font-size:var(--fs-300);
    line-height:var(--lh-body);
    letter-spacing:var(--ls-snug);
}

/* 히어로 / 페이지 제목 */
.clab_hero h1, .clab_hero h2{
    font-size:var(--fs-700); line-height:var(--lh-tight); letter-spacing:var(--ls-tight);
    margin:0 0 var(--sp-2);
}
.clab_hero p{ font-size:var(--fs-400); line-height:var(--lh-snug); }

.carat_sub #container_title,
.carat_view__head h1{
    font-size:var(--fs-500); line-height:var(--lh-tight); letter-spacing:var(--ls-tight);
}

/* 섹션 제목 */
.clab_sec__title, .carat_sec__title, .carat_rel h3, .carat_guide h3, .carat_faq h3{
    font-size:var(--fs-400); line-height:var(--lh-tight); letter-spacing:var(--ls-tight);
    margin:0 0 var(--sp-3);
}

/* 카드 — 제목은 2줄이 잦아 snug, 설명/메타는 한 단계 아래 */
.clab_card__title, .tv_card__title, .carat_card__title{
    font-size:var(--fs-300); line-height:var(--lh-snug); letter-spacing:var(--ls-snug);
}
.clab_card__meta, .tv_card__meta, .carat_card__meta,
.clab_tag, .tv_badge, .carat_badge{
    font-size:var(--fs-100); line-height:var(--lh-snug);
}

/* 사이드바 / 내비 */
.carat_nav__link, .carat_side__menu a{
    font-size:var(--fs-200); line-height:var(--lh-snug);
}
.carat_side__widget h3{ font-size:var(--fs-100); }

/* 본문 산문 — 여기만 행간을 황금비로 넉넉히 */
.carat_view__desc, .carat_guide li, .carat_faq__item p, .tv_view__desc{
    font-size:var(--fs-300); line-height:var(--lh-body);
}

/* 코드/프롬프트 박스는 등폭이라 행간이 넓으면 덩어리로 안 읽힌다 */
.clab_card__prompt, .clab_modal__code, .carat_prompt, .tv_prompt{
    font-family:var(--font-mono); line-height:1.55; letter-spacing:0;
}

/* ---------- 좁은 화면: 큰 글자만 한 단계씩 내린다 ---------- */
@media (max-width:640px){
    :root{
        --fs-700:2.0625rem;  /* 42 → 33 */
        --fs-600:1.625rem;   /* 33 → 26 */
        --fs-500:1.25rem;    /* 26 → 20 */
    }
}