/* ========================================================================== FestAlive — 법무·정책 정적 페이지 전용 스타일 (Task 23) -------------------------------------------------------------------------- · 대상: /terms.html · /privacy.html · /policy.html · /about.html · /contact.html (그 밖의 화면은 이 파일을 쓰지 않는다) · 값은 전부 public/assets/tokens.css 의 토큰을 쓴다. 새 색을 만들지 않는다. · app.css / app.js 에 의존하지 않는다 — 그 파일들은 다른 담당 소유다. 그래서 @font-face 두 블록만 app.css 와 동일한 내용으로 여기 복제해 둔다 (같은 font-family·같은 경로라 중복 다운로드는 일어나지 않는다). ⚠️ app.css 의 @font-face 가 바뀌면 여기도 같이 맞춰야 한다. · 자바스크립트는 각 페이지 의 5줄(테마 복원)뿐이다. 이 파일에는 없다. ========================================================================== */ @font-face { font-family: "Pretendard Variable"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/pretendard-var-latin.woff2") format("woff2"); unicode-range: U+0020-007F, U+00A0-00FF, U+2010-2027, U+2022, U+203B, U+20A9, U+2116, U+2190-2193, U+2260, U+2264-2265, U+25A0, U+25CF, U+2605-2606, U+00B7, U+FF01-FF60; } @font-face { font-family: "Pretendard Variable"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/pretendard-var-korean.woff2") format("woff2"); unicode-range: U+3000-303F, U+3131-3163, U+AC00-D7A3; } /* -------------------------------------------------------------------------- 0. 리셋 · 기본 -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; /* 뷰어가 자기 배경을 깔기 때문에 배경·글자색을 명시한다 */ background: var(--fa-bg); color: var(--fa-text-1); font-family: var(--fa-font-sans); font-size: var(--fa-text-md); line-height: var(--fa-lh-normal); font-weight: var(--fa-fw-regular); font-variant-numeric: var(--fa-numeric); /* 긴 이메일·URL·법조문 인용이 375px 에서 가로 스크롤을 만들지 않게 */ overflow-wrap: anywhere; word-break: keep-all; /* 한글은 단어 단위로 끊는다 */ } img, svg { max-width: 100%; height: auto; } a { color: var(--fa-accent-text); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--fa-accent); } a:focus-visible, summary:focus-visible { outline: var(--fa-focus-width) solid var(--fa-focus); outline-offset: var(--fa-focus-offset); border-radius: var(--fa-radius-xs); } /* -------------------------------------------------------------------------- 1. 레이아웃 -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--fa-content-max); margin: 0 auto; /* 좌우 거터는 여기 한 곳에서만 준다. 세로는 padding-block 으로 — 축약형은 쓰지 않는다 */ padding-left: var(--fa-gutter); padding-right: var(--fa-gutter); } .skip { position: absolute; left: -9999px; } .skip:focus { left: var(--fa-gutter); top: var(--fa-space-8); z-index: var(--fa-z-toast); padding: var(--fa-space-8) var(--fa-space-12); background: var(--fa-surface-2); color: var(--fa-text-1); border: 1px solid var(--fa-border-strong); border-radius: var(--fa-radius-sm); text-decoration: none; } /* ── 상단 바 ─────────────────────────────────────────────────────────── */ .top { border-bottom: 1px solid var(--fa-border); background: var(--fa-surface-1); } .top .wrap { padding-block: var(--fa-space-12); display: flex; flex-wrap: wrap; align-items: center; gap: var(--fa-space-8) var(--fa-space-16); } .brand { display: inline-flex; align-items: center; gap: var(--fa-space-8); font-size: var(--fa-text-lg); font-weight: var(--fa-fw-bold); letter-spacing: var(--fa-ls-tight); color: var(--fa-text-1); text-decoration: none; } .brand b { background: var(--fa-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 로고 마크 — 앱 헤더와 같은 파일(2026-09-14 교체, 원본 design/logo/mark.svg) */ .brand__mark { width: 22px; height: 22px; flex: none; display: block; } .top .home { margin-left: auto; font-size: var(--fa-text-sm); min-height: var(--fa-tap-min); display: inline-flex; align-items: center; } /* ── 문서 간 이동 (모든 정책 페이지 상·하단에 동일하게 들어간다) ─────── */ .docnav { border-bottom: 1px solid var(--fa-border); background: var(--fa-surface-2); } .docnav .wrap { padding-block: var(--fa-space-8); display: flex; flex-wrap: wrap; gap: var(--fa-chip-gap); } .docnav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--fa-chip-pad-x-display); border: var(--fa-chip-border-w) solid var(--fa-chip-neutral-bd); border-radius: var(--fa-chip-radius); background: var(--fa-chip-neutral-bg); color: var(--fa-chip-neutral-fg); font-size: var(--fa-text-sm); text-decoration: none; } .docnav a:hover { background: var(--fa-surface-3); color: var(--fa-text-1); } .docnav a[aria-current="page"] { border-width: var(--fa-chip-border-w-active); border-color: var(--fa-accent); background: var(--fa-chip-live-bg); color: var(--fa-chip-live-fg); font-weight: var(--fa-fw-semibold); } /* ── 본문 ───────────────────────────────────────────────────────────── */ main { padding-block: var(--fa-space-24) var(--fa-space-48); } .doc-head { margin-bottom: var(--fa-space-24); } h1 { margin: 0 0 var(--fa-space-8); font-size: var(--fa-text-2xl); line-height: var(--fa-lh-tight); letter-spacing: var(--fa-ls-tight); font-weight: var(--fa-fw-bold); } .lede { margin: 0; color: var(--fa-text-2); font-size: var(--fa-text-md); } .meta { margin: var(--fa-space-12) 0 0; padding: 0; list-style: none; color: var(--fa-text-3); font-size: var(--fa-text-xs); } .meta li + li { margin-top: var(--fa-space-4); } h2 { margin: var(--fa-space-40) 0 var(--fa-space-12); padding-top: var(--fa-space-16); border-top: 1px solid var(--fa-border); font-size: var(--fa-text-xl); line-height: var(--fa-lh-snug); font-weight: var(--fa-fw-bold); scroll-margin-top: var(--fa-space-16); } h3 { margin: var(--fa-space-24) 0 var(--fa-space-8); font-size: var(--fa-text-lg); font-weight: var(--fa-fw-semibold); } h4 { margin: var(--fa-space-16) 0 var(--fa-space-8); font-size: var(--fa-text-md); font-weight: var(--fa-fw-semibold); color: var(--fa-text-2); } p { margin: 0 0 var(--fa-space-12); max-width: var(--fa-measure); } ul, ol { margin: 0 0 var(--fa-space-12); padding-left: 1.35em; max-width: var(--fa-measure); } li { margin-bottom: var(--fa-space-4); } li > ul, li > ol { margin-top: var(--fa-space-4); margin-bottom: var(--fa-space-4); } strong { font-weight: var(--fa-fw-semibold); } code { font-family: var(--fa-font-mono); font-size: 0.9em; padding: 0.1em 0.35em; border-radius: var(--fa-radius-xs); background: var(--fa-surface-2); border: 1px solid var(--fa-border); } /* ── 목차 ───────────────────────────────────────────────────────────── */ .toc { margin: 0 0 var(--fa-space-24); padding: var(--fa-space-16); background: var(--fa-surface-1); border: 1px solid var(--fa-border); border-radius: var(--fa-radius-md); } .toc h2 { margin: 0 0 var(--fa-space-8); padding: 0; border: 0; font-size: var(--fa-text-sm); font-weight: var(--fa-fw-semibold); color: var(--fa-text-3); letter-spacing: var(--fa-ls-wide); text-transform: uppercase; } .toc ol { margin: 0; padding-left: 1.3em; font-size: var(--fa-text-sm); } .toc a { color: var(--fa-text-2); text-decoration: none; } .toc a:hover { color: var(--fa-accent-text); text-decoration: underline; } /* ── 콜아웃 ─────────────────────────────────────────────────────────── */ .note, .warn, .law { margin: var(--fa-space-16) 0; padding: var(--fa-space-12) var(--fa-space-16); border: 1px solid var(--fa-info-bd); border-left-width: 4px; border-radius: var(--fa-radius-sm); background: var(--fa-info-bg); color: var(--fa-text-1); font-size: var(--fa-text-sm); } .note > :last-child, .warn > :last-child, .law > :last-child { margin-bottom: 0; } .warn { background: var(--fa-warning-bg); border-color: var(--fa-warning-bd); } .law { background: var(--fa-surface-2); border-color: var(--fa-border-strong); } .note .h, .warn .h, .law .h { display: block; margin-bottom: var(--fa-space-4); font-weight: var(--fa-fw-semibold); font-size: var(--fa-text-xs); letter-spacing: var(--fa-ls-wide); text-transform: uppercase; color: var(--fa-text-2); } .note .h { color: var(--fa-info-fg); } .warn .h { color: var(--fa-warning-fg); } /* ── 표 — 375px 에서 가로 스크롤은 이 래퍼 안에서만 일어난다 ─────────── */ .tw { margin: var(--fa-space-16) 0; overflow-x: auto; border: 1px solid var(--fa-border); border-radius: var(--fa-radius-sm); background: var(--fa-surface-1); -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: var(--fa-text-sm); } caption { padding: var(--fa-space-8) var(--fa-space-12); text-align: left; color: var(--fa-text-3); font-size: var(--fa-text-xs); border-bottom: 1px solid var(--fa-border); } th, td { padding: var(--fa-space-8) var(--fa-space-12); text-align: left; vertical-align: top; border-bottom: 1px solid var(--fa-border); } thead th { background: var(--fa-surface-2); color: var(--fa-text-2); font-weight: var(--fa-fw-semibold); white-space: nowrap; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } tbody th { font-weight: var(--fa-fw-medium); color: var(--fa-text-1); } td code, th code { white-space: nowrap; } /* ── 채워야 할 값 (사업자 정보·시행일자 등) ─────────────────────────── */ mark.fill { padding: 0.05em 0.4em; border: 1px dashed var(--fa-danger-bd); border-radius: var(--fa-radius-xs); background: var(--fa-danger-bg); color: var(--fa-danger-fg); font-weight: var(--fa-fw-semibold); font-size: 0.95em; } .fill-legend { margin: var(--fa-space-16) 0 0; color: var(--fa-text-3); font-size: var(--fa-text-xs); } /* ── 정의 목록 (연락처·문의 창구) ───────────────────────────────────── */ dl.kv { margin: var(--fa-space-16) 0; padding: var(--fa-space-16); border: 1px solid var(--fa-border); border-radius: var(--fa-radius-md); background: var(--fa-surface-1); } dl.kv dt { font-size: var(--fa-text-xs); font-weight: var(--fa-fw-semibold); color: var(--fa-text-3); letter-spacing: var(--fa-ls-wide); text-transform: uppercase; } dl.kv dd { margin: var(--fa-space-4) 0 var(--fa-space-16); } dl.kv dd:last-child { margin-bottom: 0; } /* ── 접힘 블록 (부칙·개정이력) ──────────────────────────────────────── */ details { margin: var(--fa-space-16) 0; border: 1px solid var(--fa-border); border-radius: var(--fa-radius-sm); background: var(--fa-surface-1); } summary { padding: var(--fa-space-12) var(--fa-space-16); min-height: var(--fa-tap-min); display: flex; align-items: center; cursor: pointer; font-weight: var(--fa-fw-semibold); font-size: var(--fa-text-sm); } details > :not(summary) { padding-left: var(--fa-space-16); padding-right: var(--fa-space-16); } /* 부칙 카드의 번호 목록 — 위 16px 이 ol 의 들여쓰기(1.35em)를 덮어 번호가 카드 테두리에 붙었다(2026-09-14). 번호가 카드 안쪽 16px 선에서 시작하도록 들여쓰기를 더한다. */ details > ol, details > ul { padding-left: calc(var(--fa-space-16) + 1.35em); } details > :last-child { padding-bottom: var(--fa-space-16); } /* 요약 박스(.law) 안의 「더 보기」 — 본문 접힘 블록보다 가볍게, 테두리 없이 링크처럼 */ .law details { margin: calc(-1 * var(--fa-space-8)) 0 var(--fa-space-4); border: 0; background: transparent; } .law summary { padding: 0; min-height: var(--fa-tap-min); font-size: var(--fa-text-xs); color: var(--fa-accent-text); } .law summary::after { content: '\00a0▾'; } .law details[open] > summary::after { content: '\00a0▴'; } .law details > ul { padding-left: 1.35em; padding-right: 0; } /* 본문 ul 과 같은 들여쓰기 — 위 details 규칙(16px)을 되돌린다 */ .law details > :last-child { padding-bottom: 0; } /* ── 푸터 ───────────────────────────────────────────────────────────── */ .foot { border-top: 1px solid var(--fa-border); background: var(--fa-surface-1); color: var(--fa-text-3); font-size: var(--fa-text-xs); } .foot .wrap { padding-block: var(--fa-space-24) var(--fa-space-32); } .foot nav ul { margin: 0 0 var(--fa-space-12); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--fa-space-8) var(--fa-space-16); max-width: none; } .foot nav a { min-height: 32px; display: inline-flex; align-items: center; } .foot p { margin: 0 0 var(--fa-space-4); max-width: none; } /* -------------------------------------------------------------------------- 2. 좁은 화면 — 표 셀 여백만 줄인다(가로 스크롤은 .tw 가 흡수한다) -------------------------------------------------------------------------- */ @media (max-width: 420px) { th, td { padding: var(--fa-space-8); } h1 { font-size: var(--fa-text-xl); } h2 { font-size: var(--fa-text-lg); margin-top: var(--fa-space-32); } } /* -------------------------------------------------------------------------- 3. 인쇄 — 분쟁 시 출력해 쓰는 문서다. 잉크를 아끼고 링크 주소를 펼친다. -------------------------------------------------------------------------- */ @media print { .top, .docnav, .toc, .skip, .foot nav { display: none !important; } body { background: #fff; color: #000; font-size: 10.5pt; } .wrap { max-width: none; padding: 0; } .tw { overflow: visible; } a { color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; } h2 { break-after: avoid; } .tw, table { break-inside: avoid; } }