/* ══ 1단 글로벌 바 + 2단 서브 바 + 메가메뉴 + 머리 한 줄 + 홈 카드 — 공용 정본 ══════════ 근거: CIO 가 보낸 Apple Developer 라이트/다크 캡처들. 1단 — 좌 로고 · 중 A~F 텍스트 링크 · 우 검색 + 테마 토글 + 계정 알약. 2단 — 좌 현재 탭 **볼드** 제목 · 우 2단 항목(선택 항목 아래 2px 밑줄). 머리 — **한 줄**: 좌 페이지 제목 + 우 3단 알약. 이 줄만 스크롤에서 살아남는다. 🔴 09-13 03:xx CIO 최종 「스크롤 아래로 했을 때 캘린더 [토글 선택] 요건 남아있고 나머지는 다 위로 사라지게. 그거 모든 탭에 대해서도 똑같이」 + Apple Support 캡처 전/후 (「여기선 두번째 라인이 저렇게 되는데, 나는 3번째 라인 토글이랑 그게 저렇게 되게」). ⇒ **1단·2단 바는 고정하지 않는다**(앞선 「1·2단 고정」 지시는 이걸로 취소됐다). 고정되는 것은 `.pagehead` **한 줄뿐**이고 그 줄이 Apple 2단 바의 재질을 그대로 쓴다 (높이 52px · 반투명 + 블러 · 아래 얇은 경계). 🔴 03:xx 「제목자리가 너무 넓은 거 같아 … 그냥 내러티브 써놓고 끝. 간격은 3/4 정도로」 + 「캘린더 - 오늘 세상에 … 요건 없애」 ⇒ 가운데 큰 히어로 **폐지**, 부제 **삭제**. 🔴 03:xx 「첫 두줄 높이 맞춰야한다」 ⇒ 1단·2단 둘 다 50px(+보더 1 = 51px). 🔴 03:xx 「운용 저 글씨 볼드체로 하고, 운용·포트폴리오·리포트 … 글씨를 살짝 줄여줘」 ⇒ `.stitle` 700 · `.stabs a` 15 → 13px. 🔴 03:xx 「스크롤이 여러개 있으면 안되고 하나만 있어야 한다」 ⇒ 이 파일은 세로 `overflow-y:auto|scroll` 을 **한 군데도 쓰지 않는다**(가로 넘침만 `overflow-x`). ⚠ 토큰(`--`)은 선언하지 않는다. ⚠ 클래스 이름에 `appbar`·`header`·`top` 을 쓰지 않는다 — 디자인 게이트 [6](검은 헤더 금지)이 그 이름을 무는데, 여기 어두운 배경은 **다크 판에서만**이다. */ /* ── 1단 ──────────────────────────────────────────────────────────────────── */ /* 🔴 09-13 §X CIO 확정 「스크롤하면 [제목+토글] 한 줄만 남고 나머지는 다 위로 사라지게, 모든 탭 똑같이」 ⇒ **1·2단은 sticky 가 아니다.** 문서와 함께 올라가 사라지고, 남는 줄은 3단(`.pagehead` = 제목 + 알약) **하나**다. 그 줄만 `position:sticky; top:0`. ⚠ **왜 세 줄 sticky 가 틀렸나 — 실측(09-13 재검수).** 종전 판은 1·2단에 sticky 를 걸고 top:0 / 51 을 줬는데, 두 바는 `#iabar` **래퍼 div 안**에 산다(`appbar.js mount`). sticky 는 **담는 상자 안에서만** 붙는다 — 래퍼 높이가 102px 이니 스크롤 102px 을 넘는 순간 두 바는 상자 바닥에 닿아 그대로 올라가 버린다(scrollY 600 에서 `rect.top` −549 실측). 화면에는 `.pagehead` 만 top:102 에 붙어 남고, 그 위 102px 은 **빈 띠**가 된다(캡처 `orchestration/webhost/previews/final_20260913/G12_scroll600_*.png`). 즉 「세 줄이 같이 붙는다」는 CSS 가 한 번도 참인 적이 없었다 — 래퍼를 벗어날 수 없어서다. ⇒ 고치는 방향은 래퍼를 없애 세 줄을 붙이는 쪽이 아니라, **CIO 문면대로 한 줄만 남기는 쪽**이다. 래퍼는 그대로 두고 1·2단에서 sticky 를 뗀다(빈 띠의 원인도 같이 죽는다). ⚠ 3단 바탕은 **투명 + 배경 블러**다(CIO 18:1x 「줄 투명하게」). 이제 위에 남는 줄이 이 하나뿐이라 뒤로 본문이 지나간다 — 블러가 그 자리를 읽히게 한다. */ /* 🔴 09-13 23:2x CIO 「밑으로 열리는게 위로 가야하는거 아닌가?」 — 메가메뉴가 열렸는데 3단 sticky 줄(`.pagehead`, z:65)이 그 **위로** 그려졌다. 원인은 z 값이 아니라 **자리**다: 종전 `.gbar` 는 `position:static` 이라 `z-index:60` 이 **무시**되는데, `backdrop-filter` 가 스태킹 컨텍스트를 만든다 — 그 안의 `.mega{z-index:70}` 은 **바깥과 겨루지 못하고** `.gbar` 컨텍스트(레벨 auto=0)에 갇혀 `.pagehead`(65) 아래로 내려앉았다. ⇒ `position:relative`(흐름은 static 과 같다 — 여전히 위로 지나가 사라진다) + 높은 z. 층: **1단 바 1000 > 메가 999(그 안에서) > 3단 머리 900**. */ .gbar { position:relative; z-index:1000; background:rgba(245,245,247,.82); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.06); } .gbar-in { max-width:1440px; margin:0 auto; height:50px; padding:0 22px; display:flex; align-items:center; gap:22px; } .glogo { display:flex; align-items:center; flex:0 0 auto; } /* ⚠ 로고 SVG 는 `width`·`height` 없이 `viewBox` 만 갖는다(277.86×110.14 = 2.52:1). 그러면 브라우저가 기본 300×150(2:1)로 잡아 **글자가 눌린다** — 실측으로 봤다. */ .glogo img { height:26px; width:66px; display:block; object-fit:contain; } .glogo .logo-d { display:none; } /* 🔴 09-13 CIO 「스크롤이 여러개 있으면 안되고 하나만 있어야 한다 스크롤 내 스크롤 금지」 ⚠ **`overflow-x:auto` 만 쓰면 세로 스크롤이 딸려 온다.** CSS 규칙상 한 축이 visible 이 아니면 다른 축의 visible 은 **auto 로 승격**된다 — 그래서 가로만 굴리려던 상자가 전부 세로 스크롤 컨테이너가 됐다(09-13 헤드리스 실측: `.card` 안에 249px 짜리 둘째 스크롤). 가로만 필요한 상자는 세로를 **clip 으로 못 박는다.** */ .gtabs { display:flex; align-items:center; gap:26px; flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:clip; scrollbar-width:none; } .gtabs::-webkit-scrollbar { display:none; } .gtabs a { font-size:12px; line-height:1; color:#1d1d1f; opacity:.82; text-decoration:none; white-space:nowrap; padding:4px 0; } .gtabs a:hover, .gtabs a:focus-visible { opacity:1; text-decoration:none; } .gtabs a.on { opacity:1; font-weight:600; } .gtabs a.mega-on { opacity:1; } .gact { display:flex; align-items:center; gap:12px; flex:0 0 auto; } .gact .gsearch, .gact .gtheme { appearance:none; border:0; background:transparent; cursor:pointer; color:#1d1d1f; opacity:.82; font-size:15px; line-height:1; padding:4px; border-radius:6px; } .gact .gsearch:hover, .gact .gtheme:hover { opacity:1; } .gact .gtheme:focus-visible, .gact .gsearch:focus-visible { outline:2px solid #0071e3; outline-offset:1px; } .gact .gpill { background:#0071e3; color:#fff; font-size:12px; font-weight:500; padding:5px 12px; border-radius:980px; text-decoration:none; white-space:nowrap; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .gact .gpill:hover { background:#0077ed; text-decoration:none; } /* 로그인 상태 — 알약이 계정을 말한다(CIO 「어떤 계정으로 로그인했는지 볼 수 있게」). 무채 알약 + 이니셜 동그라미. 파란 알약은 「아직 로그인 안 했다」의 뜻으로만 남긴다. */ .gact .gpill.me { background:rgba(0,0,0,.06); color:#1d1d1f; } .gact .gpill.me:hover { background:rgba(0,0,0,.10); } .gact .gpill .ini { width:18px; height:18px; border-radius:980px; background:#0071e3; color:#fff; font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; } /* 계정 드롭다운 — 계정·권한·공개 모드·로그아웃. 세로 스크롤 없음(항목 4줄). */ .gmenu { position:absolute; right:22px; top:46px; z-index:80; min-width:230px; background:var(--panel); border:1px solid var(--hair); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14); padding:8px; } .gmenu[hidden] { display:none; } .gmenu .u { display:block; font-size:13px; font-weight:600; color:var(--ink); padding:6px 8px 2px; } .gmenu .r { display:block; font-size:11.5px; color:var(--ink3); padding:0 8px 8px; } .gmenu hr { border:0; border-top:1px solid var(--hair); margin:4px 0; } .gmenu button, .gmenu a { display:block; width:100%; text-align:left; appearance:none; border:0; background:transparent; font:inherit; font-size:13px; color:var(--ink); padding:7px 8px; border-radius:8px; cursor:pointer; text-decoration:none; } .gmenu button:hover, .gmenu a:hover { background:var(--tint); text-decoration:none; } .gmenu .pub { color:var(--ink2); } .gmenu .pub.on { color:var(--ink); font-weight:600; } .gmenu form { margin:0; } /* ── 메가메뉴 (CIO 「첫번째거에 손 올려놓으면 아래로 쫙 열리면서 하위 탭들 보이게」) ──── Apple Developer Community 캡처 꼴: 전체 폭 패널 · 좌 2단 항목 큰 볼드 · 우 3단 목록 작은 굵은 글씨 · 소제목 회색. 열림 200ms. 본문은 블러(`body.mega-open .megablur`). */ /* ⚠ 바탕은 **불투명**이다(CIO 09-13 23:2x). 반투명 + backdrop-filter 면 열린 패널 아래로 본문과 3단 줄이 비쳐 「두 판이 겹쳐 보인다」 — 메뉴는 덮는 것이지 섞는 것이 아니다. */ .mega { position:absolute; left:0; right:0; top:100%; z-index:999; background:#fbfbfd; border-bottom:1px solid rgba(0,0,0,.08); box-shadow:0 18px 40px rgba(0,0,0,.10); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; } .mega.open { opacity:1; transform:none; pointer-events:auto; } .mega[hidden] { display:none; } .mega-in { max-width:1440px; margin:0 auto; padding:26px 22px 34px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:34px; } .mega-cap { margin:0 0 12px; font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--ink3); } /* 🔴 09-13 23:2x CIO 「메뉴 안 타이포 통일 … 「주가/데이터」가 제목만큼 큰 것은 결함」. 28px 는 2단 절 이름(21px)보다도 컸다 — 메뉴 항목이 화면 제목보다 크면 위계가 뒤집힌다. 이제 **두 크기뿐**이다: 절(`.mega-l`) 17px/600 · 잎(`.mega-r`) 14px/500. */ .mega-l a { display:block; font-size:17px; line-height:1.9; font-weight:600; letter-spacing:-.01em; color:var(--ink); text-decoration:none; padding:1px 0; } .mega-l a:hover, .mega-l a:focus-visible, .mega-l a.on { color:var(--blue); text-decoration:none; } .mega-r a { display:block; font-size:14px; line-height:1.9; font-weight:500; color:var(--ink2); text-decoration:none; } .mega-r a:hover, .mega-r a:focus-visible { color:var(--ink); text-decoration:none; } .mega-r a.todo { color:var(--ink4); font-weight:500; } body.mega-open .megablur { filter:blur(3px); transition:filter .2s ease; } /* ── 2단 ──────────────────────────────────────────────────────────────────── */ /* 2단도 문서와 함께 지나간다(위 §1단 주석). */ .sbar { position:static; z-index:55; background:#fbfbfd; border-bottom:1px solid rgba(0,0,0,.06); } .sbar-in { max-width:1440px; margin:0 auto; height:50px; padding:0 22px; display:flex; align-items:center; gap:24px; } /* CIO 09-13 03:xx 「운용 저 글씨 볼드체로」 */ .sbar .stitle { font-size:21px; font-weight:700; letter-spacing:-.02em; color:#1d1d1f; flex:0 0 auto; } .sbar .stabs { display:flex; align-items:stretch; height:100%; gap:22px; margin-left:auto; overflow-x:auto; overflow-y:clip; scrollbar-width:none; } .sbar .stabs::-webkit-scrollbar { display:none; } /* CIO 09-13 03:xx 「포트폴리오·리포트 저 파트 다 글씨를 살짝 줄여줘」 — 15 → 13px */ .sbar .stabs a { display:flex; align-items:center; height:100%; box-sizing:border-box; font-size:13px; color:#1d1d1f; opacity:.8; text-decoration:none; white-space:nowrap; padding:0; border-bottom:2px solid transparent; } .sbar .stabs a:hover { opacity:1; text-decoration:none; } .sbar .stabs a.on { opacity:1; font-weight:600; border-bottom-color:#1d1d1f; } /* ── 머리 한 줄 — **스크롤에서 살아남는 유일한 줄** ──────────────────────────── 🔴 09-13 17:1x CIO 「세줄이 아니라 세번째 줄은 캘린더 바로 옆에 토글 잇게 하랬자너 줄 투명하게 하고」 ⇒ 두 가지가 바뀐다: ① 알약을 **오른쪽 끝으로 밀지 않는다**(`margin-left:auto` 폐지) — 제목 **바로 옆** 14px 에 붙는다. 좁아지면 제목 아래로 **접힐 뿐** 둘째 띠가 되지 않는다. ② **띠를 없앤다** — 바탕색 `transparent` · 아래 경계선 0. 남기는 것은 배경 블러뿐이다 (이 줄은 스크롤에서 살아남으므로 뒤로 본문이 지나간다 — 블러마저 빼면 글자가 본문 위에 겹쳐 읽히지 않는다. 「투명」은 **띠(색·선)** 를 없애라는 뜻으로 읽었다). 🔴 같은 자리 「캘린더 글씨 좀 별로다 그리고. 좀더 작게」 ⇒ **3단 제목 스케일 = 17px / 500** (종전 22px / 700). 서체는 1단 바와 같은 `var(--font)` 를 **명시**한다 — 페이지마다 다른 스택을 물려받으면 같은 줄이 화면마다 다른 얼굴이 된다. ⚠ 2단 절 이름(`.sbar .stitle` 21px / 700)보다 **작고 가볍다** — 위계가 뒤집히면 3단이 2단처럼 읽힌다. 두 수를 같이 고치지 않으면 이 규약이 깨진다. ⚠ 토큰(`--`)은 여기서 선언하지 않는다(게이트 [7]) — 스케일은 **이 주석의 수**가 정본이다. */ .pagehead { position:sticky; top:0; z-index:900; background:transparent; border-bottom:0; -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); } .pagehead .ph-in { max-width:1440px; margin:0 auto; min-height:44px; padding:5px 22px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; } /* ⚠ 선택자는 `.pagehead .ph-in h1`(특이도 0,2,1) — `.pagehead h1`(0,1,1)로 두면 낱장이 가진 `.pf-wrap h1`(같은 특이도, **나중에 링크된 파일**)이 이긴다. 09-13 실측: portfolio_lo·ls 두 장만 20px/600 으로 떠 있었다(나머지 31장은 17px/500) — 「공용 CSS 를 만들었다」와 「모두가 그걸 지킨다」가 갈리는 자리다. */ .pagehead .ph-in h1 { font-family:var(--font); font-size:17px; line-height:1.3; font-weight:500; letter-spacing:-.01em; margin:0; color:var(--ink); flex:0 0 auto; } .pagehead .ph-pills { margin-left:0; display:flex; align-items:center; min-width:0; } .pagehead .ph-pills .segwrap { margin:0; } /* 낡음 배지는 제목 옆 작은 글씨로 — 줄 높이를 늘리지 않는다. */ .pagehead .stalebadge { font-size:11px; } /* 기준일 줄·옛 제목은 **지우지 않고** 고정 줄 **밖**(아래)으로 내린다 — id·핸들러가 살아야 한다. */ /* 🔴 09-13 23:0x CIO 「일단 캘린더부터 이상한데?」 — 머리 한 줄 아래에 **옛 머리가 그대로** 있었다: 「기준일 … · 생성 … · 전체 1009행 · 상세 창 …」 + 설명 문단 둘. 종전 판은 그 노드를 **옮기기만** 하고 `.pagemeta` 를 그대로 보여 줬다 — 옮긴 것을 「치웠다」고 읽은 것이 결함이다. 이제 자리는 **안 보인다**(노드는 산다 — `getElementById('asof').innerHTML` 을 치는 페이지 스크립트가 있다, 09-12 실사고). 문면은 `page_head.js` 가 **각주로** 넘긴다 (CIO 「본문 주의문 금지·각주만」). */ .pagemeta { display:none; } /* 🔴 09-13 17:5x CIO 「이름은 왜 두겹이며」 — 3단 머리 「내부자 사전공시」 아래에 페이지 자체 `h1` 「내부자 거래계획 사전공시 — 계획일 30일 전」이 또 떴다. 제목의 자리는 **머리 한 줄 하나**다. 두 축으로 막는다: ① `.oldh1` — `page_head.js`/허브가 옮기거나 표시한 옛 제목(요소는 살려 둔다: `getElementById` 로 그 노드를 만지는 페이지 스크립트가 있다 — 09-12 실사고). ② `:has()` — **나중에 그려지는** 제목까지 막는다(허브 타일은 렌더 뒤에 h1 을 넣는다). JS 한 번만으로는 늦게 오는 것을 놓친다. */ /* 🔴 09-14 00:2x CIO 「밑에 빈칸이 페이지들마다 왜이리 크며」 — 각주 아래 여백 ≤32px 규약. 낱장은 저마다 `.wrap { padding:0 24px 56px }` 을 적어 두고, 그 아래 각주 블록이 또 자기 여백을 갖는다(실측 `overnight_brief` 87px). 특이도로 이긴다(`:has` 가 한 칸 더 얹는다) — `!important` 는 안 쓴다. 좌우 여백은 건드리지 않는다(화면마다 다른 이유가 있다). */ body:has(.pagehead) .wrap { padding-bottom:24px; } body:has(.pagehead) footer.footnote { margin-bottom:0; } .oldh1 { display:none; } /* 🔴 옛 내비 크롬 — **머리 밖의 3단 알약 줄·빵부스러기**(「A 시장 › 캘린더 › 종합」). `page_head.js` 의 `sweepLegacy()` 가 도장(`data-ph-legacy`)을 찍고 여기서 감춘다. JS 로 `style.display` 를 직접 치던 종전 방식은 **페이지가 다시 그리면 되살아났다** — 페이지 스크립트가 렌더 뒤에 `innerHTML` 을 갈아 끼우는 자리가 여럿이다(09-13 실측). ⚠ 감추는 것은 **내비 알약**뿐이다 — 본문 필터 토글(`.seg` 안이 `