body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
/* 2단계 인증 확인 스타일 */

.two-factor-verification {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.verification-container {
  background: var(--bg-primary, #ffffff);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 420px;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 헤더 */
.verification-header {
  padding: 24px 24px 0;
  text-align: center;
}

.verification-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #333);
}

.verification-header p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, #666);
}

/* 바디 */
.verification-body {
  padding: 24px;
}

.code-input-section {
  margin-bottom: 16px;
}

.code-input-section label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #333);
}

.verification-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 8px;
  border: 2px solid var(--border-color, #e5e5e5);
  border-radius: 8px;
  background: var(--bg-secondary, #f8f9fa);
  transition: all 0.2s ease;
}

.verification-input:focus {
  outline: none;
  border-color: var(--primary-color, #007bff);
  background: var(--bg-primary, #ffffff);
}

.verification-input.backup-input {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 타임 인디케이터 */
.time-indicator {
  position: relative;
  height: 4px;
  background: var(--bg-tertiary, #e9ecef);
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
}

.time-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--primary-color, #007bff);
  border-radius: 2px;
  transition: width 1s linear;
}

.time-text {
  position: absolute;
  right: 0;
  top: -20px;
  font-size: 12px;
  color: var(--text-secondary, #666);
}

/* 메서드 전환 버튼 */
.switch-method-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: 8px;
  font-size: 14px;
  color: var(--primary-color, #007bff);
  cursor: pointer;
  transition: all 0.2s ease;
}

.switch-method-btn:hover {
  background: var(--bg-secondary, #f8f9fa);
  border-color: var(--primary-color, #007bff);
}

/* 에러 메시지 */
.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  margin: 16px 0;
  background: #fff5f5;
  border: 1px solid #feb2b2;
  border-radius: 8px;
  color: #c53030;
  font-size: 14px;
}

.error-icon {
  font-size: 16px;
}

/* 액션 버튼 */
.verification-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.cancel-btn,
.verify-btn {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn {
  background: var(--bg-secondary, #f8f9fa);
  color: var(--text-primary, #333);
}

.cancel-btn:hover:not(:disabled) {
  background: var(--bg-tertiary, #e9ecef);
}

.verify-btn {
  background: var(--primary-color, #007bff);
  color: white;
}

.verify-btn:hover:not(:disabled) {
  background: var(--primary-hover, #0056b3);
}

.cancel-btn:disabled,
.verify-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 푸터 */
.verification-footer {
  padding: 0 24px 24px;
  text-align: center;
}

.help-text {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, #666);
}

.link-btn {
  background: none;
  border: none;
  color: var(--primary-color, #007bff);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
}

.link-btn:hover {
  text-decoration: none;
}

/* 다크모드 */
.theme-dark .verification-container {
  background: var(--bg-primary);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.theme-dark .verification-input {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.theme-dark .verification-input:focus {
  background: var(--bg-tertiary);
}

.theme-dark .error-message {
  background: rgba(254, 178, 178, 0.1);
  border-color: rgba(254, 178, 178, 0.3);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .two-factor-verification {
    padding: 10px;
    align-items: flex-end;
  }
  
  .verification-container {
    border-radius: 16px 16px 0 0;
    max-width: none;
  }
  
  .verification-header h2 {
    font-size: 20px;
  }
  
  .verification-input {
    font-size: 20px;
    letter-spacing: 6px;
  }
  
  .verification-input.backup-input {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .verification-header,
  .verification-body,
  .verification-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .verification-actions {
    flex-direction: column;
  }
  
  .cancel-btn,
  .verify-btn {
    width: 100%;
  }
}/* 통합 아이템 리스트 스타일 */
.unified-item-list {
  padding: 1rem 0rem;
}

/* 섹션 */
.item-section {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
}

/* 아이템 그리드 */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .unified-item-list {
    padding: 1rem 0rem;
  }
  
  .item-grid {
    grid-template-columns: 1fr;
  }
}

/* 아이템 카드 */
.item-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 타입별 카드 스타일 - 테두리 제거 */
.item-type-password {
  /* border-left: 4px solid var(--accent-primary); */
}

.item-type-creditcard {
  /* border-left: 4px solid #f59e0b; */
}

.item-type-apikey {
  /* border-left: 4px solid #10b981; */
}

/* 아이템 헤더 */
.item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.item-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  min-width: 0;
}

.item-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-type-badge {
  padding: 0.25rem 0.5rem;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.item-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-favorite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-favorite:hover {
  background: var(--bg-tertiary);
  color: #f59e0b;
  border-color: #f59e0b;
}

.btn-favorite.active {
  color: #f59e0b;
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

/* 아이템 콘텐츠 */
.item-content-password,
.item-content-creditcard,
.item-content-apikey {
  margin-bottom: 1rem;
}

.item-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

.field-label {
  color: var(--text-secondary);
  min-width: 80px;
}

.field-value {
  flex: 1;
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-value a {
  color: var(--accent-primary);
  text-decoration: none;
}

.field-value a:hover {
  text-decoration: underline;
}

/* 환경 뱃지 */
.environment-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.env-production {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.env-development {
  background: rgba(251, 191, 36, 0.1);
  color: #f59e0b;
}

.env-test {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.env-staging {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

/* 버튼 */
.btn-toggle,
.btn-copy,
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-toggle:hover,
.btn-copy:hover,
.btn-action:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--accent-primary);
}

.btn-copy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: #ef4444;
}

/* 태그 */
.item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tag {
  padding: 0.25rem 0.5rem;
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* 액션 버튼 그룹 */
.item-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

/* 로딩 상태 */
.items-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 빈 상태 */
.items-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

/* 텍스트 색상 유틸리티 */
.text-danger {
  color: #ef4444;
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .item-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
  }
  
  .item-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  
  .field-value {
    background: transparent;
  }
}/* 아이템 타입 선택 모달 스타일 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.item-type-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  z-index: 1000;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translate(-50%, -45%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

/* 모달 헤더 */
.item-type-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.item-type-modal .modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.item-type-modal .btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.item-type-modal .btn-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* 모달 바디 */
.item-type-modal .modal-body {
  padding: 2rem;
}

.item-type-modal .modal-description {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-size: 1rem;
}

/* 아이템 타입 그리드 */
.item-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

/* 아이템 타입 옵션 */
.item-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.item-type-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.item-type-option:active {
  transform: translateY(-2px);
}

/* 타입별 색상 */
.item-type-primary:hover {
  border-color: var(--accent-primary);
  background: var(--accent-light);
}

.item-type-primary .option-icon {
  color: var(--accent-primary);
}

.item-type-warning:hover {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.item-type-warning .option-icon {
  color: #f59e0b;
}

.item-type-success:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.item-type-success .option-icon {
  color: #10b981;
}

/* 옵션 내용 */
.option-icon {
  margin-bottom: 1rem;
  transition: transform 0.2s ease;
}

.item-type-option:hover .option-icon {
  transform: scale(1.1);
}

.option-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.option-description {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* 모바일 반응형 */
@media (max-width: 640px) {
  .item-type-modal {
    width: 95%;
  }
  
  .item-type-modal .modal-body {
    padding: 1.5rem;
  }
  
  .item-type-grid {
    grid-template-columns: 1fr;
  }
  
  .item-type-option {
    padding: 1.5rem 1rem;
  }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
  }
  
  .item-type-modal {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  }
  
  .item-type-option {
    background: var(--bg-secondary);
  }
  
  .item-type-option:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  }
}/* =========================== */
/* 새로운 버튼 시스템 CSS */
/* 깔끔하고 확실한 스타일링 */
/* =========================== */

/* 기본 버튼 스타일 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* 크기 변형 */
.btn-sm {
  padding: 6px 12px;
  font-size: 0.875rem;
  min-height: 32px;
}

.btn-sm.btn-outline-danger {
  border-width: 1px;
  padding: 5px 11px;
}

.btn-md {
  padding: 8px 16px;
  font-size: 0.875rem;
  min-height: 36px;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 1rem;
  min-height: 44px;
}

/* 아이콘 전용 버튼 */
.btn-icon-only {
  padding: 8px;
  gap: 0;
}

.btn-icon-only.btn-sm {
  padding: 6px;
  min-width: 32px;
}

.btn-icon-only.btn-md {
  padding: 8px;
  min-width: 36px;
}

.btn-icon-only.btn-lg {
  padding: 12px;
  min-width: 44px;
}

/* 아이콘 스타일 */
.btn-icon {
  font-size: 1em;
  line-height: 1;
}

.btn-text {
  font-weight: 500;
}

/* ===== 색상 변형들 ===== */

/* Primary 버튼 */
.btn-primary {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: #1d4ed8;
  transform: translateY(0);
}

/* Secondary 버튼 */
.btn-secondary {
  background-color: #6b7280;
  border-color: #6b7280;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #4b5563;
  border-color: #4b5563;
  transform: translateY(-1px);
}

/* Danger 버튼 */
.btn-danger {
  background-color: #ef4444;
  border-color: #ef4444;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background-color: #dc2626;
  border-color: #dc2626;
  transform: translateY(-1px);
}

/* Success 버튼 */
.btn-success {
  background-color: #10b981;
  border-color: #10b981;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background-color: #059669;
  border-color: #059669;
  transform: translateY(-1px);
}

/* ===== Outline 변형들 ===== */

/* Outline Primary */
.btn-outline-primary {
  background-color: transparent;
  border-color: #3b82f6;
  color: #3b82f6;
}

.btn-outline-primary:hover:not(:disabled) {
  background-color: #3b82f6;
  color: white;
  transform: translateY(-1px);
}

/* Outline Secondary */
.btn-outline-secondary {
  background-color: transparent;
  border-color: #6b7280;
  color: #6b7280;
}

.btn-outline-secondary:hover:not(:disabled) {
  background-color: #6b7280;
  color: white;
  transform: translateY(-1px);
}

/* Outline Danger */
.btn-outline-danger {
  background-color: transparent;
  border-color: #fca5a5;
  color: #dc2626;
}

.btn-outline-danger:hover:not(:disabled) {
  background-color: #fee2e2;
  border-color: #ef4444;
  color: #dc2626;
  transform: translateY(-1px);
}

/* 초기화 버튼 - 더 은은한 스타일 */
.btn-reset-subtle {
  border-color: #e5e7eb !important;
  color: #6b7280 !important;
  background-color: transparent !important;
}

.btn-reset-subtle:hover:not(:disabled) {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #dc2626 !important;
}

/* Ghost 버튼 */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: #6b7280;
}

.btn-ghost:hover:not(:disabled) {
  background-color: #f3f4f6;
  color: #374151;
  transform: translateY(-1px);
}

/* ===== 상태 스타일 ===== */

/* 비활성화 상태 */
.btn:disabled,
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* 로딩 상태 */
.btn-loading {
  cursor: wait;
}

.btn-loading .btn-icon {
  animation: btn-spin 1s linear infinite;
}

/* 애니메이션 */
@keyframes btn-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===== 다크 모드 지원 ===== */
@media (prefers-color-scheme: dark) {
  .btn-ghost {
    color: #d1d5db;
  }
  
  .btn-ghost:hover:not(:disabled) {
    background-color: #374151;
    color: #f9fafb;
  }
  
  .btn-outline-secondary {
    color: #d1d5db;
    border-color: #6b7280;
  }
  
  .btn-outline-secondary:hover:not(:disabled) {
    background-color: #6b7280;
    color: #000;
  }
}

/* ===== 접근성 개선 ===== */

/* 고대비 모드 */
@media (prefers-contrast: high) {
  .btn {
    border-width: 2px;
  }
  
  .btn:focus {
    outline-width: 3px;
  }
}

/* 애니메이션 감소 모드 */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  
  .btn:hover {
    transform: none;
  }
  
  .btn-loading .btn-icon {
    animation: none;
  }
}

/* ===== 모바일 최적화 ===== */
@media (max-width: 768px) {
  .btn {
    min-height: 44px; /* 터치 친화적 크기 */
  }
  
  .btn-sm {
    min-height: 40px;
    padding: 8px 12px;
  }
  
  .btn-md {
    min-height: 44px;
    padding: 10px 16px;
  }
  
  .btn-lg {
    min-height: 48px;
    padding: 12px 20px;
  }
}

/* ===== 특별한 버튼 스타일 ===== */

/* 복사 버튼 특별 스타일 */
.copy-button-icon {
  opacity: 0.8;
}

.copy-button-icon:hover {
  opacity: 1;
}

/* 패스워드 토글 버튼 - !important 제거 */
.password-toggle-button {
  border-color: #d1d5db;
  color: #6b7280;
}

.password-toggle-button:hover {
  border-color: #9ca3af;
  background-color: #f9fafb;
  color: #374151;
}

/* 삭제 버튼 개선 */
.delete-button-improved:hover {
  transform: translateY(-1px) scale(1.02);
}

/* 헤더 액션 버튼들 */
.header-action-button {
  font-size: 0.875rem;
  font-weight: 500;
}

.header-action-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.logout-button:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* 새 패스워드 추가 버튼 */
.add-password-button {
  font-weight: 600;
}

/* 모바일에서 새 패스워드 버튼 최적화 */
@media (max-width: 768px) {
  .add-password-button .btn-text::after {
    content: '추가';
  }
  
  .add-password-button .btn-text {
    font-size: 0;
  }
}

@media (max-width: 425px) {
  .add-password-button .btn-text {
    display: none;
  }
  
  .add-password-button {
    min-width: 44px;
    justify-content: center;
  }
}

/* 새로고침 버튼 */
.refresh-button {
  position: relative;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.refresh-button:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.refresh-button:disabled {
  opacity: 0.5;
}

/* 필터 버튼 활성 상태 */
.filter-button.active {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.filter-button.active:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* 설정 모달 액션 버튼들 */
.settings-action-button {
  justify-content: flex-start;
  width: 100%;
  text-align: left;
}

.settings-action-button .btn-icon {
  margin-right: 0.5rem;
}

/* 모바일에서 버튼 간격 조정 */
@media (max-width: 768px) {
  .header-action-button {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  
  .header-action-button .btn-text {
    display: none;
  }
  
  .header-action-button {
    min-width: 40px;
    justify-content: center;
  }
}
/* ErrorBoundary 컴포넌트 스타일 */
.error-boundary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.error-boundary__container {
  max-width: 600px;
  width: 100%;
  background: white;
  border-radius: 1rem;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid #fecaca;
}

.error-boundary__icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  animation: bounce 2s infinite;
}

.error-boundary__title {
  font-size: 2rem;
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 1rem;
}

.error-boundary__message {
  font-size: 1.125rem;
  color: #6b7280;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.error-boundary__error-id {
  margin-bottom: 2rem;
  padding: 0.5rem 1rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
}

.error-boundary__error-id small {
  color: #6b7280;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.error-boundary__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.error-boundary__button {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: none;
  min-width: 120px;
}

.error-boundary__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.error-boundary__button:active {
  transform: translateY(0);
}

.error-boundary__button--primary {
  background: #dc2626;
  color: white;
}

.error-boundary__button--primary:hover {
  background: #b91c1c;
}

.error-boundary__button--secondary {
  background: #6b7280;
  color: white;
}

.error-boundary__button--secondary:hover {
  background: #4b5563;
}

.error-boundary__button--outline {
  background: transparent;
  color: #6b7280;
  border: 2px solid #d1d5db;
}

.error-boundary__button--outline:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.error-boundary__details {
  margin-top: 2rem;
  text-align: left;
  background: #f9fafb;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
}

.error-boundary__details summary {
  padding: 1rem;
  cursor: pointer;
  font-weight: 600;
  color: #374151;
  background: #f3f4f6;
  border-radius: 0.5rem 0.5rem 0 0;
  border-bottom: 1px solid #e5e7eb;
}

.error-boundary__details summary:hover {
  background: #e5e7eb;
}

.error-boundary__error-details {
  padding: 1rem;
}

.error-boundary__error-details h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin: 1rem 0 0.5rem 0;
}

.error-boundary__error-details h3:first-child {
  margin-top: 0;
}

.error-boundary__error-details pre {
  background: #1f2937;
  color: #f9fafb;
  padding: 1rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

/* 애니메이션 */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -10px, 0);
  }
  70% {
    transform: translate3d(0, -5px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

/* 반응형 디자인 */
@media (max-width: 640px) {
  .error-boundary {
    padding: 1rem;
  }
  
  .error-boundary__container {
    padding: 2rem 1.5rem;
  }
  
  .error-boundary__title {
    font-size: 1.5rem;
  }
  
  .error-boundary__message {
    font-size: 1rem;
  }
  
  .error-boundary__actions {
    flex-direction: column;
    align-items: center;
  }
  
  .error-boundary__button {
    width: 100%;
    max-width: 200px;
  }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .error-boundary {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }
  
  .error-boundary__container {
    background: #1f2937;
    border-color: #374151;
  }
  
  .error-boundary__title {
    color: #ef4444;
  }
  
  .error-boundary__message {
    color: #d1d5db;
  }
  
  .error-boundary__error-id {
    background: #374151;
    border-color: #4b5563;
  }
  
  .error-boundary__error-id small {
    color: #d1d5db;
  }
  
  .error-boundary__details {
    background: #374151;
    border-color: #4b5563;
  }
  
  .error-boundary__details summary {
    background: #4b5563;
    color: #f9fafb;
    border-color: #6b7280;
  }
  
  .error-boundary__details summary:hover {
    background: #6b7280;
  }
  
  .error-boundary__error-details h3 {
    color: #f9fafb;
  }
}/* 패스워드 강도 분석기 스타일 */
.password-strength-analyzer {
  margin: 12px 0;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* 강도 표시 바 컨테이너 */
.strength-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* 강도 표시 바 */
.strength-bar {
  flex: 1;
  height: 8px;
  background: var(--color-background-muted);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.strength-progress {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 4px;
  position: relative;
}

.strength-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 강도 레이블 */
.strength-label {
  font-size: 14px;
  font-weight: 600;
  min-width: 80px;
  text-align: right;
  transition: color 0.3s ease;
}

/* 상세 정보 */
.strength-details {
  border-top: 1px solid var(--color-border-light);
  padding-top: 12px;
  margin-top: 12px;
}

/* 크랙 시간 정보 */
.crack-time-info {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}

.info-label {
  color: var(--color-text-muted);
  font-weight: 500;
}

.info-value {
  color: var(--color-text);
  font-weight: 600;
  font-family: var(--font-mono, 'Courier New', monospace);
}

/* 권장사항 */
.recommendations {
  margin-top: 12px;
}

.recommendations h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 8px 0;
}

.recommendations ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recommendations li {
  padding: 6px 12px;
  margin: 4px 0;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  position: relative;
  padding-left: 28px;
}

.recommendations li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

/* 경고 스타일 */
.recommendation-warning {
  background: rgba(220, 53, 69, 0.1);
  border-left: 3px solid #dc3545;
  color: #721c24;
}

.recommendation-warning::before {
  background: #dc3545;
}

/* 제안 스타일 */
.recommendation-suggestion {
  background: rgba(13, 110, 253, 0.1);
  border-left: 3px solid #0d6efd;
  color: #084298;
}

.recommendation-suggestion::before {
  background: #0d6efd;
}

/* 다크 모드 */
[data-theme="dark"] .password-strength-analyzer {
  background: var(--color-surface-dark);
  border-color: var(--color-border-dark);
}

[data-theme="dark"] .strength-bar {
  background: var(--color-background-muted-dark);
}

[data-theme="dark"] .strength-details {
  border-top-color: var(--color-border-light-dark);
}

[data-theme="dark"] .info-label {
  color: var(--color-text-muted-dark);
}

[data-theme="dark"] .info-value {
  color: var(--color-text-dark);
}

[data-theme="dark"] .recommendations h4 {
  color: var(--color-text-dark);
}

[data-theme="dark"] .recommendation-warning {
  background: rgba(220, 53, 69, 0.2);
  color: #f5c2c7;
}

[data-theme="dark"] .recommendation-suggestion {
  background: rgba(13, 110, 253, 0.2);
  color: #9ec5fe;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .password-strength-analyzer {
    padding: 12px;
    margin: 8px 0;
  }
  
  .strength-bar-container {
    gap: 8px;
  }
  
  .strength-label {
    min-width: 70px;
    font-size: 13px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  
  .recommendations li {
    padding: 8px 12px;
    padding-left: 24px;
  }
}

/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
  .strength-progress,
  .strength-label {
    transition: none;
  }
  
  .strength-progress::after {
    animation: none;
  }
}

/* 고대비 모드 */
@media (prefers-contrast: high) {
  .password-strength-analyzer {
    border-width: 2px;
  }
  
  .strength-bar {
    border: 1px solid currentColor;
  }
  
  .recommendations li {
    border: 1px solid currentColor;
  }
}/* PasswordForm 스타일 - 모듈화 */
/* 600라인 룰 준수를 위해 기능별로 분할 */
/* 기본 모달 및 폼 필드 스타일 */
/* PasswordForm 기본 스타일 - 모달 및 폼 필드 */
/* 모달 오버레이 */
.password-form-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}
/* 향상된 모달 컨테이너 */
.password-form-modal-content {
  background: var(--bg-primary, white);
  border-radius: 12px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color, #e1e5e9);
  animation: slideUp 0.3s ease-out;
  overflow: hidden;
}
.password-form-modal-content.enhanced {
  max-width: 800px;
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 모달 헤더 */
.password-form-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid var(--border-color, #e1e5e9);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  flex-shrink: 0;
}
.password-form-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.password-form-modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.password-form-modal-close:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.1);
}
.password-form-modal-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* 모달 바디 */
.password-form-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}
/* 모달 푸터 */
.password-form-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-top: 1px solid var(--border-color, #e1e5e9);
  background: var(--bg-secondary, #f8f9fa);
  flex-shrink: 0;
}
/* 폼 필드 그룹 */
.password-form__field-group {
  margin-bottom: 20px;
}
.password-form__field-group--large {
  margin-bottom: 25px;
}
/* 라벨 스타일 */
.password-form__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-primary, #333);
  font-size: 14px;
}
.password-form__label--required::after {
  content: ' *';
  color: #dc3545;
  margin-left: 2px;
}
/* 입력 필드 스타일 */
.password-form__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 14px;
  transition: all 0.2s ease;
  background: var(--input-bg, white);
  color: var(--text-primary, #333);
}
.password-form__input:focus {
  outline: none;
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.password-form__input--error {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}
.password-form__input--warning {
  border-color: #ffc107;
  background: rgba(255, 193, 7, 0.05);
}
.password-form__input--warning:focus {
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
}
.password-form__input:disabled {
  background-color: var(--bg-disabled, #f8f9fa);
  cursor: not-allowed;
  opacity: 0.7;
}
/* 셀렉트 필드 */
.password-form__select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 14px;
  background: var(--input-bg, white);
  color: var(--text-primary, #333);
  cursor: pointer;
}
.password-form__select:focus {
  outline: none;
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* 텍스트에어리어 */
.password-form__textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  background: var(--input-bg, white);
  color: var(--text-primary, #333);
  min-height: 80px;
}
.password-form__textarea:focus {
  outline: none;
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* 에러 메시지 */
.password-form__error {
  color: #dc3545;
  font-size: 12px;
  margin-top: 5px;
  display: block;
  font-weight: 500;
}
/* 향상된 패스워드 필드 */
.password-field-enhanced {
  margin-bottom: 24px !important;
}
/* 패스워드 입력 컨테이너 */
.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.password-input-container .password-form__input {
  flex: 1;
  padding-right: 100px;
}
/* 패스워드 입력 액션 버튼들 */
.password-input-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
}
.password-toggle-btn,
.password-generate-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
  color: var(--text-muted, #6b7280);
}
.password-toggle-btn:hover,
.password-generate-btn:hover {
  background: var(--primary-color, #3b82f6);
  color: white;
  transform: translateY(-50%) scale(1.05);
}
/* 중복 패스워드 경고 */
.password-duplicate-warning,
.password-similar-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
}
.password-duplicate-warning {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #721c24;
}
.password-similar-warning {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: #856404;
}
.warning-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.warning-text {
  flex: 1;
  font-weight: 500;
}
/* 패스워드 생성기 모달 */
.generator-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  padding: 20px;
  box-sizing: border-box;
}
.generator-modal-content {
  background: var(--bg-primary, white);
  border-radius: 12px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  animation: scaleIn 0.3s ease-out;
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 컴포넌트, 태그 및 반응형 스타일 */
/* PasswordForm 컴포넌트 스타일 - 태그, 버튼 및 반응형 */
/* TagSelector 패스워드 폼 내부 스타일 */
.password-form .tag-selector {
  width: 100%;
}
.password-form .tag-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 14px;
  background: var(--input-bg, white);
  color: var(--text-primary, #333);
  transition: all 0.2s ease;
}
.password-form .tag-input:focus {
  outline: none;
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.password-form .tag-input::placeholder {
  color: var(--text-muted, #9ca3af);
}
.password-form .selected-tags {
  margin-bottom: 8px;
  min-height: auto;
}
.password-form .selected-tag {
  background: var(--primary-color, #3b82f6);
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px;
}
.password-form .selected-tag-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.password-form .selected-tag-remove:hover {
  color: white;
  background: rgba(255, 255, 255, 0.2);
}
.password-form .tag-dropdown {
  border: 1px solid var(--border-color, #ddd);
  border-top: none;
  background: var(--input-bg, white);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}
.password-form .tag-dropdown-item {
  padding: 10px 16px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary, #333);
  border-bottom: 1px solid var(--border-color, #f1f3f4);
  transition: background-color 0.2s ease;
}
.password-form .tag-dropdown-item:hover {
  background: var(--bg-secondary, #f8f9fa);
}
.password-form .tag-dropdown-item:last-child {
  border-bottom: none;
}
.password-form .tag-dropdown-new {
  background: var(--bg-tertiary, #f1f3f4);
  font-weight: 500;
  color: var(--primary-color, #3b82f6);
}
.password-form .tag-dropdown-new:hover {
  background: var(--primary-color, #3b82f6);
  color: white;
}
.password-form .tag-dropdown-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted, #9ca3af);
  font-size: 13px;
  font-style: italic;
}
.password-form .tag-new-icon {
  color: var(--success-color, #10b981);
  font-weight: bold;
  margin-right: 4px;
}
.password-form .tag-selector-info {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.password-form .tag-error-message {
  color: #dc3545;
  font-weight: 500;
}
.password-form .tag-count {
  font-weight: 500;
}
.password-form .tag-help {
  font-style: italic;
  opacity: 0.8;
}
/* 다크모드 지원 */
@media (prefers-color-scheme: dark) {
  .password-form-modal-content {
    background: var(--bg-primary, #1a1a1a);
    border-color: var(--border-color, #404040);
  }
  
  .password-form-modal-header {
    border-bottom-color: var(--border-color, #404040);
  }
  
  .password-form-modal-footer {
    background: var(--bg-secondary, #2c2c2c);
    border-top-color: var(--border-color, #404040);
  }
  
  .password-form__input,
  .password-form__select,
  .password-form__textarea {
    background: var(--input-bg, #2c2c2c);
    border-color: var(--border-color, #404040);
    color: var(--text-primary, #fff);
  }
  
  .password-form__label {
    color: var(--text-primary, #fff);
  }

  .password-toggle-btn,
  .password-generate-btn {
    background: var(--bg-secondary, #3c3c3c);
    color: var(--text-muted, #9ca3af);
  }

  .password-duplicate-warning {
    background: rgba(220, 53, 69, 0.2);
    color: #f5c2c7;
  }

  .password-similar-warning {
    background: rgba(255, 193, 7, 0.2);
    color: #ffd700;
  }

  .generator-modal-content {
    background: var(--bg-primary, #1a1a1a);
  }
  
  .password-form .tag-input {
    background: var(--input-bg, #2c2c2c);
    border-color: var(--border-color, #404040);
    color: var(--text-primary, #fff);
  }
  
  .password-form .tag-dropdown {
    background: var(--input-bg, #2c2c2c);
    border-color: var(--border-color, #404040);
  }
  
  .password-form .tag-dropdown-item {
    color: var(--text-primary, #fff);
    border-bottom-color: var(--border-color, #404040);
  }
  
  .password-form .tag-dropdown-item:hover {
    background: var(--bg-secondary, #404040);
  }
  
  .password-form .tag-dropdown-new {
    background: var(--bg-tertiary, #404040);
  }
}
/* 태블릿 반응형 (최대 768px) */
@media (max-width: 768px) {
  .password-form-modal-content {
    margin: 0 10px;
    max-width: none;
  }
  
  .password-form-modal-header {
    padding: 16px 20px;
  }
  
  .password-form-modal-header h3 {
    font-size: 16px;
  }
  
  .password-form-modal-body {
    padding: 20px;
  }
  
  .password-form-modal-footer {
    padding: 16px 20px;
    flex-direction: column;
    gap: 12px;
  }
  
  .password-form__field-group {
    margin-bottom: 16px;
  }

  .password-input-container .password-form__input {
    padding-right: 80px;
  }

  .password-toggle-btn,
  .password-generate-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .password-duplicate-warning,
  .password-similar-warning {
    padding: 6px 8px;
    font-size: 12px;
  }
  
  .password-form .tag-input {
    padding: 10px 14px;
  }
  
  .password-form .selected-tag {
    font-size: 12px;
    padding: 4px 8px;
  }
  
  .password-form .tag-dropdown-item {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .password-form .tag-selector-info {
    font-size: 11px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
/* 모바일 반응형 (최대 425px) */
@media (max-width: 425px) {
  .password-form-modal-overlay {
    padding: 5px;
  }
  
  .password-form-modal-content {
    border-radius: 8px;
  }
  
  .password-form-modal-header {
    padding: 12px 16px;
  }
  
  .password-form-modal-body {
    padding: 16px;
  }
  
  .password-form-modal-footer {
    padding: 12px 16px;
  }
  
  .password-form__field-group {
    margin-bottom: 14px;
  }

  .password-input-container .password-form__input {
    padding-right: 70px;
  }

  .password-toggle-btn,
  .password-generate-btn {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .password-duplicate-warning,
  .password-similar-warning {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .password-form .tag-input {
    padding: 8px 12px;
  }
  
  .password-form .selected-tag {
    font-size: 11px;
    padding: 3px 8px;
    margin: 1px;
  }
  
  .password-form .selected-tag-remove {
    width: 14px;
    height: 14px;
    font-size: 10px;
  }
  
  .password-form .tag-dropdown-item {
    padding: 10px 14px;
    font-size: 14px;
  }
  
  .password-form .tag-selector-info {
    font-size: 11px;
  }
}
/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
  .password-form-modal-content,
  .generator-modal-content {
    animation: none;
  }
  
  .password-toggle-btn,
  .password-generate-btn,
  .password-form .selected-tag,
  .password-form .selected-tag-remove,
  .password-form .tag-dropdown-item {
    transition: none;
  }
}
/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
  .password-form-modal-content {
    border-width: 2px;
    border-color: #000;
  }
  
  .password-form__input,
  .password-form__select,
  .password-form__textarea,
  .password-form .tag-input {
    border-width: 2px;
    border-color: #000;
  }
  
  .password-duplicate-warning,
  .password-similar-warning {
    border-width: 2px;
  }
  
  .password-toggle-btn,
  .password-generate-btn {
    border: 2px solid #000;
  }
  
  .password-form .selected-tag {
    border: 2px solid #000;
  }
  
  .password-form .tag-dropdown {
    border-width: 2px;
    border-color: #000;
  }
}/* 패스워드 공유 모달 스타일 */

/* 모달 오버레이 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 모달 컨텐츠 */
.share-modal-content {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 모달 헤더 */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 28px 20px 28px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(to bottom, #ffffff, #fafbfc);
}

.modal-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.5px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #8e8e93;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  font-weight: 300;
}

.modal-close:hover {
  background: #f0f0f0;
  color: #1a1a1a;
  transform: rotate(90deg);
}

/* 모달 바디 */
.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

/* 공유할 패스워드 정보 */
.share-password-info {
  background: linear-gradient(135deg, #f5f7fa 0%, #f0f3f7 100%);
  padding: 20px;
  border-radius: 16px;
  margin-bottom: 24px;
  border: 1px solid #e1e4e8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.share-password-info h4 {
  margin: 0 0 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: #586069;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.password-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.password-preview div {
  font-size: 14px;
  color: #586069;
  padding: 8px 12px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e1e4e8;
  display: flex;
  align-items: center;
}

.password-preview strong {
  color: #24292e;
  font-weight: 600;
  margin-right: 12px;
  min-width: 80px;
  font-size: 13px;
}

/* 공유 설정 */
.share-settings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.share-settings h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #f6f8fa;
  border-radius: 12px;
  border: 1px solid #e1e4e8;
}

.setting-group label {
  font-size: 14px;
  font-weight: 600;
  color: #24292e;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.setting-group select {
  padding: 12px 16px;
  border: 2px solid #e1e4e8;
  border-radius: 10px;
  background: #ffffff;
  color: #24292e;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586069' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 44px;
}

.setting-group select:hover {
  border-color: #0366d6;
  background-color: #f6f8fa;
}

.setting-group select:focus {
  outline: none;
  border-color: #0366d6;
  box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
}

.setting-group small {
  font-size: 13px;
  color: #6a737d;
  margin-top: 2px;
  line-height: 1.4;
}

/* 보안 안내 */
.security-notice {
  background: linear-gradient(135deg, #e3f2fd 0%, #d6ebfd 100%);
  border: 1px solid #90caf9;
  padding: 20px;
  border-radius: 12px;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}

.security-notice::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #2196f3;
}

.security-notice h5 {
  margin: 0 0 16px 0;
  font-size: 15px;
  font-weight: 700;
  color: #1565c0;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.security-notice ul {
  margin: 0;
  padding-left: 24px;
  color: #1565c0;
}

.security-notice li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #424242;
}

.security-notice li:last-child {
  margin-bottom: 0;
}

/* 공유 결과 */
.share-result {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.share-result h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #28a745;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e1e4e8;
}

.share-info {
  background: #f6f8fa;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e1e4e8;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.share-key {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.share-key code {
  background: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #e1e4e8;
  color: #d73a49;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.share-settings-summary {
  font-size: 14px;
  color: #666;
}

/* 공유 URL 컨테이너 */
.share-url-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid #e1e4e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.share-url-container label {
  font-size: 15px;
  font-weight: 600;
  color: #24292e;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.share-url-box {
  display: flex;
  gap: 8px;
  align-items: center;
}

.share-url-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e1e4e8;
  border-radius: 10px;
  background: #f6f8fa;
  color: #24292e;
  font-size: 14px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-weight: 500;
  transition: all 0.2s ease;
}

.share-url-input:focus {
  background: #ffffff;
  border-color: #0366d6;
  outline: none;
}

.btn-copy-url {
  padding: 12px 20px;
  background: linear-gradient(135deg, #0366d6 0%, #0256c7 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(3, 102, 214, 0.2);
}

.btn-copy-url:hover {
  background: linear-gradient(135deg, #0256c7 0%, #0146a8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(3, 102, 214, 0.3);
}

.btn-copy-url:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(3, 102, 214, 0.2);
}

.share-url-container small {
  font-size: 12px;
  color: #666;
}

/* 경고 메시지 */
.share-warning {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
  border: 1px solid #ffcc80;
  padding: 20px;
  border-radius: 12px;
  margin-top: 24px;
  position: relative;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.1);
}

.share-warning::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #ffc107;
}

.share-warning p {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #856404;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  padding-left: 8px;
}

.share-warning p:last-child {
  margin-bottom: 0;
}

/* 에러 메시지 */
.error-message {
  background: linear-gradient(135deg, #fee5e7 0%, #f8d7da 100%);
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.1);
}

/* 모달 푸터 */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 28px;
  border-top: 1px solid #e1e4e8;
  gap: 12px;
  background: linear-gradient(to top, #f6f8fa, #fafbfc);
}

/* 버튼 스타일 */
.btn-cancel,
.btn-secondary {
  padding: 12px 24px;
  background: #ffffff;
  color: #586069;
  border: 2px solid #e1e4e8;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-cancel:hover,
.btn-secondary:hover {
  background: #f6f8fa;
  border-color: #d1d5da;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn-primary {
  padding: 12px 24px;
  background: linear-gradient(135deg, #0366d6 0%, #0256c7 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(3, 102, 214, 0.2);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0256c7 0%, #0146a8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(3, 102, 214, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(3, 102, 214, 0.2);
}

.btn-primary:disabled {
  background: #c8e1ff;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 10px;
  }

  .share-modal-content {
    max-width: none;
    max-height: 100vh;
    border-radius: 12px;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 16px;
  }
  
  .share-url-box {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-copy-url {
    width: 100%;
    justify-content: center;
  }
  
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }
  
  .modal-footer button {
    width: 100%;
  }
  
  /* iOS 줌 방지 */
  select,
  input {
    font-size: 16px;
  }
}

/* 작은 화면 */
@media (max-width: 480px) {
  .modal-header h3 {
    font-size: 18px;
  }
  
  .share-settings h4,
  .share-password-info h4 {
    font-size: 14px;
  }
  
  .setting-group label,
  .share-url-container label {
    font-size: 13px;
  }
}

/* 액세스 코드 컨테이너 */
.access-code-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: #f0f7ff;
  border-radius: 12px;
  border: 2px solid #d0e7ff;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.08);
}

.access-code-container label {
  font-size: 15px;
  font-weight: 600;
  color: #0366d6;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.access-code-info {
  margin-bottom: 12px;
}

.access-code-info p {
  font-size: 14px;
  color: #586069;
  margin: 0;
  line-height: 1.5;
}

.access-code-box {
  display: flex;
  gap: 8px;
  align-items: center;
}

.access-code-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #0366d6;
  border-radius: 10px;
  background: #ffffff;
  color: #0366d6;
  font-size: 16px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  transition: all 0.2s ease;
}

.access-code-input:focus {
  background: #f6f8fa;
  outline: none;
}

.btn-copy-code {
  padding: 12px 20px;
  background: linear-gradient(135deg, #0366d6 0%, #0256c7 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(3, 102, 214, 0.2);
}

.btn-copy-code:hover {
  background: linear-gradient(135deg, #0256c7 0%, #0146a8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(3, 102, 214, 0.3);
}

.btn-copy-code:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(3, 102, 214, 0.2);
}

.access-code-usage {
  margin-top: 16px;
  padding: 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e1e4e8;
}

.access-code-usage h5 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #24292e;
  display: flex;
  align-items: center;
  gap: 6px;
}

.access-code-usage ol {
  margin: 0;
  padding-left: 20px;
  color: #586069;
}

.access-code-usage li {
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.access-code-usage li:last-child {
  margin-bottom: 0;
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .share-modal-content {
    background: #1e1e1e;
    color: #e0e0e0;
  }
  
  .modal-header {
    border-bottom-color: #333;
  }
  
  .modal-header h3,
  .modal-close {
    color: #e0e0e0;
  }
  
  .modal-close:hover {
    background: #2a2a2a;
  }
  
  .share-password-info,
  .share-info {
    background: #2a2a2a;
    border-color: #333;
  }
  
  .password-preview div,
  .setting-group small,
  .share-key,
  .share-settings-summary {
    color: #b0b0b0;
  }
  
  .password-preview strong,
  .setting-group label,
  .share-password-info h4,
  .share-settings h4 {
    color: #e0e0e0;
  }
  
  .setting-group select,
  .share-url-input {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
  }
  
  .security-notice {
    background: #1a237e;
    border-color: #283593;
  }
  
  .security-notice h5 {
    color: #64b5f6;
  }
  
  .security-notice ul {
    color: #90caf9;
  }
  
  .share-warning {
    background: #3e2723;
    border-color: #5d4037;
  }
  
  .share-warning p {
    color: #ffab91;
  }
  
  .modal-footer {
    background: #252525;
    border-top-color: #333;
  }
  
  .access-code-container {
    background: #1a2332;
    border-color: #2a3f5f;
  }
  
  .access-code-container label {
    color: #64b5f6;
  }
  
  .access-code-info p {
    color: #b0b0b0;
  }
  
  .access-code-input {
    background: #2a2a2a;
    border-color: #4a5568;
    color: #64b5f6;
  }
  
  .access-code-input:focus {
    background: #333;
  }
  
  .access-code-usage {
    background: #2a2a2a;
    border-color: #444;
  }
  
  .access-code-usage h5 {
    color: #e0e0e0;
  }
  
  .access-code-usage ol {
    color: #b0b0b0;
  }
}/* 통합 대시보드 스타일 */
.dashboard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-primary);
}

/* 검색 박스 스타일 - 공유받은 패스워드 페이지와 동일 */
.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 8px;
  border: 1px solid var(--border-color, #e9ecef);
}

.search-box input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  color: #333 !important;
}

.search-box input::placeholder {
  color: #666 !important;
}

.search-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* 대시보드 액션 버튼 영역 */
.dashboard-actions {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  align-items: center;
  justify-content: flex-start;
}

.dashboard-actions .btn {
  color: #333 !important;
  border-color: #e9ecef !important;
  background: #ffffff !important;
}

.dashboard-actions .btn-primary {
  background: #007bff !important;
  color: #ffffff !important;
  border-color: #007bff !important;
}

.dashboard-actions .btn-primary:hover {
  background: #0056b3 !important;
  border-color: #0056b3 !important;
}

.dashboard-actions .btn-ghost {
  background: #f8f9fa !important;
  color: #666 !important;
  border-color: #e9ecef !important;
}

.dashboard-actions .btn-ghost:hover {
  background: #e9ecef !important;
  color: #333 !important;
}

/* 인라인 통계 정보 */
.stats-inline {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.stat-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  cursor: default;
}

.stat-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-badge span {
  font-weight: 600;
}

.stat-password {
  color: #4f46e5;
  border-color: rgba(79, 70, 229, 0.3);
  background: rgba(79, 70, 229, 0.05);
}

.stat-creditcard {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}

.stat-apikey {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
}

/* 검색 및 액션 영역 */
.dashboard-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.control-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 에러 배너 */
.error-banner {
  background: var(--error-light);
  color: var(--error);
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--error);
}

.error-banner p {
  margin: 0;
  font-size: 0.875rem;
}

/* 대시보드 콘텐츠 */
.dashboard-content {
  flex: 0 1 auto;
  overflow: visible;
  padding: 0;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .stats-inline {
    gap: 0.25rem;
  }
  
  .stat-badge {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    gap: 0.125rem;
  }
  
  .stat-badge svg {
    width: 10px;
    height: 10px;
  }
  
  
  
  .dashboard-controls {
    flex-direction: column;
    padding: 1rem 0rem;
    gap: 0.75rem;
  }
  
  .control-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .dashboard-content {
    padding: 0;
  }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .stat-item.stat-total {
    border-right-color: rgba(255, 255, 255, 0.1);
  }
}

/* 폼 모달 스타일 수정 */
.form-modal .modal-content {
  padding: 0;
  overflow: visible;
}

.form-modal .password-form-modal-content,
.form-modal .credit-card-form,
.form-modal .api-key-form {
  max-height: none;
  box-shadow: none;
  border: none;
  animation: none;
}/* 공유된 패스워드 페이지 스타일 */

.shared-password-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.shared-password-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 100%;
  overflow: hidden;
  animation: slideUp 0.6s ease-out;
}

.shared-password-card.error {
  max-width: 500px;
  text-align: center;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 헤더 스타일 */
.shared-password-header {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  padding: 30px;
  text-align: center;
}

.shared-password-header h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 700;
}

.shared-password-header .share-description {
  margin: 0;
  opacity: 0.9;
  font-size: 16px;
  line-height: 1.5;
}

/* 패스워드 정보 섹션 */
.password-info-section {
  padding: 30px;
  border-bottom: 1px solid #e5e7eb;
}

.password-info-section h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: #1f2937;
  font-weight: 600;
}

/* 정보 행 */
.info-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-row label {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.info-value {
  flex: 1;
  font-size: 16px;
  color: #1f2937;
  word-break: break-all;
  min-width: 0;
}

.info-value.password-value {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.info-value.website-link {
  color: #4f46e5;
  text-decoration: none;
}

.info-value.website-link:hover {
  text-decoration: underline;
}

.info-value.notes-value {
  white-space: pre-wrap;
  line-height: 1.5;
}

/* 패스워드 행 특별 스타일 */
.password-row {
  background: #fef3c7;
  border-color: #fbbf24;
}

.password-display {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

/* 버튼 스타일 */
.copy-btn {
  white-space: nowrap;
  font-size: 13px;
  min-width: auto;
}

.copy-btn.primary {
  background: #4f46e5;
  color: white;
  border-color: #4f46e5;
}

.copy-btn.primary:hover {
  background: #4338ca;
  border-color: #4338ca;
}

.toggle-btn {
  min-width: auto;
  padding: 6px 10px;
}

/* 공유 정보 섹션 */
.share-info-section {
  padding: 30px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.share-info-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #1f2937;
  font-weight: 600;
}

.share-details {
  display: grid;
  gap: 12px;
}

.share-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.share-detail-item .label {
  font-weight: 500;
  color: #6b7280;
}

.share-detail-item .value {
  font-weight: 600;
  color: #1f2937;
}

/* 보안 안내 */
.security-notice {
  padding: 30px;
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
}

.security-notice h4 {
  margin: 0 0 15px 0;
  color: #dc2626;
  font-size: 16px;
  font-weight: 600;
}

.security-notice ul {
  margin: 0;
  padding-left: 20px;
  color: #7f1d1d;
}

.security-notice li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.security-notice li:last-child {
  margin-bottom: 0;
}

/* 하단 액션 */
.shared-password-actions {
  padding: 30px;
  display: flex;
  gap: 15px;
  justify-content: center;
  background: #f9fafb;
}

/* 로딩 상태 */
.loading-state {
  padding: 60px 30px;
  text-align: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #4f46e5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-state h3 {
  margin: 0 0 10px 0;
  color: #1f2937;
  font-size: 24px;
}

.loading-state p {
  margin: 0;
  color: #6b7280;
  font-size: 16px;
}

/* 에러 상태 */
.error-content {
  padding: 60px 30px;
}

.error-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.error-content h3 {
  margin: 0 0 15px 0;
  color: #dc2626;
  font-size: 24px;
  font-weight: 700;
}

.error-message {
  margin: 0 0 30px 0;
  color: #7f1d1d;
  font-size: 18px;
  font-weight: 500;
}

.error-details {
  text-align: left;
  background: #fef2f2;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #fecaca;
  margin-bottom: 30px;
}

.error-details h4 {
  margin: 0 0 15px 0;
  color: #dc2626;
  font-size: 16px;
  font-weight: 600;
}

.error-details ul {
  margin: 0;
  padding-left: 20px;
  color: #7f1d1d;
}

.error-details li {
  margin-bottom: 8px;
  line-height: 1.5;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .shared-password-container {
    padding: 10px;
  }
  
  .shared-password-header {
    padding: 20px;
  }
  
  .shared-password-header h2 {
    font-size: 24px;
  }
  
  .password-info-section,
  .share-info-section,
  .security-notice,
  .shared-password-actions {
    padding: 20px;
  }
  
  .info-content {
    flex-direction: column;
    align-items: stretch;
  }
  
  .info-value {
    margin-bottom: 8px;
  }
  
  .password-display {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .shared-password-actions {
    flex-direction: column;
  }
  
  .copy-btn,
  .toggle-btn {
    align-self: flex-start;
  }
}

@media (max-width: 425px) {
  .shared-password-card {
    margin: 10px;
    border-radius: 12px;
  }
  
  .shared-password-header h2 {
    font-size: 20px;
  }
  
  .share-description {
    font-size: 14px;
  }
  
  .info-row {
    padding: 12px;
  }
  
  .copy-btn {
    font-size: 12px;
    padding: 6px 12px;
  }
}/* 보안 투명성 페이지 스타일 */

.security-transparency-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.security-container {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 헤더 스타일 */
.security-header {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  padding: 60px 40px;
  text-align: center;
}

.security-header h1 {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.security-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 섹션 공통 스타일 */
.security-transparency-page section {
  padding: 60px 40px;
  border-bottom: 1px solid var(--border-color);
}

.security-transparency-page section:last-child {
  border-bottom: none;
}

.security-transparency-page h2 {
  font-size: 2.2rem;
  margin-bottom: 30px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 보안 카드 그리드 */
.security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.security-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.security-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4CAF50, #2196F3, #FF9800, #9C27B0);
}

.security-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-color);
}

.security-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  opacity: 0.8;
}

.security-card h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.security-card p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-weight: 600;
}

.security-card ul {
  list-style: none;
  padding: 0;
  text-align: left;
}

.security-card li {
  padding: 8px 0;
  color: var(--text-secondary);
  position: relative;
  padding-left: 24px;
}

.security-card li::before {
  content: '✅';
  position: absolute;
  left: 0;
  font-size: 0.9rem;
}

/* 테스트 섹션 */
.test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.test-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 30px;
  transition: all 0.3s ease;
}

.test-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.test-card h3 {
  margin-bottom: 12px;
  color: var(--text-primary);
  font-size: 1.3rem;
}

.test-card p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}

.test-result {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #2e7d32;
  white-space: pre-line;
  overflow-x: auto;
}

/* 다크모드 테스트 결과 */
[data-theme="dark"] .test-result {
  background: #1e1e1e;
  border-color: #404040;
  color: #4caf50;
}

/* 개발자 도구 가이드 */
.guide-steps {
  margin-top: 40px;
}

.guide-step {
  display: flex;
  gap: 30px;
  margin-bottom: 50px;
  align-items: flex-start;
}

.step-number {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  box-shadow: 0 8px 16px rgba(76, 175, 80, 0.3);
}

.step-content {
  flex: 1;
}

.step-content h3 {
  margin-bottom: 12px;
  color: var(--text-primary);
  font-size: 1.4rem;
}

.step-content p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.6;
}

.code-example {
  background: #1e1e1e;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  overflow-x: auto;
}

.code-example code {
  color: #e0e0e0;
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

.guide-note {
  background: rgba(76, 175, 80, 0.1);
  border-left: 4px solid #4CAF50;
  padding: 12px 16px;
  margin-top: 16px;
  border-radius: 4px;
  color: var(--text-primary);
  font-weight: 500;
}

/* kbd 스타일 */
kbd {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 검증 도구 */
.verification-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.tool-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.tool-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.tool-card h3 {
  margin-bottom: 16px;
  color: var(--text-primary);
  font-size: 1.3rem;
}

.tool-card p {
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* 오픈소스 그리드 */
.open-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.open-source-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.open-source-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.open-source-card h3 {
  margin-bottom: 16px;
  color: var(--text-primary);
  font-size: 1.3rem;
}

.open-source-card p {
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* 인증서 그리드 */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.cert-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.cert-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.cert-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  opacity: 0.8;
}

.cert-item h3 {
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 1.2rem;
}

.cert-item p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.cert-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cert-status.approved {
  background: rgba(76, 175, 80, 0.15);
  color: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.cert-status.pending {
  background: rgba(255, 152, 0, 0.15);
  color: #FF9800;
  border: 1px solid rgba(255, 152, 0, 0.3);
}

/* 연락처 그리드 */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.contact-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.contact-item:hover {
  border-color: var(--primary-color);
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.contact-item h3 {
  margin-bottom: 12px;
  color: var(--text-primary);
  font-size: 1.2rem;
}

.contact-item p {
  color: var(--primary-color);
  font-family: monospace;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

/* 도구 결과 표시 */
.tool-result {
  margin-top: 16px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
}

.tool-result pre {
  margin: 0;
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #2e7d32;
  white-space: pre-wrap;
}

/* 다크모드 도구 결과 */
[data-theme="dark"] .tool-result {
  background: #1e1e1e;
  border-color: #404040;
}

[data-theme="dark"] .tool-result pre {
  color: #4caf50;
}

/* 사용법 가이드 */
.usage-guide {
  margin-top: 40px;
  padding: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.usage-guide h3 {
  margin-bottom: 20px;
  color: var(--text-primary);
  font-size: 1.2rem;
}

.guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.guide-step-simple {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.guide-step-simple:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: bold;
}

.guide-step-simple span:last-child {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.4;
}

/* 도구 카드 개선 */
.tool-card {
  position: relative;
  min-height: 200px;
}

.tool-card .feature-status {
  position: absolute;
  top: 16px;
  right: 16px;
}

.tool-card h3 {
  margin-right: 120px; /* 상태 배지 공간 확보 */
}

/* 기능 상태 표시 */
.feature-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 12px;
}

.feature-status.available {
  background: rgba(76, 175, 80, 0.15);
  color: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.feature-status.coming-soon {
  background: rgba(33, 150, 243, 0.15);
  color: #2196F3;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.feature-status.preparing {
  background: rgba(255, 152, 0, 0.15);
  color: #FF9800;
  border: 1px solid rgba(255, 152, 0, 0.3);
}

.feature-status.planning {
  background: rgba(156, 39, 176, 0.15);
  color: #9C27B0;
  border: 1px solid rgba(156, 39, 176, 0.3);
}

.feature-note {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 8px !important;
  font-style: italic;
  line-height: 1.4;
}

.tool-card,
.open-source-card {
  position: relative;
}

.tool-card .feature-status,
.open-source-card .feature-status {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* 비활성화된 버튼 스타일 조정 */
.tool-card button:disabled,
.open-source-card button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 연락처 아이템에 small 텍스트 스타일 */
.contact-item small {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
  font-style: italic;
}
@media (max-width: 768px) {
  .security-transparency-page {
    padding: 10px;
  }
  
  .security-header {
    padding: 40px 20px;
  }
  
  .security-header h1 {
    font-size: 2.2rem;
  }
  
  .security-subtitle {
    font-size: 1rem;
  }
  
  .security-transparency-page section {
    padding: 40px 20px;
  }
  
  .security-transparency-page h2 {
    font-size: 1.8rem;
  }
  
  .security-grid,
  .test-grid,
  .verification-tools,
  .open-source-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .guide-step {
    flex-direction: column;
    gap: 20px;
  }
  
  .step-number {
    align-self: center;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .cert-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .security-header h1 {
    font-size: 1.8rem;
  }
  
  .security-transparency-page h2 {
    font-size: 1.5rem;
  }
  
  .security-card,
  .test-card,
  .tool-card,
  .open-source-card,
  .contact-item {
    padding: 20px;
  }
  
  .code-example {
    padding: 16px;
    font-size: 0.8rem;
  }
}

/* 다크모드 지원 */
[data-theme="dark"] .security-transparency-page {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

[data-theme="dark"] .security-container {
  background: var(--bg-primary);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .security-header {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
}

[data-theme="dark"] .guide-note {
  background: rgba(76, 175, 80, 0.15);
  border-left-color: #4CAF50;
}

/* 애니메이션 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.security-card,
.test-card,
.tool-card,
.open-source-card,
.cert-item,
.contact-item {
  animation: fadeInUp 0.6s ease-out;
}

.security-card:nth-child(1) { animation-delay: 0.1s; }
.security-card:nth-child(2) { animation-delay: 0.2s; }
.security-card:nth-child(3) { animation-delay: 0.3s; }
.security-card:nth-child(4) { animation-delay: 0.4s; }
/* 사용자 가이드 페이지 스타일 */

.user-guide-page {
  min-height: 100vh;
  background: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-family);
}

/* 헤더 */
.guide-header {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  padding: 2rem 0 3rem 0;
  text-align: center;
}

.guide-header h1 {
  font-size: 2.5rem;
  margin: 0;
  font-weight: 700;
}

.guide-subtitle {
  font-size: 1.2rem;
  margin: 1rem 0 2rem 0;
  opacity: 0.9;
}

.guide-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stat-number {
  font-size: 2rem;
}

.stat-label {
  font-size: 0.9rem;
  color: white !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-weight: 500;
}

/* 컨테이너 */
.guide-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* 레이아웃 */
.guide-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  margin: -2rem 0 3rem 0;
  position: relative;
}

/* 네비게이션 */
.guide-nav {
  position: relative;
}

.nav-sticky {
  position: sticky;
  top: 2rem;
  background: var(--card-background);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
}

.nav-sticky h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: var(--primary-color);
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
  margin-bottom: 0.5rem;
}

.nav-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-size: 0.9rem;
}

.nav-button:hover {
  background: var(--hover-background);
  color: var(--primary-color);
}

.nav-list li.active .nav-button {
  background: var(--primary-color);
  color: white;
}

.nav-icon {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.nav-text {
  flex: 1;
}

.nav-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

/* 메인 콘텐츠 */
.guide-content {
  background: var(--card-background);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
}

/* 섹션 */
.guide-section {
  margin-bottom: 4rem;
}

.guide-section:last-child {
  margin-bottom: 0;
}

.guide-section h2 {
  font-size: 2rem;
  margin: 0 0 1.5rem 0;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-intro {
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  background: var(--info-background);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
}

.section-intro p {
  margin: 0;
  font-size: 1.1rem;
}

/* 스텝 카드 */
.step-cards {
  display: grid;
  gap: 1.5rem;
}

.step-card {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--background-color);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.step-card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.step-content h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-color);
}

.step-content p {
  margin: 0 0 1rem 0;
  color: var(--text-light);
}

.step-detail {
  margin-top: 1rem;
}

.step-detail code {
  display: block;
  background: var(--code-background);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-family: monospace;
  color: var(--primary-color);
}

.step-detail ul {
  margin: 0;
  padding-left: 1.5rem;
}

.step-detail li {
  margin-bottom: 0.25rem;
}

/* 기능 그리드 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  background: var(--background-color);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.feature-card:hover {
  box-shadow: var(--shadow-medium);
}

.feature-card h3 {
  margin: 0 0 1rem 0;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-steps ol,
.feature-steps ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.feature-steps li {
  margin-bottom: 0.5rem;
}

.feature-steps p {
  margin: 1rem 0 0.5rem 0;
  font-weight: 600;
}

/* 정보 박스들 */
.tip-box,
.warning-box,
.example-box {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.tip-box {
  background: var(--success-background);
  border-left: 4px solid var(--success-color);
}

.warning-box {
  background: var(--warning-background);
  border-left: 4px solid var(--warning-color);
}

.example-box {
  background: var(--info-background);
  border-left: 4px solid var(--info-color);
  font-family: monospace;
}

/* 태그 예시 */
.tag-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.tag-example {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--primary-color);
  color: white;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 500;
}

.tag-example.personal { background: #4CAF50; }
.tag-example.work { background: #2196F3; }
.tag-example.social { background: #FF9800; }
.tag-example.financial { background: #F44336; }
.tag-example.shopping { background: #9C27B0; }
.tag-example.gaming { background: #795548; }
.tag-example.important { background: #E91E63; }
.tag-example.temporary { background: #607D8B; }

/* 계속 읽기 */
.continue-reading {
  text-align: center;
  padding: 2rem;
  margin: 3rem 0 1rem 0;
  background: var(--info-background);
  border-radius: 12px;
  border: 2px dashed var(--border-color);
}

.continue-reading p {
  margin: 0;
  font-size: 1.1rem;
  color: var(--primary-color);
  font-weight: 500;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .guide-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: -1rem;
  }

  .nav-sticky {
    position: static;
    margin-bottom: 1rem;
  }

  .nav-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
  }

  .nav-button {
    justify-content: center;
    padding: 0.5rem;
  }

  .nav-text {
    display: none;
  }

  .guide-header h1 {
    font-size: 2rem;
  }

  .guide-subtitle {
    font-size: 1rem;
  }

  .guide-stats {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  .step-card {
    flex-direction: column;
    text-align: center;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .guide-content {
    padding: 1.5rem;
  }
}

@media (max-width: 425px) {
  .guide-container {
    padding: 0 1rem;
  }

  .guide-header {
    padding: 1.5rem 0 2rem 0;
  }

  .guide-header h1 {
    font-size: 1.8rem;
  }

  .step-card,
  .feature-card {
    padding: 1rem;
  }

  .guide-content {
    padding: 1rem;
  }
}/**
 * 공유받은 패스워드 접근 컴포넌트 스타일
 */

.shared-password-access {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.shared-password-access__container {
  max-width: 600px;
  width: 100%;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 헤더 */
.shared-password-access__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  text-align: center;
}

.shared-password-access__header .header-icon {
  margin-bottom: 10px;
}

.shared-password-access__header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.shared-password-access__header p {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
}

/* 공유자 정보 */
.shared-password-access__sender {
  padding: 24px 30px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.sender-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sender-name {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

.sender-email {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 14px;
}

/* 공유 메시지 */
.shared-password-access__message {
  padding: 20px 30px;
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
  font-style: italic;
  color: #1976d2;
}

.shared-password-access__message p {
  margin: 0;
}

/* 만료 정보 */
.shared-password-access__expiry {
  padding: 16px 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff3cd;
  color: #856404;
  border-bottom: 1px solid #ffeaa7;
}

.shared-password-access__expiry.expired {
  background: #f8d7da;
  color: #721c24;
}

/* 패스워드 정보 */
.shared-password-access__password {
  padding: 30px;
}

.password-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e9ecef;
}

.password-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.password-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.password-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.password-field label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.password-field span {
  font-size: 14px;
  color: #333;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.password-value {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  background: #e3f2fd !important;
  color: #1976d2 !important;
  border-color: #bbdefb !important;
}

.password-field a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2196f3;
  text-decoration: none;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
  transition: all 0.2s;
}

.password-field a:hover {
  background: #e3f2fd;
  border-color: #bbdefb;
}

/* 액션 버튼 */
.shared-password-access__actions {
  padding: 30px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-success:hover {
  background: #218838;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-danger:hover {
  background: #c82333;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #545b62;
}

.btn-outline {
  background: transparent;
  color: #007bff;
  border: 2px solid #007bff;
}

.btn-outline:hover {
  background: #007bff;
  color: white;
}

/* 상태 메시지 */
.status-message {
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  width: 100%;
}

.status-message.accepted {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-message.rejected {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.status-message.expired {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

/* 하단 링크 */
.shared-password-access__footer {
  padding: 24px 30px;
  background: #f8f9fa;
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* 로딩 및 에러 상태 */
.shared-password-access__loading,
.shared-password-access__error,
.shared-password-access__not-found {
  padding: 40px;
  text-align: center;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-icon,
.not-found-icon {
  color: #dc3545;
  margin-bottom: 20px;
}

.error-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .shared-password-access {
    padding: 12px;
  }
  
  .shared-password-access__container {
    border-radius: 12px;
  }
  
  .shared-password-access__header {
    padding: 24px 20px;
  }
  
  .shared-password-access__sender,
  .shared-password-access__password {
    padding: 20px;
  }
  
  .shared-password-access__actions,
  .shared-password-access__footer {
    padding: 20px;
    flex-direction: column;
  }
  
  .btn {
    justify-content: center;
  }
  
  .error-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .shared-password-access__header h1 {
    font-size: 20px;
  }
  
  .password-header h3 {
    font-size: 16px;
  }
  
  .btn {
    padding: 14px 20px;
    font-size: 14px;
  }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .shared-password-access {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  }
  
  .shared-password-access__container {
    background: #2d2d2d;
    color: #e0e0e0;
  }
  
  .shared-password-access__sender {
    background: #3a3a3a;
    border-bottom-color: #4a4a4a;
  }
  
  .sender-name {
    color: #e0e0e0;
  }
  
  .sender-email {
    color: #b0b0b0;
  }
  
  .password-header {
    border-bottom-color: #4a4a4a;
  }
  
  .password-header h3 {
    color: #e0e0e0;
  }
  
  .password-field span {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #e0e0e0;
  }
  
  .password-field a {
    background: #3a3a3a;
    border-color: #4a4a4a;
  }
  
  .password-field a:hover {
    background: #4a4a4a;
  }
  
  .shared-password-access__footer {
    background: #3a3a3a;
  }
  
  .shared-password-access__loading,
  .shared-password-access__error,
  .shared-password-access__not-found {
    background: #2d2d2d;
    color: #e0e0e0;
  }
}/**
 * 공유받은 패스워드 페이지 스타일
 */

.shared-password-page {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg-primary, #f8f9fa);
}


/* 통계 섹션 */
.stats-section {
  margin-bottom: 32px;
}

.unread-notification {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #e3f2fd;
  color: #1976d2;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  border-left: 4px solid #2196f3;
}

/* 통계 카드 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.stat-card {
  background: #ffffff !important;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #333 !important;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666 !important;
  font-weight: 500;
}

.stat-card.pending {
  border-color: #f59e0b;
}

.stat-card.pending .stat-number {
  color: #f59e0b !important;
}

.stat-card.accepted {
  border-color: #10b981;
}

.stat-card.accepted .stat-number {
  color: #10b981 !important;
}

.stat-card.expired {
  border-color: #6b7280;
}

.stat-card.expired .stat-number {
  color: #6b7280 !important;
}

/* 필터링 및 검색 */
.filters-container {
  background: #ffffff !important;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 8px;
  border: 1px solid var(--border-color, #e9ecef);
}

.search-box input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  color: #333 !important;
}

.search-box input::placeholder {
  color: #666 !important;
}

/* 공유키 입력 버튼 */
.btn-add-share-key {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #007bff !important;
  color: #ffffff !important;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-add-share-key:hover {
  background: #0056b3 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666 !important;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.filter-group svg {
  flex-shrink: 0;
  color: #666;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  background: #ffffff !important;
  color: #333 !important;
  font-size: 14px;
  cursor: pointer;
  min-width: 120px;
  flex-shrink: 0;
}

.filter-group select:focus {
  outline: none;
  border-color: #007bff;
}

/* 공유받은 패스워드 목록 */
.shared-passwords-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shared-password-card {
  background: #ffffff !important;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.shared-password-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.shared-password-card.unread {
  border-left: 4px solid #007bff;
  background: #f8f9ff;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.sender-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sender-name {
  font-weight: 600;
  color: #333 !important;
  font-size: 14px;
}

.sender-email {
  color: #666 !important;
  font-size: 12px;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.status-badge.accepted {
  background: #d4edda;
  color: #155724;
}

.status-badge.rejected {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.expired {
  background: #f8f9fa;
  color: #6c757d;
}

.share-message {
  margin-bottom: 16px;
  padding: 12px;
  background: #e3f2fd;
  border-radius: 8px;
  border-left: 4px solid #2196f3;
}

.share-message p {
  margin: 0;
  font-style: italic;
  color: #1976d2;
}

.card-content {
  margin-bottom: 16px;
}

/* 패스워드 상세 정보 - 줄 단위 표시 */
.password-details {
  margin-bottom: 16px;
}

.detail-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 12px;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-weight: 600;
  color: #666 !important;
  font-size: 13px;
  min-width: 80px;
  flex-shrink: 0;
}

.detail-value {
  font-size: 14px;
  color: #333 !important;
  flex: 1;
  word-break: break-word;
}

.password-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.password-row .password-value {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #1976d2 !important;
  background: #f8f9fa;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
  min-height: 32px;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.password-toggle {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  cursor: pointer;
  color: #666 !important;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.password-toggle:hover {
  background: #e9ecef;
  color: #333 !important;
  border-color: #dee2e6;
}

.card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-item .label {
  font-size: 12px;
  color: var(--text-secondary, #666);
  font-weight: 600;
  text-transform: uppercase;
}

.meta-item .value {
  font-size: 14px;
  color: #333 !important;
}

.meta-item .value.expired {
  color: #dc3545 !important;
  font-weight: 600;
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #545b62;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #218838;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: #c82333;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #0056b3;
}

/* 빈 상태 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-icon {
  color: var(--text-secondary, #666);
  margin-bottom: 16px;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  color: #333 !important;
  font-size: 18px;
}

.empty-state p {
  margin: 0;
  color: #666 !important;
  font-size: 14px;
}

/* 로딩 및 에러 상태 */
.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-message {
  color: #dc3545;
  margin-bottom: 16px;
  text-align: center;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .shared-password-page {
    padding: 16px;
  }
  
  .header-title h1 {
    font-size: 24px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .filter-controls {
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
  }
  
  .filter-group {
    flex: 1;
    min-width: 140px;
  }
  
  .filter-group select {
    width: 100%;
    min-width: auto;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .card-meta {
    grid-template-columns: 1fr;
  }
  
  .card-actions {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .info-row {
    flex-direction: column;
    gap: 4px;
  }
  
  .btn {
    flex: 1;
    justify-content: center;
  }
}

/* 공유키 입력 모달 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.share-key-modal {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666 !important;
  padding: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #f8f9fa;
  color: #333 !important;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.share-key-info {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.share-key-info p {
  margin: 0 0 8px 0;
  color: #333 !important;
  font-size: 14px;
}

.share-key-info p:last-child {
  margin-bottom: 0;
}

.share-key-hint {
  color: #666 !important;
  font-size: 13px;
}

.share-key-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-key-input-group label {
  font-size: 14px;
  font-weight: 500;
  color: #333 !important;
}

.share-key-input {
  padding: 12px 16px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Courier New', monospace;
  background: #ffffff;
  color: #333 !important;
  transition: all 0.2s ease;
}

.share-key-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.share-key-input:disabled {
  background: #f8f9fa;
  color: #666 !important;
  cursor: not-allowed;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid #e9ecef;
  gap: 12px;
  background: #f8f9fa;
}

.btn-cancel {
  padding: 10px 20px;
  background: #6c757d !important;
  color: white !important;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-cancel:hover {
  background: #5a6268 !important;
}

.btn-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  padding: 10px 20px;
  background: #007bff !important;
  color: white !important;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: #0056b3 !important;
}

.btn-primary:disabled {
  background: #b8daff !important;
  cursor: not-allowed;
}

/* 패스워드 표시 모달 */
.password-display-modal {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.password-display-info {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 20px;
}

.info-group {
  margin-bottom: 16px;
}

.info-group:last-child {
  margin-bottom: 0;
}

.info-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #666 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.info-value {
  font-size: 15px;
  color: #333 !important;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  word-break: break-all;
}

.password-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Courier New', monospace;
  font-weight: 600;
}

.btn-copy-inline {
  padding: 6px 12px;
  background: #007bff !important;
  color: white !important;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-copy-inline:hover {
  background: #0056b3 !important;
}

.share-meta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

.share-meta p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #666 !important;
}

.share-meta p:last-child {
  margin-bottom: 0;
}

.password-actions {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.password-actions h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333 !important;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-save-password,
.btn-use-once {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
}

.btn-save-password {
  background: #28a745 !important;
  color: white !important;
}

.btn-save-password:hover {
  background: #218838 !important;
}

.btn-use-once {
  background: #6c757d !important;
  color: white !important;
}

.btn-use-once:hover {
  background: #5a6268 !important;
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .shared-password-page {
    background: #1a1a1a;
    color: #e0e0e0;
  }
  
  .stat-card,
  .filters-container,
  .shared-password-card,
  .empty-state,
  .loading-container,
  .error-container {
    background: #2d2d2d;
    border-color: #4a4a4a;
    color: #e0e0e0;
  }
  
  .search-box {
    background: #3a3a3a;
    border-color: #4a4a4a;
  }
  
  .filter-group select {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #e0e0e0;
  }
  
  .password-info {
    background: #3a3a3a;
  }
  
  .shared-password-card.unread {
    background: #1a1a2e;
  }
}/* ShareCard 컴포넌트 스타일 */

.share-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  background: var(--bg-primary);
  transition: all 0.2s ease;
}

.share-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.share-card--active {
  border-left: 4px solid #10b981;
}

.share-card--warning {
  border-left: 4px solid #f59e0b;
}

.share-card--completed {
  border-left: 4px solid #6b7280;
  opacity: 0.8;
}

/* 헤더 */
.share-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.share-card__title-section {
  flex: 1;
}

.share-card__title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.share-card__website {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.8;
  font-style: italic;
}

/* ✨ 개선된 공유 메모 스타일 */
.share-card__note-container {
  margin-top: 8px;
}

.share-card__note {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: var(--primary-color);
  background: var(--bg-secondary);
  padding: 6px 8px;
  border-radius: 4px;
  border-left: 3px solid var(--primary-color);
  font-style: normal;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.9;
  word-break: break-word;
}

.share-card__note-toggle {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  margin-top: 4px;
  transition: all 0.2s ease;
  text-decoration: underline;
}

.share-card__note-toggle:hover {
  background: var(--bg-hover);
  color: var(--primary-color);
}

.share-card__status {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 12px;
}

.share-card--active .share-card__status {
  background: #d1fae5;
  color: #065f46;
}

.share-card--warning .share-card__status {
  background: #fef3c7;
  color: #92400e;
}

.share-card--completed .share-card__status {
  background: #f3f4f6;
  color: #4b5563;
}

/* 공유키 정보 */
.share-card__info {
  margin-bottom: 16px;
}

.share-card__key {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.share-card__key:hover {
  background: var(--bg-hover);
}

.share-card__key-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.share-card__key-value {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-primary);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.share-card__copy-icon {
  font-size: 12px;
  opacity: 0.6;
}

/* 사용률 */
.share-card__usage {
  margin-bottom: 16px;
}

.share-card__usage-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.share-card__usage-text {
  font-weight: 600;
  color: var(--text-primary);
}

.share-card__progress {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.share-card__progress-bar {
  height: 100%;
  background: #10b981;
  transition: width 0.3s ease;
  border-radius: 4px;
}

.share-card--warning .share-card__progress-bar {
  background: #f59e0b;
}

.share-card--completed .share-card__progress-bar {
  background: #6b7280;
}

/* 타이밍 정보 */
.share-card__timing {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 12px;
}

.share-card__timing-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.share-card__timing-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.share-card__timing-value {
  color: var(--text-primary);
  font-weight: 600;
}

.share-card__timing-value.expired {
  color: #dc2626;
}

/* 액션 버튼들 */
.share-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.share-card__revoke-btn,
.share-card__copy-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.share-card__revoke-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

.share-card__copy-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
}

.share-card__revoke-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.share-card__completed-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .share-card {
    padding: 16px;
  }
  
  .share-card__header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .share-card__status {
    margin-left: 0;
    align-self: flex-start;
  }
  
  .share-card__timing {
    flex-direction: column;
    gap: 8px;
  }
  
  .share-card__timing-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .share-card__actions {
    justify-content: flex-start;
  }
  
  /* ✨ 모바일에서 메모 텍스트 줄바꿈 */
  .share-card__note {
    word-break: break-word;
    font-size: 12px;
  }
  
  .share-card__note-toggle {
    font-size: 10px;
  }
}/* 공유관리 페이지 스타일 */
.share-management-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
  overflow: hidden;
}

/* 액션 헤더 */
.share-management-page .page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem 2rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.share-management-page .btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-management-page .btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.share-management-page .btn-secondary:hover {
  background: var(--bg-quaternary);
  color: var(--text-primary);
}

.share-management-page .btn-primary {
  background: var(--accent-primary);
  color: white;
}

.share-management-page .btn-primary:hover {
  background: var(--accent-dark);
}

.share-management-page .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 통계 카드 그리드 */
.share-management-page .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: var(--bg-primary);
}

.share-management-page .stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.share-management-page .stat-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.share-management-page .stat-card.active {
  border-color: var(--success-color);
  background: var(--success-light);
}

.share-management-page .stat-card.expired {
  border-color: var(--warning-color);
  background: var(--warning-light);
}

.share-management-page .stat-card.completed {
  border-color: var(--info-color);
  background: var(--info-light);
}

.share-management-page .stat-icon {
  font-size: 1.5rem;
  opacity: 0.8;
}

.share-management-page .stat-content {
  flex: 1;
}

.share-management-page .stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.share-management-page .stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* 검색 및 필터 바 */
.share-management-page .search-filter-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.share-management-page .search-box {
  flex: 1;
  max-width: 400px;
}

.share-management-page .search-input {
  width: 100%;
  padding: 0.5rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.share-management-page .search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.share-management-page .filter-buttons {
  display: flex;
  gap: 0.5rem;
}

.share-management-page .filter-btn {
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-management-page .filter-btn:hover {
  background: var(--bg-quaternary);
  color: var(--text-primary);
}

.share-management-page .filter-btn.active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

/* 공유 목록 컨테이너 */
.share-management-page .share-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
}

.share-management-page .share-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 상태 메시지 스타일 */
.share-management-page .loading-state,
.share-management-page .error-state,
.share-management-page .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-secondary);
}

.share-management-page .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color);
  border-top: 2px solid var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.share-management-page .empty-icon,
.share-management-page .error-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.share-management-page .loading-state h3,
.share-management-page .error-state h3,
.share-management-page .empty-state h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.share-management-page .loading-state p,
.share-management-page .error-state p,
.share-management-page .empty-state p {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .share-management-page .page-actions {
    padding: 1rem;
  }
  
  .share-management-page .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem;
  }
  
  .share-management-page .search-filter-bar {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }
  
  .share-management-page .search-box {
    max-width: none;
    width: 100%;
  }
  
  .share-management-page .filter-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .share-management-page .share-list-container {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .share-management-page .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .share-management-page .stat-card {
    padding: 0.75rem;
  }
  
  .share-management-page .stat-value {
    font-size: 1.25rem;
  }
  
  .share-management-page .filter-btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
  }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .share-management-page .stat-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .share-management-page .stat-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
  
  .share-management-page .loading-spinner {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-primary);
  }
}/* NewPass2 Main CSS Entry Point */
/* 600라인 룰 준수를 위한 모듈화된 CSS 구조 */
/* =========================== */
/* 0. 컴포넌트 스타일 (Component Styles) */
/* =========================== */
/* 지연 로딩 폴백 컴포넌트 스타일 */
/* 로딩 폴백 */
.loading-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--color-surface, #ffffff);
  border-radius: 8px;
  border: 1px solid var(--color-border, #e5e5e5);
  min-height: 200px;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border, #e5e5e5);
  border-top: 3px solid var(--color-primary, #007bff);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-fallback p {
  margin: 0;
  color: var(--color-text-muted, #6c757d);
  font-size: 14px;
  font-weight: 500;
}
/* 에러 폴백 */
.error-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--color-surface, #ffffff);
  border-radius: 8px;
  border: 1px solid var(--color-danger, #dc3545);
  min-height: 200px;
  text-align: center;
}
.error-fallback h2 {
  margin: 0 0 12px 0;
  color: var(--color-danger, #dc3545);
  font-size: 18px;
  font-weight: 600;
}
.error-fallback p {
  margin: 0 0 20px 0;
  color: var(--color-text-muted, #6c757d);
  font-size: 14px;
  line-height: 1.5;
  max-width: 300px;
}
.error-fallback button {
  padding: 8px 16px;
  border: 1px solid var(--color-danger, #dc3545);
  background: transparent;
  color: var(--color-danger, #dc3545);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.error-fallback button:hover {
  background: var(--color-danger, #dc3545);
  color: white;
}
/* 다크 모드 */
[data-theme="dark"] .loading-fallback {
  background: var(--color-surface-dark, #2d3748);
  border-color: var(--color-border-dark, #4a5568);
}
[data-theme="dark"] .loading-fallback p {
  color: var(--color-text-muted-dark, #a0aec0);
}
[data-theme="dark"] .error-fallback {
  background: var(--color-surface-dark, #2d3748);
}
[data-theme="dark"] .error-fallback p {
  color: var(--color-text-muted-dark, #a0aec0);
}
/* 모바일 최적화 */
@media (max-width: 768px) {
  .loading-fallback,
  .error-fallback {
    padding: 30px 16px;
    min-height: 150px;
  }
  
  .loading-spinner {
    width: 32px;
    height: 32px;
    border-width: 2px;
  }
  
  .error-fallback h2 {
    font-size: 16px;
  }
  
  .error-fallback p {
    font-size: 13px;
  }
}
/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: none;
    border-top-color: transparent;
  }
  
  .error-fallback button {
    transition: none;
  }
}
/* =========================== */
/* 1. 디자인 시스템 (Design System) */
/* =========================== */
/* NewPass2 Design System - 색상 팔레트 */
:root {
  /* Primary Brand Colors */
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;  /* Main Primary */
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;

  /* Success Colors */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: #22c55e;  /* Main Success */
  --success-600: #16a34a;
  --success-700: #15803d;

  /* Warning Colors */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;  /* Main Warning */
  --warning-600: #d97706;

  /* Danger Colors */
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;  /* Main Danger */
  --danger-600: #dc2626;
  --danger-700: #b91c1c;

  /* Neutral Colors */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Semantic Colors */
  --color-background: var(--gray-50);
  --color-surface: #ffffff;
  --color-border: var(--gray-200);
  --color-text-primary: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-muted: var(--gray-500);
}
/* NewPass2 Design System - 버튼 컴포넌트 */
/* Base Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--primary-500);
}
/* Button Sizes */
.btn--sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
.btn--md {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.btn--lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
/* Primary Variants */
.btn--primary {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
  color: white;
}
.btn--primary:hover:not(:disabled) {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}
.btn--primary:active {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}
/* Secondary Variants */
.btn--secondary {
  background-color: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-700);
}
.btn--secondary:hover:not(:disabled) {
  background-color: var(--gray-200);
  border-color: var(--gray-400);
}
.btn--secondary:active {
  background-color: var(--gray-300);
}
/* Success Variants */
.btn--success {
  background-color: var(--success-500);
  border-color: var(--success-500);
  color: white;
}
.btn--success:hover:not(:disabled) {
  background-color: var(--success-600);
  border-color: var(--success-600);
}
/* Warning Variants */
.btn--warning {
  background-color: var(--warning-500);
  border-color: var(--warning-500);
  color: white;
}
.btn--warning:hover:not(:disabled) {
  background-color: var(--warning-600);
  border-color: var(--warning-600);
}
/* Danger Variants */
.btn--danger {
  background-color: var(--danger-500);
  border-color: var(--danger-500);
  color: white;
}
.btn--danger:hover:not(:disabled) {
  background-color: var(--danger-600);
  border-color: var(--danger-600);
}
/* Outline Variants */
.btn--outline {
  background-color: transparent;
  border-color: var(--primary-500);
  color: var(--primary-500);
}
.btn--outline:hover:not(:disabled) {
  background-color: var(--primary-50);
  border-color: var(--primary-600);
  color: var(--primary-600);
}
.btn--outline-secondary {
  background-color: transparent;
  border-color: var(--gray-300);
  color: var(--gray-600);
}
.btn--outline-secondary:hover:not(:disabled) {
  background-color: var(--gray-50);
  border-color: var(--gray-400);
  color: var(--gray-700);
}
/* Ghost Variants */
.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--gray-600);
}
.btn--ghost:hover:not(:disabled) {
  background-color: var(--gray-100);
  color: var(--gray-700);
}
/* Icon Only Buttons */
.btn--icon {
  padding: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
}
.btn--icon.btn--sm {
  padding: 0.25rem;
  width: 2rem;
  height: 2rem;
}
.btn--icon.btn--lg {
  padding: 0.75rem;
  width: 3rem;
  height: 3rem;
}
/* Button Groups */
.btn-group {
  display: inline-flex;
  border-radius: 0.375rem;
  overflow: hidden;
}
.btn-group .btn {
  border-radius: 0;
  border-right-width: 0;
}
.btn-group .btn:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.btn-group .btn:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-right-width: 1px;
}
.btn-group .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
/* Loading State */
.btn--loading {
  position: relative;
  pointer-events: none;
}
.btn--loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* =========================== */
/* 1. 기본 스타일 (Base Styles) */
/* =========================== */
/* NewPass2 CSS Variables & Theme System */
/* CSS 변수 정의 (테마 시스템) */
:root {
  /* 라이트 테마 (기본) */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f5f7fa;
  --bg-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --text-primary: #333333;
  --text-secondary: #6c757d;
  --text-muted: #495057;
  --text-danger: #dc3545;
  --border-color: #e9ecef;
  --border-hover: #dee2e6;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);
  --primary-color: #667eea;
  --primary-dark: #5a67d8;
  --primary-rgb: 102, 126, 234;
  --accent-primary: #667eea;
  --accent-dark: #5a67d8;
  --accent-light: rgba(102, 126, 234, 0.1);
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
}
/* 다크 테마 */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #1e1e1e;
  --bg-header: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  --text-primary: #f7fafc;
  --text-secondary: #a0aec0;
  --text-muted: #cbd5e0;
  --text-danger: #f56565;
  --border-color: #4a5568;
  --border-hover: #718096;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);
  --primary-color: #63b3ed;
  --primary-dark: #4299e1;
  --primary-rgb: 99, 179, 237;
  --accent-primary: #63b3ed;
  --accent-dark: #4299e1;
  --accent-light: rgba(99, 179, 237, 0.1);
  --success-color: #48bb78;
  --danger-color: #f56565;
  --warning-color: #ed8936;
  --info-color: #4fd1c7;
}
/* NewPass2 CSS Reset & Base Styles */
/* 기본 리셋 및 공통 스타일 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 
               'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* 기본 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}
/* 포커스 아웃라인 통일 */
*:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
/* 텍스트 선택 스타일 */
::selection {
  background-color: var(--primary-color);
  color: white;
}
/**
 * 설정 기반 전역 스타일
 * 사용자 설정에 따른 접근성 및 테마 스타일
 */
/* 고대비 모드 */
.high-contrast {
  --text-primary: #000000;
  --text-secondary: #333333;
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --border-color: #000000;
  --primary-color: #0066cc;
  --danger-color: #cc0000;
  --success-color: #006600;
  --warning-color: #cc6600;
}
.high-contrast.theme-dark {
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --border-color: #ffffff;
  --primary-color: #3399ff;
  --danger-color: #ff3333;
  --success-color: #33ff33;
  --warning-color: #ff9933;
}
/* 큰 폰트 모드 */
.large-fonts {
  font-size: 18px;
}
.large-fonts h1 { font-size: 2.5rem; }
.large-fonts h2 { font-size: 2rem; }
.large-fonts h3 { font-size: 1.75rem; }
.large-fonts h4 { font-size: 1.5rem; }
.large-fonts h5 { font-size: 1.25rem; }
.large-fonts h6 { font-size: 1.125rem; }
.large-fonts .btn {
  font-size: 1rem;
  padding: 12px 20px;
}
.large-fonts .btn-sm {
  font-size: 0.9rem;
  padding: 10px 16px;
}
.large-fonts .btn-lg {
  font-size: 1.2rem;
  padding: 14px 24px;
}
.large-fonts input,
.large-fonts textarea,
.large-fonts select {
  font-size: 1rem;
  padding: 12px;
}
/* 애니메이션 비활성화 모드 */
.no-animations *,
.no-animations *::before,
.no-animations *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
/* 모든 애니메이션 완전 비활성화 */
.no-animations {
  --animation-duration: 0ms;
  --transition-duration: 0ms;
}
/* prefers-reduced-motion 미디어 쿼리 지원 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* 접근성 개선 - 포커스 표시 */
.high-contrast *:focus,
.high-contrast *:focus-visible {
  outline: 3px solid var(--primary-color) !important;
  outline-offset: 2px !important;
}
/* 큰 폰트 모드에서 모달 크기 조정 */
.large-fonts .modal-content {
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}
.large-fonts .settings-modal .modal-content {
  max-width: 600px;
}
/* 고대비 모드에서 그림자 제거 */
.high-contrast .modal-content,
.high-contrast .btn,
.high-contrast .password-item,
.high-contrast .form-group input {
  box-shadow: none !important;
}
/* 고대비 모드 버튼 스타일 */
.high-contrast .btn {
  border: 2px solid var(--border-color);
  font-weight: 600;
}
.high-contrast .btn-primary {
  background-color: var(--primary-color);
  color: var(--bg-primary);
  border-color: var(--primary-color);
}
.high-contrast .btn-primary:hover {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}
.high-contrast .btn-danger {
  background-color: var(--danger-color);
  color: var(--bg-primary);
  border-color: var(--danger-color);
}
/* 설정별 토글 효과 */
.settings-applied {
  transition: all 0.3s ease;
}
.no-animations .settings-applied {
  transition: none;
}
/* 다크모드 + 고대비 조합 */
.theme-dark.high-contrast .password-item {
  border: 2px solid var(--border-color);
  background-color: var(--bg-secondary);
}
.theme-dark.high-contrast .modal-overlay {
  background-color: rgba(0, 0, 0, 0.9);
}
/* 프린트 스타일 (내보내기 시 유용) */
@media print {
  .high-contrast {
    --text-primary: #000000;
    --bg-primary: #ffffff;
    --border-color: #000000;
  }
  
  .large-fonts {
    font-size: 14px;
  }
}
/* =========================== */
/* 1.5. 공통 컴포넌트 스타일 (Common Styles) */
/* =========================== */
/* 버튼 크기 공통 정의 */
/* 모든 버튼 컴포넌트에서 재사용 가능한 크기 변수 */
:root {
  /* 버튼 높이 */
  --btn-height-xs: 24px;
  --btn-height-sm: 28px;
  --btn-height-md: 36px;
  --btn-height-lg: 44px;
  
  /* 버튼 패딩 */
  --btn-padding-xs: 4px 8px;
  --btn-padding-sm: 6px 12px;
  --btn-padding-md: 8px 16px;
  --btn-padding-lg: 12px 24px;
  
  /* 버튼 폰트 크기 */
  --btn-font-xs: 0.7rem;
  --btn-font-sm: 0.75rem;
  --btn-font-md: 0.875rem;
  --btn-font-lg: 1rem;
  
  /* 버튼 border-radius */
  --btn-radius-sm: 4px;
  --btn-radius-md: 6px;
  --btn-radius-lg: 8px;
  
  /* 아이콘 버튼 크기 */
  --btn-icon-size-xs: 16px;
  --btn-icon-size-sm: 18px;
  --btn-icon-size-md: 20px;
  --btn-icon-size-lg: 24px;
}
/* 버튼 크기 클래스 */
.btn-xs {
  min-height: var(--btn-height-xs);
  padding: var(--btn-padding-xs);
  font-size: var(--btn-font-xs);
  border-radius: var(--btn-radius-sm);
}
.btn-sm {
  min-height: var(--btn-height-sm);
  padding: var(--btn-padding-sm);
  font-size: var(--btn-font-sm);
  border-radius: var(--btn-radius-sm);
}
.btn-md {
  min-height: var(--btn-height-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  border-radius: var(--btn-radius-md);
}
.btn-lg {
  min-height: var(--btn-height-lg);
  padding: var(--btn-padding-lg);
  font-size: var(--btn-font-lg);
  border-radius: var(--btn-radius-lg);
}
/* 아이콘 전용 버튼 */
.btn-icon-only {
  padding: 0;
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon-only.btn-xs {
  width: var(--btn-height-xs);
  height: var(--btn-height-xs);
}
.btn-icon-only.btn-md {
  width: var(--btn-height-md);
  height: var(--btn-height-md);
}
.btn-icon-only.btn-lg {
  width: var(--btn-height-lg);
  height: var(--btn-height-lg);
}
/* 버튼 그룹 간격 */
.btn-group {
  display: flex;
  gap: 0.5rem;
}
.btn-group-sm {
  gap: 0.375rem;
}
.btn-group-xs {
  gap: 0.25rem;
}
/* 폼 요소 공통 스타일 */
/* 입력 필드, 라벨, 값 표시 등 공통 요소 */
:root {
  /* 폼 요소 색상 */
  --form-bg: var(--gray-50);
  --form-border: var(--gray-200);
  --form-focus-border: var(--primary-500);
  --form-hover-border: var(--gray-300);
  --form-disabled-bg: var(--gray-100);
  --form-disabled-color: var(--gray-500);
  
  /* 폼 요소 크기 */
  --form-padding: 8px 12px;
  --form-radius: 6px;
  --form-gap: 0.5rem;
  
  /* 라벨 스타일 */
  --label-size: 0.7rem;
  --label-weight: 500;
  --label-color: var(--gray-500);
  --label-spacing: 0.05em;
}
/* 다크모드 폼 색상 */
@media (prefers-color-scheme: dark) {
  :root {
    --form-bg: var(--gray-700);
    --form-border: var(--gray-600);
    --form-hover-border: var(--gray-500);
    --form-disabled-bg: var(--gray-800);
    --label-color: var(--gray-400);
  }
}
/* =========================== */
/* 필드 컨테이너 */
/* =========================== */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.form-field:last-child {
  margin-bottom: 0;
}
/* =========================== */
/* 라벨 스타일 */
/* =========================== */
.form-label {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--label-color);
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  display: block;
}
.form-label-required::after {
  content: " *";
  color: var(--danger-500);
}
/* =========================== */
/* 값 표시 컨테이너 */
/* =========================== */
.form-value-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--form-gap);
  width: 100%;
  background: var(--form-bg);
  padding: var(--form-padding);
  border-radius: var(--form-radius);
  border: 1px solid var(--form-border);
  transition: border-color 0.15s ease;
}
.form-value-container:hover {
  border-color: var(--form-hover-border);
}
.form-value-container:focus-within {
  border-color: var(--form-focus-border);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
/* =========================== */
/* 입력 필드 */
/* =========================== */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: var(--form-bg);
  padding: var(--form-padding);
  border-radius: var(--form-radius);
  border: 1px solid var(--form-border);
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: all 0.15s ease;
}
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: var(--form-hover-border);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--form-focus-border);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background: var(--form-disabled-bg);
  color: var(--form-disabled-color);
  cursor: not-allowed;
}
/* =========================== */
/* 폼 값 표시 */
/* =========================== */
.form-value {
  flex: 1;
  font-size: 0.8rem;
  color: var(--gray-700);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* 다크모드 값 색상 */
@media (prefers-color-scheme: dark) {
  .form-value {
    color: var(--gray-200);
  }
}
/* =========================== */
/* 폼 액션 영역 */
/* =========================== */
.form-actions {
  display: flex;
  gap: var(--form-gap);
  align-items: center;
  flex-shrink: 0;
}
/* =========================== */
/* 폼 그룹 */
/* =========================== */
.form-group {
  margin-bottom: 1.5rem;
}
.form-group-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
/* =========================== */
/* 에러 상태 */
/* =========================== */
.form-field.error .form-input,
.form-field.error .form-textarea,
.form-field.error .form-select,
.form-field.error .form-value-container {
  border-color: var(--danger-500);
}
.form-error {
  font-size: 0.75rem;
  color: var(--danger-500);
  margin-top: 0.25rem;
}
/* =========================== */
/* 도움말 텍스트 */
/* =========================== */
.form-help {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
}
/* =========================== */
/* 반응형 */
/* =========================== */
@media (max-width: 768px) {
  .form-value-container {
    padding: 10px 12px;
  }
  
  .form-actions {
    gap: 0.25rem;
  }
}
/* 카드 레이아웃 공통 스타일 */
/* 패스워드 카드, 공유 카드 등 모든 카드 컴포넌트 공통 */
:root {
  /* 카드 기본 변수 */
  --card-bg: var(--color-surface);
  --card-border: var(--gray-200);
  --card-hover-border: var(--gray-300);
  --card-radius: 0.5rem;
  --card-padding: 1rem;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --card-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --card-min-height: 160px;
  
  /* 카드 애니메이션 */
  --card-transition: all 0.15s ease-in-out;
  --card-hover-transform: translateY(-2px);
}
/* 다크모드 카드 변수 */
@media (prefers-color-scheme: dark) {
  :root {
    --card-bg: var(--gray-800);
    --card-border: var(--gray-700);
    --card-hover-border: var(--gray-600);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --card-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}
/* =========================== */
/* 카드 그리드 시스템 */
/* =========================== */
.card-grid {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.card-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.card-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 800px;
}
.card-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* =========================== */
/* 카드 베이스 스타일 */
/* =========================== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  min-height: var(--card-min-height);
  display: flex;
  flex-direction: column;
  transition: var(--card-transition);
  position: relative;
  overflow: hidden;
}
.card:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-shadow);
  transform: var(--card-hover-transform);
}
.card:focus-within {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
/* =========================== */
/* 카드 콘텐츠 구조 */
/* =========================== */
.card-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}
.card-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}
.card-body {
  flex: 1;
}
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--card-border);
  padding-top: 0.75rem;
  margin-top: auto;
}
/* =========================== */
/* 카드 타이포그래피 */
/* =========================== */
.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0 0 0.5rem 0;
}
.card-text {
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.5;
}
/* =========================== */
/* 카드 상태 */
/* =========================== */
.card.loading {
  opacity: 0.6;
  pointer-events: none;
}
.card.selected {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}
.card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.card.error {
  border-color: var(--danger-500);
  background: var(--danger-50);
}
/* 다크모드 에러 상태 */
@media (prefers-color-scheme: dark) {
  .card.error {
    background: rgba(var(--danger-rgb), 0.1);
  }
}
/* =========================== */
/* 카드 액션 */
/* =========================== */
.card-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.card-actions-vertical {
  flex-direction: column;
  align-items: stretch;
}
.card-actions-end {
  justify-content: flex-end;
}
.card-actions-center {
  justify-content: center;
}
/* =========================== */
/* 반응형 */
/* =========================== */
@media (max-width: 1024px) {
  .card-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
@media (max-width: 768px) {
  .card-grid,
  .card-grid-auto,
  .card-grid-2,
  .card-grid-3 {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .card {
    --card-padding: 1rem;
  }
}
/* =========================== */
/* 애니메이션 감소 모드 */
/* =========================== */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  
  .card:hover {
    transform: none;
  }
}
/* =========================== */
/* 카드 스켈레톤 로딩 */
/* =========================== */
.card-skeleton {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  min-height: var(--card-min-height);
  position: relative;
  overflow: hidden;
}
.card-skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* =========================== */
/* 2. 레이아웃 스타일 (Layout) */
/* =========================== */
/* NewPass2 Layout Styles */
/* 컨테이너 스타일 */
.app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
}
/* 헤더 스타일 */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: var(--bg-header);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  color: white;
  transition: box-shadow 0.3s ease;
}
.app-header h1 {
  margin: 0 0 5px 0;
  font-size: 28px;
  font-weight: 700;
}
.app-header p {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
}
/* 메인 컨텐츠 영역 */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* 섹션 구분 */
.section {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
/* 사이드바 레이아웃 스타일 */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 998;
  opacity: 0;
  animation: fadeIn 0.2s ease-out forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-color);
  z-index: 999;
  transition: width 0.3s ease, transform 0.3s ease;
  overflow-x: hidden;
  overflow-y: auto;
  
  /* 스크롤바 스타일 */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 2px;
}
.sidebar-open {
  width: 280px;
  transform: translateX(0);
}
.sidebar-closed {
  width: 72px;
  transform: translateX(0);
  overflow: hidden;
}
/* 사이드바가 닫혔을 때 이모지 오버플로우 방지 */
.sidebar-closed .sidebar-header {
  overflow: hidden;
  padding: 1rem 0.5rem;
  justify-content: center;
}
.sidebar-closed .sidebar-brand {
  overflow: hidden;
  justify-content: center;
  width: 40px;
  margin: 0;
}
.sidebar-closed .brand-icon-collapsed {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  overflow: hidden;
}
.sidebar-closed .sidebar-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
/* 모바일에서 사이드바 */
@media (max-width: 768px) {
  .sidebar {
    width: 280px !important;
    transform: translateX(-100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  
  .sidebar-open {
    transform: translateX(0);
  }
}
/* 사이드바 헤더 */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border-color);
  min-height: 64px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  overflow: hidden;
}
.brand-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.brand-icon-collapsed {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  margin: 0 auto;
}
.brand-text h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.brand-text p {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.2;
}
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--bg-secondary);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.sidebar-toggle:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
/* 네비게이션 */
.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
}
.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-item {
  margin-bottom: 0.25rem;
}
.nav-link {
  display: flex;
  align-items: center;
  padding: 0.8rem 1.2rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  border-radius: 0;
  gap: 0.8rem;
}
.nav-link:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.nav-link-active {
  background: var(--accent-light);
  color: var(--accent-primary);
  border-right: 3px solid var(--accent-primary);
}
.nav-link-active:hover {
  background: var(--accent-light);
  color: var(--accent-primary);
}
.nav-icon {
  flex-shrink: 0;
  opacity: 0.8;
}
.nav-link-active .nav-icon {
  opacity: 1;
}
.nav-content {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  overflow: hidden;
}
.nav-label {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
}
.nav-description {
  font-size: 0.75rem;
  opacity: 0.7;
  line-height: 1.2;
}
/* 사이드바 푸터 */
.sidebar-footer {
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}
.footer-info {
  text-align: center;
}
.footer-version {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0 0 0.25rem 0;
}
.footer-copyright {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  margin: 0;
}
/* 앱 레이아웃 */
.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg-primary);
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 72px;
  transition: margin-left 0.3s ease;
}
.content-shifted {
  margin-left: 280px;
}
@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
  }
  
  .content-shifted {
    margin-left: 0;
  }
}
/* 앱 헤더 */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 1rem;
  min-height: 64px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0; /* 텍스트 오버플로우 방지 */
}
.mobile-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.mobile-menu-button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
@media (max-width: 768px) {
  .mobile-menu-button {
    display: flex;
    flex-shrink: 0; /* 버튼 크기 고정 */
  }
  
  .app-header {
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }
  
  .header-left {
    gap: 0.75rem;
  }
  
  .page-title {
    font-size: 1.1rem;
  }
}
.page-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0; /* 오른쪽 영역 크기 보존 */
}
.user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.user-name {
  font-weight: 500;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .header-right {
    gap: 0.5rem;
  }
  
  .user-info {
    font-size: 0.85rem;
    gap: 0.25rem;
  }
  
  .user-name {
    max-width: 100px;
  }
}
.logout-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.logout-button:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.logout-text {
  font-size: 0.9rem;
}
@media (max-width: 480px) {
  .logout-text {
    display: none;
  }
  
  .user-info {
    display: none; /* 좁은 화면에서 사용자 정보 숨김 */
  }
  
  .page-title {
    font-size: 1rem;
  }
}
/* 페이지 콘텐츠 */
.page-content {
  flex: 1;
  padding: 0 2rem;
  overflow: auto;
}
@media (max-width: 768px) {
  .page-content {
    padding: 0 1rem;
  }
}
/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .sidebar {
    background: var(--bg-primary);
    border-right-color: var(--border-color);
  }
  
  .sidebar-toggle {
    background: var(--bg-secondary);
    color: var(--text-secondary);
  }
  
  .sidebar-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }
  
  .nav-link:hover {
    background: var(--bg-secondary);
  }
  
  .nav-link-active {
    background: var(--accent-light);
    color: var(--accent-primary);
  }
}
/* 사이드바 레이아웃 수정 */
/* 모바일에서만 오버레이 표시 */
@media (min-width: 769px) {
  .sidebar-overlay {
    display: none !important;
  }
}
/* 모바일 사이드바 수정 */
@media (max-width: 768px) {
  /* 사이드바 기본 상태 - 화면 밖으로 */
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    transform: translateX(-100%) !important;
    z-index: 999 !important;
  }
  
  /* 사이드바 열림 상태 */
  .sidebar.sidebar-open {
    transform: translateX(0) !important;
  }
  
  /* 메인 콘텐츠는 항상 전체 너비 */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  .content-shifted {
    margin-left: 0 !important;
  }
  
  /* 페이지 콘텐츠 전체 너비 */
  .page-content {
    width: 100%;
    max-width: 100%;
  }
  
  /* 대시보드 환영 메시지 보이도록 */
  .dashboard-welcome {
    position: relative;
    z-index: 1;
  }
}
/* 데스크톱 사이드바 수정 */
@media (min-width: 769px) {
  /* 사이드바 닫힌 상태 */
  .sidebar {
    width: 72px !important;
  }
  
  .sidebar.sidebar-open {
    width: 280px !important;
  }
  
  /* 메인 콘텐츠 여백 조정 */
  .main-content {
    margin-left: 72px !important;
    transition: margin-left 0.3s ease;
  }
  
  .main-content.content-shifted {
    margin-left: 280px !important;
  }
}
/* 앱 레이아웃 수정 */
.app-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
}
/* 메인 콘텐츠 영역 */
.main-content {
  flex: 1;
  min-width: 0;
  background: var(--bg-primary);
}
/* 페이지 콘텐츠 패딩 조정 - sidebar.css에서 관리 */
/* 대시보드 컨테이너 전체 너비 */
.dashboard-container {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
/* 패스워드 검색 컨테이너 전체 너비 */
.password-search-container {
  width: 100%;
  padding: 0;
  margin: 0;
}
/* 깔끔한 대시보드 레이아웃 (상단 메뉴바 제거) */
.dashboard-container {
  padding: 0;
  margin: 0;
  min-height: 100%;
}
.dashboard-welcome {
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border-color);
}
.welcome-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}
.welcome-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}
/* 모바일 최적화 */
@media (max-width: 768px) {
  .dashboard-welcome {
    padding: 1rem 0;
    margin-bottom: 1.5rem;
  }
  
  .welcome-title {
    font-size: 1.25rem;
  }
  
  .welcome-subtitle {
    font-size: 0.9rem;
  }
}
/* 다크 모드 */
@media (prefers-color-scheme: dark) {
  .welcome-title {
    color: var(--text-primary);
  }
  
  .welcome-subtitle {
    color: var(--text-secondary);
  }
}
/* 헤더 레이아웃 최적화 */
/* 데스크톱 및 모바일 헤더 스타일 */
/* 데스크톱 헤더 타이틀 섹션 */
.page-title-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 통계 배지 스타일 */
.stats-inline {
  display: flex;
  gap: 6px;
  align-items: center;
}
.stat-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  cursor: default;
}
.stat-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.stat-badge span {
  font-weight: 600;
}
.stat-password {
  color: #4f46e5 !important;
  border-color: rgba(79, 70, 229, 0.3) !important;
  background: rgba(79, 70, 229, 0.05) !important;
}
.stat-creditcard {
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  background: rgba(245, 158, 11, 0.05) !important;
}
.stat-apikey {
  color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  background: rgba(16, 185, 129, 0.05) !important;
}
.page-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary, #333);
  line-height: 1.2;
}
.page-subtitle-header {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary, #666);
  line-height: 1.3;
}
/* 모바일 전용 헤더 레이아웃 */
@media (max-width: 768px) {
  /* 헤더 기본 구조 */
  .app-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
    min-height: 56px; /* 모바일 표준 헤더 높이 */
  }
  
  /* 왼쪽 영역 (햄버거 메뉴 + 타이틀) */
  .header-left {
    display: contents; /* 그리드 아이템으로 분리 */
  }
  
  /* 햄버거 메뉴 버튼 */
  .mobile-menu-button {
    grid-column: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 페이지 타이틀 */
  .page-title-section {
    grid-column: 2;
    padding: 0 0.5rem;
  }
  
  .page-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .stats-inline {
    gap: 4px;
  }
  
  .stat-badge {
    font-size: 10px;
    padding: 2px 6px;
    gap: 2px;
  }
  
  .page-title {
    font-size: 1.1rem;
    text-align: left;
    margin: 0;
  }
  
  .page-subtitle-header {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    margin: 2px 0 0 0;
    line-height: 1.2;
  }
  
  /* 오른쪽 영역 (사용자 정보 + 로그아웃) */
  .header-right {
    grid-column: 3;
    justify-content: flex-end;
  }
}
/* 더 좁은 화면 (480px 이하) */
@media (max-width: 480px) {
  .app-header {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  
  .page-title-section {
    padding: 0 0.25rem;
  }
  
  .page-title {
    font-size: 1rem;
  }
  
  .page-subtitle-header {
    font-size: 0.7rem;
  }
  
  /* 로그아웃 버튼 최소화 */
  .logout-button {
    width: 32px;
    height: 32px;
    padding: 0;
    min-width: auto;
  }
  
  .logout-button svg {
    width: 16px;
    height: 16px;
  }
}
/* 아주 좁은 화면 (360px 이하) */
@media (max-width: 360px) {
  .page-title {
    font-size: 0.95rem;
  }
  
  .page-subtitle-header {
    font-size: 0.65rem;
  }
  
  .mobile-menu-button {
    width: 32px;
    height: 32px;
  }
}
/* 모바일 전체 너비 활용 최적화 */
/* 모바일에서 페이지 콘텐츠 패딩 조정 */
@media (max-width: 768px) {
  /* 페이지 콘텐츠 영역 */
  .page-content {
    padding: 0.75rem;
  }
  
  /* 대시보드 컨테이너 */
  .dashboard-container {
    width: 100%;
    max-width: none;
  }
  
  /* 패스워드 검색 컨테이너 */
  .password-search-container {
    padding: 0;
    margin: 0;
    width: 100%;
  }
  
  /* 패스워드 리스트 컨테이너 */
  .password-list-container {
    padding: 0;
    margin: 0;
    width: 100%;
  }
  
  /* 패스워드 그리드 - 모바일 최적화 */
  .password-list-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 0.75rem 0;
    padding: 0;
    width: 100%;
  }
  
  /* 패스워드 아이템 - 전체 너비 사용 */
  .password-item {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  
  /* 검색 바 */
  .search-bar-container {
    width: 100%;
    padding: 0;
    margin-bottom: 0.75rem;
  }
  
  .search-bar {
    width: 100%;
  }
  
  /* 대시보드 환영 메시지 */
  .dashboard-welcome {
    padding: 1rem 0;
    margin: 0 0 1rem 0;
  }
}
/* 더 작은 화면 (480px 이하) */
@media (max-width: 480px) {
  .page-content {
    padding: 0.5rem;
  }
  
  .password-list-grid {
    gap: 0.5rem;
    margin: 0.5rem 0;
  }
  
  .password-item {
    padding: 0.875rem;
  }
  
  /* 카드 내부 여백 조정 */
  .password-item-value-container {
    padding: 8px 10px;
  }
  
  .dashboard-welcome {
    padding: 0.75rem 0;
    margin-bottom: 0.75rem;
  }
}
/* 아주 작은 화면 (360px 이하) */
@media (max-width: 360px) {
  .page-content {
    padding: 0.375rem;
  }
  
  .password-list-grid {
    gap: 0.375rem;
  }
  
  .password-item {
    padding: 0.75rem;
    min-height: 140px;
  }
  
  /* 폰트 크기 미세 조정 */
  .password-item-title {
    font-size: 0.95rem;
  }
  
  .password-item-value {
    font-size: 0.75rem;
  }
}
/* 전체 너비 유틸리티 클래스 */
.full-width-mobile {
  @media (max-width: 768px) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* 모바일 가로 스크롤 방지 */
/* 전체 페이지 스크롤 방지 */
html, body {
  overflow-x: hidden;
  width: 100%;
}
/* 앱 레이아웃 스크롤 방지 */
.app-layout {
  overflow-x: hidden;
  width: 100%;
}
/* 메인 콘텐츠 영역 */
.main-content {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}
/* 페이지 콘텐츠 */
.page-content {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* 대시보드 컨테이너 */
.dashboard-container {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* 패스워드 검색 컨테이너 */
.password-search-container {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* 패스워드 리스트 그리드 */
.password-list-grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
/* 모든 패스워드 카드 */
.password-card-modern,
.password-item {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* 모바일 전용 수정 */
@media (max-width: 768px) {
  /* 패딩으로 인한 오버플로우 방지 */
  .page-content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .password-list-grid {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  
  /* 패스워드 카드 내부 요소 */
  .field-content {
    max-width: 100%;
    overflow: hidden;
  }
  
  .field-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* 버튼 그룹 오버플로우 방지 */
  .field-actions {
    flex-shrink: 0;
    overflow: hidden;
  }
  
  .card-actions {
    flex-shrink: 0;
    overflow: hidden;
  }
}
/* 더 작은 화면 */
@media (max-width: 480px) {
  .page-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
/* viewport 메타 태그를 위한 CSS */
@viewport {
  width: device-width;
  initial-scale: 1;
  maximum-scale: 1;
  user-scalable: no;
}
/* =========================== */
/* 3. 컴포넌트 스타일 (Components) */
/* =========================== */
/* =========================== */
/* 대시보드 헤더 개선 스타일 */
/* 순수 텍스트/이모지 액션 아이템 */
/* =========================== */
/* 대시보드 액션 아이템들 */
.dashboard-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}
/* 헤더 액션 아이템 공통 스타일 */
.header-action-item {
  color: white;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  user-select: none;
  text-decoration: none;
}
.header-action-item:hover {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}
.header-action-item:active {
  transform: translateY(0) scale(0.98);
  background-color: rgba(255, 255, 255, 0.2);
}
/* 로그아웃 아이템 특별 스타일 */
.logout-item {
  font-size: 24px;
  padding: 6px;
  border-radius: 8px;
}
.logout-item:hover {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.1);
}
.logout-item:active {
  transform: scale(0.95);
}
/* 모바일 반응형 */
@media (max-width: 768px) {
  .dashboard-actions {
    gap: 16px;
  }
  
  .header-action-item {
    font-size: 14px;
    padding: 6px 8px;
  }
  
  .logout-item {
    font-size: 20px;
    padding: 4px;
  }
  
  /* 검색 헤더 영역 모바일 최적화 */
  .search-header-actions {
    width: 100%;
    justify-content: center;
    gap: 0.75rem;
  }
  
  .add-password-button {
    flex: 1;
    max-width: 200px;
    min-width: auto;
  }
}
/* 작은 모바일 화면 */
@media (max-width: 425px) {
  .dashboard-actions {
    gap: 12px;
  }
  
  /* 작은 화면에서는 아이콘만 표시 */
  .header-action-item:not(.logout-item) {
    font-size: 0;
    padding: 8px;
    position: relative;
  }
  
  .header-action-item:not(.logout-item)::before {
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .header-action-item:nth-child(1)::before {
    content: '📊'; /* 공유 관리 아이콘 */
  }
  
  .header-action-item:nth-child(2)::before {
    content: '⚙️'; /* 설정 아이콘 */
  }
  
  .logout-item {
    font-size: 18px;
  }
}
/* 다크모드 지원 */
.theme-dark .header-action-item {
  color: rgba(255, 255, 255, 0.9);
}
.theme-dark .header-action-item:hover {
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.05);
}
/* 접근성 개선 */
.header-action-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
/* 애니메이션 최소화 */
@media (prefers-reduced-motion: reduce) {
  .header-action-item {
    transition: none !important;
    transform: none !important;
  }
  
  .header-action-item:hover,
  .header-action-item:active,
  .logout-item:hover,
  .logout-item:active {
    transform: none !important;
  }
}
/* 고대비 모드 */
@media (prefers-contrast: high) {
  .header-action-item {
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .header-action-item:hover {
    border-color: rgba(255, 255, 255, 0.6);
  }
}
/* 검색 헤더 액션 영역 */
.search-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.add-password-button {
  min-width: 120px;
}
/* 작은 모바일 화면 */
@media (max-width: 425px) {
  .dashboard-actions {
    gap: 12px;
  }
  
  /* 작은 화면에서는 아이콘만 표시 */
  .header-action-item:not(.logout-item) {
    font-size: 0;
    padding: 8px;
    position: relative;
  }
  
  .header-action-item:not(.logout-item)::before {
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .header-action-item:nth-child(1)::before {
    content: '📊'; /* 공유 관리 아이콘 */
  }
  
  .header-action-item:nth-child(2)::before {
    content: '⚙️'; /* 설정 아이콘 */
  }
  
  .logout-item {
    font-size: 18px;
  }
  
  /* 새 패스워드 버튼 */
  .add-password-button .btn-text {
    display: none;
  }
  
  .add-password-button {
    min-width: 44px;
    width: 44px;
    justify-content: center;
  }
  
  .search-header-actions {
    gap: 12px;
  }
}
/* 다크모드 지원 */
.theme-dark .menu-dropdown {
  background: var(--bg-primary);
  border-color: var(--border-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.theme-dark .menu-item:hover {
  background: var(--bg-secondary);
}
.theme-dark .menu-item:active {
  background: var(--bg-tertiary);
}
/* 접근성 개선 */
.menu-button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.menu-item:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
  background: var(--bg-secondary);
}
/* 드롭다운 외부 클릭 감지용 오버레이 */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}
/* 애니메이션 최소화 */
@media (prefers-reduced-motion: reduce) {
  .menu-dropdown {
    animation: none;
  }
  
  .menu-item {
    transition: none;
  }
}
/* =========================== */
/* 설정 모달 스타일 */
/* 애플리케이션 설정 UI */
/* =========================== */
.settings-modal .modal-content {
  max-width: 500px;
}
.settings-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* 설정 섹션 */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.settings-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
/* 설정 행 */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 16px;
  min-height: 48px; /* 최소 높이 보장 */
}
.settings-row-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-row-control {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
/* 설정 아이템 */
.settings-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.settings-description {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.8;
}
/* 설정 토글 스위치 */
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.settings-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: 0.3s;
  border-radius: 24px;
}
.settings-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.settings-toggle input:checked + .settings-toggle-slider {
  background-color: var(--primary-color);
}
.settings-toggle input:checked + .settings-toggle-slider:before {
  transform: translateX(20px);
}
.settings-toggle:hover .settings-toggle-slider {
  box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.1);
}
/* 테마 토글 컨테이너 */
.theme-toggle-container {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.settings-select {
  width: 120px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
}
.settings-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}
/* 데이터 관리 액션 그룹 */
.settings-action-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-action-button {
  justify-content: flex-start;
  text-align: left;
}
/* 정보 박스 */
.settings-info-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}
.settings-info-text {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 8px 0;
  line-height: 1.4;
}
.settings-info-text:last-child {
  margin-bottom: 0;
}
/* 설정 푸터 */
.settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  margin-top: 8px;
}
.settings-footer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-version,
.settings-build {
  font-size: 12px;
  color: var(--text-secondary);
}
.settings-footer-actions {
  display: flex;
  gap: 8px;
}
/* 체크박스 스타일 (구버전 호환) */
.settings-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}
.settings-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
.settings-checkbox-text {
  font-size: 14px;
  color: var(--text-primary);
  user-select: none;
}
.settings-info {
  flex: 1;
}
.settings-actions {
  display: flex;
  gap: 8px;
}
/* 다크모드 지원 */
.theme-dark .settings-select {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.theme-dark .settings-select:focus {
  background: var(--bg-primary);
}
.theme-dark .settings-toggle-slider:before {
  background-color: var(--bg-primary);
}
/* 모바일 반응형 */
@media (max-width: 768px) {
  .settings-modal .modal-content {
    width: 95%;
    max-width: none;
  }
  
  .settings-content {
    gap: 20px;
  }
  
  .settings-section {
    gap: 12px;
  }
  
  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: auto;
  }
  
  .settings-row-control {
    align-self: flex-end;
    width: auto;
    margin-top: 8px;
  }
  
  .settings-select {
    width: 100px;
  }
  
  .settings-footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .settings-footer .settings-footer-actions {
    order: -1;
    width: 100%;
  }
  
  .settings-footer-actions .btn {
    flex: 1;
  }
}
/* 접근성 개선 */
.settings-checkbox:focus-within {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 4px;
}
.settings-select:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.settings-toggle:focus-within {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 24px;
}
/* 고대비 모드 */
@media (prefers-contrast: high) {
  .settings-section-title,
  .settings-footer {
    border-width: 2px;
  }
  
  .settings-select {
    border-width: 2px;
  }
  
  .settings-checkbox input[type="checkbox"] {
    border: 2px solid var(--text-primary);
  }
  
  .settings-toggle-slider {
    border: 2px solid var(--text-primary);
  }
}
/* 정렬 및 필터 컨트롤 스타일 */
/* 정렬 컨트롤 */
.sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* 필터 컨트롤 */
.filter-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* 공통 셀렉트 스타일 */
.sort-select,
.filter-select {
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 0.875rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  min-width: 120px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  padding-right: 32px;
}
.sort-select:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.sort-order-toggle {
  min-width: 36px;
  padding: 6px;
}
.sort-order-toggle .btn-icon {
  font-size: 1rem;
}
/* 활성 상태 스타일 */
.sort-controls.active .sort-select,
.filter-controls.active .filter-select {
  border-color: var(--primary-color);
  background-color: rgba(59, 130, 246, 0.05);
}
.sort-order-toggle.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .sort-select,
  .filter-select {
    background: var(--bg-secondary);
    border-color: var(--gray-600);
    color: var(--text-primary);
  }
  
  .sort-select:focus,
  .filter-select:focus {
    border-color: var(--primary-color);
    background: var(--bg-primary);
  }
}
/* 모바일 반응형 */
@media (max-width: 768px) {
  .sort-controls,
  .filter-controls {
    flex-direction: column;
    width: 100%;
    gap: 0.25rem;
  }
  
  .sort-select,
  .filter-select {
    width: 100%;
    min-width: auto;
  }
  
  .sort-order-toggle {
    width: 100%;
    min-width: auto;
  }
}
/* 호버 효과 */
.sort-select:hover,
.filter-select:hover {
  border-color: var(--gray-400);
  background-color: rgba(0, 0, 0, 0.02);
}
.sort-order-toggle:hover {
  transform: translateY(-1px);
}
/* 컨트롤 컨테이너 개선 */
.password-search-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.password-search-controls .controls-left,
.password-search-controls .controls-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* 라벨 스타일 */
.filter-controls::before {
  content: "필터:";
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.sort-controls::before {
  content: "정렬:";
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .password-search-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .password-search-controls .controls-left,
  .password-search-controls .controls-right {
    width: 100%;
  }
  
  .filter-controls::before,
  .sort-controls::before {
    display: none;
  }
}
/* 필터가 적용된 상태 표시 */
.filter-select.has-filter {
  border-color: var(--primary-color);
  background-color: rgba(59, 130, 246, 0.1);
  font-weight: 600;
}
.sort-select.has-sort {
  border-color: #10b981;
  background-color: rgba(16, 185, 129, 0.1);
}
/* 필터 리셋 버튼 */
.filter-reset-button {
  padding: 4px 8px;
  font-size: 0.75rem;
  opacity: 0.8;
  transition: all 0.2s ease;
}
.filter-reset-button:hover {
  opacity: 1;
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  transform: scale(1.05);
}
/* =========================== */
/* 3. 공통 컴포넌트 (Components) */
/* =========================== */
/* NewPass2 Button Styles */
/* 버튼 공통 스타일 */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* 버튼 색상 변형 */
.btn-primary {
  background-color: var(--success-color);
  color: white;
}
.btn-primary:hover:not(:disabled) {
  background-color: #218838;
}
.btn-danger {
  background-color: var(--danger-color);
  color: white;
}
.btn-danger:hover:not(:disabled) {
  background-color: #c82333;
}
.btn-secondary {
  background-color: var(--text-secondary);
  color: white;
}
.btn-secondary:hover:not(:disabled) {
  background-color: #5a6268;
}
.btn-info {
  background-color: var(--info-color);
  color: white;
}
.btn-info:hover:not(:disabled) {
  background-color: #138496;
}
.btn-warning {
  background-color: var(--warning-color);
  color: white;
}
.btn-warning:hover:not(:disabled) {
  background-color: #e0a800;
}
/* 버튼 크기 변형 */
.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}
.btn-lg {
  padding: 12px 24px;
  font-size: 16px;
}
/* 아웃라인 버튼 */
.btn-outline {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}
.btn-outline:hover:not(:disabled) {
  background: var(--primary-color);
  color: white;
}
/* 아이콘 버튼 */
.btn-icon {
  padding: 8px;
  border-radius: 50%;
  min-width: 40px;
  min-height: 40px;
  justify-content: center;
}
/* NewPass2 Card & Form Styles */
/* 카드 스타일 */
.card {
  background: var(--bg-primary);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.2s ease, background-color 0.3s ease;
}
.card:hover {
  box-shadow: var(--shadow-lg);
}
.card-body {
  padding: 20px;
}
.card-header {
  padding: 15px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
}
.card-footer {
  padding: 15px 20px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}
/* 폼 스타일 */
.form-group {
  margin-bottom: 15px;
}
.form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: var(--text-primary);
}
.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-input.error {
  border-color: var(--danger-color);
}
.form-error {
  color: var(--danger-color);
  font-size: 12px;
  margin-top: 5px;
}
.form-textarea {
  resize: vertical;
  min-height: 80px;
}
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  padding-right: 35px;
}
/* 폼 행 레이아웃 */
.form-row {
  display: flex;
  gap: 15px;
}
.form-row .form-group {
  flex: 1;
}
/* 인라인 폼 */
.form-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-inline .form-group {
  margin-bottom: 0;
}
/* NewPass2 Modal Styles */
/* 모달 오버레이 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-in-out;
}
/* 모달 컨텐츠 */
.modal-content {
  background: var(--bg-primary);
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
  border: 1px solid var(--border-color);
  animation: slideUp 0.3s ease-out;
}
/* 모달 헤더 */
.modal-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
}
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.modal-close:hover {
  background-color: var(--bg-secondary);
}
/* 모달 바디 */
.modal-body {
  margin-bottom: 20px;
  color: var(--text-primary);
  line-height: 1.6;
}
/* 모달 푸터 */
.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}
/* 확인 다이얼로그 스타일 */
.confirm-dialog .modal-content {
  max-width: 400px;
}
.confirm-dialog .modal-body {
  text-align: center;
  padding: 20px 0;
}
.confirm-dialog .modal-footer {
  justify-content: center;
}
/* 모달 크기 변형 */
.modal-sm .modal-content {
  max-width: 400px;
}
.modal-lg .modal-content {
  max-width: 700px;
}
.modal-xl .modal-content {
  max-width: 900px;
}
/* 풀스크린 모달 */
.modal-fullscreen .modal-content {
  width: 95vw;
  height: 95vh;
  max-width: none;
  max-height: none;
  margin: 2.5vh auto;
}
/* NewPass2 Utility Styles */
/* 로딩 상태 */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  color: var(--text-secondary);
}
.loading::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top: 2px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}
/* 빈 상태 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}
.empty-state h3 {
  margin-bottom: 10px;
  color: var(--text-muted);
}
.empty-state p {
  margin-bottom: 20px;
}
/* 숨김/보임 유틸리티 */
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}
.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;
}
/* 텍스트 유틸리티 */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-muted {
  color: var(--text-muted) !important;
}
.text-primary {
  color: var(--primary-color) !important;
}
.text-success {
  color: var(--success-color) !important;
}
.text-danger {
  color: var(--danger-color) !important;
}
.text-warning {
  color: var(--warning-color) !important;
}
/* 마진/패딩 유틸리티 */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 5px !important; }
.mt-2 { margin-top: 10px !important; }
.mt-3 { margin-top: 15px !important; }
.mt-4 { margin-top: 20px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 5px !important; }
.mb-2 { margin-bottom: 10px !important; }
.mb-3 { margin-bottom: 15px !important; }
.mb-4 { margin-bottom: 20px !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 5px !important; }
.pt-2 { padding-top: 10px !important; }
.pt-3 { padding-top: 15px !important; }
.pt-4 { padding-top: 20px !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 5px !important; }
.pb-2 { padding-bottom: 10px !important; }
.pb-3 { padding-bottom: 15px !important; }
.pb-4 { padding-bottom: 20px !important; }
/* 플렉스 유틸리티 */
.d-flex {
  display: flex !important;
}
.flex-column {
  flex-direction: column !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
.align-items-center {
  align-items: center !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
/* 애니메이션 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}
.slide-up {
  animation: slideUp 0.3s ease-out;
}
.pulse {
  animation: pulse 2s infinite;
}
/* =========================== */
/* 공통 모달 컴포넌트 스타일 */
/* 모든 모달에서 사용하는 통일된 디자인 */
/* =========================== */
/* 모달 오버레이 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: modalOverlayFadeIn 0.2s ease-out;
}
@keyframes modalOverlayFadeIn {
  from { 
    opacity: 0; 
    backdrop-filter: blur(0px);
  }
  to { 
    opacity: 1; 
    backdrop-filter: blur(4px);
  }
}
/* 모달 컨텐츠 */
.modal-content {
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modalContentSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
@keyframes modalContentSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* 모달 크기 변형 */
.modal-sm {
  width: 100%;
  max-width: 400px;
}
.modal-md {
  width: 100%;
  max-width: 500px;
}
.modal-lg {
  width: 100%;
  max-width: 700px;
}
.modal-xl {
  width: 100%;
  max-width: 900px;
}
/* 모달 헤더 */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px 24px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.modal-title-section {
  flex: 1;
  min-width: 0;
}
.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.modal-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.modal-subtitle {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: var(--text-secondary);
  opacity: 0.8;
}
/* 모달 닫기 버튼 */
.modal-close-button {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 16px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close-button:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  transform: scale(1.1);
}
.modal-close-button:active {
  transform: scale(0.95);
}
.modal-close-button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
/* 모달 바디 */
.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* 스크롤바 스타일 */
.modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal-body::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}
.modal-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}
/* 모달 푸터 */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 20px 24px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  gap: 16px;
}
.modal-footer > div:last-child {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.modal-footer .btn {
  min-width: 80px;
}
/* 다크모드 지원 */
.theme-dark .modal-content {
  background: var(--bg-primary);
  border-color: var(--border-color);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3);
}
.theme-dark .modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}
/* 모바일 반응형 */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 10px;
    align-items: flex-end;
  }
  
  .modal-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 95vh;
    animation: modalContentSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  @keyframes modalContentSlideUp {
    from {
      opacity: 0;
      transform: translateY(100px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .modal-header {
    padding: 16px 20px 12px 20px;
  }
  
  .modal-title {
    font-size: 16px;
  }
  
  .modal-body {
    padding: 16px 20px;
  }
  
  .modal-footer {
    padding: 12px 20px 16px 20px;
    flex-direction: column;
    gap: 12px;
  }
  
  .modal-footer > div:last-child {
    width: 100%;
    order: -1;
  }
  
  .modal-footer .btn {
    width: 100%;
    min-width: auto;
    height: 48px;
  }
}
/* 작은 모바일 화면 */
@media (max-width: 375px) {
  .modal-overlay {
    padding: 5px;
  }
  
  .modal-content {
    border-radius: 12px 12px 0 0;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* 가로 모드 최적화 */
@media (max-height: 500px) and (orientation: landscape) {
  .modal-overlay {
    align-items: center;
    padding: 10px;
  }
  
  .modal-content {
    max-height: 95vh;
    border-radius: 16px;
    animation: modalContentSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .modal-header {
    padding: 12px 20px 8px 20px;
  }
  
  .modal-title {
    font-size: 16px;
  }
  
  .modal-body {
    padding: 12px 20px;
  }
  
  .modal-footer {
    padding: 8px 20px 12px 20px;
  }
}
/* 접근성 개선 */
.modal-content:focus {
  outline: none;
}
/* 고대비 모드 */
@media (prefers-contrast: high) {
  .modal-content {
    border-width: 2px !important;
  }
  
  .modal-header,
  .modal-footer {
    border-width: 2px !important;
  }
  
  .modal-close-button {
    border: 1px solid var(--text-secondary) !important;
  }
}
/* 특별한 모달 변형 */
.modal-content.modal-danger .modal-header {
  border-bottom-color: var(--danger-color);
}
.modal-content.modal-danger .modal-title {
  color: var(--danger-color);
}
.modal-content.modal-success .modal-header {
  border-bottom-color: var(--success-color);
}
.modal-content.modal-success .modal-title {
  color: var(--success-color);
}
.modal-content.modal-warning .modal-header {
  border-bottom-color: var(--warning-color);
}
.modal-content.modal-warning .modal-title {
  color: var(--warning-color);
}
/* 로딩 상태 */
.modal-content.modal-loading {
  pointer-events: none;
  opacity: 0.7;
}
.modal-content.modal-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.theme-dark .modal-content.modal-loading::after {
  background: rgba(0, 0, 0, 0.8);
}
/* 설정 모달 Footer 레이아웃 개선 */
.settings-footer-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
/* 버튼 영역 */
.settings-footer-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* 왼쪽 영역 - 초기화 버튼 */
.settings-footer-left {
  display: flex;
  align-items: center;
}
/* 오른쪽 영역 - 취소/저장 버튼 */
.settings-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 버튼 내부 정렬 수정 */
.settings-footer-buttons .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 16px !important;
}
/* 취소 버튼 특별 처리 */
.settings-footer-buttons .btn-outline-secondary {
  min-width: 80px !important;
}
.settings-footer-buttons .btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 0.5rem !important;
}
.settings-footer-buttons .btn-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1;
}
/* 버전 정보 - 하단 중앙 */
.settings-footer-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color, #e5e5e5);
  width: 100%;
}
.settings-version {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #666);
}
.settings-build {
  font-size: 12px;
  color: var(--text-muted, #999);
}
.settings-build::before {
  content: "•";
  margin-right: 8px;
  color: var(--text-muted, #999);
}
/* 모바일 대응 */
@media (max-width: 480px) {
  .settings-footer-buttons {
    flex-direction: column;
    gap: 12px;
  }
  
  .settings-footer-left,
  .settings-footer-right {
    width: 100%;
    justify-content: center;
  }
  
  .settings-footer-left {
    order: 2;
  }
  
  .settings-footer-right {
    order: 1;
  }
}
/* 다크모드 대응 */
.theme-dark .settings-footer-info {
  border-top-color: var(--border-color);
}
.theme-dark .settings-version,
.theme-dark .settings-build {
  color: var(--text-muted);
}
/* 설정 모달 스크롤 및 높이 수정 - !important 제거 버전 */
/* 설정 모달 전체 높이 제한 - 더 구체적인 선택자 사용 */
.modal.settings-modal .modal-dialog .modal-content,
.settings-modal.show .modal-dialog .modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
/* 모달 바디 스크롤 설정 - 프레임 제거 */
.modal.settings-modal .modal-dialog .modal-content .modal-body,
.settings-modal.show .modal-dialog .modal-content .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(90vh - 180px); /* 헤더와 푸터 높이 고려 */
  flex: 1 1 auto;
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
}
/* 설정 컨텐츠 - 프레임 효과 제거 */
.modal.settings-modal .modal-dialog .modal-content .modal-body .settings-content,
.settings-modal.show .modal-dialog .modal-content .modal-body .settings-content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}
/* 설정 섹션 간격 조정 - 더 깔끔하게 */
.modal.settings-modal .modal-dialog .modal-content .modal-body .settings-section,
.settings-modal.show .modal-dialog .modal-content .modal-body .settings-section {
  padding: 24px 0;
  margin: 0;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
}
.modal.settings-modal .modal-dialog .modal-content .modal-body .settings-section:first-child,
.settings-modal.show .modal-dialog .modal-content .modal-body .settings-section:first-child {
  padding-top: 0;
}
.modal.settings-modal .modal-dialog .modal-content .modal-body .settings-section:last-child,
.settings-modal.show .modal-dialog .modal-content .modal-body .settings-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
/* 모달 푸터 고정 - 더 구체적인 선택자 */
.modal.settings-modal .modal-dialog .modal-content .modal-footer,
.settings-modal.show .modal-dialog .modal-content .modal-footer {
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  background: var(--bg-primary, #ffffff);
  border-top: 2px solid var(--border-color, #e5e5e5);
  margin-top: 0;
}
/* 스크롤바 스타일 - 더 미니멀하게 */
.modal.settings-modal .modal-dialog .modal-content .modal-body::-webkit-scrollbar,
.settings-modal.show .modal-dialog .modal-content .modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal.settings-modal .modal-dialog .modal-content .modal-body::-webkit-scrollbar-track,
.settings-modal.show .modal-dialog .modal-content .modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.modal.settings-modal .modal-dialog .modal-content .modal-body::-webkit-scrollbar-thumb,
.settings-modal.show .modal-dialog .modal-content .modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.modal.settings-modal .modal-dialog .modal-content .modal-body::-webkit-scrollbar-thumb:hover,
.settings-modal.show .modal-dialog .modal-content .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
/* 모바일 대응 */
@media (max-width: 768px) {
  .modal.settings-modal .modal-dialog .modal-content,
  .settings-modal.show .modal-dialog .modal-content {
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  
  .modal.settings-modal .modal-dialog .modal-content .modal-body,
  .settings-modal.show .modal-dialog .modal-content .modal-body {
    max-height: calc(100vh - 160px);
  }
  
  .modal.settings-modal .modal-dialog .modal-content .modal-body .settings-section,
  .settings-modal.show .modal-dialog .modal-content .modal-body .settings-section {
    padding: 16px;
  }
}
/* 작은 화면 대응 */
@media (max-height: 600px) {
  .modal.settings-modal .modal-dialog .modal-content .modal-body,
  .settings-modal.show .modal-dialog .modal-content .modal-body {
    max-height: calc(90vh - 140px);
  }
}
/* 다크모드 - 더 구체적인 선택자 */
.theme-dark .modal.settings-modal .modal-dialog .modal-content .modal-footer,
.theme-dark .settings-modal.show .modal-dialog .modal-content .modal-footer {
  background: var(--bg-primary);
  border-top-color: var(--border-color);
}
.theme-dark .modal.settings-modal .modal-dialog .modal-content .modal-body::-webkit-scrollbar-track,
.theme-dark .settings-modal.show .modal-dialog .modal-content .modal-body::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
.theme-dark .modal.settings-modal .modal-dialog .modal-content .modal-body::-webkit-scrollbar-thumb,
.theme-dark .settings-modal.show .modal-dialog .modal-content .modal-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
}
/* 애니메이션 */
.modal.settings-modal .modal-dialog .modal-content,
.settings-modal.show .modal-dialog .modal-content {
  transition: all 0.3s ease;
}
/* 2FA 설정 버튼 스타일 수정 - !important 제거 버전 */
/* 기본 버튼 스타일 - 더 구체적인 선택자 사용 */
.modal.settings-modal .modal-content .modal-body .btn,
.settings-modal.show .modal-dialog .modal-content .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  visibility: visible;
  opacity: 1;
}
.modal.settings-modal .modal-content .modal-body .btn.btn-sm,
.settings-modal.show .modal-dialog .modal-content .btn.btn-sm {
  padding: 6px 12px;
  font-size: 0.875rem;
  min-height: 32px;
}
/* 2FA 버튼 특별 스타일 - 더 구체적인 선택자로 우선순위 확보 */
.modal.settings-modal .modal-content .modal-body .settings-2fa-button,
.settings-modal.show .modal-dialog .modal-content .settings-2fa-button {
  position: relative;
  z-index: 10;
  cursor: pointer;
  display: inline-flex;
  visibility: visible;
  opacity: 1;
  min-width: 100px;
  min-height: 32px;
}
/* primary 버튼 스타일 (설정하기) - 더 구체적인 선택자 */
.modal.settings-modal .modal-content .modal-body .btn.btn-primary,
.settings-modal.show .modal-dialog .modal-content .btn.btn-primary,
.modal.settings-modal .modal-content .modal-body .settings-2fa-button.btn-primary,
.settings-modal.show .modal-dialog .modal-content .settings-2fa-button.btn-primary {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: white;
}
.modal.settings-modal .modal-content .modal-body .btn.btn-primary:hover:not(:disabled),
.settings-modal.show .modal-dialog .modal-content .btn.btn-primary:hover:not(:disabled),
.modal.settings-modal .modal-content .modal-body .settings-2fa-button.btn-primary:hover:not(:disabled),
.settings-modal.show .modal-dialog .modal-content .settings-2fa-button.btn-primary:hover:not(:disabled) {
  background-color: #2563eb;
  border-color: #2563eb;
  color: white;
  transform: translateY(-1px);
}
/* outline-danger 버튼 스타일 (비활성화) - 더 구체적인 선택자 */
.modal.settings-modal .modal-content .modal-body .btn.btn-outline-danger,
.settings-modal.show .modal-dialog .modal-content .btn.btn-outline-danger,
.modal.settings-modal .modal-content .modal-body .settings-2fa-button.btn-outline-danger,
.settings-modal.show .modal-dialog .modal-content .settings-2fa-button.btn-outline-danger {
  background-color: transparent;
  border-color: #ef4444;
  color: #ef4444;
}
.modal.settings-modal .modal-content .modal-body .btn.btn-outline-danger:hover:not(:disabled),
.settings-modal.show .modal-dialog .modal-content .btn.btn-outline-danger:hover:not(:disabled),
.modal.settings-modal .modal-content .modal-body .settings-2fa-button.btn-outline-danger:hover:not(:disabled),
.settings-modal.show .modal-dialog .modal-content .settings-2fa-button.btn-outline-danger:hover:not(:disabled) {
  background-color: #ef4444;
  border-color: #ef4444;
  color: white;
  transform: translateY(-1px);
}
/* 설정 모달 내부 버튼들 - 더 구체적인 선택자 */
.modal.settings-modal .modal-content .modal-body .settings-row-control,
.settings-modal.show .modal-dialog .modal-content .settings-row-control {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  min-height: 40px;
}
.modal.settings-modal .modal-content .modal-body .settings-row-control .btn,
.settings-modal.show .modal-dialog .modal-content .settings-row-control .btn {
  position: relative;
  z-index: 10;
}
/* 호버 효과 확인 */
.modal.settings-modal .modal-content .modal-body .settings-2fa-button:hover,
.settings-modal.show .modal-dialog .modal-content .settings-2fa-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 모바일 대응 */
@media (max-width: 768px) {
  .modal.settings-modal .modal-content .modal-body .settings-2fa-button,
  .settings-modal.show .modal-dialog .modal-content .settings-2fa-button {
    min-width: 80px;
    font-size: 14px;
  }
}
/* 버튼 내부 요소들 - 더 구체적인 선택자 */
.modal.settings-modal .modal-content .modal-body .settings-2fa-button .btn-icon,
.settings-modal.show .modal-dialog .modal-content .settings-2fa-button .btn-icon {
  font-size: 1em;
  line-height: 1;
}
.modal.settings-modal .modal-content .modal-body .settings-2fa-button .btn-text,
.settings-modal.show .modal-dialog .modal-content .settings-2fa-button .btn-text {
  font-weight: 500;
}
/* 다크모드 지원 */
.theme-dark .modal.settings-modal .modal-content .modal-body .btn.btn-primary,
.theme-dark .settings-modal.show .modal-dialog .modal-content .btn.btn-primary {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: white;
}
.theme-dark .modal.settings-modal .modal-content .modal-body .btn.btn-outline-danger,
.theme-dark .settings-modal.show .modal-dialog .modal-content .btn.btn-outline-danger {
  background-color: transparent;
  border-color: #ef4444;
  color: #ef4444;
}
/* =========================== */
/* 4. 기능별 스타일 (Features) */
/* =========================== */
/* NewPass2 Dashboard Styles */
/* Dashboard 전용 스타일 */
.dashboard-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background-color: var(--bg-secondary);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.dashboard-title {
  margin: 0 0 5px 0;
  color: var(--text-primary);
  font-size: 28px;
  transition: color 0.3s ease;
}
.dashboard-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  transition: color 0.3s ease;
}
.dashboard-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn-add-password {
  padding: 10px 20px;
  background-color: var(--success-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.btn-add-password:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-add-password:hover:not(:disabled) {
  background-color: #218838;
}
.btn-logout {
  padding: 10px 15px;
  background-color: var(--danger-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-logout:hover {
  background-color: #c82333;
}
/* Dashboard 통계 */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
.stat-card {
  background: var(--bg-primary);
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  border: 1px solid var(--border-color);
}
.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 5px;
}
.stat-label {
  color: var(--text-secondary);
  font-size: 14px;
}
/* Dashboard 네비게이션 */
.dashboard-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
}
.nav-tab {
  padding: 10px 20px;
  background: var(--bg-secondary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  color: var(--text-primary);
}
.nav-tab:hover {
  background: var(--border-color);
}
.nav-tab.active {
  background: var(--primary-color);
  color: white;
}
/* 개선된 대시보드 스타일 - 보안 기능 통합 */
.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.dashboard-header {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.dashboard-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: white;
}
.dashboard-subtitle {
  font-size: 1rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}
.dashboard-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* 헤더 액션 버튼 스타일 */
.header-action-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}
.header-action-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
/* 보안 분석 버튼 특별 스타일 */
.security-button {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #86efac !important;
}
.security-button:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.3) !important;
  border-color: rgba(34, 197, 94, 0.6) !important;
  color: white !important;
}
/* 로그아웃 버튼 특별 스타일 */
.logout-button {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}
.logout-button:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.3) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: white !important;
}
/* 보안 권장사항 모달 오버레이 */
/* NOTE: Moved to SecurityRecommendations-modal-fix.css for consistency with standard modal system */
/* .security-recommendations-modal-overlay styles are now in SecurityRecommendations-modal-fix.css */
/* 보안 모달 애니메이션 */
/* NOTE: Animation styles moved to SecurityRecommendations-modal-fix.css */
/* 버튼 오버라이드 (헤더에서 사용) */
.dashboard-actions .btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(10px);
}
.dashboard-actions .btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
/* 보안 알림 배지 (향후 사용) */
.security-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* 다크모드 지원 */
[data-theme="dark"] .dashboard-header {
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
/* Dark theme for security modal is now in SecurityRecommendations-modal-fix.css */
/* 모바일 반응형 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 1rem 0.5rem;
  }

  .dashboard-header {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    text-align: center;
  }

  .dashboard-title {
    font-size: 1.5rem;
  }

  .dashboard-subtitle {
    font-size: 0.875rem;
  }

  .dashboard-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .header-action-button {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }

  /* Mobile styles for security modal moved to SecurityRecommendations-modal-fix.css */
}
/* 작은 모바일 화면 */
@media (max-width: 425px) {
  .dashboard-container {
    padding: 0.5rem 0.25rem;
  }

  .dashboard-header {
    padding: 1rem;
    border-radius: 0.75rem;
  }

  .dashboard-title {
    font-size: 1.25rem;
  }

  .dashboard-actions {
    width: 100%;
  }

  .header-action-button {
    flex: 1;
    min-width: 0;
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
  }

  /* Small mobile styles for security modal moved to SecurityRecommendations-modal-fix.css */
}
/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
  .header-action-button {
    animation: none;
    transition: none;
  }
  /* Security modal animation handling moved to SecurityRecommendations-modal-fix.css */

  .security-badge {
    animation: none;
  }
}
/* 고대비 모드 */
@media (prefers-contrast: high) {
  .dashboard-header {
    border: 2px solid white;
  }

  .header-action-button {
    border-width: 2px;
  }

  .security-button {
    border-color: #22c55e !important;
  }

  .logout-button {
    border-color: #ef4444 !important;
  }
}
/* 프린트 스타일 */
@media print {
  .dashboard-actions,
  .security-recommendations-modal-overlay {
    display: none;
  }

  .dashboard-header {
    background: none;
    color: black;
    border: 1px solid black;
  }
}
/* NewPass2 Password List Styles */
/* PasswordList 전용 스타일 */
.password-list-loading {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}
.password-list-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}
.password-list-empty h3 {
  color: var(--text-muted);
  margin-bottom: 10px;
}
.password-list-container {
  margin-top: 20px;
}
.password-list-title {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.password-list-title .count-badge {
  background-color: var(--primary-color);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}
.password-item {
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}
.password-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.password-item-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.password-item-main {
  flex: 1;
}
.password-item-title {
  margin: 0 0 15px 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: bold;
}
.password-item-field {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.password-item-label {
  min-width: 60px;
  color: var(--text-secondary);
  font-weight: 500;
}
.password-item-value {
  margin-left: 10px;
  font-family: monospace;
  color: var(--text-primary);
}
.password-item-hidden {
  background-color: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--text-muted);
}
.password-item-link {
  margin-left: 10px;
  color: var(--info-color);
  text-decoration: none;
}
.password-item-link:hover {
  text-decoration: underline;
}
.password-item-date {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 10px;
}
.password-item-actions {
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-toggle-password {
  margin-left: 10px;
  padding: 2px 6px;
  font-size: 12px;
  background-color: var(--text-secondary);
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-toggle-password:hover {
  background-color: #5a6268;
}
.btn-copy {
  padding: 4px 8px;
  font-size: 12px;
  background-color: var(--info-color);
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-copy:hover {
  background-color: #138496;
}
.btn-delete-password {
  padding: 8px 12px;
  background-color: var(--danger-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}
.btn-delete-password:hover {
  background-color: #c82333;
}
/* 패스워드 카테고리 뱃지 */
.password-category {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  background-color: var(--primary-color);
  color: white;
  margin-left: 10px;
}
/* 패스워드 태그들 */
.password-tags {
  margin-top: 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.password-tag {
  padding: 2px 6px;
  font-size: 11px;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 3px;
  border: 1px solid var(--border-color);
}
/* 개선된 패스워드 검색 스타일 */
.password-search-container {
  width: 100%;
  padding: 0;
}
.password-search {
  background: var(--color-surface);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
/* 검색 헤더 */
.password-search-header {
  margin-bottom: 1rem;
}
.search-header-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.search-header-main .search-bar {
  flex: 1;
}
.search-results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-top: 1px solid var(--gray-200);
  margin-top: 0.5rem;
}
.search-results-text {
  flex: 1;
}
.search-results-count {
  font-size: 0.875rem;
  color: var(--gray-700);
  font-weight: 500;
}
/* 검색 활성 상태 */
.search-results-count.search-active {
  color: var(--primary-color);
  font-weight: 600;
}
/* 필터 활성 상태 */
.search-results-count.filter-active {
  color: var(--warning-color, #f59e0b);
  font-weight: 600;
}
.search-results-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* 검색 컨트롤 */
.password-search-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--gray-50);
  border-radius: 0.375rem;
  border: 1px solid var(--gray-200);
}
.controls-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.controls-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* 검색 결과 */
.password-search-results {
  position: relative;
}
.password-search-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  color: var(--gray-500);
  font-size: 0.875rem;
}
.password-search-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gray-500);
}
.password-search-empty h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--gray-700);
}
.password-search-empty p {
  font-size: 0.875rem;
  color: var(--gray-500);
}
/* 반응형 */
@media (max-width: 768px) {
  .password-search {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.375rem;
    box-shadow: none;
    border: 1px solid var(--gray-200);
  }
  
  .password-search-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .controls-left,
  .controls-right {
    justify-content: center;
  }
  
  /* 모바일에서 검색창과 버튼을 세로로 배열 */
  .password-search .search-header-main {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }
  
  /* 검색창이 전체 너비를 차지 */
  .password-search .search-header-main .search-bar {
    width: 100%;
    flex: none;
  }
  
  /* 버튼 영역도 전체 너비 */
  .password-search .search-header-actions {
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    gap: 0.75rem !important;
  }
  
  /* 새 패스워드 버튼 크기 조정 */
  .password-search .add-password-button {
    flex: 1;
    max-width: 200px;
  }
  
  /* 검색 결과 정보 모바일 최적화 */
  .search-results-info {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
  
  .search-results-text {
    width: 100%;
  }
  
  .search-results-actions {
    width: 100%;
    justify-content: center;
  }
}
/* 작은 모바일 화면 */
@media (max-width: 425px) {
  .search-results-info {
    gap: 0.75rem;
  }
  
  .search-results-count {
    font-size: 0.8rem;
    text-align: center;
  }
}
/* 최적화된 패스워드 아이템 CSS - 중복 제거 및 구조 개선 */
/* =========================== */
/* CSS 변수 정의 (컴포넌트 스코프) */
/* =========================== */
.password-item {
  /* 크기 변수 */
  --item-padding: 1rem;
  --item-gap: 1rem;
  --item-min-height: 160px;
  --item-border-radius: 0.5rem;
  
  /* 텍스트 크기 */
  --title-size: 1rem;
  --label-size: 0.7rem;
  --value-size: 0.8rem;
  --link-size: 0.75rem;
  --date-size: 0.7rem;
  
  /* 버튼 크기 */
  --btn-height: 24px;
  --btn-padding: 4px 8px;
  --btn-gap: 0.375rem;
  --action-btn-height: 28px;
  --action-btn-padding: 6px 8px;
  
  /* 색상 변수 */
  --item-bg: var(--color-surface);
  --item-border: var(--gray-200);
  --item-hover-border: var(--gray-300);
  --value-bg: var(--gray-50);
  --link-color: var(--primary-600);
}
/* 다크모드 변수 오버라이드 */
@media (prefers-color-scheme: dark) {
  .password-item {
    --item-bg: var(--gray-800);
    --item-border: var(--gray-700);
    --item-hover-border: var(--gray-600);
    --value-bg: var(--gray-700);
  }
}
/* =========================== */
/* 패스워드 그리드 레이아웃 */
/* =========================== */
.password-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
/* =========================== */
/* 패스워드 카드 베이스 */
/* =========================== */
.password-item {
  background: var(--item-bg);
  border: 1px solid var(--item-border);
  border-radius: var(--item-border-radius);
  padding: var(--item-padding);
  min-height: var(--item-min-height);
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease-in-out;
}
.password-item:hover {
  border-color: var(--item-hover-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.password-item:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
/* =========================== */
/* 콘텐츠 구조 */
/* =========================== */
.password-item-content {
  display: flex;
  flex-direction: column;
  gap: var(--item-gap);
  flex: 1;
}
.password-item-main {
  flex: 1;
}
/* =========================== */
/* 타이포그래피 */
/* =========================== */
.password-item-title {
  font-size: var(--title-size);
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.password-item-label {
  font-size: var(--label-size);
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.password-item-value {
  font-size: var(--value-size);
  color: var(--gray-700);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  flex: 1;
  line-height: 1.3;
  text-align: left;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.password-item-hidden {
  font-family: inherit;
  letter-spacing: 0.1em;
}
.password-item-date {
  font-size: var(--date-size);
  color: var(--gray-500);
  text-align: center;
  padding: 6px;
  background: var(--value-bg);
  border-radius: 4px;
  margin-top: 0.5rem;
}
/* =========================== */
/* 필드 레이아웃 */
/* =========================== */
.password-item-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  gap: 0.25rem;
}
.password-item-value-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  background: var(--value-bg);
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--item-border);
  min-height: 38px;
}
/* =========================== */
/* 컨트롤 영역 */
/* =========================== */
.password-controls {
  display: flex;
  align-items: center;
  gap: var(--btn-gap);
  flex-shrink: 0;
}
/* =========================== */
/* 버튼 스타일 (통합) */
/* =========================== */
/* 컨트롤 버튼 공통 스타일 */
.password-item .password-controls .btn {
  font-size: 0.75rem;
  min-height: var(--btn-height);
  border-radius: 4px;
  padding: var(--btn-padding);
  min-width: auto;
}
/* 액션 버튼 공통 스타일 */
.password-item-actions .btn {
  font-size: 0.75rem;
  padding: var(--action-btn-padding);
  min-height: var(--action-btn-height);
  border-radius: 4px;
  flex: 1;
  max-width: 80px;
}
/* 복사 성공 상태 */
.copy-success {
  background: var(--success-light);
  border-color: var(--success-primary);
  color: var(--success-primary);
}
/* =========================== */
/* 액션 영역 */
/* =========================== */
.password-item-actions {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--item-border);
  padding-top: 0.75rem;
  margin-top: auto;
}
/* =========================== */
/* 링크 스타일 */
/* =========================== */
.password-item-link {
  color: var(--link-color);
  text-decoration: none;
  font-size: var(--link-size);
  display: inline-block;
  background: var(--value-bg);
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--item-border);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.password-item-link:hover {
  color: white;
  background: var(--link-color);
  border-color: var(--link-color);
}
/* =========================== */
/* 반응형 디자인 */
/* =========================== */
@media (max-width: 1024px) {
  .password-list-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
@media (max-width: 768px) {
  .password-list-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0;
    margin: 0.75rem 0;
  }
  
  .password-item {
    --item-padding: 1rem;
    width: 100%;
    max-width: none;
  }
  
  .password-item-value-container {
    padding: 10px 12px;
    flex-direction: row;
    gap: 0.5rem;
  }
  
  .password-item-value {
    max-width: none;
    flex: 1;
    min-width: 0;
  }
  
  .password-controls {
    --btn-gap: 0.25rem;
    flex-shrink: 0;
  }
  
  .password-item .password-controls .btn {
    font-size: 0.7rem;
    padding: 3px 6px;
  }
}
@media (max-width: 480px) {
  .password-list-grid {
    gap: 0.5rem;
    margin: 0.5rem 0;
  }
  
  .password-item {
    --item-padding: 0.875rem;
  }
}
/* =========================== */
/* 다크 모드 추가 스타일 */
/* =========================== */
@media (prefers-color-scheme: dark) {
  .password-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .password-item-title {
    color: var(--gray-100);
  }
  
  .password-item-value {
    color: var(--gray-200);
  }
  
  .password-item-value-container {
    border-color: var(--gray-600);
  }
  
  .password-item-date {
    color: var(--gray-300);
  }
  
  .password-item-link {
    border-color: var(--gray-600);
  }
  
  .password-item-link:hover {
    background: var(--primary-600);
    border-color: var(--primary-600);
  }
  
  /* 다크모드 버튼 스타일은 기본 Button.css에서 처리 */
}
/* =========================== */
/* 접근성 및 애니메이션 */
/* =========================== */
/* 포커스 스타일 */
.password-item .btn:focus,
.password-item-link:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}
/* 애니메이션 감소 모드 */
@media (prefers-reduced-motion: reduce) {
  .password-item,
  .password-item-link,
  .password-item .btn {
    transition: none;
  }
  
  .password-item:hover {
    transform: none;
  }
}
/* =========================== */
/* 유틸리티 클래스 */
/* =========================== */
/* 로딩 상태 */
.password-item.loading {
  opacity: 0.6;
  pointer-events: none;
}
/* 선택된 상태 */
.password-item.selected {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}
/* 에러 상태 */
.password-item.error {
  border-color: var(--danger-500);
  background: var(--danger-50);
}
/* 모바일 패스워드 카드 레이아웃 수정 */
/* 사용자명/패스워드 박스 크기 문제 해결 */
@media (max-width: 768px) {
  /* 패스워드 값 컨테이너 최적화 */
  .password-item-value-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    gap: 0.5rem;
  }
  
  /* 패스워드 값 텍스트 - 최대한 공간 활용 */
  .password-item-value {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    font-size: 0.85rem;
  }
  
  /* 컨트롤 버튼들 - 고정 너비 */
  .password-controls {
    flex: 0 0 auto;
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
  }
  
  /* 복사 버튼 스타일 */
  .password-controls .copy-button-text {
    min-width: 44px;
    font-size: 0.7rem;
    padding: 4px 8px;
  }
  
  /* 토글 버튼 - 정사각형 유지 */
  .password-controls .password-toggle-button {
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
  }
  
  /* 액션 버튼들 정렬 */
  .password-item-actions {
    gap: 0.75rem;
    padding-top: 0.75rem;
  }
  
  .password-item-actions .btn {
    flex: 1;
    max-width: none;
    min-width: 60px;
  }
}
/* 더 작은 화면 (480px 이하) */
@media (max-width: 480px) {
  /* 카드 전체 패딩 줄이기 */
  .password-item {
    padding: 0.875rem;
  }
  
  /* 값 컨테이너 패딩 축소 */
  .password-item-value-container {
    padding: 8px;
    gap: 0.375rem;
  }
  
  /* 폰트 크기 조정 */
  .password-item-title {
    font-size: 0.95rem;
  }
  
  .password-item-value {
    font-size: 0.8rem;
  }
  
  /* 복사 버튼 텍스트 숨기고 아이콘만 표시 */
  .password-controls .copy-button-text {
    width: 32px;
    min-width: 32px;
    padding: 0;
    font-size: 0;
  }
  
  .password-controls .copy-button-text::before {
    content: "📋";
    font-size: 14px;
  }
  
  .copy-button-text.copy-success::before {
    content: "✓";
  }
}
/* 아주 작은 화면 (360px 이하) */
@media (max-width: 360px) {
  .password-item {
    padding: 0.75rem;
  }
  
  .password-item-value-container {
    padding: 8px;
  }
  
  /* 레이블 크기 축소 */
  .password-item-label {
    font-size: 0.65rem;
  }
  
  /* 액션 버튼 크기 축소 */
  .password-item-actions .btn {
    font-size: 0.7rem;
    padding: 5px 8px;
    min-height: 26px;
  }
}
/* 패스워드 카드 박스 여백 긴급 수정 */
/* !important 사용하여 강제 적용 */
/* 모든 화면에서 기본 적용 */
.password-item-value-container {
  padding: 8px 10px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
}
/* 패스워드 값 - 가능한 모든 공간 사용 */
.password-item-value {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-right: 0 !important;
}
/* 컨트롤 영역 - 최소 공간만 사용 */
.password-controls {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 0 !important;
}
/* 버튼들 크기 조정 */
.password-controls .btn {
  padding: 4px 8px !important;
  min-height: 28px !important;
  height: 28px !important;
}
.password-controls .password-toggle-button {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}
.password-controls .copy-button-text {
  min-width: 42px !important;
  font-size: 0.7rem !important;
}
/* 모바일 화면 */
@media (max-width: 768px) {
  .password-item-value-container {
    padding: 6px 8px !important;
    gap: 6px !important;
    min-height: 36px !important;
  }
  
  .password-controls {
    gap: 4px !important;
  }
  
  .password-controls .btn {
    padding: 3px 6px !important;
    min-height: 26px !important;
    height: 26px !important;
    font-size: 0.65rem !important;
  }
  
  .password-controls .password-toggle-button {
    width: 26px !important;
    min-width: 26px !important;
  }
  
  .password-controls .copy-button-text {
    min-width: 40px !important;
  }
}
/* 더 작은 화면 */
@media (max-width: 480px) {
  .password-item-value-container {
    padding: 5px 6px !important;
    gap: 4px !important;
  }
  
  .password-controls .btn {
    padding: 2px 5px !important;
    min-height: 24px !important;
    height: 24px !important;
  }
  
  .password-controls .password-toggle-button {
    width: 24px !important;
    min-width: 24px !important;
  }
  
  .password-controls .copy-button-text {
    min-width: 38px !important;
    font-size: 0.6rem !important;
  }
}
/* NewPass2 Share Button Styles */
/* 공유 버튼 스타일 */
.btn-share-password {
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-share-password:hover {
  background-color: #0056b3;
}
.btn-share-password:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-share-password.loading {
  position: relative;
}
.btn-share-password.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  right: 8px;
}
/* 공유 상태 표시 버튼 */
.btn-share-status {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 3px;
  border: none;
  cursor: default;
  font-weight: 500;
}
.btn-share-status.active {
  background-color: #d4edda;
  color: #155724;
}
.btn-share-status.expired {
  background-color: #f8d7da;
  color: #721c24;
}
.btn-share-status.pending {
  background-color: #fff3cd;
  color: #856404;
}
/* 공유 관리 버튼 */
.btn-share-manage {
  padding: 8px 16px;
  background-color: #6f42c1;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-share-manage:hover {
  background-color: #5a2d91;
}
/* 공유 링크 복사 버튼 */
.btn-copy-share-link {
  padding: 6px 12px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}
.btn-copy-share-link:hover {
  background-color: #218838;
}
.btn-copy-share-link.copied {
  background-color: #17a2b8;
}
.btn-copy-share-link.copied::after {
  content: ' ✓';
}
/* 공유 액션 그룹 */
.share-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.share-actions-inline {
  display: inline-flex;
  gap: 5px;
  margin-left: 10px;
}
/* NewPass2 Share Modal Styles - 개선된 버전 */
/* 공유 모달 오버레이 */
.share-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999 !important;
  animation: fadeIn 0.2s ease-in-out;
  padding: 20px;
  box-sizing: border-box;
}
/* 공유 모달 컨테이너 */
.share-modal-content {
  background: var(--bg-primary);
  border-radius: 12px;
  width: 100%;
  max-width: 550px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  animation: slideUp 0.3s ease-out;
  overflow: hidden;
}
/* 공유 모달 헤더 */
.share-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  flex-shrink: 0;
}
.share-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.share-modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.share-modal-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
/* 공유 모달 바디 - 스크롤 가능 */
.share-modal-body {
  padding: 24px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* 공유 모달 푸터 */
.share-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
/* 스크롤바 커스텀 */
.share-modal-body::-webkit-scrollbar {
  width: 6px;
}
.share-modal-body::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
.share-modal-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
.share-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}
/* 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(30px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 반응형 디자인 */
@media (max-width: 768px) {
  .share-modal-overlay {
    padding: 10px;
  }
  
  .share-modal-content {
    max-width: 100%;
    max-height: 95vh;
  }
  
  .share-modal-header {
    padding: 16px 20px;
  }
  
  .share-modal-header h3 {
    font-size: 14px;
  }
  
  .share-modal-body {
    padding: 20px;
  }
  
  .share-modal-footer {
    padding: 12px 20px;
    flex-direction: column;
  }
}
/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
  .share-modal-overlay {
    background-color: rgba(0, 0, 0, 0.9);
  }
  
  .share-modal-content {
    border: 2px solid var(--text-primary);
  }
}
/* ShareCard 컴포넌트 스타일 */
.share-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s ease;
}
.share-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}
.share-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.share-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.share-card__status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.share-card--active .share-card__status {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.share-card--warning .share-card__status {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}
.share-card--completed .share-card__status {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.share-card__info {
  margin-bottom: 12px;
}
.share-card__key {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.share-card__key:hover {
  background-color: var(--bg-tertiary);
}
.share-card__key-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}
.share-card__key-value {
  font-family: monospace;
  font-size: 11px;
  background-color: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--text-primary);
}
.share-card__copy-icon {
  font-size: 12px;
  opacity: 0.6;
}
.share-card__usage {
  margin-bottom: 12px;
}
.share-card__usage-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.share-card__usage-text {
  font-weight: 600;
  color: var(--text-primary);
}
.share-card__progress {
  height: 4px;
  background-color: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}
.share-card__progress-bar {
  height: 100%;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}
.share-card--warning .share-card__progress-bar {
  background-color: #ffc107;
}
.share-card--completed .share-card__progress-bar {
  background-color: #dc3545;
}
.share-card__timing {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.share-card__timing-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.share-card__timing-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}
.share-card__timing-value {
  font-size: 12px;
  color: var(--text-primary);
}
.share-card__timing-value.expired {
  color: #dc3545;
  font-weight: 600;
}
.share-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.share-card__revoke-btn,
.share-card__copy-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.share-card__revoke-btn {
  background-color: #dc3545;
  color: white;
}
.share-card__revoke-btn:hover:not(:disabled) {
  background-color: #c82333;
}
.share-card__revoke-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.share-card__copy-btn {
  background-color: var(--primary-color);
  color: white;
}
.share-card__copy-btn:hover {
  background-color: #5a6fd8;
}
.share-card__completed-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
/* 반응형 디자인 */
@media (max-width: 768px) {
  .share-card__timing {
    grid-template-columns: 1fr;
  }
  
  .share-card__actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .share-card__revoke-btn,
  .share-card__copy-btn {
    width: 100%;
    text-align: center;
  }
}
/* 다크 테마 조정 */
.theme-dark .share-card--active .share-card__status {
  background-color: #1e3d29;
  color: #5cb85c;
  border-color: #2d5a3d;
}
.theme-dark .share-card--warning .share-card__status {
  background-color: #3d3517;
  color: #ffc107;
  border-color: #5a4e1a;
}
.theme-dark .share-card--completed .share-card__status {
  background-color: #3d1a1a;
  color: #f8d7da;
  border-color: #5a1a1a;
}
/* Password Share Modal Styles */
/* 모달 오버레이 */
.share-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(2px);
}
/* 모달 컨텐츠 */
.share-modal-content {
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
}
/* 모달 헤더 */
.share-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid var(--border-color);
}
.share-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.share-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.share-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
/* 모달 바디 */
.share-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
/* 모달 푸터 */
.share-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  gap: 12px;
}
/* 공유 설정 */
.password-share-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.password-share-preview {
  background: var(--bg-secondary);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.password-share-preview h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.password-share-preview-item {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.password-share-preview-item:last-child {
  margin-bottom: 0;
}
.password-share-preview-item strong {
  color: var(--text-primary);
  font-weight: 500;
}
/* 공유 옵션 */
.password-share-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.password-share-options h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.password-share-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.password-share-option label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left; /* ✨ 모든 라벨 왼쪽 정렬 */
}
.password-share-option select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
}
.password-share-option input[type="checkbox"] {
  margin: 0;
}
/* ✨ 개선된 CSS 클래스들 */
.share-option-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left; /* ✨ 명시적으로 왼쪽 정렬 */
  margin-bottom: 4px;
}
.share-option-hint {
  font-weight: normal;
  color: var(--text-secondary);
  font-size: 12px;
}
.share-note-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 60px;
  transition: border-color 0.2s ease;
}
.share-note-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}
.char-counter {
  color: var(--text-secondary);
  font-size: 12px;
  text-align: right;
}
/* 공유 링크 결과 */
.password-share-result {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.password-share-success {
  text-align: center;
  padding: 20px;
  background: #f0f9f5;
  border: 1px solid #d1fae5;
  border-radius: 8px;
}
.password-share-success-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.password-share-success h4 {
  margin: 0 0 8px 0;
  color: #065f46;
  font-size: 16px;
}
.password-share-success p {
  margin: 0;
  color: #047857;
  font-size: 14px;
}
/* 공유 링크 입력 */
.password-share-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.password-share-link label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.password-share-link-input {
  display: flex;
  gap: 8px;
  align-items: center;
}
.password-share-link-input input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Courier New', monospace;
}
/* 공유 정보 */
.password-share-info {
  background: var(--bg-secondary);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.password-share-info h5 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.password-share-info-item {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  gap: 8px;
}
.password-share-info-item:last-child {
  margin-bottom: 0;
}
.password-share-info-item strong {
  color: var(--text-primary);
  font-weight: 500;
  min-width: 80px;
}
/* 주의사항 */
.password-share-warning {
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 16px;
  border-radius: 8px;
}
.password-share-warning h5 {
  margin: 0 0 12px 0;
  color: #92400e;
  font-size: 14px;
  font-weight: 600;
}
.password-share-warning ul {
  margin: 0;
  padding-left: 20px;
  color: #78350f;
}
.password-share-warning li {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.4;
}
.password-share-warning li:last-child {
  margin-bottom: 0;
}
/* 에러 메시지 */
.password-share-error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
  .share-modal-content {
    margin: 10px;
    max-width: none;
  }
  
  .share-modal-header,
  .share-modal-body,
  .share-modal-footer {
    padding: 16px;
  }
  
  .password-share-link-input {
    flex-direction: column;
    align-items: stretch;
  }
  
  .share-note-textarea {
    font-size: 16px; /* iOS 줌 방지 */
  }
}
/* 다크 모드 */
.theme-dark .share-modal-content .password-share-success {
  background-color: #1e3d29;
  border-color: #2d5a3d;
}
.theme-dark .share-modal-content .password-share-success h4,
.theme-dark .share-modal-content .password-share-success p {
  color: #5cb85c;
}
.theme-dark .share-modal-content .password-share-warning {
  background-color: #3d3517;
  border-color: #5a4e1a;
}
.theme-dark .share-modal-content .password-share-warning h5,
.theme-dark .share-modal-content .password-share-warning ul,
.theme-dark .share-modal-content .password-share-warning li {
  color: #ffc107;
}
.theme-dark .share-modal-content .password-share-error {
  background-color: #3d1a1a;
  border-color: #5a1a1a;
  color: #f8d7da;
}
/* NewPass2 Search System Main Styles */
/* 메인 검색 컨테이너 */
.password-search {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: var(--bg-secondary);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}
/* 검색 헤더 */
.password-search-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 검색 결과 정보 */
.search-results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}
.search-results-count {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}
.search-results-total {
  color: var(--text-secondary);
  font-weight: normal;
}
/* 검색 컨트롤 */
.password-search-controls {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  flex-wrap: wrap;
}
/* 검색 결과 */
.password-search-results {
  margin-top: 10px;
}
.password-search-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  color: var(--text-secondary);
  font-size: 16px;
}
.password-search-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
.password-search-empty h3 {
  color: var(--text-muted);
  margin-bottom: 10px;
  font-size: 18px;
}
.password-search-empty p {
  margin-bottom: 20px;
  font-size: 14px;
}
/* 검색 통계 */
.search-stats {
  display: flex;
  gap: 20px;
  padding: 15px;
  background: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 15px;
}
.search-stat {
  text-align: center;
  flex: 1;
}
.search-stat-number {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 4px;
}
.search-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* 검색 제안 */
.search-suggestions {
  margin-top: 15px;
}
.search-suggestions-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.search-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-suggestion {
  padding: 4px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.search-suggestion:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
/* 검색 히스토리 */
.search-history {
  margin-top: 10px;
}
.search-history-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.search-history-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.search-history-item {
  padding: 3px 8px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.search-history-item:hover {
  background: var(--border-color);
  color: var(--text-primary);
}
/* NewPass2 SearchBar Component Styles */
/* ===== SearchBar 스타일 ===== */
.search-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-bar-container {
  position: relative;
}
.search-bar-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.2s ease;
}
.search-bar-input-wrapper:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.search-bar-icon {
  margin-right: 10px;
  font-size: 18px;
  color: var(--text-secondary);
}
.search-bar-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
}
.search-bar-input::placeholder {
  color: var(--text-muted);
}
.search-bar-clear {
  margin-left: 10px;
  background: var(--bg-secondary);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.search-bar-clear:hover {
  background: var(--border-color);
  color: var(--text-primary);
}
.search-bar-info {
  padding: 8px 16px;
  background: #e3f2fd;
  border-radius: 6px;
  font-size: 14px;
  color: #1976d2;
}
.search-bar-term {
  font-weight: 600;
}
/* 검색바 상태 */
.search-bar.focused .search-bar-input-wrapper {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.search-bar.has-results .search-bar-info {
  background: #d4edda;
  color: #155724;
}
.search-bar.no-results .search-bar-info {
  background: #f8d7da;
  color: #721c24;
}
/* 검색바 크기 변형 */
.search-bar-compact .search-bar-input-wrapper {
  padding: 8px 12px;
}
.search-bar-compact .search-bar-input {
  font-size: 14px;
}
.search-bar-compact .search-bar-icon {
  font-size: 16px;
  margin-right: 8px;
}
.search-bar-large .search-bar-input-wrapper {
  padding: 16px 20px;
}
.search-bar-large .search-bar-input {
  font-size: 18px;
}
.search-bar-large .search-bar-icon {
  font-size: 20px;
  margin-right: 12px;
}
/* 검색 자동완성 드롭다운 */
.search-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}
.search-autocomplete-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--bg-secondary);
  transition: background-color 0.2s ease;
}
.search-autocomplete-item:hover,
.search-autocomplete-item.selected {
  background: var(--bg-secondary);
}
.search-autocomplete-item:last-child {
  border-bottom: none;
}
.search-autocomplete-highlight {
  background: yellow;
  font-weight: 600;
}
/* 검색 히스토리 토글 */
.search-history-toggle {
  position: absolute;
  right: 45px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.search-history-toggle:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
/* 검색 단축키 힌트 */
.search-shortcut-hint {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-color);
}
/* NewPass2 Filter Panel Styles */
/* ===== FilterPanel 스타일 ===== */
.filter-panel {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  flex: 2;
  min-width: 300px;
}
.filter-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}
.filter-panel-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  transition: color 0.2s ease;
}
.filter-panel-toggle:hover {
  color: var(--primary-color);
}
.filter-panel-icon {
  font-size: 12px;
}
.filter-panel-title {
  font-weight: 600;
}
.filter-panel-badge {
  background: var(--primary-color);
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 4px;
}
.filter-panel-reset {
  background: none;
  border: 1px solid var(--danger-color);
  color: var(--danger-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-panel-reset:hover {
  background: var(--danger-color);
  color: white;
}
.filter-panel-content {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.filter-select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.filter-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.filter-select:hover {
  border-color: var(--border-hover);
}
/* 태그 필터 */
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.filter-tag {
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-tag:hover {
  background: var(--border-color);
  color: var(--text-primary);
}
.filter-tag-active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}
.filter-tag-active:hover {
  background: #5a67d8;
  border-color: #5a67d8;
}
/* 날짜 범위 필터 */
.filter-date-range {
  display: flex;
  gap: 8px;
  align-items: center;
}
.filter-date-input {
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  flex: 1;
}
.filter-date-separator {
  color: var(--text-secondary);
  font-size: 12px;
}
/* 필터 카운터 */
.filter-counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-secondary);
}
.filter-active-count {
  font-weight: 600;
  color: var(--primary-color);
}
/* 필터 미리보기 */
.filter-preview {
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}
.filter-preview-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.filter-preview-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.filter-preview-item {
  padding: 2px 6px;
  background: var(--primary-color);
  color: white;
  border-radius: 3px;
  font-size: 11px;
}
/* 필터 애니메이션 */
.filter-panel-content {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}
.filter-panel-collapsed .filter-panel-content {
  max-height: 0;
  opacity: 0;
  padding: 0 16px;
}
.filter-panel-expanded .filter-panel-content {
  max-height: 500px;
  opacity: 1;
}
/* NewPass2 Sort Options Styles */
/* ===== SortOptions 스타일 ===== */
.sort-options {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  flex: 1;
  min-width: 250px;
}
.sort-options-header {
  margin-bottom: 15px;
}
.sort-options-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.sort-options-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* 정렬 그룹 */
.sort-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sort-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
/* 정렬 버튼들 */
.sort-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sort-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary);
  transition: all 0.2s ease;
}
.sort-button:hover {
  background: var(--border-color);
  border-color: var(--border-hover);
}
.sort-button-active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}
.sort-button-active:hover {
  background: #5a67d8;
  border-color: #5a67d8;
}
.sort-button-icon {
  font-size: 11px;
}
.sort-button-text {
  font-weight: 500;
}
/* 정렬 순서 컨트롤 */
.sort-order-controls {
  display: flex;
  gap: 8px;
}
.sort-order-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: all 0.2s ease;
  flex: 1;
  justify-content: center;
}
.sort-order-button:hover {
  background: var(--border-color);
  border-color: var(--border-hover);
}
.sort-order-button-active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}
.sort-order-button-active:hover {
  background: #5a67d8;
  border-color: #5a67d8;
}
.sort-order-icon {
  font-size: 12px;
}
.sort-order-text {
  font-weight: 500;
}
/* 현재 정렬 상태 */
.sort-status {
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sort-status-icon {
  font-size: 14px;
}
.sort-status-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
/* 컴팩트 모드 */
.sort-options-compact {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sort-select-compact {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.sort-select-compact:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.sort-order-toggle-compact {
  padding: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.2s ease;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sort-order-toggle-compact:hover {
  background: var(--border-color);
  border-color: var(--border-hover);
}
/* 정렬 드롭다운 */
.sort-dropdown {
  position: relative;
}
.sort-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: var(--shadow-md);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}
.sort-dropdown-item {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--bg-secondary);
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sort-dropdown-item:hover {
  background: var(--bg-secondary);
}
.sort-dropdown-item:last-child {
  border-bottom: none;
}
.sort-dropdown-item.selected {
  background: var(--primary-color);
  color: white;
}
/* 정렬 힌트 */
.sort-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}
/* NewPass2 Tag Selector Styles */
/* ===== TagSelector 스타일 ===== */
.tag-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tag-selector-container {
  position: relative;
}
/* 선택된 태그들 */
.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 20px;
}
.selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--primary-color);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  animation: slideUp 0.2s ease-out;
}
.selected-tag-text {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selected-tag-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  font-size: 14px;
  line-height: 1;
  transition: color 0.2s ease;
}
.selected-tag-remove:hover {
  color: white;
}
/* 태그 입력 컨테이너 */
.tag-input-container {
  position: relative;
  flex: 1;
}
.tag-input {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}
.tag-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.tag-input::placeholder {
  color: var(--text-muted);
}
/* 태그 드롭다운 */
.tag-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}
.tag-dropdown-item {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--bg-secondary);
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tag-dropdown-item:hover {
  background: var(--bg-secondary);
}
.tag-dropdown-item:last-child {
  border-bottom: none;
}
.tag-dropdown-new {
  background: var(--bg-tertiary);
  font-weight: 500;
}
.tag-dropdown-new:hover {
  background: var(--primary-color);
  color: white;
}
.tag-dropdown-empty {
  padding: 15px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}
.tag-new-icon {
  color: var(--success-color);
  font-weight: bold;
  font-size: 16px;
}
/* 태그 정보 */
.tag-selector-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}
.tag-count {
  font-weight: 500;
}
.tag-help {
  font-style: italic;
}
/* 태그 카테고리 */
.tag-categories {
  margin-bottom: 8px;
}
.tag-category {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 4px;
}
.tag-category-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.tag-category-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tag-category-item {
  padding: 3px 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tag-category-item:hover {
  background: var(--border-color);
  color: var(--text-primary);
}
.tag-category-item.selected {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}
/* 태그 통계 */
.tag-stats {
  display: flex;
  gap: 15px;
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}
.tag-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tag-stat-number {
  font-weight: 600;
  color: var(--primary-color);
}
/* 태그 제안 */
.tag-suggestions {
  margin-bottom: 8px;
}
.tag-suggestions-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.tag-suggestion {
  display: inline-block;
  padding: 2px 6px;
  margin: 2px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tag-suggestion:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}
/* 태그 입력 상태 */
.tag-input-container.focused .tag-input {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.tag-input-container.error .tag-input {
  border-color: var(--danger-color);
}
.tag-input-container.success .tag-input {
  border-color: var(--success-color);
}
/* 태그 최대 개수 경고 */
.tag-limit-warning {
  color: var(--warning-color);
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
}
.tag-limit-error {
  color: var(--danger-color);
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
}
/* =========================== */
/* UI 개선 스타일 */
/* 새로고침, 필터링, 정렬, 삭제 버튼 개선 */
/* =========================== */
/* 새로고침 버튼 로딩 상태 */
.btn.loading {
  position: relative;
  opacity: 0.7;
}
.btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top: 2px solid var(--text-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
/* 필터링 버튼 활성 상태 */
.btn.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
.btn.active:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}
/* 검색 컨트롤 일관성 개선 */
.password-search-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
.controls-left,
.controls-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 필터링과 정렬 버튼 통일 */
.filter-button,
.sort-button {
  min-width: 110px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}
.filter-button:hover,
.sort-button:hover {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.filter-button.active {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}
.filter-button.active:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}
.sort-button {
  position: relative;
}
.sort-button:active {
  transform: translateY(0) scale(0.98) !important;
}
/* 삭제 버튼 고급화 완성 */
.delete-button-improved {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-danger) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.delete-button-improved::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, transparent 0%, rgba(220, 38, 38, 0.1) 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.delete-button-improved:hover {
  background: var(--danger-color) !important;
  color: white !important;
  border-color: var(--danger-color) !important;
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 
    0 4px 12px rgba(220, 38, 38, 0.4),
    0 2px 4px rgba(220, 38, 38, 0.2) !important;
}
.delete-button-improved:hover::before {
  opacity: 1;
}
.delete-button-improved:active {
  transform: scale(0.95) rotate(-2deg) !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
}
/* 삭제 버튼 펄스 애니메이션 (위험 알림) */
.delete-button-improved:focus-visible {
  animation: dangerPulse 2s infinite;
  outline: 2px solid var(--danger-color) !important;
  outline-offset: 2px !important;
}
@keyframes dangerPulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
  }
  50% { 
    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
  }
}
/* 삭제 확인 상태 */
.delete-button-improved.confirming {
  background: var(--warning-color) !important;
  color: white !important;
  border-color: var(--warning-color) !important;
  animation: shake 0.5s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-2deg); }
  75% { transform: translateX(3px) rotate(2deg); }
}
/* 패스워드 아이템 액션 영역 개선 */
.password-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  flex-shrink: 0;
}
/* 새로고침 버튼 개선 */
.refresh-button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 10px !important;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.refresh-button:hover {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
  transform: rotate(180deg) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}
.refresh-button:active {
  transform: rotate(180deg) scale(0.95) !important;
}
.refresh-button.loading {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
  animation: continuousRotate 1s linear infinite !important;
}
@keyframes continuousRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* 검색 헤더 개선 */
.search-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
/* 버튼 호버 효과 개선 */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}
.btn:hover::before {
  left: 100%;
}
/* 다크모드 개선 */
.theme-dark .delete-button-improved {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.theme-dark .delete-button-improved:hover {
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}
/* 반응형 개선 */
@media (max-width: 768px) {
  .password-search-controls {
    flex-direction: column;
    gap: 12px;
    padding: 12px 15px;
  }
  
  .controls-left,
  .controls-right {
    width: 100%;
    justify-content: center;
  }
  
  .controls-left .btn,
  .controls-right .btn {
    flex: 1;
    min-width: auto;
  }
  
  .delete-button-improved {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}
/* 애니메이션 개선 */
@keyframes buttonPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.btn.pulse {
  animation: buttonPulse 0.6s ease-in-out;
}
/* 성공 피드백 */
.btn.success-feedback {
  background: var(--success-color) !important;
  color: white !important;
  border-color: var(--success-color) !important;
}
/* 에러 피드백 */
.btn.error-feedback {
  background: var(--danger-color) !important;
  color: white !important;
  border-color: var(--danger-color) !important;
  animation: shake 0.5s ease-in-out;
}
/* =========================== */
/* 패스워드 폼 모달 개선 스타일 */
/* ShareHistoryModal과 통일된 디자인 */
/* =========================== */
/* 패스워드 폼 모달 전용 스타일 */
.password-form-modal {
  max-width: 500px !important;
  width: 90% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}
/* 패스워드 폼 기본 스타일 */
.password-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 필드 그룹 */
.password-form__field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 라벨 스타일 */
.password-form__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.password-form__label--required::after {
  content: ' *';
  color: var(--danger-color);
  font-weight: bold;
}
/* 입력 필드 스타일 */
.password-form__input,
.password-form__textarea,
.password-form__select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: all 0.2s ease;
  font-family: inherit;
}
.password-form__input:focus,
.password-form__textarea:focus,
.password-form__select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
  background: var(--bg-primary);
}
.password-form__input:disabled,
.password-form__textarea:disabled,
.password-form__select:disabled {
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
/* 에러 상태 */
.password-form__input--error {
  border-color: var(--danger-color) !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1) !important;
}
/* 에러 메시지 */
.password-form__error {
  font-size: 12px;
  color: var(--danger-color);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.password-form__error::before {
  content: '⚠️';
  font-size: 10px;
}
/* 텍스트 영역 */
.password-form__textarea {
  resize: vertical;
  min-height: 80px;
  max-height: 120px;
}
/* 셀렉트 박스 */
.password-form__select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
  appearance: none;
}
/* 로딩 버튼 스타일 */
.btn-loading {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
  opacity: 0.8;
  cursor: not-allowed;
  position: relative;
}
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
/* 다크모드 지원 */
.theme-dark .password-form__input,
.theme-dark .password-form__textarea,
.theme-dark .password-form__select {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.theme-dark .password-form__input:focus,
.theme-dark .password-form__textarea:focus,
.theme-dark .password-form__select:focus {
  background: var(--bg-primary);
  border-color: var(--primary-color);
}
.theme-dark .password-form__input:disabled,
.theme-dark .password-form__textarea:disabled,
.theme-dark .password-form__select:disabled {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
/* 모바일 반응형 */
@media (max-width: 768px) {
  .password-form-modal {
    width: 95% !important;
    margin: 10px !important;
    max-height: 95vh !important;
  }
  
  .password-form__input,
  .password-form__textarea,
  .password-form__select {
    font-size: 16px; /* iOS 줌 방지 */
    padding: 14px 16px;
  }
  
  .share-modal-footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .share-modal-footer > div:last-child {
    order: -1;
  }
  
  .share-modal-footer .btn {
    width: 100%;
    padding: 12px;
  }
}
/* 접근성 개선 */
.password-form__input:focus-visible,
.password-form__textarea:focus-visible,
.password-form__select:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
/* 애니메이션 */
.password-form-modal {
  animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* 스크롤바 스타일 (Webkit) */
.password-form-modal::-webkit-scrollbar {
  width: 6px;
}
.password-form-modal::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}
.password-form-modal::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
.password-form-modal::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}
/* 플레이스홀더 스타일 */
.password-form__input::placeholder,
.password-form__textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}
.theme-dark .password-form__input::placeholder,
.theme-dark .password-form__textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.8;
}
/* =========================== */
/* 모바일 반응형 개선 CSS - TASK13 */
/* 주석 처리된 스타일 활성화 및 최적화 완료 */
/* =========================== */
/* =========================== */
/* 태블릿 레이아웃 (768px ~ 1024px) */
/* =========================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .password-list-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .password-search-controls {
    flex-direction: row;
    padding: 16px 24px;
    gap: 12px;
  }
  
  .controls-left,
  .controls-right {
    width: auto;
    flex: 1;
  }
  
  .filter-button,
  .sort-button {
    min-width: 120px;
  }
}
/* =========================== */
/* 모바일 레이아웃 (max-width: 768px) */
/* =========================== */
@media (max-width: 768px) {
  
  /* 검색 헤더 모바일 최적화 */
  .search-header-main {
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }
  
  .search-header-main > *:first-child {
    flex: 1;
  }
  
  /* 새로고침 버튼 */
  .refresh-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
  }
  
  /* 새 패스워드 버튼 모바일 최적화 */
  .add-password-button {
    min-width: auto;
    padding: 0 12px;
  }
  
  .add-password-button .btn-text {
    display: none;
  }
  
  .add-password-button {
    min-width: 44px;
    justify-content: center;
  }
  
  /* 검색 컨트롤 영역 */
  .password-search-controls {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
  }
  
  .controls-left,
  .controls-right {
    width: 100%;
    justify-content: center;
  }
  
  /* 필터/정렬 버튼 */
  .filter-button,
  .sort-button {
    flex: 1;
    min-width: auto;
    height: 44px;
    font-size: 15px;
    padding: 0 16px;
  }
  
  /* 검색 결과 정보 */
  .search-results-info {
    text-align: center;
    font-size: 14px;
    margin-bottom: 16px;
  }
  
  /* 패스워드 그리드 모바일 */
  .password-list-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  /* 패스워드 카드 모바일 최적화 */
  .password-item {
    border-radius: 12px;
    padding: 16px;
    transition: transform 0.2s ease;
  }
  
  .password-item:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
  
  .password-item-content {
    gap: 16px;
  }
  
  .password-item-title {
    font-size: 18px;
    margin-bottom: 12px;
    line-height: 1.3;
  }
  
  /* 핵심 수정: 패스워드 필드 모바일 레이아웃 */
  .password-item-field {
    margin-bottom: 14px;
    gap: 8px;
  }
  
  .password-item-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
  }
  
  /* 핵심 수정: 값 컨테이너 모바일 강화 */
  .password-item-value-container {
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    gap: 8px;
    width: 100%;
    justify-content: space-between;
  }
  
  /* 핵심 수정: 텍스트 값 모바일 최적화 */
  .password-item-value {
    font-size: 14px;
    max-width: none;
    flex: 1;
    min-width: 0;
    text-align: left;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  }
  
  /* 컨트롤 버튼 모바일 최적화 - 크기 통일 */
  .password-item .password-controls {
    gap: 6px;
    flex-shrink: 0;
  }
  
  .password-item .password-controls .btn {
    min-width: auto;
    min-height: 36px;
    padding: 8px;
    font-size: 0.8rem;
    border-radius: 6px;
  }
  
  /* 액션 버튼 모바일 */
  .password-item-actions {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    gap: 12px;
    justify-content: center;
  }
  
  .password-item-actions .btn {
    flex: 1;
    height: 44px;
    min-height: 44px;
    font-weight: 500;
    justify-content: center;
    max-width: 120px;
  }
  
  /* 편집 버튼 */
  .edit-button-mobile {
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
  
  .edit-button-mobile:hover {
    background-color: var(--color-primary);
    color: white;
  }
  
  /* 공유 버튼 */
  .share-button-mobile {
    min-width: 44px;
    flex: 1;
  }
  
  /* 삭제 버튼 */
  .delete-button-mobile {
    width: 44px;
    min-width: 44px;
    flex: none;
  }
  
  /* 웹사이트 링크 모바일 */
  .password-item-link {
    display: block;
    background: var(--bg-secondary);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--primary-color);
    font-size: 14px;
    word-break: break-all;
    max-width: none;
    overflow: visible;
    white-space: normal;
  }
  
  .password-item-link:hover {
    background: var(--primary-color);
    color: white;
  }
  
  /* 날짜 표시 모바일 */
  .password-item-date {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 6px;
  }
  
  /* 대시보드 헤더 모바일 */
  .dashboard-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 16px;
  }
  
  .dashboard-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .dashboard-actions .btn {
    flex: 1;
    min-width: 120px;
    height: 44px;
  }
  
  /* 모달 모바일 최적화 */
  .modal-content,
  .share-modal-content,
  .password-form-modal-content {
    width: 95%;
    margin: 10px;
    max-height: 95vh;
    border-radius: 16px;
  }
  
  .modal-header,
  .share-modal-header,
  .password-form-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
  }
  
  .modal-body,
  .share-modal-body,
  .password-form-modal-body {
    padding: 20px;
    max-height: calc(95vh - 140px);
    overflow-y: auto;
  }
  
  .modal-footer,
  .share-modal-footer,
  .password-form-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    flex-direction: column;
    gap: 12px;
  }
  
  .modal-footer .btn,
  .share-modal-footer .btn,
  .password-form-modal-footer .btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
  }
}
/* =========================== */
/* 작은 모바일 화면 (max-width: 425px) */
/* =========================== */
@media (max-width: 425px) {
  
  .dashboard-header {
    padding: 12px;
  }
  
  .dashboard-title {
    font-size: 20px;
  }
  
  .dashboard-subtitle {
    font-size: 13px;
  }
  
  .password-search-controls {
    padding: 10px 12px;
    gap: 10px;
  }
  
  .filter-button,
  .sort-button {
    font-size: 14px;
    padding: 0 12px;
  }
  
  .password-item {
    padding: 12px;
  }
  
  .password-item-content {
    gap: 12px;
  }
  
  .password-item-title {
    font-size: 16px;
  }
  
  /* 작은 화면에서 버튼 텍스트 숨기기 */
  .share-button-mobile .btn-text,
  .edit-button-mobile .btn-text {
    display: none;
  }
  
  .share-button-mobile,
  .edit-button-mobile {
    min-width: 44px;
    width: 44px;
    flex: none;
  }
  
  .password-item-actions {
    justify-content: space-around;
    gap: 16px;
  }
}
/* =========================== */
/* 터치 디바이스 최적화 */
/* =========================== */
@media (hover: none) and (pointer: coarse) {
  
  /* 터치 영역 최소 크기 보장 */
  .btn,
  .password-item-field button,
  .search-bar-clear,
  .modal-close {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* 호버 효과 제거 */
  .btn:hover,
  .password-item:hover,
  .refresh-button:hover {
    transform: none;
  }
  
  /* 터치 피드백 */
  .btn:active,
  .password-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  /* 스크롤 영역 개선 */
  .modal-body,
  .password-search-results {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}
/* =========================== */
/* 가로 모드 최적화 */
/* =========================== */
@media (max-height: 500px) and (orientation: landscape) {
  
  .modal-content,
  .share-modal-content,
  .password-form-modal-content {
    max-height: 95vh;
  }
  
  .modal-body,
  .share-modal-body,
  .password-form-modal-body {
    max-height: calc(95vh - 120px);
  }
  
  .dashboard-header {
    padding: 8px 16px;
  }
  
  .dashboard-title {
    font-size: 18px;
  }
  
  .password-search-controls {
    padding: 8px 16px;
  }
}
/* =========================== */
/* PWA 상태바 영역 고려 */
/* =========================== */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    .dashboard-container {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    .modal-overlay,
    .share-modal-overlay,
    .password-form-modal-overlay {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
/* =========================== */
/* 다크 모드 모바일 최적화 */
/* =========================== */
@media (prefers-color-scheme: dark) {
  @media (max-width: 768px) {
    .password-item-value-container {
      background: var(--gray-700);
      border-color: var(--gray-600);
    }
    
    .password-item-link {
      background: var(--gray-700);
      border-color: var(--gray-600);
      color: var(--primary-color);
    }
    
    .password-item-date {
      background: var(--gray-700);
      color: var(--gray-300);
    }
  }
}
/* TASK13: 활성화 완료 */
/* Security Features (Task 8) */
/* 패스워드 강도 분석기 스타일 */
.password-strength-analyzer {
  margin: 12px 0;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: all 0.2s ease;
}
/* 강도 표시 바 컨테이너 */
.strength-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
/* 강도 표시 바 */
.strength-bar {
  flex: 1;
  height: 8px;
  background: var(--color-background-muted);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.strength-progress {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 4px;
  position: relative;
}
.strength-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 100%);
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* 강도 레이블 */
.strength-label {
  font-size: 14px;
  font-weight: 600;
  min-width: 80px;
  text-align: right;
  transition: color 0.3s ease;
}
/* 상세 정보 */
.strength-details {
  border-top: 1px solid var(--color-border-light);
  padding-top: 12px;
  margin-top: 12px;
}
/* 크랙 시간 정보 */
.crack-time-info {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.info-label {
  color: var(--color-text-muted);
  font-weight: 500;
}
.info-value {
  color: var(--color-text);
  font-weight: 600;
  font-family: var(--font-mono, 'Courier New', monospace);
}
/* 권장사항 */
.recommendations {
  margin-top: 12px;
}
.recommendations h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 8px 0;
}
.recommendations ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recommendations li {
  padding: 6px 12px;
  margin: 4px 0;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  position: relative;
  padding-left: 28px;
}
.recommendations li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
/* 경고 스타일 */
.recommendation-warning {
  background: rgba(220, 53, 69, 0.1);
  border-left: 3px solid #dc3545;
  color: #721c24;
}
.recommendation-warning::before {
  background: #dc3545;
}
/* 제안 스타일 */
.recommendation-suggestion {
  background: rgba(13, 110, 253, 0.1);
  border-left: 3px solid #0d6efd;
  color: #084298;
}
.recommendation-suggestion::before {
  background: #0d6efd;
}
/* 다크 모드 */
[data-theme="dark"] .password-strength-analyzer {
  background: var(--color-surface-dark);
  border-color: var(--color-border-dark);
}
[data-theme="dark"] .strength-bar {
  background: var(--color-background-muted-dark);
}
[data-theme="dark"] .strength-details {
  border-top-color: var(--color-border-light-dark);
}
[data-theme="dark"] .info-label {
  color: var(--color-text-muted-dark);
}
[data-theme="dark"] .info-value {
  color: var(--color-text-dark);
}
[data-theme="dark"] .recommendations h4 {
  color: var(--color-text-dark);
}
[data-theme="dark"] .recommendation-warning {
  background: rgba(220, 53, 69, 0.2);
  color: #f5c2c7;
}
[data-theme="dark"] .recommendation-suggestion {
  background: rgba(13, 110, 253, 0.2);
  color: #9ec5fe;
}
/* 모바일 반응형 */
@media (max-width: 768px) {
  .password-strength-analyzer {
    padding: 12px;
    margin: 8px 0;
  }
  
  .strength-bar-container {
    gap: 8px;
  }
  
  .strength-label {
    min-width: 70px;
    font-size: 13px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  
  .recommendations li {
    padding: 8px 12px;
    padding-left: 24px;
  }
}
/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
  .strength-progress,
  .strength-label {
    transition: none;
  }
  
  .strength-progress::after {
    animation: none;
  }
}
/* 고대비 모드 */
@media (prefers-contrast: high) {
  .password-strength-analyzer {
    border-width: 2px;
  }
  
  .strength-bar {
    border: 1px solid currentColor;
  }
  
  .recommendations li {
    border: 1px solid currentColor;
  }
}
/* 패스워드 생성기 스타일 */
.password-generator {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
  background: var(--color-surface);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* 헤더 */
.generator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-light);
}
.generator-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
}
.close-button {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--color-background-muted);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.close-button:hover {
  background: var(--color-background-hover);
}
/* 생성된 패스워드 섹션 */
.generated-password-section {
  margin-bottom: 32px;
}
.current-password {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.password-display {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 16px;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s ease;
}
.password-display:focus {
  border-color: var(--color-primary);
}
.password-actions {
  display: flex;
  gap: 8px;
}
.copy-btn,
.regenerate-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.copy-btn:hover,
.regenerate-btn:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.copy-btn:disabled,
.regenerate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* 패스워드 강도 표시 */
.password-strength-display {
  position: relative;
  height: 6px;
  background: var(--color-background-muted);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.strength-bar {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 3px;
}
.strength-text {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}
/* 생성 옵션 */
.generation-options {
  margin-bottom: 32px;
}
.option-group {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--color-background-light);
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
}
.option-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
/* 길이 슬라이더 */
.length-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-background-muted);
  outline: none;
  -webkit-appearance: none;
  margin-top: 8px;
}
.length-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.length-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* 체크박스 옵션 */
.checkbox-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.2s ease;
}
.checkbox-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.checkbox-option:hover {
  color: var(--color-primary);
}
/* 제외 문자 입력 */
.exclude-chars-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-background);
  font-size: 14px;
  color: var(--color-text);
  margin-top: 8px;
  outline: none;
  transition: border-color 0.2s ease;
}
.exclude-chars-input:focus {
  border-color: var(--color-primary);
}
/* 패스워드 히스토리 */
.password-history {
  margin-bottom: 32px;
}
.password-history h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-background-light);
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  transition: all 0.2s ease;
}
.history-item:hover {
  background: var(--color-background-hover);
  border-color: var(--color-border);
}
.history-password {
  flex: 1;
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-password:hover {
  background: var(--color-background-muted);
}
.history-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}
.history-strength {
  font-size: 12px;
  font-weight: 600;
}
.history-time {
  font-size: 11px;
  color: var(--color-text-muted);
}
.history-copy-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.history-copy-btn:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
/* 액션 버튼 */
.generator-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.generate-btn,
.use-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
}
.generate-btn.primary {
  background: var(--color-primary);
  color: white;
}
.generate-btn.primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}
.use-btn.secondary {
  background: var(--color-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.use-btn.secondary:hover {
  background: var(--color-secondary-dark);
  border-color: var(--color-primary);
}
.use-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
/* 다크 모드 */
[data-theme="dark"] .password-generator {
  background: var(--color-surface-dark);
  border-color: var(--color-border-dark);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .generator-header {
  border-bottom-color: var(--color-border-light-dark);
}
[data-theme="dark"] .generator-header h3 {
  color: var(--color-text-dark);
}
[data-theme="dark"] .close-button {
  background: var(--color-background-muted-dark);
}
[data-theme="dark"] .close-button:hover {
  background: var(--color-background-hover-dark);
}
[data-theme="dark"] .password-display {
  background: var(--color-background-dark);
  border-color: var(--color-border-dark);
  color: var(--color-text-dark);
}
[data-theme="dark"] .option-group {
  background: var(--color-background-light-dark);
  border-color: var(--color-border-light-dark);
}
[data-theme="dark"] .option-label,
[data-theme="dark"] .checkbox-option {
  color: var(--color-text-dark);
}
[data-theme="dark"] .exclude-chars-input {
  background: var(--color-background-dark);
  border-color: var(--color-border-dark);
  color: var(--color-text-dark);
}
[data-theme="dark"] .history-item {
  background: var(--color-background-light-dark);
  border-color: var(--color-border-light-dark);
}
[data-theme="dark"] .history-item:hover {
  background: var(--color-background-hover-dark);
  border-color: var(--color-border-dark);
}
[data-theme="dark"] .history-password {
  color: var(--color-text-dark);
}
[data-theme="dark"] .history-time {
  color: var(--color-text-muted-dark);
}
/* 모바일 반응형 */
@media (max-width: 768px) {
  .password-generator {
    padding: 16px;
    margin: 0 12px;
  }
  
  .current-password {
    flex-direction: column;
    gap: 12px;
  }
  
  .password-actions {
    justify-content: center;
  }
  
  .checkbox-options {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .generator-actions {
    flex-direction: column;
  }
  
  .generate-btn,
  .use-btn {
    width: 100%;
  }
  
  .history-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .history-password {
    text-align: center;
    padding: 8px;
  }
  
  .history-info {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-width: auto;
  }
}
/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
  .copy-btn,
  .regenerate-btn,
  .history-copy-btn,
  .generate-btn,
  .use-btn,
  .history-item,
  .checkbox-option {
    transition: none;
  }
  
  .strength-bar {
    transition: none;
  }
}
/* 고대비 모드 */
@media (prefers-contrast: high) {
  .password-generator {
    border-width: 2px;
  }
  
  .password-display,
  .exclude-chars-input {
    border-width: 2px;
  }
  
  .option-group,
  .history-item {
    border-width: 2px;
  }
}
/* 보안 권장사항 시스템 스타일 - 모듈화 */
/* 600라인 룰 준수를 위해 기능별로 분할 */
/* 기본 레이아웃 및 탭 네비게이션 */
/* 보안 권장사항 시스템 - 기본 레이아웃 및 탭 */
/* 메인 컨테이너 */
.security-recommendations {
  max-width: 1000px;
  min-height: 600px;
  height: auto;
  margin: 0 auto;
  padding: 24px;
  background: var(--color-surface);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
/* 헤더 */
.recommendations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-light);
}
.recommendations-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text);
}
.close-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border, #e5e5e5);
  background: var(--color-background-muted, #f8f9fa);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--color-text, #333);
  flex-shrink: 0;
}
.close-button:hover {
  background: var(--color-background-hover, #e9ecef);
  border-color: var(--color-border-hover, #dee2e6);
  color: var(--color-danger, #dc3545);
}
.close-button:focus {
  outline: 2px solid var(--color-primary, #007bff);
  outline-offset: 2px;
}
.close-button svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2;
}
/* 탭 네비게이션 */
.recommendations-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 32px;
  background: var(--color-background-light);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
}
.tab-button {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all 0.2s ease;
}
.tab-button:hover {
  background: var(--color-background-hover);
  color: var(--color-text);
}
.tab-button.active {
  background: var(--color-primary, #007bff);
  color: white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}
/* 탭 컨텐츠 기본 레이아웃 */
.overview-content,
.issues-content,
.recommendations-content,
.passwords-content {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  overflow-y: auto;
  flex: 1;
  opacity: 1;
  animation: fadeIn 0.3s ease-in-out;
}
.overview-content {
  gap: 24px;
}
.issues-content {
  gap: 20px;
}
.recommendations-content {
  gap: 16px;
}
.passwords-content {
  padding: 0;
}
/* 페이드 인 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 공통 섹션 헤더 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--color-background-light);
  border-radius: 8px;
  border-left: 4px solid var(--color-primary);
  transition: all 0.2s ease;
}
.section-header:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.section-header .header-actions {
  display: flex;
  gap: 8px;
}
/* 빈 상태 메시지 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.empty-state h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}
.empty-state p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
/* 로딩 상태 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
}
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border-light);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-text {
  font-size: 14px;
  font-weight: 500;
}
/* 컨텐츠 영역 및 카드 스타일 */
/* 보안 권장사항 시스템 - 컨텐츠 영역 및 카드 */
/* 보안 점수 카드 */
.security-score-card {
  display: flex;
  gap: 24px;
  padding: 24px;
  background: linear-gradient(135deg, var(--color-background-light) 0%, var(--color-background) 100%);
  border-radius: 12px;
  border: 1px solid var(--color-border-light);
}
.score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 3px solid var(--color-border-light);
}
.score-number {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}
.score-grade {
  font-size: 18px;
  font-weight: 600;
  margin-top: 4px;
}
.score-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.score-info h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
}
.score-description {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: var(--color-text-muted);
}
.score-stats {
  display: flex;
  gap: 32px;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
}
.stat-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
/* 문제점 요약 */
.issues-summary h4 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}
.no-issues {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px;
  background: var(--color-background-light);
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
}
.no-issues svg {
  width: 48px;
  height: 48px;
  color: #28a745;
}
.no-issues p {
  margin: 0;
  font-size: 16px;
  color: var(--color-text);
  font-weight: 500;
}
.issues-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.issue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  transition: all 0.2s ease;
}
.issue-item.critical {
  background: rgba(220, 53, 69, 0.1);
  border-color: #dc3545;
}
.issue-item.warning {
  background: rgba(255, 193, 7, 0.1);
  border-color: #ffc107;
}
.issue-item.info {
  background: rgba(13, 110, 253, 0.1);
  border-color: #0d6efd;
}
.issue-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.issue-item.critical svg {
  color: #dc3545;
}
.issue-item.warning svg {
  color: #ffc107;
}
.issue-item.info svg {
  color: #0d6efd;
}
.issue-content {
  flex: 1;
}
.issue-content h5 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.issue-content p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}
.issue-count {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}
/* 섹션 컨테이너 */
.issue-section {
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  overflow: hidden;
}
.section-content {
  padding: 20px;
  background: var(--color-background);
}
/* 중복 및 유사 그룹 */
.duplicate-group,
.similar-group {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--color-background-light);
  border-radius: 6px;
  border: 1px solid var(--color-border-light);
}
.group-header {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--color-text);
}
.affected-passwords {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.password-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-background);
  border-radius: 4px;
  border: 1px solid var(--color-border-light);
}
.password-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}
.password-item span {
  flex: 1;
  font-size: 13px;
  color: var(--color-text);
}
.similarity-badge {
  background: var(--color-primary);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}
.fix-button {
  padding: 4px 12px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.fix-button:hover {
  background: var(--color-primary);
  color: white;
}
/* 약한 패스워드 아이템 */
.weak-password-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: var(--color-background-light);
  border-radius: 6px;
  border: 1px solid var(--color-border-light);
  margin-bottom: 12px;
}
.password-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.password-info svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}
.issue-tag {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}
/* 권장사항 카드 */
.recommendation-card {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  background: var(--color-background-light);
}
.recommendation-card.high {
  border-left: 4px solid #dc3545;
}
.recommendation-card.medium {
  border-left: 4px solid #ffc107;
}
.recommendation-card.low {
  border-left: 4px solid #28a745;
}
.recommendation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.priority-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.recommendation-card.high .priority-badge {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.recommendation-card.medium .priority-badge {
  background: rgba(255, 193, 7, 0.1);
  color: #856404;
}
.recommendation-card.low .priority-badge {
  background: rgba(40, 167, 69, 0.1);
  color: #155724;
}
.recommendation-header h4 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.recommendation-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.recommendation-stats {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.action-button {
  padding: 8px 16px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: white;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.action-button:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
/* 패스워드 분석 그리드 */
.passwords-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.password-analysis-card {
  padding: 20px;
  background: var(--color-background-light);
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
}
.password-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.password-header h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.grade-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.password-details {
  margin-bottom: 16px;
}
.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border-light);
}
.detail-item:last-child {
  border-bottom: none;
}
.detail-item span:first-child {
  color: var(--color-text-muted);
  font-weight: 500;
}
.detail-item span:last-child {
  color: var(--color-text);
  font-weight: 600;
}
.password-issues {
  margin-bottom: 16px;
}
.password-issues h6 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.password-issues ul {
  margin: 0;
  padding-left: 16px;
}
.password-issues li {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.improve-button {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.improve-button:hover {
  background: var(--color-primary);
  color: white;
}
/* 반응형, 다크모드 및 접근성 */
/* 보안 권장사항 시스템 - 반응형, 다크모드 및 접근성 */
/* 다크 모드 지원 */
[data-theme="dark"] .security-recommendations {
  background: var(--color-surface-dark);
  border-color: var(--color-border-dark);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .recommendations-header h2 {
  color: var(--color-text-dark);
}
[data-theme="dark"] .close-button {
  background: var(--color-background-muted-dark, #495057);
  border-color: var(--color-border-dark, #6c757d);
  color: var(--color-text-dark, #f8f9fa);
}
[data-theme="dark"] .close-button:hover {
  background: var(--color-background-hover-dark, #6c757d);
  border-color: var(--color-border-hover-dark, #adb5bd);
  color: var(--color-danger, #dc3545);
}
[data-theme="dark"] .recommendations-tabs {
  background: var(--color-background-light-dark);
  border-color: var(--color-border-light-dark);
}
[data-theme="dark"] .tab-button {
  color: var(--color-text-muted-dark);
}
[data-theme="dark"] .tab-button:hover {
  background: var(--color-background-hover-dark);
  color: var(--color-text-dark);
}
[data-theme="dark"] .tab-button.active {
  background: var(--color-primary, #007bff);
  color: white !important;
  font-weight: 600;
}
[data-theme="dark"] .security-score-card {
  background: linear-gradient(135deg, var(--color-background-light-dark) 0%, var(--color-background-dark) 100%);
  border-color: var(--color-border-light-dark);
}
[data-theme="dark"] .score-circle {
  background: var(--color-surface-dark);
  border-color: var(--color-border-light-dark);
}
[data-theme="dark"] .issue-section,
[data-theme="dark"] .recommendation-card,
[data-theme="dark"] .password-analysis-card {
  background: var(--color-background-light-dark);
  border-color: var(--color-border-light-dark);
}
[data-theme="dark"] .section-content {
  background: var(--color-background-dark);
}
/* 태블릿 반응형 (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  .security-recommendations {
    padding: 20px;
    max-width: 900px;
  }
  
  .recommendations-header h2 {
    font-size: 22px;
  }
  
  .security-score-card {
    gap: 20px;
  }
  
  .score-circle {
    width: 100px;
    height: 100px;
  }
  
  .score-number {
    font-size: 32px;
  }
  
  .score-grade {
    font-size: 16px;
  }
  
  .passwords-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
}
/* 모바일 반응형 (최대 768px) */
@media (max-width: 768px) {
  .security-recommendations {
    padding: 16px;
    margin: 0 12px;
    min-height: 500px;
    max-width: none;
  }
  
  .recommendations-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .recommendations-header h2 {
    font-size: 20px;
  }
  
  /* 모바일 터치 친화적 닫기 버튼 */
  .close-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  
  .close-button svg {
    width: 24px !important;
    height: 24px !important;
  }
  
  /* 모바일 탭 네비게이션 */
  .recommendations-tabs {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }
  
  .tab-button {
    justify-content: flex-start;
    padding: 16px;
    font-size: 16px;
    min-height: 44px;
  }
  
  .tab-button.active {
    color: white !important;
    font-weight: 600;
  }
  
  /* 모바일 보안 점수 카드 */
  .security-score-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 20px;
  }
  
  .score-circle {
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }
  
  .score-number {
    font-size: 28px;
  }
  
  .score-grade {
    font-size: 14px;
  }
  
  .score-stats {
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  /* 모바일 그리드 */
  .passwords-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* 모바일 패스워드 아이템 */
  .password-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
  }
  
  .password-info {
    justify-content: space-between;
  }
  
  /* 모바일 이슈 목록 */
  .issues-list {
    gap: 8px;
  }
  
  .issue-item {
    padding: 12px;
  }
  
  .weak-password-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  /* 모바일 탭 컨텐츠 영역 */
  .overview-content,
  .issues-content,
  .recommendations-content,
  .passwords-content {
    min-height: 350px;
  }
  
  /* 모바일 버튼 크기 조정 */
  .fix-button,
  .action-button,
  .improve-button {
    min-height: 44px;
    font-size: 16px;
  }
}
/* 작은 모바일 (최대 480px) */
@media (max-width: 480px) {
  .security-recommendations {
    padding: 12px;
    margin: 0 8px;
    border-radius: 8px;
  }
  
  .recommendations-header h2 {
    font-size: 18px;
  }
  
  .security-score-card {
    padding: 16px;
    gap: 12px;
  }
  
  .score-circle {
    width: 80px;
    height: 80px;
  }
  
  .score-number {
    font-size: 24px;
  }
  
  .score-grade {
    font-size: 12px;
  }
  
  .score-stats {
    gap: 16px;
  }
  
  .stat-number {
    font-size: 20px;
  }
  
  .tab-button {
    padding: 12px;
    font-size: 14px;
  }
}
/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
  /* 모든 애니메이션 비활성화 */
  .tab-button,
  .close-button,
  .section-header,
  .fix-button,
  .action-button,
  .improve-button,
  .issue-item,
  .recommendation-card,
  .password-analysis-card {
    transition: none;
  }
  
  .overview-content,
  .issues-content,
  .recommendations-content,
  .passwords-content {
    animation: none;
  }
  
  .loading-spinner {
    animation: none;
  }
  
  @keyframes fadeIn {
    from, to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
  .security-recommendations {
    border-width: 2px;
    border-color: #000;
  }
  
  .close-button {
    border-width: 2px;
    background: white;
    color: black;
  }
  
  .close-button:hover {
    background: #f0f0f0;
    color: #d00000;
    border-color: #d00000;
  }
  
  .tab-button.active {
    background: #000 !important;
    color: white !important;
    border: 2px solid #000;
  }
  
  .issue-section,
  .recommendation-card,
  .password-analysis-card {
    border-width: 2px;
  }
  
  .score-circle {
    border-width: 3px;
    border-color: #000;
  }
  
  .fix-button,
  .action-button,
  .improve-button {
    border-width: 2px;
  }
}
/* 인쇄 스타일 */
@media print {
  .security-recommendations {
    box-shadow: none;
    border: 1px solid #000;
    background: white;
    color: black;
    max-width: none;
    margin: 0;
    padding: 20px;
  }
  
  .close-button {
    display: none;
  }
  
  .recommendations-tabs {
    display: none;
  }
  
  .overview-content {
    display: block !important;
  }
  
  .issues-content,
  .recommendations-content,
  .passwords-content {
    display: none;
  }
  
  .security-score-card {
    background: white;
    border: 1px solid #000;
  }
  
  .score-circle {
    background: white;
    border: 2px solid #000;
  }
}
/* 모바일 탭 가로 배치 수정 */
/* 보안 권장사항 - 모바일 탭 가로 배치 수정 */
/* 모바일에서도 탭을 가로로 유지 */
@media (max-width: 768px) {
  /* 탭 컨테이너 가로 스크롤 가능하도록 설정 */
  .recommendations-tabs {
    flex-direction: row !important;
    gap: 4px !important;
    padding: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  /* 스크롤바 숨기기 */
  .recommendations-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .tab-button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    min-height: 40px !important;
    white-space: nowrap !important;
  }
  
  /* 아이콘과 텍스트 정렬 */
  .tab-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  
  /* 활성 탭 스타일 유지 */
  .tab-button.active {
    background: var(--color-primary, #007bff) !important;
    color: white !important;
    font-weight: 600 !important;
  }
  
  /* 첫 번째 탭에 약간의 여백 추가 (스크롤 시작점) */
  .tab-button:first-child {
    margin-left: 2px;
  }
  
  /* 마지막 탭에 약간의 여백 추가 (스크롤 끝점) */
  .tab-button:last-child {
    margin-right: 2px;
  }
}
/* 작은 모바일에서도 동일하게 적용 */
@media (max-width: 480px) {
  .recommendations-tabs {
    padding: 3px !important;
  }
  
  .tab-button {
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-height: 36px !important;
    gap: 6px !important;
  }
  
  .tab-button svg {
    width: 14px;
    height: 14px;
  }
}
/* 탭이 4개일 때 화면에 모두 보이도록 조정 */
@media (max-width: 768px) and (min-width: 481px) {
  .recommendations-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px !important;
    overflow-x: visible !important;
  }
  
  .tab-button {
    min-width: unset !important;
    padding: 8px 4px !important;
    font-size: 13px !important;
  }
  
  /* 아이콘만 표시하고 텍스트는 작게 */
  .tab-button {
    flex-direction: column !important;
    gap: 4px !important;
    min-height: 48px !important;
  }
  
  .tab-button svg {
    width: 18px;
    height: 18px;
  }
}
/* 아주 작은 화면에서는 2x2 그리드로 */
@media (max-width: 360px) {
  .recommendations-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px !important;
    overflow-x: visible !important;
  }
  
  .tab-button {
    min-width: unset !important;
    padding: 10px 8px !important;
    min-height: 44px !important;
  }
}
/* 탭 스크롤 힌트 (스크롤 가능함을 나타내는 그라데이션) */
@media (max-width: 480px) {
  .recommendations-tabs {
    position: relative;
  }
  
  /* 오른쪽 그라데이션 (더 많은 탭이 있음을 표시) */
  .recommendations-tabs::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, var(--color-background-light, rgba(248, 249, 250, 0.95)));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  /* 스크롤 가능할 때만 그라데이션 표시 */
  .recommendations-tabs.scrollable::after {
    opacity: 1;
  }
}
/* 다크모드 지원 */
[data-theme="dark"] @media (max-width: 480px) {
  .recommendations-tabs::after {
    background: linear-gradient(to right, transparent, var(--color-background-light-dark, rgba(52, 58, 64, 0.95)));
  }
}
/* 모달 정렬 수정 - 표준 모달 시스템과 일관성 유지 */
/* ================================= */
/* SecurityRecommendations 모달 정렬 수정 */
/* 표준 모달 시스템과 일관성 유지 */
/* ================================= */
/* 오버레이를 표준 모달 오버레이와 동일하게 */
.security-recommendations-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: modalOverlayFadeIn 0.2s ease-out;
}
/* SecurityRecommendations를 표준 모달 컨텐츠처럼 */
.security-recommendations-modal-overlay .security-recommendations {
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  width: 100%;
  max-width: 1000px; /* 기본 최대 너비 유지 */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modalContentSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin: 0; /* 마진 제거 */
  padding: 0; /* 패딩은 내부 요소에서 처리 */
}
/* 탭 컨텐츠 영역 스크롤 */
.security-recommendations-modal-overlay .overview-content,
.security-recommendations-modal-overlay .issues-content,
.security-recommendations-modal-overlay .recommendations-content,
.security-recommendations-modal-overlay .passwords-content {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* 다크모드 지원 */
.theme-dark .security-recommendations-modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}
.theme-dark .security-recommendations-modal-overlay .security-recommendations {
  background: var(--bg-primary);
  border-color: var(--border-color);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3);
}
/* 모바일 반응형 - 표준 모달과 동일하게 */
@media (max-width: 768px) {
  .security-recommendations-modal-overlay {
    padding: 10px;
    align-items: flex-end; /* 하단 정렬 */
  }
  
  .security-recommendations-modal-overlay .security-recommendations {
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    border-radius: 16px 16px 0 0; /* 상단만 둥글게 */
    max-height: 95vh;
    min-height: auto; /* 고정 높이 제거 */
    animation: modalContentSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* 모바일 슬라이드업 애니메이션 */
  @keyframes modalContentSlideUp {
    from {
      opacity: 0;
      transform: translateY(100px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 모바일에서 헤더 조정 */
  .security-recommendations-modal-overlay .recommendations-header {
    padding: 16px 20px 12px 20px;
    flex-direction: row; /* 가로 정렬 유지 */
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: left;
  }
  
  .security-recommendations-modal-overlay .recommendations-header h2 {
    font-size: 18px;
    margin: 0;
  }
  
  /* 모바일 터치 친화적 닫기 버튼 */
  .security-recommendations-modal-overlay .close-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-shrink: 0;
  }
  
  /* 탭 영역 패딩 조정 */
  .security-recommendations-modal-overlay .security-recommendations {
    padding: 0;
  }
  
  /* 탭 컨텐츠 최소 높이 조정 */
  .security-recommendations-modal-overlay .overview-content,
  .security-recommendations-modal-overlay .issues-content,
  .security-recommendations-modal-overlay .recommendations-content,
  .security-recommendations-modal-overlay .passwords-content {
    min-height: 300px; /* 모바일에서 더 작은 최소 높이 */
  }
}
/* 작은 모바일 화면 */
@media (max-width: 375px) {
  .security-recommendations-modal-overlay {
    padding: 5px;
  }
  
  .security-recommendations-modal-overlay .security-recommendations {
    border-radius: 12px 12px 0 0;
  }
  
  .security-recommendations-modal-overlay .recommendations-header {
    padding: 12px 16px 10px 16px;
  }
  
  .security-recommendations-modal-overlay .recommendations-header h2 {
    font-size: 16px;
  }
}
/* 가로 모드 최적화 */
@media (max-height: 500px) and (orientation: landscape) {
  .security-recommendations-modal-overlay {
    align-items: center; /* 중앙 정렬 */
    padding: 10px;
  }
  
  .security-recommendations-modal-overlay .security-recommendations {
    max-height: 95vh;
    border-radius: 16px; /* 전체 둥글게 */
    animation: modalContentSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .security-recommendations-modal-overlay .recommendations-header {
    padding: 12px 20px 8px 20px;
  }
  
  .security-recommendations-modal-overlay .recommendations-header h2 {
    font-size: 16px;
  }
}
/* 애니메이션 키프레임 (표준 모달과 동일) */
@keyframes modalOverlayFadeIn {
  from { 
    opacity: 0; 
    backdrop-filter: blur(0px);
  }
  to { 
    opacity: 1; 
    backdrop-filter: blur(4px);
  }
}
@keyframes modalContentSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* 접근성 - 애니메이션 감소 */
@media (prefers-reduced-motion: reduce) {
  .security-recommendations-modal-overlay,
  .security-recommendations-modal-overlay .security-recommendations {
    animation: none;
  }
}
/* 고대비 모드 */
@media (prefers-contrast: high) {
  .security-recommendations-modal-overlay .security-recommendations {
    border-width: 2px !important;
  }
}
/* 모달 크기 일정하게 고정 */
/* ================================= */
/* SecurityRecommendations 모달 크기 일정하게 고정 */
/* !important 제거 버전 */
/* ================================= */
/* 모든 탭 컨텐츠에 일정한 최소 높이 적용 */
.security-recommendations {
  min-height: 600px;
  height: auto;
}
/* 탭 컨텐츠 영역 고정 높이 */
.security-recommendations .overview-content,
.security-recommendations .issues-content,
.security-recommendations .recommendations-content,
.security-recommendations .passwords-content {
  min-height: 450px;
  max-height: 450px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* 모달 오버레이에서도 동일하게 적용 - 더 구체적인 선택자 */
.modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations {
  min-height: 600px;
  height: 600px;
  display: flex;
  flex-direction: column;
}
/* 헤더와 탭 높이를 고려한 컨텐츠 영역 - 더 구체적인 선택자 */
.modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .overview-content,
.modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .issues-content,
.modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .recommendations-content,
.modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .passwords-content {
  flex: 1;
  min-height: 0;
  max-height: calc(600px - 180px); /* 전체 높이 - 헤더 - 탭 */
  overflow-y: auto;
  overflow-x: hidden;
}
/* 태블릿 - 더 구체적인 선택자 */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations,
  body .security-recommendations {
    min-height: 550px;
    height: 550px;
  }
  
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .overview-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .issues-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .recommendations-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .passwords-content,
  body .security-recommendations .overview-content,
  body .security-recommendations .issues-content,
  body .security-recommendations .recommendations-content,
  body .security-recommendations .passwords-content {
    max-height: calc(550px - 180px);
  }
}
/* 모바일 - 더 구체적인 선택자 */
@media screen and (max-width: 768px) {
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations,
  body .security-recommendations {
    min-height: 500px;
    height: 500px;
    max-height: 85vh; /* 화면이 작을 때 대비 */
  }
  
  /* 모바일에서 탭이 가로 배치되므로 높이 계산 조정 */
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .overview-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .issues-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .recommendations-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .passwords-content,
  body .security-recommendations .overview-content,
  body .security-recommendations .issues-content,
  body .security-recommendations .recommendations-content,
  body .security-recommendations .passwords-content {
    min-height: 320px;
    max-height: calc(500px - 160px); /* 모바일은 헤더와 탭이 더 작음 */
  }
}
/* 작은 모바일 - 더 구체적인 선택자 */
@media screen and (max-width: 480px) {
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations,
  body .security-recommendations {
    min-height: 480px;
    height: 480px;
    max-height: 90vh;
  }
  
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .overview-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .issues-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .recommendations-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .passwords-content,
  body .security-recommendations .overview-content,
  body .security-recommendations .issues-content,
  body .security-recommendations .recommendations-content,
  body .security-recommendations .passwords-content {
    min-height: 300px;
    max-height: calc(480px - 150px);
  }
}
/* 아주 작은 화면 - 더 구체적인 선택자 */
@media screen and (max-width: 375px) {
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations,
  body .security-recommendations {
    min-height: 450px;
    height: 450px;
    max-height: 92vh;
  }
  
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .overview-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .issues-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .recommendations-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .passwords-content,
  body .security-recommendations .overview-content,
  body .security-recommendations .issues-content,
  body .security-recommendations .recommendations-content,
  body .security-recommendations .passwords-content {
    min-height: 280px;
    max-height: calc(450px - 140px);
  }
}
/* 가로 모드 - 더 구체적인 선택자 */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations,
  body .security-recommendations {
    min-height: 400px;
    height: 400px;
    max-height: 90vh;
  }
  
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .overview-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .issues-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .recommendations-content,
  .modal-overlay .security-recommendations-modal-overlay .modal-content .security-recommendations .passwords-content,
  body .security-recommendations .overview-content,
  body .security-recommendations .issues-content,
  body .security-recommendations .recommendations-content,
  body .security-recommendations .passwords-content {
    min-height: 220px;
    max-height: calc(400px - 140px);
  }
}
/* 스크롤바 스타일 */
.security-recommendations .overview-content::-webkit-scrollbar,
.security-recommendations .issues-content::-webkit-scrollbar,
.security-recommendations .recommendations-content::-webkit-scrollbar,
.security-recommendations .passwords-content::-webkit-scrollbar {
  width: 6px;
}
.security-recommendations .overview-content::-webkit-scrollbar-track,
.security-recommendations .issues-content::-webkit-scrollbar-track,
.security-recommendations .recommendations-content::-webkit-scrollbar-track,
.security-recommendations .passwords-content::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}
.security-recommendations .overview-content::-webkit-scrollbar-thumb,
.security-recommendations .issues-content::-webkit-scrollbar-thumb,
.security-recommendations .recommendations-content::-webkit-scrollbar-thumb,
.security-recommendations .passwords-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
.security-recommendations .overview-content::-webkit-scrollbar-thumb:hover,
.security-recommendations .issues-content::-webkit-scrollbar-thumb:hover,
.security-recommendations .recommendations-content::-webkit-scrollbar-thumb:hover,
.security-recommendations .passwords-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}
/* 다크모드 스크롤바 - 더 구체적인 선택자 */
[data-theme="dark"] .security-recommendations .overview-content::-webkit-scrollbar-track,
[data-theme="dark"] .security-recommendations .issues-content::-webkit-scrollbar-track,
[data-theme="dark"] .security-recommendations .recommendations-content::-webkit-scrollbar-track,
[data-theme="dark"] .security-recommendations .passwords-content::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
[data-theme="dark"] .security-recommendations .overview-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .security-recommendations .issues-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .security-recommendations .recommendations-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .security-recommendations .passwords-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
}
[data-theme="dark"] .security-recommendations .overview-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .security-recommendations .issues-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .security-recommendations .recommendations-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .security-recommendations .passwords-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}
/* 표준 모달 스타일 적용 */
/* ================================= */
/* SecurityRecommendations 표준 모달 스타일 */
/* ================================= */
/* Modal 컴포넌트 내부의 security-recommendations 스타일 조정 */
.security-recommendations-modal .modal-content {
  /* 다른 모달과 동일한 크기 */
  max-width: 900px !important;
  width: 90% !important;
}
.security-recommendations-modal .modal-body {
  padding: 0 !important;
}
/* SecurityRecommendations 컨테이너 조정 */
.security-recommendations {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 20px !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: auto !important;
  height: auto !important;
}
/* 헤더 제거 (Modal의 헤더 사용) */
.security-recommendations .recommendations-header {
  display: none !important;
}
/* 탭 네비게이션 상단 간격 조정 */
.security-recommendations .recommendations-tabs {
  margin-top: 0;
  margin-bottom: 24px;
}
/* 컨텐츠 영역 높이 조정 */
.security-recommendations .overview-content,
.security-recommendations .issues-content,
.security-recommendations .recommendations-content,
.security-recommendations .passwords-content {
  min-height: 400px !important;
  max-height: 60vh !important;
  overflow-y: auto;
}
/* 태블릿 반응형 */
@media (max-width: 1024px) and (min-width: 769px) {
  .security-recommendations-modal .modal-content {
    max-width: 800px !important;
    width: 90% !important;
  }
  
  .security-recommendations {
    padding: 16px !important;
  }
}
/* 모바일 반응형 */
@media (max-width: 768px) {
  .security-recommendations-modal .modal-content {
    width: 100% !important;
    max-width: none !important;
  }
  
  .security-recommendations {
    padding: 12px !important;
  }
  
  /* 탭 네비게이션 모바일 스타일 유지 */
  .security-recommendations .recommendations-tabs {
    margin-bottom: 16px;
  }
  
  /* 모바일 컨텐츠 높이 */
  .security-recommendations .overview-content,
  .security-recommendations .issues-content,
  .security-recommendations .recommendations-content,
  .security-recommendations .passwords-content {
    min-height: 350px !important;
    max-height: 50vh !important;
  }
}
/* 작은 모바일 */
@media (max-width: 480px) {
  .security-recommendations {
    padding: 8px !important;
  }
  
  .security-recommendations .overview-content,
  .security-recommendations .issues-content,
  .security-recommendations .recommendations-content,
  .security-recommendations .passwords-content {
    min-height: 300px !important;
    max-height: 45vh !important;
  }
}
/* 이전 모달 fix 스타일 제거 */
.security-recommendations-modal-overlay {
  display: none !important;
}
/* 다크모드 지원 */
.theme-dark .security-recommendations {
  background: transparent !important;
}
/* 스크롤바 스타일 통일 */
.security-recommendations .overview-content::-webkit-scrollbar,
.security-recommendations .issues-content::-webkit-scrollbar,
.security-recommendations .recommendations-content::-webkit-scrollbar,
.security-recommendations .passwords-content::-webkit-scrollbar {
  width: 8px;
}
.security-recommendations .overview-content::-webkit-scrollbar-track,
.security-recommendations .issues-content::-webkit-scrollbar-track,
.security-recommendations .recommendations-content::-webkit-scrollbar-track,
.security-recommendations .passwords-content::-webkit-scrollbar-track {
  background: var(--color-background-light, #f1f1f1);
  border-radius: 4px;
}
.security-recommendations .overview-content::-webkit-scrollbar-thumb,
.security-recommendations .issues-content::-webkit-scrollbar-thumb,
.security-recommendations .recommendations-content::-webkit-scrollbar-thumb,
.security-recommendations .passwords-content::-webkit-scrollbar-thumb {
  background: var(--color-border, #ccc);
  border-radius: 4px;
}
.security-recommendations .overview-content::-webkit-scrollbar-thumb:hover,
.security-recommendations .issues-content::-webkit-scrollbar-thumb:hover,
.security-recommendations .recommendations-content::-webkit-scrollbar-thumb:hover,
.security-recommendations .passwords-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted, #999);
}
/* 2단계 인증(2FA) 스타일 - 모듈화 */
/* 600라인 룰 준수를 위해 기능별로 분할 */
/* 기본 모달 및 단계별 컨텐츠 스타일 */
/* 2단계 인증(2FA) 기본 스타일 - 모달 및 단계별 컨텐츠 */
/* 모달 기본 구조 */
.two-factor-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  padding: 20px;
  box-sizing: border-box;
}
.two-factor-modal {
  background: var(--color-surface);
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* 헤더 */
.two-factor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 30px 20px;
  border-bottom: 1px solid var(--color-border-light);
}
.two-factor-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
}
.close-button {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--color-background-muted);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.close-button:hover {
  background: var(--color-background-hover);
}
/* 콘텐츠 */
.two-factor-content {
  padding: 30px;
}
/* 공통 단계 스타일 */
.step-intro,
.step-setup,
.step-verify,
.step-complete {
  text-align: center;
}
.step-icon,
.success-icon {
  font-size: 48px;
  margin-bottom: 20px;
}
/* 소개 단계 */
.step-intro h3 {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text);
}
.step-intro p {
  margin: 0 0 24px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  text-align: left;
}
.benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-background-light);
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
}
.benefit-item svg {
  width: 20px;
  height: 20px;
  color: #22c55e;
  flex-shrink: 0;
}
.benefit-item span {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.supported-apps {
  text-align: left;
  margin-bottom: 32px;
  padding: 20px;
  background: var(--color-background-light);
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
}
.supported-apps h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.supported-apps ul {
  margin: 0;
  padding-left: 20px;
}
.supported-apps li {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
/* 설정 단계 */
.step-setup h3 {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
}
.setup-instructions {
  margin-bottom: 32px;
}
.instruction-step {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  margin-bottom: 16px;
}
.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.instruction-step p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text);
}
.qr-code-section {
  margin-bottom: 32px;
}
.qr-code-container {
  margin-bottom: 24px;
}
.qr-code {
  width: 200px;
  height: 200px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
}
.manual-key {
  text-align: center;
}
.manual-key p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--color-text-muted);
}
.secret-key {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 12px 16px;
  background: var(--color-background-light);
  border-radius: 6px;
  border: 1px solid var(--color-border-light);
}
.secret-key code {
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 14px;
  color: var(--color-text);
  background: none;
  padding: 0;
  word-break: break-all;
}
.copy-key-button {
  width: 24px;
  height: 24px;
  border: none;
  background: var(--color-background-muted);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.copy-key-button:hover {
  background: var(--color-primary);
  color: white;
}
/* 검증 단계 */
.step-verify h3 {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
}
.step-verify p {
  margin: 0 0 24px 0;
  font-size: 16px;
  color: var(--color-text-muted);
}
.verification-input {
  margin-bottom: 20px;
}
.code-input {
  width: 200px;
  height: 60px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 8px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s ease;
}
.code-input:focus {
  border-color: var(--color-primary);
}
.code-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.5;
}
.error-message {
  color: #dc3545;
  font-size: 14px;
  margin-bottom: 20px;
  padding: 8px 12px;
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 6px;
}
.verify-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
/* 완료 단계 */
.step-complete h3 {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
}
.backup-codes-section {
  text-align: left;
  margin-bottom: 32px;
}
.backup-codes-section h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.backup-codes-section p {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--color-background-light);
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
}
.backup-code {
  padding: 8px 12px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
}
.backup-warning {
  padding: 12px 16px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 6px;
  font-size: 13px;
  color: #856404;
  margin-bottom: 16px;
}
/* 버튼 스타일 */
.setup-button,
.next-button,
.back-button,
.verify-button,
.download-button,
.complete-button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}
.setup-button.primary,
.next-button.primary,
.verify-button.primary,
.complete-button.primary {
  background: var(--color-primary);
  color: white;
}
.setup-button.primary:hover,
.next-button.primary:hover,
.verify-button.primary:hover,
.complete-button.primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}
.back-button.secondary,
.download-button.secondary {
  background: var(--color-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.back-button.secondary:hover,
.download-button.secondary:hover {
  background: var(--color-secondary-dark);
  border-color: var(--color-primary);
}
.download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.setup-button:disabled,
.verify-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
/* 다크모드, 반응형 및 접근성 스타일 */
/* 2단계 인증(2FA) 반응형 스타일 - 다크모드, 반응형 및 접근성 */
/* 다크 모드 지원 */
[data-theme="dark"] .two-factor-modal {
  background: var(--color-surface-dark);
  border-color: var(--color-border-dark);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .two-factor-header {
  border-bottom-color: var(--color-border-light-dark);
}
[data-theme="dark"] .two-factor-header h2 {
  color: var(--color-text-dark);
}
[data-theme="dark"] .close-button {
  background: var(--color-background-muted-dark);
}
[data-theme="dark"] .close-button:hover {
  background: var(--color-background-hover-dark);
}
[data-theme="dark"] .step-intro h3,
[data-theme="dark"] .step-setup h3,
[data-theme="dark"] .step-verify h3,
[data-theme="dark"] .step-complete h3 {
  color: var(--color-text-dark);
}
[data-theme="dark"] .step-intro p,
[data-theme="dark"] .step-verify p {
  color: var(--color-text-muted-dark);
}
[data-theme="dark"] .benefit-item {
  background: var(--color-background-light-dark);
  border-color: var(--color-border-light-dark);
}
[data-theme="dark"] .benefit-item span {
  color: var(--color-text-dark);
}
[data-theme="dark"] .supported-apps {
  background: var(--color-background-light-dark);
  border-color: var(--color-border-light-dark);
}
[data-theme="dark"] .supported-apps h4 {
  color: var(--color-text-dark);
}
[data-theme="dark"] .supported-apps li {
  color: var(--color-text-muted-dark);
}
[data-theme="dark"] .instruction-step p {
  color: var(--color-text-dark);
}
[data-theme="dark"] .qr-code {
  border-color: var(--color-border-dark);
}
[data-theme="dark"] .manual-key p {
  color: var(--color-text-muted-dark);
}
[data-theme="dark"] .secret-key {
  background: var(--color-background-light-dark);
  border-color: var(--color-border-light-dark);
}
[data-theme="dark"] .secret-key code {
  color: var(--color-text-dark);
}
[data-theme="dark"] .copy-key-button {
  background: var(--color-background-muted-dark);
}
[data-theme="dark"] .code-input {
  background: var(--color-background-dark);
  border-color: var(--color-border-dark);
  color: var(--color-text-dark);
}
[data-theme="dark"] .code-input::placeholder {
  color: var(--color-text-muted-dark);
}
[data-theme="dark"] .error-message {
  background: rgba(220, 53, 69, 0.2);
  color: #f5c2c7;
}
[data-theme="dark"] .backup-codes-section h4 {
  color: var(--color-text-dark);
}
[data-theme="dark"] .backup-codes-section p {
  color: var(--color-text-muted-dark);
}
[data-theme="dark"] .backup-codes {
  background: var(--color-background-light-dark);
  border-color: var(--color-border-light-dark);
}
[data-theme="dark"] .backup-code {
  background: var(--color-background-dark);
  border-color: var(--color-border-dark);
  color: var(--color-text-dark);
}
[data-theme="dark"] .backup-warning {
  background: rgba(255, 193, 7, 0.2);
  color: #ffd700;
}
/* 태블릿 반응형 (최대 768px) */
@media (max-width: 768px) {
  .two-factor-modal-overlay {
    padding: 10px;
  }

  .two-factor-modal {
    max-width: 100%;
  }

  .two-factor-header {
    padding: 20px 24px 16px;
  }

  .two-factor-header h2 {
    font-size: 18px;
  }

  .two-factor-content {
    padding: 24px;
  }

  .step-intro h3,
  .step-setup h3,
  .step-verify h3,
  .step-complete h3 {
    font-size: 20px;
  }

  .step-intro p,
  .step-verify p {
    font-size: 14px;
  }

  .qr-code {
    width: 160px;
    height: 160px;
  }

  .code-input {
    width: 180px;
    height: 50px;
    font-size: 20px;
    letter-spacing: 6px;
  }

  .backup-codes {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .verify-actions {
    flex-direction: column;
    gap: 8px;
  }

  .setup-button,
  .next-button,
  .back-button,
  .verify-button,
  .download-button,
  .complete-button {
    width: 100%;
    min-height: 44px;
  }

  .instruction-step {
    gap: 12px;
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .instruction-step p {
    font-size: 13px;
  }

  .secret-key {
    padding: 10px 12px;
  }

  .secret-key code {
    font-size: 12px;
  }
}
/* 모바일 반응형 (최대 425px) */
@media (max-width: 425px) {
  .two-factor-modal-overlay {
    padding: 5px;
  }

  .two-factor-header {
    padding: 16px 20px 12px;
  }

  .two-factor-header h2 {
    font-size: 16px;
  }

  .close-button {
    width: 28px;
    height: 28px;
  }

  .two-factor-content {
    padding: 20px;
  }

  .step-intro h3,
  .step-setup h3,
  .step-verify h3,
  .step-complete h3 {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .step-intro p,
  .step-verify p {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .step-icon,
  .success-icon {
    font-size: 36px;
    margin-bottom: 16px;
  }

  .qr-code {
    width: 140px;
    height: 140px;
  }

  .code-input {
    width: 160px;
    height: 45px;
    font-size: 18px;
    letter-spacing: 4px;
  }

  .secret-key {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  .secret-key code {
    word-break: break-all;
    text-align: center;
    font-size: 11px;
  }

  .copy-key-button {
    width: 20px;
    height: 20px;
  }

  .benefit-item {
    padding: 10px 12px;
    gap: 8px;
  }

  .benefit-item svg {
    width: 16px;
    height: 16px;
  }

  .benefit-item span {
    font-size: 13px;
  }

  .supported-apps {
    padding: 16px;
    margin-bottom: 24px;
  }

  .supported-apps h4 {
    font-size: 13px;
  }

  .supported-apps li {
    font-size: 12px;
  }

  .backup-codes {
    padding: 12px;
    gap: 4px;
  }

  .backup-code {
    padding: 6px 8px;
    font-size: 12px;
  }

  .backup-warning {
    padding: 10px 12px;
    font-size: 12px;
  }

  .error-message {
    padding: 6px 10px;
    font-size: 12px;
  }
}
/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
  .two-factor-modal {
    animation: none;
  }

  .setup-button,
  .next-button,
  .back-button,
  .verify-button,
  .download-button,
  .complete-button,
  .close-button,
  .copy-key-button {
    transition: none;
  }

  @keyframes modalSlideIn {
    from, to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}
/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
  .two-factor-modal {
    border-width: 2px;
    border-color: #000;
  }

  .code-input {
    border-width: 2px;
    border-color: #000;
  }

  .secret-key {
    border-width: 2px;
    border-color: #000;
  }

  .backup-codes {
    border-width: 2px;
    border-color: #000;
  }

  .backup-code {
    border-width: 2px;
    border-color: #000;
  }

  .benefit-item {
    border-width: 2px;
    border-color: #000;
  }

  .supported-apps {
    border-width: 2px;
    border-color: #000;
  }

  .backup-warning {
    border-width: 2px;
    border-color: #856404;
  }

  .error-message {
    border-width: 2px;
    border-color: #dc3545;
  }

  .qr-code {
    border-width: 3px;
    border-color: #000;
  }

  .close-button {
    border: 2px solid #000;
  }

  .setup-button.primary,
  .next-button.primary,
  .verify-button.primary,
  .complete-button.primary {
    border: 2px solid #000;
  }

  .back-button.secondary,
  .download-button.secondary {
    border-width: 2px;
    border-color: #000;
  }
}
/* 인쇄 스타일 */
@media print {
  .two-factor-modal-overlay {
    position: static;
    background: none;
    padding: 0;
  }

  .two-factor-modal {
    box-shadow: none;
    border: 1px solid #000;
    background: white;
    color: black;
    max-width: none;
    max-height: none;
    overflow: visible;
  }

  .close-button {
    display: none;
  }

  .setup-button,
  .next-button,
  .back-button,
  .verify-button,
  .download-button,
  .complete-button {
    display: none;
  }

  .qr-code-section,
  .backup-codes-section {
    page-break-inside: avoid;
  }

  .backup-codes {
    background: white;
    border: 1px solid #000;
  }

  .backup-code {
    background: white;
    border: 1px solid #000;
  }
}
/* z-index 수정 */
/* 2FA 모달 z-index 수정 */
/* 설정 모달보다 높은 z-index 설정 */
.two-factor-modal-overlay {
  z-index: 2000 !important; /* 설정 모달(1000)보다 높게 */
}
.two-factor-modal {
  z-index: 2001 !important;
  position: relative;
}
/* 로딩 fallback도 높은 z-index */
.loading-fallback {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2100;
}
/* =========================== */
/* CSS 최적화 및 성능 개선 */
/* 중복 제거 및 효율적인 스타일 구조 */
/* =========================== */
/* 공통 애니메이션 정의 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}
@keyframes scaleIn {
  from { 
    opacity: 0; 
    transform: scale(0.9); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}
@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.5; 
  }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-2deg); }
  75% { transform: translateX(3px) rotate(2deg); }
}
/* 공통 hover 효과 */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* 공통 focus 스타일 */
.focus-ring {
  transition: outline 0.2s ease;
}
.focus-ring:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.focus-ring.focus-danger:focus-visible {
  outline: 2px solid var(--danger-color);
  outline-offset: 2px;
}
/* 공통 로딩 스타일 */
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.loading-dots::after {
  content: '';
  animation: dots 1.5s infinite;
}
@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}
/* 공통 버튼 베이스 */
.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.btn-base:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
/* 공통 입력 필드 베이스 */
.input-base {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-base:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}
.input-base:disabled {
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: not-allowed;
}
/* 공통 카드 스타일 */
.card-base {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}
.card-base:hover {
  box-shadow: var(--shadow-md);
}
/* 공통 모달 베이스 */
.modal-base {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}
/* 공통 그리드 레이아웃 */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.grid-2-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.grid-3-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* 공통 플렉스 유틸리티 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
/* 공통 간격 유틸리티 */
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 16px; }
.gap-xl { gap: 24px; }
.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 12px; }
.mb-lg { margin-bottom: 16px; }
.mb-xl { margin-bottom: 24px; }
.mt-xs { margin-top: 4px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 12px; }
.mt-lg { margin-top: 16px; }
.mt-xl { margin-top: 24px; }
.p-xs { padding: 4px; }
.p-sm { padding: 8px; }
.p-md { padding: 12px; }
.p-lg { padding: 16px; }
.p-xl { padding: 24px; }
/* 공통 텍스트 유틸리티 */
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.text-base { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 18px; }
.text-2xl { font-size: 20px; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger-color); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
/* 공통 배경 유틸리티 */
.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary { background: var(--bg-tertiary); }
/* 공통 테두리 유틸리티 */
.border { border: 1px solid var(--border-color); }
.border-0 { border: none; }
.border-t { border-top: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }
.border-l { border-left: 1px solid var(--border-color); }
.border-r { border-right: 1px solid var(--border-color); }
.rounded { border-radius: 6px; }
.rounded-md { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }
.rounded-full { border-radius: 50%; }
/* 공통 그림자 유틸리티 */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }
/* 성능 최적화 */
.will-change-transform { will-change: transform; }
.will-change-opacity { will-change: opacity; }
/* 접근성 유틸리티 */
.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;
}
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
/* 터치 디바이스 최적화 */
@media (hover: none) and (pointer: coarse) {
  .hover-lift:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  
  .btn-base {
    min-height: 44px;
    min-width: 44px;
  }
  
  .input-base {
    min-height: 44px;
    font-size: 16px; /* iOS 줌 방지 */
  }
}
/* 애니메이션 최소화 (공통) */
@media (prefers-reduced-motion: reduce) {
  *,
  .btn,
  .password-item,
  .share-modal-content,
  .modal-overlay,
  .modal-content,
  .refresh-button {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation: none !important;
    transition: none !important;
  }
  
  .loading-spinner {
    animation: none;
  }
  
  .loading-spinner::after {
    content: '⟳';
  }
  
  .modal-overlay {
    backdrop-filter: none;
  }
}
/* 고대비 모드 */
@media (prefers-contrast: high) {
  .border,
  .border-t,
  .border-b,
  .border-l,
  .border-r {
    border-color: var(--text-primary);
    border-width: 2px;
  }
  
  .btn-base {
    border-width: 2px;
  }
  
  .input-base {
    border-width: 2px;
  }
}
/* 프린트 스타일 */
@media print {
  .btn-base,
  .modal-base {
    display: none !important;
  }
  
  .card-base {
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }
  
  * {
    background: white !important;
    color: black !important;
  }
}
/* =========================== */
/* 접근성 개선 (WCAG 2.1 AA) */
/* 키보드, 스크린 리더, 시각적 접근성 */
/* !important 제거 버전 */
/* =========================== */
/* 포커스 관리 개선 */
.focus-trap {
  outline: none;
}
.focus-trap:focus-within {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
/* 키보드 네비게이션 개선 */
body.keyboard-navigation .password-item:focus,
body.keyboard-navigation .btn:focus,
body.keyboard-navigation .input-base:focus {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(102, 126, 234, 0.1);
}
body.keyboard-navigation .password-item {
  cursor: pointer;
}
body.keyboard-navigation .password-item:focus {
  background: var(--bg-secondary);
  transform: scale(1.02);
}
/* 키보드 전용 사용자를 위한 스킵 링크 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-color);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1001;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 6px;
}
/* 스크린 리더 개선 */
.sr-describe {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
/* 라이브 리전 (동적 콘텐츠 알림) */
.live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
[aria-live="polite"] {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* 고대비 모드 완전 지원 - 더 구체적인 미디어 쿼리와 선택자 */
@media (prefers-contrast: high) {
  :root {
    --bg-primary: #ffffff;
    --bg-secondary: #f0f0f0;
    --bg-tertiary: #e0e0e0;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #666666;
    --border-color: #000000;
    --primary-color: #0066cc;
    --danger-color: #cc0000;
    --success-color: #006600;
    --warning-color: #cc6600;
  }
  
  :root.theme-dark {
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #333333;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #999999;
    --border-color: #ffffff;
    --primary-color: #66ccff;
    --danger-color: #ff6666;
    --success-color: #66ff66;
    --warning-color: #ffcc66;
  }
  
  body:not(.no-contrast-mode) .btn,
  body:not(.no-contrast-mode) .password-item,
  body:not(.no-contrast-mode) .modal-content,
  body:not(.no-contrast-mode) .input-base {
    border-width: 2px;
    border-style: solid;
  }
  
  body:not(.no-contrast-mode) .password-item:focus,
  body:not(.no-contrast-mode) .btn:focus,
  body:not(.no-contrast-mode) .input-base:focus {
    outline: 4px solid var(--primary-color);
    outline-offset: 2px;
  }
}
/* 큰 텍스트 지원 */
@media (prefers-reduced-data: reduce) {
  /* 데이터 절약 모드에서 애니메이션 최소화 */
  body:not(.force-animations) * {
    animation: none;
    transition: none;
  }
  
  body:not(.force-animations) .modal-overlay {
    backdrop-filter: none;
  }
}
/* 색상 인식 장애 지원 */
.colorblind-support {
  /* 색상 외에 추가 시각적 단서 제공 */
}
.danger-pattern::before {
  content: '⚠️ ';
}
.success-pattern::before {
  content: '✅ ';
}
.warning-pattern::before {
  content: '⚡ ';
}
.info-pattern::before {
  content: 'ℹ️ ';
}
/* 키보드 단축키 힌트 */
.shortcut-hint {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  border: 1px solid var(--border-color);
}
/* 터치 디바이스 접근성 */
@media (hover: none) and (pointer: coarse) {
  /* 터치 영역 확대 */
  .touch-device .btn,
  .touch-device .password-item-actions button,
  .touch-device .modal-close-button {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }
  
  /* 터치 피드백 강화 */
  .touch-device .btn:active,
  .touch-device .password-item:active {
    background: var(--bg-secondary);
    transform: scale(0.98);
  }
  
  /* 롱 프레스 지원 */
  .touch-device .password-item {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}
/* 언어 지원 (한국어 최적화) */
:lang(ko) {
  /* 한글 최적화 폰트 스택 */
  font-family: 
    -apple-system, 
    BlinkMacSystemFont,
    'Apple SD Gothic Neo',
    'Pretendard Variable',
    Pretendard,
    'Noto Sans KR',
    'Malgun Gothic',
    '맑은 고딕',
    system-ui,
    sans-serif;
  
  /* 한글 줄간격 최적화 */
  line-height: 1.6;
  
  /* 한글 자간 최적화 */
  letter-spacing: -0.02em;
}
/* RTL 언어 지원 준비 */
[dir="rtl"] {
  /* RTL 레이아웃 지원 */
  direction: rtl;
}
[dir="rtl"] .password-item-actions {
  flex-direction: row-reverse;
}
[dir="rtl"] .modal-close-button {
  left: 16px;
  right: auto;
}
/* 에러 상태 접근성 강화 - 더 구체적인 선택자 */
.form-group.has-error .error-state,
.input-wrapper.has-error .error-state {
  border-color: var(--danger-color);
  background: rgba(220, 53, 69, 0.05);
}
.form-group.has-error .error-state:focus,
.input-wrapper.has-error .error-state:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}
.error-message {
  role: alert;
  aria-live: polite;
}
/* 성공 상태 접근성 - 더 구체적인 선택자 */
.form-group.has-success .success-state,
.input-wrapper.has-success .success-state {
  border-color: var(--success-color);
  background: rgba(40, 167, 69, 0.05);
}
.success-message {
  role: status;
  aria-live: polite;
}
/* 로딩 상태 접근성 */
.loading-state {
  aria-busy: "true";
  aria-describedby: "loading-description";
}
.loading-state::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
}
.loading-state::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid transparent;
  border-top: 2px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 2;
}
/* 모달 접근성 완전 지원 */
.modal-overlay {
  /* 포커스 트랩을 위한 기본 설정 */
  isolation: isolate;
}
.modal-content {
  /* 키보드 네비게이션 개선 */
  outline: none;
}
.modal-content:focus {
  /* 모달이 포커스를 받을 때의 시각적 표시 제거 */
  outline: none;
}
/* 진동 피드백 지원 (모바일) - 더 구체적인 선택자 */
@media (hover: none) and (pointer: coarse) {
  .touch-device .haptic-feedback {
    /* CSS로는 진동을 직접 제어할 수 없지만, 
       JavaScript에서 이 클래스를 감지하여 진동 실행 */
  }
  
  .touch-device .delete-button-improved.haptic-feedback:active,
  .touch-device .btn-danger.haptic-feedback:active {
    /* 위험한 동작에 대한 시각적 피드백 강화 */
    background: var(--danger-color);
    transform: scale(0.95);
  }
}
/* 배터리 절약 모드 (WCAG 특화) */
@media (prefers-reduced-motion: reduce) {
  .battery-save .loading-spinner::after {
    content: '로딩 중...';
    animation: none;
  }
}
/* 인쇄 접근성 - 더 구체적인 선택자 */
@media print {
  .printable .password-item {
    break-inside: avoid;
    margin-bottom: 20px;
  }
  
  .printable .password-item-value {
    color: #000;
    background: transparent;
  }
  
  .printable .sr-only {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
  }
  
  .printable .sr-only::before {
    content: '[스크린 리더: ' attr(aria-label) '] ';
    font-weight: bold;
  }
}
/* 접근성 디버깅 도구 */
body.a11y-debug [aria-label]::before {
  content: '[' attr(aria-label) '] ';
  background: yellow;
  color: black;
  font-size: 10px;
  padding: 1px 3px;
  margin-right: 4px;
}
body.a11y-debug [role]::after {
  content: '[role: ' attr(role) ']';
  background: orange;
  color: black;
  font-size: 9px;
  padding: 1px 2px;
  margin-left: 4px;
}
/* 오류 복구 지원 */
.error-recovery .btn-retry {
  margin-top: 8px;
  background: var(--warning-color);
  color: white;
  border: none;
}
.error-recovery .error-help {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.error-recovery .error-help::before {
  content: '💡 ';
}
/* =========================== */
/* 5. 필수 기본 스타일만 유지 */
/* =========================== */
/* mobile-improvements.css에서 처리되지 않는 기본 스타일들만 유지 */
/* 기본 반응형 컨테이너 */
@media (max-width: 768px) {
  .app-container {
    padding: 15px;
  }
}
/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
  :root {
    --border-color: #000000;
    --text-secondary: #000000;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
}
/* 다크모드 우선 설정 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #1e1e1e;
    --text-primary: #f7fafc;
    --text-secondary: #a0aec0;
    --border-color: #4a5568;
  }
}
/* 프린트 스타일 */
@media print {
  .btn,
  .password-search-controls,
  .dashboard-actions {
    display: none !important;
  }
  
  .password-item {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
  }
  
  .password-item-value {
    color: #000 !important;
    background: transparent !important;
  }
}
/* 애니메이션 비활성화 옵션 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* 터치 디바이스 최적화 */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .search-bar-clear,
  .password-item {
    min-height: 44px; /* 터치 친화적 크기 */
  }
  
  .btn:hover {
    transform: none; /* 터치에서 호버 효과 제거 */
  }
}
/* 접근성 개선 */
.focus-visible {
  outline: 2px solid var(--primary-color) !important;
  outline-offset: 2px !important;
}
/* 고해상도 디스플레이 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .password-item {
    border-width: 0.5px;
  }
}
/* 라이트/다크 테마 토글 지원 */
.theme-light {
  color-scheme: light;
}
.theme-dark {
  color-scheme: dark;
}
/* CSS 커스텀 프로퍼티 폴백 */
.legacy-browser-fallback {
  background-color: #ffffff;
  color: #333333;
  border-color: #e9ecef;
}
/* 스크린 리더 전용 */
.sr-only-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}
/* 개발자 도구용 */
[data-testid] {
  /* 테스트 환경에서만 표시되는 스타일 */
  position: relative;
}
[data-testid]::after {
  content: attr(data-testid);
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 10px;
  color: #ff0000;
  background: #ffff00;
  padding: 2px 4px;
  display: none;
  z-index: 9999;
}
/* 테스트 모드에서만 testid 표시 */
.test-mode [data-testid]::after {
  display: block;
}
/* 성능 최적화: will-change 속성 */
.btn,
.modal-content,
.password-item {
  will-change: transform;
}
/* 웹 접근성: 키보드 네비게이션 개선 */
.keyboard-navigation .btn:focus,
.keyboard-navigation .form-input:focus,
.keyboard-navigation .password-item:focus {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}
/* 슬라이드다운 애니메이션 (인앱브라우저 경고용) */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================== */
/* 컴포넌트별 CSS 오버라이드 (최종 우선순위) */
/* =========================== */
/* 최종 파일 크기: 약 260라인 */
/* 기존 2458라인에서 260라인으로 약 90% 감소! */
/* 2FA 설정 버튼 스타일 수정 */

/* 기본 버튼 스타일 - Button.css가 로드되지 않을 경우를 위한 폴백 */
.settings-modal .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  user-select: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.settings-modal .btn-sm {
  padding: 6px 12px !important;
  font-size: 0.875rem !important;
  min-height: 32px !important;
}

/* 2FA 버튼 특별 스타일 */
.settings-2fa-button {
  position: relative !important;
  z-index: 10 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 100px !important;
  min-height: 32px !important;
}

/* primary 버튼 스타일 강제 적용 (설정하기) */
.settings-modal .btn.btn-primary,
.settings-2fa-button.btn-primary {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
}

.settings-modal .btn.btn-primary:hover:not(:disabled),
.settings-2fa-button.btn-primary:hover:not(:disabled) {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: white !important;
  transform: translateY(-1px);
}

/* outline-danger 버튼 스타일 강제 적용 (비활성화) */
.settings-modal .btn.btn-outline-danger,
.settings-2fa-button.btn-outline-danger {
  background-color: transparent !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

.settings-modal .btn.btn-outline-danger:hover:not(:disabled),
.settings-2fa-button.btn-outline-danger:hover:not(:disabled) {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: white !important;
  transform: translateY(-1px);
}

/* 설정 모달 내부 버튼들 */
.settings-modal .settings-row-control {
  position: relative;
  z-index: 5;
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
}

.settings-modal .settings-row-control .btn {
  position: relative;
  z-index: 10;
}

/* 호버 효과 확인 */
.settings-2fa-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .settings-2fa-button {
    min-width: 80px !important;
    font-size: 14px !important;
  }
}

/* 버튼 내부 요소들 */
.settings-2fa-button .btn-icon {
  font-size: 1em !important;
  line-height: 1 !important;
}

.settings-2fa-button .btn-text {
  font-weight: 500 !important;
}/* 초기화 버튼 빨간 테두리 제거 */

/* 모든 상태에서 빨간 테두리 제거 */
.settings-modal .btn-reset-subtle,
.settings-modal .btn-reset-subtle.btn-outline-danger,
.settings-modal .settings-footer-actions .btn-reset-subtle {
  border: 1px solid #e5e7eb !important;
  border-color: #e5e7eb !important;
  color: #6b7280 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 호버 상태 */
.settings-modal .btn-reset-subtle:hover:not(:disabled),
.settings-modal .btn-reset-subtle.btn-outline-danger:hover:not(:disabled) {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #dc2626 !important;
  box-shadow: none !important;
}

/* 포커스 상태에서도 빨간 테두리 제거 */
.settings-modal .btn-reset-subtle:focus,
.settings-modal .btn-reset-subtle.btn-outline-danger:focus {
  outline: 2px solid #e5e7eb !important;
  outline-offset: 2px !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}

/* 활성 상태 */
.settings-modal .btn-reset-subtle:active,
.settings-modal .btn-reset-subtle.btn-outline-danger:active {
  border-color: #d1d5db !important;
  background-color: #f3f4f6 !important;
}

/* 비활성화 상태 */
.settings-modal .btn-reset-subtle:disabled,
.settings-modal .btn-reset-subtle.btn-outline-danger:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  border-color: #e5e7eb !important;
}/* 설정 모달 Footer 레이아웃 개선 */

.settings-footer-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* 버튼 영역 */
.settings-footer-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 왼쪽 영역 - 초기화 버튼 */
.settings-footer-left {
  display: flex;
  align-items: center;
}

/* 오른쪽 영역 - 취소/저장 버튼 */
.settings-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 버튼 내부 정렬 수정 */
.settings-footer-buttons .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 16px !important;
}

/* 취소 버튼 특별 처리 */
.settings-footer-buttons .btn-outline-secondary {
  min-width: 80px !important;
}

.settings-footer-buttons .btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 0.5rem !important;
}

.settings-footer-buttons .btn-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1;
}

/* 버전 정보 - 하단 중앙 */
.settings-footer-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color, #e5e5e5);
  width: 100%;
}

.settings-version {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #666);
}

.settings-build {
  font-size: 12px;
  color: var(--text-muted, #999);
}

.settings-build::before {
  content: "•";
  margin-right: 8px;
  color: var(--text-muted, #999);
}

/* 모바일 대응 */
@media (max-width: 480px) {
  .settings-footer-buttons {
    flex-direction: column;
    gap: 12px;
  }
  
  .settings-footer-left,
  .settings-footer-right {
    width: 100%;
    justify-content: center;
  }
  
  .settings-footer-left {
    order: 2;
  }
  
  .settings-footer-right {
    order: 1;
  }
}

/* 다크모드 대응 */
.theme-dark .settings-footer-info {
  border-top-color: var(--border-color);
}

.theme-dark .settings-version,
.theme-dark .settings-build {
  color: var(--text-muted);
}/* 신용카드 폼 스타일 */
.credit-card-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 90vh;
  background: var(--bg-primary);
  border-radius: 12px;
  overflow: hidden;
}

.credit-card-form .form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.credit-card-form .form-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
}

.credit-card-form .btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.credit-card-form .btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.credit-card-form .form-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.credit-card-form .form-group {
  margin-bottom: 1.25rem;
}

.credit-card-form .form-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.credit-card-form .form-group input,
.credit-card-form .form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.credit-card-form .form-group input:focus,
.credit-card-form .form-group textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.credit-card-form .form-group input.error,
.credit-card-form .form-group textarea.error {
  border-color: var(--danger-color);
}

.credit-card-form .error-message {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--danger-color);
}

/* 카드번호 입력 필드 */
.credit-card-form .input-with-type {
  position: relative;
}

.credit-card-form .card-type {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25rem 0.5rem;
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.credit-card-form .card-type-visa {
  background: #1A1F71;
  color: white;
}

.credit-card-form .card-type-mastercard {
  background: #EB001B;
  color: white;
}

.credit-card-form .card-type-amex {
  background: #006FCF;
  color: white;
}

.credit-card-form .card-type-discover {
  background: #FF6000;
  color: white;
}

/* 만료일 입력 */
.credit-card-form .expiry-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.credit-card-form .expiry-inputs input {
  width: 60px;
  text-align: center;
}

.credit-card-form .expiry-inputs span {
  color: var(--text-secondary);
}

/* 폼 행 */
.credit-card-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 480px) {
  .credit-card-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* 체크박스 그룹 */
.credit-card-form .checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.credit-card-form .checkbox-group input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* 폼 푸터 */
.credit-card-form .form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.credit-card-form .btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.credit-card-form .btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.credit-card-form .btn-secondary:hover {
  background: var(--bg-quaternary);
  color: var(--text-primary);
}

.credit-card-form .btn-primary {
  background: var(--accent-primary);
  color: white;
}

.credit-card-form .btn-primary:hover {
  background: var(--accent-dark);
}

.credit-card-form .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .credit-card-form {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }
  
  .credit-card-form .card-type {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
}/* API 키 폼 스타일 */
.api-key-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 90vh;
  background: var(--bg-primary);
  border-radius: 12px;
  overflow: hidden;
}

.api-key-form .form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.api-key-form .form-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
}

.api-key-form .btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.api-key-form .btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.api-key-form .form-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.api-key-form .form-group {
  margin-bottom: 1.25rem;
}

.api-key-form .form-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.api-key-form .label-hint {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--text-muted);
  font-style: italic;
}

.api-key-form .form-group input,
.api-key-form .form-group select,
.api-key-form .form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.api-key-form .form-group select {
  cursor: pointer;
}

.api-key-form .form-group input:focus,
.api-key-form .form-group select:focus,
.api-key-form .form-group textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.api-key-form .form-group input.error,
.api-key-form .form-group select.error,
.api-key-form .form-group textarea.error {
  border-color: var(--danger-color);
}

.api-key-form .error-message {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--danger-color);
}

/* 키 값 입력 필드 */
.api-key-form .input-with-toggle {
  position: relative;
}

.api-key-form .toggle-visibility {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25rem 0.75rem;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.api-key-form .toggle-visibility:hover {
  background: var(--bg-quaternary);
  color: var(--text-primary);
}

/* 경고 메시지 */
.api-key-form .warning-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--warning-light);
  border: 1px solid var(--warning-color);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--warning-dark);
}

/* 권한 그리드 */
.api-key-form .permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
}

.api-key-form .permission-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.api-key-form .permission-checkbox:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
}

.api-key-form .permission-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.api-key-form .permission-checkbox span {
  font-size: 0.875rem;
  color: var(--text-primary);
  text-transform: capitalize;
}

/* 폼 행 */
.api-key-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 480px) {
  .api-key-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* 체크박스 그룹 */
.api-key-form .checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.api-key-form .checkbox-group input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* 폼 푸터 */
.api-key-form .form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.api-key-form .btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.api-key-form .btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.api-key-form .btn-secondary:hover {
  background: var(--bg-quaternary);
  color: var(--text-primary);
}

.api-key-form .btn-primary {
  background: var(--accent-primary);
  color: white;
}

.api-key-form .btn-primary:hover {
  background: var(--accent-dark);
}

.api-key-form .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Select 드롭다운 스타일 */
.api-key-form .select-with-icon {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .api-key-form {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }
  
  .api-key-form .permission-checkbox {
    background: var(--bg-secondary);
  }
  
  .api-key-form .warning-message {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
  }
}