/* 실무 가이드(/insights/) 전용.
 *
 * 이 페이지는 읽을거리 목록이 아니라 "내 물품이 이런 상황인데 어떻게 되나"를
 * 찾는 참고대(reference desk)다. 그래서 글 목록보다 품목 가이드가 위에 온다.
 *
 * 목록에는 사진과 이름, 그리고 사유 한 줄만 둔다. 사유 본문과 주의점은 품목 페이지
 * (/insights/items/<id>/)로 옮겼다 — 전에는 카드 한 장이 모바일에서 1,266px였고
 * 12개를 훑으려면 문서를 21,000px 내려야 했다. 찾으러 온 사람에게 정반대다.
 *
 * 사진은 조달된 것만 쓴다(Pexels, 상업적 사용 가능). 같은 사진을 두 곳에 쓰지 않고,
 * 브랜드 로고와 식별 가능한 얼굴이 찍힌 것은 배제했다. 출처 기록은
 * public/assets/images/insights/sources.json 에 있다.
 */

.insights_body {
  background: var(--ivory);
}

/* ── 히어로 ─────────────────────────────────────────────── */

.ig_hero {
  position: relative;
  overflow: hidden;
  background: var(--ivory);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.ig_hero_media {
  position: absolute;
  inset: 0;
}

.ig_hero_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig_hero_media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(250, 250, 247, 0.72) 0%, rgba(250, 250, 247, 0.9) 62%, rgba(250, 250, 247, 0.97) 100%);
}

.ig_hero_inner {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 36px 24px 30px;
  text-align: center;
}

.ig_eyebrow {
  display: inline-block;
  margin: 0 auto 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--steel);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ig_hero h1 {
  max-width: none;
  margin: 0 auto 12px;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.24;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ig_hero_lead {
  max-width: 64ch;
  margin: 0 auto 20px;
  color: var(--slate);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.72;
}

/* ── 검색 ───────────────────────────────────────────────── */

.ig_search {
  max-width: 720px;
  margin-inline: auto;
}

.ig_search_label {
  text-align: center;
  display: block;
  margin-bottom: 8px;
  color: #a9c0d2;
  font-size: 13px;
  font-weight: 700;
}

.ig_search_field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.ig_search_field svg {
  flex: none;
  color: var(--steel);
}

.ig_search_field input {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 15px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.ig_search_field input:focus {
  outline: none;
}

.ig_search_field:focus-within {
  box-shadow: 0 0 0 3px rgba(47, 156, 149, 0.5);
}

.ig_search_clear {
  flex: none;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--steel);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ig_search_clear:hover {
  background: var(--mist);
  color: var(--ink);
}

/* ── 눌러 보는 검색어 ────────────────────────────────────
   "이렇게 쳐도 됩니다"라고 문장으로만 알려 주던 자리다. 실제로 결과가
   나오는 말만 골라 누를 수 있게 했다 — 검색이 이 페이지의 주 CTA 라
   마찰을 줄이는 쪽이 맞다. */

.ig_seeds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.ig_seeds span {
  color: var(--steel);
  font-size: 13px;
  font-weight: 600;
}

.ig_seeds button {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ig_seeds button:hover {
  border-color: var(--green);
  color: var(--green);
}

.ig_seeds button[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

/* ── 본문 공통 ──────────────────────────────────────────── */

.ig_main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 88px;
}

.ig_section {
  padding-top: 56px;
}

.ig_section_head {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}

.ig_section_head h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 12px;
  font-size: clamp(21px, 2.4vw, 25px);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* 밑줄은 제목 폭만큼만 긋는다. 절 전체에 긋던 두꺼운 줄은 가운데 정렬에서
   제목과 따로 놀았다. */
.ig_section_head h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 2px;
  transform: translateX(-50%);
  background: var(--navy);
}

.ig_section_head p {
  margin: 14px 0 0;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.7;
}

/* 목록에는 h2 가 셋인데 전부 같은 크기라 무엇이 이 페이지의 본체인지
   드러나지 않았다. 품목이 본체고 글 목록은 보조다. */
.ig_section_head.is_sub h2 {
  font-size: 21px;
}

.ig_count {
  margin: 18px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.ig_count b {
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* 품목 바로가기 — 품목 카드는 한 장이 1,100px 가까이 된다. 12개를 다 훑으려면
   네 화면을 내려야 하는데, 이 페이지는 자기 물품을 빨리 찾으라고 만든 것이다.
   카드를 줄이는 대신(내용이 이 페이지의 값어치다) 바로가기 줄을 얹었다.
   칩은 검색창을 채우는 방식이라 필터 코드가 하나뿐이다. */

.ig_chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
}

.ig_chips button {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--slate);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ig_chips button:hover { border-color: var(--green); color: var(--green); }

.ig_chips button[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

/* ── 품목 타일 ──────────────────────────────────────────── */

.ig_tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr));
  gap: 18px;
  margin-top: 20px;
}

.ig_tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: inherit;
  transition: border-color 0.18s ease;
}

.ig_tile:hover {
  border-color: var(--green);
}

.ig_tile_media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e3e9ee;
}

.ig_tile_media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ig_tile:hover .ig_tile_media img {
  transform: scale(1.04);
}

.ig_tile_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px 16px;
}

.ig_tile_name {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

/* 사유 라벨을 이어 붙인 줄. 목록에서 "이 품목은 왜 폐기까지 가나"가
   한눈에 들어오는 유일한 단서라 잘라내지 않고 넘긴다. */
.ig_tile_tags {
  color: var(--slate);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.ig_tile_go {
  margin-top: auto;
  padding-top: 10px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}

.ig_tile:hover .ig_tile_go {
  color: var(--green);
}

.ig_tile_go::after {
  content: " \2192";
  color: var(--steel);
}

.ig_tiles_sm .ig_tile_media {
  aspect-ratio: 16 / 10;
}

/* ── 허브 품목 카드(ledger) ──────────────────────────────────
   허브의 본체는 품목이다. 카드마다 「폐기 사유 / 수입 전 확인」 두 줄을 장부처럼 바로 보여 주고,
   더 읽고 싶으면 카드를 누른다. 문구는 item-guide.js 의 기존 label 을 그대로 쓴다.
   .ig_tile 규칙을 재사용하고 이 블록은 그 위에 얹는 것만 둔다(허브에서만 쓰는 클래스). */

.ig_section_first {
  padding-top: 32px;
}

.ig_section_first .ig_section_head {
  max-width: 90ch;
}

.ig_section_first .ig_section_head p {
  margin-top: 10px;
}

.ig_hub_grid {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.ig_hub_card .ig_tile_media {
  aspect-ratio: 16 / 7;
}

.ig_hub_card:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.ig_hub_rows {
  display: grid;
  margin-top: 2px;
}

.ig_hub_row {
  display: grid;
  grid-template-columns: 5.6em minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.ig_hub_k {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--navy);
}

.ig_hub_row + .ig_hub_row .ig_hub_k {
  color: var(--green);
}

.ig_hub_v {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ig_hub_more {
  color: var(--steel);
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .ig_section_first {
    padding-top: 28px;
  }

  /* 좁은 화면에서는 사진을 옆으로 눕혀 카드 한 장을 낮춘다. 18장을 세로로 훑어야 한다. */
  .ig_hub_grid {
    gap: 12px;
  }

  .ig_hub_card {
    flex-direction: row;
  }

  .ig_hub_card .ig_tile_media {
    flex: 0 0 88px;
    aspect-ratio: auto;
  }

  .ig_hub_card .ig_tile_body {
    min-width: 0;
    padding: 12px 14px;
    gap: 4px;
  }

  .ig_hub_row {
    grid-template-columns: 4.9em minmax(0, 1fr);
    gap: 8px;
    padding: 7px 0;
  }

  .ig_hub_card .ig_tile_go {
    padding-top: 6px;
  }
}

/* ── 글 카드 ────────────────────────────────────────────── */

.ig_articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  margin-top: 22px;
}

.ig_article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color 0.18s ease;
}

.ig_article:hover {
  border-color: var(--green);
}

.ig_article_media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e3e9ee;
}

.ig_article_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig_article_text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 16px;
}

.ig_article h3 {
  margin: 0 0 9px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: -0.015em;
}

.ig_article h3 a {
  color: var(--ink);
}

.ig_article:hover h3 a {
  color: var(--green);
}

.ig_article p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.ig_article_foot {
  margin-top: auto;
  padding-top: 14px;
  color: var(--steel);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ── 결과 없음 ──────────────────────────────────────────── */

.ig_empty {
  margin-top: 24px;
  padding: 40px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}

.ig_empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--ink);
}

.ig_empty p {
  margin: 0 auto 18px;
  max-width: 46ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
}

/* ── 상담 유도 ──────────────────────────────────────────── */

.ig_cta {
  margin-top: 56px;
  padding: 34px 30px;
  background: var(--navy);
  border-radius: 8px;
  color: var(--white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.ig_cta h2 {
  margin: 0 0 6px;
  color: var(--white);
  font-size: 21px;
  letter-spacing: -0.015em;
}

.ig_cta p {
  margin: 0;
  max-width: 52ch;
  color: #cdd9e4;
  font-size: 14px;
  line-height: 1.7;
}

.ig_cta .button {
  flex: none;
}

/* ── 좁은 화면 ──────────────────────────────────────────── */

@media (max-width: 680px) {
  .ig_hero_inner {
    padding: 30px 18px 28px;
  }

  .ig_main {
    padding: 0 18px 64px;
  }

  .ig_section {
    padding-top: 40px;
  }

  .ig_tile_body {
    padding: 14px 16px;
  }

  .ig_cta {
    padding: 26px 20px;
  }
}

/* ── 다크 모드는 쓰지 않는다 ─────────────────────────────
   본 사이트 전체가 단일 테마다. 이 페이지만 두 테마를 갖게 하면
   헤더·푸터와 어긋난다. */

/* ── 본문 페이지: 목차·관련 글 ──────────────────────────
   긴 글을 위에서부터 읽게 두지 않는다. 소제목을 목차로 뽑아
   필요한 절만 골라 갈 수 있게 한다. 새 원고 없이 구조만으로 얻는 것이다. */

.ig_toc {
  margin: 22px 0 0;
  padding: 18px 20px;
  background: var(--mist);
  border-radius: 6px;
}

.ig_toc ol {
  margin: 0;
  padding: 0 0 0 20px;
  display: grid;
  gap: 7px;
}

.ig_toc li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.ig_toc a {
  color: var(--slate);
  font-weight: 600;
}

.ig_toc a,
.ig_related a,
.ig_backlink a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.ig_toc a:hover {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ig_related {
  margin-top: 40px;
  padding: 24px 24px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.ig_related ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ig_related li {
  position: relative;
  padding-left: 18px;
}

.ig_related li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--steel);
}

.ig_related a {
  color: var(--slate);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.ig_related a:hover {
  color: var(--green);
}

.ig_backlink {
  margin: 28px 0 0;
  font-size: 14px;
}

.ig_backlink a {
  color: var(--navy);
  font-weight: 700;
}

.ig_backlink a:hover {
  color: var(--green);
}

/* 본문 페이지의 상담 배너는 목록 페이지와 같은 컴포넌트를 쓰되 여백만 맞춘다. */
.case_detail_main .ig_cta {
  margin-top: 40px;
}

.ig_related_block + .ig_related_block {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--mist);
}

/* 품목 칩은 구분자 없이 이어붙여 만든다(join("")) — flex+gap이 없으면
   링크 여러 개가 붙어 하나의 텍스트처럼 보인다. 품목 2개 이상에 걸리는
   글에서 실제로 발생한다(예: 리콜 글이 품목 3개에 걸림). */
.ig_item_links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

/* ── 블록 라벨 ──────────────────────────────────────────────
   품목 카드가 타일로 바뀌면서 쓰임이 줄었지만, 글 페이지의 목차가 아직 쓴다. */

.ig_block_label {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mist);
  color: var(--steel);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ── 품목 페이지 ────────────────────────────────────────────
   /insights/items/<id>/. 목록 타일을 누르면 오는 곳이다.
   목록에서 걷어낸 사유 본문과 주의점이 여기에서 제 크기로 펼쳐진다. */

.ig_item_main {
  padding-bottom: 8px;
}

.ig_ihero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: 0;
  margin: 8px 0 0;
  overflow: hidden;
  background: var(--mist);
  border-radius: 8px;
}

.ig_ihero_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 38px;
}

.ig_ihero_eyebrow {
  margin: 0 0 12px;
  color: var(--steel);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.ig_ihero h1 {
  margin: 0;
  color: var(--ink);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ig_ihero_lead {
  margin: 16px 0 0;
  max-width: 46ch;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.78;
}

.ig_ihero_media {
  min-height: 240px;
  overflow: hidden;
  background: #e3e9ee;
}

.ig_ihero_media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 품목 페이지: 절 ────────────────────────────────────── */

.ig_isec {
  padding-top: 44px;
}

.ig_isec_head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ig_isec_head {
  max-width: 62ch;
}

.ig_isec_head p {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.7;
}

.ig_cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(288px, 100%), 1fr));
  gap: 16px;
  margin-top: 20px;
}

.ig_card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* 색이 뜻을 갖는 자리는 여기 하나다 — 수입 전에 확인할 것. */
.ig_card.is_caution {
  position: relative;
  padding-left: 34px;
}

.ig_card.is_caution::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 27px;
  width: 7px;
  height: 2px;
  background: var(--amber);
}

.ig_card_meta {
  margin: 0 0 8px;
  color: var(--steel);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ig_card h3 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.ig_card_body {
  margin: 9px 0 0;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.72;
}

/* 라벨 없이 본문만 있는 카드(예전 형식)는 본문이 첫 줄이라 여백을 없앤다. */
.ig_card h3 + .ig_card_body {
  margin-top: 9px;
}

.ig_card > .ig_card_body:first-child,
.ig_card_meta + .ig_card_body {
  margin-top: 0;
}

/* 서류 목록 — 카드가 아니라 나열이다. 항목이 짧아 카드로 만들면 빈 상자가 된다. */
.ig_doclist {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ig_doclist li {
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.5;
}

.ig_doclink {
  margin: 14px 0 0;
  max-width: 62ch;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.7;
}

.ig_doclink a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

/* 절과 절 사이의 사진 띠. 읽는 흐름을 한 번 끊어 주는 자리다. */
.ig_band {
  margin-top: 44px;
  aspect-ratio: 21 / 7;
  overflow: hidden;
  border-radius: 8px;
  background: #e3e9ee;
}

.ig_band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 스톡 사진 라벨 — "라벨이 있으면 스톡, 없으면 실제 현장 사진"이 이 사이트 전체의
   규칙이다(2026-09-04 대표 지시). /cases/의 실제 현장 사진에는 이 라벨을 붙이지
   않는다. 눈에 띄되 사진을 방해하지 않도록 작고 낮은 대비로 둔다.
   hero·band는 overflow:hidden + 꽉 채운 이미지 컨테이너라 흐름 안에 붙이면
   잘려서 안 보인다 — 사진 위 모서리에 배지로 올린다. */
.ig_ihero_media,
.ig_band {
  position: relative;
}

.ig_stock_badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 9px;
  background: rgba(20, 26, 33, 0.55);
  color: var(--white);
  font-size: 11px;
  border-radius: 4px;
  line-height: 1.4;
}

/* 본문 중간에 들어가는 예시 사진. ig_band와 톤은 맞추되 본문 흐름 안에 있어
   위아래 여백을 문단 리듬에 맞춘다. */
.ig_inline_photo {
  margin: 28px 0;
}

.ig_inline_photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  background: #e3e9ee;
}

.ig_inline_photo figcaption {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--steel);
  text-align: right;
}

/* 자체 제작 SVG 순서도. 스톡 사진이 아니라 "예시 이미지" 배지를 붙이지 않는다.
   viewBox 로 스케일되므로 좁은 화면에서도 글자가 깨지지 않는다. */
.ig_flowchart {
  margin: 28px 0;
  max-width: 480px;
}

.ig_flowchart svg {
  display: block;
  width: 100%;
  height: auto;
}

.ig_flowchart figcaption {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--steel);
  text-align: right;
}

/* 실제 발급 서류(폐기확인서 등)가 어떤 항목으로 구성되는지 보여주는 예시 카드.
   항목 이름·순서는 crm의 실제 생성 템플릿과 같게 유지하고, 값은 전부 가짜다
   (2026-09-04 대표 지시). .ig_stock_badge와 같은 원칙으로 "예시" 배지를 붙인다. */
.ig_doc_sample {
  position: relative;
  margin: 28px 0;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.ig_doc_sample_badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 9px;
  background: rgba(20, 26, 33, 0.55);
  color: var(--white);
  font-size: 11px;
  border-radius: 4px;
  line-height: 1.4;
}

.ig_doc_sample_title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.ig_doc_sample_meta {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--steel);
}

.ig_doc_sample table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ig_doc_sample th,
.ig_doc_sample td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.ig_doc_sample th {
  width: 30%;
  background: #f6f6f4;
  font-weight: 700;
  color: var(--ink);
}

.ig_doc_sample_foot {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--steel);
}

.ig_doc_sample_caption {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--steel);
}

/* ── 등장 효과 ──────────────────────────────────────────────
   사이트에는 이미 [data-reveal] 등장 효과가 있다(styles.css). 그런데 그것은
   .visible 을 붙이는 script.js 가 홈에서만 로드되고, 걷어내는 .no_js 장치도
   홈 index.html 에만 있다. 이 페이지들에 그대로 쓰면 영구히 안 보이는 상태가 된다.
   그래서 속성 이름을 data-rise 로 따로 두고, 감추는 규칙 자체를 .ig_anim 안에만
   넣는다 — 클래스는 <head> 인라인 스크립트가 붙이므로 JS가 없거나 동작 최소화
   설정이면 아예 감춰지지 않는다(열린 채로 실패한다).
   움직임 값은 사이트 토큰을 그대로 쓴다. */

.ig_anim [data-rise] {
  opacity: 0;
  transform: translate3d(0, 60px, 0);
  transition:
    opacity var(--rise-duration, 0.95s) var(--ease-rise, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--rise-duration, 0.95s) var(--ease-rise, cubic-bezier(0.22, 1, 0.36, 1));
}

.ig_anim [data-rise].visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .ig_anim [data-rise] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ig_tile_media img,
  .ig_tile:hover .ig_tile_media img {
    transition: none;
    transform: none;
  }
}

/* ── 누를 자리 넓히기 ────────────────────────────────────────
   재는 데서 20px 짜리 링크가 여럿 나왔다. WCAG 2.2 AA 는 24x24 CSS px 를
   요구한다. 글자 크기는 그대로 두고 누를 면적만 넓힌다. */

.ig_related a,
.ig_toc a,
.ig_backlink a {
  display: inline-block;
  padding-block: 3px;
}

.case_breadcrumb a,
.case_breadcrumb span[aria-current] {
  display: inline-block;
  padding: 3px 6px;
}

/* 한 줄짜리 제목 링크는 인라인 상자가 20px 밖에 안 된다. 글자 크기는 그대로 두고
   누를 면적만 넓힌다. */
.ig_article h3 a {
  display: inline-block;
  padding-block: 3px;
}

/* ── 품목 페이지: 좁은 화면 ─────────────────────────────── */

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

  .ig_ihero_media {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .ig_ihero_text {
    padding: 26px 20px 28px;
  }

  .ig_ihero h1 {
    font-size: 25px;
  }

  .ig_isec {
    padding-top: 34px;
  }

  .ig_band {
    aspect-ratio: 16 / 9;
    margin-top: 34px;
  }
}

/* ── 한글 줄바꿈 ────────────────────────────────────────────
   기본값은 아무 글자에서나 줄을 바꿔 '나옵니다'가 '나옵 / 니다'로 갈린다.
   keep-all 로 어절 단위로 끊고, 한 낱말이 칸보다 길 때만 overflow-wrap 이
   받아 준다. 둘을 같이 써야 넘치지 않는다. */

.insights_body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 상황별 묶음(목록 상단) ─────────────────────────────────
   묶음 하나가 카드 하나. 데스크톱 2×2, 좁은 화면 1열. 색·글자 규칙은 품목 타일·글 카드와 같다. */
.ig_sit_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.ig_sit_card {
  min-width: 0;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.ig_sit_card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.ig_sit_hint {
  margin: 4px 0 16px;
  color: var(--steel);
  font-size: 13px;
}

.ig_sit_card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ig_sit_card a {
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.ig_sit_card a::after {
  content: "\00a0\2192";
  color: var(--steel);
}

.ig_sit_card a:hover {
  color: var(--green);
}

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