/* 커넥스2 Insights — 정보 콘텐츠 전용 어휘 `.ins-*`
 *
 * styles.css(공개 페이지 공유) 위에 얹어 읽는 **추가** 파일이다. styles.css 의 규칙을 고치지 않으므로
 * HOME·소방·누수·building-care 화면은 이 파일로부터 영향을 받지 않는다(building-care.css 와 같은 분리 방식).
 * 디자인 원칙(DESIGN_RULES.md §2·§4): border-radius·box-shadow·gradient·이미지 placeholder 금지,
 * 선은 1px(--line/--line-strong), 강조는 2px navy 루선과 타이포 무게로만 표현한다.
 * 이미지가 필요한 자리는 `.ins-image-slot` 이 아니라 HTML 주석 `<!-- IMAGE_REQUIRED: id -->` 만 남긴다.
 */

/* ── 공유 헤더 위에 얹는 현재 위치 표시(styles.css 의 .nav 는 3개 페이지와 공용이라 여기서만 확장) ── */
.nav a[aria-current="page"]{color:var(--navy);border-bottom:1px solid var(--line-strong);padding-bottom:2px}

/* ── 글 머리 ─────────────────────────────────────────── */
.ins-article-head{padding:26px 0 30px;border-bottom:1px solid var(--line)}
.ins-article-head h1{margin:0;font-size:clamp(26px,3.6vw,40px);line-height:1.3;letter-spacing:-.03em;color:var(--navy);font-weight:700;max-width:21em}
.ins-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;font-size:11.5px;color:var(--muted);letter-spacing:.01em}
.ins-meta span{white-space:nowrap}
.ins-meta .ins-cat{color:var(--navy);font-weight:700}
.ins-answer{margin:22px 0 0;padding:18px 20px;background:var(--soft);border-left:2px solid var(--navy);max-width:760px}
.ins-answer p{margin:0 0 12px;font-size:15px;line-height:1.75;color:#3d4759}
.ins-answer p:last-child{margin-bottom:0}

/* ── 본문 골격(글 안의 섹션) ─────────────────────────── */
.ins-body{padding:8px 0 4px}
.ins-section{padding:44px 0;border-bottom:1px solid var(--line)}
.ins-section:last-of-type{border-bottom:0}
.ins-grid{display:grid;grid-template-columns:238px minmax(0,1fr);gap:60px;align-items:start}
.ins-rail h2{font-size:21px;line-height:1.4;letter-spacing:-.025em;color:var(--navy);margin:0}
.ins-rail .rail-note{margin-top:12px}
.ins-copy{max-width:700px}
.ins-copy h2{font-size:21px;line-height:1.4;color:var(--navy);margin:0 0 16px}
.ins-copy h3{font-size:16px;line-height:1.5;color:var(--ink);margin:26px 0 8px}
.ins-copy p{margin:0 0 14px;font-size:15px;line-height:1.78;color:#465063}
.ins-copy p:last-child{margin-bottom:0}
.ins-copy strong{color:var(--ink)}
.ins-copy ul.plain>li,.ins-flat ul.plain>li{position:relative;padding:5px 0 5px 16px;font-size:14.5px;line-height:1.65;color:#4a5468}
.ins-copy ul.plain>li::before,.ins-flat ul.plain>li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:1.5px;background:var(--navy)}
.ins-copy ol.steps,.ins-flat ol.steps{counter-reset:insstep;border-top:2px solid var(--navy);padding-top:6px}
.ins-copy ol.steps>li,.ins-flat ol.steps>li{counter-increment:insstep;position:relative;padding:14px 0 14px 40px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.7;color:#465063}
.ins-copy ol.steps>li:last-child,.ins-flat ol.steps>li:last-child{border-bottom:0}
.ins-copy ol.steps>li::before,.ins-flat ol.steps>li::before{content:counter(insstep,decimal-leading-zero);position:absolute;left:0;top:15px;font-size:11.5px;font-weight:700;color:var(--navy);letter-spacing:.02em}
.ins-copy ol.steps b,.ins-flat ol.steps b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}

/* ── 인라인 강조·주석 박스 ───────────────────────────── */
.ins-note{margin:22px 0 0;padding:16px 18px;border:1px solid var(--line-strong);background:#fff;max-width:700px}
.ins-note-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--navy);margin-bottom:7px}
.ins-note p{margin:0;font-size:14px;line-height:1.7;color:#4a5468}
.ins-pull{margin:26px 0 0;padding-left:14px;border-left:2px solid var(--navy);font-size:16.5px;line-height:1.55;font-weight:700;color:var(--navy);max-width:700px}

/* ── flat 섹션(레일 없이 제목이 본문 위) — 긴급·단문형 글 ── */
.ins-flat .ins-flat-inner{max-width:760px}
.ins-flat h2{font-size:21px;line-height:1.4;color:var(--navy);margin:0 0 16px}
.ins-flat p{margin:0 0 14px;font-size:15px;line-height:1.78;color:#465063}
.ins-flat ul.plain>li,.ins-flat ol.steps>li,.ins-flat .ins-note,.ins-flat .ins-pull{max-width:none}

/* ── 판단 기준 표(비교 질문용. 행 머리를 첫 열에 둔다) ── */
.ins-table{width:100%;border-collapse:collapse;margin-top:22px}
.ins-table caption{text-align:left;font-size:11.5px;color:var(--muted);padding-bottom:9px;letter-spacing:.02em}
.ins-table th,.ins-table td{text-align:left;vertical-align:top;padding:13px 16px 13px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.65}
.ins-table thead th{font-size:12px;color:var(--navy);border-bottom:2px solid var(--navy);padding-bottom:9px;font-weight:700}
.ins-table tbody th{width:150px;color:var(--ink);font-weight:700}
.ins-table td{color:#515c6f}
.ins-table td:last-child,.ins-table th:last-child{padding-right:0}

/* ── 체크리스트(2열, 강 항목 라벨) ───────────────────── */
.ins-check{border-top:1px solid var(--line-strong);margin-top:22px}
.ins-check>li{display:grid;grid-template-columns:26px 1fr;gap:0 12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.65;color:#4a5468}
.ins-check>li::before{content:"□";font-size:14px;color:var(--navy);line-height:1.5}
.ins-check>li b{color:var(--ink);font-weight:700}

/* ── 출처·최종 확인일 ───────────────────────────────── */
.ins-sources{padding:40px 0;border-top:2px solid var(--navy)}
.ins-sources h2{font-size:13px;letter-spacing:.02em;color:var(--navy);margin:0 0 10px}
.ins-sources p{margin:0 0 8px;font-size:11.5px;line-height:1.7;color:var(--muted)}
.ins-sources a{text-decoration:underline;text-underline-offset:3px;color:#4a5468}
.ins-sources time{font-variant-numeric:tabular-nums}

/* ── 관련 글 · 서비스 연결(글마다 형태를 다르게 쓴다) ── */
.ins-related{padding:40px 0 0;border-top:1px solid var(--line)}
.ins-related h2{font-size:12px;letter-spacing:.03em;color:var(--muted);margin:0 0 14px;font-weight:700}
.ins-related-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--line-strong)}
.ins-related-list a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:700;color:var(--navy);line-height:1.5}
.ins-related-list em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--muted);margin-bottom:5px}
.ins-related-list strong{display:block;font-weight:700}
.ins-related-list a span{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:4px}
.ins-related-list a:hover{text-decoration:underline;text-underline-offset:4px}
.ins-related-inline{margin-top:22px;font-size:14px;line-height:1.7;color:#4a5468}
.ins-related-inline a{color:var(--navy);font-weight:700;border-bottom:1px solid var(--line-strong)}

/* 서비스 연결은 세 종류를 글마다 골라 쓴다 — 전부 같은 CTA 가 되지 않게.
   관련 글 목록이 이미 선을 긋고 끝나므로 strip 은 선을 다시 긋지 않는다.
   두 선 사이에 남는 90px 는 내용 없는 상자로 읽힌다(390 캡처에서 확인). */
.ins-cta-strip{margin:26px 0 0}
.ins-cta-strip a{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:var(--navy)}
.ins-cta-strip a span{font-weight:400;font-size:16px}
.ins-cta-strip a:hover{text-decoration:underline;text-underline-offset:5px}
.ins-cta-quiet{margin:30px 0 0;max-width:640px}
.ins-cta-quiet p{margin:0 0 10px;font-size:14px;line-height:1.7;color:#4a5468}
.ins-cta-quiet a{font-size:13.5px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.ins-cta-box{margin:30px 0 0;padding:24px;background:var(--soft);border-top:2px solid var(--navy);max-width:700px}
.ins-cta-box h2{font-size:17px;line-height:1.45;color:var(--navy);margin:0 0 8px}
.ins-cta-box p{margin:0 0 14px;font-size:13.5px;line-height:1.7;color:#4a5468}
.ins-cta-box a{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--navy)}
.ins-cta-box a span{font-weight:400;font-size:15px}

/* ── 허브(/insights/) ───────────────────────────────── */
.ins-hub-hero{padding:34px 0 40px;border-bottom:1px solid var(--line)}
.ins-hub-hero h1{margin:0;font-size:clamp(28px,4.2vw,44px);line-height:1.28;letter-spacing:-.03em;color:var(--navy);font-weight:700;max-width:20em}
.ins-hub-hero .lead{margin:18px 0 0}
.ins-urgent{padding:40px 0;border-bottom:1px solid var(--line);background:var(--soft)}
.ins-topic{padding:44px 0;border-bottom:1px solid var(--line)}
.ins-topic:last-of-type{border-bottom:0}
.ins-topic-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:8px}
.ins-topic-head h2{font-size:22px;letter-spacing:-.025em;color:var(--navy);margin:0}
.ins-topic-head p{margin:0;font-size:12.5px;color:var(--muted);max-width:460px;line-height:1.6}
.ins-card-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 46px}
.ins-card{display:block;padding:17px 0;border-bottom:1px solid var(--line)}
.ins-card:hover{background:#fbfbfc}
.ins-card em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--muted);margin-bottom:5px}
.ins-card strong{display:block;font-size:16px;line-height:1.45;letter-spacing:-.02em;color:var(--ink);font-weight:700}
.ins-card span{display:block;font-size:13px;line-height:1.6;color:#5b6472;margin-top:6px}
.ins-card:hover strong{color:var(--navy)}
.ins-topic-head h2 a{color:var(--navy)}
.ins-topic-head h2 a:hover{text-decoration:underline;text-underline-offset:5px}
.ins-hub-cta{border-bottom:0;padding-bottom:56px}
.ins-other-cats{padding:40px 0 8px}
.ins-other-cats h2{font-size:12px;letter-spacing:.03em;color:var(--muted);margin:0 0 14px;font-weight:700}

/* ── 반응형(경계는 styles.css 와 같은 1000 / 700 / 480) ─ */
@media (max-width:1000px){
  .ins-grid{grid-template-columns:200px minmax(0,1fr);gap:40px}
  .ins-related-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}
}
@media (max-width:700px){
  .ins-article-head h1{font-size:26px;line-height:1.36}
  .ins-grid{display:block}
  .ins-rail{margin-bottom:20px}
  .ins-rail h2{font-size:20px}
  .ins-topic{padding:34px 0}
  .ins-card-list{grid-template-columns:1fr}
  .ins-related-list{grid-template-columns:1fr;gap:0}
  .ins-table{display:block;overflow:visible}
  .ins-table caption{padding-bottom:12px}
  .ins-table tbody{display:block}
  .ins-table tr{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-bottom:1px solid var(--line)}
  .ins-table thead{display:none}
  .ins-table th,.ins-table td{display:block;width:auto;padding:0;border:0;font-size:13.5px}
  .ins-table tbody th{width:auto;color:var(--navy);font-size:12px;letter-spacing:.02em;margin-bottom:4px}
  .ins-check>li{grid-template-columns:22px 1fr;font-size:13.5px}
  .ins-answer{padding:16px 17px}
  .ins-cta-box{padding:20px 18px}
}
@media (max-width:480px){
  .ins-article-head{padding:20px 0 24px}
  .ins-copy ol.steps>li{padding-left:34px}
  .ins-meta{font-size:11px;gap:6px 14px}
}