/* =====================================================================
 * 침묵 키트 — 고정 페이지 HTML 모드용 (#60)
 *
 * `content_format = HTML` 인 페이지에만 실린다. 글 214편은 이 파일을 받지 않는다.
 *
 * ## 이 파일의 존재 이유
 *
 * `/about` 원본은 `wp-block-columns` 18개짜리 2단 이력서다(`/cv` 는 11개).
 * 마크다운에 2단이 없어서 이관하며 눕었다. 저자가 HTML 을 직접 붙여 넣을 수 있게
 * 열되(#60), **그 HTML 이 디자인 시스템 안에 있게** 하는 것이 여기 클래스들이다.
 *
 * ## 🔴 값을 새로 만들지 않는다
 *
 * 색·글꼴·간격을 여기서 발명하면 페이지만 다른 사이트가 된다. 전부 `--q-*` 토큰이다.
 * 그 결과로 **다크모드가 공짜로 따라온다** — 이 파일에 `prefers-color-scheme` 이
 * 한 줄도 없는 이유다.
 *
 * ## 🔴 저자는 `style=` 을 쓸 수 없다
 *
 * CSP(#59)의 `style-src 'self'` 가 인라인 스타일을 막는다. 제약처럼 보이지만
 * 이 파일이 성립하는 조건이기도 하다 — 워드프레스가 본문에 박아 둔
 * `flex-basis:89.2%` 같은 값이 다시 들어올 길이 없다.
 *
 * 그래서 「폭이 조금 다른」 변형이 필요하면 여기에 클래스를 추가한다.
 * 그 편이 낫다 — 변형이 코드 리뷰를 지나가고, 한 곳에 모인다.
 *
 * ## 폭
 *
 * 본문 문단은 672px 다(`quiet.css` 의 읽기 열). 2단은 그 안에서 336px 씩이라
 * 이력서에 못 쓴다. 그래서 단짜리 블록만 **860px** 로 넓힌다 — 코드블록이 이미
 * 쓰고 있는 폭이라 새 축을 만들지 않는다.
 * ===================================================================== */

.v-quiet .post-body .k-wide,
.v-quiet .post-body .k-cols,
.v-quiet .post-body .k-entry { max-width: 860px; }

/* --- 단 ------------------------------------------------------------
 *
 * `.k-cols` 안에 `.k-col` 을 원하는 만큼 둔다. 기본은 균등 분할이다.
 *
 * 🔴 700px 아래에서는 한 단으로 눕는다. 이력서의 2단을 휴대폰에서 유지하면
 *    각 칸이 160px 이 되어 한 줄에 서너 글자가 들어간다.
 * ------------------------------------------------------------------ */
.v-quiet .post-body .k-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
  margin: 40px 0 0;
}
.v-quiet .post-body .k-cols.k-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-quiet .post-body .k-col { min-width: 0; }

/* --- 이력 한 줄 ----------------------------------------------------
 *
 * about·cv 의 실제 모양이다. 왼쪽에 회사·직급·기간, 오른쪽에 설명.
 *
 * `.k-cols` 와 달리 왼쪽이 **레일**이다 — 균등 분할이면 회사 이름 한 줄이
 * 400px 을 먹고 그 아래가 통째로 빈다.
 * ------------------------------------------------------------------ */
.v-quiet .post-body .k-entry {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 10px 40px;
  margin: 44px 0 0;
  padding: 0;
}
.v-quiet .post-body .k-entry > * { min-width: 0; }

/* --- 타이포 -------------------------------------------------------- */

/*  섹션 제목. `h2` 를 그냥 쓰면 「침묵」의 `01 02 03` 카운터가 붙는데,
 *  이력서에 번호는 정보를 더하지 않는다. 이 클래스가 카운터만 끈다. */
.v-quiet .post-body .k-title::before { content: none; }

/*  회사·학교 이름 같은 항목 제목. `h3` 보다 조용하다 */
.v-quiet .post-body .k-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.014em;
  color: var(--q-ink);
}

/*  직급·기간·장소. 원본이 italic 이었는데 본문 서체에서 이탤릭은 위조체가 된다 */
.v-quiet .post-body .k-meta {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.006em;
  color: var(--q-mid);
}

/*  도입 문단. 페이지 맨 위 한 덩어리에만 쓴다 */
.v-quiet .post-body .k-lead {
  margin: 0 0 8px;
  max-width: 672px;
  font-size: 18px;
  line-height: 34px;
  letter-spacing: -0.014em;
  color: var(--q-ink-dim);
}

/* 🔴 문단 리듬을 끊는다.
 *
 *    `.post-body p` 는 문단 사이를 40px 띄운다 — 7,000자 장문을 위한 값이다.
 *    2단 칸 안에서 그 값이 그대로 돌면 왼쪽 칸의 두 줄 사이가 40px 벌어져
 *    오른쪽 설명과 높이가 어긋난다. 칸 안에서는 문단이 조밀해야 한다. */
.v-quiet .post-body .k-col p,
.v-quiet .post-body .k-entry p,
.v-quiet .post-body .k-stack p {
  margin: 14px 0 0;
  max-width: none;
  font-size: 15px;
  line-height: 28px;
}
.v-quiet .post-body .k-col > :first-child,
.v-quiet .post-body .k-entry > * > :first-child,
.v-quiet .post-body .k-stack > :first-child { margin-top: 0; }

/*  묶음. 문단 리듬 없이 줄만 쌓을 때 */
.v-quiet .post-body .k-stack { margin: 32px 0 0; }

/* --- 목록 ----------------------------------------------------------
 *
 * 본문 `ul` 은 불릿과 큰 간격을 갖는다. 기술 목록·수상 내역처럼 짧은 줄이
 * 여럿일 때는 그 리듬이 지면을 늘어뜨린다.
 * ------------------------------------------------------------------ */
.v-quiet .post-body .k-list {
  margin: 12px 0 0;
  padding: 0;
  max-width: none;
}
.v-quiet .post-body .k-list > li {
  margin: 0;
  /* 🔴 22px 이 아니라 0 이다. 아래에서 불릿을 지우므로 자리를 비워 둘 이유가 없다 */
  padding-left: 0;
  font-size: 15px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: var(--q-ink);
}

/* --- 칩 ------------------------------------------------------------
 *
 * 기술 스택 같은 낱말 묶음. 원본이 `skillicons.dev` 이미지를 부르고 있는데
 * 남의 서버가 죽으면 우리 지면이 깨진다. 글자로 낸다.
 * ------------------------------------------------------------------ */
.v-quiet .post-body .k-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  max-width: none;
}
.v-quiet .post-body .k-tags > li { margin: 0; padding-left: 0; }

/* 🔴 「침묵」의 불릿은 `list-style` 이 아니라 `::before` 로 그린 3px 점이다.
 *    `list-style: none` 으로는 안 지워진다 — 실제로 그렇게 만들어 놓고 화면을
 *    찍었더니 칩 앞마다 점이 하나씩 찍혀 있었다. 의사요소를 직접 끈다.
 *
 *    `ol` 쪽도 함께 끈다. 규약은 `ul` 만 말하지만, 번호 매긴 이력을 쓰고 싶어져
 *    `ol.k-list` 를 적는 순간 카운터가 되살아난다. */
.v-quiet .post-body .k-list > li::before,
.v-quiet .post-body .k-tags > li::before { content: none; }
.v-quiet .post-body .k-tag {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--q-rule-strong);
  font-family: var(--q-mono);
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: var(--q-ink-dim);
  white-space: nowrap;
}

/* --- 구분선 --------------------------------------------------------
 *
 * `hr` 은 본문에서 72px 을 먹는다. 섹션이 촘촘한 이력서에는 과하다.
 * ------------------------------------------------------------------ */
.v-quiet .post-body .k-rule {
  margin: 40px 0 0;
  max-width: 860px;
  border: 0;
  border-top: 1px solid var(--q-rule);
}

/* --- 이미지 --------------------------------------------------------
 *
 * 🔴 「침묵」의 본문 이미지 규칙(`.post-body p > img`)은 **장문 글**을 위한 것이다 —
 *    위 여백 62px, 칸 폭 전체. 이력서의 칸 안에서 그 값이 그대로 돌면 배지 하나가
 *    설명 문단만큼 자리를 먹고, 메타 줄과 이미지 사이가 손바닥만큼 벌어진다.
 *    (실측: OpenStack 배지 1280×468 이 칸을 통째로 채웠다 — 오너 지적 2026-08-07)
 *
 * 그래서 키트 안의 이미지는 **기본이 칸 폭**이고 여백이 좁다. 더 작게 만들고 싶으면
 * 크기 변형을 붙인다.
 *
 * 🔴 임의의 픽셀 값을 주지 않는다. `style="width:320px"` 은 CSP 가 막고, 값이 본문에
 *    흩어지면 페이지마다 다른 크기가 생긴다. 고를 수 있는 크기는 아래 셋뿐이다.
 * ------------------------------------------------------------------ */
.v-quiet .post-body .k-col img,
.v-quiet .post-body .k-entry img,
.v-quiet .post-body .k-stack img,
.v-quiet .post-body .k-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* 62px 이 아니다 — 칸 안에서는 문단 사이 간격과 같은 리듬이어야 한다 */
  margin: 16px 0 0;
  filter: var(--q-img-filter);
}
/* 배지·로고. 원본이 1280px 이어도 여기서 멈춘다 */
.v-quiet .post-body .k-img.is-sm { max-width: 200px; }
/* 스크린샷 조각·도표 */
.v-quiet .post-body .k-img.is-md { max-width: 360px; }
/* 칸 폭 전체. 기본과 같지만 «일부러 크게» 라는 뜻을 남긴다 */
.v-quiet .post-body .k-img.is-full { max-width: 100%; }

/* 이미지를 감싼 문단이 자기 여백을 또 더하지 않게 */
.v-quiet .post-body .k-col p:has(> img),
.v-quiet .post-body .k-entry p:has(> img) { margin-top: 16px; }

/* --- 표 ------------------------------------------------------------
 *
 * 🔴 넘치면 **표만** 가로로 구른다. 페이지 몸통이 옆으로 구르면 안 된다.
 *    `.k-scroll` 로 감싼다.
 * ------------------------------------------------------------------ */
.v-quiet .post-body .k-scroll {
  margin: 32px 0 0;
  max-width: 860px;
  overflow-x: auto;
}
.v-quiet .post-body .k-scroll > * { margin-top: 0; }

/* --- 휴대폰 --------------------------------------------------------
 *
 * 700px 은 `admin.css` 가 표를 카드로 접는 폭과 같다. 축을 하나로 유지한다.
 * ------------------------------------------------------------------ */
@media (max-width: 700px) {
  .v-quiet .post-body .k-cols,
  .v-quiet .post-body .k-cols.k-cols-3,
  .v-quiet .post-body .k-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  /* 레일이 위로 올라가면 아래 설명과 붙는다. 항목 사이는 다시 벌린다 */
  .v-quiet .post-body .k-entry { margin-top: 36px; }
}

/* --- 인쇄 ----------------------------------------------------------
 *
 * 이력서는 인쇄된다. 2단이 유지돼야 한 장에 들어간다.
 * ------------------------------------------------------------------ */
@media print {
  .v-quiet .post-body .k-entry { break-inside: avoid; margin-top: 24px; }
  .v-quiet .post-body .k-rule { margin-top: 24px; }
}