/* ============================================================================
KBF 공개 화면 — 서브페이지 셸 (Sub Hero · LNB · Main Area)
----------------------------------------------------------------------------
KBF-36 (KBA-37) · Paper `S00b — 서브페이지 셸 마스터 KRDS · Desktop 1440` (FMZ-0)
9종 11 URL 이 전부 이 파일을 쓴다. 화면별 본문 규칙도 여기 둔다
(2,000줄을 넘으면 그때 분리 — kbf-home.css 1,700 · kbf-team.css 1,300 선례).
⚠️ 반드시 krds.min.css · kbf-public.css **뒤**에 로드된다.
⚠️ 색은 로컬 사본을 만들지 않고 `var(--krds-color-light-*)` 를 직접 쓴다.
krds.min.css `:root` 가 정의하고 값이 Paper 토큰과 정확히 일치한다(8종 실측 대조).
KBF 고유색 3종(--kbf-navy-subhero 등)만 kbf-public.css `:root` 에 있다.
========================================================================= */
/* ── 1. Sub Hero Band (FO0-0) ─────────────────────────────────────────────
1440×275 · padding 56/48 · flex column · bg #011F51 */
.kbf-sub-hero {
/* ⚠️ KBF-96 1단계 — 이것은 **밴드가 아니라 래퍼**다. 배경도 패딩도 없다.
남색 띠는 아래 `__band` 가 지고, 바(`__bar`)는 그 **형제**로 나와 67px 겹친다.
🚨 이름을 바꾸지 말 것 — 모바일 재점등 규칙 4개가
`.kbf-sub-hero:has(form.kbf-filter-bar) .kbf-sub-hero__bar` 형태라
바가 이 래퍼의 **자손으로 남는 것**에 기대고 있다. */
display: flex;
flex-direction: column;
width: 100%;
}
/* Sub Hero Band — 구 `.kbf-sub-hero` 의 세로·배경을 그대로 물려받는다. */
.kbf-sub-hero__band {
box-sizing: border-box;
/* 배경 아트의 기준 박스. `overflow` 는 아트가 띠 밖으로 새지 않게 자른다(`D-45` 계열). */
position: relative;
overflow: hidden;
/* ⚠️ KBF-68 — 가로 3속성을 공용 `.kbf-bleed` 로 넘겼다(`kbf-public.css`). 여기는 세로만 맡는다.
🚨 `width: 100%` 나 `padding-inline` 을 되살리지 말 것 — 이 파일이 `kbf-public.css` 보다
**나중에 로드**되므로 특이도가 같아도 순서로 이겨 **이 띠만 셸(1440)에 갇힌다.**
`KBF-66` 의 `.kbf-hero` 가 똑같은 구조였고 같은 방법으로 풀었다.
⭐ 단축형 `padding` 도 쓰지 말 것 — 뒤에 오는 `padding-inline` 을 만나도 세로까지 재설정한다.
⭐ 아래 미디어쿼리(`≤1439`)는 단축형 그대로 둔다 — 그 구간은 셸 == 뷰포트라 bleed 가
no-op 이고, 나중 로드로 이겨 24px·20px 이 그대로 유지된다(의도한 동작). */
padding-block: 56px;
background-color: var(--kbf-navy-subhero);
}
/* 🔑 **바가 있을 때만** 아래를 늘려 340 을 만든다 (KBF-96 1단계).
56 + 163(크럼 23 + 제목 100 + 리드 40) + 121 = 340 — 팀소개 `S31b` 밴드와 같은 값이다.
⚠️ **`min-height` 를 쓰지 않는 이유가 둘이다.**
① `min-height` 는 미디어쿼리의 `padding` 재선언으로 중화되지 않아 모바일 밴드가 340 이
된다 — `league-stage3.mjs` 의 151/231/242/192 계약이 통째로 깨진다.
② 바가 없는 상세 화면(`post`·`gibo-view`·`match-detail`)에도 걸려 제목 아래에
**죽은 네이비 65px** 이 생긴다. 패딩은 바가 있는 화면에만 붙는다.
⭐ 덤 — h1 이 2줄이 돼도 패딩이 함께 밀리므로 카드가 글자에 닿지 않는다. */
.kbf-sub-hero:has(.kbf-sub-hero__bar) .kbf-sub-hero__band { padding-bottom: 121px; }
/* 배경 장식 — KBF-96 2단계부터 **이 규칙 한 벌이 13화면을 맡는다**(팀소개 포함).
옛 `kbf-team.css` 의 `.kbf-team-hero__art` 는 같은 커밋에서 사라졌다.
⭐ `left: 820px`(= 1440 − 620) 이 아니라 `right: 0` 이다 — 820 은 셸 1440 고정을 전제한
값이라 띠가 화면 폭으로 넓어지면 우측이 빈다(`KBF-68` 에서 팀소개가 같은 길을 갔다). */
.kbf-sub-hero__art { position: absolute; left: auto; right: 0; top: 0; }
/* 🚨 **글자를 배경 아트 위로 올린다.** 이 3줄이 없으면 h1 과 lead 가 바둑판 SVG 뒤로 사라진다
— absolute 요소는 `z-index: auto` 라도 흐름 안의 비위치 요소보다 나중에 그려지기 때문이다.
이 함정은 옛 `kbf-team.css` 가 주석으로 남겨 둔 것을 승계한 것이다(그 파일은 이제 없다). */
.kbf-sub-hero .krds-breadcrumb-wrap,
.kbf-sub-hero__title,
.kbf-sub-hero__lead,
.kbf-sub-hero__variant { position: relative; }
/* 브레드크럼 — KRDS 원본 컴포넌트를 다크 배경용으로 재선언한다.
⚠️ --krds-breadcrumb--* 는 `.krds-breadcrumb-wrap` **자신**이 선언하므로 조상에
재선언하면 무시된다. 컴포넌트 루트를 (0,2,0) 으로 잡는다(팀소개 선례 승계).
⚠️ S00b 실측은 15/23 이다 — 팀소개(S31b)의 14/18 은 Gen-1 셸 계보라 다르다.
신규 9종은 마스터를 따른다. */
.kbf-sub-hero .krds-breadcrumb-wrap {
--krds-breadcrumb--pc-font-size: 15px;
--krds-breadcrumb--color-action: transparent;
--krds-breadcrumb--padding-x: 0;
--krds-breadcrumb--margin-bottom: 0;
--krds-light-color-text-basic: #7C93BE; /* 구분자 마스크 색 — 컴포넌트가 아니라 전역 토큰이다 */
width: auto;
/* 🚨 KRDS 원본이 `.krds-breadcrumb-wrap` 에 padding-top 24 를 건다. 시안에는 없다.
그대로 두면 Sub Hero 가 275 → **299**(=24+275)로 정확히 24px 커진다.
값은 `--krds-pc-gap-layout-header-breadcrumb` 인데 **컴포넌트 토큰이 아니라 전역
레이아웃 토큰**이라 여기서 0 으로 재선언하면 다른 레이아웃까지 흔든다.
⇒ 토큰을 건드리지 않고 padding 자체를 (0,2,0) 특이도로 덮는다. */
padding-top: 0;
}
.kbf-sub-hero .breadcrumb { gap: 9px; } /* gap 토큰이 없다 */
/* ⚠️ 색은 토큰으로 못 바꾼다 — --krds-breadcrumb--color-text 는 선언만 되고 var() 로
소비되는 곳이 0건인 죽은 토큰이다.
⚠️ 특이도: KRDS 의 `.krds-breadcrumb-wrap .breadcrumb li a.txt`(0,3,2)를 이겨야
밑줄이 지워진다. 아래는 (0,4,1) 이라 클래스 수로 이긴다. */
.kbf-sub-hero .krds-breadcrumb-wrap .breadcrumb li .txt {
color: var(--kbf-subhero-text);
font-size: 15px;
line-height: 23px;
font-weight: 400;
letter-spacing: 0;
text-decoration: none;
}
.kbf-sub-hero .krds-breadcrumb-wrap .breadcrumb li:last-child .txt {
color: var(--krds-color-light-gray-0);
font-weight: 500;
}
/* ⚠️⚠️ 외부 의존 차단 — krds.min.css 는 krds.go.kr 의 SVG 아이콘 76종을 350회 참조한다.
구분자도 그중 하나(ico_angle.svg)를 mask-image 로 불러오므로 그대로 두면
수용 기준 「외부 요청 0건」이 깨진다. KRDS 원본은 무수정이어야 하므로 여기서
마스크를 끄고 로컬 data URI 로 대체한다. KRDS 의 rotate(-90deg) 도 함께 해제한다. */
.kbf-sub-hero .krds-breadcrumb-wrap .breadcrumb li:not(:last-child)::after {
-webkit-mask-image: none;
mask-image: none;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.2 2.2L8 6L4.2 9.8' fill='none' stroke='%237C93BE' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 12px;
height: 12px;
margin-left: 0; /* .breadcrumb 의 gap 9 가 간격을 준다 */
transform: none;
}
/* Page Title (FO9-0 pt22 · FOA-0 52/78/700) · Lead (FOB-0 pt14 · FOC-0 17/26/400) */
.kbf-sub-hero__title {
margin: 22px 0 0;
color: var(--krds-color-light-gray-0);
font-size: 52px;
font-weight: 700;
line-height: 78px;
letter-spacing: 0;
}
/* ⚠️ **block** 이어야 한다. inline 으로 두면 `
` 안에 인라인 strut 이 생겨
line-height 26 인데도 박스가 26.5 가 되고 Sub Hero 가 432 → 433 이 된다(실측). */
.kbf-sub-hero__lead-full { display: block; }
.kbf-sub-hero__lead-short { display: none; } /* 모바일에서만 보인다 */
.kbf-sub-hero__lead {
margin: 14px 0 0;
color: var(--kbf-subhero-text);
font-size: 17px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0;
}
/* Hero 변형 A(필터바)·B(검색바) 슬롯 — KBF-96 1단계부터 Band 의 **형제**다.
−67 로 띠에 잠겨 「네이비 위에 얹힌 흰 카드」가 된다. 팀소개 `S31b` 와 같은 값이며
실측으로 두 화면의 바 상단이 y=365 로 일치한다.
⚠️ `position: relative` 가 필수다 — 띠가 relative 라 static 인 형제보다 위에 그려진다.
⚠️ 가로는 `--kbf-gutter` 로 들여 밴드 내용과 좌표를 맞춘다(둘 다 48). 태블릿은 24 라
아래 미디어쿼리가 다시 잡는다. */
.kbf-sub-hero__bar {
position: relative;
z-index: 1;
margin: -67px var(--kbf-gutter) 0;
}
/* ── 2. Main Area (FOE-0) ─────────────────────────────────────────────────
padding 24/48/44 · gap 24 · align-items flex-start · bg gray-5 */
.kbf-sub-main {
display: flex;
align-items: flex-start;
box-sizing: border-box;
width: 100%;
padding: 24px var(--kbf-gutter) 44px;
gap: 24px;
background-color: var(--krds-color-light-gray-5);
}
/* ── 3. LNB (FOF-0) ───────────────────────────────────────────────────────
320 고정 · bg gray-0 · border-top 2px gray-95 · border-bottom 1px gray-20
⭐ KBF-128 — 사이드바 치수·글자·색을 **여기 한 곳에서만** 정한다.
팀소개(`/team`)에는 LNB 가 없다. `nav.php` 의 team 그룹이 `children` 0 이라
`$hasLnb` 가 false 이고, 그 320 자리를 **팀 목록이 대신 쓴다**(`nav.php:22` 설계).
두 컴포넌트가 같은 자리에 다른 모양으로 있어서 발주처가 차이를 지적했다.
값을 베껴 두 벌로 두면 한쪽만 고쳐 다시 갈라진다. 그래서 변수로 뺐다.
LNB 는 아래에서, 팀 목록은 §3-b 에서 **같은 변수**를 읽는다.
⚠️ 셀렉터를 나란히 적는 방법은 쓸 수 없었다 — 모바일에서 둘의 거동이 반대다
(LNB 제목은 숨고 · 팀 목록 제목은 각주로 바뀐다). 한 규칙에 묶으면
한쪽 모바일 규칙이 다른 쪽을 덮는다. */
:root {
--kbf-lnb-tit-h: 64px;
--kbf-lnb-tit-size: 19px;
--kbf-lnb-tit-lh: 29px;
--kbf-lnb-tit-color: var(--krds-color-light-gray-95);
--kbf-lnb-pi: 20px;
--kbf-lnb-item-h: 56px;
--kbf-lnb-item-size: 17px;
--kbf-lnb-item-lh: 26px;
--kbf-lnb-item-color: var(--krds-color-light-gray-70);
--kbf-lnb-line: var(--krds-color-light-gray-10);
--kbf-lnb-edge-top: var(--krds-color-light-gray-95);
--kbf-lnb-edge-bottom: var(--krds-color-light-gray-20);
--kbf-lnb-active-bg: var(--krds-color-light-primary-5);
--kbf-lnb-active-color: var(--krds-color-light-primary-60);
}
.kbf-lnb {
display: flex;
flex-direction: column;
box-sizing: border-box;
/* ⚠️ flex 3속성을 세트로 준다 — flex-basis 기본값이 width 를 이겨 240px 이 111px 로
찌그러진 적이 있다(D-41-01 ⑤). 폭을 고정하려면 basis 까지 고정한다. */
flex: 0 0 320px;
width: 320px;
background-color: var(--krds-color-light-gray-0);
border-top: 2px solid var(--kbf-lnb-edge-top);
border-bottom: 1px solid var(--kbf-lnb-edge-bottom);
}
.kbf-lnb__tit { /* FOG-0 h64 · pi 20 · FOH-0 19/29/700 */
display: flex;
align-items: center;
box-sizing: border-box;
height: var(--kbf-lnb-tit-h);
margin: 0;
padding-inline: var(--kbf-lnb-pi);
flex-shrink: 0;
color: var(--kbf-lnb-tit-color);
font-size: var(--kbf-lnb-tit-size);
font-weight: 700;
line-height: var(--kbf-lnb-tit-lh);
letter-spacing: 0;
}
.kbf-lnb__list { margin: 0; padding: 0; list-style: none; }
.kbf-lnb__item { /* FOK-0 h56 · pi 20 · FOL-0 17/26/400 gray-70 */
display: flex;
align-items: center;
box-sizing: border-box;
height: var(--kbf-lnb-item-h);
padding-inline: var(--kbf-lnb-pi);
border-bottom: 1px solid var(--kbf-lnb-line);
color: var(--kbf-lnb-item-color);
font-size: var(--kbf-lnb-item-size);
font-weight: 400;
line-height: var(--kbf-lnb-item-lh);
letter-spacing: 0;
text-decoration: none;
}
.kbf-lnb__item.is-active { /* FOI-0 bg primary-5 · FOJ-0 17/26/700 primary-60 */
background-color: var(--kbf-lnb-active-bg);
color: var(--kbf-lnb-active-color);
font-weight: 700;
}
.kbf-lnb__item:hover { color: var(--kbf-lnb-active-color); }
/* ── 3-b. 팀 목록이 LNB 와 같은 모양을 쓴다 (KBF-128) ──────────────────────
팀소개 왼쪽 320 칸은 LNB 가 아니라 **팀 목록**이다(§3 머리말 참조). 위와 같은
변수를 읽어 치수·글자·색을 맞춘다.
🚨 **여기(kbf-sub.css)에 두는 이유는 로드 순서다.** `/team` 은 자식 뷰가 먼저
`kbf-team.css` 를 push 하고 레이아웃이 나중에 이 파일을 push 한다 ⇒ 순서가
`team → sub` 라 **이 파일이 이긴다.** 팀 전용 조정을 `kbf-team.css` 에 두면
특이도가 같을 때 져서 무효가 된다.
`TeamShellTest::test_the_sub_stylesheet_wins_on_team` 이 그 순서를 잠근다.
`.kbf-filter-bar--team` 변형이 이 파일에 있는 이유도 같다.
🚨 **마크업에 `kbf-lnb` 클래스를 붙이지 않는다.** `TeamShellTest::test_team_has_no_lnb`
가 `/team` 렌더에 그 문자열이 **0 건**일 것을 요구한다(320 열이 둘이 되는 것을 막는
계약). 그래서 팀 목록의 기존 클래스를 셀렉터로 집는다.
⚠️ **767 이하는 건드리지 않는다**(사용자 결정 3A). 그 구간에서 팀 목록은 숨고 제목만
각주로 남는다(`D-39`). 그래서 이 블록 전체를 `min-width: 768px` 로 가둔다. */
@media (min-width: 768px) {
/* 제목 칸 — LNB 의 `__tit` 자리. 팀은 칸(`__head`)과 글자(`__title`)가 갈려 있어
칸에 글자 스타일을 주고 자식이 상속받게 한다. */
.kbf-team-list__head {
height: var(--kbf-lnb-tit-h);
padding-inline: var(--kbf-lnb-pi);
background-color: var(--krds-color-light-gray-0);
border: 0;
border-top: 2px solid var(--kbf-lnb-edge-top);
border-radius: 0;
color: var(--kbf-lnb-tit-color);
font-size: var(--kbf-lnb-tit-size);
font-weight: 700;
line-height: var(--kbf-lnb-tit-lh);
letter-spacing: 0;
}
.kbf-team-list__title {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
/* 항목 컨테이너 — LNB 는 감싸는 `.kbf-lnb` 가 아래 테두리를 그린다.
팀은 head 와 tabs 가 grid 형제라 tabs 가 그 몫을 맡는다. 좌우 테두리는 없앤다. */
.kbf-team-list__tabs {
background-color: var(--krds-color-light-gray-0);
border-inline: 0;
border-bottom: 1px solid var(--kbf-lnb-edge-bottom);
}
/* 항목 — LNB 의 `__item` 자리. `.btn-tab` 은 button 이라 KRDS 기본을 덮어야 한다. */
.kbf-team-list__tabs.tab .btn-tab {
height: var(--kbf-lnb-item-h);
padding-inline: var(--kbf-lnb-pi);
border: 0;
border-bottom: 1px solid var(--kbf-lnb-line);
color: var(--kbf-lnb-item-color);
font-size: var(--kbf-lnb-item-size);
font-weight: 400;
line-height: var(--kbf-lnb-item-lh);
letter-spacing: 0;
}
/* 🚨 KRDS 탭은 높이·글자를 **자기 토큰**으로 정한다. `.tab` 자신이 선언하므로
조상에 써도 무시되고, 위의 직접 선언과 경쟁한다 ⇒ 토큰도 함께 맞춘다. */
.kbf-team-list__tabs.tab {
--krds-tab--button-size-height: var(--kbf-lnb-item-h);
--krds-tab--button-pc-font-size: var(--kbf-lnb-item-size);
--krds-tab--button-color-text: var(--kbf-lnb-item-color);
}
.kbf-team-list__tabs.tab > ul > li.active .btn-tab {
background-color: var(--kbf-lnb-active-bg);
color: var(--kbf-lnb-active-color);
font-weight: 700;
}
.kbf-team-list__tabs.tab .btn-tab:hover { color: var(--kbf-lnb-active-color); }
}
/* ── 4. Main Content (FOO-0) ──────────────────────────────────────────────
flexGrow 1 · column · gap 20 · padding 34/34/38 · radius 8 · border 1px gray-10
⇒ 내용 폭 LNB 있음 1000 − 2 − 68 = 930 · LNB 없음 1344 − 2 − 68 = 1274 */
.kbf-sub-content {
display: flex;
flex-direction: column;
box-sizing: border-box;
flex: 1 1 0;
min-width: 0; /* flex 비율은 flex 3속성 + min-width:0 이 한 세트다(D-45-06) */
gap: 20px;
padding: 34px 34px 38px;
border: 1px solid var(--krds-color-light-gray-10);
border-radius: 8px;
background-color: var(--krds-color-light-gray-0);
}
.kbf-sub-placeholder { /* Phase 1 골격 표시 — Phase 2 에서 사라진다 */
margin: 0;
color: var(--krds-color-light-gray-50, #6D7882);
font-size: 17px;
line-height: 26px;
}
/* ── 5. 태블릿 768~1439 ───────────────────────────────────────────────────
시안이 1440 절대값이라 그대로 두면 좁은 폭에서 LNB 320 이 본문을 압박한다.
⚠️ 「시안 없는 구간」이며 우리가 규칙을 정한다(D-45-05). */
@media (min-width: 768px) and (max-width: 1439px) {
.kbf-sub-hero__band { padding: 40px 24px; }
/* 🚨 `:has()` 규칙은 특이도 (0,3,0) 이라 위의 (0,1,0) 이 **순서로도 못 이긴다.**
같은 형태로 다시 선언해야 데스크톱의 121 이 이 구간까지 새지 않는다. */
.kbf-sub-hero:has(.kbf-sub-hero__bar) .kbf-sub-hero__band { padding-bottom: 40px; }
/* 🚨 `--kbf-gutter` 는 이 구간에서 **48** 이다(20 이 되는 것은 ≤767 뿐).
밴드와 본문이 24 라 그대로 두면 바만 24px 씩 안쪽으로 밀려 어긋난다. */
.kbf-sub-hero__bar { margin-inline: 24px; }
.kbf-sub-hero__title { font-size: 40px; line-height: 58px; margin-top: 16px; }
.kbf-sub-main { padding: 20px 24px 32px; gap: 16px; }
.kbf-lnb { flex: 0 0 240px; width: 240px; }
.kbf-sub-content { padding: 24px; }
}
/* ── 6. 모바일 ≤767 ───────────────────────────────────────────────────────
S00bm — LNB 320 세로 컬럼은 390px 에서 성립하지 않아 **가로 칩 스트립**이 된다.
항목과 현재 위치는 100% 보존하고 배치 축만 수직→수평이다(S24 반응형 계약).
⚠️ 마크업은 하나다. 두 벌로 만들면 갈라진다.
⚠️ 아래 치수는 홈의 `.kbf-subnav__chip`(h40 · px16 · radius 20) 선례를 따른 임시값이다.
Paper 08 Public Mobile 실측은 Phase 2 각 묶음에서 하고 그때 교정한다. */
@media (max-width: 767px) {
/* Paper `S00bm`·`S46b`(J6H-0) 실측 — 임시값을 전부 교체했다.
Sub Hero 151 = padding 16 + Breadcrumb 20 + Title 58(pt10) + Context 29(pt6) + padding 28 */
.kbf-sub-hero__band { padding: 16px 20px 28px; }
.kbf-sub-hero:has(.kbf-sub-hero__bar) .kbf-sub-hero__band { padding-bottom: 28px; }
/* 배경 장식 — 원본 620×340 을 그대로 두면 151px 띠를 넘는다. 팀소개 모바일과 같은 168 로 줄인다.
⚠️ SVG 자신이 `.kbf-sub-hero__art` 다(래퍼가 없다) — 자손 셀렉터는 매칭되지 않는다. */
.kbf-sub-hero__art { width: 168px; height: auto; }
.kbf-sub-hero__title { font-size: 32px; line-height: 48px; margin-top: 10px; }
.kbf-sub-hero__lead { font-size: 15px; line-height: 23px; font-weight: 500; margin-top: 6px; }
.kbf-sub-hero__lead-full { display: none; }
.kbf-sub-hero__lead-short { display: block; }
/* 🚨 모바일 Sub Hero 계약은 **두 값**이다 — 목록형 151 · 상세형 199.
위 주석의 「151 = ... Title 58(pt10)」은 **목록형 계약**이다. 상세 화면은 결정 `G5`
로 h1 이 **콘텐츠 제목**이 되는데, 모바일 1줄 예산은 한글 **12자**뿐이라 실측 초과율이
press 448/448 · notice 119/119 · news 206/210 · gibo 4,656/4,659
다. ⇒ 「151 고정」과 `G5` 는 **동시에 성립하지 않는다.** h1 을 2줄까지 허용하고 그 위를
잘라 상세형을 199 로 고정한다(= padding 16 + 크럼 20 + pt10 + Title 96 + pt6 + Context 23 + padding 28).
⚠️ 문자수로 자르지 않는다(`Str::limit` 기각) — 350px 안에 한글 26자 · 숫자 40자 ·
`M` 27자가 들어간다. 폭 단위당 픽셀이 **2배** 벌어지므로 문자수는 계약이 못 된다.
⚠️ `display` 를 여기서 켜도 `hero-mobile` 변형(개인순위·경기상세)은 안 깨진다 —
`.kbf-sub-hero__variant ~ .kbf-sub-hero__title` 이 2클래스라 특이도가 더 높다. */
.kbf-sub-hero__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Context 는 언제나 1줄이다. 2줄이 되면 목록형이 151 → 174 로 밀린다(news/1 실측 221). */
.kbf-sub-hero__lead-short {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kbf-sub-hero .breadcrumb { gap: 7px; }
.kbf-sub-hero .krds-breadcrumb-wrap .breadcrumb li .txt { font-size: 13px; line-height: 20px; }
/* 🚨🚨 KRDS 모바일 브레드크럼 접기 해제 — **외부 요청 2건의 출처였다.**
KRDS 는 ≤767 에서 중간 항목을 sr-only 로 숨기고 `…` 를 넣는다:
li:not(.home):not(:last-child) → 숨김 (!important)
li:not(.home):not(:nth-child(2)):last-child::before → ico_ellipsis.svg ← krds.go.kr
그 ::after → ico_angle.svg ← krds.go.kr
⇒ 우리는 `.home` 클래스를 쓰지 않으므로(시안 첫 항목이 아이콘이 아니라 텍스트 HOME)
**HOME 까지 함께 숨겨져** `… > 인사말` 이 되고 이동 수단이 0이 된다. 접근성 후퇴다.
⇒ 우리 브레드크럼은 최대 3단(HOME > 그룹 > 항목 ≈ 200px)이라 390px 에 충분히 들어간다.
접기가 필요 없다. 접기를 끄면 외부 SVG 2건도 함께 사라진다.
⚠️ 팀소개(2단)는 마지막이 `:nth-child(2)` 라 이 규칙에서 빠져 그동안 안 걸렸다.
**3단을 쓰는 서브페이지가 처음 밟은 것**이고, 그래서 KBF-28·41 검증은 통과했다.
⚠️ KRDS 권장 밖으로 나가므로 완화책을 둔다 — 13px 축소 + nowrap + 넘치면 가로 스크롤.
(D-1 노선 C: 권장 이탈 시 완화책 설계 + 분류 B 기록)
⚠️ 특이도 (0,5,1) 로 KRDS (0,4,1) 를 이기지만 KRDS 가 !important 를 썼으므로 함께 쓴다. */
.kbf-sub-hero .krds-breadcrumb-wrap .breadcrumb { overflow-x: auto; }
.kbf-sub-hero .krds-breadcrumb-wrap .breadcrumb li { flex-shrink: 0; }
.kbf-sub-hero .krds-breadcrumb-wrap .breadcrumb li:not(.home):not(:last-child) {
position: static !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
white-space: nowrap !important;
}
/* `…`(ico_ellipsis) 와 마지막 항목 뒤 꺾쇠(ico_angle) 를 끈다 — 둘 다 외부 SVG 다. */
.kbf-sub-hero .krds-breadcrumb-wrap .breadcrumb li:not(.home):not(:nth-child(2)):last-child::before,
.kbf-sub-hero .krds-breadcrumb-wrap .breadcrumb li:not(.home):not(:nth-child(2)):last-child::after {
display: none;
}
/* KRDS 가 `…` 를 앞에 두려고 텍스트를 order:3 으로 밀어 둔다. 접기를 껐으니 되돌린다. */
.kbf-sub-hero .krds-breadcrumb-wrap .breadcrumb li:not(.home):not(:nth-child(2)):last-child .txt { order: 0; }
/* Main Area (mobile) — J70-0 실측 · padding 16/0/20 · gap 16.
⚠️ display:block 으로 두면 gap 이 죽는다. flex column 을 유지한다. */
.kbf-sub-main {
flex-direction: column;
align-items: stretch;
padding: 16px 0 20px;
gap: 16px;
}
/* Sub Nav 가로 칩 — J74-0 실측 · padding-inline 20 · gap 8 · 칩 h40 pi16 radius20.
활성은 **채움**(bg primary-60 + 흰 글씨)이고 비활성은 흰 배경 + gray-20 테두리다. */
.kbf-lnb {
flex-direction: row;
width: auto;
flex: 0 0 auto;
gap: 8px;
padding: 0 20px;
border-top: 0;
border-bottom: 0;
background: none;
overflow-x: auto; /* 항목이 많으면 가로 스크롤 — 잘라내지 않는다 */
-webkit-overflow-scrolling: touch;
}
.kbf-lnb__tit { display: none; } /* 페이지 타이틀이 같은 말을 이미 하고 있다 */
.kbf-lnb__list { display: flex; gap: 8px; }
.kbf-lnb__row { flex-shrink: 0; }
.kbf-lnb__item {
height: 40px;
padding-inline: 16px;
border: 1px solid var(--krds-color-light-gray-20);
border-radius: 20px;
background-color: var(--krds-color-light-gray-0);
font-size: 15px;
line-height: 23px;
font-weight: 400;
white-space: nowrap;
}
.kbf-lnb__item.is-active {
background-color: var(--krds-color-light-primary-60);
border-color: var(--krds-color-light-primary-60);
color: var(--krds-color-light-gray-0);
font-weight: 700;
}
/* Main Content (mobile) — J71-0 실측 · padding 20 · gap 12 · 좌우 테두리 없음 */
.kbf-sub-content {
padding: 20px;
gap: 12px;
border-inline: 0;
border-top: 1px solid var(--krds-color-light-gray-10);
border-radius: 0;
}
}
/* ============================================================================
화면별 — 묶음 1 리그소개
========================================================================= */
/* ── S28b 인사말 (FUN-0 실측) ─────────────────────────────────────────────
Main Content 를 가로 2단으로 쓴다 — 기본은 column 이므로 이 화면만 row 로 바꾼다. */
.kbf-greeting {
display: flex;
align-items: flex-start;
gap: 36px;
}
.kbf-greeting__author {
display: flex;
flex-direction: column;
/* flex 3속성 세트 — basis 를 빼면 콘텐츠가 비율을 이긴다(D-41-01 ⑤) */
flex: 0 0 220px;
width: 220px;
gap: 16px;
}
.kbf-greeting__photo {
display: block;
width: 220px;
height: 280px;
object-fit: cover;
border-radius: 8px;
background-color: var(--krds-color-light-gray-5);
}
.kbf-greeting__sign { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.kbf-greeting__role {
color: var(--krds-color-light-gray-70);
font-size: 15px;
font-weight: 400;
line-height: 23px;
}
.kbf-greeting__name {
color: var(--krds-color-light-gray-95);
font-size: 19px;
font-weight: 700;
line-height: 29px;
}
.kbf-greeting__letter {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
gap: 26px;
}
.kbf-greeting__title {
/* KBF-108 — 관리자가 저장한 인사말 제목. 화면에 자리가 없어 신설했다.
본문 소제목(19/29/700 gray-95)과 같은 규격을 쓴다. */
margin: 0;
color: var(--krds-color-light-gray-95);
font-size: 19px;
font-weight: 700;
line-height: 29px;
}
.kbf-greeting__para {
margin: 0;
color: var(--krds-color-light-gray-80);
font-size: 17px;
font-weight: 400;
line-height: 26px;
white-space: pre-line; /* 배열 안 \n = 레거시의 홑 */
}
.kbf-greeting__closing {
margin: 0;
padding-top: 14px;
color: var(--krds-color-light-gray-95);
font-size: 19px;
font-weight: 700;
line-height: 29px;
}
/* 모바일 — S46b(J8B-0) 실측.
⚠️ 변경이력 L1432 는 「2단 → 세로 스택」이라 적었으나 **실측은 다르다.**
Author 자체가 `row · align center · gap 16` 이고 사진이 84×104 로 작아진다.
「세로 스택」은 Author 와 Letter 의 관계를 말한 것이고 Author 내부는 가로다. */
@media (max-width: 767px) {
.kbf-greeting { flex-direction: column; gap: 12px; }
.kbf-greeting__author {
flex: 0 0 auto;
width: 100%;
flex-direction: row; /* ⬅ 사진 옆에 서명 */
align-items: center;
gap: 16px;
}
.kbf-greeting__photo { width: 84px; height: 104px; border-radius: 4px; }
.kbf-greeting__name { font-size: 22px; line-height: 32px; }
.kbf-greeting__letter { gap: 14px; }
.kbf-greeting__para { color: var(--krds-color-light-gray-90); }
.kbf-greeting__closing { padding-top: 0; font-size: 15px; line-height: 23px; }
}
/* ── 공통 표 (S30b `Table / 일정` 실측 — 다른 화면도 이 규칙을 승계한다) ────
border-top 2px gray-95 · border-bottom 1px gray-20
Head h56 · pi 20 · bg gray-5 · bb 1px gray-20 · 15/23/700 gray-70
Row min-height 64 · padding 19/20 · bb 1px gray-10 · align flex-start
⚠️ `