/* ══════════════ 글 틀 ══════════════ */ .article { padding-block: clamp(24px, 4vw, 56px) clamp(56px, 8vw, 112px); } /* 목차가 오른쪽에 떠 있는 폭에서는 본문이 그 아래로 들어가지 않게 자리를 비운다. 추천 글 격자가 목차에 깔려 마지막 칸이 안 보였다. */ @media (min-width: 1200px) { .article { padding-right: 284px; } } /* ── 관련 추천 글 ── 플러그인(related-posts-thumbnails)이 마크업을 만든다. **원본에서 가져오는 것은 바꿀 수 없는 제약뿐이고, 모양은 이 화면의 규칙으로 정한다.** 제약 (플러그인이 강제한다) · DOM 고정: a > div > (이미지 div, 제목 div>span, 발췌 div) · 썸네일이 가 아니라 인라인 background-image !important 인 div 다 → 높이를 비율(padding-bottom)로 만들어야 한다 · 열 수가 --relposth-columns 로 들어온다 (3 / 태블릿 2 / 모바일 2) 모양 (리뉴얼) · 카드는 목록 카드와 같은 유리·둥글기·썸네일 비율(16:10) · 제목은 목록 카드 제목과 같은 서체·크기, 최대 세 줄 · 발췌 최대 네 줄 — 목록 카드에는 없지만 여기서는 글을 고르는 근거라 남긴다 */ .relpost-thumb-wrapper { margin-top: clamp(40px, 5vw, 72px); } .relpost-thumb-wrapper, .relpost-thumb-container { margin-inline: 0; padding: 0; } .relpost-thumb-container > div[style*="clear"] { display: none; } .relpost-thumb-container h3 { font-size: var(--t-eyebrow); line-height: var(--lh-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-3); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .relpost-block-container { display: grid; gap: 20px; width: 100%; grid-template-columns: repeat(var(--relposth-columns, 3), minmax(0, 1fr)); } @media (max-width: 899px) { .relpost-block-container { grid-template-columns: repeat(var(--relposth-columns_t, 2), minmax(0, 1fr)); } } @media (max-width: 559px) { .relpost-block-container { grid-template-columns: 1fr; } } .relpost-block-single { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--card-radius); text-decoration: none; background: var(--glass-fall), var(--glass-tint); box-shadow: var(--glass-edge-shadow), var(--glass-depth); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); } .relpost-block-single::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--glass-sheen); } .relpost-block-single:hover { transform: translateY(-4px); box-shadow: var(--glass-edge-shadow), var(--glass-depth-hi); } .relpost-block-container a::before, .relpost-block-container a::after { content: none; } /* 내부는 일반 블록 흐름으로 두며, 발췌의 아래 margin이 카드 밖으로 접히지 않도록 독립된 서식 영역을 만든다. */ .relpost-custom-block-single { padding: 0; display: flow-root; min-width: 0; height: auto !important; } .relpost-block-single-image, .relpost-block-single-image[style] { width: 100% !important; height: 0 !important; padding-bottom: 62.5% !important; border-radius: 0 !important; margin: 0 !important; background-color: #0a0f1e; } /* 제목·발췌의 높이는 **글자 칸에만** 준다 (content-box). border-box 로 두면 패딩이 높이를 먹어 둘째 줄이 칸 밖으로 새 나온다 — 실제로 그렇게 샜다. */ .relpost-block-single-text, .relpost-block-single-text[style] { box-sizing: content-box !important; padding: 16px 16px 0 !important; /* 판 안에 3열이라 카드가 200px 대다. 목록 카드 제목(--t-body)보다 한 단계 아래인 --t-sub 이 이 폭에 맞는다. 지금 화면 값(13.5px)을 베끼지 않는다. */ font-family: a2z, "Pretendard Variable", Pretendard, sans-serif !important; font-size: var(--t-sub) !important; font-weight: 600 !important; line-height: var(--lh-head) !important; color: var(--text) !important; height: calc(3em * var(--lh-head)) !important; overflow: hidden !important; text-align: left !important; } .relpost-block-single-text h2, .relpost-block-single-text .relpost-title-text { font: inherit !important; color: inherit !important; margin: 0 !important; padding: 0 !important; /* [프로젝트 확장] 패딩 없는 실제 글자 상자에서 잘라야 다음 줄이 새지 않는다. */ display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden !important; overflow-wrap: anywhere; } a .relpost-block-excerpt, .relpost-block-excerpt { box-sizing: content-box !important; /* [프로젝트 확장] line-clamp 상자에 패딩을 넣으면 추가 줄이 비친다. 바깥 margin으로 같은 간격을 보존하고 flow-root가 아래 여백을 포함한다. */ padding: 0 !important; margin: 10px 16px 16px !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow-wrap: anywhere; /* 지금 화면과 같은 4줄. 색만 올린다 — 원본 rgba(200,210,230,.5) 는 안 읽힌다. */ font-size: var(--t-cap) !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--text-2) !important; -webkit-text-fill-color: var(--text-2) !important; height: calc(4 * 1.6em) !important; overflow: hidden !important; text-align: left !important; } /* 읽기 바탕. 성운 배경 위에 글자를 바로 얹으면 읽기 힘들다. 글에는 제 바탕이 필요하다. 라이브는 backdrop-filter: blur(6px) + 배경 투명인데 둘 다 문제다 — 흐리기만 해서는 대비가 안 생기고, 25,000px 높이 요소에 backdrop-filter 를 걸면 매 프레임 뒤 화면을 다시 읽는다 (랜딩 PostCard 주석과 같은 이유). 흐림 없이 판을 깐다. 합성만 하면 되는 값이라 스크롤에 값이 붙지 않는다. */ .article-surface { position: relative; max-width: calc(var(--a-measure) + 2 * clamp(20px, 3.4vw, 56px)); margin-inline: auto; padding: clamp(28px, 3.4vw, 48px) clamp(20px, 3.4vw, 56px) clamp(40px, 5vw, 72px); border-radius: 24px; /* **유리를 쓰지 않는다.** 긴 글을 읽는 판은 카드가 아니다. .glass 를 붙였더니 흰 그라디언트(--glass-fall) + 표면광(::before) + saturate(1.65) 흐림이 얹혀, 바탕색을 아무리 어둡게 잡아도 회색으로 떴다. 읽는 판에 필요한 것은 재질이 아니라 **글자가 잘 보이는 어두운 바탕**이다. */ background: var(--a-surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 64px -24px rgba(0,0,0,.7); } /* 분류 알약 — 목록 카드의 것과 같다. 전에는 글자만 나열해서 같은 값이 화면마다 다르게 보였다. */ .article-cats { display: flex; flex-wrap: wrap; gap: 8px; } .article-cats .pill-cat { border-radius: 999px; padding: 6px 12px; line-height: 1; font-size: var(--t-cap); font-weight: 600; color: #fff; background: rgba(0,72,235,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px -4px rgba(0,0,0,.6); } /* 판 안에서는 본문이 이미 폭을 잡았으므로 다시 가운데 정렬하지 않는다 */ .article-surface .article-head, .article-surface .prose, .article-surface .article-cover { max-width: 100%; margin-inline: 0; } @media (max-width: 639px) { .article-surface { /* 좁은 화면에서 판이 화면 폭을 다 쓴다. 좌우에 남는 4px 이 오히려 지저분하다. */ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-radius: 0; } } .article-head { max-width: var(--a-measure); margin-inline: auto; } .article-cats { display: flex; gap: 10px; flex-wrap: wrap; font-size: var(--t-cap); font-weight: 600; color: var(--accent-3); } /* 제목에 text-wrap: balance 를 쓰지 않는다. balance 는 줄을 고르게 나누느라 폭을 일부러 안 쓴다 — 실측 53% / 54% 로 양쪽 다 반만 차서 "자리가 남는데 왜 여기서 끊지?" 로 보였다. pretty 는 83% 를 쓰지만 "[로컬 LLM] 맥북에 로컬 / LLM 설치하기" 처럼 붙어 있어야 할 말을 가른다. auto 가 폭을 가장 잘 쓰고(83%) 어절도 안 가른다. word-break:keep-all 이 이미 어절을 지키므로 balance 의 역할이 없다. */ .article-title { font-family: a2z, "Pretendard Variable", Pretendard, sans-serif; font-size: var(--a-title); font-weight: 700; line-height: var(--lh-head); letter-spacing: -.015em; margin-top: 14px; } .article-date { margin-top: 16px; font-size: var(--t-cap); color: var(--a-meta); font-variant-numeric: tabular-nums; } .article-cover { margin-top: clamp(24px, 3vw, 40px); border-radius: 18px; overflow: hidden; } .article-cover img { width: 100%; height: auto; } /* ══════════════ 본문 ══════════════ 폭을 못 박아 한 줄 길이를 잡는다. 표와 코드만 이 폭을 넘어설 수 있다. */ .prose { max-width: var(--a-measure); margin-inline: auto; margin-top: clamp(32px, 4vw, 56px); /* 지금 화면 본문은 rgb(240,244,255)(--text) 다. 시안이 --text-2 로 한 단계 내려가 있어 카드 바탕과 같은 계열로 깔리며 칙칙했다. 되돌린다. */ font-size: var(--a-body); line-height: var(--a-lh-body); color: var(--text); } .prose > * + * { margin-top: var(--a-gap-p); } /* 헤딩 — A2Z. 위 여백을 아래의 3배쯤 둬서 "다음 덩어리의 머리"로 읽히게 한다. */ .prose h2, .prose h3, .prose h4 { font-family: a2z, "Pretendard Variable", Pretendard, sans-serif; color: var(--text); line-height: var(--a-lh-head); letter-spacing: -.01em; } .prose h2 { font-size: var(--a-h2); font-weight: 700; margin-top: var(--a-gap-h2); margin-bottom: 6px; } .prose h3 { font-size: var(--a-h3); font-weight: 700; margin-top: var(--a-gap-h3); margin-bottom: 4px; } /* 제목은 전부 흰색이다. h2·h3·h4 를 색으로 가르지 않는다 — 어두운 판 위에서 회색 제목은 흐린 글씨로 읽히지 제목으로 안 읽힌다. 처음에 파랑(--accent-3)을 줬다가 링크로 오해됐고, 다음엔 --text-2 회색을 줬는데 이번엔 탁했다. 위계는 **크기**가 만든다 (30 / 23 / 19). */ /* h3(23)와 19px 차이는 얇고 색까지 같아 4단계 위계가 눌렸다. 색을 낮추지 않고(어두운 판에서 회색 제목은 흐린 글씨로 읽힌다) 자간을 벌려 한 단계 더 가른다 — 크기·자간 둘로 구분한다. */ .prose h4 { font-size: var(--a-h4); font-weight: 700; margin-top: var(--a-gap-h4); margin-bottom: 2px; color: var(--text); letter-spacing: .04em; } /* h2 에만 눈금을 둬 큰 덩어리의 시작을 보이게 한다 */ .prose h2::before { content: ""; display: block; width: 28px; height: 2px; background: var(--accent); margin-bottom: 14px; border-radius: 2px; } .prose p { text-wrap: pretty; } .prose strong { color: var(--text); font-weight: 700; } .prose em { font-style: normal; color: var(--text); box-shadow: inset 0 -.42em 0 rgba(0,47,255,.22); } .prose a:not(.btn) { color: var(--accent-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: from-font; text-decoration-skip-ink: auto; /* 본문에 주소를 그대로 적은 링크가 있다. 320px 에서 이것 하나가 문서를 347px 로 밀어 가로 스크롤을 만들었다. 끊어지게 한다. */ overflow-wrap: anywhere; } /* 인라인 코드에도 같은 이유로 필요하다 — 긴 경로·식별자가 들어간다 */ .prose :not(pre) > code { overflow-wrap: anywhere; } .prose a:hover { color: var(--text); } /* 목록 */ .prose ul, .prose ol { padding-left: 1.35em; } .prose li + li { margin-top: 7px; } .prose li::marker { color: var(--text-3); } .prose ul > li::marker { content: "· "; font-weight: 700; } /* 인용 */ .prose blockquote { margin-block: var(--a-gap-block); padding: 2px 0 2px 22px; border-left: 2px solid var(--accent); color: var(--text); } .prose blockquote p + p { margin-top: 10px; } /* 구분선 — 12개나 쓰인다. 선보다 숨쉬는 자리로 둔다. */ .prose hr { border: 0; height: 1px; background: var(--line); margin-block: clamp(32px, 3.6vw, 52px); width: 120px; margin-inline: auto; } /* 표 — 13개. 본문 폭을 넘으면 가로로 스크롤한다(잘리지 않게). */ .prose figure.wp-block-table, .prose .table-scroll { margin-block: var(--a-gap-block); overflow-x: auto; -webkit-overflow-scrolling: touch; } .prose table { width: 100%; border-collapse: collapse; font-size: var(--a-small); line-height: 1.6; table-layout: auto; } /* 표 전체에 min-width 를 주면 열 수가 많을 때 첫 열이 눌린다. 실제로 4열 표를 520px 에 넣었더니 첫 열이 30px 이 되어 "자 / 리", "시 / 리 / 즈 / 명" 처럼 한 글자씩 쪼개졌다. 폭은 열이 정한다 — 열마다 최소치를 주고 표는 그 합만큼 넓어진다. */ .prose th, .prose td { min-width: 92px; } .prose th:first-child, .prose td:first-child { min-width: 104px; } @media (min-width: 640px) { .prose th:first-child, .prose td:first-child { white-space: normal; } } .prose th, .prose td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .prose thead th { color: var(--text); font-weight: 700; font-size: var(--t-cap); letter-spacing: .04em; background: rgba(255,255,255,.035); border-bottom-color: rgba(255,255,255,.16); position: sticky; top: 0; } .prose tbody tr:hover td { background: rgba(255,255,255,.025); } /* 세로 구분선을 다 걷으면 가볍지만, 첫 칼럼이 의도적으로 비어 있는 그룹 표에서는 그 빈 칸이 어느 칼럼 소속인지 흐려진다 (지금 화면은 4면 격자라 그 정보가 있었다). 첫 칼럼 오른쪽에만 헤어라인 하나를 되살린다 — 소속은 알려주되 격자로는 안 돌아간다. */ .prose th:first-child, .prose td:first-child { border-right: 1px solid rgba(255,255,255,.07); } /* 표 본문도 마찬가지. --text-2 는 셀이 많을 때 특히 어둡게 뭉친다. */ .prose td { color: var(--text); } /* ══════════════ 코드 — 3종을 한 벌로 ══════════════ 지금은 셋이 제각각이다 (실측): ① 인라인 Monaco 14 / 배경 #060a18 / 둥글기 4 ② 내장 코드박스 Monaco 14 / 배경 투명 / 둥글기 0 ③ 플러그인 Pretendard 14 / 배경 #2e3440 / 둥글기 0 ← 모노스페이스가 아니다 한 글 안에 코드 모양이 세 가지로 보인다. 서체·배경·둥글기·여백을 하나로 묶는다. 서체는 D2Coding — 프로젝트가 코딩 문체로 정한 것이고 한글 폭이 라틴의 정확히 2배다. */ .prose code, .prose pre, .prose kbd, .prose samp, .prose [class*="code-block-pro"], .prose [class*="code-block-pro"] *, .prose .shiki, .prose .shiki * { /* Code Block Pro 는 요소에 인라인 style 로 자기 글꼴(Code-Pro-JetBrains-Mono)과 크기(.875rem)를 직접 박는다. 선택자로는 못 이겨서 이 두 속성만 !important 를 쓴다. JetBrains Mono 에는 한글이 없어 코드 안 한글 주석이 폴백으로 떨어지고, 그러면 같은 상자 안에서 글꼴이 두 가지가 된다. D2Coding 은 한글 폭이 라틴의 정확히 2배라 줄이 어긋나지 않는다. */ font-family: d2coding, "D2Coding", ui-monospace, SFMono-Regular, Menlo, monospace !important; font-variant-ligatures: none; /* 랜덤 글자쌍이 합자로 묶이면 폭이 변한다 */ tab-size: 8; } /* ── 내장 코드박스(.wp-block-code)는 지금 화면 값을 그대로 쓴다 ── 여기에는 아스키 도표가 들어 있다. 글꼴·크기·줄간격·tab-size 중 하나만 달라져도 이미 그려진 도표가 흐트러진다. 실측한 지금 화면 값: Monaco, "Courier New", monospace / 14px / 24.5px / tab 8. D2Coding 이 한글 폭이 정확히 2배라 더 낫지만, 글이 이미 그 글꼴 기준으로 그려져 있다. 새 글꼴에 맞추는 것은 도표를 다시 그리는 일이라 글을 건드리게 된다 — 그건 이 리뉴얼의 범위가 아니다. */ .prose pre.wp-block-code, .prose pre.wp-block-code code { font-family: Monaco, "Courier New", monospace !important; font-size: 14px !important; line-height: 24.5px !important; tab-size: 8; letter-spacing: normal; } /* 지금 화면은 code 에 break-spaces 다 — 공백을 살리면서 긴 줄은 접는다. */ .prose pre.wp-block-code code { white-space: break-spaces; } .prose [class*="code-block-pro"], .prose [class*="code-block-pro"] *:not(textarea):not(input) { font-size: var(--a-code) !important; } /* 복사용 숨은 textarea 는 제외한다. 위 규칙에 걸리면 13px 이 되고, iOS 는 16px 미만 입력에 포커스가 가면 화면을 확대한다. */ .prose [class*="code-block-pro"] textarea, .prose textarea, .prose input, .prose select { font-size: 16px !important; } /* ① 인라인 — 글줄 안에 있으므로 배경을 옅게, 줄높이를 건드리지 않는다 */ .prose :not(pre) > code { font-size: .92em; padding: .12em .42em; border-radius: 5px; background: var(--code-inline-bg); color: var(--code-inline-fg); overflow-wrap: break-word; } /* ②③ 블록 — 같은 상자. 넘치면 가로 스크롤한다(지금 ③은 overflow-x:visible 이라 삐져나온다) */ .prose pre, .prose [class*="code-block-pro"] { margin-block: var(--a-gap-block); background: var(--code-bg) !important; border: 1px solid var(--code-line); border-radius: var(--code-radius); padding: 18px 20px; overflow-x: auto !important; -webkit-overflow-scrolling: touch; font-size: var(--a-code); line-height: var(--a-lh-code); } .prose pre code, .prose [class*="code-block-pro"] code, .prose .shiki, .prose .shiki span { background: none !important; padding: 0; border: 0; border-radius: 0; font-size: inherit; line-height: inherit; color: inherit; white-space: pre; } /* 플러그인이 자기 테마(nord)로 칠한 바탕을 눌러 우리 상자와 같게 만든다. 글자 색(구문 강조)은 그대로 둔다 — 그건 플러그인이 내는 정보다. */ .prose .shiki { background: transparent !important; } .prose [class*="code-block-pro"] > pre { margin: 0; border: 0; padding: 0; background: none !important; } /* 복사 버튼 — 플러그인이 붙인다. 상자 안 오른쪽 위에 둔다 */ .prose [class*="code-block-pro"] { position: relative; } .prose .code-block-pro-copy-button { top: 10px; right: 12px; } /* 상자 위 머리 띠(맥 신호등). 플러그인이 클래스 없이 인라인 background-color:#2e3440 (nord 테마 색) 을 박는다. 구조로 잡아 상자 색과 맞춘다. 신호등 점은 그대로 둔다 — 저자가 고른 장식이다. */ .prose [class*="code-block-pro"] > span:first-child { background-color: transparent !important; padding: 0 0 10px 0 !important; margin-bottom: 0 !important; } /* 플러그인이 line-height:1.25rem 도 인라인으로 박는다. 본문 코드 리듬에 맞춘다. */ .prose [class*="code-block-pro"], .prose [class*="code-block-pro"] * { line-height: var(--a-lh-code) !important; } /* ══════════════ 이미지 ══════════════ */ .prose figure { margin-block: var(--a-gap-block); } .prose img { width: 100%; height: auto; border-radius: 12px; } .prose figcaption { margin-top: 10px; font-size: var(--t-cap); color: var(--a-meta); text-align: center; } /* ══════════════ 모바일 ══════════════ */ @media (max-width: 639px) { .prose { font-size: 16px; } .prose pre, .prose [class*="code-block-pro"] { padding: 14px 16px; border-radius: 10px; } /* 코드와 표는 본문 여백을 넘어 화면 끝까지 쓴다 — 좁은 화면에서 가로 스크롤 칸을 넓게 */ .prose > figure.wp-block-table, .prose > pre, .prose > [class*="code-block-pro"] { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-radius: 0; border-inline: 0; } .prose h2::before { width: 22px; } } /* 판 위에서는 보조 글자색을 한 단계 올린다 (대비 3.55 → 5.16). 표(td)는 여기서 뺀다 — 표는 보조 글자가 아니라 본문이다. 이 규칙에 묶여 있어서 셀 글자가 #7185ad 로 깔렸고, 표가 많은 글에서 화면 전체가 칙칙해 보이는 가장 큰 원인이었다. */ .article-surface small, .article-surface figcaption, .article-surface time { color: var(--a-meta); } .prose li::marker { color: var(--a-meta); } /* keep-all 을 쓰면 긴 영문 토큰이 칸을 밀어낼 수 있다. 글줄 안에 그대로 적힌 주소·경로·식별자에만 예외를 준다. */ .prose a, .prose code, .prose td, .prose th { overflow-wrap: anywhere; } /* 코드 상자는 원래 안 끊는다 — 가로로 스크롤한다 */ .prose pre, .prose pre code, .prose [class*="code-block-pro"] { overflow-wrap: normal; } /* ══════════════════ 목차 ══════════════════ **동작·구조·크기는 원본 그대로**다 (initStickyTOC / .mp-sticky-toc): 흐름 밖에 뜬 240px 판, 1200 아래에서는 우하단 토글과 바텀시트, 현재 절은 왼쪽 테두리로 표시. **재질과 색만 리뉴얼 것으로 바꾼다.** 원본 값을 그대로 쓰면 이 화면에서만 다른 파란 판이 하나 떠 있는 꼴이 된다 — 카드·버튼과 같은 유리를 쓴다. */ .toc { position: fixed; top: 100px; right: 20px; width: 240px; max-height: calc(100svh - 140px); overflow-y: auto; z-index: 900; border-radius: var(--card-radius); padding: 20px 16px 16px; --edge-scale: 1.2; transition: opacity .3s var(--ease), transform .3s var(--ease); } .toc::-webkit-scrollbar { width: 3px; } .toc::-webkit-scrollbar-track { background: transparent; } .toc::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; } /* 제목은 큰 글자가 아니라 눈썹이다 — 원본도 11px 대문자 자간이었고, 리뉴얼에도 같은 자리에 .eyebrow 토큰이 있다. */ .toc-title { font-size: var(--t-eyebrow); line-height: var(--lh-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-3); margin-bottom: 8px; } .toc-desc { /* --text-3(#5a6a8a)은 이 판 위에서 3.45:1 이라 12.5px 글자로는 안 읽힌다. 실측해서 --text-2 로 올린다 (9.0:1). */ font-size: var(--t-cap); line-height: 1.55; color: var(--text-2); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .toc-list { list-style: none; margin: 0; padding: 0; } .toc-list li { margin: 0; padding: 0; } .toc-list a { display: block; padding: 7px 10px 7px 12px; font-size: var(--t-cap); line-height: 1.45; color: var(--text-2); border-left: 2px solid transparent; border-radius: 0 8px 8px 0; word-break: keep-all; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .toc-list a:hover { color: var(--text); background: rgba(255,255,255,.06); } /* 지금 절 — 원본과 같이 왼쪽 테두리로 표시한다. */ .toc-list a.is-current { color: var(--accent-3); border-left-color: var(--accent-3); background: rgba(0,47,255,.12); font-weight: 600; } .toc-list a:focus:not(:focus-visible) { outline: none; } /* 공유 버튼도 다른 버튼과 같은 규격이다 (44 / --t-cap / 알약) */ .toc-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; margin-top: 14px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: var(--t-cap); font-weight: 600; color: var(--text); --edge-scale: 1; transition: transform var(--dur-1) var(--ease); } .toc-share:hover { transform: translateY(-1px); } .toc-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .toc-nav a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-cap); color: var(--text-2); transition: color var(--dur-1); } .toc-nav a:hover { color: var(--text); } .toc-nav a + a { margin-left: auto; } /* 색은 여기서 정한다 — 좁은 화면 규칙 안에만 두면