/* korean-alphabet-1: colours and course-only rules for kana.css */

.kana-lesson.korean-alphabet-1 {
  --c1: #60a5fa;
  --c2: #0f1f3a;
}

.kana-lesson:where(.korean-alphabet-1) .dialog-line .jp {
  font-size: 1.05em;
  display: block;
  margin-left: 28px;
  color: #e2e4ec;
}

.kana-lesson:where(.korean-alphabet-1) .dialog-line .pronunciation {
  font-size: 0.78em;
  color: #7a7f96;
  display: block;
  margin-left: 28px;
  font-style: italic;
}

.kana-lesson:where(.korean-alphabet-1) .dialog-line .en {
  font-size: 0.82em;
  color: #a0a4b8;
  display: block;
  margin-left: 28px;
}

.kana-lesson:where(.korean-alphabet-1) .vocab-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9em;
}

.kana-lesson:where(.korean-alphabet-1) .vocab-table th {
  background: #1e2235;
  color: #60a5fa;
  padding: 10px 14px;
  text-align: left;
  font-size: 0.82em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 2px solid #2a2d3a;
}

.kana-lesson:where(.korean-alphabet-1) .vocab-table td {
  padding: 9px 14px;
  border-bottom: 1px solid #2a2d3a;
  color: #e2e4ec;
}

.kana-lesson:where(.korean-alphabet-1) .vocab-table tr:nth-child(even) td {
  background: #1a1d27;
}

.kana-lesson:where(.korean-alphabet-1) .vocab-table tr:hover td {
  background: #1e2235;
}

.kana-lesson:where(.korean-alphabet-1) .vocab-table .pron {
  color: #a0a4b8;
  font-style: italic;
}

.kana-lesson:where(.korean-alphabet-1) .vocab-table .note {
  font-size: 0.78em;
  color: #7a7f96;
  font-style: italic;
}

.kana-lesson:where(.korean-alphabet-1) .tag-verb, .kana-lesson:where(.korean-alphabet-1) .tag-noun, .kana-lesson:where(.korean-alphabet-1) .tag-adj, .kana-lesson:where(.korean-alphabet-1) .tag-phrase {
  font-size: 0.7em;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  font-family: system-ui, -apple-system, sans-serif;
}

.kana-lesson:where(.korean-alphabet-1) .tag-verb {
  background: #7c5cbf;
  color: #fff;
}

.kana-lesson:where(.korean-alphabet-1) .tag-noun {
  background: #2a5a8a;
  color: #a8d4ff;
}

.kana-lesson:where(.korean-alphabet-1) .tag-adj {
  background: #1e3a2a;
  color: #7ecfa0;
}

.kana-lesson:where(.korean-alphabet-1) .tag-phrase {
  background: #0f1f3a;
  color: #60a5fa;
}

.kana-lesson:where(.korean-alphabet-1) .tip-box {
  background: #1a1d27;
  border-left: 3px solid #7c5cbf;
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  margin-top: 24px;
  font-size: 0.9em;
  color: #a0a4b8;
}

.kana-lesson:where(.korean-alphabet-1) .tip-box .tip-title {
  display: block;
  color: #60a5fa;
  font-weight: 700;
  font-family: system-ui, -apple-system, sans-serif;
  margin-bottom: 4px;
}

.kana-lesson:where(.korean-alphabet-1) .practice-item {
  background: #1a1d27;
  border: 1px solid #2a2d3a;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 10px;
}

.kana-lesson:where(.korean-alphabet-1) .practice-item p {
  margin: 0 0 6px;
}

.kana-lesson:where(.korean-alphabet-1) .practice-item summary {
  cursor: pointer;
  color: #60a5fa;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85em;
}

.kana-lesson:where(.korean-alphabet-1) .practice-item .answer {
  margin-top: 8px;
  color: #7ecfa0;
}

.kana-lesson:where(.korean-alphabet-1) .jp-word {
  font-size: 1.45rem;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
  color: #fff;
}

.kana-lesson:where(.korean-alphabet-1) .s-hira {
  color: #60a5fa;
}

.kana-lesson:where(.korean-alphabet-1) .s-kata {
  color: #5aa469;
}

.kana-lesson:where(.korean-alphabet-1) .s-kanji {
  color: #f0932b;
}

.kana-lesson:where(.korean-alphabet-1) .sentence-box {
  background: #1a1d27;
  border: 1px solid #2a2d3a;
  border-left: 4px solid #60a5fa;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 10px 0 24px;
  text-align: center;
}

.kana-lesson:where(.korean-alphabet-1) .sentence-jp {
  font-size: 2rem;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
  letter-spacing: 0.08em;
}

.kana-lesson:where(.korean-alphabet-1) .sentence-romaji {
  font-style: italic;
  color: #a0a4b8;
  margin-top: 4px;
}

.kana-lesson:where(.korean-alphabet-1) .sentence-en {
  color: #7ecfa0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9em;
  margin-top: 2px;
}

.kana-lesson:where(.korean-alphabet-1) .plain-list {
  margin: 0 0 20px 1.2rem;
  padding: 0;
  color: #e2e4ec;
}

.kana-lesson:where(.korean-alphabet-1) .plain-list li {
  margin-bottom: 8px;
}

.kana-lesson:where(.korean-alphabet-1) .kana-map {
  border-collapse: collapse;
  margin: 14px 0 6px;
  font-family: system-ui, -apple-system, sans-serif;
}

.kana-lesson:where(.korean-alphabet-1) .kana-map th {
  color: #7a7f96;
  font-size: 0.78em;
  font-weight: 600;
  padding: 4px 12px;
  text-align: center;
}

.kana-lesson:where(.korean-alphabet-1) .kana-map td {
  width: 56px;
  height: 44px;
  text-align: center;
  font-size: 1.4rem;
  color: #4a4e63;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
  border: 1px solid #2a2d3a;
  background: #14161e;
}

.kana-lesson:where(.korean-alphabet-1) .kana-map td.now {
  color: #fff;
  background: #0f1f3a;
  border-color: #60a5fa;
  font-weight: 700;
}

.kana-lesson:where(.korean-alphabet-1) .map-note {
  font-size: 0.85em;
  color: #7a7f96;
  font-style: italic;
  margin: 6px 0 20px;
}

.kana-lesson:where(.korean-alphabet-1) .kana-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 14px 0 22px;
}

.kana-lesson:where(.korean-alphabet-1) .kana-card {
  background: #1a1d27;
  border: 1px solid #2a2d3a;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
}

.kana-lesson:where(.korean-alphabet-1) .kana-glyph {
  font-size: 4.6rem;
  line-height: 1.1;
  color: #60a5fa;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
}

.kana-lesson:where(.korean-alphabet-1) .kana-romaji {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin: 2px 0 6px;
}

.kana-lesson:where(.korean-alphabet-1) .kana-say {
  font-size: 0.85em;
  color: #c9d1d9;
  margin-bottom: 8px;
}

.kana-lesson:where(.korean-alphabet-1) .kana-meta {
  font-size: 0.78em;
  color: #7a7f96;
  margin-bottom: 10px;
}

.kana-lesson:where(.korean-alphabet-1) .kana-meta a {
  color: #60a5fa;
}

.kana-lesson:where(.korean-alphabet-1) .kana-hook {
  font-size: 0.82em;
  color: #a0a4b8;
  text-align: left;
  border-top: 1px solid #2a2d3a;
  padding-top: 8px;
}

.kana-lesson:where(.korean-alphabet-1) .vocab-table .jp-word {
  white-space: nowrap;
}

@media print {
  .kana-lesson:where(.korean-alphabet-1) .kana-meta a {
    color: #60a5fa;
    text-decoration: none;
  }
}

.kana-lesson:where(.korean-alphabet-1) .vowel-strip {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
  font-family: system-ui, -apple-system, sans-serif;
}

.kana-lesson:where(.korean-alphabet-1) .vs-cell {
  width: 92px;
  text-align: center;
  border-radius: 8px;
  padding: 10px 0 8px;
  background: #1a1d27;
  border: 1px solid #2a2d3a;
}

.kana-lesson:where(.korean-alphabet-1) .vs-cell.new {
  background: #0f1f3a;
  border-color: #60a5fa;
}

.kana-lesson:where(.korean-alphabet-1) .vs-kana {
  display: block;
  font-size: 2.6rem;
  line-height: 1.1;
  color: #fff;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
}

.kana-lesson:where(.korean-alphabet-1) .vs-cell.old .vs-kana {
  color: #c9d1d9;
}

.kana-lesson:where(.korean-alphabet-1) .vs-rom {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #60a5fa;
  margin-top: 2px;
}

.kana-lesson:where(.korean-alphabet-1) .kana-map td.old {
  color: #c9d1d9;
}

.kana-lesson:where(.korean-alphabet-1) .recap-box {
  background: #1a1d27;
  border: 1px solid #60a5fa;
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 28px;
}

.kana-lesson:where(.korean-alphabet-1) .recap-box h3 {
  margin: 0 0 6px;
  color: #60a5fa;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
}

/* Hangul glyphs: Korean fonts instead of the Japanese ones in kana.css */
.kana-lesson:where(.korean-alphabet-1) .kana-glyph,
.kana-lesson:where(.korean-alphabet-1) .kana-map td,
.kana-lesson:where(.korean-alphabet-1) .sentence-jp,
.kana-lesson:where(.korean-alphabet-1) .jp-word {
  font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

.kana-lesson:where(.korean-alphabet-1) .jp-word {
  font-size: 1.35em;
  color: var(--c1);
}