@font-face {font-family:'NSN';font-weight:400;src:url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2') format('woff2');}
@font-face {font-family:'NSN';font-weight:700;src:url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2') format('woff2');}
@font-face {font-family:'NSN';font-weight:800;src:url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2') format('woff2');}
@font-face {font-family:'NSN';font-weight:900;src:url('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2') format('woff2');}

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

:root {
  --red:        #E85D4A;
  --purple:     #6C5CE7;
  --green:      #06D6A0;
  --green-dark: #3B8B37;
  --blue:       #3366CC;
  --orange:     #E87722;
  --yellow:     #FFD166;
  --bg:         #FFF8F0;
  --border:     #222;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: 'NSN', 'Pretendard', sans-serif;
  font-weight: 400;
  color: var(--border);
}

/* ── 앱 레이아웃 ── */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

/* 1. 스크롤 화면 영역 수정 (하단 바가 늘어날 것을 대비해 여백 확보) */
.screen {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* 기존 padding-bottom: 80px; 에서 아래 코드로 변경 */
  padding-bottom: calc(80px + env(safe-area-inset-bottom)); 
  -webkit-overflow-scrolling: touch;
  display: none;
}

.screen.active { display: block; }

/* ── 탑바 ── */
.topbar {
  background: var(--bg);
  padding: 16px 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* [FIX 3] 홈 로고 72px으로 통일 */
.topbar-logo img { height: 72px; object-fit: contain; }

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}

.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--border);
}

.search-bar input::placeholder { color: #aaa; }

.topbar-simple {
  background: var(--bg);
  padding: 16px 16px;
  /* position: sticky;
  top: 0; */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-simple img { height: 72px; object-fit: contain; }

/* 2. 하단 네비게이션 수정 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--bg);
  border-top: 2.5px solid var(--border);
  display: flex;
  z-index: 20;
  
  /* 안전 영역이 작동하지 않는 기기를 위해 기본 높이를 확보하고, */
  height: 70px; 
  /* 안전 영역이 있는 아이폰에서는 높이를 더 늘려버립니다 */
  height: calc(70px + env(safe-area-inset-bottom)); 
  
  /* 버튼들이 너무 바닥으로 쏠리지 않게 살짝 위로 밀어주기 */
  padding-bottom: env(safe-area-inset-bottom); 
}

/* 3. 개별 아이템 수정 (맨 아래에 작성하셨던 @media standalone 구문은 지우셔도 됩니다!) */
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0; /* 원래대로 위아래 균등하게 12px 유지 */
  gap: 3px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #aaa;
  font-family: inherit;
  transition: color .15s;
}

.nav-item.active { color: var(--purple); }
.nav-item:nth-child(3).active { color: var(--blue); }
.nav-item:last-child.active { color: var(--red); }
.nav-item .ti { font-size: 22px; }
.nav-item span { font-size: 10px; font-weight: 700; }

/* ── 뱃지 ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1.5px solid;
}

.badge-shared  { color: var(--blue);       border-color: var(--blue);       background: #e8f0fb; }
.badge-mine    { color: var(--orange);     border-color: var(--orange);     background: #fef3e8; }
.badge-session { color: var(--blue);       border-color: var(--blue);       background: #e8f0fb; }
.badge-pattern { color: var(--green-dark); border-color: var(--green-dark); background: #e8f5e9; }

.sec-title { font-size: 13px; font-weight: 800; color: #888; padding: 16px 16px 6px; }

/* ── 홈 히어로 ── */
.hero {
  background: var(--red);
  border: 2.5px solid var(--border);
  border-radius: 16px;
  margin: 14px 16px 10px;
  padding: 18px 20px;
}

.hero-quote-en { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.5; margin-bottom: 5px; }
.hero-quote-kr { font-size: 12px; color: rgba(255,255,255,.8); margin-bottom: 12px; }

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

.hero-day   { font-size: 13px; font-weight: 800; color: rgba(255,255,255,.5); }
.hero-refresh {
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
}

/* ── 퀴즈 배너 ── */
.quiz-banner {
  background: var(--purple);
  border: 2.5px solid var(--border);
  border-radius: 16px;
  margin: 0 16px 10px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: transform .1s;
}

.quiz-banner:active { transform: scale(.98); }
.quiz-banner-left h3 { font-size: 16px; font-weight: 900; color: #fff; margin-bottom: 3px; }
.quiz-banner-left p  { font-size: 12px; color: rgba(255,255,255,.8); }

.quiz-banner-right {
  background: var(--yellow);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  color: var(--border);
  cursor: pointer;
  white-space: nowrap;
}

/* ── 문장 카드 ── */
.sent-card {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 14px;
  margin: 8px 16px;
  padding: 14px 16px;
}

.sent-kr   { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.sent-en   { font-size: 14px; color: #555; margin-bottom: 8px; }
.sent-pron { font-size: 12px; color: var(--orange); font-weight: 700; }
.sent-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

/* ── 폴더 카드 ── */
.folder-card {
  background: #fff;
  border: 2.5px solid var(--border);
  border-radius: 14px;
  margin: 8px 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: transform .1s;
}

.folder-card:active { transform: scale(.98); }

.folder-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.folder-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder-name { font-size: 15px; font-weight: 800; }
.folder-sub  { font-size: 12px; color: #888; margin-top: 2px; }

/* ── 폴더 상세 뷰 ── */
.folder-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 0;
  margin-bottom: 12px;
}

.folder-detail-back {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--border);
  padding: 0;
  display: flex;
  align-items: center;
}

.folder-detail-title { font-size: 18px; font-weight: 900; }
.folder-detail-sub   { font-size: 13px; color: #888; font-weight: 700; margin-top: 2px; }

.folder-quiz-btn-wrap { padding: 0 16px 4px; }

/* ── 퀴즈 ── */
.quiz-wrap {
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 80px);
}

.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.quiz-header h2  { font-size: 16px; font-weight: 800; }
.quiz-progress   { font-size: 13px; color: #888; font-weight: 700; }

.progress-bar {
  height: 6px;
  background: #eee;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  margin-bottom: 20px;
}

.progress-fill {
  height: 100%;
  background: var(--purple);
  border-radius: 8px;
  transition: width .3s;
}

.quiz-card {
  background: #fff;
  border: 2.5px solid var(--border);
  border-radius: 18px;
  padding: 24px 20px;
  margin-bottom: 16px;
  text-align: center;
}

.quiz-label { font-size: 12px; font-weight: 800; color: #aaa; letter-spacing: 1px; margin-bottom: 12px; }
.quiz-kr    { font-size: 22px; font-weight: 900; line-height: 1.4; }

/* ── 버튼 ── */
.btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 2.5px solid var(--border);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: transform .1s;
  background: #fff;
  color: var(--border);
}

.btn:active   { transform: scale(.97); }
.btn-purple   { background: var(--purple);  color: #fff; border-color: var(--purple); }
.btn-green    { background: var(--green);   color: #fff; border-color: var(--green); }
.btn-yellow   { background: var(--yellow);  color: var(--border); }
.btn-sm       { padding: 10px; font-size: 14px; border-radius: 10px; }

.btn-row        { display: flex; gap: 10px; }
.btn-row .btn   { flex: 1; }

/* ── 정답 카드 ── */
.answer-card {
  background: #f0faf5;
  border: 2.5px solid var(--green-dark);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 12px;
}

.answer-en   { font-size: 18px; font-weight: 700; color: var(--green-dark); margin-bottom: 8px; }
.answer-pron { font-size: 13px; color: var(--orange); font-weight: 700; }

/* [FIX 4] 퀴즈 하단 고정 액션 버튼 */
.quiz-action-bar {
  margin-top: auto;
  padding-top: 16px;
}

/* ── 헬퍼 버튼 ── */
.helper-btns { display: flex; gap: 8px; margin-bottom: 12px; }

.helper-btn {
  flex: 1;
  padding: 9px 6px;
  border-radius: 10px;
  border: 2px solid;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  position: relative;
}

.helper-btn.hint  { color: var(--yellow);     border-color: var(--yellow);     background: #fffbee; }
.helper-btn.pron-b { color: var(--orange);    border-color: var(--orange);     background: #fff7f0; }
.helper-btn.expr  { color: var(--green-dark); border-color: var(--green-dark); background: #f0faf5; }

/* [FIX 2] 힌트 버튼 눌린(used) 상태 */
.helper-btn.hint.used  { background: var(--yellow);     color: #5a4200; }
.helper-btn.pron-b.used { background: var(--orange);   color: #fff; border-color: var(--orange); }
.helper-btn.expr.used  { background: var(--green-dark); color: #fff; }

/* used 체크 뱃지 */
.helper-box {
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  border: 2px solid;
}

.helper-box.hint-box { background: #fffbee; border-color: var(--yellow); }
.helper-box.pron-box { background: #fff7f0; border-color: var(--orange); color: var(--orange); font-weight: 700; }
.helper-box.expr-box { background: #f0faf5; border-color: var(--green-dark); color: var(--green-dark); }

/* ── 퀴즈 시작 ── */
.start-wrap { padding: 20px 16px; }

.filter-section { margin-bottom: 20px; }
.filter-title   { font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.filter-chips   { display: flex; flex-wrap: wrap; gap: 8px; }

.quiz-start-banner {
  background: var(--purple);
  border: 2.5px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 14px;
  margin-bottom: 24px;
  text-align: center;
}

.quiz-start-banner h2 {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}

.quiz-start-banner p {
  font-size: 13px;
  color: rgba(255,255,255,.75);
  margin-bottom: 14px;
}

/* ── 음성 옵션 토글 ── */
.voice-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.voice-toggle-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--border);
}

.voice-toggle-label span {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  display: block;
  margin-top: 1px;
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #ddd;
  border: 2px solid var(--border);
  border-radius: 24px;
  transition: background .2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  border: 1.5px solid var(--border);
}

.toggle-switch input:checked + .toggle-slider { background: var(--purple); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateY(-50%) translateX(20px); }

/* ── 칩 ── */
.chip {
  padding: 7px 14px;
  border-radius: 20px;
  border: 2px solid var(--border);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--border);
}

.chip.active-session { background: var(--blue);       color: #fff; border-color: var(--blue); }
.chip.active-pattern { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }

/* ── 등록 탭 ── */
.reg-wrap { padding: 16px; }

.reg-tabs { display: flex; gap: 8px; margin-bottom: 16px; }

.reg-tab {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  color: #888;
}

.reg-tab.active { background: var(--border); color: #fff; }

/* ── 폼 ── */
.form-label {
  font-size: 12px;
  font-weight: 800;
  color: #888;
  margin-bottom: 5px;
  display: block;
}

.form-input {
  width: 100%;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  background: #fff;
  margin-bottom: 12px;
}

.form-input:focus { border-color: var(--purple); }

.form-textarea { min-height: 100px; resize: vertical; }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23222'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 36px;
}

/* ── [FIX 1] 퀴즈 완료 화면 ── */
.complete-wrap {
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.complete-card {
  background: var(--purple);
  border: 2.5px solid var(--border);
  border-radius: 20px;
  margin: 0 16px;
  padding: 32px 20px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.complete-trophy {
  cursor: pointer;
  display: inline-block;
  margin-bottom: 12px;
  user-select: none;
  transition: transform .15s;
}

.complete-trophy:active { transform: scale(.9); }

.trophy-icon {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

/* 탭 시 통통 튀는 애니메이션 */
.complete-trophy.pop .trophy-icon {
  animation: trophyPop .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes trophyPop {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.35) rotate(-8deg); }
  60%  { transform: scale(1.2) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.trophy-hint {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
  letter-spacing: .5px;
}

.complete-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
}

.complete-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  font-weight: 700;
  margin-bottom: 24px;
}

.complete-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 14px;
  padding: 14px 20px;
}

.complete-stat {
  flex: 1;
  text-align: center;
}

.complete-stat-num {
  font-size: 24px;
  font-weight: 900;
  color: var(--yellow);
  margin-bottom: 2px;
}

.complete-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
}

.complete-stat-divider {
  width: 1.5px;
  height: 40px;
  background: rgba(255,255,255,.25);
  margin: 0 16px;
  flex-shrink: 0;
}

/* 오늘의 한마디 카드 */
.complete-msg-card {
  background: #fff;
  border: 2.5px solid var(--border);
  border-radius: 16px;
  margin: 0 16px;
  padding: 16px 18px;
}

.complete-msg-label {
  font-size: 11px;
  font-weight: 800;
  color: #aaa;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.complete-msg-en {
  font-size: 15px;
  font-weight: 800;
  color: var(--purple);
  line-height: 1.5;
  margin-bottom: 4px;
}

.complete-msg-kr {
  font-size: 12px;
  color: #888;
  font-weight: 700;
}

/* ── 공통 유틸 ── */
.app-footer {
  text-align: center;
  padding: 16px;
  color: #bbb;
  font-size: 11px;
  font-weight: 700;
}

.hl { background: var(--yellow); border-radius: 3px; padding: 0 2px; }

.loading {
  text-align: center;
  padding: 40px 20px;
  color: #aaa;
  font-weight: 700;
  font-size: 14px;
}

.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--border);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  z-index: 100;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  white-space: nowrap;
}

.toast.show { opacity: 1; }


/* ── 문장 카드 수정/삭제 버튼 ── */
.sent-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1.5px dashed #eee;
}

.sent-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .1s;
}

.sent-btn:active { transform: scale(.96); }

.sent-btn-edit {
  background: var(--yellow);
  color: #5a4200;
  border-color: #e6b800;
}

.sent-btn-delete {
  background: #fff;
  color: var(--red);
  border-color: var(--red);
}

/* ── 수정 모달 ── */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}

.modal-backdrop.open {
  display: flex;
}

.modal-sheet {
  background: var(--bg);
  border: 2.5px solid var(--border);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideUp .25s cubic-bezier(.32,1,.32,1);
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0;
  margin-bottom: 12px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}

.modal-title {
  font-size: 18px;
  font-weight: 900;
}

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #888;
  padding: 0;
  display: flex;
  align-items: center;
}

.modal-body {
  padding: 0 16px 32px;
}

/* [홈화면 앱 모드] 홈화면에 추가해서 실행했을 때만 작동! */
.is-standalone .nav-item {
  padding: 12px 0 20px;
}