/* ============================================================ 칼럼 목록 — 저널(journal) 스타일 templates/column/list/journal.php 전용. 칼럼·공지사항·이벤트·대외활동 공용. 톤은 증상가이드·진단 사례(seran-symptom.css 의 sg-)를 잇는다. 세리프 표제 · 대문자 트래킹 눈표제 · 실선 한 겹 · 딥그린 강조 다만 이 지면은 '읽을거리 목록'이라 카드 격자 대신 행 목록으로 간다. 스코프: (Clinic_Console_Style::body_class) 스킨(pcol-skin-*)과 직교한다 — 색은 아래 토큰 한 곳에서만 바꾼다. ============================================================ */ .cj { --cj-ink: #1e2523; --cj-ink-2: #545d59; --cj-ink-3: #8b938f; --cj-line: #e4e8e5; --cj-line-strong: #1e2523; --cj-green: #315f52; --cj-green-deep: #183f35; --cj-orange: #e88342; --cj-soft: #f7f8f6; --cj-serif: 'Noto Serif KR', 'Nanum Myeongjo', Georgia, serif; --cj-sans: Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif; width: min(calc(100% - 48px), 1180px); margin-inline: auto; padding-bottom: 96px; color: var(--cj-ink-2); font-family: var(--cj-sans); letter-spacing: -0.025em; word-break: keep-all; } .cj *, .cj *::before, .cj *::after { box-sizing: border-box; } .cj a { color: inherit; text-decoration: none; } .cj img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 눈표제 — 지면 전체가 쓰는 라틴 대문자 트래킹. */ .cj-eyebrow { margin: 0 0 12px; color: var(--cj-green); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } /* 라벨 + 오른쪽으로 뻗는 실선 — 절의 시작을 알리는 신호. */ .cj-rule-label { display: flex; align-items: center; gap: 18px; margin: 0 0 44px; color: var(--cj-green); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .cj-rule-label::after { content: ''; flex: 1; height: 1px; background: var(--cj-line); } /* ------------------------------------------------------------ 피처 — 왼쪽 사진 / 오른쪽 표제 ------------------------------------------------------------ */ .cj-feature { padding: 72px 0 64px; border-bottom: 1px solid var(--cj-line); } .cj-feature__in { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 64px; align-items: center; } .cj-feature__fig { display: block; /* 칼럼 썸네일은 대부분 정사각 홍보 배너다 — 프레임도 1:1 로 두어 자르지 않고 원본 그대로 보이게 한다(가로/세로 사진만 중앙 기준으로 잘린다). */ aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: var(--cj-soft); } .cj-feature__fig img { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } .cj-feature__fig:hover img { transform: scale(1.03); } /* 사진이 없는 글도 균형이 깨지지 않게 같은 자리를 지킨다. */ .cj-feature__fig.is-empty { background: linear-gradient(135deg, #eef2ee 0%, #e2eae4 60%, #dfe7e1 100%); } /* 좌측 세로 실선 — 사진과 글 사이를 가르는 얇은 경계(잡지 판형의 흔한 장치). */ .cj-feature__body { position: relative; padding-left: 56px; } .cj-feature__body::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--cj-line); } .cj-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; color: var(--cj-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .cj-kicker i { width: 34px; height: 1px; background: var(--cj-ink-3); opacity: 0.55; } .cj-feature__cat { margin: 0 0 14px; color: var(--cj-orange); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .cj-feature__title { margin: 0; font-family: var(--cj-serif); font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; line-height: 1.28; letter-spacing: -0.055em; color: var(--cj-ink); } .cj-feature__title a { background-image: linear-gradient(var(--cj-green), var(--cj-green)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.35s ease, color 0.2s ease; } .cj-feature__title a:hover { color: var(--cj-green); background-size: 100% 1px; } .cj-feature__desc { max-width: 560px; margin: 22px 0 0; font-size: 15px; line-height: 1.85; } .cj-feature__meta { display: flex; justify-content: space-between; gap: 16px; margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--cj-line); color: var(--cj-ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; } /* ------------------------------------------------------------ 본문 2단 — 목록 + 인기 레일 ------------------------------------------------------------ */ .cj-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; padding-top: 72px; } .cj-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 0 0 8px; padding-bottom: 18px; border-bottom: 1px solid var(--cj-line-strong); } .cj-head h2 { margin: 0; font-family: var(--cj-serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.05em; color: var(--cj-ink); } .cj-head p { margin: 0; color: var(--cj-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } /* ---- 행 목록 ---- */ .cj-list { margin: 0; padding: 0; list-style: none; } .cj-row { display: grid; grid-template-columns: 34px 104px minmax(0, 1fr) 28px; gap: 24px; align-items: center; padding: 26px 10px 26px 0; border-bottom: 1px solid var(--cj-line); transition: background-color 0.2s ease, padding 0.2s ease; } .cj-row:hover { background: var(--cj-soft); padding-inline: 14px; } .cj-row__no { align-self: start; padding-top: 4px; color: var(--cj-ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; } .cj-row__fig { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--cj-line); border-radius: 2px; background: var(--cj-soft); } .cj-row__fig.is-empty { background: linear-gradient(135deg, #eef2ee 0%, #e2eae4 60%, #dfe7e1 100%); } .cj-row__meta { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; color: var(--cj-ink-3); font-size: 11.5px; letter-spacing: 0; } .cj-row__cat { color: var(--cj-green); font-weight: 700; } .cj-row__title { margin: 0; font-family: var(--cj-serif); font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; line-height: 1.45; letter-spacing: -0.045em; color: var(--cj-ink); } .cj-row:hover .cj-row__title { color: var(--cj-green); } .cj-row__desc { margin: 9px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--cj-ink-2); /* 한 줄만 — 목록은 훑는 자리다. 넘치면 말줄임. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; } .cj-row__arrow { justify-self: end; color: var(--cj-ink-3); font-size: 14px; transition: color 0.2s ease, transform 0.2s ease; } /* U+FE0E(텍스트 변형자)를 붙여 이모지 렌더(파란 사각)를 막는다. */ .cj-row__arrow::after { content: '\2197\FE0E'; } .cj-row:hover .cj-row__arrow { color: var(--cj-green); transform: translate(2px, -2px); } /* 빈 목록 — 글자만 덩그러니 두면 '고장'처럼 보인다. 목록 자리를 지키는 판으로 둔다. */ .cj-empty { margin: 40px 0 0; padding: 64px 24px; border: 1px dashed var(--cj-line); border-radius: 2px; background: var(--cj-soft); text-align: center; color: var(--cj-ink-3); font-size: 14px; line-height: 1.9; } /* ---- 인기 레일 ---- */ .cj-rail__in { position: sticky; top: 92px; } .cj-rail__title { margin: 0 0 10px; padding-bottom: 16px; border-bottom: 1px solid var(--cj-line-strong); font-family: var(--cj-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.05em; color: var(--cj-ink); } .cj-rail__list { margin: 0; padding: 0; list-style: none; } .cj-rail__list li { border-bottom: 1px solid var(--cj-line); } .cj-rail__list a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 16px 0; transition: color 0.2s ease; } .cj-rail__no { color: var(--cj-orange); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } .cj-rail__t { display: block; font-family: var(--cj-serif); font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: -0.04em; color: var(--cj-ink); } .cj-rail__list a:hover .cj-rail__t { color: var(--cj-green); } .cj-rail__d { display: block; margin-top: 6px; color: var(--cj-ink-3); font-size: 11.5px; } .cj-rail__note { margin: 22px 0 0; color: var(--cj-ink-3); font-size: 12px; line-height: 1.8; } .cj-rail__empty { margin: 18px 0 0; color: var(--cj-ink-3); font-size: 13px; } /* ------------------------------------------------------------ 지면 골격 — 히어로·탭·페이지 넘김 (히어로/탭 마크업은 community-template.php 소유. 여기서는 톤만 덧입힌다.) ------------------------------------------------------------ */ body.pcol-list-journal .cmty-hero { background: var(--cj-hero-bg, #f4f6f3); border-bottom: 1px solid #e7ebe8; padding: clamp(56px, 6.5vw, 84px) 0 clamp(44px, 5vw, 64px); } body.pcol-list-journal .cmty-hero::before { content: none; } body.pcol-list-journal .cmty-hero__in { width: min(calc(100% - 48px), 1180px); margin-inline: auto; text-align: left; } body.pcol-list-journal .cmty-hero__k { display: block; margin: 0 0 16px; color: #315f52; font-family: 'Noto Serif KR', 'Nanum Myeongjo', Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; } body.pcol-list-journal .cmty-hero__k::before, body.pcol-list-journal .cmty-hero__k::after { content: none; } body.pcol-list-journal .cmty-hero__title { margin: 0; font-family: 'Noto Serif KR', 'Nanum Myeongjo', Georgia, serif; font-size: clamp(34px, 4.2vw, 56px); font-weight: 600; line-height: 1.2; letter-spacing: -0.055em; color: #1e2523; } body.pcol-list-journal .cmty-hero__lede { max-width: 640px; margin: 18px 0 0; color: #6a716e; font-size: 15px; line-height: 1.8; } /* 탭 — 알약 대신 밑줄. 지면이 실선 어휘로 짜여 있어 알약이 겉돈다. */ body.pcol-list-journal .feature.community .community-filter { justify-content: flex-start; gap: 26px; width: min(calc(100% - 48px), 1180px); margin-inline: auto; margin-block: 0; padding: 22px 0 0; border-bottom: 1px solid #e4e8e5; } body.pcol-list-journal .feature.community .community-chip { position: relative; height: auto; padding: 0 0 14px; border: 0; border-radius: 0; background: none; color: #7d8581; font-size: 14px; font-weight: 500; font-style: normal; letter-spacing: -0.02em; } body.pcol-list-journal .feature.community .community-chip::before { content: none; } body.pcol-list-journal .feature.community .community-chip::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; transition: background-color 0.2s ease; } body.pcol-list-journal .feature.community .community-chip:hover { background: none; color: #1e2523; } body.pcol-list-journal .feature.community .community-chip.is-active { background: none; color: #1e2523; font-weight: 700; } body.pcol-list-journal .feature.community .community-chip.is-active::after { background: #183f35; } /* 페이지 넘김 — 실선 사각. 목록의 마지막 줄과 같은 무게로 둔다. */ body.pcol-list-journal .feature.community .community-pagination { justify-content: flex-start; gap: 8px; margin-top: 40px; } body.pcol-list-journal .feature.community .community-pagination .page-num, body.pcol-list-journal .feature.community .community-pagination .page-arrow { min-width: 34px; height: 34px; border: 1px solid #e4e8e5; border-radius: 2px; background: #fff; color: #545d59; font-size: 13px; font-weight: 600; } body.pcol-list-journal .feature.community .community-pagination .page-num[aria-current='page'], body.pcol-list-journal .feature.community .community-pagination .page-num.is-active { background: #183f35; border-color: #183f35; color: #fff; } /* 저널 목록은 자체 폭·여백을 갖는다 — 베이스 섹션 패딩을 비운다. */ body.pcol-list-journal .feature.community { padding-top: 0; background: #fff; } /* ------------------------------------------------------------ 반응형 ------------------------------------------------------------ */ @media (max-width: 1080px) { .cj-layout { grid-template-columns: minmax(0, 1fr); gap: 56px; } .cj-rail__in { position: static; } } @media (max-width: 860px) { .cj-feature__in { grid-template-columns: minmax(0, 1fr); gap: 28px; } /* 좁은 화면에서도 1:1 — 배너 문구가 잘리지 않는 것이 우선이다. */ .cj-feature__fig { aspect-ratio: 1 / 1; } .cj-feature__body { padding-left: 0; } .cj-feature__body::before { content: none; } .cj-feature { padding: 44px 0 40px; } .cj-layout { padding-top: 44px; } .cj-row { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 0; } /* 좁은 화면에서는 번호·화살표를 뺀다 — 정보가 아니라 장식이다. */ .cj-row__no, .cj-row__arrow { display: none; } body.pcol-list-journal .feature.community .community-filter { gap: 18px; overflow-x: auto; scrollbar-width: none; } body.pcol-list-journal .feature.community .community-filter::-webkit-scrollbar { display: none; } } @media (prefers-reduced-motion: reduce) { .cj-feature__fig img, .cj-row, .cj-row__arrow { transition: none; } }