/* 261031 첫인상·한글 글꼴 점검 결과 — 저자 승인(1·2·3·4 "다 ㄱㄱ").
   한글 없는 웹글꼴(Manrope·JetBrains Mono)이나 Ghost 기본 시스템 글꼴을 쓰던 곳에서
   한글이 기기 기본 글꼴로 떨어지지 않게 사이트가 이미 싣는 프리텐다드를 명시한다.
   주간 검사: scripts/audit/audit_dameun_hangul_font.py */

/* 1. 글 끝 이전/다음 — 휴대폰에서도 "이전 글/다음 글" 글자를 보인다(원래 Solo는 모바일에서 숨기고 화살표만 남김). */
@media (max-width: 767px) {
    .gh-navigation { font-size: 1.7rem; }
    .gh-navigation-text { display: inline; }
}

/* 2. 갈색 버튼(구독하기·시리즈 전체 보기 등, Ghost 버튼 카드)
   Ghost cards.min.css(`.kg-button-card a.kg-btn`)가 이 파일보다 늦게 실리므로 한 단계 더 구체적으로 쓴다. */
.kg-btn,
.gh-content .kg-button-card a.kg-btn {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}

/* 3. 본문 표 — Solo 기본 `.gh-content table:not(.gist table)`이 --font-sans(Manrope, 한글 없음). 같은 선택자로 덮는다. */
.gh-content table:not(.gist table) {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}

/* 4. 형광펜(인라인 코드) — 영문은 코딩 글꼴 그대로, 한글만 프리텐다드 */
.gh-content code {
    font-family: "JetBrains Mono", 'Pretendard Variable', Pretendard, monospace;
}

/* 5. 261101 휴대폰 글 첫머리 — 저자 승인("굿", 시안 20_Projects/담은순간들_브랜드개선/261101_휴대폰 글머리 시안/).
   큰 작성자 사진·이름·날짜·태그가 세로로 쌓여 본문이 첫 화면 밖으로 밀리던 것을
   작은 사진·날짜·읽는 시간·태그 한 줄로. 이름은 사이트 이름과 같아 숨긴다. PC는 그대로. */
@media (max-width: 600px) {
    .gh-article-meta { margin-top: 2.4rem !important; margin-bottom: 0 !important; padding: 0 !important; }
    .gh-article-meta-inner { flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
    .gh-article-meta .gh-author-image-list { margin: 0 !important; }
    .gh-article-meta .gh-author-image-list .gh-author-image { width: 24px !important; height: 24px !important; margin: 0 !important; }
    .gh-article-meta .gh-author-image-list .gh-author-image img { width: 24px !important; height: 24px !important; }
    .gh-article-meta-wrapper { display: flex !important; align-items: center; gap: .2rem; margin: 0 !important; }
    .gh-article-meta .gh-author-name-list { display: none !important; }
    .gh-article-date, .reading-estimate { font-size: 1.4rem !important; }
    .gh-article-tag { margin: 0 0 0 .4rem !important; padding: .2rem 1rem !important; font-size: 1.3rem !important; }
    .gh-article-excerpt { font-size: 1.6rem !important; }
}

/* 6. 261101 글 제목·요약문 줄 간격 — 저자 승인("바꾸자", 시안 20_Projects/담은순간들_브랜드개선/261101_제목 행간 시안/).
   여러 줄 제목이 바짝 붙고(1.0) 요약문이 흐렸던 것을 PC·휴대폰 모두 조정. */
.gh-article-title { line-height: 1.22 !important; }
.gh-article-excerpt { line-height: 1.65 !important; color: rgba(35, 32, 25, .8) !important; }

/* 7. 261101 휴대폰 검색·메뉴 버튼의 누르는 범위 30→44px — 저자 승인("ㄱㄱ").
   두 버튼이 8px 간격으로 붙어 잘못 누르기 쉬웠다. 아이콘 크기·자리는 그대로(검색 아이콘만 6px 왼쪽),
   음수 여백으로 넓힌 만큼 상쇄하고 두 칸이 겹치지 않게 했다. 메뉴 줄은 넓어진 칸 안에서 같은 자리로 7px씩 옮긴다. */
@media (max-width: 767px) {
    .gh-head-brand .gh-search { width: 44px; height: 44px; margin: -7px 7px -7px -19px; }
    .gh-head-brand .gh-burger { width: 44px; height: 44px; margin: -7px -10px -7px -7px; }
    .gh-head-brand .gh-burger::before, .gh-head-brand .gh-burger::after { left: 10px; }
    .gh-head-brand .gh-burger::before { top: 18px; }
    .gh-head-brand .gh-burger::after { bottom: 18px; }
    .is-head-open .gh-head-brand .gh-burger::before { top: 22px; }
    .is-head-open .gh-head-brand .gh-burger::after { bottom: 21px; }
}

/* 8. 261101 글 안 사진·「그저 본 것」 대표 사진·크게 보기 — Colin Ware 적용, 저자 승인("둘 다 고쳐줘" → "묶어서 업로드까지").
   시안·근거: 20_Projects/담은순간들_브랜드개선/261101_Ware 적용_글 안 사진/ (크게 보기 조작은 assets/js/zoom.js) */
/* 8-1. 본문 사진: 그 사진을 부르는 문장과 한 화면에(Ware G9.5·11장). 칸 너비는 그대로, 사진만 칸 안 가운데.
        칸 너비를 사진에 맞추면 지연 로딩 사진의 칸이 0이 되어 영영 안 불러와진다(시안 v2에서 확인) → object-fit */
.gh-content .kg-image-card:not(.kg-width-full):not(.kg-width-wide) > .kg-image {
    max-height: calc(100vh - 16rem);
    object-fit: contain;
}
.gh-content .kg-image-card > figcaption {
    text-wrap: balance;
}
/* 8-2. 대표 사진: 사진 전체가 한 화면에, 누르면 크게(대표 사진은 지연 로딩이 아니라 칸을 사진에 맞춰도 안전) */
.gh-article-image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 4rem);
    margin-inline: auto;
    cursor: zoom-in;
}
/* 8-3. 크게 보기 배경: 테마 기본 검정 85%는 뒤 페이지 사진이 비쳐 테두리처럼 보임 → 불투명 먹색(브랜드 §7) */
.pswp__bg {
    background: #232019;
}

/* 8-4. 갤러리 한 줄도 본문 사진처럼 화면 높이 − 16rem까지(소개 문장과 한 화면). 줄 높이 = 줄 너비 ÷ 사진 비율 합이라
        비율 합(--soulace-row-ratio, photo-fit.js가 넣음)으로 줄 너비를 묶고 가운데에. 스크립트가 없으면 예전 그대로. */
.gh-content .kg-gallery-row {
    max-width: calc((100vh - 16rem) * var(--soulace-row-ratio, 100));
    margin-inline: auto;
}
/* 넓은 갤러리는 원래 왼쪽 글 정보(글쓴이·날짜·태그) 칸 위를 덮는다. 줄이 좁아져도 그 칸이 반쯤 드러나 잘려 보이지 않게 종이색으로 덮음 */
.gh-content .kg-gallery-card.kg-width-wide {
    background: var(--background-color, #FAF8F3);
}

/* 8-5. 갤러리를 글 왼쪽 선에서 시작(v1.5.17, 2026-11-01 저자 "선에 맞추자"). Solo는 갤러리를 화면 끝에서 끝(12칸)으로 펼쳐
        글쓴이·날짜·태그 칸 아래까지 퍼졌다. 테마가 '넓게' 사진 한 장에 쓰는 칸(글 왼쪽 선 → 오른쪽으로 넓게)과 맞춘다.
        줄이 화면 높이 때문에 좁아질 때도 가운데가 아니라 글 왼쪽 선에 붙인다. 폰(767px 이하)은 예전 그대로. */
@media (min-width: 768px) {
    .gh-canvas > .kg-gallery-card.kg-width-wide { grid-column: 4 / span 9; }
    .gh-content .kg-gallery-card.kg-width-wide .kg-gallery-row { margin-inline: 0 auto; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .gh-canvas > .kg-gallery-card.kg-width-wide { grid-column: 3 / span 10; }
}