/* =====================================================================
   blog.css — GEO 블로그 (트렐로 #182 · 트랙 B)

   격리 규약: 이 파일의 모든 규칙은 .mo-blog 스코프 안에서만 유효하다.
     전역 common.css 를 건드리지 않는다. renew 격리 방침과 같은 방식이고,
     브랜치를 통째로 되돌릴 때 이 파일만 지우면 흔적이 남지 않는다.

   ⚠ .mo-blog{margin:0} 을 먼저 박아 두는 이유:
     전역이 body/컨테이너에 마진을 주고 있으면 calc(100% - N) 계산이 어긋나
     모바일에서만 폭이 틀어진다. renew 에서 실제로 겪은 함정이라 선제로 잠근다.

   ── 디자인 토큰 ─────────────────────────────────────────────────────
   색과 글자 크기와 굵기는 renew/tokens.css 의 --mo-* 를 그대로 쓴다. 이 파일에
   새로 만들지 않는다. 토큰은 .mo-renew 스코프 안에서만 살아 있으므로 페이지
   본문 요소가 class="mo-renew" 안에 있어야 한다(views/blog/list.ejs · detail.ejs).
   여기서 새로 정의하는 --blog-* 는 전부 레이아웃 치수다. 색도 폰트도 아니다.

   ── ★440 비례 반응형(--lp-u)을 쓰지 않는다 (02 회차 결정) ────────────
   랜딩(landing_program)은 설계폭 390/400 을 기준으로 화면폭에 비례해 전체를
   축소·확대한다. 피그마 프레임과 Δ0 로 맞춰야 하기 때문이다.
   블로그는 그 규약을 따르지 않는다. 근거가 넷이다.
     1. 맞출 원본 시안이 없다. 블로그는 피그마 프레임에서 온 화면이 아니라
        글이다. Δ0 로 지킬 기준선이 애초에 없으니 비례 스케일의 이유도 없다.
     2. 비례 스케일은 좁은 기기에서 본문 글자를 같이 줄인다. 320px 기기라면
        0.82배라 17px 본문이 14px 로 내려앉는다. 광고 화면이라면 감수하겠지만
        읽으라고 만든 페이지에서 기기 폭이 글자 크기를 정하면 안 된다.
     3. 표가 망가진다. 비례 스케일은 표를 통째로 축소해 글씨를 못 읽게 만든다.
        블로그의 표는 축소가 아니라 자기 컨테이너 안에서 가로로 스크롤해야 한다.
     4. 토큰이 이미 답을 갖고 있다. tokens.css 는 768px 에서 H1/H2 와 라운드와
        콘텐츠 폭을 모바일 값으로 갈아 끼운다. 블로그는 그 전환만 타면 된다.
   따라서 블로그는 평범한 반응형이다: 읽기 좋은 폭의 컬럼 + 고정 글자 크기 +
   768px 에서 토큰이 알아서 바뀌는 구조.
   ===================================================================== */

.mo-blog {
    /* 레이아웃 치수(색·폰트 아님). 읽기 컬럼은 한 줄에 40자 안팎이 되는 720px. */
    --blog-col: 720px;
    --blog-side: 20px;
    --blog-top: 160px;
    --blog-bottom: 120px;
    --blog-gap: 28px;
    --blog-head-gap: 48px;

    margin: 0;
    background: var(--mo-white);
    padding: var(--blog-top) var(--blog-side) var(--blog-bottom);
}

.mo-blog__inner {
    max-width: var(--blog-col);
    margin: 0 auto;
}

/* ---------- 목록 ---------- */

.mo-blog .blog-listhead {
    margin: 0 0 40px;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--mo-line-2);
}

.mo-blog .blog-listhead__title {
    margin: 0;
    font-size: var(--mo-fs-h1);
    line-height: var(--mo-lh-h1);
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}

.mo-blog .blog-listhead__desc {
    margin: 8px 0 0;
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-body-sm);
    color: var(--mo-sub);
}

.mo-blog .blog-empty {
    margin: 0;
    font-size: var(--mo-fs-body);
    line-height: var(--mo-lh-body);
    color: var(--mo-sub);
}

.mo-blog .blog-cards {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mo-blog .blog-card {
    border-bottom: 1px solid var(--mo-line-2);
}

.mo-blog .blog-card__link {
    display: block;
    padding: 28px 0;
    text-decoration: none;
    color: inherit;
}

.mo-blog .blog-card__link:hover .blog-card__title {
    color: var(--mo-red);
}

.mo-blog .blog-card__title {
    margin: 0;
    font-size: var(--mo-fs-h3);
    line-height: var(--mo-lh-h3);
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}

.mo-blog .blog-card__excerpt {
    margin: 8px 0 0;
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-body-sm);
    color: var(--mo-ink-2);
}

.mo-blog .blog-card__meta {
    margin: 12px 0 0;
    font-size: var(--mo-fs-caption);
    line-height: var(--mo-lh-caption);
    color: var(--mo-sub);
}

.mo-blog .blog-card__author+.blog-card__date::before {
    content: " · ";
}

/* ---------- 상세: 머리말 ---------- */

.mo-blog .blog-draftmark {
    margin: 0 0 24px;
    padding: 12px 16px;
    border: 1px solid var(--mo-red);
    border-radius: var(--mo-r-ui);
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-body-sm);
    color: var(--mo-red);
}

.mo-blog .blog-arthead {
    margin: 0 0 var(--blog-head-gap);
    padding: 0 0 24px;
    border-bottom: 1px solid var(--mo-line-2);
}

.mo-blog .blog-arthead__title {
    margin: 0;
    font-size: var(--mo-fs-h1);
    line-height: var(--mo-lh-h1);
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}

.mo-blog .blog-arthead__meta {
    margin: 16px 0 0;
    font-size: var(--mo-fs-caption);
    line-height: var(--mo-lh-caption);
    color: var(--mo-sub);
}

.mo-blog .blog-arthead__author+.blog-arthead__date::before {
    content: " · ";
}

/* ---------- 블록 8종 ---------- */

/* lead : 회색 카드. 본문보다 한 단 큰 크기(H3). */
.mo-blog .blog-lead {
    margin: 0 0 var(--blog-gap);
    padding: 24px;
    background: var(--mo-bg);
    border-radius: var(--mo-r-ui);
}

.mo-blog .blog-lead__text {
    margin: 0;
    font-size: var(--mo-fs-h3);
    line-height: var(--mo-lh-h3);
    color: var(--mo-ink);
}

/* h2 : 중제목. 위 여백을 아래보다 크게 잡아 단락 묶음이 눈에 들어오게 한다. */
.mo-blog .blog-h2 {
    margin: 56px 0 16px;
    font-size: var(--mo-fs-h2);
    line-height: var(--mo-lh-h2);
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}

.mo-blog .blog-body>.blog-h2:first-child {
    margin-top: 0;
}

/* para : 본문 한 문단 */
.mo-blog .blog-para {
    margin: 0 0 var(--blog-gap);
    font-size: var(--mo-fs-body);
    line-height: var(--mo-lh-body);
    color: var(--mo-ink);
}

/* list : 불릿과 번호 */
.mo-blog .blog-list {
    margin: 0 0 var(--blog-gap);
    padding-left: 22px;
    list-style: disc;
}

.mo-blog .blog-list--ordered {
    list-style: decimal;
}

.mo-blog .blog-list__item {
    margin: 0 0 8px;
    font-size: var(--mo-fs-body);
    line-height: var(--mo-lh-body);
    color: var(--mo-ink);
}

/* table : ★가로 스크롤을 자기 컨테이너 안에서 처리한다.
   min-width 를 주는 이유 — 좁은 화면에서 칸을 짓뭉개는 대신 표만 옆으로
   밀리게 하려는 것이다. 본문은 제자리에 있고 표만 움직인다. */
.mo-blog .blog-table {
    margin: 0 0 var(--blog-gap);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--mo-line-2);
    border-radius: var(--mo-r-ui);
}

/* ★칼럼 폭 규칙(트렐로 #188, 2026-09-16).
   table-layout:fixed 를 쓰는 이유 — auto 레이아웃은 글자 많은 칸에 폭을
   몰아준다. 그래서 첫 칼럼(구분 열)이 3~4글자에서 접히고 나머지 칸끼리
   폭도 제각각이었다. fixed 는 폭을 안 준 칸들끼리 남은 폭을 똑같이 나눈다.
   2칸이면 5:5, 3칸이면 뒤 둘이 5:5, 4칸이면 뒤 셋이 균등이다. */
.mo-blog .blog-table__el {
    width: 100%;
    min-width: 480px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-body-sm);
    color: var(--mo-ink);
}

/* 첫 칼럼만 폭을 못박는다. 한글 6글자(6em) + 좌우 패딩 28px.
   px 가 아니라 em 인 이유는 모바일에서 글자 토큰이 줄면 칸도 같이 줄어야
   6글자가 유지되기 때문이다. */
.mo-blog .blog-table__el tr>*:first-child {
    width: calc(6em + 28px);
}

/* ★nowrap 을 뺐다(#188). 머리행을 한 줄로 강제하면 긴 머리글이 있는 칼럼이
   폭을 독차지해 첫 칼럼을 짓뭉갰다. fixed 에서는 칸 밖으로 삐져나오기까지
   한다. 한글은 어절 단위로 접는다. */
.mo-blog .blog-table__th {
    padding: 12px 14px;
    background: var(--mo-bg);
    border-bottom: 1px solid var(--mo-line-2);
    font-weight: var(--mo-w-medium);
    text-align: left;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ★어절 단위로 접는다(#188). 기본 규칙은 한글을 아무 글자에서나 끊어서
   '사용 에 / 너지' 처럼 낱말을 반 토막 낸다. keep-all 이 그걸 막는다.
   break-word 를 같이 두는 이유 — '슈링크·울쎄라피(HIFU)' 처럼 공백 없는
   덩어리가 칸보다 길면 keep-all 만으로는 칸 밖으로 삐져나오기 때문이다. */
.mo-blog .blog-table__td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--mo-line-2);
    vertical-align: top;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.mo-blog .blog-table__el tr:last-child .blog-table__td {
    border-bottom: 0;
}

/* faq : 접지 않는다. 답을 처음부터 다 보여 준다(views/blog/widgets/faq.ejs 주석).
   ★겉모습은 renew 의 FAQ 카드(renew/widgets.css 의 .mo-faq)를 옮겨 심은 것이다.
     흰 카드와 'Question N.' 칩과 여백이 그것이다. 옮기면서 셋을 바꿨다.

     1. 라운드를 --mo-r-sm(35px) 대신 --mo-r-ui(8px) 로 쓴다.
        renew 의 디바이스 페이지는 카드가 화면폭만큼 넓어서 35px 가 맞지만,
        블로그는 읽기 컬럼이 720px 이고 바로 위아래에 .blog-lead 와 .blog-table
        이 8px 로 서 있다. 한 글 안에서 카드 모서리가 두 종류면 어긋나 보인다.
     2. 흰 카드를 흰 바탕 위에 놓으므로 1px 테두리로 경계를 만든다.
        renew 는 회색 섬(.device-body 의 --mo-bg-2) 위에 놓아서 테두리가 없다.
        블로그 본문 바탕은 --mo-white 라 그대로 가져오면 카드가 안 보인다.
        회색 섬을 깔지 않은 이유는 하나다 — 글 중간에 배경색 덩어리가 끼면
        읽는 흐름이 끊긴다. 테두리 쪽이 이 페이지에 맞다.
     3. 여백을 30/35 에서 28/30 으로 줄여 .blog-lead(24) 와 결을 맞춘다.

     글자 크기와 행간은 renew 그대로다. 질문 20/31, 답 15/29.
   ★아코디언은 안 가져왔다. 여기에 여닫는 규칙이 없는 것이 정상이다. */
.mo-blog .blog-faq {
    margin: 0 0 var(--blog-gap);
}

.mo-blog .blog-faq__list {
    margin: 0;
}

.mo-blog .blog-faq__item {
    margin: 0 0 16px;
    padding: 28px 30px;
    background: var(--mo-white);
    border: 1px solid var(--mo-line-2);
    border-radius: var(--mo-r-ui);
}

.mo-blog .blog-faq__item:last-child {
    margin-bottom: 0;
}

/* 'Question N.' 칩. 회색 라운드에 영문 서체다.
   ⚠renew 원본의 문구는 'Qestion' 이다(피그마 표기 그대로의 오타).
     블로그는 색인되는 글이라 마크업에서 고쳐 썼다(faq.ejs). */
.mo-blog .blog-faq__label {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 13px;
    background: var(--mo-bg);
    border-radius: var(--mo-r-ui);
    font-family: var(--mo-font-en);
    font-size: var(--mo-fs-caption);
    line-height: var(--mo-lh-caption);
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}

.mo-blog .blog-faq__q {
    margin: 0;
    padding: 0;
}

/* 칩 다음 줄로 내리는 것이 이 display:block 의 일이다. 지우면 칩과 질문이
   한 줄에 붙는다(칩이 inline-block 이라서 그렇다). */
.mo-blog .blog-faq__q-text {
    display: block;
    font-size: var(--mo-fs-h3);
    line-height: var(--mo-lh-h3);
    font-weight: var(--mo-w-regular);
    color: var(--mo-ink);
}

.mo-blog .blog-faq__a {
    margin: 10px 0 0;
    padding: 0;
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-body-sm);
    color: var(--mo-ink-2);
}

/* image : 라운드와 여백 고정. 파일을 못 찾으면 대체 텍스트를 보여 준다. */
.mo-blog .blog-figure {
    margin: 0 0 var(--blog-gap);
}

.mo-blog .blog-figure__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--mo-r-xs);
}

.mo-blog .blog-figure--missing {
    padding: 32px 20px;
    background: var(--mo-bg);
    border: 1px dashed var(--mo-line);
    border-radius: var(--mo-r-xs);
}

.mo-blog .blog-figure__alt {
    margin: 0;
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-body-sm);
    color: var(--mo-sub);
    text-align: center;
}

/* cta : 브랜드 포인트 색 버튼 */
.mo-blog .blog-cta {
    margin: 40px 0 var(--blog-gap);
}

.mo-blog .blog-cta__btn {
    display: inline-block;
    padding: 14px 28px;
    background: var(--mo-red);
    border-radius: var(--mo-r-ui);
    color: var(--mo-white);
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-caption);
    font-weight: var(--mo-w-medium);
    text-decoration: none;
}

/* 모르는 블록 타입 — 관리자 미리보기에서만 나온다(views/blog/blocks.ejs) */
.mo-blog .blog-unknown {
    margin: 0 0 var(--blog-gap);
    padding: 16px;
    background: var(--mo-bg);
    border: 1px dashed var(--mo-red);
    border-radius: var(--mo-r-ui);
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-body-sm);
    color: var(--mo-red);
}

/* ---------- 목록으로 ---------- */

.mo-blog .blog-backnav {
    margin: 64px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--mo-line-2);
}

.mo-blog .blog-backnav__link {
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-body-sm);
    color: var(--mo-sub);
    text-decoration: none;
}

.mo-blog .blog-backnav__link:hover {
    color: var(--mo-ink);
}

/* ---------- 모바일 ----------
   전환폭 768 은 renew 규약과 같다. 글자 크기는 tokens.css 가 알아서 바꾸므로
   여기서는 여백만 줄인다. ★비례 스케일이 아니다(파일 머리말의 결정 참고). */
@media (max-width: 768px) {
    .mo-blog {
        --blog-top: 96px;
        --blog-bottom: 80px;
        --blog-side: 20px;
        --blog-gap: 24px;
    }

    .mo-blog .blog-h2 {
        margin-top: 44px;
    }

    .mo-blog .blog-lead {
        padding: 20px;
    }

    /* 카드 좌우 30 은 320 화면에서 본문 폭을 너무 깎는다. */
    .mo-blog .blog-faq__item {
        padding: 22px 20px;
    }

    .mo-blog .blog-cta__btn {
        display: block;
        text-align: center;
    }
}

/* ---------------------------------------------------------------
   2026-09-07 · 줍줍분석기 대응
   --------------------------------------------------------------- */

/* 본문 바로가기 — 평소엔 화면 밖, 탭으로 초점이 오면 나타난다.
   ★display:none 으로 감추면 안 된다. 그러면 초점 자체가 안 간다. */
.mo-blog .blog-skip,
.blog-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
}

.blog-skip:focus {
    left: 12px;
    top: 12px;
    padding: 10px 16px;
    border-radius: var(--mo-r-ui, 8px);
    background: var(--mo-ink, #111);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

/* 요약 이름표 — 도입 요약이 요약임을 사람과 기계에 같이 말한다.
   ★본문보다 작고 흐리게 둔다. 이 줄이 요약보다 눈에 띄면 순서가 뒤집힌다. */
.mo-blog .blog-lead__label {
    margin: 0 0 8px;
    font-size: var(--mo-fs-body-sm, 13px);
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mo-ink-3, #8a8a8a);
}

/* 표 제목 — 표 위에 왼쪽 정렬로 한 줄. */
.mo-blog .blog-table__caption {
    caption-side: top;
    padding: 0 0 8px;
    text-align: left;
    font-size: var(--mo-fs-body-sm, 13px);
    line-height: var(--mo-lh-body-sm, 1.6);
    font-weight: 600;
    color: var(--mo-ink-2, #555);
}

/* 그림은 자리를 미리 잡는다. width·height 속성이 붙어 있어도 CSS 로 폭을
   100% 로 늘리면 비율이 깨지므로 height:auto 를 같이 준다. */
.mo-blog .blog-figure__img {
    height: auto;
}

/* ---------------------------------------------------------------
   트렐로 #185 · 글 좌우 사이드바 (목차 · 인기글)

   요구는 둘이다 — 글 왼쪽에 '목차', 오른쪽에 '인기글'.
   참고 화면은 uni114 블로그이고, 거기서 제목만 한글로 바꿔 쓴다.

   ★가운데 글의 폭(--blog-col: 720px)을 한 픽셀도 안 건드린다.
     읽기 좋은 폭으로 정해 둔 값이라, 여기를 흔들면 이미 발행한 글 전부의
     줄바꿈이 바뀐다. 사이드바는 그 바깥의 빈 여백을 쓴다.

   ★기본이 '사이드바 없음' 이다. 좁은 화면 규칙을 따로 안 쓰고, 넓을 때만
     3단으로 켠다. 이렇게 두면 전환폭을 못 탄 화면에서도 글은 언제나 멀쩡하다.

   전환폭 1280 의 근거(더하기):
     사이드바 220 + 간격 40 + 글 720 + 간격 40 + 사이드바 220 = 1240,
     여기에 좌우 바깥 여백 20씩을 더하면 1280 이다. 흔한 노트북(1280·1366)이
     이 줄에 걸리도록 사이드바 폭을 220 으로 잡았다.
   --------------------------------------------------------------- */

.mo-blog--detail {
    --blog-aside: 220px;
    --blog-aside-gap: 40px;
    /* 고정 GNB 아래로 제목이 숨지 않게 하는 여백. 목차를 눌러 착지할 때 쓴다.
       ★이 값이 없으면 목차 링크는 '동작하는데 안 보이는' 상태가 된다 —
         제목이 화면 맨 위로 가고, 그 자리를 고정 GNB 가 덮는다. */
    --blog-anchor-gap: 120px;
}

/* 착지 지점 — 중제목 · 자주 묻는 질문 묶음 · 그 안의 질문 하나하나.
   목차가 쓰는 것은 앞의 둘이고, 질문 표식은 상담에서 주소로 보내는 용도다. */
.mo-blog--detail .blog-h2[id],
.mo-blog--detail .blog-faq[id],
.mo-blog--detail .blog-faq__q[id] {
    scroll-margin-top: var(--blog-anchor-gap);
}

/* 좁은 화면: 한 줄. DOM 순서 그대로 제목 → 목차 → 요약 → 본문 → 인기글이다.
   ★목차가 글 제목 아래에 있는 것이 기본이고, 왼쪽 여백으로 빼내는 것이 예외다
     (넓은 화면에서만). 반대로 짜면 좁은 화면에서 목차가 제목 위로 올라온다. */
.mo-blog__layout {
    max-width: var(--blog-col);
    margin: 0 auto;
}

/* ★목차를 왼쪽 여백으로 빼낼 때의 기준 상자. 빼내는 방식이 absolute 라서
   기준이 없으면 페이지 전체를 기준으로 잡아 엉뚱한 데로 간다. */
.mo-blog--detail .blog-article {
    position: relative;
}

/* 좁은 화면에서 제목과 요약 사이에 앉는다. */
.mo-blog--detail .mo-blog__aside--left {
    margin: 0 0 32px;
}

.mo-blog--detail .mo-blog__aside--right {
    margin: 56px 0 0;
}

/* ---------- 목차 ---------- */

.mo-blog .blog-toc__box {
    padding: 18px 20px;
    border: 1px solid var(--mo-line-2);
    border-radius: var(--mo-r-ui, 8px);
}

.mo-blog .blog-toc__title {
    margin: 0;
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-body-sm);
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
    cursor: pointer;
}

.mo-blog .blog-toc__list {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.mo-blog .blog-toc__item {
    margin: 0;
}

.mo-blog .blog-toc__item+.blog-toc__item {
    margin-top: 10px;
}

.mo-blog .blog-toc__link {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mo-sub);
    text-decoration: none;
    /* 왼쪽에 현재 위치 표시줄이 설 자리. 평소에는 투명하다.
       ★border 를 켜고 끄면 글자가 2px 씩 움직인다. 처음부터 자리를 잡아 둔다. */
    padding-left: 10px;
    border-left: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.mo-blog .blog-toc__link:hover {
    color: var(--mo-ink);
}

/* 자주 묻는 질문의 질문 — 중제목 아래 단계라 한 칸 들여쓴다. */
.mo-blog .blog-toc__item--lv3 .blog-toc__link {
    padding-left: 24px;
    font-size: 13px;
    color: var(--mo-sub);
}

/* 지금 읽고 있는 자리. 이 class 를 붙였다 떼는 것이 blog-toc.js 가 하는 일의 전부다.
   ★스크립트가 못 떠도 목차는 그대로 동작한다 — 표시만 안 될 뿐이다. */
.mo-blog .blog-toc__link.is-current {
    color: var(--mo-ink);
    font-weight: var(--mo-w-medium);
    border-left-color: var(--mo-ink);
}

/* ---------- 인기글 ---------- */

.mo-blog .blog-popular__title {
    margin: 0 0 4px;
    padding: 0 0 12px;
    font-size: var(--mo-fs-body-sm);
    line-height: var(--mo-lh-body-sm);
    font-weight: var(--mo-w-medium);
    color: var(--mo-ink);
}

.mo-blog .blog-popular__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mo-blog .blog-popular__item {
    border-top: 1px solid var(--mo-line-2);
}

.mo-blog .blog-popular__link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    text-decoration: none;
}

.mo-blog .blog-popular__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--mo-ink);
}

.mo-blog .blog-popular__link:hover .blog-popular__text {
    text-decoration: underline;
}

/* 썸네일 — 정사각형으로 잘라 쓴다. width·height 속성이 HTML 에 있어서
   그림이 늦게 와도 목록이 밀리지 않는다. */
.mo-blog .blog-popular__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--mo-line-2);
}

/* ---------- 넓은 화면: 3단 ---------- */
@media (min-width: 1280px) {
    .mo-blog--detail .mo-blog__layout {
        display: grid;
        grid-template-columns: var(--blog-aside) var(--blog-col) var(--blog-aside);
        column-gap: var(--blog-aside-gap);
        justify-content: center;
        /* ★start 여야 sticky 가 산다. stretch(기본) 면 칸이 글 높이만큼 늘어나고,
           늘어난 칸 안에서는 붙을 자리가 없어 sticky 가 아무 일도 안 한다. */
        align-items: start;
        max-width: none;
    }

    /* ★첫째 칸은 비워 둔다 — 목차가 그 자리에 '떠서' 들어오기 때문이다.
       자리를 명시하지 않으면 글이 첫째 칸으로 올라가 화면이 왼쪽으로 쏠린다. */
    .mo-blog--detail .mo-blog__inner {
        grid-column: 2;
    }

    .mo-blog--detail .mo-blog__aside--right {
        grid-column: 3;
        position: sticky;
        top: var(--blog-anchor-gap);
        margin: 0;
        max-height: calc(100vh - var(--blog-anchor-gap) - 40px);
        overflow-y: auto;
    }

    /* 목차를 글 흐름에서 들어내 왼쪽 여백에 세운다.
       ★DOM 은 제목 바로 아래 그대로다(좁은 화면이 그 순서를 쓴다). 여기서는
         보이는 자리만 옮긴다.
       왼쪽으로 미는 거리 = 사이드바 폭 + 칸 사이 간격. 그러면 레이아웃 첫째 칸에
       정확히 얹힌다.
       ★height:100% 로 글 높이만큼 늘려 두는 것이 요점이다. 이 상자가 sticky 의
         활동 범위라서, 높이가 없으면 목차가 따라다니지 않고 맨 위에 박힌다.
         글이 끝나면 목차도 같이 멈춘다 — 푸터까지 따라 내려가지 않는다. */
    .mo-blog--detail .mo-blog__aside--left {
        position: absolute;
        top: 0;
        left: calc(-1 * (var(--blog-aside) + var(--blog-aside-gap)));
        width: var(--blog-aside);
        height: 100%;
        margin: 0;
    }

    .mo-blog--detail .blog-toc {
        display: block;
        position: sticky;
        top: var(--blog-anchor-gap);
        /* 목차가 화면보다 길면 그 안에서만 스크롤한다. 페이지를 밀지 않는다. */
        max-height: calc(100vh - var(--blog-anchor-gap) - 40px);
        overflow-y: auto;
    }

    /* 넓은 화면에서는 목차를 접을 일이 없다. 삼각형 표시만 감추고 제목은 남긴다.
       ★내용을 감추는 것이 아니라 표식만 감춘다. details 는 open 인 채다. */
    .mo-blog--detail .blog-toc__title {
        cursor: default;
        list-style: none;
    }

    .mo-blog--detail .blog-toc__title::-webkit-details-marker {
        display: none;
    }

    /* 왼쪽 목차는 테두리 상자를 벗는다 — 참고 화면처럼 여백 위에 글만 선다. */
    .mo-blog--detail .blog-toc__box {
        padding: 0;
        border: 0;
    }
}