/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* ===== Twemoji 이미지 스타일 (전 기기 이모지 통일) ===== */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .06em 0 .08em;
  vertical-align: -0.12em;
  display: inline-block;
  pointer-events: none;
}

:root {
  color-scheme: dark;
  --bg-deep:    #1C0A00;
  --bg-card:    #2E1100;
  --bg-input:   #1C0A00;
  --bg-active:  #D4770A;
  --gold:       #FFD166;
  --gold-dim:   #C9933A;
  --orange:     #F4A020;
  --text-main:  #FFF3DC;
  --text-muted: #C9933A;
  --border:     #6B3A00;
  --border-hi:  #D4770A;
  --red-rec:    #CC2200;
  --font: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  forced-color-adjust: none;
}
/* 카카오 인앱에서만 하단 배너 여백 확보 — v1.30 */
body.inapp { padding-bottom: 80px; }

/* ===== 접근성 — 키보드 포커스 표시 ===== */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, .topic-card:focus-visible, .cat-tab:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ===== SPLASH ===== */
#splash {
  position: fixed; inset: 0;
  background: var(--bg-deep);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 999;
  transition: opacity 0.6s ease;
}
#splash.hide { opacity: 0; pointer-events: none; }
.splash-icon { font-size: 72px; margin-bottom: 20px; animation: float 2s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.splash-title { font-size: 36px; font-weight: 900; color: var(--gold); letter-spacing: 3px; }
.splash-sub { font-size: 18px; color: var(--text-muted); margin-top: 10px; letter-spacing: 1px; }
.splash-bar { width: 200px; height: 4px; background: var(--bg-card); border-radius: 2px; margin-top: 40px; overflow: hidden; }
.splash-fill { height: 100%; background: var(--orange); border-radius: 2px; animation: load 1.8s ease forwards; }
@keyframes load { from{width:0} to{width:100%} }

/* ===== APP SHELL ===== */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  opacity: 0;
  transition: opacity 0.4s ease;
  border: 3px solid var(--border-hi);
  border-radius: 0;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
#app.visible { opacity: 1; }
/* 데스크톱: 좌우 여백 확보 + 둥근 모서리 */
@media (min-width: 600px) {
  #app {
    margin: 16px auto;
    border-radius: 20px;
    min-height: calc(100vh - 32px);
  }
  /* 데스크톱: 헤더 auth를 버튼들과 같은 줄에 배치 */
  .header-auth { flex-basis: auto; }
}

/* ===== HEADER ===== */
.header {
  background: linear-gradient(180deg, #2E1100 0%, #1C0A00 100%);
  padding: 20px 20px 14px;
  border-bottom: 2px solid var(--border-hi);
  position: sticky; top: 0; z-index: 50;
}
.header-title-row { margin-bottom: 14px; text-align: center; }
.app-name { font-size: 26px; font-weight: 900; color: var(--gold); letter-spacing: 2px; white-space: nowrap; }
.header-btn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 0 6px; }
.header-auth { display: flex; align-items: center; gap: 8px; flex-basis: 100%; justify-content: center; min-width: 0; }
.auth-name { font-size: 14px; color: var(--text-muted); font-weight: 700; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-out-btn {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted); font-size: 13px; padding: 6px 12px; cursor: pointer;
  font-family: var(--font); white-space: nowrap;
}
.google-login-btn {
  background: var(--bg-card); border: 2px solid var(--border-hi); border-radius: 10px;
  color: var(--text-main); font-size: 13px; font-weight: 700; padding: 8px 10px;
  cursor: pointer; white-space: nowrap; font-family: var(--font);
  display: flex; align-items: center; flex-shrink: 1; min-width: 0;
}
.google-login-btn:hover { background: #3A1500; }
/* ★ 베타: Google 로그인 버튼 기본 숨김 — 익명 로그인 우선, 폴백만 노출 */
.google-login-btn { display: none !important; }

/* 익명 사용자 소프트 보관 버튼 */
.anon-save-btn {
  background: transparent;
  border: 1px solid rgba(255,209,102,0.3);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  opacity: 0.75;
  transition: opacity 0.2s;
}
.anon-save-btn:hover { opacity: 1; border-color: var(--gold-dim); }

/* 익명 안내 배너 — v1.30: 카카오 인앱 전용, 로그인 버튼 없음, 외부 브라우저 유도 문구만
 * bottom: 0 — 화면 맨 아래에 붙음
 * height: auto + align-items: flex-start — 텍스트 잔림 없이 완전 표시 */
.anon-notice {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: rgba(20,8,0,0.97);
  border-top: 1.5px solid rgba(193,120,32,0.5);
  padding: 16px 18px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  z-index: 200;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.55);
  animation: anonNoticeFadeIn 0.35s ease;
}
@keyframes anonNoticeFadeIn { from{opacity:0;transform:translateX(-50%) translateY(12px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.anon-notice-text {
  font-size: 13.5px;
  color: var(--text-main);
  line-height: 1.7;
  flex: 1;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.anon-notice-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.anon-notice-login {
  background: transparent;
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
}
.anon-notice-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.header-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.api-toggle-btn {
  background: var(--bg-card); border: 2px solid var(--border-hi); border-radius: 10px;
  color: var(--text-main); font-size: 13px; font-weight: 700; padding: 8px 10px;
  cursor: pointer; white-space: nowrap; font-family: var(--font); flex-shrink: 1; min-width: 0;
}
.api-toggle-btn.set { border-color: var(--border-hi); color: var(--orange); }
.autobio-btn {
  background: var(--orange); border: 2px solid #1C0A00; border-radius: 10px;
  color: #1C0A00; font-size: 13px; font-weight: 900; padding: 8px 10px;
  cursor: pointer; white-space: nowrap; font-family: var(--font); flex-shrink: 1; min-width: 0;
}

/* ===== 안내 문구 (인라인 스타일 제거 후 CSS로 분리) ===== */
.guide-notice {
  margin: 18px 16px 12px;
  padding: 14px 16px;
  background: rgba(244,160,32,0.08);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  text-align: center;
}
.guide-notice-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.6;
}

.recommend-banner {
  background: var(--bg-card);
  border: 2px solid var(--border-hi);
  border-radius: 14px;
  margin: 14px 16px 0;
  padding: 14px 16px;
  display: flex; gap: 14px; align-items: center;
  cursor: pointer;
  transition: transform 0.15s;
}
.recommend-banner:active { transform: scale(0.98); }
.rec-badge {
  background: var(--orange); color: #1C0A00;
  font-size: 13px; font-weight: 900; padding: 5px 10px; border-radius: 8px; white-space: nowrap;
}
.rec-text { font-size: 19px; font-weight: 700; color: var(--gold); line-height: 1.4; flex: 1; }

/* ===== CATEGORY GRID ===== */
.sec-label {
  font-size: 20px; font-weight: 900; color: var(--gold);
  border-left: 5px solid var(--orange);
  padding-left: 12px; margin: 18px 16px 14px;
}
/* V-1: sec-label 우측 안내문 */
.sec-label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 14px;
}
.cat-tab {
  padding: 16px 10px;
  border-radius: 14px;
  font-size: 20px; font-weight: 900;
  cursor: pointer; border: 2px solid var(--border);
  background: var(--bg-card); color: var(--text-muted);
  text-align: center; line-height: 1.3;
  transition: all 0.18s; user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  word-break: keep-all; overflow-wrap: break-word; text-wrap: balance;
}
.cat-tab:active { transform: scale(0.96); }
.cat-tab .cat-icon { font-size: 28px; }
.cat-tab.active { background: var(--orange); color: #1C0A00; border-color: var(--orange); }
.cat-tab.active .cat-lbl { color: #1C0A00; }

/* ===== TOPIC GRID ===== */
.topics-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; padding: 0 16px 14px;
}
.topic-section-label {
  font-size: 15px; font-weight: 900; color: var(--text-main);
  background: #4D2400;
  border: none;
  border-left: 5px solid var(--orange);
  border-radius: 0 8px 8px 0;
  padding: 8px 16px 8px 16px; margin: 4px 0 8px;
  display: block; letter-spacing: 0.3px;
}
.topic-card {
  background: #1e0c00; border: 2px solid var(--border);
  border-left: 2px solid var(--border);
  border-right: 4px solid var(--gold-dim);
  border-bottom: 4px solid var(--gold-dim);
  border-radius: 14px; padding: 16px 14px;
  cursor: pointer; transition: all 0.18s; user-select: none;
  text-align: center;
}
.topic-card:active { transform: scale(0.96); }
.topic-card.selected { background: #1A5C2E; border-color: #4CAF50; }
.topic-icon { font-size: 30px; margin-bottom: 7px; }
.topic-title { font-size: 18px; font-weight: 800; color: var(--gold); line-height: 1.3; word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
.topic-card.selected .topic-title { color: #A5D6A7; }
.topic-hint { font-size: 13px; color: var(--text-muted); margin-top: 3px; word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
.topic-card.selected .topic-hint { color: #81C784; }

.topic-card.free-card {
  border-style: dashed; border-color: var(--gold-dim);
  background: transparent;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 20px 20px;
}
.topic-card.free-card .topic-icon { font-size: 32px; margin-bottom: 0; }
.topic-card.free-card .topic-title { color: var(--gold); font-size: 18px; font-weight: 800; }
.topic-card.free-card .topic-hint { color: var(--text-main); font-size: 14px; margin-top: 2px; }
.topic-card.free-card.selected { background: var(--bg-active); border-style: solid; border-color: var(--gold); }
.topic-card.free-card.selected .topic-title { color: #1C0A00; }
.topic-card.free-card.selected .topic-hint { color: #1C0A00; }

.scroll-hint {
  text-align: center; padding: 6px 0 14px;
  font-size: 14px; color: var(--text-muted); font-weight: 700;
  animation: bounce 1.5s infinite;
}
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ===== 질문 박스 ===== */
.question-wrap { margin: 0 16px 14px; }
.question-box {
  background: var(--bg-card); border: 2.5px solid var(--border-hi);
  border-radius: 16px; padding: 18px 20px;
  transition: border-color 0.3s;
}
.question-box.listening { border-color: var(--red-rec); }
.q-tag { font-size: 14px; font-weight: 800; color: var(--orange); letter-spacing: 1px; margin-bottom: 10px; }
.q-text { font-size: 24px; font-weight: 800; color: var(--gold); line-height: 1.5; }
.listening-guide {
  font-size: 18px; font-weight: 700; color: #FF6644;
  margin-top: 12px; display: none;
}
.question-box.listening .listening-guide { display: block; }

/* ===== 사진 업로드 섹션 ===== */
.photo-section { margin: 18px 16px 14px; }
.photo-section-label {
  font-size: 20px; font-weight: 900; color: var(--gold);
  border-left: 5px solid var(--orange);
  padding-left: 12px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.photo-upload-area {
  background: var(--bg-card); border: 2px dashed var(--border);
  border-radius: 16px; padding: 24px 20px;
  text-align: center; cursor: pointer; transition: all 0.2s; position: relative;
}
.photo-upload-area:hover, .photo-upload-area.drag-over { border-color: var(--orange); background: #3A1500; }
.photo-upload-area.has-photo { border-style: solid; border-color: var(--border-hi); padding: 0; overflow: hidden; }
.photo-upload-icon { font-size: 40px; margin-bottom: 10px; }
.photo-upload-text { font-size: 18px; font-weight: 800; color: var(--gold); margin-bottom: 6px; }
.photo-upload-hint { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
#photoInput { display: none; }
.photo-preview-wrap { position: relative; display: none; }
.photo-preview-wrap.show { display: block; }
.photo-preview { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; display: block; }
.photo-remove-btn {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 50%;
  width: 36px; height: 36px; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.photo-change-btn {
  position: absolute; bottom: 10px; right: 10px;
  background: var(--orange); color: #1C0A00; border: none; border-radius: 20px;
  padding: 8px 16px; font-size: 14px; font-weight: 800; cursor: pointer;
}
.photo-analyzing { margin-top: 12px; background: #2A1400; border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 16px; display: none; }
.photo-analyzing.show { display: block; }
.analyzing-text { font-size: 16px; font-weight: 700; color: var(--orange); display: flex; align-items: center; gap: 8px; }
.analyzing-dot { display: inline-block; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
.photo-questions { margin-top: 12px; display: none; }
.photo-questions.show { display: block; }
.photo-q-label { font-size: 15px; font-weight: 800; color: var(--orange); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.photo-q-list { display: flex; flex-direction: column; gap: 8px; }
.photo-q-btn {
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  font-size: 17px; font-weight: 700; color: var(--gold);
  cursor: pointer; text-align: left; width: 100%; font-family: var(--font);
  transition: all 0.15s; display: flex; align-items: center; gap: 10px;
  -webkit-tap-highlight-color: rgba(244,160,32,0.2);
}
.photo-q-btn:active { transform: scale(0.98); background: #3A1500; }
.photo-q-btn.selected { background: #1A5C2E; border-color: #4CAF50; color: #A5D6A7; }
.photo-q-btn::before { content: '💬'; font-size: 18px; flex-shrink: 0; }

/* ===== 마이크 섹션 ===== */
.mic-section { display: flex; flex-direction: column; align-items: center; padding: 6px 16px 0px; gap: 4px; }
.mic-outer { position: relative; width: 144px; height: 144px; display: flex; align-items: center; justify-content: center; }
.mic-pulse { position: absolute; inset: 0; border-radius: 50%; background: rgba(204,34,0,0.25); transform: scale(1); opacity: 0; }
.mic-outer.recording .mic-pulse { animation: mic-pulse 1.1s ease-out infinite; }
@keyframes mic-pulse { 0%{transform:scale(0.95);opacity:0.7;} 100%{transform:scale(1.5);opacity:0;} }
.mic-btn {
  width: 142px; height: 142px; border-radius: 50%;
  background: var(--orange); border: 6px solid var(--gold);
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: background 0.25s, border-color 0.25s, transform 0.1s;
  position: relative; z-index: 1;
}
.mic-btn:active { transform: scale(0.93); }
.mic-outer.recording .mic-btn { background: var(--red-rec); border-color: #FF8866; }
.mic-label { font-size: 16px; font-weight: 900; color: #1C0A00; margin-top: 3px; text-align: center; line-height: 1.3; }
.mic-outer.recording .mic-label { color: #FFD166; }
.mic-status { font-size: 18px; font-weight: 800; color: var(--orange); min-height: 26px; text-align: center; }

/* ===== 텍스트 입력 ===== */
.input-wrap { margin: 0 16px 14px; }
.input-label { font-size: 18px; font-weight: 800; color: var(--gold); margin-bottom: 8px; display: block; }
.story-textarea {
  width: 100%; min-height: 120px;
  background: var(--bg-input); border: 2px solid var(--border);
  border-radius: 14px; color: var(--text-main);
  font-size: 19px; font-weight: 700; padding: 16px;
  line-height: 1.7; resize: none; font-family: var(--font);
  transition: border-color 0.2s;
}
.story-textarea:focus { outline: none; border-color: var(--border-hi); }
.story-textarea::placeholder { color: #6B3A00; }

/* ===== AI 반응 ===== */
.ai-bubble { margin: 0 16px 14px; background: #1A0800; border: 2px solid #6B3A00; border-radius: 16px; padding: 18px 20px; display: none; }
.ai-bubble.show { display: block; }
.ai-name { font-size: 15px; font-weight: 900; color: var(--orange); margin-bottom: 8px; }
.ai-text { font-size: 20px; font-weight: 700; color: var(--text-main); line-height: 1.7; }

/* ===== 액션 버튼 ===== */
.action-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 16px 24px; position: relative; z-index: 5; }
.btn-submit, .btn-next {
  cursor: pointer;
  pointer-events: all;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  min-height: 68px;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(244,160,32,0.35);
}
.btn-submit *, .btn-next * { cursor: pointer; pointer-events: none; }
.btn-submit {
  background: var(--orange); color: #1C0A00; border: none;
  border-radius: 14px; padding: 20px 14px; font-size: 20px; font-weight: 900;
  transition: opacity 0.2s, transform 0.1s; font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
}
.btn-submit:disabled { background: #4A2800; color: #6B3A00; cursor: not-allowed; }
.btn-submit.submitted { background: #2E7D32; color: #fff; }
.btn-submit.submitted:active { transform: scale(0.97); }
.btn-submit:active:not(:disabled) { transform: scale(0.97); }
.btn-next {
  background: var(--bg-card); color: var(--gold); border: 2px solid var(--border);
  border-radius: 14px; padding: 20px 14px; font-size: 20px; font-weight: 900;
  font-family: var(--font); transition: transform 0.1s;
  display: flex; align-items: center; justify-content: center;
}
.btn-next:active { transform: scale(0.97); }

/* scroll-margin-top: sticky header(166px) 아래에서 패널이 보이도록 — v1.37 */
#storiesPanel,
#autobioPanel {
  scroll-margin-top: 166px;
}

/* ===== 내 이야기 패널 ===== */
.stories-panel { display: none; margin: 14px 16px 16px; background: var(--bg-card); border: 2px solid var(--border); border-radius: 16px; overflow: hidden; }
.stories-panel.open { display: block; }
.stories-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 2px solid var(--border); background: #2A1000; }
.stories-title { font-size: 20px; font-weight: 900; color: var(--gold); }
.stories-close { background: none; border: 1.5px solid var(--border); border-radius: 8px; color: var(--text-muted); font-size: 14px; font-weight: 700; padding: 6px 12px; cursor: pointer; }
.stories-list { padding: 12px; max-height: 60vh; overflow-y: auto; }
.stories-loading {
  text-align: center; color: var(--text-muted); padding: 30px 20px; font-size: 17px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.stories-loading::before {
  content: '☕';
  font-size: 36px;
  animation: float 1.5s ease-in-out infinite;
}

/* ===== 자서전 패널 ===== */
.autobio-panel { display: none; margin: 14px 16px 16px; background: var(--bg-card); border: 2px solid var(--border); border-radius: 16px; overflow: hidden; }
.autobio-panel.open { display: block; }
.autobio-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 2px solid var(--border);
  background: #3A1500;
}
.autobio-title { font-size: 20px; font-weight: 900; color: var(--gold); }
.autobio-close {
  background: none; border: 1.5px solid var(--border); border-radius: 8px;
  color: var(--text-muted); font-size: 14px; font-weight: 700;
  padding: 6px 12px; cursor: pointer; font-family: var(--font);
}
.autobio-body { padding: 16px; }
.autobio-generating {
  text-align: center; padding: 40px 20px;
}
.autobio-gen-icon { font-size: 48px; margin-bottom: 16px; animation: float 2s ease-in-out infinite; }
.autobio-gen-text { font-size: 18px; font-weight: 800; color: var(--gold); margin-bottom: 8px; }
.autobio-gen-sub { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.autobio-progress {
  width: 100%; height: 6px; background: var(--bg-deep);
  border-radius: 3px; margin-top: 20px; overflow: hidden;
}
.autobio-progress-fill {
  height: 100%; background: var(--orange); border-radius: 3px;
  animation: progress-anim 3s ease-in-out infinite;
}
@keyframes progress-anim { 0%{width:5%} 50%{width:80%} 100%{width:95%} }

/* 챕터 카드 */
.chapter-card {
  background: #1C0A00; border: 1.5px solid var(--border);
  border-radius: 14px; margin-bottom: 16px; overflow: hidden;
}
.chapter-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: #2A1000;
}
.chapter-label { font-size: 16px; font-weight: 900; color: var(--orange); }
.chapter-edit-btn {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 8px; color: var(--gold-dim); font-size: 13px; font-weight: 700;
  padding: 6px 12px; cursor: pointer; font-family: var(--font);
}
.chapter-edit-btn.editing { background: var(--orange); color: #1C0A00; border-color: var(--orange); }

/* 챕터 부제 (#12-Layout-v2: 2-line 부제 분리) */
.chapter-subtitle {
  padding: 10px 16px 0;
  font-size: 14px; font-weight: 400; color: var(--gold-dim);
  line-height: 1.45;
  word-break: keep-all; overflow-wrap: break-word; text-wrap: balance;
}
.chapter-subtitle:empty { display: none; }
.chapter-subtitle::before {
  content: "·";
  margin-right: 6px;
  color: var(--gold-dim);
}

.chapter-content {
  padding: 16px; font-size: 17px; color: var(--text-main);
  line-height: 1.9; white-space: pre-wrap;
}
.chapter-textarea {
  display: none; width: 100%; min-height: 200px;
  background: var(--bg-input); border: none;
  color: var(--text-main); font-size: 17px; font-weight: 600;
  padding: 16px; line-height: 1.9; resize: vertical; font-family: var(--font);
}
.chapter-textarea.show { display: block; }
.chapter-save-row {
  display: none; padding: 10px 16px 14px; gap: 8px;
}
.chapter-save-row.show { display: flex; }
.chapter-save-btn {
  flex: 1; background: #2E7D32; border: none; border-radius: 10px;
  color: #fff; font-size: 16px; font-weight: 800; padding: 12px;
  cursor: pointer; font-family: var(--font);
}
.chapter-cancel-btn {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 10px;
  color: var(--text-muted); font-size: 16px; font-weight: 800; padding: 12px 18px;
  cursor: pointer; font-family: var(--font);
}

/* 자서전 제목 입력 */
.autobio-title-wrap { padding: 0 0 14px; }
.autobio-title-label { display: block; font-size: 14px; font-weight: 800; color: var(--orange); margin-bottom: 8px; }
.autobio-title-input {
  width: 100%; background: var(--bg-input); border: 2px solid var(--border);
  border-radius: 12px; color: var(--text-main); font-size: 18px; font-weight: 700;
  padding: 12px 16px; font-family: var(--font); transition: border-color 0.2s;
}
.autobio-title-input:focus { outline: none; border-color: var(--border-hi); }
.autobio-title-input::placeholder { color: #6B3A00; }

/* 자서전 액션 버튼 */
.autobio-actions {
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 0 16px;
}
.autobio-confirm-btn {
  background: var(--orange); border: none; border-radius: 14px;
  color: #1C0A00; font-size: 18px; font-weight: 900; padding: 18px;
  cursor: pointer; font-family: var(--font); width: 100%;
}
.autobio-regen-btn {
  background: var(--bg-deep); border: 2px solid var(--border); border-radius: 14px;
  color: var(--text-muted); font-size: 16px; font-weight: 800; padding: 14px;
  cursor: pointer; font-family: var(--font); width: 100%;
}
.autobio-empty {
  text-align: center; color: var(--text-muted); padding: 40px 20px;
  font-size: 18px; line-height: 1.7;
}

/* ===== PWA ===== */
.pwa-banner { margin: 12px 16px 12px; background: #2E1A00; border: 2px solid var(--orange); border-radius: 14px; padding: 14px 16px; display: none; align-items: center; gap: 12px; }
.pwa-banner.show { display: flex; }
.pwa-icon { font-size: 28px; }
.pwa-info { flex: 1; }
.pwa-title { font-size: 17px; font-weight: 800; color: var(--gold); word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
.pwa-desc { font-size: 14px; color: var(--text-muted); margin-top: 2px; word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
.pwa-btn { background: var(--orange); color: #1C0A00; border: none; border-radius: 10px; padding: 10px 16px; font-size: 15px; font-weight: 900; cursor: pointer; white-space: nowrap; font-family: var(--font); }
.pwa-close { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; padding: 4px; }

/* iOS 홈 화면 추가 안내 배너 */
.pwa-banner-ios {
  margin: 12px 16px 12px; background: #2E1A00; border: 2px solid var(--orange); border-radius: 14px;
  padding: 14px 16px; display: none; align-items: center; gap: 12px;
}
.pwa-banner-ios.show { display: flex; }
.pwa-banner-ios .pwa-desc { line-height: 1.55; }
.pwa-banner-ios .pwa-desc b { color: var(--gold); font-weight: 900; }

/* ===== 진행현황 — 레벨 시스템 ===== */
.progress-section { background: rgba(0,0,0,0.2); border-radius: 14px; padding: 16px; margin: 12px 16px; }

/* 레벨 카드 */
.level-card { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.level-icon-wrap { width: 52px; height: 52px; background: var(--bg-deep); border-radius: 50%; border: 2.5px solid var(--border-hi); display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.level-info { flex: 1; min-width: 0; }
.level-stage { font-size: 18px; font-weight: 900; color: var(--gold); letter-spacing: 1px; }
.level-next { font-size: 12px; color: var(--orange); margin-top: 3px; font-weight: 700; }
.level-total-wrap { text-align: right; flex-shrink: 0; }
.level-total { font-size: 32px; font-weight: 900; color: var(--gold); line-height: 1; }
.level-total-unit { font-size: 14px; color: var(--text-muted); margin-left: 2px; }

/* 전체 진행 바 */
.overall-progress { margin-bottom: 14px; }
.overall-bar {
  position: relative;
  height: 12px;
  background: rgba(255,209,102,0.08);
  border: 1.5px solid rgba(193,120,32,0.45);
  border-radius: 6px;
  overflow: visible;
  margin-bottom: 6px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
}
.overall-milestone {
  position: absolute;
  left: 60%;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2.5px dashed rgba(255,255,255,0.9);
  transform: translateX(-1px);
  pointer-events: none;
  opacity: 1;
  z-index: 2;
  filter: drop-shadow(0 0 2px rgba(28,10,0,0.85));
}
.milestone-label-row {
  position: relative;
  height: 18px;
  margin-bottom: 4px;
}
.milestone-label {
  position: absolute;
  left: 60%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: #FFD166;
  background: rgba(28,10,0,0.85);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,209,102,0.35);
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.overall-fill { height: 100%; background: linear-gradient(90deg,#C9933A,#F4A020,#FFD166); border-radius: 4px; transition: width 0.7s ease; }
.overall-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); padding: 0 2px; font-weight: 700; }

/* 카테고리 미니 그리드 */
.cat-mini-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 12px; }
.cat-mini-item { background: rgba(0,0,0,0.3); border: 1.5px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 6px 4px; text-align: center; transition: all 0.2s; }
.cat-mini-item.has-stories { border-color: var(--border-hi); background: rgba(212,119,10,0.12); }
.cat-mini-item.cat-full { border-color: var(--gold); background: rgba(255,209,102,0.12); }
.cat-mini-icon { font-size: 16px; }
.cat-mini-name { font-size: 11px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-mini-item.has-stories .cat-mini-name { color: var(--text-main); }
.cat-mini-cnt { font-size: 12px; font-weight: 900; color: var(--orange); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-mini-item.cat-full .cat-mini-cnt { color: var(--gold); }

/* 배지 */
.badge-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-item { background: rgba(193,120,32,0.3); border: 1px solid #C17820; color: #F5DEB3; font-size: 12px; padding: 4px 10px; border-radius: 20px; }
.badge-hint { color: rgba(245,222,179,0.5); font-size: 12px; font-style: italic; }

/* ===== 나만보기 + 이야기 액션 ===== */
.private-story { border-left: 3px solid #777 !important; opacity: 0.82; }
.story-actions { display: flex; gap: 8px; margin-top: 8px; }
.story-privacy-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: #D4A96A; font-size: 13px; padding: 5px 12px; border-radius: 20px; cursor: pointer; }
.story-privacy-btn.is-private { border-color: #888; color: #aaa; }
.story-delete-btn { background: transparent; border: 1px solid rgba(255,80,80,0.3); color: rgba(255,100,100,0.7); font-size: 12px; padding: 5px 12px; border-radius: 20px; cursor: pointer; }

/* ===== 스토리 카드 ===== */
.story-item { background: #1C0A00; border: 1.5px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.story-item-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.story-cat { font-size: 12px; font-weight: 800; color: var(--orange); }
.story-date { font-size: 11px; color: var(--text-muted); }
.story-content { font-size: 15px; color: var(--text-main); line-height: 1.7; word-break: break-word; }
.story-ai { margin-top: 10px; font-size: 14px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 8px; word-break: break-word; }
.story-photo { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
.story-empty { text-align: center; color: var(--text-muted); padding: 30px 20px; font-size: 16px; line-height: 1.7; }

/* ===== 공유 모달 ===== */
.share-modal-overlay { position: fixed !important; inset: 0; background: rgba(0,0,0,0.75); z-index: 9000; display: flex; align-items: center; justify-content: center; }
.share-modal-box { background: #2C1A00; border: 1px solid #C17820; border-radius: 18px; padding: 28px 24px; max-width: 380px; width: 90%; text-align: center; }
.share-modal-title { color: #F5DEB3; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.share-modal-desc { color: #D4A96A; font-size: 13px; line-height: 1.6; margin-bottom: 16px; }
.share-link-wrap { display: flex; gap: 8px; margin-bottom: 10px; }
.share-link-input { flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; color: #F5DEB3; font-size: 12px; padding: 8px 10px; outline: none; }
.share-copy-btn { background: #C17820; color: #fff; border: none; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.share-copy-msg { color: #A5D6A7; font-size: 13px; height: 18px; margin-bottom: 12px; }
.share-close-btn { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #D4A96A; border-radius: 10px; padding: 8px 20px; font-size: 13px; cursor: pointer; }
.autobio-share-btn { background: rgba(193,120,32,0.15); border: 1px solid #C17820; color: #F5DEB3; border-radius: 10px; padding: 10px 16px; font-size: 14px; cursor: pointer; width: 100%; margin-top: 8px; }

/* ===== prefers-reduced-motion (접근성) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-hint { animation: none; }
  .splash-icon { animation: none; }
  .mic-outer.recording .mic-pulse {
    animation: mic-pulse 2s ease-out infinite !important;
  }
  .autobio-gen-icon {
    animation: float 2s ease-in-out infinite !important;
  }
  .autobio-progress-fill {
    animation: progress-anim 3s ease-in-out infinite !important;
  }
}

/* ===== AI-4 Step 2: 한국어 어절 단위 wrap + 1~2글자 홀아비/과부 줄 자동 분배 ===== */
/* 짧은 라벨/안내 자구 — text-wrap: balance로 마지막 줄 균형 분배 (Chrome 114+/Safari 17.5+) */
.photo-section-label,
.photo-upload-text,
.photo-upload-hint,
.q-text,
.q-tag,
.guide-notice-text,
.rec-text,
.ai-text,
.input-label,
.level-stage,
.level-next,
.story-empty,
.autobio-empty,
.share-modal-title,
.share-modal-desc,
.stories-title,
.autobio-title,
.chapter-label,
.mic-label {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}
/* 긴 본문 — text-wrap: pretty로 마지막 줄 보호 (Chrome 117+/Safari 17.5+) */
.chapter-content,
.story-content,
.story-ai {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ===== AI-4 Step 3: 전체 wrap 시스템 정비 — 앱 전역 fallback + 누락 selector text-wrap balance ===== */
/* 1. 앱 전역 fallback — 모든 텍스트 한국어 어절 단위 wrap (cascade) */
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 2. 누락 selector — 마지막 줄 균형 분배 (짧은 라벨 / 안내 / 상태 / 버튼 / 동적 메시지) */
.splash-title,
.splash-sub,
.sec-label,
.topic-section-label,
.scroll-hint,
.listening-guide,
.photo-q-label,
.photo-q-btn,
.analyzing-text,
.mic-status,
.ai-name,
.stories-loading,
.autobio-gen-text,
.autobio-gen-sub,
.autobio-title-label,
.autobio-confirm-btn,
.autobio-regen-btn,
.autobio-share-btn,
.share-copy-msg,
.badge-item,
.badge-hint,
.story-cat {
  text-wrap: balance;
}

/* Mobile senior readability tuning — Galaxy/TWA scoped (D안 최소 적용) */
@media (max-width: 599px) {
  :root {
    --text-muted: #DDA94E;
    --border: #7A4A0C;
  }

  .cat-mini-name {
    font-size: 13px;
  }

  .cat-mini-cnt {
    font-size: 13px;
  }

  .milestone-label {
    font-size: 12px;
  }

  .badge-hint {
    color: rgba(245, 222, 179, 0.72);
  }

  /* D2 — 미니카드 칸 구분 + 로그인 보관 버튼 시인성 (Galaxy/mobile) */
  .cat-mini-item {
    border-color: #9A5C12;
    background: rgba(46, 17, 0, 0.92);
    box-shadow: 0 0 0 1px rgba(244, 160, 32, 0.18);
  }

  .anon-save-btn {
    color: #FFD166;
    border-color: #9A5C12;
    background: rgba(46, 17, 0, 0.88);
    font-weight: 700;
    opacity: 1;
  }
}