/* Oh,zip 글 상세 · 카테고리 · 회사소개 페이지 스타일. 토큰·nav·footer·body 는 home.css 에서 상속(같이 로드). 여기선 콘텐츠만. */ /* 한글 제목은 단어(띄어쓰기) 단위로만 줄바꿈 */ .post-head h1, .cat-head h1, .card h3, .prose h2, .prose h3, .banner h4, .faq summary, .pt{ word-break:keep-all; } /* 컨테이너 */ .wrap{ max-width:1120px; margin:0 auto; padding:0 22px; } .read{ max-width:720px; margin:0 auto; } @media (max-width:640px){ .wrap{ padding:0 15px; } } /* 카테고리 네비 바 (nav 아래 공통) */ .catbar{ display:flex; gap:6px; flex-wrap:wrap; padding:6px 0 14px; border-bottom:1px solid var(--line); margin-bottom:6px; } .catbar a{ font-size:13px; font-weight:700; text-decoration:none; color:var(--ink2); background:var(--surface); border:1px solid var(--line2); padding:8px 14px; border-radius:999px; transition:.15s; white-space:nowrap; } .catbar a:hover{ background:var(--p100); color:var(--brand-d); border-color:transparent; } .catbar a[aria-current="page"]{ background:var(--brand); color:#fff; border-color:var(--brand); } /* 카테고리 헤더 */ .cat-head{ padding:26px 0 18px; } .cat-head .tag{ font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--brand-d); text-transform:uppercase; } .cat-head h1{ font-size:clamp(26px,4vw,36px); font-weight:800; letter-spacing:-.02em; margin:8px 0 8px; color:var(--ink); } .cat-head p{ margin:0; color:var(--ink2); max-width:60ch; font-size:15px; } /* 카드 그리드 (홈 톤) */ .grid{ display:grid; grid-template-columns:1fr; gap:26px; padding:20px 0 8px; } @media (min-width:640px){ .grid{ grid-template-columns:1fr 1fr; gap:28px 24px; } } @media (min-width:1000px){ .grid{ grid-template-columns:repeat(3,1fr); } } .card{ --cat:var(--brand); text-decoration:none; color:inherit; display:block; } .card__media{ position:relative; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:var(--c,var(--cat)); box-shadow:0 10px 24px -14px rgba(24,20,45,.15); } .card__media img{ width:100%; height:100%; object-fit:cover; display:block; } .hero-fallback{ position:absolute; inset:0; background-color:var(--cat); background-image:linear-gradient(150deg,var(--cat),color-mix(in srgb,var(--cat) 56%,#160f2a)); } .hero-fallback::after{ content:""; position:absolute; inset:0; opacity:.14; background:center/34% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='24' y='13' width='52' height='74' rx='3'/%3E%3Cline x1='50' y1='13' x2='50' y2='87'/%3E%3Cline x1='24' y1='50' x2='76' y2='50'/%3E%3C/g%3E%3C/svg%3E"); } .hero-fallback span{ display:none; } .card__body{ padding:12px 2px 0; } .card .tag{ font-size:11px; font-weight:800; color:var(--cat); } .card h3{ font-family:inherit; font-weight:700; font-size:18px; line-height:1.34; margin:7px 0 6px; letter-spacing:-.01em; color:var(--ink); } .card p{ margin:0; color:var(--ink2); font-size:14px; line-height:1.55; } .card .meta{ margin-top:9px; font-size:12px; color:var(--ink3); } /* 글 헤더 */ .post-hero{ position:relative; aspect-ratio:21/9; border-radius:16px; overflow:hidden; margin:18px 0 0; box-shadow:0 12px 28px -18px rgba(24,20,45,.16); background:var(--cat,var(--brand)); } .post-hero img{ width:100%; height:100%; object-fit:cover; display:block; } .post-head{ padding:26px 0 6px; } .post-head .kicker{ display:flex; gap:10px; align-items:center; font-size:12.5px; color:var(--ink3); margin-bottom:14px; } .post-head .kicker .tag{ font-size:12px; font-weight:800; color:var(--brand-d); text-decoration:none; } .post-head h1{ font-weight:800; font-size:clamp(26px,4vw,40px); line-height:1.24; letter-spacing:-.02em; margin:0 0 14px; color:var(--ink); text-wrap:balance; } .post-head .dek{ font-size:18px; color:var(--ink2); line-height:1.6; margin:0; } .byline{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink3); } /* TL;DR */ .tldr{ margin:24px auto; padding:18px 20px; background:var(--p50); border:1px solid var(--p100); border-left:4px solid var(--brand); border-radius:12px; } .tldr b{ display:block; font-size:11px; letter-spacing:.12em; color:var(--brand-d); text-transform:uppercase; margin-bottom:9px; } .tldr ul{ margin:0; padding-left:18px; } .tldr li{ margin:5px 0; font-size:15.5px; color:var(--ink); } /* 본문 prose */ .prose{ font-size:17.5px; line-height:1.82; color:var(--ink); } /* 브라우저 기본 여백 초기화 */ .prose p{ margin:0; } .prose ul, .prose ol{ padding-left:22px; margin:0; } /* 목록 항목 사이 = 9px -> 7px (2026-08 요청, 기존의 80%). 체크리스트가 한 덩어리로 읽히도록 항목끼리는 촘촘하게. */ .prose li{ margin:.4em 0; } /* 문단 흐름 간격 — 2026-08 사용자 요청으로 기존값의 1.5배. ⚠ 위 초기화(.prose p / .prose ul 의 margin:0)와 특이도가 같으므로 반드시 초기화보다 '뒤에' 와야 적용된다. 앞에 두면 문단 간격이 0이 된다. */ .prose > * + *{ margin-top:1.72em; } .prose > * + p, .prose > * + ul, .prose > * + ol, .prose > * + figure, .prose > * + blockquote, .prose > * + table{ margin-top:1.72em; } /* 제목 위 간격으로 위계를 만든다 — H2 75px > H3 40px > 문단 30px. H3 를 H2 에 가깝게 두면(예전 52px) 하위 제목이 상위 섹션처럼 보여 위계가 무너진다. */ .prose h2{ font-weight:800; font-size:23px; line-height:1.35; margin-top:3.26em; letter-spacing:-.01em; color:var(--ink); } .prose h3{ font-weight:800; font-size:19px; margin-top:2.1em; color:var(--ink); } /* 삽입형 블록(목록·인용·표)은 본문에서 '엔터 한 번' = 본문 한 줄 높이(1.82em)만큼 띄운다. 일반 문단 간격(1.72em)보다 살짝 넓어 본문과 구분된다. ⚠ '삽입형 뒤' 쪽에서는 제목(h2·h3)을 반드시 제외할 것. 제외하지 않으면 이 규칙이 .prose h2 (75px)를 특이도 동점 + 뒤 순서로 이겨서, "목록으로 끝난 섹션" 다음 제목만 32px 로 붙어 섹션 구분이 들쭉날쭉해진다. */ .prose > * + ul, .prose > * + ol, .prose > * + blockquote, .prose > * + table, .prose > ul + :not(h2):not(h3), .prose > ol + :not(h2):not(h3), .prose > blockquote + :not(h2):not(h3), .prose > table + :not(h2):not(h3){ margin-top:1.82em; } /* 소제목 → 본문 = 18px. 제목이 자기 본문을 끌어안도록 좁게. (뒤따르는 요소 폰트 17.5px 기준 1.03em) */ .prose h2 + *, .prose h3 + *{ margin-top:1.03em; } .prose strong{ font-weight:700; } .prose a{ color:var(--brand-d); text-underline-offset:3px; } /* 인라인 배너는 .prose 안에 있고 라서 위 본문 링크색(퍼플)에 먹힌다. 배너 글자는 보라 배경 위 흰색이어야 하므로 특이도를 올려 되돌린다. */ .prose a.banner{ color:#fff; text-decoration:none; } .prose blockquote{ margin:1.4em 0; padding:6px 0 6px 18px; border-left:3px solid var(--p200); color:var(--ink2); font-style:italic; } .prose table{ width:100%; border-collapse:collapse; font-size:15px; } .prose th, .prose td{ border:1px solid var(--line2); padding:9px 11px; text-align:left; } .prose thead th{ background:var(--p50); } /* 배너 / CTA — 마켓 띠배너 스타일(한 줄, 슬림) */ .banner{ --cat:var(--brand); display:block; text-decoration:none; cursor:pointer; margin:26px auto; border-radius:12px; overflow:hidden; position:relative; background:linear-gradient(120deg,var(--p400),var(--p700)); color:#fff; box-shadow:0 10px 26px -16px color-mix(in srgb,var(--brand) 60%,transparent); } .banner::after{ content:""; position:absolute; right:-30px; top:50%; transform:translateY(-50%); width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,#ffffff2e,transparent 70%); pointer-events:none; } .banner__in{ display:flex; align-items:center; gap:14px; padding:14px 18px; position:relative; } .banner__txt{ position:relative; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:5px; } .banner .eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.95; background:rgba(255,255,255,.16); padding:4px 10px; border-radius:999px; } .banner h4{ font-size:16px; font-weight:800; line-height:1.35; margin:0; } .banner p{ display:none; } .banner .fine{ display:none; } .banner .btn{ flex:0 0 auto; padding:10px 18px; font-size:13.5px; white-space:nowrap; } /* 배너 전체가 링크(