:root {
      --brand-green: #1b7437;
      --brand-blue: #15366b;
      --primary: #1E3A8A;
      --bg: #ffffff;
      --text: #111827;
      --muted: #6B7280;
      --line: #e5e7eb;
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      --radius: 16px;
    }

    /* ====== Base ====== */
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0; padding: 0; background: var(--bg); color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif;
      display: flex; flex-direction: column;
    }

    a { color: var(--brand-blue); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .logo a { text-decoration: none;}

    /* ====== Top index bar ====== */
    .header-bar { width: 100%; background: linear-gradient(to right, #1e293b, #0f172a); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
    .header-bar .container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 3rem; padding: 12px 0; }
    .index-box { display: flex; align-items: center; gap: .75rem; padding-top: 4px; }
    .index-box .label { font-size: .875rem; font-weight: 600; color: #d1d5db; }
    .index-box .value { font-size: 1.125rem; font-weight: 700; }
    .index-box .change { font-size: .875rem; font-weight: 500; }
    .change.up { color: #ef4444; } .change.down { color: #3b82f6; }

    /* ====== Center stage ====== */
    .main { flex: 1; display: grid; place-items: center; padding: 48px 16px 72px; }
    .wrap { width: 100%; max-width: 920px; }

    /* Logo */
    .logo { font-size: 56px; font-weight: 800; letter-spacing: 6px; text-align: center; margin: 8px 0 24px; user-select: none; }
    .logo span:nth-child(1), .logo span:nth-child(2), .logo span:nth-child(3) { color: var(--brand-green); }
    .logo span:nth-child(4), .logo span:nth-child(5) { color: var(--brand-blue); }

    /* Card */
    .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
    .card-head { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; background: #f9fafb; border-bottom: 1px solid var(--line); }
    .tab { appearance: none; border: none; background: transparent; padding: 10px 16px; border-radius: 9999px; font-weight: 700; color: var(--muted); cursor: pointer; }
    .tab[aria-selected="true"] { color: #fff; background: var(--brand-blue); }

    .card-body { display: grid; grid-template-columns: 1fr; }

    /* Forms layout */
    .panel { padding: 24px; display: none; }
    .panel.active { display: block; }

    .grid { display: grid; gap: 12px; }
    .grid.cols-2 { grid-template-columns: 1fr 1fr; }
    @media (max-width: 640px){ .grid.cols-2 { grid-template-columns: 1fr; } }

    .field { display: grid; gap: 6px; }
    .label { font-size: 14px; font-weight: 700; color: #374151; }
    .input { width: 100%; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 15px; outline: none; background: #fff; }
    .input:focus { border-color: #94a3b8; box-shadow: 0 0 0 4px rgba(99, 102, 241, .08); }

    .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .muted { color: var(--muted); font-size: 13px; }

    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font-weight: 700; }
    .btn.primary { background: var(--brand-green); color: #fff; }
    .btn.primary:hover { background: #145c2b; }
    .btn.ghost { background: #fff; border-color: var(--line); color: #374151; }
    .btn.ghost:hover { background: #f9fafb; }

    .actions { display: grid; gap: 10px; margin-top: 8px; }

    /* Socials */
    .socials { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
    .socials .btn { height: 42px; }

    /* Divider */
    .divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 14px 0 4px; color: var(--muted); font-size: 12px; }
    .divider::before, .divider::after { content: ""; height: 1px; background: var(--line); }

    /* Footer help */
    .card-foot { padding: 14px; text-align: center; background: #f9fafb; border-top: 1px solid var(--line); font-size: 14px; }

    /* Helper */
    .right { text-align: right; }
    .hint { font-size: 12px; color: #6b7280; }


    /* === 입력칸 크기 통일 (로그인/회원가입 전역) === */
.input {
  height: 44px;           /* 고정 높이 */
  padding: 10px 12px;     /* 살짝 컴팩트 */
  font-size: 14px;        /* 한 단계 작게 */
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}

/* 레이블과 힌트 간격 정리 (비밀번호 힌트 때문에 커 보이지 않게) */
.field .hint {
  margin-top: 6px;
}

/* 두 칼럼 그리드일 때 입력칸 너비 균일화 */
.grid.cols-2 .field .input {
  width: 100%;
  max-width: 100%;
}
/* === 폼 컨트롤 공통 사이즈 통일 === */
:root {
  --ctl-h: 44px;         /* 컨트롤 공통 높이 */
  --ctl-fs: 14px;        /* 글자 크기 */
  --ctl-px: 12px;        /* 좌우 패딩 */
}

/* 인풋: 높이 고정 + 라인하이트/패딩 정리 */
.input {
  height: var(--ctl-h);
  padding: 0 var(--ctl-px);
  font-size: var(--ctl-fs);
  line-height: calc(var(--ctl-h) - 2px); /* border 1px*2 보정 */
  -webkit-appearance: none;
  appearance: none;
}

/* 버튼: 높이/라인하이트 통일 */
.btn {
  height: var(--ctl-h);
  padding: 0 14px;
  font-size: var(--ctl-fs);
  line-height: 1;         /* 안쪽 텍스트 과도한 확장 방지 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* "비밀번호 보기" 토글 버튼이 inline 28px이라 틀어짐 → 강제 통일 */
#toggle-login-pass,
#toggle-signup-pass {
  height: var(--ctl-h) !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* 라벨/힌트/체크박스 줄 간격 정리 */
.label { line-height: 1.2; }
.field .hint { margin-top: 6px; line-height: 1.4; }

.row {
  align-items: center;    /* 한 줄 요소 세로 중앙 */
  gap: 10px;
}

/* 체크박스 정렬 */
.row input[type="checkbox"],
.field input[type="checkbox"] {
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
  vertical-align: middle;
}

/* 소셜 버튼도 동일 높이 적용 */
.socials .btn { height: var(--ctl-h); }

/* 모바일 2열 → 1열 전환 시도 높이 그대로 유지 */
.grid.cols-2 .field .input { width: 100%; }