/* 로그인 · 아이 고르기 · 처음 설정(별명·나이·시작) — 마인드 인사이드 친구들 화면 (2026-10-29) */

/* ── 로그인 ── */
.login{ min-height:calc(100dvh - 40px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-4);
  padding:var(--sp-8) var(--sp-4); text-align:center; color:var(--color-ink); }
.login__ch{ width:min(48vw, 180px); aspect-ratio:1; animation:login-bob 3.2s var(--ease-gentle) infinite; }
.login__ch > *{ width:100%; height:100%; object-fit:contain; display:block; }
.login__title{ font-family:var(--font-heading); font-size:var(--fs-hero); font-weight:800; margin:0; }
.login__title:focus{ outline:none; }
.login__lead{ font-size:var(--fs-child-body); color:var(--kid-guide); margin:0 0 var(--sp-2); max-width:22em; line-height:1.6; }
.login__err{ background:#FFE9E2; color:#8A3B22; border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-4); margin:0; }
.login__consent{ display:flex; gap:var(--sp-3); align-items:flex-start; text-align:left; max-width:26em; background:var(--kid-surface);
  border:2px solid var(--kid-border); border-radius:var(--radius-card); padding:var(--sp-4); font-size:var(--fs-body); line-height:1.55; cursor:pointer; }
.login__consent input{ width:26px; height:26px; flex:none; margin-top:2px; accent-color:var(--color-ink); }
.login__google{ width:min(100%, 420px); }
.login__google:disabled{ opacity:.45; }
.login__note{ font-size:var(--fs-small); color:var(--kid-guide); margin:0; max-width:24em; }
@keyframes login-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce){ .login__ch{ animation:none; } }

/* ── 아이 고르기 ── */
.kids{ padding:var(--sp-8) var(--sp-4); display:flex; flex-direction:column; align-items:center; gap:var(--sp-6); color:var(--color-ink); }
.kids__title{ font-family:var(--font-heading); font-size:var(--fs-title); font-weight:800; margin:0; }
.kids__title:focus{ outline:none; }
.kids__grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-4); width:min(100%, 520px); }
.kids__kid{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); padding:var(--sp-4) var(--sp-2); min-height:180px;
  background:var(--kid-surface); border:2px solid var(--kid-border); border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  font:inherit; color:inherit; cursor:pointer; transition:transform var(--motion-fast) var(--ease-gentle); }
.kids__kid:active{ transform:scale(.97); border-color:var(--kid-border-press); }
.kids__kid:focus-visible{ outline:3px solid var(--focus-kid); outline-offset:3px; }
.kids__pic{ width:96px; height:96px; }
.kids__pic > *{ width:100%; height:100%; object-fit:contain; display:block; }
.kids__nick{ font-size:var(--fs-section); font-weight:800; }
.kids__age{ font-size:var(--fs-small); color:var(--kid-guide); }
.kids__kid--add{ border-style:dashed; background:transparent; box-shadow:none; justify-content:center; }
.kids__plus{ width:72px; height:72px; border-radius:50%; background:var(--color-primary); display:grid; place-items:center; font-size:40px; font-weight:800; }
.kids__out{ margin-top:var(--sp-2); }

/* ── 처음 설정(보호자 화면 안이지만 친구들 모습으로) ── */
.p-setup--friends{ background:var(--kid-bg); border-radius:var(--radius-card); padding:var(--sp-6) var(--sp-4) var(--sp-8);
  margin-top:var(--sp-4); color:var(--color-ink); align-items:stretch; box-shadow:var(--shadow-card); }
.p-setup--friends .p-setup__q{ font-family:var(--font-heading); text-align:center; color:var(--color-ink); font-size:var(--fs-title); }
.p-setup__friends{ display:flex; justify-content:center; align-items:flex-end; gap:var(--sp-2); }
.p-setup__friends > *{ width:96px; height:96px; object-fit:contain; display:block; animation:login-bob 3.4s var(--ease-gentle) infinite; }
.p-setup__friends > *:nth-child(2){ animation-delay:.4s; width:110px; height:110px; }
.p-setup__friends > *:nth-child(3){ animation-delay:.8s; }
@media (prefers-reduced-motion: reduce){ .p-setup__friends > *{ animation:none; } }
.p-setup__dots{ display:flex; justify-content:center; gap:8px; }
.p-setup__dots span{ width:10px; height:10px; border-radius:50%; background:var(--kid-border); }
.p-setup__dots span.on{ background:var(--color-ink); width:28px; border-radius:var(--radius-pill); }
.p-setup__hi{ text-align:center; color:var(--kid-guide); margin:0; font-size:var(--fs-body); }
.p-setup--friends .p-input{ border:2px solid var(--kid-border-press); border-radius:var(--radius-choice); min-height:var(--touch-child);
  font-size:var(--fs-section); text-align:center; background:var(--kid-surface); color:var(--color-ink); }
.p-setup--friends .p-muted{ text-align:center; color:var(--kid-guide); }
.p-setup--friends .p-age-grid .secondary-button{ border-radius:var(--radius-choice); min-height:var(--touch-child); font-size:var(--fs-section);
  background:var(--kid-surface); border:2px solid var(--kid-border-press); color:var(--color-ink); }
.p-setup--friends .primary-button{ background:var(--color-primary); color:var(--color-ink); border:2px solid var(--color-ink); border-radius:var(--radius-button); min-height:var(--touch-child); }
.p-setup__choice{ width:100%; min-height:64px; font-size:var(--fs-child-body); white-space:normal; line-height:1.35; }
.p-setup--friends details, .p-setup--friends .install-card{ background:var(--kid-surface); border-radius:var(--radius-task); }
/* 나이 칸: '10세'가 '10 / 세'로 갈라지지 않게 한 줄, 좁은 폰에서는 글자를 조금 줄임(2026-10-29) */
.p-age-grid .secondary-button, .p-age-grid .btn-label{ white-space:nowrap; word-break:keep-all; }
.p-setup--friends .p-age-grid .secondary-button{ padding-inline:4px; font-size:clamp(16px, 4.6vw, 20px); }