/* ============================================================ BLOCKFESTA 2026 — 사이트 스타일 근거: docs/concept/README.md (승인된 v2 디자인 스펙). 깊이는 표면 단계와 1px 헤어라인으로만 — 그림자 금지. 모션 예산: 히어로만 연속 씬, 심(seam)은 진입 시 1회, 마지막 CTA는 느린 펄스 1개. 나머지 지오메트리는 정지. ============================================================ */ * { box-sizing: border-box; } /* 머리띠 높이는 히어로도 알아야 한다 — 첫 화면은 머리띠와 히어로 둘이 정확히 나눠 갖는다. 그래서 :root에 둔다. */ :root { --bf-headrow: 64px; } html { scroll-behavior: smooth; } /* --- 대체 글꼴의 폭 맞추기(2026-09-04) ------------------------ Pretendard 가 오기 전에는 시스템 글꼴이 선다. 그런데 Malgun Gothic 은 Pretendard 보다 10% 넓어 히어로의 리드 문단이 두 줄이 아니라 세 줄이 되었고, 히어로가 세로 가운데 정렬이라 그 32px 이 위아래로 반씩 나뉘어 — 제목은 16px 위로, 단추는 16px 아래로 — 글꼴이 바뀌는 순간 모두가 제자리로 뛰었다(사용자, 2026-09-04). size-adjust 로 대체 글꼴을 좁혀 두면 줄바꿈이 같아져 아무것도 움직이지 않는다. 값은 잰 것이다: 같은 문장의 폭 비가 라틴 94%, 한글 90%(Malgun Gothic 기준, 굵기 400과 900에서 같다). 글자는 그만큼 작게 그려진다 — 잠깐 동안의 대체 글꼴이므로 폭이 맞는 쪽이 낫다. local() 뿐이라 새 내려받기는 없다. 아무것도 없는 기기에서는 이 @font-face 가 통째로 건너뛰어지고 예전처럼 다음 후보로 넘어간다. 한글 판을 뒤에 적는다: 같은 이름의 두 판이 한 글자를 함께 덮으면 나중 것이 이긴다. */ @font-face { font-family: "Pretendard fallback"; src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"); font-weight: 100 799; size-adjust: 94%; } /* 굵은 라틴은 따로다(2026-09-04). Segoe UI 에는 Black 이 없어 900 을 부르면 Semibold 를 굵게 흉내 내는데, 그 폭이 400 일 때와 다르다: Pretendard 와의 비가 400 에서 93~95%, 900 에서 90~91% 였다. 하나의 size-adjust 로 둘을 함께 맞출 수 없으므로 굵기 구간을 나눈다. 한글은 굵기와 상관없이 90% 라 아래 한 판으로 족하다. */ @font-face { font-family: "Pretendard fallback"; src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"); font-weight: 800 900; size-adjust: 90.5%; } @font-face { font-family: "Pretendard fallback"; src: local("Malgun Gothic"), local("Apple SD Gothic Neo"), local("Noto Sans KR"); font-weight: 100 900; size-adjust: 90%; unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; } /* 무엇이 하나 넘쳐도 페이지 전체가 옆으로 밀리지 않게 하는 안전망 (2026-09-06, 사용자). hidden 이 아니라 clip 이다: hidden 은 그 요소를 스크롤 컨테이너로 만들고, 그러면 그 안의 position: sticky 가 이 문서의 스크롤포트를 잃는다 — 우리 머리띠가 sticky 다. clip 은 자르기만 하고 스크롤 컨테이너를 만들지 않으므로 머리띠가 그대로 붙어 있다. 세로는 건드리지 않는다(clip 은 한 축만 지정해도 된다, hidden 과 달리 다른 축이 auto 로 끌려가지 않는다). 이것은 증상을 가리는 그물일 뿐 고침이 아니다 — 넘치는 것은 그때그때 원인을 고친다. 오래된 사파리(16 아래)는 clip 을 모르고 그냥 지나간다: 그물이 없는 셈이지만 부수는 것도 없다. */ body { overflow-x: clip; margin: 0; background: var(--bf-bg); color: var(--bf-fg); font-family: var(--bf-font); font-size: var(--bf-size-body); line-height: var(--bf-leading-latin); -webkit-font-smoothing: antialiased; } a { color: var(--bf-300); text-decoration: none; transition: color var(--bf-dur-1) var(--bf-ease); } a:hover { color: var(--bf-200); } ::selection { background: var(--bf-600); color: var(--bf-fg); } :focus-visible { outline: none; box-shadow: var(--bf-focus); border-radius: var(--bf-radius-1); } /* --- 심(seam)의 발광 — 진입 시 1회. site.js가 붙인다 -------- 레일 씬의 신호 키프레임(bfDash·bfEmerge·bfEmergeSoft)은 지웠다(2026-08-13): 그 씬이 사라져 쓰는 곳이 없다. */ @keyframes bfSeam { 0% { stroke-dashoffset: 1000; opacity: 0; } 12% { opacity: .95; } 82% { opacity: .95; } 100% { stroke-dashoffset: 0; opacity: 0; } } /* 모션 감소 선호 시 모든 애니메이션 정지 — 씬은 정지 프레임 */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* --- 아이브로우 -------------------------------------------- */ .bf-eyebrow { font-size: var(--bf-size-eyebrow); font-weight: var(--bf-weight-eyebrow); letter-spacing: var(--bf-track-eyebrow); text-transform: uppercase; /* 라틴 전용 */ color: var(--bf-200); } /* 아이브로우 문자열은 두 언어 모두 라틴이다. 한글이 들어오면 자간과 대문자 변환을 반드시 꺼야 한다 — 둘 다 라틴의 장치다. */ .bf-eyebrow:lang(ko) { letter-spacing: 0; text-transform: none; word-break: keep-all; } /* --- 버튼 -------------------------------------------------- 기본 = 라이트 채움 + 그라파이트 라벨. 보조 = 아주르 아웃라인. 블루 채움 버튼은 존재하지 않는다. */ /* 모서리는 2px다(2026-09-07; 09-06 에는 4px, 그 전에는 8px 이었다). 8px 은 이 페이지의 곧은 선들 사이에서 말랑하고 무겁게 읽혔고, 더 각진 쪽으로 두 번에 걸쳐 내려왔다 — 공유 카드의 그림이 그 값이다. 언어 토글만 4px 로 남는다: 그것은 단추가 아니라 두 칸짜리 트랙이다. 초점 고리는 4px 로 잡혀 있으나 이 규칙이 뒤에 있어 단추에서는 2px 이 이긴다. */ .bf-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--bf-font); font-weight: 600; cursor: pointer; border-radius: 2px; border: 1px solid transparent; transition: background var(--bf-dur-1) var(--bf-ease), color var(--bf-dur-1) var(--bf-ease); white-space: nowrap; } .bf-btn--primary { background: var(--bf-cta-bg); color: var(--bf-cta-fg); } .bf-btn--primary:hover { background: var(--bf-cta-bg-hover); color: var(--bf-cta-fg); } .bf-btn--primary:active { background: #D8DEE9; } /* 파란 버튼은 하나의 모양뿐이다 — 채운 아주르. 아웃라인은 버튼이 아니라 칩(프레임 이름 등)의 것이므로, 둘이 같은 옷을 입으면 무엇이 눌리는지 알 수 없다. 600 위의 밝은 글자는 6.4:1, 700 위에서는 9.6:1 — 둘 다 AA를 넘는다. 그래서 호버는 밝히지 않고 어둡게 간다: 500까지 밝히면 4.3:1로 기준 아래로 떨어진다. */ .bf-btn--secondary { background: var(--bf-cta-2-bg); border-color: var(--bf-cta-2-border); color: var(--bf-cta-2-fg); } .bf-btn--secondary:hover { background: var(--bf-cta-2-bg-hover); border-color: var(--bf-cta-2-border); color: var(--bf-cta-2-fg); } /* 문의 단추 — 한 화면에서 가장 시끄러운 것. 토큰의 까닭은 tokens.css 에 적었다. 채움 단추이므로 테두리는 없다. */ .bf-btn--hot { background: var(--bf-cta-hot-bg); color: var(--bf-cta-hot-fg); } .bf-btn--hot:hover { background: var(--bf-cta-hot-bg-hover); color: var(--bf-cta-hot-fg); } .bf-btn--hot:active { background: #E8850F; } /* 세 번째 모양 — 링크다(2026-09-04). 채움도 테두리도 없고 밑줄로 링크임을 말한다. 주 단추와 나란히 서지만 무게가 달라야 한다: 한 화면이 부르는 일은 하나이고, 나머지는 옆길이다. 높이는 --lg 를 그대로 받아 옆의 단추와 밑줄이 맞고, 가로 여백만 지운다 — 단추의 26px 은 채움이 있을 때의 값이다. */ .bf-btn--link { background: none; border-color: transparent; padding-inline: 4px; color: var(--bf-300); text-decoration: underline; text-underline-offset: 4px; } .bf-btn--link:hover { background: none; color: var(--bf-200); } /* 헤더에 나란히 서는 두 조각 — 언어 전환과 신청 단추 — 은 같은 높이다. 값을 한 곳에 두어 둘이 어긋나지 않게 한다: 예전에는 각자 제 안쪽 여백으로 높이가 생겨 32px 과 31px 로 어긋나 있었다. */ :root { --bf-ctl-h: 32px; } .bf-btn--sm { height: var(--bf-ctl-h); padding: 0 14px; font-size: 13.5px; } /* 머리의 등록 버튼은 너비를 고정한다 — 등록하기(≈94px)와 Register(≈99px)의 차이만큼 언어를 바꿀 때마다 머리가 들썩였다. 두 문구 중 넓은 쪽에 맞춘 값이며, 문구가 바뀌면 다시 잰다. */ .bf-header a.bf-btn--sm { width: 104px; padding: 0; } .bf-btn--lg { height: 49px; padding: 0 26px; font-size: 15.5px; } /* 어디론가 데려가는 버튼에는 오른쪽에 셰브론이 붙고, 가리키면 조금 더 그쪽으로 간다. 폼 전송 버튼은 이동이 아니므로 붙지 않는다 — 그래서 선택자가 a로 시작한다. */ a.bf-btn { gap: 10px; } a.bf-btn::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -1px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--bf-dur-1) var(--bf-ease); } a.bf-btn:hover::after { transform: translateX(3px) rotate(-45deg); } /* --- 언어 토글 --------------------------------------------- 트랙 안쪽에 여백을 두고 활성 알약이 그 안에서 움직이는 형태. 테두리에 딱 붙은 두 칸이 아니다. */ /* 모서리는 버튼과 같은 4px다(2026-09-06) — 머리에서 등록 버튼과 나란히 서므로 둘의 각이 어긋나면 바로 보인다. 안쪽 알약은 이미 4px. */ .bf-lang { display: inline-flex; align-items: stretch; gap: 2px; padding: 3px; height: var(--bf-ctl-h); border: var(--bf-border); border-radius: var(--bf-radius-1); background: var(--bf-surface); } /* 세로 여백 대신 늘어나서 채운다 — 그래야 켜진 쪽 알약이 테두리 안쪽을 꽉 채우고, 높이는 위의 한 값만 따른다. */ .bf-lang a { display: inline-flex; align-items: center; padding: 0 11px; font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--bf-fg-faint); border-radius: var(--bf-radius-1); transition: background var(--bf-dur-1) var(--bf-ease), color var(--bf-dur-1) var(--bf-ease); } .bf-lang a:hover { color: var(--bf-fg-muted); } .bf-lang a.is-active { background: var(--bf-surface-hi); color: var(--bf-fg); } /* --- 헤더 -------------------------------------------------- 헤더 위의 폴리오 스트립은 제거됨(2026-08-11). */ .bf-header { /* 윗줄 높이(--bf-headrow, 접힘 거리도 이 값)는 :root에 있다 */ position: sticky; top: 0; z-index: 10; /* 어두운 유리 — 바탕을 덜 덮고 더 흐린다. 아래 내용이 형태로만 비치고 글자로는 읽히지 않는 지점이 78%다. 채도를 조금 올리는 것은 흐림이 색을 빨아 회색으로 만들기 때문이며, 새 색을 들이는 것이 아니라 뒤에 있던 색을 되돌리는 것이다. */ background: color-mix(in srgb, var(--bf-bg) 78%, transparent); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); /* 맨 위에서는 선도 그림자도 없다 — 헤더가 히어로의 일부처럼 보여야 한다. 페이지가 밀리는 순간에만 아래에 얇은 선과 옅은 그림자가 생겨, 글이 헤더 밑으로 지나간다는 것을 말한다 (2026-09-03). 자리를 지키느라 선은 늘 있고 색만 바뀐다 — 생겼다 없어지면 헤더가 1px 씩 흔들린다. 그림자는 새 색이 아니라 페이지 바탕색을 묽게 쓴 것이다. */ border-bottom: 1px solid transparent; transition: border-color var(--bf-dur-2) var(--bf-ease), box-shadow var(--bf-dur-2) var(--bf-ease), transform var(--bf-dur-2) var(--bf-ease); } /* 선은 헤어라인을 그대로 쓰지 않고 바탕 쪽으로 당겨 둔다 — 헤어라인은 상자 테두리의 굵기이고, 여기서는 경계가 아니라 기척이면 된다 (2026-09-03). 1.63:1 이던 것이 1.28:1 이 된다. 더 얇게는 못 만든다: 1px 이 이미 CSS 의 바닥이고, 0.5px 는 2배 화면에서만 반쪽으로 그려지고 1배 화면에서는 사라지거나 그대로 1px 이 된다 — 화면마다 다른 굵기가 나오느니 색으로 낮춘다. 새 색은 아니다: 토큰 둘을 섞은 값이다. */ .bf-header.is-stuck { border-bottom-color: color-mix(in srgb, var(--bf-hairline) 60%, var(--bf-bg)); box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--bf-bg) 66%, transparent); } /* 흐림이 없는 브라우저에서는 유리가 아니라 그냥 반투명한 구멍이 된다 — 그런 곳에서는 거의 불투명하게 덮는다. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bf-header { background: color-mix(in srgb, var(--bf-bg) 96%, transparent); } } .bf-header__in { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: var(--bf-headrow); display: flex; align-items: center; gap: 28px; } .bf-header__brand { display: flex; align-items: center; gap: 10px; color: var(--bf-fg); } .bf-header__brand img { display: block; } .bf-header__word { font-weight: 900; font-size: 20px; letter-spacing: var(--bf-track-display); } .bf-header__year { font-weight: 500; font-size: 13px; color: var(--bf-fg-muted); } /* 내비게이션 — 현재 섹션에 밑줄. 밑줄은 항목마다 새로 나타나지 않고 하나의 선이 좌우로 미끄러져 이동한다(스크롤스파이, site.js). */ /* 마크와 언어 전환 사이의 남는 폭 한가운데에 선다 — 양쪽 auto 여백이 남는 자리를 똑같이 나눈다. 오른쪽으로 밀어 두면 언어 전환·등록과 한 덩어리로 뭉쳐 어디까지가 내비인지 흐려진다. */ .bf-header__nav { position: relative; display: flex; gap: 4px; margin-left: auto; margin-right: auto; } .bf-header__nav a { font-size: 16px; font-weight: 500; padding: 8px 12px; color: var(--bf-fg-muted); transition: color var(--bf-dur-1) var(--bf-ease); } .bf-header__nav a:hover { color: var(--bf-100); } .bf-header__nav a.is-active { color: var(--bf-100); } /* 밑줄 하나가 세 가지로 움직인다: 처음 나타날 때 — 왼쪽 끝에서 폭이 자라 제자리를 채우고, 항목 사이 — 좌우로 미끄러지며, 사라질 때 — 자란 순서를 되감아 왼쪽으로 줄어든다. */ .bf-header__ink { position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; background: var(--bf-300); border-radius: 1px; pointer-events: none; transform-origin: left center; transition: transform var(--bf-dur-2) var(--bf-ease), width var(--bf-dur-2) var(--bf-ease); } /* --- 좁은 화면의 섹션 띠 ----------------------------------- 넓은 화면에서는 없다. 좁은 화면에서 밑줄 내비 대신 서며, 가로로 밀어서 본다. 현재 섹션에 밑줄이 켜지고 화면 밖이면 스크립트가 끌어온다(site.js). 알약이 아니라 링크다 — 넓은 화면의 내비와 같은 말투로 말하고, 여섯 개의 테두리가 헤더를 도구 모음으로 만들지 않는다. */ .bf-subnav { display: none; } .bf-subnav a { flex: none; padding: 8px 0 6px; border-bottom: 2px solid transparent; color: var(--bf-fg-muted); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: color var(--bf-dur-1) var(--bf-ease), border-color var(--bf-dur-1) var(--bf-ease); } .bf-subnav a.is-active { color: var(--bf-100); border-bottom-color: var(--bf-300); } /* 스크롤을 내리면 윗줄만 접히고 섹션 띠는 남는다 — 읽는 동안에도 "여기가 어디인지"는 계속 보여야 한다. 올리면 윗줄이 돌아온다. 좁은 화면에서만 — 넓은 화면에는 숨길 이유가 없다. 접는 방법은 반드시 transform이어야 한다. 높이를 줄이면 스티키 헤더도 흐름 안에 있으므로 문서가 그만큼 짧아지고, 브라우저가 scrollY를 되밀면서 "위로 스크롤"로 읽혀 헤더가 다시 펼쳐진다 — 그 즉시 문서가 길어져 또 접힌다. 화면이 떠는 것은 그 되먹임이다. transform은 배치를 건드리지 않으므로 고리가 생기지 않는다. */ .bf-header { transition: transform var(--bf-dur-2) var(--bf-ease); } /* 앵커로 이동할 때 스티키 헤더가 제목을 가리지 않도록. 값은 헤더 높이 그대로다 — 그보다 크면 섹션이 헤더 아래에 떨어져 서고, 그 틈으로 앞 섹션의 끝자락이 보인다(2026-09-07, 사용자: 메뉴가 섹션보다 조금 위로 간다). 88 은 24px 많았다. */ [id] { scroll-margin-top: var(--bf-headrow); } /* --- 히어로 + 스카이라인 씬 -------------------------------- 배경은 평면 SVG 스카이라인 하나(partials/scene.php, 승인 핸드오프 docs/export_hero_cta). 바닥 고정(xMidYMax slice)이라 씬 SVG 하나가 히어로와 아래 소산 구간을 함께 덮는다. */ .bf-scene-host { position: relative; overflow: hidden; background: var(--bf-bg); --bf-scene-foot: 104px; /* 히어로 아래 여백 — 그림은 여기까지 오지 않는다 */ /* 첫 화면에서 히어로가 갖는 높이. 그림판도 같은 값을 쓰므로 한 곳에서만 정한다. */ --bf-hero-h: max(600px, calc(100vh - var(--bf-headrow))); } /* 그림판의 바닥은 히어로의 바닥이다 — 도시의 기단까지가 첫 화면 안에 들어온다(2026-08-13). 치수는 둘 다 적어 준다: SVG는 고유 비율을 가진 대체 요소라 오프셋만으로는 상자를 채우지 않는다. 폭은 그림의 비율(1440:780)에 묶고 오른쪽에 붙인다(2026-08-13). 폭을 화면에 맞추면 slice가 폭을 기준으로 확대해 첨탑이 위로 잘려 나갔다 — 넓은 화면일수록 심했다. 이제 그림은 높이만큼만 자라고, 왼쪽에 남는 자리는 스크림의 그라파이트가 덮는다(카피가 서는 쪽이다). 2.8:1보다 넓은 화면에서는 66% 하한이 걸려 예전처럼 폭을 채운다 — 그쪽이 빈자리를 드러내는 것보다 낫다. */ /* .bf-scene-host__plane 은 판(그림과 그 창 겹)을 담아 가라앉히는 상자다 — 먼 판과 앞 판, 둘이다(아래 "판이 가라앉는다"). 판과 같은 자리· 크기에 서야 하므로 같은 규칙을 받는다. 좁은 화면의 덮어쓰기도. */ .bf-scene-host__svg, .bf-scene-host__plane { position: absolute; right: 0; top: 0; z-index: 0; height: var(--bf-hero-h); width: clamp(66%, calc(var(--bf-hero-h) * 1440 / 780), 100%); } /* 무대 — 스크림과 바닥 페이드는 마스크다(2026-09-03). 두 판(먼 판·앞 판)을 담은 상자에 mask-image 를 걸어 도시 자체를 옅게 한다. 전에는 반투명한 바탕색을 도시 위에 덮었는데(스크림·페이드 두 겹), 바탕색 위에 같은 바탕색을 반투명으로 얹으면 수학으로는 그대로여야 할 것이 8비트 반올림 때문에 알파 단마다 10 과 11 사이를 오가 하늘에 1/255 짜리 세로 띠가 생겼다 — 어두운 방에서 보인다(사용자, 2026-09-03). 마스크는 그려진 것에만 닿는다: 하늘은 애초에 아무것도 없어 반올림할 것이 없고, 파사드 위의 1/255 는 보이지 않는다. 두 그라데이션은 예전 두 겹을 가시성(1 − 알파)으로 뒤집은 것이다. 스크림 — 핸드오프대로 왼쪽 가중: 카피가 서는 왼쪽은 그라파이트로 눌리고 오른쪽 3분의 1에서 도시가 온전히 드러난다. 기울기(96deg)와 세 단(34·56·74%)은 핸드오프 그대로다. 다만 이 사이트의 카피는 1200px 래퍼 안쪽에서 시작하므로 — 핸드오프는 화면 왼쪽 가장자리에서 96px였다 — 어두운 단을 그 열까지 넓혔다. 페이드 — 그림이 끝나는 자리에서 함께 끝난다: 히어로 바닥 위 180px 에서 도시의 기단을 그라파이트로 녹여 페이지로 넘긴다. 자리는 --bf-hero-h 로 잰다; 그 아래(spacer)는 아예 보이지 않는다. 교집합(intersect)이므로 둘 다 통과한 곳만 보인다. -webkit- 짝은 옛 사파리 몫이다. 좁은 화면은 변수 둘만 바꾼다. */ .bf-scene-host__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; --bf-stage-scrim: linear-gradient(96deg, transparent 34%, rgb(0 0 0 / .26) 56%, #000 74%); --bf-stage-fade: linear-gradient(to bottom, #000 calc(var(--bf-hero-h) - 180px), rgb(0 0 0 / .3) calc(var(--bf-hero-h) - 97px), transparent calc(var(--bf-hero-h) - 25px)); -webkit-mask-image: var(--bf-stage-scrim), var(--bf-stage-fade); -webkit-mask-composite: source-in; mask-image: var(--bf-stage-scrim), var(--bf-stage-fade); mask-composite: intersect; } /* 히어로와 첫 섹션 사이의 빈 띠 */ .bf-scene-host__spacer { height: var(--bf-scene-foot); } /* --- 판이 가라앉는다(2026-09-03, 히어로만) ----------------------- 페이지가 올라갈 때 도시는 페이지보다 느리게 올라간다 — 곧 아래로 가라앉는다. 판마다 속도가 다르다: 앞 판(가운데 탑·기단·그 창)은 페이지 속도의 45%, 먼 판(능선·가장자리 탑·계단식 건물·그 창)은 25% 만큼 뒤처진다 — 가까운 것이 더 뒤처져 판이 갈라진다(사용자, 2026-09-03: 처음엔 먼 판을 세워 두었는데 모두 내려가는 쪽으로). 비율은 partials/scene.php 의 data-lag 에 있고, 옮기는 것은 site.js 다: 스크롤마다 두 판()에 정수 픽셀의 transform 을 바로 쓴다. 소수점으로 옮기면 1px 선이 떨린다 — 카메라 드리프트를 접은 까닭이다. 그래서 CSS 의 scroll-timeline 은 쓰지 않는다: 거기서는 반올림할 수 없다. 상자(.bf-scene-host__plane)는 제자리에 서서 overflow 로 안을 자르고, 움직이는 것은 그 안의 판들이다: 상자 자체를 옮기면 자르는 틀도 함께 내려가 내려간 판이 페이드 아래 빈 띠(spacer)에 드러난다 — 능선을 옮기던 첫 판에서 그랬다. 한 상자의 두 판은 같은 프레임에 같은 값을 받으므로 어긋날 수 없다. 처음엔 상자에 상속 변수(--bf-plane-y) 하나를 주고 판이 var() 로 받게 했다 — 깨끗해 보였지만, 상속되는 사용자 속성이 바뀌면 브라우저는 그 아래 모든 요소의 스타일을 다시 계산한다: 도형 300여 개와 창 360여 개, 그것도 스크롤 프레임마다. 휴대폰에서 도시가 깜빡였다(사용자, 2026-09-04). 인라인 transform 은 그 요소 하나만 건드린다. */ .bf-scene-host__plane { overflow: hidden; } .bf-scene-host__plane > .bf-scene-host__svg { right: 0; left: 0; top: 0; width: 100%; height: 100%; will-change: transform; /* 값은 site.js 가 인라인으로 쓴다 */ } /* --- 도시가 세워진다(2026-09-03, 히어로만) --------------------- 열릴 때 한 번, 먼 데서 가까운 데로: 먼 능선(+가장자리 두 탑, .bf-sky__edge — 첫 단계가 허전해서, 2026-09-03) → 탑 → 기단. 아래 섹션의 zoom-in-up 과 같은 곡선이되 길이는 1초로 늘렸고, 판 사이 간격은 길이의 절반이다 — 처음엔 720ms 에 140ms 간격이었는데 셋이 한꺼번에 나타나는 것으로 읽혔다(사용자, 2026-09-03). 절반 간격이면 앞 판이 거의 다 섰을 때 다음 판이 오른다. 마지막 화면의 사본은 그대로 선다: 선택자가 히어로의 판(.bf-scene-host__svg)에만 닿는다. 16px 는 SVG 안이라 사용자 단위다 — 그림과 함께 줄고 는다. JS 도 관찰자도 없다: CSS 애니메이션은 요소가 그려지는 순간 시작하므로 섹션의 등장과 달리 숨은 채 남을 길이 없다. */ .bf-scene-host { --bf-sky-dur: 1000ms; --bf-sky-step: 500ms; } @keyframes bfSkyRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .bf-scene-host__svg :is(.bf-sky__far, .bf-sky__edge, .bf-sky__towers, .bf-sky__podium) { animation: bfSkyRise var(--bf-sky-dur) var(--bf-reveal-ease) both; } .bf-scene-host__svg .bf-sky__towers { animation-delay: var(--bf-sky-step); } .bf-scene-host__svg .bf-sky__podium { animation-delay: calc(2 * var(--bf-sky-step)); } /* --- 창이 켜진다(2026-09-03, 히어로만) ------------------------- 밤의 여의도가 불을 켠다. 창은 그림에 없다 — lib/common.php 의 bf_sky_lights() 가 층선×멀리언 격자에서 칸을 계산하고 고정 씨앗으로 뽑아 차례를 섞는다. 겹은 별도 다(까닭은 partials/scene.php 끝에). will-change 로 제 겹을 갖게 해 다시 그려지는 것이 창뿐이게 한다. 파도다(사용자, 2026-09-03): 하나씩 켜져 다 켜지고, 하나씩 꺼져 다 꺼진다. 한 바퀴 37초 = 켜기 15초(PHP BF_SKY_FILL) → 다 켜진 채 4초 → 끄기 15초 → 캄캄한 채 3초. 창 하나는 제 시각에 켜져 19초(51.4%) 뒤에 꺼지므로 켜진 차례가 곧 꺼지는 차례다. 켜짐·꺼짐은 0.3초(0.8%) — 찰칵이면 깜빡임으로 읽힌다. 켜기 + 19초 ≤ 37초여야 다음 바퀴와 겹치지 않는다. 켜기 10 → 15초는 사용자 지시(2026-09-04): 창이 두 배로 늘어 간격이 너무 촘촘해졌다. 도시가 다 선 뒤(2×간격+길이)에 제 차례를 기다린다 — 그 전엔 캄캄하다 (fill-mode 없음: 지연 동안은 기본값 0 이다). 창이 먼저 떠 있고 건물이 뒤에 오는 것은 이상하다(사용자, 2026-09-03). prefers-reduced-motion 은 보지 않는다(사용자 결정, 2026-09-03). */ .bf-scene-host { --bf-win-cycle: 37s; } @keyframes bfWindow { 0% { fill-opacity: 0; } 0.8% { fill-opacity: .7; } 51.4% { fill-opacity: .7; } 52.2% { fill-opacity: 0; } 100% { fill-opacity: 0; } } .bf-scene-host__svg--lights { will-change: transform; } /* 스크롤 중에는 창과 항공등이 멈춘다(2026-09-04). fill-opacity 와 opacity 는 합성기가 아니라 페인터의 일이라, 창 하나가 켜지는 매 프레임 창 겹이 통째로 다시 그려진다 — 가만히 있을 때는 그것만이 전부여서 괜찮지만, 스크롤 중에는 네 겹을 옮기는 일과 겹쳐 휴대폰 GPU 가 밀리고 타일이 깜빡인다. 스크롤이 멎은 뒤 160ms 에 다시 돈다(site.js 가 클래스를 붙였다 뗀다). 멈춘 동안 진행은 보존되므로 물결은 멈춘 자리에서 이어진다. 스크롤하는 사람이 창 하나가 켜지는 것을 보고 있지는 않다. */ .bf-scene-host__svg--lights.is-scrolling :is(polygon, circle) { animation-play-state: paused; } .bf-scene-host__svg--lights polygon { fill-opacity: 0; animation: bfWindow var(--bf-win-cycle) linear infinite; animation-delay: calc(2 * var(--bf-sky-step) + var(--bf-sky-dur) + var(--bf-win-on)); } /* --- 항공등(2026-09-03, 히어로만) ------------------------------- 첨탑 꼭대기의 흰 점이 2초에 한 번 켜진다 — 높은 건물의 장애등이다. 둘은 0.7초 어긋나 함께 깜빡이지 않는다. 둘레의 무리는 같은 박자로 숨 쉰다. 도시가 다 설 때까지는 보이지 않는다: 깜빡임은 opacity 를, 문은 fill-opacity 를 쓴다(같은 속성에 둘을 걸면 뒤엣것만 남는다). 가장 낮은 밝기는 0 이 아니다 — 꺼진 등도 등이다. */ @keyframes bfBeacon { 0%, 35%, 65%, 100% { opacity: .12; } 50% { opacity: 1; } } @keyframes bfSkyOn { from { fill-opacity: 0; } to { fill-opacity: 1; } } .bf-sky__beacons circle { fill-opacity: 0; animation: bfBeacon 2s ease-in-out infinite, bfSkyOn 600ms var(--bf-reveal-ease) both; animation-delay: var(--bf-beacon-phase), calc(2 * var(--bf-sky-step) + var(--bf-sky-dur)); } /* 첫 화면은 머리띠와 히어로가 정확히 나눠 갖는다(2026-08-13): 상한을 두지 않으므로 넓고 높은 화면에서도 도시가 화면 높이만큼 자란다 — 그림판이 이 상자를 그대로 따른다. */ .bf-hero { position: relative; z-index: 2; height: var(--bf-hero-h); display: flex; flex-direction: column; } /* 카피는 왼쪽 열에 선다(2026-08-13, 핸드오프 구성): 도시는 오른쪽에서 온전히 보이고 활자는 어두운 쪽에 앉는다. 열의 왼쪽 모서리는 사이트의 1200px 래퍼와 같다 — 헤드라인이 머리띠의 로고와, 아래 모든 섹션과 한 줄에 선다. */ .bf-hero__in { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 32px 72px; } /* --- 히어로가 왼쪽에서 들어온다(2026-09-04, 사용자) -------------- 태그라인부터 개최 정보까지, 히어로의 블록이 차례로 왼쪽에서 미끄러져 들어온다. 아래 섹션의 등장(zoom-in-up)과는 다른 몸짓이다: 저쪽은 스크롤을 따라 아래에서 떠오르고, 여기는 첫 화면이라 기다릴 스크롤이 없다. 차례는 DOM 순서 그대로다 — 자식 목록을 손으로 적지 않으므로 블록을 넣고 빼도 어긋나지 않는다. 도시가 다 서기까지 2초, 글은 1.4초에 끝난다 — 글이 먼저 자리를 잡고 도시가 뒤따라 선다. 관찰자도 JS 도 없다: CSS 애니메이션은 요소가 그려지는 순간 시작하고 both 로 끝 상태를 지키므로, 스크립트가 없어도 글이 숨지 않는다. */ .bf-hero__in { --bf-hero-step: 90ms; } @keyframes bfHeroIn { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } } /* 표제 상자는 통째로가 아니라 세 무리로 들어온다(2026-09-06, 사용자): 표제 → 화살표 줄 → 결론. 그림()과 글자(.bf-title__text) 어느 쪽이 보이든 무리는 .bf-title__part 셋이다. 상자 자체는 움직이지 않는다 — 움직이면 무리가 두 번 들어온다. 뒤따르는 형제(단추, 개최 정보)는 그 세 걸음 뒤에서 잇는다. 안의 -32px 는 사용자 단위라 글자의 픽셀과 한 단위쯤 다르지만 눈으로는 같다. */ .bf-hero__in > * { animation: bfHeroIn 700ms var(--bf-reveal-ease) both; } .bf-hero__in > .bf-title { animation: none; } .bf-title__part { animation: bfHeroIn 700ms var(--bf-reveal-ease) both; } .bf-title__part:nth-child(1) { animation-delay: 150ms; } .bf-title__part:nth-child(2) { animation-delay: calc(150ms + 1 * var(--bf-hero-step)); } .bf-title__part:nth-child(3) { animation-delay: calc(150ms + 2 * var(--bf-hero-step)); } .bf-hero__in > :nth-child(2) { animation-delay: calc(150ms + 3 * var(--bf-hero-step)); } .bf-hero__in > :nth-child(3) { animation-delay: calc(150ms + 4 * var(--bf-hero-step)); } .bf-hero__in > :nth-child(n+4) { animation-delay: calc(150ms + 5 * var(--bf-hero-step)); } /* --- 표제 상자(2026-09-06) -------------------------------------- 디자이너의 벡터(.bf-title__art)와 살아 있는 글자(.bf-title__text)가 한 상자에 있다. 한국어판 넓은 화면(--art)에서는 그림이 서고 글자는 화면 밖으로 밀린다 — 없애지 않는다: 그것이

이고, 검색과 읽기 도구는 그것을 읽는다(sr-only 꼴: 한 픽셀로 잘라 두되 문서에는 둔다). 좁은 화면에서도 그림이다(2026-09-06, 사용자가 휴대폰에서 보고 판단하기로). 그림은 열 폭을 따라 줄어들되 480px 아래로는 내려가지 않는다(사용자, 2026-09-06; 처음엔 표제 글자 56px 에 해당하는 330 이었다) — 그 아래에서는 열을 다 쓴다. 휴대폰에서 화살표 줄은 약 5px, 결론은 10px 가 된다: 읽히지 않으면 그때 글자판(.bf-title__text)으로 돌아간다. 영문판에는 --art 가 없어 늘 글자다 — 영문 아트보드가 아직 없다. 그림의 폭은 지금 표제 크기에 맞춘 것이다(사용자: "지금 크기로"): 1440px 에서 표제 글자가 약 100px 이고, 아트보드의 글자는 94 단위이므로 그림 한 단위 ≈ 1px, 곧 623px(선 끝에서 선 끝까지). 표제 크기가 7.1vw 로 크므로 그림도 같은 비율로 — 623/1440 ≈ 43.3vw — 따라가고, 표제의 상한 104px 에 맞춰 647px 에서 멈춘다. */ .bf-title { width: 100%; } /* 살아 있는 글자로 짠 같은 디자인(2026-09-06). 아트보드의 치수를 1440px 에서의 픽셀로 옮긴 것이다(한 단위 ≈ 1px): 선 위 23·아래 28, 표제 다음 19, 화살표 줄 다음 12; 화살표 줄 대문자 높이 10 → 14px, 결론 19 → 20px; 선은 글 폭만큼(width: fit-content). 표제 크기는 한국어 규칙이 이미 아트보드와 맞고, 영문 표제도 같은 비율로 내렸다(전에는 8.2vw). 글자는 글자라 자간까지 벡터와 같을 수는 없다 — 그것이 벡터를 쓰는 까닭이고, 이 규칙은 벡터가 없는 자리(영문판, 좁은 화면)를 메운다. */ .bf-title__text { width: fit-content; max-width: 100%; padding: 20px 0 24px; border-top: 1px solid var(--bf-hero-line); border-bottom: 1px solid var(--bf-hero-line); } .bf-title__art { display: block; width: min(100%, max(480px, 43.3vw), 647px); height: auto; } .bf-title--art .bf-title__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* 그림의 색 — 아트보드 그대로(tokens.css). 선은 1 단위, 화살표 줄은 2. */ .bf-title__ink { fill: var(--bf-fg); } .bf-title__accent { fill: var(--bf-cyan); } .bf-title__sub { fill: var(--bf-hero-sub); } .bf-title__rule { stroke: var(--bf-hero-line); stroke-width: 1; } .bf-title__arrow { stroke: var(--bf-cyan); stroke-width: 2; } /* 폭 제한은 도시로 넘어가지 않게 하는 것이다. 상한은 em 이다 — ch 로 두면 글꼴을 탄다(2026-09-04): 1ch 는 글자 폭이 아니라 숫자 0 의 폭이고, Pretendard 에서는 0.70em 인데 대체 글꼴에서는 0.56em 이라 12ch 가 986px 에서 789px 로 줄었다. 표제(≈7.8em)가 그 안에 들어가지 못해, 글꼴이 오기 전에는 두 줄로 접혔다가 오면 한 줄로 펴졌다 — 그 한 줄이 117px 이라 페이지가 통째로 뛰었다. 8.5em 은 지금 Pretendard 가 서는 폭 그대로이고(986px), 대체 글꼴의 표제도 여유 있게 담는다. 한글 표제가 ch 에서 데인 이야기는 아래에 있다. */ .bf-hero__h1--en { font-size: clamp(56px, 7.1vw, 104px); font-weight: 900; letter-spacing: var(--bf-track-display); line-height: 1.0; margin: 0; max-width: 8.5em; } /* 한글 표제는 두 줄이다(2026-09-04, 디자인 시안): 첫 줄이 '기관,', 둘째 줄이 '온체인 위에 서다'. 줄바꿈은 bf_hero_title 이 넣으므로 폭 상한은 두지 않는다 — 9ch 로 묶였던 시절에는 글자 아홉 자가 아니라 숫자 0 아홉 개의 폭(≈5em)이어서 엉뚱한 자리에서 접혔다. 둘째 줄은 104px에서 ≈880px, 1136px 열 안에 넉넉히 선다. 행간은 1 — 시안의 조판이 그만큼 붙어 있다. */ .bf-hero__h1--ko { font-size: clamp(56px, 7.1vw, 104px); font-weight: 900; letter-spacing: 0; line-height: 1.05; margin: 0; max-width: none; word-break: keep-all; } /* 행간은 여기서 못 박는다 — 짧은 두어 줄짜리 표제구다. 언어별 기본값(라틴 1.5 / 한글 1.7)에 맡기면 두 언어판의 같은 문장이 서로 다른 간격으로 앉는다. */ /* 표제 안의 한 낱말 — 화면에서 시안이 나오는 두 자리 중 하나다. 글자 굵기도 크기도 그대로다: 색만 바뀐다. */ .bf-hero__hl { color: var(--bf-cyan); } /* 마지막 띠의 제목도 같은 낱말에 이 클래스를 쓴다(2026-09-06) */ /* 'FROM ENTRY —→ TO EXECUTION' — 라틴 대문자에 넓은 자간. 한글이 들어올 자리가 아니므로 :lang(ko) 예외가 필요 없다. */ /* 크기와 간격은 아트보드의 비례다(2026-09-06, 사용자: 영문판을 한글판 벡터에 맞춰 달라). 재는 기준은 표제다: 아트보드의 표제는 한글 살 93.6 ≈ 130 단위이고, 그 안에서 화살표 줄은 14.15, 결론 줄은 20.8 단위다. 우리 표제는 104px 이므로 0.8 을 곱해 11.5 와 16.5 가 된다 — 예전에는 아트보드의 절대값(14·20)을 그대로 썼고, 그리면 표제가 작은 만큼 아랫글이 커 보인다. 행간은 1 로 못 박는다: 아트보드의 간격은 살과 살 사이이고, 글자에는 살 밖에 글꼴의 여백이 붙어 오기 때문이다 — 그 여백만큼 밀어낸 값이 아래의 margin 이다(표제 다음 17 → 2, 화살표 줄 다음 12.3 → 5). */ .bf-hero__track { display: flex; align-items: center; gap: 6px; margin-top: 2px; line-height: 1; font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bf-fg); } /* 선 하나와 삼각형 하나. 길이는 디자인의 비례를 따른다(선 76 : 머리 8, 표제 아래 작은 글자의 대문자 높이 기준). flex: none 이 없으면 좁은 화면에서 선이 먼저 줄어 화살표가 뭉개진다. */ .bf-hero__arrow { flex: none; position: relative; width: 61px; height: 2px; background: var(--bf-cyan); /* 머리가 선 밖으로 7px 나오므로, 다음 낱말까지의 10px 는 이 여백이 만든다(아트보드 12.5 × 0.8). */ margin-right: 11px; } .bf-hero__arrow::after { content: ''; position: absolute; right: -7px; top: 50%; border: 3.5px solid transparent; border-left: 7px solid var(--bf-cyan); transform: translateY(-50%); } /* 결론 한 줄. 표제보다 어둡지만 본문보다 밝다 — 아트보드의 회색 그대로다(2026-09-06, 전에는 전경색을 바탕 쪽으로 당긴 값). */ .bf-hero__claim { margin-top: 5px; font-size: 16.5px; font-weight: 400; line-height: 1.15; color: var(--bf-hero-sub); /* 아트보드의 회색, tokens.css */ } /* 표제 그림 아래 여백은 60 — 그림의 viewBox 가 아랫선 밑으로 10 을 더 갖고 있어 눈에는 70 으로 읽힌다(2026-09-06, 사용자: 조금 더). */ .bf-hero__cta { display: flex; gap: 16px; margin-top: 60px; justify-content: flex-start; } .bf-hero__venue { font-size: 17.5px; font-weight: 500; color: var(--bf-fg-muted); margin-top: 36px; font-variant-numeric: tabular-nums; } /* 조각은 통째로 움직인다 — 줄바꿈은 조각과 조각 사이에서만 일어난다. 히어로와 마지막 화면이 함께 쓰므로 이름에 자리를 넣지 않는다. */ .bf-metaPart { white-space: nowrap; color: var(--bf-fg); } /* --- 섹션 심(seam) — 진입 시 1회 발광하는 헤어라인 --------- */ .bf-seam { position: relative; height: 1px; background: var(--bf-rule); } .bf-seam svg { position: absolute; left: 0; top: -1px; width: 100%; height: 3px; overflow: visible; } /* --- 콘텐츠 섹션 패턴: 고정 인덱스 -------------------------- 모든 콘텐츠 섹션은 2열 그리드다. 왼쪽 열이 번호·라벨·제목·리드를 지고 화면에 붙어 있고, 오른쪽 열만 흐른다. 페이지를 관통하는 연속 수직 레일은 없다 — 열 자체가 구조다. 레일이 남는 곳은 프로그램의 시간 스파인 하나뿐이다(.bf-agenda). 근거: docs/concept/new-content-design (패턴 6b). */ .bf-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; } /* 섹션과 섹션 사이에는 선을 긋지 않는다(2026-09-03). 가르는 일은 위아래 여백이 한다 — 선까지 있으면 한 페이지가 아니라 쌓아 올린 칸들로 읽힌다. 올해의 것은 선이 아니라 바탕 한 겹으로 가른다 (.bf-section--accent). */ /* 올해의 것만 서는 띠 — 페이지에서 한 겹 떠 있다(2026-09-03). 새 색이 아니라 아주르를 묽게 깐 것이고, 강조 카드가 쓰는 그 색이다. 20%인 이유는 잰 값이다: 12%는 바탕과의 밝기 차이가 3.8 로 카드 표면만큼도 보이지 않고, 32%는 설명 글이 5.81 까지 내려간다. 20%에서 차이는 6.8, 설명 글은 6.53 이다. 띠는 폭을 다 쓴다 — 안쪽만 칠하면 띠가 아니라 상자가 된다. */ .bf-section--accent { background: color-mix(in srgb, var(--bf-600) 20%, transparent); } /* 아직 비어 있는 자리. 내용이 들어오면 이 줄을 지운다 — 그때는 높이를 내용이 정한다. */ .bf-body--placeholder { min-height: 260px; } .bf-section__inner { max-width: 1200px; margin: 0 auto; padding: 88px 32px 96px; display: grid; grid-template-columns: 300px 1fr; gap: 80px; align-items: start; /* 필수: 늘어난 자식은 sticky가 되지 않는다 */ } /* 그리드 자식의 자동 최소 크기는 내용의 min-content다. 넓은 표가 그 안에 있으면 열이 컨테이너보다 넓게 벌어져 페이지가 가로로 밀린다 — 0으로 눌러야 안에서 스크롤된다. */ .bf-section__inner > * { min-width: 0; } /* 넓은 섹션 — 인덱스가 위로 올라가고 본문이 컨테이너 폭을 다 쓴다. 비교표처럼 좁은 열에 들어갈 수 없는 것에만 쓴다. */ .bf-section--wide .bf-section__inner { grid-template-columns: 1fr; gap: 36px; } .bf-section--wide .bf-index { position: static; } .bf-index { position: sticky; top: 88px; } /* 64px 헤더 + 24px */ .bf-index__meta { display: flex; align-items: baseline; gap: 14px; } .bf-index__num { font-size: 44px; font-weight: 800; line-height: 1; color: var(--bf-700); /* 물러난 색 — 내용이 아니라 구조다 */ font-variant-numeric: tabular-nums; } .bf-index__label { font-size: var(--bf-size-body); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; /* 라틴 전용 */ color: var(--bf-fg-muted); } .bf-index__label:lang(ko) { letter-spacing: 0; text-transform: none; } .bf-index__title { font-size: 36px; font-weight: 800; letter-spacing: var(--bf-track-display); line-height: 1.15; margin: 24px 0 0; word-break: keep-all; } :lang(ko) .bf-index__title { letter-spacing: 0; line-height: 1.3; } .bf-index__lead { font-size: 15.5px; line-height: 1.6; color: var(--bf-fg-muted); margin: 18px 0 0; text-wrap: pretty; word-break: keep-all; } :lang(ko) .bf-index__lead { line-height: 1.7; } /* --- 섹션 머리 (메인 페이지) -------------------------------- 2026-08-18: 번호가 사라지고 머리가 가운데로 섰다. 왼쪽에 붙어 따라오던 인덱스(.bf-index)는 후원 페이지에만 남는다 — 그 페이지는 손대지 않기로 했으므로 옛 규칙을 그대로 둔다. 가운데 정렬은 머리까지다. 그 아래 본문은 컨테이너 폭을 다 쓴다. */ .bf-section--stack .bf-section__inner { grid-template-columns: 1fr; gap: 0; } .bf-head { text-align: center; margin-bottom: 56px; } /* 머리글만 읽는 폭으로 묶는다. 한 줄이 1136px 이면 눈이 되돌아올 자리를 잃는다. */ .bf-head__title { font-size: 64px; font-weight: 800; letter-spacing: var(--bf-track-display); line-height: 1.15; margin: 0 auto; max-width: 820px; word-break: keep-all; } :lang(ko) .bf-head__title { letter-spacing: 0; line-height: 1.3; } .bf-head__lead { font-size: 20px; line-height: 1.6; color: var(--bf-fg-muted); margin: 16px auto 0; max-width: 640px; text-wrap: pretty; word-break: keep-all; } :lang(ko) .bf-head__lead { line-height: 1.7; } /* 본문은 폭을 다 쓴다 — 읽는 폭으로 묶어 두던 제한을 푼다. */ .bf-section--stack .bf-body .bf-lead { max-width: none; } /* 다만 머리 바로 아래, 본문 맨 앞뒤에 홀로 선 리드 문단은 다시 가운데로 묶는다(2026-09-04) — 가운데 선 .bf-head 를 그대로 잇는다. 자식 결합자(>)로 좁혀 카드나 소제목 옆에 딸린 .bf-lead (변화의 지점, 장소 리드)는 건드리지 않는다 — 그것들은 왼쪽 정렬된 이웃과 짝이라 혼자 가운데로 옮기면 어긋난다. */ .bf-section--stack .bf-body > .bf-lead { text-align: center; margin: 0 auto; max-width: 740px; } /* 다만 신청 서식은 늘리지 않는다. 입력칸이 560px 을 넘으면 글자를 따라 눈이 가로로 끌려다녀 오히려 쓰기 어렵다 — 대신 가운데로 옮겨 가운데 선 머리와 축을 맞춘다. */ .bf-section--stack .bf-body .bf-form { margin-inline: auto; } /* --- 섹션 공통 --------------------------------------------- */ .bf-h2 { font-size: 44px; font-weight: 800; letter-spacing: var(--bf-track-display); line-height: 1.12; margin: 0; word-break: keep-all; } :lang(ko) .bf-h2 { letter-spacing: 0; } /* --- 포지셔닝 ---------------------------------------------- */ .bf-pos__body { font-size: 17px; line-height: 1.6; color: var(--bf-fg-muted); margin: 20px 0 0; max-width: 620px; text-wrap: pretty; word-break: keep-all; } .bf-pos__axis { width: 100%; height: auto; display: block; margin: 4px 0 20px; } /* 참가 기관 유형 — 100% 막대. .bf-who 는 막대와 수치를 한 덩어리로 묶어 함께 떠오르게 하는 상자다(등장 대상). 제 여백은 없다 — 위의 소제목과의 사이는 막대가 제 margin 으로 잡는다. 예전 섹션의 __head/__h3/__cap 은 쓰이지 않아 걷었다(2026-09-04). */ /* 막대와 그 아래 수치는 같은 폭 배분을 쓴다 — 두 줄의 flex 설정이 똑같아야 구간과 수치가 어긋나지 않는다. 폭이 곧 값이므로 수치 위에 장식 선은 없다. */ .bf-who__bar { display: flex; height: 22px; border-radius: var(--bf-radius-1); overflow: hidden; margin-top: 20px; gap: 2px; } .bf-who__legend { display: flex; gap: 2px; margin-top: 16px; } .bf-who__cell { width: var(--w); min-width: 0; padding-right: 14px; } .bf-who__val { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; } .bf-who__lbl { font-size: 16px; font-weight: 500; color: var(--bf-fg-muted); margin-top: 6px; text-wrap: pretty; word-break: keep-all; } /* --- 프로그램 시간 스파인 ----------------------------------- 사이트에서 수직선이 남는 유일한 자리. 왼쪽 거터의 오른쪽 테두리가 끊기지 않는 레일이 되고, 시각은 거터 안에, 점은 레일 위에, 세션은 그 오른쪽에 온다. */ /* 거터는 시각 한 줄에 딱 맞는 너비다 — 날짜가 아니라 시각이 서므로 150px는 왼쪽에 빈 자리를 남겼다 */ .bf-agenda__row { display: grid; grid-template-columns: 64px 1fr; } /* 시각과 점과 설명이 한 높이에서 만난다 — 셋 다 줄의 세로 가운데다 */ .bf-agenda__rail { position: relative; border-right: 1px solid var(--bf-700); text-align: left; padding-right: 12px; display: flex; align-items: center; } /* 첫 줄 위에는 선을 긋지 않는다 — 제목이 이미 시작을 알린다 */ .bf-agenda__row:first-child .bf-row__body { border-top: 0; } /* --- 프로그램(어젠다) 행 ----------------------------------- */ .bf-row__time { font-size: 14px; font-variant-numeric: tabular-nums; padding: 0; } .bf-row__time--major { font-weight: 600; color: var(--bf-fg); } .bf-row__time--minor { font-weight: 500; color: var(--bf-fg-muted); } /* faint 금지 — 대비 미달 */ /* 두 점은 크기가 같고 색으로만 갈린다. 작은 점은 지름이 홀수 픽셀도 되지 못해 레일 위에서 반 픽셀씩 어긋나 보였다 — 지름이 작을수록 그 반 픽셀이 크게 보인다. 위계는 색과 글자 굵기가 이미 지고 있다. -5px = 지름의 절반(4.5) + 레일 두께의 절반(0.5). */ .bf-row__dot { position: absolute; border-radius: 50%; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; right: -5px; } .bf-row__dot--major { background: var(--bf-100); } .bf-row__dot--minor { background: var(--bf-600); } .bf-row__body { border-top: var(--bf-border); padding: 18px 20px 18px 32px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; transition: background var(--bf-dur-1) var(--bf-ease); } .bf-row__body:hover { background: var(--bf-surface); } .bf-row__title { font-size: 17px; line-height: 1.4; word-break: keep-all; } .bf-row__title--major { font-weight: 600; color: var(--bf-fg); } .bf-row__title--minor { font-weight: 500; color: var(--bf-fg-muted); } .bf-row__note { font-size: 13.5px; line-height: 1.55; color: var(--bf-fg-muted); margin-top: 4px; max-width: 620px; text-wrap: pretty; word-break: keep-all; } .bf-chip { font-size: 12.5px; font-weight: 500; color: var(--bf-fg-muted); background: var(--bf-surface); border: var(--bf-border); border-radius: var(--bf-radius-1); padding: 3px 9px; white-space: nowrap; } /* --- 연사 -------------------------------------------------- 2026-08-18: 카드가 사라졌다. 남는 것은 원과 그 아래 두 줄뿐이고, 색 필터도 걷었다 — 얼굴은 실제 피부색으로 선다. 두 줄의 띠가 왼쪽으로 흐르고, 가리키면 그 줄만 멈춘다. */ .bf-section--rails .bf-section__inner { padding-bottom: 36px; } /* 띠는 사이트 폭 안에 머문다(2026-08-18) — 창 끝까지 늘리지 않는다. 폭이 제목과 같은 자리에서 시작하고 끝나야 섹션이 한 덩어리로 읽힌다. 양 끝의 녹아 사라짐은 .bf-rail 의 마스크가 맡는다. */ .bf-rails { --bf-rail-photo: 130px; --bf-rail-item: 168px; --bf-rail-gap: 28px; max-width: 1200px; margin-inline: auto; padding-inline: 32px; display: flex; flex-direction: column; gap: 26px; padding-bottom: 92px; } /* 양 끝은 마스크로 녹는다 — 반쯤 잘린 칸이 가장자리에서 갑자기 끝나면 띠가 아니라 사고로 보인다. 곧은 기울기는 밝은 것을 늦게 놓아 준다. 흰 판이 걸리면 로고가 끝난 뒤의 빈 여백이 흰 띠로 남는다 — 앞을 가파르게 눌러 그것부터 지운다. 폭은 담긴 것이 정한다(--bf-rail-fade): 배경이 비치는 연사 원은 좁아도 되지만, 흰 판은 판 하나가 삼켜질 만큼 필요하다. 세로 여백은 판 밖으로 나가는 것(연사 원의 테두리) 자리다 — 비우지 않으면 첫 줄의 윗변이 잘린다. */ .bf-rail { --bf-rail-fade: 2.5%; position: relative; overflow: hidden; padding-block: var(--bf-rail-bleed, 4px); -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .45) calc(var(--bf-rail-fade) * .3), rgba(0, 0, 0, .85) calc(var(--bf-rail-fade) * .62), #000 var(--bf-rail-fade), #000 calc(100% - var(--bf-rail-fade)), rgba(0, 0, 0, .85) calc(100% - var(--bf-rail-fade) * .62), rgba(0, 0, 0, .45) calc(100% - var(--bf-rail-fade) * .3), transparent 100%); mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .45) calc(var(--bf-rail-fade) * .3), rgba(0, 0, 0, .85) calc(var(--bf-rail-fade) * .62), #000 var(--bf-rail-fade), #000 calc(100% - var(--bf-rail-fade)), rgba(0, 0, 0, .85) calc(100% - var(--bf-rail-fade) * .62), rgba(0, 0, 0, .45) calc(100% - var(--bf-rail-fade) * .3), transparent 100%); } /* 흰 판은 판 하나가 통째로 삼켜져야 흰 띠가 남지 않는다. */ .bf-rails--logos .bf-rail { --bf-rail-fade: 8%; } .bf-rail__track { display: flex; width: max-content; animation: bf-rail var(--bf-rail-dur, 80s) linear infinite; } /* 2026-08-18: 한 덩이의 줄들은 한 판이다 — 함께 서고 함께 밀린다. 미는 동안과 미끄러지는 동안은 클래스가 세운다 — 손가락에는 가리킴이 없기 때문이다. */ .bf-rails.is-dragging .bf-rail__track { animation-play-state: paused; /* 끄는 동안 합성 층을 세워 둔다 — 빠른 손짓에서 층을 그때그때 다시 세우면 떨린다. 늘 켜 두지는 않는다: 층은 GPU 메모리다. */ will-change: translate; } /* 가리켜서 서는 것은 진짜 포인터가 있는 장치에게만 준다. 터치스크린에서는 :hover 가 한 번 붙으면 다른 곳을 누를 때까지 떨어지지 않는다 — 한 번 건드린 띠가 영영 멈춰 있게 된다. 손가락과 마우스를 함께 쓰는 노트북은 이 질의에 '있다'고 답하므로 그것만으로는 모자란다. 그래서 손가락이 한 번이라도 닿은 덩이에는 스크립트가 .is-touch 를 붙이고, 그때부터 가리킴은 세우지 않는다. */ @media (hover: hover) and (pointer: fine) { .bf-rails:not(.is-touch):hover .bf-rail__track { animation-play-state: paused; } } /* 세로 스크롤은 페이지에 주고 가로만 가져온다 — 이 한 줄이 없으면 손가락으로 띠를 밀 때 브라우저가 먼저 페이지를 움직여 버린다. */ .bf-rails { touch-action: pan-y; cursor: grab; } .bf-rails.is-dragging { cursor: grabbing; } /* 미는 동안 글자가 잡히면 끌기가 글 선택으로 새어 나간다 */ .bf-rails.is-dragging, .bf-rails.is-dragging * { user-select: none; } /* 초상과 로고는 그 자체가 끌 손잡이다 — 브라우저의 그림 끌기를 끈다 */ .bf-rail img { -webkit-user-drag: none; user-select: none; } .bf-rail__group { display: flex; } /* 지그재그 — 어긋남이 줄마다 쌓인다: 0, 35%, 70% … 줄들이 같은 속도로 함께 움직이므로 어긋나 있지 않으면 격자처럼 뻣뻣해 보인다. 절반이 아니라 35%인 이유는 세 줄일 때다 — 절반씩 주면 셋째 줄이 100%, 곧 제자리가 되어 첫 줄과 겹친다. 왼쪽으로만 당긴다: 오른쪽으로 밀면 줄의 머리가 빈자리로 드러난다. */ .bf-rail__track { margin-left: calc((var(--bf-rail-item) + var(--bf-rail-gap)) * -0.35 * var(--bf-rail-i, 0)); } /* 미는 거리는 딱 한 벌 — 트랙이 몇 벌이든 -100%/벌수 다. */ @keyframes bf-rail { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-100% / var(--bf-rail-copies, 2)), 0, 0); } } /* 칸 사이는 gap 이 아니라 각 칸의 오른쪽 여백이다. gap 이면 두 묶음 사이만 간격이 하나 모자라 미는 거리가 맞지 않는다. */ .bf-rail__group > * { flex: 0 0 auto; margin-right: var(--bf-rail-gap); } .bf-speaker { width: var(--bf-rail-item); text-align: center; } /* 판의 색이 원 뒤에 남아 사진이 없을 때의 바닥이 된다. 테두리는 사이트의 1px 구분선이다 — 어두운 배경의 초상이 페이지에 녹아 없어지지 않게 하되, 아주르로 신호를 보내지는 않는다. */ .bf-speaker__photo { position: relative; width: var(--bf-rail-photo); height: var(--bf-rail-photo); margin: 0 auto; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--bf-600) 10%, var(--bf-surface-hi)); border: var(--bf-border); } .bf-speaker__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bf-speaker__initials { /* 사진 없는 연사의 폴백 */ position: absolute; inset: 0; display: grid; place-content: center; font-size: 34px; font-weight: 800; color: var(--bf-fg-faint); } .bf-speaker__name { font-size: 15px; font-weight: 700; margin-top: 13px; word-break: keep-all; } /* 가운뎃점은 직함과 같은 톤이다 — 구분자가 글보다 튀면 안 된다 */ .bf-speaker__meta { font-size: 12.5px; margin-top: 6px; line-height: 1.45; word-break: keep-all; color: var(--bf-fg-muted); } .bf-speaker__role { color: var(--bf-fg-muted); } .bf-speaker__org { font-weight: 600; color: var(--bf-200); } /* 아주르 소속 — 기관 행사라는 신호 */ /* 로고 띠 — 뼈대는 연사와 같고 판만 로고의 것이다. 판 크기는 그대로 176x78 이다: 남의 마크를 줄이면 읽히지 않는다. 판 밖으로 나가는 것이 없으므로 세로 여백은 두지 않는다. */ .bf-rails--logos { --bf-rail-item: 176px; --bf-rail-gap: 16px; --bf-rail-bleed: 0px; gap: 16px; padding-bottom: 44px; } .bf-rails--logos:last-child { padding-bottom: 92px; } /* 줄 수가 다른 두 벌이 함께 찍혀 있다 — 화면 폭이 하나를 고른다. 서버는 창 폭을 모르고, 스크립트로 다시 나누면 스크립트 없는 화면에서 띠가 무너지므로 CSS 가 고르게 한다. */ .bf-rails--narrow { display: none; } /* 띠 안에서는 로고가 없는 칸도 같은 크기여야 한다 — 칸마다 폭이 다르면 한 벌의 폭을 셀 수 없어 벌 수 계산이 어긋난다. */ .bf-rails .bf-rail__group > .bf-mark { width: var(--bf-rail-item); height: 78px; display: grid; place-items: center; text-align: center; } /* 묶음 이름도 섹션 머리와 같은 축에 선다 — 가운데다 */ /* 움직임을 끈 사람에게는 띠가 그냥 멈춘 줄이 된다 — 화면 밖 사람은 영영 못 본다. 손으로 밀 수 있게 열어 주고 뒤 묶음은 치운다. 애니메이션 자체는 위쪽 전역 규칙이 이미 끈다. */ @media (prefers-reduced-motion: reduce) { .bf-rail { overflow-x: auto; } .bf-rail__group--dup { display: none; } } /* --- 테마: 네 개의 축 -------------------------------------- 축은 카드가 아니라 위쪽 실선으로 구분한다 — 컨슈머 카드 UI를 쓰지 않기 위해서다. */ .bf-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 48px; margin-top: 48px; } .bf-pillar { border-top: 2px solid var(--bf-700); padding-top: 18px; } .bf-pillar__no { font-size: 12px; font-weight: 600; letter-spacing: var(--bf-track-eyebrow); color: var(--bf-fg-faint); font-variant-numeric: tabular-nums; } .bf-pillar__title { font-size: 22px; font-weight: 600; margin: 10px 0 0; word-break: keep-all; } .bf-pillar__body { font-size: 15px; line-height: 1.65; color: var(--bf-fg-muted); margin: 10px 0 0; text-wrap: pretty; word-break: keep-all; } /* --- 기록: 숫자 ------------------------------------------- */ .bf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 48px; } .bf-stat { border-top: 2px solid var(--bf-400); padding-top: 14px; } .bf-stat__value { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .bf-stat__unit { font-size: 14px; font-weight: 600; color: var(--bf-fg-muted); margin-left: 8px; letter-spacing: 0; } .bf-stat__label { font-size: 13.5px; font-weight: 500; color: var(--bf-fg-muted); margin-top: 8px; text-wrap: pretty; word-break: keep-all; } /* --- 지표 카드 ---------------------------------------------- 덱에서 면으로 구분되는 지표. 깊이는 표면 단계와 헤어라인으로만 내고, 호버는 빛의 방향만 바꾼다 — 카드가 뜨지 않는다. */ .bf-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* 카드 안의 긴 낱말이 열을 벌리지 못하게 한다 */ .bf-cards > * { min-width: 0; } /* 아이콘 — 카드 맨 위에 하나. 선 굵기와 색은 글자를 따라간다. 내용이 이미 긴 카드에는 붙이지 않는다. */ .bf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .bf-ico { display: block; width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bf-card__ico { color: var(--bf-300); margin-bottom: 14px; } .bf-card--accent .bf-card__ico { color: var(--bf-200); } .bf-cards--2 { grid-template-columns: repeat(2, 1fr); gap: 20px; } .bf-cards--3 { grid-template-columns: repeat(3, 1fr); } /* 카드는 면도 테두리도 갖지 않는다(2026-09-04, 사용자 지시). 남는 것은 안쪽 여백과 글자뿐이다 — 카드를 가르는 일은 격자의 간격이 한다. 이전에는 표면 한 단(--bf-surface-hi)과 헤어라인, 그리고 비스듬히 깔리는 빛(--bf-card-lit)이 있었고 강조 카드는 가리키면 네 가지가 함께 밝아졌다 — 모두 걷었다. 되살리려면 git 을 볼 것. 가리킴에 답하는 카드는 이제 하나도 없다: 전부
과
이지 링크도 단추도 아니다. */ .bf-card { padding: 20px 22px 22px; } .bf-card--panel { padding: 24px 26px; } /* 강조 카드에 남은 것은 두 가지다: 안쪽이 가운데로 모이고, 아이콘이 램프 한 단 위로 올라간다. 면이 없으니 이 둘이 유일한 차이다. */ .bf-card--accent { text-align: center; } .bf-card--accent .bf-card__ico { margin-left: auto; margin-right: auto; } /* 지표 카드의 안쪽 */ .bf-card__value { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; /* keep-all 은 낱말 안에서 끊지 않는다 — 칸보다 넓은 낱말 하나는 그대로 넘친다. anywhere 를 덧대 그런 낱말만은 끊게 한다(2026-09-06): 보기 좋지는 않지만 페이지를 밀지는 않는다. */ .bf-card__value { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; word-break: keep-all; overflow-wrap: anywhere; } } :lang(ko) .bf-card__value { letter-spacing: 0; } .bf-card__label { font-size: 13.5px; font-weight: 500; color: var(--bf-fg-muted); margin-top: 10px; text-wrap: pretty; word-break: keep-all; } /* 넷씩 서는 지표 카드의 라벨은 12px다. 카드 안쪽 폭이 131px이고 'Korea Blockchain Week'는 13.5px에서 143px이라 두 줄이 되었다 — 12px에서 127px로 한 줄에 들어간다. */ .bf-cards .bf-card__label { font-size: 12px; } /* 낱말이 값으로 오는 카드 — 숫자가 아니라 이름이므로 30px에서는 카드 밖으로 나간다(Blockmedia 162px, Bipartisan 141px). 낱말을 자르지 않기 위해 크기를 줄인다. */ /* 넓이와 상관없이 줄인다(2026-09-06). 901px 위에서만 줄이던 시절에는 휴대폰의 'National Assembly'가 42px 그대로 서서 카드 밖으로 75px 나갔고, 그만큼 페이지 전체가 오른쪽으로 밀렸다(사용자). */ .bf-card__value--word { font-size: 25px; } /* 지표 카드의 라벨은 카드 바닥에 선다. 값이 한 줄이든 두 줄이든, 글자가 25px이든 30px이든 라벨의 아랫줄이 한 줄에 놓인다 — 값의 높이마다 따로 보정하지 않아도 무리가 가지런하다. */ .bf-cards .bf-card { display: flex; flex-direction: column; } .bf-cards .bf-card__label { margin-top: auto; padding-top: 12px; } /* BLOCKFESTA 섹션의 지표 카드만 한 단 크다(2026-09-04, 사용자 지시) — 아이콘·숫자·라벨과 그 사이 간격을 손으로 잡은 값이다. 면과 테두리가 사라진 뒤 이 넷은 섹션에서 유일하게 서 있는 형상이므로 본문과 같은 크기로는 무게가 모자란다. 카드의 바깥 여백은 그대로다: 칸을 벌리는 일은 격자의 간격이 한다. .bf-cards 의 두 라벨 규칙과 특정도가 같으므로 반드시 그 아래 적는다. */ .bf-cards--lg .bf-card__ico { width: 25px; height: 25px; margin-bottom: 16px; } .bf-cards--lg .bf-card__value { font-size: 42px; } .bf-cards--lg .bf-card__label { font-size: 16px; padding-top: 16px; } .bf-cards--lg .bf-card__value--word { font-size: 30px; } /* 901–1100px는 인덱스 열(300px)이 그대로 있는데 본문만 좁아지는 구간이다 — 여기서 넷씩 세우면 카드 안쪽이 87px까지 줄어 어떤 값도 들어가지 않는다. 둘씩 세운다. */ @media (min-width: 901px) and (max-width: 1100px) { .bf-cards { grid-template-columns: repeat(2, 1fr); } } /* 이름 앞의 표식 — inline-flex라야 카드의 text-align을 그대로 따른다. 좁은 화면에서 카드가 가운데 정렬될 때 표식도 같이 가운데로 간다. */ .bf-card__labelIn { display: inline-flex; align-items: center; gap: 7px; } .bf-card__labelIco { width: 15px; height: 15px; color: var(--bf-300); } /* 글 카드의 안쪽 — 번호·제목·본문 */ .bf-card__no { font-size: 12px; font-weight: 600; letter-spacing: var(--bf-track-eyebrow); color: var(--bf-fg-faint); font-variant-numeric: tabular-nums; } .bf-card__title { font-size: 20px; font-weight: 600; margin: 10px 0 0; word-break: keep-all; } .bf-card__title:first-child { margin-top: 0; } /* 번호 없는 카드 */ .bf-card__body { font-size: 15px; line-height: 1.65; color: var(--bf-fg-muted); margin: 10px 0 0; text-wrap: pretty; word-break: keep-all; } :lang(ko) .bf-card__body { line-height: 1.7; } /* --- 기록: 미디어 도달력 ----------------------------------- 막대는 비교를 위한 것이지 장식이 아니다. 블록미디어 행만 아주르로 올린다. */ .bf-media { margin-top: 64px; } .bf-media__rows { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; } .bf-media__row { display: grid; grid-template-columns: 150px 1fr 64px; gap: 16px; align-items: center; } .bf-media__name { font-size: 14px; font-weight: 500; color: var(--bf-fg-muted); } /* 트랙은 카드 면 위에 있으므로 표면을 한 단계 올려야 보인다 */ .bf-media__track { height: 10px; background: var(--bf-surface-hi); border-radius: var(--bf-radius-1); overflow: hidden; } .bf-media__bar { height: 100%; background: var(--bf-800); } .bf-media__val { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--bf-fg-muted); text-align: right; } .bf-media__row.is-self .bf-media__name { color: var(--bf-fg); font-weight: 700; } .bf-media__row.is-self .bf-media__bar { background: var(--bf-400); } .bf-media__row.is-self .bf-media__val { color: var(--bf-fg); font-weight: 600; } /* 출처 — 그림 아래 캡션 */ .bf-media__source { font-size: 12.5px; color: var(--bf-fg-faint); margin: 16px 0 0; word-break: keep-all; } /* 채널 도달 — 수치는 카드로, 근거와 결론은 본문 글로. 결론 한 문장만 아주르로 올린다(크기는 본문 그대로 — 색만 다르다). .bf-lead가 파일 뒤쪽에 있으므로 여기서는 두 클래스를 함께 걸어 특정도를 올린다. 그러지 않으면 색과 여백을 .bf-lead가 덮는다. */ .bf-lead.bf-reach__text { margin-top: 48px; border-top: 1px solid var(--bf-rule); padding-top: 32px; max-width: none; } .bf-lead.bf-reach__strong { max-width: none; } /* --- 기록: KBW 주간에서의 위치 ----------------------------- */ .bf-week { margin-top: 56px; } .bf-week__list { list-style: none; margin: 20px 0 0; padding: 0; } .bf-week__item { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 16px; padding: 12px 0; border-top: var(--bf-border); font-size: 14.5px; color: var(--bf-fg-muted); } .bf-week__date { font-variant-numeric: tabular-nums; } .bf-week__note { color: var(--bf-fg-faint); font-weight: 400; word-break: keep-all; } .bf-week__item.is-featured { color: var(--bf-fg); font-weight: 600; } .bf-week__item.is-featured .bf-week__event { color: var(--bf-100); } /* --- 파트너 로고 스트립 ------------------------------------ 등급마다 크기가 실제로 달라야 한다 — 최상위가 Silver 크기로 렌더링되면 계약 위반이다. 로고는 품질이 제각각이라 중립 컨테이너에 넣고 광학 크기를 맞춘다. */ .bf-strip { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; align-items: center; } /* --- 2026 연사 카드 ------------------------------------------- 2026-09-06, 디자이너 시안(docs/spikers-img)을 그대로 옮겼다. 카드가 가로로 눕는다: 왼쪽에 번호·이름·직함·소속을 곁줄 하나로 묶고, 오른쪽에 누끼 초상이 카드 모서리까지 간다. 한 줄에 둘. 비례는 시안에서 잰 값이다 — 카드 604×277(2.18:1), 왼쪽 여백 37, 곁줄에서 글까지 25, 사진칸 47%. 모서리는 시안대로 각지다. 높이는 비율이 정하되 글이 더 길면 카드가 자란다: 영문 이름은 두 줄이 되는 일이 있다. */ /* 줄마다 높이를 같게 한다(grid-auto-rows: 1fr, 2026-09-06). 이름이 두 줄이 되는 카드가 있으면 그 줄만 키가 커졌고, 곁줄은 카드 높이의 66% 이므로 줄마다 길이가 달라졌다. 모두 가장 큰 줄에 맞추면 카드도 곁줄도 한 길이다. */ .bf-lineup { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 12px; margin-top: 40px; } .bf-lineup > * { min-width: 0; } .bf-lineup__item { /* 자르지 않는다. overflow: hidden 은 계산된 최소 높이를 0 으로 만들어(CSS 스펙의 automatic minimum size), 글이 비율보다 길면 카드가 자라는 대신 아랫줄을 잘라 먹었다(2026-09-06, 사용자: 몇몇 폭에서 소속이 반만 보인다). 사진은 제 상자가 따로 자르므로 여기서 가릴 일이 없고, 모서리도 각진 채로 둔다. */ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 47%; align-items: center; aspect-ratio: 604 / 277; /* 섹션의 아주르 띠보다 한 겹 밝다 — 시안에서도 카드는 바탕보다 딱 그만큼만 밝다. 새 색이 아니라 램프에서 섞은 값이다. */ background: color-mix(in srgb, var(--bf-700) 22%, var(--bf-surface)); /* 글자 크기가 카드 폭을 따른다 — 끊는 자리를 여럿 두는 대신 칸 질의 하나로 잇는다. 이름은 세 글자와 열세 글자가 같은 칸에 들어가야 하므로 언어마다 기울기가 다르다. */ container-type: inline-size; /* 누를 것이 없다 — 글자 위에서도 화살표를 지킨다(2026-08-19) */ cursor: default; } /* 곁줄은 글 상자의 테두리가 아니라 카드의 것이다(2026-09-06, 사용자: 줄 길이가 카드마다 다르다). 테두리였을 때는 길이가 글의 양을 따라서, 이름이 두 줄인 카드에서 훌씩 길어졌다. 시안에서 줄은 카드 높이의 66%를 가운데에서 차지한다(y 47..229 / 277). */ .bf-lineup__item { --bf-lineup-x: 34px; --bf-lineup-gap: 25px; } .bf-lineup__item::before { content: ''; position: absolute; left: var(--bf-lineup-x); top: 17%; width: 2px; height: 66%; background: var(--bf-300); } .bf-lineup__text { margin-left: calc(var(--bf-lineup-x) + var(--bf-lineup-gap)); } /* 이름이 카드의 무게다 — 시안에서 이름 하나가 카드 높이의 1/6을 차지한다. 한글 세 글자와 영문 열세 글자를 같은 칸에 넣으려면 기울기가 달라야 한다: 영문은 그래도 두 줄이 되는 일이 있다. */ .bf-lineup__name { font-size: clamp(24px, 11cqw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; word-break: keep-all; margin-bottom: 10px; } .bf-lineup__name:lang(en) { font-size: clamp(19px, 6.2cqw, 34px); } /* 직함만 아주르다 — 이름과 소속은 흰 글자이므로 색 하나로 셋이 갈린다. --bf-300 은 링크의 색이지만 여기서는 밑줄도 손 모양도 없다. */ .bf-lineup__role { font-size: clamp(13px, 3.6cqw, 20px); line-height: 1.4; color: var(--bf-300); word-break: keep-all; } .bf-lineup__org { font-size: clamp(13px, 3.6cqw, 20px); line-height: 1.4; color: var(--bf-fg); word-break: keep-all; } .bf-lineup__role:lang(en), .bf-lineup__org:lang(en) { font-size: clamp(12.5px, 3.1cqw, 17px); } /* 덧말(전 직함) — 소속보다 한 단 물러선다: 색은 흐리게, 크기는 작게 */ .bf-lineup__note { font-size: clamp(12.5px, 2.7cqw, 15px); line-height: 1.4; margin-top: 4px; color: var(--bf-fg-muted); word-break: keep-all; } /* 초상은 카드의 오른쪽 끝까지 간다 — 위아래 모서리도 자른다. 원본은 배경 없는 누끼이고 세로로 길므로 폭에 맞춰 채우고 아래를 자른다(object-position 위 맞춤): 머리는 늘 위에 선다. */ .bf-lineup__photo { position: relative; align-self: stretch; overflow: hidden; display: grid; place-items: center; } .bf-lineup__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; } /* 같은 그림이 두 겹이다: 아래는 제 색, 위는 남색 듀오톤(필터는 speakers.php 안에 있다). 가리키면 위 겹만 사라진다. 두 겹인 까닭은 filter: url() 이 none 으로 건너가지 못해서다 — 오가는 것은 불투명도뿐이고, 그래서 부드럽다. 500ms 는 카드 강조와 같은 값이다: 색이 '켜지는' 것이 아니라 '돌아오는' 것으로 읽히려면 200ms 로는 짧다. */ .bf-lineup__img--duo { filter: url(#bf-duotone); transition: opacity 500ms var(--bf-ease); } /* 가리킴은 마우스에게만 있다 — 손가락에서는 :hover 가 탭 뒤에 눌어붙어 한 번 만진 카드만 영영 컬러로 남는다(띠에서 겪은 그것이다). 카드는 여전히 링크도 단추도 아니다: 색이 돌아올 뿐 눌리지 않는다. */ @media (hover: hover) and (pointer: fine) { .bf-lineup__item:hover .bf-lineup__img--duo { opacity: 0; } } .bf-lineup__initials { font-size: 38px; font-weight: 800; color: var(--bf-fg-faint); } /* 자리 카드 — 확정된 카드와 혼동되지 않게 한 걸음 물러나 있다: 면을 비우고 테두리를 점선으로 둔다. 이름 아래 두 줄은 글자가 아니라 자리 표시 막대다. 반짝이는 뼈대로 만들지 않는다 — 그것은 '불러오는 중'이라는 뜻이고, 여기는 '아직 정해지지 않았다'는 뜻이다. */ .bf-lineup__item--tba { background: transparent; border: 1px dashed var(--bf-hairline); } .bf-lineup__item--tba .bf-lineup__photo { background: color-mix(in srgb, var(--bf-800) 12%, var(--bf-surface)); } /* 글리프는 작게 둔다. 크게 늘리면 선 굵기까지 함께 자라 스프라이트의 다른 아이콘과 굵기가 어긋난다. */ .bf-lineup__glyph { width: 34px; height: 34px; color: var(--bf-fg-faint); opacity: .65; } .bf-lineup__item--tba .bf-lineup__name { color: var(--bf-fg-faint); font-weight: 600; } .bf-lineup__bar { height: 9px; margin-top: 8px; border-radius: var(--bf-radius-1); background: var(--bf-surface-hi); max-width: 78%; } .bf-lineup__bar--short { max-width: 52%; } /* 2026 파트너 — 섹션 하나가 통째로 흰 면이다(2026-09-04, 주최 측 요청). 위의 .bf-strip 은 스폰서십 페이지가 계속 쓰므로 그대로 둔다. 흰 타일을 칸마다 깔던 방식도, 컨테이너 안에서 끝나는 흰 판도 거쳐 여기까지 왔다: 모양이 제각각인 마크를 같은 크기 상자에 담으면 흰 상자의 격자가 먼저 보였고, 판을 하나로 합쳐도 어두운 여백이 액자로 남아 로고 벽이 상자 안에 갇혀 보였다. 이 섹션만 밝다. 올해를 가르던 아주르 띠(bf-section--accent)는 여기서 쓰지 않는다 — 흰 면이 그보다 훨씬 큰 구분이다. */ .bf-section--plate { background: var(--bf-plate); } /* 밝은 면 위의 글자는 방향이 뒤집힌다. 제목은 바탕색 그대로(19:1), 리드는 흰쪽으로 30% 당긴 값이다 — 흰 바탕에서 7.0:1. */ .bf-section--plate .bf-head__title { color: var(--bf-bg); } .bf-section--plate .bf-head__lead { color: color-mix(in srgb, var(--bf-bg) 70%, var(--bf-plate)); } .bf-plate { margin-top: 44px; } /* 등급 사이의 칸막이는 없다(2026-09-04) — 선은 등급 이름의 높이에서 좌우로 뻗는다. 이름이 선을 끊고 서므로 층이 갈리는 자리와 이름이 같은 줄이다. */ .bf-plate__tier { padding: 34px 0; } /* 등급 이름 — 브랜드 블루다. 램프에서 흰 바탕에 쓸 수 있는 가장 깊은 단이 --bf-600 이고(6.62:1), 한 단 위인 --bf-500 은 4.97:1 로 본문 기준을 겨우 넘는다. 18px 은 큰 글자 기준(24px 또는 굵은 18.66px)에 못 미치므로 4.5:1 을 지켜야 한다. 좌우로 뻗는 선은 flex 로 남는 자리를 다 먹는 두 조각이다. 선 색은 헤어라인 토큰이 아니라 바탕색을 옅게 깐 것이다 — 어두운 면의 선을 밝은 면에 그대로 쓰면 보이지 않는다. */ .bf-plate__label { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; font-size: 18px; font-weight: 700; letter-spacing: 0; color: var(--bf-600); } .bf-plate__label::before, .bf-plate__label::after { content: ''; flex: 1 1 0; height: 1px; background: color-mix(in srgb, var(--bf-bg) 14%, transparent); } /* 로고는 줄에 눕고 가운데로 모인다. 칸에 폭을 주지 않는 것이 요점이다: 칸의 폭은 로고가 제 비율대로 그 높이에 설 때의 폭이고, 상한만 둔다 — 그래야 가로로 긴 워드마크와 정사각형 마크가 한 줄에서 광학적으로 같은 무게로 보인다. 폭을 못박으면 정사각형 마크만 작아 보인다. */ .bf-plate__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 44px; } .bf-plate__cell { display: flex; align-items: center; justify-content: center; color: var(--bf-bg); font-size: 24px; font-weight: 600; text-align: center; } /* 그림은 칸을 채운다 — max-width 만 두면 칸보다 작은 파일은 제 크기 그대로 남는다(The Block 의 SVG 는 155×24 라 240 칸 안에서 155 로 섰다). width·height 를 100%로 주고 object-fit 이 비율을 지키면 모든 마크가 칸의 한쪽 변에 닿는다. */ .bf-plate__cell img { width: 100%; height: 100%; object-fit: contain; } /* 칸은 등급과 상관없이 하나이고, 폭은 상한이 아니라 못박은 값이다 (2026-09-04, 사용자 지시). 상한(max-width)이었을 때는 칸이 로고의 비율만큼만 넓어져 칸마다 폭이 달랐다 — 마크의 비율이 155×24 에서 238×120 까지 벌어져 있기 때문이다. 못박으면 줄이 격자로 읽히고 로고는 그 안에서 object-fit 으로 앉는다. 처음에는 등급마다 높이를 달리했다(76/56/44/36) — 계단이 보여야 등급을 판 뜻이 산다고 보았다. 되돌리려면 그 네 줄이 git 에 있다. */ .bf-plate__cell { width: 240px; height: 60px; } /* 전화기에서는 판의 여백과 칸의 높이를 함께 줄인다. 여백을 그대로 두면 360px 화면에서 로고가 설 자리가 296px 밖에 남지 않는다. */ @media (max-width: 600px) { .bf-plate__tier { padding: 24px 0; } .bf-plate__label { font-size: 16px; gap: 14px; margin-bottom: 20px; } .bf-plate__row { gap: 18px 28px; } /* 두 칸이 한 줄에 서려면 360px 화면에서 칸이 146px 를 넘을 수 없다. 이름만 서 있는 자리는 글자도 함께 줄인다 — 24px 에서 '알앤투 테크놀로지' 아홉 자는 216px 라 칸을 넘어 두 줄이 되고, 못박은 높이 밖으로 나간다. */ .bf-plate__cell { width: 140px; height: 46px; font-size: 15px; } } /* 가리킴에 반응하지 않는다 — 로고 판과 같은 이유다: 남의 마크를 담는 자리일 뿐 누를 것이 아니다. */ /* 어두운 면 위에서는 대부분의 브랜드 마크가 사라진다 — 워드마크는 보통 검정이나 짙은 남색이라 대비가 1.6:1 밖에 나오지 않는다. 밝은 판을 깔면 브랜드 색을 손대지 않고 그대로 살릴 수 있다. 로고는 흰 단색이라 흑연 위에 그대로 선다(2026-09-03). 예전에는 흰 판을 깔았다 — 덱에서 온 로고가 저마다 제 색이었고 어두운 벽에서는 검은 워드마크가 사라졌기 때문이다. 이제 모두 흰색으로 바꿨으므로 판이 필요 없고, 판을 걷으니 띠가 배경과 한 몸이 된다. */ /* 행을 1fr로 고정한다. 기본값(auto)이면 행 높이를 그림이 정하므로 그림의 max-height:100%가 기댈 곳이 없어져 세로로 넘쳐 나간다. overflow는 마지막 안전장치다 — 판 밖으로는 무슨 일이 있어도 안 나간다. */ .bf-strip__item { display: grid; place-items: center; grid-template-rows: minmax(0, 1fr); overflow: hidden; border: 1px solid transparent; border-radius: var(--bf-radius-2); color: var(--bf-fg-muted); font-weight: 600; } .bf-strip__item img { max-width: 100%; max-height: 100%; object-fit: contain; } /* 칸의 너비를 내용이 정하게 두면 1000px짜리 SVG 하나가 띠를 무너뜨린다. 로고가 든 칸은 등급이 정한 너비로 고정하고 안에서 맞춘다. */ .bf-strip__item:has(img) { width: var(--bf-strip-w); } .bf-strip__item--coHost { --bf-strip-w: 260px; min-width: 260px; height: 96px; padding: 20px 28px; font-size: 20px; } .bf-strip__item--title { --bf-strip-w: 220px; min-width: 220px; height: 84px; padding: 18px 24px; font-size: 18px; } .bf-strip__item--platinum { --bf-strip-w: 170px; min-width: 170px; height: 66px; padding: 14px 20px; font-size: 15.5px; } .bf-strip__item--gold { --bf-strip-w: 140px; min-width: 140px; height: 54px; padding: 12px 16px; font-size: 14px; } .bf-strip__item--silver { --bf-strip-w: 112px; min-width: 112px; height: 44px; padding: 10px 14px; font-size: 13px; } /* 이름만 있는 마크 목록 — 65개가 벽처럼 보이지 않게 */ /* 한 줄에 넷이 서야 벽이 짧게 끝난다. 본문 폭은 756px이고 판 넷과 사이 셋이 그 안에 들어가야 한다 — 판을 176px로 4px 줄여 간격에 보탰다. 딱 맞추면 반올림 한 번에 셋으로 접히므로 여유를 남긴다. */ .bf-marks { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; align-items: center; } .bf-mark { font-size: 13px; font-weight: 500; color: var(--bf-fg-muted); border: var(--bf-border); border-radius: var(--bf-radius-1); padding: 5px 10px; } /* 로고 마크 — 띠와 같은 이유로 밝은 판이다. 칸은 모두 같은 크기이며 로고는 그 안에서 맞춰진다: 가로로 긴 마크와 정사각형 마크가 한 줄에 서도 광학적으로 같은 무게로 보이게 하려는 것이다. 칸 크기는 판을 걷은 뒤에도 그대로다 — 줄 간격과 띠 계산이 여기에 기대고 있다. */ .bf-mark--logo { display: grid; place-items: center; grid-template-rows: minmax(0, 1fr); overflow: hidden; width: 176px; height: 78px; padding: 12px; border-color: transparent; } .bf-mark--logo img { max-width: 100%; max-height: 100%; object-fit: contain; } /* 로고에는 가리킴 반응이 없다(2026-08-18). 들림도 테두리도 걷었다 — 판은 남의 마크를 담는 자리일 뿐 누를 것이 아니다. 띠에서는 가리킴이 이미 다른 뜻을 가진다: 그 줄이 멈춘다. */ /* 참가 대상은 여섯 뿐이므로 보통 카드로 선다 — 면과 테두리는 카드 그대로이고 글자는 본문 크기다. 아래쪽 파트너 65개는 작은 마크로 남는다: 같은 옷을 입히면 이름의 벽이 된다. 폭은 지표 카드와 같은 격자를 쓴다(2026-08-19) — 한 섹션에 두 무리가 서므로 칸 나눔이 어긋나면 둘 다 흐트러져 보인다. 채움까지 강조로 올리지는 않는다: 강조는 한 섹션에 한 무리뿐이고, 그 자리는 위쪽 지표 카드가 이미 가졌다. */ /* 여섯 칸의 높이는 하나다. 이름이 한 줄인 것과 두 줄인 것이 섞이는데 ('Financial institutions', '디지털자산 기업'), 칸마다 높이가 다르면 한 무리로 보이지 않는다. grid-auto-rows: 1fr 은 모든 줄을 가장 높은 줄에 맞추고, align-items 는 그 줄을 칸이 채우게 한다 — .bf-marks 가 물려준 center 를 여기서 되돌린다. 그것 때문에 칸이 줄 안에서 가운데에 뜬 채 늘어나지 않았다. */ .bf-marks--cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-auto-rows: 1fr; align-items: stretch; } /* 지표 카드와 같은 구간에서 둘씩 선다. 이 규칙은 반드시 기본 규칙 뒤에 있어야 한다 — 미디어 질의는 특정성을 올리지 않으므로 차례가 전부다. 위쪽 묶음에 적어 두었더니 기본 규칙이 그보다 아래에 있어 내내 지고 있었다(2026-08-19에 발견). .bf-cards 는 기본이 위에 있어 같은 자리에서도 이긴다. */ @media (min-width: 901px) and (max-width: 1100px) { .bf-marks--cards { grid-template-columns: repeat(2, 1fr); } } .bf-marks--cards > * { min-width: 0; } /* 아이콘은 이름 왼쪽에 선다(2026-08-19). 카드가 낮아지고 눈이 왼쪽 한 줄만 훑으면 여섯을 다 읽는다. 두 줄로 접히는 이름이 섞이므로 세로 가운데로 맞춘다 — 아이콘이 첫 줄에 붙으면 줄 수마다 높이가 달라 보인다. */ .bf-marks--cards .bf-mark { display: flex; align-items: center; gap: 12px; border-radius: var(--bf-radius-2); padding: 14px 16px; font-size: var(--bf-size-body); font-weight: 400; /* keep-all 은 낱말 안에서 끊지 않는다 — 칸보다 넓은 낱말 하나는 그대로 넘친다. anywhere 를 덧대 그런 낱말만은 끊게 한다(2026-09-06): 보기 좋지는 않지만 페이지를 밀지는 않는다. */ .bf-card__value { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; word-break: keep-all; overflow-wrap: anywhere; } text-wrap: pretty; } .bf-mark__ico { color: var(--bf-300); } /* 가장 좁은 화면에서 칸이 100px 안팎까지 줄고 'institutions' 같은 긴 낱말은 그 안에 통째로 들어가지 않는다. 들어가지 않을 때만 낱말을 자른다 — 평소 줄바꿈은 그대로다. */ .bf-mark__label { min-width: 0; overflow-wrap: break-word; } /* --- 등급별 금액 (메인 페이지) ----------------------------- 등급 순위는 위 테두리 색으로 읽힌다. 상세 혜택은 파트너십 페이지가 맡고, 여기서는 금액만 답한다. */ .bf-prices { margin-top: 56px; } /* 열은 다섯이 아니라 '들어가는 만큼'이다. repeat(5, 1fr) 로 두면 트랙의 최소 크기가 내용의 min-content라 카드가 116px 아래로 못 줄고, 좁아진 폭에서 격자가 본문을 밀어 페이지 전체가 가로로 늘어난다(901px에서 200px 넘침). 최소를 140px로 못 박으면 트랙이 내용과 무관해지고, auto-fit 이 다섯 → 넷 → 셋으로 접는다. */ .bf-prices__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 20px; } /* 등급 카드 — 순위는 2px 테두리 색으로 읽힌다. 가리키면 그 색이 면 전체를 채우고 글자는 그라파이트로 뒤집힌다. 등급색은 모두 밝은 색이므로 어두운 글자라야 읽힌다. */ .bf-price { background: var(--bf-surface); border: 2px solid var(--bf-hairline); border-radius: var(--bf-radius-2); padding: 18px 18px 20px; transition: background var(--bf-dur-1) var(--bf-ease), color var(--bf-dur-1) var(--bf-ease); } .bf-price--coHost { border-color: var(--bf-100); } .bf-price--title { border-color: var(--bf-tier-title); } .bf-price--platinum { border-color: var(--bf-tier-platinum); } .bf-price--gold { border-color: var(--bf-tier-gold); } .bf-price--silver { border-color: var(--bf-tier-silver); } .bf-price:hover { color: var(--bf-cta-fg); } .bf-price--coHost:hover { background: var(--bf-100); } .bf-price--title:hover { background: var(--bf-tier-title); } .bf-price--platinum:hover { background: var(--bf-tier-platinum); } .bf-price--gold:hover { background: var(--bf-tier-gold); } .bf-price--silver:hover { background: var(--bf-tier-silver); } /* 안쪽 글자들은 자기 색을 버리고 카드의 색을 따른다 */ .bf-price:hover .bf-price__name, .bf-price:hover .bf-price__value, .bf-price:hover .bf-price__limit { color: inherit; } /* 별이 이름 왼쪽에 붙는다 — 카드의 양 끝으로 벌려 놓으면 둘이 서로 다른 것을 가리키는 두 신호처럼 읽힌다. 붙어 있어야 한 이름이다. */ .bf-price__name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: var(--bf-track-eyebrow); color: var(--bf-fg-muted); text-transform: uppercase; } /* 별은 등급 테두리와 같은 색이다 — 두 신호가 같은 것을 말한다. 여기서만 면을 채운다: 20px 윤곽선 별은 형태가 뭉개진다. */ .bf-price__ico, .bf-tier__ico { width: 20px; height: 20px; color: var(--bf-hairline); fill: currentColor; stroke-width: 1.5; } .bf-price--coHost .bf-price__ico, .bf-tier--coHost .bf-tier__ico { color: var(--bf-100); } .bf-price--title .bf-price__ico, .bf-tier--title .bf-tier__ico { color: var(--bf-tier-title); } .bf-price--platinum .bf-price__ico, .bf-tier--platinum .bf-tier__ico { color: var(--bf-tier-platinum); } .bf-price--gold .bf-price__ico, .bf-tier--gold .bf-tier__ico { color: var(--bf-tier-gold); } .bf-price--silver .bf-price__ico, .bf-tier--silver .bf-tier__ico { color: var(--bf-tier-silver); } /* 카드가 채워지면 글자는 그라파이트가 되므로 메달도 함께 따라간다 */ .bf-price:hover .bf-price__ico { color: var(--bf-cta-fg); } .bf-tier__name { display: flex; align-items: center; gap: 12px; } .bf-tier__ico { width: 22px; height: 22px; } /* 금액과 한정 문구가 한 줄에 선다. 기준선을 맞춰야 크기가 다른 두 글이 같은 줄로 읽힌다. 칸이 좁아지면 접히고, 그때만 문구가 아래로 간다. */ .bf-price__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; } .bf-price__value { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; } .bf-price__limit { font-size: 12.5px; color: var(--bf-fg-faint); word-break: keep-all; } /* --- 실행 리본 ----------------------------------------------- 디자인 번들 '09_execution_ribbon_cinematic' 을 테마 섹션의 제목 자리에 옮긴 것이다(2026-09-04). 그림은 partials/ribbon.php 의 인라인 SVG, 글자와 화살표는 HTML(theme.php), 스타일은 전부 여기다 — 인라인 SVG 의