/* ── 사이트 전역 앱 크롬 (W1) — includes/site-chrome.php 가 wp_footer 에 그린다 ──
*
* 팔레트 = 클로드디자인 앱 크롬 (allo-app/src/theme/tokens.ts dc 실측값):
* 잉크 #1A1710 · 활성 #E2600F · 비활성 #A39C8F · 주황 그라디언트 #F2751A→#DE5B0B
* 유리 = blur(12) + rgba(255,255,255,.72) + 0.5px 링 · 바 라운드 22 · 좌우 12px 띄움
*
* 전 규칙 #allo-sc 스코프 — 테마/엘리멘터에 한 픽셀도 새지 않게.
* (예외 1개: body.allo-sc-on 모바일 하단 여백 — 바가 마지막 콘텐츠·위저드 버튼을 안 가리게)
* 폰트는 Pretendard 를 선언만 한다 — 없는 페이지는 시스템 폰트로 폴백 (site-chrome 이
* 폰트 CSS 를 새로 싣지는 않는다: 전 페이지 렌더차단 요청 추가 금지, SEO/속도 보호).
*/
#allo-sc,
#allo-sc * { box-sizing: border-box; margin: 0; padding: 0; }
#allo-sc {
font-family: Pretendard, 'Pretendard JP', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Noto Sans KR', 'Noto Sans JP', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* ── ⓪ 앱식 사이트 헤더 (W5 — 앱 app-header.tsx 실측 이식) ─────────────────────
* 크림 판(#F7F3ED — 리스킨 --akrs-cream 과 같은 값) + 0.5px 잉크 헤어라인.
* 높이 60px = 앱 HEADER_BAR_H 62 에서 여유 2 를 뺀 웹 실측치 — 이 값이 3단 레일
* topFixedBottom 실측의 새 기준이 된다 (fixed·전폭이라 topCands 에 걸린다 — 의도).
* z-index 630: 페이지 콘텐츠 위 / 레일·필(640)·포탈 akp-nav(900)·모달(9999+) 아래.
* top 은 site-chrome.js 가 관리자바·TP 언어바 실측만큼 내려준다 (기본 0).
* 상태 3버전(사장님 7차 ⓐ): data-hd = guest(Log in) / member(Apply Now + 사람) /
* applied(My page). 서버 초기값 → 쿠키 → mystate 순으로 JS 가 덮는다. */
#allo-sc .allo-hd {
position: fixed; top: 0; left: 0; right: 0; z-index: 630;
height: 60px; display: flex; align-items: center; gap: 8px;
padding: 0 16px; /* max() 미지원 구형 폴백 */
/* 내용물 1140 중앙 정렬 (사장님 2026-08-14 ③) — 바는 전폭, 홈버튼·우측 버튼은 본문
1140 컬럼의 좌우 세로선에 맞춘다. 1140+32 미만 화면에선 그냥 16px 패딩. */
padding: 0 max(16px, calc((100% - 1140px) / 2));
background: #F7F3ED;
box-shadow: 0 .5px 0 rgba(26,23,16,.08);
}
/* 워드마크 — 정중앙 고정 (앱: 로고 중앙 배치), 누르면 홈 */
#allo-sc .allo-hd-brand {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
display: inline-flex; align-items: center; padding: 8px 4px; line-height: 0;
text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* 153×29 = 기존 118×22 의 +30% (사장님 2026-08-14 ② — 헤더 높이 60px 유지, 모바일 동일 비율) */
#allo-sc .allo-hd-brand img { display: block; width: 153px; height: 29px; object-fit: contain; }
#allo-sc .allo-hd-brand b { font-size: 21px; font-weight: 800; letter-spacing: .02em; color: #1A1710; line-height: 1; }
/* <768px 의 헤더 구성은 아래 "모바일 = 앱 헤더 클론(A-2)" 블록이 통째로 맡는다.
(2026-08-14 저녁 사장님: "모바일 헤더는 우리 앱꺼랑 똑같이" — 워드마크는 앱처럼 다시
**중앙 고정**이고, 우측은 사람 아이콘 하나뿐이라 예전의 375px 오버플로가 사라졌다.
그래서 옛 좌측정렬·위저드 압축 규칙은 필요 없어져 제거했다.) */
/* 홈 버튼 — 위저드 페이지 전용 (서버가 위저드에서만 렌더). 44×44 = 앱 터치 표준 */
#allo-sc .allo-hd-home {
width: 44px; height: 44px; border-radius: 15px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
color: #1A1710; background: rgba(255,255,255,.92); text-decoration: none;
box-shadow: inset 0 .5px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(26,23,16,.08),
0 2px 6px rgba(25,31,40,.10);
-webkit-tap-highlight-color: transparent; transition: transform .18s ease;
}
#allo-sc .allo-hd-home:active { transform: scale(.92); }
/* 우측 버튼 묶음 */
#allo-sc .allo-hd-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Log in — 흰 알약 (접힘 버블 재질: 흰 배경 + 0.5px 잉크 링) */
#allo-sc .allo-hd-login {
height: 40px; padding: 0 16px; border-radius: 14px;
display: inline-flex; align-items: center;
background: rgba(255,255,255,.92); color: #1A1710; text-decoration: none;
font-size: 13px; font-weight: 600; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
box-shadow: inset 0 .5px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(26,23,16,.08),
0 2px 6px rgba(25,31,40,.10);
-webkit-tap-highlight-color: transparent; transition: transform .18s ease;
}
#allo-sc .allo-hd-login:active { transform: scale(.96); }
/* Apply Now — 앱 실측: h40 · r14 · 그라디언트(#F2751A→#DE5B0B) + 상단 스페큘러 + 주황 글로우 */
#allo-sc .allo-hd-apply {
height: 40px; padding: 0 16px; border-radius: 14px; position: relative; overflow: hidden;
display: inline-flex; align-items: center;
background: linear-gradient(180deg, #F2751A, #DE5B0B); color: #fff; text-decoration: none;
font-size: 13px; font-weight: 700; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 4px 14px -4px rgba(242,117,26,.6);
-webkit-tap-highlight-color: transparent; transition: transform .18s ease;
}
#allo-sc .allo-hd-apply:active { transform: scale(.96); }
/* 사람 아이콘 — my-page 바로가기 (member 상태에서 Apply Now 옆) */
#allo-sc .allo-hd-ic {
width: 40px; height: 40px; border-radius: 14px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.92); color: #1A1710; text-decoration: none;
box-shadow: inset 0 .5px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(26,23,16,.08),
0 2px 6px rgba(25,31,40,.10);
-webkit-tap-highlight-color: transparent; transition: transform .18s ease;
}
#allo-sc .allo-hd-ic:active { transform: scale(.92); }
/* My page — 흰 알약 + 미니 주황 아바타 (필 .allo-sc-my 와 같은 문법) */
#allo-sc .allo-hd-my {
height: 40px; padding: 0 14px 0 10px; border-radius: 14px;
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,.92); color: #1A1710; text-decoration: none;
font-size: 13px; font-weight: 600; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
box-shadow: inset 0 .5px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(26,23,16,.08),
0 2px 6px rgba(25,31,40,.10);
-webkit-tap-highlight-color: transparent; transition: transform .18s ease;
}
#allo-sc .allo-hd-my:active { transform: scale(.96); }
#allo-sc .allo-hd-myav {
width: 24px; height: 24px; border-radius: 999px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(180deg, #F2751A, #DE5B0B); color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
#allo-sc .allo-hd-myav svg { width: 13px; height: 13px; }
/* 상태 토글 — 기본 전부 숨기고 data-hd 가 켠다 (서버 초기값 → 쿠키 → mystate) */
#allo-sc .allo-hd-login, #allo-sc .allo-hd-apply,
#allo-sc .allo-hd-ic, #allo-sc .allo-hd-my { display: none; }
#allo-sc .allo-hd[data-hd="guest"] .allo-hd-login { display: inline-flex; }
#allo-sc .allo-hd[data-hd="member"] .allo-hd-apply,
#allo-sc .allo-hd[data-hd="member"] .allo-hd-ic { display: inline-flex; }
#allo-sc .allo-hd[data-hd="applied"] .allo-hd-my { display: inline-flex; }
/* 위저드: Log in 금지 — OAuth 왕복이 작성 중 입력을 날린다 (필 제거와 같은 이유, W1 major#2) */
#allo-sc .allo-hd[data-wizard="1"] .allo-hd-login { display: none; }
/* ── ☰ 메뉴 버튼 (A-2) — 앱 app-header.tsx RoundBtn 44×44 · BUBBLE_R 15 실측 ──
* 데스크톱(≥768)에서는 안 쓴다 (헤더 폴리시 v2 = 로고+언어칩+상태버튼 그대로). */
#allo-sc .allo-hd-burger {
display: none; width: 44px; height: 44px; border-radius: 15px; flex: 0 0 auto;
align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer;
background: rgba(255,255,255,.92); color: #1A1710; line-height: 0;
box-shadow: inset 0 .5px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(26,23,16,.08),
0 2px 6px rgba(25,31,40,.10);
-webkit-tap-highlight-color: transparent; transition: transform .18s ease;
}
#allo-sc .allo-hd-burger:active { transform: scale(.9); }
/* 커뮤니티 전용 돋보기 (A-3) — 기존 aq-toolbar 검색 시트를 여는 트리거(data-aq-msearch) */
#allo-sc .allo-hd-search {
display: none; width: 40px; height: 40px; border-radius: 14px; flex: 0 0 auto;
align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer;
background: rgba(255,255,255,.92); color: #1A1710; line-height: 0;
box-shadow: inset 0 .5px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(26,23,16,.08),
0 2px 6px rgba(25,31,40,.10);
-webkit-tap-highlight-color: transparent; transition: transform .18s ease;
}
#allo-sc .allo-hd-search:active { transform: scale(.92); }
/* ══════════════════════════════════════════════════════════════════════════
모바일(<768) = 앱 헤더 클론 (A-2 — 사장님 2026-08-14 저녁)
[좌 ☰ 메뉴 · 중앙 ALLO KOREA 워드마크(→홈) · 우 사람(→my-page)]
· 언어 선택기·Log in·Apply Now·My page 알약은 **드로어 안으로** 들어갔다 (앱과 같은 자리).
· 위저드 홈 버튼도 숨긴다 — ☰ 와 같은 좌측 자리를 두고 다툰다. 홈으로 가는 길은 없어지지
않는다: 가운데 워드마크 자체가 홈 링크다(.allo-hd-brand → $u['home'], 앱과 같은 규칙).
※ 드로어에는 Home 행이 없다 — GUIDES 4 · SERVICES 3 · 유틸 2 뿐이다(allo_sc_drawer_render).
· 폭 실측(375, 박스 = img + 좌우 패딩 4): ☰ 16~60 … 중앙 107~268 … 우 319~359 — 겹침 0.
커뮤니티(돋보기 +48)에서도 271 시작 = 3px 여유로 통과. 320px 는 아래 로고 축소로 처리.
이 블록은 위 상태 토글(1,3,0)들보다 **뒤**에 있어 같은 특정도로 이긴다 — 순서가 계약이다.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
/* 고정 보장 — 테마/엘리멘터가 흐름을 건드려도 헤더는 화면에 붙어 있어야 한다
(사장님 스크린샷 "헤더 말려올라감" 방어). top 은 site-chrome.js 가 관리자바만큼 내려준다. */
#allo-sc .allo-hd {
position: fixed !important; left: 0 !important; right: 0 !important;
transform: none !important; margin: 0 !important;
}
#allo-sc .allo-hd-burger { display: inline-flex; }
#allo-sc .allo-hd[data-hd] .allo-hd-home,
#allo-sc .allo-hd[data-hd] .allo-hd-lang,
#allo-sc .allo-hd[data-hd] .allo-hd-login,
#allo-sc .allo-hd[data-hd] .allo-hd-apply,
#allo-sc .allo-hd[data-hd] .allo-hd-my { display: none; }
/* 사람 아이콘은 로그인 상태와 무관하게 항상 (앱 헤더 우측 = 사람 하나) */
#allo-sc .allo-hd[data-hd] .allo-hd-ic { display: inline-flex; }
#allo-sc .allo-hd[data-hd] .allo-hd-search { display: inline-flex; }
}
/* 320px 급 화면 — 중앙 워드마크가 우측 버튼과 만나기 전에 한 단계 줄인다 */
@media (max-width: 359.98px) {
#allo-sc .allo-hd-brand img { width: 120px; height: 23px; }
/* 커뮤니티는 우측에 돋보기가 하나 더 붙는다(40 + gap 8) — 우측 묶음 시작점이 320px 에서
264(일반) → 216 으로 당겨진다. 위 120px 워드마크는 박스가 128(96~224)이라 그 돋보기를
8px 파고든다 (실측 2026-08-14 통합검증). 돋보기·사람은 40px 터치 타깃이라 줄일 수 없으니
이 조합에서만 워드마크를 한 단계 더 줄인다: 96px → 104(108~212) → 216 앞에 4px 남는다.
≥360 과 비커뮤니티는 한 글자도 안 바뀐다 — 실제로 깨지는 조합에만 건다. */
body.allo-sc-com #allo-sc .allo-hd-brand img { width: 96px; height: 18px; }
}
/* ── 헤더 언어 선택기 (사장님 2026-08-14 ④) — 앱 웰컴 언어칩 감각의 작은 알약 ──
* 우측 버튼 왼쪽. 스크롤 내리면(scrollY>80) 선택기만 fade — site-chrome.js 가 hd-lang-hide 를 단다. */
#allo-sc .allo-hd-lang {
position: relative; flex: 0 0 auto; line-height: 0;
transition: opacity .22s ease, visibility .22s;
}
#allo-sc .allo-hd.hd-lang-hide .allo-hd-lang { opacity: 0; visibility: hidden; pointer-events: none; }
#allo-sc .allo-hd-lang-btn {
height: 32px; padding: 0 11px; border-radius: 999px; border: 0; cursor: pointer;
display: inline-flex; align-items: center; gap: 5px;
background: rgba(255,255,255,.92); color: #1A1710;
font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1;
box-shadow: inset 0 .5px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(26,23,16,.08),
0 2px 6px rgba(25,31,40,.10);
-webkit-tap-highlight-color: transparent; transition: transform .18s ease;
}
#allo-sc .allo-hd-lang-btn:active { transform: scale(.94); }
#allo-sc .allo-hd-lang-btn svg { display: block; opacity: .55; }
#allo-sc .allo-hd-lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
#allo-sc .allo-hd-lang-menu {
position: absolute; top: calc(100% + 8px); right: 0; min-width: 74px; z-index: 5;
padding: 6px; border-radius: 14px; background: #fff;
box-shadow: inset 0 .5px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(26,23,16,.08),
0 14px 34px -12px rgba(26,23,16,.32);
}
#allo-sc .allo-hd-lang-menu[hidden] { display: none; }
#allo-sc .allo-hd-lang-menu a {
display: block; padding: 9px 12px; border-radius: 9px;
color: #1A1710; text-decoration: none; text-align: center;
font-size: 12.5px; font-weight: 600; letter-spacing: .02em; line-height: 1;
-webkit-tap-highlight-color: transparent;
}
#allo-sc .allo-hd-lang-menu a:hover { background: #F7F3ED; }
#allo-sc .allo-hd-lang-menu a[aria-current="true"] { color: #E2600F; font-weight: 800; }
/* ══════════════════════════════════════════════════════════════════════════
A-1 모바일 헤더 깨짐 수리 (사장님 2026-08-14 저녁 스크린샷: 상단 English 행 + 큰 흰 여백)
원인 (라이브 저장본 실측 — scratchpad/home-live.html):
테마 헤더는 `