/**
 * Integrations directory (CPT: integration) — archive grid + single doc.
 * 여백·타이포는 캡슐 정품 토큰(capsule-site.css)을 그대로 따른다: Manrope, 블루
 * #1A6FFF, 헤딩 #0F1130, 뮤트 #6B7280, .container(1280 / 40px 패딩).
 * 레퍼런스: linear.app/integrations(카드 그리드) · linear.app/integrations/slack(싱글 문서).
 */

.int-page { font-family: var(--font-sans, 'Manrope', 'Pretendard Variable', sans-serif); }

/* ──────── 공통 ──────── */
.int-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary-hover, #1458D4);
  margin-bottom: 14px;
}
.int-mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: inherit;
  background: linear-gradient(135deg, var(--color-primary, #1A6FFF), var(--color-primary-hover, #1458D4));
  color: #fff; font-weight: 700; font-size: 18px; letter-spacing: 0;
}

/* ──────── 아카이브 ──────── */
.int-archive { padding: 80px 0 140px; }
.int-archive__head { max-width: 860px; margin: 0 auto 8px; text-align: center; }
.int-archive__title {
  margin: 0 0 12px; font-size: clamp(30px, 3.4cqi, 42px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.18; color: var(--color-heading, #0F1130);
  white-space: nowrap;
}
.int-archive__lead {
  margin: 0 auto; font-size: 16px; line-height: 1.65; color: var(--color-text-muted, #6B7280);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .int-archive__title, .int-archive__lead { white-space: normal; }
}

.int-search { max-width: 420px; margin: 32px auto 56px; position: relative; }
.int-search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted, #6B7280); pointer-events: none;
}
.int-search input {
  width: 100%; padding: 11px 14px 11px 40px; border-radius: 10px;
  border: 1px solid #E5E7EB; background: #fff; font-size: 14.5px;
  font-family: inherit; color: var(--color-heading, #0F1130);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.int-search input::placeholder { color: #9CA3AF; }
.int-search input:focus {
  outline: none; border-color: var(--color-primary, #1A6FFF);
  box-shadow: 0 0 0 3px rgba(26,111,255,0.12);
}

/* auto-fit + justify-content:center — 카드 수가 적어도(3~4개) 빈 열이 생기지 않고
   카드 자체가 넉넉하게 커져서 중앙에 자리잡는다. auto-fill이면 안 쓰는 열까지
   자리를 잡아 카드가 좁게 눌리고 오른쪽에 죽은 공간만 남는다(실측). */
.int-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px; max-width: 980px; margin: 0 auto;
}
.int-card { flex: 0 1 300px; }
.int-empty {
  display: none; text-align: center; padding: 48px 0; color: var(--color-text-muted, #6B7280); font-size: 14.5px;
}
.int-empty.is-visible { display: block; }

.int-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px; border-radius: 16px; border: 1px solid transparent;
  background: var(--color-surface-subtle, #F7F8FB);
  text-decoration: none; color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
a.int-card:hover {
  transform: translateY(-2px); background: #fff;
  border-color: var(--color-primary-soft, #85B3FF);
  box-shadow: 0 10px 24px rgba(15, 17, 48, 0.08);
}
/* [hidden]은 .int-card{display:flex}와 특이도가 같아 UA 기본값이 밀릴 수 있음 — 명시로 고정 */
.int-grid .int-card[hidden] { display: none; }
/* soon도 전체를 흐리지 않는다 — 글자는 항상 선명하게, 차이는 상태 표시 하나로만 준다.
   (이전엔 opacity:.62로 카드 전체를 죽여서 "고장난 카드"처럼 보였다) */
.int-card--soon { cursor: default; border-style: dashed; border-color: #E1E4EA; }
.int-card--soon:hover { transform: none; box-shadow: none; background: var(--color-surface-subtle, #F7F8FB); }

.int-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* 로고 = 흰 타일. 카드가 회색이라 로고가 살짝 뜬 느낌이 나도록 얇은 테두리로 정의를 준다. */
.int-card__logo {
  width: 52px; height: 52px; border-radius: 12px; overflow: hidden;
  background: #fff; border: 1px solid #E9EBF0; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.int-card__logo svg { width: 28px; height: 28px; }
.int-card__logo-img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

/* 상태 = 점 + 텍스트. 카테고리(배경 없는 라벨)와 형태가 겹치지 않게 "칩"을 여기 하나로만 둔다. */
.int-card__status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap; margin-top: 3px;
}
.int-card__status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
}
.int-card__status--live { color: #0E8F5A; }
.int-card__status--live::before { background: #0E8F5A; }
.int-card__status--soon { color: var(--color-text-muted, #6B7280); }
.int-card__status--soon::before { background: #D1D5DB; }

/* 구간별 리듬을 분리: 킥커→제목은 바싹 붙이고(2px), 제목→설명은 한 호흡 띔(7px).
   이전엔 flex gap 하나로 전 구간이 같은 간격이라 로고 아래만 유독 헐렁해 보였다. */
.int-card__body { flex: 1; display: flex; flex-direction: column; }
.int-card__cat {
  margin: 0 0 7px; display: block;
  font-family: var(--font-mono, monospace); font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary-hover, #1458D4);
}
.int-card__name { margin: 0; font-size: 17px; font-weight: 700; color: var(--color-heading, #0F1130); letter-spacing: -0.005em; }
.int-card__tagline {
  margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--color-text-muted, #6B7280);
  word-break: keep-all; overflow-wrap: break-word;
}

/* ──────── 싱글: 좌 본문 / 우 sticky 스펙 사이드바 (linear.app/integrations/slack 참고) ──────── */
.int-single { padding: 56px 0 96px; container-type: inline-size; }
.int-single__inner { max-width: 1040px; margin: 0 auto; }
.int-crumbs { font-size: 13px; color: var(--color-text-muted, #6B7280); margin-bottom: 28px; }
.int-crumbs a { color: inherit; text-decoration: none; }
.int-crumbs a:hover { color: var(--color-primary, #1A6FFF); }
.int-crumbs .sep { margin: 0 6px; color: #D1D5DB; }

.int-single__head { margin-bottom: 20px; }
.int-single__head .int-eyebrow { margin-bottom: 14px; }
.int-single__titlerow { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.int-single__logo {
  width: 60px; height: 60px; border-radius: 14px; overflow: hidden; flex: none;
  background: #fff; border: 1px solid #E9EBF0; box-shadow: 0 6px 16px rgba(15, 17, 48, 0.06);
  display: flex; align-items: center; justify-content: center;
}
.int-single__logo svg { width: 32px; height: 32px; }
.int-single__logo .int-card__logo-img { width: 100%; height: 100%; object-fit: contain; padding: 11px; }
.int-single__title { margin: 0; font-size: clamp(28px, 3.4cqi, 38px); font-weight: 700; letter-spacing: -0.018em; color: var(--color-heading, #0F1130); }
.int-single__tagline { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--color-text-muted, #6B7280); max-width: 62ch; }

.int-single__rule { border: none; border-top: 1px solid #E5E7EB; margin: 0 0 40px; }

.int-single__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
/* 모바일(1열): 스펙 카드를 본문 위로 올려 상태·CTA가 스크롤 없이 먼저 보이게. */
.int-single__grid > .int-spec { order: -1; }
@container (min-width: 780px) {
  .int-single__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; }
  .int-single__grid > .int-spec { order: 0; }
}

/* 스펙 사이드바 — 아카이브 카드와 같은 회색 카드 + 흰 로고 타일 언어를 그대로 이어간다. */
.int-spec {
  background: var(--color-surface-subtle, #F7F8FB); border-radius: 16px; padding: 22px;
  max-width: 440px; /* 1열(모바일·태블릿)에서 카드가 본문폭만큼 늘어나지 않게. 데스크톱은 아래서 해제 */
}
@container (min-width: 780px) {
  .int-spec { position: sticky; top: 96px; max-width: none; }
}
.int-spec__id { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #E5E7EB; }
.int-spec__logo {
  width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: none;
  background: #fff; border: 1px solid #E9EBF0;
  display: flex; align-items: center; justify-content: center;
}
.int-spec__logo svg { width: 24px; height: 24px; }
.int-spec__logo .int-card__logo-img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.int-spec__name { font-size: 15px; font-weight: 700; color: var(--color-heading, #0F1130); }
.int-spec__by { font-size: 12.5px; color: var(--color-text-muted, #6B7280); margin-top: 1px; }

.int-spec__rows { padding: 16px 0; border-bottom: 1px solid #E5E7EB; display: flex; flex-direction: column; gap: 14px; }
.int-spec__row { display: flex; flex-direction: column; gap: 3px; }
.int-spec__label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-muted, #6B7280); }
.int-spec__value { font-size: 14px; color: var(--color-heading, #0F1130); }
.int-spec__rows .int-card__status { font-size: 13px; margin-top: 0; }

.int-single__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 8px; background: var(--color-primary, #1A6FFF);
  color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: none; line-height: 22px;
  transition: background 0.18s;
}
.int-single__cta:hover { background: var(--color-primary-hover, #1458D4); }
.int-single__cta--block { width: 100%; margin-top: 18px; }
.int-single__soon-note { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted, #6B7280); }

/* 본문 — 통합마다 구조가 달라도 되는 자유 에디터 영역 */
.int-doc.entry-content { font-size: 15.5px; line-height: 1.75; color: #2A3147; }
.int-doc.entry-content > * { margin: 0 0 1.05em; }
.int-doc.entry-content h2 {
  margin: 44px 0 14px; font-size: 23px; font-weight: 700; letter-spacing: -0.012em;
  color: var(--color-heading, #0F1130); scroll-margin-top: 90px;
}
.int-doc.entry-content h2:first-child { margin-top: 0; }
.int-doc.entry-content h3 {
  margin: 26px 0 10px; font-size: 17.5px; font-weight: 650; letter-spacing: -0.008em;
  color: var(--color-heading, #0F1130); scroll-margin-top: 90px;
}
.int-doc.entry-content p { margin-bottom: 1em; }
.int-doc.entry-content strong { color: var(--color-heading, #0F1130); font-weight: 650; }
.int-doc.entry-content ul { padding-left: 22px; }
.int-doc.entry-content li { margin: 5px 0; }
.int-doc.entry-content li > p { margin: 4px 0; }

/* 순서 리스트 = 브라우저 기본 숫자 대신 파란 뱃지. "How it works"·"Install" 같은
   단계형 리스트가 문서보다 제품 UI에 가깝게 읽히도록. */
.int-doc.entry-content ol {
  list-style: none; padding-left: 0; counter-reset: int-step;
}
.int-doc.entry-content ol > li {
  position: relative; padding-left: 36px; counter-increment: int-step; margin: 14px 0;
}
.int-doc.entry-content ol > li::before {
  content: counter(int-step);
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #EAF2FF; color: var(--color-primary-hover, #1458D4);
  font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* 태그 그리드 = 목록 블록(core/list)에 "Tag grid" 블록 스타일(.is-style-int-tags).
   마케터는 일반 목록 블록 + 스타일 한 번 클릭. 프런트/에디터 모두 이 규칙으로 렌더. */
.is-style-int-tags {
  list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 8px;
}
.is-style-int-tags li {
  margin: 0; display: inline-flex; align-items: center;
  font-family: var(--font-mono, monospace); font-size: 12px;
  padding: 5px 11px; border-radius: 8px;
  background: var(--color-surface-subtle, #F7F8FB); border: 1px solid #E9EBF0;
  color: #2A3147; white-space: nowrap;
}

/* 유스케이스 카드 = 컬럼 블록(core/columns)에 "Card row" 블록 스타일(.is-style-int-cards).
   각 컬럼에 카드 배경만 입힘. 마케터는 일반 컬럼 블록 + 스타일 한 번 클릭. */
.is-style-int-cards { gap: 14px !important; margin-bottom: 14px !important; }
.is-style-int-cards > .wp-block-column {
  padding: 16px 18px; border-radius: 12px; background: var(--color-surface-subtle, #F7F8FB);
}
.is-style-int-cards > .wp-block-column p:first-child { margin-bottom: 4px; }
.is-style-int-cards > .wp-block-column p:first-child strong { font-size: 14.5px; color: var(--color-heading, #0F1130); }
.is-style-int-cards > .wp-block-column p:last-child { margin-bottom: 0; font-size: 13.5px; line-height: 1.55; color: var(--color-text-muted, #6B7280); }
.int-doc.entry-content code {
  font-family: var(--font-mono, monospace); font-size: 13px; padding: 2px 6px;
  border-radius: 5px; background: var(--color-surface-subtle, #F7F8FB); color: var(--color-heading, #0F1130);
}
.int-doc.entry-content blockquote {
  margin: 0 0 1.1em; padding: 14px 16px; border-left: 3px solid var(--color-primary, #1A6FFF);
  background: var(--color-surface-subtle, #F7F8FB); border-radius: 0 8px 8px 0;
  font-size: 14.5px; color: #3a3d5e;
}
.int-doc.entry-content blockquote p:last-child { margin-bottom: 0; }
.int-doc.entry-content .wp-block-table,
.int-doc.entry-content table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 1.1em; }
.int-doc.entry-content th, .int-doc.entry-content td {
  padding: 10px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid #EEF0F4;
}
.int-doc.entry-content th {
  background: var(--color-surface-subtle, #F7F8FB); color: var(--color-text-muted, #6B7280);
  font-weight: 650; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase;
}
.int-doc.entry-content .wp-block-table { overflow-x: auto; border: 1px solid #E5E7EB; border-radius: 10px; }
.int-doc.entry-content .wp-block-table table { margin: 0; }

.int-single__back {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 48px;
  font-size: 14px; font-weight: 600; color: var(--color-primary-hover, #1458D4); text-decoration: none;
}
.int-single__back:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .int-single__head { flex-direction: column; }
  .int-grid { grid-template-columns: 1fr; }
}