/* css/today.css — ATLAS TODAY 포털(index.html) 전용.
css/style.css의 ATLAS 공통 토큰을 그대로 이어받는다.
── 조판 컨셉: 밤의 신문 ──
흰 종이 신문의 문법(제호·발행일·괘선·단 조판)을 가져오되,
ATLAS의 잉크색 바탕과 금색 강조 위에 얹는다. 흰 신문이 아니라
"잉크 위에 금박으로 인쇄한 신문" — HISTORY와 한 가족임이
색만 봐도 드러나야 한다.
서명 요소는 제호 아래 '시대의 다리(era bridge)'다. HISTORY의
일곱 시대가 왼쪽에서 흘러와 여덟 번째 칸 '오늘'에서 불이 켜진다.
이 사이트의 철학(오늘의 기록이 내일의 역사가 된다)을 장식이 아닌
구조로 보여주는 장치다. */
body.today { overflow-x: hidden; overflow-y: auto; }
.today-wrap { max-width: 1120px; margin: 0 auto; padding: 0 26px 70px; }
/* ── 상단 내비 ── */
.today-nav {
max-width: 1120px; margin: 0 auto;
display: flex; align-items: center; gap: 8px;
padding: 16px 26px 0;
}
.today-nav .fill { flex: 1; }
.today-nav .site-link { background: none; cursor: pointer; font-family: inherit; }
/* ── 제호(masthead) ── */
.masthead { text-align: center; padding: 34px 0 22px; }
.masthead-date {
font-family: var(--mono); font-size: 11px; color: var(--paper-dim);
letter-spacing: .16em; display: flex; align-items: center; gap: 14px;
justify-content: center;
}
.masthead-date::before, .masthead-date::after {
content: ''; flex: 1; max-width: 180px; height: 1px; background: var(--line);
}
.masthead-title {
font-family: var(--serif); font-weight: 700;
font-size: clamp(40px, 7vw, 74px); letter-spacing: .04em;
line-height: 1.05; margin: 14px 0 10px;
}
.masthead-title .t { color: var(--gold-bright); }
.masthead-tagline {
font-size: 14px; color: var(--paper-dim); letter-spacing: .02em;
word-break: keep-all;
}
.masthead-tagline b { color: var(--ink); font-weight: 500; }
/* ── 시대의 다리 ── */
.era-bridge {
display: flex; align-items: stretch; gap: 4px;
margin: 26px auto 0; max-width: 860px;
}
.eb-seg {
flex: 1; text-align: center; padding: 8px 2px 9px;
border: 1px solid var(--line); border-radius: 4px;
text-decoration: none; color: var(--paper-dim);
font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
transition: border-color .18s, color .18s, background .18s;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eb-seg small { display: block; font-size: 8.5px; opacity: .65; margin-top: 3px; letter-spacing: .08em; }
.eb-seg:hover { border-color: var(--gold); color: var(--ink); }
.eb-arrow {
align-self: center; color: var(--gold); font-size: 13px; padding: 0 2px;
flex: 0 0 auto;
}
.eb-today {
flex: 1.35;
background: rgba(212,181,120,.13); border-color: var(--gold);
color: var(--gold-bright); font-weight: 500;
box-shadow: 0 0 22px var(--gold-soft);
}
.eb-today small { opacity: .8; }
.era-bridge-note {
text-align: center; font-size: 11.5px; color: var(--paper-dim);
margin-top: 10px; word-break: keep-all;
}
/* ── 섹션 공통 머리 ── */
.sec-head {
display: flex; align-items: baseline; gap: 12px;
margin: 46px 0 18px; padding-top: 18px;
border-top: 2px solid var(--line-strong);
}
.sec-head h2 {
font-family: var(--serif); font-weight: 700; font-size: 21px;
letter-spacing: -.02em;
}
.sec-head .sub { font-size: 12px; color: var(--paper-dim); word-break: keep-all; }
.sec-head .cnt {
margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--gold);
}
/* ── 오늘의 큐레이션: 머리기사 + 목록 ── */
.front { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }
.lead-card {
display: block; text-decoration: none; color: inherit;
border: 1px solid var(--line); border-radius: 10px;
padding: 26px 26px 24px; background: var(--paper-sunk);
transition: border-color .18s, transform .18s;
}
.lead-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.kicker {
display: inline-block; font-family: var(--mono); font-size: 10.5px;
color: var(--gold); border: 1px solid var(--line-strong);
border-radius: 3px; padding: 2px 7px; letter-spacing: .1em; margin-bottom: 12px;
}
.lead-title {
font-family: var(--serif); font-weight: 700;
font-size: clamp(21px, 2.6vw, 27px); line-height: 1.35;
letter-spacing: -.02em; margin-bottom: 12px; word-break: keep-all;
}
.lead-oneline {
font-size: 14px; line-height: 1.8; color: var(--paper-dim);
word-break: keep-all; margin-bottom: 16px;
}
.lead-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.term-chip {
font-size: 11.5px; color: var(--gold-bright);
border: 1px dashed var(--line-strong); border-radius: 99px;
padding: 3px 10px; background: var(--gold-soft);
}
.lead-more {
margin-top: 18px; font-family: var(--mono); font-size: 11px; color: var(--gold);
letter-spacing: .08em;
}
.front-list { display: flex; flex-direction: column; gap: 10px; }
.news-row {
display: block; text-decoration: none; color: inherit;
border: 1px solid var(--line); border-radius: 8px;
padding: 13px 15px; background: var(--paper-card);
transition: border-color .15s, background .15s;
}
.news-row:hover { border-color: var(--gold); background: var(--paper-sunk); }
.news-row .kicker { margin-bottom: 7px; }
.news-row h3 {
font-family: var(--serif); font-weight: 700; font-size: 15.5px;
line-height: 1.45; letter-spacing: -.015em; word-break: keep-all;
}
.news-row p {
font-size: 12.5px; line-height: 1.7; color: var(--paper-dim);
margin-top: 5px; word-break: keep-all;
}
/* ── 오늘의 말모이 ── */
.malmoi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quote-card {
border: 1px solid var(--line); border-radius: 9px;
padding: 18px 18px 15px; background: var(--gold-soft);
display: flex; flex-direction: column; gap: 10px;
}
.quote-mark {
font-family: var(--serif); font-size: 30px; line-height: .6;
color: var(--gold); opacity: .85;
}
.quote-text {
font-family: var(--serif); font-size: 15px; line-height: 1.7;
word-break: keep-all; flex: 1;
}
.quote-meta { border-top: 1px solid var(--line); padding-top: 10px; }
.quote-who { font-size: 12.5px; color: var(--gold-bright); font-weight: 500; }
.quote-context { font-size: 11.5px; color: var(--paper-dim); line-height: 1.6; margin-top: 3px; word-break: keep-all; }
/* ── 배너: 광장 / HISTORY ── */
.banner {
border: 1px solid var(--line); border-radius: 10px;
padding: 22px 24px; margin-top: 46px;
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
background:
linear-gradient(120deg, rgba(138,111,54,.10), rgba(138,111,54,.03));
}
.banner-body { flex: 1; min-width: 240px; }
.banner h2 {
font-family: var(--serif); font-weight: 700; font-size: 18px;
margin-bottom: 7px; letter-spacing: -.02em;
}
.banner p { font-size: 13px; line-height: 1.75; color: var(--paper-dim); word-break: keep-all; }
.banner p b { color: var(--ink); font-weight: 500; }
.banner-cta {
flex: 0 0 auto; text-decoration: none;
font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
color: var(--gold-bright); border: 1px solid var(--line-strong);
border-radius: 6px; padding: 10px 18px;
transition: background .15s;
}
.banner-cta:hover { background: var(--gold-soft); }
.banner-cta.disabled { opacity: .5; pointer-events: none; }
/* ── 바닥 ── */
.today-foot {
margin-top: 54px; padding-top: 20px; border-top: 1px solid var(--line);
font-size: 12px; color: var(--paper-dim); line-height: 1.9; word-break: keep-all;
}
.today-foot b { color: var(--ink); font-family: var(--serif); }
/* 2026-08-06: 개편 예고 배너. 경고가 아니라 안내이므로 종이 테마 안에서
금색 포인트만 얹는다. 개편 완료 시 마크업과 함께 제거. */
.renovation-note {
max-width: 720px; margin: 18px auto 0; padding: 12px 18px;
border: 1px solid var(--gold, #b8963e); border-radius: 10px;
background: var(--paper-sunk, rgba(184,150,62,.06));
font-size: 13px; line-height: 1.75; color: var(--ink);
text-align: center;
}
.renovation-note b { font-family: var(--serif); }
.renovation-note em { font-style: normal; font-weight: 700; color: var(--gold-deep, #8a6d2b); }
.renovation-note a { color: var(--gold-deep, #8a6d2b); font-weight: 700; text-decoration: none; white-space: nowrap; }
.renovation-note a:hover { text-decoration: underline; }
@media (max-width: 560px) { .renovation-note { margin-left: 16px; margin-right: 16px; } }
/* 2026-08-06: 패밀리 사이트 블록(엠케이아틀라스 우산).
역사 아틀라스 푸터와 같은 4칸 구조. 색만 이쪽 종이 테마에 맞췄다.
과학·철학 공개 시 .is-soon만 제거하면 된다. */
.mk-family { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.mk-family-brand { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ink); margin-bottom: 10px; font-family: var(--serif); }
.mk-family-brand span { font-weight: 400; opacity: .5; margin-left: 6px; letter-spacing: .08em; font-family: var(--mono, monospace); }
.mk-family-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mk-family-list li { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--paper-card); }
.mk-family-list a { display: block; text-decoration: none; }
.mk-family-list .mkf-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.mk-family-list .mkf-note { display: block; font-size: 11px; margin-top: 3px; color: var(--ink-faint); line-height: 1.4; }
.mk-family-list a:hover .mkf-name { color: var(--gold-deep); }
.mk-family-list li.is-current { border-color: var(--line-strong); background: var(--paper-sunk); }
.mk-family-list li.is-soon { opacity: .45; }
@media (max-width: 880px) {
.mk-family-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── 반응형 ── */
@media (max-width: 880px) {
.today-wrap { padding: 0 16px 56px; }
.today-nav { padding: 12px 14px 0; flex-wrap: wrap; gap: 6px; }
.front { grid-template-columns: 1fr; }
.malmoi-grid { grid-template-columns: 1fr; }
.era-bridge { flex-wrap: wrap; }
.eb-seg { flex: 1 0 21%; }
.eb-today { flex: 1 0 46%; }
.eb-arrow { display: none; }
}
/* ── 분야 포털 · 서고 ── */
.sec-portal-head { padding: 40px 0 4px; max-width: 720px; }
.sec-portal-title {
font-family: var(--serif); font-weight: 700;
font-size: clamp(30px, 4.5vw, 44px); letter-spacing: -.03em;
}
.sec-portal-desc {
font-size: 14px; line-height: 1.85; color: var(--paper-dim);
margin-top: 10px; word-break: keep-all;
}
.sec-news .news-row { padding: 16px 18px; }
.sec-news .news-row h3 { font-size: 17px; }
.past-day { margin-bottom: 26px; }
.past-date {
font-family: var(--mono); font-size: 11.5px; color: var(--gold);
letter-spacing: .08em; margin-bottom: 10px;
}
/* ── 브랜드 로고 (today 계열 페이지 자체 정의) ──
portal.css에만 있던 .portal-brand를 여기서도 정의한다. 분야 포털과
뉴스 상세는 portal.css를 싣지 않으므로, 이게 없으면 로고가 맨 글자로 나온다. */
.today-nav .portal-brand,
body.today .portal-brand {
font-family: var(--serif); font-weight: 700; font-size: 16px;
color: var(--ink); text-decoration: none; letter-spacing: .02em;
white-space: nowrap;
}
body.today .portal-brand span { color: var(--gold-bright); }
/* ── 갈래 카드 배경 이미지 슬롯 ──
assets/sections/.jpg 를 넣으면 자동으로 깔린다. 없으면 조용히
무시된다(배경 404는 화면에 아무것도 남기지 않는다). 글자가 얹히므로
장막을 깔아 대비를 확보한다 — history 포털 era-card와 같은 방식. */
/* ── 첫 화면 전체 배경: 강 위의 첫 빛 ──
역사아틀라스 포털과 같은 문법 — 상징 이미지 한 장이 화면 전체를 채우고,
장막이 글자 자리를 눌러준다. 아래로 갈수록 잉크색에 완전히 녹아,
스크롤이 깊어지면 자연스럽게 어두운 지면이 된다. */
body.home .today-bg {
position: fixed; inset: 0; z-index: 0;
background-color: var(--paper);
background-image: url('../assets/today-hero.jpg'); /* 분야 포털은 인라인으로 덮어쓴다 */
background-position: center 30%;
background-size: cover;
background-repeat: no-repeat;
transform: scale(1.03);
}
body.home .today-veil {
position: fixed; inset: 0; z-index: 0;
background:
linear-gradient(180deg,
rgba(21,19,15,.50) 0%,
rgba(21,19,15,.68) 34%,
rgba(21,19,15,.88) 70%,
var(--ink) 100%);
}
body.home .today-nav,
body.home .today-wrap { position: relative; z-index: 1; }
html:not(.dusk) body.home .masthead-title { text-shadow: 0 2px 30px rgba(255,255,255,.6); }
html:not(.dusk) body.home .masthead-tagline { text-shadow: 0 1px 12px rgba(255,255,255,.55); }
/* ── 분야 포털 배경 ──
첫 화면과 같은 문법이되, 이쪽은 읽을 목록이 바로 이어지므로 장막을
조금 더 빨리 닫는다. 배경은 갈래의 얼굴을 상기시키는 정도면 충분하다. */
body.sec-page .today-veil {
background:
linear-gradient(180deg,
rgba(21,19,15,.62) 0%,
rgba(21,19,15,.80) 26%,
rgba(21,19,15,.93) 52%,
var(--ink) 78%);
}
html:not(.dusk) body.sec-page .sec-portal-title { text-shadow: 0 2px 26px rgba(255,255,255,.6); }
/* 제호 한글 표기 — 브랜드 검색어("아틀라스투데이")가 화면에도 텍스트로 존재해야
검색엔진이 사이트 이름으로 인식한다. */
.masthead-ko {
font-family: var(--serif); font-size: 15px; color: var(--gold);
letter-spacing: .32em; margin: 2px 0 10px; text-indent: .32em;
}
/* ── 말모이 카드: 누를 수 있는 카드로 ── */
.quote-card {
width: 100%; text-align: left; font-family: inherit; cursor: pointer;
color: var(--ink); transition: border-color .18s, transform .18s, background .18s;
}
.quote-card:hover { border-color: var(--gold); transform: translateY(-2px); background: var(--gold-soft); }
.quote-more {
font-family: var(--mono); font-size: 10.5px; color: var(--gold);
letter-spacing: .06em; margin-top: 10px;
}
/* ── 말모이 해설 패널 ── */
.quote-root { position: fixed; inset: 0; z-index: 400; }
.quote-root[hidden] { display: none; }
.quote-scrim { position: absolute; inset: 0; background: rgba(60,52,36,.55); backdrop-filter: blur(4px); }
.quote-detail {
position: relative; z-index: 2; max-width: 620px; margin: 7vh auto; max-height: 86vh;
overflow-y: auto; background: var(--paper-sunk);
border: 1px solid var(--line-strong); border-radius: 12px;
padding: 34px 38px 38px; box-shadow: 0 26px 80px rgba(90,74,42,.22);
}
.quote-close {
position: absolute; top: 14px; right: 16px; width: 31px; height: 31px;
background: none; border: 1px solid transparent; border-radius: 6px;
color: var(--paper-dim); font-size: 20px; cursor: pointer;
}
.quote-close:hover { background: rgba(138,111,54,.2); color: var(--ink); }
.qd-kicker { font-family: var(--mono); font-size: 10.5px; color: var(--gold); letter-spacing: .16em; }
.qd-quote {
font-family: var(--serif); font-weight: 700; font-size: clamp(19px, 2.8vw, 24px);
line-height: 1.62; margin: 16px 0 14px; word-break: keep-all;
border-left: 3px solid var(--gold); padding-left: 18px;
}
.qd-who {
font-size: 14px; color: var(--gold-bright); font-weight: 500;
padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.qd-who span { color: var(--paper-dim); font-weight: 400; font-size: 12.5px; }
.qd-block { margin-top: 24px; }
.qd-label {
font-family: var(--mono); font-size: 10.5px; color: var(--gold);
letter-spacing: .16em; margin-bottom: 10px;
}
.qd-text { font-size: 14.5px; line-height: 1.95; word-break: keep-all; }
.qd-text + .qd-text { margin-top: 13px; }
.qd-source {
display: inline-block; margin-top: 24px; font-family: var(--mono); font-size: 11.5px;
color: var(--gold-bright); text-decoration: none;
border: 1px solid var(--line-strong); border-radius: 6px; padding: 9px 15px;
}
.qd-source:hover { background: var(--gold-soft); }
.qd-note {
margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
font-size: 11.5px; line-height: 1.8; color: var(--paper-dim); word-break: keep-all;
}
@media (max-width: 880px) {
.quote-detail { margin: 0; max-height: 100vh; min-height: 100vh; border-radius: 0; padding: 28px 20px 40px; }
}
/* ═══════════════════════════════════════════════════
가독성 보정 (v3.2)
"고급스럽지만 읽기 어렵다"는 평가에 대한 대응.
원인은 대비비가 아니라 금색의 과용이었다. 부제·설명·라벨까지
모두 금색이라 화면 전체가 노랗게 물들고, 눈이 쉴 곳이 없었다.
원칙: 금색은 '표지'에만 쓴다 — 갈래 이름, 구획 라벨, 링크.
읽는 글(제목·본문·설명)은 종이색으로 되돌린다.
═══════════════════════════════════════════════════ */
/* 배경 이미지 위 글자 — 장막을 더 두껍게 */
html:not(.dusk) body.home .today-veil {
background:
linear-gradient(180deg,
rgba(245,241,232,.30) 0%,
rgba(245,241,232,.62) 26%,
rgba(245,241,232,.90) 56%,
var(--paper) 80%);
}
html:not(.dusk) body.sec-page .today-veil {
background:
linear-gradient(180deg,
rgba(245,241,232,.42) 0%,
rgba(245,241,232,.74) 22%,
rgba(245,241,232,.94) 44%,
var(--paper) 64%);
}
/* 부제·설명은 금색이 아니라 종이색으로 */
.masthead-tagline { color: var(--ink); font-size: 15px; }
.masthead-tagline b { color: var(--gold-bright); }
.masthead-ko { color: var(--paper-dim); }
.sec-head .sub { color: var(--paper-dim); font-size: 12.5px; }
.sec-portal-desc { color: var(--ink); font-size: 14.5px; }
/* 한 줄 요약 — 카드에서 가장 많이 읽히는 문장 */
.lead-oneline { color: var(--ink); font-size: 14.5px; }
.news-row p { color: var(--paper-dim); font-size: 13px; }
/* 작은 글씨 상향 */
.kicker { font-size: 11px; }
.quote-context { font-size: 12px; color: var(--paper-dim); }
.quote-text { font-size: 15.5px; color: var(--ink); }
.quote-who { color: var(--ink); }
.today-foot { font-size: 12.5px; color: var(--paper-dim); }
.banner p { color: var(--paper-dim); font-size: 13.5px; }
/* 카드 바탕을 조금 더 눌러 글자를 띄운다 */
.lead-card { background: var(--paper-card); }
.news-row { background: var(--paper-card); }
.quote-card { background: var(--paper-card); }
html:not(.dusk) .lead-card:hover,
html:not(.dusk) .news-row:hover { background: var(--paper-sunk); }
/* ── 언론사 OG 썸네일 ──
사진은 언론사 서버의 이미지를 참조만 한다. 복제하지 않으므로
실패할 수 있고, 그때는 갈래 이미지가 조용히 자리를 대신한다.
깨진 이미지 아이콘은 어떤 경우에도 보이지 않아야 한다. */
.thumb-wrap {
display: block; overflow: hidden; background: var(--paper-sunk);
border: 1px solid var(--line); border-radius: 8px;
}
.thumb-wrap img {
display: block; width: 100%; height: 100%; object-fit: cover;
}
.thumb-wrap.is-fallback img { opacity: .55; }
/* 머리기사 — 사진이 카드 위에 크게 */
.lead-thumb { aspect-ratio: 16/9; margin: -6px 0 16px; border-radius: 8px; }
/* 목록 행 — 사진이 왼쪽에 */
.news-row.has-thumb {
display: grid; grid-template-columns: 104px 1fr; gap: 13px; align-items: start;
}
.row-thumb { aspect-ratio: 4/3; }
.row-body { display: block; min-width: 0; }
@media (max-width: 880px) {
.news-row.has-thumb { grid-template-columns: 88px 1fr; gap: 11px; }
}
/* 상반된 발언 짝 — 판정 대신 병렬. 저울은 읽는 사람의 것이다. */
.quote-card.is-pair { border-color: var(--line-strong); }
.pair-badge {
display: inline-block; font-family: var(--mono); font-size: 9.5px;
color: var(--gold); letter-spacing: .1em; margin-bottom: 9px;
border: 1px dashed var(--line-strong); border-radius: 3px; padding: 3px 8px;
}
/* ═══════════════════════════════════════════════════
아침의 신문 — 밝은 바탕 마감 (v4.0)
어두운 화면에서는 '빛나는 것'이 떠 보이지만, 밝은 화면에서는
'그림자를 지닌 것'이 떠 보인다. 카드마다 옅은 그림자를 주고,
테두리는 가늘게 남겨 종이가 겹쳐진 느낌을 만든다.
═══════════════════════════════════════════════════ */
/* 카드에 옅은 그림자 — 종이가 겹쳐진 느낌 */
.lead-card, .news-row {
box-shadow: 0 1px 3px rgba(90,74,42,.07), 0 6px 18px rgba(90,74,42,.05);
}
.lead-card:hover, .news-row:hover {
box-shadow: 0 2px 6px rgba(90,74,42,.10), 0 10px 26px rgba(90,74,42,.08);
}
/* 구획 괘선 — 신문의 굵은 가로줄 */
.sec-head { border-top-color: rgba(90,74,42,.45); }
/* 제호 */
.masthead-title { color: var(--ink); }
.masthead-title .t { color: var(--gold-deep); }
.masthead-date::before, .masthead-date::after { background: rgba(90,74,42,.3); }
/* 상단 내비 */
body.today .portal-brand { color: var(--ink); }
body.today .portal-brand span { color: var(--gold-deep); }
.today-nav .site-link { color: var(--ink-dim); }
.today-nav .site-link:hover { color: var(--ink); }
/* 인용부호는 밝은 바탕에서 너무 튄다 */
.quote-mark { opacity: .45; }
/* 말모이 해설·기록 원칙 등 어두운 패널 계열 */
.quote-detail, .reader, .modal {
background: var(--paper-card);
box-shadow: 0 24px 70px rgba(90,74,42,.22);
}
/* ═══════════════════════════════════════════════════
석간 지면 마감
색 토큰은 style.css의 body.dusk가 이미 뒤집어 놓았다.
여기서는 '밝은 화면의 문법'과 '어두운 화면의 문법'이 다른 것들만
되돌린다 — 장막의 방향, 그림자 대신 빛, 사진의 밝기.
═══════════════════════════════════════════════════ */
/* 배경 이미지 장막 — 어두운 쪽으로 뒤집는다 */
html.dusk body.home .today-veil {
background:
linear-gradient(180deg,
rgba(21,19,15,.66) 0%,
rgba(21,19,15,.80) 30%,
rgba(21,19,15,.93) 62%,
var(--paper) 88%);
}
html.dusk body.sec-page .today-veil {
background:
linear-gradient(180deg,
rgba(21,19,15,.74) 0%,
rgba(21,19,15,.88) 24%,
rgba(21,19,15,.96) 46%,
var(--paper) 68%);
}
/* 갈래 카드 장막도 어두운 쪽으로 */
/* 어두운 화면에서는 그림자가 보이지 않는다. 대신 테두리로 띄운다 */
html.dusk body .lead-card,
html.dusk body .news-row { box-shadow: none; border-color: var(--line); }
html.dusk body .lead-card:hover,
html.dusk body .news-row:hover { border-color: var(--gold); }
/* 글자 후광 — 밝은 배경에선 흰색, 어두운 배경에선 검정 */
html.dusk body .masthead-title { text-shadow: 0 2px 30px rgba(0,0,0,.55); }
html.dusk body .masthead-tagline { text-shadow: 0 1px 12px rgba(0,0,0,.5); }
html.dusk body .sec-portal-title { text-shadow: 0 2px 26px rgba(0,0,0,.55); }
html.dusk body .sec-head { border-top-color: var(--line-strong); }
html.dusk body .quote-mark { opacity: .85; }
html.dusk body .banner {
background: linear-gradient(120deg, rgba(184,152,96,.1), rgba(184,152,96,.02));
}
html.dusk body .quote-detail, html.dusk body .reader, html.dusk body .modal {
box-shadow: 0 26px 80px rgba(0,0,0,.65);
}
/* 사진 — 어두운 지면에서는 살짝 눌러 눈을 편하게 한다 */
html.dusk body .thumb-wrap img, html.dusk body .art-figure img { filter: brightness(.9); }
/* ── 지면 전환 토글 ── */
.skin-toggle {
background: none; border: 1px solid var(--line); border-radius: 6px;
color: var(--ink-dim); cursor: pointer; font-family: var(--mono);
font-size: 11px; letter-spacing: .04em; padding: 5px 11px;
white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.skin-toggle:hover { background: var(--gold-soft); color: var(--ink); border-color: var(--gold); }
/* 지면이 바뀔 때 눈이 놀라지 않도록 —
동작 최소화를 켠 사용자에게는 전환을 아예 끈다. */
@media (prefers-reduced-motion: reduce) {
body.today, body.today .today-bg, body.today .today-veil,
.lead-card, .news-row, .quote-card { transition: none; }
}
/* 독자가 보낸 사진 — 취재 기사와 살짝 구분한다 */
.news-row.is-reader { border-left: 2px solid #4f9070; }
html.dusk .news-row.is-reader { border-left-color: #7bb894; }
/* ═══════════════════════════════════════════════════
갈래 색인
신문 1면 위쪽의 섹션 인덱스와 같은 자리, 같은 역할이다.
예전에는 사진이 깔린 큰 카드 일곱 장을 아래쪽에 늘어놓았는데,
오늘의 기사는 이미 위 큐레이션에 다 있으므로 중복이었고 지면만 길어졌다.
그렇다고 글자만 남기니 표정이 사라졌다. 그래서 갈래 사진을 얇은 띠로
눕혔다 — 즐거움은 남기고 지면은 본문에 돌려준다.
═══════════════════════════════════════════════════ */
.sec-index {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
margin: 26px 0 4px;
background: var(--line-strong); /* 칸 사이 실선이 그대로 괘선이 된다 */
border: 1px solid var(--line-strong);
border-radius: 8px; overflow: hidden;
}
.sec-tab {
position: relative; display: block; height: 78px;
text-decoration: none; overflow: hidden; background: var(--paper-sunk);
}
.st-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
/* 사진 위에 글자가 얹히므로 아래쪽을 눌러 대비를 확보한다.
조간·석간 모두 '어두운 장막'을 쓴다 — 사진 자체가 어둡기 때문에
밝은 장막을 씌우면 글자가 뜨지 않는다. */
.st-bg::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,18,14,.16) 0%, rgba(20,18,14,.74) 100%);
}
.st-body {
position: absolute; left: 0; right: 0; bottom: 9px;
text-align: center; z-index: 2;
}
.st-name {
display: block; font-family: var(--serif); font-weight: 700;
font-size: 14px; color: #f2ede2; letter-spacing: -.01em;
text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.st-cnt {
display: block; font-family: var(--mono); font-size: 10px;
color: var(--gold-bright); margin-top: 2px;
text-shadow: 0 1px 5px rgba(0,0,0,.5);
}
html:not(.dusk) .st-cnt { color: #e6c98d; }
/* 오늘 기록이 없는 갈래는 한 겹 더 눌러 조용히 둔다 */
.sec-tab.is-empty .st-bg { opacity: .55; }
.sec-tab.is-empty .st-bg::after {
background: linear-gradient(180deg, rgba(20,18,14,.42) 0%, rgba(20,18,14,.86) 100%);
}
.sec-tab.is-empty .st-name { color: #b8b0a0; }
.sec-tab.is-empty .st-cnt { color: #b8b0a0; }
@media (max-width: 720px) {
.sec-index { grid-template-columns: repeat(4, 1fr); }
.sec-tab { height: 70px; }
.st-name { font-size: 13px; }
}
@media (max-width: 380px) {
.sec-index { grid-template-columns: repeat(3, 1fr); }
}
/* ── 살림의 기록 (life.html + 첫 화면 맛보기) ─────────────────────────
실록이 물가를 적던 자리. 표 하나가 그달의 온도계다. */
.life-table {
width: 100%; border-collapse: collapse;
background: var(--paper-card); border: 1px solid var(--line);
border-radius: 10px; overflow: hidden;
font-size: 13.5px;
}
.life-table tr { border-bottom: 1px solid var(--line); }
.life-table tr:last-child { border-bottom: 0; }
.life-table th, .life-table td { padding: 11px 14px; text-align: left; vertical-align: top; }
.life-table th {
font-weight: 500; color: var(--ink); width: 38%;
word-break: keep-all;
}
.life-table .life-v {
font-family: var(--mono); font-size: 14px; color: var(--gold-deep);
white-space: nowrap; width: 1%;
}
.life-table .life-meta { font-size: 12px; color: var(--ink-faint); line-height: 1.6; }
.life-table .life-meta a { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; }
.life-table .life-meta a:hover { color: var(--gold-deep); }
.life-table .life-note { display: block; color: var(--ink-dim); margin-top: 2px; }
.life-month { margin-top: 34px; }
.life-month-note {
font-size: 12.5px; color: var(--ink-dim); line-height: 1.7;
margin: -4px 0 12px; word-break: keep-all;
}
.life-more {
display: inline-block; margin-top: 10px;
font-family: var(--mono); font-size: 12px; color: var(--gold-deep);
text-decoration: none; border-bottom: 1px solid var(--gold-on);
padding-bottom: 1px;
}
.life-more:hover { border-bottom-color: var(--gold-deep); }
@media (max-width: 560px) {
.life-table th { width: auto; }
.life-table th, .life-table td { padding: 9px 10px; }
.life-table .life-v { font-size: 13px; }
}
/* ── 대문(大門) — 두 축이 나란한 첫 화면 ──────────────────────────
왼쪽은 나라의 하루(오늘의 기록), 오른쪽은 사람의 하루(사람의 기록).
신문 지면도 전면 지도도 아닌, 기록관의 정문. */
.seal-line {
font-family: var(--mono); font-size: 11.5px; color: var(--gold);
letter-spacing: .08em; margin-top: 10px;
}
.seal-line b { color: var(--gold-deep); font-weight: 500; }
.gate {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
margin: 26px 0 8px;
}
@media (max-width: 860px) { .gate { grid-template-columns: 1fr; } }
.gate-door {
background: var(--paper-card); border: 1px solid var(--line);
border-radius: 14px; padding: 22px 22px 18px;
display: flex; flex-direction: column; gap: 14px;
min-width: 0;
}
.gd-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.gd-name {
font-family: 'Noto Serif KR', serif; font-size: 21px; font-weight: 700;
color: var(--ink); letter-spacing: .02em;
}
.gd-sub {
font-size: 12.5px; color: var(--ink-dim); margin-top: 5px;
line-height: 1.6; word-break: keep-all;
}
/* 왼쪽 문 — 오늘의 말 */
.gate-quote {
display: block; width: 100%; text-align: left; cursor: pointer;
background: var(--paper-sunk); border: 1px solid var(--line);
border-radius: 10px; padding: 18px 18px 14px; position: relative;
}
.gate-quote:hover { border-color: var(--line-strong); }
.gq-mark {
position: absolute; top: 4px; left: 12px;
font-family: 'Noto Serif KR', serif; font-size: 34px; color: var(--gold);
opacity: .55; line-height: 1;
}
.gq-text {
display: block; font-family: 'Noto Serif KR', serif;
font-size: 17.5px; font-weight: 700; line-height: 1.55; color: var(--ink);
padding-left: 14px; word-break: keep-all;
}
.gq-text.two { margin-top: 8px; }
.gq-who {
display: block; font-size: 12px; color: var(--ink-faint);
padding-left: 14px; margin-top: 6px;
}
.gq-vs {
display: inline-block; margin: 12px 0 0 14px;
font-family: var(--mono); font-size: 10.5px; color: var(--gold-deep);
border: 1px solid var(--gold-on); border-radius: 99px; padding: 2px 9px;
}
.gq-more {
display: block; margin-top: 12px; padding-left: 14px;
font-family: var(--mono); font-size: 11px; color: var(--gold-deep);
}
.gate-lead { display: block; text-decoration: none; }
.gl-k {
display: block; font-family: var(--mono); font-size: 10.5px;
color: var(--gold); letter-spacing: .14em; margin-bottom: 4px;
}
.gl-t {
font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.5;
word-break: keep-all;
}
.gate-lead:hover .gl-t { color: var(--gold-deep); }
.gd-shelf {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto;
padding-top: 12px; border-top: 1px solid var(--line);
}
.gd-shelf a {
font-size: 12px; color: var(--ink-dim); text-decoration: none;
border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px;
}
.gd-shelf a:hover { color: var(--gold-deep); border-color: var(--gold-on); }
/* 오른쪽 문 — 오늘의 지도 */
.gate-map { display: block; position: relative; text-decoration: none; }
.gate-map svg { display: block; width: 100%; height: auto; max-height: 330px; }
.gm-land {
fill: var(--paper-sunk); stroke: var(--line);
stroke-width: .6; vector-effect: non-scaling-stroke;
}
.gate-map:hover .gm-land { stroke: var(--line-strong); }
.gp-pin { fill: var(--gold-deep); }
.gp-pin.reader { fill: none; stroke: var(--gold-deep); stroke-width: 2.5; }
.gp-wave {
fill: none; stroke: var(--gold-deep); stroke-width: 1.5; opacity: .8;
animation: gpw 2.4s ease-out infinite;
transform-origin: center; transform-box: fill-box;
}
@keyframes gpw {
0% { transform: scale(1); opacity: .8; }
100% { transform: scale(3.4); opacity: 0; }
}
.gm-enter {
position: absolute; right: 8px; bottom: 6px;
font-family: var(--mono); font-size: 11px; color: var(--gold-deep);
}
.gate-story { display: block; text-decoration: none; margin-bottom: 8px; }
.gs-place {
display: block; font-family: var(--mono); font-size: 10.5px;
color: var(--gold); margin-bottom: 2px;
}
.gs-t {
font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.5;
word-break: keep-all;
}
.gate-story:hover .gs-t { color: var(--gold-deep); }
.gate-readers {
font-size: 12px; color: var(--ink-dim); line-height: 1.6;
border-top: 1px dashed var(--line); padding-top: 10px; word-break: keep-all;
}
.gate-readers b { color: var(--gold-deep); font-weight: 600; }
.gd-note {
font-size: 11.5px; color: var(--ink-faint); line-height: 1.65;
word-break: keep-all;
}
.gd-cta {
align-self: flex-start;
font-family: var(--mono); font-size: 12px; color: var(--gold-deep);
text-decoration: none; border: 1px solid var(--gold-on);
border-radius: 99px; padding: 7px 14px;
}
.gd-cta:hover { background: var(--gold-soft); }
/* ── 사진 보내는 곳 ──
예전에는 mailto 링크였는데, 휴대폰에서 이걸 누르면 메일 앱이 제멋대로
열리거나 아무 일도 일어나지 않는다. 주소를 눈으로 보여주고 복사만
시켜주는 편이 낫다 — 어디에 보내는지 알고 보내는 것이 기록의 예의이기도 하다. */
.gd-mail { align-self: stretch; }
.gd-mail-label {
font-size: 11.5px; color: var(--ink-faint); line-height: 1.6;
word-break: keep-all; margin-bottom: 8px;
}
.gd-mail-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
border: 1px dashed var(--line-strong); border-radius: 8px;
padding: 9px 10px 9px 13px; background: var(--gold-soft);
}
.gd-mail-addr {
flex: 1; min-width: 0;
font-family: var(--mono); font-size: 13px; color: var(--gold-deep);
letter-spacing: .01em; word-break: break-all;
-webkit-user-select: all; user-select: all; /* 한 번 눌러 통째로 선택되게 */
}
.gd-mail-copy {
flex: 0 0 auto; cursor: pointer; font-family: var(--mono); font-size: 11.5px;
color: var(--gold-deep); background: none;
border: 1px solid var(--gold-on); border-radius: 99px; padding: 6px 13px;
transition: background .15s;
}
.gd-mail-copy:hover { background: rgba(138,111,54,.16); }
.gd-mail-copy.is-done { color: var(--ink); border-color: var(--line-strong); }
/* ── 봉인 도장 — 지난 기록의 관인 ── */
.seal-stamp {
display: inline-block;
font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 11px;
color: #a03123; border: 2px solid #a03123; border-radius: 6px;
padding: 3px 8px; letter-spacing: .3em; text-indent: .3em;
transform: rotate(-6deg); opacity: .82; user-select: none;
mix-blend-mode: multiply;
}
html.dusk .seal-stamp { color: #d96a55; border-color: #d96a55; mix-blend-mode: normal; }
/* ── 말모이 상세 · 국회 이력 (js/members-data.js 연결) ── */
.qd-assembly { border-left: 2px solid var(--gold-on); padding-left: 12px; }
.qd-terms { color: var(--ink-faint); font-size: 12px; margin-left: 4px; }
/* ── 특집 배너 (첫 화면에서 여기로 오는 문) ── */
.sp-banner {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
margin-top: 30px; padding: 20px 22px;
border: 1px solid var(--line-strong); border-radius: 12px;
background: var(--gold-soft);
}
.sp-banner-body { flex: 1; min-width: 240px; }
.sp-banner .k {
font-family: var(--mono); font-size: 10.5px; color: var(--gold);
letter-spacing: .16em; display: block; margin-bottom: 8px;
}
.sp-banner h2 {
font-family: var(--serif); font-weight: 700; font-size: 19px;
letter-spacing: -.02em; word-break: keep-all;
}
.sp-banner p {
font-size: 13px; line-height: 1.8; color: var(--paper-dim);
margin-top: 7px; word-break: keep-all;
}
.sp-banner-cta {
font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
color: var(--gold-bright); border: 1px solid var(--gold-on);
border-radius: 999px; padding: 10px 18px; white-space: nowrap;
transition: background .15s;
}
.sp-banner-cta:hover { background: rgba(138,111,54,.18); }