/* ═══════════════════════════════════════════════════════════
   AVO DESIGN SYSTEM v2 — FOREST (dark) + MATCHA (light)
   Apply by adding this <style> block or <link> to index.html
   ═══════════════════════════════════════════════════════════ */

/* ── FOREST (다크 기본) ── */
:root {
  --paper:        #0F1410;
  --cream:        #161B17;
  --card:         #1A201A;
  --warm:         #2A342A;
  --border:       #262C26;
  --ink:          #EDEAE0;
  --ink-soft:     #B8B5A8;
  --muted:        #7A7E72;
  --accent:       #9CB87A;
  --accent-light: #C8D49C;
  --accent2:      #7AA2D4;
  --seed:         #C99566;
  --shadow:       rgba(0, 0, 0, 0.5);
  /* 하위호환 */
  --green:        #9CB87A;
  --purple:       #7AA2D4;
}

/* ── MATCHA (라이트 모드) ── */
body.light-mode {
  --paper:        #F4F1E8;
  --cream:        #FBF9F2;
  --card:         #FFFFFF;
  --warm:         #E8E4D6;
  --border:       #D9D5C5;
  --ink:          #1A1F14;
  --ink-soft:     #3A4030;
  --muted:        #8A8B7C;
  --accent:       #5C7048;
  --accent-light: #C8D49C;
  --accent2:      #3D6FA8;
  --seed:         #6B4A2B;
  --shadow:       rgba(0, 0, 0, 0.12);
  --green:        #5C7048;
  --purple:       #3D6FA8;
}

/* ── 로그인 / 대기 화면 배경 ── */
#login-screen  { background: var(--paper); }
#pending-screen { background: var(--paper); }
.pending-logout:hover { border-color: var(--accent); }

/* ── 로고 심볼 ── */
.avo-logo-symbol { background: var(--accent) !important; }
.avo-logo-word .avo-a { color: var(--accent) !important; }

/* ── 구글 로그인 버튼 ── */
.btn-google {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
.btn-google:hover {
  background: var(--warm) !important;
  border-color: var(--accent) !important;
}

/* ── 로그인 화면 텍스트 ── */
.login-tagline    { color: var(--muted) !important; }
.login-sub-tagline { color: var(--muted) !important; }
.login-note       { color: var(--muted) !important; }
.pending-desc     { color: var(--muted) !important; }

/* ── 플랜 배지 ── */
.plan-badge.avoca {
  background: rgba(156,184,122,0.1) !important;
  border-color: rgba(156,184,122,0.3) !important;
  color: var(--accent) !important;
}
.plan-badge.avoca:hover { background: rgba(156,184,122,0.18) !important; }
.plan-badge.avocado:hover { background: var(--accent-light) !important; }
.user-dropdown-plan.avoca {
  background: rgba(156,184,122,0.12) !important;
  color: var(--accent) !important;
}

/* ── 활성 아이템 배경 ── */
.word-item.active   { background: rgba(156,184,122,0.07) !important; }
.folder-item.active { background: rgba(156,184,122,0.07) !important; }
.voca-mode-row.active-mode {
  background: rgba(156,184,122,0.06) !important;
  border-color: var(--accent) !important;
}
.voca-mode-row.active-mode:hover {
  box-shadow: 0 3px 12px rgba(156,184,122,0.1) !important;
}
.voca-mode-icon.ic-card {
  background: rgba(156,184,122,0.1) !important;
  color: var(--accent) !important;
}
.voca-card.open {
  border-color: var(--accent) !important;
  box-shadow: 0 2px 12px rgba(156,184,122,0.1) !important;
}
.voca-card.edit-mode { border-color: rgba(156,184,122,0.2) !important; }

/* ── 폴더 드래그/드롭 ── */
.folder-arrange-mode .group-header { background: rgba(156,184,122,0.05) !important; }
.folder-arrange-mode .group-header.drag-over {
  background: rgba(156,184,122,0.12) !important;
  border: 1.5px dashed var(--accent) !important;
}
.mobile-group-drop-zone.drag-over-mobile {
  background: rgba(156,184,122,0.08) !important;
  border: 1.5px dashed var(--accent) !important;
}

/* ── 구독 카드 ── */
.sub-card.is-current  { background: rgba(156,184,122,0.04) !important; }
.sub-card.is-popular  { box-shadow: 0 8px 32px rgba(156,184,122,0.1) !important; }
.sub-tag.popular {
  background: rgba(156,184,122,0.12) !important;
  border-color: rgba(156,184,122,0.3) !important;
}
.sub-btn.primary:hover  { background: var(--accent-light) !important; }
.btn-add-folder:hover   { background: var(--accent-light) !important; }
.settings-save-btn:hover { background: var(--accent-light) !important; }
.btn-modal-confirm:hover { background: var(--accent-light) !important; }

/* ── 아바타 선택 ── */
.avatar-opt.selected { box-shadow: 0 0 0 3px rgba(156,184,122,0.3) !important; }

/* ── 폴더 옵션 선택 ── */
.folder-option:hover   { background: rgba(156,184,122,0.04) !important; }
.folder-option.selected { background: rgba(156,184,122,0.07) !important; }

/* ── 학습 배지 ── */
.study-badge-learning {
  background: rgba(156,184,122,0.08) !important;
  border-color: rgba(156,184,122,0.15) !important;
}
.btn-study-knew {
  background: rgba(156,184,122,0.06) !important;
  border-color: rgba(156,184,122,0.3) !important;
  color: var(--accent) !important;
}
.btn-study-knew:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #111111 !important;
}

/* ── FAB — 검정 원형으로 변경 ── */
.fab-add {
  background: var(--ink) !important;
  color: var(--paper) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}
.fab-add:hover {
  background: var(--ink) !important;
  opacity: 0.85 !important;
  transform: scale(1.08) !important;
}

/* ── 저장 FAB — fab-add와 동일한 디자인 ── */
.fab-save {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 25;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  transition: all 0.2s;
  flex-shrink: 0;
}
.fab-save.visible { display: flex; }
.fab-save:hover { background: var(--ink) !important; opacity: 0.85; transform: scale(1.08); }
@media(max-width:768px) {
  .fab-save { right: 20px; bottom: 82px; width: 48px; height: 48px; }
}

/* ── 스크롤 겹침 방지 ── */
.content-area { overscroll-behavior: contain !important; }
@media(max-width:768px) {
  /* 하단 탭바 + FAB 에 가리지 않도록 여백 확보 */
  .content-area { padding-bottom: 140px !important; }
}

/* ── 단어장 편집 오버레이 — 스크롤 수정 ── */
.edit-overlay {
  height: 100dvh !important;
}
.edit-overlay-body {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}
@media(max-width:768px) {
  /* edit-overlay가 bottom-nav를 덮으므로(z-index:82) 80px 과다 패딩 불필요 */
  .edit-overlay-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  /* body 마지막 항목이 footer에 가리지 않도록 여유 확보 */
  .edit-overlay-body {
    padding-bottom: 32px !important;
  }
}

/* ── 검색 입력창 — 내부 스크롤 제거, 높이 자동 확장 ── */
.word-input {
  overflow-y: hidden !important;
  max-height: none !important;
  transition: height 0.18s ease !important;
}
/* 검색바 — flex-start로 정렬, 아이콘/버튼은 위에 고정 */
#home-search-bar,
.input-zone > div {
  align-items: flex-start !important;
}
/* 돋보기 아이콘 — 1줄 높이 기준 세로 중앙 고정 */
#home-search-bar > svg,
.input-zone > div > svg {
  flex-shrink: 0 !important;
  margin-top: 10px !important;
  align-self: flex-start !important;
}
/* 분석 버튼 — 상단 고정 */
#home-search-bar > .btn-analyze-home,
.input-zone > div > .btn-analyze-home {
  align-self: flex-start !important;
}

/* ── 듣기 재생 버튼 그림자 ── */
#listen-play-btn { box-shadow: 0 0 20px rgba(156,184,122,0.3) !important; }

/* ── 스크롤바 ── */
::-webkit-scrollbar-thumb { background: var(--warm) !important; }

/* ── light-mode overrides 정리 ── */
body.light-mode .plan-badge.avo {
  background: var(--warm) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}
body.light-mode .user-avatar-placeholder {
  background: var(--border) !important;
  color: var(--ink) !important;
}

/* ── 폴더 타입 버튼 active 배경 (인라인 스타일 override) ── */
#folder-type-word[style*="rgba(204,255,0"] {
  background: rgba(156,184,122,0.1) !important;
}


/* ══════════════════════════════════════════════════════
   AVO 분석 결과 — 에디토리얼 리디자인
   ══════════════════════════════════════════════════════ */

/* 결과 카드 — 플랫 (카드박스 제거) */
.result-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  animation: slideUp 0.3s ease;
}

/* 헤더 — 단어 + 발음 + TTS */
.result-header {
  padding: 18px 22px 8px !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* 큰 단어 헤드라인 */
.result-word {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.04em !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* 문장 모드 — 줄바꿈 허용 */
.result-word-sentence {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.015em !important;
}

/* 발음 — JetBrains Mono */
.pronunciation {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 10px !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
}

/* TTS 버튼 — 원형 액센트 */
.btn-tts-icon {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  margin-top: 4px !important;
  padding: 0 !important;
  color: var(--paper) !important;
  cursor: pointer !important;
  transition: opacity 0.15s !important;
}
.btn-tts-icon:hover { opacity: 0.85 !important; transform: none !important; }
.btn-tts-icon svg, .btn-tts-icon use { color: var(--paper) !important; }

/* 모드 배지 */
.mode-badge {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
}
.word-mode {
  background: rgba(156,184,122,0.1) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(156,184,122,0.25) !important;
}
.sentence-mode {
  background: rgba(122,162,212,0.1) !important;
  color: var(--accent2) !important;
  border: 1px solid rgba(122,162,212,0.25) !important;
}

/* 구분선 */
.result-card .divider {
  margin: 20px 22px 0 !important;
  border-color: var(--border) !important;
}

/* 바디 */
.result-body { padding: 20px 22px !important; }

/* 섹션 레이블 */
.section-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  color: var(--muted) !important;
  margin-bottom: 16px !important;
  display: block !important;
}

/* 품사 헤더 — 최소화 */
.pos-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.pos-badge {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.pos-name {
  font-size: 11px !important;
  color: var(--muted) !important;
}

/* 정의 — 번호 + 큰 텍스트 */
.defs-list { gap: 18px !important; }
.def-num-row {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  margin-bottom: 4px !important;
}
.def-num {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--accent) !important;
  min-width: 24px !important;
  padding-top: 4px !important;
  letter-spacing: 0.04em !important;
}
.def-meaning {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.018em !important;
  flex: 1 !important;
}

/* 예문 — 에디토리얼 */
.def-example {
  margin-left: 40px !important;
  padding: 10px 0 0 !important;
  border-left: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.def-example-en {
  font-size: 14px !important;
  font-style: normal !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-bottom: 4px !important;
}
.def-example-en:hover {
  opacity: 0.7 !important;
}
.def-example-en.tts-playing {
  color: var(--accent) !important;
  font-weight: 700 !important;
}
.def-example-ko {
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* 유의어 태그 */
.syn-tag {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border-color: var(--border) !important;
  background: var(--paper) !important;
  color: var(--inkSoft, var(--ink)) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.syn-tag:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* 저장 버튼 — full-width, 검정 원형 대신 플랫 */
.btn-save {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px !important;
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  transition: opacity 0.15s !important;
}
.btn-save:hover { opacity: 0.85 !important; background: var(--ink) !important; }
.btn-save.saved { background: var(--accent) !important; color: var(--paper) !important; }
.btn-save.saved:hover { opacity: 0.9 !important; background: var(--accent) !important; }

/* 문장 결과 — 번역 블록 */
.translation-block { margin-bottom: 0 !important; }
.trans-row {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
.trans-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  padding: 3px 7px !important;
  border-radius: 3px !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}
.natural-label {
  background: rgba(122,162,212,0.1) !important;
  color: var(--accent2) !important;
}
.trans-text {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
}

/* 끊어읽기 청크 */
.chunks-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}
.chunk-item {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  min-width: 60px !important;
}
.chunk-original {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
.chunk-literal {
  font-size: 10px !important;
  color: var(--muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
.chunk-arrow { color: var(--accent) !important; font-size: 9px !important; }

/* 구문/어휘 */
.phrase-item {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
}
.phrase-text {
  font-size: 15px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em !important;
}
.phrase-explanation {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
}
.vocab-item {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.vocab-word {
  font-size: 15px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em !important;
  flex-shrink: 0 !important;
}
.vocab-meaning {
  font-size: 13px !important;
  color: var(--inkSoft, var(--muted)) !important;
}

/* SEE ALSO — 유의어 링크 */
.ant-tag {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}

/* ── 폴더 저장 모달 — 높이 오버플로 방지 ── */
.modal {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100dvh - 48px) !important;
}
/* folder-options만 스크롤, 나머지는 항상 노출 */
.folder-options {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}
.new-folder-row {
  flex-shrink: 0 !important;
  display: flex !important;
  gap: 8px !important;
}
.new-folder-input { min-width: 0 !important; }
.btn-create-folder { flex-shrink: 0 !important; }
.modal-actions {
  flex-shrink: 0 !important;
}
@media(max-width:768px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-height: 80dvh !important;
  }
}

/* 토스트 — 새 컬러 */
.toast {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}


/* ══════════════════════════════════════════════════════
   AVO 단어장 탭 — 에디토리얼 리디자인
   ══════════════════════════════════════════════════════ */

/* ── 툴바 ── */
.voca-toolbar {
  padding: 14px 20px 10px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--paper) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.voca-folder-title {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.voca-folder-title span {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ── 학습 모드 카드 ── */
.voca-mode-row {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  gap: 14px !important;
}
.voca-mode-row:hover {
  border-color: var(--warm) !important;
  transform: none !important;
  box-shadow: none !important;
}
.voca-mode-row.active-mode {
  border-color: var(--accent) !important;
  background: rgba(156,184,122,0.04) !important;
}
.voca-mode-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
}
.voca-mode-icon.ic-card {
  background: rgba(156,184,122,0.1) !important;
  color: var(--accent) !important;
}
.voca-mode-name {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.voca-mode-desc {
  font-size: 12px !important;
  color: var(--muted) !important;
  line-height: 1.4 !important;
}
.voca-study-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

/* ── 단어 리스트 ── */
.voca-words-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.voca-words-count {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  letter-spacing: 0.06em !important;
}

/* 단어 카드 */
.voca-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
}
.voca-card:first-child { border-top: 1px solid var(--border) !important; }
.voca-card:hover { background: transparent !important; border-color: var(--border) !important; }
.voca-card.open {
  background: transparent !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
/* 뜻 펼침 — 즉각 반응 (max-height 트랜지션 제거) */
.voca-card-meaning { transition: none !important; }
.voca-card-main { padding: 14px 22px !important; }
.voca-card-word {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  color: var(--ink) !important;
}
.voca-card-meaning {
  border-top: 1px solid var(--border) !important;
  padding: 0 22px !important;
}
.voca-card.open .voca-card-meaning { max-height: 300px !important; padding: 12px 22px 14px !important; }
.voca-card-meaning-text {
  font-size: 14px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* 필터 탭 */
.voca-filter-tab {
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-color: var(--border) !important;
}
.voca-filter-tab.active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}
.voca-filter-tab.active.star-tab {
  background: var(--star, #C9A24F) !important;
  border-color: var(--star, #C9A24F) !important;
}

/* 폴더 없을 때 빈 상태 */
.voca-empty-title {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.voca-empty-sub {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
}

/* 모바일 폴더 카드 */
.mobile-folder-card {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  transition: all 0.18s !important;
}
.mobile-folder-card:hover { background: var(--warm) !important; }
.mobile-folder-card.long-press {
  transform: scale(0.97) !important;
  box-shadow: 0 0 0 2px var(--accent) !important;
  border-color: var(--accent) !important;
}

/* 편집 버튼 */
.btn-edit {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  transition: all 0.15s !important;
}
.btn-edit:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.btn-edit.active { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }

/* btn-back-folder */
#btn-back-folder {
  display: none;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  padding: 4px 8px 4px 0 !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
#btn-back-folder:hover { color: var(--ink) !important; }

/* study label 패딩 */
.voca-study-section { padding: 20px 0 12px !important; }
.voca-study-inner { padding: 0 20px !important; }
.voca-words-inner { padding: 0 20px 100px !important; }


/* ══════════════════════════════════════════════════════
   문장 분석 결과 — 에디토리얼 v2 스타일
   ══════════════════════════════════════════════════════ */

/* 공통 섹션 레이블 (renderWord/renderSentence 공유) */
.avo-section-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-bottom: 16px !important;
  display: block !important;
}

/* 문장 헤드라인 — 단어보다 작게, 가독성 우선 */
.avo-sentence-title {
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.018em !important;
}

/* 번역 — 굵고 큰 */
.avo-translation {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  letter-spacing: -0.025em !important;
}

/* CHUNKS — 에디토리얼 텍스트 */
.avo-chunks {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 4px 16px !important;
  row-gap: 18px !important;
}
.avo-chunk-wrap {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}
.avo-chunk-en {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  border-bottom: 2px solid var(--accent) !important;
  padding-bottom: 3px !important;
}
.avo-chunk-ko {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  letter-spacing: 0.04em !important;
}
.avo-chunk-plus {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  color: var(--border) !important;
  padding: 0 2px !important;
  align-self: flex-start !important;
  padding-top: 2px !important;
}

/* GRAMMAR — 줄글 에디토리얼 */
.avo-grammar-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.avo-grammar-item {
  padding-bottom: 22px !important;
}
.avo-grammar-divider {
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 22px !important;
}
.avo-grammar-expr {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}
.avo-grammar-meaning {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: var(--accent) !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 10px !important;
}
.avo-grammar-usage {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 14px !important;
  color: var(--ink-soft, var(--muted)) !important;
  line-height: 1.75 !important;
}

/* WORDS — 라인 구분 리스트 */
.avo-vocab-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.avo-vocab-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 0 !important;
}
.avo-vocab-divider {
  border-bottom: 1px solid var(--border) !important;
}
.avo-vocab-word {
  font-family: 'SUIT Variable', SUIT, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.018em !important;
}
.avo-vocab-pos {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  color: var(--muted) !important;
  letter-spacing: 0.06em !important;
}
.avo-vocab-meaning {
  font-size: 13px !important;
  color: var(--ink-soft, var(--muted)) !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

/* btn-save full-width (공통) */
.btn-save {
  width: 100% !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  justify-content: center !important;
}
.btn-save:hover { opacity: 0.85 !important; background: var(--ink) !important; }
.btn-save.saved { background: var(--accent) !important; color: var(--paper) !important; }