[로그인] 또는 아바타
*
← 도구 버튼 (있을 때만). 바 아래 sticky
* ← 그 아래 전부 도구
*
* ⭐ 색은 셸의 [로그인] 하나뿐이다.
* 도구 버튼은 무채색 회색 채움이고, 주 액션도 색이 아니라 **채움 농도 + 글씨 굵기**로만 구분한다.
* 도구 본문이 무슨 색을 쓰든 껍데기에서 브랜드색과 경쟁하지 않는다.
*
* 2모드:
* .otl--app 리본 빌더처럼 뷰포트에 갇혀 내부에서 자체 스크롤을 만드는 앱형
* .otl--flow 팔레트 생성기처럼 문서처럼 흐르는 형
*
* ⛔ 셸 푸터(.otl-foot)는 2026-08-08 운영자 결정으로 미적용.
* 스펙은 design_handoff_tool_shell/shell.dc.html 「보류 컴포넌트」 섹션에 보존.
*
* v3 토큰은 라이브 테마에 정의돼 있지 않고 정적 SPA 에는 아예 없다.
* → 셸은 --otl-* 토큰을 리터럴로 자급하고, 전역 :root 를 오염시키지 않는다.
*/
/* ─────────────────────────────────────────────
* 페이지 리셋 — 셸이 뷰포트를 온전히 쓰기 위한 최소한
* ───────────────────────────────────────────── */
body.otl-page {
margin: 0;
/* 테마가 깔아 둔 페이지 배경을 셸이 덮지 않도록 흰색을 명시한다 */
background: #fff;
}
/* ─────────────────────────────────────────────
* 셸 루트 + 토큰
* ───────────────────────────────────────────── */
.otl {
--otl-bar-h: 44px;
--otl-surface: #ffffff;
--otl-line: #e6e6e2;
--otl-fg: #1b1b18;
--otl-fg-body: #45453f;
--otl-fg-muted: #8a8a85;
--otl-hover: #f0f0ed;
--otl-focus: #047e57;
/* 도구 버튼 채움 — 무채색 4단. 색이 아니라 농도로 위계를 만든다 */
--otl-fill: #f0f0ed;
--otl-fill-hover: #e6e6e2;
--otl-fill-strong: #e0e0db;
--otl-fill-strong-hover: #d4d4cf;
/*
* CTA 그린 — 라이트·다크 공용. 흰 글씨 5.09:1(AA 통과),
* 다크 바(#171715) 위 면 대비 3.53:1(UI 컴포넌트 3:1 통과)이라 한 값으로 양쪽을 덮는다.
* ⚠️ 브랜드 MAIN #059669 을 쓰면 안 된다 — 흰 글씨가 3.77:1 로 AA 미달이다.
* (v3 도 primary-500 은 '큰 면·비텍스트', primary-600 이 '작은 텍스트·기본 CTA')
*/
--otl-cta: #047e57;
--otl-cta-hover: #036546;
/* 이니셜 아바타 — 브랜드 연한 면. #EEF9F6·#D2F1E7 계열은 채도가 높아 금지 */
--otl-avatar-bg: #e4efea;
--otl-avatar-fg: #036546;
--otl-z-bar: 50;
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
background: #fff;
}
/* 다크는 셸 토큰만 뒤집는다. 도구 테마와 셸 테마는 별개 축이다
(갤러리는 '카드 미리보기 다크'와 '호스트 다크'가 서로 다른 상태다). */
.otl[data-otl-theme='dark'] {
--otl-surface: #171715;
--otl-line: #2e2e2a;
--otl-fg: #ffffff;
--otl-fg-body: rgba(255, 255, 255, 0.72);
--otl-fg-muted: rgba(255, 255, 255, 0.55);
--otl-hover: rgba(255, 255, 255, 0.08);
--otl-focus: #2bb68a;
--otl-fill: rgba(255, 255, 255, 0.1);
--otl-fill-hover: rgba(255, 255, 255, 0.16);
--otl-fill-strong: rgba(255, 255, 255, 0.18);
--otl-fill-strong-hover: rgba(255, 255, 255, 0.26);
--otl-avatar-bg: rgba(255, 255, 255, 0.14);
--otl-avatar-fg: #ffffff;
background: #0f0f0e;
}
/* 앱형 — 뷰포트에 가둔다. 관리자 바가 뜨면 그만큼 줄인다 */
.otl--app { height: 100vh; min-height: 0; }
body.admin-bar .otl--app { height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
body.admin-bar .otl--app { height: calc(100vh - 46px); }
}
/* ─────────────────────────────────────────────
* 상단 바 — 44px. 사이트 헤더(60px)보다 의도적으로 낮다
* ⭐ 모드와 무관하게 항상 상단 고정.
* (앱형은 뷰포트에 갇혀 있어 sticky 가 no-op 이지만, 규칙을 한 곳으로 모아
* "바는 늘 거기 있다"를 코드에서도 하나로 유지한다)
* ───────────────────────────────────────────── */
.otl-bar {
flex: 0 0 auto;
height: var(--otl-bar-h);
position: sticky;
top: 0;
z-index: var(--otl-z-bar);
display: flex;
align-items: center;
gap: 10px;
padding: 0 10px;
background: var(--otl-surface);
/* 구획은 hairline 하나. 그림자와 겹치지 않는다 */
border-bottom: 1px solid var(--otl-line);
}
body.admin-bar .otl-bar { top: 32px; }
@media screen and (max-width: 782px) {
/* 782px 이하에서 WP 관리자 바는 sticky 가 아니라 스크롤과 함께 사라진다 */
body.admin-bar .otl-bar { top: 0; }
}
/* ─────────────────────────────────────────────
* 브랜드 슬롯 — 좌측 첫 자리. 로고가 곧 홈 링크
*
* 좌상단은 "브랜드 = 홈"이 이미 학습된 자리라 hover 라벨 같은 보강이 필요 없다.
* (v1.0 의 `홈 →` 라벨은 로고가 우측에 있던 낯섦을 메우려던 것이라 폐기)
* ───────────────────────────────────────────── */
.otl-brand {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 6px;
text-decoration: none;
transition: background 0.15s ease;
}
.otl-brand:hover,
.otl-brand:focus-visible { background: var(--otl-hover); }
/* 포커스는 한 겹으로 끝낸다 — outline + border + ring 을 겹치지 않는다 */
.otl-brand:focus-visible { outline: 2px solid var(--otl-focus); outline-offset: 1px; }
.otl-brand-img {
display: block;
width: 20px;
height: 20px;
}
/* ─────────────────────────────────────────────
* 도구 이름·부제
* ───────────────────────────────────────────── */
.otl-bar-lead {
display: flex;
align-items: baseline;
gap: 9px;
min-width: 0;
}
/* 브랜드와 도구 이름 사이 hairline — "오빠두 › 이 도구" 락업으로 읽힌다 */
.otl-bar-lead::before {
content: '';
flex: 0 0 auto;
align-self: center;
width: 1px;
height: 18px;
background: var(--otl-line);
margin-right: 4px;
}
.otl-bar-lead:empty::before { display: none; }
.otl-tool-name {
font-size: 14px;
font-weight: 600;
color: var(--otl-fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.otl-tool-sub {
font-size: 12px;
color: var(--otl-fg-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ─────────────────────────────────────────────
* 계정 슬롯 — 셸 고정. 비로그인 [로그인] / 로그인 아바타
* 바에 도구 액션이 없으므로 auto 마진이 계정을 오른쪽 끝으로 민다
* ───────────────────────────────────────────── */
.otl-account {
flex: 0 0 auto;
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
}
/*
* 로그인 = 채운 브랜드 그린. ⭐ 껍데기에서 색을 쓰는 유일한 요소다.
* 색 면이지만 28×56px 남짓이라 화면 10% 규칙에 걸리지 않는다.
*/
.otl-login {
height: 28px;
display: inline-flex;
align-items: center;
padding: 0 12px;
/* 테두리와 색 면을 겹치지 않는다 — 면이 이미 경계다 */
border: 0;
border-radius: 6px;
background: var(--otl-cta);
font-size: 12.5px;
font-weight: 600;
line-height: 1;
color: #fff;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease;
}
.otl-login:hover { background: var(--otl-cta-hover); color: #fff; }
.otl-login:focus-visible { outline: 2px solid var(--otl-focus); outline-offset: 2px; }
.otl-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
/* 완전 원형은 아바타·dot·스위치·스피너 전용 — 아바타는 허용 대상 */
border-radius: 50%;
overflow: hidden;
background: var(--otl-avatar-bg);
color: var(--otl-avatar-fg);
font-size: 12px;
font-weight: 700;
line-height: 1;
text-decoration: none;
}
.otl-avatar:focus-visible { outline: 2px solid var(--otl-focus); outline-offset: 2px; }
.otl-avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* ─────────────────────────────────────────────
* 도구 툴바 — 셸 바 바로 아래 한 줄. 셸이 자리만 잡고 내용은 도구가 채운다
* 버튼이 없는 도구는 이 줄 자체가 렌더되지 않는다(세로 공간 0)
* ───────────────────────────────────────────── */
.otl-toolbar {
flex: 0 0 auto;
position: sticky;
top: var(--otl-bar-h);
z-index: calc(var(--otl-z-bar) - 1);
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--otl-surface);
border-bottom: 1px solid var(--otl-line);
/* 좁은 화면에서 버튼이 넘치면 줄바꿈 대신 가로 스크롤 — 바 높이가 튀지 않는다 */
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.otl-toolbar::-webkit-scrollbar { display: none; }
body.admin-bar .otl-toolbar { top: calc(var(--otl-bar-h) + 32px); }
@media screen and (max-width: 782px) {
body.admin-bar .otl-toolbar { top: var(--otl-bar-h); }
}
/* ─────────────────────────────────────────────
* 도구 버튼 — 회색 채움, 테두리 0
* ⭐ 색을 쓰지 않는다. 주 액션도 채움 농도 + 글씨 굵기로만 구분한다
* ───────────────────────────────────────────── */
.otl-btn {
flex: 0 0 auto;
height: 28px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 12px;
/* 테두리와 면을 겹치지 않는다 — 채움이 이미 경계다 */
border: 0;
border-radius: 6px;
background: var(--otl-fill);
font-family: inherit;
font-size: 12.5px;
font-weight: 500;
line-height: 1;
color: var(--otl-fg-body);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: background 0.15s ease;
}
.otl-btn:hover { background: var(--otl-fill-hover); color: var(--otl-fg); }
.otl-btn:focus-visible { outline: 2px solid var(--otl-focus); outline-offset: 1px; }
/* 주 액션 — 한 툴바에 하나만. 색이 아니라 농도·굵기로 올린다 */
.otl-btn--primary {
background: var(--otl-fill-strong);
color: var(--otl-fg);
font-weight: 600;
}
.otl-btn--primary:hover { background: var(--otl-fill-strong-hover); }
.otl-btn[disabled] { opacity: 0.5; cursor: default; }
.otl-btn[disabled]:hover { background: var(--otl-fill); }
/* ─────────────────────────────────────────────
* 본문 — 그 아래 전부 도구
* ───────────────────────────────────────────── */
.otl-body {
flex: 1 1 auto;
min-height: 0;
}
/* 앱형은 도구가 이 안에서 자체 스크롤을 만든다.
body 전체 스크롤에 의존하면 하단 패널을 가진 도구가 깨진다. */
.otl--app .otl-body { overflow: hidden; }
/* ─────────────────────────────────────────────
* 모바일 — 부제를 버리고 이름만 남긴다
* ───────────────────────────────────────────── */
@media (max-width: 768px) {
.otl-tool-sub { display: none; }
.otl-bar { gap: 8px; padding: 0 8px; }
.otl-toolbar { padding: 6px 8px; }
}