/* voiceye 3.0 — 공통 디자인 토큰 & 기본 컴포넌트 */

html {
  scrollbar-gutter: stable;
}

:root {
  --vy-primary: #1B5BB8;
  --vy-primary-hover: #1749A0;
  --vy-primary-pressed: #123680;
  --vy-accent: #1B5BB8;
  --vy-accent-soft: #EDF1F7;

  --vy-bg: #F5F7FB;
  --vy-surface: #FFFFFF;
  --vy-border: #E1E5EC;
  --vy-border-strong: #C4CAD3;
  --vy-text: #1A1F2B;
  --vy-text-muted: #5A6477;
  --vy-text-subtle: #8A93A4;

  --vy-gutter: clamp(24px, 3vw, 56px);

  --vy-error: #DC2626;
  --vy-error-soft: #FEF2F2;
  --vy-success: #059669;
  --vy-success-soft: #ECFDF5;

  --vy-radius-sm: 6px;
  --vy-radius-md: 10px;
  --vy-radius-lg: 14px;

  --vy-shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --vy-shadow-md: 0 2px 4px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.08);
  --vy-shadow-lg: 0 10px 32px rgba(15,23,42,0.10), 0 24px 60px rgba(15,23,42,0.12);

  --vy-font: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--vy-font);
  color: var(--vy-text);
  background: var(--vy-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Logo */
.vy-logo { display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-0.02em; color: var(--vy-text); font-size: 18px; text-decoration: none; }
.vy-logo-mark { width:28px; height:28px; border-radius:7px; background: var(--vy-primary); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; letter-spacing:-0.03em; }
.vy-logo-version { color: var(--vy-primary); margin-left: 2px; }

/* ---------- 공용 헤더/푸터 (로그인 + 관리자) ---------- */
.ve-header {
  position: relative; z-index: 10;
  min-height: 72px;
  background: rgba(255,255,255,.80);
  border-bottom: 1px solid rgba(229,231,235,.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.ve-header-inner {
  padding: 0 var(--vy-gutter);
  min-height: 72px; display: flex; align-items: stretch; gap: 24px;
}
.ve-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; align-self: center; text-decoration: none; color: inherit; }
.ve-brand img { height: 40px; width: auto; display: block; }
.ve-brand-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

.vy-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.ve-footer {
  position: relative; z-index: 10;
  background: rgba(255,255,255,.78);
  border-top: 1px solid rgba(229,231,235,.78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.ve-footer-inner {
  padding: 20px var(--vy-gutter);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--vy-text-subtle);
}
.ve-footer-links { display: flex; gap: 22px; }
.ve-footer-links a { color: var(--vy-text); font-weight: 500; text-decoration: none; }
.ve-footer-links a.vy-link { font-size: 14px; font-weight: 700; color: #3157E3; }
.ve-footer-links a:hover { color: var(--vy-primary); }

@media (max-width: 640px) {
  .ve-header, .ve-header-inner { min-height: 64px; }
  .ve-brand-name { font-size: 19px; }
  .ve-brand img { height: 36px; }
  .ve-footer-inner { flex-direction: column; text-align: center; }
}

/* Form atoms */
.vy-label { display:block; font-size:13px; font-weight:600; color: var(--vy-text); margin-bottom:6px; letter-spacing:-0.005em; }
.vy-input-wrap { position:relative; }
.vy-input { width:100%; height:44px; padding:0 14px; font-family:inherit; font-size:14px; color:var(--vy-text); background:var(--vy-surface); border:1px solid var(--vy-border); border-radius: var(--vy-radius-md); outline:none; transition: border-color .15s, box-shadow .15s, background .15s; }
.vy-input::placeholder { color: var(--vy-text-subtle); }
.vy-input:hover { border-color: var(--vy-border-strong); }
.vy-input:focus { border-color: var(--vy-primary); box-shadow: 0 0 0 3px rgba(27,79,184,0.15); }
.vy-input.has-icon { padding-left: 42px; }
.vy-input.has-trailing { padding-right: 42px; }
.vy-input.error { border-color: var(--vy-error); background: var(--vy-error-soft); }
.vy-input.error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.vy-input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color: var(--vy-text-subtle); pointer-events:none; display:flex; }
.vy-input-trailing { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:transparent; border:0; width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; color: var(--vy-text-muted); cursor:pointer; transition: background .15s, color .15s; }
.vy-input-trailing:hover { background: var(--vy-bg); color: var(--vy-text); }

.vy-error-msg { margin-top:6px; font-size:12px; color: var(--vy-error); display:flex; align-items:center; gap:4px; font-weight:500; }

/* Inline form-level validation message (e.g. empty required fields) */
.vy-error { min-height:18px; margin:8px 0 0; font-size:12px; color: var(--vy-error); }

/* Buttons */
.vy-btn { height:46px; padding:0 18px; font-family:inherit; font-size:14px; font-weight:600; letter-spacing:-0.005em; border:1px solid transparent; border-radius: var(--vy-radius-md); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition: background .15s, border-color .15s, color .15s, transform .05s; user-select:none; }
.vy-btn:active { transform: translateY(1px); }
.vy-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.vy-btn-primary { background: var(--vy-primary); color:#fff; }
.vy-btn-primary:hover:not(:disabled) { background: var(--vy-primary-hover); }
.vy-btn-primary:active:not(:disabled) { background: var(--vy-primary-pressed); }
.vy-btn-secondary { background: var(--vy-surface); color: var(--vy-text); border-color: var(--vy-border); }
.vy-btn-secondary:hover:not(:disabled) { background: var(--vy-bg); border-color: var(--vy-border-strong); }
.vy-btn-block { width:100%; }
.vy-btn-danger { background: var(--vy-error); color:#fff; border-color: var(--vy-error); }
.vy-btn-danger:hover:not(:disabled) { background: #B91C1C; }

/* Checkbox */
.vy-check { display:inline-flex; align-items:flex-start; gap:8px; cursor:pointer; font-size:13px; color: var(--vy-text); user-select:none; line-height:1.5; }
.vy-check input { position:absolute; opacity:0; pointer-events:none; }
.vy-check-box { flex:0 0 18px; width:18px; height:18px; border:1px solid var(--vy-border-strong); border-radius:4px; background: var(--vy-surface); display:flex; align-items:center; justify-content:center; margin-top:1px; transition: background .15s, border-color .15s; }
.vy-check input:checked + .vy-check-box { background: var(--vy-primary); border-color: var(--vy-primary); }
.vy-check input:checked + .vy-check-box svg { opacity:1; }
.vy-check-box svg { opacity:0; transition: opacity .1s; }

.vy-link { color: var(--vy-primary); font-weight:500; text-decoration:none; font-size:13px; }
.vy-link:hover { text-decoration: underline; }

/* Banners */
.vy-banner { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius: var(--vy-radius-md); font-size:13px; line-height:1.5; margin-bottom:18px; }
.vy-banner-error { background: var(--vy-error-soft); border:1px solid #FECACA; color:#991B1B; }
.vy-banner-success { background: var(--vy-success-soft); border:1px solid #A7F3D0; color:#065F46; }

/* Spinner */
.vy-spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation: vy-spin .7s linear infinite; }
@keyframes vy-spin { to { transform: rotate(360deg); } }