/* style.css — 앱 화면 꾸밈. 판다 테마(크림·대나무 초록·볼터치 분홍), 동글동글한 모양과 글꼴 */
:root {
  --bg: #fff8ee;        /* 바탕: 따뜻한 크림색 */
  --card: #ffffff;      /* 카드 */
  --fg: #3b3430;        /* 글자: 부드러운 고동색 */
  --muted: #8a7d72;     /* 흐린 글자 */
  --line: #f1e3d3;      /* 선·그림자 */
  --ink: #4fa86a;       /* 주색: 대나무 초록 */
  --ink-soft: #e5f5e7;  /* 주색 연한 배경 */
  --seal: #f26b86;      /* 강조: 볼터치 분홍 (경성·AI·녹음) */
  --seal-soft: #ffe4ea; /* 강조 연한 배경 */
  --ok: #3f9a5c; --ok-soft: #e1f4e5;      /* 알았다 */
  --mid: #c98a12; --mid-soft: #fff1cf;    /* 헷갈림 */
  --bad: #e0566f; --bad-soft: #ffe4ea;    /* 몰랐다 */
  --panda: #2f2a28;     /* 판다 검정 */
  --zh: "Noto Sans SC", "PingFang SC", sans-serif;                      /* 한자 글꼴: 둥근 고딕 */
  --ko: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;  /* 한글 본문: 읽기 편한 고운돋움 */
  --cute: "Jua", "Gowun Dodum", "Apple SD Gothic Neo", sans-serif;      /* 제목·버튼: 동글동글 주아 */
  --mono: "Nunito", "Gowun Dodum", sans-serif;                          /* 병음·숫자: 둥근 영문 글꼴 (성조 표시 지원) */
  --shadow: 0 4px 0 var(--line);                                         /* 카드 아래 도톰한 그림자 */
}
@media (prefers-color-scheme: dark) {   /* 폰이 다크 모드일 때 */
  :root {
    --bg: #1d1a17; --card: #272320; --fg: #f3ebe2; --muted: #b3a698; --line: #3a332d;   /* 따뜻한 밤색 바탕 */
    --ink: #8fd6a1; --ink-soft: #24382a; --seal: #ff98ab; --seal-soft: #43272e;          /* 연두·분홍은 밝게 */
    --ok: #8fd6a1; --ok-soft: #21352a; --mid: #f0c15c; --mid-soft: #3d3218; --bad: #ff98ab; --bad-soft: #43272e;
    --panda: #f3ebe2;                                                                      /* 어두운 바탕에서는 판다 선을 밝게 */
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }                                      /* 크기 계산을 쉽게 */
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--ko); font-size: 15px; line-height: 1.55; }
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }  /* 아래 메뉴만큼 여백 */
main { max-width: 1100px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 14px; }
h1 { font-size: 24px; margin: 0; font-family: var(--cute); font-weight: 400; }   /* 큰 제목: 주아 */
h2 { font-size: 18px; margin: 0; font-family: var(--cute); font-weight: 400; }   /* 작은 제목: 주아 */
p { margin: 0; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--ink); }
.zh { font-family: var(--zh); }
.py { font-family: var(--mono); color: var(--ink); }
.neutral { color: var(--seal); }                                   /* 경성 음절 빨간색 */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.card { background: var(--card); border: 0; box-shadow: var(--shadow); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chip { border: 2px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-family: var(--cute); }   /* 동그란 선택 칩 */
.chip.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.pill { align-self: center; font-family: var(--cute); font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--ink-soft); color: var(--ink); white-space: nowrap; }
.pill.ai { background: var(--seal-soft); color: var(--seal); }
.btn { border: 2px solid var(--line); background: var(--card); border-radius: 999px; min-height: 46px; padding: 0 18px; font-family: var(--cute); font-size: 15px; }   /* 알약 모양 버튼 */
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 70%, #000); }   /* 주 버튼: 초록 + 아래 그림자 */
.btn.rec { background: var(--seal); color: #fff; border-color: var(--seal); }
.btn:disabled { opacity: .5; }
.round { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 70%, #000); display: grid; place-items: center; flex-shrink: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.b-bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.b-mid { background: var(--mid-soft); color: var(--mid); border-color: transparent; }
.b-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
:focus-visible { outline: 3px solid var(--seal); outline-offset: 2px; }

/* 아래 메뉴 */
#tabs { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -4px 0 var(--line); padding: 6px max(6px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); z-index: 5; }
#tabs a { text-decoration: none; display: flex; flex-direction: column; align-items: center; font-size: 12px; font-family: var(--cute); color: var(--muted); padding: 4px 0; border-radius: 16px; }
#tabs a .zh { font-size: 20px; line-height: 1.2; }
#tabs a.on { color: var(--ink); background: var(--ink-soft); }   /* 지금 화면: 연두 동그라미 */
#toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 9; max-width: 90vw; }

/* 홈 */
.dday { background: var(--ink-soft); color: var(--fg); border-radius: 28px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; box-shadow: var(--shadow); }   /* D-day: 연두 구름 카드 */
.dday .panda { width: 64px; height: auto; flex-shrink: 0; }   /* D-day 옆 판다 얼굴 */
.dday b { font-family: var(--cute); font-size: 40px; font-weight: 400; color: var(--seal); }   /* D-숫자: 분홍 주아 */
.card.task { text-decoration: none; color: var(--fg); flex-direction: row; gap: 14px; align-items: center; }
.task .zh { font-size: 26px; color: var(--ink); width: 34px; text-align: center; }
.bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; }
.bar { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 11px; color: var(--muted); }
.bar i { display: block; width: 100%; height: 56px; border-radius: 999px; background: var(--line); position: relative; overflow: hidden; }
.bar i span { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); }

/* 단어 카드 */
.wordcard .hz { font-family: var(--zh); font-size: 56px; font-weight: 700; line-height: 1.1; }
.wordcard .pyl { font-family: var(--mono); font-size: 21px; font-weight: 700; color: var(--ink); }
.wordcard .mean { font-size: 20px; font-family: var(--cute); }   /* 뜻: 주아 */
.section { border-top: 2px dotted var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.label { font-size: 12px; color: var(--muted); font-family: var(--cute); }
.hidebtn { border: 2px dashed var(--line); background: transparent; border-radius: 18px; min-height: 46px; color: var(--muted); }
.progress { height: 8px; background: var(--ink-soft); border-radius: 999px; overflow: hidden; }   /* 동그란 진행 막대 */
.progress span { display: block; height: 8px; background: var(--ink); border-radius: 999px; }
@media (min-width: 900px) {                                         /* PC·폴드 펼친 화면 */
  .wide { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
  .wordcard .hz { font-size: 72px; }
}
.wlist { display: flex; flex-direction: column; max-height: 65vh; overflow-y: auto; overscroll-behavior: contain; }  /* 단어 목록: 안에서만 스크롤 */
.wlist-wrap { padding: 8px; }
.wlist button { display: flex; gap: 8px; align-items: center; min-height: 40px; border: 0; border-bottom: 2px dotted var(--line); background: transparent; padding: 9px 12px; text-align: left; border-radius: 14px; }
.wlist button.cur { background: var(--ink-soft); color: var(--ink); font-weight: 600; }
@media (max-width: 899px) { .wlist-wrap { display: none; } .wlist-wrap.open { display: flex; } .wlist { max-height: 45vh; } }   /* 폰: "목록" 버튼으로 열기 */
@media (min-width: 900px) { .mobile-only { display: none; } }    /* PC에서는 목록이 늘 보이므로 버튼 숨김 */

/* 질문 연습 */
.qimg { width: 100%; max-height: 240px; object-fit: contain; border-radius: 20px; background: var(--ink-soft); }
.timer { font-family: var(--cute); font-size: 44px; color: var(--seal); text-align: center; }
textarea { width: 100%; min-height: 110px; border: 2px solid var(--line); border-radius: 18px; padding: 10px; background: var(--card); font-family: var(--zh); font-size: 16px; }
.qrow { display: flex; justify-content: space-between; gap: 10px; text-align: left; border: 0; box-shadow: var(--shadow); background: var(--card); border-radius: 20px; padding: 12px 14px; width: 100%; }

/* 잘 때 듣기 */
.sleep { background: #232a3d; color: #d9d6e8; border-radius: 28px;   /* 잘 때: 포근한 밤하늘색 */ padding: 22px 18px; min-height: 60vh; display: flex; flex-direction: column; gap: 16px; }
.sleep .now { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.sleep .hz { font-family: var(--zh); font-size: 64px; color: #fff8ee; line-height: 1.1; }
.sleep .chip { background: transparent; color: #d9d6e8; border-color: #3a4360; }
.sleep .chip.on { background: #ffd98a; color: #232a3d; border-color: #ffd98a; }   /* 선택: 달빛 노랑 */
.sleep .round { background: #ffd98a; color: #232a3d; width: 72px; height: 72px; box-shadow: 0 3px 0 #b89a52; }
.sleep .round.sm { background: transparent; color: #d9d6e8; border: 2px solid #3a4360; box-shadow: none; width: 52px; height: 52px; }
.sleep select { background: #2c3550; color: #d9d6e8; border: 2px solid #3a4360; border-radius: 14px; padding: 6px; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
input[type=text], input[type=password], input[type=date], select { border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; background: var(--card); }

/* AI 비밀번호 입력 창 */
.modal { position: fixed; inset: 0; background: rgba(59,52,48,.45); display: grid; place-items: center; z-index: 20; padding: 16px; }
.modal .card { width: min(380px, 100%); }