/* 디자인 토큰과 글꼴은 docs/mockup-b/style.css 그대로다. 글자 크기는 같은 값을 rem으로 써서 브라우저 글자 크기 설정을 따른다 */
:root {
  --canvas: #f7f5fb;
  --surface: #fff;
  --surface-subtle: #faf8fd;
  --ink: #20242b;
  --muted: #697083;
  --purple: #7452c8;
  --on-purple: #fff;
  --purple-deep: #6541b5;
  --lavender: #eee7fa;
  --line: #e9e6ef;
  --secondary-border: #dcd4ed;
  --red: #a7354c;
  --on-red: #fff;
  --green-bg: #dcfce7;
  --green-ink: #166534;
  --warn-bg: #fef3c7;
  --warn-ink: #78350f;
  --focus: #7452c8;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #121216;
    --surface: #1c1c24;
    --surface-subtle: #23232e;
    --ink: #f3f4f6;
    --muted: #9ca3af;
    --purple: #a98ae6;
    --on-purple: #121216;
    --purple-deep: #c4b0f0;
    --lavender: #2a2338;
    --line: #2c2c38;
    --secondary-border: #3f3556;
    --red: #f2879b;
    --on-red: #121216;
    --green-bg: #14532d;
    --green-ink: #86efac;
    --warn-bg: #422c09;
    --warn-ink: #fde68a;
    --focus: #ac90e7;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 1rem/1.55 "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  letter-spacing: -0.25px;
}

[hidden] {
  display: none !important;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
  touch-action: manipulation;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

h1 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -0.9px;
  word-break: keep-all;
}

h2 {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.4px;
  word-break: keep-all;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--lavender);
  color: var(--purple-deep);
  padding: 2px 6px;
  border-radius: 5px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* 버튼 모양: <a>와 <button>이 같이 쓴다 */
.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 650;
  text-decoration: none;
  word-break: keep-all;
}

.primary {
  background: var(--purple);
  color: var(--on-purple);
}

.secondary {
  border: 1px solid var(--secondary-border);
  background: var(--surface);
  color: var(--purple-deep);
}

.secondary.danger {
  border-color: var(--red);
  color: var(--red);
}

.primary.danger-fill {
  background: var(--red);
  color: var(--on-red);
}

/* 머리글(좌우 여백 24px 포함)과 카드의 왼쪽 끝을 맞춘다 */
.app-header {
  max-width: 608px;
  margin: 0 auto;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.3125rem;
  font-weight: 750;
  letter-spacing: -0.7px;
}

.page {
  padding: clamp(8px, 6vh, 64px) 0 48px;
}

.app-header,
.page {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

.card,
.notice {
  max-width: 560px;
  margin: 0 auto;
}

.card {
  padding: 24px;
  border-radius: 18px;
}

/* 로그인 결과·로그아웃 같은 한 줄 안내. 카드 위에 둔다 */
.notice {
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--lavender);
  color: var(--purple-deep);
  font-weight: 650;
  word-break: keep-all;
}

/* 로그인 카드 */
.login-card {
  border: 2px solid var(--purple);
  background: var(--surface-subtle);
}

.login-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--lavender);
  color: var(--purple-deep);
}

.login-lead {
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 0.9375rem;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.permission-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--lavender);
  color: var(--purple-deep);
  word-break: keep-all;
}

.permission-box strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9375rem;
}

.permission-box p {
  margin: 0;
  font-size: 0.8125rem;
}

/* 계정 카드 (나 탭) */
.account-card {
  border: 1px solid var(--line);
  background: var(--surface);
}

.account-rows {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-subtle);
}

.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  min-height: 44px;
}

.account-row dt {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 650;
}

.account-row dd {
  margin: 0;
  font-weight: 650;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* 원화 어림값 안내는 금액 줄 아래 한 줄을 다 쓴다 */
.account-row .usage-note {
  flex-basis: 100%;
  margin: 0;
  font-weight: 400;
}

.drive-state-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.state {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}

.state-done {
  background: var(--green-bg);
  color: var(--green-ink);
}

.state-warn {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.account-status {
  margin: 12px 0 0;
  color: var(--red);
  font-size: 0.875rem;
  font-weight: 650;
}

.account-status:empty {
  display: none;
}

.account-action {
  margin-top: 18px;
}

.note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  word-break: keep-all;
}

/* 드라이브 연결 끊기 확인 */
dialog {
  width: min(480px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
}

dialog::backdrop {
  background: #22173580;
}

dialog p {
  margin: 10px 0 0;
  color: var(--muted);
  word-break: keep-all;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

@media (max-width: 700px) {
  .app-header {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: 12px;
  }

  .app-header,
  .page {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .page {
    padding-top: 4px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }

  .card {
    padding: 18px 16px;
  }
}