/* 실제 화면 이미지 · 키워드 칩 · 접이식 «자세히».
 *
 * ★이 세 조각이 «이미지 중심, 글자 최소» 를 떠받친다.
 *   설명문은 `.more` 안으로 접히고, 접힌 내용도 DOM 에 그대로 있어 검색에 잡힌다.
 */

/* ── 실제 프로그램 화면 ── */
.shot {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-deep);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(34, 211, 238, 0.08);
}
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption {
  padding: 9px 14px;
  font-size: 11.5px;
  color: var(--text-faint);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-panel);
  letter-spacing: 0.04em;
}
.shot--hero { box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 120px rgba(34, 211, 238, 0.12); }

/* ★같은 제품의 두 번째 화면. 첫 화면과 같은 무게로 그리면 무엇이 주인공인지
   흐려진다 — 그림자를 한 단계 낮춰 «딸린 화면»으로 읽히게 한다. */
.shot--sub {
  margin-top: var(--s-4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* ★«예시 이미지» 표기. 작지만 지우지 않는다 — 무엇이 실제이고 무엇이 예시인지
   구분되지 않으면, 실제인 부분(화면·기능)의 신뢰까지 같이 잃는다. */
.shot__note {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--text-faint);
}

/* ── 화면 아래 세 줄 ──
 * 스크린샷에 보이는 것을 곧바로 «그래서 무엇인가» 로 옮긴다. */
.shotpoints {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.shotpoints li {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--bg-surface);
  text-align: left;
}
.shotpoints strong { display: block; font-size: 14px; color: var(--accent); margin-bottom: 4px; }
.shotpoints span { font-size: 13px; color: var(--text-muted); }

@media (max-width: 800px) {
  .shotpoints { grid-template-columns: 1fr; }
}

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

/* ── 접이식 «자세히» ──
 * ★검색엔진에 보이려고 화면 밖으로 밀어내지 않는다. 그건 클로킹으로 취급된다.
 *   접혀 있을 뿐 누르면 보이는 내용이므로 색인도 되고 사람도 읽을 수 있다. */
.more { margin-top: var(--s-5); }
.more summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.2s, color 0.2s;
}
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { border-color: var(--accent); color: var(--text); }

.more__mark { position: relative; width: 11px; height: 11px; flex: none; }
.more__mark::before, .more__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 1.5px;
  background: var(--accent);
  transition: transform 0.25s var(--ease);
}
.more__mark::after { transform: rotate(90deg); }
.more[open] .more__mark::after { transform: rotate(0); }

.more__body { padding-top: var(--s-5); }
.more__summary { font-size: 14.5px; color: var(--text-muted); max-width: 46em; }
.more__title { font-size: 17px; margin: var(--s-6) 0 var(--s-4); }
.more--wide { display: block; margin-top: var(--s-7); }
.more--wide .more__body { padding-top: var(--s-6); }

/* ── 산업별 설명 목록 (접이식 안) ── */
.whylist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-7); }
.whylist__item { padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.whylist dt { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.whylist dd { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.whylist__pain { display: block; margin-top: 4px; color: var(--text-faint); font-style: italic; }

@media (max-width: 900px) {
  .whylist { grid-template-columns: 1fr; }
}