/* ============================================================
 * 놀아 계정 — 로그인 버튼 (Sign in with Nolaa) 독립 실행 CSS
 * devplan12 차수6
 *
 * 사용법
 * 1) 이 파일을 그대로 여러분의 사이트에 포함하세요: <link rel="stylesheet" href="nolaa-button.css">
 * 2) <a class="nolaa-btn nolaa-btn--light nolaa-btn--44" href="...">놀아로 계속하기</a> 처럼
 *    배경 클래스(--light/--dark/--filled/--icon) 1개 + 높이 클래스(--40/--44/--48) 1개를 함께 붙이세요.
 * 3) 이 파일은 이 프로젝트의 CSS 변수(--brand-primary 등)에 의존하지 않습니다. 값은 모두 고정 HEX이며
 *    임의로 바꾸면 안 됩니다. 자세한 규정은 /developers/brand, /developers/button 문서를 참고하세요.
 * ============================================================
 *
 * [NOLA Security 반영 메모 — devplan19, 2026-09-04]
 * 출처: https://account.nola.kr/developers/brief (생성 2026-09-04 01:43:37) 의 §4.4 CSS 전문.
 * 원본을 그대로 복사한 파일이며 값을 수정하지 않는다. 브리프가 갱신되면 이 파일을 통째로 교체할 것.
 * 우리 사이트는 다크 테마이므로 nolaa-btn--dark + nolaa-btn--44 조합으로 통일해 사용한다.
 * ============================================================ */

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