/* 2027 달력 페이지 전용 스타일 — Seeknoter * ../styles.css 다음에 읽는다. 글꼴은 styles.css 의 --font(한글 시스템 글꼴 폴백)를 그대로 쓴다. 외부 폰트 없음. * 인쇄: 기본(Ctrl+P, 「1년 한 장 인쇄」)은 12개월을 A4 한 장에. * 「○월만 인쇄」·「12개월 한 장씩 인쇄」는 calendar.js 가 에 print-one / print-monthly 클래스를 붙인다. * 자바스크립트가 없으면 주소의 #m01~#m12, #print-monthly (:target) 로 같은 모드가 된다. */ :root { --lw-soft: #e3ecf9; --lw-line: #8fa9d3; } @media (prefers-color-scheme: dark) { :root { --lw-soft: #1d2a3d; --lw-line: #4a6796; } } .page-cal .wrap { max-width: 64rem; } .page-cal .site-header p, .page-cal main p, .page-cal .site-footer p, .page-cal .plan-list { max-width: 46rem; } .h1-sub { display: block; font-size: 1rem; font-weight: 600; color: var(--muted); margin-top: .2rem; letter-spacing: 0; } .crosslink { margin-top: .75rem; font-size: .95rem; } /* 범례 */ .page-cal .legend { font-size: .85rem; margin: .25rem 0 .5rem; } .legend .l-lw { width: 1.3rem; border-radius: 3px; background: var(--lw-soft); border: 1px solid var(--lw-line); } .legend .l-sun { color: var(--hol); font-weight: 700; } .legend .l-sat { color: var(--sat); font-weight: 700; } /* 인쇄 버튼 */ .print-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 .25rem; } .print-bar .btn { margin-top: 0; text-decoration: none; } .btn.ghost { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } /* 12개월 달력 */ .months-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: .9rem; margin-top: .9rem; } .cal-month { border: 1px solid var(--line); border-radius: 10px; padding: .25rem .5rem .6rem; background: var(--surface); } .mhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .mhead h3 { margin: 0; font-size: 1.05rem; } .pbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .3rem; font-size: .82rem; white-space: nowrap; } table.cal { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: .95rem; } .cal thead th { background: none; text-align: center; font-size: .75rem; font-weight: 600; color: var(--muted); padding: .25rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; } .cal thead th.sun { color: var(--hol); } .cal thead th.sat { color: var(--sat); } .cal td { position: relative; height: 2.4rem; padding: 2px 0; border: 0; text-align: center; vertical-align: middle; } .cal td time { display: inline-flex; align-items: center; justify-content: center; width: 2.05rem; height: 2.05rem; border-radius: 999px; font-variant-numeric: tabular-nums; } .cal td.sun { color: var(--hol); } .cal td.sat { color: var(--sat); } .cal td.hol { color: var(--hol); } .cal td.hol time { background: var(--hol-soft); font-weight: 700; } .cal td.sub, .cal td.sub time { color: var(--sub); } .cal td.sub time { background: var(--sub-soft); box-shadow: inset 0 0 0 2px var(--sub); } .cal td.lw { background: var(--lw-soft); } /* 공휴일 이름: 화면에서는 칸이 좁아 숨기고(스크린리더는 읽음) 달 아래 목록으로 보여 준다. 한 달 인쇄에서는 칸 안에 표시. */ .cal .hn { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mh { list-style: none; margin: .5rem .2rem 0; padding: .45rem 0 0; border-top: 1px dashed var(--line); font-size: .84rem; color: var(--muted); } .mh li { margin: .1rem 0; } .mh time { font-weight: 700; color: var(--hol); font-variant-numeric: tabular-nums; } .mh .is-sub time { color: var(--sub); } .mh .is-lw { color: var(--text); } .mh .is-lw b { color: var(--accent); } /* 인쇄할 때만 보이는 요소 */ .print-summary, .print-source, .psrc { display: none; } /* 공휴일 표 */ /* overflow-wrap: anywhere(styles.css)는 칸의 최소 너비를 한 글자로 만들어 좁은 화면에서 이름을 글자 단위로 끊는다 → 이 표에서만 break-word */ .cal-hol-table td { overflow-wrap: break-word; } .cal-hol-table td:first-child { width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; } .cal-hol-table tr.is-sub td { background: var(--sub-soft); } /* ------------------------------------------------------------------ 인쇄 (A4) */ @page { size: A4 portrait; margin: 10mm; } @media print { :root { color-scheme: light; --bg: #fff; --surface: #fff; --surface-2: #f1f2ee; --text: #111; --muted: #333; --line: #9a9ea5; --accent: #1f5fbf; --hol: #b8282b; --hol-soft: #fbe1e1; --sub: #8a4a00; --sub-soft: #ffeac8; --sat: #2a5ca6; --lw-soft: #e1eaf8; --lw-line: #8fa9d3; } html, body { background: #fff !important; color: #111; } body { font-size: 10pt; line-height: 1.4; } .site-header, .site-footer, .no-print, .ad-slot, .skip { display: none !important; } .page-cal main > section:not(#year) { display: none !important; } .page-cal .wrap { max-width: none; margin: 0; padding: 0; } .page-cal main section#year { border: 0; border-radius: 0; margin: 0; padding: 0; background: none; } .legend, .legend i, .cal-month, .cal td, .cal td time, .print-summary { -webkit-print-color-adjust: exact; print-color-adjust: exact; } #year > h2 { font-size: 15pt; margin: 0 0 1mm; } .page-cal .legend { font-size: 8pt; margin: 0 0 2.5mm; color: #333; } /* 1년 한 장 (기본) — 3열 × 4줄 */ .months-cal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm 4mm; margin: 0; } .cal-month { border: .3mm solid #9a9ea5; border-radius: 2mm; padding: .8mm 1.5mm 1.5mm; break-inside: avoid; page-break-inside: avoid; } .mhead h3 { font-size: 11pt; margin: 0 0 .6mm; } .cal { font-size: 8.5pt; } .cal thead th { font-size: 7pt; padding: .4mm 0; } .cal td { height: 6.3mm; padding: .2mm 0; } .cal td time { width: 5.4mm; height: 5.4mm; } .cal td.sub time { box-shadow: inset 0 0 0 .35mm var(--sub); } .mh { display: none; } .print-summary { display: block; column-count: 3; column-gap: 5mm; list-style: none; margin: 3mm 0 0; padding: 2mm 0 0; border-top: .3mm solid #9a9ea5; font-size: 7.5pt; line-height: 1.5; } .print-summary li { break-inside: avoid; } .print-summary time { font-weight: 700; color: var(--hol); } .print-summary .is-sub time { color: var(--sub); } .print-source { display: block; margin: 2mm 0 0; font-size: 7pt; color: #333; } /* 한 달을 크게 — 「○월만 인쇄」와 「12개월 한 장씩 인쇄」 공통 */ :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) #year > h2, :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .print-summary, :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .print-source { display: none; } :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .months-cal { display: block; } :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .cal-month { border: 0; border-radius: 0; padding: 0; } :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .mhead h3 { font-size: 22pt; margin: 0 0 3mm; } :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .cal { font-size: 15pt; } :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .cal thead th { font-size: 10pt; padding: 1.5mm 0; border-bottom: .5mm solid #111; } :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .cal td { height: 32mm; padding: 1.2mm 1.5mm; border: .3mm solid #9a9ea5; text-align: left; vertical-align: top; } :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .cal td time { display: inline-block; width: auto; height: auto; padding: 0 1.5mm; border-radius: 1.5mm; line-height: 1.35; } :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .cal .hn { position: static; display: block; width: auto; height: auto; margin: 1mm 0 0; overflow: visible; clip: auto; white-space: normal; font-size: 8.5pt; line-height: 1.25; font-weight: 700; } :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .mh { display: block; margin-top: 3mm; font-size: 9.5pt; color: #333; } :is(html.print-one, html.print-monthly, html:not(.js-print):has(.cal-month:target), html:not(.js-print):has(#print-monthly:target)) .psrc { display: block; margin: 2mm 0 0; font-size: 7.5pt; color: #333; } /* 12개월 한 장씩: 달마다 새 쪽 */ :is(html.print-monthly, html:not(.js-print):has(#print-monthly:target)) .cal-month { break-after: page; page-break-after: always; } :is(html.print-monthly, html:not(.js-print):has(#print-monthly:target)) .cal-month:last-child { break-after: auto; page-break-after: auto; } /* 한 달만: 나머지 달 숨김 */ :is(html.print-one .cal-month:not(.print-me), html:not(.js-print):has(.cal-month:target) .cal-month:not(:target)) { display: none; } }