main {
  max-width: 1180px;
  margin: auto;
  padding: 0 24px;
  /* 콘텐츠 반응형의 기준. 뷰포트 미디어쿼리는 레일(244px)이 선 화면에서 실제
   * 콘텐츠 폭과 어긋나므로, 각 화면의 접힘 규칙은 @container content-col로 이
   * 컬럼의 폭을 읽는다. 로그인 전(가운데 1180px 판)과 레일 셸(css/dashboard.css가
   * margin-left를 덮음) 모두 main이 컨테이너라 쿼리가 끊기지 않는다. 다이얼로그
   * 안 요소는 이 컨테이너 밖이므로 modals.css는 뷰포트 미디어쿼리를 유지한다. */
  container: content-col / inline-size;
}

/* 로그인·가입 화면은 판 하나다. 로그인 전 랜딩(.al)에서 '로그인'으로 넘어오는 길이
   있어서 여기서 판이 바뀌면 다른 서비스처럼 읽히므로, 반경 · 테두리 · 그림자를
   랜딩 카드와 같은 값으로 맞춘다. 예전에는 페이지 자체가 판이고 그 위에 또 카드를
   얹은 이중 구조였다. */
.auth {
  max-width: 520px;
  margin: clamp(14px, 3vw, 40px) auto;
  padding: clamp(26px, 4vw, 44px) clamp(20px, 4vw, 40px);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 30px 70px -40px rgba(20, 30, 26, .35);
  word-break: keep-all;
}

.auth-return {
  margin: 0 0 clamp(18px, 3vw, 26px);
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  color: var(--brand-dark);
  background: transparent;
  font: inherit;
  font-size: var(--fs-2);
  font-weight: 750;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-return:hover { color: var(--brand); }

.auth-return:focus-visible {
  border-radius: 4px;
  outline: 3px solid rgba(10, 189, 163, .25);
  outline-offset: 3px;
}

.auth-return[hidden] { display: none; }

/* 워드마크 자체는 랜딩과 공유하는 .al-wm (landing.css). 여기서는 자리만 잡는다. */
.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(16px, 3vw, 24px);
}

.auth h1 {
  margin: 0 auto;
  font-size: clamp(21px, 3.4vw, 27px);
  line-height: 1.24;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.auth-card {
  margin-top: clamp(20px, 3vw, 28px);
  text-align: left;
}

/* 남은 자리는 부트스트랩 계정 설정 화면 하나다(app.js showBootstrapSetup) --
   로그인·가입은 탭이 제목 노릇을 하므로 카드 머리를 두지 않는다. */
.auth-card-head {
  margin-bottom: 16px;
}

.auth-card-head h2 {
  margin: 0 0 7px;
  font-size: var(--fs-5);
}

.auth-card-head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-3);
  line-height: 1.55;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
}

/* 카드 머리가 없어져 탭이 카드의 첫 줄이다. */
.auth-card .tabs {
  margin: 0 0 16px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--row-radius);
  background: var(--surface-muted);
}

/* 바깥 상자에서 계산한다: 테두리 1px과 안쪽 여백 3px을 빼야 두 모서리가 같은
 * 곡선 위에 앉는다(css/workspace.css의 .settings-subnav와 같은 규칙). */
.auth-card .tabs button {
  border-radius: calc(var(--row-radius) - 4px);
}

.tabs button.active {
  color: var(--brand-dark);
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 43, 39, .1);
}

/* 가입 1단계(측정할 브랜드) -- 칩 입력은 landing.css의 .landing-chip-* 를 그대로 쓴다.
   랜딩과 가입이 같은 컴포넌트라는 사실이 스타일에서도 그대로 드러나야 한다(3.1). */
.signup-brand-step { display: grid; gap: 8px; }

.signup-brand-step > small {
  color: var(--muted);
  font-size: var(--fs-1);
  line-height: 1.5;
}

.signup-brand-step .landing-chip-field { margin-bottom: 0; }

/* 단계 제목("1. 측정할 브랜드")이 이미 묻고 있어 칩 내부 라벨은 중복이다. */
.signup-brand-step .landing-chip-label { display: none; }

.signup-optional {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--row-radius);
  background: var(--surface-muted);
}

.signup-optional summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-2);
}

.signup-optional[open] summary { margin-bottom: 4px; }

.signup-optional label { margin-top: 8px; }

.signup-optional input[readonly] {
  color: var(--muted);
  background: var(--surface);
  cursor: not-allowed;
}

.signup-scope-lock-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--fs-1);
  line-height: 1.5;
}

.signup-account-label { margin-top: 12px; }

form {
  display: grid;
  gap: 10px;
}