/* 여러 페이지가 같이 쓰는 부품.
   원래 index.css·contact.css 에만 있어서 하위 페이지에서 스타일이 통째로 빠졌었다
   (h1 크기·본문 폭·출처 집계·비율 표). 페이지 전용 CSS 에 공용 부품을 넣지 않는다. */

.said {
  margin-top: 16px; padding: 16px 18px; border-radius: var(--r);
  background: var(--warn-bg); border: 1px solid #f0dfc2;
}

.said .lbl { font-size: 12px; font-weight: 700; color: var(--warn); letter-spacing: .04em; margin-bottom: 8px; }

.said p { font-size: 15px; line-height: 1.7; color: #7a4d14; }

.said p strong { font-weight: 700; }

.said .when { font-size: 11.5px; color: var(--warn); margin-top: 8px; }

.hosts { flex-grow: 1; min-width: 0; }

.hosts-q {
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  padding: 12px 16px; border-radius: var(--r); background: var(--g100); margin-bottom: 14px;
}

.hosts-q em { font-style: normal; color: var(--muted); font-weight: 500; }

.host-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--hair);
}

.host-row:last-of-type { border-bottom: 0; }

.host-row .h { font-family: var(--mono); font-size: 13.5px; width: 188px; flex-shrink: 0; color: var(--ink-2); }

.host-row.ext .h { color: var(--blue-dark); font-weight: 500; }

.host-row .bar { flex-grow: 1; height: 8px; border-radius: 999px; background: var(--g100); overflow: hidden; }

.host-row .bar i { display: block; height: 100%; border-radius: 999px; background: var(--g300); }

.host-row.ext .bar i { background: var(--blue); }

.host-row .c { font-family: var(--mono); font-size: 13px; color: var(--muted); width: 26px; text-align: right; }

.host-row .tag {
  font-size: 11.5px; font-weight: 700; width: 44px; text-align: right;
  background: none; border: 0; height: auto; padding: 0; border-radius: 0; justify-content: flex-end;
}

.host-row.ext .tag { color: var(--blue); }

.host-row .tag.in { color: var(--muted); }

.lead-wide { max-width: 760px; margin-bottom: 44px; }

.lead-wide .eyebrow { margin-bottom: 16px; }

.lead-wide .sec-title { margin-bottom: 16px; }

.router {
  margin-top: 40px; padding: 26px 28px 24px;
  border-radius: var(--r-lg); background: var(--g50); border: 1px solid var(--hair);
}

.router-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }

.router-head b { font-size: 15px; font-weight: 600; color: var(--ink); }

.router-list { margin: 12px 0 16px; }

.router-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--g200);
}

.router-list li:last-child { border-bottom: 0; }

.router-list li:has(+ li.gap) { border-bottom: 0; }

.router-list li.gap { border-top: 1px solid var(--g300); }

.router-list .q {
  flex-grow: 1; font-size: 15px; color: var(--ink-2);
}

.router-list .q::before { content: "“"; }

.router-list .q::after { content: "”"; }

.router .note { line-height: 1.75; }

.router .note strong { color: var(--ink-2); font-weight: 600; }

@media (max-width: 900px) {
  .router { padding: 20px; }
  .router-list .q { font-size: 13.5px; }
}

.ev-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }

.ev-how, .ev-open {
  padding: 26px 28px; border-radius: var(--r-lg); border: 1px solid var(--line);
}

.ev-how h3, .ev-open h3 { font-size: 17px; letter-spacing: -.025em; }

.ev-how .kv { margin-top: 16px; grid-template-columns: 92px 1fr; }

.ev-how .kv dd { font-size: 14px; line-height: 1.68; }

.ev-how code {
  display: inline-block; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  background: var(--g100); padding: 4px 8px; border-radius: var(--r-sm);
  margin-bottom: 5px; word-break: break-all;
}

.ev-open { background: var(--warn-bg); border-color: #f0dfc2; }

.ev-open-head { display: flex; align-items: center; gap: 10px; }

.ev-open .checklist { margin-top: 14px; }

.ev-open .checklist .ck { background: #f6e4c4; color: var(--warn); font-size: 11px; font-weight: 800; }

.ev-open .checklist .txt { font-size: 14px; line-height: 1.68; color: #6b4a10; }

.ev-open .checklist .txt b { color: #5a3d0c; font-weight: 600; }

.ev-open .checklist .txt span { color: var(--warn); }

.ev-open .note { margin-top: 14px; color: var(--warn); }

/* 좁은 본문. 상자를 가운데로 몰면 넓은 섹션과 왼쪽 시작선이 달라져 페이지 안에서
   제목 위치가 x=96 ↔ x=316 으로 튄다. 상자는 넓게 두고 내용 폭만 줄여 왼쪽선을 맞춘다. */
.wrap-narrow > * { max-width: 760px; }
.contact .wrap-narrow > * { margin-left: auto; margin-right: auto; }

.cta-row { display: flex; justify-content: center; gap: 10px; margin: 30px 0 18px; }

@media (max-width: 900px) {
  .ev-grid { grid-template-columns: 1fr; }
  .cta-row { flex-direction: column; }
}

.router-list.types li { gap: 16px; }

.router-list.types .q { font-family: var(--sans); font-weight: 600; color: var(--ink); flex-grow: 0; flex-basis: 34%; }

.router-list.types .q::before, .router-list.types .q::after { content: none; }

.router-list.types .q em {
  display: block; font-style: normal; font-weight: 400; font-size: 13px;
  color: var(--muted); margin-top: 2px;
}

.router-list.types .rate {
  flex-grow: 1; height: 8px; border-radius: var(--r-pill);
  background: var(--g200); overflow: hidden; min-width: 60px;
}

.router-list.types .rate i { display: block; height: 100%; background: var(--cyan-ink); border-radius: inherit; }

.router-list.types li:first-child .rate i,
.router-list.types li:nth-child(2) .rate i { background: var(--g400); }

@media (max-width: 760px) {
  .router-list.types li { flex-wrap: wrap; }
  .router-list.types .q { flex-basis: 100%; }
}

.page-head { padding: 84px 0 56px; }

.page-head .eyebrow { margin-bottom: 16px; }

.page-head h1.sec-title { font-size: 42px; line-height: 1.32; }

.page-head .sec-desc { margin-top: 16px; }

@media (max-width: 760px) {
  .page-head { padding: 56px 0 40px; }
  .page-head h1.sec-title { font-size: 32px; }
}

/* 하지 않는 것 · 말씀드릴 수 없는 것 목록. × 가 긍정 체크와 같은 색이면 뜻이 뒤집혀 보인다. */
.checklist.out .ck { background: var(--miss-bg); color: var(--miss); font-weight: 800; font-size: 12px; }
.checklist.out .txt { color: var(--ink-3); }

/* ── 실제 화면 캡처 ─────────────────────────────────────────────────
   스톡 사진·생성 이미지 대신 직접 찍은 네이버 화면을 쓴다. 캡션에 출처·날짜·가림 처리를 늘 적는다. */
.shot { margin: 28px 0 0; max-width: 720px; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: var(--shadow-card);
}
.shot figcaption { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.shot figcaption .badge { margin-right: 8px; height: 24px; font-size: 12px; }
.shot figcaption b { color: var(--ink-2); font-weight: 600; }
.shot.narrow { max-width: 420px; }

@media (max-width: 900px) {
  .shot.narrow { max-width: 100%; }
}

.shot-link { display: block; border-radius: 14px; }
.shot-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* 문장 캡처는 줄이면 글자가 8px 로 뭉개진다. 좁은 화면에선 읽히는 크기로 두고 옆으로 밀어 본다 */
@media (max-width: 640px) {
  .shot.text .shot-link { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .shot.text img { width: 600px; max-width: none; }
  .shot.text figcaption::after { content: " · 옆으로 밀어서 보세요"; color: var(--cyan-ink); font-weight: 600; }
}