/* ============================================================ 지면 테마 — 관리자 [설정]에서 고른다. 처럼 붙고, site.css 의 변수만 갈아끼운다. ⚠ 구조는 건드리지 않는다. 격자·마크업·기사 순서는 테마와 무관하게 같다. 여기서 바꾸는 것은 색·서체·괘선·밀도뿐이다. 그래야 테마를 바꿔도 화면이 깨지지 않는다. ⚠ 참고한 것은 '지면 설계 관행'이지 특정 신문의 상표가 아니다. 제호·로고·서체 자산을 가져다 쓰지 않는다. 이 신문의 제호는 그대로 '오늘 의성'이다. ============================================================ */ /* ───────────────────────────────────────────── 1. 정통 종합일간지 (조선일보 계열) 굵은 고딕 헤드라인 · 붉은 포인트 · 높은 밀도 · 진한 괘선 ───────────────────────────────────────────── */ [data-ui="chosun"] { --ink: #111111; --ink-2: #333333; --muted: #767676; --rule: #d8d8d8; --rule-strong: #b5b5b5; --rule-black: #111111; --rule-col: #d8d8d8; --accent: #c00000; --accent-bright: #d81616; --accent-ink: #900000; --link: #14367a; --head-font: var(--sans); --head-weight: 800; --head-track: -.035em; --lead-size: clamp(30px, 4.4vw, 44px); --card-head-size: 19px; --card-head-lh: 1.28; --dek-size: 14px; --dek-lh: 1.55; --kicker-size: 12px; --kicker-track: .02em; --body-lh: 1.62; --gap: 22px; --nav-top: 3px solid #111111; } [data-ui="chosun"] .masthead { padding: 20px 24px 14px; } [data-ui="chosun"] .nav .wrap { height: 40px; } [data-ui="chosun"] .nav a { font-weight: 700; font-size: 15px; } [data-ui="chosun"] .rule-head { border-bottom-width: 2px; padding-bottom: 6px; margin-bottom: 16px; } [data-ui="chosun"] .rule-head h2 { font-size: 17px; font-weight: 800; letter-spacing: -.03em; } [data-ui="chosun"] .block { margin-bottom: 30px; } [data-ui="chosun"] .ranked a { font-family: var(--sans); font-weight: 700; font-size: 14.5px; } /* ───────────────────────────────────────────── 2. 모던 종합일간지 (중앙일보 계열) 산세리프 · 파란 포인트 · 넉넉한 여백 · 괘선 최소 ───────────────────────────────────────────── */ [data-ui="joongang"] { --bg-soft: #f6f8fb; --ink: #16181d; --ink-2: #3d4350; --muted: #767c88; --rule: #e6e9ef; --rule-strong: #c8cdd8; --rule-black: #16181d; --rule-col: transparent; --accent: #1a4f9c; --accent-bright: #2668c4; --accent-ink: #12376e; --link: #1a4f9c; --head-font: var(--sans); --head-weight: 700; --head-track: -.028em; --lead-size: clamp(32px, 4.6vw, 50px); --card-head-size: 21px; --card-head-lh: 1.38; --kicker-size: 12px; --kicker-track: .01em; --body-lh: 1.78; --gap: 34px; } [data-ui="joongang"] .masthead { padding: 34px 24px 26px; } [data-ui="joongang"] .nav { border-bottom-color: var(--rule); } [data-ui="joongang"] .nav .wrap { height: 50px; gap: 26px; } [data-ui="joongang"] .rule-head { border-bottom: 0; margin-bottom: 18px; } [data-ui="joongang"] .rule-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -.03em; } [data-ui="joongang"] .card + .card { border-top-color: var(--rule); } [data-ui="joongang"] .block { margin-bottom: 52px; } [data-ui="joongang"] .grid.cards-3 > *, [data-ui="joongang"] .grid.cards-4 > * { padding-left: 0; } [data-ui="joongang"] .grid.home-top > .rail, [data-ui="joongang"] .grid.section-body > .rail { padding-left: 0; } /* ───────────────────────────────────────────── 3. 진보 일간지 (한겨레 계열) 부드러운 파랑 · 넓은 자간 · 명조 제호 · 낮은 대비 ───────────────────────────────────────────── */ [data-ui="hani"] { --bg: #fdfdfb; --bg-soft: #f4f4ef; --ink: #1c1c1a; --ink-2: #43433f; --muted: #7a7a74; --rule: #e0e0d8; --rule-strong: #c2c2b8; --rule-black: #1c1c1a; --rule-col: #e0e0d8; --accent: #00479d; --accent-bright: #0057bf; --accent-ink: #003374; --link: #00479d; --head-font: var(--serif); --head-weight: 700; --head-track: -.01em; --lead-size: clamp(30px, 4.2vw, 45px); --card-head-lh: 1.45; --dek-lh: 1.72; --kicker-track: .14em; --body-lh: 1.85; --gap: 30px; } [data-ui="hani"] .prose { line-height: 2; } [data-ui="hani"] .rule-head h2 { letter-spacing: .04em; } /* ───────────────────────────────────────────── 4. 영국 일간지 (가디언 계열) 남색 머리띠 · 노란 강조 · 산세리프 헤드라인 · 제호 왼쪽 ───────────────────────────────────────────── */ [data-ui="guardian"] { --ink: #121212; --ink-2: #3a3a3a; --muted: #707070; --rule: #dcdcdc; --rule-strong: #bdbdbd; --rule-black: #052962; --rule-col: #dcdcdc; --accent: #c70000; --accent-bright: #ffe500; --accent-ink: #a00000; --link: #052962; --navy: #052962; --head-font: var(--sans); --head-weight: 700; --head-track: -.025em; --lead-size: clamp(32px, 4.6vw, 48px); --masthead-just: flex-start; --nav-bg: #052962; --nav-fg: #ffffff; --nav-top: 0; --body-lh: 1.7; } [data-ui="guardian"] .topbar { background: #052962; color: rgba(255,255,255,.72); border-bottom: 0; } [data-ui="guardian"] .topbar .date { color: #ffffff; } [data-ui="guardian"] .topbar nav a:hover { color: var(--accent-bright); } [data-ui="guardian"] .masthead { background: #052962; max-width: none; padding: 22px 0 18px; } [data-ui="guardian"] .masthead .lockup { text-align: left; } [data-ui="guardian"] .masthead .w1 { color: #ffffff; } [data-ui="guardian"] .masthead .w2 { color: var(--accent-bright); } [data-ui="guardian"] .masthead .tagline { color: rgba(255,255,255,.66); } [data-ui="guardian"] .masthead .mark img { background: #ffffff; padding: 3px; } [data-ui="guardian"] .nav { border-bottom: 1px solid rgba(255,255,255,.25); } [data-ui="guardian"] .nav a:hover { color: var(--accent-bright); } [data-ui="guardian"] .nav a[aria-current="page"] { border-bottom-color: var(--accent-bright); } [data-ui="guardian"] .nav.sub { background: #0a3a80; } [data-ui="guardian"] .nav.sub a, [data-ui="guardian"] .nav .navlabel { color: rgba(255,255,255,.85); } [data-ui="guardian"] .nav form input { color: #fff; border-bottom-color: rgba(255,255,255,.4); } [data-ui="guardian"] .kicker { color: var(--accent); } /* ───────────────────────────────────────────── 5. 주간지 (이코노미스트 계열) 붉은 테두리 · 세리프 본문 · 절제된 색 · 좁은 단 ───────────────────────────────────────────── */ [data-ui="economist"] { --bg: #ffffff; --bg-soft: #f2f0ec; --ink: #121212; --ink-2: #3b3b3b; --muted: #6f6f6f; --rule: #dedad4; --rule-strong: #bfb9b1; --rule-black: #e3120b; --rule-col: #dedad4; --accent: #e3120b; --accent-bright: #e3120b; --accent-ink: #a80d08; --link: #1f6f8b; --head-font: var(--serif); --head-weight: 700; --head-track: -.015em; --lead-size: clamp(29px, 4vw, 42px); --masthead-just: flex-start; --kicker-track: .12em; --body-lh: 1.72; --w: 1120px; } [data-ui="economist"] .masthead { border-left: 10px solid var(--accent); padding-left: 20px; } [data-ui="economist"] .masthead .lockup { text-align: left; } [data-ui="economist"] .masthead .w1, [data-ui="economist"] .masthead .w2 { color: var(--ink); } [data-ui="economist"] .nav { border-top-width: 3px; } [data-ui="economist"] .rule-head { border-bottom-color: var(--accent); border-bottom-width: 2px; } [data-ui="economist"] .rule-head h2 { color: var(--accent); letter-spacing: .06em; } [data-ui="economist"] .article { max-width: 660px; } [data-ui="economist"] .prose { font-size: 17.5px; } /* ───────────────────────────────────────────── 6. 포털 뉴스 (네이버 계열) 회색 바탕에 흰 상자 · 초록 포인트 · 표 중심 · 살짝 둥근 모서리 ───────────────────────────────────────────── */ [data-ui="naver"] { --bg: #f2f4f6; --bg-soft: #ffffff; --bg-sunk: #e8ebee; --ink: #1a1c1f; --ink-2: #444a52; --muted: #7a828a; --rule: #e5e8eb; --rule-strong: #c9cdd2; --rule-black: #1a1c1f; --rule-col: transparent; --accent: #03a65a; --accent-bright: #03c75a; --accent-ink: #028045; --link: #1f6feb; --head-font: var(--sans); --head-weight: 700; --head-track: -.02em; --lead-size: clamp(26px, 3.4vw, 36px); --card-bg: #ffffff; --card-pad: 18px; --card-line: 1px solid #e5e8eb; --radius: 8px; --kicker-size: 12px; --kicker-track: 0; --body-lh: 1.72; --gap: 16px; } [data-ui="naver"] .topbar, [data-ui="naver"] .nav { background: #ffffff; } [data-ui="naver"] .masthead { background: #ffffff; max-width: none; padding: 20px 24px 16px; } [data-ui="naver"] .card + .card { margin-top: 16px; padding-top: var(--card-pad); border-top: 1px solid var(--rule); } [data-ui="naver"] .grid .card + .card { padding-top: var(--card-pad); } [data-ui="naver"] .grid.cards-3 > *, [data-ui="naver"] .grid.cards-4 > * { padding-left: 0; } [data-ui="naver"] .grid.home-top > .rail, [data-ui="naver"] .grid.section-body > .rail { padding-left: 0; } [data-ui="naver"] .rail .box { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 18px; } [data-ui="naver"] .rule-head { border-bottom: 0; margin-bottom: 12px; } [data-ui="naver"] .card figure { margin: -18px -18px 14px; } [data-ui="naver"] .card figure img { border-radius: 8px 8px 0 0; } [data-ui="naver"] .article, [data-ui="naver"] .page { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 32px; } [data-ui="naver"] .t-scroll, [data-ui="naver"] .entindex section { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 4px 14px; } /* ───────────────────────────────────────────── 7. 지역 일간지 작은 글씨 · 진한 괘선 · 남색+빨강 · 한 화면에 많이 ───────────────────────────────────────────── */ [data-ui="local"] { --ink: #14181d; --ink-2: #333a42; --muted: #6d757e; --rule: #cfd4da; --rule-strong: #a9b0b8; --rule-black: #0b2a4a; --rule-col: #cfd4da; --accent: #b3261e; --accent-bright: #d32f2f; --accent-ink: #8c1d18; --link: #0b2a4a; --head-font: var(--sans); --head-weight: 700; --head-track: -.03em; --lead-size: clamp(27px, 3.6vw, 38px); --card-head-size: 17.5px; --card-head-lh: 1.3; --dek-size: 13.5px; --dek-lh: 1.5; --kicker-size: 11px; --kicker-track: .02em; --body-lh: 1.6; --gap: 18px; --nav-bg: #0b2a4a; --nav-fg: #ffffff; --nav-top: 0; } [data-ui="local"] .masthead { padding: 16px 24px 12px; } [data-ui="local"] .nav .wrap { height: 38px; gap: 18px; } [data-ui="local"] .nav a { font-size: 13.5px; } [data-ui="local"] .nav a:hover { color: #ffd54f; } [data-ui="local"] .nav a[aria-current="page"] { border-bottom-color: #ffd54f; } [data-ui="local"] .nav.sub { background: #123a63; } [data-ui="local"] .nav.sub a, [data-ui="local"] .nav .navlabel { color: rgba(255,255,255,.86); } [data-ui="local"] .nav form input { color: #fff; border-bottom-color: rgba(255,255,255,.4); } [data-ui="local"] .card .byline { font-size: 11px; } [data-ui="local"] .block { margin-bottom: 26px; } [data-ui="local"] .rule-head { padding-bottom: 5px; margin-bottom: 14px; } [data-ui="local"] .rule-head h2 { font-size: 14px; } /* ───────────────────────────────────────────── 8. 흑백 활자 (타이포 전용) 색을 거의 쓰지 않는다. 활자 크기와 괘선만으로 위계를 만든다. ───────────────────────────────────────────── */ [data-ui="mono"] { --bg: #fbfaf8; --bg-soft: #f2f0ec; --ink: #0f0f0f; --ink-2: #333333; --muted: #6b6b6b; --rule: #d9d6d0; --rule-strong: #b8b4ad; --rule-black: #0f0f0f; --rule-col: #d9d6d0; --accent: #0f0f0f; --accent-bright: #0f0f0f; --accent-ink: #0f0f0f; --link: #0f0f0f; --head-font: var(--serif); --head-weight: 700; --head-track: -.02em; --lead-size: clamp(34px, 5vw, 56px); --kicker-track: .2em; --body-lh: 1.78; } [data-ui="mono"] .masthead .w2 { color: var(--ink); } [data-ui="mono"] .kicker { color: var(--ink); } [data-ui="mono"] .kicker .fmt { border-bottom: 2px solid var(--ink); } [data-ui="mono"] .rule-head { border-bottom-width: 3px; } [data-ui="mono"] .prose a { text-decoration-color: var(--ink); } [data-ui="mono"] .tags a.on, [data-ui="mono"] .pager .cur { background: var(--ink); } /* ============================================================ 다크모드 ============================================================ ⚠ 이 절이 없으면 테마가 다크모드를 통째로 깨뜨린다. 테마 블록의 [data-ui="x"] 와 site.css 의 :root 는 특정도가 같은데 themes.css 가 나중에 실리므로, 테마가 적어 둔 '밝은 글자색'이 site.css 의 '어두운 바탕'을 이긴다. 실측: chosun·joongang·guardian·naver·local 에서 제목 명암비가 1.0 : 1 이 됐다. (검은 바탕에 검은 글자. 아무것도 안 보인다.) 그래서 두 걸음으로 되돌린다. 1) [data-ui] 로 모든 테마의 '면' 색을 어두운 기본값으로 일괄 복귀 2) 테마별로 강조색과 색면 띠만 어두운 바탕에 맞게 다시 잡는다 서체·크기·괘선 굵기·여백 같은 구조 토큰은 건드리지 않는다. 테마의 성격은 색이 아니라 거기서 나온다. */ @media (prefers-color-scheme: dark) { [data-ui] { --bg: #121212; --bg-soft: #1b1b1b; --bg-sunk: #242424; --ink: #f2f2f0; --ink-2: #d0d0cd; --muted: #9a9a97; --rule: #333331; --rule-strong: #4a4a47; --rule-black: #f2f2f0; --rule-col: #333331; --card-bg: transparent; --card-line: 0 solid transparent; --nav-bg: var(--bg); --nav-fg: var(--ink); } /* 강조색 — 밝은 바탕용 진한 색은 검은 바탕에서 읽히지 않는다. 한 단계씩 올린다. */ [data-ui="chosun"] { --accent: #ff6b6b; --accent-bright: #ff8585; --accent-ink: #ff9c9c; --link: #9db6ee; } [data-ui="joongang"] { --accent: #7aa9ee; --accent-bright: #99bef4; --accent-ink: #b3cef7; --link: #7aa9ee; --rule-col: transparent; } [data-ui="hani"] { --accent: #79aef0; --accent-bright: #97c1f5; --accent-ink: #b0d0f8; --link: #79aef0; } [data-ui="economist"] { --accent: #ff5a52; --accent-bright: #ff5a52; --accent-ink: #ff8079; --link: #7fc4d8; --rule-black: #ff5a52; } [data-ui="mono"] { --accent: #f2f2f0; --accent-bright: #f2f2f0; --accent-ink: #f2f2f0; --link: #f2f2f0; } /* 색면을 쓰는 테마는 띠를 유지한다. 띠까지 검게 만들면 그 테마의 성격이 없어진다. */ [data-ui="guardian"] { --accent: #ff7a7a; --accent-bright: #ffe500; --accent-ink: #ff9c9c; --link: #9db6ee; --rule-black: #0a3a80; --nav-bg: #041d47; --nav-fg: #ffffff; } [data-ui="guardian"] .masthead, [data-ui="guardian"] .topbar { background: #041d47; } [data-ui="guardian"] .topbar .date { color: #ffffff; } [data-ui="guardian"] .nav.sub { background: #082f66; } [data-ui="local"] { --accent: #ff7a70; --accent-bright: #ff9a92; --accent-ink: #ffb0a9; --link: #9db6ee; --rule-black: #0d2c4c; --nav-bg: #0d2c4c; --nav-fg: #ffffff; } [data-ui="local"] .nav.sub { background: #123a63; } /* 포털풍은 '회색 바탕 위의 흰 상자'가 전부다. 다크에서는 '검은 바탕 위의 덜 검은 상자'로 옮긴다. */ [data-ui="naver"] { --bg: #14161a; --bg-soft: #1c1f24; --bg-sunk: #22262c; --rule: #2a2e35; --rule-strong: #3a3f47; --rule-col: transparent; --card-bg: #1c1f24; --card-line: 1px solid #2a2e35; --accent: #2ee08a; --accent-bright: #45e89a; --accent-ink: #6cefb1; --link: #7aa9ee; } [data-ui="naver"] .topbar, [data-ui="naver"] .nav, [data-ui="naver"] .masthead { background: #1c1f24; } [data-ui="naver"] .rail .box, [data-ui="naver"] .article, [data-ui="naver"] .page { background: #1c1f24; border-color: #2a2e35; } }