/* 소프트웨어 페이지만 받는다(software.html 의 head_extra). 모듈 이름을 모르는
   사람도 열한 개의 순서와 AI 담당을 먼저 보고, 긴 기술 문장은 원하는 사람만 연다. */

/* ── 모듈 지도 ─────────────────────────────────────────── */

.modmap-sec {
  padding-block: 0 var(--nx-sp-16);
}

.modmap {
  display: grid;
  gap: var(--nx-sp-2);
}

.modmap__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--nx-sp-2) var(--nx-sp-6);
  margin-bottom: var(--nx-sp-2);
  font-size: var(--nx-fs-sm);
  color: var(--nx-text-2);
}

.modmap__cap span {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-sp-2);
}

.modmap__key {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--nx-accent);
}

.modmap__key--wip,
.modmap__chip.is-wip {
  background: transparent;
  border: 1.5px dashed var(--nx-text-muted);
}

.modmap__lane,
.modmap__bus {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: var(--nx-sp-4);
  padding: var(--nx-sp-5);
  border-radius: var(--nx-r-lg);
  background: var(--nx-bg-sunken);
}

.modmap__name {
  font-size: var(--nx-fs-base);
  font-weight: 600;
  color: var(--nx-text);
}

.modmap__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--nx-sp-2);
}

.modmap__chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: var(--nx-sp-3) var(--nx-sp-4);
  border: 1.5px solid transparent;
  border-radius: var(--nx-r-md);
  background: var(--nx-bg-base);
  color: var(--nx-text);
  transition: transform var(--nx-t-fast), box-shadow var(--nx-t-fast);
}

/* 칩이 좁아 두 줄이 되면 한 낱말만 아랫줄에 남지 않게 줄 길이를 고른다. */
.modmap__chip b {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* 영문 이름 색은 칩 바탕마다 --chip-sub 로 바꿔 끼운다. */
.modmap__chip span {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-xs);
  color: var(--chip-sub, var(--nx-text-2));
}

/* 한글 상태는 고정폭 글꼴에서 글자 사이가 벌어진다. 본문 글꼴로 되돌린다. */
.modmap__chip i {
  font-family: var(--nx-font-sans);
  font-style: normal;
}

.modmap__chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--nx-e3);
}

/* 런타임은 처리 흐름 그대로다 — 검은 판 위에 화살표로 순서를 잇는다. */
.modmap__lane--runtime {
  background: var(--nx-bg-abyss);
}

.modmap__lane--runtime .modmap__name {
  color: var(--nx-text-invert);
}

.modmap__lane--runtime .modmap__chip {
  --chip-sub: var(--nx-text-invert-2);
  background: var(--nx-s-dark);
  color: var(--nx-text-invert);
}

/* 포커스 링은 base.css 의 링크 파랑이다. 검은 판 위에서만 밝은 파랑으로 바꾼다. */
.modmap__lane--runtime .modmap__chip:focus-visible {
  outline-color: var(--nx-accent-dark);
}

.modmap__arrow {
  align-self: center;
  color: var(--nx-text-invert-2);
}

/* 화살표와 뒤 칩의 묶음. 줄이 바뀌는 중간 폭에서만 묶고, 그 밖에서는 없는 셈이다. */
.modmap__step {
  display: contents;
}

@media (min-width: 721px) and (max-width: 1179px) {
  .modmap__step {
    display: flex;
    gap: var(--nx-sp-2);
  }
}

/* AI 단계는 파랑 한 색으로 묶는다. 런타임 칩 규칙과 우선순위가 같아 뒤에 두어 이긴다. */
.modmap__chip.is-ai {
  --chip-sub: var(--nx-text-on-accent);
  background: var(--nx-accent);
  color: var(--nx-text-on-accent);
}

/* 흐름 한 줄이 넓은 화면에서 끊기지 않게 칩이 폭을 나눠 갖는다. 1180px 아래에서는
   칩이 좁아 '주소 / 매칭 · 참조 / 데이터 엔진'처럼 세 줄로 쪼개져 두 줄 흐름으로 넘긴다. */
@media (min-width: 1180px) {
  .modmap__lane--runtime .modmap__chips {
    flex-wrap: nowrap;
  }
  .modmap__lane--runtime .modmap__chip {
    flex: 1 1 0;
    min-width: 0;
  }
}

.modmap__bus {
  padding-block: var(--nx-sp-3);
  background: linear-gradient(90deg, rgba(0, 113, 227, 0.06), rgba(0, 113, 227, 0.02));
  font-size: var(--nx-fs-sm);
  color: var(--nx-text-2);
}

/* #0071e3 은 옅은 파랑 바탕 위에서 4.3:1 로 모자라 한 단 짙은 링크 파랑을 쓴다. */
.modmap__bus b {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-base);
  color: var(--nx-link, #0066cc);
}

/* 지도가 떠오를 때 칩이 흐름 순서대로 하나씩 켜진다. backwards 로 두어
   애니메이션이 끝난 뒤에는 hover 의 transform 을 막지 않는다. */
@media (prefers-reduced-motion: no-preference) {
  .js .modmap:not(.is-visible) .modmap__chip {
    opacity: 0;
  }
  .js .modmap.is-visible .modmap__chip {
    animation: modmap-in 520ms cubic-bezier(0.28, 0.11, 0.32, 1) backwards;
    animation-delay: calc(var(--i, 0) * 70ms + 160ms);
  }
}

@keyframes modmap-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ── 모듈 목록 ─────────────────────────────────────────────
   기능 이름이 제목이고 영문 이름은 그 위의 작은 표찰이다. 배지는 제목 끝에
   글자처럼 붙어 긴 기능 이름과 함께 줄을 바꾼다. */

.modlist .grid--2 {
  gap: var(--nx-sp-6) var(--nx-sp-10);
}

.modlist .frow__label {
  margin-bottom: var(--nx-sp-2);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-sm);
  color: var(--nx-text-2);
}

.modlist .feature__title {
  display: block;
  line-height: 1.25;
}

.modlist .feature__title .badge {
  margin-left: var(--nx-sp-2);
  vertical-align: 5px;
}

/* 지도의 파란 칩, 범례의 파란 네모와 같은 모양으로 맞춘다. 흰 글/#0071e3 4.70:1. */
.modlist .badge--ai {
  background: var(--nx-accent);
  color: var(--nx-text-on-accent);
}

.feature__more summary {
  display: flex;
  align-items: center;
  gap: var(--nx-sp-2);
  min-height: 44px;
  color: var(--nx-link, #0066cc);
  cursor: pointer;
  list-style: none;
}

.feature__more summary::-webkit-details-marker {
  display: none;
}

.feature__more summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--nx-t-fast), margin var(--nx-t-fast);
}

.feature__more[open] summary {
  margin-bottom: var(--nx-sp-3);
}

.feature__more[open] summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.feature__more summary:hover {
  text-decoration: underline;
}

/* 휴대폰에서는 칩을 한 줄에 하나씩 세운다. 런타임은 화살표를 아래로 돌려
   흐름을 위에서 아래로 읽게 한다 — 옆으로 흘리면 화살표가 줄 끝에 걸린다. */
@media (max-width: 720px) {
  .modmap__lane,
  .modmap__bus {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nx-sp-3);
    padding: var(--nx-sp-4);
  }
  .modmap__chips {
    flex-direction: column;
  }
  .modmap__lane--runtime .modmap__chips {
    gap: 2px;
  }
  /* 줄바꿈 flex 는 줄 상자를 늘여 글자가 위로 쏠린다. 줄 묶음을 가운데로 모은다. */
  .modmap__chip {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    justify-content: space-between;
    column-gap: var(--nx-sp-3);
    padding: var(--nx-sp-2) var(--nx-sp-4);
  }
  .modmap__arrow {
    transform: rotate(90deg);
    line-height: 1.2;
  }
  .modlist .grid--2 {
    row-gap: var(--nx-sp-2);
  }
}