/* web/public/blog/blog.css — 블로그 전용. 기존 테마 CSS는 건드리지 않고 .blog 아래에만 적용한다. */
/* 이야기 섹션(scw_2_1)에는 하단 여백이 없어 본문이 푸터에 붙는다. 게시판(scw_4_1)의
   관례를 따라 데스크톱 100px·모바일 50px을 블로그 쪽에서 준다. */
/* 색은 두 계열뿐이다 — 본문은 검정(--blog-ink), 강조(콜아웃·인용·링크·라벨)는 갈색조.
   회색조는 가독성 문제로 쓰지 않는다(PM 결정 2026-08-28). --blog-accent는 텍스트가 아닌
   보더·버튼 배경·호버 전용, 텍스트 갈색은 대비를 위해 더 어두운 --blog-brown을 쓴다. */
/* 위쪽 여백은 원래 로고+제목 블록(.sc_txt_area, 112px)이 만들고 있었다. 그 블록을 뺐으므로
   (2026-09-15 점검) 같은 자리를 여기서 준다 — 안 주면 본문이 SNB 바에 붙는다. */
.blog { --blog-max: 680px; --blog-ink: #111; --blog-brown: #6e5314; --blog-line: #e3e0d8; --blog-accent: #8a6d2b; padding-top: 56px; padding-bottom: 100px; }
.blog, .blog p, .blog li, .blog td, .blog th, .blog dd { font-size: 18px; line-height: 1.8; color: var(--blog-ink); }
/* 테마 default.css의 `.ssc article p`(color:#aaa)가 명시도(0,1,2)로 본문을 회색으로
   덮는다 — 원본 CSS는 수정 금지 영역이라 여기서 명시도(0,2,2)로 색만 되찾는다.
   글꼴·크기는 현재 렌더(고운바탕 20px)를 그대로 둔다. */
.ssc article.blog-article p { color: var(--blog-ink); }
.ssc article.blog-article .blog-summary p { color: var(--blog-brown); }
.ssc article.blog-article blockquote p { color: var(--blog-brown); }

.blog a { color: var(--blog-brown); text-decoration: underline; text-underline-offset: 3px; }

/* 글꼴은 고운바탕 하나로 통일한다(2026-09-15 사전 점검, 비트리 디자인팀). 테마는 본문 p에만
   고운바탕을 주고 제목·목록은 Pretendard라 한 화면에 두 글꼴이 섞여 있었다. */
.blog { font-family: 'Gowun Batang', 'Nanum Myeongjo', serif; }

/* 본문 크기를 되찾는다. 모바일 테마 m_sub.css의 `.ssc article p`가 12px·명시도(0,1,2)로
   위 `.blog p`(0,1,1)를 눌러, 모바일에서 본문이 12px로 나왔다(2026-09-15 점검 #47).
   원본 CSS는 수정 금지 영역이라 여기서 명시도(0,3,1)로 덮는다. 카드 요약(.blog-card p)은
   그대로 두려고 범위를 본문(.blog-article)으로 한정한다. */
.ssc .blog .blog-article p,
.ssc .blog .blog-article li,
.ssc .blog .blog-article dd,
.ssc .blog .blog-article dt,
.ssc .blog .blog-article td,
.ssc .blog .blog-article th { font-size: 18px; line-height: 1.8; }


/* 목록 */
.blog-tabs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 28px; padding: 0; list-style: none; }
.blog-tabs a { font-size: 15px; color: var(--blog-ink); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.blog-tabs a.active { font-weight: 700; border-bottom-color: var(--blog-ink); }
.blog-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px 24px; margin: 0; padding: 0; list-style: none; align-items: start; }
/* 카드는 어디를 눌러도 글로 들어간다 — 사진만 눌리는 줄 알았다는 지적(2026-09-15 점검,
   서관면옥)에 따라 제목 링크를 카드 전체로 늘린다. 마크업은 그대로 두는 방식이다. */
.blog-card { border-top: 1px solid var(--blog-line); padding-top: 16px; position: relative; }
.blog-card h3 a::after { content: ""; position: absolute; inset: 0; }
.blog-card:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }
.blog-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 12px; }
.blog-card .cat { font-size: 13px; letter-spacing: .04em; color: var(--blog-brown); }
.blog-card h3 { font-size: 20px; line-height: 1.4; margin: 6px 0 8px; }
.blog-card h3 a { color: var(--blog-ink); text-decoration: none; }
.blog-card p { font-size: 15px; line-height: 1.6; color: var(--blog-ink); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card time, .blog-card .updated { font-size: 13px; color: var(--blog-ink); }
.blog-empty { padding: 48px 0; color: var(--blog-ink); text-align: center; }

/* 상세 */
.blog-article { max-width: var(--blog-max); margin: 0 auto; }
.blog-article header .cat { font-size: 13px; letter-spacing: .04em; color: var(--blog-brown); }
.blog-article h1 { font-size: 30px; line-height: 1.35; margin: 8px 0 12px; }
.blog-article .meta { font-size: 14px; color: var(--blog-ink); margin-bottom: 24px; }
.blog-article .meta span + span::before { content: " · "; }
.blog-summary { background: #f6f4ee; border-left: 3px solid var(--blog-accent); padding: 16px 20px; margin: 0 0 28px; color: var(--blog-brown); }
.blog-summary p { margin: 0; }
.blog-cover { margin: 0 0 28px; }
.blog-cover img { display: block; width: 100%; height: auto; }
.blog-body h2 { font-size: 23px; line-height: 1.4; margin: 40px 0 12px; }
.blog-body h3 { font-size: 19px; margin: 28px 0 8px; }
.blog-body p { margin: 0 0 16px; }
.blog-body ul, .blog-body ol { margin: 0 0 16px; padding-left: 1.4em; }
.blog-body ul { list-style: disc; }
.blog-body ol { list-style: decimal; }
.blog-body img { max-width: 100%; height: auto; }
.blog-body blockquote { margin: 0 0 16px; padding: 4px 16px; border-left: 3px solid var(--blog-accent); color: var(--blog-brown); }
.blog-table { overflow-x: auto; margin: 0 0 16px; }
.blog-table table { border-collapse: collapse; width: 100%; min-width: 360px; }
.blog-table th, .blog-table td { border-bottom: 1px solid var(--blog-line); padding: 8px 10px; text-align: left; font-size: 16px; }
.blog-faq { margin-top: 44px; }
.blog-faq h2 { font-size: 23px; margin: 0 0 12px; }
.blog-faq dl { margin: 0; }
.blog-faq dt { font-weight: 700; margin-top: 16px; }
.blog-faq dd { margin: 4px 0 0; }
.blog-related { margin-top: 44px; border-top: 1px solid var(--blog-line); padding-top: 20px; }
.blog-related h2, .blog-sources h2 { font-size: 17px; margin: 0 0 8px; }
.blog-related ul, .blog-sources ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.blog-related li, .blog-sources li { font-size: 16px; }
.blog-sources { margin-top: 28px; }
/* 글 이동 — 이전·다음은 순서가 있는 관계라 좌우로 놓고 화살표로 방향을 표시한다.
   색은 요약 박스(#f6f4ee + accent)의 언어를 그대로 이어 쓴다. */
.blog-nav { margin-top: 56px; border-top: 1px solid var(--blog-line); padding-top: 28px;
            display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.blog .blog-nav-item { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
                       border: 1px solid var(--blog-line); background: #fbfaf7; text-decoration: none;
                       transition: border-color .18s ease, background-color .18s ease; }
.blog .blog-nav-item .dir { font-size: 13px; line-height: 1.4; color: var(--blog-brown); letter-spacing: .04em; }
.blog .blog-nav-item .t { font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--blog-ink);
                          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog .blog-nav-item.is-prev { grid-column: 1; }
.blog .blog-nav-item.is-next { grid-column: 2; text-align: right; }
.blog .blog-nav-item .dir::before, .blog .blog-nav-item .dir::after { display: inline-block; transition: transform .18s ease; }
.blog .blog-nav-item.is-prev .dir::before { content: "←"; margin-right: 6px; }
.blog .blog-nav-item.is-next .dir::after { content: "→"; margin-left: 6px; }
.blog .blog-nav-item:hover { border-color: var(--blog-accent); background: #f6f4ee; }
.blog .blog-nav-item:hover .t { color: var(--blog-accent); }
.blog .blog-nav-item.is-prev:hover .dir::before { transform: translateX(-3px); }
.blog .blog-nav-item.is-next:hover .dir::after { transform: translateX(3px); }

.blog .blog-nav-list { grid-column: 1 / -1; justify-self: center; margin-top: 16px; padding: 12px 34px;
                       background: var(--blog-accent); color: #fff; font-size: 15px; letter-spacing: .02em;
                       text-decoration: none; transition: background-color .18s ease; }
.blog .blog-nav-list:hover { background: #6f571f; }

.blog .blog-nav-item:focus-visible, .blog .blog-nav-list:focus-visible { outline: 2px solid var(--blog-accent); outline-offset: 2px; }

/* ── 상세 레이아웃: 넓은 화면에서는 오른쪽에 고정 '차례' 레일을 함께 보여준다.
   소제목은 본문에도 그대로 둔다 — 교정 원고의 문장이라 화면에서 숨기면 누락이다
   (PM 피드백 2026-09-04. 이전의 '본문에는 이미지·텍스트만' 지시를 대체). */
.blog-layout { position: relative; }
.blog-toc-rail { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: 210px; }
.blog-toc { position: sticky; top: 110px; }
.blog-toc-label { display: block; font-family: 'Gowun Batang', 'NanumMyeongjo', serif;
                  font-size: 15px; font-weight: 700; color: var(--blog-ink); margin-bottom: 10px; }
.blog-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--blog-line); }
.blog-toc a { display: block; padding: 5px 0 5px 14px; font-size: 14px; line-height: 1.5;
              color: var(--blog-ink); text-decoration: none; transition: color .18s ease; }
.blog-toc a:hover { color: var(--blog-accent); }

/* 테마의 .sub_content_wrapper{overflow-x:hidden}는 조상 스크롤 컨테이너를 만들어
   sticky를 죽인다. 블로그 상세가 있는 페이지만 clip으로 바꾼다(잘라내기만 하고
   스크롤 컨테이너는 만들지 않음). */
.sub_content_wrapper:has(.blog-layout) { overflow-x: clip; }

@media (min-width: 1280px) {
  .blog-toc-rail { display: block; }
}
/* 차례 앵커 점프가 고정 헤더에 가리지 않게 */
.blog-body h2[id], #blog-faq, #blog-related, #blog-sources { scroll-margin-top: 110px; }

@media (prefers-reduced-motion: reduce) {
  .blog .blog-nav-item, .blog .blog-nav-list,
  .blog .blog-nav-item .dir::before, .blog .blog-nav-item .dir::after { transition: none; }
  .blog .blog-nav-item:hover .dir::before, .blog .blog-nav-item:hover .dir::after { transform: none; }
}

@media (max-width: 640px) {
  .blog { padding-top: 28px; padding-bottom: 50px; }
  .blog, .blog p, .blog li, .blog td, .blog th, .blog dd { font-size: 17px; }
  /* 위 규칙은 모바일 테마(.ssc article p, 12px)에 눌린다 — 본문은 같은 명시도로 다시 준다. */
  .ssc .blog .blog-article p,
  .ssc .blog .blog-article li,
  .ssc .blog .blog-article dd,
  .ssc .blog .blog-article dt,
  .ssc .blog .blog-article td,
  .ssc .blog .blog-article th { font-size: 17px; }
  .blog-article h1 { font-size: 25px; }
  .blog-body h2 { font-size: 21px; }
  .blog-cards { grid-template-columns: 1fr; }
  .blog-nav { grid-template-columns: 1fr; padding-top: 24px; }
  .blog .blog-nav-item.is-prev, .blog .blog-nav-item.is-next { grid-column: 1; text-align: left; }
  .blog .blog-nav-list { justify-self: stretch; text-align: center; }
}