@charset "UTF-8";

/* ========================================
   Responsive Styles
   ======================================== */

/* ========================================
   Mobile First Approach
   ======================================== */

/* Extra Small devices (phones, 576px and down) */
@media (max-width: 575.98px) {
  /* Base Styles */
  body {
    font-size: 14px;
  }

  .container {
    padding: 0 15px;
  }

  /* Header */
  .site-header {
    padding: 10px 0;
  }

  .site-header .container {
    flex-direction: column;
    gap: 15px;
  }

  .logo-img {
    height: 28px;
  }

  .nav-menu {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .nav-menu a {
    padding: 10px 15px;
    text-align: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
  }

  /* Main Hero */
  .main-hero {
    padding: 80px 0 60px;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  /* Features */
  .main-features {
    padding: 60px 0;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 40px;
  }

  .feature-card {
    padding: 30px 20px;
  }

  /* Price Comparison */
  .price-comparison {
    padding: 30px 20px;
  }

  .comparison-title {
    font-size: 24px;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 40px;
  }

  .price-card {
    min-width: auto;
    margin-top: 30px;
  }

  /* Login Page */
  .login-container {
    padding: 30px 20px;
    margin: 20px;
  }

  .login-title {
    font-size: 24px;
  }

  /* Send Page */
  .send-page {
    padding: 20px 0;
  }

  .send-page-layout {
    flex-direction: column;
    gap: 30px;
  }

  .send-preview-area {
    width: 100%;
    order: -1;
  }

  .preview-sticky {
    position: static;
    top: auto;
  }

  .send-step {
    padding: 20px;
  }

  /* Admin Page */
  .admin-header {
    padding: 20px;
  }

  .admin-stats {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .admin-stat-card {
    padding: 20px;
  }

  /* Admin Dashboard */
  .admin-container {
    padding: 15px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .stat-card {
    padding: 20px;
  }

  .stat-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .admin-section {
    padding: 20px;
  }

  .admin-section-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .admin-section-header h2 {
    font-size: 18px;
  }

  .admin-table-container {
    overflow-x: auto;
  }

  .admin-table {
    font-size: 12px;
  }

  .admin-table th,
  .admin-table td {
    padding: 8px 10px;
  }

  .admin-btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  .admin-btn-sm {
    padding: 6px 12px;
    font-size: 11px;
  }

  /* Admin Forms */
  .admin-process-form-row {
    flex-direction: column;
    gap: 16px;
  }

  .admin-center-actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .admin-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-list-section {
    padding: 20px;
    margin-bottom: 20px;
  }

  .admin-list-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .admin-pagination-container {
    flex-direction: column;
    gap: 15px;
  }

  .admin-tab-navigation {
    flex-direction: column;
  }

  .admin-tab-button {
    text-align: center;
  }

  /* Tables */
  .member-table,
  .message-table {
    font-size: 12px;
  }

  .member-table th,
  .member-table td,
  .message-table th,
  .message-table td {
    padding: 8px 10px;
  }

  /* Forms */
  .send-step select,
  .send-step input[type='text'],
  .send-step input[type='number'],
  .send-step input[type='date'],
  .send-step input[type='time'],
  .send-step textarea {
    font-size: 16px; /* Prevent zoom on iOS */
  }

  /* Special Characters Modal */
  .special-chars-modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .special-chars-categories {
    flex-wrap: wrap;
    gap: 5px;
  }

  .special-chars-category {
    padding: 6px 12px;
    font-size: 12px;
  }

  .special-chars-grid {
    height: 180px;
  }

  .special-char-item {
    min-width: 28px;
    min-height: 28px;
    font-size: 16px;
  }

  /* Notice Boxes */
  .notice-box,
  .center-info-box {
    padding: 20px;
    min-height: auto;
  }

  .notice-title {
    font-size: 18px;
  }

  .center-phone-number {
    font-size: 24px;
  }

  /* Profile Page */
  .profile-header {
    flex-direction: column;
    text-align: center;
  }

  .profile-avatar {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  /* Error Page */
  .error-container {
    padding: 40px 20px;
  }

  .error-code {
    font-size: 80px;
  }

  .error-title {
    font-size: 24px;
  }

  .error-actions {
    flex-direction: column;
    align-items: center;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Header */
  .site-header .container {
    flex-direction: column;
    gap: 15px;
  }

  .nav-menu {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  /* Main Hero */
  .hero-title {
    font-size: 36px;
  }

  /* Price Comparison */
  .comparison-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* Send Page */
  .send-page-layout {
    flex-direction: column;
    gap: 30px;
  }

  .send-preview-area {
    width: 100%;
    order: -1;
  }

  .preview-sticky {
    position: static;
    top: auto;
  }

  /* Admin Stats */
  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tables */
  .member-table,
  .message-table {
    font-size: 13px;
  }

  /* Special Characters Modal */
  .special-chars-grid {
    height: 200px;
  }

  .special-char-item {
    min-width: 30px;
    min-height: 30px;
    font-size: 18px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Header */
  .nav-menu {
    gap: 20px;
  }

  /* Main Hero */
  .hero-title {
    font-size: 42px;
  }

  /* Price Comparison */
  .comparison-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  /* Send Page */
  .send-page-layout {
    gap: 40px;
  }

  .send-preview-area {
    width: 320px;
  }

  /* Admin Stats */
  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tables */
  .member-table,
  .message-table {
    font-size: 14px;
  }

  /* Special Characters Modal */
  .special-chars-modal-content {
    max-width: 700px;
  }

  .special-chars-grid {
    height: 220px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Price Comparison */
  .comparison-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }

  /* Send Page */
  .send-preview-area {
    width: 350px;
  }

  /* Admin Stats */
  .admin-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Container max-width */
  .container {
    max-width: 1200px;
  }

  /* Price Comparison */
  .comparison-grid {
    gap: 50px;
  }

  /* Send Page */
  .send-preview-area {
    width: 380px;
  }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  /* Hide non-essential elements */
  .site-header,
  .nav-menu,
  .cta-button,
  .btn,
  .special-chars-modal,
  .preview-sticky {
    display: none !important;
  }

  /* Adjust layout for print */
  .send-page-layout {
    flex-direction: column;
    gap: 20px;
  }

  .send-preview-area {
    width: 100%;
    order: -1;
  }

  .preview-sticky {
    position: static !important;
  }

  /* Improve readability */
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }

  /* Ensure proper page breaks */
  .send-step {
    page-break-inside: avoid;
    margin-bottom: 20px;
  }

  /* Table styles for print */
  .member-table,
  .message-table {
    border-collapse: collapse;
    width: 100%;
  }

  .member-table th,
  .member-table td,
  .message-table th,
  .message-table td {
    border: 1px solid #000;
    padding: 8px;
    text-align: left;
  }

  .member-table th,
  .message-table th {
    background: #f0f0f0 !important;
    font-weight: bold;
  }
}

/* ========================================
   High DPI Displays
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp images and icons */
  .logo-img,
  .feature-icon,
  .mail-icon svg,
  .center-phone-icon svg {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ========================================
   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;
  }

  /* Disable specific animations */
  .piggy-bank-icon,
  .price-card.competitor,
  .price-card.our-service {
    animation: none !important;
  }

  /* Disable hover effects */
  .cta-button:hover,
  .btn:hover,
  .feature-card:hover,
  .price-card:hover,
  .notice-item:hover,
  .sender-number-item:hover,
  .message-type-option:hover,
  .send-time-option:hover {
    transform: none !important;
  }
}

/* ========================================
   Dark Mode Support
   ======================================== */
@media (prefers-color-scheme: dark) {
  /* This is a placeholder for future dark mode implementation */
  /* Dark mode styles would be added here when needed */
}

/* ========================================
   Landscape Orientation
   ======================================== */
@media (orientation: landscape) and (max-height: 500px) {
  /* Adjust for short landscape screens */
  .main-hero {
    padding: 60px 0 40px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .login-page {
    padding: 10px;
  }

  .login-container {
    padding: 30px;
  }

  .special-chars-modal-content {
    max-height: 70vh;
  }

  .special-chars-grid {
    height: 150px;
  }
}

/* ========================================
   Touch Device Optimizations
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .btn,
  .cta-button,
  .btn-sender-manage,
  .btn-excel-download,
  .btn-add-contact,
  .btn-remove-contact,
  .btn-excel-upload,
  .btn-template,
  .btn-save-template,
  .btn-special-chars,
  .btn-clear-chars,
  .btn-complete-chars,
  .btn-confirm-time-input,
  .profile-btn,
  .error-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
  }

  /* Improve touch interactions */
  .sender-number-item,
  .message-type-option,
  .send-time-option,
  .contact-item,
  .notice-item {
    min-height: 44px;
  }

  /* Special characters grid for touch */
  .special-char-item {
    min-width: 44px;
    min-height: 44px;
    font-size: 18px;
  }

  /* Disable hover effects on touch devices */
  .cta-button:hover,
  .btn:hover,
  .feature-card:hover,
  .price-card:hover,
  .notice-item:hover,
  .sender-number-item:hover,
  .message-type-option:hover,
  .send-time-option:hover {
    transform: none;
  }
}

/* ========================================
   Focus Styles for Accessibility
   ======================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Focus styles for keyboard navigation */
  .btn:focus,
  .cta-button:focus,
  .btn-sender-manage:focus,
  .btn-excel-download:focus,
  .btn-add-contact:focus,
  .btn-remove-contact:focus,
  .btn-excel-upload:focus,
  .btn-template:focus,
  .btn-save-template:focus,
  .btn-special-chars:focus,
  .btn-clear-chars:focus,
  .btn-complete-chars:focus,
  .btn-confirm-time-input:focus,
  .profile-btn:focus,
  .error-btn:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
  }

  .sender-number-item:focus,
  .message-type-option:focus,
  .send-time-option:focus,
  .contact-item:focus,
  .notice-item:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
  }

  .special-char-item:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
  }
}

/* ========================================
   Container Queries (Future Support)
   ======================================== */
@container (max-width: 400px) {
  /* Styles for narrow containers */
  .send-step {
    padding: 15px;
  }

  .step-title {
    font-size: 1rem;
  }

  .preview-box {
    padding: 0 0 20px 0;
  }

  .preview-sender-row {
    padding: 15px 15px 0px 15px;
  }

  .preview-message-bubble {
    margin: 12px 15px 0 15px;
    padding: 12px;
  }
}

@container (min-width: 800px) {
  /* Styles for wide containers */
  .send-page-layout {
    gap: 60px;
  }

  .send-preview-area {
    width: 400px;
  }

  .preview-box {
    padding: 0 0 30px 0;
  }

  .preview-sender-row {
    padding: 20px 20px 0px 20px;
  }

  .preview-message-bubble {
    margin: 20px 20px 0 20px;
    padding: 20px;
  }
}

/* ========================================
   원격지원 페이지 반응형 스타일
   ======================================== */

@media (max-width: 768px) {
  .guide-remote-container {
    padding: 15px;
  }

  .guide-remote-header {
    padding: 30px 20px;
    margin-bottom: 30px;
  }

  .guide-remote-page-title {
    font-size: 28px;
  }

  .guide-remote-section {
    padding: 20px;
  }

  .guide-remote-section-title {
    font-size: 20px;
  }

  .guide-remote-download-box {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .guide-remote-download-info {
    flex-direction: column;
    gap: 15px;
  }

  .guide-remote-features {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .guide-remote-step {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .guide-remote-notice-item {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .guide-remote-notification {
    left: 20px;
    right: 20px;
    top: 20px;
  }
}

@media (max-width: 480px) {
  .guide-remote-page-title {
    font-size: 24px;
  }

  .guide-remote-section {
    padding: 15px;
  }

  .guide-remote-download-box {
    padding: 20px;
  }

  .guide-remote-download-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   세금계산서 페이지 반응형 스타일
   ======================================== */

@media (max-width: 768px) {
  .tax-receipt-form {
    padding: 20px;
    margin: 0 10px;
  }

  .page-header {
    padding: 30px 20px;
    margin: 0 10px 30px 10px;
  }

  .page-header h1 {
    font-size: 24px;
  }

  .tax-receipt-form-section {
    margin-bottom: 30px;
  }

  .tax-receipt-form-section h3 {
    font-size: 18px;
  }

  .tax-receipt-radio-option {
    padding: 15px;
  }

  .tax-receipt-form-actions {
    flex-direction: column;
  }

  .tax-receipt-form .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .tax-receipt-form {
    padding: 15px;
  }

  .page-header {
    padding: 20px 15px;
  }

  .page-header h1 {
    font-size: 20px;
  }

  .tax-receipt-radio-group {
    gap: 10px;
  }

  .tax-receipt-radio-option {
    padding: 12px;
  }
}

/* ========================================
   공지사항 편집 페이지 반응형 스타일
   ======================================== */

@media (max-width: 768px) {
  .notice-form-group {
    margin-bottom: 15px;
  }

  .notice-form-control {
    padding: 10px 12px;
    font-size: 14px;
  }

  .notice-event-date-wrapper {
    flex-direction: column;
    gap: 8px;
  }

  .notice-event-separator {
    display: none;
  }

  .notice-form-actions {
    flex-direction: column;
    gap: 10px;
  }

  .notice-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .notice-form-control {
    padding: 8px 10px;
    font-size: 13px;
  }

  .notice-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* ========================================
   간단한 가이드 페이지 반응형 스타일
   ======================================== */

@media (max-width: 768px) {
  .dummy-page {
    padding: 30px 15px;
  }

  .dummy-page h1 {
    font-size: 28px;
  }

  .dummy-page p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .dummy-page {
    padding: 20px 10px;
  }

  .dummy-page h1 {
    font-size: 24px;
  }

  .dummy-page p {
    font-size: 14px;
  }
}

/* ========================================
   공지사항 상세 페이지 반응형 스타일
   ======================================== */

@media (max-width: 768px) {
  .guide-notice-detail-container {
    padding: 15px;
  }

  .guide-notice-detail-title {
    font-size: 20px;
  }

  .guide-notice-detail-meta {
    flex-direction: column;
    gap: 10px;
  }

  .guide-notice-detail-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .guide-notice-back-btn,
  .guide-notice-share-btn {
    text-align: center;
  }

  .guide-notice-detail-header-row {
    flex-direction: column;
    gap: 12px;
  }

  .guide-notice-detail-admin-actions {
    justify-content: flex-start;
  }

  .guide-notice-edit-btn,
  .guide-notice-delete-btn {
    padding: 8px 12px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .guide-notice-detail-container {
    padding: 10px;
  }

  .guide-notice-detail-title {
    font-size: 18px;
  }

  .guide-notice-detail-admin-actions {
    flex-direction: column;
    gap: 6px;
  }

  .guide-notice-edit-btn,
  .guide-notice-delete-btn {
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* ========================================
   매크로 예시 반응형 스타일들
   ======================================== */

@media (max-width: 700px) {
  .macro-example-box {
    flex-direction: column;
    gap: 12px;
    padding: 12px 0 0 0;
  }

  .macro-example-col {
    width: 100%;
    min-width: 0;
  }

  .macro-example-bubble {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
    padding: 14px 10px;
  }

  .macro-example-arrow {
    min-width: 0;
    margin: 0;
  }
}

@media (max-width: 768px) {
  .preview-image-item img {
    max-height: 150px;
  }
}

/* ========================================
   Step-4 반응형 스타일들
   ======================================== */

@media (max-width: 768px) {
  .contact-input-methods {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contact-method-option {
    padding: 12px;
  }

  .contact-input-group {
    flex-direction: column;
    gap: 8px;
  }

  .contact-input-group input {
    width: 100%;
  }

  .btn-add-contact {
    width: 100%;
    justify-content: center;
  }

  .contact-table {
    font-size: 14px;
  }

  .contact-table th,
  .contact-table td {
    padding: 8px 6px;
  }

  .contact-manual-pagination {
    flex-wrap: wrap;
    gap: 6px;
  }

  .contact-manual-page-btn {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .addressbook-upload-box,
  .excel-upload-box {
    padding: 15px;
  }

  .addressbook-upload-placeholder span,
  .excel-upload-placeholder span {
    font-size: 14px;
  }

  .addressbook-upload-placeholder small,
  .excel-upload-placeholder small {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .contact-input-methods {
    gap: 8px;
  }

  .contact-method-option {
    padding: 10px;
  }

  .method-content strong {
    font-size: 14px;
  }

  .method-content small {
    font-size: 12px;
  }

  .contact-table {
    font-size: 13px;
  }

  .contact-table th,
  .contact-table td {
    padding: 6px 4px;
  }

  .contact-manual-page-btn {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .addressbook-upload-box,
  .excel-upload-box {
    padding: 12px;
  }

  .addressbook-upload-placeholder i,
  .excel-upload-placeholder i {
    font-size: 20px;
  }

  .addressbook-upload-placeholder span,
  .excel-upload-placeholder span {
    font-size: 13px;
  }

  .addressbook-upload-placeholder small,
  .excel-upload-placeholder small {
    font-size: 10px;
  }

  .excel-file-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .btn-remove-excel {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}

/* allAddressbooksModal 반응형 스타일 */
@media (max-width: 768px) {
  .all-addressbooks-modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .all-addressbooks-modal-header {
    flex-direction: column;
    gap: 15px;
  }

  .all-addressbooks-modal-search {
    width: 100%;
  }

  .all-addressbooks-modal-search input {
    width: 100%;
  }

  .all-addressbooks-grid {
    grid-template-columns: 1fr;
  }

  .all-addressbooks-modal-body {
    flex-direction: column;
    height: auto;
  }

  .all-addressbooks-left-panel {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
  }

  .all-addressbooks-right-panel {
    width: 100%;
  }

  .all-addressbook-group-item {
    padding: 10px;
  }

  .all-addressbook-group-icon {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }

  .all-addressbook-member-item {
    padding: 10px;
  }

  .all-addressbook-member-avatar {
    width: 35px;
    height: 35px;
    font-size: 12px;
  }

  .all-addressbook-member-actions {
    flex-direction: column;
    gap: 3px;
  }

  .btn-edit-member,
  .btn-delete-member {
    padding: 3px 6px;
    font-size: 10px;
  }

  .all-addressbooks-pagination {
    padding: 10px;
  }

  .all-addressbooks-pagination button {
    padding: 4px 8px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .all-addressbooks-modal-content {
    width: 98%;
    max-height: 95vh;
  }

  .all-addressbooks-modal-header {
    padding: 15px;
  }

  .all-addressbooks-modal-title {
    font-size: 16px;
  }

  .all-addressbooks-modal-close {
    width: 28px;
    height: 28px;
  }

  .all-addressbooks-groups-header,
  .all-addressbooks-members-header {
    padding: 15px;
  }

  .all-addressbooks-groups-title,
  .all-addressbooks-members-title {
    font-size: 14px;
  }

  .all-addressbook-group-item {
    padding: 8px;
  }

  .all-addressbook-group-icon {
    width: 30px;
    height: 30px;
    font-size: 12px;
    margin-right: 8px;
  }

  .all-addressbook-group-name {
    font-size: 13px;
  }

  .all-addressbook-group-count {
    font-size: 11px;
  }

  .btn-select-group {
    padding: 4px 8px;
    font-size: 11px;
  }

  .all-addressbook-member-item {
    padding: 8px;
  }

  .all-addressbook-member-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
    margin-right: 8px;
  }

  .all-addressbook-member-name {
    font-size: 13px;
  }

  .all-addressbook-member-phone {
    font-size: 14px;
  }

  .all-addressbook-member-email {
    font-size: 11px;
  }

  .btn-edit-member,
  .btn-delete-member {
    padding: 2px 4px;
    font-size: 9px;
  }

  .all-addressbooks-modal-footer {
    padding: 10px 15px;
  }

  .all-addressbooks-modal-info {
    font-size: 12px;
  }

  .btn-modal-cancel,
  .btn-modal-complete {
    padding: 6px 15px;
    font-size: 13px;
  }
}

/* 관리자 네비게이션 반응형 */
@media (max-width: 768px) {
  .admin-nav {
    padding: 8px;
    gap: 3px;
  }

  .admin-nav-item {
    min-width: 100px;
  }

  .admin-nav-item a {
    padding: 12px 8px;
  }

  .admin-nav-item i {
    font-size: 16px;
  }

  .admin-nav-item span {
    font-size: 11px;
  }
}

/* 이미지 업로드 반응형 스타일 */
@media (max-width: 768px) {
  .uploaded-image-item {
    width: 100px;
    height: 100px;
  }

  .image-list {
    gap: 8px;
  }

  .image-upload-box {
    padding: 15px;
  }
}

/* My Messages Modal 반응형 스타일 */
@media (max-width: 768px) {
  #myMessagesModal.all-addressbooks-modal {
    align-items: flex-start;
    padding: 20px;
  }

  #myMessagesModal .all-addressbooks-modal-content {
    width: 100%;
    height: 90vh;
    max-height: 600px;
  }

  #myMessagesModal .all-addressbooks-modal-header {
    padding: 15px 20px;
  }

  #myMessagesModal .all-addressbooks-modal-title {
    font-size: 16px;
  }

  #myMessagesModal .all-addressbooks-modal-close {
    font-size: 18px;
  }

  #myMessagesModal .all-addressbooks-modal-body {
    padding: 20px;
  }

  .my-messages-notice {
    font-size: 13px;
    padding: 8px;
  }

  .my-messages-pagination-container {
    padding-top: 15px;
  }

  .my-messages-pagination {
    gap: 6px;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  #myMessagesModal.all-addressbooks-modal {
    padding: 10px;
  }

  #myMessagesModal .all-addressbooks-modal-content {
    height: 95vh;
    max-height: 500px;
  }

  #myMessagesModal .all-addressbooks-modal-header {
    padding: 12px 15px;
  }

  #myMessagesModal .all-addressbooks-modal-title {
    font-size: 14px;
  }

  #myMessagesModal .all-addressbooks-modal-close {
    font-size: 16px;
  }

  #myMessagesModal .all-addressbooks-modal-body {
    padding: 15px;
  }

  .my-messages-notice {
    font-size: 12px;
    padding: 6px;
  }

  .my-messages-pagination-container {
    padding-top: 12px;
  }

  .my-messages-pagination {
    gap: 4px;
    margin-bottom: 8px;
  }
}

/* My Message Card 반응형 스타일 */
@media (max-width: 768px) {
  .my-message-card {
    padding: 16px;
  }

  .message-card-title {
    font-size: 15px;
  }

  .message-card-text {
    font-size: 13px;
  }

  .message-card-actions {
    gap: 6px;
  }

  .btn-message-action {
    padding: 5px 10px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .my-message-card {
    padding: 12px;
  }

  .message-card-title {
    font-size: 14px;
  }

  .message-card-text {
    font-size: 12px;
  }

  .message-card-meta {
    gap: 8px;
    font-size: 11px;
  }

  .message-card-actions {
    gap: 4px;
  }

  .btn-message-action {
    padding: 4px 8px;
    font-size: 10px;
  }

  .message-length-info {
    font-size: 10px;
  }
}

/* Reservation Settings 반응형 스타일 */
@media (max-width: 768px) {
  .reservation-settings {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .reservation-date,
  .reservation-time {
    width: 100%;
  }

  .time-input-group {
    flex-direction: column;
    gap: 8px;
  }

  .btn-confirm-time-input {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .reservation-settings {
    padding: 15px;
    gap: 12px;
  }

  .reservation-date input,
  .reservation-time input {
    padding: 8px 10px;
    font-size: 13px;
  }

  .reservation-date label,
  .reservation-time label {
    font-size: 13px;
  }

  .btn-confirm-time-input {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ========================================
   Template Responsive Styles
   ======================================== */

@media (max-width: 768px) {
  .template-grid {
    grid-template-columns: 1fr;
  }

  .template-search-form {
    flex-direction: column;
    gap: 15px;
  }

  .template-search-group {
    width: 100%;
  }

  .template-search-actions {
    justify-content: stretch;
  }

  .template-detail-header {
    flex-direction: column;
    gap: 20px;
  }

  .template-detail-content {
    grid-template-columns: 1fr;
  }

  .template-detail-actions {
    justify-content: center;
  }

  .template-categories-list {
    justify-content: center;
  }

  .storage-header {
    flex-direction: column;
    gap: 15px;
  }

  .search-section {
    max-width: none;
  }

  .filter-section {
    width: 100%;
    justify-content: space-between;
  }

  .filter-select {
    flex: 1;
  }

  .template-element-buttons {
    gap: 8px;
  }

  .template-element-btn {
    padding: 16px;
  }

  .template-element-btn i {
    font-size: 20px;
  }

  .template-canvas {
    padding: 20px;
  }

  .template-preview-phone-frame {
    height: 400px;
  }

  .template-preview-modal-content {
    width: 95%;
    margin: 10px;
  }

  .template-preview-modal-body {
    height: 400px;
  }

  .template-action-buttons {
    flex-direction: column;
    align-items: center;
  }

  .template-action-buttons .btn-send,
  .template-action-buttons .btn-clear,
  .template-action-buttons .btn-clear-all {
    width: 100%;
    max-width: 300px;
  }

  /* 모바일에서 드래그 안내 메시지 조정 */
  .drag-help-message {
    padding: 12px 16px;
    font-size: 13px;
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .drag-help-message i {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .template-element-buttons {
    gap: 6px;
  }

  .template-element-btn {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }

  .template-element-btn i {
    margin-bottom: 0;
    margin-right: 12px;
  }

  /* 작은 화면에서 드래그 안내 메시지 더 간단하게 */
  .drag-help-message {
    padding: 10px 12px;
    font-size: 12px;
  }

  .drag-help-message span {
    font-size: 11px;
  }
}

/* ========================================
   Apply Responsive Styles
   ======================================== */

@media (max-width: 768px) {
  .apply-form-row {
    grid-template-columns: 1fr;
  }

  .apply-progress-steps {
    flex-direction: column;
    gap: 20px;
  }

  .apply-progress-step:not(:last-child)::after {
    display: none;
  }

  .apply-actions {
    flex-direction: column;
  }

  .apply-file-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .apply-file-info {
    width: 100%;
  }
}

/* ========================================
   Charge Responsive Styles
   ======================================== */

@media (max-width: 768px) {
  .charge-methods-grid {
    grid-template-columns: 1fr;
  }

  .charge-amount-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .charge-payment-methods {
    grid-template-columns: 1fr;
  }

  .charge-form-row {
    grid-template-columns: 1fr;
  }

  .charge-actions {
    flex-direction: column;
  }

  .charge-balance-amount {
    font-size: 36px;
  }
}

/* ========================================
   Components Responsive Styles
   ======================================== */

@media (max-width: 600px) {
  .send-confirm-modal-box {
    padding: 24px 8px 16px 8px;
    max-width: 98vw;
  }

  #confirmMsgPreview {
    font-size: 0.98rem;
    padding: 10px;
  }

  .send-confirm-modal-box h3 {
    font-size: 1.15rem;
  }

  .send-confirm-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .confirm-card {
    padding: 16px;
  }

  .confirm-card-value {
    font-size: 1.2rem;
  }

  .my-messages-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
  }
}