/* 화면 공용 — 배너 · 바닥글 · 색 토큰 · 화면 전환. **계산기(`/calc`)와 도구(`/tools`)가 같이 읽는다.** 여기 있는 것은 어느 장이 열려도 같아야 하는 것뿐이다 — 로고가 튀거나 색이 갈리면 차림표를 오갈 때 다른 사이트처럼 보인다. ## 2026-09-10 — `tools/tool.css` 에서 갈라져 나왔다 그 전까지 이 파일 하나가 **사이트 공용과 계산기 전용을 반반** 들고 있었다. 그래서 최적화 장이 배너를 얻으려고 계산기 스타일시트를 통째로 물어야 했다. 가를 때 **줄을 옮기기만 하고 고쳐 쓰지 않았다.** 두 조각을 합치면 원본과 줄 단위로 같다는 것을 확인하고 잘랐다 — 그러지 않으면 미디어 쿼리 닫는 `}` 하나가 조용히 사라진다(실제로 310번 줄이 그것이었다). 계산기 전용은 `web/calc/calc.css` 에 있다. 도구의 3단 틀은 `web/tools/shell.css` 다. */ /* ── 페이지 사이를 옮겨 다닐 때 ───────────────────────────────────── 같은 Optra 안에서 움직이는 느낌이 나야 한다. 차림표와 바닥글에 이름을 주면 브라우저가 그 둘을 "같은 것" 으로 알아보고 그대로 둔 채 본문만 바꾼다. 지원하지 않는 브라우저는 예전처럼 그냥 넘어간다 — 깨지지 않는다. */ /* ── 채워지기 전에는 내보이지 않는다 ───────────────────────────────── 이 장의 본문은 HTML 에 없다. 계산기가 그린다 — 그래서 스크립트를 받는 동안 그리면 **트리도 제목도 값도 없는 빈 창**이 한 번 뜬다. 장이 `` 으로 시작하고, 다 그린 뒤 `registry.js` 가 그 표시를 뗀다. 계산기가 죽어도 `load` 에서 반드시 떼므로 갇히지 않는다. `visibility` 로 가린다. `display:none` 은 자리를 없애 바닥글이 위로 올라왔다가 내려오는 두 번째 깜빡임을 만든다. **안전장치는 CSS 가 든다.** 표시를 떼는 것이 스크립트뿐이면, 그 스크립트가 배포에서 빠지는 날 도구 장이 **영영 빈 채로** 뜬다 — 지금까지는 그래도 계산기가 돌았을 자리다. 그래서 3초가 지나면 CSS 가 스스로 내보인다. 무엇이 잘못돼도 빈 화면에 갇히지 않는다. 정상이라면 그 전에 스크립트가 표시를 떼므로 이 애니메이션은 끝까지 가는 일이 없다. */ html.booting .worksplit{visibility:hidden;animation:optra-reveal 0s linear 3s forwards} @keyframes optra-reveal{to{visibility:visible}} /* 움직임을 줄여 달라고 한 사람에게는 애니메이션이 안 돈다 — 그러면 안전장치도 안 돈다. 그쪽에는 아예 가리지 않는다(스크립트가 채우는 것은 똑같다). */ @media(prefers-reduced-motion:reduce){html.booting .worksplit{visibility:visible}} @view-transition{navigation:auto} .nav{view-transition-name:optra-nav} footer{view-transition-name:optra-foot} /* **왼쪽 트리도 이름을 갖는다**(2026-08-28). 도구가 둘 이상이 되면 트리는 장마다 같은 자리에 같은 모양으로 서 있는데, 이름이 없으면 본문과 함께 통째로 교차 페이드된다 — 안 움직이는 것이 움직이는 것처럼 보인다. `/tools/` 와 도구 장 양쪽에 있어야 짝이 맞는다. */ .tree{view-transition-name:optra-tree} ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s} @media(prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} } :root{ --ink:#0B1A21;--ink-2:#3D5560;--ink-3:#6E858F; --line:#DBE4E7;--line-2:#EDF2F3; --bg:#FFFFFF;--bg-2:#F4F8F8;--bg-3:#E8F0F1; --brand:#0C6B70;--brand-d:#084C50; --ok:#1B7A4C;--warn:#A96A0E;--ng:#B2342A; --sans:'IBM Plex Sans KR',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono','IBM Plex Sans KR',monospace; } *{box-sizing:border-box} /* 700 은 싣지 않는다(DESIGN.md §3) — 가짜 굵게를 막는다 */ b,strong{font-weight:600} body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg-2);line-height:1.7; -webkit-font-smoothing:antialiased; word-break:keep-all;overflow-wrap:break-word} /* 마지막 줄에 낱말 하나만 떨어지는 것을 막는다 (DESIGN.md §4) */ h1,h2,h3,h4{text-wrap:balance} p,.sub,.tdesc{text-wrap:pretty} /* **나머지 스물넷과 같은 폭이다.** 1400/24 였다 — 왼쪽 트리(232px)가 먹은 폭을 계산기에 벌충하려던 값인데, **배너도 같은 `.wrap` 을 쓴다.** 그래서 넓은 화면에서 도구 장에 들어오면 로고가 68px 옆으로 튀었다. "다른 사이트로 넘어왔다" 로 읽히던 가장 큰 이유다(2026-08-28). 2026-08-29 에 **읽는 장만** 1200 으로 내렸다(여백이 화면의 10%는 되어야 띠로 읽힌다 — `DESIGN.md` 4절). **도구 장은 1600 그대로다.** 여기는 읽는 장이 아니라 **일하는 화면**이라, 여백보다 계산기에 준 폭이 값을 한다. 그때 로고가 튀지 않는 이유가 그날과 다르다. 배너와 바닥글이 이제 **자기 폭(1600)을 따로** 갖는다(아래 `.nav .wrap`). 본문 폭이 장마다 달라도 띠는 안 움직인다 — 2026-08-28 에 튀었던 것은 배너가 본문과 같은 `.wrap` 을 쓰고 있어서였다. **그 규칙을 깨지 않는 한** 본문은 장의 성격대로 둔다. */ .wrap{max-width:1600px;margin:0 auto;padding:0 40px} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} a{color:inherit} button{font-family:inherit} /* ── 배너 — **나머지 스물넷과 같은 것이다** ───────────────────────── 2026-08-28 까지 이 장의 배너만 달랐다. 안 붙는 흰 띠였고, 차림표 목록이 없었고, 오른쪽 단추가 `시작하기` 가 아니라 `도구 목록` 이었고, 로고 옆에 크럼이 붙었다. `view-transition-name` 을 줘 봐야 **내용이 다르면 그대로 있는 것으로 안 보인다** — 배너가 통째로 갈아 끼워지는 것처럼 보였다. 크럼은 배너에서 빼 본문 머리로 내렸다. 목록으로 돌아가는 길은 그 크럼과 왼쪽 트리가 들고 있다. */ .nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94); backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} /* **배너는 자기 폭을 갖는다.** 이 장은 본문도 1600 이라 지금은 값이 같지만, 읽는 장 넷은 본문이 1200 이다(DESIGN.md 4절). 배너가 본문을 따라가지 않는 것이 로고를 붙들어 두는 장치다 — 2026-08-28 에 튄 것은 배너가 본문과 같은 `.wrap` 을 쓰고 있어서였다. **다섯 파일이 같은 값이다** — 여기서 혼자 바꾸면 장을 옮길 때 로고가 튄다. */ .nav .wrap{max-width:1600px;display:flex;align-items:center;gap:34px;height:62px} .logo{font-family:var(--mono);font-weight:600;font-size:19px;letter-spacing:.13em;text-decoration:none;color:var(--ink)} .logo i{font-style:normal;color:var(--brand)} .nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14px;color:var(--ink-2)} .nav a{text-decoration:none} .nav a:hover{color:var(--brand)} .nav .here{color:var(--brand)} .nav .right{margin-left:auto;display:flex;align-items:center;gap:16px} .nav .who{font-size:14px;color:var(--ink-2)} .nav .who[hidden]{display:none} .btn{display:inline-block;border:1px solid var(--brand);background:var(--brand);color:#fff; padding:9px 18px;font-size:14px;font-weight:500;border-radius:3px;text-decoration:none;cursor:pointer} .btn:hover{background:var(--brand-d);border-color:var(--brand-d)} @media(max-width:880px){.nav ul{display:none}} /* ── 바닥글 — **이 장에만 없었다** ─────────────────────────────────── 나머지 스물넷에는 있다. 없으니 `footer{view-transition-name:optra-foot}` 의 짝이 한쪽에만 있었고, 장을 옮길 때마다 바닥이 새로 생겼다 사라졌다 했다. `TODO.md` 12번(`/qna` 링크가 왼쪽 트리에 JS 로만 있다)도 여기서 같이 풀린다 — 이제 HTML 에 있는 링크가 하나 생긴다. */ footer{border-top:1px solid var(--line);padding:30px 0 56px;background:var(--bg)} /* 바닥글도 배너와 같은 폭이다 — 위아래 띠가 짝이다. 위는 화면을 물고 아래만 안으로 들어오면 장을 감싸던 틀이 아래에서 끊긴다. */ footer .wrap{max-width:1600px;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline; font-family:var(--mono);font-size:11.5px;color:var(--ink-3)} footer a{color:var(--brand);text-decoration:none} footer a:hover{text-decoration:underline} .fmeta{display:flex;gap:18px;flex-wrap:wrap} .flegal{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto} .fnote{flex:1 0 100%;margin:6px 0 0;font-family:var(--sans);font-size:12px; color:var(--ink-3);line-height:1.7} @media(max-width:760px){.flegal{margin-left:0}} a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}