/* T-261022-033. 설명 글·한자 확인만. 토큰과 공용 클래스는 studio.css 를 쓴다. */

.guide-page {
  overflow-x: hidden;
}

@media (min-width: 1024px) {
  .guide-page { --gutter: 32px; }
  .guide-page h1 { font-size: 44px; line-height: 56px; }
  .guide-page .card { padding: 24px; }
}

.guide-page .field input::placeholder { color: var(--ink3); }

.guide-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 24px;
}

.el-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.el-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.el-list p {
  margin: 0;
  min-width: 0;
}

.guide-page a.btn-primary,
.guide-page button.btn-secondary {
  width: 100%;
  margin-top: 8px;
}

.guide-page .card + .card { margin-top: 12px; }

.syllable-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.syllable-head h3 { margin: 0; min-width: 0; }

.syllable-head .num {
  flex: none;
  color: var(--ink2);
  font: 400 13px/18px var(--sans);
  font-variant-numeric: tabular-nums;
}

.hanja-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  max-height: 360px;
  overflow: auto;
}

.hanja-row {
  display: grid;
  grid-template-columns: 2.5em auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 28px;
}

.hanja-row .ch {
  font: 700 20px/28px var(--sans);
  color: var(--ink);
}

.hanja-row .strokes {
  font: 400 15px/22px var(--sans);
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hanja-row .gloss {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font: 400 15px/22px var(--sans);
  color: var(--ink2);
}

.result-card .badge { margin-bottom: 8px; }

#results { display: flex; flex-direction: column; gap: 12px; }
#results:empty { display: none; }

.guide-page .note { margin-top: 8px; }