/* 재사용 조각 — 버튼 · 칩 · 점 · 타일 · 표 · 폼 · 접이식 «자세히» · 인용 · 진입 애니메이션.
 * ★전부 토큰만 본다. 그래서 같은 조각이 어두운 장에도 밝은 장(`theme-light`)에도 들어간다. */

/* ── 버튼 ──
 * ★애플식 알약. 큰 그림자·발광을 걷어 냈다 — 버튼이 빛나면 버튼만 보이고 문장이 안 읽힌다. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 86%, white); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { min-height: 32px; padding: 0 16px; font-size: 13px; }
.btn--full { width: 100%; }
.btn:active { transform: scale(0.985); }

/* ── 칩 · 점 ── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); color: var(--text-muted);
}
.chip--live { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.chip--ok { color: var(--state-stable); border-color: color-mix(in srgb, var(--state-stable) 40%, transparent); }
.chip--wait { color: var(--state-warn); border-color: color-mix(in srgb, var(--state-warn) 40%, transparent); }
.chip--no { color: var(--state-offline); border-color: color-mix(in srgb, var(--state-offline) 40%, transparent); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot--stable {
  background: var(--state-stable);
  box-shadow: 0 0 10px color-mix(in srgb, var(--state-stable) 70%, transparent);
}

/* ★상태는 색만으로 말하지 않는다 — 항상 텍스트가 함께 있다 (제품 규칙과 동일). */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.status--stable { color: var(--state-stable); }

/* ── 키워드 칩 ── ★문장 대신 명사를 쓴다. 스캔하는 눈은 문장을 읽지 않는다. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-4); }
.chips li {
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--text-muted);
  font-size: 13px; font-weight: 500;
}

/* ── 타일 ──
 * ★애플식 «둥근 네모 한 칸». 테두리 대신 바탕색 한 톤 차이로 서고, 마우스를 얹어도
 *   움직이지 않는다 — 카드가 들썩이면 내용보다 카드가 보인다. */
.cards { display: grid; gap: var(--s-4); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  padding: var(--s-6); border-radius: var(--r-xl);
  background: var(--bg-tile); border: 1px solid var(--line-soft);
}
.card h3 { font-size: 21px; margin-bottom: var(--s-2); letter-spacing: -0.025em; }
.card p { font-size: 15px; color: var(--text-muted); }
.card__tag { display: block; font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: var(--s-3); }
.card .ico { color: var(--accent); margin-bottom: var(--s-4); width: 28px; height: 28px; }

/* ── 비교표 ── */
.ctable { width: 100%; border-collapse: collapse; font-size: 15px; }
.ctable th, .ctable td {
  padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.ctable thead th { font-size: 12px; font-weight: 600; color: var(--text-faint); padding-top: 0; }
.ctable tbody th { color: var(--text); font-weight: 600; width: 22%; }
.ctable__old { color: var(--text-faint); }
.ctable__new { color: var(--text-strong); font-weight: 500; }
.ctable__new::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 10px; vertical-align: 2px;
}

/* 좁은 화면의 비교표 — ★카드로 흩지 않는다.
 * 이 표의 값은 «기존 ↔ 우리» 를 나란히 놓는 **대비**다. 행을 카드로 쪼개면
 * 카드 하나에 값이 하나만 남아 비교가 사라진다. 그래서 접되, 두 값은 여전히
 * 한 줄에 나란히 둔다: 항목은 위로 올리고 그 아래 «기존 | 우리» 두 칸. */
@media (max-width: 640px) {
  .ctable, .ctable thead, .ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; }
  .ctable thead tr, .ctable tbody tr {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: baseline;
  }
  .ctable thead th:first-child { display: none; }
  .ctable thead th { padding: 0 0 8px; border-bottom: none; }
  .ctable tbody tr { padding-block: 14px; border-bottom: 1px solid var(--line-soft); }
  .ctable tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 6px; border-bottom: none; }
  .ctable tbody td { padding: 0; border-bottom: none; font-size: 14px; }
}

/* ── 폼 ── */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.field b { color: var(--accent); }
.field input, .field select, .field textarea {
  padding: 13px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg-deep); color: var(--text);
  font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
.field textarea { resize: vertical; min-height: 110px; }
/* ★★`appearance: none` 만 걸면 **화살표가 통째로 사라진다.** 그러면 선택 상자가
   텍스트 입력칸과 똑같이 생겨서, 누를 수 있다는 단서가 첫 항목의 «선택하세요» 글자뿐이다.
   ★그래서 직접 그린다. 색은 기본 테마 배경과 문의 폼 배경(#2c2c2e) 양쪽에서 다 읽히는
   중간 회색이다 — 한쪽에 맞추면 다른 쪽에서 사라진다.
   ★`padding-right` 로 글자가 화살표 밑으로 들어가지 않게 자리를 비운다. */
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

/* 라디오 · 체크박스 묶음 */
.pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.pick > legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pick > legend small { margin-left: 6px; font-weight: 500; color: var(--text-faint); }
.pick__opts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pick__opt {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: transparent; font-size: 14px; color: var(--text);
}
.pick__opt:hover { border-color: var(--line-strong); }
.pick__opt input { margin: 0; accent-color: var(--accent); }
/* ★고른 것을 색만으로 말하지 않는다. 네모·동그라미가 그대로 보이고 테두리도 함께 바뀌므로,
   :has() 를 모르는 브라우저에서도 무엇을 골랐는지 알 수 있다. */
.pick__opt:has(:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.pick__opt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 접이식 «자세히» ──
 * ★애플 페이지의 «+» 버튼과 같은 자리다. 검색엔진에 보이려고 화면 밖으로 밀어내지 않는다 —
 *   그건 클로킹으로 취급된다. 접혀 있을 뿐 누르면 보이는 내용이므로 색인도 되고 사람도 읽는다. */
.more { margin-top: var(--s-5); }
.more summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  color: var(--accent); font-size: 15px; font-weight: 500;
}
.more summary::-webkit-details-marker { display: none; }
.more summary:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.more__mark {
  position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--accent); transition: transform 0.3s var(--ease);
}
.more__mark::before, .more__mark::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.6px;
  background: var(--on-accent); transform: translate(-50%, -50%);
}
.more__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.more[open] .more__mark { transform: rotate(45deg); }
.more__body { padding-top: var(--s-5); }
.more__summary { font-size: 17px; color: var(--text-muted); max-width: 42em; }
.more__title { font-size: 21px; margin: var(--s-7) 0 var(--s-4); }
.more--wide { display: block; margin-top: var(--s-8); }
.more--wide .more__body { padding-top: var(--s-6); }

/* ── 인용 ── */
.quote { margin: var(--s-9) auto 0; max-width: var(--wrap-narrow); text-align: center; }
.quote p {
  font-size: clamp(21px, 2.6vw, 30px); line-height: 1.4; letter-spacing: -0.025em;
  color: var(--text-strong); font-weight: 500; text-wrap: balance;
}
.quote strong { color: var(--accent); font-weight: 600; }
.quote footer { margin-top: var(--s-4); font-size: 14px; color: var(--text-faint); }

/* ── 움직임 ──
 * ★애플 페이지의 움직임은 세 가지뿐이다: (1) 화면에 들어올 때 살짝 떠오르기,
 *   (2) 격자의 이웃이 조금씩 늦게 따라오기, (3) 큰 그림이 스크롤에 맞춰 자리 잡기.
 *   그 이상은 넣지 않는다 — 움직이는 것이 많으면 무엇이 중요한지 사라진다.
 * ★모션을 줄이도록 설정한 사용자에게는 tokens.css 가 모든 애니메이션 시간을 0 으로 만든다. */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { opacity: .55; transform: translateY(24px) scale(.975); } to { opacity: 1; transform: none; } }

/* 스크롤 진입.
 * ★`data-reveal` 은 JS 가 붙인다. 스크립트가 아예 안 돌면 속성이 없으므로
 *   내용은 그냥 보인다. 인쇄할 때는 애니메이션 상태와 무관하게 전부 보여야 한다. */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
/* 이웃이 조금씩 늦게 — 격자 안에서 n번째 칸은 n×70ms 뒤에 따라온다. 여섯째부터는 같이. */
[data-reveal]:nth-child(2) { transition-delay: .07s; }
[data-reveal]:nth-child(3) { transition-delay: .14s; }
[data-reveal]:nth-child(4) { transition-delay: .21s; }
[data-reveal]:nth-child(5) { transition-delay: .28s; }
[data-reveal]:nth-child(n + 6) { transition-delay: .35s; }

/* 장 머리말은 흐릿하게 떠오른다 — 큰 글자에는 위치보다 «초점이 맞는 것» 이 등장으로 읽힌다. */
.shead[data-reveal] {
  filter: blur(12px); transform: translateY(14px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.shead[data-reveal].is-in { filter: none; }

/* 포인터 틸트 (motion.js) — 화면·폰·사진이 커서 쪽으로 살짝 기울고 반사광이 지나간다.
 * ★기울기는 개별 속성 `rotate` 로 온다. 스크롤 연동 애니메이션이 쥔 transform 과 겹치지 않는다. */
.tilt-scope { perspective: 1200px; }
.tilt { position: relative; transition: rotate .55s var(--ease); will-change: rotate; }
.tilt.is-tilting { transition: rotate .08s linear; }
/* 반사광은 스크립트가 넣는 진짜 자식(.tilt__glare)이다 — 액자들의 ::after 덮개와 자리를 다투지 않는다. */
.tilt__glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .4s;
  background: radial-gradient(55% 45% at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .11), transparent 70%);
}
.tilt.is-tilting .tilt__glare { opacity: 1; }

/* 사진 시차 — 창을 지나는 동안 사진이 액자보다 천천히 움직인다. 가로 레일이 되는 폭에서는 끈다
 * (레일이 가장 가까운 스크롤 컨테이너가 되어 세로 진행도가 0 에 멈춘다). */
@supports (animation-timeline: view()) {
  @media (min-width: 901px) {
    .case__media img, .field-photo img {
      scale: 1.12; animation: parallax linear both;
      animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
  }
  @keyframes parallax { from { translate: 0 -5%; } to { translate: 0 5%; } }
}

/* 접이식이 펼쳐질 때 내용이 떠오른다. `<details>` 는 높이를 전환할 수 없으므로 내용만 움직인다. */
details[open] > .more__body { animation: rise .45s var(--ease) both; }

/* 큰 그림이 스크롤에 맞춰 자리 잡는다 (스크롤 연동 애니메이션).
 * ★지원하는 브라우저에서만 켠다. 모르는 브라우저는 그냥 그림을 보인다.
 * ★가로 스크롤 레일 안의 그림에는 걸지 않는다 — 가장 가까운 스크롤 컨테이너가 레일이 되어
 *   세로 진행도가 0 에 멈추고, 그림이 흐릿한 채로 남는다. */
@supports (animation-timeline: view()) {
  .shot, .lpr-photo, .field-photo, .sysmap {
    animation: settle linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #111; }
}

@media (max-width: 1000px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .cards--4, .cards--3, .cards--2 { grid-template-columns: 1fr; }
  .card { padding: var(--s-5); }
}