/*
  ============================================================
  japanese/style.css  =  일본어 회화 앱의 "옷"
  ------------------------------------------------------------
  CSS는 "어떻게 보일지"를 정합니다. 기본 문법은 이렇습니다:

      꾸밀대상 { 속성: 값; }

  꾸밀 대상을 고르는 방법 3가지:
      h1          -> h1 태그 전부
      .wrap       -> class="wrap" 인 것 전부      (점 . 으로 시작)
      #todayLabel -> id="todayLabel" 인 것 하나   (샵 # 으로 시작)

  논문 앱과 같은 구조를 쓰되, 색만 일본 여행에 어울리는 붉은 계열로 바꿨습니다.
  두 앱을 홈 화면에 나란히 두었을 때 한눈에 구분되도록 하기 위해서입니다.

  ※ 주의 — CSS도 주석 안에 주석을 넣을 수 없습니다.
     가장 먼저 나오는 닫는 표시에서 끝나버립니다.
  ============================================================
*/

/* ---------- 1) 색깔을 이름표로 미리 정해두기 ----------
   같은 색을 여러 곳에서 쓸 때 이름을 붙여두면
   나중에 한 곳만 고쳐도 전체가 바뀝니다.
   --이름: 값;  으로 만들고   var(--이름)  으로 꺼내 씁니다. */
:root {
  --bg:        #faf7f4;   /* 배경색 (아주 옅은 살구빛 회색) */
  --surface:   #ffffff;   /* 카드 배경 (흰색) */
  --text:      #1c1a19;   /* 본문 글자색 */
  --text-soft: #5f5854;   /* 덜 중요한 글자색 */
  --text-mute: #8d8681;   /* 가장 흐린 글자색 */
  --line:      #e6dfd9;   /* 경계선 */
  --accent:    #b03a2e;   /* 강조색 (도리이 문의 붉은색) */
  --accent-bg: #f7e9e6;   /* 강조색의 옅은 배경 */
  --ok:        #2f6b4f;   /* 정답 표시 */
  --ok-bg:     #e6f1ea;
  --warn:      #8a4b2a;   /* 오답·오류 메시지 색 */
  --warn-bg:   #faf0e8;
  --radius:    12px;      /* 모서리 둥글기 */
}

/* 기기를 "다크 모드"로 쓰고 있으면 색만 바꿔줍니다.
   구조는 그대로이고 위에서 정한 이름표의 값만 갈아끼우는 것입니다. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #191614;
    --surface:   #232019;
    --text:      #efe9e2;
    --text-soft: #b8b0a8;
    --text-mute: #8b837c;
    --line:      #3a342e;
    --accent:    #e88a7d;
    --accent-bg: #3a2622;
    --ok:        #8fcfae;
    --ok-bg:     #22332a;
    --warn:      #e3a279;
    --warn-bg:   #33261d;
  }
}

/* ---------- 2) 전체 기본값 ---------- */

* { box-sizing: border-box; }

/*
  hidden 이 붙은 것은 무조건 감춥니다.

  ※ 이 한 줄이 없으면 실제로 화면이 깨집니다.
     app.js 는 무언가를 감출 때 hidden 을 붙입니다. 브라우저는 원래 그것을 감춰주지만,
     우리가 .phrase-list { display: flex } 처럼 '어떻게 보일지'를 직접 정해두면
     우리 규칙이 더 세다고 판단해서 감추라는 지시를 무시해 버립니다.
     그 탓에 복습 퀴즈를 열어도 표현 카드가 그대로 남아 있는 문제가 있었습니다.
     !important 는 "이 규칙을 최우선으로" 라는 표시입니다.
*/
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* 글꼴은 앞에서부터 순서대로 시도합니다. 없으면 다음 것을 씁니다.
     한글 글꼴만 적어두면 일본어가 엉뚱한 모양으로 나올 수 있어서,
     일본어 글꼴(히라기노·유고딕·메이리오)을 함께 적어둡니다. */
  font-family: -apple-system, "Apple SD Gothic Neo", "Hiragino Kaku Gothic ProN",
               "Pretendard", "Yu Gothic", "Meiryo", "Malgun Gothic", "맑은 고딕",
               system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  /* 한국어가 단어 중간에서 잘리지 않게 합니다 (설명은 논문 앱 style.css 와 같습니다) */
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 760px;      /* 최대 폭. 글줄이 너무 길면 읽기 힘듭니다 */
  margin: 0 auto;
  padding: 0 20px;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---------- 3) 맨 위 머리말 ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 40px 0 26px;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-mute);
}

h1 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lede { margin: 0; color: var(--text-soft); }

.today {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-mute);
}

/* 학습 상황 줄 (연속 일수 · 익힌 개수 · 복습할 개수) */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.stat {
  font-size: 13px;
  color: var(--text-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;      /* 아주 큰 값을 주면 알약 모양이 됩니다 */
  padding: 3px 12px;
}
.stat b { color: var(--text); }

/* 복습할 것이 밀려 있으면 눈에 띄게 */
.stat.urgent {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.stat.urgent b { color: var(--accent); }

/* ---------- 4) 설정 영역 ---------- */
.controls {
  display: flex;         /* 안의 요소들을 가로로 나란히 배치 */
  flex-wrap: wrap;       /* 자리가 부족하면 다음 줄로 넘김 (휴대폰 대응) */
  gap: 12px;
  align-items: flex-end; /* 아래쪽 기준선을 맞춤 */
  margin: 28px 0 24px;
}

.control {
  display: flex;
  flex-direction: column;  /* 라벨과 선택창을 세로로 쌓음 */
  gap: 5px;
  flex: 1 1 180px;         /* 남는 공간을 나눠 갖되 최소 180px */
}

.control label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}

select {
  font: inherit;                    /* body의 글꼴을 그대로 물려받음 */
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  max-width: 100%;
}

.btn-primary {
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled {
  opacity: 0.55;
  cursor: default;
}

/* 다크 모드에서는 강조색이 밝아지므로 글자를 어둡게 해야 읽힙니다 */
@media (prefers-color-scheme: dark) {
  .btn-primary { color: #1c1310; }
}

.btn-secondary {
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;       /* 글자가 두 줄로 나뉘지 않게 */
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- 5) 상태 메시지 ---------- */
.status {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--accent-bg);
  color: var(--text-soft);
  font-size: 14px;
  margin-bottom: 20px;
}
/* class 를 두 개 붙이면(class="status error") 아래 규칙이 덧씌워집니다 */
.status.error {
  background: var(--warn-bg);
  color: var(--warn);
}

/* ---------- 6) 표현 카드 ---------- */
.phrase-list {
  display: flex;
  flex-direction: column;   /* 카드를 세로로 쌓음 */
  gap: 18px;
  padding-bottom: 50px;
}

.phrase-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
}

/* 답을 펼친 카드는 테두리를 강조색으로 바꿔 '풀었다'는 표시를 남깁니다 */
.phrase-card.open { border-color: var(--accent); }

.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.scene {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-bg);
  border-radius: 999px;
  padding: 2px 10px;
}

.due {
  font-size: 12px;
  color: var(--text-mute);
}
.due.new { color: var(--accent); font-weight: 600; }

/* 저장(★) 버튼 — 오른쪽 끝으로 밀어냅니다 */
.star-btn {
  margin-left: auto;      /* 왼쪽 여백을 최대로 = 오른쪽 끝으로 */
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  border: none;
  background: none;
  color: var(--text-mute);
  cursor: pointer;
}
.star-btn.on { color: var(--accent); }

/* 앞면 — 문제 */
.card-front .meaning-q {
  margin: 0 0 16px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
}

.reveal-btn {
  font: inherit;
  font-weight: 600;
  width: 100%;
  padding: 11px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.reveal-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* 일본어 원문 — 이 앱에서 가장 중요한 줄이므로 가장 크게 */
.jp,
.kana,
.quiz-option {
  /* 일본어는 띄어쓰기가 없어 원래 아무 곳에서나 줄이 바뀝니다.
     body 에 걸어둔 keep-all(띄어쓰기에서만 줄바꿈)을 여기서만 되돌립니다. */
  word-break: normal;
}

.jp {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* 히라가나 읽기 */
.kana {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--text-soft);
}

/* 로마자 */
.roma {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text-mute);
  font-style: italic;
}

/* 한글 발음 */
.hangul {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--text-soft);
}

/* 뜻 (일본어를 먼저 보는 방식일 때 답으로 나옵니다) */
.meaning {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 600;
}

/* 언제 어떻게 쓰는지에 대한 짧은 안내 */
.note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-soft);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* 이 표현에 쓰인 문법 — 평소엔 접혀 있고 눌러야 펴집니다 */
.grammar {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* summary = 접혀 있을 때 보이는 줄 */
.grammar summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  list-style: none;          /* 브라우저 기본 삼각형을 숨기고 */
}
.grammar summary::-webkit-details-marker { display: none; }
.grammar summary::before {
  content: "▸";              /* 직접 그린 삼각형으로 바꿉니다 */
  display: inline-block;
  /* inline-block 은 뒤의 공백을 삼켜버려서, 간격은 margin 으로 줍니다 */
  margin-right: 5px;
  transition: transform 0.15s;
}
/* [open] = 펼쳐진 상태. 삼각형을 아래로 돌립니다 */
.grammar[open] summary::before { transform: rotate(90deg); }

.g-item {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--accent-bg);
}

.g-name {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 600;
}

/* 문법 이름 옆의 짧은 뜻 */
.g-mean {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-mute);
}

.g-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* 예문 — 본문과 구별되게 조금 다르게 */
.g-ex {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--text-mute);
}

/* 문법의 발음 — 이름 아래, 예문 아래에 조용히 붙습니다 */
.g-read,
.g-ex-read {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-mute);
}
.g-ex-read { margin: 3px 0 0; }

/* 예문 옆의 뜻 */
.g-ex-mean {
  margin-left: 4px;
  font-size: 13px;
  color: var(--text-mute);
}

/* '이 문법을 쓰는 표현 N개 보기' */
.g-more {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.g-more:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

/* ---------- 7) 같은 문법을 쓰는 표현 모아보기 ---------- */
.grammar-view {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  margin-bottom: 20px;
}

.gv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.gv-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
}

/* 머리말 안에서는 왼쪽 세로선과 들여쓰기가 없는 편이 깔끔합니다 */
.grammar-view .g-item {
  margin-top: 6px;
  padding-left: 0;
  border-left: none;
}
.grammar-view .g-name { font-size: 20px; }

/* ---------- 8) 복습 퀴즈 ---------- */
.quiz { padding-bottom: 50px; }

.quiz-card,
.quiz-done {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}

.quiz-count {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}

.quiz-question {
  margin: 0 0 20px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-option {
  font: inherit;
  font-size: 19px;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.quiz-option:hover:not(:disabled) { border-color: var(--accent); }
.quiz-option:disabled { cursor: default; opacity: 0.75; }

/* 답을 고른 뒤 — 정답은 초록, 내가 고른 오답은 붉게 */
.quiz-option.correct {
  border-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
  opacity: 1;
  font-weight: 600;
}
.quiz-option.wrong {
  border-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
  opacity: 1;
}

.quiz-feedback {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.verdict {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
}
.verdict.ok { color: var(--ok); }
.verdict.no { color: var(--warn); }

.quiz-done h2 {
  margin: 0 0 8px;
  font-size: 22px;
}
.quiz-done .score {
  margin: 0 0 4px;
  font-size: 17px;
}
.quiz-done .score b { color: var(--accent); }
.quiz-done .note { border: none; padding-top: 0; }
.quiz-done .btn-primary { margin-top: 18px; }

/* ---------- 9) 맨 아래 꼬리말 ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 26px 0 40px;
  font-size: 13px;
  color: var(--text-mute);
}
.site-footer p { margin: 0 0 8px; }
.site-footer .disclaimer { color: var(--text-soft); }
.site-footer .version {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-mute);
}

/* ---------- 10) 화면이 좁을 때 (휴대폰) ----------
   @media = "화면 폭이 560px 이하일 때만 아래 규칙을 적용" 이라는 뜻입니다. */
@media (max-width: 560px) {
  h1 { font-size: 25px; }
  .phrase-card { padding: 18px 16px 20px; }
  .jp { font-size: 23px; }
  .quiz-option { font-size: 17px; }
  /* 버튼을 손가락으로 누르기 쉽게 넓힙니다.
     보조 버튼 둘은 한 줄에 반씩 나눠 놓고, 주 버튼만 가로 전체를 씁니다. */
  .btn-secondary { flex: 1 1 40%; }
  .btn-primary { flex: 1 1 100%; }
  .card-actions .btn-primary,
  .card-actions .btn-secondary { flex: 1 1 auto; }
}

/* ---------- 11) 화면이 넓을 때 (데스크탑) ----------
   표현 3개를 나란히 놓아 한눈에 비교할 수 있게 합니다. */
@media (min-width: 1000px) {
  .wrap { max-width: 1100px; }

  .phrase-list {
    display: grid;                              /* 격자 배치로 바꿉니다 */
    grid-template-columns: repeat(3, 1fr);      /* 같은 폭 3칸 */
    align-items: start;                         /* 카드 높이를 각자에 맞춤 */
    gap: 20px;
  }

  /* 저장한 표현은 개수가 3개를 넘으므로 줄바꿈되며 채워집니다 */
  .quiz-card,
  .quiz-done { max-width: 700px; }

  .jp { font-size: 24px; }
}

/* 마우스를 쓰는 기기에서만 카드에 살짝 반응을 줍니다.
   손가락으로 쓰는 기기에서는 눌린 상태가 남아 지저분해지기 때문입니다. */
@media (hover: hover) {
  .phrase-card {
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .phrase-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
}