/* ============================================================ 에디토리얼(sg) — 칼럼 / 공지사항 / 이벤트 지면 (community-template.php · single-blog.php) 증상가이드·진단 사례(assets/css/seran-symptom.css 의 sg- 언어)와 같은 톤을 칼럼 지면에도 입힌다. 딥그린 강조 + 세리프 표제 + 얇은 실선. 구조(목록 4종·상세 5종)는 건드리지 않는다 — 톤과 레이아웃은 직교한다. 세란(주황·크림) 스킨과 형제 파일이다. 같은 마크업을 같은 방식으로 덧입히되 토큰 값과 표제 서체만 다르다 → 콘솔 › 스타일에서 언제든 되돌릴 수 있다. 팔레트 출처: seran-symptom.css 의 .sg 토큰 딥그린 #315f52 / #183f35 (강조·활성) · 잉크 #1e2523 · 실선 #dde2df · 연회색 #f5f7f5 스코프: (Clinic_Console_Style::body_class) ============================================================ */ .pcol-skin-sg { /* 강조(활성·링크) — sg 지면의 딥그린. 이름은 세란 스킨과 맞춰 두어 아래 구조 규칙을 그대로 물려받는다(값만 다른 형제 파일). */ --sc-orange: #315f52; --sc-orange-soft: #edf3ef; --sc-cta: #183f35; --sc-olive: #6f8f83; --sc-olive-dark: #315f52; --sc-paper: #f8f9f7; --sc-card: #ffffff; --sc-ink: #1e2523; --sc-ink-2: #545d59; --sc-ink-3: #7d8581; --sc-line: #dde2df; --sc-line-soft: #eaeeeb; --sc-font: Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif; --sc-font-display: 'Noto Serif KR', 'Nanum Myeongjo', Georgia, serif; --sc-radius: 18px; --sc-shadow: 0 1px 2px rgba(22, 45, 37, 0.04); --sc-shadow-hover: 0 18px 50px rgba(22, 45, 37, 0.09); } /* ------------------------------------------------------------ 베이스 팔레트 갈아끼우기 style.css 의 .feature.community 블록이 자기 변수(--cm-*)로 칩·태그·점·테두리를 칠하고, .feature.community X (특정도 0,3,0) 로 걸어둔다. 개별 규칙을 하나씩 이기려 들면 파일이 두 배가 되고 새 규칙이 추가될 때마다 또 진다. 변수 자체를 바꾸면 베이스 규칙이 그대로 세란 색을 계산한다. ------------------------------------------------------------ */ body.pcol-skin-sg .feature.community { --cm-ink: var(--sc-ink); --cm-body: var(--sc-ink-2); --cm-brand: var(--sc-orange); --cm-line: var(--sc-line-soft); --cm-soft: var(--sc-paper); } /* 베이스는 모든 모서리를 각지게(radius:0) 만든다. 세란 톤은 사이트의 다른 카드 (검사·사례 radius 20px)와 같은 둥근 모서리를 쓰므로 되돌린다. */ body.pcol-skin-sg .feature.community .community-card, body.pcol-skin-sg .feature.community .col-pin-hero { border-radius: var(--sc-radius); } body.pcol-skin-sg .feature.community .community-tag, body.pcol-skin-sg .feature.community .col-min-tag, body.pcol-skin-sg .feature.community .col-min-tag--activity { border-radius: 9999px; } /* 분류 태그는 올리브로 둔다 — 주황(강조·활성)과 역할이 겹치면 시선이 갈린다. 베이스가 .feature.community .community-tag.tag-blog 로 --cm-brand 를 칠하므로 그보다 한 단계 위 특정도로 명시한다. */ body.pcol-skin-sg .feature.community .community-tag, body.pcol-skin-sg .feature.community .community-tag.tag-blog, body.pcol-skin-sg .feature.community .community-tag.tag-notice, body.pcol-skin-sg .feature.community .col-min-tag, body.pcol-skin-sg .feature.community .col-min-tag.tag-blog, body.pcol-skin-sg .feature.community .col-pin-tag { background: rgba(49, 95, 82, 0.10); color: var(--sc-olive-dark); letter-spacing: 0; } /* 이벤트만 주황 계열로 구분 — 실제로 성격이 다른 글이다. */ body.pcol-skin-sg .feature.community .community-tag.tag-event, body.pcol-skin-sg .feature.community .col-min-tag--activity { background: rgba(232, 131, 66, 0.14); color: var(--sc-cta); border-color: transparent; } /* 목록 더보기 링크 — 베이스의 이탤릭을 푼다(한글에서 읽기 나쁘다). */ body.pcol-skin-sg .feature.community .community-card-more, body.pcol-skin-sg .feature.community .col-pin-more, body.pcol-skin-sg .feature.community .col-min-date, body.pcol-skin-sg .feature.community .col-mag-card-date { font-style: normal; } /* ---- 히어로 — 크림 밴드 · 올리브 눈표제 · 산세리프 표제 ---- */ .pcol-skin-sg .cmty-hero { background: var(--sc-paper); border-bottom: 1px solid var(--sc-line); padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); } .pcol-skin-sg .cmty-hero__k { display: inline-flex; align-items: center; gap: 10px; color: var(--sc-olive-dark); font-family: var(--sc-font); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .pcol-skin-sg .cmty-hero__k::before, .pcol-skin-sg .cmty-hero__k::after { content: ''; width: 26px; height: 2px; background: var(--sc-olive); border-radius: 2px; } .pcol-skin-sg .cmty-hero__title { margin: 14px 0 16px; font-family: var(--sc-font); font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; line-height: 1.3; letter-spacing: -0.04em; color: var(--sc-ink); word-break: keep-all; } .pcol-skin-sg .cmty-hero__lede { max-width: 620px; margin-inline: auto; color: var(--sc-ink-2); font-size: 15px; line-height: 1.8; word-break: keep-all; } /* ---- 필터 칩 — 사이트의 관련검사 칩과 같은 규격(주황 알약) ---- */ .pcol-skin-sg .community-filter { gap: 8px; margin-block: clamp(28px, 4vw, 44px); } .pcol-skin-sg .community-chip { height: 34px; padding: 0 16px; border: 1px solid var(--sc-orange); border-radius: 9999px; background: transparent; color: var(--sc-cta); font-family: var(--sc-font); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } /* 베이스(style.css:3942)가 칩 앞에 6px 점을 찍는다 — sg 알약에는 군더더기라 지운다. 특정도를 베이스(.feature.community .community-chip::before = 0,3,0)보다 높인다. */ body.pcol-skin-sg .feature.community .community-chip::before { content: none; } body.pcol-skin-sg .feature.community .community-chip { height: 32px; padding: 0 13px; border-color: transparent; background: #f5f7f5; color: #717a76; font-size: 13px; font-weight: 500; font-style: normal; } body.pcol-skin-sg .feature.community .community-chip:hover { border-color: transparent; background: #edf3ef; color: #183f35; } body.pcol-skin-sg .feature.community .community-chip.is-active { background: #183f35; border-color: transparent; color: #fff; font-weight: 600; } .pcol-skin-sg .community-chip:hover, .pcol-skin-sg .community-chip:focus-visible { background: var(--sc-orange-soft); border-color: var(--sc-orange-soft); color: #fff; } .pcol-skin-sg .community-chip.is-active { background: var(--sc-orange); border-color: var(--sc-orange); color: #fff; } /* ---- 지면 바탕 ---- */ .pcol-skin-sg .community { background: var(--sc-paper); } /* ============================================================ 목록 — 클래식 (썸네일 카드 + 사이드바) ============================================================ */ .pcol-skin-sg .community-card { background: var(--sc-card); border: 1px solid var(--sc-line-soft); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .pcol-skin-sg .community-card:hover { transform: translateY(-2px); border-color: var(--sc-line); box-shadow: var(--sc-shadow-hover); } .pcol-skin-sg .community-card-title { font-family: var(--sc-font); font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; color: var(--sc-ink); word-break: keep-all; } .pcol-skin-sg .community-card:hover .community-card-title { color: var(--sc-cta); } .pcol-skin-sg .community-card-excerpt { color: var(--sc-ink-2); font-size: 14px; line-height: 1.8; word-break: keep-all; } .pcol-skin-sg .community-card-meta { color: var(--sc-ink-3); font-size: 12.5px; letter-spacing: -0.01em; } .pcol-skin-sg .community-card-more { color: var(--sc-cta); font-weight: 600; } .pcol-skin-sg .community-card-thumb-placeholder { background: linear-gradient(135deg, #eef2ee 0%, #e2eae4 60%, #dfe7e1 100%); } /* 분류 태그 — 올리브. 주황(강조)과 역할을 나눠 시선이 갈리지 않게 한다. */ .pcol-skin-sg .community-tag, .pcol-skin-sg .col-min-tag, .pcol-skin-sg .col-pin-tag { display: inline-block; padding: 3px 10px; border-radius: 9999px; background: rgba(49, 95, 82, 0.10); color: var(--sc-olive-dark); font-size: 11.5px; font-weight: 700; letter-spacing: 0; } .pcol-skin-sg .col-min-tag--activity { background: rgba(232, 131, 66, 0.12); color: var(--sc-cta); } /* 사이드바(Popular · 인기 글) — 주황 좌측 악센트 바 모티프. 사이트 전반의 섹션 표제(.seran-rel__title)와 같은 신호를 칼럼 지면에도 잇는다. */ body.pcol-skin-sg .community-sidebar .sidebar-title { position: relative; padding-left: 12px; font-family: var(--sc-font); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--sc-ink); } body.pcol-skin-sg .community-sidebar .sidebar-title::before { content: ''; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; border-radius: 2px; background: var(--sc-orange); } body.pcol-skin-sg .community-sidebar .sidebar-widget { background: var(--sc-card); border: 1px solid var(--sc-line-soft); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); } body.pcol-skin-sg .community-sidebar .sidebar-item { color: var(--sc-ink); font-weight: 600; letter-spacing: -0.02em; } body.pcol-skin-sg .community-sidebar .sidebar-item:hover { color: var(--sc-cta); } /* 페이지 넘김 */ body.pcol-skin-sg .feature.community .community-pagination .page-num, body.pcol-skin-sg .feature.community .community-pagination .page-arrow { border-radius: 9999px; color: var(--sc-ink-2); } body.pcol-skin-sg .feature.community .community-pagination .page-num[aria-current='page'], body.pcol-skin-sg .feature.community .community-pagination .page-num.is-active { background: var(--sc-orange); border-color: var(--sc-orange); color: #fff; } .pcol-skin-sg .community-empty { color: var(--sc-ink-3); font-size: 14.5px; } /* ============================================================ 목록 — 그리드 (커버 카드 3열) ============================================================ */ .pcol-skin-sg .col-grid-card { background: var(--sc-card); border: 1px solid var(--sc-line-soft); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .pcol-skin-sg .col-grid-card:hover { transform: translateY(-3px); border-color: var(--sc-line); box-shadow: var(--sc-shadow-hover); } .pcol-skin-sg .col-grid-card-thumb { background: linear-gradient(135deg, #eef2ee 0%, #e2eae4 60%, #dfe7e1 100%); } .pcol-skin-sg .col-grid-card-title { font-family: var(--sc-font); font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; color: var(--sc-ink); word-break: keep-all; } .pcol-skin-sg .col-grid-card:hover .col-grid-card-title { color: var(--sc-cta); } .pcol-skin-sg .col-grid-card-body { color: var(--sc-ink-2); } /* ============================================================ 목록 — 매거진 (대형 피처 + 카드 그리드) ============================================================ */ .pcol-skin-sg .col-mag-feature { background: var(--sc-card); border: 1px solid var(--sc-line-soft); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); overflow: hidden; } .pcol-skin-sg .col-mag-feature-title { font-family: var(--sc-font); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.4; letter-spacing: -0.035em; color: var(--sc-ink); word-break: keep-all; } .pcol-skin-sg .col-mag-feature-excerpt { color: var(--sc-ink-2); font-size: 15px; line-height: 1.85; word-break: keep-all; } .pcol-skin-sg .col-mag-feature-thumb, .pcol-skin-sg .col-mag-card-thumb { background: linear-gradient(135deg, #eef2ee 0%, #e2eae4 60%, #dfe7e1 100%); } .pcol-skin-sg .col-mag-card { background: var(--sc-card); border: 1px solid var(--sc-line-soft); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .pcol-skin-sg .col-mag-card:hover { transform: translateY(-2px); border-color: var(--sc-line); box-shadow: var(--sc-shadow-hover); } .pcol-skin-sg .col-mag-card-title { font-family: var(--sc-font); font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; color: var(--sc-ink); word-break: keep-all; } .pcol-skin-sg .col-mag-card:hover .col-mag-card-title { color: var(--sc-cta); } .pcol-skin-sg .col-mag-card-date, .pcol-skin-sg .col-min-date { color: var(--sc-ink-3); font-size: 12.5px; } /* ============================================================ 목록 — 미니멀 (타이포 리스트) ============================================================ */ .pcol-skin-sg .col-min-item { border-bottom: 1px solid var(--sc-line-soft); transition: background-color 0.18s ease; } .pcol-skin-sg .col-min-item:hover { background: rgba(255, 247, 239, 0.7); } .pcol-skin-sg .col-min-title { font-family: var(--sc-font); font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: -0.035em; color: var(--sc-ink); word-break: keep-all; } .pcol-skin-sg .col-min-item:hover .col-min-title { color: var(--sc-cta); } .pcol-skin-sg .col-min-excerpt { color: var(--sc-ink-2); font-size: 14px; line-height: 1.8; word-break: keep-all; } /* 미니멀 상단 핀 슬라이드 */ .pcol-skin-sg .col-pin-hero { background: var(--sc-card); border: 1px solid var(--sc-line-soft); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); overflow: hidden; } .pcol-skin-sg .col-pin-title { font-family: var(--sc-font); font-weight: 700; letter-spacing: -0.035em; color: var(--sc-ink); word-break: keep-all; } .pcol-skin-sg .col-pin-excerpt { color: var(--sc-ink-2); line-height: 1.8; } .pcol-skin-sg .col-pin-more { color: var(--sc-cta); font-weight: 600; } .pcol-skin-sg .col-pin-prev, .pcol-skin-sg .col-pin-next { background: #fff; border: 1px solid var(--sc-line); color: var(--sc-cta); } .pcol-skin-sg .col-pin-prev:hover, .pcol-skin-sg .col-pin-next:hover { background: var(--sc-orange); border-color: var(--sc-orange); color: #fff; } .pcol-skin-sg .col-pin-dot { background: var(--sc-line); } .pcol-skin-sg .col-pin-dot.is-active, .pcol-skin-sg .col-pin-dot[aria-current='true'] { background: var(--sc-orange); } /* ============================================================ 상세 (single-blog.php · templates/column/single/*.php) ============================================================ */ .pcol-skin-sg .col-eyebrow { color: var(--sc-olive-dark); font-family: var(--sc-font); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .pcol-skin-sg .col-editorial-title, .pcol-skin-sg .col-fullbleed-title, .pcol-skin-sg .col-minimal-title { font-family: var(--sc-font); font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; line-height: 1.32; letter-spacing: -0.04em; color: var(--sc-ink); word-break: keep-all; } /* 풀블리드는 커버 사진 위에 제목이 얹히므로 흰 글자 + 그늘을 유지한다. */ .pcol-skin-sg .col-fullbleed-hero .col-fullbleed-title, .pcol-skin-sg .col-fullbleed-hero .col-eyebrow { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } .pcol-skin-sg .col-meta, .pcol-skin-sg .col-meta-author, .pcol-skin-sg .col-meta-views { color: var(--sc-ink-3); font-size: 13px; letter-spacing: -0.01em; } .pcol-skin-sg .col-body { color: var(--sc-ink-2); font-size: 16px; line-height: 1.9; word-break: keep-all; } .pcol-skin-sg .col-body h2, .pcol-skin-sg .col-body h3, .pcol-skin-sg .col-body h4 { position: relative; font-family: var(--sc-font); font-weight: 700; letter-spacing: -0.035em; color: var(--sc-ink); } /* 본문 중제목에도 좌측 악센트 바 — 사이트 전반의 섹션 표제와 같은 신호 */ .pcol-skin-sg .col-body h2 { padding-left: 14px; } .pcol-skin-sg .col-body h2::before { content: ''; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 4px; border-radius: 2px; background: var(--sc-orange); } .pcol-skin-sg .col-body a { color: var(--sc-cta); text-decoration-color: rgba(215, 110, 15, 0.35); text-underline-offset: 3px; } .pcol-skin-sg .col-body a:hover { text-decoration-color: currentColor; } .pcol-skin-sg .col-body blockquote { border-left: 4px solid var(--sc-olive); background: rgba(169, 188, 13, 0.07); border-radius: 0 12px 12px 0; color: var(--sc-ink-2); } .pcol-skin-sg .col-body img, .pcol-skin-sg .col-editorial-cover img, .pcol-skin-sg .col-fullbleed-hero img { border-radius: 14px; } .pcol-skin-sg .col-fullbleed-hero img { border-radius: 0; } /* ---- 접근성 — 초점 표시. 사이트 전역에서 outline:none 이 걸린 곳이 있어 칼럼 지면만이라도 키보드 사용자가 위치를 볼 수 있게 되살린다. ---- */ .pcol-skin-sg .community-chip:focus-visible, .pcol-skin-sg .community-card a:focus-visible, .pcol-skin-sg .col-grid-card a:focus-visible, .pcol-skin-sg .col-mag-card a:focus-visible, .pcol-skin-sg .col-min-link:focus-visible, .pcol-skin-sg .col-pin-prev:focus-visible, .pcol-skin-sg .col-pin-next:focus-visible { outline: 3px solid var(--sc-cta); outline-offset: 2px; border-radius: 6px; } /* ---- 모바일 ---- */ @media (max-width: 767.98px) { .pcol-skin-sg .cmty-hero { padding: 44px 0 32px; } .pcol-skin-sg .cmty-hero__title { font-size: 26px; } .pcol-skin-sg .cmty-hero__lede { font-size: 14px; padding-inline: 16px; } .pcol-skin-sg .community-filter { padding-inline: 16px; } /* 칩은 손가락 기준을 지킨다 — 고령 환자 비중이 높다. */ .pcol-skin-sg .community-chip { height: 40px; padding: 0 18px; font-size: 14px; } .pcol-skin-sg .community-card-title { font-size: 17px; } .pcol-skin-sg .col-min-title { font-size: 18px; } } /* ---- 움직임 최소화 선호 ---- */ @media (prefers-reduced-motion: reduce) { .pcol-skin-sg .community-card, .pcol-skin-sg .col-grid-card, .pcol-skin-sg .col-mag-card { transition: none; } .pcol-skin-sg .community-card:hover, .pcol-skin-sg .col-grid-card:hover, .pcol-skin-sg .col-mag-card:hover { transform: none; } } /* ============================================================ 칼럼 상세 — 에디토리얼 스플릿 (templates/column/single/split.php) 데스크톱은 좌측 표제 + 우측 1:1 커버, 모바일은 같은 커버를 히어로 전체 배경으로 깔고 그러데이션 위에 흰 글씨를 얹는다. 커버 URL 은 지면마다 달라 인라인 커스텀 프로퍼티(--colsp-cover)로 받는다. ============================================================ */ .col-split { --colsp-ink: #1e2523; --colsp-line: #d7ded9; --colsp-green: #315f52; --colsp-green-deep: #183f35; --colsp-orange: #e88342; --colsp-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif; --colsp-sans: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; color: var(--colsp-ink); font-family: var(--colsp-sans); letter-spacing: -.025em; } .col-split *, .col-split *::before, .col-split *::after { box-sizing: border-box; } .colsp-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 560px); align-items: center; min-height: 560px; background: #f7f8f6; overflow: hidden; } /* 커버가 없으면 오른쪽 열이 비므로 한 열로 접는다. */ .col-split.no-cover .colsp-hero { grid-template-columns: minmax(0, 1fr); } .colsp-copy { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 560px; padding: 52px clamp(32px, 4.4vw, 68px); } /* 상단 머리글 — 병원명과 발행 연도. 가는 선으로 끊어 준다. */ .colsp-title { position: relative; margin: auto 0; padding: 32px 0 30px; } .colsp-title::before { content: ""; position: absolute; left: 0; top: 0; width: 52px; height: 2px; background: var(--colsp-orange); } .colsp-eyebrow { margin: 0 0 14px; color: var(--colsp-green); font-size: 11px; font-weight: 800; letter-spacing: .18em; } .colsp-title h1 { margin: 0; max-width: 720px; font-family: var(--colsp-serif); font-weight: 600; font-size: clamp(34px, 4.2vw, 62px); line-height: 1.16; letter-spacing: -.06em; text-wrap: balance; word-break: keep-all; } /* 출처 — 글의 책임 주체. 이름은 또렷하게, 설립연도는 한 톤 낮춰 뒤에 붙인다. */ .colsp-source { font-weight: 600; color: #5c6560; } .colsp-source em { font-style: normal; font-weight: 400; color: #8a928d; } .colsp-source em::before { content: " · "; } .colsp-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0; padding-top: 18px; border-top: 1px solid var(--colsp-line); color: #78817d; font-size: 12px; letter-spacing: .02em; } .colsp-image { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #dce3df; } .colsp-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.9) contrast(.98); border-radius: 0; } /* ---- 모바일: 커버를 배경으로 깔고 글자를 위에 ---- */ @media (max-width: 760px) { .colsp-hero { display: block; min-height: 560px; height: min(78vh, 660px); background: #173a31; } .col-split.has-cover .colsp-hero::before { content: ""; position: absolute; inset: 0; /* * 위쪽은 사진을 그대로 보여 주고, 글자가 놓이는 아래쪽에서만 어두워진다. * 전체를 균일하게 덮으면 사진이 죽고, 안 덮으면 제목이 안 읽힌다. */ background: linear-gradient(to bottom, rgba(12, 30, 24, 0) 0%, rgba(12, 30, 24, 0) 38%, rgba(12, 30, 24, .34) 54%, rgba(12, 30, 24, .72) 72%, rgba(12, 30, 24, .93) 100%), var(--colsp-cover) center / cover no-repeat; } .colsp-copy { min-height: 100%; height: 100%; padding: 26px 20px 22px; color: #fff; } .colsp-title { margin: auto 0 0; padding: 26px 0; } .colsp-eyebrow { color: rgba(255, 255, 255, .8); } .colsp-title h1 { max-width: 520px; font-size: clamp(30px, 9vw, 42px); color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .24); } .colsp-source { color: #fff; } .colsp-source em { color: rgba(255, 255, 255, .72); } .colsp-foot { padding-top: 15px; border-top-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .82); gap: 12px; font-size: 11px; } .colsp-image { display: none; } } @media (max-width: 420px) { .colsp-hero { min-height: 520px; height: min(76vh, 620px); } .colsp-copy { padding: 22px 16px 18px; } .colsp-title h1 { font-size: 30px; } .colsp-foot { font-size: 10px; flex-direction: column; align-items: flex-start; gap: 4px; } } /* * 스플릿 히어로는 지면 폭을 넓게 쓴다. * .col-single 이 max-width 1200px 에 padding 280px/86px 을 갖고 있어, 그대로 두면 * 히어로가 가운데 1027px 로 눌리고 위에 280px 빈 칸이 생긴다(실측). 이 스타일에서는 * 컨테이너 여백을 걷고 본문에만 다시 준다. */ .col-single.col-split { max-width: min(1440px, calc(100% - 40px)); padding: 26px 0 110px; } .col-split .col-split-body { max-width: 760px; margin-inline: auto; padding: 62px 20px 0; } @media (max-width: 760px) { .col-single.col-split { max-width: calc(100% - 20px); padding: 12px 0 64px; } .col-split .col-split-body { padding: 40px 16px 0; } } /* * 자립 본문(.sg-doc)이 들어오면 지면을 넓게 쓴다. * 기본 760px 는 통짜 글에 맞춘 폭이라, 2열 도입부와 4열 카드가 323px·168px 로 * 눌린다(실측). 키트가 안에서 제 줄길이를 관리하므로 바깥은 넓혀도 된다. * :has() 를 못 쓰는 구형 브라우저에서는 760px 로 남는다 — 좁을 뿐 깨지지 않는다. */ .col-split .col-split-body:has(.sg-doc) { max-width: 1120px; padding-inline: 24px; } @media (max-width: 760px) { .col-split .col-split-body:has(.sg-doc) { padding-inline: 16px; } } /* ============================================================ sg 고유 — 히어로·칩·표제 서체 위쪽 구조 규칙(세란 스킨과 공유)을 그대로 두고, 톤이 갈리는 곳만 여기서 덮는다. 순서상 뒤에 오므로 같은 특정도면 이 블록이 이긴다. ============================================================ */ /* ---- 히어로 — 증상가이드·사례와 같은 웜그린 밴드 + 원형 모티프 ---- */ .pcol-skin-sg .cmty-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, #f7f8f5 0%, #f1f5f1 56%, #faf6ef 100%); border-bottom: 1px solid #edf0ed; padding: clamp(56px, 7vw, 84px) 0 clamp(48px, 6vw, 76px); text-align: left; } .pcol-skin-sg .cmty-hero::before { content: ''; position: absolute; right: -120px; top: -230px; width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgba(49, 95, 82, .08); box-shadow: 0 0 0 90px rgba(49, 95, 82, .025), 0 0 0 180px rgba(49, 95, 82, .015); } .pcol-skin-sg .cmty-hero__in { position: relative; z-index: 1; width: min(calc(100% - 48px), 1080px); margin-inline: auto; text-align: left; } /* 눈표제 — sg 지면과 같은 대문자 트래킹. 세란 스킨의 좌우 대시는 뺀다. */ .pcol-skin-sg .cmty-hero__k { display: block; margin: 0 0 14px; color: #315f52; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .pcol-skin-sg .cmty-hero__k::before, .pcol-skin-sg .cmty-hero__k::after { content: none; } .pcol-skin-sg .cmty-hero__title { margin: 0; max-width: 900px; font-family: var(--sc-font-display); font-size: clamp(32px, 4.4vw, 60px); font-weight: 600; line-height: 1.22; letter-spacing: -.055em; color: var(--sc-ink); } .pcol-skin-sg .cmty-hero__lede { max-width: 650px; margin: 22px 0 0; color: #6a716e; font-size: 17px; line-height: 1.75; } /* ---- 필터 칩 — 섹션 내비(.sg-nav)와 같은 알약 ---- */ .pcol-skin-sg .community-filter { justify-content: flex-start; gap: 6px; width: min(calc(100% - 48px), 1080px); margin-inline: auto; } .pcol-skin-sg .community-chip { height: 32px; padding: 0 13px; border: 1px solid transparent; border-radius: 999px; background: #f5f7f5; color: #717a76; font-size: 13px; font-weight: 500; } .pcol-skin-sg .community-chip:hover, .pcol-skin-sg .community-chip:focus-visible { background: #edf3ef; border-color: transparent; color: #183f35; } .pcol-skin-sg .community-chip.is-active, body.pcol-skin-sg .feature.community .community-chip.is-active { background: #183f35; border-color: transparent; color: #fff; font-weight: 600; } /* ---- 카드 — 흰 바탕 + 얇은 실선, 표제는 세리프 ---- */ .pcol-skin-sg .community-card-title, .pcol-skin-sg .col-grid-card-title, .pcol-skin-sg .col-mag-feature-title, .pcol-skin-sg .col-mag-card-title, .pcol-skin-sg .col-min-title, .pcol-skin-sg .col-pin-title { font-family: var(--sc-font-display); font-weight: 600; letter-spacing: -.04em; line-height: 1.4; } .pcol-skin-sg .community-card-more, .pcol-skin-sg .col-pin-more { color: #315f52; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(49, 95, 82, .35); } .pcol-skin-sg .community-card-more::after, .pcol-skin-sg .col-pin-more::after { content: ' ↗'; } /* ---- 사이드바 — 좌측 악센트 바 대신 sg 눈표제 ---- */ /* 눈표제 트래킹은 라틴 기준(.18em)이라 한글 제목('인기 글')에서는 낱자가 흩어진다. 한 벌로 쓰는 자리라 .07em 으로 낮춰 둘 다 읽히게 한다. */ body.pcol-skin-sg .community-sidebar .sidebar-title { padding-left: 0; font-family: var(--sc-font); font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #315f52; } body.pcol-skin-sg .community-sidebar .sidebar-title::before { content: none; } body.pcol-skin-sg .community-sidebar .sidebar-widget { border-color: var(--sc-line-soft); box-shadow: none; } /* 사이드바 항목 — 베이스는 제목을 브랜드 주황 + 날짜를 연주황 이탤릭 세리프로 둔다. sg 톤에서는 본문 잉크 + 회색 라벨로 낮추고, 강조는 hover 에서만 딥그린으로 준다. */ body.pcol-skin-sg .community-sidebar .sidebar-item-title { font-family: var(--sc-font); font-style: normal; font-weight: 600; color: var(--sc-ink); } body.pcol-skin-sg .community-sidebar .sidebar-item:hover .sidebar-item-title { color: #315f52; } body.pcol-skin-sg .community-sidebar .sidebar-item-date { font-family: var(--sc-font); font-style: normal; font-size: 12px; color: var(--sc-ink-3); } /* 목록 더보기 — 라벨이므로 산세리프(표제 세리프가 상속되던 것을 끊는다). */ body.pcol-skin-sg .feature.community .community-card-more, body.pcol-skin-sg .feature.community .col-pin-more { font-family: var(--sc-font); font-size: 13px; } /* ---- 상세 표제도 같은 세리프 ---- */ .pcol-skin-sg .col-single-title, .pcol-skin-sg .col-split__title, .pcol-skin-sg .col-single .entry-title { font-family: var(--sc-font-display); font-weight: 600; letter-spacing: -.05em; } /* ============================================================ 칼럼 본문 — sg 문서 톤 (자립 본문 sg-doc 과 같은 결) 본문 마크업(.seran-doc)은 정적화 스크립트가 내보낸 그대로 두고 **톤만** 덧입힌다. 글 안에