// 코드관리 화면 배치 — 시안 5402:13399의 `row`(공통코드 756 + 40 + 상세코드 756 = 1552).
// 두 목록이 나란히 서는 것은 이 화면만의 배치라 @fox에 넣지 않고 여기 둔다(값은 @fox 토큰).

@use "@fox/styles/abstracts" as fox;

.page {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
}

// 좁은 화면에서는 두 목록이 위아래로 선다 — 나란히 두면 표가 눌려 읽을 수 없다.
.columns {
  display: grid;
  inline-size: 100%;
  gap: fox.gap(9);
  grid-template-columns: 1fr;
}

@include fox.pc {
  .columns {
    grid-template-columns: 1fr 1fr;
  }
}

.panel {
  display: flex;
  // 표가 넓어도 칸이 늘어나지 않게 한다 — 늘어나면 옆 칸을 밀어 두 목록의 폭이 어긋난다.
  min-inline-size: 0;
  flex-direction: column;
}

// 설명 열은 한 줄로 줄이고 넘치면 말줄임한다.
//
// 시안의 셀 컴포넌트에는 말줄임 스타일이 없지만(전문이 들어 있고 word-break만 걸려 있다),
// 프레임 높이가 44로 고정이라 Figma가 넘치는 글자를 잘라 보여준다. CSS는 대신 감싸므로 그대로
// 두면 행마다 높이가 달라진다 — 설명은 자유 입력이라 길이를 예측할 수 없다.
// 잘린 글자는 title로 남겨 마우스를 올리면 전문이 보인다.
.truncate {
  display: block;
  inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}