  <style>
    /* 다크모드 대응을 위한 CSS 변수 초기값 설정 */
    :root { 
      --bg-color: #ffffff; 
      --text-color: #202124; 
      --sidebar-bg: #f8f9fa; 
      --border-color: #e0e0e0; 
      --scrollbar-thumb: #dadce0;
      --icon-bg: #ffffff;
      --icon-text: #202124;
      --icon-border: #dddddd;
      --start-btn-bg: #202124;
      --start-btn-border: #000000;
      /* 팝업용 다크모드 변수 추가 */
      --modal-bg: #ffffff;
      --modal-shadow: rgba(0,0,0,0.3);
    }

    body { 
      margin:0; 
      font-family:'Segoe UI',Arial,sans-serif; 
      display:flex; 
      background: var(--bg-color); 
      color: var(--text-color); 
      height: 100vh; 
      overflow: hidden; 
      transition: background 0.1s, color 0.1s; 
      position: relative; /* 자식 요소들의 absolute/fixed 기준점 */
    }

    /* 사이드바를 fixed로 변경하여 본문(UI) 위에 덮이도록 설정 */
    .sidebar { 
      position: fixed;
      top: 0;
      left: 0;
      height:100vh; 
      width:240px; 
      max-width: 240px; 
      min-width: 240px; 
      background: var(--sidebar-bg); 
      padding: 60px 20px calc(120px + env(safe-area-inset-bottom)) 20px;
      box-shadow: 3px 0 10px rgba(0,0,0,0.1); 
      flex-shrink: 0; 
      border-right: 1px solid var(--border-color); 
      transition: transform 0.3s ease, background 0.1s, border-color 0.1s; 
      z-index: 1200; /* 메뉴 토큰 버튼 바로 다음 레이어로 설정 */
      display: flex; 
      flex-direction: column; 
      transform: translateX(-241px); /* 기본적으로 숨김 처리 */
      box-sizing: border-box;
      overflow-y: auto; 
      overflow-x: hidden;
    }

    .sidebar::-webkit-scrollbar { width: 5px; }
    .sidebar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 10px; }
    .sidebar::-webkit-scrollbar-track { background: transparent; }
    .sidebar.active { transform: translateX(0); }
    
    /* 아이콘 버튼 디자인 */
    .menu-toggle, .undo-btn, .info-btn { 
      position: fixed; 
      top: 15px; 
      font-size: 20px; 
      cursor: pointer; 
      z-index: 1300; /* 가장 위에 위치 */
      background: var(--icon-bg); 
      color: var(--icon-text);
      border: 1px solid var(--icon-border); 
      border-radius: 6px; 
      transition: all 0.1s; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      box-sizing: border-box; 
    }
    .menu-toggle { left: 15px; width: 40px; height: 40px; }
    
    /* 정보 버튼 위치 및 스타일을 햄버거 메뉴 오른쪽(네모박스 형태)으로 배치 */
    .info-btn { 
      left: 65px; 
      width: 40px; 
      height: 40px; 
      display: none; 
      padding: 0; 
      user-select: none;
    }
    
    .undo-btn { right: 15px; width: 45px; height: 40px; display: none; line-height: 1; padding: 0; padding-bottom: 2px; }

    /* 본문 영역이 항상 전체 화면 크기를 유지하여 무조건 정중앙에 배치되도록 설정 */
    .content { 
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh; 
      display:flex; 
      flex-direction:column; 
      text-align:center; 
      overflow-y: auto; 
      z-index: 1000; /* 사이드바보다 아래에 위치 */
    }
    
    .progress { margin-top: 25px; margin-bottom: 20px; font-size:14px; color:#70757a; font-weight: bold; background: rgba(0,0,0,0.05); padding: 6px 14px; border-radius: 20px; align-self: center; z-index: 10; }
    
    /* 카드 영역 스타일 유지 및 정보 버튼 배치용 parent 추가 */
    .card-center { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin-top: 20px; position: relative; }
    .text-container { height: 50px; display: flex; align-items: center; justify-content: center; }
    .hiragana { font-size:26px; color:#70757a; }
    .meaning { font-size:32px; color:#1a73e8; font-weight: 600; }
    
    /* 자바스크립트 내 줄바꿈(\n) 적용을 위해 white-space 속성 추가 */
    .kanji { font-size:80px; margin:10px 0; font-weight: 700; min-height: 100px; white-space: pre-line; }

    /* 한자와 정보버튼을 가로로 정렬하기 위한 컨테이너 */
    .kanji-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 팝업 모달 전체 화면 배경 크기구현 (딤처리) */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 2000; /* 화면 최상단 */
    }

    /* 팝업 상자 스타일 */
    .modal-box {
      background: var(--modal-bg);
      color: var(--text-color);
      padding: 25px;
      border-radius: 12px;
      width: 85%;
      max-width: 400px;
      box-shadow: 0 4px 20px var(--modal-shadow);
      text-align: left;
      box-sizing: border-box;
      position: relative;
      animation: popupScale 0.2s ease-out;
    }

    @keyframes popupScale {
      from { transform: scale(0.9); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .modal-title {
      font-size: 20px;
      font-weight: bold;
      margin-top: 0;
      margin-bottom: 15px;
      border-bottom: 2px solid var(--border-color);
      padding-bottom: 8px;
      color: #1a73e8;
    }

    .modal-body {
      font-size: 16px;
      line-height: 1.6;
      white-space: pre-line; /* 줄바꿈 지원 */
    }

    .modal-close {
      margin-top: 20px;
      width: 100%;
      height: 44px;
      background: #1a73e8;
      color: #fff;
      border: none;
      border-radius: 22px;
      font-size: 15px;
      font-weight: bold;
      cursor: pointer;
    }

    .button-area { height: 280px; padding-bottom: 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; }
    .btn, .btn-group button, .restart-btn { font-size: 16px; border: none; cursor: pointer; height: 52px; border-radius: 26px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; font-weight: bold; }
    .btn { background:#1a73e8; color:#fff; width: 85%; max-width: 300px; margin: 0; }
    
    /* 스타트 버튼 그룹 (나란히 배치하기 위함) */
    .start-btn-group { display: none; gap: 15px; width: 90%; max-width: 400px; height: 52px; }
    .start-btn-group button { flex: 1; font-size: 16px; }

    /* 스타트 버튼 변수 바인딩 */
    .start-btn { 
      background: var(--start-btn-bg); 
      color: #fff; 
      border: 2px solid var(--start-btn-border); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
      transition: background 0.1s, border-color 0.1s;
    }
    
    .restart-btn { background:#34a853; color:#fff; font-size: 18px; width: 90%; max-width: 400px; margin: 0 auto; } 
    
    .btn-group { display: flex; gap: 15px; width: 90%; max-width: 400px; height: 52px; }
    .btn-group button { flex: 1; font-size: 16px; } 
    .btn-group .wrong { background:#ea4335; color:#fff; }
    .btn-group .correct { background:#34a853; color:#fff; }

    /* 하단 설정 영역 스타일 */
    .control-section { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-color); flex-shrink: 0; display: flex; gap: 10px; }
    
    .dark-toggle-btn, .info-toggle-btn {
      height: 40px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background: var(--bg-color);
      color: var(--text-color);
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    
    .dark-toggle-btn { flex: 2; gap: 6px; }
    .info-toggle-btn { flex: 1; font-size: 16px; }
    
    .dark-toggle-btn:hover, .info-toggle-btn:hover {
      background: var(--border-color);
    }
    /* 💬 아이콘 오프(비활성화) 되었을 때 스타일구현 */
    .info-toggle-btn.disabled {
      opacity: 0.4;
      background: rgba(0,0,0,0.1);
    }

    /* 홈 버튼 위치 최적화를 위해 상단 마진 및 패딩 수정 */
    .sidebar-home-btn {
      cursor: pointer; 
      margin-top: 15px; 
      margin-bottom: 10px;
      font-size: 20px; 
      white-space: nowrap; 
      flex-shrink: 0;
      padding-left: 4px;
    }

    .divider { border-top:1px solid var(--border-color); margin:15px 0; flex-shrink: 0; }
    
    /* 메뉴 아이템 너비 고정 */
    .menu-item { 
      margin: 4px 0; 
      padding: 8px; 
      cursor: pointer; 
      font-weight: 500; 
      color: var(--text-color); 
      font-size: 16px; 
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
      flex-shrink: 0; 
      border-radius: 6px; 
      transition: background 0.2s, color 0.2s; 
      box-sizing: border-box;
      white-space: nowrap; 
      overflow: hidden;
      opacity: 0.9;
    }

    .menu-item span:first-child {
      overflow: hidden;
      text-overflow: ellipsis; 
    }

    .menu-item:hover { 
      background-color: #e8f0fe; 
      color: #1a73e8; 
      opacity: 1;
    }

    /* 플러스 버튼 크기 강제 잠금 */
    .add-btn { 
      width: 30px; 
      height: 30px; 
      min-width: 30px; 
      max-width: 30px; 
      flex-shrink: 0; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      border-radius: 4px; 
      background: #e8f0fe; 
      color: #1a73e8; 
      font-weight: bold; 
      font-size: 18px; 
      line-height: 1; 
      transition: all 0.2s; 
      margin-left: 10px; 
      box-sizing: border-box;
    }

    .add-btn:hover {
      background: #1a73e8;
      color: #ffffff;
    }

    .add-btn.active { 
      background: #fce8e6 !important; 
      color: #ea4335 !important; 
    }

    .sub-menu { 
      max-height: 0; 
      overflow: hidden; 
      transition: max-height 0.3s ease-out; 
      background: rgba(0, 0, 0, 0.05); 
      border-radius: 4px; 
      margin-top: -2px; 
      margin-bottom: 5px; 
    }

    .sub-item { 
      padding: 8px 15px 8px 15px; 
      font-size: 14px; 
      color: var(--text-color); 
      opacity: 0.8;
      cursor: pointer; 
      border-bottom: 1px solid rgba(0,0,0,0.02); 
      text-align: left; 
      transition: background 0.2s, color 0.2s; 
      white-space: nowrap;
    }

    .sub-item:hover { 
      background-color: #e8f0fe; 
      color: #1a73e8; 
      opacity: 1;
    }
    
    @media (max-width: 768px) { 
      .card-center { margin-top: 0px; } 
      .button-area { padding-bottom: 10px; } 
    }
  </style>