/* IA v2 (SAYO_IA_V2) 전용 스타일시트.
*
* 이 파일은 플래그가 ON 인 빌드에서만 dist 로 나가고, 그때만 두 셸
* (base.html · app/base.html) 의 head 에 로 실린다. `style.css` 에는 한
* 바이트도 넣지 않는다 - 그 파일은 OFF 산출물의 정본이라 거기 규칙을 더하면
* "OFF 빌드 바이트 무변" 오라클이 그 자리에서 죽는다. 고양이 `cat/` · 셸
* `app-shell/` 과 같은 처분이다.
*
* 규율 둘:
* - 모든 선택자는 `body.ia-v2` 아래로 스코프한다. 스코프 밖 규칙은 OFF
* 산출물에는 안 실리지만, ON 에서 v2 가 아닌 표면(법무·어드민 셸)까지
* 번질 자리를 만든다.
* - 값은 `var(--...)` 토큰만 쓴다 (DESIGN 3.6). 색·간격 리터럴 금지.
*/
/* [U2-0] 플래그 스코프. 규칙은 후속 유닛이 채운다. */
body.ia-v2 {
}
/* [impeccable critique 2026-09-24 접근성] 건너뛰기 링크는 잉크 바탕 위 바탕색
* 글자인데(`style.css` `.skip-link`), 전역 `a:hover` 가 hover 때 글자를
* `--accent` 로 바꿔 #4f46e5 on #18181b = 2.8:1 로 떨어졌다. hover·focus 에서도
* 글자를 바탕색으로 고정한다(잉크/바탕 짝 = 본문 대비). `style.css` 는 OFF
* 정본이라 무접촉 - OFF 산출물에는 같은 결함이 남는다(PR 본문). */
body.ia-v2 .skip-link:hover,
body.ia-v2 .skip-link:focus,
body.ia-v2 .skip-link:focus-visible {
color: var(--bg);
text-decoration: none;
}
/* [U2-1 · 가안 2026-09-19] 경량 크롬 헤더 - 로고(좌) + [로그인]·[시작하기](우).
*
* 탭 레일(`nav.site-nav-links`)도 로그인 UI 도 ON 에서는 DOM 에 없으므로
* `style.css` 의 그 규칙들은 무효화할 대상 자체가 없다(부재로 닫는다).
* 여기서 잠그는 것은 남은 세 요소가 좁은 폭에서도 한 줄을 유지하는 것과,
* 우측 둘 중 [시작하기] 만 "채운 버튼" 으로 읽히는 것 둘뿐이다 [실측: 360px
* 에서 한 줄, 아래 텍스트 링크·채운 버튼 블록].
*/
body.ia-v2 .site-header-lite .site-header-inner,
body.ia-v2 .site-header-lite .site-header-actions {
flex-wrap: nowrap;
}
/* [IA-V2 HEADER] 상단바 = 지면 위에 얹힌 얇은 유틸리티 줄.
*
* Kevin 2026-09-19: "상단바 역할이 바뀌었는데 색깔이랑 두께랑 왜 다 그대로냐".
* `style.css` 의 `.site-header-bar` 값(흰 fill · 하단 1px 선 · sticky · 글래스
* blur)은 5탭 레일과 로그인 UI 를 이고 있던 **내비 띠**의 값이다. v2 공개면에
* 남은 것은 로고 하나와 앱 진입 둘뿐이라, 그 자리는 띠가 아니라 줄이다.
* 띠를 지우면 지면이 상단에서 끊기지 않고 그대로 이어져 올라간다.
*
* 왜 각 선언이 필요한가 - `style.css` 에서 되살아나는 것들을 하나씩 닫는다:
* - `position` : `.site-header-bar` 가 `sticky; top: 0; z-index: 50`.
* static 으로 내리면 z-index 도 같이 무의미해진다(별도 선언 안 한다).
* - `padding` : `@media (min-width: 720px)` 의 `.site-header { padding-top:
* 28px }` 가 `.site-header-bar { padding: 0 }` 보다 **뒤에** 있어 이긴다.
* 그 28px 이 데스크톱 90.8px 의 주범이다.
* - `background`·`border-bottom` : 기본 블록 + `@supports` 글래스 블록 +
* `prefers-reduced-transparency` 블록 셋이 같은 두 속성을 쓴다. 전부
* `.site-header-bar`(0,1,0) 라 이 (0,2,0) 규칙 하나가 셋을 같이 덮는다.
* - `backdrop-filter` : 배경을 투명으로 내려도 blur 는 계속 걸린다. 지면이
* 상단에서 흐려지면 "얹혀 있다" 가 아니라 "덮여 있다" 로 읽힌다.
*
* 높이는 두 단이다: <768 은 56px, >=768 은 64px. 768 은 새 폭 체계가 아니라
* `style.css` 가 이미 쓰는 단이다(`@media (min-width: 768px)` 의 quiet-card
* 2열 그리드). 안쪽 내용 실측은 이 상한 아래다 - 최대치는 >=641 의 워드마크
* 줄 상자(22px 글자 + 위아래 --space-3) 약 50px 과 CTA 36px 이고, coarse
* pointer/<=640 에서는 M-3 탭 표면 규칙이 CTA 를 44px 로 올리므로 56px 안에
* 12px 여유로 앉는다.
*
* 좌우 거터는 **안 건드린다**. `.site-header-inner` 의 880px/18px 는 전역
* `main` 규칙의 거울이라 이미 본문과 같은 자리에서 시작한다.
*/
body.ia-v2 .site-header-lite {
position: static;
height: 56px;
padding: 0;
background: transparent;
border-bottom: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
@media (min-width: 768px) {
body.ia-v2 .site-header-lite {
height: 64px;
}
}
/* [헤더 우측 가안 2026-09-19] 텍스트 [로그인] + 채운 [시작하기].
*
* 값은 전부 tokens.css 의 기존 토큰이다 - 새 팔레트 0.
*
* **이 블록은 9/19 오전의 고스트 버튼 규칙을 대체한다.** 그 판의 근거는 "헤더가
* 화면에서 가장 무거운 덩어리가 되면 안 된다" 였고 그래서 면색을 뺐다. 같은 날
* 확정된 가안은 그 근거를 뒤집지 않는다 - 무게를 나누는 방법을 바꿀 뿐이다:
* 요소는 둘인데 **채운 면은 하나**이고, 다시 온 사람이 찾는 [로그인] 은 텍스트로
* 물러난다. 강조가 하나라는 계약은 그대로고, 그 하나가 이제 할 일을 말한다.
*
* [로그인] 은 쉬는 색이 `--sub` 다. 헤더의 다른 텍스트 링크(`style.css` 의
* `.site-nav-links a` · `.nav-app-open`)가 쓰는 바로 그 값이라 유틸리티 줄의
* 리듬이 한 벌로 남고, hover 에서 `--ink` 로 **진해지는** 여지도 거기서 나온다
* (쉬는 색이 이미 `--ink` 면 더 진해질 칸이 없다). 밑줄은 없다 - 있으면 이 줄에서
* 유일하게 남는 밑줄이 된다(`.nav-app-open` 이 같은 이유로 지운다).
*
* [시작하기] 는 `--primary` 3종이다. `--accent` 를 직접 쓰지 않는 이유는 다크에서
* accent 가 밝은 인디고(#a5b4fc)라 흰 글자가 안 서기 때문이다 - `--primary-
* foreground`(= `--accent-ink`)가 라이트 #ffffff · 다크 #0d0b09 로 갈려 두 테마
* 대비를 한 선언으로 지킨다. OFF 팔의 채운 브랜드 액션(`.nav-search-pill`)이 쓰는
* 것과 같은 짝이다.
*
* radius 는 `--radius-pill` 이다. 알약은 채운 면을 전제한 모양이고(고스트 판의
* 주석이 같은 말을 반대편에서 했다), 가안 시안의 `btn-fill` 도 알약이다.
*
* 높이 36px 는 유틸리티 줄의 값이고(v1 40px), coarse pointer 의 44px 탭 표면
* 규칙(`style.css` 의 단 하나뿐인 M-3 블록 안 `.nav-app-open` 선언)이 그 위에
* 그대로 얹히므로 모바일 히트 영역은 44px 로 남는다 - `.nav-app-cta` 에
* `min-height` 를 여기서 선언하지 않는다(선언하면 그 접근성 상수를 덮는다).
*
* [F안 2026-09-21 Kevin "시작하기 버튼이 있는데 로그인 버튼은 왜 있는거야"]
* 이 자리에 있던 [로그인] 텍스트 링크 3규칙(기본·hover·focus-visible)과 아래
* coarse pointer 44px 블록을 **함께** 걷어 냈다 - 템플릿에서 그 링크가
* 사라졌으므로 규칙만 남기면 아무것도 안 그리는 선언이 된다. 액션 줄에 남는
* 것은 채운 CTA 하나뿐이라 44/36 혼재도 같이 사라진다.
*/
body.ia-v2 .site-header-lite .nav-app-cta {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
height: 36px;
/* [레이아웃 체계 2026-09-23] 버튼 한 벌의 sm 규격(아래 [레이아웃 체계] 절의
* `.hero-cta-primary` 가 lg). 종전엔 폰에서 `style.css` M-3 블록의
* `.nav-app-open` 의 `min-height: 44px` 가 이 36 을 이겨 80x44 로 로고(45)만큼
* 컸다. 눈에 보이는 상자는 36 으로 두고 44px 탭 표면은 아래 `::before` 가
* 따로 진다(접근성 상수는 그대로, 시각 크기만 sm). */
min-height: 36px;
padding: 0 16px;
border: 0;
border-radius: var(--radius-md); /* [Quiet Ledger K1 2026-10-23] 필 버튼 폐지 - r8 */
background: var(--primary);
color: var(--primary-foreground);
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1;
text-decoration: none;
white-space: nowrap;
box-shadow: none;
transition: background-color 120ms ease-out;
}
/* 탭 표면 44px. 상자는 36 이라 위아래로 4px 씩 보이지 않는 히트 영역을 더한다
* (헤더 줄 56/64 안에 들어간다 - 상자 top 10 -> 히트 top 6). */
body.ia-v2 .site-header-lite .nav-app-cta::before {
content: "";
position: absolute;
inset: -4px 0;
}
body.ia-v2 .site-header-lite .nav-app-cta:hover {
background: var(--primary-hover);
/* `style.css` 의 `.nav-app-open:hover { color: var(--accent) }` 가 글자를
* 브랜드색으로 튀게 만든다 - 채운 면 위에서 그러면 글자가 면에 묻는다. */
color: var(--primary-foreground);
}
body.ia-v2 .site-header-lite .nav-app-cta:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
/* 두 요소 사이 간격. `style.css` 의 `.site-header-actions` 는 `--space-2`(8px)
* 인데, 그 값은 pill·앱 열기·아바타 **넷**이 한 줄에 서던 OFF 팔의 리듬이다.
* 여기는 둘뿐이고 하나는 채운 면이라, 한 단 벌려야 텍스트 링크가 버튼에
* 달라붙지 않는다. 8 -> 12 는 기존 토큰 안의 한 칸이다(새 값 0).
* [F안 2026-09-21] ON 액션 줄이 [시작하기] 하나로 줄었지만 이 gap 은 남긴다 -
* 로고와 CTA 사이 리듬이 그대로여야 한다(ON 전용 셀렉터, OFF 무관). */
body.ia-v2 .site-header-lite .site-header-actions {
gap: var(--space-3);
}
/* [IA-V2 LANDING] 랜딩 히어로 상하배열 - 태그라인 -> 리드 -> 검색창 -> 데모.
*
* Kevin 2026-09-17 "9k1 처럼 태그라인-검색창-데모 상하배열" + 승인 시안
* (`ui-critique-20260917/landing-layouts.html` (A) 안, "랜딩 시안 굿").
*
* 템플릿은 무접촉이다 - `about.html` 의 DOM 순서가 이미 h1 -> 리드 ->
* `.hero-search-col`(폼) -> `