/* 로그인·계정 쪽 공통 — 첫 화면과 같은 하늘색 분위기 */
:root{--ink:#1b2233;--dim:#5d6980;--line:rgba(120,150,200,.2);--brand:#3f86f5;--navy:#1f2a44;--ok:#1f8a63;--warn:#c0392f;--card:rgba(255,255,255,.88)}
@media (prefers-color-scheme:dark){:root{--ink:#e9edf5;--dim:#9aa6bb;--line:rgba(160,180,220,.16);--brand:#6ea4ff;--navy:#e9edf5;--ok:#6fd3a8;--warn:#ff9e93;--card:rgba(28,33,45,.9)}}
*{box-sizing:border-box} html,body{margin:0}
body{min-height:100vh;color:var(--ink);background:linear-gradient(160deg,#eaf2fd,#f4f1fb 50%,#fdf1ea) fixed;
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;word-break:keep-all}
@media (prefers-color-scheme:dark){body{background:linear-gradient(160deg,#121826,#17162a 50%,#1d1720) fixed}}
.shell{max-width:440px;margin:0 auto;padding:28px 16px 40px}
.logo{display:flex;align-items:center;gap:10px;justify-content:center;text-decoration:none;color:inherit;margin-bottom:18px}
.logo img{width:36px;height:36px;border-radius:10px} .logo b{font-size:20px;letter-spacing:-.03em}
.box{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:26px 24px;box-shadow:0 22px 50px rgba(30,50,90,.1)}
h1{font-family:"Gaegu",cursive;font-size:38px;line-height:1.05;margin:4px 0 4px}
.dim{color:var(--dim);margin:0 0 18px;font-size:14.5px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:rgba(120,150,200,.12);border-radius:14px;padding:4px;margin-bottom:16px}
.tabs button{border:0;background:none;font:inherit;font-weight:700;font-size:14.5px;color:var(--dim);border-radius:11px;padding:9px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(30,50,90,.08)}
label{display:block;font-size:13px;font-weight:700;color:var(--dim);margin:12px 0 6px}
input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
@media (prefers-color-scheme:dark){input{background:#1a2030}}
.go{width:100%;margin-top:16px;border:0;border-radius:999px;background:var(--navy);color:#fff;font:inherit;font-weight:800;font-size:16px;padding:14px;cursor:pointer}
@media (prefers-color-scheme:dark){.go{color:#141925}}
.go:disabled{opacity:.6} .go.ghost{background:none;border:1px solid var(--line);color:var(--dim)}
.google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);background:#fff;color:#1f1f1f;
  border-radius:999px;font:inherit;font-weight:700;font-size:15px;padding:12px;cursor:pointer}
.google svg{width:20px;height:20px}
.or{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12.5px;margin:16px 0 2px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.link{border:0;background:none;color:var(--brand);font:inherit;font-size:13.5px;font-weight:700;margin-top:12px;cursor:pointer;padding:0}
.msg{font-size:14px;font-weight:700;min-height:20px;margin-top:10px} .msg.ok{color:var(--ok)} .msg.no{color:var(--warn)}
.note{margin:18px 0 0;font-size:13px;color:var(--dim);background:rgba(31,138,99,.08);border-radius:14px;padding:12px 14px;line-height:1.6}
.note b{color:var(--ok)}
.plan{display:flex;justify-content:space-between;align-items:center;background:rgba(63,134,245,.1);border-radius:16px;padding:14px 16px;margin-bottom:16px}
.plan span{color:var(--dim);font-size:14px} .plan b{font-size:20px}
.steps{display:grid;gap:10px}
.steps>div{display:flex;gap:12px;align-items:flex-start}
.steps em{font-style:normal;flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(63,134,245,.14);color:var(--brand);font-weight:800;font-size:13px}
.steps b{display:block;font-size:15px} .steps span{color:var(--dim);font-size:13.5px}

.vbox{margin-top:16px;background:#fff7e6;border:1px solid #f3d9a4;border-radius:16px;padding:14px 16px;font-size:14px}
@media (prefers-color-scheme:dark){.vbox{background:#2e2616;border-color:#5a4520}}
.vbox b{font-size:15px} .vbox span{color:var(--dim);font-size:13px}
.vbox p{margin:6px 0 10px;color:var(--dim);line-height:1.55}
.vrow{display:flex;gap:8px;flex-wrap:wrap} .vrow .go{margin:0;flex:1 1 160px;padding:11px;font-size:14.5px}