/* ============================================================
 * 놀아 계정 — 로그인 버튼 (Sign in with Nolaa) 독립 실행 CSS
 *
 * ⚠️ 이 파일은 놀아 계정 브랜드 브리프의 **원본 사본이다. 임의 수정 금지.**
 *    출처: https://account.nola.kr/developers/brief  (§4.4 "CSS 전문")
 *    사본 시각: 2026-09-04 · 브리프 생성시각 2026-09-04 01:43:37
 *    브랜드가 갱신되면 위 주소에서 전문을 다시 받아 이 파일을 통째로 교체할 것.
 *    (외부 link 대신 사본을 두는 이유: 마크가 data URI 라 외부 요청이 0건이고,
 *     account.nola.kr 이 응답하지 않아도 로그인 버튼이 깨지지 않는다.)
 *
 * 우리 프로젝트에서의 위치 조정(폭·표시여부 등)은 이 파일이 아니라
 * `public/assets/np/app.css` 의 `.gnb-login-*` 규칙에서 한다.
 * ============================================================ */

.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;
}