/* --- 기본 스타일 및 레이아웃 --- */
:root {
    --primary-color: #4361ee;
    --primary-light: #738bfa;
    --primary-dark: #293b96;
    --secondary-color: #7209b7;
    --secondary-dark: #4a0280;
    --accent-color: #f72585;
    --light-color: #f8f9fa;
    --dark-color: #1e293b;
    --background-color: #f0f4f8;
    --card-background: #ffffff;
    --text-color: #334155;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --success-color: #10b981;
    --success-dark: #059669;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
    --info-dark: #2563eb;
    --error-color: #ef4444;
    --primary-hover : #0056b3;
    --secondary-hover : #6c2bd9;
    --accent-hover : #f55245;
    --success-hover : #10b981;
    --warning-hover : #f59e0b;
    --info-hover : #3b82f6;
    --error-hover : #ef4444;
  }
  body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
  }
  a { 
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.2s ease;
  }
  a:hover { 
    color: var(--primary-dark);
  }
  button {
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  button:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  }
  button:active {
    transform: translateY(0);
  }
  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* 모바일 환경에서 컨테이너 여백 최소화 */
  @media (max-width: 768px) {
    .container {
      width: 95%;
      padding: 0 10px;
    }
  }

  @media (max-width: 480px) {
    .container {
      width: 98%;
      padding: 0 8px;
    }
  }

  /* --- 헤더 --- */
  header {
    background: linear-gradient(135deg, var(--card-background) 0%, rgba(67, 97, 238, 0.02) 100%);
    backdrop-filter: blur(10px);
    color: var(--text-color);
    padding: 16px 0;
    box-shadow: 0 2px 20px rgba(67, 97, 238, 0.08), 0 1px 3px rgba(0,0,0,0.02);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(67, 97, 238, 0.08);
  }
  
  header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }
  
  header .logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  
  header h1 {
    margin: 0;
    font-size: 1.6em;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.5px;
  }
  
  header h1 a {
    color: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
  }
  
  header h1 a:hover {
    text-decoration: none;
    transform: translateY(-1px);
    filter: brightness(1.1);
  }
  
  header h1 .logo-image {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(67, 97, 238, 0.2);
    transition: all 0.3s ease;
  }
  
  header h1 a:hover .logo-image {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
  }
  
  header nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
    justify-content: center;
    max-width: 700px;
  }
  
  header .nav-item {
    position: relative;
    padding: 12px 8px 8px 8px;
    color: var(--text-color);
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 72px;
    text-align: center;
  }
  
  header .nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    border-radius: 10px;
    transition: opacity 0.3s ease;
    z-index: -1;
  }
  
  header .nav-item:hover {
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
  }
  
  header .nav-item:hover::before {
    opacity: 1;
  }
  
  header .nav-item.active {
    color: white;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 3px 10px rgba(67, 97, 238, 0.4);
  }
  
  header .nav-item.active::before {
    opacity: 0;
  }
  
  header .nav-item i {
    font-size: 1.3em;
    margin-bottom: 2px;
    display: block;
  }
  
  header .nav-item span {
    font-size: 0.75em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* max-width: 68px; */
    line-height: 1.2;
  }
  
  /* 사용자 액션 영역 */
  #user-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative; /* Popover positioning context */
  }

  /* 기존 auth-section 숨김 처리 (필요시) */
  /* #auth-section { display: none; } */

  /* --- User Menu Popover 스타일 --- */
  #user-menu {
      position: relative; /* Popover positioning context */
      display: none; /* 기본 숨김, 로그인 시 JS로 표시 */
  }

  #user-menu-trigger {
      background: rgba(67, 97, 238, 0.05);
      border: 1px solid rgba(67, 97, 238, 0.2);
      padding: 6px 10px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 2px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;
      max-width: 120px;
  }
  #user-menu-trigger:hover {
      background: rgba(67, 97, 238, 0.1);
      border-color: rgba(67, 97, 238, 0.3);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(67, 97, 238, 0.2);
  }
  #user-menu-trigger i {
      color: var(--primary-color);
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      /* 아이콘을 완전한 원형으로 만들기 위한 추가 스타일 */
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
      color: white !important;
      aspect-ratio: 1 / 1;
  }
  #user-menu-name {
      font-weight: 500;
      font-size: 0.85em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 80px;
  }

  #user-menu-popover {
      display: none; /* 기본 숨김 */
      position: absolute;
      top: calc(100% + 8px); /* 버튼 아래 간격 */
      right: 0;
      background-color: var(--card-background);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      z-index: 1010; /* 헤더보다 위에 */
      min-width: 180px;
      padding: 8px 0; /* 위아래 패딩 */
  }
  #user-menu-popover.active {
      display: block; /* 활성화 시 표시 */
  }

  .user-menu-popover-item {
      display: block;
      width: 100%;
      padding: 10px 16px;
      background: none;
      border: none;
      text-align: left;
      font-size: 0.95em;
      color: var(--text-color);
      cursor: pointer;
      transition: background-color 0.2s ease;
      white-space: nowrap;
  }
  .user-menu-popover-item:hover {
      background-color: rgba(67, 97, 238, 0.05);
      color: var(--primary-color);
      transform: none;
      box-shadow: none;
  }
  .user-menu-popover-item i {
      margin-right: 10px;
      width: 15px; /* 아이콘 너비 고정 */
      text-align: center;
      opacity: 0.7;
  }

  /* 구분선 */
  .user-menu-divider {
      height: 1px;
      background-color: var(--border-color);
      margin: 8px 0;
  }

  /* 로그아웃 버튼 색상 */
  #popover-logout-button {
      color: var(--danger-color);
  }
  #popover-logout-button:hover {
      background-color: rgba(239, 68, 68, 0.05);
      color: var(--danger-color);
  }

  /* 로그인 버튼 개선 */
  #login-button {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
  }
  #login-button:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
  }

  /* 로그인 드롭다운 스타일 */
  #login-dropdown {
    position: relative;
    display: inline-block;
  }

  .login-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
    cursor: pointer;
  }

  .login-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
  }

  .login-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    min-width: 200px;
    z-index: 1001;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    pointer-events: none;
    margin-top: 8px;
  }

  .login-dropdown-menu.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }

  .login-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin: 4px;
  }

  .login-dropdown-item:hover {
    background-color: var(--light-color);
    color: var(--primary-color);
    transform: translateX(4px);
  }

  .login-dropdown-item i {
    font-size: 1.1em;
    width: 20px;
    text-align: center;
  }

  .login-dropdown-item:first-child {
    margin-top: 8px;
  }

  .login-dropdown-item:last-child {
    margin-bottom: 8px;
  }

  /* 로그인 상태에 따른 표시 조정 */
  body.logged-in #login-button,
  body.logged-in #login-section {
    display: none;
  }
  body.logged-in #user-menu {
      display: block; /* 로그인 시 User Menu 표시 */
  }
  /* 기존 개별 요소 숨김 */
  body.logged-in #user-info,
  body.logged-in #logout-button,
  body.logged-in #language-modal-button {
      display: none !important; 
  }
  
  /* --- User Menu Popover 스타일 끝 --- */

  /* --- Admin Dashboard 스타일 --- */
  .admin-tab-btn.active {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
    background: rgba(67, 97, 238, 0.05);
  }
  
  .admin-tab-btn:hover {
    color: var(--primary-color);
    background: rgba(67, 97, 238, 0.05);
  }
  
  .admin-tab-panel {
    animation: fadeIn 0.3s ease-in-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .admin-stats-grid .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transition: all 0.3s ease;
  }
  
  .button.warning-button {
    background-color: var(--warning-color, #f59e0b);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .button.warning-button:hover {
    background-color: #d97706;
  }
  
  .button.info-button {
    background-color: var(--info-color, #3b82f6);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .button.info-button:hover {
    background-color: #2563eb;
  }
  
  .button.danger-button {
    background-color: var(--danger-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .button.danger-button:hover {
    background-color: #dc2626;
  }
  /* --- Admin Dashboard 스타일 끝 --- */

  /* Mobile Nav Toggle */
  #mobile-menu-toggle {
    display: none;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    color: white;
    font-size: 1.1em;
    box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
    transition: all 0.3s ease;
  }
  
  #mobile-menu-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
    background: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));
  }

  /* --- 메인 콘텐츠 --- */
  main {
    flex-grow: 1;
    padding: 40px 0;
  }

  /* 현재 언어 표시 영역 */
  #current-language-display {
    background-color: var(--card-background);
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.06);
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
  }
  #current-language-display .lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #current-language-display .lang-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9em;
  }
  #current-language-display .lang-value {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
  }
  #current-language-display .lang-icon {
    color: var(--accent-color);
    font-size: 1.1em;
  }
  
  /* 새로운 컨트롤 스타일 */
  #current-language-display .lang-control {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: #f9fafb;
    font-size: 0.9em;
    color: var(--text-color);
    font-family: inherit;
    transition: all 0.2s ease;
  }
  
  #current-language-display select.lang-control {
    min-width: 140px;
    cursor: pointer;
  }
  
  #current-language-display select.lang-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
  }
  
  /* TTS 속도 컨트롤 */
  .tts-speed-control {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  #tts-speed-slider {
    width: 100px;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  
  #tts-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
  }
  
  #tts-speed-slider::-webkit-slider-thumb:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
  }
  
  #tts-speed-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  
  .speed-value {
    font-weight: 600;
    color: var(--primary-color);
    background-color: rgba(67, 97, 238, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    min-width: 35px;
    text-align: center;
  }

  /* 검색 영역 */
  #search-area {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.06);
    margin-bottom: 30px;
    display: flex;
    gap: 15px;
    align-items: center;
  }
  #search-input {
    flex-grow: 1;
    padding: 14px 18px;
    font-size: 1.05em;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #f9fafb;
    font-family: inherit;
    color: var(--text-color);
    transition: all 0.2s ease;
    box-sizing: border-box;
  }
  #search-input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
    background-color: white;
  }
  #search-button {
    padding: 14px 25px;
    font-size: 1.05em;
    background-color: var(--primary-color);
    color: white;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(67, 97, 238, 0.2);
  }
  #search-button:hover {
    background-color: var(--primary-dark);
  }

  /* 결과 표시 영역 */
  #results-area {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.06);
    min-height: 200px;
    display: none;
  }
  #results-area h2 {
    margin-top: 0;
    color: var(--text-color);
    font-weight: 600;
    font-size: 1.5rem;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }
  
  /* 단어 카드 스타일 */
  .word-card {
    background-color: #f9fafb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  }
  .word-card .word-info {
    margin-bottom: 15px;
  }
  .word-card .phonetic {
    font-family: monospace;
    color: var(--accent-color);
    font-size: 1.1em;
    margin-bottom: 10px;
  }
  .word-card .result-meaning {
      font-size: 1.4em; /* H2 정도의 크기 */
      font-weight: 600; /* 약간 더 굵게 */
      color: var(--primary-color); /* 기존 meaning 스타일과 유사하게 */
      margin-bottom: 12px; /* 아래 간격 조정 */
  }
  .word-card .result-meaning strong {
      font-weight: 600; /* "Meaning:" 텍스트 굵기 유지 */
      color: var(--text-color); /* "Meaning:" 텍스트 색상 */
      margin-right: 8px;
  }
  .word-card .explanation {
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 15px;
    white-space: pre-line;
  }
  .word-card .example {
    background-color: rgba(67, 97, 238, 0.05);
    padding: 3px 15px;
    border-radius: 6px;
    margin-bottom: 3px;
    border-left: 3px solid var(--primary-color);
  }
  .word-card .example-sentence {
    font-style: italic;
    margin-bottom: 5px;
  }
  .word-card .example-meaning {
    color: var(--text-muted);
  }
  .word-card .word-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
    color: var(--text-muted);
    font-size: 0.9em;
    flex-wrap: wrap;
  }
  .word-card .word-meta-category {
      margin-right: 25px;
  }
  .word-card .word-meta-usage {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      margin-right: 25px;
  }
  .word-card .word-meta-usage strong {
      /* Usage 텍스트 스타일 (필요 시) */
  }
  .word-card .word-meta-id {
      margin-left: auto;
      white-space: nowrap;
  }
  .word-card .category {
    background-color: rgba(114, 9, 183, 0.1);
    color: var(--secondary-color);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.9em;
  }
  .word-card .usage-score {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .word-card .usage-score .fas.fa-star {
    color: var(--warning-color);
  }
  .word-card .usage-score .far.fa-star {
    color: var(--border-color);
  }
  .example-level-badge{
    font-size: 0.4em; 
    padding: 1px 6px; 
    border-radius: 5px; 
    background-color: #6c757d; 
    color: #fff; 
    display: inline-block;
  }


  /* 단어 목록 스타일 */
  .word-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
  }
  .word-option {
    background-color: #f9fafb;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
  }
  .word-option:hover {
    background-color: rgba(67, 97, 238, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }
  .word-option-title {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
    font-size: 1.1em;
  }
  .word-option-meaning {
    color: var(--text-muted);
    font-size: 0.95em;
  }
  
  /* 로딩 스피너 */
  .loading-spinner {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    color: var(--primary-color);
  }

  /* 스피너 애니메이션 */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* --- 푸터 --- */
  footer {
    background-color: var(--card-background);
    color: var(--text-muted);
    text-align: center;
    padding: 25px 0;
    font-size: 0.9em;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
  }
  footer p {
    margin: 5px 0;
  }
  footer .db-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* --- 로그인 상태별 표시 --- */
  #user-info, #logout-button, #current-language-display {
    display: none;
  }
  body.logged-in #user-info, body.logged-in #logout-button, body.logged-in #current-language-display {
    display: flex;
  }
  body.logged-in #login-button {
    display: none;
  }

  /* --- 모달 스타일 --- */
  .modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    padding: 20px 0; /* 상하 패딩을 줄임 */
  }
  .modal-content {
    background-color: var(--card-background);
    margin: auto;
    padding: 32px;
    border: none;
    width: 90%;
    max-width: 500px;
    max-height: calc(100vh - 120px); /* 디버그창 공간 확보 (상하 각각 60px 여백) */
    overflow-y: auto; /* 내용이 많을 때 스크롤 추가 */
    border-radius: 12px;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  }
  .close-button {
    color: var(--text-muted);
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .close-button:hover {
    color: var(--text-color);
  }
  .modal-content h2 {
    margin-top: 0;
    color: var(--text-color);
    font-size: 1.5rem;
    padding-bottom: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
  }
  .modal-content div {
    margin-bottom: 10px;
  }
  .modal-content label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color);
  }
  .modal-content select {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #f9fafb;
    font-family: inherit;
    font-size: 1em;
    color: var(--text-color);
    transition: all 0.2s ease;
  }
  .modal-content select:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
    background-color: white;
  }
  #modal-save-lang-settings {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 1.05em;
    margin-top: 25px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 8px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(67, 97, 238, 0.2);
  }
  .modal-content #modal-save-lang-settings:hover {
    background-color: var(--primary-dark);
  }

  /* 태블릿 크기에서 텍스트 축약 */
  @media (max-width: 1024px) {
    header nav {
      gap: 4px;
      max-width: 600px;
    }
    
    header .nav-item {
      min-width: 65px;
      padding: 10px 6px 6px 6px;
    }
    
    header .nav-item span {
      font-size: 0.7em;
      max-width: 60px;
    }
    
    header .nav-item i {
      font-size: 1.2em;
    }
  }

  /* 반응형 디자인 */
  @media (max-width: 920px) {
    header nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: linear-gradient(135deg, var(--card-background) 0%, rgba(67, 97, 238, 0.02) 100%);
      backdrop-filter: blur(15px);
      flex-direction: column;
      padding: 20px;
      box-shadow: 0 8px 25px rgba(67, 97, 238, 0.15), 0 4px 10px rgba(0,0,0,0.1);
      border-top: 1px solid rgba(67, 97, 238, 0.1);
      gap: 8px;
      z-index: 999;
    }
    
    header nav.active {
      display: flex;
      animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    header nav .nav-item {
      width: 100%;
      flex-direction: row;
      justify-content: flex-start;
      padding: 12px 16px;
      margin: 0;
      border-radius: 8px;
      min-width: auto;
      text-align: left;
      gap: 12px;
    }
    
    header nav .nav-item i {
      font-size: 1.1em;
      margin-bottom: 0;
    }
    
    header nav .nav-item span {
      font-size: 0.9em;
      max-width: none;
      overflow: visible;
      text-overflow: unset;
    }
    
    header nav .nav-item:hover {
      transform: translateX(4px);
      box-shadow: 0 2px 8px rgba(67, 97, 238, 0.2);
    }
    
    #mobile-menu-toggle {
      display: block;
    }
    #search-area {
      flex-direction: column;
    }
    #search-input, #search-button {
      width: 100%;
    }
  }

  /* 검색 영역 모바일 최적화 */
  @media (max-width: 768px) {
    #search-area {
      padding: 20px 15px;
      margin-bottom: 20px;
    }
    .search-guide {
      font-size: 0.9em !important;
      padding-left: 20px !important;
    }
  }

  @media (max-width: 480px) {
    #search-area {
      padding: 15px 10px;
      margin-bottom: 15px;
    }
    .search-guide {
      font-size: 0.95em !important;
      padding-left: 15px !important;
      margin-top: -15px !important;
    }
  }

  @media (max-width: 768px) {
    header {
      padding: 12px 0;
    }
    header .container {
      padding: 0 15px;
      gap: 15px;
    }
    header h1 {
      font-size: 1.4em;
    }
    header h1 .logo-image {
      width: 32px;
      height: 32px;
    }
    header nav {
      padding: 15px;
    }
    header nav .nav-item {
      padding: 14px 18px;
      font-size: 0.95em;
    }
  }

  @media (max-width: 640px) {
    header h1 {
      font-size: 1.2em;
    }
    header h1 .logo-image {
      width: 28px;
      height: 28px;
    }
    #user-actions {
      gap: 8px;
    }
    #mobile-menu-toggle {
      padding: 8px 10px;
      font-size: 1em;
    }
    #auth-section {
      gap: 8px;
    }
    #current-language-display {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  }

  @media (max-width: 480px) {
    header {
      padding: 10px 0;
    }
    header .container {
      padding: 0 12px;
      gap: 10px;
    }
    header h1 {
      font-size: 1.1em;
    }
    header h1 .logo-image {
      width: 26px;
      height: 26px;
    }
    header nav {
      padding: 12px;
    }
    header nav .nav-item {
      padding: 12px 16px;
      font-size: 0.9em;
    }
    #mobile-menu-toggle {
      padding: 8px;
      font-size: 0.9em;
    }
  }


  /* Related Word Button Styles */
  .related-words-container {
      display: flex;
      flex-wrap: wrap; /* 버튼이 많으면 다음 줄로 */
      gap: 8px; /* 버튼 사이 간격 */
      margin-top: 8px; /* 위 요소와의 간격 */
  }
  .related-word-button {
      padding: 4px 10px;
      font-size: 0.85em;
      background-color: var(--light-color);
      border: 1px solid var(--border-color);
      border-radius: 15px; /* 둥근 버튼 */
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex; /* 내부 요소 정렬 */
      align-items: center;
      gap: 4px;
      line-height: 1.4;
      white-space: nowrap; /* 줄바꿈 방지 */
  }
  .related-word-button:hover {
      background-color: rgba(67, 97, 238, 0.1);
      border-color: var(--primary-light);
      color: var(--primary-dark);
      transform: none; /* 기본 버튼 호버 효과 제거 */
      box-shadow: none;
  }
  .related-word-button .word {
      font-weight: 500;
      color: var(--primary-color);
  }
  .related-word-button .meaning {
      font-size: 0.9em;
      opacity: 0.8;
  }
  .error-parsing {
      color: var(--danger-color);
      font-style: italic;
      font-size: 0.9em;
  }

  /* Word Select Modal Specific Styles */
  .word-select-content {
    max-width: 600px; /* Adjust width as needed */
  }
  #word-select-list {
     max-height: 40vh; /* Limit height and enable scroll */
     overflow-y: auto;
     padding-right: 10px; /* For scrollbar */
     margin-top: 15px;
     margin-bottom: 15px;
     display: flex; /* Use flexbox for buttons */
     flex-direction: column; /* Stack buttons vertically */
     gap: 10px; /* Space between buttons */
  }
  .potential-word-button {
      width: 100%;
      padding: 12px 18px;
      text-align: left;
      background-color: var(--light-color);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      color: var(--text-color);
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 1em;
  }
  .potential-word-button:hover {
      background-color: rgba(67, 97, 238, 0.1);
      border-color: var(--primary-light);
      color: var(--primary-dark);
      transform: none; /* Override default button hover */
      box-shadow: none;
  }
  .potential-word-button .word {
      font-weight: 600;
      color: var(--primary-color);
  }
  .potential-word-button .meaning {
      font-size: 0.9em;
      color: var(--text-muted);
      margin-left: 8px;
  }
  .modal-footnote {
      font-size: 0.85em;
      color: var(--text-muted);
      text-align: center;
      margin-top: 20px;
  }

  /* --- My Dictionary View Styles --- */
  #my-dictionary-view h2 {
      margin-top: 0;
      color: var(--text-color);
      font-weight: 600;
      font-size: 1.8rem; /* 검색 결과보다 조금 더 크게 */
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 15px;
      margin-bottom: 25px;
  }

  /* Dictionary Filters */
  .dictionary-filters {
      font-size: 0.9em;
  }

  .dictionary-filters input[type="checkbox"],
  .dictionary-filters input[type="radio"] {
      margin-right: 4px !important;
      accent-color: var(--primary-color);
  }

  .dictionary-filters select {
      min-width: 100px;
  }

  /* 날짜별 섹션 헤더 */
  .date-section-header {
      position: relative;
      overflow: hidden;
  }

  .date-section-header::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 20px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1));
      pointer-events: none;
  }

  /* 반응형 필터 */
  @media (max-width: 768px) {
      .dictionary-filters {
          flex-direction: column;
          align-items: flex-start !important;
          gap: 10px !important;
          padding: 12px 8px;
          margin: 8px 0;
      }
      
      .dictionary-filters > * {
          width: 100%;
      }
      
      .dictionary-filters div {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
      }
  }

  @media (max-width: 480px) {
      .dictionary-filters {
          padding: 10px 4px;
          margin: 4px 0;
          gap: 8px !important;
      }
  }

  #my-dictionary-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
  }
  
  /* 날짜별 그룹화 시에는 그리드 레이아웃 해제 */
  #my-dictionary-list.date-grouped {
      display: block;
      gap: 0;
  }
  
  #my-dictionary-list.date-grouped .simple-word-card {
      display: inline-block;
      width: 20%;
      margin-right: 20px;
      margin-bottom: 15px;
      vertical-align: top;
  }
  
  /* 날짜 섹션 헤더는 항상 전체 너비 */
  #my-dictionary-list .date-section-header {
      display: block;
      width: 100%;
      grid-column: 1 / -1; /* 그리드 레이아웃에서 전체 너비 */
  }
  .simple-word-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative; /* 아이콘 위치 기준점 */
  }
  .simple-word-card:hover {
    background-color: rgba(67, 97, 238, 0.05);
  }
  .simple-word-card .dict-word {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 8px;
    display: block;
    word-break: break-all;
  }
  .simple-word-card .user-meaning {
    font-size: 1em;
    color: var(--text-muted);
    display: block;
    word-break: break-all;
    /* 1줄 제한 및 줄임표 처리 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .meaning-wrapper {
    display: block;
    position: relative;
    margin-top: 2px;
  }
  #my-dictionary-list .loading-message,
  #my-dictionary-list .empty-message {
      grid-column: 1 / -1; /* 그리드 전체 너비 차지 */
      text-align: center;
      color: var(--text-muted);
      margin-top: 30px;
      font-size: 1.1em;
  }
  /* --- Pagination Styles --- */
  .pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    padding: 20px 0;
    gap: 8px;
  }

  .pagination-button {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background-color: var(--card-background);
    color: var(--text-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    min-width: 40px;
    text-align: center;
    text-decoration: none;
  }

  .pagination-button:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
  }

  .pagination-button.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    font-weight: 600;
  }

  .pagination-button:disabled {
    background-color: var(--background-alt);
    color: var(--text-muted);
    border-color: var(--border-color);
    cursor: not-allowed;
    opacity: 0.6;
  }

  .pagination-button:disabled:hover {
    background-color: var(--background-alt);
    color: var(--text-muted);
    border-color: var(--border-color);
  }

  .pagination-info {
    margin: 0 15px;
    font-size: 0.9em;
    color: var(--text-muted);
    white-space: nowrap;
  }

  @media (max-width: 768px) {
    .pagination-container {
      flex-wrap: wrap;
      gap: 5px;
    }
    
    .pagination-button {
      padding: 6px 10px;
      font-size: 0.8em;
      min-width: 35px;
    }
    
    .pagination-info {
      margin: 5px 10px;
      font-size: 0.8em;
    }
  }
  /* --- Pagination Styles End --- */

  /* --- My Dictionary View Styles End --- */

  /* --- Word Detail Modal Styles --- */
  /* 기존 .modal-content 재사용 또는 커스텀 */
  .word-detail-content {
      max-width: 900px; /* 상세 내용 표시 위해 너비 증가 */
  }
  #word-detail-content-area {
      /* 내부 단어 카드 스타일은 기존 .word-card 재사용 */
      max-height: 70vh; /* 모달 높이 제한 및 스크롤 */
      overflow-y: auto;
      padding-right: 10px; /* 스크롤바 공간 */
  }
  #word-detail-content-area .word-card {
      box-shadow: none; /* 모달 내에서는 그림자 제거 */
      border: none;
      background-color: transparent;
      padding: 0;
      margin-bottom: 0;
  }
  /* --- Word Detail Modal Styles End --- */

  /* --- Sentence Result Styles --- */
  .sentence-container {
      background-color: #f9fafb;
      border-radius: 8px;
      padding: 25px;
      margin-bottom: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.03);
      border-left: 4px solid var(--secondary-color);
  }
  .sentence-container h5 {
      margin-top: 0;
      margin-bottom: 10px;
      color: var(--secondary-color);
      font-weight: 600;
      font-size: 1.1em;
  }
  .sentence-box {
      margin-bottom: 20px;
      padding: 15px;
      background-color: var(--card-background);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      line-height: 1.7;
      font-size: 1.05em;
  }
  .sentence-box.original {
      /* 원본 문장 스타일 (필요 시) */
  }
  .sentence-box.translated {
      /* 번역 문장 스타일 (필요 시) */
  }
  .clickable-word {
      position: relative; /* 툴팁 위치 기준 */
      cursor: pointer;
      text-decoration: none;
      background-color: rgba(114, 9, 183, 0.04);
      padding: 1px 4px;
      border-radius: 4px;
      transition: background-color 0.2s ease, color 0.2s ease;
      display: inline-block; /* Prevent breaking inside word */
      /* margin: 0 1px; Remove default margin */
  }
  .clickable-word:hover {
      background-color: var(--secondary-color);
      color: white;
  }

  /* --- 툴팁 스타일 추가 --- */
  .clickable-word::after {
      content: attr(data-meaning); /* data-meaning 속성 값을 내용으로 사용 */
      position: absolute;
      bottom: 125%; /* 단어 위쪽으로 약간 떨어지게 */
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--dark-color);
      color: var(--light-color);
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 0.85em;
      white-space: nowrap; /* 툴팁 내용 줄바꿈 방지 */
      z-index: 10; /* 다른 요소 위에 표시 */
      opacity: 0; /* 기본 숨김 */
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      pointer-events: none; /* 툴팁 자체가 마우스 이벤트 방해하지 않도록 */
  }

  /* 호버 시 툴팁 표시 (data-meaning 속성이 비어있지 않을 때만) */
  .clickable-word[data-meaning]:not([data-meaning=""]):hover::after {
      opacity: 1;
      visibility: visible;
  }
  /* --- 툴팁 스타일 끝 --- */

  /* Add style for the spacer span */
  .word-spacer {
      display: inline-block;
      width: 1em; /* Adjust width for desired wide space - Increased from 0.5em */
  }
  /* --- Sentence Result Styles End --- */

  /* --- My Dictionary 단어 가리기 마스크 --- */
  .dict-word-mask {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(120, 120, 120, 1);
    border-radius: 6px;
    z-index: 2;
    display: block;
    transition: opacity 0.2s;
    cursor: pointer;
  }
  .dict-word-mask.hide {
    opacity: 0;
    pointer-events: none;
  }
  .dict-word-mask-label {
    color: #fff;
    font-size: 0.95em;
    font-weight: 500;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    user-select: none;
  }
  .dict-word-mask + .dict-word { /* 마스크가 있을 때 단어 */
    position: relative;
  }

  /* --- My Dictionary 뜻 가리기 마스크 --- */
  .meaning-mask {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(120, 120, 120, 1);
    border-radius: 6px;
    z-index: 2;
    display: block;
    transition: opacity 0.2s;
    cursor: pointer;
  }
  .meaning-mask.hide {
    opacity: 0;
    pointer-events: none;
  }
  .meaning-mask-label {
    color: #fff;
    font-size: 0.95em;
    font-weight: 500;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    user-select: none;
  }
  .meaning-mask + .user-meaning {
    display: inline-block; /* For proper alignment */
  }

  /* --- Flashcard 스타일 --- */
  .flashcard-container {
      perspective: 1000px; /* 3D 효과를 위한 원근감 */
      margin-bottom: 20px;
  }

  .flashcard {
      width: 100%;
      max-width: 500px; /* 최대 너비 설정 */
      height: 250px; /* 높이 설정 */
      position: relative;
      margin: 0 auto; /* 가운데 정렬 */
      overflow: hidden; /* 추가: 내용이 넘칠 경우 가림 */
  }

  .flashcard-inner {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      transition: transform 0.6s;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      border-radius: 12px;
  }

  .flashcard.is-flipped .flashcard-inner, /* .is-flipped 클래스가 flashcard 요소에 적용될 때 */
  .flashcard-inner.is-flipped { /* 또는 flashcard-inner 요소에 직접 적용될 때 */
      transform: rotateY(180deg);
  }

  .flashcard-front,
  .flashcard-back {
      width: 90%;
      height: 80%;
      position: absolute;
      backface-visibility: hidden; /* 뒷면 숨김 */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* padding: 20px; */
      border-radius: 12px;
      background-color: var(--card-background);
      border: 1px solid var(--border-color);
      text-align: center;
      overflow-wrap: break-word;
      word-wrap: break-word;
      hyphens: auto;
  }

  .flashcard-back {
      transform: rotateY(180deg);
  }

  /* 카드 내부 컨텐츠 스타일 */
  .flashcard-front .word {
      font-size: 2.5em; /* 단어 크기 */
      font-weight: 600;
      color: var(--primary-color);
      margin-bottom: 15px;
  }
  .flashcard-front .tts-button,
  .flashcard-back .tts-button {
      margin-top: 15px;
      background-color: var(--light-color);
      color: var(--text-color);
      border: 1px solid var(--border-color);
  }
  .flashcard-back .meaning {
      font-size: 1.8em;
      font-weight: 500;
      margin-bottom: 15px;
  }
  .flashcard-back .example-sentence {
      font-size: 1.1em;
      color: var(--text-muted);
      margin-top: 10px;
      font-style: italic;
  }
  .flashcard-back .example-meaning {
      font-size: 1em;
      color: var(--secondary-color);
      margin-top: 5px;
  }
  /* --- End Flashcard 스타일 --- */

  /* --- "Words Used in Story" 카드 스타일 --- */
  .words-used-section {
      /* 이전 코드에서 사용된 스타일 유지 또는 조정 */
  }
  .words-used-section ul {
      list-style: none; /* 기본 리스트 스타일 제거 */
      padding: 0;
      margin: 0;
      display: grid; /* 그리드 레이아웃 사용 */
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 자동 열 조정 */
      gap: 10px; /* 카드 사이 간격 */
  }
  .word-used-card {
      background-color: var(--card-background); /* 흰색 배경 */
      padding: 10px 15px; /* 내부 여백 */
      border-radius: 6px; /* 둥근 모서리 */
      border: 1px solid var(--border-color); /* 테두리 */
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 약간의 그림자 */
      display: flex; /* Flexbox 레이아웃 */
      align-items: center; /* 수직 중앙 정렬 */
      justify-content: space-between; /* 양쪽 끝 정렬 */
      font-size: 0.95em; /* 텍스트 크기 */
      margin-bottom: 0; /* 그리드 gap으로 대체 */
      /* --- 수정: flex 관련 속성 제거 및 내부 요소 스타일 조정 --- */
      display: block; /* flex 대신 block 으로 변경 */
      text-align: center; /* 내부 텍스트 중앙 정렬 */
  }
  .word-used-card span.word-used-original {
      display: block; /* 블록 요소로 만들어 줄바꿈 적용 */
      font-weight: 500; /* 단어 굵게 */
      color: var(--primary-dark); /* 단어 색상 */
      margin-bottom: 4px; /* 의미와의 간격 */
      word-break: break-all; /* 단어가 길 경우 줄바꿈 */
  }
  .word-used-card span.word-used-meaning {
      color: var(--text-muted); /* 의미 색상 */
      font-size: 0.9em; /* 의미 텍스트 약간 작게 */
      word-break: break-all; /* 의미가 길 경우 줄바꿈 */
  }
  /* --- End "Words Used in Story" 카드 스타일 --- */

  /* --- 메인 컨텐츠 영역 --- */

  /* TTS 버튼 로딩 및 활성 상태 스타일 */
  .play-tts-btn.tts-loading i,
  .sentence-tts-btn.tts-loading i {
      /* JavaScript에서 아이콘을 스피너로 변경하므로, 여기서는 특별한 아이콘 스타일 불필요 */
  }

  .play-tts-btn.tts-loading,
  .sentence-tts-btn.tts-loading {
      opacity: 0.7;
      cursor: not-allowed;
  }

  /* TTS 버튼 클릭 시 (활성 상태) */
  .play-tts-btn:active,
  .sentence-tts-btn:active {
      transform: scale(0.95); /* 클릭 시 약간 작아지는 효과 */
      box-shadow: 0 1px 5px rgba(0,0,0,0.08); /* 그림자 약간 변경 */
  }

  /* --- 단어 카드 내 Memorized 아이콘 --- */
  .memorized-icon-list {
      position: absolute;
      top: 10px; /* 기존 8px에서 약간 조정 */
      right: 10px; /* 기존 8px에서 약간 조정 */
      font-size: 1.1em; /* 기존 1em에서 약간 조정 */
      cursor: pointer;
      z-index: 10; /* 다른 요소 위에 오도록 설정 */
      padding: 2px; /* 클릭 영역 약간 확보 */
  }

  .memorized-icon-list i { /* 아이콘 자체에 대한 스타일 (필요시) */
      display: block; /* 레이아웃 안정성 */
  }

  /* View Header Styles */
  .view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* 헤더와 내용 사이 간격 */
  }

  .view-header h2 {
    margin: 0; /* h2 태그의 기본 마진 제거 */

  }

  /* General Button Styles (If not already defined globally) */
  .button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }

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

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

  .secondary-button {
    background-color: var(--secondary-color);
    color: white;
  }

  .secondary-button:hover {
    background-color: var(--secondary-dark);
  }

  .warning-button {
    background-color: var(--warning-color);
    color: white;
  }

  .warning-button:hover {
    background-color: #e08900; /* warning-color-dark */
  }

  /* Empty Message Styles */
  .empty-message {
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
    font-style: italic;
  }

  .empty-message i {
    margin-right: 8px;
  }

  /* Article List Specific Styles (Placeholder) */
  #article-list-container {
    /* 추후 아티클 목록 스타일링 */
  }

  /* Add Article View Specific Styles (Placeholder) */
  #add-article-view {
    /* 추후 아티클 추가 폼 스타일링 */
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-background);
  }

  /* Styles for Add Article View */
  .add-article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
  }

  .add-article-header h3 {
    margin: 0;
    font-size: 1.6em;
    color: var(--text-color);
  }

  .add-article-layout {
    display: flex;
    gap: 20px; /* 컬럼 사이 간격 */
    margin-bottom: 20px;
  }

  .article-column {
    flex: 1; /* 양쪽 컬럼이 공간을 동일하게 차지 */
    display: flex;
    flex-direction: column;
    gap: 10px; /* 컬럼 내부 요소들 간격 */
  }

  /* textarea와 input 기본 스타일 */
  #add-article-view label {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.9em;
    margin-bottom: -2px; /* 간격 미세조정 */
  }

  #add-article-view textarea,
  #add-article-view input[type="text"] {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-family: inherit;
    font-size: 1em;
    background-color: #f9fafb;
    box-sizing: border-box; /* padding과 border가 width에 포함되도록 */
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  #add-article-view textarea:focus,
  #add-article-view input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    background-color: white;
  }

  #add-article-view textarea {
    min-height: 250px; /* 원본/번역 textarea 최소 높이 */
    resize: vertical; /* 수직 리사이즈만 허용 */
  }

  #add-article-view #article-content-translated {
    background-color: #f0f2f5; /* 읽기 전용 배경색 약간 다르게 */
    color: var(--text-muted);
  }

  .full-width-button {
    width: 100%;
    padding: 12px;
  }

  /* 단어 분석 영역 스타일 */
  .article-word-analysis-area-container {
    margin-bottom: 20px;
  }

  .article-word-analysis-area-container label {
    display: block; /* label을 블록 요소로 만듦 */
    margin-bottom: 8px; /* 아래쪽 간격 추가 */
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.9em;
  }

  #article-word-analysis-area {
    min-height: 100px;
    padding: 15px;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    background-color: #f9fafb;
  }

  #article-word-analysis-area.word-analysis-placeholder p {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    margin: 0;
    line-height: 70px; /* min-height에 맞춰 텍스트 중앙 정렬 (대략적) */
  }

  /* 아티클 저장 버튼 영역 */
  .add-article-actions {
    text-align: right; /* 버튼 오른쪽 정렬 */
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
  }

  .success-button {
    background-color: var(--success-color);
    color: white;
  }

  .success-button:hover {
    background-color: #059669; /* success-color-dark */
  }

  /* 반응형: 컬럼을 수직으로 쌓기 */
  @media (max-width: 768px) {
    .add-article-layout {
      flex-direction: column;
    }
  }

  /* --- My Articles List --- */
  .article-items-list {
    list-style-type: none;
    background-color: var(--card-background);
    padding: 24px 30px;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .article-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 12px;
    padding: 18px 16px;
    margin-bottom: 4px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .article-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .article-item:hover {
    background-color: rgba(67, 97, 238, 0.04);
    border-radius: 12px;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(67, 97, 238, 0.08);
    border-color: rgba(67, 97, 238, 0.2);
  }

  .article-item:active {
    transform: translateY(0);
    transition-duration: 0.1s;
  }

  .article-item-icon-container {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.1), rgba(118, 75, 162, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
    color: var(--primary-color);
    transition: all 0.3s ease;
  }

  .article-item:hover .article-item-icon-container {
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.15), rgba(118, 75, 162, 0.15));
    transform: scale(1.05);
  }

  .article-item-icon {
    opacity: 0.9;
  }

  .article-item-content {
    flex-grow: 1;
    min-width: 0; /* flex-grow와 함께 사용하여 텍스트 오버플로우 처리 */
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .article-item-title {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }

  .article-item-meta {
    margin: 4px 0 0 0;
    font-size: 0.85em;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
  }

  .article-item-date {
    font-size: 0.85em;
    color: var(--text-muted);
    margin: 0;
    margin-left: auto;
    white-space: nowrap;
    padding-left: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(100, 116, 139, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 500;
  }

  .article-item-date i {
    opacity: 0.7;
  }

  .article-item-title-container {
    margin-bottom: 4px;
  }
  
  .article-item-info-container {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  
  .article-item-language-info {
    font-size: 0.8em;
    color: var(--primary-color);
    font-style: normal;
    font-weight: 600;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(67, 97, 238, 0.1), rgba(118, 75, 162, 0.1));
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid rgba(67, 97, 238, 0.2);
    letter-spacing: 0.25px;
  }

  .article-item-preview {
    font-size: 0.9em;
    color: rgba(51, 65, 85, 0.8);
    line-height: 1.4;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    margin-top: 2px;
  }

  /* (옵션) 액션 버튼 영역 스타일 - 필요시 삭제 또는 주석 처리 */
  /*
  .article-item-actions {
    flex-shrink: 0;
  }
  */

  /* 모바일 반응형 개선 */
  @media (max-width: 768px) {
    .article-items-list {
      padding: 20px 15px;
    }
    
    .article-item {
      padding: 14px 12px;
      gap: 12px;
      border-radius: 10px;
    }
    
    .article-item-icon-container {
      width: 40px;
      height: 40px;
      font-size: 1.2em;
    }
    
    .article-item-title {
      font-size: 1.05em;
      font-weight: 600;
    }
    
    .article-item-date {
      font-size: 0.8em;
      padding: 3px 6px;
      padding-left: 10px;
    }
    
    .article-item-info-container {
      flex-direction: column;
      gap: 6px;
      align-items: flex-start;
    }
    
    .article-item-language-info {
      font-size: 0.75em;
      padding: 2px 6px;
    }
    
    .article-item-preview {
      font-size: 0.85em;
      -webkit-line-clamp: 2;
      margin-top: 4px;
    }
  }

  @media (max-width: 480px) {
    .article-items-list {
      padding: 16px 10px;
      border-radius: 8px;
    }
    
    .article-item {
      padding: 12px 8px;
      gap: 10px;
      border-radius: 8px;
    }
    
    .article-item-icon-container {
      width: 36px;
      height: 36px;
      font-size: 1.1em;
      border-radius: 8px;
    }
    
    .article-item-content {
      gap: 6px;
    }
    
    .article-item-title {
      font-size: 1em;
      line-height: 1.3;
    }
    
    .article-item-date {
      padding: 2px 4px;
      font-size: 0.75em;
      margin-left: 0;
      margin-top: 4px;
      align-self: flex-start;
    }
    
    .article-item-preview {
      font-size: 0.8em;
      line-height: 1.3;
    }
    
    .article-item:hover {
      transform: none;
      box-shadow: 0 2px 8px rgba(67, 97, 238, 0.1);
    }
  }

  /* 빈 상태 및 로딩 상태 스타일 개선 */
  .article-items-list .loading-message,
  .article-items-list .empty-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .article-items-list .loading-message i,
  .article-items-list .empty-message i {
    font-size: 2.5em;
    opacity: 0.6;
    margin-bottom: 8px;
  }

  .article-items-list .loading-message {
    background: linear-gradient(90deg, 
      rgba(67, 97, 238, 0.1) 0%, 
      rgba(67, 97, 238, 0.05) 50%, 
      rgba(67, 97, 238, 0.1) 100%);
    border-radius: 8px;
    animation: shimmer 2s infinite ease-in-out;
  }

  @keyframes shimmer {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
  }

  .article-items-list .empty-message {
    border: 2px dashed rgba(67, 97, 238, 0.2);
    border-radius: 12px;
    background-color: rgba(67, 97, 238, 0.02);
  }

  /* 검색 결과 없음 상태 */
  .no-results-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    background: rgba(67, 97, 238, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(67, 97, 238, 0.1);
  }

  .no-results-message i {
    font-size: 3em;
    opacity: 0.4;
    margin-bottom: 16px;
    display: block;
  }

  /* TTS 설정 모달 레이아웃 */
  .tts-settings-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
  }
  
  .tts-settings-col {
    flex: 1;
  }
  
  .tts-speed-slider {
    width: 100%;
    margin-top: 5px;
  }
  
  /* TTS 속도 슬라이더 스타일 */
  .tts-speed-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #ddd;
    outline: none;
    border-radius: 3px;
    transition: background 0.3s;
  }
  
  .tts-speed-slider:hover {
    background: #bbb;
  }
  
  .tts-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s;
  }
  
  .tts-speed-slider::-webkit-slider-thumb:hover {
    background: var(--primary-color-hover);
  }
  
  .tts-speed-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
    border: none;
    transition: background 0.3s;
  }
  
  .tts-speed-slider::-moz-range-thumb:hover {
    background: var(--primary-color-hover);
  }

  /* My Dictionary - Simple Word Card TTS Icon */
  .simple-card-tts-icon {
    /* 스타일은 JavaScript에서 직접 설정되었으므로, 여기서는 필요한 경우 오버라이드 또는 추가 조정 */
    /* 예: 호버 효과 등 */
    position: absolute;
    bottom: 10px;
    right: 10px;
    transition: opacity 0.2s ease-in-out;
  }

  .simple-card-tts-icon:hover {
    opacity: 0.7;
  }

  .simple-word-card {
    position: relative; /* 내부 absolute 요소(아이콘들)의 기준점 */
    /* 기존 simple-word-card 스타일 유지 */
  }

  /* --- Article Detail View Styles --- */
  #article-detail-view .view-header {
      margin-bottom: 25px;
      align-items: flex-start; /* <<< 버튼과 제목 상단 정렬로 변경 */
      gap: 15px;
  }

  /* 아티클 상세보기 버튼 컨테이너 */
  .article-detail-buttons-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 600px;
  }

  /* 버튼 행 */
  .button-row {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
  }

  /* 작은 버튼 크기 */
  .btn-xs {
      font-size: 0.75em !important;
      padding: 3px 8px !important;
      height: 28px !important;
      min-width: auto !important;
      white-space: nowrap;
  }

  /* <<< 아티클 상세 보기 제목 스타일 추가 시작 >>> */
  #article-detail-view .view-header h2#detail-article-title {
      font-size: 1.5em; /* 제목 크기 증가 */
      font-weight: 600; /* 제목 굵게 */
      color: var(--text-color);
      margin-right: auto;
  }
  /* <<< 아티클 상세 보기 제목 스타일 추가 끝 >>> */


  #detail-article-content-container {
      background-color: var(--card-background);
      border-radius: 13px;
      padding: 20px;
      box-shadow: 0 5px 8px rgba(0,0,0,0.05);
    }

  .article-sentence-item {
      /* border: 1px solid var(--border-color); */
      /* border-radius: 8px; */
      padding: 10px;
      position: relative; /* TTS 버튼 위치의 기준점 */
      border-bottom: 1px solid var(--border-color);
      display: flex; /* 드래그 핸들과 내용을 좌우로 배치 */
      align-items: flex-start; /* 상단 정렬 */
      gap: 0; /* 핸들과 내용 사이 간격 제거 (핸들 자체에 margin이 있음) */
      cursor: move; /* 드래그 가능함을 나타내는 커서 */
      user-select: none; /* 텍스트 선택 방지 */
      transition: all 0.2s ease; /* 호버 효과를 위한 전환 */
  }

  .article-sentence-item:hover {
      background-color: rgba(67, 97, 238, 0.02); /* 약간의 호버 효과 */
  }

  .sentence-texts-container {
      display: flex;
      justify-content: space-between;
      /* margin-bottom: 15px;
      padding-bottom: 15px; */
      border-bottom: 1px solid var(--border-light);
      flex: 1; /* 나머지 공간을 모두 차지 */
      user-select: text; /* 텍스트 선택 허용 */
      cursor: text !important; /* 텍스트 커서 (우선순위 높임) */
  }

  /* 텍스트 영역 호버 시 드래그 커서 제거 */
  .sentence-texts-container:hover {
      cursor: text !important;
  }

  .sentence-left-content {
      flex-basis: 60%; /* 좌측 60% 차지 */
      padding-right: 2%; /* 우측 간격 */
      display: flex;
      flex-direction: column;
  }

  .sentence-right-content {
      flex-basis: 38%; /* 우측 38% 차지 (60% + 2% 간격 = 62%, 남은 공간 38%) */
      display: flex;
      flex-direction: column;
  }

  .sentence-original-text {
      flex-basis: 59%; /* 좌측 65%에서 약간의 간격을 둠 */
      padding-right: 1%; /* 간격 */
      font-size: 1.65em; /* 1.1em * 1.5 = 1.65em */
      font-weight: 600;  /* 굵은 글씨체 */
      line-height: 2em;
      color: var(--text-color);
      margin-bottom: 0.5em;
  }

  .sentence-translated-text {
      flex-basis: 39%; /* 우측 35%에서 약간의 간격을 둠 */
      padding-left: 1%; /* 간격 */
      border-left: 1px solid var(--border-light);
      font-size: 1em;
      line-height: 1.6;
      color: var(--text-secondary);
      display: flex; /* 내부 요소(단어 배지) 정렬을 위해 flex로 변경 */
      flex-direction: column; /* 내부 요소를 세로로 쌓음 */
  }

  .sentence-analyzed-words {
      /* margin-top: 10px; */ /* 상단 마진 제거 또는 조정 */ 
      display: flex;
      flex-wrap: wrap;
      gap: 8px; /* 배지 간 간격 약간 줄임 */
      margin-top: 10px; /* 번역된 텍스트와 배지 사이 간격 추가 */
      /* width: 100%; */ /* translated-text 영역을 모두 차지하도록 설정 (필요시) */
  }

  .word-badge-item {
      display: inline-block;
      padding: 1px 2px; /* 패딩 약간 줄임 */
      background-color: var(--background-alt);
      border: 1px solid var(--border-color);
      border-radius: 3px; /* 반지름 약간 줄임 */
      font-size: 0.3em; /* 0.85em * 0.5 = 0.425em */
      cursor: default; 
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      text-align: center;
  }

  .word-badge-original {
      display: block;
      color: var(--text-color);
      font-weight: 500;
      margin-bottom: 0px;
  }

  .word-badge-target {
      display: block;
      color: var(--text-secondary);
      font-size: 0.9em; /* 번역된 단어는 약간 작게 */
  }

  /* 반응형 조정 (필요시) */
  @media (max-width: 768px) {
      .sentence-texts-container {
          flex-direction: column;
      }
      .sentence-left-content,
      .sentence-right-content {
          flex-basis: auto;
          width: 100%;
          padding-right: 0;
          padding-left: 0;
      }
      .sentence-right-content {
          border-left: none;
          border-top: 1px solid var(--border-light);
          padding-top: 15px;
          margin-top: 15px;
      }
      .sentence-original-text,
      .sentence-translated-text {
          flex-basis: auto;
          width: 100%;
          padding-right: 0;
          padding-left: 0;
      }
      .sentence-translated-text {
          border-left: none;
          border-top: 1px solid var(--border-light);
          padding-top: 15px;
          margin-top: 15px;
          /* display: block; */ /* 반응형에서는 다시 block으로 (필요시) */
      }
      /* 반응형에서 analyzed_words 위치 조정 (필요시) */
      .sentence-analyzed-words {
          /* margin-top: 10px; */ /* 이미 위에서 설정됨, 필요시 여기서 오버라이드 */
      }
  }

  /* 아이콘 전용 버튼 스타일 (기존 버튼 스타일 확장 또는 신규 정의) */
  .button-icon-only {
      padding: 6px; /* 패딩 약간 증가 */
      width: 24px;  /* 너비 증가 */
      height: 24px; /* 높이 증가 */
      font-size: 12px; /* 아이콘 크기 증가 */
      border-radius: 50%; /* 원형 버튼 */
      background-color: var(--light-color);
      color: var(--text-muted);
      border: 1px solid var(--border-color);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1; /* 아이콘 수직 정렬 도움 */
  }

  .button-icon-only:hover {
      background-color: var(--border-color);
      color: var(--primary-color);
  }

  .button-icon-only i {
      margin: 0; /* 아이콘 전용이므로 아이콘 주변 마진 제거 */
  }

  .sentence-tts-btn {
      /* position 관련 스타일 제거 */
      z-index: 5;
  }

  /* --- 문장 수정 버튼 스타일 수정 --- */
  .sentence-edit-btn {
      /* position absolute 관련 스타일 제거 */
      z-index: 5;
      /* button-icon-only 클래스의 다른 스타일은 그대로 상속받음 */
  }
  /* --- 문장 수정 버튼 스타일 수정 끝 --- */

  /* Danger Button 스타일 (기존에 없다면 추가, 있다면 수정) */
  .button.danger-button {
      background-color: var(--danger-color, #dc3545); /* 기본값으로 Bootstrap의 danger 색상 사용 */
      color: white;
      border-color: var(--danger-color, #dc3545);
  }

  .button.danger-button:hover {
      background-color: var(--danger-dark-color, #c82333); /* 호버 시 약간 어둡게 */
      border-color: var(--danger-dark-color, #bd2130);
  }

  .button.danger-button:disabled {
      background-color: var(--danger-light-color, #f8d7da);
      border-color: var(--danger-light-color, #f5c6cb);
      color: var(--danger-dark-color, #721c24);
  }

  /* --- Sentence Edit Modal Styles --- */
  .sentence-edit-modal-content {
      max-width: 650px; /* 모달 너비 조정 */
  }

  .sentence-edit-modal-content textarea {
      width: 100%;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      font-family: inherit;
      font-size: 1em;
      background-color: #f9fafb;
      box-sizing: border-box;
      transition: border-color 0.2s, box-shadow 0.2s;
      margin-bottom: 15px; /* 텍스트 영역 사이 간격 */
  }

  .sentence-edit-modal-content textarea:focus {
      outline: none;
      border-color: var(--primary-light);
      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
      background-color: white;
  }

  .sentence-edit-modal-content .modal-actions button {
      /* 버튼 스타일은 기존 .button, .primary-button, .danger-button 등을 활용 */
      /* 추가적인 스타일이 필요하면 여기에 정의 */
  }
  /* --- Sentence Edit Modal Styles End --- */

  /* 일반 버튼 비활성화 스타일 */
  .button:disabled, 
  button:disabled {
      background-color: var(--disabled-bg-color, #e9ecef);
      color: var(--disabled-text-color, #6c757d);
      border-color: var(--disabled-border-color, #ced4da);
      cursor: not-allowed;
      opacity: 0.7;
  }

  /* Primary Button 비활성화 시 (기본값보다 우선 적용) */
  .button.primary-button:disabled {
      background-color: var(--primary-disabled-bg-color, #a0c4ff); /* 조금 더 밝은 파란색 계열 */
      color: var(--primary-disabled-text-color, #406aa6);
      border-color: var(--primary-disabled-border-color, #8ab4f8);
  }

  /* 번역 중인 버튼 (Save Changes 버튼) 스타일 */
  .button.primary-button.button-translating:disabled {
      background-color: var(--translating-bg-color, #ffe0b2); /* 주황색 계열 */
      color: var(--translating-text-color, #8d5a00);
      border-color: var(--translating-border-color, #ffcc80);
      /* opacity: 0.8; /* 약간의 투명도 추가 가능 */
  }

  /* 드래그 핸들 스타일 */
  .sentence-drag-handle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px; /* 클릭 영역 확대 */
      height: 28px;
      color: var(--text-muted);
      cursor: grab;
      font-size: 16px; /* 아이콘 크기 약간 증가 */
      opacity: 0.6;
      transition: opacity 0.2s ease, background-color 0.2s ease;
      flex-shrink: 0;
      border-radius: 50%; /* 다른 버튼들과 일관성 */
      background-color: var(--light-color);
      border: 1px solid var(--border-color);
      user-select: none; /* 텍스트 선택 방지 */
  }

  .sentence-drag-handle:hover {
      opacity: 1;
      color: var(--primary-color);
      background-color: var(--border-color);
  }

  .sentence-drag-handle:active {
      cursor: grabbing;
      background-color: var(--primary-light);
      color: white;
  }

  /* 드래그 중인 문장 스타일 */
  .article-sentence-item.dragging {
      opacity: 0.5;
      transform: scale(0.95);
      border: 2px dashed var(--primary-color);
      background-color: var(--primary-light);
  }

  /* 드롭 가능한 영역 스타일 */
  .article-sentence-item.drag-over {
      border-top: 3px solid var(--primary-color);
      margin-top: 3px;
  }

  .article-sentence-item.drag-over-bottom {
      border-bottom: 3px solid var(--primary-color);
      margin-bottom: 3px;
  }

  /* 아이콘 컨테이너 스타일 */
  .sentence-icon-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px; /* 아이콘들 사이 간격 */
      margin-right: 10px;
      flex-shrink: 0;
      padding: 5px 0; /* 상하 패딩 추가 */
      pointer-events: auto; /* 아이콘들은 클릭 가능하도록 */
  }

  /* 드래그 핸들을 컨테이너 안에서 조정 */
  .sentence-icon-container .sentence-drag-handle {
      margin-right: 0; /* 컨테이너에서 관리하므로 개별 마진 제거 */
      width: 24px;
      height: 24px;
      font-size:14px;
      cursor: grab; /* 드래그 핸들은 grab 커서 유지 */
  }

  /* TTS 및 수정 버튼을 컨테이너 안에서 조정 */
  .sentence-icon-container .sentence-tts-btn,
  .sentence-icon-container .sentence-edit-btn {
      position: static; /* absolute position 제거 */
      margin: 0; /* 기존 마진 제거 */
      width: 24px;
      height: 24px;
      cursor: pointer; /* 버튼들은 포인터 커서 */
  }

  /* Article Title Container - 제목과 문체 스타일 선택 */
  .article-title-container {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
  }

  .article-title-container > div {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .article-title-container label {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.9em;
    margin-bottom: 8px;
  }

  .article-title-container input,
  .article-title-container select {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-family: inherit;
    font-size: 1em;
    background-color: #f9fafb;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .article-title-container input:focus,
  .article-title-container select:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    background-color: white;
  }

  /* Writing Style Select 특화 스타일 */
  #writing-style {
    cursor: pointer;
  }

  #writing-style option {
    padding: 8px;
    background-color: white;
    color: var(--text-color);
  }

  /* 반응형: 작은 화면에서 세로로 쌓기 */
  @media (max-width: 768px) {
    .article-title-container {
      flex-direction: column;
      gap: 10px;
    }
  }

  .article-item-language-info {
    font-size: 0.5em;
    color: #888;
    font-weight: normal;
    margin-left: 10px;
  }

  /* Toast 메시지 스타일 */
  .toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--success-color);
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    font-size: 0.9em;
    max-width: 300px;
    word-wrap: break-word;
  }

  .toast.show {
    opacity: 1;
    transform: translateX(0);
  }

  .toast.error {
    background-color: var(--danger-color);
  }

  .toast.warning {
    background-color: var(--warning-color);
  }

  .toast.info {
    background-color: var(--primary-color);
  }

  .toast i {
    margin-right: 8px;
  }

  /* 빠른 AI 번역 영역 스타일 */
  #quick-translate-area {
      background-color: var(--card-background);
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.06);
      margin-bottom: 30px;
      transition: box-shadow 0.2s ease;
  }

  #quick-translate-area:hover {
      box-shadow: 0 6px 25px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.08);
  }

  #quick-translate-area h3 {
      margin-top: 0;
      margin-bottom: 20px;
      color: var(--text-color);
      font-weight: 600;
      font-size: 1.5rem;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border-color);
  }

  #translate-container {
      display: flex;
      gap: 15px;
      margin-bottom: 15px;
  }

  #quick-translate-input {
      padding: 14px 18px;
      font-size: 1.05em;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background-color: #f9fafb;
      font-family: inherit;
      color: var(--text-color);
      transition: all 0.2s ease;
  }

  #quick-translate-input:focus {
      outline: none;
      border-color: var(--primary-light);
      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
      background-color: white;
  }

  #quick-translate-result {
      padding: 14px 18px;
      font-size: 1.05em;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background-color: #f9fafb;
      font-family: inherit;
      color: var(--text-color);
      transition: border-color 0.2s ease;
      min-height: 50px;
  }



  #quick-translate-result.has-content {
      border-color: var(--success-color);
      color: var(--text-color);
  }



  /* 빠른 번역 버튼 스타일 */
  #quick-translate-btn:hover {
      background: var(--primary-dark);
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  #quick-translate-clear-btn:hover {
      background: var(--secondary-dark);
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  #quick-translate-copy-btn:hover {
      background: var(--success-dark);
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  #quick-translate-tts-btn:hover {
      background: var(--info-dark);
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  /* 반응형 디자인 */
  @media (max-width: 768px) {
      #translate-container {
          flex-direction: column;
          gap: 20px;
      }
      
      #quick-translate-area {
          padding: 15px 10px;
      }
      
      #quick-translate-input {
          height: 100px;
      }
      
      #quick-translate-result {
          height: 100px;
      }
      

  }

  @media (max-width: 480px) {
      #quick-translate-area {
          padding: 12px 8px;
      }
      
      #quick-translate-area h3 {
          font-size: 1em;
      }
      
      #quick-translate-btn,
      #quick-translate-clear-btn,
      #quick-translate-copy-btn,
      #quick-translate-tts-btn {
          padding: 6px 12px;
          font-size: 13px;
      }
  }

  /* --- My Grammar View Styles --- */
  
  /* 문법 설명 전체 컨테이너 */
  .grammar-sections {
    background-color: var(--card-background);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.06);
  }
  
  /* 개별 문법 섹션 */
  .grammar-section {
    padding: 20px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6); /* 연한 구분선 */
    margin-bottom: 0;
  }
  
  /* 마지막 섹션은 하단 테두리 제거 */
  .grammar-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  /* 첫 번째 섹션은 상단 패딩 제거 */
  .grammar-section:first-child {
    padding-top: 0;
  }
  
  /* 섹션 제목 스타일 */
  .grammar-section .section-title {
    display: flex;
    align-items: center;
    margin: 0 0 15px 0;
    color: var(--primary-color);
    font-size: 1.3em;
    font-weight: 600;
  }
  
  /* 섹션 번호 원형 배지 */
  .grammar-section .section-number {
    background: var(--primary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-weight: bold;
    font-size: 0.9em;
  }
  
  /* 섹션 내용 스타일 */
  .grammar-section .section-content {
    line-height: 1.6;
    color: var(--text-color);
  }
  
  /* 예시 섹션 특별 스타일 */
  .grammar-section.examples-section .examples-content {
    background: #f8fafc;
    padding: 20px;
    border-radius: 6px;
    border-left: 4px solid var(--info-color);
  }
  
  .grammar-section.examples-section .example-item {
    margin-bottom: 15px;
    padding: 12px;
    background: white;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
  }
  
  .grammar-section.examples-section .example-item:last-child {
    margin-bottom: 0;
  }
  
  .grammar-section.examples-section .example-number {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
    font-size: 0.9em;
  }
  
  .grammar-section.examples-section .example-original {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
    font-size: 1.05em;
  }
  
  .grammar-section.examples-section .example-translation {
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 8px;
  }
  
  .grammar-section.examples-section .example-explanation {
    color: var(--text-color);
    font-size: 0.95em;
    line-height: 1.5;
  }

  button.grammar-element-option{
    display: block !important;
  }
  /* --- My Grammar View Styles End --- */

  /* === My Dictionary 스타일 === */
  #my-dictionary-view h2 {
      color: var(--text-color);
      margin-bottom: 20px;
      font-size: 1.8em;
  }

  /* Dictionary 검색창 스타일 */
  #dict-search-input {
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  #dict-search-input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  }

  #dict-search-clear {
      transition: color 0.2s ease, background-color 0.2s ease;
  }

  #dict-search-clear:hover {
      color: var(--danger-color);
      background-color: rgba(231, 76, 60, 0.1);
  }

  /* Dictionary 필터 컨테이너 반응형 */
  .dictionary-filters {
      flex-wrap: wrap;
  }

  @media (max-width: 768px) {
      .dictionary-filters {
          gap: 10px !important;
          padding: 12px !important;
      }
      
      .dictionary-filters label {
          font-size: 0.85em;
          flex-direction: column;
          align-items: flex-start !important;
          gap: 4px !important;
      }
      
      #dict-search-input {
          min-width: 140px !important;
          font-size: 0.85em !important;
      }
  }

  /* --- Toast 메시지 스타일 --- */
  .toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    color: #1f2937;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-left: 4px solid var(--primary-color);
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10000;
    max-width: 350px;
    font-weight: 500;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .toast.show {
    transform: translateX(0);
    opacity: 1;
  }
  
  .toast.success {
    border-left-color: var(--success-color);
  }
  
  .toast.error {
    border-left-color: var(--danger-color);
    background: #fef2f2;
    color: #dc2626;
  }
  
  .toast.warning {
    border-left-color: var(--warning-color, #f59e0b);
    background: #fffbeb;
    color: #d97706;
  }
  
  .toast.info {
    border-left-color: var(--info-color, #3b82f6);
    background: #eff6ff;
    color: #1d4ed8;
  }
  
  .toast i {
    font-size: 1.1em;
    opacity: 0.8;
  }
  /* --- Toast 메시지 스타일 끝 --- */

  /* ========================================
     Admin Dashboard Styles
     ======================================== */

  /* Admin Tab Buttons */
  .admin-tab-btn:hover {
      background-color: #f8f9fa !important;
      border-bottom-color: var(--primary-color) !important;
  }

  .admin-tab-btn.active {
      background-color: var(--primary-color) !important;
      color: white !important;
      border-bottom-color: var(--primary-color) !important;
  }

  .admin-tab-btn.active:hover {
      background-color: var(--primary-color) !important;
  }

  /* Admin Tab Panels */
  .admin-tab-panel {
      animation: fadeIn 0.3s ease-in-out;
  }

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

  /* Button Styles */
  .button {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.2s ease;
      box-sizing: border-box;
  }

  .button.small {
      padding: 6px 12px;
      font-size: 12px;
  }

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

  .button.primary-button:hover {
      background: #0056b3;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  }

  .button.secondary-button {
      background: var(--secondary-color);
      color: white;
  }

  .button.secondary-button:hover {
      background: var(--secondary-hover);
      transform: translateY(-1px);
  }

  .button.danger-button {
      background: var(--danger-color);
      color: white;
  }

  .button.danger-button:hover {
      background: #c82333;
      transform: translateY(-1px);
  }

  .button.warning-button {
      background: var(--warning-color);
      color: white;
  }

  .button.warning-button:hover {
      background: #e0a800;
      transform: translateY(-1px);
  }

  .button.info-button {
      background: var(--info-color);
      color: white;
  }

  .button.info-button:hover {
      background: #138496;
      transform: translateY(-1px);
  }

  .button.success-button {
      background: var(--success-color);
      color: white;
  }

  .button.success-button:hover {
      background: #218838;
      transform: translateY(-1px);
  }

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

  /* Status Badge */
  .status-badge {
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 0.8em;
      font-weight: 500;
      text-transform: capitalize;
  }

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

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

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

  /* Toast Messages */
  .toast {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 10000;
      background: white;
      padding: 15px 20px;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
      border-left: 4px solid var(--primary-color);
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 400px;
      transform: translateX(500px);
      opacity: 0;
      transition: all 0.3s ease;
  }

  .toast.show {
      transform: translateX(0);
      opacity: 1;
  }

  .toast.success {
      border-left-color: var(--success-color);
  }

  .toast.error {
      border-left-color: var(--danger-color);
  }

  .toast.warning {
      border-left-color: var(--warning-color);
  }

  .toast.info {
      border-left-color: var(--info-color);
  }

  .toast i {
      font-size: 1.2em;
  }

  .toast.success i {
      color: var(--success-color);
  }

  .toast.error i {
      color: var(--danger-color);
  }

  .toast.warning i {
      color: var(--warning-color);
  }

  .toast.info i {
      color: var(--info-color);
  }

  /* Admin Table Styles */
  .admin-tab-panel table {
      border-collapse: collapse;
      width: 100%;
  }

  .admin-tab-panel table th,
  .admin-tab-panel table td {
      text-align: left;
      padding: 12px;
      border-bottom: 1px solid var(--border-color);
  }

  .admin-tab-panel table tbody tr:hover {
      background-color: #f8f9fa;
  }

  /* Pagination Styles */
  .admin-tab-panel .button.small {
      margin: 0 2px;
      min-width: 32px;
      justify-content: center;
  }

  /* Settings Styles */
  .settings-group {
      background: white;
      padding: 20px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin-bottom: 20px;
  }

  .settings-group h3,
  .settings-group h4 {
      margin-top: 0;
      color: var(--primary-color);
  }

  .settings-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: 500;
      color: var(--text-color);
  }

  .settings-group input,
  .settings-group select {
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-family: inherit;
      font-size: 14px;
  }

  .settings-group input[type="checkbox"] {
      margin-right: 8px;
      width: auto;
      padding: 0;
  }

  .settings-actions {
      margin-top: 20px;
      padding-top: 15px;
      border-top: 1px solid var(--border-color);
      text-align: right;
  }

  /* Log Styles */
  .log-entry {
      margin-bottom: 8px;
      padding: 8px 12px;
      background: #2d3748;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
      font-size: 0.85em;
      line-height: 1.4;
  }

  .log-timestamp {
      color: #a0aec0;
      margin-right: 10px;
  }

  .log-level {
      font-weight: bold;
      margin-right: 10px;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 0.8em;
  }

  .log-level-error {
      background: #feb2b2;
      color: #742a2a;
  }

  .log-level-warn {
      background: #fbd38d;
      color: #744210;
  }

  .log-level-info {
      background: #bee3f8;
      color: #2a69ac;
  }

  .log-level-debug {
      background: #c6f6d5;
      color: #22543d;
  }

  .log-message {
      color: #e2e8f0;
  }

  /* Responsive Design for Admin Dashboard */
  @media (max-width: 768px) {
      .admin-stats-grid {
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
      }
      
      .admin-tabs .tab-buttons {
          flex-wrap: wrap;
      }
      
      .admin-tab-btn {
          flex: 1 1 50%;
          min-width: 120px;
      }
      
      .admin-tab-panel table {
          font-size: 0.9em;
      }
      
      .admin-tab-panel .button {
          padding: 6px 10px;
          font-size: 12px;
      }
  }

  /* Azure TTS Status Card */
  .stat-card[onclick] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .stat-card[onclick]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
  }

  .stat-card[onclick]:active {
    transform: translateY(0);
  }

  /* TTS Status specific styles */
  #admin-today-words .fas.fa-exclamation-triangle {
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
  }

  /* --- 상태 배지 스타일 --- */
  .status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .status-badge.healthy {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
    border: 1px solid rgba(34, 197, 94, 0.3);
  }
  
  .status-badge.warning {
    background-color: rgba(251, 191, 36, 0.1);
    color: var(--warning-color);
    border: 1px solid rgba(251, 191, 36, 0.3);
  }
  
  .status-badge.error {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(239, 68, 68, 0.3);
  }

  /* --- 모달 스타일 --- */

  /* === 프로필 페이지 버튼 스타일 === */
  .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 14px;
    font-family: inherit;
  }

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

  .button.primary-button {
    background: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
  }

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

  .button.secondary-button {
    background: var(--secondary-color);
    color: white;
    border: 1px solid var(--secondary-color);
  }

  .button.secondary-button:hover {
    background: var(--secondary-hover);
    border-color: var(--secondary-hover);
  }

  .button.info-button {
    background: var(--info-color);
    color: white;
    border: 1px solid var(--info-color);
  }

  .button.info-button:hover {
    background: #0ea5e9;
    border-color: #0ea5e9;
  }

  .button.danger-button {
    background: var(--danger-color);
    color: white;
    border: 1px solid var(--danger-color);
  }

  .button.danger-button:hover {
    background: #dc2626;
    border-color: #dc2626;
  }
  /* === My Dictionary 스타일 === */

  /* 빠른 번역 버튼 스타일 */
  #quick-translate-btn {
      padding: 14px 25px;
      font-size: 1.05em;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(67, 97, 238, 0.2);
  }

  #quick-translate-btn:hover {
      background: var(--primary-dark);
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(67, 97, 238, 0.3);
  }

  /* --- 뷰 우선순위 및 레이어링 --- */
  .view-section,
  #search-view,
  #my-dictionary-view,
  #my-grammar-view,
  #ai-tutor-view,
  #my-articles-view,
  #admin-dashboard-view,
  #user-profile-view,
  #grammar-explanation-view,
  #article-detail-view,
  #add-article-view {
      position: relative;
      z-index: 1;
  }

  /* 사용자 프로필 뷰를 다른 뷰들보다 위에 표시 */
  #user-profile-view {
      z-index: 10;
      position: relative;
  }

  /* 모달창들은 모든 뷰보다 위에 표시 */
  .modal {
      z-index: 1000;
  }

  /* VAD 스위치 스타일 */
  .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
  }

  .switch input {
      opacity: 0;
      width: 0;
      height: 0;
  }

  .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 34px;
  }

  .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
  }

  input:checked + .slider {
      background-color: #28a745;
  }

  input:focus + .slider {
      box-shadow: 0 0 1px #28a745;
  }

  input:checked + .slider:before {
      transform: translateX(26px);
  }

  /* Modal close button - 마이크 설정 모달용 */
  .modal-close {
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 24px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      background: none;
      border: none;
      padding: 5px;
      line-height: 1;
      z-index: 1002;
      border-radius: 4px;
      transition: all 0.2s ease;
  }

  .modal-close:hover,
  .modal-close:focus {
      color: #000;
      background: rgba(0, 0, 0, 0.1);
      text-decoration: none;
  }

  /* Modal header flexbox layout */
  .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid var(--border-color, #e9ecef);
      position: relative;
  }

  @media print {
    .sentence-tts-btn,
    .sentence-edit-btn,
    .sentence-drag-handle {
      display: none !important;
    }
  }

/* === 새로운 아티클 세부 페이지 레이아웃 === */
.left-content-div {
    flex-basis: 59%;
    padding-right: 1%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.right-content-div {
    flex-basis: 39%;
    padding-left: 1%;
    border-left: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
}

.sentence-translated-only {
    font-size: 1em;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* 새로운 레이아웃 반응형 조정 */
@media (max-width: 768px) {
    .sentence-texts-container .left-content-div,
    .sentence-texts-container .right-content-div {
        flex-basis: auto;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
    
    .sentence-texts-container .right-content-div {
        border-left: none;
        border-top: 1px solid var(--border-light);
        padding-top: 15px;
        margin-top: 15px;
    }
}

/* === 토글 버튼 공통 스타일 === */
.toggle-button {
    transition: all 0.3s ease;
}

/* === 단어보기 토글 기능 === */
.toggle-button.words-visible {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.toggle-button.words-visible:hover {
    background-color: #28a745;
    border-color: #28a745;
}

.toggle-button.words-hidden {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
}

.toggle-button.words-hidden:hover {
    background-color: #6c757d;
    border-color: #6c757d;
}

/* 단어 숨김 상태일 때 스타일 */
.words-hidden .sentence-right-content {
    display: none !important;
}

.words-hidden .sentence-left-content {
    flex-basis: 100% !important;
    padding-right: 0 !important;
}

.words-hidden .sentence-texts-container {
    justify-content: flex-start !important;
}

  /* 반응형에서도 단어 숨김 상태 적용 */
  @media (max-width: 768px) {
      .words-hidden .sentence-left-content {
          width: 100% !important;
      }
      
      /* 아티클 상세보기 버튼 반응형 */
      .article-detail-buttons-container {
          min-width: auto;
          width: 100%;
      }
      
      .button-row {
          flex-wrap: wrap;
          justify-content: center;
      }
      
      .btn-xs {
          font-size: 0.7em !important;
          padding: 2px 6px !important;
          height: 26px !important;
      }
  }

/* === 포네틱보기 토글 기능 === */
.toggle-button.phonetic-visible {
    background-color: var(--info-color);
    border-color: var(--info-color);
}

.toggle-button.phonetic-visible:hover {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.toggle-button.phonetic-hidden {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
}

.toggle-button.phonetic-hidden:hover {
    background-color: #6c757d;
    border-color: #6c757d;
}

/* 포네틱 숨김 상태일 때 스타일 */
.phonetic-hidden .sentence-phonetic-container {
    display: none !important;
}

/* === AI 통역 전체화면 모드 스타일 === */
.ai-translator-fullscreen-mode {
  /* 전체화면 모달 기본 스타일 */
}

.ai-translator-fullscreen-mode #ai-translator-original-text,
.ai-translator-fullscreen-mode #ai-translator-original-text *,
.ai-translator-fullscreen-mode [id*="original"] {
  color: #ffffff !important; /* 원문은 흰색 */
}

.ai-translator-fullscreen-mode #ai-translator-translated-text,
.ai-translator-fullscreen-mode #ai-translator-translated-text *,
.ai-translator-fullscreen-mode [id*="translated"] {
  color: #FFD700 !important; /* 번역문은 레몬색 */
}

/* 전체화면에서 모든 텍스트 요소들의 색상 강제 적용 */
.ai-translator-fullscreen-mode .text-muted,
.ai-translator-fullscreen-mode [style*="color"] {
  color: inherit !important;
}

/* 전체화면 모달의 닫기 버튼 위치 조정 */
#ai-translator-fullscreen-close {
  position: absolute !important;
  top: 10px !important; /* 기존 20px에서 10px로 조정 */
  right: 20px !important;
  z-index: 10001 !important;
}

/* 전체화면에서 헤더 영역 조정 */
.ai-translator-fullscreen-mode .view-header,
.ai-translator-fullscreen-mode [style*="linear-gradient"] {
  padding: 15px 30px !important; /* 상단 패딩 줄임 */
  flex: none !important;
  height: auto !important;
}