/* edu-page-03.css */
/* 자연어 ↔ Turtle 대응표 (#s-assembly) */
.nl-map {
  margin: 14px 0 0;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.88rem;
}
.nl-map-head {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  background: var(--bg-card-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
}
.nl-map-head > span { padding: 8px 14px; }
.nl-map-head > span + span { border-left: 1px solid var(--border-soft); }
.nl-map-row {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  border-bottom: 1px solid var(--border-soft);
}
.nl-map-row:last-child { border-bottom: none; }
.nl-map-row:nth-child(even) { background: rgba(241, 243, 248, 0.55); }
.nl-map-nl {
  padding: 10px 14px;
  color: var(--text);
  line-height: 1.55;
  border-right: 1px solid var(--border-soft);
}
.nl-map-ttl {
  padding: 10px 14px;
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.5;
  word-break: break-word;
}
.nl-map-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--accent-soft);
  color: var(--accent);
}
@media (max-width: 720px) {
  .nl-map-head, .nl-map-row { grid-template-columns: 1fr; }
  .nl-map-head > span + span { border-left: none; border-top: 1px solid var(--border-soft); }
  .nl-map-nl { border-right: none; border-bottom: 1px dashed var(--border-soft); }
}

/* ─── #s-assembly 행별 1:1 매핑 표 ─── */
/* 자연어(40%) : Turtle(60%) 비율, 각 행이 동일 가로 라인에 정렬 */
#s-assembly .asm-map-table {
  margin-top: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.88rem;
}

/* 헤더 행 */
#s-assembly .asm-map-head {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--border-soft);
}
#s-assembly .asm-map-head > span {
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
#s-assembly .asm-map-head > span + span {
  border-left: 1px solid var(--border-soft);
}

/* 각 매핑 행 */
#s-assembly .asm-map-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  border-bottom: 1px solid var(--border-soft);
  align-items: start; /* 좌우 셀 상단 정렬 */
}
#s-assembly .asm-map-row:last-child { border-bottom: none; }
#s-assembly .asm-map-row:nth-child(even) { background: rgba(241,243,248,0.55); }

/* 자연어 셀 (왼쪽, 40%) */
#s-assembly .asm-map-nl {
  padding: 10px 14px;
  color: var(--text);
  line-height: 1.6;
  border-right: 1px solid var(--border-soft);
}

/* Turtle 코드 셀 (오른쪽, 60%) */
#s-assembly .asm-map-ttl {
  padding: 9px 14px;
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--code-text);
  background: var(--code-bg);
  line-height: 1.65;
  /* 긴 Turtle 한 줄: 셀 안에서 처리, 가로 스크롤 최소화 */
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* 좁은 화면 (≤920px): 각 행의 자연어/Turtle을 위아래로 쌓음, 쌍은 묶음으로 유지 */
@media (max-width: 920px) {
  #s-assembly .asm-map-head {
    grid-template-columns: 1fr;
  }
  #s-assembly .asm-map-head > span + span {
    display: none; /* 헤더 우측 열 숨김 — 모바일에선 라벨 하나만 */
  }
  #s-assembly .asm-map-row {
    grid-template-columns: 1fr;
  }
  #s-assembly .asm-map-nl {
    border-right: none;
    border-bottom: 1px dashed var(--border-soft);
  }
}