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

  /* Surface */
  --color-base: #FFFFFF;
  --color-surface: #F4F6F8;
  --color-surface-dark: #14171C;
  --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는 유지)
   그레이스케일·텍스트 다크값은 새 컬러가이드에 아직 없어 잠정 추정치 — 실제 디자인 확정 시 교체 필요 (CLAUDE.md 참고) */
[data-theme="dark"] {
  --color-base: #14171C;
  --color-surface: #14171C;

  --color-text-primary: #E7EAEE;
  --color-text-secondary: #9AA6B2;

  --gray-50: #1C2027;
  --gray-100: #262B33;
  --gray-200: #333944;
  --gray-300: #4B5563;
  --gray-400: #5C6672;
  --gray-500: #78828E;
  --gray-600: #9AA6B2;
  --gray-700: #B4BEC8;
  --gray-800: #E7EAEE;
  --gray-900: #F5F7FA;
}

/* 모달 제목/스테퍼 버튼은 라이트 모드에서 var(--color-brand-dark)(진한 남색)를 텍스트 색으로
   쓰기 때문에 다크 배경 위에서는 시인성이 떨어짐 → 다크모드에서만 밝은 색으로 전환.
   .en-text는 자체 하이라이트 칩(--color-chip-answer, 항상 밝은 배경) 위에 있어 제외 */
[data-theme="dark"] .stepper-btn,
[data-theme="dark"] .help-accordion-header {
  color: var(--color-text-primary);
}

/* ==========================================================================
   폰트 (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;
  background-color: var(--color-brand);
}

.topbar-logo {
  font-size: 18px;
  font-weight: 700;
  /* 상단바는 항상 브랜드 블루/네이비 배경이라 테마와 무관하게 흰색 고정 */
  color: #FFFFFF;
  letter-spacing: 0.5px;
  cursor: pointer;
  /* 클릭 가능해지며 생긴 텍스트 선택(모바일 사전 찾기 팝업 등) 방지 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.topbar-more {
  position: relative;
}

.topbar-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: #FFFFFF;
  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;
}

.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);
}

.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;
}

/* ==========================================================================
   출제/정렬 순서 선택 (세로 라디오 목록)
   ========================================================================== */
.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);
}

[data-theme="dark"] .sort-option-btn.active {
  color: var(--color-text-primary);
}

.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;
}

/* 정답 확인 전에는 영어 박스(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: var(--color-text-muted);
}

.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;
}

/* ==========================================================================
   카드 화면 마킹 아이콘 바 (정답 확인 후에만 노출)
   ========================================================================== */
.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;
}

/* 이전/다음: 그레이 아웃라인 (새 컬러가이드 컴포넌트 규칙) */
#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 채움 */
#check-btn {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: #FFFFFF;
}

#check-btn.revealed {
  background-color: var(--color-brand-dark);
  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;
}

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

/* ==========================================================================
   문장 추가 화면
   ========================================================================== */
.add-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 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;
}

/* 한국어/영어 입력 필드: 라벨 띠 + 테두리 없는 입력창(레퍼런스 스타일).
   .add-body의 좌우 패딩(20px)을 상쇄해 화면 끝까지 꽉 차게 함 */
.add-form-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0 -20px;
}

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

.add-form-textarea {
  flex: 1;
  min-height: 100px;
  width: 100%;
  padding: 12px 20px;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-base);
  border: none;
  resize: none;
}

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

/* 다크모드는 입력창 배경(--color-base)이 화면 배경(--color-surface)과 같은 색이라
   테두리 없이는 경계가 전혀 안 보임 → 다크모드에서만 옅은 테두리로 구분 (2026-08-21) */
[data-theme="dark"] .add-form-textarea {
  border: 1px solid var(--gray-200);
}

/* 기본 테두리가 없는 입력창이라 포커스 시에도 표시가 필요함.
   레이아웃이 흔들리지 않도록 border 대신 안쪽 box-shadow 링으로 표시 (2026-08-21) */
.add-form-textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-brand);
}

.modal-desc {
  font-size: 14px;
  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);
}

.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-brand);
  /* 브랜드 블루 배경 위 텍스트라 테마와 무관하게 흰색 고정 */
  color: #FFFFFF;
}

.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;
  background-color: var(--color-brand);
  transition: background-color 0.15s ease;
}

/* 문장관리 화면의 선택 모드(다중 삭제)일 때 브랜드 네이비로 바뀌어 모드 전환을 알림 */
.screen-topbar.selecting {
  background-color: var(--color-brand-dark);
}

.screen-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  /* 상단바는 항상 브랜드 블루/네이비 배경이라 테마와 무관하게 흰색 고정 */
  color: #FFFFFF;
  cursor: pointer;
}

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

/* "홈" 버튼 — 뒤로가기를 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;
  color: #FFFFFF;
  cursor: pointer;
}

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

/* ==========================================================================
   노트형 학습 화면 — 안내 + 표시 방식 토글 (25번, 2026-09-11)
   문장관리(관리용, 원래 모습 유지)와 완전히 분리된 화면에서 사용
   ========================================================================== */
/* 문장변형 목록(.variation-list-intro)과 같은 패턴 — 항상 노출 */
.list-note-intro {
  padding: 12px 20px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand-dark);
  text-align: center;
}

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

/* 전체 보기/한글만/영어만 — .mode-select(화면모드)와 시각적으로 동일한 3단 세그먼트지만,
   modeSelectBtns 전역 셀렉터(.mode-select-btn)와 겹치면 화면모드 로직이 오작동하므로
   반드시 별도 클래스로 유지할 것 */
.list-display-mode-bar {
  display: flex;
  margin: 10px 20px 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;
}

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

/* 관리용 아이콘(별표/깃발/AI/체크박스) 전혀 없이 스피커 하나만 — 순수 읽기 화면 */
.note-study-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background-color: var(--gray-50);
  border-radius: 12px;
}

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

.note-study-kr {
  font-size: var(--kr-font-size);
  font-weight: 600;
  color: var(--color-text-primary);
  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;
}

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

/* ==========================================================================
   문장관리 필터 탭 (전체 / 중요 / 미암기)
   ========================================================================== */
.list-filter-bar {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  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: 14px;
  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) */
[data-theme="dark"] .list-filter-btn.active,
[data-theme="dark"] .add-modal-tab-btn.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
}

/* 현재 활성 필터 탭 기준 문장 개수 안내 — 탭과 구분선 사이, 은은하되 읽히는 정도로 */
.list-count-info {
  padding: 8px 20px 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;
  margin: 10px 20px 0;
}

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

/* 플래시카드 학습(솔리드)과 시각적으로 구분되는 보조 액션 — 아웃라인 */
.list-note-study-btn {
  color: var(--color-brand);
  background: none;
  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: 17px;
  font-weight: 700;
  /* 상단바는 항상 브랜드 블루/네이비 배경이라 테마와 무관하게 흰색 고정 */
  color: #FFFFFF;
}

/* ==========================================================================
   문장관리 상단바 우측 아이콘 버튼(검색·선택) — 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;
  color: #FFFFFF;
  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;
  color: #FFFFFF;
  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;
  padding: 14px 16px;
  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 아이콘 3개가 한 줄에 들어가도록 32px→28px로 축소(2026-08-27,
   15-1의 .variation-item-add-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-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;
}

/* AI 변형 아이콘은 별/깃발과 달리 즉시 토글되는 상태가 아니라 새 화면으로 이동하는
   동작이라 항상 같은 모양(활성/비활성 구분 없음), 구분선으로 두 그룹을 시각적으로 분리 */
.sentence-list-actions-divider {
  width: 1px;
  height: 18px;
  flex-shrink: 0;
  background-color: var(--gray-200);
  margin: 0 2px;
}

/* ==========================================================================
   설정 화면
   ========================================================================== */
.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px 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-12) —
   .settings-info-btn이 align-items 기본값(stretch)으로 옆 버튼과 높이가 자동으로 맞춰짐 */
.settings-action-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.settings-action-row .settings-action-btn {
  width: auto;
  margin-bottom: 0;
}

.settings-info-btn {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  color: var(--gray-500);
  cursor: pointer;
}

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

/* "클라우드에서 복원"은 지금 기기의 문장을 전부 덮어쓰는 되돌릴 수 없는 동작이라, 누르기 전에도
   주의가 필요함을 암시하도록 다른 설정 버튼과 다른 색(즐겨찾기와 같은 accent-star 계열)을 사용
   (2026-09-12, "경고 표시등이 있으면 좋겠다" 피드백) */
.settings-action-btn-warning {
  border-color: var(--color-accent-star);
  color: var(--color-accent-star);
}

.settings-action-btn-warning:active {
  background-color: var(--color-accent-star);
  color: #FFFFFF;
}

.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;
  padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
}

.help-intro {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  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;
}

/* ==========================================================================
   문장변형 체험 화면
   ========================================================================== */
/* 목록 상단 안내 문구 — "탭하면 변형을 볼 수 있다"는 직관을 문장으로 보강.
   다크모드에서 네이비가 배경과 거의 안 보이는 문제는 .list-filter-btn/.help-accordion-header와
   같은 패턴으로 해결(라이트=브랜드 네이비, 다크=밝은 텍스트색)(2026-08-26).
   word-break: keep-all이 빠져 있어 좁은 화면에서 단어 중간에 아무 데서나 줄바꿈되던 문제 수정 —
   자연스러운 지점(HTML의 <br>)에서만 줄바꿈되도록 함(2026-08-26) */
.variation-list-intro {
  padding: 12px 20px 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;
  padding: 12px 20px 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;
  padding: 16px 20px 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, 탭 이벤트에서 .variation-item-flip-inner의 flipped와 함께 토글).
   배경(--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: 28px;
  height: 28px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: pointer;
}

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

.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 변형(무료판 안내형) 화면 — 원문 선택 → 프롬프트 복사/붙여넣기 → 미리보기
   ========================================================================== */
.ai-variation-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ai-variation-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* .add-form-textarea의 edge-to-edge 스타일(테두리 없음, 음수 margin 전제)은 이 화면과
   안 맞아 자체 테두리를 가진 독립 필드로 재정의 */
.ai-variation-textarea {
  flex: none;
  min-height: 110px;
  padding: 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
}

#ai-variation-prompt-textarea {
  background-color: var(--gray-50);
  color: var(--color-text-secondary);
}

.ai-variation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  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);
}