/* ============================================================
* 놀아 계정 — 로그인 버튼 (Sign in with Nolaa) 독립 실행 CSS
* devplan12 차수6
*
* 사용법
* 1) 이 파일을 그대로 여러분의 사이트에 포함하세요:
* 2) 놀아로 계속하기 처럼
* 배경 클래스(--light/--dark/--filled/--icon) 1개 + 높이 클래스(--40/--44/--48) 1개를 함께 붙이세요.
* 3) 이 파일은 이 프로젝트의 CSS 변수(--brand-primary 등)에 의존하지 않습니다. 값은 모두 고정 HEX이며
* 임의로 바꾸면 안 됩니다. 자세한 규정은 /developers/brand, /developers/button 문서를 참고하세요.
* ============================================================ */
/* ★ w1 메모 — 위 블록부터 "Work is 1 확장" 주석 전까지는 놀아가 배포한 원본이다.
* https://account.nola.kr/brand/nolaa-button.css (2026-09-04 수령)
* 브랜드가 갱신되면 이 구간만 통째로 갈아끼우고 아래 확장부는 그대로 둔다. 손대지 말 것. */
.nolaa-btn {
/* nolaa-mark.svg 를 인라인 data URI로 내장 — 외부 서버 요청 없이 항상 렌더됩니다. */
--nolaa-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='1.5' y='1.5' width='45' height='45' rx='11' fill='%23FFFFFF' stroke='%2315120F' stroke-width='2.8'/%3E%3Cg transform='translate(24 24) scale(.7) translate(-26.35 -23.75)'%3E%3Cpath d='M14.6 8.4c-2.3 0-3.9 1.8-3.9 4.2v19.6c0 5 3.7 8.6 8.9 8.6h16.1c2.3 0 3.9-1.5 3.9-3.7s-1.7-3.8-4-3.9l-15.1-.6c-1.4 0-2-.8-2-2.3V12.6c0-2.4-1.6-4.2-3.9-4.2z' fill='%2315120F'/%3E%3Crect x='32' y='6.6' width='10' height='10' rx='2.4' fill='%23D6342C'/%3E%3C/g%3E%3C/svg%3E");
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 16px;
border-radius: 8px;
border: 1px solid transparent;
font-family: inherit;
font-weight: 700;
font-size: 14px;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.nolaa-btn::before {
content: "";
flex: none;
display: inline-block;
background-image: var(--nolaa-mark);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* 높이 3종 — 서비스 내에서는 하나만 골라 통일해서 쓰세요. 마크 크기는 높이에 비례합니다. */
.nolaa-btn--40 { height: 40px; }
.nolaa-btn--40::before { width: 20px; height: 20px; }
.nolaa-btn--44 { height: 44px; }
.nolaa-btn--44::before { width: 22px; height: 22px; }
.nolaa-btn--48 { height: 48px; }
.nolaa-btn--48::before { width: 24px; height: 24px; }
/* 배경 4종 */
.nolaa-btn--light {
background-color: #FFFFFF;
border-color: #DADDE3;
color: #15120F;
}
.nolaa-btn--light:hover { background-color: #F5F6F8; }
.nolaa-btn--light:active { background-color: #EBEDF1; }
.nolaa-btn--dark {
background-color: #20242C;
border-color: #333944;
color: #F2F4F7;
}
.nolaa-btn--dark:hover { background-color: #282D36; }
.nolaa-btn--dark:active { background-color: #171A20; }
.nolaa-btn--filled {
background-color: #D6342C;
border-color: transparent;
color: #FFFFFF;
}
.nolaa-btn--filled:hover { background-color: #B22A23; }
.nolaa-btn--filled:active { background-color: #8E211B; }
/* 아이콘 전용(정사각, 글자 없음) — 마크만 표시합니다. 마크 크기는 높이 클래스가 그대로 결정합니다. */
.nolaa-btn--icon {
background-color: transparent;
border-color: transparent;
padding: 0;
gap: 0;
}
.nolaa-btn--icon.nolaa-btn--40 { width: 40px; }
.nolaa-btn--icon.nolaa-btn--44 { width: 44px; }
.nolaa-btn--icon.nolaa-btn--48 { width: 48px; }
.nolaa-btn--icon:hover { background-color: rgba(21, 18, 15, .06); }
.nolaa-btn--icon:active { background-color: rgba(21, 18, 15, .12); }
/* 포커스 상태 — 키보드 사용자를 위한 필수 표시 */
.nolaa-btn:focus-visible {
outline: 2px solid #D6342C;
outline-offset: 2px;
}
/* ============================================================
* ↓↓↓ 여기서부터 Work is 1 확장 — 놀아 원본이 아니다 ↓↓↓
*
* 새 클래스만 추가하고 원본 클래스는 덮어쓰지 않는다.
* 사용하는 색값은 전부 위 원본(--light/--dark)에서 그대로 가져온 것이며 새로 만든 색은 없다.
* ============================================================ */
/* --auto : 테마 연동용.
* 놀아 CSS 는 밝기를 클래스로 고르지만, w1 은 가 실행 중에 바뀐다
* (로그인 화면 우측 상단 토글 + localStorage). 서버가 테마를 알 수 없으므로 클래스로 고를 수 없다.
* → --auto 한 장만 붙이고, 다크일 때만 원본 --dark 의 값으로 교체한다. */
.nolaa-btn--auto {
background-color: #FFFFFF;
border-color: #DADDE3;
color: #15120F;
}
.nolaa-btn--auto:hover { background-color: #F5F6F8; }
.nolaa-btn--auto:active { background-color: #EBEDF1; }
[data-theme="dark"] .nolaa-btn--auto {
background-color: #20242C;
border-color: #333944;
color: #F2F4F7;
}
[data-theme="dark"] .nolaa-btn--auto:hover { background-color: #282D36; }
[data-theme="dark"] .nolaa-btn--auto:active { background-color: #171A20; }
/* --block : 폼 폭에 맞춰 늘리기.
* 브리프는 높이·모서리·여백만 규정하고 폭은 규정하지 않는다.
* 로그인 폼의 기본 버튼(.auth__submit — 44px 전체폭) 바로 아래에 놓이므로 폭을 맞춘다.
* 브리프 §5 "다른 로그인 버튼보다 작게 배치" 금지 조항도 이걸로 충족된다. */
.nolaa-btn--block { display: flex; width: 100%; }