/* 이 고객사만의 연출. 컴포넌트 변주는 여기 먼저 쓴다 — 두 고객사에서 겹치면 shared/ 로 승격한다(규칙 4). ⚠️ 공용에 이미 있는 것을 베껴 오지 않는다. 옛 local.css 는 푸터·내비 반응형을 통째로 갖고 있었는데, 그건 이관 당시 shared 에 없어서였다. 지금은 있다 — 베끼면 공용을 고쳐도 이 사이트만 안 따라오는 자리가 생긴다(규칙 3). */ /* ── 글꼴은 여기 없다 ── 2026-08-22 부터 본문 글꼴 선언은 «엔진이 소유하는» assets/fonts.css 에 있다 (`wf font pretendard --role body --as-is` 가 찍는다). 여기 손으로 박아 뒀던 @font-face 넷과 .ks 파일 넷은 그날 걷었다 — 선언이 두 벌이면 안 쓰는 파일이 계속 배포되고, 「Regular 가 든 woff2」가 둘이 되어 wf card 가 막힌다. 고칠 것이 있으면 이 파일이 아니라 wf font 를 다시 돌린다. 라이선스 원문은 site/fonts/pretendard-LICENSE.txt 로 동봉돼 있다 — 지우면 그 순간 OFL 재배포 조건 위반이다. */ /* ── 뒤로 가기가 «있던 자리» 로 돌아오게 한다 (2026-08-22 대표 지적) ── 증상: 랜딩에서 메뉴로 나갔다가 뒤로 오면 보던 자리가 아니라 «최상단» 이다. 원인은 공용 `system.css` 의 `html { scroll-behavior: smooth }` 로 본다. WebKit(iPad·iPhone 은 브라우저 상표와 무관하게 전부 WebKit)에서 이 속성이 켜져 있으면 브라우저의 «히스토리 스크롤 복원» 과 부딪친다. 실측으로 걸러낸 것: · `history.scrollRestoration` 은 `auto` — 사이트가 끈 적이 없다 · site.js 에 scrollTo·pushState·hash 조작이 «없다» · 버거 메뉴의 `첫항목.focus()` 는 스크롤을 안 움직인다(드로어가 position:fixed) · Chrome 에서는 2400 → 2400 으로 정확히 복원된다 — 그래서 엔진 문제가 아니라 WebKit 쪽 상호작용으로 좁혀진다 끄는 대가가 «없다» — 이 사이트의 페이지 내 앵커는 건너뛰기 링크 `#main` 하나뿐이고, 건너뛰기 링크는 원래 미끄러지지 않고 «즉시» 뛰는 쪽이 옳다(부드럽게 굴리면 키보드·보조기기 사용자가 이동 중에 맥락을 잃는다). ⚠️ system.css 는 엔진이 복사해 오는 파일이라 «거기서 고치지 않는다» — wf qa 가 해시로 잡는다. 그래서 뒤에 실리는 이 파일에서 덮는다. */ html { scroll-behavior: auto; } /* ── 히어로의 이름 ── 명함 QR 로 들어온 사람이 «방금 만난 그 사람»을 확인하는 자리다. 제목보다 먼저 읽혀야 해서 엔진 사다리 밖의 --t9 를 쓴다(tokens.css). */ .hero-nm { margin-top: var(--s3); font-family: var(--ff-head); font-size: var(--t9); font-weight: 700; letter-spacing: .06em; line-height: 1.1; color: var(--ink); } .hero-nm span { display: inline-block; margin-left: .5em; font-size: var(--t4); font-weight: 500; letter-spacing: 0; color: var(--ink-3); } .hero-nm + h1 { margin-top: var(--s3); } /* ⚠️ 한글에서 ch 는 «글자 수»가 아니다. 공용은 .hero h1 에 max-width:18ch 를 준다. ch 는 「0」의 폭이라 이 조판에서 17px 인데 한글 글자는 30px 다 — 18자를 의도한 값이 실제로는 «10자»가 되고, 1080px 짜리 wrap 안에서 제목이 309px 만 쓴다(2026-08-20 실측). 두 줄로 끊을 제목이 넉 줄로 쪼개졌다. em 은 글자 크기에 걸리므로 한글에서도 뜻이 유지된다 — 17em ≈ 한글 17자. 공용을 안 고치는 이유는 규칙 3 이다. 이 값이 다른 고객사에도 맞는지는 그 사이트들에 재 보고 정할 일이지(규칙 18) 여기서 정할 일이 아니다. */ .hero h1 { max-width: 17em; } /* ── 본문 문단 ── 이 사이트는 «논증»이 상품이다(「가점은 절반만 맞다」). 카드로 못 쪼개는 여러 문단짜리 설명이 페이지마다 있어서 읽기 폭을 따로 잡는다. */ .prose { max-width: 62ch; } .prose p { margin-top: var(--s3); font-size: var(--t4); line-height: 1.75; } .prose p:first-child { margin-top: 0; } /* ── 체크 목록 ── 역할·범위처럼 «항목이 곧 내용»인 자리. 카드 안에 들어가므로 여백을 얕게 둔다. */ .ck { margin-top: var(--s2); display: grid; gap: 8px; } .ck li { position: relative; padding-left: 20px; font-size: var(--t3); color: var(--ink-2); line-height: 1.5; } .ck li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; background: var(--brand); border-radius: var(--r1); } /* ══ 인증 비용 진단 ══════════════════════════════════════════════ 계산은 assets/estimate.js 가 한다. 여기는 생김새뿐이다. ⚠️ 옛 local.css 는 --r4 를 썼는데 그런 토큰은 없다(엔진 사다리는 r1·r2·r3· r-pill 넷이다). 정의 없는 var() 는 «조용히» 각지게 떨어져서 아무도 못 잡는다. formal 세트는 어차피 각진 세트라 --r-pill 이 2px 이고, 그게 의도한 모양이다. */ .dx-q { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; } .dx-q legend { font-size: var(--t5); font-weight: 600; color: var(--ink); margin-bottom: var(--s2); padding: 0; display: flex; align-items: center; gap: 10px; } .dx-n { font-family: var(--mono); font-size: var(--t1); font-weight: 600; background: var(--tint); color: var(--brand-d); border-radius: var(--r1); padding: 4px 9px; } .dx-opts { display: flex; flex-wrap: wrap; gap: var(--s1); } /* ⚠️ 선택지는 estimate-ui.js 가 채운다 — HTML 에서는 «높이 0» 이다. 그래서 스크립트가 붙는 순간 아래 내용이 통째로 밀려난다. 375px 에서 세 묶음이 109+109+167 = 385px 를 밀었고 Lighthouse CLS 0.139 로 잡혔다(상한 0.1). 자리를 미리 잡아 둔다 — 값은 폭별 실측이다(360/375/560/768/1024px). ⚠️ 버튼 개수나 글자가 바뀌면 이 값도 바뀐다. 줄이 늘면 CLS 가 다시 뜬다 — 그때 다시 재는 것이 맞다. min-height 라 «모자라면» 드러난다(넘치면 조용하다). */ .dx-opts { min-height: 167px; } /* 3줄 */ @media (min-width: 375px) { .dx-opts[data-field="headcount"], .dx-opts[data-field="industry"] { min-height: 109px; } } @media (min-width: 560px) { .dx-opts[data-field="purpose"] { min-height: 109px; } } @media (min-width: 768px) { .dx-opts[data-field="headcount"], .dx-opts[data-field="industry"] { min-height: 52px; } } @media (min-width: 1024px) { .dx-opts[data-field="purpose"] { min-height: 52px; } } .dx-opt { background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r-pill); padding: 12px 20px; font: inherit; font-size: var(--t3); color: var(--ink-2); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); } .dx-opt:hover { border-color: var(--brand); color: var(--brand-d); } /* 고른 칸은 «버튼 바탕»을 쓴다. --brand 를 그대로 깔면 흰 글자가 AA 에 못 미치는 브랜드 색이 있다 — 엔진이 --btn-bg 를 따로 두는 이유가 그것이다(_color.css). */ .dx-opt.on { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); font-weight: 600; } .dx-result { background: var(--band); border: 1px solid var(--rule); border-radius: var(--r3); padding: var(--s4); margin-top: var(--s3); } .dx-stds { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s3) 0 var(--s4); } .dx-stds li { background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r2); padding: 10px 16px; font-size: var(--t4); font-weight: 600; color: var(--ink); } .dx-stds li span { font-weight: 400; color: var(--ink-3); margin-left: 6px; font-size: var(--t3); } .dx-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: 0; } .dx-figs > div { background: var(--card); border-radius: var(--r2); padding: var(--s3); } .dx-figs dt { font-size: var(--t2); color: var(--ink-3); margin-bottom: 6px; } .dx-figs .num { font-size: var(--t7); font-weight: 600; color: var(--ink); margin: 0; line-height: 1.1; } /* 단위는 «캡션»이지 강조가 아니다. 옛 파일은 여기에 --amber 를 썼는데, 그 색은 보조색이라 엔진 대비 검사(PAIRS) 밖이다 — 카드 위 11~13px 로 쓰면 아무도 안 재는 자리에서 흐려진다. 재는 색인 --ink-3 으로 돌린다. */ .dx-figs .unit { font-size: var(--t2); color: var(--ink-3); margin: 4px 0 0; } .dx-result .note { margin-top: var(--s3); } .dx-cta { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule-2); } .dx-cta .lead { margin: 0 0 var(--s3); font-size: var(--t4); } .dx-cta-row { display: flex; flex-wrap: wrap; gap: var(--s1); } @media (max-width: 860px) { .dx-figs { grid-template-columns: 1fr; } .dx-result { padding: var(--s3); } .dx-cta-row .btn { width: 100%; justify-content: center; } } /* 진단 결과를 인쇄로 저장하는 사람이 있다 — 화면 장식은 빼고 값만 남긴다. */ @media print { .nav, footer, .hero-cta, .dx-cta, .cta-band { display: none !important; } .dx-result { border-color: var(--ink); background: var(--card); } } /* 알약(.chip)이 카드 안에서 카드 폭 전체로 늘어나 «띠» 가 된다. `.card` 가 세로 flex 라 자식이 교차축으로 stretch 되는 것이 원인이다 — 그래서 `display: inline-block` 으로는 안 고쳐진다(flex 항목은 블록화된다). `width: fit-content` 로 눌러야 한다 — flex 에서는 stretch 를 이기고, 평범한 블록 안(.ref-card 의 글 칸)에서도 그대로 듣는다. `align-self` 로는 부족했다: 그건 부모가 flex 일 때만 듣는 값이라 글 칸 안에서 다시 늘어났다. 히어로의 은 가로 flex 라 원래 멀쩡했고, 레퍼런스 카드가 한 장으로 줄면서 전폭 띠가 되어 눈에 띄었다. 대상 — index 레퍼런스 카드 1 · process 역할 카드 2. shared/system.css 도 같은 규칙이라 다른 사이트에서

을 쓰면 똑같이 늘어난다. 두 번째 고객사에서 겹치면 shared 로 올린다(규칙 4). */ .chip { width: fit-content; } /* 히어로 끝의 안내 한 줄 — 「아래에 무엇이 오는가」. 대표 지적의 「구분이 안 간다」는 절반이 여기였다. 히어로도 절머리도 눈썹+제목+리드 라 좁은 화면에서 같은 덩어리로 이어 읽힌다. 괘선 한 줄이 히어로를 닫는다. ⚠️ 13px(.note)로 내리지 않는다 — 페이지를 읽는 «순서»를 알려 주는 문장이라 본문 바닥 17px 를 지킨다(디자인지침 §1). */ .hero-note { margin-top: var(--s4); padding-top: var(--s3); border-top: var(--bw) solid var(--rule); max-width: 52ch; font-size: var(--t4); line-height: 1.7; color: var(--ink-2); } /* ══ 레퍼런스 «만든 것» 행 (.mk) ═══════════════════════════════ 2026-08-22 대표 지적 — *"레퍼런스 소개하는 내용 상단에 올려놓고 아래는 홈페이지 설명하는 구조인데 구분이 안 가게 구현해 놨고 / 첫 레퍼런스의 랜딩 페이지 이미지 놓고 아래 설명, 링크 / 명함 설명, 회사소개서 솔루션 소개서 앞 페이지로 몇 개 이미지 써서"*. **병은 «격자» 였다.** 옛 판은 차별점 셋을 `.rowlist.wk` 로 위에 적고, 화면 셋을 3단 갤러리(`.shots.cards.c3`)로 «따로» 아래에 놓았다. 좁은 화면에서는 둘 다 세로로 풀려서 「글 셋 → 그림 셋」이 되고, 어느 글이 어느 그림 이야기인지 끊긴다. → **그림과 그 설명을 한 행에 묶는다.** 행 하나 = 만든 물건 하나다. ⚠️ 격자 칸을 46% 로 잡은 것은 «그림이 주인공» 이어서다. 절반을 넘기면 글이 두 줄씩 쪼개지고, 더 줄이면 문서 표지의 글자가 못 읽을 크기가 된다. ⚠️ 새 도형을 만든 것이 아니다 — 괘선으로 가르는 것은 `.rowlist` 가 이미 쓰는 이 세트의 어휘다(디자인지침 §4 「각진 세트는 괘선이 구조를 진다」). */ .mk { display: grid; gap: var(--s3); padding-block: var(--s5); border-top: var(--bw) solid var(--rule); } @media (min-width: 861px) { .mk { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: var(--s5); align-items: start; } } /* 사례의 «대표» 화면 한 장 — 홈페이지. 글 옆에 세우지 않고 전폭으로 놓는다. ⚠️ 폭을 860px 로 묶는다. --max 가 1240px 인데 스크린샷을 거기까지 늘리면 화면 «안의» 글자가 이 페이지의 조판과 경쟁한다(.shot-solo 가 720px 로 묶인 것과 같은 이유 · 원칙 ⑧). 글 칸도 같이 묶어야 줄이 안 길어진다. */ .mk.solo { grid-template-columns: 1fr; } .mk.solo .mk-figs, .mk.solo .mk-txt { max-width: 860px; margin-inline: auto; width: 100%; } /* 그림이 둘일 때(회사소개서 + 제품 소개자료)는 그 행을 «전폭»(.mk.solo)으로 돌리고 860px 안에서 둘을 나란히 놓는다 — 한 장이 420px 이라 표지 제목이 읽힌다. ⚠️ 46% 글 옆 칸에 두 장을 세로로 쌓아 봤다가 걷었다(2026-08-22 화면 실측) — 그림 기둥이 글보다 340px 더 길어져 오른쪽이 통째로 빈 벽이 됐다. */ .mk-figs { display: grid; gap: var(--s3); } @media (min-width: 861px) { .mk-figs.two { grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; } } .mk .shot { margin: 0; display: flex; flex-direction: column; } .mk .frame { border: var(--bw) solid var(--rule); } .mk .frame-cap { line-height: 1.55; } .mk .frame-cap b { color: var(--ink-2); font-weight: 600; } .mk-txt > h3 { font-size: var(--t5); margin: 0; } /* 절머리는 이미 아래에 괘선을 긋는다(system.css `.sec-head`). 첫 행의 위 괘선이 거기 겹쳐 두 줄로 보였다 — `.sec-head + .stat-row` 가 같은 자리에서 이미 쓰는 처방이다(아래쪽 블록). 첫 행만 자기 선을 접는다. */ .sec-head + .mk { border-top: 0; padding-top: 0; } /* 이 행에서는 체크 목록이 «곁들이»가 아니라 본문이다. 카드 안에서 쓰던 15px 을 그대로 두면 이 페이지의 주된 읽을거리가 본문 바닥(17px)보다 작아진다 — 독자가 60~70대다(디자인지침 §1). */ .mk .ck { margin-top: var(--s3); gap: var(--s2); } .mk .ck li { font-size: var(--t4); line-height: 1.7; } /* 레퍼런스 카드 — 화면이 왼쪽, 글이 오른쪽. 좁아지면 위아래로 선다. `.card` 가 세로 flex 라 방향만 가로로 돌리고 정렬을 가운데로 맞춘다. */ .ref-card { flex-direction: row; align-items: center; gap: var(--s3); } .ref-card .frame { flex: 0 0 44%; } .ref-card > div:last-child { flex: 1; } .ref-card .chip { margin-bottom: var(--s2); } @media (max-width: 820px) { .ref-card { flex-direction: column; align-items: stretch; } .ref-card .frame { flex: none; } } .ref-card .card-link { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); } /* 산문 3열 비교표는 360px 에서 칸이 84/124/116px 이 되고 「ISO 14001 환경경영」이 줄당 4.7자로 쪼개진다(2026-08-21 실측). 표 12개를 다 재 보니 «이 하나만» 그렇다 — 나머지는 2열이거나 숫자칸이라 멀쩡하다. 그러니 범인에게만 건다. (유일식품이 `.tbl td{overflow-wrap:anywhere}` 를 표 전체에 걸었다가 표 25개가 값을 치른 일이 어제 있었다. 같은 실수를 반복하지 않는다.) ⚠️ 처음엔 «가로 스크롤»(`.tbl-x` — overflow-x:auto + min-width:520px)로 풀었다. 2026-08-22 대표 스크린샷이 그게 틀렸음을 보여줬다 — 375px 에서 보이는 폭이 339px 인데 표가 520px 이라 **3열 「쓰이는 자리」가 통째로 화면 밖**이었다. 가로 넘침 검사는 0건이다(칸 안에서만 넘치므로). 원칙 ⑫ 「좁으면 접는 것이 정답일 때가 있다」 · 디자인지침 §0-2 「캡처·인쇄해도 성립한다」 — 스크롤은 스크린샷에 안 찍히고, 이 사이트는 미팅에서 열어 보이는 세일즈킷이다. → 스크롤을 걷고 «접는다». 640px 아래에서 한 행이 한 덩이가 되고, 사라진 열 이름은 칸마다 data-l 로 되돌아온다. ⚠️ 접으면 표 의미구조(행↔열 연결)가 없어진다 — 그래서 열 이름을 ::before 로 «본문에» 되살린다. 낭독기는 「무엇을 다루는가: …」로 읽는다. caption 은 그대로 두어 표의 이름은 남는다. ⚠️ 열 이름은 13px(--t2)이다. 지침 §1 이 「13px 을 세 층으로 쌓지 말라」고 하는데 이 화면에서 13px 은 이 «한 가지 역할»(열 이름)뿐이다 — 원래 thead 가 쓰던 크기·색 그대로라 층이 늘지 않는다. */ .tbl-fold .tbl { min-width: 0; } @media (max-width: 640px) { .tbl-fold .tbl, .tbl-fold .tbl tbody, .tbl-fold .tbl tr, .tbl-fold .tbl td { display: block; } .tbl-fold .tbl thead { display: none; } .tbl-fold .tbl tr { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); } .tbl-fold .tbl tr:last-child { border-bottom: 0; padding-bottom: 0; } .tbl-fold .tbl td { border: 0; padding: 0; } /* 첫 칸(규격)이 덩이의 제목 자리다 — 본문 크기로 올려 준다(독자 60~70대) */ .tbl-fold .tbl td:first-child { font-size: var(--t4); margin-bottom: var(--s2); } .tbl-fold .tbl td[data-l] + td[data-l] { margin-top: var(--s2); } .tbl-fold .tbl td[data-l]::before { content: attr(data-l); display: block; font-size: var(--t2); line-height: 1.5; color: var(--ink-3); letter-spacing: .01em; } .dark .tbl-fold .tbl tr { border-color: var(--rule-dark); } .dark .tbl-fold .tbl td[data-l]::before { color: var(--on-dark-2); } } /* 내가 낸 것 — 레퍼런스 카드에 링크를 둘 넣으면서 flex-wrap 을 걸었는데 좁은 폭에서 둘이 한 줄에 안 들어가 36자가 4줄로 감겼다(줄당 9자). 세로로 쌓는다. */ @media (max-width: 560px) { .ref-card .card-link { flex-direction: column; gap: 0; } } /* 화면낭독기 전용. `.tbl caption` 이 이미 같은 처방을 쓰고 있는데 이름이 없어 재사용할 수 없었다 — 새 창 고지(KWCAG 6.4.3)에 필요해서 이름을 준다. ⚠️ `display:none`·`visibility:hidden` 으로 숨기지 않는다 — 그러면 낭독기도 안 읽는다. 1px 로 잘라 흐름 밖으로 보낸다. */ .a11y { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* 업력별 선정률 막대 — 사진이 한 장도 없는 사이트에서 «보여줄 것» 을 숫자에서 만든다. 표를 대체하지 않는다: 그림은 aria-hidden 이고 데이터의 정본은 바로 아래 표다(화면낭독기는 표를 읽는다). 그래서 새 접근성 부채가 안 생긴다. ⚠️ SVG 로 먼저 만들었다가 되돌렸다 — `preserveAspectRatio="none"` 은 막대만 늘리는 게 아니라 «글자까지» 늘린다(실측: 라벨이 화면 밖으로 나갔다). 가로만 늘어나야 하는 그림에 SVG 는 틀린 도구다. 폭이 백분율인 상자면 HTML 이 그냥 맞다. ⚠️ 색은 토큰만 쓴다 — 새 hex 를 만들면 엔진 대비 검사(PAIRS) 밖에 글자가 앉는다. 막대 자체는 «글자가 아니라» 도형이라 대비 대상이 아니고, 값·이름은 재는 색(--ink-2 · --ink-3 · --brand-d)으로 둔다. */ .vbars { margin: 0 0 var(--s3); display: grid; gap: 6px; } .vb-row { display: grid; grid-template-columns: 6.5em 1fr 3.4em; align-items: center; gap: var(--s1); } .vb-l { font-size: var(--t2); color: var(--ink-2); } .vb-t { display: block; height: 14px; background: var(--band); } .vb-b { display: block; height: 100%; background: var(--rule-2); } .vb-v { font-family: var(--mono); font-size: var(--t2); color: var(--ink-3); text-align: right; } .vb-row.hi .vb-b { background: var(--brand); } .vb-row.hi .vb-l { color: var(--ink); font-weight: 600; } .vb-row.hi .vb-v { color: var(--brand-d); font-weight: 700; } @media (max-width: 560px) { .vb-row { grid-template-columns: 5.4em 1fr 3.2em; } } /* 막대 길이는 «데이터» 이지 디자인 값이 아니다 — 그런데 인라인 style 로 두면 토큰규율 검사가 막는다(실측: FAIL 7). 검사가 옳다: 인라인 style 을 한 번 허용하면 다음 사람이 색과 글자크기도 거기에 적는다. 출처는 표 아래 각주 1(중소벤처기업진흥공단, 공공데이터포털)이다. 최댓값 35%% 를 100%% 로 잡아 환산했다 — 최고값 31.3%% 가 꽉 차 보이지 않게. */ .vb-b.p313 { width: 89.4%; } /* 20년 이상 31.3% */ .vb-b.p275 { width: 78.6%; } /* 15~20년 27.5% */ .vb-b.p240 { width: 68.6%; } /* 10~15년 24.0% */ .vb-b.p230 { width: 65.7%; } /* 5~10년 23.0% */ .vb-b.p145 { width: 41.4%; } /* 3~5년 14.5% */ .vb-b.p105 { width: 30.0%; } /* 1~3년 10.5% */ .vb-b.p37 { width: 10.6%; } /* 1년 미만 3.7% */ /* 통합 인증 — 「7.9 vs 6.0」을 규격별 누적 막대로 보인다. 아래 .figs 의 숫자 넷을 «대체» 하지 않는다: 그림은 aria-hidden 이고, 값·단위·각주는 그대로다. ⚠️ 폭은 데이터라 클래스로 준다(인라인 style 은 토큰규율이 막는다). 7.9 를 100% 로 잡았다 — 두 줄이 같은 자로 재져야 줄어든 만큼이 보인다. */ .mdc { display: grid; gap: var(--s2); margin: 0 0 var(--s3); } .mdc-row { display: grid; grid-template-columns: 8.5em 1fr 4.6em; align-items: center; gap: var(--s2); } .mdc-l { font-size: var(--t2); color: var(--ink-2); } /* ⚠️ 막대 높이는 «칸 안의 글자» 가 정한다. 34px 였을 때 12px(--t1) 두 줄이 12 × 1.3 × 2 = 31.2px 를 먹어 위아래 여백이 사실상 0 이었다(대표 지적 2026-08-22 — 「위아래로 너무 붙어서 답답함」). 46px 로 올려 위아래 7px 씩 숨통을 주고, 두 줄 사이도 gap 으로 벌린다. 글자 크기는 안 건드린다 — 독자가 60~70대라 여기서 더 줄이는 방향은 막혀 있다(디자인지침 §1). */ .mdc-bar { display: flex; height: 46px; background: var(--band); } .mdc-s { display: flex; flex-direction: column; justify-content: center; gap: 3px; overflow: hidden; line-height: 1.3; padding-inline: 8px; font-size: var(--t1); color: var(--on-dark); border-right: 1px solid var(--paper); white-space: nowrap; } .mdc-s i { font-style: normal; font-size: var(--t1); opacity: .78; } .mdc-s.s9 { width: 31.6%; background: var(--brand-d); } .mdc-s.s14 { width: 34.2%; background: var(--brand); } .mdc-s.s45 { width: 34.2%; background: var(--rule-2); color: var(--ink); } .mdc-s.on.w60 { width: 75.9%; background: var(--brand); } .mdc-cut { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--t1); color: var(--ink-3); background: repeating-linear-gradient(135deg, var(--band) 0 5px, var(--paper-2) 5px 10px); } .mdc-v { font-family: var(--mono); font-size: var(--t3); color: var(--ink-2); text-align: right; } .mdc-v u { text-decoration: none; font-size: var(--t1); color: var(--ink-3); margin-left: 2px; } .mdc-v.hi { color: var(--brand-d); font-weight: 700; } @media (max-width: 640px) { .mdc-row { grid-template-columns: 1fr; gap: 4px; } .mdc-v { text-align: left; } /* 좁은 화면은 «한 줄» 이라(아래 i 를 숨긴다) 46px 이 오히려 헐렁하다 */ .mdc-bar { height: 38px; } .mdc-s i { display: none; } } /* 개정 간격 — 30 → 12 → 5개월. 「짧아졌다」는 말은 길이로 보여야 와닿는다. 30개월을 100% 로 잡아 같은 자로 잰다. 아래 .figs 의 숫자는 그대로 둔다. */ .gaps { display: grid; gap: 6px; margin: 0 0 var(--s3); } .gap-row { display: grid; grid-template-columns: 5.2em 1fr; align-items: center; gap: var(--s2); } .gap-d { font-family: var(--mono); font-size: var(--t1); color: var(--ink-3); } .gap-b { display: flex; align-items: center; height: 26px; background: var(--rule-2); padding-inline: 8px; } .gap-b i { font-style: normal; font-size: var(--t1); color: var(--ink); white-space: nowrap; } .gap-b.g30 { width: 100%; } .gap-b.g12 { width: 40%; } .gap-b.g5 { width: 16.7%; } .gap-b.hi { background: var(--brand); } .gap-b.hi i { color: var(--btn-ink); } .gap-n { font-size: var(--t1); color: var(--ink-3); } /* 상품 카드에 견본을 앉힌다. 마케팅을 «파는» 페이지에서 상품 설명만 글로 있으면 상품과 견본이 어긋난다 — 대표 지적(2026-08-21)이 그 자리다. 01 홈페이지·04 홍보영상은 «실제 산출물», 02·03 은 시안이라 표를 박는다. */ .pcard { padding-top: 0; overflow: hidden; } .pcard .frame { position: relative; margin: 0 calc(var(--s3) * -1) var(--s3); border-bottom: var(--bw) solid var(--rule); border-radius: 0; } .frame-tag { position: absolute; top: 0; left: 0; background: var(--dark); color: var(--on-dark); font-size: var(--t1); font-weight: 600; letter-spacing: .04em; padding: 5px 10px; } /* ── 시그니처: 심사기준표(slate) ────────────────────────────── 이 사이트가 파는 것은 「그 공고의 심사기준표를 우리 회사 기준으로 읽어 드립니다」다. 그러면 화면에서 가장 특징적인 것은 «그 표» 여야 한다. 가장 중요한 문장 —「ISO 받으면 가점 준다는 절반만 맞는 말」— 을 문단이 아니라 표로 보인다. 넷은 「있다」, ISO 한 줄만 «빗금» 이다. ⚠️ 빗금은 어휘다. mdc-cut(통합인증에서 깎이는 1.9MD)에서 이미 「자리는 있는데 안 채워진 것」으로 썼다 — 같은 뜻으로만 쓴다. ⚠️ 배점 «숫자» 를 그리지 않는다. 공고마다 다르고 우리에게 그 값이 없다. 있다/없다까지만 말한다 — 이 사이트가 글로 말하는 것과 정확히 같은 범위다. */ .slate { border: var(--bw) solid var(--ink); background: var(--card); margin: var(--s3) 0; } .slate-h { display: flex; justify-content: space-between; gap: var(--s2); padding: 10px var(--s3); background: var(--ink); color: var(--paper); font-size: var(--t2); font-weight: 600; letter-spacing: .01em; } .slate-l { list-style: none; margin: 0; padding: 0; } .slate-l li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 13px var(--s3); border-top: var(--bw) solid var(--rule); font-size: var(--t3); color: var(--ink); } .slate-l li:first-child { border-top: 0; } .slate-l b { font-size: var(--t2); font-weight: 600; color: var(--ink-3); white-space: nowrap; padding: 4px 10px; } .slate-l b.on { color: var(--brand-d); background: var(--tint); } /* ISO 한 줄 — 자리는 있는데 기본으로는 안 채워진다 */ .slate-l li.off { background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, var(--card) 6px 12px); } .slate-l li.off > span { color: var(--ink-2); font-weight: 600; } .slate-l li.off b { background: var(--card); border: var(--bw) solid var(--rule-2); white-space: normal; } .slate-n { padding: 12px var(--s3); border-top: var(--bw) solid var(--rule); font-size: var(--t2); color: var(--ink-3); line-height: 1.55; } /* ⚠️ 모바일 본문 바닥은 16px 다. system.css 의 640px 목록에 .slate-n 을 더해 봤지만 «안 들었다» — local.css 가 뒤에 실려 위의 var(--t2) 가 이긴다. 같은 파일 안에서 눌러야 하고, px 를 쓰면 토큰규율이 막는다(실측 FAIL 1). --t 스케일에 16px 이 없으므로 바로 위 단인 --t4(17px)를 쓴다. */ @media (max-width: 640px) { .slate-n { font-size: var(--t4); } } @media (max-width: 560px) { .slate-l li { flex-direction: column; align-items: flex-start; gap: 6px; } .slate-h span:last-child { display: none; } } /* 보조율 — 시그니처(배점표) 어휘를 자부담에 적용한다. 표에서는 「85% / 95%」가 나란히 있을 뿐이라 «우대로 덧대어지는 10%p» 가 안 보인다. 채워진 부분이 기본, 이어 붙는 부분이 함평 우대, 남은 부분이 자부담이다 — 100% 를 한 줄로 두어 「내가 낼 돈이 이만큼 줄어든다」가 길이로 읽힌다. */ .rates { display: grid; gap: 8px; margin: 0 0 var(--s3); } .rate-k { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px; font-size: var(--t2); color: var(--ink-3); margin: 0 0 4px; } .rate-k span { width: 13px; height: 13px; display: inline-block; } .k-b { background: var(--brand-d); } .k-p { background: var(--brand-l); } .k-o { background: var(--band); border: var(--bw) solid var(--rule); } .rate-row { display: grid; grid-template-columns: 6.2em 1fr 6.6em; align-items: center; gap: var(--s2); } .rate-l { font-size: var(--t2); color: var(--ink-2); } .rate-t { display: flex; height: 18px; background: var(--band); } .rate-b { background: var(--brand-d); } .rate-p { background: var(--brand-l); } .rate-b.b85 { width: 85%; } .rate-b.b75 { width: 75%; } .rate-b.b65 { width: 65%; } .rate-b.b45 { width: 45%; } .rate-p.p10 { width: 10%; } .rate-p.p15 { width: 15%; } .rate-v { text-align: right; line-height: 1.15; } .rate-v b { display: block; font-family: var(--mono); font-size: var(--t3); color: var(--brand-d); font-weight: 700; } .rate-v u { display: block; text-decoration: none; font-family: var(--mono); font-size: var(--t1); color: var(--ink-3); } @media (max-width: 560px) { .rate-row { grid-template-columns: 5em 1fr 5.6em; } } /* 섹션 눈썹 앞 표식 — «브랜드 심볼» 을 놓는다. ⚠️⚠️ 짧은 괘선(「— 라벨」)이었다. 대표 지적(2026-08-22): *"말머리가 클로드 사용한 흔적"*. 맞다 — 뜻 없는 짧은 괘선은 생성 도구가 즐겨 내놓는 관용구라 «출처가 보인다». 특히 홈페이지를 파는 사이트에서는 그 자체가 반증이 된다(원칙 ⑯-b). 브랜드 심볼은 «그 회사의 것» 이라 출처가 도구가 아니다. ⚠️ 번호를 다시 넣지 않는다. 섹션은 «순서» 가 아니라 목록이다 — 이럴 때·문 둘· 일하는 방식·고민·만든 것·안내. 번호를 붙이면 1번부터 해야 하는 절차로 읽힌다. 2026-08-22 에 두 번 넣었다 두 번 걷었다. 세 번째로 이 생각이 들면 이 줄부터 볼 것. */ .sec-head > .eyebrow::before { content: ""; flex: none; width: 20px; height: 15px; background: var(--brand); -webkit-mask: url(../img/eyebrow-mark.svg) no-repeat center / contain; mask: url(../img/eyebrow-mark.svg) no-repeat center / contain; } .dark .sec-head > .eyebrow::before { background: var(--brand-l); } /* ── 데스크톱 조판 (2026-08-22) ──────────────────────────────── 토큰과 «왜» 는 sites/isocons/tokens.css 의 「데스크톱 조판 단」에 있다. 여기는 그 값을 어디에 거는지만 적는다. 문턱은 821px 다 — 공용이 .cards.c2/c3/c4 를 한 줄로 접는 바로 그 경계다 (system.css 의 max-width:820px). 여기서 카드가 여러 열이 되므로, 조판이 «넓은 화면 모드» 로 넘어가는 지점도 같은 자리여야 한다. ⚠️ 처음에 1024 로 잡았다가 되돌렸다 — 821~1023 구간에서 h1 과 h2 가 둘 다 25px 로 같아져 위계가 없는 띠가 생겼다(2026-08-22 실측). 값 자체는 clamp 라 821~1920 사이를 연속으로 흐른다 — 문턱은 하나면 된다. */ @media (min-width: 821px) { /* 히어로 h1 을 진짜 제목 크기로. 32px 이던 자리다. */ .hero h1 { font-size: var(--t10); } /* 섹션 h2 — h1 과 같은 --t8 을 쓰던 자리. 이제 h1 의 약 2/3 다. */ .sec-head h2 { font-size: var(--t8-sec); } /* 섹션이 숨을 쉬게. 40px → 최대 80px. */ .hero, .cta-sec { padding-block: var(--s7); } /* ── 이름과 제목의 주인공을 화면 크기로 바꾼다 ── tokens.css 는 「명함 QR 로 들어온 사람이 방금 만난 그 사람을 확인하는 화면이라 이름이 제목보다 커야 한다」고 --t9(42px)를 두었다. 그건 «폰» 이야기다 — PC 로 QR 을 찍는 사람은 없다. 데스크톱에서는 읽는 이가 이미 앉아서 제안을 «검토» 하는 중이므로 제목이 주인공이고 이름은 그 위의 서명 줄이 된다. ⚠️ 모바일에서 --t9 를 걷지 말 것. 저 근거는 좁은 화면에서 여전히 유효하다. */ .hero-nm { font-size: var(--t6); } .hero-nm span { font-size: var(--t3); } } /* ── 중간 폭에서 4열이 너무 좁다 ── 공용은 820px 아래에서만 .cards.c4 를 한 줄로 접는다. 그래서 821~1100px 구간은 «4열 그대로» 인데, 1024px 에서 카드 한 장이 232px 다 — 데스크톱 조판을 켜 놓고 카드는 폰보다 좁은 상태였다(2026-08-22 실측). 2×2 로 접으면 같은 폭에서 480px 가 된다. ⚠️ 1100 을 올리지 말 것 — 1101px 부터는 4열이 286px 라 이미 충분하다. */ @media (min-width: 821px) and (max-width: 1100px) { .cards.c4 { grid-template-columns: 1fr 1fr; } } /* ══ 랜딩 구성 (2026-08-22) ══════════════════════════════════ 근거는 세 층이다 — `사이트-디자인/references/디자인-원칙.md`(업종 무관) · `~/workspace/isocons/디자인지침.md`(이 업종) · 아래 값. 이 판에서 고친 것 — 지면을 2종(흰·틴트 완전 교대)에서 3종(흰·틴트·밴드)으로 늘리고, 섹션에 번호 칩을 붙이고, §05 에 실물 화면 한 장을 놓고, §06 숫자에 출처를 붙이고, §07 에 분기를 새로 세웠다. */ /* ── 섹션 머리에 링크가 둘 이상 올 때 ── 공용 .card-link 는 카드 «안»의 CTA 한 줄을 전제해 margin-top 만 준다. §05 처럼 섹션 머리에 링크를 둘 놓으면 두 화살표가 «붙어» 「…열어 보기 →만든 것 보기 →」로 한 덩어리로 읽힌다(2026-08-22 화면 실측). works.html 의 .ref-card 가 같은 자리에서 같은 처방을 이미 갖고 있다 — 그 규칙을 섹션 머리로 넓힌다. ⚠️ 세로 gap 을 --s1 로 따로 주는 것은 좁은 화면에서 두 줄로 접힐 때다. */ .sec-head > .card-link { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); } /* ── 홀로 놓는 실물 화면 (.shot-solo) ── §05 「만든 것은 지금 열립니다」의 증거물. 랜딩의 «유일한» 이미지다. works.html 은 같은 일을 `.mk.solo` 가 한다(폭 860px) — 거기는 옆에 설명 목록과 링크가 따라붙는 자리라 규칙이 갈린다. ⚠️ 폭을 720px 로 묶는다. --max 가 1240px 인데 스크린샷을 거기까지 늘리면 1500px 원본을 확대하게 되고, 무엇보다 «화면 안의 글자»가 커져 이 페이지의 조판과 경쟁한다. 폭 상한은 컨테이너가 아니라 읽는 눈이 정한다(원칙 ⑧ — 유일식품이 영상을 920px 로 묶은 것과 같은 이유). ⚠️ 캡션은 사진 «아래» 다. 칼럼 폭 사진에 글자를 얹지 않는다(원칙 ⑬). */ .shot-solo { margin: var(--s5) auto 0; max-width: 720px; } .shot-solo .frame { border: var(--bw) solid var(--rule-2); } .shot-solo .frame-cap { line-height: 1.55; } .shot-solo .frame-cap b { color: var(--ink-2); font-weight: 600; } /* ── 분기 (.routes) ── 랜딩 끝에서 모든 방문자를 버튼 하나로 몰지 않는다(원칙 ④ — 분기 → 한 문장 → 연락). 이 사이트는 본문이 10장이라 분기가 없으면 «목차 없는 제안서»가 된다. ⚠️ 카드로 만들지 않는다. 랜딩에 이미 카드가 14장이라 같은 무게가 겹친다 — 제목 + 한 줄 + 화살표의 «가벼운 층» 이어야 한다(지침 §8). ⚠️ 한 줄 설명은 전부 그 페이지의 h1 을 «그대로» 옮긴 것이다. 랜딩에서 새로 지어내면 페이지에 가서 다른 말이 나온다. ⚠️ 두 고객사에서 겹치면 shared/ 로 올린다(규칙 4). 유일식품에도 같은 것이 있으므로 «이미 두 번째다» — 다음에 세 번째가 나오기 전에 승격을 본다. */ .routes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); } .route { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3); background: var(--card); border: var(--bw) solid var(--rule); border-radius: var(--r2); /* 손가락 바닥 44px — 위 패딩 16×2 + 내용이면 이미 넘지만 못 박아 둔다(원칙 ⑪) */ min-height: 44px; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .route:hover { border-color: var(--brand); background: var(--paper); } .route-t { min-width: 0; } .route b { display: block; font-size: var(--t5); font-weight: 600; color: var(--ink); } .route span { display: block; margin-top: 4px; font-size: var(--t3); color: var(--ink-2); line-height: 1.5; } /* 화살표는 장식이라 aria-hidden 이다. font-style 을 지우는 것은 이기 때문. */ .route i { font-style: normal; font-family: var(--mono); font-size: var(--t5); color: var(--brand); flex: none; } /* 좁은 화면 — 두 단이 서면 설명 한 줄이 세 줄로 쪼개진다. 한 단으로 내린다. */ @media (max-width: 820px) { .routes { grid-template-columns: 1fr; } } /* ⚠️ 모바일 본문 바닥 16px. 분기의 한 줄 설명은 «캡션이 아니라 본문»이라 15px 로 두면 안 된다 — wf qa 모바일 검사가 실제로 잡았다(2026-08-22: 「index.html span 본문 15px (31자)」). .slate-n 과 같은 함정이다: system.css 의 640px 목록에 더해도 local.css 가 뒤에 실려 위의 --t3 가 이기므로 «같은 파일 안»에서 눌러야 하고, 생 px 는 토큰규율이 막으므로 --t4(17px)를 쓴다. */ @media (max-width: 640px) { .route span { font-size: var(--t4); } } /* ══ 서브페이지 히어로 띠 (2026-08-22) ══════════════════════ 대표 지적 — *"지금 사이트 디자인 너무 구려서 전면 개편해"*. 실측이 그대로였다: 9장이 전부 히어로에 «글자만» 이고, 연출 0, 지면은 흰·틴 교대뿐이었다. ⚠️ 랜딩과 «급» 을 나눈다(원칙 ㉓ — 같은 장치를 여러 번 쓰면 급을 나눈다). 랜딩은 글자 «옆» 에 세운 3:4 세로판, 서브는 글자 «아래» 에 깐 12:5 띠다. 같은 무게로 아홉 군데에 쓰면 도구가 벽지가 된다. ⚠️ 비율은 12:5 다 — 원칙 ⑳ 실측: 2:1 은 1104px 폭에서 552px 이라 사진만 덩그러니 놓여 「자리 채우기」로 읽혔다. 12:5 면 같은 폭에서 460px 짜리 «띠» 가 된다. ⚠️⚠️ **풀블리드로 뺐다**(2026-08-22 대표 지적 「사이즈가 너무 작다」). 처음엔 .wrap 안에 두어 1192px 였는데, 그러면 소스 1536w 를 1.29× 로 낭비하면서 화면에서는 작다. 풀블리드면 1440px 화면에 1.07× 로 «딱» 맞고 띠가 화면을 가로지른다. 원칙 ⑳의 「2:1 552px 는 자리 채우기로 읽힌다」는 «컨테이너 안에 사진만 덩그러니» 놓였을 때 얘기다 — 화면을 가로지르는 것은 사진이 아니라 «밴드» 다(원칙 ②). ⚠️ 글자를 얹지 않는다(원칙 ⑬). 캡션도 없다 — 이 띠는 «분위기» 지 증거가 아니다. 증거는 works.html 의 실제 화면 스크린샷이 진다. */ .hero-band { margin-top: var(--s5); /* .wrap 밖이라 좌우 여백이 없다 — 화면 폭을 그대로 쓴다. */ width: 100%; } .hero-band img, .hero-band video { display: block; width: 100%; aspect-ratio: 12 / 5; object-fit: cover; border: var(--bw) solid var(--rule-2); /* ⚠️ height:auto 가 «필수» 다. 공용 img 규칙은 max-width:100% 만 주고 height 를 안 푼다 — 그러면 HTML 의 height="583" 속성이 남아 폭만 1192px 로 줄고 높이는 583px 그대로라 실제 비율이 2:1 이 된다(2026-08-22 실측). 원칙 ⑳ 이 「2:1 은 사진만 덩그러니 놓여 자리 채우기로 읽힌다」고 적어 둔 바로 그 값이라, aspect-ratio 를 써 놓고도 경고한 상태로 떨어진다. */ height: auto; } /* ⚠️ 좁은 화면에서는 «글자와 같은 줄» 에 맞춘다(2026-08-22 대표 지적 — 모바일에서 이미지와 글자가 따로 놀았다). 데스크톱은 풀블리드가 시원하지만, 모바일에서 사진만 화면 끝까지 가면 글자는 여백 안에 있고 사진만 튀어나가 «끼워 넣은 이미지» 로 읽힌다. 좌우를 글자와 맞추면 «본문의 일부» 가 된다. ⚠️ 12:5 는 375px 에서 156px 이라 «실 한 줄» 이 되므로 16:9 로 키운다. ⚠️ 글자와의 간격도 좁힌다 — s5(40) 은 모바일에서 두 덩어리로 갈라 놓는다. */ @media (max-width: 820px) { .hero-band { margin-top: var(--s4); padding-inline: var(--gut); } .hero-band img, .hero-band video { aspect-ratio: 16 / 9; } } /* ── 히어로 띠가 «영상» 일 때 — iso.html 만 (2026-08-23) ── §02 두 장과 같은 규율이다: 저절로 도는 것은 «한 번», 그다음부터는 사람이 부른다. controls 는 켜지 않는다(삽화이지 플레이어가 아니다 — §02 와 같은 이유). ⚠️ §02 는 단추를 그림 «위» 에 얹지 «않기로» 했는데 여기서는 얹는다. 뒤집은 것이 아니라 그때 접었던 «이유» 가 여기서는 성립하지 않기 때문이다 — ① 그때는 「그림 아래·카드 안」 이라는 자리가 있었다. 이 띠는 풀블리드라 그 자리가 없다. ② 그때는 네 귀퉁이에 «영상 자체의 글귀» 가 깔려 빈 구석이 없었다. 이 영상엔 글귀가 없다. ③ 캡션(.hb-poster)이 왼쪽 아래를 쓰므로 오른쪽 아래가 비어 있다. 자리를 옮기려면 이 세 조건부터 다시 잰다. */ .hb-replay { position: absolute; right: var(--gut); bottom: var(--s3); font-family: var(--ff-body); font-size: var(--t3); font-weight: 500; color: var(--ink-2); background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r2); min-height: 44px; padding: 8px 16px; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease); } .hb-replay:hover { border-color: var(--brand); color: var(--brand-d); } .hb-replay:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* 재생 중에는 누를 것이 없다 — 자리는 남기고 글자만 지운다(§02 와 같다). */ .hero-band.is-playing .hb-replay { opacity: 0; pointer-events: none; } /* ══ 랜딩 히어로 — 배경 이미지 + 가로 스크림 (2026-08-22) ══ ⚠️⚠️ 선택자가 «.hero-lp» 다. 처음에 `.hero` 로 걸었다가 서브 9장이 통째로 깨졌다 (2026-08-22 실측) — 흰 글자가 흰 종이 위에 놓여 h1 이 안 보였고, display:flex 가 히어로 띠를 글자 «옆» 으로 밀어냈다. `.hero` 는 아홉 장이 공유하는 자리다. 랜딩 전용은 반드시 .hero-lp 로 좁힌다. 대표 지적 — *"유일식품의 랜딩 페이지는 이미지 위에 글자가 있는데 왜 여긴 따로 있어서 이미지도 잘리고 어색하지?"*. 맞다. 나는 「사진 위 글자는 대비가 위험하다」를 이유로 옆에 세웠는데, 그건 «해결» 이 아니라 «회피» 였다 — 그 결과 이미지가 세로 칸에 잘리고 글자와 따로 놀았다. 팩토리 가이드에 이미 푼 값이 있었다(원칙 ⑬). 해법은 대표가 말한 그대로다 — *"글자가 놓이는 이미지의 투명도를 늘려서 가독성을 높이고 글자가 없는 곳의 이미지는 투명도 조절해서 보이게"*. 곧 **가로 그라디언트 스크림**이다. ⚠️ 농도는 실측분이다. 원칙 ⑬ — **.72 에서 사진 위 글자가 4.14:1 로 떨어졌고 .82 로 올려 해결했다.** 여기는 글자가 크고 왼쪽에 몰려 있어 왼쪽 끝을 .92 까지 올리고 오른쪽으로 풀어 사진이 드러나게 한다. ⚠️ 이미지는 «왼쪽이 비도록» 뽑았다(빈 도로와 하늘) — 스크림이 덮는 쪽에 볼 것을 두지 않는다. 프롬프트 근거는 `_src/img/히어로-이미지-프롬프트.md`. ⚠️ 모바일은 스크림으로 «안 풀린다» — 글자가 폭 전체를 써서 사진을 통째로 덮어 「어두운 블록」이 된다(원칙 ⑬ 실측). 아래에서 가로 창으로 분리한다. */ .hero-lp { position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-bg::after { content: ''; position: absolute; inset: 0; /* ⚠️ 이 네 수는 «실측분» 이다(2026-08-22, 캔버스로 이미지 픽셀에 스크림을 합성해 최저 대비를 계산). 처음 값(58% 지점 .55)에서 리드가 **3.04:1** 로 떨어졌다 — 21px 본문은 4.5:1 이 기준이다. 원칙 ⑬ 대로 «글자색이 아니라 어둠막» 을 올렸다. ⚠️ 100% 를 .30 위로 올리지 말 것 — 오른쪽 사진이 안 보이면 배경을 깐 뜻이 없다. */ background: linear-gradient(96deg, rgba(var(--shade), .94) 0%, rgba(var(--shade), .92) 40%, rgba(var(--shade), .82) 70%, rgba(var(--shade), .30) 100%); } .hero-lp > .wrap { position: relative; z-index: 1; } /* 어두운 바탕 위 글자 — 파생 실측분을 그대로 쓴다(다크 본문 15.55:1 · 다크 캡션 8.76:1) */ .hero-lp .hero-nm, .hero-lp h1 { color: var(--on-dark); } .hero-lp .lead { color: var(--on-dark-2); } .hero-lp .eyebrow { color: var(--brand-l); } .hero-lp .eyebrow b { color: var(--on-dark); background: rgba(255,255,255,.14); } .hero-lp .chip { color: var(--on-dark); background: rgba(255,255,255,.10); } .hero-lp .hero-badges { border-top-color: rgba(255,255,255,.18); } .hero-lp .hero-nm span { color: var(--on-dark-2); } .hero-lp .btn-ghost { color: var(--on-dark); border-color: rgba(255,255,255,.34); background: transparent; } .hero-lp .btn-ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.08); } @media (min-width: 821px) { /* 원칙 ㉑ — 랜딩 히어로는 min(88vh,760px) 급이다. 밴드(540)·절(104)과 높이로도 갈린다. */ .hero-lp { min-height: min(88vh, 760px); display: flex; align-items: center; } .hero-lp > .wrap { width: 100%; } /* 글자는 왼쪽 절반에만 — 스크림이 짙은 구간 안에 머문다 */ /* 리드를 짙은 구간 안에 가둔다 — 56ch 는 오른쪽 59% 까지 나가 사진 밝은 데를 탔다. */ .hero-lp .lead { max-width: 46ch; } .hero-lp .hero-badges { max-width: 52ch; } .hero-lp h1 { max-width: 15em; } } /* ⚠️ 모바일 — 사진을 글자 «뒤» 가 아니라 «위» 로 분리한다(원칙 ⑬ 실측). 가로로 누운 창에 넣고 글자는 그 아래 종이 위에 앉힌다 — 대비 문제가 통째로 사라진다. */ @media (max-width: 820px) { /* ⚠️⚠️ 사진 «아래 끝» 을 mask 로 지운다. 안 하면 사진이 끝나는 자리에 가로줄이 생겨 사진과 글자가 «따로 논다»(원칙 ⑬ 실측 · 2026-08-22 대표 지적으로 재확인 — 그 실측을 읽어 놓고 안 썼다). 아래로 갈수록 흐려져 종이에 녹아든다. ⚠️ 사진은 «글자가 시작되기 전에» 완전히 사라져야 한다 — 그래야 글자 뒤가 단색이라 대비가 사진에 안 흔들린다. 그래서 92% 에서 0 이 된다. */ /* ⚠️ 값은 «유일식품 실측» 그대로다(원칙 ⑬). 내 임의 값으로 두 번 어긋났다 — 창을 250 으로 줄이고 글자를 film «안쪽» 으로 당겼더니 사진이 「위에 붙은 띠」가 되고 글자와 따로 놀았다(2026-08-22 대표 폰 화면으로 확인). 창 높이 하나(--film)로 아래 셋(사진 상자·마스크·글자 시작 여백)이 같이 움직인다. */ .hero-lp { --film: min(340px, 42vh); } .hero-bg { inset: 0 0 auto 0; height: calc(var(--film) + 60px); /* ⚠️ 여기 값은 «색» 이 아니라 알파 마스크다 — 불투명/투명만 뜻한다. 그래서 브랜드 토큰을 쓸 자리가 아니다. 다만 검사는 hex 를 색으로 세므로 #000 대신 키워드로 적는다. */ -webkit-mask-image: linear-gradient(180deg, black 58%, transparent 88%); mask-image: linear-gradient(180deg, black 58%, transparent 88%); } /* 위쪽만 살짝 어둡게 — 반투명 내비 뒤로 사진이 그대로 비치면 로고가 읽히지 않는다 */ .hero-bg::after { background: linear-gradient(180deg, rgba(var(--shade), .30), rgba(var(--shade), .04) 46%, rgba(var(--shade), 0)); } /* ⚠️ 글자를 film «아래» 로 충분히 «띄운다». film 안쪽으로 당기면 사진 페이드 구간에 글자가 걸려 대비가 흔들리고, 무엇보다 둘이 겹쳐 보여 오히려 따로 논다. */ .hero-lp > .wrap { padding-block: calc(var(--s4) + var(--film)) var(--s4); } /* 글자가 종이 위로 내려왔으므로 색을 되돌린다 */ .hero-lp .hero-nm, .hero-lp h1 { color: var(--ink); } .hero-lp .lead { color: var(--ink-2); } .hero-lp .eyebrow { color: var(--brand-d); } .hero-lp .eyebrow b { color: var(--brand-d); background: var(--tint); } .hero-lp .chip { color: var(--brand-d); background: var(--tint); } .hero-lp .hero-nm span { color: var(--ink-3); } .hero-lp .hero-badges { border-top-color: var(--rule); } .hero-lp .btn-ghost { color: var(--ink); border-color: var(--rule-2); background: var(--card); } } /* ══ 히어로 카메라 무빙 (켄번즈) — 2026-08-22 대표 지시 ══ *"히어로 이미지 카메라 각도 무빙 넣어줘"*. 유일식품 랜딩이 3컷 켄번즈를 쓰는 자리다. ⚠️ **여유를 «미리» 만든다.** scale 1.0 에서 움직이면 가장자리에 빈 틈이 난다 — 원칙 ⑭ 가 「프레임보다 크게 잡아 여유를 만든다」로 적어 둔 함정이다. 그래서 시작이 이미 1.08 이고, 끝(1.16)까지 가도 화면 밖으로 나가는 것은 여유분뿐이다. ⚠️ **체감되어야 한다.** 같은 원칙의 반대쪽 실측 — 계수 0.04 로 총 이동 62px 는 「체감 0」이었다. 여기는 1440px 폭에서 8% 확대 = 약 115px 상당이 28초에 걸쳐 흐른다. 느리지만 «있다» 는 것이 보인다. ⚠️ **`alternate` 다.** 무한 반복을 한 방향으로 두면 28초마다 «툭» 되감긴다. ⚠️ **`prefers-reduced-motion` 에서 멈춘다.** 아래 블록을 지우지 말 것. ⚠️ 서브페이지 띠(.hero-band)에는 «안» 건다 — 랜딩과 급을 나눈다(원칙 ㉓). 같은 무빙을 아홉 군데에 쓰면 도구가 벽지가 된다. */ .hero-bg img { transform: scale(1.08); animation: hero-kenburns 28s ease-in-out infinite alternate; will-change: transform; } @keyframes hero-kenburns { from { transform: scale(1.08) translate3d(-1.2%, 0.6%, 0); } to { transform: scale(1.16) translate3d(1.2%, -0.8%, 0); } } @media (prefers-reduced-motion: reduce) { .hero-bg img { animation: none; transform: scale(1.02); } } /* 좁은 화면 — 가로 창이 얕아(≈300px) 세로 이동이 크면 하늘만 오간다. 진폭을 줄인다. */ @media (max-width: 820px) { @keyframes hero-kenburns { from { transform: scale(1.06) translate3d(-0.8%, 0, 0); } to { transform: scale(1.12) translate3d(0.8%, 0, 0); } } } /* §02 「문이 둘입니다」에 문 사진 두 짝 (2026-08-22 대표 지시) — 개념이 «문 둘» 이라 글로만 두면 대구로만 읽힌다. 실제 문 두 개를 나란히 놓으면 뜻이 즉시 온다. ⚠️ 테두리를 두르지 않는다 — .doors 는 상자가 아니라 «괘선으로 가른 2단» 이다(⑱). */ .doors .frame { margin-bottom: var(--s3); } /* ⚠️ 모바일 본문 바닥 16px — `.ck` 는 원래 짧은 체크 항목용이라 15px 였는데, works.html 의 「다르게 한 것」이 39~54자짜리 «본문 문장» 이 되면서 걸렸다 (2026-08-22 wf qa 모바일 검사). .slate-n · .route span 과 같은 함정이다 — system.css 의 640px 목록에 더해도 local.css 가 뒤에 실려 위의 --t3 가 이기므로 «같은 파일 안» 에서 눌러야 하고, 생 px 는 토큰규율이 막으므로 --t4(17px)를 쓴다. */ @media (max-width: 640px) { .ck li { font-size: var(--t4); } } /* ══ 상단 메뉴 — 크기·현재 위치·손 반응 (2026-08-22 대표 지시) ══ *"메뉴 글자 크기 키우고 현재 페이지 표시 더 뚜렷하게 / 마우스 오버 하면 반응하는 효과도"* ⚠️ 공용은 **호버와 현재 페이지가 «같은» 스타일**이었다(둘 다 brand-d + brand 밑줄). 그래서 지금 어디에 있는지 표시가 호버에 묻혔다. 셋을 갈라 놓는다 — 기본 ink · 밑줄 없음 호버 brand-d · 연한 밑줄(rule-2) · 1px 뜬다 현재 brand-d · **700** · 진한 밑줄 3px(brand) ⚠️ 뜨는 양은 1px 이다. formal 세트는 「떠 있는 것이 광고로 읽히는」 쪽이라 «반응한다» 가 느껴지는 최소치만 준다. */ .nav-links { font-size: var(--t4); gap: var(--s4); font-weight: 600; } .nav-links a { padding: 8px 2px; border-bottom-width: 3px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 160ms var(--ease); } .nav-links a:hover { color: var(--brand-d); border-bottom-color: var(--rule-2); transform: translateY(-1px); } .nav-links a.cur, .nav-links a[aria-current="page"] { color: var(--brand-d); font-weight: 700; border-bottom-color: var(--brand); transform: none; /* 현재 위치는 «떠 있지» 않는다 — 고정된 자리다 */ } /* 현재 페이지에 마우스를 올려도 밑줄이 «연해지지» 않게 — 위 호버 규칙보다 뒤에 둔다 */ .nav-links a.cur:hover, .nav-links a[aria-current="page"]:hover { border-bottom-color: var(--brand); } /* 좁은 화면 드로어에서는 항목이 세로로 쌓인다 — 밑줄 대신 왼쪽 굵은 선으로 현재를 표시한다 (가로 밑줄은 세로 목록에서 «칸 나누기» 로 읽힌다). */ @media (max-width: 860px) { .nav-links a { border-bottom: 0; border-left: 3px solid transparent; padding: 10px 0 10px 12px; } .nav-links a:hover { transform: none; border-left-color: var(--rule-2); } .nav-links a.cur, .nav-links a[aria-current="page"] { border-left-color: var(--brand); } } /* ══ 회사명 워드마크 (2026-08-22) ══ 대표 지시로 회사명을 얹었다. 정체성은 h1 그대로다 — *"인증도 받으시고, 회사도 알리시고 / 한 군데서 해 드립니다. 이게 정체성 아닌가?"* 「한자리」는 카피지침 §0 과 marketing 본문이 이미 쓰는 말이다 — 「이미 갖고 계신데 «한자리에» 정리돼 있지 않을 뿐입니다」. ⚠️ 개인명을 «지우지» 않는다. brief §3 이 「지방행정 30년 · 전 함평군 부군수」를 이 사업의 «유일한 비대체 자산» 이라 못박았고, 이 사이트는 명함 QR 로 들어와 «방금 만난 그 사람» 을 확인하는 화면이다. 회사명이 위, 개인명이 아래다. */ /* ⚠️ 회사 로고에는 개인명을 넣지 않는다(대표 지시 2026-08-22). 로고는 로고다. 개인명은 히어로(.hero-nm)와 푸터가 진다 — brief §3 의 비대체 자산은 거기서 산다. */ .wordmark { display: flex; align-items: center; } /* 회사명은 「The Portal」이다(2026-08-23 개명 — 옛 이름 「한곳」). 로고타입은 나눔명조 Bold(OFL·사이트 제목 글꼴과 같은 것)를 «아웃라인» 으로 뽑은 것이고, 심볼은 붓글씨 원(일원상)을 좌표로 «그린» 것이다 — 둘 다 폰트 의존이 없다. ⚠️ 손으로 좌표를 고치지 않는다. 원천은 `_src/img/build.py` 이고 거기서 다시 뽑는다. */ /* CI 가로 조합형(심볼 + 로고타입). 규정·다른 조합은 `_src/img/CI.md` 참조. ⚠️ 20px 아래로 줄이지 않는다 — 붓 원의 개구부(=「문」)가 막혀 그냥 고리가 된다. */ .wm-logo { height: 30px; width: auto; flex: none; display: block; } .wordmark .wm-tx { display: block; } .wm-tx .ti { display: block; } @media (max-width: 860px) { .wm-logo { height: 24px; } } /* ══ 등장 연출 (2026-08-22) ══════════════════════════════════ ⚠️⚠️ **한 번 통째로 사라졌던 절이다.** 히어로 2단 블록을 걷어내는 스크립트가 «두 주석 사이» 를 잘랐는데 그 사이에 이 절이 끼어 있었다(2026-08-22 실측 — HTML 에 rv 클래스 32개와 site.js 의 Observer 는 그대로인데 CSS 만 없어서 연출이 라이브에서 «아예 안 돌고» 있었다). → 블록 단위로 자르는 스크립트는 «무엇이 그 안에 있는지» 먼저 세고 자른다. 왜 넣었는지와 수위는 `assets/site.js` 끝의 주석에 있다. 여기는 «값» 만 적는다. ⚠️⚠️ **폴백이 이 절의 핵심이다.** `.rv` 는 기본이 `opacity:0` 이라, site.js 가 404·차단·오류로 안 돌면 **본문이 백지가 된다.** 3.5초 뒤 무조건 드러내는 CSS 애니메이션이 그것을 막는다. JS 가 정상이면 그 전에 `.in` 이 붙어 이미 보이므로 폴백은 표시에 영향을 주지 않는다. **이 두 줄을 지우지 말 것.** ⚠️ `prefers-reduced-motion` 에서는 아예 처음부터 보인다. JS 쪽도 같은 판단을 하지만 JS 가 안 돌 때도 존중돼야 하므로 CSS 에서 한 번 더 끊는다. ⚠️ 거리는 12px 이다. 더 주면 «기관 문서» 가 출렁이고(formal 세트), 60~70대 독자에게 큰 움직임은 읽기를 방해한다. */ .rv { opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--ease) var(--d, 0ms), transform 520ms var(--ease) var(--d, 0ms); animation: rv-fallback 1ms linear 3.5s forwards; } .rv.in { opacity: 1; transform: none; } @keyframes rv-fallback { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; animation: none; } } /* 「무엇을 만드는가」의 마지막 카드 — 명함은 앞의 넷을 «받는» 자리라 전체 폭이다. 대표 지적(2026-08-22): *"샘플 하나는 명함이고 이게 홈페이지랑 연결 고리"*. 카피지침 §0 의 「고객의 문은 두 방향 — 들어온다(홈페이지) / 찾아간다(명함)」가 여기서 만난다. 뒷면 QR 이 그 둘을 잇는다. */ @media (min-width: 821px) { .cards.c2 > .card-wide { grid-column: 1 / -1; } .cards.c2 > .card-wide .frame { max-width: 52%; } } /* ── 보조율 막대의 «자부담» 구간 (2026-08-22) ── ⚠️ 범례는 셋(기본 보조율 · 함평 우대 · 자부담)인데 막대는 둘뿐이었다. 자부담이 트랙 배경으로만 있어 「100% 를 기준으로 자부담을 표시한다」는 뜻이 안 보였다 (대표 지적). 세 번째 구간을 명시적으로 그린다 — 100 − 기본 − 우대. */ .rate-s { background: var(--card); border: var(--bw) solid var(--rule-2); border-left: 0; } .rate-s.s5 { width: 5%; } .rate-s.s10 { width: 10%; } .rate-s.s20 { width: 20%; } .rate-s.s40 { width: 40%; } /* ── 블록 구분을 세운다 (2026-08-22) ── 대표 지적: *"유일은 구분할 수 있게 정리된 느낌인데 여기는 바닥에 깔아 놓은 듯하네"*. ⚠️ 유일식품처럼 «둥글게 + 떠 있게» 갈 수는 없다 — 그쪽은 natural 세트이고 여기는 formal 이다. `formal.css` 가 「기관 문서에서 떠 있는 카드는 광고로 읽힌다」고 적어 뒀다. 각진 세트에서 구분은 «괘선» 이 진다(원칙 ⑱). → 테두리를 한 단 진하게(--rule → --rule-2) 하고 카드 사이를 넓힌다. 그림자는 안 키운다. */ .card { border-color: var(--rule-2); } .cards { gap: var(--s4); } .frame { border: var(--bw) solid var(--rule-2); } .tint .card, .band .card { border-color: var(--rule-2); } /* ── CTA 띠는 «어둡게 하지 않는다» (2026-08-22) ── 대표 지적 두 번. ① 마지막 띠 — *"검은 배경이 어색하게 배치됨"*: 바로 아래가 어두운 푸터라 두 어두운 면이 붙었다. ② 랜딩 §06 비용 띠 — *"검은 바탕에 「비용이 부담이십니까」 너무 튀어"*: 밝은 절 한가운데 검은 덩어리 하나만 서 있으니 구두점이 아니라 얼룩으로 읽힌다. → 처음엔 «마지막 절» 에만 걸었는데, 그러면 한 페이지 안에서 같은 부품이 두 얼굴이 된다. **모든 `.cta-band` 에 건다.** 실제로 바뀌는 것은 랜딩 §06 하나다(다른 페이지는 띠가 마지막 절에 하나뿐). ⚠️ CTA 를 약하게 만들지 않는다. 각진 세트답게 «왼쪽 굵은 괘선» 으로 무게를 준다(원칙 ⑱). ⚠️ 디자인지침 §7 이 「어두운 띠 둘을 구두점으로 센다」고 적어 둔 것은 이제 사실이 아니다 — 어두운 면은 푸터 하나다. 쉼은 `tint`·`band` 지면이 진다. */ .cta-band { background: var(--band); border-left: 4px solid var(--brand); } .cta-band h2 { color: var(--ink); } .cta-band .lead { color: var(--ink-2); } .cta-band::before { display: none; } /* ── 막대가 «차오른다» (2026-08-22) ── 대표 지적: *"유일식품 보면 동적 요소 있는데 반영하고"*. 그쪽 랜딩에는 등장 연출 외에 막대가 차오르는 닦임(wipe)이 있다. 여기 막대(선정률·보조율·보조 비율)는 정적이었다. ⚠️ 폴백이 «필요 없는» 방식으로 짠다 — 기본 상태가 «완성» 이고 `.in` 이 붙었을 때만 애니메이션을 재생한다. JS 가 안 돌면 막대는 그냥 처음부터 다 차 있다. (`.rv` 처럼 기본을 0 으로 두면 JS 가 죽었을 때 막대가 빈 채로 남는다.) ⚠️ 왼쪽에서 자란다 — 수치를 읽는 방향과 같다. */ @media (prefers-reduced-motion: no-preference) { .rv.in .vb-b, .rv.in .rate-b, .rv.in .rate-p, .rv.in .rate-s, .rv.in .mdc-s { animation: bar-grow 880ms var(--ease) both; transform-origin: left center; } .rv.in .rate-p { animation-delay: 120ms; } .rv.in .rate-s { animation-delay: 220ms; } @keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* ════════════════════════════════════════════════════════════════ 절 형태 어휘 (2026-08-22) — 대표 지적: *"모든 페이지가 비슷하고 텍스트도 많아서 피로도가 있어. 변화를 줄 수 있는 곳은 변화를 주고."* 실측이 지적을 그대로 확인했다 — 11장 29절 중 **26절이 「절머리 + 카드」** 였다. 바닥(paper/tint/band)은 번갈았는데 그 «위에 놓인 것»이 한 종류라 페이지가 다 같아 보였다. 원칙 ①(지면 리듬)이 말하는 리듬은 바닥색이 아니라 **덩어리의 모양**이다. ⚠️ 새 형태를 많이 만들지 않는다 — 셋이다. 넷째부터는 형태가 아니라 장식이 된다. 셋을 고른 기준은 「데스크톱에서 지면이 «다르게» 보이는가」 하나다. · split = 좌우로 갈린다 (지금은 전부 위-아래) · rowlist = 가로 행이 쌓인다 (지금은 전부 격자) · stat-row = 숫자가 크다 (지금은 전부 글줄) ⚠️ 각진 세트를 유지한다 — 떠 있는 상자를 늘리지 않고 **괘선**으로 가른다. formal.css 가 「기관 문서에서 떠 있는 카드는 광고로 읽힌다」고 적어 둔 쪽이다. ════════════════════════════════════════════════════════════════ */ /* ── ① split — 절머리를 왼쪽 기둥으로 보낸다 ── 내용이 오른쪽에 붙어 지면이 좌우로 갈린다. 항목이 적고 설명이 긴 절에 쓴다. ⚠️ 절머리의 아래 괘선을 «세로 괘선»으로 바꾼다 — 가로줄이 남으면 갈린 게 안 읽힌다. */ .split { display: grid; gap: var(--s5); } .split > .sec-head { margin-bottom: 0; } .split-b > *:first-child { margin-top: 0; } .split-b > * + * { margin-top: var(--s4); } @media (min-width: 861px) { .split { grid-template-columns: minmax(240px, 22rem) 1fr; gap: var(--s6); } .split > .sec-head { padding-bottom: 0; border-bottom: 0; padding-right: var(--s5); border-right: var(--bw) solid var(--rule); position: sticky; top: calc(66px + var(--s4)); align-self: start; } .dark .split > .sec-head { border-color: var(--rule-dark); } /* 기둥이 좁으니 제목을 한 급 내린다 — 안 내리면 두 글자마다 줄이 바뀐다(원칙 ⑳-b). */ .split > .sec-head h2 { font-size: var(--t7); } } /* ── ② rowlist — 카드 대신 가로 행 ── 제목과 한 문장이 «같은 줄»에 앉는다. 항목이 4개 넘고 설명이 짧은 절에 쓴다. 카드로 하면 4×3 격자가 되어 화면 하나를 통째로 먹는데, 행으로 하면 절반이다. */ .rowlist { border-top: var(--bw) solid var(--rule); } .rowlist > li { display: grid; gap: var(--s1) var(--s4); padding: var(--s3) 0; border-bottom: var(--bw) solid var(--rule); list-style: none; } .rowlist > li > h3 { font-size: var(--t4); margin: 0; } .rowlist > li > p { margin: 0; color: var(--ink-2); } .rowlist > li > .card-link { margin-top: var(--s1); } .dark .rowlist, .dark .rowlist > li { border-color: var(--rule-dark); } @media (min-width: 721px) { .rowlist > li { grid-template-columns: minmax(9rem, 15rem) 1fr; align-items: baseline; } .rowlist > li > .card-link { grid-column: 2; margin-top: var(--s2); } } /* 행 번호 — 순서가 있는 목록에만 붙인다(`.rowlist.num`). 없으면 안 붙는다. */ .rowlist.num { counter-reset: rl; } .rowlist.num > li { counter-increment: rl; } .rowlist.num > li > h3::before { content: counter(rl, decimal-leading-zero); font-family: var(--mono); font-size: var(--t2); font-weight: 500; color: var(--brand-d); letter-spacing: .08em; margin-right: .6em; vertical-align: .12em; } .dark .rowlist.num > li > h3::before { color: var(--brand-l); } /* ── ③ stat-row — 숫자가 큰 줄 ── 글줄만 이어지는 페이지에 «읽지 않고 보이는» 지점을 하나 만든다. ⚠️ 출처 없는 숫자를 여기 올리지 않는다(디자인지침 §3·§6) — 각 칸에 출처를 단다. */ .stat-row { display: grid; gap: var(--s3); border-top: 2px solid var(--rule-2); border-bottom: 2px solid var(--rule-2); padding: var(--s4) 0; } /* 폰에서는 2×2 — 세로 한 줄로 쌓으면 큰 숫자 넷이 화면 하나를 통째로 먹는다. */ @media (max-width: 640px) { .stat-row { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); } } @media (min-width: 641px) { .stat-row { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; } .stat-row > div + div { border-left: var(--bw) solid var(--rule); padding-left: var(--s4); } } .stat-row .n { display: block; font-family: var(--ff-head); font-weight: var(--fw-head); font-size: var(--t9); line-height: 1.05; letter-spacing: var(--ls-head); color: var(--brand-d); font-variant-numeric: tabular-nums; } .stat-row .n small { font-size: .5em; font-weight: 600; margin-left: .1em; } .stat-row .k { display: block; margin-top: var(--s2); font-weight: 700; } .stat-row .sub { display: block; margin-top: 4px; font-size: var(--t2); color: var(--ink-3); } .dark .stat-row { border-color: var(--rule-dark); } .dark .stat-row .n { color: var(--brand-l); } .dark .stat-row .k { color: var(--on-dark); } .dark .stat-row .sub { color: var(--on-dark-2); } /* ── 동작 ② 숫자가 «밀려 올라온다» (세지 않는다) ── 0 에서 세어 올리는 카운터를 넣었다가 실측에서 걷어냈다 — 진행 중 화면에 「85%」가 떠 있었고 실제 값은 95% 였다. **규정으로 정해진 숫자에 카운터를 걸면 중간값이 그대로 틀린 값이 된다**(site.js 에 사유 기록). 움직임은 남기고 값은 하나만 둔다. ⚠️ 기본 상태가 «보이는» 상태다 — JS 가 안 돌아 `.in` 이 안 붙으면 그냥 보인다. */ @media (prefers-reduced-motion: no-preference) { .stat-row.in .n { animation: n-rise 620ms var(--ease) both; } .stat-row.in > div:nth-child(2) .n { animation-delay: 80ms; } .stat-row.in > div:nth-child(3) .n { animation-delay: 160ms; } .stat-row.in > div:nth-child(4) .n { animation-delay: 240ms; } @keyframes n-rise { from { opacity: 0; transform: translateY(.32em); } to { opacity: 1; transform: none; } } } /* 절머리 아래 괘선과 수치 띠 위 괘선이 겹쳐 두 줄로 보였다 — 하나로 만든다. */ .sec-head + .stat-row { border-top: 0; padding-top: 0; } /* ── 동작 ③ 시차(parallax) — 히어로 배경만 ── ⚠️ 본문에는 안 건다. 60~70대 독자에게 본문이 어긋나 움직이면 읽기가 어려워진다 (디자인지침 §1). 배경 사진 하나가 천천히 뒤로 남는 정도다. */ @media (prefers-reduced-motion: no-preference) and (min-width: 861px) { .hero-bg { will-change: transform; } } /* ── 행 목록 안에 «목록»이 들어올 때 ── ⚠️ 짝이던 `.rowlist.wk`(works 의 홈페이지·명함·소개자료 세 갈래)는 2026-08-22 에 걷었다 — 그림과 설명이 갈라져 있던 것이 병이라 `.mk` 행으로 합쳤다(위쪽 블록). 이 한 줄은 다른 페이지의 행 목록도 쓰므로 남긴다. */ .rowlist > li > div > .ck { margin: 0; } /* ── 히어로 규격 띠 (2026-08-22) — 알약 나열을 걷어냈다 ── 대표 지적: *"도형 버튼 등이 너무 성의 없이 나열됨"*. 맞다. 넷은 서로 «성격이 다른» 정보(상품·산출물·지역·비용)인데 폭이 제각각인 똑같은 알약에 담겨 flex-wrap 으로 흘렀다. 폰에서 2-2 로 어긋나게 접히면서 「던져 놓은」 모양이 됐다. ⚠️ 알약(r-pill)은 애초에 이 세트와 안 맞는다 — 각진 세트는 괘선이 구조를 진다(원칙 ⑱). 라벨을 붙여 «무엇의 값인지» 밝히고 괘선으로 칸을 가른다. 같은 정보인데 나열이 아니라 규격표가 된다. ⚠️ 폰 2×2 · 데스크톱 4단. 폭이 달라도 칸이 균등해 어긋나지 않는다. */ .hero-spec { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) 0; } .hero-spec > div { padding-inline: var(--s3); } .hero-spec > div:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--rule); } .hero-spec > div:nth-child(even) { padding-right: 0; } .hero-spec dt { font-size: var(--t1); font-weight: 700; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 3px; } .hero-spec dd { margin: 0; font-size: var(--t3); font-weight: 600; line-height: 1.35; } /* 칸이 «셋» 일 때 — 2열 격자에 셋이면 마지막이 외톨이가 된다. 폭을 다 쓰게 한다. (2026-08-22 대표 지시로 「비용」 칸을 걷어 넷 → 셋이 됐다.) */ .hero-spec > div:nth-child(3):last-child { grid-column: 1 / -1; border-right: 0; padding-left: 0; } .hero-lp .hero-spec { border-top-color: rgba(255,255,255,.18); } .hero-lp .hero-spec > div { border-color: rgba(255,255,255,.18); } .hero-lp .hero-spec dt { color: var(--on-dark-2); } .hero-lp .hero-spec dd { color: var(--on-dark); } @media (min-width: 821px) { .hero-spec { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 0; max-width: 68ch; } .hero-spec > div:nth-child(3):last-child { grid-column: auto; border-right: 0; padding-left: var(--s3); } .hero-spec > div { border-right: 1px solid var(--rule); } .hero-spec > div:last-child { border-right: 0; padding-right: 0; } .hero-spec > div:first-child { padding-left: 0; } .hero-spec > div:nth-child(even) { padding-right: var(--s3); } /* ⚠️ 왼쪽 여백을 «첫 칸 빼고 전부» 되돌린다. 위 2열(폰)용 규칙 둘이 `padding-left: 0` 을 달고 3열에도 따라오기 때문이다 — `nth-child(odd)` 는 3번째가 홀수라서, `nth-child(3):last-child` 는 미디어쿼리 밖이라서. 뒤엣것은 특정도가 더 높아 여기서 안 이긴다 — 그래서 그 줄(맨 위)에도 같은 값을 직접 박았다. 안 되돌리면 마지막 칸 글자가 세로 괘선에 붙는다 (대표 지적 2026-08-22 「지역」). 괘선이 구조를 지는 세트라 선 양쪽 여백이 어긋나면 구조가 깨진다(디자인지침 §4). */ .hero-spec > div:not(:first-child) { padding-left: var(--s3); } .hero-lp .hero-spec > div { border-color: rgba(255,255,255,.18); } } @media (max-width: 820px) { .hero-lp .hero-spec { border-top-color: var(--rule); } .hero-lp .hero-spec > div { border-color: var(--rule); } .hero-lp .hero-spec dt { color: var(--ink-3); } .hero-lp .hero-spec dd { color: var(--ink); } } /* ── 인포그래픽: 문이 둘 (2026-08-22) ── 대표 지시 — *"여기 인포그래픽 넣어 / 공공기관 민간기업 본사 고객사"*. 이 사업의 뼈대(문이 둘)를 글로만 네 줄 설명하던 자리다. 그림 하나면 한눈에 든다. ⚠️ SVG 로 굽지 않고 HTML+CSS 로 짠다 — 독자가 60~70대다. 진짜 글자여야 브라우저 확대가 먹고, 읽기 도구도 읽는다. 구운 글자는 확대하면 흐려진다. ⚠️ 각진 세트 — 상자를 띄우지 않고 괘선과 옅은 바닥으로만 가른다(원칙 ⑱). ⚠️ 폰에서 2열을 유지한다. 세로로 다 풀면 여섯 칸이 쌓여 그림이 아니라 목록이 된다. */ .flowmap { display: grid; gap: var(--s2); margin-bottom: var(--s5); } .fm-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); } .fm-node, .fm-core { border: var(--bw) solid var(--rule-2); border-radius: var(--r2); padding: var(--s3) var(--s2); text-align: center; background: var(--card); } .fm-node b, .fm-core b { display: block; font-size: var(--t3); line-height: 1.3; } .fm-node span, .fm-core span { display: block; margin-top: 4px; font-size: var(--t1); color: var(--ink-2); line-height: 1.4; } .fm-core { background: var(--brand); border-color: var(--brand); padding-block: var(--s3); } .fm-core b { color: var(--on-dark); font-size: var(--t5); font-family: var(--ff-head); } .fm-core span { color: var(--on-dark-2); } /* 화살표 — 두 줄기가 가운데로 모였다가 아래로 갈린다 */ .fm-arrow { display: grid; grid-template-columns: 1fr 1fr; margin: 0; height: 22px; } .fm-arrow span { position: relative; } .fm-arrow span::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 6px; border-left: var(--bw) solid var(--rule-2); } .fm-arrow span::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; margin-left: -4px; border-right: var(--bw) solid var(--rule-2); border-bottom: var(--bw) solid var(--rule-2); transform: rotate(45deg); transform-origin: center; } /* 아래쪽 줄기는 화살표를 «위» 로 돌린다 — 고객사가 우리를 찾아오는 방향도 있다 */ .fm-arrow-b span::before { top: 6px; bottom: 0; } .fm-arrow-b span::after { bottom: auto; top: 0; transform: rotate(-135deg); } .fm-cap { margin: 0; font-size: var(--t1); font-weight: 700; letter-spacing: .03em; color: var(--brand-d); text-align: center; } .fm-cap-b { margin-top: var(--s1); } @media (min-width: 721px) { .flowmap { max-width: 46rem; margin-inline: auto; } .fm-node b, .fm-core b { font-size: var(--t4); } .fm-core b { font-size: var(--t6); } .fm-node span, .fm-core span { font-size: var(--t2); } .fm-arrow { height: 30px; } } /* ── 문 카드 — 제목을 사진 «위» 로 (2026-08-22) ── 대표 지적: *"그냥 이미지만 사용하지 말고 «공공으로 들어가는 문»을 이미지 위에 얹어서 이미지에 대한 설명이 자연스럽게 되게"*. 맞다 — 사진과 제목이 따로 서 있으니 사진이 장식으로 읽혔다. 얹으면 제목이 그 사진의 «이름»이 된다. ⚠️⚠️ 부드러운 그라디언트를 쓰지 않는다. 원칙 ⑬ 은 「작은 사진에는 얹지 말라」고 하고, 여기 프레임은 폰에서 340px 밖에 안 된다. 그런데도 얹는 이유는 **각진 단색 띠**로 대비를 «구조적으로» 보장하기 때문이다 — 사진이 무엇이든 글자 뒤는 항상 --dark 다. 두 사진의 아래쪽이 하나는 어두운 아스팔트, 하나는 «밝은» 포장 마당이라 그라디언트로는 한쪽이 반드시 깨진다. 실측이 필요 없게 만드는 쪽을 골랐다. ⚠️ 띠는 사진 «아래 끝» 에 붙인다 — 가운데 얹으면 사진의 주제(문)를 가린다. */ .doors .frame { position: relative; } .doors .frame-t { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; background: var(--dark); color: var(--on-dark); font-family: var(--ff-head); font-weight: var(--fw-head); letter-spacing: var(--ls-head); font-size: var(--t5); line-height: 1.25; padding: var(--s2) var(--s3); } .doors .card > .frame { margin-bottom: var(--s3); } /* ── §02 의 문 두 짝을 «움직이는 그림» 으로 바꿨다 (2026-08-23, 대표가 소개영상 제작) ── 6초짜리 무성 선화 애니메이션이다. 정지 이미지와 «같은 자리·같은 임무» 라 프레임은 그대로 두고 안의 그림만 바꾼다. 영상이 16:9 라 `.a16` 을 얹었다(원래 3:2). ⚠️ **반복 재생하지 않는다.** 화면에 들어올 때 한 번 그려지고 마지막 그림에 선다 (site.js). 6초마다 지웠다 다시 그리면 60~70대 독자가 읽는 동안 옆에서 계속 깜빡이는 꼴이라 디자인지침 §5-d 의 「등장 연출까지만」을 넘는다. ⚠️ JS 가 안 실리거나 움직임을 줄여 달라고 한 사람에게는 **재생하지 않는다** — `poster` 가 남고, 그 포스터가 결말(문 열린 쪽까지)을 다 담은 그림이라 뜻이 빠지지 않는다. `.rv` 폴백과 같은 규율이다(원칙 ⑭). ⚠️ 연출에 «뜻» 을 더 싣지 않았다 — 캡처·인쇄해도 카드 본문과 프레임 띠가 같은 말을 한다(디자인지침 §0). */ .doors .frame video { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── 눌러서 다시 보기 (2026-08-23) ── 대표 지적: *"자동재생 1회로 끝나는데 클릭해도 반응이 없네"*. 한 번 그리고 서 있는 그림을 다시 보고 싶은 것은 «당연한» 요구인데 누를 자리가 없었다. ⚠️ 재생 컨트롤 막대(`controls`)를 켜지 않는다 — 진행바·음량·전체화면이 달린 검은 막대가 붙으면 「삽화」가 「영상 플레이어」로 읽힌다. 이 자리 임무는 §02 의 개념을 «보이는» 것이지 영상을 «틀어 주는» 것이 아니다(디자인지침 §0). ⚠️ 단추를 **그림 «위»에 얹지 않는다.** 두 번 시도해 보고 접었다 — ① 띠(`.frame-t`) 안에 넣으면 폰 375px 에서 제목이 두 줄로 꺾여 띠가 그림의 **42%**(실측)를 먹었다. 60~70대 조판 바닥이라 제목을 줄일 수도 없다. ② 네 귀퉁이도 못 쓴다 — 마지막 화면에 «영상 자체의 글귀»가 위쪽 가로로 깔려 있어 어디에 얹어도 그 글자를 가린다(잉크 실측 3.7~11.6%, 빈 구석이 없다). → **그림 아래, 카드 안**이 답이다. 사진 밑 캡션 자리라 무엇에 딸린 단추인지가 저절로 읽히고, 어느 폭에서도 그림을 안 가린다. ⚠️ 그림 «전체»도 여전히 누를 자리다(`is-playable`) — 단추는 «보이게» 하는 몫이고, 실제로 겨눌 때는 300px 짜리 그림 아무 데나 누르면 된다. */ .doors .frame.is-playable { cursor: pointer; } .doors .replay { display: block; margin: calc(var(--s3) * -1 + 2px) 0 var(--s3) auto; font-family: var(--ff-body); font-size: var(--t3); font-weight: 500; color: var(--ink-2); background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r2); min-height: 44px; padding: 8px 16px; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease); } .doors .replay:hover { border-color: var(--brand); color: var(--brand-d); } .doors .replay:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* 재생 중에는 «누를 것이 없다» — 자리는 남겨 두고 글자만 지운다(카드 높이가 안 튄다). */ .doors .card.is-playing .replay { opacity: 0; pointer-events: none; } @media (min-width: 821px) { .doors .frame-t { font-size: var(--t6); } } /* ── 카드가 «반응한다» (2026-08-22) ── 대표 지적: *"마우스 오버나 모바일에서 터치 시 카드 반응하게"*. 지금은 카드 안의 링크 글자만 반응하고 카드 자체는 죽어 있었다 — 누를 수 있는 것처럼 안 보인다. ⚠️ 들어 올리지 않는다(`translateY` · 큰 그림자 금지). 각진 세트에서 떠 있는 상자는 광고로 읽힌다(`formal.css`). 반응은 **괘선과 바닥**으로 준다 — 테두리가 브랜드 색으로 서고, 바닥이 한 단 옅게 깔리고, 화살표가 한 걸음 나간다. ⚠️ `:has(a)` 로 «링크가 든 것»만 반응시킨다. 안 눌리는 카드가 반응하면 거짓말이다. ⚠️ 폰에는 hover 가 없다 — `@media (hover: none)` 에서 `:active` 로 «눌리는 동안» 준다. transition 을 짧게(90ms) 둬야 손가락을 뗐을 때 남지 않는다. */ .card:has(a), .rowlist > li:has(a), .fm-node { transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .card:has(a) .lnk::after, .rowlist > li:has(a) .lnk::after { transition: transform var(--dur) var(--ease); } @media (hover: hover) { .card:has(a):hover { border-color: var(--brand); background: var(--tint); } .rowlist > li:has(a):hover { background: var(--tint); } .card:has(a):hover .lnk, .rowlist > li:has(a):hover .lnk { color: var(--brand-d); } .fm-node:hover { border-color: var(--brand); } /* 행 목록은 상자가 없어 바닥만으로는 약하다 — 왼쪽에 브랜드 괘선을 세운다 */ .rowlist > li:has(a) { box-shadow: inset 3px 0 0 transparent; transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); } .rowlist > li:has(a):hover { box-shadow: inset 3px 0 0 var(--brand); } } /* 손가락 — 누르는 «동안» 만 */ @media (hover: none) { .card:has(a):active { border-color: var(--brand); background: var(--tint); transition-duration: 90ms; } .rowlist > li:has(a):active { background: var(--tint); transition-duration: 90ms; } .fm-node:active { border-color: var(--brand); transition-duration: 90ms; } } /* 카드 전체가 눌리게 — 링크 하나뿐인 카드는 어디를 눌러도 그리 간다. ⚠️ 링크가 둘 이상인 카드에는 안 건다(어디로 갈지 모호해진다). */ .card:has(> .card-link:only-of-type > a:only-child) { position: relative; } .card:has(> .card-link:only-of-type > a:only-child) > .card-link > a::before { content: ""; position: absolute; inset: 0; } .rowlist > li:has(> .card-link > a:only-child) { position: relative; } .rowlist > li:has(> .card-link > a:only-child) > .card-link > a::before { content: ""; position: absolute; inset: 0; } /* ── 히어로 띠에 «포스터 문구» 를 얹는다 (2026-08-22) ── 대표 지적: *"이 이미지가 위에 해당인지 아래 문구에 해당인지 구분이 안 가 / 이미지와 포스터 문구 같이 사용해서 친절한 홈페이지 만들어"*. 병의 정체 — 띠가 히어로 «아래», 다음 절 «위» 에 홀로 떠 있어서 **어느 쪽 것인지 모르는 상태**였다. 사진은 소속이 없으면 자리 채우기로 읽힌다(원칙 ⑳). 문구를 얹으면 그 순간 사진이 **히어로의 것**이 된다 — 소속이 눈에 보인다. ⚠️ 각진 단색 띠로 간다 — 그라디언트 금지(원칙 ⑬-b). 다섯 장의 사진이 밝기가 다 달라 부드러운 스크림으로는 어느 하나가 반드시 깨진다. 글자 뒤는 항상 --dark 다. ⚠️ 문구는 «두 줄» 까지. 제목 한 줄 + 부제 한 줄. 본문을 얹지 않는다. ⚠️ 과장하지 않는다 — 여기 문구는 그 페이지 h1 을 «짧게» 되풀이하는 것이지 새 약속을 하는 자리가 아니다(디자인지침 §3). */ .hero-band { position: relative; } .hb-poster { position: absolute; left: 0; bottom: 0; max-width: min(90%, 46rem); background: var(--dark); padding: var(--s2) var(--s4) var(--s3); border-top: 3px solid var(--brand); } .hb-t { margin: 0; color: var(--on-dark); font-family: var(--ff-head); font-weight: var(--fw-head); letter-spacing: var(--ls-head); font-size: var(--t6); line-height: 1.25; } .hb-s { margin: 6px 0 0; color: var(--on-dark-2); font-size: var(--t2); font-weight: 600; letter-spacing: .02em; } @media (min-width: 861px) { .hb-poster { left: max(calc((100% - var(--max)) / 2), 0px); padding-inline: var(--s4) var(--s5); } .hb-t { font-size: var(--t8-sec); } .hb-s { font-size: var(--t3); } } @media (max-width: 520px) { /* 폰 — 띠가 사진의 절반을 먹으면 사진이 안 보인다. 급을 내리고 폭을 다 쓴다. */ .hb-poster { right: 0; max-width: none; padding: var(--s2) var(--s3); } .hb-t { font-size: var(--t5); } .hb-s { font-size: var(--t1); margin-top: 3px; } /* ── iso.html 영상 히어로만 — 캡션이 「열리는 문」을 가린다 (2026-08-23) ── 대표 제보: *"모바일 인증 메뉴 문 열리는게 모바일 화면에서는 하단 문구에 가려"*. 바로 위 규칙이 이 폭에서 캡션을 폭 전체로 펴는데, 영상의 주제(가운데 문이 열리는 장면)가 하단 38% 에 있어 겹친다. 다른 여덟 장(정지 이미지)은 캡션이 왼쪽 아래만 쓰거나 피사체가 하단에 없어 문제가 없다 — 그래서 «영상일 때만» (.hb-v 존재) 캡션을 사진 아래로 내려 겹침 자체를 없앤다. 캡션 글자·영상은 그대로다. .hb-replay 는 .hero-band 기준 절대배치라 띠가 늘어난 만큼 함께 내려가 캡션 오른쪽 안에 자연히 앉는다(실측 확인, 겹침 없음). */ .hero-band:has(.hb-v) { display: flex; flex-direction: column; } .hero-band:has(.hb-v) .hb-poster { position: static; } } /* ── 메일 링크도 조작요소다 (2026-08-22) ── `system.css` 의 44px 규칙은 `.lnk[href^="tel:"]` 만 잡는다. 문의를 메일로 돌리면서 본문에 `mailto:` 링크가 생겼는데 34px 로 떨어져 모바일 검사 FAIL 2 건이 났다. ⚠️ 공용(system.css)을 고치지 않고 여기서 덮는다 — 다른 고객사가 아직 tel 중심이다. 공용에 올릴지는 두 번째 사이트가 같은 걸 필요로 할 때 정한다(팩토리 규칙 14). */ @media (max-width: 860px) { .lnk[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; } } /* ── 줄맞춤 — 제목이 «한 낱말만» 다음 줄로 떨구지 않게 (2026-08-22) ── 대표 지시: *"전체 페이지 문장 줄맞춤 점검"*. 헤드리스 크롬으로 11장 × 375·768·1280px 을 재니 **제목 27건**이 끝 줄에 낱말 하나만 남아 있었다. 가장 심한 것 — 375px `voucher` h1 「정부 지원사업으로 부담을 줄이는 / 길」: 끝 줄이 첫 줄의 **7%**. ⚠️ 문구를 고쳐서 맞추지 않는다. 끊기는 자리가 폭마다 달라 한 폭을 맞추면 다른 폭이 깨진다 — 실제로 같은 제목이 375 에서는 멀쩡하고 1280 에서 갈라진 건이 여럿이다. 브라우저에 «고르게 끊어라»라고 시키는 것이 맞는 자리다. `balance` 는 6줄 이하에만 듣는다(제목은 전부 해당) · 모르는 브라우저는 그냥 무시하므로 폴백이 따로 필요 없다. 본문은 `pretty` — 마지막 줄에 낱말 하나만 남는 것을 막는다. */ h1, h2, h3, h4, .hero-nm, .frame-t, .route-t > b, .hb-t, .hb-s { text-wrap: balance; } p, li, dd, figcaption, .route-t > span { text-wrap: pretty; } /* 「…」 뒤의 조사·의존명사가 다음 줄로 떨어지는 것을 막는다 — CJK 닫는 따옴표 뒤는 keep-all 로도 끊긴다(2026-08-23 모바일 375px 실측). 짧은 덩어리에만 건다. */ .nb { white-space: nowrap; } /* ── 새소식 (2026-08-23) ── ⚠️ 브리프의 --line·--muted·#fff 는 이 저장소 토큰규율(wf qa)이 막는 값이다 (local.css 는 손으로 쓰는 자리라 hex 직접 씀을 FAIL 로 잡는다). 실사 결과로 바꿔 썼다 — 새 토큰은 만들지 않았다(디자인지침 소관): --line → --rule (system.css 가 카드·표 구분선에 이미 쓰는 값), --muted → --ink-3 (system.css 가 .note·.src li 같은 옅은 캡션에 쓰는 값), #fff → --on-dark (어두운 배지 위 글자색으로 system.css 가 같은 뜻으로 쓴다). */ .news-list { list-style: none; margin: 0; padding: 0; } .news-item { padding: 1rem 0; border-bottom: 1px solid var(--rule); } .news-item a { display: block; text-decoration: none; color: inherit; } .news-item a:hover .news-title { text-decoration: underline; } .news-title { font-weight: 600; } .news-meta { display: block; margin-top: .35rem; font-size: .85rem; color: var(--ink-3); } /* 「마감됨」 흐린 줄(.news-item-closed)은 2026-08-23 전면 자동 전환으로 없앴다(설계 §6-2, 대표 지시: "지원기간이 종료되면 게시물을 내려") — 마감된 공고는 흐리게 남지 않고 목록에서 통째로 빠진다. 이 자리에 있던 대비 규칙은 지운다. */ .news-empty { padding: 2rem 0; color: var(--ink-3); } /* 요약 줄 (summary-line-report, 2026-08-23) — 「지금 뜬 공고 없음」을 「수집이 실제로 무엇을 했는지」로 바꾼다. 목록 맨 위

  • 로 들어간다 (마커 안 — 매일 다시 찍혀야 하는 값이라