/* ==========================================================================
   컬러 변수 (CLAUDE.md 디자인 기획 기준 — 임의 변경 금지)
   ========================================================================== */
:root {
  /* Brand */
  --color-brand: #378ADD;       /* Brand Blue */
  --color-brand-dark: #0C447C;  /* Brand Navy */
  --color-point: #D85A30;       /* Point Coral — 사용 보류 */

  /* CTA 버튼 채움색(확인/제출/플래시카드 학습/자동재생 등 큰 채움 버튼 전용, 2026-09-19) —
     라이트모드는 기존 브랜드 색과 동일한 기본값, 다크모드에서만 아래 [data-theme="dark"]에서 재정의 */
  --color-cta-fill: var(--color-brand);
  --color-cta-pressed: var(--color-brand-dark);
  --color-cta-text: #FFFFFF;

  /* Surface */
  --color-base: #FFFFFF;
  --color-surface: #F4F6F8;
  --color-surface-dark: #0F172A;
  --color-chip-answer: #E6F1FB;

  /* Text */
  --color-text-primary: #1E2A38;
  --color-text-secondary: #4B5D6B;
  --color-text-muted: #7C8A96;

  /* Grayscale (완전 무채색) */
  --gray-50: #F7F7F7;
  --gray-100: #ECECEC;
  --gray-200: #D9D9D9;
  --gray-300: #C2C2C2;
  --gray-400: #A6A6A6;
  --gray-500: #8A8A8A;
  --gray-600: #6B6B6B;
  --gray-700: #545454;
  --gray-800: #3C3C3C;
  --gray-900: #242424;

  /* Accent — 별표/깃발 마킹 전용 (Point Coral 대체) */
  --color-accent-star: #BA7517;
  --color-accent-star-bg: #FAEEDA;

  /* 카드 텍스트 글자 크기 (기본값 = 보통) */
  --kr-font-size: 22px;
  --kr-font-size-revealed: 16px;
  --en-font-size: 24px;
}

/* 설정 > 글자 크기 5단계는 js/app.js에서 위 변수 값을 인라인으로 갱신 */

/* 다크모드: html[data-theme="dark"]에서 배경/텍스트/그레이스케일을 반전 (브랜드 블루/네이비/코럴/Accent는 유지)
   2026-09-19 1차 재조정: 완전 무채색이 대비가 너무 세다는 피드백으로 남색 계열로 통일(#0F172A 기준).
   2026-09-20 2차 재조정: 이번엔 "배경에 파란기가 너무 강하다"는 반대 피드백 — 배경 후보 4종을
   실제 컴포넌트 목업으로 비교한 뒤, 색상(H222°)·밝기(L11%)는 유지하고 채도만 47%→25%로 낮춘
   값(#151923)을 채택. 그레이스케일 10단계·본문 텍스트도 같은 비율(×25/47)로 채도만 낮춰 재계산해
   전체 톤을 통일. 이와 별개로 CTA 버튼(확인 등)은 배경에 거의 묻히던 기존 방식이 "존재감 없다"는
   지적으로 완전히 새로 설계 — 아래 별도 섹션 참고. 정식 디자인 가이드는 아직 아니라 잠정치(CLAUDE.md 참고) */
[data-theme="dark"] {
  --color-base: #151923;
  --color-surface: #151923;

  --color-text-primary: #E5E8ED;
  --color-text-secondary: #9CA4B0;

  --gray-50: #20242B;
  --gray-100: #292E37;
  --gray-200: #363D47;
  --gray-300: #505864;
  --gray-400: #646D79;
  --gray-500: #7E8795;
  --gray-600: #9CA4B0;
  --gray-700: #B6BDC5;
  --gray-800: #E5E8ED;
  --gray-900: #F3F5F7;

  /* 즐겨찾기/미암기 활성 아이콘·"미니 학습 중" 배너 등이 쓰는 크림색 배경(라이트 전용 값 #FAEEDA)이
     다크모드에서 전혀 재정의돼 있지 않아, 새까만 배경 위에 밝은 크림색 패치로 튀는 문제를 발견
     (2026-09-20) — 정답 박스(.en-text)에 이미 쓴 방식과 같은 원리로 저채도 틴트 배경+밝은 글자로 톤다운.
     변수 하나만 바꿔도 이 값을 쓰는 모든 칩(별표/깃발/배너/AI 보관함 승격 아이콘 등)에 자동 반영됨 */
  --color-accent-star-bg: rgba(186, 117, 23, 0.18);
  --color-accent-star: #E0A552;

  /* 확인/제출/플래시카드 학습/자동재생 CTA — 2026-09-20 전면 재설계.
     "탭 전"은 배경과 거의 안 보이게 섞는 대신 눈에 띄는 채움(#1E293C)+쨍한 글자(#3993FF)로
     존재감을 줌(사용자가 직접 골라본 톤이 기존 안보다 훨씬 편안하다고 확인). "탭 후"(정답 노출,
     #check-btn.revealed 전용)는 다크모드 특성상 더 어두워지면 오히려 안 보이므로, 반대로 아주
     살짝만 더 밝게 하고 테두리를 새로 둘러 "확인됨" 신호를 줌
     2026-09-21: 카드 화면에서 확인(탭 전) 배경이 이전/다음 버튼 테두리에 비해 존재감이 약하다는
     피드백으로 채움을 3단계에 걸쳐 조금씩 밝게(#1A2434→#1E293C→#222E44→#26334C) 했으나, 매번
     델타가 채널당 +4~8 수준(밝기 기준 15%→22%, 3단계 합쳐도 약 7%p)이라 체감이 안 된다는
     피드백으로 밝기를 22%→30%까지 크게 올렸다가, 27%→25%로 순차적으로 낮춤(같은 색상 H~220° 유지) */
  --color-cta-fill: #283858;
  --color-cta-pressed: #2E4164;
  --color-cta-text: #3993FF;
}

/* 확인 버튼만 탭 전/후 두 상태가 있어 테두리로 상태 변화를 표시 — 탭 전은 테두리 없음(배경 채움만),
   탭 후에만 테두리 등장(2026-09-20). 나머지 3개 CTA(제출/플래시카드 학습/자동재생)는 상태 전환이
   없는 단발성 버튼이라 전부 "탭 전" 스타일(테두리 없음)로 통일 — 기존에 다크모드에서만 추가하던
   합성 테두리 규칙은 삭제, 라이트모드와 마찬가지로 border 없음 */
[data-theme="dark"] #check-btn {
  border-color: transparent;
}

/* 2026-09-21: 확인 버튼(탭 전)과 이전/다음 버튼의 배경이 거의 같은 톤이 되면서, 이전/다음
   버튼만 갖고 있는 테두리(--gray-400)가 상대적으로 도드라져 오히려 확인 버튼의 존재감을
   가리는 문제 — 다크모드에서만 이전/다음 테두리를 낮춤(gray-400→gray-300 1차, 추가 피드백으로
   #404650 2차 — disabled 상태 테두리(--gray-200: #363D47)와 겹치지 않도록 그 사이 값 사용) */
[data-theme="dark"] #prev-btn,
[data-theme="dark"] #next-btn {
  border-color: #404650;
  /* 2026-09-21: 확인 버튼과 같은 --color-cta-fill을 공유하다 보니 구분이 약하다는 피드백 —
     이전/다음 전용으로 더 어두운 배경(같은 색상 H~220°, 밝기만 25%→17%)을 따로 지정 */
  background-color: #1B263C;
}

[data-theme="dark"] #check-btn.revealed {
  border-color: #5B9FE8;
}

/* 모달 제목/스테퍼 버튼은 라이트 모드에서 var(--color-brand-dark)(진한 남색)를 텍스트 색으로
   쓰기 때문에 다크 배경 위에서는 시인성이 떨어짐 → 다크모드 전용 색으로 전환.
   .en-text는 별도의 다크모드 전용 배경/텍스트 규칙이 있어 제외(아래 참고).
   2026-09-20: 그동안 색을 포기하고 밝은 회색(--color-text-primary)으로 때웠던 인터랙티브
   요소(스테퍼 버튼·탭 텍스트 버튼·선택모드 강조)는, 이제 다크에서도 잘 보이는 액티브 블루
   (#5B9FE8)가 생겨서 실제 색을 되살림 — "색이 사라져 밋밋하다"는 느낌의 원인 중 하나였음.
   단, 제목(.help-accordion-header)은 링크가 아니라 heading이라 컬러를 주면 오히려 어색해
   중립색 유지 */
[data-theme="dark"] .help-accordion-header {
  color: var(--color-text-primary);
}

[data-theme="dark"] .stepper-btn,
[data-theme="dark"] .screen-topbar-text-btn,
[data-theme="dark"] .screen-topbar.selecting .screen-back-btn,
[data-theme="dark"] .screen-topbar.selecting .screen-topbar-title {
  color: #5B9FE8;
}

/* 카드 정답 박스(.en-text)는 라이트모드에서 --color-chip-answer(항상 밝은 하늘색) 고정 배경을
   쓰는데, 다크모드에서는 이 값을 그대로 두면 거의 검은 배경 위에 흰 박스가 뜬 것처럼 보여
   대비가 과했음(2026-09-19) — 브랜드 블루를 저채도로 얹은 톤다운 배경으로 다크모드만 재정의 */
[data-theme="dark"] .en-text {
  background-color: rgba(55, 138, 221, 0.16);
  color: #DCE9FA;
}

/* 2026-09-20: .en-text 외에도 --color-chip-answer(항상 밝은 하늘색)를 배경으로 쓰는 곳이
   3곳 더 있었음(백업 리마인더 배너/검색 폼 박스/문장변형 하이라이트) — 전부 새까만 배경 위에
   밝은 하늘색 patch로 튀는 같은 문제라 .en-text와 동일한 톤다운 원리를 적용. 이 컴포넌트들은
   배경뿐 아니라 그 안의 글자색도 "항상 밝은 배경"을 전제로 리터럴 다크네이비(#1E2A38 등)를
   써두고 있어서, 배경만 톤다운하면 어두운 배경 위에 어두운 글자가 남아 오히려 안 보이게 됨
   — 배경+글자를 함께 재정의 */
[data-theme="dark"] .backup-reminder-banner {
  background-color: rgba(55, 138, 221, 0.16);
}

[data-theme="dark"] .backup-reminder-title {
  color: #DCE9FA;
}

[data-theme="dark"] .backup-reminder-desc {
  color: #9DBBE0;
}

[data-theme="dark"] .list-search-box {
  background-color: rgba(55, 138, 221, 0.16);
}

[data-theme="dark"] .list-search-box-icon {
  color: #9DBBE0;
}

[data-theme="dark"] .list-search-input {
  color: #DCE9FA;
}

[data-theme="dark"] .list-search-input::placeholder {
  color: #9DBBE0;
}

[data-theme="dark"] .variation-item.variation-item-flipped {
  background-color: rgba(55, 138, 221, 0.16);
}

[data-theme="dark"] .variation-item-flipped .variation-item-tag,
[data-theme="dark"] .variation-item-flipped .variation-item-kr,
[data-theme="dark"] .variation-item-flipped .variation-item-en {
  color: #DCE9FA;
}

/* ==========================================================================
   폰트 (Pretendard 자체 호스팅 — 기기별 시스템 폰트 대체 렌더링 방지)
   ========================================================================== */
@font-face {
  font-family: 'Pretendard';
  src: url('../public/fonts/pretendard/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../public/fonts/pretendard/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../public/fonts/pretendard/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../public/fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   기본 리셋
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   화면 공통
   ========================================================================== */
/* min-height였을 때는 내용이 길어지면 화면 전체가 늘어나며 페이지째로 스크롤되어,
   내부 flex:1 스크롤 영역(예: .sentence-list) 뒤에 있는 하단 고정 버튼이 화면 밖으로
   밀려나는 문제가 있었음 → height로 뷰포트에 고정, 내부 영역만 스크롤되게 함(2026-08-27) */
.screen {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* 넓은 화면(PC 등)에서는 모바일 폭 그대로 화면 끝까지 늘어나 텍스트박스·버튼이 비정상적으로
   커 보이는 문제가 있어, 가운데 정렬된 모바일 폭 컨테이너로 제한(2026-08-29). 640px 미만
   (실제 모바일)은 기존 그대로 전체 폭 사용 */
@media (min-width: 640px) {
  .screen {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px var(--gray-200), 0 8px 40px rgba(20, 23, 28, 0.12);
  }
}

/* ==========================================================================
   시작 화면
   ========================================================================== */
#start-screen {
  align-items: center;
  background-color: var(--color-brand);
  padding: 48px 24px calc(24px + env(safe-area-inset-bottom));
}

.start-content {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}

.start-logo {
  /* 시작 화면은 항상 브랜드 블루 배경이라 테마와 무관하게 흰색 고정 */
  color: #FFFFFF;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 1px;
}

.start-intro-text {
  /* 시작 화면은 항상 브랜드 블루 배경이라 테마와 무관하게 흰색 고정 */
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1.6;
  max-width: 320px;
  word-break: keep-all;
}

/* 재방문 태그라인은 최초 방문 설명문보다 가벼운 톤으로 — 대비가 다소 낮아도 무방.
   --color-chip-answer(#E6F1FB)와 같은 색조(약 209°)에서 채도는 유지하고 명도만 낮춰 살짝 더 진하게 */
.start-intro-text.start-tagline {
  color: #AFD2F4;
}

.start-btn-fixed {
  width: 100%;
}

/* ==========================================================================
   카드 학습 화면
   ========================================================================== */
#card-screen {
  display: grid;
  /* 상단바 - 백업 리마인더 배너 - 미니 학습 배너(둘 다 평소엔 숨김 처리로 0높이) - 카드 영역(남는 공간) - 이전/확인/다음 버튼 순서 */
  grid-template-rows: auto auto auto 1fr auto;
  /* minmax(0, 1fr) 명시 필요(2026-09-11) — 안 쓰면 그리드 트랙의 자동 최소 크기가
     내부 콘텐츠(예: 마킹 아이콘 바)의 min-content로 강제돼, 그 콘텐츠가 넓어지면
     이 화면 전체가 뷰포트보다 넓어지며 옆으로 밀리는 "그리드 블로우아웃" 버그 발생 */
  grid-template-columns: minmax(0, 1fr);
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* ==========================================================================
   카드 화면 상단바 (로고 + 더보기 메뉴)
   ========================================================================== */
.card-topbar {
  /* #card-screen 5행 grid에서 항상 1행 고정 — 명시하지 않으면 배너들이
     display:none일 때 자동 배치가 한 칸씩 당겨져 카드 영역이 밀려 올라가는 문제가 있었음(2026-08-27) */
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 카드 화면 padding(24px) 밖으로 확장해 화면 좌우 끝까지 꽉 차게 표시 */
  margin: -24px -24px 0 -24px;
  padding: 16px 24px;
  /* 2026-09-15: 브랜드 블루 배경 → 화면 배경과 같은 무채색(--color-surface)으로 전환.
     헤더가 거의 모든 화면에서 반복 노출되는 가장 큰 색면이라 "파란색이 너무 많다"는
     피드백의 핵심 원인이었음 — 브랜드 인지는 로고(.topbar-logo)만 컬러로 유지하는 것으로 대체 */
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--gray-200);
}

.topbar-logo {
  font-size: 18px;
  font-weight: 700;
  /* 헤더가 무채색으로 바뀌며 로고만 브랜드 컬러를 유지 — 흰 배경 위 컬러 워드마크가
     오히려 더 또렷한 브랜드 표식 역할을 함(2026-09-15) */
  color: var(--color-brand);
  /* 다크모드는 아래 [data-theme="dark"] .topbar-logo에서 별도 색으로 재정의 */
  /* 자간 0.5px→-1px로 조정(2026-09-15) */
  letter-spacing: -1px;
  cursor: pointer;
  /* 클릭 가능해지며 생긴 텍스트 선택(모바일 사전 찾기 팝업 등) 방지 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 다크모드에서는 로고도 라이트모드의 쨍한 브랜드 블루 대신 액티브 블루로 전환
   (2026-09-20) — 어두운 배경에서 더 선명하고 눈부심이 덜함. 라이트/다크의 로고 색이
   달라지는 트레이드오프는 있지만, 다크 UI에서는 흔한 절충(원색을 그대로 쓰면 과포화로
   보임) */
[data-theme="dark"] .topbar-logo {
  color: #5B9FE8;
}

.topbar-more {
  position: relative;
}

.topbar-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  /* 유틸리티 아이콘(관리용) — 별표/깃발 등 다른 아이콘들과 같은 기본 회색 톤(2026-09-15) */
  color: var(--gray-600);
  cursor: pointer;
}

.topbar-more-btn svg {
  width: 22px;
  height: 22px;
}

.more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background-color: var(--color-base);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(20, 23, 28, 0.15);
  padding: 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}

/* 2026-09-20: 다크모드에서 --color-base가 페이지 배경과 완전히 같은 값이라 드롭다운이
   바탕과 구분되지 않던 문제 — 배경을 한 톤 밝게(--gray-100) + 테두리 추가로 경계를 줌.
   기존 그림자(어두운 색)는 이미 어두운 배경 위에서 안 보이므로 다크에서는 더 짙고
   퍼지는 그림자로 교체 */
[data-theme="dark"] .more-menu {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-200);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--gray-100);
}

.settings-row-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
  flex-shrink: 0;
}

.settings-row .stepper-btn {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

/* 글자크기/화면모드 행: 위(라벨) - 아래(조절 UI) 2줄 구조 */
.settings-row-fontsize {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.settings-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 기본문장 숨기기 등 on/off 설정용 토글 스위치 */
.settings-toggle {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background-color: var(--gray-300);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.settings-toggle.active {
  background-color: var(--color-brand);
}

/* 2026-09-21: 다크모드에서는 라이트모드용 밝은 브랜드 블루(#378ADD)가 톤다운된 나머지
   설정 화면 요소들에 비해 너무 튀는 문제 — 더 짙은 --color-brand-dark로 전환. 흰 손잡이와의
   대비는 오히려 더 진한 배경에서 커지므로(대비 저하 없음) 안전한 변경 */
[data-theme="dark"] .settings-toggle.active {
  background-color: var(--color-brand-dark);
}

.settings-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #FFFFFF;
  transition: transform 0.15s ease;
}

.settings-toggle.active .settings-toggle-thumb {
  transform: translateX(18px);
}

.font-size-sample {
  font-size: var(--kr-font-size);
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: font-size 0.2s ease;
}

/* ==========================================================================
   화면모드 3단 선택 (시스템 / 라이트 / 다크)
   ========================================================================== */
.mode-select {
  display: flex;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
}

.mode-select-btn {
  flex: 1;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-600);
  background-color: var(--color-base);
  border: none;
  cursor: pointer;
}

.mode-select-btn:not(:last-child) {
  border-right: 1.5px solid var(--gray-200);
}

.mode-select-btn.active {
  background-color: var(--color-brand);
  /* 브랜드 블루 배경 위 텍스트라 테마와 무관하게 흰색 고정 */
  color: #FFFFFF;
}

/* 2026-09-20: "확인 버튼과 같은 스타일로" 요청 — CTA 변수를 그대로 재사용해 확인 버튼
   (탭 전)과 항상 같은 톤을 유지 */
[data-theme="dark"] .mode-select-btn.active {
  background-color: var(--color-cta-fill);
  color: var(--color-cta-text);
}

/* ==========================================================================
   출제/정렬 순서 선택 (세로 라디오 목록)
   ========================================================================== */
.sort-option-list {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
}

.sort-option-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-800);
  background-color: var(--color-base);
  border: none;
  text-align: left;
  cursor: pointer;
}

.sort-option-btn:not(:last-child) {
  border-bottom: 1.5px solid var(--gray-200);
}

.sort-option-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  flex-shrink: 0;
  position: relative;
}

.sort-option-btn.active .sort-option-radio {
  border-color: var(--color-brand);
}

.sort-option-btn.active .sort-option-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-color: var(--color-brand);
}

.sort-option-btn.active {
  color: var(--color-brand-dark);
}

/* 2026-09-20: 다크에서 안 보여 포기했던 색을 액티브 블루로 복원(위 .stepper-btn 등과 같은 원리) */
[data-theme="dark"] .sort-option-btn.active {
  color: #5B9FE8;
}

[data-theme="dark"] .sort-option-btn.active .sort-option-radio {
  border-color: #5B9FE8;
}

[data-theme="dark"] .sort-option-btn.active .sort-option-radio::after {
  background-color: #5B9FE8;
}

.more-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--gray-800);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.more-menu-item svg {
  width: 22px;
  height: 22px;
  color: var(--gray-600);
  flex-shrink: 0;
}

.more-menu-item:active {
  background-color: var(--gray-50);
}

/* 문장추가/문장관리/문장변형(콘텐츠 이동)과 설정/도움말(메타 이동)을 시각적으로 그룹화 —
   부모 .more-menu의 gap(4px)에 이 여백이 더해져 그룹 사이만 간격이 더 넓어짐 */
.more-menu-divider {
  height: 1px;
  background-color: var(--gray-100);
  margin: 6px 4px;
}

/* grid의 위/아래 1fr 두 행이 항상 같은 크기로 나뉘어, 가운데(auto) 행인 영어 박스가
   한국어 문장·마킹 아이콘 바 길이와 무관하게 항상 화면(헤더~버튼바) 정중앙에 오게 됨 */
.card {
  /* #card-screen 5행 grid에서 항상 4행(1fr) 고정 — .card-topbar와 같은 이유로 명시 필요(2026-08-27) */
  grid-row: 4;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  /* minmax(0, 1fr) 명시 필요(2026-09-11) — 단순 1fr이면 마킹 아이콘 바 같은 내부
     콘텐츠의 min-content가 이 트랙의 자동 최소 크기가 돼 카드가 옆으로 넘칠 수 있고,
     이 카드는 #card-screen 그리드의 아이템이기도 해서 그 넘침이 상위 화면 전체로
     전파돼 페이지가 가로로 밀리는 문제까지 이어짐(위 #card-screen 주석 참고) */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  padding: 0 8px;
}

.kr-text {
  grid-row: 1;
  align-self: center;
  font-size: var(--kr-font-size);
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: font-size 0.2s ease, color 0.2s ease;
  word-break: keep-all;
  /* 탭해서 정답 토글 가능(2026-09-15) — 탭 가능함을 커서로 암시 */
  cursor: pointer;
}

/* 정답 확인 전에는 영어 박스(auto 행)가 접혀 있어, 한국어 문장이 3개 행 전체를 차지하며
   화면(헤더~버튼바) 정중앙에 오게 함 */
.card:not(.revealed) .kr-text {
  grid-row: 1 / -1;
}

/* 정답 노출 후에는 한국어 문장을 작게, 옅게 표시하고 영어 박스 바로 위에 붙임 */
.card.revealed .kr-text {
  align-self: end;
  margin-bottom: 16px;
  font-size: var(--kr-font-size-revealed);
  font-weight: 500;
  /* --color-text-muted(대비 3.3:1)는 컬러 가이드상 소글씨 본문 금지 색인데 실제 문장에
     쓰이고 있어 가독성 문제 — 대비 6.4:1인 --color-text-secondary로 교체(2026-09-15) */
  color: var(--color-text-secondary);
}

.en-text {
  grid-row: 2;
  display: block;
  width: 100%;
  font-size: var(--en-font-size);
  font-weight: 700;
  /* 하이라이트 칩(--color-chip-answer)이 테마와 무관하게 항상 밝은 배경이라 텍스트도 고정값 사용 */
  color: #1E2A38;
  background-color: var(--color-chip-answer);
  padding: 40px 14px;
  border-radius: 8px;
  word-break: keep-all;
  /* 탭해서 정답 토글 가능(2026-09-15) — 탭 가능함을 커서로 암시 */
  cursor: pointer;
}

/* ==========================================================================
   카드 화면 마킹 아이콘 바 (정답 확인 후에만 노출)
   ========================================================================== */
.card-mark-bar {
  grid-row: 3;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 정답 발음 듣기(24번) 아이콘 추가로 5개+구분선이 된 뒤 좁은 화면에서 넘치지 않도록
     간격을 20px→16px로 소폭 축소(2026-09-11). 아이콘 자체 크기(44px)는 그대로 유지 —
     #card-screen/.card의 grid-template-columns: minmax(0, 1fr) 수정(아래 #card-screen
     주석 참고) 덕분에 이 정도로 폭이 늘어도 화면 전체가 밀리지 않는 것을 320px까지 확인 */
  gap: 16px;
  /* 영어 박스 테두리에서 정확히 40px 떨어지도록 함 */
  margin-top: 40px;
}

.card-mark-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--gray-600);
  cursor: pointer;
}

.card-mark-btn svg {
  width: 24px;
  height: 24px;
}

/* lucide의 volume-2 아이콘은 24x24 viewBox 안에서 실제 그림 높이가 다른 아이콘(별표·깃발·
   연필·휴지통, 세로로 약 19~20 유닛)보다 훨씬 짧게(약 16 유닛) 그려져 있어, 같은 크기로
   두면 유독 작아 보임(2026-09-11, 사용자 제보로 getBBox 실측 후 확인) — 이 아이콘만 크기를
   키워 다른 아이콘과 위아래 시각적 높이를 맞춤 */
#card-speaker-btn svg {
  width: 29px;
  height: 29px;
}

.card-mark-btn.active {
  color: var(--color-accent-star);
  background-color: var(--color-accent-star-bg);
}

.card-mark-btn.active svg {
  fill: currentColor;
}

.card-mark-divider {
  width: 1px;
  height: 24px;
  background-color: var(--gray-200);
}

/* ==========================================================================
   백업 리마인더 배너 (마지막 백업/닫기 이후 7일 경과 또는 내 문장 10개 이상 추가 시 노출)
   ========================================================================== */
.backup-reminder-banner {
  /* #card-screen 5행 grid에서 항상 2행 고정 — .card-topbar와 같은 이유로 명시 필요(2026-08-28) */
  grid-row: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding: 14px 36px 14px 14px;
  background-color: var(--color-chip-answer);
  border-radius: 10px;
}

.backup-reminder-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand-dark);
}

.backup-reminder-desc {
  /* 배경(--color-chip-answer)이 테마와 무관하게 항상 밝은색이라 .en-text와 같은 규칙으로 고정값 사용
     (--color-text-secondary를 그대로 쓰면 다크모드에서 밝은 색으로 바뀌어 안 보임) */
  font-size: 13px;
  color: #4B5D6B;
}

.backup-reminder-btn {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #FFFFFF;
  background-color: var(--color-brand);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.backup-reminder-btn svg {
  width: 15px;
  height: 15px;
}

.backup-reminder-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: #4B5D6B; /* 위 .backup-reminder-desc와 같은 이유로 고정값 사용 */
  cursor: pointer;
}

.backup-reminder-close-btn svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   미니 학습 배너 (15-2 AI 변형으로 추가한 문장만 임시로 학습할 때 노출)
   ========================================================================== */
.mini-session-banner {
  /* #card-screen 5행 grid에서 항상 3행 고정 — .card-topbar와 같은 이유로 명시 필요(2026-08-27) */
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  background-color: var(--color-accent-star-bg);
  border-radius: 10px;
}

.mini-session-banner-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-star);
}

.mini-session-exit-btn {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-accent-star);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   하단 버튼 바
   ========================================================================== */
.control-bar {
  /* #card-screen 5행 grid에서 항상 5행 고정 — .card-topbar와 같은 이유로 명시 필요(2026-08-27) */
  grid-row: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}


.btn {
  flex: 1;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

/* 카드 화면 하단 버튼: 정사각형 형태
   넓은 화면에서는 100px/20px, 좁은 화면(예: iPhone SE)에서는 화면 폭에 맞춰 자동 축소 */
.control-bar .btn {
  flex: none;
  width: clamp(64px, 25vw, 100px);
  aspect-ratio: 1 / 1;
  padding: 0;
  font-size: clamp(14px, 5vw, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 둥글기만 이 버튼들 전용으로 12px→20px 조정(다른 .btn 공유 버튼엔 영향 없음, 2026-09-15) */
  border-radius: 20px;
}

/* 이전/다음: 그레이 아웃라인 (새 컬러가이드 컴포넌트 규칙) */
#prev-btn,
#next-btn {
  color: var(--gray-600);
  border-color: var(--gray-400);
}

#prev-btn:disabled,
#next-btn:disabled {
  color: var(--gray-300);
  border-color: var(--gray-200);
}

/* 확인: 탭 전 Brand Blue 채움 → 탭 후(정답 노출) Brand Navy 채움
   (다크모드는 --color-cta-fill/--color-cta-pressed로 톤다운 — 위 [data-theme="dark"] 참고) */
#check-btn {
  background-color: var(--color-cta-fill);
  border-color: var(--color-brand);
  color: var(--color-cta-text);
}

#check-btn.revealed {
  background-color: var(--color-cta-pressed);
  border-color: var(--color-brand-dark);
}

#check-btn:disabled {
  background-color: var(--gray-200);
  border-color: var(--gray-200);
  color: var(--gray-400);
}

.btn-primary {
  flex: none;
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 255, 255, 0.65) 100%);
  /* 시작 화면은 항상 브랜드 블루 배경이라 테마와 무관하게 고정 색상 */
  color: var(--color-brand-dark);
  border: none;
  padding: 16px 40px;
  border-radius: 12px;
  font-size: 18px;
}

.btn-outline {
  background-color: var(--color-base);
  color: var(--color-brand-dark);
  border: 1.5px solid var(--color-brand);
}

.btn-outline:active {
  background-color: var(--color-brand);
  /* 브랜드 블루 배경 위 텍스트라 테마와 무관하게 흰색 고정 */
  color: #FFFFFF;
}

.btn-outline:disabled {
  border-color: var(--gray-200);
  color: var(--gray-300);
  cursor: not-allowed;
}

/* 2026-09-20: 다크모드에서 배경(--color-base)이 페이지와 같은 값+글자(--color-brand-dark
   진한 남색)가 어두운 배경 위에서 거의 안 보여, "AI 프롬프트 복사하기" 등 .btn-outline
   버튼 전반이 테두리 선만 보이고 내용은 안 읽히던 문제 — 테두리는 그대로 두고 배경·글자만
   확인 버튼(탭 전)과 같은 톤으로 채워 존재감을 줌. 비활성 버튼은 제외(기존처럼 흐릿하게 유지)
   2026-09-21: 하드코딩값(#1A2434/#3993FF) 대신 --color-cta-fill/--color-cta-text 변수로 전환
   — 확인 버튼 톤이 바뀔 때마다 여기도 같이 갱신되도록(카드 확인 버튼 재조정 과정에서 값만
   따로 놀던 문제 재발 방지) */
[data-theme="dark"] .btn-outline:not(:disabled) {
  background-color: var(--color-cta-fill);
  color: var(--color-cta-text);
}

/* 2026-09-21: 설정 화면 전용 .settings-action-btn(처음 문장부터 다시 보기/기본문장 삭제/
   Google로 로그인/로그아웃)만 확인 버튼처럼 테두리 없는 채움으로 — 카드 화면 이전/다음,
   AI 프롬프트 복사하기 등 다른 .btn-outline 버튼은 테두리 유지(범위 밖) */
[data-theme="dark"] .settings-action-btn:not(:disabled) {
  border-color: transparent;
}

.btn-outline:disabled:active {
  background-color: var(--color-base);
}

/* ==========================================================================
   문장 추가 화면
   ========================================================================== */
.add-body {
  flex: 1;
  overflow-y: auto;
  /* 좌우 여백 20px→16px로 통일(2026-09-15, 화면별로 제각각이던 좌우 여백 정리) */
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

/* 문장관리 필터 탭(.list-filter-btn)과 디자인 통일: 고정폭 밑줄형 탭.
   버튼 자체 스타일은 .list-filter-btn과 완전히 공유(문장관리 필터 탭 섹션 참고) */
.add-modal-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}

.add-modal-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

/* 한국어/영어 입력 필드: 라벨 띠 + 테두리 있는 입력창(2026-09-15부터, 아래 참고) */
.add-form-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.add-form-field-label {
  padding: 10px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
}

/* 무테두리 edge-to-edge 스타일 → 음성 메모 입력칸(.voice-memo-preview)과 같은 일반적인
   폼 박스 모양(테두리+둥근 모서리)으로 전환(2026-09-15, "폼입력탭의 폼을 보통 폼의 모양으로
   바꿔야겠어" 요청). 이제 테두리로 경계가 항상 보이므로 다크모드 전용 보정·포커스 전용
   box-shadow 트릭이 둘 다 불필요해져 함께 제거(음성 메모 입력칸도 별도 포커스 스타일 없음) */
.add-form-textarea {
  flex: 1;
  min-height: 100px;
  width: 100%;
  padding: 12px;
  /* 설정 화면 "글자크기"와 연동(2026-09-15) — 카드 화면 한국어 텍스트와 같은 변수 재사용 */
  font-size: var(--kr-font-size);
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-base);
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  resize: none;
}

.add-form-textarea::placeholder {
  color: var(--gray-300);
}

.modal-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-600);
  margin-top: 20px;
  margin-bottom: 4px;
}

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

.font-size-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.font-size-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gray-200);
  transition: all 0.15s ease;
}

.font-size-dot.active {
  width: 11px;
  height: 11px;
  background-color: var(--color-brand);
}

/* 2026-09-21: 토글 스위치와 같은 이유로 다크모드에서만 더 짙은 톤으로 전환 */
[data-theme="dark"] .font-size-dot.active {
  background-color: var(--color-brand-dark);
}

.stepper {
  display: flex;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
}

.stepper-btn {
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-brand-dark);
  background-color: var(--color-base);
  border: none;
  cursor: pointer;
}

.stepper-btn:first-child {
  border-right: 1.5px solid var(--gray-200);
}

.stepper-btn:disabled {
  color: var(--gray-300);
  cursor: not-allowed;
}

.modal-btn {
  flex: none;
  width: 100%;
  padding: 16px 0;
  font-size: 18px;
}

.modal-btn-submit {
  background-color: var(--color-cta-fill);
  color: var(--color-cta-text);
}

.modal-btn-submit:disabled {
  background-color: var(--gray-200);
  color: var(--gray-400);
  cursor: not-allowed;
}

/* ==========================================================================
   문장 관리 화면 / 설정 화면 (헤더는 두 화면이 공유)
   ========================================================================== */
#list-screen,
#settings-screen {
  padding: 0;
}

.screen-topbar {
  position: relative;
  display: flex;
  align-items: center;
  /* 뒤로가기 화살표와 화면 제목 사이 간격 — 8px이면 둘이 붙어 보여 "< 문장변형"이 하나의
     버튼(예: 문장변형으로 이동)처럼 오해될 수 있다는 피드백으로 확대(2026-08-27) */
  gap: 14px;
  padding: 16px 20px;
  /* 2026-09-15: 브랜드 블루 배경 → 화면 배경과 같은 무채색(--color-surface)으로 전환.
     .card-topbar와 같은 이유(반복 노출되는 큰 색면) — 아래 참고 */
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--gray-200);
  transition: background-color 0.15s ease;
}

/* 문장관리 화면의 선택 모드(다중 삭제)일 때 배경은 그대로 두고(2026-09-15, 위와 같은
   무채색 전환 원칙) 뒤로가기("취소")·타이틀("N개 선택") 텍스트 색으로만 모드 전환을 알림
   — 아래 .screen-back-btn/.screen-topbar-title의 .selecting 스코프 규칙 참고 */

.screen-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  /* 유틸리티 아이콘(관리용) — 기본 회색, 선택 모드("취소" 텍스트)에서만 브랜드 네이비로 강조(2026-09-15) */
  color: var(--gray-600);
  cursor: pointer;
}

.screen-topbar.selecting .screen-back-btn {
  color: var(--color-brand-dark);
}

.screen-back-btn svg {
  /* 22px→32px로 확대(2026-09-15) */
  width: 32px;
  height: 32px;
}

/* "홈" 버튼 — 뒤로가기를 2번 이상 눌러야 메인(카드) 화면으로 돌아갈 수 있는 화면에만 배치
   (문장변형 상세, AI 변형 프롬프트/미리보기). 한 번에 메인으로 이동해 탐색 깊이를 우회함(2026-08-27) */
.screen-home-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  /* 유틸리티 아이콘 — 기본 회색(2026-09-15) */
  color: var(--gray-600);
  cursor: pointer;
}

.screen-home-btn svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   노트형 학습 화면 — 표시 방식 토글 (25번, 2026-09-11)
   문장관리(관리용, 원래 모습 유지)와 완전히 분리된 화면에서 사용
   ========================================================================== */
/* 전체 보기/한글만/영어만 — .mode-select(화면모드)와 시각적으로 동일한 3단 세그먼트지만,
   modeSelectBtns 전역 셀렉터(.mode-select-btn)와 겹치면 화면모드 로직이 오작동하므로
   반드시 별도 클래스로 유지할 것 */
.list-display-mode-bar {
  display: flex;
  /* 좌우 여백 20px→16px로 통일(2026-09-15) */
  margin: 10px 16px 0;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
}

.list-display-mode-btn {
  flex: 1;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-600);
  background-color: var(--color-base);
  border: none;
  cursor: pointer;
}

.list-display-mode-btn:not(:last-child) {
  border-right: 1.5px solid var(--gray-200);
}

.list-display-mode-btn.active {
  background-color: var(--color-brand);
  /* 브랜드 블루 배경 위 텍스트라 테마와 무관하게 흰색 고정 */
  color: #FFFFFF;
}

/* 표시 방식에 따라 한국어/영어 텍스트를 통째로 숨김(항목 단위가 아니라 목록 컨테이너
   단위로 한 번만 토글 — 매번 재렌더링할 필요 없음) */
#note-study-list.hide-kr .note-study-kr {
  display: none;
}

#note-study-list.hide-en .note-study-en {
  display: none;
}

/* 한글만/영어만 모드에서 문장을 탭하면 그 문장만 인출연습처럼 반대쪽 언어를
   임시로 보여줌(.revealed) — 다시 탭하면 원래대로 복귀. "전체보기"에서는
   이미 둘 다 보이므로 이 규칙이 적용될 대상 자체가 없음 (2026-09-14, 25번 보완) */
#note-study-list.hide-en .note-study-item.revealed .note-study-en {
  display: block;
}

#note-study-list.hide-en .note-study-item.revealed .note-study-kr {
  display: none;
}

#note-study-list.hide-kr .note-study-item.revealed .note-study-kr {
  display: block;
}

#note-study-list.hide-kr .note-study-item.revealed .note-study-en {
  display: none;
}

/* display:flex를 쓰지 않음 — 세로 flex 컨테이너로 만들면 자식인 .list-display-mode-bar
   (overflow:hidden 있음)가 목록이 길어 내용이 넘칠 때 flex-shrink로 거의 0px까지
   찌그러지는 버그가 있었음(2026-09-11 발견, overflow가 hidden/auto/scroll인 flex
   아이템은 자동 최소 크기가 content 기준이 아니라 0이 되는 flexbox 스펙 때문).
   일반 블록 흐름으로 두면 이 문제 자체가 발생하지 않음(#list-filter-section과 동일) */
/* 우하단 플로팅 버튼(.note-autoplay-fab)의 position:absolute 기준점 */
#note-study-screen {
  position: relative;
}

.note-study-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}

.note-study-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  /* 아래 참고: 우하단 원형 플로팅 버튼(.note-autoplay-fab)이 스크롤 끝까지 내려도
     마지막 항목을 가리지 않도록 여유 공간 확보(버튼 56px + 여백 20px + 약간의 여유) */
  padding-bottom: 76px;
}

/* 관리용 아이콘(별표/깃발/AI/체크박스) 전혀 없이 스피커 하나만 — 순수 읽기 화면 */
.note-study-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  /* 좌우 패딩 16px→4px(2026-09-16) — 문장관리 목록 카드(.sentence-list-item)와 같은 이유로
     통일: 카드 바깥 테두리(16px)는 유지한 채 내부 패딩만 줄여 텍스트 인셋을 32px→20px로 축소 */
  padding: 14px 4px;
  background-color: var(--gray-50);
  border-radius: 12px;
}

.note-study-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
}

.note-study-kr {
  font-size: var(--kr-font-size);
  font-weight: 600;
  /* 메인 카드 화면의 한국어 텍스트(.kr-text)와 색상 통일(2026-09-16) — font-size/weight는
     이미 같았는데 색만 --color-text-primary(더 진함)를 써서 더 크고 진하게 보였음 */
  color: var(--color-text-secondary);
  word-break: keep-all;
}

.note-study-en {
  font-size: var(--kr-font-size);
  color: var(--color-text-secondary);
  word-break: keep-all;
}

/* 이 화면의 유일한 아이콘 — 관리 아이콘과 성격이 달라(암기 보조) 작고 은은하게
   (2026-09-12, 26px→32px로 확대 — 너무 작다는 피드백) */
.note-study-speaker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--gray-500);
  cursor: pointer;
}

/* 2026-09-21: --gray-500(다크 #7E8795)가 전반적으로 밝아진 다크모드 팔레트 안에서는 유독
   칙칙해 보여, 이 아이콘만 다크모드에서 밝게 전환(--gray-700 1차 → 추가 피드백으로
   --gray-800(#E5E8ED)로 재조정) */
[data-theme="dark"] .note-study-speaker-btn {
  color: var(--gray-800);
}

/* lucide volume-2 아이콘의 그림 높이가 짧은 문제(24번에서 확인) — 여기서도 동일 보정
   (2026-09-12, 18px→22px로 확대) */
.note-study-speaker-btn svg {
  width: 22px;
  height: 22px;
}

/* 자동재생(2026-09-16) — 한국어를 순서대로 읽어주고 대기시간만큼 기다린 뒤 자동으로
   다음 문장으로 넘어감. 대기시간 조절은 표시방식 토글 바로 아래, 재생 버튼 자체는
   우하단에 플로팅(2026-09-16 재배치 — 인트로 문구 삭제와 함께 요청). 처음엔 아이콘만
   있는 원형이었으나 "안내문구가 있어야 할 것 같다"는 피드백으로 아이콘+"자동재생" 텍스트가
   있는 알약형으로 변경(같은 날) — 플로팅 위치는 유지한 채 라벨만 버튼에 다시 붙임 */
.note-autoplay-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 16px 0;
}

/* 우하단 고정 알약형 버튼 — #note-study-screen(position:relative)을 기준으로 위치하므로
   넓은 화면(PC)에서 .screen이 가운데 정렬 패널로 제한되는 것과 무관하게 항상 그 패널
   안쪽 우하단에 붙음(viewport 기준 position:fixed를 썼다면 넓은 화면에서 패널을 벗어나
   화면 맨 오른쪽에 떠버렸을 것) */
.note-autoplay-fab {
  position: absolute;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  background-color: var(--color-cta-fill);
  border: none;
  border-radius: 999px;
  color: var(--color-cta-text);
  box-shadow: 0 4px 16px rgba(20, 23, 28, 0.25);
  cursor: pointer;
  z-index: 5;
}

/* 재생 중에는 정지 상태로 전환 — 카드 화면의 "확인" 탭후 상태와 같은 강조 원칙(accent-star).
   글자색은 --color-cta-text(다크모드에서 블루)와 무관하게 항상 흰색 고정 — accent-star
   호박색 배경은 CTA 블루 체계와 별개라 다크모드에서도 블루 글자가 섞이면 안 보임 */
.note-autoplay-fab.active {
  background-color: var(--color-accent-star);
  color: #FFFFFF;
}

.note-autoplay-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.note-autoplay-wait {
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-autoplay-wait-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.note-autoplay-wait .stepper-btn {
  width: 28px;
  height: 28px;
  font-size: 15px;
}

/* 자동재생 중 지금 읽고 있는 문장 강조 — 배경은 theme-aware 톤(--gray-100)만 살짝 올리고
   좌측에 브랜드 컬러 인셋 보더만 추가(고정 밝은 배경을 쓰지 않아 다크모드 텍스트
   대비 문제가 생기지 않음, .en-text류 "항상 밝은 칩"과는 다른 패턴) */
.note-study-item.auto-current {
  background-color: var(--gray-100);
  box-shadow: inset 3px 0 0 var(--color-brand);
}

/* ==========================================================================
   음성 메모 화면 (27번, 2026-09-14) — 문장 아이디어를 말로 빠르게 캡처
   ========================================================================== */
.voice-memo-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
}

.voice-memo-intro {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand-dark);
  text-align: left;
  line-height: 1.5;
}

[data-theme="dark"] .voice-memo-intro {
  color: var(--color-text-primary);
}

.voice-memo-capture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* 아이콘부터 이어지는 전체 블록을 위로 14px 올림(20px→6px, 2026-09-15) */
  margin-top: 6px;
  padding: 20px;
  background-color: var(--gray-50);
  border-radius: 12px;
}

/* 2026-09-15: 솔리드 브랜드 블루 채움 → 회색 아웃라인으로 전환(헤더 무채색 전환과 같은
   맥락 — 녹음 시작은 이 화면의 단일 주 동작이지만, 녹음 "중" 상태(.recording, 아래)에서
   이미 강조색으로 전환되므로 평소엔 유틸리티 아이콘처럼 차분한 톤으로 남겨둠) */
.voice-memo-record-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: var(--color-base);
  /* 한 단계 밝은 회색으로 교체(2026-09-15) */
  color: var(--gray-500);
  /* 테두리 선 색을 마이크 아이콘 선 색과 동일하게 맞춤(2026-09-15) */
  border: 2px solid var(--gray-500);
  border-radius: 50%;
  cursor: pointer;
}

/* 2026-09-21: .note-study-speaker-btn/.settings-info-btn과 같은 이유로 다크모드에서만 밝게
   (--gray-700 1차 → 추가 피드백으로 --gray-800 재조정) */
[data-theme="dark"] .voice-memo-record-btn {
  color: var(--gray-800);
  border-color: var(--gray-800);
}

.voice-memo-record-btn svg {
  width: 28px;
  height: 28px;
}

/* 녹음 중에는 accent-star 색으로 전환 — 별표/깃발 등 이 앱의 "활성 상태" 표시와 톤을 맞춤 */
.voice-memo-record-btn.recording {
  background-color: var(--color-accent-star);
  border-color: var(--color-accent-star);
  color: #FFFFFF;
}

.voice-memo-record-btn:disabled {
  background-color: var(--color-base);
  /* 비활성 상태도 같은 원칙(테두리=아이콘 선 색)으로 통일 */
  border-color: var(--gray-300);
  color: var(--gray-300);
  cursor: not-allowed;
}

.voice-memo-status {
  font-size: 13px;
  color: var(--color-text-secondary);
  /* 아래 여백을 기존(부모 flex gap 10px)의 두 배로 — 2026-09-15 */
  margin-bottom: 10px;
}

.voice-memo-preview {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-base);
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  resize: vertical;
}

.voice-memo-save-btn {
  width: 100%;
}

.voice-memo-list-section {
  margin-top: 28px;
}

.voice-memo-list-empty {
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
}

.voice-memo-list {
  display: flex;
  flex-direction: column;
  /* 메모 항목 간 줄간격을 기존(10px)의 절반으로 축소 — 2026-09-15 */
  gap: 5px;
  margin-top: 12px;
}

.voice-memo-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  /* 위아래 줄간격을 기존(14px)의 절반(7px)으로 축소(2026-09-15, "그리드가 들쭉날쭉해
     보인다"는 피드백). 좌우 패딩은 문장관리/노트형 학습 목록과 같은 이유로 16px→4px로
     축소(2026-09-16) — 카드 바깥 테두리(16px)는 유지한 채 내부 패딩만 줄여 텍스트
     인셋을 32px→20px로 맞춤(.sentence-list-item/.note-study-item과 통일) */
  padding: 7px 4px;
  background-color: var(--gray-50);
  border-radius: 12px;
  cursor: pointer;
}

.voice-memo-item-text {
  flex: 1;
  font-size: 15px;
  color: var(--color-text-primary);
  word-break: keep-all;
}

.voice-memo-item-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--gray-500);
  cursor: pointer;
}

.voice-memo-item-delete-btn svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   문장관리 필터 탭 (전체 / 중요 / 미암기)
   ========================================================================== */
.list-filter-bar {
  display: flex;
  gap: 8px;
  /* 좌우 여백 20px→16px로 통일(2026-09-15) — 아래 목록(.sentence-list, 16px)과 정렬 맞춤 */
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
}

/* 버튼형(테두리 박스/배경 채움) 대신 밑줄형 탭. 문장추가 탭(.add-modal-tab-btn)과
   완전히 동일한 스타일을 공유 — 둘 중 하나만 고치면 어긋나므로 항상 같이 수정할 것 (2026-08-21) */
.list-filter-btn,
.add-modal-tab-btn {
  flex: 1;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-500);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.list-filter-btn.active,
.add-modal-tab-btn.active {
  color: var(--color-brand-dark);
  border-bottom-color: var(--color-brand-dark);
}

/* 브랜드 네이비가 다크 배경과 대비 1.8:1로 거의 안 보임 → 다크모드 전용 색으로 전환
   (.modal-title 등에서 이미 겪은 것과 같은 문제, 2026-08-21).
   2026-09-20: 중립색(--color-text-primary)으로 포기했던 것을 액티브 블루로 복원 */
[data-theme="dark"] .list-filter-btn.active,
[data-theme="dark"] .add-modal-tab-btn.active {
  color: #5B9FE8;
  border-bottom-color: #5B9FE8;
}

/* 현재 활성 필터 탭 기준 문장 개수 안내 — 탭과 구분선 사이, 은은하되 읽히는 정도로 */
.list-count-info {
  /* 좌우 여백 20px→16px로 통일(2026-09-15, 가운데 정렬이라 시각적 영향은 적지만 일관성 위해) */
  padding: 8px 16px 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
}

/* 필터(중요/미암기)로 걸러진 문장만 학습하기(23번) + 노트형 학습 진입(25번) —
   "전체" 필터에서는 플래시카드 버튼만 숨기고, 노트형 학습 버튼은 항상 노출(문장이 있으면).
   두 버튼 라벨이 길어(예: "이 조건으로 플래시카드 학습") 옆으로 나란히 두면 좁은 화면에서
   넘칠 수 있어 세로로 쌓음(2026-09-11) */
.list-study-entry-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 좌우 여백 20px→16px로 통일(2026-09-15) — 아래 목록과 정렬 맞춤 */
  margin: 10px 16px 0;
}

.list-filter-study-btn {
  width: 100%;
  padding: 8px 18px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-cta-text);
  background: var(--color-cta-fill);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

/* 2026-09-21: 아웃라인 대신 확인 버튼과 같은 CTA 토큰(--color-cta-fill/--color-cta-text)으로
   채워 플래시카드 학습 버튼과 같은 색이 되도록 변경. 대신 "보조 액션"이라는 시각적 구분은
   크기/비율로 줌: 전체 폭 대신 auto 폭으로 가운데 정렬해 짧게, 세로 패딩을 늘려 더 두꺼운
   알약형으로. 추가 피드백으로 테두리(브랜드 블루) 복원 + 좌우 여백 2배(28px→56px)로 가로 확장 */
.list-note-study-btn {
  align-self: center;
  width: auto;
  padding: 12px 56px;
  border: 1.5px solid var(--color-brand);
}

/* 선택 모드일 때는 뒤로가기 아이콘 대신 "취소" 텍스트로 전환 */
.screen-back-btn.text-mode {
  width: auto;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
}

/* 화면마다 우측 버튼 유무·폭이 달라(선택 버튼/홈 버튼/없음) 일반 flex 흐름으로는 제목이
   화면마다 미묘하게 다른 위치에 보였음 → 절대 위치로 좌우 버튼과 무관하게 항상 상단바
   전체 폭 기준 정가운데 고정(2026-08-27, "화면이름은 보통 정가운데 아니야?" 피드백) */
.screen-topbar-title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  font-size: 18px;
  font-weight: 700;
  /* 헤더 아이콘들과 같은 톤으로 통일(2026-09-16), 선택 모드("N개 선택")에서만
     브랜드 네이비로 강조 — 아래 .selecting 스코프 규칙 참고 */
  color: var(--gray-600);
  /* 자간을 살짝 넓게(2026-09-16) */
  letter-spacing: 0.3px;
}

.screen-topbar.selecting .screen-topbar-title {
  color: var(--color-brand-dark);
}

/* ==========================================================================
   문장관리 상단바 우측 아이콘 버튼(검색·선택) — 2026-09-01, 22번
   ========================================================================== */
.screen-topbar-icon-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  /* 유틸리티 아이콘(검색·선택 진입) — 기본 회색(2026-09-15) */
  color: var(--gray-600);
  cursor: pointer;
}

.screen-topbar-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* 우측 아이콘 그룹 중 맨 앞(검색)에만 붙여 그룹 전체를 오른쪽 끝으로 밈 — 그룹 내
   모든 요소에 각자 margin-left:auto를 주면 flexbox가 남는 공간을 균등 분배해
   그룹이 오른쪽 끝이 아니라 화면 중간에 붕 뜨는 버그가 있었음(2026-09-01 발견).
   이후에 새 아이콘 버튼을 이 그룹에 추가할 땐 이 클래스를 새로 붙이지 말 것 */
.screen-topbar-actions-lead {
  margin-left: auto;
}

/* 선택 모드(다중 삭제) 전용 "전체 선택/전체 해제" 텍스트 버튼 — 검색/선택 아이콘과
   동시에 보이지 않으므로(선택 모드일 때만 노출) margin-left:auto를 단독으로 사용해도
   위 .screen-topbar-actions-lead 버그(auto-margin 균등분배)가 재발하지 않음 */
.screen-topbar-text-btn {
  margin-left: auto;
  padding: 0 4px;
  background: none;
  border: none;
  /* 선택 모드 전용 텍스트 버튼(전체 선택/해제) — "취소"/"N개 선택"과 같은 톤으로
     브랜드 네이비 유지(2026-09-15, 헤더 무채색 전환 이후에도 선택 모드 표시는 그대로) */
  color: var(--color-brand-dark);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* 검색 모드에서 타이틀(절대 위치) 자리를 대신해 flex 흐름에 실제로 자리를 차지 —
   우측 아이콘들이 숨겨지며 남는 공간을 자연스럽게 채움. 처음엔 배경 없이 텍스트만
   블루 바 위에 얹는 방식이었으나 "검색칸이 안 보인다"는 피드백으로 눈에 띄는 폼
   박스로 변경(2026-09-01) — 하늘색 칩(.en-text/.backup-reminder-banner와 같은
   --color-chip-answer, 테마 무관 항상 밝은 배경) 안에 아이콘+입력창+취소(X) 버튼을 배치 */
.list-search-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-chip-answer);
  border-radius: 8px;
  height: 40px;
  padding: 0 10px;
}

.list-search-box-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  /* 밝은 배경 위 고정 요소라 .en-text와 같은 규칙으로 리터럴 값 사용 */
  color: #4B5D6B;
}

.list-search-input {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-family: inherit;
  color: #1E2A38;
  background: none;
  border: none;
  outline: none;
}

.list-search-input::placeholder {
  color: #4B5D6B;
}

.list-search-clear-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: #4B5D6B;
  cursor: pointer;
}

.list-search-clear-btn svg {
  width: 15px;
  height: 15px;
}

/* 문장관리 선택 모드 전용 하단 고정 삭제 버튼 — 상단 구석(취소 옆)에 있던 것보다 엄지로
   누르기 쉬운 위치로 이동(2026-08-27). .ai-variation-preview-footer/.variation-detail-footer와
   같은 개념, 비활성 스타일은 기존 .btn-outline:disabled를 그대로 재사용 */
.list-bulk-delete-footer {
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gray-100);
}

.sentence-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sentence-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 좌우 패딩 16px→4px(2026-09-16) — 카드 바깥 테두리(화면 기준 16px)는 다른 화면의
     버튼·안내문과 동일하게 유지한 채, 카드 자체의 내부 패딩만 줄여 텍스트 시작 위치를
     32px(16+16)에서 20px(16+4)로 앞당김. 목적: (1) 카드 없는 일반 텍스트/버튼과 텍스트
     시작 위치를 더 가깝게 맞추고 (2) 텍스트가 쓸 수 있는 가로 폭을 넓혀 줄바꿈이
     더 적게 일어나도록 함(줄이 너무 짧아지는 것을 피함) */
  padding: 14px 4px;
  background-color: var(--gray-50);
  border-radius: 12px;
  border: 1.5px solid transparent;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.sentence-list-item.checked {
  background-color: var(--gray-100);
  border-color: var(--color-brand);
}

.sentence-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1.5px solid var(--gray-300);
  background-color: var(--color-base);
}

.sentence-checkbox svg {
  width: 13px;
  height: 13px;
  color: #FFFFFF;
  opacity: 0;
}

.sentence-list-item.checked .sentence-checkbox {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}

.sentence-list-item.checked .sentence-checkbox svg {
  opacity: 1;
}

.sentence-list-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* 최초 실행 시 자동 제공되는 기본문장 표시(문장추가/파일가져오기 등으로 직접 넣은 문장에는 없음).
   사용자가 해당 문장을 수정하면 사라짐(updateSentence()에서 source 제거) */
.sentence-badge-default {
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600);
  background-color: var(--gray-100);
  border-radius: 999px;
}

.sentence-list-kr {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sentence-list-en {
  font-size: 13px;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sentence-list-empty-msg {
  padding: 40px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.sentence-list-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* 별/깃발/AI 아이콘 크기(2026-08-27, 15-1의 .variation-item-add-btn과 동일한 크기 규칙 재사용).
   2026-09-18: 문장관리에서는 AI 아이콘(.sentence-ai-btn)이 폐지됐지만, "문장변형 > 내 문장
   변형하기" 목록에서 별표/깃발 없이 이 아이콘 하나만 다시 쓰임(프롬프트 화면 없이 바로 생성) */
.sentence-star-btn,
.sentence-unfamiliar-btn,
.sentence-ai-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--gray-600);
  cursor: pointer;
}

.sentence-star-btn svg,
.sentence-unfamiliar-btn svg,
.sentence-ai-btn svg {
  width: 18px;
  height: 18px;
}

.sentence-ai-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.sentence-star-btn.active,
.sentence-unfamiliar-btn.active {
  color: var(--color-accent-star);
  background-color: var(--color-accent-star-bg);
}

.sentence-star-btn.active svg,
.sentence-unfamiliar-btn.active svg {
  fill: currentColor;
}

/* ==========================================================================
   설정 화면
   ========================================================================== */
.settings-body {
  flex: 1;
  overflow-y: auto;
  /* 좌우 여백 20px→16px로 통일(2026-09-15) */
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.settings-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  margin: 24px 4px 8px;
}

.storage-usage-info {
  margin-bottom: 16px;
}

.storage-usage-count {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}

.storage-usage-bar-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: var(--gray-200);
  overflow: hidden;
}

.storage-usage-bar-fill {
  height: 100%;
  min-width: 3%;
  border-radius: 3px;
  background-color: var(--color-brand);
}

.storage-usage-detail {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 6px 0 0;
  text-align: right;
}

.settings-action-btn {
  width: 100%;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  padding: 16px;
  margin-bottom: 10px;
  font-size: 18px;
}

.settings-action-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* 클라우드 백업/복원/삭제 — "?" 설명 버튼을 액션 버튼 글자 뒤에 같은 시각적 버튼 안에
   포함시키고, 전체 길이를 로그아웃과 동일한 전체 폭으로 맞춤(2026-09-15, "물음표를 글자
   뒤에 위치시키고 버튼은 로그아웃과 동일하게 모두 길이 맞추어줘" 요청). 실제로는 액션
   버튼(.settings-action-main)과 설명 버튼(.settings-info-btn)이 분리된 <button> 두 개인데
   — 버튼 안에 버튼을 중첩할 수 없는 HTML 제약 때문 — 이 <div>가 시각적 버튼 껍데기
   (테두리·배경·둥근모서리·전체폭)를 담당해 하나의 버튼처럼 보이게 함 */
.settings-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  margin-bottom: 10px;
  background-color: var(--color-base);
  border: 1.5px solid var(--color-brand);
  border-radius: 12px;
}

/* 둘 중 어느 버튼을 누르든 그룹 전체가 눌린 것처럼 배경이 반전(기존 .btn-outline:active와 같은 느낌) */
.settings-action-group:has(:active) {
  background-color: var(--color-brand);
}

.settings-action-group:has(:active) .settings-action-main,
.settings-action-group:has(:active) .settings-info-btn {
  color: #FFFFFF;
}

.settings-action-main {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-brand-dark);
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.settings-action-main svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* 2026-09-20: .btn-outline과 같은 이유(배경=페이지와 동일, 글자=진한 남색이라 다크 배경 위에
   안 보임)로 백업내보내기/초기화/지금 백업/클라우드 문장으로 교체/클라우드 백업 삭제 등
   설정 화면 버튼 전반이 안 읽히던 문제 — 테두리는 그대로 두고 배경·글자만 채움.
   경고 변형(.settings-action-group-warning)은 테두리·글자색을 accent-star로 따로 덮어써
   그대로 유지되므로 배경만 공유해도 괜찮음 */
/* 2026-09-21: 하드코딩값(#1A2434/#3993FF) 대신 --color-cta-fill/--color-cta-text 변수로 전환
   (.btn-outline과 같은 이유) */
[data-theme="dark"] .settings-action-group {
  background-color: var(--color-cta-fill);
}

[data-theme="dark"] .settings-action-main {
  color: var(--color-cta-text);
}

/* 2026-09-21: 백업 내보내기/초기화 두 버튼만 먼저 테두리를 없애 확인 버튼처럼 순수 채움
   형태로 만들어봤는데 반응이 좋아, 설정 화면의 나머지 아웃라인 버튼 전체로 확장 —
   .settings-action-group(클라우드에 백업 포함)과 .settings-action-group-warning(클라우드
   문장으로 교체/클라우드 백업 삭제, 자체 border-color 재정의를 다시 덮어씀)까지 전부
   다크모드에서 테두리를 투명 처리(border-width는 유지해 레이아웃 안 흔들림) */
[data-theme="dark"] .settings-action-group,
[data-theme="dark"] .settings-action-group-warning {
  border-color: transparent;
}

/* "?" 설명 버튼 — 원형 물음표 아이콘(lucide circle-help 자체가 이미 원 안에 물음표)만
   보이도록 자체 테두리·배경·고정폭 없이 라벨 텍스트 바로 뒤에 배치(2026-09-15) */
.settings-info-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
}

/* 2026-09-21: .note-study-speaker-btn과 같은 이유로 다크모드에서만 밝게
   (--gray-700 1차 → 추가 피드백으로 --gray-800 재조정) */
[data-theme="dark"] .settings-info-btn {
  color: var(--gray-800);
}

.settings-info-btn svg {
  width: 20px;
  height: 20px;
}

/* "클라우드에서 복원"/"클라우드 백업 삭제"는 되돌릴 수 없는 동작이라, 누르기 전에도 주의가
   필요함을 암시하도록 다른 설정 버튼과 다른 색(즐겨찾기와 같은 accent-star 계열) 사용
   (2026-09-12 도입, 2026-09-15 그룹 단위로 이전)
   2026-09-21: 테두리·글자만 오렌지고 배경은 다른 설정 버튼과 같은 파란 톤이라 어색하다는
   피드백 — 별표/깃발 칩과 같은 방식(--color-accent-star-bg)으로 배경도 오렌지 톤으로 통일 */
.settings-action-group-warning {
  border-color: var(--color-accent-star);
  background-color: var(--color-accent-star-bg);
}

/* 2026-09-21: 다크모드에서는 --color-accent-star-bg(18% 저채도 틴트)가 얇은 배너/칩에서는
   충분했지만 이 버튼처럼 넓은 면적에서는 배경이 거의 안 보여 "테두리만 오렌지"로 읽히는
   문제 — 확인 버튼(--color-cta-fill)과 같은 방식으로, 테두리·글자(accent-star)와 어울리는
   진한 호박색 솔리드 채움을 별도로 사용 */
[data-theme="dark"] .settings-action-group-warning {
  background-color: #584428;
}

.settings-action-group-warning .settings-action-main {
  color: var(--color-accent-star);
}

.settings-action-group-warning:has(:active) {
  background-color: var(--color-accent-star);
}

.cloud-account-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 10px;
}

.settings-footer {
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--gray-300);
}

/* ==========================================================================
   도움말 화면
   ========================================================================== */
#help-screen {
  padding: 0;
}

.help-body {
  flex: 1;
  overflow-y: auto;
  /* 좌우 여백 20px→16px로 통일(2026-09-15) */
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
}

.help-intro {
  font-size: 15px;
  font-weight: 600;
  /* 가운데→왼쪽 정렬로 통일(2026-09-15) — 문장변형/음성메모 등 다른 안내문과 정렬 방식 통일 */
  text-align: left;
  color: var(--color-brand-dark);
  padding: 16px 8px 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
}

[data-theme="dark"] .help-intro {
  color: var(--color-text-primary);
}

.help-accordion {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border-top: 1px solid var(--gray-100);
}

.help-accordion-item {
  border-bottom: 1px solid var(--gray-100);
}

.help-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-brand-dark);
  text-align: left;
  cursor: pointer;
}

.help-accordion-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
  transition: transform 0.2s ease;
}

.help-accordion-item.open .help-accordion-chevron {
  transform: rotate(180deg);
}

.help-accordion-content {
  padding: 8px 16px 16px;
  background-color: var(--color-base);
  border: 1px solid var(--gray-200);
}

/* 다크모드는 배경이 이미 어두워 흰색이 어울리지 않으므로 기존 어두운 배경 유지 */
[data-theme="dark"] .help-accordion-content {
  background-color: var(--gray-100);
  border: none;
}

.help-subsection-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 18px 0 8px;
}

.help-details {
  margin: 12px 0 8px;
  padding-left: 12px;
  border-left: 1px solid var(--color-brand);
}

.help-details .help-mini-title {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.help-details .help-mini-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-brand);
  flex-shrink: 0;
}

.help-details summary.help-subsection-title {
  margin: 0;
  cursor: pointer;
  list-style: none;
}

.help-details summary::-webkit-details-marker {
  display: none;
}

.help-details summary::after {
  content: '▸';
  display: inline-block;
  margin-left: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.help-details[open] summary::after {
  content: '▾';
}

.help-body .help-details p,
.help-body .help-details .help-list,
.help-body .help-details .help-note-inline,
.help-body .help-details .help-example {
  font-size: 14px;
}

.help-body p {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}

.help-note,
.help-note-inline {
  display: block;
  font-size: 15px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.help-list {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.help-list ul,
.help-list ol {
  margin-top: 6px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.help-list strong {
  color: var(--color-text-primary);
}

.help-example {
  background-color: var(--gray-50);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 6px;
  font-size: 15px;
  color: var(--color-text-primary);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ==========================================================================
   문장변형 화면 — 탭 2개(예시 둘러보기 / 내 문장 변형하기, 2026-09-18)
   ========================================================================== */
/* 탭 버튼 자체 스타일(.add-modal-tab-btn)은 문장추가 화면과 완전히 공유 — 여기서는 좌우 여백만 추가
   (문장추가는 부모 .add-body가 이미 패딩을 갖고 있지만, 이 화면은 tabs/panel을 화면 최상위에 바로
   배치해 그 여백이 없음) */
#variation-tabs {
  padding: 12px 16px 0;
}

.ai-variation-bank-entry {
  padding: 4px 16px calc(16px + env(safe-area-inset-bottom));
}

/* AI 변형 보관함 학습 모드의 "내 카드덱에 추가" 버튼 — 이미 승격된 항목은 accent-star 색으로
   구분(별표/깃발의 .active와 같은 색 언어를 재사용하되, 아이콘을 채워버리면(fill) 원 안의
   "+"가 배경색과 같아져 안 보이므로 별도 클래스로 배경/색만 전환하고 아이콘은 JS에서 체크로 교체) */
#card-bank-promote-btn.promoted {
  color: var(--color-accent-star);
  background-color: var(--color-accent-star-bg);
}

/* ==========================================================================
   문장변형 체험 화면
   ========================================================================== */
/* 목록 상단 안내 문구 — "탭하면 변형을 볼 수 있다"는 직관을 문장으로 보강.
   다크모드에서 네이비가 배경과 거의 안 보이는 문제는 .list-filter-btn/.help-accordion-header와
   같은 패턴으로 해결(라이트=브랜드 네이비, 다크=밝은 텍스트색)(2026-08-26).
   word-break: keep-all이 빠져 있어 좁은 화면에서 단어 중간에 아무 데서나 줄바꿈되던 문제 수정 —
   자연스러운 지점(HTML의 <br>)에서만 줄바꿈되도록 함(2026-08-26) */
.variation-list-intro {
  /* 좌우 여백 20px→16px로 통일(2026-09-15) — 아래 목록(.variation-card-list, 16px)과 정렬 맞춤 */
  padding: 12px 16px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-brand-dark);
  text-align: left;
  word-break: keep-all;
}

[data-theme="dark"] .variation-list-intro {
  color: var(--color-text-primary);
}

/* 세로 1열 카드 목록(2026-08-26) — 문장관리 목록(.sentence-list, 수정 진입용)과
   시각적으로 구분해서 "이건 다른 동작(변형 보기)"이라는 것을 형태로도 드러냄.
   글자 크기는 설정 화면의 글자크기 조절과 동일한 변수를 재사용해 카드 학습 화면과 함께 커짐 */
.variation-card-list {
  flex: 1;
  overflow-y: auto;
  /* 좌우 여백 20px→16px로 통일(2026-09-15) */
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.variation-card {
  padding: 16px;
  background-color: var(--color-base);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

[data-theme="dark"] .variation-card {
  background-color: var(--gray-100);
  border: none;
  box-shadow: none;
}

.variation-card-kr {
  font-size: var(--kr-font-size);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px;
  word-break: keep-all;
}

.variation-card-en {
  font-size: var(--en-font-size);
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: -0.3px;
  margin: 0;
  word-break: keep-all;
}

.variation-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 12px;
  color: var(--color-text-muted);
}

.variation-card-count {
  font-size: 13px;
}

.variation-card-footer svg {
  width: 16px;
  height: 16px;
}

.variation-detail-body {
  flex: 1;
  overflow-y: auto;
  /* 좌우 여백 20px→16px로 통일(2026-09-15) */
  padding: 16px 16px 16px;
}

/* "선택한 문장 추가하기" 고정 하단 버튼 — .ai-variation-preview-footer와 같은 개념(2026-08-27) */
.variation-detail-footer {
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gray-100);
}

/* 영어는 기본으로 가려두고(카드 화면의 "확인"과 같은 개념) 탭하면 드러남(2026-08-25) */
.variation-item {
  padding: 10px 12px;
  margin-bottom: 20px;
  background-color: var(--gray-50);
  border-radius: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* 원문(목록에서 탭한 문장)과 일치하는 항목에 하늘색 배경 — 별도 원문 박스를 없애는 대신 도입(2026-08-26).
   한때 "지금 영어가 보이는 항목"을 동적으로 따라가는 방식이었으나, 2026-09-17에 전체 항목이 기본으로
   영어부터 보이도록 바뀌며 그 방식은 의미가 없어져 다시 "원문과 일치하는 항목에만 고정" 방식으로 회귀
   (렌더링 시점에만 결정, 탭해서 한/영을 바꿔도 이 강조는 움직이지 않음). 배경(--color-chip-answer)이
   테마와 무관하게 항상 밝은색이라, 안의 텍스트(태그·한국어·영어)도 .en-text와 같은 규칙으로 고정값 사용 */
.variation-item.variation-item-flipped {
  background-color: var(--color-chip-answer);
  transition: background-color 0.4s ease;
}

.variation-item-flipped .variation-item-tag,
.variation-item-flipped .variation-item-kr,
.variation-item-flipped .variation-item-en {
  color: #1E2A38;
}

/* 태그 + "내 문장으로 추가" 버튼을 한 줄에 배치(2026-08-26) */
.variation-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 2px;
}

/* [대괄호] 태그 — "시제" 카테고리(현재/과거/미래/현재완료)는 "~시제"를 붙여 단독으로도 뜻이 분명하게 함.
   기존 --color-text-muted(대비 3.3:1)는 컬러 가이드상 소글씨 금지 색인데 여기 쓰여있어 잘 안 보이는
   문제가 있었음 → --color-text-secondary(대비 6.4:1, 라이트/다크 둘 다 자동 대응)로 교체(2026-08-26) */
.variation-item-tag {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0;
}

/* "내 문장으로 추가" 버튼 — 카드 화면 마킹 아이콘(.card-mark-btn)과 같은 원형 버튼 규칙을 축소해 재사용.
   2026-08-26: 추가 완료 시 체크 아이콘 + 즐겨찾기 강조와 같은 accent-star 색(.card-mark-btn.active와
   동일 규칙)으로 전환해 "표시가 남는다"는 느낌을 통일.
   2026-08-27: 탭 즉시 추가되던 것을 "선택 후 하단 버튼으로 한 번에 추가"하는 방식으로 변경하며
   중간 상태 .selected 추가(브랜드 블루 채움 — 아직 확정 전이라 "추가됨"의 호박색과는 다른 색 사용,
   #check-btn 등 앱의 주요 액션 색과 통일) */
.variation-item-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--gray-500);
  cursor: pointer;
}

.variation-item-add-btn svg {
  width: 32px;
  height: 32px;
}

.variation-item-add-btn.selected {
  color: #FFFFFF;
  background-color: var(--color-brand);
}

.variation-item-add-btn.added {
  color: var(--color-accent-star);
  background-color: var(--color-accent-star-bg);
}

.variation-item-flipped .variation-item-add-btn {
  color: #1E2A38;
}

.variation-item-flipped .variation-item-add-btn.selected {
  color: #FFFFFF;
  background-color: var(--color-brand);
}

.variation-item-flipped .variation-item-add-btn.added {
  color: var(--color-accent-star);
  background-color: var(--color-accent-star-bg);
}

/* 탭하면 한/영이 카드 뒤집히듯 전환되는 플립 애니메이션(2026-08-26).
   두 텍스트를 같은 grid 칸에 겹쳐 컨테이너 높이가 더 긴 쪽에 맞춰지게 하고,
   backface-visibility로 뒷면을 숨겨 회전 각도에 따라 한쪽만 보이게 함 */
.variation-item-flip {
  perspective: 1000px;
}

.variation-item-flip-inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}

.variation-item-flip-inner.flipped {
  transform: rotateY(180deg);
}

/* 한국어가 먼저 보이는 "문제"(카드 화면과 동일한 순서). 글자 크기는 한국어/영어 동일(2026-08-26,
   이전엔 영어를 더 작게 뒀으나 플립 시 크기가 바뀌는 게 어색해 통일) — 배경이 테마에 따라 바뀌는
   요소라 색상도 테마별로 자동 전환되는 --color-text-primary를 그대로 사용 */
.variation-item-kr,
.variation-item-en {
  grid-area: 1 / 1;
  font-size: var(--kr-font-size);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.variation-item-en {
  letter-spacing: -0.3px;
  transform: rotateY(180deg);
}

/* ==========================================================================
   15-2 AI 변형(유료판) 결과 미리보기 화면 — 2026-09-18부터 프롬프트 화면 없이
   "문장변형 > 내 문장 변형하기"의 AI 아이콘에서 바로 이 화면으로 옴
   ========================================================================== */
.ai-variation-usage-info {
  padding: 0 16px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: left;
}

.ai-variation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 좌우 여백 20px→16px로 통일(2026-09-15) — 아래 목록(.sentence-list, 16px)과 정렬 맞춤 */
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
}

.ai-variation-toolbar .list-count-info {
  padding: 0;
  text-align: left;
}

.ai-variation-toolbar-btn {
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-brand-dark);
  background: none;
  border: none;
  cursor: pointer;
}

[data-theme="dark"] .ai-variation-toolbar-btn {
  color: var(--color-text-primary);
}

.ai-variation-preview-footer {
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gray-100);
}

/* ==========================================================================
   카드 학습 화면 빈 상태 (문장 0개)
   ========================================================================== */
.empty-state-msg {
  grid-row: 1 / -1;
  align-self: center;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-secondary);
}