/* 공유 키트(/kit) 전용 CSS — 휴대폰(767px 이하)은 한 열, 태블릿 768 이상은 읽기 폭 가운데, PC 1080 이상은 문구 카드 셋이 세 열.
   색·간격·글자 크기는 tokens.css 토큰만 쓴다. 복사 단추는 kit.js 가 켜기 전까지 hidden 이다. */
.kit-page { display: grid; gap: var(--sp-5); align-content: start; padding: var(--sp-4) var(--page-gutter) var(--sp-6); }
.kit-page > h1 { margin: 0; font-size: var(--fs-heading); max-width: none; }
.kit-lead { margin: 0; color: var(--muted); line-height: var(--lh-body); }
.kit-page > .kit-sec { border-top: 0; padding: 0; display: grid; gap: var(--sp-3); align-content: start; }
.kit-page .kit-sec > * { margin: 0; }
.kit-h { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.kit-label { font-size: var(--fs-small); font-weight: var(--fw-strong); color: var(--muted); }
.kit-linkrow { display: grid; gap: var(--sp-2); }
.kit-input { width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; font-size: var(--fs-body); text-overflow: ellipsis; }
.kit-input:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.kit-page [hidden] { display: none !important; }
.kit-page .btn { width: 100%; }
/* 복사 문구는 한 겹이다 — 상자 안의 상자(카드 + 안쪽 흰 상자)를 쓰지 않고, 라벨·인용 글(왼쪽 산호 줄)·[복사] 단추를 그대로 쌓는다. */
.kit-cards { display: grid; gap: var(--sp-4) var(--sp-5); }
.kit-card { display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--sp-2); }
.kit-card > * { margin: 0; }
.kit-card-h { font-size: var(--fs-small); font-weight: var(--fw-strong); color: var(--muted); line-height: var(--lh-ui); }
.kit-text { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); border-left: 3px solid var(--warm-coral); line-height: var(--lh-body); overflow-wrap: anywhere; }
.kit-text > p { margin: 0; }
.kit-url { font-size: var(--fs-small); color: var(--accent-ink); word-break: break-all; }
.kit-status { min-height: 1.45em; color: var(--accent-ink); }
.kit-image { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }

@media (min-width: 768px) {
  .kit-page { max-width: calc(var(--read-max) + 2 * var(--page-gutter)); padding-inline: var(--page-gutter); gap: var(--sp-6); }
  .kit-page .btn { width: auto; justify-self: start; }
  .kit-linkrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

@media (min-width: 1080px) {
  .kit-page { max-width: calc(var(--content-max) + 2 * var(--page-gutter)); }
  .kit-page > .kit-sec { max-width: var(--read-max); }
  .kit-page > .kit-sec-wide { max-width: none; }
  .kit-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}