/* ============================================================
   runin.kr  ·  페이지 2889 (/inside/)  —  인사이드 랜딩페이지 CSS
   모든 선택자는 html body.page-id-2889 로 시작한다.
   2026-09-07 개정 — 아이콘 42개 · 사진 2단 · 큰 숫자 · 색 띠를 얹은 판.
   ============================================================ */

/* ---------- 0. 테마 폭 풀기 · 중복 h1 감추기 ---------- */
html body.page-id-2889 article.ri-prose{ max-width:none !important; width:auto !important }
html body.page-id-2889 .ri-main .ri-wrap > h1{ display:none }

/* ---------- 1. 기본 리셋 (이 지면 안에서만) ---------- */
html body.page-id-2889 .in-sec,
html body.page-id-2889 .in-sec *,
html body.page-id-2889 .in-sec *::before,
html body.page-id-2889 .in-sec *::after,
html body.page-id-2889 .in-anchor,
html body.page-id-2889 .in-anchor *{ box-sizing:border-box }

html body.page-id-2889 .in-sec :where(h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,figcaption,blockquote,details,summary){ margin:0; padding:0 }
html body.page-id-2889 .in-sec :where(ul,ol){ list-style:none }

html body.page-id-2889 .in-sec,
html body.page-id-2889 .in-anchor{
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  color:#374151;
  font-size:16px;
  line-height:1.75;
  letter-spacing:-.01em;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

html body.page-id-2889 .in-sec p{ margin:0 0 12px }
html body.page-id-2889 .in-sec p:last-child{ margin-bottom:0 }
html body.page-id-2889 .in-sec img{ display:block; max-width:100%; height:auto }
html body.page-id-2889 .in-sec strong{ font-weight:700; color:#111827 }

/* ---------- 2. 폭과 배경 블록 ---------- */
html body.page-id-2889 .in-sec{
  position:relative;
  padding:80px 44px;
  margin:0 0 16px;
  border-radius:20px;
  scroll-margin-top:170px;   /* 머리글 최대 153px + 여유 (아래 미디어쿼리에서 조정) */
}
html body.page-id-2889 .in-wide{ max-width:none; width:100% }
html body.page-id-2889 .in-inner{ max-width:1200px; width:100%; margin:0 auto }
html body.page-id-2889 .in-read{ max-width:860px; width:100%; margin:0 auto }

html body.page-id-2889 .in-white{ background:#fff }
html body.page-id-2889 .in-tint{ background:#f3f3f3 }
html body.page-id-2889 .in-navy{ background:#141414; color:#fff }

/* ---------- 3. 제목·리드·각주 ---------- */
html body.page-id-2889 .in-sec .in-h1{
  font-size:clamp(30px,4.6vw,54px);
  line-height:1.24;
  font-weight:800;
  letter-spacing:-.03em;
  color:#111827;
  margin:0 0 22px;
}
html body.page-id-2889 .in-sec .in-h2{
  font-size:clamp(25px,3.2vw,40px);
  line-height:1.32;
  font-weight:800;
  letter-spacing:-.028em;
  color:#111827;
  margin:0 0 16px;
}
html body.page-id-2889 .in-sec .in-h2-one{
  font-size:clamp(23px,2.7vw,33px);
  line-height:1.4;
  font-weight:800;
  letter-spacing:-.025em;
  color:#111827;
  margin:0 0 16px;
}
html body.page-id-2889 .in-sec h3{
  font-size:17px;
  line-height:1.5;
  font-weight:700;
  letter-spacing:-.015em;
  color:#111827;
  margin:0 0 8px;
}
html body.page-id-2889 .in-sec h3.in-h3{
  font-size:17px;
  font-weight:800;
  color:#111827;
  margin:0 0 12px;
}
html body.page-id-2889 .in-sec p.in-eyebrow{
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  color:#111827;
  margin:0 0 18px;
}
html body.page-id-2889 .in-sec p.in-lead{
  font-size:17px;
  line-height:1.85;
  color:#374151;
  max-width:820px;
  margin:0 0 26px;
}
html body.page-id-2889 .in-sec p.in-note{
  font-size:14px;
  line-height:1.75;
  color:#5f5f5f;
  margin:18px 0 0;
}
html body.page-id-2889 .in-sec p.in-note strong{ color:#111827 }

/* 굵은 한 줄 — 눈이 쉬는 자리 */
html body.page-id-2889 .in-sec p.in-pull{
  margin:30px 0 26px;
  padding:2px 0 2px 18px;
  border-left:4px solid #c9c9c9;
  font-size:clamp(19px,2.2vw,26px);
  line-height:1.5;
  font-weight:800;
  letter-spacing:-.025em;
  color:#111827;
}

/* ---------- 4. 버튼 · 칩 · 배지 · 번호 ---------- */
html body.page-id-2889 .in-sec a.in-btn,
html body.page-id-2889 .in-sec a.in-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:12px 26px;
  font-size:15.5px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.015em;
  text-decoration:none;
  border:1px solid transparent;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
html body.page-id-2889 .in-sec a.in-btn{ background:#141414; color:#fff }
html body.page-id-2889 .in-sec a.in-btn:hover{ background:#2c2c2c; color:#fff; box-shadow:0 12px 26px rgba(55,55,55,.24) }
html body.page-id-2889 .in-sec a.in-btn-ghost{ background:transparent; color:#111827; border-color:#dedede }
html body.page-id-2889 .in-sec a.in-btn-ghost:hover{ background:#f3f3f3; border-color:#c9c9c9; color:#111827 }
html body.page-id-2889 .in-sec a.in-btn .in-ic,
html body.page-id-2889 .in-sec a.in-btn-ghost .in-ic{ width:18px; height:18px; flex:0 0 18px }

html body.page-id-2889 .in-sec .in-chip{
  display:inline-block;
  padding:4px 11px;
  border-radius:999px;
  background:#f3f3f3;
  color:#111827;
  font-size:12px;
  font-weight:700;
  line-height:1.55;
  letter-spacing:-.01em;
}
html body.page-id-2889 .in-sec p.in-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
}
html body.page-id-2889 .in-sec .in-badge{
  position:absolute;
  top:-14px;
  left:26px;
  padding:6px 15px;
  border-radius:999px;
  background:#141414;
  color:#fff;
  font-size:13.5px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.01em;
}
html body.page-id-2889 .in-sec .in-num{
  display:block;
  font-size:22px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:#111827;
  margin:0 0 12px;
}
html body.page-id-2889 .in-sec .in-num-corner{
  position:absolute;
  top:16px;
  right:18px;
  margin:0;
  padding:4px 12px;
  border-radius:999px;
  background:#f3f3f3;
  font-size:14px;
  font-weight:800;
  line-height:1.55;
  letter-spacing:.02em;
  color:#111827;
}

/* ---------- 5. 그리드 ---------- */
html body.page-id-2889 .in-sec .in-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:26px }
html body.page-id-2889 .in-sec .in-grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px }
html body.page-id-2889 .in-sec .in-grid4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:28px }
html body.page-id-2889 .in-sec .in-grid5{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:28px }
html body.page-id-2889 .in-sec .in-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; margin-top:26px }

/* 🔴 사진 2단 — 글 | 사진 (또는 사진 | 글). 폰에서는 사진이 «위» 로 온다. */
html body.page-id-2889 .in-sec .in-media{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px;
  align-items:center;
  margin:30px 0 0;
}
html body.page-id-2889 .in-sec .in-media + .in-media{ margin-top:26px }
html body.page-id-2889 .in-sec .in-stack{ display:flex; flex-direction:column; gap:14px; min-width:0 }

/* ---------- 6. 아이콘 (42종 · viewBox 0 0 24 24 · currentColor) ---------- */
html body.page-id-2889 .in-sec .in-ic{ width:22px; height:22px; flex:0 0 22px; display:block }
html body.page-id-2889 .in-anchor .in-ic{ width:22px; height:22px; flex:0 0 22px; display:block }

html body.page-id-2889 .in-sec .in-ic-s,
html body.page-id-2889 .in-anchor .in-ic-s{ width:17px; height:17px; flex:0 0 17px }
html body.page-id-2889 .in-sec .in-ic-s .in-ic{ width:17px; height:17px; flex:0 0 17px }
html body.page-id-2889 .in-sec i.in-ic-s{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  flex:0 0 auto;
  margin-right:8px;
  vertical-align:-4px;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-ic-b{ width:14px; height:14px; flex:0 0 14px }
html body.page-id-2889 .in-sec .in-ic-b .in-ic{ width:14px; height:14px; flex:0 0 14px }

/* 아이콘 배지 — 카드 제목 왼쪽 또는 카드 상단 */
html body.page-id-2889 .in-sec .in-icb{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:12px;
  background:#f3f3f3;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-icb-mute{ background:#f1f1f1; color:#6a6a6a }

/* 제목 + 아이콘 가로 나열 */
html body.page-id-2889 .in-sec h3.in-hd,
html body.page-id-2889 .in-sec div.in-hd{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
}
html body.page-id-2889 .in-sec .in-hd > h3{ margin:0; min-width:0 }
html body.page-id-2889 .in-sec .in-card .in-hd > h3,
html body.page-id-2889 .in-sec .in-tile .in-hd > h3,
html body.page-id-2889 .in-sec .in-step .in-hd > h3,
html body.page-id-2889 .in-sec .in-plan .in-hd > h3{ margin:0 }
html body.page-id-2889 .in-sec .in-hd .in-hd-count{ margin-left:auto; flex:0 0 auto }

/* 목록 앞 아이콘 · 각주 앞 아이콘 */
html body.page-id-2889 .in-sec .in-check-ic{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-check-ic .in-ic{ width:19px; height:19px; flex:0 0 19px }
html body.page-id-2889 .in-sec .in-note-ic{
  display:inline-flex;
  align-items:center;
  margin-right:8px;
  vertical-align:-5px;
  color:#111827;
}

/* ---------- 7. 카드 · 타일 ---------- */
html body.page-id-2889 .in-sec .in-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:14px;
  padding:24px 24px 26px;
  font-size:14.5px;
  line-height:1.72;
  color:#374151;
  box-shadow:0 12px 30px rgba(39,39,39,.08);
}
html body.page-id-2889 .in-sec .in-card h3{ font-size:17px; margin:0 0 10px }
html body.page-id-2889 .in-sec .in-card > p.in-note:not(:last-child){
  margin:16px 0 4px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.02em;
  color:#6a6a6a;
}
html body.page-id-2889 .in-sec .in-card a.in-btn-ghost{ margin-top:auto; align-self:flex-start; padding:9px 20px; font-size:14px }
html body.page-id-2889 .in-sec .in-card .in-check{ margin:4px 0 18px }
html body.page-id-2889 .in-sec .in-card .in-check li{ font-size:14px; margin-bottom:8px }
html body.page-id-2889 .in-sec .in-card .in-icb{ margin:0 }

html body.page-id-2889 .in-sec p.in-when{
  margin:0 0 4px;
  padding:12px 15px;
  background:#f7f9fc;
  border-left:3px solid #dedede;
  border-radius:0 10px 10px 0;
  font-size:14px;
  line-height:1.7;
  color:#5f5f5f;
}

html body.page-id-2889 .in-sec .in-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #f1f1f1;
  border-radius:12px;
  padding:16px 16px 18px;
  font-size:14px;
  line-height:1.65;
  color:#5f5f5f;
}
html body.page-id-2889 .in-sec .in-tile .in-chip{
  align-self:flex-end;
  margin:0 0 10px;
  background:#f6f6f6;
  color:#5f5f5f;
  border:1px solid #f1f1f1;
  font-size:11.5px;
  font-weight:700;
}
html body.page-id-2889 .in-sec .in-tile h3{ font-size:15px; margin:0 0 6px }
html body.page-id-2889 .in-sec .in-tile p{ margin:0 }
html body.page-id-2889 .in-sec .in-tile .in-icb{ margin:0 0 10px }

/* ---------- 8. 지표 ---------- */
html body.page-id-2889 .in-sec .in-stat{
  padding:22px 22px 24px;
  border-radius:14px;
  border:1px solid #e9e9e9;
  background:#fff;
  font-size:14.5px;
  line-height:1.65;
  color:#5f5f5f;
  box-shadow:0 12px 30px rgba(39,39,39,.08);
}
html body.page-id-2889 .in-sec .in-stat h3{ font-size:16px; margin:0 0 6px }
html body.page-id-2889 .in-sec .in-stat p{ margin:0 }
html body.page-id-2889 .in-sec .in-stat .in-icb{ margin:0 0 12px }
html body.page-id-2889 .in-sec .in-stat-num{
  display:block;
  font-size:32px;
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.03em;
  color:#111827;
  margin:0 0 8px;
}

/* 큰 숫자 띠 — 섹션 머리에 놓는 요약 */
html body.page-id-2889 .in-sec .in-kpi{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 30px;
  margin:22px 0 0;
  padding:18px 24px;
  border:1px solid #dedede;
  border-radius:16px;
  background:#fff;
  font-size:15px;
  color:#374151;
}
html body.page-id-2889 .in-white .in-kpi{ background:#f7f9fc; border-color:#e9e9e9 }
html body.page-id-2889 .in-sec p.in-kpi{ font-size:15.5px }
html body.page-id-2889 .in-sec p.in-kpi strong{
  font-size:28px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-kpi-item{ display:flex; align-items:center; gap:12px }
html body.page-id-2889 .in-sec .in-kpi-text{ display:flex; flex-direction:column; min-width:0 }
html body.page-id-2889 .in-sec .in-kpi-text .in-stat-num{ font-size:26px; margin:0; line-height:1.2 }
html body.page-id-2889 .in-sec .in-kpi-label{ font-size:14px; font-weight:600; color:#5f5f5f; line-height:1.5 }
html body.page-id-2889 .in-sec .in-kpi-cell{ display:flex; align-items:baseline; gap:10px }
html body.page-id-2889 .in-sec .in-kpi-num{
  margin:0;
  font-size:30px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-kpi-cap{ font-size:14.5px; font-weight:600; color:#5f5f5f }
html body.page-id-2889 .in-sec p.in-kpi-txt{ margin:0; flex:1 1 260px; font-size:14.5px; line-height:1.75; color:#374151 }

/* ---------- 9. 체크 목록 · 점검표 ---------- */
html body.page-id-2889 .in-sec .in-check{ margin:16px 0 0 }
html body.page-id-2889 .in-sec .in-check li{
  position:relative;
  padding-left:25px;
  margin:0 0 10px;
  font-size:14.5px;
  line-height:1.75;
  color:#374151;
}
html body.page-id-2889 .in-sec .in-check li:last-child{ margin-bottom:0 }
html body.page-id-2889 .in-sec .in-check li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.58em;
  width:11px;
  height:6px;
  border-left:2.4px solid #c9c9c9;
  border-bottom:2.4px solid #c9c9c9;
  transform:rotate(-45deg);
}
html body.page-id-2889 .in-sec .in-check li strong{ color:#111827; font-weight:700 }

/* 「하지 않는 것」 — 체크 대신 가로줄
   🚨 border:0 이 필요하다. 위쪽 리셋이 *::before 까지 box-sizing 을 잡아
   테두리를 지우지 않으면 회전 없는 네모가 남는다. */
html body.page-id-2889 .in-sec .in-check.in-check-no li::before{
  top:.78em;
  width:11px;
  height:2.4px;
  border:0;
  border-radius:2px;
  background:#8f8f8f;
  transform:none;
}

/* 아이콘이 붙는 목록 — 표시 대신 뜻 있는 아이콘을 쓴다 */
html body.page-id-2889 .in-sec .in-check.in-iclist li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding-left:0;
}
html body.page-id-2889 .in-sec .in-check.in-iclist li::before{ content:none }
html body.page-id-2889 .in-sec .in-check.in-check-no.in-iclist li::before{ content:none }
html body.page-id-2889 .in-sec .in-check.in-iclist li > i.in-ic-s{
  margin:.2em 0 0;
  vertical-align:baseline;
}
html body.page-id-2889 .in-sec .in-check.in-check-no.in-iclist li > i.in-ic-s{ color:#8f8f8f }
html body.page-id-2889 .in-sec .in-check.in-iclist li > span{ min-width:0 }

/* ---------- 10. 정의 리스트 ---------- */
html body.page-id-2889 .in-sec .in-dl{ margin:0 }
html body.page-id-2889 .in-sec .in-dl dt{
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.02em;
  color:#6a6a6a;
  padding:14px 0 0;
}
html body.page-id-2889 .in-sec .in-dl dd{
  margin:0;
  padding:2px 0 14px;
  border-bottom:1px solid #f1f1f1;
  font-size:15px;
  font-weight:600;
  line-height:1.7;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-dl dt:first-of-type{ padding-top:0 }
html body.page-id-2889 .in-sec .in-dl dd:last-of-type{ border-bottom:0; padding-bottom:0 }
html body.page-id-2889 .in-sec .in-dl dd a{ color:#111827; font-weight:700; text-decoration:none }
html body.page-id-2889 .in-sec .in-dl dd a:hover{ text-decoration:underline }

/* ---------- 11. CSS 화면 목업 (04 여덟 화면) ---------- */
html body.page-id-2889 .in-sec .in-mock{
  aspect-ratio:16/10;
  background:#f7f9fc;
  border:1px solid #e9e9e9;
  border-radius:10px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0 0 18px;
}
html body.page-id-2889 .in-sec .in-mock-bar{
  flex:0 0 24px;
  height:24px;
  border-radius:7px;
  background:#ebebeb;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 9px;
}
html body.page-id-2889 .in-sec .in-mock-dot{
  display:block;
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#c7c7c7;
}
html body.page-id-2889 .in-sec .in-mock-ic{
  display:inline-flex;
  align-items:center;
  margin-left:auto;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-mock-row{
  flex:1 1 0;
  min-height:7px;
  border-radius:6px;
  background:#ebebeb;
}
html body.page-id-2889 .in-sec .in-mock-row:nth-child(2){ flex:2.1 1 0; background:#dbdbdb }
html body.page-id-2889 .in-sec .in-mock-row:nth-child(3){ background:#e4e4e4 }
html body.page-id-2889 .in-sec .in-mock-row:last-child{ flex:.8 1 0 }

/* ---------- 12. 단계 카드 ---------- */
html body.page-id-2889 .in-sec .in-step{
  position:relative;
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:14px;
  padding:24px 26px 26px;
  margin:0 0 14px;
  font-size:14.5px;
  line-height:1.72;
  color:#374151;
  box-shadow:0 12px 30px rgba(39,39,39,.08);
}
html body.page-id-2889 .in-sec .in-grid3 .in-step,
html body.page-id-2889 .in-sec .in-grid2 .in-step,
html body.page-id-2889 .in-sec .in-media .in-step,
html body.page-id-2889 .in-sec .in-split .in-step,
html body.page-id-2889 .in-sec .in-stack .in-step{ margin-bottom:0 }
html body.page-id-2889 .in-sec .in-step h3{ font-size:17px; margin:0 0 8px }
html body.page-id-2889 .in-sec .in-step p{ margin:0 0 10px }
html body.page-id-2889 .in-sec .in-step-no{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:16px;
  font-weight:800;
  letter-spacing:.05em;
  color:#111827;
  margin:0 0 12px;
}
html body.page-id-2889 .in-sec .in-step p.in-step-no{ margin:0 0 12px }
html body.page-id-2889 .in-sec .in-step-who{
  display:inline-block;
  margin-left:auto;
  padding:3px 11px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0;
  line-height:1.55;
}
html body.page-id-2889 .in-sec .in-step-who[data-who="idc"]{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.45) }
html body.page-id-2889 .in-sec .in-step-who[data-who="customer"]{ background:#fff; color:#111827; border:1px solid #fff }

/* 타임라인 느낌의 띠 — 카드 위쪽 색 선 */
html body.page-id-2889 .in-sec .in-rail .in-step{ overflow:hidden }
html body.page-id-2889 .in-sec .in-rail .in-step::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:#141414;
}

/* ---------- 13. 말풍선 ---------- */
html body.page-id-2889 .in-sec .in-talk{ display:flex; flex-direction:column; gap:10px; margin:18px 0 0 }
html body.page-id-2889 .in-sec .in-talk .in-talk-c,
html body.page-id-2889 .in-sec .in-talk .in-talk-i{
  margin:0;
  padding:14px 16px;
  border-radius:14px;
  max-width:94%;
  font-size:14px;
  line-height:1.7;
}
html body.page-id-2889 .in-sec .in-talk .in-talk-c{
  align-self:flex-start;
  background:#f7f9fc;
  border:1px solid #e9e9e9;
  color:#374151;
  border-bottom-left-radius:4px;
}
html body.page-id-2889 .in-sec .in-talk .in-talk-i{
  align-self:flex-end;
  background:#fff;
  border:1px solid #c9c9c9;
  color:#111827;
  border-bottom-right-radius:4px;
}
html body.page-id-2889 .in-sec .in-talk .in-talk-c span,
html body.page-id-2889 .in-sec .in-talk .in-talk-i span,
html body.page-id-2889 .in-sec .in-talk .in-talk-i strong{
  display:block;
  margin:0 0 5px;
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
}
html body.page-id-2889 .in-sec .in-talk .in-talk-c span{ color:#6a6a6a }
html body.page-id-2889 .in-sec .in-talk .in-talk-i span,
html body.page-id-2889 .in-sec .in-talk .in-talk-i strong{ color:#111827 }
html body.page-id-2889 .in-sec .in-talk .in-talk-i p{ margin:0; color:#374151 }

/* ---------- 14. 사진 ---------- */
html body.page-id-2889 .in-sec img.in-img{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  height:auto;
  object-fit:cover;
  object-position:50% 50%;
  border-radius:16px;
  background:#f1f1f1;
  margin:24px 0;
}
html body.page-id-2889 .in-sec .in-fig{ margin:0; min-width:0 }
html body.page-id-2889 .in-sec .in-fig img.in-img{ margin:0 }
html body.page-id-2889 .in-sec .in-cap{
  margin:10px 2px 0;
  font-size:14px;
  line-height:1.7;
  color:#5f5f5f;
}

/* 실제 관리자 화면 캡처 — 사진이 아니라 «화면» 이므로 잘라내지 않고 통째로 보인다.
   🔴 img.in-img 가 aspect-ratio:3/2 + cover 라 그대로 두면 위아래가 잘린다.
   같은 특이도로는 못 이기므로 클래스를 하나 더 얹어 (0,4,3) 으로 이긴다. */
html body.page-id-2889 .in-sec img.in-img.in-shot{
  aspect-ratio:auto;
  object-fit:contain;
  object-position:50% 0;
  background:#f0f0f1;
  border:1px solid #dcdcdc;
  border-radius:12px;
  box-shadow:0 12px 34px rgba(55,55,55,.11);
}
html body.page-id-2889 .in-sec .in-fig.in-fig-wide{ margin:34px 0 4px }
html body.page-id-2889 .in-sec .in-fig.in-fig-wide .in-cap{ max-width:860px }

/* 히어로·CTA 배경 사진 */
html body.page-id-2889 .in-sec .in-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:20px;
  overflow:hidden;
}
html body.page-id-2889 .in-sec .in-hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
  border-radius:20px;
  opacity:.92;
}
html body.page-id-2889 .in-sec .in-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(27,27,27,.62) 0%, rgba(55,55,55,.78) 100%);
}

/* ---------- 15. 문의 줄 · 인용 · 강조 띠 ---------- */
html body.page-id-2889 .in-sec .in-cta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px 22px;
  margin:36px 0 0;
  padding:24px 28px;
  border-radius:16px;
  background:#f3f3f3;
  border:1px solid #dedede;
}
html body.page-id-2889 .in-tint .in-cta-row{ background:#fff }
html body.page-id-2889 .in-sec .in-cta-row p{ margin:0; font-size:15.5px; font-weight:600; color:#111827 }
html body.page-id-2889 .in-sec .in-cta-row a{ color:#111827; font-weight:700; text-decoration:none }
html body.page-id-2889 .in-sec .in-cta-row a:hover{ text-decoration:underline }
html body.page-id-2889 .in-sec .in-cta-row a.in-btn,
html body.page-id-2889 .in-sec .in-cta-row a.in-btn-ghost{ text-decoration:none }
/* 🔴 위의 «.in-cta-row a{color:#0B3AA0}» 과 «a.in-btn{color:#fff}» 은 특이도가 «동점» 이라
   나중에 선언된 남색이 이겨 «남색 바탕에 남색 글자» 가 된다.
   전역에 !important 를 거는 대신 한 단계 더 구체적으로 써서 되찾는다. */
html body.page-id-2889 .in-sec .in-cta-row a.in-btn{ color:#fff }
html body.page-id-2889 .in-sec .in-cta-row a.in-btn:hover{ color:#fff }
html body.page-id-2889 .in-sec .in-cta-row a.in-btn-ghost{ color:#111827 }

html body.page-id-2889 .in-sec .in-quote{
  position:relative;
  margin:34px 0 0;
  padding:24px 28px;
  background:#f7f9fc;
  border-left:4px solid #c9c9c9;
  border-radius:0 14px 14px 0;
}
html body.page-id-2889 .in-sec .in-quote .in-icb{ margin:0 0 12px }
html body.page-id-2889 .in-sec .in-quote p{ margin:0 0 10px; font-size:15px; line-height:1.8; color:#374151 }
html body.page-id-2889 .in-sec .in-quote p:last-child{ margin-bottom:0 }

html body.page-id-2889 .in-sec p.in-band{
  margin:24px 0 0;
  padding:18px 26px;
  border-radius:14px;
  background:#141414;
  color:#fff;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.6;
  text-align:center;
}
html body.page-id-2889 .in-sec p.in-band i.in-ic-s{ color:#fff; margin-right:10px }
html body.page-id-2889 .in-sec p.in-band .in-band-num{
  margin:0 3px;
  font-size:28px;
  font-weight:800;
  letter-spacing:-.03em;
  vertical-align:-2px;
}

/* ---------- 16. 앵커 바 ----------
   🔴 실측 (2026-09-07) — 테마 머리글 «.ri-header» 가 이미 position:sticky · top:0 · z-index:40 이다.
      우리가 top:0 · z-index:60 으로 두면 «사이트 메뉴를 덮어» 버린다.
      게다가 머리글 높이가 폭에 따라 튄다 : 1024↑ 105px · 900 153px · 820 97px · 768 138px · 700↓ 56px.
   ⇒ 머리글 높이가 «105px 로 일정한» 1024px 이상에서만 따라붙게 한다. */
html body.page-id-2889 .in-anchor{
  position:static;
  z-index:30;
  background:#fff;
  border-bottom:1px solid #e9e9e9;
  padding:0 44px;
  margin:0 0 18px;
}
@media (min-width:1024px){
  html body.page-id-2889 .in-anchor{ position:sticky; top:105px }
}
html body.page-id-2889 .in-anchor .in-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  height:64px;
}
html body.page-id-2889 .in-anchor-list{
  display:flex;
  align-items:center;
  gap:20px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html body.page-id-2889 .in-anchor-list::-webkit-scrollbar{ width:0; height:0 }
html body.page-id-2889 .in-anchor-list a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  padding:6px 0;
  font-size:14.5px;
  font-weight:600;
  color:#374151;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
html body.page-id-2889 .in-anchor-list a:hover{ color:#111827; border-bottom-color:#c9c9c9 }
html body.page-id-2889 .in-anchor-list a .in-ic{ color:#111827 }
html body.page-id-2889 .in-anchor-tel{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  white-space:nowrap;
  padding:8px 18px;
  border:1px solid #dedede;
  border-radius:999px;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
  color:#111827;
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease;
}
html body.page-id-2889 .in-anchor-tel:hover{ background:#f3f3f3; border-color:#c9c9c9 }
html body.page-id-2889 .in-anchor .in-ic-tel{ width:16px; height:16px; flex:0 0 16px }

/* ---------- 17. 히어로 (01) ---------- */
/* 🔴 옛 규칙은 «아이디 선택자» 라 (1,1,2) 로 새 클래스 규칙 (0,3,2) 를 이겼다.
      마크업이 통째로 바뀌었으므로 옛 규칙은 남기지 않는다.
      새 대문 규칙은 파일 맨 끝 «v1.7.0 · 첫 화면» 에 있다. */

/* ---------- 18. 제작 사례 (03) ---------- */
/* 🔴 사장님 지시(09-07) — 「한 줄에 4개씩 3줄」 · 「썸네일 사이 좌우 여백을 약간 더」 */
html body.page-id-2889 #in-folio .in-folio-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:34px 30px;
  margin-top:32px;
}
html body.page-id-2889 .in-sec a.in-folio-card{
  display:block;
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:14px;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(39,39,39,.08);
  transition:box-shadow .15s ease, border-color .15s ease;
}
html body.page-id-2889 .in-sec a.in-folio-card:hover{ box-shadow:0 18px 40px rgba(39,39,39,.14); border-color:#dedede }
html body.page-id-2889 .in-sec .in-folio-thumb{
  display:block;
  width:100%;
  aspect-ratio:6/5;
  height:auto;
  object-fit:cover;
  object-position:50% 0%;
  border-radius:13px 13px 0 0;
  background:#f1f1f1;
}
html body.page-id-2889 .in-sec .in-folio-card > div{ padding:16px 18px 20px }
html body.page-id-2889 .in-sec .in-folio-card strong{
  display:block;
  margin:9px 0 0;
  font-size:14.5px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.02em;
  color:#111827;
}
html body.page-id-2889 #in-folio .in-folio-card .in-chip{ font-size:11.5px; padding:3px 9px }

/* ---------- 19. 여덟 화면 (04) ---------- */
/* 🔴 09-07 사장님 지시 — 「저런 빈 이미지를 만들면 안 된다」.
   회색 줄 목업을 걷어내고 «실제로 돌아가는 화면» 사진을 넣었다.
   4열에서는 화면 글씨가 안 읽히므로 2열로 넓혀 읽히게 한다. */
html body.page-id-2889 .in-sec .in-grid2s{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:30px;
}
html body.page-id-2889 #in-screens .in-card{ padding:0 0 24px; overflow:hidden }
html body.page-id-2889 #in-screens .in-card h3{ font-size:19px; margin:0 }
html body.page-id-2889 #in-screens .in-card p{
  font-size:14.5px; line-height:1.78; color:#5f5f5f; margin:0; padding:0 24px;
}
html body.page-id-2889 #in-screens .in-card .in-hd{ margin:0 0 10px; padding:0 24px }
html body.page-id-2889 #in-screens .in-card img.in-cardshot{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  height:auto;
  object-fit:cover;
  object-position:50% 0;
  margin:0 0 18px;
  border-bottom:1px solid #e8e8e8;
  background:#f1f1f1;
}
/* ── 폰 화면 띠 (09-07) ───────────────────────────────────────────────
   「반응형입니다」 라고 «글로» 쓰는 대신 폰으로 찍은 화면을 놓는다.
   🔴 사진은 폰 폭 390px 로 찍었고 여기서도 «1:1 에 가깝게» 놓아야 글씨가 산다.
      .in-inner 가 1200px 이라 3칸이면 한 칸이 약 380px — 딱 맞는다. */
html body.page-id-2889 #in-screens h3.in-h3-band{
  margin:44px 0 18px;
  font-size:21px;
  line-height:1.5;
  font-weight:800;
  letter-spacing:-.01em;
}
html body.page-id-2889 #in-screens .in-phones{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  align-items:start;
}
html body.page-id-2889 #in-screens .in-phone{ margin:0; min-width:0 }
html body.page-id-2889 #in-screens .in-phone .in-phone-body{
  display:block;
  position:relative;
  padding:10px;
  border-radius:30px;
  background:#111827;
  box-shadow:0 14px 34px rgba(17,24,39,.22);
}
html body.page-id-2889 #in-screens .in-phone .in-phone-body::after{
  content:"";
  position:absolute;
  top:16px; left:50%;
  width:78px; height:6px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.28);
}
html body.page-id-2889 #in-screens .in-phone img.in-phone-shot{
  display:block;
  width:100%;
  aspect-ratio:390/844;
  height:auto;
  object-fit:cover;
  object-position:50% 0;
  border-radius:22px;
  background:#fff;
}
html body.page-id-2889 #in-screens .in-phone figcaption{
  margin:14px 2px 0;
  font-size:14px;
  line-height:1.7;
  color:#5f5f5f;
}
html body.page-id-2889 #in-screens .in-phone figcaption strong{
  display:block;
  margin-bottom:2px;
  font-size:16px;
  font-weight:700;
  color:#111827;
}
html body.page-id-2889 #in-screens p.in-cap-band{ margin:18px 2px 0; max-width:78ch }

html body.page-id-2889 #in-screens .in-card .in-shotchip{
  display:inline-block;
  margin:0 24px 10px;
  padding:3px 10px;
  border-radius:999px;
  background:#f0f0f0;
  color:#111827;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
}

/* ---------- 20. 회차 관리 (05) — 실제 관리자 화면을 «전폭» 으로 놓는다 ----------
   🔴 반쪽(539px)으로 놓으니 화면 글씨가 안 읽혔다. 설명은 위, 화면은 아래 전폭. */
html body.page-id-2889 #in-round .in-media .in-step{ padding:26px 28px 28px }
html body.page-id-2889 #in-round .in-split{ margin-top:30px }
html body.page-id-2889 #in-round .in-step-no{ font-size:22px; letter-spacing:.02em }
html body.page-id-2889 #in-round .in-step-wide{ padding:26px 30px 24px; margin-bottom:0 }
html body.page-id-2889 #in-round .in-step-wide p{ margin:0; max-width:78ch }
html body.page-id-2889 #in-round .in-step-wide + .in-fig-wide{ margin:16px 0 0 }
html body.page-id-2889 #in-round .in-fig-wide + .in-step-wide{ margin-top:40px }
html body.page-id-2889 #in-round .in-fig-wide + .in-split{ margin-top:40px }

/* ── 결재 서류 «견본» 두 장 (09-07) ───────────────────────────────────
   협회·체육회·지자체 담당자는 «결재에 붙일 종이» 가 있어야 움직인다.
   글로 「드립니다」 라고 쓰는 것보다 그 종이를 보여 주는 편이 빠르다.
   🔴 견본에는 실제 고객 이름을 쓰지 않는다. ○○ 로 두고 「견 본」 도장을 찍었다. */
html body.page-id-2889 #in-doc h3.in-h3-band{
  margin:44px 0 18px;
  font-size:21px;
  line-height:1.5;
  font-weight:800;
  letter-spacing:-.01em;
}
html body.page-id-2889 #in-doc .in-docs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:start;
}
html body.page-id-2889 #in-doc .in-doc-card{
  margin:0;
  min-width:0;
  background:#fff;
  border:1px solid #dedede;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(55,55,55,.08);
}
html body.page-id-2889 #in-doc img.in-doc-shot{
  display:block;
  width:100%;
  height:auto;
  border-bottom:1px solid #e8e8e8;
  background:#fff;
}
html body.page-id-2889 #in-doc .in-doc-card figcaption{
  padding:16px 20px 20px;
  font-size:14px;
  line-height:1.75;
  color:#5f5f5f;
}
html body.page-id-2889 #in-doc .in-doc-card figcaption strong:first-child{
  display:block;
  margin-bottom:4px;
  font-size:16.5px;
  font-weight:800;
  color:#111827;
}
html body.page-id-2889 #in-doc p.in-cap-band{ margin:16px 2px 0; max-width:80ch }

/* ── 「무엇을 사시는지 먼저 가르십시오」 (09-07) ──────────────────────
   경쟁사(행사 접수 시스템 전문 업체)의 공개 단가는 200만~500만원대다.
   값으로 다투면 「싼 게 비지떡」 으로 읽힌다. 그래서 «다른 물건» 이라는 것을 먼저 가른다.
   🔴 상대를 깎지 않는다. 「접수까지 필요하시면 그쪽이 맞습니다」 라고 먼저 말한다.
      그래야 남은 말이 믿긴다. */
html body.page-id-2889 #in-choose .in-two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:34px;
}
html body.page-id-2889 #in-choose .in-two-col{
  display:flex;
  flex-direction:column;
  padding:30px 30px 28px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
}
html body.page-id-2889 #in-choose .in-two-col--us{
  background:#fff;
  border-color:#fff;
  box-shadow:0 18px 44px rgba(21,21,21,.30);
}
html body.page-id-2889 #in-choose .in-two-head{ margin-bottom:18px }
html body.page-id-2889 #in-choose .in-two-head .in-icb{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  margin-bottom:12px;
  border-radius:13px;
  background:rgba(255,255,255,.16);
  color:#fff;
}
html body.page-id-2889 #in-choose .in-two-col--us .in-two-head .in-icb{
  background:#f0f0f0;
  color:#111827;
}
html body.page-id-2889 #in-choose .in-two-head .in-ic{ width:24px; height:24px; flex:0 0 24px }
html body.page-id-2889 #in-choose .in-two-head h3.in-h3{
  margin:0 0 4px;
  font-size:23px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:-.015em;
  color:#fff;
}
html body.page-id-2889 #in-choose .in-two-col--us .in-two-head h3.in-h3{ color:#111827 }

/* 🔴 아래 네 칸은 «흰 카드» 다. 남색 구역이라고 글자까지 흰색이 되면 안 보인다.
      앞 판이 정확히 그 사고였다(대비 1.00). 카드 안쪽 색을 못 박는다. */
html body.page-id-2889 #in-choose .in-tile{ background:#fff; border-color:#fff }
html body.page-id-2889 #in-choose .in-tile h3.in-h3{
  margin:0;
  font-size:16.5px;
  line-height:1.5;
  font-weight:700;
  color:#111827;
}
html body.page-id-2889 #in-choose .in-tile p{ color:#5f5f5f }
html body.page-id-2889 #in-choose .in-tile strong{ color:#111827 }
html body.page-id-2889 #in-choose .in-tile .in-icb{ background:#f3f3f3; color:#111827 }
html body.page-id-2889 #in-choose .in-tile .in-hd{ margin-bottom:8px }
html body.page-id-2889 #in-choose p.in-two-tag{
  margin:0;
  font-size:14px;
  color:rgba(255,255,255,.72);
}
html body.page-id-2889 #in-choose .in-two-col--us p.in-two-tag{ color:#5f5f5f }

html body.page-id-2889 #in-choose .in-two-col .in-check{ margin:0 0 20px }
html body.page-id-2889 #in-choose .in-two-col .in-check li{
  font-size:15px;
  line-height:1.78;
  color:rgba(255,255,255,.9);
}
html body.page-id-2889 #in-choose .in-two-col .in-check li strong{ color:#fff }
html body.page-id-2889 #in-choose .in-two-col--us .in-check li{ color:#374151 }
html body.page-id-2889 #in-choose .in-two-col--us .in-check li strong{ color:#111827 }
html body.page-id-2889 #in-choose .in-two-col .in-ic-s{ color:rgba(255,255,255,.66) }
html body.page-id-2889 #in-choose .in-two-col--us .in-ic-s{ color:#111827 }

html body.page-id-2889 #in-choose p.in-two-price{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin:auto 0 0;
  padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.22);
}
html body.page-id-2889 #in-choose .in-two-col--us p.in-two-price{ border-top-color:#e6e6e6 }
html body.page-id-2889 #in-choose p.in-two-price span{
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:rgba(255,255,255,.84);
}
html body.page-id-2889 #in-choose .in-two-col--us p.in-two-price span{ color:#6b7280 }
html body.page-id-2889 #in-choose p.in-two-price strong{
  font-size:30px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
html body.page-id-2889 #in-choose .in-two-col--us p.in-two-price strong{ color:#111827 }

html body.page-id-2889 #in-choose p.in-two-note{
  margin:10px 0 0;
  font-size:13.5px;
  line-height:1.75;
  color:rgba(255,255,255,.82);
}
html body.page-id-2889 #in-choose .in-two-col--us p.in-two-note{ color:#6b7280 }

/* 🔴 flex 로 두면 안 된다. flex 컨테이너 안에서는 «연속된 글 토막» 과 <strong> 이
      각각 별개 칸이 되어 «그 업체가 맞습니다.» 가 통째로 다른 열로 떨어진다.
      폰(375px)에서 문장이 세 도막으로 쪼개졌다. block 으로 두고 아이콘만 인라인으로 얹는다. */
html body.page-id-2889 #in-choose p.in-two-verdict{
  display:block;
  margin:16px 0 0;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.10);
  font-size:14.5px;
  line-height:1.72;
  color:rgba(255,255,255,.92);
}
html body.page-id-2889 #in-choose .in-two-col--us p.in-two-verdict{
  background:#f3f3f3;
  color:#111827;
}
html body.page-id-2889 #in-choose p.in-two-verdict .in-ic{
  width:19px; height:19px; flex:0 0 19px;
  display:inline-block;
  vertical-align:-3px;
  margin-right:9px;
}
html body.page-id-2889 #in-choose p.in-two-verdict strong{ color:inherit }

html body.page-id-2889 #in-choose h3.in-h3-band{
  margin:46px 0 18px;
  font-size:21px;
  line-height:1.5;
  font-weight:800;
  letter-spacing:-.01em;
}
html body.page-id-2889 #in-choose .in-grid4{ margin-top:0 }

/* ── 「대회 등록은 무료」 (09-07) ────────────────────────────────────────
   경쟁사(anysports.net)가 앞세우는 미끼가 «대회 등록 무료» 다.
   우리도 똑같이 하고 있으면서 이 지면에 «한 마디도» 없었다.
   🔴 문턱이 0 인 첫 접촉을 만든다 — 제작을 안 맡겨도 된다고 먼저 말한다.
      그 말이 없으면 「등록하면 영업 전화 오겠지」 하고 안 누른다. */
html body.page-id-2889 #in-path .in-free{
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
  margin:30px 0 26px;
  padding:26px 30px;
  border-radius:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
}
html body.page-id-2889 #in-path .in-free-txt{ flex:1 1 420px; min-width:0 }
html body.page-id-2889 #in-path p.in-free-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 10px;
  font-size:22px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:-.015em;
  color:#fff;
}
html body.page-id-2889 #in-path p.in-free-head .in-icb{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 40px;
  width:40px; height:40px;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  color:#fff;
}
html body.page-id-2889 #in-path p.in-free-head .in-ic{ width:21px; height:21px; flex:0 0 21px }
html body.page-id-2889 #in-path .in-free-txt p{
  margin:0 0 8px;
  font-size:15.5px;
  line-height:1.78;
  color:rgba(255,255,255,.92);
}
html body.page-id-2889 #in-path .in-free-txt p strong{ color:#fff }
html body.page-id-2889 #in-path p.in-free-sub{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:rgba(255,255,255,.80);
}
html body.page-id-2889 #in-path a.in-btn.in-free-btn{
  flex:0 0 auto;
  background:#fff;
  color:#111827;
  border-color:#fff;
}
html body.page-id-2889 #in-path a.in-btn.in-free-btn:hover{ background:#f0f0f0; color:#111827 }

/* ---------- 21. 길목 (06) ---------- */
html body.page-id-2889 #in-path .in-media{ margin-top:30px }
html body.page-id-2889 #in-path .in-grid4{ margin-top:34px }
html body.page-id-2889 #in-path .in-stat-num{ font-size:clamp(24px,3vw,36px) }
html body.page-id-2889 .in-sec .in-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:30px 0 26px;
}
html body.page-id-2889 .in-sec .in-flow-step{
  padding:22px 20px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
}
html body.page-id-2889 .in-sec .in-flow-step .in-icb{ margin:0 0 12px }
html body.page-id-2889 .in-sec .in-flow-step strong{ display:block; margin:0 0 8px; font-size:15px; font-weight:800; color:#fff }
html body.page-id-2889 .in-sec .in-flow-step p{ margin:0; font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.84) }
html body.page-id-2889 .in-sec .in-flow-empty{ background:transparent; border:1px dashed rgba(255,255,255,.66) }
html body.page-id-2889 #in-path .in-flow + p{ font-size:17px; line-height:1.85 }

/* ---------- 22. 점검표 (07) ---------- */
html body.page-id-2889 #in-selfcheck .in-check{
  margin:26px 0 0;
  padding:26px 30px;
  background:#fff;
  border:1px solid #dedede;
  border-radius:16px;
}
html body.page-id-2889 #in-selfcheck .in-check.in-check-2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px 30px;
}
html body.page-id-2889 #in-selfcheck .in-check li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding-left:0;
  margin:0;
  font-size:15px;
  line-height:1.8;
}
html body.page-id-2889 #in-selfcheck .in-check li::before{ content:none }
html body.page-id-2889 #in-selfcheck .in-check-box{
  position:static;
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin-top:.36em;
  border:2px solid #8f8f8f;
  border-radius:5px;
  background:#fff;
}
html body.page-id-2889 #in-selfcheck .in-check-ic{ margin-top:.12em }

/* ── 자가진단을 «누를 수 있게» 만든다 (09-07) ────────────────────────────
   앞 판은 네모가 그림이라 눌러도 아무 일이 없었다. 진짜 checkbox 를 쓰므로
   자바스크립트가 죽어도 표시는 되고 키보드로도 눌린다. */
html body.page-id-2889 #in-selfcheck .in-check.in-check-live li{ margin:0 }
html body.page-id-2889 #in-selfcheck .in-chk{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:-8px -12px;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:background .14s ease;
}
html body.page-id-2889 #in-selfcheck .in-chk:hover{ background:#f6f6f6 }
html body.page-id-2889 #in-selfcheck .in-chk-in{
  position:absolute;
  width:1px; height:1px;
  margin:0; padding:0; border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}
html body.page-id-2889 #in-selfcheck .in-chk-box{
  position:relative;
  flex:0 0 20px;
  width:20px;
  height:20px;
  margin-top:.28em;
  border:2px solid #8f8f8f;
  border-radius:6px;
  background:#fff;
  transition:background .14s ease, border-color .14s ease;
}
html body.page-id-2889 #in-selfcheck .in-chk-box::after{
  content:"";
  position:absolute;
  left:6px; top:2px;
  width:5px; height:10px;
  border:solid #fff;
  border-width:0 2.5px 2.5px 0;
  transform:rotate(42deg) scale(.4);
  opacity:0;
  transition:opacity .12s ease, transform .12s ease;
}
html body.page-id-2889 #in-selfcheck .in-chk-in:checked ~ .in-chk-box{
  background:#141414;
  border-color:#c9c9c9;
}
html body.page-id-2889 #in-selfcheck .in-chk-in:checked ~ .in-chk-box::after{
  opacity:1;
  transform:rotate(42deg) scale(1);
}
html body.page-id-2889 #in-selfcheck .in-chk-in:focus-visible ~ .in-chk-box{
  outline:3px solid #a0a0a0;
  outline-offset:2px;
}
html body.page-id-2889 #in-selfcheck .in-chk-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 26px;
  width:26px; height:26px;
  margin-top:.06em;
  border-radius:8px;
  background:#f3f3f3;
  color:#111827;
}
html body.page-id-2889 #in-selfcheck .in-chk-ic .in-ic{ width:16px; height:16px; flex:0 0 16px }
html body.page-id-2889 #in-selfcheck .in-chk-t{ flex:1 1 auto; color:#374151 }
html body.page-id-2889 #in-selfcheck .in-chk-in:checked ~ .in-chk-t{ color:#111827; font-weight:600 }

/* 진단 결과 상자 */
html body.page-id-2889 #in-selfcheck .in-sc-out{
  margin:20px 0 0;
  padding:26px 30px 28px;
  background:#141414;
  border-radius:16px;
  color:#fff;
}
html body.page-id-2889 #in-selfcheck .in-sc-meter{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  overflow:hidden;
}
html body.page-id-2889 #in-selfcheck .in-sc-bar{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:#fff;
  transition:width .28s ease;
}
html body.page-id-2889 #in-selfcheck p.in-sc-count{
  margin:14px 0 0;
  font-size:14.5px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.82);
}
html body.page-id-2889 #in-selfcheck p.in-sc-count strong{
  font-size:22px;
  font-weight:800;
  color:#fff;
  margin-right:2px;
}
html body.page-id-2889 #in-selfcheck h3.in-sc-title{
  margin:6px 0 8px;
  font-size:22px;
  line-height:1.45;
  font-weight:800;
  color:#fff;
  letter-spacing:-.01em;
}
html body.page-id-2889 #in-selfcheck p.in-sc-body{
  margin:0 0 20px;
  max-width:66ch;
  font-size:15px;
  line-height:1.82;
  color:rgba(255,255,255,.9);
}
html body.page-id-2889 #in-selfcheck .in-sc-out a.in-btn{
  background:#fff;
  color:#111827;
  border-color:#fff;
}
html body.page-id-2889 #in-selfcheck .in-sc-out a.in-btn:hover{ background:#f0f0f0; color:#111827 }

@media (prefers-reduced-motion:reduce){
  html body.page-id-2889 #in-selfcheck .in-chk,
  html body.page-id-2889 #in-selfcheck .in-chk-box,
  html body.page-id-2889 #in-selfcheck .in-chk-box::after,
  html body.page-id-2889 #in-selfcheck .in-sc-bar{ transition:none }
}

html body.page-id-2889 #in-selfcheck .in-sc + p.in-note,
html body.page-id-2889 #in-selfcheck .in-check + p.in-note{
  margin:22px 0 0;
  padding:18px 22px;
  background:#fff;
  border-left:4px solid #c9c9c9;
  border-radius:0 12px 12px 0;
  font-size:14.5px;
  line-height:1.8;
  color:#374151;
}

/* ---------- 23. 네 갈래 (08) ---------- */
html body.page-id-2889 #in-service .in-card{ padding:30px 24px 26px }
html body.page-id-2889 #in-service .in-card .in-hd{ padding-right:70px }

/* ---------- 24. 다국어 (09) ---------- */
html body.page-id-2889 #in-lang .in-fig{ margin:22px 0 28px }
html body.page-id-2889 #in-lang .in-fig img.in-img{ aspect-ratio:2/1 }
html body.page-id-2889 #in-lang .in-chip{ font-size:13.5px; padding:5px 14px }

/* ── 다국어 «증거» 띠 (09-07) ─────────────────────────────────────────
   이 지면이 파는 첫 문장이 다국어인데 증거가 사진 한 장뿐이었다.
   같은 지면을 영어·일본어·중국어로 실제로 찍어 나란히 놓는다.
   🔴 세 장은 «같은 지면» 이어야 한다. 다른 화면을 섞으면 증거가 아니다. */
html body.page-id-2889 #in-lang h3.in-h3-band{
  margin:30px 0 14px;
  font-size:19px;
  line-height:1.5;
  font-weight:800;
  letter-spacing:-.01em;
}
/* 🔴 .in-read 가 860px 다. 3열로 놓으면 한 장이 276px 이 되어 화면 글씨가 안 읽힌다.
   영어를 전폭으로 크게 놓고, 일본어·중국어를 아래 둘로 나눈다. */
html body.page-id-2889 #in-lang .in-langband{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
html body.page-id-2889 #in-lang .in-langband > .in-lang-card:first-child{ grid-column:1 / -1 }
html body.page-id-2889 #in-lang .in-langband > .in-lang-card:first-child img.in-lang-shot{
  aspect-ratio:1140/620;
}
html body.page-id-2889 #in-lang .in-lang-card{
  margin:0;
  background:#fff;
  border:1px solid #dedede;
  border-radius:14px;
  overflow:hidden;
}
html body.page-id-2889 #in-lang .in-lang-card img.in-lang-shot{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  object-fit:cover;
  object-position:50% 0;
  background:#f1f1f1;
  border-bottom:1px solid #e8e8e8;
}
html body.page-id-2889 #in-lang .in-lang-card figcaption{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px 14px;
  font-size:14px;
  line-height:1.5;
  color:#374151;
}
html body.page-id-2889 #in-lang .in-lang-card figcaption .in-chip{
  flex:0 0 auto;
  font-size:11px;
  padding:3px 9px;
  letter-spacing:.06em;
}
html body.page-id-2889 #in-lang p.in-cap-band{ margin:14px 2px 0 }

html body.page-id-2889 #in-lang .in-split{ gap:22px }
html body.page-id-2889 #in-lang .in-split > div{
  background:#fff;
  border:1px solid #dedede;
  border-radius:16px;
  padding:24px 26px;
}
html body.page-id-2889 #in-lang .in-split h3{ font-size:16px; color:#111827 }
html body.page-id-2889 #in-lang .in-split .in-check{ margin:0 }
html body.page-id-2889 #in-lang .in-split + p{ margin-top:22px; font-size:16.5px; font-weight:700; color:#111827 }

/* ---------- 25. 리뉴얼 이전 (10) ---------- */
html body.page-id-2889 .in-sec p.in-price-amt{
  font-size:clamp(30px,3.4vw,42px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.035em;
  color:#111827;
  margin:8px 0 4px;
}
html body.page-id-2889 .in-sec p.in-price-xl{ font-size:clamp(32px,3.9vw,46px); color:#111827 }
html body.page-id-2889 .in-sec p.in-price-vat{
  font-size:14.5px;
  font-weight:600;
  color:#5f5f5f;
  margin:0 0 14px;
}
html body.page-id-2889 .in-sec p.in-price-renew{
  margin:14px 0 0;
  padding:13px 0 0;
  border-top:1px dashed #dedede;
  font-size:14.5px;
  line-height:1.7;
  font-weight:600;
  color:#111827;
}
html body.page-id-2889 .in-sec p.in-price-renew + p.in-price-renew{
  margin-top:6px;
  padding-top:0;
  border-top:0;
  font-weight:500;
  color:#5f5f5f;
}
html body.page-id-2889 #in-renew .in-inner > .in-card{
  max-width:560px;
  margin:26px auto 0;
  align-items:center;
  text-align:center;
  background:#f3f3f3;
  border-color:#dedede;
  padding:30px 30px 32px;
}
html body.page-id-2889 #in-renew .in-inner > .in-card .in-hd{ justify-content:center }
html body.page-id-2889 #in-renew .in-inner > .in-card .in-price-renew{ width:100% }
html body.page-id-2889 #in-renew .in-inner > h3{ margin:38px 0 12px; font-size:20px }
html body.page-id-2889 .in-sec .in-ba{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  margin-top:26px;
}
html body.page-id-2889 .in-sec .in-ba + .in-ba{ margin-top:12px }
html body.page-id-2889 .in-sec .in-ba-old,
html body.page-id-2889 .in-sec .in-ba-new{ padding:18px 20px; border-radius:14px }
html body.page-id-2889 .in-sec .in-ba-old{ background:#f7f9fc; border:1px solid #f1f1f1 }
html body.page-id-2889 .in-sec .in-ba-new{ background:#f3f3f3; border:1px solid #dedede }
html body.page-id-2889 .in-sec .in-ba span{
  display:inline-block;
  margin:0 0 8px;
  padding:3px 11px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  line-height:1.55;
}
html body.page-id-2889 .in-sec .in-ba-old span{ background:#ededed; color:#5f5f5f }
html body.page-id-2889 .in-sec .in-ba-new span{ background:#141414; color:#fff }
html body.page-id-2889 .in-sec .in-ba p{ margin:0; font-size:14.5px; line-height:1.7 }
html body.page-id-2889 .in-sec .in-ba-old p{ color:#5f5f5f }
html body.page-id-2889 .in-sec .in-ba-old p i.in-ic-s{ color:#8f8f8f }
html body.page-id-2889 .in-sec .in-ba-new p{ color:#111827; font-weight:600 }

/* ---------- 26. 15가지 혜택 (11) ---------- */
html body.page-id-2889 #in-bonus .in-tile{ min-height:158px; padding:18px 16px 18px }
html body.page-id-2889 #in-bonus .in-tile .in-chip{
  position:absolute;
  top:24px;
  right:14px;
  align-self:auto;
  margin:0;
  max-width:calc(100% - 68px);
}
html body.page-id-2889 #in-bonus .in-tile h3{ letter-spacing:-.02em }

/* ---------- 27. 플랜 카드 (12·13) ---------- */
html body.page-id-2889 .in-sec .in-plan{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:18px;
  padding:32px 28px 30px;
  font-size:15px;
  line-height:1.72;
  color:#374151;
  box-shadow:0 12px 30px rgba(39,39,39,.08);
}
html body.page-id-2889 .in-sec .in-plan h3{ font-size:19px; font-weight:800; color:#111827; margin:0 0 10px }
/* 🔴 이 규칙은 p.in-price-amt · p.in-price-vat · p.in-price-renew 와 특이도가 «동점» 이라
   뒤에 있다는 이유만으로 이겨 «큰 금액» 을 작은 회색으로 만들었다. 클래스가 붙은 p 는 뺀다. */
html body.page-id-2889 .in-sec .in-plan > p:not([class]){ margin:0 0 6px; font-size:14.5px; color:#5f5f5f }
html body.page-id-2889 .in-sec .in-plan .in-check{
  margin:18px 0 0;
  padding:18px 0 0;
  border-top:1px solid #f1f1f1;
}
html body.page-id-2889 .in-sec .in-plan .in-check li{ font-size:14.5px; margin-bottom:9px }
html body.page-id-2889 .in-sec .in-plan a.in-btn{ margin-top:auto; width:100% }
/* 버튼 바로 앞 요소에 숨을 줘서 margin-top:auto 로도 간격이 사라지지 않게 한다 */
html body.page-id-2889 .in-sec .in-plan > *:nth-last-child(2){ margin-bottom:24px }
html body.page-id-2889 .in-sec .in-recommended{
  border:2px solid #c9c9c9;
  box-shadow:0 18px 42px rgba(55,55,55,.16);
}

/* 저작권 표시 · 호스팅형 → 구매형 대조 */
html body.page-id-2889 .in-sec p.in-own-flag{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0 0;
  padding:9px 14px;
  border-radius:10px;
  background:#f3f3f3;
  font-size:14px;
  font-weight:800;
  line-height:1.5;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-own-swap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:16px;
  margin:26px 0 0;
}
html body.page-id-2889 .in-sec .in-own-swap-cell{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:14px;
  row-gap:4px;
  align-items:center;
  padding:20px 22px;
  border-radius:16px;
}
html body.page-id-2889 .in-sec .in-own-swap-cell .in-icb{ grid-row:1 / span 2; align-self:center }
html body.page-id-2889 .in-sec .in-own-swap-locked{ background:#f7f9fc; border:1px solid #e9e9e9 }
html body.page-id-2889 .in-sec .in-own-swap-open{
  background:#fff;
  border:2px solid #c9c9c9;
  box-shadow:0 12px 30px rgba(39,39,39,.08);
}
html body.page-id-2889 .in-sec .in-own-swap-tag{
  grid-column:2;
  justify-self:start;
  padding:3px 11px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  line-height:1.55;
  letter-spacing:.01em;
}
html body.page-id-2889 .in-sec .in-own-swap-locked .in-own-swap-tag{ background:#ededed; color:#5f5f5f }
html body.page-id-2889 .in-sec .in-own-swap-open .in-own-swap-tag{ background:#141414; color:#fff }
html body.page-id-2889 .in-sec .in-own-swap-val{
  grid-column:2;
  font-size:16px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:-.02em;
}
html body.page-id-2889 .in-sec .in-own-swap-locked .in-own-swap-val{ color:#5f5f5f }
html body.page-id-2889 .in-sec .in-own-swap-open .in-own-swap-val{ color:#111827 }
html body.page-id-2889 .in-sec .in-own-swap-arrow{
  justify-self:center;
  font-size:24px;
  font-weight:700;
  line-height:1;
  color:#111827;
}
html body.page-id-2889 #in-own .in-own-why{ margin-top:30px }
html body.page-id-2889 #in-own .in-own-why .in-card p{ font-size:14px; line-height:1.72; color:#5f5f5f; margin:0 }

/* ---------- 28. 여섯 플랜 비교 grid (14) ---------- */
html body.page-id-2889 .in-sec .in-cmp{
  display:grid;
  grid-template-columns:150px repeat(6,minmax(0,1fr));
  margin-top:30px;
  border:1px solid #dedede;
  border-radius:16px;
  background:#fff;
}
html body.page-id-2889 .in-sec .in-cmp > div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:14px 12px;
  font-size:14px;
  line-height:1.55;
  font-weight:600;
  color:#111827;
  border-top:1px solid #f1f1f1;
  border-left:1px solid #f1f1f1;
}
html body.page-id-2889 .in-sec .in-cmp > div:nth-child(7n+1){ border-left:0 }
html body.page-id-2889 .in-sec .in-cmp > div span{
  display:block;
  margin-top:4px;
  font-size:11.5px;
  font-weight:500;
  color:#5f5f5f;
}
html body.page-id-2889 .in-sec .in-cmp > div:nth-child(n+8):nth-child(-n+14),
html body.page-id-2889 .in-sec .in-cmp > div:nth-child(n+22):nth-child(-n+28),
html body.page-id-2889 .in-sec .in-cmp > div:nth-child(n+36):nth-child(-n+42){ background:#f7f9fc }
html body.page-id-2889 .in-sec .in-cmp > div.in-cmp-hl:nth-child(n){ background:#f3f3f3 }
html body.page-id-2889 .in-sec .in-cmp .in-cmp-label{
  flex-direction:row;
  align-items:center;
  gap:7px;
  font-weight:800;
  font-size:14px;
  color:#111827;
  letter-spacing:-.01em;
}
html body.page-id-2889 .in-sec .in-cmp .in-cmp-label .in-ic{ color:#111827 }
html body.page-id-2889 .in-sec .in-cmp .in-cmp-head{
  background:#141414;
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.02em;
  text-align:center;
  align-items:center;
  border-top:0;
  border-left-color:rgba(255,255,255,.25);
}
html body.page-id-2889 .in-sec .in-cmp > div:first-child{ border-top-left-radius:15px }
html body.page-id-2889 .in-sec .in-cmp > div:nth-child(7){ border-top-right-radius:15px }
html body.page-id-2889 .in-sec .in-cmp > div:nth-child(43){ border-bottom-left-radius:15px }
html body.page-id-2889 .in-sec .in-cmp > div:last-child{ border-bottom-right-radius:15px }

/* ---------- 29. 세부 단가 (15) ---------- */
html body.page-id-2889 #in-rate .in-grid3{ align-items:start }
html body.page-id-2889 #in-rate .in-card{ padding:26px 26px 24px }
html body.page-id-2889 .in-sec .in-tbl{ display:block }
html body.page-id-2889 .in-sec .in-tbl-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  border-bottom:1px dashed #e9e9e9;
  font-size:14px;
  line-height:1.6;
}
html body.page-id-2889 .in-sec .in-tbl-row:last-child{ border-bottom:0; padding-bottom:0 }
html body.page-id-2889 .in-sec .in-tbl-row span:first-child{ flex:1 1 auto; min-width:0; color:#374151 }
html body.page-id-2889 .in-sec .in-tbl-row span:last-child{
  flex:0 0 auto;
  white-space:nowrap;
  text-align:right;
  font-weight:700;
  color:#111827;
}

/* ---------- 30. 견적 비교 서식 (15) — 좌우 대조표 ---------- */
html body.page-id-2889 .in-sec .in-vs2{
  margin:26px 0 0;
  border:1px solid #dedede;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
html body.page-id-2889 .in-sec .in-vs2-top,
html body.page-id-2889 .in-sec .in-vs2-row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);
}
html body.page-id-2889 .in-sec .in-vs2-row{ border-top:1px solid #f1f1f1 }
html body.page-id-2889 .in-sec .in-vs2-top > div{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 18px;
}
html body.page-id-2889 .in-sec .in-vs2-top-key{ background:#f7f9fc }
html body.page-id-2889 .in-sec .in-vs2-top-old{ background:#f7f9fc; border-left:1px solid #f1f1f1 }
html body.page-id-2889 .in-sec .in-vs2-top-new{ background:#f3f3f3; border-left:1px solid #dedede }
html body.page-id-2889 .in-sec .in-vs2-top h3{ margin:0; font-size:16px }
html body.page-id-2889 .in-sec .in-vs2-top-old h3{ color:#5f5f5f }
html body.page-id-2889 .in-sec .in-vs2-top-new h3{ color:#111827 }
html body.page-id-2889 .in-sec .in-vs2-top .in-icb{ width:34px; height:34px; flex:0 0 34px; border-radius:10px }
html body.page-id-2889 .in-sec .in-vs2-top .in-icb .in-ic{ width:19px; height:19px; flex:0 0 19px }
html body.page-id-2889 .in-sec .in-vs2-key{
  display:flex;
  align-items:center;
  gap:8px;
  padding:15px 18px;
  background:#f7f9fc;
  font-size:14.5px;
  font-weight:800;
  line-height:1.5;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-vs2-key .in-ic{ color:#111827 }
html body.page-id-2889 .in-sec .in-vs2-old,
html body.page-id-2889 .in-sec .in-vs2-new{
  display:flex;
  align-items:center;
  padding:15px 18px;
  border-left:1px solid #f1f1f1;
}
html body.page-id-2889 .in-sec .in-vs2-new{ background:#f8f8f8; border-left-color:#dedede }
html body.page-id-2889 .in-sec .in-vs2-side{ display:none }
html body.page-id-2889 .in-sec .in-vs2-val{ font-size:15px; line-height:1.6; letter-spacing:-.02em }
html body.page-id-2889 .in-sec .in-vs2-old .in-vs2-val{ font-weight:600; color:#5f5f5f }
html body.page-id-2889 .in-sec .in-vs2-new .in-vs2-val{ font-weight:800; color:#111827 }

/* ---------- 31. 제작과정 12단계 (17) ---------- */
html body.page-id-2889 #in-process .in-grid2{ margin-top:30px }
html body.page-id-2889 #in-process .in-grid2 .in-stat{ padding:24px 28px }
html body.page-id-2889 #in-process .in-grid2 .in-stat-num{ font-size:clamp(28px,3.2vw,40px) }
html body.page-id-2889 #in-process .in-split{ margin-top:32px; align-items:center }
html body.page-id-2889 #in-process .in-grid3{
  margin-top:26px;
  /* 말풍선이 든 카드에 맞춰 같은 줄이 전부 늘어나면 01·02 같은 카드가 빈 남색 덩이가 된다. */
  align-items:start;
}
html body.page-id-2889 #in-process .in-step h3{ font-size:16.5px }
html body.page-id-2889 #in-process .in-step p{ font-size:14px }
html body.page-id-2889 #in-process .in-step-no{ font-size:16px }
html body.page-id-2889 #in-process .in-step .in-icb{ width:34px; height:34px; flex:0 0 34px; border-radius:10px }
html body.page-id-2889 #in-process .in-step .in-icb .in-ic{ width:19px; height:19px; flex:0 0 19px }

/* ---------- 32. 일정 (18) ---------- */
html body.page-id-2889 #in-schedule .in-stat-num{ font-size:clamp(30px,3.6vw,46px) }
/* 🔴 본문이 <p class="in-stat-num"> 라서 이 규칙이 숫자까지 작게 만들지 않도록 클래스를 뺀다. */
html body.page-id-2889 #in-schedule .in-stat > p:not(.in-stat-num){ font-size:14.5px; color:#5f5f5f }
html body.page-id-2889 .in-sec .in-time{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:30px 0 0;
}
html body.page-id-2889 .in-sec .in-time-step{ padding:22px 22px 24px; border-radius:14px }
html body.page-id-2889 .in-sec .in-time-step h3{ margin:0 0 7px; font-size:16px; color:inherit }
html body.page-id-2889 .in-sec .in-time-step p{ margin:0; font-size:14.5px; line-height:1.7; color:inherit }
html body.page-id-2889 .in-sec .in-time-step .in-icb{ margin:0 0 12px }
/* 제작 일정 넉 단 : «옅은 회색 → 잉크 검정» 으로 갈수록 진해진다.
   🚨 #8a8a8a 위 흰 글자는 3.45 로 미달이다. 흰 글자를 4.5 로 받치는 한계가 #767676 이라
      한 단 더 내려 #6b6b6b 를 쓴다. 앞 두 단은 면끼리 1.20 이상 갈라야 해서 #ededed / #cfcfcf. */
/* 1단은 «흰 구역 바탕» 과도 1.20 을 넘겨야 한다 — #ededed 는 1.17 로 묻힌다 */
html body.page-id-2889 .in-sec .in-time-step:nth-child(1){ background:#e4e4e4; color:#111827 }
html body.page-id-2889 .in-sec .in-time-step:nth-child(2){ background:#cfcfcf; color:#111827 }
html body.page-id-2889 .in-sec .in-time-step:nth-child(3){ background:#6b6b6b; color:#fff }
html body.page-id-2889 .in-sec .in-time-step:nth-child(4){ background:#141414; color:#fff }
/* 아이콘 판은 없앤다 (사장님 지시 : 배경 없애고 그만큼 크게) — 글자색만 따라간다 */
html body.page-id-2889 .in-sec .in-time-step:nth-child(1) .in-icb,
html body.page-id-2889 .in-sec .in-time-step:nth-child(2) .in-icb{ background:none; border:0; color:#111827 }
html body.page-id-2889 .in-sec .in-time-step:nth-child(3) .in-icb,
html body.page-id-2889 .in-sec .in-time-step:nth-child(4) .in-icb{ background:none; border:0; color:#fff }
/* 번호를 붙여 «위에서 아래» 가 아니라 «순서» 로 읽히게 한다 */
html body.page-id-2889 .in-sec .in-time-rail{ counter-reset:in-time }
html body.page-id-2889 .in-sec .in-time-rail .in-time-step{ counter-increment:in-time }
html body.page-id-2889 .in-sec .in-time-rail .in-time-step h3::before{
  content:counter(in-time,decimal-leading-zero) " · ";
  font-weight:800;
  letter-spacing:.02em;
}

/* ---------- 33. 오픈 이후 2년 (19) ---------- */
html body.page-id-2889 #in-care .in-split{
  grid-template-columns:1.06fr .94fr;
  gap:32px;
  align-items:center;
  margin-top:30px;
}
html body.page-id-2889 #in-care .in-split .in-img{ margin:0 }
html body.page-id-2889 #in-care .in-split .in-h3{ font-size:18px }
html body.page-id-2889 #in-care .in-card .in-h3{ font-size:16px }
html body.page-id-2889 #in-care .in-card p{ font-size:14.5px; line-height:1.7; color:#5f5f5f; margin:0 }

/* ---------- 34. 서버 사양 (20) ---------- */
html body.page-id-2889 #in-spec .in-grid3{ margin-top:26px }
html body.page-id-2889 #in-spec .in-stat{ padding:20px 20px 22px }
html body.page-id-2889 #in-spec .in-stat-num{ font-size:19px; line-height:1.45; margin:0 0 2px }
html body.page-id-2889 #in-spec .in-stat h3{ font-size:14px; font-weight:600; color:#5f5f5f; margin:0 }
html body.page-id-2889 #in-spec .in-split > div{
  background:#f7f9fc;
  border:1px solid #e9e9e9;
  border-radius:16px;
  padding:24px 26px;
}
html body.page-id-2889 #in-spec .in-split .in-h3{ font-size:16px; color:#111827 }
html body.page-id-2889 #in-spec .in-split p{ font-size:14.5px; margin:0 }

/* ---------- 35. 결재 서류 (21) ---------- */
html body.page-id-2889 #in-doc .in-tile{ padding:22px 22px 24px; font-size:14.5px }
html body.page-id-2889 #in-doc .in-tile .in-h3{ font-size:16px }
html body.page-id-2889 #in-doc .in-tile p{ color:#5f5f5f; line-height:1.7 }
html body.page-id-2889 .in-sec p.in-bizband{
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  margin:24px 0 0;
  padding:16px 22px;
  background:#fff;
  border:1px solid #dedede;
  border-radius:14px;
  font-size:14.5px;
  color:#374151;
}
html body.page-id-2889 .in-sec p.in-bizband strong{ color:#111827 }

/* ---------- 36. 회사 (22) ---------- */
html body.page-id-2889 #in-company .in-split{
  grid-template-columns:.92fr 1.08fr;
  gap:34px;
  align-items:center;
  margin-top:30px;
}
html body.page-id-2889 #in-company .in-split .in-img{ margin:0 }
html body.page-id-2889 #in-company .in-dl{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  column-gap:20px;
  margin-top:0;
}
html body.page-id-2889 #in-company .in-dl dt{
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 0;
  border-top:1px solid #f1f1f1;
  font-size:14px;
}
html body.page-id-2889 #in-company .in-dl dt .in-ic{ width:17px; height:17px; flex:0 0 17px; color:#111827 }
html body.page-id-2889 #in-company .in-dl dd{
  padding:13px 0;
  border-top:1px solid #f1f1f1;
  border-bottom:0;
}
html body.page-id-2889 #in-company .in-dl dt:first-of-type,
html body.page-id-2889 #in-company .in-dl dd:first-of-type{ border-top:0 }

/* ---------- 37. FAQ (23) ---------- */
html body.page-id-2889 .in-sec .in-faq-list{
  margin-top:28px;
  padding:2px 26px;
  background:#fff;
  border:1px solid #dedede;
  border-radius:16px;
}
html body.page-id-2889 .in-sec .in-faq-list details{ border-bottom:1px solid #f1f1f1 }
html body.page-id-2889 .in-sec .in-faq-list details:last-child{ border-bottom:0 }
html body.page-id-2889 .in-sec .in-faq-q{
  display:flex;
  align-items:flex-start;
  gap:10px;
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:20px 42px 20px 0;
  font-size:16px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.02em;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-faq-q .in-ic{ margin-top:.22em; color:#111827 }
html body.page-id-2889 .in-sec .in-faq-q > span{ min-width:0 }
html body.page-id-2889 .in-sec .in-faq-q::-webkit-details-marker{ display:none }
html body.page-id-2889 .in-sec .in-faq-q::after{
  content:"+";
  position:absolute;
  right:2px;
  top:16px;
  font-size:22px;
  font-weight:600;
  line-height:1.2;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-faq-list details[open] > .in-faq-q::after{ content:"\2212" }
html body.page-id-2889 .in-sec .in-faq-list details[open] > .in-faq-q{ color:#111827 }
html body.page-id-2889 .in-sec .in-faq-a{ padding:0 0 24px 32px }
html body.page-id-2889 .in-sec .in-faq-a p{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.85;
  color:#374151;
}
html body.page-id-2889 .in-sec .in-faq-a p:last-child{ margin-bottom:0 }
html body.page-id-2889 .in-sec .in-faq-a a{ color:#111827; font-weight:700; text-decoration:underline }

/* ---------- 38. 마지막 CTA (24) ---------- */
html body.page-id-2889 #in-cta{ padding:96px 44px }
html body.page-id-2889 #in-cta .in-hero-bg img{ object-position:50% 46% }
/* 🔴 마침 구역만 «파란 장막» 이 남아 있었다 — 아이디 특이도(1,2,0)가
      뒤의 전역 검정 규칙(0,3,0)을 이겨 혼자 살아남았다(2026-09-07).
      사장님 지시대로 연한 검정으로. 가운데를 살짝 열어 사진을 보이게 하고 위아래만 눌러 글자를 받친다. */
html body.page-id-2889 #in-cta .in-hero-bg::after{
  background:
    linear-gradient(180deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.52) 45%, rgba(0,0,0,.72) 100%);
}
html body.page-id-2889 #in-cta .in-inner{ position:relative; z-index:1; text-align:center }
html body.page-id-2889 #in-cta .in-lead{ margin-left:auto; margin-right:auto }
html body.page-id-2889 #in-cta a.in-btn{ padding:15px 40px; font-size:16.5px }
html body.page-id-2889 #in-cta a.in-btn-ghost{ margin:0 5px 10px; padding:9px 22px; font-size:14.5px }
html body.page-id-2889 .in-sec .in-contact{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:34px 0 28px;
}
html body.page-id-2889 .in-sec .in-contact > div{
  padding:20px 18px 22px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
}
html body.page-id-2889 .in-sec .in-contact .in-icb{ margin:0 0 10px }
html body.page-id-2889 .in-sec .in-contact strong{
  display:block;
  margin:0 0 7px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.03em;
  color:rgba(255,255,255,.82);
}
html body.page-id-2889 .in-sec .in-contact a,
html body.page-id-2889 .in-sec .in-contact span{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
  text-decoration:none;
}
html body.page-id-2889 .in-sec .in-contact a:hover{ text-decoration:underline }

/* ============================================================
   39. 남색 블록 위 색 보정 (출력 순서로 이긴다)
   ============================================================ */
html body.page-id-2889 .in-navy .in-h1,
html body.page-id-2889 .in-navy .in-h2,
html body.page-id-2889 .in-navy .in-h2-one,
html body.page-id-2889 .in-navy h3,
html body.page-id-2889 .in-navy h3.in-h3,
html body.page-id-2889 .in-navy strong{ color:#fff }
html body.page-id-2889 .in-navy p.in-lead{ color:rgba(255,255,255,.90) }
html body.page-id-2889 .in-navy p.in-eyebrow{ color:rgba(255,255,255,.82) }
html body.page-id-2889 .in-navy p.in-note{ color:rgba(255,255,255,.76) }
html body.page-id-2889 .in-navy p.in-pull{ color:#fff; border-left-color:rgba(255,255,255,.72) }
html body.page-id-2889 .in-navy .in-cap{ color:rgba(255,255,255,.80) }
html body.page-id-2889 .in-navy img.in-img{ background:rgba(255,255,255,.14) }
html body.page-id-2889 .in-navy .in-icb{ background:rgba(255,255,255,.20); color:#fff }
html body.page-id-2889 .in-navy .in-icb-mute{ background:rgba(255,255,255,.12); color:rgba(255,255,255,.86) }
html body.page-id-2889 .in-navy .in-stat{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.28);
  color:rgba(255,255,255,.84);
  box-shadow:none;
}
html body.page-id-2889 .in-navy .in-stat-num{ color:#fff }
html body.page-id-2889 .in-navy .in-step{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.28);
  color:rgba(255,255,255,.88);
  box-shadow:none;
}
html body.page-id-2889 .in-navy .in-step-no{ color:#fff }
html body.page-id-2889 .in-navy .in-rail .in-step::before{ background:rgba(255,255,255,.55) }
html body.page-id-2889 .in-navy .in-split > div{ color:rgba(255,255,255,.88) }
html body.page-id-2889 .in-navy a.in-btn{ background:#fff; color:#111827 }
html body.page-id-2889 .in-navy a.in-btn:hover{ background:#f3f3f3; color:#2c2c2c; box-shadow:0 12px 26px rgba(0,0,0,.18) }
html body.page-id-2889 .in-navy a.in-btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); background:transparent }
html body.page-id-2889 .in-navy a.in-btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff }
html body.page-id-2889 .in-navy .in-talk .in-talk-c{ color:#374151 }
html body.page-id-2889 .in-navy .in-talk .in-talk-i{ color:#111827 }
html body.page-id-2889 .in-navy .in-talk .in-talk-c span{ color:#6a6a6a }
html body.page-id-2889 .in-navy .in-talk .in-talk-i span,
html body.page-id-2889 .in-navy .in-talk .in-talk-i strong{ color:#111827 }

/* ============================================================
   40. 반응형 — 1024 이하
   ============================================================ */
@media (max-width:1024px){
  html body.page-id-2889 .in-sec{ padding:64px 32px }
  html body.page-id-2889 #in-hero{ padding:92px 32px; min-height:720px }
  html body.page-id-2889 #in-cta{ padding:78px 32px }
  html body.page-id-2889 .in-anchor{ padding:0 32px }

  html body.page-id-2889 .in-sec .in-grid3,
  html body.page-id-2889 .in-sec .in-grid4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  html body.page-id-2889 .in-sec .in-grid5{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  html body.page-id-2889 #in-folio .in-folio-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px }
  html body.page-id-2889 .in-sec .in-cmp{ grid-template-columns:120px repeat(6,minmax(0,1fr)) }
  html body.page-id-2889 .in-sec .in-cmp > div{ font-size:13.5px; padding:12px 10px }
  html body.page-id-2889 .in-sec .in-cmp .in-cmp-head{ font-size:14px }
  html body.page-id-2889 .in-sec .in-vs2-top,
  html body.page-id-2889 .in-sec .in-vs2-row{ grid-template-columns:126px minmax(0,1fr) minmax(0,1fr) }
  html body.page-id-2889 #in-company .in-split,
  html body.page-id-2889 #in-care .in-split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  html body.page-id-2889 #in-company .in-dl{ grid-template-columns:140px minmax(0,1fr) }
  html body.page-id-2889 .in-sec .in-media{ gap:26px }
}

/* ============================================================
   41. 반응형 — 900 이하 (2단 → 1단 · 사진은 «위» · 비교표는 카드)
   ============================================================ */
@media (max-width:900px){
  html body.page-id-2889 .in-sec{ padding:56px 26px }
  /* 폰 화면 띠 — 좁아지면 한 칸이 손톱만 해진다 */
  html body.page-id-2889 #in-screens .in-phones{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px }

  /* 화면 사진은 좁아지면 글씨가 안 읽힌다 — 900 아래에서는 한 줄에 하나만 */
  html body.page-id-2889 .in-sec .in-grid2s{ grid-template-columns:minmax(0,1fr); gap:20px }
  html body.page-id-2889 #in-hero{ padding:76px 26px; min-height:640px }
  html body.page-id-2889 #in-cta{ padding:68px 26px }
  html body.page-id-2889 .in-anchor{ padding:0 26px }

  html body.page-id-2889 .in-sec .in-split,
  html body.page-id-2889 .in-sec .in-media,
  html body.page-id-2889 #in-company .in-split,
  html body.page-id-2889 #in-care .in-split,
  html body.page-id-2889 #in-spec .in-split,
  html body.page-id-2889 #in-lang .in-split{ grid-template-columns:minmax(0,1fr); gap:22px }

  /* 🔴 폰·태블릿에서는 사진이 «글 위» 로 온다 */
  html body.page-id-2889 .in-sec .in-media .in-fig{ order:-1 }
  html body.page-id-2889 #in-care .in-split > div:last-child{ order:-1 }
  html body.page-id-2889 #in-process .in-split > div:last-child{ order:-1 }
  html body.page-id-2889 #in-company .in-split > div:first-child{ margin-bottom:4px }

  html body.page-id-2889 .in-sec .in-flow{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  html body.page-id-2889 .in-sec .in-time{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  html body.page-id-2889 #in-selfcheck .in-check.in-check-2{ grid-template-columns:minmax(0,1fr); gap:14px }

  html body.page-id-2889 .in-sec .in-own-swap{ grid-template-columns:minmax(0,1fr); gap:12px }
  html body.page-id-2889 .in-sec .in-own-swap-arrow{ transform:rotate(90deg); font-size:20px }

  /* 여섯 플랜 비교 — 플랜별 카드로 접는다 */
  html body.page-id-2889 .in-sec .in-cmp{
    display:flex;
    flex-direction:column;
    border:0;
    border-radius:0;
    background:transparent;
    margin-top:24px;
  }
  html body.page-id-2889 .in-sec .in-cmp > div{
    display:flex;
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    text-align:right;
    padding:12px 16px;
    border:1px solid #f1f1f1;
    border-top:0;
    border-radius:0;
    background:#fff;
    font-size:14px;
  }
  html body.page-id-2889 .in-sec .in-cmp > div:nth-child(n+8):nth-child(-n+14),
  html body.page-id-2889 .in-sec .in-cmp > div:nth-child(n+22):nth-child(-n+28),
  html body.page-id-2889 .in-sec .in-cmp > div:nth-child(n+36):nth-child(-n+42){ background:#fff }
  html body.page-id-2889 .in-sec .in-cmp > div.in-cmp-hl:nth-child(n){ background:#fff }
  html body.page-id-2889 .in-sec .in-cmp > div::before{
    content:attr(data-label);
    flex:0 0 auto;
    text-align:left;
    font-size:13.5px;
    font-weight:700;
    color:#6a6a6a;
  }
  html body.page-id-2889 .in-sec .in-cmp > div span{ display:block; margin-top:3px }
  html body.page-id-2889 .in-sec .in-cmp > div:nth-child(n+44){ border-radius:0 0 12px 12px }
  html body.page-id-2889 .in-sec .in-cmp > div.in-cmp-head:nth-child(n){
    display:block;
    text-align:left;
    padding:14px 16px;
    margin-top:18px;
    border:0;
    border-radius:12px 12px 0 0;
    background:#141414;
    color:#fff;
    font-size:16px;
  }
  html body.page-id-2889 .in-sec .in-cmp > div.in-cmp-head:nth-child(n)::before{ content:none }
  html body.page-id-2889 .in-sec .in-cmp > div:nth-child(7n+2){ order:1 }
  html body.page-id-2889 .in-sec .in-cmp > div:nth-child(7n+3){ order:2 }
  html body.page-id-2889 .in-sec .in-cmp > div:nth-child(7n+4){ order:3 }
  html body.page-id-2889 .in-sec .in-cmp > div:nth-child(7n+5){ order:4 }
  html body.page-id-2889 .in-sec .in-cmp > div:nth-child(7n+6){ order:5 }
  html body.page-id-2889 .in-sec .in-cmp > div:nth-child(7n+7){ order:6 }
  html body.page-id-2889 .in-sec .in-cmp > div:nth-child(7n+1){ display:none }
  /* 🔴 첫 칸 「구분」 은 .in-cmp-head 규칙이 위의 display:none 을 이겨 혼자 남는다.
     폰에서는 라벨 열 자체가 없으므로 더 구체적인 선택자로 확실히 감춘다. */
  html body.page-id-2889 .in-sec .in-cmp > div.in-cmp-head.in-cmp-label:nth-child(n){ display:none }

  /* 좌우 대조표 — 항목별 카드로 접는다 */
  html body.page-id-2889 .in-sec .in-vs2{ border:0; border-radius:0; background:transparent; overflow:visible }
  html body.page-id-2889 .in-sec .in-vs2-top{ display:none }
  html body.page-id-2889 .in-sec .in-vs2-row{
    display:block;
    margin:0 0 12px;
    border:1px solid #dedede;
    border-top:1px solid #dedede;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
  }
  html body.page-id-2889 .in-sec .in-vs2-key{
    padding:12px 16px;
    background:#141414;
    color:#fff;
    font-size:14px;
  }
  html body.page-id-2889 .in-sec .in-vs2-key .in-ic{ color:#fff }
  html body.page-id-2889 .in-sec .in-vs2-old,
  html body.page-id-2889 .in-sec .in-vs2-new{
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    padding:12px 16px;
    border-left:0;
    border-top:1px solid #f1f1f1;
  }
  html body.page-id-2889 .in-sec .in-vs2-side{
    display:inline-block;
    flex:0 0 auto;
    font-size:13.5px;
    font-weight:700;
    color:#6a6a6a;
  }
  html body.page-id-2889 .in-sec .in-vs2-new .in-vs2-side{ color:#111827 }
  html body.page-id-2889 .in-sec .in-vs2-val{ text-align:right; font-size:14.5px }
}

/* ============================================================
   42. 반응형 — 620 이하 (폰 · 검증은 375px)
   ============================================================ */
@media (max-width:620px){
  html body.page-id-2889 .in-sec{
    padding:48px 16px;
    margin:0 0 12px;
    border-radius:16px;
  }
  html body.page-id-2889 #in-hero{
    display:block;
    min-height:0;
    padding:64px 16px 56px;
  }
  html body.page-id-2889 .in-sec .in-hero-bg,
  html body.page-id-2889 .in-sec .in-hero-bg img,
  html body.page-id-2889 .in-sec .in-hero-bg::after{ border-radius:16px }
  html body.page-id-2889 #in-cta{ padding:56px 16px }
  html body.page-id-2889 .in-anchor{ padding:0 16px; margin:0 0 12px }
  html body.page-id-2889 .in-anchor .in-inner{ height:56px; gap:12px }
  html body.page-id-2889 .in-anchor-list{ gap:16px }
  html body.page-id-2889 .in-anchor-list a{ font-size:14px; gap:6px }
  html body.page-id-2889 .in-anchor .in-ic-s{ width:15px; height:15px; flex:0 0 15px }
  html body.page-id-2889 .in-anchor-tel{ font-size:14.5px; padding:7px 13px }
  html body.page-id-2889 .in-sec{ scroll-margin-top:70px }

  /* 카드류는 1열 */
  html body.page-id-2889 .in-sec .in-grid2,
  html body.page-id-2889 .in-sec .in-grid3,
  html body.page-id-2889 .in-sec .in-grid4,
  html body.page-id-2889 .in-sec .in-grid5,
  html body.page-id-2889 .in-sec .in-flow,
  html body.page-id-2889 .in-sec .in-time,
  html body.page-id-2889 .in-sec .in-ba,
  html body.page-id-2889 .in-sec .in-contact,
  html body.page-id-2889 .in-sec .in-grid2s,
  html body.page-id-2889 #in-lang .in-langband,
  html body.page-id-2889 #in-doc .in-docs,
  html body.page-id-2889 #in-choose .in-two,
  html body.page-id-2889 #in-folio .in-folio-grid{ grid-template-columns:minmax(0,1fr) }
  html body.page-id-2889 #in-screens .in-phones{ grid-template-columns:minmax(0,1fr); gap:26px; max-width:390px; margin-left:auto; margin-right:auto }


  /* 지표·타일류만 2열 */
  html body.page-id-2889 #in-hero .in-grid4,
  html body.page-id-2889 #in-path .in-grid4,
  html body.page-id-2889 #in-schedule .in-grid4,
  html body.page-id-2889 #in-doc .in-grid4,
  html body.page-id-2889 #in-spec .in-grid3,
  html body.page-id-2889 #in-bonus .in-grid5{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }

  html body.page-id-2889 .in-sec p.in-lead{ font-size:15.5px; line-height:1.8; margin-bottom:20px }
  html body.page-id-2889 #in-hero .in-lead{ font-size:16px; line-height:1.85 }
  html body.page-id-2889 #in-hero .in-grid4{ margin-top:34px }
  html body.page-id-2889 #in-hero .in-stat-num{ font-size:19px }
  html body.page-id-2889 .in-sec .in-stat{ padding:16px 14px 18px; font-size:13.5px }
  html body.page-id-2889 .in-sec .in-stat-num{ font-size:25px; margin-bottom:6px }
  html body.page-id-2889 #in-schedule .in-stat-num{ font-size:32px }
  html body.page-id-2889 #in-process .in-grid2 .in-stat-num{ font-size:30px }
  html body.page-id-2889 #in-spec .in-stat-num{ font-size:17px }
  html body.page-id-2889 .in-sec .in-stat h3{ font-size:14.5px }
  html body.page-id-2889 .in-sec .in-stat .in-icb{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; margin-bottom:10px }
  html body.page-id-2889 .in-sec .in-stat .in-icb .in-ic{ width:19px; height:19px; flex:0 0 19px }

  html body.page-id-2889 .in-sec .in-card,
  html body.page-id-2889 .in-sec .in-step,
  html body.page-id-2889 .in-sec .in-plan{ padding:22px 18px 24px }
  html body.page-id-2889 #in-service .in-card{ padding:28px 18px 24px }
  html body.page-id-2889 #in-service .in-card .in-hd{ padding-right:64px }
  html body.page-id-2889 #in-round .in-media .in-step{ padding:22px 18px 24px }
  html body.page-id-2889 .in-sec .in-tile{ padding:14px 14px 16px }
  html body.page-id-2889 #in-doc .in-tile{ padding:18px 16px 20px }
  html body.page-id-2889 #in-bonus .in-tile{ min-height:0; padding:16px 14px 16px }
  html body.page-id-2889 #in-bonus .in-tile .in-chip{ position:static; align-self:flex-start; margin:10px 0 0; max-width:100% }
  html body.page-id-2889 #in-path .in-split > div,
  html body.page-id-2889 #in-lang .in-split > div,
  html body.page-id-2889 #in-spec .in-split > div{ padding:20px 18px }
  html body.page-id-2889 .in-sec .in-quote{ padding:20px 18px }
  html body.page-id-2889 .in-sec .in-cta-row{ padding:20px 18px; gap:14px }
  html body.page-id-2889 .in-sec .in-cta-row p{ font-size:14.5px }
  html body.page-id-2889 .in-sec .in-own-swap-cell{ padding:16px 18px }
  html body.page-id-2889 .in-sec .in-own-swap-val{ font-size:15px }
  html body.page-id-2889 .in-sec .in-kpi{ padding:16px 18px; gap:12px 20px }
  html body.page-id-2889 .in-sec p.in-kpi strong{ font-size:24px }
  html body.page-id-2889 .in-sec .in-kpi-num{ font-size:26px }
  html body.page-id-2889 .in-sec .in-kpi-text .in-stat-num{ font-size:22px }
  html body.page-id-2889 .in-sec .in-faq-list{ padding:2px 18px }
  html body.page-id-2889 .in-sec .in-faq-q{ font-size:15px; padding:18px 34px 18px 0; gap:8px }
  html body.page-id-2889 .in-sec .in-faq-a{ padding:0 0 24px 30px }
  html body.page-id-2889 .in-sec .in-faq-a p{ font-size:14.5px }
  html body.page-id-2889 #in-selfcheck .in-check{ padding:20px 18px }
  html body.page-id-2889 #in-selfcheck .in-check li{ font-size:14.5px; line-height:1.8; gap:10px }
  html body.page-id-2889 .in-sec p.in-band{ font-size:15px; padding:16px 18px }
  html body.page-id-2889 .in-sec p.in-band .in-band-num{ font-size:23px }
  html body.page-id-2889 .in-sec p.in-bizband{ padding:14px 16px; gap:6px 18px }
  html body.page-id-2889 .in-sec .in-tbl-row{ font-size:14.5px }
  html body.page-id-2889 .in-sec .in-cmp > div{ font-size:14.5px; padding:11px 14px }
  html body.page-id-2889 .in-sec .in-cmp > div::before{ font-size:12px }
  html body.page-id-2889 .in-sec .in-vs2-val{ font-size:14px }

  html body.page-id-2889 #in-company .in-dl{ grid-template-columns:minmax(0,1fr); column-gap:0 }
  html body.page-id-2889 #in-company .in-dl dt{ padding:14px 0 0; border-top:0 }
  html body.page-id-2889 #in-company .in-dl dd{ padding:2px 0 14px; border-top:0; border-bottom:1px solid #f1f1f1 }
  html body.page-id-2889 #in-company .in-dl dd:last-of-type{ border-bottom:0 }

  html body.page-id-2889 .in-sec .in-talk .in-talk-c,
  html body.page-id-2889 .in-sec .in-talk .in-talk-i{ max-width:100%; font-size:14.5px }
  html body.page-id-2889 .in-sec img.in-img{ border-radius:12px; margin:20px 0 }
  html body.page-id-2889 .in-sec .in-fig img.in-img{ margin:0 }
  html body.page-id-2889 #in-lang .in-fig{ margin:18px 0 24px }
  html body.page-id-2889 #in-lang .in-fig img.in-img{ aspect-ratio:3/2 }
  html body.page-id-2889 .in-sec a.in-btn,
  html body.page-id-2889 .in-sec a.in-btn-ghost{ padding:11px 22px; font-size:15px }
  html body.page-id-2889 #in-hero .in-hero-btns a.in-btn,
  html body.page-id-2889 #in-hero .in-hero-btns a.in-btn-ghost{ flex:1 1 auto; justify-content:center }
  html body.page-id-2889 #in-cta a.in-btn{ padding:14px 30px; font-size:16px }
}

/* ============================================================
   43. 반응형 — 480 이하 (375px 에서 가로 스크롤 0)
   ============================================================ */
@media (max-width:480px){
  html body.page-id-2889 #in-hero .in-grid4,
  html body.page-id-2889 #in-doc .in-grid4,
  html body.page-id-2889 #in-bonus .in-grid5,
  html body.page-id-2889 #in-spec .in-grid3{ grid-template-columns:minmax(0,1fr) }
  html body.page-id-2889 #in-hero .in-stat-num{ font-size:22px }
  html body.page-id-2889 #in-spec .in-stat-num{ font-size:19px }

  html body.page-id-2889 .in-sec .in-kpi{ flex-direction:column; align-items:flex-start; gap:12px }
  html body.page-id-2889 .in-sec .in-cta-row{ flex-direction:column; align-items:flex-start }
  html body.page-id-2889 .in-sec .in-cta-row a.in-btn,
  html body.page-id-2889 .in-sec .in-cta-row a.in-btn-ghost{ width:100%; justify-content:center }

  html body.page-id-2889 .in-sec .in-tbl-row{ flex-direction:column; align-items:flex-start; gap:2px }
  html body.page-id-2889 .in-sec .in-tbl-row span:last-child{ text-align:left }
  html body.page-id-2889 .in-sec .in-cmp > div{ flex-direction:column; align-items:flex-start; text-align:left; gap:2px }
  html body.page-id-2889 .in-sec .in-vs2-old,
  html body.page-id-2889 .in-sec .in-vs2-new{ flex-direction:column; align-items:flex-start; gap:2px }
  html body.page-id-2889 .in-sec .in-vs2-val{ text-align:left }

  html body.page-id-2889 .in-sec .in-step-no{ font-size:14.5px }
  html body.page-id-2889 #in-round .in-step-no{ font-size:19px }
  html body.page-id-2889 .in-sec .in-step-who{ margin-left:0 }
  html body.page-id-2889 .in-sec p.in-band{ font-size:14.5px }
  html body.page-id-2889 .in-sec p.in-band .in-band-num{ font-size:21px }
  html body.page-id-2889 #in-selfcheck .in-check-ic{ display:none }
}

/* ---------- 부록 · 최상위 껍데기 ---------- */
html body.page-id-2889 .in-page{ margin:0; padding:0 }
html body.page-id-2889 .in-page > .in-sec:first-child{ margin-top:0 }

/* ---------- 부록 · 앵커 착지 여유 (머리글 높이가 폭마다 달라서 구간별로 잡는다) ---------- */
@media (min-width:1024px){
  html body.page-id-2889 .in-sec,
  html body.page-id-2889 .in-anchor{ scroll-margin-top:186px }   /* 머리글 105 + 앵커바 65 + 16 */
}
@media (max-width:700px){
  html body.page-id-2889 .in-sec,
  html body.page-id-2889 .in-anchor{ scroll-margin-top:72px }    /* 머리글 56 + 16 */
}

/* ---------- 부록 · 제작 사례 그리드 접기 ---------- */
@media (max-width:820px){
  html body.page-id-2889 #in-folio .in-folio-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px }
}
@media (max-width:520px){
  html body.page-id-2889 #in-folio .in-folio-grid{ grid-template-columns:minmax(0,1fr); gap:20px }
}

/* ============================================================
   아이콘 — 본문의 <svg> 를 CSS 로 옮겼다.
   🔴 왜 : 방화벽이 SVG 가 잔뜩 든 큰 POST 를 막아 페이지 저장이 실패했다
        (「업데이트에 실패했습니다. 응답이 올바른 JSON 응답이 아닙니다.」).
        CSS 는 File Manager 로 직접 쓰므로 방화벽을 타지 않는다.
   🚨 data URI 안에서는 홑따옴표만 쓴다 — 겹따옴표를 쓰면 url("…") 이 그 자리에서 끊긴다.
   mask-image + background:currentColor 라 색은 글자색을 그대로 따라간다.
   ============================================================ */
html body.page-id-2889 .in-ic{
  display:inline-block; width:22px; height:22px; flex:0 0 22px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  vertical-align:middle;
}

html body.page-id-2889 .in-ic.i01{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M3.2 9h17.6 M3.2 15h17.6 M12 3c2.4 2.6 3.6 5.6 3.6 9s-1.2 6.4-3.6 9c-2.4-2.6-3.6-5.6-3.6-9S9.6 5.6 12 3z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M3.2 9h17.6 M3.2 15h17.6 M12 3c2.4 2.6 3.6 5.6 3.6 9s-1.2 6.4-3.6 9c-2.4-2.6-3.6-5.6-3.6-9S9.6 5.6 12 3z'/></svg>") }
html body.page-id-2889 .in-ic.i02{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 11h12v9H6z M8.5 11V8a3.5 3.5 0 1 1 7 0v3'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 11h12v9H6z M8.5 11V8a3.5 3.5 0 1 1 7 0v3'/></svg>") }
html body.page-id-2889 .in-ic.i03{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h18v14H3z M3 15l4.5-4.5 3 3L15 9l6 6 M8.5 9.2a1 1 0 1 1 0-.01'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h18v14H3z M3 15l4.5-4.5 3 3L15 9l6 6 M8.5 9.2a1 1 0 1 1 0-.01'/></svg>") }
html body.page-id-2889 .in-ic.i04{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18v12H3z M3 10h18'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18v12H3z M3 10h18'/></svg>") }
html body.page-id-2889 .in-ic.i05{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h18v11H3z M9 20h6 M12 16v4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h18v11H3z M9 20h6 M12 16v4'/></svg>") }
html body.page-id-2889 .in-ic.i06{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h6l2 2h10v10H3z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h6l2 2h10v10H3z'/></svg>") }
html body.page-id-2889 .in-ic.i07{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3z M4 7v10c0 1.7 3.6 3 8 3s8-1.3 8-3V7'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3z M4 7v10c0 1.7 3.6 3 8 3s8-1.3 8-3V7'/></svg>") }
html body.page-id-2889 .in-ic.i08{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7.5 3.2v5c0 4.6-3.1 8.4-7.5 9.6-4.4-1.2-7.5-5-7.5-9.6v-5z M9.3 12.2l1.9 1.9 3.6-4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7.5 3.2v5c0 4.6-3.1 8.4-7.5 9.6-4.4-1.2-7.5-5-7.5-9.6v-5z M9.3 12.2l1.9 1.9 3.6-4'/></svg>") }
html body.page-id-2889 .in-ic.i09{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z M18.5 15.5l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z M18.5 15.5l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z'/></svg>") }
html body.page-id-2889 .in-ic.i10{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4h6v2H9z M7 5H5v16h14V5h-2 M9 11h6 M9 15h4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4h6v2H9z M7 5H5v16h14V5h-2 M9 11h6 M9 15h4'/></svg>") }
html body.page-id-2889 .in-ic.i11{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M3.5 9h17 M3.5 15h17 M12 3c2.2 2.6 3.3 5.6 3.3 9s-1.1 6.4-3.3 9c-2.2-2.6-3.3-5.6-3.3-9S9.8 5.6 12 3z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M3.5 9h17 M3.5 15h17 M12 3c2.2 2.6 3.3 5.6 3.3 9s-1.1 6.4-3.3 9c-2.2-2.6-3.3-5.6-3.3-9S9.8 5.6 12 3z'/></svg>") }
html body.page-id-2889 .in-ic.i12{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4L19 9a2.1 2.1 0 0 0-3-3L5 17v3z M14.5 6.5l3 3'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4L19 9a2.1 2.1 0 0 0-3-3L5 17v3z M14.5 6.5l3 3'/></svg>") }
html body.page-id-2889 .in-ic.i13{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7.5 3.2v5c0 4.6-3.1 8.4-7.5 9.6-4.4-1.2-7.5-5-7.5-9.6v-5z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7.5 3.2v5c0 4.6-3.1 8.4-7.5 9.6-4.4-1.2-7.5-5-7.5-9.6v-5z'/></svg>") }
html body.page-id-2889 .in-ic.i14{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>") }
html body.page-id-2889 .in-ic.i15{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16v14H4z M4 10h16 M8 3v4 M16 3v4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16v14H4z M4 10h16 M8 3v4 M16 3v4'/></svg>") }
html body.page-id-2889 .in-ic.i16{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5h3l1.5 4-2 1.4a12 12 0 0 0 6.1 6.1l1.4-2 4 1.5v3a2 2 0 0 1-2.2 2A17.5 17.5 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5h3l1.5 4-2 1.4a12 12 0 0 0 6.1 6.1l1.4-2 4 1.5v3a2 2 0 0 1-2.2 2A17.5 17.5 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z'/></svg>") }
html body.page-id-2889 .in-ic.i17{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14z M16.2 16.2L21 21'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14z M16.2 16.2L21 21'/></svg>") }
html body.page-id-2889 .in-ic.i18{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.6-5.9 M20 3v4h-4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.6-5.9 M20 3v4h-4'/></svg>") }
html body.page-id-2889 .in-ic.i19{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3c3.6 2.1 5.6 5.5 5.6 9.4l-2.4 2.4H8.8l-2.4-2.4C6.4 8.5 8.4 5.1 12 3z M12 11.4a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2 M9 18l-2 3 M15 18l2 3'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3c3.6 2.1 5.6 5.5 5.6 9.4l-2.4 2.4H8.8l-2.4-2.4C6.4 8.5 8.4 5.1 12 3z M12 11.4a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2 M9 18l-2 3 M15 18l2 3'/></svg>") }
html body.page-id-2889 .in-ic.i20{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 21V4 M6 5h11l-2 3.5L17 12H6'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 21V4 M6 5h11l-2 3.5L17 12H6'/></svg>") }
html body.page-id-2889 .in-ic.i21{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v16 M4 12h16'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v16 M4 12h16'/></svg>") }
html body.page-id-2889 .in-ic.i22{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3h7l5 5v13H7z M14 3v5h5 M10 12h6 M10 16h4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3h7l5 5v13H7z M14 3v5h5 M10 12h6 M10 16h4'/></svg>") }
html body.page-id-2889 .in-ic.i23{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16v10H9l-5 4z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16v10H9l-5 4z'/></svg>") }
html body.page-id-2889 .in-ic.i24{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z M12 12a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z M12 12a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8z'/></svg>") }
html body.page-id-2889 .in-ic.i25{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11a3.4 3.4 0 1 0 0-6.8A3.4 3.4 0 0 0 9 11z M2.5 20c0-3.3 2.9-5.4 6.5-5.4s6.5 2.1 6.5 5.4 M17 5.2a3.2 3.2 0 0 1 0 6.2 M18.5 14.9c2 .7 3.3 2.3 3.3 4.4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11a3.4 3.4 0 1 0 0-6.8A3.4 3.4 0 0 0 9 11z M2.5 20c0-3.3 2.9-5.4 6.5-5.4s6.5 2.1 6.5 5.4 M17 5.2a3.2 3.2 0 0 1 0 6.2 M18.5 14.9c2 .7 3.3 2.3 3.3 4.4'/></svg>") }
html body.page-id-2889 .in-ic.i26{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3h8v18H8z M11 18h2'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3h8v18H8z M11 18h2'/></svg>") }
html body.page-id-2889 .in-ic.i27{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18v12H3z M3 7l9 6 9-6'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18v12H3z M3 7l9 6 9-6'/></svg>") }
html body.page-id-2889 .in-ic.i28{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M20 7a8 8 0 1 0 1 6 M20 3v4h-4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M20 7a8 8 0 1 0 1 6 M20 3v4h-4'/></svg>") }
html body.page-id-2889 .in-ic.i29{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-5 9 5 M5 9v9 M9.5 9v9 M14.5 9v9 M19 9v9 M3 20h18'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-5 9 5 M5 9v9 M9.5 9v9 M14.5 9v9 M19 9v9 M3 20h18'/></svg>") }
html body.page-id-2889 .in-ic.i30{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V8l8-4 8 4v12 M9 20v-5h6v5 M8 11h.01 M16 11h.01'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V8l8-4 8 4v12 M9 20v-5h6v5 M8 11h.01 M16 11h.01'/></svg>") }
html body.page-id-2889 .in-ic.i31{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M12 7v5.2l3.2 1.9'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z M12 7v5.2l3.2 1.9'/></svg>") }
html body.page-id-2889 .in-ic.i32{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z M14 3v5h5 M9 13h7 M9 17h5'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z M14 3v5h5 M9 13h7 M9 17h5'/></svg>") }
html body.page-id-2889 .in-ic.i33{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V9 M10 20V4 M16 20v-7 M22 20H2'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V9 M10 20V4 M16 20v-7 M22 20H2'/></svg>") }
html body.page-id-2889 .in-ic.i34{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h9 M4 12h6 M4 17h9 M15 9l4 3-4 3'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h9 M4 12h6 M4 17h9 M15 9l4 3-4 3'/></svg>") }
html body.page-id-2889 .in-ic.i35{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h6v14H4z M14 5h6v9h-6z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h6v14H4z M14 5h6v9h-6z'/></svg>") }
html body.page-id-2889 .in-ic.i36{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16 M4 12h10 M4 18h7 M17.5 15.5l2.2 2.2 3.3-3.9'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16 M4 12h10 M4 18h7 M17.5 15.5l2.2 2.2 3.3-3.9'/></svg>") }
html body.page-id-2889 .in-ic.i37{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19c3-8 6 4 9-3s4 1 7-2 M4 19h.01 M20 14h.01'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19c3-8 6 4 9-3s4 1 7-2 M4 19h.01 M20 14h.01'/></svg>") }
html body.page-id-2889 .in-ic.i38{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5l2.6 5.4 5.9.9-4.3 4.2 1 5.9-5.2-2.8-5.2 2.8 1-5.9L3.5 9.8l5.9-.9z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5l2.6 5.4 5.9.9-4.3 4.2 1 5.9-5.2-2.8-5.2 2.8 1-5.9L3.5 9.8l5.9-.9z'/></svg>") }
html body.page-id-2889 .in-ic.i39{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4h10v5a5 5 0 0 1-10 0z M7 6H4.5v1.5A3.5 3.5 0 0 0 7 10.8 M17 6h2.5v1.5A3.5 3.5 0 0 1 17 10.8 M12 14v3 M9 20h6 M10 17h4v3h-4z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4h10v5a5 5 0 0 1-10 0z M7 6H4.5v1.5A3.5 3.5 0 0 0 7 10.8 M17 6h2.5v1.5A3.5 3.5 0 0 1 17 10.8 M12 14v3 M9 20h6 M10 17h4v3h-4z'/></svg>") }
html body.page-id-2889 .in-ic.i40{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12v18l-3-2-3 2-3-2-3 2z M9.5 8.5l5 7 M9.5 9.2a.7.7 0 1 1 0-.01 M14.5 15.2a.7.7 0 1 1 0-.01'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12v18l-3-2-3 2-3-2-3 2z M9.5 8.5l5 7 M9.5 9.2a.7.7 0 1 1 0-.01 M14.5 15.2a.7.7 0 1 1 0-.01'/></svg>") }
html body.page-id-2889 .in-ic.i41{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.2l5.9-.9z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.2l5.9-.9z'/></svg>") }
html body.page-id-2889 .in-ic.i42{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z M12 2v2 M12 20v2 M4.2 4.2l1.4 1.4 M18.4 18.4l1.4 1.4 M2 12h2 M20 12h2 M4.2 19.8l1.4-1.4 M18.4 5.6l1.4-1.4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z M12 2v2 M12 20v2 M4.2 4.2l1.4 1.4 M18.4 18.4l1.4 1.4 M2 12h2 M20 12h2 M4.2 19.8l1.4-1.4 M18.4 5.6l1.4-1.4'/></svg>") }

/* ══ 연출 (09-07) ═══════════════════════════════════════════════════════
   경쟁사(anysports.net)의 CSS 를 뜯어보니 @keyframes 0 · animation 0 ·
   grid 0 · sticky 0 · object-fit 0 이다. flex 와 그림자뿐이고, 인상은
   «큰 타이포 + 검정 밴드» 에서 온다.
   ⇒ 우리는 그쪽이 안 쓰는 기법으로 확실히 위로 올린다.
      스크롤 리빌 · 숫자 세어 올리기 · 읽기 진행 막대 · 현재 위치 표시.
   🚨 무한 애니메이션은 하나도 쓰지 않는다(깜빡임 사고 전례).
   🚨 클래스는 자바스크립트가 붙인다. 스크립트가 죽어도 글은 그대로 보인다.
   🚨 prefers-reduced-motion 을 존중한다. */

html body.page-id-2889 .in-page .in-rv{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .58s cubic-bezier(.22,.61,.36,1),
             transform .58s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
html body.page-id-2889 .in-page .in-rv.in-rv-on{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* 읽은 만큼 차는 막대 — 목차 바 아래 모서리 */
html body.page-id-2889 .in-anchor{ position:relative }
html body.page-id-2889 .in-anchor .in-prog{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:3px;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,#141414,#717171);
  border-radius:0 3px 3px 0;
  pointer-events:none;
}

/* 지금 보고 있는 구역 */
html body.page-id-2889 .in-anchor .in-anchor-list a.is-here{
  color:#111827;
  background:#f3f3f3;
  font-weight:700;
}

/* 손을 얹으면 살짝 뜬다 — 누를 수 있는 것과 아닌 것을 손끝으로 알린다 */
/* 🔴 이 여섯 규칙에 hover 가드가 빠져 있었다. 폰에는 hover 가 없어서
      한 번 누른 카드가 «눌린 채로» 굳는다(실측 20장).
      🚨 뒤에 오는 prefers-reduced-motion 블록이 이 규칙들을 되돌리므로
         «뒤로 옮기지 말고 제자리에서» 감싼다. 옮기면 감소된 모션이 깨진다. */
@media (hover:hover) and (pointer:fine){
  html body.page-id-2889 #in-folio .in-folio-card{
    transition:transform .22s ease, box-shadow .22s ease;
  }
  html body.page-id-2889 #in-folio .in-folio-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(55,55,55,.16);
  }
  html body.page-id-2889 #in-folio .in-folio-card img.in-folio-thumb{
    transition:transform .4s cubic-bezier(.22,.61,.36,1);
  }
  html body.page-id-2889 #in-folio .in-folio-card:hover img.in-folio-thumb{
    transform:scale(1.045);
  }
  html body.page-id-2889 #in-screens .in-card.in-card-shot{
    transition:transform .22s ease, box-shadow .22s ease;
  }
  html body.page-id-2889 #in-screens .in-card.in-card-shot:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(55,55,55,.14);
  }
}

@media (prefers-reduced-motion:reduce){
  html body.page-id-2889 .in-page .in-rv{ opacity:1; transform:none; transition:none }
  html body.page-id-2889 #in-folio .in-folio-card,
  html body.page-id-2889 #in-folio .in-folio-card img.in-folio-thumb,
  html body.page-id-2889 #in-screens .in-card.in-card-shot{ transition:none }
  html body.page-id-2889 #in-folio .in-folio-card:hover{ transform:none }
  html body.page-id-2889 #in-folio .in-folio-card:hover img.in-folio-thumb{ transform:none }
  html body.page-id-2889 #in-screens .in-card.in-card-shot:hover{ transform:none }
}

/* ══ 인쇄 (09-07) ═══════════════════════════════════════════════════════
   이 지면은 «인쇄해서 결재 서류에 붙이는» 용도로 쓰인다고 본문에 적어 두었다.
   그러면 인쇄가 실제로 되어야 한다.
   🔴 스크롤 리빌은 opacity:0 으로 시작한다 — 그대로 인쇄하면 «빈 종이» 가 나온다.
      인쇄에서는 무조건 보이게 되돌린다.
   🔴 접힌 FAQ 는 펼쳐서 인쇄한다. 안 그러면 질문만 14줄 나온다. */
/* ══ 「면이 갈라지게」 ═════════════════════════
   원칙 : 배지는 «바탕의 반대» 로 채운다. 카드는 테두리로 갈라내고 그림자로 띄운다.
   목표 : 모든 면이 «면 대비 ≥1.20» 또는 «테두리 대비 ≥1.50» 을 넘긴다. */

/* ── 바탕 세 종 ── */
html body.page-id-2889 .in-tint{ background:#efefef }

/* ── 카드류 : 테두리를 «보이게» + 그림자를 «닿게» ── */
html body.page-id-2889 .in-sec .in-card,
html body.page-id-2889 .in-sec .in-step,
html body.page-id-2889 .in-sec .in-stat,
html body.page-id-2889 .in-sec .in-plan{
  border-color:#d0d0d0;                       /* 흰 대비 1.54 */
  box-shadow:0 1px 2px rgba(55,55,55,.07), 0 12px 28px rgba(55,55,55,.12);
}
html body.page-id-2889 .in-sec .in-tile{
  border-color:#d5d5d5;
  box-shadow:0 1px 2px rgba(55,55,55,.06);
}
html body.page-id-2889 .in-tint .in-card,
html body.page-id-2889 .in-tint .in-step,
html body.page-id-2889 .in-tint .in-stat,
html body.page-id-2889 .in-tint .in-plan,
html body.page-id-2889 .in-tint .in-tile{
  border-color:#c9c9c9;                       /* 연청 대비 1.52 */
}

/* ── 아이콘 배지 : 바탕의 «반대» 로 채운다 ── */
html body.page-id-2889 .in-sec .in-icb{
  background:#141414;
  color:#fff;
}
html body.page-id-2889 .in-sec .in-icb-mute{ background:#5f5f5f; color:#fff }
html body.page-id-2889 .in-navy .in-icb{
  background:#fff;
  color:#111827;
}
html body.page-id-2889 .in-navy .in-icb-mute{ background:rgba(255,255,255,.86); color:#111827 }

/* ── 칩 ── */
html body.page-id-2889 .in-sec .in-chip{
  background:#e6e6e6;
  color:#111827;
  border:1px solid #c9c9c9;
}
html body.page-id-2889 .in-navy .in-chip{
  background:rgba(255,255,255,.92);
  color:#111827;
  border-color:rgba(255,255,255,.92);
}

/* ── 남색 구역 카드 : 면을 한 단 더 벌린다 ── */
html body.page-id-2889 .in-navy .in-step,
html body.page-id-2889 .in-navy .in-stat,
html body.page-id-2889 .in-navy .in-flow-step,
html body.page-id-2889 .in-navy .in-two-col,
html body.page-id-2889 .in-navy .in-free{
  background:rgba(255,255,255,.145);
  border-color:rgba(255,255,255,.34);
}

/* ── 남은 넷 : 특이도가 더 높은 규칙이 앞서 있어 못 이겼던 자리 ── */
html body.page-id-2889 .in-sec a.in-folio-card{
  border-color:#d0d0d0;
  box-shadow:0 1px 2px rgba(55,55,55,.07), 0 12px 28px rgba(55,55,55,.12);
}
html body.page-id-2889 .in-sec a.in-folio-card:hover{ border-color:#c9c9c9 }
html body.page-id-2889 #in-lang .in-lang-card{
  border-color:#c9c9c9;
  box-shadow:0 1px 2px rgba(55,55,55,.06), 0 10px 24px rgba(55,55,55,.10);
}
html body.page-id-2889 #in-doc .in-doc-card{
  border-color:#c9c9c9;
  box-shadow:0 1px 2px rgba(55,55,55,.06), 0 12px 28px rgba(55,55,55,.12);
}
html body.page-id-2889 .in-sec .in-tile .in-chip{
  background:#ebebeb;
  color:#111827;
  border-color:#c9c9c9;
}

/* ══ 손을 얹었을 때 (09-07) ══════════════════════════════════════════════
   사장님 : 「마우스로 컨텐츠 온 하면 기술력을 보여주게. 마우스 내리면서
             여기서는 기술력과 디자인을 아는구나 할 것」

   지키는 것
   · 🚨 «레이아웃을 미는 속성» 은 건드리지 않는다. width·height·margin·padding·font-size 금지.
        transform·opacity·box-shadow·background·border-color·filter 만 쓴다(리플로우 0).
   · 🚨 hover 로 «정보를 드러내지» 않는다. 터치 기기에는 hover 가 없다. 강조까지만.
   · 🚨 @media (hover:hover) and (pointer:fine) 로 감싼다.
        안 감싸면 폰에서 «한 번 누른 카드가 눌린 채로» 남는다.
   · 🚨 무한 애니메이션 0. 전이(transition)만 쓴다.
   · 🚨 prefers-reduced-motion 존중 — 움직임은 끄고 색 변화만 남긴다.
   · 시간은 140~260ms, 커브는 cubic-bezier(.22,.61,.36,1) 하나로 통일한다. */

@media (hover:hover) and (pointer:fine){

  /* ── 카드류 : 한 단 떠오르고 테두리가 브랜드색으로 ── */
  html body.page-id-2889 .in-sec .in-card,
  html body.page-id-2889 .in-sec .in-tile,
  html body.page-id-2889 .in-sec .in-step,
  html body.page-id-2889 .in-sec .in-stat,
  html body.page-id-2889 .in-sec .in-plan,
  html body.page-id-2889 #in-lang .in-lang-card,
  html body.page-id-2889 #in-doc .in-doc-card{
    transition:transform .2s cubic-bezier(.22,.61,.36,1),
               box-shadow .2s cubic-bezier(.22,.61,.36,1),
               border-color .2s ease;
  }
  html body.page-id-2889 .in-sec .in-card:hover,
  html body.page-id-2889 .in-sec .in-tile:hover,
  html body.page-id-2889 .in-sec .in-step:hover,
  html body.page-id-2889 .in-sec .in-stat:hover,
  html body.page-id-2889 .in-sec .in-plan:hover,
  html body.page-id-2889 #in-lang .in-lang-card:hover,
  html body.page-id-2889 #in-doc .in-doc-card:hover{
    transform:translate3d(0,-3px,0);
    border-color:#c9c9c9;
    box-shadow:0 2px 4px rgba(55,55,55,.10), 0 18px 40px rgba(55,55,55,.18);
  }

  /* 남색 구역 카드는 «밝아지는» 쪽으로 */
  html body.page-id-2889 .in-navy .in-step:hover,
  html body.page-id-2889 .in-navy .in-stat:hover,
  html body.page-id-2889 .in-navy .in-flow-step:hover,
  html body.page-id-2889 .in-navy .in-two-col:hover{
    background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.62);
    box-shadow:0 18px 40px rgba(14,14,14,.28);
  }
  html body.page-id-2889 .in-navy .in-flow-step,
  html body.page-id-2889 .in-navy .in-two-col{
    transition:transform .2s cubic-bezier(.22,.61,.36,1),
               background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  /* ── 아이콘 배지 : 카드에 손을 얹으면 배지도 함께 반응한다 ── */
  html body.page-id-2889 .in-sec .in-icb{
    transition:transform .2s cubic-bezier(.22,.61,.36,1), background .2s ease;
  }
  /* 🔴 여기서 «판» 을 다시 그리면 안 된다 (2026-09-08 사장님 지적).
        아이콘 배경 원은 지시대로 없앴는데 이 hover 규칙만 살아남아,
        손을 얹는 순간 검정 사각형이 생기고 그 위에 검정 아이콘이 얹혀
        대비가 17.74 → 1.08 로 떨어졌다(밝은 구역 34자리 · 어두운 구역은 흰 판에 흰 아이콘).
        반응은 «살짝 커지는 것» 하나로 충분하다. 배경은 주지 않는다. */
  html body.page-id-2889 .in-sec .in-card:hover .in-icb,
  html body.page-id-2889 .in-sec .in-tile:hover .in-icb,
  html body.page-id-2889 .in-sec .in-step:hover .in-icb,
  html body.page-id-2889 .in-sec .in-stat:hover .in-icb,
  html body.page-id-2889 .in-sec .in-plan:hover .in-icb,
  html body.page-id-2889 .in-navy .in-step:hover .in-icb,
  html body.page-id-2889 .in-navy .in-stat:hover .in-icb,
  html body.page-id-2889 .in-navy .in-flow-step:hover .in-icb{
    transform:scale(1.07);
    background:none;
  }

  /* ── 제작 사례 : 사진이 살짝 밀려 들어온다 ── */
  html body.page-id-2889 #in-folio .in-folio-card:hover{
    transform:translate3d(0,-4px,0);
    border-color:#c9c9c9;
    box-shadow:0 2px 4px rgba(55,55,55,.12), 0 22px 46px rgba(55,55,55,.20);
  }

  /* ── 화면 캡처 카드 : 「실제 화면」 표시가 진해진다 ── */
  html body.page-id-2889 #in-screens .in-card.in-card-shot .in-shotchip{
    transition:background .2s ease, color .2s ease;
  }
  html body.page-id-2889 #in-screens .in-card.in-card-shot:hover .in-shotchip{
    background:#141414;
    color:#fff;
  }

  /* ── 폰 목업 : 손끝에 반응한다 ── */
  html body.page-id-2889 #in-screens .in-phone .in-phone-body{
    transition:transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s ease;
  }
  html body.page-id-2889 #in-screens .in-phone:hover .in-phone-body{
    transform:translate3d(0,-5px,0);
    box-shadow:0 22px 48px rgba(17,24,39,.30);
  }

  /* ── 비교표·단가표 : 지금 보고 있는 «줄» 이 밝아진다 ── */
  html body.page-id-2889 .in-sec .in-cmp-row,
  html body.page-id-2889 .in-sec .in-rate-row{
    transition:background .16s ease;
  }
  html body.page-id-2889 .in-sec .in-cmp-row:hover,
  html body.page-id-2889 .in-sec .in-rate-row:hover{
    background:#f3f3f3;
  }

  /* ── 자주 묻는 질문 : 왼쪽에 막대가 자란다 ── */
  html body.page-id-2889 #in-faq details > summary{
    position:relative;
    transition:background .16s ease, color .16s ease;
  }
  html body.page-id-2889 #in-faq details > summary::before{
    content:"";
    position:absolute;
    left:0; top:50%;
    width:3px; height:0;
    transform:translateY(-50%);
    border-radius:0 3px 3px 0;
    background:#141414;
    transition:height .22s cubic-bezier(.22,.61,.36,1);
  }
  html body.page-id-2889 #in-faq details > summary:hover::before{ height:62% }
  html body.page-id-2889 #in-faq details > summary:hover{ background:#f8f8f8 }

  /* ── 목차 ── */
  html body.page-id-2889 .in-anchor .in-anchor-list a{ transition:background .14s ease, color .14s ease }
  html body.page-id-2889 .in-anchor .in-anchor-list a:hover{ background:#f3f3f3; color:#111827 }

  /* ── 자가진단 : 줄 전체가 반응한다 ── */
  html body.page-id-2889 #in-selfcheck .in-chk:hover .in-chk-box{ border-color:#c9c9c9 }

  /* ── 포인터를 따라가는 광택 ──────────────────────────────────────
     🔴 이것 하나가 «기술을 아는 곳» 이라는 인상을 만든다.
        남색 큰 면에만 건다. 밝은 카드에 걸면 지저분해진다.
        pointermove 는 위임 하나로 받고 rAF 로 한 번만 그린다(성능). */
  html body.page-id-2889 .in-sheen{ position:relative; isolation:isolate }
  html body.page-id-2889 .in-sheen::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
               rgba(255,255,255,.16), rgba(255,255,255,0) 62%);
    opacity:0;
    transition:opacity .26s ease;
    z-index:0;
  }
  html body.page-id-2889 .in-sheen:hover::after{ opacity:1 }
}

/* ── 움직임을 줄여 달라고 하신 분께는 색만 ── */
@media (prefers-reduced-motion:reduce){
  html body.page-id-2889 .in-sec .in-card,
  html body.page-id-2889 .in-sec .in-tile,
  html body.page-id-2889 .in-sec .in-step,
  html body.page-id-2889 .in-sec .in-stat,
  html body.page-id-2889 .in-sec .in-plan,
  html body.page-id-2889 .in-sec .in-icb,
  html body.page-id-2889 #in-lang .in-lang-card,
  html body.page-id-2889 #in-doc .in-doc-card,
  html body.page-id-2889 #in-screens .in-phone .in-phone-body,
  html body.page-id-2889 #in-faq details > summary::before,
  html body.page-id-2889 .in-sheen::after{ transition:none }
  html body.page-id-2889 .in-sec .in-card:hover,
  html body.page-id-2889 .in-sec .in-tile:hover,
  html body.page-id-2889 .in-sec .in-step:hover,
  html body.page-id-2889 .in-sec .in-stat:hover,
  html body.page-id-2889 .in-sec .in-plan:hover,
  html body.page-id-2889 #in-folio .in-folio-card:hover,
  html body.page-id-2889 #in-lang .in-lang-card:hover,
  html body.page-id-2889 #in-doc .in-doc-card:hover,
  html body.page-id-2889 #in-screens .in-phone:hover .in-phone-body{ transform:none }
  html body.page-id-2889 .in-sec .in-card:hover .in-icb,
  html body.page-id-2889 .in-sec .in-tile:hover .in-icb,
  html body.page-id-2889 .in-sec .in-step:hover .in-icb,
  html body.page-id-2889 .in-sec .in-stat:hover .in-icb,
  html body.page-id-2889 .in-sec .in-plan:hover .in-icb{ transform:none }
  html body.page-id-2889 .in-sheen::after{ display:none }
}


/* ══ v1.6.2 — 심사에서 건진 것 ═════════════════════════════════════════
   ① 🔴 남색 구역 카드를 «흰색을 얹는» 대신 «음각» 으로 뒤집는다.
        지금은 rgba(255,255,255,.145) 라 카드 위 «흰 글자» 대비가
        남색 바닥(9.87)보다 오히려 낮은 6.83 이었다. 면을 갈라내려다 글을 어둡게 만든 셈.
        음각 rgba(0,0,0,.26) 이면 면 대비 1.31 을 지키면서 흰 글자가 12.98 이 된다.
        면 분리와 가독성이 «같은 방향» 으로 움직이는 유일한 수다.
   ② hover 타이밍을 비대칭으로. 얹을 때 180ms · 뺄 때 130ms.
        카드가 51장 늘어선 지면에서 대칭이면 «끈적하게» 느껴진다.
   ③ 키보드로 다니는 분을 위한 :focus-visible. */

html body.page-id-2889 .in-navy .in-step,
html body.page-id-2889 .in-navy .in-stat,
html body.page-id-2889 .in-navy .in-flow-step,
html body.page-id-2889 .in-navy .in-two-col,
html body.page-id-2889 .in-navy .in-free{
  background:rgba(0,0,0,.26);
  border-color:rgba(255,255,255,.30);
}
html body.page-id-2889 #in-choose .in-two-col--us{
  background:#fff;
  border-color:#fff;
}

@media (hover:hover) and (pointer:fine){
  html body.page-id-2889 .in-sec .in-card,
  html body.page-id-2889 .in-sec .in-tile,
  html body.page-id-2889 .in-sec .in-step,
  html body.page-id-2889 .in-sec .in-stat,
  html body.page-id-2889 .in-sec .in-plan,
  html body.page-id-2889 .in-sec a.in-folio-card,
  html body.page-id-2889 #in-lang .in-lang-card,
  html body.page-id-2889 #in-doc .in-doc-card{
    transition-duration:.13s;                    /* 뺄 때 — 빠르게 */
  }
  html body.page-id-2889 .in-sec .in-card:hover,
  html body.page-id-2889 .in-sec .in-tile:hover,
  html body.page-id-2889 .in-sec .in-step:hover,
  html body.page-id-2889 .in-sec .in-stat:hover,
  html body.page-id-2889 .in-sec .in-plan:hover,
  html body.page-id-2889 .in-sec a.in-folio-card:hover,
  html body.page-id-2889 #in-lang .in-lang-card:hover,
  html body.page-id-2889 #in-doc .in-doc-card:hover{
    transition-duration:.18s;                    /* 얹을 때 — 조금 느리게 */
  }
  html body.page-id-2889 .in-navy .in-step:hover,
  html body.page-id-2889 .in-navy .in-stat:hover,
  html body.page-id-2889 .in-navy .in-flow-step:hover,
  html body.page-id-2889 .in-navy .in-two-col:hover{
    background:rgba(0,0,0,.34);
    border-color:rgba(255,255,255,.56);
  }
  html body.page-id-2889 #in-choose .in-two-col--us:hover{ background:#fff }
}

/* 키보드로 다니는 분 — 어디에 있는지 보여야 한다 */
html body.page-id-2889 .in-sec a:focus-visible,
html body.page-id-2889 .in-sec button:focus-visible,
html body.page-id-2889 .in-sec summary:focus-visible,
html body.page-id-2889 #in-selfcheck .in-chk-in:focus-visible ~ .in-chk-box{
  outline:3px solid #c9c9c9;
  outline-offset:3px;
  border-radius:6px;
}
html body.page-id-2889 .in-navy a:focus-visible,
html body.page-id-2889 .in-navy button:focus-visible{
  outline-color:#fff;
}


/* 🔴 v1.5.0 때 #in-choose 안에 «아이디 선택자» 로 박아 둔 배지가
      v1.6.0 의 전역 규칙(.in-sec .in-icb)을 특이도로 이겨 연청 그대로 남아 있었다.
      흰 카드 위 대비 1.11~1.14 — 배경에 묻힌다.
      🚨 검사기가 «섹션+클래스» 로 중복을 지워 이 다섯을 못 봤다. 검사기도 함께 고쳤다. */
html body.page-id-2889 #in-choose .in-two-col--us .in-two-head .in-icb,
html body.page-id-2889 #in-choose .in-tile .in-icb{
  background:#141414;
  color:#fff;
}
/* 🚨 배경 원이 없어진 뒤로 이 «흰 아이콘» 여섯이 흰 카드 위에 얹혀 대비 1.00 이 되었다.
      아이디 특이도(1,4,0)라 뒤의 전역 규칙이 못 이겼다. 판의 색을 물려받게 둔다. */
html body.page-id-2889 #in-choose .in-two-col--us .in-two-head .in-icb .in-ic,
html body.page-id-2889 #in-choose .in-tile .in-icb .in-ic{ color:inherit }


/* 🔴 「이전 특가」 카드 하나만 «연청 면 + 옅은 테두리» 라 흰 바탕에서 안 갈라졌다(면 1.11 · 테두리 1.34).
      아이디 선택자로 박혀 있어 전역 규칙을 이겼다.
      🚨 검사기의 중복 제거를 고치고 나서야 드러났다 — 같은 섹션에 다른 카드가 있으면 가려진다. */
html body.page-id-2889 #in-renew .in-inner > .in-card{
  border-color:#c9c9c9;
  box-shadow:0 1px 2px rgba(55,55,55,.07), 0 12px 28px rgba(55,55,55,.12);
}

@media print{
  html body.page-id-2889 .in-page .in-rv{
    opacity:1;
    transform:none;
    transition:none;
  }
  html body.page-id-2889 .in-anchor,
  html body.page-id-2889 .in-anchor .in-prog{ display:none }

  html body.page-id-2889 .in-sec{
    padding:18px 0;
    background:#fff;
    color:#111827;
    break-inside:auto;
  }
  html body.page-id-2889 .in-sec.in-navy,
  html body.page-id-2889 .in-sec.in-navy h2,
  html body.page-id-2889 .in-sec.in-navy h3,
  html body.page-id-2889 .in-sec.in-navy p,
  html body.page-id-2889 .in-sec.in-navy li,
  html body.page-id-2889 .in-sec.in-navy strong{ color:#111827; background:#fff }

  html body.page-id-2889 .in-sec .in-card,
  html body.page-id-2889 .in-sec .in-tile,
  html body.page-id-2889 .in-sec .in-step,
  html body.page-id-2889 .in-sec .in-plan,
  html body.page-id-2889 .in-sec .in-two-col,
  html body.page-id-2889 .in-sec .in-fig,
  html body.page-id-2889 .in-sec .in-doc-card{
    break-inside:avoid;
    box-shadow:none;
    border:1px solid #dedede;
    background:#fff;
    color:#111827;
  }
  html body.page-id-2889 .in-sec h2{ break-after:avoid }

  /* 접힌 것은 펼쳐서 인쇄한다 */
  html body.page-id-2889 #in-faq details{ display:block }
  html body.page-id-2889 #in-faq .in-faq-a{ display:block }

  /* 링크 주소를 종이에 남긴다 — 결재 서류로 돌아다니는 종이다 */
  html body.page-id-2889 .in-page a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:10px;
    color:#6b7280;
    word-break:break-all;
  }
  html body.page-id-2889 .in-page .in-anchor-list a[href^="http"]::after,
  html body.page-id-2889 .in-page a.in-btn[href^="http"]::after,
  html body.page-id-2889 .in-page a.in-folio-card[href^="http"]::after{ content:"" }
}

/* ══ v1.6.1 — 심사에서 나온 지적 반영 ══════════════════════════════════
   ① 🔴 인쇄에서 아이콘 219개가 «통째로 사라진다».
        우리 아이콘은 CSS mask + background-color 로 그리는데,
        브라우저는 기본으로 배경을 인쇄하지 않는다(print-color-adjust: economy 확인).
        지면 본문이 「인쇄해 결재 서류에 붙이셔도 됩니다」 라고 말하는데 그림이 다 빠진다.
        ⇒ 아이콘 «글리프» 에만 print-color-adjust:exact 를 준다.
           배지 «면» 은 흰 채움 + 남색 테두리로 바꿔 잉크를 아낀다.
   ② 테두리를 한 단 더 세운다.
        1.54(흰 위) → 2.03. 심사가 「WCAG 1.4.11 은 3:1」 이라 지적했고,
        3:1(#7390c4)은 카드가 «표» 처럼 보여 과하다. 그 사이에서 2.0 을 잡는다. */

html body.page-id-2889 .in-sec .in-card,
html body.page-id-2889 .in-sec .in-step,
html body.page-id-2889 .in-sec .in-stat,
html body.page-id-2889 .in-sec .in-plan,
html body.page-id-2889 .in-sec a.in-folio-card{ border-color:#b5b5b5 }
html body.page-id-2889 .in-sec .in-tile{ border-color:#bdbdbd }
html body.page-id-2889 .in-tint .in-card,
html body.page-id-2889 .in-tint .in-step,
html body.page-id-2889 .in-tint .in-stat,
html body.page-id-2889 .in-tint .in-plan,
html body.page-id-2889 .in-tint .in-tile,
html body.page-id-2889 #in-lang .in-lang-card,
html body.page-id-2889 #in-doc .in-doc-card{ border-color:#ababab }

@media print{
  /* 🔴 아이콘은 «배경» 으로 그린 그림이다. 이걸 안 주면 219개가 백지가 된다. */
  html body.page-id-2889 .in-page i.in-ic{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  /* 배지·칩은 면을 비우고 «선» 으로 남긴다 — 잉크를 아끼면서 자리는 지킨다 */
  html body.page-id-2889 .in-sec .in-icb,
  html body.page-id-2889 .in-navy .in-icb{
    background:#fff;
    color:#111827;
    border:1px solid #c9c9c9;
  }
  html body.page-id-2889 .in-sec .in-chip,
  html body.page-id-2889 .in-sec .in-tile .in-chip,
  html body.page-id-2889 .in-navy .in-chip{
    background:#fff;
    color:#111827;
    border:1px solid #8e8e8e;
  }
  /* 종이 위에서 #d7dfeb 은 거의 안 보인다 — 인쇄 테두리도 한 단 올린다 */
  html body.page-id-2889 .in-sec .in-card,
  html body.page-id-2889 .in-sec .in-tile,
  html body.page-id-2889 .in-sec .in-step,
  html body.page-id-2889 .in-sec .in-plan,
  html body.page-id-2889 .in-sec .in-stat,
  html body.page-id-2889 .in-sec .in-two-col,
  html body.page-id-2889 .in-sec .in-fig,
  html body.page-id-2889 .in-sec .in-doc-card{ border:1px solid #b5b5b5 }

  /* 포인터 광택은 인쇄에 있을 이유가 없다 */
  html body.page-id-2889 .in-sheen::after{ display:none }
}

/* ══ v1.7.0 — 구역마다 격을 다르게 (09-07) ═══════════════════════════════
   사장님 : 「중간 블루 캡쳐를 보면 넘 대충하는 것 같다 · 랜딩페이지면 컨텐츠별로
             디자인이나 색상이 다르게 가야 한다 · 배경색이 넘 강하다 · 웹에이전시 같지 않다」

   무엇이 문제였나 (실측)
   · 똑같은 «평면 남색 #0B3AA0» 덩어리가 다섯 번 반복됐다.
     특히 #in-process 는 12칸이 전부 남색인 거대한 벽이었다.
   · 밝은 구역은 흰·연청 «두 단» 뿐이라 기계적으로 번갈아 나왔다.

   어떻게 고치나
   · 남색 «전면» 은 첫 인상(히어로)과 마침표(CTA) «둘만» 남긴다. 강조는 아껴야 강조다.
   · 밝은 쪽을 흰 → 아주연함(#f6f9fe) → 연청(#e9f0fb) «세 단» 으로 늘려 리듬을 만든다.
   · 남은 남색 둘은 «평면» 이 아니라 깊이가 있는 그라디언트로 바꾼다.
   · 내려온 세 구역(길목·무엇을사시나·제작과정)은 각자 «다른 장치» 로 성격을 살린다. */

/* ── 밝은 세 단 ── */
html body.page-id-2889 .in-soft{ background:#f9f9f9 }

/* ── 남색 둘 : 평면이 아니라 «깊이» ──
   위에서 아래로 어두워지고, 왼쪽 위에 아주 옅은 빛이 도는 구조.
   🚨 사진이 깔린 히어로·CTA 에서는 사진 위 그라디언트가 이미 있으므로
      배경 그라디언트는 사진에 가려진다 — 그래도 사진이 못 뜨는 상황의 바닥이 된다. */
/* 🔴 background 한 줄로 그라디언트를 주면 background-color 가 «투명» 이 된다.
      그러면 대비 검사기가 바탕을 흰색으로 보고, 사진·그라디언트가 못 뜨는 순간
      실제로도 흰 바탕에 흰 글자가 된다. 색과 그림을 «따로» 선언한다. */
html body.page-id-2889 .in-navy{
  background-color:#141414;
  background-image:
    radial-gradient(1200px 620px at 12% -10%, rgba(255,255,255,.13), rgba(255,255,255,0) 60%),
    linear-gradient(178deg, rgba(70,70,70,.98) 0%, rgba(55,55,55,.98) 42%, rgba(45,45,45,1) 100%);
}

/* ── 구역 사이를 «자르지» 않고 이어지게 ──
   밝은 단끼리 맞닿을 때 선 하나로 경계를 알린다(면이 아니라 «선» 이라 무겁지 않다). */
html body.page-id-2889 .in-white + .in-white,
html body.page-id-2889 .in-soft + .in-soft,
html body.page-id-2889 .in-tint + .in-tint{ border-top:1px solid #e3e3e3 }


/* ══ v1.7.0 · 첫 화면 — 넉 장이 도는 대문 ═════════════════════════════════
   사장님 : 「website.co.kr 처럼 아이콘 · 메인슬라이더 4장 나오게 하는 것부터」
            「애니스포츠는 나름 꾸밈있게 제작했으니까 제작의뢰가 들어온다」

   실측해서 가져온 문법 (website.co.kr 2026-09-07 측정)
   · 사진이 화면을 꽉 채우고 넉 장이 6~7초마다 바뀐다.
   · 큰 국문 표제 «뒤» 에 색 원이 깔리고, 그 원 위에 영문 한 단어가 얹힌다.
   · 왼쪽에 세로로 «증거 배지» 가 쌓인다(수상 · 인증). 우리는 실적 숫자로 바꾼다.
   · 아래 가운데에 01 / 04 와 «차오르는 막대» 가 있다.

   지키는 것
   · 🚨 무한 CSS 애니메이션 0. 사진 확대는 슬라이드가 «켜질 때 한 번» 도는 전이(transition)다.
   · 🚨 움직임을 줄여 달라고 한 분께는 자동 넘김도 확대도 끈다(화살표는 남긴다).
   · 🚨 넉 장을 격자 한 칸에 겹쳐 둔다 — 글이 길고 짧아도 높이가 안 튄다.
   · 🚨 인쇄에는 첫 장만 남긴다. */

/* 🔴 .in-sec 이 display:flex 다 — 그대로 두면 히어로가 477px 칼럼으로 찌그러진다(실측).
      대문은 «한 덩이» 로 흐르게 block 으로 되돌리고 안쪽 여백도 스스로 잡는다. */
html body.page-id-2889 #in-hero.in-heros{
  display:block;
  position:relative;
  padding:0;
  border-radius:20px;
  overflow:hidden;
  isolation:isolate;
}

/* 🚨 stage 를 «가로» flex 로 두면 글 덩이와 배지 줄이 나란히 서 버린다(실측 600+600).
      세로로 쌓고 가운데 정렬한다. */
html body.page-id-2889 #in-hero.in-heros .in-hero-stage{
  position:relative;
  min-height:min(86vh, 800px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ── 사진 넉 장 ── */
html body.page-id-2889 #in-hero.in-heros .in-hs{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  transition:opacity .9s ease;
  pointer-events:none;
}
html body.page-id-2889 #in-hero.in-heros .in-hs.is-on{ opacity:1 }
html body.page-id-2889 #in-hero.in-heros .in-hs-bg{ position:absolute; inset:0; overflow:hidden }
html body.page-id-2889 #in-hero.in-heros .in-hs-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  transform:scale(1.075);
  transition:transform 8s cubic-bezier(.22,.61,.36,1);
}
html body.page-id-2889 #in-hero.in-heros .in-hs.is-on .in-hs-bg img{ transform:scale(1) }
/* 사진 위에 남색 장막 — 흰 글자가 어떤 사진에서도 읽히게 한다 */
html body.page-id-2889 #in-hero.in-heros .in-hs-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(102deg, rgba(24,24,24,.90) 0%, rgba(34,34,34,.76) 46%, rgba(55,55,55,.52) 100%),
    linear-gradient(180deg, rgba(18,18,18,.34) 0%, rgba(18,18,18,0) 34%, rgba(18,18,18,.46) 100%);
}

/* ── 글이 앉는 자리 ── */
html body.page-id-2889 #in-hero.in-heros .in-hero-in{
  position:relative;
  z-index:2;
  width:min(1160px, 90%);
  margin:0 auto;
  padding:76px 0 72px;
  text-align:center;
}

html body.page-id-2889 #in-hero.in-heros .in-heyebrow{
  display:inline-block;
  margin:0 0 26px;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.42);
  color:#fff;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.01em;
}

/* 넉 장의 글을 격자 «한 칸» 에 겹쳐 둔다 — 높이가 안 튄다 */
html body.page-id-2889 #in-hero.in-heros .in-hcaps{
  display:grid;
  align-items:start;
}
html body.page-id-2889 #in-hero.in-heros .in-hcap{
  grid-area:1 / 1;
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .62s ease, transform .62s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
html body.page-id-2889 #in-hero.in-heros .in-hcap.is-on{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* 🔴 여기가 «꾸밈» 의 핵심 — 표제 뒤에 깔리는 색 원 위에 영문 한 단어 */
html body.page-id-2889 #in-hero.in-heros .in-hcap{ position:relative }
html body.page-id-2889 #in-hero.in-heros .in-hcap{ padding-top:72px }
/* 🔴 앞 판은 원을 표제 «한가운데» 에 두어 영문이 흰 글자에 통째로 가렸다(캡처 확인).
      원은 위로 올리고 표제가 원의 «아랫자락» 만 지나가게 한다 — 겹침은 남고 글은 읽힌다. */
html body.page-id-2889 #in-hero.in-heros .in-hcap-en{
  position:absolute;
  left:50%;
  top:0;
  z-index:0;
  width:132px;
  height:132px;
  margin-left:-66px;
  border-radius:50%;
  /* 🔴 라임으로 채우면 그 위를 지나는 «흰 표제» 대비가 1.4 로 떨어진다(375px 실측).
        면은 진한 남색으로 두고 라임은 «테두리와 글자» 로만 쓴다 — 꾸밈은 살고 글은 읽힌다. */
  background:rgba(37,37,37,.78);
  border:2px solid #c6f24e;
  color:#c6f24e;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Montserrat","Pretendard",-apple-system,sans-serif;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.015em;
  box-shadow:0 16px 40px rgba(12,12,12,.34);
}

html body.page-id-2889 #in-hero.in-heros .in-h1{
  position:relative;
  z-index:1;
  margin:0 0 18px;
  color:#fff;
  font-size:clamp(27px, 3.9vw, 52px);
  font-weight:800;
  line-height:1.28;
  letter-spacing:-.028em;
  text-shadow:0 2px 18px rgba(12,12,12,.42);
  word-break:keep-all;
}
html body.page-id-2889 #in-hero.in-heros .in-lead{
  position:relative;
  z-index:1;
  margin:0;
  color:rgba(255,255,255,.93);
  font-size:clamp(14.5px, 1.35vw, 18px);
  line-height:1.78;
  letter-spacing:-.015em;
  text-shadow:0 1px 12px rgba(12,12,12,.44);
  word-break:keep-all;
}

html body.page-id-2889 #in-hero.in-heros .in-hero-btns{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin:34px 0 0;
}

/* ── 아래 가운데 : ‹ 01 ▬▬▬ 04 › ── */
html body.page-id-2889 #in-hero.in-heros .in-hprog{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:42px auto 0;
  max-width:440px;
  color:#fff;
}
html body.page-id-2889 #in-hero.in-heros .in-hprog-btn{
  width:36px;
  height:36px;
  flex:0 0 36px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.52);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:19px;
  line-height:1;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
html body.page-id-2889 #in-hero.in-heros .in-hprog-now,
html body.page-id-2889 #in-hero.in-heros .in-hprog-all{
  font-family:"Montserrat","Pretendard",sans-serif;
  font-size:15px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
html body.page-id-2889 #in-hero.in-heros .in-hprog-all{ color:rgba(255,255,255,.62) }
html body.page-id-2889 #in-hero.in-heros .in-hprog-bar{
  flex:1 1 auto;
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.30);
  overflow:hidden;
}
html body.page-id-2889 #in-hero.in-heros .in-hprog-fill{
  display:block;
  width:0;
  height:100%;
  border-radius:2px;
  background:#c6f24e;
}
html body.page-id-2889 #in-hero.in-heros .in-hprog-fill.is-run{
  width:100%;
  transition:width 6.4s linear;
}

/* ── 실적 배지 넉 개 ──
   🚨 website.co.kr 은 화면 전폭이라 왼쪽 «세로 열» 이 들어가지만
      우리 본문 단은 1200px 이라 세로로 세우면 가운데 글과 겹친다(실측 x270 에서 충돌).
      그래서 대문 «맨 아래 가로줄» 로 놓는다. */
html body.page-id-2889 #in-hero.in-heros .in-hbadges{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  width:min(1160px, 90%);
  margin:0 auto;
  padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.24);
  list-style:none;
}
/* 🚨 flex 로 두면 「981개」 와 「등록 대회」 가 같은 줄에서 다투다 «등록 / 대회» 로 쪼개진다.
      격자로 못 박아 오른쪽 칸에 위아래로 쌓는다(한 항목은 줄바꿈으로 쪼개지지 않는다). */
html body.page-id-2889 #in-hero.in-heros .in-hbadges li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:12px;
  margin:0;
  padding:13px 16px;
  border-radius:14px;
  background:rgba(16,16,16,.46);
  border:1px solid rgba(255,255,255,.30);
  color:#fff;
}
html body.page-id-2889 #in-hero.in-heros .in-hb-ic{
  grid-row:1 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:50%;
  background:#c6f24e;
  color:#111827;
}
html body.page-id-2889 #in-hero.in-heros .in-hb-ic .in-ic{ width:19px; height:19px; flex:0 0 19px }
html body.page-id-2889 #in-hero.in-heros .in-hbadges b{
  display:block;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.025em;
  color:#fff;
  line-height:1.25;
}
html body.page-id-2889 #in-hero.in-heros .in-hbadges span:not(.in-hb-ic){
  display:block;
  font-size:12.5px;
  color:rgba(255,255,255,.80);
  letter-spacing:-.01em;
  line-height:1.35;
}
/* 🚨 b 와 span 이 flex 칸으로 «쪼개지지» 않게 한 덩이로 싼다 */
html body.page-id-2889 #in-hero.in-heros .in-hbadges b,
html body.page-id-2889 #in-hero.in-heros .in-hbadges span:not(.in-hb-ic){ grid-column:2 }
@media (max-width:820px){
  html body.page-id-2889 #in-hero.in-heros .in-hbadges{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px }
}
@media (max-width:420px){
  html body.page-id-2889 #in-hero.in-heros .in-hbadges li{ padding:11px 12px; gap:9px }
  html body.page-id-2889 #in-hero.in-heros .in-hb-ic{ width:30px; height:30px; flex:0 0 30px }
  html body.page-id-2889 #in-hero.in-heros .in-hbadges b{ font-size:15px }
}

html body.page-id-2889 #in-hero.in-heros .in-hnote{
  position:relative;
  z-index:2;
  width:min(1160px, 90%);
  margin:0 auto;
  padding:20px 0 34px;
  text-align:center;
  color:rgba(255,255,255,.72);
}

/* ── 폭이 좁아질 때 ── */
@media (max-width:900px){
  html body.page-id-2889 #in-hero.in-heros .in-hero-stage{ min-height:auto }
  html body.page-id-2889 #in-hero.in-heros .in-hero-in{ padding:56px 0 44px }
  html body.page-id-2889 #in-hero.in-heros .in-hcap{ padding-top:58px }
  html body.page-id-2889 #in-hero.in-heros .in-hcap-en{
    width:106px; height:106px; margin-left:-53px; font-size:16px;
  }
  html body.page-id-2889 #in-hero.in-heros .in-hprog{ margin-top:32px; max-width:320px }
}
@media (max-width:520px){
  html body.page-id-2889 #in-hero.in-heros .in-hcap{ padding-top:52px }
  html body.page-id-2889 #in-hero.in-heros .in-hcap-en{ width:94px; height:94px; margin-left:-47px; font-size:14px }
  html body.page-id-2889 #in-hero.in-heros .in-heyebrow{ font-size:12px; padding:6px 12px }
}

/* ── 움직임을 줄여 달라고 하신 분께 ── */
@media (prefers-reduced-motion:reduce){
  html body.page-id-2889 #in-hero.in-heros .in-hs,
  html body.page-id-2889 #in-hero.in-heros .in-hcap,
  html body.page-id-2889 #in-hero.in-heros .in-hs-bg img,
  html body.page-id-2889 #in-hero.in-heros .in-hprog-fill{ transition:none }
  html body.page-id-2889 #in-hero.in-heros .in-hs-bg img{ transform:none }
  html body.page-id-2889 #in-hero.in-heros .in-hcap{ transform:none }
}

/* ── 인쇄 : 첫 장만 ── */
@media print{
  html body.page-id-2889 #in-hero.in-heros .in-hs:not(.is-on),
  html body.page-id-2889 #in-hero.in-heros .in-hcap:not(.is-on),
  html body.page-id-2889 #in-hero.in-heros .in-hprog{ display:none }
  html body.page-id-2889 #in-hero.in-heros .in-hero-stage{ min-height:auto }
  html body.page-id-2889 #in-hero.in-heros .in-hcap-en{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}


/* ══ v1.7.0 · 밝아진 구역에 남아 있던 «흰 글자» 규칙 정리 ══════════════════
   사장님 : 「랜딩페이지면 컨텐츠별로 디자인이나 색상이 다르게 가야 한다」
            「배경색이 넘 강하다 · 웹에이전시 같지 않다」

   무엇을 했나
   · 남색 «전면» 을 다섯 곳에서 셋으로 줄였다 — 대문(01) · 무엇을 사시나(11) · 마침(24).
   · 남은 셋을 «같은 남색» 으로 두면 또 단조롭다.
     11번은 «결정하는 자리» 라 한 단 더 깊은 잉크빛으로 갈랐다(.in-navy2).
   · 밝아진 구역(#in-path · #in-process)에 남아 있던 흰 글자 규칙을 밝은 바탕용으로 다시 썼다.
     🔴 안 고치면 흰 바탕에 흰 글자다. 실측 대비 1.00~1.15 로 39자리가 걸렸다. */

/* ── 11번 구역 : 한 단 더 깊은 잉크빛 ── */
html body.page-id-2889 .in-navy.in-navy2{
  background-color:#111111;
  background-image:
    radial-gradient(1100px 560px at 88% -12%, rgba(255,255,255,.16), rgba(255,255,255,0) 62%),
    linear-gradient(182deg, #141414 0%, #111111 46%, #0b0b0b 100%);
}

/* ── #in-path : 밝은 구역이 되었다 ──────────────────────────────────────
   「대회 등록은 무료」 띠는 이 지면에서 가장 문턱이 낮은 첫 접촉이다.
   밝은 바탕 위에 «남색 띠» 로 세워 눈에 먼저 들어오게 한다(흰 글자는 그대로 산다). */
html body.page-id-2889 #in-path .in-free{
  background-color:#141414;
  background-image:linear-gradient(100deg, #444444 0%, #141414 58%, #0f0f0f 100%);
  border:1px solid #c9c9c9;
  box-shadow:0 18px 44px rgba(55,55,55,.24);
}
html body.page-id-2889 #in-path p.in-free-head{ color:#fff }
html body.page-id-2889 #in-path p.in-free-head .in-icb{
  background:#c6f24e;
  color:#111111;
}
html body.page-id-2889 #in-path .in-free-txt p{ color:rgba(255,255,255,.94) }
html body.page-id-2889 #in-path .in-free-txt p strong{ color:#fff }
html body.page-id-2889 #in-path p.in-free-sub{ color:rgba(255,255,255,.84) }
html body.page-id-2889 #in-path a.in-btn.in-free-btn{
  background:#c6f24e;
  color:#111111;
  border-color:#c6f24e;
  font-weight:800;
}
html body.page-id-2889 #in-path a.in-btn.in-free-btn:hover{
  background:#d5f76f;
  color:#0b0b0b;
  border-color:#d5f76f;
}

/* ── 흐름 칸(.in-flow-step) : 바탕이 밝은 곳에서는 «흰 카드» 로 ──
   🚨 base 규칙이 rgba(255,255,255,.08) + 흰 글자였다. 밝은 구역에서 통째로 사라진다.
      base 를 밝은 바탕용으로 바꾸고, 어두운 구역용은 .in-navy 로 따로 둔다
      (기존 .in-navy .in-flow-step 규칙이 이미 있어 그대로 이긴다). */
html body.page-id-2889 .in-tint .in-flow-step,
html body.page-id-2889 .in-soft .in-flow-step,
html body.page-id-2889 .in-white .in-flow-step{
  background:#fff;
  /* 🚨 #c9c9c9 는 흰 바탕 기준값이다. 연청(#e9f0fb) 바탕에서는 1.44 로 떨어져 칸이 안 갈린다.
        연청 위에서 1.50 을 넘기는 값이 #bcbcbc 다. */
  border:1px solid #bcbcbc;
  box-shadow:0 10px 26px rgba(39,39,39,.08);
}
html body.page-id-2889 .in-tint .in-flow-step strong,
html body.page-id-2889 .in-soft .in-flow-step strong,
html body.page-id-2889 .in-white .in-flow-step strong{ color:#111827 }
html body.page-id-2889 .in-tint .in-flow-step p,
html body.page-id-2889 .in-soft .in-flow-step p,
html body.page-id-2889 .in-white .in-flow-step p{ color:#374151 }
html body.page-id-2889 .in-tint .in-flow-empty,
html body.page-id-2889 .in-soft .in-flow-empty,
html body.page-id-2889 .in-white .in-flow-empty{
  background:transparent;
  /* «막힌 칸» 은 앞 세 칸과 눈에 띄게 달라야 한다 — 점선을 한 단 더 진하게 */
  border:1px dashed #8a8a8a;
  box-shadow:none;
}

/* ── 「누가 하나」 표시 : 밝은 바탕에서는 채워서 보이게 ── */
html body.page-id-2889 .in-tint .in-step-who[data-who="idc"],
html body.page-id-2889 .in-soft .in-step-who[data-who="idc"],
html body.page-id-2889 .in-white .in-step-who[data-who="idc"]{
  background:#141414;
  color:#fff;
  border:1px solid #c9c9c9;
}
html body.page-id-2889 .in-tint .in-step-who[data-who="customer"],
html body.page-id-2889 .in-soft .in-step-who[data-who="customer"],
html body.page-id-2889 .in-white .in-step-who[data-who="customer"]{
  background:#fff;
  color:#111827;
  border:1px solid #8e8e8e;
}

/* ── 밝은 구역의 아이콘 배지는 «바탕의 반대» 로 채운다 ── */
html body.page-id-2889 .in-tint .in-flow-step .in-icb,
html body.page-id-2889 .in-soft .in-flow-step .in-icb,
html body.page-id-2889 .in-white .in-flow-step .in-icb{
  background:#141414;
  color:#fff;
}


/* ══ v1.7.0 · 구역 머리표 ═══════════════════════════════════════════════
   사장님 : 「랜딩페이지면 컨텐츠별로 디자인이나 색상이 다르게 가야 한다」

   website.co.kr 실측 문법을 우리 것으로 옮겼다.
   · 큰 국문 표제 위에 «번호 + 영문 + 한 마디» 를 얹는다.
   · 구역 뒤에 그 영문을 아주 옅게 크게 깐다(워터마크).
   · 색은 아무렇게나 돌리지 않는다. 성격 넉 갈래로 묶었다 —
       trust 실적·회사(남색) / tech 화면·기능(청록) / money 값·비교(주황) / ops 절차·지원(초록)
     같은 성격끼리 같은 색이라 «이 구역이 무슨 이야기인지» 가 색으로 먼저 읽힌다.
   🚨 색은 전부 흰·연청 바탕에서 4.5:1 을 넘게 골랐다(계산해서 확인).
   🚨 어두운 구역에서는 넷 다 안 읽히므로 라임 한 벌로 갈아탄다. */

html body.page-id-2889 .in-sec p.in-kick{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
  padding:0;
}
html body.page-id-2889 .in-sec .in-kick-no{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:10px;
  background:#141414;
  color:#fff;
  font-family:"Montserrat","Pretendard",sans-serif;
  font-size:14px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
html body.page-id-2889 .in-sec .in-kick-en{
  font-family:"Montserrat","Pretendard",sans-serif;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.19em;
  color:#111827;
  text-transform:uppercase;
}
html body.page-id-2889 .in-sec .in-kick-ko{
  position:relative;
  padding-left:19px;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.01em;
  color:#5f5f5f;
}
html body.page-id-2889 .in-sec .in-kick-ko::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:11px;
  height:2px;
  margin-top:-1px;
  border-radius:2px;
  background:#dcdcdc;
}

/* 성격별 색 — 흰(#fff) · 아주연함(#f6f9fe) · 연청(#e9f0fb) 세 바탕에서 모두 4.5:1 이상 */
html body.page-id-2889 .in-sec p.in-kick[data-tone="tech"]  .in-kick-no{ background:#141414 }
html body.page-id-2889 .in-sec p.in-kick[data-tone="tech"]  .in-kick-en{ color:#111827 }
html body.page-id-2889 .in-sec p.in-kick[data-tone="money"] .in-kick-no{ background:#b24a08 }
html body.page-id-2889 .in-sec p.in-kick[data-tone="money"] .in-kick-en{ color:#b24a08 }
html body.page-id-2889 .in-sec p.in-kick[data-tone="ops"]   .in-kick-no{ background:#14704e }
html body.page-id-2889 .in-sec p.in-kick[data-tone="ops"]   .in-kick-en{ color:#14704e }

/* 🚨 어두운 구역에서는 위 넉 색이 전부 안 읽힌다 — 라임 한 벌로 갈아탄다.
   🔴 «.in-navy .in-kick-en» (0,3,2) 은 «p.in-kick[data-tone] .in-kick-en» (0,4,3) 에 진다.
      실제로 주황 COMPARE 가 남색 위에 남아 대비 3.21 이었다(캡처로 확인).
      같은 무기(속성 선택자)를 들고 «나중에» 선언해 이긴다. */
html body.page-id-2889 .in-navy p.in-kick[data-tone] .in-kick-no,
html body.page-id-2889 .in-navy p.in-kick .in-kick-no{ background:#c6f24e; color:#111111 }
html body.page-id-2889 .in-navy p.in-kick[data-tone] .in-kick-en,
html body.page-id-2889 .in-navy p.in-kick .in-kick-en{ color:#c6f24e }
html body.page-id-2889 .in-navy p.in-kick .in-kick-ko{ color:rgba(255,255,255,.84) }
html body.page-id-2889 .in-navy p.in-kick .in-kick-ko::before{ background:rgba(255,255,255,.52) }

/* ── 구역 뒤에 깔리는 영문 워터마크 ──
   🚨 넘침을 만들면 안 되므로 구역에 overflow:hidden 을 함께 건다.
   🚨 내용이 워터마크 «위» 에 오도록 안쪽 그릇을 z-index 1 로 띄운다. */
html body.page-id-2889 .in-sec[data-wm]{
  position:relative;
  overflow:hidden;
}
html body.page-id-2889 .in-sec[data-wm]::before{
  content:attr(data-wm);
  position:absolute;
  right:-1.5%;
  top:6px;
  z-index:0;
  font-family:"Montserrat","Pretendard",sans-serif;
  font-size:clamp(56px, 9.4vw, 156px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.035em;
  white-space:nowrap;
  color:#111827;
  opacity:.042;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
html body.page-id-2889 .in-navy[data-wm]::before{ color:#ffffff; opacity:.075 }
html body.page-id-2889 .in-sec[data-wm] > .in-wide,
html body.page-id-2889 .in-sec[data-wm] > .in-read,
html body.page-id-2889 .in-sec[data-wm] > .in-inner{
  position:relative;
  z-index:1;
}
@media (max-width:820px){
  /* 🔴 앞 판은 여기서 .in-kick-ko 까지 감췄다. 그러면 폰에서 「제작 사례」 「제작 비용」 같은
        국문 길잡이가 통째로 사라지고 영문 한 단어만 남는다. 40~60대 담당자가 첫 접점을
        폰으로 여는 지면에서 그건 «취향» 이 아니라 결함이다. 워터마크만 감춘다.
        재 보니 가장 긴 「15 CHECKLIST 견적 비교」도 375px 안에 한 줄로 들어가고,
        넘치면 flex-wrap 이 받는다(각 조각이 한 덩이 span 이라 문장이 안 쪼개진다). */
  html body.page-id-2889 .in-sec[data-wm]::before{ display:none }
}
@media print{
  html body.page-id-2889 .in-sec[data-wm]::before{ display:none }
  html body.page-id-2889 .in-sec .in-kick-no{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}


/* ══ v1.7.0 · 기술 사양 — 알약 세로카드 계단 ══════════════════════════════
   사장님 : 「애니스포츠에 html5·css 기술이 들어가 있으니 비슷한 테크닉을 적용해라.
             그래야 기술력이 있어 보인다」 「마우스로 컨텐츠 온 하면 기술력을 보여주게」

   website.co.kr 「제작기술」 구역 실측 문법
   · 위아래가 둥근 «알약» 세로 카드. 카드마다 색이 다르다.
   · 열마다 위아래로 어긋나게 놓아 계단이 진다.
   · 흰 선 아이콘 · 흰 글자.

   🚨 그쪽 청록(#17A2A2)에 흰 글자를 얹으면 대비가 3.1 이라 우리는 못 쓴다.
      우리 색은 셋 다 «흰 글자 4.5:1 이상» 이 되는 값으로 계산해 골랐다
      (#164FB8 5.42 · #0A5E7A 5.34 · #12664A 5.06). 그라디언트는 «더 어두운» 쪽으로만 간다. */

/* 🔴 3열로 두니 «완전한 원» 이 되어 website.co.kr 의 세로 알약 문법이 안 산다(캡처 확인).
      여섯을 한 줄로 세워 세로로 긴 스타디움을 만든다. */
html body.page-id-2889 #in-spec .in-grid3.in-pills{
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:16px;
  margin-bottom:56px;      /* 계단으로 내려간 칸만큼 아래 여백을 벌어 준다 */
}
@media (max-width:1100px){
  html body.page-id-2889 #in-spec .in-grid3.in-pills{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px }
}
@media (max-width:620px){
  html body.page-id-2889 #in-spec .in-grid3.in-pills{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
html body.page-id-2889 #in-spec .in-stat.in-pill{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:330px;
  padding:38px 12px 34px;
  border:0;
  border-radius:999px;
  text-align:center;
  color:#fff;
  background-color:#4a4a4a;
  background-image:linear-gradient(178deg, #4a4a4a 0%, #3a3a3a 62%, #2d2d2d 100%);
  box-shadow:0 20px 46px rgba(33,33,33,.20);
}
html body.page-id-2889 #in-spec .in-stat.in-pill:nth-child(3n+2){
  background-color:#4e4e4e;
  background-image:linear-gradient(178deg, #4e4e4e 0%, #374151 62%, #333333 100%);
  box-shadow:0 20px 46px rgba(6,50,66,.22);
}
html body.page-id-2889 #in-spec .in-stat.in-pill:nth-child(3n+3){
  background-color:#12664a;
  background-image:linear-gradient(178deg, #12664a 0%, #0e523b 62%, #0a4030 100%);
  box-shadow:0 20px 46px rgba(8,52,38,.22);
}
/* 계단 — 가운데 열이 한 단 내려간다 */
html body.page-id-2889 #in-spec .in-stat.in-pill:nth-child(even){ transform:translate3d(0,38px,0) }

html body.page-id-2889 #in-spec .in-stat.in-pill .in-icb{
  width:52px;
  height:52px;
  flex:0 0 52px;
  margin:0 0 6px;
  border-radius:50%;
  background:#c6f24e;
  color:#111111;
}
html body.page-id-2889 #in-spec .in-stat.in-pill .in-icb .in-ic{ width:23px; height:23px; flex:0 0 23px }
/* 라벨이 값보다 «위» 에 오게 순서를 바꾼다 (마크업은 값 → 라벨 순서다) */
html body.page-id-2889 #in-spec .in-stat.in-pill h3{
  order:-1;
  margin:0;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.02em;
  color:rgba(255,255,255,.82);
}
html body.page-id-2889 #in-spec .in-stat.in-pill p.in-stat-num{
  margin:0;
  font-size:clamp(16px, 1.35vw, 21px);
  font-weight:800;
  letter-spacing:-.03em;
  color:#fff;
  line-height:1.34;
  word-break:keep-all;
}

@media (hover:hover) and (pointer:fine){
  html body.page-id-2889 #in-spec .in-stat.in-pill{
    transition:transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s ease;
  }
  html body.page-id-2889 #in-spec .in-stat.in-pill:hover{
    transform:translate3d(0,-8px,0);
    box-shadow:0 30px 60px rgba(33,33,33,.30);
  }
  html body.page-id-2889 #in-spec .in-stat.in-pill:nth-child(even):hover{ transform:translate3d(0,30px,0) }
}

/* 좁아지면 계단을 없앤다 — 두 칸씩 내려오면 어긋남이 «어색한 빈칸» 이 된다 */
@media (max-width:1100px){
  html body.page-id-2889 #in-spec .in-stat.in-pill:nth-child(even){ transform:none }
  html body.page-id-2889 #in-spec .in-grid3.in-pills{ margin-bottom:0 }
  html body.page-id-2889 #in-spec .in-stat.in-pill{ min-height:232px; border-radius:26px; padding:28px 20px }
}
@media (prefers-reduced-motion:reduce){
  html body.page-id-2889 #in-spec .in-stat.in-pill{ transition:none }
}
@media print{
  html body.page-id-2889 #in-spec .in-stat.in-pill{
    transform:none;
    border-radius:14px;
    min-height:0;
    background:#fff;
    color:#111827;
    border:1px solid #dedede;
    box-shadow:none;
  }
  html body.page-id-2889 #in-spec .in-stat.in-pill h3{ color:#5f5f5f }
  html body.page-id-2889 #in-spec .in-stat.in-pill p.in-stat-num{ color:#111827 }
}


/* ══ v1.7.0 · 오른쪽 상시 문의 탭 ═══════════════════════════════════════
   website.co.kr 은 화면 오른쪽에 «견적문의 · 오시는길 · SEO체커» 세 탭을 늘 붙여 둔다.
   긴 지면에서는 아래로 내려갈수록 문의 버튼이 멀어지는데, 이 탭이 그 거리를 없앤다.

   🔴 처음에 .in-rail 이라 지었더니 제작과정 구역이 이미 쓰던 이름과 부딪쳐
      그 격자가 통째로 position:fixed 가 됐다(1600x1314 로 화면을 덮었다).
      새 이름을 지을 때는 «본문에 그 이름이 이미 있는지» 부터 찾는다.

   🚨 화면에 늘 떠 있는 물건이라 조심할 것 —
      · 1280px 미만에서는 본문을 가리므로 감춘다(폰·태블릿에는 없다).
      · 머리글이 z-index 40 이라 그보다 위(50)에 두되, 세로 가운데라 겹치지 않는다.
      · 인쇄에는 남기지 않는다. */
html body.page-id-2889 .in-qtab{
  display:none;
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:50;
  flex-direction:column;
  gap:2px;
}
html body.page-id-2889 .in-qtab .in-qtab-a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  padding:20px 0;
  border-radius:10px 0 0 10px;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1;
  writing-mode:vertical-rl;
  transition:width .18s ease, background .18s ease;
}
html body.page-id-2889 .in-qtab .in-qtab-a span{ writing-mode:vertical-rl }
html body.page-id-2889 .in-qtab .in-qtab-1{ background:#141414; color:#fff }
html body.page-id-2889 .in-qtab .in-qtab-2{ background:#c6f24e; color:#111111 }
html body.page-id-2889 .in-qtab .in-qtab-3{ background:#111111; color:#fff; font-family:"Montserrat","Pretendard",sans-serif }
@media (hover:hover) and (pointer:fine){
  html body.page-id-2889 .in-qtab .in-qtab-1:hover{ background:#0f0f0f; width:52px }
  html body.page-id-2889 .in-qtab .in-qtab-2:hover{ background:#d5f76f; width:52px }
  html body.page-id-2889 .in-qtab .in-qtab-3:hover{ background:#0b0b0b; width:52px }
}
@media (min-width:1280px){
  html body.page-id-2889 .in-qtab{ display:flex }
}
@media (prefers-reduced-motion:reduce){
  html body.page-id-2889 .in-qtab .in-qtab-a{ transition:none }
}
@media print{
  html body.page-id-2889 .in-qtab{ display:none }
}


/* ══ v1.7.1 · 화면 캡처에 «브라우저 테두리» ═══════════════════════════════
   사장님 : 「애니스포츠는 나름 꾸밈있게 제작했으니까 제작의뢰가 들어온다」

   그쪽이 파는 방식은 «실제로 만든 화면을 크게 보여 주는 것» 이다.
   우리 여섯 장은 진짜 돌아가는 화면인데 그냥 «그림» 으로 보인다.
   위에 브라우저 막대를 하나 씌우면 그 순간 «돌아가는 사이트» 로 읽힌다.
   폰 목업에 이미 홈버튼 자국(.in-phone-body::after)을 넣어 두었으니 결이 같다.

   🚨 .in-card 는 세로 flex 라 ::before 가 «첫 칸» 이 된다 — 사진 위에 그대로 얹힌다.
   🚨 점 세 개는 그림(radial-gradient)이라 인쇄에서 사라진다 ⇒ 인쇄에서는 막대를 지운다. */
html body.page-id-2889 #in-screens .in-card.in-card-shot::before{
  content:"";
  display:block;
  flex:0 0 28px;
  height:28px;
  background:
    radial-gradient(circle 4px at 16px 14px, #e0685f 97%, rgba(255,255,255,0) 100%),
    radial-gradient(circle 4px at 32px 14px, #ddab3c 97%, rgba(255,255,255,0) 100%),
    radial-gradient(circle 4px at 48px 14px, #58ae63 97%, rgba(255,255,255,0) 100%),
    linear-gradient(#f5f5f5, #ededed);
  border-bottom:1px solid #e3e3e3;
}
/* 막대가 생겼으니 사진 위쪽 테두리는 필요 없다 */
html body.page-id-2889 #in-screens .in-card img.in-cardshot{ border-top:0 }

@media print{
  html body.page-id-2889 #in-screens .in-card.in-card-shot::before{ display:none }
}

/* 관리자 화면 석 장도 같은 테두리를 쓴다.
   본문 실측 : .in-fig-wide 3개 = .in-shot 3장 «일대일» 이라 :has() 없이 바로 걸어도 안전하다. */
html body.page-id-2889 .in-sec .in-fig.in-fig-wide{ position:relative }
html body.page-id-2889 .in-sec .in-fig.in-fig-wide::before{
  content:"";
  display:block;
  height:30px;
  border:1px solid #dcdcdc;
  border-bottom:0;
  border-radius:12px 12px 0 0;
  background:
    radial-gradient(circle 4px at 17px 15px, #e0685f 97%, rgba(255,255,255,0) 100%),
    radial-gradient(circle 4px at 33px 15px, #ddab3c 97%, rgba(255,255,255,0) 100%),
    radial-gradient(circle 4px at 49px 15px, #58ae63 97%, rgba(255,255,255,0) 100%),
    linear-gradient(#f5f5f5, #ededed);
}
html body.page-id-2889 .in-sec img.in-img.in-shot{
  border-top:0;
  border-radius:0 0 12px 12px;
}
@media print{
  html body.page-id-2889 .in-sec .in-fig.in-fig-wide::before{ display:none }
  html body.page-id-2889 .in-sec img.in-img.in-shot{ border-top:1px solid #b5b5b5; border-radius:12px }
}


/* ══ v1.7.2 · 막간 선언 띠 «RUN IN KOREA» ═════════════════════════════════
   website.co.kr 문법 ② — 거대 원 + 초대형 영문 + 배경 워터마크.
   그쪽은 라임 원을 «채우고» 그 위로 흰 글자를 지나가게 한다. 대비가 1.4 라 우리는 그대로 못 쓴다.
   ⇒ 원은 «테두리만» 남기고 속을 비운다. 안쪽이 남색 그대로라 흰 글자 대비 8.6 이 유지된다.
      꾸밈은 살고 글은 읽힌다 — 이 한 수가 기술을 아는 곳과 아닌 곳을 가른다.

   애니스포츠 문법 ② 도 여기에 함께 넣었다 — 점 마커 + 키워드만 색이 다른 두 줄 카피.

   🔴 처음에 .in-band 라 지었더니 «15가지 전부 — 추가 결제 0원»(#in-bonus) 과
      «정찰제 금액 띠»(#in-price) 두 강조 띠가 이미 그 이름을 쓰고 있어
      그 두 문장이 96px 패딩의 거대한 남색 덩어리가 되어 버렸다.
      대비·면 검사는 통과했다 — «눈으로 보기 전에는 완료가 아니다» 가 여기서 또 증명됐다.
      ⇒ .in-decl 로 개명. **새 클래스 이름은 본문을 먼저 찾고 짓는다(두 번째 사고).**

   🚨 구역(section)이 아니라 띠(div)다. 목차·번호·워터마크 규칙에 안 걸린다.
   🚨 무한 애니메이션 0. 원은 그냥 서 있다. */

html body.page-id-2889 .in-page .in-decl{
  position:relative;
  margin:0 0 44px;
  padding:104px 44px 96px;
  border-radius:20px;
  overflow:hidden;
  text-align:center;
  background-color:#0f0f0f;
  background-image:
    radial-gradient(900px 520px at 84% 110%, rgba(198,242,78,.10), rgba(198,242,78,0) 60%),
    linear-gradient(168deg, #3b3b3b 0%, #0f0f0f 52%, #121212 100%);
}
html body.page-id-2889 .in-page .in-decl-in{
  position:relative;
  z-index:2;
  width:min(1000px, 92%);
  margin:0 auto;
}

/* ── 거대 원 두 겹 : 속을 비우고 «선» 으로만 그린다 ── */
html body.page-id-2889 .in-page .in-decl-ring,
html body.page-id-2889 .in-page .in-decl-ring2{
  position:absolute;
  left:50%;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
html body.page-id-2889 .in-page .in-decl-ring{
  top:-42px;
  width:340px;
  height:340px;
  margin-left:-170px;
  border:3px solid rgba(198,242,78,.72);
}
html body.page-id-2889 .in-page .in-decl-ring2{
  top:6px;
  width:246px;
  height:246px;
  margin-left:-123px;
  border:1px solid rgba(255,255,255,.26);
}

html body.page-id-2889 .in-page .in-decl-en{
  position:relative;
  z-index:1;
  margin:0 0 10px;
  font-family:"Montserrat","Pretendard",-apple-system,sans-serif;
  font-size:clamp(38px, 7.4vw, 104px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.045em;
  color:#c6f24e;
  text-shadow:0 2px 26px rgba(12,12,12,.34);
}
html body.page-id-2889 .in-page .in-decl-ko{
  position:relative;
  z-index:1;
  margin:0 0 26px;
  color:#fff;
  font-size:clamp(24px, 3.3vw, 42px);
  font-weight:800;
  line-height:1.34;
  letter-spacing:-.03em;
  word-break:keep-all;
  text-shadow:0 2px 18px rgba(12,12,12,.36);
}

/* ── 점 마커 + 키워드만 색이 다른 두 줄 (애니스포츠 문법) ── */
html body.page-id-2889 .in-page .in-decl-pts{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
  margin:0 auto;
  padding:0;
  max-width:760px;
  list-style:none;
  text-align:left;
}
html body.page-id-2889 .in-page .in-decl-pts li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:12px;
  margin:0;
  padding:0;
}
html body.page-id-2889 .in-page .in-decl-pts li::before{
  content:"";
  width:9px;
  height:9px;
  margin-top:9px;
  border-radius:50%;
  background:#c6f24e;
}
html body.page-id-2889 .in-page .in-decl-pts li span{
  font-size:clamp(15px, 1.4vw, 18px);
  line-height:1.72;
  letter-spacing:-.018em;
  color:rgba(255,255,255,.92);
  word-break:keep-all;
}
html body.page-id-2889 .in-page .in-decl-pts li b{
  color:#c6f24e;
  font-weight:800;
}
html body.page-id-2889 .in-page .in-decl-note{
  position:relative;
  z-index:1;
  margin:26px 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:rgba(255,255,255,.72);
  letter-spacing:-.01em;
}

@media (max-width:820px){
  html body.page-id-2889 .in-page .in-decl{ padding:76px 24px 68px; border-radius:16px }
  html body.page-id-2889 .in-page .in-decl-ring{ top:-28px; width:230px; height:230px; margin-left:-115px }
  html body.page-id-2889 .in-page .in-decl-ring2{ top:2px; width:168px; height:168px; margin-left:-84px }
  html body.page-id-2889 .in-page .in-decl-pts{ text-align:left }
}
@media (max-width:480px){
  html body.page-id-2889 .in-page .in-decl{ padding:62px 18px 56px }
  /* 🔴 375px 에서 원 선이 「981개를 6개 언어로」 줄을 가로질렀다(캡처 확인).
        위로 올리고 줄여 «표제까지만» 걸치게 한다. */
  html body.page-id-2889 .in-page .in-decl-ring{ top:-48px; width:158px; height:158px; margin-left:-79px; border-width:2px }
  html body.page-id-2889 .in-page .in-decl-ring2{ display:none }
}
@media print{
  html body.page-id-2889 .in-page .in-decl{
    background:#fff;
    border:1px solid #b5b5b5;
    padding:28px 24px;
  }
  html body.page-id-2889 .in-page .in-decl-ring,
  html body.page-id-2889 .in-page .in-decl-ring2{ display:none }
  html body.page-id-2889 .in-page .in-decl-en{ color:#111827; font-size:34px }
  html body.page-id-2889 .in-page .in-decl-ko{ color:#111827; font-size:22px; text-shadow:none }
  html body.page-id-2889 .in-page .in-decl-pts li span{ color:#374151 }
  html body.page-id-2889 .in-page .in-decl-pts li b{ color:#111827 }
  html body.page-id-2889 .in-page .in-decl-pts li::before{
    background:#141414;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  html body.page-id-2889 .in-page .in-decl-note{ color:#5f5f5f }
}


/* ══ v1.7.2 · 강조 밴드 제목 (.in-h3-band) ════════════════════════════════
   애니스포츠 문법 ① — 초록(#2CB400) 기울인 밴드에 흰 글자 제목.
   지면에서 «여기부터 다른 이야기» 를 알리는 가장 강한 표시다.
   우리 것으로 옮기되 그대로 베끼지 않는다 —
   · 색은 우리 남색(#0B3AA0). 흰 글자 대비 8.6.
   · 기울기는 그쪽(-2도 남짓)보다 얕은 «왼쪽 모서리만» 으로 절제한다.
   · 남색 구역에서는 라임(#c6f24e) 바탕 + 남색 글자(대비 7.53) 로 뒤집는다.
   🚨 밴드는 이미 쓰이는 곳 넷(#in-screens · #in-choose 등)에만 붙는다. 남발하면 강조가 아니다. */

/* 🔴 밴드의 «색» 은 오직 이 규칙에서만 정한다.
      앞서 #in-screens · #in-doc · #in-lang · #in-choose 가 «아이디» 로 color 를 박아 두어
      (1,2,3) 이 (0,3,3) 을 이겨 라임 위에 흰 글자(대비 1.30)가 나왔다 — 같은 함정 세 번째다.
      그 네 규칙에서 color 선언을 걷어냈다. 크기·여백만 아이디가 갖는다. */
/* 🚨 CSS 를 정규식으로 고칠 때 «선택자» 에 앞 주석이 딸려 온다.
      「#in- 가 선택자에 있으면 color 를 지운다」 는 스크립트가 위 주석의 #in-screens 를 보고
      이 규칙의 color:#fff 까지 지웠다. 규칙을 훑을 때는 주석을 먼저 걷어내고 자른다. */
html body.page-id-2889 .in-sec h3.in-h3-band{
  position:relative;
  display:inline-block;
  padding:9px 20px 10px 18px;
  color:#fff;
  background:#141414;
  border-radius:3px 12px 12px 3px;
  box-shadow:0 10px 26px rgba(55,55,55,.22);
}
/* 왼쪽에 라임 기둥 하나 — 애니스포츠의 «기울인 끝» 을 우리 식으로 바꾼 것 */
html body.page-id-2889 .in-sec h3.in-h3-band::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
  border-radius:3px 0 0 3px;
  background:#c6f24e;
}
/* 남색 구역에서는 뒤집는다 */
html body.page-id-2889 .in-navy h3.in-h3-band{
  background:#c6f24e;
  color:#111111;
  box-shadow:0 10px 26px rgba(12,12,12,.30);
}
html body.page-id-2889 .in-navy h3.in-h3-band::before{ background:#111111 }

@media (max-width:520px){
  html body.page-id-2889 .in-sec h3.in-h3-band{ padding:8px 14px 9px 14px; font-size:18px }
}
@media print{
  html body.page-id-2889 .in-sec h3.in-h3-band{
    background:#fff;
    color:#111827;
    border:1px solid #c9c9c9;
    box-shadow:none;
  }
  html body.page-id-2889 .in-sec h3.in-h3-band::before{ display:none }
}

/* ══ v1.7.2 · 화면 캡처 «첫 장» 을 크게 ═══════════════════════════════════
   애니스포츠가 파는 방식은 «실제로 만든 화면을 크게 보여 주는 것» 이다.
   여섯 장을 모두 같은 크기로 늘어놓으면 «목록» 으로 읽힌다.
   첫 장을 전폭으로 키워 «이런 걸 만듭니다» 를 먼저 보여 주고, 나머지를 목록으로 둔다.
   🚨 전폭이 되면 3:2 비율에서 세로가 과하게 커진다 — 첫 장만 16:9 로 낮춘다. */
@media (min-width:900px){
  html body.page-id-2889 #in-screens .in-grid2s > .in-card.in-card-shot:first-child{
    grid-column:1 / -1;
  }
  /* 🔴 사장님 : 「캡처 보면 글자가 잘리는 경우가 있으니 확인해서 안 잘리게 해라」
        16:9 로 자르면 원본 3:2 의 «아래 4분의 1» 이 잘려 나간다 — 대회 정보 표 아랫줄이 사라진다.
        첫 장은 크게 보여 주는 자리이므로 «자르지 않고» 통째로 보인다. */
  html body.page-id-2889 #in-screens .in-grid2s > .in-card.in-card-shot:first-child img.in-cardshot{
    aspect-ratio:auto;
    height:auto;
    object-fit:contain;
    object-position:50% 0;
    background:#f0f0f1;
  }
  html body.page-id-2889 #in-screens .in-grid2s > .in-card.in-card-shot:first-child .in-hd h3{
    font-size:22px;
  }
  html body.page-id-2889 #in-screens .in-grid2s > .in-card.in-card-shot:first-child p{
    font-size:15.5px;
    max-width:900px;
  }
}


/* ══ v1.7.3 · 견적 비교 서식 (#in-versus) ═════════════════════════════════
   왼쪽 칸을 «담당자가 받은 견적을 적는 자리» 로 비웠다.
   실증할 수 없는 옛 대조 값 일곱을 지운 자리라, 빈 줄 하나로 «적으시라» 는 뜻만 남긴다.
   경쟁사를 깎지 않으면서 비교의 «판» 은 우리가 깐다 — 표시광고법에도 안전하고 수주에도 낫다.
   🚨 인쇄에서도 이 줄이 남아야 손으로 적을 수 있다 — print 에서 지우지 않는다. */
html body.page-id-2889 .in-sec .in-vs2-blank{
  display:block;
  width:100%;
  max-width:220px;
  height:1.15em;
  border-bottom:1px dashed #b1b1b1;
}
@media (max-width:820px){
  html body.page-id-2889 .in-sec .in-vs2-blank{ max-width:160px; margin-left:auto }
}
@media print{
  html body.page-id-2889 .in-sec .in-vs2-blank{ border-bottom:1px dashed #6b7280 }
}


/* ══ v1.7.3 · 인쇄에서 백지가 되던 자리 ═══════════════════════════════════
   🔴 남색 면 + 흰 글자로 그린 다섯 덩이가 @media print 규칙에 하나도 안 들어가 있었다.
      브라우저는 기본으로 배경을 안 찍으므로 «흰 종이에 흰 글자» 가 되어 통째로 사라진다.
      본문이 「이 점검표는 그대로 인쇄해 결재 서류에 붙이셔도 됩니다」 라고 말하는데
      정작 점검 «결과» 와 «값 띠» 가 안 찍혔다. 같은 선택자를 다시 써서 이긴다(!important 불필요). */
@media print{
  html body.page-id-2889 #in-selfcheck .in-sc-out{ background:#fff; color:#111827; border:1px solid #b5b5b5 }
  html body.page-id-2889 #in-selfcheck .in-sc-meter{ display:none }
  html body.page-id-2889 #in-selfcheck p.in-sc-count{ color:#5f5f5f }
  html body.page-id-2889 #in-selfcheck p.in-sc-count strong,
  html body.page-id-2889 #in-selfcheck h3.in-sc-title{ color:#111827 }
  html body.page-id-2889 #in-selfcheck p.in-sc-body{ color:#374151 }
  html body.page-id-2889 #in-selfcheck .in-sc-out a.in-btn{ background:#fff; color:#111827; border:1px solid #c9c9c9 }

  html body.page-id-2889 .in-sec p.in-band{ background:#fff; color:#111827; border:1px solid #b5b5b5 }
  html body.page-id-2889 .in-sec p.in-band i.in-ic-s,
  html body.page-id-2889 .in-sec p.in-band .in-band-num{ color:#111827 }

  html body.page-id-2889 #in-path .in-free{ background:#fff; border:1px solid #b5b5b5; box-shadow:none }
  html body.page-id-2889 #in-path p.in-free-head{ color:#111827 }
  html body.page-id-2889 #in-path p.in-free-head .in-icb{ background:#fff; color:#111827; border:1px solid #c9c9c9 }
  html body.page-id-2889 #in-path .in-free-txt p{ color:#374151 }
  html body.page-id-2889 #in-path .in-free-txt p strong{ color:#111827 }
  html body.page-id-2889 #in-path p.in-free-sub{ color:#5f5f5f }
  html body.page-id-2889 #in-path a.in-btn.in-free-btn{ background:#fff; color:#111827; border:1px solid #c9c9c9 }

  html body.page-id-2889 .in-tint .in-step-who[data-who="idc"],
  html body.page-id-2889 .in-soft .in-step-who[data-who="idc"],
  html body.page-id-2889 .in-white .in-step-who[data-who="idc"]{
    background:#fff; color:#111827; border:1px solid #c9c9c9;
  }
  html body.page-id-2889 .in-tint .in-flow-step .in-icb,
  html body.page-id-2889 .in-soft .in-flow-step .in-icb,
  html body.page-id-2889 .in-white .in-flow-step .in-icb{
    background:#fff; color:#111827; border:1px solid #c9c9c9;
  }

  /* 🔴 접힌 FAQ 를 실제로 펼친다. .in-faq-a{display:block} 은 무동작이다 —
        닫힌 <details> 의 내용은 브라우저가 ::details-content 로 감추므로
        라이트DOM 자식에 display 를 줘도 안 열린다. 스크립트(riin-print)가 open 을 켜고
        이 규칙이 표시 층을 연다. 둘 다 있어야 답 열넷이 종이에 찍힌다. */
  html body.page-id-2889 #in-faq details::details-content{
    content-visibility:visible;
    block-size:auto;
  }
  html body.page-id-2889 #in-faq .in-faq-q::after{ display:none }
}

/* ══ v1.7.3 · 초점(키보드) 규칙이 닿지 않던 두 곳 ═════════════════════════
   목차(.in-anchor)와 오른쪽 상시 탭(.in-qtab)은 .in-sec 이 아니라 기존 초점 규칙 밖이었다.
   🚨 오른쪽 탭은 position:fixed 라 테두리가 «지나가는 구역 배경» 위에 그려진다.
      남색 구역을 지날 때 남색 테두리는 안 보이므로 테두리를 «자기 면 안쪽» 으로 넣는다. */
html body.page-id-2889 .in-anchor a:focus-visible{
  outline:3px solid #c9c9c9;
  outline-offset:3px;
  border-radius:8px;
}
html body.page-id-2889 .in-qtab .in-qtab-1:focus-visible,
html body.page-id-2889 .in-qtab .in-qtab-3:focus-visible{
  outline:3px solid #fff;
  outline-offset:-3px;
}
html body.page-id-2889 .in-qtab .in-qtab-2:focus-visible{
  outline:3px solid #111111;
  outline-offset:-3px;
}


/* ══ v1.7.3 · 대문 자동 넘김 «멈춤» 단추 ═══════════════════════════════════
   WCAG 2.2.2 — 5초 넘게 저절로 움직이는 것에는 멈출 길이 있어야 한다.
   지금까지는 «마우스를 얹는 것» 뿐이라 폰과 키보드에는 멈출 방법이 없었다.
   🚨 새 SVG 를 만들지 않는다. 두 줄(멈춤)과 세모(다시)를 테두리로 그린다. */
html body.page-id-2889 #in-hero.in-heros .in-hprog-stop .in-hprog-ico{
  display:block;
  width:11px;
  height:12px;
  border-left:3px solid currentColor;
  border-right:3px solid currentColor;
}
html body.page-id-2889 #in-hero.in-heros .in-hprog-stop.is-held .in-hprog-ico{
  width:0;
  height:0;
  margin-left:3px;
  border-left:10px solid currentColor;
  border-right:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
html body.page-id-2889 #in-hero.in-heros .in-hprog-stop[aria-pressed="true"]{
  background:#c6f24e;
  color:#111111;
  border-color:#c6f24e;
}
@media print{
  html body.page-id-2889 #in-hero.in-heros .in-hprog-stop{ display:none }
}


/* ══════════════════════════════════════════════════════════════════════
   v1.8.0 · 격을 올린다 — 블루 오버레이를 블랙 오버레이로
   ══════════════════════════════════════════════════════════════════════
   사장님 : 「메인 상단 슬라이더 배경이 블루 오버레이인데 퀄리티가 떨어진다.
             블랙 오버레이로 연하게 해라. 그게 고급스럽고 퀄리티 있어 보인다.
             하단의 파란 배경들도 블랙 오버레이 연하게 적용해라.」

   왜 검정이 나은가 (실측 근거)
   · 남색 장막은 사진의 «색» 을 통째로 물들여 어떤 사진을 써도 같은 그림이 된다.
     검정은 명도만 낮추므로 사진의 색이 살아 있다 — 사진값이 그대로 화면에 남는다.
   · 흰 글자 대비도 오른다. 남색(#0B3AA0) 위 흰 글자 8.6 → 잉크 검정(#141414) 위 15.9.
   🚨 배경색과 배경그림을 «따로» 선언한다. 한 줄로 쓰면 background-color 가 투명이 되어
      사진이 못 뜨는 순간 흰 바탕에 흰 글자가 된다(v1.7.0 에서 겪은 사고). */

/* ── 1. 큰 면의 바탕색 : 남색 → 잉크 검정 ── */
html body.page-id-2889 .in-navy{
  background-color:#141414;
  background-image:
    radial-gradient(1200px 620px at 12% -10%, rgba(255,255,255,.07), rgba(255,255,255,0) 60%),
    linear-gradient(178deg, #1c1c1c 0%, #141414 46%, #0d0d0d 100%);
  color:#fff;
}
/* 「무엇을 사시나」 는 결정하는 자리 — 한 단 더 깊게 */
html body.page-id-2889 .in-navy.in-navy2{
  background-color:#0f0f0f;
  background-image:
    radial-gradient(1100px 560px at 86% -12%, rgba(198,242,78,.07), rgba(198,242,78,0) 62%),
    linear-gradient(182deg, #171717 0%, #0f0f0f 48%, #090909 100%);
}

/* ── 2. 대문 사진 넉 장 : 남색 장막 → 연한 검정 ──
   왼쪽(글이 앉는 쪽)만 조금 진하게, 오른쪽은 사진이 보이게 연하게 둔다.
   흰 글자 대비는 왼쪽 구간에서 넉넉히 넘긴다. */
html body.page-id-2889 #in-hero.in-heros .in-hs-bg::after{
  background:
    linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.56) 44%, rgba(0,0,0,.34) 100%),
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 36%, rgba(0,0,0,.42) 100%);
}
/* 마침 구역(24)의 사진도 같은 결로 */
html body.page-id-2889 .in-sec .in-hero-bg::after{
  background:
    linear-gradient(100deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.58) 46%, rgba(0,0,0,.38) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.40) 100%);
}

/* ── 3. 색으로만 채우던 파란 면 → 사진 + 연한 검정 ──
   🚨 background-image 로 «장막 → 사진» 순서로 겹쳐 쓴다. 앞에 쓴 것이 위에 온다.
   🚨 배경색은 따로 두어 사진이 못 떠도 글이 읽히게 한다.
   🚨 사진은 이미 지면에서 쓰는 것만 재활용한다(새로 올리지 않는다 — 무게가 늘지 않는다). */

/* 「대회 등록은 무료」 띠 (04) */
html body.page-id-2889 #in-path .in-free{
  background-color:#141414;
  background-image:
    linear-gradient(96deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.62) 52%, rgba(0,0,0,.46) 100%),
    url("https://runin.kr/wp-content/uploads/2026/09/kr-registration.jpg");
  background-size:auto, cover;
  background-position:center, 50% 34%;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 44px rgba(0,0,0,.24);
}
/* 자가진단 결과 상자 (05) */
html body.page-id-2889 #in-selfcheck .in-sc-out{
  background-color:#141414;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 54%, rgba(0,0,0,.50) 100%),
    url("https://runin.kr/wp-content/uploads/2026/09/kr-design-review.jpg");
  background-size:auto, cover;
  background-position:center, 50% 40%;
}
/* 강조 띠 두 개 — 「15가지…」 · 「정찰제 금액…」 */
html body.page-id-2889 .in-sec p.in-band{
  background-color:#141414;
  background-image:
    linear-gradient(96deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.60) 60%, rgba(0,0,0,.48) 100%),
    url("https://runin.kr/wp-content/uploads/2026/09/kr-finish.jpg");
  background-size:auto, cover;
  background-position:center, 50% 46%;
  border:1px solid rgba(255,255,255,.14);
}
/* 선언 띠 RUN IN KOREA */
html body.page-id-2889 .in-page .in-decl{
  background-color:#101010;
  background-image:
    radial-gradient(900px 520px at 84% 110%, rgba(198,242,78,.08), rgba(198,242,78,0) 60%),
    linear-gradient(168deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.66) 52%, rgba(0,0,0,.56) 100%),
    url("https://runin.kr/wp-content/uploads/2026/09/kr-marathon-seoul.jpg");
  background-size:auto, auto, cover;
  background-position:center, center, 50% 30%;
}
/* 남색 구역 안 카드 : 음각을 검정 결에 맞춘다 */
html body.page-id-2889 .in-navy .in-step,
html body.page-id-2889 .in-navy .in-stat,
html body.page-id-2889 .in-navy .in-flow-step,
html body.page-id-2889 .in-navy .in-two-col{
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.24);
}

/* ── 4. 아이콘 : 네모 배경을 없애고 아이콘 자체를 키운다 ──
   사장님 : 「아이콘 배경 없애고 그만큼 아이콘 크게」
   🚨 «면» 검사는 배경이 있는 요소만 잰다. 배경을 없애면 검사 대상에서 빠지고,
      대신 아이콘 «글자색» 대비가 기준이 된다 — 그래서 색을 한 단 진하게 잡는다. */
html body.page-id-2889 .in-sec .in-icb,
html body.page-id-2889 .in-navy .in-icb,
html body.page-id-2889 #in-choose .in-two-head .in-icb,
html body.page-id-2889 #in-choose .in-tile .in-icb,
html body.page-id-2889 #in-choose .in-two-col--us .in-two-head .in-icb{
  width:auto;
  height:auto;
  min-width:0;
  flex:0 0 auto;
  padding:0;
  margin-right:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#111827;
}
html body.page-id-2889 .in-sec .in-icb .in-ic{
  width:30px;
  height:30px;
  flex:0 0 30px;
}
html body.page-id-2889 .in-navy .in-icb,
html body.page-id-2889 .in-navy .in-icb .in-ic{ color:#c6f24e }
/* 큰 자리(대문 배지 · 알약)는 원 채움을 그대로 둔다 — 거기서는 채움이 «장식» 이다 */
html body.page-id-2889 #in-hero.in-heros .in-hb-ic,
html body.page-id-2889 #in-spec .in-stat.in-pill .in-icb{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  background:#c6f24e;
  color:#0f0f0f;
}
html body.page-id-2889 #in-hero.in-heros .in-hb-ic .in-ic{ width:20px; height:20px; flex:0 0 20px }
html body.page-id-2889 #in-spec .in-stat.in-pill .in-icb{ width:52px; height:52px; flex:0 0 52px }
html body.page-id-2889 #in-spec .in-stat.in-pill .in-icb .in-ic{ width:24px; height:24px; flex:0 0 24px }

/* ── 5. 테두리 : 파랑기를 걷어내고 «연한 검정» 으로 ──
   사장님 : 「테두리 선 색이 얕긴 한데 파란색 대신 연한 검정색으로」
   흰 바탕 대비를 계산해서 골랐다 — #c9c9c9 = 1.65 · #b3b3b3 = 2.20 (기준 1.50 이상). */
html body.page-id-2889 .in-sec .in-card,
html body.page-id-2889 .in-sec .in-tile,
html body.page-id-2889 .in-sec .in-step,
html body.page-id-2889 .in-sec .in-stat,
html body.page-id-2889 .in-sec .in-plan,
html body.page-id-2889 .in-sec a.in-folio-card,
html body.page-id-2889 #in-lang .in-lang-card,
html body.page-id-2889 #in-doc .in-doc-card{
  border-color:#c9c9c9;
}
html body.page-id-2889 .in-tint .in-card,
html body.page-id-2889 .in-tint .in-tile,
html body.page-id-2889 .in-tint .in-step,
html body.page-id-2889 .in-tint .in-stat,
html body.page-id-2889 .in-tint .in-plan{
  border-color:#bcbcbc;
}
html body.page-id-2889 .in-sec .in-plan.in-recommended{ border-color:#8a8a8a }
html body.page-id-2889 .in-sec img.in-img.in-shot,
html body.page-id-2889 .in-sec .in-fig.in-fig-wide::before,
html body.page-id-2889 #in-screens .in-card.in-card-shot::before{ border-color:#cdcdcd }
html body.page-id-2889 .in-sec .in-vs2{ border-color:#c9c9c9 }
html body.page-id-2889 .in-sec .in-vs2-blank{ border-bottom-color:#9a9a9a }
html body.page-id-2889 .in-sec .in-quote{ border-left-color:#3a3a3a }
html body.page-id-2889 .in-sec .in-rail .in-step::before{ background:#3a3a3a }

/* ── 6. 파란 «본문 글자» 를 검정으로 ──
   사장님 : 「파란색 글자들 전부 검정색으로」
   🚨 «누르는 것»(단추·링크·전화)은 파랑을 남긴다. 색이 곧 «여기를 누르라» 는 표시다.
      읽는 글자만 검정으로 바꾼다. */
html body.page-id-2889 .in-sec .in-h3,
html body.page-id-2889 .in-sec h3,
html body.page-id-2889 .in-sec .in-stat-num,
html body.page-id-2889 .in-sec .in-kpi-num,
html body.page-id-2889 .in-sec .in-step-no,
html body.page-id-2889 .in-sec .in-price-amt,
html body.page-id-2889 .in-sec .in-vs2-new .in-vs2-val,
html body.page-id-2889 .in-sec .in-cmp-head,
html body.page-id-2889 .in-sec p.in-own-flag,
html body.page-id-2889 .in-sec .in-key,
html body.page-id-2889 #in-lang .in-split h3,
html body.page-id-2889 .in-sec .in-vs2-key .in-ic{
  color:#111827;
}
/* 🚨 아이콘 판(.in-icb)에 색을 주어도 «안쪽 아이콘» 이 자기 색을 들고 있으면 따라오지 않는다.
      배경 원을 없앤 뒤 검정 띠 위 검정 아이콘(대비 1.04)이 두 곳 생겼다 — 2026-09-07.
      아이콘은 mask + background:currentColor 이므로 판의 색을 «물려받게» 두면 언제나 맞는다. */
html body.page-id-2889 .in-sec .in-icb .in-ic{ color:inherit }
html body.page-id-2889 .in-sec .in-ic-s{ color:#111827 }
html body.page-id-2889 .in-navy .in-h3,
html body.page-id-2889 .in-navy h3,
html body.page-id-2889 .in-navy .in-stat-num,
html body.page-id-2889 .in-navy .in-step-no,
html body.page-id-2889 .in-navy .in-ic-s{ color:#fff }
html body.page-id-2889 .in-navy .in-icb .in-ic{ color:#c6f24e }
/* 구역 머리표 : 영문은 성격색을 남기고 번호는 잉크로 — 파랑 남발을 줄인다 */
html body.page-id-2889 .in-sec .in-kick-no{ background:#111827; color:#fff }
html body.page-id-2889 .in-sec p.in-kick[data-tone="tech"]  .in-kick-no,
html body.page-id-2889 .in-sec p.in-kick[data-tone="money"] .in-kick-no,
html body.page-id-2889 .in-sec p.in-kick[data-tone="ops"]   .in-kick-no{ background:#111827 }
html body.page-id-2889 .in-sec[data-wm]::before{ color:#111827; opacity:.038 }
html body.page-id-2889 .in-navy[data-wm]::before{ color:#ffffff; opacity:.065 }

/* 🔴 방금 넣은 «번호 배지 검정» 규칙이 (0,5,3) 으로 남색 구역 규칙과 «동점» 이 되어
      나중 선언인 쪽이 이겨 «검정 배경 + 잉크 글자»(대비 1.05)가 나왔다.
      어두운 구역 규칙을 맨 뒤에 다시 세운다 — 같은 무기를 들고 나중에 선언하는 것이 유일한 길이다. */
html body.page-id-2889 .in-navy p.in-kick[data-tone] .in-kick-no,
html body.page-id-2889 .in-navy p.in-kick .in-kick-no{ background:#c6f24e; color:#0f0f0f }
html body.page-id-2889 .in-navy p.in-kick[data-tone] .in-kick-en,
html body.page-id-2889 .in-navy p.in-kick .in-kick-en{ color:#c6f24e }

/* 🔴 연청 바탕(#e9f0fb) 에서는 #c9c9c9 테두리가 1.44 로 기준(1.50)에 못 미친다.
      그 바탕에 놓이는 두 카드만 한 단 진하게 — #bcbcbc 는 연청 위 1.66 이다. */
html body.page-id-2889 .in-tint #in-lang .in-lang-card,
html body.page-id-2889 #in-lang .in-lang-card,
html body.page-id-2889 #in-doc .in-doc-card{ border-color:#bcbcbc }

/* ── 7. 대문 안에 남아 있던 «남색» 잔재를 검정 결로 ──
   사장님 : 「비슷한 패턴들 전부 수정해」
   장막을 검정으로 바꾸면 그 위에 얹힌 남색 물건들이 «따로 노는 색» 이 된다. 결을 맞춘다. */
html body.page-id-2889 #in-hero.in-heros .in-hcap-en{
  background:rgba(12,12,12,.72);
  border:2px solid #c6f24e;
  color:#c6f24e;
  box-shadow:0 16px 40px rgba(0,0,0,.44);
}
html body.page-id-2889 #in-hero.in-heros .in-hbadges li{
  background:rgba(10,10,10,.52);
  border:1px solid rgba(255,255,255,.26);
}
html body.page-id-2889 #in-hero.in-heros .in-hbadges{ border-top-color:rgba(255,255,255,.20) }
html body.page-id-2889 #in-hero.in-heros .in-hprog-btn{
  border-color:rgba(255,255,255,.46);
  background:rgba(0,0,0,.28);
}
html body.page-id-2889 #in-hero.in-heros .in-heyebrow{
  background:rgba(0,0,0,.38);
  border-color:rgba(255,255,255,.38);
}
/* 오른쪽 상시 탭 — 남색 두 칸을 잉크로 */
html body.page-id-2889 .in-qtab .in-qtab-1{ background:#141414; color:#fff }
html body.page-id-2889 .in-qtab .in-qtab-3{ background:#0a0a0a; color:#fff }
@media (hover:hover) and (pointer:fine){
  html body.page-id-2889 .in-qtab .in-qtab-1:hover{ background:#000; width:52px }
  html body.page-id-2889 .in-qtab .in-qtab-3:hover{ background:#000; width:52px }
}
/* 선언 띠 원 두 겹 */
html body.page-id-2889 .in-page .in-decl-ring{ border-color:rgba(198,242,78,.66) }
html body.page-id-2889 .in-page .in-decl-ring2{ border-color:rgba(255,255,255,.20) }
/* 알약 계단 — 파랑·청록·초록을 잉크 세 단으로. 흰 글자 대비 12 이상 */
html body.page-id-2889 #in-spec .in-stat.in-pill{
  background-color:#1a1a1a;
  background-image:linear-gradient(178deg, #232323 0%, #171717 62%, #101010 100%);
  box-shadow:0 20px 46px rgba(0,0,0,.26);
}
html body.page-id-2889 #in-spec .in-stat.in-pill:nth-child(3n+2){
  background-color:#161616;
  background-image:linear-gradient(178deg, #1f1f1f 0%, #141414 62%, #0d0d0d 100%);
}
html body.page-id-2889 #in-spec .in-stat.in-pill:nth-child(3n+3){
  background-color:#121212;
  background-image:linear-gradient(178deg, #1b1b1b 0%, #111 62%, #0a0a0a 100%);
}
/* 강조 밴드 제목 — 남색 → 잉크 */
html body.page-id-2889 .in-sec h3.in-h3-band{
  background:#141414;
  color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.20);
}
html body.page-id-2889 .in-navy h3.in-h3-band{ background:#c6f24e; color:#0f0f0f }
/* 「누가 하나」 표시 · 흐름 칸 아이콘 */
html body.page-id-2889 .in-tint .in-step-who[data-who="idc"],
html body.page-id-2889 .in-soft .in-step-who[data-who="idc"],
html body.page-id-2889 .in-white .in-step-who[data-who="idc"]{
  background:#141414; color:#fff; border-color:#141414;
}
html body.page-id-2889 .in-tint .in-step-who[data-who="customer"],
html body.page-id-2889 .in-soft .in-step-who[data-who="customer"],
html body.page-id-2889 .in-white .in-step-who[data-who="customer"]{
  background:#fff; color:#111827; border-color:#9a9a9a;
}
html body.page-id-2889 .in-tint .in-flow-step .in-icb,
html body.page-id-2889 .in-soft .in-flow-step .in-icb,
html body.page-id-2889 .in-white .in-flow-step .in-icb{ background:none; color:#111827 }
html body.page-id-2889 .in-tint .in-flow-step strong,
html body.page-id-2889 .in-soft .in-flow-step strong,
html body.page-id-2889 .in-white .in-flow-step strong{ color:#111827 }
/* 자가진단 체크 · 알약 · 진행막대의 남은 파랑 */
html body.page-id-2889 #in-selfcheck .in-chk-in:checked ~ .in-chk-box{ background:#141414; border-color:#141414 }
html body.page-id-2889 #in-selfcheck .in-sc-out a.in-btn{ background:#c6f24e; color:#0f0f0f; border-color:#c6f24e }
html body.page-id-2889 #in-path a.in-btn.in-free-btn{ background:#c6f24e; color:#0f0f0f; border-color:#c6f24e }
html body.page-id-2889 #in-path p.in-free-head .in-icb{ background:none; color:#c6f24e }

/* ── 8. 화면 캡처는 «글자가 잘리지 않는» 것이 첫째다 ──
   사장님 : 「캡처 보면 글자가 잘리는 경우가 있으니 확인해서 글자 안 잘리게 해」
   여덟 장은 원본이 3:2 이고 칸도 3:2 라 잘리지 않는다. 그래도 «혹시» 를 막아 둔다 —
   원본 비율이 달라지더라도 잘리지 않게 contain 으로 두고 바탕을 깔아 빈자리를 메운다. */
html body.page-id-2889 #in-screens .in-card img.in-cardshot{
  object-fit:contain;
  background:#f0f0f1;
}

/* 🔴 다국어 «증거» 캡처 석 장 — 첫 장 칸이 1140/620(1.84) 인데 원본은 4:3(1.33) 이라
      cover 로 위아래가 잘려 나갔다. 화면 캡처에서 잘린 글자는 증거가 아니다.
      셋 다 자르지 않고 통째로 보인다(사장님 「글자 안 잘리게 해」). */
html body.page-id-2889 #in-lang .in-lang-card img.in-lang-shot{
  aspect-ratio:auto;
  height:auto;
  object-fit:contain;
  object-position:50% 0;
  background:#f0f0f1;
}
html body.page-id-2889 #in-lang .in-langband > .in-lang-card:first-child img.in-lang-shot{
  aspect-ratio:auto;
}
/* 폰 목업도 같은 결로 — 390x844 원본을 그대로 */
html body.page-id-2889 #in-screens .in-phone img.in-phone-shot{
  object-fit:contain;
  background:#fff;
}

/* 🔴 사진 띠의 오른쪽 장막이 너무 연해 인물이 글자를 밀어냈다(라이브 캡처 확인).
      «글이 앉는 왼쪽» 은 진하게, 오른쪽도 사진이 살 만큼만 남기고 한 단 올린다. */
html body.page-id-2889 #in-path .in-free{
  background-image:
    linear-gradient(96deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.76) 48%, rgba(0,0,0,.62) 100%),
    url("https://runin.kr/wp-content/uploads/2026/09/kr-registration.jpg");
}
html body.page-id-2889 #in-selfcheck .in-sc-out{
  background-image:
    linear-gradient(100deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.78) 54%, rgba(0,0,0,.66) 100%),
    url("https://runin.kr/wp-content/uploads/2026/09/kr-design-review.jpg");
}
html body.page-id-2889 .in-sec p.in-band{
  background-image:
    linear-gradient(96deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.74) 58%, rgba(0,0,0,.64) 100%),
    url("https://runin.kr/wp-content/uploads/2026/09/kr-finish.jpg");
}
html body.page-id-2889 .in-page .in-decl{
  background-image:
    radial-gradient(900px 520px at 84% 110%, rgba(198,242,78,.08), rgba(198,242,78,0) 60%),
    linear-gradient(168deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.76) 52%, rgba(0,0,0,.70) 100%),
    url("https://runin.kr/wp-content/uploads/2026/09/kr-marathon-seoul.jpg");
}

/* ── 플랜 비교 격자 : 여섯 열 → 세 열 ──
   사장님 지시 : 구성을 세 가지로 줄인다(금액은 본문이 정본).
   🚨 열 수는 CSS 가 정한다. 마크업만 줄이면 빈 칸이 생기고 줄이 어긋난다.
      좁은 화면 규칙(120px repeat(6,…))도 «함께» 고쳐야 한다. */
html body.page-id-2889 .in-sec .in-cmp.in-cmp3{
  grid-template-columns:170px repeat(3, minmax(0,1fr));
}
@media (max-width:1100px){
  html body.page-id-2889 .in-sec .in-cmp.in-cmp3{ grid-template-columns:130px repeat(3, minmax(0,1fr)) }
}


/* ══ v1.8.0 · 견적 요청 폼 (#in-qf) ═══════════════════════════════════════
   사장님 : 「하단에 견적품을 만들어 회사명 담당 전화 이메일 대회 홈페이지 제작명 등등」
   🚨 표(<table>)를 쓰지 않는다 — 폰에서 깨진다. 격자로 짠다.
   🚨 «덫» 칸은 display:none 이 아니라 화면 밖으로 밀어 둔다. display:none 은 일부 봇이 알아본다.
   🚨 입력칸 대비 : 글자 #111827 on #fff = 17.7 · 안내글 #6b7280 on #fff = 5.6 · 테두리 #a8a8a8 = 2.4 */
html body.page-id-2889 #in-qf .in-qf{ margin:30px 0 0 }
html body.page-id-2889 #in-qf .in-qf-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px 22px;
}
html body.page-id-2889 #in-qf .in-qf-row{ display:flex; flex-direction:column; gap:8px; min-width:0 }
html body.page-id-2889 #in-qf .in-qf-row-wide{ grid-column:1 / -1 }
html body.page-id-2889 #in-qf .in-qf-label{
  font-size:14.5px;
  font-weight:700;
  letter-spacing:-.015em;
  color:#111827;
}
html body.page-id-2889 #in-qf .in-qf-req{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  background:#141414;
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  vertical-align:1px;
}
html body.page-id-2889 #in-qf .in-qf-in{
  width:100%;
  padding:13px 14px;
  border:1px solid #a8a8a8;
  border-radius:10px;
  background:#fff;
  font-family:inherit;
  font-size:15px;
  line-height:1.5;
  color:#111827;
  transition:border-color .16s ease, box-shadow .16s ease;
}
html body.page-id-2889 #in-qf .in-qf-in::placeholder{ color:#6b7280 }
html body.page-id-2889 #in-qf .in-qf-in:focus{
  outline:none;
  border-color:#141414;
  box-shadow:0 0 0 3px rgba(20,20,20,.14);
}
html body.page-id-2889 #in-qf .in-qf-in:focus-visible{ outline:3px solid #141414; outline-offset:2px }
html body.page-id-2889 #in-qf textarea.in-qf-area{ resize:vertical; min-height:132px }
html body.page-id-2889 #in-qf select.in-qf-in{ appearance:auto }

/* 덫 — 사람에게는 안 보이고 낭독기에도 안 읽힌다 */
html body.page-id-2889 #in-qf .in-qf-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

html body.page-id-2889 #in-qf .in-qf-agree{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:12px;
  margin:22px 0 0;
  padding:18px 20px;
  border:1px solid #c9c9c9;
  border-radius:12px;
  background:#fff;
  font-size:14px;
  line-height:1.75;
  color:#374151;
  cursor:pointer;
}
html body.page-id-2889 #in-qf .in-qf-agree input{
  width:20px;
  height:20px;
  margin-top:3px;
  accent-color:#141414;
}
html body.page-id-2889 #in-qf .in-qf-agree strong{ color:#111827 }
html body.page-id-2889 #in-qf .in-qf-agree b{ color:#111827; font-weight:700 }

html body.page-id-2889 #in-qf .in-qf-send{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 20px;
  margin:22px 0 0;
}
html body.page-id-2889 #in-qf button.in-qf-btn{
  padding:15px 34px;
  font-size:16px;
  cursor:pointer;
  border:1px solid #141414;
  background:#141414;
  color:#fff;
}
html body.page-id-2889 #in-qf button.in-qf-btn[disabled]{ opacity:.55; cursor:default }
html body.page-id-2889 #in-qf .in-qf-msg{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  font-weight:700;
  color:#111827;
}
html body.page-id-2889 #in-qf .in-qf-msg.is-bad{ color:#8a1f1f }
html body.page-id-2889 #in-qf .in-qf-in.is-bad{ border-color:#8a1f1f; box-shadow:0 0 0 3px rgba(138,31,31,.12) }

@media (hover:hover) and (pointer:fine){
  html body.page-id-2889 #in-qf button.in-qf-btn:hover{ background:#000; border-color:#000 }
}
@media (max-width:760px){
  html body.page-id-2889 #in-qf .in-qf-grid{ grid-template-columns:minmax(0,1fr); gap:16px }
}
@media print{
  /* 종이에서는 «적어 넣는 서식» 이 된다 — 칸을 비워 두고 단추만 숨긴다 */
  html body.page-id-2889 #in-qf .in-qf-send,
  html body.page-id-2889 #in-qf .in-qf-hp{ display:none }
  html body.page-id-2889 #in-qf .in-qf-in{ border:1px solid #6b7280; min-height:34px }
  html body.page-id-2889 #in-qf .in-qf-req{
    background:#fff; color:#111827; border:1px solid #111827;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}


/* ══ v1.8.0 · 남은 파랑을 마저 걷어낸다 ═══════════════════════════════════
   사장님 : 「파란색 글자들 전부 검정색으로」 「비슷한 패턴들 전부 수정해」
   단추까지 검정으로 가면 «강조» 를 맡을 색이 사라지므로, 그 자리를 라임이 받는다.
   지면 전체가 검정 + 라임 두 색으로 정리되어 오히려 «고급» 쪽으로 간다.
   대비는 전부 계산했다 — 검정 #141414 위 흰 글자 15.9 · 라임 #c6f24e 위 잉크 글자 13.0. */

/* 단추 */
html body.page-id-2889 .in-sec a.in-btn,
html body.page-id-2889 #in-qf button.in-qf-btn{
  background:#141414;
  border-color:#141414;
  color:#fff;
}
html body.page-id-2889 .in-sec a.in-btn:hover{ background:#000; border-color:#000; color:#fff }
html body.page-id-2889 .in-sec a.in-btn-ghost{ color:#111827; border-color:#a8a8a8 }
html body.page-id-2889 .in-sec a.in-btn-ghost:hover{ background:#f2f2f2; border-color:#141414; color:#111827 }
html body.page-id-2889 .in-navy a.in-btn{ background:#c6f24e; border-color:#c6f24e; color:#0f0f0f }
html body.page-id-2889 .in-navy a.in-btn:hover{ background:#d5f76f; border-color:#d5f76f; color:#0f0f0f }
html body.page-id-2889 .in-navy a.in-btn-ghost{ color:#fff; border-color:rgba(255,255,255,.52) }
html body.page-id-2889 .in-navy a.in-btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff }

/* 금액 · 체크표 · 배지 · 칩 */
html body.page-id-2889 .in-sec .in-price-amt,
html body.page-id-2889 .in-sec .in-price-amt.in-price-xl{ color:#111827 }
html body.page-id-2889 .in-sec .in-check li::before,
html body.page-id-2889 .in-sec .in-check .in-ic,
html body.page-id-2889 .in-sec .in-check .in-ic-s{ color:#141414 }
/* 🚨 바로 위 규칙(0,4,1)이 «어두운 구역» 까지 먹어 검정 카드 위에 검정 아이콘이 얹혔다
      (#in-choose 왼쪽 카드, 2026-09-07 — 글자는 흰데 체크 아이콘만 안 보였다).
      아이콘은 mask + background:currentColor 라 «부모 글자색» 을 따르면 늘 맞는다.
      같은 특이도로 뒤에 선언해 어두운 구역만 되돌린다. */
html body.page-id-2889 .in-navy .in-check li::before,
html body.page-id-2889 .in-navy .in-check .in-ic,
html body.page-id-2889 .in-navy .in-check .in-ic-s{ color:inherit }
html body.page-id-2889 .in-sec .in-badge{ background:#141414; color:#fff }
html body.page-id-2889 .in-sec .in-chip{ background:#f0f0f0; color:#111827 }
html body.page-id-2889 .in-sec p.in-own-flag{ background:#f0f0f0; color:#111827 }
html body.page-id-2889 .in-sec .in-num-corner{ background:#f0f0f0; color:#111827 }
html body.page-id-2889 #in-screens .in-card .in-shotchip{ background:#f0f0f0; color:#111827 }
html body.page-id-2889 .in-sec .in-cmp-hl{ background:#f6f6f6 }
html body.page-id-2889 .in-anchor-tel{ border-color:#a8a8a8; color:#111827 }
html body.page-id-2889 .in-anchor-tel:hover{ background:#f2f2f2; border-color:#141414 }
html body.page-id-2889 .in-anchor .in-anchor-list a.is-here{ background:#f0f0f0; color:#111827 }
html body.page-id-2889 .in-sec .in-talk .in-talk-i{ border-color:#141414 }
html body.page-id-2889 #in-choose .in-two-col--us .in-two-head .in-icb,
html body.page-id-2889 #in-choose .in-tile .in-icb{ background:none; color:#111827 }
html body.page-id-2889 #in-choose .in-two-col--us p.in-two-verdict{ background:#f0f0f0; color:#111827 }
html body.page-id-2889 #in-choose .in-two-col--us .in-ic-s{ color:#141414 }
html body.page-id-2889 #in-choose .in-two-col--us p.in-two-price strong{ color:#111827 }
html body.page-id-2889 #in-choose .in-two-col--us h3.in-h3{ color:#111827 }
/* 링크는 «누르는 것» 이므로 밑줄로 구분한다 — 색을 뺀 만큼 다른 표시가 필요하다 */
html body.page-id-2889 .in-sec p a:not(.in-btn):not(.in-btn-ghost),
html body.page-id-2889 .in-sec li a:not(.in-btn):not(.in-btn-ghost),
html body.page-id-2889 #in-qf .in-qf-agree a{
  color:#111827;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
html body.page-id-2889 .in-navy p a:not(.in-btn):not(.in-btn-ghost),
html body.page-id-2889 .in-navy li a:not(.in-btn):not(.in-btn-ghost){ color:#fff }
/* 자가진단 · 진행막대의 남은 파랑 */
html body.page-id-2889 .in-prog-bar > span{ background:#141414 }
html body.page-id-2889 #in-selfcheck .in-sc-meter > span{ background:#c6f24e }

/* 🔴 «② 대회 홈페이지» 제목이 아직 파랗다 —
      기존 «#in-choose .in-two-col--us .in-two-head h3.in-h3»(1,4,4) 가
      내가 넣은 «#in-choose .in-two-col--us h3.in-h3»(1,3,4) 를 이겼다.
      같은 자리를 같은 깊이로 짚어 맨 뒤에서 이긴다. */
html body.page-id-2889 #in-choose .in-two-col--us .in-two-head h3.in-h3{ color:#111827 }
html body.page-id-2889 #in-choose .in-two-col--us p.in-two-tag{ color:#5f5f5f }
html body.page-id-2889 #in-choose .in-two-col--us p.in-two-price span{ color:#6b7280 }
html body.page-id-2889 #in-choose .in-two-col--us .in-check li strong{ color:#111827 }

/* 🔴 아이콘 배지의 배경을 없앴는데 두 자리(#in-company 인용 · #in-cta)만 남아
      «면 색 = 바탕 색»(대비 1.00)으로 검사에 걸렸다. 눈에는 안 보이지만 규칙을 어긴 자국이다.
      배경을 확실히 지운다 — 남겨 두면 다음 사람이 «왜 여기만 다르지» 하고 헤맨다. */
html body.page-id-2889 #in-company .in-quote .in-icb,
html body.page-id-2889 #in-cta .in-icb,
html body.page-id-2889 .in-navy .in-quote .in-icb{
  background:none;
  border:0;
  box-shadow:none;
}
html body.page-id-2889 #in-cta .in-icb,
html body.page-id-2889 #in-cta .in-icb .in-ic{ color:#c6f24e }

/* ── 목차의 «견적 요청» 은 다른 항목과 달라야 한다 ──
   나머지는 «읽으러 가는» 링크지만 이것은 «행동하러 가는» 링크다.
   목차가 열다섯으로 늘었으니 색으로 하나만 도드라지게 한다. */
html body.page-id-2889 .in-anchor .in-anchor-list a.in-anchor-go{
  background:#141414;
  color:#fff;
  font-weight:800;
}
html body.page-id-2889 .in-anchor .in-anchor-list a.in-anchor-go .in-ic{ color:#c6f24e }
@media (hover:hover) and (pointer:fine){
  html body.page-id-2889 .in-anchor .in-anchor-list a.in-anchor-go:hover{ background:#000; color:#fff }
}


/* ══ 쉼표 띠(.in-pause) ═══════════════════════════════════════════
   🔴 02 「필요한 화면」(4,719px) 과 03 「회차 관리」(3,426px) 가 8,145px —
      1440px 화면으로 5.6화면 — 을 «화면 캡처만» 으로 이어가 읽는 사람이 지친다.
      구역을 줄이면 «보여 주는 힘» 이 깎이므로, 줄이지 않고 사이에 숨 쉬는 한 줄을 둔다.
      두 구역의 «성격 차이» 를 말해 주는 다리다 — 만드는 것 → 해마다 쓰는 것. */
html body.page-id-2889 .in-pause{
  display:flex; align-items:center; justify-content:center; gap:22px;
  flex-wrap:wrap;
  max-width:1200px; margin:0 auto; padding:34px 24px 38px;
}
html body.page-id-2889 .in-pause p{
  margin:0; font-size:17px; line-height:1.6; color:#5f5f5f; letter-spacing:-.01em;
}
html body.page-id-2889 .in-pause p b{ font-weight:800; color:#111827 }
html body.page-id-2889 .in-pause .in-pause-l{ text-align:right }
html body.page-id-2889 .in-pause .in-pause-r{ text-align:left }
/* 가운데 가름선 — 두 문장이 «마주 보게» 한다 */
html body.page-id-2889 .in-pause .in-pause-l::after{
  content:""; display:inline-block; vertical-align:middle;
  width:1px; height:18px; margin-left:22px; background:#c9c9c9;
}
@media (max-width:700px){
  html body.page-id-2889 .in-pause{ gap:8px; padding:26px 18px 30px }
  html body.page-id-2889 .in-pause p{ font-size:15.5px; text-align:center }
  html body.page-id-2889 .in-pause .in-pause-l,
  html body.page-id-2889 .in-pause .in-pause-r{ text-align:center; flex:0 0 100% }
  html body.page-id-2889 .in-pause .in-pause-l::after{ display:none }
}


/* ── 마침 구역 장막 : 폰에서는 더 고르게 ────────────────────────────
   🔴 PC 기준으로 가운데(45%)를 열어 두었더니, 폰에서는 구역이 세로로 길어져
      그 «열린 구간» 이 화면 절반이 된다. 글자 뒤로 사진이 그대로 올라와 어수선했다.
      대비 검사는 통과하지만 읽기가 편하지 않다 — 폰에서는 고르게 눌러 준다. */
@media (max-width:700px){
  html body.page-id-2889 #in-cta .in-hero-bg::after{
    background:
      linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.64) 50%, rgba(0,0,0,.76) 100%);
  }
}


/* ---------- 41. 플랜 비교표 «3플랜(4열)» 셈 바로잡기 (2026-09-08) ----------

   무슨 일이었나
     사장님 지시로 여섯 플랜을 «스탠다드·프리미엄·기획형» 셋으로 줄이면서
     열 수를 CSS 로 3열(.in-cmp3)로 바꿨는데, «폰에서 카드로 접는» 규칙은
     옛 7열(구분+6플랜) 셈인 nth-child(7n+…) 그대로 남았다.
     한 줄이 4칸(구분+3플랜)이 되었으므로 7n 은 전부 엉뚱한 칸을 짚는다.

   그래서 폰에서 실제로 이렇게 보였다 (2026-09-08 실측, 900px 이하 전부)
     · 7n+1{display:none} → 구분 말고도 «기획형 가격» ·
       «프리미엄 저작권» · «스탠다드 다국어» 세 칸이 통째로 사라졌다.
     · 7n+2…7n+7 의 order 가 어긋나 값이 다른 플랜 카드 밑으로 들어갔다.
       스탠다드 카드에는 가격이 아예 없고, 기획형 카드에
       다른 두 구성의 금액이 같이 들어가 있었다.
     · 라벨 칸(.in-cmp-label)이 7n+1 을 빗나가 «값 없는 라벨 줄»로 남았다.
   🚨 값을 파는 지면에서 «금액이 안 보이거나 남의 칸에 붙는» 사고다.

   왜 이렇게 고치나
     옛 7n 규칙은 건드리지 않는다. 여섯 플랜 표가 다시 필요할 수 있고,
     지우면 되돌리기가 어렵다. 대신 .in-cmp3 를 하나 더 얹어 특이도로 이긴다
     (.in-cmp3 가 붙어 (0,5,3) 이라 옛 규칙 (0,4,3) 을 항상 이긴다).
     되돌리려면 이 절만 지우면 된다.

   4열에서 몇 번째가 무엇인가 — 머리줄 포함 7줄 × 4칸 = 28칸
     4n+1  구분 · 라벨 6개      (1 5 9 13 17 21 25)
     4n+2  스탠다드             (2 6 10 14 18 22 26)
     4n+3  프리미엄 (.in-cmp-hl) (3 7 11 15 19 23 27)
     4n+4  기획형               (4 8 12 16 20 24 28)
   ------------------------------------------------------------------ */

/* ── PC : 세로줄·줄무늬·모서리를 4열 셈으로 ── */
html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div{ border-left:1px solid #f1f1f1 }
html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(4n+1){ border-left:0 }
html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div.in-cmp-head{ border-left-color:rgba(255,255,255,.25) }

/* 줄무늬는 «가격·저작권·다국어» 줄(2·4·6번째 줄)에만. 옛 셈은 대각선으로 번졌다. */
html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(n+5):nth-child(-n+8),
html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(n+13):nth-child(-n+16),
html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(n+21):nth-child(-n+24){ background:#f7f9fc }
/* 추천 열(프리미엄)은 줄무늬보다 뒤에 둬야 색이 살아남는다. */
html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div.in-cmp-hl:nth-child(n){ background:#f3f3f3 }

html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(7){ border-top-right-radius:0 }   /* 옛 7열 잔재 */
html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(4){ border-top-right-radius:15px }
html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(25){ border-bottom-left-radius:15px }

/* ── 폰 : 플랜별 카드로 접기 ── */
@media (max-width:900px){
  html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(4n+1){ display:none }            /* 라벨 열은 감춘다 — 값 칸이 data-label 을 스스로 찍는다 */
  html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(4n+2){ display:flex; order:1 }   /* 스탠다드 */
  html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(4n+3){ display:flex; order:2 }   /* 프리미엄 */
  html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(4n+4){ display:flex; order:3 }   /* 기획형 */
  /* 머리 칸은 블록이라야 카드 뚜껑이 된다 — 위 display:flex 를 되돌린다 */
  html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div.in-cmp-head:nth-child(n){ display:block }
  html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div.in-cmp-head.in-cmp-label:nth-child(n){ display:none }   /* 「구분」 */
  html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div:nth-child(n+25){ border-radius:0 0 12px 12px }          /* 카드 아랫단 */
  html body.page-id-2889 .in-sec .in-cmp.in-cmp3 > div.in-cmp-hl:nth-child(n){ background:#fff }
}