/* ==========================================================
   스마트79 — Components
   공통 UI 컴포넌트 스타일
   px 고정값 금지 / inline style 금지
   ========================================================== */

/* ── 로딩 스피너 ── */
.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: var(--sp-lg);
}
.loading-logo {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--blue);
}
.loading-sub {
  font-size: var(--fs-sm);
  color: var(--text-sub);
}
.loading-spinner {
  width: clamp(36px, 9vw, 48px);
  height: clamp(36px, 9vw, 48px);
  border: 3px solid var(--gray-border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 인증 공통 ── */
.auth-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sp-xl);
}
.auth-logo-icon { font-size: var(--icon-lg); }
.auth-logo-text {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--blue);
  margin-top: var(--sp-xs);
}
.auth-logo-sub {
  font-size: var(--fs-xs);
  color: var(--text-sub);
  margin-top: var(--sp-xs);
  text-align: center;
}

.auth-tabs {
  display: flex;
  width: 100%;
  max-width: 440px;
  background: var(--gray-bg);
  border-radius: var(--radius);
  padding: var(--sp-xs);
  margin-bottom: var(--sp-lg);
  gap: var(--sp-xs);
}
.auth-tab {
  flex: 1;
  padding: var(--sp-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-sub);
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  transition: all 0.2s;
}
.auth-tab.active {
  background: var(--white);
  color: var(--blue);
  box-shadow: var(--shadow);
}

.auth-form {
  display: none;
  flex-direction: column;
  gap: var(--sp-md);
  width: 100%;
  max-width: 440px;
}
.auth-form.active { display: flex; }

.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.auth-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}
.auth-input {
  width: 100%;
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--fs-md);
  border: 2px solid var(--gray-border);
  border-radius: var(--radius);
  background: var(--gray-bg);
  color: var(--text);
  transition: border-color 0.2s;
}
.auth-input:focus { border-color: var(--blue); }

.auth-btn {
  width: 100%;
  height: var(--btn-h-lg);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--white);
  background: var(--blue-grad);
  border-radius: var(--radius);
  border: none;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}
.auth-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-msg {
  font-size: var(--fs-xs);
  min-height: var(--fs-md);
  text-align: center;
}
.auth-msg.error { color: var(--red); }
.auth-msg.info  { color: var(--text-sub); }
.auth-msg.success { color: var(--green); }

/* ── 이용약관 동의 ── */
.agree-wrap {
  padding: var(--sp-md);
  background: var(--gray-bg);
  border-radius: var(--radius);
  border: 1px solid var(--gray-border);
}
.agree-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-sm);
}
.agree-all-row, .agree-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xs);
}
.agree-all-row {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue);
}
.agree-divider {
  height: 1px;
  background: var(--gray-border);
  margin: var(--sp-sm) 0;
}
.agree-check {
  width: clamp(16px, 4vw, 18px);
  height: clamp(16px, 4vw, 18px);
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--blue);
}
.agree-link {
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
  font-size: var(--fs-xs);
}
.agree-row-label {
  font-size: var(--fs-xs);
  color: var(--text);
}

/* ── 회사설정 폼 ── */
.setup-wrap {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.setup-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--blue);
  text-align: center;
  margin-bottom: var(--sp-sm);
}
.setup-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.setup-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue);
}
.setup-label-required::after {
  content: ' *';
  color: var(--red);
}
.setup-input {
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-md);
  border: 1.5px solid var(--gray-border);
  border-radius: var(--radius-sm);
  background: var(--gray-bg);
  color: var(--text);
  transition: border-color 0.15s;
}
.setup-input:focus { border-color: var(--blue); }
.setup-row {
  display: flex;
  gap: var(--sp-sm);
}

/* ── 파일 업로드 박스 ── */
.upload-box {
  border: 2px dashed var(--gray-border);
  border-radius: var(--radius);
  padding: var(--sp-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.upload-box:hover { border-color: var(--green); }
.upload-box.uploading { border-color: var(--blue); opacity: 0.7; }
.upload-box.error { border-color: var(--red); }
.upload-box.success { border-color: var(--green); }
.upload-box-icon { font-size: var(--icon-md); }
.upload-box-text {
  font-size: var(--fs-xs);
  color: var(--text-sub);
  margin-top: var(--sp-xs);
}
.upload-box-preview {
  max-height: clamp(60px, 15vw, 80px);
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.upload-box-status {
  font-size: var(--fs-xs);
  margin-top: var(--sp-xs);
  font-weight: 700;
}
.upload-box-status.uploading { color: var(--blue); }
.upload-box-status.error     { color: var(--red); }
.upload-box-status.success   { color: var(--green); }

/* ── 양식 선택 ── */
.template-select {
  display: flex;
  gap: var(--sp-sm);
}
.template-card {
  flex: 1;
  border: 2px solid var(--gray-border);
  border-radius: var(--radius);
  padding: var(--sp-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.template-card.active {
  border-color: var(--green);
  background: #f0fffe;
}
.template-card-preview {
  width: 100%;
  height: clamp(50px, 12vw, 70px);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.template-card-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  margin-top: var(--sp-xs);
}

/* ── 모달 ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl);
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.modal-hdr {
  padding: var(--sp-lg) var(--sp-lg) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.modal-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--blue);
}
.modal-close {
  border: none;
  background: none;
  font-size: var(--fs-xl);
  color: var(--text-sub);
  cursor: pointer;
  padding: var(--sp-xs);
}
.modal-content {
  padding: var(--sp-md) var(--sp-lg);
  overflow-y: auto;
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--text);
  flex: 1;
}
.modal-footer {
  padding: var(--sp-md) var(--sp-lg);
  flex-shrink: 0;
}
.modal-confirm {
  width: 100%;
  padding: var(--sp-md);
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: var(--fs-md);
  font-weight: 700;
}

/* ── 상태 화면 (승인대기 등) ── */
.status-icon {
  font-size: var(--icon-lg);
  margin-bottom: var(--sp-lg);
}
.status-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--blue);
  margin-bottom: var(--sp-md);
  text-align: center;
}
.status-desc {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: 1.7;
  text-align: center;
  margin-bottom: var(--sp-sm);
}

/* ── 만료 오버레이 ── */
.expired-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.expired-overlay.open { display: flex; }
.expired-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--sp-2xl) var(--sp-xl);
  text-align: center;
  max-width: 360px;
  width: calc(100% - 48px);
  box-shadow: var(--shadow-card);
}
.expired-icon { font-size: var(--icon-lg); margin-bottom: var(--sp-md); }
.expired-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--red);
  margin-bottom: var(--sp-sm);
}
.expired-desc {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  margin-bottom: var(--sp-xl);
  line-height: 1.7;
}
.btn-renew {
  padding: var(--sp-sm) var(--sp-lg);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--green);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  display: block;
  width: 100%;
  margin-bottom: var(--sp-sm);
}
.btn-logout-sm {
  padding: var(--sp-xs) var(--sp-md);
  border: 1.5px solid var(--gray-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-sub);
  font-size: var(--fs-xs);
  cursor: pointer;
}

/* ── 오류 배너 ── */
.error-banner {
  background: #fee;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-xs);
  color: var(--red);
  font-weight: 600;
  margin-bottom: var(--sp-sm);
  display: none;
}
.error-banner.visible { display: block; }